/* ============================================================
   Revalta by Altus Conseil — design-system/sections/revalta-section-logos.css
   ------------------------------------------------------------
   « Partenaires & distinctions » — un composant, deux présets.
   Logos MONOCHROMES, calmes (jamais en couleurs criardes), traités
   en SILHOUETTE pour une uniformité maximale. Ton « Architecture du
   calme ». Se BRANCHE sur la couche revalta-motion (reveal-stagger,
   marquee) ; ne ré-implémente aucun motion. Coins NETS, pas de tuile.

   Class names — convention §00 (préfixe .revalta-section-logos) :
     .revalta-section-logos                       (<section>)
       .revalta-section-logos-content             (colonne centrée, reveal-stagger)
         .revalta-section-logos-eyebrow           (sur-titre bleu encre)
         .revalta-section-logos-row               (préset partenaires — rangée flex)
           .revalta-section-logos-item            (<img> logo silhouette)
         .revalta-section-logos-marquee           (variante >6 logos — réutilise .revalta-marquee)

   Préset « mur de tuiles » — .revalta-section-logos.revalta-section-logos-wall
   (rendu PAR DÉFAUT des partenaires) :
       .revalta-section-logos-content             (grille 2 colonnes : éditorial | tuiles)
         .revalta-section-logos-editorial         (bloc de gauche — eyebrow + titre + lede)
           .revalta-section-logos-eyebrow
           .revalta-section-logos-title
           .revalta-section-logos-lede            (courte lede, fg2)
         .revalta-section-logos-tiles             (grille de tuiles, repeat(N,1fr) — N via data-revalta-logos-cols, défaut 2)
           .revalta-section-logos-tile            (tuile 16/10, fond currentColor 3.5%, filet 10%, coins NETS)
             .revalta-section-logos-logo          (<img> logo COULEUR NATURELLE, grayscale→couleur au survol)

   Préset « distinctions » — .revalta-section-logos.revalta-section-logos-captioned :
       .revalta-section-logos-content
         .revalta-section-logos-header            (eyebrow + titre)
           .revalta-section-logos-title           (h2, Regular 400)
         .revalta-section-logos-grid              (auto-fit, reveal-stagger)
           .revalta-section-logos-credential      (<figure> logo + légende)
             .revalta-section-logos-item          (<img> logo, plus grand)
             .revalta-section-logos-caption       (<figcaption>)

   Variantes de fond — quatre combinaisons, comme le reste du DS :
     A      .revalta-section-logos                              papier plat
     B      .revalta-section-logos[data-revalta-broll]            papier + image
     C-flat .revalta-section-logos.revalta-section-inverse        marine plat
     C      .revalta-section-logos.revalta-section-inverse[data-revalta-broll]

   Silhouette : sur fond papier, logos en encre (brightness(0) invert(1)) ;
   sur fond marine, logos en papier (brightness(0)). Repos opacity .55
   (partenaires) / .8 (distinctions, c'est de l'info) → 1 au survol.

   Requiert : colors_and_type.css + revalta-motion.css/.js.
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */

.revalta-section-logos {
  position: relative;
  background: var(--revalta-bg);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;
  padding-block: clamp(72px, 11vh, 140px);
  padding-inline: var(--revalta-web-pad-x);
}

/* Première section de la page : compensation globale du header fixe
   (body.revalta main > :first-child, colors_and_type.css). Rien ici. */

/* Contenu — colonne centrée. */
.revalta-section-logos-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(36px, 5vw, 60px);
}

/* Sur-titre — bleu encre, UPPERCASE, 500. Unique rôle bleu encre de la section. */
.revalta-section-logos-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--revalta-accent);
}

/* ─── Préset « partenaires » — rangée silhouette ───────────── */

.revalta-section-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
}

/* Logo — HAUTEUR OPTIQUE uniforme, largeur auto. Silhouette monochrome.
   La teinte de repos (.55) est portée par le FILTRE opacity() — pas par la
   prop CSS opacity — pour ne PAS entrer en conflit avec le reveal de la
   couche motion (qui anime, lui, la prop opacity 0→1). */
.revalta-section-logos-item {
  display: block;
  height: clamp(22px, 2.4vw, 32px);
  width: auto;
  object-fit: contain;
}

