/* ═══════════════════════════════════════════════════════════
   ÉCLAIR — la suite de la page.
   Architecture reprise du site de référence, habillage ÉCLAIR :
   noir, or, crème, EB Garamond, capitales espacées comme le logo.
   Hérite des variables déclarées dans hero.css.
   ═══════════════════════════════════════════════════════════ */

/* ─── Navigation ────────────────────────────────────────── */
/* Barre pleine dès le premier pixel. La version transparente
   obligeait à compenser sans cesse — voile dégradé, ombre portée
   sur le texte, bascule de couleur selon la luminosité du hero —
   et la marque restait invisible tant qu'on n'avait pas scrollé.
   Une barre opaque règle les trois d'un coup.                    */
/* La marque est en position absolue : elle ne compte pas dans la
   hauteur de la barre. Sans min-height, la barre se dimensionnait
   sur les seuls liens (48 px) et le logo, plus haut, dépassait par
   le haut de l'écran — d'où un logotype coupé.                   */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  gap:22px;padding:12px 5vw;
  min-height:82px;
  background:rgba(12,12,14,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(248,222,5,.18);
  transition:min-height .4s ease;
}
.nav.is-stuck{min-height:66px}

.nav__marque{
  position:absolute;left:5vw;top:50%;transform:translateY(-50%);
  width:124px;                    /* 2:1 → 62 px de haut, tient dans 82 */
  transition:width .4s ease;
}
.nav.is-stuck .nav__marque{width:98px}   /* 49 px de haut, tient dans 66 */
.nav__marque img{width:100%;height:auto;display:block}

/* Rythme de la référence : liens centrés, séparés par un filet
   vertical, lettrage large et léger. Le point de rupture n'est pas
   860 px mais le moment où les dix entrées ne tiennent plus. */
.nav__liens{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,0.9vw,15px);
}
.nav__liens a{
  font-family:var(--sans);
  font-size:clamp(11px,0.92vw,14px);
  letter-spacing:clamp(.10em,0.16vw,.2em);
  text-transform:none;font-weight:300;
  color:#f2efe9;text-decoration:none;
  white-space:nowrap;
  padding:4px 0;
  transition:color .3s ease;
}
.nav__liens a:hover,.nav__liens a:focus-visible{color:var(--gold)}
.nav__sep{
  color:rgba(242,239,233,.26);
  font-size:clamp(10px,0.8vw,12px);font-weight:300;
  user-select:none;
}

.nav__burger{display:none}

/* Neuf entrées + la marque : le passage au menu plein écran se
   déclenche quand elles cessent de tenir, pas à une largeur ronde.
   Mesuré sur la mise en page réelle, requête média désarmée le temps
   de la mesure — sinon le logo y fait 104 px au lieu de 124 et la
   marge relevée est imaginaire. Écart entre le bord du logo et le
   premier lien : 1100 px → 21 px, 1070 px → 14 px et ça se voit,
   1050 px → « Accueil » vient toucher le R d'ÉCLAIR.
   Le seuil suit le nombre d'entrées, et le libellé de chacune :
   790 px à six, 950 px à huit, 1180 px aux dix d'avant le retrait
   de « Salé », 1100 px aux neuf d'aujourd'hui. */
@media (max-width:1099px){
  .nav{justify-content:flex-end;padding:12px 5vw}
  .nav__marque{width:104px}
  .nav__liens{
    position:fixed;inset:0;
    background:rgba(12,12,14,.97);
    flex-direction:column;gap:8px;
    align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
  }
  .nav__liens a{font-size:17px;letter-spacing:.24em;padding:12px}
  .nav__sep{display:none}
  .nav.is-open .nav__liens{opacity:1;visibility:visible}
  .nav__burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:40px;height:40px;padding:0;
    background:none;border:0;cursor:pointer;z-index:2;
  }
  .nav__burger span{
    display:block;height:1px;width:24px;margin:0 auto;
    background:var(--cream);transition:transform .3s ease,opacity .3s ease;
  }
  .nav.is-open .nav__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.is-open .nav__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* ─── Ossature des sections ─────────────────────────────── */
/* Rythme resserré. Le repos généreux appartient au hero ;
   ici, laisser une hauteur d'écran entre un titre et son contenu
   ne lit pas comme du luxe, ça lit comme une page inachevée. */
.sect{position:relative;z-index:1;padding:clamp(64px,9vh,120px) 6vw}
.sect--tight{padding-top:clamp(40px,5vh,64px)}
.sect--cream{background:var(--cream);color:var(--ink)}
.sect--dark{background:var(--black);color:var(--cream)}

.sect__head{max-width:62ch;margin:0 auto clamp(40px,5.5vh,72px);text-align:center}
.sect__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,4vw,54px);line-height:1.18;margin:0;
  letter-spacing:-.005em;
}
.sect--dark .eyebrow{color:var(--gold)}

/* ─── Intro ─────────────────────────────────────────────── */
/* 18vh donnait 161 px de haut sur un téléphone, contre 81 px pour
   toutes les autres sections : deux systèmes de rythme cohabitaient
   et l'intro se lisait comme détachée. Même échelle que .sect, un
   cran au-dessus — c'est la première respiration après le hero. */
.intro{
  padding-top:clamp(72px,10vh,132px);
  padding-bottom:clamp(72px,10vh,132px);
}
.intro__inner{max-width:70ch;margin:0 auto;text-align:center}
.intro__sur{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.36em;text-transform:uppercase;font-weight:400;
  color:var(--gold);margin:0 0 14px;
}
.intro__titre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.4vw,58px);line-height:1.15;margin:0 0 40px;
}
.intro__texte{
  font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.3vw,18px);line-height:1.95;
  color:rgba(242,239,233,.66);margin:0 0 22px;
}

