@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");
/* ==========================================================================
   KELO DESIGN SYSTEM v1
   Source unique du style pour les deux applications React :
   kelo-client (voyageurs) et kelo-bureau (équipe KELO, agents terrain).

   Règles non négociables
   1. Aucune propriété border, border-top, border-right, border-bottom,
      border-left sur aucun composant. Les séparations se font par
      différence de fond (canvas, surface, sunken) et par ombre.
   2. Aucune couleur translucide sur un bouton ou une surface, aucun
      backdrop-filter, aucun dégradé, aucune texture de grain.
   3. Aucun window.alert, window.confirm, window.prompt. Toujours
      <Modal> pour confirmer, <Toast> pour informer.
   4. Top bar : uniquement des boutons icônes (messages, notifications,
      profil). Aucun texte, aucun titre.
   5. Navigation : sidebar sur grand écran, barre du bas sur petit écran,
      4 entrées maximum en bas.
   6. Pas d'emoji, pas de tiret cadratin, pas de libellé tout en majuscules,
      pas de badge posé au-dessus d'un titre, pas d'effet d'apparition au
      scroll, pas de bouton qui devient transparent au survol.
   7. Icônes : jeu SVG maison (trait 2px, bouts arrondis), aucune librairie.
   8. Tout contenu doit tenir : min-width 0 partout, retour à la ligne
      autorisé, tableaux dans .tbl-wrap, prix en nowrap.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root{
  /* Marque */
  --brand:#D70F64;
  --brand-press:#B30A52;
  --brand-50:#FDF0F5;
  --brand-100:#FADBE7;
  --on-brand:#FFFFFF;

  /* Neutres */
  --ink:#18171D;
  --ink-2:#34333D;
  --muted:#6C6B77;
  --faint:#A3A2AE;
  --canvas:#F4F4F7;     /* fond d'application */
  --surface:#FFFFFF;    /* cartes, sidebar client */
  --sunken:#ECEBF1;     /* champs, segments, zones creuses */
  --hair:#E4E3EA;       /* seul usage : ombre de 1px entre lignes de liste */

  /* Bureau (thème sombre de la navigation uniquement) */
  --night:#17161C;
  --night-2:#25242D;
  --night-text:#B7B6C2;

  /* États */
  --ok:#157A4B;     --ok-50:#E1F4EA;
  --warn:#9C5B00;   --warn-50:#FFF0DA;
  --danger:#C22536; --danger-50:#FDE8EA;
  --info:#2A5BC8;   --info-50:#E6EDFB;

  /* Illustrations (fonds de photos de démonstration) */
  --sea:#CFE5EB; --sand:#F1E3C8; --palm:#D6E8CE; --dusk:#E7DAE3; --clay:#F3D9CC;

  /* Espacements, échelle 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Rayons, hiérarchie : plus l'objet est grand, plus le rayon l'est */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* Ombres */
  --sh-1:0 1px 2px rgba(24,23,29,.05), 0 2px 8px rgba(24,23,29,.05);
  --sh-2:0 4px 20px rgba(24,23,29,.08);
  --sh-3:0 18px 48px rgba(24,23,29,.18);

  /* Typographie */
  --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:17px; --t-xl:20px; --t-2xl:24px; --t-3xl:30px;

  /* Gabarits */
  --sidebar-w:248px;
  --topbar-h:64px;
  --bottom-h:72px;
  --content-max:1120px;
  --focus:0 0 0 3px var(--surface), 0 0 0 6px var(--brand);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--t-md);font-weight:500;line-height:1.55;color:var(--ink);background:var(--canvas);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:0;box-shadow:var(--focus);border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Titres : une seule famille, contraste par graisse et taille */
