/* Feuille unique, partagée par les pages de référencement et l'app.
 *
 * Trois règles tenues partout :
 *
 * 1. Rien n'est appelé à l'extérieur. La police est hébergée ici ; une
 *    requête vers Google Fonts dirait à Google qui consulte le site.
 * 2. Pas de gras, un seul jeu de styles. Les niveaux se lisent à la taille,
 *    à la teinte et à l'espace — jamais à la graisse.
 * 3. L'encadré n'apparaît qu'au survol ou à la sélection. Au repos, il ne
 *    reste que du texte : on révise, on ne regarde pas une interface.
 *
 * Aucun bleu : la couleur ne sert qu'à dire juste ou faux.
 */

/* ---------------------------------------------------------- police ----- */
/* Inter, dessinée pour les interfaces : très neutre, zéro ovale classique,
   excellente lisibilité aux petites tailles. Deux graisses seulement, 400
   et 500 — et 500 n'est pas du gras, juste un cran au-dessus. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------- palette ---- */

:root {
  --fond: #fdfdfc;
  --fond2: #f1f1ef;
  --texte: #1c1c18;
  --texte2: #75746c;
  --bord: #e4e4df;
  --juste: #1d7a43;
  --faux: #ab2318;
  --rayon: 8px;
  --mesure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #151513;
    --fond2: #212120;
    --texte: #eceae4;
    --texte2: #96958d;
    --bord: #2f2f2c;
    --juste: #5cc47f;
    --faux: #e8837a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: var(--mesure);
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* Un seul jeu de niveaux : un titre, un intertitre discret, du texte. */
h1 { font-size: 1.4rem; font-weight: 500; line-height: 1.35; margin: 0 0 .75rem; }
h2 { font-size: 1rem; font-weight: 400; color: var(--texte2); margin: 2rem 0 .5rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 500; }

a { color: var(--texte); text-decoration-color: var(--bord); }
a:hover { text-decoration-color: var(--texte2); }

.chapo, .discret { color: var(--texte2); }
.discret { font-size: .9rem; }

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

/* ---------------------------------------------------------- bandeau ---- */

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--bord);
}

.marque { text-decoration: none; }
.fil { font-size: .9rem; color: var(--texte2); margin-bottom: .75rem; }
.fil a { color: var(--texte2); }
.outils { display: flex; gap: 1.25rem; }

/* ---------------------------------------------------------- boutons ---- */
/* Pas de contour noir : un fond gris très clair suffit à désigner une
   action. Le contraste vient de la position, pas de l'épaisseur. */

.bouton {
  display: inline-block;
  padding: .55rem 1.2rem;
  border: 0;
  border-radius: var(--rayon);
  background: var(--fond2);
  color: var(--texte);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover { background: var(--bord); }
.bouton.gros { padding: .7rem 1.5rem; }
.bouton[disabled] { color: var(--texte2); cursor: not-allowed; }
.bouton[disabled]:hover { background: var(--fond2); }
.bouton.danger { color: var(--faux); }

.lien {
  background: none;
  border: 0;
  padding: .3rem 0;
  font: inherit;
  color: var(--texte2);
  text-decoration: underline;
  text-decoration-color: var(--bord);
  cursor: pointer;
}

.lien:hover { color: var(--texte); }
.attente { color: var(--texte2); padding: 2rem 0; }

/* ----------------------------------------------------------- listes ---- */

.sommaire { list-style: none; padding: 0; margin: 0; }

.sommaire a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem;
  text-decoration: none;
  border-radius: var(--rayon);
}

.sommaire a:hover { background: var(--fond2); }

.cartes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.cartes a { display: block; padding: .8rem; border-radius: var(--rayon); text-decoration: none; }
.cartes a:hover { background: var(--fond2); }
.cartes strong { display: block; color: var(--texte2); font-size: .85rem; font-weight: 400; }

/* ============================== Entraînement ========================== */

.cases { display: grid; gap: 0; margin-bottom: .5rem; }

.case {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .5rem .6rem;
  border-radius: var(--rayon);
  cursor: pointer;
}

.case:hover,
.case:focus-within,
.case:has(:checked) { background: var(--fond2); }

.case input { margin-top: .4rem; flex: none; accent-color: var(--texte2); }
.case.fine { font-size: .95rem; padding: .35rem .6rem; align-items: center; }

/* Le compte de questions se range au bout de la même ligne que le titre du
   sous-module, plutôt qu'à la suite du texte où il repoussait le retour. */
.case .etiquette { flex: 1; min-width: 0; }
.case em { flex: none; color: var(--texte2); font-style: normal; font-size: .85em; }

.separe { margin-top: 1.5rem; }

.pilules { display: flex; flex-wrap: wrap; gap: .3rem; }

.pilule {
  padding: .4rem 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texte2);
  font: inherit;
  cursor: pointer;
}

.pilule:hover { background: var(--fond2); color: var(--texte); }
.pilule.active { background: var(--fond2); color: var(--texte); }

