/* Maison Jourdonneau : la feuille de style du site.
 *
 * Une seule feuille pour toutes les pages. Elle est copiée telle quelle dans
 * site/style.css par site.cjs.
 *
 * ⚖️ 2026-08-19 : le fond est passé dans l'encre (docs/design.md §0 et §1).
 * Les cinq couleurs de la marque n'ont pas changé, leurs rôles oui.
 * Le bordeaux n'est plus une couleur de texte : sur l'encre il donne 1,6:1,
 * c'est illisible. Il devient une SURFACE. L'accent est l'or.
 *
 * ⛔ Les cinq règles qui empêchent ce fond sombre de virer au clinquant
 * (design.md §1) : pas d'or en aplat, pas de dégradé métallique, radius 0,
 * pas d'ombre portée, Fraunces 300. Elles ne sont pas optionnelles.
 */

@font-face{
  font-family:"Fraunces";
  src:url("/fonts/Fraunces-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-display:swap;
}

:root{
  /* Les cinq couleurs de la marque */
  --encre:#1C1A17;
  --ivoire:#F7F3EC;
  --grand-cru:#6E1F2C;
  --or-discret:#A98A5B;
  --pierre:#E8E2D6;

  /* Leurs rôles */
  --fond:var(--encre);
  --surface:color-mix(in srgb, var(--encre) 92%, var(--ivoire));
  --surface-haute:color-mix(in srgb, var(--encre) 86%, var(--ivoire));
  --texte:var(--ivoire);
  --texte-doux:color-mix(in srgb, var(--ivoire) 72%, var(--encre));
  --accent:var(--or-discret);
  --filet:color-mix(in srgb, var(--or-discret) 30%, var(--encre));
  --filet-fort:color-mix(in srgb, var(--or-discret) 55%, var(--encre));
  /* Le mot de chapitre : visible, jamais lisible de loin. Décoratif. */
  --mot:color-mix(in srgb, var(--ivoire) 16%, var(--encre));

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --courant:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;
  --section:clamp(72px,12vw,144px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--fond);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font-family:var(--courant);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.mesure{max-width:1000px;margin:0 auto;padding-inline:var(--s3);width:100%;}
@media (min-width:820px){.mesure{padding-inline:var(--s6);}}
.etroit{max-width:720px;}

section[id]{scroll-margin-top:76px;}

h1,h2,h3{font-family:var(--display);font-weight:300;margin:0;text-wrap:balance;}
p{margin:0;}
.corps > * + *{margin-top:var(--s3);}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--filet-fort);}
a:hover{border-bottom-color:var(--accent);}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ====================================================== LA BARRE ======= */

.barre{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) var(--s3);
  background:color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filet);
}
.barre .nom{display:flex;align-items:center;gap:var(--s2);min-width:0;border:0;}
.barre .mono{width:32px;height:32px;flex:none;}
.barre .mono svg{display:block;width:100%;height:100%;}
.barre .mot-nom{
  font-family:var(--display);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-doux);white-space:nowrap;
}
.barre .lien{font-size:15px;white-space:nowrap;}
@media (max-width:400px){.barre .mot-nom{display:none;}}

.barre.volante{
  position:fixed;inset:0 0 auto;
  opacity:0;transform:translateY(-100%);pointer-events:none;
  transition:opacity .3s ease-out, transform .3s ease-out;
}
.barre.volante.vue{opacity:1;transform:none;pointer-events:auto;}

/* ==================================================== LE SEUIL ======== */