/* ─── Savoir-faire : picto au trait + texte, comme la référence ── */
.savoir{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,64px);
}
.savoir__item{display:flex;gap:22px;align-items:flex-start}
.savoir__picto{
  flex:0 0 auto;width:48px;height:48px;
  fill:none;stroke:var(--ink);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  margin-top:4px;
}
.savoir__titre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,27px);line-height:1.25;margin:0 0 10px;
}
.savoir__texte{
  margin:0;font-family:var(--sans);font-weight:300;
  font-size:14.5px;line-height:1.85;color:var(--muted);
}
@media (max-width:760px){ .savoir{grid-template-columns:1fr} }

/* ─── Bande photo pleine largeur ────────────────────────── */
.bande{position:relative;line-height:0;background:var(--black)}
.bande img{
  width:100%;height:clamp(220px,32vh,380px);
  object-fit:cover;object-position:center 46%;display:block;
}

/* ─── Nos gammes ────────────────────────────────────────────
   Comme sur la référence : le nom vit DANS la carte, pas en
   légende dessous. La carte a son propre fond, un ton plus
   chaud que la page, pour exister comme un objet.            */
.gammes{
  list-style:none;margin:0 auto;padding:0;
  max-width:1240px;
  display:grid;grid-template-columns:repeat(3,1fr);
  /* l'écart passe par une variable : la règle de la carte orpheline
     plus bas doit en retrancher la moitié, et deux valeurs séparées
     finiraient par diverger. */
  --gammes-ecart:clamp(14px,1.6vw,24px);
  gap:var(--gammes-ecart);
}
/* Un nombre de gammes non divisible par trois laisse une carte seule
   sur la dernière ligne, calée à gauche : ça se lit comme un trou,
   pas comme une fin. On la ramène au milieu. La règle se règle
   toute seule — avec six gammes elle ne se déclenche pas. */
.gammes__item:last-child:nth-child(3n+1){ grid-column:2 }
.gammes__carte{
  position:relative;display:block;
  aspect-ratio:3/4;overflow:hidden;
  background:#f6efe2;
  text-decoration:none;color:inherit;
}
.gammes__carte img{
  position:absolute;inset:0;
  width:100%;height:78%;object-fit:contain;object-position:center 42%;
  mix-blend-mode:multiply;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.gammes__carte:hover img{transform:scale(1.06)}
.gammes__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(18px,2vw,28px);
  background:linear-gradient(180deg,rgba(246,239,226,0) 0%,rgba(246,239,226,.92) 34%,#f2e9d9 100%);
}
/* Les images sont recadrées au plus près du produit : il occupe la
   carte au lieu d'y flotter. C'était le défaut le plus visible —
   un gâteau minuscule au centre d'un grand vide lit comme un
   gabarit, pas comme une vitrine.                                */
.gammes__nom{
  display:block;
  font-family:var(--sans);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--ink);margin-bottom:6px;
}
.gammes__note{
  display:block;margin:0;
  font-family:var(--sans);
  font-size:13.5px;line-height:1.6;color:var(--muted);font-weight:300;
}
/* Libellé d'appel, pas un second lien : la carte entière est déjà
   cliquable, imbriquer un <a> dans un <a> serait invalide.       */
.gammes__cta{
  display:inline-block;margin-top:14px;
  font-family:var(--sans);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--gold-ink);
  padding-bottom:3px;
  border-bottom:1px solid rgba(156,128,0,.38);
  transition:color .3s ease,border-color .3s ease,letter-spacing .3s ease;
}
.gammes__carte:hover .gammes__cta,
.gammes__carte:focus-visible .gammes__cta{
  color:var(--ink);border-color:var(--ink);letter-spacing:.24em;
}
.gammes__carte:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
/* Repère de production : image en attente d'une vraie photo. */
/* en haut : le bas de la carte est désormais occupé par le label */
.gammes__item.is-todo .gammes__carte::after{
  content:"photo à fournir";
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan);background:rgba(12,12,14,.88);
  padding:7px 13px;
}
@media (max-width:1000px){
  .gammes{grid-template-columns:repeat(2,1fr)}
  /* deux colonnes : la carte du milieu n'existe plus, et l'orpheline
     n'est plus la même. On annule la règle des trois colonnes, puis
     on centre la dernière en lui laissant sa largeur de colonne. */
  .gammes__item:last-child:nth-child(3n+1){ grid-column:auto }
  .gammes__item:last-child:nth-child(2n+1){
    grid-column:1 / -1;
    width:calc(50% - var(--gammes-ecart) / 2);
    margin-inline:auto;
  }
}
/* On garde DEUX colonnes jusqu'en bas. Mesuré sur un 414 px : en une
   seule colonne la section faisait 3 228 px, soit 3,6 écrans — 38 %
   de tout ce qui suit le hero, pour six cartes. À deux colonnes :
   972 px. La note disparaît, elle n'a pas sa place dans une carte de
   176 px ; la photo dit déjà ce qu'est la gamme. */
@media (max-width:600px){
  .gammes{--gammes-ecart:12px}
  .gammes__label{padding:14px 12px}
  .gammes__nom{font-size:11.5px;letter-spacing:.16em;margin-bottom:0}
  .gammes__note{display:none}
  .gammes__cta{font-size:10.5px;margin-top:8px}
}

/* ─── Avis ──────────────────────────────────────────────── */
.avis__grille{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,54px);
}
.avis__item{
  margin:0;padding:clamp(26px,3vw,42px);
  border:1px solid rgba(201,164,76,.24);
  display:flex;flex-direction:column;
}
.avis__texte{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.6vw,22px);line-height:1.7;
  margin:0 0 24px;color:var(--cream);
}
.avis__nom{
  margin-top:auto;font-style:normal;
  font-family:var(--serif);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
}
@media (max-width:860px){ .avis__grille{grid-template-columns:1fr} }

