/* Le front, en une feuille. Mobile d'abord : tout se lit à 375 px, sans
   défilement horizontal et avec 16 px de marge de chaque côté. Le desktop
   n'est qu'une largeur plafonnée — pas une deuxième mise en page à tenir. */

/* --- Les jetons -------------------------------------------------------------
   Les couleurs, les rayons et les ombres vivent dans les fichiers de thème, et là seulement : `themes/jetons.css`
   (le contrat, thème « Poche » par défaut), `themes/<nom>.css`, `themes/graphe.css`. Le thème choisi est servi par
   `/theme.css` (clair) et `/apparence.css` (sombre, selon clair / sombre / comme l'appareil) — `front/themes.py`,
   `front/coquille.py`, sans une ligne de script. Les feuilles d'écran ne lisent que des jetons `--sc-…`.
   -------------------------------------------------------------------------- */

:root {
  --gouttiere: 16px;
  /* La bascule de l'en-tête : en clair, la lune (« passer en sombre ») ; `/apparence.css` inverse. Pas une couleur :
     l'affichage de l'un des deux boutons. */
  --bascule-sombre: inline-grid;
  --bascule-clair: none;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sc-fond);
  color: var(--sc-texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Rien ne doit jamais déborder en largeur : c'est le seul défaut de mise en
     page qu'un utilisateur de téléphone ne pardonne pas. */
  overflow-x: hidden;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 24px var(--gouttiere) 64px;
}

h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 6px; font-weight: 600; }

.chapeau { color: var(--sc-texte-2); margin: 0 0 20px; }

.tete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* --- le bandeau : ce que le Cerveau vient de dire ------------------------ */

.bandeau {
  margin: 0 0 20px;
  padding: 12px 16px;
  color: var(--sc-texte);
  background: var(--sc-succes-doux);
  border-radius: var(--sc-rayon-champ);
  /* Le Cerveau compose ses confirmations sur plusieurs lignes. On les garde
     telles quelles plutôt que de les aplatir. */
  white-space: pre-wrap;
}
.bandeau.refus { background: var(--sc-erreur-doux); }

/* --- une carte de réglage ------------------------------------------------ */

.reglage {
  background: var(--sc-surface);
  border: 1px solid var(--sc-bordure);
  border-radius: var(--sc-rayon-pastille);
  padding: 16px;
  margin-bottom: 16px;
}

.cle, .origine { margin: 0 0 12px; color: var(--sc-texte-2); font-size: 0.85rem; }
.origine { margin-top: -8px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--sc-surface-2);
  border: 1px solid var(--sc-bordure);
  border-radius: 5px;
  padding: 1px 5px;
  /* Une sphère longue ou un nom composé ne doit pas pousser la carte hors de
     l'écran : on coupe le mot plutôt que la page. */
  overflow-wrap: anywhere;
}

.vide { color: var(--sc-texte-2); font-style: italic; }

.choix {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--sc-bordure);
  cursor: pointer;
}
.choix:first-of-type { border-top: none; }
.choix input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--sc-accent-encre); }

.defaut {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-texte-2);
  border: 1px solid var(--sc-bordure);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

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

label { display: block; font-weight: 500; margin-bottom: 6px; }
label.choix { font-weight: 400; margin-bottom: 0; }

/* Un champ est une commande : son contour est `--sc-bordure-forte` (≥ 3:1, lisible en sombre), jamais le filet
   décoratif `--sc-bordure`. Les écrans précisent ensuite (`.champ`, les cartes d'ajout). */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"],
input[type="number"], input[type="date"], input[type="time"], input[type="tel"], textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  font: inherit;
  color: var(--sc-texte);
  background: var(--sc-surface-2);
  border: 1.5px solid var(--sc-bordure-forte);
  border-radius: var(--sc-rayon-champ);
}
textarea { line-height: 1.45; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sc-focus);
  outline-offset: 2px;
}

/* La sphère d'un projet se choisit dans une liste : même allure que les champs, mêmes jetons. */
select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  color: var(--sc-texte);
  background: var(--sc-surface-2);
  border: 1.5px solid var(--sc-bordure-forte);
  border-radius: var(--sc-rayon-champ);
}

