/* QUALITE 24 — composants communs du site et de la future appli mobile (06/11/2026). Va avec composants.js (window.Q24UI).
   Même police, mêmes couleurs que le site (q24-theme.css) ; valeurs de repli si la feuille du thème n'est pas chargée.
   Règles iPhone : zones tactiles ≥ 44 px, texte des champs ≥ 16 px (pas de zoom automatique), bas sûr (encoche) respecté. */
:root{
  /* Un seul jeu de variables pour les composants et l'espace client (06/11/2026) : couleurs du site (q24-theme.css) avec valeur de repli. */
  --q24c-rouge:var(--red,#9e1022);--q24c-rouge-fonce:var(--red-dark,#7e0c1b);
  --q24c-texte:var(--ink,#23262b);--q24c-texte2:#424245;--q24c-gris:var(--ink-soft,#5a5e66);--q24c-pale:#aeaeb2;
  --q24c-vert:#1f6b3a;--q24c-ambre:#8a5a00;
  --q24c-ligne:var(--line,#e3ddd2);--q24c-ligne-claire:#f0ece4;--q24c-bord:#8d8d93;
  --q24c-papier:var(--paper,#fffdf9);--q24c-fond:var(--ivory,#f7f5f0);--q24c-gris-clair:#f5f5f7;
  --q24c-police:var(--sans,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif);
  --q24c-r-champ:var(--qa-r-champ,12px);--q24c-r-liste:20px;--q24c-r-carte:var(--qa-r-carte,22px);
  --q24c-ombre:var(--qa-ombre,0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05));
  --q24c-bas:env(safe-area-inset-bottom,0px);
}
/* ---- Champ ---- */
.q24c-champ{display:grid;gap:4px;font:400 13px/1.35 var(--q24c-police);color:var(--q24c-gris)}
.q24c-champ>input,.q24c-champ>textarea,.q24c-champ>select,.q24c-mdp>input{width:100%;box-sizing:border-box;min-height:48px;padding:10px 14px;border:1px solid var(--q24c-bord);border-radius:var(--q24c-r-champ);background:#fff;color:var(--q24c-texte);font:400 16px/1.3 var(--q24c-police);-webkit-appearance:none;appearance:none}
.q24c-champ>textarea{min-height:96px;resize:vertical}
.q24c-champ input::placeholder,.q24c-mdp input::placeholder{color:#a1a1a6}
.q24c-champ input:focus,.q24c-champ textarea:focus,.q24c-champ select:focus{outline:2px solid var(--q24c-rouge);outline-offset:1px;border-color:transparent}
.q24c-champ input[aria-invalid=true],.q24c-mdp input[aria-invalid=true]{border-color:var(--q24c-rouge)}
.q24c-champ-err{color:var(--q24c-rouge);font-size:12px;line-height:1.4}
.q24c-champ-err:empty{display:none}
/* ---- Mot de passe avec « Afficher » ---- */
.q24c-mdp{position:relative;display:block}
.q24c-mdp>input{padding-right:96px}
.q24c-oeil{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--q24c-rouge);font:600 14px/1 var(--q24c-police);cursor:pointer;-webkit-tap-highlight-color:transparent}
.q24c-oeil:hover,.q24c-oeil:focus-visible{background:var(--q24c-gris-clair);outline:none}
.q24c-oeil:focus-visible{box-shadow:0 0 0 2px var(--q24c-rouge)}
/* ---- Erreur ou réussite du formulaire ---- */
.q24c-err{color:var(--q24c-rouge);font:400 14px/1.45 var(--q24c-police);margin:0}
.q24c-err:empty{display:none}
.q24c-ok{color:var(--q24c-vert);font:400 14px/1.45 var(--q24c-police);margin:0}
.q24c-ok:empty{display:none}
/* ---- Boutons ---- */
.q24c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:999px;background:var(--q24c-rouge);color:#fff;font:600 16px/1.2 var(--q24c-police);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,transform .15s ease}
.q24c-btn:hover{background:var(--q24c-rouge-fonce);color:#fff}
.q24c-btn:active{transform:scale(.98)}
.q24c-btn:focus-visible{outline:2px solid var(--q24c-rouge);outline-offset:3px}
.q24c-btn-2{background:#fff;color:var(--q24c-rouge);border-color:var(--q24c-rouge)}
.q24c-btn-2:hover{background:rgba(158,16,34,.07);color:var(--q24c-rouge)}
.q24c-btn-lien{min-height:44px;padding:6px 0;border:0;background:none;color:var(--q24c-texte);font:400 15px/1.3 var(--q24c-police);text-decoration:underline;cursor:pointer}
.q24c-btn[disabled],.q24c-btn-2[disabled],.q24c-btn-lien[disabled],[aria-busy=true]{opacity:.6;cursor:progress}
.q24c-large{width:100%}
/* ---- Carte ---- */
.q24c-carte{display:grid;gap:10px;padding:20px;border-radius:var(--q24c-r-carte);background:var(--q24c-papier);color:var(--q24c-texte);box-shadow:var(--q24c-ombre);font:400 15px/1.5 var(--q24c-police)}
.q24c-carte>h3{margin:0;font:600 19px/1.25 var(--q24c-police);letter-spacing:-.02em}
.q24c-carte>p{margin:0;color:var(--q24c-gris)}
.q24c-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
/* ---- Feuille du bas (iPhone) ---- */
.q24c-voile{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,22,26,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:q24c-fondu .18s ease}
.q24c-feuille{position:relative;width:min(560px,100%);max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box;padding:12px 20px calc(20px + var(--q24c-bas));border-radius:var(--q24c-r-carte) var(--q24c-r-carte) 0 0;background:var(--q24c-papier);color:var(--q24c-texte);box-shadow:0 -12px 40px rgba(0,0,0,.18);font:400 16px/1.5 var(--q24c-police);animation:q24c-monte .24s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.q24c-voile{align-items:center;padding:16px}.q24c-feuille{border-radius:var(--q24c-r-carte);padding-bottom:20px}}
.q24c-poignee{display:block;width:36px;height:5px;margin:0 auto 10px;border-radius:999px;background:rgba(60,60,67,.25)}
@media (min-width:700px){.q24c-poignee{display:none}}
.q24c-feuille>h2{margin:0 0 6px;padding-right:48px;font:700 24px/1.15 var(--q24c-police);letter-spacing:-.02em}
.q24c-feuille .q24c-sous{margin:0 0 14px;color:var(--q24c-gris);font-size:15px}
.q24c-fermer{position:absolute;right:8px;top:8px;min-width:44px;min-height:44px;border:0;border-radius:999px;background:none;color:var(--q24c-gris);font:400 26px/1 var(--q24c-police);cursor:pointer}
.q24c-fermer:hover,.q24c-fermer:focus-visible{background:var(--q24c-gris-clair);outline:none}
.q24c-feuille .q24c-actions{margin-top:16px}
.q24c-feuille .q24c-actions>*{flex:1 1 auto}
body.q24c-figee{overflow:hidden}
/* ---- Toast ---- */
.q24c-toasts{position:fixed;left:16px;right:16px;bottom:calc(16px + var(--q24c-bas));z-index:1200;display:grid;gap:8px;justify-items:center;pointer-events:none}
body.has-tabbar .q24c-toasts,.q24c-toasts.q24c-haut{bottom:calc(76px + var(--q24c-bas))}
.q24c-toast{max-width:min(560px,100%);box-sizing:border-box;padding:12px 18px;border-radius:999px;background:rgba(35,38,43,.94);color:#fff;font:500 15px/1.35 var(--q24c-police);box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:auto;animation:q24c-monte .22s ease}
.q24c-toast.q24c-erreur{background:var(--q24c-rouge)}
/* ---- États : vide, erreur ---- */
.q24c-etat{display:grid;justify-items:center;gap:8px;padding:32px 20px;text-align:center;color:var(--q24c-texte);font:400 15px/1.5 var(--q24c-police)}
.q24c-etat-icone{display:grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:50%;background:rgba(118,118,128,.12);color:var(--q24c-gris);font:600 24px/1 var(--q24c-police)}
.q24c-etat.q24c-etat-erreur .q24c-etat-icone{background:rgba(158,16,34,.08);color:var(--q24c-rouge)}
.q24c-etat>h3{margin:0;font:600 17px/1.3 var(--q24c-police);letter-spacing:-.01em}
.q24c-etat>p{margin:0;max-width:420px;color:var(--q24c-gris)}
.q24c-etat .q24c-actions{justify-content:center;margin-top:8px}
@keyframes q24c-monte{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes q24c-fondu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.q24c-voile,.q24c-feuille,.q24c-toast{animation:none}.q24c-btn{transition:none}}