/* ============================================================
   L'ÉTABLI — Barbier
   Site de démonstration. Identité volontairement à l'opposé de
   celle de zkry : vert sapin, laiton, typographie condensée.
   Parti pris assumé d'un seul thème sombre — un barbier ne se
   lit pas en clair.
   ============================================================ */

:root{
  color-scheme:dark;

  /* Palette brute */
  --sapin-950:#090f0d;
  --sapin-900:#0e1714;
  --sapin-850:#132019;
  --sapin-800:#18271f;
  --sapin-700:#22352b;
  --laiton-600:#a8842f;
  --laiton-500:#c8a253;
  --laiton-400:#dcbc76;
  --os-050:#f2efe7;
  --os-200:#cfcabb;
  --beton-500:#8c9089;
  --rouge:#a8362f;

  /* Rôles */
  --fond:var(--sapin-950);
  --surface:var(--sapin-900);
  --surface-haute:var(--sapin-850);
  --bordure:#22302a;
  --texte:var(--os-050);
  --texte-doux:var(--beton-500);
  --accent:var(--laiton-500);
  --accent-clair:var(--laiton-400);
  --accent-contraste:var(--sapin-950);

  /* Échelle d'espacement */
  --e1:4px; --e2:8px; --e3:16px; --e4:24px;
  --e5:40px; --e6:64px; --e7:96px; --e8:132px;

  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem;
  --t-lg:1.125rem; --t-xl:1.375rem;

  --r-sm:3px; --r-md:6px; --r-full:999px;
  --transition:240ms cubic-bezier(.2,.8,.2,1);
  --conteneur:1200px;

  --font-titre:'Anton','Impact','Haettenschweiler',sans-serif;
  --font-texte:'Karla','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-texte);font-size:var(--t-md);line-height:1.6;
  color:var(--texte);background:var(--fond);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:var(--accent-contraste)}
:where(section,[id]){scroll-margin-top:88px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Texture de fond : trame fine, comme un papier d'atelier */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(140,144,137,.045) 3px 4px),
    repeating-linear-gradient(90deg,transparent 0 3px,rgba(140,144,137,.03) 3px 4px);
}
body > *{position:relative;z-index:1}

/* ---------------- Layout ---------------- */
.conteneur{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--e4)}
@media (max-width:600px){.conteneur{padding-inline:var(--e3)}}
.section{padding-block:var(--e7)}
@media (max-width:768px){.section{padding-block:var(--e6)}}

.skip{
  position:absolute;left:var(--e3);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-contraste);
  padding:var(--e2) var(--e3);transition:top var(--transition);
}
.skip:focus,.skip:focus-visible{top:var(--e3)}

/* ---------------- Typographie ---------------- */
.titre-geant{
  font-family:var(--font-titre);font-weight:400;
  /* Anton est très condensée ; la pile de repli ne l'est pas.
     La taille est calée pour rester tenable dans les deux cas. */
  font-size:clamp(2.5rem,7.2vw,5.6rem);line-height:.92;
  letter-spacing:.005em;text-transform:uppercase;
}
.titre-section{
  font-family:var(--font-titre);font-weight:400;
  font-size:clamp(2rem,5.5vw,3.5rem);line-height:.94;
  text-transform:uppercase;letter-spacing:.01em;
}
.surtitre{
  font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3);
}
.surtitre::after{content:'';flex:1;height:1px;background:var(--bordure);max-width:120px}
.chapo{color:var(--texte-doux);max-width:56ch;font-size:var(--t-lg)}
.doux{color:var(--texte-doux)}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:14px var(--e4);border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;
  transition:transform 120ms,background var(--transition),color var(--transition),border-color var(--transition);
}
.btn:active{transform:translateY(1px)}
.btn--plein{background:var(--accent);color:var(--accent-contraste)}
.btn--plein:hover{background:var(--accent-clair)}
.btn--vide{border:1px solid var(--bordure);color:var(--texte)}
.btn--vide:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  border-bottom:1px solid transparent;transition:border-color var(--transition);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){ .header{background:var(--fond)} }
.header.is-scrolled{border-bottom-color:var(--bordure);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);height:76px}

