/* ==========================================================================
   TENDANCE & CLASSIC — feuille de style unique
   ==========================================================================

   Le contrat : TOUTE décision visuelle vit ici. Les pages ne contiennent
   aucun bloc <style> et aucun attribut style= autre qu'une custom property
   (--i, --pos…). S'il manque quelque chose à une page, on l'ajoute ici ; on
   n'écrit jamais une règle isolée dans le HTML. Une divergence entre pages
   est un bug, et _docs/check.py la détecte.

   Le registre : l'atelier de nuit. Noir chaud et os en alternance, laiton
   en filet, photographies grandes et sombres, titrage capital très espacé.
   Aucune ombre portée, aucune lueur, aucun coin rond : ce qui fait cher
   ici, c'est l'échelle, le vide et le contraste entre les surfaces.

   SURFACES ET JETONS SÉMANTIQUES. Chaque composant lit --encre, --encre-2,
   --filet, --accent… et jamais une couleur brute. Une section sombre ne
   redéfinit que ces jetons (.section--sombre) : tout ce qu'elle contient
   s'adapte sans qu'on écrive une règle par composant.

   SOMMAIRE
     0. Jetons            5. Boutons et liens      10. Comparateur avant/après
     1. Base              6. Panneaux et listes    11. Pied, appel, barre
     2. Typographie       7. Photographie          12. Visionneuse
     3. Mise en page      8. Hauts de page         13. Mouvement
     4. En-tête           9. Scène des métiers
   ========================================================================== */

/* --- 0. Jetons ---------------------------------------------------------- */
:root{
  color-scheme:light;              /* volontairement mono-thème : pas de mode sombre système */

  /* Surfaces claires. Le fond de page est --os-1, un blanc cassé chaud. */
  --os-0:#ffffff;
  --os-1:#faf8f4;
  --os-2:#f2eee6;
  --os-3:#e7e1d5;

  /* Surfaces sombres. --noir-900 est l'aplat des sections sombres ;
     --noir-950 celui qui se trouve derrière les photographies. */
  --noir-950:#0c0a08;
  --noir-900:#14110d;
  --noir-800:#1f1b15;
  --gris-600:#574f44;   /* texte secondaire sur clair — 6,2:1 sur --os-3 */
  --gris-300:#a8a094;   /* JAMAIS du texte lu */

  /* Laiton. --laiton-700 est le seul qui porte du texte sur fond clair
     (5,3:1). --laiton-500 ne fait que des filets sur clair (2,4:1) mais
     devient lisible sur le noir (6,1:1) : c'est lui qui écrit en sombre. */
  --laiton-700:#6f5629;
  --laiton-500:#b08d4f;
  --laiton-300:#d9c39a;  /* grands numéros sur noir uniquement — 10,8:1 */

  --rouge-700:#8c2b26;

  --trait:rgba(20,17,13,.14);
  --trait-fort:rgba(20,17,13,.30);
  --trait-clair:rgba(250,248,244,.16);
  --trait-clair-fort:rgba(250,248,244,.38);

  /* Jetons sémantiques — la surface claire par défaut. */
  --fond:var(--os-1);
  --encre:var(--noir-900);
  --encre-2:var(--gris-600);
  --accent:var(--laiton-700);        /* le laiton qui écrit */
  --accent-filet:var(--laiton-500);  /* le laiton qui souligne */
  --filet:var(--trait);
  --filet-fort:var(--trait-fort);
  --anneau-focus:var(--noir-900);

  --f-titre:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-texte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --fs-3xs:.6875rem;
  --fs-2xs:.75rem;
  --fs-xs:.8125rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-md:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-xl:clamp(1.25rem,1.7vw,1.45rem);
  --fs-2xl:clamp(1.5rem,2.4vw,2rem);
  --fs-3xl:clamp(1.75rem,3.2vw,2.75rem);
  --fs-4xl:clamp(2.1rem,4.4vw,3.75rem);
  /* L'affiche du haut de page : la seule taille vraiment grande du site.
     Elle tient par la graisse 300 et l'interlettrage, pas par le gras. */
  --fs-affiche:clamp(2.2rem,7.2vw,6.25rem);
  --fs-enonce:clamp(1.45rem,2.9vw,2.6rem);

  --lh-titre:1.08;
  --lh-texte:1.65;

  --ls-titre:.13em;
  --ls-affiche:.09em;
  --ls-large:.09em;
  --ls-libelle:.18em;

  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:3rem;    --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;   --sp-11:11rem;

  --section-y:clamp(5rem,10vw,10.5rem);
  --wrap-max:78rem;
  --wrap-etroit:46rem;
  --wrap-large:90rem;
  --wrap-pad:clamp(1.25rem,5vw,4.5rem);
  --entete-h:80px;

  --r-1:0;          /* zéro, partout. Un coin arrondi coûte le registre. */
  --r-cercle:50%;

  --t-court:160ms;
  --t-base:320ms;
  --t-long:720ms;
  --t-tres-long:1200ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-sortie:cubic-bezier(.16,1,.3,1);
}

/* La surface sombre : un seul endroit redéfinit les jetons, et chaque
   composant posé dedans — titres, filets, listes, boutons — suit. */
.section--sombre,.affiche-une,.affiche-page,.bande-infos,.appel,.pied,.visionneuse{
  --fond:var(--noir-900);
  --encre:var(--os-0);
  --encre-2:rgba(242,238,230,.74);
  --accent:var(--laiton-500);
  --accent-filet:var(--laiton-500);
  --filet:var(--trait-clair);
  --filet-fort:var(--trait-clair-fort);
  --anneau-focus:var(--os-0);
  background:var(--fond);
  color:var(--encre-2);
}