.gestes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

button {
  font: inherit;
  font-weight: 500;
  /* 44 px de haut : la cible tactile minimale. En dessous, on rate le bouton
     un coup sur trois sur un téléphone. */
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--sc-accent);
  border-radius: 999px;
  background: var(--sc-accent);
  color: var(--sc-accent-sur);
  font-weight: 600;
  cursor: pointer;
}
button.discret { background: transparent; color: var(--sc-texte-2); border-color: var(--sc-bordure-forte); }

form + form { margin: 0; }
.tete form { margin: 0; }

a { color: var(--sc-accent-encre); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* 15/10 — un tableau ne prend ni largeur ni `overflow` tant qu'il est un tableau : caché
   ainsi, il poussait la page (la frise en tableau : 1 605 px de large à 1 280). */
table.visuellement-cache { display: block; }

form[action="/entrer"] button { margin-top: 12px; }

/* Le seul ajustement desktop : le bouton d'entrée passe à côté du champ. */
@media (min-width: 480px) {
  form[action="/entrer"] { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  form[action="/entrer"] label { grid-column: 1 / -1; margin-bottom: 0; }
  form[action="/entrer"] button { margin-top: 0; }
}

/* --- lot Q : tes projets et tes structures ------------------------------- */

.cadres {
  background: var(--sc-surface-2);
  border: 0;
  border-radius: var(--sc-rayon-tuile);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.cadres h3 { margin: 24px 0 4px; }
.cadres label { margin-top: 12px; }
.facultatif { font-weight: 400; color: var(--sc-texte-2); }

.liste-cadres { list-style: none; margin: 0; padding: 0; }
.cadre {
  padding: 12px 0;
  border-top: 1px solid var(--sc-bordure);
}
.cadre:first-child { border-top: none; }
.cadre-nom { margin: 0 0 4px; overflow-wrap: anywhere; }
.cadre-nom a { font-weight: 600; }
.cadre-detail { margin: 0; color: var(--sc-texte-2); font-size: 0.85rem; overflow-wrap: anywhere; }
.cadre form { margin-top: 10px; }
.cadre .proposer p { margin: 0 0 8px; }

.pastille {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--sc-texte-2);
  background: var(--sc-surface-2);
  border: 1px solid var(--sc-bordure);
  border-radius: 999px;
  padding: 0 8px;
  margin-left: 4px;
  white-space: nowrap;
}

fieldset.genres { border: none; margin: 12px 0 0; padding: 0; min-width: 0; }
fieldset.genres legend { font-weight: 500; padding: 0; margin-bottom: 2px; }

/* Une ressemblance à trancher : ni un refus, ni un succès — l'ambre du
   navigateur (« à revalider »), mêmes jetons mesurés. */
.attente {
  margin: 0 0 16px;
  padding: 12px 16px;
  color: var(--sc-texte);
  background: var(--sc-attention-doux);
  border-radius: var(--sc-rayon-champ);
}
.attente p { margin: 0; overflow-wrap: anywhere; }
.attente .gestes form { margin: 0; }

/* --- lot S1 : tes sources, tes gens -------------------------------------- */

/* Les deux sections reprennent la carte des projets (`.cadres`) ; seul le
   tableau de ce qui entre aujourd'hui a sa mise en forme. Aucune couleur ici :
   les jetons mesurés de :root (le vert de succès pour « oui »). */
.cadres .ajout-cadre + .ajout-cadre { margin-top: 8px; }
optgroup { font-weight: 600; }

.entrees { list-style: none; margin: 8px 0 0; padding: 0; }
.entrees li {
  padding: 8px 0;
  border-top: 1px solid var(--sc-bordure);
  overflow-wrap: anywhere;
}
.entrees li:first-child { border-top: none; }
.entrees .facon { margin-right: 2px; }
.entrees .precision {
  display: block;
  margin-top: 2px;
  color: var(--sc-texte-2);
  font-size: 0.85rem;
}
.pastille.oui { color: var(--sc-succes-encre); border-color: var(--sc-succes-encre); background: var(--sc-succes-doux); }
.pastille.pas-encore { font-style: italic; }