/* ============================================
   COLLECTIF WEB — HABILLAGE COMMUN
   En-tête, menu mobile, pied de page, lien d'évitement.
   Extrait tel quel des maquettes validées : ces règles sont
   identiques sur les 12 pages, elles vivent donc une seule fois.
   Chargé partout, avant la feuille propre à chaque gabarit.
   ============================================ */

/* ---- Les images de WordPress obéissent aux maquettes ----
   WordPress écrit width="1400" height="1167" sur chaque image. Ces deux
   attributs valent des déclarations CSS : la hauteur est alors figée en pixels
   et tout `aspect-ratio` posé par une page reste lettre morte — la grande photo
   d'une fiche projet s'affichait à sa hauteur brute au lieu du 21/9 dessiné.
   Les maquettes ignorent le problème : leurs images n'ont aucun attribut.
   Une règle d'un poids minimal suffit : chaque cadrage de page passe devant. */
img {
  height: auto;
}

/* Lien d'évitement — visible au focus clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 700;
  padding: 12px 18px;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Header réel (pattern accueil) */
.site-header {
  border: var(--border-w) solid var(--border);
  background: var(--bg);
  position: relative; /* ancre la note de la presse, sous le logo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.site-header .logo-img { height: 24px; width: auto; }
.logo-img--sombre { display: none; }
.dark-mode .logo-img--clair { display: none; }
.dark-mode .logo-img--sombre { display: block; }
.site-header nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-header nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 2px;
  position: relative;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--alert);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after { transform: scaleX(1); }
.site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); position: relative; }

/* Le clin d'œil du 3e basculement (esprit ludique v1) : la convention maison du
   3e geste, posée sur le seul élément que tout le monde finit par toucher. La
   note se pose à côté du bouton et jamais dans son libellé, qui annonce
   l'action et se fait lire à voix haute. Même habillage que la surprise du
   portail Agences. */
.clin {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-w) solid var(--border);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}
.clin strong { display: block; margin-bottom: 4px; }
/* La note de la presse se range sous le logo, à gauche : même habillage, autre bord. */
.clin--presse { right: auto; left: var(--space-5); }
html.js .clin { opacity: 0; transition: opacity .3s var(--ease-out); }
html.js .clin.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .clin { opacity: 1; transition: none; }
}
.site-header .theme-toggle {
  position: static;
  box-shadow: none;
  padding: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.site-header .theme-toggle:hover,
.site-header .theme-toggle:active { transform: none; box-shadow: none; }
.site-header .theme-toggle .theme-toggle__swatch {
  width: 18px;
  height: 18px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.site-header .theme-toggle:hover .theme-toggle__swatch { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--border); }

.site-header nav a[aria-current]{font-weight:700;}

/* ---- La presse qui s'emballe (esprit ludique) ----
   Maintenir le logo enfoncé deux secondes. L'encre sort d'abord du repérage,
   doucement, puis la presse s'emballe : neuf passages décalés qui tombent d'un
   coup sec, et tout revient droit.

   Aucun fichier de plus : chaque passage est le logo lui-même, découpé en
   masque et encré par le design system — donc juste en clair comme en sombre,
   et gratuit au chargement. La couche entière naît au premier appui et repart
   ensuite (garde-fou performance). Les passages se multiplient au lieu de se
   couvrir : c'est ce que fait l'encre sur le papier.

   `--charge` monte de 0 à 1 pendant l'appui ; l'@property la rend animable,
   sinon les passages attendent simplement l'emballement sans glisser avant. */
@property --charge {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.logo-lien {
  position: relative;
  display: flex; /* la couche des passages épouse le logo au pixel près */
}

.presse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --charge: 0;
  transition: --charge 260ms var(--ease-out); /* relâché avant l'heure : l'encre rentre */
}

/* Au survol : un liseré d'encre, à peine. Le logo a l'air imprimé, pas cassé.
   C'est le seul usage de `--charge` ; l'appui, lui, passe par les animations
   d'arrivée ci-dessous, une par couleur. */
.logo-lien:hover .presse {
  --charge: .18;
  transition: --charge 200ms var(--ease-out);
}

.presse__passe {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../logo/logo-clair.svg") center / contain no-repeat;
  mask: url("../logo/logo-clair.svg") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: calc(var(--charge) * var(--densite));
  transform: translate(calc(var(--dx) * var(--charge)), calc(var(--dy) * var(--charge)));
}
.dark-mode .presse__passe { mix-blend-mode: screen; }
.presse__passe--vert   { background: var(--accent); --dx: -5px;  --dy: -3px; --densite: .8; }
.presse__passe--brique { background: var(--alert);  --dx: 4px;   --dy: 2.5px; --densite: .68; }
/* L'encre arrive en dernier, c'est le temps fort : elle a besoin d'un décalage
   plus franc que les deux autres pour se voir sur les deux fonds. */
.presse__passe--encre  { background: var(--fg);     --dx: 2.8px; --dy: -2px; --densite: .62; }

/* Les trois passages, un par un — le cœur du geste.
   Une presse offset imprime une couleur par passage. Ici les trois tombent à
   la file pendant l'appui : le vert tout de suite, la brique à 650 ms, l'encre
   à 1,3 s. Chacune arrive d'un coup sec, puis dérive lentement. On les compte,
   et compter donne l'envie de rester : il en reste deux, il en reste une.
   Les trois durées sont calculées pour finir ensemble à deux secondes, juste
   avant que la presse s'emballe. */
@keyframes presse-arrivee {
  0%   { opacity: 0; transform: translate(0, 0); animation-timing-function: steps(1, end); }
  2%   {
    opacity: calc(var(--densite) * .85);
    transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55));
    animation-timing-function: cubic-bezier(.35, .1, .7, .5);
  }
  100% { opacity: var(--densite); transform: translate(var(--dx), var(--dy)); }
}
.logo-lien--appui .presse__passe { animation: presse-arrivee var(--tenue) both; }
.logo-lien--appui .presse__passe--vert   { --tenue: 2000ms; animation-delay: 0ms; }
.logo-lien--appui .presse__passe--brique { --tenue: 1350ms; animation-delay: 650ms; }
.logo-lien--appui .presse__passe--encre  { --tenue: 700ms;  animation-delay: 1300ms; }