.h1{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.025em;line-height:1.12}
.h2{font-size:var(--t-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.h3{font-size:var(--t-lg);font-weight:800;letter-spacing:-.01em;line-height:1.3}
.h4{font-size:var(--t-md);font-weight:700;line-height:1.35}
.sub{color:var(--muted);font-size:var(--t-md);margin-top:var(--s1);max-width:62ch}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.sm{font-size:var(--t-sm)}
.xs{font-size:var(--t-xs)}
.strong{font-weight:700}
.num{font-variant-numeric:tabular-nums}
.code13{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.nowrap{white-space:nowrap}
.center{text-align:center}

/* ---------- 3. Mise en page utilitaire ---------- */
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.row.nw{flex-wrap:nowrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack.s2{gap:var(--s2)} .stack.s6{gap:var(--s6)}
.grow{flex:1}
.mt1{margin-top:var(--s1)} .mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt6{margin-top:var(--s6)} .mt8{margin-top:var(--s8)}
.grid-auto{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid-auto.sm-cells{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.g2{display:grid;gap:var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{display:grid;gap:var(--s3);grid-template-columns:repeat(4,minmax(0,1fr))}
.cols{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.cols.wide{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
.sticky{position:sticky;top:0}

/* ---------- 4. Coquilles d'application ---------- */
/* .kelo-root porte le container : les ruptures se font par @container,
   donc le même CSS marche dans l'app et dans le catalogue d'écrans. */
.kelo-root{container-type:inline-size;container-name:kelo;height:100%;position:relative}
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:var(--topbar-h) minmax(0,1fr);height:100%;background:var(--canvas)}

.sidebar{grid-row:1/3;background:var(--surface);padding:var(--s6) var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s1);overflow:auto}
.brandmark{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s2) var(--s6)}
.logo{width:38px;height:38px;border-radius:var(--r-sm);background:var(--brand);color:var(--on-brand);display:grid;place-items:center;flex:none}
.logo svg{width:22px;height:22px}
.brandmark .name{font-weight:800;font-size:var(--t-xl);letter-spacing:-.03em}
.nav-link{display:flex;align-items:center;gap:var(--s3);width:100%;padding:11px var(--s3);border-radius:var(--r-sm);font-weight:600;color:var(--muted);text-align:left;transition:background-color .15s,color .15s}
.nav-link svg{width:20px;height:20px;flex:none}
.nav-link:hover{background:var(--canvas);color:var(--ink)}
.nav-link.is-active{background:var(--brand-50);color:var(--brand)}
.sidebar .foot{margin-top:auto;padding-top:var(--s4)}

.topbar{grid-column:2;display:flex;align-items:center;justify-content:flex-end;gap:var(--s2);padding:0 var(--s6)}
.topbar .left{margin-right:auto;display:none}
.icon-btn{width:44px;height:44px;border-radius:var(--r-md);background:var(--surface);display:grid;place-items:center;position:relative;box-shadow:var(--sh-1);color:var(--ink);flex:none;transition:background-color .15s}
.icon-btn:hover{background:var(--brand-50);color:var(--brand)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .dot{position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--surface)}
.icon-btn.plain{background:var(--canvas);box-shadow:none}

.content{grid-column:2;overflow:auto;padding:var(--s2) var(--s8) var(--s10)}
.page{max-width:var(--content-max);margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.back{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;color:var(--muted);margin-bottom:var(--s3);font-size:var(--t-sm)}
.back svg{width:18px;height:18px}

.bottomnav{display:none;grid-column:1;background:var(--surface);box-shadow:0 -8px 24px rgba(24,23,29,.06);padding:var(--s2) var(--s2) var(--s3);align-items:stretch;justify-content:space-around}
.bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--muted);padding:6px 4px;border-radius:var(--r-sm)}
.bottomnav button svg{width:24px;height:24px}
.bottomnav button .pillicon{display:grid;place-items:center;width:52px;height:30px;border-radius:var(--r-pill)}
.bottomnav button.is-active{color:var(--brand)}
.bottomnav button.is-active .pillicon{background:var(--brand-50)}

/* Bureau : navigation sombre, contenu clair, pour ne jamais confondre les espaces */
.app.bureau .sidebar{background:var(--night)}
.app.bureau .brandmark .name{color:#fff}
.app.bureau .nav-link{color:var(--night-text)}
.app.bureau .nav-link:hover{background:var(--night-2);color:#fff}
.app.bureau .nav-link.is-active{background:var(--night-2);color:#fff}
.app.bureau .nav-link.is-active svg{color:var(--brand)}
.app.bureau .bottomnav{background:var(--night)}
.app.bureau .bottomnav button{color:var(--night-text)}
.app.bureau .bottomnav button.is-active{color:#fff}
.app.bureau .bottomnav button.is-active .pillicon{background:var(--brand)}
.nav-label{font-size:var(--t-xs);font-weight:700;color:var(--faint);padding:var(--s4) var(--s3) var(--s1)}
.app.bureau .nav-label{color:#6F6E7B}

/* Agent terrain : toujours en format téléphone */
.app.agent{grid-template-columns:1fr;grid-template-rows:var(--topbar-h) minmax(0,1fr) var(--bottom-h);max-width:480px;margin:0 auto}
.app.agent .sidebar{display:none}
.app.agent .topbar,.app.agent .content{grid-column:1}
.app.agent .topbar{justify-content:space-between;padding:0 var(--s4)}
.app.agent .topbar .left{display:flex}
.app.agent .content{padding:var(--s1) var(--s4) var(--s6)}
.app.agent .bottomnav{display:flex;background:var(--night)}
.app.agent .bottomnav button{color:var(--night-text)}
.app.agent .bottomnav button.is-active{color:#fff}
.app.agent .bottomnav button.is-active .pillicon{background:var(--brand)}

/* Authentification : écran partagé illustration + formulaire */
.app.auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr}
.auth-visual{background:var(--brand);color:#fff;padding:var(--s10);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.auth-visual .scene{position:absolute;left:0;right:0;bottom:0;height:58%}
.auth-visual .scene svg{width:100%;height:100%}
.auth-visual .quote{position:relative;font-size:var(--t-3xl);font-weight:800;letter-spacing:-.025em;line-height:1.15;max-width:14ch}
.auth-panel{overflow:auto;display:flex;align-items:center;justify-content:center;padding:var(--s8) var(--s6)}
.auth-box{width:min(420px,100%)}
.app.auth.staff .auth-visual{background:var(--night)}

/* ---------- 5. Ruptures (container) ---------- */
@container kelo (max-width: 820px){
  .app{grid-template-columns:1fr;grid-template-rows:60px minmax(0,1fr) var(--bottom-h)}
  .sidebar{display:none}
  .topbar,.content{grid-column:1}
  .topbar{padding:0 var(--s4);justify-content:space-between}
  .topbar .left{display:flex}
  .content{padding:var(--s1) var(--s4) var(--s6)}
  .bottomnav{display:flex}
  .app.auth{grid-template-columns:1fr;grid-template-rows:180px minmax(0,1fr)}
  .auth-visual{padding:var(--s6)}
  .auth-visual .quote{font-size:var(--t-xl)}
  .auth-visual .scene{height:70%}
  .auth-panel{align-items:flex-start;padding:var(--s6) var(--s4)}
  .cols,.cols.wide{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-auto{grid-template-columns:1fr}
  .grid-auto.sm-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h1{font-size:var(--t-2xl)}
  .hide-m{display:none!important}
}
@container kelo (min-width: 821px){ .hide-d{display:none!important} }

/* ---------- 6. Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r-md);font-weight:700;font-size:var(--t-md);line-height:1.2;text-align:center;white-space:normal;max-width:100%;transition:background-color .15s,transform .1s}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-press)}
.btn-tint{background:var(--brand-50);color:var(--brand)}
.btn-tint:hover{background:var(--brand-100)}
.btn-neutral{background:var(--sunken);color:var(--ink)}
.btn-neutral:hover{background:#E1E0E8}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#A51E2D}
.btn-link{min-height:auto;padding:0;color:var(--brand);font-weight:700}
.btn-sm{min-height:38px;padding:0 var(--s4);font-size:var(--t-sm);border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn[disabled]{background:var(--sunken);color:var(--faint);cursor:not-allowed}

/* ---------- 7. Formulaires (champs pleins, sans bordure) ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field + .field{margin-top:var(--s4)}
.label{font-size:var(--t-sm);font-weight:700}
.input,.select,.textarea{width:100%;min-height:52px;border:0;border-radius:var(--r-md);background:var(--sunken);padding:0 var(--s4);font-weight:600;transition:background-color .15s,box-shadow .15s}
.textarea{padding:var(--s3) var(--s4);min-height:112px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--faint);font-weight:500}
.input:focus,.select:focus,.textarea:focus{outline:0;background:var(--surface);box-shadow:0 0 0 2px var(--brand)}
.field.has-error .input{background:var(--danger-50);box-shadow:0 0 0 2px var(--danger)}
.hint{font-size:var(--t-xs);color:var(--muted)}
.error{font-size:var(--t-xs);color:var(--danger);font-weight:700}
.input-group{display:flex;align-items:center;gap:var(--s2);background:var(--sunken);border-radius:var(--r-md);padding-left:var(--s4);min-height:52px}
.input-group .prefix{font-weight:800;white-space:nowrap}
.input-group .input{background:transparent;padding-left:var(--s2)}
.input-group:focus-within{background:var(--surface);box-shadow:0 0 0 2px var(--brand)}
.input-group .input:focus{box-shadow:none;background:transparent}
.pin{letter-spacing:.35em;font-variant-numeric:tabular-nums;font-weight:800}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
.otp input{height:60px;border:0;border-radius:var(--r-md);background:var(--sunken);text-align:center;font-size:var(--t-2xl);font-weight:800}
.otp input:focus{outline:0;background:var(--surface);box-shadow:0 0 0 2px var(--brand)}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm)}
.check .box{width:22px;height:22px;border-radius:7px;background:var(--sunken);flex:none;display:grid;place-items:center;color:#fff}
.check.on .box{background:var(--brand)}
.check .box svg{width:14px;height:14px}
.switch{width:46px;height:28px;border-radius:var(--r-pill);background:var(--sunken);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:left .15s}
.switch.on{background:var(--brand)}
.switch.on::after{left:21px}
.dropzone{background:var(--sunken);border-radius:var(--r-lg);padding:var(--s6);text-align:center;color:var(--muted)}
.dropzone svg{width:28px;height:28px;margin:0 auto var(--s2)}

/* ---------- 8. Sélecteurs ---------- */
.seg{display:inline-flex;background:var(--sunken);border-radius:var(--r-pill);padding:4px;max-width:100%;overflow:auto}
.seg button{padding:9px 16px;border-radius:var(--r-pill);font-weight:700;font-size:var(--t-sm);color:var(--muted);white-space:nowrap;flex:1}
.seg button.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.seg.block{display:flex;width:100%}
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding:2px 2px var(--s2);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px 16px;border-radius:var(--r-pill);background:var(--surface);font-weight:600;font-size:var(--t-sm);box-shadow:var(--sh-1);white-space:nowrap}
.chip.is-active{background:var(--ink);color:#fff}
.tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin-bottom:var(--s5);background:var(--surface);padding:4px;border-radius:var(--r-md);box-shadow:var(--sh-1);width:max-content;max-width:100%}
.tabs button{padding:9px 14px;border-radius:var(--r-sm);font-weight:700;font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
.tabs button.is-active{background:var(--ink);color:#fff}
.stepper{display:inline-flex;align-items:center;gap:var(--s2);background:var(--sunken);border-radius:var(--r-pill);padding:4px}
.stepper button{width:36px;height:36px;border-radius:50%;background:var(--surface);font-weight:800;font-size:18px;box-shadow:var(--sh-1)}
.stepper output{min-width:28px;text-align:center;font-weight:800}
.progress-steps{display:flex;gap:var(--s2)}
.progress-steps span{flex:1;height:6px;border-radius:99px;background:var(--sunken)}
.progress-steps span.done{background:var(--brand)}

/* ---------- 9. Surfaces ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.card .cp{padding:var(--s5)}
.card.flat{box-shadow:none;background:var(--canvas)}
.card.ink{background:var(--ink);color:#fff}
.card.ink .muted{color:var(--night-text)}
.card.brand{background:var(--brand);color:#fff}
.card.brand .muted{color:#FBD0E1}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.panel{background:var(--canvas);border-radius:var(--r-md);padding:var(--s4)}
.notice{background:var(--brand-50);color:var(--brand-press);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--t-sm);font-weight:600;display:flex;gap:var(--s3);align-items:flex-start}
.notice svg{width:18px;height:18px;flex:none;margin-top:1px}
.notice.warn{background:var(--warn-50);color:var(--warn)}
.notice.danger{background:var(--danger-50);color:var(--danger)}
.notice.ok{background:var(--ok-50);color:var(--ok)}
.notice.info{background:var(--info-50);color:var(--info)}

/* Média (photo). En production : <img> en object-fit cover dans .ph */
.ph{position:relative;background:var(--sea);overflow:hidden;aspect-ratio:16/10}
.ph > svg,.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.tall{aspect-ratio:4/3} .ph.wide{aspect-ratio:21/9} .ph.sq{aspect-ratio:1}
.ph .tag{position:absolute;left:var(--s3);top:var(--s3);z-index:1}
.ph .fav{position:absolute;right:var(--s3);top:var(--s3);z-index:1;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink)}
.ph .fav svg{width:18px;height:18px}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:var(--s2);border-radius:var(--r-lg);overflow:hidden;height:340px}
.gallery .ph{aspect-ratio:auto;height:100%}
.gallery .ph:first-child{grid-row:1/3}
@container kelo (max-width: 820px){.gallery{grid-template-columns:1fr;grid-template-rows:1fr;height:220px}.gallery .ph:not(:first-child){display:none}.gallery .ph:first-child{grid-row:auto}}

/* Carte produit */
.product .cp{display:flex;flex-direction:column;gap:6px}
.product .meta{font-size:var(--t-sm);color:var(--muted)}
.product .foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s2);flex-wrap:wrap}
.hscroll{display:flex;gap:var(--s4);overflow-x:auto;padding:4px 4px var(--s3);margin:0 -4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{flex:none;width:272px;scroll-snap-align:start}

/* Prix : jamais coupé */
.price{font-weight:800;font-size:var(--t-lg);letter-spacing:-.01em;white-space:nowrap}
.price .cur{font-size:var(--t-xs);font-weight:700;color:var(--muted);margin-left:4px}
.price.xl{font-size:var(--t-3xl)}
.price.lg{font-size:var(--t-2xl)}
.from{font-size:var(--t-xs);color:var(--muted);font-weight:600;display:block}

/* Étiquettes et statuts */
.tag{display:inline-flex;align-items:center;padding:6px 11px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--t-xs);font-weight:800;white-space:nowrap}
.tag.brand{background:var(--brand);color:#fff}
.tag.ink{background:var(--ink);color:#fff}
.bdg{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:700;white-space:nowrap;background:var(--sunken);color:var(--muted)}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bdg.ok{background:var(--ok-50);color:var(--ok)}
.bdg.warn{background:var(--warn-50);color:var(--warn)}
.bdg.danger{background:var(--danger-50);color:var(--danger)}
.bdg.info{background:var(--info-50);color:var(--info)}
.bdg.brand{background:var(--brand-50);color:var(--brand)}

/* Listes (séparation par ombre de 1px, jamais par bordure) */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0}
.li + .li{box-shadow:0 -1px 0 var(--hair)}
.li-ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--canvas);display:grid;place-items:center;flex:none;color:var(--ink)}
.li-ic svg{width:20px;height:20px}
.li-ic.brand{background:var(--brand-50);color:var(--brand)}
.li-ic.ok{background:var(--ok-50);color:var(--ok)}
.li-ic.warn{background:var(--warn-50);color:var(--warn)}
.li-tx{flex:1}
.li-tx b{display:block;font-size:var(--t-md);font-weight:700;line-height:1.35}
.li-tx span{display:block;font-size:var(--t-sm);color:var(--muted)}
.li-end{text-align:right;flex:none;max-width:45%}
.li.clickable{cursor:pointer;border-radius:var(--r-sm)}
.qty{font-weight:800;color:var(--brand);font-size:var(--t-sm)}

/* Paires clé valeur */
.kv{display:flex;flex-direction:column}
.kv div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;font-size:var(--t-sm)}
.kv div span:first-child{color:var(--muted)}
.kv div b{text-align:right}
.kv .total{padding-top:var(--s3);margin-top:var(--s1);box-shadow:0 -1px 0 var(--hair);font-size:var(--t-md)}

/* Indicateurs */
.kpi{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-2)}
.kpi .k{font-size:var(--t-sm);color:var(--muted);display:block}
.kpi .v{display:block;font-size:var(--t-2xl);font-weight:800;letter-spacing:-.02em;margin-top:6px;white-space:nowrap}
.kpi .d{font-size:var(--t-xs);font-weight:700;margin-top:4px;display:block}
.kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--danger)}
.kpi.brand{background:var(--brand);color:#fff}
.kpi.brand .k,.kpi.brand .d{color:#FBD0E1}
.meter{height:8px;border-radius:99px;background:var(--sunken);overflow:hidden;margin-top:var(--s2)}
.meter i{display:block;height:100%;background:var(--brand);border-radius:99px}
.meter.done i{background:var(--faint)}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:var(--s2)}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars i{display:block;width:100%;max-width:38px;background:var(--brand-100);border-radius:10px 10px 4px 4px}
.bars div.is-active i{background:var(--brand)}
.bars span{font-size:var(--t-xs);color:var(--muted);font-weight:700}

/* Tableaux : toujours dans .tbl-wrap pour ne jamais déborder */
.tbl-wrap{overflow-x:auto;margin:0 calc(var(--s5) * -1);padding:0 var(--s5)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm);min-width:560px}
.tbl th{text-align:left;font-size:var(--t-xs);color:var(--muted);font-weight:700;padding:10px var(--s3);background:var(--canvas);white-space:nowrap}
.tbl th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.tbl th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.tbl td{padding:14px var(--s3);vertical-align:middle}
.tbl tr + tr td{box-shadow:0 -1px 0 var(--hair)}
.tbl .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--canvas)}
.cell-main{font-weight:700;display:block}
.cell-sub{font-size:var(--t-xs);color:var(--muted);display:block}

/* Programme, fil d'activité */
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s3);padding:6px 0}
.tl .t{font-weight:800;font-size:var(--t-sm);color:var(--muted);padding-top:12px;font-variant-numeric:tabular-nums}
.tl .c{background:var(--surface);border-radius:var(--r-md);padding:var(--s3) var(--s4);box-shadow:var(--sh-1)}
.tl .c b{display:block}
.tl .c span{display:block;font-size:var(--t-sm);color:var(--muted)}
.tl.now .c{background:var(--ink);color:#fff}
.tl.now .c span{color:var(--night-text)}
.tl.done .c{background:var(--canvas);box-shadow:none}
.tl.done .c b{color:var(--muted)}

/* Calendrier de disponibilités */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.cal .dow{font-size:var(--t-xs);color:var(--faint);font-weight:700;padding:4px 0}
.cal .d{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-sm);font-weight:700;font-size:var(--t-sm);background:var(--canvas)}
.cal .d.off{background:transparent;color:var(--faint);text-decoration:line-through}
.cal .d.sel{background:var(--brand);color:#fff}
.cal .d.range{background:var(--brand-50);color:var(--brand)}
.cal .d.blocked{background:var(--ink);color:#fff}
.cal .d.hold{background:var(--warn-50);color:var(--warn)}
.cal .d.empty{background:transparent}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted);font-weight:600}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-2px}

