/* ==========================================================================
   Booky — styles propres au projet.
   Tailwind (CDN) gère l'utilitaire ; ici vivent la barre de navigation,
   le tiroir mobile, la composition du premier écran, le téléphone dessiné
   et le fond animé. Palette : #7a8a5e / #f5ead8 / #2f3a2c.
   ========================================================================== */

.text-balance { text-wrap: balance; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------- entrées de page
   Lentes et amples : une seule famille d'animation, trois départs décalés. */

.rise {
  animation: monte 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.rise.r2 { animation-delay: 0.18s; }
.rise.r3 { animation-delay: 0.36s; }
.rise.r4 { animation-delay: 0.52s; }

@keyframes monte {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------- barre de navigation
   Barre flottante : détachée des bords, pilule SAUGE translucide avec
   flou d'arrière-plan (passée au vert le 10/08 sur demande — liens et
   burger en crème). Au défilement elle s'opacifie et son ombre se pose
   (classe .compacte, script.js) — rien ne change de taille. */

.bande-nav {
  background: rgba(122, 138, 94, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(47, 58, 44, 0.14);
  border-radius: 999px;
  box-shadow: 0 12px 32px -20px rgba(47, 58, 44, 0.3);
  transition:
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}

.bande-nav.compacte {
  background: rgba(122, 138, 94, 0.98);
  box-shadow: 0 16px 40px -18px rgba(47, 58, 44, 0.4);
}

/* sans flou d'arrière-plan (vieux navigateurs), la barre reste lisible */
@supports not (backdrop-filter: blur(16px)) {
  .bande-nav { background: rgba(122, 138, 94, 0.98); }
}

.barre-haut { height: 3.9rem; }

/* le wordmark crème sur fond TRANSPARENT (booky logo creme.png, généré
   le 10/08) — plus aucun bloc de couleur derrière les lettres */
.logo-nav {
  height: 1.9rem;
  width: auto;
}

@media (min-width: 1024px) {
  .barre-haut { height: 4.6rem; }
  .logo-nav   { height: 2.25rem; }
}

/* La pastille glisse d'un lien à l'autre au survol et revient se poser
   sur la page active. Position et taille calculées dans script.js. */

.pastille {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background: rgba(245, 234, 216, 0.22); /* retour au blanc crème (sa demande du 11/08 soir) */
  border-radius: 999px;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
    width 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.pastille.sans-transition { transition: none !important; }

.lien-nav {
  color: #f5ead8;
  transition: color 0.35s ease;
}

.lien-nav.sous-pastille { color: #ffffff; }

/* le bouton burger : deux traits qui se croisent */
.menu-btn {
  background: rgba(245, 234, 216, 0.18);
}

.menu-btn .trait {
  background: #f5ead8;
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.menu-btn.open .trait:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn.open .trait:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* --------------------------------------------------- menu mobile
   Un tiroir glisse depuis la droite PAR-DESSUS la page (rien ne bouge
   derrière), avec un voile sombre. Les liens entrent en cascade. */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(47, 58, 44, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 50;
  width: min(320px, 84vw);
  background: #7a8a5e;
  border-radius: 32px 0 0 32px;
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  transform: translateX(106%);
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
  box-shadow: -18px 0 50px rgba(47, 58, 44, 0.25);
}

.drawer.open { transform: translateX(0); }

.drawer .lien {
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.drawer.open .lien { opacity: 1; transform: translateX(0); }

.drawer.open .lien:nth-of-type(1) { transition-delay: 0.10s; }
.drawer.open .lien:nth-of-type(2) { transition-delay: 0.15s; }
.drawer.open .lien:nth-of-type(3) { transition-delay: 0.20s; }
.drawer.open .lien:nth-of-type(4) { transition-delay: 0.25s; }
.drawer.open .lien:nth-of-type(5) { transition-delay: 0.30s; }
.drawer.open > .lien              { transition-delay: 0.36s; }

/* page figée pendant que le tiroir est ouvert — posé sur <html> ET <body>,
   certains navigateurs mobiles ignorent l'un des deux */
html.fige, html.fige body { overflow: hidden; }

/* --------------------------------------------------- premier écran
   Le téléphone est le pivot de la phrase : deux fragments de titre
   l'encadrent. Dessous, une ligne et les deux boutons, centrés. */

.hero {
  max-width: 110rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-top: 2.25rem;
  padding-bottom: 3.5rem;
}

.scene {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(1rem, 3.2vw, 4rem);
}

.frag {
  font-size: clamp(1.75rem, 3.4vw, 4.05rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.frag-g { text-align: right; }
.frag-d { text-align: left; }

/* Le titre en un seul bloc, réservé au mobile */
.frag-mobile {
  display: none;
  font-size: 1.9rem;
  line-height: 1.16;
  text-align: center;
  max-width: 22ch;
}

.sous {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(47, 58, 44, 0.72);
  text-align: center;
  max-width: 46ch;
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

/* bouton principal : la flèche dans sa pastille traverse le bouton au
   survol et se penche — mécanique reprise de 21st (voir mcpuse.cc) */
.btn-glisse {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 3.4rem;
  padding: 0 3.7rem 0 1.7rem;
  background: #2f3a2c;
  color: #f5ead8;
  border-radius: 999px;
  overflow: hidden;
  transition: padding 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* le survol n'existe qu'à la souris : sur mobile, l'appui agit sans
   animation (sa demande du 10/08) — d'où les gardes @media (hover: hover) */
@media (hover: hover) {
  .btn-glisse:hover { padding: 0 1.7rem 0 3.7rem; }
}

.btn-rond {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 2.55rem;
  height: 2.55rem;
  margin-top: -1.275rem;
  background: #f5ead8; /* retour au blanc crème (sa demande du 11/08 soir) */
  color: #2f3a2c;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    right 0.5s cubic-bezier(0.22, 0.8, 0.3, 1),
    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .btn-glisse:hover .btn-rond {
    right: calc(100% - 2.55rem - 6px);
    transform: rotate(45deg);
  }
}

@media (min-width: 1024px) {
  .hero {
    justify-content: center;
    min-height: calc(100svh - 5.6rem);
    padding-top: 1.5rem;
    gap: 1.75rem;
  }
  .frag-mobile { display: none; }
  .sous { font-size: 1.32rem; max-width: 50ch; }
}

/* --------------------------------------------------- la scène du téléphone */

/* C'est la SCÈNE entière qui flotte (11/08 soir) : le téléphone, les
   puces et la puce QR bougent d'un seul mouvement. Elle porte aussi sa
   propre entrée (l'ancien .rise r2, fondu dans la liste d'animations). */
.phone-scene {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  animation:
    monte 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.18s both,
    flotte 9s ease-in-out 1.4s infinite;
}

.tilt {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

/* Les puces : des bouts de livret PÊCHE accrochés au téléphone — elles
   suivent le flottement de la scène, sans rythme propre (11/08 soir). */
.puce {
  position: absolute;
  z-index: 20;
  background: #FFB59E;
  border: 1px solid rgba(47, 58, 44, 0.12);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #2f3a2c;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(47, 58, 44, 0.3);
  --rot: 0deg;
  transform: rotate(var(--rot));
}

.puce-qr {
  background: #FFB59E;
  border-radius: 1.1rem;
  padding: 8px;
  line-height: 0;
  left: -15%;
  bottom: 10%;
  --rot: -6deg;
}

.puce-a { right: -19%; top: 42%; --rot: 3deg; }
.puce-b { left: -17%;  top: 4%;  --rot: -4deg; }

/* Le téléphone, dessiné en CSS d'après le composant 21st « iPhone 16 Pro » :
   corps noir, liseré titane, Dynamic Island. Seul le design du cadre a
   changé — taille, structure, animation et écran sont inchangés. */
.phone {
  position: relative;
  width: clamp(215px, 26vw, 335px);
  aspect-ratio: 9 / 18.5;
  background: #000000;
  border: 2px solid #303333;
  border-radius: 2.9rem;
  padding: 7px;
  box-shadow:
    0 30px 60px -18px rgba(47, 58, 44, 0.35),
    0 12px 24px -12px rgba(47, 58, 44, 0.2);
  /* le flottement vit sur .phone-scene depuis le 11/08 soir */
}

@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* l'ancien haut-parleur devient la Dynamic Island, posée SUR l'écran */
.phone-speaker {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 21px;
  border-radius: 999px;
  background: #000000;
  z-index: 2;
}

/* la caméra dans l'île */
.phone-speaker::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #080d4c;
}

.phone-screen {
  height: 100%;
  background: #ffffff; /* le fond du livret blanc et sauge — aucun éclair au chargement */
  border-radius: 2.35rem;
  overflow: hidden;
  /* l'échelle par défaut avant que script.js mesure : celle du téléphone
     à sa taille pleine (317 / 375) — corrigée au premier rendu */
  --ech: 0.845;
}

/* ------------------------------------------ l'écran : le vrai livret
   L'écran dessiné a vécu (16/08, dictée : les exemples de la vitrine
   sont les modèles officiels de Mon espace) : livret.html en iframe, au
   canevas de référence du livret (375 px de large logique), réduit à la
   largeur réelle de l'écran par --ech (posée par script.js). Vignette
   décorative, comme les tuiles de Mon espace : aucun geste ne la
   traverse, aucune barre de défilement — on voit le haut de la première
   page, c'est tout. */

.phone-livret {
  display: block;
  width: 375px;
  height: 812px;
  border: 0;
  background: #ffffff;
  pointer-events: none;
  transform: scale(var(--ech));
  transform-origin: top left;
}

/* --------------------------------------------------- styles communs de section
   Titre, paragraphe et entrée à l'écran partagés par les nouvelles
   sections (la section IA et la section physique gardent leurs classes
   historiques, mêmes valeurs). */

.sec-titre {
  font-size: clamp(1.75rem, 3vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

.sec-para {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.75);
  max-width: 46ch;
}
.sec-para + .sec-para { margin-top: 0.8rem; }

.sec-apparait {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease 0.3s,
    transform 1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.3s;
}
section.ouverte .sec-apparait { opacity: 1; transform: translateY(0); }

@media (min-width: 1024px) {
  .sec-para { font-size: 1.22rem; }
}

/* --------------------------------------------------- section livret numérique
   Le sommaire du livret, comme la table des matières d'une belle
   édition : lignes numérotées en Fraunces, pointillés qui se tracent
   quand la section entre à l'écran. Rien d'éparpillé — tout aligné. */

.numerique {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 4rem;
}

.num-grille {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .numerique { padding-top: 6.5rem; padding-bottom: 6rem; }
  .num-grille { grid-template-columns: 1.1fr 1fr; column-gap: 7rem; }
}

/* La carte QR posée sur la table. Depuis le 16/08 (dictée : « un vrai,
   comme ceux des livrets »), le QR est RÉEL — dessiné par BookyQR, il
   pointe vers le site. Il se pose d'un seul mouvement ample quand la
   section s'ouvre, puis le rayon de scan balaie, lentement. */

.scan-scene {
  display: flex;
  justify-content: center;
  animation: flotte-doux 11s ease-in-out infinite;
}

.scan-carte {
  width: min(385px, 82vw);
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 28px;
  padding: 20px 20px 18px;
  box-shadow: 0 30px 60px -26px rgba(47, 58, 44, 0.35);
}

.qr-cadre {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 6px;
}

/* Le vrai QR (16/08) : un svg de BookyQR — fond blanc, modules vert
   profond, zone de silence comprise. La grille stylisée et sa
   convergence module par module sont parties avec lui : l'entrée est
   UN mouvement, lent et ample, déclenché par .ouverte comme avant. */
.qr-vrai {
  opacity: 0;
  transform: scale(0.9);
  transition:
    transform 1.25s cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.7s ease;
}

.numerique.ouverte .qr-vrai {
  opacity: 1;
  transform: scale(1);
}

.qr-vrai svg {
  display: block;
  width: 100%;
  height: auto;
}

/* le rayon qui balaie le QR une fois assemblé */
.scan-rayon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(255, 181, 158, 0.4), transparent); /* rayon pêche */
  opacity: 0;
  pointer-events: none;
}

.numerique.ouverte .scan-rayon {
  animation: balaye 6s ease-in-out 2.4s infinite;
}

@keyframes balaye {
  0%   { transform: translateY(-120%); opacity: 0; }
  8%   { opacity: 1; }
  38%  { transform: translateY(320%); opacity: 1; }
  46%  { opacity: 0; }
  100% { transform: translateY(320%); opacity: 0; }
}

.scan-nom {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 500;
  color: #2f3a2c;
  text-align: center;
  line-height: 1.2;
}

.scan-libelle {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7a8a5e;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------- section modèles
   Le mur de couvertures : deux rangées qui dérivent lentement en sens
   opposés. Depuis le 16/08 (dictée : les exemples de la vitrine sont les
   modèles officiels de Mon espace), chaque carte est un VRAI modèle en
   miniature (.mur-couv, générées par script.js) ; les gabarits dessinés
   .couv restent plus bas — la ronde d'À propos s'en sert toujours. */

.modeles {
  padding-top: 4.5rem;
  padding-bottom: 5.5rem;
  overflow: hidden;
}

.modeles-tete {
  max-width: 46rem;
  margin: 0 auto 2.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1024px) {
  .modeles { padding-top: 6.5rem; padding-bottom: 8rem; }
  .modeles-tete { margin-bottom: 3.5rem; }
}

/* La bande est DROITE (l'inclinaison est partie le 11/08) et la boucle
   est exacte : l'écart entre cartes vit dans leur marge droite, pas dans
   un gap de rangée — le contenu doublé translaté de -50 % retombe donc
   pile sur lui-même, sans à-coup ni arrêt. */
.defile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.defile-rangee {
  display: flex;
  width: max-content;
  animation: defile-gauche 70s linear infinite;
}

.defile-rangee.r2 { animation: defile-droite 85s linear infinite; }

@keyframes defile-gauche {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes defile-droite {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Une carte du mur = un VRAI modèle (16/08, dictée) : livret.html en
   miniature dans un cadre-photo, le nom du modèle dessous. Le cadre est
   rempli bord à bord — une vignette est une photo de produit, pas une
   fenêtre qui défile (règle des tuiles de Mon espace). L'écart entre
   cartes reste porté par la marge droite : la boucle du mur reste
   exacte, jamais par un gap de rangée. */
.mur-couv {
  flex: none;
  width: 148px;
  margin-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mur-cadre {
  display: block;
  height: 207px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(47, 58, 44, 0.1);
  background: #fbf6ec;
  box-shadow: 0 14px 28px -16px rgba(47, 58, 44, 0.25);
}

.mur-cadre iframe {
  width: 375px;
  height: 812px;
  border: 0;
  pointer-events: none;
  background: #fbf6ec;
  transform: scale(0.3893); /* 146 / 375 : la largeur intérieure du cadre */
  transform-origin: top left;
}

.mur-nom {
  font-size: 12px;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.75);
  text-align: center;
}

/* une couverture de modèle DESSINÉE — trois gabarits ; le mur n'en
   génère plus (16/08), seule la ronde d'À propos les porte encore */
.couv {
  flex: none;
  width: 148px;
  min-height: 122px;
  margin-right: 16px;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 16px;
  padding: 9px 9px 12px;
  box-shadow: 0 14px 28px -16px rgba(47, 58, 44, 0.25);
}

/* gabarit 1 : pleine couleur, nom crème, filet d'édition */
.couv.gabarit-1 {
  position: relative;
  background: var(--c);
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.couv.gabarit-1::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(253, 249, 241, 0.5);
  border-radius: 10px;
  pointer-events: none;
}

.couv-nom-pleine {
  color: #fdf9f1;
  white-space: normal;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
  font-size: 13px;
  line-height: 1.3;
  padding: 0 8px;
  margin-bottom: 0;
}

/* gabarit 2 : nom en tête, socle de couleur en bas */
.couv.gabarit-2 {
  display: flex;
  flex-direction: column;
}

.couv-socle {
  display: block;
  height: 38px;
  border-radius: 10px;
  background: var(--c);
  margin-top: auto;
}

.couv-bande {
  display: block;
  height: 46px;
  border-radius: 10px;
  background: var(--c);
  margin-bottom: 9px;
}

.couv-nom {
  font-size: 12px;
  line-height: 1.2;
  color: #2f3a2c;
  font-weight: 500;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.couv-ligne {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.12);
  margin-bottom: 5px;
}

.couv-ligne.courte { width: 62%; margin-bottom: 0; }

.couv-point {
  float: right;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  margin-top: -1px;
}

/* sur grand écran, les couvertures prennent l'échelle du site (ampleur
   PC, 11/08) — la boucle reste exacte, seule la taille change */
@media (min-width: 1024px) {
  .couv { width: 172px; min-height: 142px; }
  .couv-bande { height: 54px; }
  .couv-socle { height: 44px; }
  .couv-nom { font-size: 13px; }
  .couv-nom-pleine { font-size: 14.5px; }
  /* les vraies miniatures du mur suivent la même échelle (16/08) */
  .mur-couv { width: 172px; }
  .mur-cadre { height: 241px; }
  .mur-cadre iframe { transform: scale(0.4533); } /* 170 / 375 */
  .mur-nom { font-size: 13px; }
}

/* --------------------------------------------------- section les maisons
   Section 6 (11/08, dictée) : les photos du propriétaire posées comme des
   tirages sur une table — bordure crème, coin arrondi, légère rotation,
   et l'épingle PÊCHE (#FFB59E, 4e couleur, détail). Les tirages s'étalent
   en cascade quand la section entre à l'écran (ouvreEnVue, script.js). */

.maisons {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
  overflow: hidden;
}

.maisons-tete {
  max-width: 46rem;
  margin: 0 auto 2.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tirages {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.7vw, 2rem);
  padding: 0 clamp(1rem, 3vw, 3.5rem) 2.4rem;
}

.tirage {
  position: relative;
  flex: 0 1 clamp(150px, 13.8vw, 265px);
  margin: 0;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 16px;
  padding: 9px 9px 0;
  box-shadow: 0 26px 48px -24px rgba(47, 58, 44, 0.4);
  opacity: 0;
  transform: translateY(var(--dy, 0px)) rotate(var(--rot, 0deg));
  /* le survol répond TOUT DE SUITE : l'entrée passe par une animation
     (pose-tirage), plus par une transition — le délai de cascade
     (--att) retardait la réaction au survol (corrigé le 11/08 soir) */
  transition:
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
    border-color 0.35s ease;
}

/* l'entrée en cascade — vaut pour la section maisons de l'accueil ET la
   section instants d'À propos */
section.ouverte .tirage {
  opacity: 1;
  animation: pose-tirage 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) var(--att, 0s) backwards;
}

@keyframes pose-tirage {
  from { opacity: 0; transform: translateY(30px) rotate(0deg); }
}

/* deux tirages plus grands rythment la rangée */
.tirage.grand { flex-basis: clamp(175px, 16.5vw, 320px); }

/* l'épingle — la 4e couleur, en détail seulement */
.tirage::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFB59E;
  box-shadow:
    0 3px 8px rgba(47, 58, 44, 0.25),
    inset 0 -2px 3px rgba(47, 58, 44, 0.12);
  z-index: 2;
}

.tirage img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.tirage-legende {
  padding: 9px 4px 11px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.62);
  text-align: center;
}

/* le tirage se soulève à peine sous la souris, sans perdre son angle */
@media (hover: hover) {
  section.ouverte .tirage:hover {
    transform: translateY(calc(var(--dy, 0px) - 9px)) rotate(calc(var(--rot, 0deg) * 0.55));
    border-color: rgba(255, 181, 158, 0.7);
  }
}

@media (min-width: 1024px) {
  .maisons { padding-top: 6.5rem; padding-bottom: 7.5rem; }
  .maisons-tete { margin-bottom: 3.6rem; }
}

@media (max-width: 1023px) {
  .maisons { padding-top: 5rem; padding-bottom: 4.5rem; }
  /* au doigt : les tirages se balaient de gauche à droite, la carte
     suivante dépasse — fini le bloc d'images empilées (11/08 soir) */
  .tirages {
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.6rem 1.1rem 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .tirages::-webkit-scrollbar { display: none; }
  .tirage, .tirage.grand {
    flex: 0 0 min(235px, 62vw);
    scroll-snap-align: center;
  }
  .tirage-legende { font-size: 11.5px; padding: 7px 3px 9px; }
}

/* --------------------------------------------------- section IA
   v4 (10/08, sa demande) : le descriptif à gauche, la conversation à
   droite. La séquence de révélation reste entrelacée — script.js trie
   les étapes par data-ordre avant de les jouer. */

.ia {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .ia { padding-top: 6.5rem; padding-bottom: 7.5rem; }
}

.ia-grille {
  max-width: 88rem;
  margin: 0 auto;
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 1024px) {
  .ia-grille { grid-template-columns: 1.05fr 1fr; column-gap: 7rem; align-items: center; }
}

.ia-texte { display: flex; flex-direction: column; }

.ia-conv {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ia-titre-g {
  font-size: clamp(1.75rem, 3vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.ia-narration {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.75);
  max-width: 34rem;
  margin-top: 0.7rem;
}

@media (min-width: 1024px) {
  .ia-narration { font-size: 1.22rem; }
}

/* les étapes de récit entrent comme les bulles, en leur temps */
.etape.recit {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.etape.recit.revele { opacity: 1; transform: translateY(0); }

.msg {
  max-width: 74%;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 1.6rem;
  margin: 0;
  box-shadow: 0 16px 32px -20px rgba(47, 58, 44, 0.3);
}

@media (min-width: 1024px) {
  .msg { font-size: 1.15rem; }
}

/* la chute, dernière étape du récit */
.ia-chute {
  margin-top: 1.4rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.85);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .ia-chute { font-size: 1.32rem; }
}

.msg.voyageur {
  align-self: flex-end;
  background: #7a8a5e;
  color: #f5ead8;
  border-bottom-right-radius: 0.45rem;
}

.msg.livret {
  align-self: flex-start;
  background: #f5ead8;
  color: #2f3a2c;
  border-bottom-left-radius: 0.45rem;
}

/* entrée d'un message : lent et ample, comme le reste */
.ia-conv .msg {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ia-conv .msg.revele { opacity: 1; transform: translateY(0); }

/* réponse du livret : d'abord les points qui « écrivent », puis le texte */
.msg .contenu { display: none; }
.msg.ecrit .contenu { display: inline; animation: fondu-msg 0.5s ease both; }

.msg .points {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 2px;
}
.msg.ecrit .points { display: none; }

.msg .points i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(47, 58, 44, 0.45);
  animation: point-pulse 1.1s ease-in-out infinite;
}
.msg .points i:nth-child(2) { animation-delay: 0.18s; }
.msg .points i:nth-child(3) { animation-delay: 0.36s; }

@keyframes point-pulse {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

@keyframes fondu-msg {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------- section livret physique
   La double feuille pliée, en 3D CSS. Fermée à l'arrivée (couverture
   face au visiteur), elle se déplie lentement quand la section entre
   à l'écran — script.js pose .ouverte sur la section. Un pli central,
   pas de tranche ni de dos : ce n'est pas un livre. */

.physique {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 5.5rem;
}

.physique-grille {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.physique-titre {
  font-size: clamp(1.75rem, 3vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

.physique-para {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.75);
  max-width: 46ch;
}
.physique-para + .physique-para { margin-top: 0.8rem; }

/* le texte apparaît une fois la feuille en train de s'ouvrir */
.physique-texte {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease 0.5s,
    transform 1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.5s;
}
.physique.ouverte .physique-texte { opacity: 1; transform: translateY(0); }

@media (min-width: 1024px) {
  .physique { padding-top: 6.5rem; padding-bottom: 8rem; }
  .physique-grille { grid-template-columns: 1.1fr 1fr; column-gap: 7rem; }
  .physique-para { font-size: 1.22rem; }
}

/* ------------------------------------------ la feuille pliée en 3D */

.feuille-scene {
  perspective: 1800px;
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 2.5rem;
  animation: flotte-doux 10s ease-in-out infinite;
}

@keyframes flotte-doux {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.feuille {
  --w: clamp(160px, 18vw, 245px); /* largeur d'une page */
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  transform: rotate(-3deg) translateX(calc(var(--w) / 2));
  transition: transform 1.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.physique.ouverte .feuille { transform: rotate(-3deg) translateX(0); }

.page {
  width: var(--w);
  aspect-ratio: 210 / 297;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.08);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.page-g {
  border-radius: 16px 0 0 16px;
  box-shadow:
    0 32px 55px -24px rgba(47, 58, 44, 0.35),
    inset -14px 0 20px -16px rgba(47, 58, 44, 0.3);
}

/* la moitié qui se replie : recto = page intérieure, verso = couverture */
.pli {
  width: var(--w);
  aspect-ratio: 210 / 297;
  position: relative;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(-176deg);
  transition: transform 1.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.physique.ouverte .pli { transform: rotateY(-12deg); }

.pli .page-d,
.pli .couverture {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page-d {
  border-radius: 0 16px 16px 0;
  box-shadow:
    0 32px 55px -24px rgba(47, 58, 44, 0.28),
    inset 14px 0 20px -16px rgba(47, 58, 44, 0.3);
}

.couverture {
  transform: rotateY(180deg);
  background: #7a8a5e;
  color: #f5ead8;
  border-radius: 0 16px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 18px 14px;
  box-shadow: 0 32px 55px -24px rgba(47, 58, 44, 0.35);
}

/* le filet intérieur de la couverture, l'œil d'édition soignée */
.couverture::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(245, 234, 216, 0.4);
  border-radius: 10px;
  pointer-events: none;
}

.couv-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(245, 234, 216, 0.75);
}

.couv-titre { font-size: 17px; line-height: 1.2; font-weight: 500; }

.couv-lieu { font-size: 10px; color: rgba(245, 234, 216, 0.75); }

/* le contenu des pages intérieures */
.page-eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8a5e;
  font-weight: 700;
}

.pcarte {
  background: #f5ead8;
  border-radius: 10px;
  padding: 8px 10px;
}

.pcarte-label {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
  font-weight: 700;
  margin-bottom: 2px;
}

.pcarte-texte {
  font-size: 10.5px;
  line-height: 1.35;
  color: #2f3a2c;
  font-weight: 600;
}

.page-qr {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-qr svg { flex: none; }

.page-qr p {
  font-size: 9.5px;
  line-height: 1.3;
  color: rgba(47, 58, 44, 0.6);
  font-weight: 600;
}

/* --------------------------------------------------- l'indice de glissement
   Sous chaque contenu qui se balaie au doigt (règle du 11/08, Image de
   marque) : un petit rail discret où un point pêche glisse — il montre
   qu'il faut faire défiler. Invisible sur ordinateur. */

.glisse-indice { display: none; }

@media (max-width: 1023px) {
  .glisse-indice {
    display: flex;
    justify-content: center;
    margin: 0.3rem auto 0;
  }

  /* le rail du blog a déjà une respiration basse : l'indice remonte */
  .rail-scene .glisse-indice { margin-top: -0.8rem; }

  .glisse-indice span {
    position: relative;
    width: 54px;
    height: 6px;
    border-radius: 999px;
    background: rgba(47, 58, 44, 0.1);
  }

  .glisse-indice span::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFB59E;
    animation: glisse-point 2.6s ease-in-out infinite;
  }

  @keyframes glisse-point {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(46px); }
  }
}

/* le petit rappel vers la boutique, tout en bas de l'accueil (11/08) */
.rappel-boutique {
  display: flex;
  justify-content: center;
  padding: 0 0 4rem;
}

@media (min-width: 1024px) {
  .rappel-boutique { padding-bottom: 5.5rem; }
}

/* --------------------------------------------------- fond animé
   Trois taches sauge floues qui dérivent très lentement, et des
   particules qui montent doucement (créées dans script.js).
   Tout est fixe au défilement, derrière le contenu. */

.fond-anime {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.tache {
  position: absolute;
  border-radius: 50%;
  background: #7a8a5e;
  filter: blur(85px);
  will-change: transform;
}

.t1 {
  width: max(34vw, 300px);
  aspect-ratio: 1;
  top: 6%;
  right: -8%;
  opacity: 0.2;
  animation: derive-a 38s ease-in-out infinite alternate;
}

.t2 {
  width: max(26vw, 240px);
  aspect-ratio: 1;
  bottom: -10%;
  left: -8%;
  opacity: 0.16;
  animation: derive-b 46s ease-in-out infinite alternate;
}

.t3 {
  width: max(17vw, 170px);
  aspect-ratio: 1;
  top: 52%;
  left: 40%;
  opacity: 0.12;
  animation: derive-c 52s ease-in-out infinite alternate;
}

@keyframes derive-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6vw, 5vh) scale(1.12); }
}

@keyframes derive-b {
  from { transform: translate(0, 0) scale(1.08); }
  to   { transform: translate(5vw, -4vh) scale(1); }
}

@keyframes derive-c {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4vw, -6vh) scale(1.15); }
}

/* Les particules : petits points sauge qui montent en dérivant.
   Taille, position, durée et opacité sont tirées au sort dans script.js. */
.part {
  position: absolute;
  bottom: -4vh;
  border-radius: 50%;
  background: #7a8a5e;
  opacity: 0;
  animation: monte-part var(--duree) linear var(--retard) infinite;
}

@keyframes monte-part {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: var(--alpha); }
  85%  { opacity: var(--alpha); }
  100% { transform: translate(var(--dx), -108vh); opacity: 0; }
}

/* --------------------------------------------------- mobile
   Le titre passe au-dessus en un seul bloc, le téléphone se fait plus
   petit pour que l'écran d'arrivée tienne presque entier, et les puces
   occupent les flancs au lieu de laisser un couloir vide. */
@media (max-width: 1023px) {
  .hero { gap: 1.1rem; padding-top: 1.25rem; padding-bottom: 2.5rem; }

  .scene { grid-template-columns: 1fr; }
  .frag { display: none; }
  .frag-mobile { display: block; }

  .phone-scene { padding: 0.5rem 0 1rem; }

  .phone {
    width: min(200px, 53vw);
    border-radius: 2.5rem;
    border-width: 2px;
    padding: 6px;
  }

  /* l'écran est le vrai livret (16/08) : seule l'échelle d'attente
     change — celle du téléphone mobile (184 / 375), affinée par
     script.js au premier rendu */
  .phone-screen { border-radius: 2.1rem; --ech: 0.4907; }
  .phone-speaker { top: 11px; height: 16px; }
  .phone-speaker::after { width: 6px; height: 6px; right: 5px; }

  .frag-mobile { font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
  .sous { font-size: 0.98rem; max-width: 34ch; }

  .btn-glisse { height: 3.1rem; padding: 0 3.35rem 0 1.45rem; }
  .btn-rond { width: 2.3rem; height: 2.3rem; margin-top: -1.15rem; }

  /* styles communs de section en mobile */
  .sec-titre { font-size: clamp(1.5rem, 6vw, 1.8rem); margin-bottom: 0.85rem; }
  .sec-para { font-size: 0.98rem; max-width: 36ch; }

  /* section numérique : le texte d'abord, la carte QR dessous
     (ordre inversé le 11/08, sa demande) */
  .numerique { padding-top: 4.5rem; padding-bottom: 4.75rem; }
  .num-grille .scan-scene { order: 2; }
  .num-texte { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .scan-carte { width: min(270px, 74vw); border-radius: 24px; padding: 16px 16px 14px; }
  .scan-nom { font-size: 16px; margin-top: 11px; }
  .scan-libelle { font-size: 11px; }

  /* section modèles : rangées plus denses */
  .modeles { padding-top: 5rem; padding-bottom: 4.5rem; }
  .modeles-tete { margin-bottom: 2rem; }
  .couv { width: 126px; min-height: 106px; margin-right: 13px; }
  .couv-bande { height: 40px; }
  .couv-socle { height: 32px; }
  .couv-nom-pleine { font-size: 12px; }
  .defile { gap: 13px; }
  /* les vraies miniatures du mur, plus petites elles aussi (16/08) */
  .mur-couv { width: 126px; margin-right: 13px; gap: 6px; }
  .mur-cadre { height: 176px; }
  .mur-cadre iframe { transform: scale(0.3307); } /* 124 / 375 */
  .mur-nom { font-size: 11px; }

  /* section livret physique : le texte d'abord, la feuille dessous
     (ordre inversé le 11/08, sa demande) */
  .physique { padding-top: 5rem; padding-bottom: 5rem; }
  .physique-grille { gap: 1.4rem; }
  .physique-grille .feuille-scene { order: 2; }
  .physique-texte { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .physique-titre { font-size: clamp(1.5rem, 6vw, 1.8rem); margin-bottom: 0.85rem; }
  .physique-para { font-size: 0.98rem; max-width: 36ch; }
  .feuille { --w: clamp(140px, 38vw, 170px); }
  .feuille-scene { padding: 1rem 0 2rem; }

  /* les puces se calent aux bords de l'écran au lieu de déborder :
     rien ne doit être coupé, et les flancs restent occupés */
  .puce { font-size: 11px; padding: 7px 12px; }
  .puce-qr { padding: 7px; left: 2px; bottom: 8%; }
  .puce-qr svg { width: 32px; height: 32px; }
  .puce-a { right: 2px; top: 36%; }
  .puce-b { left: 2px; top: 4%; }

  /* section IA : le descriptif au-dessus, centré, la conversation dessous */
  .ia { padding-top: 5rem; padding-bottom: 4.75rem; }
  .ia-grille { gap: 1.6rem; }
  .ia-texte { text-align: center; align-items: center; }
  .ia-conv { gap: 0.75rem; }
  .ia-titre-g { font-size: clamp(1.5rem, 6vw, 1.8rem); }
  .ia-narration { font-size: 0.98rem; margin-top: 0.5rem; }
  .msg { max-width: 85%; font-size: 0.95rem; padding: 0.75rem 1.05rem; }
  .ia-chute { font-size: 1rem; margin-top: 1.1rem; }
}

/* ==========================================================================
   Page À propos — neuf sections depuis le 11/08. Chaque section a son objet
   et son squelette propre ; le côte-à-côte n'apparaît que deux fois
   (questionnaire, planche gravée), conformément à la règle de la page.
   ========================================================================== */

/* --------------------------------------------------- 1. l'histoire (v3)
   Sobre et aéré : le titre porte la seule touche — un trait olive qui se
   dessine dessous, comme un souligné à la main. Le texte respire au
   centre, la signature ferme. Textes validés le 10/08, ne pas y toucher. */

.histoire {
  max-width: 76rem;
  margin: 0 auto;
  padding-top: 3.5rem;
  padding-bottom: 4.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hist-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
}

.hist-titre {
  position: relative;
  display: inline-block;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-top: 0.4rem;
  padding-bottom: 0.55rem;
}

/* le souligné dessiné à la main, tracé après l'arrivée du titre */
.souligne {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  width: 92%;
  height: 14px;
  overflow: visible;
}

.souligne path {
  fill: none;
  stroke: #FFB59E; /* le souligné dessiné, en pêche */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  animation: trace-souligne 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.9s forwards;
}

@keyframes trace-souligne {
  to { stroke-dashoffset: 0; }
}

.hist-corps {
  margin-top: 2rem;
  max-width: 46rem;
}

.hist-corps p {
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(47, 58, 44, 0.8);
}

.hist-corps p + p { margin-top: 1rem; }

.hist-signature {
  margin-top: 1.7rem;
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #7a8a5e;
}

@media (min-width: 1024px) {
  .histoire { padding-top: 5rem; padding-bottom: 6.5rem; }
  /* les textes s'allongent sur les côtés et prennent l'écran (11/08 soir) */
  .hist-corps { max-width: 72rem; }
  .hist-corps p { font-size: 1.32rem; line-height: 1.75; }
}

/* --------------------------------------------- 2. toutes les langues (v7)
   LA PAGE DE PASSEPORT (16/08, dicté : refaire la section, parler de
   toute la traduction, un design 21st réadapté). Le titre porte un mot
   qui change de langue chaque seconde — il commence en français — dans
   une FENTE qui s'élargit à la mesure du mot (mécanique Word Carousel,
   voir mcpuse.cc). Autour, des TAMPONS de langues posés de travers,
   chacun avec son drapeau dessiné en SVG aux teintes du site — jamais
   d'emoji : Windows les affiche en lettres nues. Le champ est coupé aux
   bords : un tampon à moitié hors de la page, c'est exactement un
   passeport. Le texte vit DANS le champ, décalé à gauche — ni
   texte-à-gauche-visuel-à-droite, ni texte-centré-visuel-dessous
   (règle du 11/08). */

.langues-sec { padding: 2rem 0 4.5rem; }

.langues-champ {
  position: relative;
  max-width: 110rem;
  margin: 0 auto;
  min-height: 36rem;
  display: flex;
  align-items: center;
  overflow: hidden;   /* les tampons du bord se coupent, comme sur la page */
}

.langues-texte {
  position: relative;
  z-index: 2;
  max-width: 36rem;
  margin-left: clamp(1.25rem, 7vw, 9rem);
  padding: 3.5rem 0;
}

.langues-fin { font-weight: 600; }

/* la fente du mot : le mot glisse verticalement dedans, la fente
   s'élargit à la mesure du suivant — rien d'autre ne bouge */
.mot-fente {
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
  text-decoration-color: #FFB59E;
}
#mot-langue { display: inline-block; }
#mot-langue.mot-sort {
  transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1), opacity 0.24s ease;
  transform: translateY(-108%);
  opacity: 0;
}
#mot-langue.mot-pose {
  transform: translateY(108%);
  opacity: 0;
}
#mot-langue.mot-entre {
  transition: transform 0.26s cubic-bezier(0, 0, 0.2, 1), opacity 0.26s ease;
  transform: translateY(0);
  opacity: 1;
}

/* ---- les tampons ---- */

.tampons { position: absolute; inset: 0; z-index: 1; }

.tampon {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: rgba(47, 58, 44, 0.72);
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(47, 58, 44, 0.3);
  border-radius: 12px;
  /* le double trait d'un vrai tampon */
  box-shadow: inset 0 0 0 3px #fbf6ec, inset 0 0 0 4px rgba(47, 58, 44, 0.16);
  rotate: var(--tr);
  opacity: 0;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.tampon svg { width: 19px; height: auto; border-radius: 2.5px; flex: none; opacity: 0.9; }

/* l'impression : chaque tampon FRAPPE la page quand la section entre à
   l'écran — grand puis posé, l'un après l'autre (--i posé par apropos.js) */
.langues-champ.vu .tampon {
  animation: tampon-frappe 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes tampon-frappe {
  from { opacity: 0; scale: 1.6; }
  to { opacity: var(--op, 1); scale: 1; }
}

/* l'encre fraîche : le tampon de la langue affichée, au rythme du mot */
.tampon.encre {
  color: #2f3a2c;
  border-color: #FFB59E;
  box-shadow: inset 0 0 0 3px #fbf6ec, inset 0 0 0 4px rgba(255, 181, 158, 0.55),
    0 6px 18px -8px rgba(47, 58, 44, 0.3);
}

/* sur écran étroit (16/08 au soir, dicté : « sur mobile, autour, dans le
   fond ») : les tampons restent épinglés, mais sur leur SECOND jeu
   d'épingles (--mx/--my), autour du texte et DERRIÈRE lui — assourdis
   pour que la lecture prime ; le tampon encré, lui, revient en pleine
   encre. Le champ garde du haut et du pied pour les accueillir. */
@media (max-width: 1023px) {
  .langues-champ { display: block; min-height: 0; }
  .langues-texte { margin-left: 0; padding: 5.5rem 1.25rem 1rem; }
  .langues-champ { padding-bottom: 11rem; }
  .tampon {
    left: var(--mx, var(--tx));
    top: var(--my, var(--ty));
    --op: 0.42;
    scale: 0.9;
  }
  .tampon.encre { --op: 1; opacity: var(--op); }
}

@media (prefers-reduced-motion: reduce) {
  /* tout est déjà là : pas de frappe, pas de fente qui bouge — le mot
     reste en français, apropos.js ne lance rien */
  .tampon { opacity: var(--op, 1); }
  .langues-champ.vu .tampon { animation: none; }
  .mot-fente { transition: none; }
}

/* ------------------------------------------- (les instants v6, en réserve)
   LA SIMPLICITÉ (11/08 fin de soirée, dictée) : trois grandes images en
   ligne. Remplacée par la page de passeport le 16/08 — les règles
   restent pour le jour où les images reviennent ailleurs. */

.instants {
  max-width: none;
  padding-top: 0.5rem;
  padding-bottom: 5.5rem;
}

.instants-tete {
  max-width: 46rem;
  margin: 0 auto 2.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* La galerie : trois grandes images en ligne, sur presque toute la
   largeur. Au survol, l'image se soulève et zoome doucement — réponse
   immédiate, sans délai. */
.galerie {
  display: flex;
  gap: clamp(1rem, 1.8vw, 1.9rem);
  max-width: 130rem;
  margin: 0 auto;
  padding: 0.4rem clamp(1rem, 3vw, 3rem) 0;
}

.galerie-image {
  margin: 0;
  flex: 1;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 55px -28px rgba(47, 58, 44, 0.4);
  transition:
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
    box-shadow 0.45s ease;
}

.galerie-image img {
  width: 100%;
  height: clamp(340px, 36vw, 540px);
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .galerie-image:hover {
    transform: translateY(-8px);
    box-shadow: 0 42px 68px -28px rgba(47, 58, 44, 0.5);
  }
  .galerie-image:hover img { transform: scale(1.06); }
}

@media (min-width: 1024px) {
  .instants { padding-top: 0.5rem; padding-bottom: 7rem; }
  .instants-tete { margin-bottom: 2.6rem; }
}

@media (max-width: 1023px) {
  .instants { padding-top: 0.5rem; padding-bottom: 4.5rem; }
  .instants-tete { margin-bottom: 1.8rem; }
  /* au doigt : les images se balaient de gauche à droite */
  .galerie {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0.4rem 1.1rem 1.2rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .galerie::-webkit-scrollbar { display: none; }
  .galerie-image { flex: 0 0 min(280px, 72vw); scroll-snap-align: center; }
  .galerie-image img { height: min(88vw, 400px); }
}

/* --------------------------------------------------- 2. le fil du séjour
   Un fil vertical se trace au défilement (hauteur posée par apropos.js)
   et allume les moments du séjour un à un. */

.sejour {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 4rem;
}

.sejour-tete {
  max-width: 46rem;
  margin: 0 auto 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* pas de padding sur la scène : les points des moments et la ligne
   partagent les mêmes coordonnées, sinon les centres se décalent
   (corrigé le 11/08 — les points n'étaient pas centrés sur la ligne) */
.fil-scene {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
}

.fil-ligne,
.fil-trace {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 3px;
  border-radius: 999px;
}

.fil-ligne { bottom: 8px; background: rgba(47, 58, 44, 0.1); }

.fil-trace {
  height: 0;
  background: #FFB59E; /* la barre qui se remplit, en pêche (11/08 soir) */
  transition: height 0.3s linear;
}

.moment {
  position: relative;
  padding: 0 0 2.4rem 3rem;
  opacity: 0.3;
  transform: translateX(8px);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.moment:last-child { padding-bottom: 0.4rem; }

.moment.actif { opacity: 1; transform: translateX(0); }

.moment-point {
  position: absolute;
  left: 4px; /* centre à 11,5px, comme la ligne (left 10px + 3px de large) */
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fbf6ec;
  border: 3px solid rgba(47, 58, 44, 0.18);
  transition:
    border-color 0.5s ease,
    background-color 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.moment.actif .moment-point {
  border-color: #FFB59E; /* le point s'allume en pêche */
  background: #FFB59E;
  transform: scale(1.15);
}

.moment-titre {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.moment-texte {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(47, 58, 44, 0.72);
  max-width: 44ch;
}

.sejour-note {
  margin: 2.6rem auto 0;
  max-width: 44ch;
  text-align: center;
  font-size: 1rem;
  color: rgba(47, 58, 44, 0.65);
}

@media (min-width: 1024px) {
  .sejour { padding-top: 6.5rem; padding-bottom: 6rem; }
  .moment-titre { font-size: 1.45rem; }
  .moment-texte { font-size: 1.16rem; }
  .sejour-note { font-size: 1.08rem; }
  .moment-point { top: 7px; } /* centré sur la première ligne du titre, plus grand ici */
}

/* --------------------------------------------------- 3. le questionnaire
   Une seule carte, deux faces : la réponse du propriétaire au recto, la
   réponse servie au voyageur au verso. Elle se retourne lentement à
   l'entrée à l'écran, puis au clic. */

.savoir {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.savoir-grille {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .savoir { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  /* depuis le 11/08 fin de soirée (dicté) : la CARTE à gauche, le TEXTE
     à droite — l'écart reste celui de la colonne, sans aimants */
  .savoir-grille { grid-template-columns: 1.05fr 1fr; column-gap: 5rem; }
  .qface-question { font-size: 1.55rem; }
}

.qcarte-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}

.qcarte-porte {
  perspective: 1600px;
  display: flex;
  justify-content: center;
  animation: flotte-doux 10s ease-in-out infinite;
}

/* Le bouton d'action des objets (carte IA, livret) : composant 21st
   « InteractiveHoverButton » fourni par le propriétaire, réécrit en
   vanilla Booky (voir mcpuse.cc). Au repos : pilule claire, libellé, et
   un point olive posé dedans. Au survol : le point inonde tout le bouton,
   le libellé glisse dehors et revient en crème avec une flèche. */
.btn-survol {
  position: relative;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(47, 58, 44, 0.18);
  background: #fdf9f1;
  color: #2f3a2c;
  padding: 0.78rem 1.7rem 0.78rem 2.45rem;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 12px 24px -16px rgba(47, 58, 44, 0.25);
}

.btn-survol .bs-texte {
  position: relative;
  z-index: 10;
  display: inline-block;
  transform: translateX(3px);
  transition:
    transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.45s ease;
}

@media (hover: hover) {
  .btn-survol:hover .bs-texte {
    transform: translateX(3rem);
    opacity: 0;
  }
}

.btn-survol .bs-calque {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #2f3a2c; /* l'inondation est pêche : le texte repasse au vert profond */
  transform: translateX(3rem);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.45s ease;
}

@media (hover: hover) {
  .btn-survol:hover .bs-calque {
    transform: translateX(0);
    opacity: 1;
  }
}

/* le point pêche, posé à gauche du libellé, qui grossit au survol
   jusqu'à remplir la pilule — la 4e couleur sur chaque bouton d'action */
.btn-survol .bs-point {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 999px;
  background: #FFB59E;
  transition: all 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .btn-survol:hover .bs-point {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    transform: scale(1.8);
  }
}

.qcarte {
  position: relative;
  width: min(400px, 86vw);
  aspect-ratio: 5 / 6;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.22, 0.8, 0.3, 1);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.qcarte.tournee { transform: rotateY(180deg); }

.qface {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.qface.recto {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.08);
  box-shadow: 0 30px 60px -26px rgba(47, 58, 44, 0.35);
}

.qface.verso {
  transform: rotateY(180deg);
  background: #f5ead8;
  box-shadow: 0 30px 60px -26px rgba(47, 58, 44, 0.35);
}

.qface-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
}

.qface-question {
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 500;
}

.qface-reponse {
  background: #f5ead8;
  border-radius: 16px;
  padding: 13px 15px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #2f3a2c;
  font-weight: 600;
}

.qface-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
  font-weight: 700;
  margin-bottom: 4px;
}

.qface-indice {
  margin-top: auto;
  font-size: 0.85rem;
  color: rgba(47, 58, 44, 0.5);
  font-weight: 600;
}

/* les deux bulles du verso, même langage que la conversation de l'accueil */
.vmsg {
  border-radius: 1.4rem;
  padding: 0.8rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 92%;
  box-shadow: 0 14px 28px -18px rgba(47, 58, 44, 0.3);
}

.vmsg.voyageur {
  align-self: flex-end;
  background: #7a8a5e;
  color: #f5ead8;
  border-bottom-right-radius: 0.45rem;
}

.vmsg.livret {
  align-self: flex-start;
  background: #ffffff;
  color: #2f3a2c;
  border-bottom-left-radius: 0.45rem;
}

/* --------------------------------------------------- 4. le livret papier
   L'aperçu posé sur le fond de page : un livret fermé dont la couverture
   s'entrouvre d'elle-même par moments — on devine l'intérieur, l'envie
   d'ouvrir vient sans consigne. Le survol l'ouvre (desktop), le toucher
   aussi (apropos.js). Les pastilles changent la teinte de la couverture. */

.imprime {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

/* le livret à GAUCHE, le texte à DROITE (11/08 soir, sa demande) */
.imprime-grille {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.imprime-objet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

@media (min-width: 1024px) {
  .imprime-grille { grid-template-columns: 1fr 1.05fr; column-gap: 7rem; }
}

.mini-scene {
  perspective: 1500px;
  display: flex;
  justify-content: center;
  padding: 0.4rem 0 0.8rem;
}

/* le livret : page gauche fixe + pli qui porte la couverture (recto) et
   la page droite (verso) — même construction que la feuille de l'accueil */
.mini-livret {
  --couv: #7a8a5e;
  --mw: clamp(150px, 18vw, 220px); /* largeur d'une page */
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  transform: rotate(-2deg) translateX(calc(var(--mw) / 2));
  transition: transform 1.1s cubic-bezier(0.22, 0.8, 0.3, 1);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.mpage {
  width: var(--mw);
  aspect-ratio: 210 / 297;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.08);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.mpage-g {
  border-radius: 14px 0 0 14px;
  box-shadow:
    0 30px 55px -24px rgba(47, 58, 44, 0.35),
    inset -12px 0 18px -14px rgba(47, 58, 44, 0.3);
}

.mpli {
  display: block;
  width: var(--mw);
  aspect-ratio: 210 / 297;
  position: relative;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(-176deg);
  transition: transform 1.1s cubic-bezier(0.22, 0.8, 0.3, 1);
  /* l'invitation : la couverture s'entrouvre toute seule par moments */
  animation: entrouvre 6.5s ease-in-out 1.8s infinite;
}

@keyframes entrouvre {
  0%, 48%, 100% { transform: rotateY(-176deg); }
  62%           { transform: rotateY(-148deg); }
  76%           { transform: rotateY(-176deg); }
}

.mpli .mpage-d,
.mpli .mcouv {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mpage-d {
  border-radius: 0 14px 14px 0;
  box-shadow:
    0 30px 55px -24px rgba(47, 58, 44, 0.28),
    inset 12px 0 18px -14px rgba(47, 58, 44, 0.3);
}

/* la couverture porte la teinte choisie (--couv, posée par apropos.js) */
.mcouv {
  transform: rotateY(180deg);
  background: var(--couv);
  transition: background-color 0.7s ease;
  color: #f5ead8;
  border-radius: 0 14px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  box-shadow: 0 30px 55px -24px rgba(47, 58, 44, 0.4);
}

.mcouv::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(245, 234, 216, 0.4);
  border-radius: 9px;
  pointer-events: none;
}

/* ouvert : par le bouton d'action ou un toucher sur le livret (.ouvert,
   apropos.js) — l'entrebâillement s'arrête, la couverture se déplie */
.mini-livret.ouvert { transform: rotate(-2deg) translateX(0); }
.mini-livret.ouvert .mpli { transform: rotateY(-10deg); animation: none; }

.mini-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(245, 234, 216, 0.75);
}

.mini-nom { font-size: 17px; line-height: 1.2; font-weight: 500; }

.mini-lieu { font-size: 10px; color: rgba(245, 234, 216, 0.75); }

/* l'intérieur : les petites cartes du livret */
.mp-eyebrow {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8a5e;
  font-weight: 700;
}

.mpcarte {
  display: block;
  background: #f5ead8;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 9.5px;
  line-height: 1.35;
  color: #2f3a2c;
  font-weight: 600;
}

.mpcarte b {
  display: block;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
  margin-bottom: 2px;
}

.mini-teintes {
  display: flex;
  gap: 12px;
}

.teinte {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--t);
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(253, 249, 241, 0.6);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), outline-color 0.35s ease;
}

@media (hover: hover) {
  .teinte:hover { transform: scale(1.12); }
}

.teinte.active { outline-color: rgba(47, 58, 44, 0.45); }

@media (min-width: 1024px) {
  .imprime { padding-top: 6.5rem; padding-bottom: 6.5rem; }
}

/* --------------------------------------------------- 5. la planche gravée
   (16/08, dicté : « la section avec la planche à graver dans À propos doit
   vraiment être la planche à graver de Mon espace ».) L'objet n'est plus
   dessiné ici : c'est celui de l'atelier — .objet3d et .planche3d, dans la
   partie scène 3D de cette feuille — bois, gravure en creux, vrai QR brûlé
   (qr.js). Ne vivent ici que la grille de la section, la pose de l'objet
   et l'encrage de la gravure à l'entrée à l'écran. */

.grave {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

.grave-grille {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .grave { padding-top: 6.5rem; padding-bottom: 7.5rem; }
  .grave-grille { grid-template-columns: 1.05fr 1fr; column-gap: 7rem; }
}

.planche-scene {
  display: flex;
  justify-content: center;
  /* la même scène que l'atelier : c'est la perspective qui donne à la
     planche son attitude — sans elle, la rotation s'aplatit */
  perspective: 1600px;
  animation: flotte-doux 11s ease-in-out infinite;
}

/* Posée comme au repos dans Mon espace : l'attitude de l'atelier, rotation
   Y divisée par deux (une planche ne se retourne pas). Ici on la regarde,
   on ne la tient pas — le curseur de prise n'a rien à faire là. */
.grave .objet3d {
  --rx: 8deg;
  --ry: -12deg;
  cursor: default;
}

.grave .objet3d:active { cursor: default; }

@media (min-width: 1024px) {
  /* l'ampleur PC (11/08) : le même objet, vu de plus près — le zoom
     de l'atelier, rien d'autre */
  .grave .objet3d { --zoom: 1.3; }
  .planche-scene { align-items: center; min-height: 25rem; }
}

/* la gravure s'encre quand la section arrive à l'écran : le nom, le mot,
   puis le QR — lent et posé, comme une brûlure qui prend */
.grave .p3-titre,
.grave .p3-desc,
.grave .p3-qr {
  opacity: 0;
  transition: opacity 1.2s ease var(--att, 0s);
}

.grave .p3-desc { --att: 0.45s; }
.grave .p3-qr { --att: 0.9s; }

.grave.ouverte .p3-titre,
.grave.ouverte .p3-desc,
.grave.ouverte .p3-qr { opacity: 1; }

/* --------------------------------------------------- 6. votre espace
   La carte de suivi du propriétaire : les questions posées remontent,
   les barres se tracent quand la section s'ouvre. */

.espace {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.espace-tete {
  max-width: 46rem;
  margin: 0 auto 2.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tdb {
  max-width: 37rem;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 28px;
  padding: 24px 26px 26px;
  box-shadow: 0 30px 60px -28px rgba(47, 58, 44, 0.35);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease 0.25s,
    transform 1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.25s;
}

.espace.ouverte .tdb { opacity: 1; transform: translateY(0); }

.tdb-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tdb-nom { font-size: 1.15rem; font-weight: 500; }

.tdb-periode {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.45);
}

/* les trois chiffres de la semaine : scans, ouvertures, questions */
.tdb-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tdb-stat {
  background: rgba(122, 138, 94, 0.09);
  border-radius: 16px;
  padding: 10px 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.6);
  text-align: center;
}

.tdb-grand {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 500;
  color: #2f3a2c;
}

.tdb-lignes {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tdb-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 7px;
}

.tdb-q { font-size: 0.95rem; font-weight: 600; }

.tdb-fois {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2f3a2c;
  background: rgba(122, 138, 94, 0.16);
  border-radius: 999px;
  padding: 2px 10px;
}

.tdb-barre {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.08);
  position: relative;
  overflow: hidden;
}

.tdb-barre::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: #7a8a5e;
  transition: width 1.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.espace.ouverte .tdb-barre::after { width: var(--l); }

.espace.ouverte .tdb-ligne:nth-child(1) .tdb-barre::after { transition-delay: 0.5s; }
.espace.ouverte .tdb-ligne:nth-child(2) .tdb-barre::after { transition-delay: 0.75s; }
.espace.ouverte .tdb-ligne:nth-child(3) .tdb-barre::after { transition-delay: 1s; }

.espace-note {
  margin: 2.4rem auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: 1rem;
  color: rgba(47, 58, 44, 0.65);
}

@media (min-width: 1024px) {
  .espace { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  .espace-note { font-size: 1.08rem; }
}

/* --------------------------------------------------- 8. le catalogue
   V3 : LA RONDE (11/08 soir — sa règle : ni texte-gauche/élément-droite,
   ni texte-haut/élément-bas). Le texte vit AU CENTRE d'un anneau de
   couvertures qui orbitent lentement en ellipse — derrière le texte en
   haut, devant en bas (apropos.js pose les positions en rAF, pause au
   survol). La vitrine coverflow est en réserve : fonctions.cc. */

.cata {
  max-width: none;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  overflow: hidden;
}

.cata-tete {
  max-width: 46rem;
  margin: 0 auto 2.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* la scène de la ronde : le texte au centre, l'anneau tout autour */
.ronde-scene {
  position: relative;
  height: clamp(500px, 46vw, 640px);
}

.ronde {
  position: absolute;
  inset: 0;
}

/* les couvertures en orbite : empilées au centre, apropos.js les écarte
   sur l'ellipse et les fait tourner */
.ronde .couv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 152px;
  min-height: 126px;
  margin: -63px 0 0 -76px;
  will-change: transform, opacity;
}

.ronde .couv-bande { height: 46px; }

/* le texte, au cœur de l'anneau — toujours AU-DESSUS des couvertures
   (elles plafonnent à z-index 15) ; le halo crème garde les lettres
   lisibles quand une couverture passe derrière */
.ronde-texte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  z-index: 20;
  max-width: 34rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.2rem;
  text-shadow:
    0 0 18px rgba(251, 246, 236, 0.95),
    0 0 7px rgba(251, 246, 236, 0.9);
}

@media (max-width: 1023px) {
  .ronde-scene { height: 560px; }
  .ronde .couv {
    width: 106px;
    min-height: 90px;
    margin: -45px 0 0 -53px;
    padding: 7px 7px 9px;
    border-radius: 12px;
  }
  .ronde .couv-bande { height: 32px; margin-bottom: 6px; border-radius: 8px; }
  .ronde .couv-socle { height: 26px; border-radius: 8px; }
  .ronde .couv-nom { font-size: 10.5px; margin-bottom: 5px; }
  .ronde .couv-nom-pleine { font-size: 11.5px; }
  .ronde .couv-ligne { height: 4px; margin-bottom: 4px; }
  /* le texte central prend TOUTE la largeur, bord à bord moins une
     respiration (2e demande du 11/08 : encore trop compressé) */
  .ronde-texte {
    left: 0;
    right: 0;
    max-width: none;
    transform: translateY(-54%);
    padding: 0 1rem;
  }
  .ronde-texte .sec-titre { font-size: 1.55rem; }
  .ronde-texte .sec-para { font-size: 1rem; max-width: none; }
}

/* la pastille des modèles fraîchement ajoutés — la 4e couleur, en détail */
.couv-nouveau {
  position: absolute;
  top: -9px;
  right: -6px;
  z-index: 1;
  background: #FFB59E;
  color: #2f3a2c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 8px 16px -8px rgba(47, 58, 44, 0.4);
}

@media (min-width: 1024px) {
  .cata { padding-top: 6.5rem; padding-bottom: 6.5rem; }
}

/* --------------------------------------------------- 8. les avis
   Petite section : une rangée d'avis qui défile lentement, fondu sur les
   bords, en pause au survol. Cartes générées par apropos.js. */

.avis {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.avis-titre {
  text-align: center;
  font-size: clamp(1.4rem, 2.5vw, 2.15rem);
  margin-bottom: 1.9rem;
}

.avis-defile {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.avis-rangee {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: defile-gauche 60s linear infinite;
}

/* la règle du 11/08 : ce qui défile ne s'arrête jamais — la pause au
   survol des avis a été retirée */

/* La case d'avis, reprise du composant 21st « card-testimonial » :
   étoiles en haut, guillemet, citation, puis avatar (initiales) + nom
   en pied. Contenus d'exemple demandés le 10/08 — apropos.js les génère. */

.avis-carte {
  flex: none;
  width: 320px;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 20px 22px;
  box-shadow: 0 14px 28px -18px rgba(47, 58, 44, 0.22);
  display: flex;
  flex-direction: column;
}

.avis-etoiles {
  display: flex;
  gap: 4px;
}

.avis-etoiles svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(122, 138, 94, 0.55);
  stroke-width: 1.6;
}

/* le jour où une vraie note existe : .pleine remplit l'étoile — en pêche */
.avis-etoiles svg.pleine {
  fill: #FFB59E;
  stroke: #FFB59E;
}

/* (le guillemet ouvrant du composant d'origine a vécu — 15/08, dicté :
   « il est seul, supprime-le ». La citation remonte donc contre les
   étoiles, et respire d'autant. Sa règle est retirée avec lui.) */

.avis-texte {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.85);
  flex: 1;
}

.avis-pied {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* l'avatar : les initiales dans une pastille sauge, aucune photo */
.avis-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(122, 138, 94, 0.18);
  color: #2f3a2c;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.avis-nom {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.avis-qui { font-size: 0.9rem; font-weight: 700; color: #2f3a2c; }

.avis-ou { font-size: 0.8rem; font-weight: 600; color: rgba(47, 58, 44, 0.55); }

@media (min-width: 1024px) {
  .avis { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .avis-texte { font-size: 1.02rem; }
}

/* --------------------------------------------------- 9. les compteurs
   Deux nombres qui descendent lentement jusqu'au prix quand la section
   entre à l'écran, puis une phrase qui s'écrit (apropos.js). Le départ
   plus haut est un effet visuel assumé — aucun texte n'en parle. */

.compteurs {
  max-width: 70rem;
  margin: 0 auto;
  padding-top: 4.5rem;
  padding-bottom: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.6rem;
  text-align: center;
}

.compteur {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s ease,
    transform 1s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.compteurs.ouverte .compteur { opacity: 1; transform: translateY(0); }
.compteurs.ouverte .compteur:nth-of-type(2) { transition-delay: 0.2s; }

.compteur-label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
}

.compteur-nombre {
  margin-top: 0.5rem;
  font-size: clamp(3.6rem, 8vw, 6rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* la périodicité, en petit à côté du chiffre (dictée le 11/08) */
.compteur-freq {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 0.22em;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.55);
  margin-left: 0.3em;
}

.compteur-phrase {
  margin: 0.9rem auto 0;
  min-height: 1.7em;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.78);
}

/* le curseur d'écriture — la 4e couleur, en détail */
.curseur {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #FFB59E;
  margin-left: 2px;
  vertical-align: -0.12em;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.compteur.tape .curseur {
  opacity: 1;
  animation: clignote 1s steps(2) infinite;
}

.compteur.fini .curseur { opacity: 0; animation: none; }

@keyframes clignote {
  50% { opacity: 0; }
}

.compteurs-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2f3a2c;
  opacity: 0.7;
  transition: opacity 0.35s ease, gap 0.35s ease;
}

.compteurs-lien:hover { opacity: 1; gap: 12px; }

@media (min-width: 1024px) {
  .compteurs { padding-top: 6rem; padding-bottom: 8rem; }
  .compteur-phrase { font-size: 1.28rem; }
}

/* ==========================================================================
   Page Boutique — l'enseigne, les abonnements (cartes du composant 21st
   « pricing-section » fourni par le propriétaire, voir mcpuse.cc), puis
   le rayon d'objets posés sur des étagères dessinées. Prix et contenus
   d'offres FACTICES — ils ne vivent que dans boutique.html.
   ========================================================================== */

.shop-tete {
  max-width: 76rem;
  margin: 0 auto;
  padding-top: 3.5rem;
  padding-bottom: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-ligne {
  margin-top: 1.4rem;
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.75);
}

/* --------------------------------------------------- les abonnements */

.abos {
  max-width: 92rem;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.abos-tete {
  max-width: 46rem;
  margin: 0 auto 2.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offres {
  display: grid;
  gap: 1.4rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .offres { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.offre {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 26px;
  padding: 26px 26px 24px;
  box-shadow: 0 22px 44px -26px rgba(47, 58, 44, 0.28);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.abos.ouverte .offre { opacity: 1; transform: translateY(0); }
.abos.ouverte .offres .offre:nth-child(1) { transition-delay: 0.05s; }
.abos.ouverte .offres .offre:nth-child(2) { transition-delay: 0.15s; }
.abos.ouverte .offres .offre:nth-child(3) { transition-delay: 0.25s; }
.abos.ouverte .offres-duo .offre:nth-child(1) { transition-delay: 0.35s; }
.abos.ouverte .offres-duo .offre:nth-child(2) { transition-delay: 0.45s; }

.offre-nom {
  font-size: 1.35rem;
  font-weight: 500;
}

.offre-prix {
  margin-top: 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.offre-montant {
  font-size: 2.7rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.offre-freq {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.55);
}

/* conciergeries : pas de prix, uniquement sur demande (11/08 soir) */
.offre-montant.offre-demande { font-size: 1.9rem; }

.offre-desc {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.65);
}

.offre-liste {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.offre-liste li {
  position: relative;
  padding-left: 1.65rem;
}

.offre-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: rgba(255, 181, 158, 0.4); /* coches sur pastille pêche */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.6l2.6 2.6 5-6' fill='none' stroke='%232f3a2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.offre-cta {
  margin-top: 1.5rem;
  width: 100%;
  /* sur un bouton pleine largeur, le libellé se centre vraiment : le
     padding gauche réservé au point (2,45rem) décalait le texte —
     « Parlons-en » et « Demander un devis » flottaient à droite */
  padding-left: 1.7rem;
}

.offre-cta .bs-texte { transform: none; }

/* la ligne barrée : ce que l'offre ne comprend pas — chaque carte liste
   le même inventaire, coché ou barré (demande du 10/08) */
.offre-liste li.non { color: rgba(47, 58, 44, 0.42); }

.offre-liste li.non::before {
  background-color: rgba(47, 58, 44, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%232f3a2c' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.offre.vedette .offre-liste li.non { color: rgba(245, 234, 216, 0.42); }

.offre.vedette .offre-liste li.non::before {
  background-color: rgba(245, 234, 216, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%23f5ead8' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* la carte mise en avant : vert profond, badge posé dessus */
.offre.vedette {
  background: #2f3a2c;
  color: #f5ead8;
  border-color: rgba(245, 234, 216, 0.12);
  box-shadow: 0 30px 55px -26px rgba(47, 58, 44, 0.55);
}

@media (min-width: 1024px) {
  .offre.vedette { transform: translateY(12px) scale(1.03); }
  .abos.ouverte .offre.vedette { transform: translateY(-8px) scale(1.03); }
}

/* le badge de la vedette — la 4e couleur, en détail */
.offre-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFB59E;
  color: #2f3a2c;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.offre.vedette .offre-freq { color: rgba(245, 234, 216, 0.6); }
.offre.vedette .offre-desc { color: rgba(245, 234, 216, 0.72); }

/* sur les cartes colorées (vedette, conciergerie), les boutons gardent
   leur ancienne couleur : point olive, texte survolé crème (11/08 soir) */
.offre.vedette .btn-survol .bs-point,
.offre.conciergerie .btn-survol .bs-point { background: #7a8a5e; }

.offre.vedette .btn-survol .bs-calque,
.offre.conciergerie .btn-survol .bs-calque { color: #f5ead8; }

.offre.vedette .offre-liste li::before {
  background-color: rgba(255, 181, 158, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.6l2.6 2.6 5-6' fill='none' stroke='%23FFB59E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.abos-note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(47, 58, 44, 0.5);
}

/* les deux offres larges : conciergeries et sur mesure — refaites le
   10/08 (elles ne vendaient pas assez) : cartes pleines avec surtitre,
   prix au logement côté conciergeries, liste d'arguments, CTA en pied */
.offres-duo {
  margin-top: 1.6rem;
  display: grid;
  gap: 1.4rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .offres-duo { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.offre.large .offre-desc { max-width: 44ch; }

/* le padding-top: 0 qui vivait ici décalait « Parlons-en » et
   « Demander un devis » vers le haut de leur pilule — le libellé
   n'était pas centré au repos (corrigé le 11/08 soir) */
.offre.large .offre-cta { margin-top: auto; }

.offre.large .offre-liste { margin-bottom: 1.5rem; }

.offre-surtitre {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
  margin-bottom: 0.4rem;
}

/* la carte conciergeries, en sauge plein : c'est la seule page où elles
   sont adressées frontalement — elle doit se voir */
.offre.conciergerie {
  background: #7a8a5e;
  color: #f5ead8;
  border-color: rgba(245, 234, 216, 0.14);
  box-shadow: 0 26px 50px -26px rgba(47, 58, 44, 0.5);
}

.offre.conciergerie .offre-surtitre { color: rgba(245, 234, 216, 0.7); }
.offre.conciergerie .offre-freq { color: rgba(245, 234, 216, 0.65); }
.offre.conciergerie .offre-desc { color: rgba(245, 234, 216, 0.82); }

.offre.conciergerie .offre-liste li::before {
  background-color: rgba(255, 181, 158, 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.6l2.6 2.6 5-6' fill='none' stroke='%23FFB59E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.offre.mesure {
  background: transparent;
  border: 1.5px dashed rgba(255, 181, 158, 0.85); /* pointillé pêche */
  box-shadow: none;
}

/* --------------------------------------------------- le rayon d'objets */

.objets {
  max-width: 92rem;
  margin: 0 auto;
  padding-top: 2rem;
  padding-bottom: 5.5rem;
}

.objets-tete {
  max-width: 46rem;
  margin: 0 auto 2.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rayon {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .rayon { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
}

/* la carte-produit (refaite le 10/08) : l'objet sur son étagère en haut,
   puis les arguments, le prix et le CTA — une vraie fiche qui vend */
.produit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 26px;
  padding: 26px 26px 24px;
  box-shadow: 0 22px 44px -26px rgba(47, 58, 44, 0.28);
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.objets.ouverte .produit { opacity: 1; transform: translateY(0); }
.objets.ouverte .produit:nth-child(2) { transition-delay: 0.15s; }

/* l'objet posé sur son étagère ; il se soulève doucement au survol */
.produit-scene {
  height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.produit-scene > * {
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .produit:hover .produit-scene > * { transform: translateY(-8px) rotate(0deg); }
}

.etagere {
  display: block;
  width: 86%;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #b78f5e, #a3794c);
  box-shadow: 0 12px 18px -8px rgba(47, 58, 44, 0.35);
  margin: 0 auto 1.3rem;
}

/* le corps de la fiche : tout aligné à gauche sous l'objet */
.produit-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* le livret imprimé, en petit format d'étalage */
.prod-livret {
  position: relative;
  width: 96px;
  aspect-ratio: 210 / 297;
  background: #7a8a5e;
  border-radius: 10px;
  color: #f5ead8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 10px 8px;
  transform: rotate(-2.5deg);
  box-shadow: 0 20px 32px -16px rgba(47, 58, 44, 0.45);
}

.prod-livret::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(245, 234, 216, 0.4);
  border-radius: 6px;
  pointer-events: none;
}

.prod-livret-eyebrow {
  font-size: 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(245, 234, 216, 0.75);
}

.prod-livret-nom { font-size: 11px; line-height: 1.2; font-weight: 500; }

/* la planche gravée, format étalage */
.prod-planche {
  width: 118px;
  aspect-ratio: 5 / 6;
  border-radius: 12px;
  background: linear-gradient(115deg, #b39062, #a67f52 45%, #b78f5e 75%, #9f7a4e);
  box-shadow:
    0 20px 32px -16px rgba(47, 58, 44, 0.45),
    inset 0 1px 3px rgba(255, 255, 255, 0.28),
    inset 0 -3px 7px rgba(60, 40, 20, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: rotate(2deg);
}

.prod-planche-nom {
  font-size: 9px;
  font-weight: 500;
  color: rgba(58, 38, 18, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
}

.produit-nom { font-size: 1.35rem; font-weight: 500; }

/* la mention posée sur chaque objet (dictée le 11/08 soir) */
.produit-abonnes {
  margin-top: 0.5rem;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.7);
  background: rgba(122, 138, 94, 0.14);
  border-radius: 999px;
  padding: 4px 12px;
}

.produit-desc {
  margin-top: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(47, 58, 44, 0.68);
  max-width: 46ch;
}

.produit-liste { margin-top: 1rem; }

.produit-prix {
  margin-top: 1.2rem;
  font-size: 1.7rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.prix-note {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.55);
}

.produit-cta { margin-top: 1.1rem; }

/* la suite arrive : une simple étiquette sous le rayon */
.rayon-avenir {
  margin: 2.4rem auto 0;
  width: fit-content;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.45);
  border: 1.5px dashed rgba(255, 181, 158, 0.85); /* pointillé pêche */
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
}

/* boutique en grand écran : les textes de lecture prennent plus de place
   (essai du 10/08 — les tailles mobiles ne bougent pas) */
@media (min-width: 1024px) {
  .shop-ligne { font-size: 1.2rem; }
  .offre-nom { font-size: 1.45rem; }
  .offre-montant { font-size: 2.95rem; }
  .offre-desc { font-size: 1.02rem; }
  .offre-liste { font-size: 1.02rem; }
  .abos-note { font-size: 0.92rem; }
  .produit-nom { font-size: 1.45rem; }
  .produit-desc { font-size: 1.03rem; }
  .produit-prix { font-size: 1.85rem; }
  .rayon-avenir { font-size: 1.02rem; }
}

/* --------------------------------------------------- boutique, mobile */

@media (max-width: 1023px) {
  .shop-tete { padding-top: 2rem; }
  .shop-ligne { font-size: 1rem; max-width: 36ch; }
  .abos { padding-top: 2.25rem; padding-bottom: 3rem; }
  .abos-tete { margin-bottom: 2rem; }
  /* sur mobile les offres suivent l'ordre des prix : le Studio (9 €)
     avant La Maison (dicté le 11/08 soir — la vedette-d'abord saute) */
  .offre.large { padding: 22px 20px 20px; }
  .objets { padding-bottom: 4rem; }
  .produit { padding: 20px 18px; border-radius: 22px; }
  .produit-scene { height: 148px; }
  .produit-nom { font-size: 1.2rem; }
  .rayon-avenir { margin-top: 1.9rem; font-size: 0.9rem; }
}

/* ==========================================================================
   Page Blog — des articles depuis le 11/08 (la FAQ en accordéon a vécu).
   La liste reprend la mécanique du composant 21st « blog-cards » (voir
   mcpuse.cc), réécrite Booky : titre Fraunces, filet pointillé qui court
   jusqu'à la date, chapô dessous. Depuis le 14/08, la liste vit à
   blog/index.html et chaque article dans blog/<sa-question>/index.html,
   pages FABRIQUÉES par admin/seo.js — on ne les modifie pas à la main.
   ========================================================================== */

.blog {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
}

.blog-tete {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-ligne {
  margin-top: 1.4rem;
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.75);
}

/* ------------------------- un rayon par thème (14/08)
   Ses cartes défilantes ne changent pas — c'est sa dictée du 11/08. Ce
   qui change, c'est qu'il y en a maintenant vingt : une seule bande
   devenait un couloir où l'on ne trouvait plus rien. Chaque thème a donc
   son rayon, avec son titre et son compte. */

.blog { padding-bottom: 2rem; }

.blog-theme { margin-top: 2.6rem; }
.blog-theme:first-of-type { margin-top: 1rem; }

/* ------------------------- le rappel de fin de blog (15/08, dicté)
   Un pavé crème posé après le dernier rayon, à la mesure des rayons
   eux-mêmes. Deux portes, pas trois : l'essai en plein, la boutique en
   lien — un seul objet doit peser dans un pavé. */

.blog-rappel {
  max-width: 94rem;
  margin: 4rem auto 0;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.3rem, 5vw, 4rem);
  border-radius: 1.6rem;
  background: #f5ead8;
  text-align: center;
}

.br-sur {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
}

.br-titre {
  margin-top: 0.6rem;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.15;
}

.br-para {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.72);
}

.br-liens {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
}

.br-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  background: #2f3a2c;
  color: #fbf6ec;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.br-btn:hover { background: #7a8a5e; }
.br-btn svg { width: 0.9em; height: 0.9em; transition: transform 0.25s ease; }
.br-btn:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .br-btn svg { transition: none; }
  .br-btn:hover svg { transform: none; }
}

.bt-titre {
  max-width: 94rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 5vw, 5rem);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
}

.bt-compte {
  max-width: 94rem;
  margin: 0.25rem auto 0;
  padding: 0 clamp(1.1rem, 5vw, 5rem);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* la teinte du thème (16/08) : le rayon la pose, le compte la reprend */
  color: var(--teinte, #7a8a5e);
}

.blog-theme .rail-scene { margin-top: 0; }
.blog-theme .blog-rail { padding-top: 1rem; padding-bottom: 1.6rem; }

/* les cartes d'un rayon déjà visible n'ont pas à réapparaître une par une
   plus bas dans la page : le retard de cascade est remis à zéro par thème */
.blog-theme .carte-art:nth-child(n+7) { animation-delay: 0.78s; }

/* le GUIDE d'un thème : l'article qui explique l'ensemble, posé en tête
   de son rayon. Une étiquette pêche suffit à le distinguer — la carte
   elle-même ne change pas. */
.ca-guide {
  position: absolute;
  z-index: 3;
  top: -0.55rem;
  left: 0.9rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: #FFB59E;
  color: #2f3a2c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px -12px rgba(47, 58, 44, 0.5);
}

@media (max-width: 1023px) {
  .blog-theme { margin-top: 2rem; }
  .bt-titre { font-size: 1.3rem; }
}

/* ------------------------- le rayon de cartes-livrets (v2, 11/08)
   Chaque article est une couverture de livret : filet d'édition, date
   épinglée pêche. Le rayon défile au doigt, à la molette et par les
   deux flèches pêche ; au survol la couverture s'entrouvre sur le
   chapô (écho du mini-livret d'À propos). La liste « titre-filet-date »
   du matin est remplacée.
   16/08, deux dictées : la couleur de couverture devient LA TEINTE DU
   THÈME (« chaque catégorie doit avoir ses articles d'une telle
   couleur ») — posée en variable --teinte par le fabricant, --c reste
   lu en secours pour une vieille carte — et la photo de l'article
   comble l'espace vide de la couverture (« mets une photo à chaque
   fois dans cet espace vide »). */

.rail-scene {
  position: relative;
  margin-top: 0.4rem;
}

.blog-rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.4rem clamp(1.1rem, 5vw, 5rem) 2.4rem;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.blog-rail::-webkit-scrollbar { display: none; }

/* la carte : format livret (même ratio que les couvertures du site) */
.carte-art {
  position: relative;
  flex: none;
  width: clamp(225px, 17vw, 268px);
  aspect-ratio: 210 / 297;
  scroll-snap-align: center;
  perspective: 1200px;
  animation: monte 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.carte-art:nth-child(1) { animation-delay: 0.3s; }
.carte-art:nth-child(2) { animation-delay: 0.38s; }
.carte-art:nth-child(3) { animation-delay: 0.46s; }
.carte-art:nth-child(4) { animation-delay: 0.54s; }
.carte-art:nth-child(5) { animation-delay: 0.62s; }
.carte-art:nth-child(6) { animation-delay: 0.7s; }
.carte-art:nth-child(n+7) { animation-delay: 0.78s; }

.carte-art:focus-visible {
  outline: 3px solid #FFB59E;
  outline-offset: 4px;
  border-radius: 18px;
}

/* la page sous la couverture : le chapô et l'invitation à lire */
.ca-page {
  position: absolute;
  inset: 0;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 18px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 24px 44px -26px rgba(47, 58, 44, 0.35);
}

.ca-chapo {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.78);
  font-weight: 600;
}

.ca-lire {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FFB59E;
  color: #2f3a2c;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
}

/* la couverture : la teinte de son thème, le filet d'édition, la date
   épinglée — elle pivote depuis la tranche gauche au survol */
.ca-couv {
  position: absolute;
  inset: 0;
  background: var(--teinte, var(--c, #7a8a5e));
  color: #fdf9f1;
  border-radius: 18px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
  box-shadow: 0 24px 44px -24px rgba(47, 58, 44, 0.45);
}

.ca-couv::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(253, 249, 241, 0.45);
  border-radius: 12px;
  pointer-events: none;
}

@media (hover: hover) {
  .carte-art:hover { z-index: 5; }
  .carte-art:hover .ca-couv { transform: rotateY(-84deg); }
}

.ca-date {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(253, 249, 241, 0.8);
}

/* l'épingle pêche de la date — le même geste que les tirages de l'accueil */
.ca-date::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 7px;
  vertical-align: 0.02em;
}

.ca-titre {
  margin-top: 0.9rem;
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 500;
  text-wrap: balance;
}

/* la photo de l'article (16/08, dicté : « mets une photo à chaque fois
   dans cet espace vide ») : le creux de la couverture, entre le titre
   et la flèche, porte le tirage de l'article. Le cadre absorbe toute
   la place libre (flex: 1) dans une carte au format déjà fixé : rien
   ne saute pendant le chargement. Liseré crème, le même œil d'édition
   que le filet. */
.ca-photo {
  flex: 1;
  min-height: 0;
  margin-top: 0.9rem;
  margin-bottom: 0.8rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(253, 249, 241, 0.4);
}

.ca-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* la petite pastille-flèche en pied de couverture */
.ca-indice {
  margin-top: auto;
  align-self: flex-end;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #FFB59E;
  color: #2f3a2c;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* les deux flèches qui font glisser le rayon */
.rail-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #FFB59E;
  color: #2f3a2c;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 30px -14px rgba(47, 58, 44, 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.rail-fleche.gauche { left: clamp(0.6rem, 2vw, 2.2rem); }
.rail-fleche.droite { right: clamp(0.6rem, 2vw, 2.2rem); }

@media (hover: hover) {
  .rail-fleche:hover { transform: translateY(-50%) scale(1.1); }
}

@media (min-width: 1024px) {
  .blog { padding-top: 5rem; padding-bottom: 1rem; }
  .blog-ligne { font-size: 1.2rem; }
  .rail-scene { margin-top: 1rem; }
  .blog-rail { gap: 1.9rem; padding-bottom: 3rem; }
}

@media (max-width: 1023px) {
  .blog { padding-top: 2rem; padding-bottom: 0.5rem; }
  .blog-ligne { font-size: 1rem; max-width: 36ch; }
  /* au doigt : les cartes défilent, la suivante dépasse pour inviter */
  .blog-rail { gap: 1rem; padding: 1rem 1.1rem 1.8rem; }
  .carte-art { width: min(235px, 64vw); }
  .ca-titre { font-size: 1.18rem; }
  .rail-fleche { display: none; }
}

/* ------------------------- la page de lecture (gabarit article-*.html) */

.article {
  max-width: 46rem;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 5.5rem;
}

.art-retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(47, 58, 44, 0.6);
  transition: color 0.35s ease, gap 0.35s ease;
}

@media (hover: hover) {
  .art-retour:hover { color: #2f3a2c; gap: 11px; }
}

.article-tete { margin-top: 2.2rem; }

/* la date de l'article — petites capitales, épingle pêche */
.art-date {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
}

.art-date::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 8px;
  vertical-align: 0.02em;
}

.article-titre {
  margin-top: 0.6rem;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.article-chapo {
  margin-top: 1.1rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.7);
  max-width: 54ch;
}

.article-corps { margin-top: 2.4rem; }

.article-corps p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(47, 58, 44, 0.82);
  max-width: 62ch;
}

.article-corps p + p { margin-top: 1rem; }

.article-corps h2 {
  margin: 2.3rem 0 0.8rem;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 500;
}

/* l'extrait en bulle du livret — la voix du site, partout la même */
.article-extrait { margin: 1.8rem 0; }

.article-bulle {
  width: fit-content;
  max-width: 48ch;
  background: #f5ead8;
  border-radius: 1.6rem;
  border-bottom-left-radius: 0.45rem;
  padding: 0.95rem 1.3rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #2f3a2c;
  font-weight: 600;
  box-shadow: 0 16px 32px -22px rgba(47, 58, 44, 0.35);
}

.article-extrait figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: rgba(47, 58, 44, 0.5);
  font-weight: 600;
}

.article-signature {
  margin-top: 2rem;
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #7a8a5e;
}

.article-suite { margin-top: 2.6rem; }

/* ------------------------- le gabarit de référencement (14/08)
   Ce qui a été ajouté à la page de lecture pour qu'un article se
   comprenne sans le lire : le chemin, la réponse tout de suite, une
   image, les listes, les questions de fin, et la suite à lire. */

/* le chemin — Accueil › Blog › l'article. Il double le fil d'Ariane
   des données structurées, et donne au visiteur son point sur la carte */
.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.5);
}

.fil-ariane a { color: rgba(47, 58, 44, 0.68); transition: color 0.3s ease; }
.fil-ariane a:hover { color: #2f3a2c; }
.fil-ariane span[aria-hidden] { color: rgba(47, 58, 44, 0.32); }
.fil-ariane [aria-current] { color: #7a8a5e; }

/* la réponse dans les premiers mots — c'est ce bloc que Google reprend
   en extrait et que les IA citent. Filet pêche à gauche, fond crème :
   il se lit avant tout le reste, sans crier */
.art-reponse {
  margin-top: 2.2rem;
  padding: 1.15rem 1.35rem 1.15rem 1.55rem;
  background: #f5ead8;
  border-left: 0.28rem solid #FFB59E;
  border-radius: 0.35rem 1.1rem 1.1rem 0.35rem;
}

.article-corps .art-reponse p {
  font-size: 1.1rem;
  line-height: 1.62;
  color: #2f3a2c;
  font-weight: 600;
  max-width: 60ch;
}

/* l'image de l'article — obligatoire dans le gabarit. Dimensions
   écrites dans le HTML : la page ne saute pas pendant le chargement */
.article-image { margin: 2.2rem 0 1.6rem; }

.article-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  box-shadow: 0 26px 48px -30px rgba(47, 58, 44, 0.42);
}

.article-image figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: rgba(47, 58, 44, 0.5);
  font-weight: 600;
}

/* les listes du corps — puce pêche, jamais de disque par défaut */
.article-corps ul { margin: 1rem 0 0; padding: 0; list-style: none; max-width: 62ch; }

.article-corps ul li {
  position: relative;
  padding-left: 1.35rem;
  margin-top: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.82);
}

.article-corps ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #FFB59E;
}

/* les liens dans le texte — soulignés sobrement, ils portent le maillage
   interne : chaque article renvoie vers son pilier, ses frères et la
   page du site qui répond au besoin */
.article-corps p a,
.article-corps li a {
  color: #2f3a2c;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(122, 138, 94, 0.55);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.1em;
  transition: text-decoration-color 0.3s ease;
}

.article-corps p a:hover,
.article-corps li a:hover { text-decoration-color: #FFB59E; }

/* les questions de fin — trois questions courtes, la réponse dessous.
   Doublées en données structurées (FAQPage) : Google n'en fait plus
   d'étoiles depuis 2023, mais les IA qui répondent à sa place les lisent */
.article-faq {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 0.1rem solid rgba(47, 58, 44, 0.14);
}

.article-faq > h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.25;
}

.faq-bloc { margin-top: 1.5rem; }

.faq-bloc h3 {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
  color: #2f3a2c;
}

.article-corps .faq-bloc p {
  margin-top: 0.45rem;
  font-size: 1rem;
  line-height: 1.65;
}

/* la suite à lire — deux ou trois articles frères, en cartes basses */
.article-liens {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 0.1rem solid rgba(47, 58, 44, 0.14);
}

.article-liens > h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.al-liste {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.85rem;
}

.al-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  background: #fdf9f1;
  border: 0.1rem solid rgba(47, 58, 44, 0.1);
  border-radius: 1rem;
  font-weight: 600;
  color: #2f3a2c;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.al-lien svg { flex: none; color: #7a8a5e; }

@media (hover: hover) {
  .al-lien:hover { border-color: rgba(122, 138, 94, 0.55); transform: translateX(3px); }
}

@media (min-width: 640px) {
  .al-liste { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .article { padding-top: 4.5rem; padding-bottom: 7rem; max-width: 50rem; }
  .article-chapo { font-size: 1.3rem; }
  .article-corps p { font-size: 1.18rem; }
  .article-corps h2 { font-size: 1.65rem; }
  .article-bulle { font-size: 1.08rem; }
  .article-corps .art-reponse p { font-size: 1.22rem; }
  .article-corps ul li { font-size: 1.18rem; }
  .article-faq > h2 { font-size: 1.65rem; }
  .faq-bloc h3 { font-size: 1.24rem; }
  .article-corps .faq-bloc p { font-size: 1.1rem; }
}

@media (max-width: 1023px) {
  .article { padding-top: 1.6rem; padding-bottom: 4rem; }
  .article-tete { margin-top: 1.6rem; }
  .article-titre { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .article-chapo { font-size: 1.05rem; }
  .article-corps { margin-top: 1.9rem; }
  .article-corps h2 { font-size: 1.3rem; }
}

/* ==========================================================================
   Page Contact — une seule carte : panneau sauge qui met en confiance,
   formulaire à droite. Mécanique « contact card » de 21st, redessinée
   Booky (voir mcpuse.cc). Le formulaire n'envoie rien : pas de serveur.
   ========================================================================== */

.contact {
  max-width: 94rem;
  margin: 0 auto;
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
}

.contact-tete {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-ligne {
  margin-top: 1.4rem;
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.75);
}

.contact-carte {
  max-width: 70rem;
  margin: 2.8rem auto 0;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 30px;
  box-shadow: 0 30px 60px -30px rgba(47, 58, 44, 0.35);
  display: grid;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .contact { padding-top: 5rem; padding-bottom: 7rem; }
  .contact-carte { grid-template-columns: 0.85fr 1.15fr; margin-top: 3.2rem; }
  .contact-ligne { font-size: 1.2rem; }
  .cote-titre { font-size: 1.75rem; }
  .cote-texte { font-size: 1.06rem; }
  .cote-liste { font-size: 1.02rem; }
}

/* le panneau sauge : pourquoi écrire, et à qui */
.contact-cote {
  background: #7a8a5e;
  color: #f5ead8;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.cote-titre {
  font-size: 1.6rem;
  line-height: 1.2;
}

.cote-texte {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(245, 234, 216, 0.85);
}

.cote-liste {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.cote-liste li {
  position: relative;
  padding-left: 1.2rem;
}

.cote-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFB59E; /* les puces du panneau, en pêche */
}

.cote-note {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: rgba(245, 234, 216, 0.7);
}

/* le formulaire : champs crème, focus olive */
.contact-form {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.champ label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.55);
}

/* .champ-saisie porte le style DIRECTEMENT : les champs des pop-up de
   l'IA (réponse au questionnaire, informations libres) vivent sans
   parent .champ — ils s'affichaient en HTML brut (corrigé le 12/08). */
.champ-saisie,
.champ input,
.champ textarea,
.champ select {
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.14);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font: inherit;
  color: #2f3a2c;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.champ-saisie:focus,
.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  outline: none;
  border-color: #FFB59E;
  box-shadow: 0 0 0 3px rgba(255, 181, 158, 0.35); /* focus pêche */
}

/* le menu de l'objet : flèche dessinée, pas celle du navigateur */
.champ select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%232f3a2c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  cursor: pointer;
}

.champ select:invalid { color: rgba(47, 58, 44, 0.5); }

.champ textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.contact-form .btn-survol {
  align-self: flex-start;
  margin-top: 0.3rem;
}

/* l'e-mail, en partie à part : une bande vert profond sous la carte,
   l'adresse en grand crème — un clic ouvre la messagerie. Le crème sur
   fond crème se fondait dans la page (sa remarque du 10/08). */
.mail-bande {
  max-width: 70rem;
  margin: 1.7rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  background: #2f3a2c;
  border-radius: 26px;
  padding: 2.1rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 28px 55px -30px rgba(47, 58, 44, 0.6);
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .mail-bande:hover { transform: translateY(-4px); }
}

.mail-label {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(245, 234, 216, 0.65); /* retour au blanc crème (11/08 soir) */
}

.mail-adresse {
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  line-height: 1.15;
  font-weight: 500;
  color: #f5ead8;
}

.mail-mention {
  font-size: 0.85rem;
  color: rgba(245, 234, 216, 0.55);
}

@media (max-width: 1023px) {
  .contact { padding-top: 2rem; padding-bottom: 4rem; }
  .contact-ligne { font-size: 1rem; max-width: 36ch; }
  .contact-carte { margin-top: 2.2rem; border-radius: 24px; }
  .contact-cote { padding: 26px 22px; }
  .cote-titre { font-size: 1.4rem; }
  .contact-form { padding: 24px 22px 26px; }
  .contact-form .btn-survol { align-self: stretch; }
  .mail-bande { margin-top: 1.2rem; border-radius: 22px; padding: 1.7rem 1.2rem 1.6rem; }
  .mail-adresse { word-break: break-all; }
}

/* --------------------------------------------------- pied de page
   Bande olive présente sur toutes les pages (écrite par partiels.js).
   Contenu volontairement minimal tant qu'il n'est pas décidé — voir
   Structure du site. */

.pied {
  position: relative;
  z-index: 10;
  margin-top: 3rem;
  background: #7a8a5e;
  border-radius: 32px 32px 0 0;
  padding: 2.6rem 0 1.6rem;
}

.pied-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
}

.pied-logo {
  height: 2.2rem;
  width: auto;
}

.pied-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.7rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.pied-lien {
  color: rgba(245, 234, 216, 0.85);
  transition: color 0.3s ease;
}

.pied-lien:hover { color: #ffffff; }

/* les articles mis en avant (14/08) : présents sur toutes les pages,
   c'est ce qui les fait remonter sans toucher aux sections validées */
.pied-lecture {
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 0.1rem solid rgba(245, 234, 216, 0.18);
}

.pl-titre {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 181, 158, 0.9);
  margin-bottom: 0.75rem;
}

.pl-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.7rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.pl-tous { color: #f5ead8; text-decoration: underline; text-underline-offset: 0.2em; }

.pied-bas {
  margin-top: 2.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 181, 158, 0.45); /* le filet du pied, en pêche */
  font-size: 0.85rem;
  color: rgba(245, 234, 216, 0.7);
}

@media (max-width: 1023px) {
  .pied { border-radius: 24px 24px 0 0; padding: 2.1rem 0 1.3rem; }
  .pied-haut { flex-direction: column; align-items: center; text-align: center; }
  .pied-nav { justify-content: center; gap: 0.5rem 1.3rem; }
  .pied-bas { text-align: center; margin-top: 1.7rem; }
}

/* --------------------------------------------------- À propos, mobile
   Chaque section recomposée pour le petit écran : la carte du
   questionnaire passe au-dessus de son texte, tout se centre, les
   tailles et respirations sont réglées à part. */

@media (max-width: 1023px) {
  /* toutes les sections respirent davantage depuis le 11/08 (sa demande :
     « trop proches ») — les tailles de texte, elles, ne bougent pas */
  .histoire { padding-top: 2rem; padding-bottom: 5rem; }
  .hist-corps { margin-top: 1.6rem; }
  .hist-corps p { font-size: 1rem; line-height: 1.65; }
  .hist-signature { font-size: 1.1rem; margin-top: 1.4rem; }
  .souligne { height: 10px; }
  .souligne path { stroke-width: 4; }

  .sejour { padding-top: 5rem; padding-bottom: 4.75rem; }
  .sejour-tete { margin-bottom: 2.2rem; }
  .moment { padding: 0 0 2rem 2.6rem; }
  .moment-titre { font-size: 1.15rem; }
  .moment-texte { font-size: 0.95rem; }
  .sejour-note { font-size: 0.95rem; margin-top: 2rem; }

  /* le texte d'abord, la carte dessous (le motif mobile du site —
     l'ordre PC carte-gauche/texte-droite ne s'applique pas ici) */
  .savoir { padding-top: 5rem; padding-bottom: 5rem; }
  .savoir-grille { gap: 1.9rem; }
  .savoir-grille .qcarte-scene { order: 2; }
  .savoir-texte { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .qcarte { width: min(310px, 84vw); }
  .qface { padding: 20px; border-radius: 24px; }
  .qface-question { font-size: 1.25rem; }

  /* le texte d'abord, la planche dessous (ordre inversé le 11/08) —
     depuis le 16/08 l'objet est la planche de l'atelier (.planche3d),
     qui porte déjà sa taille mobile : rien à redimensionner ici */
  .grave { padding-top: 5rem; padding-bottom: 5rem; }
  .grave-grille { gap: 1.9rem; }
  .grave-grille .planche-scene { order: 2; }
  .grave-texte { text-align: center; display: flex; flex-direction: column; align-items: center; }

  /* le texte d'abord, le livret dessous (même motif que les autres) */
  .imprime { padding-top: 5rem; padding-bottom: 5rem; }
  .imprime-grille { gap: 1.9rem; }
  .imprime-grille .imprime-objet { order: 2; }
  .imprime-texte { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .mini-livret { --mw: min(135px, 38vw); }
  .mini-nom { font-size: 15px; }
  .mpcarte { font-size: 9px; padding: 6px 8px; }

  .cata { padding-top: 5rem; padding-bottom: 5rem; }
  .cata-tete { margin-bottom: 1.8rem; }

  .espace { padding-top: 5rem; padding-bottom: 5rem; }
  .espace-tete { margin-bottom: 2rem; }
  .tdb { padding: 20px 20px 22px; border-radius: 24px; }
  .tdb-grand { font-size: 1.6rem; }
  .tdb-stat { font-size: 0.72rem; border-radius: 13px; }
  .tdb-q { font-size: 0.9rem; }
  .espace-note { font-size: 0.95rem; margin-top: 2rem; }

  .avis { padding-top: 4.25rem; padding-bottom: 4.25rem; }
  .avis-carte { width: 272px; padding: 16px 18px; }
  .avis-texte { font-size: 0.9rem; }

  .compteurs { padding-top: 5.25rem; padding-bottom: 4.5rem; gap: 2.9rem; }
  .compteur-nombre { font-size: clamp(3.1rem, 14vw, 3.9rem); }
  .compteur-phrase { font-size: 0.98rem; max-width: 32ch; }
}

/* ==========================================================================
   Page Essayer — le dashboard guidé de l'outil (étape 1, 11/08 nuit).
   Quatre étapes tenues par un fil de progression : rail cliquable,
   remplissage pêche fluide, étape accomplie cochée — mécaniques reprises
   de 21st (voir mcpuse.cc), redessinées en fil Booky. L'aperçu est le
   vrai livret.html dans un cadre téléphone. Les champs reprennent la
   famille .champ du formulaire de contact (focus pêche).
   ========================================================================== */

.outil-sur {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
}

.outil-sur::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 8px;
  vertical-align: 0.02em;
}

/* .btn-glisse sur un <button> : mêmes habits que sur un lien */
button.btn-glisse {
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #f5ead8;
}

.btn-glisse .btn-rond svg { width: 1.05rem; height: 1.05rem; }

.outil-surmesure {
  font-size: 0.95rem;
  color: rgba(47, 58, 44, 0.6);
}

.outil-surmesure-lien {
  font-weight: 700;
  color: #7a8a5e;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #FFB59E;
}

/* ------------------------- les rappels (15/08, dicté)
   « Vous ne trouvez pas votre bonheur ? Consultez le catalogue → »
   Une phrase grise, un lien olive souligné de pêche, une flèche qui
   avance à l'approche. Jamais un bouton plein : un rappel se propose,
   il ne réclame pas — le bouton principal de la page doit rester le
   seul objet qui pèse. Le lien est parfois un <a>, parfois un
   <button> (dans Mon espace, où il change de vue) : les deux portent
   la même allure. */

.rappel {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: rgba(47, 58, 44, 0.6);
}

.rappel-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-weight: 700;
  color: #7a8a5e;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #FFB59E;
}

.rappel-lien svg {
  width: 0.9em;
  height: 0.9em;
  transition: transform 0.25s ease;
}

.rappel-lien:hover svg,
.rappel-lien:focus-visible svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rappel-lien svg { transition: none; }
  .rappel-lien:hover svg,
  .rappel-lien:focus-visible svg { transform: none; }
}

/* à l'étape du QR, le rappel occupe la place de la note de sauvegarde :
   il en garde l'aplomb pour que rien ne saute d'une étape à l'autre */
.rappel-qr { margin-top: 1.1rem; }

/* ------------------------- la liste des livrets créés */

.liste-titre {
  margin-top: 3rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.liste-cartes {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.9rem;
}

.livret-carte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 1.05rem 1.3rem;
  box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .livret-carte:hover { transform: translateY(-3px); }
}

.lc-teinte {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 12px;
  background: var(--c, #f5ead8);
  border: 1px solid rgba(47, 58, 44, 0.12);
}

.lc-corps { min-width: 0; }
.lc-nom { font-size: 1.15rem; font-weight: 500; }
.lc-detail { font-size: 0.85rem; color: rgba(47, 58, 44, 0.55); }

.lc-actions, .lc-confirme {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.lc-confirme-texte {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.75);
  margin-right: 0.4rem;
}

.lc-action {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2f3a2c;
  background: rgba(122, 138, 94, 0.14);
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  transition: background 0.25s ease;
}

@media (hover: hover) {
  .lc-action:hover { background: rgba(122, 138, 94, 0.26); }
}

.lc-danger { background: rgba(255, 181, 158, 0.28); }
@media (hover: hover) {
  .lc-danger:hover { background: rgba(255, 181, 158, 0.5); }
}

/* ------------------------- le fil des étapes (jauge 21st → Booky) */

.fil-outil { max-width: 46rem; }

.fil-compte {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.5);
  margin-bottom: 0.9rem;
}

.fil-outil-piste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* le fil à trois étapes (la planche gravée) */
.fil-outil-piste.fil-trois { grid-template-columns: repeat(3, 1fr); }
.fil-outil-piste.fil-trois .fil-outil-rail {
  left: calc(100% / 6);
  right: calc(100% / 6);
}

/* le rail traverse les quatre points ; le remplissage pêche coule dessus */
.fil-outil-rail {
  position: absolute;
  top: 10px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 4px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.12);
  overflow: hidden;
}

.fil-outil-plein {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #FFB59E;
  transition: width 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.fil-etape {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.fil-etape:disabled { cursor: default; }

.fil-point {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fbf6ec;
  border: 2px solid rgba(47, 58, 44, 0.25);
  display: grid;
  place-items: center;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.fil-nom {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.55);
  transition: color 0.3s ease;
}

/* l'étape accomplie se coche ; la courante s'annonce en pêche */
.fil-etape.faite .fil-point {
  background: #7a8a5e;
  border-color: #7a8a5e;
}

.fil-etape.faite .fil-point::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #f5ead8;
  border-bottom: 2px solid #f5ead8;
  transform: rotate(-45deg) translate(0.5px, -1px);
}

.fil-etape.courante .fil-point {
  border-color: #FFB59E;
  background: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 0 0 5px rgba(255, 181, 158, 0.3);
}

.fil-etape.courante .fil-nom { color: #2f3a2c; }

/* ------------------------- la grille du parcours */

.parcours-grille { margin-top: 2.6rem; }

@media (min-width: 1024px) {
  .parcours-grille {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 5rem;
    align-items: start;
  }
}

.etape-titre {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  font-weight: 500;
}

.etape-para {
  margin-top: 0.8rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.7);
  max-width: 52ch;
}

.champs {
  margin-top: 1.8rem;
  display: grid;
  gap: 1.15rem;
}

.champ-nom {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.55);
}

.champ-option {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.4);
}

.champ-reste {
  min-height: 1em;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.45);
  text-align: right;
}

/* le champ obligatoire oublié se signale d'une secousse */
.champ-manque {
  border-color: #FFB59E !important;
  box-shadow: 0 0 0 3px rgba(255, 181, 158, 0.45) !important;
  animation: champ-secoue 0.4s ease;
}

@keyframes champ-secoue {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}

/* ------------------------- étape 2 : les 20 modèles en grille filtrée
   (12/08 — les 3 cartes-structures ont vécu : « des brouillons », ses
   mots. V2 dictée le même jour : plus de cartes dessinées — chaque tuile
   montre la VRAIE interface du livret, habillée de la Villa Beau Rivage
   et de sa photo, en iframe miniature décorative.) */

.choix-modeles { margin-top: 1.6rem; display: block; }

.mod-filtres { margin-bottom: 1.1rem; }

/* (13/08 soir, sa correction : l'aperçu REMPLIT la tuile. Colonnes
   FIXES pour une échelle exacte — attention à la cascade : .cata-grille,
   déclarée PLUS BAS, gagne sur l'élément qui porte les deux classes ;
   les deux règles doivent dire 236px, ne jamais les désaccorder.) */
/* (15/08, dicté : « par rangées de 3 et collés à gauche ». TROIS colonnes
   fixes, pas un remplissage automatique — la grille garde le même rythme
   quelle que soit la largeur de l'écran — et le bloc s'aligne à gauche,
   sous le titre de l'étape, au lieu de flotter au milieu. Les colonnes
   restent à 236 px : l'aperçu vit dans une iframe à l'échelle, une
   largeur inconnue le déformerait. En dessous de trois colonnes de
   large, la grille se replie toute seule.
   Le sélecteur porte `.choix-modeles` : sans lui, `.cata-grille` — la
   grille du catalogue, déclarée 2 500 lignes plus bas — reprendrait la
   main sur la tuile qui porte les deux classes (c'est le piège que
   signale le commentaire ci-dessus). Le catalogue, lui, ne bouge pas. */
.choix-modeles .mod-grille {
  grid-template-columns: repeat(3, 236px);
  justify-content: start;
  gap: 0.9rem;
}

@media (max-width: 800px) {
  .choix-modeles .mod-grille { grid-template-columns: repeat(2, 236px); }
}
@media (max-width: 560px) {
  .choix-modeles .mod-grille { grid-template-columns: minmax(0, 236px); }
}

.mod-tuile { padding: 0.55rem 0.55rem 0.65rem; border-radius: 18px; gap: 0.5rem; }
/* hors écran, le navigateur ne DESSINE pas la tuile (ni ses animations) —
   avec le chargement à l'approche, c'est ce qui garde les grilles de 50
   livrets vivants fluides (13/08, sa remarque). La taille estimée évite
   les sauts de page pendant le défilement. */
.mod-tuile, .cata-tuile {
  content-visibility: auto;
  contain-intrinsic-size: auto 236px auto 420px;
}

.mod-tuile.choisi {
  border-color: #7a8a5e;
  box-shadow: 0 0 0 4px rgba(122, 138, 94, 0.16), 0 22px 44px -30px rgba(47, 58, 44, 0.4);
}

/* le vrai livret.html en miniature — largeur fixe, l'échelle suit */
.mt-cadre {
  display: block;
  width: 100%;
  height: 296px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(47, 58, 44, 0.1);
  background: #fbf6ec;
}

.mt-cadre iframe {
  width: 375px;
  height: 812px;
  border: 0;
  pointer-events: none;
  /* 208,8 / 375 : la tuile fait 236px moins 2 × 0.85rem de marge —
     le livret remplit toute la largeur, on ne voit que sa première
     partie (sa correction du 13/08 : « ce n'est pas grave ») */
  transform: scale(0.557);
  transform-origin: top left;
}

.mod-pied { display: grid; gap: 0.1rem; justify-items: start; padding: 0 0.15rem; }
.mod-nom { font-size: 0.95rem; font-weight: 600; line-height: 1.15; text-align: left; }
.mod-pied .ct-legende { font-size: 0.72rem; }
/* la même tuile au CATALOGUE porte un prix (13/08) : plus petit qu'en
   tuile dessinée, sous la légende */
.mod-pied .ct-prix { font-size: 1.05rem; margin-top: 0.1rem; }

/* les bonnes adresses STRUCTURÉES (13/08, sa correction) : les puces
   dans le volet Vos textes, la pop-up au clic — icône, nom, mot, adresse */
.lieux-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.8rem; }
/* vide — aucune adresse, aucun lien d'avis — la liste ne laisse pas
   1,4 rem de blanc entre le titre et le bouton (15/08, son défaut) */
.lieux-liste:empty { margin: 0.65rem 0 0; }
.lieu-puce {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; font-weight: 600; font-size: 0.9rem; color: #2f3a2c;
  background: #ffffff; border: 1.5px solid rgba(47, 58, 44, 0.18);
  border-radius: 999px; padding: 0.45rem 0.85rem; cursor: pointer;
}
.lieu-puce svg { width: 1rem; height: 1rem; color: #7a8a5e; }
.lieu-puce:hover { border-color: rgba(122, 138, 94, 0.65); }
.lieu-voile {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(47, 58, 44, 0.42);
  display: grid; place-items: center; padding: 1.2rem;
}
.lieu-pop {
  width: min(30rem, 100%);
  max-height: 88svh; overflow: auto;
  background: #fbf6ec; border-radius: 22px;
  padding: 1.5rem 1.4rem 1.4rem;
  display: grid; gap: 0.85rem;
  box-shadow: 0 30px 60px -30px rgba(47, 58, 44, 0.55);
}
.lieu-pop .perso-titre { margin-top: 0; }
.lieu-icones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.lieu-ic {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #ffffff; border: 1.5px solid rgba(47, 58, 44, 0.15);
  border-radius: 12px; cursor: pointer; color: #2f3a2c;
}
.lieu-ic svg { width: 1.2rem; height: 1.2rem; }
.lieu-ic.choisi { border-color: #7a8a5e; background: rgba(122, 138, 94, 0.14); color: #4a5a38; }
.lieu-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }

/* LE CHOIX DE LA PHOTO DE LA CARTE (13/08 au soir) : les photos du livret
   numérique choisi, plus le dépôt d'une autre. Elle reste sur l'appareil. */
.cartephoto-liste {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.7rem 0 0.2rem;
}
.cartephoto-choix, .cartephoto-ajoute {
  width: 5.2rem; height: 5.2rem;
  border: 2px solid rgba(47, 58, 44, 0.14);
  border-radius: 14px;
  overflow: hidden; cursor: pointer; padding: 0;
  background: #ffffff;
  display: grid; place-items: center;
}
.cartephoto-choix img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartephoto-choix.choisi { border-color: #7a8a5e; box-shadow: 0 0 0 4px rgba(122, 138, 94, 0.16); }
.cartephoto-ajoute {
  border-style: dashed;
  font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1.2;
  text-align: center; color: rgba(47, 58, 44, 0.6); padding: 0.4rem;
}
@media (hover: hover) {
  .cartephoto-choix:hover, .cartephoto-ajoute:hover { border-color: rgba(122, 138, 94, 0.65); }
}
/* les puces d'avis (13/08 au soir) reprennent l'habit des lieux : leur
   icône est le pouce, pas une icône choisie */
.lieu-puce[data-avis] svg { color: #c07a56; }
/* les liens d'avis se rangent dans la même pop-up : ses puces de noms
   (Google, Airbnb…) sont de simples raccourcis d'écriture */
#avis-noms { margin-top: -0.35rem; }

/* LE RETRAIT (13/08 au soir, dicté : « on ne peut plus l'enlever
   après ») — le bouton qui remet la couleur du modèle, ou enlève le
   dégradé. Discret, aligné à gauche, il n'apparaît qu'une fois qu'il y
   a quelque chose à retirer. */
.lc-action.retrait {
  justify-self: start; margin-top: 0.7rem;
  background: rgba(47, 58, 44, 0.07);
}
@media (hover: hover) {
  .lc-action.retrait:hover { background: rgba(47, 58, 44, 0.13); }
}
.lc-action.retrait[hidden] { display: none; }

/* le petit i de la jauge de l'IA (13/08, dicté) : il clignote tant qu'on
   ne l'a pas ouvert — sa pop-up réutilise l'habit .lieu-pop */
.ia-jauge-carte { position: relative; }
.ia-info {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-weight: 700; font-size: 0.95rem; line-height: 1;
  color: #2f3a2c; background: #ffffff;
  border: 1.5px solid rgba(47, 58, 44, 0.25);
  cursor: pointer;
}
.ia-info:hover { border-color: #7a8a5e; color: #4a5a38; }
.ia-info.clignote { animation: ia-clignote 1.6s ease-in-out infinite; }
@keyframes ia-clignote {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 138, 94, 0.55); }
  50% { box-shadow: 0 0 0 9px rgba(122, 138, 94, 0); border-color: #7a8a5e; }
}
.ia-info-texte { font-size: 0.95rem; line-height: 1.6; color: rgba(47, 58, 44, 0.85); }
.ia-info-texte strong { color: #2f3a2c; }

/* les réponses toutes prêtes du questionnaire (13/08, dicté) — en
   toucher une répond ; « Autre… » ouvre le champ texte */
.iv-choix-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.iv-choix {
  font: inherit; font-weight: 600; font-size: 0.92rem; color: #2f3a2c;
  background: #ffffff; border: 1.5px solid rgba(47, 58, 44, 0.2);
  border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer;
  text-align: left;
}
.iv-choix:hover { border-color: #7a8a5e; background: rgba(122, 138, 94, 0.08); }
.iv-choix.choisi { border-color: #7a8a5e; background: rgba(122, 138, 94, 0.16); }
.iv-autre { border-style: dashed; color: rgba(47, 58, 44, 0.7); }

/* le message qui dédramatise, sous chaque question (13/08, dicté) */
.iv-rassure {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(47, 58, 44, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .ia-info.clignote { animation: none; border-color: #7a8a5e; }
}

/* ------------------------- étape 3 : fond, fonctions, textes */

.perso-titre {
  margin-top: 2.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #7a8a5e;
}

.perso-note {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: rgba(47, 58, 44, 0.55);
}

.choix-fonds {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.fond-puce {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(47, 58, 44, 0.18);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .fond-puce:hover { transform: scale(1.12); }
}

.fond-puce.choisie {
  box-shadow: 0 0 0 3px #fbf6ec, 0 0 0 6px #FFB59E;
  transform: scale(1.05);
}

.fond-libre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.65);
  cursor: pointer;
  margin-left: 0.4rem;
}

.fond-libre input {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: none;
  cursor: pointer;
}

.fond-libre input::-webkit-color-swatch-wrapper { padding: 3px; }
.fond-libre input::-webkit-color-swatch {
  border-radius: 50%;
  border: 2px dashed rgba(47, 58, 44, 0.35);
}

/* ------------------------- l'étape 3 en VOLETS (refaite le 12/08) :
   le fond · les fonctions · vos textes · l'ÉDITEUR (offre la plus
   chère). Un volet ouvert à la fois — la personnalisation ne charge
   jamais l'écran. Têtes de volet : icône, nom, résumé de l'état. */

.volets {
  margin-top: 1.8rem;
  display: grid;
  gap: 0.85rem;
  max-width: 46rem;
}

.volet {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 32px -26px rgba(47, 58, 44, 0.35);
}

.volet-tete {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font: inherit;
  color: #2f3a2c;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.95rem 1.2rem;
  text-align: left;
}

.volet-ic {
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(122, 138, 94, 0.14);
  border-radius: 12px;
  color: #7a8a5e;
}

.volet-ic svg { width: 1.15rem; height: 1.15rem; }

.volet-nom { font-size: 1.02rem; font-weight: 700; }

/* le résumé de l'état, à droite : la pastille du fond, « 6 sur 8 »… */
.volet-resume {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.45);
}

.resume-puce {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--c, #fbf6ec);
  border: 1px solid rgba(47, 58, 44, 0.18);
}

/* la pastille de l'éditeur — le détail pêche */
.volet-domaine {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f3a2c;
  background: rgba(255, 181, 158, 0.5);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.volet-chevron {
  width: 9px;
  height: 9px;
  flex: none;
  margin-left: 0.2rem;
  border-right: 2px solid rgba(47, 58, 44, 0.45);
  border-bottom: 2px solid rgba(47, 58, 44, 0.45);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.25s ease;
}

.volet.ouvert .volet-chevron { transform: rotate(225deg); }

.volet-corps {
  display: none;
  border-top: 1px solid rgba(47, 58, 44, 0.08);
  padding: 1.15rem 1.2rem 1.35rem;
}

.volet.ouvert .volet-corps { display: block; }

.volet-corps .perso-titre:first-child { margin-top: 0.1rem; }
.volet-corps .perso-titre { margin-top: 1.6rem; }
.volet-corps .perso-note { margin: 0 0 0.9rem; }
.volet-corps .champs { margin-top: 0.2rem; }
.volet-corps .choix-fonds { margin-top: 0.9rem; }

/* ------------------------- les fonctions en cartes iconées */

.choix-fonctions {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.fcarte {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font: inherit;
  color: #2f3a2c;
  text-align: left;
  background: #fbf6ec;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 16px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.fcarte .fc-ic {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 10px;
  color: rgba(47, 58, 44, 0.45);
}

.fcarte .fc-ic svg { width: 1.05rem; height: 1.05rem; }

.fcarte .fc-nom {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}

/* l'état, à droite : le point qui se coche */
.fcarte .fc-etat {
  margin-left: auto;
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(47, 58, 44, 0.2);
  display: grid;
  place-items: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fcarte.active {
  opacity: 1;
  background: #ffffff;
  border-color: rgba(122, 138, 94, 0.55);
}

.fcarte.active .fc-ic { color: #7a8a5e; }

.fcarte.active .fc-etat {
  background: #7a8a5e;
  border-color: #7a8a5e;
}

.fcarte.active .fc-etat::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid #f5ead8;
  border-bottom: 2px solid #f5ead8;
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

/* ------------------------- étape 3, volet Photos et vidéos (12/08) —
   les photos restent sur l'appareil (compressées), les vidéos sont des
   liens titrés qui voyagent dans le QR. */

.zone-medias { display: grid; gap: 1.4rem; margin-top: 0.4rem; }

.medias-groupe { display: grid; gap: 0.7rem; }

.medias-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2f3a2c;
}

.medias-compte {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.5);
}

.medias-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
}

.medias-vignette {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #f5ead8;
  border: 1px solid rgba(47, 58, 44, 0.12);
}

.medias-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.medias-retire {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(47, 58, 44, 0.82);
  color: #f5ead8;
  font: 400 1rem/1 'Baloo 2', sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.medias-retire:active { transform: scale(0.9); }

.medias-video .medias-retire { position: static; flex: none; }

.medias-ajout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  aspect-ratio: 4 / 3;
  border: 2px dashed rgba(122, 138, 94, 0.55);
  border-radius: 12px;
  color: #7a8a5e;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.medias-ajout svg { width: 1.3rem; height: 1.3rem; }

@media (hover: hover) {
  .medias-ajout:hover { background: rgba(122, 138, 94, 0.08); border-color: #7a8a5e; }
}

.medias-videos { display: grid; gap: 0.5rem; }

.medias-video {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 14px;
  padding: 0.55rem 0.7rem;
}

.mv-ou {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7a8a5e;
  background: rgba(122, 138, 94, 0.12);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.mv-titre {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.medias-form { display: grid; gap: 0.8rem; justify-items: start; }

.medias-erreur {
  font-size: 0.88rem;
  font-weight: 600;
  color: #8a4a52;
  line-height: 1.5;
}

/* ------------------------- Personnalisation — le mini-éditeur
   (12/08, sa correction : un vrai onglet du rail, sous L'IA voyageur —
   « style Canva, WordPress, mais beaucoup plus petit »). Panneau de
   cartes de réglages à gauche, l'aperçu téléphone collant à droite ;
   les rubriques se rangent comme des calques : flèches + œil. */

.perso-offre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.65);
  margin-bottom: 1.3rem;
}

.perso-offre .volet-domaine { margin-left: 0; }

/* la puce « du modèle » : l'accent du design, l'état d'origine */
.puce-defaut { outline: 2px dashed rgba(47, 58, 44, 0.35); outline-offset: 2px; }

.perso-grille {
  display: grid;
  gap: 1.4rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .perso-grille { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; }
  .perso-apercu { position: sticky; top: 5.4rem; }
}

.perso-panneau {
  display: grid;
  gap: 0.9rem;
}

/* une carte de réglage — le panneau d'outils de l'éditeur */
.perso-carte {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 14px 32px -26px rgba(47, 58, 44, 0.35);
}

.perso-carte .perso-titre:first-child { margin-top: 0; }
.perso-carte .perso-titre { margin-top: 1.5rem; }
.perso-carte .choix-fonds { margin-top: 0.8rem; }
.perso-carte .perso-note { margin: 0.2rem 0 0.8rem; }

/* les rubriques en calques : icône, nom, flèches, œil */
.rubriques {
  display: grid;
  gap: 0.45rem;
}

.rubrique {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fbf6ec;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 14px;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
  transition: opacity 0.25s ease;
}

.rubrique.eteinte { opacity: 0.5; }

.rub-ic {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 9px;
  color: #7a8a5e;
}

.rub-ic svg { width: 0.95rem; height: 0.95rem; }

.rub-nom {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rub-boutons {
  margin-left: auto;
  display: flex;
  gap: 0.3rem;
}

.rub-btn {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font: inherit;
  color: rgba(47, 58, 44, 0.65);
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.12);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.rub-btn svg { width: 0.95rem; height: 0.95rem; }

.rub-btn:disabled { opacity: 0.35; cursor: default; }

@media (hover: hover) {
  .rub-btn:not(:disabled):hover { background: rgba(122, 138, 94, 0.14); color: #2f3a2c; }
}

/* l'œil : allumé quand la rubrique se montre */
.rubrique:not(.eteinte) .rub-oeil { color: #7a8a5e; }

/* ------------------------- chaque fonction, à votre main (13/08) :
   une ligne par fonction — l'icône, le libellé à renommer, la couleur,
   et le retour au modèle */

.fn-liste {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.fn-ligne {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 14px;
  padding: 0.5rem 0.6rem;
}

.fn-ligne .rub-ic { color: rgba(47, 58, 44, 0.55); flex: none; }

.fn-ligne .fn-nom {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
}

.fn-ligne .fn-c {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid rgba(47, 58, 44, 0.16);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

/* ------------------------- vos propres fonctions (13/08) : un nom, un
   texte, un retrait — le rangement vit dans le panneau des rubriques */

.persos-liste {
  display: grid;
  gap: 0.9rem;
  margin: 0.9rem 0 1rem;
}

.perso-fn {
  display: grid;
  gap: 0.55rem;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 16px;
  padding: 0.8rem;
}

.perso-fn .pf-retire { justify-self: end; }

.perso-mots {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.6);
}

.groupe-duo {
  display: grid;
  gap: 1.15rem;
}

@media (min-width: 700px) {
  .groupe-duo { grid-template-columns: 1fr 1fr; }
}

/* ------------------------- étape 4 : le QR */

.qr-scene {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.2rem;
}

.qr-rendu {
  width: min(250px, 70vw);
  background: #ffffff;
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 28px 55px -32px rgba(47, 58, 44, 0.5);
}

.qr-rendu svg { width: 100%; height: auto; border-radius: 12px; }

.qr-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.qr-bride { display: flex; flex-direction: column; gap: 0.45rem; }

.btn-bride {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(47, 58, 44, 0.45);
  background: rgba(47, 58, 44, 0.07);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  cursor: not-allowed;
}

.btn-bride svg { width: 1.05rem; height: 1.05rem; }

.qr-bride-note {
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.7);
  background: rgba(122, 138, 94, 0.14);
  border-radius: 999px;
  padding: 4px 12px;
}

/* l'alerte localhost : le scan ne peut pas marcher, on le dit */
.qr-alerte {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.75);
  background: rgba(255, 181, 158, 0.22);
  border-left: 3px solid #FFB59E;
  border-radius: 0 14px 14px 0;
  padding: 0.7rem 1rem;
}

/* le livret déborde du QR (élément à part : #qr-alerte sert au garde
   localhost) — on dit le geste qui libère de la place */
.qr-deborde {
  max-width: 40ch;
  font-size: 0.92rem;
  line-height: 1.6;
  font-weight: 600;
  color: #8a4a52;
  background: rgba(138, 74, 82, 0.08);
  border-left: 3px solid #8a4a52;
  border-radius: 0 14px 14px 0;
  padding: 0.8rem 1rem;
}

/* ------------------------- la navigation du parcours */

.parcours-nav {
  margin-top: 2.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-retour {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(47, 58, 44, 0.6);
  background: none;
  border: 1px solid rgba(47, 58, 44, 0.2);
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .btn-retour:hover { color: #2f3a2c; border-color: rgba(47, 58, 44, 0.45); }
}

.parcours-sauve {
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(122, 138, 94, 0.9);
}

.parcours-sauve::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 7px;
  vertical-align: 0.05em;
}

.sauve-pulse { animation: sauve-pose 0.5s ease; }

@keyframes sauve-pose {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

/* ------------------------- l'aperçu en direct */

.parcours-apercu { display: none; }

@media (min-width: 1024px) {
  .parcours-apercu {
    display: block;
    position: sticky;
    top: 6.5rem;
  }
}

/* (16/08 au soir, dicté : « le téléphone n'apparaît pas sur téléphone —
   il doit apparaître juste en dessous de Photos et vidéos ».) Dans le
   PARCOURS DU LIVRET, l'aperçu suit la colonne sur mobile : il se pose
   sous le dernier volet — « Photos et vidéos » à l'étape 3 — et le
   bouton flottant, devenu un doublon, s'efface. */
@media (max-width: 1023px) {
  #outil-parcours .parcours-apercu {
    display: block;
    margin-top: 2rem;
  }
  #outil-parcours .parcours-apercu .apercu-tel {
    max-width: min(21rem, 100%);
    margin: 0 auto;
  }
  .apercu-mobile-btn { display: none !important; }
}

/* L'aperçu 3D de l'atelier se range aux deux premières étapes (13/08 au
   soir, dicté). ATTENTION — la leçon du menu des langues : une classe qui
   pose `display` ÉCRASE l'attribut hidden ; l'état caché doit être
   REdéclaré, sinon la colonne reste là sur grand écran. */
.parcours-apercu[hidden] { display: none; }

.apercu-titre {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.5);
  margin-bottom: 1rem;
}

/* le cadre téléphone — cousin de celui du premier écran de l'accueil */
.apercu-tel {
  position: relative;
  width: min(370px, 100%);
  aspect-ratio: 9 / 18.5;
  background: #2f3a2c;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 40px 80px -40px rgba(47, 58, 44, 0.6);
}

.apercu-encoche {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 22px;
  background: #2f3a2c;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

.apercu-tel iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 32px;
  background: #fbf6ec;
}

/* le bouton d'aperçu mobile et son voile plein écran */
.apercu-mobile-btn {
  position: fixed;
  right: 1.1rem;
  bottom: 1.2rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: #f5ead8;
  background: #2f3a2c;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  box-shadow: 0 18px 36px -18px rgba(47, 58, 44, 0.7);
  cursor: pointer;
}

.apercu-mobile-btn svg { width: 1.1rem; height: 1.1rem; }

@media (min-width: 1024px) {
  .apercu-mobile-btn { display: none; }
}

.apercu-voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(47, 58, 44, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3.4rem 1rem 1rem;
}

.apercu-voile iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 26px;
  background: #fbf6ec;
}

.apercu-ferme {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  z-index: 61;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #2f3a2c;
  background: #f5ead8;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* ==========================================================================
   L'atelier — les objets physiques (l'outil, étape 2, 12/08).
   Le livre 3D se tient du doigt (rotation), se feuillette au clic et se
   retourne jusqu'au dos ; la planche s'incline. La commande est BRIDÉE.
   Les prix affichés sont des EXEMPLES PROVISOIRES (fourchette 25-90 €).
   ========================================================================== */

.note-exemple {
  font-style: normal;
  font-size: 0.82em;
  color: rgba(47, 58, 44, 0.45);
  font-weight: 600;
}

/* ------------------------- « Que créons-nous ? » */

.creer-titre {
  margin-top: 3rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.creer-cartes {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .creer-cartes { grid-template-columns: repeat(3, 1fr); max-width: 60rem; }
}

.creer-carte {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 24px;
  padding: 1.3rem 1.25rem 1.35rem;
  cursor: pointer;
  font: inherit;
  color: #2f3a2c;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .creer-carte:hover {
    transform: translateY(-4px);
    border-color: #7a8a5e;
    box-shadow: 0 22px 44px -30px rgba(47, 58, 44, 0.4);
  }
}

.cc-icone {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  background: rgba(122, 138, 94, 0.14);
  border-radius: 14px;
  color: #7a8a5e;
  margin-bottom: 0.55rem;
}

.cc-icone svg { width: 1.35rem; height: 1.35rem; }

.cc-nom { font-size: 1.18rem; font-weight: 500; }
.cc-detail { font-size: 0.88rem; line-height: 1.45; color: rgba(47, 58, 44, 0.6); }

/* ------------------------- le choix du format (8 types) */

.choix-types {
  margin-top: 1.8rem;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.type-carte {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 20px;
  padding: 0.95rem;
  cursor: pointer;
  font: inherit;
  color: #2f3a2c;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .type-carte:hover { transform: translateY(-3px); }
}

.type-carte.choisi {
  border-color: #7a8a5e;
  box-shadow: 0 0 0 4px rgba(122, 138, 94, 0.16);
}

/* la silhouette du format : proportions réelles, dos + feuilles */
.type-mini {
  position: relative;
  height: 78px;
  background: #fbf6ec;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 14px;
  margin-bottom: 0.6rem;
}

.type-mini i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(46px * var(--ratio, 0.72));
  height: 46px;
  border-radius: 2px 5px 5px 2px;
}

.type-mini .tm-dos {
  transform: translate(calc(-50% + 4px), calc(-50% + 4px));
  background: rgba(47, 58, 44, 0.55);
}

.type-mini .tm-page {
  transform: translate(calc(-50% + 2px), calc(-50% + 2px));
  background: #efe6d4;
  border: 1px solid rgba(47, 58, 44, 0.12);
}

.type-mini .tm-page:last-child {
  transform: translate(-50%, -50%);
  background: #ffffff;
}

/* la carte d'accueil n'a pas de pages : une seule feuille, plastifiée
   (13/08 au soir, dicté) — le mini le montre */
.type-mini.tm-plate .tm-dos,
.type-mini.tm-plate .tm-page:not(:last-child) { display: none; }
.type-mini.tm-plate .tm-page:last-child {
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(47, 58, 44, 0.16);
}

.types-note { margin-top: 1.4rem; }

.type-nom { font-size: 1.05rem; font-weight: 500; }

.type-faces {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.45);
}

.type-detail {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(47, 58, 44, 0.6);
}

.type-prix {
  margin-top: 0.55rem;
  width: fit-content;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2f3a2c;
  background: rgba(122, 138, 94, 0.14);
  border-radius: 999px;
  padding: 3px 11px;
}

/* ------------------------- le choix du design (4 familles) */

.choix-familles {
  margin-top: 1.8rem;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.famille-carte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 20px;
  padding: 0.95rem;
  cursor: pointer;
  font: inherit;
  color: #2f3a2c;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .famille-carte:hover { transform: translateY(-3px); }
}

.famille-carte.choisi {
  border-color: #7a8a5e;
  box-shadow: 0 0 0 4px rgba(122, 138, 94, 0.16);
}

/* la mini-couverture de chaque famille */
.fam-mini {
  position: relative;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.fam-mini i { display: block; border-radius: 3px; }
.fam-mini .fm-mot { width: 46%; height: 9px; }
.fam-mini .fm-ligne { width: 30%; height: 5px; }

.fam-mini.fam-bienvenue { background: #f5ead8; }
.fam-mini.fam-bienvenue .fm-bande {
  position: absolute; left: 0; top: 0; bottom: 0; width: 15%;
  background: var(--accent); border-radius: 0;
}
.fam-mini.fam-bienvenue .fm-mot { background: rgba(47, 58, 44, 0.8); margin-left: 12%; }
.fam-mini.fam-bienvenue .fm-ligne { background: rgba(47, 58, 44, 0.3); margin-left: 12%; }

.fam-mini.fam-champetre { background: #fbf6ec; }
.fam-mini.fam-champetre .fm-bande { width: 52%; height: 0; border-top: 3px double var(--accent); border-radius: 0; }
.fam-mini.fam-champetre .fm-mot { background: rgba(47, 58, 44, 0.75); }
.fam-mini.fam-champetre .fm-ligne { background: rgba(47, 58, 44, 0.28); }

.fam-mini.fam-ardoise { background: #2f3a2c; align-items: flex-start; padding-left: 14%; }
.fam-mini.fam-ardoise .fm-bande { width: 18%; height: 4px; background: var(--accent); }
.fam-mini.fam-ardoise .fm-mot { background: rgba(245, 234, 216, 0.85); }
.fam-mini.fam-ardoise .fm-ligne { background: rgba(245, 234, 216, 0.4); }

.fam-mini.fam-galet { background: #e7e2d8; }
.fam-mini.fam-galet .fm-bande { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); order: 2; }
.fam-mini.fam-galet .fm-mot { background: rgba(58, 58, 52, 0.7); }
.fam-mini.fam-galet .fm-ligne { display: none; }

.famille-nom { font-size: 1.05rem; font-weight: 500; }
.famille-detail { font-size: 0.85rem; line-height: 1.45; color: rgba(47, 58, 44, 0.6); }

/* SOUS LA GRILLE DES MODÈLES (14/08 au soir, sa demande) : le visiteur
   doit comprendre en REGARDANT la grille qu'aucun modèle n'est figé,
   sans avoir à cliquer pour le découvrir. Un filet, une phrase — le
   ton d'une note posée, pas d'un encart publicitaire. */
.galerie-note {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(47, 58, 44, 0.12);
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(47, 58, 44, 0.68);
  max-width: 46rem;
}
.galerie-note strong { color: #2f3a2c; font-weight: 600; }

/* ------------------------- le choix du QR et les chips */

.choix-qr {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.qr-choix {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  cursor: pointer;
  font: inherit;
  color: #2f3a2c;
  width: fit-content;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.qr-choix.choisi {
  border-color: #7a8a5e;
  box-shadow: 0 0 0 3px rgba(122, 138, 94, 0.16);
}

.qc-puce {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border-radius: 50%;
  background: var(--c, #f5ead8);
  border: 1px solid rgba(47, 58, 44, 0.14);
}

.qc-puce.qc-vide {
  background:
    repeating-linear-gradient(45deg, rgba(47, 58, 44, 0.12) 0 3px, transparent 3px 6px);
}

.qc-nom { font-size: 0.92rem; font-weight: 600; }

.choix-chips {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.chip {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2f3a2c;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.12);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* le choix « Une autre langue… » (16/08) : un <select> habillé en puce —
   la flèche du navigateur est remplacée par un chevron dessiné, pour
   qu'il se tienne à côté des trois vraies puces sans se déguiser */
.chip-langues {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%232f3a2c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  max-width: 15rem;
  text-overflow: ellipsis;
}

.chip.choisi {
  background: #7a8a5e;
  border-color: #7a8a5e;
  color: #f5ead8;
}

.police-fraunces { font-family: Fraunces, Georgia, serif; }
.police-baloo { font-family: 'Baloo 2', system-ui, sans-serif; }
.police-italique { font-family: Fraunces, Georgia, serif; font-style: italic; }

/* ------------------------- le récapitulatif de commande */

.recap-carte {
  margin-top: 1.8rem;
  max-width: 34rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 0.4rem 1.4rem;
  box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
}

.recap-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
}

.recap-ligne + .recap-ligne { border-top: 1px solid rgba(47, 58, 44, 0.08); }

.recap-nom {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
}

.recap-val { font-weight: 600; text-align: right; }

.recap-surmesure { margin-top: 2rem; }

/* LE PRODUIT à la dernière étape (13/08 au soir, dicté : « les dimensions
   et tout le descriptif du produit se trouvent à la dernière partie de
   personnalisation ») */
.recap-produit {
  margin-top: 1.6rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 20px;
  padding: 1.3rem 1.4rem;
}
.recap-produit .perso-titre { margin-top: 0; }
.rp-dim {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: 0.7rem; margin-bottom: 0.7rem;
  border-bottom: 1px solid rgba(47, 58, 44, 0.1);
}
.rp-lab { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(47, 58, 44, 0.55); }
.rp-val { font-family: Fraunces, Georgia, serif; font-size: 1.05rem; font-weight: 600; }
.rp-texte { font-size: 0.92rem; line-height: 1.6; color: rgba(47, 58, 44, 0.8); }
.rp-liste { margin-top: 0.8rem; display: grid; gap: 0.4rem; }
.rp-liste li {
  position: relative; padding-left: 1.1rem;
  font-size: 0.86rem; line-height: 1.5; color: rgba(47, 58, 44, 0.72);
}
.rp-liste li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%; background: #7a8a5e;
}

/* ------------------------- la scène 3D */

.scene-objet {
  position: relative;
  height: 460px;
  perspective: 1600px;
  /* la scène se TIENT, elle ne se sélectionne pas (son signalement du
     13/08 au soir : « on peut sélectionner du texte dans la case, ce
     n'est pas normal ») — le curseur en I et le surlignage bleu n'ont
     rien à faire sur un objet qu'on tourne du doigt */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(closest-side at 50% 82%, rgba(47, 58, 44, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(245, 234, 216, 0.35), rgba(245, 234, 216, 0));
}

.apercu-aide {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.5);
}

.objet3d {
  transform-style: preserve-3d;
  transform: scale(var(--zoom, 1)) rotateX(var(--rx, 8deg)) rotateY(var(--ry, -24deg));
  cursor: grab;
}

.objet3d:active { cursor: grabbing; }
.objet3d.zoomee { --zoom: 1.45; }

.scene-boutons {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  gap: 0.4rem;
}

.scene-zoom {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: #2f3a2c;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.scene-zoom svg { width: 1.15rem; height: 1.15rem; }

.scene-zoom.actif { background: #2f3a2c; color: #f5ead8; border-color: #2f3a2c; }

/* ------------------------- le livre */

.livre {
  --lw: 215px;
  position: relative;
  width: var(--lw);
  height: calc(var(--lw) / var(--ratio, 0.72));
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.livre[data-etat="ouvert"] { transform: translateX(50%); }
.livre[data-etat="retourne"] { transform: translateX(100%); }

.feuillet {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.ff {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px 12px 12px 4px;
  overflow: hidden;
  background: #fdfaf3;
  box-shadow:
    inset 10px 0 18px -14px rgba(47, 58, 44, 0.35),
    0 2px 6px rgba(47, 58, 44, 0.12);
}

.ff.arriere {
  transform: rotateY(180deg);
  border-radius: 12px 4px 4px 12px;
  box-shadow:
    inset -10px 0 18px -14px rgba(47, 58, 44, 0.35),
    0 2px 6px rgba(47, 58, 44, 0.12);
}

/* les couvertures — la famille fait le dessin, --accent fait la teinte.
   TOUTES PORTÉES SUR `.ff` (15/08, son défaut : « les exemples de livret
   dans le site vitrine sont bugués et énormes »). La cause : ce `.couv`
   nu était le SECOND du fichier — l'accueil et À propos dessinent leurs
   petites couvertures avec la même classe, et cette règle-ci, écrite
   3 000 lignes plus bas, gagnait sur la leur. Un `padding: 13% 11%`
   prévu pour une face de livret imprimé gonflait chaque vignette de la
   vitrine à 664 px de large. Portée sur `.ff`, elle ne sort plus de la
   scène 3D. */

.ff.couv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13% 11%;
}

.cv-nom {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.cv-sous {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.65;
}

.cv-sur {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.4rem;
}

.ff.couv.fam-bienvenue { background: #f5ead8; color: #2f3a2c; padding-left: 26%; }
.ff.couv.fam-bienvenue .cv-bande {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 15%;
  background: var(--accent, #7a8a5e);
}
.ff.couv.fam-bienvenue .cv-mot {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.ff.couv.fam-champetre { background: #fbf6ec; color: #2f3a2c; align-items: center; text-align: center; }
.ff.couv.fam-champetre .cv-filet {
  width: 58%;
  border-top: 3px double var(--accent, #7a8a5e);
  margin-bottom: 0.8rem;
}
.ff.couv.fam-champetre .cv-filet.bas { margin-bottom: 0; margin-top: 0.8rem; }
.ff.couv.fam-champetre .cv-nom { font-style: italic; }

.ff.couv.fam-ardoise { background: #2f3a2c; color: #f5ead8; justify-content: flex-end; padding-bottom: 16%; }
.ff.couv.fam-ardoise .cv-sur { color: var(--accent, #f5ead8); opacity: 1; }

.ff.couv.fam-galet { background: #e7e2d8; color: #3a3a34; align-items: center; text-align: center; }
.ff.couv.fam-galet .cv-nom { font-size: 0.95rem; letter-spacing: 0.04em; }
.ff.couv.fam-galet .cv-point {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #8a8577);
  margin-top: 0.7rem;
}

/* les pages intérieures : le sommaire esquissé */

.page { padding: 14% 12%; display: flex; flex-direction: column; }

.pg-titre {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: #2f3a2c;
  margin-bottom: 0.7rem;
}

.tl {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.14);
  margin-bottom: 7px;
}

.tl.courte { width: 55%; }

.pg-garde { align-items: center; justify-content: center; text-align: center; }
.pg-garde .pg-mot {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #2f3a2c;
  margin-bottom: 0.7rem;
}
.pg-garde .tl { width: 34%; }

.pg-dos { align-items: center; justify-content: center; text-align: center; gap: 0.6rem; }
.pg-scannez {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.6);
  max-width: 80%;
}
.pg-qr { width: 52%; }
.pg-qr svg { width: 100%; height: auto; border-radius: 6px; }
.pg-marque { font-size: 0.5rem; opacity: 0.4; }

.qr-case-vide {
  aspect-ratio: 1;
  border: 2px dashed rgba(47, 58, 44, 0.3);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.45);
  text-align: center;
}

/* la carte rigide : recto verso, elle se retourne d'un clic */

.carte3d {
  --lw: 225px;
  position: relative;
  width: var(--lw);
  height: calc(var(--lw) / var(--ratio, 0.72));
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.carte3d.retournee { transform: rotateY(180deg); }

.c3-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* COINS DROITS (13/08 au soir, dicté : « les bords ne doivent pas être
     arrondis mais carrés ») — une carte plastifiée se coupe au massicot */
  border-radius: 0;
  overflow: hidden;
  background: #fdfaf3;
  box-shadow: 0 3px 8px rgba(47, 58, 44, 0.16);
}

.c3-face.arriere { transform: rotateY(180deg); }
.c3-face .ff { position: absolute; inset: 0; box-shadow: none; border-radius: 0; }

/* « une simple page plastifiée » (sa dictée du 13/08 au soir) : le
   reflet du film, en biais — c'est ce qui distingue la carte du papier */
.carte3d.plastifiee .c3-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.32) 0 16%, rgba(255, 255, 255, 0) 44%);
}

/* (LA CARTE D'ACCUEIL et ses 8 modèles vivent dans cartes.css —
   sortis d'ici le 13/08 au soir : 90 Ko que seul l'atelier utilise.) */

/* ------------------------- la planche gravée */

.planche3d {
  width: min(340px, 82vw);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 8%;
  text-align: center;
  background: linear-gradient(105deg, #c99a63, #b58350 45%, #c99a63 80%, #ba8955);
  box-shadow:
    inset 0 2px 3px rgba(255, 235, 200, 0.5),
    inset 0 -3px 6px rgba(90, 55, 25, 0.35),
    0 30px 55px -28px rgba(47, 58, 44, 0.55);
  overflow: hidden;
}

/* les veines du bois */
.planche3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(97deg,
      rgba(120, 78, 40, 0.16) 0 2px, transparent 2px 16px,
      rgba(120, 78, 40, 0.1) 16px 17px, transparent 17px 34px);
  pointer-events: none;
}

/* la gravure : creusée dans le bois */
.p3-titre,
.p3-desc {
  position: relative;
  color: rgba(74, 48, 24, 0.92);
  text-shadow: 0 1px 0 rgba(255, 235, 200, 0.45);
  overflow-wrap: anywhere;
}

.p3-titre { font-weight: 600; line-height: 1.15; }
.p3-titre.taille-1 { font-size: 1.1rem; }
.p3-titre.taille-2 { font-size: 1.5rem; }
.p3-titre.taille-3 { font-size: 1.95rem; }

.p3-desc { font-size: 0.82rem; line-height: 1.45; max-width: 90%; }

.p3-qr {
  position: relative;
  width: 30%;
  margin-top: 0.5rem;
}

.p3-qr svg { width: 100%; height: auto; }
.p3-qr.qr-case-vide { border-color: rgba(74, 48, 24, 0.45); color: rgba(74, 48, 24, 0.6); }

/* ------------------------- le voile d'aperçu de l'atelier */

.atelier-voile-scene {
  height: 100%;
  display: grid;
  align-items: stretch;
}

.atelier-voile-scene .scene-objet {
  height: 100%;
  background:
    radial-gradient(closest-side at 50% 82%, rgba(47, 58, 44, 0.18), transparent 70%),
    #fbf6ec;
}

/* ==========================================================================
   Mon espace — le dashboard de l'abonné (12/08, dicté).
   Rail de sections à gauche, une vue à la fois à droite. Cartes de
   statistiques reprises de 21st (étiquette, grand chiffre, mini-barres,
   carte-lien qui ouvre sa section) redessinées Booky — voir mcpuse.cc.
   ========================================================================== */

.espace-grille {
  margin-top: 2.8rem;
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 1024px) {
  .espace-grille {
    grid-template-columns: 15rem 1fr;
    gap: 3.5rem;
    align-items: start;
  }
}

/* le rail : la navigation du dashboard */
.espace-rail {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.3rem;
}

.espace-rail::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .espace-rail {
    position: sticky;
    top: 6.5rem;
    flex-direction: column;
    overflow: visible;
    background: #ffffff;
    border: 1px solid rgba(47, 58, 44, 0.09);
    border-radius: 22px;
    padding: 0.7rem;
    box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
  }
}

.er-lien {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.65);
  background: none;
  border: none;
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.er-lien svg { width: 1.1rem; height: 1.1rem; flex: none; }

@media (hover: hover) {
  .er-lien:hover { background: rgba(122, 138, 94, 0.1); color: #2f3a2c; }
}

.er-lien.actif {
  background: #2f3a2c;
  color: #f5ead8;
}

.er-bientot {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f3a2c;
  background: rgba(255, 181, 158, 0.5);
  border-radius: 999px;
  padding: 2px 8px;
}

.er-lien.actif .er-bientot { background: #FFB59E; }

/* le contenu */
.espace-h2 {
  margin-top: 2.6rem;
  font-size: 1.35rem;
  font-weight: 500;
}

.espace-vue > .espace-h2:first-child { margin-top: 0; }

.espace-vide {
  margin-top: 1.2rem;
  max-width: 44rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.6);
  background: rgba(122, 138, 94, 0.08);
  border: 1px dashed rgba(122, 138, 94, 0.4);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
}

/* les cartes de statistiques (21st → Booky) */
.stat-cartes {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Les cartes REFAITES le 14/08 (« je n'aime pas les stats que tu as mis :
   cherche autre chose sur 21st »). Mécaniques prises à « Stats cards with
   links » : l'étiquette et la variation en tête, la grande valeur, une
   COURBE D'AIRE en pied et un lien séparé par un filet. Réécrit en
   vanilla — palette Booky, Fraunces sur la valeur, courbe qui se dessine
   lentement, ombres et arrondis maison. Voir mcpuse.cc. */

.stat-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: #2f3a2c;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 1.1rem 1.2rem 0;
  cursor: pointer;
  box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.3s ease;
}

@media (hover: hover) {
  .stat-carte:hover { transform: translateY(-3px); border-color: rgba(122, 138, 94, 0.5); }
}

.sc-tete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.55rem;
}

.sc-ic {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(122, 138, 94, 0.14);
  color: #5d6b47;
}

.sc-ic svg { width: 1.05rem; height: 1.05rem; }

.sc-etiquette {
  flex: 1;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.55);
}

/* la variation : une pastille discrète, dans la pêche de la palette */
.sc-var {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: #a2543c;
  background: rgba(255, 181, 158, 0.34);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.sc-valeur {
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.1;
}

.sc-sous {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(47, 58, 44, 0.5);
}

/* LA COURBE : une aire qui s'éteint vers le bas, un trait lissé qui se
   dessine lentement (Booky anime ample et posé — 1,6 s). */
.sc-courbe {
  display: block;
  width: calc(100% + 2.4rem);
  margin: 0.9rem -1.2rem 0;
  height: 3.2rem;
}

.sc-courbe svg { display: block; width: 100%; height: 100%; }

.crb-trait {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: crb-trace 1.6s cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
}

.crb-aire {
  opacity: 0;
  animation: crb-remplit 1.4s ease 0.5s forwards;
}

@keyframes crb-trace { to { stroke-dashoffset: 0; } }
@keyframes crb-remplit { to { opacity: 1; } }

/* le pied : le lien, séparé par un filet — la mécanique de 21st */
.sc-pied {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: calc(100% + 2.4rem);
  margin: 0 -1.2rem;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid rgba(47, 58, 44, 0.09);
  font-size: 0.78rem;
  font-weight: 700;
  color: #5d6b47;
}

.sc-pied svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (hover: hover) {
  .stat-carte:hover .sc-pied svg { transform: translateX(3px); }
}

/* la courbe se colle au filet du pied quand elle est là */
.sc-courbe + .sc-pied { margin-top: -0.4rem; }

.stat-exemple {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.62);
}

.stat-exemple strong { color: #2f3a2c; }

@media (prefers-reduced-motion: reduce) {
  .crb-trait, .crb-aire { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* ------------------------- LE SUIVI DE COMMANDE (14/08, dicté)
   Sept étapes, trois états. Mécanique prise à « Task Steps » (21st) : un
   marqueur DIFFÉRENT par état — coche pour ce qui est fait, arc qui
   tourne pour l'étape en cours, point carré pour ce qui vient — et la
   date qui n'apparaît que sur les étapes faites. Réécrit en vanilla,
   avec un rail vertical rempli jusqu'à l'étape en cours ; l'arc tourne
   lentement (2,6 s) et le nom de l'étape en cours respire. */

.cmd-carte {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 26px;
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 24px 50px -38px rgba(47, 58, 44, 0.45);
}

.cmd-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid rgba(47, 58, 44, 0.09);
}

.cmd-num {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
}

/* la pastille qui dit la vérité : rien n'a été fabriqué */
.cmd-exemple {
  margin-left: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a2543c;
  background: rgba(255, 181, 158, 0.34);
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  vertical-align: 0.1em;
}

.cmd-nom { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-top: 0.25rem; }
.cmd-detail { font-size: 0.9rem; color: rgba(47, 58, 44, 0.62); margin-top: 0.1rem; }

.cmd-droite { display: grid; gap: 0.5rem; justify-items: end; }

.cmd-arrivee {
  font-size: 0.85rem;
  font-weight: 700;
  color: #5d6b47;
  background: rgba(122, 138, 94, 0.13);
  border-radius: 14px;
  padding: 0.55rem 0.85rem;
}

/* LE SUIVI CHEZ LE TRANSPORTEUR (14/08, dicté) : le lien que nous posons
   depuis le compte admin au moment de l'expédition. Tant qu'il n'existe
   pas, la même ligne dit pourquoi — elle ne disparaît jamais. */
.cmd-transporteur {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2f3a2c;
  text-decoration: none;
  border-bottom: 0.12rem solid rgba(122, 138, 94, 0.55);
  padding-bottom: 0.12rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.cmd-transporteur svg { width: 0.8rem; height: 0.8rem; }

@media (hover: hover) {
  a.cmd-transporteur:hover { color: #5d6b47; border-color: #7a8a5e; }
}

.cmd-transporteur.vide {
  display: block;
  text-align: right;
  border-bottom: none;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.45);
}

.ct-note { display: block; font-weight: 500; font-size: 0.78rem; }

@media (max-width: 560px) {
  .cmd-droite { justify-items: start; }
  .cmd-transporteur.vide { text-align: left; }
}

.suivi { position: relative; display: grid; gap: 0; }

.suivi-pas {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: start;
  gap: 0 0.9rem;
  padding: 0.75rem 0;
}

/* le rail : il relie les marqueurs, et s'éteint après l'étape en cours */
.suivi-pas::before {
  content: '';
  position: absolute;
  left: 0.94rem;
  top: 2.1rem;
  bottom: -0.4rem;
  width: 0.12rem;
  background: rgba(47, 58, 44, 0.13);
}

.suivi-pas:last-child::before { display: none; }
.suivi-pas.faite::before { background: rgba(122, 138, 94, 0.55); }

.sp-marque {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(47, 58, 44, 0.06);
  color: rgba(47, 58, 44, 0.3);
}

.suivi-pas.faite .sp-marque { background: rgba(122, 138, 94, 0.16); color: #5d6b47; }
.suivi-pas.encours .sp-marque { background: rgba(255, 181, 158, 0.3); color: #a2543c; }
.sp-marque svg { width: 1rem; height: 1rem; }

/* le point carré des étapes à venir */
.suivi-pas.avenir .sp-marque::after {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 3px;
  background: rgba(47, 58, 44, 0.26);
}

.sp-arc { animation: sp-tourne 2.6s linear infinite; }
@keyframes sp-tourne { to { transform: rotate(360deg); } }

.sp-corps { display: grid; gap: 0.1rem; min-width: 0; }

.sp-nom { font-size: 0.98rem; font-weight: 600; color: rgba(47, 58, 44, 0.45); }
.suivi-pas.faite .sp-nom { color: rgba(47, 58, 44, 0.75); }
.suivi-pas.encours .sp-nom { color: #2f3a2c; font-weight: 700; }

.sp-note { font-size: 0.82rem; line-height: 1.45; color: rgba(47, 58, 44, 0.42); }
.suivi-pas.encours .sp-note { color: rgba(47, 58, 44, 0.62); }
.suivi-pas.avenir .sp-note { display: none; }

.sp-quand {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.42);
  white-space: nowrap;
  padding-top: 0.15rem;
}

.cmd-note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(47, 58, 44, 0.09);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.6);
}

@media (max-width: 560px) {
  .suivi-pas { grid-template-columns: 2rem 1fr; }
  .sp-quand { grid-column: 2; padding-top: 0.3rem; }
}

/* ------------------------- les chiffres d'un livret (14/08) */

.ld-courbe { margin-top: 0.9rem; }
.ld-courbe .sc-courbe { width: 100%; margin: 0; height: 3rem; }
.ld-courbe-lab {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.45);
}

.ld-questions { display: grid; gap: 0.55rem; margin-top: 0.3rem; }

.ld-question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(47, 58, 44, 0.08);
}

.ld-question:last-child { border-bottom: none; padding-bottom: 0; }

.lq-texte { font-size: 0.9rem; line-height: 1.45; color: rgba(47, 58, 44, 0.82); }

.lq-fois {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: #5d6b47;
  background: rgba(122, 138, 94, 0.14);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

/* la pastille de nav se cache sur les pages sans onglet (Mon espace) */
.pastille.pastille-cachee { opacity: 0; }

/* ==========================================================================
   Mon espace v3 (12/08, dicté) — le livret se travaille ICI :
   chaque livret a SON tableau de bord, et son IA se montre par le
   CADRAN unique en 7 étapes (le questionnaire vit en pop-up, plus bas).
   ========================================================================== */

/* ------------------------- la vitrine des livrets (v4, 12/08 — refaite
   de A à Z sur sa demande) : le livret EXPOSÉ, comme en devanture.
   Le vrai livret.html vit dans un cadre crème penché — l'objet-tirage
   du site —, épinglé pêche ; son étiquette-QR pend au coin, et la fiche
   se lit en trois lignes iconées (icônes du dossier du propriétaire,
   posées en inline). Inspiration 21st : les fiches produit « le visuel
   d'abord, les détails ensuite » (voir mcpuse.cc). Le clic — n'importe
   où sur la carte — ouvre le tableau de bord du livret ; la taille reste
   la moyenne validée le 12/08. */

.vitrines {
  display: grid;
  gap: 1.2rem;
}

.vitrine {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: 215px;
  text-align: left;
  font: inherit;
  color: #2f3a2c;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 28px;
  padding: 1.15rem 1.6rem 1.15rem 1.35rem;
  cursor: pointer;
  box-shadow: 0 26px 55px -35px rgba(47, 58, 44, 0.45);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.8, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

@media (hover: hover) {
  .vitrine:hover {
    transform: translateY(-5px);
    border-color: #7a8a5e;
    box-shadow: 0 34px 65px -35px rgba(47, 58, 44, 0.55);
  }
  /* le cadre se redresse à moitié sous la souris, comme les tirages —
     réponse immédiate, aucun délai d'entrée là-dessus */
  .vitrine:hover .vl-cadre { transform: rotate(-0.6deg); }
  .vitrine:hover .vl-va { gap: 0.85rem; color: #2f3a2c; }
}

/* la scène : le cadre et son étiquette flottent doucement, d'un seul
   mouvement — le geste Booky des objets posés */
.vl-scene {
  position: relative;
  width: 212px;
  padding: 0.5rem 0 0.4rem;
  animation: flotte-doux 10s ease-in-out infinite;
}

/* l'épingle pêche du cadre — le même geste que les tirages de l'accueil
   (posée sur la scène : le cadre coupe ce qui dépasse de lui) */
.vl-scene::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFB59E;
  box-shadow:
    0 3px 8px rgba(47, 58, 44, 0.25),
    inset 0 -2px 3px rgba(47, 58, 44, 0.12);
  z-index: 2;
}

/* le cadre crème du tirage : le VRAI livret dedans, réduit — l'iframe
   est décorative, c'est la carte entière qui se clique */
.vl-cadre {
  display: block;
  width: 170px;
  height: 208px;
  margin: 0 auto;
  background: #fdf9f1;
  border: 1px solid rgba(47, 58, 44, 0.08);
  border-radius: 16px;
  padding: 8px;
  overflow: hidden;
  transform: rotate(-2.4deg);
  box-shadow: 0 24px 44px -24px rgba(47, 58, 44, 0.45);
  transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.vl-cadre iframe {
  width: 375px;
  height: 812px;
  border: 0;
  border-radius: 10px;
  transform: scale(0.41);
  transform-origin: top left;
  pointer-events: none;
  background: #fbf6ec;
}

/* l'étiquette-QR, pendue au coin du cadre par sa propre épingle */
.vl-etiquette {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 72px;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 12px;
  padding: 5px;
  transform: rotate(5deg);
  box-shadow: 0 16px 30px -16px rgba(47, 58, 44, 0.45);
}

.vl-etiquette::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFB59E;
  box-shadow: 0 2px 5px rgba(47, 58, 44, 0.25);
}

.vl-etiquette svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* la fiche, à droite du présentoir */
.vl-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.4rem 0;
}

.vl-sur {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a8a5e;
}

.vl-sur::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 7px;
  vertical-align: 0.05em;
}

.vl-nom {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.12;
}

.vl-lieu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.98rem;
  color: rgba(47, 58, 44, 0.6);
}

.vl-lieu svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #7a8a5e;
  flex: none;
}

/* trois lignes iconées, comme une fiche de bibliothécaire */
.vl-fiche {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.5rem;
}

.vl-ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.75);
}

.vl-ligne svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #7a8a5e;
  flex: none;
}

.vl-va {
  margin-top: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: rgba(47, 58, 44, 0.75);
  transition: gap 0.3s ease, color 0.3s ease;
}

.vl-va svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #FFB59E;
}

/* ------------------------- le Catalogue (12/08, sa décision : il vit
   dans Mon espace, réservé aux abonnés — pas d'onglet public).
   V2 le jour même, sa demande : UN VRAI MINI SHOP — les filtres par
   type de livret, la grille de petits carrés, et au clic la fiche du
   modèle : le descriptif et l'endroit où l'on commande. Les 60 tuiles
   « Bientôt » sont ses exemples dictés (des pages vides) pour voir la
   densité — elles attendent les vrais designs. */

/* les filtres — les chips de l'atelier, avec leur petit compte */
.cata-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.4rem;
}

.chip-compte {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.55;
  margin-left: 0.2rem;
}

/* la puce VERROUILLÉE de la couleur du modèle (13/08 : la première
   couleur du fond ne se change pas) — une pastille témoin, pas un bouton */
.puce-verrou { cursor: default; }

/* la grille des modèles secouée quand on tente de continuer sans en
   choisir un (l'étape 1 est le modèle depuis le 13/08) */
.modeles-manque {
  outline: 2px solid rgba(184, 69, 46, 0.6);
  outline-offset: 8px;
  border-radius: 14px;
}

/* la grille : des carrés qui prennent leur place (sa correction du
   12/08 — plus grands, le prix bien visible ; 13/08 soir : colonnes
   FIXES à 236px, alignées sur .mod-grille — l'aperçu remplit la tuile,
   une échelle exacte exige une largeur connue) */
.cata-grille {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, 236px);
  justify-content: center;
}

/* les têtes de collection (13/08 : les vrais modèles arrivent par
   fournées, groupés — « Les intemporels », puis les univers à thème ;
   « À venir » ferme la marche) */
.cata-coll {
  margin: 1.9rem 0 0.85rem;
  font-size: 1.12rem;
  font-weight: 600;
  color: #2f3a2c;
}
.cata-coll:first-of-type { margin-top: 1.3rem; }

.cata-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font: inherit;
  color: #2f3a2c;
  text-align: center;
  background: #ffffff;
  border: 2px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 0.85rem 0.85rem 0.95rem;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

@media (hover: hover) {
  .cata-tuile:hover {
    transform: translateY(-4px);
    border-color: rgba(122, 138, 94, 0.55);
    box-shadow: 0 20px 40px -26px rgba(47, 58, 44, 0.4);
  }
}

/* la mini-couverture de la tuile */
.ct-couv {
  position: relative;
  aspect-ratio: 210 / 297;
  border-radius: 12px;
  border: 1px solid rgba(47, 58, 44, 0.08);
  background: #fdf9f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  overflow: hidden;
}

.ct-l {
  display: block;
  width: 64%;
  height: 5px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.14);
}

.ct-l.courte { width: 40%; }

/* les VRAIS modèles : couverture crème au filet d'édition, le nom en grand */
.ct-reel::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(122, 138, 94, 0.45);
  border-radius: 8px;
  pointer-events: none;
}

.ct-nom {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  text-wrap: balance;
}

/* les gabarits des à-venir : bandeau, pleine couleur, socle */
.ct-bande {
  display: block;
  width: 100%;
  height: 30%;
  border-radius: 7px;
  background: var(--c);
}

.ct-g0 { justify-content: flex-start; }

.ct-g1 { background: var(--c); border-color: transparent; }
.ct-g1 .ct-bande { display: none; }
.ct-g1 .ct-l { background: rgba(253, 249, 241, 0.5); }

.ct-g2 { justify-content: flex-end; }
.ct-g2 .ct-bande { order: 9; height: 24%; margin-top: 4px; }

/* la pastille des à-venir — le détail pêche */
.ct-badge {
  position: absolute;
  top: -7px;
  right: -5px;
  z-index: 1;
  background: #FFB59E;
  color: #2f3a2c;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 6px 12px -6px rgba(47, 58, 44, 0.4);
}

/* le pied de la tuile : le type à gauche, le PRIX en grand à droite */
.ct-pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.25rem;
}

.ct-legende {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* les prix du catalogue : DES EXEMPLES, comme tous les prix du site —
   en Fraunces et en grand, comme ceux de la boutique (sa correction) */
.ct-prix {
  flex: none;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
  color: #2f3a2c;
}

.ct-prix.ct-compris {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8a5e;
}

/* ----- la fiche d'un modèle : le téléphone + le descriptif ----- */

.cata-fiche {
  margin-top: 1.3rem;
  display: grid;
  gap: 2.4rem;
  align-items: center;
}

@media (min-width: 900px) {
  .cata-fiche { grid-template-columns: auto 1fr; gap: 3.5rem; }
}

.ct-sur {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8a5e;
}

.ct-sur::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 7px;
  vertical-align: 0.05em;
}

.fm-desc {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.75);
  max-width: 48ch;
}

/* le prix de la fiche — grand, comme les cartes-produit de la boutique */
.fm-prix {
  margin-top: 0.5rem;
  font-size: 2.2rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* où va le modèle après l'achat (13/08, dicté : « un petit texte
   visible ») — petit mais lisible, jamais grisé au point de disparaître */
.fm-apres {
  margin-top: 0.55rem;
  max-width: 34rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(47, 58, 44, 0.78);
}

/* les modèles de base : compris dans l'abonnement, pas de prix */
.fm-compris {
  margin-top: 0.5rem;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.7);
  background: rgba(122, 138, 94, 0.14);
  border-radius: 999px;
  padding: 4px 12px;
}

/* le récapitulatif de commande de la fiche (le motif de l'atelier) */
.cata-recap {
  margin-top: 1.1rem;
  width: 100%;
}

.cata-recap + .qr-bride { margin-top: 1.1rem; }

/* le téléphone de la fiche : le vrai livret de démo dedans — l'iframe
   est décorative, les gestes passent par les boutons d'à côté */
.fm-scene {
  display: flex;
  justify-content: center;
}

.fm-tel {
  position: relative;
  /* agrandi le 13/08 (sa demande : « on doit voir le modèle sur le
     petit téléphone — tu peux agrandir si besoin ») */
  width: 250px;
  aspect-ratio: 9 / 18.5;
  background: #2f3a2c;
  border-radius: 28px;
  padding: 8px;
  overflow: hidden;
  box-shadow: 0 24px 48px -26px rgba(47, 58, 44, 0.5);
}

.fm-encoche {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 14px;
  background: #2f3a2c;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}

.fm-tel iframe {
  width: 375px;
  height: 812px;
  border: 0;
  border-radius: 20px;
  transform: scale(0.624); /* 234 / 375 : la largeur intérieure du cadre agrandi */
  transform-origin: top left;
  /* on peut FAIRE DÉFILER le modèle dans le téléphone de la fiche
     (13/08, sa demande) — c'est le seul aperçu-photo interactif */
  pointer-events: auto;
  background: #fbf6ec;
}

.fm-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 1;
}

.fm-nom { font-size: 1.35rem; font-weight: 500; }

.fm-accroche {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.65);
}

.fm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.7);
  background: rgba(122, 138, 94, 0.12);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-top: 0.2rem;
}

.fm-chip svg {
  width: 1rem;
  height: 1rem;
  color: #7a8a5e;
  flex: none;
}

.fm-actions {
  margin-top: auto;
  padding-top: 1.15rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ------------------------- le tableau de bord d'un livret */

.ld-entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.ld-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(47, 58, 44, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.45rem 0.2rem;
  transition: color 0.25s ease, gap 0.25s ease;
}

.ld-retour svg { width: 1rem; height: 1rem; }

@media (hover: hover) {
  .ld-retour:hover { color: #2f3a2c; gap: 0.7rem; }
}

.ld-actions, .ld-confirme {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ld-grille {
  display: grid;
  gap: 1.2rem;
  align-items: start;
}

/* (16/08, sa seconde dictée sur cet écran : les fiches en GRILLE 2 × 2 —
   « collé en haut à gauche le QR code, en haut à droite Son IA, en bas à
   gauche Ses statistiques, à droite le livret d'or ». L'ordre vient du
   HTML, la grille ne fait que le plier en deux colonnes ; la carte des
   questions, hors carré, prend toute la largeur en dessous. Sur écran
   étroit, tout s'empile dans le même ordre de lecture.) */
@media (min-width: 1024px) {
  .ld-grille {
    grid-template-columns: minmax(300px, 400px) minmax(0, 54rem);
    justify-content: start;
    gap: 2rem;
  }
  .ld-scene { position: sticky; top: 5.4rem; }
}

.ld-cote {
  display: grid;
  gap: 1.2rem;
  align-content: start;
}

@media (min-width: 1180px) {
  .ld-cote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-cote .ld-pleine { grid-column: 1 / -1; }
}

.ld-carte {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
}

.ld-carte-titre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
  margin-bottom: 0.9rem;
}

.ld-qr {
  width: min(190px, 60%);
  border: 1px solid rgba(47, 58, 44, 0.1);
  border-radius: 14px;
  padding: 6px;
}

.ld-qr svg { width: 100%; height: auto; border-radius: 8px; }

.ld-qr-actions {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ld-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.ld-stat {
  text-align: center;
  background: #fbf6ec;
  border: 1px solid rgba(47, 58, 44, 0.07);
  border-radius: 16px;
  padding: 0.9rem 0.4rem;
}

.ld-stat-val { display: block; font-size: 1.5rem; font-weight: 600; }
.ld-stat-nom { display: block; margin-top: 0.2rem; font-size: 0.72rem; font-weight: 700; color: rgba(47, 58, 44, 0.5); }

.ld-note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.5);
}

/* ------------------------- LE LIVRET D'OR, sur la fiche du livret
   (15/08 ; refait le 16/08 : la boîte de réception prend la place des
   mots dépliés, et s'ouvre en grand). Les deux chiffres restent — le
   nombre de mots et la date du dernier, c'est ce qu'on regarde en
   premier sur un cahier. */

.ld-or-stats { grid-template-columns: repeat(2, 1fr); }
.ld-or .ld-stat-val { font-size: 1.35rem; }

.ld-or-btn {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ld-or-btn svg { width: 1.05rem; height: 1.05rem; }
.ld-or-btn[disabled] { opacity: 0.5; cursor: default; }

/* la pastille des mots pas encore lus */
.ld-or-pastille {
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #FFB59E;
  color: #2f3a2c;
  font-size: 0.72rem;
  line-height: 1.25rem;
  text-align: center;
}

/* ---- la boîte ouverte en grand ---- */

.boite-pop { width: min(34rem, 100%); }

.boite-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.boite-sur {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.5);
}

.boite-titre {
  margin-top: 0.25rem;
  font-size: 1.35rem;
  font-weight: 500;
}

.boite-ferme {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(47, 58, 44, 0.18);
  background: #ffffff;
  font-size: 1.3rem;
  line-height: 1;
  color: #2f3a2c;
  cursor: pointer;
}
.boite-ferme:hover { border-color: rgba(122, 138, 94, 0.65); }

.boite-compte {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.5);
}

.boite-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  max-height: 46svh;
  overflow: auto;
}

/* chaque mot est une feuille : fond blanc, filet pêche à gauche —
   le détail de la quatrième couleur, jamais un aplat */
.boite-mot {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.07);
  border-left: 3px solid rgba(255, 181, 158, 0.45);
  border-radius: 14px;
  padding: 0.85rem 1rem;
}
/* pas encore lu : le filet s'allume franchement */
.boite-mot.neuf { border-left-color: #FFB59E; }

.bm-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.bm-nom {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.bm-date {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.45);
  white-space: nowrap;
}

.bm-texte {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.82);
}

.boite-note {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(47, 58, 44, 0.5);
}

.ld-jauges { display: grid; gap: 0.55rem; }

.mini-jauge {
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr auto;
  align-items: center;
  gap: 0.7rem;
}

.mj-nom { font-size: 0.82rem; font-weight: 700; color: rgba(47, 58, 44, 0.7); }

.mj-rail {
  height: 7px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.1);
  overflow: hidden;
}

.mj-rail i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB59E, #7a8a5e);
  transition: width 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mj-compte { font-size: 0.75rem; font-weight: 700; color: rgba(47, 58, 44, 0.45); }

.ld-ia-btn { margin-top: 1rem; }

/* ------------------------- le questionnaire : les SEPT jauges */

.ia-livrets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* alignés sur la carte du cadran, centrée */
  gap: 0.55rem;
  margin-bottom: 1.2rem;
}

.ia-ligne {
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(47, 58, 44, 0.7);
  margin-bottom: 1.4rem;
}

.jauges {
  display: grid;
  gap: 0.7rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 1.2rem 1.3rem;
  box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
  margin-bottom: 1.6rem;
}

.jauge {
  display: grid;
  grid-template-columns: minmax(130px, 210px) 1fr auto;
  align-items: center;
  gap: 0.9rem;
}

.jauge-nom { font-size: 0.92rem; font-weight: 700; }

.jauge-rail {
  height: 9px;
  border-radius: 999px;
  background: rgba(47, 58, 44, 0.1);
  overflow: hidden;
}

.jauge-rail i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB59E, #7a8a5e);
  transition: width 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.jauge-compte {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.5);
  min-width: 4.6rem;
  text-align: right;
}

/* ------------------------- les thèmes et leurs questions */

.qt-themes { display: grid; gap: 0.85rem; }

.qt-theme {
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  overflow: hidden;
}

.qt-tete {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font: inherit;
  color: #2f3a2c;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  text-align: left;
}

.qt-nom { font-weight: 700; font-size: 1.05rem; }

.qt-compte {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.5);
}

.qt-corps {
  border-top: 1px solid rgba(47, 58, 44, 0.08);
  padding: 1.1rem 1.3rem 1.3rem;
  display: grid;
  gap: 0.95rem;
}

@media (min-width: 1200px) {
  .qt-corps { grid-template-columns: 1fr 1fr; gap: 0.95rem 1.6rem; }
}

.qt-q { display: flex; flex-direction: column; gap: 0.35rem; }

.qt-lab {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(47, 58, 44, 0.8);
  line-height: 1.4;
}

.qt-imp {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f3a2c;
  background: rgba(255, 181, 158, 0.5);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 0.5rem;
  vertical-align: 0.1em;
}

.qt-in { font-size: 0.95rem; }

/* ------------------------- les informations libres */

.qt-libres { margin-top: 1.8rem; }

.libres-liste { margin-top: 0.9rem; display: grid; gap: 0.55rem; }

.libre {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 16px;
  padding: 0.7rem 1rem;
}

.libre-texte { font-size: 0.95rem; line-height: 1.5; }

.libre .lc-action { margin-left: auto; flex: none; }

.libre-ajout {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.6rem;
  max-width: 40rem;
}

.libre-ajout .champ-saisie { flex: 1; }

.ia-note { margin-top: 1.6rem; }

/* ------------------------- le cadran de l'IA (12/08, ses corrections) :
   UNE jauge en 8 étapes colorées — couleurs FLASHY dictées (du soleil au
   vert pétant), 8e étape « la supplémentaire » — cadran 21st (designali)
   + couleurs à seuils (HeroUI) + balayage animé (magicui), Booky */

.ia-jauge-carte {
  max-width: 40rem;
  margin: 0 auto; /* la carte se centre dans la vue (recadrage du 12/08) */
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 26px;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: 0 26px 55px -35px rgba(47, 58, 44, 0.45);
  text-align: center;
}

.cadran {
  position: relative;
  max-width: 24rem;
  margin: 0 auto;
}

.cadran svg { width: 100%; height: auto; display: block; }

/* les segments éteints attendent leur étape */
.cadran-seg { opacity: 0.18; transition: opacity 0.6s ease; }
.cadran-seg.allume { opacity: 1; }

.aiguille {
  transform-origin: 100px 104px;
  transform: rotate(var(--aig, -90deg));
  transition: transform 1.4s cubic-bezier(0.34, 1.2, 0.4, 1);
}

/* le bloc central vit en FLUX, juste sous le pivot : posé en absolu, le
   « 0 % » se retrouvait sous l'aiguille couchée à l'horizontale (son
   signalement du 12/08). Sous le pivot, l'aiguille ne passe jamais. */
.cadran-centre {
  margin-top: -0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.cadran-pct { font-size: 2rem; font-weight: 600; line-height: 1; }

.cadran-niveau {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2f3a2c;
  background: color-mix(in srgb, var(--c) 32%, #ffffff);
  border: 1px solid var(--c);
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: 0.35rem;
}

.cadran-etape {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.45);
}

/* les huit pas, sous le cadran (le centre étant en flux, plus besoin de
   la grande marge qui lui laissait la place) */
.cadran-pas {
  margin-top: 1.1rem;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.cadran-pas i {
  width: 20px;
  height: 7px;
  border-radius: 999px;
  background: var(--c);
  opacity: 0.2;
  transition: opacity 0.4s ease;
}

.cadran-pas i.allume { opacity: 1; }

.ia-jauge-ligne {
  margin-top: 1.1rem;
  font-size: 0.98rem;
  color: rgba(47, 58, 44, 0.65);
}

.ia-actions {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.ia-infos-compte {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2f3a2c;
  background: rgba(255, 181, 158, 0.55);
  border-radius: 999px;
  padding: 0 0.3rem;
  margin-left: 0.35rem;
}

/* le niveau compact, dans le tableau de bord du livret */
.ld-ia-niveau {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.98rem;
}

.ld-ia-point {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(47, 58, 44, 0.15);
}

.ld-ia-pas { justify-content: flex-start; margin-top: 0.8rem; }
.ld-ia-pas i { width: 18px; height: 6px; }

/* ------------------------- les pop-up de l'IA */

.ia-voile {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(47, 58, 44, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.iv-carte {
  position: relative;
  width: min(560px, 100%);
  max-height: min(84svh, 640px);
  overflow-y: auto;
  background: #fbf6ec;
  border-radius: 28px;
  padding: 2rem 2rem 1.7rem;
  /* l'ombre est VERTE, pas noire (sa règle du 13/08 au soir) */
  box-shadow: 0 50px 100px -40px rgba(47, 58, 44, 0.5);
  animation: iv-pose 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes iv-pose {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.iv-ferme {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(47, 58, 44, 0.6);
  background: rgba(47, 58, 44, 0.07);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
  .iv-ferme:hover { background: rgba(47, 58, 44, 0.14); color: #2f3a2c; }
}

.iv-theme {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a8a5e;
  padding-right: 2.6rem;
}

.iv-question {
  margin-top: 0.7rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.iv-saisie { width: 100%; margin-top: 1.2rem; font-size: 1rem; }

/* sur le fond crème de la pop-up, les champs s'écrivent sur du blanc —
   même logique que les cases des informations libres */
.iv-carte .champ-saisie { background: #ffffff; }

.iv-fin {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(47, 58, 44, 0.75);
}

.iv-pied {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.iv-compte {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.45);
}

.iv-boutons {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}

.iv-carte .libres-liste { margin-top: 1.2rem; }
.iv-carte .libre { background: #ffffff; }
.iv-carte .libre-ajout { max-width: none; }

/* ------------------------- Mon espace v3, mobile */

@media (max-width: 1023px) {
  /* la vitrine s'empile : le présentoir centré, la fiche dessous —
     les lignes iconées restent alignées entre elles */
  .vitrine {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    gap: 0.9rem;
    padding: 1.3rem 1.1rem 1.4rem;
  }
  .vl-scene { width: 196px; }
  .vl-corps { align-items: center; text-align: center; padding: 0; }
  .vl-fiche { width: fit-content; }
  .vl-ligne { text-align: left; }
  .ld-actions, .ld-confirme { margin-left: 0; width: 100%; }
  /* le mini shop : deux carrés par rangée, le prix reste en grand —
     colonnes FIXES ici aussi (13/08 soir) : l'aperçu remplit la tuile */
  .cata-grille { grid-template-columns: repeat(auto-fill, 158px); justify-content: center; gap: 0.9rem; }
  .cata-tuile { padding: 0.6rem 0.6rem 0.75rem; border-radius: 18px; }
  .mod-tuile, .cata-tuile { contain-intrinsic-size: auto 158px auto 340px; }
  .mt-cadre iframe { transform: scale(0.3701); } /* 138,8 / 375 : 158px moins 2 × 0.6rem */
  .ct-legende { font-size: 0.76rem; }
  .ct-prix { font-size: 1.15rem; }
  .ct-nom { font-size: 1.05rem; }
  .fm-tel { width: 200px; }
  .fm-tel iframe { transform: scale(0.4907); } /* 184 / 375 */
  .jauge { grid-template-columns: 1fr; gap: 0.3rem; }
  .jauge-compte { text-align: left; min-width: 0; }
  .mini-jauge { grid-template-columns: minmax(90px, 120px) 1fr auto; }
  .libre-ajout { flex-direction: column; }
}

/* le mot sur l'IA à venir */
.ia-teaser {
  margin-top: 1.2rem;
  max-width: 44rem;
  background: #ffffff;
  border: 1px solid rgba(47, 58, 44, 0.09);
  border-radius: 22px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 18px 40px -30px rgba(47, 58, 44, 0.35);
}

.ia-teaser-bientot {
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f3a2c;
  background: rgba(255, 181, 158, 0.5);
  border-radius: 999px;
  padding: 4px 12px;
}

.ia-teaser-texte {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(47, 58, 44, 0.75);
}

/* ==========================================================================
   Mon espace en WEB-APP (12/08, dicté) : plein écran, sans le chrome du
   site — app-shell repris des dashboards 21st (Efferd Dashboard 2, voir
   mcpuse.cc). Rail vert profond à gauche, barre de titre collante, contenu
   pleine largeur. Sur mobile le rail glisse avec SON burger — celui du
   site n'existe pas sur cette page.
   ========================================================================== */

.app {
  display: flex;
  min-height: 100svh;
}

/* ------------------------- le rail */

.app-rail {
  width: 16.5rem;
  flex: none;
  background: #2f3a2c;
  color: #f5ead8;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem 1.2rem;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
}

.app-logo { display: block; padding: 0 0.9rem; }
.app-logo img { height: 2.1rem; width: auto; }

.app-rail-titre {
  margin: 1.6rem 0.9rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 234, 216, 0.45);
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* les liens du rail : redessinés pour le fond profond */
.app-rail .er-lien {
  color: rgba(245, 234, 216, 0.72);
  white-space: normal;
}

@media (hover: hover) {
  .app-rail .er-lien:hover { background: rgba(245, 234, 216, 0.08); color: #f5ead8; }
}

.app-rail .er-lien.actif {
  background: #f5ead8;
  color: #2f3a2c;
}

.app-rail-bas {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 181, 158, 0.25);
}

.app-retour {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(245, 234, 216, 0.7);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.app-retour svg { width: 1rem; height: 1rem; }

@media (hover: hover) {
  .app-retour:hover { background: rgba(245, 234, 216, 0.08); color: #f5ead8; }
}

/* ------------------------- le corps */

.app-corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-tete {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(1.1rem, 3vw, 2.5rem);
  background: rgba(251, 246, 236, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(47, 58, 44, 0.08);
}

.app-titre {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.app-chip {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(47, 58, 44, 0.6);
  background: rgba(122, 138, 94, 0.14);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.app-chip::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFB59E;
  margin-right: 7px;
  vertical-align: 0.03em;
}

.app-main {
  flex: 1;
  padding: clamp(1.4rem, 3vw, 2.5rem) clamp(1.1rem, 3vw, 2.5rem) 3.5rem;
}

/* ------------------------- le burger du dashboard (mobile) */

.app-burger {
  /* en haut à DROITE (16/08 au soir, dicté) : la puce d'à côté disparaît
     sur mobile, c'est donc lui qui se pousse au bord */
  margin-left: auto;
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #2f3a2c;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.app-burger span {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 999px;
  background: #f5ead8;
}

.app-scrim {
  display: none;
}

@media (max-width: 1023px) {
  .app-burger { display: flex; }

  .app-rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    z-index: 70;
    width: min(19rem, 84vw);
    transform: translateX(-105%);
    transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
    box-shadow: 30px 0 60px -30px rgba(47, 58, 44, 0.5);
  }

  .app-rail.ouvert { transform: none; }

  .app-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(47, 58, 44, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .app-scrim.visible { opacity: 1; pointer-events: auto; }

  .app-titre { font-size: 1.12rem; }
  .app-chip { display: none; }
}

/* ------------------------- Essayer, mobile */

@media (max-width: 1023px) {
  /* (16/08 au soir, dicté : « les textes d'étape doivent apparaître sur
     téléphone ») — ils s'effaçaient hors étape courante ; ils restent,
     en petit, les quatre. */
  .fil-nom { font-size: 0.68rem; }
  .etape-para { font-size: 0.98rem; }
  /* les volets de l'étape 3 */
  .volet-tete { padding: 0.85rem 1rem; }
  .volet-corps { padding: 1rem 1rem 1.2rem; }
  .volet-nom { font-size: 0.98rem; }
  .choix-fonctions { grid-template-columns: 1fr; }
  .qr-scene { justify-content: center; }
  .qr-actions { align-items: center; }
  .parcours-nav { flex-wrap: wrap; }
  .lc-actions, .lc-confirme { margin-left: 0; width: 100%; }
  .choix-types, .choix-familles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .type-detail, .famille-detail { display: none; }
  .recap-val { font-size: 0.95rem; }
}

/* --------------------------------------------------- accessibilité */

@media (prefers-reduced-motion: reduce) {
  .rise, .phone, .phone-scene, .tache, .puce {
    animation: none !important;
  }
  .part { display: none; }
  .barre-haut, .logo-nav, .bande-nav {
    transition: none !important;
  }
  .scrim, .drawer, .drawer .lien, .menu-btn .trait, .pastille, .lien-nav {
    transition: none !important;
  }
  /* le récit s'affiche entier, sans rejeu */
  .ia-conv .msg, .etape.recit { opacity: 1; transform: none; transition: none; }
  .msg .points { display: none; }
  .msg .contenu { display: inline; animation: none; }
  .btn-glisse, .btn-rond { transition: none !important; }
  /* la feuille s'affiche ouverte, sans dépliage ni flottement */
  .feuille-scene { animation: none; }
  .feuille, .pli, .physique-texte { transition: none !important; }
  /* le QR s'affiche posé sans rayon, le mur de modèles ne défile pas
     (le vrai QR a remplacé la grille de modules le 16/08) */
  .scan-scene { animation: none; }
  .qr-vrai, .sec-apparait { transition: none !important; }
  .scan-rayon { animation: none !important; }
  .defile-rangee { animation: none !important; }
  /* les tirages de l'accueil et la galerie d'À propos, posés d'office ;
     l'indice de glissement s'immobilise au centre de son rail */
  .tirage { animation: none !important; transition: none !important; }
  .galerie-image, .galerie-image img { transition: none !important; }
  .glisse-indice span::before { animation: none !important; left: 23px; }

  /* À propos : tout s'affiche posé, sans rejeu ni défilement */
  .fil-trace { transition: none; }
  .moment, .moment-point { transition: none !important; }
  .qcarte-porte, .planche-scene { animation: none; }
  .qcarte { transition: none !important; }
  .teinte { transition: none !important; }
  .souligne path { animation: none; stroke-dashoffset: 0; }
  .btn-survol .bs-texte, .btn-survol .bs-calque, .btn-survol .bs-point {
    transition: none !important;
  }
  /* boutique : cartes et objets posés d'office, sans lévitation */
  .offre, .produit, .produit-scene > * { transition: none !important; }
  /* blog : cartes posées d'office, couverture et flèches sans transition */
  .carte-art { animation: none !important; }
  .ca-couv, .rail-fleche, .art-retour { transition: none !important; }
  /* contact et devis : champs et bande e-mail sans transition */
  .champ input, .champ textarea, .champ select { transition: none !important; }
  .mail-bande { transition: none !important; }
  /* le livret ne s'entrouvre pas tout seul ; le toucher l'ouvre sans transition */
  .mpli { animation: none !important; }
  .mini-livret, .mpli, .mcouv { transition: none !important; }
  /* la planche de l'atelier (16/08) : la gravure est posée d'office */
  .grave .p3-titre, .grave .p3-desc, .grave .p3-qr { opacity: 1; transition: none !important; }
  .tdb, .tdb-barre::after { transition: none !important; }
  .avis-rangee { animation: none !important; }
  /* la ronde du catalogue : posée immobile (le JS coupe la rotation) */
  .compteur { transition: none !important; }
  .curseur { display: none; }

  /* Essayer : le fil se pose sans couler, cartes et volets sans geste */
  .fil-outil-plein, .fil-point, .fil-nom { transition: none !important; }
  .livret-carte, .fond-puce,
  .volet-chevron, .fcarte, .fcarte .fc-etat,
  .medias-retire, .medias-ajout,
  .lc-action, .btn-retour { transition: none !important; }
  .champ-manque { animation: none !important; }
  .sauve-pulse { animation: none !important; }

  /* l'atelier : le livre s'ouvre et se retourne sans transition,
     la rotation au doigt reste (c'est un geste, pas une animation) */
  .livre, .feuillet, .carte3d { transition: none !important; }
  .creer-carte, .type-carte, .famille-carte, .qr-choix, .chip, .scene-zoom { transition: none !important; }

  /* Mon espace : rail et cartes posés sans geste ; le rail mobile
     apparaît sans glisser ; jauges et vitrines posées d'office */
  .er-lien, .stat-carte { transition: none !important; }
  .app-rail, .app-scrim, .app-retour { transition: none !important; }
  .vitrine, .vl-cadre, .vl-va, .ld-retour { transition: none !important; }
  .vl-scene { animation: none !important; }
  .cata-tuile { transition: none !important; }
  .rubrique, .rub-btn { transition: none !important; }
  .jauge-rail i, .mj-rail i { transition: none !important; }
  /* le cadran de l'IA se pose sur sa valeur, sans balayage */
  .aiguille, .cadran-seg, .cadran-pas i { transition: none !important; }
  .iv-carte { animation: none !important; }
}

/* ============================================================
   « À VOTRE GOÛT » — LES DEUX VOLETS DE LA CARTE (14/08)
   Dix-sept réglages : trois couleurs et deux polices sous les
   yeux, les sept zones repliées. Chaque ligne touchée montre sa
   remise à la valeur du modèle — le retrait se dit avec des mots.
   ============================================================ */
.gout-volet {
  margin-top: 1.1rem;
  border: 0.1rem solid rgba(47, 58, 44, 0.14);
  border-radius: 0.9rem;
  background: #fff;
  overflow: hidden;
}

.gout-volet > summary,
.gout-zones > summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
  list-style: none;
}

.gout-volet > summary::-webkit-details-marker,
.gout-zones > summary::-webkit-details-marker { display: none; }

.gout-volet > summary::after,
.gout-zones > summary::after {
  content: '';
  float: right;
  width: 0.5rem; height: 0.5rem;
  margin-top: 0.35rem;
  border-right: 0.12rem solid rgba(47, 58, 44, 0.5);
  border-bottom: 0.12rem solid rgba(47, 58, 44, 0.5);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.gout-volet[open] > summary::after,
.gout-zones[open] > summary::after { transform: rotate(-135deg); margin-top: 0.6rem; }

.gout-corps { padding: 0 1.1rem 1rem; }

.gout-zones {
  margin-top: 0.7rem;
  border-top: 0.1rem solid rgba(47, 58, 44, 0.12);
}
.gout-zones > summary {
  padding: 0.7rem 0 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(47, 58, 44, 0.62);
}
.gout-zones .gout-corps { padding: 0 0 0.2rem; }

.gr-ligne {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  flex-wrap: wrap;
}

.gr-nom { flex: 1; min-width: 8rem; font-size: 0.94rem; font-weight: 600; }

.gr-pastille {
  position: relative;
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: 0.6rem;
  background: var(--c, #f5ead8);
  border: 0.12rem solid rgba(47, 58, 44, 0.18);
  cursor: pointer;
  overflow: hidden;
}
.gr-pastille input { position: absolute; inset: -20%; width: 140%; height: 140%; border: 0; padding: 0; cursor: pointer; opacity: 0; }

.gr-choix {
  flex: none;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 0.1rem solid rgba(47, 58, 44, 0.18);
  border-radius: 0.55rem;
  background: #fbf6ec;
  color: #2f3a2c;
  max-width: 12rem;
}

.gr-remet {
  flex: 1 1 100%;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #7a8a5e;
  background: none;
  border: 0;
  padding: 0.1rem 0 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.gr-remet:hover { color: #2f3a2c; }

/* l'avertissement de contraste : on signale, on ne corrige pas */
.gout-alerte {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(255, 181, 158, 0.28);
  border: 0.12rem solid rgba(255, 181, 158, 0.85);
}
.ga-titre { font-weight: 800; font-size: 0.92rem; margin: 0 0 0.35rem; }
.ga-liste { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.5; }
.ga-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: rgba(47, 58, 44, 0.65); }

/* ============================================================
   LE LIVRET D'OR — la saisie des règles (14/08, dictée)
   « L'entrée des règles doit être du style ajoutez une règle. »
   Une ligne par règle : son rang à gauche, le texte au milieu,
   les trois gestes à droite. Le rang est AFFICHÉ, jamais tapé —
   on déplace une règle sans rien renuméroter.
   ============================================================ */
.regles-edit { display: grid; gap: 0.55rem; margin-top: 0.55rem; }
/* vide, la boîte ne creuse pas un trou sous le titre (15/08, son défaut :
   « le bouton est trop bas de son texte du haut, réhausse-le ») — le
   bouton « Ajouter… » vient alors se poser juste dessous */
.regles-edit:empty { margin-top: 0; }
.regles-edit:empty + .lc-action { margin-top: 0.65rem; }

.regle-ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.regle-rang {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: #f5ead8;
  color: #2f3a2c;
  display: flex; align-items: center; justify-content: center;
  font-family: Fraunces, Georgia, serif;
  font-size: 0.9rem; font-weight: 600;
}

.regle-champ { flex: 1; min-width: 0; }

.regle-outils { flex: none; display: flex; gap: 0.2rem; }

.regle-btn {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0.55rem;
  background: transparent;
  color: rgba(47, 58, 44, 0.55);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.regle-btn svg { width: 1rem; height: 1rem; }
.regle-btn:hover:not(:disabled) { background: #f5ead8; color: #2f3a2c; }
.regle-btn:disabled { opacity: 0.28; cursor: default; }
.regle-ote:hover { background: rgba(255, 181, 158, 0.45); }

@media (max-width: 640px) {
  .regle-ligne { flex-wrap: wrap; }
  .regle-champ { flex: 1 1 100%; order: 3; }
  .regle-outils { margin-left: auto; }
}

/* ============================================================
   LE SECOURS SANS JAVASCRIPT
   Les liens du <noscript> de chaque page. Ils n'apparaissent que
   si le JavaScript est coupé — la barre du haut n'existe pas dans
   ce cas-là. Habillés quand même : quelqu'un peut tomber dessus.
   ============================================================ */
.nav-secours {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  justify-content: center; align-items: center;
  padding: 1.1rem 1.25rem;
  background: var(--creme, #f5ead8);
  border-bottom: 0.12rem solid rgba(47, 58, 44, .12);
  font-size: .98rem; font-weight: 600;
}
.nav-secours a { color: #2f3a2c; text-decoration: none; }
.nav-secours a:hover { text-decoration: underline; }

/* ============================================================
   LA FÊTE D'APRÈS-ACHAT (16/08, dicté) — fete.js. Les confettis
   vivent DERRIÈRE la carte : le voile (z 0), la pluie (z 1), la
   carte (z 2). Trois calques par morceau : le père dérive à
   l'horizontale (linéaire), le fils monte puis retombe (deux
   courbes sur la même trajectoire), le petit-fils culbute et
   s'éteint. La médaille FRAPPE comme le tampon du livret d'or.
   ============================================================ */
.fete-voile {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 1.2rem;
  background: rgba(47, 58, 44, 0.5);
  animation: fete-voile 0.3s ease-out both;
}
@keyframes fete-voile { from { opacity: 0; } }

.fete-carte {
  position: relative; z-index: 2;
  width: min(27rem, 100%);
  max-height: 88svh; overflow: auto;
  background: #fbf6ec; border-radius: 26px;
  padding: 2.4rem 1.9rem 1.6rem;
  display: grid; justify-items: center; gap: 0.9rem;
  text-align: center;
  box-shadow: 0 34px 70px -30px rgba(24, 30, 22, 0.6);
  animation: fete-pose 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
@keyframes fete-pose {
  from { opacity: 0; transform: translateY(1.4rem) scale(0.94); }
}

.fete-medaille {
  width: 4.6rem; height: 4.6rem;
  display: grid; place-items: center;
  background: #7a8a5e; color: #f5ead8;
  border-radius: 999px;
  /* la 4e couleur, en détail : l'anneau de la médaille */
  box-shadow: 0 0 0 5px #fbf6ec, 0 0 0 7.5px rgba(255, 181, 158, 0.85);
  animation: fete-frappe 0.55s cubic-bezier(0.22, 1.1, 0.32, 1) 0.18s both;
}
.fete-medaille svg { width: 2.1rem; height: 2.1rem; }
@keyframes fete-frappe {
  from { opacity: 0; transform: scale(2.2) rotate(-12deg); }
  62%  { opacity: 1; transform: scale(0.94) rotate(2deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.fete-titre {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: clamp(1.5rem, 4.6vw, 1.85rem);
  line-height: 1.15; color: #2f3a2c;
  margin-top: 0.35rem;
}
.fete-texte {
  font-size: 0.98rem; line-height: 1.6;
  color: rgba(47, 58, 44, 0.82);
  max-width: 21.5rem;
}
.fete-cta { margin-top: 0.5rem; }
.fete-note {
  margin-top: 0.55rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(47, 58, 44, 0.55);
}
.fete-ferme {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  color: rgba(47, 58, 44, 0.55); border-radius: 999px;
}
.fete-ferme svg { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) {
  .fete-ferme:hover { background: rgba(47, 58, 44, 0.08); color: #2f3a2c; }
}

/* ---- la pluie ---- */
.fete-pluie {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.fete-pluie .cf {
  position: absolute; left: 50%; top: 62%;
  animation: fete-cf-x var(--dur) linear var(--del) both;
}
.fete-pluie .cf i {
  display: block;
  animation: fete-cf-y var(--dur) linear var(--del) both;
}
.fete-pluie .cf b {
  display: block; border-radius: 2px;
  animation: fete-cf-r var(--dur) linear var(--del) both;
}
@keyframes fete-cf-x { to { transform: translateX(var(--dx)); } }
@keyframes fete-cf-y {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.18, 0.85, 0.4, 1); }
  44%  { transform: translateY(var(--hy)); animation-timing-function: cubic-bezier(0.55, 0.06, 0.85, 0.5); }
  100% { transform: translateY(var(--cy)); }
}
@keyframes fete-cf-r {
  0%   { opacity: 1; transform: rotateZ(0) rotateX(0); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: rotateZ(var(--rot)) rotateX(880deg); }
}

/* le bouton Commander allumé du récapitulatif garde la rangée bride */
.recap-commande { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .fete-pluie { display: none; }
  .fete-voile, .fete-carte, .fete-medaille { animation: none; }
}

/* ============================================================
   DEUX MENTIONS DICTÉES (16/08).
   (1) « Mon espace est débloqué » — la ligne que tout le monde
   lit, sous l'enseigne de la boutique.
   (2) Son chiffre des 80 % — deux endroits, pas plus : la
   section IA de l'accueil et celle d'À propos. La pêche par le
   détail : le filet à gauche, rien de plus.
   ============================================================ */
.shop-debloque {
  margin: 1.6rem auto 0;
  width: fit-content; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35rem 0.55rem;
  font-size: 0.95rem; font-weight: 600; line-height: 1.45;
  color: #2f3a2c;
  background: rgba(122, 138, 94, 0.13);
  border: 1px solid rgba(122, 138, 94, 0.4);
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  text-align: center;
}
.shop-debloque svg { width: 1.05rem; height: 1.05rem; flex: none; color: #c07a56; }
.shop-debloque a {
  color: #4a5a38; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .shop-debloque { border-radius: 18px; }
}

.ia-preuve, .savoir-preuve {
  font-size: 0.98rem; line-height: 1.5;
  padding-left: 0.95rem; border-left: 3px solid #FFB59E;
  color: rgba(47, 58, 44, 0.85);
  max-width: 30rem;
}
.ia-preuve strong, .savoir-preuve strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 1.4em; line-height: 1;
  color: #2f3a2c;
}
.ia-preuve { margin-top: 1.5rem; }
.savoir-preuve { margin-top: 1.15rem; }

/* ------------------------------------------------------------------
   LES COMPTES (17/08, dicté) — la carte de connexion.html et l'indice
   de sécurité. Les champs reprennent .champ / .champ-saisie du contact.
   L'indice : quatre segments, du rouge au vert — data-niveau 0 à 3,
   la même règle que le serveur (auth.js et la fonction `compte`).
   ------------------------------------------------------------------ */
.cpt-carte {
  background: #fff;
  border: 1px solid rgba(47, 58, 44, 0.10);
  border-radius: 26px;
  box-shadow: 0 18px 44px -18px rgba(47, 58, 44, 0.18);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.cpt-onglets {
  display: flex;
  gap: 0.4rem;
  background: #fbf6ec;
  border-radius: 999px;
  padding: 0.3rem;
  margin-bottom: 1.1rem;
}
.cpt-onglet {
  flex: 1;
  padding: 0.6rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(47, 58, 44, 0.62);
  transition: background 0.3s, color 0.3s;
}
.cpt-onglet.actif { background: #2f3a2c; color: #f5ead8; }
.cpt-forme .champ { margin-bottom: 0.9rem; }
.cpt-bouton {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: #2f3a2c;
  color: #f5ead8;
  font-weight: 600;
  transition: background 0.3s, opacity 0.3s;
}
.cpt-bouton:hover:not(:disabled) { background: #7a8a5e; }
.cpt-bouton:disabled { opacity: 0.45; cursor: not-allowed; }
.cpt-petit { font-size: 0.85rem; color: rgba(47, 58, 44, 0.62); margin-top: 0.7rem; }
.cpt-petit a { text-decoration: underline; text-underline-offset: 3px; }
.cpt-petit.erreur:empty { display: none; }
.cpt-petit.erreur { color: #a04c3c; margin-top: -0.2rem; }
.cpt-message { display: none; border-radius: 14px; padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: 0.92rem; }
.cpt-message.erreur { display: block; background: rgba(160, 76, 60, 0.10); color: #a04c3c; }
.cpt-message.ok { display: block; background: rgba(122, 138, 94, 0.14); color: #2f3a2c; }
.cpt-cache { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.champ-saisie.code { letter-spacing: 0.55em; font-size: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }

/* l'indice : la donnée mise en scène a droit à des couleurs franches
   (la règle des jauges) — quatre pas, remplis selon le niveau */
.ind { display: flex; gap: 0.35rem; margin: 0.15rem 0 0.3rem; }
.ind i { height: 0.42rem; flex: 1; border-radius: 999px; background: rgba(47, 58, 44, 0.10); transition: background 0.35s; }
.ind[data-niveau="0"] i:nth-child(1) { background: #c0392b; }
.ind[data-niveau="1"] i:nth-child(-n+2) { background: #e67e22; }
.ind[data-niveau="2"] i:nth-child(-n+3) { background: #d4a017; }
.ind[data-niveau="3"] i { background: #0E9F4E; }

/* la vue Mon compte de l'espace : des cartes sobres, un geste chacune */
.vc-grille { display: grid; gap: 1.1rem; max-width: 40rem; }
.vc-carte {
  background: #fff;
  border: 1px solid rgba(47, 58, 44, 0.10);
  border-radius: 22px;
  padding: 1.3rem 1.4rem;
}
.vc-carte h3 { font-weight: 700; margin-bottom: 0.35rem; }
.vc-carte .champ { margin: 0.7rem 0; }
.vc-adresse { font-size: 1.05rem; font-weight: 600; word-break: break-all; }
.vc-note { font-size: 0.87rem; color: rgba(47, 58, 44, 0.62); }
.vc-bouton {
  margin-top: 0.5rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  background: #2f3a2c;
  color: #f5ead8;
  font-weight: 600;
  transition: background 0.3s, opacity 0.3s;
}
.vc-bouton:hover:not(:disabled) { background: #7a8a5e; }
.vc-bouton:disabled { opacity: 0.45; cursor: not-allowed; }
.vc-bouton.doux { background: #fbf6ec; color: #2f3a2c; border: 1px solid rgba(47, 58, 44, 0.18); }
.vc-bouton.doux:hover { background: #f5ead8; }
/* la suppression se dit avec des mots, jamais en rouge criard — mais
   elle se distingue : bord chaud, et la confirmation EN PLACE */
.vc-carte.danger { border-color: rgba(160, 76, 60, 0.30); }
.vc-bouton.danger { background: #fff; color: #a04c3c; border: 1px solid rgba(160, 76, 60, 0.45); }
.vc-bouton.danger:hover { background: rgba(160, 76, 60, 0.08); }