/* L'emballement — chaque passage tombe d'un coup (steps) puis rentre au repérage. */
.presse--emballe .presse__passe--vert   { animation: presse-vert 940ms both; }
.presse--emballe .presse__passe--brique { animation: presse-brique 940ms both; }
.presse--emballe .presse__passe--encre  { animation: presse-encre 940ms both; }
.logo-lien--imprime .logo-img { animation: presse-secousse 940ms both; }

@keyframes presse-vert {
  0%   { transform: translate(-5px, -3px); opacity: .8; animation-timing-function: steps(1, end); }
  10%  { transform: translate(13px, -7px) rotate(-1.2deg); opacity: .92; animation-timing-function: steps(1, end); }
  22%  { transform: translate(-16px, 5px) rotate(.9deg); opacity: .88; animation-timing-function: steps(1, end); }
  34%  { transform: translate(9px, 9px) rotate(-.6deg); opacity: .8; animation-timing-function: steps(1, end); }
  46%  { transform: translate(-11px, -6px) rotate(1.1deg); opacity: .72; animation-timing-function: steps(1, end); }
  58%  { transform: translate(6px, 4px); opacity: .6; animation-timing-function: steps(1, end); }
  70%  { transform: translate(-4px, -3px); opacity: .48; animation-timing-function: steps(1, end); }
  82%  { transform: translate(2.5px, 2px); opacity: .34; animation-timing-function: steps(1, end); }
  92%  { transform: translate(-1px, -.6px); opacity: .18; animation-timing-function: var(--ease-out); }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes presse-brique {
  0%   { transform: translate(4px, 2.5px); opacity: .68; animation-timing-function: steps(1, end); }
  10%  { transform: translate(-11px, 6px) rotate(1deg); opacity: .8; animation-timing-function: steps(1, end); }
  22%  { transform: translate(14px, -4px) rotate(-.8deg); opacity: .76; animation-timing-function: steps(1, end); }
  34%  { transform: translate(-8px, -8px) rotate(.7deg); opacity: .7; animation-timing-function: steps(1, end); }
  46%  { transform: translate(10px, 5px) rotate(-1deg); opacity: .62; animation-timing-function: steps(1, end); }
  58%  { transform: translate(-5px, -3.5px); opacity: .52; animation-timing-function: steps(1, end); }
  70%  { transform: translate(3px, 2.5px); opacity: .4; animation-timing-function: steps(1, end); }
  82%  { transform: translate(-2px, -1.5px); opacity: .28; animation-timing-function: steps(1, end); }
  92%  { transform: translate(1px, .6px); opacity: .14; animation-timing-function: var(--ease-out); }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes presse-encre {
  0%   { transform: translate(2.8px, -2px); opacity: .62; animation-timing-function: steps(1, end); }
  10%  { transform: translate(-4px, 2px); opacity: .62; animation-timing-function: steps(1, end); }
  22%  { transform: translate(5px, -2.5px); opacity: .6; animation-timing-function: steps(1, end); }
  34%  { transform: translate(-3px, 3px); opacity: .56; animation-timing-function: steps(1, end); }
  46%  { transform: translate(4px, -2px); opacity: .5; animation-timing-function: steps(1, end); }
  58%  { transform: translate(-2px, 1.5px); opacity: .42; animation-timing-function: steps(1, end); }
  70%  { transform: translate(1.5px, -1px); opacity: .32; animation-timing-function: steps(1, end); }
  82%  { transform: translate(-1px, .8px); opacity: .22; animation-timing-function: steps(1, end); }
  92%  { transform: translate(.5px, -.4px); opacity: .1; animation-timing-function: var(--ease-out); }
  100% { transform: translate(0, 0); opacity: 0; }
}
/* La plaque encaisse : le logo servi tremble d'un pixel et demi, jamais plus. */
@keyframes presse-secousse {
  0%, 100% { transform: translate(0, 0); }
  10%  { transform: translate(1.5px, -1px); animation-timing-function: steps(1, end); }
  22%  { transform: translate(-1.5px, 1px); animation-timing-function: steps(1, end); }
  34%  { transform: translate(1px, 1px); animation-timing-function: steps(1, end); }
  46%  { transform: translate(-1px, -1px); animation-timing-function: steps(1, end); }
  58%  { transform: translate(.8px, .5px); animation-timing-function: steps(1, end); }
  70%  { transform: translate(-.5px, -.4px); animation-timing-function: steps(1, end); }
  82%  { transform: translate(.3px, .2px); }
}

/* Retenue de mouvement : rien ne se déplace, jamais (garde-fou D-054). Le
   design system coupe déjà toute animation et toute transition en !important
   (voir la fin de design-system.css) — donc le clin d'œil se joue ici sans
   l'une ni l'autre. L'appui laisse le logo droit ; à deux secondes, les trois
   passages se posent hors repérage, tiennent deux secondes, disparaissent.
   Une image imprimée de travers, offerte d'un coup, sans un mouvement. */
@media (prefers-reduced-motion: reduce) {
  .presse,
  .logo-lien:hover .presse { --charge: 0; }
  /* Les arrivées sont des animations : le raccourci global les ferait toutes
     tomber d'un coup dès l'enfoncement. Ici, l'appui ne montre rien. */
  .logo-lien--appui .presse__passe { animation: none; }
  .presse--emballe .presse__passe {
    transform: translate(calc(var(--dx) * 1.7), calc(var(--dy) * 1.7));
    opacity: var(--densite);
    animation: none;
  }
  .logo-lien--imprime .logo-img { animation: none; }
}

/* Menu mobile plein écran (D-064) */
.burger { display: none; }
.menu-mobile[hidden] { display: none; }
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--space-4);
}
.menu-mobile__top { display: flex; justify-content: flex-end; }
.menu-mobile__fermer {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--paper);
  border: var(--border-w-thin) solid var(--paper);
  font-size: 22px;
  cursor: pointer;
}
.menu-mobile nav { display: grid; gap: 4px; align-content: center; text-align: center; }
.menu-mobile nav a {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 28px);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding: 12px 0;
}
.menu-mobile nav a:hover,
.menu-mobile nav a:focus-visible { color: var(--vert-bright); }
.menu-mobile nav .btn { justify-self: center; margin-top: var(--space-5); padding: 16px 24px; color: var(--paper); border-color: var(--paper); }
@media (max-width: 800px) {
  .site-header nav { display: none; }
  .burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: var(--border-w-thin) solid var(--border);
    cursor: pointer;
    padding: 0;
  }
  .burger .lignes {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fg);
    box-shadow: 0 -6px 0 var(--fg), 0 6px 0 var(--fg);
  }
}

