/**
 * LES STYLES DES BLOCS DE SAISIE, PARTAGÉS PAR LES DEUX OUTILS.
 *
 * Pendant du module `champs.js` (voir son en-tête) : le HTML étant le même des
 * deux côtés, son apparence doit l'être aussi. C'est ce qui manquait quand
 * `distrib` recopiait les champs — l'astérisque des champs obligatoires avait
 * disparu, et la liste de noms n'avait pas la même hauteur que le champ voisin.
 *
 * Repris tel quel de `formulaire-en-ligne/public/styles.css`, dont c'est la
 * source. Les variables de couleur sont déclarées ici avec un REPLI : la page
 * qui les définit déjà (le formulaire) garde les siennes, celle qui ne les a
 * pas (distrib) obtient des valeurs équivalentes.
 */

:root {
  --commun-encre: #16212c;
  --commun-bord: #b8c4cf;
  --commun-bleu: #1a5fa8;
  --commun-erreur: #b3261e;
  --commun-gris-clair: #d7dee6;
}

.champ { margin-bottom: 0.9rem; }
.champ label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="date"],
.champ input[type="password"],
.champ select {
  width: 100%;
  padding: 0.65rem 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--bord, var(--commun-bord));
  border-radius: 8px;
  background: #fff;
  color: var(--encre, var(--commun-encre));
}
.champ input:focus,
.champ select:focus {
  outline: 2px solid var(--bleu, var(--commun-bleu));
  border-color: var(--bleu, var(--commun-bleu));
}

/* Deux contrôles sur une même ligne (liste de noms + « Autre nom ») : ils se
   partagent la largeur, séparés d'une espace. La liste prend le tiers, le nom
   libre les deux tiers — déplié, le menu déroulant s'affiche de toute façon à
   sa largeur naturelle. `align-items: stretch` leur donne la MÊME HAUTEUR :
   sans lui, la liste et le champ texte ne s'alignaient pas (Jean, 2026-08-25). */
.ligne-champs { display: flex; gap: 0.5rem; align-items: stretch; }
.ligne-champs > * { min-width: 0; }
.ligne-champs > select { flex: 1 1 0; }
.ligne-champs > input { flex: 2 1 0; }

.champ .erreur-champ {
  color: var(--erreur, var(--commun-erreur));
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: none;
}
.champ.invalide input,
.champ.invalide select {
  border-color: var(--erreur, var(--commun-erreur));
  background: #fdecea;
  color: var(--erreur, var(--commun-erreur));
}
/* Champ à DEUX contrôles pour UNE seule valeur : seul celui qui est en faute
   doit rougir. Choisir « Autre nom » n'est pas une erreur. */
.champ.invalide.faute-texte select,
.champ.invalide.faute-liste input {
  border-color: var(--bord, var(--commun-bord));
  background: #fff;
  color: inherit;
}
.champ.invalide .erreur-champ { display: block; }

/* L'ASTÉRISQUE DES CHAMPS OBLIGATOIRES. Absente de la copie de `distrib` :
   rien n'y distinguait un champ requis d'un champ facultatif. */
.obligatoire::after { content: " *"; color: var(--erreur, var(--commun-erreur)); }

.choix { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.55rem 0; }
.choix input { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; flex: none; }
.choix label { font-size: 0.95rem; }

.ligne-blocs { display: flex; gap: 0.6rem; align-items: start; }
.ligne-blocs > .champ { min-width: 0; }
.ligne-blocs > .champ-etroit { flex: 1 1 0; }
.ligne-blocs > .champ-large { flex: 2 1 0; }
.ligne-blocs select,
.ligne-blocs input { width: 100%; }
/* Sous 480 px, deux champs côte à côte deviennent illisibles : on empile. */
@media (max-width: 480px) {
  .ligne-blocs { flex-direction: column; gap: 0; }
}

.cache { display: none !important; }

