/* polices hébergées sur le site (licence OFL, jeu latin) : aucune requête vers Google */
@font-face{font-family:"Young Serif";src:url(/assets/polices/young-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/polices/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(/assets/polices/fragment-mono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* vert « prairie » et orange de l'ancien site (#FF811A), choisis le 04/10/2026 ; voir couleurs/ */
  --nuit:#243420;
  --nuit-2:#2B3D26;
  --nuit-3:#33472D;
  --ambre:#FF811A;
  --ambre-pale:#FFA257;
  --papier:#EDE7D9;
  --papier-2:#BEC2AD;
  --papier-3:#ADB39B;
  --filet:#44573C;
  /* palette inversée de la section papier */
  --encre:#14180F;
  --encre-2:#4C5340;
  --encre-3:#5E6450;
  --or-sombre:#9E4700;
  --filet-clair:#CFC7B4;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SF Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  /* les mêmes couleurs en composantes, pour les transparences */
  --nuit-rvb:36,52,32;--ambre-rvb:255,129,26;--ambre-pale-rvb:255,162,87;--encre-rvb:20,24,15;
}

*{box-sizing:border-box}
/* sans cela, un element de grille refuse de descendre sous la largeur de son contenu
   et fait deborder la page horizontalement sur petit ecran */
.lieu>*,.lieu-col>*,.chef>*,.menu-tete>*,.menu-corps>*,.saison>*,.faits>*,.aller>*,.infos>*{min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--nuit);color:var(--papier);
  font-family:var(--sans);font-size:17px;line-height:1.68;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
picture{display:contents}
a{color:inherit}

.shell{max-width:1280px;margin:0 auto;padding:0 40px}
@media(max-width:900px){.shell{padding:0 28px}}
@media(max-width:560px){.shell{padding:0 22px}}

/* ============ typo ============ */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(30px,4.6vw,52px);line-height:1.06;text-wrap:balance;max-width:20ch}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.22}
p{margin:0 0 1.05em;max-width:60ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(17.5px,1.9vw,20px);line-height:1.6;max-width:54ch}
.mute{color:var(--papier-2)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ============ barre haute ============ */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 40px;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.stuck{background:rgba(var(--nuit-rvb),.94);backdrop-filter:blur(14px);padding:13px 40px;border-bottom-color:var(--filet)}
.wordmark{font-family:var(--serif);font-size:19px;text-decoration:none;white-space:nowrap;text-shadow:0 1px 14px rgba(var(--nuit-rvb),.65)}
.topbar-tel{
  font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-decoration:none;
  padding:9px 18px;border:1px solid rgba(var(--ambre-pale-rvb),.4);color:var(--ambre-pale);white-space:nowrap;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);backdrop-filter:blur(6px);
}
.topbar-tel:hover,.topbar-tel:focus-visible{border-color:var(--ambre);color:var(--nuit);background:var(--ambre)}
@media(max-width:900px){.topbar{padding:16px 28px}.topbar.stuck{padding:12px 28px}.topbar-tel{display:none}}

/* ============ 1. ARRIVÉE ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--nuit)}
.hero-media{position:absolute;inset:0}
.hero-media picture{display:contents}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(1.04)}
/* la vidéo se substitue à l'affiche en fondu, une fois qu'elle joue vraiment */
.hero-media video{opacity:0;transition:opacity .9s var(--ease)}
.hero-media video.joue{opacity:1}
/* voile léger : il protège la ligne de texte, il ne noie pas l'image */
.hero-voile{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(var(--nuit-rvb),.88) 0%,
    rgba(var(--nuit-rvb),.62) 16%,
    rgba(var(--nuit-rvb),.28) 34%,
    rgba(var(--nuit-rvb),.08) 52%,
    rgba(var(--nuit-rvb),.02) 62%,
    rgba(var(--nuit-rvb),.28) 86%,
    rgba(var(--nuit-rvb),.62) 100%);
}
.hero-inner{position:relative;width:100%;padding:0 0 clamp(40px,6vh,74px)}
/* le texte porte son propre halo : le reste de l'image n'a pas à être assombri pour lui */
.hero-inner::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150%;z-index:0;pointer-events:none;
  background:radial-gradient(86% 82% at 32% 84%,
    rgba(var(--nuit-rvb),.86) 0%, rgba(var(--nuit-rvb),.68) 32%, rgba(var(--nuit-rvb),.34) 56%, rgba(var(--nuit-rvb),0) 78%);
}
.hero-inner > *{position:relative;z-index:1}
.hero h1{
  font-size:clamp(41px,7vw,88px);line-height:1.0;margin:0 0 24px;max-width:none;
  text-wrap:balance;text-shadow:0 2px 30px rgba(var(--nuit-rvb),.5);
}
.hero .lede{margin-bottom:14px;color:var(--papier);max-width:44ch;text-shadow:0 1px 18px rgba(var(--nuit-rvb),.6)}
/* la note Google, dès l'arrivée : c'est la preuve la plus forte du dossier */
.hero-avis{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 18px;
  font-size:15px;color:var(--papier);text-shadow:0 1px 14px rgba(var(--nuit-rvb),.85);
  text-decoration:underline;text-decoration-color:rgba(var(--ambre-pale-rvb),.35);text-underline-offset:5px;text-decoration-thickness:1px;
}
.hero-avis svg{width:17px;height:17px;fill:var(--ambre);flex-shrink:0}
.hero-avis b{font-weight:600}
.hero-avis:hover,.hero-avis:focus-visible{text-decoration-color:var(--ambre)}
/* posé sur la vidéo, qui passe des massifs fleuris aux murs clairs : en crème, l'orange reste aux séparateurs */
.hero-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--papier);margin:0 0 24px;max-width:none;
  display:flex;flex-wrap:wrap;gap:3px 0;align-items:center;text-shadow:0 1px 3px rgba(var(--nuit-rvb),.9),0 2px 16px rgba(var(--nuit-rvb),.75);
}
.hero-eyebrow span+span::before{content:"·";padding:0 .9em;color:var(--ambre)}
/* sur petit ecran la mention tient sur une ligne : pas de separateur orphelin */
@media(max-width:600px){.hero-eyebrow span:nth-child(3){display:none}}

