/* ============================================================
   spiKto — charte graphique commune de la plateforme
   Construite sur les pictogrammes SPIKTO : formes = compétences,
   couleurs = niveaux (mauve → jaune → bleu → vert → noir).
   ============================================================ */
:root{
  --font-titre:'Zilla Slab',Georgia,serif;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* niveaux */
  --mauve:#C0569A; --jaune:#E8A200; --bleu:#3D92B1; --vert:#59A44B; --noir:#2B2422;
  --mauve-pale:#FBEFF6; --jaune-pale:#FFF6DA; --bleu-pale:#E8F3FC; --vert-pale:#EEF6E5;
  /* interface */
  --encre:#2B2422; --texte:#4A4543; --doux:#8A837F; --trait:#E7E1DD; --fond:#FFFFFF; --fond-2:#F8F5F2; --fond-3:#F2ECE6;
  --succes:#3E8E3E; --alerte:#B54708; --erreur:#C2263D;
  --rayon:14px; --ombre:0 14px 40px rgba(43,36,34,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--texte);background:var(--fond-2);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
h1,h2,h3{font-family:var(--font-titre);color:var(--encre);font-weight:500;line-height:1.15}
h1{font-size:clamp(1.9rem,4vw,2.6rem)} h2{font-size:1.6rem} h3{font-size:1.2rem}
a{color:var(--mauve)} a:hover{color:var(--encre)}
img{max-width:100%;display:block}
.conteneur{max-width:1120px;margin:0 auto;padding:0 20px}
.etroit{max-width:480px;margin:0 auto}
.doux{color:var(--doux)} .petit{font-size:.88rem}
.pile>*+*{margin-top:16px}

/* En-tête */
.entete{background:var(--fond);border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:50}
.entete .conteneur{display:flex;align-items:center;gap:20px;height:64px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);font-family:var(--font-titre);font-size:1.45rem;font-weight:500}
.marque img{width:30px;height:30px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--texte);font-size:.95rem}
.nav a:hover,.nav a[aria-current=page]{background:var(--fond-3);color:var(--encre)}

/* Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--encre);background:var(--encre);color:#fff;
  border-radius:999px;padding:11px 22px;font:500 1rem var(--font);text-decoration:none;cursor:pointer;transition:.2s}
.bouton:hover{background:#000;color:#fff}
.bouton.secondaire{background:transparent;color:var(--encre)} .bouton.secondaire:hover{background:var(--fond-3)}
.bouton.plein{width:100%}
.bouton:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

/* Cartes */
.carte{background:var(--fond);border:1px solid var(--trait);border-radius:var(--rayon);padding:28px}
.carte.ombre{box-shadow:var(--ombre);border-color:transparent}
.grille{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Formulaires */
label{display:block;font-weight:500;color:var(--encre);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--trait);border-radius:10px;background:#fff;color:var(--encre)}
input:focus,select:focus{border-color:var(--bleu)}
.champ+.champ{margin-top:18px}
.aide{font-size:.88rem;color:var(--doux);margin-top:6px}
.erreur-champ{font-size:.88rem;color:var(--erreur);margin-top:6px}
.case{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.case input{margin-top:5px}

/* Messages */
.message{border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:.95rem}
.message.ok{background:var(--vert-pale);color:#2C5E22}
.message.info{background:var(--bleu-pale);color:#1F5A73}
.message.erreur{background:#FDECEE;color:var(--erreur)}

/* Pictos et niveaux */
.picto{width:28px;height:28px;object-fit:contain;display:inline-block;vertical-align:middle}
.picto.grand{width:56px;height:56px}
.niveaux{display:flex;gap:6px;align-items:center}
.niveau{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;color:#fff}
.niveau.ferme{background:var(--fond-3)!important;color:var(--doux)}
.n1{background:var(--mauve)} .n2{background:var(--jaune)} .n3{background:var(--bleu)} .n4{background:var(--vert)} .n5{background:var(--noir)}
.pastille{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.8rem;background:var(--fond-3);color:var(--texte)}

/* Pages de compte */
.page-compte{min-height:100vh;display:flex;flex-direction:column}
.page-compte main{flex:1;display:flex;align-items:center;padding:48px 20px}
.compte-titre{text-align:center;margin-bottom:24px}
.compte-titre .pictos{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.separateur{text-align:center;color:var(--doux);font-size:.9rem;margin:20px 0}

/* Pied de page */
.pied{border-top:1px solid var(--trait);background:var(--fond);padding:28px 0;font-size:.88rem;color:var(--doux);margin-top:64px}
.pied .conteneur{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
.pied a{color:var(--doux)}

main.page{padding:40px 0}
@media (max-width:700px){.carte{padding:22px}.nav a{padding:6px 8px;font-size:.9rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Choix d'un picto (profils famille) */
input[type=radio]:checked + img{outline:3px solid var(--bleu);outline-offset:3px;border-radius:50%}
input[type=radio]:focus-visible + img{outline:3px dashed var(--bleu);outline-offset:3px}

/* Accueil public */
.hero{padding:72px 0 56px;background:var(--fond)}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:820px}
.hero .lead{font-size:1.2rem;max-width:680px;margin:18px 0 28px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.publics{padding:56px 0}
.nav a.bouton{color:#fff;background:var(--encre);padding:8px 18px}
.nav a.bouton:hover{background:#000;color:#fff}

/* ── Séances ─────────────────────────────────────────────── */
.grille-niveaux{display:grid;gap:14px}
.niveau-ligne{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;background:var(--fond);border:1px solid var(--trait);border-radius:var(--rayon);padding:16px 20px}
.niveau-ligne.ferme{opacity:.55}
.cases{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.case-grille{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;text-decoration:none;color:var(--texte);border:1.5px solid transparent;font-size:.8rem;text-align:center}
a.case-grille:hover{border-color:var(--trait);background:var(--fond-2)}
.case-grille img{width:44px;height:44px;object-fit:contain}
.case-grille.validee{background:var(--vert-pale)}
.points{display:flex;gap:3px}
.points i{width:7px;height:7px;border-radius:50%;background:var(--trait)}
.points i.plein{background:var(--vert)}
.texte-seance{white-space:pre-line;font-size:1.35rem;line-height:1.9;color:var(--encre);background:var(--fond);border-radius:var(--rayon);padding:28px;border:1px solid var(--trait)}
.lettre-picto{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;margin:0 .02em}
.question{background:var(--fond);border:1px solid var(--trait);border-radius:var(--rayon);padding:20px 22px}
.question legend{font-weight:600;color:var(--encre);margin-bottom:12px;font-size:1.05rem}
.reponses{display:grid;gap:8px}
.reponses label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--trait);border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:400;margin:0}
.reponses label:has(input:checked){border-color:var(--bleu);background:var(--bleu-pale)}
.reponses.en-ligne{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}
.operation{display:flex;align-items:center;gap:12px;font-size:1.6rem;font-weight:600;color:var(--encre);margin-bottom:12px;flex-wrap:wrap}
.operation img{width:46px;height:46px}
.resultat-score{font-family:var(--font-titre);font-size:3rem;color:var(--encre)}
.qui{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.qui button{border:1.5px solid var(--trait);background:var(--fond);border-radius:999px;padding:6px 14px 6px 6px;display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit}
.qui button[aria-pressed=true]{border-color:var(--encre);background:var(--fond-3)}
.qui img{width:26px;height:26px}
@media (max-width:700px){.niveau-ligne{grid-template-columns:1fr}.cases{gap:4px}.case-grille img{width:34px;height:34px}.texte-seance{font-size:1.15rem;padding:20px}}

/* ── Badges ──────────────────────────────────────────────── */
.badges{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));padding:0}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--fond);border:1px solid var(--trait);border-radius:var(--rayon);padding:20px 14px}
.badge img{width:56px;height:56px;object-fit:contain;filter:grayscale(1);opacity:.35}
.badge strong{color:var(--doux);font-weight:500}
.badge.obtenu{border-color:transparent;box-shadow:var(--ombre)}
.badge.obtenu img{filter:none;opacity:1}
.badge.obtenu strong{color:var(--encre)}
.badges-nouveaux{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 20px}
.badges-nouveaux div{display:flex;align-items:center;gap:10px;background:var(--jaune-pale);border-radius:999px;padding:6px 16px 6px 6px}
.badges-nouveaux img{width:36px;height:36px;object-fit:contain}

/* ── Annuaire « Trouver un spiktor » ─────────────────────── */
.annuaire-filtres{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:12px;align-items:end;background:var(--fond-2);border-radius:var(--rayon);padding:18px}
.annuaire{list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.annuaire .carte{display:flex;flex-direction:column;gap:12px;padding:20px}
.annuaire-lien{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--texte)}
.annuaire-lien>span{display:flex;flex-direction:column;gap:2px}
.annuaire-lien strong{color:var(--encre);font-size:1.1rem}
.annuaire-lien:hover strong{color:var(--mauve)}
.etiquettes{display:flex;gap:6px 14px;flex-wrap:wrap}
.case-a-cocher{display:flex;gap:8px;align-items:flex-start;font-weight:400;cursor:pointer;margin:0}
.case-a-cocher input{margin-top:4px}
.fiche-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.fiche-bio{font-size:1.08rem;line-height:1.7;color:var(--encre)}
.fiche-infos{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin-top:24px}
.fiche-infos dt{color:var(--doux)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:800px){.annuaire-filtres,.fiche-grille{grid-template-columns:1fr}}

/* ── Pages légales ───────────────────────────────────────── */
.legal{max-width:780px}
.legal h2{font-size:1.4rem;margin:36px 0 10px}
.legal h3{font-size:1.1rem;margin:22px 0 6px}
.legal p,.legal li{line-height:1.7}
.legal p+p{margin-top:10px}
.legal ul,.legal ol{margin:8px 0 8px 22px}
.legal table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:8px 10px;border:1px solid var(--trait);vertical-align:top}
.legal th{background:var(--fond-2)}
.legal .maj{color:var(--doux);font-style:italic;margin-top:40px;font-size:.9rem}
.legal .encadre{background:var(--fond-2);border-radius:var(--rayon);padding:18px 22px;margin:14px 0}
.a-completer{background:#FFF6DA;border:1px dashed #E0B34D;border-radius:6px;padding:1px 6px;font-style:italic;color:#8A5A00}
.pied nav{display:inline}
.portrait{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin:24px 0}
.portrait img{width:180px;height:auto;border-radius:var(--rayon);box-shadow:var(--ombre)}
.portrait>div{flex:1;min-width:260px}
.table-defile{overflow-x:auto}

/* En-tête sur petit écran : le menu passe sous le logo et défile horizontalement */
@media (max-width:820px){
  .entete .conteneur{height:auto;flex-wrap:wrap;gap:6px;padding-top:10px;padding-bottom:8px}
  .entete .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .entete .nav::-webkit-scrollbar{display:none}
  .entete .nav a,.entete .nav form{white-space:nowrap;flex:none}
}

/* ── Ressources ──────────────────────────────────────────── */
.ressource{display:flex;flex-direction:column;gap:8px;padding:0 0 22px;overflow:hidden}
.ressource>*:not(video):not(.ressource-image){margin-left:22px;margin-right:22px}
.ressource video,.ressource-image{width:100%;aspect-ratio:16/9;background:#000;display:block}
.ressource-image{background-size:cover;background-position:center;display:grid;place-items:center;position:relative}
.ressource-image span{background:rgba(0,0,0,.55);color:#fff;border-radius:999px;padding:6px 12px;font-size:.9rem}
.ressource-image.pdf{background:var(--fond-3);gap:6px;align-content:center}
.ressource-image.pdf img{width:56px;height:56px}
.ressource-image.pdf span{background:var(--encre)}
.ressource.verrouillee .ressource-image:not(.pdf){filter:grayscale(.6)}
.ressource h3{font-size:1.15rem;margin-top:8px}
.ressource .bouton{align-self:flex-start}
.outils-calcul{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.outils-calcul .outil{display:flex;gap:14px;align-items:center;padding:16px 18px;text-decoration:none;color:var(--texte)}
.outils-calcul .outil:hover{box-shadow:var(--ombre)}
.outils-calcul img{width:44px;height:44px;flex:none}
.outils-calcul strong{color:var(--encre)}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media print{
  .entete,.pied,.pas-imprimer,.sous-nav{display:none!important}
  body{background:#fff}
  .texte-seance{border:0;padding:0;font-size:16pt}
}
.chiffres-perso{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.chiffres-perso .carte{text-align:center;padding:22px}
.chiffres-perso b{display:block;font-family:var(--font-titre);font-size:2.4rem;font-weight:500;color:var(--mauve);line-height:1.1}
.chiffres-perso small{display:block;color:var(--doux);font-size:.82rem;margin-top:4px}
.histogramme{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;height:180px;align-items:end;padding:20px 20px 12px}
.histogramme div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.histogramme span{width:100%;background:var(--mauve);border-radius:6px 6px 0 0}
.histogramme small{font-size:.7rem;color:var(--doux)}

/* ── Charte spiKto dans l'espace connecté : pictos, couleurs des niveaux ── */
/* Liseré aux 5 couleurs sous l'en-tête */
.entete{border-bottom:0}
.entete::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--mauve) 0 20%,var(--jaune) 20% 40%,var(--bleu) 40% 60%,var(--vert) 60% 80%,var(--noir) 80% 100%)}
/* Menu illustré */
.nav a{display:inline-flex;align-items:center;white-space:nowrap}
.nav-picto{width:18px;height:18px;object-fit:contain;margin-right:6px;flex:none}
.nav a[aria-current=page] .nav-picto{transform:scale(1.15)}
/* Titre de page : le picto de la rubrique, et une frise de formes en fond */
.espace main.page h1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.espace main.page h1:not(:has(img))::before{content:"";flex:none;width:1.25em;height:1.25em;background:var(--picto-page) center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(58,54,56,.18))}
.espace main.page{background-image:url('../pictos/triangle-mauve.webp'),url('../pictos/croix-jaune.webp'),url('../pictos/carre-bleu.webp'),url('../pictos/rond-vert.webp'),url('../pictos/cible-noir.webp');
  background-repeat:no-repeat;background-size:34px;background-position:calc(100% - 214px) 34px,calc(100% - 166px) 34px,calc(100% - 118px) 34px,calc(100% - 70px) 34px,calc(100% - 22px) 34px}
@media (max-width:900px){.espace main.page{background-image:none}}
/* Titres de cartes : un picto, qui alterne formes et couleurs d'une carte à l'autre */
.espace .carte{--p:url('../pictos/rond-mauve.webp')}
.espace .grille>.carte:nth-child(5n+2),.espace .grille>form.carte:nth-child(5n+2){--p:url('../pictos/croix-jaune.webp')}
.espace .grille>.carte:nth-child(5n+3),.espace .grille>form.carte:nth-child(5n+3){--p:url('../pictos/carre-bleu.webp')}
.espace .grille>.carte:nth-child(5n+4),.espace .grille>form.carte:nth-child(5n+4){--p:url('../pictos/triangle-vert.webp')}
.espace .grille>.carte:nth-child(5n+5),.espace .grille>form.carte:nth-child(5n+5){--p:url('../pictos/cible-noir.webp')}
.espace .carte>h2{display:flex;align-items:center;gap:10px}
.espace .carte>h2::before{content:"";flex:none;width:1.05em;height:1.05em;background:var(--p) center/contain no-repeat}
/* Cartes : un filet de couleur en haut, assorti au picto */
.espace .grille>.carte{border-top:3px solid var(--mauve-pale)}
.espace .grille>.carte:nth-child(5n+2){border-top-color:var(--jaune-pale)}
.espace .grille>.carte:nth-child(5n+3){border-top-color:var(--bleu-pale)}
.espace .grille>.carte:nth-child(5n+4){border-top-color:var(--vert-pale)}
.espace .grille>.carte:nth-child(5n+5){border-top-color:var(--fond-3)}
/* Sous-titres de section */
.espace main.page>.conteneur>h2{display:flex;align-items:center;gap:10px}
.espace main.page>.conteneur>h2::before{content:"";width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--mauve) 0 20%,var(--jaune) 0 40%,var(--bleu) 0 60%,var(--vert) 0 80%,var(--noir) 0)}
/* Messages illustrés */
.message{position:relative;padding-left:46px}
.message::before{content:"";position:absolute;left:14px;top:13px;width:22px;height:22px;background:center/contain no-repeat}
.message.ok::before{background-image:url('../pictos/rond-vert.webp')}
.message.info::before{background-image:url('../pictos/carre-bleu.webp')}
.message.erreur::before{background-image:url('../pictos/croix-mauve.webp')}
/* Tableaux */
.espace table th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);font-weight:600}
.espace table tr:hover td{background:var(--fond-2)}
/* Pastilles « badge » et étiquettes */
.espace .pastille{background:var(--jaune-pale);color:#7A5600}