/* Footer réel (pattern accueil) */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: var(--space-7) clamp(24px, 4vw, 56px) var(--space-5);
}
.site-footer .top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}
.site-footer .social { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.site-footer h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vert-bright);
  margin: 0 0 var(--space-3);
  border-bottom: 1px solid rgba(237,241,239,.18);
  padding-bottom: 6px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--paper); text-decoration: none; font-family: var(--font-sans); font-size: var(--fs-small); display: inline-block; padding: 5px 0; }
.site-footer a:hover { color: var(--vert-bright); }
.site-footer .brand-col img { height: 22px; width: auto; margin-bottom: var(--space-3); }
/* La signature du pied, reprise le 10 août (commentaire n° 34). La serif
   italique s'y lisait mal à 19 px sur fond sombre. Elle passe en Archivo et
   reprend le geste des titres de la maison — la première proposition appuyée,
   la suite calme — pour sortir du lot sans crier. L'écart sous la ligne la
   détache du bloc infolettre, qui commençait à lui coller. */
.site-footer .brand-col > p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 var(--space-6);
  color: rgba(237,241,239,.8);
}
.site-footer .brand-col > p strong { font-weight: 700; color: var(--paper); }
.site-footer .infolettre { display: grid; gap: 8px; }
.site-footer .infolettre p { margin: 0; font-size: 16px; color: rgba(237,241,239,.7); }
.site-footer .infolettre input[type="email"] {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  background: var(--coal);
  color: var(--brume);
  border: 1.5px solid rgba(237,241,239,.35);
  padding: 10px 12px;
}
.site-footer .infolettre input[type="email"]:focus { border-color: var(--vert-bright); }
.site-footer .infolettre .check-row input { width: 24px; height: 24px; margin-top: 0; flex-shrink: 0; }
.site-footer .infolettre .check-row span { color: rgba(237,241,239,.75); font-size: 16px; }
.site-footer .infolettre button { justify-self: start; color: var(--paper); border-color: var(--paper); }
.site-footer .blocs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  border-top: 1px solid rgba(237,241,239,.18);
  padding: var(--space-5) 0;
}
.site-footer .blocs p { margin: 0 0 var(--space-3); font-size: 16px; color: rgba(237,241,239,.75); max-width: 38ch; }