/* --- 1. Base ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; }}

body{
  margin:0;
  background:var(--os-1);
  color:var(--noir-900);
  font-family:var(--f-texte);
  font-size:var(--fs-md);
  line-height:var(--lh-texte);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  overflow-x:hidden;
}
body.est-verrouille{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
figure{ margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
dl,dd,dt{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--anneau-focus);
  outline-offset:3px;
  border-radius:var(--r-1);
}
::selection{ background:var(--laiton-500); color:var(--noir-900); }

.hors-ecran{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.saut-contenu{
  position:absolute; top:0; left:50%; transform:translate(-50%,-140%);
  z-index:120; padding:var(--sp-3) var(--sp-5);
  background:var(--noir-900); color:var(--os-1);
  font-size:var(--fs-2xs); letter-spacing:var(--ls-libelle); text-transform:uppercase;
}
.saut-contenu:focus{ transform:translate(-50%,0); }

/* --- 2. Typographie ----------------------------------------------------- */
h1,h2,h3,h4{ margin:0; font-weight:400; text-wrap:balance; }

.affiche,.titre{
  font-family:var(--f-titre);
  color:var(--encre);
  text-transform:uppercase;
  font-weight:300;
  letter-spacing:var(--ls-titre);
  font-variant-numeric:lining-nums;
}
.affiche{ font-size:var(--fs-affiche); line-height:1; letter-spacing:var(--ls-affiche); }
.titre{ font-size:var(--fs-3xl); line-height:var(--lh-titre); }
.titre--grand{ font-size:var(--fs-4xl); }
.titre--petit{ font-size:var(--fs-2xl); }

/* L'affiche se compose ligne par ligne : chaque ligne est un bloc masqué
   qui monte à l'ouverture de la page. Sans JS, et en mouvement réduit,
   elles sont simplement là. */
.affiche__ligne{ display:block; overflow:hidden; }
.affiche__ligne > span{
  display:block;
  transform:translateY(110%);
  transition:transform var(--t-tres-long) var(--ease-sortie);
  transition-delay:calc(180ms + var(--i,0) * 110ms);
}
/* La ligne en accent est en champagne (--laiton-300), pas en laiton : sur la
   tôle grise du haut de page, le laiton tombait à 2,3:1. Mesuré au pixel. */
.affiche__ligne--accent > span{ color:var(--laiton-300); }
.est-prete .affiche__ligne > span,
.sans-js .affiche__ligne > span{ transform:none; }

/* Le libellé capitale : la signalétique. Petit, très espacé, en Inter. */
.libelle{
  font-family:var(--f-texte);
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  line-height:1.4;
  color:var(--encre-2);
}
.libelle--laiton{ color:var(--accent); }
/* Le libellé à filet : un trait de laiton devant le mot. */
.libelle--filet{ display:inline-flex; align-items:center; gap:var(--sp-4); }
.libelle--filet::before{ content:''; width:32px; height:1px; background:var(--accent-filet); flex:none; }

.chapo{
  font-size:var(--fs-xl);
  line-height:1.55;
  font-weight:300;
  color:var(--encre-2);
  max-width:38rem;
  text-wrap:pretty;
}
.texte{ color:var(--encre-2); max-width:38rem; }
.texte > * + *{ margin-top:var(--sp-4); }
.texte strong{ color:var(--encre); font-weight:600; }
.texte a, .specs__valeur a{ color:var(--encre); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.texte a:hover, .specs__valeur a:hover{ color:var(--accent); }
.discret{ color:var(--encre-2); font-size:var(--fs-sm); }

/* L'énoncé : la grande phrase de positionnement, sans image, juste après
   le haut de page. C'est la convention du segment : deux phrases, en
   grand, en léger, et rien autour. */
.enonce{
  font-family:var(--f-titre);
  font-size:var(--fs-enonce);
  line-height:1.3;
  font-weight:300;
  letter-spacing:.005em;
  color:var(--encre);
  max-width:30ch;
  text-wrap:pretty;
}
.enonce em{ font-style:normal; color:var(--accent); }

.liste{ list-style:none; }
.liste li{ position:relative; padding-left:var(--sp-5); color:var(--encre-2); }
.liste li + li{ margin-top:var(--sp-3); }
.liste li::before{
  content:''; position:absolute; left:0; top:.66em;
  width:10px; height:1px; background:var(--accent-filet);
}

/* Le numéro. Petit partout, sauf dans l'en-tête de section où il est le
   geste éditorial du site. Sur fond clair il est en --laiton-700 (6,5:1) ;
   sur fond sombre --laiton-300 (10,8:1). */
.numero{
  display:block;
  font-family:var(--f-texte);
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.entete-section .numero{
  font-family:var(--f-titre);
  font-size:clamp(2.5rem,4.6vw,4rem);
  line-height:.85;
  font-weight:300;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  margin-bottom:var(--sp-4);
}
.section--sombre .entete-section .numero{ color:var(--laiton-300); }

/* --- 3. Mise en page ---------------------------------------------------- */
.enveloppe{ width:100%; max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--wrap-pad); }
.enveloppe--etroite{ max-width:var(--wrap-etroit); }
.enveloppe--large{ max-width:var(--wrap-large); }

.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--os-2); }

.pile{ display:flex; flex-direction:column; gap:var(--pile-gap,var(--sp-4)); }
.rangee{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--rangee-gap,var(--sp-4)); }
.centre{ margin-inline:auto; text-align:center; }

