/* ═══════════════════════════════════════════════════════════════════════════
   FASUP' UI KIT — la couche « style » extraite de l'app FASUP' Mentor
   ---------------------------------------------------------------------------
   Un seul fichier, aucune dépendance, aucun framework.
   À poser dans n'importe quelle app : <link rel="stylesheet" href="fasup-ui.css">

   REBRANDER : ne touchez QUE le bloc « 1. MARQUE » ci-dessous.
   THÈME SOMBRE : <body data-theme="dark">   (clair par défaut)
   POLICE : Montserrat (Google Fonts) ; sinon la pile système prend le relais.

   Sommaire
     1  Jetons (couleurs, ombres, rayons, animation)
     2  Reset & base
     3  Typographie
     4  Boutons
     5  Cartes
     6  Badges · chips · tags · kbd
     7  Formulaires
     8  Avatars
     9  Données (KPI, jauges, graphiques, tableaux, frises, lignes)
    10  Retours (toast, notification, squelette, états vides)
    11  Surcouches (modale, tiroir, popover, palette ⌘K, tutoriel)
    12  Navigation (rail, topbar, sidebar, barre mobile, onglets, segments)
    13  Mise en page (shell, page, grilles)
    14  Motifs (chat, conversations, kanban, calendrier, feed, quiz…)
    15  Mode sombre
    16  Responsive & accessibilité
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. JETONS
   ═══════════════════════════════════════════════════════════════ */
:root{

  /* ─────── 1. MARQUE — les seules lignes à changer pour rebrander ─────── */
  --brand:#F59D00;        /* couleur principale                    */
  --brand-600:#E08F00;    /* survol                                */
  --brand-700:#C27A00;    /* texte de marque sur fond clair        */
  --brand-800:#9A6100;    /* texte de marque, contraste renforcé   */
  --brand-100:#FDEAC8;    /* teinte : bordures douces              */
  --brand-50:#FEF5E4;     /* teinte : fonds doux, états actifs     */
  --ink:#291D13;          /* encre — texte principal, surfaces sombres */
  --bg:#F7F6F5;           /* fond de l'application                 */
  /* ───────────────────────────────────────────────────────────────────── */

  /* Encres dérivées */
  --ink-2:#4A3B2E;        /* texte secondaire        */
  --ink-soft:#6E6155;     /* texte tertiaire         */
  --ink-mute:#A2988E;     /* texte discret, icônes   */

  /* Surfaces */
  --bg-2:#F1EEEA;         /* fond creusé (barres, pastilles)  */
  --surface:#FFFFFF;      /* cartes, panneaux                 */
  --surface-2:#FBFAF8;    /* survol de ligne, zones internes  */
  --border:#ECE7E0;       /* trait discret   */
  --border-2:#DED7CC;     /* trait de champ  */

  /* Sémantique — chaque couleur a 3 tons : vif · fond · texte */
  --ok:#1E9E5A;      --ok-soft:#E3F4EB;     --ok-ink:#136B3C;
  --warn:#D97706;    --warn-soft:#FCEEDC;   --warn-ink:#92500A;
  --danger:#D64545;  --danger-soft:#FBE8E8; --danger-ink:#A32626;
  --info:#3B6FE0;    --info-soft:#E9F0FC;   --info-ink:#2450A8;
  --violet:#8B5CF6;  --violet-soft:#F0EAFD; --violet-ink:#5B32B4;

  /* Élévation — teintée d'encre, jamais grise : c'est ce qui donne la chaleur */
  --sh-sm:0 1px 2px rgba(41,29,19,.05);
  --sh-md:0 4px 14px -2px rgba(41,29,19,.08);
  --sh-lg:0 12px 32px -6px rgba(41,29,19,.14);
  --sh-xl:0 24px 60px -12px rgba(41,29,19,.22);
  --sh-brand:0 8px 24px -6px rgba(245,157,0,.45);

  /* Géométrie */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sidebar-w:248px;

  /* Animation — deux courbes seulement, tout le kit s'y tient */
  --ease:cubic-bezier(.22,.8,.32,1);      /* sortie douce   */
  --spring:cubic-bezier(.34,1.4,.44,1);   /* léger rebond   */

  /* Typographie */
  --font:'Montserrat','Gilroy',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Surfaces volontairement sombres dans LES DEUX thèmes (toasts, boutons
     sombres…) : elles pointent ici et non sur --ink, qui s'inverse. */
  --always-dark:#291D13;
}

/* Alias historiques : le code venant de FASUP' Mentor utilise --orange-*.
   Déclaré aussi sur le sélecteur sombre, sinon l'alias resterait figé sur la
   valeur claire (une var() est substituée là où elle est déclarée). */
:root,
body[data-theme="dark"]{
  --orange:var(--brand);
  --orange-600:var(--brand-600);
  --orange-700:var(--brand-700);
  --orange-800:var(--brand-800);
  --orange-100:var(--brand-100);
  --orange-50:var(--brand-50);
  --sh-orange:var(--sh-brand);
}


/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}

/* Toute règle `display:` sur une classe l'emporte sur le [hidden] du
   navigateur. Sans ceci, un écran masqué reste dans le flux et rallonge
   la page. Piège coûteux, gardez cette ligne. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--brand-100)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Barres de défilement discrètes */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-mute);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Taille par défaut de TOUTE icône SVG du kit. Sans elle, une icône posée
   hors d'un conteneur prévu s'étire à la taille de son parent. Les règles
   contextuelles (.btn svg, .rnav svg…) restent prioritaires. */
.ico{width:18px;height:18px;flex:none}


/* ═══════════════════════════════════════════════════════════════
   3. TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════ */
.h1{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.h2{font-size:1.25rem;font-weight:800;letter-spacing:-.015em}
.h3{font-size:1.02rem;font-weight:700}
.muted{color:var(--ink-soft)}
.small{font-size:.82rem}
.tiny{font-size:.72rem}
.mono{font-variant-numeric:tabular-nums}   /* chiffres alignés : compteurs, prix, heures */


/* ═══════════════════════════════════════════════════════════════
   4. BOUTONS
   <button class="btn btn-primary">…</button>
   ═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.88rem;border-radius:var(--r-md);
  padding:10px 18px;transition:all .18s var(--ease);
  white-space:nowrap;user-select:none;position:relative;
}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}

.btn-primary{background:var(--brand);color:var(--ink);box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--brand-600);box-shadow:var(--sh-brand);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-outline{background:var(--surface);border:1.5px solid var(--border-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);background:var(--surface)}
.btn-ghost{color:var(--ink-soft)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.btn-soft{background:var(--brand-50);color:var(--brand-800)}
.btn-soft:hover{background:var(--brand-100)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#B93A3A}
.btn-danger-soft{background:var(--danger-soft);color:var(--danger-ink)}

.btn-sm{padding:7px 13px;font-size:.8rem;border-radius:10px}
.btn-lg{padding:14px 26px;font-size:.98rem;border-radius:14px}
.btn-block{width:100%}
.btn-icon{padding:9px;border-radius:var(--r-md)}
.btn-icon svg{width:18px;height:18px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* Chargement : <span class="spin"></span> à l'intérieur du bouton */
.btn .spin{width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* ═══════════════════════════════════════════════════════════════
   5. CARTES
   ═══════════════════════════════════════════════════════════════ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s;
}
.card-hover:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--border-2);cursor:pointer}
.card-flat{box-shadow:none}
.card-brand{background:linear-gradient(135deg,#FFB63B 0%,var(--brand) 55%,#E68A00 100%);border:none;color:var(--ink)}
.card-dark{background:var(--always-dark);border-color:var(--always-dark);color:#fff}
.card-dark .muted{color:rgba(255,255,255,.55)}
.card h4{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px;justify-content:space-between}
.card h4 .see{font-size:.78rem;color:var(--brand-700);cursor:pointer;font-weight:700}
.card h4 .see:hover{text-decoration:underline}

/* Carte à photo (portrait + libellé), grille à hauteur égale */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.photo-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;
  overflow:hidden;box-shadow:var(--sh-sm);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s}
.photo-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.photo-card .pk-img{aspect-ratio:1/1;background:var(--bg-2)}
.photo-card .pk-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.photo-card .pk-body{padding:11px 13px 14px;min-height:62px}
.photo-card .pk-body b{font-size:.92rem;display:block}
.photo-card .pk-body small{font-size:.74rem;color:var(--brand-700);font-weight:700;line-height:1.3;display:block;margin-top:2px}


/* ═══════════════════════════════════════════════════════════════
   6. BADGES · CHIPS · TAGS · KBD
   ═══════════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);letter-spacing:.01em;white-space:nowrap}
.badge svg{width:11px;height:11px}
.b-orange,.b-brand{background:var(--brand-50);color:var(--brand-800)}
.b-ok{background:var(--ok-soft);color:var(--ok-ink)}
.b-warn{background:var(--warn-soft);color:var(--warn-ink)}
.b-danger{background:var(--danger-soft);color:var(--danger-ink)}
.b-info{background:var(--info-soft);color:var(--info-ink)}
.b-violet{background:var(--violet-soft);color:var(--violet-ink)}
.b-neutral{background:var(--bg-2);color:var(--ink-soft)}
.b-ink{background:var(--ink);color:#fff}
.b-dot{width:7px;height:7px;border-radius:50%;flex:none}
/* Badge « généré par IA » : dégradé discret, se distingue sans crier */
.badge-ia{background:linear-gradient(120deg,var(--brand-50),#FDF0FA);color:var(--brand-800);border:1px solid var(--brand-100)}

/* Chip : filtre cliquable, .on quand actif */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;
  padding:7px 14px;border-radius:var(--r-full);background:var(--surface);
  border:1.5px solid var(--border-2);color:var(--ink-soft);cursor:pointer;
  transition:all .15s var(--ease);user-select:none}
.chip:hover{border-color:var(--ink-mute);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip svg{width:13px;height:13px}

.tag{display:inline-flex;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:6px;
  background:var(--bg-2);color:var(--ink-soft)}

/* Pastille d'avertissement (mode démo, aperçu, bêta…) */
.chip-alert{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  padding:4px 10px;border-radius:99px;cursor:pointer;
  background:var(--violet-soft);color:var(--violet-ink);
  font-size:.7rem;font-weight:800;letter-spacing:.2px;
  border:1px solid var(--violet);transition:.15s var(--ease)}
.chip-alert svg{width:13px;height:13px}
.chip-alert:hover{background:var(--violet);color:#fff}

/* Touche clavier */
.kbd{font-size:.68rem;font-weight:700;background:var(--bg-2);border:1px solid var(--border-2);
  border-bottom-width:2px;border-radius:6px;padding:2px 6px;color:var(--ink-soft)}


/* ═══════════════════════════════════════════════════════════════
   7. FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.field .hint{font-size:.74rem;color:var(--ink-mute)}
.field .err-msg{font-size:.74rem;color:var(--danger);display:flex;gap:5px;align-items:center}

.input,.select,.textarea{
  width:100%;background:var(--surface);border:1.5px solid var(--border-2);
  border-radius:var(--r-md);padding:11px 14px;font-size:.9rem;
  transition:border-color .15s,box-shadow .15s;
}
.input:hover,.textarea:hover,.select:hover{border-color:var(--ink-mute)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.input.error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.input::placeholder,.textarea::placeholder{color:var(--ink-mute)}
.textarea{min-height:110px;resize:vertical;line-height:1.6}
/* Chevron du select en data-URI : aucune image à héberger */
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6155' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;cursor:pointer}

/* Champ avec icône : <span class="iwrap">{svg}<input class="input"></span> */
.iwrap{position:relative}
.iwrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-mute);pointer-events:none}
.iwrap .input{padding-left:40px}
.iwrap .peek{position:absolute;right:8px;left:auto;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;
  border-radius:8px;color:var(--ink-mute);pointer-events:auto;background:none}
.iwrap .peek:hover{background:var(--bg-2);color:var(--ink)}
.iwrap .peek svg{position:static;transform:none;width:16px;height:16px}

/* Interrupteur : <label class="switch"><input type="checkbox"><i></i></label> */
.switch{position:relative;width:42px;height:24px;flex:none;cursor:pointer;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--border-2);border-radius:99px;transition:.2s var(--ease)}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;
  border-radius:50%;transition:.22s var(--spring);box-shadow:var(--sh-sm)}
.switch input:checked+i{background:var(--brand)}
.switch input:checked+i::after{transform:translateX(18px)}

/* Case à cocher : <label class="check"><input type="checkbox"><span>…</span></label> */
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.88rem;line-height:1.45}
.check>span,.check>b{display:inline}
.check-txt{flex:1;min-width:0}
.check input{appearance:none;width:19px;height:19px;border:2px solid var(--border-2);border-radius:6px;
  transition:.15s;flex:none;cursor:pointer;position:relative}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}

