/* ============================================================
   NeedHelpApp — feuille de style unique du portail.
   Reprend l'identité de teaching.needhelpapp.com : indigo #3B2F7F,
   titres sérif avec le mot-clé en italique, fonds clairs, aucune ombre.
   ============================================================ */

:root{
  --encre:#221D33;
  --encre-doux:#5B5470;
  --papier:#F5F4F9;
  --panneau:#FFFFFF;
  --trait:#DEDBE9;
  --indigo:#3B2F7F;
  --indigo-fonce:#332869;
  --indigo-clair:#EDEAF7;
  --rouge:#8E2A2A;
  --rouge-clair:#FBEEEE;
  --vert:#1B6547;
  --vert-clair:#EAF3EE;

  --d-ecole:#3B2F7F;
  --d-sport:#1B6547;
  --d-artisan:#A0521A;
  --d-asso:#7A2E4E;
  --d-admin:#1F5570;
  --d-quartier:#6B6215;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --large:clamp(1rem,4vw,2.5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}
.enveloppe{max-width:74rem;margin:0 auto;padding:0 var(--large);width:100%}
.etroit{max-width:31rem}
.lecture{max-width:44rem}
.saut-contenu{position:absolute;left:-9999px}
.saut-contenu:focus{left:var(--large);top:.5rem;z-index:20;background:var(--panneau);
  padding:.6rem 1rem;border:1px solid var(--indigo);border-radius:6px}

/* ---------- en-tête ---------- */
.entete{border-bottom:1px solid var(--trait);background:var(--panneau);position:relative}
.entete .rangee{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}
.marque{font-family:var(--serif);font-size:1.25rem;text-decoration:none;white-space:nowrap}
.marque .aide{font-style:italic;color:var(--indigo)}
.navigation{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.navigation a{text-decoration:none;font-size:.9375rem;color:var(--encre-doux)}
.navigation a:hover{color:var(--indigo)}
.navigation a[aria-current=page]{color:var(--indigo)}
.navigation .connexion{color:var(--indigo);font-weight:500}
.bascule{display:none;margin-left:auto;background:none;border:1px solid var(--trait);
  border-radius:6px;padding:.5rem .75rem;font:inherit;font-size:.875rem;cursor:pointer}

/* ---------- accroche de l'accueil ---------- */
.accroche{padding:clamp(3rem,9vw,6rem) 0 clamp(2.5rem,6vw,4rem)}
.accroche h1{font-size:clamp(2.1rem,6.2vw,3.9rem);line-height:1.08;max-width:16ch}
.accroche h1 em{font-style:italic;color:var(--indigo)}
.chapeau{max-width:52ch;margin:1.5rem 0 0;color:var(--encre-doux);font-size:1.125rem}
.recherche{margin-top:2.5rem;max-width:34rem}
.recherche label{display:block;font-size:.9375rem;margin-bottom:.5rem;color:var(--encre-doux)}
.compteur{margin-top:.75rem;font-size:.9375rem;color:var(--encre-doux);min-height:1.5rem}

/* ---------- domaines ---------- */
.domaines{padding-bottom:clamp(3rem,8vw,5rem)}
.grille{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  margin:0;padding:0;list-style:none}
.domaine{position:relative;background:var(--panneau);border:1px solid var(--trait);
  border-left:4px solid var(--teinte,var(--indigo));border-radius:4px;
  padding:1.5rem 1.5rem 1.375rem;display:flex;flex-direction:column}
.domaine[hidden]{display:none}
.etat{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;color:var(--encre-doux)}
.etat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teinte)}
.etat.attente::before{background:none;box-shadow:inset 0 0 0 1.5px var(--encre-doux)}
.domaine h3{font-size:1.4rem;margin:.6rem 0 .5rem;line-height:1.2}
.domaine h3 em{font-style:italic;color:var(--teinte)}
.domaine p{margin:0;color:var(--encre-doux);font-size:.9688rem}
.details{margin:1rem 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--encre-doux)}
.details li{padding-left:1rem;position:relative;margin-bottom:.3rem}
.details li::before{content:"—";position:absolute;left:0;color:var(--teinte)}
.ouvrir{margin-top:1.5rem;font-size:.9375rem;font-weight:500;color:var(--teinte);text-decoration:none}
.ouvrir:hover{text-decoration:underline}
.avertir{margin-top:1.5rem;font-size:.9375rem;color:var(--encre-doux)}
.avertir a{color:var(--teinte)}
.vide{color:var(--encre-doux);padding:2rem 0}