.duo{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:start;
}
.duo--egal{ grid-template-columns:1fr 1fr; }
.duo--inverse{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.duo__colle{ position:sticky; top:calc(var(--entete-h) + var(--sp-6)); }
.grille-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--grille-gap,clamp(1.5rem,3vw,2.5rem)); }
.grille-2--centree{ align-items:center; }
.grille-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grille-gap,clamp(1.5rem,3vw,2.5rem)); }
.grille-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grille-gap,clamp(1.5rem,3vw,2.5rem)); }

@media (max-width:1000px){
  .grille-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:880px){
  .duo,.duo--egal,.duo--inverse{ grid-template-columns:1fr; }
  .duo__colle{ position:static; }
  .grille-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:620px){
  .grille-2,.grille-3,.grille-4{ grid-template-columns:1fr; }}

.entete-section{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:var(--sp-5);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--filet);
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.entete-section__note{ text-align:right; }
@media (max-width:620px){
  .entete-section{ grid-template-columns:1fr; align-items:start; }
  .entete-section__note{ text-align:left; }}

/* --- 4. En-tête et navigation ------------------------------------------ */
/* L'en-tête est FIXE et traverse deux états. Au repos, posé sur un haut de
   page sombre, il est transparent et écrit en clair (.est-sur-sombre, posé
   par le script tant que le haut de page passe dessous). Dès qu'il quitte
   la zone sombre, il redevient une barre os. Sans JavaScript il reste os :
   lisible dans tous les cas. */
.entete{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(250,248,244,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--trait);
  color:var(--noir-900);
}
.est-prete .entete{
  transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.entete__interieur{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6);
  min-height:var(--entete-h);
}
.marque{ display:flex; align-items:center; min-height:44px; }
.marque__logo{ height:46px; width:auto; flex:none; transition:filter var(--t-base) var(--ease); }

.nav__liste{ display:flex; align-items:center; gap:clamp(1.25rem,2.6vw,2.6rem); list-style:none; }
.nav__lien{
  position:relative;
  display:flex; align-items:center;
  min-height:44px;
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  color:var(--gris-600);
  transition:color var(--t-court) var(--ease);
}
.nav__lien::after{
  content:''; position:absolute; left:0; right:100%; bottom:14px;
  height:1px; background:currentColor;
  transition:right var(--t-base) var(--ease);
}
.nav__lien:hover{ color:var(--noir-900); }
.nav__lien:hover::after{ right:0; }
.nav__lien.est-courant{ color:var(--noir-900); }
.nav__lien.est-courant::after{ right:0; background:var(--laiton-500); }

.entete__actions{ display:flex; align-items:center; gap:var(--sp-5); }
.bouton--compact{ min-height:44px; padding:var(--sp-2) var(--sp-5); }
.entete__tel{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px;
  font-size:var(--fs-sm);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  white-space:nowrap;
  color:var(--noir-900);
}
.entete__tel .icone{ width:15px; height:15px; color:var(--laiton-700); }
.entete__tel:hover{ color:var(--laiton-700); }
/* Sous 1280px le numéro s'efface : le bouton devis appelle le même numéro.
   Cette règle doit rester APRÈS la déclaration de base — à spécificité égale,
   c'est la dernière qui gagne, et placée avant elle ne masquait rien. */
@media (max-width:1280px){ .entete__tel{ display:none; }}

/* L'état « sur sombre ». Le voile en dégradé n'est pas décoratif : il garantit
   la lecture du menu sur la zone la plus claire d'une photographie. Le logo,
   dont les traits sont en encre, passe en blanc par filtre : une seule source
   pour le dessin, aucun second fichier à maintenir. */
.entete.est-sur-sombre{
  background:transparent;
  background-image:linear-gradient(to bottom,rgba(12,10,8,.55),rgba(12,10,8,0));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  color:var(--os-1);
  --anneau-focus:var(--os-0);
}
.entete.est-sur-sombre .marque__logo{ filter:brightness(0) invert(1); }
.entete.est-sur-sombre .nav__lien{ color:rgba(250,248,244,.80); }
.entete.est-sur-sombre .nav__lien:hover,
.entete.est-sur-sombre .nav__lien.est-courant{ color:var(--os-0); }
.entete.est-sur-sombre .entete__tel{ color:var(--os-0); }
.entete.est-sur-sombre .entete__tel .icone{ color:var(--laiton-500); }
.entete.est-sur-sombre .bouton--plein{ background:var(--os-0); color:var(--noir-900); border-color:var(--os-0); }
.entete.est-sur-sombre .bouton--plein:hover{ background:var(--laiton-500); border-color:var(--laiton-500); }
.entete.est-sur-sombre .bouton-menu{ border-color:rgba(250,248,244,.5); }
.entete.est-sur-sombre .bouton-menu__trait,
.entete.est-sur-sombre .bouton-menu__trait::before,
.entete.est-sur-sombre .bouton-menu__trait::after{ background:var(--os-0); }
.entete.est-sur-sombre .bouton-menu[aria-expanded="true"] .bouton-menu__trait{ background:transparent; }
/* Tiroir ouvert : l'en-tête redevient os quoi qu'il y ait dessous, sinon le
   menu s'écrit en clair sur un panneau clair. */