/* Dépôt de fichier */
.upload{border:2px dashed var(--border-2);border-radius:var(--r-lg);padding:34px 24px;
  text-align:center;cursor:pointer;transition:all .2s var(--ease);background:var(--surface-2)}
.upload:hover,.upload.drag{border-color:var(--brand);background:var(--brand-50)}
.upload .up-ic{width:48px;height:48px;border-radius:14px;background:var(--brand-50);color:var(--brand-700);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:transform .25s var(--spring)}
.upload:hover .up-ic{transform:translateY(-3px) scale(1.05)}
.upload .up-ic svg{width:22px;height:22px}

/* Barre de recherche (topbar) */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:8px 14px;width:100%;max-width:420px;cursor:pointer;
  transition:all .18s var(--ease);color:var(--ink-mute)}
.searchbar:hover{border-color:var(--border-2);box-shadow:var(--sh-sm)}
.searchbar svg{width:16px;height:16px;flex:none}
.searchbar .kbd-group{margin-left:auto;display:flex;gap:4px}

/* Saisie d'un code à usage unique */
.code-inputs{display:flex;gap:10px;justify-content:center;margin:20px 0}
.code-inputs input{width:52px;height:60px;text-align:center;font-size:1.5rem;font-weight:800;
  border:1.5px solid var(--border-2);border-radius:var(--r-md);background:var(--surface);transition:.15s}
.code-inputs input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50);transform:scale(1.04)}

/* Séparateur « ou » */
.form-sep{display:flex;align-items:center;gap:14px;color:var(--ink-mute);font-size:.74rem;font-weight:600;margin:20px 0}
.form-sep::before,.form-sep::after{content:"";flex:1;height:1px;background:var(--border-2)}


/* ═══════════════════════════════════════════════════════════════
   8. AVATARS
   ═══════════════════════════════════════════════════════════════ */
