/* ==========================================================================
   ZOOMIZ — feuille de style
   Système : couleurs, typo, espacements (échelle Tailwind), rayons, ombres
   et mouvements sont définis une seule fois dans :root.
   ========================================================================== */

@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Couleurs de la marque */
  --sapin: #1F4D3A;
  --sapin-fonce: #173B2C;
  --dragee: #F6B6D1;
  --dragee-fonce: #E98AB2;
  --rose-pale: #FCE3EE;
  --menthe: #D7EADF;
  --creme: #FFFBF3;
  --sable: #F2EADD;
  --beurre: #FFD66B;
  --encre: #1E1A17;
  --gris: #4A433C;
  --blanc: #FFFFFF;
  --erreur: #B3261E;

  /* Typographie */
  --f-affiche: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-texte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-main: "Caveat", "Bradley Hand", cursive;

  /* Espacements (échelle Tailwind : 1 = 4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px;
  --section: clamp(var(--s20), 10vw, var(--s32));
  --largeur: 1200px;

  /* Formes */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-plein: 999px;
  --ombre-douce: 0 1px 2px rgba(31, 77, 58, .06), 0 10px 30px -10px rgba(31, 77, 58, .18);
  --ombre-haute: 0 2px 4px rgba(31, 77, 58, .06), 0 24px 48px -16px rgba(31, 77, 58, .28);

  /* Mouvement */
  --t-rapide: 120ms; --t-normal: 200ms; --t-lent: 320ms;
  --e-standard: cubic-bezier(.2, 0, 0, 1);
  --e-entree: cubic-bezier(0, 0, .2, 1);
  --e-ressort: cubic-bezier(.34, 1.4, .5, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; interpolate-size: allow-keywords; }
body {
  margin: 0; padding: var(--s3);
  background: var(--creme); color: var(--encre);
  font-family: var(--f-texte); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--dragee); color: var(--encre); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 6px; }
.sur-sapin :focus-visible { outline-color: var(--dragee); }

.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 100;
  transform: translateY(-200%); transition: transform var(--t-normal) var(--e-standard);
  background: var(--encre); color: var(--creme); padding: var(--s3) var(--s5);
  border-radius: var(--r-plein); font-weight: 600; text-decoration: none;
}
.evitement:focus { transform: none; }

.conteneur { max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(var(--s1), 2vw, var(--s6)); }
.section { padding-top: var(--section); }

/* ---------- Typographie ---------- */
.affiche {
  font-family: var(--f-affiche); font-weight: 400; text-transform: uppercase;
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1; letter-spacing: .005em;
  color: var(--sapin);
}
.affiche--geante { font-size: clamp(54px, 7vw, 104px); color: var(--creme); }
/* Surlignage dessiné à la hauteur des lettres, pour ne pas mordre sur la ligne voisine */
.surligne {
  --fond: var(--dragee);
  background: linear-gradient(var(--fond), var(--fond)) 0 52% / 100% .98em no-repeat;
  color: var(--encre); padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.surligne--creme { --fond: var(--creme); }
.titre { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.01em; color: var(--sapin); }
.intro { font-size: 19px; line-height: 1.6; max-width: 34em; color: var(--gris); }
.sur-sapin .intro { color: var(--menthe); }
.surtitre { font-weight: 600; font-size: 17px; color: var(--sapin); margin-bottom: var(--s4); }
.centre { text-align: center; margin-inline: auto; }

/* ---------- Boutons ---------- */
.bouton {
  --b-fond: var(--dragee); --b-texte: var(--encre); --b-survol: #F3A3C4;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s6);
  border: 0; border-radius: var(--r-plein);
  background: var(--b-fond); color: var(--b-texte);
  font: inherit; font-weight: 600; font-size: 17px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-rapide) var(--e-standard), transform var(--t-rapide) var(--e-standard), box-shadow var(--t-normal) var(--e-standard);
}
.bouton:hover { background: var(--b-survol); transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(30, 26, 23, .35); }
.bouton:active { transform: translateY(0) scale(.98); box-shadow: none; }
.bouton--sapin { --b-fond: var(--sapin); --b-texte: var(--creme); --b-survol: var(--sapin-fonce); }
.bouton--creme { --b-fond: var(--creme); --b-survol: var(--blanc); }
.bouton--fantome { --b-fond: transparent; --b-survol: rgba(30, 26, 23, .06); }
.sur-sapin .bouton--fantome { --b-texte: var(--creme); --b-survol: rgba(255, 251, 243, .12); }
.bouton--petit { min-height: 44px; padding: 0 var(--s5); font-size: 16px; }
.bouton[aria-disabled="true"], .bouton:disabled {
  --b-fond: var(--sable); --b-texte: var(--gris); --b-survol: var(--sable);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.bouton__fleche { transition: transform var(--t-normal) var(--e-standard); }
.bouton:hover .bouton__fleche { transform: translateX(3px); }
/* Indicateur d'envoi dans un bouton */
.bouton[data-etat="envoi"] { color: transparent; pointer-events: none; }
.bouton[data-etat="envoi"]::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--b-texte); border-right-color: transparent;
  animation: tourner .7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