.entete:has(.bouton-menu[aria-expanded="true"]){
  background:var(--os-1); background-image:none; color:var(--noir-900);
  border-bottom-color:var(--trait); --anneau-focus:var(--noir-900);
}
.entete:has(.bouton-menu[aria-expanded="true"]) .marque__logo{ filter:none; }
.entete:has(.bouton-menu[aria-expanded="true"]) .bouton-menu{ border-color:var(--trait-fort); }
.entete:has(.bouton-menu[aria-expanded="true"]) .bouton-menu__trait::before,
.entete:has(.bouton-menu[aria-expanded="true"]) .bouton-menu__trait::after{ background:var(--noir-900); }

.bouton-menu{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--trait-fort);
  cursor:pointer;
  transition:border-color var(--t-base) var(--ease);
}
.bouton-menu__trait{ display:block; width:18px; height:1px; background:var(--noir-900); position:relative; }
.bouton-menu__trait::before,.bouton-menu__trait::after{
  content:''; position:absolute; left:0; width:18px; height:1px; background:var(--noir-900);
  transition:transform var(--t-base) var(--ease),opacity var(--t-court) var(--ease);
}
.bouton-menu__trait::before{ top:-6px; }
.bouton-menu__trait::after{ top:6px; }
.bouton-menu[aria-expanded="true"] .bouton-menu__trait{ background:transparent; }
.bouton-menu[aria-expanded="true"] .bouton-menu__trait::before{ transform:translateY(6px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__trait::after{ transform:translateY(-6px) rotate(-45deg); }

.tiroir{
  position:fixed; inset:var(--entete-h) 0 0;
  z-index:55;
  background:var(--os-1);
  padding:var(--sp-7) var(--wrap-pad) var(--sp-9);
  display:flex; flex-direction:column; gap:var(--sp-2);
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s linear var(--t-base);
  overflow-y:auto;
}
.tiroir.est-ouvert{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.tiroir a:not(.bouton){
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px;
  font-family:var(--f-titre);
  font-size:var(--fs-2xl);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:var(--ls-titre);
  color:var(--noir-900);
  border-bottom:1px solid var(--trait);
}
.tiroir a:not(.bouton)::after{ content:'→'; font-size:var(--fs-lg); color:var(--laiton-700); }
.tiroir a:not(.bouton).est-courant{ color:var(--laiton-700); }
.tiroir__pied{ margin-top:var(--sp-6); }

/* Le tiroir prend le relais dès 1040px : en dessous, logo, quatre liens et
   bouton ne tiennent plus sur une ligne sans que le bouton se replie. */
@media (max-width:1040px){
  .nav__liste,.entete__actions{ display:none; }
  .bouton-menu{ display:flex; }}

/* --- 5. Boutons et liens ----------------------------------------------- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-3);
  min-height:54px;
  padding:var(--sp-3) var(--sp-7);
  border:1px solid var(--encre);
  border-radius:var(--r-1);
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--encre);
  cursor:pointer;
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.bouton .icone{ width:15px; height:15px; }
.bouton--plein{ background:var(--encre); color:var(--fond); }
.bouton--plein:hover{ background:var(--laiton-500); border-color:var(--laiton-500); color:var(--noir-900); }
.bouton--trait{ background:transparent; color:var(--encre); border-color:var(--filet-fort); }
.bouton--trait:hover{ background:var(--encre); color:var(--fond); border-color:var(--encre); }
.bouton--bloc{ width:100%; }

.lien-fleche{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  min-height:44px;
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  color:var(--encre);
  transition:color var(--t-court) var(--ease);
}
.lien-fleche::after{
  content:'→';
  color:var(--accent);
  transition:transform var(--t-base) var(--ease);
}
.lien-fleche:hover{ color:var(--accent); }
.lien-fleche:hover::after{ transform:translateX(6px); }

.icone{ width:20px; height:20px; flex:none; }
.icone use{ pointer-events:none; }

/* --- 6. Panneaux et listes --------------------------------------------- */
/* Le relevé : quatre chiffres sur une ligne, séparés par des filets. */
.releve{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
}
.releve__item{
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:var(--sp-4);
  padding:clamp(2rem,3.6vw,3.25rem) clamp(1rem,2.2vw,2rem);
}
.releve__item + .releve__item{ border-left:1px solid var(--filet); }
.releve__item:first-child{ padding-left:0; }
.releve__item:last-child{ padding-right:0; }
.releve__valeur{
  font-family:var(--f-titre);
  font-size:clamp(2.8rem,6vw,5rem);
  line-height:.9;
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--encre);
  font-variant-numeric:lining-nums tabular-nums;
}
.releve__sur{ font-size:.4em; letter-spacing:.02em; color:var(--encre-2); margin-left:.15em; }
.releve__legende{
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  line-height:1.6;
  color:var(--encre-2);
}
@media (max-width:860px){
  .releve{ grid-template-columns:1fr 1fr; }
  .releve__item:nth-child(odd){ padding-left:0; }
  .releve__item:nth-child(even){ padding-right:0; }
  .releve__item:nth-child(3){ border-left:0; }
  .releve__item:nth-child(n+3){ border-top:1px solid var(--filet); }}
@media (max-width:480px){
  .releve{ grid-template-columns:1fr; }
  .releve__item{ padding-inline:0; border-left:0 !important; }
  .releve__item + .releve__item{ border-top:1px solid var(--filet); }}

/* Les engagements : quatre mots, quatre filets. Ce que le client obtient
   sans avoir à le demander. */
.engagements{
  margin-top:clamp(3rem,6vw,5rem);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--filet);
}
.engagement{
  padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-bottom:1px solid var(--filet);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.engagement + .engagement{ padding-left:var(--sp-5); border-left:1px solid var(--filet); }
.engagement__titre{ font-family:var(--f-titre); font-size:var(--fs-lg); font-weight:400; color:var(--encre); text-transform:uppercase; letter-spacing:var(--ls-large); }
.engagement__note{ color:var(--encre-2); font-size:var(--fs-sm); }
@media (max-width:880px){
  .engagements{ grid-template-columns:1fr 1fr; }
  .engagement:nth-child(3){ border-left:0; padding-left:0; }}
@media (max-width:520px){
  .engagements{ grid-template-columns:1fr; }
  .engagement{ padding-left:0 !important; border-left:0 !important; }}

/* La liste de définitions technique : caractéristique / valeur. */
.specs{ display:grid; gap:0; }
.specs__ligne{
  display:grid; grid-template-columns:1fr auto; gap:var(--sp-4);
  align-items:baseline;
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--filet);
}
.specs__ligne:first-child{ border-top:1px solid var(--filet); }
.specs__cle{
  font-size:var(--fs-3xs); font-weight:500;
  letter-spacing:var(--ls-libelle); text-transform:uppercase;
  color:var(--encre-2);
}
.specs__valeur{ text-align:right; color:var(--encre); }
@media (max-width:520px){
  .specs__ligne{ grid-template-columns:1fr; gap:var(--sp-1); }
  .specs__valeur{ text-align:left; }}

.pastille{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--filet-fort);
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-large);
  text-transform:uppercase;
  color:var(--encre);
}
.pastille::before{
  content:''; width:7px; height:7px; border-radius:var(--r-cercle);
  background:var(--laiton-500);
}
.pastille--fermee::before{ background:var(--rouge-700); }

