/* Elevora CRM — celebrations.css
   Les confirmations animées de js/59-celebrations.js (25/09/2026) et leur grand format
   (js/59b-celebrations-gsap.js). Refonte du 26/09/2026 (Célian : « ça fait un peu AI slop ») : plus
   de pictogramme dans un carré pastel, plus de rayons ni de confettis — des objets en papier, avec
   leur matière et leur ombre, et la couleur de la nature réservée aux accents (l'encre, le tampon,
   la pastille).

   Aucune couleur nouvelle : tout est jeton de css/elevora.css. La couleur d'une nature suit le code
   couleur des documents de la fiche client (devis bleu, contrat vert, facture ambre, proposition
   rouge — css/fiche-client.css) ; les autres natures prennent les teintes restantes. Les matières
   (--cb-papier, --cb-appareil…) sont des jetons de thème posés ici, pour les deux thèmes. Les ombres
   sont des noirs translucides superposés (rgba), comme ailleurs dans le CRM. Le texte reste en
   --text / --text2, vérifiés à 4,5:1 dans les deux thèmes. Le dessin est décoratif (aria-hidden) :
   ce qu'il dit est annoncé en toutes lettres.

   Mouvement : seulement transform, opacity et le décalage du trait (stroke-dashoffset). Mouvement
   réduit : .celeb-calme (posée par le script) et la media query coupent toute animation ; chaque
   élément est dessiné dans son état final, la carte s'affiche immobile. */

/* ── Jetons : la nature, la matière ───────────────────────────────────────────────────────── */
.celeb{--cb-c:var(--accent);--cb-bg:var(--glow);--cb-fill:var(--accent-fill);--cb-on:var(--on-fill);
  /* Les objets gardent leur matière dans les deux thèmes, comme de vrais objets : un papier clair
     (blanc cassé), une encre sombre. En sombre, le papier est --text (le blanc cassé du thème) et
     l'encre les fonds sombres ; en clair, le papier est --bg2 (blanc) et l'encre les textes. */
  --cb-papier:var(--text);--cb-papier-2:var(--text2);--cb-trait:var(--bg4);--cb-trait-fort:var(--bg2);
  --cb-appareil:var(--text3);--cb-carton:var(--bg4);--cb-metal:var(--text3);
  --cb-bord:var(--border);--cb-bord-fort:var(--text3);
  --cb-o1:rgba(0,0,0,.3);--cb-o2:rgba(0,0,0,.42);--cb-noir:rgba(0,0,0,.6);--cb-reflet:rgba(255,255,255,.5);--cb-brillance:rgba(255,255,255,.6);
  --cb-ombre:0 1px 1px var(--cb-o1),0 3px 6px var(--cb-o1),0 10px 20px var(--cb-o2),0 24px 48px var(--cb-o2)}
body.light .celeb{--cb-papier:var(--bg2);--cb-papier-2:var(--bg3);--cb-trait:var(--text3);--cb-trait-fort:var(--text2);
  --cb-appareil:var(--text2);--cb-carton:var(--bg4);--cb-bord:var(--border2);
  --cb-o1:rgba(26,26,46,.07);--cb-o2:rgba(26,26,46,.1);--cb-reflet:rgba(255,255,255,.7)}
.celeb[data-nature="client"]{--cb-c:var(--accent);--cb-bg:var(--glow);--cb-fill:var(--accent-fill)}
.celeb[data-nature="prospect"]{--cb-c:var(--rose);--cb-bg:var(--rose-bg);--cb-fill:var(--rose)}
.celeb[data-nature="agent"]{--cb-c:var(--pink);--cb-bg:var(--pink-bg);--cb-fill:var(--pink)}
.celeb[data-nature="devis"]{--cb-c:var(--blue);--cb-bg:var(--blue-bg);--cb-fill:var(--accent-fill)}
.celeb[data-nature="contrat"]{--cb-c:var(--green);--cb-bg:var(--green-bg);--cb-fill:var(--green-fill)}
.celeb[data-nature="facture"]{--cb-c:var(--amber);--cb-bg:var(--amber-bg);--cb-fill:var(--amber-fill);--cb-on:var(--amber-on)}
.celeb[data-nature="proposition"]{--cb-c:var(--red);--cb-bg:var(--red-bg);--cb-fill:var(--red-fill)}
.celeb[data-nature="envoi"]{--cb-c:var(--blue);--cb-bg:var(--blue-bg);--cb-fill:var(--accent-fill)}
.celeb[data-nature="tache"]{--cb-c:var(--violet);--cb-bg:var(--violet-bg);--cb-fill:var(--violet-fill)}
.celeb[data-nature="releve"]{--cb-c:var(--amber);--cb-bg:var(--amber-bg);--cb-fill:var(--amber-fill);--cb-on:var(--amber-on)}
.celeb[data-nature="rendezvous"]{--cb-c:var(--pink);--cb-bg:var(--pink-bg);--cb-fill:var(--pink)}

/* ── La couche et la carte ────────────────────────────────────────────────────────────────── */
#celebration{position:fixed;left:0;right:0;bottom:24px;z-index:100000;display:flex;justify-content:center;padding:0 16px;pointer-events:none;--cb-dy:20px}
#celebration:empty{display:none}
.celeb-carte{position:relative;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:14px;width:min(400px,100%);
  padding:10px 20px 10px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.14);font-family:var(--font);transform-origin:50% 100%;
  animation:cbCarteEntre .5s cubic-bezier(.16,1,.3,1) both}
