

@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('police-titre.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'PoliceLibelle';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('police-libelle.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --encre:#1f2327;              /* texte courant — graphite */
  --encre-douce:#545a60;        /* texte secondaire — jamais plus clair que ça */
  --fond:#f6f5f2;               /* béton clair */
  --fond-alt:#e6e4de;           /* sections alternées, section contact */
  --carte:#ffffff;              /* les panneaux */
  --marque:#9d3a14;             /* brique brûlée : boutons, assises, filets, numéro */
  --marque-clair:color-mix(in oklab, var(--marque) 10%, white);
  --marque-fonce:#772c0f;       /* survol des boutons — mesuré, pas calculé */
  --filet:#d5d2ca;              /* filets et bordures : décor, jamais du texte */
  --wa:#25d366;                 /* vert WhatsApp : texte FONCÉ dessus, jamais blanc */

  --nuit:#191d21;
  --creme:#f2f1ed;              /* texte sur nuit */
  --creme-doux:#bdbcb6;         /* texte secondaire sur nuit */
  --laiton:#d99a5b;             /* surtitres et filets sur nuit */
  --laiton-clair:#e9b482;       /* accents du panneau de verre */

  --liseret:rgba(255,255,255,.9);   /* trait clair en haut du panneau — invisible sur fond noir */
  --ombre-panneau:rgba(31,35,39,.55);
  --ombre-photo:rgba(31,35,39,.7);
  --halo-savoir:color-mix(in srgb,var(--laiton) 16%,transparent);
  --halo-contact:color-mix(in srgb,var(--marque) 9%,transparent);
  --texte-bouton:#fff;              /* passe au fond quand --marque est clair (jaune, laiton) */
  --ruban-fond:var(--marque);
  --ruban-texte:var(--texte-bouton);

  --barre:color-mix(in srgb,var(--nuit) 85%,transparent);
  --barre-filet:color-mix(in srgb,var(--creme) 16%,transparent);
  --barre-texte:var(--creme);       /* le nom de l'entreprise */
  --barre-texte-doux:var(--creme-doux);
  --barre-accent:var(--laiton-clair);

  --police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --police-titre:'PoliceTitre',"Iowan Old Style","Palatino Linotype",Palatino,
    "Times New Roman",Georgia,serif;
  --police-libelle:'PoliceLibelle',"Avenir Next",Avenir,"Century Gothic","Segoe UI",
    system-ui,sans-serif;

  --rayon:4px;                  /* angles nets : c'est du bâti, pas un magazine */
  --rayon-bouton:2rem;          /* pilule : un bouton n'est JAMAIS un rectangle brut */
  --largeur:1120px;
  --gouttiere:clamp(1rem,3vw,2rem);
  --hauteur-bandeau:78svh;
  --assise:4px;                 /* épaisseur du bandeau d'accent des panneaux */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-texte);
  font-size:clamp(1rem,.95rem + .2vw,1.08rem);   /* jamais sous 16px */
  line-height:1.62;
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0;max-width:100%}   /* parade : une image cassée ne fait pas déborder la page */
h1,h2,h3{font-family:var(--police-titre);font-weight:400;line-height:1.1;
  margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);letter-spacing:-.005em}
h2{font-size:clamp(1.7rem,1.15rem + 2.2vw,2.6rem);letter-spacing:-.005em}
h3{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem)}
p{margin:0 0 1em}
.hero__intro,.contact__phrase,.poste p{max-width:58ch}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
main a:not(.bouton){text-decoration:underline;text-underline-offset:.15em}
main a[href^="tel:"]:not(.bouton),main a[href^="mailto:"]:not(.bouton){
  display:inline-block;padding-block:.25rem}
:focus-visible{outline:3px solid var(--marque);outline-offset:2px;border-radius:2px}
.hero :focus-visible,.savoir :focus-visible,.pied :focus-visible{outline-color:var(--laiton)}

.bande{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}

.saut-contenu{position:absolute;top:-6rem;left:.5rem;z-index:50;background:var(--fond);
  color:var(--encre);padding:.6rem 1rem;border-radius:var(--rayon)}
.saut-contenu:focus{top:.5rem}

.ruban{margin:0;padding:.5rem var(--gouttiere);text-align:center;font-size:.85rem;
  background:var(--barre);color:var(--ruban-texte)}                          /* 6,89 */
.ruban a,.pied a{display:inline-block;padding-block:.2rem;text-decoration:underline}

.assise{display:block;height:3px;width:min(190px,100%);
  background:linear-gradient(90deg,var(--marque) 0 52px,var(--filet) 52px 100%);
  transform-origin:left;margin-top:.2rem}
.entete-section--centre .assise{margin-inline:auto;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--marque) 16%,var(--filet)) 0%,
    var(--marque) 50%,
    color-mix(in srgb,var(--marque) 16%,var(--filet)) 100%);
  transform-origin:center}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.8rem 1.6rem;border:0;border-radius:var(--rayon-bouton);
  font-family:var(--police-libelle);font-size:.92rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;text-align:center;cursor:pointer;
  font-variant-numeric:lining-nums tabular-nums;
  transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.bouton--plein{background:var(--marque);color:var(--texte-bouton);        /* 6,89 */
  box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 24%,transparent) inset,
             0 12px 26px -14px color-mix(in srgb,var(--marque) 70%,transparent)}
