/* ============================================================
   TW ATLAS — Design system partagé Plateforme TW
   Source canonique — voir aussi app/assets/css/tw-atlas.css
   (copie identique nécessaire : app.* et portail.* sont deux
   webroots/domaines distincts, un seul <link> ne peut pas
   couvrir les deux. Toute modification doit être répercutée
   dans les DEUX fichiers.)
   ============================================================ */

:root{
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-2:#EEF0F6; --surface-3:#E4E7F0;
  --border:#DEE1EA; --border-2:#C7CBDA;
  --text:#12131A; --text-2:#565B6E; --text-3:#8B90A4;
  --accent:#4B4FD1; --accent-ink:#FFFFFF; --accent-soft:#ECEDFB; --accent-soft-border:#CDD0F5;
  --success:#1E8F5F; --success-soft:#E4F5EC; --success-border:#BCE3D1;
  --warning:#A8710A; --warning-soft:#FBF0DC; --warning-border:#EDD199;
  --danger:#C23B34;  --danger-soft:#FBE9E8;  --danger-border:#F0BEBB;
  --input-bg:#FFFFFF;
  --shadow: 0 1px 2px rgba(20,22,40,.04), 0 8px 24px -12px rgba(20,22,40,.10);
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
/* ── Alias de compatibilité ──
   Pages pas encore migrées vers les nouveaux noms de tokens.
   Se résolvent dynamiquement vers le thème actif (aucune
   duplication nécessaire par thème). À supprimer une fois
   tous les modules migrés. */
:root{
  --text2:var(--text-2); --text3:var(--text-3); --border2:var(--border-2); --surface2:var(--surface-2);
  --radius:var(--r-sm); --font:var(--sans);
  --green:var(--success); --green-bg:var(--success-soft); --green-border:var(--success-border);
  --red:var(--danger); --red-bg:var(--danger-soft); --red-border:var(--danger-border);
  --amber:var(--warning); --amber-bg:var(--warning-soft); --amber-border:var(--warning-border);
  --blue:var(--accent); --blue-bg:var(--accent-soft);
  --accent-dim:var(--surface-2);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0E15; --surface:#151823; --surface-2:#1D2130; --surface-3:#242940;
    --border:#2A2F42; --border-2:#383E58;
    --text:#EDEEF4; --text-2:#A3A8C0; --text-3:#6C7290;
    --accent:#8B90FF; --accent-ink:#0C0E15; --accent-soft:#1E2140; --accent-soft-border:#3A3F72;
    --success:#4ADE9A; --success-soft:#123324; --success-border:#1F5C40;
    --warning:#E3A63D; --warning-soft:#3A2A0C; --warning-border:#6B4E17;
    --danger:#F2695F;  --danger-soft:#3A1613;  --danger-border:#6B2621;
    --input-bg:#0D0F17;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0E15; --surface:#151823; --surface-2:#1D2130; --surface-3:#242940;
  --border:#2A2F42; --border-2:#383E58;
  --text:#EDEEF4; --text-2:#A3A8C0; --text-3:#6C7290;
  --accent:#8B90FF; --accent-ink:#0C0E15; --accent-soft:#1E2140; --accent-soft-border:#3A3F72;
  --success:#4ADE9A; --success-soft:#123324; --success-border:#1F5C40;
  --warning:#E3A63D; --warning-soft:#3A2A0C; --warning-border:#6B4E17;
  --danger:#F2695F;  --danger-soft:#3A1613;  --danger-border:#6B2621;
  --input-bg:#0D0F17;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  min-height:100dvh; -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

/* ── Mise en page carte de connexion / activation ── */
.auth-shell{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:2.25rem 2rem; width:100%; max-width:420px; box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem}
.brand-mark{width:22px; height:22px; color:var(--accent); flex-shrink:0}
.brand-name{font-size:1.375rem; font-weight:700; letter-spacing:-.02em; color:var(--text)}
.brand-name em{color:var(--text-3); font-weight:400; font-style:normal}
.badge{
  display:inline-flex; align-items:center; font-size:.625rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-soft-border);
  padding:.25rem .55rem; border-radius:var(--r-sm); margin-left:.5rem; vertical-align:middle;
}
/* Variantes de statut — utilisées seules (sans margin-left) dans les tableaux */
.badge-green,.badge-success{background:var(--success-soft); color:var(--success); border-color:var(--success-border)}
.badge-red,.badge-danger{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-border)}
.badge-amber,.badge-warning{background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border)}
.badge-blue,.badge-info{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft-border)}
.badge-gray,.badge-neutral{background:var(--surface-2); color:var(--text-2); border-color:var(--border)}
td .badge,.section .badge{margin-left:0}
.tagline{font-size:.8438rem; color:var(--text-2); margin-bottom:1.75rem}