/* L'objet se pose directement sur la carte, sans vignette derrière lui : une ombre portée suffit. */
.celeb-scene{position:relative;flex:0 0 76px;height:76px;display:grid;place-items:center;color:var(--cb-c)}
.celeb-scene svg{position:relative;width:60px;height:60px;overflow:visible;filter:drop-shadow(0 1px 1px var(--cb-o1)) drop-shadow(0 4px 5px var(--cb-o1))}
.celeb-txt{position:relative;min-width:0;display:flex;flex-direction:column;gap:2px}
.celeb-titre{margin:0;font:700 15px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text);animation:cbTexte .5s .15s cubic-bezier(.16,1,.3,1) both}
.celeb-detail{margin:0;font-size:13px;line-height:1.4;color:var(--text2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  animation:cbTexte .5s .25s cubic-bezier(.16,1,.3,1) both}
#celebration.celeb-sortie .celeb-carte{animation:cbCarteSort .24s cubic-bezier(.4,0,1,1) both}
@keyframes cbCarteEntre{from{opacity:0;transform:translateY(var(--cb-dy))}to{opacity:1;transform:translateY(0)}}
@keyframes cbCarteSort{to{opacity:0;transform:translateY(calc(var(--cb-dy) / 2))}}
@keyframes cbTexte{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Les miniatures de la carte (CELEB_SCENES, js/59) ─────────────────────────────────────────
   Les mêmes objets que le grand format, dessinés à l'échelle de 64 unités. Elles jouent seules
   sans GSAP ; en grand format, elles apparaissent figées à la fin du vol. */
.celeb svg .cb-t{stroke-dasharray:1 1;stroke-dashoffset:0;animation:cbTrace var(--d,.5s) var(--t,0s) cubic-bezier(.65,0,.35,1) both}
@keyframes cbTrace{0%{stroke-dashoffset:1;opacity:0}2%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.celeb svg .cb-p{transform-box:fill-box;transform-origin:center;animation:cbPop var(--d,.35s) var(--t,0s) cubic-bezier(.2,.8,.2,1) both}
@keyframes cbPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.celeb svg .cb-f{animation:cbFondu var(--d,.3s) var(--t,0s) ease-out both}
@keyframes cbFondu{from{opacity:0}}
.celeb svg .cb-pose{animation:cbPose .5s var(--t,0s) cubic-bezier(.16,1,.3,1) both}
@keyframes cbPose{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Matières et traits. */
.celeb svg .cb-papier{fill:var(--cb-papier);stroke:var(--cb-bord);stroke-width:.8}
.celeb svg .cb-papier-2{fill:var(--cb-papier-2);stroke:var(--cb-bord);stroke-width:.8}
.celeb svg .cb-carton{fill:var(--cb-carton);stroke:var(--cb-bord);stroke-width:.8}
.celeb svg .cb-ligne{stroke:var(--cb-trait);stroke-opacity:.55;stroke-width:1.5}
.celeb svg .cb-ligne-f{stroke:var(--cb-trait-fort);stroke-width:2}
.celeb svg .cb-filet{stroke:var(--cb-trait);stroke-opacity:.4;stroke-width:.6}
.celeb svg .cb-pointille{stroke:var(--cb-trait);stroke-opacity:.45;stroke-width:.5;stroke-dasharray:.6 1}
.celeb svg .cb-encre{stroke:currentColor;stroke-width:1.3}
.celeb svg .cb-encre-fin{stroke:currentColor;stroke-width:.7}
.celeb svg .cb-plein{fill:currentColor;stroke:none}
.celeb svg .cb-plein-fonce{fill:var(--cb-fill);stroke:none}
.celeb svg .cb-teinte{fill:var(--cb-bg)}
.celeb svg .cb-teinte-pleine{fill:currentColor;fill-opacity:.18;stroke:none}
.celeb svg .cb-sur-plein{stroke:var(--cb-on);stroke-opacity:.8;stroke-width:1.1}
.celeb svg .cb-metal{fill:var(--cb-metal);stroke:none}
.celeb svg .cb-cadre{fill:none;stroke:none}
.celeb svg .cb-noir{fill:var(--cb-noir);stroke:none}

/* Générique : une coche nette. */
.celeb svg .cb-coche{stroke:currentColor;stroke-width:5.2}

/* Client : la carte de visite se retourne (de dos, puis de face). */
.celeb .cv-dos,.celeb .cv-face{transform-box:view-box;transform-origin:32px 32px}
.celeb .cv-dos{opacity:0;animation:cbCvDos .4s .15s cubic-bezier(.55,0,.8,.45) both}
@keyframes cbCvDos{0%{opacity:1;transform:scaleX(1)}96%{opacity:1;transform:scaleX(0)}100%{opacity:0;transform:scaleX(0)}}
.celeb .cv-face{animation:cbCvFace .5s .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes cbCvFace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.celeb svg .cb-bande{stroke:currentColor;stroke-width:2;stroke-linecap:butt}
.celeb svg .cb-cadre-dos{fill:none;stroke:var(--cb-on);stroke-opacity:.35;stroke-width:.5}

/* Prospect : le plan, la punaise qui tombe et se plante, un écho. */
.celeb svg .cb-rue{stroke:var(--cb-trait);stroke-opacity:.28;stroke-width:1.4}
.celeb svg .cb-riviere{stroke:var(--blue);stroke-opacity:.32;stroke-width:2.8}
.celeb svg .cb-parc{fill:var(--green);fill-opacity:.18;stroke:none}
.celeb svg .cb-pli{stroke:var(--cb-trait);stroke-opacity:.2;stroke-width:.6}
.celeb svg .cb-aiguille{stroke:var(--cb-metal);stroke-width:.9}
.celeb svg .cb-brillance{fill:var(--cb-brillance);stroke:none}
.celeb svg .cb-ombre-pin{fill:var(--cb-o2);stroke:none}
.celeb .pr-plan{animation:cbPose .5s cubic-bezier(.16,1,.3,1) both}
.celeb .pr-pin{transform-box:view-box;transform-origin:38.9px 30px;animation:cbPunaise .6s .55s both}
@keyframes cbPunaise{0%{opacity:0;transform:translateY(-16px) scale(1.2);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  55%{opacity:1;transform:translateY(0) scale(1.06,.9);animation-timing-function:ease-out}100%{opacity:1;transform:none}}
.celeb .pr-ombre{transform-box:fill-box;transform-origin:0 50%;animation:cbOmbrePin .6s .55s both}
@keyframes cbOmbrePin{0%{opacity:0;transform:translateX(7px) scale(1.8);animation-timing-function:cubic-bezier(.55,0,1,.45)}55%,100%{opacity:1;transform:none}}
.celeb svg .cb-echo{fill:none;stroke:currentColor;stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center;animation:cbEcho .8s var(--t,0s) cubic-bezier(.2,.8,.3,1) forwards}
@keyframes cbEcho{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(3)}}

/* Agent : le badge au bout de son cordon, qui se balance et s'arrête. */
.celeb svg .cb-ruban{stroke:currentColor;stroke-width:2.2;stroke-linecap:butt}
.celeb svg .cb-trou{fill:var(--bg);stroke:none}
.celeb .ag-tout{transform-box:view-box;transform-origin:32px -30px;animation:cbPendule 1.5s .05s ease-in-out both}
@keyframes cbPendule{0%{opacity:0;transform:translateY(-30px) rotate(14deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  22%{opacity:1;transform:translateY(1px) rotate(9deg);animation-timing-function:ease-out}38%{transform:translateY(0) rotate(-7deg)}
  56%{transform:rotate(4deg)}72%{transform:rotate(-2deg)}86%{transform:rotate(.8deg)}100%{opacity:1;transform:none}}

/* Devis : la planchette, la pince qui claque, le total au surligneur. */
.celeb .dv-tout{animation:cbPose .5s cubic-bezier(.16,1,.3,1) both}
.celeb .dv-feuille{animation:cbGlisse .4s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes cbGlisse{from{opacity:0;transform:translateY(-10px)}}
.celeb .dv-pince{transform-box:fill-box;transform-origin:50% 0;animation:cbPince .5s .55s both}
@keyframes cbPince{0%{transform:scaleY(1.45)}40%{transform:scaleY(1.65);animation-timing-function:cubic-bezier(.6,0,1,.5)}55%{transform:scaleY(.92)}75%{transform:scaleY(1.03)}100%{transform:none}}
.celeb svg .dv-surligneur{fill:currentColor;fill-opacity:.3;stroke:none;transform-box:fill-box;transform-origin:0 50%;animation:cbSurligne .35s 1.15s cubic-bezier(.65,0,.35,1) both}
@keyframes cbSurligne{from{transform:scaleX(0)}}

/* Contrat : la feuille se pose, les clauses et la signature s'écrivent, le tampon frappe. */
.celeb .ct-feuille{transform-box:view-box;transform-origin:32px 32px;animation:cbPoseRot .55s cubic-bezier(.16,1,.3,1) both}
@keyframes cbPoseRot{from{opacity:0;transform:translate(-4px,8px) rotate(-6deg)}}
.celeb .ct-empreinte{opacity:.92;transform-box:fill-box;transform-origin:center;animation:cbFrappe .45s 1.2s both}
@keyframes cbFrappe{0%{opacity:0;transform:scale(1.8);animation-timing-function:cubic-bezier(.6,0,1,.5)}45%{opacity:1;transform:scale(.94)}100%{opacity:.92;transform:none}}

/* Facture : le ticket sort de la fente par à-coups, le total se souligne. */
.celeb .fc-fente{opacity:0;animation:cbFente 1.3s both}
@keyframes cbFente{0%,75%{opacity:1}100%{opacity:0}}
.celeb svg .cb-fente{stroke:var(--cb-noir);stroke-width:2}
.celeb svg .cb-point-logo{fill:var(--cb-trait);fill-opacity:.35;stroke:none}
.celeb svg .cb-code{stroke:var(--cb-trait);stroke-opacity:.6;stroke-width:.7;stroke-linecap:butt}
.celeb .fc-recu{animation:cbTicket .9s .15s both}
@keyframes cbTicket{0%{transform:translateY(-52px);animation-timing-function:ease-out}18%,28%{transform:translateY(-39px);animation-timing-function:ease-out}
  46%,56%{transform:translateY(-26px);animation-timing-function:ease-out}74%,82%{transform:translateY(-13px);animation-timing-function:ease-out}100%{transform:none}}

/* Proposition : les diapositives s'ouvrent en éventail, la courbe grimpe. */
.celeb .pp-tout{animation:cbPose .5s cubic-bezier(.16,1,.3,1) both}
.celeb .pp-g,.celeb .pp-d{transform-box:view-box;transform-origin:32px 69.5px}
.celeb .pp-g{transform:translateX(-2.7px) rotate(-12deg);animation:cbEventail .55s .45s cubic-bezier(.16,1,.3,1) both}
.celeb .pp-d{transform:translateX(2.7px) rotate(12deg);animation:cbEventail .55s .5s cubic-bezier(.16,1,.3,1) both}
@keyframes cbEventail{from{transform:none}}
.celeb svg .cb-aire{fill:currentColor;fill-opacity:.14;stroke:none}

/* Envoi : l'avion de papier suit sa courbe, nez devant, et laisse sa traîne. */
.celeb svg .cb-traine{stroke:currentColor;stroke-opacity:.5;stroke-width:1}
.celeb svg .cb-avion{fill:var(--cb-papier);stroke:var(--cb-bord-fort);stroke-width:.6}
.celeb svg .cb-avion-2{fill:var(--cb-papier-2);stroke:var(--cb-bord-fort);stroke-width:.6}
.celeb .ev-avion{transform-box:view-box;transform-origin:0 0;transform:translate(42px,27px) rotate(-16deg);animation:cbAvion 1s .1s cubic-bezier(.3,.6,.4,1) both}
@keyframes cbAvion{0%{opacity:0;transform:translate(2px,60px) rotate(-60deg) scale(.8)}10%{opacity:1}45%{transform:translate(20px,40px) rotate(-42deg)}
  75%{transform:translate(33px,30px) rotate(-22deg)}100%{opacity:1;transform:translate(42px,27px) rotate(-16deg)}}

/* Tâche : les lignes descendent, la nouvelle s'écrit à l'encre, sa date se pose. */
.celeb .tc-tout{animation:cbPose .5s cubic-bezier(.16,1,.3,1) both}
.celeb .tc-lignes{animation:cbDescend .45s .3s cubic-bezier(.65,0,.35,1) both}
@keyframes cbDescend{from{transform:translateY(-7.9px)}}
.celeb svg .cb-case{stroke:var(--cb-trait);stroke-opacity:.6;stroke-width:.6}
.celeb svg .cb-case-faite{fill:var(--cb-trait);fill-opacity:.15}
.celeb svg .cb-ecrit{stroke:var(--cb-trait);stroke-opacity:.6;stroke-width:.5}
.celeb svg .cb-ecrit-fait{stroke-opacity:.3}
.celeb svg .cb-plume{stroke-width:.6}

/* Relevé : le cadran, l'aiguille qui dépasse d'un rien et se stabilise. */
.celeb .rl-tout{animation:cbPose .5s cubic-bezier(.16,1,.3,1) both}
.celeb svg .cb-graduation{stroke:var(--cb-trait);stroke-opacity:.5;stroke-width:.6}
.celeb svg .cb-piste{stroke:var(--cb-trait);stroke-opacity:.18;stroke-width:3}
.celeb svg .rl-arc{stroke:currentColor;stroke-width:3;stroke-dasharray:.72 1;stroke-dashoffset:0;animation:cbArc 1s .45s cubic-bezier(.3,.7,.25,1) both}
@keyframes cbArc{from{stroke-dashoffset:.72}}
.celeb svg .cb-aiguille-trait{stroke:var(--cb-trait-fort);stroke-width:1}
.celeb .rl-aiguille{transform-box:view-box;transform-origin:32px 32px;transform:rotate(322.8deg);animation:cbAiguille 1.1s .45s both}
@keyframes cbAiguille{0%{transform:rotate(150deg);animation-timing-function:cubic-bezier(.3,.6,.4,1)}55%{transform:rotate(334deg);animation-timing-function:ease-in-out}
  78%{transform:rotate(318deg)}100%{transform:rotate(322.8deg)}}

/* Rendez-vous : la page du dessus bascule par-dessus la reliure, un jour s'entoure. */
.celeb .rv-tout{animation:cbPose .5s cubic-bezier(.16,1,.3,1) both}
.celeb svg .cb-jour{fill:var(--cb-trait);fill-opacity:.55;stroke:none}
.celeb svg .cb-jour-leger{fill-opacity:.22}
.celeb .rv-page{opacity:0;transform-box:view-box;transform-origin:32px 9px;animation:cbPage .6s .4s cubic-bezier(.5,0,.5,1) both}
@keyframes cbPage{0%{opacity:1;transform:none}15%{opacity:1;transform:scaleY(.95)}70%{opacity:1;transform:scaleY(.08) skewX(-6deg)}100%{opacity:0;transform:scaleY(0)}}

/* ── Mouvement réduit : la carte et son dessin, immobiles, dans leur état final ───────────── */
.celeb-calme *,.celeb-calme *::before,.celeb-calme *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  #celebration *,#celebration *::before,#celebration *::after{animation:none!important;transition:none!important}
}

/* ── Téléphone : en haut de l'écran, les notifications occupant le bas ─────────────────────── */
@media (max-width:560px){
  #celebration{bottom:auto;top:calc(10px + env(safe-area-inset-top,0px));--cb-dy:-20px}
  .celeb-carte{gap:10px;padding:8px 14px 8px 8px;border-radius:14px}
  .celeb-scene{flex-basis:64px;height:64px}
  .celeb-scene svg{width:54px;height:54px}
}

/* ══ Grand format (js/59b-celebrations-gsap.js) ════════════════════════════════════════════════
   La scène en grand au centre de l'écran, animée par GSAP, puis rangée dans la carte ci-dessus.
   Transparente aux clics de bout en bout (pointer-events:none) : on continue de travailler
   dessous. Aucun fond derrière la scène (Célian, 25/09/2026 : « qu'on voie derrière ce qui se
   passe ») : les objets portent leur ombre, le titre et le détail un liseré de la couleur du fond
   du thème, qui les garde lisibles au-dessus de n'importe quel écran.
   États de départ : GSAP les pose (fromTo) ; ceux qu'il ne pose pas sont ici. */
.celeb-gf{position:fixed;inset:0;z-index:100001;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  font-family:var(--font);contain:layout paint;color:var(--cb-c)}
.celeb-gf .gf-vol{position:relative;flex:0 0 auto;width:calc(280px * var(--gf-k,1));height:calc(280px * var(--gf-k,1))}
.celeb-gf .gf-plateau{position:absolute;left:50%;top:50%;width:280px;height:280px;margin:-140px 0 0 -140px;transform:scale(var(--gf-k,1))}
.celeb-gf .gf-o{position:absolute}
.celeb-gf .gf-dessin{position:absolute;left:0;top:0;overflow:visible}
.celeb-gf .gf-papier{position:absolute;inset:0;border-radius:inherit;background:var(--cb-papier);box-shadow:inset 0 0 0 1px var(--cb-bord),inset 0 1px 0 var(--cb-reflet)}
.celeb-gf .gf-t{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}

/* Les traits : texte « grisé » imprimé, encre de la nature. */
.celeb-gf .gf-fort{stroke:var(--cb-trait-fort);stroke-width:5}
.celeb-gf .gf-texte{stroke:var(--cb-trait);stroke-opacity:.55;stroke-width:3}
.celeb-gf .gf-leger{stroke:var(--cb-trait);stroke-opacity:.4;stroke-width:2.4}
.celeb-gf .gf-filet{stroke:var(--cb-trait);stroke-opacity:.34;stroke-width:1}
.celeb-gf .gf-pointille{stroke:var(--cb-trait);stroke-opacity:.45;stroke-width:1.2;stroke-dasharray:2 3.5}
.celeb-gf .gf-encre{stroke:var(--cb-c);stroke-width:2.3}
.celeb-gf .gf-fin{stroke-width:1.1}
.celeb-gf .gf-feutre{stroke-width:3.2}
.celeb-gf .gf-plein{fill:var(--cb-c);stroke:none}
.celeb-gf .gf-teinte{fill:var(--cb-bg)}
.celeb-gf .gf-teinte-pleine{fill:var(--cb-c);fill-opacity:.16;stroke:none}
.celeb-gf .gf-trait-c{stroke:var(--cb-c);stroke-width:1.6}
.celeb-gf .gf-sur-plein{stroke:var(--cb-on);stroke-opacity:.8;stroke-width:3}
.celeb-gf .gf-papier-svg{fill:var(--cb-papier);stroke:var(--cb-bord);stroke-width:1}
.celeb-gf .gf-leger-plein{fill:var(--cb-trait);fill-opacity:.35;stroke:none}
.celeb-gf .gf-metal{fill:var(--cb-metal)}

/* Générique : la coche, sur son liseré. */
.celeb-gf .gf-halo{stroke:var(--bg);stroke-width:24;stroke-opacity:.9}
.celeb-gf .gf-coche-trait{stroke:var(--cb-c);stroke-width:12}

/* Client : la carte de visite, deux faces en 3D, la pile du carnet d'adresses. */
.celeb-gf .gf-cv{position:absolute;inset:0;transform-style:preserve-3d}
.celeb-gf .gf-cv-face,.celeb-gf .gf-cv-dos{position:absolute;inset:0;border-radius:9px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.celeb-gf .gf-cv-face{background:var(--cb-papier);box-shadow:var(--cb-ombre),inset 0 0 0 1px var(--cb-bord)}
.celeb-gf .gf-cv-dos{transform:rotateY(180deg);background:var(--cb-fill);box-shadow:var(--cb-ombre);display:grid;place-items:center}
.celeb-gf .gf-cv-cadre{position:absolute;inset:10px;border:1px solid var(--cb-on);border-radius:5px;opacity:.35}
.celeb-gf .gf-cv-mono{font:700 60px/1 var(--font-display);letter-spacing:-.02em;color:var(--cb-on)}
.celeb-gf .gf-cv-marque{width:44px;height:3px;border-radius:2px;background:var(--cb-on);opacity:.8}
.celeb-gf .gf-mono-petit{font:700 15px var(--font-display);fill:var(--cb-c)}
.celeb-gf .gf-reflet{position:absolute;top:-20%;bottom:-20%;left:0;width:70%;background:linear-gradient(105deg,transparent 20%,var(--cb-reflet) 50%,transparent 80%);transform:translateX(-140%)}
.celeb-gf .gf-reflet-dos{background:linear-gradient(105deg,transparent 20%,var(--cb-brillance) 50%,transparent 80%);opacity:.35}
.celeb-gf .gf-cv-pile{border-radius:9px;box-shadow:var(--cb-ombre)}
.celeb-gf .gf-cv-pile1{transform:rotate(5deg)}
.celeb-gf .gf-cv-pile2{transform:rotate(-6deg)}

/* Prospect : le plan plié en trois, la punaise, son ombre, un écho. */
.celeb-gf .gf-plan-ombre{position:absolute;inset:0;border-radius:3px;box-shadow:var(--cb-ombre);opacity:0}
.celeb-gf .gf-pan{background:var(--cb-papier);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:inset 0 0 0 1px var(--cb-bord)}
.celeb-gf .gf-pan-g{border-radius:3px 0 0 3px}
.celeb-gf .gf-pan-d{border-radius:0 3px 3px 0}
.celeb-gf .gf-pan-c::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--cb-o1),transparent 10%,transparent 90%,var(--cb-o1))}
.celeb-gf .gf-pli{position:absolute;inset:0;opacity:0}
.celeb-gf .gf-pli-g{background:linear-gradient(90deg,transparent 30%,var(--cb-o2))}
.celeb-gf .gf-pli-d{background:linear-gradient(270deg,transparent 30%,var(--cb-o2))}
.celeb-gf .gf-rue{stroke:var(--cb-trait);stroke-opacity:.24;stroke-width:6}
.celeb-gf .gf-ruelle{stroke:var(--cb-trait);stroke-opacity:.14;stroke-width:2}
.celeb-gf .gf-riviere{stroke:var(--blue);stroke-opacity:.3;stroke-width:12}
.celeb-gf .gf-parc{fill:var(--green);fill-opacity:.16}
.celeb-gf .gf-aiguille{stroke:var(--cb-metal);stroke-width:2.2}
.celeb-gf .gf-ombrage{stroke:var(--cb-o2);stroke-width:4;stroke-opacity:.8}
.celeb-gf .gf-brillance{fill:var(--cb-brillance)}
.celeb-gf .gf-epingle-ombre{border-radius:50%;background:radial-gradient(closest-side,var(--cb-o2),transparent);transform-origin:18% 50%;transform:rotate(18deg)}
.celeb-gf .gf-echo{border-radius:50%;border:2px solid var(--cb-c);opacity:0}

/* Agent : le cordon, son fermoir, le badge. */
.celeb-gf .gf-ruban{stroke:var(--cb-c);stroke-width:8;stroke-linecap:butt}
.celeb-gf .gf-couture{stroke:var(--cb-on);stroke-opacity:.45;stroke-width:1;stroke-dasharray:3 3;stroke-linecap:butt}
.celeb-gf .gf-anneau{stroke:var(--cb-metal);stroke-width:2.4}
.celeb-gf .gf-badge{border-radius:10px;box-shadow:var(--cb-ombre)}
.celeb-gf .gf-trou{fill:var(--bg)}

/* Devis : la planchette, sa pince de métal, la feuille, le surligneur. */
.celeb-gf .gf-carton{position:absolute;inset:0;border-radius:12px;background:var(--cb-carton);box-shadow:var(--cb-ombre),inset 0 0 0 1px var(--cb-bord),inset 0 1px 0 var(--cb-reflet)}
.celeb-gf .gf-feuillet{border-radius:3px;box-shadow:0 1px 2px var(--cb-o1),0 3px 8px var(--cb-o1)}
.celeb-gf .gf-pince-corps{position:absolute;inset:0;border-radius:9px 9px 6px 6px;background:var(--cb-metal);box-shadow:inset 0 1px 0 var(--cb-brillance),inset 0 -3px 0 var(--cb-o1),0 2px 3px var(--cb-o2)}
.celeb-gf .gf-pince-fente{position:absolute;left:24px;right:24px;top:8px;height:10px;border-radius:5px;background:var(--cb-carton);box-shadow:inset 0 1px 2px var(--cb-o2)}
.celeb-gf .gf-rivet{position:absolute;top:13px;width:6px;height:6px;border-radius:50%;background:var(--cb-appareil)}
.celeb-gf .gf-rivet-g{left:9px}
.celeb-gf .gf-rivet-d{right:9px}
.celeb-gf .gf-pince-ombre{border-radius:50%;background:radial-gradient(closest-side,var(--cb-o2),transparent)}
.celeb-gf .gf-surligneur{fill:var(--cb-c);fill-opacity:.3}

/* Contrat : la feuille (et son ombre en vol), l'empreinte, le tampon vu de dessus. */
.celeb-gf .gf-feuille{border-radius:3px;box-shadow:var(--cb-ombre)}
.celeb-gf .gf-ombre-vol{position:absolute;inset:0;border-radius:3px;box-shadow:0 40px 70px var(--cb-o2),0 16px 30px var(--cb-o1)}
.celeb-gf .gf-empreinte{opacity:0}
.celeb-gf .gf-empreinte-bord{stroke-width:2.8;stroke-dasharray:19 1.6 7 1.2 26 2}
.celeb-gf .gf-empreinte-ecrit{stroke-width:2;stroke-opacity:.85}
.celeb-gf .gf-tampon,.celeb-gf .gf-tampon-ombre{opacity:0}
.celeb-gf .gf-tampon-ombre{border-radius:50%;background:radial-gradient(closest-side,var(--cb-noir),transparent)}
.celeb-gf .gf-tampon-bois{fill:var(--cb-appareil);stroke:var(--cb-bord);stroke-width:1}
.celeb-gf .gf-tampon-lumiere{stroke:var(--cb-reflet);stroke-width:2}
.celeb-gf .gf-caoutchouc{fill:var(--cb-c)}

/* Facture : l'imprimante, sa fente et son voyant ; le ticket, ses dents, son code-barres. */
.celeb-gf .gf-imprimante{border-radius:14px;background:linear-gradient(var(--cb-reflet),transparent 45%),var(--cb-appareil);box-shadow:var(--cb-ombre),inset 0 0 0 1px var(--cb-bord)}
.celeb-gf .gf-fente{position:absolute;left:18px;right:34px;top:28px;height:5px;border-radius:3px;background:var(--cb-noir);box-shadow:0 1px 0 var(--cb-reflet)}
.celeb-gf .gf-voyant{position:absolute;right:14px;top:27px;width:6px;height:6px;border-radius:50%;background:var(--cb-c);opacity:.35}
.celeb-gf .gf-recu-fenetre{left:0;top:34px;width:280px;height:250px;overflow:hidden}
.celeb-gf .gf-recu{filter:drop-shadow(0 1px 1px var(--cb-o1)) drop-shadow(0 8px 12px var(--cb-o2))}
.celeb-gf .gf-code rect{fill:var(--cb-trait);fill-opacity:.6}

/* Proposition : les diapositives, l'aire sous la courbe, le point d'arrivée. */
.celeb-gf .gf-diapo{border-radius:6px;box-shadow:var(--cb-ombre)}
.celeb-gf .gf-aire{fill:var(--cb-c);fill-opacity:.14}
.celeb-gf .gf-point{stroke:var(--cb-papier);stroke-width:2}

/* Envoi : le ciel (tout l'écran), la traîne en trois épaisseurs, l'avion de papier. */
.celeb-gf .gf-ciel{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.celeb-gf .gf-trajet{stroke:none}
.celeb-gf .gf-traine{stroke:var(--cb-c);stroke-dasharray:0 3}
.celeb-gf .gf-traine1{stroke-width:2.4;stroke-opacity:.6}
.celeb-gf .gf-traine2{stroke-width:1.8;stroke-opacity:.3}
.celeb-gf .gf-traine3{stroke-width:1.3;stroke-opacity:.15}
.celeb-gf .gf-avion{opacity:0}
.celeb-gf .gf-avion-dessus{fill:var(--cb-papier);stroke:var(--cb-bord-fort);stroke-width:1;stroke-linejoin:round}
.celeb-gf .gf-avion-dessous{fill:var(--cb-papier-2);stroke:var(--cb-bord-fort);stroke-width:1;stroke-linejoin:round}
.celeb-gf .gf-avion-pli{stroke:var(--cb-bord-fort);stroke-width:.8}
.celeb-gf .gf-avion-ombre{fill:var(--cb-o2)}

/* Tâche : la liste, ses cases, l'écriture, le stylo et son ombre. */
.celeb-gf .gf-liste{border-radius:4px;box-shadow:var(--cb-ombre)}
.celeb-gf .gf-case{stroke:var(--cb-trait);stroke-opacity:.6;stroke-width:1.6}
.celeb-gf .gf-case-faite{fill:var(--cb-trait);fill-opacity:.15}
.celeb-gf .gf-coche-faite{stroke:var(--cb-trait);stroke-width:2}
.celeb-gf .gf-ecrit{stroke:var(--cb-trait);stroke-opacity:.6;stroke-width:1.6}
.celeb-gf .gf-ecrit-fait{stroke-opacity:.28}
.celeb-gf .gf-nv-case,.celeb-gf .gf-nv-ecrit{stroke-width:1.9}
.celeb-gf .gf-stylo,.celeb-gf .gf-stylo-ombre{opacity:0}
.celeb-gf .gf-stylo-ombre::before{content:'';position:absolute;left:0;top:-4px;width:112px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cb-o2),transparent);transform-origin:0 50%;transform:rotate(-38deg)}
.celeb-gf .gf-stylo-pointe{fill:var(--cb-metal)}
.celeb-gf .gf-stylo-grip{fill:var(--cb-appareil);stroke:var(--cb-bord);stroke-width:1}
.celeb-gf .gf-stylo-corps{fill:var(--cb-c)}
.celeb-gf .gf-stylo-agrafe{fill:var(--cb-metal)}

/* Relevé : la lunette, les graduations, la piste et la jauge, l'aiguille. */
.celeb-gf .gf-cadran{border-radius:50%;box-shadow:var(--cb-ombre)}
.celeb-gf .gf-lunette{fill:var(--cb-papier-2);stroke:var(--cb-bord);stroke-width:1}
.celeb-gf .gf-graduation{stroke:var(--cb-trait);stroke-opacity:.5;stroke-width:1.6}
.celeb-gf .gf-piste{stroke:var(--cb-trait);stroke-opacity:.16;stroke-width:10}
.celeb-gf .gf-jauge{stroke:var(--cb-c);stroke-width:10;stroke-dasharray:1 2;stroke-dashoffset:1;opacity:0}
.celeb-gf .gf-aiguille-trait{stroke:var(--cb-trait-fort);stroke-width:3}

/* Rendez-vous : les pages (recto, verso), l'ombre de la page qui passe, les jours, la reliure. */
.celeb-gf .gf-page{border-radius:4px}
.celeb-gf .gf-page-dessous{box-shadow:var(--cb-ombre)}
.celeb-gf .gf-page-dessus{transform-style:preserve-3d}
.celeb-gf .gf-page-recto,.celeb-gf .gf-page-verso{position:absolute;inset:0;border-radius:4px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.celeb-gf .gf-page-recto{box-shadow:0 1px 2px var(--cb-o1)}
.celeb-gf .gf-page-verso{transform:rotateX(180deg);background:var(--cb-papier-2);box-shadow:inset 0 0 0 1px var(--cb-bord)}
.celeb-gf .gf-page-ombre{position:absolute;inset:0;border-radius:4px;background:linear-gradient(var(--cb-o2),transparent 75%);opacity:0}
.celeb-gf .gf-plein-bande{fill:var(--cb-c)}
.celeb-gf .gf-jour{fill:var(--cb-trait);fill-opacity:.55}
.celeb-gf .gf-jour-fin{fill-opacity:.3}
.celeb-gf .gf-jour-hors{fill-opacity:.13}
.celeb-gf .gf-jour-rdv{fill:var(--cb-c);fill-opacity:1}
.celeb-gf .gf-spirale{fill:var(--cb-metal);stroke:var(--cb-appareil);stroke-width:.8}

/* Le titre, d'un bloc derrière son masque ; le détail, discret. */
.celeb-gf .gf-legende{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(560px,calc(100vw - 32px));text-align:center}
.celeb-gf .gf-titre{margin:0;font:700 28px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--text);
  text-shadow:0 0 2px var(--bg),0 0 6px var(--bg),0 0 14px var(--bg),0 0 24px var(--bg)}
.celeb-gf .gf-masque{display:block;overflow:hidden;padding:.5em 1em;margin:-.5em -1em}
.celeb-gf .gf-titre-in{display:block}
.celeb-gf .gf-detail{margin:0;font-size:15px;line-height:1.45;color:var(--text2);opacity:0;overflow-wrap:anywhere;
  text-shadow:0 0 2px var(--bg),0 0 6px var(--bg),0 0 14px var(--bg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* La carte d'arrivée : figée dans son état final (la scène vient de se jouer en grand). Sa sortie
   reste animée. */
#celebration.celeb-fige:not(.celeb-sortie) .celeb-carte,#celebration.celeb-fige .celeb-carte *{animation:none!important}

/* Téléphone : le plateau réduit, un titre plus court. */
/* Grand écran : le plateau grandit, les objets gardent leurs proportions. */
@media (min-width:1200px) and (min-height:760px){.celeb-gf{--gf-k:1.2;gap:26px}}
@media (max-width:560px){
  .celeb-gf{gap:14px;--gf-k:.74}
  .celeb-gf .gf-titre{font-size:22px}
  .celeb-gf .gf-detail{font-size:14px}
}
/* Mouvement réduit : jamais de grand format (le script ne le crée pas ; second verrou ici). */
@media (prefers-reduced-motion:reduce){.celeb-gf{display:none!important}}

/* ── Le voile (27/09/2026) ───────────────────────────────────────────────────────────────────
   Toute la page passe sous un plan calme le temps de la scène : la couleur du fond du thème, teintée
   de la couleur de la nature. Le titre se lit alors comme sur une page vide, dans les deux thèmes.
   Derrière tout le reste de la scène (z-index -1 dans son propre empilement), transparent aux clics. */
.celeb-gf .gf-voile{position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;will-change:opacity;
  background:linear-gradient(var(--cb-bg),var(--cb-bg)),var(--bg)}

/* ── Paramètres → Affichage (27/09/2026, js/53) ─────────────────────────────────────────────── */
.aff-choix{border:0;margin:12px 0 0;padding:0;display:grid;gap:8px}
.aff-option{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border2);border-radius:var(--r);cursor:pointer;background:var(--bg2)}
.aff-option:has(input:checked){border-color:var(--accent);background:var(--glow)}
.aff-option input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
.aff-option-t{display:block;font-size:14px;font-weight:600;color:var(--text)}
.aff-option-d{display:block;font-size:12.5px;line-height:1.5;color:var(--text2);margin-top:2px}
.aff-pied{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:14px}