/* Recueil de besoins, team building « Engagement individuel, réussite collective »
   Direction graphique : terres chaudes du Burkina et indigo du tissage,
   typographie humaniste, tracés dessinés au trait. */

:root {
  --papier: #f6efe3;
  --surface: #fffbf5;
  --surface-douce: #fbf4e9;
  --encre: #2a241f;
  --encre-douce: #6d6055;
  --trait: #e5d8c4;
  --trait-fort: #ccb89c;
  --indigo: #27486a;
  --indigo-clair: #3d6e97;
  --indigo-voile: #e5ecf2;
  --titre: #27486a;
  --ocre: #c2862c;
  --ocre-voile: #f7ead0;
  --brique: #ab4a33;
  --brique-voile: #f6e3dc;
  --vert: #55764a;
  --trait-illustration: #cbb79a;
  --ombre: 0 1px 1px rgba(70, 48, 26, .04), 0 10px 26px rgba(70, 48, 26, .07);
  --rayon: 10px;
  --colonne: 45rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #17120e;
    --surface: #211a15;
    --surface-douce: #271f18;
    --encre: #f2e8da;
    --encre-douce: #b2a392;
    --trait: #3a2f26;
    --trait-fort: #55463a;
    --indigo: #16324a;
    --indigo-clair: #7cacd4;
    --indigo-voile: #17293a;
    --titre: #f0dcb4;
    --ocre: #dfa749;
    --ocre-voile: #322613;
    --brique: #d9765a;
    --brique-voile: #332018;
    --vert: #8fb183;
    --trait-illustration: #5b4a3a;
    --ombre: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --papier: #17120e;
  --surface: #211a15;
  --surface-douce: #271f18;
  --encre: #f2e8da;
  --encre-douce: #b2a392;
  --trait: #3a2f26;
  --trait-fort: #55463a;
  --indigo: #16324a;
  --indigo-clair: #7cacd4;
  --indigo-voile: #17293a;
  --titre: #f0dcb4;
  --ocre: #dfa749;
  --ocre-voile: #322613;
  --brique: #d9765a;
  --brique-voile: #332018;
  --vert: #8fb183;
  --trait-illustration: #5b4a3a;
  --ombre: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Alegreya Sans", "Segoe UI", Tahoma, sans-serif;
  font-size: 17.5px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: Alegreya, Georgia, "Times New Roman", serif;
  font-weight: 700;
  text-wrap: balance;
}

a { color: var(--brique); }

:focus-visible {
  outline: 2px solid var(--brique);
  outline-offset: 2px;
}

.icone { vertical-align: -.18em; flex: none; }

/* Bande tissée, clin d'oeil au faso dan fani */

.tissage {
  height: 9px;
  background-color: var(--ocre);
  background-image:
    repeating-linear-gradient(90deg, var(--brique) 0 3px, transparent 3px 16px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--indigo) 8px 11px, transparent 11px 22px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
}

/* ------------------------------------------------------------------ */
/* Bandeau                                                             */
/* ------------------------------------------------------------------ */

.bandeau {
  background: var(--indigo);
  color: #fdf6ea;
  padding: 1.7rem 1.25rem 1.5rem;
}

.bandeau-inner {
  max-width: var(--colonne);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.bandeau-texte {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1 1 auto;
  min-width: 0;
}

.surtitre {
  font-family: "Alegreya Sans", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ocre);
  margin: 0;
}

.bandeau h1 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.15;
  color: #fffaf0;
}

.bandeau .theme {
  margin: 0;
  font-size: .97rem;
  color: #dfd0b8;
  font-style: italic;
}

.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}

.repere {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  padding: .2rem .6rem;
  border: 1px solid rgba(253, 246, 234, .32);
  border-radius: 999px;
  color: #efe2cc;
}

.bandeau .illustration { flex: none; opacity: .95; }

@media (max-width: 40rem) {
  .bandeau .illustration { display: none; }
  .bandeau h1 { font-size: 1.45rem; }
}

/* ------------------------------------------------------------------ */
/* Progression                                                         */
/* ------------------------------------------------------------------ */

.progression {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 5px;
  background: var(--trait);
}

.progression span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ocre);
  transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progression span { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Corps                                                               */
/* ------------------------------------------------------------------ */

main {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 1.6rem 1.25rem 4rem;
}

.chapeau {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1rem 1.15rem 1rem 3.2rem;
  margin-bottom: 1.8rem;
  color: var(--encre-douce);
  font-size: .98rem;
  box-shadow: var(--ombre);
}

.chapeau .icone {
  position: absolute;
  left: 1.05rem;
  top: 1.05rem;
  color: var(--brique);
}

.chapeau strong { color: var(--encre); }

.alerte {
  background: var(--brique-voile);
  border: 1px solid var(--brique);
  border-radius: var(--rayon);
  padding: .8rem 1rem;
  margin-bottom: 1.5rem;
  color: var(--brique);
  font-size: .94rem;
}

/* Sections */

.section { margin-bottom: 2rem; }

.section-titre {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .7rem 1.1rem;
  background: var(--ocre-voile);
  color: var(--titre);
  border: 1px solid var(--trait);
  border-bottom: none;
  border-radius: var(--rayon) var(--rayon) 0 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.section-titre .icone { color: var(--brique); }

.section-titre .numero {
  font-family: "Alegreya Sans", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ocre);
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  padding: .05rem .45rem;
}

.section-corps {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-top: none;
  border-radius: 0 0 var(--rayon) var(--rayon);
  box-shadow: var(--ombre);
}

.question {
  padding: 1.2rem 1.15rem;
  border-top: 1px solid var(--trait);
}

.section-corps > .question:first-child { border-top: none; }

.question .intitule {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 .2rem;
}

.obligatoire {
  color: var(--brique);
  font-weight: 700;
  white-space: nowrap;
}

.aide {
  display: block;
  color: var(--encre-douce);
  font-size: .88rem;
  font-style: italic;
  margin-bottom: .7rem;
}

.erreur {
  display: block;
  color: var(--brique);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.question.en-erreur { background: var(--brique-voile); }

/* Champs libres */

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  font: inherit;
  color: var(--encre);
  background: var(--surface-douce);
  border: 1px solid var(--trait-fort);
  border-radius: 7px;
  padding: .55rem .7rem;
}

textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.5;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--brique);
  background: var(--surface);
}