.ava{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.82rem;flex:none;overflow:hidden;position:relative}
.ava img{width:100%;height:100%;object-fit:cover}
.ava svg{width:18px;height:18px;flex:none}
.ava-sm{width:28px;height:28px;font-size:.68rem}
.ava-lg{width:56px;height:56px;font-size:1.1rem}
.ava-xl{width:88px;height:88px;font-size:1.6rem}
.ava-user{background:var(--ink);color:#fff}
.ava-photo{background:var(--bg-2)!important;padding:0}
.ava-ring{box-shadow:0 0 0 2.5px var(--surface),0 0 0 5px var(--brand)}
.ava-stack{display:flex}
.ava-stack .ava{margin-left:-10px;box-shadow:0 0 0 2.5px var(--surface)}
.ava-stack .ava:first-child{margin-left:0}
.ava-status{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;
  background:var(--ok);border:2.5px solid var(--surface)}

/* Avatars d'initiales colorés — un dégradé par personne */
.ava-g1{background:linear-gradient(135deg,#FFC96B,var(--brand))}
.ava-g2{background:linear-gradient(135deg,#7EA4F0,var(--info));color:#fff}
.ava-g3{background:linear-gradient(135deg,#B79BF8,var(--violet));color:#fff}
.ava-g4{background:linear-gradient(135deg,#63C893,var(--ok));color:#fff}


/* ═══════════════════════════════════════════════════════════════
   9. DONNÉES
   ═══════════════════════════════════════════════════════════════ */

/* — KPI — */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease),box-shadow .2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi .k-label{font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.kpi .k-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.kpi .k-ic svg{width:16px;height:16px}
.kpi .k-val{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi .k-val small{font-size:.85rem;font-weight:700;color:var(--ink-mute)}
.kpi .k-delta{font-size:.74rem;font-weight:700;display:flex;align-items:center;gap:4px}
.kpi .k-delta svg{width:12px;height:12px}

/* — Barre de progression — */
.bar{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .8s var(--ease)}
.bar.bar-ok i{background:var(--ok)}
.bar.bar-info i{background:var(--info)}
.bar-sm{height:5px}
.prog{margin-bottom:12px}
.prog .pl{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;margin-bottom:6px}
.prog .pl b{font-variant-numeric:tabular-nums}

/* — Anneau de progression (SVG, généré par ring() côté JS) — */
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .rv{position:absolute;text-align:center;font-weight:800}
.ring .rv small{display:block;font-size:.62rem;font-weight:600;color:var(--ink-mute)}

/* — Histogramme — */
.chart-bars{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:10px}
.chart-bars .cb{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.chart-bars .cb i{width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:var(--brand-100);
  transition:height .7s var(--ease),background .2s;position:relative;min-height:5px}
.chart-bars .cb:hover i{background:var(--brand)}
.chart-bars .cb.hot i{background:var(--brand)}
.chart-bars .cb small{font-size:.66rem;font-weight:700;color:var(--ink-mute)}
.chart-bars .cb .cb-val{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.64rem;
  font-weight:800;opacity:0;transition:opacity .15s;white-space:nowrap}
.chart-bars .cb:hover .cb-val{opacity:1}

/* — Courbe miniature — */
.spark{width:100%;height:44px}
.spark path{fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round}
.spark .fill{fill:url(#sparkFill);stroke:none;opacity:.5}

/* — Tableau — */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.table th{text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-mute);padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.table td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--surface-2)}
/* Actions de ligne révélées au survol */
.table .t-actions{opacity:0;transition:opacity .15s;display:flex;gap:4px}
.table tr:hover .t-actions{opacity:1}

/* — Timeline verticale — */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding-bottom:18px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-26px;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--border-2);display:flex;align-items:center;justify-content:center}
.tl-dot.done{background:var(--ok);border-color:var(--ok)}
.tl-dot.done::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);margin-top:-2px}
.tl-dot.now{border-color:var(--brand);background:var(--brand-50)}
.tl-dot.now::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.tl-item b{font-size:.88rem;display:block}
.tl-item small{color:var(--ink-soft);font-size:.78rem}

/* — Frise horizontale (étapes d'un parcours) — */
.frise{position:relative}
.frise-rail{position:relative;height:4px;border-radius:99px;background:var(--bg-2);margin:0 0 18px}
.frise-rail i{position:absolute;left:0;top:0;height:100%;border-radius:99px;background:var(--brand);transition:width .5s var(--ease)}
.frise-etapes{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.frise-etape{flex:1;min-width:132px;background:var(--surface);border:1.5px solid var(--border-2);
  border-radius:14px;padding:12px 12px 13px;text-align:left;cursor:pointer;transition:all .18s var(--ease);
  display:flex;flex-direction:column;gap:5px;font:inherit;color:inherit}
.frise-etape:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-md)}
.fe-pastille{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);color:var(--ink-mute)}
.fe-pastille svg{width:14px;height:14px}
.fe-date{font-size:.68rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-mute)}
.fe-titre{font-size:.82rem;font-weight:700;line-height:1.3}
.frise-etape.fait .fe-pastille{background:var(--ok-soft);color:var(--ok)}
.frise-etape.encours{border-color:var(--brand);background:var(--brand-50)}
.frise-etape.encours .fe-pastille{background:var(--brand);color:var(--ink)}
.frise-etape.encours .fe-date{color:var(--brand-700)}
.frise-etape.avenir{opacity:.72}

/* — Ligne cliquable (icône · titre · sous-titre · chevron) — */
.row-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:var(--r-md);
  transition:background .13s;cursor:pointer}
.row-item:hover{background:var(--surface-2)}
.ri-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.ri-ic svg{width:18px;height:18px;flex:none}
.row-item .ri-body{flex:1;min-width:0}
.row-item .ri-body b{font-size:.88rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .ri-body small{color:var(--ink-soft);font-size:.76rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .ri-go{color:var(--ink-mute);transition:transform .15s;flex:none}
.row-item:hover .ri-go{transform:translateX(3px);color:var(--brand-700)}
.row-item .ri-go svg{width:16px;height:16px}

/* — Ligne de réglage (libellé + description + contrôle à droite) — */
.set-row{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-row .sr-b{flex:1;min-width:0}
.set-row .sr-b b{font-size:.88rem;display:block}
.set-row .sr-b small{font-size:.76rem;color:var(--ink-soft)}

/* — Nuancier (page de design system) — */
.swatch{width:130px}
.swatch .sw{height:64px;border-radius:12px;border:1px solid rgba(41,29,19,.06);margin-bottom:8px}
.swatch b{font-size:.78rem;display:block}
.swatch small{font-size:.7rem;color:var(--ink-mute);font-family:monospace}


/* ═══════════════════════════════════════════════════════════════
   10. RETOURS
   ═══════════════════════════════════════════════════════════════ */

/* — Toast (bas de l'écran, disparaît seul) — */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:11px;background:var(--always-dark);color:#fff;
  padding:12px 18px;border-radius:var(--r-lg);box-shadow:var(--sh-xl);font-size:.86rem;font-weight:600;
  animation:toastIn .35s var(--spring);pointer-events:auto;max-width:min(480px,90vw)}
.toast.out{animation:toastOut .3s var(--ease) forwards}
.toast svg{width:17px;height:17px;flex:none}
.toast.t-ok svg{color:#5ADB96}
.toast.t-err svg{color:#FF8A8A}
.toast.t-info svg{color:var(--brand)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}

/* — Notification qui se présente d'elle-même (sous la cloche) —
     Une notif qui n'existe que dans une pastille passe inaperçue. */
.notif-flash{
  position:fixed;top:74px;right:22px;z-index:120;
  display:flex;align-items:flex-start;gap:12px;
  width:min(360px,calc(100vw - 44px));padding:14px 14px 14px 15px;
  background:var(--surface);border:1.5px solid var(--border-2);
  border-radius:16px;box-shadow:0 12px 34px -10px rgba(41,29,19,.28);
  cursor:pointer;opacity:0;transform:translateX(18px) scale(.97);
  transition:opacity .26s var(--ease),transform .26s var(--spring);
}
.notif-flash.in{opacity:1;transform:none}
.notif-flash.out{opacity:0;transform:translateX(18px) scale(.97)}
.notif-flash:hover{border-color:var(--brand)}
.notif-flash .nf-ic{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
.notif-flash .nf-ic svg{width:17px;height:17px}
.notif-flash .nf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.notif-flash .nf-txt b{font-size:.87rem;line-height:1.35}
.notif-flash .nf-txt small{font-size:.78rem;color:var(--ink-mute);line-height:1.5}
.notif-flash .nf-x{flex:none;width:26px;height:26px;border-radius:8px;border:none;background:transparent;
  color:var(--ink-mute);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s var(--ease)}
.notif-flash .nf-x:hover{background:var(--bg-2);color:var(--ink)}
.notif-flash .nf-x svg{width:14px;height:14px}

/* — Ligne du centre de notifications — */
.notif-row{display:flex;gap:13px;padding:15px 16px;border-radius:var(--r-lg);transition:background .13s;cursor:pointer;position:relative}
.notif-row:hover{background:var(--surface-2)}
.notif-row.unread{background:var(--brand-50)}
.notif-row.unread:hover{background:var(--brand-100)}
.notif-row .un-dot{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--brand)}
.notif-row .nr-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center}
.notif-row .nr-ic svg{width:16px;height:16px;flex:none}
.notif-row b{font-size:.86rem}
.notif-row p{font-size:.78rem;color:var(--ink-soft)}
.notif-row small{font-size:.68rem;color:var(--ink-mute);white-space:nowrap}

/* — Bandeau d'avertissement (mode démo, aperçu, maintenance…) — */
.bandeau{display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:18px;
  background:var(--violet-soft);border:1.5px solid var(--violet);border-radius:14px}
.bandeau .ab-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.bandeau .ab-txt b{font-size:.88rem}
.bandeau .ab-txt small{font-size:.78rem;color:var(--ink-mute);line-height:1.5}

/* — Squelette de chargement — */
.sk{position:relative;overflow:hidden;background:var(--bg-2);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* — État vide — */
.empty{text-align:center;padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.empty .e-ic{width:64px;height:64px;border-radius:20px;background:var(--bg-2);color:var(--ink-mute);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.empty .e-ic svg{width:28px;height:28px}
.empty b{font-size:1rem}
.empty p{font-size:.85rem;color:var(--ink-soft);max-width:340px}
.empty .btn{margin-top:14px}

/* — Page d'état (404, erreur, accès refusé) — */
.state-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:40px 20px}
.state-page .big{font-size:4.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--brand-700));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.state-page h2{font-size:1.4rem;font-weight:800}
.state-page p{color:var(--ink-soft);max-width:400px;font-size:.9rem}
.state-page .btn{margin-top:18px}

/* — Écran de préparation (chargement long, plein écran) — */
.prep{position:fixed;inset:0;z-index:880;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:24px;animation:fadeIn .3s var(--ease)}
.prep.out{animation:fadeOut .5s var(--ease) forwards}
.prep-box{text-align:center;width:min(430px,100%)}
.prep-txt{font-size:1.06rem;font-weight:700;min-height:28px;animation:fadeIn .4s var(--ease)}
.prep-bar{height:5px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin:18px auto 20px;max-width:280px}
.prep-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:99px;transition:width .6s var(--ease)}
.prep-steps{display:flex;flex-direction:column;gap:6px;align-items:center}
.prep-done{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-soft);animation:fadeIn .35s var(--ease)}
.prep-done svg{width:13px;height:13px;color:var(--ok)}

/* — Célébration (succès, badge débloqué) — */
.badge-pop{position:fixed;inset:0;z-index:900;background:rgba(41,29,19,.5);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s var(--ease)}
.bp-card{background:var(--surface);border-radius:24px;box-shadow:var(--sh-xl);padding:30px 32px;
  text-align:center;width:min(340px,100%);animation:bpIn .5s var(--spring)}
@keyframes bpIn{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
.bp-ic{font-size:3.4rem;line-height:1;margin-bottom:12px;animation:bpBounce 1s var(--spring) .2s both}
@keyframes bpBounce{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.bp-card b{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-700)}
.bp-t{font-size:1.25rem;font-weight:800;margin:6px 0}
.bp-card p{font-size:.84rem;color:var(--ink-soft);margin-bottom:12px}


/* ═══════════════════════════════════════════════════════════════
   11. SURCOUCHES
   ═══════════════════════════════════════════════════════════════ */

/* — Modale — */
.overlay{position:fixed;inset:0;background:rgba(41,29,19,.4);backdrop-filter:blur(4px);
  z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s var(--ease)}
.overlay.closing{animation:fadeOut .18s var(--ease) forwards}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
.modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  animation:modalIn .32s var(--spring)}
.overlay.closing .modal{animation:modalOut .18s var(--ease) forwards}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes modalOut{to{opacity:0;transform:translateY(12px) scale(.97)}}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 0}
.modal-b{padding:16px 24px 24px;overflow-y:auto}
.modal-f{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* — Tiroir latéral — */
.drawer-ov{position:fixed;inset:0;background:rgba(41,29,19,.35);backdrop-filter:blur(2px);z-index:590;animation:fadeIn .2s}
.drawer-ov.closing{animation:fadeOut .2s forwards}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;width:min(480px,calc(100vw - 20px));z-index:595;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  display:flex;flex-direction:column;animation:drawerIn .35s var(--spring)}
.drawer.closing{animation:drawerOut .22s var(--ease) forwards}
@keyframes drawerIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes drawerOut{to{opacity:0;transform:translateX(40px)}}
.drawer-h{padding:20px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.drawer-b{flex:1;overflow-y:auto;padding:18px 22px}
.drawer-f{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px}

/* — Popover / menu contextuel — */
.pop{position:fixed;z-index:560;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);min-width:230px;
  animation:popIn .22s var(--spring);transform-origin:top right;overflow:hidden}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(-6px)}to{opacity:1;transform:none}}
.pop-item{display:flex;align-items:center;gap:11px;padding:10px 14px;font-size:.86rem;font-weight:600;
  cursor:pointer;transition:background .12s;color:var(--ink-2)}
.pop-item:hover{background:var(--surface-2)}
.pop-item svg{width:16px;height:16px;color:var(--ink-soft)}
.pop-item.danger{color:var(--danger)}
.pop-item.danger svg{color:var(--danger)}
.pop-sep{height:1px;background:var(--border);margin:6px 0}
.pop-head{padding:12px 14px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}

/* — Palette de commandes (⌘K) — */
.cmdk{position:fixed;inset:0;z-index:700;background:rgba(41,29,19,.42);backdrop-filter:blur(5px);
  display:flex;justify-content:center;padding:12vh 20px 20px;animation:fadeIn .15s}
.cmdk[hidden]{display:none}
.cmdk-box{width:min(640px,100%);background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-xl);
  height:fit-content;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
  animation:modalIn .28s var(--spring)}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.cmdk-in svg{width:18px;height:18px;color:var(--ink-mute);flex:none}
.cmdk-in input{flex:1;border:none;outline:none;font-size:1rem;background:none}
.cmdk-list{overflow-y:auto;padding:10px}
.cmdk-group{padding:8px 12px 4px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer;font-size:.88rem;font-weight:600}
.cmdk-item:hover,.cmdk-item.sel{background:var(--brand-50)}
.cmdk-item .ci-ic{width:32px;height:32px;border-radius:9px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink-soft)}
.cmdk-item .ci-ic svg{width:15px;height:15px}
.cmdk-item small{color:var(--ink-mute);font-weight:500;margin-left:auto;font-size:.72rem}
.cmdk-foot{border-top:1px solid var(--border);padding:9px 18px;display:flex;gap:16px;font-size:.7rem;color:var(--ink-mute)}