/* ─── Actualités ────────────────────────────────────────── */
.actus{
  list-style:none;margin:0 auto;padding:0;
  max-width:1180px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(23,23,27,.12);
  border:1px solid rgba(23,23,27,.12);
}
.actus__item{background:var(--cream);padding:clamp(28px,3.2vw,48px)}
.actus__date{
  font-family:var(--serif);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 20px;
}
.actus__titre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,27px);line-height:1.25;margin:0 0 12px;
}
.actus__texte{margin:0;font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.75;color:var(--muted)}
@media (max-width:900px){ .actus{grid-template-columns:1fr} }

/* ─── Bandeau de contact ────────────────────────────────── */
.bandeau{
  position:relative;overflow:hidden;
  background:var(--black);
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  padding:clamp(60px,9vw,120px) 6vw;
}
.bandeau__fond{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:.34;filter:brightness(.66);
  z-index:0;
}
.bandeau::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,
    rgba(12,12,14,.92) 0%, rgba(12,12,14,.66) 55%, rgba(12,12,14,.86) 100%);
}
.bandeau__texte,.bandeau .cta{position:relative;z-index:1}
.bandeau__texte{
  font-family:var(--serif);
  font-size:clamp(24px,3vw,40px);line-height:1.25;
  color:var(--cream);margin:0;
}
.cta--static{opacity:1;transform:none;pointer-events:auto}

/* ─── Informations pratiques ────────────────────────────── */
.infos{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,72px);
}
.infos__titre{
  font-family:var(--serif);font-weight:500;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 18px;
}
.infos__val{
  font-family:var(--sans);font-weight:300;margin:0 0 10px;font-size:clamp(15px,1.3vw,18px);line-height:1.7;
  display:flex;justify-content:space-between;gap:18px;
  border-bottom:1px solid rgba(23,23,27,.10);padding-bottom:10px;
}
.infos__val span{color:var(--muted)}
.infos__val a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-ink)}
.infos__val--todo{color:var(--gold);font-style:italic;border-bottom:0}
@media (max-width:760px){ .infos{grid-template-columns:1fr} }

/* ─── Pied de page ──────────────────────────────────────── */
.pied{
  background:var(--black);color:var(--cream);
  text-align:center;padding:13vh 6vw 7vh;
}
.pied__logo{width:clamp(170px,15vw,230px);height:auto;margin:0 auto 26px}
.pied__tagline{
  font-family:var(--serif);font-size:clamp(19px,2vw,27px);
  font-weight:400;margin:0 0 34px;
}
/* wrap : sans lui, les quatre liens espacés à .28em dépassent de
   16 px sur un écran de 390 et faisaient défiler toute la page
   horizontalement — sur chaque page du site. */
.pied__liens{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:center;margin-bottom:34px}
.pied__liens a{
  font-family:var(--serif);
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
}
.pied__legal{
  font-family:var(--serif);
  font-size:12px;letter-spacing:.16em;
  color:rgba(242,239,233,.38);margin:0;
}


/* ═══════════════════════════════════════════════════════════
   Pages intérieures — univers, maison, menu, contact
   ═══════════════════════════════════════════════════════════ */

/* la nav est fixe et opaque : les pages sans hero commencent dessous */
.page-interieure{ padding-top:82px }
@media (max-width:860px){ .page-interieure{ padding-top:82px } }

/* lien actif dans la nav */
.nav__liens a.is-actif{ color:var(--gold) }

/* ─── Repère de production ──────────────────────────────── */
.todo{
  display:inline-block;
  font-family:var(--sans);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--gold-ink);
  border:1px dashed rgba(156,128,0,.5);
  padding:4px 10px;border-radius:2px;
}
.sect--dark .todo{ color:var(--gold);border-color:rgba(248,222,5,.45) }

/* ─── Page univers ──────────────────────────────────────── */
/* La page n'a plus d'en-tête : le catalogue l'ouvre. Il reprend
   donc la respiration d'une section pleine — sinon le titre se
   retrouverait collé sous la nav. */
.univers > .catalogue{ padding-top:clamp(60px,8vh,104px) }

/* ─── Page maison ───────────────────────────────────────── */
.maison__tete{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,84px);align-items:center;
  max-width:1240px;margin:0 auto;
}
.maison__inner{ max-width:64ch }
.maison__inner--centre{ margin:0 auto;text-align:center }
.maison__titre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.2vw,56px);line-height:1.16;margin:0 0 26px;
}
.maison__corps{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.35vw,18px);line-height:1.95;
  color:var(--muted);margin:0 0 20px;
}
.maison__corps--clair{ color:rgba(242,239,233,.66) }
.maison__inner--centre .cta{ margin-top:14px }
.maison__media{ position:relative;margin:0 }
.maison__media--large{ max-width:1080px;margin:clamp(36px,5vh,64px) auto 0 }
.maison__vide{
  aspect-ratio:4/3;background:#efe7d8;
  border:1px dashed rgba(23,23,27,.18);
}
.maison__vide--sombre{ background:#15130f;border-color:rgba(248,222,5,.22) }
.maison__media.is-todo::after{
  content:"photo à fournir";
  position:absolute;left:0;top:0;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);background:rgba(12,12,14,.88);
  padding:7px 13px;
}
@media (max-width:900px){ .maison__tete{ grid-template-columns:1fr } }

