/* ═══════════════════════════ DESIGN SYSTEM v2 ═══════════════════════════
   Direction « L'Atelier de papier » : papier + encre + un accent framboise,
   l'or en filets. Contrastes vérifiés AA sur papier : encre 13,2:1 ·
   encre-l 6,7:1 · or 5,6:1 · framboise/blanc 5,6:1.                      */
:root{
  /* — encres & papier — */
  --papier:#fdf9f4; --papier-c:#fffcfa; --carte:#fffdfb;
  --encre:#2f2942; --encre-l:#5d5470;
  --framboise:#a8446e; --framboise-f:#8e3a5f;
  --or:#7f6026; --or-l:#e8d5b0; --filet:rgba(127,96,38,.38);
  /* — pastels : réservés aux fonds de studio des photos produits — */
  --rose:#bd6289; --rose-p:#fbeaf0; --lilas:#d9c6ee; --ciel:#c3ddf2;
  --peche:#fbdcd2; --menthe:#c9e6d8;
  /* — compatibilité anciens noms (re-mappés, ne plus utiliser en neuf) — */
  --nuit:var(--encre); --nuit-l:var(--encre-l); --creme:var(--papier-c);
  --voile:var(--carte); --ligne:rgba(93,84,112,.20);
  /* — échelle typographique fluide — */
  --t-etiquette:12px;                              /* folios, labels (plancher) */
  --t-corps:clamp(15px,1.5vw,16.5px);              /* labeur */
  --t-grand:clamp(17px,1.8vw,19px);                /* chapeaux */
  --t-h3:clamp(20px,2.2vw,25px);
  --t-h2:clamp(30px,4.6vw,52px);
  --t-h1:clamp(42px,8.6vw,118px);                  /* display éditorial */
  /* — espacements (densité 6 : aéré mais habité) — */
  --e-1:4px; --e-2:8px; --e-3:14px; --e-4:22px; --e-5:34px;
  --e-6:56px; --e-7:clamp(64px,9vh,96px); --e-8:clamp(96px,14vh,150px);
  /* — rayons : vif pour le papier découpé, doux pour les scènes — */
  --r-vif:4px; --r-s:12px; --r:22px;
  /* — ombres d'encre (jamais de gris neutre) — */
  --ombre-1:0 2px 10px rgba(47,41,66,.07);
  --ombre-2:0 14px 34px rgba(47,41,66,.11);
  --ombre-3:0 26px 60px rgba(47,41,66,.16);
  /* — durées & courbes nommées — */
  --vif:.18s; --pose:.32s; --calme:.6s; --lent:.95s;
  --e-sortie:cubic-bezier(.16,1,.3,1);      /* décélération longue (reveals) */
  --e-presse:cubic-bezier(.2,.7,.25,1);     /* la presse qui imprime */
  --e-ressort:cubic-bezier(.34,1.56,.64,1); /* rebond (carnet, tampons) */
}
*{box-sizing:border-box}
/* Le décor animé du fond est légèrement agrandi pour l'effet de parallaxe :
   il dépasse donc du cadre. « clip » le rogne sans créer de conteneur de
   défilement — contrairement à « hidden », qui casserait le position:sticky
   de la séquence cinématique. */
html{scroll-behavior:smooth}
body{margin:0;color:var(--encre);background:var(--papier);
  font-family:Jost,system-ui,sans-serif;font-weight:400;font-size:var(--t-corps);line-height:1.65;
  -webkit-font-smoothing:antialiased}
/* grain du papier : une tuile SVG statique, fondue en multiply — zéro animation */
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .58 0 0 0 0 .55 0 0 0 0 .5 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E")}
/* lien d'évitement clavier */
.sauter{position:fixed;top:10px;left:10px;z-index:200;background:var(--encre);color:#fff;
  padding:10px 18px;border-radius:var(--r-s);font-size:13px;text-decoration:none;
  transform:translateY(-60px);transition:transform var(--vif)}
.sauter:focus-visible{transform:none}
/* Débordement horizontal du décor : à rogner SANS faire de body un conteneur
   de défilement, sinon position:sticky (la séquence cinématique) ne colle plus.
   Règle : overflow sur html seul (propagé à la fenêtre), jamais sur body ;
   « clip » quand le navigateur le connaît, « hidden » sinon. */
html{overflow-x:hidden}
body{overflow-x:visible}
@supports (overflow-x:clip){ html{overflow-x:clip} }
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;margin:0;letter-spacing:.005em}
/* .script : l'accent des titres passe en italique Cormorant (l'encre de l'atelier).
   La Parisienne est réservée à .plume : annotations manuscrites et prénom du client. */
.script{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300}
.plume{font-family:Parisienne,cursive;font-weight:400;font-style:normal}
/* filet doré : l'ornement de la maison */
.filet-or{display:inline-block;width:44px;height:1px;background:var(--or);vertical-align:middle}
a{color:inherit}
button{font-family:inherit;cursor:pointer;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px;position:relative;z-index:2}

/* ============ décor : le papier a remplacé le ciel ============
   Les blobs animés en blur(96px), le voile global et les étoiles fixes
   coûtaient une composition GPU permanente et lavaient les photos. Le fond
   est désormais le papier lui-même (grain statique sur body::after). Les
   conteneurs restent dans le HTML — nettoyés lors des passes par section. */
#ciel,#voile,#etoiles,#deco{display:none}
.titre,.hero .wrap,.re-g,.onglet-desc,.resume-choix,.formules-notes,.rien,.invites,.nav-etape,.insta-min{position:relative}

/* ============ en-tête ============ */
header{position:fixed;top:0;left:0;right:0;z-index:70;padding:20px 0;
  transition:padding var(--pose) var(--e-presse),background var(--pose),box-shadow var(--pose)}
/* collé : bandeau papier opaque fermé d'un filet or — plus de flou coûteux */
header.colle{background:var(--papier);padding:10px 0;
  border-bottom:1px solid var(--filet);box-shadow:var(--ombre-1)}
.hd{display:flex;align-items:center;gap:20px}
.logo{line-height:1;text-align:left}
.logo .m{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.42em;display:block}
.logo .c{font-family:Parisienne,cursive;font-size:31px;color:var(--framboise);display:block;margin:-6px 0 -4px}
.logo .p{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.44em;display:block}
nav{margin-left:auto;display:flex;gap:6px;align-items:center}
/* liens : soulignement d'encre qui se tire, plus de pastille */
nav a{padding:9px 4px;margin:0 9px;text-decoration:none;font-size:13.5px;
  letter-spacing:.06em;color:var(--encre-l);position:relative;transition:color var(--vif)}
nav a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;
  background:var(--encre);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--pose) var(--e-sortie)}
nav a:hover{color:var(--encre)}
nav a:hover::after{transform:scaleX(1)}
.carnet{border:1px solid var(--filet);background:var(--carte);border-radius:var(--r-s);
  padding:10px 18px;font-size:13px;letter-spacing:.05em;display:flex;align-items:center;gap:9px;
  transition:border-color var(--vif),box-shadow var(--vif),transform var(--vif)}
.carnet:hover{border-color:var(--or);box-shadow:var(--ombre-1)}
.carnet:active{transform:scale(.97)}
.carnet .n{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--or)}
.burger{display:none;border:1px solid var(--ligne);background:var(--carte);
  border-radius:var(--r-s);padding:9px 12px;font-size:15px}

/* ============ héros — l'atelier ouvre son carnet ============
   Split éditorial asymétrique : display Cormorant à gauche qui déborde sur la
   colonne photo, prénom saisi ici et « tamponné » en direct sur l'étiquette.  */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,14vh,150px) 0 var(--e-6)}