/* S'ENGAGER À LA FCPE (2026-08-26) — une question, les parents cochables
   dessous. Le liseré de gauche sépare les trois questions sans ajouter de
   cadre : elles se lisent à la suite, pas comme trois formulaires. */
.engagement { margin: 0 0 1.4rem; padding-left: 0.9rem; border-left: 3px solid var(--bordure, #e3e8ee); }
.engagement h2 { margin-bottom: 0.25rem; }
.engagement .note { margin-top: 0; }
/* Deux parents : les cases côte à côte quand la place le permet, empilées
   sinon — un nom de parent ne doit jamais être coupé. */
.groupe-cases { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }

/* DÉPOSER UN DOCUMENT (2026-08-27) — descendu de `formulaire-en-ligne` le jour
   où le guichet a reçu les mêmes zones de dépôt. Les deux écrans doivent se
   RESSEMBLER : c'est la moitié visible de « le même bloc des deux côtés ». */
.zone-upload {
  border: 2px dashed #b8c4cf; border-radius: 10px; padding: 0.8rem; text-align: center;
  position: relative; /* ancre la croix de retrait */
}
.zone-upload input[type="file"] { width: 100%; }
/* Croix de retrait d'une pièce jointe : dans le coin de la zone, pour ne pas
   allonger un écran déjà chargé. 44 px = cible tactile confortable. */
.retirer-piece {
  position: absolute; top: 0.15rem; right: 0.15rem;
  width: 44px; height: 44px; line-height: 1;
  border: none; background: none; cursor: pointer;
  font-size: 1.5rem; color: var(--erreur, #b3261e);
  border-radius: 50%;
}
.retirer-piece:hover, .retirer-piece:focus-visible { background: #fdecea; }
.upload-statut { font-size: 0.88rem; margin-top: 0.4rem; }
.upload-statut.ok { color: var(--ok, #1e7b34); }
.upload-statut.erreur { color: var(--erreur, #b3261e); }
/* Un dépôt par PLACE, sur la fiche du guichet : chacun sous son titre, séparés
   pour qu'on ne se trompe pas de zone en tendant la main vers le scanner. */
.depot-piece { margin: 0 0 1.2rem; }
.depot-piece h4 { margin: 0 0 0.35rem; }

/* ── CE QUI MANQUE (2026-08-30, étape 3 du plan des fournitures) ────────────
   Une mention, jamais un blocage : un article en rupture reste COMMANDABLE, et
   c'est précisément ce qui nous dit combien en racheter. Le rouge est réservé
   aux erreurs de saisie ; ici c'est une information, d'où l'orangé. */
.note-rupture { color: var(--attention, #a15c00); font-weight: 600; }
.choix.en-rupture label { color: #55636f; }

/* Un livre de PACK qui manquera. Il ne se décoche pas — il vient avec le pack —
   donc on le grise pour que la famille sache lequel n'arrivera pas tout de
   suite. Barré : c'est lisible d'un coup d'œil, y compris de loin au guichet. */
li.livre-manquant { color: #7a8894; text-decoration: line-through; }
li.livre-manquant .note-rupture { text-decoration: none; }

/* Séparer deux sujets dans un même bloc — le contact et la scolarité, par
   exemple (2026-08-30). Un trait FIN et clair : il structure sans découper. */
.separation-champs {
  border: none;
  border-top: 1px solid var(--bordure, #d9dfe4);
  margin: 1.1rem 0 0.9rem;
}

/* UN CODE SECRET, MASQUÉ, ET SON ŒIL (2026-09-10) — voir
   `brancherChampsSecrets`. L'œil est DANS le champ, à droite : le champ garde
   sa largeur, et le code ne passe jamais sous le bouton. */
.saisie-secrete {
  position: relative;
  display: block;
}
.saisie-secrete input {
  width: 100%;
  padding-right: 2.4rem;
  box-sizing: border-box;
}
.saisie-secrete .oeil {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0.15rem 0.3rem;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}