.bouton--plein:hover,.bouton--plein:focus-visible{background:var(--marque-fonce);  /* 9,76 */
  box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 28%,transparent) inset,
             0 18px 34px -14px color-mix(in srgb,var(--marque) 80%,transparent)}
.bouton--wa{background:var(--wa);color:#11221a}   /* texte foncé : blanc sur #25d366 = 1,98:1 */
.bouton--wa:hover,.bouton--wa:focus-visible{background:color-mix(in oklab,var(--wa) 88%,black)}
.bouton--grand{min-height:54px;padding:.95rem 1.9rem;font-size:.98rem}

.mobile-seulement{display:inline-flex}
@media (min-width:48rem){.mobile-seulement{display:none}}

.entete{position:sticky;top:0;z-index:30;
  background:var(--barre);
  border-bottom:1px solid var(--barre-filet);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.8)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .entete{-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--marque) 0 34%,
    color-mix(in srgb,var(--laiton) 55%,transparent) 34% 62%,transparent 62% 100%);
  opacity:.9;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;min-height:66px;padding-block:.5rem}
.marque{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1 1 auto}
.marque__nom{font-family:var(--police-titre);font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--barre-texte);   /* 15,0 sur la barre */
  overflow-wrap:break-word}
.marque__sous{font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  color:var(--barre-accent);                                  /* 5,25 au pire cas, photo claire */
  text-transform:uppercase;letter-spacing:.18em;margin-top:.25rem}

#nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:none;border:1px solid var(--barre-filet);
  border-radius:var(--rayon);cursor:pointer;flex:0 0 auto}
.nav-toggle__trait{display:block;height:2px;background:var(--barre-accent);border-radius:1px}

#nav-links{display:flex;flex-direction:column;gap:.15rem;width:100%;padding-bottom:.6rem}
#nav-links{border-top:1px solid var(--barre-filet);padding-top:.5rem;margin-top:.35rem}
#nav-links a{display:flex;align-items:center;min-height:46px;padding:.5rem .25rem;
  font-family:var(--police-libelle);font-weight:500;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--barre-texte-doux);                              /* 5,12 au pire cas */
  transition:color .2s ease}
#nav-links a:hover,#nav-links a:focus-visible{color:var(--barre-texte)}
#nav-links a.bouton{justify-content:center;letter-spacing:.1em;
  color:var(--texte-bouton);margin-top:.4rem}
.entete :focus-visible{outline-color:var(--barre-accent)}
/* ⚠ 23.09.2026 : le menu s'ouvrait en poussant la barre, donc en faisant
   sauter toute la page (l'entête est sticky). Il se déploie maintenant EN
   SUPERPOSITION sous la barre, et l'ouverture est animée. Correctif propagé
   depuis le gabarit par outils/menu-fluide.mjs. */
.js #nav-links{
  display:flex;
  position:absolute; top:100%; left:0; right:0;
  width:auto; margin:0;
  padding:.35rem var(--gouttiere,1rem) .9rem;
  background:var(--fond,#fff);
  border-bottom:1px solid var(--filet,rgba(0,0,0,.12));
  box-shadow:0 12px 26px -16px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .2s ease,
             transform .26s cubic-bezier(.4,0,.2,1),
             visibility 0s linear .26s;
}
.js #nav-links.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .2s ease,
             transform .26s cubic-bezier(.4,0,.2,1),
             visibility 0s;
}
/* Mouvement réduit : on retire le DÉPLACEMENT, pas la transition. */
@media (prefers-reduced-motion:reduce){
  .js #nav-links{transform:none;transition:opacity .14s linear,visibility 0s linear .14s}
  .js #nav-links.is-open{transition:opacity .14s linear,visibility 0s}
}

@media (min-width:62rem){
  #nav-toggle{display:none}
  #nav-links,.js #nav-links{display:flex;flex-direction:row;align-items:center;
    gap:clamp(.9rem,2vw,1.9rem);width:auto;padding-bottom:0;
    border-top:0;padding-top:0;margin-top:0;position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0;transition:none}
  .marque{flex:0 1 auto}
  #nav-links a{padding:.5rem .3rem}
  #nav-links a.bouton{margin-top:0;padding:.7rem 1.4rem;min-height:44px}
  #nav-links li:not(:last-child) a{position:relative}
  #nav-links li:not(:last-child) a::after{content:"";position:absolute;
    left:.3rem;right:.3rem;bottom:.5rem;height:2px;background:var(--barre-accent);
    transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{transform:scaleX(1)}
}

.entete-section{margin-bottom:clamp(1.5rem,3.5vw,2.2rem)}
.entete-section h2{margin:0 0 .85rem}
.entete-section--centre{text-align:center}
.sur{font-family:var(--police-libelle);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.26em;color:var(--marque);margin:0 0 .8rem}

.panneau{position:relative;background:var(--carte);
  border:1px solid var(--filet);border-radius:var(--rayon);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3.5vw,2.6rem);
  box-shadow:0 1px 0 var(--liseret) inset,0 30px 64px -42px var(--ombre-panneau)}
