/* ============================================================================
   Modèle commun des formulaires des outils publics (charte : docs/charte-graphique.md, « Formulaires des outils »).

   Les composants f-* (f-sec, f-sec-t, f-field, f-lbl, f-inp, f-btn-*) viennent du tableau de bord (app.min.css,
   dashboard-ui.css). Ils lisent --card, --line, --text, --brand… alors que le site public nomme ses variables
   --card-bg, --border, --fg, --accent… : la classe .outil-zone, posée sur la section de l'outil, relie les deux.
   Clair et sombre sont donc gérés par les variables du site, sans couleur en dur.

   Utilisation (exemple : outil QR code) :
     <section class="outil-zone" …>
       <form class="card f-compact outil-form" …>
         <section class="f-sec"><h2 class="f-sec-t">…</h2>
           <label class="f-field"><span class="f-lbl">…</span><input class="f-inp" …></label>
         </section>
       </form>
     </section>

   Le CV (#outil-cv) et la lettre (#outil-lettre) portent encore leur propre copie de ces règles (cv-tool.css,
   letter-tool.css) : à aligner sur ce fichier (dette D106).
   ========================================================================= */

.outil-zone {
  --card: var(--card-bg);
  --line: var(--border);
  --text: var(--fg);
  --brand: var(--accent);
  --brand-soft: var(--accent-soft);
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --ok: #15803d;
  color: var(--fg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .outil-zone { --danger: #f87171; --danger-soft: #2a1717; --ok: #4ade80; }
}
:root[data-theme="dark"] .outil-zone { --danger: #f87171; --danger-soft: #2a1717; --ok: #4ade80; }

/* Panneaux aérés, étiquette au-dessus du champ (même rendu que la lettre de motivation). */
.outil-form .f-sec { padding: 1rem 1rem 1.15rem; margin-bottom: 1.25rem; }
.outil-form .f-sec:last-child { margin-bottom: 0; }
.outil-form .f-sec-t { margin-bottom: 1rem; }
.outil-form .f-lbl { display: block; margin-bottom: .35rem; }
@media (min-width: 640px) {
  .outil-form .f-sec { padding: 1.25rem 1.5rem 1.5rem; margin-bottom: 1.5rem; }
}

/* Grille de champs : une colonne sur mobile, deux à partir de 640 px ; .is-large occupe toute la ligne. */
.outil-grille { display: grid; gap: 1rem; }
@media (min-width: 640px) { .outil-grille.is-double { grid-template-columns: 1fr 1fr; } }
.outil-grille > .is-large { grid-column: 1 / -1; }

/* Aide sous un champ, case à cocher, messages. */
.outil-aide { margin: .35rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.outil-coche { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; color: var(--text); font-size: .8125rem; cursor: pointer; }
.outil-coche input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.outil-message { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: .7rem; font-size: .8125rem; line-height: 1.5; }
.outil-message.is-erreur { border: 1px solid var(--danger); background: var(--danger-soft); color: var(--text); }
.outil-message.is-alerte { border: 1px solid #f59e0b; background: color-mix(in srgb, #f59e0b 12%, transparent); color: var(--text); }
.outil-lien { padding: 0; border: 0; background: none; color: var(--brand); font-size: .8125rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.outil-lien:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: .25rem; }

/* Choix sous forme de pastilles (type de contenu, options exclusives). */
.outil-choix { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.outil-choix button {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .45rem .9rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text);
  font-size: .875rem; font-weight: 700; cursor: pointer;
}
.outil-choix button:hover { border-color: var(--brand); }
.outil-choix button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.outil-choix button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }