/* Site d'Amariva : feuille commune aux pages publiques (accueil, élèves, parents, profs, établissements).
   Mise en page : la nuit d'Amariva (celle de l'app et du xolo), des bandes claires pour respirer, une bande jade pour l'appel final ;
   les vraies captures de l'app dans des cadres de téléphone. Un seul thème, voulu sombre : chaque couleur est posée ici.
   Polices auto-hébergées (polices/polices.css) : aucune requête vers un service extérieur à l'ouverture. */
:root{
  --nuit:#031437; --nuit-2:#0A1E4A; --nuit-3:#13295C; --trait:rgba(244,243,250,.12);
  --brume:#F4F3FA; --doux:#A9B4D8;
  --jade:#23B685; --jade-clair:#2EE6A6; --ambre:#E8A83C; --xolo:#52535A;
  /* sur les bandes claires */
  --clair-encre:#031437; --clair-doux:#3B4466; --clair-jade:#0A7A5C; --clair-trait:#DCDDEA; --clair-carte:#FFFFFF;
  --ombre:0 40px 80px -40px rgba(0,0,0,.65);
  --f-marque:"Unbounded", "Bricolage Grotesque", system-ui, sans-serif;
  --f-titre:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --large:1160px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important} }
body{margin:0; background:var(--nuit); color:var(--brume); font:18px/1.6 var(--f-texte); -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:30; background:var(--nuit)}
main{overflow-x:clip}
a{color:inherit}
img{max-width:100%; height:auto}
:focus-visible{outline:3px solid var(--ambre); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-titre); margin:0; line-height:1.04; letter-spacing:-.025em; text-wrap:balance; font-weight:800}
p,ul,ol,figure{margin:0}
[hidden]{display:none!important}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* deux langues dans la page : la langue active cache l'autre */
html[lang="fr"] [data-l="es"], html[lang="es"] [data-l="fr"]{display:none!important}

/* ---------- bandes et grille ---------- */
.bande{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); position:relative}
.contenu{max-width:var(--large); margin-inline:auto; position:relative; min-width:0}
.section{padding-block:clamp(64px, 9vw, 120px)}
.claire{background:var(--brume); color:var(--clair-encre)}
.profonde{background:var(--nuit-2)}
.tete-section{display:grid; gap:16px; max-width:760px; margin-bottom:clamp(36px, 5vw, 56px)}
.tete-section h2{font-size:clamp(2rem, 4.4vw, 3.3rem)}
.surtitre{font:700 .78rem/1.2 var(--f-texte); letter-spacing:.16em; text-transform:uppercase; color:var(--jade-clair)}
.claire .surtitre{color:var(--clair-jade)}
.chapo{font-size:clamp(1.06rem, 1.6vw, 1.2rem); color:var(--doux); max-width:62ch}
.claire .chapo{color:var(--clair-doux)}
em.jade{font-style:normal; color:var(--jade-clair)}
.claire em.jade{color:var(--clair-jade)}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:16px; border:1.5px solid var(--trait);
  font:700 1rem/1.1 var(--f-texte); text-decoration:none; color:var(--brume); background:transparent; cursor:pointer; transition:transform .15s ease, background-color .15s ease, border-color .15s ease}
.btn:hover{border-color:rgba(244,243,250,.35)}
.btn:active{transform:translateY(1px)}
.btn.plein{background:var(--jade); border-color:var(--jade); color:var(--nuit)}
.btn.plein:hover{background:var(--jade-clair); border-color:var(--jade-clair)}
.claire .btn{color:var(--clair-encre); border-color:var(--clair-trait)}
.btn svg{width:18px; height:18px; flex:none}