.panneau::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
  height:var(--assise);background:var(--marque);
  border-radius:var(--rayon) var(--rayon) 0 0}

.hero{position:relative;display:flex;align-items:flex-end;
  min-height:min(var(--hauteur-bandeau),44rem);
  padding-block:clamp(3rem,9vw,5rem) clamp(4.5rem,11vw,7rem);
  background:var(--nuit)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 52%}
.hero__voile{position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--nuit) 58%,transparent) 0%,
    color-mix(in srgb,var(--nuit) 26%,transparent) 36%,
    color-mix(in srgb,var(--nuit) 74%,transparent) 100%)}
.hero__trame{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 62% at 50% 4%,
    rgba(255,255,255,.09),transparent 64%)}
.hero__bande{position:relative;z-index:2;width:100%}

.hero__verre{
  max-width:46rem;padding:clamp(1.5rem,4vw,2.6rem);
  border-radius:var(--rayon);
  border:1px solid rgba(255,255,255,.14);
  border-left:var(--assise) solid var(--marque);   /* le montant d'accent */
  background:color-mix(in srgb,var(--nuit) 84%,transparent);  /* contrastes mesurés au pire cas */
  box-shadow:0 26px 64px -30px rgba(0,0,0,.75);
  color:var(--creme);
  animation:verre-monte .7s cubic-bezier(.2,.75,.25,1) both;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .hero__verre{-webkit-backdrop-filter:blur(18px) saturate(1.1);
    backdrop-filter:blur(18px) saturate(1.1)}
}
@keyframes verre-monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes paraitre{from{opacity:0}to{opacity:1}}

.hero__etiquette{font-family:var(--police-libelle);font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.26em;
  color:var(--laiton-clair);margin:0 0 1rem}                        /* 5,53 au pire cas */
.hero__titre{color:var(--creme);margin:0;line-height:1.06}          /* 9,08 au pire cas */
.hero__accent{display:block;font-family:var(--police-titre);line-height:1.06;
  font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);letter-spacing:-.005em;
  color:var(--laiton-clair);margin:0 0 1rem;text-wrap:balance}       /* 5,53 au pire cas */
.hero__intro{color:var(--creme-doux);font-size:1.05rem;margin:0}     /* 5,39 au pire cas */
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
@media (max-width:30rem){
  .hero__actions{display:grid;grid-template-columns:1fr}
  .hero__actions .bouton{width:100%;padding-inline:1rem}
}

@media (max-width:600px){
  .hero{display:block;min-height:0;padding-block:0 clamp(2.5rem,7vw,3.5rem)}
  .hero__photo{
    position:relative;inset:auto;display:block;
    width:100%;height:clamp(215px,48vw + 92px,300px);
    object-position:center 46%}
  .hero__voile{
    inset:auto 0 0 0;height:clamp(215px,48vw + 92px,300px);
    background:linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb,var(--nuit) 18%,transparent) 60%,
      var(--nuit) 100%)}
  .hero__trame,.signature--hero{display:none}
  .hero__verre{
    max-width:none;margin-top:clamp(1.6rem,5vw,2rem);
    padding:0 0 0 clamp(1rem,4vw,1.4rem);
    background:none;border:0;
    border-left:var(--assise) solid var(--marque);
    border-radius:0;box-shadow:none}
}

.travaux{position:relative;z-index:2;
  margin-top:calc(clamp(2rem,5vw,4rem) * -1);
  padding-block:0 clamp(3rem,8vw,5.5rem)}
.travaux__grille{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:62rem){
  .travaux__grille{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:stretch}
  .travaux__visuel{margin-top:0;display:flex}
  .travaux__visuel img{height:100%;min-height:20rem;object-fit:cover;
    object-position:50% 42%}
}

.postes{display:grid}
.poste{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,2.5vw,1.3rem);
  padding-block:clamp(1rem,2.4vw,1.25rem);
  border-top:1px solid var(--filet)}
.poste:first-child{border-top:0;padding-top:.4rem}
.poste__num{grid-row:1 / span 2;position:relative;padding-left:1.05rem;padding-top:.3rem;
  font-family:var(--police-libelle);font-weight:500;font-size:.8rem;letter-spacing:.1em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--marque)}                                                  /* 6,89 sur --carte */
.poste__num::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  background:var(--marque);opacity:.4;
  transition:opacity .25s ease,transform .25s ease}
.poste:hover .poste__num::before{opacity:1;transform:scale(1.4)}
.poste h3{grid-column:2;margin:0 0 .3rem;color:var(--encre)}            /* 15,81 */
.poste p{grid-column:2;margin:0;color:var(--encre-douce);font-size:.97rem}  /* 6,98 */
.js .poste.reveal{transition-delay:calc(var(--i,0) * 90ms)}

.cadre{position:relative}
.cadre img{width:100%;border-radius:var(--rayon);object-fit:cover;
  object-position:50% 45%;
  box-shadow:0 26px 52px -32px var(--ombre-photo)}
