/* Le livret numérique, côté voyageur.
   Feuille autonome : livret.html ne charge ni Tailwind ni style.css.
   Le fond (--fond) vient du livret ; l'encre s'y accorde (data-encre).
   Palette Booky : olive #7a8a5e · crème #f5ead8 · vert profond #2f3a2c ·
   pêche #FFB59E (détails seulement, jamais un texte sur fond clair). */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Aucun débordement latéral : les pleines largeurs (bandeau et photo de
   c07/c03) se calent au viewport — un poil d'arrondi de calcul créait un
   défilement horizontal sur mobile et tout semblait décentré (son
   signalement du 13/08 sur La Grange). */
html, body { overflow-x: hidden; }

body {
  --fond: #fbf6ec;
  --detail: #FFB59E; /* la couleur des détails — l'éditeur peut la changer */
  background: var(--fond);
  font-family: 'Baloo 2', sans-serif;
  min-height: 100svh;
  transition: background 0.4s ease;
}

body[data-encre="sombre"] {
  --encre: #2f3a2c;
  --encre-2: rgba(47, 58, 44, 0.6);
  /* les cartes prennent la teinte DU FOND, en plus clair — jamais une
     plaque blanche posée derrière le contenu (sa correction du 12/08) */
  --carte: color-mix(in srgb, var(--fond) 55%, #ffffff);
  --filet: rgba(47, 58, 44, 0.14);
  --pilule: #2f3a2c;
  --pilule-texte: #f5ead8;
}
body[data-encre="claire"] {
  /* un BLANC franc sur les fonds foncés (13/08, dicté deux fois : « pour
     qu'il ressorte plus », puis « blanc ou variété de blanc ») —
     l'ancien crème #f5ead8 a vécu */
  --encre: #fdfdfc;
  --encre-2: rgba(253, 253, 252, 0.75);
  --carte: rgba(255, 255, 255, 0.08);
  --filet: rgba(245, 234, 216, 0.2);
  --pilule: #f5ead8;
  --pilule-texte: #2f3a2c;
}

/* Repli sans color-mix (13/08) : si le navigateur ignore color-mix, la
   teinte des cartes claires tomberait à rien — les boutons redeviendraient
   du texte nu. Une vraie surface de secours prend le relais. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  body[data-encre="sombre"] { --carte: rgba(255, 255, 255, 0.72); }
}

body { color: var(--encre); }

#livret { max-width: 46rem; margin: 0 auto; padding: 0 1.4rem; }

.font-couv { font-family: 'Fraunces', serif; }

svg { display: block; }

/* Les crochets des designs : la base CONSOMME ces variables, chaque design
   (body[data-design="…"], section plus bas) ne fait qu'en changer la valeur
   et habiller les <i> décoratifs neutres. Les coins (--r-*) restent le
   territoire de l'utilisateur : un design pose son défaut, data-coins
   (déclaré en fin de feuille) gagne toujours. */
body {
  --couv-x: center;      /* align-items de la couverture */
  --couv-y: center;      /* justify-content de la couverture */
  --couv-texte: center;  /* text-align de la couverture */
  --tete-align: center;  /* text-align des têtes (Essentiel, Dépliant) */
  --filet-l: 44px;       /* le filet de couverture */
  --filet-h: 3px;
  --r-carte: 18px;       /* wifi et cartes de contenu */
  --r-grande: 22px;      /* les cartes du Dépliant */
  --r-petit: 12px;       /* les pastilles d'icônes */
  /* le CONTOUR des boutons du livret (règle dictée le 13/08 : « un BOUTON,
     pas un TEXTE ») — la couleur d'accent du modèle, PLEINE et SIMPLE :
     aucun color-mix ni fonction récente sur ce chemin, sinon un navigateur
     qui ne la connaît pas jette tout le contour (c'était le bug des
     « contours transparents »). */
  --contour-btn: var(--detail);
}
.couv-deco, .tete-deco {
  display: none; position: absolute;
  pointer-events: none; z-index: -1;
}

/* ===== Communs aux trois modèles ===== */

.copyright {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  opacity: 0.42;
  text-align: center;
  padding: 1.2rem 0 1.6rem;
}

.wifi-carte {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 1rem 1.15rem;
  display: grid;
  gap: 0.65rem;
}
.wifi-ligne { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.wifi-lab {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-2); min-width: 3.6rem;
}
.wifi-val { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.wifi-cle { font-family: 'Fraunces', serif; letter-spacing: 0.04em; }
.wifi-copie {
  margin-left: auto;
  font: 700 0.78rem 'Baloo 2', sans-serif;
  color: var(--pilule-texte);
  background: var(--pilule);
  border: none; border-radius: 999px;
  padding: 0.32rem 0.9rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wifi-copie:active { transform: scale(0.95); }
.wifi-copie.copie-ok { opacity: 0.75; }

/* ---------------------------------------------------------------------------
   LA BOÎTE À CLÉS (14/08, dictée)
   Même carte que le wifi — c'est le même geste : on vient chercher un code
   et on le recopie. L'endroit se lit AU-DESSUS du code, parce qu'on cherche
   la boîte avant de taper quoi que ce soit. Le code est en Fraunces, grand :
   il se lit d'un coup d'œil, une valise à la main, dans la nuit.
   --------------------------------------------------------------------------- */
.cles-carte {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 1rem 1.15rem;
  display: grid;
  gap: 0.8rem;
}
.cles-ou {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.98rem; line-height: 1.5;
}
/* (16/08 : --accent n'existe pas dans le livret, la variable s'appelle
   --detail depuis le début. Le repère de la boîte à clés était donc sans
   couleur depuis le 14/08 — il prenait l'encre au lieu de l'accent.) */
.cles-ou svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--detail); }
.cles-ligne { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.cles-lab {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-2);
}
.cles-val {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem; font-weight: 600; letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   LE LIVRET D'OR (14/08, dictée : « l'utilisateur devra voir règle 1, 2, 3… »)
   Les numéros sont DESSINÉS par le compteur CSS, jamais tapés par l'hôte :
   il écrit ses phrases, il peut les réordonner, la numérotation suit toute
   seule. Une pastille à l'accent du livret, le texte aligné à côté.
   --------------------------------------------------------------------------- */
.regles-note {
  font-size: 0.92rem; line-height: 1.5;
  color: var(--encre-2);
  margin-bottom: 1.1rem;
}
.regles-liste {
  counter-reset: regle;
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 0.85rem;
}
.regle {
  counter-increment: regle;
  display: flex; align-items: flex-start; gap: 0.8rem;
}
.regle-num {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  /* la pastille reprend le couple pilule/texte-de-pilule : c'est le seul
     duo dont le contraste est garanti dans les cent designs */
  background: var(--pilule);
  color: var(--pilule-texte);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 0.92rem; font-weight: 600;
  margin-top: 0.05rem;
}
.regle-num::before { content: counter(regle); }
.regle-texte { font-size: 1rem; line-height: 1.55; padding-top: 0.15rem; }

/* ---------------------------------------------------------------------------
   LES GESTES DU DÉPART (14/08, proposé puis validé)
   Des cases à cocher, là où les règles sont numérotées : une règle se lit,
   un geste se fait. Le rond se remplit, le texte pâlit et se barre à peine
   — assez pour voir ce qui reste, pas assez pour crier. Aucun rouge, aucune
   alerte : c'est un aide-mémoire du dernier matin, pas un contrôle.
   --------------------------------------------------------------------------- */
.gestes {
  margin-top: 1.4rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 1rem 1.15rem 0.9rem;
}
.gestes-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.gestes-nom {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-2);
}
.gestes-compte { font-size: 0.8rem; color: var(--encre-2); }
.gestes-compte b {
  font-family: 'Fraunces', serif; font-size: 0.95rem;
  font-weight: 600; color: var(--encre);
}
.gestes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }

.geste {
  width: 100%;
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.5rem 0.15rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  border-radius: 0.6rem;
  transition: background 0.25s ease;
}
.geste:hover { background: var(--survol, rgba(122, 138, 94, 0.08)); }

.geste-case {
  flex: none;
  width: 1.35rem; height: 1.35rem;
  margin-top: 0.1rem;
  border: 0.14rem solid var(--filet-fort, var(--filet));
  border-radius: 0.45rem;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.geste-case::after {
  content: '';
  position: absolute;
  left: 0.36rem; top: 0.14rem;
  width: 0.32rem; height: 0.62rem;
  border: solid var(--pilule-texte);
  border-width: 0 0.14rem 0.14rem 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.geste.fait .geste-case { background: var(--pilule); border-color: var(--pilule); }
.geste.fait .geste-case::after { opacity: 1; transform: rotate(45deg) scale(1); }

.geste-texte { font-size: 0.98rem; line-height: 1.5; transition: opacity 0.3s ease; }
.geste.fait .geste-texte { opacity: 0.5; text-decoration: line-through; text-decoration-thickness: 0.06em; }

.gestes-note {
  margin-top: 0.7rem;
  font-size: 0.78rem; line-height: 1.45;
  color: var(--encre-2);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .geste-case, .geste-case::after, .geste-texte { transition: none; }
}

.horaires { display: flex; align-items: stretch; gap: 1rem; }
.horaire { flex: 1; text-align: center; padding: 0.5rem 0; }
.horaire-lab {
  display: block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-2);
}
.horaire-val {
  display: block; font-family: 'Fraunces', serif;
  font-size: 1.9rem; font-weight: 600; line-height: 1.25; margin-top: 0.15rem;
}
.horaire-sep { width: 1px; background: var(--filet); }

.contact { display: grid; gap: 0.7rem; justify-items: start; }
.contact-nom { font-weight: 600; font-size: 1.05rem; }
.contact-tel {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--pilule); color: var(--pilule-texte);
  text-decoration: none; font-weight: 700; font-size: 0.98rem;
  border-radius: 999px; padding: 0.6rem 1.25rem;
  transition: transform 0.2s ease;
}
.contact-tel:active { transform: scale(0.97); }
.contact-tel svg { width: 1.05rem; height: 1.05rem; }

/* ===== « Le Complet » — couverture, sommaire, chapitres ===== */

.couv {
  min-height: 96svh;
  display: flex; flex-direction: column;
  align-items: var(--couv-x); justify-content: var(--couv-y);
  text-align: var(--couv-texte); padding: 3rem 0 0;
  position: relative;
}
.couv-sur {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--encre-2);
}
.couv-nom {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(2.3rem, 9vw, 3.4rem);
  line-height: 1.08; margin-top: 0.9rem; text-wrap: balance;
}
.couv-lieu { margin-top: 0.55rem; font-size: 1.02rem; color: var(--encre-2); }
.couv-filet {
  width: var(--filet-l); height: var(--filet-h); border-radius: 999px;
  background: var(--detail); margin: 1.5rem 0;
}
.couv-mot {
  max-width: 30rem; font-size: 1.05rem; line-height: 1.65; color: var(--encre);
}
.couv-descend {
  width: 10px; height: 10px; margin-top: 2.2rem;
  border-right: 2px solid var(--encre-2);
  border-bottom: 2px solid var(--encre-2);
  transform: rotate(45deg);
  animation: couv-appelle 2.4s ease-in-out infinite;
}
@keyframes couv-appelle {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}
.couv .copyright { position: absolute; bottom: 0.4rem; left: 0; right: 0; padding: 0.6rem 0; }

/* (le sommaire collant a vécu — sa dictée du 12/08 : la bande défilante
   « ne doit pas exister », les boutons portent la navigation) */

.chap { padding: 2.6rem 0 1rem; }
.chap-titre {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.7rem; line-height: 1.15;
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.3rem;
}
.chap-titre::before {
  content: ''; width: 16px; height: 3px; border-radius: 999px;
  background: var(--detail); flex: none;
}
.chap-bloc { margin-top: 1.4rem; }
.chap-sous {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--encre-2);
  margin-bottom: 0.45rem;
}
.chap-sous svg { width: 1rem; height: 1rem; }
.chap-texte { font-size: 1rem; line-height: 1.7; white-space: pre-line; }

.fin { padding: 3.5rem 0 2.5rem; text-align: center; }
.fin-mot { font-size: 1.6rem; font-weight: 600; }

/* ===== « L’Essentiel » — une page, rien que le nécessaire ===== */

.ess { max-width: 30rem; margin: 0 auto; padding: 3.4rem 0 1rem; }
.ess-tete { text-align: var(--tete-align); padding-bottom: 2.2rem; position: relative; }
.ess-sur {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--encre-2);
}
.ess-nom {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(1.9rem, 7.5vw, 2.5rem); line-height: 1.12;
  margin-top: 0.7rem; text-wrap: balance;
}
.ess-lieu { margin-top: 0.4rem; font-size: 0.95rem; color: var(--encre-2); }
/* le mot de bienvenue de la une-page (13/08 : toutes les fonctions sur
   tous les gabarits) — il suit l'alignement de la tête du design */
.ess-mot { margin-top: 1rem; font-size: 0.98rem; line-height: 1.65; white-space: pre-line; }
.ess-liste { display: grid; }
.ess-item { border-top: 1px solid var(--filet); padding: 1.5rem 0.2rem; }
.ess-lab {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--encre-2);
  margin-bottom: 0.7rem;
}
.ess-lab svg { width: 1rem; height: 1rem; }
.ess-texte { font-size: 1rem; line-height: 1.65; white-space: pre-line; }

/* ===== « Le Dépliant » — des cartes qu'on déplie ===== */

.dep { padding: 3rem 0 1rem; }
.dep-tete { text-align: var(--tete-align); padding-bottom: 2rem; position: relative; }
.dep-sur {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--encre-2);
}
.dep-nom {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.1;
  margin-top: 0.7rem; text-wrap: balance;
}
.dep-lieu { margin-top: 0.45rem; font-size: 0.98rem; color: var(--encre-2); }
.dep-mot {
  max-width: 28rem; margin: 1.1rem auto 0;
  font-size: 1rem; line-height: 1.65;
}
.dep-cartes { display: grid; gap: 0.85rem; }
.dep-carte {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r-grande);
  overflow: hidden;
}
.dep-ouvre {
  width: 100%; display: flex; align-items: center; gap: 0.85rem;
  background: none; border: none; cursor: pointer;
  font-family: 'Baloo 2', sans-serif; color: var(--encre);
  padding: 1.05rem 1.2rem; text-align: left;
}
.dep-ic {
  width: 2.3rem; height: 2.3rem; flex: none;
  display: grid; place-items: center;
  background: var(--fond); border: 1px solid var(--filet);
  border-radius: var(--r-petit);
}
.dep-ic svg { width: 1.15rem; height: 1.15rem; }
.dep-titre { font-weight: 700; font-size: 1.02rem; }
.dep-chevron {
  margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--detail); border-bottom: 2px solid var(--detail);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.25s ease;
}
.dep-ouvre[aria-expanded="true"] .dep-chevron { transform: rotate(225deg); }
.dep-corps { border-top: 1px solid var(--filet); }
.dep-dedans { padding: 1.1rem 1.2rem 1.3rem; }
.dep-texte { font-size: 0.98rem; line-height: 1.65; white-space: pre-line; }

/* ===== Les boutons du livret et leurs feuillets (12/08) =====
   Wifi · Itinéraire · L'IA voyageur — « des boutons, pas des sections »
   (dicté). Chaque bouton ouvre un feuillet qui monte du bas. */

.lv-actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  justify-content: center;
  align-self: stretch;
  margin-top: 1.8rem;
}
.ess .lv-actions, .dep .lv-actions { margin: 0 0 2rem; }
/* de VRAIS gros boutons d'app (sa correction : « beaucoup plus gros ») —
   l'icône au-dessus du mot, chacun prend sa part de la largeur ; la TYPO
   change selon le modèle (blocs designs plus bas) */
.lv-btn {
  flex: 1 1 6.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font: 700 1rem/1.15 'Baloo 2', sans-serif;
  color: var(--encre);
  background: var(--carte);
  /* un contour NET sur tous les modèles (13/08, « un BOUTON pas un
     TEXTE ») : 2px de la couleur d'accent, pleine — jamais le filet pâle */
  border: 2px solid var(--contour-btn);
  border-radius: var(--r-carte);
  padding: 1.05rem 0.7rem 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lv-btn svg { width: 1.7rem; height: 1.7rem; color: var(--detail); }
/* le bouton LARGE (l'IA voyageur, premier de tous les modèles — dicté) :
   toute la largeur, l'icône et le mot côte à côte */
.lv-btn.lv-large {
  flex-basis: 100%;
  flex-direction: row; justify-content: center; gap: 0.65rem;
  padding: 1rem 0.9rem;
  font-size: 1.08rem;
}
.lv-btn.lv-large svg { width: 1.45rem; height: 1.45rem; }
.lv-btn:active { transform: scale(0.96); }
@media (hover: hover) {
  .lv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(47, 58, 44, 0.35); }
}

/* le verrou de scroll du feuillet — créé ICI : livret.html ne charge pas
   style.css, son .fige n'existe pas sur cette page */
html.livret-fige { overflow: hidden; }

.feuillet-voile {
  position: fixed; inset: 0; z-index: 44;
  background: rgba(20, 26, 18, 0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.feuillet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  max-width: 34rem; margin: 0 auto;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--filet); border-bottom: none;
  border-radius: 26px 26px 0 0;
  padding: 1.3rem 1.4rem 1.7rem;
  box-shadow: 0 -18px 50px -22px rgba(47, 58, 44, 0.5);
  max-height: 76svh; overflow: auto;
  animation: feuillet-monte 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes feuillet-monte {
  from { transform: translateY(26px); opacity: 0; }
}
.feuillet-ferme {
  position: absolute; top: 0.7rem; right: 0.85rem;
  width: 2.1rem; height: 2.1rem;
  border: none; border-radius: 50%;
  background: var(--carte); color: var(--encre);
  font: 400 1.25rem/1 'Baloo 2', sans-serif;
  cursor: pointer;
}
.feuillet-corps { display: grid; gap: 0.95rem; padding-top: 0.2rem; }
.feuillet-titre {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--encre-2);
  padding-right: 2.4rem;
}
.feuillet-titre svg { width: 1.05rem; height: 1.05rem; color: var(--detail); }
.feuillet-texte { font-size: 1.02rem; line-height: 1.65; white-space: pre-line; }
.feuillet-note { font-size: 0.88rem; line-height: 1.55; color: var(--encre-2); }
.feuillet-action {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--pilule); color: var(--pilule-texte);
  text-decoration: none; font-weight: 700; font-size: 0.98rem;
  border-radius: 999px; padding: 0.6rem 1.3rem;
  transition: transform 0.2s ease;
}
.feuillet-action:active { transform: scale(0.97); }
.feuillet-action svg { width: 1rem; height: 1rem; }

/* la PAGE du livret — pour les boutons « qui expliquent un tas
   d'informations » (12/08, dicté) : plein écran, un retour, le contenu */
.lv-page {
  position: fixed; inset: 0; z-index: 47;
  background: var(--fond); color: var(--encre);
  overflow: auto;
  padding: 0 1.4rem 3rem;
  animation: page-arrive 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes page-arrive {
  from { transform: translateX(7%); opacity: 0; }
}
.lv-page-tete {
  position: sticky; top: 0;
  margin: 0 -1.4rem 1.2rem;
  padding: 0.9rem 1.4rem;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}
.lv-page-ferme {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 700 0.95rem 'Baloo 2', sans-serif;
  color: var(--encre); background: none; border: none; cursor: pointer;
  padding: 0.2rem 0;
}
.lv-page-ferme svg { width: 1.15rem; height: 1.15rem; color: var(--detail); }
.lv-page-corps { max-width: 34rem; margin: 0 auto; display: grid; gap: 1rem; }
.lv-page-titre {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.55rem; line-height: 1.2;
}
.lv-page-titre svg { width: 1.25rem; height: 1.25rem; color: var(--detail); }
.lv-page-texte { font-size: 1.05rem; line-height: 1.75; white-space: pre-line; }
.lv-page-sous {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--encre-2);
}
.lv-page-sous svg { width: 1rem; height: 1rem; color: var(--detail); }

/* le DÉPART, dernière section de chaque livret : une seule mesure, centrée */
/* LE DÉPART EST COLLÉ À GAUCHE (16/08 au soir, dicté : « sur TOUT le
   livret numérique l'heure du départ et le mot départ doivent être
   collés à gauche ») — c'était le seul bloc centré d'un livret aligné
   à gauche, relevé par l'audit du même jour. */