/* Les horaires. */
.horaires{ display:grid; }
.horaires__ligne{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--sp-4);
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--filet);
}
.horaires__ligne:first-child{ border-top:1px solid var(--filet); }
.horaires__jour{
  font-size:var(--fs-3xs); font-weight:500;
  letter-spacing:var(--ls-libelle); text-transform:uppercase;
  color:var(--encre-2);
}
.horaires__heure{ font-variant-numeric:tabular-nums; color:var(--encre); }
.horaires__ligne.est-fermee .horaires__heure{ color:var(--encre-2); }
.horaires__ligne.est-aujourdhui .horaires__jour,
.horaires__ligne.est-aujourdhui .horaires__heure{ color:var(--accent); font-weight:600; }

/* La grille des métiers (page Prestations) : chaque métier ouvre sur un
   filet, un petit numéro, un grand titre, et sa liste. */
.grille-metiers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2.5rem,6vw,6rem);
}
.metier{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding-block:clamp(2rem,4vw,3.5rem);
  border-top:1px solid var(--filet);
}
.metier .numero{ margin-bottom:var(--sp-2); }
.metier .libelle{ margin-bottom:var(--sp-4); }
.metier .liste li + li{ margin-top:var(--sp-2); }
@media (max-width:760px){ .grille-metiers{ grid-template-columns:1fr; } }

/* Les atouts : un titre, une phrase, un filet. */
.atouts{ display:grid; }
.atout{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5);
  padding-block:clamp(1.5rem,2.6vw,2rem);
  border-top:1px solid var(--filet);
  align-items:baseline;
}
.atout:last-child{ border-bottom:1px solid var(--filet); }
.atout__titre{
  font-family:var(--f-titre);
  font-size:var(--fs-lg);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:var(--ls-large);
  color:var(--encre);
  margin-bottom:var(--sp-2);
}
.atout__texte{ color:var(--encre-2); font-size:var(--fs-base); max-width:34rem; }
@media (max-width:520px){ .atout{ grid-template-columns:1fr; gap:var(--sp-2); } }

/* --- 7. Photographie ---------------------------------------------------- */
.photo{ width:100%; height:100%; object-fit:cover; background:var(--os-3); }
.cadre{ display:block; position:relative; overflow:hidden; background:var(--noir-800); }
.cadre--1-1{ aspect-ratio:1/1; }
.cadre--max{ max-width:540px; }

/* Le dévoilement : l'image apparaît par un rideau qui se lève, et recule
   légèrement en même temps. C'est l'effet qui fait « site de luxe » ; il ne
   coûte qu'un clip-path et ne joue qu'une fois. */
.devoile{ clip-path:inset(100% 0 0 0); transition:clip-path var(--t-tres-long) var(--ease-sortie); }
.devoile .photo{ transform:scale(1.12); transition:transform var(--t-tres-long) var(--ease-sortie); }
.devoile.est-visible{ clip-path:inset(0 0 0 0); }
.devoile.est-visible .photo{ transform:none; }
.sans-js .devoile{ clip-path:none; }
.sans-js .devoile .photo{ transform:none; }

.figure__legende{
  margin-top:var(--sp-3);
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-large);
  text-transform:uppercase;
  color:var(--encre-2);
}

/* Le bandeau pleine largeur, avec une phrase posée dessus. Le voile monte
   du bas et couvre toute la hauteur : la phrase est centrée au milieu de
   l'image, là où le voile est déjà opaque à 60 %. Mesuré au pixel. */
.bandeau{ position:relative; background:var(--noir-950); isolation:isolate; }
.bandeau img{
  width:100%;
  height:clamp(300px,56vw,680px);
  object-fit:cover;
  opacity:.92;
}
/* La laque noire renvoie des reflets presque blancs sous la citation : cette
   image-là est assombrie davantage. Mesuré au pixel (_docs/pixels.py). */