.cadre::after{content:"";position:absolute;inset:-12px;pointer-events:none;
  border:1px solid var(--marque);opacity:.45;border-radius:var(--rayon)}
.cadre--gauche::after{inset:-12px}

.realisations{padding-block:clamp(3rem,8vw,5rem);background:var(--fond-alt)}
.realisations__grille{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  margin-top:clamp(1.8rem,4vw,2.6rem)}
.realisations__grille .cadre{display:flex}
.realisations__grille img{width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;aspect-ratio:3/2}
.realisations__haute img{aspect-ratio:3/4}
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .realisations__haute{grid-column:1;grid-row:1 / span 2}
  .realisations__grille .cadre:not(.realisations__haute){grid-column:2}
  .realisations__grille img,.realisations__haute img{aspect-ratio:auto}
}
.realisations__haute::after{inset:12px 12px -12px -12px}

.savoir{color:var(--creme);
  padding-block:clamp(3rem,8vw,5.5rem);
  background:radial-gradient(120% 85% at 10% 0%,var(--halo-savoir),transparent 60%),
    var(--nuit)}
.savoir .sur{color:var(--laiton)}                     /* 7,04 */
.savoir h2{color:var(--creme)}                        /* 15,00 */
.savoir .assise{background:linear-gradient(90deg,
  color-mix(in srgb,var(--laiton) 14%,transparent) 0%,
  var(--laiton) 50%,
  color-mix(in srgb,var(--laiton) 14%,transparent) 100%)}

.savoir__bande{display:grid;gap:clamp(1.6rem,4vw,2.8rem)}
.savoir__large img{aspect-ratio:3/2}
.savoir__haute img{aspect-ratio:4/5}
@media (min-width:48rem){
  .savoir__bande{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    align-items:stretch}
  .savoir__haute{position:relative}
  .savoir__haute img{position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
}
.savoir .cadre::after{border-color:var(--laiton);opacity:.5}
.js .savoir .reveal{transition-delay:calc(var(--i,0) * 110ms)}

.equipe{padding-block:clamp(3rem,8vw,5rem) 0;background:var(--fond)}
.equipe__photo{width:100%;margin:clamp(1.8rem,4vw,2.6rem) 0 0;
  border-top:var(--assise) solid var(--marque);
  border-bottom:1px solid var(--filet)}
.equipe__photo img{width:100%;aspect-ratio:3/2;max-height:32rem;object-fit:cover;
  object-position:50% 42%;
  border-radius:0}
@media (min-width:48rem){.equipe__photo img{aspect-ratio:21/9}}

.contact{padding-block:clamp(3.5rem,9vw,6rem);
  background:radial-gradient(85% 70% at 80% 0%,var(--halo-contact),transparent 56%),
    var(--fond-alt)}
.contact__grille{display:grid;gap:clamp(1.8rem,4vw,3rem)}
.contact__visuel img{aspect-ratio:16/9}
@media (min-width:62rem){
  .contact__grille{grid-template-columns:minmax(0,1fr);justify-items:center}
  .contact__carte{width:min(100%,760px)}
}
.contact__carte{text-align:center}
.contact__phrase{font-size:1.04rem;color:var(--encre);           /* 15,81 sur --carte */
  margin:0 auto .9rem;max-width:36ch}

.fiche{max-width:32rem;margin:clamp(1.4rem,3.5vw,1.9rem) auto 0;text-align:left;
  padding-top:clamp(1.2rem,3vw,1.6rem);border-top:1px solid var(--filet)}
.fiche__titre{margin:0 0 .6rem;text-align:center;
  font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--encre-douce)}   /* 6,98 */

.tableau{margin:0;display:grid}
.tableau__ligne{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.1rem .9rem;
  padding:clamp(.45rem,1.5vw,.62rem) .5rem;border-radius:var(--rayon)}
.tableau__ligne + .tableau__ligne{border-top:1px solid var(--filet)}
.tableau dt{color:var(--encre-douce);font-family:var(--police-libelle);
  font-weight:500;font-size:.88rem}                                         /* 6,98 */
.tableau dd{margin:0;color:var(--encre);text-align:right;                   /* 15,81 */
  font-variant-numeric:lining-nums tabular-nums}

.tableau dd a[href^="tel:"]{display:inline-block;padding-block:.35rem;
  font-family:var(--police-libelle);font-weight:500;
  font-size:1.14rem;letter-spacing:.01em;
  color:var(--marque);text-decoration:none;                                 /* 6,89 */
  border-bottom:1px solid color-mix(in oklab,var(--marque) 35%,transparent);
  transition:color .25s ease,border-color .25s ease}
.tableau dd a[href^="tel:"]:hover,.tableau dd a[href^="tel:"]:focus-visible{
  color:var(--marque-fonce);border-bottom-color:var(--marque)}              /* 9,76 */

.tableau__ligne--aujourdhui{background:color-mix(in oklab,var(--marque) 7%,transparent)}
.tableau__ligne--aujourdhui dt{color:var(--marque)}                         /* 6,89 */
.tableau--horaires .tableau__ligne--ferme dd{color:var(--encre-douce)}      /* 6,98 */
.tableau__aujourdhui{margin-left:.5rem;padding:.12rem .45rem;border-radius:999px;
  background:var(--marque);color:var(--texte-bouton);                       /* 6,89 */
  font-family:var(--police-libelle);font-weight:500;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.12em;vertical-align:.08em}

