/* PopTheDate — univers Fêtes & amis (/fetes/) : l'affiche de soirée, seule page de nuit.
   Atmosphère posée par-dessus univers.css (jetons [data-univers="fetes"] déjà définis là) :
   - noir velours à grain propre (bruit clair à 6 %, le grain « multiply » de l'accueil ne marche pas sur le noir)
     et trois taches de lumière de boule à facettes qui dérivent (20 s, coupées si l'animation est réduite) ;
   - scène d'entrée : le rideau de lamé de Minuit doré coupé en deux pans comme dans l'application
     (src/viewer/opener/illustrated/CurtainScene.tsx), le « 40 » doré et 24 confettis CSS. L'état final est
     l'état sans animation ; les animations s'accrochent à « .scene.joue » (rejouées par univers.js), 1,3 s en tout ;
   - séparateurs en guirlande de confettis, accent de chaque rubrique pris sur son modèle phare, crémaillère sur
     bande claire, Noël sur bande Sapin, chiffres géants en Abril Fatface or ;
   - petits confettis au survol ou au toucher des boutons « Créer ».
   Contrastes du texte (WCAG) : Champagne 16,8:1 et Or 11,1:1 sur Noir ; rose #FF6EC7 7,5:1 ; rose clair #FF5FA2
   6,7:1 ; cyan 12,3:1 ; Or sur Sapin 9:1, sur #173A2B 7,3:1 ; bande crème : #3F2A24 11,3:1, terracotta #9E4A33
   5,1:1, #6B5A52 5,5:1, blanc sur terracotta 6:1. */

/* ─── Matière : noir velours et lumière de boule à facettes ─── */
body[data-univers="fetes"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .88 2.2 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23v%29' opacity='.06'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
body[data-univers="fetes"] main{isolation:isolate}
/* Couche fixe sous le contenu du <main> (au-dessus du fond de page) : trois halos flous qui dérivent. */
body[data-univers="fetes"] main::before{
  content:'';position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(228,195,106,.15),rgba(228,195,106,0)) 18% 22%/62vmax 62vmax no-repeat,
    radial-gradient(closest-side,rgba(255,46,136,.09),rgba(255,46,136,0)) 84% 46%/56vmax 56vmax no-repeat,
    radial-gradient(closest-side,rgba(0,229,255,.06),rgba(0,229,255,0)) 34% 86%/52vmax 52vmax no-repeat;
  animation:f-derive 20s ease-in-out infinite alternate;
}
@keyframes f-derive{
  50%{transform:translate3d(5vmax,3vmax,0)}
  100%{transform:translate3d(-4vmax,6vmax,0)}
}

