/* =====================================================================
   Site du conseil d'école — feuille de style unique (public + admin).
   Mobile d'abord, contrastes conformes AA, thème clair et sombre.
   ===================================================================== */

:root {
  /* Palette sobre, dans l'esprit d'un document d'école : bleu ardoise,
     papier légèrement chaud, accents désaturés. */
  --bleu:        #2f4f6f;
  --bleu-fonce:  #22394f;
  --bleu-clair:  #e9eef4;
  --vert:        #3a6b4a;
  --vert-clair:  #e7efe9;
  --ambre:       #845d13;
  --ambre-clair: #f7f0e0;
  --rouge:       #96343a;
  --rouge-clair: #f6eaeb;

  --fond:        #f7f6f3;
  --surface:     #ffffff;
  --surface-2:   #f0eee9;
  --texte:       #23262a;
  --texte-doux:  #585d65;

  /* Deux bordures : l'une discrète pour séparer, l'autre assez contrastée
     pour délimiter un champ de formulaire (WCAG 1.4.11 demande 3:1). */
  --bordure:       #ddd8d0;
  --bordure-champ: #948b7e;

  --ombre: 0 1px 2px rgba(35, 38, 42, .06), 0 4px 12px rgba(35, 38, 42, .05);

  /* Couleur du texte posé sur un aplat coloré : elle s'inverse en thème
     sombre, où les aplats deviennent clairs. */
  --texte-sur-aplat: #ffffff;

  --rayon:       10px;
  --largeur:     56rem;
  --largeur-large: 76rem;

  color-scheme: light;
}

/* Thème sombre : choisi explicitement par le visiteur. Le thème clair reste
   celui par défaut, y compris quand le système est réglé en sombre. */
:root[data-theme="dark"] {
  --bleu:        #8fb4d4;
  --bleu-fonce:  #b4cde4;
  --bleu-clair:  #1d2935;
  --vert:        #84bb95;
  --vert-clair:  #1a2a20;
  --ambre:       #d8ab66;
  --ambre-clair: #2a2417;
  --rouge:       #e08c8c;
  --rouge-clair: #2e1c1e;

  --fond:        #191b1e;
  --surface:     #212428;
  --surface-2:   #2a2e33;
  --texte:       #e6e8ea;
  --texte-doux:  #a1a7af;

  --bordure:       #383d44;
  --bordure-champ: #697079;

  --ombre: 0 1px 2px rgba(0, 0, 0, .4);
  --texte-sur-aplat: #14171a;

  color-scheme: dark;
}

/* « Suivre le système » : proposé en troisième choix dans le sélecteur. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bleu:        #8fb4d4;
    --bleu-fonce:  #b4cde4;
    --bleu-clair:  #1d2935;
    --vert:        #84bb95;
    --vert-clair:  #1a2a20;
    --ambre:       #d8ab66;
    --ambre-clair: #2a2417;
    --rouge:       #e08c8c;
    --rouge-clair: #2e1c1e;

    --fond:        #191b1e;
    --surface:     #212428;
    --surface-2:   #2a2e33;
    --texte:       #e6e8ea;
    --texte-doux:  #a1a7af;

    --bordure:       #383d44;
    --bordure-champ: #697079;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
    --texte-sur-aplat: #14171a;

    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem); margin-top: 2rem; }
h3 { font-size: 1.125rem; margin-top: 1.5rem; }
p  { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: .35rem; }

a { color: var(--bleu); text-underline-offset: .18em; }
a:hover { color: var(--bleu-fonce); }

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 3px;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--texte);
  padding: .75rem 1rem; z-index: 100; border-radius: 0 0 var(--rayon) 0;
}
.lien-evitement:focus { left: 0; }

.bloc { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 1rem; }
.admin .bloc { max-width: var(--largeur-large); }

/* --- En-tête --------------------------------------------------------- */
.entete { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.entete__interieur {
  display: flex; align-items: center; gap: 1rem;
  padding-block: 1rem; flex-wrap: wrap;
}
.entete__logo { border-radius: 8px; flex: none; }
.entete__sur-titre {
  margin: 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600;
}
.entete__titre { margin: 0; font-size: 1.2rem; font-weight: 650; }
.entete__compte {
  margin-left: auto; display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; font-size: .9rem;
}
.entete--admin { border-bottom-color: var(--bleu); border-bottom-width: 3px; }

.nav { border-top: 1px solid var(--bordure); }
.nav__liste { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0 1rem; overflow-x: auto; }
.nav__liste li { margin: 0; }
.nav__liste a {
  display: block; padding: .7rem .9rem; text-decoration: none;
  color: var(--texte-doux); font-weight: 550; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav__liste a:hover { color: var(--texte); background: var(--surface-2); }
.nav__liste a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu); }