.pied{padding-block:clamp(2.8rem,7vw,4rem);background:var(--nuit);color:var(--creme)}
.pied__interieur{text-align:center}
.assise--pied{margin:0 auto clamp(1.2rem,3vw,1.6rem);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 15%,transparent) 0%,
    var(--laiton) 50%,
    color-mix(in srgb,var(--laiton) 15%,transparent) 100%)}
.pied__nom{margin:0 0 .45rem;font-family:var(--police-titre);
  font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:.12em;color:var(--creme);
  overflow-wrap:break-word}                                            /* 15,00 */
.pied__lieu{margin:0;font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--creme-doux)}    /* 8,90 */
.pied__bas{font-size:.82rem;text-align:center;
  margin-top:clamp(1.7rem,4vw,2.3rem);padding-top:clamp(1.1rem,2.5vw,1.5rem);
  border-top:1px solid color-mix(in srgb,var(--laiton) 25%,transparent)}
.pied p{margin:0}
.pied__credit{color:var(--creme-doux)}                                     /* 8,90 */

.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease}
.js .assise.reveal{transform:scaleX(0);
  transition:opacity .3s ease,transform .8s cubic-bezier(.22,.8,.25,1) .1s}
.js .reveal.est-vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .55s ease}
  .js .reveal.est-vu{transform:none}
  .hero__verre{animation-name:paraitre}
  .js .assise.reveal{transform:none;transition:opacity .8s ease .1s}
  .bouton{transition:background-color .25s ease,box-shadow .25s ease}
  .poste:hover .poste__num::before{transform:none;opacity:1}
  #nav-links li:not(:last-child) a::after{transform:scaleX(1);opacity:0;
    transition:opacity .25s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{opacity:1}
}

.nav > .marque{min-width:0;flex:1 1 0}
.nav > #nav-links{flex-basis:100%}
.marque__nom{overflow-wrap:break-word;
  font-size:clamp(.92rem,.78rem + .7vw,var(--taille-marque,1.15rem))}
.nav > #nav-toggle{flex:none}

.bouton{white-space:nowrap}
@media (max-width:26rem){
  .bouton--grand{font-size:.82rem;letter-spacing:.05em;padding:.9rem 1rem}
}
@media (max-width:22rem){
  .bouton--grand{font-size:.76rem;letter-spacing:.03em;padding:.85rem .7rem}
}

.tableau__ligne{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:0 .9rem}
.tableau dd{min-width:0}

:root{
  --encre:#16202b;
  --encre-douce:#48545f;
  --fond:#fbf9f5;
  --fond-alt:#efe5d5;
  --carte:#ffffff;
  --marque:#16324f;
  --marque-fonce:#0d2036;
  --filet:#d8cbb5;
  --nuit:#101a24;
  --creme:#f2ece3;
  --creme-doux:#b8b1a5;
  --laiton:#cf9a4e;
  --laiton-clair:#e4b878;
  --rayon:2px;
  --halo-savoir:color-mix(in srgb,var(--laiton) 15%,transparent);
  --halo-contact:color-mix(in srgb,var(--laiton) 14%,transparent);
  --police-titre:'PoliceTitre',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --police-libelle:'PoliceLibelle',"Avenir Next",Avenir,"Century Gothic","Segoe UI",system-ui,sans-serif;
}

:root{

  --ruban:16px;                     /* largeur de la bande adhésive des panneaux */
  --sol:6px;                        /* épaisseur du plancher de l'échelle */
  --colonne:var(--largeur);         /* pour la règle des côtés, plus bas */

  --ombre-nette:0 1px 2px rgba(16,26,36,.08);
  --ombre-douce:0 12px 28px rgba(16,26,36,.14);
  --ombre-loin:0 18px 40px rgba(16,26,36,.20);
  --ombre-bloc:var(--ombre-nette),var(--ombre-douce);
  --ombre-bloc-haut:var(--ombre-nette),var(--ombre-loin);

  --halo-jour:color-mix(in srgb,var(--laiton) 13%,transparent);
}

main > section,.pied{position:relative}
main > section::after,.pied::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100% - var(--colonne)) / 2));
  --joue-masque:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  background-image:
    var(--joue-carton);
  background-size:424px 336px;
  background-position:left top;
  background-repeat:repeat;
  -webkit-mask-image:var(--joue-masque);
  mask-image:var(--joue-masque);
}
main > section > .bande,
main > section > figure{position:relative;z-index:1}

main > section,.pied{--joue-carton:none}