.depart-seul { justify-content: flex-start; }
.depart-seul .horaire { flex: none; min-width: 0; text-align: left; padding: 0.5rem 0; }

/* ===== Les numéros de secours (13/08, dicté) =====
   SAMU 15 · Pompiers 18 · Police 17 — numéros français, fixes. Une
   SECTION du livret, pas un bouton ; un appui compose le numéro.
   Le soir même (dicté) : le 112, service d'urgence INTERNATIONAL, prend
   la première ligne, sur toute la largeur — c'est le seul numéro qu'un
   voyageur étranger connaît déjà. Les trois français gardent leur rang. */

.secours { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.secours-item {
  flex: 1; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  padding: 0.95rem 0.4rem 0.8rem;
  color: var(--encre);
  transition: transform 0.2s ease;
}
.secours-item:active { transform: scale(0.96); }
.secours-nom {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--encre-2); text-align: center;
}
.secours-num {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.8rem;
  line-height: 1.1;
}
.secours-num::after {
  content: ''; display: block; width: 16px; height: 3px;
  border-radius: 999px; background: var(--detail); margin: 0.3rem auto 0;
}
/* le 112 : pleine largeur, en ligne, souligné par le contour du détail */
.secours-inter {
  flex: 1 0 100%;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 0.8rem; padding: 0.75rem 1rem;
  border-color: var(--detail);
}
.secours-inter .secours-nom { text-align: left; }
.secours-inter .secours-num { font-size: 1.5rem; }
.secours-inter .secours-num::after { display: none; }
.secours-note {
  flex: 1 0 100%; margin: 0.1rem 0 0;
  font-size: 0.78rem; line-height: 1.5; color: var(--encre-2); text-align: center;
}

/* ===== Le bouton de langue (13/08, dicté) =====
   Petit, visible sur tous les livrets, en haut à droite — la langue
   courante, et le menu à trois choix dessous. */

.langue-coin { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 42; }
.langue-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: 700 0.72rem/1 'Baloo 2', sans-serif; letter-spacing: 0.07em;
  color: var(--encre);
  background: color-mix(in srgb, var(--fond) 72%, transparent);
  border: 1px solid var(--filet); border-radius: 999px;
  padding: 0.44rem 0.75rem; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.langue-btn svg { width: 0.95rem; height: 0.95rem; color: var(--detail); }
.langue-menu {
  position: absolute; top: calc(100% + 0.4rem); right: 0;
  display: grid; min-width: 8.6rem;
  /* le menu est FERMÉ au naturel : il s'ouvre au clic, se referme au
     re-clic (sa correction du 13/08). display: grid écrasait l'attribut
     hidden — le menu restait ouvert en permanence et ses choix en texte
     nu se posaient sur le livret. LEÇON : toute boîte à display posé par
     sa classe redéclare son état [hidden]. */
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 14px;
  padding: 0.3rem;
  box-shadow: 0 14px 34px -18px rgba(47, 58, 44, 0.45);
}
.langue-choix {
  font: 600 0.92rem 'Baloo 2', sans-serif; text-align: left;
  color: var(--encre); background: none; border: none;
  border-radius: 9px; padding: 0.5rem 0.75rem; cursor: pointer;
}
.langue-menu[hidden] { display: none; }
.langue-choix.choisie { background: var(--carte); font-weight: 800; }
@media (hover: hover) { .langue-choix:hover { background: var(--carte); } }

/* ----- Le menu élargi (16/08, dicté) : toutes les langues -----
   La recherche en tête, la langue du téléphone et les courantes
   épinglées, un filet, puis le reste — la liste défile, le menu garde
   sa taille. */
.langue-menu { min-width: 12.5rem; }
.langue-cherche {
  width: 100%;
  font: 600 0.88rem 'Baloo 2', sans-serif;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.3rem;
}
.langue-cherche::placeholder { color: var(--encre-2); }
.langue-cherche:focus { outline: 2px solid var(--detail); outline-offset: 1px; }
.langue-defile {
  display: grid;
  max-height: min(21rem, 55svh);
  overflow: auto;
  overscroll-behavior: contain;
}
.langue-filet {
  height: 1px;
  margin: 0.3rem 0.4rem;
  background: var(--filet);
}

/* LE CLIGNOTEMENT (16/08, dicté : « un bouton qui clignote jusqu'à ce
   qu'on l'ait ouvert, et quand il est ouvert il clignote plus ») : une
   respiration à l'accent du modèle, toutes les trois secondes — assez
   pour l'œil, jamais une alarme. S'arrête pour toujours à la première
   ouverture (retenu sur l'appareil), et n'existe pas en mouvement
   réduit. */
.langue-btn.clignote { animation: langue-appel 3s ease-in-out infinite; }
@keyframes langue-appel {
  0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; }
  80% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--detail) 45%, transparent); }
  90% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--detail) 30%, transparent); }
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  @keyframes langue-appel {
    0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; }
    80% { box-shadow: 0 0 0 5px rgba(255, 181, 158, 0.5); }
    90% { box-shadow: 0 0 0 2px rgba(255, 181, 158, 0.3); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .langue-btn.clignote { animation: none; }
}

/* ===== L'animation de fond (13/08, dicté — REFAITES le soir même sur
   sa correction : « de VRAIES animations de fond, les couleurs qui
   bougent, pas comme actuellement ») =====
   Une couche fixe DERRIÈRE le livret. Les couleurs viennent du modèle :
   --fond, --fond2 (la 2e couleur du dégradé, sinon l'accent — posée par
   livret.js) et --detail. Jamais créée en mouvement réduit. */

#livret { position: relative; z-index: 1; }
.fond-livret {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.fond-livret::before, .fond-livret::after { content: ''; position: absolute; }

/* 1 · les couleurs qui dansent : tout le fond est un dégradé vivant qui
   voyage lentement entre les couleurs du modèle */
.fond-livret[data-anim="1"]::before {
  inset: 0;
  background: linear-gradient(120deg,
    var(--fond) 0%, var(--fond2) 38%, var(--detail) 72%, var(--fond) 100%);
  background-size: 320% 320%;
  animation: fond-danse 16s ease-in-out infinite alternate;
}
@keyframes fond-danse {
  from { background-position: 0% 40%; }
  to { background-position: 100% 60%; }
}

/* 2 · l'aurore : deux grandes nappes de couleur floues qui dérivent
   l'une vers l'autre, pleines et lentes */
.fond-livret[data-anim="2"]::before {
  width: 80vmax; height: 80vmax; border-radius: 50%;
  left: -28vmax; top: -30vmax;
  background: radial-gradient(circle, var(--fond2) 0%, transparent 62%);
  filter: blur(30px);
  animation: aurore-a 21s ease-in-out infinite alternate;
}
.fond-livret[data-anim="2"]::after {
  width: 70vmax; height: 70vmax; border-radius: 50%;
  right: -26vmax; bottom: -28vmax;
  background: radial-gradient(circle, var(--detail) 0%, transparent 62%);
  filter: blur(34px);
  animation: aurore-b 27s ease-in-out infinite alternate;
}
@keyframes aurore-a { to { transform: translate(16vmax, 13vmax) scale(1.15); } }
@keyframes aurore-b { to { transform: translate(-15vmax, -14vmax) scale(1.12); } }

/* 3 · la houle : une vague de couleur pleine qui traverse la page,
   aller-retour, sans se presser */
.fond-livret[data-anim="3"]::before {
  inset: -50%;
  background: linear-gradient(115deg,
    transparent 22%, var(--fond2) 46%, var(--detail) 56%, transparent 80%);
  opacity: 0.85;
  animation: houle-va 13s ease-in-out infinite alternate;
}
@keyframes houle-va {
  from { transform: translateX(-18%); }
  to { transform: translateX(18%); }
}

/* ===== Les médias : LA photo, la galerie et les cartes vidéo ===== */

/* LA photo de la maison (la 1re du volet) : posée dans la tête du livret,
   recadrée automatiquement — chaque design lui donne sa forme. TOUJOURS
   centrée sur l'écran (sa correction du 12/08), même quand la couverture
   s'aligne à gauche ou à droite. */
.tete-photo {
  width: 100%; max-width: 22rem;
  margin: 1.2rem auto 0;
  border-radius: var(--r-carte); overflow: hidden;
  border: 1px solid var(--filet);
}
.couv .tete-photo { margin: 1.3rem auto 0.2rem; align-self: center; }
.tete-photo img {
  width: 100%; height: clamp(160px, 46vw, 240px);
  object-fit: cover; display: block;
}

.galerie {
  display: grid; gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.galerie-photo {
  margin: 0; aspect-ratio: 4 / 3;
  border-radius: var(--r-petit); overflow: hidden;
  background: var(--carte); border: 1px solid var(--filet);
}
.galerie-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* une seule photo en galerie : toute la largeur, jamais collée à gauche */
.galerie-photo:only-child { grid-column: 1 / -1; }

.videos { display: grid; gap: 0.6rem; }
.video-carte {
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: var(--r-carte); padding: 0.75rem 0.95rem;
  color: var(--encre); text-decoration: none;
  transition: transform 0.2s ease;
}
@media (hover: hover) { .video-carte:hover { transform: translateY(-2px); } }
.video-lecture {
  width: 2.2rem; height: 2.2rem; flex: none;
  display: grid; place-items: center;
  background: var(--pilule); color: var(--pilule-texte);
  border-radius: 50%;
}
.video-lecture svg { width: 1rem; height: 1rem; }
.video-titre { font-weight: 600; font-size: 0.98rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.video-ou {
  flex: none; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2);
}

/* ===== Les 20 modèles (les designs du catalogue) =====
   Un bloc par design : des variables, des règles descendantes, et les <i>
   décoratifs neutres qu'on habille. Les noms et couleurs par défaut vivent
   dans modeles.js (DESIGNS) — ici, tout se dessine à partir de var(--fond),
   var(--detail) et des encres dérivées : le livret reste lisible quel que
   soit le fond choisi par l'utilisateur.
   Les COINS restent en --r-* (data-coins, déclaré APRÈS, gagne toujours) —
   jamais de border-radius en dur sur ces surfaces. La POLICE d'un titre
   PEUT venir du design (les modèles à typo, fin de section) : le réglage
   Baloo/Italique de l'utilisateur est déclaré après et garde le dernier
   mot ; Fraunces (le défaut) n'a pas de règle, c'est lui qui laisse
   parler le design. */

/* --- c01 · L'Olivier — couverture posée en bas, grand filet vertical,
       rameau pointillé qui descend du haut --- */
body[data-design="c01"] { --couv-y: flex-end; --filet-l: 3px; --filet-h: 62px; }
body[data-design="c01"] .couv { padding-bottom: 5.5rem; }
body[data-design="c01"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c01"] .couv-deco.deco-a {
  display: block; left: 50%; top: 5svh; width: 3px; height: 15svh;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, var(--detail) 1.3px, transparent 1.6px);
  background-size: 3px 11px;
}
body[data-design="c01"] .chap-titre::before { width: 26px; }

/* --- c02 · Minuit — capitales espacées, deux filets fins, chapitres
       numérotés en romains --- */
body[data-design="c02"] { --filet-l: 110px; --filet-h: 1px; }
body[data-design="c02"] .couv-nom {
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
}
body[data-design="c02"] .couv-sur { letter-spacing: 0.34em; color: var(--detail); }
body[data-design="c02"] .couv-deco {
  display: block; left: 22%; right: 22%; height: 1px;
  background: color-mix(in srgb, var(--detail) 55%, transparent);
}
body[data-design="c02"] .couv-deco.deco-a { top: 7svh; }
body[data-design="c02"] .couv-deco.deco-b { bottom: 7svh; }
body[data-design="c02"] #livret { counter-reset: chap; }
body[data-design="c02"] .chap { counter-increment: chap; }
body[data-design="c02"] .chap-titre::before {
  content: counter(chap, upper-roman); width: auto; height: auto;
  background: none; border-radius: 0;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em;
  color: var(--detail); transform: translateY(0.12em);
}
body[data-design="c02"] .fin-mot { text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.2rem; }

/* --- c03 · Terracotta — le nom à gauche tout en bas, une bande pleine
       en pied de couverture, titres soulignés pleins --- */
body[data-design="c03"] { --couv-x: flex-start; --couv-texte: left; --couv-y: flex-end; }
body[data-design="c03"] .couv { padding-bottom: 7rem; }
body[data-design="c03"] .couv-filet { display: none; }
body[data-design="c03"] .couv-mot { margin-top: 1.4rem; max-width: 27rem; }
body[data-design="c03"] .couv-lieu::before { content: '— '; color: var(--detail); }
body[data-design="c03"] .couv-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw);
  bottom: 0; height: 1.35rem; background: var(--detail);
}
body[data-design="c03"] .couv .copyright { bottom: 1.7rem; }
body[data-design="c03"] .chap-titre { display: block; padding-bottom: 0.55rem; border-bottom: 3px solid var(--detail); }
body[data-design="c03"] .chap-titre::before { display: none; }

/* --- c04 · La Riviera — un cadre passe-partout à double filet, nom en
       italique, repères en anneaux --- */
body[data-design="c04"] .couv { padding: 4.5rem 1.6rem 3rem; }
body[data-design="c04"] .couv-deco { display: block; border: 1px solid var(--detail); border-radius: 2px; }
body[data-design="c04"] .couv-deco.deco-a { inset: 1.05rem; }
body[data-design="c04"] .couv-deco.deco-b { inset: 1.5rem; opacity: 0.5; }
body[data-design="c04"] .couv-nom { font-style: italic; font-weight: 500; }
body[data-design="c04"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c04"] .chap-titre::before {
  width: 10px; height: 10px; background: none;
  border: 2px solid var(--detail); border-radius: 50%;
}

/* --- c05 · L'Estampe — tout à droite, beaucoup d'air, immense initiale
       et lettrines dans les chapitres --- */
body[data-design="c05"] { --couv-x: flex-end; --couv-texte: right; --filet-l: 88px; --filet-h: 2px; }
body[data-design="c05"] .couv-nom { font-size: clamp(2.6rem, 10.5vw, 4rem); font-weight: 500; }
body[data-design="c05"] .couv-nom::first-letter { color: var(--detail); font-size: 1.3em; }
body[data-design="c05"] .couv-sur { letter-spacing: 0.4em; }
body[data-design="c05"] .couv-mot { color: var(--encre-2); }
body[data-design="c05"] .chap { padding-top: 3.4rem; }
body[data-design="c05"] .chap-titre { display: block; font-size: 1.45rem; }
body[data-design="c05"] .chap-titre::before { display: none; }
body[data-design="c05"] .chap-texte::first-letter {
  float: left; font-family: 'Fraunces', serif; font-size: 2.5em;
  line-height: 0.85; padding: 0.06em 0.35rem 0 0; color: var(--detail);
}

/* --- c06 · Le Verger — une arche tendre derrière le nom, puces rondes --- */
body[data-design="c06"] .couv-deco.deco-a {
  display: block; left: 50%; top: 50%;
  width: min(60vw, 14.5rem); height: min(74vw, 18rem);
  transform: translate(-50%, -60%);
  border-radius: 999px 999px 12px 12px;
  background: color-mix(in srgb, var(--detail) 14%, transparent);
}
body[data-design="c06"] .couv-deco.deco-b {
  display: block; left: 50%; top: 50%;
  width: min(66vw, 16rem); height: min(80vw, 19.5rem);
  transform: translate(-50%, -59%);
  border-radius: 999px 999px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--detail) 40%, transparent);
}
body[data-design="c06"] .couv-filet { display: none; }
body[data-design="c06"] .couv-mot { margin-top: 1.5rem; }
body[data-design="c06"] .chap-titre::before { width: 11px; height: 11px; border-radius: 50%; }

/* --- c07 · La Grange — bandeau plein en tête, le nom inversé dedans,
       coins francs partout --- */
body[data-design="c07"] { --couv-y: flex-start; --r-carte: 6px; --r-grande: 8px; --r-petit: 5px; --filet-l: 54px; --filet-h: 4px; }
body[data-design="c07"] .couv { padding-top: 2.4rem; }
/* pleine largeur CENTRÉE par la boîte elle-même (13/08) : la boîte fait
   100vw et se centre dans la colonne — plus de marges négatives en
   pourcentage, qui laissaient l'ensemble paraître décentré sur mobile */
body[data-design="c07"] .couv-nom {
  align-self: center; width: 100vw; margin: 1.05rem 0 0;
  padding: 1.8rem 1.5rem 2rem;
  background: var(--detail); color: var(--fond);
}
body[data-design="c07"][data-encre="claire"] .couv-nom { color: #fdfdfc; }
body[data-design="c07"] .couv-lieu { margin-top: 1.15rem; }
body[data-design="c07"] .couv-sur { letter-spacing: 0.3em; }

/* --- e01 · Le Billet — un ticket : tête à gauche, timbre du surtitre,
       perforations en pointillés --- */
body[data-design="e01"] { --tete-align: left; --r-carte: 10px; }
body[data-design="e01"] .ess { max-width: 27rem; }
body[data-design="e01"] .ess-tete {
  border-bottom: 2px dashed color-mix(in srgb, var(--encre) 26%, transparent);
  padding-bottom: 1.5rem;
}
body[data-design="e01"] .ess-sur {
  display: inline-block; border: 1px solid var(--filet);
  border-radius: 4px; padding: 0.22rem 0.7rem; color: var(--detail);
}
body[data-design="e01"] .ess-nom { font-size: clamp(1.7rem, 7vw, 2.2rem); }
body[data-design="e01"] .ess-item {
  border-top: 1px dashed color-mix(in srgb, var(--encre) 26%, transparent);
  padding: 1.25rem 0.2rem;
}

/* --- e02 · L'Ardoise — écrit à la craie : nom souligné à la main,
       traits pointillés épais --- */
body[data-design="e02"] .ess-nom {
  text-decoration: underline; text-decoration-style: wavy;
  text-decoration-color: var(--detail); text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
body[data-design="e02"] .ess-sur { letter-spacing: 0.3em; }
body[data-design="e02"] .ess-lab { color: var(--detail); }
body[data-design="e02"] .ess-item {
  border-top: 2px dashed color-mix(in srgb, var(--encre) 34%, transparent);
}

/* --- e03 · La Marinière — tête à gauche, trois rayures pleines sous
       la tête, labels francs --- */
body[data-design="e03"] { --tete-align: left; }
body[data-design="e03"] .ess-tete { padding-bottom: 2.1rem; }
body[data-design="e03"] .tete-deco.deco-a {
  display: block; left: 0; right: 0; bottom: 0.6rem; height: 12px;
  background: repeating-linear-gradient(to bottom, var(--detail) 0 2px, transparent 2px 5px);
}
body[data-design="e03"] .ess-lab { color: var(--detail); letter-spacing: 0.2em; font-weight: 800; }
body[data-design="e03"] .ess-nom { font-weight: 700; }

/* --- e04 · La Lavande — la tête descend, trois petits points fleuris,
       séparations en pointillés fins --- */
body[data-design="e04"] .ess { padding-top: 6rem; }
body[data-design="e04"] .ess-sur { color: var(--detail); letter-spacing: 0.32em; }
body[data-design="e04"] .ess-nom { font-weight: 500; }
body[data-design="e04"] .tete-deco.deco-a {
  display: block; left: 50%; top: -2.4rem; width: 5px; height: 5px;
  border-radius: 50%; background: var(--detail);
  box-shadow: -13px 5px 0 -1px var(--detail), 13px 5px 0 -1px var(--detail);
  transform: translateX(-50%);
}
body[data-design="e04"] .ess-item {
  border-top: 1px dotted color-mix(in srgb, var(--encre) 38%, transparent);
}

/* --- e05 · Le Comptoir — le nom en très grand, chaque rubrique dans
       son cadre --- */
body[data-design="e05"] .ess { padding-top: 5rem; }
body[data-design="e05"] .ess-nom { font-size: clamp(2.4rem, 9.5vw, 3.2rem); font-weight: 700; }
body[data-design="e05"] .ess-liste { gap: 0.85rem; }
body[data-design="e05"] .ess-item {
  border: 1px solid var(--filet); border-radius: var(--r-carte);
  padding: 1.15rem 1.05rem; background: var(--carte);
}

/* --- e06 · La Falaise — tout au bord droit, filet vertical qui suit --- */
body[data-design="e06"] { --tete-align: right; }
body[data-design="e06"] .ess { padding-top: 4rem; }
body[data-design="e06"] .ess-tete { border-right: 3px solid var(--detail); padding-right: 1.1rem; }
body[data-design="e06"] .ess-item {
  text-align: right; border-top: none;
  border-right: 2px solid color-mix(in srgb, var(--encre) 20%, transparent);
  padding-right: 1.1rem;
}
body[data-design="e06"] .ess-lab { justify-content: flex-end; }
body[data-design="e06"] .contact { justify-items: end; }

/* --- d01 · L'Éventail — coins très doux, pastilles d'icônes pleines,
       cartes qui flottent sans bord --- */
body[data-design="d01"] { --r-grande: 30px; --r-petit: 999px; --r-carte: 22px; }
body[data-design="d01"] .dep-ic { background: var(--detail); border: none; color: #fbf6ec; }
body[data-design="d01"] .dep-sur { color: var(--detail); letter-spacing: 0.28em; }
body[data-design="d01"] .dep-carte {
  border: none; background: var(--carte);
  box-shadow: 0 12px 26px -20px rgba(47, 58, 44, 0.5);
}

/* --- d02 · La Boussole — tête à gauche, chaque carte tient son cap
       par un bord gauche épais --- */
body[data-design="d02"] { --tete-align: left; }
body[data-design="d02"] .dep-mot { margin-left: 0; }
body[data-design="d02"] .dep-sur::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border: 2px solid var(--detail); border-radius: 50%;
  margin-right: 0.5rem; vertical-align: middle;
}
body[data-design="d02"] .dep-carte { border-left: 5px solid var(--detail); }
body[data-design="d02"] .dep-ic { border: 1.5px solid var(--detail); background: none; }

/* --- d03 · La Pinède — double liseré autour des cartes, icônes rondes,
       nom souligné en pointillés --- */
body[data-design="d03"] { --r-petit: 999px; }
body[data-design="d03"] .dep-cartes { gap: 1.15rem; padding: 3px; }
body[data-design="d03"] .dep-carte {
  border: 1px solid color-mix(in srgb, var(--detail) 45%, transparent);
  outline: 1px solid color-mix(in srgb, var(--detail) 25%, transparent);
  outline-offset: 3px;
}
body[data-design="d03"] .dep-ic { border: 1px solid color-mix(in srgb, var(--detail) 45%, transparent); }
body[data-design="d03"] .dep-nom {
  text-decoration: underline dotted; text-decoration-color: var(--detail);
  text-underline-offset: 0.24em; text-decoration-thickness: 2px;
}

/* --- d04 · La Céramique — frise de demi-cercles émaillés en haut de
       page, cartes ivoire --- */
body[data-design="d04"] .dep { padding-top: 2.2rem; }
body[data-design="d04"] .tete-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw);
  top: -2.2rem; height: 11px;
  background-image: radial-gradient(circle at 50% 0, var(--detail) 0 7px, transparent 7.5px);
  background-size: 20px 11px; background-repeat: repeat-x;
}
body[data-design="d04"][data-encre="sombre"] .dep-carte {
  background: #fdfaf5;
  border-color: color-mix(in srgb, var(--detail) 28%, transparent);
}
body[data-design="d04"] .dep-ic {
  background: color-mix(in srgb, var(--detail) 14%, transparent);
  border: none; color: var(--detail);
}