/* — Tutoriel contextuel : trou de lumière + bulle —
     Le « trou » est une ombre de 9999px : aucun masque, aucun canvas. */
.tour-spot{position:fixed;z-index:800;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(41,29,19,.58),0 0 0 3px var(--brand),0 0 0 9px rgba(245,157,0,.28);
  transition:top .38s var(--ease),left .38s var(--ease),width .38s var(--ease),height .38s var(--ease)}
.tour-spot.pulse::after{content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid var(--brand);animation:tourPulse 1.8s ease-out infinite}
@keyframes tourPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
.tour-spot.cliquable{cursor:pointer;box-shadow:0 0 0 9999px rgba(41,29,19,.62),0 0 0 3px var(--brand),0 0 0 10px rgba(245,157,0,.35)}
.tour-target{position:relative;z-index:805!important;animation:tourInvite 1.6s ease-in-out infinite}
@keyframes tourInvite{0%,100%{transform:none}50%{transform:scale(1.06)}}
/* Entrée en fondu SEULEMENT : un transform fausserait la position mesurée
   (getBoundingClientRect renvoie la boîte transformée). */
.tour-pop{position:fixed;z-index:810;width:min(320px,calc(100vw - 32px));background:var(--surface);
  border-radius:var(--r-xl);box-shadow:var(--sh-xl);padding:18px 20px 16px;
  animation:fadeIn .28s var(--ease);transition:top .38s var(--ease),left .38s var(--ease)}
.tour-pop .tp-h{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.tour-pop .tp-h img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:top;flex:none}
.tour-pop .tp-h b{font-size:.94rem;font-weight:800;letter-spacing:-.01em}
.tour-pop p{font-size:.84rem;line-height:1.55;color:var(--ink-2)}
.tour-pop .tp-f{display:flex;align-items:center;gap:10px;margin-top:16px}
.tour-pop .tp-step{font-size:.74rem;font-weight:700;color:var(--ink-mute);flex:1;font-variant-numeric:tabular-nums}
.tour-pop .tp-dots{display:flex;gap:4px;margin-top:2px}
.tour-pop .tp-dots i{width:5px;height:5px;border-radius:99px;background:var(--border-2);transition:.25s}
.tour-pop .tp-dots i.on{background:var(--brand);width:14px}
.tour-pop::before{content:"";position:absolute;width:14px;height:14px;background:var(--surface);transform:rotate(45deg)}
.tour-pop[data-arrow="left"]::before{left:-6px;top:26px}
.tour-pop[data-arrow="right"]::before{right:-6px;top:26px}
.tour-pop[data-arrow="top"]::before{top:-6px;left:26px}
.tour-pop[data-arrow="bottom"]::before{bottom:-6px;left:26px}
.tour-pop[data-arrow="none"]::before{display:none}
.tour-pop.tour-action{border:2px solid var(--brand)}
.tp-cta{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;
  color:var(--brand-700);background:var(--brand-50);border-radius:99px;padding:7px 13px}
.tp-cta svg{width:13px;height:13px;animation:ctaPointe 1.2s ease-in-out infinite}
@keyframes ctaPointe{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.tp-skip{display:block;width:100%;margin-top:10px;font-size:.72rem;color:var(--ink-mute);font-weight:700;padding:4px}
.tp-skip:hover{color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════
   12. NAVIGATION
   Quatre présentations pour le MÊME balisage : posez data-menu sur <body>
     (rien)        → rail vertical flottant, orange     [défaut]
     data-menu="2" → barre horizontale en haut
     data-menu="3" → sidebar détaillée, claire
     data-menu="4" → dock flottant en bas
   ═══════════════════════════════════════════════════════════════ */

/* — Rail vertical (défaut) — */
.rail{width:74px;flex:none;position:sticky;top:14px;height:calc(100vh - 28px);margin:14px 0 14px 14px;z-index:50;
  background:linear-gradient(170deg,#FFAD1F 0%,var(--brand) 45%,#E89000 100%);
  border-radius:26px;box-shadow:0 10px 30px -8px rgba(245,157,0,.5);
  display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px}
.rail-logo{width:46px;height:46px;border-radius:15px;background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-weight:900;font-size:1.32rem;letter-spacing:-.04em;line-height:1;
  margin-bottom:14px;transition:transform .25s var(--spring);box-shadow:0 4px 14px rgba(41,29,19,.2)}
.rail-logo i{color:var(--brand);font-style:normal;margin-left:1px}
.rail-logo:hover{transform:scale(1.08) rotate(-4deg)}
/* Menu long : la liste défile au lieu de déborder du rail. La barre de
   défilement est masquée — sur 74 px de large, elle mangerait les icônes. */
.rail nav{display:flex;flex-direction:column;gap:4px;align-items:center;
  flex:1;min-height:0;width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail nav::-webkit-scrollbar{display:none}

/* ⚠️ UNE LISTE QUI DÉFILE COUPE CE QUI SORT DE SA BOÎTE — et l'infobulle
   de chaque lien sort à droite, à 14 px du rail. Elle naissait donc
   exactement sur le bord du rognage : AUCUNE icône du rail ne disait
   jamais son nom, sur les trois applications à la fois.

   On élargit la boîte qui défile vers la droite, de quoi loger
   l'infobulle. Les liens, eux, restent centrés dans les 74 px d'origine —
   la largeur ajoutée n'est que du vide, et ce vide est rendu transparent
   aux clics pour ne pas couvrir une bande de la page.

   Rien de tout cela ne concerne les deux autres formes de menu : elles
   affichent le libellé en toutes lettres et n'ont pas d'infobulle. */
body:not([data-menu="2"]):not([data-menu="3"]) .rail nav{
  align-self:flex-start;width:calc(100% + 210px);padding-right:210px;pointer-events:none}
body:not([data-menu="2"]):not([data-menu="3"]) .rail nav>*{pointer-events:auto}
.rail-sep{width:26px;height:1px;background:rgba(41,29,19,.16);margin:8px 0}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:center}
.rail-foot .ava{cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.5);transition:box-shadow .2s}
.rail-foot .ava:hover,.rail-foot .ava.ava-on{box-shadow:0 0 0 2.5px var(--ink)}

/* Lien du rail. L'infobulle est un ::after nourri par data-tip — pas de JS. */
/* flex:none — sinon, dans un rail plus court que le menu, les liens
   s'écrasent au lieu de laisser la liste défiler. */
.rnav{position:relative;width:46px;height:46px;border-radius:15px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:rgba(41,29,19,.55);cursor:pointer;transition:all .18s var(--ease)}
.rnav svg{width:20px;height:20px;transition:transform .2s var(--spring)}
.rnav:hover{color:var(--ink);background:rgba(255,255,255,.42)}
.rnav:hover svg{transform:scale(1.12)}
.rnav.on{background:var(--ink);color:var(--brand);box-shadow:0 4px 14px rgba(41,29,19,.3)}
.rnav .rn-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:99px;
  background:var(--ink);color:#fff;font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid var(--brand)}
.rnav::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-6px);
  background:var(--always-dark);color:#fff;font-size:.74rem;font-weight:700;padding:6px 12px;border-radius:10px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:all .18s var(--ease);box-shadow:var(--sh-md);z-index:60}
.rnav:hover::after{opacity:1;transform:translateY(-50%)}
/* Un seul balisage pour les quatre variantes : le libellé n'apparaît que dans
   celles qui portent du texte. Exclure .rn-badge, qui est aussi un span. */
.rnav>span:not(.rn-badge){display:none}
body[data-menu="2"] .rnav>span:not(.rn-badge),
body[data-menu="3"] .rnav>span:not(.rn-badge){display:inline}

/* — V2 : barre horizontale — */
body[data-menu="2"] .app{flex-direction:column}
body[data-menu="2"] .rail{width:auto;height:auto;margin:0;position:sticky;top:0;border-radius:0;
  padding:0;box-shadow:0 2px 14px -4px rgba(41,29,19,.18);z-index:60}
body[data-menu="2"] .nav-bar{display:flex;align-items:center;gap:16px;padding:10px 22px;width:100%}
body[data-menu="2"] .nav-bar nav{flex-direction:row;gap:2px;flex:1;overflow-x:auto}
body[data-menu="2"] .rnav{width:auto;height:38px;padding:0 13px;gap:8px;border-radius:11px;font-size:.83rem;font-weight:700}
body[data-menu="2"] .rnav span{white-space:nowrap}
body[data-menu="2"] .rnav::after{display:none}
body[data-menu="2"] .rail-logo{width:38px;height:38px;font-size:1.05rem;margin:0;border-radius:12px}
body[data-menu="2"] .topbar{top:58px}
body[data-menu="2"] .main{min-height:auto}

/* — V3 : sidebar détaillée — */
body[data-menu="3"] .rail{width:236px;background:var(--surface);border:1px solid var(--border);
  align-items:stretch;padding:18px 12px;box-shadow:var(--sh-sm)}
body[data-menu="3"] .rail-logo{background:var(--brand);color:var(--ink);margin:0 0 6px 6px;box-shadow:none}
body[data-menu="3"] .rail nav{align-items:stretch;gap:2px}
body[data-menu="3"] .rnav{width:100%;height:auto;padding:10px 12px;gap:11px;justify-content:flex-start;
  border-radius:12px;font-size:.87rem;font-weight:600;color:var(--ink-soft)}
body[data-menu="3"] .rnav:hover{background:var(--surface-2);color:var(--ink)}
body[data-menu="3"] .rnav.on{background:var(--brand-50);color:var(--ink);box-shadow:none}
body[data-menu="3"] .rnav.on svg{color:var(--brand-700)}
body[data-menu="3"] .rnav::after{display:none}
body[data-menu="3"] .nav-sec{padding:14px 14px 6px;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute)}
body[data-menu="3"] .rail-foot{width:100%;align-items:stretch;gap:4px;border-top:1px solid var(--border);padding-top:10px}
body[data-menu="3"] .rail-foot .ava{box-shadow:none}