.hero-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:0 clamp(24px,4vw,64px);align-items:center;width:100%}
.hero-txt{position:relative;z-index:3;padding:var(--e-4) 0}
.hero-folio{display:flex;align-items:center;gap:14px;margin:0 0 var(--e-4);
  font-size:var(--t-etiquette);letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.hero-folio i{font-style:normal}
.hero-folio::before{content:'';width:44px;height:1px;background:var(--or);
  transform-origin:0 50%}
.hero h1{font-size:var(--t-h1);line-height:.98;letter-spacing:-.01em;text-wrap:balance;
  margin-right:clamp(0px,-6vw + 60px,0px)}
.hero h1 .script{display:block;color:var(--framboise);font-size:1.06em;
  padding:.02em .06em .1em 0}
.hero-p{max-width:44ch;margin:var(--e-4) 0 0;color:var(--encre-l);font-size:var(--t-grand);
  text-wrap:pretty}
.hero .cta{margin-top:var(--e-5);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lien-encre{font-size:13.5px;letter-spacing:.04em;color:var(--encre);text-decoration:underline;
  text-underline-offset:5px;text-decoration-color:var(--filet);transition:text-decoration-color var(--vif)}
.lien-encre:hover{text-decoration-color:var(--encre)}
/* la saisie du prénom : une ligne de carnet, pas un formulaire */
.hero-f{margin-top:var(--e-5);max-width:430px}
.hero-f label{display:block;font-size:var(--t-etiquette);letter-spacing:.26em;
  text-transform:uppercase;color:var(--encre-l);margin-bottom:6px}
.hero-f input{width:100%;border:0;border-bottom:1px solid var(--filet);background:none;
  font-family:Parisienne,cursive;font-size:clamp(30px,4vw,40px);line-height:1.3;
  color:var(--encre);padding:0 2px 4px;caret-color:var(--framboise);transition:border-color var(--vif)}
.hero-f input::placeholder{color:rgba(47,41,66,.24)}
.hero-f input:focus{outline:none;border-bottom-color:var(--framboise)}
.hero-n{font-size:12.5px;color:var(--encre-l);margin:8px 0 0;font-style:italic}
/* colonne photo : pleine hauteur de colonne, étiquette tamponnée par-dessus */
.hero-visu{position:relative;z-index:2;padding-top:38px}  /* réserve l'espace de l'annotation */
.hero-photo{margin:0;position:relative;border-radius:var(--r-s);overflow:hidden;
  box-shadow:var(--ombre-3)}
.hero-photo img{display:block;width:100%;height:clamp(380px,62vh,640px);
  object-fit:cover;transform:scale(1.12)}   /* absorbe la vignette blanche du packshot */
.hero-etiquette{position:absolute;left:8%;bottom:9%;background:var(--papier-c);
  border:1px solid var(--or-l);border-radius:var(--r-vif);padding:10px 22px 12px;
  box-shadow:var(--ombre-2);transform:rotate(-3deg);text-align:center}
.hero-etiquette::after{content:'';position:absolute;inset:3px;border:1px solid var(--filet);
  border-radius:2px;pointer-events:none}
.hero-etiquette .plume{display:block;font-size:clamp(26px,3vw,34px);line-height:1.2;
  color:var(--framboise)}
.hero-etiquette small{display:block;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--encre-l);margin-top:2px}
.hero-annot{position:absolute;right:4%;top:2px;transform:rotate(2deg);
  color:var(--or);font-size:clamp(19px,2vw,23px);margin:0}
.scroll-cue{margin-top:var(--e-6);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-l);animation:flot 2.6s ease-in-out infinite;text-align:center}
@keyframes flot{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}

/* — entrée orchestrée : l'impression prend en < 1 s — */
@keyframes h-bandeau{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -6% 0 0)}}
@keyframes h-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes h-rideau{to{transform:translateY(102%)}}
@keyframes h-tampon{0%{opacity:0;transform:rotate(-8deg) scale(1.3)}
  62%{opacity:1;transform:rotate(-2.6deg) scale(.96)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes h-filet{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero h1{clip-path:inset(0 -6% 0 0);animation:h-bandeau var(--calme) var(--e-presse) both}
.hero-folio::before{animation:h-filet var(--calme) var(--e-sortie) both}
.hero-folio i{animation:h-monte var(--pose) var(--e-sortie) both}
.hero-p,.hero-f,.hero .cta{animation:h-monte var(--calme) var(--e-sortie) both}
.hero-p{animation-delay:.18s}.hero-f{animation-delay:.28s}.hero .cta{animation-delay:.38s}
.hero-photo::after{content:'';position:absolute;inset:-1px;background:var(--papier);
  animation:h-rideau var(--lent) var(--e-presse) both;will-change:transform}
.hero-etiquette{animation:h-tampon .55s var(--e-ressort) .55s both}
.hero-annot{animation:h-monte var(--calme) var(--e-sortie) .8s both}
.scroll-cue{opacity:0;animation:flot 2.6s ease-in-out 1.1s infinite}

.bt{border:0;border-radius:var(--r-s);padding:15px 30px;font-size:13.5px;letter-spacing:.08em;
  text-decoration:none;display:inline-block;font-weight:400;cursor:pointer;
  transition:transform var(--vif) var(--e-sortie),background var(--vif),
    box-shadow var(--pose),border-color var(--vif),color var(--vif)}
.bt-p{background:var(--framboise);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px rgba(168,68,110,.22)}
.bt-p:hover{transform:translateY(-2px);background:var(--framboise-f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px rgba(142,58,95,.28)}
.bt-p:active{transform:translateY(0) scale(.98)}
.bt-s{background:none;border:1px solid var(--filet);color:var(--encre)}
.bt-s:hover{border-color:var(--or);color:var(--or);background:rgba(127,96,38,.05)}
.bt-s:active{transform:scale(.98)}
.bt[disabled]{opacity:.35;pointer-events:none}

/* ============ sections ============ */
section{padding:var(--e-7) 0;position:relative;z-index:2;scroll-margin-top:96px}
.titre{text-align:center;margin-bottom:46px}
.titre .k{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--or);
  display:block;margin-bottom:14px}
.titre h2{font-size:clamp(29px,4.4vw,44px);line-height:1.15}
.titre h2 .script{color:var(--framboise);font-size:1.2em}
.titre p{color:var(--nuit-l);max-width:560px;margin:14px auto 0;font-size:15.5px}

/* apparition au scroll — le papier se pose (fini le rotateX de template) */
.rev{opacity:0;transform:translateY(16px);
  transition:opacity var(--calme) ease,transform var(--lent) var(--e-sortie)}
.rev.vu{opacity:1;transform:none}

/* ============ parcours guidé ============ */
.etoiles-prog{display:flex;justify-content:center;gap:14px;margin-bottom:34px;padding-top:8px}
.ep{width:18px;height:18px;position:relative;transition:.4s;color:#ddd2e2}
.ep::before{content:'✦';position:absolute;inset:0;display:grid;place-items:center;font-size:13px}
.ep.on{color:var(--or);transform:scale(1.35);text-shadow:0 0 12px rgba(201,168,108,.6)}
.ep.fait{color:var(--framboise)}

.etape{display:none}
.etape.on{display:block;animation:appar .75s cubic-bezier(.2,.7,.25,1)}
@keyframes appar{from{opacity:0;transform:translateY(30px) rotateX(8deg) scale(.985)}
  to{opacity:1;transform:none}}

.choix{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);max-width:790px;margin:0 auto}
#choix-univ{grid-template-columns:repeat(4,1fr);max-width:940px}
#choix-evt{grid-template-columns:repeat(4,1fr);max-width:1000px}
.ch{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-s);
  padding:30px 20px;text-align:center;position:relative;overflow:hidden;
  transition:transform var(--pose) var(--e-sortie),box-shadow var(--pose),border-color var(--vif)}
.ch::after{content:'';position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 55%);pointer-events:none}
.ch:hover{transform:translateY(-4px);border-color:var(--or);box-shadow:var(--ombre-2)}
.ch:active{transform:translateY(-1px) scale(.99)}
.ch.on{border-color:var(--framboise);background:#fff;
  box-shadow:0 0 0 3px rgba(168,68,110,.13),var(--ombre-1)}
.ch .e{font-size:34px;display:block;margin-bottom:10px}
.ch .n{font-family:'Cormorant Garamond',serif;font-size:20px;display:block;line-height:1.25}
.ch .s{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--nuit-l);
  display:block;margin-top:6px}

/* cartes d'occasion : une teinte de la palette, pas une photo voilée */
.ch.teinte{background:linear-gradient(168deg,color-mix(in srgb,var(--teinte) 82%,#fff),
  color-mix(in srgb,var(--teinte) 38%,#fff));padding-top:28px}
.ch.teinte .e{font-size:38px}
.ch.teinte:hover{border-color:var(--or)}
.ch.teinte.on{border-color:var(--framboise);box-shadow:0 0 0 3px rgba(168,68,110,.15),var(--ombre-2)}

/* cartes d'occasion avec photo en fond */
.ch.ph{background-image:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.96) 100%),var(--fond);
  background-size:cover;background-position:center top;
  text-shadow:0 1px 8px rgba(255,255,255,.95);padding-top:26px}
.ch.ph:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.80) 46%,rgba(255,255,255,.95) 100%),var(--fond)}
.ch.ph.on{background-image:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.76) 46%,rgba(255,255,255,.94) 100%),var(--fond);
  border-color:var(--or);box-shadow:0 0 0 4px rgba(201,168,108,.16),0 16px 40px rgba(120,100,130,.16)}
