/* =====================================================================
 * FamiTeam — Styles (interface tactile, lisible par de jeunes enfants)
 * ===================================================================== */
:root{
  --bg:#f3f7fb; --carte:#ffffff; --texte:#2b3445; --doux:#6b7689;
  --famille:#f6a623; --planete:#39c0a0; --ombre:0 6px 18px rgba(40,60,90,.10);
  --rayon:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Comic Sans MS","Baloo 2","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--texte);
  padding-bottom:88px; -webkit-user-select:none; user-select:none;
}

/* ---- Barre du haut ---- */
.topbar{
  position:sticky; top:0; z-index:20; background:#fff; box-shadow:var(--ombre);
  padding:10px 14px; display:flex; flex-direction:column; gap:10px;
}
.logo{font-size:22px; font-weight:800; padding-left:44px}
.pastille-inviter{position:absolute; top:9px; left:12px; width:36px; height:36px;
  border:none; border-radius:50%; background:linear-gradient(135deg,#ffe9b8,#ffd1e0);
  font-size:19px; cursor:pointer; box-shadow:var(--ombre); line-height:1}
.pastille-inviter:active{transform:scale(.92)}
.parrain-modale{position:relative; max-width:340px}
.modale-fermer{position:absolute; top:8px; right:10px; border:none; background:transparent;
  font-size:18px; cursor:pointer; color:var(--doux)}
.selecteur{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.pastille{
  flex:0 0 auto; border:3px solid transparent; background:#f0f3f8;
  border-radius:16px; padding:6px 10px; display:flex; flex-direction:column;
  align-items:center; min-width:64px; cursor:pointer; transition:.15s;
}
.pastille .pastille-emoji{font-size:26px}
.pastille .pastille-nom{font-size:12px; font-weight:700; max-width:64px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pastille.actif{border-color:var(--c); background:#fff; transform:translateY(-2px)}

/* ---- Contenu ---- */
main{max-width:680px; margin:0 auto; padding:14px}
.carte{
  background:var(--carte); border-radius:var(--rayon); padding:16px;
  box-shadow:var(--ombre); margin-bottom:14px;
}
.carte h1{margin:.1em 0 .3em; font-size:24px}
.carte h2{margin:.1em 0 .5em; font-size:19px}
.carte p{margin:.3em 0; color:var(--doux); line-height:1.4}
.note{font-size:13px; background:#f3f7fb; padding:10px; border-radius:12px}

/* ---- Accueil ---- */
.carte-accueil{
  background:linear-gradient(135deg,var(--c),#ffffff 140%);
  border-radius:var(--rayon); padding:18px; box-shadow:var(--ombre);
  margin-bottom:14px; text-align:center; color:#fff;
}
.carte-accueil h1{color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.15)}
.carte-accueil small{font-weight:400; opacity:.9}
.accueil-avatar{margin:0 auto 6px}
.compteurs{display:flex; gap:12px; justify-content:center; margin-top:8px}
.compteur{background:rgba(255,255,255,.9); color:var(--texte);
  border-radius:16px; padding:10px 14px; min-width:120px}
.compteur .big{display:block; font-size:24px; font-weight:800}
/* Compteur visuel (≤ 5 ans) : suite d'emojis au lieu d'un chiffre */
.compteur .pips{display:flex; flex-wrap:wrap; justify-content:center; gap:1px; max-width:150px; line-height:1.1}
.compteur .pip{font-size:18px}
.compteur .pip.vide{opacity:.4}
.compteur .pip-plus{font-size:16px; align-self:center}
.compteur span:not(.big){font-size:12px; color:var(--doux)}

.eco-mini{font-size:26px; line-height:1.4}
.eco-statut{font-weight:700; color:var(--planete)!important}
.badges{display:flex; flex-wrap:wrap; gap:8px}
.badge{background:#fff7e6; border:2px solid #ffe2a8; border-radius:14px;
  padding:6px 10px; font-size:14px; font-weight:700}

/* ---- Badges « fun » (médailles) ---- */
.badges-carte{background:linear-gradient(180deg,#fffaf0,#fff4f8)}
.badges-compteur{font-size:14px; font-weight:800; color:#fff; background:var(--famille);
  border-radius:12px; padding:2px 10px; margin-left:6px}
.badges-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px; margin-top:8px}
.badge-fun{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.badge-medaille{width:74px; height:74px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; position:relative; box-shadow:0 4px 10px rgba(40,60,90,.15)}
.badge-medaille .badge-emoji{font-size:38px; line-height:1}
.badge-fun.gagne .badge-medaille{
  background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd25e 60%,#f6a623);
  border:4px solid #ffe9a8}
/* Petit éclat brillant sur les médailles gagnées */
.badge-fun.gagne .badge-medaille::after{content:"✨"; position:absolute; top:-6px; right:-4px;
  font-size:18px; animation:bdg-shine 2s ease-in-out infinite}
@keyframes bdg-shine{0%,100%{opacity:.4; transform:scale(.85)}50%{opacity:1; transform:scale(1.1)}}
.badge-fun.gagne{animation:bdg-pop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes bdg-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.badge-fun.bloque .badge-medaille{background:#eef2f7; border:4px dashed #d7dee8}
.badge-fun.bloque .badge-emoji{opacity:.6; font-size:30px}
.badge-fun.bloque{opacity:.85}
.badge-nom{font-size:12px; font-weight:800; line-height:1.2}
.badge-fun.bloque .badge-nom{font-weight:700; color:var(--doux)}

.raccourcis{display:grid; gap:12px}
.gros-bouton{border:none; border-radius:var(--rayon); padding:20px; font-size:18px;
  font-weight:800; color:#fff; cursor:pointer; box-shadow:var(--ombre)}
.gros-bouton.famille{background:var(--famille)}
.gros-bouton.planete{background:var(--planete)}

/* ---- En-tête catégorie ---- */
.entete-cat{border-top:6px solid var(--c)}
.solde{font-size:18px; color:var(--texte)!important}
.solde-pips{font-size:22px; letter-spacing:1px}
.t-compte.imgs{background:transparent; color:inherit; padding:0; min-width:auto; font-size:15px}
.ec-coin.imgs{font-size:12px; line-height:1; max-width:62px; overflow:hidden; white-space:nowrap}

/* ---- Grille de missions ---- */
.missions{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.mission{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:#fff; border:3px solid #eef2f7; border-radius:18px;
  padding:14px 10px; cursor:pointer; transition:.12s; text-align:center;
  font-family:inherit;
}
.mission:active{transform:scale(.96)}
.mission .m-emoji{font-size:38px}
.mission .m-titre{font-size:14px; font-weight:700; line-height:1.2}
.mission .m-points{font-size:13px; font-weight:800; color:var(--famille)}
.mission .m-points-img{font-size:15px; letter-spacing:1px}
.mission.fait{opacity:.55; background:#f1faf6; border-color:#bfe9da}
.mission.attente{background:#fff7e6; border-color:#ffe2a8}
.mission.attente .m-points{color:#a86b00}

/* Bandeau dodo (ambiance selon l'heure) */
.dodo{border-radius:var(--rayon); padding:14px 16px; margin-bottom:14px; color:#fff;
  box-shadow:var(--ombre); position:relative; overflow:hidden}
.dodo-etoiles{position:absolute; top:8px; right:10px; font-size:12px; opacity:0; letter-spacing:5px}
.dodo-txt{position:relative; z-index:2}
.dodo-txt strong{display:block; font-size:17px; text-shadow:0 1px 4px rgba(0,0,0,.25)}
.dodo-txt small{opacity:.95}

/* Chemin visuel du dodo (☀️ → 🌙), compréhensible sans lire */
.dodo-chemin{position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-top:10px}
.dodo-chemin .dc-bout{font-size:22px}
.dc-piste{position:relative; flex:1; height:14px; border-radius:10px;
  background:rgba(255,255,255,.35)}
.dc-rempli{position:absolute; left:0; top:0; bottom:0; border-radius:10px;
  background:rgba(255,255,255,.85); transition:width .6s ease}
.dc-token{position:absolute; top:50%; transform:translate(-50%,-50%); font-size:22px;
  transition:left .6s ease; filter:drop-shadow(0 0 4px rgba(0,0,0,.25))}

.dodo-btn{position:relative; z-index:2; margin-top:10px; border:none; border-radius:14px;
  padding:12px 14px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.92); color:#2b3445; width:100%}
.dodo-btn.fait{background:rgba(255,255,255,.55)}
.dodo-jour{background:linear-gradient(135deg,#5db4ff,#bfe3ff)}
.dodo-soir{background:linear-gradient(135deg,#ff9e6d,#ffd28a)}
.dodo-nuit{background:linear-gradient(135deg,#1b2350,#3a3f72)}
.dodo-nuit .dodo-etoiles{opacity:.9; animation:scintille 2s ease-in-out infinite}
@keyframes scintille{0%,100%{opacity:.3}50%{opacity:1}}

/* Titres de catégorie sur l'accueil */
.titre-cat{border-left:6px solid var(--c); padding:10px 16px; margin-bottom:8px}
.titre-cat h2{display:flex; align-items:center; gap:8px; margin:0; font-size:18px}
.solde-inline{font-size:15px; font-weight:800; color:var(--c)}
.lien-cat{margin-left:auto; border:none; background:#f0f3f8; color:var(--doux);
  border-radius:10px; padding:6px 10px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit}
.mission.fait .m-points{color:var(--planete)}
.mission.rep{border-color:#d9d2f0}
.reparation{border-top:6px solid #a78bfa}

/* ---- Écosystème ---- */
.eco-carte{background:linear-gradient(180deg,#eaf7ff,#f4fff6)}
.eco-scene{font-size:40px; line-height:1.3; min-height:60px;
  display:flex; flex-wrap:wrap; gap:4px; align-items:flex-end}
.eco-item{animation:pousse .5s ease}
@keyframes pousse{from{transform:scale(0) translateY(10px); opacity:0}
  to{transform:scale(1); opacity:1}}
.progress{background:#e3edf5; border-radius:20px; height:16px; overflow:hidden; margin:10px 0 6px}
.progress-bar{background:var(--planete); height:100%; border-radius:20px; transition:width .5s}
.eco-next{font-weight:700; color:var(--texte)!important}
.eco-vide{color:var(--doux); font-size:15px}

/* Chaîne alimentaire : niveaux (tiers) */
.eco-tier{background:#fff; border-radius:16px; padding:12px; margin-top:12px;
  border:2px solid #e6eef5}
.eco-tier.verrouille{opacity:.7; background:#f6f8fb}
.eco-tier-tete{display:flex; align-items:center; gap:8px}
.eco-tier-tete .t-emoji{font-size:26px}
.eco-tier-tete .t-nom{font-size:17px; font-weight:800; flex:1}
.eco-tier-tete .t-compte{background:var(--planete); color:#fff; font-weight:800;
  border-radius:12px; padding:2px 10px; min-width:30px; text-align:center}
.t-lecon{font-size:13px!important; margin:6px 0 10px!important}
.t-verrou{font-size:13px!important; background:#fff4e6; color:#a86b00!important;
  padding:8px 10px; border-radius:10px; font-weight:600}
.eco-tier .o-cout{color:var(--planete)!important; font-weight:800}

/* Cartes d'espèces (écosystème) */
.eco-cartes{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px}
.eco-carte-sp{position:relative; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:10px 6px 8px; border-radius:14px; border:2px solid #e6eef5;
  background:#fff; cursor:pointer; font-family:inherit; text-align:center;
  transition:transform .1s, box-shadow .15s}
.eco-carte-sp:active{transform:scale(.96)}
.eco-carte-sp .ec-emoji{font-size:34px; line-height:1}
.eco-carte-sp .ec-nom{font-size:13px; font-weight:800; color:var(--texte)}
.eco-carte-sp .ec-cout{font-size:12px; font-weight:800; color:var(--planete)}
.eco-carte-sp .ec-cout.manque{color:#c0395b}
.eco-carte-sp .ec-coin{position:absolute; top:4px; right:6px; font-size:12px;
  font-weight:800; color:var(--planete)}
.ec-prereq{display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin:1px 0}
.ec-need{font-size:11px; font-weight:700; border-radius:8px; padding:1px 5px}
.ec-need.ok{background:#e7f7ef; color:#1c8a5b}
.ec-need.ko{background:#fdeef2; color:#c0395b}
.ec-libre{font-size:11px; color:var(--doux)}
/* Prérequis en images (petits enfants) : ex. 2 fleurs côte à côte */
.ec-need-img{display:inline-flex; gap:1px; padding:2px 5px; border-radius:8px; background:#fdeef2}
.ec-need-img.ok{background:#e7f7ef}
.ec-img{font-size:15px}
.ec-img.ko{filter:grayscale(1); opacity:.45}
.eco-carte-sp .ec-etat{font-size:11px; font-weight:800; margin-top:2px;
  padding:3px 8px; border-radius:10px}
.eco-carte-sp.creable{border-color:#bfe9da}
.eco-carte-sp.creable .ec-etat{background:var(--planete); color:#fff}
.eco-carte-sp.verrou-cout{opacity:.92}
.eco-carte-sp.verrou-cout .ec-etat{background:#fff4e6; color:#a86b00}
.eco-carte-sp.verrou-prereq{opacity:.6; background:#f6f8fb}
.eco-carte-sp.verrou-prereq .ec-emoji{filter:grayscale(.7)}
.eco-carte-sp.verrou-prereq .ec-etat{background:#eef2f7; color:var(--doux)}

/* Référence des prérequis (espace parents) */
.eco-ref-tier{margin-top:10px}
.eco-ref-titre{font-size:15px; margin:8px 0 4px}
.eco-ref-ligne{display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-bottom:1px solid #eef2f7; font-size:13px}
.eco-ref-ligne .erl-nom{font-weight:800; min-width:108px}
.eco-ref-ligne .erl-cout{color:var(--planete); font-weight:800; min-width:46px}
.eco-ref-ligne .erl-prereq{color:var(--doux); flex:1}

/* Parrainage & concept (page d'accueil publique) */
.concept-bloc{margin-top:16px; text-align:left; background:linear-gradient(135deg,#fff6e9,#eef9f3);
  border:2px solid #ffe6c2; border-radius:16px; padding:14px}
.concept-bloc h2{font-size:16px; margin:0 0 6px}
.concept-bloc p{font-size:13px; margin:0; line-height:1.5; color:var(--texte)}
.parrain-carte{background:linear-gradient(135deg,#ffe9b8,#ffd1e0); border-radius:14px;
  padding:12px 14px; margin:6px 0 12px; font-size:14px; line-height:1.4; text-align:left}
.btn-mail{display:block; text-align:center; text-decoration:none; margin-top:8px}
.parrain-pop{background:linear-gradient(135deg,#fff3d6,#ffe0ec)}

/* Sélecteur de langue (écran d'accueil public) */
.choix-langue{text-align:right; margin:-4px 0 4px}
.choix-langue select{border:2px solid #e3edf5; border-radius:10px; padding:6px 10px;
  font-family:inherit; font-size:13px; font-weight:700; background:#fff; cursor:pointer}

/* Saisie du code PIN (masqué + clavier numérique) */
.pin-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; background:rgba(20,30,50,.45); padding:20px}
.pin-carte{background:#fff; border-radius:18px; padding:20px; width:100%; max-width:300px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); text-align:center}
.pin-titre{font-size:18px; font-weight:800; margin-bottom:4px}
.pin-sous{font-size:13px; color:var(--doux); margin-bottom:10px}
.pin-input{width:100%; text-align:center; font-size:28px; letter-spacing:10px;
  padding:12px; border:2px solid #e3edf5; border-radius:12px; margin:6px 0 14px;
  -webkit-text-security:disc; text-security:disc}   /* masqué sans être un type=password */
.pin-actions{display:flex; gap:8px}
.pin-actions .btn-secondaire{flex:1; margin:0}
.pin-actions .gros-bouton{flex:1; padding:14px}

/* Formulaire d'ajout de mission personnalisée */
.mission-perso-form{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px}
.mission-perso-form input, .mission-perso-form select{padding:9px; border:2px solid #e3edf5;
  border-radius:10px; font-family:inherit; font-size:14px}
.mission-perso-form input:not(.mp-emoji):not(.mp-pts){flex:1; min-width:140px}
.mission-perso-form .mp-emoji{width:64px; text-align:center}
.mission-perso-form .mp-pts{width:60px}
.mission-perso-form .btn-secondaire{margin:0}

/* ---- Avatar (SVG) ---- */
.avatar-scene{width:150px; height:150px; margin:0 auto}
.avatar-scene .av-svg{width:100%; height:100%; display:block}
.avatar-grand{margin:10px auto}
.accueil-avatar .avatar-scene{width:110px; height:110px}

.options{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.option{background:#fff; border:3px solid #eef2f7; border-radius:16px; padding:10px 6px;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  font-family:inherit; transition:.12s}
.option:active{transform:scale(.95)}
.option .o-apercu{width:52px; height:52px; display:flex; align-items:center; justify-content:center}
.option .o-apercu .av-svg{width:52px; height:52px}
.option .o-swatch{width:34px; height:34px; border-radius:50%; border:2px solid rgba(0,0,0,.12)}
.option .o-nom{font-size:12px; font-weight:700; line-height:1.15}
.option .o-cout{font-size:12px; color:var(--doux)}
.option.equipe{border-color:var(--planete); background:#f1faf6}
.option.verrou .o-apercu{filter:grayscale(.7) opacity(.65)}
.option.verrou .o-cout{color:var(--famille); font-weight:800}

/* ---- Réglages ---- */
.reglage-enfant{border-left:6px solid var(--c)}
.champ{display:block; font-size:13px; font-weight:700; color:var(--doux); margin:10px 0 0}
.champ input{display:block; width:100%; margin-top:4px; padding:10px;
  border:2px solid #e3edf5; border-radius:12px; font-size:16px; font-family:inherit}
.champ input[type=color]{height:44px; padding:4px}
.btn-secondaire,.btn-danger{border:none; border-radius:14px; padding:14px;
  font-size:15px; font-weight:800; cursor:pointer; width:100%; margin-top:8px; font-family:inherit}
.btn-secondaire{background:#e8f0fb; color:#2b3445}
.btn-danger{background:#ffe3e3; color:#c0392b}

/* ---- Cartes surprises (objectif d'équipe) ---- */
.cartes-surprises{background:linear-gradient(180deg,#fff6e9,#ffeef4)}
.cs-sous{font-size:14px; margin:.2em 0 .8em!important}
.cs-liste{display:grid; gap:18px}

/* Grande carte attirante */
.cs-carte{background:#fff; border:3px solid var(--cs-c,#ffd98a); border-radius:24px; padding:18px;
  box-shadow:0 6px 18px rgba(40,60,90,.12)}
.cs-carte.mystere{background:#fff}
.cs-carte.ouverte{border-color:#7fd9bd; background:linear-gradient(160deg,#eafaf3,#f3fff8);
  animation:cs-reveal .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes cs-reveal{0%{transform:scale(.92)}100%{transform:scale(1)}}
.cs-carte.faite{opacity:.7}
.cs-tete{display:flex; align-items:center; gap:12px}
.cs-tete .cs-emoji{font-size:46px; line-height:1}
.cs-mystere-emoji{animation:cs-wiggle 2.5s ease-in-out infinite}
@keyframes cs-wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.cs-tete .cs-titre{font-weight:800; flex:1; font-size:20px}
.cs-tete .cs-prix{font-weight:800; color:var(--cs-c,var(--famille)); font-size:20px; white-space:nowrap}
.cs-carte.ouverte .cs-prix{color:var(--planete); font-size:16px}
.cs-mystere-sous{font-size:14px; color:var(--doux)!important; margin:6px 0 2px!important}

/* Jauge très visuelle (piste + coureur vers le cadeau) */
.cs-jauge{margin:12px 0 8px}
.cs-jauge-piste{position:relative; height:30px; border-radius:18px;
  background:#eef2f7; border:3px solid var(--cs-c,#ffd98a); overflow:visible}
.cs-carte.ouverte .cs-jauge-piste{background:#d9f5ea; border-color:#7fd9bd}
.cs-jauge-rempli{position:absolute; left:0; top:0; bottom:0; border-radius:14px;
  background:var(--cs-c,#f6a623); transition:width .6s cubic-bezier(.2,1,.3,1)}
.cs-carte.ouverte .cs-jauge-rempli{background:linear-gradient(90deg,#5fe0bb,#39c0a0)}
.cs-jauge-token{position:absolute; top:50%; transform:translate(-50%,-50%); font-size:26px;
  transition:left .6s cubic-bezier(.2,1,.3,1); filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); z-index:2}
.cs-jauge-but{position:absolute; right:-6px; top:50%; transform:translateY(-50%); font-size:28px; z-index:1}
.cs-carte.ouverte .cs-jauge-but{animation:cs-bounce 1s ease infinite}
@keyframes cs-bounce{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-70%) scale(1.15)}}
.cs-jauge-bas{display:flex; justify-content:space-between; margin-top:6px}
.cs-jauge-chiffres{font-size:15px; font-weight:800; color:var(--cs-c,var(--famille))}
.cs-carte.ouverte .cs-jauge-chiffres{color:var(--planete)}
.cs-jauge-pct{font-size:15px; font-weight:800; color:var(--doux)}

.cs-reste{font-size:14px; color:var(--doux)!important; margin:2px 0 10px!important; text-align:center; font-weight:700}
.cs-activite{font-size:16px; color:var(--texte)!important; margin:10px 0 2px!important; font-weight:700}
.cs-afaire{font-weight:800; color:var(--planete)!important; margin:2px 0!important; font-size:16px}
.cs-faite-tag{font-weight:800; color:var(--doux)!important}
.cs-dons{display:flex; gap:8px; flex-wrap:wrap}
.cs-don{flex:1; min-width:96px; border:none; border-radius:16px; padding:16px 10px;
  font-size:16px; font-weight:800; cursor:pointer; font-family:inherit;
  background:var(--cs-c,#f6a623); color:#fff; box-shadow:0 3px 8px rgba(40,60,90,.2)}
.cs-don:active{transform:scale(.95)}
.cs-don:disabled{opacity:.4; cursor:default; box-shadow:none}
.cs-faite-btn{margin-top:10px}
.cs-contrib{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; justify-content:center}
.cs-contrib-item{background:#fff; border:2px solid #ffe2a8; border-radius:12px;
  padding:4px 10px; font-size:14px; font-weight:800}
.cs-carte.ouverte .cs-contrib-item{border-color:#bfe9da}

/* Gestion des cartes surprises (espace parents) */
.csp-liste{display:grid; gap:12px; margin-top:6px}
.csp-carte{border:2px solid #eef2f7; border-radius:14px; padding:10px; display:grid; gap:8px}
.csp-ajout{border:2px dashed #ffd9a8; border-radius:14px; padding:10px; margin-top:12px; display:grid; gap:8px}
.csp-ligne{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.csp-emoji{width:60px; text-align:center; padding:10px; border:2px solid #e3edf5; border-radius:10px; font-family:inherit; font-size:16px}
.csp-titre{flex:1; min-width:140px; padding:10px; border:2px solid #e3edf5; border-radius:10px; font-family:inherit; font-size:15px}
.csp-activite{width:100%; padding:10px; border:2px solid #e3edf5; border-radius:10px; font-family:inherit; font-size:14px}
.csp-coutlbl{font-size:13px; font-weight:700; color:var(--doux); display:flex; align-items:center; gap:6px}
.csp-cout{width:80px; padding:10px; border:2px solid #e3edf5; border-radius:10px; font-family:inherit; font-size:15px; text-align:center}
.csp-prog{font-size:13px; font-weight:800; color:var(--famille); margin-left:auto}
.csp-actions{display:flex; gap:8px}
.csp-revele{font-size:13px; margin:2px 0!important}

/* Bibliothèque d'idées */
.csp-idees{margin-top:16px; border-top:2px solid #eef2f7; padding-top:12px}
.csp-idees-titre{font-size:16px; margin:0 0 2px}
.csp-idees-groupe{margin-top:10px}
.csp-taille{font-size:14px; margin:8px 0 6px; display:flex; align-items:center; gap:8px}
.csp-taille-prix{margin-left:auto; font-weight:800; color:var(--famille)}
.csp-idees-liste{display:grid; gap:8px}
.csp-idee{display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:2px solid #e6eef5; border-radius:14px; padding:10px 12px; background:#fff;
  cursor:pointer; font-family:inherit; transition:.12s}
.csp-idee:active{transform:scale(.98)}
.csp-idee-emoji{font-size:28px; flex:0 0 auto}
.csp-idee-txt{flex:1; display:flex; flex-direction:column}
.csp-idee-txt strong{font-size:14px}
.csp-idee-txt small{font-size:12px; color:var(--doux)}
.csp-idee-plus{flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--planete); color:#fff; font-size:20px; font-weight:800;
  display:flex; align-items:center; justify-content:center}

/* ---- Espace parents : titres de groupes ---- */
.grp-titre{max-width:680px; margin:22px auto 6px; padding:0 4px; font-size:15px;
  font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--doux)}
.grp-titre:first-of-type{margin-top:10px}

/* ---- Soutien / don ---- */
.don-carte{background:linear-gradient(160deg,#fff6e9,#ffeef4); border:2px solid #ffe0c2}
.don-gratuit{font-weight:800; color:#1c8a5b!important; margin:.2em 0!important}
.don-texte{font-size:14px; line-height:1.5; color:var(--texte)!important}
.don-bouton{display:block; text-align:center; text-decoration:none;
  background:linear-gradient(135deg,#ffd25e,#f6a623); margin-top:8px}
.don-sous{font-weight:800; margin:10px 0 4px!important; color:var(--texte)!important}
.don-options{display:flex; gap:8px; flex-wrap:wrap}
.don-opt{flex:1; min-width:74px; text-align:center; text-decoration:none; border-radius:14px;
  padding:14px 8px; font-size:17px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#ffd25e,#f6a623); box-shadow:0 3px 8px rgba(246,166,35,.3)}
.don-opt:active{transform:scale(.96)}
.don-opt.mensuel{background:linear-gradient(135deg,#7fd9bd,#39c0a0); box-shadow:0 3px 8px rgba(57,192,160,.3)}
.don-opt small{display:block; font-size:11px; font-weight:700; opacity:.9}
.don-merci{font-size:13px; color:var(--doux)!important; text-align:center; margin:8px 0 0!important}

/* ---- Module bug / suggestion ---- */
.feedback-carte .fb-type{width:100%; padding:12px; border:2px solid #e3edf5; border-radius:12px;
  font-family:inherit; font-size:15px; margin:6px 0 8px; background:#fff}
.feedback-carte .fb-message{width:100%; padding:12px; border:2px solid #e3edf5; border-radius:12px;
  font-family:inherit; font-size:15px; resize:vertical; box-sizing:border-box}

/* ---- Écosystème : scène vivante « façon Pixar » ---- */
.eco-monde-carte{background:linear-gradient(180deg,#eaf7ff,#f4fff6)}
.ecomonde-niveau{font-size:13px; font-weight:800; background:#fff; border:2px solid #e3edf5;
  border-radius:12px; padding:2px 10px; margin-left:6px; vertical-align:middle}
.ecomonde{position:relative; border-radius:20px; overflow:hidden; border:3px solid #d4ecff;
  margin:6px 0 4px; box-shadow:inset 0 -10px 24px rgba(0,0,0,.06)}

/* Ciel */
.ecomonde-ciel{position:relative; height:130px; background:linear-gradient(180deg,#bfe6ff,#e8f7ff)}
.ecomonde-soleil{position:absolute; top:10px; right:16px; font-size:44px;
  filter:drop-shadow(0 0 12px rgba(255,210,80,.8)); animation:eco-soleil 5s ease-in-out infinite}
@keyframes eco-soleil{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(18deg) scale(1.12)}}
.ecomonde-nuage{position:absolute; font-size:36px; opacity:.95}
.ecomonde-nuage.c1{top:14px; left:-50px; animation:eco-nuage 24s linear infinite}
.ecomonde-nuage.c2{top:54px; left:-50px; font-size:26px; animation:eco-nuage 34s linear infinite 4s}
@keyframes eco-nuage{from{transform:translateX(0)}to{transform:translateX(140vw)}}

/* Volants : trajet dans le ciel avec léger battement (squash) */
.ecomonde-vol{position:absolute; top:calc(12px + (var(--i) * 19px) % 80px); left:6%; font-size:32px;
  animation:eco-vol calc(8s + (var(--i) * 1s)) ease-in-out infinite;
  animation-delay:calc(var(--i) * -1.7s)}
@keyframes eco-vol{
  0%{transform:translateX(0) translateY(0) scale(1,1)}
  20%{transform:translateX(34vw) translateY(-14px) scale(1.1,.9)}
  50%{transform:translateX(72vw) translateY(8px) scale(.95,1.05) scaleX(-1)}
  80%{transform:translateX(34vw) translateY(-10px) scale(1.1,.9) scaleX(-1)}
  100%{transform:translateX(0) translateY(0) scale(1,1)}}

/* Sol : le décor change selon le niveau */
.ecomonde-sol{position:relative; min-height:104px; padding:12px 10px 16px;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 6px;
  background:linear-gradient(180deg,#aee59a,#7fcf6b)}
.niveau-desert .ecomonde-sol{background:linear-gradient(180deg,#f4e3b0,#e3c587)}
.niveau-desert .ecomonde-ciel{background:linear-gradient(180deg,#cfeaff,#fff6df)}
.niveau-prairie .ecomonde-sol{background:linear-gradient(180deg,#aee59a,#7fcf6b)}
.niveau-foret .ecomonde-sol{background:linear-gradient(180deg,#8fd98a,#3fa85a)}
.niveau-foret .ecomonde-ciel{background:linear-gradient(180deg,#a9dcff,#dff4e6)}
.ecomonde-sol::before{content:""; position:absolute; top:-8px; left:0; right:0; height:14px;
  background:radial-gradient(circle at 10px -2px,currentColor 8px,transparent 9px) repeat-x;
  background-size:20px 14px; color:#7fcf6b}
.niveau-desert .ecomonde-sol::before{color:#e3c587}
.niveau-foret .ecomonde-sol::before{color:#3fa85a}

/* Plantes : créées par l'enfant, IMMOBILES (elles ne bougent pas) */
.ecomonde-flore{position:relative; z-index:1; font-size:38px; line-height:1; display:inline-block;
  transform-origin:bottom center; filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}

/* Animaux au sol : va-et-vient + saut « Pixar » (anticipation, squash & stretch) */
.ecomonde-etre{position:relative; z-index:2; font-size:40px; line-height:1; display:inline-block;
  transform-origin:bottom center;
  animation:eco-marche calc(5.5s + (var(--i) * 0.7s)) cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:calc(var(--i) * -0.6s)}
/* Petite ombre de contact au sol */
.ecomonde-etre::after{content:""; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  width:26px; height:7px; border-radius:50%; background:rgba(0,0,0,.16); z-index:-1;
  animation:eco-ombre calc(1.15s + (var(--i) * 0.13s)) cubic-bezier(.3,.1,.3,1) infinite;
  animation-delay:calc(var(--i) * -0.25s)}
.ecomonde-corps{display:inline-block; transform-origin:bottom center;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.22));
  animation:eco-saut calc(1.15s + (var(--i) * 0.13s)) cubic-bezier(.3,.05,.4,1) infinite;
  animation-delay:calc(var(--i) * -0.25s)}
/* Déplacement au sol : va-et-vient, l'animal se retourne dans le sens de la
   marche (flip instantané aux points de demi-tour). */
@keyframes eco-marche{
  0%{transform:translateX(0) scaleX(-1)}
  25%{transform:translateX(28px) scaleX(-1)}
  25.01%{transform:translateX(28px) scaleX(1)}
  75%{transform:translateX(-24px) scaleX(1)}
  75.01%{transform:translateX(-24px) scaleX(-1)}
  100%{transform:translateX(0) scaleX(-1)}}
@keyframes eco-saut{
  0%,100%{transform:translateY(0) scale(1,1)}
  10%{transform:translateY(0) scale(1.14,.84)}     /* anticipation : on s'écrase */
  38%{transform:translateY(-18px) scale(.88,1.16)} /* envol : on s'étire */
  56%{transform:translateY(0) scale(1.12,.88)}     /* atterrissage : squash */
  72%{transform:translateY(-5px) scale(.97,1.05)}  /* petit rebond */
  88%{transform:translateY(0) scale(1.03,.98)}}
@keyframes eco-ombre{
  0%,100%{transform:translateX(-50%) scale(1); opacity:.16}
  38%{transform:translateX(-50%) scale(.55); opacity:.08}  /* l'ombre rétrécit au saut */
  56%{transform:translateX(-50%) scale(1.05); opacity:.18}}
.ecomonde-vide{font-size:15px; font-weight:700; color:#3a7a2c; padding:16px; text-align:center; width:100%; z-index:2}
@media(prefers-reduced-motion:reduce){
  .ecomonde-soleil,.ecomonde-nuage,.ecomonde-vol,.ecomonde-etre,.ecomonde-corps,.ecomonde-etre::after{animation:none}
}

/* ---- Statistiques (espace parents) ---- */
.stat-enfant{border-left:6px solid var(--c)}
.stat-nom{margin:.1em 0 .4em; font-size:18px}
.stat-nom small{font-weight:400; color:var(--doux)}
.stat-chiffres{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.stat-puce{background:#f0f3f8; border-radius:12px; padding:6px 10px; font-size:14px; font-weight:800}
.stat-graph-titre{font-size:13px; font-weight:800; color:var(--doux)!important; margin:6px 0!important;
  display:flex; align-items:center; gap:8px}
.stat-tendance{margin-left:auto; font-weight:800; border-radius:10px; padding:2px 8px; font-size:13px}
.stat-tendance.up{background:#e7f7ef; color:#1c8a5b}
.stat-tendance.down{background:#fdeef2; color:#c0395b}
.stat-tendance.flat{background:#eef2f7; color:var(--doux)}
.stat-graph{display:flex; align-items:flex-end; gap:4px; height:90px; padding-top:6px}
.stat-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%;
  justify-content:flex-end}
.stat-bar{width:100%; max-width:18px; min-height:3px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#ffd25e,#f6a623)}
.stat-jour{font-size:10px; color:var(--doux)}
.stat-compare{margin-top:8px!important}
.stat-balance{display:flex; height:26px; border-radius:13px; overflow:hidden; margin:2px 0 4px;
  font-size:12px; font-weight:800; color:#fff}
.stat-balance-fam{background:var(--famille); display:flex; align-items:center; justify-content:center; min-width:fit-content; padding:0 6px}
.stat-balance-pla{background:var(--planete); display:flex; align-items:center; justify-content:center; min-width:fit-content; padding:0 6px}
.stat-dep-col{background:#a78bfa; display:flex; align-items:center; justify-content:center; min-width:fit-content; padding:0 6px; color:#fff; font-weight:800; font-size:12px}
.stat-dep-ind{background:#5b8def; display:flex; align-items:center; justify-content:center; min-width:fit-content; padding:0 6px; color:#fff; font-weight:800; font-size:12px}
/* ---- Auto-évaluation de la journée ---- */
.eval-carte{background:linear-gradient(160deg,#f4f7ff,#fff4f8)}
.eval-choix{display:flex; gap:8px}
.eval-jour{margin-top:10px}
.eval-jour-lbl{display:block; font-size:13px; font-weight:800; color:var(--doux); margin-bottom:4px}
.eval-btn{flex:1; border:2px solid #e3edf5; background:#fff; border-radius:16px; padding:14px 6px;
  font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; transition:.12s}
.eval-btn:active{transform:scale(.96)}
.eval-btn.actif.eval-bien{border-color:#7fd9bd; background:#eafaf3}
.eval-btn.actif.eval-moyen{border-color:#ffd98a; background:#fff6e6}
.eval-btn.actif.eval-mauvais{border-color:#f2b8c6; background:#fdeef2}

/* Version enfant : mise en avant, gros choix expressifs */
.eval-enfant{background:linear-gradient(160deg,#fff7e0,#ffe9f2); border:3px solid #ffe0b0}
.eval-enfant h2{font-size:20px; text-align:center}
.eval-choix-grand{display:flex; gap:10px}
.eval-gros{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  border:3px solid #e3edf5; background:#fff; border-radius:20px; padding:16px 6px 12px;
  cursor:pointer; font-family:inherit; transition:.15s}
.eval-gros:active{transform:scale(.95)}
.eval-gros-emoji{font-size:52px; line-height:1}
.eval-gros-lbl{font-size:15px; font-weight:800}
/* "Bien" rayonne la joie */
.eval-gros.eval-bien .eval-gros-emoji{animation:eval-joie 1.6s ease-in-out infinite}
@keyframes eval-joie{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.18) rotate(4deg)}}
.eval-gros.eval-bien.actif{border-color:#39c0a0; background:#eafaf3;
  box-shadow:0 0 0 4px rgba(57,192,160,.25), 0 0 22px rgba(255,210,90,.7)}
/* "Pas top" renvoie de la colère */
.eval-gros.eval-moyen.actif{border-color:#f6a623; background:#fff6e6}
.eval-gros.eval-mauvais.actif .eval-gros-emoji{animation:eval-colere .4s ease-in-out infinite}
@keyframes eval-colere{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-7deg)}75%{transform:translateX(3px) rotate(7deg)}}
.eval-gros.eval-mauvais.actif{border-color:#e2433f; background:#fdeceb;
  box-shadow:0 0 0 4px rgba(226,67,63,.25)}
@media(prefers-reduced-motion:reduce){
  .eval-gros.eval-bien .eval-gros-emoji,.eval-gros.eval-mauvais.actif .eval-gros-emoji{animation:none}
}

/* Frise ressenti enfant/parent */
.stat-eval-grid{display:grid; gap:3px; margin:2px 0 6px}
.stat-eval-row{display:flex; align-items:center; gap:1px}
.stat-eval-lbl{flex:0 0 22px; font-size:15px; text-align:center}
.stat-eval-c{flex:1; text-align:center; font-size:16px; line-height:1.3}
.stat-eval-c.stat-eval-j{font-size:10px; color:var(--doux)}

.stat-axe{margin:4px 0 8px}
.stat-axe-lbl{font-size:12px; font-weight:700; color:var(--doux)}
.stat-lecture{font-size:14px; line-height:1.5; background:#f0f6ff; border-left:4px solid #5b8def;
  border-radius:0 10px 10px 0; padding:10px 12px; margin:8px 0 4px!important; color:var(--texte)!important}
.stat-disclaimer{font-style:italic}
.stat-top{display:grid; gap:4px}
.stat-top-ligne{display:flex; justify-content:space-between; font-size:14px; padding:4px 0;
  border-bottom:1px solid #eef2f7}
.stat-top-n{font-weight:800; color:var(--planete)}

/* ---- Espace parents : sous-menu (onglets) ---- */
.sous-nav{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; margin-bottom:6px;
  -webkit-overflow-scrolling:touch}
.sous-nav-btn{position:relative; flex:0 0 auto; border:2px solid #e3edf5; background:#fff;
  border-radius:14px; padding:10px 14px; font-size:14px; font-weight:800; cursor:pointer;
  font-family:inherit; color:var(--doux); white-space:nowrap; transition:.12s}
.sous-nav-btn.actif{background:var(--famille); border-color:var(--famille); color:#fff;
  box-shadow:0 3px 8px rgba(246,166,35,.3)}
.sous-nav-btn:active{transform:scale(.96)}
.sous-nav-pin{position:absolute; top:-6px; right:-6px; background:#e26d9b; color:#fff;
  font-size:11px; font-weight:800; min-width:18px; height:18px; line-height:18px;
  border-radius:9px; text-align:center; padding:0 4px}

/* ---- Barre de navigation ---- */
.navbar{position:fixed; bottom:0; left:0; right:0; background:#fff;
  box-shadow:0 -4px 16px rgba(40,60,90,.10); display:flex; z-index:30}
.nav-btn{flex:1; border:none; background:none; padding:8px 2px 10px; cursor:pointer;
  font-size:24px; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--doux); font-family:inherit}
.nav-btn span{font-size:11px; font-weight:700}
.nav-btn.actif{color:var(--texte)}
.nav-btn.actif{position:relative}
.nav-btn.actif::after{content:""; position:absolute; top:0; width:34px; height:4px;
  border-radius:0 0 6px 6px; background:var(--famille)}

/* ---- Toast & confettis ---- */
.toast{position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(40px);
  background:#2b3445; color:#fff; padding:14px 20px; border-radius:16px; font-weight:700;
  max-width:90vw; text-align:center; opacity:0; pointer-events:none; transition:.3s; z-index:50}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.succes{background:#2e9e6f}
.toast.info{background:#3a6ea5}
/* Animation d'obtention de badge */
.badge-pop{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(20,30,50,.45); animation:pop-fond .25s ease}
.badge-pop-carte{background:#fff; border-radius:24px; padding:26px 30px; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.3); animation:pop-carte .5s cubic-bezier(.2,1.4,.4,1)}
.badge-pop-rayons{font-size:72px; display:inline-block; animation:pop-tourne 1.2s ease both;
  filter:drop-shadow(0 0 12px gold)}
.badge-pop-titre{font-size:14px; font-weight:800; color:var(--doux); margin-top:6px; letter-spacing:1px; text-transform:uppercase}
.badge-pop-nom{font-size:22px; font-weight:800; color:var(--famille)}
@keyframes pop-fond{from{opacity:0}to{opacity:1}}
@keyframes pop-carte{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
@keyframes pop-tourne{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}

.sous-titre{font-weight:800; margin:10px 0 2px!important; color:var(--texte)!important}

#confettis{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden}
.confetti{position:absolute; top:-30px; animation:chute 1.8s linear forwards}
@keyframes chute{to{transform:translateY(110vh) rotate(360deg); opacity:.2}}

/* ---- Synchro ---- */
.sync-etat{font-size:14px; opacity:.8; margin-left:4px}

/* ---- Page d'accueil publique (landing) ---- */
.landing{max-width:1080px; margin:0 auto; padding:24px 16px 40px;
  display:grid; grid-template-columns:1fr; gap:22px; align-items:start}
.landing-hero{order:2}
.landing-form{order:1}
.landing-form .code-carte{max-width:none; width:100%; text-align:center; margin:0}
.hero-logo{font-size:54px; text-align:center}
.hero-nom{font-size:34px; margin:.1em 0; text-align:center}
.hero-titre{font-size:22px; font-weight:800; color:var(--texte); margin:.2em 0; text-align:center}
.hero-sous{font-size:15px; color:var(--doux); line-height:1.5; margin:.4em 0 1em; text-align:center}
.hero-features{display:grid; grid-template-columns:1fr; gap:10px}
.feat{display:flex; align-items:flex-start; gap:12px; background:#fff; border:2px solid #eef2f7;
  border-radius:16px; padding:12px 14px; box-shadow:var(--ombre)}
.feat-emoji{font-size:30px; flex:0 0 auto; line-height:1}
.feat strong{display:block; font-size:15px}
.feat span{font-size:13px; color:var(--doux); line-height:1.4}
.hero-steps{background:linear-gradient(135deg,#fff6e9,#eef9f3); border:2px solid #ffe6c2;
  border-radius:16px; padding:14px 16px 14px; margin-top:14px}
.hero-steps h2{font-size:17px; margin:0 0 6px}
.hero-steps ol{margin:0; padding-left:20px}
.hero-steps li{font-size:14px; line-height:1.5; margin:4px 0; color:var(--texte)}
.form-titre{margin:.2em 0 .6em}

@media(min-width:860px){
  .landing{grid-template-columns:1.25fr 380px; gap:32px; padding:34px 22px 50px; align-items:center}
  .landing-hero{order:1}
  .landing-form{order:2; position:sticky; top:24px}
  .hero-logo,.hero-nom,.hero-titre,.hero-sous{text-align:left}
  .hero-nom{font-size:40px}
  .hero-titre{font-size:26px}
  .hero-features{grid-template-columns:1fr 1fr}
}

/* ---- Écran code famille ---- */
.ecran-code{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px}
.code-carte{max-width:380px; text-align:center}
.code-logo{font-size:54px}
.code-carte h1{margin:.1em 0}
.code-carte input{width:100%; padding:14px; font-size:18px; text-align:center;
  border:3px solid #e3edf5; border-radius:14px; margin:12px 0; font-family:inherit}
.code-carte input.erreur{border-color:#e26d9b}
.code-carte .gros-bouton{width:100%}

/* ---- Mode parents : validations & corrections ---- */
.attente-ligne{display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid #eef2f7}
.att-info{flex:1; font-size:14px}
.att-info small{color:var(--doux); display:block}
.mini-btn{border:2px solid #e3edf5; background:#fff; border-radius:10px;
  min-width:40px; padding:8px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit}
.mini-btn.ok{border-color:#bfe9da; background:#f1faf6}
.mini-btn.non{border-color:#f2c9d6; background:#fdf0f4}
.mini-btn.danger{border-color:#f2c9d6; background:#fdf0f4; color:#c0395b}
.mini-btn:disabled{opacity:.55; cursor:default}
.reglage-entete{display:flex; align-items:center; justify-content:space-between; gap:10px}
.reglage-entete h2{margin:0}
.admin-item.actif{background:#f1faf6; border-radius:8px}
.switch-ligne{display:flex; align-items:center; gap:10px; margin:8px 0; font-size:14px; cursor:pointer}
.switch-ligne input{width:22px; height:22px}

.correction{border-left:6px solid var(--c)}
.ajusteur{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0}
.aj-label{font-weight:800; min-width:80px}
.aj-val{width:64px; padding:8px; text-align:center; border:2px solid #e3edf5;
  border-radius:10px; font-size:15px; font-family:inherit}
.hist-ligne{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f0f3f8}
.h-info{flex:1; font-size:14px}
.h-info small{color:var(--doux)}
.h-compte{min-width:24px; text-align:center; font-weight:800}
.hist-ligne.valide{background:#f1faf6; border-radius:8px}

/* Pastille d'attente sur la barre de navigation */
.nav-pin{position:absolute; top:2px; right:50%; transform:translateX(18px);
  background:#e26d9b; color:#fff; font-size:11px; font-weight:800;
  min-width:18px; height:18px; line-height:18px; border-radius:9px; text-align:center; padding:0 4px}

/* ---- Écrans famille / invitation ---- */
.code-carte .btn-secondaire{margin-top:8px}
.familles-liste{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.famille-item{background:#f1faf6; border:2px solid #cdeccf; border-radius:14px;
  padding:14px; font-size:16px; font-weight:800; cursor:pointer; text-align:left; font-family:inherit}
.famille-item small{display:block; font-weight:600; color:var(--doux); font-size:12px}
.invite-box{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.admin-liste{margin-top:10px}
.admin-item{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eef2f7}
.adm-info{flex:1; font-size:14px}
.adm-info small{display:block; color:var(--doux)}

/* ---- Sélecteur de sexe ---- */
.segmente{display:flex; gap:8px; margin-top:4px}
.seg{flex:1; padding:12px; border:2px solid #e3edf5; background:#fff; border-radius:12px;
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit}
.seg.actif{border-color:var(--c,#39c0a0); background:#f1faf6}

@media(max-width:420px){
  .compteurs{flex-direction:column; align-items:center}
}

/* =====================================================================
 * Smartphone : cibles tactiles agrandies pour une utilisation autonome
 * par de jeunes enfants. Gros boutons, gros emojis, texte bien lisible,
 * et zones de tap confortables (≥ ~56 px). N'affecte pas l'ordinateur
 * (tout est repris dans le bloc min-width:820px ci-dessous).
 * ===================================================================== */
@media(max-width:819px){
  /* On laisse de la place sous le contenu pour la barre de nav agrandie
     (y compris l'encoche/zone sûre des téléphones récents). */
  body{padding-bottom:calc(98px + env(safe-area-inset-bottom, 0px))}
  main{padding:12px}

  .carte h1{font-size:26px}
  .carte h2{font-size:21px}

  /* Sélecteur d'enfant : grandes pastilles faciles à toucher */
  .pastille{min-width:78px; padding:9px 12px; border-radius:18px}
  .pastille .pastille-emoji{font-size:32px}
  .pastille .pastille-nom{font-size:13px; max-width:78px}

  /* Avatar d'accueil plus présent + compteurs plus gros */
  .accueil-avatar .avatar-scene{width:132px; height:132px}
  .compteur{min-width:130px; padding:12px 16px}
  .compteur .big{font-size:28px}
  .compteur span:not(.big){font-size:13px}

  /* Missions : 3 colonnes, tuiles verticales compactes (emoji en haut,
     intitulé, points) — adaptées à un écran de téléphone. */
  .missions{grid-template-columns:repeat(3, 1fr) !important; gap:8px}
  .mission{flex-direction:column; align-items:center; gap:5px; text-align:center;
    padding:12px 6px; border-radius:18px; min-height:118px; justify-content:center}
  .mission .m-emoji{font-size:34px; line-height:1}
  .mission .m-titre{font-size:13px; line-height:1.15}
  .mission .m-points{font-size:13px; white-space:nowrap}

  /* Gros boutons d'action (raccourcis, écrans) */
  .gros-bouton{padding:22px; font-size:20px}

  /* Bandeau dodo : bouton large */
  .dodo-btn{padding:16px; font-size:17px}

  /* Lien « voir tout » et titres de catégorie : plus faciles à viser */
  .lien-cat{padding:10px 14px; font-size:14px; border-radius:12px}
  .titre-cat h2{font-size:19px}

  /* Écosystème : cartes d'espèces plus grandes */
  .eco-cartes{grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px}
  .eco-carte-sp{padding:14px 8px 10px; min-height:120px; border-radius:16px}
  .eco-carte-sp .ec-emoji{font-size:42px}
  .eco-carte-sp .ec-nom{font-size:14px}
  .eco-carte-sp .ec-cout{font-size:13px}
  .eco-carte-sp .ec-etat{font-size:12px; padding:4px 10px}

  /* Avatar : options plus grandes */
  .options{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:12px}
  .option{padding:14px 8px; border-radius:18px}
  .option .o-apercu, .option .o-apercu .av-svg{width:60px; height:60px}
  .option .o-swatch{width:42px; height:42px}
  .option .o-nom{font-size:13px}
  .option .o-cout{font-size:13px}

  /* Barre de navigation : grandes zones tactiles, icônes plus visibles */
  .navbar{padding-bottom:env(safe-area-inset-bottom, 0px)}
  .nav-btn{padding:12px 2px 14px; font-size:30px; min-height:62px}
  .nav-btn span{font-size:12px}

  /* Boutons secondaires / mini-boutons : hauteur de tap confortable */
  .btn-secondaire,.btn-danger{padding:16px; font-size:16px}
  .mini-btn{min-width:48px; padding:12px; font-size:17px}
}

/* =====================================================================
 * Accueil : disposition 2 colonnes (desktop) / empilée (mobile)
 * ===================================================================== */
.accueil-layout{display:block}
.acc-col{display:block}

/* =====================================================================
 * Tablette & ordinateur : largeurs confortables, en-tête et barre
 * de navigation centrées, effets de survol (souris).
 * ===================================================================== */
@media(min-width:820px){
  body{padding-bottom:96px}

  /* Contenu plus large et centré */
  main{max-width:1040px; padding:22px}

  /* En-tête : tout sur une ligne, centré sur la largeur du contenu */
  .topbar{flex-direction:row; align-items:center; gap:16px; padding:12px 22px}
  .topbar .logo{flex:0 0 auto; padding-left:48px}
  .topbar .selecteur{flex:1 1 auto; justify-content:flex-end}
  .pastille-inviter{width:40px; height:40px; font-size:21px}

  /* Accueil sur 2 colonnes : profil/dodo à gauche, le reste à droite */
  main[data-vue="accueil"] .accueil-layout{
    display:grid; grid-template-columns:330px 1fr; gap:20px; align-items:start;
  }
  .acc-col-a{position:sticky; top:90px}

  /* Barre de navigation : pilule flottante centrée */
  .navbar{
    left:50%; right:auto; bottom:16px; transform:translateX(-50%);
    width:auto; max-width:680px; border-radius:22px; padding:4px 8px;
    box-shadow:0 8px 26px rgba(40,60,90,.18);
  }
  .nav-btn{padding:10px 18px}
  .nav-btn.actif::after{top:auto; bottom:-4px}

  /* Survol souris : petit relief sur les éléments cliquables */
  .mission:hover, .eco-carte-sp:hover, .pastille:hover,
  .raccourcis .gros-bouton:hover, .famille-item:hover{
    transform:translateY(-2px); box-shadow:var(--ombre);
  }
  .gros-bouton:hover{filter:brightness(1.03)}
  .btn-secondaire:hover, .mini-btn:hover{filter:brightness(.98)}
}

/* Très grand écran : on garde une largeur de lecture agréable */
@media(min-width:1280px){
  main{max-width:1140px}
  main[data-vue="accueil"] .accueil-layout{grid-template-columns:360px 1fr}
}