/* Elevora CRM — css/formulaires.css (25/09/2026)
   Deux choses, nées du même retour de Célian sur les formulaires :

   1. Les messages de la saisie contrôlée (js/00g-saisie.js) : l'email et le téléphone sont
      vérifiés pendant la frappe, et l'erreur s'écrit sous le champ. Elle se lit d'abord par son
      TEXTE (« Il manque l'arobase ») ; la bordure rouge ne fait que la doubler (1.4.1). Couleurs
      en jetons : --red et --text3 tiennent 4,5:1 sur --bg2 dans les deux thèmes (18/09/2026).

   2. Le bloc « Abonnement annuel & échelonnement » du formulaire projet (capture 46 : « pas
      clair, pas symétrique »). Avant : cinq cellules dans une grille auto-fit, des libellés en
      majuscules qui portaient aussi l'aide (« — vide : paiement de la facture de solde ») et
      passaient sur deux ou trois lignes, donc des champs à des hauteurs différentes d'une colonne
      à l'autre ; la liste des versements coincée dans une colonne, « Solde à la livraison » coupé
      en « Solde à l… ». Après : deux groupes titrés, trois colonnes égales dont les libellés, les
      champs et les aides partagent les mêmes lignes (subgrid), et les versements dans un vrai
      tableau pleine largeur — part, montant et bouton alignés, total en pied, « Ajouter » dessous.
*/

/* ── 1. Messages de saisie ─────────────────────────────────────────────────────────────── */
/* Jamais display:none : une zone vivante masquée sort de l'arbre d'accessibilité, et son
   premier message n'est pas lu. Vide, elle ne prend simplement aucune place. */
.saisie-msg{font-size:12px;line-height:1.45;margin-top:4px}
.saisie-msg:empty{margin-top:0}
.saisie-msg-err{color:var(--red)}
.saisie-msg-note{color:var(--text3)}
.saisie-msg-texte{display:block}
.saisie-sugg{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px;margin-top:2px;color:var(--text2)}
/* Boutons dans le texte : 24 px de haut au moins (2.5.8), soulignés pour se lire comme actions. */
.saisie-sugg-btn,.saisie-garder{appearance:none;background:none;border:0;padding:0 2px;min-height:24px;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;border-radius:4px}
.saisie-sugg-btn{font-weight:600;color:var(--accent);word-break:break-all}
.saisie-garder{color:var(--text2)}
.saisie-sugg-btn:hover,.saisie-garder:hover{text-decoration-thickness:2px}
.saisie-sugg-btn:focus-visible,.saisie-garder:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
[data-saisie][aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
[data-saisie][aria-invalid="true"]:focus{border-color:var(--red)}

/* Téléphone du formulaire client : indicatif et numéro sur une ligne quand ils y tiennent. Depuis
   que le sélecteur a de nouveau ses options (bug du 25/09/2026), il prend la largeur de la plus
   longue (« Côte d'Ivoire (+225) ») : sur un téléphone, le numéro n'avait plus que 100 px et
   « 06 12 34 56 78 » ne se lisait plus en entier. Faute de place, le numéro passe dessous. */
.tel-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.tel-ligne>.fsel{flex:0 1 auto;width:auto;min-width:0;max-width:100%}
.tel-ligne>.fi{flex:1 1 170px;min-width:0}

/* Fiche prospect : deux colonnes dont les messages n'ont pas la même longueur — les champs
   restent sur la même ligne, le texte s'écoule dessous. */
.pr-saisie{align-items:start}

/* ── 2. Formulaire projet : abonnement annuel, échelonnement ───────────────────────────── */
fieldset.fp-groupe{grid-column:1/-1;min-width:0;margin:6px 0 0;padding:16px 0 0;border:0;border-top:1px solid var(--border)}
fieldset.fp-groupe>legend{float:left;width:100%;padding:0;margin:0 0 3px;display:flex;align-items:center;gap:8px;font:600 13.5px var(--font);letter-spacing:-.005em;color:var(--text)}
/* 28/09/2026 : le trait de couleur avant l'intitulé est retiré (« fait IA ») ; le filet du haut
   et la graisse suffisent à marquer le groupe. */
fieldset.fp-groupe>legend+*{clear:both}
.fp-groupe-note{font-size:12px;line-height:1.5;color:var(--text3);margin:0 0 12px}

/* Trois colonnes égales. Chaque champ occupe trois lignes partagées (libellé, champ, aide) :
   un libellé qui passe sur deux lignes descend les trois champs ensemble, jamais un seul. */
.fp-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:12px;row-gap:0}
.fp-trio>.fp-champ{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:5px;min-width:0}
.fp-trio>.fp-champ>.fl{align-self:end}
.fp-champ>.fi{width:100%;min-width:0;height:var(--cmd-h,36px);box-sizing:border-box}
.fp-aide{font-size:11.5px;line-height:1.45;color:var(--text3);margin:0}