.hero{
  position:relative;isolation:isolate;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--fond);color:var(--ivoire);
  padding-block:var(--s8) var(--s6);
}
.hero-photo{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:respire 20s ease-out forwards;
}
/* La photo respire une fois au chargement. Rien d'autre ne bouge tout seul. */
@keyframes respire{from{transform:scale(1.07);}to{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.hero-photo img{animation:none;}}

/* Sur fond d'encre la photo est la lampe : le voile s'allège beaucoup, il ne
   sert plus qu'à porter le texte au pied et sur la colonne de gauche. */
.hero-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(28,26,23,.20) 0%, rgba(28,26,23,.04) 30%,
      rgba(28,26,23,.26) 62%, rgba(28,26,23,.62) 100%),
    linear-gradient(90deg,
      rgba(28,26,23,.30) 0%, rgba(28,26,23,.06) 55%, rgba(28,26,23,0) 100%);
}
.hero-marque{width:min(300px,64vw);margin-bottom:var(--s8);}
.hero-marque svg{display:block;width:100%;height:auto;}
.hero h1{
  font-size:clamp(1.85rem,4.8vw,3rem);line-height:1.22;
  letter-spacing:-.005em;max-width:20ch;
}
.hero .role{
  margin-top:var(--s4);max-width:34ch;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1rem,2vw,1.15rem);line-height:1.45;
  color:color-mix(in srgb, var(--ivoire) 82%, transparent);
}
.hero .glisser{
  margin-top:var(--s6);
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb, var(--ivoire) 74%, transparent);
  border:0;
}
.hero .glisser::after{
  content:"";width:52px;height:1px;background:var(--accent);
  animation:file 2.8s ease-in-out infinite;transform-origin:left;
}
@keyframes file{0%,100%{transform:scaleX(.3);}50%{transform:scaleX(1);}}
@media (prefers-reduced-motion:reduce){.hero .glisser::after{animation:none;}}

/* Les portes : la seule chose à faire sur le seuil. */
.portes{list-style:none;margin:0;padding:0;}
.portes li{border-top:1px solid var(--filet);}
.portes li:last-child{border-bottom:1px solid var(--filet);}
.portes a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--s3);
  padding-block:var(--s6);
  color:var(--texte);border:0;
  transition:padding-left .28s ease-out, background .28s ease-out;
}
.portes a:hover{
  padding-left:var(--s3);
  background:linear-gradient(90deg, var(--surface), transparent 70%);
}
.portes .titre{
  display:block;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.8vw,2.1rem);line-height:1.18;
  transition:color .28s ease-out;
}
.portes .dit-quoi{
  display:block;margin-top:var(--s2);
  font-size:16px;color:var(--texte-doux);max-width:46ch;
}
.portes .fleche{
  font-family:var(--courant);font-size:1.4rem;line-height:1;
  color:var(--accent);
  transition:transform .28s ease-out;
}
.portes a:hover .fleche{transform:translateX(10px);}
.portes a:hover .titre{color:var(--accent);}

/* ============================================ L'OUVERTURE D'UNE PAGE == */

.entree{padding-block:var(--section) var(--s8);}
.surtitre{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s4);
}
.entree h1{
  font-size:clamp(2.2rem,5.6vw,3.5rem);line-height:1.12;
  letter-spacing:-.012em;max-width:18ch;
}
.chapeau{
  font-size:1.15rem;line-height:1.55;color:var(--texte-doux);
  margin:var(--s6) 0 0;max-width:52ch;
}

/* ==================================================== UN CHAPITRE ===== */

.chap{padding-block:var(--section);}
.chap.pose{background:var(--surface);}
.mot{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.8rem,10vw,5.8rem);line-height:.92;
  letter-spacing:-.022em;text-transform:uppercase;
  color:var(--mot);margin:0 0 var(--s6);
}
.chap h2{
  font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.2;
  max-width:22ch;margin-bottom:var(--s4);
}
.chap .corps{max-width:56ch;font-size:1.04rem;color:var(--texte-doux);}
.chap .corps strong{color:var(--texte);font-weight:600;}