.repli { border-bottom: 1px solid var(--bord); }
.repli > summary { padding: .55rem .4rem; cursor: pointer; font-size: .95rem; color: var(--texte2); }
.repli > summary:hover { color: var(--texte); }
.repli > summary em { font-style: normal; color: var(--texte); }
.repli .cases { padding: .2rem 0 .6rem; }

/* Barre de lancement ancrée en bas, alignée sur la colonne du formulaire :
   sinon, sur grand écran, le bouton part se perdre dans le coin droit. */

.barre-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--fond);
  border-top: 1px solid var(--bord);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
}

.barre-action .dedans {
  max-width: var(--mesure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.barre-action .bouton { white-space: nowrap; }
body.app main { padding-bottom: 6rem; }

/* Sur grand écran, l'ancrage en bas de fenêtre expédie le bouton dans un
   coin loin du formulaire. La barre reprend alors sa place dans le flux,
   juste sous les réglages, à gauche comme le reste de la colonne.
   Sur mobile elle reste fixe : c'est là qu'elle rend service. */
@media (min-width: 40rem) {
  .barre-action {
    position: static;
    border-top: 0;
    padding: 0;
    margin-top: 2rem;
  }
  .barre-action .dedans { justify-content: flex-start; gap: 1.5rem; }
  .barre-action .dedans .discret { order: 2; }
  body.app main { padding-bottom: 4rem; }
}

/* ---------------------------------------------------------- question --- */

.progres { height: 2px; background: var(--bord); margin-bottom: .5rem; }
.progres span { display: block; height: 100%; background: var(--texte2); transition: width .25s; }

/* Flèches de part et d'autre du compteur : on change souvent d'avis en cours
   de série, revenir sur une question déjà vue ne doit rien coûter. */
.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
}

.fleche {
  border: 0;
  background: none;
  color: var(--texte2);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  padding: .3rem .5rem;
  border-radius: var(--rayon);
  cursor: pointer;
}

.fleche:hover:not([disabled]) { background: var(--fond2); color: var(--texte); }
.fleche[disabled] { opacity: .25; cursor: default; }

.compteur { font-size: .85rem; color: var(--texte2); margin: 0; text-align: center; }
.appel { margin-top: 1.5rem; }
.enonce { font-size: 1.3rem; line-height: 1.45; margin-bottom: 1rem; }
.illustration { max-width: 100%; height: auto; border-radius: var(--rayon); }

.options { display: grid; gap: .1rem; margin: 0 0 1.5rem; }

.option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem;
  border-radius: var(--rayon);
  cursor: pointer;
}

.option:hover,
.option:focus-within,
.option:has(:checked) { background: var(--fond2); }

.option input { margin-top: .45rem; flex: none; accent-color: var(--texte2); }

/* Correction : aucun encadré. Le pictogramme dit juste ou faux, un fond
   discret rappelle ce que l'utilisateur avait coché. */
.option.resultat { cursor: default; }
.option.resultat:hover { background: none; }
.option.resultat.choisie { background: var(--fond2); }

.marque-rep { flex: none; line-height: 1.6; }
.libelle { margin: 0 0 .2rem; }
.justif { margin: 0; font-size: .95rem; color: var(--texte2); }

.verdict { margin: 1rem 0 .25rem; font-size: 1.1rem; }
.verdict.ok { color: var(--juste); }
.verdict.ko { color: var(--faux); }

.recap { padding-top: .9rem; border-top: 1px solid var(--bord); color: var(--texte2); }
.recap p { margin: 0; }

.avertissement {
  margin-top: 1rem;
  padding-left: .8rem;
  border-left: 2px solid var(--bord);
  font-size: .95rem;
  color: var(--texte2);
}

.ma-correction { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--bord); }
.ma-correction h2 { margin-top: 0; }

.actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ------------------------------------------------------ signalement ---- */

.signalement { margin-top: 1.5rem; display: grid; gap: .75rem; }
.signalement h2 { margin: 0; }
.signalement label { display: grid; gap: .25rem; font-size: .9rem; color: var(--texte2); }
.signalement button { justify-self: start; }
.merci { margin-top: 1.5rem; color: var(--juste); }

input[type=text], textarea, select {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
}

textarea { resize: vertical; }

/* -------------------------------------------------- bilan et stats ----- */

.score-gros { font-size: 3rem; font-weight: 500; line-height: 1; margin: 1rem 0 .5rem; }
.score-gros span { font-size: 1.2rem; color: var(--texte2); }

.rouge { color: var(--faux); }
.orange { color: #9a6300; }
.vert { color: var(--juste); }

@media (prefers-color-scheme: dark) { .orange { color: #d9a441; } }

.cle {
  font-size: 1.3rem;
  padding: .6rem .9rem;
  background: var(--fond2);
  border-radius: var(--rayon);
  display: inline-block;
  user-select: all;
}

.encart-cv { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bord); }
.encart-cv h2 { margin-top: 0; }

/* ------------------------------------------------------------- pied ---- */

.pied {
  border-top: 1px solid var(--bord);
  padding: 1.5rem 1rem 3rem;
  color: var(--texte2);
  font-size: .9rem;
}

.pied > * { max-width: var(--mesure); margin-inline: auto; }