.volume,.travaux,.equipe,.contact{
  --joue-fond:transparent;
  --joue-trait:rgba(16,26,36,.075);
  --joue-lueur:rgba(255,255,255,.24);
  --joue-arete:rgba(255,255,255,.58);
  --joue-carton:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='424' height='336'%3E%3Crect width='424' height='336' fill='%23FFFFFF' fill-opacity='0.0099'/%3E%3Crect width='424' height='336' fill='%23101A24' fill-opacity='0.0091'/%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%23101A24' stroke-opacity='0.085' d='M0 0.5h78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.053' d='M232 0.5h50'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.053' d='M214.5 7v60'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.026' d='M318 0.5h88'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.026' d='M300.5 7v60'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.075' d='M0 74.5h40'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.047' d='M190 74.5h54'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.047' d='M172.5 81v78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.022' d='M280 74.5h54'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.022' d='M262.5 81v78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.068' d='M370 74.5h36'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.068' d='M352.5 81v78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.037' d='M0 166.5h114'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.029' d='M224 166.5h76'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.029' d='M206.5 173v68'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.077' d='M336 166.5h70'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.077' d='M318.5 173v68'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.043' d='M0 248.5h68'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.059' d='M104 248.5h74'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.059' d='M86.5 255v74'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.049' d='M308 248.5h98'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.049' d='M290.5 255v74'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.1' d='M0 1.5h78'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.062' d='M232 1.5h50'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.062' d='M215.5 7v60'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.03' d='M318 1.5h88'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.03' d='M301.5 7v60'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.088' d='M0 75.5h40'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.055' d='M190 75.5h54'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.055' d='M173.5 81v78'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.026' d='M280 75.5h54'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.026' d='M263.5 81v78'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.08' d='M370 75.5h36'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.08' d='M353.5 81v78'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.044' d='M0 167.5h114'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.034' d='M224 167.5h76'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.034' d='M207.5 173v68'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.09' d='M336 167.5h70'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.09' d='M319.5 173v68'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.05' d='M0 249.5h68'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.07' d='M104 249.5h74'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.07' d='M87.5 255v74'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.058' d='M308 249.5h98'/%3E%3Cpath stroke='%23FFFFFF' stroke-opacity='0.058' d='M291.5 255v74'/%3E%3Cpath stroke='%23101A24' stroke-opacity='.05' d='M225 37.5h64M69 120.5h92M363 120.5h50M217 207.5h90M97 292.5h88'/%3E%3C/g%3E%3C/svg%3E");
}
.jour,.savoir,.pied{
  --joue-fond:transparent;
  --joue-trait:rgba(228,184,120,.075);
  --joue-lueur:rgba(16,26,36,.24);
  --joue-arete:rgba(16,26,36,.44);
  --joue-carton:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='424' height='336'%3E%3Crect width='424' height='336' fill='%23E4B878' fill-opacity='0.0099'/%3E%3Crect width='424' height='336' fill='%23101A24' fill-opacity='0.0091'/%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.15' d='M0 0.5h78'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.093' d='M232 0.5h50'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.093' d='M214.5 7v60'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.045' d='M318 0.5h88'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.045' d='M300.5 7v60'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.132' d='M0 74.5h40'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.083' d='M190 74.5h54'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.083' d='M172.5 81v78'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.039' d='M280 74.5h54'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.039' d='M262.5 81v78'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.12' d='M370 74.5h36'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.12' d='M352.5 81v78'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.066' d='M0 166.5h114'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.051' d='M224 166.5h76'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.051' d='M206.5 173v68'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.135' d='M336 166.5h70'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.135' d='M318.5 173v68'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.075' d='M0 248.5h68'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.105' d='M104 248.5h74'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.105' d='M86.5 255v74'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.087' d='M308 248.5h98'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='0.087' d='M290.5 255v74'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.34' d='M0 1.5h78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.211' d='M232 1.5h50'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.211' d='M215.5 7v60'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.102' d='M318 1.5h88'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.102' d='M301.5 7v60'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.299' d='M0 75.5h40'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.187' d='M190 75.5h54'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.187' d='M173.5 81v78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.088' d='M280 75.5h54'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.088' d='M263.5 81v78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.272' d='M370 75.5h36'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.272' d='M353.5 81v78'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.15' d='M0 167.5h114'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.116' d='M224 167.5h76'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.116' d='M207.5 173v68'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.306' d='M336 167.5h70'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.306' d='M319.5 173v68'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.17' d='M0 249.5h68'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.238' d='M104 249.5h74'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.238' d='M87.5 255v74'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.197' d='M308 249.5h98'/%3E%3Cpath stroke='%23101A24' stroke-opacity='0.197' d='M291.5 255v74'/%3E%3Cpath stroke='%23E4B878' stroke-opacity='.06' d='M225 37.5h64M69 120.5h92M363 120.5h50M217 207.5h90M97 292.5h88'/%3E%3C/g%3E%3C/svg%3E");
}
.hero{
  --joue-fond:transparent;
  --joue-trait:rgba(0,0,0,.05);
  --joue-lueur:rgba(255,255,255,.045);
  --joue-arete:rgba(255,255,255,.22);
}
.equipe__photo{position:relative;z-index:1}

.volume,.travaux,.equipe{background:var(--fond)}
.jour,.savoir{background:var(--nuit)}
.contact{background:var(--fond-alt)}
.pied{background:var(--nuit)}

.panneau{
  border-color:color-mix(in oklab,var(--marque) 22%,var(--filet));
  box-shadow:0 1px 0 var(--liseret) inset,var(--ombre-bloc)}