.ch.ph .e{filter:drop-shadow(0 3px 8px rgba(120,100,130,.28))}
.ch.ph .s{color:var(--nuit-l)}
.ch.ph .n{color:var(--nuit)}
.ch.ph::after{background:linear-gradient(150deg,rgba(255,255,255,.42),transparent 60%)}

.invites{max-width:520px;margin:0 auto;text-align:center}
.compteur{display:flex;align-items:center;justify-content:center;gap:24px;margin:10px 0 6px}
.compteur button{width:52px;height:52px;border-radius:50%;border:1px solid var(--ligne);
  background:var(--carte);font-size:22px;font-weight:200;transition:border-color var(--vif),color var(--vif),transform var(--vif)}
.compteur button:active{transform:scale(.94)}
.compteur button:hover{border-color:var(--or);color:var(--or)}
.compteur .v{font-family:'Cormorant Garamond',serif;font-size:62px;min-width:120px;line-height:1}
.invites .lab{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--nuit-l)}
.rapide{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.rapide button{border:1px solid var(--ligne);background:rgba(255,255,255,.55);border-radius:99px;
  padding:7px 17px;font-size:13px;transition:.2s}
.rapide button:hover,.rapide button.on{border-color:var(--or);color:var(--or);background:#fff}

.nav-etape{display:flex;gap:12px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.retour{background:none;border:0;font-size:13px;letter-spacing:.06em;color:var(--nuit-l);
  padding:15px 10px;text-decoration:underline;text-underline-offset:4px}
.retour:hover{color:var(--nuit)}

/* ============ créations ============ */
.resume-choix{text-align:center;margin-bottom:38px;font-size:14.5px;color:var(--nuit-l)}
.resume-choix b{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:400;color:var(--nuit)}
.resume-choix .mod{background:none;border:0;font-size:12.5px;color:var(--or);
  text-decoration:underline;text-underline-offset:3px;margin-left:8px}

.cartes{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.cr{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-s);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform var(--pose) var(--e-sortie),box-shadow var(--pose),border-color var(--vif)}
.cr:hover{transform:translateY(-5px);box-shadow:var(--ombre-2);border-color:var(--or)}
.vis{aspect-ratio:4/3;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.vis img{width:100%;height:100%;object-fit:cover;display:block}
/* produit sans photo : même crème que les packshots, pour rester dans la famille */
.vis.attente{background:#faf5ec !important}
.vis .ic{font-size:58px;filter:drop-shadow(0 8px 18px rgba(120,100,130,.20));
  animation:respire 5s ease-in-out infinite}
@keyframes respire{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.05)}}
.vis .att{position:absolute;bottom:10px;right:10px;background:rgba(255,253,251,.92);
  border:1px solid var(--ligne);border-radius:var(--r-vif);font-size:var(--t-etiquette);letter-spacing:.12em;text-transform:uppercase;
  padding:4px 11px;color:var(--encre-l)}
.cr .in{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.cr .fam{font-size:var(--t-etiquette);letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin-bottom:9px}
.cr h3{font-size:22px;line-height:1.2;margin-bottom:8px}
.cr p{font-size:13.5px;color:var(--nuit-l);margin:0 0 16px;flex:1;line-height:1.6}
.cr .bas{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--ligne);padding-top:15px}
.pr{font-family:'Cormorant Garamond',serif;font-size:22px}
.pr small{font-family:Jost,sans-serif;font-size:11.5px;color:var(--nuit-l)}
.pr.sd{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.1em;color:var(--or);
  text-transform:uppercase}
.aj{border:1px solid var(--encre);background:none;border-radius:var(--r-s);padding:9px 18px;
  font-size:12.5px;letter-spacing:.05em;white-space:nowrap;
  transition:background var(--vif),color var(--vif),transform var(--vif) var(--e-ressort),border-color var(--vif)}
.aj:hover{background:var(--encre);color:#fff}
.aj:active{transform:scale(.95)}
.aj.dans{background:var(--framboise);border-color:var(--framboise);color:#fff;transform:rotate(-1.6deg)}
.sugg{position:absolute;top:12px;left:12px;background:rgba(75,68,89,.86);color:#fff;
  border-radius:99px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 12px;backdrop-filter:blur(4px)}
.rien{text-align:center;color:var(--nuit-l);padding:60px 0;font-size:15px}

.affiner{text-align:center;margin-top:44px}
.affiner .pan{display:none;margin-top:22px;background:var(--carte);border:1px solid var(--filet);
  border-radius:var(--r-s);padding:22px;box-shadow:var(--ombre-1);text-align:left}
.affiner .pan.on{display:block;animation:appar .5s}
.frow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.frow:last-child{margin-bottom:0}
.flab{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--nuit-l);min-width:88px}
.pastille{border:1px solid var(--ligne);background:rgba(255,255,255,.55);border-radius:99px;
  padding:7px 15px;font-size:12.5px;transition:.2s}
.pastille:hover{border-color:var(--or-l)}
.pastille.on{background:var(--framboise);color:#fff;border-color:var(--framboise)}

/* ============ formules ============ */
.formules{display:grid;gap:22px;grid-template-columns:repeat(2,1fr);max-width:940px;margin:0 auto}
/* Les listes n'ont pas la même longueur : sans mise en colonne, le prix
   restait suspendu au milieu du vide dans la carte la plus courte. */
.fo{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r-s);padding:34px 28px;
  text-align:center;display:flex;flex-direction:column;
  transition:transform var(--pose) var(--e-sortie),box-shadow var(--pose),border-color var(--vif)}
.fo ul{flex:1 0 auto}
.fo .tf{margin-top:auto;padding-top:20px;border-top:1px solid var(--ligne)}
.fo:hover{transform:translateY(-4px);border-color:var(--or);box-shadow:var(--ombre-2)}
.fo .e{font-size:30px;display:block;margin-bottom:12px}
.fo h3{font-size:26px;margin-bottom:8px}
.fo p{font-size:13.5px;color:var(--nuit-l)}

/* ============ carnet d'envies ============ */
.rideau{position:fixed;inset:0;background:rgba(75,68,89,.34);backdrop-filter:blur(3px);
  z-index:90;opacity:0;pointer-events:none;transition:.3s}
.rideau.on{opacity:1;pointer-events:auto}
.carnet-p{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:100;
  transform:translateX(100%);transition:transform .42s var(--e-presse);
  display:flex;flex-direction:column;
  background:var(--papier-c);border-left:1px solid var(--filet)}
.carnet-p.on{transform:none;box-shadow:-14px 0 50px rgba(75,68,89,.2)}
.ch-t{padding:26px 26px 18px;text-align:center;position:relative;border-bottom:1px solid var(--ligne)}
.ch-t .k{font-size:11.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--or)}
.ch-t h2{font-size:30px;margin-top:5px}
.ch-t h2 .script{color:var(--framboise)}
.fx{position:absolute;top:22px;right:20px;border:0;background:rgba(255,255,255,.7);
  border-radius:50%;width:34px;height:34px;font-size:17px;line-height:1;color:var(--nuit-l)}
.ch-b{flex:1;overflow-y:auto;padding:14px 26px}
.env{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px dashed var(--ligne)}
.env .txt{flex:1;min-width:0}
.env .txt strong{display:block;font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;line-height:1.25}
.env .txt small{font-size:11.5px;color:var(--nuit-l)}
.qt{display:flex;align-items:center;border:1px solid var(--ligne);border-radius:99px;
  background:rgba(255,255,255,.75)}
.qt button{border:0;background:none;width:29px;height:29px;font-size:15px;color:var(--nuit-l)}
.qt input{width:44px;border:0;text-align:center;font-family:'Cormorant Garamond',serif;
  font-size:16px;background:none}
.qt input::-webkit-outer-spin-button,.qt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.env .sup{border:0;background:none;color:var(--nuit-l);font-size:15px;padding:2px 2px}
.vide-c{text-align:center;padding:66px 18px;color:var(--nuit-l)}
.vide-c .e{font-size:38px;display:block;margin-bottom:16px;opacity:.6}
.vide-c p{font-size:14px;margin:0}
.ch-f{border-top:1px solid var(--filet);padding:22px 26px;background:var(--carte)}
.est{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.est .l{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--nuit-l)}
.est .v{font-family:'Cormorant Garamond',serif;font-size:30px}
.mini{font-size:11.5px;color:var(--nuit-l);line-height:1.5;margin:0 0 16px}
.ch-f .bt{display:block;width:100%;text-align:center}
.ch-f .bt-s{margin-top:9px}

/* ============ demande ============ */
.form-b{background:var(--carte);border:1px solid var(--filet);border-radius:var(--r-s);
  padding:38px;max-width:820px;margin:0 auto;box-shadow:var(--ombre-2);position:relative}
.form-b::before{content:'';position:absolute;inset:7px;border:1px solid rgba(127,96,38,.16);
  border-radius:calc(var(--r-s) - 4px);pointer-events:none}
.fg{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.fl{display:flex;flex-direction:column;gap:7px}
.fl.full{grid-column:1/-1}
.fl label{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--nuit-l)}
.fl input,.fl select,.fl textarea{border:0;border-bottom:1px solid var(--filet);
  background:none;padding:9px 2px;font-family:Jost,sans-serif;font-weight:400;font-size:15px;
  color:var(--nuit);transition:.25s}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:0;border-color:var(--or)}
.fl textarea{min-height:80px;resize:vertical}
.recap{margin-top:32px;padding-top:26px;border-top:1px dashed var(--ligne)}
.recap .tt{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.recap ul{margin:12px 0 0;padding:0;list-style:none}
.recap li{font-family:'Cormorant Garamond',serif;font-size:17px;padding:5px 0;
  border-bottom:1px dotted var(--ligne)}
.recap li span{float:right;color:var(--nuit-l);font-family:Jost;font-size:13px}
.envoi{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.msg{font-size:12.5px;color:var(--or);margin:14px 0 0;min-height:18px}


/* ============ onglets de catégories ============ */
.onglets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.og{border:1px solid var(--ligne);background:var(--carte);border-radius:var(--r-s);
  padding:11px 20px;font-size:13.5px;letter-spacing:.03em;
  transition:transform var(--vif) var(--e-sortie),border-color var(--vif),box-shadow var(--pose),background var(--vif);
  display:flex;align-items:center;gap:9px;position:relative}
.og:hover{border-color:var(--or);transform:translateY(-2px)}
.og .e{font-size:16px}
.og .c{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--nuit-l);
  background:rgba(255,255,255,.7);border-radius:99px;padding:1px 9px;min-width:26px;text-align:center}
.og.on{background:var(--framboise);color:#fff;border-color:var(--framboise);
  box-shadow:0 8px 24px rgba(176,76,120,.3)}
.og.on .c{background:rgba(78,26,50,.25);color:#fff}
.onglet-desc{text-align:center;color:var(--nuit-l);font-size:14.5px;max-width:560px;
  margin:0 auto 26px}

/* option / minimum sur les cartes */
.cr .opt{font-size:11.5px;color:var(--or);border-top:1px dotted var(--ligne);
  margin-top:-6px;padding:8px 0 0;margin-bottom:10px}
.mini-q{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.82);
  border-radius:99px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;color:var(--nuit-l);backdrop-filter:blur(4px)}

/* formules */
.fo{text-align:left}
.fo .bl{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;
  color:var(--rose-f,#d98da8);color:#96536f;margin:2px 0 14px}
.fo ul{list-style:none;padding:0;margin:0}
.fo ul li{font-size:13.5px;color:var(--nuit-l);padding:5px 0 5px 18px;position:relative}
.fo ul li::before{content:'·';position:absolute;left:5px;color:var(--or);font-size:18px;top:1px}
.fo .mn{font-size:var(--t-etiquette);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-l);
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--filet)}
.fo .tf{margin-top:16px;text-align:center}
.fo .e{text-align:center;font-size:26px;display:block;margin-bottom:8px;color:var(--or)}
.fo h3{text-align:center}
.fo .bl{text-align:center}
.formules-notes{max-width:640px;margin:34px auto 0;padding:0;list-style:none;text-align:center}
.formules-notes li{font-size:13.5px;color:var(--nuit-l);padding:7px 0}
.formules-notes li::before{content:'❤ ';color:var(--framboise)}

footer{padding:60px 0 44px;text-align:center;position:relative;z-index:2;
  border-top:1px solid var(--filet);margin-top:40px}
footer .logo{display:inline-block;margin-bottom:16px}
footer p{font-size:13px;color:var(--nuit-l);margin:0}
footer a{color:var(--or);text-decoration:none}

.avis{background:none;border:0;font-size:11.5px;color:var(--nuit-l);letter-spacing:.05em;
  display:flex;align-items:center;gap:7px;margin:0 auto;padding:8px}
.avis input{accent-color:var(--framboise)}
.bandeau-int{position:fixed;bottom:0;left:0;right:0;background:var(--nuit);color:#fff;
  padding:9px 0;font-size:12px;text-align:center;z-index:80;display:none;letter-spacing:.05em}
.bandeau-int.on{display:block}

.note-tarif{max-width:640px;margin:0 auto 34px;text-align:center;font-size:12.5px;
  color:var(--encre-l);background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--r-s);padding:14px 20px}

/* ============ signature de mouvement — l'encre & le papier ============
   L'ancien décor (reflets dorés animés, balayages, halo pulsé, étoiles
   filantes) est remplacé : chaque mouvement oriente, confirme ou raconte. */

/* photos : parallaxe interne au défilement + respiration au survol */
.vis img{transform:translateY(var(--par,0%)) scale(1.14);
  transition:transform .9s var(--e-presse)}
.cr:hover .vis img{transform:translateY(var(--par,0%)) scale(1.2)}

/* barre de progression : un filet d'or qui se tire en haut de page */
#progres{position:fixed;top:0;left:0;right:0;height:2px;z-index:75;
  background:linear-gradient(90deg,var(--or-l),var(--or));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* titres qui se composent mot à mot — posés au composteur (plus de bascule 3D) */
.titre h2 .mot{display:inline-block;opacity:0;transform:translateY(14px);
  transition:opacity var(--calme) ease,transform .75s var(--e-sortie);
  transition-delay:calc(var(--i,0)*80ms)}
.titre.vu h2 .mot{opacity:1;transform:none}

/* particules d'or : conservées pour le vol vers le carnet (geste de confirmation) */
.pcl{position:fixed;pointer-events:none;z-index:120;line-height:1;
  text-shadow:0 0 8px rgba(201,168,108,.75)}
.vol{position:fixed;pointer-events:none;z-index:120;font-size:20px;color:var(--or);line-height:1;
  text-shadow:0 0 12px rgba(201,168,108,.9)}

/* bandeau réassurance — fiche d'atelier entre deux filets d'or */
.reassure{position:relative;z-index:2;padding:0 0 var(--e-5)}
.re-g{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1020px;margin:0 auto;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:var(--e-4) 10px}
.re-i{text-align:center}
.re-i .e{display:block;margin:0 auto 9px;color:var(--or)}
.re-i .t{font-family:'Cormorant Garamond',serif;font-size:17px;line-height:1.3;display:block}
.re-i .s{font-size:var(--t-etiquette);color:var(--encre-l);letter-spacing:.04em;display:block;margin-top:3px}

/* toast d'ajout au carnet */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);opacity:0;z-index:110;
  background:var(--papier-c);border:1px solid var(--or-l);
  border-radius:var(--r-s);padding:10px 10px 10px 22px;display:flex;align-items:center;gap:16px;
  box-shadow:var(--ombre-3);transition:transform .45s var(--e-ressort),opacity .45s;
  font-size:13.5px;max-width:min(92vw,500px);pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:16px}
