/* PopTheDate — atmosphère de /famille/ (Famille & enfants), chargée après univers.css par la page générée.
   La chambre d'enfant un matin de printemps : papier « lait » au grain léger, bandes pastel à bord de nuage festonné,
   cartes en papier découpé (coins de 20 px, ombre franche d'une teinte plus foncée), surpiqûres bleu layette.
   Les boutons gardent le gabarit commun (2 px). Signature : le mobile de berceau de la couverture (.berceau, HTML dans
   vitrine/_univers/famille.mjs) et l'étiquette lilas du sceau PtD, reprise en repère de rubrique.
   Mouvement : tout se joue sous « .scene.joue » : le geste en 1,3 s, puis le mobile se balance et s'immobilise avant
   5 s (WCAG 2.2.2) ; rejouer la scène le relance. L'état final est l'état sans animation, et univers.css ramène tout à
   cet état quand « réduire les animations » est demandé. */

[data-univers="famille"]{
  --f-lait:#FFF8F0; --f-nuage:#DCEEF8; --f-dragee:#F7D6E0; --f-menthe:#D6EDE2; --f-layette:#9CC3E6; --f-soleil:#FFD23F;
  --f-lilas-fonce:#634889; /* petits textes lilas sur les bandes pastel (≥ 5,5:1 ; le lilas #775BA1 tombe à 4,1:1 sur Dragée) */
  --f-teinte:var(--f-lait); --f-ombre:#EFE3D6;
  --rayon-image:20px;
  /* Papier « lait » : grain de l'accueil en multiplication, ramené à 60 % par un voile de la teinte du fond. */
  --f-grain:url(img/grain-fond-ombre.53e947f827.jpg);
  /* Bord de nuage festonné : grands et petits festons alternés, en masque (la bande garde sa couleur ou son dégradé). */
  --f-feston:radial-gradient(circle at 50% 100%,#000 16px,transparent 16.5px) 0 100%/40px 17px repeat-x,
             radial-gradient(circle at 50% 100%,#000 11px,transparent 11.5px) 20px 100%/40px 12px repeat-x;
}
.page-univers[data-univers="famille"]{
  background-image:linear-gradient(color-mix(in srgb,var(--f-lait) 40%,transparent) 0 0),var(--f-grain);
  background-size:auto,480px;background-blend-mode:normal,multiply;
}

/* ─── Couverture : le mobile de berceau ─── */
[data-univers="famille"] .formule{color:var(--encre)}
[data-univers="famille"] .scene{background:#F8F2E8}
.berceau{position:absolute;inset:0;overflow:hidden;background:#F8F2E8;container:berceau / size}
/* Le cadre garde les proportions du ciel et du mobile (0,84) ; toutes les mesures du mobile sont en largeur de cadre. */
.berceau-cadre{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;aspect-ratio:.84;max-width:100%;container-type:size}
.scene .berceau-ciel{object-position:50% 0}
@container berceau (min-aspect-ratio:88/100){
  .scene .berceau-ciel{-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
}
/* Festons de papier « lait » en haut (ciel de lit) et en bas de la scène */
.berceau::before,.berceau::after{content:'';position:absolute;z-index:4;left:0;right:0;height:17px;background:var(--fond);pointer-events:none;-webkit-mask:var(--f-feston);mask:var(--f-feston)}
.berceau::before{top:0;transform:scaleY(-1)}
.berceau::after{bottom:0}

/* Un objet pendu : --x (centre), --w (largeur), --fil (longueur du fil) en unités de cadre */
.pendule{position:absolute;z-index:2;top:0;left:var(--x);width:var(--w);translate:-50% 0}
.pendule-balance{transform-origin:50% 0}
.pendule-fil{display:block;width:1px;height:var(--fil);margin:0 auto -1px;background:linear-gradient(rgb(74 59 92 / .25),rgb(74 59 92 / .6))}
.scene .pendule img{position:static;display:block;width:100%;height:auto;object-fit:contain}
.pendule-ballon{--x:72cqw;--w:16cqw;--fil:29cqw}
.pendule-licorne{--x:18cqw;--w:26cqw;--fil:58cqw}
.pendule-coffre{--x:88cqw;--w:22cqw;--fil:48cqw}
.pendule-cigogne{--x:57cqw;--w:42cqw;--fil:55cqw;z-index:3}

/* La boîte à nuages de la cigogne : fermée puis ouverte, la carte qui en sort, l'étiquette lilas */
.boite{position:relative}
.scene .pendule .boite-fermee{position:absolute;z-index:2;inset:0;opacity:0}
.boite-carte{position:absolute;z-index:1;left:21%;right:21%;bottom:51%;height:76%;overflow:hidden;pointer-events:none}
.carte-bebe{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:2.4cqw;padding:3.2cqw 2cqw 0;background:#FFFDF9;border-radius:2.4cqw 2.4cqw 0 0;box-shadow:inset 0 0 0 1px rgb(74 59 92 / .12);text-align:center}
.carte-bebe::before{content:'';position:absolute;inset:1.4cqw 1.4cqw auto;height:calc(100% - 1.4cqw);border:1px dashed var(--f-layette);border-bottom:0;border-radius:1.6cqw 1.6cqw 0 0}
.carte-bebe-sur{position:relative;font:600 3.5cqw/1.1 'Fredoka','Nunito',system-ui,sans-serif;color:#4A3B5C;text-wrap:balance}
.carte-bebe-coeur{position:relative;display:block;width:72%;height:auto;overflow:visible;filter:drop-shadow(0 .5cqw 0 #E9B9C8)}
.coeur-prenom{font:600 28px 'Fredoka','Nunito',system-ui,sans-serif;fill:#4A3B5C}
.coeur-trait{stroke-dasharray:1 2;stroke-dashoffset:0}
.coeur-feuille{opacity:0}
/* Le sceau PtD en étiquette cadeau lilas, pendue au bout droit du ruban */
.boite-etiquette{position:absolute;z-index:3;left:81%;top:59%;width:17%;aspect-ratio:1;border-radius:50%;background:#FFFDF9;box-shadow:inset 0 0 0 1px #CDBFE0,0 2px 0 #CDBFE0}
.boite-etiquette::before{content:'';position:absolute;left:50%;bottom:100%;width:1px;height:48%;background:#775BA1}
.boite-etiquette-sceau{position:absolute;inset:7%;background:#775BA1;-webkit-mask:url(img/sceau-simplifie.5b4a9ec420.svg) center/contain no-repeat;mask:url(img/sceau-simplifie.5b4a9ec420.svg) center/contain no-repeat}

/* Le geste, sous .scene.joue : les objets descendent l'un après l'autre (léger ressort), le ruban se dénoue, la carte
   monte, puis le cœur se gratte ; 1,3 s en tout, courbe commune. */
@keyframes f-descend{
  0%{transform:translateY(-101%);animation-timing-function:cubic-bezier(.3,0,.2,1)}
  72%{transform:translateY(4%);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:none}
}
@keyframes f-efface{from{opacity:1}to{opacity:0}}
@keyframes f-pop{0%,100%{scale:1}45%{scale:1.045}}
@keyframes f-monte{from{transform:translateY(101%)}to{transform:none}}
@keyframes f-gratte{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes f-seuil{0%,82%{opacity:1}100%{opacity:0}}
/* Balancement amorti : ± 3°, puis 2°, puis 0,7°, et le repos (vers la droite d'abord, ou vers la gauche) */
@keyframes f-balance{0%,100%{rotate:0deg}26%{rotate:3deg}62%{rotate:-2deg}86%{rotate:.7deg}}
@keyframes f-balance-inverse{0%,100%{rotate:0deg}26%{rotate:-3deg}62%{rotate:2deg}86%{rotate:-.7deg}}
.scene.joue .pendule{animation:f-descend .55s both}
.scene.joue .pendule-licorne{animation-delay:.08s}
.scene.joue .pendule-coffre{animation-delay:.16s}
.scene.joue .pendule-cigogne{animation-delay:.24s}
.scene.joue .boite{transform-origin:50% 100%;animation:f-pop .32s var(--courbe) .7s both}
.scene.joue .boite-fermee{animation:f-efface .28s var(--courbe) .7s both}
.scene.joue .carte-bebe{animation:f-monte .3s var(--courbe) .86s both}
.scene.joue .coeur-trait{animation:f-gratte .22s linear 1.03s both}
.scene.joue .coeur-feuille{animation:f-seuil .27s linear 1.03s both}
/* Puis le mobile se balance et s'apaise (déphasé) : chaque objet part au bas de sa descente et s'immobilise avant 5 s
   (4,84 s pour le dernier), une seule fois ; immobile si « réduire les animations ». */
@media (prefers-reduced-motion:no-preference){
  .scene.joue .pendule-balance{animation:f-balance 4.2s ease-in-out .4s}
  .scene.joue .pendule-licorne .pendule-balance{animation-name:f-balance-inverse;animation-duration:4.3s;animation-delay:.48s}
  .scene.joue .pendule-coffre .pendule-balance{animation-name:f-balance-inverse;animation-duration:3.8s;animation-delay:.56s}
  .scene.joue .pendule-cigogne .pendule-balance{animation-duration:4.2s;animation-delay:.64s}
}

/* ─── Bandes pastel à bord de nuage ─── */
[data-univers="famille"] .rubrique,[data-univers="famille"] .invites,[data-univers="famille"] .questions,[data-univers="famille"] .autres{position:relative;border-top:0}
[data-univers="famille"] .rubrique{background-color:var(--f-teinte);background-image:linear-gradient(color-mix(in srgb,var(--f-teinte) 40%,transparent) 0 0),var(--f-grain);background-size:auto,480px;background-blend-mode:normal,multiply}
[data-univers="famille"] .rubrique::before,[data-univers="famille"] .invites::before,[data-univers="famille"] .questions::before,[data-univers="famille"] .autres::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:17px;background:var(--f-degrade,linear-gradient(var(--f-teinte) 0 0));-webkit-mask:var(--f-feston);mask:var(--f-feston);pointer-events:none}
[data-univers="famille"] .puces + .rubrique{margin-top:20px}
.rubrique.f-nuage{--f-teinte:var(--f-nuage);--f-ombre:#B9D5EA;--accent-texte:var(--f-lilas-fonce)}
.rubrique.f-dragee{--f-teinte:var(--f-dragee);--f-ombre:#E8B8C7;--accent-texte:var(--f-lilas-fonce)}
.rubrique.f-menthe{--f-teinte:var(--f-menthe);--f-ombre:#B3D8C4;--accent-texte:var(--f-lilas-fonce)}
/* Gender reveal : moitié rose, moitié bleu */
.rubrique.f-rose-bleu{--f-teinte:#EBE2EC;--f-ombre:#D2C0D8;--accent-texte:var(--f-lilas-fonce);--f-degrade:linear-gradient(90deg,var(--f-dragee),var(--f-nuage));
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--f-dragee) 40%,transparent),color-mix(in srgb,var(--f-nuage) 40%,transparent)),var(--f-grain),linear-gradient(90deg,var(--f-dragee),var(--f-nuage));
  background-size:auto,480px,auto;background-blend-mode:normal,multiply,normal}
[data-univers="famille"] .invites,[data-univers="famille"] .autres{--f-teinte:var(--f-lait)}
[data-univers="famille"] .questions{--f-teinte:var(--f-menthe);--f-ombre:#B3D8C4;--accent-texte:var(--f-lilas-fonce);background-color:var(--f-menthe);background-image:linear-gradient(color-mix(in srgb,var(--f-menthe) 40%,transparent) 0 0),var(--f-grain);background-size:auto,480px;background-blend-mode:normal,multiply}
[data-univers="famille"] .etapes{border-top:2px dotted var(--f-layette)}

/* Repère de rubrique : l'étiquette lilas du sceau PtD */
[data-univers="famille"] .folio{display:flex;align-items:center;gap:10px}
[data-univers="famille"] .folio::before{content:'';flex:none;width:26px;height:26px;background:var(--accent);-webkit-mask:url(img/sceau-simplifie.5b4a9ec420.svg) center/contain no-repeat;mask:url(img/sceau-simplifie.5b4a9ec420.svg) center/contain no-repeat}

/* ─── Papier découpé : cartes blanches, coins de 20 px, ombre franche, surpiqûres bleu layette ─── */
[data-univers="famille"] .contient,[data-univers="famille"] .idee{border:0;box-shadow:0 4px 0 var(--f-ombre);outline:1.5px dashed var(--f-layette);outline-offset:-8px}
[data-univers="famille"] .contient{padding:24px 24px 26px}
[data-univers="famille"] .idee{padding:26px 24px 22px}
[data-univers="famille"] .idee-texte{font-size:17px}
[data-univers="famille"] .modele-scene{outline-color:rgb(74 59 92 / .08);box-shadow:0 4px 0 var(--f-ombre)}
[data-univers="famille"] .modele-cdc{top:10px;left:10px;border-radius:12px;padding:5px 9px}
[data-univers="famille"] .modele-carte{border-radius:12px}
[data-univers="famille"] .modele-carte b{font-family:var(--display);font-style:normal;font-weight:600;font-size:18px}
[data-univers="famille"] .passerelle{background:rgb(255 255 255 / .55);border:1.5px dashed var(--f-layette)}
[data-univers="famille"] .galerie-suite > summary{background:rgb(255 255 255 / .4)}

/* ─── Ce que reçoivent vos invités, étapes, questions ─── */
[data-univers="famille"] .invites-liste li{padding:22px 22px 24px;border-top:0;background:var(--surface);border-radius:var(--rayon-carte);box-shadow:0 4px 0 var(--f-ombre);outline:1.5px dashed var(--f-layette);outline-offset:-8px}
[data-univers="famille"] .invites-num{display:grid;place-items:center;width:36px;height:36px;margin-bottom:12px;border-radius:50%;background:var(--f-nuage);color:var(--encre);font-size:12px;letter-spacing:.06em}
[data-univers="famille"] .invites-liste li:nth-child(3n+2) .invites-num{background:var(--f-dragee)}
[data-univers="famille"] .invites-liste li:nth-child(3n) .invites-num{background:var(--f-menthe)}
[data-univers="famille"] .invites-liste h3,[data-univers="famille"] .etapes-liste h3{font-size:21px}
[data-univers="famille"] .etapes-liste li{border-top:2px dotted var(--f-layette)}
[data-univers="famille"] .etapes-num{font-family:var(--display);font-style:normal;font-weight:600;font-size:30px}
[data-univers="famille"] .questions-liste{display:grid;gap:14px;border-top:0}
[data-univers="famille"] .questions-liste details{padding:0 20px;background:var(--surface);border:0;border-radius:var(--rayon-carte);box-shadow:0 4px 0 var(--f-ombre)}
[data-univers="famille"] .questions-liste summary{font-size:19px;line-height:1.3}
[data-univers="famille"] .questions-liste details p{padding-bottom:20px}

/* Téléphones : la marge réduite des boutons pleine largeur (14 px) est une règle commune de univers.css. */
@media (min-width:760px){
  [data-univers="famille"] .puces + .rubrique{margin-top:24px}
  .carte-bebe-sur{font-size:3.3cqw}
}
@media (min-width:1024px){
  [data-univers="famille"] .scene{box-shadow:0 6px 0 #EADFD0}
  .berceau::before,.berceau::after{height:19px}
}