.cta-row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.cta{
  display:inline-flex;align-items:baseline;gap:14px;background:var(--ambre);color:var(--nuit);
  text-decoration:none;padding:17px 30px;font-weight:600;font-size:16px;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.cta span{white-space:nowrap}
.cta b{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.03em;white-space:nowrap}
.cta:hover,.cta:focus-visible{background:var(--ambre-pale);transform:translateY(-2px)}
.cta:active{background:var(--ambre-pale);transform:scale(.98)}
.cta-note{font-size:14.5px;color:var(--papier-2);text-shadow:0 1px 14px rgba(var(--nuit-rvb),.8)}
@media(max-width:560px){.cta{width:100%;justify-content:space-between;padding:16px 22px;gap:10px}}

.defile{
  position:absolute;right:40px;bottom:34px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--papier-2);
  display:flex;align-items:center;gap:12px;
}
.defile::after{content:"";width:1px;height:44px;background:linear-gradient(var(--ambre),transparent);animation:coule 2.6s ease-in-out infinite}
@keyframes coule{0%,100%{opacity:.25;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:900px){.defile{display:none}}
/* téléphone court (barres du navigateur affichées) : l'appel doit tenir dans le premier écran */
@media(max-width:899px) and (max-height:760px){
  .hero-inner{padding-bottom:22px}
  .hero-eyebrow{margin-bottom:12px}
  .hero h1{font-size:clamp(34px,9.6vw,41px);margin-bottom:14px}
  .hero .lede{font-size:16px;line-height:1.55;margin-bottom:6px}
  .hero-avis{margin-bottom:10px}
}

/* ============ rythme des sections ============ */
.bloc{padding:clamp(76px,10vh,132px) 0;position:relative}
@media(max-width:640px){
  .bloc{padding:60px 0}
  .tete{margin-bottom:30px}
  .seuil{margin-bottom:26px;gap:14px}
  .lieu{gap:14px}
  .lieu-col{gap:14px}
  .info{padding:18px 20px}
  .menu-tete{margin-bottom:32px}
  .chef-bande{margin-top:24px}
  .menu-illus{margin-top:28px}
}
.bloc.fonce{background:var(--nuit-2)}
.bloc.papier{background:var(--papier);color:var(--encre)}
.bloc.papier h2,.bloc.papier h3{color:var(--encre)}
.bloc.papier .mute{color:var(--encre-2)}
.bloc.papier .mono{color:var(--or-sombre)}

/* seuil de section : un vrai marqueur, pas un filet perdu */
.seuil{
  display:flex;align-items:center;gap:22px;margin-bottom:clamp(32px,4.4vh,52px);
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ambre);
}
.seuil::after{content:"";flex:1;height:1px;background:var(--filet)}
.bloc.papier .seuil{color:var(--or-sombre)}
.bloc.papier .seuil::after{background:var(--filet-clair)}

.tete{margin-bottom:clamp(36px,5vh,60px)}
.tete h2{margin-bottom:18px}

/* ============ 2. LE LIEU ============ */
.lieu{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:880px){.lieu{grid-template-columns:1fr 1fr;align-items:stretch}}
.vue{position:relative;overflow:hidden;margin:0;background:var(--nuit-3)}
.vue img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.vue:hover img{transform:scale(1.04)}
.vue figcaption{
  position:absolute;inset:auto 0 0 0;padding:52px 24px 20px;
  background:linear-gradient(to top,rgba(var(--nuit-rvb),.92),rgba(var(--nuit-rvb),.55) 45%,transparent);
  font-size:14.5px;line-height:1.5;color:var(--papier-2);
}
.vue figcaption b{display:block;color:var(--papier);font-weight:400;font-family:var(--serif);font-size:19px;margin-bottom:3px}
.vue-haute{aspect-ratio:4/5}
.lieu-col{display:grid;gap:20px;grid-template-rows:1fr 1fr}
.lieu-col .vue{aspect-ratio:16/9}
@media(max-width:879px){.lieu-col .vue{aspect-ratio:16/10}}