.logo{display:flex;align-items:center;gap:10px}
.logo__nom{font-family:var(--font-titre);font-size:1.4rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.logo__nom em{font-style:normal;color:var(--accent)}

/* L'enseigne du barbier : les spirales tournent vraiment */
.enseigne{
  width:15px;height:38px;border-radius:var(--r-full);flex:none;
  border:1px solid var(--bordure);overflow:hidden;position:relative;
  background:var(--surface-haute);
}
.enseigne i{
  position:absolute;inset:-50% -50%;
  background:repeating-linear-gradient(45deg,
    var(--rouge) 0 7px, var(--os-050) 7px 14px, var(--accent) 14px 21px, var(--os-050) 21px 28px);
  animation:enseigne 2.6s linear infinite;
}
@keyframes enseigne{ to{ transform:translateY(28px) } }

.nav{display:flex;align-items:center;gap:var(--e5)}
.nav a{
  font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);
  transition:color var(--transition);position:relative;padding-block:4px;
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--transition);
}
.nav a:hover{color:var(--texte)}
.nav a:hover::after{transform:scaleX(1)}

.burger{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--bordure);border-radius:var(--r-sm)}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:var(--transition)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:var(--transition)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .burger{display:grid}
  .header .btn{display:none}
  .nav{
    position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:var(--e4);padding:var(--e5) var(--e4);background:var(--fond);
    border-bottom:1px solid var(--bordure);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:var(--transition);
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav a{font-family:var(--font-titre);font-size:1.7rem;letter-spacing:.02em;color:var(--texte)}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-block:var(--e7) var(--e7);overflow:hidden}
.hero__fond{
  position:absolute;inset:0;z-index:-1;opacity:.5;
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(200,162,83,.16), transparent 68%),
    radial-gradient(50% 45% at 12% 78%, rgba(168,54,47,.10), transparent 70%);
}
/* Rayures d'auvent, en haut à droite */
.hero__rayures{
  position:absolute;top:0;right:0;width:44%;height:220px;z-index:-1;opacity:.16;
  background:repeating-linear-gradient(115deg,
    var(--accent) 0 14px, transparent 14px 40px);
  -webkit-mask-image:linear-gradient(to bottom left, #000, transparent 72%);
          mask-image:linear-gradient(to bottom left, #000, transparent 72%);
}
@media (max-width:760px){ .hero__rayures{display:none} }

.hero__grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:var(--e6);align-items:center}
@media (max-width:900px){ .hero__grille{grid-template-columns:1fr;gap:var(--e5)} }

.hero h1 span{display:block}
.hero h1 .fin{color:var(--accent)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}

/* Carte d'état : ouvert ou fermé, calculé en direct */
.etat{
  border:1px solid var(--bordure);border-radius:var(--r-md);
  background:var(--surface);padding:var(--e4);
}
.etat__ligne{display:flex;align-items:center;gap:10px;margin-bottom:var(--e3)}
.etat__pastille{width:9px;height:9px;border-radius:50%;background:var(--texte-doux);flex:none}
.etat__pastille.is-ouvert{background:#3fbf6d;box-shadow:0 0 0 4px rgba(63,191,109,.16);animation:battement 2.4s ease-in-out infinite}
.etat__pastille.is-ferme{background:var(--rouge)}
@keyframes battement{50%{opacity:.45}}
.etat__titre{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase}
.etat__detail{font-size:var(--t-sm);color:var(--texte-doux);margin-bottom:var(--e4)}

.horaires{display:grid;gap:6px;font-size:var(--t-sm)}
.horaires li{display:flex;justify-content:space-between;gap:var(--e3);padding-block:3px}
.horaires li.is-aujourdhui{color:var(--accent)}
.horaires span:first-child{color:var(--texte-doux)}
.horaires li.is-aujourdhui span{color:inherit}
.horaires b{font-weight:400;font-variant-numeric:tabular-nums}

/* ============================================================
   PRESTATIONS ET TARIFS
   ============================================================ */
.tarifs{border-top:1px solid var(--bordure)}
.tarif{
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:var(--e3) var(--e4);align-items:baseline;
  padding:var(--e4) 0;border-bottom:1px solid var(--bordure);
  transition:background var(--transition);
}
.tarif:hover{background:var(--surface)}
.tarif__icone{width:26px;height:26px;color:var(--accent);align-self:center}
.tarif__nom{font-family:var(--font-titre);font-size:var(--t-xl);text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.tarif__desc{grid-column:2;font-size:var(--t-sm);color:var(--texte-doux);margin-top:2px}
.tarif__duree{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--texte-doux);letter-spacing:.1em;white-space:nowrap}
.tarif__prix{font-family:var(--font-titre);font-size:var(--t-xl);color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .tarif{grid-template-columns:auto 1fr auto;gap:var(--e2) var(--e3)}
  .tarif__desc{grid-column:2 / -1}
  .tarif__duree{grid-column:2;justify-self:start}
}

.note-tarifs{
  margin-top:var(--e4);font-size:var(--t-sm);color:var(--texte-doux);
  display:flex;gap:10px;align-items:flex-start;
}
.note-tarifs svg{color:var(--accent);flex:none;margin-top:3px}

/* ============================================================
   GALERIE
   ============================================================ */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--e5)}