/* --- d05 · Le Kiosque — la gazette : surtitre entre deux filets, nom en
       capitales, gros filet en tête de chaque carte --- */
body[data-design="d05"] { --r-grande: 10px; --r-petit: 6px; --r-carte: 8px; }
body[data-design="d05"] .dep-sur {
  display: inline-block; letter-spacing: 0.26em;
  border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  padding: 0.28rem 0.85rem;
}
body[data-design="d05"] .dep-nom {
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  font-size: clamp(1.75rem, 7vw, 2.4rem);
}
body[data-design="d05"] .dep-lieu { font-style: italic; }
body[data-design="d05"] .dep-carte { border-top: 4px solid var(--detail); }
body[data-design="d05"] .dep-titre { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.9rem; }

/* --- d06 · Le Hameau — la tête dans son cadre, un toit sur chaque
       icône : des maisonnettes --- */
body[data-design="d06"] { --r-petit: 4px; }
body[data-design="d06"] .dep-tete {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: var(--r-grande);
  padding: 1.7rem 1.2rem 1.5rem; margin-bottom: 1.7rem;
}
body[data-design="d06"] .dep-ouvre { padding-top: 1.25rem; }
body[data-design="d06"] .dep-ic { position: relative; margin-top: 5px; }
body[data-design="d06"] .dep-ic::before {
  content: ''; position: absolute; left: 50%; top: -9px;
  transform: translateX(-50%);
  border-left: 17px solid transparent; border-right: 17px solid transparent;
  border-bottom: 9px solid color-mix(in srgb, var(--detail) 55%, transparent);
}

/* --- d07 · Le Patio — tête à gauche sous un arc de soleil, cartes en
       damier décalé quand la place le permet --- */
body[data-design="d07"] { --tete-align: left; }
body[data-design="d07"] .dep-mot { margin-left: 0; }
body[data-design="d07"] .tete-deco.deco-a {
  display: block; right: 2%; top: 0.2rem; width: 4.8rem; height: 2.4rem;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--detail) 82%, transparent);
}
body[data-design="d07"] .tete-deco.deco-b {
  display: block; right: calc(2% - 0.55rem); top: -0.4rem; width: 5.9rem; height: 2.95rem;
  border-radius: 999px 999px 0 0;
  border: 2px dashed color-mix(in srgb, var(--detail) 45%, transparent);
  border-bottom: none;
}
body[data-design="d07"] .dep-ic { background: color-mix(in srgb, var(--detail) 15%, transparent); border: none; }
/* le damier, pensé MOBILE (sa règle : « principalement le mobile ») :
   les cartes se décalent une fois sur deux */
body[data-design="d07"] .dep-carte:nth-child(odd) { margin-right: 9%; }
body[data-design="d07"] .dep-carte:nth-child(even) { margin-left: 9%; }

/* ============ Les 20 modèles des 2e et 3e abonnements (13/08) ============
   Mêmes règles que les 20 premiers : variables-crochets, encre automatique,
   pensés mobile. c08-c14 petits livres · e07-e12 une page · d08-d14 dépliants. */

/* --- c08 · L'Opéra — le nom en scène entre deux filets pleins,
       surtitre doré espacé, chapitres centrés (typo Playfair, plus bas) --- */
body[data-design="c08"] .couv-filet { display: none; }
body[data-design="c08"] .couv-sur { color: var(--detail); letter-spacing: 0.42em; font-size: 0.66rem; }
body[data-design="c08"] .couv-nom {
  align-self: stretch;
  padding: 1.15rem 0 1.3rem; margin-top: 1.1rem;
  border-top: 3px solid var(--encre); border-bottom: 3px solid var(--encre);
}
body[data-design="c08"] .couv-lieu { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; }
body[data-design="c08"] .couv-mot { margin-top: 1.3rem; }
body[data-design="c08"] .chap-titre { display: block; text-align: center; }
body[data-design="c08"] .chap-titre::before {
  content: ''; display: block; width: 34px; height: 2px;
  margin: 0 auto 0.6rem; background: var(--detail); border-radius: 999px;
}

/* --- c09 · La Reliure — la tranche : une bande accent au bord gauche,
       le nom debout dessus (écriture verticale), le reste à droite --- */
body[data-design="c09"] { --couv-x: flex-end; --couv-texte: right; --tete-align: right; }
body[data-design="c09"] .couv { padding-left: 2.8rem; }
body[data-design="c09"] .couv-deco.deco-a {
  display: block; left: calc(50% - 50vw); top: 0; bottom: 0; width: 3.4rem;
  background: var(--detail); z-index: 0;
}
body[data-design="c09"] .couv-nom {
  position: absolute; left: calc(50% - 50vw); top: 2.2rem;
  width: 3.4rem; max-height: 74svh; overflow: hidden;
  writing-mode: vertical-rl;
  margin: 0; padding: 0.4rem 0;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem); line-height: 3.4rem;
  color: var(--fond); text-align: left;
}
body[data-design="c09"][data-encre="claire"] .couv-nom { color: #fdfdfc; }
body[data-design="c09"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c09"] .couv-lieu { font-size: 1.15rem; }
body[data-design="c09"] .couv-filet { margin-left: auto; }
body[data-design="c09"] .chap {
  border-left: 4px solid color-mix(in srgb, var(--detail) 55%, transparent);
  padding-left: 1.05rem;
}
body[data-design="c09"] .chap-titre::before { display: none; }

/* --- c10 · L'Almanach — surtitre entre deux traits, nom serré,
       chapitres numérotés en carrés pleins --- */
body[data-design="c10"] { --r-carte: 10px; --r-grande: 12px; --r-petit: 6px; --filet-l: 120px; --filet-h: 1px; }
body[data-design="c10"] .couv-sur {
  display: inline-block; padding: 0.34rem 0.2rem;
  border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre);
  letter-spacing: 0.3em;
}
body[data-design="c10"] .couv-nom { font-weight: 700; letter-spacing: -0.01em; }
body[data-design="c10"] #livret { counter-reset: alm; }
body[data-design="c10"] .chap { counter-increment: alm; }
body[data-design="c10"] .chap-titre::before {
  content: counter(alm); width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center;
  background: var(--detail); color: var(--fond); border-radius: 6px;
  font-size: 0.85rem; font-weight: 700;
}
body[data-design="c10"][data-encre="claire"] .chap-titre::before { color: #f5ead8; }

/* --- c11 · La Véranda — la couverture striée de lumière, le nom dans un
       cartouche aux coins coupés --- */
body[data-design="c11"] .couv-deco.deco-a {
  display: block; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--detail) 8%, transparent) 0 2px, transparent 2px 18px);
}
body[data-design="c11"] .couv-filet { display: none; }
body[data-design="c11"] .couv-nom {
  background: var(--fond);
  padding: 1.2rem 1.6rem 1.35rem; margin-top: 1.1rem;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
body[data-design="c11"] .couv-mot { background: var(--fond); padding: 0.6rem 0.9rem; margin-top: 1.3rem; }
body[data-design="c11"] .chap-titre::before { width: 15px; height: 9px; border-radius: 999px; transform: rotate(-24deg); }

/* --- c12 · Le Phare — capitales hautes, rayures de signal en pied de
       couverture, points-balises aux chapitres --- */
body[data-design="c12"] { --couv-y: flex-end; }
body[data-design="c12"] .couv { padding-bottom: 6.4rem; }
body[data-design="c12"] .couv-nom {
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.9rem);
}
body[data-design="c12"] .couv-sur { letter-spacing: 0.34em; color: var(--detail); }
body[data-design="c12"] .couv-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: 2.6rem;
  background: repeating-linear-gradient(45deg, var(--detail) 0 16px, transparent 16px 32px);
}
body[data-design="c12"] .couv .copyright { bottom: 3rem; }
body[data-design="c12"] .chap-titre::before { width: 12px; height: 12px; border-radius: 50%; }

/* --- c13 · Le Manoir — un grand nom léger sous un ornement croisé,
       des filets à peine posés (typo Cormorant, plus bas) --- */
body[data-design="c13"] { --filet-l: 150px; --filet-h: 1px; }
body[data-design="c13"] .couv-sur { letter-spacing: 0.34em; }
body[data-design="c13"] .couv-nom { font-weight: 500; font-size: clamp(2.5rem, 10vw, 3.6rem); }
body[data-design="c13"] .couv-deco.deco-a {
  display: block; left: 50%; top: 12svh; width: 28px; height: 28px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid var(--detail);
}
body[data-design="c13"] .couv-deco.deco-b {
  display: block; left: 50%; top: calc(12svh + 9px); width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: color-mix(in srgb, var(--detail) 45%, transparent);
}
body[data-design="c13"] .couv-filet { box-shadow: 0 4px 0 color-mix(in srgb, var(--detail) 55%, transparent); }
body[data-design="c13"] .chap-titre { font-weight: 500; }

/* --- c14 · La Cabane — un toit dessiné au-dessus du nom, du kraft,
       des soulignés francs --- */
body[data-design="c14"] { --r-carte: 7px; --r-grande: 9px; --r-petit: 5px; }
body[data-design="c14"] .couv-filet { display: none; }
body[data-design="c14"] .couv-nom::before {
  content: ''; display: block; width: 76px; height: 40px;
  margin: 0 auto 1.05rem;
  clip-path: polygon(50% 0, 100% 100%, 85% 100%, 50% 24%, 15% 100%, 0 100%);
  background: var(--detail);
}
body[data-design="c14"] .couv-mot { margin-top: 1.4rem; }
body[data-design="c14"] .chap-titre {
  display: block; padding-bottom: 0.5rem;
  border-bottom: 3px dashed color-mix(in srgb, var(--detail) 60%, transparent);
}
body[data-design="c14"] .chap-titre::before { display: none; }

/* --- e07 · Le Télégramme — petites capitales espacées, la tête sous
       double cadre, séparations en lignes doubles. Sans photo. --- */
body[data-design="e07"] .ess-tete {
  border: 1px solid var(--encre);
  outline: 1px solid var(--encre); outline-offset: 4px;
  padding: 1.7rem 1.1rem; margin-bottom: 0.7rem;
}
body[data-design="e07"] .ess-sur { letter-spacing: 0.42em; color: var(--detail); }
body[data-design="e07"] .ess-nom {
  text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
  font-size: clamp(1.35rem, 5.5vw, 1.8rem);
}
body[data-design="e07"] .ess-lieu { text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.76rem; }
body[data-design="e07"] .ess-item { border-top: 4px double color-mix(in srgb, var(--encre) 40%, transparent); }
body[data-design="e07"] .ess-lab { letter-spacing: 0.26em; }

/* --- e08 · La Guinguette — des fanions sous la tête, des puces fanion
       (typo Amatic, plus bas) --- */
body[data-design="e08"] .ess-tete { padding-bottom: 2.6rem; }
body[data-design="e08"] .tete-deco.deco-a {
  display: block; left: -4px; right: -4px; bottom: 0.7rem; height: 13px;
  background-image: conic-gradient(from -35deg at 50% 100%, var(--detail) 0 70deg, transparent 70deg);
  background-size: 20px 13px; background-position: 50% 0; background-repeat: repeat-x;
}
body[data-design="e08"] .ess-lab::before {
  content: ''; width: 10px; height: 12px; flex: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--detail);
}
body[data-design="e08"] .ess-item { border-top: 1px solid color-mix(in srgb, var(--detail) 35%, transparent); }

/* --- e09 · Le Paquebot — le demi-soleil art déco en rayons au-dessus
       de la tête, tout en géométrie (typo Josefin, plus bas) --- */
body[data-design="e09"] .ess { padding-top: 2.6rem; }
body[data-design="e09"] .ess-tete { padding-top: 8.6rem; }
body[data-design="e09"] .tete-deco.deco-a {
  display: block; left: 50%; top: 0;
  width: min(74vw, 16rem); height: min(37vw, 8rem);
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: repeating-conic-gradient(from -90deg at 50% 100%,
    color-mix(in srgb, var(--detail) 26%, transparent) 0 10deg, transparent 10deg 20deg);
}
body[data-design="e09"] .ess-sur { letter-spacing: 0.5em; }
body[data-design="e09"] .ess-item { border-top: 4px double color-mix(in srgb, var(--detail) 45%, transparent); }
body[data-design="e09"] .ess-lab { letter-spacing: 0.3em; }

/* --- e10 · L'Herbier — une tige verticale le long de la liste, une
       petite feuille à chaque label --- */
body[data-design="e10"] { --tete-align: left; }
body[data-design="e10"] .ess-nom { font-style: italic; font-weight: 500; }
body[data-design="e10"] .ess-liste {
  border-left: 2px solid color-mix(in srgb, var(--detail) 55%, transparent);
  padding-left: 1.15rem;
}
body[data-design="e10"] .ess-item { border-top: none; padding: 1.1rem 0.2rem; position: relative; }
body[data-design="e10"] .ess-item::before {
  content: ''; position: absolute; left: calc(-1.15rem - 15px); top: 1.35rem;
  width: 13px; height: 8px;
  background: var(--detail);
  border-radius: 2px 999px 2px 999px;
  transform: rotate(-30deg);
}
body[data-design="e10"] .ess-item:nth-child(even)::before { transform: rotate(-150deg); }

/* --- e11 · La Céruse — l'ultra-pâle : de l'air, un point, rien d'autre --- */
body[data-design="e11"] .ess { padding-top: 5.2rem; }
body[data-design="e11"] .ess-tete { padding-bottom: 3rem; }
body[data-design="e11"] .ess-sur { color: color-mix(in srgb, var(--encre) 45%, transparent); letter-spacing: 0.32em; }
body[data-design="e11"] .ess-nom { font-weight: 500; }
body[data-design="e11"] .ess-item { border-top: none; padding: 1.55rem 0.2rem; }
body[data-design="e11"] .ess-lab { color: color-mix(in srgb, var(--encre) 42%, transparent); letter-spacing: 0.2em; }
body[data-design="e11"] .ess-lab::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--detail);
}
body[data-design="e11"] .ess-texte { line-height: 1.85; }

/* --- e12 · L'Estivale — la pastille soleil derrière la tête, des
       cartes chaudes (typo Pacifico, plus bas) --- */
body[data-design="e12"] .ess { padding-top: 4.6rem; }
body[data-design="e12"] .ess-tete { position: relative; }
body[data-design="e12"] .tete-deco.deco-a {
  display: block; left: 50%; top: -2.2rem;
  width: min(64vw, 13.5rem); height: min(64vw, 13.5rem);
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--detail) 0 7.5deg, transparent 7.5deg 15deg);
  opacity: 0.14;
}
body[data-design="e12"] .ess-liste { display: grid; gap: 0.8rem; }
body[data-design="e12"] .ess-item {
  border-top: none; background: var(--carte);
  border: 1px solid var(--filet); border-radius: var(--r-grande);
  padding: 1.1rem 1.05rem;
}

/* --- d08 · Le Bistrot — la tête sur nappe vichy, des cartes-étiquettes
       de menu à bord double --- */
body[data-design="d08"] .dep-tete {
  padding: 1.7rem 1rem 1.9rem; margin-bottom: 1.6rem;
  border-radius: var(--r-grande);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--detail) 9%, transparent) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--detail) 9%, transparent) 0 12px, transparent 12px 24px);
}
body[data-design="d08"] .dep-nom { font-weight: 700; }
body[data-design="d08"] .dep-carte {
  border: 1px solid color-mix(in srgb, var(--detail) 42%, transparent);
  outline: 1px solid color-mix(in srgb, var(--detail) 42%, transparent);
  outline-offset: -5px;
}

/* --- d09 · L'Établi — le bleu de travail : coutures apparentes,
       étiquette cousue penchée --- */
body[data-design="d09"] { --r-grande: 12px; --r-carte: 9px; }
body[data-design="d09"] .dep-sur {
  display: inline-block; transform: rotate(-2.5deg);
  background: var(--detail); color: var(--fond);
  padding: 0.32rem 0.9rem; border-radius: 4px; letter-spacing: 0.22em;
}
body[data-design="d09"][data-encre="claire"] .dep-sur { color: #f5ead8; }
body[data-design="d09"] .dep-carte {
  border: 1px solid color-mix(in srgb, var(--detail) 50%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--detail) 45%, transparent);
  outline-offset: -7px;
}
body[data-design="d09"] .dep-ic { border: 1.5px dashed color-mix(in srgb, var(--detail) 55%, transparent); background: none; }

/* --- d10 · La Marelle — chaque carte porte son numéro, qui change de
       côté une carte sur deux --- */