/* ---------- en-tête ---------- */
.barre{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:rgba(3,20,55,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--trait)}
.barre .contenu{display:flex; align-items:center; gap:18px; min-height:68px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo img{width:36px; height:36px; border-radius:10px}
.logo span{font:700 1.02rem/1 var(--f-marque); letter-spacing:.06em; text-transform:uppercase}
.publics{display:flex; gap:4px; margin-left:8px; min-width:0}
.publics a{padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--doux); font-weight:700; font-size:.95rem; white-space:nowrap}
.publics a:hover{color:var(--brume); background:var(--nuit-2)}
.publics a[aria-current="page"]{color:var(--brume); background:var(--nuit-3)}
.barre .droite{display:flex; align-items:center; gap:12px; margin-left:auto}
.langues{display:inline-flex; padding:3px; border-radius:12px; background:var(--nuit-2); border:1px solid var(--trait)}
.langues button{min-width:42px; min-height:34px; border:0; border-radius:9px; background:transparent; color:var(--doux); font:700 .85rem/1 var(--f-texte); letter-spacing:.06em; cursor:pointer}
.langues button[aria-pressed="true"]{background:var(--brume); color:var(--nuit)}
.barre .btn{min-height:42px; padding:0 16px; border-radius:12px; font-size:.95rem}
/* sous 980 px, les quatre publics passent sur une seconde ligne, défilante si besoin */
@media (max-width: 980px){ .barre .contenu{flex-wrap:wrap; row-gap:0} .publics{order:3; flex:1 0 100%; margin:0 -4px; padding-bottom:8px; overflow-x:auto; scrollbar-width:none} .publics::-webkit-scrollbar{display:none} .publics a{padding:6px 10px; font-size:.9rem} }
@media (max-width: 560px){ .barre .btn{display:none} .barre .contenu{min-height:60px} }

/* ---------- ouverture ---------- */
.ouverture{padding-block:clamp(40px, 7vw, 96px) clamp(56px, 8vw, 110px); background:
  radial-gradient(60% 70% at 78% 38%, rgba(35,182,133,.20), transparent 70%),
  radial-gradient(40% 50% at 10% 0%, rgba(232,168,60,.08), transparent 70%), var(--nuit)}
.ouverture .contenu{display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.ouverture .texte{display:grid; gap:24px; justify-items:start}
.ouverture h1{font-size:clamp(2.5rem, 5.4vw, 4.4rem); letter-spacing:-.035em}
.ouverture .chapo{font-size:clamp(1.1rem, 1.7vw, 1.28rem)}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.preuves{display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; list-style:none; color:var(--doux); font-size:.95rem}
.preuves li{display:inline-flex; align-items:center; gap:8px}
.preuves li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ambre)}
@media (max-width: 860px){ .ouverture .contenu{grid-template-columns:1fr} }