.panneau::before{
  height:var(--ruban);
  background:color-mix(in srgb,var(--laiton) 52%,var(--carte));
  border-bottom:1px solid color-mix(in oklab,var(--marque) 22%,transparent);
  border-radius:var(--rayon) var(--rayon) 0 0}
.panneau::after{
  content:"";position:absolute;left:50%;top:0;width:1px;height:var(--ruban);
  transform:translateX(-50%);
  background:color-mix(in oklab,var(--marque) 30%,transparent)}

.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

.hero__verre{
  border-left:var(--ruban) solid color-mix(in srgb,var(--laiton) 60%,var(--nuit));
  padding-left:clamp(1.6rem,4vw,2.8rem)}

.assise{
  height:8px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 70%,var(--fond)) 0 58px,
    color-mix(in srgb,var(--laiton) 26%,var(--fond)) 132px 100%);
  border-block:1px solid color-mix(in oklab,var(--marque) 20%,transparent)}
.entete-section--centre .assise{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 14%,var(--fond)) 0%,
    color-mix(in srgb,var(--laiton) 74%,var(--fond)) 50%,
    color-mix(in srgb,var(--laiton) 14%,var(--fond)) 100%)}
.jour .assise,.savoir .assise,.assise--pied{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 14%,var(--nuit)) 0%,
    var(--laiton) 50%,
    color-mix(in srgb,var(--laiton) 14%,var(--nuit)) 100%);
  border-block-color:color-mix(in srgb,var(--laiton) 28%,transparent)}

.volume{z-index:2;margin-top:calc(clamp(2rem,5vw,4rem) * -1);
  padding-block:0 clamp(3rem,8vw,5rem)}
.travaux{margin-top:0;z-index:auto;padding-block:clamp(3rem,8vw,5.5rem)}

.volume__intro{max-width:62ch;color:var(--encre-douce);margin:0}   /* 7,75 sur --carte */
.volume__note{max-width:70ch;margin:clamp(1.8rem,4vw,2.4rem) 0 0;
  color:var(--encre-douce);font-size:.92rem}                       /* 7,75 */

.echelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,1.8vw,1.1rem);
  margin:clamp(1.8rem,4vw,2.6rem) 0 0;padding:0;list-style:none}

.palier{position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(96px,15vw,124px);
  padding:clamp(20px,2.6vw,26px) clamp(14px,1.8vw,18px) clamp(14px,1.8vw,18px);
  text-align:center;border-radius:var(--rayon);
  background:linear-gradient(#e6e4de,#e6e4de);
  border:1px solid color-mix(in oklab,var(--filet) 88%,var(--encre));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             0 14px 30px -24px rgba(22,32,43,.55);
  transition:box-shadow .24s ease}
.palier:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             0 22px 40px -26px rgba(22,32,43,.6)}

.palier::before{content:"";position:absolute;left:-1px;right:-1px;top:9px;
  height:9px;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--laiton) 62%,var(--fond-alt)),
    color-mix(in srgb,var(--laiton) 40%,var(--fond-alt)));
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 2px 4px -2px rgba(22,32,43,.35)}
.palier::after{content:"";position:absolute;left:50%;top:0;height:9px;
  width:1px;transform:translateX(-50%);pointer-events:none;
  background:color-mix(in oklab,var(--marque) 42%,transparent)}

.palier__nom{display:block;
  font-family:var(--police-libelle);font-weight:500;
  font-size:clamp(.64rem,1.9vw,.74rem);text-transform:uppercase;
  letter-spacing:.1em;line-height:1.4;color:var(--encre-douce)}     /* 7,75 */
.palier__cube{display:block;margin-top:.25rem;
  font-family:var(--police-libelle);font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(.9rem,2.4vw,1.14rem);letter-spacing:.01em;
  color:var(--encre)}                                               /* 16,46 */

@media (min-width:48rem){
  .echelle{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.jour{color:var(--creme);padding-block:clamp(3.2rem,8vw,5.5rem)}
.jour .sur{color:var(--laiton)}                       /* 7,02 · 5,98 en haut du dégradé */
.jour h2{color:var(--creme)}                          /* 14,96 · 12,75 */

.jour__caisses{display:grid;gap:clamp(.8rem,1.8vw,1.15rem);
  margin-top:clamp(1.8rem,4vw,2.6rem);padding:0;list-style:none}

.etape{position:relative;
  padding:clamp(24px,2.8vw,30px) clamp(16px,2vw,20px) clamp(18px,2.2vw,22px);
  border-radius:var(--rayon);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--creme) 7%,transparent) 0%,
    color-mix(in srgb,var(--creme) 3%,transparent) 100%);
  border:1px solid color-mix(in srgb,var(--laiton) 22%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--creme) 10%,transparent);
  transition:border-color .24s ease}
.etape:hover{
  border-color:color-mix(in srgb,var(--laiton) 46%,transparent)}
.etape::before{content:"";position:absolute;left:-1px;right:-1px;top:10px;
  height:8px;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--laiton) 76%,var(--nuit)),
    color-mix(in srgb,var(--laiton) 48%,var(--nuit)))}
