/* Oqora CRM · crm.css (lot 0) : jetons, coquille et composants communs.
   copié de css/styles.css @07a7242 (sections 1 à 4, 16, 17, 18 et « Couleur et vie »), adapté au CRM :
   barre latérale bleu nuit (.theme-bleu), panneau de droite, modale d'une ligne, bandeaux, recherche, annonce.
   SEUL fichier qui définit des jetons :root et des règles globales ; chaque section préfixe ses règles par sa classe
   racine (.s-journee, .s-conv, .s-agenda, .s-rdv, .s-preappel, .s-pipe, .s-contacts, .s-fiche, .s-appel, .st,
   .s-ventes, .s-chiffres, .s-regl). */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=Montserrat:wght@800;900&display=swap');

/* ---------------------------------------------------------------- 1. Jetons
   Système de design du 25/10/2026 (docs/sortie-ghl/audit-visuel.md § 3.1) : platine pour les surfaces et le texte,
   navy pour la barre de gauche, un seul bleu pour l'action, l'or en une seule touche. Les couleurs d'état (rouge,
   vert, ambre) ne servent qu'aux petits badges. Pas de dégradé ; une ombre seulement sur ce qui flotte. */
:root{
  /* Texte : une seule couleur, la hiérarchie se fait par taille et graisse */
  --ink:#22262b; --ink-soft:#50575e; --ink-faint:#626a72;
  /* Surfaces platine */
  --page:#f7f8f9; --surface:#ffffff; --surface-2:#f2f4f6; --hover:#f4f6f8;
  --rule:#dde1e5; --rule-strong:#c4cad0; --rule-soft:#eceef1;
  /* Navy : barre de gauche et zones sombres */
  --navy:#0b1733; --navy-2:#12203b; --navy-3:#17325e; --navy-texte:#dbe4f4; --navy-faint:#9fbdf0;
  /* Action : un seul bleu */
  --bleu:#2f6fe0; --bleu-hover:#2359c2; --bleu-tint:#eaf1fd; --bleu-ring:rgba(47,111,224,.28);
  /* Or : une seule touche (indicateur du menu actif) */
  --or:#c8a054;
  /* États : badges et points seulement */
  --rouge:#c8372c; --rouge-tint:#fdeceb;
  --vert:#15875a;  --vert-tint:#e2f5ec;
  --ambre:#a85c00; --ambre-tint:#fdf1de;

  /* Typo : Inter partout, Montserrat pour le logo seulement */
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px;
  --fw-normal:400; --fw-moyen:500; --fw-fort:600; --fw-titre:700;

  /* Espacements : base 4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* Rayons : 3 valeurs */
  --r-sm:6px; --r-md:8px; --r-lg:12px;

  /* Ombres : seulement pour ce qui flotte */
  --sh-flotte:0 8px 24px rgba(11,23,51,.12), 0 2px 6px rgba(11,23,51,.06);

  /* Mise en page */
  --barre-w:232px; --entete-h:56px; --contenu-max:1360px;
  --ctrl-h:36px; --ctrl-h-sm:32px;

  /* Anciens noms, gardés comme alias des nouveaux : les CSS des sections s'en servent encore (ne pas les retirer). */
  --bande:var(--page); --page-bg:var(--page); --sidebar-bg:var(--page);
  --bleu-dark:var(--bleu-hover);
  --navy-1:var(--navy-3); --navy-lede:var(--navy-texte); --navy-eyebrow:var(--navy-faint);
  --navy-grad:var(--navy);                                  /* plus de dégradé : le navy uni */
  --vert-vif:var(--vert); --ambre-vif:var(--ambre);
  --or-vif:var(--or); --or-clair:var(--or); --or-tint:var(--ambre-tint);
  --fs-xs:var(--fs-12); --fs-sm:var(--fs-13); --fs-base:var(--fs-14); --fs-md:var(--fs-16); --fs-lg:var(--fs-16);
  --fs-xl:var(--fs-20); --fs-2xl:var(--fs-24); --fs-3xl:var(--fs-24); --fs-stat:var(--fs-24);
  --sp-10:40px;
  --gutter:var(--sp-6);
  --r-xs:var(--r-sm); --r-xl:var(--r-lg); --r-full:999px;  /* --r-full : seulement pour les ronds (avatar, point) */
  --sh-1:0 0 0 1px var(--rule);                             /* posé : un trait, pas d'ombre */
  --sh-2:var(--sh-flotte); --sh-pop:var(--sh-flotte); --sh-bleu:none;
  --font-brand:'Montserrat', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --sidebar-w:var(--barre-w); --panneau-w:480px; --tap:var(--ctrl-h);
  --ease:cubic-bezier(.2,.7,.3,1);
  /* Couleurs d'avant le 25/10 sans équivalent : gardées pour les légendes qui en dépendent, à ne plus utiliser. */
  --violet:#6348cc; --violet-tint:#efeafc; --rose:#c93583; --rose-tint:#fbe7f1; --teal:#0b7f76; --teal-tint:#e0f4f2;
}
@media (max-width:899px){ :root{ --ctrl-h:44px; --ctrl-h-sm:40px; } } /* le tactile garde 44 px */