body[data-design="d10"] { --r-grande: 24px; --r-petit: 12px; }
body[data-design="d10"] #livret { counter-reset: marelle; }
body[data-design="d10"] .dep-cartes { gap: 1.2rem; }
body[data-design="d10"] .dep-carte { counter-increment: marelle; position: relative; overflow: visible; }
body[data-design="d10"] .dep-carte::before {
  content: counter(marelle);
  position: absolute; top: -10px; left: 16px; z-index: 1;
  min-width: 1.65rem; height: 1.65rem; padding: 0 0.35rem;
  display: grid; place-items: center;
  background: var(--detail); color: var(--fond);
  border-radius: 11px;
  font: 700 0.85rem 'Baloo 2', sans-serif;
}
body[data-design="d10"] .dep-carte:nth-child(even)::before { left: auto; right: 16px; }
body[data-design="d10"][data-encre="claire"] .dep-carte::before { color: #f5ead8; }
body[data-design="d10"] .dep-corps { border-top-color: color-mix(in srgb, var(--detail) 30%, transparent); }

/* --- d11 · Le Pressoir — la cave : bordeaux sombre, filets cuivrés --- */
body[data-design="d11"] .dep-tete { padding-bottom: 2.4rem; }
body[data-design="d11"] .dep-sur { color: var(--detail); letter-spacing: 0.32em; }
body[data-design="d11"] .tete-deco.deco-a {
  display: block; left: 20%; right: 20%; bottom: 0.75rem; height: 6px;
  border-top: 1px solid var(--detail);
  border-bottom: 1px solid color-mix(in srgb, var(--detail) 50%, transparent);
}
body[data-design="d11"] .dep-carte { border: 1px solid color-mix(in srgb, var(--detail) 45%, transparent); }
body[data-design="d11"] .dep-ic { border-color: color-mix(in srgb, var(--detail) 50%, transparent); background: none; color: var(--detail); }
body[data-design="d11"] .dep-chevron { border-color: var(--detail); }

/* --- d12 · Le Colombier — gris colombe épuré, un coin plié sur chaque
       carte --- */
body[data-design="d12"] { --r-grande: 14px; }
body[data-design="d12"] .dep-nom { font-weight: 500; }
body[data-design="d12"] .dep-tete { padding-bottom: 2.4rem; }
body[data-design="d12"] .dep-carte { position: relative; }
body[data-design="d12"] .dep-carte::after {
  content: ''; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 24px 24px 0;
  border-color: var(--fond) var(--fond) transparent transparent;
  filter: drop-shadow(-2px 2px 1px rgba(47, 58, 44, 0.07));
}
body[data-design="d12"] .dep-ic { background: color-mix(in srgb, var(--detail) 10%, transparent); border: none; }

/* --- d13 · La Moisson — des épis dans la tête, une carte sur deux
       dorée --- */
body[data-design="d13"] .dep-tete { padding-bottom: 2.6rem; }
body[data-design="d13"] .tete-deco.deco-a {
  display: block; left: 50%; bottom: 0.55rem; width: 8.5rem; height: 14px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(65deg, var(--detail) 0 3px, transparent 3px 12px);
}
body[data-design="d13"] .dep-carte:nth-child(odd) { background: color-mix(in srgb, var(--detail) 8%, var(--carte)); }
body[data-design="d13"] .dep-ic { background: color-mix(in srgb, var(--detail) 16%, transparent); border: none; }

/* --- d14 · Le Belvédère — la ligne d'horizon sous la tête, des cartes
       larges et calmes aux seuls filets horizontaux --- */
body[data-design="d14"] .dep-tete { padding-bottom: 3.4rem; margin-bottom: 1.4rem; }
body[data-design="d14"] .tete-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: 2.4rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: color-mix(in srgb, var(--detail) 18%, transparent);
}
body[data-design="d14"] .dep-cartes { gap: 0.7rem; }
body[data-design="d14"] .dep-carte {
  border-left: none; border-right: none; background: var(--carte);
}
body[data-design="d14"] .dep-ouvre { padding: 0.85rem 1.2rem; }

/* ============ Les 10 modèles à thème (13/08, dictés) ============
   3 moyen âge · 3 méditerranéens · 3 niche · 1 ultra niche. Couleurs
   PLEINES, sans color-mix (leçon du contour : rien de décisif ne repose
   sur une fonction récente). */

/* --- c15 · Le Donjon (moyen âge) — créneaux en tête, bannière plantée,
       losanges héraldiques (typo Uncial, plus bas) --- */
body[data-design="c15"] { --filet-l: 64px; --filet-h: 3px; --r-carte: 8px; --r-grande: 10px; --r-petit: 5px; }
body[data-design="c15"] .couv { padding-top: 8.5rem; }
body[data-design="c15"] .couv-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: 1.15rem;
  background: repeating-linear-gradient(90deg, var(--detail) 0 22px, transparent 22px 44px);
}
body[data-design="c15"] .couv-deco.deco-b {
  display: block; left: 50%; top: 1.1rem; width: 3rem; height: 7.4rem;
  transform: translateX(-50%);
  background: var(--detail);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
body[data-design="c15"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c15"] .chap-titre::before { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 2px; }

/* --- d15 · La Tapisserie (moyen âge) — liserés brodés en pointillés
       pleins, lettrine rouge terre --- */
body[data-design="d15"] { --r-grande: 6px; --r-carte: 5px; --r-petit: 4px; }
body[data-design="d15"] .dep-tete {
  border-top: 3px dashed var(--detail); border-bottom: 3px dashed var(--detail);
  padding: 1.6rem 0.6rem 1.8rem; margin-bottom: 1.7rem;
}
body[data-design="d15"] .dep-nom::first-letter { color: var(--detail); }
body[data-design="d15"] .dep-cartes { gap: 1.2rem; padding: 4px; }
body[data-design="d15"] .dep-carte {
  border: 1px solid var(--detail);
  outline: 2px dashed var(--detail); outline-offset: 3px;
}
body[data-design="d15"] .dep-ic { border: 1px solid var(--detail); background: none; color: var(--detail); }

/* --- e13 · Le Parchemin (moyen âge) — double cadre d'archives, lettrine,
       ornements en losange entre les rubriques --- */
body[data-design="e13"] { --r-carte: 6px; }
body[data-design="e13"] .ess-tete {
  border: 1px solid var(--detail);
  outline: 1px solid var(--detail); outline-offset: 5px;
  padding: 1.9rem 1.2rem; margin: 6px 6px 1.1rem;
}
body[data-design="e13"] .ess-nom::first-letter { color: var(--detail); font-size: 1.22em; }
body[data-design="e13"] .ess-sur { letter-spacing: 0.32em; }
body[data-design="e13"] .ess-item { border-top: none; position: relative; padding-top: 1.7rem; text-align: center; }
body[data-design="e13"] .ess-item::before {
  content: ''; position: absolute; top: 0.6rem; left: 50%;
  width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: var(--detail);
}
body[data-design="e13"] .ess-lab { justify-content: center; letter-spacing: 0.22em; }

/* --- d16 · L'Azulejos (méditerranéen) — frise en damier de carreaux,
       petit carreau au coin de chaque carte --- */
body[data-design="d16"] { --r-petit: 4px; --r-carte: 8px; --r-grande: 10px; }
body[data-design="d16"] .dep { padding-top: 4.4rem; }
body[data-design="d16"] .dep-tete { padding-bottom: 2rem; }
body[data-design="d16"] .tete-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw); top: -2.9rem; height: 16px;
  background: conic-gradient(var(--detail) 25%, transparent 0 50%, var(--detail) 0 75%, transparent 0) 0 0 / 16px 16px;
}
body[data-design="d16"] .dep-carte { border: 1px solid var(--detail); position: relative; }
body[data-design="d16"] .dep-carte::before {
  content: ''; position: absolute; top: 11px; right: 11px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--detail);
}
body[data-design="d16"] .dep-ic { border: 1px solid var(--detail); background: none; color: var(--detail); }

/* --- e14 · La Crique (méditerranéen) — des vagues sous la tête, des
       vaguelettes entre les rubriques, la photo en galet --- */
body[data-design="e14"] .ess-tete { padding-bottom: 2.8rem; }
body[data-design="e14"] .tete-deco.deco-a {
  display: block; left: 10%; right: 10%; bottom: 0.85rem; height: 12px;
  background: radial-gradient(circle at 50% 130%, transparent 6px, var(--detail) 6px 8px, transparent 8px) 0 0 / 24px 12px repeat-x;
}
body[data-design="e14"] .ess-nom { font-weight: 600; }
body[data-design="e14"] .ess-item { border-top: none; position: relative; padding-top: 1.6rem; }
body[data-design="e14"] .ess-item::before {
  content: ''; position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%);
  width: 66px; height: 8px;
  background: radial-gradient(circle at 50% 140%, transparent 4px, var(--detail) 4px 6px, transparent 6px) 0 0 / 22px 8px repeat-x;
}

/* --- c16 · La Pergola (méditerranéen) — l'ombre des lattes en tête de
       couverture, filets ronds et chauds --- */
body[data-design="c16"] { --filet-l: 70px; --filet-h: 5px; }
body[data-design="c16"] .couv { padding-top: 6.2rem; }
body[data-design="c16"] .couv-deco.deco-a {
  display: block; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: 7.5rem;
  background: repeating-linear-gradient(58deg, var(--detail) 0 10px, transparent 10px 34px);
  opacity: 0.16;
}
body[data-design="c16"] .couv-filet { border-radius: 999px; }
body[data-design="c16"] .chap-titre::before { width: 22px; height: 5px; border-radius: 999px; }

/* --- e15 · L'Observatoire (niche) — la nuit criblée d'étoiles, labels
       à étoile à quatre branches --- */
body[data-design="e15"] .ess { padding-top: 4.6rem; }
body[data-design="e15"] .ess-tete { padding-bottom: 2.4rem; }
body[data-design="e15"] .tete-deco.deco-a {
  display: block; inset: -2.8rem -12% 0;
  background-image:
    radial-gradient(circle, var(--detail) 1.6px, transparent 2.2px),
    radial-gradient(circle, var(--detail) 1px, transparent 1.5px),
    radial-gradient(circle, var(--detail) 0.8px, transparent 1.2px);
  background-size: 170px 130px, 110px 90px, 70px 60px;
  background-position: 20px 10px, 60px 40px, 10px 25px;
  opacity: 0.65;
}
body[data-design="e15"] .ess-sur { letter-spacing: 0.44em; color: var(--detail); }
body[data-design="e15"] .ess-nom { font-weight: 500; letter-spacing: 0.06em; }
body[data-design="e15"] .ess-lab::before {
  content: ''; width: 10px; height: 10px; flex: none;
  background: var(--detail);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* --- d17 · La Séance (niche) — le cadre à ampoules du cinéma, des
       cartes-billets perforées (typo Limelight, plus bas) --- */
body[data-design="d17"] .dep-tete {
  border: 3px solid var(--detail);
  outline: 3px dotted var(--detail); outline-offset: -10px;
  border-radius: var(--r-grande);
  padding: 2rem 1.2rem; margin-bottom: 1.7rem;
}
body[data-design="d17"] .dep-sur { letter-spacing: 0.34em; }
body[data-design="d17"] .dep-carte { border: 1px solid var(--detail); border-left: 2px dashed var(--detail); }
body[data-design="d17"] .dep-ic { background: none; border: 1px solid var(--detail); color: var(--detail); }

/* --- c17 · Le Wagon (niche) — la plaque de laiton vissée aux coins,
       chapitres soulignés au double filet --- */
body[data-design="c17"] { --filet-l: 90px; --filet-h: 2px; --r-carte: 10px; --r-grande: 12px; --r-petit: 6px; }
body[data-design="c17"] .couv-sur { letter-spacing: 0.4em; }
body[data-design="c17"] .couv-nom {
  border: 2px solid var(--detail); border-radius: var(--r-carte);
  padding: 1.15rem 2.1rem 1.3rem; margin-top: 1.1rem;
  background-image:
    radial-gradient(circle, var(--detail) 2.4px, transparent 3px),
    radial-gradient(circle, var(--detail) 2.4px, transparent 3px),
    radial-gradient(circle, var(--detail) 2.4px, transparent 3px),
    radial-gradient(circle, var(--detail) 2.4px, transparent 3px);
  background-size: 8px 8px; background-repeat: no-repeat;
  background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
}
body[data-design="c17"] .couv-lieu { text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.78rem; margin-top: 1rem; }
body[data-design="c17"] .chap-titre { display: block; padding-bottom: 0.5rem; border-bottom: 4px double var(--detail); }
body[data-design="c17"] .chap-titre::before { display: none; }

/* --- e16 · La Borne (ULTRA niche) — l'arcade : cadre épais, ombre en
       escalier, curseur ▶ (typo Press Start, plus bas) --- */
body[data-design="e16"] { --r-carte: 2px; --r-grande: 4px; --r-petit: 2px; }
body[data-design="e16"] .ess { padding-top: 4.4rem; }
body[data-design="e16"] .ess-tete {
  border: 4px solid var(--detail);
  padding: 1.8rem 1rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
  margin-bottom: 1.4rem;
}
body[data-design="e16"] .ess-sur { letter-spacing: 0.3em; color: var(--detail); }
body[data-design="e16"] .ess-item { border-top: 4px dashed var(--detail); }
body[data-design="e16"] .ess-lab::before {
  content: ''; width: 10px; height: 12px; flex: none;
  background: var(--detail);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ============ LE CATALOGUE, fournée 1 : les 15 intemporels (13/08) ============
   Les premiers modèles PAYANTS à l'unité (catalogue: true dans
   modeles.js — l'étape 2 ne les montre pas, ils vivent au catalogue de
   Mon espace). Sa dictée : des classiques « polyvalents et très solides
   au niveau du design ». Un design sobre n'a nulle part où se cacher :
   chaque bloc tient par UN geste signature, fini au millimètre — le
   registre des gestes (fonctions.cc) garantit qu'aucun ne se répète.
   Mêmes règles gravées : mobile d'abord, encre auto, contour 2px plein
   des boutons, et AUCUN color-mix (même décoratif) dans ces blocs. */

/* --- c18 · La Demeure (intemporel) — la référence d'édition : grandes
       capitales espacées, un filet au-DESSUS de chaque titre de chapitre
       (les chiffres romains appartiennent à Minuit), rien qui dépasse --- */
body[data-design="c18"] { --filet-l: 44px; --filet-h: 2px; --r-carte: 8px; --r-grande: 10px; --r-petit: 5px; }
body[data-design="c18"] .couv { padding-top: 4.6rem; }
body[data-design="c18"] .couv-sur { letter-spacing: 0.44em; font-size: 0.66rem; }
body[data-design="c18"] .couv-nom {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 500; font-size: clamp(1.7rem, 6.8vw, 2.3rem); line-height: 1.3;
}
body[data-design="c18"] .couv-lieu { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; margin-top: 0.9rem; }
body[data-design="c18"] .chap-titre {
  display: block; padding-top: 0.7rem;
  border-top: 1px solid var(--detail);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 1.05rem; font-weight: 600;
}
body[data-design="c18"] .chap-titre::before { display: none; }

/* (c19 Le Perron a vécu — remplacé par « Les couleurs », sa correction
   du 13/08 au soir ; sa clé n'est jamais réutilisée) */

/* --- c20 · La Galerie (intemporel) — la photo en ŒUVRE, immense en
       tête ; le nom en petites capitales dessous, aucun filet --- */
body[data-design="c20"] { --couv-y: flex-start; }
body[data-design="c20"] .couv { padding-top: 1.6rem; }
body[data-design="c20"] .couv-filet { display: none; }
body[data-design="c20"] .couv-sur { letter-spacing: 0.4em; font-size: 0.62rem; color: var(--detail); }
body[data-design="c20"] .couv-nom {
  text-transform: uppercase; letter-spacing: 0.22em;
  font-weight: 500; font-size: clamp(1.15rem, 5vw, 1.6rem);
}
body[data-design="c20"] .couv-lieu { font-size: 0.85rem; }
body[data-design="c20"] .chap-titre { display: block; font-style: italic; font-weight: 500; font-size: 1.3rem; }
body[data-design="c20"] .chap-titre::before { display: none; }

/* --- c21 · L'Écritoire (intemporel) — la plume : lignes de cahier sous
       les titres, lettrine discrète (EB Garamond, section typo) --- */
body[data-design="c21"] { --filet-l: 60px; --filet-h: 1px; }
body[data-design="c21"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c21"] .chap-titre {
  display: block; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--detail);
}
body[data-design="c21"] .chap-titre::after {
  content: ''; display: block; width: 34%; height: 1px;
  background: var(--detail); margin-top: 4px; opacity: 0.55;
}
body[data-design="c21"] .chap-titre::before { display: none; }
body[data-design="c21"] .chap-texte::first-letter { font-size: 1.45em; font-weight: 500; color: var(--detail); }

/* --- c22 · Le Salon (intemporel) — les chapitres en cartes feutrées,
       les boutons en APLAT accent (le seul geste plein des classiques) --- */
body[data-design="c22"] { --r-carte: 14px; --r-grande: 16px; --r-petit: 10px; }
body[data-design="c22"] .couv-filet { display: none; }
body[data-design="c22"] .couv-sur { color: var(--detail); letter-spacing: 0.3em; }
body[data-design="c22"] .couv-nom { font-weight: 500; }
body[data-design="c22"] .chap {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: var(--r-grande);
  padding: 1.7rem 1.3rem 1.5rem; margin-bottom: 1.2rem;
}
body[data-design="c22"] .chap-titre::before { border-radius: 999px; width: 10px; height: 10px; }

/* --- e17 · La Clé (intemporel) — le minimal parfait : un tiret long
       devant chaque label, le nom en grand corps léger, rien d'autre --- */
body[data-design="e17"] .ess { padding-top: 5rem; max-width: 26rem; }
body[data-design="e17"] .ess-sur { letter-spacing: 0.34em; }
body[data-design="e17"] .ess-nom { font-weight: 400; font-size: clamp(2.1rem, 8.5vw, 2.8rem); }
body[data-design="e17"] .ess-item { border-top: none; padding: 1.15rem 0.2rem; }
body[data-design="e17"] .ess-lab::before {
  content: ''; width: 26px; height: 2px; flex: none;
  background: var(--detail);
}

/* (e18 Le Seuil a vécu — remplacé par « Les couleurs ») */

/* --- e19 · Le Carnet (intemporel) — le quadrillage très pâle d'un
       carnet (le filet, déjà réglé sur l'encre), le nom souligné double --- */
body[data-design="e19"] .ess {
  background-image:
    repeating-linear-gradient(0deg, var(--filet) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 28px);
}
body[data-design="e19"] .ess-nom {
  display: inline-block; padding-bottom: 0.35rem;
  border-bottom: 3px double var(--detail);
}
body[data-design="e19"] .ess-lab { color: var(--detail); }

/* (e20 Les Volets a vécu — remplacé par « Les couleurs ») */

/* --- e21 · Le Pavillon (intemporel) — le nom dans un MÉDAILLON à fine
       bordure, des puces rondes pleines --- */
body[data-design="e21"] .ess { padding-top: 4.2rem; }
body[data-design="e21"] .ess-tete { padding-bottom: 2.4rem; }
body[data-design="e21"] .ess-sur { letter-spacing: 0.3em; margin-bottom: 0.5rem; }
body[data-design="e21"] .ess-nom {
  display: inline-block;
  border: 1px solid var(--detail); border-radius: 999px;
  padding: 0.95rem 1.7rem;
  font-size: clamp(1.5rem, 6vw, 1.9rem);
}
body[data-design="e21"] .ess-lab::before {
  content: ''; width: 9px; height: 9px; flex: none;
  background: var(--detail); border-radius: 50%;
}

/* --- d18 · La Terrasse (intemporel) — des cartes qui se DÉTACHENT :
       vraie ombre portée douce, aucun bord, fond sable --- */
body[data-design="d18"] { --r-grande: 14px; --r-petit: 9px; --r-carte: 12px; }
body[data-design="d18"] .dep-cartes { gap: 1.1rem; padding: 2px 2px 10px; }
body[data-design="d18"] .dep-carte {
  border: none;
  box-shadow: 0 10px 24px rgba(47, 58, 44, 0.13), 0 2px 6px rgba(47, 58, 44, 0.08);
}

/* (d19 La Cour et d20 Le Porche ont vécu — remplacés par « Les
   couleurs ») */

/* --- d21 · Le Jardin d'hiver (intemporel) — les MONTANTS de la serre
       aux deux bords de chaque carte, vert d'eau très calme --- */