/* Listes de choix */

.choix-liste {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .55rem;
}

.choix {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .58rem .75rem;
  border: 1px solid var(--trait);
  border-radius: 7px;
  background: var(--surface-douce);
  cursor: pointer;
  font-size: 1rem;
}

.choix:hover { border-color: var(--trait-fort); }

.choix input {
  margin: .3rem 0 0;
  accent-color: var(--brique);
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.choix:has(input:checked) {
  border-color: var(--brique);
  background: var(--brique-voile);
}

.choix:has(input:disabled) { opacity: .45; cursor: not-allowed; }

.compteur {
  font-size: .84rem;
  color: var(--encre-douce);
  margin-top: .5rem;
}

.compteur.plein { color: var(--brique); font-weight: 600; }

.autre-champ { margin-top: .45rem; }

/* Matrice de notation */

.matrice {
  margin-top: .7rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.ancres {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  font-style: italic;
  color: var(--encre-douce);
  margin-bottom: .25rem;
}

.ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .5rem .75rem;
  border: 1px solid var(--trait);
  border-radius: 7px;
  background: var(--surface-douce);
}

.ligne-intitule { font-size: .98rem; }

.notes { display: flex; gap: .3rem; }

.note {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--trait-fort);
  border-radius: 50%;
  cursor: pointer;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  color: var(--encre-douce);
  background: var(--surface);
}

.note input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.note:has(input:checked) {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff9ef;
  font-weight: 700;
}

.note:has(input:focus-visible) {
  outline: 2px solid var(--brique);
  outline-offset: 2px;
}

@media (max-width: 34rem) {
  .ligne { grid-template-columns: 1fr; gap: .45rem; }
  .notes { justify-content: space-between; }
  .note { width: 2.7rem; height: 2.7rem; }
}

/* Envoi */

.envoi {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

button.principal,
a.principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff9ef;
  background: var(--brique);
  border: none;
  border-radius: var(--rayon);
  padding: .85rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
}

button.principal:hover,
a.principal:hover { background: var(--indigo); }

.mention {
  font-size: .86rem;
  color: var(--encre-douce);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Accueil et confirmation                                             */
/* ------------------------------------------------------------------ */

.cartes {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.carte {
  display: flex;
  align-items: flex-start;
  gap: .95rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.05rem 1.15rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ombre);
}

.carte:hover { border-color: var(--brique); }

.carte .rond {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ocre-voile);
  color: var(--brique);
}

.carte h2 {
  margin: 0 0 .2rem;
  font-size: 1.2rem;
  color: var(--titre);
}

.carte p { margin: 0; color: var(--encre-douce); font-size: .95rem; }

.carte .repere {
  border-color: var(--trait-fort);
  color: var(--encre-douce);
  margin-top: .45rem;
}

.confirmation {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.8rem 1.4rem;
  box-shadow: var(--ombre);
  text-align: center;
}

.confirmation h2 { margin: .6rem 0 .4rem; font-size: 1.5rem; color: var(--titre); }

.confirmation p { color: var(--encre-douce); }

.confirmation .illustration { margin: 0 auto; }

/* ------------------------------------------------------------------ */
/* Dépouillement                                                       */
/* ------------------------------------------------------------------ */

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.tableau th,
.tableau td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}

.tableau th {
  font-family: "Alegreya Sans", sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.tableau td.nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.defilant { overflow-x: auto; }

.barre {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--ocre);
  min-width: 2px;
}

.verbatim {
  border-left: 3px solid var(--ocre);
  padding: .3rem 0 .3rem .85rem;
  margin: 0 0 .8rem;
  font-size: .98rem;
}

.verbatim span {
  display: block;
  color: var(--encre-douce);
  font-size: .8rem;
  font-style: italic;
  margin-top: .2rem;
}

.outils {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

.outil {
  font-size: .9rem;
  padding: .35rem .8rem;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  text-decoration: none;
}

.outil:hover { border-color: var(--brique); color: var(--brique); }

.outil.actif {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff9ef;
}

.moyenne { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--titre); }

.connexion {
  max-width: 23rem;
  margin: 3rem auto;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.5rem;
  box-shadow: var(--ombre);
  text-align: center;
}

.connexion label {
  display: block;
  font-weight: 600;
  margin: .8rem 0 .4rem;
  text-align: left;
}

.connexion button { margin-top: .9rem; width: 100%; }

/* ------------------------------------------------------------------ */
/* Impression                                                          */
/* ------------------------------------------------------------------ */

@media print {
  body { background: #fff; font-size: 11pt; }
  .progression, .envoi, .outils, .tissage { display: none; }
  .section-corps, .carte, .chapeau { box-shadow: none; }
  .section, .question { break-inside: avoid; }
}