/* =============================================================================
   AVIERO — Paramètres, erreurs, modale
   -----------------------------------------------------------------------------
   Les explications d'erreur, la page Paramètres et la modale de confirmation.

   Ce fichier est le n° 8 sur 14. L'ORDRE DE CHARGEMENT EST LE CONTRAT :
   c'est la cascade CSS, et plusieurs règles de ce projet ne valent que par leur
   position après une autre. Les <link> d'index.html sont numérotés pour cette
   raison, et tests/contrat/chargement.test.mjs surveille cet ordre.

   Extrait du <style> d'index.html le 18/09/2026, sans qu'aucune règle ne soit
   modifiée, ajoutée ou supprimée.
   ========================================================================== */
  /* ================= Explications d'erreur =================
     Placé après les règles .fb-item / .vf-fb d'origine pour les surcharger :
     l'explication tient sur plusieurs lignes, l'alignement doit partir du haut. */
  .fb-item, .vf-fb .fb{ align-items:flex-start; }
  .fb-item .mk, .vf-fb .fb .mk{ flex:none; margin-top:1px; }
  .fb-why{ display:block; margin-top:3px; font-size:12.5px; line-height:1.5;
    color:var(--ink-2); font-weight:400; }
  .fb-piege{ display:flex; gap:9px; align-items:flex-start; margin-top:8px;
    background:rgba(224,145,42,.10); border:1px solid rgba(224,145,42,.35);
    border-left:3px solid var(--warn); border-radius:9px; padding:9px 11px;
    font-size:13px; line-height:1.5; color:var(--ink); }
  .fb-piege .mk{ flex:none; color:var(--warn); margin-top:1px; }
  .fb-piege .ic-svg{ width:15px; height:15px; }

  /* ================= Page Paramètres ================= */
  /* min(…,100%) : sans cela, une colonne à minimum fixe (340 px) reste plus large que
     l'écran sur un petit mobile et fait déborder toute la page horizontalement. */
  .set-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:16px; align-items:start; }
  .set-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px 22px; box-shadow:var(--shadow-sm); }
  .set-card.set-wide{ grid-column:1/-1; }
  .set-card h3{ font-family:var(--sans); font-size:15px; font-weight:800; color:var(--ink);
    margin:0 0 4px; letter-spacing:-.01em; }
  .set-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 0; border-bottom:1px solid var(--surface-2); flex-wrap:wrap; }
  .set-row:last-child{ border-bottom:none; padding-bottom:2px; }
  .set-lbl{ display:flex; flex-direction:column; gap:2px; min-width:150px; flex:1; }
  .set-lbl b{ font-size:14px; font-weight:650; color:var(--ink); }
  .set-lbl span{ font-size:12px; color:var(--ink-2); line-height:1.45; }
  .set-input{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
    padding:9px 11px; font-family:var(--sans); font-size:13.5px; color:var(--ink); max-width:210px; }
  .set-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); }
  .set-short{ max-width:120px; font-family:var(--mono); }
  .set-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .set-actions{ display:flex; gap:9px; flex-wrap:wrap; margin:12px 0 10px; }
  .set-note{ font-size:12.5px; color:var(--ink-2); margin:8px 0 0; line-height:1.5; }

  /* Segmenté à 2 ou 3 options, réutilisé par plusieurs réglages. */
  .seg3{ display:inline-flex; gap:3px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:var(--pill); padding:3px; flex:none; }
  /* Le fond transparent laisse voir --surface-2, sur quoi --ink-2 ne donnait
     que 4,35:1 — sous le seuil AA, sur les trois segments « Système / Clair /
     Sombre » et « Débutant / Réel ». --ink-2-fort y rend 7,66:1. L'option
     active, elle, est blanche sur violet et tenait déjà.
     Relevé le 20/09/2026 par tests/parcours/contraste.spec.js. */
  .seg3-opt{ cursor:pointer; border:none; background:transparent; border-radius:var(--pill);
    padding:7px 13px; font-family:var(--sans); font-size:12.5px; font-weight:600;
    color:var(--ink-2-fort); transition:.15s; white-space:nowrap; }
  .seg3-opt:hover{ color:var(--ink); }
  .seg3-opt.active{ background:var(--violet); color:#fff; }

  /* Interrupteur on/off */
  .switch{ position:relative; width:46px; height:26px; flex:none; cursor:pointer; padding:0;
    border:1px solid var(--border); background:var(--surface-2); border-radius:var(--pill); transition:.18s; }
  .switch span{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
    background:var(--ink-2); transition:.18s; }
  .switch[aria-checked="true"]{ background:var(--violet); border-color:var(--violet); }
  .switch[aria-checked="true"] span{ left:22px; background:#fff; }

  /* Réglage « Animations » désactivées : coupe transitions et révélations. */
  html.no-anim *, html.no-anim *::before, html.no-anim *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.no-anim .reveal{ opacity:1 !important; transform:none !important; }

  /* ================= Modale de confirmation ================= */
  .modal{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(20,16,40,.52); animation:mdlIn .16s ease; }
  .modal[hidden]{ display:none; }
  @keyframes mdlIn{ from{opacity:0} to{opacity:1} }
  .modal-card{ width:100%; max-width:430px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:24px 26px 20px;
    animation:mdlUp .18s cubic-bezier(.22,.61,.36,1); }
  @keyframes mdlUp{ from{transform:translateY(10px)} to{transform:none} }
  .modal-title{ font-family:var(--sans); font-size:19px; font-weight:800; color:var(--ink); margin:0 0 8px; }
  .modal-text{ font-size:14px; line-height:1.55; color:var(--ink-2); margin:0 0 20px; }
  .modal-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
  .modal-danger{ background:var(--bad); }
  .modal-danger:hover{ background:#c33f3b; }