.toast .bt{padding:9px 18px;font-size:12px;white-space:nowrap}

/* accessibilité clavier */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--or);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .etape.on,.scroll-cue{animation:none!important}
  /* hero : tout est rendu dans son état final, immédiatement */
  .hero h1,.hero-folio::before,.hero-folio i,.hero-p,.hero-f,.hero .cta,
  .hero-photo,.hero-etiquette,.hero-annot{animation:none!important;
    clip-path:none!important;opacity:1!important;transform:rotate(-3deg)!important}
  .hero-photo::after{display:none}
  .hero h1,.hero-folio::before,.hero-folio i,.hero-p,.hero-f,.hero .cta,
  .hero-photo,.hero-annot{transform:none!important}
  .hero-annot{transform:rotate(2deg)!important}
  .scroll-cue{opacity:.55}
  .vis img{transition:none;transform:none}
  .rev,.fo.rev{transition:none;transform:none;opacity:1}
  .titre h2 .mot{transition:none;opacity:1;transform:none}
  #progres{display:none}
}
@media(max-width:860px){
  .re-g{grid-template-columns:repeat(2,1fr);gap:16px 10px;padding:18px 6px}
  .re-i .t{font-size:15px}
  .toast{bottom:16px}
  /* hero : colonne unique, la photo suit le texte, l'étiquette reste tamponnée */
  .hero{min-height:auto;padding-top:clamp(96px,13vh,120px)}
  .hero-g{grid-template-columns:1fr;gap:var(--e-5) 0}
  .hero h1{margin-right:0}
  .hero-annot{top:auto;bottom:-30px;right:6%}
  .scroll-cue{margin-top:var(--e-5)}
}