/* --- Sélecteur de thème ---------------------------------------------- */
.theme {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--texte-doux);
}
.theme select {
  width: auto; padding: .3rem 1.6rem .3rem .5rem;
  font-size: .85rem; border-radius: 6px;
  border: 1px solid var(--bordure-champ); background: var(--surface);
  color: var(--texte); cursor: pointer;
}
.theme[hidden] { display: none; }

/* --- Contenu --------------------------------------------------------- */
.contenu { flex: 1; padding-block: 2rem 3rem; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.carte > :last-child { margin-bottom: 0; }
.carte__titre { margin-top: 0; }

.encadre {
  border-left: 4px solid var(--bleu);
  background: var(--bleu-clair);
  padding: .9rem 1rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin-bottom: 1.25rem;
}
.encadre > :last-child { margin-bottom: 0; }
.encadre--attention { border-left-color: var(--ambre); background: var(--ambre-clair); }
.encadre--succes    { border-left-color: var(--vert);  background: var(--vert-clair); }

.discret { color: var(--texte-doux); font-size: .9rem; }
.centre { text-align: center; }
.enligne { display: inline; }

/* --- Messages -------------------------------------------------------- */
.messages { margin-bottom: 1.5rem; }
.message {
  padding: .85rem 1rem; border-radius: var(--rayon);
  border: 1px solid transparent; margin-bottom: .75rem; font-weight: 500;
}
.message--succes  { background: var(--vert-clair);  border-color: var(--vert);  color: var(--texte); }
.message--erreur  { background: var(--rouge-clair); border-color: var(--rouge); color: var(--texte); }
.message--info    { background: var(--bleu-clair);  border-color: var(--bleu);  color: var(--texte); }
.message--attention { background: var(--ambre-clair); border-color: var(--ambre); color: var(--texte); }

/* --- Formulaires ----------------------------------------------------- */
.champ { margin-bottom: 1.25rem; }
.champ > label, .champ__legende {
  display: block; font-weight: 600; margin-bottom: .35rem;
}
.champ__aide { display: block; color: var(--texte-doux); font-size: .875rem; margin-bottom: .4rem; }
.champ__erreur { display: block; color: var(--rouge); font-size: .875rem; margin-top: .35rem; font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], input[type="date"], input[type="number"],
select, textarea {
  width: 100%;
  padding: .65rem .75rem;
  font: inherit;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon);
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--bleu); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--rouge); }

fieldset { border: 1px solid var(--bordure-champ); border-radius: var(--rayon); padding: 1rem; margin: 0 0 1.25rem; }
legend { font-weight: 600; padding-inline: .35rem; }

.choix { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .25rem; cursor: pointer; }
.choix input { margin-top: .25rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--bleu); }
.choix:hover { background: var(--surface-2); border-radius: 6px; }

.compteur { font-size: .85rem; color: var(--texte-doux); text-align: right; margin-top: .25rem; }
.compteur--limite { color: var(--rouge); font-weight: 600; }

/* Piège à robots : invisible pour les humains, y compris les lecteurs d'écran. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bouton {
  display: inline-block; padding: .7rem 1.25rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  color: var(--texte-sur-aplat); background: var(--bleu);
  border: 1px solid transparent; border-radius: var(--rayon);
  cursor: pointer; text-decoration: none; text-align: center;
}
.bouton:hover { background: var(--bleu-fonce); color: var(--texte-sur-aplat); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }

/* Les variantes ne sont pas des aplats colorés : elles portent leur propre
   couleur de texte, dans les deux thèmes. */
.bouton--secondaire,
.bouton--secondaire:hover { color: var(--bleu); }
.bouton--secondaire { background: var(--surface); border-color: var(--bordure-champ); }
.bouton--secondaire:hover { background: var(--surface-2); border-color: var(--bleu); }

.bouton--discret {
  background: none; border-color: transparent;
  padding: .35rem .5rem; text-decoration: underline;
}
.bouton--discret, .bouton--discret:hover { color: var(--texte-doux); }
.bouton--discret:hover { background: var(--surface-2); color: var(--texte); }

.bouton--danger { background: var(--rouge); color: var(--texte-sur-aplat); }
.bouton--danger:hover { background: var(--rouge); filter: brightness(.85); color: var(--texte-sur-aplat); }
.boutons { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* --- Étiquettes de statut -------------------------------------------- */
.etiquette {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; letter-spacing: .01em;
  background: var(--surface-2); color: var(--texte-doux);
  border: 1px solid var(--bordure); vertical-align: middle;
}
.etiquette--role { margin-left: .4rem; }
.etiquette--ouvert   { background: var(--vert-clair);  color: var(--vert);  border-color: var(--vert); }
.etiquette--clos     { background: var(--surface-2);   color: var(--texte-doux); }
.etiquette--attente  { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre); }
.etiquette--publiee  { background: var(--bleu-clair);  color: var(--bleu);  border-color: var(--bleu); }
.etiquette--rejetee  { background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge); }
.etiquette--traitee  { background: var(--vert-clair);  color: var(--vert);  border-color: var(--vert); }