/* ---------- bandeau indigo ---------- */
.compte{background:var(--indigo);color:#fff;padding:clamp(3rem,7vw,4.5rem) 0}
.compte h2{font-size:clamp(1.7rem,4vw,2.4rem);max-width:20ch}
.compte h2 em{font-style:italic}
.colonnes{display:grid;gap:2rem 3rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.5rem}
.colonnes h3{font-size:1.125rem;font-family:var(--sans);font-weight:600;margin-bottom:.5rem}
.colonnes p{margin:0;color:#D5CFF0;font-size:.9688rem}

/* ---------- formulaires ---------- */
form{display:grid;gap:1.125rem}
label span{display:block;font-size:.9375rem;margin-bottom:.4rem;color:var(--encre-doux)}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;padding:.8rem .9rem;font:inherit;color:var(--encre);
  background:var(--panneau);border:1px solid var(--trait);border-radius:8px;
}
input::placeholder,textarea::placeholder{color:#9D97AF}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);outline:none;
  box-shadow:0 0 0 3px var(--indigo-clair)}
input[aria-invalid=true]{border-color:var(--rouge)}
textarea{min-height:7rem;resize:vertical}
.duo{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.aide-champ{font-size:.875rem;color:var(--encre-doux);margin:.4rem 0 0}
.case{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem;color:var(--encre-doux)}
.case input{margin-top:.3rem;flex:none;accent-color:var(--indigo);width:1rem;height:1rem}
.case a{color:var(--indigo)}

.bouton{display:inline-block;background:var(--indigo);color:#fff;border:0;border-radius:8px;
  padding:.8rem 1.5rem;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;text-align:center}
.bouton:hover{background:var(--indigo-fonce)}
.bouton[disabled]{opacity:.55;cursor:default}
.bouton.large{width:100%}
.bouton.discret{background:none;color:var(--indigo);border:1px solid var(--trait)}
.bouton.discret:hover{background:var(--indigo-clair)}
.bouton.danger{background:none;color:var(--rouge);border:1px solid var(--trait)}
.bouton.danger:hover{background:var(--rouge-clair)}
form .bouton{justify-self:start}
form .bouton.large{justify-self:stretch}

/* ---------- messages ---------- */
.avis{padding:.9rem 1.1rem;border-radius:8px;font-size:.9375rem;border:1px solid var(--trait);
  background:var(--panneau)}
.avis.erreur{background:var(--rouge-clair);border-color:#E7C9C9;color:var(--rouge)}
.avis.succes{background:var(--vert-clair);border-color:#C9E0D3;color:var(--vert)}
.avis.info{background:var(--indigo-clair);border-color:#D3CBEE;color:var(--indigo)}
.avis a{color:inherit}
.avis:empty{display:none}

/* ---------- pages d'authentification ---------- */
.auth{padding:clamp(2.5rem,7vw,4.5rem) 0}
.auth h1{font-size:clamp(1.8rem,4.5vw,2.5rem);line-height:1.15}
.auth h1 em{font-style:italic;color:var(--indigo)}
.auth > .enveloppe > p{color:var(--encre-doux);margin:.9rem 0 2rem}
.panneau{background:var(--panneau);border:1px solid var(--trait);border-radius:6px;
  padding:clamp(1.5rem,4vw,2rem)}
.separateur{display:flex;align-items:center;gap:1rem;color:var(--encre-doux);
  font-size:.875rem;margin:1.5rem 0}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--trait)}
.sous-lien{margin-top:1.5rem;font-size:.9375rem;color:var(--encre-doux);text-align:center}
.sous-lien a{color:var(--indigo)}
.jauge{height:4px;border-radius:2px;background:var(--trait);overflow:hidden;margin-top:.5rem}
.jauge span{display:block;height:100%;width:0;background:var(--rouge);transition:width .2s,background .2s}
@media (prefers-reduced-motion:reduce){.jauge span{transition:none}}

/* ---------- documents (CGU, confidentialité, mentions) ---------- */
.doc{padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(3rem,8vw,5rem)}
.doc h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.12}
.doc h1 em{font-style:italic;color:var(--indigo)}
.date-maj{color:var(--encre-doux);font-size:.9375rem;margin:.9rem 0 2.5rem}
.doc h2{font-size:1.45rem;margin:2.75rem 0 .75rem;padding-top:1.5rem;border-top:1px solid var(--trait)}
.doc h3{font-size:1.15rem;font-family:var(--sans);font-weight:600;margin:1.75rem 0 .5rem}
.doc p,.doc li{color:#3A3450}
.doc ul{padding-left:1.1rem}
.doc li{margin-bottom:.4rem}
.doc dl{margin:1rem 0}
.doc dt{font-weight:600;margin-top:1rem}
.doc dd{margin:.25rem 0 0;color:var(--encre-doux)}
.doc table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.9375rem}
.doc th,.doc td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--trait);vertical-align:top}
.doc th{font-weight:600;color:var(--encre)}
.doc td{color:var(--encre-doux)}
.sommaire{background:var(--panneau);border:1px solid var(--trait);border-radius:6px;
  padding:1.25rem 1.5rem;margin-bottom:2.5rem}