/* ---------------------------------------------------------------- 2. Base */
*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html, body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
/* L'en-tête reste en haut à l'écran : ce qu'on fait défiler vers soi s'arrête sous lui, pas dessous. */
@media (min-width:900px){ html{ scroll-padding-top:calc(var(--entete-h) + var(--sp-2)); } }
body{
  min-height:100vh; width:100%;
  background:var(--page); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-14); line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font); margin:0; letter-spacing:-.01em; line-height:1.25; color:var(--ink); }
h2{ font-weight:var(--fw-titre); }
h3, h4{ font-weight:var(--fw-fort); }
p{ margin:0; }
button, input, textarea, select{ font-family:inherit; font-size:inherit; }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--bleu); }   /* plus le bleu du système */
a{ color:var(--bleu); text-decoration:none; }
img{ max-width:100%; display:block; }
svg{ flex:none; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.num, .nav-badge{ font-variant-numeric:tabular-nums; }
:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }

/* ---------------------------------------------------------------- 3. Composants (audit-visuel.md § 3.3)
   Bouton : 3 sortes, une seule « principale » par zone. Les anciens noms (.btn--primary, .btn--ghost) prennent le style
   des nouveaux (.btn--principal, .btn--secondaire) : rien à changer dans les sections. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--ctrl-h); padding:0 14px; border-radius:var(--r-md); border:1px solid transparent;
  font-size:var(--fs-14); font-weight:var(--fw-moyen); line-height:1.2; letter-spacing:0; cursor:pointer; white-space:nowrap;
  background:var(--surface); color:var(--ink);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:16px; height:16px; }
.btn--primary, .btn--principal{ background:var(--bleu); color:#fff; border-color:var(--bleu); }
.btn--primary:hover, .btn--principal:hover{ background:var(--bleu-hover); border-color:var(--bleu-hover); }
.btn--ghost, .btn--secondaire{ background:var(--surface); color:var(--ink); border-color:var(--rule-strong); }
.btn--ghost:hover, .btn--secondaire:hover{ background:var(--hover); }
.btn--discret{ background:transparent; color:var(--ink-soft); }
.btn--discret:hover{ background:var(--hover); color:var(--ink); }
.btn--danger{ background:var(--surface); color:var(--rouge); border-color:var(--rule-strong); }
.btn--danger:hover{ background:var(--rouge-tint); }
.btn--sm{ min-height:var(--ctrl-h-sm); padding:0 10px; font-size:var(--fs-13); }
.btn--sm svg{ width:15px; height:15px; }
.btn--icone{ width:var(--ctrl-h); padding:0; justify-content:center; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn .cadenas svg, .cadenas svg{ width:15px; height:15px; }

/* Badge (état, source, retard). Les anciens .pill et .tag en prennent la forme : pas de capitales, jamais de rouge plein. */
.badge, .pill, .tag{ display:inline-flex; align-items:center; gap:4px; min-height:20px; padding:0 6px; border-radius:var(--r-sm);
  font-size:var(--fs-12); font-weight:var(--fw-moyen); line-height:1.3; letter-spacing:0; text-transform:none;
  background:var(--surface-2); color:var(--ink-soft); white-space:nowrap; box-shadow:none; }