.bandeau--sombre img{ opacity:.66; }
.bandeau figcaption{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:var(--sp-8) var(--wrap-pad);
  background:linear-gradient(to top,rgba(12,10,8,.86),rgba(12,10,8,.64) 50%,rgba(12,10,8,.28));
  color:var(--os-0);
  text-align:center;
}
.bandeau__citation{
  font-family:var(--f-titre);
  font-size:clamp(1.4rem,3.4vw,2.9rem);
  font-weight:300;
  line-height:1.25;
  letter-spacing:.02em;
  max-width:24ch;
  text-wrap:balance;
}
.bandeau__source{
  display:block;
  margin-top:var(--sp-5);
  font-family:var(--f-texte);
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  color:var(--laiton-300);  /* champagne : le laiton tombait à 1,4:1 sur les reflets de la laque */
}

/* La vignette : image, puis légende dans la page. */
.vignette{ display:block; }
.vignette .cadre{ overflow:hidden; }
.vignette img{ transition:transform var(--t-long) var(--ease),opacity var(--t-long) var(--ease); }
.vignette:hover img{ transform:scale(1.04); }
.vignette:hover .figure__legende{ color:var(--encre); }
/* La tuile texte qui complète une grille : même gabarit qu'une vignette. */
.tuile-texte{
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--sp-4);
  aspect-ratio:1/1;
  padding:var(--sp-6);
  border:1px solid var(--filet);
}

/* --- 8. Hauts de page --------------------------------------------------- */
/* L'accueil : plein écran, photographie, titre en très grand. L'image
   dérive lentement (24 s) ; le voile est latéral et bas, pour laisser la
   voiture lisible à droite. */
.affiche-une{
  position:relative;
  display:grid;
  align-items:end;
  min-height:clamp(36rem,100svh,58rem);
  padding-top:var(--entete-h);
  background:var(--noir-950);
  isolation:isolate;
  overflow:hidden;
}
.affiche-une__image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:14% 46%;
  transform:scale(1.06);
  animation:deriver 26s var(--ease) forwards;
}
@keyframes deriver{ to{ transform:scale(1) translateX(1%); } }
.affiche-une__voile{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,rgba(12,10,8,.72),rgba(12,10,8,0) 24%),
    linear-gradient(100deg,rgba(12,10,8,.94) 0%,rgba(12,10,8,.86) 36%,
                          rgba(12,10,8,.60) 62%,rgba(12,10,8,.16) 84%,rgba(12,10,8,.38) 100%),
    linear-gradient(to top,rgba(12,10,8,.88),rgba(12,10,8,.2) 45%,transparent 70%);
}
.affiche-une__interieur{
  position:relative;
  width:100%;
  padding-block:var(--sp-10) var(--sp-9);
}
.affiche-une .chapo{ color:rgba(250,248,244,.86); max-width:44ch; }
.affiche-une .libelle{ color:var(--laiton-500); }
.affiche-une .bouton--plein{ background:var(--os-0); color:var(--noir-900); border-color:var(--os-0); }
.affiche-une .bouton--plein:hover{ background:var(--laiton-500); border-color:var(--laiton-500); color:var(--noir-900); }
.affiche-une .bouton--trait{ color:var(--os-0); border-color:rgba(250,248,244,.5); }
.affiche-une .bouton--trait:hover{ background:var(--os-0); color:var(--noir-900); border-color:var(--os-0); }

/* L'indicateur de défilement : un trait qui descend, en boucle lente. */
.affiche-une__defiler{
  position:absolute; right:var(--wrap-pad); bottom:var(--sp-9);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  color:rgba(250,248,244,.7);
  font-size:var(--fs-3xs); font-weight:500; letter-spacing:var(--ls-libelle); text-transform:uppercase;
  writing-mode:vertical-rl;
}
.affiche-une__defiler::after{
  content:''; width:1px; height:64px;
  background:linear-gradient(to bottom,var(--laiton-500),transparent);
  animation:descendre 2.4s var(--ease) infinite;
}
@keyframes descendre{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:880px){ .affiche-une__defiler{ display:none; } }

/* La bande d'informations sous l'accueil : horaires, adresse, téléphone.
   Ce qu'un visiteur de site de garage cherche en premier, à l'endroit où il
   arrive. Fond uni : auditable. */
.bande-infos{ border-top:1px solid var(--trait-clair); }
.bande-infos__grille{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
}
.bande-infos__cellule{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;
}
.bande-infos__cellule + .bande-infos__cellule{ padding-left:var(--sp-6); border-left:1px solid var(--trait-clair); }
.bande-infos__valeur{ color:var(--os-0); font-size:var(--fs-base); line-height:1.5; font-variant-numeric:tabular-nums; }
/* Un lien d'appel ou d'itinéraire doit faire 44px de haut : la marge
   négative reprend ce que la hauteur minimale ajoute, les lignes ne bougent pas. */
.bande-infos__valeur a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; transition:color var(--t-court) var(--ease); }
.bande-infos__valeur a:hover{ color:var(--laiton-500); }
@media (max-width:760px){
  .bande-infos__grille{ grid-template-columns:1fr; }
  .bande-infos__cellule{ padding:var(--sp-5) 0; }
  .bande-infos__cellule + .bande-infos__cellule{ padding-left:0; border-left:0; border-top:1px solid var(--trait-clair); }}

/* Les hauts de page intérieurs : sombres, sans photographie, un très grand
   titre et un filet de laiton. Ils sont consultés, pas contemplés — mais ils
   donnent à chaque page la même entrée en matière. */