/* Silhouette par thème + repos .55 (partenaires). */
.revalta-section-logos .revalta-section-logos-item {
  filter: brightness(0) opacity(0.55);
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-item {
  filter: brightness(0) invert(1) opacity(0.55);
}
.revalta-section-logos .revalta-section-logos-item:hover {
  filter: brightness(0) opacity(1);
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-item:hover {
  filter: brightness(0) invert(1) opacity(1);
}

/* Transition — spécificité (0,3,0) pour battre la règle de reveal de la
   couche (html[data-revalta-motion-ready] [data-revalta-reveal], (0,2,1)) et
   RÉ-INCLURE opacity/transform : le reveal anime toujours, ET le survol
   transitionne le filtre. */
.revalta-section-logos .revalta-section-logos-row .revalta-section-logos-item,
.revalta-section-logos .revalta-section-logos-marquee .revalta-section-logos-item,
.revalta-section-logos .revalta-section-logos-grid .revalta-section-logos-item {
  transition:
    filter    var(--revalta-motion-dur-fast) var(--revalta-ease-inout),
    opacity   var(--revalta-motion-dur)      var(--revalta-ease),
    transform var(--revalta-motion-dur)      var(--revalta-ease);
}

/* ─── Préset « mur de tuiles » — titre latéral + grille ─────
   Rendu PAR DÉFAUT du bloc partenaires. À GAUCHE un bloc éditorial
   (eyebrow + titre + courte lede, aligné à gauche, ~260px) ; à DROITE
   une grille de tuiles repeat(N,1fr) — N paramétrable via
   data-revalta-logos-cols (défaut 2). Contrairement aux autres présets,
   les logos gardent leur COULEUR NATURELLE (fond transparent), pas de
   silhouette : grayscale(1) au repos → grayscale(0) au survol de la tuile. */

.revalta-section-logos-wall .revalta-section-logos-content {
  display: grid;
  grid-template-columns: clamp(200px, 24vw, 260px) minmax(0, 1fr);
  align-items: center;
  text-align: left;
  gap: clamp(40px, 6vw, 96px);
}

/* Bloc éditorial — aligné à gauche. */
.revalta-section-logos-editorial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
}
.revalta-section-logos-wall .revalta-section-logos-title {
  max-width: 12ch;
  font-size: clamp(26px, 2.6vw, 40px);
  text-align: left;
}
.revalta-section-logos-lede {
  margin: 0;
  font-size: 15px;
  font-weight: var(--revalta-w-light);
  line-height: 1.6;
  color: var(--revalta-fg2);
  max-width: 34ch;
}

/* Grille de tuiles — 2 logos par ligne par défaut. */
.revalta-section-logos-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  width: 100%;
}
.revalta-section-logos-wall[data-revalta-logos-cols="1"] .revalta-section-logos-tiles { grid-template-columns: 1fr; }
.revalta-section-logos-wall[data-revalta-logos-cols="3"] .revalta-section-logos-tiles { grid-template-columns: repeat(3, 1fr); }
.revalta-section-logos-wall[data-revalta-logos-cols="4"] .revalta-section-logos-tiles { grid-template-columns: repeat(4, 1fr); }

/* Tuile — ratio 16/10, fond currentColor ~3.5 %, filet ~10 %, coins NETS.
   Sur encre currentColor = papier (voile sombre) ; sur papier
   currentColor = encre (surface claire). La respiration vient du padding. */
.revalta-section-logos-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: clamp(20px, 2.4vw, 36px);
  background: color-mix(in srgb, currentColor 3.5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: var(--revalta-r-card);   /* identité : tuiles 20 px */
}

/* Logo — couleur naturelle, remplit la tuile (padding = respiration).
   grayscale(1) au repos → grayscale(0) au survol de la tuile. */
.revalta-section-logos-logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 0.2s ease;
}
.revalta-section-logos-tile:hover .revalta-section-logos-logo {
  filter: grayscale(0);
}
@media (prefers-reduced-motion: reduce) {
  .revalta-section-logos-logo { transition: none; }
}

/* ─── Variante marquee (> 6 logos) ─────────────────────────── */
/* Réutilise .revalta-marquee de la couche motion : DEUX groupes identiques
   (le 2e aria-hidden), translation −50 % sans couture, pause au survol,
   reduced-motion → rangée statique scrollable. Les items NE portent PAS
   data-revalta-reveal (ils défilent ; visibles d'emblée à .55). */
.revalta-section-logos-marquee { width: 100%; }
.revalta-section-logos-marquee .revalta-marquee-group {
  /* gap entre items + padding = la moitié du gap, pour une distance ÉGALE
     de part et d'autre de la couture entre les deux groupes. */
  gap: clamp(32px, 5vw, 72px);
  padding-inline: clamp(16px, 2.5vw, 36px);
}

/* ─── Préset « distinctions » — grille légendée ────────────── */

.revalta-section-logos-captioned .revalta-section-logos-content {
  gap: clamp(44px, 6vw, 72px);
}

.revalta-section-logos-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 26ch;
}

.revalta-section-logos-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: var(--revalta-w-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--revalta-fg1);
  text-wrap: balance;
}

.revalta-section-logos-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  justify-items: center;
}

.revalta-section-logos-credential {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

/* Distinctions : logo plus grand, repos .8 (c'est de l'info, pas du décor).
   Rangé APRÈS les règles partenaires → spécificité égale, source order gagne. */
.revalta-section-logos-captioned .revalta-section-logos-item {
  height: clamp(40px, 4vw, 64px);
  filter: brightness(0) opacity(0.8);
}
.revalta-section-logos-captioned.revalta-section-inverse .revalta-section-logos-item {
  filter: brightness(0) invert(1) opacity(0.8);
}
.revalta-section-logos-captioned .revalta-section-logos-item:hover {
  filter: brightness(0) opacity(1);
}
.revalta-section-logos-captioned.revalta-section-inverse .revalta-section-logos-item:hover {
  filter: brightness(0) invert(1) opacity(1);
}

.revalta-section-logos-caption {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--revalta-fg2);
  text-wrap: balance;
}