/* le xolo écoute : ondes autour du casque, et la carte de l'écoute minute par minute */
.scene{position:relative; display:grid; justify-items:center; padding-bottom:28px}
.porte-xolo{position:relative; width:min(340px, 64%)}
.porte-xolo .xolo{display:block; width:100%; position:relative; z-index:1; filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.ondes{position:absolute; left:-30%; right:-30%; top:0; height:94%; display:grid; place-items:center; pointer-events:none}
.ondes i{grid-area:1 / 1; width:62%; aspect-ratio:1; border-radius:50%; border:2px solid var(--jade); opacity:0; animation:onde 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.ondes i:nth-child(2){animation-delay:1.6s} .ondes i:nth-child(3){animation-delay:3.2s}
@keyframes onde{0%{transform:scale(.55); opacity:.6} 100%{transform:scale(1.45); opacity:0}}
@media (prefers-reduced-motion: reduce){ .ondes i{animation:none; opacity:.18} .ondes i:nth-child(2){transform:scale(1.2); opacity:.1} .ondes i:nth-child(3){transform:scale(1.4); opacity:.05} }
.ecoute{position:absolute; z-index:2; left:0; bottom:0; width:min(320px, 86%); padding:16px 18px; border-radius:20px; background:rgba(10,30,74,.92); border:1px solid var(--trait); box-shadow:var(--ombre); display:grid; gap:10px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.ecoute .ligne{display:flex; align-items:center; gap:10px; font-weight:700; font-size:.95rem}
.ecoute .point{width:10px; height:10px; border-radius:50%; background:var(--jade-clair); box-shadow:0 0 0 0 rgba(46,230,166,.6); animation:pouls 1.8s ease-out infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(46,230,166,.55)} 100%{box-shadow:0 0 0 12px rgba(46,230,166,0)}}
.ecoute .matiere{color:var(--doux); font-weight:400; margin-left:auto; font-size:.88rem; white-space:nowrap}
.minutes{display:grid; grid-template-columns:repeat(12, 1fr); gap:4px}
.minutes i{height:22px; border-radius:5px; background:var(--nuit-3)}
.minutes i.faite{background:var(--jade)}
.minutes i.encours{background:linear-gradient(90deg, var(--jade-clair) var(--p, 40%), var(--nuit-3) var(--p, 40%))}
.ecoute small{color:var(--doux); font-size:.85rem; line-height:1.4}
.ecoute small b{color:var(--ambre)}
@media (max-width: 860px){ .scene{padding-bottom:0} .porte-xolo{width:min(260px, 62%)} .ecoute{position:relative; left:auto; bottom:auto; margin-top:-56px; width:min(340px, 100%)} }

/* ---------- téléphone : vraie capture de l'app ---------- */
.tel{position:relative; width:min(300px, 100%); aspect-ratio:390 / 844; border-radius:42px; padding:9px; background:#0B1430; border:1px solid rgba(244,243,250,.16); box-shadow:var(--ombre); max-width:100%}
.tel img{display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:34px; background:var(--nuit-2)}
.claire .tel{box-shadow:0 40px 70px -38px rgba(3,20,55,.55)}
.legende{font-size:.85rem; color:var(--doux); text-align:center; margin-top:14px}
.claire .legende{color:var(--clair-doux)}

/* ---------- le problème ---------- */
.douleurs{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 28px); padding:0; list-style:none; counter-reset:d}
.douleurs li{display:grid; gap:10px; align-content:start; padding-top:22px; border-top:2px solid var(--trait)}
.douleurs h3{font-size:clamp(1.3rem, 2vw, 1.55rem)}
.douleurs p{color:var(--doux)}
.claire .douleurs li{border-top-color:var(--clair-trait)}
.claire .douleurs p{color:var(--clair-doux)}
.bascule{margin-top:clamp(40px, 6vw, 64px); font:800 clamp(1.5rem, 3vw, 2.3rem)/1.15 var(--f-titre); letter-spacing:-.02em; max-width:30ch; text-wrap:balance}
@media (max-width: 820px){ .douleurs{grid-template-columns:1fr} }

/* ---------- étapes ---------- */
.etapes{display:grid; gap:clamp(56px, 8vw, 96px); padding:0; list-style:none}
.etape{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:clamp(28px, 5vw, 72px); align-items:center}
.etape:nth-child(even){grid-template-columns:auto minmax(0, 1fr)}
.etape:nth-child(even) .etape-texte{order:2}
.etape-texte{display:grid; gap:16px; min-width:0}
.moment{display:inline-flex; align-items:center; gap:10px; font:700 .8rem/1 var(--f-texte); letter-spacing:.14em; text-transform:uppercase; color:var(--ambre)}
.moment b{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ambre); color:var(--nuit); letter-spacing:0; font-size:.9rem}
.etape h3{font-size:clamp(1.7rem, 3.4vw, 2.5rem)}
.fab{display:grid; gap:12px; margin-top:6px}
.fab div{display:grid; grid-template-columns:132px minmax(0, 1fr); gap:14px; padding-top:12px; border-top:1px solid var(--clair-trait)}
.fab dt{font:700 .78rem/1.5 var(--f-texte); letter-spacing:.1em; text-transform:uppercase; color:var(--clair-doux)}
.fab dd{margin:0}
.fab div:last-child dd{font-weight:700; color:var(--clair-jade)}
.etape .tel{width:min(270px, 72vw)}
@media (max-width: 760px){ .etape, .etape:nth-child(even){grid-template-columns:1fr} .etape:nth-child(even) .etape-texte{order:0} .etape figure{justify-self:center} .fab div{grid-template-columns:1fr; gap:2px} }
.frise{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; padding:0; list-style:none}
.frise li{padding:6px 12px; border-radius:999px; background:var(--clair-carte); border:1px solid var(--clair-trait); font-weight:700; font-size:.9rem; font-variant-numeric:tabular-nums}
.frise li:first-child{background:var(--clair-jade); border-color:var(--clair-jade); color:#fff}

/* ---------- chacun y gagne ---------- */
.gains{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px}
.gain{display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:24px; border-radius:24px; background:var(--nuit-2); border:1px solid var(--trait); min-width:0}
.gain .qui{font:700 .78rem/1 var(--f-texte); letter-spacing:.14em; text-transform:uppercase; color:var(--c, var(--jade-clair))}
.gain h3{font-size:1.4rem}
.gain ul{padding:0; list-style:none; display:grid; gap:10px; color:var(--doux); font-size:.98rem; align-content:start}
.gain li{display:grid; grid-template-columns:14px minmax(0, 1fr); gap:8px}
.gain li::before{content:""; width:7px; height:7px; margin-top:.62em; border-radius:50%; background:var(--c, var(--jade-clair))}
.gain a{font-weight:700; color:var(--c, var(--jade-clair)); text-decoration:none}
.gain a:hover{text-decoration:underline}
.carte a{font-weight:700; color:var(--jade-clair); text-decoration:none}
.claire .carte a{color:var(--clair-jade)}
.carte a:hover{text-decoration:underline}
@media (max-width: 1040px){ .gains{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 600px){ .gains{grid-template-columns:1fr} }

/* ---------- l'espace de l'établissement ---------- */
.espace{display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:clamp(32px, 6vw, 80px); align-items:start}
.espace figure{position:sticky; top:100px}
.fonctions{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px)}
.fonction{display:grid; gap:8px; align-content:start; min-width:0}
.fonction .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--clair-carte); border:1px solid var(--clair-trait); color:var(--clair-jade)}
.fonction .ico svg{width:22px; height:22px}
.fonction h3{font-size:1.25rem; margin-top:6px}
.fonction p{color:var(--clair-doux); font-size:1rem}
.espace.inverse{grid-template-columns:minmax(0, 1fr) minmax(0, 300px)}
.espace.inverse figure{order:2}
.espace .texte{display:grid; gap:20px; align-content:start; min-width:0}
.espace .texte h3{font-size:1.35rem}
.espace .texte .note{color:var(--doux); font-size:.95rem}
.claire .espace .texte .note{color:var(--clair-doux)}
@media (max-width: 900px){ .espace, .espace.inverse{grid-template-columns:1fr} .espace figure{position:static; justify-self:center} .espace.inverse figure{order:0} }
@media (max-width: 560px){ .fonctions{grid-template-columns:1fr} }