.badge--bleu, .pill--bleu, .tag--bleu{ background:var(--bleu-tint); color:var(--bleu-hover); }
.badge--vert, .pill--vert, .tag--vert{ background:var(--vert-tint); color:var(--vert); }
.badge--ambre, .pill--ambre, .tag--ambre{ background:var(--ambre-tint); color:var(--ambre); }
.badge--rouge, .pill--rouge, .tag--rouge{ background:var(--rouge-tint); color:var(--rouge); }
.point{ display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }

/* Carte : pour regrouper, jamais pour une ligne de liste. À l'intérieur, on sépare par un trait. */
.card, .carte{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:none; padding:var(--sp-5); }
.card h2, .card h3, .carte__titre{ font-size:var(--fs-16); font-weight:var(--fw-fort); line-height:1.3; }
.etat-vide{ text-align:center; color:var(--ink-soft); font-size:var(--fs-14); font-weight:var(--fw-normal); padding:var(--sp-12) var(--sp-6); }
.en-construction{ max-width:560px; }
.en-construction h2{ margin-bottom:var(--sp-2); }

/* Tableau (Appels, RDV, Contacts, Tâches, Réglages, chiffres) */
.tableau{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; }
.tableau th{ position:sticky; top:0; height:36px; padding:0 var(--sp-4); text-align:left;
  font-size:var(--fs-12); font-weight:var(--fw-moyen); line-height:1; color:var(--ink-soft); background:var(--surface-2);
  border-bottom:1px solid var(--rule); }
.tableau td{ height:48px; padding:0 var(--sp-4); border-bottom:1px solid var(--rule-soft); font-size:var(--fs-14); }
.tableau tr:last-child td{ border-bottom:0; }
.tableau tbody tr:hover td{ background:var(--hover); }
.tableau .nombre{ text-align:right; font-variant-numeric:tabular-nums; }
.tableau .actions{ text-align:right; white-space:nowrap; }

/* Onglets (un seul style : soulignés) et filtres segmentés */
.onglets{ display:flex; gap:var(--sp-6); border-bottom:1px solid var(--rule); }
.onglet{ height:40px; padding:0; background:none; border:0; border-bottom:2px solid transparent;
  font-size:var(--fs-14); font-weight:var(--fw-moyen); line-height:1; color:var(--ink-soft); cursor:pointer; }
.onglet[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--bleu); }
.onglet .compte{ margin-left:6px; font-size:var(--fs-12); color:var(--ink-faint); }
.segments{ display:inline-flex; padding:2px; gap:2px; background:var(--surface-2); border-radius:var(--r-md); }
.segment{ height:28px; padding:0 10px; border:0; border-radius:var(--r-sm); background:none;
  font-size:var(--fs-13); font-weight:var(--fw-moyen); line-height:1; color:var(--ink-soft); cursor:pointer; }
.segment[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.08); }

/* Champs de saisie : un seul style */
.champ{ display:block; width:100%; min-height:var(--ctrl-h); border:1px solid var(--rule-strong); border-radius:var(--r-md);
  background:var(--surface); padding:0 var(--sp-3); color:var(--ink); font-size:var(--fs-14); box-shadow:none; }
textarea.champ{ min-height:88px; padding:var(--sp-2) var(--sp-3); line-height:1.45; }
.champ:focus{ background-color:var(--surface); border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-ring); }
/* Menus : WebKit ignore min-height sur un <select> natif (21 px au lieu de 44, G.3.21). Sans l'apparence native, la
   hauteur du style commun s'applique partout ; le chevron est un SVG en data: (aucune ressource externe, CSP inchangée). */