/* Le récit : du texte long, à la première personne. */
.recit{max-width:54ch;font-size:1.08rem;line-height:1.68;color:var(--texte-doux);}
.recit > * + *{margin-top:var(--s4);}
.recit strong{color:var(--texte);font-weight:600;}
.recit .respire{
  font-family:var(--display);font-weight:300;color:var(--texte);
  font-size:clamp(1.3rem,2.8vw,1.7rem);line-height:1.35;
  margin-block:var(--s8);
}

/* ============================================== LA BANDE VINEUSE ====== */

/* La rupture franche : le seul aplat de couleur du site. */
.vin{
  background:var(--grand-cru);
  padding-block:var(--section);
  border-top:1px solid color-mix(in srgb, var(--grand-cru) 70%, var(--ivoire));
  border-bottom:1px solid color-mix(in srgb, var(--grand-cru) 70%, var(--ivoire));
}
.vin h2,.vin p{color:var(--ivoire);}
/* Sur le bordeaux, l'or ne détache plus assez : le filet passe en ivoire. */
.vin .signe{background:color-mix(in srgb, var(--ivoire) 72%, var(--grand-cru));}
.vin .grand{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.6rem,4.2vw,2.7rem);line-height:1.26;
  max-width:22ch;text-wrap:balance;
}
.vin .apres{
  margin-top:var(--s6);max-width:48ch;
  color:color-mix(in srgb, var(--ivoire) 80%, var(--grand-cru));
  font-size:1.02rem;
}

/* ================================================== LA BANDE PHOTO ==== */

.bande{
  position:relative;isolation:isolate;
  min-height:min(84vh,700px);
  display:flex;align-items:flex-end;
  padding-block:var(--s12) var(--s8);
  background:var(--fond);color:var(--ivoire);
}
/* Plus haute que la bande : c'est ce qui laisse la place au parallaxe. */
.bande-photo{
  position:absolute;top:-8%;left:0;right:0;height:116%;
  z-index:-2;overflow:hidden;
}
.bande-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.bande-voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(28,26,23,.10) 0%, rgba(28,26,23,.06) 45%, rgba(28,26,23,.58) 100%),
    linear-gradient(90deg,
      rgba(28,26,23,.34) 0%, rgba(28,26,23,.08) 55%, rgba(28,26,23,0) 100%);
}
.bande p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,3.3vw,2.1rem);line-height:1.32;
  max-width:24ch;text-wrap:balance;
}
.signe{
  display:block;width:120px;height:2px;background:var(--accent);
  margin-bottom:var(--s4);
}

/* L'énoncé pleine largeur : le rôle d'une bande photo, sans photo. */
.dit{
  background:var(--surface-haute);
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  padding-block:var(--section);
}
.dit p{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.3;
  max-width:23ch;text-wrap:balance;
}

/* ============================================== LE BLOC CLAIR ========= */

/* Une feuille de papier posée sur une table sombre. Une seule par page,
   jamais deux : c'est le contraste le plus fort du site (docs/design.md §1). */
.clair{
  background:var(--pierre);color:var(--encre);
  padding:var(--s8) var(--s4);
  max-width:640px;
}
@media (min-width:640px){.clair{padding:var(--s12) var(--s8);}}
.clair h2,.clair h3{color:var(--encre);}
.clair a{color:var(--grand-cru);border-bottom-color:color-mix(in srgb, var(--grand-cru) 35%, var(--pierre));}
.clair a:hover{border-bottom-color:var(--grand-cru);}
.clair .note{color:color-mix(in srgb, var(--encre) 66%, var(--pierre));}
.clair .quatre li{color:color-mix(in srgb, var(--encre) 72%, var(--pierre));}
.clair .quatre li::before{background:var(--grand-cru);}
.clair .voies .precision,
.clair .voies .precision a{color:color-mix(in srgb, var(--encre) 60%, var(--pierre));}

/* ============================================ PORTRAIT ET PARCOURS ==== */