.filtre{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  padding:8px 16px;border:1px solid var(--bordure);border-radius:var(--r-full);
  color:var(--texte-doux);transition:var(--transition);
}
.filtre:hover{border-color:var(--accent);color:var(--accent)}
.filtre[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contraste)}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--e3)}
.cliche{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--bordure);background:var(--surface);
  display:grid;place-items:center;text-align:center;padding:var(--e3);
  transition:opacity .35s ease,transform .35s ease,border-color var(--transition);
}
.cliche:hover{border-color:var(--accent)}
.cliche[hidden]{display:none}
.cliche.is-masque{opacity:0;transform:scale(.96);pointer-events:none}
.cliche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Emplacement photo : visible tant qu'aucune image n'est fournie */
.cliche__vide{display:grid;gap:10px;justify-items:center;color:var(--texte-doux)}
.cliche__vide svg{color:var(--accent);opacity:.55}
.cliche__vide b{
  font-family:var(--font-titre);font-size:var(--t-lg);text-transform:uppercase;
  letter-spacing:.02em;color:var(--texte);font-weight:400;
}
.cliche__vide small{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em}

.cliche__legende{
  position:absolute;left:0;right:0;bottom:0;padding:var(--e3);
  background:linear-gradient(to top, var(--sapin-950), transparent);
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
}

/* ============================================================
   ÉQUIPE
   ============================================================ */
.equipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--e4)}
.barbier{border:1px solid var(--bordure);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.barbier__portrait{
  aspect-ratio:1/1;display:grid;place-items:center;
  background:
    radial-gradient(70% 70% at 50% 30%, var(--sapin-800), var(--sapin-900));
  border-bottom:1px solid var(--bordure);color:var(--accent);
}
.barbier__portrait svg{width:44%;height:auto;opacity:.5}
.barbier__corps{padding:var(--e4);display:grid;gap:var(--e2)}
.barbier__nom{font-family:var(--font-titre);font-size:var(--t-xl);text-transform:uppercase;letter-spacing:.02em}
.barbier__role{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.barbier p{font-size:var(--t-sm);color:var(--texte-doux)}
.specialites{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--e2)}
.specialite{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--bordure);border-radius:var(--r-full);padding:4px 10px;color:var(--texte-doux);
}

/* ============================================================
   RÉSERVATION
   ============================================================ */
.resa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--e6)}
@media (max-width:900px){ .resa{grid-template-columns:1fr;gap:var(--e5)} }

.etapes-resa{display:grid;gap:var(--e5)}
.etape-resa{display:grid;gap:var(--e3)}
.etape-resa > legend,
.etape-resa > .legende{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px;
}
.etape-resa > .legende b{
  font-weight:400;width:22px;height:22px;flex:none;display:grid;place-items:center;
  border:1px solid var(--accent);border-radius:50%;font-size:.68rem;
}

