/* Feuille unique de garabit.io — page d'accueil, confidentialité, et les
   pages rendues par l'application après un envoi du formulaire.

   Elle est servie depuis la machine, comme le reste : aucune police
   téléchargée, aucun CDN, aucune requête vers un tiers. Le lecteur type est
   un secrétaire général de mairie, souvent sur un téléphone, parfois sur une
   connexion de mairie qui n'a rien d'une fibre.

   Les couleurs reprennent celles du démonstrateur et sont tenues très
   au-dessus du rapport 4,5:1 exigé par le RGAA. Le rapport est indiqué en
   regard de chacune, et surtout : `test_site.py` le recalcule sur chaque
   paire réellement employée. Un commentaire se périme en silence, un test
   non — l'accessibilité est un critère d'achat public, et la rattraper
   coûte cher. */

:root {
  --encre: #1a1a1a;          /* 17,4:1 sur blanc */
  --encre-attenuee: #454545; /* 9,6:1 sur blanc  */
  --papier: #ffffff;
  --papier-gris: #f4f4f2;
  --trait: #c9c9c4;
  --trait-fort: #6b6b66;
  --officiel: #14385c;       /* 12,0:1 sur blanc */
  --alerte-fond: #fdf3d7;
  --alerte-trait: #8a6100;
  --erreur: #a01818;         /* 8,0:1 sur blanc  */
  --erreur-fond: #fdeded;
  --succes: #1c5230;         /* 9,1:1 sur blanc  */
  --succes-fond: #edf6f0;
}

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

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

body {
  margin: 0 auto;
  max-width: 46rem;
  padding: 1rem 1.15rem 4rem;
  background: var(--papier);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* --- Repères de navigation ------------------------------------------- */

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--officiel);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10;
}
.evitement:focus { left: 0; }

a { color: var(--officiel); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--officiel);
  outline-offset: 2px;
}
/* Repli pour les navigateurs sans :focus-visible. */
a:focus, button:focus, input:focus, select:focus {
  outline: 3px solid var(--officiel);
  outline-offset: 2px;
}

/* --- En-tête ---------------------------------------------------------- */

.entete {
  border-bottom: 2px solid var(--encre);
  padding: 1.5rem 0 1.25rem;
  margin-bottom: 2rem;
}

.entete__marque {
  display: block;
  width: auto;
  max-width: 15rem;
  height: auto;
}

/* --- Titres ----------------------------------------------------------- */

h1, h2, h3 { line-height: 1.25; }

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
}

h2 {
  font-size: 1.25rem;
  margin: 2.75rem 0 0.85rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--trait);
}

h3 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

/* --- Le cas travaillé, en tête de page -------------------------------- */

/* L'exemple d'ouverture n'est pas un paragraphe : c'est une fiche, avec les
   deux seuils côte à côte. Un lecteur qui passe des marchés doit pouvoir
   vérifier en trois secondes s'il le savait. */

.cas {
  border: 2px solid var(--encre);
  margin: 0 0 2rem;
}

.cas__situation {
  background: var(--papier-gris);
  border-bottom: 1px solid var(--trait);
  padding: 0.9rem 1.1rem;
  margin: 0;
  font-size: 0.95rem;
}