/* ⭐ Le traitement des photos posées dans le texte.
 *
 * Sur fond d'encre, une image sans traitement de bord a l'air collée sur la
 * page. Trois gestes lui donnent de l'épaisseur, et aucun n'est une ombre
 * portée (docs/design.md §1, règle 3) :
 *
 *   ① un filet décalé derrière, en bas à gauche : c'est lui qui creuse ;
 *   ② un fondu du bas de l'image vers le fond : l'image s'enfonce dans la
 *     page au lieu de s'y arrêter net ;
 *   ③ un parallaxe léger : elle ne défile pas à la même vitesse que le texte.
 */
.photo{position:relative;margin:0;max-width:640px;}
.photo::before{
  content:"";position:absolute;z-index:0;
  left:-16px;bottom:-16px;width:100%;height:100%;
  border:1px solid var(--filet);
  pointer-events:none;
}
.photo .cadre{
  position:relative;z-index:1;overflow:hidden;
  background:var(--surface);
}
.photo .cadre img{
  display:block;width:100%;height:auto;
}
.photo .cadre::after{
  content:"";position:absolute;z-index:2;inset:auto 0 0 0;height:32%;
  background:linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--fond) 78%, transparent));
  pointer-events:none;
}
.photo figcaption{
  position:relative;z-index:1;
  margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--filet);
  font-size:14px;color:var(--texte-doux);
}

/* Le grand portrait : cadre fixe, image plus haute que son cadre pour laisser
   la place au parallaxe. */
.photo--grand{max-width:660px;}
.photo--grand .cadre{aspect-ratio:4/5;}
.photo--grand .cadre img{
  position:absolute;top:-6%;left:0;right:0;
  width:100%;height:112%;
  object-fit:cover;object-position:50% 22%;
}

@media (max-width:560px){
  .photo::before{left:-10px;bottom:-10px;}
}

.presentation{display:flex;gap:var(--s6);align-items:flex-start;flex-wrap:wrap;}
.portrait{
  width:132px;height:132px;flex:none;border-radius:50%;overflow:hidden;
  border:1px solid var(--filet-fort);background:var(--surface);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.presentation .texte{flex:1 1 300px;min-width:0;}

/* La frise : le récit et le parcours en un seul objet, qui descend. */
.frise{list-style:none;margin:0;padding:0;border-left:1px solid var(--filet);}
.frise > li{position:relative;padding-left:var(--s6);padding-bottom:var(--s12);}
.frise > li:last-child{padding-bottom:0;}
.frise > li::before{
  content:"";position:absolute;left:-4px;top:.5em;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.frise .quand{
  display:block;margin-bottom:var(--s2);
  font-family:var(--display);font-size:1rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.frise h3{
  font-size:clamp(1.4rem,3.2vw,2rem);line-height:1.2;
  margin-bottom:var(--s3);max-width:22ch;
}
.frise .texte{max-width:52ch;font-size:1.04rem;color:var(--texte-doux);}
.frise .texte > * + *{margin-top:var(--s3);}
.frise .texte strong{color:var(--texte);font-weight:600;}
.frise figure{margin:var(--s6) 0 0;max-width:460px;}
.frise .photo figcaption{font-size:13px;}
/* Un panneau routier n'est pas une photographie : ni filet décalé, ni fondu.
   On le pose sur son propre fond blanc, comme une plaque accrochée au mur. */
.frise figure.panneau{max-width:340px;}
.frise figure.panneau img{
  display:block;width:100%;height:auto;
  background:#fff;padding:var(--s3);
}
@media (max-width:560px){
  .frise > li{padding-left:var(--s4);padding-bottom:var(--s8);}
}

.parcours{list-style:none;margin:0;padding:0;}
.parcours li{
  display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--s2);
  padding-block:var(--s3);border-top:1px solid var(--filet);
}
.parcours li:first-child{border-top:0;padding-top:0;}
.date{
  font-family:var(--display);font-size:1rem;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:560px){.parcours li{grid-template-columns:1fr;gap:2px;}}

/* ================================================== LISTES ET GRILLES = */

.temps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s6);
}
.temps li{border-top:1px solid var(--filet-fort);padding-top:var(--s3);}
.temps .num{
  display:block;margin-bottom:var(--s2);
  font-family:var(--display);font-size:.95rem;letter-spacing:.22em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.temps h3{font-size:1.5rem;line-height:1.2;margin-bottom:var(--s2);}
.temps p{font-size:16px;color:var(--texte-doux);}

.points{list-style:none;margin:0;padding:0;}
.points li{
  position:relative;padding-left:var(--s3);margin-top:var(--s3);
  color:var(--texte-doux);
}
.points li:first-child{margin-top:0;}
.points li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:10px;height:1px;background:var(--accent);
}
.points strong{color:var(--texte);font-weight:600;}