/* — V4 : dock flottant — */
body[data-menu="4"] .rail{position:fixed;left:50%;bottom:18px;top:auto;transform:translateX(-50%);
  width:auto;height:auto;margin:0;border-radius:22px;padding:0;z-index:460}
body[data-menu="4"] .nav-dock{display:flex;align-items:center;gap:6px;padding:9px 14px}
body[data-menu="4"] .nav-dock nav{flex-direction:row;gap:3px}
body[data-menu="4"] .rail-logo{width:38px;height:38px;font-size:1.05rem;margin:0;border-radius:12px}
body[data-menu="4"] .rnav{width:42px;height:42px}
body[data-menu="4"] .rnav::after{top:auto;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px)}
body[data-menu="4"] .rnav:hover::after{transform:translateX(-50%)}
body[data-menu="4"] .dock-sep{width:1px;height:26px;background:rgba(41,29,19,.16)}
body[data-menu="4"] .page{padding-bottom:110px}

/* Variantes à libellé : la pastille se pose en bout de ligne, plus au-dessus. */
body[data-menu="2"] .rnav .rn-badge,
body[data-menu="3"] .rnav .rn-badge{position:static;margin-left:auto;border-color:transparent;
  background:var(--brand);color:var(--ink)}
body[data-menu="3"] .rnav{justify-content:flex-start}
body[data-menu="4"] .rnav .rn-badge{border-color:var(--always-dark)}

/* — Sidebar classique (alternative au rail) — */
.sidebar{width:var(--sidebar-w);flex:none;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:50;
  transition:width .25s var(--ease)}
.sb-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;cursor:pointer}
.sb-logo .lg{width:34px;height:34px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.05rem;color:var(--ink);flex:none;box-shadow:var(--sh-sm)}
.sb-logo b{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.sb-logo b span{color:var(--brand-700)}
.sb-logo small{display:block;font-size:.62rem;color:var(--ink-mute);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sb-section{padding:14px 20px 6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.sb-nav{padding:0 12px;display:flex;flex-direction:column;gap:2px}
.navi{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);
  font-size:.87rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .15s var(--ease);position:relative}
.navi svg{width:18px;height:18px;flex:none;transition:transform .2s var(--spring)}
.navi:hover{background:var(--surface-2);color:var(--ink)}
.navi:hover svg{transform:scale(1.08)}
.navi.on{background:var(--brand-50);color:var(--ink);font-weight:700}
/* Le liseré actif déborde du padding de .sb-nav : d'où le left négatif. */
.navi.on::before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:3.5px;border-radius:0 4px 4px 0;background:var(--brand)}
.navi.on svg{color:var(--brand-700)}
.navi .n-badge{margin-left:auto;background:var(--brand);color:var(--ink);font-size:.66rem;font-weight:800;
  min-width:19px;height:19px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.sb-foot{margin-top:auto;padding:14px 12px;border-top:1px solid var(--border)}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.sb-user:hover{background:var(--surface-2)}
.sb-user .su-n{flex:1;min-width:0}
.sb-user .su-n b{font-size:.82rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .su-n small{font-size:.7rem;color:var(--ink-soft)}
.sb-user>svg{width:15px;height:15px;color:var(--ink-mute)}
/* Encart promotionnel en pied de sidebar */
.sb-card{background:linear-gradient(135deg,var(--brand-50),#FDF3E0);border:1px solid var(--brand-100);
  border-radius:var(--r-lg);padding:14px;margin:0 8px 12px;position:relative;overflow:hidden}
.sb-card::after{content:"";position:absolute;right:-22px;top:-22px;width:80px;height:80px;border-radius:50%;background:rgba(245,157,0,.14)}
.sb-card b{font-size:.8rem;display:block}
.sb-card p{font-size:.72rem;color:var(--ink-soft);margin:3px 0 10px}

/* — Topbar — */
.topbar{position:sticky;top:0;z-index:40;background:rgba(247,246,245,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;gap:16px}
.tb-crumb{font-size:.8rem;color:var(--ink-mute);font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
.tb-crumb b{color:var(--ink);font-weight:700}
.tb-crumb svg{width:13px;height:13px}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-btn{position:relative;width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);transition:all .15s;background:var(--surface);border:1px solid var(--border)}
.tb-btn:hover{color:var(--ink);border-color:var(--border-2);box-shadow:var(--sh-sm)}
.tb-btn svg{width:17px;height:17px}
.tb-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--brand);border:2px solid var(--surface)}

/* — Logo typographique (lockup mot + baseline) — */
.brand{display:flex;flex-direction:column;line-height:1;cursor:pointer;flex:none;user-select:none}
.brand .bw{font-weight:900;font-size:1.16rem;letter-spacing:-.03em;color:var(--ink)}
.brand .bw i{color:var(--brand);font-style:normal}
.brand .bs{font-size:.6rem;letter-spacing:.22em;font-weight:800;color:var(--ink-mute);margin-top:3px}
.brand-lg .bw{font-size:1.7rem}
.brand-lg .bs{font-size:.72rem;margin-top:5px}
.brand-inv .bw{color:#fff}
.brand-inv .bs{color:rgba(255,255,255,.5)}

/* — Barre mobile (activée sous 720 px, voir §16) — */
.mobilebar{display:none}
.mb-item{position:relative}
.mb-item .rn-badge{position:absolute;top:2px;right:calc(50% - 18px);min-width:15px;height:15px;
  border-radius:99px;background:var(--brand);color:var(--ink);font-size:.58rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg)}
.burger{display:none}
.mob-only{display:none!important}

/* — Onglets — */
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--border);margin-bottom:22px;overflow-x:auto}
.tab{padding:10px 16px;font-size:.86rem;font-weight:700;color:var(--ink-soft);cursor:pointer;
  border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:.15s;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-color:var(--brand)}

/* — Contrôle segmenté (Semaine / Mois…) — */
.seg{display:inline-flex;background:var(--surface);border:1.5px solid var(--border-2);
  border-radius:12px;padding:3px;gap:2px}
.seg-b{display:flex;align-items:center;gap:6px;padding:7px 13px;border:none;background:transparent;
  border-radius:9px;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink-mute);
  cursor:pointer;transition:.15s var(--ease)}
.seg-b svg{width:15px;height:15px}
.seg-b.on{background:var(--ink);color:#fff}
.seg-b:not(.on):hover{background:var(--bg-2);color:var(--ink)}

/* — Bouton flottant (action principale, coin bas-droit) — */
.fab{position:fixed;right:22px;bottom:22px;z-index:450;width:58px;height:58px;border-radius:50%;
  background:var(--brand);color:var(--ink);box-shadow:var(--sh-brand);
  display:flex;align-items:center;justify-content:center;transition:transform .25s var(--spring)}
.fab:hover{transform:scale(1.08) translateY(-2px)}
.fab svg{width:24px;height:24px}
.fab .fab-pulse{position:absolute;inset:0;border-radius:50%;border:3px solid var(--brand);animation:dockPulse 2.4s infinite}
@keyframes dockPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}


/* ═══════════════════════════════════════════════════════════════
   13. MISE EN PAGE
   ═══════════════════════════════════════════════════════════════ */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.page{flex:1;padding:26px 28px 80px;max-width:1240px;width:100%;margin:0 auto;outline:none}