body[data-design="d21"] { --r-grande: 6px; --r-petit: 4px; --r-carte: 6px; }
body[data-design="d21"] .dep-carte {
  border-left: 3px solid var(--detail);
  border-right: 3px solid var(--detail);
}
body[data-design="d21"] .dep-ic { border: 1px solid var(--detail); background: none; }

/* --- d22 · La Malle (intemporel) — les coins RENFORCÉS du bagage aux
       angles des cartes, l'étiquette de voyage dans la tête --- */
body[data-design="d22"] { --r-grande: 4px; --r-petit: 3px; --r-carte: 4px; }
body[data-design="d22"] .dep-carte { position: relative; border: 1px solid var(--detail); }
body[data-design="d22"] .dep-carte::before,
body[data-design="d22"] .dep-carte::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
body[data-design="d22"] .dep-carte::before {
  top: 0; left: 0;
  border-top: 4px solid var(--detail); border-left: 4px solid var(--detail);
}
body[data-design="d22"] .dep-carte::after {
  bottom: 0; right: 0;
  border-bottom: 4px solid var(--detail); border-right: 4px solid var(--detail);
}
body[data-design="d22"] .dep-sur {
  display: inline-block;
  border: 1px solid var(--detail); border-radius: 3px;
  padding: 0.32rem 0.7rem 0.26rem;
}

/* ============ LE CATALOGUE — « Les couleurs » (13/08, sa correction) ============
   Sa demande au rendu : cinq intemporels laissent place à une collection
   portée par la COULEUR — cinq fonds FRANCS, l'encre automatique fait le
   reste. Blocs courts À DESSEIN : ici, la couleur EST le design. */

/* --- c35 · L'Indigo — le bleu de nuit profond, l'écriture et les
       filets crème (l'accent est la couleur claire) --- */
body[data-design="c35"] { --filet-l: 70px; --filet-h: 2px; }
body[data-design="c35"] .couv-sur { color: var(--detail); letter-spacing: 0.34em; }
body[data-design="c35"] .couv-nom { font-weight: 500; }
body[data-design="c35"] .chap-titre::before { width: 22px; height: 2px; }

/* --- e34 · Le Coquelicot — le rouge franc, un cœur noir devant chaque
       label --- */
body[data-design="e34"] .ess { padding-top: 4.8rem; }
body[data-design="e34"] .ess-nom { font-weight: 700; }
body[data-design="e34"] .ess-lab::before {
  content: ''; width: 10px; height: 10px; flex: none;
  background: var(--detail); border-radius: 50%;
}

/* --- e35 · Le Mimosa — le jaune joyeux, une grappe de trois grains
       près du nom --- */
body[data-design="e35"] .ess-tete { position: relative; }
body[data-design="e35"] .tete-deco.deco-a {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--detail); right: 10%; top: 0.2rem;
  box-shadow: 14px 10px 0 -2px var(--detail), 3px 20px 0 -4px var(--detail);
}
body[data-design="e35"] .ess-lab { font-weight: 800; letter-spacing: 0.2em; }

/* --- d34 · La Sauge — le vert doux, des cartes nettes bordées de
       profond --- */
body[data-design="d34"] { --r-grande: 12px; --r-petit: 8px; --r-carte: 10px; }
body[data-design="d34"] .dep-carte { border: 2px solid var(--detail); }
body[data-design="d34"] .dep-ic { border: 1px solid var(--detail); background: none; border-radius: 50%; }

/* --- d35 · La Figue — le violet profond, la chair rosée en liserés --- */
body[data-design="d35"] { --r-grande: 14px; --r-petit: 9px; --r-carte: 12px; }
body[data-design="d35"] .dep-carte { border: 1px solid var(--detail); }
body[data-design="d35"] .dep-sur { color: var(--detail); letter-spacing: 0.3em; }
body[data-design="d35"] .dep-ic { border: 1px solid var(--detail); background: none; }

/* ============ LE CATALOGUE, fournées 2 et 3 : les 35 à thème (13/08) ============
   Onze collections de trois modèles (une par forme) + deux hors-série —
   d'un coup sur sa consigne « tu peux attaquer le reste ». Mêmes règles :
   mobile d'abord, encre auto, contour 2px plein, pas de color-mix. Le
   registre des gestes (fonctions.cc) a arbitré chaque signature. */

/* --- c23 · Le Chalet (montagne) — une frise de sapins sous la tête,
       le bois chaud du chalet --- */
body[data-design="c23"] { --r-carte: 8px; --r-grande: 10px; --r-petit: 5px; --filet-l: 0; }
body[data-design="c23"] .couv-filet { display: none; }
body[data-design="c23"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c23"] .couv-nom { font-weight: 700; }
body[data-design="c23"] .couv-deco.deco-a {
  display: block; left: 10%; right: 10%; bottom: 12svh; height: 26px;
  background: var(--detail); opacity: 0.4;
  clip-path: polygon(0 100%, 6% 20%, 12% 100%, 19% 0, 26% 100%, 33% 25%, 40% 100%,
    47% 5%, 54% 100%, 61% 22%, 68% 100%, 75% 0, 82% 100%, 89% 18%, 96% 100%, 100% 100%);
}
body[data-design="c23"] .chap-titre { text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.25rem; }

/* --- e22 · La Laine (montagne) — un zigzag tricoté sépare les parties,
       l'écru et la terre cuite douce --- */
body[data-design="e22"] { --r-carte: 16px; }
body[data-design="e22"] .ess-nom { font-weight: 700; }
body[data-design="e22"] .ess-item { border-top: none; padding-top: 1.2rem; }
body[data-design="e22"] .ess-item::before {
  content: ''; display: block; width: 72px; height: 7px; margin-bottom: 0.8rem;
  background-image:
    linear-gradient(135deg, var(--detail) 25%, transparent 25%),
    linear-gradient(225deg, var(--detail) 25%, transparent 25%);
  background-size: 12px 7px; background-repeat: repeat-x;
  opacity: 0.6;
}

/* --- d23 · Le Refuge (montagne) — la nuit du refuge : fond sombre,
       une lanterne ambrée qui rayonne dans la tête --- */
body[data-design="d23"] { --r-grande: 8px; --r-petit: 5px; --r-carte: 7px; }
body[data-design="d23"] .tete-deco.deco-a {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--detail); left: 50%; top: -1.6rem; transform: translateX(-50%);
  box-shadow: 0 0 22px 6px rgba(224, 164, 88, 0.35);
}
body[data-design="d23"] .dep-tete { padding-top: 2.4rem; }
body[data-design="d23"] .dep-carte { border-top: 2px solid var(--detail); }

/* --- c24 · La Dune (atlantique) — le vent hachure le haut de la page,
       le nom posé en bas comme au creux du sable --- */
body[data-design="c24"] { --couv-y: flex-end; }
body[data-design="c24"] .couv { padding-bottom: 6rem; }
body[data-design="c24"] .couv-deco.deco-a {
  display: block; left: 8%; right: 8%; top: 7svh; height: 60px;
  background: repeating-linear-gradient(115deg, var(--detail) 0 1px, transparent 1px 9px);
  opacity: 0.35;
}
body[data-design="c24"] .couv-sur { letter-spacing: 0.32em; }
body[data-design="c24"] .chap-titre::before { width: 30px; height: 2px; }

/* --- e23 · La Cabine (atlantique) — les larges rayures verticales d'une
       cabine de plage derrière la tête --- */
body[data-design="e23"] .ess { padding-top: 4.6rem; }
body[data-design="e23"] .ess-tete { padding: 1.3rem 1rem 1.8rem; position: relative; }
body[data-design="e23"] .tete-deco.deco-a {
  display: block; inset: 0;
  background: repeating-linear-gradient(90deg, var(--detail) 0 18px, transparent 18px 44px);
  opacity: 0.14;
}
body[data-design="e23"] .ess-lab { color: var(--detail); letter-spacing: 0.18em; }

/* --- d24 · L'Embrun (atlantique) — des cartes qui déferlent : les coins
       hauts en vague, le bleu d'embrun --- */
body[data-design="d24"] { --r-grande: 26px; --r-petit: 12px; --r-carte: 18px; }
body[data-design="d24"] .dep-carte { border-radius: 26px 26px 8px 8px; }
body[data-design="d24"] .dep-sur { color: var(--detail); letter-spacing: 0.28em; }
body[data-design="d24"] .dep-ic { border: 1.5px solid var(--detail); background: none; border-radius: 50%; }

/* --- c25 · Le Mas (provence) — un quart de cadran solaire rayonne au
       coin haut de la couverture, l'ocre du mas --- */
body[data-design="c25"] .couv-deco.deco-a {
  display: block; top: 0; right: 0; width: 150px; height: 150px;
  background: repeating-conic-gradient(from 180deg at 100% 0, var(--detail) 0 3deg, transparent 3deg 14deg);
  border-bottom-left-radius: 100%;
  opacity: 0.3;
}
body[data-design="c25"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c25"] .couv-mot { margin-top: 1.4rem; }
body[data-design="c25"] .chap-titre { display: block; padding-bottom: 0.5rem; border-bottom: 2px solid var(--detail); }
body[data-design="c25"] .chap-titre::before { display: none; }

/* --- e24 · Le Cabanon (provence) — une génoise de tuiles pleines
       au-dessus de la tête, l'olive du cabanon --- */
body[data-design="e24"] .ess { padding-top: 5rem; }
body[data-design="e24"] .ess-tete { padding-top: 1.5rem; }
body[data-design="e24"] .tete-deco.deco-a {
  display: block; left: 4%; right: 4%; top: 0; height: 11px;
  background-image: radial-gradient(10px at 50% 0, var(--detail) 96%, transparent);
  background-size: 22px 11px; background-repeat: repeat-x;
  opacity: 0.75;
}
body[data-design="e24"] .ess-lab { color: var(--detail); }

/* --- d25 · Le Cyprès (provence) — une flamme de cyprès devant chaque
       titre de carte, le vert profond --- */
body[data-design="d25"] { --r-grande: 12px; --r-petit: 8px; --r-carte: 10px; }
body[data-design="d25"] .dep-titre { display: flex; align-items: center; gap: 0.5rem; }
body[data-design="d25"] .dep-titre::before {
  content: ''; width: 7px; height: 18px; flex: none;
  background: var(--detail);
  border-radius: 50% 50% 42% 42% / 68% 68% 30% 30%;
}
body[data-design="d25"] .dep-ic { border: 1px solid var(--detail); background: none; }

/* --- c26 · Le Sumi (japon) — un cercle d'encre presque fermé derrière
       le nom, l'écriture du pinceau (Shippori Mincho, section typo) --- */
body[data-design="c26"] { --filet-l: 0; }
body[data-design="c26"] .couv-filet { display: none; }
body[data-design="c26"] .couv-deco.deco-a {
  display: block; width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid var(--detail); border-top-color: transparent;
  left: 50%; top: 50%; transform: translate(-50%, -58%) rotate(35deg);
  opacity: 0.4;
}
body[data-design="c26"] .couv-sur { letter-spacing: 0.5em; font-size: 0.62rem; }
body[data-design="c26"] .chap-titre { display: block; font-size: 1.4rem; }
body[data-design="c26"] .chap-titre::before { display: none; }

/* --- e25 · Le Tatami (japon) — des items-nattes bordés haut et bas,
       le liseré d'un tatami --- */
body[data-design="e25"] .ess-tete { border-bottom: 2px solid var(--detail); padding-bottom: 1.7rem; }
body[data-design="e25"] .ess-liste { gap: 0.7rem; }
body[data-design="e25"] .ess-item {
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  padding: 1.25rem 0.3rem;
}
body[data-design="e25"] .ess-lab { letter-spacing: 0.22em; }

/* --- d26 · Le Ryokan (japon) — le sable ratissé de la tête, trois
       pierres posées --- */
body[data-design="d26"] { --r-grande: 6px; --r-petit: 4px; --r-carte: 5px; }
body[data-design="d26"] .dep-tete {
  padding: 1.6rem 1rem 2rem;
  background: repeating-linear-gradient(180deg, var(--filet) 0 1px, transparent 1px 10px);
}
body[data-design="d26"] .tete-deco.deco-a {
  display: block; width: 26px; height: 16px; border-radius: 50%;
  background: var(--detail); left: 16%; bottom: 0.6rem; opacity: 0.75;
  box-shadow: 46px 4px 0 -4px var(--detail), 22px -6px 0 -7px var(--detail);
}

/* --- c27 · Le Balcon (paris) — la frise de fer forgé d'un balcon sous
       le nom (Prata, section typo) --- */
body[data-design="c27"] { --filet-l: 0; }
body[data-design="c27"] .couv-filet { display: none; }
body[data-design="c27"] .couv-deco.deco-a {
  display: block; left: 12%; right: 12%; top: 54%; height: 15px;
  background-image: radial-gradient(circle 6px at 50% 50%, transparent 3px, var(--detail) 3px 5px, transparent 6px);
  background-size: 17px 15px; background-repeat: repeat-x;
  opacity: 0.75;
}
body[data-design="c27"] .couv { justify-content: center; }
body[data-design="c27"] .couv-sur { letter-spacing: 0.4em; }
body[data-design="c27"] .chap-titre { display: block; padding-bottom: 0.45rem; border-bottom: 1px solid var(--detail); }
body[data-design="c27"] .chap-titre::before { display: none; }

/* --- e26 · Le Zinc (paris) — les labels en étiquette d'enseigne, le
       vert profond des cafés --- */
body[data-design="e26"] .ess-lab {
  display: inline-flex; align-self: start;
  background: var(--detail); color: #fbf6ec;
  padding: 0.32rem 0.65rem 0.28rem; border-radius: 3px;
  letter-spacing: 0.14em;
}
body[data-design="e26"] .ess-nom { font-weight: 700; }
body[data-design="e26"] .ess-item { border-top: 2px solid var(--filet); }

/* --- d27 · Le Café crème (paris) — chaque icône posée sur sa soucoupe,
       le brun expresso sur crème rosé --- */
body[data-design="d27"] { --r-grande: 18px; --r-petit: 999px; --r-carte: 14px; }
body[data-design="d27"] .dep-ic {
  border-radius: 50%; border: 1px solid var(--detail); background: var(--fond);
  box-shadow: 0 0 0 3px var(--fond), 0 0 0 4px var(--detail);
  margin-right: 3px;
}
body[data-design="d27"] .dep-lieu { font-style: italic; }

/* --- c28 · La Futaie (forêt) — trois troncs derrière le nom, le vert
       sombre du bois --- */
body[data-design="c28"] { --couv-x: flex-start; --couv-texte: left; }
body[data-design="c28"] .couv-deco.deco-a {
  display: block; right: 12%; top: 12svh; bottom: 34svh; width: 46px;
  background: linear-gradient(90deg, var(--detail) 0 5px, transparent 5px 20px,
    var(--detail) 20px 25px, transparent 25px 41px, var(--detail) 41px 46px);
  opacity: 0.3;
}
body[data-design="c28"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c28"] .chap-titre::before { width: 4px; height: 20px; border-radius: 2px; }

/* --- e27 · La Clairière (forêt) — un grand halo de lumière derrière la
       tête, beaucoup d'air --- */
body[data-design="e27"] .ess { padding-top: 5.4rem; }
body[data-design="e27"] .ess-tete { position: relative; padding-bottom: 2.6rem; }
body[data-design="e27"] .tete-deco.deco-a {
  display: block; inset: -3rem -20% -1rem;
  background: radial-gradient(closest-side, rgba(255, 253, 220, 0.6), transparent 72%);
}
body[data-design="e27"] .ess-item { border-top: none; padding: 1rem 0.2rem; }
body[data-design="e27"] .ess-lab { color: var(--detail); }

/* --- d28 · La Canopée (forêt) — le sous-bois sombre, des trouées de
       lumière floues dans la tête --- */
body[data-design="d28"] { --r-grande: 14px; --r-petit: 9px; --r-carte: 12px; }
body[data-design="d28"] .dep-tete {
  padding: 1.8rem 1rem 2rem;
  background-image:
    radial-gradient(60px at 22% 30%, rgba(255, 250, 200, 0.10), transparent 70%),
    radial-gradient(44px at 74% 20%, rgba(255, 250, 200, 0.08), transparent 70%),
    radial-gradient(52px at 55% 78%, rgba(255, 250, 200, 0.07), transparent 70%);
}
body[data-design="d28"] .dep-carte { border-left: 3px solid var(--detail); }

/* --- c29 · Le Grand Hôtel (art déco) — or sur noir chaud, deux
       éventails dorés rayonnent des coins hauts --- */
body[data-design="c29"] { --filet-l: 130px; --filet-h: 1px; --r-carte: 6px; --r-grande: 8px; --r-petit: 4px; }
body[data-design="c29"] .couv-deco.deco-a,
body[data-design="c29"] .couv-deco.deco-b { display: block; width: 130px; height: 130px; opacity: 0.5; }
body[data-design="c29"] .couv-deco.deco-a {
  top: 0; left: 0;
  background: repeating-conic-gradient(from 90deg at 0 0, var(--detail) 0 3deg, transparent 3deg 13deg);
  border-bottom-right-radius: 100%;
}
body[data-design="c29"] .couv-deco.deco-b {
  top: 0; right: 0;
  background: repeating-conic-gradient(from 180deg at 100% 0, var(--detail) 0 3deg, transparent 3deg 13deg);
  border-bottom-left-radius: 100%;
}
body[data-design="c29"] .couv-sur { color: var(--detail); letter-spacing: 0.44em; }
body[data-design="c29"] .couv-nom { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; font-size: clamp(1.7rem, 7vw, 2.4rem); }
body[data-design="c29"] .chap-titre { display: block; text-align: center; }
body[data-design="c29"] .chap-titre::before { display: none; }

/* --- e28 · La Revue (art déco) — un filet épais et un fin encadrent la
       tête, la géométrie des années folles (Poiret One, section typo) --- */
body[data-design="e28"] .ess { padding-top: 4.4rem; }
body[data-design="e28"] .ess-tete {
  border-top: 6px solid var(--detail);
  border-bottom: 1px solid var(--detail);
  padding: 1.2rem 0 1.6rem;
}
body[data-design="e28"] .ess-sur { letter-spacing: 0.4em; color: var(--detail); }
body[data-design="e28"] .ess-lab { letter-spacing: 0.24em; }

/* --- d29 · L'Aviateur (art déco) — des lignes de vitesse filent sous
       chaque titre de carte --- */
body[data-design="d29"] { --r-grande: 10px; --r-petit: 6px; --r-carte: 8px; }
body[data-design="d29"] .dep-titre { position: relative; padding-bottom: 10px; }
body[data-design="d29"] .dep-titre::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 58px; height: 7px;
  background: linear-gradient(180deg, var(--detail) 0 2px, transparent 2px 5px, var(--detail) 5px 7px);
  background-size: 100% 7px;
}
body[data-design="d29"] .dep-sur { letter-spacing: 0.34em; }

/* --- c30 · La Caravane (seventies) — des arches concentriques derrière
       le nom, l'orange brûlé (Righteous, section typo) --- */
body[data-design="c30"] { --r-carte: 18px; --r-grande: 22px; --r-petit: 12px; --filet-l: 0; }
body[data-design="c30"] .couv-filet { display: none; }
body[data-design="c30"] .couv-deco.deco-a {
  display: block; left: 50%; top: 8svh; width: 240px; height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(circle 120px at 50% 100%,
    transparent 56px, var(--detail) 56px 66px, transparent 66px 82px,
    var(--detail) 82px 92px, transparent 92px 108px, var(--detail) 108px 118px, transparent 118px);
  opacity: 0.35;
}
body[data-design="c30"] .couv { padding-top: 5rem; }
body[data-design="c30"] .chap-titre::before { width: 14px; height: 14px; border-radius: 50%; }

/* --- e29 · Le Macramé (seventies) — des franges nouées séparent les
       parties --- */
body[data-design="e29"] .ess-item { border-top: none; padding-top: 1.15rem; }
body[data-design="e29"] .ess-item::before {
  content: ''; display: block; width: 66px; height: 11px; margin-bottom: 0.75rem;
  background: repeating-linear-gradient(90deg, var(--detail) 0 2px, transparent 2px 8px);
  border-top: 2px solid var(--detail);
  opacity: 0.65;
}
body[data-design="e29"] .ess-nom { font-weight: 700; }

/* --- d30 · La Tournée (seventies) — une bande oblique de van sur le
       coin de chaque carte --- */
body[data-design="d30"] { --r-grande: 12px; --r-petit: 7px; --r-carte: 10px; }
body[data-design="d30"] .dep-carte { position: relative; }
body[data-design="d30"] .dep-carte::before {
  content: ''; position: absolute; top: -14px; right: -22px; width: 110px; height: 34px;
  background: linear-gradient(90deg, var(--detail) 0 14px, transparent 14px 20px, var(--detail) 20px 27px, transparent 27px);
  transform: rotate(35deg); pointer-events: none; opacity: 0.85;
}
body[data-design="d30"] .dep-titre { text-transform: uppercase; letter-spacing: 0.05em; }

/* --- c31 · Le Fjord (scandinave) — des montagnes pâles ferment le pied
       de la couverture, le bleu clair du nord --- */
body[data-design="c31"] { --r-carte: 10px; --r-grande: 12px; --r-petit: 6px; }
body[data-design="c31"] .couv-deco.deco-a {
  display: block; left: 0; right: 0; bottom: 0; height: 130px;
  background: var(--detail); opacity: 0.14;
  clip-path: polygon(0 100%, 16% 34%, 33% 100%, 52% 8%, 70% 100%, 85% 42%, 100% 100%);
}
body[data-design="c31"] .couv-sur { letter-spacing: 0.3em; }
body[data-design="c31"] .couv-nom { font-weight: 500; }
body[data-design="c31"] .chap-titre::before { width: 22px; height: 2px; }

/* --- e30 · Le Hygge (scandinave) — une petite flamme de bougie devant
       chaque label, le camel doux --- */
body[data-design="e30"] { --r-carte: 18px; }
body[data-design="e30"] .ess-nom { font-weight: 500; }
body[data-design="e30"] .ess-lab::before {
  content: ''; width: 10px; height: 10px; flex: none;
  background: var(--detail);
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
}
body[data-design="e30"] .ess-item { padding: 1.6rem 0.2rem; }

/* --- d31 · Le Plaid (scandinave) — les larges rayures horizontales
       d'un plaid sur la tête --- */
body[data-design="d31"] { --r-grande: 16px; --r-petit: 10px; --r-carte: 13px; }
body[data-design="d31"] .dep-tete {
  padding: 1.6rem 1rem 2rem;
  background: repeating-linear-gradient(180deg, transparent 0 26px, var(--filet) 26px 46px);
}
body[data-design="d31"] .dep-ic { border: 1px solid var(--detail); background: none; }

/* --- c32 · La Télécabine (neige) — un câble traverse la couverture,
       deux cabines suspendues --- */
body[data-design="c32"] .couv-deco.deco-a {
  display: block; left: -4%; right: -4%; top: 24svh; height: 2px;
  background: var(--detail); transform: rotate(-5deg); opacity: 0.6;
}
body[data-design="c32"] .couv-deco.deco-b {
  display: block; left: 22%; top: calc(24svh + 4px); width: 16px; height: 18px;
  border-radius: 4px; background: var(--detail);
  box-shadow: 120px -14px 0 0 var(--detail);
}
body[data-design="c32"] .couv { padding-top: 4.4rem; }
body[data-design="c32"] .couv-sur { letter-spacing: 0.3em; color: var(--detail); }
body[data-design="c32"] .chap-titre::before { width: 18px; height: 3px; }

/* --- e31 · La Poudreuse (neige) — la tête posée sur une carte de
       neige, un grand flocon pâle --- */
body[data-design="e31"] { --r-carte: 16px; }
body[data-design="e31"] .ess-tete {
  background: var(--carte); border-radius: var(--r-carte);
  padding: 1.7rem 1.3rem 1.9rem; position: relative; overflow: hidden;
}
body[data-design="e31"] .tete-deco.deco-a {
  display: block; width: 84px; height: 84px; right: -12px; top: -12px;
  background: var(--detail); opacity: 0.22;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
body[data-design="e31"] .ess-lab { color: var(--detail); }

/* --- d32 · L'Après-ski (neige) — un losange de piste devant chaque
       titre, le vin chaud --- */
body[data-design="d32"] { --r-grande: 10px; --r-petit: 6px; --r-carte: 8px; }
body[data-design="d32"] .dep-titre { display: flex; align-items: center; gap: 0.55rem; }
body[data-design="d32"] .dep-titre::before {
  content: ''; width: 10px; height: 10px; flex: none;
  background: var(--detail); transform: rotate(45deg);
}
body[data-design="d32"] .dep-sur { letter-spacing: 0.3em; }

/* --- c33 · La Palmeraie (tropical) — un store rayé en bandeau haut,
       l'ombre des palmes --- */
body[data-design="c33"] { --r-carte: 14px; --r-grande: 16px; --r-petit: 9px; }
body[data-design="c33"] .couv { padding-top: 5.2rem; }
body[data-design="c33"] .couv-deco.deco-a {
  display: block; left: 0; right: 0; top: 0; height: 48px;
  background: repeating-linear-gradient(115deg, var(--detail) 0 16px, transparent 16px 34px);
  opacity: 0.28;
}
body[data-design="c33"] .couv-sur { letter-spacing: 0.3em; color: var(--detail); }
body[data-design="c33"] .chap-titre::before { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; }

/* --- e32 · Le Lagon (tropical) — les items sur des cartes-galets aux
       coins organiques, l'eau turquoise --- */
body[data-design="e32"] .ess-liste { gap: 0.95rem; }
body[data-design="e32"] .ess-item {
  border-top: none; background: var(--carte); border: 1px solid var(--filet);
  padding: 1.3rem 1.15rem;
  border-radius: 58% 42% 55% 45% / 32% 38% 30% 36%;
}
body[data-design="e32"] .ess-lab { color: var(--detail); }

/* --- d33 · Le Rotin (tropical) — le cannage croisé en diagonale sur la
       tête, le miel du rotin --- */
body[data-design="d33"] { --r-grande: 16px; --r-petit: 10px; --r-carte: 13px; }
body[data-design="d33"] .dep-tete {
  padding: 1.6rem 1rem 2rem;
  background-image:
    repeating-linear-gradient(45deg, var(--filet) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, var(--filet) 0 1px, transparent 1px 11px);
}
body[data-design="d33"] .dep-carte { border: 2px solid var(--filet); }

/* --- c34 · Le Vinyle (hors-série) — la pochette noire, les sillons
       concentriques, le nom au centre du disque (Monoton, section typo) --- */
body[data-design="c34"] { --filet-l: 0; --r-carte: 8px; --r-grande: 10px; --r-petit: 5px; }
body[data-design="c34"] .couv { justify-content: center; }
body[data-design="c34"] .couv-filet { display: none; }
body[data-design="c34"] .couv-deco.deco-a {
  display: block; width: 260px; height: 260px; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, #2a2727 0 2px, #201d1e 2px 5px);
}
body[data-design="c34"] .couv-deco.deco-b {
  display: block; width: 96px; height: 96px; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--detail); opacity: 0.9;
}
body[data-design="c34"] .couv-sur { letter-spacing: 0.4em; }
body[data-design="c34"] .couv-nom { font-size: clamp(1.5rem, 6vw, 2rem); }
body[data-design="c34"] .chap-titre::before { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--detail); background: none; }