.affiche-page{
  position:relative;
  padding-top:calc(var(--entete-h) + clamp(4rem,10vw,8rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--trait-clair);
}
.affiche-page__grille{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:var(--sp-6);
}
.affiche-page .libelle{ color:var(--laiton-500); }
.affiche-page .chapo{ color:rgba(242,238,230,.78); }
.affiche-page__note{ text-align:right; color:rgba(242,238,230,.74); max-width:22rem; font-size:var(--fs-sm); }
@media (max-width:760px){
  .affiche-page__grille{ grid-template-columns:1fr; }
  .affiche-page__note{ text-align:left; }}

/* Le grand numéro de téléphone, en Archivo léger. Toujours un lien. */
.numero-geant{
  display:inline-flex; align-items:center; min-height:52px;
  font-family:var(--f-titre);
  font-size:clamp(2rem,6vw,4.6rem);
  line-height:1;
  font-weight:300;
  letter-spacing:.04em;
  color:var(--encre);
  font-variant-numeric:lining-nums tabular-nums;
  transition:color var(--t-base) var(--ease);
}
.numero-geant:hover{ color:var(--laiton-500); }

/* --- 9. La scène des métiers (accueil) --------------------------------- */
/* Six lignes à gauche, une photographie collée à droite qui change avec la
   ligne survolée. Sur mobile, la photographie est celle du premier métier,
   fixe, au-dessus de la liste. */
.scene{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:start;
}
.scene__liste{ border-top:1px solid var(--filet); }
.scene__ligne{
  display:grid;
  grid-template-columns:3.5rem 1fr auto;
  align-items:center;
  gap:var(--sp-5);
  padding-block:clamp(1.25rem,2.4vw,1.9rem);
  border-bottom:1px solid var(--filet);
  color:var(--encre-2);
  transition:color var(--t-base) var(--ease);
}
.scene__ligne .numero{ color:var(--laiton-500); }
.scene__titre{
  font-family:var(--f-titre);
  font-size:clamp(1.15rem,2.1vw,1.75rem);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:var(--ls-titre);
  color:var(--encre);
  transition:transform var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.scene__note{ display:block; margin-top:var(--sp-1); font-family:var(--f-texte); font-size:var(--fs-sm); text-transform:none; letter-spacing:0; color:var(--encre-2); }
.scene__fleche{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--filet-fort);
  border-radius:var(--r-cercle);
  color:var(--encre);
  font-size:var(--fs-base);
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.scene__ligne:hover .scene__titre,
.scene__ligne.est-active .scene__titre{ transform:translateX(6px); color:var(--laiton-300); }
.scene__ligne:hover .scene__fleche,
.scene__ligne.est-active .scene__fleche{ background:var(--laiton-500); border-color:var(--laiton-500); color:var(--noir-900); }
.scene__visuel{ position:sticky; top:calc(var(--entete-h) + var(--sp-6)); }
.scene__cadre{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--noir-800); }
.scene__image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity var(--t-long) var(--ease),transform var(--t-tres-long) var(--ease-sortie);
}
.scene__image.est-active{ opacity:1; transform:none; }
.scene__legende{ margin-top:var(--sp-3); min-height:1.4em; }
@media (max-width:880px){
  .scene{ grid-template-columns:1fr; }
  .scene__visuel{ position:static; max-width:480px; order:-1; margin-bottom:var(--sp-6); }
  .scene__ligne{ grid-template-columns:2.5rem 1fr auto; }}

/* --- 10. Le comparateur avant / après ----------------------------------- */
/* Deux photographies du même endroit ; un curseur dévoile l'une sur l'autre.
   Le contrôle est un <input type="range"> invisible posé sur l'image : il se
   manipule à la souris, au doigt ET au clavier sans une ligne de plus. Sans
   JavaScript, les deux images sont simplement côte à côte. */