.options{display:flex;flex-wrap:wrap;gap:8px}
.option{
  position:relative;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--bordure);border-radius:var(--r-sm);
  padding:11px 15px;color:var(--texte-doux);cursor:pointer;
  transition:var(--transition);
}
.option:hover{border-color:var(--accent);color:var(--texte)}
.option input{position:absolute;opacity:0;pointer-events:none}
.option:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--accent-contraste)}
.option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.option small{display:block;letter-spacing:.06em;opacity:.75;margin-top:2px}
/* Repli pour les navigateurs sans :has() */
.option.is-choisi{background:var(--accent);border-color:var(--accent);color:var(--accent-contraste)}

.creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.creneau{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.08em;
  border:1px solid var(--bordure);border-radius:var(--r-sm);padding:11px 6px;
  text-align:center;color:var(--texte-doux);transition:var(--transition);
  font-variant-numeric:tabular-nums;
}
.creneau:hover:not(:disabled){border-color:var(--accent);color:var(--texte)}
.creneau[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contraste)}
.creneau:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}

.champ{display:grid;gap:6px}
.champ label{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.champ input,.champ textarea{
  font:inherit;font-size:var(--t-sm);color:var(--texte);
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--r-sm);
  padding:12px var(--e3);width:100%;transition:border-color var(--transition);
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent)}
.erreur{font-size:var(--t-xs);color:#e8837c;min-height:1.05em}

/* Récapitulatif collant */
.recap{
  position:sticky;top:104px;
  border:1px solid var(--bordure);border-radius:var(--r-md);
  background:var(--surface);padding:var(--e5);
}
@media (max-width:900px){ .recap{position:static} }
.recap__titre{font-family:var(--font-titre);font-size:var(--t-xl);text-transform:uppercase;letter-spacing:.02em;margin-bottom:var(--e4)}
.recap dl{display:grid;gap:var(--e3);margin-bottom:var(--e4)}
.recap .ligne-recap{display:flex;justify-content:space-between;gap:var(--e3);padding-bottom:var(--e3);border-bottom:1px solid var(--bordure)}
.recap dt{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-doux)}
.recap dd{text-align:right;font-size:var(--t-sm)}
.recap dd:empty::after{content:'—';color:var(--texte-doux)}
.recap__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);margin-bottom:var(--e4)}
.recap__total b{font-family:var(--font-titre);font-size:2rem;color:var(--accent);font-weight:400;font-variant-numeric:tabular-nums}
.recap .btn{width:100%;justify-content:center}
.recap__note{font-size:var(--t-xs);color:var(--texte-doux);margin-top:var(--e3);line-height:1.5}
.form-etat{font-size:var(--t-sm);margin-top:var(--e3)}
.form-etat[data-ok]{color:#5fd18c}
.form-etat[data-ko]{color:#e8837c}

/* ============================================================
   INFOS PRATIQUES
   ============================================================ */
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e5)}
.info__titre{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--e3)}
.info p,.info a{font-size:var(--t-sm);color:var(--texte-doux);line-height:1.7}
.info a:hover{color:var(--accent)}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer{border-top:1px solid var(--bordure);padding-block:var(--e5)}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;justify-content:space-between}
.footer small,.footer a{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;color:var(--texte-doux)}
.footer a:hover{color:var(--accent)}
.demo{
  border:1px solid var(--accent);border-radius:var(--r-sm);
  padding:var(--e3) var(--e4);margin-bottom:var(--e4);
  font-size:var(--t-sm);color:var(--texte-doux);
  display:flex;gap:var(--e3);align-items:flex-start;
}
.demo svg{color:var(--accent);flex:none;margin-top:2px}
.demo b{color:var(--texte);font-weight:400}

/* ============================================================
   APPARITION AU SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .enseigne i{animation:none}
}

/* ============================================================
   AU DOIGT — cibles portées à 44 px
   ============================================================ */
@media (pointer: coarse), (max-width: 900px){
  .burger{width:44px;height:44px}
  .filtre{min-height:44px;display:inline-flex;align-items:center}
  .nav a,.footer a,.btn{min-height:44px}
  .nav a,.footer a{display:flex;align-items:center}
  .footer nav{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4)}
  /* les créneaux de rendez-vous se prennent au pouce */
  .creneau,[data-creneau]{min-height:48px;min-width:88px}
}