/* Ligne « Premier versement » : le champ dans la première colonne (alignée sur « Prix »), son
   aide dans les deux autres, à hauteur du champ. */
.fp-trio-date{grid-template-rows:auto auto;margin-top:14px}
.fp-trio-date>.fp-champ{grid-row:span 2}
.fp-trio-date>.fp-aide-cote{grid-column:2/4;grid-row:2;align-self:center}

/* Tableau des versements */
.fp-vers{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2);font-size:13px;overflow:hidden}
.fp-vers col.fp-vers-c-num{width:30px}
.fp-vers col.fp-vers-c-pct{width:64px}
.fp-vers col.fp-vers-c-mt{width:112px}
.fp-vers col.fp-vers-c-act{width:44px}
.fp-vers th,.fp-vers td{padding:7px 8px;text-align:left;vertical-align:middle}
.fp-vers thead th{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);border-bottom:1px solid var(--border2);padding-top:8px;padding-bottom:8px}
.fp-vers tbody tr+tr td{border-top:1px solid var(--border)}
.fp-vers .fp-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fp-vers thead .fp-num{font-family:var(--font)}
.fp-vers-ordre{font:600 11px var(--mono);color:var(--text3);text-align:center!important}
.fp-vers-lib{color:var(--text);overflow-wrap:anywhere;line-height:1.35}
.fp-vers td.fp-vers-act{text-align:center;padding:4px}
.fp-vers-retirer{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border-input);border-radius:7px;background:transparent;color:var(--text2);cursor:pointer}
.fp-vers-retirer:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
.fp-vers-retirer:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fp-vers tfoot th,.fp-vers tfoot td{border-top:1px solid var(--border2);background:var(--bg3);font-weight:600;color:var(--text)}
.fp-vers tfoot .fp-num{color:var(--text)}
.fp-vers-faux{color:var(--red)!important}
.fp-vers-bas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px}
.fp-vers-alerte{margin:0;font-size:12px;color:var(--red)}

@media(max-width:640px){
  .fp-trio,.fp-trio-date{display:flex;flex-direction:column;gap:14px}
  .fp-trio>.fp-champ{display:flex;flex-direction:column;gap:5px}
  .fp-trio>.fp-champ>.fl{align-self:stretch}   /* « end » aligne en bas dans la grille, à droite en colonne */
  .fp-trio-date{gap:5px}
  .fp-vers col.fp-vers-c-num{width:24px}
  .fp-vers col.fp-vers-c-pct{width:52px}
  .fp-vers col.fp-vers-c-mt{width:92px}
  .fp-vers col.fp-vers-c-act{width:40px}
  .fp-vers th,.fp-vers td{padding:7px 5px}
}
/* Téléphone étroit (320 à 420 px) : cinq colonnes ne laissaient que 16 px au libellé, écrit une
   lettre par ligne. Chaque versement passe sur deux lignes — libellé, puis part et montant —,
   le bouton reste à droite. Les rôles ARIA posés par js/07 gardent au tableau sa lecture. */
@media(max-width:420px){
  .fp-vers{display:block}
  .fp-vers colgroup{display:none}
  .fp-vers thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .fp-vers tbody,.fp-vers tfoot{display:block}
  .fp-vers tr{display:grid;grid-template-columns:16px minmax(0,1fr) auto 32px;grid-template-areas:"o l l a" "o p m a";column-gap:8px;row-gap:2px;align-items:center;padding:8px}
  .fp-vers th,.fp-vers td,.fp-vers tfoot th,.fp-vers tfoot td{padding:0;border:0;background:none}
  .fp-vers .fp-vers-ordre{grid-area:o;align-self:start;padding-top:2px}
  .fp-vers .fp-vers-lib{grid-area:l}
  .fp-vers .fp-vers-pct{grid-area:p;text-align:left}
  .fp-vers .fp-vers-mt{grid-area:m}
  .fp-vers td.fp-vers-act{grid-area:a;padding:0}
  .fp-vers tbody tr+tr{border-top:1px solid var(--border)}
  .fp-vers tfoot tr{border-top:1px solid var(--border2);background:var(--bg3)}
}