/* --- e33 · La Piscine (hors-série) — le bleu d'eau, l'échelle du grand
       bain au coin de la tête --- */
body[data-design="e33"] { --r-carte: 14px; }
body[data-design="e33"] .ess-tete { position: relative; padding-bottom: 2.2rem; }
body[data-design="e33"] .tete-deco.deco-a {
  display: block; right: 6px; top: -0.6rem; width: 34px; height: 66px;
  border-left: 4px solid var(--detail); border-right: 4px solid var(--detail);
  border-radius: 8px 8px 0 0;
  background: repeating-linear-gradient(180deg, transparent 0 15px, var(--detail) 15px 19px);
  opacity: 0.8;
}
body[data-design="e33"] .ess-item {
  border-top: none; background: var(--carte); border: 1px solid var(--filet);
  border-radius: var(--r-carte); padding: 1.25rem 1.1rem;
}
body[data-design="e33"] .ess-liste { gap: 0.85rem; }
body[data-design="e33"] .ess-lab { color: var(--detail); letter-spacing: 0.18em; }

/* --- la VOIX des boutons, par modèle (sa demande : « la typo des boutons
       ne doit pas être la même en fonction des modèles ») — .lv-btn n'est
       pas un titre : la police y est permise.
       RÈGLE DICTÉE (13/08, re-précisée : « un BOUTON, pas un TEXTE ») :
       TOUT bouton porte un contour NET de 2px dans la couleur d'accent,
       PLEINE — le standard vit dans --contour-btn = var(--detail), sans
       color-mix ni transparence (un navigateur qui ignore color-mix
       jetait tout le contour). Un design peut épaissir ou styliser
       (double, pointillé), JAMAIS affaiblir ni supprimer. --- */
body[data-design="c01"] .lv-btn { font-family: 'Fraunces', serif; font-weight: 600; }
body[data-design="c02"] .lv-btn {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.82rem; font-weight: 600;
}
body[data-design="c03"] .lv-btn { font-weight: 800; font-size: 1.05rem; }
body[data-design="c04"] .lv-btn { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
body[data-design="c05"] .lv-btn {
  font-family: 'Fraunces', serif; letter-spacing: 0.04em; font-weight: 500;
  background: none; border-width: 2px;
}
body[data-design="c06"] .lv-btn { font-weight: 600; }
body[data-design="c07"] .lv-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 800; }
body[data-design="e01"] .lv-btn { font-size: 0.92rem; letter-spacing: 0.03em; border-style: dashed; }
body[data-design="e02"] .lv-btn { font-family: 'Fraunces', serif; font-style: italic; }
body[data-design="e03"] .lv-btn { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 800; }
body[data-design="e04"] .lv-btn { font-weight: 500; font-size: 0.96rem; }
body[data-design="e05"] .lv-btn { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.05rem; }
body[data-design="e06"] .lv-btn { font-weight: 600; border-right: 3px solid var(--detail); }
/* (l'Éventail — SA référence de contour : le fond teinté garde le
   contour standard, bien net) */
body[data-design="d01"] .lv-btn {
  font-weight: 800;
  background: color-mix(in srgb, var(--detail) 16%, transparent);
}
body[data-design="d02"] .lv-btn {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 700;
  border-left: 4px solid var(--detail);
}
body[data-design="d03"] .lv-btn {
  font-weight: 600;
  outline: 1px solid color-mix(in srgb, var(--detail) 25%, transparent); outline-offset: 3px;
}
body[data-design="d04"] .lv-btn { font-family: 'Fraunces', serif; font-weight: 600; }
body[data-design="d05"] .lv-btn {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 800;
  border-top: 4px solid var(--detail);
}
body[data-design="d06"] .lv-btn { font-weight: 700; }
body[data-design="d07"] .lv-btn { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
/* — les voix des 20 modèles des offres supérieures (13/08) — */
body[data-design="c08"] .lv-btn { font-family: 'Playfair Display', serif; font-weight: 600; }
body[data-design="c09"] .lv-btn { font-family: 'Fraunces', serif; font-weight: 600; border-left: 5px solid var(--detail); }
body[data-design="c10"] .lv-btn { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; border: 1.5px solid var(--encre); }
body[data-design="c11"] .lv-btn {
  font-weight: 600;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--detail) 8%, transparent) 0 2px, transparent 2px 12px) var(--carte);
}
body[data-design="c12"] .lv-btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 800; border-bottom: 4px solid var(--detail); }
body[data-design="c13"] .lv-btn { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.1rem; }
body[data-design="c14"] .lv-btn { font-weight: 700; border-width: 2px; }
body[data-design="e07"] .lv-btn { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; font-weight: 700; border: 4px double var(--contour-btn); }
body[data-design="e08"] .lv-btn { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.05em; }
body[data-design="e09"] .lv-btn { font-family: 'Josefin Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; font-weight: 600; }
body[data-design="e10"] .lv-btn { font-style: italic; font-weight: 600; }
body[data-design="e11"] .lv-btn { font-weight: 500; font-size: 0.92rem; letter-spacing: 0.06em; background: none; }
body[data-design="e12"] .lv-btn { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 1.05rem; }
body[data-design="d08"] .lv-btn {
  font-weight: 800;
  outline: 1px solid color-mix(in srgb, var(--detail) 42%, transparent); outline-offset: -4px;
}
body[data-design="d09"] .lv-btn {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 800;
  outline: 1.5px dashed color-mix(in srgb, var(--detail) 45%, transparent); outline-offset: -5px;
}
body[data-design="d10"] .lv-btn { font-weight: 700; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--detail) 35%, transparent); }
body[data-design="d11"] .lv-btn { background: none; letter-spacing: 0.05em; }
body[data-design="d12"] .lv-btn { font-weight: 500; letter-spacing: 0.02em; }
body[data-design="d13"] .lv-btn { font-weight: 700; background: color-mix(in srgb, var(--detail) 9%, var(--carte)); }
body[data-design="d14"] .lv-btn { font-weight: 600; }
/* — les voix des 10 modèles à thème (13/08) — */
body[data-design="c15"] .lv-btn { font-family: 'Uncial Antiqua', serif; font-size: 0.95rem; }
body[data-design="d15"] .lv-btn { font-weight: 700; border-style: dashed; }
body[data-design="e13"] .lv-btn { font-family: 'Fraunces', serif; font-weight: 600; font-variant: small-caps; }
body[data-design="d16"] .lv-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 800; }
body[data-design="e14"] .lv-btn { font-weight: 600; }
body[data-design="e14"] .lv-btn span { text-decoration: underline wavy var(--detail); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
body[data-design="c16"] .lv-btn { font-weight: 800; }
body[data-design="e15"] .lv-btn { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; font-weight: 600; }
body[data-design="d17"] .lv-btn { font-family: 'Limelight', serif; font-size: 0.92rem; }
body[data-design="c17"] .lv-btn { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; }
body[data-design="e16"] .lv-btn { font-family: 'Press Start 2P', monospace; font-size: 0.58rem; line-height: 1.5; }
/* — les intemporels du catalogue (13/08) : sobres, mais des BOUTONS —
   le contour standard 2px accent tient partout, les voix ne font
   qu'épaissir ou styliser (la règle gravée plus haut) — */
body[data-design="c18"] .lv-btn { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; }
/* (les voix de c19, e18, e20, d19 et d20 ont vécu avec leurs modèles —
   « Les couleurs » les remplacent, plus bas) */
body[data-design="c20"] .lv-btn { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 600; background: none; }
body[data-design="c21"] .lv-btn { font-family: 'EB Garamond', serif; font-size: 1.02rem; font-weight: 500; }
body[data-design="c22"] .lv-btn { background: var(--detail); color: #fbf6ec; font-weight: 600; }
body[data-design="e17"] .lv-btn { font-weight: 500; letter-spacing: 0.04em; }
body[data-design="e19"] .lv-btn { font-weight: 600; box-shadow: inset 0 -3px 0 var(--detail); }
body[data-design="e21"] .lv-btn { font-weight: 600; font-size: 0.95rem; }
body[data-design="d18"] .lv-btn { font-weight: 600; box-shadow: 0 6px 16px rgba(47, 58, 44, 0.12); }
body[data-design="d21"] .lv-btn { font-weight: 600; border-width: 2px 4px; }
body[data-design="d22"] .lv-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; border-width: 3px; }
/* — « Les couleurs » (13/08, sa correction) : le contour prend la
   couleur d'accent de chaque fond, bien franc — */
body[data-design="c35"] .lv-btn { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; }
body[data-design="e34"] .lv-btn { font-weight: 800; }
body[data-design="e35"] .lv-btn { font-weight: 700; }
body[data-design="d34"] .lv-btn { font-weight: 600; }
body[data-design="d35"] .lv-btn { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
/* — les 35 à thème (13/08) : même règle, le contour 2px accent tient — */
body[data-design="c23"] .lv-btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.84rem; font-weight: 800; }
body[data-design="e22"] .lv-btn { font-weight: 700; letter-spacing: 0.02em; }
body[data-design="d23"] .lv-btn { font-weight: 600; border-width: 3px; }
body[data-design="c24"] .lv-btn { font-weight: 700; letter-spacing: 0.06em; }
body[data-design="e23"] .lv-btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 700; }
body[data-design="d24"] .lv-btn { font-weight: 600; border-bottom-width: 4px; }
body[data-design="c25"] .lv-btn { font-weight: 700; }
body[data-design="e24"] .lv-btn { font-weight: 600; border-top-width: 4px; }
body[data-design="d25"] .lv-btn { font-weight: 600; letter-spacing: 0.04em; }
body[data-design="c26"] .lv-btn { font-family: 'Shippori Mincho', serif; font-size: 0.95rem; }
body[data-design="e25"] .lv-btn { font-weight: 600; border-style: double; border-width: 4px; }
body[data-design="d26"] .lv-btn { font-weight: 500; letter-spacing: 0.08em; }
body[data-design="c27"] .lv-btn { font-family: 'Prata', serif; font-size: 0.92rem; }
body[data-design="e26"] .lv-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; }
body[data-design="d27"] .lv-btn { font-weight: 600; }
body[data-design="c28"] .lv-btn { font-weight: 700; }
body[data-design="e27"] .lv-btn { font-weight: 500; letter-spacing: 0.05em; }
body[data-design="d28"] .lv-btn { font-weight: 600; border-width: 3px; }
body[data-design="c29"] .lv-btn { font-family: 'Poiret One', sans-serif; font-size: 0.94rem; letter-spacing: 0.12em; font-weight: 700; }
body[data-design="e28"] .lv-btn { font-family: 'Poiret One', sans-serif; font-size: 0.9rem; letter-spacing: 0.1em; font-weight: 700; }
body[data-design="d29"] .lv-btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; }
body[data-design="c30"] .lv-btn { font-family: 'Righteous', sans-serif; font-size: 0.88rem; font-weight: 400; }
body[data-design="e29"] .lv-btn { font-weight: 600; }
body[data-design="d30"] .lv-btn { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.84rem; font-weight: 800; }
body[data-design="c31"] .lv-btn { font-weight: 600; letter-spacing: 0.03em; }
body[data-design="e30"] .lv-btn { font-weight: 500; font-size: 0.98rem; }
body[data-design="d31"] .lv-btn { font-weight: 600; }
body[data-design="c32"] .lv-btn { font-weight: 700; }
body[data-design="e31"] .lv-btn { font-weight: 600; }
body[data-design="d32"] .lv-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; }
body[data-design="c33"] .lv-btn { font-weight: 700; letter-spacing: 0.02em; }
body[data-design="e32"] .lv-btn { font-weight: 600; }
body[data-design="d33"] .lv-btn { font-weight: 600; border-width: 3px; }
body[data-design="c34"] .lv-btn { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; }
body[data-design="e33"] .lv-btn { font-weight: 700; }

/* --- la FORME de LA photo, par modèle (« le recadrage s'adaptera
       automatiquement ») — la base est douce, chacun la signe ; seule
       L'Estampe (c05, pure typographie) s'en passe --- */
/* les couvertures POSÉES EN BAS (c01, c03) mettent leur photo EN HAUT de
   l'écran (sa demande) : order -1 + margin-bottom auto la détachent du
   bloc du titre qui reste en bas */
body[data-design="c01"] .tete-photo { order: -1; margin: 0 0 auto; }
body[data-design="c02"] .tete-photo { border-color: color-mix(in srgb, var(--detail) 60%, transparent); }
/* pleine largeur centrée par la boîte (13/08) — même correction que c07 */
body[data-design="c03"] .tete-photo {
  order: -1; max-width: none; width: 100vw; align-self: center;
  margin: -3rem 0 auto;
  border-radius: 0; border: none;
}
body[data-design="c03"] .tete-photo img { height: clamp(180px, 52vw, 260px); }
body[data-design="c04"] .tete-photo {
  border: 1px solid var(--detail);
  outline: 1px solid color-mix(in srgb, var(--detail) 45%, transparent); outline-offset: 4px;
  max-width: 19rem;
}
body[data-design="c05"] .tete-photo { display: none; }
body[data-design="c06"] .tete-photo {
  max-width: 15.5rem;
  border-radius: 999px 999px 14px 14px;
  border-color: color-mix(in srgb, var(--detail) 40%, transparent);
}
body[data-design="c06"] .tete-photo img { height: clamp(220px, 62vw, 300px); }
/* LA photo de La Grange, pleine largeur et CENTRÉE au milieu de l'écran
   (son signalement du 13/08 : elle paraissait décentrée sur mobile) —
   la boîte fait 100vw et se centre elle-même dans la colonne */