.page-enter{animation:pageIn .35s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page-h{margin-bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-h p{color:var(--ink-soft);font-size:.9rem;margin-top:4px;max-width:560px}
.page-h .ph-actions{display:flex;gap:10px;flex:none}

/* Grilles — minmax(0,1fr) et pas 1fr : sinon un enfant large fait déborder. */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.g32{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}

/* Mise en page « réseau social » : 3 colonnes, latérales collantes */
.social{display:grid;grid-template-columns:264px minmax(0,1fr) 296px;gap:18px;align-items:start}
.soc-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:86px}
.soc-feed{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Section de page (titre + sous-titre + contenu) */
.ds-section{margin-bottom:38px}
.ds-section>h3{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.ds-section>.ds-sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:16px}
.ds-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}


/* ═══════════════════════════════════════════════════════════════
   14. MOTIFS
   ═══════════════════════════════════════════════════════════════ */

/* — Conversation / chat — */
.chat-wrap{display:flex;gap:16px;height:calc(100vh - 170px);min-height:480px}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.chat-body{flex:1;overflow-y:auto;padding:16px 20px 8px;display:flex;flex-direction:column;gap:11px;background:var(--surface-2)}
.chat-side{width:280px;flex:none;display:flex;flex-direction:column;gap:14px;overflow-y:auto}

/* Bulle : le coin « mordu » indique qui parle — haut-gauche eux, haut-droit moi. */
.msg{display:flex;gap:9px;max-width:82%;animation:msgIn .3s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .bubble{background:var(--surface);border:1px solid var(--border);border-radius:4px 16px 16px 16px;
  padding:9px 13px;font-size:.855rem;line-height:1.5;box-shadow:var(--sh-sm)}
.msg .bubble b{font-weight:700}
.msg .bubble ul{margin:8px 0 4px 18px}
.msg .bubble li{margin-bottom:4px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:var(--ink);color:#fff;border:none;border-radius:18px 4px 18px 18px}
.msg-meta{font-size:.66rem;color:var(--ink-mute);margin-top:3px;display:flex;gap:10px;align-items:center}
.msg-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions{opacity:1}
.msg-actions button{padding:4px;border-radius:6px;color:var(--ink-mute)}
.msg-actions button:hover{background:var(--bg-2);color:var(--ink)}
.msg-actions svg{width:13px;height:13px;display:block}

/* Indicateur de frappe */
.typing{display:inline-flex;gap:4px;padding:10px 15px;background:var(--surface);border:1px solid var(--border);border-radius:4px 18px 18px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-mute);animation:tb 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tb{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* Suggestions de réponse */
.suggest{display:flex;gap:6px;flex-wrap:wrap;padding:2px 0}
.sug{font-size:.76rem;font-weight:600;padding:6px 11px;border-radius:var(--r-full);background:var(--surface);
  border:1.5px solid var(--border-2);cursor:pointer;transition:all .15s var(--ease);color:var(--ink-2)}
.sug:hover{border-color:var(--brand);background:var(--brand-50);transform:translateY(-1px)}

/* Zone de saisie */
.chat-input{padding:10px 16px 12px;border-top:1px solid var(--border);background:var(--surface)}
.ci-box{display:flex;align-items:flex-end;gap:8px;background:var(--surface-2);border:1.5px solid var(--border-2);
  border-radius:var(--r-lg);padding:8px 8px 8px 16px;transition:border-color .15s,box-shadow .15s}
.ci-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.ci-box textarea{flex:1;border:none;outline:none;background:none;resize:none;font-size:.86rem;line-height:1.45;max-height:110px;padding:4px 0}
.ci-tools{display:flex;gap:2px}
.ci-tools button{padding:8px;border-radius:10px;color:var(--ink-mute);transition:all .13s}
.ci-tools button:hover{background:var(--bg-2);color:var(--ink)}
.ci-tools svg{width:17px;height:17px;display:block}
.ci-send{width:38px;height:38px;border-radius:12px;background:var(--brand);color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease);flex:none}
.ci-send:hover{background:var(--brand-600);transform:scale(1.05)}
.ci-send svg{width:16px;height:16px}
.ci-hint{font-size:.68rem;color:var(--ink-mute);margin-top:8px;text-align:center}

/* Pièce jointe et source citée */
.attach-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:10px;padding:6px 10px;font-size:.76rem;font-weight:600;margin:0 6px 8px 0}
.attach-chip svg{width:13px;height:13px;color:var(--brand-700)}
.attach-chip .x{cursor:pointer;color:var(--ink-mute);display:flex}
.source-pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:4px 10px;
  border-radius:8px;background:var(--info-soft);color:var(--info-ink);margin:6px 6px 0 0;cursor:pointer;transition:.13s}
.source-pill:hover{background:#D9E5FA}
.source-pill svg{width:11px;height:11px}

/* Note vocale */
.voice{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:4px 18px 18px 18px;padding:11px 16px;box-shadow:var(--sh-sm)}
.voice .v-play{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring)}
.voice .v-play:hover{transform:scale(1.09)}
.voice .v-play svg{width:13px;height:13px;margin-left:2px}
.voice .wave{display:flex;align-items:center;gap:2.5px;height:26px;flex:1}
.voice .wave i{width:2.5px;border-radius:99px;background:var(--brand-100);transition:background .2s}
.voice .wave i.p{background:var(--brand)}
.voice .v-time{font-size:.72rem;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none}

/* Dictée vocale */
.mic-zone{display:flex;align-items:center;gap:16px;background:var(--surface);border:1.5px solid var(--border-2);
  border-radius:var(--r-xl);padding:16px 20px;transition:all .25s var(--ease)}
.mic-zone.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 4px rgba(245,157,0,.12)}
.mic-btn{width:58px;height:58px;border-radius:50%;background:var(--brand);color:var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring);box-shadow:var(--sh-brand)}
.mic-btn:hover{transform:scale(1.06)}
.mic-btn[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
.mic-btn svg{width:24px;height:24px}
.mic-zone.on .mic-btn{animation:micPulse 1.6s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,157,0,.5)}50%{box-shadow:0 0 0 14px rgba(245,157,0,0)}}
.mic-txt{flex:1;min-width:0}
.mic-txt b{display:block;font-size:.9rem}
.mic-txt small{font-size:.76rem;color:var(--ink-soft)}
.mic-chrono{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem;color:var(--ink-mute);flex:none}
.mic-zone.on .mic-chrono{color:var(--brand-700)}

/* — Liste de conversations (colonne de messagerie) — */
.conv-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-sm)}
.conv-h{display:flex;align-items:center;gap:10px;padding:18px 18px 12px}
.conv-h b{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;flex:1}
.conv-h .ch-btn{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);transition:.15s}
.conv-h .ch-btn:hover{background:var(--bg-2);color:var(--ink)}
.conv-h .ch-btn svg{width:16px;height:16px}
.conv-sec{display:flex;align-items:center;gap:7px;padding:10px 18px 6px;font-size:.68rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.conv-sec svg{width:12px;height:12px}
.conv-list{flex:1;overflow-y:auto;padding:0 10px 12px}
.conv{display:flex;gap:11px;padding:11px 10px;border-radius:14px;cursor:pointer;transition:background .13s;position:relative}
.conv:hover{background:var(--surface-2)}
.conv.on{background:var(--always-dark)}
.conv.on .cv-n b,.conv.on .cv-t{color:#fff}
.conv.on .cv-n small{color:rgba(255,255,255,.6)}
.conv .cv-a{position:relative;flex:none}
.conv .cv-a i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--ok);border:2px solid var(--surface)}
.conv.on .cv-a i{border-color:var(--always-dark)}
.conv .cv-n{flex:1;min-width:0}
.conv .cv-n b{font-size:.85rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .cv-n small{font-size:.75rem;color:var(--ink-soft);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .cv-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.conv .cv-t{font-size:.66rem;color:var(--ink-mute);font-weight:600;white-space:nowrap}
.conv .cv-b{min-width:18px;height:18px;border-radius:99px;background:var(--brand);color:var(--ink);
  font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* Entrée présente mais indisponible : visible, grisée, non cliquable */
.conv.bientot{opacity:.5;cursor:default}
.conv.bientot .cv-a img,.conv.bientot .cv-a .ava{filter:grayscale(1)}
.conv.bientot:hover{background:transparent;opacity:.62}
.conv.bientot .cv-n b{font-weight:600}
/* Rangée d'avatars « en ligne » */
.online-row{display:flex;gap:12px;padding:2px 16px 10px;overflow-x:auto}
.on-ava{position:relative;flex:none;cursor:pointer;text-align:center;width:44px}
.on-ava .ava{width:44px;height:44px;transition:transform .2s var(--spring)}
.on-ava:hover .ava{transform:scale(1.08)}
.on-ava i{position:absolute;right:1px;bottom:15px;width:11px;height:11px;border-radius:50%;
  background:var(--ok);border:2.5px solid var(--surface)}
.on-ava small{display:block;font-size:.62rem;font-weight:700;color:var(--ink-soft);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* — Kanban — */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:270px;gap:14px;overflow-x:auto;padding-bottom:14px;align-items:start}
.kb-col{background:var(--bg-2);border-radius:var(--r-lg);padding:12px;min-height:120px}
.kb-col.dragover{outline:2px dashed var(--brand);outline-offset:-2px;background:var(--brand-50)}
.kb-h{display:flex;align-items:center;gap:8px;padding:2px 6px 10px;font-size:.8rem;font-weight:700}
.kb-h .cnt{margin-left:auto;font-size:.7rem;background:var(--surface);border-radius:99px;padding:1px 8px;color:var(--ink-soft)}
.kb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;
  margin-bottom:9px;cursor:grab;box-shadow:var(--sh-sm);transition:all .15s var(--ease)}
.kb-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.kb-card.dragging{opacity:.5;transform:rotate(2deg)}
.kb-card b{font-size:.85rem;display:block}
.kb-card .kb-sub{font-size:.74rem;color:var(--ink-soft);margin:2px 0 8px}
.kb-card .kb-foot{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--ink-mute)}
.kb-card .kb-foot svg{width:11px;height:11px}

/* — Calendrier, vue mois — */
.cal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-dow{font-size:.66rem;font-weight:700;color:var(--ink-mute);text-transform:uppercase;padding:6px 0}
.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;font-size:.8rem;font-weight:600;cursor:pointer;transition:.13s;position:relative}
.cal-day:hover{background:var(--bg-2)}
.cal-day.off{color:var(--ink-mute);opacity:.45}
.cal-day.today{background:var(--ink);color:#fff;font-weight:800}
.cal-day .ev{position:absolute;bottom:5px;display:flex;gap:2px}
.cal-day .ev i{width:4px;height:4px;border-radius:50%}

/* — Planning, vue semaine (colonnes d'heures, évènements positionnés en absolu) — */
.sem-h{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1.5px solid var(--border-2)}
.sem-h b{font-size:.95rem}
.sem-jours{display:grid;grid-template-columns:52px repeat(7,1fr);border-bottom:1.5px solid var(--border-2);background:var(--bg)}
.sem-coin{border-right:1px solid var(--border-2)}
.sem-jn{padding:5px 4px;text-align:center;border-right:1px solid var(--border-2);display:flex;flex-direction:column;gap:1px}
.sem-jn:last-child{border-right:none}
.sem-jn small{font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-mute)}
.sem-jn b{font-size:.92rem}
.sem-jn.on{background:var(--brand-50)}
.sem-jn.on small,.sem-jn.on b{color:var(--brand-700)}
.sem-corps{display:grid;grid-template-columns:46px 1fr;overflow-x:auto;padding:10px 0 14px}
.sem-heures{position:relative;border-right:1px solid var(--border-2)}
.sem-h-lab{position:absolute;right:7px;transform:translateY(-50%);font-size:.68rem;font-weight:700;color:var(--ink-mute);white-space:nowrap}
.sem-grille{position:relative;display:grid;grid-template-columns:repeat(7,1fr);min-width:560px}
.sem-ligne{position:absolute;left:0;right:0;height:1px;background:var(--bg-2);pointer-events:none}
.sem-col{position:relative;border-right:1px solid var(--bg-2)}
.sem-col:last-child{border-right:none}
.sem-col.on{background:rgba(245,157,0,.045)}
.sem-ev{position:absolute;margin-left:2px;padding:5px 7px;text-align:left;
  background:var(--surface);border:1px solid var(--border-2);border-left:3px solid var(--brand);
  border-radius:8px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;gap:1px;
  font:inherit;color:inherit;transition:all .15s var(--ease);box-shadow:0 1px 3px rgba(41,29,19,.06)}