/* Ateliers devis, contrat et proposition (audit du 27/09/2026). Le panneau est construit en JS avec
   des styles en ligne : une barre de boutons sans retour à la ligne et un partage conversation /
   document en deux colonnes. À 390 px, « Enregistrer », « Envoyer au client » et « Fermer »
   sortaient de l'écran — l'atelier ne se fermait plus — et le document restait invisible, poussé à
   droite de la conversation. Sur un écran étroit, la barre passe à la ligne, et la conversation se
   pose au-dessus du document (le séparateur, qui règle une largeur, n'a plus d'objet). */
@media(max-width:767px){
  .atelier{width:100% !important;height:100% !important}
  .atelier-tete{flex-wrap:wrap !important;row-gap:8px !important}
  .atelier-corps{flex-direction:column !important;overflow-y:auto !important}
  .atelier-chat{width:auto !important;min-width:0 !important;max-height:45vh;flex-shrink:0 !important}
  .atelier-sep{display:none !important}
  .atelier-doc{flex:1 0 60vh !important;padding:8px !important}
}

/* [LA] 03/10/2026 (chantier v10, lot A) : numéro de TVA intracommunautaire, sur toute la largeur.
   Modification 15 §2 (capture modif-15) : le sélecteur de pays faisait 118 px — « Pays-Bas »,
   « Royaume-Uni » écrasés — et le champ, dans une demi-colonne, coupait « FR XX 000 000 000 ».
   Le pays s'écrit en entier (le sélecteur prend la largeur de son plus long nom), le champ prend
   le reste ; faute de place (téléphone), il passe dessous. Même groupe pour le formulaire client
   et la fiche prospect (js/00g, tvaHtml). Le préfixe du pays est posé dans le champ, en police à
   chasse fixe comme le numéro : le retrait du texte se compte en « ch » (js/00g, habillerTva). */
.tva-groupe{min-width:0}
.tva-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.tva-row>.fsel{flex:0 0 auto;width:auto;min-width:10.5rem;max-width:100%;font-family:inherit}
.tva-saisie{position:relative;flex:1 1 15rem;min-width:0}
.tva-saisie>.fi{width:100%;font-family:var(--mono);letter-spacing:.01em}
.tva-prefixe{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;line-height:18px;color:var(--text3);pointer-events:none;user-select:none}
.tva-saisie>.fi{font-size:13px}
/* Aide sous un champ (exemple du format du pays) : lisible, jamais coupée. */
.saisie-aide{font-size:12px;line-height:1.45;color:var(--text3);margin-top:4px;overflow-wrap:anywhere}
/* Numéros saisis par groupes (SIRET, code postal, IBAN) : chiffres alignés, espaces visibles. */
input[data-saisie="siret"],input[data-saisie="siren"],input[data-saisie="siren-siret"],input[data-saisie="iban"],input[data-saisie="tva-complet"]{font-variant-numeric:tabular-nums}
/* Numéro affiché (fiches, listes) : il ne se coupe jamais en fin de ligne. */
.num-insecable{white-space:nowrap}

/* ── [LB] 03/10/2026 : modification 15 (§1, §3, §4) — UNE taille pour toutes les fenêtres de saisie ──
   Liste du 02/10 : la fenêtre de création du client faisait 560 px, ses catégories se lisaient mal
   (titres de 10 px en petites capitales), et « appliquer la même taille et la même largeur à toutes
   les fenêtres de saisie du CRM ». Une seule règle, comme le voile commun (css/elevora.css) :
   860 px de large (90 % de l'écran au plus ; une fenêtre qui demandait plus large le garde, par
   --fenetre-l), 90 % de la hauteur, le corps qui défile et le pied (Annuler / Créer) toujours
   visible ; sur petit écran, toute la largeur, sans défilement horizontal. Sections titrées en
   17 px gras et séparées d'un filet, libellés de 14 px, champs et boutons de 44 px, aides de
   13,5 px. Fenêtres : modalForm (js/12 — nouveau prospect, motifs, réglages…), création et
   modification d'un client (#form-ov), échéance (#echeance-ov), création d'un rendez-vous
   (.ag-fen-creer), tâche (.tk-f), devis (#devis-ov). Jetons des deux thèmes ; aucune animation. */