select.champ{ -webkit-appearance:none; -moz-appearance:none; appearance:none; min-height:var(--ctrl-h); cursor:pointer;
  padding-right:calc(var(--sp-3) + 22px); text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23626a72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp-3) center; background-size:12px 8px; }
.etiquette{ display:block; font-size:var(--fs-13); font-weight:var(--fw-moyen); line-height:1.3; margin-bottom:6px; }
.aide{ font-size:var(--fs-12); color:var(--ink-soft); margin-top:4px; }
.aide:empty{ display:none; }
.formulaire{ display:grid; gap:var(--sp-4); }

/* Chargement : lignes « squelettes » */
.squelette{ display:block; height:12px; border-radius:var(--r-sm); background:var(--surface-2); }

/* ---------------------------------------------------------------- 4. Coquille (audit-visuel.md § 3.4) */
.shell{ width:100%; min-height:100vh; display:flex; background:var(--page); }
.sidebar{
  width:var(--barre-w); flex:none; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:var(--sp-5) var(--sp-2) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-5);
  background:var(--sidebar-bg);
}
.brand{ display:block; padding:0 10px; }
.brand-logo{ display:block; font-family:var(--font-brand); font-weight:800; font-size:20px; letter-spacing:.14em; line-height:1; color:var(--navy); }
.brand small{ display:block; margin-top:6px; font-weight:var(--fw-moyen); color:var(--ink-faint); font-size:var(--fs-12); }
.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:10px; min-height:var(--ctrl-h); padding:0 8px 0 10px;
  border-radius:var(--r-md); color:var(--ink-soft); font-weight:var(--fw-moyen); font-size:var(--fs-14); line-height:1.2; cursor:pointer;
  border:none; background:none; width:100%; text-align:left; transition:background-color .12s ease, color .12s ease;
}
/* Libellés jamais tronqués : « Tâche journalière » et son nombre tiennent sur une ligne dans 232 px. */
.nav-item .nav-texte{ min-width:0; flex:1 1 auto; white-space:nowrap; }
.nav-item svg{ width:18px; height:18px; }
.nav-badge{
  margin-left:auto; flex:none; min-width:20px; height:20px; padding:0 5px; display:inline-grid; place-items:center;
  border-radius:10px; font-size:var(--fs-12); font-weight:var(--fw-moyen); background:none; color:var(--ink-faint);
}
.nav-badge--point{ min-width:6px; width:6px; height:6px; padding:0; border-radius:50%; background:currentColor; }
.nav-badge--texte{ font-weight:var(--fw-moyen); }
.sidebar-foot{ margin-top:auto; padding-top:var(--sp-3); display:flex; flex-direction:column; gap:2px; }