/* ============ 3. LE CHEF ============ */
.chef{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:stretch}
@media(min-width:900px){.chef{grid-template-columns:.78fr 1fr}}
.chef-portrait{margin:0;overflow:hidden;background:var(--nuit-3);position:relative;min-height:440px}
/* l'image est hors flux : c'est le texte qui fixe la hauteur, la photo la remplit */
.chef-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.chef-mots{display:flex;flex-direction:column;justify-content:flex-start}
@media(max-width:899px){.chef-portrait{aspect-ratio:4/5;min-height:0;position:relative}}
.chef-mots h2{margin-bottom:22px}
.chef-mots p{font-size:clamp(17px,1.85vw,19px);line-height:1.7}
.chef-mots p.fort{color:var(--papier)}
.signature{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--filet);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-3);
}
.chef-bande{margin:clamp(28px,4vw,52px) 0 0;overflow:hidden;aspect-ratio:16/7;background:var(--nuit-3);position:relative}
.chef-bande img{width:100%;height:100%;object-fit:cover;object-position:center 14%}
.chef-bande figcaption{
  position:absolute;inset:auto 0 0 0;padding:46px 26px 18px;
  background:linear-gradient(to top,rgba(var(--nuit-rvb),.9),transparent);
  font-size:14.5px;color:var(--papier-2);
}
@media(max-width:899px){.chef-bande{aspect-ratio:16/9}}

/* ============ 4. LE MENU (bascule papier) ============ */
.menu-tete{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;align-items:end;margin-bottom:clamp(36px,5vh,58px)}
@media(min-width:880px){.menu-tete{grid-template-columns:1.15fr .85fr}}
.prix{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.prix .chiffre{font-family:var(--serif);font-size:clamp(62px,10vw,116px);line-height:.85;color:var(--encre)}
.prix .chiffre i{font-style:normal;font-size:.55em;letter-spacing:-.04em}
.prix .quoi{font-size:15.5px;color:var(--encre-2);max-width:24ch;line-height:1.55}

.menu-corps{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr}
@media(min-width:880px){.menu-corps{grid-template-columns:.85fr 1.15fr}}
.deroule{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet-clair)}
.deroule li{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--filet-clair);font-size:16px;color:var(--encre)}
.deroule .rang{font-family:var(--mono);font-size:10.5px;color:var(--encre-3);min-width:20px}
.carte{background:rgba(var(--encre-rvb),.045);border-left:2px solid var(--or-sombre);padding:clamp(24px,3vw,38px)}
.carte ul{list-style:none;margin:0;padding:0}
.carte li{padding:8px 0;font-size:16.5px;line-height:1.45;color:var(--encre)}
.carte li em{font-style:normal;font-family:var(--serif);color:var(--or-sombre)}
.menu-pied{margin-top:24px;font-size:14.5px;color:var(--encre-3)}
.menu-illus{margin:clamp(32px,4.5vw,56px) 0 0;overflow:hidden;aspect-ratio:16/5;background:rgba(var(--encre-rvb),.06)}
.menu-illus img{width:100%;height:100%;object-fit:cover;object-position:center 70%}
@media(max-width:879px){.menu-illus{aspect-ratio:16/9}}

/* ============ 5. LA SAISON ============ */
.saison{display:grid;gap:1px;background:var(--filet);grid-template-columns:1fr;border:1px solid var(--filet)}
@media(min-width:820px){.saison{grid-template-columns:repeat(3,1fr)}}
.mois{background:var(--nuit-2);padding:clamp(26px,3.2vw,38px)}
.mois .quand{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ambre);margin-bottom:18px}
.mois h3{margin-bottom:11px}
.mois p{font-size:15.5px;color:var(--papier-2);margin:0}

/* ============ 6. LA PREUVE ============ */
.note{display:flex;align-items:baseline;gap:clamp(20px,3vw,38px);flex-wrap:wrap;margin-bottom:clamp(34px,4.6vh,54px)}
@media(max-width:560px){.note{gap:8px}.note .apres{max-width:none}}
.note .gros{font-family:var(--serif);font-size:clamp(78px,13vw,158px);line-height:.8;color:var(--ambre)}
.note .apres{max-width:32ch}
.note .apres strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.3vw,26px);margin-bottom:7px;white-space:nowrap}
.note .apres strong a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--ambre-pale-rvb),.35);
  text-underline-offset:6px;text-decoration-thickness:1px}
.note .apres strong a:hover,.note .apres strong a:focus-visible{text-decoration-color:var(--ambre)}
.note .apres span{font-size:15.5px;color:var(--papier-2)}
.faits{display:grid;gap:1px;background:var(--filet);grid-template-columns:1fr;border:1px solid var(--filet);margin-bottom:clamp(32px,4.4vh,48px)}
/* trois faits, ou deux quand la mention datée a expiré : jamais de case vide */
@media(min-width:780px){.faits{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.fait{background:var(--nuit);padding:clamp(22px,2.8vw,32px)}
.fait p{font-family:var(--serif);font-size:19px;line-height:1.4;margin:0 0 12px;color:var(--papier)}
.fait span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--papier-3)}
.fait span a{color:var(--papier-2);text-decoration:underline;text-decoration-color:rgba(var(--ambre-pale-rvb),.45);text-underline-offset:3px}
.fait span a:hover,.fait span a:focus-visible{text-decoration-color:var(--ambre)}
.presse{
  display:flex;flex-wrap:wrap;align-items:center;
  font-family:var(--serif);font-size:clamp(17px,2.1vw,25px);line-height:1.55;color:var(--papier-2);max-width:none;
}
.presse span{white-space:nowrap}
.presse span+span::before{content:"·";padding:0 .55em;color:var(--ambre);font-family:var(--sans)}

