/* Pactem — surface cabinets. CSS écrit à la main.
   Autorité : SOCLE/DIRECTIVES_VISUELLES.md (6 septembre 2026).
   - Une police, Geist, servie depuis le domaine (§1).
   - Deux couleurs et des gris ; aucune couleur d'accent (§2).
   - La seule couleur qui apparaît est celle d'un niveau, et elle vient de la
     doctrine (§3). Les états du kit UI (Success, Warning, Danger) ne sont pas
     employés : ils ne classent jamais un point, et cette surface n'en a pas
     besoin ailleurs.
   - Boutons 10 px, panneaux 20 px, fiches 14 px, puces en pilule (§4).
   - Aucune ombre, aucun dégradé (§6). Densité de logiciel de travail (§7). */

@font-face {
  font-family: "Geist";
  src: url("/police/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --fond: #FFFFFF;
  --panneau: #F7F7F7;
  --panneau-creux: #F3F3F3;
  --texte: #101011;
  --texte-2: #5E5E5E;
  --texte-3: #ABABAB;
  --filet: #EDEDED;
  --filet-appuye: #DDDDDD;
  --encre: #101011;
  --encre-texte: #FFFFFF;

  --conforme: #15803D;   --conforme-fond: #EAF6EE;
  --a_savoir: #0E7490;   --a_savoir-fond: #E8F3F6;
  --a_noter: #B45309;    --a_noter-fond: #FBF1E6;
  --a_verifier: #B91C1C; --a_verifier-fond: #FCECEC;

  --rayon-bouton: 10px;
  --rayon-panneau: 20px;
  --rayon-fiche: 14px;
  --rayon-pilule: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #101011;
    --panneau: #161819;
    --panneau-creux: #1C1E20;
    --texte: #F7F7F7;
    --texte-2: #ABABAB;
    --texte-3: #6F6F70;
    --filet: #2A2C2E;
    --filet-appuye: #434344;
    --encre: #F7F7F7;
    --encre-texte: #101011;

    --conforme: #4CA96F;   --conforme-fond: #15251B;
    --a_savoir: #3BA3BD;   --a_savoir-fond: #112329;
    --a_noter: #D29445;    --a_noter-fond: #251C10;
    --a_verifier: #DD6A67; --a_verifier-fond: #281516;
  }
}

* { box-sizing: border-box; }

html {
  font-family: Geist, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--texte);
  background: var(--fond);
}

body { margin: 0; background: var(--fond); }

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

/* --- titres : 500, serrés, jamais en gras ------------------------------- */

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
}

h1 { font-size: 1.75rem; margin-bottom: 1.25rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; letter-spacing: -0.02em; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; letter-spacing: -0.015em; }

p { margin: 0.5rem 0; }

.secondaire { color: var(--texte-2); }

.code, .sceau {
  font-family: Geist, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--texte-2);
}

.sceau { cursor: help; text-decoration: underline dotted; }

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

.bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}

.marque { display: inline-flex; color: var(--texte); }
.marque svg { display: block; }

.compte {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--texte-2);
}

.compte .cabinet {
  border-left: 1px solid var(--filet-appuye);
  padding-left: 1rem;
}

/* --- boutons (§4) --------------------------------------------------------- */

button, .bouton {
  font: inherit;
  cursor: pointer;
}

.principal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--encre);
  color: var(--encre-texte);
  border: 1px solid var(--encre);
  border-radius: var(--rayon-bouton);
  padding: 12px 20px;
  font-weight: 500;
  line-height: 1.2;
}

.principal::after {
  content: "\2192";
  display: inline-flex;
  width: 1.2em;
  height: 1.2em;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--rayon-pilule);
  font-size: 0.85em;
}

.principal:hover { background: var(--texte-2); border-color: var(--texte-2); }
.principal:active { background: var(--texte); border-color: var(--texte); }

.principal:disabled, .principal:disabled:hover {
  background: var(--panneau);
  color: var(--filet-appuye);
  border-color: var(--panneau);
  cursor: default;
}

.secondaire-bouton {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon-bouton);
  padding: 8px 14px;
  font-weight: 500;
  line-height: 1.2;
}

.secondaire-bouton:hover { background: var(--panneau); }
.secondaire-bouton:active { background: var(--panneau-creux); }

/* --- page ---------------------------------------------------------------- */

main {
  max-width: 58rem;
  margin: 1.75rem auto;
  padding: 0 1.5rem;
}

.message {
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--panneau-creux);
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon-fiche);
}

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

.actions form { margin: 0; }

/* --- pilules (§4) --------------------------------------------------------- */

.pilule {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.7rem;
  border-radius: var(--rayon-pilule);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.pilule-etat { background: var(--encre); color: var(--encre-texte); }
.pilule-fichier { background: var(--fond); color: var(--texte); border: 1px solid var(--filet-appuye); }

/* --- formulaires --------------------------------------------------------- */

.formulaire label { display: block; margin-bottom: 1rem; font-weight: 500; }

.formulaire input {
  display: block;
  width: 100%;
  max-width: 24rem;
  padding: 0.6rem 0.75rem;
  margin-top: 0.3rem;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon-bouton);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-weight: 400;
}