@media (pointer: coarse), (max-width: 900px){
  /* Le logo est un lien de retour à l'accueil : il mérite 44 px. */
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  /* Les liens EN PLEINE PHRASE gardent leur taille : les gonfler
     disloquerait le paragraphe, et la règle d'accessibilité les
     dispense justement pour cette raison. */
}

@media (pointer: coarse), (max-width: 900px){
  /* Un numéro de téléphone sur un mobile, c'est LE geste du site :
     il ne peut pas faire 16 px de haut. */
  a[href^="tel:"],a[href^="mailto:"]{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* ---- La carte se soulève en passant au centre de l'écran ---- */
@media (pointer: coarse){
  /* La transformation est posée en JavaScript, image par image :
     pas de transition ici, elle lutterait contre le calcul. */
  .anime-au-doigt{will-change:transform}
}

@media (max-width:420px){
  /* Le panneau de navigation dépassait de 2 px sur les plus
     petits écrans : sa bordure s'ajoutait à sa largeur pleine. */
  .nav{max-width:100vw;box-sizing:border-box}
}

/* ============================================================
   NE PAS PEINDRE CE QUI EST HORS DE LÉCRAN

   Sur une page longue, le navigateur calcule la mise en page et
   peint des sections que personne ne regarde. « content-visibility »
   lui dit de sauter tout ce travail tant que la section napproche
   pas — cest le levier le plus efficace sur ce genre de page, et
   il ne change rien à lapparence.

   La taille estimée est indispensable : sans elle, la barre de
   défilement sauterait à mesure que les sections se révèlent.
   ============================================================ */
main > section{
  content-visibility:auto;
  /* Estimation calée sur la hauteur MÉDIANE réellement
     mesurée. Trop basse, la barre s'allonge en descendant ;
     trop haute, elle se rétracte. Les deux se voient, et les
     sections d'un téléphone font le double de celles d'un
     écran : d'où deux valeurs. */
  contain-intrinsic-size:auto 2100px;
}
@media (min-width:900px){
  main > section{contain-intrinsic-size:auto 1150px}
}
/* La première section est visible demblée : lexclure évite un
   passage inutile au chargement, celui qui compte le plus. */
main > section:first-of-type{content-visibility:visible}

/* Chaque carte se contient elle-même : ce qui change à lintérieur
   ne peut plus déclencher un recalcul de toute la page. */
.projet,.produit,.destination,.presta,.plat,.engagement,.info,.film,.formule,.carte-franchise,.etape{
  contain:layout paint style;
}


/* ============================================================
   REPÈRES DE NAVIGATION
   ============================================================ */
.lecture-jauge{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  pointer-events:none;background:transparent;
}
.lecture-jauge i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 55%, var(--texte)));
  will-change:transform;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .lecture-jauge i{background:var(--accent)}
}

.haut-page{
  position:fixed;right:18px;bottom:18px;z-index:110;
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--trait-fort, var(--trait));border-radius:50%;
  background:var(--surface);color:var(--texte);cursor:pointer;
  box-shadow:0 10px 26px -12px rgb(0 0 0/.45);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .28s, transform .28s, visibility .28s, background .2s;
}
.haut-page.is-visible{opacity:1;visibility:visible;transform:none}
.haut-page:hover{background:var(--accent);color:var(--accent-contraste);border-color:var(--accent)}
.haut-page svg{width:20px;height:20px}
/* le repère de chapitre du portfolio occupe déjà ce coin */
.haut-page{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){ .haut-page{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))} }

/* La section en cours, dans le menu */
[data-menu] a[aria-current="true"]{color:var(--accent)}
[data-menu] a[aria-current="true"]::after{
  content:'';display:block;height:2px;border-radius:2px;
  background:var(--accent);margin-top:3px;
}

@media (prefers-reduced-motion: reduce){
  .haut-page{transition:opacity .01s, visibility .01s}
  .lecture-jauge i{transition:none}
}