/* ============ bandeau vallon ============ */
.bandeau{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--nuit-3);margin:0}
.bandeau img{width:100%;height:100%;object-fit:cover}
.bandeau-mot{
  position:absolute;inset:auto 0 0 0;padding:clamp(40px,7vw,80px) 40px clamp(26px,3.4vw,44px);
  background:linear-gradient(to top,rgba(var(--nuit-rvb),.9),transparent);
}
.bandeau-mot p{font-family:var(--serif);font-size:clamp(20px,3vw,38px);line-height:1.2;margin:0;max-width:22ch;color:var(--papier)}
@media(max-width:700px){.bandeau{aspect-ratio:16/11}.bandeau-mot{padding-left:22px;padding-right:22px}}

/* ============ 7. Y ALLER ============ */
.aller{display:grid;gap:clamp(28px,4vw,58px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.aller{grid-template-columns:1fr .82fr}}
.infos{display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet)}
@media(min-width:600px){.infos{grid-template-columns:1fr 1fr}}
.info{background:var(--nuit);padding:22px 26px;display:grid;gap:5px;align-content:start}
.info dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--papier-3)}
.info dd{margin:0;font-size:17px}
.info dd a{color:var(--ambre-pale);text-decoration:none;border-bottom:1px solid var(--filet);transition:border-color .3s var(--ease)}
.info dd a:hover,.info dd a:focus-visible{border-bottom-color:var(--ambre)}
.info dd small{display:block;font-size:14px;color:var(--papier-2);margin-top:6px;line-height:1.55}
.rappel{background:var(--nuit-3);border-left:2px solid var(--ambre);padding:clamp(26px,3.4vw,40px);align-self:start}
.rappel h3{margin-bottom:13px}
.rappel p{color:var(--papier-2);font-size:15.5px;margin-bottom:24px}

/* ============ pied ============ */
footer{border-top:1px solid var(--filet);padding:clamp(44px,6vh,72px) 0 calc(clamp(44px,6vh,72px) + 78px)}
@media(min-width:900px){footer{padding-bottom:clamp(44px,6vh,72px)}}
.pied{display:flex;flex-wrap:wrap;gap:26px 48px;justify-content:space-between;align-items:flex-end}
.pied-marque{font-family:var(--serif);font-size:clamp(28px,5vw,54px);line-height:1;margin-bottom:12px}
.pied-adresse{font-size:15px;color:var(--papier-2);line-height:1.6}
.pied-legal{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--papier-3);line-height:2.1}
.pied-legal a{color:var(--papier-3);text-decoration:none;border-bottom:1px solid var(--filet)}

/* ============ barre d'appel mobile ============ */
.barre-appel{
  position:fixed;inset:auto 0 0 0;z-index:70;display:none;
  box-shadow:0 -14px 34px rgba(var(--nuit-rvb),.5);
  transform:translateY(102%);transition:transform .45s var(--ease);
}
.barre-appel a{
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;
  padding:15px 12px calc(15px + env(safe-area-inset-bottom));font-size:15px;
  transition:background .2s var(--ease);
}
.barre-appel svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
.barre-tel{flex:1;background:var(--ambre);color:var(--nuit);font-weight:600}
.barre-tel b{font-family:var(--mono);font-weight:400;letter-spacing:.02em}
.barre-tel:active{background:var(--ambre-pale)}
.barre-appel .barre-route{background:var(--nuit-3);color:var(--ambre-pale);font-weight:500;padding-left:16px;padding-right:16px}
.barre-route:active{background:var(--filet)}
.barre-appel.montre{transform:translateY(0)}
@media(max-width:899px){.barre-appel{display:flex}}
/* écran étroit : le numéro et l'icône suffisent à dire l'appel */
/* le mot reste lu par les lecteurs d'écran : le nom du lien doit contenir ce qui s'affiche */
@media(max-width:369px){.barre-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ============ révélations ============ */
[data-rev]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.est-cache{opacity:0;transform:translateY(24px)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .est-cache{opacity:1!important;transform:none!important}
}
:focus-visible{outline:2px solid var(--ambre);outline-offset:3px}
.bloc.papier :focus-visible{outline-color:var(--or-sombre)}

/* ============================================================
   NAVIGATION ENTRE LES PAGES
   ============================================================ */
.nav{display:flex;align-items:center;gap:26px;flex:1;justify-content:center}
.nav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--papier-2);white-space:nowrap;padding:4px 0;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
  text-shadow:0 1px 3px rgba(var(--nuit-rvb),.95),0 2px 14px rgba(var(--nuit-rvb),.8);
}
.nav a:hover,.nav a:focus-visible{color:var(--papier)}
/* barre en fond plein : l'ombre ne sert plus */
.topbar.stuck .nav a,.topbar.pleine .nav a{text-shadow:none}
.nav a[aria-current="page"]{color:var(--ambre);border-bottom-color:var(--ambre)}
@media(max-width:1080px){.nav{gap:18px}.nav a{font-size:11px;letter-spacing:.1em}}
/* sur téléphone : un en-tête compact, et les pages derrière un bouton Menu */
.menu-bouton,.menu-fermer{
  display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambre-pale);background:rgba(var(--nuit-rvb),.35);border:1px solid rgba(var(--ambre-pale-rvb),.4);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.menu-bouton:active,.menu-fermer:active{background:var(--ambre);color:var(--nuit);border-color:var(--ambre)}