@media(max-width:860px){
  nav{display:none}
  nav.on{display:flex;position:absolute;top:100%;left:14px;right:14px;flex-direction:column;
    background:rgba(255,252,250,.96);backdrop-filter:blur(16px);border:1px solid var(--ligne);
    border-radius:22px;padding:12px;gap:2px;box-shadow:0 14px 40px rgba(120,100,130,.14)}
  .burger{display:block;margin-left:auto}
  .carnet{padding:9px 15px}
  .fg{grid-template-columns:1fr}
  .form-b{padding:26px 20px}
  section{padding:60px 0}
  .compteur .v{font-size:48px;min-width:96px}
  .choix{grid-template-columns:repeat(2,1fr);gap:12px}
  .og{padding:10px 15px;font-size:12.5px}
  .formules{grid-template-columns:1fr}
  .og .e{font-size:14px}
  #choix-univ,#choix-evt{grid-template-columns:repeat(2,1fr)}
  .ch{padding:22px 12px}
  .ch .n{font-size:17px}
}
@media print{
  header,.rideau,.carnet-p,.galerie,.fiche,.fi-zoom,.simu,#demande,#instagram,.affiner,.nav-etape,.etoiles-prog,.bt,.aj,.bandeau-int,.toast,.pcl,.vol,#progres,#deco,.file-etoile{display:none!important}
  #ciel,#voile,#etoiles{display:none}
  body{background:#fff}
  .cr,.fo,.ch{break-inside:avoid;backdrop-filter:none;background:#fff}
  .rev{opacity:1!important;transform:none!important}
}

/* ============ à la une — nouveauté du moment ============ */
/* l'annonce est un tampon d'encre framboise, pas un bijou doré */
.nv-pastille{display:inline-block;background:none;border:1px solid var(--framboise);
  color:var(--framboise);border-radius:var(--r-vif);padding:7px 16px;
  font-size:var(--t-etiquette);letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:16px;transform:rotate(-1.4deg)}
.nv-affiche{margin:34px auto 0;max-width:430px;text-align:center}
.nv-affiche figcaption{margin-top:9px;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nuit-l);opacity:.8}
.nv-visuel{display:block;width:100%;max-width:430px;margin:0 auto;padding:0;background:none;
  border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden;cursor:zoom-in;
  transition:.35s cubic-bezier(.2,.7,.3,1)}
.nv-visuel img{width:100%;display:block}
.nv-visuel:hover{transform:translateY(-4px);border-color:var(--or-l);
  box-shadow:0 20px 46px rgba(120,100,130,.16)}
.nv-kits{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1000px;margin:26px auto 0}
.nv-kit{background:var(--carte);border:1px solid var(--filet);border-radius:var(--r-s);padding:22px;
  display:flex;gap:18px;box-shadow:var(--ombre-1);transition:transform var(--pose) var(--e-sortie),box-shadow var(--pose),border-color var(--vif)}
.nv-kit:hover,.nv-kit.on{border-color:var(--framboise);transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(176,76,120,.18)}
.nv-mini{flex:0 0 116px;height:116px;padding:0;border:1px solid var(--ligne);border-radius:14px;
  overflow:hidden;background:#fff;cursor:zoom-in;align-self:flex-start;transition:.2s}
.nv-mini:hover{border-color:var(--or)}
.nv-mini img{width:100%;height:100%;object-fit:cover;display:block}
.nv-in{flex:1;display:flex;flex-direction:column;min-width:0}
.nv-in h3{font-size:24px;line-height:1.2}
.nv-age{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);white-space:nowrap;margin-left:7px}
.nv-in ul{list-style:none;margin:10px 0 14px;padding:0;flex:1}
.nv-in li{font-size:13px;color:var(--nuit-l);padding:3px 0 3px 16px;position:relative;line-height:1.45}
.nv-in li::before{content:'·';position:absolute;left:4px;color:var(--or);font-size:17px}
.nv-in .bas{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--ligne);padding-top:13px;flex-wrap:wrap}
.nv-args{display:flex;gap:8px 26px;flex-wrap:wrap;justify-content:center;max-width:1000px;
  margin:28px auto 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  padding:16px 8px}
.nv-args span{font-size:12px;color:var(--encre-l);letter-spacing:.04em}
.nv-args span::before{content:'✦ ';color:var(--or)}
.nv-perso{text-align:center;max-width:760px;margin:22px auto 0;font-size:17px;color:var(--or);
  font-family:'Cormorant Garamond',serif}
.nv-perso small{display:block;font-family:Jost,sans-serif;font-size:11.5px;color:var(--nuit-l);margin-top:4px}
@media(max-width:860px){
  .nv-kits{grid-template-columns:1fr;gap:14px}
  .nv-kit{padding:16px;gap:14px}
  .nv-mini{flex-basis:92px;height:92px}
  .nv-in h3{font-size:21px}
}

/* ============ simulateur de personnalisation ============ */
.simu{position:fixed;inset:0;z-index:160;display:none;overflow-y:auto;
  background:rgba(56,49,74,.55);backdrop-filter:blur(6px);padding:30px 16px}
.simu.on{display:block}
.si-in{max-width:1000px;margin:0 auto;position:relative;border-radius:var(--r);padding:30px;
  background:var(--papier-c);border:1px solid var(--filet);
  box-shadow:0 30px 80px rgba(56,49,74,.32);animation:appar .5s cubic-bezier(.2,.7,.25,1)}
.si-fx{position:absolute;top:14px;right:14px;border:0;background:rgba(255,255,255,.85);
  border-radius:50%;width:38px;height:38px;font-size:20px;line-height:1;color:var(--nuit-l);
  z-index:2;transition:.2s}
.si-fx:hover{color:var(--nuit);box-shadow:0 4px 14px rgba(120,100,130,.2)}
.si-tete{text-align:center;margin-bottom:22px}
.si-tete .k{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--or);
  display:block;margin-bottom:10px}
.si-tete h2{font-size:clamp(24px,3.2vw,34px)}
.si-tete h2 .script{color:var(--framboise)}
.si-champs{display:grid;grid-template-columns:1fr .5fr 1.2fr 1fr 1fr;gap:12px;max-width:960px;margin:0 auto 24px}
.si-fl{display:flex;flex-direction:column;gap:6px}
.si-fl label{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--nuit-l)}
.si-fl input,.si-fl select{border:1px solid var(--ligne);border-radius:12px;background:#fff;
  padding:10px 13px;font-family:Jost,sans-serif;font-weight:400;font-size:15px;color:var(--nuit)}
.si-fl input:focus,.si-fl select:focus{outline:0;border-color:var(--or)}
.si-rangee{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:16px;align-items:stretch}
.si-sup{margin:0;background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:12px;text-align:center;
  display:flex;flex-direction:column;justify-content:flex-end}