/* Les maisons, en couleur pleine. Sur l'encre, elles éclairent. */
.planches{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4) var(--s3);
}
.planches figure{margin:0;}
.planches img{
  display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  background:var(--surface);
}
.planches figcaption{
  margin-top:var(--s1);padding-top:var(--s1);
  border-top:1px solid var(--filet);
  font-family:var(--display);font-size:1rem;line-height:1.3;
}
.planches figcaption span{
  display:block;font-family:var(--courant);font-size:13px;
  color:var(--texte-doux);margin-top:2px;
}
@media (max-width:760px){
  .planches{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62vw;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s3);
    margin-inline:calc(var(--s3) * -1);padding-inline:var(--s3);
    scrollbar-width:none;
  }
  .planches::-webkit-scrollbar{display:none;}
  .planches figure{scroll-snap-align:start;}
}

.enonce{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.35rem,2.8vw,1.8rem);line-height:1.34;
  color:var(--texte);
  border-left:2px solid var(--accent);padding-left:var(--s3);
  max-width:34ch;
}
.note{font-size:14px;color:var(--texte-doux);max-width:60ch;}

/* ==================================================== LE CONTACT ====== */

.quatre{list-style:none;margin:0 0 var(--s6);padding:0;}
.quatre li{
  position:relative;padding-left:var(--s3);margin-top:var(--s2);
  font-size:16px;color:var(--texte-doux);
}
.quatre li:first-child{margin-top:0;}
.quatre li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:10px;height:1px;background:var(--accent);
}
.voies{list-style:none;margin:0;padding:0;}
.voies li{margin-top:var(--s3);}
.voies li:first-child{margin-top:0;}
.voies a{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.8vw,1.45rem);line-height:1.3;
  word-break:break-word;
}
.voies .precision{
  display:block;margin-top:2px;
  font-family:var(--courant);font-size:14px;color:var(--texte-doux);
}
.voies .precision a{font-family:var(--courant);font-size:14px;color:var(--texte-doux);}

/* ==================================================== LES QUESTIONS === */

.questions{max-width:760px;}
.questions details{border-top:1px solid var(--filet);}
.questions details:last-of-type{border-bottom:1px solid var(--filet);}
.questions summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-block:var(--s4);
  font-family:var(--display);font-size:1.2rem;font-weight:400;line-height:1.35;
  transition:color .2s ease-out;
}
.questions summary:hover{color:var(--accent);}
.questions summary::-webkit-details-marker{display:none;}
.questions summary::after{
  content:"+";flex:none;color:var(--accent);
  font-family:var(--courant);font-size:1.2rem;line-height:1;
}
.questions details[open] summary::after{content:"\2212";}
.questions summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.questions .reponse{
  padding-bottom:var(--s4);max-width:62ch;
  font-size:16px;color:var(--texte-doux);
}
.questions .reponse > * + *{margin-top:var(--s2);}

/* ================================================== LA SUITE, LE PIED = */

/* La fin d'une page. Pas un pied de page : ces pages sont collées une par une
   dans un multi-lien Instagram, elles n'ont pas à se renvoyer les unes aux
   autres. Une seule chose à faire, et rien d'autre. */
