/* ═══════════════════════════════════════════════════════════════════════════════════
   Connexion, ecran de chargement, REX CLOUD et services du client
   Extrait de index.html le 20.09.2026. L'ordre des fichiers compte : la cascade CSS en depend,
   ne pas les reordonner dans index.html.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ═══ Paysage animé de la page de connexion (20.09.2026) : plaine et montagnes qui défilent,
   Rex qui court ; au clic sur « Se connecter », il accélère et sort de l'écran. ═══ */
.lp-paysage { position: absolute; left: 0; right: 0; bottom: 58px; height: 190px; overflow: hidden; pointer-events: none; }
/* Ordre de superposition : montagnes tout au fond, puis collines, la plaine, et Rex devant tout */
.lp-couche { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }
.lp-montagnes { z-index: 1; bottom: 74px; height: 120px; opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='120' viewBox='0 0 900 120'%3E%3Cpath d='M0 120 L120 34 L190 78 L280 18 L360 70 L450 26 L540 84 L630 40 L720 92 L810 44 L900 120 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 900px 120px; animation: lp-defile 46s linear infinite; }
.lp-collines { z-index: 2; bottom: 58px; height: 90px; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='90' viewBox='0 0 700 90'%3E%3Cpath d='M0 90 Q90 30 180 62 Q260 88 330 52 Q420 12 500 60 Q580 100 640 58 Q670 38 700 66 L700 90 Z' fill='%2300CFFF'/%3E%3C/svg%3E");
  background-size: 700px 90px; animation: lp-defile 26s linear infinite; }
.lp-plaine { z-index: 3; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, #1A4590 0%, #0E2A5E 100%); }
.lp-plaine::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(0,207,255,.55); }
/* Le petit Rex du paysage a été retiré le 20.09.2026 (demande de Jonathan) : il n'y a plus qu'un
   seul Rex à l'écran, celui du logotype, qui bascule puis traverse l'écran à la connexion. */
@keyframes lp-defile { from { background-position-x: 0; } to { background-position-x: -900px; } }
.lp-collines { animation-name: lp-defile-collines; }
@keyframes lp-defile-collines { from { background-position-x: 0; } to { background-position-x: -700px; } }
/* Connexion lancée : le paysage défile plus vite pendant que Rex court */
#login-screen.lp-go .lp-collines { animation-duration: 6s; }
#login-screen.lp-go .lp-montagnes { animation-duration: 14s; }
@media (max-width: 1000px) { .lp-paysage { height: 150px; } .lp-plaine { height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .lp-couche { animation: none !important; }
}
/* ═══ Ecran de chargement du CRM (20.09.2026) ═══
   L'animation precedente — Rex allumant une bougie — s'appliquait a la classe .loader, donc a
   TOUS les chargements du CRM : une scene de 190 px de haut s'affichait pour la moindre attente.
   Elle est remplacee par une barre de progression que Rex traverse, et cantonnee a l'ecran
   d'entree ; .loader redevient un simple indicateur d'attente. */
#ecran-chargement-crm .ecc-logo-bloc { position: relative; display: inline-block; line-height: 0; }
/* Le logotype de l'ecran de chargement recoit le meme traitement que celui de la connexion :
   blanchi (brightness(0) invert(1)) puis retroeclaire par trois halos de rayons croissants, qui
   respirent. Le PNG d'origine est bleu clair sur fond sombre — il se lisait comme un filigrane,
   alors que c'est la premiere chose qu'on voit en ouvrant le CRM. Le point turquoise est un
   element separe (.ecc-point), il garde donc sa couleur. */
#ecran-chargement-crm .ecc-logo { width: min(440px, 80vw); height: auto; display: block;
  animation: ecc-lumiere 6.5s ease-in-out infinite; }
@keyframes ecc-lumiere {
  0%, 100% { filter: brightness(0) invert(1)
    drop-shadow(0 0 14px rgba(125,211,252,.55)) drop-shadow(0 0 38px rgba(0,207,255,.45))
    drop-shadow(0 0 78px rgba(0,149,184,.38)) drop-shadow(0 4px 9px rgba(3,12,30,.55)); }
  50%      { filter: brightness(0) invert(1)
    drop-shadow(0 0 18px rgba(125,211,252,.72)) drop-shadow(0 0 52px rgba(0,207,255,.6))
    drop-shadow(0 0 104px rgba(0,149,184,.5)) drop-shadow(0 4px 9px rgba(3,12,30,.55)); }
}
#ecran-chargement-crm .ecc-point { position: absolute; left: 53.48%; top: 70.39%; width: 4.5%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 7%; background: #00CFFF;
  animation: lg-point 2.6s ease-in-out infinite; }
#ecran-chargement-crm .ecc-piste { position: relative; width: min(470px, 84vw); height: 104px; }
#ecran-chargement-crm .ecc-rex { position: absolute; bottom: 14px; left: 0; height: 84px; width: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.3)); animation: ecc-avance 2.6s cubic-bezier(.45,0,.55,1) infinite; }
#ecran-chargement-crm .ecc-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.16); overflow: hidden; display: block; }
#ecran-chargement-crm .ecc-barre span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, #00CFFF, #7DD3FC); animation: ecc-barre 2.6s cubic-bezier(.45,0,.55,1) infinite; }
#ecran-chargement-crm .ecc-texte { font-size: var(--t-l); color: #D7E6FF; }
@keyframes ecc-avance { 0% { left: 0; } 100% { left: calc(100% - 84px); } }
@keyframes ecc-barre { 0% { width: 6%; } 100% { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  #ecran-chargement-crm .ecc-rex, #ecran-chargement-crm .ecc-barre span, #ecran-chargement-crm .ecc-point { animation: none; }
  #ecran-chargement-crm .ecc-barre span { width: 60%; }
  /* Le halo reste, il cesse seulement de respirer : c'est le mouvement qui gene, pas la lumiere. */
  #ecran-chargement-crm .ecc-logo { animation: none; filter: brightness(0) invert(1)
    drop-shadow(0 0 14px rgba(125,211,252,.55)) drop-shadow(0 0 38px rgba(0,207,255,.45))
    drop-shadow(0 0 78px rgba(0,149,184,.38)) drop-shadow(0 4px 9px rgba(3,12,30,.55)); }
}