/* Barre de gauche : navy uni ; compteurs en texte discret, un seul compteur rouge (ce qui est vraiment urgent). */
.theme-bleu .sidebar{ background:var(--navy); }
.theme-bleu .brand-logo{ color:#fff; }
.theme-bleu .brand small{ color:var(--navy-faint); }
.theme-bleu .nav-item{ color:var(--navy-texte); }
.theme-bleu .nav-item svg{ color:var(--navy-faint); }
.theme-bleu .nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.theme-bleu .nav-item.active{ background:rgba(255,255,255,.10); color:#fff; box-shadow:inset 2px 0 0 var(--or); }
.theme-bleu .nav-item.active svg{ color:#fff; }
.theme-bleu .nav-badge{ background:none; color:var(--navy-faint); }
.theme-bleu .nav-item.active .nav-badge{ background:none; color:#fff; }
.theme-bleu .nav-badge--point, .theme-bleu .nav-item.active .nav-badge--point{ background:var(--navy-faint); }
.theme-bleu .nav-badge--rouge, .theme-bleu .nav-item.active .nav-badge--rouge{ background:var(--rouge); color:#fff; }
.theme-bleu .sidebar-foot{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
/* En-tête de 56 px sur UNE ligne : titre à gauche ; recherche, « à jour à… », Actualiser et avatar calés à droite. */
.topbar{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-3) var(--gutter); min-height:var(--entete-h);
  background:var(--surface); border-bottom:1px solid var(--rule); }
@media (min-width:900px){
  .topbar{ height:var(--entete-h); padding-top:0; padding-bottom:0; flex-wrap:nowrap; position:sticky; top:0; z-index:20; }
}
.hamburger{
  display:none; position:relative; width:var(--ctrl-h); height:var(--ctrl-h); flex:none; border-radius:var(--r-md);
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink);
  align-items:center; justify-content:center; cursor:pointer;
}
.hamburger svg{ width:20px; height:20px; }
.hamburger-badge, .theme-bleu .hamburger-badge{ position:absolute; top:-6px; right:-6px; margin:0; background:var(--rouge); color:#fff; }
.topbar-titre{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--sp-3); }
.topbar-textes{ min-width:0; }
.topbar-titre h1{ font-size:var(--fs-20); font-weight:var(--fw-titre); letter-spacing:-.01em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-aide{ margin-top:2px; color:var(--ink-soft); font-size:var(--fs-13); max-width:70ch; }
.topbar-aide:empty{ display:none; }
/* Ordinateur : le sous-titre d'aide passe en info-bulle du titre (coquille.js), il ne mange plus de hauteur. */
@media (min-width:900px){ .topbar-aide{ display:none; } }
.topbar-retour{ width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); flex:none; display:grid; place-items:center;
  border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); cursor:pointer; }
.topbar-retour:hover{ background:var(--hover); }
.topbar-retour svg{ width:18px; height:18px; }
/* Téléphone : la flèche retour se touche au doigt, 44 px comme tous les boutons tactiles. */
@media (max-width:899px){ .topbar-retour{ width:var(--ctrl-h); height:var(--ctrl-h); } }
/* La fiche contact a sa propre flèche retour en tête de fiche : celle de l'en-tête ne la double pas. */
.main:has(#contenu .fc-tete [data-bouton="fiche.retour"]) .topbar-retour{ display:none; }
.topbar-actions{ display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.maj-discrete{ font-size:var(--fs-12); color:var(--ink-faint); white-space:nowrap; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--navy-3); color:#fff; display:grid;
  place-items:center; font-weight:var(--fw-fort); font-size:var(--fs-12); letter-spacing:.02em; flex:none; }
/* Une seule largeur de contenu pour toutes les pages (1 360 px, centrée) ; Pipeline, Agendas, Conversations et la fiche
   en pleine largeur. */
.view-content{ flex:1; padding:var(--sp-6) var(--gutter) 72px; width:100%; max-width:var(--contenu-max); margin:0 auto; }
.view-content.contenu--plein,
.view-content:has(> [data-section-active="pipeline"]),
.view-content:has(> [data-section-active="agendas"]),
.view-content:has(> [data-section-active="conversations"]),
.view-content:has(> [data-section-active="contact"]){ max-width:none; }

/* Recherche de l'en-tête */
.recherche{ position:relative; display:flex; align-items:center; gap:var(--sp-2); min-height:var(--ctrl-h); width:320px; max-width:100%;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-md); padding:0 var(--sp-3); }
.recherche:focus-within{ border-color:var(--bleu); }
.recherche-icone svg{ width:16px; height:16px; color:var(--ink-faint); }
.recherche input{ border:0; outline:none; background:none; color:var(--ink); flex:1; min-width:0; min-height:calc(var(--ctrl-h) - 4px); }
/* G.3.21 : le focus se voit sur le champ lui-même (le contour du parent ne compte pas), comme partout ailleurs. */
.recherche input:focus-visible{ outline:3px solid var(--bleu-ring); outline-offset:2px; }
.recherche-resultats{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--sh-flotte); padding:var(--sp-2); max-height:60vh; overflow-y:auto; }
.recherche-ligne{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:var(--ctrl-h);
  border:0; background:none; text-align:left; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); cursor:pointer; color:var(--ink); }
.recherche-ligne strong{ font-weight:var(--fw-moyen); }
.recherche-ligne:hover, .recherche-ligne:focus-visible{ background:var(--hover); }
.recherche-ligne span{ font-size:var(--fs-13); color:var(--ink-soft); }
.recherche-vide{ padding:var(--sp-3); color:var(--ink-soft); }

/* Bandeaux globaux (un seul à la fois, le plus grave d'abord) */
.bandeau{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--gutter); font-weight:var(--fw-moyen);
  background:var(--ambre-tint); color:var(--ambre); }