body[data-design="c07"] .tete-photo {
  max-width: none; width: 100vw; align-self: center;
  margin: 0; border-radius: 0; border: none;
}
body[data-design="e02"] .tete-photo { border: 2px dashed color-mix(in srgb, var(--encre) 40%, transparent); }
body[data-design="d04"] .tete-photo { border-color: color-mix(in srgb, var(--detail) 40%, transparent); background: #fdfaf5; }
body[data-design="d05"] .tete-photo { border-top: 4px solid var(--detail); }
/* — les formes des 20 modèles des offres supérieures (13/08) —
   e07, le Télégramme, s'en passe (comme L'Estampe) */
body[data-design="c08"] .tete-photo { border: 4px double var(--detail); max-width: 20rem; }
body[data-design="c09"] .tete-photo { max-width: none; align-self: stretch; border-radius: 0; border: none; }
body[data-design="c10"] .tete-photo {
  border: 1px solid var(--encre); border-radius: 0;
  outline: 1px solid var(--encre); outline-offset: 3px;
}
body[data-design="c11"] .tete-photo { border-radius: 22px 22px 4px 4px; border-color: color-mix(in srgb, var(--detail) 45%, transparent); }
body[data-design="c12"] .tete-photo { border: none; border-bottom: 6px solid var(--detail); border-radius: 4px 4px 0 0; }
body[data-design="c13"] .tete-photo { border-radius: 50% / 42%; max-width: 17rem; border-color: color-mix(in srgb, var(--detail) 40%, transparent); }
body[data-design="c13"] .tete-photo img { height: clamp(200px, 56vw, 270px); }
body[data-design="c14"] .tete-photo { border: 6px solid color-mix(in srgb, var(--detail) 25%, transparent); border-radius: 3px; }
body[data-design="e07"] .tete-photo { display: none; }
body[data-design="e08"] .tete-photo { border: 2px solid var(--detail); border-radius: 14px; transform: rotate(-1.6deg); }
body[data-design="e09"] .tete-photo { border-radius: 50%; max-width: 14.5rem; border: 4px double var(--detail); }
body[data-design="e09"] .tete-photo img { height: auto; aspect-ratio: 1; }
body[data-design="e10"] .tete-photo { border-color: color-mix(in srgb, var(--detail) 55%, transparent); border-radius: 10px; }
body[data-design="e11"] .tete-photo { border: none; border-radius: 26px; }
body[data-design="e12"] .tete-photo { border: 3px solid color-mix(in srgb, var(--detail) 50%, transparent); border-radius: 24px; }
body[data-design="d08"] .tete-photo {
  border: 1px solid color-mix(in srgb, var(--detail) 45%, transparent);
  outline: 1px solid color-mix(in srgb, var(--detail) 45%, transparent); outline-offset: -6px;
}
body[data-design="d09"] .tete-photo { border: none; outline: 2px dashed color-mix(in srgb, var(--detail) 50%, transparent); outline-offset: -7px; }
body[data-design="d10"] .tete-photo { border: 3px solid color-mix(in srgb, var(--detail) 30%, transparent); border-radius: 18px; }
body[data-design="d11"] .tete-photo { border: 1px solid color-mix(in srgb, var(--detail) 55%, transparent); }
body[data-design="d12"] .tete-photo { border: 1px solid var(--filet); border-radius: 12px; }
body[data-design="d13"] .tete-photo { border: none; border-top: 4px solid var(--detail); border-bottom: 4px solid var(--detail); border-radius: 0; }
body[data-design="d14"] .tete-photo { max-width: none; align-self: stretch; border-radius: 16px; }
body[data-design="d14"] .tete-photo img { height: clamp(150px, 40vw, 210px); }
/* — les formes des 10 modèles à thème (13/08) — */
body[data-design="c15"] .tete-photo { border-radius: 999px 999px 0 0; border: 4px solid var(--detail); max-width: 16rem; }
body[data-design="c15"] .tete-photo img { height: clamp(210px, 58vw, 280px); }
body[data-design="d15"] .tete-photo { border: 2px dashed var(--detail); border-radius: 6px; }
body[data-design="e13"] .tete-photo { border: 1px solid var(--detail); outline: 1px solid var(--detail); outline-offset: 4px; border-radius: 0; }
body[data-design="d16"] .tete-photo { border: 4px solid var(--detail); border-radius: 0; }
body[data-design="e14"] .tete-photo { border: none; border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; max-width: 17rem; }
body[data-design="e14"] .tete-photo img { height: clamp(190px, 52vw, 250px); }
body[data-design="c16"] .tete-photo { border: 2px solid var(--detail); border-radius: 90px 90px 8px 8px; }
body[data-design="e15"] .tete-photo { border: 1px solid var(--detail); }
body[data-design="d17"] .tete-photo { border: 3px solid var(--detail); outline: 3px dotted var(--detail); outline-offset: -9px; }
body[data-design="c17"] .tete-photo { border: 2px solid var(--detail); outline: 1px solid var(--detail); outline-offset: 3px; }
body[data-design="e16"] .tete-photo { border: 4px solid var(--detail); border-radius: 0; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35); }
/* — les intemporels (13/08) : tous avec photo, des cadres nets — */
body[data-design="c18"] .tete-photo { border: 1px solid var(--detail); max-width: 19rem; }
body[data-design="c20"] .tete-photo {
  order: -1; margin: 0 0 1.5rem;
  width: 100%; max-width: 24rem;
  border: none; border-radius: 4px;
}
body[data-design="c20"] .tete-photo img { height: clamp(300px, 85vw, 400px); }
body[data-design="c21"] .tete-photo {
  background: var(--carte); padding: 8px 8px 24px;
  border: 1px solid var(--filet); border-radius: 3px;
  max-width: 16.5rem;
}
body[data-design="c22"] .tete-photo { border: none; border-radius: 22px; max-width: 18rem; }
body[data-design="e17"] .tete-photo { border: none; border-radius: 6px; max-width: 17rem; }
body[data-design="e19"] .tete-photo { border: 1px solid var(--filet); border-radius: 2px; }
body[data-design="e21"] .tete-photo { border: 1px solid var(--detail); border-radius: 999px; max-width: 19rem; }
body[data-design="e21"] .tete-photo img { height: clamp(170px, 48vw, 210px); }
body[data-design="d18"] .tete-photo { border: none; border-radius: 14px; box-shadow: 0 12px 26px rgba(47, 58, 44, 0.16); }
body[data-design="d21"] .tete-photo {
  border: 1px solid var(--filet); border-radius: 10px;
  border-left: 3px solid var(--detail); border-right: 3px solid var(--detail);
}
body[data-design="d22"] .tete-photo { border: 4px solid var(--detail); border-radius: 6px; }
/* — « Les couleurs » (13/08) : cadres simples dans l'accent de chaque
   fond — */
body[data-design="c35"] .tete-photo { border: 2px solid var(--detail); border-radius: 4px; }
body[data-design="e34"] .tete-photo { border: 3px solid var(--detail); border-radius: 8px; }
body[data-design="e35"] .tete-photo { border: 3px solid var(--detail); border-radius: 16px; }
body[data-design="d34"] .tete-photo { border: 2px solid var(--detail); border-radius: 12px; }
body[data-design="d35"] .tete-photo { border: 3px solid var(--detail); border-radius: 14px; }
/* — les 35 à thème (13/08) : tous avec photo — */
body[data-design="c23"] .tete-photo { border: 3px solid var(--detail); border-radius: 4px; }
body[data-design="e22"] .tete-photo { border: 6px solid var(--detail); border-radius: 18px; }
body[data-design="d23"] .tete-photo { border: 2px solid var(--detail); box-shadow: 0 0 18px rgba(224, 164, 88, 0.25); }
body[data-design="c24"] .tete-photo { border: none; border-bottom: 5px solid var(--detail); border-radius: 2px; }
body[data-design="e23"] .tete-photo { border: 3px solid var(--detail); border-radius: 12px 12px 0 0; }
body[data-design="d24"] .tete-photo { border: 1px solid var(--filet); border-radius: 24px 24px 8px 8px; }
body[data-design="c25"] .tete-photo { border: none; border-radius: 0; clip-path: polygon(7% 0, 93% 0, 100% 12%, 100% 88%, 93% 100%, 7% 100%, 0 88%, 0 12%); }
body[data-design="e24"] .tete-photo { border: 3px solid var(--detail); border-radius: 6px; }
body[data-design="d25"] .tete-photo { border: 1px solid var(--detail); border-radius: 40px 40px 6px 6px; }
body[data-design="c26"] .tete-photo { border: 2px solid var(--detail); border-radius: 50%; max-width: 15rem; }
body[data-design="c26"] .tete-photo img { height: clamp(220px, 60vw, 240px); }
body[data-design="e25"] .tete-photo { border: 2px solid var(--detail); outline: 1px solid var(--filet); outline-offset: -8px; }
body[data-design="d26"] .tete-photo { border: 1px solid var(--filet); border-radius: 2px; }
body[data-design="c27"] .tete-photo { border: 1px solid var(--detail); border-radius: 12px 12px 0 0; max-width: 18rem; }
body[data-design="e26"] .tete-photo { border: 2px solid var(--detail); border-radius: 4px; }
body[data-design="d27"] .tete-photo { border: 4px double var(--detail); border-radius: 20px; }
body[data-design="c28"] .tete-photo { border: none; border-radius: 8px; box-shadow: 0 0 0 5px var(--carte); }
body[data-design="e27"] .tete-photo { border: 1px solid var(--filet); border-radius: 28px; }
body[data-design="d28"] .tete-photo { border: 2px solid var(--detail); border-radius: 12px; }
body[data-design="c29"] .tete-photo { border: 1px solid var(--detail); box-shadow: 0 0 0 6px #2e2a26; border-radius: 2px; }
body[data-design="e28"] .tete-photo { border: none; border-top: 6px solid var(--detail); border-bottom: 2px solid var(--detail); border-radius: 0; }
body[data-design="d29"] .tete-photo { border: 2px solid var(--detail); border-radius: 6px; }
body[data-design="c30"] .tete-photo { border: 4px solid var(--detail); outline: 2px solid var(--detail); outline-offset: 4px; border-radius: 18px; }
body[data-design="e29"] .tete-photo { border: 2px solid var(--detail); border-radius: 14px; }
body[data-design="d30"] .tete-photo { border: 2px solid var(--detail); border-radius: 8px; transform: rotate(-2deg); }
body[data-design="c31"] .tete-photo { border: none; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); }
body[data-design="e30"] .tete-photo { border: none; border-radius: 20px; box-shadow: 0 0 0 6px var(--carte), 0 0 0 7px var(--filet); }
body[data-design="d31"] .tete-photo { border: 1px solid var(--filet); border-radius: 10px; }
body[data-design="c32"] .tete-photo { border: 2px solid var(--detail); border-radius: 12px; box-shadow: 0 8px 0 -4px var(--detail); }
body[data-design="e31"] .tete-photo { border: none; border-radius: 16px; outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; }
body[data-design="d32"] .tete-photo { border: 3px solid var(--detail); border-radius: 4px; }
body[data-design="c33"] .tete-photo { border: none; border-radius: 999px 20px 999px 20px; max-width: 18rem; }
body[data-design="c33"] .tete-photo img { height: clamp(230px, 64vw, 300px); }
body[data-design="e32"] .tete-photo { border: 3px solid var(--detail); border-radius: 30px; }
body[data-design="d33"] .tete-photo { border: 5px solid var(--detail); border-radius: 16px; }
body[data-design="c34"] .tete-photo { border: 6px solid #2a2727; outline: 1px solid #3a3737; border-radius: 2px; }
body[data-design="e33"] .tete-photo { border: 3px solid var(--detail); border-radius: 12px; box-shadow: 0 8px 0 -5px var(--detail); }

/* --- les modèles à TYPO (12/08, dicté : « ancien, fluffy, contours ultra
       arrondis, police moyen âge — vraiment TOUS les styles ») : la police
       du titre VIENT du design. Le réglage police de l'utilisateur garde
       le dernier mot : Baloo et Italique sont déclarés APRÈS cette
       section, la valeur par défaut (Fraunces) n'a pas de règle — c'est
       elle qui laisse parler le design. --- */

/* c02 · Minuit devient l'ANCIEN : capitales romaines gravées (Cinzel) */
body[data-design="c02"] .couv-nom { font-family: 'Cinzel', serif; font-weight: 600; }
body[data-design="c02"] .chap-titre { font-family: 'Cinzel', serif; font-size: 1.4rem; }

/* d06 · Le Hameau : le MOYEN ÂGE (MedievalSharp) */
body[data-design="d06"] .dep-nom { font-family: 'MedievalSharp', serif; font-weight: 400; font-size: clamp(2.2rem, 8.5vw, 3rem); }
body[data-design="d06"] .dep-titre { font-family: 'MedievalSharp', serif; font-size: 1.12rem; }
body[data-design="d06"] .lv-btn { font-family: 'MedievalSharp', serif; font-weight: 400; font-size: 1.02rem; }

/* d01 · L'Éventail : le FLUFFY — tout rond, tout doux (Fredoka) */
body[data-design="d01"] .dep-nom { font-family: 'Fredoka', sans-serif; font-weight: 600; }
body[data-design="d01"] .dep-sur, body[data-design="d01"] .dep-titre { font-family: 'Fredoka', sans-serif; }
body[data-design="d01"] .lv-btn { font-family: 'Fredoka', sans-serif; }

/* e02 · L'Ardoise : la CRAIE manuscrite (Caveat) */
body[data-design="e02"] .ess-nom { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(2.6rem, 10vw, 3.4rem); }
body[data-design="e02"] .ess-lab { font-family: 'Caveat', cursive; font-size: 1.2rem; letter-spacing: 0.04em; text-transform: none; }
body[data-design="e02"] .lv-btn { font-family: 'Caveat', cursive; font-style: normal; font-size: 1.25rem; }

/* e04 · La Lavande : les CONTOURS ULTRA ARRONDIS (Comfortaa) */
body[data-design="e04"] .ess-nom { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
body[data-design="e04"] .ess-lab { font-family: 'Comfortaa', sans-serif; letter-spacing: 0.14em; }
body[data-design="e04"] .lv-btn { font-family: 'Comfortaa', sans-serif; font-size: 0.88rem; }

/* — les voix des offres supérieures (13/08, même règle : le réglage
   police de l'utilisateur, déclaré après, garde le dernier mot) — */

/* c08 · L'Opéra : la SCÈNE (Playfair Display) */
body[data-design="c08"] .couv-nom { font-family: 'Playfair Display', serif; font-weight: 600; }
body[data-design="c08"] .chap-titre { font-family: 'Playfair Display', serif; }
body[data-design="c08"] .fin-mot { font-family: 'Playfair Display', serif; font-style: italic; }

/* c13 · Le Manoir : le ROMANTIQUE fin (Cormorant Garamond) */
body[data-design="c13"] .couv-nom { font-family: 'Cormorant Garamond', serif; font-weight: 500; }
body[data-design="c13"] .chap-titre { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.85rem; }

/* e08 · La Guinguette : la CRAIE GRASSE des ardoises de fête (Amatic SC) */
body[data-design="e08"] .ess-nom { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: clamp(2.8rem, 12vw, 3.7rem); letter-spacing: 0.04em; }
body[data-design="e08"] .ess-lab { font-family: 'Amatic SC', cursive; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: none; }

/* e09 · Le Paquebot : la GÉOMÉTRIE des années trente (Josefin Sans) */
body[data-design="e09"] .ess-nom { font-family: 'Josefin Sans', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
body[data-design="e09"] .ess-lab { font-family: 'Josefin Sans', sans-serif; }

/* e12 · L'Estivale : l'ÉCRITURE EN VACANCES (Pacifico — le nom seul,
   les labels restent lisibles) */
body[data-design="e12"] .ess-nom { font-family: 'Pacifico', cursive; font-weight: 400; font-size: clamp(2.1rem, 8.5vw, 2.8rem); line-height: 1.3; }

/* c15 · Le Donjon : l'ENLUMINURE (Uncial Antiqua) */
body[data-design="c15"] .couv-nom { font-family: 'Uncial Antiqua', serif; font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.7rem); }
body[data-design="c15"] .chap-titre { font-family: 'Uncial Antiqua', serif; font-size: 1.45rem; }

/* d17 · La Séance : l'AFFICHE DE CINÉMA (Limelight) */
body[data-design="d17"] .dep-nom { font-family: 'Limelight', serif; font-weight: 400; font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
body[data-design="d17"] .dep-titre { font-family: 'Limelight', serif; font-size: 1rem; }

/* e16 · La Borne : le PIXEL d'arcade (Press Start 2P — le nom seul,
   la police est massive) */
body[data-design="e16"] .ess-nom { font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: clamp(0.95rem, 4vw, 1.3rem); line-height: 1.65; }

/* c21 · L'Écritoire : la PLUME classique (EB Garamond — l'intemporel à
   typo de la fournée 1 du catalogue, 13/08) */
body[data-design="c21"] .couv-nom { font-family: 'EB Garamond', serif; font-weight: 500; font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
body[data-design="c21"] .chap-titre { font-family: 'EB Garamond', serif; font-size: 1.5rem; }
body[data-design="c21"] .fin-mot { font-family: 'EB Garamond', serif; font-style: italic; }

/* — les voix des 35 à thème (13/08, même règle : le réglage police de
   l'utilisateur, déclaré après, garde le dernier mot) — */

/* c26 · Le Sumi : le PINCEAU (Shippori Mincho) */
body[data-design="c26"] .couv-nom { font-family: 'Shippori Mincho', serif; font-weight: 600; }
body[data-design="c26"] .chap-titre { font-family: 'Shippori Mincho', serif; }

/* c27 · Le Balcon : la DIDONE parisienne (Prata) */
body[data-design="c27"] .couv-nom { font-family: 'Prata', serif; font-weight: 400; }
body[data-design="c27"] .chap-titre { font-family: 'Prata', serif; font-size: 1.45rem; }

/* c29 · Le Grand Hôtel + e28 · La Revue : la GÉOMÉTRIE déco (Poiret One) */
body[data-design="c29"] .couv-nom { font-family: 'Poiret One', sans-serif; font-weight: 400; }
body[data-design="c29"] .chap-titre { font-family: 'Poiret One', sans-serif; font-size: 1.6rem; }
body[data-design="e28"] .ess-nom { font-family: 'Poiret One', sans-serif; font-weight: 400; font-size: clamp(2rem, 8vw, 2.7rem); }

/* c30 · La Caravane : le ROND seventies (Righteous) */
body[data-design="c30"] .couv-nom { font-family: 'Righteous', sans-serif; font-weight: 400; }
body[data-design="c30"] .chap-titre { font-family: 'Righteous', sans-serif; font-size: 1.4rem; }

/* c34 · Le Vinyle : le NÉON à sillons (Monoton — le nom seul, la police
   est illisible en petit) */
body[data-design="c34"] .couv-nom { font-family: 'Monoton', cursive; font-weight: 400; line-height: 1.4; }

/* ===== Le départ enrichi, Garder le livret, la page Nos adresses =====
   (13/08, son adoption des deux idées + sa demande de remodelage) */

/* le mot de merci + les liens d'avis, sous le départ (passés au PLURIEL
   le 13/08 au soir, dicté — un bouton par lien, côte à côte) */
.depart-merci { margin-top: 1.4rem; text-align: center; }
.merci-mot { font-size: 1.02rem; margin-bottom: 0.8rem; }
.avis-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.depart-merci .avis-btn {
  display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem;
  text-decoration: none; padding: 0.75rem 1.4rem;
}
.depart-merci .avis-btn svg { width: 1.1rem; height: 1.1rem; }

/* « Garder le livret » : L'ÉTOILE (16/08 au soir, dicté) — fixe en haut
   à GAUCHE, le pendant exact du bouton de langue : même habit, même
   hauteur, alignée tout à gauche. */
.garder-coin { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 42; }
.garder-etoile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2rem;
  font: 700 0.78rem 'Baloo 2', sans-serif;
  color: var(--encre); background: var(--fond);
  border: 1px solid var(--filet); border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(47, 58, 44, 0.4);
}
.garder-etoile svg { width: 1rem; height: 1rem; color: var(--detail); }

/* les liens d'avis, SOUS le livret d'or (16/08 au soir, dicté) : le mot
   de merci et les boutons, juste après l'enveloppe */
.avis-fin { padding: 0.6rem 1.1rem 0.4rem; }
.garder-ligne { align-items: center; gap: 0.6rem; }
.garder-lien {
  font-size: 0.82rem; word-break: break-all; opacity: 0.8;
  max-height: 3.2em; overflow: hidden;
}

/* la page Nos adresses en CARTES (sa demande : « plus importante, pas
   juste du texte ») — chaque ligne de l'hôte devient un lieu */
.adr-liste { display: grid; gap: 0.85rem; margin-top: 1.2rem; }
.adr-carte {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--r-grande);
  padding: 1.05rem 1.15rem;
}
.adr-ic {
  width: 2.1rem; height: 2.1rem; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--detail); border-radius: 999px;
  color: var(--detail);
}
.adr-ic svg { width: 1.05rem; height: 1.05rem; }
.adr-nom { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.08rem; line-height: 1.25; }
.adr-note { margin-top: 0.25rem; font-size: 0.95rem; line-height: 1.55; color: var(--encre-2); }
.adr-lien {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--detail); text-decoration: none;
  border-bottom: 2px solid var(--detail); padding-bottom: 1px;
}