.si-mention{text-align:center;font-size:11.5px;color:var(--nuit-l);font-style:italic;margin:14px auto 0;max-width:560px}
.si-sup canvas{width:100%;height:auto;display:block;border-radius:12px}
.si-sup b{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:16px;display:block;margin-top:10px;color:var(--nuit)}
.si-sup span{font-size:11px;color:var(--nuit-l);line-height:1.5;display:block;margin-top:4px;font-style:italic}
.si-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media(max-width:860px){
  .simu{padding:12px 10px}
  .si-in{padding:24px 14px}
  .si-champs{grid-template-columns:1fr 1fr;max-width:none}
  .si-champs .si-fl:nth-child(n+3){grid-column:1/-1}
  .si-rangee{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .si-sup{flex:0 0 80%;scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){.si-in{animation:none}}

/* ============ configurateur « sur l'objet » ============ */
.si-modes{display:flex;gap:0;justify-content:center;margin:0 0 18px}
.si-mode{border:1px solid var(--ligne);background:rgba(255,255,255,.75);padding:9px 22px;
  font-family:inherit;font-size:13px;letter-spacing:.05em;cursor:pointer;transition:.2s;color:var(--nuit)}
.si-mode:first-child{border-radius:99px 0 0 99px}
.si-mode:last-child{border-radius:0 99px 99px 0;border-left:0}
.si-mode.on{background:var(--framboise);border-color:var(--framboise);color:#fff}
.si-in[data-mode="objet"] #si-rangee,.si-in[data-mode="objet"] #si-actions-plat,
.si-in[data-mode="3d"] #si-rangee,.si-in[data-mode="3d"] #si-actions-plat{display:none}
.si-in:not([data-mode="objet"]) #ob-zone{display:none}
.si-in:not([data-mode="3d"]) #s3d-zone{display:none}
.s3d-scene{min-height:320px;display:flex;align-items:center;justify-content:center}
.s3d-scene canvas{max-width:100%}
.s3d-attente{color:var(--nuit-l);font-size:13px;margin:0}
#si-mode-3d[hidden]{display:none}
.ob-controles{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.ob-controles select{border:1px solid var(--ligne);border-radius:99px;background:#fff;
  padding:8px 13px;font-family:Jost,sans-serif;font-weight:400;font-size:12.5px;color:var(--nuit)}
.ob-controles select:focus{outline:0;border-color:var(--or)}
.ob-scene{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:10px;text-align:center}
.ob-scene canvas{width:100%;max-width:760px;height:auto;display:block;margin:0 auto;border-radius:12px}
.ob-prod{text-align:center;font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--nuit);
  margin:12px 0 0;line-height:1.5}
.ob-mention{text-align:center;font-size:11.5px;color:var(--nuit-l);font-style:italic;margin:6px 0 0}
.env .vg{width:46px;height:60px;border-radius:9px;object-fit:cover;border:1px solid var(--ligne);flex:0 0 auto}
.env .txt .pv{display:block;font-size:11.5px;color:var(--or);font-style:normal;margin-top:2px}
@media(max-width:860px){.ob-controles select{font-size:12px;padding:7px 10px}}

/* ============ fiche produit détaillée ============ */
.cr{cursor:pointer}
.cr:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.fiche{position:fixed;inset:0;z-index:140;display:none;overflow-y:auto;
  background:rgba(56,49,74,.55);backdrop-filter:blur(6px);padding:30px 16px}
.fiche.on{display:block}
.fi-in{max-width:1000px;margin:0 auto;position:relative;border-radius:var(--r);
  padding:30px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;
  background:var(--papier-c);border:1px solid var(--filet);
  box-shadow:0 30px 80px rgba(56,49,74,.32);
  animation:appar .5s cubic-bezier(.2,.7,.25,1)}
.fi-fx{position:absolute;top:14px;right:14px;border:0;background:rgba(255,255,255,.85);
  border-radius:50%;width:38px;height:38px;font-size:20px;line-height:1;color:var(--nuit-l);
  z-index:3;transition:.2s}
.fi-fx:hover{color:var(--nuit);box-shadow:0 4px 14px rgba(120,100,130,.2)}

.fi-scene{aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--ligne);
  background:linear-gradient(150deg,#fbeaf0,#efe6f8);display:flex;align-items:center;
  justify-content:center;position:relative}
.fi-scene.attente{background:#faf5ec !important}
.fi-scene img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}
.fi-scene .ic{font-size:60px;filter:drop-shadow(0 6px 14px rgba(120,100,130,.22))}
.fi-scene .att{position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.85);
  border-radius:99px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;color:var(--nuit-l)}
.fi-vign{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.fi-vign button{width:62px;height:62px;padding:0;border:1px solid var(--ligne);border-radius:12px;
  overflow:hidden;background:#fff;transition:.2s}
.fi-vign button img{width:100%;height:100%;object-fit:cover;display:block}
.fi-vign button.on{border-color:var(--or);box-shadow:0 0 0 3px rgba(201,168,108,.2)}
.fi-vign button:hover{border-color:var(--or-l)}

.fi-cat{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--or);margin-bottom:9px}
.fi-in h2{font-size:clamp(27px,3.4vw,36px);line-height:1.15}
.fi-desc{font-size:15px;color:var(--nuit-l);line-height:1.7;margin:14px 0 0}
.fi-prix{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne)}
.fi-prix .pr{font-size:27px}
.fi-mentions{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.fi-mentions .m{font-size:12.5px;color:var(--or)}
.fi-mentions .m-min{color:var(--nuit-l)}
.fi-mentions .m-remise{align-self:flex-start;background:var(--framboise);color:#fff;
  border-radius:99px;padding:4px 13px;font-size:11.5px;letter-spacing:.06em}
.fi-themes-b{margin-top:20px}
.fi-lab{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--nuit-l);
  display:block;margin-bottom:9px}
.fi-themes{display:flex;gap:7px;flex-wrap:wrap}
.fi-themes .pastille{cursor:default;font-size:12px;padding:6px 13px}
.fi-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--ligne)}
.fi-qt{background:#fff}
.fi-qt button{width:36px;height:36px;font-size:17px}
.fi-qt input{width:56px;font-size:18px}
.fi-actions .bt-p{flex:1;min-width:190px;text-align:center}
.fi-rappel{font-size:11.5px;color:var(--nuit-l);margin:12px 0 0;line-height:1.5}

/* photo en plein écran */
.fi-zoom{position:fixed;inset:0;z-index:150;display:none;cursor:zoom-out;
  background:rgba(40,34,52,.88);backdrop-filter:blur(4px);padding:24px}
.fi-zoom.on{display:flex;align-items:center;justify-content:center}
.fi-zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}

@media(max-width:860px){
  /* feuille montante : photo en haut, bouton d'ajout toujours atteignable */
  .fiche{padding:0}
  .fi-in{grid-template-columns:1fr;gap:20px;max-width:none;min-height:100vh;
    border-radius:22px 22px 0 0;margin-top:5vh;padding:22px 18px 0;
    animation:monte .42s cubic-bezier(.2,.7,.25,1)}
  .fi-scene{aspect-ratio:4/3}
  .fi-vign button{width:54px;height:54px}
  .fi-actions{position:sticky;bottom:0;margin-top:20px;padding:14px 0 16px;
    background:linear-gradient(180deg,rgba(253,243,246,0),#f8f1f8 22%);z-index:2}
  .fi-actions .bt-p{min-width:0}
  .fi-rappel{padding-bottom:20px}
}
@keyframes monte{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
  .fi-in{animation:none}
}

/* ============ galerie des réalisations (« boîte à idées ») ============ */
.galerie{position:fixed;inset:0;z-index:130;display:none;overflow-y:auto;
  background:rgba(56,49,74,.55);backdrop-filter:blur(6px);padding:34px 16px}
.galerie.on{display:block}
.gal-in{max-width:1020px;margin:0 auto;position:relative;border-radius:var(--r);
  padding:34px 30px 38px;box-shadow:0 30px 80px rgba(56,49,74,.32);
  background:var(--papier-c);border:1px solid var(--filet);
  animation:appar .5s cubic-bezier(.2,.7,.25,1)}
.gal-fx{position:absolute;top:16px;right:16px;border:0;background:rgba(255,255,255,.8);
  border-radius:50%;width:38px;height:38px;font-size:20px;line-height:1;color:var(--nuit-l);
  z-index:2;transition:.2s}
.gal-fx:hover{color:var(--nuit);box-shadow:0 4px 14px rgba(120,100,130,.2)}
.gal-vue{display:none}
.gal-vue.on{display:block}
.gal-tete{text-align:center;margin-bottom:26px}
.gal-tete .k{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--or);
  display:block;margin-bottom:12px}
.gal-tete h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15}
.gal-tete h2 .script{color:var(--framboise);font-size:1.2em}
.gal-tete p{color:var(--nuit-l);font-size:14.5px;margin:10px 0 0}
.gal-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-v{padding:0;border:1px solid var(--ligne);border-radius:18px;overflow:hidden;
  background:#fff;text-align:left;display:block;transition:.3s}
.gal-v:hover{transform:translateY(-4px);border-color:var(--or-l);
  box-shadow:0 14px 34px rgba(120,100,130,.16)}
.gal-v img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal-v:hover img{transform:scale(1.05)}
.gal-v .lg{display:block;padding:11px 14px 13px;font-family:'Cormorant Garamond',serif;
  font-size:17px;line-height:1.25;color:var(--nuit)}
.gal-retour{background:none;border:0;font-size:13px;color:var(--nuit-l);padding:2px 0 14px;
  text-decoration:underline;text-underline-offset:4px}
.gal-retour:hover{color:var(--nuit)}
.gal-scene{position:relative;display:flex;align-items:center;justify-content:center}
.gal-scene img{max-width:100%;max-height:62vh;border-radius:18px;display:block;
  box-shadow:0 18px 46px rgba(120,100,130,.22)}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--ligne);
  background:rgba(255,255,255,.86);border-radius:50%;width:44px;height:44px;font-size:24px;
  line-height:1;color:var(--nuit);backdrop-filter:blur(6px);transition:.2s}