/* Ligne légale : exception au plancher 16 px, accordée par Alexandre (D-064) */
.site-footer .sub {
  border-top: 1px solid rgba(237,241,239,.18);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(237,241,239,.55);
}
.site-footer .sub a { color: inherit; font-family: inherit; font-size: inherit; }
.site-footer .sub a:hover { color: var(--vert-bright); }

/* ====== La porte du casse-brique ======
   Trois briques au bout de la ligne légale, dans le gris du voisinage : de loin,
   une ponctuation. Au survol elles s'allument aux couleurs du jeu et se
   décrochent l'une après l'autre, comme si le point venait de passer. Le retard
   fait tout le tour de force : trois transitions décalées de 70 ms racontent une
   trajectoire que trois transitions simultanées perdraient. */
.site-footer .sub .jeu-porte { display: inline-flex; align-items: center; vertical-align: middle; padding: 5px 0 5px 10px; }
.jeu-porte__mur { display: flex; gap: 2px; }
.jeu-porte__brique {
  width: 9px;
  height: 5px;
  background: currentColor;
  opacity: .8;
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out), opacity .2s var(--ease-out);
}
.jeu-porte:hover .jeu-porte__brique,
.jeu-porte:focus-visible .jeu-porte__brique { opacity: 1; transform: translateY(-3px); }
.jeu-porte:hover .jeu-porte__brique:nth-child(1),
.jeu-porte:focus-visible .jeu-porte__brique:nth-child(1) { background: var(--vert-bright); }
.jeu-porte:hover .jeu-porte__brique:nth-child(2),
.jeu-porte:focus-visible .jeu-porte__brique:nth-child(2) { background: var(--alert); transition-delay: .07s; }
.jeu-porte:hover .jeu-porte__brique:nth-child(3),
.jeu-porte:focus-visible .jeu-porte__brique:nth-child(3) { background: var(--paper); transition-delay: .14s; }
/* Sans mouvement, les briques changent de couleur ensemble et restent en place :
   la règle globale coupe les durées, pas les retards ni les déplacements. */
@media (prefers-reduced-motion: reduce) {
  .jeu-porte .jeu-porte__brique { transition-delay: 0s !important; transform: none !important; }
}

/* ====== Le retour vers le haut ======
   Une dalle carrée posée dans l'angle, du même métal que les boutons du site :
   filet net, ombre franche au survol, aucune rondeur. Elle arrive après un écran
   de défilement et s'en va dès qu'on revient en tête de page. */
.remonter {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  border: var(--border-w-thin) solid var(--border);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .08s ease;
}
.remonter[hidden] { display: none; }
.remonter--vu { opacity: 1; transform: translateY(0); }
.remonter:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-hard); }
.remonter:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--border); }