.cas__situation dl {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.cas__situation div { display: flex; gap: 0.4rem; }

.cas__situation dt {
  color: var(--encre-attenuee);
  margin: 0;
}

.cas__situation dd {
  margin: 0;
  font-weight: 600;
}

.cas__volets {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cas__volet {
  padding: 1.1rem;
}

/* Le trait qui sépare les deux volets — c'est lui qui porte le propos :
   deux régimes distincts, sur la même opération. */
.cas__volet + .cas__volet {
  border-left: 1px solid var(--trait);
}

.cas__objet {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--encre-attenuee);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cas__verdict {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.cas__verdict--dispense { color: var(--succes); }
.cas__verdict--obligation { color: var(--erreur); }

.cas__detail {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.cas__source {
  margin: 0;
  font-size: 0.875rem;
  color: var(--encre-attenuee);
}

.cas__lecture {
  border-top: 1px solid var(--trait);
  background: var(--papier-gris);
  padding: 0.9rem 1.1rem;
  margin: 0;
  font-size: 0.95rem;
}

.cas__lecture p:last-child { margin-bottom: 0; }

@media (max-width: 34rem) {
  .cas__volets { grid-template-columns: 1fr; }
  .cas__volet + .cas__volet {
    border-left: 0;
    border-top: 1px solid var(--trait);
  }
}

/* --- Avertissement ---------------------------------------------------- */

/* Même traitement que sur le démonstrateur : ni repliable, ni masquable, ni
   écrit plus petit. C'est ce qui distingue un instrument d'une opinion. */

.avertissement {
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-trait);
  border-left: 5px solid var(--alerte-trait);
  padding: 1rem 1.15rem;
  margin: 2rem 0;
}

.avertissement h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  border-bottom: 0;
  padding-bottom: 0;
}

.avertissement p:last-child { margin-bottom: 0; }

/* --- Lien vers le démonstrateur --------------------------------------- */

.demonstrateur {
  border: 1px solid var(--trait-fort);
  padding: 1.15rem;
  margin: 2rem 0;
}

.demonstrateur p:last-child { margin-bottom: 0; }

.demonstrateur__lien {
  font-size: 1.1rem;
  font-weight: 600;
}

.demonstrateur__reserve {
  font-size: 0.925rem;
  color: var(--encre-attenuee);
}

/* --- Formulaire ------------------------------------------------------- */

.formulaire {
  margin: 1.5rem 0 0;
}

.champ { margin: 0 0 1.4rem; }

.champ > label,
.champ legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.champ__facultatif {
  font-weight: 400;
  color: var(--encre-attenuee);
}

input[type="email"],
input[type="text"],
select {
  width: 100%;
  max-width: 26rem;
  font: inherit;
  color: var(--encre);
  background: var(--papier);
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
}

input[aria-invalid="true"] {
  border-color: var(--erreur);
  border-width: 2px;
}

.aide {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--encre-attenuee);
}

.champ__erreur {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--erreur);
}

/* Le consentement : case à cocher, décochée, non pré-remplie, et son objet
   énoncé à côté d'elle — pas renvoyé à une page que personne n'ouvre. */
.consentement {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1px solid var(--trait);
  background: var(--papier-gris);
  padding: 0.9rem 1rem;
  margin: 0 0 1.4rem;
}

.consentement input[type="checkbox"] {
  margin: 0.3rem 0 0;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.consentement label {
  margin: 0;
  font-size: 0.95rem;
}

/* Le pot de miel : un champ qu'aucun humain ne voit et qu'un robot remplit.
   Il est retiré du flux ET de l'ordre de tabulation ET des lecteurs d'écran,
   sinon il piège les lecteurs d'écran au lieu des robots. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[type="submit"] {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--officiel);
  border: 2px solid var(--officiel);
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #0e2740;
  border-color: #0e2740;
}

/* --- Messages --------------------------------------------------------- */

.message {
  border: 1px solid var(--trait-fort);
  border-left: 5px solid var(--trait-fort);
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
}

.message p:last-child { margin-bottom: 0; }

.message--succes {
  background: var(--succes-fond);
  border-color: var(--succes);
}

.message--erreur {
  background: var(--erreur-fond);
  border-color: var(--erreur);
}

.message h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  border-bottom: 0;
  padding-bottom: 0;
}

/* --- Tableau (page de confidentialité) -------------------------------- */

.donnees {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.975rem;
}

.donnees th, .donnees td {
  border: 1px solid var(--trait);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.donnees th {
  background: var(--papier-gris);
  font-weight: 600;
}

/* --- Pied de page ----------------------------------------------------- */

.pied {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  font-size: 0.925rem;
  color: var(--encre-attenuee);
}

.pied p { margin: 0 0 0.5rem; }
.pied p:last-child { margin-bottom: 0; }

/* Titre nécessaire à la structure du document mais redondant à l'écran :
   masqué visuellement, lu par les lecteurs d'écran. À ne pas confondre avec
   `.evitement`, qui se révèle au focus parce qu'on le suit. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}