/* ---------- Navigation ---------- */
.nav { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s4); }
.nav__liens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.nav__liens--droite { justify-content: flex-end; }
.nav__lien {
  padding: var(--s2) var(--s3); border-radius: var(--r-plein);
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background-color var(--t-rapide) var(--e-standard);
}
.nav__lien:hover { background: rgba(255, 251, 243, .12); }
.nav__lien[aria-current="page"] { background: rgba(255, 251, 243, .16); }
.logo { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; justify-self: center; }
.logo__mot { font-family: var(--f-affiche); font-size: 38px; line-height: 1; letter-spacing: .03em; }
.logo svg { transition: transform var(--t-lent) var(--e-ressort); }
.logo:hover svg { transform: rotate(-14deg) scale(1.08); }
.logo svg { color: var(--dragee); }
.nav > .logo { grid-column: 2; grid-row: 1; }
.nav .nav__liens { grid-row: 1; grid-column: 1; }
.nav .nav__liens--droite { grid-column: 3; }
.menu-bouton { display: none; }
.menu-panneau { display: contents; }

/* Barre flottante qui apparaît quand on quitte le haut de page */
.barre {
  position: fixed; z-index: 50; top: var(--s3); left: 50%;
  width: min(calc(100% - var(--s6)), var(--largeur));
  transform: translate(-50%, calc(-100% - var(--s6)));
  transition: transform var(--t-lent) var(--e-standard);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) var(--s2) var(--s2) var(--s6);
  background: var(--sapin); color: var(--creme);
  border-radius: var(--r-plein); box-shadow: var(--ombre-haute);
}
.barre.est-visible { transform: translate(-50%, 0); }
.barre .logo__mot { font-size: 28px; }
.barre .logo { justify-self: auto; }
.barre__liens { display: flex; align-items: center; gap: var(--s1); }

/* ---------- Héros ---------- */
.heros {
  position: relative; overflow: hidden;
  background: var(--sapin); color: var(--creme);
  border-radius: var(--r-xl);
  padding: var(--s5) clamp(var(--s5), 4vw, var(--s12)) 0;
}
.heros--compact { padding-bottom: var(--s5); border-radius: var(--r-lg); }
.heros__grille {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center; gap: var(--s8);
  max-width: var(--largeur); margin: var(--s16) auto 0;
}
.heros__texte { padding-bottom: var(--s16); }
.pastille-edition {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s6); padding: var(--s2) var(--s4) var(--s2) var(--s2);
  background: rgba(255, 251, 243, .1); border: 1px solid rgba(255, 251, 243, .25);
  border-radius: var(--r-plein); font-weight: 600; font-size: 15px;
}
.pastille-edition span { background: var(--dragee); color: var(--encre); border-radius: var(--r-plein); padding: 2px var(--s3); font-size: 14px; }
.heros__texte .intro { margin-top: var(--s6); }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s8); }
.atouts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s8); font-size: 15px; color: var(--menthe); }
.atouts li { display: flex; align-items: center; gap: var(--s2); }
.atouts svg { width: 18px; flex: none; }
.heros__scene { position: relative; align-self: end; }
.heros__scene::before {
  content: ""; position: absolute; inset: 6% 4% 10% 6%;
  background: #2A5F48; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
}
.heros__scene svg { position: relative; width: 100%; max-width: 560px; margin-left: auto; margin-bottom: -6px; }