.gal-nav:hover{border-color:var(--or);color:var(--or)}
.gal-nav.prec{left:-6px}
.gal-nav.suiv{right:-6px}
.gal-legende{text-align:center;margin-top:22px}
.gal-legende h3{font-size:25px;line-height:1.2}
.gal-legende p{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or);margin:7px 0 18px}
@media(max-width:860px){
  .galerie{padding:16px 10px}
  .gal-in{padding:26px 16px 30px}
  .gal-grille{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal-scene img{max-height:48vh}
  .gal-nav{width:38px;height:38px;font-size:20px}
  .gal-nav.prec{left:0}
  .gal-nav.suiv{right:0}
}
@media(prefers-reduced-motion:reduce){
  .gal-in{animation:none}
  .gal-v,.gal-v img{transition:none}
  .gal-v:hover{transform:none}
  .gal-v:hover img{transform:none}
}

/* ============ tri par pertinence : badge + séparateur ============ */
.cr .pour-theme{margin-left:9px;color:var(--framboise);letter-spacing:.14em}
.sep-decouvrir{grid-column:1/-1;display:flex;align-items:center;gap:16px;
  font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--nuit-l);
  margin:20px 0 2px}
.sep-decouvrir::before,.sep-decouvrir::after{content:'';flex:1;height:1px;background:var(--ligne)}

/* ============ diaporama produit (cartes multi-photos) ============ */
.vis .dia{position:absolute;inset:0;opacity:0;
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
.vis .dia.on{opacity:1}
.dia-pts{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:2}
.dia-pts button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 4px rgba(75,68,89,.4);transition:.25s}
.dia-pts button.on{background:#fff;transform:scale(1.3)}
@media(prefers-reduced-motion:reduce){.vis .dia{transition:none}}

/* ============ fil instagram — minimaliste (section optionnelle, activée via js/data.js) ============ */
.insta-min{text-align:center}
.insta-min .k{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--or);
  display:block;margin-bottom:28px}
.insta-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:760px;margin:0 auto}
.insta-g a{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--ligne)}
.insta-g img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.insta-g a:hover img{transform:scale(1.05)}
.insta-suivre{margin-top:24px}
.insta-suivre a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--nuit-l);
  text-decoration:none;border-bottom:1px solid var(--or-l);padding-bottom:2px;transition:.2s}
.insta-suivre a:hover{color:var(--or);border-color:var(--or)}
@media(max-width:860px){.insta-g{grid-template-columns:repeat(2,1fr)}}

/* (correctifs Parisienne/étoiles retirés : les titres ne sont plus peints en
   background-clip et le décor flottant a disparu du design system v2) */

/* ── correctif : en-tête sur les petits écrans ──
   Sur un téléphone de 390 px, logo + menu + « Mon carnet » demandaient
   450 px : le bouton du carnet sortait de l'écran et la page glissait
   latéralement. On resserre l'en-tête sans changer sa composition.   */
@media(max-width:430px){
  .wrap{padding:0 16px}
  .hd{gap:10px}
  .logo .m{font-size:11px;letter-spacing:.34em}
  .logo .c{font-size:25px;margin:-5px 0 -3px}
  .logo .p{font-size:9px;letter-spacing:.36em}
  .burger{padding:8px 11px}
  .carnet{padding:8px 13px;font-size:12px;gap:7px}
  .carnet .n{font-size:14px}
}

/* ── la personnalisation mise en avant : une fiche d'atelier à double filet ── */
#perso-une{padding:var(--e-7) 0 var(--e-6)}
.pu{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,56px);align-items:center;
  background:var(--carte);border:1px solid var(--filet);border-radius:var(--r-s);
  padding:clamp(28px,4vw,46px) clamp(24px,4.5vw,54px);
  box-shadow:var(--ombre-2);position:relative}
.pu::before{content:'';position:absolute;inset:7px;border:1px solid rgba(127,96,38,.16);
  border-radius:calc(var(--r-s) - 4px);pointer-events:none}
.pu-sur{font-size:var(--t-etiquette);letter-spacing:.26em;text-transform:uppercase;color:var(--or);margin:0 0 12px}
.pu h2{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(26px,3.2vw,36px);line-height:1.16;margin:0 0 14px;text-wrap:balance}
.pu h2 .script{color:var(--framboise);font-size:1.18em;padding:.04em .16em .14em}
.pu-p{color:var(--nuit-l);font-size:15.5px;margin:0;max-width:46ch}
.pu-l{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nuit-l);margin:0 0 10px}
.pu-r{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
/* la ligne de carnet, comme au hero : le prénom s'écrit à la plume */
.pu-r input{flex:1;min-width:150px;border:0;border-bottom:1px solid var(--filet);
  border-radius:0;background:none;padding:0 2px 5px;
  font-family:Parisienne,cursive;font-size:clamp(24px,2.6vw,30px);line-height:1.3;
  color:var(--encre);caret-color:var(--framboise);transition:border-color var(--vif)}
.pu-r input::placeholder{color:rgba(47,41,66,.24)}
.pu-r input:focus{outline:none;border-bottom-color:var(--framboise)}
.pu-r .bt-p{white-space:nowrap}
.pu-n{color:var(--nuit-l);font-size:12.5px;margin:12px 0 0;opacity:.85}
@media(max-width:860px){
  #perso-une{padding:52px 0 40px}
  .pu{grid-template-columns:1fr;gap:26px;padding:30px 24px;border-radius:22px}
  .pu-p{max-width:none}
}

/* ── section vidéo ── */
#videos{padding:78px 0}
.vid-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;margin-top:38px}
.vid-g.solo{grid-template-columns:minmax(0,760px);justify-content:center}
.vid-i{margin:0;background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--r-s);overflow:hidden;box-shadow:var(--ombre-1)}
.vid-a{display:block;width:100%;aspect-ratio:16/11;border:0;padding:0;
  background:#efeaf2 center/cover no-repeat;position:relative;cursor:pointer;
  transition:filter .3s}
.vid-a:hover{filter:brightness(1.04)}
.vid-a:focus-visible{outline:2px solid var(--or);outline-offset:-4px}
.vid-a::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,39,57,0) 55%,rgba(43,39,57,.28))}
.vid-p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,251,.94);color:var(--framboise);font-size:24px;padding-left:5px;
  border:1px solid var(--or-l);box-shadow:var(--ombre-2);transition:transform var(--pose) var(--e-ressort)}