/* ────────────────────────────────────────────────────────────
   Variante inverse — fond marine (C-flat / C)
   ──────────────────────────────────────────────────────────── */
.revalta-section-logos.revalta-section-inverse {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-eyebrow { color: var(--revalta-accent); }
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-title   { color: var(--revalta-fg1-inverse); }
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-caption { color: var(--revalta-fg2-inverse); }

/* ────────────────────────────────────────────────────────────
   Variante broll — fond image + voile B/C + noise
   ──────────────────────────────────────────────────────────── */
.revalta-section-logos[data-revalta-broll] {
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
}
.revalta-section-logos[data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-logos.revalta-section-inverse[data-revalta-broll]::before {
  background: var(--revalta-veil-inverse);
}
.revalta-section-logos[data-revalta-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* ─── Responsive ───────────────────────────────────────────── */

/* Mur de tuiles — empilement titre au-dessus / grille en dessous. */
@media (max-width: 760px) {
  .revalta-section-logos-wall .revalta-section-logos-content {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(28px, 7vw, 44px);
  }
  .revalta-section-logos-wall .revalta-section-logos-title { max-width: none; }
}

/* Tuiles — 2 colonnes maintenues, 1 seule si trop étroit. */
@media (max-width: 440px) {
  .revalta-section-logos-wall:not([data-revalta-logos-cols]) .revalta-section-logos-tiles,
  .revalta-section-logos-wall[data-revalta-logos-cols="2"] .revalta-section-logos-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .revalta-section-logos-tiles { gap: clamp(12px, 4vw, 18px); }
}

@media (max-width: 640px) {
  .revalta-section-logos {
    padding-block: clamp(56px, 10vh, 100px);
    padding-inline: 22px;
  }
  .revalta-section-logos-row { gap: clamp(24px, 7vw, 44px); }
  .revalta-section-logos-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(28px, 7vw, 40px);
  }
}

/* ────────────────────────────────────────────────────────────
   Identité (28/09/2026) — panneau image de la home
   Cas : .revalta-section-logos.revalta-section-inverse[data-revalta-contained][data-revalta-broll]
   En-tête à gauche (eyebrow · h2 · lede), rangées de logos en verre
   dépoli (une rangée = un libellé + une liste de logos), chiffres.
     .revalta-section-logos-content
       .revalta-section-logos-head        (eyebrow · -title · -lede)
       .revalta-section-logos-rows
         .revalta-section-logos-row       (grille libellé | logos — scopée à -rows :
                                           la rangée silhouette du préset partenaires est intacte)
           p                              (libellé, 13 px capitales)
           ul > li > img.revalta-section-logos-item
       .revalta-section-logos-stats > div (strong + texte)
   ──────────────────────────────────────────────────────────── */
.revalta-section-logos[data-revalta-contained] .revalta-section-logos-content {
  align-items: stretch;
  text-align: left;
  gap: clamp(32px, 4vw, 56px);
}
.revalta-section-logos-head {
  display: grid;
  gap: 18px;
  max-width: 780px;
  text-align: left;
}
.revalta-section-logos-head .revalta-section-logos-title {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: var(--revalta-w-title);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: none;
  text-align: left;
}
.revalta-section-logos-head .revalta-section-logos-lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-head .revalta-section-logos-lede { color: var(--revalta-fg1-inverse); }

.revalta-section-logos-rows { display: grid; gap: 12px; width: 100%; }
.revalta-section-logos-rows .revalta-section-logos-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
  gap: 20px 40px;
  align-items: center;
  justify-content: start;
  padding: 22px 28px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid var(--revalta-sep);
  border-radius: var(--revalta-r-card);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-rows .revalta-section-logos-row {
  background: rgba(245, 243, 238, 0.08);
  border-color: var(--revalta-sep-inverse);
}
.revalta-section-logos-rows .revalta-section-logos-row > p {
  margin: 0;
  font-size: 13px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: inherit;
}
.revalta-section-logos-rows .revalta-section-logos-row > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.revalta-section-logos .revalta-section-logos-rows .revalta-section-logos-item {
  height: clamp(22px, 2.2vw, 30px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) opacity(0.85);
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-rows .revalta-section-logos-item {
  filter: brightness(0) invert(1);
}

.revalta-section-logos-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 56px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--revalta-fg1);
  text-align: left;
}
.revalta-section-logos.revalta-section-inverse .revalta-section-logos-stats { color: var(--revalta-fg1-inverse); }
.revalta-section-logos-stats > div { display: grid; gap: 8px; max-width: 30ch; }
.revalta-section-logos-stats strong {
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: var(--revalta-w-title);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .revalta-section-logos-rows .revalta-section-logos-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .revalta-section-logos-stats { gap: 20px 32px; }
}