:root{--fenetre-l:860px}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fenetre.ag-fen-creer,.tk-fenetre.tk-f,#devis-ov .gen-modal){
  width:min(var(--fenetre-l),90vw)!important;max-width:none!important;max-height:90vh;--cmd-h:44px;font-size:15px}
/* Le corps défile, le pied reste (modalForm) ; #form-ov et #echeance-ov défilent d'un bloc : leur pied
   (.step-nav, .mf) reste collé en bas de la fenêtre. */
.fenetre-saisie{display:flex;flex-direction:column}
.fenetre-saisie>.fenetre-saisie-corps{flex:1 1 auto;min-height:0;overflow-y:auto}
.fenetre-saisie>.fenetre-saisie-pied{flex:0 0 auto}
.fenetre-saisie>.fenetre-saisie-pied>button{font-size:14px!important;padding-left:22px!important;padding-right:22px!important}
:is(#form-ov>.modal,#echeance-ov>.modal) :is(.step-nav,.mf){position:sticky;bottom:-1.5rem;z-index:3;margin:1.5rem -1.5rem -1.5rem;padding:14px 1.5rem;
  background:var(--bg3);border-top:1px solid var(--border);border-radius:0 0 16px 16px}
:is(#form-ov>.modal,#echeance-ov>.modal) :is(.step-nav,.mf) .btn{min-height:44px;font-size:14px;padding:0 20px}
#form-ov>.modal .modal-t,#echeance-ov>.modal .modal-t{font-size:20px;font-weight:700;letter-spacing:-.2px}
#form-ov>.modal .step-label{font-size:14px}
/* Les sections : un titre lisible, un filet entre deux. Les titres du formulaire client sont écrits
   en ligne (10 px, capitales) : !important pour les reprendre. */
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal) .form-rubrique{border:0;padding:0;margin:0 0 4px!important;min-width:0}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal) .form-rubrique>legend{display:flex!important;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:0!important;
  margin:0 0 14px!important;font:700 17px/1.3 var(--font)!important;letter-spacing:-.1px!important;text-transform:none!important;color:var(--text)!important}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal) .form-rubrique~.form-rubrique{margin-top:22px!important;padding-top:20px;border-top:1px solid var(--border)}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal) .form-rubrique>legend :is(span,small){font-size:13.5px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--text2)!important}
/* Libellés, champs, aides. */
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fen-creer,.tk-f,#devis-ov .gen-modal) :is(.fl,.ag-champ>label,.gen-l,.agw-lib,.ag-radios legend,.tva-groupe>label,.tel-groupe>label){
  font-size:14px;font-weight:600;color:var(--text2);text-transform:none;letter-spacing:0;min-height:0}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fen-creer,.tk-f,#devis-ov .gen-modal) :is(input.fi,select.fsel,.fsel):not(.tva-saisie>.fi){min-height:44px;font-size:15px}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fen-creer,.tk-f,#devis-ov .gen-modal) .tva-saisie>.fi{min-height:44px}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fen-creer,.tk-f,#devis-ov .gen-modal) .fta{font-size:15px}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fen-creer,.tk-f,#devis-ov .gen-modal) :is(.ag-aide-champ,.pr-note,.form-consigne,.saisie-aide,.ag-radios label){font-size:13.5px;line-height:1.5}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fen-creer,.tk-f,#devis-ov .gen-modal) :is(.ag-aide-champ,.pr-note,.form-consigne,.saisie-aide){color:var(--text2)}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal) .saisie-msg{font-size:13.5px}