.sommaire ol{margin:0;padding-left:1.2rem;font-size:.9375rem}
.sommaire li{margin-bottom:.35rem}
.sommaire a{color:var(--indigo);text-decoration:none}
.sommaire a:hover{text-decoration:underline}
.a-completer{background:#FFF8E1;border:1px dashed #C9A227;border-radius:6px;
  padding:.9rem 1.1rem;font-size:.9375rem;color:#6B5300;margin:1.25rem 0}

/* ---------- questions fréquentes ---------- */
.question{border-bottom:1px solid var(--trait);padding:.25rem 0}
.question summary{cursor:pointer;padding:1rem 0;font-weight:500;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";color:var(--indigo);font-size:1.25rem;line-height:1}
.question[open] summary::after{content:"–"}
.question p{margin:0 0 1rem;color:var(--encre-doux);max-width:62ch}

/* ---------- profil et abonnement ---------- */
.tuiles{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin:0;padding:0;list-style:none}
.tuile{background:var(--panneau);border:1px solid var(--trait);border-radius:6px;padding:1.35rem 1.5rem}
.tuile h3{font-size:1.15rem;margin-bottom:.35rem}
.tuile p{margin:0;color:var(--encre-doux);font-size:.9375rem}
.section{padding:clamp(2rem,5vw,3rem) 0;border-bottom:1px solid var(--trait)}
.section:last-child{border-bottom:0}
.section h2{font-size:1.6rem;margin-bottom:.5rem}
.section h2 em{font-style:italic;color:var(--indigo)}
.section > p:first-of-type{color:var(--encre-doux);margin:0 0 1.5rem;max-width:56ch}
.paire{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px solid var(--trait);font-size:.9688rem}
.paire:last-child{border-bottom:0}
.paire dt{color:var(--encre-doux)}
.paire dd{margin:0;font-weight:500}
.pastille{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;
  padding:.2rem .6rem;border-radius:99px;background:var(--indigo-clair);color:var(--indigo)}
.pastille.libre{background:var(--papier);color:var(--encre-doux)}

/* ---------- pied ---------- */
.pied{border-top:1px solid var(--trait);padding:2.5rem 0 3.5rem;font-size:.9063rem;color:var(--encre-doux)}
.liens{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0 0 1.25rem;padding:0;list-style:none}
.liens a{text-decoration:none}
.liens a:hover{text-decoration:underline}

@media (max-width:47rem){
  .bascule{display:block}
  .navigation{display:none;position:absolute;left:0;right:0;top:4.25rem;z-index:5;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--panneau);
    border-bottom:1px solid var(--trait);padding:.5rem var(--large) 1rem}
  .navigation.ouverte{display:flex}
  .navigation a{padding:.75rem 0;width:100%;border-bottom:1px solid var(--trait)}
  .navigation a:last-child{border-bottom:0}
  .duo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =========================================================
   L'administration

   Sobre à dessein : on y vient lire des chiffres et corriger
   une ligne, pas pour être séduit. Mais sobre ne veut pas dire
   négligé — un tableau qui respire se lit deux fois plus vite.
   ========================================================= */

/* ---------- les onglets ---------- */
.admin-onglets{
  background:var(--panneau);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:40;
}
.admin-onglets .enveloppe{
  display:flex;gap:.5rem;overflow-x:auto;padding-top:.6rem;padding-bottom:0;
  scrollbar-width:thin;
}
.admin-onglets a{
  flex:0 0 auto;padding:.7rem 1.05rem;margin-bottom:-1px;
  color:var(--encre-doux);text-decoration:none;font-size:.95rem;white-space:nowrap;
  border-bottom:2px solid transparent;border-radius:.4rem .4rem 0 0;
}
.admin-onglets a:hover{color:var(--encre);background:var(--indigo-clair)}
.admin-onglets a[aria-current="page"]{
  color:var(--indigo);border-bottom-color:var(--indigo);font-weight:600;
}

/* ---------- les compteurs ---------- */
.admin-chiffres{
  list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.admin-chiffres li{
  background:var(--panneau);border:1px solid var(--trait);border-radius:.9rem;
  padding:1.1rem 1.2rem;
}
.admin-chiffres b{
  display:block;font-family:var(--serif);font-size:2rem;line-height:1.05;
  font-weight:400;color:var(--indigo);
}
.admin-chiffres span{
  display:block;margin-top:.35rem;font-size:.85rem;color:var(--encre-doux);line-height:1.35;
}

/* ---------- les filtres ---------- */
.admin-filtres{
  display:flex;flex-wrap:wrap;gap:.6rem;margin:1.75rem 0 1.25rem;align-items:center;
}
.admin-filtres input,.admin-filtres select{
  padding:.65rem .8rem;border:1px solid var(--trait);border-radius:.55rem;
  font:inherit;font-size:.95rem;background:var(--panneau);min-height:44px;color:var(--encre);
}
.admin-filtres input{flex:1 1 260px;min-width:0}
.admin-filtres select{flex:0 1 240px}
.admin-filtres input:focus,.admin-filtres select:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-clair);
}
.admin-filtres .bouton{flex:0 0 auto;min-height:44px}

/* ---------- les tableaux ---------- */
.admin-tableau-cadre{
  overflow-x:auto;border:1px solid var(--trait);border-radius:.9rem;
  background:var(--panneau);
}
.admin-tableau{width:100%;border-collapse:collapse;font-size:.92rem}
.admin-tableau th{
  text-align:left;font-weight:600;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-doux);padding:.85rem 1rem;border-bottom:1px solid var(--trait);
  white-space:nowrap;background:var(--papier);
}
.admin-tableau td{
  padding:.85rem 1rem;border-bottom:1px solid var(--trait);vertical-align:top;line-height:1.45;
}
.admin-tableau tr:last-child td{border-bottom:0}
.admin-tableau tbody tr:hover td{background:var(--indigo-clair)}
.admin-tableau tr.supprime td{opacity:.5}
.admin-tableau b{font-weight:600}
.admin-tableau select{
  padding:.45rem .6rem;border:1px solid var(--trait);border-radius:.45rem;
  font:inherit;font-size:.88rem;background:var(--panneau);color:var(--encre);max-width:100%;
}
.admin-tableau select:disabled{opacity:.5;cursor:not-allowed}
.admin-tableau .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;color:var(--encre-doux);word-break:break-all;
}
.admin-alerte{color:var(--rouge);font-size:.8rem;font-weight:600}

/* ---------- messages et pagination ---------- */
.admin-message{
  margin:1rem 0;padding:.8rem 1.1rem;border-radius:.6rem;font-size:.93rem;
  border:1px solid transparent;
}
.admin-message.ok{background:var(--vert-clair);color:var(--vert);border-color:#BEDDCB}
.admin-message.err{background:var(--rouge-clair);color:var(--rouge);border-color:#E4B4AF}

.admin-pages{
  display:flex;gap:1.25rem;align-items:center;margin-top:1.25rem;font-size:.92rem;
}
.admin-pages span{color:var(--encre-doux)}

@media (max-width:720px){
  .admin-tableau{font-size:.86rem}
  .admin-tableau th,.admin-tableau td{padding:.7rem}
  .admin-filtres input,.admin-filtres select,.admin-filtres .bouton{flex:1 1 100%}
}