/* Elevora CRM — composants.css  [V24] 09/10/2026, document 2 de Célian (§8, §14, §37, §38, §48)
   La feuille des composants COMMUNS aux trois espaces et aux pages publiques : fenêtres de
   confirmation (js/00n), couche au-dessus de tout (js/00m), listes déroulantes maison (js/00o),
   info-bulles (js/00p). Chargée par index.html, client.html, document.html et sign-mobile.html.

   Les pages n'ont pas toutes les mêmes jetons : le CRM et l'espace client ont --bg2, --text,
   --accent… (thème sombre sur :root, clair sur body.light) ; document.html et sign-mobile.html ont
   --carte, --encre… Chaque composant lit donc ses couleurs dans ses PROPRES jetons, posés sur sa
   racine (sous <body> : ils suivent body.light), avec le repli de la page publique puis une valeur.
   Mouvement : 160 ms au plus, et rien du tout avec « réduire les animations ». */

.elv-couche,.elv-fen,.elv-sel,.elv-bulles,.elv-messages{
  --cmp-fond:var(--bg2,var(--carte,#FFFFFF));
  --cmp-fond2:var(--bg3,var(--fond,#ECECF1));
  --cmp-fond3:var(--bg4,#E0E0EA);
  --cmp-texte:var(--text,var(--encre,#1A1A2E));
  --cmp-texte2:var(--text2,var(--texte2,#474760));
  --cmp-texte3:var(--text3,var(--texte3,#626279));
  --cmp-bord:var(--border2,var(--bord,rgba(26,26,46,.17)));
  --cmp-bord-champ:var(--border-input,var(--bord-champ,rgba(26,26,46,.5)));
  --cmp-accent:var(--accent,#1B4F8A);
  --cmp-aplat:var(--accent-fill,var(--accent,#1B4F8A));
  --cmp-teinte:var(--glow,rgba(27,79,138,.10));
  --cmp-vert:var(--green,var(--vert,#01704F));
  --cmp-rouge:var(--red,var(--rouge,#AD383D));
  --cmp-r:var(--r,10px);
  --cmp-rs:var(--rs,7px);
  --cmp-police:var(--font,var(--police,system-ui,-apple-system,'Segoe UI',sans-serif));
  --cmp-ombre:0 14px 40px rgba(10,8,18,.28),0 2px 8px rgba(10,8,18,.14);
  --cmp-duree:.14s;
}
body.light .elv-couche,body.light .elv-bulles{--cmp-ombre:0 14px 36px rgba(26,26,46,.14),0 2px 6px rgba(26,26,46,.08)}

/* ── Fenêtres communes (js/00n) : les blocs ajoutés au message ─────────────────────────────── */
.elv-fen-element{margin:12px 0 0;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--cmp-rs);background:var(--cmp-fond2);color:var(--cmp-texte)}
.elv-fen-etiquette{font-size:var(--fs-min, 12.5px);font-weight:600;color:var(--cmp-texte2)}
.elv-fen-element strong{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.elv-fen-consequences{margin:10px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;color:var(--cmp-texte2)}
.elv-fen-consequences li{line-height:1.5}
.elv-fen-note{margin:10px 0 0;font-size:13px;color:var(--cmp-texte2)}
.elv-fen-retaper{margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
.elv-fen-retaper-aide{margin:0;font-size:13px;color:var(--cmp-texte2)}
/* Le nom à retaper : à part, en gras, taille normale, sélectionnable d'un clic (repli du presse-papiers). */
.elv-fen-nom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--cmp-bord);border-radius:var(--cmp-rs);background:var(--cmp-fond2)}
.elv-fen-nom-texte{flex:1 1 160px;min-width:0;font-size:14px;font-weight:700;color:var(--cmp-texte);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;cursor:text}
.elv-fen-copier{display:inline-flex;align-items:center;gap:6px;min-height:var(--cmd-h,36px);padding:0 14px;border:1px solid var(--cmp-bord-champ);border-radius:8px;background:var(--cmp-fond);color:var(--cmp-texte);font:600 13px var(--cmp-police);cursor:pointer}
.elv-fen-copier:hover{background:var(--cmp-teinte);border-color:var(--cmp-accent)}
.elv-fen-copier:focus-visible{outline:2px solid var(--cmp-accent);outline-offset:2px}
.elv-fen-copier--fait{color:var(--cmp-vert);border-color:var(--cmp-vert)}
.elv-fen-label{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--cmp-texte)}
.elv-fen-champ{width:100%;min-height:var(--cmd-h,36px);padding:9px 12px;border:1.5px solid var(--cmp-bord-champ);border-radius:9px;background:var(--cmp-fond);color:var(--cmp-texte);font:400 14px var(--cmp-police);outline:none;transition:border-color var(--cmp-duree)}
.elv-fen-champ:focus{border-color:var(--cmp-accent)}
.elv-fen-champ[aria-invalid="true"]{border-color:var(--cmp-rouge)}
.elv-fen-etat{margin:0;min-height:1.4em;font-size:12.5px;color:var(--cmp-texte2)}
.elv-fen-etat--alerte{color:var(--cmp-rouge)}
#elv-modal-ok:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.elv-fen-btn:focus-visible{outline:2px solid var(--cmp-accent);outline-offset:2px}
/* [V36] l'enfoncement des boutons (copier, valider, annuler…) vient de css/boutons.css : une seule définition. */
@media (max-width:640px){.elv-fen-btn,.elv-fen-copier{min-height:44px}.elv-fen-champ{min-height:44px;font-size:16px}}

/* Un message à la place d'alert() sur une page qui n'a pas ses propres notifications (js/00n). */
.elv-messages{position:fixed;right:16px;bottom:16px;z-index:100700;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.elv-message{padding:10px 14px;border-radius:var(--cmp-r);background:var(--cmp-texte);color:var(--cmp-fond);font:500 13.5px/1.45 var(--cmp-police);box-shadow:var(--cmp-ombre)}
.elv-message--erreur{background:var(--cmp-rouge);color:#fff}

@media (prefers-reduced-motion:reduce){
  .elv-fen-copier,.elv-fen-champ{transition:none}
}

/* ── La couche au-dessus de tout (js/00m) ─────────────────────────────────────────────────────
   Un conteneur de 0 × 0 en haut à gauche ; ses panneaux sont en position fixe, au-dessus des
   fenêtres (modalConfirm 99999, modalEmpile 100000). */
.elv-couche{position:fixed;left:0;top:0;width:0;height:0;z-index:100500}
.elv-couche-panneau{position:fixed}
.elv-feuille-fond{display:none}
@keyframes elvCoucheEntree{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes elvCoucheEntreeHaut{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes elvFeuilleEntree{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes elvFondEntree{from{opacity:0}to{opacity:1}}

/* ── La liste déroulante maison (js/00o) ─────────────────────────────────────────────────────────
   Le champ fermé : un bouton qui reprend les classes du <select> (.fsel, .fi…). Ses règles de base
   n'ont AUCUNE spécificité (:where) : la classe du champ et son style en ligne l'emportent toujours. */
select[data-elv-habille]{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;min-width:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important}
:where(.elv-sel){min-height:var(--cmd-h,36px);padding:6px 10px;border:1px solid var(--cmp-bord-champ);border-radius:var(--cmp-r);background:var(--cmp-fond2);color:var(--cmp-texte);font:400 13px/1.3 var(--cmp-police);max-width:100%;vertical-align:middle}
:where(.elv-sel){display:inline-flex}
.elv-sel{align-items:center;gap:8px;cursor:pointer;text-align:left;line-height:1.3;-webkit-appearance:none;appearance:none;background-image:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color var(--cmp-duree),box-shadow var(--cmp-duree),background-color var(--cmp-duree)}
.elv-sel.fsel,.elv-sel.fi{display:flex}
.elv-sel[hidden]{display:none!important}
.elv-sel-valeur{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap}
.elv-sel-texte{min-width:0;overflow:hidden;text-overflow:ellipsis}
.elv-sel-indicatif{color:var(--cmp-texte2);overflow:hidden;text-overflow:ellipsis}
.elv-sel-fleche{flex:0 0 auto;display:inline-flex;margin-left:auto;color:var(--cmp-texte2);transition:transform var(--cmp-duree) ease}
.elv-sel[aria-expanded="true"] .elv-sel-fleche{transform:rotate(180deg);color:var(--cmp-accent)}
.elv-sel:hover:not(:disabled){border-color:var(--cmp-accent)}
.elv-sel:active:not(:disabled){background-color:var(--cmp-teinte)}
.elv-sel:focus-visible{outline:2px solid var(--cmp-accent);outline-offset:2px}
.elv-sel[aria-expanded="true"]{border-color:var(--cmp-accent);box-shadow:0 0 0 3px var(--cmp-teinte)}
.elv-sel:disabled{opacity:.55;cursor:not-allowed}
.elv-sel[aria-invalid="true"]{border-color:var(--cmp-rouge)}
.elv-sel-point{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.elv-sel-pastille{display:inline-flex;align-items:center;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;padding:1px 8px;border-radius:999px;background:var(--cmp-teinte);color:var(--cmp-texte);font-size:var(--fs-min, 12.5px);font-weight:600;line-height:1.6}
.elv-sel-pastille--plus{background:var(--cmp-fond3)}

/* Le menu ouvert : fond de carte, mêmes arrondis que les champs, ombre douce, police du CRM. */
.elv-sel-panneau{display:flex;flex-direction:column;min-width:160px;max-width:min(92vw,520px);max-height:min(380px,80vh);padding:4px;background:var(--cmp-fond);border:1px solid var(--cmp-bord);border-radius:var(--cmp-r);box-shadow:var(--cmp-ombre);color:var(--cmp-texte);font:400 13.5px/1.35 var(--cmp-police);overflow:hidden;animation:elvCoucheEntree var(--cmp-duree) ease-out}
.elv-sel-panneau[data-cote="haut"]{animation-name:elvCoucheEntreeHaut}
.elv-sel-tete{display:none}
.elv-sel-recherche{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 10px;min-height:38px;border:1px solid var(--cmp-bord-champ);border-radius:var(--cmp-rs);background:var(--cmp-fond2);color:var(--cmp-texte2)}
.elv-sel-recherche:focus-within{border-color:var(--cmp-accent);box-shadow:0 0 0 3px var(--cmp-teinte)}
.elv-sel-chercher{flex:1;min-width:0;min-height:34px;border:0;background:transparent;color:var(--cmp-texte);font:inherit;outline:none}
.elv-sel-chercher:focus-visible{outline:none}
.elv-sel-chercher::placeholder{color:var(--cmp-texte2);opacity:1}
.elv-sel-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:0;outline:none}
.elv-sel-liste ul{list-style:none;margin:0;padding:0}
.elv-sel-opt{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 10px 7px 8px;border-radius:var(--cmp-rs);color:var(--cmp-texte);cursor:pointer;transition:background-color .1s}
.elv-sel-opt[hidden],.elv-sel-groupe[hidden]{display:none}
.elv-sel-opt[data-actif]{background:var(--cmp-teinte)}
@media (hover:hover){.elv-sel-opt:hover{background:var(--cmp-teinte)}}
.elv-sel-opt[aria-selected="true"]{font-weight:600}
.elv-sel-opt[aria-disabled="true"]{opacity:.55;cursor:not-allowed;background:none}
.elv-sel-opt-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.elv-sel-opt-l{overflow-wrap:anywhere}
.elv-sel-opt-s{font-size:var(--fs-min, 12.5px);font-weight:400;color:var(--cmp-texte2)}
.elv-sel-coche{flex:0 0 16px;display:inline-flex;color:var(--cmp-accent);visibility:hidden}
.elv-sel-opt[aria-selected="true"] .elv-sel-coche{visibility:visible}
.elv-sel-case{flex:0 0 18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--cmp-bord-champ);border-radius:5px;color:transparent;background:var(--cmp-fond);transition:background-color .1s,border-color .1s}
.elv-sel-opt[aria-selected="true"] .elv-sel-case{background:var(--cmp-aplat);border-color:var(--cmp-aplat);color:#fff}
.elv-sel-groupe-t{display:block;padding:8px 10px 4px;font-size:var(--fs-min, 12.5px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cmp-texte2)}
.elv-sel-vide{margin:0;padding:10px 12px;color:var(--cmp-texte2);font-size:13px}
.elv-sel-vide[hidden]{display:none}
.elv-sel-pied{flex:0 0 auto;display:flex;justify-content:flex-end;padding:4px 2px 0;margin-top:4px;border-top:1px solid var(--cmp-bord)}
.elv-sel-effacer{min-height:32px;padding:0 10px;border:0;border-radius:var(--cmp-rs);background:none;color:var(--cmp-accent);font:600 12.5px var(--cmp-police);cursor:pointer;transition:background-color var(--cmp-duree)}
.elv-sel-effacer:hover{background:var(--cmp-teinte)}
.elv-sel-effacer[hidden]{display:none}

/* Téléphone : le panneau du bas (§8.3), sur un voile, avec de grandes zones de toucher. */
@media (max-width:639.98px){
  .elv-feuille-fond{display:block;position:fixed;inset:0;background:rgba(10,8,18,.45);animation:elvFondEntree var(--cmp-duree) ease-out}
  .elv-feuille{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;min-width:0!important;max-width:none!important;max-height:min(78vh,620px)!important;border-radius:16px 16px 0 0;border-bottom:0;padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px));animation:elvFeuilleEntree .16s ease-out}
  .elv-feuille .elv-sel-tete{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 8px 8px}
  .elv-feuille .elv-sel-tete-t{font-size:15px;font-weight:700;color:var(--cmp-texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .elv-sel-fermer{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--cmp-texte2);cursor:pointer}
  .elv-feuille .elv-sel-opt{min-height:48px;font-size:15.5px;padding:10px 12px}
  .elv-feuille .elv-sel-chercher{font-size:16px;min-height:42px}
  .elv-feuille .elv-sel-effacer{min-height:44px}
  .elv-sel{min-height:44px;font-size:16px}
  /* Le texte du choix (sur une ligne) ne dicte plus la largeur du champ : sans cela, une option longue élargit la colonne de la fenêtre au-delà de l'écran (360 px). */
  .elv-sel-valeur{contain:inline-size}
}
@media (prefers-reduced-motion:reduce){
  .elv-sel,.elv-sel-fleche,.elv-sel-opt,.elv-sel-case,.elv-sel-effacer{transition:none}
  .elv-sel-panneau,.elv-feuille,.elv-feuille-fond,.elv-couche-panneau{animation:none!important}
}

/* ── L'info-bulle commune (js/00p) ─────────────────────────────────────────────────────────────
   Texte et fond inversés (texte du thème sur fond du texte) : 13,6:1 en sombre, 16:1 en clair. Dans sa
   propre couche, au-dessus de la couche des menus ; elle ne capte jamais le pointeur. */
.elv-bulles{position:fixed;left:0;top:0;width:0;height:0;z-index:100600;pointer-events:none}
.elv-bulle{position:fixed;max-width:min(280px,calc(100vw - 8px));padding:5px 9px;border-radius:7px;background:var(--cmp-texte);color:var(--cmp-fond);font:500 12.5px/1.35 var(--cmp-police);white-space:normal;overflow-wrap:break-word;box-shadow:0 6px 18px rgba(10,8,18,.22);pointer-events:none;opacity:0;transition:opacity .12s ease-out}
.elv-bulle[hidden]{display:none}
.elv-bulle--vue{opacity:1}
@media (prefers-reduced-motion:reduce){.elv-bulle{transition:none}}

/* ── [V26] 09/10/2026 (document 2, §46) : l'aide « Comment est calculé » d'un chiffre ─────────────────────────
   Un petit bouton rond dans l'intitulé d'un chiffre ; l'info-bulle commune (js/00p) en montre le calcul. 24 px de
   zone cliquable (WCAG 2.2, 2.5.8), l'icône reste discrète ; focus visible. */
.chiffre-aide{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px 0 -4px 2px;padding:0;vertical-align:middle;
  background:none;border:0;border-radius:50%;color:var(--text2);cursor:help;flex-shrink:0}
.chiffre-aide:hover{color:var(--accent);background:var(--bg3)}
.chiffre-aide:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rp-chiffre-l{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;margin:0 0 4px;font:600 14px/1.4 var(--font);color:var(--text)}
.rp-chiffre-u{font-weight:500;color:var(--text2)}

/* ── [Conformité, point 6] 15/10/2026 : l'IA à l'écran (js/00za-ia.js) ─────────────────────────────────────────
   Bouton d'IA d'une fonction coupée : atténué comme un bouton désactivé (css/boutons.css lit aria-disabled), même
   quand ce n'est pas un <button>. Avertissement près d'un résultat, pastille « Généré par IA », « Signaler une
   erreur » : texte du thème (--text2, --accent, 4,5:1 dans les deux thèmes), jamais sous --fs-min. */
.ia-coupee{opacity:.55;cursor:not-allowed}
.ia-mention{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 0;font-size:var(--fs-min, 12.5px);line-height:1.5;color:var(--text2)}
.ia-badge{display:inline-flex;align-items:center;padding:1px 8px;border:1px solid var(--accent);border-radius:999px;font-size:var(--fs-min, 12.5px);font-weight:600;line-height:1.5;color:var(--accent);white-space:nowrap}
.ia-signaler{padding:2px 4px;background:none;border:0;border-radius:4px;font:inherit;font-size:var(--fs-min, 12.5px);color:var(--accent);text-decoration:underline;cursor:pointer;min-height:24px}
.ia-signaler:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* [Lot conformité, point 14] 16/10/2026 — Paramètres → Système → Durées de conservation (js/83-conservation.js) */
.cons-duree{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}
.cons-mode{margin:0 0 8px;font-size:14px;color:var(--text)}
.cons-table th[scope=row]{min-width:180px}