/* Direction artistique 3 · girly et moderne Se pose par-dessus app.css.
   Le rose mène, avec des tons doux (rose poudré, lilas, pêche) et le jaune soleil en accent ; le bleu nuit sert au texte.
   Grands titres en Bricolage très gras ; le Caveat Brush est réservé aux mots mis en valeur. */
:root{--bg:#FFF7FA;--line:#F3DCE8;--sage:#DDF3F1;--cream:#FFE3EE;--accent:#E62A74;--poudre:#FFE3EE;--lilas:#EEE6FF;--lilas-f:#8E5BC8;--peche:#FFE8D9;--menthe:#DDF3F1;
--degrade:linear-gradient(135deg,#F2357F 0%,#FF6FA3 50%,#FF9E7A 100%);--degrade-doux:linear-gradient(135deg,#FFE3EE 0%,#EEE6FF 55%,#FFE8D9 100%);
--ombre:0 8px 24px rgba(216,27,104,.12);--eclat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0Q11.8 8.2 20 10Q11.8 11.8 10 20Q8.2 11.8 0 10Q8.2 8.2 10 0Z' fill='%23FCBF34'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1C1426;--surface:#2A1F36;--line:#45344F;--accent:#FF6FA3;--accent-ink:#1C1426;--poudre:#3A2236;--lilas:#2F2747;--peche:#3A2A26;--menthe:#1E3536;--degrade-doux:linear-gradient(135deg,#3A2236 0%,#2F2747 55%,#3A2A26 100%)}}
/* Couleurs des cinq parties, en dégradés */
.p1{--pc:#F2357F;--pg:linear-gradient(135deg,#F2357F,#FF8FB7)}.p2{--pc:#E8508A;--pg:linear-gradient(135deg,#FF9E7A,#FCBF34)}.p3{--pc:#1E8C94;--pg:linear-gradient(135deg,#1E8C94,#7FD3C9)}
.p4{--pc:#7644A7;--pg:linear-gradient(135deg,#7644A7,#C59BF0)}.p5{--pc:#E5701C;--pg:linear-gradient(135deg,#FE9841,#FF6FA3)}

body{font-feature-settings:"ss01"}
h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.05}
h2{letter-spacing:-.02em}
h3{color:var(--ink);font-size:19px;letter-spacing:-.01em}
.card{border:none;border-radius:24px;box-shadow:var(--ombre)}
.btn{border-radius:99px;border-color:var(--line)}
.btn.pri{background:var(--degrade);border:none;box-shadow:0 6px 16px rgba(242,53,127,.3)}
.kicker{letter-spacing:.08em}
textarea{border-radius:18px;border-color:var(--line);background:#fff}

/* Barre d'onglets : flottante, arrondie */
.tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));border:none;border-radius:26px;box-shadow:0 10px 30px rgba(13,39,80,.14);padding:6px}
.tabbar a{border-radius:20px}
.tabbar a.on{background:var(--poudre);color:var(--accent)}
body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* ---------- Accueil façon magazine */
.cover{border-radius:28px;box-shadow:var(--ombre);max-height:64vh}
.cover.une{aspect-ratio:3/2;object-position:center 30%}
/* Une en plein écran au démarrage : la couverture entière, bord à bord sur téléphone, sans recadrage ;
   sur un grand écran, elle tient dans la hauteur, sur un fond tiré de l'image */
.une-plein{position:relative;overflow:hidden;text-align:center;margin:calc(-14px - env(safe-area-inset-top,0px)) -16px 0;border-radius:0 0 30px 30px;background:#FBE3EA}
.une-plein::before{content:"";position:absolute;inset:-40px;background:var(--une) center/cover;filter:blur(30px);opacity:.45}
.une-plein img{position:relative;display:block;margin:0 auto;width:100%;max-height:calc(100svh - 92px - env(safe-area-inset-bottom,0px));object-fit:contain}
.une-plein + .identite + .bonjour{margin-top:14px}
.bonjour{position:relative;background:var(--degrade);color:#fff;border-radius:28px;padding:18px 18px 16px;margin:-46px 10px 18px;box-shadow:0 10px 26px rgba(242,53,127,.3)}
.bonjour::after{content:"";position:absolute;right:16px;top:14px;width:26px;height:26px;background:var(--eclat) center/contain no-repeat}
.bonjour .salut{font-family:'Caveat Brush',cursive;font-size:30px;line-height:1;margin:0 0 4px}
.bonjour .devise{font-weight:700;margin:0 0 10px}
.bonjour .lien-bande{color:#fff;font-weight:800;font-size:14px;text-decoration:none}
.avatars.serres{gap:0;margin:4px 0 8px}
.avatars.serres .av{margin-right:-10px}
.av svg,.av img{width:var(--t,36px);height:var(--t,36px);display:block}
.av .portrait{background:#fff;border-radius:50%;box-shadow:0 0 0 3px #fff}
.portrait-img{border-radius:50%;object-fit:cover}
.reprendre{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.reprendre .kicker{color:var(--jaune)}
.reprendre::after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:var(--degrade);opacity:.8}
.rubrique{font-size:22px;font-weight:800;margin:22px 0 10px}
/* Les 5 parties en une seule ligne : on lit S A F I A d'un coup d'œil */
.parties-defil{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 18px}
.partie-carte{border:none;border-radius:18px;padding:8px 3px 10px;min-height:96px;color:#fff;background:var(--pg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;text-align:center;cursor:pointer;box-shadow:var(--ombre)}
.partie-carte .lettre{font-family:'Caveat Brush',cursive;font-size:40px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.12)}
.partie-carte .nom{font-size:10.5px;font-weight:800;line-height:1.15;hyphens:none;overflow-wrap:normal}
.safia-carte{background:var(--degrade-doux)}
.partie-tete{margin:26px 0 12px}
.partie-tete .kicker{color:var(--pc)}
.partie-tete h2{font-size:26px;font-weight:800;line-height:1.1;margin:0}
.chcard{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:22px;padding:10px 12px 10px 10px;margin:0 0 10px;box-shadow:var(--ombre)}
.chcard .txt{flex:1;min-width:0}
.chcard small{font-size:12px;font-weight:800;color:var(--pc);text-transform:uppercase;letter-spacing:.06em}
.chcard h3{font-size:17px;line-height:1.2;margin:1px 0 4px;color:var(--ink)}
.chcard .anneau{flex:none}
.vignette{flex:none;width:74px;height:74px;border-radius:20px;background:var(--pg);position:relative;overflow:visible;box-shadow:0 6px 14px rgba(216,27,104,.18)}
.vignette b{position:absolute;left:10px;top:4px;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.05em;text-shadow:0 2px 0 rgba(13,39,80,.12)}
.vignette i{position:absolute;right:-8px;bottom:-8px;width:44px;height:44px;transform:rotate(6deg)}
.vignette i svg,.vignette i img{width:100%;height:100%;display:block}
.liens{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tuile{display:block;border-radius:22px;padding:14px;min-height:96px;text-decoration:none;color:var(--ink)}
.tuile h2{font-size:17px;margin:0 0 2px}.tuile p{font-size:13px;margin:0;color:var(--muted)}
.t1{background:var(--poudre)}.t2{background:var(--lilas)}.t3{background:var(--menthe)}.t4{background:var(--peche)}.t5{background:#FFF3CC}

/* ---------- En-tête de chapitre */
.ch-illus{margin:4px 0 -40px}
.ch-tete{background:var(--pg,var(--degrade));color:#fff;border-radius:28px;padding:20px 18px;box-shadow:var(--ombre);position:relative;margin:0 6px 16px}
.ch-tete::after{opacity:1;background:var(--eclat) center/contain no-repeat;width:34px;height:34px;right:18px;top:18px;border-radius:0}
.ch-tete .kicker,.ch-tete .note{color:#fff;opacity:.95}
.ch-tete .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:2px #fff;font-size:58px;letter-spacing:-.04em}
.ch-tete h1{color:#fff;font-size:30px}
.ch-tete .av b{color:#fff}
.temps-titre{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;color:var(--pc);letter-spacing:-.02em}
.liste-etapes{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
/* Chaque étape est une carte qu'on touche : numéro, titre, flèche */
.liste-etapes a{background:var(--surface,#fff);border:1.5px solid #FFD1E1;border-radius:16px;padding:10px 12px;box-shadow:0 3px 10px rgba(216,27,104,.07);color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.liste-etapes a:active{transform:scale(.98)}
.liste-etapes .pt{width:30px;height:30px;border:none;background:#FFE3EE;color:var(--accent);font-weight:800;font-size:14px}
.liste-etapes .tx{flex:1;font-weight:600;line-height:1.3}
.liste-etapes .tx small{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:1px}
.liste-etapes .chev{flex:none;width:9px;height:9px;margin:0 4px 0 2px;border-top:2.5px solid var(--accent);border-right:2.5px solid var(--accent);border-radius:1px;transform:rotate(45deg)}
.liste-etapes .vu a{background:#FFF5F9;border-color:#FFE3EE}
.liste-etapes .vu .pt{background:var(--accent);color:#fff}
.prog a{height:7px;border-radius:99px}.prog a.on{background:var(--degrade)}
.etape-tete h2{font-size:26px;font-weight:800;line-height:1.12}

/* ---------- Encadrés : cartes douces, sans bordure à gauche */
.box{border:none;border-radius:24px;background:var(--surface);box-shadow:var(--ombre)}
.box > .kicker{display:inline-flex;background:var(--bg);border-radius:99px;padding:4px 12px 4px 4px;margin-bottom:8px}
.box-situation{background:var(--poudre);border:none;position:relative;margin-top:22px;box-shadow:none}
.box-situation::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(252,191,52,.8);transform:rotate(-3deg);border-radius:4px}
.box-situation h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.box-situation > .kicker,.box-routine > .kicker,.box-verif > .kicker{background:#fff}
.box-routine{border:2px dashed #FF8FB7;background:#fff;box-shadow:none}.box-routine .kicker{color:var(--accent)}
.box-verif,.box-science,.box-aide{background:var(--menthe);border:none;box-shadow:none}
.box-approfondissement{background:var(--lilas);border:none;box-shadow:none}.box-approfondissement .kicker{color:var(--lilas-f)}
.box-pratique,.box-exemple,.box-activite{background:var(--peche);border:none;box-shadow:none}.box-pratique .kicker,.box-exemple .kicker,.box-activite .kicker{color:#C2551A}
.box-outil{background:linear-gradient(150deg,#0D2750,#3B2A72)}.box-outil h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:24px}.box-outil > .kicker{background:rgba(255,255,255,.12)}
.box-synthese{background:var(--degrade)}.box-synthese > .kicker{background:rgba(255,255,255,.2)}
.box-alerte{background:#fff;border:2px solid #FF8FB7}
.box-transfert{background:#fff;border:2px solid #9FD9D4;box-shadow:none}
.schema{--bg:#FFF7FA;--line:#F3DCE8;background:var(--degrade-doux);border:none;border-radius:24px}
.schema svg{background:#fff;border-radius:16px}
.opt{border-radius:18px}
.fc .face{border:none;border-radius:22px;box-shadow:var(--ombre)}
.fc .back{background:var(--poudre)}
.tip{border-radius:18px;background:var(--lilas)}
th{background:var(--accent)}
.exergue{background:var(--poudre);border-radius:24px 24px 24px 6px;padding:14px 16px}

/* Emplacements provisoires des illustrations générées */
.scene-da3{margin:4px 0 14px;position:relative;border-radius:26px;overflow:hidden;background:var(--degrade-doux)}
.scene-da3 img{display:block;width:100%;object-fit:cover}
.scene-provisoire{display:flex;align-items:center;justify-content:center;outline:2px dashed rgba(216,27,104,.4);outline-offset:-10px}
.scene-provisoire .eclats{position:absolute;inset:0;width:100%;height:100%}
.scene-provisoire figcaption{position:relative;text-align:center;padding:0 30px}
.scene-provisoire figcaption span{display:inline-block;background:#fff;color:var(--accent);border-radius:99px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.scene-provisoire figcaption b{display:block;font-family:'Caveat Brush',cursive;font-weight:400;font-size:26px;line-height:1.05;margin:6px 0 2px;color:var(--ink)}
.scene-provisoire figcaption small{display:block;font-size:11px;color:var(--muted)}

/* Boussole SAFIA® animée : les pétales s'ouvrent l'un après l'autre, les éclats scintillent, l'orbite tourne lentement */
.boussole .petale{animation:petale .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .09s)}
@keyframes petale{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.boussole .eclat-bs{animation:scintille 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes scintille{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.bs-grande{margin:4px -6px 0}
/* Légende de la boussole : une étiquette par compétence, avec sa lettre et son pourcentage */
.bs-legende{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.bs-chip{display:flex;align-items:center;gap:9px;background:#fff;border-radius:18px;padding:8px 10px;box-shadow:0 4px 14px rgba(216,27,104,.1);border:1.5px solid color-mix(in srgb,var(--cc) 30%,transparent)}
.bs-chip:last-child{grid-column:1/-1;justify-self:center;min-width:50%}
.bs-chip .l{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--cc),var(--cf));color:#fff;font-family:'Caveat Brush',cursive;font-weight:400;font-size:21px;display:flex;align-items:center;justify-content:center}
.bs-chip b{display:block;font-size:13.5px;line-height:1.15;color:var(--cf)}
.bs-chip small{font-size:12px;font-weight:700;color:var(--cf);opacity:.75}
.bs-grande .orbite{transform-origin:150px 120px;animation:orbite 40s linear infinite}
@keyframes orbite{to{transform:rotate(360deg)}}
/* Portraits autocollants et collages : ils se posent avec un petit rebond */
.scene-collage svg,.av .portrait{animation:pose .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes pose{from{transform:scale(.85) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.av .portrait{background:none;box-shadow:none;border-radius:0}
@media (prefers-reduced-motion:reduce){.boussole .petale,.boussole .eclat-bs,.bs-grande .orbite,.scene-collage svg,.av .portrait{animation:none}}

/* Safia, la coach : visage rond et bulle de parole */
.coach{display:flex;gap:10px;align-items:flex-end;margin:12px 0 16px}
.coach img{flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(216,27,104,.22)}
.coach .bulle{background:var(--surface,#fff);border:1.5px solid #FFD1E1;border-radius:20px 20px 20px 6px;padding:9px 14px 10px;box-shadow:0 6px 18px rgba(216,27,104,.1)}
.coach .bulle b{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.coach .bulle p{margin:2px 0 0;font-size:15.5px;line-height:1.45}
.coach-carte img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff}
.coach-carte{background:var(--degrade-doux)}
.preambule-coach{display:block;width:min(260px,70%);margin:6px auto 14px;border-radius:26px;box-shadow:var(--ombre)}

/* Audit des illustrations, lot 1 : étape pas encore touchée = dessin pâli, texte lisible en bleu nuit */
figure.schema .eteint :is(rect,path,circle,ellipse,polygon,line,polyline,image){fill-opacity:.28;stroke-opacity:.3}
figure.schema .eteint text,figure.schema .eteint tspan{fill:var(--ink)!important;fill-opacity:.82}
figure.schema .eteint{opacity:1!important;filter:saturate(.45)}
/* La barre d'onglets ne cache plus le bas des schémas */
figure.schema{scroll-margin-bottom:110px;margin-bottom:22px}
/* Pastille d'aide sous les schémas des chapitres sensibles */
.aide-pastille{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:7px 14px;border-radius:99px;background:#FFE3EE;color:#B0124F;font-weight:800;font-size:14px;text-decoration:none}
.aide-pastille::before{content:"";width:16px;height:16px;flex:none;background:var(--eclat) center/contain no-repeat}
/* Cartes mémoire : la carte prend la hauteur de son texte (les deux faces superposées en grille), deux par ligne sur téléphone */
.cartes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fc{display:grid;min-height:0}
.fc .face{position:relative;inset:auto;grid-area:1/1;min-height:72px;padding:12px 14px;font-size:15.5px;line-height:1.35}
/* Safia dans le texte d'un chapitre : portrait en buste (on voit son geste), bulle, petite entrée en mouvement */
.coach-texte img{width:84px;height:104px;border-radius:22px;object-fit:cover;object-position:50% 12%}
.coach .bulle p{margin:2px 0 0}
.coach-texte,.bulle-amie{animation:coach-entre .6s cubic-bezier(.3,1.4,.5,1) both}
.coach-texte img{animation:coach-geste 3.2s ease-in-out .6s 1}
@keyframes coach-entre{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes coach-geste{0%,100%{transform:none}30%{transform:rotate(-4deg) translateY(-3px)}60%{transform:rotate(3deg)}}
.bulle-amie .portrait{flex:none}
.bulle-amie .bulle b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.coach-texte,.bulle-amie,.coach-texte img{animation:none}}
/* Encadrés repliés (Pour aller plus loin, Comment le sait-on ?) : un titre, un bouton « Lire » */
details.pli>summary{list-style:none;cursor:pointer;display:block;position:relative;padding-right:64px}
details.pli>summary::-webkit-details-marker{display:none}
details.pli>summary h4{margin:6px 0 0}
details.pli .pli-ouvrir{position:absolute;right:0;top:50%;transform:translateY(-50%);background:#fff;color:var(--accent);font-weight:800;font-size:14px;padding:6px 12px;border-radius:99px;box-shadow:0 3px 10px rgba(216,27,104,.15)}
details.pli[open] .pli-ouvrir{display:none}
details.pli[open]>summary{margin-bottom:8px}
/* L'image de la main : animation en fondu des quatre temps */
.main-anim{position:relative;aspect-ratio:1/1;border-radius:24px;overflow:hidden;max-width:420px;margin:0 auto}
.main-anim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 2.8s ease}
.main-anim img.on{opacity:1;transform:scale(1)}
.main-anim .main-num{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;background:#fff;color:#D81B68;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(216,27,104,.2)}
.main-texte{text-align:center;font-weight:800;font-size:18px;margin:12px 0 6px;min-height:2.6em}
/* Le message d'ouverture de Safia */
.ouverture-safia{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 24px;animation:coach-entre .7s cubic-bezier(.3,1.4,.5,1) both}
.ouverture-safia img{width:min(250px,64%);aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;border-radius:30px;box-shadow:0 14px 34px rgba(216,27,104,.22)}
.ouverture-safia .bulle{position:relative;background:var(--surface,#fff);border:1.5px solid #FFD1E1;border-radius:26px;padding:18px 20px 8px;box-shadow:0 8px 24px rgba(216,27,104,.12)}
.ouverture-safia .bulle::before{content:"";position:absolute;top:-11px;left:50%;width:22px;height:22px;background:inherit;border-left:1.5px solid #FFD1E1;border-top:1.5px solid #FFD1E1;transform:translateX(-50%) rotate(45deg)}
.ouverture-safia .bulle b{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.ouverture-safia .bulle p{font-size:17px;line-height:1.55;margin:0 0 12px}
.ouverture-safia .bulle p:first-of-type{font-family:'Caveat Brush',cursive;font-size:26px;line-height:1.15;color:var(--ink)}
.ouverture-safia .bulle p:last-child{font-weight:800;color:var(--accent)}
.ouverture-safia .btn{min-width:240px}
/* Premier lancement : la une en plein écran, puis l'accueil de Safia (ses animations restent en pause tant que la une est là) */
.ouv-une{position:fixed;inset:0;z-index:300;overflow:hidden;background:#FBE3EA;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .7s ease}
.ouv-une::before{content:"";position:absolute;inset:-40px;background:var(--une) center/cover;filter:blur(30px);opacity:.45}
.ouv-une img{position:relative;width:100%;height:100%;object-fit:contain}
.ouv-une .ouv-toucher{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:0;right:0;margin:0 auto;width:max-content;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.85);color:var(--accent);font-weight:800;font-size:14px;white-space:nowrap;animation:coach-entre .6s ease 1.2s both}
.ouv-une.part{opacity:0;pointer-events:none}
.ouverture-safia.attente,.ouverture-safia.attente *{animation-play-state:paused!important}
/* Ouverture : la photo détourée de Safia dit bonjour et souhaite la bienvenue (0 à 2,8 s), des éclats l'entourent, elle devient son personnage 3D, puis la bulle arrive */
.metamorphose{position:relative;width:min(250px,64%);aspect-ratio:4/5;border-radius:30px;overflow:hidden;box-shadow:0 14px 34px rgba(216,27,104,.22)}
.metamorphose .m-fond{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#FBD3C8,#F2A79A 75%)}
.metamorphose img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.metamorphose .m-photo{inset:1% auto auto -15%;width:130%;height:auto;transform-origin:50% 60%;animation:m-photo 6.6s ease both}
.metamorphose .m-perso{opacity:0;animation:m-perso 1.4s ease 5.7s both}
.metamorphose .m-eclats{position:absolute;inset:-10%;background:radial-gradient(circle at 30% 30%,#fff 0 3px,transparent 4px),radial-gradient(circle at 72% 22%,#FCBF34 0 4px,transparent 5px),radial-gradient(circle at 62% 70%,#fff 0 3px,transparent 4px),radial-gradient(circle at 24% 76%,#FF8FB7 0 4px,transparent 5px),radial-gradient(circle at 82% 52%,#fff 0 2px,transparent 3px),radial-gradient(circle at 16% 48%,#FCBF34 0 3px,transparent 4px),radial-gradient(circle at 50% 45%,rgba(255,255,255,.9),transparent 58%);opacity:0;animation:m-eclats 1.6s ease 5.3s both}
@keyframes m-photo{0%{opacity:0;transform:translateY(14px) scale(.94)}6%{opacity:1;transform:none}13%{transform:rotate(-2.5deg)}20%{transform:rotate(2deg)}27%,82%{opacity:1;filter:none;transform:none}100%{opacity:0;filter:blur(7px) saturate(1.4);transform:scale(1.07)}}
@keyframes m-perso{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes m-eclats{0%{opacity:0;transform:scale(.5) rotate(0)}40%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(40deg)}}
.m-legende{position:relative;min-height:3.7em;margin:-4px 0 0;text-align:center;font-family:'Caveat Brush',cursive;font-size:22px;line-height:1.2;color:var(--accent);width:min(330px,90%)}
.m-legende span{position:absolute;left:0;right:0;top:0;opacity:0}
.m-legende .l1{animation:m-dit 2.8s ease .4s both}
.m-legende .l1b{animation:m-dit 2.6s ease 3.1s both}
.m-legende .l2{animation:m-l2 .9s ease 6.3s both}
@keyframes m-dit{0%{opacity:0;transform:translateY(6px)}15%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes m-l2{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ouverture-safia .bulle,.ouverture-safia>.btn{animation:coach-entre .7s cubic-bezier(.3,1.4,.5,1) 7.1s both}
@media (prefers-reduced-motion:reduce){.metamorphose .m-photo,.metamorphose .m-eclats,.m-legende .l1,.m-legende .l1b{display:none}.metamorphose .m-perso,.m-legende .l2{opacity:1;animation:none}.ouverture-safia .bulle,.ouverture-safia>.btn{animation:none}}
/* Schémas à toucher : une consigne visible, des pastilles qui invitent au geste */
.consigne-touche{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:800;font-size:15px;color:var(--accent)}
.consigne-touche .doigt{flex:none;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(242,53,127,.5);animation:touche-pulse 1.6s ease-out infinite}
@keyframes touche-pulse{0%{box-shadow:0 0 0 0 rgba(242,53,127,.5)}100%{box-shadow:0 0 0 12px rgba(242,53,127,0)}}
svg .lab.pulse rect{animation:lab-pulse 1.6s ease-in-out infinite}
@keyframes lab-pulse{0%,100%{opacity:1}50%{opacity:.7}}
.tip.carte-organe{background:#fff;border:2px solid var(--oc,#FFD1E1);box-shadow:0 6px 18px rgba(216,27,104,.10);line-height:1.5}
@media (prefers-reduced-motion:reduce){.consigne-touche .doigt,svg .lab.pulse rect{animation:none}}
/* Les phases du cycle en cartes qu'on fait glisser */
.phases-defil{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none}
.phases-defil::-webkit-scrollbar{display:none}
.phase-carte{flex:none;width:84%;scroll-snap-align:start;background:#fff;border:2px solid var(--pc);border-radius:22px;overflow:hidden;box-shadow:0 8px 20px rgba(216,27,104,.10)}
.phase-carte .pc-tete{display:flex;align-items:center;gap:10px;background:var(--pc);color:#fff;padding:10px 14px}
.phase-carte .pc-tete b{display:block;font-size:17px;line-height:1.2}
.phase-carte .pc-tete small{font-weight:700;opacity:.92}
.phase-carte .pc-num{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--pc);font-weight:800;display:flex;align-items:center;justify-content:center}
.phase-carte svg{display:block;width:100%;height:auto;padding:8px 10px 0}
.phase-carte .pc-horm{display:block;margin:6px 14px 0;padding:6px 12px;border-radius:99px;background:color-mix(in srgb,var(--pc) 12%,#fff);color:var(--pc);font-weight:800;font-size:14px;text-align:center}
.phase-carte p{margin:10px 14px 14px;font-size:16px;line-height:1.5}
.pc-points{display:flex;justify-content:center;gap:8px;margin:4px 0 6px}
.pc-points button{width:10px;height:10px;border-radius:50%;border:none;padding:0;background:var(--pc);opacity:.3;cursor:pointer}
.pc-points button.on{opacity:1;width:26px;border-radius:99px}
/* La roue du cycle : quatre gros boutons de phase et une navigation jour par jour */
.rc-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 8px}
.rc-ph{border:2px solid var(--pc);background:#fff;color:var(--pc);border-radius:14px;padding:10px 2px;font-weight:800;font-size:13px;cursor:pointer}
.rc-ph.on{background:var(--pc);color:#fff}
.rc-nav{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rc-nav span{flex:1;text-align:center;font-weight:700}
.rc-nav .rc-moins,.rc-nav .rc-plus{min-width:44px;font-size:22px;padding:6px 0}
.carnet-titre{display:block;margin:12px 0 4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
/* Outils offerts : Mon cycle en couleurs, Mon auto-coaching */
.outils-offerts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.outil-tuile{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:20px;padding:10px;text-decoration:none;color:var(--ink);box-shadow:var(--ombre)}
.outil-tuile img,.outil-tuile .mini-roue{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.outil-tuile b{font-size:15px;line-height:1.2}
.outil-tuile small{color:var(--muted);font-size:12.5px;line-height:1.3}
.mini-roue{display:block;background:radial-gradient(circle at 50% 50%,#fff 0 24%,transparent 25%),conic-gradient(#F2357F 0 18%,#9B87D9 18% 45%,#E08A00 45% 55%,#E8476F 55% 100%);border-radius:50%}
.outil-tuile .mini-roue{aspect-ratio:auto;height:96px;width:96px;margin:4px auto}
.outil-tete{background:linear-gradient(135deg,#FFE3EE,#F1E8FF)}
.champ{width:100%;box-sizing:border-box;border:1.5px solid #FFD1E1;border-radius:14px;padding:10px 12px;font:inherit;background:#fff}
textarea.champ{min-height:84px}
.roue-carte{text-align:center}
.roue-jours{width:100%;max-width:340px}
.roue-jours .petale{cursor:pointer}
.roue-jours .petale.choisi rect{stroke:#0D2750;stroke-width:3}
.legende-roue{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;font-size:13px;font-weight:700}
.legende-roue span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:-1px}
.cy-q{margin:12px 0 6px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid #FFD1E1;background:#fff;border-radius:99px;padding:7px 12px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.chip.on{background:var(--c,var(--accent));border-color:var(--c,var(--accent));color:#fff}
.alerte-douce{margin-top:10px;background:#FFF1EA;border-radius:12px;padding:8px 10px}
.duree{display:inline-block;background:#FFE3EE;color:#B0174F;border-radius:99px;padding:3px 10px;margin:2px}
.lien-outil{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.lien-outil img,.lien-outil .mini-roue{flex:none;width:76px;height:58px;object-fit:cover;border-radius:12px}
.lien-outil .mini-roue{width:58px}
.lien-outil b{display:block}.lien-outil small{color:var(--muted)}
.vagues-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.vague-tuile{display:block;background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--ombre);border-bottom:5px solid var(--c)}
.vague-tuile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.vague-tuile span{display:block;padding:8px 10px}
.vague-tuile b{display:block;color:var(--c);font-size:15px}.vague-tuile small{color:var(--muted)}
.vague-hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:12px;box-shadow:var(--ombre)}
.vague-hero img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.vague-hero div{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;background:linear-gradient(transparent,rgba(13,39,80,.75));color:#fff}
.vague-hero .kicker{color:#fff;opacity:.9}.vague-hero h1{color:#fff;margin:2px 0 0}
.defi{border-left:6px solid var(--c)}
.outil-tuile .mini-roue{display:block;width:100%;height:auto;aspect-ratio:4/3;background:linear-gradient(135deg,#FFF1F6,#F1E8FF);border-radius:14px;padding:8px;box-sizing:border-box}
.lien-outil .mini-roue{flex:none;width:58px;height:58px;background:none;border-radius:0;padding:0}
/* Chapitre 5 : le jeu explorer/s'engager et le quiz valeur, goût ou talent */
.ee-jeu{margin-top:10px}
.ee-ligne{background:#fff;border-radius:16px;padding:10px 12px;margin:0 0 8px;box-shadow:0 3px 10px rgba(216,27,104,.06)}
.ee-ligne b{display:block;margin-bottom:6px}
.ee-cases{display:flex;flex-wrap:wrap;gap:6px}
.ee-cases .chip{font-size:13px;padding:6px 10px}
.quiz{padding:4px 2px}
.quiz-pos{margin:0 0 6px;font-weight:800;color:var(--accent);font-size:14px}
.quiz-barre{height:8px;border-radius:99px;background:#FFE3EE;overflow:hidden;margin-bottom:12px}
.quiz-barre i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.quiz-phrase{font-size:20px;font-weight:800;line-height:1.35;text-align:center;margin:8px 4px 14px}
.quiz-choix{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quiz-btn{display:flex;flex-direction:column;align-items:center;gap:4px;border:2.5px solid var(--c);background:#fff;border-radius:18px;padding:8px 4px 10px;font:inherit;font-weight:800;color:var(--c);cursor:pointer}
.quiz-btn img{width:100%;max-width:90px;aspect-ratio:1;object-fit:cover;border-radius:14px}
.quiz-btn.bonne{background:var(--c);color:#fff}
.quiz-btn.fausse{opacity:.45}
.quiz-btn[disabled]{cursor:default}
.quiz-retour{margin-top:12px}
.quiz-verdict{font-size:18px;font-weight:800;margin:0 0 4px}
.quiz-verdict.ok{color:#167A70}.quiz-verdict.non{color:#C24A38}
.quiz-score{font-size:44px;font-weight:800;text-align:center;color:var(--accent);margin:6px 0}
.quiz-moi{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.quiz-moi img{flex:none;width:64px;height:64px;border-radius:14px;object-fit:cover}
.quiz-moi>div{flex:1}
/* Porte-voix : écouter le texte */
.etape-tete{position:relative}
.porte-voix{display:inline-flex;align-items:center;gap:6px;margin-top:8px;border:2px solid var(--accent);background:#fff;color:var(--accent);border-radius:99px;padding:6px 14px 6px 10px;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.porte-voix.lit{background:var(--accent);color:#fff;animation:pv-pulse 1.4s ease-in-out infinite}
.porte-voix.mini{float:right;margin:0 0 6px 8px;padding:4px 10px 4px 8px;font-size:12.5px;border-width:1.5px}
details.box summary .porte-voix.mini{float:none;margin:0 0 0 auto;order:9}
@keyframes pv-pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,53,127,.35)}50%{box-shadow:0 0 0 8px rgba(242,53,127,0)}}
@media (prefers-reduced-motion:reduce){.porte-voix.lit{animation:none}}
/* Outils offerts verrouillés tant que le chapitre 2 n'est pas terminé */
.outil-tuile.verrou{opacity:.6;filter:grayscale(.55)}
.outil-tuile.verrou small{display:flex;align-items:center;gap:4px;color:var(--accent);font-weight:800}
.outil-tete + .coach + .card .barre{display:block;height:10px}
.cadeau{background:linear-gradient(135deg,#FFE3EE,#FFF1D6);border:2px solid #FFD1E1}
.pv-ligne{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pv-reglage{font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;margin-top:8px}
/* Chapitre 13 : le jeu « Et moi, quel rôle ? » */
.qr-choix{display:flex;flex-direction:column;gap:8px}
.qr-btn{text-align:left;border:2px solid #FFD1E1;background:#fff;border-radius:16px;padding:12px 14px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.qr-btn:active{background:#FFE3EE}
.qr-ligne{display:grid;grid-template-columns:1fr 1.2fr 20px;align-items:center;gap:8px;margin:6px 0;font-weight:700;font-size:14px}
.qr-barre{height:10px;border-radius:99px;background:#F1E8EE;overflow:hidden}.qr-barre i{display:block;height:100%;background:var(--c);border-radius:99px}
.qr-conseil{border-left:5px solid var(--c);background:#fff;border-radius:14px;padding:10px 12px;margin:10px 0}
.qr-conseil b{color:var(--c)}.qr-conseil p{margin:4px 0 0}