.menu-traits{width:16px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
@media(max-width:899px){
  .topbar,.topbar.stuck{padding:8px 16px 8px 22px}
  .topbar{transition:background .5s var(--ease),border-color .5s var(--ease),transform .35s var(--ease)}
  .nav{display:none}
  .menu-bouton{display:inline-flex}
  /* il s'efface quand on descend, revient quand on remonte ou qu'on y arrive au clavier */
  .topbar.replie{transform:translateY(-101%)}
  .topbar.replie:focus-within{transform:none}
  /* l'en-tête est posé sur l'image : le texte ne doit jamais passer dessous */
  .hero-inner{padding-top:76px}
  .entete-inner{padding-top:88px}
}

dialog.menu-mobile{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:0 22px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;
  background:var(--nuit);color:var(--papier);
}
dialog.menu-mobile[open]{display:flex;flex-direction:column;animation:menu-entre .3s var(--ease)}
dialog.menu-mobile::backdrop{background:var(--nuit)}
@keyframes menu-entre{from{opacity:0;transform:translateY(-10px)}}
html:has(dialog.menu-mobile[open]){overflow:hidden}
.menu-haut{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;
  border-bottom:1px solid var(--filet);margin-right:-6px}
.menu-fermer{display:inline-flex}
.menu-liens{display:flex;flex-direction:column;padding:8px 0 0}
.menu-liens a{
  display:flex;align-items:baseline;gap:16px;min-height:54px;padding:12px 0;
  border-bottom:1px solid var(--filet);text-decoration:none;color:var(--papier);
  font-family:var(--serif);font-size:clamp(24px,7vw,30px);line-height:1.15;
}
.menu-liens .rang{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--papier-3);min-width:22px}
.menu-liens a[aria-current="page"],.menu-liens a[aria-current="page"] .rang{color:var(--ambre)}
.menu-liens a:active{color:var(--ambre-pale)}
.menu-actions{margin-top:auto;padding-top:18px;display:grid;gap:12px}
.menu-actions .cta{width:100%;justify-content:space-between}
.menu-note{margin:6px 0 0;max-width:none;text-align:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--papier-3)}

/* action secondaire : l'itinéraire, à côté de l'appel */
.cta-second{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;
  border:1px solid rgba(var(--ambre-pale-rvb),.4);color:var(--ambre-pale);text-decoration:none;font-weight:500;font-size:16px;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.cta-second svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.cta-second:hover,.cta-second:focus-visible{border-color:var(--ambre);color:var(--ambre)}
.cta-second:active{background:rgba(var(--ambre-rvb),.14)}
.rappel .cta{display:flex;justify-content:space-between}
.rappel .cta-second{margin-top:12px}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */
body.interieur{padding-top:0}
.topbar.pleine{background:rgba(var(--nuit-rvb),.94);backdrop-filter:blur(14px);border-bottom-color:var(--filet)}

.entete{position:relative;overflow:hidden;background:var(--nuit-3);
  min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end}
.entete picture{display:contents}
.entete img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
.entete::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--nuit-rvb),.94) 0%,rgba(var(--nuit-rvb),.7) 26%,rgba(var(--nuit-rvb),.2) 58%,rgba(var(--nuit-rvb),.42) 100%)}
.entete-inner{position:relative;z-index:1;width:100%;padding:0 0 clamp(30px,4.6vh,54px)}
.entete h1{font-size:clamp(34px,5.4vw,62px);line-height:1.04;margin:0 0 16px;max-width:17ch;
  text-wrap:balance;text-shadow:0 2px 26px rgba(var(--nuit-rvb),.6)}
.entete .lede{color:var(--papier);max-width:52ch;text-shadow:0 1px 16px rgba(var(--nuit-rvb),.7)}

.fil{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--papier);margin:0 0 20px;max-width:none;text-shadow:0 1px 3px rgba(var(--nuit-rvb),.9),0 2px 14px rgba(var(--nuit-rvb),.8)}
.fil a{color:var(--papier-2);text-decoration:none;border-bottom:1px solid var(--filet)}
.fil a:hover{color:var(--ambre)}
.fil span{padding:0 .6em;color:var(--ambre-pale)}

/* corps de texte long */
.prose{max-width:66ch}
.prose h2{font-size:clamp(26px,3.4vw,38px);margin:clamp(42px,5vh,64px) 0 18px;max-width:22ch}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 12px}
.prose p{font-size:17.5px;line-height:1.72;color:var(--papier-2);max-width:66ch}
.prose p.fort{color:var(--papier);font-size:clamp(18px,2vw,20.5px)}
.prose ul{list-style:none;margin:20px 0;padding:0}
.prose ul li{position:relative;padding:8px 0 8px 22px;font-size:16.5px;color:var(--papier-2);
  border-bottom:1px solid var(--filet)}
