/* JETINVITE — Ouvertures animées (enveloppe, coffret, coffre-fort, alliances)
   Chargé uniquement quand le modèle de l'invitation définit une ouverture animée. */

.voile.ouv{padding:0;display:grid;place-items:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.6,0,.2,1)}
.voile.ouv::after{display:none}
.voile.ouv.parti{opacity:0;transform:scale(1.08)}
.ouv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ouv-col{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;
  width:100%;max-width:460px;padding:22px 16px;text-align:center}
.ouv button{font:inherit;cursor:pointer}
.ouv :focus-visible{outline:2px solid #f0d891;outline-offset:4px}
.ouv-pour small{display:block;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
.ouv-pour span{display:block;font-size:clamp(1.6rem,7vw,2.3rem);line-height:1.2}
.ouv-aide{font-size:.92rem;line-height:1.5;min-height:2.9em;margin:0;transition:opacity .4s}
.ouv-aide em{font-style:normal}
.ouv-passer{background:none;border:0;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;padding:8px 12px;opacity:.6;color:inherit;transition:opacity .4s}
.ouv-passer:hover{opacity:1}
.ouv.en-cours .ouv-aide,.ouv.en-cours .ouv-passer,.ouv.en-cours .cfo-etiquette{opacity:0;pointer-events:none}

/* =========================================================
   1. ENVELOPPE AU SCEAU DE CIRE
   ========================================================= */
.voile.ouv-enveloppe{background:radial-gradient(120% 80% at 50% 40%,#143a32 0%,#0b201c 62%);color:#f8f4ec;
  font-family:"Jost",system-ui,sans-serif}
.ouv-enveloppe .ouv-pour small{font-family:"Italiana",Georgia,serif;color:#c9a24a}
.ouv-enveloppe .ouv-pour span{font-family:"Pinyon Script",cursive;color:#f0d891}
.ouv-enveloppe .ouv-aide em{color:#f0d891}
.env-tilt{perspective:900px;width:min(88vw,440px)}
.env-bob{animation:env-bob 5s ease-in-out infinite;transition:transform .4s ease-out}
@keyframes env-bob{50%{translate:0 -8px}}
.en-cours .env-bob{animation:none}
.env{position:relative;width:100%;aspect-ratio:3/2;perspective:1400px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.env-dos,.env-poche>i,.env-face{position:absolute;inset:0}
.env-doublure{background:
  radial-gradient(circle,transparent 0 4px,#c9a24a 4px 5px,transparent 5px 8px,#c9a24a 8px 9px,transparent 9px) 0 0/24px 24px,
  radial-gradient(circle,#c9a24a 0 1.5px,transparent 2px) 12px 12px/24px 24px,
  linear-gradient(135deg,#0f4d40,#0b3229)}
.env-dos{border-radius:6px;overflow:hidden}
.env-carte{position:absolute;left:5%;right:5%;top:5%;height:90%;z-index:2;background:#f8f4ec;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:9%;gap:2px;
  transition:transform 1s cubic-bezier(.5,0,.2,1)}
.env-carte::before{content:"";position:absolute;inset:7px;border:1px solid #c9a24a;opacity:.7}
.env-carte b{font-family:"Pinyon Script",cursive;font-weight:400;font-size:clamp(1.7rem,7vw,2.4rem);color:#123b33;line-height:1.1}
.env-carte span{font-family:"Italiana",Georgia,serif;letter-spacing:.3em;font-size:.68rem;color:#8d6c22}
.env-poche{position:absolute;inset:0;z-index:3;filter:drop-shadow(0 -1px 1.5px rgba(0,0,0,.12));pointer-events:none}
.env-poche .g{background:#ddd3bb;clip-path:polygon(0 0,52% 56%,0 100%)}
.env-poche .d{background:#d2c7ac;clip-path:polygon(100% 0,48% 56%,100% 100%)}
.env-poche .b{background:linear-gradient(0deg,#ddd3bb,#e8e0cc);clip-path:polygon(0 100%,50% 46%,100% 100%);border-radius:0 0 6px 6px}
.env-rabat{position:absolute;left:0;right:0;top:0;height:60%;z-index:4;transform-origin:50% 0;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.6,.05,.3,1);pointer-events:none}
.env-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.env-face.dehors{background:linear-gradient(180deg,#e8e0cc,#ddd3bb);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:6px 6px 0 0}
.env-face.dedans{transform:rotateX(180deg);clip-path:polygon(50% 0,100% 100%,0 100%)}
.env.ouvert .env-rabat{transform:rotateX(180deg)}
.env.rabat-derriere .env-rabat{z-index:1}
.env.sortie .env-carte{transform:translateY(-58%)}
.env-sceau{position:absolute;left:50%;top:60%;z-index:5;width:92px;height:92px;margin:-46px 0 0 -46px;border:0;padding:0;
  background:none;border-radius:50%;touch-action:none;-webkit-touch-callout:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.env-anneau{position:absolute;inset:-12px;width:116px;height:116px;transform:rotate(-90deg);pointer-events:none}
.env-anneau circle{fill:none;stroke-width:2}
.env-anneau .piste{stroke:rgba(240,216,145,.18)}
.env-anneau .jauge{stroke:#f0d891;stroke-linecap:round;stroke-dasharray:345.6;stroke-dashoffset:345.6;filter:drop-shadow(0 0 4px rgba(240,216,145,.8))}
.env-sceau .moitie{position:absolute;inset:0;transition:transform .9s cubic-bezier(.3,.6,.3,1),opacity .9s ease}
.env-sceau .moitie.g{clip-path:polygon(0 0,52% 0,46% 22%,56% 40%,44% 62%,54% 80%,48% 100%,0 100%)}
.env-sceau .moitie.d{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,54% 80%,44% 62%,56% 40%,46% 22%)}
.env-sceau .cire{position:absolute;inset:0;border-radius:48% 52% 50% 50%/53% 47% 53% 47%;
  background:radial-gradient(circle at 34% 28%,#b0364a 0%,#7a1426 48%,#45081a 100%);
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.45),inset 4px 5px 8px rgba(255,255,255,.18);
  display:grid;place-items:center}
.env-sceau .cire::before{content:"";position:absolute;inset:13%;border-radius:50%;box-shadow:inset 2px 2px 3px rgba(0,0,0,.4),inset -1px -1px 2px rgba(255,255,255,.2)}
.env-sceau .cire b{font-family:"Pinyon Script",cursive;font-weight:400;font-size:2.1rem;color:#e9c977;
  text-shadow:1px 1px 0 rgba(0,0,0,.45),-1px -1px 0 rgba(255,255,255,.2);letter-spacing:-.04em;line-height:1}
.env.brise .moitie.g{transform:translate(-46px,70px) rotate(-38deg);opacity:0}
.env.brise .moitie.d{transform:translate(50px,84px) rotate(30deg);opacity:0}
.env.brise .env-anneau{opacity:0;transition:opacity .2s}

/* =========================================================
   2. COFFRET CADEAU AU RUBAN
   ========================================================= */
.voile.ouv-coffret{--s:min(46vw,210px);--h:calc(var(--s)*.72);--s2:calc(var(--s)*1.07);--lh:calc(var(--s)*.21);
  background:radial-gradient(90% 70% at 50% 55%,#1a2a58 0%,#0c1530 70%);color:#fbfaf6;font-family:"Mulish",system-ui,sans-serif}
.ouv-coffret .ouv-col{gap:8px}
.ouv-coffret .ouv-pour small{font-family:"Marcellus SC",Georgia,serif;color:#d4c091}
.ouv-coffret .ouv-pour span{font-family:"Bodoni Moda",Didot,Georgia,serif;font-style:italic}
.ouv-coffret .ouv-aide em{color:#d4c091}
.cof-scene{position:relative;width:100%;height:calc(var(--s)*2.25)}
.cof-flotte{position:absolute;inset:0;animation:cof-bob 5s ease-in-out infinite}
@keyframes cof-bob{50%{transform:translateY(-7px)}}
.en-cours .cof-flotte{animation:none}
.cof-rayons{position:absolute;left:50%;top:calc(68% - var(--h)*.55);width:calc(var(--s)*3.4);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,190,.38) 0 5deg,transparent 5deg 16deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);
  opacity:0;transform:scale(.4);transition:opacity 1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.cof-halo{position:absolute;left:50%;top:calc(68% - var(--h)*.5);width:calc(var(--s)*1.6);height:calc(var(--s)*.9);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,244,214,.75),rgba(255,236,190,0));opacity:0;transition:opacity .8s}
.cof-scene.lumiere .cof-rayons{opacity:1;transform:scale(1);animation:cof-tourne 26s linear infinite}
.cof-scene.lumiere .cof-halo{opacity:1}
@keyframes cof-tourne{to{rotate:360deg}}
.cof-ombre{position:absolute;left:50%;top:calc(68% + var(--h)*.62);width:calc(var(--s)*1.7);height:calc(var(--s)*.28);translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}
.cof-monde{position:absolute;left:50%;top:68%;width:0;height:0;perspective:1100px}
.cof-boite{position:absolute;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(38deg)}
.cof-base,.cof-couv{position:absolute;transform-style:preserve-3d}
.cof-boite .f{position:absolute;left:0;top:0;overflow:hidden}
.cof-base .f{width:var(--s);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--s)/-2);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cof-base .av{transform:translateZ(calc(var(--s)/2));background:linear-gradient(160deg,#fbf8f1,#ece6da)}
.cof-base .ar{transform:rotateY(180deg) translateZ(calc(var(--s)/2));background:#ddd6c7}
.cof-base .dr{transform:rotateY(90deg) translateZ(calc(var(--s)/2));background:#d9d2c3}
.cof-base .ga{transform:rotateY(-90deg) translateZ(calc(var(--s)/2));background:linear-gradient(200deg,#ebe5d9,#d8d0c0)}
.cof-base .in{background:linear-gradient(180deg,#4a66c4,#22397f 55%,#121d47)}
.cof-base .ibk{background:linear-gradient(180deg,#5874cf,#2a4290 50%,#14204d)}
.cof-base .irt{background:linear-gradient(180deg,#3b55a8,#1c2f6c 55%,#0f183c)}
.cof-base .ifr{transform:translateZ(calc(var(--s)/2 - 1px)) rotateY(180deg)}
.cof-base .ibk{transform:rotateY(180deg) translateZ(calc(var(--s)/2 - 1px)) rotateY(180deg)}
.cof-base .irt{transform:rotateY(90deg) translateZ(calc(var(--s)/2 - 1px)) rotateY(180deg)}
.cof-base .ilf{transform:rotateY(-90deg) translateZ(calc(var(--s)/2 - 1px)) rotateY(180deg)}
.cof-base .fond{width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);transform:rotateX(-90deg) translateZ(calc(var(--h)/2));
  backface-visibility:visible;-webkit-backface-visibility:visible;background:radial-gradient(circle,#1a2a63,#0b1333)}
.cof-couv{transform:translateY(calc(var(--h)/-2 - var(--lh)/2 + 1px));transition:transform 1.3s cubic-bezier(.5,-.3,.4,1)}
.cof-couv .f{width:var(--s2);height:var(--lh);margin:calc(var(--lh)/-2) 0 0 calc(var(--s2)/-2)}
.cof-couv .av{transform:translateZ(calc(var(--s2)/2));background:linear-gradient(180deg,#fdfbf6,#eee8dc)}
.cof-couv .ar{transform:rotateY(180deg) translateZ(calc(var(--s2)/2));background:#ddd6c7}
.cof-couv .dr{transform:rotateY(90deg) translateZ(calc(var(--s2)/2));background:#dcd5c6}
.cof-couv .ga{transform:rotateY(-90deg) translateZ(calc(var(--s2)/2));background:linear-gradient(180deg,#f0ebe0,#ddd5c6)}
.cof-couv .dessus{width:var(--s2);height:var(--s2);margin:calc(var(--s2)/-2) 0 0 calc(var(--s2)/-2);transform:rotateX(90deg) translateZ(calc(var(--lh)/2));background:linear-gradient(135deg,#fff,#f3eee4 60%,#e9e2d4)}
.cof-ancre{position:absolute;left:0;top:0;width:0;height:0;transform:translateY(calc(var(--lh)/-2))}
.cof-boite .rub{position:absolute;top:0;bottom:0;left:44%;width:12%;background:linear-gradient(90deg,#162d73,#5b7de0 45%,#2747a8 60%,#162d73);transform-origin:50% 0;transition:transform .7s cubic-bezier(.5,0,.3,1)}
.cof-boite .rub.h{top:44%;bottom:auto;height:12%;left:0;right:0;width:auto;background:linear-gradient(180deg,#162d73,#5b7de0 45%,#2747a8 60%,#162d73);transform-origin:0 50%}
.cof-boite.denoue .rub{transform:scaleY(0)}
.cof-boite.denoue .rub.h{transform:scaleX(0)}
.cof-boite.sans-couvercle .cof-couv{transform:translate3d(calc(var(--s)*2.6),calc(var(--s)*-2.4),0) rotateZ(38deg) rotateX(-40deg)}
.cof-carte{position:absolute;left:0;top:0;width:calc(var(--s)*.8);height:calc(var(--s)*.56);margin:calc(var(--s)*-.28) 0 0 calc(var(--s)*-.4);transform-style:preserve-3d;
  transform:translateY(calc(var(--h)*.12)) rotateY(-38deg) rotateX(24deg);transition:transform 1.2s cubic-bezier(.3,.7,.2,1)}
.cof-boite.monte .cof-carte{transform:translateY(calc(var(--h)*-1.32)) rotateY(-38deg) rotateX(24deg) scale(1.3)}
.cof-ci{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.5,0,.2,1)}
.cof-boite.retourne .cof-ci{transform:rotateY(180deg)}
.cof-cf,.cof-cb{position:absolute;inset:0;border-radius:3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fbfaf6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.35);color:#14224a}
.cof-cf::before,.cof-cb::before{content:"";position:absolute;inset:6px;border:1px solid #d4c091}
.cof-cb{transform:rotateY(180deg)}
.cof-cf b{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-weight:400;font-size:calc(var(--s)*.15);line-height:1}
.cof-cf span,.cof-cb span{font-family:"Marcellus SC",Georgia,serif;letter-spacing:.24em;font-size:calc(var(--s)*.042);color:#85703f}
.cof-cb b{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-weight:400;font-size:calc(var(--s)*.085);line-height:1.2;text-align:center}
.cof-noeud{position:absolute;left:50%;top:30%;width:calc(var(--s)*.62);aspect-ratio:120/150;border:0;padding:0;background:none;
  transform:translate(-50%,-34%);touch-action:none;cursor:grab;-webkit-touch-callout:none;z-index:3;filter:drop-shadow(0 6px 8px rgba(5,10,30,.45))}
.cof-noeud:active{cursor:grabbing}
.cof-noeud svg{width:100%;height:100%;overflow:visible;display:block}
.cof-noeud .boucles,.cof-noeud .queues,.cof-noeud .tire{transform-box:view-box;transform-origin:60px 50px}

/* =========================================================
   3. COFFRE-FORT À COMBINAISON
   ========================================================= */
.voile.ouv-coffre{background:radial-gradient(70% 55% at 50% 52%,#2a2520 0%,#0e0d0c 75%);color:#f2ebdc;font-family:"Outfit",system-ui,sans-serif}
.ouv-coffre::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(200,163,90,.035) 0 1px,transparent 1px 64px);pointer-events:none}
.ouv-coffre .ouv-col{gap:12px}
.ouv-coffre .ouv-pour small{font-family:"Poiret One",Futura,sans-serif;color:#c8a35a}
.ouv-coffre .ouv-pour span{font-family:"Gilda Display",Didot,Georgia,serif}
.ouv-coffre .ouv-aide{color:#a39a88;max-width:34ch}
.ouv-coffre .ouv-aide em{color:#ecd29a}
.cfo-etiquette{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 12px;border-radius:3px;
  background:linear-gradient(135deg,#7d5f25,#c8a35a 45%,#ecd29a 60%,#c8a35a);color:#2a1e08;font-size:.8rem;box-shadow:0 4px 12px rgba(0,0,0,.5);transition:opacity .4s}
.cfo-etiquette::before{content:"";width:8px;height:8px;border-radius:50%;background:#0e0d0c}
.cfo-etiquette b{font-weight:500;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.cfo-scene{position:relative;width:min(80vw,340px);transition:transform 1.6s cubic-bezier(.6,0,.3,1),opacity 1.4s ease}
.cfo-scene.zoom{transform:scale(3.4);opacity:0}
.cfo-caisse{position:relative;width:100%;aspect-ratio:10/11;perspective:1300px;border-radius:14px;
  background:linear-gradient(150deg,#45484d,#25272a 55%,#1a1b1d);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.12),inset -2px -2px 0 rgba(0,0,0,.4),0 40px 60px -20px rgba(0,0,0,.8)}
.cfo-caisse .rivet{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a8d92,#2b2d30)}
.cfo-cavite{position:absolute;inset:5.5%;border-radius:6px;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 40%,#4a2340,#2a1424 55%,#14090f);box-shadow:inset 0 0 0 5px #0d0d0e,inset 0 10px 30px rgba(0,0,0,.8)}
.cfo-spot{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 30%,rgba(255,226,160,.55),transparent 70%);opacity:0;transition:opacity 1.4s ease}
.cfo-caisse.eclaire .cfo-spot{opacity:1}
.cfo-etagere{position:absolute;left:5px;right:5px;top:66%;height:6px;background:linear-gradient(#ecd29a,#7d5f25);box-shadow:0 6px 10px rgba(0,0,0,.6)}
.cfo-lingots{position:absolute;left:12%;top:calc(66% - 46px);width:34%;height:46px}
.cfo-lingots span{position:absolute;width:56%;height:22px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#fff0bf,#c8a35a 40%,#7d5f25);display:grid;place-items:center;font-family:"Poiret One",sans-serif;font-size:9px;color:rgba(60,40,5,.75);letter-spacing:.1em}
.cfo-lingots span:nth-child(1){left:0;bottom:0}.cfo-lingots span:nth-child(2){left:44%;bottom:0}.cfo-lingots span:nth-child(3){left:22%;bottom:22px}
.cfo-carte{position:absolute;right:12%;bottom:calc(34% - 2px);width:40%;aspect-ratio:3/4.1;transform:rotate(-4deg);transform-origin:50% 100%;
  background:#f2ebdc;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#1d1a15;box-shadow:0 10px 18px rgba(0,0,0,.6)}
.cfo-carte::before{content:"";position:absolute;inset:5px;border:1px solid #c8a35a}
.cfo-carte b{font-family:"Gilda Display",Georgia,serif;font-weight:400;font-size:clamp(.9rem,4.2vw,1.2rem);line-height:1.1}
.cfo-carte span{font-family:"Poiret One",sans-serif;font-size:.55rem;letter-spacing:.2em;color:#7d5f25}
.cfo-porte{position:absolute;inset:5.5%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.45,0,.25,1)}
.cfo-porte.decolle{transform:translateZ(8px);transition-duration:.25s}
.cfo-porte.ouverte{transform:translateZ(8px) rotateY(-112deg)}
.cfo-face{position:absolute;inset:0;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cfo-face.devant{background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(160deg,#55595f,#303338 50%,#2c2f33 70%,#222427);
  box-shadow:0 0 0 2px #0b0b0c,inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(0,0,0,.5)}
.cfo-face.devant::before{content:"";position:absolute;inset:6%;border-radius:5px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.55),inset -1px -1px 0 rgba(255,255,255,.08)}
.cfo-face.dos{transform:translateZ(-18px) rotateY(180deg);background:linear-gradient(200deg,#3a3d42,#1d1f22);box-shadow:inset 0 0 0 10px #26282b}
.cfo-face.dos i{position:absolute;left:8%;width:20%;height:9%;border-radius:2px;background:linear-gradient(#d9dbe0,#7d8087)}
.cfo-tranche{position:absolute;top:0;left:100%;width:18px;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#5d6167,#2a2c30)}
.cfo-plaque{position:absolute;top:8.5%;left:50%;translate:-50% 0;padding:3px 12px;border-radius:2px;background:linear-gradient(135deg,#7d5f25,#c8a35a 50%,#ecd29a 62%,#c8a35a);
  font-family:"Poiret One",sans-serif;font-size:.62rem;letter-spacing:.28em;color:#2a1e08;white-space:nowrap}
.cfo-leds{position:absolute;top:19%;left:13%;display:flex;gap:7px}
.cfo-leds i{width:8px;height:8px;border-radius:50%;background:#4a1714;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);transition:background .3s,box-shadow .3s}
.cfo-leds i.on{background:#7fd49a;box-shadow:0 0 8px #7fd49a}
.cfo-repere{position:absolute;left:calc(13% + 25% - 6px);top:calc(25% - 7px);width:12px;height:10px;clip-path:polygon(0 0,100% 0,50% 100%);background:#ecd29a;z-index:2}
.cfo-molette{position:absolute;left:13%;top:25%;width:50%;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.cfo-molette:active{cursor:grabbing}
.cfo-molette svg{width:100%;height:100%;display:block;overflow:visible}
.cfo-molette text{font-family:"Outfit",sans-serif;font-weight:500;font-size:13px;fill:#f2ebdc;text-anchor:middle;dominant-baseline:central}
.cfo-volant{position:absolute;right:8%;top:35%;width:24%;aspect-ratio:1;filter:drop-shadow(0 5px 6px rgba(0,0,0,.6))}
.cfo-volant svg{width:100%;height:100%;display:block;transition:transform 1s cubic-bezier(.5,0,.3,1)}
.cfo-caisse.tourne .cfo-volant svg{transform:rotate(300deg)}
.cfo-ecran{position:absolute;left:13%;right:8%;bottom:9%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-radius:4px;
  background:#0b0c0a;box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 0 0 1px rgba(200,163,90,.35)}
.cfo-ecran .case{flex:1;text-align:center;font-weight:500;font-size:clamp(.95rem,4.4vw,1.2rem);letter-spacing:.12em;color:rgba(236,210,154,.35);font-variant-numeric:tabular-nums}
.cfo-ecran .case.cur{color:#ecd29a;animation:cfo-clign 1s steps(2) infinite}
.cfo-ecran .case.ok{color:#7fd49a;animation:none}
.cfo-ecran .sep{color:rgba(200,163,90,.4)}
@keyframes cfo-clign{50%{opacity:.45}}

/* =========================================================
   4. ALLIANCES À UNIR
   ========================================================= */
.voile.ouv-alliances{background-color:#fbf6ef;color:#6a0616;font-family:"Montserrat",system-ui,sans-serif;
  background-image:radial-gradient(circle at 20px 20px,rgba(201,169,106,.13) 0 2px,transparent 3px),radial-gradient(circle at 0 0,transparent 14px,rgba(201,169,106,.09) 15px,transparent 16px);
  background-size:40px 40px,40px 40px}
.ouv-alliances .ouv-col{gap:6px}
.ouv-alliances::before,.ouv-alliances .ouv-col::before{content:none}
.all-sur{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:#7b5d5f;margin:0}
.all-pour{font-family:"Playfair Display",Georgia,serif;font-size:1.3rem;color:#9b1022;margin:0}
.all-script{font-family:"Ephesis",cursive;font-size:2.4rem;line-height:1;color:#9b1022;margin:10px 0 0}
.all-anneaux{width:min(100%,440px);height:auto;touch-action:none;overflow:visible}
.all-anneaux .prise{cursor:grab}
.all-anneaux.glisse .prise{cursor:grabbing}
.all-anneaux .lbl{font-family:"Ephesis",cursive;font-size:26px;fill:#9b1022;text-anchor:middle;transition:opacity .5s}
.all-anneaux.unies .lbl{opacity:0}
.all-anneaux .coeur{opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(20px) scale(.2);transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.all-anneaux.unies .coeur{opacity:1;transform:translateY(-6px) scale(1)}
.all-paire{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.5rem,6vw,2rem);color:#9b1022;margin:0;min-height:1.4em;opacity:0;transform:translateY(10px);transition:all .8s ease}
.all-paire i{font-style:normal;color:#c9a96a}
.all-paire.vue{opacity:1;transform:none}
.ouv-alliances .ouv-aide{color:#7b5d5f;max-width:30ch}
.ouv-alliances .ouv-aide b{font-weight:500;color:#9b1022}
.all-unir{border:1px solid rgba(139,10,31,.35);background:transparent;color:#9b1022;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;padding:9px 16px;border-radius:999px;transition:all .3s}
.all-unir:hover{background:#8b0a1f;color:#fbeee6}
.ouv-alliances.en-cours .all-unir{opacity:0;pointer-events:none}
.all-vague{position:fixed;left:0;right:0;top:0;height:100%;z-index:5;background:#8b0a1f;transform:translateY(110%);pointer-events:none}
.all-vague::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:70px;background:#8b0a1f;
  -webkit-mask:radial-gradient(120% 100% at 50% 100%,#000 70%,transparent 70.5%);mask:radial-gradient(120% 100% at 50% 100%,#000 70%,transparent 70.5%)}
.all-vague.monte{transform:translateY(0);transition:transform .9s cubic-bezier(.7,0,.3,1)}

@media (prefers-reduced-motion:reduce){
  .env-bob,.cof-flotte,.cfo-ecran .case.cur{animation:none}
  .cof-scene.lumiere .cof-rayons{animation:none}
}

/* =========================================================
   5. CORDE À TROIS FILS (Ecclésiaste 4:12)
   ========================================================= */
.voile.ouv-tresse{background:#fbfaf6 radial-gradient(90% 60% at 50% 45%,#fffdf8,#f3eee2 80%);color:#1b2a5e;font-family:"Nunito Sans",system-ui,sans-serif}
.ouv-tresse .ouv-col{gap:10px;max-width:420px;padding-top:64px;padding-bottom:64px}
.tr-coin{position:fixed;width:min(18vw,74px);aspect-ratio:1;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%231b2a5e' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M118 4H40c-10 0-14 6-14 12s5 11 11 11 9-4 9-8'/%3E%3Cpath d='M116 4v78c0 10-6 14-12 14s-11-5-11-11 4-9 8-9'/%3E%3Cpath d='M104 16H62c-6 0-8 4-8 7M104 16v42c0 6 4 8 7 8'/%3E%3C/svg%3E") center/contain no-repeat}
.tr-coin.hg{top:10px;right:10px}
.tr-coin.bd{bottom:10px;left:10px;transform:rotate(180deg)}
.tr-verset{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:.86rem;line-height:1.5;color:#1b2a5e;max-width:34ch;margin:0;opacity:.85}
.tr-verset b{font-weight:500;color:#9a6c12}
.tr-verset span{display:block;font-style:normal;font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-top:4px;color:#1b2a5e}
.ouv-tresse .ouv-pour small{color:#9a6c12;font-weight:600}
.ouv-tresse .ouv-pour span{font-family:"Alex Brush",cursive;font-size:clamp(2rem,9vw,2.6rem);color:#1b2a5e}
.tr-scene{position:relative;width:min(86vw,340px)}
.tr-corde{display:block;width:100%;height:min(42vh,340px);touch-action:none;cursor:grab;outline-offset:6px}
.tr-corde:active{cursor:grabbing}
.tr-noms{margin:4px 0 0;min-height:1.2em;line-height:1.1;font-family:"Alex Brush",cursive;font-size:clamp(2.2rem,10vw,3rem);color:#1b2a5e;
  opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease;text-shadow:0 2px 12px #fbfaf6}
.tr-noms i{font-style:normal;color:#d9a441}
.tr-scene.tressee .tr-noms{opacity:1;transform:none}
.ouv-tresse .ouv-aide{color:#4a5679}
.ouv-tresse .ouv-aide em{color:#9a6c12;font-weight:600}
.ouv-tresse .ouv-passer{color:#1b2a5e}
.tr-orn{position:fixed;left:0;width:100%;height:clamp(64px,13vw,120px);object-fit:cover;z-index:1;pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(27,42,94,.2));animation:tr-fleurit 1.4s cubic-bezier(.2,.7,.2,1) both}
.tr-orn.haut{top:0;object-position:center top;transform-origin:50% 0}
.tr-orn.bas{bottom:0;object-position:center bottom;transform-origin:50% 100%;animation-delay:.2s}
.tr-orn ~ .tr-coin{display:none}
.ouv-tresse.en-cours .tr-orn.haut{animation:tr-balance 2.4s ease-in-out infinite alternate}
@keyframes tr-fleurit{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:none}}
@keyframes tr-balance{from{transform:rotate(-.6deg) translateY(-2px)}to{transform:rotate(.6deg) translateY(2px)}}
.tr-verset,.ouv-tresse .ouv-pour,.tr-scene,.ouv-tresse .ouv-aide{animation:tr-monte .9s cubic-bezier(.2,.7,.2,1) backwards}
.ouv-tresse .ouv-pour{animation-delay:.15s}.tr-scene{animation-delay:.3s}.ouv-tresse .ouv-aide{animation-delay:.45s}
@keyframes tr-monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tr-orn,.tr-verset,.ouv-tresse .ouv-pour,.tr-scene,.ouv-tresse .ouv-aide{animation:none}}