/* ═══════════════════════════════════════════════════════════
   La carte — page dédiée, pensée pour l'écran ET pour le papier.
   Le bloc @media print en fin de fichier sert aussi bien au
   Ctrl+P du visiteur qu'au PDF produit par outils/generer-pdf.js :
   un seul jeu de règles, donc jamais de divergence entre les deux.
   ═══════════════════════════════════════════════════════════ */
.carte{
  background:var(--cream);color:var(--ink);
  padding:0 0 clamp(64px,9vh,120px);
}

/* ── Couverture ──
   Fond noir et or, comme la barre de navigation et le pied : la carte
   appartient au même objet que le site. Une carte qui commence par du
   texte sur crème ressemble à une liste ; celle-ci s'ouvre. */
.carte__tete{
  background:var(--black);color:var(--cream);
  text-align:center;
  padding:clamp(52px,7vh,92px) 6vw clamp(44px,6vh,72px);
  margin-bottom:clamp(48px,7vh,88px);
}
.carte__logo{
  width:clamp(150px,13vw,196px);height:auto;margin:0 auto clamp(22px,3vh,34px);
  display:block;
}
.carte__sur{
  font-family:var(--sans);font-weight:500;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.carte__titre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,4.2vw,52px);line-height:1.14;margin:0 0 16px;
  letter-spacing:-.006em;color:var(--cream);
}
.carte__lieu{
  font-family:var(--sans);font-weight:300;
  font-size:14px;line-height:1.7;color:rgba(242,239,233,.58);margin:0;
}
.carte__actions{ margin:clamp(26px,3.5vh,40px) 0 0 }

/* ── Corps : deux colonnes typographiques sur grand écran.
      Une carte de restaurant se lit en colonnes ; en pleine largeur
      l'œil perd la ligne entre le nom et son prix. ── */
/* Chapitres empilés, pleine largeur — plus de flux en colonnes :
   c'est lui qui coupait les gammes au hasard et laissait la colonne
   de gauche finir avant la droite. */
.carte__corps{
  max-width:1180px;margin:0 auto;padding:0 6vw;
}
.carte__gamme{ margin:0 0 clamp(44px,6vh,76px) }
.carte__gamme:last-child{ margin-bottom:0 }

/* Le titre du chapitre : numéro en or, nom, puis un filet qui court
   jusqu'au bord. Sans le filet, six titres identiques empilés se
   ressemblent trop pour qu'on s'y repère. */
.carte__gamme-nom{
  display:flex;align-items:baseline;gap:16px;
  margin:0 0 clamp(20px,2.6vh,30px);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(13px,1.2vw,15px);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);
}
.carte__num{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(20px,2vw,26px);letter-spacing:0;
  color:var(--gold-ink);line-height:1;
}
/* Le filet est un pseudo-élément qui prend la place restante :
   il s'ajuste à la longueur du nom sans qu'on ait à la connaître. */
.carte__gamme-nom::after{
  content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg, rgba(156,128,0,.45), rgba(156,128,0,.10));
}

/* Les pièces en grille : trois colonnes qui se remplissent ligne par
   ligne. Le bloc commence et finit donc au même endroit des deux
   côtés, ce que le flux en colonnes ne garantissait pas. */
.carte__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px clamp(24px,3vw,52px);
}

/* La ligne d'une carte illustrée : vignette, nom, filet de points,
   prix. Le filet est un fond répété, pas une suite de caractères :
   il s'ajuste seul et ne se lit pas à voix haute par un lecteur
   d'écran. La vignette est alignée sur la ligne, pas centrée sur
   elle : le nom doit rester le point d'accroche. */
.carte__ligne{
  display:flex;align-items:center;gap:12px;
  margin:0;padding:7px 0;
  border-bottom:1px solid rgba(23,23,27,.07);
}
.carte__vignette{
  flex:0 0 auto;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:#f6efe2;
}
.carte__vignette img{
  width:100%;height:100%;object-fit:contain;display:block;
  /* comme partout ailleurs : le fond blanc de la photo prend la
     couleur du cadre au lieu d'y poser un carré. */
  mix-blend-mode:multiply;
}
/* Sans photo (gamme saisie à la main), le nom démarre au même
   endroit que les autres : une liste décalée se lit mal. */
.carte__ligne--sans-photo{ padding-left:56px }
.carte__nom{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(15px,1.25vw,17px);line-height:1.5;
}
/* Plus de filet ni de montant sur cette carte : les tarifs vivent
   sur /carte, la carte du QR code. Ici on compose une commande. */
/* Gamme dont la sélection tourne : elle figure sur la carte, mais
   sans liste — mieux vaut le dire que sauter l'univers. */
.carte__jour{
  font-family:var(--sans);font-weight:300;font-style:italic;
  font-size:14px;line-height:1.7;color:var(--muted);margin:0;
}

/* ── Pied de carte ── */
.carte__pied{
  max-width:760px;margin:clamp(40px,6vh,72px) auto 0;
  text-align:center;padding-top:clamp(26px,3.5vh,40px);
  border-top:1px solid rgba(23,23,27,.12);
}
.carte__note{
  font-family:var(--sans);font-weight:300;font-style:italic;
  font-size:13.5px;line-height:1.7;color:var(--muted);margin:0 0 16px;
}
.carte__coord{
  font-family:var(--sans);font-weight:300;font-size:14px;margin:0;
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;
}
.carte__coord a{ color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold-ink) }
.carte__manques{ text-align:center;margin:clamp(28px,4vh,44px) 0 0 }