.fin{
  border-top:1px solid var(--filet);
  padding-block:var(--section);
}
.fin .appel{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.3rem,2.8vw,1.75rem);line-height:1.34;
  color:var(--texte);max-width:30ch;margin-bottom:var(--s6);
  text-wrap:balance;
}
.mention{
  margin-top:var(--s8);padding-top:var(--s4);
  border-top:1px solid var(--filet);
  font-size:13px;line-height:1.55;color:var(--texte-doux);max-width:64ch;
}
.fin .mention:first-child{margin-top:0;padding-top:0;border-top:0;}

/* =============================================== L'APPARITION AU SCROLL */
/* docs/design.md §1 motion, assoupli le 2026-08-19 : 300 à 450 ms, 16 px. */

.js .paraitre{opacity:0;transform:translateY(16px);}
.js .paraitre.vu{
  opacity:1;transform:none;
  transition:opacity .42s ease-out, transform .42s ease-out;
}
/* Un groupe apparaît élément par élément, 70 ms d'écart. */
.js .groupe > *{opacity:0;transform:translateY(16px);}
.js .groupe.vu > *{
  opacity:1;transform:none;
  transition:opacity .42s ease-out, transform .42s ease-out;
}
.js .groupe.vu > *:nth-child(2){transition-delay:70ms;}
.js .groupe.vu > *:nth-child(3){transition-delay:140ms;}
.js .groupe.vu > *:nth-child(4){transition-delay:210ms;}
.js .groupe.vu > *:nth-child(5){transition-delay:280ms;}
.js .groupe.vu > *:nth-child(n+6){transition-delay:350ms;}

@media (prefers-reduced-motion:reduce){
  .js .paraitre,.js .groupe > *{opacity:1;transform:none;transition:none;}
}

/* ========================================================= PETIT ÉCRAN */

@media (max-width:640px){
  body{font-size:17px;}
  .hero-marque{margin-bottom:var(--s6);}
  .presentation{gap:var(--s4);}
  .portes a{padding-block:var(--s4);}
  /* La bande porte une photo paysage : sur un téléphone elle s'aplatit,
     sinon le cadre découpe une tranche verticale au milieu de la scène. */
  .bande{min-height:min(64vh,460px);padding-block:var(--s8) var(--s6);}
  .hero-voile{
    background:
      linear-gradient(180deg,
        rgba(28,26,23,.22) 0%, rgba(28,26,23,.06) 26%,
        rgba(28,26,23,.38) 58%, rgba(28,26,23,.72) 100%),
      linear-gradient(90deg,
        rgba(28,26,23,.22) 0%, rgba(28,26,23,.04) 62%, rgba(28,26,23,0) 100%);
  }
}

/* ============================================================ IMPRESSION */
/* Une page sombre imprimée vide une cartouche. On repasse en clair. */

@media print{
  @page{margin:16mm;}
  html,body{background:#fff;color:var(--encre);font-size:10.5pt;}
  .barre,.hero .glisser,.suite{display:none;}
  .hero,.bande,.vin,.dit,.chap.pose,.pied,.clair{
    background:none;color:var(--encre);
    min-height:0;padding-block:var(--s6);border:0;
  }
  .hero h1,.hero .role,.bande p,.vin .grand,.vin .apres,.pied .signature{color:var(--encre);}
  .hero-photo,.hero-voile,.bande-photo,.bande-voile{display:none;}
  .chap,.entree{padding-block:var(--s6);break-inside:avoid;}
  .mot{color:#B9B3A8;}
  .corps,.recit,.note,.texte,.chapeau,.temps p,.points li,.questions .reponse{color:#3A3630;}
  .js .paraitre,.js .groupe > *{opacity:1;transform:none;}
  a{color:var(--encre);border-bottom:0;}
  .questions details{display:block;}
}