/* Animations de la scène — un seul moment d'arrivée, puis des détails discrets */
.mimi-sort { animation: sortir .9s var(--e-ressort) .35s both; }
.mimi-pattes { animation: poser .35s var(--e-entree) 1.05s both; }
.mimi-yeux { transform-box: fill-box; transform-origin: center; animation: cligner 5.5s 2.4s infinite; }
.mimi-regard { transition: transform var(--t-normal) var(--e-standard); }
.plume-balance { transform-box: view-box; transform-origin: 505px 26px; animation: balancer 3.2s ease-in-out infinite alternate; }
@keyframes sortir { from { transform: translateY(110px); } to { transform: translateY(0); } }
@keyframes poser { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cligner { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes balancer { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }

/* ---------- Étapes (frise) ---------- */
.deux-colonnes { display: grid; gap: var(--s12); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.entete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s6); margin-bottom: var(--s12); }
.entete-section .intro { max-width: 26em; }
.etapes { list-style: none; position: relative; display: grid; gap: var(--s6); grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: etape; }
.etapes::before {
  content: ""; position: absolute; top: 88px; left: 12%; right: 12%;
  border-top: 3px dashed rgba(31, 77, 58, .25);
}
.etape { position: relative; text-align: center; }
.etape img { width: 176px; margin: 0 auto var(--s4); position: relative; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; z-index: 1; top: 0; left: calc(50% + 48px);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sapin); color: var(--creme); font-weight: 700; font-size: 17px;
  box-shadow: 0 0 0 5px var(--creme);
}
.etape h3 { font-size: 22px; line-height: 1.25; color: var(--sapin); margin-bottom: var(--s2); }
.etape p { font-size: 16px; color: var(--gris); max-width: 22em; margin-inline: auto; }

/* ---------- Promesses (cartes inclinées) ---------- */
.promesses { display: grid; gap: var(--s8); align-items: start; margin-top: var(--s12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.promesse {
  background: var(--blanc); border-radius: 36px; box-shadow: var(--ombre-douce);
  padding: var(--s10) var(--s8); transform: rotate(-1.5deg);
  transition: transform var(--t-lent) var(--e-ressort), box-shadow var(--t-lent) var(--e-standard);
}
.promesse:nth-child(2) { transform: rotate(1.5deg); margin-top: var(--s8); }
.promesse:nth-child(3) { transform: rotate(-1deg); }
.promesse:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--ombre-haute); }
.promesse img { width: 128px; margin-bottom: var(--s5); }
.promesse h3 { font-size: 28px; line-height: 1.15; color: var(--sapin); margin-bottom: var(--s3); }
.promesse p { font-size: 17px; color: var(--gris); }