/* ─── Couverture ─── */
[data-univers="fetes"] .formule-verbe{color:#E4C36A}
[data-univers="fetes"] .couverture .surtitre{color:#E4C36A}
[data-univers="fetes"] .couverture h1{line-height:1.06}
[data-univers="fetes"] .scene{background:#0B0B0F}
[data-univers="fetes"] .scene-geste{border:1px solid rgba(228,195,106,.55);background:rgba(18,16,22,.82);color:#F7F1E6}

/* La scène : feu d'artifice au fond, « 40 », deux pans de lamé, confettis. */
.rideau{position:absolute;inset:0;overflow:hidden;perspective:1000px;container-type:size;background:#0B0B0F}
.scene .rideau-fond{object-position:50% 0}
.rideau-chiffre{
  position:absolute;left:0;right:0;top:54%;z-index:2;transform:translateY(-50%);
  font:400 150px/.9 'Abril Fatface',Georgia,serif;font-size:min(44cqw,56cqh);letter-spacing:-.01em;text-align:center;
  color:#E4C36A;
  background:linear-gradient(172deg,#FCEFC0 0%,#EBCB73 30%,#B98E3A 56%,#F3D98A 76%,#C9A04A 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(228,195,106,.3));
}
/* Chaque pan montre sa moitié de l'image fermée, cadrée comme si elle couvrait toute la scène (plis et or dessous
   pour le cas où l'image n'est pas encore arrivée). Ouvert : les pans restent visibles sur les bords, comme au théâtre. */
.rideau-pan{
  position:absolute;top:0;bottom:0;z-index:3;width:50%;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0,rgba(0,0,0,0) 14px,rgba(255,255,255,.05) 26px,rgba(0,0,0,0) 38px,rgba(0,0,0,.16) 52px),
    url(img/couverture/fetes-rideau.a3c2dca029.webp) 0 72%/200% auto no-repeat,
    repeating-linear-gradient(90deg,#4A3612 0,#B98E3A 9px,#F3D98A 15px,#A77E2E 24px,#4A3612 34px);
}
.rideau-pan-g{left:0;transform-origin:0 50%;transform:translateX(-61%) rotateY(8deg);box-shadow:16px 0 34px rgba(0,0,0,.6)}
.rideau-pan-d{right:0;transform-origin:100% 50%;transform:translateX(61%) rotateY(-8deg);box-shadow:-16px 0 34px rgba(0,0,0,.6);background-position:0 0,100% 72%,0 0}
.rideau-confettis{position:absolute;inset:0;z-index:4;pointer-events:none}
.rideau-confettis i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:7px;height:11px;border-radius:1px;background:var(--c,#E4C36A);transform:rotate(var(--r));opacity:.95}
.rideau-confettis i:nth-child(3n){width:7px;height:7px;border-radius:50%}
.rideau-confettis i:nth-child(4n+2){width:4px;height:13px}
.rideau-confettis i:nth-child(1){--x:30;--y:15;--r:20deg;--d:0s}
.rideau-confettis i:nth-child(2){--x:64;--y:11;--r:-35deg;--c:#FF2E88;--d:.05s}
.rideau-confettis i:nth-child(3){--x:45;--y:24;--r:60deg;--c:#F7F1E6;--d:.12s}
.rideau-confettis i:nth-child(4){--x:77;--y:30;--r:15deg;--d:.08s}
.rideau-confettis i:nth-child(5){--x:21;--y:35;--r:-50deg;--c:#FF2E88;--d:.18s}
.rideau-confettis i:nth-child(6){--x:56;--y:19;--r:80deg;--d:.22s}
.rideau-confettis i:nth-child(7){--x:38;--y:72;--r:-20deg;--c:#F7F1E6;--d:.1s}
.rideau-confettis i:nth-child(8){--x:71;--y:66;--r:40deg;--c:#FF2E88;--d:.26s}
.rideau-confettis i:nth-child(9){--x:27;--y:57;--r:10deg;--d:.3s}
.rideau-confettis i:nth-child(10){--x:85;--y:47;--r:-70deg;--c:#F7F1E6;--d:.14s}
.rideau-confettis i:nth-child(11){--x:50;--y:81;--r:25deg;--c:#FF2E88;--d:.34s}
.rideau-confettis i:nth-child(12){--x:15;--y:70;--r:55deg;--d:.2s}
.rideau-confettis i:nth-child(13){--x:62;--y:77;--r:-15deg;--d:.38s}
.rideau-confettis i:nth-child(14){--x:34;--y:42;--r:90deg;--c:#FF2E88;--d:.06s}
.rideau-confettis i:nth-child(15){--x:75;--y:85;--r:-40deg;--c:#F7F1E6;--d:.28s}
.rideau-confettis i:nth-child(16){--x:42;--y:9;--r:35deg;--c:#FF2E88;--d:.16s}
.rideau-confettis i:nth-child(17){--x:88;--y:19;--r:-25deg;--d:.24s}
.rideau-confettis i:nth-child(18){--x:11;--y:17;--r:70deg;--c:#F7F1E6;--d:.32s}
.rideau-confettis i:nth-child(19){--x:59;--y:38;--r:-60deg;--c:#F7F1E6;--d:.02s}
.rideau-confettis i:nth-child(20){--x:23;--y:88;--r:30deg;--c:#FF2E88;--d:.36s}
.rideau-confettis i:nth-child(21){--x:82;--y:73;--r:5deg;--d:.4s}
.rideau-confettis i:nth-child(22){--x:67;--y:51;--r:65deg;--c:#FF2E88;--d:.11s}
.rideau-confettis i:nth-child(23){--x:36;--y:85;--r:-45deg;--d:.19s}
.rideau-confettis i:nth-child(24){--x:52;--y:63;--r:15deg;--c:#F7F1E6;--d:.27s}
/* Le geste : les pans s'écartent (0,1 → 1 s), le chiffre monte (0,45 → 1,05 s), les confettis tombent (0,3 → 1,3 s). */
.scene.joue .rideau-pan{animation:f-pan .9s var(--courbe) .1s both}
@keyframes f-pan{from{transform:none}}
.scene.joue .rideau-chiffre{animation:f-chiffre .6s var(--courbe) .45s both}
@keyframes f-chiffre{from{opacity:0;transform:translateY(-44%) scale(.8)}}
.scene.joue .rideau-confettis i{animation:f-tombe .6s cubic-bezier(.4,0,.8,.6) calc(.3s + var(--d)) both}
@keyframes f-tombe{from{transform:translateY(calc((var(--y) + 12) * -1cqh)) rotate(calc(var(--r) - 220deg));opacity:1}}

/* ─── Barre « Quelle occasion ? » : chaque compteur prend l'accent de sa rubrique ─── */
[data-univers="fetes"] .puces a[href="#soiree"]{--souligne:#FF6EC7}
[data-univers="fetes"] .puces a[href="#soiree"] .puce-compte{color:#FF6EC7}
[data-univers="fetes"] .puces a[href="#cremaillere"]{--souligne:#C8664A}
[data-univers="fetes"] .puces a[href="#cremaillere"] .puce-compte{color:#E59A7F}
[data-univers="fetes"] .puces a[href="#evjf"]{--souligne:#FF2E88}
[data-univers="fetes"] .puces a[href="#evjf"] .puce-compte{color:#FF5FA2}
[data-univers="fetes"] .puces a[href="#evg"]{--souligne:#00E5FF}
[data-univers="fetes"] .puces a[href="#evg"] .puce-compte{color:#00E5FF}
[data-univers="fetes"] .puces a[href="#noel"] .puce-compte{color:#8FD0A8}

/* ─── Rubriques : guirlande de confettis entre deux occasions, accent du modèle phare ─── */
[data-univers="fetes"] .rubrique,[data-univers="fetes"] .invites{position:relative;overflow-x:clip}
[data-univers="fetes"] .rubrique + .rubrique,[data-univers="fetes"] .invites{border-top:0}
[data-univers="fetes"] .rubrique + .rubrique::before,[data-univers="fetes"] .invites::before{
  content:'';position:absolute;left:0;right:0;top:-9px;z-index:1;height:18px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='18'%3E%3Cg fill='%23E4C36A'%3E%3Crect x='4' y='6' width='7' height='4' rx='.6' transform='rotate(-20 7 8)'/%3E%3Ccircle cx='54' cy='11' r='2'/%3E%3Crect x='95' y='4' width='6' height='3.6' rx='.6' transform='rotate(35 98 6)'/%3E%3C/g%3E%3Cg fill='%23FF2E88'%3E%3Crect x='25' y='10' width='6' height='3.6' rx='.6' transform='rotate(25 28 12)'/%3E%3Crect x='75' y='5' width='7' height='3.6' rx='.6' transform='rotate(-35 78 7)'/%3E%3Ccircle cx='118' cy='12' r='1.8'/%3E%3C/g%3E%3Cg fill='%23F7F1E6'%3E%3Ccircle cx='40' cy='5' r='1.5'/%3E%3Crect x='106' y='9' width='5' height='3' rx='.5' transform='rotate(-10 108 10)'/%3E%3Ccircle cx='15' cy='14' r='1.3'/%3E%3Ccircle cx='66' cy='15' r='1.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/132px 18px repeat-x;
}
[data-univers="fetes"] .rubrique-tete{position:relative;isolation:isolate}
[data-univers="fetes"] .rubrique h2{margin-top:14px}
[data-univers="fetes"] .folio{font-weight:500}
#soiree{--accent:#FF6EC7;--accent-texte:#FF6EC7;--souligne:#FF6EC7;--filet-fort:#FF6EC7}
#evjf{--accent:#FF2E88;--accent-texte:#FF5FA2;--souligne:#FF2E88;--filet-fort:#FF2E88}
#evg{--accent:#00E5FF;--accent-texte:#00E5FF;--souligne:#00E5FF;--filet-fort:#00E5FF}
#nouvel-an{--accent:#D4AF37;--accent-texte:#D4AF37;--souligne:#D4AF37}

/* Chiffres géants en filigrane : l'âge rond, le 24 décembre, le 31. Contenu décoratif (texte de remplacement vide). */
#anniversaire-adulte .rubrique-tete::after,#noel .rubrique-tete::after,#nouvel-an .rubrique-tete::after{
  position:absolute;z-index:-1;right:2px;top:-34px;pointer-events:none;
  font:400 clamp(128px,37vw,280px)/.8 'Abril Fatface',Georgia,serif;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(228,195,106,.2);
}
#anniversaire-adulte .rubrique-tete::after{content:'50';content:'50' / ''}
#noel .rubrique-tete::after{content:'24';content:'24' / '';-webkit-text-stroke-color:rgba(228,195,106,.24)}
#nouvel-an .rubrique-tete::after{content:'31';content:'31' / '';-webkit-text-stroke-color:rgba(212,175,55,.24)}

/* Crémaillère : bande claire, terracotta et intérieur bohème (seule rubrique en clair). */
[data-univers="fetes"] .bande-creme{
  color-scheme:light;color:var(--encre);
  --bande:#F4EBDD;--fond:#F4EBDD;--surface:#FBF6EE;
  --encre:#3F2A24;--encre-douce:#4A3530;--gris:#6B5A52;
  --accent:#9E4A33;--accent-texte:#9E4A33;--sur-accent:#FFFFFF;--souligne:#C8664A;
  --filet:rgba(63,42,36,.16);--filet-fort:#C8664A;
  --bouton-fond:#9E4A33;--bouton-texte:#FFFFFF;--bouton-survol:#87402C;--focus:#3F2A24;
}
[data-univers="fetes"] .bande-creme::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 60% at 100% 0,rgba(200,102,74,.12),rgba(200,102,74,0) 60%),radial-gradient(90% 50% at 0 100%,rgba(91,108,93,.12),rgba(91,108,93,0) 60%);
}
[data-univers="fetes"] .bande-creme > *{position:relative;z-index:1}
/* Noël : bande Sapin, or et rouge houx (décor seulement). */
[data-univers="fetes"] .bande-sapin{
  --bande:#0F2A1F;--fond:#0F2A1F;--surface:#173A2B;
  --gris:#A9B5A9;--encre-douce:#E9E4D8;
  --accent:#E4C36A;--accent-texte:#E4C36A;--souligne:#E4C36A;
  --filet:rgba(228,195,106,.24);
}
[data-univers="fetes"] .bande-sapin .modele-scene{outline-color:rgba(228,195,106,.34)}
[data-univers="fetes"] .rubrique + .bande-sapin::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='18'%3E%3Cg fill='%23E4C36A'%3E%3Crect x='4' y='6' width='7' height='4' rx='.6' transform='rotate(-20 7 8)'/%3E%3Ccircle cx='54' cy='11' r='2'/%3E%3Crect x='95' y='4' width='6' height='3.6' rx='.6' transform='rotate(35 98 6)'/%3E%3C/g%3E%3Cg fill='%23C8343A'%3E%3Ccircle cx='27' cy='11' r='2.4'/%3E%3Ccircle cx='31' cy='13' r='2'/%3E%3Ccircle cx='78' cy='7' r='2.2'/%3E%3Ccircle cx='118' cy='12' r='2'/%3E%3C/g%3E%3Cg fill='%23F7F1E6'%3E%3Ccircle cx='40' cy='5' r='1.5'/%3E%3Ccircle cx='108' cy='9' r='1.3'/%3E%3Ccircle cx='15' cy='14' r='1.3'/%3E%3Ccircle cx='66' cy='15' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ─── Composants sur la nuit ─── */
[data-univers="fetes"] .modele-nom{font-size:21px;line-height:1.1}
[data-univers="fetes"] .idee{border-top:2px solid var(--souligne)}
[data-univers="fetes"] .idee-texte{font-size:15px;line-height:1.65}
[data-univers="fetes"] .invites-num{margin-bottom:10px;font:400 38px/1 'Abril Fatface',Georgia,serif;letter-spacing:0;color:#E4C36A}
[data-univers="fetes"] .invites-liste li:nth-child(2) .invites-num,[data-univers="fetes"] .invites-liste li:nth-child(5) .invites-num{color:#FF6EC7}
[data-univers="fetes"] .invites-liste li:nth-child(3) .invites-num,[data-univers="fetes"] .invites-liste li:nth-child(6) .invites-num{color:#F7F1E6}
[data-univers="fetes"] .etapes-num{font:400 44px/1 'Abril Fatface',Georgia,serif;color:#E4C36A}
[data-univers="fetes"] .questions-liste summary{font-family:var(--texte);font-weight:600;font-size:17px;line-height:1.4}
[data-univers="fetes"] .questions-liste summary::after{color:#E4C36A}
[data-univers="fetes"] .lien-fleche{color:#F7F1E6}

/* Boutons pleine largeur du téléphone : marges latérales réduites pour tenir sur une ligne, deux lignes aérées sinon. */
@media (max-width:639px){
  [data-univers="fetes"] :is(.couverture-actions,.rubrique-action) .bouton{padding:10px 12px;line-height:1.4}
  /* La passerelle passe sous la phrase sur téléphone : règle commune de univers.css. */
}

/* ─── Petits confettis au survol ou au toucher des boutons « Créer » ─── */
[data-univers="fetes"] :is(.couverture-actions,.rubrique-action) .bouton,[data-univers="fetes"] .bandeau-creer{position:relative}
[data-univers="fetes"] :is(.couverture-actions,.rubrique-action) .bouton::after,[data-univers="fetes"] .bandeau-creer::after{
  content:'';position:absolute;inset:-15px -8px;pointer-events:none;opacity:0;
  /* Deux bandes de confettis, au-dessus et au-dessous du bouton : rien ne passe sur le libellé. */
  background:
    radial-gradient(circle,#E4C36A 2px,transparent 2.6px) 4% 3px/8px 8px no-repeat,
    linear-gradient(#FF2E88,#FF2E88) 17% 6px/7px 3px no-repeat,
    radial-gradient(circle,#F7F1E6 1.6px,transparent 2.2px) 31% 1px/8px 8px no-repeat,
    linear-gradient(#E4C36A,#E4C36A) 46% 4px/3px 7px no-repeat,
    radial-gradient(circle,#FF2E88 2px,transparent 2.6px) 62% 2px/8px 8px no-repeat,
    linear-gradient(#F7F1E6,#F7F1E6) 78% 6px/6px 3px no-repeat,
    radial-gradient(circle,#E4C36A 1.8px,transparent 2.4px) 95% 2px/8px 8px no-repeat,
    linear-gradient(#E4C36A,#E4C36A) 9% calc(100% - 4px)/6px 3px no-repeat,
    radial-gradient(circle,#FF2E88 1.8px,transparent 2.4px) 26% calc(100% - 1px)/8px 8px no-repeat,
    linear-gradient(#F7F1E6,#F7F1E6) 53% calc(100% - 5px)/3px 6px no-repeat,
    radial-gradient(circle,#E4C36A 2px,transparent 2.6px) 71% calc(100% - 2px)/8px 8px no-repeat,
    linear-gradient(#FF2E88,#FF2E88) 90% calc(100% - 3px)/7px 3px no-repeat;
}
@media (hover:hover){
  [data-univers="fetes"] :is(.couverture-actions,.rubrique-action) .bouton:hover::after,[data-univers="fetes"] .bandeau-creer:hover::after{animation:f-eclat .75s var(--courbe) both}
}
[data-univers="fetes"] :is(.couverture-actions,.rubrique-action) .bouton:active::after,[data-univers="fetes"] .bandeau-creer:active::after{animation:f-eclat .75s var(--courbe) both}
@keyframes f-eclat{
  0%{opacity:0;transform:scale(.9)}
  30%{opacity:1}
  100%{opacity:0;transform:translateY(-6px) scale(1.05)}
}

/* ─── Ordinateur ─── */
@media (min-width:1024px){
  #anniversaire-adulte .rubrique-tete::after,#noel .rubrique-tete::after,#nouvel-an .rubrique-tete::after{right:auto;left:calc(100% + 64px);top:-6px;font-size:230px}
  #anniversaire-adulte .rubrique-tete::after{content:'30\A 40\A 50';content:'30\A 40\A 50' / '';white-space:pre;font-size:118px;line-height:.84}
}

/* ─── Mouvement réduit : rideau ouvert, chiffre et confettis en place, halos immobiles ─── */
@media (prefers-reduced-motion:reduce){
  body[data-univers="fetes"] main::before{animation:none}
  .scene.joue .rideau-pan,.scene.joue .rideau-chiffre,.scene.joue .rideau-confettis i{animation:none}
  [data-univers="fetes"] :is(.couverture-actions,.rubrique-action) .bouton::after,[data-univers="fetes"] .bandeau-creer::after{animation:none !important}
}