.prose ul li:last-child{border-bottom:0}
.prose ul li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--ambre)}
.prose ul li b{color:var(--papier);font-weight:500;font-family:var(--serif);font-size:17.5px}
.prose figure{margin:clamp(30px,4vw,48px) 0;overflow:hidden;background:var(--nuit-3)}
.prose figure img{width:100%;height:auto;display:block}
.prose figcaption{padding-top:12px;font-size:14.5px;color:var(--papier-3)}
.prose a{color:var(--ambre-pale);text-decoration:none;border-bottom:1px solid var(--filet);
  transition:border-color .3s var(--ease)}
.prose a:hover,.prose a:focus-visible{border-bottom-color:var(--ambre)}

/* deux colonnes : le texte et un encadré qui suit */
.duo{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.duo{grid-template-columns:1fr 340px}}
.encadre{background:var(--nuit-2);border-left:2px solid var(--ambre);padding:clamp(22px,3vw,30px);
  position:sticky;top:96px}
.encadre p.mono{color:var(--ambre);margin:0 0 14px}
.encadre p{font-size:15.5px;color:var(--papier-2);margin-bottom:.9em}
.encadre dl{margin:0;display:grid;gap:12px}
.encadre dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--papier-3)}
.encadre dd{margin:0 0 4px;font-size:16px;color:var(--papier)}
.encadre .cta{margin-top:18px;width:100%;justify-content:space-between}
@media(max-width:959px){.encadre{position:static}}

/* maillage : les autres pages, en fin de lecture */
.ailleurs{display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet);grid-template-columns:1fr}
@media(min-width:760px){.ailleurs{grid-template-columns:repeat(3,1fr)}}
.ailleurs a{background:var(--nuit);padding:clamp(22px,2.8vw,30px);text-decoration:none;display:block;
  transition:background .35s var(--ease)}
.ailleurs a:hover,.ailleurs a:focus-visible{background:var(--nuit-2)}
.ailleurs .quoi{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambre);margin:0 0 10px}
.ailleurs .titre{font-family:var(--serif);font-size:21px;line-height:1.2;color:var(--papier);margin:0 0 8px}
.ailleurs p{font-size:14.5px;color:var(--papier-2);margin:0}

/* ============================================================
   REPÈRES SOUS LE HERO
   ============================================================ */
.reperes{
  position:relative;z-index:2;border-top:1px solid var(--filet);background:rgba(var(--nuit-rvb),.72);
  backdrop-filter:blur(10px);
}
.reperes ul{
  list-style:none;margin:0 auto;padding:16px 40px;max-width:1280px;
  display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;
}
.reperes li{display:flex;align-items:baseline;gap:10px;font-size:14.5px;color:var(--papier-2)}
.reperes li b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambre);font-weight:400}
@media(max-width:900px){.reperes ul{padding:14px 28px;gap:10px 26px}.reperes li{font-size:13.5px}}
@media(max-width:560px){.reperes ul{padding:14px 22px}}

/* ============================================================
   LE FILM
   ============================================================ */
/* margin:0 : sans lui, la marge par défaut d'une figure rétrécit le film de 80 px */
.film-bloc{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;margin:0}
.film-bloc video{width:100%;height:100%;object-fit:cover;display:block}
/* un bouton n'hérite ni de la police ni de la couleur : sans cela, le titre sort en Arial noir */
.film-affiche{position:absolute;inset:0;cursor:pointer;border:0;padding:0;width:100%;height:100%;
  background:none;display:block;transition:opacity .6s var(--ease);font:inherit;color:inherit}
.film-affiche img{width:100%;height:100%;object-fit:cover}
.film-affiche::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--nuit-rvb),.92),rgba(var(--nuit-rvb),.5) 26%,rgba(var(--nuit-rvb),.12) 58%,rgba(var(--nuit-rvb),.4));
}
.film-affiche.partie{opacity:0;pointer-events:none}
.film-lecture{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:16px;pointer-events:none;
}
.film-lecture .rond{
  width:68px;height:68px;border-radius:50%;border:1px solid var(--ambre);
  background:rgba(var(--ambre-rvb),.14);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .4s var(--ease),transform .4s var(--ease);
}
.film-lecture .rond::before{
  content:"";width:0;height:0;margin-left:5px;
  border-left:17px solid var(--ambre);border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.film-affiche:hover .rond,.film-affiche:focus-visible .rond{background:var(--ambre);transform:scale(1.06)}
.film-affiche:hover .rond::before,.film-affiche:focus-visible .rond::before{border-left-color:var(--nuit)}
.film-mot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,4vw,44px);pointer-events:none;
}
.film-mot{text-align:left}
.film-mot>span{font-family:var(--serif);font-size:clamp(17px,2.2vw,24px);line-height:1.25;
  color:var(--papier);margin:0;text-shadow:0 2px 18px rgba(var(--nuit-rvb),.8)}