/* ── Alertes ── */
.alert{
  display:flex; align-items:flex-start; gap:.55rem; font-size:.8125rem; line-height:1.45;
  padding:.7rem .875rem; border-radius:var(--r-md); border:1px solid; margin-bottom:1.15rem;
}
.alert svg{width:15px; height:15px; flex-shrink:0; margin-top:1px}
.alert-error{background:var(--danger-soft); border-color:var(--danger-border); color:var(--danger)}
.alert-info{background:var(--accent-soft); border-color:var(--accent-soft-border); color:var(--accent)}
.alert-success{background:var(--success-soft); border-color:var(--success-border); color:var(--success)}
.alert-warning{background:var(--warning-soft); border-color:var(--warning-border); color:var(--warning)}

/* ── Formulaire ── */
.field{margin-bottom:1rem}
.field label{display:block; font-size:.8125rem; font-weight:600; color:var(--text-2); margin-bottom:.4rem}
.input-wrap{position:relative}
input[type="email"],input[type="password"],input[type="text"]{
  display:block; width:100%; background:var(--input-bg); border:1px solid var(--border-2);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:.9375rem;
  padding:.65rem .875rem; outline:none; -webkit-appearance:none; transition:border-color .15s, box-shadow .15s;
}
.input-wrap input{padding-right:2.75rem}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.toggle-pwd{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
  color:var(--text-3); border-radius:var(--r-sm); transition:color .15s, background .15s;
}
.toggle-pwd:hover{color:var(--text-2); background:var(--surface-2)}
.toggle-pwd svg{width:17px; height:17px}

/* ── Boutons ──
   .btn = base (compact, inline). Ajouter .btn-block pour un bouton pleine
   largeur (formulaires de connexion/activation). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background:transparent; color:var(--text); border:1px solid transparent; border-radius:var(--r-sm);
  font-family:var(--sans); font-size:.8125rem; font-weight:600; line-height:1.2;
  padding:.55rem .9rem; cursor:pointer; text-decoration:none;
  transition:filter .15s, background .15s, border-color .15s, color .15s;
}
.btn svg{width:15px; height:15px; flex-shrink:0}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent; color:var(--text-2); border-color:var(--border-2)}
.btn-ghost:hover{color:var(--text); background:var(--surface-2)}
.btn-danger{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-border)}
.btn-danger:hover{filter:brightness(1.05)}
.btn-success{background:var(--success); color:#fff; border-color:var(--success)}
.btn-success:hover{filter:brightness(1.07)}
.btn-warning{background:var(--warning); color:#fff; border-color:var(--warning)}
.btn-warning:hover{filter:brightness(1.07)}
.btn-sm{font-size:.75rem; padding:.35rem .7rem}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; filter:none; transform:none}
.btn-block{display:flex; width:100%; font-size:.9375rem; padding:.75rem 1rem; margin-top:1.5rem}

/* ── Pied de carte ── */
.card-footer{
  margin-top:1.5rem; padding-top:1.15rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}
.footer-text{font-size:.6875rem; color:var(--text-3)}
.footer-secure{display:flex; align-items:center; gap:.3rem; font-size:.6875rem; color:var(--text-3)}
.footer-secure svg{width:12px; height:12px}

/* ── Sélecteur de thème ── */
.theme-toggle{
  position:fixed; top:1rem; right:1rem; display:flex; align-items:center; gap:.2rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:.2rem; box-shadow:var(--shadow); z-index:100;
}
.theme-btn{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:none;
  background:none; cursor:pointer; color:var(--text-3); border-radius:var(--r-pill); transition:background .15s, color .15s;
}
.theme-btn svg{width:15px; height:15px}
.theme-btn.active{background:var(--surface-2); color:var(--text)}

