/* =====================================================================
 * 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 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}

.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}

/* ---- 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.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)}
.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}
.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}

/* ---- 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}

/* ---- É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}
}

/* =====================================================================
 * 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}
}