/* ============================================================
   modern.css — Interface « Moderne » (activée par l'admin : Apparence → Version de l'interface)
   ------------------------------------------------------------
   Toutes les règles ci-dessous sont limitées à <body class="ui-modern">.
   Sans cette classe (interface classique), ce fichier n'a AUCUN effet.
   Seule exception : le bloc « .ui-switch » (sélecteur de version dans l'admin),
   qui doit être lisible dans les deux versions et n'utilise que des classes nouvelles.
   Aucune logique métier ici : uniquement de la présentation.
   ============================================================ */

/* ---------- Sélecteur de version (admin, visible dans les deux interfaces) ---------- */
.ui-switch{margin:12px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ui-switch-t{font-weight:700;font-size:15px;margin-bottom:4px}
.ui-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ui-opt{text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:3px;color:var(--graphite);font-family:inherit}
.ui-opt b{font-size:14px}
.ui-opt span{font-size:12px;color:var(--steel);line-height:1.35}
.ui-opt:hover{border-color:var(--petrol)}
.ui-opt.on{border-color:var(--petrol);background:var(--petrol-tint)}
@media(max-width:560px){.ui-opts{grid-template-columns:1fr}}

/* ============================================================
   1. Palette et variables
   - Sans thème admin : palette professionnelle bleu / gris / vert.
   - Avec un thème admin (body.themed) : les couleurs du thème sont conservées,
     seules la mise en page et les formes changent.
   ============================================================ */
body.ui-modern:not(.themed){
  --graphite:#0F172A; --graphite-2:#1E293B; --steel:#5B6B7C; --line:#E2E8F0;
  --paper:#F4F6FA; --card:#FFFFFF;
  --petrol:#2563EB; --petrol-deep:#1D4ED8; --petrol-tint:#EAF0FE;
  --go:#15803D; --go-tint:#E7F6EC;
  --hold:#B45309; --hold-tint:#FDF1E1;
  --stop:#B91C1C; --stop-tint:#FDECEC;
  --hazard:#F59E0B;
  --nav-bg:#0F2A4A;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06);
  background:var(--paper);
}
body.ui-modern{--r:14px;--r-sm:10px;--focus:rgba(37,99,235,.35);--input-bd:#CBD5E1}
body.ui-modern.themed{--nav-bg:var(--topbar-bg);--input-bd:var(--line)}
body.ui-modern.dark-theme{--input-bd:var(--line)}

/* ---------- Base typographique ---------- */
body.ui-modern{font-size:15px;line-height:1.55}
body.ui-modern h1,body.ui-modern h2,body.ui-modern h3,body.ui-modern h4{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.2}
body.ui-modern .hazard{display:none}
body.ui-modern a{color:var(--petrol)}
body.ui-modern :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
body.ui-modern .app{max-width:1240px}

/* ---------- Barre du haut ---------- */
body.ui-modern .topbar{background:var(--nav-bg);box-shadow:0 0 0 100vmax var(--nav-bg);padding:12px 24px;min-height:62px}
body.ui-modern.themed .topbar{box-shadow:0 4px 22px rgba(0,0,0,.18)}
body.ui-modern .brand{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em}
body.ui-modern .brand .mk{border-radius:9px;background:var(--petrol)}
body.ui-modern .brand small{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.62);text-transform:uppercase;margin-top:-2px}
body.ui-modern .topbar .who{color:rgba(255,255,255,.85);gap:12px}
body.ui-modern .btn-ghost-light{border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:10px;padding:8px 14px;background:rgba(255,255,255,.06)}
body.ui-modern .btn-ghost-light:hover{background:rgba(255,255,255,.16)}
body.ui-modern .topbar .who .avatar{border-color:rgba(255,255,255,.35)}

/* ---------- Boutons ---------- */
body.ui-modern .btn{border-radius:var(--r-sm);padding:11px 18px;font-weight:600;font-size:14.5px;background:var(--btn-bg,var(--petrol));border:none;box-shadow:0 1px 2px rgba(15,23,42,.10);transition:filter .15s,transform .05s}
body.ui-modern .btn:hover{background:var(--btn-bg,var(--petrol));filter:brightness(.92)}
body.ui-modern .btn:active{transform:translateY(1px)}
body.ui-modern .btn-sec{background:var(--card);color:var(--graphite);border:1px solid var(--line);box-shadow:none}
body.ui-modern .btn-sec:hover{background:var(--paper);border-color:#B6C2D1;filter:none}
body.ui-modern .btn-sm{padding:8px 13px;font-size:13px}
body.ui-modern .btn-danger{background:var(--stop-tint);color:var(--stop);border:1px solid transparent;box-shadow:none}
body.ui-modern .btn-danger:hover{background:#F8D7D7;filter:none}
body.ui-modern .link-btn{color:var(--petrol)}

/* ---------- Cartes et surfaces ---------- */
body.ui-modern .card,body.ui-modern .gcard,body.ui-modern .dash-c,body.ui-modern .stat-card,body.ui-modern .plan-card,
body.ui-modern .gen-card,body.ui-modern .composer-feed,body.ui-modern .post,body.ui-modern .month,body.ui-modern .daycol,
body.ui-modern .chat-wrap,body.ui-modern .pager,body.ui-modern .add-slot,body.ui-modern .ticket{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)}
body.ui-modern .panel{padding:22px}
body.ui-modern .panel h3{font-size:17px;margin-bottom:6px}
body.ui-modern .panel .hint,body.ui-modern .hint{font-size:13px;color:var(--steel)}
body.ui-modern .coll-h{padding-bottom:2px}
body.ui-modern .coll .chev{color:#94A3B8}
body.ui-modern .card.panel.collapsed{box-shadow:none}
body.ui-modern .card.panel.collapsed:hover{border-color:#B6C2D1}
body.ui-modern .ticket::before,body.ui-modern .ticket::after{display:none}

/* ---------- Champs de formulaire ---------- */
body.ui-modern .field label{font-size:13px;font-weight:600;color:var(--graphite);margin-bottom:6px}
body.ui-modern .field input,body.ui-modern .field select,body.ui-modern .field textarea,
body.ui-modern .filters input,body.ui-modern .filters select,
body.ui-modern .svc-add input,body.ui-modern .veh-add input,body.ui-modern .inline-add input,body.ui-modern .cpay-add input,
body.ui-modern .composer input,body.ui-modern .composer-feed textarea,body.ui-modern .ua-note textarea,body.ui-modern .reply-form textarea,
body.ui-modern .htimes input[type=time],body.ui-modern .gen-grid input,body.ui-modern .gen-grid select,body.ui-modern .add-slot input,
body.ui-modern #post-video-url,body.ui-modern textarea{background:var(--input-bg,#fff);border:1px solid var(--input-bd);border-radius:var(--r-sm);color:var(--graphite);padding:11px 13px;font-size:14.5px}
body.ui-modern .field input:focus,body.ui-modern .field select:focus,body.ui-modern .field textarea:focus,
body.ui-modern .filters input:focus,body.ui-modern .filters select:focus,body.ui-modern .composer input:focus,
body.ui-modern .composer-feed textarea:focus,body.ui-modern textarea:focus,body.ui-modern .svc-add input:focus,body.ui-modern .veh-add input:focus,body.ui-modern .cpay-add input:focus{border-color:var(--petrol);box-shadow:0 0 0 3px var(--petrol-tint);outline:none}
body.ui-modern .composer input{border-radius:999px;padding:11px 16px}
body.ui-modern .htimes input[type=time]{padding:7px 9px}
body.ui-modern .pay-opt{border-radius:var(--r-sm);padding:11px 13px}
body.ui-modern .pay-opt:hover{border-color:#B6C2D1;background:var(--paper)}
body.ui-modern .pwd-eye{border-radius:8px}

/* ---------- Authentification ---------- */
body.ui-modern .auth-wrap{margin:44px auto}
body.ui-modern .auth-card{padding:34px 32px}
body.ui-modern .auth-card h2{font-size:24px;margin-bottom:4px}
body.ui-modern .auth-card .sub{font-size:14px;margin-bottom:22px}
body.ui-modern .switch-line{margin-top:20px}

/* ---------- Coque de l'application : barre latérale + contenu ---------- */
body.ui-modern .shell{grid-template-columns:244px 1fr;min-height:calc(100vh - 62px)}
body.ui-modern .side{background:var(--card);border-right:1px solid var(--line);padding:22px 14px}
body.ui-modern .nav-group{margin-bottom:16px}
body.ui-modern .nav-group-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748B;padding:0 12px;margin-bottom:6px} /* #64748B : contraste 4,8 sur blanc (AA) */
body.ui-modern .nav-item{border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--steel);margin-bottom:2px;transition:background .12s,color .12s}
body.ui-modern .nav-item .ic{font-size:16px;width:20px}
body.ui-modern .nav-item:hover{background:var(--paper);color:var(--graphite)}
body.ui-modern .nav-item.on{background:var(--petrol-tint);color:var(--petrol);box-shadow:inset 3px 0 0 var(--petrol)}
body.ui-modern .nav-item .badge{border-radius:999px;font-family:inherit;font-weight:700}
body.ui-modern .main{padding:30px 34px 110px;max-width:1080px}
body.ui-modern .page-head{margin-bottom:24px;align-items:flex-end}
body.ui-modern .page-head h2{font-size:24px}
body.ui-modern .page-head .lead{font-size:14px;color:var(--steel);margin-top:4px}
body.ui-modern .section-t{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12.5px;letter-spacing:.08em;color:#64748B;margin:26px 0 12px}
body.ui-modern .shell.locked .side{opacity:.5}

/* Mobile / tablette : les règles ci-dessus (plus spécifiques que celles de styles.css) doivent être
   explicitement remises en une colonne, sinon la barre latérale masquée laisserait une colonne vide. */
@media(max-width:900px){
  body.ui-modern .shell{grid-template-columns:1fr}
  /* (la messagerie a sa propre règle responsive, placée après sa règle bureau dans la section Messagerie) */
  body.ui-modern .botnav{background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(15,23,42,.06);padding:0 2px env(safe-area-inset-bottom)}
  /* Libellés : police condensée (déjà chargée) à 11 px, plus lisible que du 9,5 px et assez étroite
     pour que « Publications » ou « Aujourd'hui » tiennent sur une ligne à 375 px avec 7 onglets */
  body.ui-modern .botnav button{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:-.015em;padding:8px 0 7px;color:var(--steel);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:3px}
  body.ui-modern .botnav button.on{color:var(--petrol);font-weight:700}
  /* Très petits téléphones (≤ 340 px, ~45 px par onglet) : 9 px pour que « Aujourd'hui » tienne sans troncature */
  @media(max-width:340px){ body.ui-modern .botnav button{font-size:9px} }
  body.ui-modern .botnav button .ic{font-size:21px;line-height:1}
  body.ui-modern .botnav button .badge{border-radius:999px;font-family:"IBM Plex Sans",sans-serif}
  body.ui-modern .main{padding:20px 16px 100px}
}

/* ---------- Boutons de la barre (cloche, langue, menu) : légèrement plus contrastés ---------- */
body.ui-modern .bell-btn,body.ui-modern .lang-btn,body.ui-modern .menu-btn{border-radius:10px!important;background:rgba(255,255,255,.12)!important}
body.ui-modern .bell-btn:hover,body.ui-modern .lang-btn:hover,body.ui-modern .menu-btn:hover{background:rgba(255,255,255,.22)!important}
body.ui-modern .notif-panel,body.ui-modern .menu-panel{border-radius:14px;box-shadow:0 16px 48px rgba(15,23,42,.18);top:66px}
body.ui-modern .menu-item{padding:13px 16px}
body.ui-modern .np-h{font-weight:700}
body.ui-modern .notif-badge{border-radius:999px}

/* ---------- Tableau de bord, statistiques ---------- */
body.ui-modern .dash-c,body.ui-modern .stat-card{text-align:left;padding:16px 18px;border-radius:var(--r)}
body.ui-modern .dash-c .di,body.ui-modern .stat-ic{font-size:20px}
body.ui-modern .dash-c .dv{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:26px;color:var(--graphite);margin:4px 0 2px}
body.ui-modern .stat-val{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:28px}
body.ui-modern .dash-c .dl,body.ui-modern .stat-lbl{font-size:12px;color:var(--steel);text-transform:none;letter-spacing:0;font-weight:500}
body.ui-modern .stat-card.accent{background:var(--petrol-tint);border-color:transparent}
body.ui-modern .stat-card.accent .stat-val{color:var(--petrol)}
body.ui-modern .next-row{padding:12px 0}
body.ui-modern .nr-date{font-family:inherit;font-weight:600}

/* ---------- File d'attente du jour ---------- */
body.ui-modern .qrow{border-radius:var(--r);border-left-width:4px;padding:14px 16px;box-shadow:var(--shadow)}
body.ui-modern .qnum{font-family:inherit;background:var(--graphite-2,#1E293B)}
body.ui-modern .qtime{font-family:inherit;font-size:19px;color:var(--petrol)}
body.ui-modern .qrow.next{background:var(--card);border-left-color:var(--go);box-shadow:0 0 0 2px var(--go-tint),var(--shadow)}
body.ui-modern .next-badge{border-radius:999px;font-size:10px;letter-spacing:.6px}
body.ui-modern .qact .btn-sec,body.ui-modern .qact .btn,body.ui-modern .qact .btn-danger{border-radius:9px}

/* ---------- Agenda ---------- */
body.ui-modern .seg{border-radius:var(--r-sm);background:var(--card)}
body.ui-modern .seg button.on{background:var(--petrol);color:#fff}
body.ui-modern .navstep button{border-radius:9px}
body.ui-modern .navstep .lbl{font-family:inherit;font-weight:600}
body.ui-modern .gen-card{padding:20px 22px}
body.ui-modern .gen-card h3{font-size:16px}
body.ui-modern .scope-seg button,body.ui-modern .wd-chip{border-radius:999px;font-weight:600}
body.ui-modern .scope-seg button.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
body.ui-modern .wd-chip.on{background:var(--petrol);border-color:var(--petrol)}
body.ui-modern .add-slot{padding:16px 18px}
body.ui-modern .daycol .dh{background:var(--paper);padding:10px 12px}
body.ui-modern .daycol .dh .dn{font-family:inherit;font-size:12px;letter-spacing:.06em}
body.ui-modern .daycol .dh .dd{font-family:inherit;font-weight:500}
body.ui-modern .daycol.today .dh{background:var(--petrol-tint)}
body.ui-modern .daycol.today .dh .dn{color:var(--petrol)}
body.ui-modern .slot{border-radius:9px}
body.ui-modern .slot .t{font-family:inherit}
body.ui-modern .slot.free{background:var(--go-tint);border-color:transparent;color:#166534}
body.ui-modern .slot.booked{background:var(--card);border-color:var(--line)}
body.ui-modern .mgrid .wd{background:var(--paper);font-family:inherit}
body.ui-modern .mcell .num{font-family:inherit;font-weight:600}
body.ui-modern .mcell.today{background:var(--petrol-tint)}
body.ui-modern .pip{font-family:inherit;border-radius:6px}

/* ---------- Rendez-vous, tickets, tampons, plaques ---------- */
body.ui-modern .appt{padding:20px 22px;margin-bottom:14px}
body.ui-modern .appt .when,body.ui-modern .up-appt .when{font-family:inherit;font-size:18px;font-weight:700}
body.ui-modern .appt .ref,body.ui-modern .up-appt .ref{font-family:inherit;font-size:13px}
body.ui-modern .appt .grid .k,body.ui-modern .detail-head .meta .m .k{font-family:inherit;font-weight:600;letter-spacing:.04em}
body.ui-modern .appt .grid{border-top-style:solid}
body.ui-modern .stamp{font-family:inherit;font-weight:700;letter-spacing:.04em;border-radius:999px;border-color:transparent;padding:4px 10px}
body.ui-modern .plate{border-radius:6px;border-color:#1E293B}
body.ui-modern .chip{border-radius:999px;background:#F1F5F9;border-color:transparent;color:#334155;padding:4px 11px}
body.ui-modern.dark-theme .chip{background:var(--card2);color:var(--graphite)}
body.ui-modern .status-chip{border-radius:999px}
body.ui-modern .up-appt{padding:18px 20px}
body.ui-modern .ua-note summary{color:var(--petrol)}
body.ui-modern .hist-note{border-radius:0 10px 10px 0;border-left-color:var(--petrol)}
body.ui-modern .lock-note{color:var(--hold)}

/* ---------- Recherche de garages et cartes ---------- */
body.ui-modern .filters{gap:10px;margin-bottom:20px}
body.ui-modern .filters input,body.ui-modern .filters select{padding:11px 14px;background:var(--input-bg,#fff)}
body.ui-modern .glist{gap:18px}
body.ui-modern .gcard{padding:20px}
body.ui-modern .gcard h3{font-size:18px}
body.ui-modern .gcard .dist{font-family:inherit;font-weight:600;border-radius:999px;background:var(--petrol-tint);color:var(--petrol)}
body.ui-modern .gcard .addr{font-size:13px}
body.ui-modern .avail-count{color:var(--go)}
body.ui-modern .open-text{font-weight:500}

/* Fiche garage (client) */
body.ui-modern .detail-head{background:linear-gradient(135deg,#0F2A4A,#1E40AF);border-radius:var(--r);padding:26px 28px}
body.ui-modern.themed .detail-head{background:var(--topbar-bg)}
body.ui-modern .detail-head h2{font-size:26px}
body.ui-modern .detail-head .addr{color:rgba(255,255,255,.75)}
body.ui-modern .detail-head .meta .m .k{color:rgba(255,255,255,.6)}
body.ui-modern .slot-pick{gap:10px}
body.ui-modern .slot-pick button{border-radius:var(--r-sm);padding:12px 8px;background:var(--card);border:1px solid var(--line);transition:border-color .12s,background .12s}
body.ui-modern .slot-pick button:hover{border-color:var(--petrol);background:var(--petrol-tint)}
body.ui-modern .slot-pick button .d{font-size:11px;font-weight:600;color:var(--steel)}
body.ui-modern .slot-pick button .h{font-family:inherit;font-weight:700}
body.ui-modern .closed-banner,body.ui-modern .closed-soft{border-radius:var(--r-sm)}
body.ui-modern .hours-line{font-weight:500}

/* ---------- Messagerie ---------- */
body.ui-modern .chat-wrap{grid-template-columns:260px 1fr;height:600px}
/* Responsive : déclaré juste APRÈS la règle bureau pour l'emporter à spécificité égale
   (une seule colonne, hauteur automatique : conversation complète et champ de saisie visible) */
@media(max-width:900px){
  body.ui-modern .chat-wrap{grid-template-columns:1fr;height:auto}
  body.ui-modern .threads{max-height:200px;border-right:none;border-bottom:1px solid var(--line)}
  body.ui-modern .conv{min-height:440px}
}
body.ui-modern .thread{border-bottom-color:var(--line)}
body.ui-modern .thread.on{background:var(--petrol-tint)}
body.ui-modern .thread .nm{font-size:14px}
body.ui-modern .conv-head{padding:14px 18px}
body.ui-modern .msgs{background:var(--paper);padding:20px}
body.ui-modern .bubble{border-radius:16px;font-size:14.5px;padding:10px 14px}
body.ui-modern .bubble.me{background:var(--petrol);border-bottom-right-radius:5px}
body.ui-modern .bubble.them{border-bottom-left-radius:5px}
body.ui-modern .msg-tabs .mt.on{background:var(--petrol)}
body.ui-modern .thread-menu{border-radius:12px}
body.ui-modern .unread-pill{font-family:inherit;font-weight:700}

/* ---------- Publications, avis ---------- */
body.ui-modern .composer-feed{padding:18px}
body.ui-modern .post{padding:20px}
body.ui-modern .post .ph .dt{font-family:inherit}
body.ui-modern .post-media img,body.ui-modern .post-media video,body.ui-modern .post-media iframe{border-radius:12px}
body.ui-modern .review{padding:16px 0}
body.ui-modern .review .dt{font-family:inherit}
body.ui-modern .review-reply{border-radius:0 12px 12px 0}
body.ui-modern .star-input span.on{color:var(--hazard)}
body.ui-modern .stars{color:var(--hazard)}

/* ---------- Fiche garage (édition) : prestations, paiements, horaires ---------- */
body.ui-modern .svc-row,body.ui-modern .veh-row{border-radius:10px;background:var(--paper);padding:10px 14px}
body.ui-modern .plate-mini{font-family:inherit;border-radius:6px}
body.ui-modern .cpay-chip{border-radius:999px}
body.ui-modern .closure-row .cdate{font-family:inherit}
body.ui-modern .hrow{padding:10px 0}
body.ui-modern .avatar-edit .avatar{box-shadow:0 0 0 4px var(--petrol-tint)}

/* ---------- Abonnement ---------- */
body.ui-modern .period-switch{background:var(--card);border-color:var(--line)}
body.ui-modern .ps-btn.on{background:var(--petrol)}
body.ui-modern .plan-card{padding:24px}
body.ui-modern .plan-card.paid{border-color:var(--line)}
body.ui-modern .plan-card.current{outline:2px solid var(--petrol);border-color:transparent}
body.ui-modern .plan-badge{background:var(--petrol);border-radius:999px}
body.ui-modern .plan-name{font-family:inherit;font-size:19px}
body.ui-modern .plan-price{font-size:28px;color:var(--graphite)}
body.ui-modern .plan-feats li:before{color:var(--go)}
body.ui-modern .sub-status{border-radius:var(--r-sm)}
body.ui-modern .paywall{padding:44px 24px}

/* ---------- Administration ---------- */
body.ui-modern .admin-wrap{max-width:980px;padding:26px 22px 70px}
body.ui-modern .admin-table .atr{padding:11px 0}
body.ui-modern .admin-table .ath{font-size:11.5px;letter-spacing:.06em}
body.ui-modern .theme-opt{border-radius:12px}
body.ui-modern .theme-opt.on{border-color:var(--petrol);background:var(--petrol-tint)}
body.ui-modern .th-sw{border-radius:8px}
body.ui-modern .logo-preview{border-radius:12px}
body.ui-modern .pay-opt .cfg{border-radius:999px}

/* ---------- Modales, toasts, états vides, pagination ---------- */
body.ui-modern .overlay{background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
body.ui-modern .modal{border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.35)}
body.ui-modern .modal .mh{padding:18px 24px}
body.ui-modern .modal .mh h3{font-size:19px}
body.ui-modern .modal .mf{background:var(--paper)}
body.ui-modern .summary-row .v.mono{font-family:inherit;font-weight:600}
body.ui-modern .toast{background:var(--graphite-2,#1E293B);border-radius:12px;box-shadow:0 12px 36px rgba(15,23,42,.3);transition:transform .3s,opacity .3s}
body.ui-modern .toast:not(.show){opacity:0;pointer-events:none;transform:translateX(-50%) translateY(200%)} /* totalement hors écran quand inactif */
body.ui-modern .empty-state{padding:56px 20px}
body.ui-modern .empty-state .ic{font-size:40px;margin-bottom:12px}
body.ui-modern .empty-state h3{font-size:19px}
body.ui-modern .pager{padding:10px 14px}
body.ui-modern .pg-btn,body.ui-modern .pg-sz{border-radius:8px}
body.ui-modern .pg-sz.on{background:var(--petrol);border-color:var(--petrol)}
body.ui-modern .boot-spinner{border-top-color:var(--petrol)}
body.ui-modern .rb-slots{border-radius:12px;background:var(--paper)}
body.ui-modern .rb-slot.sel{background:var(--petrol);border-color:var(--petrol)}
body.ui-modern .email{border-radius:12px}

/* ============================================================
   2. Page d'accueil (rendu v2)
   ============================================================ */
body.ui-modern .lp-hero{padding:60px 22px 40px;text-align:center;background:linear-gradient(180deg,var(--card) 0%,var(--paper) 100%);border-bottom:1px solid var(--line)}
body.ui-modern.dark-theme .lp-hero{background:linear-gradient(180deg,var(--card),var(--bg))}
body.ui-modern .lp-hero-in{max-width:760px;margin:0 auto}
body.ui-modern .lp-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);background:var(--petrol-tint);padding:6px 13px;border-radius:999px}
body.ui-modern .lp-hero h1{font-size:clamp(30px,5.2vw,50px);max-width:18ch;margin:16px auto 0;color:var(--graphite)}
body.ui-modern .lp-hero p{max-width:58ch;margin:16px auto 0;color:var(--steel);font-size:17px}
body.ui-modern .lp-cta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
body.ui-modern .lp-cta .btn,body.ui-modern .lp-cta .btn-sec{padding:12px 22px;font-size:15px}
body.ui-modern .lp-search{margin-top:34px}
body.ui-modern .lp-search .page-head{margin-bottom:16px}
body.ui-modern .lp-search .page-head h2{font-size:22px}
body.ui-modern .landing-cta{background:var(--petrol-tint);border-radius:var(--r);padding:22px;margin:24px 0 8px}
body.ui-modern .landing-cta p{font-weight:500;color:var(--graphite)}
body.ui-modern .lp-how{max-width:1180px;margin:48px auto 0;padding:0 22px}
body.ui-modern .lp-how h2{font-size:22px;margin-bottom:16px}
body.ui-modern .lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.ui-modern .lp-step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
body.ui-modern .lp-step .n{width:34px;height:34px;border-radius:50%;background:var(--petrol);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:12px}
body.ui-modern .lp-step h4{margin:0 0 6px;font-size:16px}
body.ui-modern .lp-step p{margin:0;font-size:14px;color:var(--steel)}
body.ui-modern .lp-roles{max-width:1180px;margin:40px auto 0;padding:0 22px;grid-template-columns:1fr 1fr;gap:18px}
body.ui-modern .role{border-radius:var(--r);box-shadow:var(--shadow);padding:26px}
body.ui-modern .role .tag{background:var(--petrol);font-family:inherit;font-weight:700;letter-spacing:.06em;border-bottom-left-radius:12px}
body.ui-modern .role h3{font-size:22px}
body.ui-modern .role p{min-height:0;margin-bottom:16px}
body.ui-modern .role li{padding-left:26px}
body.ui-modern .role li::before{width:8px;height:8px;border-radius:50%;top:11px;background:var(--go)}
body.ui-modern .lp-foot{text-align:center;color:var(--steel);font-size:13px;padding:44px 22px 64px}
@media(max-width:900px){
  body.ui-modern .lp-hero{padding:40px 18px 30px}
  body.ui-modern .lp-steps{grid-template-columns:1fr}
  body.ui-modern .lp-roles{grid-template-columns:1fr;padding:0 14px}
  body.ui-modern .lp-how{padding:0 14px}
}
@media(max-width:560px){
  body.ui-modern .lp-cta .btn,body.ui-modern .lp-cta .btn-sec{width:100%}
  body.ui-modern .filters .btn{width:100%}
  body.ui-modern .page-head{align-items:flex-start}
}

/* ============================================================
   3. Petits ajustements responsives communs
   ============================================================ */
/* File d'attente du jour : sur écran moyen, les boutons passent sous les infos (plus d'écrasement du texte) */
@media(max-width:1100px){
  body.ui-modern .qrow{flex-wrap:wrap}
  body.ui-modern .qact{width:100%;justify-content:flex-start;margin-top:8px;padding-left:42px}
}
@media(max-width:640px){
  body.ui-modern .page-head h2{font-size:22px}
  body.ui-modern .modal{border-radius:14px}
  body.ui-modern .chat-wrap{height:auto}
  body.ui-modern .qrow{padding:12px 14px}
  body.ui-modern .qact{padding-left:0}
}
/* Barre du haut sur mobile : marque compacte, salutation masquée (l'avatar reste), boutons serrés */
@media(max-width:560px){
  body.ui-modern .topbar{padding:10px 14px;min-height:56px}
  body.ui-modern .brand{font-size:16px;gap:8px;white-space:nowrap}
  body.ui-modern .brand small{display:none}
  body.ui-modern .brand .mk{width:28px;height:28px}
  body.ui-modern .topbar .who{gap:8px;font-size:13px}
  body.ui-modern .topbar .who .greet{display:none}
  body.ui-modern .btn-ghost-light{padding:7px 10px;font-size:12.5px;white-space:nowrap}
}