/* ── Barre de force mot de passe (activation) ── */
.strength-bar{height:3px; border-radius:2px; background:var(--surface-3); margin-top:.5rem; overflow:hidden}
.strength-fill{height:100%; width:0; border-radius:2px; transition:width .3s, background .3s}
.strength-label{font-size:.6875rem; color:var(--text-3); margin-top:.375rem}
.rules{margin-top:.7rem; display:flex; flex-direction:column; gap:.3rem}
.rule{font-size:.6875rem; color:var(--text-3); display:flex; align-items:center; gap:.4rem}
.rule.ok{color:var(--success)}
.rule-dot{width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0}

/* ── États info compte (invitation) ── */
.account-info{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:.85rem 1rem; margin-bottom:1.5rem}
.account-info-row{display:flex; justify-content:space-between; align-items:center; font-size:.8125rem}
.account-info-row + .account-info-row{margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border)}
.account-label{color:var(--text-3)}
.account-value{color:var(--text); font-weight:600}

.state{text-align:center; padding:.75rem 0}
.state-icon{width:44px; height:44px; margin:0 auto 1rem; color:var(--text-3)}
.state-icon.success{color:var(--success)}
.state-icon.error{color:var(--danger)}
.state-title{font-size:1rem; font-weight:700; margin-bottom:.5rem}
.state-text{font-size:.8125rem; color:var(--text-2); line-height:1.6}
.btn-login{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.35rem; padding:.6rem 1.15rem;
  background:var(--success-soft); color:var(--success); border:1px solid var(--success-border);
  border-radius:var(--r-sm); font-family:var(--sans); font-size:.875rem; font-weight:600;
  text-decoration:none; transition:filter .15s;
}
.btn-login:hover{filter:brightness(1.05)}

/* ============================================================
   Coquille applicative (header + sidebar) — espace client,
   portail admin/dispatch. Un seul jeu de composants pour tous
   les tableaux de bord internes.
   ============================================================ */
.shell{display:grid; grid-template-columns:var(--sidebar-w,220px) 1fr; grid-template-rows:var(--header-h,52px) 1fr; min-height:100vh}
.shell-header{
  grid-column:1/-1; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1.25rem; gap:1rem; position:sticky; top:0; z-index:90;
}
.shell-header .brand-name{font-size:1rem}
.shell-user{font-size:.75rem; color:var(--text-2)}
.shell-user strong{color:var(--text); font-weight:600}
.shell-logout{
  display:flex; align-items:center; gap:.35rem; font-size:.75rem; color:var(--text-3); text-decoration:none;
  padding:.4rem .75rem; border:1px solid var(--border); border-radius:var(--r-sm); transition:all .15s;
}
.shell-logout:hover{color:var(--text); border-color:var(--border-2)}
.shell-logout svg{width:13px; height:13px}

.shell-sidebar{background:var(--surface); border-right:1px solid var(--border); padding:1rem 0; display:flex; flex-direction:column}
.nav-item{
  display:flex; align-items:center; gap:.65rem; padding:.55rem 1.1rem; color:var(--text-2); text-decoration:none;
  font-size:.8125rem; font-weight:500; border-left:2px solid transparent; transition:all .15s;
}
.nav-item svg{width:16px; height:16px; flex-shrink:0}
.nav-item:hover{background:var(--surface-2); color:var(--text)}
.nav-item.active{background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent)}
.nav-item.highlight{color:var(--accent)}
.nav-sep{height:1px; background:var(--border); margin:.5rem 1.1rem}

.shell-main{overflow-y:auto; padding:1.75rem}
.page-header{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap}
.page-title{font-size:1.25rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.25rem}
.page-subtitle{font-size:.8438rem; color:var(--text-2)}

@media(max-width:768px){
  .shell{grid-template-columns:1fr}
  .shell-sidebar{display:none}
}