/* ═══ Espace client (js/48, 20.09.2026) ═══ */
body.mode-espace-client .sidebar, body.mode-espace-client #rex-tabbar, body.mode-espace-client .rex-bulle, body.mode-espace-client #nav-back-bar { display: none !important; }
body.mode-espace-client .main, body.mode-espace-client #main-content { margin-left: 0 !important; max-width: 1080px; margin-inline: auto; padding: 24px 20px 60px; }
.ec-contrats { display: flex; flex-direction: column; gap: 10px; }
.ec-contrat { display: grid; grid-template-columns: 44px 1fr 210px 120px; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--surface-alt); }
.ec-corps b { display: block; font-size: 14px; color: var(--text); }
.ec-corps small { display: block; font-size: var(--t-xs); color: var(--text-muted); }
.ec-corps .ec-modules { font-size: var(--t-xs); color: var(--text-dim); margin-top: 2px; }
.ec-dates { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs); color: var(--text-muted); }
.ec-dates .ec-alerte { color: #B45309; font-weight: 600; }
.ec-prime { text-align: right; font-size: var(--t-l); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ec-prime small { font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); }
.ec-vehicules { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-vehicule { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surface-alt); font-size: var(--t-s); }
.ec-vehicule em { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); }
.ec-pied { text-align: center; font-size: var(--t-xs); color: var(--text-dim); margin: 26px 0 10px; }
.ec-etat { font-size: var(--t-s); padding: 10px 12px; border-radius: 10px; margin: 10px 0 14px; background: var(--surface-alt); color: var(--text-muted); }
.ec-etat.actif { background: rgba(22,163,74,.10); color: #15803D; }
.ec-etat.inactif { background: rgba(245,158,11,.12); color: #B45309; }
.ec-note { font-size: var(--t-xs); color: var(--text-dim); margin-top: 10px; }
.ec-mdp { margin: 12px 0; padding: 14px; border-radius: 12px; background: rgba(0,207,255,.08); border: 1px solid rgba(0,207,255,.35); }
.ec-mdp-tete { font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.ec-mdp code { display: block; font-size: 20px; font-weight: 600; letter-spacing: 2px; margin: 8px 0 10px; color: var(--text); user-select: all; }
.ec-mdp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-mdp-actions .btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 800px) { .ec-contrat { grid-template-columns: 34px 1fr; } .ec-dates, .ec-prime { grid-column: 2; text-align: left; } }
.pi-profil .pi-en { font-size: var(--t-xs); font-weight: 500; color: var(--text-dim); }

/* ═══ REX CLOUD — identité de l'espace client (20.09.2026) ═══ */
.login-marque-cloud { display: none; }
body.mode-cloud .login-marque:not(.login-marque-cloud) { display: none; }
body.mode-cloud .login-marque-cloud { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cloud-visuel { position: relative; width: 230px; height: 150px; }
.cloud-nuage { position: absolute; left: 0; bottom: 0; width: 230px; filter: drop-shadow(0 12px 26px rgba(0,0,0,.25)); }
.cloud-rex { position: absolute; left: 62px; bottom: 52px; width: 108px; animation: cloud-flotte 4.5s ease-in-out infinite; }
@keyframes cloud-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cloud-titre { display: flex; align-items: center; gap: 10px; font-size: 40px; font-weight: 300; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.cloud-titre b { font-weight: 600; }
.cloud-titre i { width: 14px; height: 14px; background: #00CFFF; display: inline-block; }
.cloud-sous { font-size: var(--t-m); color: #B9CAE8; margin: 0; }
/* Dans l'espace lui-même */
.ec-marque { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-m); letter-spacing: .04em; color: rgba(255,255,255,.85); }
.ec-marque svg { width: 34px; height: auto; }
.ec-marque b { font-weight: 600; }
@media (max-width: 1000px) { .cloud-visuel { width: 180px; height: 118px; } .cloud-nuage { width: 180px; } .cloud-rex { width: 84px; left: 48px; bottom: 40px; } .cloud-titre { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .cloud-rex { animation: none; } }
/* Brouillon de saisie d'un contrat (js/49, 20.09.2026) */
.nc-brouillon { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 16px; border-radius: 12px; background: rgba(0,207,255,.08); border: 1px solid rgba(0,207,255,.35); }
.nc-brouillon > span { font-size: 20px; }
.nc-brouillon b { display: block; font-size: var(--t-m); color: var(--text); }
.nc-brouillon small { font-size: var(--t-xs); color: var(--text-muted); }
.nc-brouillon div { flex: 1; min-width: 0; }
.nc-brouillon button { padding: 7px 14px; font-size: var(--t-s); }
/* Volume de primes interactif + aperçu placements dans la synthèse (20.09.2026) */
#vpx-anneau-svg .vpx-seg { cursor: pointer; transition: opacity .15s, stroke-width .15s; }
#vpx-anneau-svg .vpx-seg:focus-visible { outline: none; stroke-width: 26; }
.vpx-legende button.survol { background: var(--surface-alt); }
.vpx-legende button.actif { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.vpx-cat { cursor: pointer; border-radius: 8px; transition: background .15s; }
.vpx-cat:hover { background: var(--surface-alt); }
.vpx-cat.actif { background: var(--accent-dim); box-shadow: inset 2px 0 0 var(--accent); }
.pi-apercu { display: grid; grid-template-columns: minmax(220px, 1fr) 1.4fr; gap: 18px; }
.pi-apercu-profil b { display: block; font-size: var(--t-l); color: var(--text); margin-top: 6px; }
.pi-apercu-profil small { font-size: var(--t-xs); color: var(--text-muted); }
.pi-apercu-alloc { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: var(--t-s); color: var(--text); }
.pi-apercu-alloc span { display: flex; justify-content: space-between; gap: 10px; }
.pi-apercu-alloc em { font-style: normal; color: var(--text-muted); }
.pi-apercu-sols { display: flex; flex-direction: column; gap: 6px; }
.pi-apercu-sol { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface-alt); border: 1px solid transparent; cursor: pointer; text-align: left; font-family: inherit; }
.pi-apercu-sol:hover { border-color: var(--accent-border); }
.pi-apercu-sol b { flex: 1; font-size: var(--t-m); color: var(--text); }
.pi-apercu-sol em { font-style: normal; font-weight: 600; color: var(--accent); font-size: var(--t-s); white-space: nowrap; }
.pi-apercu-alerte { font-size: var(--t-xs); color: #B45309; background: rgba(245,158,11,.10); border-radius: 8px; padding: 8px 10px; }
.cf-aide-revenus { font-size: var(--t-xs); color: var(--text-muted); background: var(--surface-alt); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) { .pi-apercu { grid-template-columns: 1fr; } }
.cloud-signature { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cloud-signature > span { font-size: var(--t-s); color: #8FA6CE; letter-spacing: .08em; text-transform: uppercase; }
.cloud-signature img { height: 20px; width: auto; flex: none; filter: brightness(0) invert(1); }
.cloud-ex { height: 18px; flex: none; display: inline-flex; align-items: center; color: #fff; }
  .cloud-ex svg { height: 18px; width: auto; }
.ec-signature { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 6px; opacity: .85; }
.ec-signature img { height: 18px; filter: brightness(0) invert(1); }
.ec-signature.sombre img { filter: none; }
.pi-reserve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-s); color: var(--text-muted); background: var(--surface-alt); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.pi-reserve .form-select { max-width: 200px; }
.pi-reserve strong { color: #B45309; }
/* ═══ Dossier de financement — check-list « Demande de prêt hypothécaire » (20.09.2026) ═══ */
.df { display: flex; flex-direction: column; gap: 14px; }
.df-choix-client { min-width: 240px; }
.df-liste { display: flex; flex-direction: column; gap: 6px; }
.df-ligne-dossier { display: grid; grid-template-columns: 1.1fr 1.6fr 120px 60px 150px; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; cursor: pointer; text-align: left; font-size: var(--t-m); }
.df-ligne-dossier:hover { border-color: #00CFFF; box-shadow: 0 4px 14px rgba(17,54,121,.10); }
.df-ld-nom { font-weight: 600; color: var(--text); }
.df-ld-objet { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-ld-avance { display: block; height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.df-ld-avance i { display: block; height: 100%; background: linear-gradient(90deg, #00CFFF, #113679); }
.df-ld-pct { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--t-s); }
.df-badge { justify-self: end; font-size: var(--t-xs); font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
.df-badge-en_cours { background: rgba(0,207,255,.14); color: #0E7490; }
.df-badge-transmis { background: rgba(17,54,121,.12); color: #113679; }
.df-badge-accepte { background: rgba(16,185,129,.14); color: #047857; }
.df-badge-refuse, .df-badge-annule { background: rgba(239,68,68,.12); color: #B91C1C; }
.df-entete { display: flex; flex-direction: column; gap: 10px; }
.df-trois { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.df-trois .df-deux-col { grid-column: span 2; }
.df-situations { display: flex; flex-wrap: wrap; gap: 6px; }
.df-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 500; color: var(--text-muted);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.df-chip.actif { background: rgba(0,207,255,.14); border-color: #00CFFF; color: #0E7490; }
.df-chip input { accent-color: #113679; }
.df-avancement { display: flex; flex-direction: column; gap: 5px; }
.df-barre-fond { height: 10px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.df-barre-fond i { display: block; height: 100%; background: linear-gradient(90deg, #00CFFF, #113679); transition: width .3s ease; }
.df-avance-txt { display: flex; justify-content: space-between; font-size: var(--t-s); color: var(--text-muted); }
.df-groupe h3 { margin: 0 0 8px; font-size: 14px; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.df-groupe h3 small { font-weight: 500; color: var(--text-muted); }
.df-ligne { display: grid; grid-template-columns: 26px 1fr 220px; align-items: start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.df-ligne:last-child { border-bottom: 0; }
.df-ligne.df-ok .df-label { color: var(--text-muted); text-decoration: line-through; }
.df-case input { width: 18px; height: 18px; accent-color: #113679; cursor: pointer; }
.df-label { font-size: var(--t-m); color: var(--text); line-height: 1.35; }
.df-source { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.df-source em { color: #047857; font-style: normal; font-weight: 600; margin-left: 6px; }
.df-note { font-size: var(--t-s); padding: 5px 9px; }
@media (max-width: 1000px) {
  .df-trois { grid-template-columns: 1fr; } .df-trois .df-deux-col { grid-column: auto; }
  .df-ligne { grid-template-columns: 24px 1fr; } .df-note { grid-column: 2; }
  .df-ligne-dossier { grid-template-columns: 1fr 70px; row-gap: 4px; } .df-ld-objet, .df-ld-avance { grid-column: 1 / -1; }
}

/* ═══ Écran de chargement du CRM — Rex allume sa bougie, 2 s minimum (20.09.2026) ═══ */
#ecran-chargement-crm { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% 0%, #1A4590 0%, #0B2A5B 55%, #081E44 100%); }
#ecran-chargement-crm .ecc-boite { display: flex; flex-direction: column; align-items: center; gap: 22px; }



#ecran-chargement-crm.ecc-sort { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
/* ═══ REX CLOUD : Rex porte les classeurs du client ; un seul Rex à l'écran (20.09.2026) ═══ */
.cloud-classeurs { position: absolute; left: 74px; bottom: 34px; width: 86px; height: auto; z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.28)); animation: cloud-flotte 4.5s ease-in-out infinite; }
.cloud-rex { z-index: 2; }
@media (max-width: 1000px) { .cloud-classeurs { width: 66px; left: 58px; bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .cloud-classeurs { animation: none; } }
/* ═══ Espace client : contacter son conseiller, transférer la gestion (js/51) ═══ */
.ec-contacter { grid-column: 1 / -1; justify-self: start; margin-top: 4px; background: none; border: 0; padding: 2px 0;
  font-size: var(--t-s); font-weight: 500; color: #113679; cursor: pointer; }
.ec-contacter:hover { color: #00A8D6; text-decoration: underline; }
.ec-reponse { color: #047857; }
.ec-transfert .ec-suivi { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.ec-suivi-etape { font-size: var(--t-s); font-weight: 500; color: var(--text-muted); }
.ec-suivi-etape.faite { color: #047857; }
.ec-suivi-txt { font-size: var(--t-m); color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
.ec-btn-transfert { display: inline-flex; }
/* Formulaire de transfert */
.ect-etape { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #113679; margin: 14px 0 6px; font-size: 14px; }
.ect-etape b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: #113679; color: #fff; font-size: var(--t-s); }
.ect-aide { font-size: var(--t-s); color: var(--text-muted); margin: 4px 0 8px; line-height: 1.45; }
.ect-contrat { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--t-m); }
.ect-contrat small { color: var(--text-muted); }
.ect-ligne { display: grid; grid-template-columns: 1fr 1fr 130px 32px; gap: 6px; margin-bottom: 6px; }
.ect-suppr { border: 0; background: var(--surface-alt); border-radius: 8px; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.ect-ajout { margin: 4px 0 8px; }
.ect-sous-signature { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.ect-sous-signature small { font-size: var(--t-xs); color: var(--text-muted); }
@media (max-width: 700px) { .ect-ligne { grid-template-columns: 1fr 32px; } }
/* ═══ REX CRM : page Messages clients (js/51) ═══ */
.mcx { display: flex; flex-direction: column; gap: 12px; }
.mcx-onglets { display: flex; gap: 6px; }
.mcx-onglets button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 7px 16px; font-size: var(--t-m); font-weight: 600; color: var(--text-muted); cursor: pointer; }
.mcx-onglets button.actif { background: #113679; border-color: #113679; color: #fff; }
.mcx-onglets button span { background: rgba(0,207,255,.22); color: #0E7490; border-radius: 999px; padding: 1px 8px; font-size: var(--t-xs); }
.mcx-onglets button.actif span { background: #00CFFF; color: #06283F; }
.mcx-filtres { display: flex; gap: 6px; }
.mcx-filtres button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px;
  font-size: var(--t-s); font-weight: 500; color: var(--text-muted); cursor: pointer; }
.mcx-filtres button.actif { background: var(--surface-alt); color: var(--text); border-color: #00CFFF; }
.mcx-liste { display: flex; flex-direction: column; gap: 10px; }
.mcx-msg { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.mcx-msg.neuf { border-color: #00CFFF; box-shadow: 0 0 0 2px rgba(0,207,255,.12); }
.mcx-msg-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcx-nom { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; color: #113679; cursor: pointer; }
.mcx-nom:hover { text-decoration: underline; }
.mcx-date { margin-left: auto; font-size: var(--t-xs); color: var(--text-muted); }
.mcx-badge { font-size: var(--t-xs); font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
.mcx-badge-nouveau { background: rgba(0,207,255,.16); color: #0E7490; }
.mcx-badge-lu { background: rgba(148,163,184,.18); color: #475569; }
.mcx-badge-traite { background: rgba(16,185,129,.14); color: #047857; }
.mcx-contrat { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--text-muted); margin: 6px 0 2px; }
.mcx-libre { font-style: italic; }
.mcx-sujet { font-weight: 600; font-size: var(--t-m); margin-top: 4px; }
.mcx-texte { font-size: var(--t-m); line-height: 1.5; color: var(--text); margin: 6px 0 0; white-space: pre-line; }
.mcx-reponse { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-alt); font-size: var(--t-s); }
.mcx-reponse b { color: #047857; font-size: var(--t-xs); }
.mcx-reponse p { margin: 4px 0 0; line-height: 1.45; }
.mcx-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mcx-cies { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mcx-cie { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-alt); border-radius: 999px;
  padding: 4px 12px; font-size: var(--t-s); color: var(--text); }
.mcx-cie em { font-style: normal; font-size: 10px; font-weight: 500; color: #B45309; }
.mcx-signature { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.mcx-signature img { height: 54px; width: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.mcx-signature small { font-size: var(--t-xs); color: var(--text-muted); }
.mcx-rappel { background: var(--surface-alt); border-radius: 10px; padding: 10px 12px; font-size: var(--t-s); margin-bottom: 10px; }
.mcx-rappel p { margin: 4px 0 0; line-height: 1.45; white-space: pre-line; }

/* ═══ Page de connexion sur téléphone (20.09.2026) : le paysage animé, posé en bas du panneau,
   recouvrait le logo quand le panneau passe en bande horizontale — on le retire sous 860 px et on
   compose une bande lisible, identique en logique pour REX CRM et pour REX CLOUD. ═══ */
@media (max-width: 860px) {
  #login-screen .lp-paysage { display: none; }
  .login-panneau { min-height: 132px; justify-content: center; }
  body.mode-cloud .login-panneau { padding: 26px 20px 16px; min-height: 152px; }
  body.mode-cloud .login-marque-cloud { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  body.mode-cloud .cloud-visuel { width: 118px; height: 76px; flex: none; }
  body.mode-cloud .cloud-nuage { width: 118px; }
  body.mode-cloud .cloud-rex { width: 56px; left: 32px; bottom: 26px; }
  body.mode-cloud .cloud-classeurs { width: 44px; left: 38px; bottom: 17px; }
  body.mode-cloud .cloud-titre { font-size: var(--t-2xl); }
  body.mode-cloud .cloud-sous { display: none; }
  body.mode-cloud .cloud-signature { width: 100%; margin-top: 0; gap: 8px; }
  body.mode-cloud .cloud-signature img { height: 16px; }
  body.mode-cloud .cloud-signature .cloud-ex, body.mode-cloud .cloud-signature .cloud-ex svg { height: 14px; }
}
/* Espace client sur téléphone : pas de menu latéral ni de bouton « trois traits » — le CRM est
   interne, le client n'a rien à ouvrir là (signalé le 20.09.2026, le bouton ne répondait pas). */
body.mode-espace-client .sidebar,
body.mode-espace-client #sidebar,
body.mode-espace-client .mobile-menu-btn,
body.mode-espace-client #sidebar-overlay,
body.mode-espace-client .sidebar-toggle,
body.mode-espace-client #btn-menu-mobile,
body.mode-espace-client .topbar-burger { display: none !important; }
body.mode-espace-client .main-content, body.mode-espace-client #main-content { margin-left: 0 !important; padding-bottom: 24px; }

/* ═══ Suivi des polices d'un transfert de gestion (js/51, 20.09.2026) ═══ */
.mcx-bord { margin-bottom: 4px; }
.mcx-compte { font-size: var(--t-xs); font-weight: 500; color: #0E7490; background: rgba(0,207,255,.14); border-radius: 999px; padding: 2px 9px; }
.mcx-polices { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mcx-police { display: grid; grid-template-columns: 1.5fr 1fr auto; align-items: center; gap: 10px;
  background: var(--surface-alt); border-radius: 10px; padding: 8px 12px; border-left: 3px solid #94A3B8; }
.mcx-police.relance { border-left-color: #F59E0B; }
.mcx-police.recu { border-left-color: #10B981; }
.mcx-police-cie { display: flex; align-items: center; gap: 7px; font-size: var(--t-m); flex-wrap: wrap; }
.mcx-police-cie small { color: var(--text-muted); font-size: var(--t-xs); }
.mcx-police-cie em { font-style: normal; font-size: 10px; font-weight: 500; color: #B45309; background: rgba(245,158,11,.16); border-radius: 999px; padding: 1px 7px; }
.mcx-police-etat { font-size: var(--t-s); color: var(--text-muted); }
.mcx-police.recu .mcx-police-etat { color: #047857; font-weight: 600; }
.mcx-police-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mcx-mini { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 4px 10px;
  font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.mcx-mini:hover { border-color: #00CFFF; color: var(--text); }
.mcx-depot { display: inline-flex; align-items: center; }
@media (max-width: 860px) {
  .mcx-police { grid-template-columns: 1fr; }
  .mcx-police-actions { justify-content: flex-start; }
}

/* ═══ REX CLOUD : page d'explication du transfert de gestion (Rex et sa bulle, 20.09.2026) ═══ */
.ecinfo { position: relative; background: linear-gradient(160deg, #123E86 0%, #0B2A5B 70%); color: #fff;
  border-radius: 20px; padding: 26px 26px 20px; max-width: 620px; width: 100%; box-shadow: 0 24px 60px rgba(4,16,38,.45); }
.ecinfo-fermer { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: rgba(255,255,255,.7);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.ecinfo-fermer:hover { background: rgba(255,255,255,.12); color: #fff; }
.ecinfo-gratuit { display: inline-block; background: #00CFFF; color: #06283F; font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }
.ecinfo h3 { margin: 10px 0 16px; font-size: 22px; font-weight: 600; color: #fff; }
.ecinfo-scene { display: flex; align-items: flex-end; gap: 14px; }
.ecinfo-rex { width: 118px; height: auto; flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.ecinfo-bulle { position: relative; background: #fff; color: #1E293B; border-radius: 18px 18px 18px 4px;
  padding: 16px 18px; font-size: var(--t-m); line-height: 1.55; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.ecinfo-bulle::before { content: ''; position: absolute; left: -9px; bottom: 14px; width: 0; height: 0;
  border: 9px solid transparent; border-right-color: #fff; border-left: 0; }
.ecinfo-bulle p { margin: 0 0 10px; }
.ecinfo-bulle p:last-child { margin: 0; }
.ecinfo-points { display: flex; flex-direction: column; gap: 5px; margin: 16px 0 4px; font-size: var(--t-m); color: #D7E6FF; }
.ecinfo .mdx-actions { margin-top: 14px; }
.fcx-btn-blanc small, .fcx-btn-verre small { display: block; font-size: var(--t-xs); font-weight: 500; opacity: .75; margin-top: 2px; }
@media (max-width: 700px) {
  .ecinfo-scene { flex-direction: column; align-items: center; }
  .ecinfo-rex { width: 92px; }
  .ecinfo-bulle { border-radius: 18px 18px 18px 18px; }
  .ecinfo-bulle::before { left: 50%; top: -9px; bottom: auto; transform: translateX(-50%);
    border: 9px solid transparent; border-bottom-color: #fff; border-top: 0; border-right-color: transparent; }
}

/* Le point entre REX et CRM pulse en turquoise. Sa position ET SA FORME viennent d'une mesure du
   PNG, pas d'une estimation : la tache occupe x 510..549 et y 125..165 sur une image de 990x206,
   soit un centre a 53.48 % / 70.39 %, et elle remplit sa boite a 100 %.
   C'EST DONC UN CARRE, pas un disque. La pastille etait ronde : les quatre coins du carre du PNG,
   blanchis par brightness(0) invert(1), depassaient tout autour — le blanc vu par Jonathan le
   20.09.2026. Elle est un peu plus large que la mesure, pour avaler l'anticrenelage du bord. */
.login-logo-bloc { position: relative; display: inline-block; line-height: 0; }
.login-point { position: absolute; left: 53.48%; top: 70.39%; width: 4.5%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 7%; background: #00CFFF;
  animation: lg-point 2.6s ease-in-out infinite; }
@keyframes lg-point {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(0,207,255,.55); transform: translate(-50%, -50%) scale(1); }
  50%      { box-shadow: 0 0 22px 5px rgba(0,207,255,.95), 0 0 44px 12px rgba(0,207,255,.35); transform: translate(-50%, -50%) scale(1.14); }
}
/* ═══ Connexion : Rex saute, cogne les blocs, les pieces jaillissent (20.09.2026) ═══
   Demande de Jonathan : plutot que de partir en courant, Rex saute. Trois blocs a la Mario au-
   dessus de lui : il en cogne un a chaque saut, le bloc tressaute et une piece en jaillit. Le mot
   REX bascule au premier impact. La connexion n'aboutit qu'une fois l'animation finie
   (attendreFinAnimationRex, js/03), qui attend la fin de lg-sortie sur .login-rex-piste. */
.login-mascotte { width: 138px; }
.login-rex-piste { position: relative; display: inline-block; will-change: transform; margin-top: 86px; --lg-saut: 48px; }
/* la place au-dessus de Rex est reservee en permanence : les blocs ne doivent pas sortir de l ecran */
#login-screen { overflow: hidden; }
/* Le logotype passe en blanc et recoit un retroeclairage : trois ombres portees de rayons
   croissants simulent une lumiere qui vient de DERRIERE le lettrage et deborde sur les cotes,
   plus une ombre sombre et courte dessous pour le decoller du fond. C'est l'ecart entre les
   rayons qui fait l'effet — une seule ombre large donne un flou, trois donnent un halo.
   brightness(0) invert(1) blanchit le PNG sans qu'on ait a livrer une seconde image ; le point
   turquoise, lui, est un element separe (.login-point) et garde donc sa couleur. */
.login-logotype { transform-origin: 8% 85%;
  filter: brightness(0) invert(1)
    drop-shadow(0 0 14px rgba(125, 211, 252, .55))
    drop-shadow(0 0 38px rgba(0, 207, 255, .45))
    drop-shadow(0 0 78px rgba(0, 149, 184, .38))
    drop-shadow(0 4px 9px rgba(3, 12, 30, .55));
  animation: lg-lumiere 6.5s ease-in-out infinite; }
/* La lumiere respire : une source fixe se lit comme un effet, une source qui varie se lit
   comme une lumiere. */
@keyframes lg-lumiere {
  0%, 100% { filter: brightness(0) invert(1)
    drop-shadow(0 0 14px rgba(125,211,252,.55)) drop-shadow(0 0 38px rgba(0,207,255,.45))
    drop-shadow(0 0 78px rgba(0,149,184,.38)) drop-shadow(0 4px 9px rgba(3,12,30,.55)); }
  50%      { filter: brightness(0) invert(1)
    drop-shadow(0 0 18px rgba(125,211,252,.72)) drop-shadow(0 0 52px rgba(0,207,255,.6))
    drop-shadow(0 0 104px rgba(0,149,184,.5)) drop-shadow(0 4px 9px rgba(3,12,30,.55)); }
}
@media (prefers-reduced-motion: reduce) { .login-logotype { animation: none; } }

/* Les blocs restent invisibles tant qu'on n'a pas lance la connexion */
.lg-blocs { position: absolute; left: 50%; bottom: 100%; margin-bottom: var(--lg-saut, 48px); transform: translateX(-50%);
  display: flex; gap: 10px; pointer-events: none; opacity: 0; }
.lg-bloc { position: relative; width: 34px; height: 34px; border-radius: 6px;
  background: linear-gradient(#F6C445, #D99321);
  box-shadow: inset 0 -3px 0 rgba(120,70,10,.45), inset 0 2px 0 rgba(255,245,200,.7), 0 4px 10px rgba(0,0,0,.28);
  border: 2px solid #8A5A12; }
/* le point d'interrogation, dessine en pseudo-element pour ne pas alourdir le HTML */
.lg-bloc::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 19px/1 Georgia, serif; color: #FFF6D8; text-shadow: 0 2px 0 rgba(120,70,10,.6); }
.lg-piece { position: absolute; left: 50%; top: 2px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFF6C4, #F2C230 55%, #B8850F);
  box-shadow: 0 0 10px rgba(255,214,90,.75); opacity: 0; }
.lg-piece::after { content: ''; position: absolute; inset: 5px 7px; border-radius: 50%; border: 1.5px solid rgba(150,96,10,.55); }

#login-screen.lp-go .lg-blocs { opacity: 1; }
#login-screen.lp-go .login-logotype { animation: lg-bascule .52s .30s cubic-bezier(.3,1.5,.5,1) both; }
#login-screen.lp-go .login-mascotte { animation: lg-saut 1.35s cubic-bezier(.3,.1,.5,1) both; transform-origin: 50% 100%; }
#login-screen.lp-go .login-rex-piste { animation: lg-sortie .45s 1.30s ease-in forwards; }

/* Le bloc touche tressaute : chaque bloc a son impact, decale dans le temps */
#login-screen.lp-go .lg-bloc:nth-child(2) { animation: lg-cogne .26s .30s ease-out; }
#login-screen.lp-go .lg-bloc:nth-child(1) { animation: lg-cogne .26s .78s ease-out; }
#login-screen.lp-go .lg-bloc:nth-child(3) { animation: lg-cogne .26s 1.02s ease-out; }
#login-screen.lp-go .lg-bloc:nth-child(2) .lg-piece { animation: lg-jaillit .75s .30s ease-out both; }
#login-screen.lp-go .lg-bloc:nth-child(1) .lg-piece { animation: lg-jaillit .75s .78s ease-out both; }
#login-screen.lp-go .lg-bloc:nth-child(3) .lg-piece { animation: lg-jaillit .75s 1.02s ease-out both; }

@keyframes lg-bascule {
  0% { transform: rotate(0deg); }
  28% { transform: rotate(-7deg); }
  58% { transform: rotate(3.5deg); }
  100% { transform: rotate(0deg); }
}
/* Un grand saut, puis deux plus courts : flechir, monter, retomber, ecraser a l'atterrissage */
/* Le saut est cale sur la hauteur des blocs : au sommet, la tete touche leur dessous,
   elle ne les traverse pas. --lg-saut sert aux deux, d'ou une seule valeur a regler. */
@keyframes lg-saut {
  0%   { transform: translateY(0) scale(1, 1); }
  8%   { transform: translateY(4px) scale(1.06, .92); }
  24%  { transform: translateY(calc(var(--lg-saut, 48px) * -0.82)) scale(.95, 1.06); }
  30%  { transform: translateY(calc(var(--lg-saut, 48px) * -1)) scale(.97, 1.03); }
  40%  { transform: translateY(calc(var(--lg-saut, 48px) * -0.3)) scale(1, 1); }
  46%  { transform: translateY(2px) scale(1.08, .9); }
  52%  { transform: translateY(0) scale(1, 1); }
  62%  { transform: translateY(calc(var(--lg-saut, 48px) * -1)) scale(.96, 1.05); }
  70%  { transform: translateY(-2px) scale(1.05, .93); }
  78%  { transform: translateY(calc(var(--lg-saut, 48px) * -1)) scale(.96, 1.05); }
  88%  { transform: translateY(0) scale(1.05, .93); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes lg-cogne {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-11px); }
  70% { transform: translateY(2px); }
}
@keyframes lg-jaillit {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  12%  { opacity: 1; transform: translateY(-22px) scaleX(.35); }
  34%  { opacity: 1; transform: translateY(-44px) scaleX(1); }
  56%  { opacity: 1; transform: translateY(-52px) scaleX(.35); }
  100% { opacity: 0; transform: translateY(-16px) scaleX(1); }
}
@keyframes lg-sortie { to { transform: translateY(-8px) scale(.9); opacity: 0; } }

@media (max-width: 860px) {
  .login-mascotte { width: 58px; }
  .login-rex-piste { margin-top: 52px; --lg-saut: 30px; }
  .lg-bloc { width: 22px; height: 22px; border-radius: 5px; }
  .lg-bloc::after { font-size: var(--t-m); }
  .lg-piece { width: 13px; height: 13px; margin-left: -6.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #login-screen.lp-go .login-logotype, #login-screen.lp-go .login-mascotte,
  #login-screen.lp-go .login-rex-piste, #login-screen.lp-go .lg-bloc,
  #login-screen.lp-go .lg-piece, .login-point { animation: none !important; }
  .lg-blocs { display: none; }
}

/* ═══ REX CLOUD : navigation par onglets et services du client (js/52, 20.09.2026) ═══ */
.ec-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.ec-onglets button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  background: var(--surface); border-radius: 999px; padding: 8px 16px; font-size: var(--t-m); font-weight: 600;
  color: var(--text-muted); cursor: pointer; }
.ec-onglets button.actif { background: #113679; border-color: #113679; color: #fff; }
.ec-onglets button em { font-style: normal; font-size: var(--t-xs); font-weight: 500; background: #F59E0B; color: #fff;
  border-radius: 999px; padding: 1px 7px; }
.ec-onglets button.actif em { background: #00CFFF; color: #06283F; }
.ec-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ec-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px 16px; cursor: pointer; }
.ec-tuile:hover { border-color: #00CFFF; box-shadow: 0 6px 18px rgba(17,54,121,.12); transform: translateY(-1px); }
.ec-tuile span { font-size: 22px; }
.ec-tuile b { font-size: 14px; color: var(--text); }
.ec-tuile small { font-size: var(--t-s); color: var(--text-muted); line-height: 1.4; }
.ec-actions-contrat { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.ec-actions-contrat button { background: none; border: 0; padding: 2px 0; font-size: var(--t-s); font-weight: 500;
  color: #113679; cursor: pointer; }
.ec-actions-contrat button:hover { color: #00A8D6; text-decoration: underline; }
.ec-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ec-sinistres { display: flex; flex-direction: column; gap: 10px; }
.ec-sinistre { border: 1px solid var(--border); border-left: 3px solid #94A3B8; border-radius: 12px; padding: 12px 14px; }
.ec-sinistre.declare { border-left-color: #F59E0B; }
.ec-sinistre.transmis, .ec-sinistre.en_cours { border-left-color: #00CFFF; }
.ec-sinistre.regle { border-left-color: #10B981; }
.ec-sinistre.refuse, .ec-sinistre.annule { border-left-color: #EF4444; }
.ec-sin-tete { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ec-sin-tete b { font-size: 14px; }
.ec-sin-etat { font-size: var(--t-xs); font-weight: 500; border-radius: 999px; padding: 2px 10px;
  background: var(--surface-alt); color: var(--text-muted); }
.ec-sinistre p { margin: 8px 0 4px; font-size: var(--t-m); line-height: 1.5; white-space: pre-line; }
.ec-sinistre small { font-size: var(--t-xs); color: var(--text-muted); display: block; }
.ec-sin-ref { color: #047857 !important; font-weight: 600; }
.ec-co-carte { display: flex; flex-direction: column; gap: 14px; }
.ec-co-ident { display: flex; align-items: center; gap: 14px; }
.ec-co-initiales { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  border-radius: 50%; background: linear-gradient(145deg, #113679, #00CFFF); color: #fff; font-weight: 600; font-size: 20px; }
.ec-co-ident b { display: block; font-size: 16px; }
.ec-co-ident small { display: block; font-size: var(--t-s); color: var(--text-muted); }
.ec-co-liens { display: flex; gap: 18px; flex-wrap: wrap; }
.ec-co-liens a { font-size: 14px; font-weight: 600; color: #113679; text-decoration: none; }
.ec-co-liens a:hover { text-decoration: underline; }
.ec-co-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .ec-deux { grid-template-columns: 1fr; }
  .ec-onglets { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ec-onglets button { white-space: nowrap; }
}
/* Retour au CRM depuis la page de connexion client (lien discret sous le formulaire) */
.login-bascule { margin-top: 14px; font-size: var(--t-s); color: #8A94A8; }
.login-bascule button { background: none; border: 0; padding: 0; font-size: var(--t-s); font-weight: 500;
  color: #113679; cursor: pointer; text-decoration: underline; }

/* ═══ Tableau de bord — vue « Essentiel » (20.09.2026) : lecture simplifiée et aérée ═══
   Peu d'éléments, beaucoup de blanc, de grands chiffres : ce qu'il faut voir en dix secondes. */
.dbx-zen { display: flex; flex-direction: column; gap: 28px; margin-top: 22px; }
.dbx-zen-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.dbx-zen-carte { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 26px 24px; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dbx-zen-carte:hover { transform: translateY(-2px); border-color: #00CFFF; box-shadow: 0 12px 30px rgba(17,54,121,.12); }
.dbx-zen-valeur { font-size: var(--t-titre); font-weight: 300; letter-spacing: -0.02em; color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.dbx-zen-label { font-size: var(--t-m); font-weight: 600; color: var(--text); margin-top: 6px; }
.dbx-zen-sous { font-size: var(--t-s); color: var(--text-muted); }
.dbx-zen-bloc { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px; }
.dbx-zen-bloc h2 { margin: 0 0 18px; font-size: var(--t-l); font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 10px; }
.dbx-zen-bloc h2 em { font-style: normal; font-size: var(--t-xs); font-weight: 500; color: #B91C1C;
  background: rgba(239,68,68,.12); border-radius: 999px; padding: 2px 10px; }
.dbx-zen-liste { display: flex; flex-direction: column; gap: 10px; }
.dbx-zen-liste .dbx-action { padding: 12px 4px; border-bottom: 1px solid var(--border); }
.dbx-zen-liste .dbx-action:last-child { border-bottom: 0; }
.dbx-zen-liste .dbx-action-titre { font-size: var(--t-l); }
.dbx-zen-lien { margin-top: 14px; background: none; border: 0; padding: 0; font-size: var(--t-m); font-weight: 600;
  color: #113679; cursor: pointer; }
.dbx-zen-lien:hover { color: #00A8D6; text-decoration: underline; }
.dbx-zen-vide { margin: 0; font-size: var(--t-m); color: var(--text-muted); line-height: 1.6; }
.dbx-zen-rdv { display: flex; flex-direction: column; }
.dbx-zen-ligne { display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 14px;
  padding: 14px 4px; border-bottom: 1px solid var(--border); }
.dbx-zen-ligne:last-child { border-bottom: 0; }
.dbx-zen-heure { font-size: 16px; font-weight: 600; color: #113679; font-variant-numeric: tabular-nums; }
.dbx-zen-corps b { display: block; font-size: 14px; }
.dbx-zen-corps small { display: block; font-size: var(--t-s); color: var(--text-muted); }
.dbx-zen-fleche { background: none; border: 0; font-size: 16px; color: var(--text-muted); cursor: pointer; }
.dbx-zen-fleche:hover { color: #113679; }
.dbx-zen-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; }
@media (max-width: 860px) {
  .dbx-zen { gap: 18px; }
  .dbx-zen-bloc { padding: 20px 18px; }
  .dbx-zen-carte { padding: 20px; }
  .dbx-zen-valeur { font-size: 28px; }
}

/* Polices disponibles dans l'espace client (js/52) */
.ec-polices { display: flex; flex-direction: column; gap: 8px; }
.ec-police { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-alt); border-radius: 12px; padding: 10px 14px; }
.ec-police-cie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-m); }
.ec-police-cie small { color: var(--text-muted); font-size: var(--t-s); }
.ec-doc-dispo { color: #047857 !important; }
/* Mentions legales de l'espace client (js/52) */
.ec-pied-liens { margin: 8px 0 4px; }
.ec-pied-liens button { background: none; border: 0; padding: 0; font-size: var(--t-s); color: inherit;
  opacity: .85; text-decoration: underline; cursor: pointer; }
.ec-legal h4 { margin: 16px 0 6px; font-size: var(--t-m); color: var(--accent); }
.ec-legal p { margin: 0 0 8px; font-size: var(--t-m); line-height: 1.55; color: var(--text); }
/* ═══ Lecture des décomptes scannés (js/53, 20.09.2026) ═══ */
.ocr { display: flex; flex-direction: column; gap: 14px; }
.ocr-depot { cursor: pointer; display: inline-flex; align-items: center; }
.ocr-etat { font-size: var(--t-s); color: var(--text-muted); min-height: 18px; }
.ocr-etat.ok { color: #047857; font-weight: 600; }
.ocr-etat.alerte { color: #B91C1C; font-weight: 600; }
.ocr-resume-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ocr-resume-tete b { font-size: var(--t-l); }
.ocr-resume-tete small { display: block; font-size: var(--t-s); color: var(--text-muted); }
.ocr-confiance { font-size: var(--t-xs); font-weight: 500; border-radius: 999px; padding: 3px 10px;
  background: var(--surface-alt); color: var(--text-muted); white-space: nowrap; }
.ocr-confiance.haute { background: rgba(16,185,129,.14); color: #047857; }
.ocr-confiance.basse { background: rgba(239,68,68,.12); color: #B91C1C; }
.ocr-compteurs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; font-size: var(--t-s); }
.ocr-compteurs span { background: var(--surface-alt); border-radius: 999px; padding: 4px 12px; color: var(--text-muted); }
.ocr-compteurs .ok { background: rgba(16,185,129,.14); color: #047857; font-weight: 600; }
.ocr-compteurs .attention { background: rgba(245,158,11,.16); color: #B45309; font-weight: 600; }
.ocr-compteurs .total { background: rgba(17,54,121,.12); color: #113679; font-weight: 600; }
.ocr-remarques { font-size: var(--t-s); color: #B45309; margin: 8px 0 0; line-height: 1.5; }
.ocr-actions-globales { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ocr-lignes { display: flex; flex-direction: column; gap: 6px; }
.ocr-ligne { display: grid; grid-template-columns: 1.6fr 130px 150px 1fr; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-alt); border-left: 3px solid #94A3B8; }
.ocr-ligne.contrat { border-left-color: #10B981; }
.ocr-ligne.police_a_completer { border-left-color: #F59E0B; }
.ocr-ligne.inconnu { border-left-color: #EF4444; }
.ocr-l-principal b { font-size: var(--t-m); }
.ocr-l-principal small { display: block; font-size: var(--t-xs); color: var(--text-muted); }
.ocr-l-lien { color: #113679 !important; font-weight: 600; }
.ocr-l-montant { text-align: right; font-weight: 600; font-size: var(--t-m); font-variant-numeric: tabular-nums; }
.ocr-l-montant small { display: block; font-weight: 500; font-size: var(--t-xs); color: var(--text-muted); }
.ocr-badge { font-size: var(--t-xs); font-weight: 500; border-radius: 999px; padding: 2px 10px;
  background: var(--surface); color: var(--text-muted); white-space: nowrap; }
.ocr-badge.ok { background: rgba(16,185,129,.14); color: #047857; }
.ocr-badge.attention { background: rgba(245,158,11,.16); color: #B45309; }
.ocr-badge.alerte { background: rgba(239,68,68,.12); color: #B91C1C; }
.ocr-l-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ocr-l-actions button { border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 4px 10px; font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); cursor: pointer; }
.ocr-l-actions button:hover { border-color: #00CFFF; color: var(--text); }
.ocr-l-actions .ocr-appliquer { color: #B45309; border-color: rgba(245,158,11,.4); }
@media (max-width: 1000px) {
  .ocr-ligne { grid-template-columns: 1fr 110px; }
  .ocr-l-etat, .ocr-l-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ═══ Préparation de la synchronisation EcoHub (js/54, 20.09.2026) ═══ */
.ehs { display: flex; flex-direction: column; gap: 12px; }
.ehs-compagnie .dbx-carte-tete h2 { display: flex; align-items: center; gap: 8px; }
.ehs-conv { font-size: var(--t-xs); font-weight: 500; border-radius: 999px; padding: 3px 12px;
  background: var(--surface-alt); color: var(--text-muted); }
.ehs-conv.ok { background: rgba(16,185,129,.14); color: #047857; }
.ehs-conv.attente { background: rgba(245,158,11,.16); color: #B45309; }
.ehs-conv.alerte { background: rgba(239,68,68,.12); color: #B91C1C; }
.ehs-remarque { font-size: var(--t-s); color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.ehs-mesures { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--t-s);
  color: var(--text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ehs-mesures b { color: var(--text); font-size: 14px; }
.ehs-mesures .ok b { color: #047857; }
.ehs-mesures .alerte b { color: #B91C1C; }
.ehs-mesures .attention b { color: #B45309; }
.ehs-barre { flex: 1; min-width: 120px; height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.ehs-barre i { display: block; height: 100%; background: linear-gradient(90deg, #00CFFF, #113679); }
.ehs-liste { margin-top: 12px; }
.ehs-liste-titre { font-size: var(--t-s); font-weight: 500; color: #B45309; margin-bottom: 6px; }
.ehs-ligne { display: grid; grid-template-columns: 1.2fr 1.6fr 110px auto; gap: 12px; align-items: center;
  padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: var(--t-m); }
.ehs-ligne:last-child { border-bottom: 0; }
.ehs-nom { background: none; border: 0; padding: 0; text-align: left; font-size: var(--t-m); font-weight: 600;
  color: #113679; cursor: pointer; }
.ehs-nom:hover { text-decoration: underline; }
.ehs-produit { color: var(--text-muted); font-size: var(--t-s); }
.ehs-prime { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--t-s); }
.ehs-action { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 4px 10px;
  font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ehs-action:hover { border-color: #00CFFF; color: var(--text); }
.ehs-plus { font-size: var(--t-s); color: var(--text-muted); padding-top: 6px; }
@media (max-width: 900px) {
  .ehs-ligne { grid-template-columns: 1fr auto; }
  .ehs-produit, .ehs-prime { grid-column: 1 / -1; }
}

    /* Badge « espace client » sur la fiche (20.09.2026) : etat de l'acces REX CLOUD en un coup d'oeil */
    .ec-badge { gap: 6px; }
    .ec-badge.on { background: rgba(0,207,255,0.18); border-color: rgba(0,207,255,0.5); color: #fff; font-weight: 600; }
    .ec-badge.on.attente { background: rgba(245,158,11,0.18); border-color: rgba(251,191,36,0.45); color: #FDE68A; }
    .ec-badge.suspendu { background: rgba(148,163,184,0.16); border-color: rgba(148,163,184,0.35); color: #E2E8F0; }
    .ec-badge-sous { font-weight: 400; opacity: .72; font-size: var(--t-xs); padding-left: 6px; margin-left: 2px; border-left: 1px solid currentColor; }