.bandeau--n1, .bandeau--n2{ background:var(--rouge); color:#fff; }
.bandeau--n3{ background:var(--violet-tint); color:var(--violet); }
.bandeau--n4{ background:var(--navy-3); color:#fff; }
.bandeau--n6{ background:var(--rouge-tint); color:var(--rouge); }
.bandeau--n8{ background:var(--bleu-tint); color:var(--bleu-hover); }
.bandeau-texte{ flex:1; min-width:0; }
.bandeau-action{ min-height:var(--ctrl-h-sm); padding:0 var(--sp-3); border:1px solid var(--rule-strong); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink); font-weight:var(--fw-moyen); cursor:pointer; }
.bandeau-fermer{ width:var(--ctrl-h-sm); height:var(--ctrl-h-sm); border:0; background:none; color:inherit; cursor:pointer; display:grid; place-items:center; }
.bandeau-fermer svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------- Panneau de droite (pleine page sur téléphone) */
.panneau-fond{ position:fixed; inset:0; background:rgba(11,23,51,.32); z-index:350; animation:fadeIn .18s ease; }
.panneau{
  position:fixed; top:0; right:0; bottom:0; z-index:351; width:min(100vw, var(--panneau-w));
  background:var(--surface); box-shadow:var(--sh-flotte); border-left:1px solid var(--rule); overflow-y:auto; border-radius:0;
  padding:var(--sp-4) var(--sp-5) var(--sp-10); animation:panneauIn .24s var(--ease);
}
.panneau--etroit{ width:min(100vw, 420px); }
.panneau--large{ width:min(760px, 60vw); }
.panneau__tete{ height:56px; padding:0 var(--sp-5); display:flex; align-items:center; gap:var(--sp-3);
  border-bottom:1px solid var(--rule); font-size:var(--fs-16); font-weight:var(--fw-fort); }
.panneau__corps{ flex:1; overflow-y:auto; padding:var(--sp-5); }
.panneau__pied{ padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--rule); display:flex; justify-content:flex-end; gap:var(--sp-2); }
@keyframes panneauIn{ from{ transform:translateX(32px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.panneau-tete{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.panneau-fermer{ width:var(--ctrl-h); height:var(--ctrl-h); flex:none; display:grid; place-items:center; border:0; border-radius:var(--r-md);
  background:transparent; color:var(--ink-soft); cursor:pointer; }
.panneau-fermer:hover{ background:var(--hover); color:var(--ink); }
.panneau-fermer svg{ width:20px; height:20px; }
.panneau-titre{ font-size:var(--fs-16); font-weight:var(--fw-fort); letter-spacing:-.01em; min-width:0; overflow-wrap:anywhere; }

/* Annonce « Ce qui va se passer » (dans le panneau, au-dessus du bouton) */
.annonce{ display:flex; flex-direction:column; gap:var(--sp-4); }
.annonce-bloc{ background:var(--surface-2); border-radius:var(--r-md); padding:var(--sp-4); }
.annonce-titre{ font-size:var(--fs-12); font-weight:var(--fw-moyen); color:var(--ink-soft); margin-bottom:var(--sp-2); }
details.annonce-bloc > summary{ cursor:pointer; min-height:var(--ctrl-h); display:flex; align-items:center; margin:0; }
.annonce-bloc ul, .annonce-bloc ol{ margin:0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-1); }
.annonce-recoit{ background:var(--bleu-tint); }
.annonce-asavoir{ background:var(--ambre-tint); }
.annonce-asavoir .annonce-titre{ color:var(--ambre); }
.annonce-entete{ font-weight:var(--fw-fort); color:var(--ambre); }
.annonce-bloque, .annonce-erreur{ font-weight:var(--fw-moyen); color:var(--rouge); background:var(--rouge-tint); border-radius:var(--r-md); padding:var(--sp-4); }
.annonce-cadenas{ display:flex; align-items:center; gap:var(--sp-2); font-weight:var(--fw-moyen); }
.annonce-cadenas svg{ width:18px; height:18px; }
.annonce-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:flex-end; }

/* ---------------------------------------------------------------- Modale : une ligne de confirmation */
.modale-fond{ position:fixed; inset:0; z-index:400; background:rgba(11,23,51,.45); display:flex; align-items:center;
  justify-content:center; padding:var(--sp-4); animation:fadeIn .18s ease; }
.modale{ width:100%; max-width:440px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-flotte); padding:var(--sp-5); }
.modale-texte, .modale__texte{ font-size:15px; font-weight:var(--fw-moyen); line-height:1.45; }
.modale-actions, .modale__actions{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-5); }

