/* ============================================================
   Altus Conseil — design-system/sections/altus-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 altus-motion (reveal-stagger,
   marquee) ; ne ré-implémente aucun motion. Coins NETS, pas de tuile.

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

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

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

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

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

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

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

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

/* Première section de la page — respiration sous le header fixé. */
.altus-section-logos:first-child {
  padding-top: 22vh;
}

/* Contenu — colonne centrée. */
.altus-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 — bronze, UPPERCASE, 500. Unique rôle bronze de la section. */
.altus-section-logos-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: var(--altus-w-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--altus-accent);
}

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

.altus-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). */
.altus-section-logos-item {
  display: block;
  height: clamp(22px, 2.4vw, 32px);
  width: auto;
  object-fit: contain;
}

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

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

.altus-section-logos-wall .altus-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. */
.altus-section-logos-editorial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 18px;
}
.altus-section-logos-wall .altus-section-logos-title {
  max-width: 12ch;
  font-size: clamp(26px, 2.6vw, 40px);
  text-align: left;
}
.altus-section-logos-lede {
  margin: 0;
  font-size: 15px;
  font-weight: var(--altus-w-light);
  line-height: 1.6;
  color: var(--altus-fg2);
  max-width: 34ch;
}

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

/* Tuile — ratio 16/10, fond currentColor ~3.5 %, filet ~10 %, coins NETS.
   Sur ivoire currentColor = charbon (voile sombre) ; sur charbon
   currentColor = ivoire (surface claire). La respiration vient du padding. */
.altus-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: 0;
}

/* Logo — couleur naturelle, remplit la tuile (padding = respiration).
   grayscale(1) au repos → grayscale(0) au survol de la tuile. */
.altus-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;
}
.altus-section-logos-tile:hover .altus-section-logos-logo {
  filter: grayscale(0);
}
@media (prefers-reduced-motion: reduce) {
  .altus-section-logos-logo { transition: none; }
}

/* ─── Variante marquee (> 6 logos) ─────────────────────────── */
/* Réutilise .altus-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-altus-reveal (ils défilent ; visibles d'emblée à .55). */
.altus-section-logos-marquee { width: 100%; }
.altus-section-logos-marquee .altus-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 ────────────── */

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

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

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

.altus-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;
}

.altus-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. */
.altus-section-logos-captioned .altus-section-logos-item {
  height: clamp(40px, 4vw, 64px);
  filter: brightness(0) invert(1) opacity(0.8);
}
.altus-section-logos-captioned.altus-section-inverse .altus-section-logos-item {
  filter: brightness(0) opacity(0.8);
}
.altus-section-logos-captioned .altus-section-logos-item:hover {
  filter: brightness(0) invert(1) opacity(1);
}
.altus-section-logos-captioned.altus-section-inverse .altus-section-logos-item:hover {
  filter: brightness(0) opacity(1);
}

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

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

/* ────────────────────────────────────────────────────────────
   Variante broll — fond image + voile B/C + noise
   ──────────────────────────────────────────────────────────── */
.altus-section-logos[data-altus-broll] {
  background-image: var(--altus-broll);
  background-size: cover;
  background-position: center;
}
.altus-section-logos[data-altus-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 13, 0.72);
  z-index: 0;
}
.altus-section-logos.altus-section-inverse[data-altus-broll]::before {
  background: rgba(235, 229, 218, 0.88);
}
.altus-section-logos[data-altus-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) {
  .altus-section-logos-wall .altus-section-logos-content {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(28px, 7vw, 44px);
  }
  .altus-section-logos-wall .altus-section-logos-title { max-width: none; }
}

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

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