/* --- Listes de contributions ----------------------------------------- */
.contribution {
  background: var(--surface); border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu); border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.contribution__meta {
  display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap;
  font-size: .875rem; color: var(--texte-doux); margin-bottom: .5rem;
}
.contribution__auteur { font-weight: 650; color: var(--texte); }
.contribution__texte > :last-child { margin-bottom: 0; }
.contribution__reponse {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--bordure);
  background: var(--vert-clair); margin-inline: -1.1rem; margin-bottom: -1rem;
  padding: .9rem 1.1rem; border-radius: 0 0 var(--rayon) 0;
}
.contribution__reponse strong { color: var(--vert); }

/* --- Tableaux -------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; margin-bottom: 1.25rem; }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: .95rem; }
caption { text-align: left; color: var(--texte-doux); font-size: .9rem; padding-bottom: .5rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { font-weight: 650; background: var(--surface-2); white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }

/* --- Grille de statistiques ------------------------------------------ */
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 1.5rem; }
.stat { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem; }
.stat__valeur { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--bleu); }
.stat__libelle { color: var(--texte-doux); font-size: .9rem; }

/* --- Barres de résultats --------------------------------------------- */
.resultat { margin-bottom: .9rem; }
.resultat__ligne { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.resultat__barre { background: var(--surface-2); border-radius: 999px; height: .75rem; overflow: hidden; }
.resultat__part { background: var(--bleu); height: 100%; border-radius: 999px; }

/* --- Pied ------------------------------------------------------------ */
.pied { background: var(--surface); border-top: 1px solid var(--bordure); padding-block: 1.5rem; margin-top: auto; }
.pied__liens { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pied__mention { color: var(--texte-doux); font-size: .875rem; margin: 0; }


/* --- Classes utilitaires -------------------------------------------- */
/* La politique de sécurité de contenu interdit les attributs style=""   */
/* inline : tout passe donc par des classes.                             */
.sans-marge-haut { margin-top: 0; }
.marge-haut      { margin-top: 1rem; }
.marge-haut-l    { margin-top: 1.5rem; }
.marge-bas       { margin-bottom: 1rem; }
.marge-bas-p     { margin-bottom: .75rem; }
.colonne-etroite { max-width: 26rem; margin-inline: auto; }
.colonne-moyenne { max-width: 32rem; }
.colonne-large   { max-width: 34rem; }
.champ-court     { max-width: 8rem; }

.mot-de-passe {
  font-size: 1.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lien-brut {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  word-break: break-all;
}
.ligne-reponse {
  margin: .75rem 0 0;
  border-top: 1px dashed var(--bordure);
  padding-top: .75rem;
}

/* Largeur des barres de résultat : une classe par pourcentage entier,
   faute de pouvoir écrire un style inline sous cette politique. */
.resultat__part.p0 { width: 0%; }
.resultat__part.p1 { width: 1%; }
.resultat__part.p2 { width: 2%; }
.resultat__part.p3 { width: 3%; }
.resultat__part.p4 { width: 4%; }
.resultat__part.p5 { width: 5%; }
.resultat__part.p6 { width: 6%; }
.resultat__part.p7 { width: 7%; }
.resultat__part.p8 { width: 8%; }
.resultat__part.p9 { width: 9%; }
.resultat__part.p10 { width: 10%; }
.resultat__part.p11 { width: 11%; }
.resultat__part.p12 { width: 12%; }
.resultat__part.p13 { width: 13%; }
.resultat__part.p14 { width: 14%; }
.resultat__part.p15 { width: 15%; }
.resultat__part.p16 { width: 16%; }
.resultat__part.p17 { width: 17%; }
.resultat__part.p18 { width: 18%; }
.resultat__part.p19 { width: 19%; }
.resultat__part.p20 { width: 20%; }
.resultat__part.p21 { width: 21%; }
.resultat__part.p22 { width: 22%; }
.resultat__part.p23 { width: 23%; }
.resultat__part.p24 { width: 24%; }
.resultat__part.p25 { width: 25%; }
.resultat__part.p26 { width: 26%; }
.resultat__part.p27 { width: 27%; }
.resultat__part.p28 { width: 28%; }
.resultat__part.p29 { width: 29%; }
.resultat__part.p30 { width: 30%; }
.resultat__part.p31 { width: 31%; }
.resultat__part.p32 { width: 32%; }
.resultat__part.p33 { width: 33%; }
.resultat__part.p34 { width: 34%; }
.resultat__part.p35 { width: 35%; }
.resultat__part.p36 { width: 36%; }
.resultat__part.p37 { width: 37%; }
.resultat__part.p38 { width: 38%; }
.resultat__part.p39 { width: 39%; }
.resultat__part.p40 { width: 40%; }
.resultat__part.p41 { width: 41%; }
.resultat__part.p42 { width: 42%; }
.resultat__part.p43 { width: 43%; }
.resultat__part.p44 { width: 44%; }
.resultat__part.p45 { width: 45%; }
.resultat__part.p46 { width: 46%; }
.resultat__part.p47 { width: 47%; }
.resultat__part.p48 { width: 48%; }
.resultat__part.p49 { width: 49%; }
.resultat__part.p50 { width: 50%; }
.resultat__part.p51 { width: 51%; }
.resultat__part.p52 { width: 52%; }
.resultat__part.p53 { width: 53%; }
.resultat__part.p54 { width: 54%; }
.resultat__part.p55 { width: 55%; }
.resultat__part.p56 { width: 56%; }
.resultat__part.p57 { width: 57%; }
.resultat__part.p58 { width: 58%; }
.resultat__part.p59 { width: 59%; }
.resultat__part.p60 { width: 60%; }
.resultat__part.p61 { width: 61%; }
.resultat__part.p62 { width: 62%; }
.resultat__part.p63 { width: 63%; }
.resultat__part.p64 { width: 64%; }
.resultat__part.p65 { width: 65%; }
.resultat__part.p66 { width: 66%; }
.resultat__part.p67 { width: 67%; }
.resultat__part.p68 { width: 68%; }
.resultat__part.p69 { width: 69%; }
.resultat__part.p70 { width: 70%; }
.resultat__part.p71 { width: 71%; }
.resultat__part.p72 { width: 72%; }
.resultat__part.p73 { width: 73%; }
.resultat__part.p74 { width: 74%; }
.resultat__part.p75 { width: 75%; }
.resultat__part.p76 { width: 76%; }
.resultat__part.p77 { width: 77%; }
.resultat__part.p78 { width: 78%; }
.resultat__part.p79 { width: 79%; }
.resultat__part.p80 { width: 80%; }
.resultat__part.p81 { width: 81%; }
.resultat__part.p82 { width: 82%; }
.resultat__part.p83 { width: 83%; }
.resultat__part.p84 { width: 84%; }
.resultat__part.p85 { width: 85%; }
.resultat__part.p86 { width: 86%; }
.resultat__part.p87 { width: 87%; }
.resultat__part.p88 { width: 88%; }
.resultat__part.p89 { width: 89%; }
.resultat__part.p90 { width: 90%; }
.resultat__part.p91 { width: 91%; }
.resultat__part.p92 { width: 92%; }
.resultat__part.p93 { width: 93%; }
.resultat__part.p94 { width: 94%; }
.resultat__part.p95 { width: 95%; }
.resultat__part.p96 { width: 96%; }
.resultat__part.p97 { width: 97%; }
.resultat__part.p98 { width: 98%; }
.resultat__part.p99 { width: 99%; }
.resultat__part.p100 { width: 100%; }


/* --- Diffusion de l'accès (lien + QR code) ---------------------------- */
.acces-diffusion {
  display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start;
}
.acces-diffusion > div { flex: 1 1 18rem; min-width: 0; }
.acces-qr {
  flex: none; width: 200px; height: 200px;
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: .5rem;
}

/* --- Affiche à imprimer ----------------------------------------------- */
.affiche {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 3rem 2rem; text-align: center;
  max-width: 46rem; margin-inline: auto;
}
.affiche__sur-titre {
  margin: 0; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600;
}
.affiche__titre { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); margin: .4rem 0 1.5rem; }
.affiche__accroche { font-size: 1.15rem; line-height: 1.5; margin-bottom: 2rem; }
.affiche__qr { margin: 0 auto 1.25rem; max-width: 15rem; }
.affiche__qr svg { width: 100%; height: auto; display: block; }
.affiche__consigne { font-weight: 600; margin-bottom: 1.5rem; }
.affiche__lien {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; word-break: break-all; color: var(--texte-doux);
  margin-bottom: 2rem;
}
.affiche__pied { color: var(--texte-doux); font-size: .95rem; margin: 0; }

@media print {
  .sans-impression { display: none !important; }
  .affiche { border: none; padding: 0; }
  .affiche__qr { max-width: 11cm; }
}

@media print {
  .nav, .pied, .lien-evitement, .boutons, .entete__compte { display: none !important; }
  body { background: #fff; }
  .carte, .contribution { break-inside: avoid; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}