/* ── KPI ── */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.85rem; margin-bottom:1.5rem}
.kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.1rem 1.2rem}
.kpi-label{font-size:.6875rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.45rem}
.kpi-value{font-size:1.625rem; font-weight:700; color:var(--text); line-height:1; font-family:var(--mono); font-variant-numeric:tabular-nums}
.kpi-sub{font-size:.6875rem; color:var(--text-3); margin-top:.45rem}
.kpi-card.success .kpi-value{color:var(--success)}
.kpi-card.warning .kpi-value{color:var(--warning)}
.kpi-card.danger .kpi-value{color:var(--danger)}
.kpi-card.accent .kpi-value{color:var(--accent)}
/* Alias de compatibilité (anciennes classes couleur admin) */
.kpi-card.green .kpi-value{color:var(--success)}
.kpi-card.red .kpi-value{color:var(--danger)}
.kpi-card.amber .kpi-value{color:var(--warning)}
.kpi-card.blue .kpi-value{color:var(--accent)}

/* ── Sections / tableaux ── */
.section{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:1.25rem; overflow:hidden}
.section-header{display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.1rem; border-bottom:1px solid var(--border)}
.section-title{font-size:.8438rem; font-weight:600}
table{width:100%; border-collapse:collapse; font-size:.8438rem}
th{font-size:.6875rem; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; padding:.7rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); background:var(--surface-2)}
td{color:var(--text-2); padding:.7rem 1.1rem; border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td.primary{color:var(--text); font-weight:600}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right}

/* ── Formulaires (portail) ── */
.form-group{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
.form-group label{font-size:.75rem; font-weight:600; color:var(--text-2)}
.form-group input,.form-group select,.form-group textarea{
  background:var(--input-bg); border:1px solid var(--border-2); border-radius:var(--r-sm); color:var(--text);
  font-family:var(--sans); font-size:.8438rem; padding:.55rem .75rem; outline:none; transition:border-color .15s, box-shadow .15s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem}

/* ── État vide ── */
.empty{display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding:3rem 1rem; color:var(--text-2); font-size:.8125rem}
.empty svg{width:32px; height:32px; color:var(--text-3)}

/* ============================================================
   Composants mobiles — PWA Driver (et réutilisables ailleurs)
   ============================================================ */

/* Carte mission / trajet A→B */
.mission{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.1rem; box-shadow:var(--shadow)}
.mission-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; gap:.5rem}
.mission-ref{font-family:var(--mono); font-size:.8125rem; color:var(--text-2)}
.route{display:flex; flex-direction:column}
.route-row{display:flex; gap:.7rem; position:relative; padding-bottom:.9rem}
.route-row:last-child{padding-bottom:0}
.route-row:not(:last-child)::after{content:''; position:absolute; left:9px; top:20px; bottom:-4px; width:1px; background:var(--border-2)}
.dot{width:19px; height:19px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.625rem; font-weight:700; color:#fff; z-index:1}
.dot-a{background:var(--success)} .dot-b{background:var(--danger)}
.route-addr{font-size:.8438rem; padding-top:1px; color:var(--text)}
.mission-foot{display:flex; justify-content:space-between; align-items:center; padding-top:.9rem; border-top:1px solid var(--border); margin-top:.9rem}
.mission-client{font-size:.8125rem; color:var(--text-2)}
.mission-price{font-family:var(--mono); font-weight:600; font-size:.9375rem; color:var(--text)}

/* Toast */
.toast{
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text); color:var(--bg); padding:.65rem 1.25rem; border-radius:var(--r-pill);
  font-size:.8125rem; font-weight:500; opacity:0; transition:all .25s; pointer-events:none;
  white-space:nowrap; z-index:999; box-shadow:var(--shadow);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--success); color:var(--accent-ink)}