.comparateur{ --pos:50%; }
.comparateur__cadre{
  position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--noir-800);
  user-select:none; -webkit-user-select:none;
}
.comparateur__cadre:focus-within{ outline:2px solid var(--anneau-focus); outline-offset:4px; }
.comparateur__cadre img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparateur__apres{ z-index:0; }
.comparateur__avant{ z-index:1; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.comparateur__poignee{
  position:absolute; z-index:2; top:0; bottom:0; left:var(--pos);
  width:1px; background:var(--os-0);
  pointer-events:none;
}
.comparateur__poignee::after{
  content:'↔';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px;
  display:grid; place-items:center;
  background:var(--os-0); color:var(--noir-900);
  border-radius:var(--r-cercle);
  font-size:var(--fs-lg);
}
.comparateur__curseur{
  position:absolute; z-index:3; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none;
}
.comparateur__etiquette{
  position:absolute; z-index:2; bottom:var(--sp-4);
  padding:var(--sp-2) var(--sp-3);
  background:var(--noir-900); color:var(--os-1);
  font-size:var(--fs-3xs); font-weight:500; letter-spacing:var(--ls-libelle); text-transform:uppercase;
  pointer-events:none;
}
.comparateur__etiquette--avant{ left:var(--sp-4); }
.comparateur__etiquette--apres{ right:var(--sp-4); }
.sans-js .comparateur__cadre{ aspect-ratio:2/1; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.sans-js .comparateur__cadre img{ position:static; clip-path:none; }
.sans-js .comparateur__avant{ order:-1; }
.sans-js .comparateur__poignee,.sans-js .comparateur__curseur{ display:none; }

/* Le diptyque : avant à gauche, après à droite, une flèche entre les deux. */
.diptyque{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-4); align-items:center; }
.diptyque__fleche{ color:var(--accent); font-size:var(--fs-xl); }

/* --- 11. Pied de page, appel, barre d'appel ---------------------------- */
.appel{
  padding-block:clamp(5rem,10vw,8.5rem);
  text-align:center;
  border-top:1px solid var(--laiton-500);
}
.appel .titre{ color:var(--os-0); }
.appel .chapo{ margin-inline:auto; }
.appel .libelle{ color:var(--laiton-500); }
.appel .numero-geant{ color:var(--os-0); }
.appel .numero-geant:hover{ color:var(--laiton-500); }

.pied{
  padding-block:var(--sp-9) var(--sp-6);
  font-size:var(--fs-sm);
  border-top:1px solid var(--trait-clair);
}
.pied__haut{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-6);
  padding-bottom:var(--sp-7);
  margin-bottom:var(--sp-7);
  border-bottom:1px solid var(--trait-clair);
}
.pied__logo{ height:64px; width:auto; filter:brightness(0) invert(1); opacity:.92; }
.pied__devise{ color:rgba(242,238,230,.74); max-width:26rem; }
.pied h2{
  font-family:var(--f-texte);
  font-size:var(--fs-3xs); font-weight:500;
  letter-spacing:var(--ls-libelle); text-transform:uppercase;
  color:var(--laiton-500);
  margin-bottom:var(--sp-4);
}
.pied__col{ display:flex; flex-direction:column; gap:var(--sp-2); }
.pied__col p{ color:rgba(242,238,230,.78); }
.pied__col a:not(.social){
  display:flex; align-items:center;
  min-height:44px;
  margin-block:calc(var(--sp-2) / -2);
  color:var(--os-2);
  transition:color var(--t-court) var(--ease);
}
.pied__col a:not(.social):hover{ color:var(--laiton-500); }
.socials{ display:flex; gap:var(--sp-3); list-style:none; }
.social{
  display:grid; place-items:center;
  width:44px; height:44px;
  border:1px solid var(--trait-clair-fort);
  border-radius:var(--r-cercle);
  color:var(--os-2);
  transition:color var(--t-court) var(--ease),border-color var(--t-court) var(--ease);
}
.social:hover{ color:var(--laiton-500); border-color:var(--laiton-500); }
.social .icone{ width:17px; height:17px; }
.pied__legal{
  margin-top:var(--sp-8);
  padding-top:var(--sp-5);
  border-top:1px solid var(--trait-clair);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-4);
  font-size:var(--fs-3xs);
  letter-spacing:var(--ls-large);
  color:rgba(242,238,230,.66);
}
.pied__legal a{
  display:inline-flex; align-items:center; min-height:44px;
  color:rgba(242,238,230,.66);
}
.pied__legal a:hover{ color:var(--laiton-500); }

/* La barre d'appel mobile. */
.barre-appel{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none;
  background:var(--noir-900);
  border-top:1px solid var(--trait-clair);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre-appel a{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  min-height:60px;
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-large);
  text-transform:uppercase;
  color:var(--os-1);
}
.barre-appel a + a{ border-left:1px solid var(--trait-clair); }
.barre-appel .icone{ width:17px; height:17px; color:var(--laiton-500); }
@media (max-width:760px){
  .barre-appel{ display:flex; }
  body{ padding-bottom:60px; }}

/* --- 12. La visionneuse ------------------------------------------------- */
.visionneuse{
  position:fixed; inset:0; z-index:100;
  display:none;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(.5rem,2vw,2rem);
  padding:clamp(1rem,4vw,3rem);
  background:rgba(12,10,8,.97);
}
.visionneuse.est-ouverte{ display:grid; }
.visionneuse__figure{
  grid-column:2;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4);
  min-width:0;
}
.visionneuse__figure img{ max-width:100%; max-height:78vh; object-fit:contain; }
.visionneuse__figure figcaption{
  font-size:var(--fs-3xs);
  font-weight:500;
  letter-spacing:var(--ls-libelle);
  text-transform:uppercase;
  color:rgba(250,248,244,.80);
  text-align:center;
}
.visionneuse__nav,.visionneuse__fermer{
  display:grid; place-items:center;
  width:52px; height:52px;
  border:1px solid var(--trait-clair-fort);
  border-radius:var(--r-cercle);
  color:var(--os-1);
  font-size:1.25rem;
  cursor:pointer;
  transition:border-color var(--t-court) var(--ease),color var(--t-court) var(--ease);
}
.visionneuse__nav:hover,.visionneuse__fermer:hover{ border-color:var(--laiton-500); color:var(--laiton-500); }
.visionneuse__fermer{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.visionneuse__nav--prec{ grid-column:1; }
.visionneuse__nav--suiv{ grid-column:3; }
@media (max-width:620px){ .visionneuse__nav{ width:44px; height:44px; } }

/* --- 13. Mouvement ------------------------------------------------------ */
.revele{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-long) var(--ease),transform var(--t-long) var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
.revele.est-visible{ opacity:1; transform:none; }
.sans-js .revele{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .revele{ opacity:1; transform:none; }
  .devoile{ clip-path:none; }
  .devoile .photo{ transform:none; }
  .affiche__ligne > span{ transform:none; }
  .affiche-une__image{ transform:none; animation:none; }
  .affiche-une__defiler::after{ animation:none; transform:none; }}
@media print{
  .entete,.barre-appel,.tiroir,.saut-contenu{ display:none !important; }
  body{ background:#fff; color:#000; }}