.etape::after{content:"";position:absolute;left:50%;top:0;height:10px;
  width:1px;transform:translateX(-50%);pointer-events:none;
  background:color-mix(in srgb,var(--laiton) 55%,transparent)}

.etape h3{margin:0 0 .35rem;color:var(--creme);
  font-size:clamp(1.05rem,1rem + .3vw,1.24rem)}       /* 14,96 · 12,75 */
.etape p{margin:0;color:var(--creme-doux);font-size:.94rem}  /* 8,26 · 7,03 */

.jour__note{margin:clamp(2rem,4.5vw,2.8rem) auto 0;max-width:64ch;
  padding-top:clamp(1.1rem,2.6vw,1.5rem);
  border-top:1px solid color-mix(in srgb,var(--laiton) 25%,transparent);
  text-align:center;color:var(--creme-doux);font-size:.96rem}       /* 8,26 */

@media (min-width:44rem){
  .jour__caisses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:70rem){
  .jour__caisses{grid-template-columns:repeat(5,minmax(0,1fr))}
}

.poste{position:relative}
.poste::before{content:"";position:absolute;
  left:calc(-1 * clamp(.5rem,1.6vw,.9rem));top:0;bottom:0;width:2px;
  background:var(--marque);transform:scaleY(0);transform-origin:top;
  transition:transform .25s ease}
.poste:hover::before{transform:scaleY(1)}
.poste__num::before{
  width:16px;height:11px;top:.72em;background:none;opacity:.8;
  border:1px dashed var(--marque);border-radius:1px}
.poste:hover .poste__num::before{
  transform:none;opacity:1;background:color-mix(in srgb,var(--laiton) 32%,transparent)}

.sur::before{content:"";display:inline-block;vertical-align:-.08em;
  width:1.5rem;height:.92rem;margin-right:.58rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 36'%3E%3Cpath d='M14 0 27 15h-7v21H8V15H1z'/%3E%3Cpath d='M44 0 57 15h-7v21H38V15h-7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 36'%3E%3Cpath d='M14 0 27 15h-7v21H8V15H1z'/%3E%3Cpath d='M44 0 57 15h-7v21H38V15h-7z'/%3E%3C/svg%3E") center/contain no-repeat}

.equipe__photo{border-top:0}

.marque__nom,.pied__nom{letter-spacing:.05em}

.cadre::after,.savoir .cadre::after{border:0;border-color:transparent}
.cadre{position:relative;isolation:isolate}
.cadre::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:calc(clamp(7px,1.6vw,14px) * -1);
  border:0;border-radius:calc(var(--rayon) + 5px);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--laiton) 58%,var(--fond)) 0%,
    color-mix(in srgb,var(--laiton) 32%,var(--fond)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             0 20px 38px -28px var(--ombre-photo)}
.cadre img{border-radius:var(--rayon);box-shadow:var(--ombre-bloc)}
.savoir .cadre::after{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--laiton) 46%,var(--nuit)) 0%,
    color-mix(in srgb,var(--laiton) 24%,var(--nuit)) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--laiton) 34%,transparent),
             0 24px 44px -30px rgba(0,0,0,.75)}
.savoir .cadre img{box-shadow:0 1px 2px rgba(0,0,0,.30),0 12px 28px rgba(0,0,0,.42)}

.js .palier.reveal{transition-delay:calc(var(--p,0) * 66ms)}
.js .etape.reveal{transition-delay:calc(var(--i,0) * 66ms)}

@media (prefers-reduced-motion:reduce){
  .poste::before{opacity:0;transform:scaleY(1);transition:opacity .25s ease}
  .poste:hover::before{transform:scaleY(1);opacity:1}
  .poste:hover .poste__num::before{transform:none}
  .cadre::after{transition:opacity .4s ease}
  .cadre:hover::after{transform:none}
}

.a-completer{opacity:.5;font-style:italic;font-size:.92em;letter-spacing:.01em}

@media (min-width:62rem){
  .nav > #nav-links{flex-basis:auto}
}

.entete{background-color:rgba(16,26,36,0.84)}
.entete{margin-bottom:-67px}

@media (min-width:900px){
  .hero{align-items:center;padding-top:calc(clamp(4.5rem,11vw,7rem) + 67px)}
}

@media (max-width:600px){
  img.hero__photo{height:327px;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover}
}

@media (max-width:600px){
  section#volume.volume{padding-top:40px}   /* haut 0→40 */
}

@media (max-width:600px){
  .tableau__aujourdhui.tableau__aujourdhui.tableau__aujourdhui{font-size:11.6px}
  .palier__nom.palier__nom.palier__nom{font-size:11.6px}
}

:target{scroll-margin-top:0}
html{scroll-padding-top:69px}

@media (max-width:600px){
  div.hero__verre{display:flex;flex-direction:column}
  div.hero__verre > *{order:4}
  div.hero__verre > p.hero__etiquette{order:1}
  div.hero__verre > h1.hero__titre{order:2}
  div.hero__verre > span.hero__accent{order:2}
  div.hero__verre > div.hero__actions{order:3;margin-top:12px;margin-bottom:28px}
}