.formulaire input:focus { outline: 2px solid var(--encre); outline-offset: 1px; }

/* --- dépôt --------------------------------------------------------------- */

.zone-depot {
  border: 1px dashed var(--filet-appuye);
  border-radius: var(--rayon-panneau);
  padding: 2rem;
  text-align: center;
  background: var(--panneau);
}

.zone-depot.survol { border-color: var(--encre); background: var(--panneau-creux); }

.zone-depot label { display: block; color: var(--texte-2); }
.zone-depot input[type="file"] { display: block; margin: 1rem auto; }

.secteurs, .liste-analyses { padding-left: 1.25rem; }
.secteurs li, .liste-analyses li { margin: 0.3rem 0; }

/* --- attente ------------------------------------------------------------- */

.attente { max-width: 40rem; }
.attente .pilule { margin-bottom: 1rem; }

/* --- analyse : les trois zones (§4 : panneau 20 px, fiche 14 px) ---------- */

.zone {
  background: var(--panneau);
  border-radius: var(--rayon-panneau);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.zone h2 { margin-top: 0; }

.zone-entete dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.5rem;
  margin: 0;
  align-items: center;
}

.zone-entete dt { color: var(--texte-2); }
.zone-entete dd { margin: 0; overflow-wrap: anywhere; }

/* « Trouver dans le contrat » */
.trouver-formulaire label { color: var(--texte-2); font-weight: 400; margin-bottom: 0.5rem; }
.trouver-ligne { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.trouver-ligne input { flex: 1 1 18rem; max-width: none; margin: 0; }
.trouver-resultats { margin-top: 1rem; }
.trouver-resultats .message { margin: 0; }
.trouver-passages { list-style: none; padding: 0; margin: 0; }
.trouver-passages li { margin: 0 0 0.75rem; }
.trouver-passages .extrait { margin: 0; background: var(--fond); border-radius: var(--rayon-bouton); border-left: 0; padding: 0.75rem 1rem; }
.trouver-correspond { margin: 0.35rem 0 0 1rem; font-size: 0.95rem; }
.trouver-vide, .trouver-non-evalue { margin: 0.5rem 0 0; }

/* La zone à ne pas rater : un filet d'encre, pas une couleur. */
.zone-couverture { border-left: 4px solid var(--encre); border-radius: 0 var(--rayon-panneau) var(--rayon-panneau) 0; }
.zone-couverture ul { padding-left: 1.25rem; margin: 0.25rem 0; }
.zone-couverture li { margin: 0.3rem 0; }

.couverture-phrase { font-weight: 500; margin: 1rem 0 0; }

.legende {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

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

/* Les quatre couleurs de la doctrine, et rien d'autre. */
.niveau-conforme   { --couleur: var(--conforme);   --couleur-fond: var(--conforme-fond); }
.niveau-a_savoir   { --couleur: var(--a_savoir);   --couleur-fond: var(--a_savoir-fond); }
.niveau-a_noter    { --couleur: var(--a_noter);    --couleur-fond: var(--a_noter-fond); }
.niveau-a_verifier { --couleur: var(--a_verifier); --couleur-fond: var(--a_verifier-fond); }

.niveau {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.7rem 0.15rem 0.4rem;
  border-radius: var(--rayon-pilule);
  background: var(--couleur-fond, var(--panneau-creux));
  color: var(--couleur, var(--texte));
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}

.icone {
  display: inline-flex;
  width: 1.35em;
  height: 1.35em;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: var(--rayon-pilule);
  font-size: 0.85em;
  font-style: normal;
  line-height: 1;
}

.point {
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-fiche);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.point-tete {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.critere { font-weight: 500; }
.portee { color: var(--texte-2); }

.enonce { margin: 0.5rem 0; }

.extrait {
  margin: 0.75rem 0;
  padding: 0.5rem 1rem;
  border-left: 2px solid var(--filet-appuye);
  color: var(--texte-2);
  font-style: italic;
}

.extrait .page {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--texte-3);
  margin-top: 0.25rem;
}

.base-legale { font-size: 0.95rem; color: var(--texte-2); }

details.detail { margin-top: 0.75rem; }
details.detail summary { cursor: pointer; font-size: 0.9rem; font-weight: 500; }

details.detail dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--panneau-creux);
  border-radius: var(--rayon-bouton);
  font-size: 0.95rem;
}

details.detail dt { color: var(--texte-2); }
details.detail dd { margin: 0; }

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

.pied {
  max-width: 58rem;
  margin: 3rem auto;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--filet);
  font-size: 0.85rem;
  color: var(--texte-2);
}

.pied .marque { color: var(--texte-3); margin-bottom: 0.75rem; }

@media (max-width: 40rem) {
  .zone-entete dl, details.detail dl { grid-template-columns: 1fr; }
  .compte .cabinet { display: none; }
}