/* ---------- La box ---------- */
.box { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; margin-top: var(--s12); }
.box__visuel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6);
  background: var(--rose-pale); border-radius: 36px; padding: var(--s8);
}
.box__visuel img { width: 100%; max-width: 440px; margin: auto; }
.prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); background: var(--sapin); color: var(--creme); border-radius: var(--r-lg); padding: var(--s5) var(--s5) var(--s5) var(--s6); }
.prix__montant { font-family: var(--f-affiche); font-size: 52px; line-height: 1; }
.prix__detail { font-size: 15px; color: var(--menthe); margin-top: var(--s1); }
.objets { list-style: none; display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.objet {
  display: flex; gap: var(--s4); align-items: center;
  background: var(--blanc); border-radius: var(--r-md); padding: var(--s4);
  box-shadow: 0 1px 2px rgba(31, 77, 58, .05);
}
.objet img { width: 72px; flex: none; }
.objet h3 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.objet p { font-size: 15px; line-height: 1.45; color: var(--gris); margin-top: 2px; }
.objets--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .objets--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Le conseil de Mimi ---------- */
.mimi {
  max-width: var(--largeur); margin: var(--section) auto 0;
  background: var(--dragee); border-radius: var(--r-xl);
  padding: clamp(var(--s8), 6vw, var(--s20));
  display: grid; gap: var(--s12); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.mimi .affiche { color: var(--encre); }
.mimi .intro { color: var(--encre); margin-top: var(--s6); }
.mimi__signature { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
.mimi__signature img { width: 56px; }
.fiche {
  position: relative; justify-self: center; width: min(100%, 420px);
  background: var(--creme); border-radius: var(--r-sm);
  padding: var(--s10) var(--s8) var(--s8);
  box-shadow: var(--ombre-haute); transform: rotate(2.5deg);
  background-image: repeating-linear-gradient(transparent 0 35px, rgba(31, 77, 58, .12) 35px 36px);
  background-position: 0 92px;
}
.fiche::before { /* ruban adhésif */
  content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(215, 234, 223, .85); border-radius: 3px;
}
.fiche__titre { font-family: var(--f-affiche); text-transform: uppercase; font-size: 26px; line-height: 1.1; color: var(--sapin); }
.fiche__texte { font-family: var(--f-main); font-size: 27px; line-height: 36px; margin-top: var(--s6); color: var(--encre); }
.fiche__tampon {
  position: absolute; right: -14px; bottom: -18px; width: 88px; height: 88px;
  display: grid; place-items: center; text-align: center;
  border-radius: 50%; background: var(--sapin); color: var(--creme);
  font-family: var(--f-affiche); font-size: 22px; line-height: .95; transform: rotate(-12deg);
  box-shadow: 0 0 0 4px var(--creme), 0 0 0 6px var(--sapin);
}

/* ---------- Et toi ? ---------- */
.choix { display: grid; gap: var(--s6); margin-top: var(--s12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.choix__carte {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: 36px; padding: var(--s12) var(--s8);
  transition: transform var(--t-lent) var(--e-ressort);
}
.choix__carte:hover { transform: translateY(-4px); }
.choix__carte--menthe { background: var(--menthe); }
.choix__carte--rose { background: var(--rose-pale); }
.choix__carte img { height: 210px; width: auto; }
.choix__pour { font-weight: 600; font-size: 18px; color: var(--sapin); margin: var(--s6) 0 var(--s2); }
.choix__carte .affiche { font-size: clamp(38px, 4vw, 56px); margin-bottom: var(--s3); }
.choix__carte p:not(.choix__pour) { font-size: 17px; color: var(--gris); margin-bottom: var(--s6); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: var(--s3); }
.faq details { background: var(--blanc); border-radius: var(--r-md); box-shadow: 0 1px 2px rgba(31, 77, 58, .05); transition: box-shadow var(--t-normal) var(--e-standard); }
.faq details:hover, .faq details[open] { box-shadow: var(--ombre-douce); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 64px; padding: var(--s4) var(--s5) var(--s4) var(--s6);
  cursor: pointer; list-style: none; font-weight: 600; font-size: 19px; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--rose-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231E1A17' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--t-normal) var(--e-standard), background-color var(--t-normal);
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--dragee); }
.faq details p { padding: 0 var(--s6) var(--s5); font-size: 17px; color: var(--gris); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-lent) var(--e-standard), content-visibility var(--t-lent) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Liste d'attente ---------- */
.inscription {
  position: relative; max-width: var(--largeur); margin: calc(var(--section) + var(--s16)) auto 0;
  background: var(--sapin); color: var(--creme);
  border-radius: var(--r-xl); padding: clamp(var(--s16), 7vw, var(--s24)) clamp(var(--s5), 4vw, var(--s12));
  text-align: center;
}
.inscription__coucou { position: absolute; top: 0; left: 50%; width: 200px; transform: translate(-50%, -84%); pointer-events: none; }
.inscription .intro { margin: var(--s6) auto 0; }
.formulaire {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1);
  max-width: 560px; margin: var(--s8) auto 0; padding: 6px;
  background: var(--creme); border-radius: 34px;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow var(--t-normal) var(--e-standard);
}
.formulaire:focus-within { box-shadow: 0 0 0 4px rgba(246, 182, 209, .55); }
.formulaire[data-etat="erreur"] { box-shadow: 0 0 0 3px var(--erreur); animation: secouer .4s var(--e-standard); }
.formulaire input {
  flex: 1 1 220px; min-width: 0; min-height: 52px; border: 0; border-radius: var(--r-plein);
  background: transparent; padding: 0 var(--s5); font: inherit; font-size: 17px; color: var(--encre);
}
.formulaire input:focus { outline: none; }
.formulaire input::placeholder { color: #7A6F65; }
.formulaire--clair { background: var(--blanc); margin-inline: 0; box-shadow: 0 0 0 1px var(--sable); }
.formulaire--clair:focus-within { box-shadow: 0 0 0 3px var(--dragee); }
@keyframes secouer { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.form-aide { margin-top: var(--s3); font-size: 14px; color: var(--menthe); }
.form-aide a { color: inherit; }
.form-message { margin-top: var(--s3); font-weight: 600; font-size: 15px; }
.form-message:empty { display: none; }
.sur-sapin .form-message[data-type="erreur"] { color: #FFC2BD; }
.form-message[data-type="erreur"] { color: var(--erreur); }
.form-succes {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  max-width: 520px; margin: var(--s8) auto 0; padding: var(--s6) var(--s8);
  background: var(--creme); color: var(--encre); border-radius: var(--r-lg);
  animation: apparaitre var(--t-lent) var(--e-ressort) both;
}
.form-succes[hidden] { display: none; }
.form-succes img { width: 120px; }
.form-succes strong { font-family: var(--f-affiche); font-weight: 400; font-size: 30px; text-transform: uppercase; color: var(--sapin); }
.form-succes p { font-size: 16px; color: var(--gris); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Page Édition ---------- */
.fil { font-size: 15px; color: var(--gris); margin: var(--s8) 0 var(--s6); }
.fil a { text-decoration-color: rgba(30, 26, 23, .3); text-underline-offset: 3px; }
.produit { display: grid; gap: var(--s12); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.produit__visuel { position: sticky; top: 96px; aspect-ratio: 1; background: var(--rose-pale); border-radius: 36px; display: grid; place-items: center; padding: var(--s8); }
.produit__visuel img { width: 92%; }
.produit__pastille { position: absolute; top: var(--s5); left: var(--s5); background: var(--sapin); color: var(--creme); font-weight: 600; font-size: 14px; padding: var(--s2) var(--s4); border-radius: var(--r-plein); }
.etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.etiquettes li { background: var(--menthe); color: var(--sapin); font-weight: 600; font-size: 14px; padding: 6px var(--s3); border-radius: var(--r-plein); }
.produit .intro { margin-top: var(--s5); }
.annonce { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s6); padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--menthe); color: var(--sapin); font-weight: 600; font-size: 16px; }
.annonce svg { width: 22px; flex: none; margin-top: 2px; }

.formules { border: 0; padding: 0; margin: var(--s6) 0 0; }
.formules legend { font-weight: 600; font-size: 17px; margin-bottom: var(--s3); padding: 0; }
.formules__liste { display: grid; gap: var(--s3); }
.formule { position: relative; display: block; cursor: pointer; }
.formule input { position: absolute; opacity: 0; pointer-events: none; }
.formule__carte {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  background: var(--blanc); border: 2px solid var(--sable); border-radius: var(--r-md);
  transition: border-color var(--t-rapide) var(--e-standard), background-color var(--t-rapide) var(--e-standard), transform var(--t-rapide) var(--e-standard);
}
.formule:hover .formule__carte { border-color: #D9CBB4; }
.formule input:checked + .formule__carte { border-color: var(--sapin); background: #F3F9F5; }
.formule input:focus-visible + .formule__carte { outline: 3px solid var(--encre); outline-offset: 3px; }
.formule:active .formule__carte { transform: scale(.99); }
.formule__carte img { width: 56px; }
.formule__nom { display: block; font-weight: 600; font-size: 18px; line-height: 1.3; }
.formule__detail { display: block; font-size: 15px; color: var(--gris); line-height: 1.4; }
.formule__prix { display: flex; align-items: center; gap: var(--s3); font-weight: 700; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.formule__coche { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #CDBFA8; display: grid; place-items: center; transition: background-color var(--t-rapide), border-color var(--t-rapide); }
.formule__coche svg { width: 14px; opacity: 0; transform: scale(.5); transition: opacity var(--t-rapide), transform var(--t-normal) var(--e-ressort); }
.formule input:checked + .formule__carte .formule__coche { background: var(--sapin); border-color: var(--sapin); }
.formule input:checked + .formule__carte .formule__coche svg { opacity: 1; transform: none; }
.action-produit { margin-top: var(--s5); }
.action-produit .bouton { width: 100%; min-height: 60px; font-size: 18px; }
.action-produit__note { margin-top: var(--s3); font-size: 14px; color: var(--gris); text-align: center; }

.infos { display: grid; gap: var(--s3); margin-top: var(--s8); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.infos div { background: var(--blanc); border-radius: var(--r-md); padding: var(--s4); }
.infos dt { font-size: 14px; color: var(--gris); }
.infos dd { font-weight: 600; font-size: 16px; line-height: 1.35; margin-top: var(--s1); }

.saisons { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s10); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saison { border-radius: var(--r-lg); padding: var(--s6); background: var(--blanc); }
.saison--active { background: var(--sapin); color: var(--creme); }
.saison__nom { font-family: var(--f-affiche); font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--sapin); }
.saison--active .saison__nom { color: var(--creme); }
.saison p:not(.saison__nom) { font-size: 16px; margin-top: var(--s2); color: var(--gris); }
.saison--active p:not(.saison__nom) { color: var(--menthe); }
.saison__badge { display: inline-block; margin-top: var(--s4); background: var(--dragee); color: var(--encre); font-weight: 600; font-size: 14px; padding: 4px var(--s3); border-radius: var(--r-plein); }

/* ---------- Pages de texte ---------- */
.texte-long { max-width: 46em; margin: 0 auto; padding-top: var(--s16); }
.texte-long h1 { margin-bottom: var(--s8); }
.texte-long h2 { font-size: 24px; font-weight: 600; color: var(--sapin); margin: var(--s10) 0 var(--s3); }
.texte-long p { color: var(--gris); }
.texte-long p + p { margin-top: var(--s3); }
.a-completer { background: #FFF1B8; color: var(--encre); padding: 0 4px; border-radius: 4px; }

/* ---------- Pied de page ---------- */
.pied {
  max-width: var(--largeur); margin: var(--section) auto 0;
  padding: var(--s12) clamp(var(--s1), 2vw, var(--s6)) var(--s6);
  border-top: 1px solid rgba(31, 77, 58, .15);
}
.pied__grille { display: grid; gap: var(--s10); grid-template-columns: 1.4fr 1fr 1fr; }
.pied__marque .logo { justify-self: start; color: var(--sapin); }
.pied__marque .logo svg { color: var(--dragee-fonce); }
.pied__marque p { margin-top: var(--s3); color: var(--gris); font-size: 16px; max-width: 22em; }
.pied h2 { font-size: 15px; font-weight: 600; color: var(--sapin); margin-bottom: var(--s3); }
.pied ul { list-style: none; display: grid; gap: var(--s2); }
.pied ul a { text-decoration: none; color: var(--gris); font-size: 16px; }
.pied ul a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s12); padding-top: var(--s5); border-top: 1px solid rgba(31, 77, 58, .1); font-size: 14px; color: var(--gris); }

/* ---------- Avant / pendant la prévente (réglé dans assets/config.js) ---------- */
html[data-phase="attente"] .si-prevente { display: none !important; }
html[data-phase="prevente"] .si-attente { display: none !important; }

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s10); }
  .etapes::before { display: none; }
  .box, .mimi, .produit { grid-template-columns: 1fr; }
  .produit__visuel { position: relative; top: 0; max-width: 560px; }
  .saisons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche { margin-top: var(--s4); }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav > .logo { justify-self: start; grid-column: 1; grid-row: 1; }
  .menu-panneau .nav__liens, .menu-panneau .nav__liens--droite { grid-column: auto; grid-row: auto; justify-content: flex-start; }
  .logo__mot { font-size: 32px; }
  .menu-bouton {
    display: inline-flex; grid-column: 3; grid-row: 1; align-items: center; gap: var(--s2);
    min-height: 44px; padding: 0 var(--s4); border: 1px solid rgba(255, 251, 243, .3); border-radius: var(--r-plein);
    background: transparent; color: var(--creme); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  }
  .menu-bouton svg { width: 18px; }
  .menu-bouton .icone-fermer { display: none; }
  .menu-bouton[aria-expanded="true"] .icone-ouvrir { display: none; }
  .menu-bouton[aria-expanded="true"] .icone-fermer { display: block; }
  .menu-panneau {
    display: none; grid-column: 1 / -1; grid-row: 2;
    flex-direction: column; gap: var(--s1); padding: var(--s3) 0 var(--s2);
    border-top: 1px solid rgba(255, 251, 243, .15); margin-top: var(--s3);
  }
  .menu-panneau.est-ouvert { display: flex; animation: apparaitre var(--t-normal) var(--e-entree) both; }
  .menu-panneau .nav__liens { flex-direction: column; align-items: stretch; }
  .menu-panneau .nav__lien { padding: var(--s3) var(--s4); font-size: 18px; }
  .menu-panneau .bouton { margin-top: var(--s2); }
  .heros__grille { grid-template-columns: 1fr; margin-top: var(--s10); gap: 0; }
  .heros__texte { padding-bottom: var(--s6); }
  .heros__scene svg { margin: 0 auto -4px; max-width: 420px; }
  .barre__liens .nav__lien { display: none; }
  .objets { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { padding: var(--s2); font-size: 17px; }
  .etapes { grid-template-columns: 1fr; }
  .etape { display: grid; grid-template-columns: 96px 1fr; gap: 0 var(--s4); text-align: left; align-items: center; }
  .etape img { width: 96px; margin: 0; grid-row: span 2; }
  .etape::before { left: 64px; width: 32px; height: 32px; font-size: 15px; }
  .etape p { margin: 0; }
  .promesse, .promesse:nth-child(2), .promesse:nth-child(3) { transform: none; margin-top: 0; }
  .promesses { gap: var(--s4); }
  .promesse { display: grid; grid-template-columns: 80px 1fr; gap: 0 var(--s4); align-items: start; padding: var(--s6); border-radius: var(--r-lg); }
  .promesse img { width: 80px; margin: 0; grid-row: span 2; }
  .promesse h3 { font-size: 22px; margin-bottom: var(--s2); }
  .promesse p { font-size: 16px; }
  .heros__actions .bouton { flex: 1 1 100%; }
  .infos { grid-template-columns: 1fr; }
  .saisons { grid-template-columns: 1fr; }
  .formule__carte { grid-template-columns: 44px minmax(0, 1fr); }
  .formule__carte img { width: 44px; }
  .formule__prix { grid-column: 2; }
  .inscription__coucou { width: 160px; }
  .fiche__tampon { right: -6px; width: 76px; height: 76px; font-size: 19px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  *, *::before, *::after { animation-delay: 0s !important; }
  .plume-balance, .mimi-yeux, .mimi-sort, .mimi-pattes { animation: none !important; }
  .bouton[data-etat="envoi"]::after { animation-duration: .7s !important; animation-iteration-count: infinite !important; }
}