/* ---------------------------------------------------------------- Toast : navy uni, en bas à droite */
.toast{
  position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateY(calc(100% + 48px));
  background:var(--navy); color:#fff; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); min-height:44px;
  display:flex; align-items:center; gap:var(--sp-3); border-radius:var(--r-md); font-size:var(--fs-14); font-weight:var(--fw-moyen);
  box-shadow:var(--sh-flotte); transition:transform .28s var(--ease); z-index:500; max-width:min(calc(100vw - 32px), 520px);
}
.toast.show{ transform:none; }
.toast-annuler{ min-height:var(--ctrl-h-sm); padding:0 var(--sp-3); border:0; border-radius:var(--r-md); background:rgba(255,255,255,.14);
  color:#fff; font-weight:var(--fw-fort); cursor:pointer; }

/* ---------------------------------------------------------------- Écran de code */
.connexion{ min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-8) var(--sp-4); background:var(--navy); }
.connexion--pardessus{ position:fixed; inset:0; z-index:600; }
.connexion-carte{ width:100%; max-width:420px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-flotte);
  padding:var(--sp-10) var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-3); }
.connexion-marque{ font-family:var(--font-brand); font-weight:800; font-size:28px; letter-spacing:.14em; color:var(--navy-2); text-align:center; }
.connexion-carte h1{ font-size:var(--fs-20); font-weight:var(--fw-titre); text-align:center; margin-bottom:var(--sp-3); }
.connexion-carte label{ font-size:var(--fs-13); font-weight:var(--fw-moyen); color:var(--ink-soft); }
.connexion-carte input{ width:100%; min-height:52px; border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--surface); text-align:center;
  font-size:24px; font-weight:var(--fw-fort); letter-spacing:.4em; color:var(--ink); }
.connexion-carte input:focus{ border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-ring); }
.connexion-erreur{ color:var(--rouge); font-size:var(--fs-13); font-weight:var(--fw-moyen); min-height:20px; }
.connexion-carte .btn{ min-height:44px; font-size:var(--fs-16); }

/* Tâches : css/sections/taches.css (25/10/2026). */

/* ---------------------------------------------------------------- Adaptation écrans */
.tiroir-fond{ display:none; position:fixed; inset:0; background:rgba(11,23,51,.45); z-index:40; }
@media (max-width:899px){
  .hamburger{ display:inline-flex; }
  .sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:50; height:auto; width:min(86vw, 320px);
    transform:translateX(-105%); transition:transform .26s var(--ease); box-shadow:var(--sh-flotte); border-radius:0; }
  .sidebar:not(.open){ box-shadow:none; }
  .shell:not(.shell--pret) .sidebar{ transition:none; }
  .sidebar.open{ transform:translateX(0); }
  .tiroir-fond.open{ display:block; animation:fadeIn .18s ease; }
  .topbar-actions{ width:100%; }
  .recherche{ flex:1 1 auto; width:auto; }
  .panneau{ width:100vw; border-radius:0; padding:var(--sp-4) var(--sp-4) calc(var(--sp-10) + env(safe-area-inset-bottom, 0px)); }
  .panneau-fond{ display:none; }
}
@media (max-width:640px){
  :root{ --gutter:16px; }
  body{ font-size:15px; }
  .topbar{ padding:var(--sp-4) var(--gutter) var(--sp-4); gap:var(--sp-3); }
  .topbar-titre h1{ font-size:var(--fs-20); }
  .topbar-actions{ gap:var(--sp-2); flex-wrap:nowrap; }
  .topbar-actions .btn{ min-height:var(--tap); width:var(--tap); padding:0; flex:none; }
  .topbar-actions .btn span{ display:none; }
  .maj-discrete{ display:none; }
  .avatar{ display:none; }
  .card{ padding:var(--sp-5); }
  .btn, .nav-item, .bandeau-action, .toast-annuler{ min-height:var(--tap); }
  .modale-actions .btn{ flex:1 1 0; }
  .annonce-actions .btn{ flex:1 1 100%; }
  .connexion-carte{ padding:var(--sp-8) var(--sp-5); }
}
/* ---------------------------------------------------------------- Bandeau d'appel (téléphone du CRM, 24/10/2026)
   En bas de l'écran pendant un appel passé depuis le navigateur, au-dessus du panneau (pas de la modale ni du toast). */
.tel-bandeau{ position:fixed; left:0; right:0; bottom:0; z-index:380; display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background:var(--navy-grad); color:#fff; box-shadow:0 -10px 30px rgba(11,23,51,.22); }
.tel-icone{ flex:none; width:40px; height:40px; border-radius:var(--r-full); display:grid; place-items:center;
  background:rgba(255,255,255,.12); }
.tel-icone svg{ width:20px; height:20px; }
.tel-bandeau[data-telephone="en_ligne"] .tel-icone{ background:var(--vert-vif); }
.tel-bandeau[data-telephone="erreur"] .tel-icone{ background:var(--rouge); }
.tel-infos{ flex:1 1 auto; min-width:0; }
.tel-nom{ margin:0; font-weight:700; font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tel-etat{ margin:2px 0 0; color:var(--navy-lede); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.tel-chrono{ flex:none; margin:0; font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--fs-lg); }
.tel-commandes{ flex:none; display:flex; gap:var(--sp-2); }
.tel-bandeau .btn--ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); box-shadow:none; }
.tel-bandeau .btn--ghost[aria-pressed="true"]{ background:#fff; color:var(--navy-1); }
.tel-raccrocher{ background:var(--rouge); color:#fff; }
.tel-raccrocher:hover{ background:#b92d24; }
.tel-decrocher{ background:var(--vert); color:#fff; }                  /* appel reçu (25/10) */
.tel-decrocher:hover{ background:#0f6e49; }
body.avec-appel #contenu, body.avec-appel .panneau-corps{ padding-bottom:96px; }
.sa-appeler{ display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-2) 0; }
.sa-fin{ margin:var(--sp-2) 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); background:var(--bleu-tint);
  color:var(--ink); font-weight:600; }
.sa-fin p{ margin:0; }
.sa-fin p + p{ margin-top:var(--sp-1); font-weight:500; color:var(--ink-soft); }
@media (max-width:640px){
  .tel-bandeau{ flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); }
  .tel-commandes{ flex:1 1 100%; }
  .tel-commandes .btn{ flex:1 1 0; }
  body.avec-appel #contenu, body.avec-appel .panneau-corps{ padding-bottom:150px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}