.film-mot .duree{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ambre);margin-top:8px;display:block}
.film-mot>span b{color:var(--ambre);font-weight:400}

/* ============================================================
   GALERIE
   ============================================================ */
/* dense : une vignette haute ne laisse jamais de trou derrière elle */
.galerie{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense}
@media(min-width:780px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.galerie{grid-template-columns:repeat(4,1fr)}}
.galerie button{
  border:0;padding:0;margin:0;background:var(--nuit-3);cursor:zoom-in;overflow:hidden;
  aspect-ratio:1;display:block;position:relative;
}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .4s}
.galerie button:hover img,.galerie button:focus-visible img{transform:scale(1.05)}
.galerie button.haute{grid-row:span 2;aspect-ratio:1/2}
@media(max-width:779px){.galerie button.haute{grid-row:auto;aspect-ratio:1}}

/* largeur fixe : les boutons ne bougent pas d'une photo à l'autre, le doigt les retrouve au même endroit */
dialog.visio{
  border:0;padding:0;width:min(96vw,1180px);max-width:none;max-height:none;overflow:visible;
  background:transparent;color:var(--papier);
}
dialog.visio::backdrop{background:rgba(10,12,8,.94);backdrop-filter:blur(6px)}
/* hauteur plafonnée en unités d'écran : un pourcentage se résoudrait contre une ligne de grille
   sans hauteur définie, et une photo verticale déborderait de l'écran */
.visio-cadre{display:flex;align-items:center;justify-content:center;height:min(76vh,76dvh)}
.visio-cadre picture{display:contents}
dialog.visio img{max-width:100%;max-height:min(76vh,76dvh);width:auto;height:auto;display:block}
.visio-barre{display:flex;align-items:center;gap:8px;padding-top:12px}
.visio-compte{margin-right:auto;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--papier-2);
  font-variant-numeric:tabular-nums}
.visio-prec,.visio-suiv,dialog.visio .fermer{
  display:inline-grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer;
  background:none;border:1px solid var(--filet);color:var(--papier-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .2s var(--ease);
}
.visio-prec svg,.visio-suiv svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
dialog.visio .fermer{padding:0 16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.visio-prec:hover,.visio-suiv:hover,dialog.visio .fermer:hover,
.visio-prec:focus-visible,.visio-suiv:focus-visible,dialog.visio .fermer:focus-visible{border-color:var(--ambre);color:var(--ambre)}
.visio-prec:active,.visio-suiv:active,dialog.visio .fermer:active{background:rgba(var(--ambre-rvb),.16)}
dialog.visio .legende{margin:10px 0 0;max-width:62ch;font-size:14.5px;line-height:1.5;color:var(--papier-2)}

/* ============================================================
   FRISE DE L'HISTOIRE
   ============================================================ */
.frise{list-style:none;margin:0;padding:0;border-left:1px solid var(--filet)}
.frise li{position:relative;padding:0 0 clamp(30px,4vh,44px) clamp(24px,3vw,38px)}
.frise li:last-child{padding-bottom:0}
.frise li::before{
  content:"";position:absolute;left:-4.5px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--nuit);border:1px solid var(--ambre);
}
.frise .quand{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ambre);margin:0 0 8px}
.frise h3{margin:0 0 10px}
.frise p{font-size:16.5px;color:var(--papier-2);margin:0;max-width:60ch}

.panneau-presse{margin:clamp(30px,4vw,48px) 0;background:var(--papier);padding:clamp(20px,3vw,32px)}
.panneau-presse img{width:100%;height:auto;display:block}
.panneau-presse figcaption{padding-top:14px;font-size:14px;color:var(--encre-2);text-align:center}

.medias{display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet);grid-template-columns:1fr}
@media(min-width:680px){.medias{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.medias{grid-template-columns:repeat(2,1fr)}}
.medias a,.medias span{
  background:var(--nuit);padding:16px 20px;text-decoration:none;display:flex;
  align-items:baseline;justify-content:space-between;gap:14px;transition:background .3s var(--ease);
}
.medias .nom{flex:1;min-width:0}
.medias a:hover,.medias a:focus-visible{background:var(--nuit-2)}
.medias .nom{font-family:var(--serif);font-size:16.5px;line-height:1.3;color:var(--papier)}
.medias .type{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--papier-3);white-space:nowrap}
.medias a .type{color:var(--ambre)}

/* ============================================================
   RÉSEAUX
   ============================================================ */