:is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal) :is(.fg,.ag-deux){gap:16px 18px}
.fenetre-saisie #elv-modal-body>*+*{margin-top:16px}
/* Petit écran : toute la largeur, rien ne déborde. */
@media (max-width:640px){
  :is(.fenetre-saisie,#form-ov>.modal,#echeance-ov>.modal,.ag-fenetre.ag-fen-creer,.tk-fenetre.tk-f,#devis-ov .gen-modal){width:calc(100vw - 16px)!important;max-height:calc(100vh - 16px)}
  #elv-modal-ov:has(>.fenetre-saisie){padding:8px!important}
  :is(#form-ov>.modal,#echeance-ov>.modal){padding:1rem}
  :is(#form-ov>.modal,#echeance-ov>.modal) :is(.step-nav,.mf){bottom:-1rem;margin:1.25rem -1rem -1rem;padding:12px 1rem}
}

/* ── [V20] 06/10/2026 : adresses e-mail en pastilles, avec suggestions (js/00l-saisie-adresses.js) ──────
   Le champ « Invités » de l'agenda (document de Célian du 05/10/2026, §1) : la zone ressemble à un champ
   (même fond, même contour --border-input que .fi, 3:1), les adresses s'y posent en pastilles, la frappe
   continue après la dernière. Le focus se voit sur TOUTE la zone (contour de 2 px, :focus-within) : la zone
   de frappe, elle, n'a plus de contour. Une adresse invalide ne se distingue pas que par le rouge : le texte
   « adresse invalide » est écrit dans la pastille (1.4.1). Couleurs en jetons, vérifiées dans les deux
   thèmes (tests/v20-invites.py). Aucune animation. */
.sa-racine{min-width:0}
.sa-ancre{position:relative}
.sa-champ{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;padding:4px 8px;background:var(--bg3);border:1px solid var(--border-input);border-radius:var(--r);color:var(--text);font:13px var(--font);cursor:text}
.sa-champ:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px}
/* Facultatif : même habillage que les autres champs facultatifs de la fenêtre (css/elevora.css, .ag-f-fac). */
.ag-f-fac .sa-champ{background:transparent;border-style:dashed}
.ag-f-fac .sa-champ:focus-within{background:var(--bg3);border-style:solid}
.sa-liste{display:contents;list-style:none;margin:0;padding:0}
.sa-champ>.sa-saisie{flex:1 1 11rem;min-width:8rem;width:auto;min-height:30px;margin:0;padding:2px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;outline:none;box-shadow:none}
.sa-champ>.sa-saisie::placeholder{color:var(--text3)}
.sa-pastille{display:inline-flex;align-items:center;gap:2px;min-width:0;max-width:100%;min-height:30px;padding:0 3px 0 11px;border:1px solid var(--border2);border-radius:999px;background:var(--blue-bg);color:var(--text);font-weight:500;line-height:1.2}
.sa-texte{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-etat{flex:0 0 auto;margin-left:6px;font-size:.85em;font-weight:700;white-space:nowrap}
/* Invalide : fond opaque (--bg2) plutôt que la teinte --red-bg, qui ne laissait que 4,5:1 au texte rouge ; double trait rouge. */
.sa-invalide{border-color:var(--red);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--red);color:var(--red)}
.sa-retirer{flex:0 0 auto;appearance:none;display:inline-grid;place-items:center;width:26px;height:26px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.sa-retirer:hover{background:color-mix(in srgb,currentColor 16%,transparent)}
.sa-retirer:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sa-suggestions{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--bg2);border:1px solid var(--border-input);border-radius:var(--r);box-shadow:0 10px 28px rgba(0,0,0,.28);max-height:min(60vh,320px);overflow-y:auto}
.sa-suggestions[hidden]{display:none}
.sa-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:6px 10px;border-radius:calc(var(--r) - 2px);color:var(--text);cursor:pointer}
.sa-opt[aria-selected="true"]{background:var(--bg4);outline:2px solid var(--accent);outline-offset:-2px}
.sa-opt-corps{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
.sa-opt-nom{font-weight:600;overflow-wrap:anywhere}
.sa-opt-mail{color:var(--text2);overflow-wrap:anywhere}
.sa-opt[aria-selected="true"] .sa-opt-mail{color:var(--text)}
.sa-opt-src{flex:0 0 auto;padding:1px 9px;border:1px solid var(--border2);border-radius:999px;font-size:11.5px;color:var(--text2);white-space:nowrap}
.sa-msg{margin:6px 0 0;font-size:12.5px;line-height:1.45}
.sa-msg:empty{margin:0}
.sa-msg-erreur{color:var(--red)}
.sa-msg-note{color:var(--text2)}
/* Dans une fenêtre de saisie : la taille de tous les champs (44 px, texte de 15 px). */
:is(.fenetre-saisie,.ag-fen-creer,.tk-f) .sa-champ{min-height:44px;font-size:15px}
:is(.fenetre-saisie,.ag-fen-creer,.tk-f) .sa-msg{font-size:13.5px}
/* Au doigt : pastilles, croix et suggestions d'au moins 44 px (règle « Responsive » du CLAUDE.md). */
@media (max-width:767px),(pointer:coarse){
  .sa-champ{min-height:48px}
  .sa-pastille{min-height:44px;padding-left:12px}
  .sa-retirer{width:44px;height:44px}
  .sa-champ>.sa-saisie{min-height:44px}
  .sa-opt{min-height:48px}
}