.sem-ev:hover{box-shadow:0 6px 16px -6px rgba(41,29,19,.28);z-index:5;transform:translateY(-1px)}
.sem-ev b{font-size:.73rem;font-weight:700;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sem-ev.serre{padding:4px 7px;gap:0}
.sem-ev.serre b{-webkit-line-clamp:1}
.sem-ev.court{justify-content:center;padding:2px 6px}
.sem-ev.court small{display:none}
.sem-ev.court b{-webkit-line-clamp:1}
.sem-ev small{font-size:.66rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* — Fil social : composer, publication, commentaires — */
.composer{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px 18px;box-shadow:var(--sh-sm)}
.composer .cp-top{display:flex;gap:12px;align-items:center}
.composer .cp-input{flex:1;background:var(--surface-2);border:1.5px solid var(--border);border-radius:99px;
  padding:12px 20px;font-size:.9rem;color:var(--ink-mute);cursor:text;transition:all .18s var(--ease)}
.composer .cp-input:hover{border-color:var(--brand);background:var(--brand-50);color:var(--ink-soft)}
.composer .cp-input[contenteditable]{outline:none;min-height:22px;color:var(--ink);cursor:text}
.composer .cp-input:empty::before{content:attr(data-vide);color:var(--ink-mute)}
.composer .cp-acts{display:flex;gap:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap}
.cp-act{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  padding:7px 12px;border-radius:10px;cursor:pointer;transition:.15s}
.cp-act:hover{background:var(--bg-2);color:var(--ink)}
.cp-act svg{width:15px;height:15px}

.post{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px 20px;
  box-shadow:var(--sh-sm);transition:box-shadow .2s var(--ease)}
.post:hover{box-shadow:var(--sh-md)}
.post-moi{border-left:3px solid var(--brand)}
.post-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.post-h .ph-n{flex:1;min-width:0}
.post-h .ph-n b{font-size:.9rem;display:flex;align-items:center;gap:7px}
.post-h .ph-n small{font-size:.72rem;color:var(--ink-mute)}
.post-h .btn-icon{color:var(--ink-mute)}
.post-body{font-size:.89rem;line-height:1.6}
.post-acts{display:flex;gap:2px;margin-top:14px;padding-top:11px;border-top:1px solid var(--border)}
.pa{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  padding:7px 13px;border-radius:10px;cursor:pointer;transition:.15s}
.pa:hover{background:var(--brand-50);color:var(--brand-800)}
.pa svg{width:15px;height:15px}
.pa.liked{color:var(--brand-700)}
.pa.liked svg{fill:var(--brand);stroke:var(--brand)}

.comments{margin-top:10px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.cmt{display:flex;gap:9px;align-items:flex-start}
.cmt-b{background:var(--surface-2);border-radius:4px 14px 14px 14px;padding:9px 13px;flex:1;min-width:0}
.cmt-b b{font-size:.8rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cmt-b b .badge{font-size:.62rem;padding:1px 7px}
.cmt-b p{font-size:.84rem;line-height:1.55;margin-top:3px;color:var(--ink-2)}
.cmt-b small{font-size:.66rem;color:var(--ink-mute);display:block;margin-top:4px}
.cmt-ia{background:var(--brand-50)}
.cmt-new{align-items:center}
.cmt-input{flex:1;min-width:0;background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:99px;padding:9px 16px;font-size:.84rem;outline:none;transition:.15s}
.cmt-input:focus{border-color:var(--brand);background:var(--surface)}

/* Stories (rangée d'avatars à anneau dégradé) */
.stories{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 8px}
.story{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;flex:none;width:66px}
.story .st-ring{width:62px;height:62px;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg,var(--brand),#FFC96B,var(--brand-700),var(--brand));
  transition:transform .22s var(--spring)}
.story:hover .st-ring{transform:scale(1.07) rotate(6deg)}
.story .st-in{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1.05rem}
.story .st-in img{width:100%;height:100%;object-fit:cover;object-position:top}
.story small{font-size:.68rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.story.st-add .st-ring{background:var(--bg-2)}
.story.st-add .st-in{background:var(--surface);color:var(--brand-700)}
.story.st-add .st-in svg{width:20px;height:20px}

/* — Profil : bannière + avatar débordant + statistiques — */
.prof-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-sm);margin-bottom:18px}
.prof-cover{height:150px;position:relative;background:linear-gradient(120deg,#FFB63B 0%,var(--brand) 52%,#E68A00 100%)}
/* Motif nid d'abeille en data-URI : la texture sans image à charger */
.prof-cover::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='56' height='97' viewBox='0 0 56 97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17L28 0zm0 64.67L56 80.83V97H0V80.83L28 64.67z' fill='%23291D13' fill-opacity='.07'/%3E%3C/svg%3E")}
.prof-cover .pc-edit{position:absolute;right:16px;top:16px;z-index:2;background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);border-radius:10px;padding:7px 13px;font-size:.76rem;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:.15s}
.prof-cover .pc-edit:hover{background:#fff}
.prof-cover .pc-edit svg{width:13px;height:13px}
.prof-main{padding:0 26px 22px;display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.prof-ava{margin-top:-46px;position:relative;z-index:2;flex:none}
.prof-ava .ava{width:108px;height:108px;font-size:2rem;box-shadow:0 0 0 5px var(--surface)}
.prof-ava .pa-cam{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:50%;background:var(--surface);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-sm);transition:.15s}
.prof-ava .pa-cam:hover{background:var(--brand-50);border-color:var(--brand)}
.prof-ava .pa-cam svg{width:14px;height:14px;color:var(--ink-soft)}
.prof-id{flex:1;min-width:200px;padding-bottom:4px}
.prof-id h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.prof-id .pi-handle{font-size:.84rem;color:var(--ink-mute);font-weight:600}
.prof-id .pi-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.79rem;color:var(--ink-soft);font-weight:600}
.prof-id .pi-meta span{display:inline-flex;align-items:center;gap:5px}
.prof-id .pi-meta svg{width:14px;height:14px;color:var(--ink-mute)}
.prof-cta{display:flex;gap:9px;padding-bottom:4px;flex-wrap:wrap}
.prof-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.prof-stats>div{padding:15px 10px;text-align:center;border-right:1px solid var(--border);cursor:pointer;transition:background .13s}
.prof-stats>div:last-child{border-right:none}
.prof-stats>div:hover{background:var(--surface-2)}
.prof-stats b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.prof-stats small{font-size:.7rem;color:var(--ink-mute);font-weight:700}
.prof-bio{padding:0 26px 18px;font-size:.87rem;line-height:1.6;color:var(--ink-2);max-width:640px}

/* Carte profil compacte (colonne latérale) */
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
.pcard .pc-cover{height:64px;background:linear-gradient(120deg,#FFB63B,var(--brand) 55%,#E68A00);position:relative}
.pcard .pc-cover::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='40' height='69' viewBox='0 0 56 97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17L28 0zm0 64.67L56 80.83V97H0V80.83L28 64.67z' fill='%23291D13' fill-opacity='.07'/%3E%3C/svg%3E")}
.pcard .pc-body{padding:0 18px 18px;text-align:center}
.pcard .pc-ava{margin:-28px auto 8px;position:relative;z-index:2}
.pcard .pc-stats{display:flex;justify-content:space-around;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.pcard .pc-stats b{display:block;font-size:1.05rem}
.pcard .pc-stats small{font-size:.66rem;color:var(--ink-mute);font-weight:700}

/* — Quiz / QCM — */
.qz-opt{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1.5px solid var(--border-2);
  border-radius:var(--r-lg);cursor:pointer;transition:all .16s var(--ease);font-size:.9rem;font-weight:600;
  background:var(--surface);margin-bottom:10px}
.qz-opt:hover{border-color:var(--ink-mute);transform:translateX(3px)}
.qz-opt .qz-key{width:28px;height:28px;border-radius:8px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:800;color:var(--ink-soft);flex:none;transition:.15s}
.qz-opt.sel{border-color:var(--brand);background:var(--brand-50)}
.qz-opt.sel .qz-key{background:var(--brand);color:var(--ink)}
.qz-opt.good{border-color:var(--ok);background:var(--ok-soft)}
.qz-opt.good .qz-key{background:var(--ok);color:#fff}
.qz-opt.bad{border-color:var(--danger);background:var(--danger-soft);animation:shake .35s}
.qz-opt.bad .qz-key{background:var(--danger);color:#fff}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

/* — Cartes à choisir (onboarding, préférences) — */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;text-align:left}
.opt-grid-compact{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:9px}
.opt-grid-compact .opt{padding:13px 14px;text-align:center}
.opt-grid-compact .opt b{font-size:.85rem}
.opt-grid-compact .opt.sel::after{top:8px;right:8px;width:17px;height:17px;background-size:9px}
.opt{border:1.5px solid var(--border-2);border-radius:var(--r-lg);padding:18px;cursor:pointer;
  background:var(--surface);transition:all .18s var(--ease);position:relative}
.opt:hover{border-color:var(--ink-mute);transform:translateY(-2px);box-shadow:var(--sh-md)}
.opt.sel{border-color:var(--brand);background:var(--brand-50);box-shadow:var(--sh-md)}
.opt.sel::after{content:"";position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23291D13' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  animation:popCheck .3s var(--spring)}
@keyframes popCheck{from{transform:scale(0)}to{transform:scale(1)}}
.opt .oo-ic{width:40px;height:40px;border-radius:12px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;margin-bottom:10px;color:var(--ink-2)}
.opt .oo-ic svg{width:19px;height:19px}
.opt b{font-size:.9rem;display:block}
.opt small{font-size:.75rem;color:var(--ink-soft);display:block;margin-top:3px}

/* — Checklist de complétion — */
.pc-todo{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.pc-line{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  background:var(--surface-2);font-size:.84rem;cursor:pointer;transition:.15s}
.pc-line:hover{background:var(--brand-50)}
.pc-line.done{opacity:.5;cursor:default}
.pc-line.done:hover{background:var(--surface-2)}
.pc-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-2);flex:none;
  display:flex;align-items:center;justify-content:center}
.pc-line.done .pc-check{background:var(--ok);border-color:var(--ok)}
.pc-line.done .pc-check::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);margin-top:-2px}
.pc-pts{margin-left:auto;font-size:.74rem;font-weight:800;color:var(--brand-700)}

/* — Écran d'authentification (panneau de marque + formulaire) — */
.auth{min-height:100vh;display:flex;align-items:stretch;
  background:var(--bg) url("data:image/svg+xml,%3Csvg width='56' height='97' viewBox='0 0 56 97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17L28 0zm0 64.67L56 80.83V97H0V80.83L28 64.67z' fill='%23291D13' fill-opacity='.016'/%3E%3C/svg%3E")}
/* Le panneau reste figé : le formulaire peut dépasser l'écran et défiler seul. */
.auth-side{width:44%;min-width:380px;background:var(--always-dark);color:#fff;padding:52px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;flex:none;overflow:hidden}
.auth-side::before{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,157,0,.32),transparent 65%)}
.auth-side::after{content:"";position:absolute;left:-110px;bottom:-160px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,157,0,.14),transparent 65%)}
.auth-quote{margin-top:auto;position:relative;z-index:2}
.auth-quote blockquote{font-size:1.28rem;font-weight:700;line-height:1.45;letter-spacing:-.01em}
.auth-quote blockquote span{color:var(--brand)}
.auth-quote .aq-who{display:flex;align-items:center;gap:12px;margin-top:22px}
.auth-quote .aq-who small{color:rgba(255,255,255,.55);display:block;font-size:.74rem}
.auth-stats{display:flex;gap:26px;margin-top:38px;position:relative;z-index:2}
.auth-stats div b{font-size:1.5rem;font-weight:800;color:var(--brand);display:block}
.auth-stats div small{font-size:.72rem;color:rgba(255,255,255,.6)}
.auth-form{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 24px}
.auth-card{width:min(410px,100%)}
.auth-card .h1{margin-bottom:6px}
.auth-card>p{color:var(--ink-soft);font-size:.9rem;margin-bottom:28px}
.auth-foot{text-align:center;font-size:.84rem;color:var(--ink-soft);margin-top:24px}
.auth-foot b{color:var(--brand-700);cursor:pointer}
.auth-foot b:hover{text-decoration:underline}

/* — Splash de démarrage — */
.splash{position:fixed;inset:0;background:var(--always-dark);z-index:900;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px}
.splash.out{animation:splashOut .5s var(--ease) forwards}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
.splash .sp-logo{width:74px;height:74px;border-radius:20px;background:var(--brand);display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:800;color:var(--ink);animation:spLogo .9s var(--spring);
  box-shadow:0 0 0 12px rgba(245,157,0,.12),0 0 0 26px rgba(245,157,0,.05)}
@keyframes spLogo{from{transform:scale(.4) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.splash b{color:#fff;font-size:1.3rem;font-weight:800;animation:fadeUp .6s .25s var(--ease) backwards}
.splash small{color:rgba(255,255,255,.5);font-size:.8rem;animation:fadeUp .6s .4s var(--ease) backwards}
.splash .sp-bar{width:150px;height:3px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin-top:8px}
.splash .sp-bar i{display:block;height:100%;width:40%;background:var(--brand);border-radius:99px;animation:spLoad 1.1s var(--ease) infinite}
@keyframes spLoad{from{transform:translateX(-110%)}to{transform:translateX(400%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* — Barre de progression d'un parcours guidé — */
.ob-top{display:flex;align-items:center;gap:18px;padding:20px 30px}
.ob-prog{flex:1;height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden;max-width:420px;margin:0 auto}
.ob-prog i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .45s var(--ease)}


/* ═══════════════════════════════════════════════════════════════
   15. MODE SOMBRE
   Même palette, valeurs remappées : aucun composant n'est réécrit.
   Les surfaces volontairement sombres en clair pointent sur
   --always-dark pour ne pas s'éclaircir par inversion.
   ═══════════════════════════════════════════════════════════════ */
body[data-theme="dark"]{
  --brand:#FFA81F;
  --brand-600:#F59D00;
  --brand-700:#FFBB4D;
  --brand-800:#FFD08A;
  --brand-100:#4A3417;
  --brand-50:#33230F;

  --ink:#F4EEE8;
  --ink-2:#DACFC4;
  --ink-soft:#A4968A;
  --ink-mute:#7A6C61;

  --bg:#16110D;
  --bg-2:#211A14;
  --surface:#1D1712;
  --surface-2:#251E17;
  --border:#332A22;
  --border-2:#463A2F;

  --ok:#3FBE7C;     --ok-soft:#14311F;     --ok-ink:#7FDCA9;
  --warn:#E8A33D;   --warn-soft:#3A2A12;   --warn-ink:#FFC97A;
  --danger:#EC6B6B; --danger-soft:#3A1B1B; --danger-ink:#FF9E9E;
  --info:#6D9BF2;   --info-soft:#17233D;   --info-ink:#A6C4FA;
  --violet:#A98BFA; --violet-soft:#241C3D; --violet-ink:#CDB8FF;

  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 4px 14px -2px rgba(0,0,0,.5);
  --sh-lg:0 12px 32px -6px rgba(0,0,0,.6);
  --sh-xl:0 24px 60px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* Surfaces sombres : un cran PLUS sombre que la surface, pour rester lisibles */
body[data-theme="dark"] .card-dark,
body[data-theme="dark"] .toast,
body[data-theme="dark"] .auth-side,
body[data-theme="dark"] .splash,
body[data-theme="dark"] .btn-dark,
body[data-theme="dark"] .conv.on,
body[data-theme="dark"] .rnav::after,
body[data-theme="dark"] .mobilebar{background:#0F0B08;color:#F4EEE8}
body[data-theme="dark"] .card-dark{border-color:#0F0B08}
body[data-theme="dark"] .btn-dark:hover{background:#1B1410}
body[data-theme="dark"] .conv.on .cv-n b,
body[data-theme="dark"] .conv.on .cv-t{color:#F4EEE8}
body[data-theme="dark"] .rail-logo{background:var(--surface);color:var(--brand)}
body[data-theme="dark"][data-menu="3"] .rail-logo{background:var(--brand);color:var(--always-dark)}

/* Éléments à fond blanc ou à texte encre explicite */
body[data-theme="dark"] .switch i::after{background:#E8E0D8}
body[data-theme="dark"] .voice,
body[data-theme="dark"] .msg .bubble{background:var(--surface-2)}
body[data-theme="dark"] .msg.me .bubble{background:var(--brand);color:var(--always-dark)}
body[data-theme="dark"] .tour-spot{box-shadow:0 0 0 9999px rgba(0,0,0,.68),0 0 0 3px var(--brand),0 0 0 9px rgba(255,168,31,.25)}
body[data-theme="dark"] .overlay,
body[data-theme="dark"] .cmdk,
body[data-theme="dark"] .drawer-ov,
body[data-theme="dark"] .badge-pop{background:rgba(0,0,0,.6)}
body[data-theme="dark"] .prof-cover::after,
body[data-theme="dark"] .pcard .pc-cover::after{opacity:.5}
body[data-theme="dark"] .auth{background-color:var(--bg)}
body[data-theme="dark"] .brand .bw{color:var(--ink)}
body[data-theme="dark"] .topbar{background:rgba(22,17,13,.85)}
body[data-theme="dark"] .kbd{background:var(--surface-2)}
body[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
body[data-theme="dark"] .b-ink{background:var(--ink);color:var(--always-dark)}
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .ci-send,
body[data-theme="dark"] .story .st-in{color:var(--always-dark)}
body[data-theme="dark"] .ava-user{background:var(--brand);color:var(--always-dark)}
body[data-theme="dark"] .cv-b,
body[data-theme="dark"] .rn-badge{color:var(--always-dark)}
body[data-theme="dark"] .badge-ia{background:var(--brand-50);color:var(--brand-800);border-color:var(--brand-100)}
body[data-theme="dark"] .b-orange,
body[data-theme="dark"] .b-brand{background:var(--brand-50);color:var(--brand-800)}
body[data-theme="dark"] .tag{background:var(--bg-2);color:var(--ink-soft)}


/* ═══════════════════════════════════════════════════════════════
   16. RESPONSIVE & ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1280px){
  .social{grid-template-columns:minmax(0,1fr) 288px}
  .soc-left{display:none}
}
@media(max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g23,.g32{grid-template-columns:1fr}
  .chat-side{display:none}
}
@media(max-width:1020px){
  .auth-side{display:none}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .social{grid-template-columns:1fr}
  .soc-right{display:none}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .rail{display:none}
  .page{padding:18px 16px 110px}
  .topbar{padding:10px 16px}
  .searchbar{max-width:none;flex:1}
  .searchbar span{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .kpi .k-val{font-size:1.4rem}
  .tb-crumb{display:none}
  .drawer{width:calc(100vw - 20px)}
  .page-h .ph-actions{width:100%}
  .msg{max-width:94%}
  .chat-wrap{height:calc(100vh - 240px)}
  .code-inputs input{width:44px;height:52px}
  .opt-grid{grid-template-columns:1fr 1fr}
  .sem-corps{grid-template-columns:44px 1fr}
  .bandeau{flex-wrap:wrap}
  .notif-flash{top:auto;bottom:88px;right:12px;left:12px;width:auto}
  .fab{bottom:86px;right:14px;width:52px;height:52px}
  .mob-only{display:flex!important}

  /* La barre mobile remplace le rail */
  .mobilebar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:400;
    background:rgba(41,29,19,.96);backdrop-filter:blur(10px);border-radius:20px;padding:8px;
    justify-content:space-around;box-shadow:var(--sh-xl)}
  .mb-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 13px;border-radius:14px;
    color:rgba(255,255,255,.55);font-size:.6rem;font-weight:700;transition:.15s}
  .mb-item svg{width:19px;height:19px}
  .mb-item.on{color:var(--brand);background:rgba(245,157,0,.13)}
}

/* Respecte le réglage système « réduire les animations » */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}