/* Paliers de colonnes de la carte du site. */
@media (max-width:1000px){
  .carte__liste{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:660px){
  .carte__liste{ grid-template-columns:1fr }
  .carte__vignette{ width:48px;height:48px }
  .carte__ligne--sans-photo{ padding-left:60px }
  .carte__gamme-nom{ gap:12px }
}

/* Bandeau de clôture : fond uni, pas de photo, hauteur contenue.
   Un aplat noir suffit — sous voile, la photo ne montrait rien. */
.bandeau--uni::after{ display:none }
.bandeau--uni{
  background:#15120c;text-align:left;
  padding-top:clamp(44px,6vh,72px);padding-bottom:clamp(44px,6vh,72px);
}
.bandeau__actions{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  flex-wrap:wrap;
}
/* Deux boutons côte à côte : le second en second rôle, sinon ils se
   disputent l'attention et aucun ne se détache. */
.cta--ligne{
  background:none;color:var(--gold);
  border:1px solid rgba(248,222,5,.42);
}
.cta--ligne:hover,.cta--ligne:focus-visible{
  background:rgba(248,222,5,.10);border-color:var(--gold);
}
.bandeau__sous{
  display:block;margin-top:12px;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(14px,1.2vw,16px);line-height:1.8;
  color:rgba(242,239,233,.6);
}


/* ─── Contact ───────────────────────────────────────────── */
.contact__grille{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(26px,3.4vw,56px);
}
.contact__titre{
  font-family:var(--sans);font-weight:500;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 16px;
}
.contact__grille--clair .contact__titre{ color:var(--gold) }
.contact__val{
  font-family:var(--sans);font-weight:300;
  margin:0 0 10px;font-size:clamp(15px,1.25vw,17px);line-height:1.7;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.contact__val span{ color:var(--muted) }
.contact__val a{ color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-ink) }
.contact__grille--clair .contact__val{ color:rgba(242,239,233,.82) }
.contact__grille--clair .contact__val a{ border-color:var(--gold) }
.contact__val--sec{ color:var(--muted);font-size:14px }
/* ── Plan d'accès ──
   Le rapport de forme tient la place avant que l'iframe ne charge :
   sans lui, la page saute de 380 px quand la carte arrive. */
.contact__carte{
  max-width:1180px;margin:clamp(40px,6vh,72px) auto 0;
}
.contact__carte iframe{
  display:block;width:100%;
  aspect-ratio:16/7;min-height:260px;
  border:1px solid rgba(23,23,27,.14);
  /* La carte de Google est claire et saturée ; un voile très léger
     la fait tenir avec le reste de la page sans la rendre fausse. */
  filter:grayscale(.18) contrast(.97);
}
.contact__carte-lien{ text-align:center;margin:clamp(20px,3vh,32px) 0 0 }

@media (max-width:700px){
  .contact__carte iframe{ aspect-ratio:4/3 }
}
.contact__action{ text-align:center;margin:clamp(36px,5vh,60px) 0 0 }
@media (max-width:1000px){ .contact__grille{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .contact__grille{ grid-template-columns:1fr } }

/* ─── Pied de page ──────────────────────────────────────── */
.pied__univers{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;
  margin:0 0 28px;color:rgba(242,239,233,.5);
}
.pied__univers a{ color:inherit;text-decoration:none }
.pied__univers a:hover{ color:var(--gold) }
.pied__manque{ display:inline-flex;align-items:center;gap:8px }

/* ─── 404 ───────────────────────────────────────────────── */
.erreur{ text-align:center }
.erreur__inner{ max-width:52ch;margin:0 auto }
.erreur__inner .cta{ margin-top:10px }
/* ─── Catalogue d'un univers ────────────────────────────────
   La grille de la référence : photo, nom dessous, quatre par
   ligne. Aucun prix — la maison ne les publie pas ; chaque pièce
   ouvre une demande où son nom est déjà rempli.               */
.catalogue__note{
  font-family:var(--sans);font-weight:300;font-style:italic;
  font-size:14px;line-height:1.7;color:var(--muted);
  margin:18px auto 0;max-width:56ch;
}
/* Gamme sans photo : une seule ligne, au centre. */
.attente{
  margin:0;text-align:center;
  font-family:var(--sans);font-weight:300;font-style:italic;
  font-size:clamp(15px,1.3vw,17px);color:var(--muted);
}

.produits{
  list-style:none;margin:0 auto;padding:0;
  max-width:1240px;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,2.6vw,44px) clamp(14px,1.8vw,28px);
}
.produits__lien{
  display:block;text-decoration:none;color:inherit;
  text-align:center;
}
.produits__media{
  display:block;position:relative;
  aspect-ratio:1;overflow:hidden;
  background:#f6efe2;
}
.produits__media img{
  width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.produits__lien:hover .produits__media img{ transform:scale(1.06) }
.produits__nom{
  display:block;margin-top:16px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(16px,1.5vw,21px);line-height:1.3;
  color:var(--ink);
}
.produits__cta{
  display:inline-block;margin-top:8px;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--gold-ink);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease;
}
.produits__lien:hover .produits__cta,
.produits__lien:focus-visible .produits__cta{ opacity:1;transform:none }
.produits__lien:focus-visible{ outline:2px solid var(--gold-ink);outline-offset:4px }

/* au doigt, il n'y a pas de survol : le libellé reste visible */
@media (hover:none){ .produits__cta{ opacity:1;transform:none } }
@media (max-width:1000px){ .produits{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:600px){ .produits{ grid-template-columns:repeat(2,1fr) } }

/* ═══════════════════════════════════════════════════════════
   IMPRESSION — sert au Ctrl+P du visiteur ET au PDF produit par
   outils/generer-pdf.js. Chrome utilise ces mêmes règles dans les
   deux cas : ce qu'on voit à l'impression est ce qu'on télécharge.
   ═══════════════════════════════════════════════════════════ */
@page{
  size:A4;
  margin:16mm 14mm 18mm;
}

@media print{
  /* Tout ce qui appartient au site, pas à la carte, disparaît. */
  .nav, .pied, .carte__actions, .carte__manques, .todo{ display:none !important }

  html, body{
    background:#fff !important;
    font-size:10.5pt;
  }
  .page-interieure{ padding-top:0 !important }

  .carte{
    background:#fff !important;
    padding:0 !important;
  }

  /* La couverture garde son fond noir : c'est ce qui fait qu'on
     reconnaît la carte au premier coup d'œil, à l'écran comme sur
     le papier. Elle reste compacte pour ne pas manger la page. */
  .carte__tete{
    background:var(--black) !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    padding:10mm 8mm 8mm;margin:0 0 8mm;
    break-inside:avoid;
  }
  .carte__logo{ width:30mm;margin-bottom:4mm }
  .carte__sur{ font-size:8pt;letter-spacing:.30em;margin-bottom:2.5mm }
  .carte__titre{ font-size:19pt;line-height:1.15;margin-bottom:2.5mm }
  .carte__lieu{ font-size:8.5pt }

  .carte__corps{ padding:0;max-width:none }
  .carte__gamme{ margin-bottom:6mm }
  .carte__gamme-nom{ font-size:8.5pt;gap:4mm;margin-bottom:3mm }
  .carte__num{ font-size:13pt }
  .carte__liste{ grid-template-columns:repeat(3,1fr);gap:0 6mm }
  .carte__ligne{ padding:1mm 0;border-bottom:.3pt solid rgba(0,0,0,.10) }
  .carte__jour{ font-size:8.5pt }
  /* Vignette en millimètres : à 10 mm elle situe la pièce sans
     transformer la carte en catalogue. C'est une carte, pas un album. */
  .carte__vignette{ width:10mm;height:10mm;background:#f6efe2 }
  .carte__ligne{ margin-bottom:1.6mm;gap:2.6mm }
  .carte__ligne--sans-photo{ padding-left:12.6mm }
  /* Sur papier, une gamme DOIT pouvoir se couper : « Pâtisserie »
     compte 27 lignes, plus haut qu'une page A4. Lui interdire la
     coupure poussait tout le bloc à la page suivante et sortait la
     carte en 3 pages dont une quasi vide. Ce qu'on protège vraiment,
     c'est le titre — jamais seul en bas de page — et la ligne. */
  .carte__gamme{
    break-inside:auto;page-break-inside:auto;
    margin-bottom:7mm;
  }
  .carte__gamme-nom{
    letter-spacing:.24em;
    break-after:avoid;page-break-after:avoid;
  }
  .carte__nom{ font-size:9pt }

  .carte__pied{
    margin-top:8mm;padding-top:4mm;
    border-top:.4pt solid rgba(0,0,0,.25);
    break-inside:avoid;
  }
  .carte__note{ font-size:8pt;margin-bottom:2.5mm }
  .carte__coord{ font-size:8.5pt }
  .carte__coord a{ border-bottom:0;color:#000 }

  /* Les liens ne sont pas cliquables sur papier : pas de soulignement
     qui ferait croire le contraire. */
  a{ text-decoration:none !important;color:inherit !important }
}

/* ═══════════════════════════════════════════════════════════
   Commande — sélecteur de quantité, barre, modale
   ═══════════════════════════════════════════════════════════ */

/* ── Sélecteur ──
   Discret tant qu'il est à zéro : sur une carte de 55 lignes, 55
   contrôles noirs feraient un tableur. Il ne s'affirme qu'une fois
   la pièce choisie. */
.qte{
  flex:0 0 auto;margin-left:auto;
  display:flex;align-items:center;gap:2px;
  opacity:.5;transition:opacity .25s ease;
}
.carte__ligne:hover .qte,
.qte:focus-within,
.qte.is-actif{ opacity:1 }

.qte__b{
  width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:16px;line-height:1;
  color:var(--ink);background:none;
  border:1px solid rgba(23,23,27,.18);border-radius:50%;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.qte__b:hover{ border-color:var(--gold-ink);color:var(--gold-ink) }
.qte__b:focus-visible{ outline:2px solid var(--gold-ink);outline-offset:2px }

.qte__n{
  width:34px;height:26px;padding:0;
  font-family:var(--sans);font-size:13px;text-align:center;
  color:var(--ink);background:none;border:0;
  -moz-appearance:textfield;
}
/* Les flèches natives doublent nos boutons et cassent l'alignement. */
.qte__n::-webkit-outer-spin-button,
.qte__n::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }
.qte__n:focus-visible{ outline:2px solid var(--gold-ink);outline-offset:2px }

.qte.is-actif .qte__n{ font-weight:500;color:var(--gold-ink) }
.carte__ligne.is-choisi{ border-bottom-color:rgba(156,128,0,.35) }
.carte__ligne.is-choisi .carte__nom{ color:var(--ink) }

/* ── Barre de commande ── */
/* :not([hidden]) — sans quoi « display:flex », posé par une classe,
   l'emporte sur la règle [hidden]{display:none} du navigateur. La
   barre restait affichée vide, et surtout le voile de la modale
   couvrait tout l'écran en permanence : plus rien n'était cliquable
   sur la page, pas même le bouton « Commander ». */
.panier:not([hidden]){
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px clamp(18px,5vw,48px);
  background:rgba(12,12,14,.97);
  backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 rgba(248,222,5,.20);
}
.panier__bilan{
  margin:0;display:flex;align-items:baseline;gap:8px;
  font-family:var(--sans);font-weight:300;font-size:14px;
  color:var(--cream);
}
.panier__n{
  font-family:var(--serif);font-size:22px;font-weight:400;
  color:var(--gold);line-height:1;
}
.panier__vider{
  margin-left:10px;padding:0;
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(242,239,233,.5);background:none;border:0;
  border-bottom:1px solid rgba(242,239,233,.25);
  cursor:pointer;transition:color .2s ease,border-color .2s ease;
}
.panier__vider:hover{ color:var(--cream);border-color:var(--cream) }
.panier .cta{ flex:0 0 auto }

/* La barre couvre le bas de la carte : on lui rend la place. */
.carte{ padding-bottom:clamp(110px,14vh,170px) }

/* ── Modale ── */
.modale:not([hidden]){ position:fixed;inset:0;z-index:90;display:flex }
.modale__voile{
  position:absolute;inset:0;
  background:rgba(12,12,14,.72);backdrop-filter:blur(3px);
}
.modale__boite{
  position:relative;margin:auto;
  width:min(560px,92vw);max-height:92vh;overflow:auto;
  background:var(--cream);color:var(--ink);
  padding:clamp(28px,4vw,44px);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.modale__x{
  position:absolute;top:10px;right:14px;
  width:34px;height:34px;padding:0;
  font-size:24px;line-height:1;color:var(--muted);
  background:none;border:0;cursor:pointer;
}
.modale__x:hover{ color:var(--ink) }
.modale__titre{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,34px);line-height:1.2;margin:0 0 22px;
}
.modale__lignes{
  list-style:none;margin:0 0 26px;padding:0 0 20px;
  border-bottom:1px solid rgba(23,23,27,.12);
  max-height:34vh;overflow:auto;
}
.modale__ligne{
  display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;
  font-family:var(--serif);font-size:15px;
}
.modale__q{ font-family:var(--sans);font-size:13px;color:var(--gold-ink);white-space:nowrap }
.modale__texte{
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.8;
  color:var(--muted);margin:0 0 20px;
}
.modale__ref{
  font-family:var(--sans);font-size:15px;letter-spacing:.18em;
  color:var(--gold-ink);margin:0 0 26px;
  padding:12px 16px;background:#fbf9f5;
  border:1px dashed rgba(156,128,0,.4);text-align:center;
}

/* ── Formulaire ── */
.champ{ display:block;margin:0 0 16px }
.champ__lib{
  display:block;margin-bottom:6px;
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.champ__lib em{ font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.7 }
.champ__saisie{
  width:100%;padding:11px 13px;
  font-family:var(--sans);font-weight:300;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid rgba(23,23,27,.16);border-radius:0;
  transition:border-color .2s ease;
}
.champ__saisie:focus{ outline:0;border-color:var(--gold-ink) }
.champ__saisie--zone{ resize:vertical;min-height:76px;line-height:1.6 }
.formulaire__erreur{
  margin:0 0 14px;padding:10px 13px;
  font-family:var(--sans);font-size:14px;
  color:#8a1c1c;background:#fbeaea;border:1px solid rgba(138,28,28,.25);
}
.formulaire__note{
  margin:14px 0 0;
  font-family:var(--sans);font-weight:300;font-style:italic;
  font-size:13px;line-height:1.6;color:var(--muted);
}

@media (max-width:600px){
  .panier{ padding:12px 16px;gap:12px }
  .panier .cta{ padding:12px 18px;font-size:11px }
  .panier__vider{ margin-left:6px }
}

/* Rien de tout cela n'existe sur le papier. */
@media print{
  .qte, .panier, .modale{ display:none !important }
  .carte{ padding-bottom:0 !important }
}

/* ═══════════════════════════════════════════════════════════
   Carte feuilletée — onglets et pagination (petit écran)
   ═══════════════════════════════════════════════════════════ */

/* Barre d'onglets collante : elle reste sous la nav pendant qu'on
   parcourt un univers, pour changer sans remonter. */
.pager:not([hidden]){
  display:flex;gap:8px;
  position:sticky;top:82px;z-index:40;
  margin:0 0 clamp(20px,3vh,30px);
  padding:12px 6vw;
  overflow-x:auto;
  scrollbar-width:none;
  background:linear-gradient(180deg,var(--cream) 72%,rgba(242,239,233,0));
}
.pager::-webkit-scrollbar{ display:none }

.pager__o{
  position:relative;flex:0 0 auto;
  padding:9px 15px;cursor:pointer;
  font-family:var(--sans);font-weight:400;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:#fff;
  border:1px solid rgba(23,23,27,.12);
  white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.pager__o:hover{ color:var(--ink) }
.pager__o.is-actif{
  color:var(--ink);background:var(--ink);color:var(--cream);
  border-color:var(--ink);
}
.pager__o:focus-visible{ outline:2px solid var(--gold-ink);outline-offset:2px }

/* Pastille : combien de pièces choisies dans cet univers. Sans elle,
   une sélection faite deux onglets plus loin devient invisible. */
.pager__o.is-rempli::after{
  content:attr(data-n);
  position:absolute;top:-7px;right:-7px;
  min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;letter-spacing:0;font-weight:500;
  color:var(--black);background:var(--gold);
  border-radius:10px;
}

/* Pagination bas de page */
.feuillet:not([hidden]){
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:1180px;margin:clamp(28px,4vh,44px) auto 0;
  padding:0 6vw;
}
.feuillet__b{
  padding:11px 16px;cursor:pointer;
  font-family:var(--sans);font-weight:400;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:none;
  border:1px solid rgba(23,23,27,.16);
  transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.feuillet__b:hover:not(:disabled){ border-color:var(--gold-ink);color:var(--gold-ink) }
.feuillet__b:disabled{ opacity:.3;cursor:default }
.feuillet__pos{
  margin:0;font-family:var(--serif);font-size:15px;
  color:var(--muted);white-space:nowrap;
}

/* Sur un écran étroit la nav est plus basse : l'onglet collant se
   place juste dessous, pas sous une barre de 82 px qui n'existe plus. */
@media (max-width:1049px){
  .pager:not([hidden]){ top:66px }
}

@media print{
  .pager, .feuillet{ display:none !important }
  /* Le feuilletage masque cinq univers sur six : à l'impression, tout
     doit reparaître, quel que soit l'état de l'écran. */
  .carte__gamme[hidden]{ display:block !important }
}

/* ═══════════════════════════════════════════════════════════
   Changement d'univers — la page recouverte.

   Deux essais avant celui-ci :
     · rotation 3D façon livre : sur une liste de 27 lignes, la
       perspective déforme le texte et les vignettes. L'effet se
       remarque plus que le contenu ;
     · glissé de 14 px : trop discret, on ne voyait rien passer.

   Ici les deux pages coexistent le temps du geste. La sortante
   recule d'un quart de largeur et s'assombrit ; l'entrante arrive
   de tout son bord avec une ombre en tête et la recouvre. C'est le
   recouvrement qui fait la page qu'on tourne — pas la déformation.
   ═══════════════════════════════════════════════════════════ */
.carte__corps{
  position:relative;
  /* clip et non hidden : hidden ferait de ce bloc un conteneur de
     défilement, et la barre d'onglets collante cesserait de coller. */
  overflow-x:clip;
  transition:min-height 400ms cubic-bezier(.4,0,.2,1);
}

/* La page sortante quitte le flux : sinon elle pousse l'entrante
   vers le bas et la hauteur du bloc double pendant le geste. */
.carte__gamme[class*="glisse--sort"]{
  position:absolute;top:0;left:0;right:0;z-index:1;
  pointer-events:none;
}
.carte__gamme[class*="glisse--entre"]{
  position:relative;z-index:2;
}

/* L'opacité tombe à zéro aux deux tiers : l'entrante est souvent
   plus courte que la sortante (Viennoiserie fait deux lignes,
   Pâtisserie vingt-sept) et ne peut pas la recouvrir seule. */
@keyframes pageSortAv{
  0%   { transform:translateX(0);     opacity:1 }
  65%  { opacity:0 }
  100% { transform:translateX(-26%);  opacity:0 }
}
@keyframes pageEntreAv{
  from{ transform:translateX(100%);  box-shadow:-24px 0 44px rgba(23,23,27,.20) }
  to  { transform:translateX(0);     box-shadow:-24px 0 44px rgba(23,23,27,0) }
}
@keyframes pageSortAr{
  0%   { transform:translateX(0);     opacity:1 }
  65%  { opacity:0 }
  100% { transform:translateX(26%);   opacity:0 }
}
@keyframes pageEntreAr{
  from{ transform:translateX(-100%); box-shadow:24px 0 44px rgba(23,23,27,.20) }
  to  { transform:translateX(0);     box-shadow:24px 0 44px rgba(23,23,27,0) }
}

/* Courbe : mesuré avec cubic-bezier(.32,.72,0,1), la page entrante
   avait parcouru 98 % du chemin en 100 ms sur 380 — tout se jouait
   au début et la fin traînait. Celle-ci répartit le mouvement. */
.carte__gamme.glisse--sort-av { animation:pageSortAv  400ms cubic-bezier(.4,0,.2,1) forwards }
.carte__gamme.glisse--sort-ar { animation:pageSortAr  400ms cubic-bezier(.4,0,.2,1) forwards }
.carte__gamme.glisse--entre-av{ animation:pageEntreAv 400ms cubic-bezier(.4,0,.2,1) }
.carte__gamme.glisse--entre-ar{ animation:pageEntreAr 400ms cubic-bezier(.4,0,.2,1) }

/* La page qui arrive est opaque : sans fond, on verrait la sortante
   par transparence et le recouvrement ne se lirait plus. */
.carte__gamme[class*="glisse--"]{ background:var(--cream) }

/* Réglage système « moins d'animations » : on change sans geste. */
@media (prefers-reduced-motion: reduce){
  .carte__gamme[class*="glisse--"]{ animation:none !important;position:static }
  .carte__corps{ transition:none }
}

@media print{
  .carte__corps{ min-height:0 !important;transition:none;overflow:visible }
  .carte__gamme,
  .carte__gamme *{ animation:none !important;transform:none !important;
                   opacity:1 !important;position:static !important;box-shadow:none !important }
}


/* ═══════════════════════════════════════════════════════════
   Pièce visée depuis une page d'univers

   On arrive sur /menu#piece-27 : sans repère, on atterrit au milieu
   d'une liste de vingt-sept lignes sans savoir laquelle on cherchait.
   Le liseré la désigne, puis s'efface — il ne doit pas rester.
   ═══════════════════════════════════════════════════════════ */
.carte__ligne.is-visee{
  animation:pieceVisee 2600ms ease-out;
}
@keyframes pieceVisee{
   0%  { background:rgba(248,222,5,.34); box-shadow:inset 3px 0 0 var(--gold-ink) }
  14%  { background:rgba(248,222,5,.34); box-shadow:inset 3px 0 0 var(--gold-ink) }
  100% { background:transparent;         box-shadow:inset 3px 0 0 rgba(156,128,0,0) }
}
@media (prefers-reduced-motion: reduce){
  .carte__ligne.is-visee{ animation:none;box-shadow:inset 3px 0 0 var(--gold-ink) }
}
@media print{
  .carte__ligne.is-visee{ animation:none;background:none;box-shadow:none }
}