/* Planning */
.plan{display:grid;grid-template-columns:150px repeat(7,minmax(90px,1fr));gap:6px;min-width:820px}
.plan .hd{font-size:var(--t-xs);font-weight:700;color:var(--muted);padding:6px}
.plan .res{font-weight:700;font-size:var(--t-sm);padding:10px 6px}
.plan .slot{background:var(--canvas);border-radius:var(--r-xs);min-height:42px}
.plan .bk{border-radius:var(--r-xs);padding:8px 10px;font-size:var(--t-xs);font-weight:700;color:#fff;background:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan .bk.ink{background:var(--ink)} .plan .bk.ok{background:var(--ok)} .plan .bk.warn{background:var(--warn)}

/* Messagerie */
.chat{display:flex;flex-direction:column;gap:var(--s3)}
.bubble{max-width:78%;padding:var(--s3) var(--s4);border-radius:18px 18px 18px 6px;background:var(--surface);box-shadow:var(--sh-1);font-size:var(--t-md)}
.bubble.me{align-self:flex-end;background:var(--brand);color:#fff;border-radius:18px 18px 6px 18px}
.bubble time{display:block;font-size:11px;opacity:.7;margin-top:4px}
.composer{display:flex;gap:var(--s2);align-items:center;background:var(--surface);border-radius:var(--r-pill);padding:6px 6px 6px var(--s4);box-shadow:var(--sh-2)}
.composer input{flex:1;border:0;background:transparent;min-height:40px;font-weight:600}
.composer input:focus{outline:0}

/* Avatar, QR, carte KELO */
.avatar{width:44px;height:44px;border-radius:var(--r-md);background:var(--sand);color:#6E5528;display:grid;place-items:center;font-weight:800;font-size:var(--t-sm);flex:none}
.avatar.lg{width:64px;height:64px;border-radius:var(--r-lg);font-size:var(--t-xl)}
.avatar.brand{background:var(--brand);color:#fff}
.avatar.ink{background:var(--ink-2);color:#fff}
.qr{background:#fff;border-radius:var(--r-lg);padding:var(--s4);display:grid;place-items:center}
.qr svg{width:172px;height:172px}
.kelo-card{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:var(--s6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center}
.kelo-card .muted{color:var(--night-text)}
.kelo-card .qr{padding:var(--s3)}
.kelo-card .qr svg{width:120px;height:120px}
@container kelo (max-width: 820px){.kelo-card{grid-template-columns:1fr;justify-items:start}}

/* Scanner (agent) */
.scanner{background:var(--night);border-radius:var(--r-xl);aspect-ratio:3/4;position:relative;display:grid;place-items:center;overflow:hidden}
.scanner .frame{width:62%;aspect-ratio:1;border-radius:var(--r-lg);box-shadow:0 0 0 4px #fff, 0 0 0 999px rgba(0,0,0,.35)}
.scanner .line{position:absolute;left:19%;right:19%;height:3px;background:var(--brand);top:50%;border-radius:3px}

/* États vides */
.empty{text-align:center;padding:var(--s10) var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.empty .ic{width:64px;height:64px;border-radius:var(--r-lg);background:var(--brand-50);color:var(--brand);display:grid;place-items:center}
.empty .ic svg{width:28px;height:28px}

/* Accordéon programme */
.acc{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.acc + .acc{margin-top:var(--s2)}
.acc summary{list-style:none;cursor:pointer;padding:var(--s4);display:flex;justify-content:space-between;gap:var(--s3);font-weight:700;flex-wrap:wrap}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{color:var(--muted);font-weight:600;font-size:var(--t-sm)}
.acc .in{padding:0 var(--s4) var(--s4)}

/* Barre d'action collante (réservation mobile) */
.actionbar{position:sticky;bottom:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:var(--s3) var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5)}

/* ---------- 10. Modal et Toast (remplacent confirm et alert) ---------- */
.overlay{position:fixed;inset:0;background:rgba(18,17,22,.55);display:none;align-items:center;justify-content:center;padding:var(--s5);z-index:100}
.overlay.is-open{display:flex}
.modal{width:min(440px,100%);max-height:calc(100% - 40px);overflow:auto;background:var(--surface);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--sh-3);animation:modal-in .18s ease-out}
.modal .ic{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--brand-50);color:var(--brand);margin-bottom:var(--s4)}
.modal .ic svg{width:24px;height:24px}
.modal.danger .ic{background:var(--danger-50);color:var(--danger)}
.modal .actions{display:flex;gap:var(--s3);margin-top:var(--s5)}
.modal .actions .btn{flex:1}
@keyframes modal-in{from{transform:translateY(10px) scale(.98)}to{transform:none}}
@container kelo (max-width: 820px){
  .overlay{align-items:flex-end;padding:0}
  .modal{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0}
}
.toasts{position:fixed;left:0;right:0;bottom:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s2);z-index:110;pointer-events:none;padding:0 var(--s4)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--s3);max-width:min(460px,100%);background:var(--ink);color:#fff;padding:var(--s3) var(--s4);border-radius:var(--r-md);box-shadow:var(--sh-3);font-weight:600;font-size:var(--t-sm);animation:toast-in .2s ease-out}
.toast .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--ink-2);flex:none}
.toast .ic svg{width:16px;height:16px}
.toast.ok .ic{background:var(--ok)} .toast.warn .ic{background:var(--warn)} .toast.danger .ic{background:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@container kelo (max-width: 820px){.toasts{bottom:calc(var(--bottom-h) + var(--s3))}}

/* ---------- 11. Composants catalogue ---------- */
.searchbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:var(--s2);background:var(--surface);border-radius:var(--r-lg);padding:var(--s2);box-shadow:var(--sh-2)}
.sb-field{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);border-radius:var(--r-md);text-align:left;white-space:normal}
.sb-field:hover{background:var(--canvas)}
.sb-field svg{width:20px;height:20px;color:var(--brand);flex:none}
.sb-field small{display:block;font-size:var(--t-xs);color:var(--muted);font-weight:600}
.sb-field b{display:block;font-size:var(--t-sm)}
.choices{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.choice{background:var(--canvas);border-radius:var(--r-md);padding:var(--s4);text-align:left;display:flex;flex-direction:column;gap:4px;white-space:normal;width:100%;transition:background-color .15s}
.choice:hover{background:var(--sunken)}
.choice.is-active{background:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand)}
.choice .t{font-weight:800}
.choice .d{font-size:var(--t-sm);color:var(--muted)}
.choice .p{font-weight:800;margin-top:var(--s2);white-space:nowrap}
.feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s2)}
.feat{display:flex;gap:10px;align-items:center;background:var(--canvas);border-radius:var(--r-sm);padding:10px var(--s3);font-size:var(--t-sm);font-weight:600}
.feat svg{width:18px;height:18px;color:var(--brand);flex:none}
.shortcut{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;text-align:left;white-space:normal}
.shortcut .ph{aspect-ratio:16/9}
.shortcut .cp{padding:var(--s3) var(--s4)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--surface);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.hero .tx{padding:var(--s10) var(--s8);display:flex;flex-direction:column;justify-content:center}
.hero .ph{aspect-ratio:auto;min-height:300px}
.section{margin-top:var(--s10)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
@container kelo (max-width: 820px){
  .searchbar{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero .tx{padding:var(--s6) var(--s5)}
  .hero .ph{min-height:180px;order:-1}
  .section{margin-top:var(--s8)}
}

/* ---------- 12. Lignes de voyage, étoiles, succès ---------- */
.trip{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s3)}
.trip .ph{aspect-ratio:1;border-radius:var(--r-md)}
.trip .end{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2)}
.stars{display:flex;gap:4px;color:var(--sunken)}
.stars svg{width:26px;height:26px}
.stars .on{color:#E9A21B}
.success-ic{width:72px;height:72px;border-radius:var(--r-xl);background:var(--ok-50);color:var(--ok);display:grid;place-items:center}
.success-ic svg{width:34px;height:34px}
.unread{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}
@container kelo (max-width: 820px){
  .trip{grid-template-columns:88px minmax(0,1fr)}
  .trip .end{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}