.toast.error{background:var(--danger); color:#fff}

/* Onglets */
.tabs{display:flex; border-bottom:1px solid var(--border)}
.tab-btn{flex:1; padding:.7rem; text-align:center; font-size:.8125rem; font-weight:500; color:var(--text-2); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; font-family:var(--sans)}
.tab-btn.active{color:var(--text); border-bottom-color:var(--accent)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* Contrôle segmenté (statut, langue) */
.segmented{display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; gap:2px}
.segmented-btn{flex:1; padding:.4rem .75rem; border:none; border-radius:var(--r-pill); font-family:var(--sans); font-size:.75rem; font-weight:600; cursor:pointer; background:none; color:var(--text-2); transition:all .2s; white-space:nowrap}
.segmented-btn.on{background:var(--success); color:#fff}
.segmented-btn.off{background:var(--text-3); color:var(--bg)}
.segmented-btn.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}

/* Barre de navigation mobile (bas d'écran) */
.tabbar{background:var(--surface); border-top:1px solid var(--border); display:flex; position:sticky; bottom:0; padding-bottom:env(safe-area-inset-bottom); z-index:50}
.tabbar-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.7rem .5rem; font-size:.625rem; color:var(--text-3); cursor:pointer; border:none; background:none; font-family:var(--sans); text-decoration:none; transition:color .15s}
.tabbar-item svg{width:19px; height:19px}
.tabbar-item.active{color:var(--accent)}

/* En-tête mobile compact */
.mobile-header{background:var(--surface); border-bottom:1px solid var(--border); padding:.95rem 1.1rem; position:sticky; top:0; z-index:60}
.mobile-header-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; gap:.5rem}
.mobile-title{font-size:.9375rem; font-weight:700}
.mobile-sub{font-size:.75rem; color:var(--text-2)}

/* Timeline d'étapes (mission) */
.steps{padding:1rem 1.1rem}
.step{display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--border); align-items:flex-start}
.step:last-child{border-bottom:none}
.step-icon{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9375rem; font-weight:700; flex-shrink:0; border:2px solid var(--border); color:var(--text-3)}
.step-icon svg{width:17px; height:17px}
.step-icon.done{background:var(--success-soft); border-color:var(--success-border); color:var(--success)}
.step-icon.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); animation:pulse-ring 2s infinite}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 var(--accent-soft-border)} 50%{box-shadow:0 0 0 6px transparent}}
.step-content{flex:1; min-width:0}
.step-title{font-size:.875rem; font-weight:700; margin-bottom:.3rem}
.step-addr{font-size:.8125rem; color:var(--text-2); line-height:1.4; margin-bottom:.55rem}
.step-action{display:flex; gap:.5rem; flex-wrap:wrap}
.step-done-label{font-size:.75rem; color:var(--success); font-weight:600; display:flex; align-items:center; gap:.3rem}
.step-done-label svg{width:14px; height:14px}

/* Carte d'infos (client, compte) */
.info-card{background:var(--surface-2); border-radius:var(--r-md); padding:.9rem 1rem; margin:0 1.1rem 1rem}
.info-card-title{font-size:.6875rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem}
.info-row{display:flex; justify-content:space-between; gap:.75rem; font-size:.8125rem; padding:.2rem 0}
.info-row-label{color:var(--text-2)}
.info-row-value{font-weight:600; color:var(--text); text-align:right}
.info-row-value a{color:var(--accent); text-decoration:none; font-weight:600}

/* Modale desktop (admin) */
.modal-overlay{display:none; position:fixed; inset:0; background:rgba(8,9,14,.6); z-index:200; align-items:center; justify-content:center; padding:1.5rem}
.modal-overlay.open{display:flex}
.modal{background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:1.5rem; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow)}
.modal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem}
.modal-title{font-size:1rem; font-weight:700; color:var(--text)}
.modal-close{background:none; border:none; color:var(--text-2); cursor:pointer; font-size:1.25rem; line-height:1; padding:.25rem; border-radius:var(--r-sm)}
.modal-close:hover{color:var(--text); background:var(--surface-2)}
.modal-footer{display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border)}

/* Feuille modale (bottom sheet mobile) */
.sheet-overlay{position:fixed; inset:0; background:rgba(8,9,14,.55); z-index:200; display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--surface); border-radius:20px 20px 0 0; padding:1.25rem; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow)}
.sheet-handle{width:36px; height:4px; background:var(--border-2); border-radius:2px; margin:0 auto 1rem}
.sheet-title{font-size:1rem; font-weight:700; margin-bottom:1rem}