/* ---------- confiance ---------- */
.confiance{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:24px; overflow:hidden}
.confiance div{background:var(--nuit); padding:clamp(22px, 3vw, 32px); display:grid; gap:8px; align-content:start}
.confiance h3{font-size:1.2rem; display:flex; gap:10px; align-items:flex-start}
.confiance h3::before{content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:6px; background:var(--jade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031437' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.confiance p{color:var(--doux); font-size:1rem}
@media (max-width: 900px){ .confiance{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 600px){ .confiance{grid-template-columns:1fr} }

/* ---------- démarrer ---------- */
.parcours{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; padding:0; list-style:none; counter-reset:p}
.parcours li{counter-increment:p; display:grid; gap:10px; align-content:start; padding:26px; border-radius:24px; background:var(--clair-carte); border:1px solid var(--clair-trait)}
.parcours li::before{content:counter(p); display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--nuit); color:var(--jade-clair); font:700 1rem/1 var(--f-marque)}
.parcours h3{font-size:1.3rem}
.parcours p{color:var(--clair-doux); font-size:1rem}
.parcours a{color:var(--clair-jade); font-weight:700}
@media (max-width: 860px){ .parcours{grid-template-columns:1fr} }

/* ---------- questions ---------- */
.questions{display:grid; gap:10px; max-width:860px}
.questions details{border-radius:18px; background:var(--nuit-2); border:1px solid var(--trait)}
.questions summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 22px; font:700 1.08rem/1.35 var(--f-titre)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+"; flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--nuit-3); color:var(--jade-clair); font:700 1.2rem/1 var(--f-texte); transition:transform .2s ease}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions details > div{padding:0 22px 20px; color:var(--doux)}
.questions details a{color:var(--jade-clair); font-weight:700}

/* ---------- appel final et formulaire ---------- */
.final{background:var(--jade); color:var(--nuit); padding-block:clamp(64px, 9vw, 112px)}
.final .contenu{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.final h2{font-size:clamp(2.1rem, 4.6vw, 3.6rem)}
.final .surtitre{color:var(--nuit)}
.final .chapo{color:#0B2A3E}
.final .texte{display:grid; gap:20px}
.final .xolo-final{width:auto; height:150px; border-radius:28px; background:var(--nuit); padding:14px 22px}
.formulaire{background:var(--nuit); color:var(--brume); border-radius:28px; padding:clamp(22px, 3.4vw, 36px); display:grid; gap:16px; box-shadow:0 40px 80px -40px rgba(3,20,55,.8)}
.formulaire h3{font-size:1.5rem}
.formulaire .aide{color:var(--doux); font-size:.95rem}
.champs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.champ{display:grid; gap:6px; min-width:0}
.champ.large{grid-column:1 / -1}
.champ label{font-weight:700; font-size:.92rem}
.champ label span{font-weight:400; color:var(--doux)}
.champ input, .champ select, .champ textarea{width:100%; min-height:48px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--trait); background:var(--nuit-2); color:var(--brume); font:1rem/1.4 var(--f-texte)}
.champ textarea{min-height:92px; resize:vertical}
.champ input:focus, .champ select:focus, .champ textarea:focus{outline:none; border-color:var(--jade-clair)}
.accord{display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; font-size:.88rem; color:var(--doux); align-items:start}
.accord input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--jade)}
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.etat{min-height:1.4em; font-weight:700; font-size:.95rem}
.etat[data-etat="erreur"]{color:var(--ambre)}
.etat[data-etat="ok"]{color:var(--jade-clair)}
.contact{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-weight:700}
.contact b{font-size:1.1rem}
.contact .btn{min-height:38px; padding:0 14px; color:var(--nuit); border-color:rgba(3,20,55,.3)}
.final .texte .btn{color:var(--nuit); border-color:rgba(3,20,55,.35)}
.final .texte .btn.plein{background:var(--nuit); border-color:var(--nuit); color:var(--brume)}
.final .texte .btn.plein:hover{background:var(--nuit-3)}
.final.simple .contenu{grid-template-columns:minmax(0, 1fr) auto; align-items:center}
.final.simple .xolo-final{height:220px; order:2}
.final a.lien{font-weight:700; color:var(--nuit)}
@media (max-width: 860px){ .final .contenu, .final.simple .contenu{grid-template-columns:1fr} .final.simple .xolo-final{order:0; height:150px} }
@media (max-width: 520px){ .champs{grid-template-columns:1fr} }

/* ---------- pied ---------- */
.pied{padding-block:48px 56px; border-top:1px solid var(--trait)}
.pied .contenu{display:grid; gap:20px}
.pied .nom{font:700 clamp(2.4rem, 9vw, 6.4rem)/.9 var(--f-marque); letter-spacing:.04em; text-transform:uppercase; color:var(--nuit-3); user-select:none}
.pied p{color:var(--doux); font-size:.9rem}
.pied nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.pied nav a{color:var(--doux); text-decoration:none; font-weight:700; font-size:.95rem}
.pied nav a:hover{color:var(--brume)}

/* ---------- un téléphone et ses pastilles (ouverture des pages élèves, parents, profs) ---------- */
.scene-tel{position:relative; display:grid; place-items:center; padding:24px 0}
.scene-tel .ondes{left:0; right:0; height:100%}
.scene-tel .ondes i{width:70%}
.scene-tel .tel{width:min(290px, 70vw); position:relative; z-index:1}
.pastille{position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:16px; background:rgba(10,30,74,.95); border:1px solid var(--trait);
  box-shadow:var(--ombre); font-weight:700; font-size:.92rem; line-height:1.25; white-space:nowrap; animation:flotte 6s ease-in-out infinite}
.pastille small{display:block; font-weight:400; color:var(--doux); font-size:.8rem}
.pastille .rond{flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--nuit-3); color:var(--jade-clair); font-size:.85rem}
.pastille .rond.ambre{color:var(--ambre)}
.pastille.p1{top:24%; left:0} .pastille.p2{top:50%; right:0; animation-delay:-2s} .pastille.p3{bottom:8%; left:0; animation-delay:-4s}
/* sur un grand écran, les pastilles sortent du téléphone et n'en cachent que le bord */
@media (min-width: 1240px){ .pastille.p1, .pastille.p3{left:auto; right:calc(50% + 100px)} .pastille.p2{right:auto; left:calc(50% + 100px)} .pastille.p1{top:16%} }
@keyframes flotte{0%, 100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
@media (max-width: 860px){ .pastille{font-size:.84rem; padding:8px 11px} .pastille small{font-size:.74rem} .pastille .rond{width:26px; height:26px} }

/* ---------- accueil : les quatre portes ---------- */
.portes{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px}
.porte{display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:22px 22px 0; border-radius:26px; background:var(--nuit-2); border:1px solid var(--trait); text-decoration:none; overflow:hidden; min-width:0;
  transition:transform .2s ease, border-color .2s ease}
.porte:hover{transform:translateY(-4px); border-color:rgba(46,230,166,.45)}
.porte .qui{font:700 .78rem/1 var(--f-texte); letter-spacing:.14em; text-transform:uppercase; color:var(--jade-clair)}
.porte h3{font-size:1.45rem}
.porte p{color:var(--doux); font-size:.98rem}
.porte .aller{font-weight:700; color:var(--jade-clair)}
.porte .apercu{margin:6px -2px 0; height:210px; overflow:hidden; border-radius:22px 22px 0 0; border:1px solid var(--trait); border-bottom:0}
.porte .apercu img{display:block; width:100%; height:auto}
@media (max-width: 1040px){ .portes{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 600px){ .portes{grid-template-columns:1fr} .porte .apercu{height:180px} }

/* ---------- deux cartes côte à côte (deux situations, deux façons de commencer) ---------- */
.duo{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px}
.carte{display:grid; gap:14px; align-content:start; padding:clamp(22px, 3vw, 32px); border-radius:26px; background:var(--nuit-2); border:1px solid var(--trait); min-width:0}
.claire .carte{background:var(--clair-carte); border-color:var(--clair-trait)}
.carte .etiquette{justify-self:start; padding:6px 12px; border-radius:999px; background:var(--nuit-3); color:var(--jade-clair); font:700 .78rem/1 var(--f-texte); letter-spacing:.1em; text-transform:uppercase}
.claire .carte .etiquette{background:var(--nuit); color:var(--jade-clair)}
.carte h3{font-size:clamp(1.35rem, 2.2vw, 1.7rem)}
.carte p{color:var(--doux)}
.claire .carte p{color:var(--clair-doux)}
.carte .tel{width:min(250px, 70vw); justify-self:center; margin-top:6px}
@media (max-width: 760px){ .duo{grid-template-columns:1fr} }

/* listes cochées (ce que fait l'app, ce que voit un parent) et listes barrées (ce qu'il ne voit jamais) */
.coches{display:grid; gap:12px; padding:0; list-style:none}
.coches li{display:grid; grid-template-columns:22px minmax(0, 1fr); gap:12px; align-items:start}
.coches li::before{content:""; width:20px; height:20px; margin-top:3px; border-radius:7px; background:var(--jade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031437' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.coches.jamais li::before{background:var(--nuit-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B4D8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px no-repeat}
.claire .coches.jamais li::before{background-color:#E3E4EF}
.coches b{font-weight:700}

/* ---------- accueil : la journée en trois moments, sans captures ---------- */
.moments{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 28px); padding:0; list-style:none}
.moments li{display:grid; gap:10px; align-content:start; padding:24px; border-radius:24px; background:var(--nuit-2); border:1px solid var(--trait)}
.moments h3{font-size:1.35rem}
.moments p{color:var(--doux); font-size:1rem}
.claire .moments li{background:var(--clair-carte); border-color:var(--clair-trait)}
.claire .moments .moment{color:#9A5A0A}
.claire .moments .moment b{color:#fff; background:#9A5A0A}
.claire .moments p{color:var(--clair-doux)}
@media (max-width: 820px){ .moments{grid-template-columns:1fr} }

/* ---------- le Reto del día jouable (page élèves) ---------- */
.reto{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
.jeu{background:var(--nuit-2); border:1px solid var(--trait); border-radius:28px; padding:clamp(18px, 3vw, 30px); box-shadow:var(--ombre); min-width:0}
.jeu-tete{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.jeu-tete b{font:800 1.35rem/1 var(--f-titre)}
.etapes-jeu{display:flex; gap:6px; margin-left:auto}
.etapes-jeu i{width:30px; height:7px; border-radius:999px; background:var(--nuit-3)}
.etapes-jeu i.fait{background:var(--jade)}
.etapes-jeu i.rate{background:var(--doux)}
.jeu .question{font:700 1.28rem/1.4 var(--f-titre); margin:6px 0}
.jeu .aide{color:var(--doux); font-size:.94rem; margin-bottom:16px}
.choix{display:grid; gap:8px}
.choix button{min-height:54px; text-align:left; padding:0 18px; border-radius:16px; border:2px solid var(--trait); background:var(--nuit); color:var(--brume); font:700 1.02rem/1.2 var(--f-texte); cursor:pointer; transition:border-color .2s ease, background-color .2s ease}
.choix button:hover:not(:disabled){border-color:var(--jade)}
.choix button.bon{border-color:var(--jade); background:rgba(35,182,133,.16)}
.choix button.faux{border-color:var(--doux); background:var(--nuit-3)}
.ecrire{display:flex; gap:8px; flex-wrap:wrap}
.ecrire input{flex:1; min-width:0; min-height:54px; border-radius:16px; border:2px solid var(--trait); background:var(--nuit); color:var(--brume); font:700 1.1rem/1 var(--f-texte); padding:0 16px}
.ecrire input:focus{border-color:var(--jade-clair); outline:none}
.retour-jeu{margin-top:16px; padding:16px; border-radius:16px; display:grid; gap:4px}
.retour-jeu.bon{background:rgba(35,182,133,.16)}
.retour-jeu.faux{background:var(--nuit-3)}
.retour-jeu b{font:800 1.2rem/1.1 var(--f-titre)}
.retour-jeu span{color:var(--doux)}
.retour-jeu .btn{justify-self:start; margin-top:10px}
.xp{font:700 .85rem/1 var(--f-texte); color:var(--nuit); background:var(--ambre); padding:3px 8px; border-radius:999px; margin-left:4px}
.bilan{display:grid; gap:14px}
.bilan .gros{font:800 clamp(2.6rem, 6vw, 3.6rem)/1 var(--f-titre); color:var(--ambre); font-variant-numeric:tabular-nums}
.bilan p{color:var(--doux)}
.grade{display:grid; gap:6px}
.grade .aide{margin:0; font-size:.9rem; color:var(--doux)}
.grade .barre-xp{height:12px; border-radius:999px; background:var(--nuit-3); overflow:hidden}
.grade .barre-xp i{display:block; height:100%; width:0; background:var(--ambre); border-radius:999px; transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.note-jeu{color:var(--doux); font-size:.9rem}
@media (max-width: 860px){ .reto{grid-template-columns:1fr} }