/* Flèches des boutons */
.btn .arr { transition: transform .25s var(--ease-out); }
.btn:hover .arr { transform: translateY(-1px) translateX(4px); }

/* Fondu global au changement de thème */
html.theming, html.theming body, html.theming * {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease !important;
}

/* Responsive de l'habillage commun.
   Extrait de la section « Responsive » des maquettes : ces règles-là visent
   l'en-tête et le pied, elles suivent donc l'habillage. Le reste de la section
   reste dans la feuille de chaque gabarit. */
@media (max-width: 1000px) {
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .blocs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Pied compact : listes en 2 colonnes, marque et contact sur toute la largeur */
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .col-contact { grid-column: 1 / -1; }
  /* En-tête compact — l'empilement mangeait ~480px avant le hero à 390px */
  .site-header { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
  .site-header .logo-img { height: 20px; }
  .site-header__actions .btn { display: none; }
}

/* Le bouton secondaire d'un hero : le fond du hero reste sombre dans les deux
   modes d'affichage, son contour reste donc clair. Les maquettes accueil,
   agences et expertises le portaient en style en ligne. */
.hero .btn--sur-photo { color: var(--paper); border-color: var(--paper); }

/* Le signe d'ouverture d'une question porte le même nom qu'un composant des
   extensions Salient, qui lui pose quinze pixels sous les pieds : chaque
   question de la foire aux questions s'en trouvait rallongée d'autant. Les
   extensions partent au ménage ; d'ici là, la règle les tient à distance. */
.faq-item .q .toggle { margin: 0; }

/* Bande de logos clients — accueil, OBNL, PME et Agences la partagent.
   Elle vivait recopiée à l'identique dans les quatre feuilles de page ; elle
   tient ici depuis qu'il a fallu la faire évoluer, pour n'avoir qu'un endroit
   à corriger. Chaque page garde ses écarts chez elle. */
.logo-marquee { overflow: hidden; }
.logo-marquee__piste { display: flex; width: max-content; animation: logos-defile 36s linear infinite; }
.logo-groupe { display: flex; gap: 12px; padding-right: 12px; }
/* La piste avance d'exactement une copie de la liste, puis reboucle sans saut.
   `--copies` est posé par parties/bande-logos.php, qui en met assez pour que la
   piste couvre toujours l'écran. */
.logo-marquee__piste { --copies: 2; }
@keyframes logos-defile { to { transform: translateX(calc(-100% / var(--copies))); } }
html:not(.js) .logo-marquee__piste { animation: none; }
@media (prefers-reduced-motion: reduce) { .logo-marquee__piste { animation: none; } }

/* Deux rangées en sens opposés (D-060) : vitesses légèrement différentes pour un
   défilement organique, pause au survol pour lire un nom. */
.logo-marquee + .logo-marquee { margin-top: 12px; }
.logo-marquee--inverse .logo-marquee__piste { animation-direction: reverse; animation-duration: 44s; }
.logo-marquee:hover .logo-marquee__piste { animation-play-state: paused; }

/* La pastille claire tient dans les deux modes : elle rend à chaque logo le fond
   blanc pour lequel il a été dessiné. Les passer en monochrome unifierait la
   rangée, mais viderait les marques dessinées en réserve (Forêt ô Cascades,
   Méga Vrac, Renaissance y perdaient tout leur intérieur). Un logo illisible ne
   prouve rien. Encre fixe pour le repli texte : le fond, lui, ne change jamais. */
.logo-cell {
  min-width: 180px;
  min-height: 84px;
  display: grid;
  place-items: center;
  padding: 12px 16px;
  background: var(--paper-soft);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Les fichiers font 380 × 120, deux fois la taille d'affichage, pour rester nets
   sur les écrans à forte densité. Chaque logo y est déjà mis à l'échelle par
   l'aire de son encre (outils/normaliser-logos.sh) : une seule règle suffit. */
.logo-cell img { display: block; width: 190px; height: 60px; }

/* En mode sombre la pastille descend d'un cran : à pleine clarté, une rangée de
   plaques blanches défilantes éblouit. Elle reste assez claire pour porter les
   logos dessinés pour du papier blanc. */
.dark-mode .logo-cell { background: #ccd8d2; }

@media (max-width: 600px) {
  .logo-cell { min-height: 72px; padding: 10px 14px; }
  .logo-cell img { width: 152px; height: 48px; }
}