.vid-a:hover .vid-p{transform:translate(-50%,-50%) scale(1.07)}
.vid-i video{display:block;width:100%;aspect-ratio:16/11;background:#efeaf2;object-fit:contain}
.vid-i figcaption{padding:18px 22px 20px;display:flex;flex-direction:column;gap:4px}
.vid-i .t{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--nuit)}
.vid-i .s{font-size:13.5px;color:var(--nuit-l)}
@media(max-width:860px){
  #videos{padding:56px 0}
  .vid-g{grid-template-columns:1fr;gap:20px}
  .vid-p{width:62px;height:62px;font-size:20px}
}
@media print{#videos{display:none}}

/* la vidéo produit occupe la même scène que les photos */
#fi-scene video{display:block;width:100%;height:100%;object-fit:contain;background:#f6f2ee}
#fi-vign .vg-v{position:relative}
#fi-vign .vg-v::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(43,39,57,.05),rgba(43,39,57,.32))}
@media(prefers-reduced-motion:reduce){#fi-scene video{animation:none}}

/* ── séquence cinématique au défilement ──
   La scène reste collée à l'écran pendant qu'on fait défiler ; les images
   s'enchaînent au rythme du doigt. Rien ne se télécharge tant que la section
   n'approche pas : les visiteurs qui n'arrivent jamais jusqu'ici ne paient rien. */
#cinema{position:relative;height:420vh;margin:0;padding:0}
.cin-piste{position:sticky;top:0;height:100svh;overflow:hidden}
.cin-cadre{position:absolute;inset:0}
#cin-canvas{display:block;width:100%;height:100%;object-fit:cover;
  background:linear-gradient(160deg,#f3ece4,#efe6ea)}
.cin-voile{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 30% at 50% 18%,rgba(255,252,250,.52) 0%,rgba(255,252,250,0) 100%),
    radial-gradient(130% 70% at 50% 10%,rgba(255,252,250,0) 45%,rgba(255,252,250,.22) 100%)}

/* ── l'invitation à écrire un prénom ── */
.cin-saisie{position:absolute;left:50%;top:min(46svh,calc(50svh - 40px));
  transform:translate(-50%,0);width:min(340px,84vw);text-align:center;
  display:grid;gap:4px;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.25,1)}
.cin-saisie label{font-family:'Jost',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.30em;text-transform:uppercase;color:var(--or)}
.cin-saisie input{width:100%;border:0;border-bottom:1px solid rgba(127,96,38,.45);
  background:transparent;text-align:center;outline:none;
  font-family:Parisienne,cursive;font-size:clamp(34px,5vw,50px);line-height:1.25;
  color:var(--nuit);padding:0 6px 2px;caret-color:var(--framboise)}
.cin-saisie input::placeholder{color:rgba(56,49,74,.26)}
.cin-saisie input:focus{border-bottom-color:var(--framboise)}
.cin-aide{font-family:'Jost',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--nuit-l);opacity:.7}
.cin-saisie.parti{opacity:0;transform:translate(-50%,-14px);pointer-events:none}

.cin-mots{position:absolute;inset:0;display:grid;place-items:start center;
  padding:clamp(48px,8vh,104px) 26px 0;text-align:center;pointer-events:none}
.cin-m{grid-area:1/1;margin:0;max-width:16ch;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(30px,5.2vw,62px);line-height:1.1;color:var(--nuit);
  text-shadow:0 2px 30px rgba(255,252,250,.85), 0 1px 3px rgba(255,252,250,.9);
  opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.25,1)}
.cin-m.on{opacity:1;transform:none}
.cin-m.on .cin-bt{pointer-events:auto}
.cin-bt{display:block;width:max-content;margin:0 auto;font-family:'Jost',sans-serif}
.cin-fin{position:absolute;left:0;right:0;bottom:clamp(52px,10vh,104px);text-align:center;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .6s var(--e-presse)}
.cin-fin.on{opacity:1;transform:none;pointer-events:auto}
/* sous l'enseigne, le bouton porte un reflet d'or discret */
.cin-fin .bt-p{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
  0 10px 26px rgba(168,68,110,.22),0 0 34px rgba(226,198,140,.5)}

/* ── légende d'atelier, en bas à gauche ── */
.cin-leg{position:absolute;left:clamp(20px,4vw,54px);bottom:clamp(30px,6vh,58px);
  display:flex;align-items:baseline;gap:12px;pointer-events:none;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.25,1)}
.cin-leg.on{opacity:1;transform:none}
.cin-leg .n{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.24em;
  color:var(--or);padding-bottom:2px;border-bottom:1px solid rgba(127,96,38,.5)}
.cin-leg .t{font-family:'Jost',sans-serif;font-weight:300;font-size:12px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--nuit-l)}

/* ── passer le film : pour qui vient commander, pas regarder ── */
.cin-passer{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(22px,4.6vh,44px);
  font-family:'Jost',sans-serif;font-weight:300;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--nuit-l);text-decoration:none;
  padding:9px 14px;border:1px solid var(--filet);border-radius:99px;
  background:rgba(255,252,248,.72);
  transition:opacity .4s ease,border-color .2s}
.cin-passer:hover{border-color:var(--or);color:var(--nuit)}
.cin-passer.cache{opacity:0;pointer-events:none}

/* ── jauge de progression ── */
.cin-jauge{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(127,96,38,.13);pointer-events:none}
.cin-jauge i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;
  background:linear-gradient(90deg,#e0c68d,#c2a054,#a8823c)}

@media(max-width:860px){ .cin-m{max-width:13ch} }

/* Sur téléphone, un film vertical (9:16) tourné à part occupe toute la hauteur
   disponible sous l'en-tête ; le texte tient sur deux lignes, en bas, dans une
   zone réservée : rien ne se chevauche, quelle que soit la hauteur de l'écran
   (le canevas recadre l'image, jamais le texte). */
@media(max-width:700px){
  #cinema{height:380vh}
  .cin-piste{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;
    padding:74px 0 16px;background:linear-gradient(170deg,#fbf6f0,#f6eef1)}
  .cin-cadre{position:relative;inset:auto;width:100%;flex:1 1 auto;min-height:0;aspect-ratio:auto;overflow:hidden;
    border-radius:0}
  .cin-mots{position:relative;inset:auto;flex:none;height:auto;min-height:calc(2.3em + 8px);padding:0 22px 58px;
    display:grid;place-items:start center}
  .cin-m{font-size:clamp(20px,5.9vw,27px);line-height:1.15;max-width:22ch;text-shadow:none;text-align:center}
  .cin-bt{margin-top:0}
  .cin-saisie{position:absolute;left:50%;top:calc(74px + 38svh);transform:translate(-50%,-50%);
    background:rgba(255,252,250,.9);padding:16px 18px 14px;border-radius:20px;
    box-shadow:0 12px 40px rgba(80,60,90,.14)}
  .cin-saisie.parti{transform:translate(-50%,calc(-50% - 12px))}
  .cin-leg{display:none}
  /* le lien « passer » vit en haut à droite de l'image, jamais sur le texte */
  .cin-passer{left:auto;right:12px;top:84px;bottom:auto;transform:none;font-size:10.5px;padding:7px 11px;
    background:rgba(255,252,250,.78);backdrop-filter:blur(8px)}
  /* le bouton final prend la place du texte, en bas */
  .cin-fin{position:absolute;left:0;right:0;bottom:22px;top:auto;height:auto;opacity:0;transform:translateY(8px);
    pointer-events:none;transition:opacity .4s ease,transform .4s ease}
  .cin-fin.on{opacity:1;transform:none;pointer-events:auto}
  .cin-jauge{bottom:0}
}

@media(prefers-reduced-motion:reduce){
  #cinema{height:auto}
  .cin-piste{position:relative;height:76svh}
  .cin-m{opacity:1;transform:none;transition:none}
  .cin-m[data-cin="0"],.cin-m[data-cin="1"],.cin-m[data-cin="2"],.cin-m[data-cin="3"]{display:none}
  .cin-saisie,.cin-leg,.cin-jauge,.cin-passer{display:none}
  .cin-fin{position:absolute;left:0;right:0;top:auto;bottom:9%;opacity:1;transform:none;pointer-events:auto}
}
@media print{#cinema{display:none}}


/* ═══ carnet omniprésent (mobile) : la bulle qui gobe les produits ═══ */
.carnet-bulle{display:none;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:85;width:56px;height:56px;border:0;border-radius:50%;
  background:var(--framboise);color:#fff;place-items:center;
  box-shadow:0 10px 28px rgba(142,58,95,.38);
  transition:transform var(--vif) var(--e-ressort),box-shadow var(--pose)}
.carnet-bulle:active{transform:scale(.9)}
.carnet-bulle .n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;
  border-radius:99px;background:var(--papier-c);border:1px solid var(--or-l);color:var(--framboise);
  font-family:'Cormorant Garamond',serif;font-size:13.5px;display:grid;place-items:center;line-height:1}
@media(max-width:860px){
  .carnet-bulle{display:grid}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* la photo du produit en plein vol vers le carnet */
.vol-photo{position:fixed;z-index:120;pointer-events:none;border-radius:10px;
  background-size:cover;background-position:center;box-shadow:var(--ombre-2);
  will-change:transform,opacity}
/* texte réservé aux lecteurs d'écran */
.sr-seul{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}