/* ===== Les réglages de l'éditeur (offre la plus chère) ===== */

/* la police des titres : Fraunces par défaut, Baloo ou l'italique */
body[data-police="baloo"] .couv-nom,
body[data-police="baloo"] .ess-nom,
body[data-police="baloo"] .dep-nom,
body[data-police="baloo"] .chap-titre,
body[data-police="baloo"] .fin-mot {
  font-family: 'Baloo 2', sans-serif;
}

body[data-police="italique"] .couv-nom,
body[data-police="italique"] .ess-nom,
body[data-police="italique"] .dep-nom,
body[data-police="italique"] .chap-titre,
body[data-police="italique"] .fin-mot {
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* les coins : discrets (1), posés (2 — l'état naturel du design), généreux (3).
   Déclarés APRÈS les designs : le choix de l'utilisateur gagne toujours,
   et il s'applique aussi aux surfaces propres des designs (mêmes variables). */
body[data-coins="1"] { --r-carte: 8px; --r-grande: 10px; --r-petit: 6px; }
body[data-coins="3"] { --r-carte: 28px; --r-grande: 32px; --r-petit: 16px; }

/* ===== La pastille des livrets d'essai =====
   (le filigrane « BOOKY ESSAI » a été RETIRÉ sur sa dictée du 12/08 —
   seule la petite pastille honnête reste) */

.essai-pastille {
  position: fixed; bottom: 0.85rem; left: 50%; transform: translateX(-50%);
  z-index: 41; white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  color: #f5ead8; background: rgba(47, 58, 44, 0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 0.38rem 1rem;
  pointer-events: none;
}

/* ===== Livret introuvable ===== */

.perdu {
  min-height: 92svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 0.9rem; padding: 2rem 0;
}
.perdu-sur {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.04em; color: #7a8a5e;
}
.perdu-titre { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.8rem; }
.perdu-texte { max-width: 26rem; line-height: 1.65; color: var(--encre-2); }

/* ===== LE LIVRET D'OR — l'enveloppe et la lettre (refait le 16/08) =====
   Sa dictée : « je n'aime pas le design de l'endroit où on écrit, ni le
   design d'affichage avec Laisser un mot, refais-le. »

   LA CARTE DEVIENT UNE ENVELOPPE. Le geste tombe juste : on y glisse un
   mot, elle se referme, elle porte un cachet. Trois éléments, aucun
   dessin importé — la poche du bas et le rabat du haut sont le même
   triangle découpé, l'un retourné ; le rabat bascule sur sa charnière
   haute. Entrouverte, elle appelle ; scellée, elle a servi.

   LA LETTRE remplace le formulaire : plus d'étiquettes en capitales,
   plus de boîtes — une page réglée, et une ligne de signature en pied
   où le prénom s'écrit là où on signe. On n'écrit pas un mot d'adieu
   dans un formulaire. */

.or-bloc {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  /* le rabat dressé et la lettre dépassent par le haut : la place leur
     est faite ici, sinon ils mordraient sur la section d'au-dessus */
  padding: 4.6rem 1.1rem 0.4rem;
}

.or-ouvre {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 0.4rem 0.6rem 0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

/* ---- l'enveloppe ---- */

.or-ouvre {
  opacity: 0;
  transform: translateY(12px);
}
.or-ouvre.or-vu { animation: or-pose 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.or-env {
  position: relative;
  display: block;
  width: 13rem;
  aspect-ratio: 1.72;
  /* le rabat et la lettre DÉPASSENT par le haut : rien ne se rogne ici */
  overflow: visible;
  perspective: 700px;
}
/* LA RESPIRATION (16/08, dicté : « elle grossit et dégrossit légèrement
   pour montrer qu'on peut appuyer dessus ») — lente, ample de 3,5 %,
   jamais une pulsation d'alarme. Elle part une fois la pose finie. */
.or-ouvre.or-vu .or-env { animation: or-respire 2.8s ease-in-out 0.9s infinite; }
@keyframes or-respire {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}

/* LE CORPS — le devant de l'enveloppe, un rectangle simple. C'est lui
   qui passe DEVANT la lettre : c'est ce qui la met dedans. */
.or-env-corps {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 0.55rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* LA LETTRE qui dépasse par le haut, avec ses deux lignes écrites */
.or-env-lettre {
  position: absolute;
  z-index: 2;
  left: 19%; right: 19%;
  top: -19%;
  height: 58%;
  border-radius: 3px 3px 0 0;
  background: #fdfdfc;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.10);
  transition: top 0.4s cubic-bezier(0.4, 0, 0.3, 1);
}
.or-env-lettre::before,
.or-env-lettre::after {
  content: '';
  position: absolute;
  left: 16%; right: 16%;
  height: 2px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.16);
}
.or-env-lettre::before { top: 26%; }
.or-env-lettre::after { top: 44%; right: 42%; }

/* LE RABAT — sa charnière est le bord HAUT du corps, et il se dresse
   au-dessus : c'est ce qui fait qu'une enveloppe ouverte se lit comme
   ouverte. Debout il serait de chant ; penché en arrière de 56°, il se
   voit en raccourci, comme dans la vraie vie. */
.or-env-rabat {
  position: absolute;
  z-index: 1;
  left: -1px; right: -1px;
  bottom: 100%;
  height: 74%;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  /* le dedans du rabat prend l'ENCRE du modèle, pas un gris : un noir
     transparent tirerait toute l'enveloppe vers le froid */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--carte) 76%, var(--encre)),
    color-mix(in srgb, var(--carte) 93%, var(--encre)));
  filter: drop-shadow(0 -1px 0 var(--filet));
  transform-origin: bottom center;
  backface-visibility: visible;
  transform: rotateX(60deg);
  transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.4, 1);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .or-env-rabat { background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05)), var(--carte); }
}

/* le cachet de cire, posé sur la pointe du rabat une fois refermé */
.or-cachet {
  position: absolute;
  /* au dessus du rabat replié — sinon la cire passe dessous et ne se
     voit plus ; et posée SUR la pointe du rabat, à 66 % */
  z-index: 5;
  left: 50%;
  top: 66%;
  width: 1.8rem;
  height: 1.8rem;
  margin: -0.9rem 0 0 -0.9rem;
  border-radius: 50%;
  background: var(--detail);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* l'invitation, sous l'enveloppe — c'est elle qui parle, pas une
   étiquette en capitales */
.or-invit {
  display: block;
  max-width: 17rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.3s ease;
}

/* la pose, quand l'enveloppe entre dans l'écran */
.or-bloc > .or-env { opacity: 1; }
.or-ouvre.or-vu .or-env-rabat { animation: or-entrouvre 0.9s 0.35s cubic-bezier(0.3, 1, 0.4, 1) forwards; }

@keyframes or-pose {
  to { transform: translateY(0); opacity: 1; }
}

/* LA SORTIE DU PAPIER (16/08, dicté : « quand on clique dessus, un papier
   sort et la pop-up apparaît ») — la lettre monte hors de l'enveloppe et
   grandit un peu, le rabat s'efface en grand ; la pop-up suit à 430 ms,
   au moment où le papier est dehors. */
.or-ouvre.or-papier-sort .or-env-lettre {
  animation: or-papier 0.45s cubic-bezier(0.3, 0.9, 0.4, 1) forwards;
}
.or-ouvre.or-papier-sort .or-env-rabat { transform: rotateX(86deg); }
.or-ouvre.or-papier-sort .or-env { animation-play-state: paused; }
@keyframes or-papier {
  to { top: -74%; scale: 1.08; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }
}
/* le rabat se lève franchement, puis retombe : le mouvement dit
   « ouvre-moi » sans qu'on ait à l'écrire */
/* le rabat se relève franchement, puis retombe à demi ouvert : le
   mouvement dit « ouvre-moi » sans qu'on ait à l'écrire */
@keyframes or-entrouvre {
  0%   { transform: rotateX(8deg); }
  55%  { transform: rotateX(70deg); }
  100% { transform: rotateX(60deg); }
}

.or-ouvre:hover .or-env-rabat,
.or-ouvre:focus-visible .or-env-rabat { transform: rotateX(74deg); }
.or-ouvre:hover .or-env-lettre,
.or-ouvre:focus-visible .or-env-lettre { top: -26%; }
.or-ouvre:hover .or-invit { text-decoration-color: var(--detail); }
.or-ouvre:focus-visible { outline: 2px solid var(--detail); outline-offset: 6px; border-radius: 0.9rem; }

/* SCELLÉE — l'état au repos : lettre rentrée, rabat rabattu par-dessus
   le devant, cachet posé */
.or-env-fermee { opacity: 1; transform: none; }
.or-env-fermee .or-env-lettre { top: 6%; }
.or-env-fermee .or-env-rabat { z-index: 4; transform: rotateX(-180deg); animation: none; }
.or-env-fermee .or-cachet { opacity: 1; transform: scale(1); }

/* LE SCELLEMENT (16/08, dicté : « on voit vraiment une animation qu'un
   tampon clôt l'enveloppe ») — quatre temps, orchestrés aux retards :
     0,00 s  le papier rentre chez lui
     0,40 s  le rabat se referme par-dessus
     0,95 s  LE TAMPON FRAPPE — il tombe de haut, en tournant un peu
     1,10 s  l'enveloppe encaisse (elle s'écrase d'un cheveu) et
             l'encre s'étale en anneau autour du cachet
   Le merci n'arrive qu'après la frappe. */
.or-env-scelle .or-env-lettre { animation: or-rentre 0.35s ease-in both; }
.or-env-scelle .or-env-rabat { animation: or-referme 0.5s 0.4s cubic-bezier(0.4, 0, 0.3, 1) both; }
.or-env-scelle .or-cachet { animation: or-sceau 0.32s 0.95s cubic-bezier(0.5, 0, 0.7, 0.4) both; }
.or-env-scelle .or-env-corps { animation: or-choc 0.3s 1.1s ease-out both; }
.or-env-scelle .or-cachet::after {
  content: '';
  position: absolute;
  inset: -0.45rem;
  border-radius: 50%;
  border: 2px solid var(--detail);
  opacity: 0;
  animation: or-encre 0.5s 1.12s ease-out both;
}
.or-env-scelle + .or-scelle { animation: or-merci 0.4s 1.4s ease both; }

@keyframes or-rentre {
  from { top: -74%; scale: 1.08; }
  to   { top: 6%; scale: 1; }
}
@keyframes or-referme {
  from { transform: rotateX(60deg); }
  to   { transform: rotateX(-180deg); }
}
/* la frappe : le tampon arrive grand et de travers, atterrit net */
@keyframes or-sceau {
  from { transform: scale(2.6) rotate(-16deg); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes or-choc {
  0%   { scale: 1; }
  35%  { scale: 1.045 0.94; }
  70%  { scale: 0.985 1.015; }
  100% { scale: 1; }
}
@keyframes or-encre {
  from { opacity: 0.8; scale: 0.6; }
  to   { opacity: 0; scale: 1.5; }
}
@keyframes or-merci {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.or-scelle {
  font-size: 0.95rem;
  text-align: center;
  color: var(--encre-2);
}

/* ---- la lettre, dans le feuillet ---- */

.or-lettre { display: grid; }

.or-lettre-sur {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.or-lettre-titre {
  margin-top: 0.35rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
}

/* la page : réglée, sans cadre — le papier suffit à dire où l'on écrit */
.or-page {
  margin-top: 1.2rem;
  width: 100%;
  font-family: inherit;
  font-size: 1.02rem;
  color: inherit;
  background: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(1.9rem - 1px),
    var(--filet) calc(1.9rem - 1px) 1.9rem
  );
  border: 0;
  border-radius: 0;
  line-height: 1.9rem;
  padding: 0;
  resize: none;
}
.or-page::placeholder { color: var(--encre-2); opacity: 0.7; }
.or-page:focus { outline: none; }
.or-page.or-manque {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(1.9rem - 1px),
    var(--detail) calc(1.9rem - 1px) 1.9rem
  );
}

.or-reste {
  margin-top: 0.5rem;
  text-align: right;
  font-size: 0.76rem;
  color: var(--encre-2);
}

/* la signature : une ligne, un tiret, et le prénom qui s'écrit dessus */
.or-signature {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--filet);
  max-width: 14rem;
  margin-left: auto;
}
.or-tiret { color: var(--encre-2); }
.or-signe {
  flex: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.or-signe::placeholder { font-family: inherit; color: var(--encre-2); opacity: 0.65; }
.or-signe:focus { outline: none; }
.or-signature:focus-within { border-bottom-color: var(--detail); }

.or-envoi {
  justify-self: start;
  margin-top: 1.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  /* la pilule du livret : elle s'inverse toute seule selon l'encre du
     modèle, comme tous les boutons pleins du livret */
  color: var(--pilule-texte);
  background: var(--pilule);
  border: 0;
  border-radius: 999px;
  padding: 0.72rem 1.5rem;
  cursor: pointer;
  transition: background 0.25s ease;
}
.or-envoi:hover { background: var(--detail); }

.or-mention {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--encre-2);
}

@media (prefers-reduced-motion: reduce) {
  /* tout est déjà là : ni pose, ni respiration, ni frappe — l'enveloppe
     entrouverte, et scellée elle est simplement scellée */
  .or-ouvre { opacity: 1; transform: none; }
  .or-ouvre.or-vu { animation: none; }
  .or-ouvre.or-vu .or-env { animation: none; }
  .or-env-rabat { transform: rotateX(60deg); animation: none; transition: none; }
  .or-env-lettre { transition: none; }
  .or-cachet { transition: none; }
  .or-env-fermee .or-env-rabat { transform: rotateX(-180deg); }
  .or-ouvre.or-papier-sort .or-env-lettre { animation: none; }
  .or-env-scelle .or-env-lettre,
  .or-env-scelle .or-env-rabat,
  .or-env-scelle .or-env-corps,
  .or-env-scelle .or-cachet,
  .or-env-scelle .or-cachet::after,
  .or-env-scelle + .or-scelle { animation: none; }
  .or-ouvre.or-vu .or-env-rabat { animation: none; }
}

/* ===== Mouvement réduit ===== */

/* ============================================================
   L'ESPACE D'ÉCHANGE AVEC L'IA (16/08, dicté ; repris le soir :
   il s'ouvre par le bouton « L'IA voyageur » du livret, la
   pastille flottante a vécu) — livret.js. Un panneau simple aux
   couleurs du livret : le fil, le champ, et la confidentialité
   en tout petit sous la saisie.
   ============================================================ */
.iav-panneau {
  position: fixed; right: 0.75rem; bottom: 0.85rem; z-index: 45;
  width: min(22.5rem, calc(100vw - 1.5rem));
  height: min(78svh, 37rem);
  display: flex; flex-direction: column;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 18px;
  box-shadow: 0 24px 54px -24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.iav-panneau[hidden] { display: none; }

.iav-tete {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 0.9rem 0.65rem;
  border-bottom: 1px solid var(--filet);
}
.iav-titre {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: 700 0.95rem 'Baloo 2', sans-serif;
}
.iav-titre svg { width: 1rem; height: 1rem; color: var(--detail); }
.iav-ferme {
  margin-left: auto;
  width: 1.9rem; height: 1.9rem;
  font: 400 1.15rem/1 'Baloo 2', sans-serif;
  color: var(--encre); background: none; border: none;
  border-radius: 999px; cursor: pointer;
}
@media (hover: hover) { .iav-ferme:hover { background: var(--carte); } }

.iav-fil {
  flex: 1; overflow: auto;
  padding: 0.9rem;
  display: grid; gap: 0.55rem; align-content: start;
}
.iav-msg {
  max-width: 85%;
  margin: 0; padding: 0.55rem 0.85rem;
  border-radius: 14px;
  font-size: 0.92rem; line-height: 1.45;
}
.iav-voyageur {
  justify-self: end;
  background: var(--detail); color: var(--fond);
  border-bottom-right-radius: 4px;
}
.iav-repond {
  justify-self: start;
  background: var(--carte);
  border-bottom-left-radius: 4px;
}
.iav-note {
  margin: 0.2rem 0.4rem; justify-self: center;
  font-size: 0.78rem; line-height: 1.45; text-align: center;
  opacity: 0.75;
}
.iav-puce {
  margin: 0 0 -0.15rem; justify-self: center;
  font: 700 0.62rem/1 'Baloo 2', sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0.55;
}

.iav-saisie {
  display: flex; gap: 0.45rem;
  padding: 0.65rem 0.75rem 0.3rem;
  border-top: 1px solid var(--filet);
}
.iav-champ {
  flex: 1; min-width: 0;
  font: 500 0.95rem 'Baloo 2', sans-serif;
  color: var(--encre); background: var(--carte);
  border: 1px solid var(--filet); border-radius: 999px;
  padding: 0.55rem 0.95rem;
}
.iav-champ:focus { outline: 2px solid var(--detail); outline-offset: 1px; }
.iav-envoi {
  width: 2.55rem; height: 2.55rem; flex: none;
  display: grid; place-items: center;
  background: var(--detail); color: var(--fond);
  border: none; border-radius: 999px; cursor: pointer;
}
.iav-envoi svg { width: 1.1rem; height: 1.1rem; }

/* LE TOUT PETIT bouton de confidentialité, sa dictée : « en vraiment
   petit ». Une ligne soulignée sous la saisie, rien de plus. */
.iav-confid {
  justify-self: center; align-self: center;
  margin: 0.1rem auto 0.5rem; display: block;
  font: 600 0.62rem/1 'Baloo 2', sans-serif;
  color: var(--encre); opacity: 0.55;
  background: none; border: none;
  text-decoration: underline; cursor: pointer;
}
.iav-panneau.iav-lit .iav-fil,
.iav-panneau.iav-lit .iav-saisie,
.iav-panneau.iav-lit .iav-confid { display: none; }
.iav-confid-vue { padding: 1rem 1.1rem 0.9rem; }
.iav-confid-texte { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.55; }
.iav-confid-retour {
  font: 700 0.82rem 'Baloo 2', sans-serif;
  color: var(--encre); background: var(--carte);
  border: 1px solid var(--filet); border-radius: 999px;
  padding: 0.5rem 0.95rem; cursor: pointer;
}

@media (max-width: 560px) {
  .iav-panneau { right: 0.6rem; left: 0.6rem; width: auto; bottom: 0.6rem; height: min(82svh, 34rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .couv-descend { animation: none; }
  .feuillet { animation: none; }
  .fond-livret { display: none; }
  * { transition-duration: 0.01ms !important; }
}