.reseaux{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.reseaux a{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  border:1px solid var(--filet);padding:11px 18px;color:var(--papier-2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.reseaux a:hover,.reseaux a:focus-visible{border-color:var(--ambre);color:var(--ambre)}
.reseaux svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* les grilles ajoutees avec les pages interieures : sans min-width:0, un element de grille
   refuse de descendre sous la largeur de son contenu et la page deborde sur mobile */
.duo>*,.medias>*,.galerie>*{min-width:0}
.medias{grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.medias{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.medias .type{white-space:normal;text-align:right}}

/* ── corrections relevees en QA mobile ── */
.chef-mots p.signature{font-size:11.5px;line-height:1.6}
.fait span{display:block;line-height:1.6}
/* separateur de la liste de presse : il suit le nom et ne commence jamais une ligne */
.presse span+span::before{content:none}
.presse span:not(:last-child)::after{content:"·";padding:0 .55em;color:var(--ambre);font-family:var(--sans)}
/* cartes de medias : le rembourrage vise la carte, jamais ses libelles internes */
.medias .nom,.medias .type{display:block;padding:0;background:none}
@media(max-width:560px){
  .medias>a,.medias>span{flex-direction:column;align-items:flex-start;gap:5px}
  .medias .type{text-align:left}
  .cta{flex-wrap:wrap;row-gap:2px}
  .film-mot{padding:14px 22px}
  .film-lecture .rond{width:54px;height:54px}
}

/* la legende du visuel de presse repose sur fond sombre (.prose figure l'emporte sur le fond clair) */
.prose .panneau-presse figcaption{color:var(--papier-3)}

/* ============================================================
   CONFORT AU DOIGT
   ============================================================ */
html{-webkit-tap-highlight-color:rgba(var(--ambre-rvb),.22)}

/* liens de suite : 44 px de haut, avec l'allure d'un lien souligné */
.lien-suite{display:inline-flex;align-items:center;min-height:44px;color:var(--ambre-pale);
  text-decoration:underline;text-decoration-color:var(--filet);text-decoration-thickness:1px;text-underline-offset:6px;
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.lien-suite:hover,.lien-suite:focus-visible{text-decoration-color:var(--ambre)}

/* liens dans le texte : une zone invisible de 44 px, centrée sur la ligne, reçoit le doigt
   sans déplacer une seule ligne (un simple rembourrage agrandirait la boîte, pas la zone qui répond au toucher) */
.prose a,.info dd a,.fil a{border-bottom:0;text-decoration:underline;text-decoration-color:var(--filet);
  text-decoration-thickness:1px;text-underline-offset:4px}
.prose a:hover,.prose a:focus-visible,.info dd a:hover,.info dd a:focus-visible,.fil a:hover{text-decoration-color:var(--ambre)}
.prose a,.info dd a,.menu-pied a,.pied-adresse a,.note .apres strong a,.fil a{position:relative}
.prose a::after,.info dd a::after,.menu-pied a::after,.pied-adresse a::after,.note .apres strong a::after,.fil a::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}

.reseaux a{min-height:44px}
@media(max-width:899px){.topbar .wordmark,.menu-haut .wordmark{display:inline-flex;align-items:center;min-height:44px}}

/* plan du site en pied de page : on n'a plus à remonter jusqu'au menu */
.pied-plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-self:stretch}
.pied-plan a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--filet);
  font-size:15px;color:var(--papier-2);text-decoration:none;transition:color .3s var(--ease)}
.pied-plan a:hover,.pied-plan a:focus-visible,.pied-plan a[aria-current="page"]{color:var(--ambre)}
@media(max-width:899px){.pied-plan{flex:1 1 100%}}
@media(min-width:900px){.pied-plan{grid-template-columns:repeat(2,auto);column-gap:44px;align-self:flex-end}}

/* sur téléphone, aucune étiquette en capitales sous 12 px */
@media(max-width:899px){
  .mono,.seuil,.hero-eyebrow,.deroule .rang,.mois .quand,.fait span,.info dt,.reperes li b,.pied-legal,
  .film-mot .duree,.chef-mots p.signature,.fil,.encadre dt,.ailleurs .quoi,.medias .type,.frise .quand,.reseaux a{font-size:12px}
  .hero-eyebrow{letter-spacing:.15em}
  .reperes li{font-size:14.5px}
}

/* réaction au toucher : chaque élément répond sous le doigt */
.lien-suite:active,.prose a:active,.info dd a:active,.fil a:active,.menu-pied a:active,.pied-adresse a:active,
.note .apres strong a:active,.pied-plan a:active,.hero-avis:active{color:var(--ambre)}
.reseaux a:active{border-color:var(--ambre);color:var(--ambre)}
.ailleurs a:active,.medias a:active{background:var(--nuit-3)}
.galerie button:active img{opacity:.8}
.film-affiche:active .rond{background:var(--ambre)}
.film-affiche:active .rond::before{border-left-color:var(--nuit)}
/* écran tactile : un survol ne doit pas rester collé après le toucher */
@media(hover:none){
  .vue:hover img,.galerie button:hover img{transform:none}
  .cta:hover{transform:none;background:var(--ambre)}
  .cta:active{background:var(--ambre-pale)}
}
@media(max-width:899px){.visio-barre{padding:12px 6px 0 10px}dialog.visio .legende{padding:0 10px}}
.pied-legal{text-wrap:pretty}
/* très petit écran : l'en-tête et l'étiquette d'ouverture se resserrent pour tenir sur une ligne */
@media(max-width:374px){
  .topbar{gap:12px}
  .topbar,.topbar.stuck{padding-left:16px}
  .topbar .wordmark{font-size:17px}
  .hero-eyebrow{letter-spacing:.08em}
}
.mono,.fait span{text-wrap:pretty}
/* lien des mentions légales, en pied de page : 44 px de haut, comme le reste */
.pied-legal a{display:inline-flex;align-items:center;min-height:44px}