/* Administration du CRM — feuille des gabarits admin et auth (views/layouts/admin.php, auth.php) et de la page d'erreur
   de l'administration (views/admin/partials/error.php), et d'eux seuls.
   Séparée de l'espace client le 27/09/2026 (charte, § 11) : l'espace client a ses propres feuilles (app.css, portal.css),
   aucune n'est commune ; modifier celle-ci ne peut pas toucher l'espace client.
   Thèmes clair et sombre (décision du 05/11/2026) : Clair, Sombre ou Système, au menu du compte. Aucun style inline (CSP style-src 'self'). Contrastes vérifiés AA.
   Sommaire : 1 jetons · 2 base · 3 contrôles · 4 composants · 5 structure · 6 écrans · 7 pièces des fiches (accès,
   paiements, statistiques) · 8 petits écrans · 9 support · 10 habillage de l'administration · 11 mouvement du site */

/* Polices du site (SIL OFL, voir ../fonts/LICENSE-*.txt), les mêmes fichiers que l'espace client, gardés un an en cache.
   Le gabarit précharge Funnel Display et Funnel Sans à l'adresse même de ces règles : une seule requête par police. */
@font-face{font-family:"Funnel Display";src:url("../fonts/funnel-display.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Funnel Sans";src:url("../fonts/funnel-sans.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";src:url("../fonts/martian-mono.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* 1 ─ Jetons ------------------------------------------------------------ */
/* Design E′ du site (charte, § 3), en clair ; le thème sombre suit ce bloc. Les jetons d'origine des composants (--ink, --blue…)
   prennent les valeurs E′ : plus aucun bleu ni violet, l'accent est l'encre et le surligneur marque l'état actif. */
:root{
  color-scheme:light;
  /* Murs, niches et papier */
  --wall:#ECEAE4;--band:#E3E0D8;--niche:#DCD8CE;--card:#F4F2EE;--paper:#FFFFFF;
  /* Encre ; --muted est le plus clair autorisé pour du petit texte (5,5:1 sur le mur) */
  --soft:#3C3B38;
  /* Accents : l'encre, le surligneur, le vert de validation */
  --accent:#121212;--marker:#FFE17A;--ok:#1E6B45;
  /* États, tous ≥ 4,5:1 en texte sur blanc et sur leur fond doux */
  --danger:#B3261E;--danger-soft:#F6E1DF;--warn:#87570A;--warn-soft:#FFF4D6;--ok-soft:#E2EEE6;
  /* Nuit (barre latérale) et laiton */
  --night:#121212;--night-card:#1C1B19;--night-text:#ECEAE4;--night-soft:#C9C6BF;--night-muted:#A3A09A;--night-line:#2E2D2A;
  --plaque:#1F1D19;--brass:#B89B62;--brass-hi:#F7E9C3;
  /* Graphiques : série secondaire (année précédente, ventes ponctuelles), 3,5:1 sur le papier et toujours plus claire
     que l'encre des séries principales ; --line-strong (2:1) reste aux filets */
  --chart-soft:#8C877C;
  /* Mouvement et polices */
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-disp:"Funnel Display","Helvetica Neue",Arial,sans-serif;
  --f-body:"Funnel Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  /* Ombres longues et douces, jamais de halo coloré */
  --lift:0 30px 40px -30px rgba(0,0,0,.35);
  --lay:0 20px 30px -18px rgba(0,0,0,.35);
  /* Jetons d'origine des composants, en valeurs E′ */
  --ink:#121212;--text:#3C3B38;--muted:#5F5D57;--field-line-hover:#5F5D57;
  --bg:#ECEAE4;--surface:#FFFFFF;--surface-2:#F4F2EE;--line:#D6D2C8;--line-strong:#BDB7AB;
  --blue:#121212;--blue-ink:#121212;--blue-soft:#E3E0D8;--blue-solid:#121212;
  --green:#1E6B45;--green-soft:#E2EEE6;
  --amber:#87570A;--amber-soft:#FFF4D6;
  --red:#B3261E;--red-soft:#F6E1DF;
  --violet:#121212;--violet-soft:#F4F2EE;
  /* Densité de l'administration (charte, § 11) : contrôles de 40 px, texte de 14 px, titres de page de 30 px */
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:30px;
  --control:40px;--control-sm:32px;
  --r-sm:10px;--r:12px;--r-lg:16px;
  --shadow:none;--shadow-pop:0 30px 60px -24px rgba(0,0,0,.4);
  /* Anneau des conteneurs dont le vrai champ est masqué : un liseré papier puis l'encre, comme le contour de focus */
  --focus:0 0 0 2px var(--paper),0 0 0 5px var(--ink);
  --sidebar:240px;
  --mono:var(--f-mono);
  --ink-strong:#000;--on-danger:#fff;--knob:#fff;--knob-on:#fff;--marker-glow:#FFE17A;--on-ink-soft:#C9C6BF;--marker-muted:#5F5D57;
  --logo:url(/assets/brand/syntaxeo-logo.png);
}
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --wall:#1A1917;--band:#151412;--niche:#11100E;--card:#201F1C;--paper:#262421;
    --soft:#CDC9BF;
    --accent:#E8E4DB;--marker:#5A4B1C;--ok:#86CBA0;
    --danger:#F2958B;--danger-soft:#3B211E;--warn:#E3B566;--warn-soft:#372B14;--ok-soft:#1D3125;
    --lift:0 30px 40px -30px rgba(0,0,0,.7);
    --lay:0 20px 30px -18px rgba(0,0,0,.7);
    --ink:#E8E4DB;--text:#CDC9BF;--muted:#A5A197;--field-line-hover:#A5A197;
    --bg:#1A1917;--surface:#262421;--surface-2:#201F1C;--line:#36342F;--line-strong:#5A5750;
    --blue:#E8E4DB;--blue-ink:#E8E4DB;--blue-soft:#34312C;--blue-solid:#E8E4DB;
    --green:#86CBA0;--green-soft:#1D3125;
    --amber:#E3B566;--amber-soft:#372B14;
    --red:#F2958B;--red-soft:#3B211E;
    --violet:#E8E4DB;--violet-soft:#201F1C;
    --shadow-pop:0 30px 60px -24px rgba(0,0,0,.75);
    --ink-strong:#F4F1EA;--on-danger:#1A1917;--knob:#CDC9BF;--knob-on:#262421;--marker-glow:#E3C463;--on-ink-soft:#55524B;--marker-muted:#CDC9BF;
    --logo:url(/assets/brand/syntaxeo-logo-inverse.png);
  }
}
@media screen{
  :root[data-theme=dark]{
    color-scheme:dark;
    --wall:#1A1917;--band:#151412;--niche:#11100E;--card:#201F1C;--paper:#262421;
    --soft:#CDC9BF;
    --accent:#E8E4DB;--marker:#5A4B1C;--ok:#86CBA0;
    --danger:#F2958B;--danger-soft:#3B211E;--warn:#E3B566;--warn-soft:#372B14;--ok-soft:#1D3125;
    --lift:0 30px 40px -30px rgba(0,0,0,.7);
    --lay:0 20px 30px -18px rgba(0,0,0,.7);
    --ink:#E8E4DB;--text:#CDC9BF;--muted:#A5A197;--field-line-hover:#A5A197;
    --bg:#1A1917;--surface:#262421;--surface-2:#201F1C;--line:#36342F;--line-strong:#5A5750;
    --blue:#E8E4DB;--blue-ink:#E8E4DB;--blue-soft:#34312C;--blue-solid:#E8E4DB;
    --green:#86CBA0;--green-soft:#1D3125;
    --amber:#E3B566;--amber-soft:#372B14;
    --red:#F2958B;--red-soft:#3B211E;
    --violet:#E8E4DB;--violet-soft:#201F1C;
    --shadow-pop:0 30px 60px -24px rgba(0,0,0,.75);
    --ink-strong:#F4F1EA;--on-danger:#1A1917;--knob:#CDC9BF;--knob-on:#262421;--marker-glow:#E3C463;--on-ink-soft:#55524B;--marker-muted:#CDC9BF;
    --logo:url(/assets/brand/syntaxeo-logo-inverse.png);
  }
}

/* 2 ─ Base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:var(--fs-base);line-height:1.5;color:var(--text);background:var(--wall);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);color:var(--ink);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--fs-2xl);font-weight:800;line-height:1.05;letter-spacing:-.03em}
h2{font-size:17px;font-weight:700;letter-spacing:-.02em}
h3{font-size:var(--fs-md);font-weight:700}
p{margin:0 0 .75em}
a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent)}
a:hover{color:var(--ink);text-decoration-color:var(--ink)}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
code,.mono{font-family:var(--f-mono);font-size:.84em;letter-spacing:0}
.badge .mono{font-size:inherit;letter-spacing:inherit}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Donnée pas encore mesurable. Même discrétion que .muted partout ; seule la taille change face à un
   grand chiffre, où un tiret cadratin de 25 px se lirait comme un filet de séparation. */
.nodata{color:var(--muted);font-weight:500}
.kpi__value .nodata,.dash-kpis strong .nodata,.sim-result__value .nodata{font-size:.62em;vertical-align:.22em}
/* Surfaces dessinées par le navigateur : elles appartiennent aussi au thème. */
::selection{background:var(--marker);color:var(--ink)}
mark{color:inherit;background:linear-gradient(transparent 50%,var(--marker) 50%);padding:0 2px}
/* Barres de défilement : curseur sable, rail du mur ; fines dans les zones internes */
html{scrollbar-color:var(--line-strong) var(--wall)}
*{scrollbar-color:var(--line-strong) transparent}
input,textarea{caret-color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.mb{margin-bottom:16px}
.section-gap{margin-top:20px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.table-wrap,.panel,.field,.check{position:relative}
.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{left:8px}
[hidden]{display:none!important}
/* Focus : contour encre, décalé ; jaune sur la nuit (barre latérale). Jamais retiré sans remplacement. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:none}
.stack>*+*{margin-top:16px}
/* Un champ caché (jeton CSRF) n'occupe pas de place : l'élément qui le suit ne prend pas d'espacement. */
.stack>input[type=hidden]:first-child+*,.stack>input[type=hidden]:first-child+input[type=hidden]+*{margin-top:0}

/* 3 ─ Contrôles ---------------------------------------------------------- */
/* Boutons en pilule (charte, § 5). Principal : encre pleine. Secondaire : contour encre qui se remplit au survol. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:var(--control);padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:inherit;font-family:var(--f-body);font-size:var(--fs-base);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--wall)}
.btn--primary{background:var(--ink);box-shadow:none;color:var(--wall)}
.btn--primary:hover{background:var(--ink-strong);color:var(--wall);box-shadow:0 14px 24px -14px rgba(0,0,0,.55)}
.btn--ghost{background:transparent;box-shadow:none;color:var(--ink)}
.btn--ghost:hover{background:var(--card);color:var(--ink)}
.btn--danger{color:var(--danger);box-shadow:inset 0 0 0 1.5px var(--danger)}
.btn--danger:hover{background:var(--danger);color:var(--on-danger)}
.btn--ghost.btn--danger{box-shadow:none}
.btn--ghost.btn--danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn--sm{min-height:var(--control-sm);padding:0 14px;font-size:var(--fs-sm)}
.btn--icon{padding:0;width:var(--control);justify-content:center}
.btn--sm.btn--icon{width:var(--control-sm)}
.btn--icon .icon{margin:0}
.btn--block{width:100%}
/* Désactivé : couleur atténuée et curseur, jamais d'opacité sur le texte */
.btn[disabled],.btn[disabled]:hover{opacity:1;background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);transform:none;cursor:not-allowed}
.btn--primary[disabled],.btn--primary[disabled]:hover{background:var(--card);box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
  .btn--primary:not([disabled]):hover{transform:translateY(-2px)}
}
.link-btn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.link-btn:hover{text-decoration-color:var(--ink)}
.link-btn--danger{color:var(--danger);text-decoration-color:currentColor}
.inline-form{display:inline-flex}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions>form{display:inline-flex}

/* La bordure passe par --field-line : « input:hover » et « input:focus » ne pouvaient pas l'emporter
   sur les trois :not() de ce sélecteur, et le survol comme la saisie restaient sans retour visible. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;height:auto;min-height:var(--control);padding:8px 12px;border:1.5px solid var(--field-line,var(--line));border-radius:var(--r);background-color:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-md);line-height:1.35}
textarea{min-height:96px;line-height:1.5;resize:vertical}
.admin-ui textarea[data-one-line]{min-height:var(--control);resize:none;field-sizing:content}
.admin-ui textarea.textarea--fit{min-height:240px;field-sizing:content}
.admin-ui :is(.set-card__body,.setting__body) textarea:not([data-one-line]){field-sizing:content}
select{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input:hover:not([readonly]):not([disabled]),select:hover:not([disabled]),textarea:hover:not([readonly]):not([disabled]){--field-line:var(--field-line-hover,var(--muted))}
input:focus:not([readonly]),select:focus:not([disabled]),textarea:focus:not([readonly]){--field-line:var(--ink);box-shadow:0 0 0 3px var(--marker)}
input:focus,select:focus,textarea:focus{outline:none}
input[type=file]{font:inherit;font-size:var(--fs-sm);color:var(--text)}
input[type=file]::file-selector-button{min-height:var(--control-sm);margin-right:10px;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
input[disabled],select[disabled],textarea[disabled]{opacity:1;background-color:var(--card);color:var(--muted);cursor:not-allowed}
.actions input,.actions select{width:auto}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.field>legend,.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.field>label .muted{font-weight:500}
/* Groupes de champs : ni cadre en creux ni retrait du navigateur. Dans un champ, la légende tient lieu d'étiquette. */
fieldset{min-width:0;margin:0;padding:0;border:0}
legend{padding:0}
.field>legend{margin-bottom:6px}
.hint{margin:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-base);color:var(--text);cursor:pointer;line-height:1.45}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.check>span{flex:1;min-width:0}
.check strong{color:var(--ink);font-weight:600}
.input-suffix{position:relative}
.input-suffix input,.input-suffix input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-right:36px}
.input-suffix span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:var(--fs-sm);pointer-events:none}
.input-suffix--long input,.input-suffix--long input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-right:68px}
/* Flèches des champs numériques masquées : elles chevauchaient l'unité (« jours », « du mois ») */
.input-suffix input[type=number]{-moz-appearance:textfield;appearance:textfield}
.input-suffix input[type=number]::-webkit-inner-spin-button,.input-suffix input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.input-code{min-height:56px!important;font-family:var(--f-mono);font-size:24px!important;font-weight:500;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.panel{container-type:inline-size}
.form-grid{display:grid}
.span-2{grid-column:span 2}.span-all{grid-column:1/-1}
.span-all>hr{margin:8px 0 16px}
.span-all>h2{font-size:var(--fs-md)}
@container (max-width:620px){.span-2{grid-column:auto}}
.form-actions{display:flex;justify-content:space-between;align-items:center;padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.form-actions>:only-child{margin-left:auto}

/* 4 ─ Composants --------------------------------------------------------- */
.panel{background:var(--paper);border:0;border-radius:var(--r-lg);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.panel__head{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid var(--line)}
.panel__head h2{font-size:17px}
.panel__head .hint{margin-top:2px}
.panel__head>a.small{font-weight:600}
.panel__body+.panel__body{border-top:1px solid var(--line)}
.stack>.panel+.panel,.main>.panel+.panel,.main>form.panel+.panel{margin-top:16px}
.empty{text-align:center}
.empty .btn{margin-top:12px}

.badge{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:3px 9px;border:0;border-radius:999px;background:var(--card);color:var(--soft);font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.badge::before{display:none}
.badge--info{background:var(--marker);color:var(--ink)}
.badge--progress{background:var(--ink);color:var(--wall)}
.badge--success{background:var(--ok-soft);color:var(--ok)}
.badge--warning{background:var(--warn-soft);color:var(--warn)}
.badge--danger{background:var(--danger-soft);color:var(--danger)}
.badge--neutral{background:var(--paper);color:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}

/* Messages : carte papier, filet gauche de l'état (charte, § 5), texte encre ; jamais de fond saturé */
.flash{display:block;overflow-wrap:anywhere;margin:0 0 20px;padding:12px 16px;border:0;border-left:4px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);box-shadow:var(--lay)}
/* L'accusé de réception d'une action se pose, il ne clignote pas, et sans fondu : son texte n'est jamais transparent
   (charte, § 12). Déclaré sous « no-preference » : immobile sinon. */
@media (prefers-reduced-motion:no-preference){.flash{animation:e2-flash .45s var(--ease) both}}
@keyframes e2-flash{from{transform:translateY(-8px)}}
.flash--success{border-left-color:var(--ok)}
.flash--error{border-left-color:var(--danger)}
.flash--info{border-left-color:var(--ink)}
.flash--warning{border-left-color:var(--warn)}
.flash strong{color:inherit}
.callout{padding:14px 18px;border:0;border-radius:var(--r-lg);background:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);color:var(--text)}
.callout.row{flex-wrap:wrap}
.callout--warning{background:var(--warn-soft);box-shadow:none;color:var(--warn)}
.callout--danger{background:var(--danger-soft);box-shadow:none;color:var(--danger)}
.callout--warning strong,.callout--danger strong{color:inherit}
.callout .btn{flex:none}

table.table{border-collapse:collapse}
/* Tableaux compacts : en-têtes en mono capitales, montants en chiffres tabulaires, survol de ligne sur la carte */
.table th{padding:10px 14px;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-align:left;text-transform:uppercase;white-space:nowrap}
.table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--card)}
.table th.right,.table td.right{text-align:right}
a.row-title{color:var(--ink);font-weight:600;text-decoration:underline transparent;text-decoration-thickness:1.5px;text-underline-offset:3px}
a.row-title:hover{color:var(--ink);text-decoration-color:var(--ink)}
.table .sub,.sub{display:block;font-size:var(--fs-sm);color:var(--muted)}
.sub:has(>.badge){margin-top:6px}
.table td .actions{flex-wrap:nowrap}
.table td.right .actions{justify-content:flex-end}
.table th:first-child{width:auto}

.dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;margin:0}
.dl dt{color:var(--muted)}
.dl dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.list{list-style:none;margin:0;padding:0}
.list>li{padding:14px 20px;border-bottom:1px solid var(--line)}
.list>li:last-child{border-bottom:0}
.list>li>.track{margin-top:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.row__main{min-width:0}
@container (max-width:480px){.row:has(>.num){flex-wrap:wrap;row-gap:4px}.row>.num{flex-basis:100%}}
.row__main strong{color:var(--ink);font-weight:600}

.chips{display:flex}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--control);height:auto;padding:0 14px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);text-decoration:none;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip small{font-family:var(--f-mono);font-size:10px;font-weight:500;color:var(--muted)}
.chip[aria-current=true]{background:var(--ink);color:var(--wall);box-shadow:none}
.chip[aria-current=true] small{color:var(--on-ink-soft);opacity:1}

/* Onglets : les liens de la navigation, l'onglet ouvert au surligneur */
.tabs{display:flex;gap:0 22px;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;text-decoration:none;color:var(--soft);font-weight:500;white-space:nowrap;flex:none}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=page]{color:var(--ink);font-weight:600;box-shadow:none}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right}
.tabs a:hover::after{transform:scaleX(1);transform-origin:left}
.tabs a[aria-current=page]::after{content:"";position:absolute;z-index:-1;left:-3px;right:-3px;bottom:13px;height:8px;border-radius:2px;background:var(--marker);transform:none}
.tabs small{padding:1px 7px;border-radius:999px;background:var(--card);color:var(--soft);font-family:var(--f-mono);font-size:10px;font-weight:500}

/* Frise d'un projet : la même que dans l'espace client. Étapes faites à l'encre ; l'étape en cours à l'encre jusqu'à son
   avancement, puis au surligneur ; site en ligne en vert ; projet en pause en gris plein */
.track{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0;counter-reset:step}
.track li{position:relative;padding-top:16px;font-size:13px;font-weight:500;line-height:1.3;color:var(--muted);counter-increment:step}
.track li::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;border-radius:4px;background:var(--line)}
.track li.is-done::before{background:var(--ink)}
.track li.is-current::before{background:linear-gradient(90deg,var(--ink) 0 var(--fill,50%),var(--marker) var(--fill,50%));box-shadow:inset 0 0 0 1.5px var(--ink)}
.track li.is-current{color:var(--ink);font-weight:700}
.track li.is-done{color:var(--soft)}
.track--online li::before{background:var(--ok)!important;box-shadow:none!important}
.track--paused li::before{background:var(--line-strong)!important;box-shadow:none!important}
.fill-0{--fill:4%}.fill-10{--fill:10%}.fill-20{--fill:20%}.fill-30{--fill:30%}.fill-40{--fill:40%}.fill-50{--fill:50%}.fill-60{--fill:60%}.fill-70{--fill:70%}.fill-80{--fill:80%}.fill-90{--fill:90%}.fill-100{--fill:100%}
.track--compact li{font-size:0;padding-top:8px}
/* Grande frise de la fiche d'un site : barres de 12 px ; quand les noms d'étape n'ont plus la place, leurs numéros en mono */
.site-frise .track li{padding-top:24px;font-size:14px}
.site-frise .track li::before{height:12px;border-radius:6px}
.site-frise__label{display:none;margin:14px 0 0;font-size:var(--fs-sm);color:var(--text)}
@container (max-width:640px){
  .site-frise .track li{padding-top:20px;font-size:0}
  .site-frise .track li::after{content:counter(step);content:counter(step) / "";font-family:var(--f-mono);font-size:11px;line-height:1.3}
  .site-frise .site-frise__label{display:block}
}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 20px;border-left:1px solid var(--line);margin-left:6px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.timeline li.is-client::before{border-color:var(--ink)}
.timeline .when{font-size:var(--fs-xs);color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Date et adresse d'un événement : des données, en mono comme les dates du journal */
.timeline .when .mono{font-size:11px;letter-spacing:.02em}
.timeline .what{color:var(--ink)}
.timeline .body{white-space:pre-line;margin-top:2px}

.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line-strong);margin-right:6px;vertical-align:1px}
.status-dot--up{background:var(--green)}
.status-dot--down{background:var(--danger)}
.secret{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r);font-family:var(--f-mono);font-size:.9em;color:var(--ink);overflow-wrap:anywhere}
.hint code,.secret span{overflow-wrap:anywhere;word-break:break-all}
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--wall);font-weight:700;font-size:var(--fs-md);flex:none}
.avatar--sm{width:32px;height:32px;border-radius:50%;font-size:var(--fs-xs)}
details.more summary,.settings-add-account summary{display:inline-flex;align-items:center;gap:10px;list-style:none}
details.more summary::-webkit-details-marker,.settings-add-account summary::-webkit-details-marker{display:none}
details.more summary::after,.settings-add-account summary::after{content:"";flex:none;width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
details.more[open] summary::after,.settings-add-account[open] summary::after{transform:rotate(45deg)}
details.more summary{cursor:pointer;color:var(--blue-ink);font-weight:600}
details.more[open] summary{margin-bottom:12px}
.danger-zone{border-color:color-mix(in srgb,var(--red) 30%,var(--line))}
.danger-zone .panel__head h2{color:var(--red)}
.template-help{font-size:var(--fs-xs);color:var(--muted);margin:4px 0 0;line-height:1.8}
.template-help code{background:var(--surface-2);border:1px solid var(--line);padding:1px 5px;border-radius:5px}

/* 5 ─ Structure de l'administration ------------------------------------- */
.crm-brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;white-space:nowrap}
.crm-brand:hover{color:var(--ink)}
.crm-brand__logo{display:block;width:104px;height:22px;background:var(--logo) left center/contain no-repeat}
.crm-brand__sep{width:1px;height:18px;overflow:hidden;background:var(--line);color:transparent}
.crm-brand__product{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}

/* Fil d'Ariane : mono en capitales, liens soulignés */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.crumbs a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.page-head{display:flex;flex-wrap:wrap}
.page-head>:first-child{flex:1 1 360px;min-width:0}
.page-head>:not(:first-child){flex:none}
.page-head>form.actions,.page-head>.actions{flex-wrap:wrap}
.page-head p{margin:8px 0 0}
.page-head .meta{margin-top:8px}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--muted);font-size:var(--fs-sm)}
.client-head{display:flex;gap:16px;align-items:center}

.search{display:flex;gap:8px;margin-left:auto}
.search input{width:clamp(220px,22vw,340px)}

.kpi--alert .kpi__value{color:var(--red)}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,400px);gap:16px;align-items:start}
.client-overview{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:1900px){.client-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid-2+.panel,.grid-main+.panel,.kpis+.grid-2,.panel+.grid-2,.callout+.grid-2{margin-top:16px}

/* 6 ─ Écrans ------------------------------------------------------------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.site-card{display:flex;flex-direction:column;gap:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);min-width:0}
.site-card--inactive{background:var(--surface-2)}
.site-card--inactive h3 a{color:var(--muted)}
.site-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.site-card__title{min-width:0}
.site-card h3{font-size:var(--fs-md);overflow-wrap:anywhere}
.site-card h3 a{color:var(--ink);text-decoration:none}
.site-card h3 a:hover{color:var(--blue-ink);text-decoration:underline}
.site-card__client{display:inline-block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted);text-decoration:none}
.site-card__client:hover{color:var(--blue-ink);text-decoration:underline}
.site-card__foot{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
/* Pied d'une carte : un fait par ligne (mise en ligne ou livraison, puis disponibilité), chacun avec son icône ; les
   boutons passent toujours dessous */
.site-card__facts{flex:1 1 100%;display:grid;gap:4px;min-width:0}
.site-card__fact{display:flex;align-items:center;gap:6px;min-width:0}
.site-card__fact .icon{width:14px;height:14px}
.site-status{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;min-height:22px}
.site-status__url{font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.site-status__url:hover{text-decoration:underline}
.site-status__monitor{font-size:var(--fs-sm);color:var(--text);white-space:nowrap}
.site-progress{display:grid;gap:8px}
.site-progress__label{font-size:var(--fs-sm);color:var(--text)}
.site-row{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.site-row__main{display:grid;gap:6px;flex:1 1 360px;min-width:0}
.site-row .site-progress{max-width:520px}
.chips--end{margin-left:auto}
.chips__sep{align-self:stretch;width:1px;margin:6px 4px;background:var(--line-strong)}
.choice--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:6px}

.legend{display:flex;gap:16px;font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--blue)}
.legend i.prev{background:var(--chart-soft)}
/* Graphiques des finances (charte, § 11, étape 7) : le tracé est un SVG étiré sur la largeur, à hauteur fixe (200 px,
   comme $h dans views/admin/partials/bars.php, columns.php et line.php) ; colonnes et traits gardent leur épaisseur
   (vector-effect), et le texte sa taille à toutes les largeurs : valeurs et mois en HTML, graduations et dernière valeur
   dans des marges à l'échelle 1 */
.fchart{container:fchart / inline-size;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
.fchart__values,.fchart__x{grid-column:2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.fchart__values{grid-row:1;padding-bottom:6px}
.fchart__values li{justify-self:center;min-height:15px;font-size:11px;line-height:15px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.fchart__values li.is-current{color:var(--ink);font-weight:600}
.fchart__y{grid-column:1;grid-row:2;width:48px;height:200px;margin-right:8px;overflow:visible}
.fchart__plot{grid-column:2;grid-row:2;display:block;width:100%;height:200px;overflow:visible}
.fchart__end{grid-column:3;grid-row:2;width:56px;height:200px;overflow:visible}
.fchart__x{grid-row:3;padding-top:10px}
.fchart__x li{justify-self:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fchart__x li.is-current{color:var(--ink);font-weight:600}
.fchart__year{display:block;text-align:center}
:is(.fchart__y,.fchart__end) text{font-family:var(--f-mono);font-size:9.5px;fill:var(--muted);dominant-baseline:middle}
.fchart__y text{text-anchor:end}
.fchart__end text{font-family:var(--f-body);font-size:12px;font-weight:600;fill:var(--ink)}
/* Épaisseur des colonnes : suit la largeur du graphique et le nombre de mois (environ la moitié d'une colonne) */
.fchart__plot{--bar:12px}
.fchart--24 .fchart__plot{--bar:6px}
@container fchart (width >= 560px){.fchart--12 .fchart__plot{--bar:22px}.fchart--24 .fchart__plot{--bar:10px}}
@container fchart (width >= 1000px){.fchart--12 .fchart__plot{--bar:34px}.fchart--24 .fchart__plot{--bar:16px}}
@container fchart (width >= 1500px){.fchart--12 .fchart__plot{--bar:44px}.fchart--24 .fchart__plot{--bar:22px}}
.fchart__plot .grid{stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke}
.fchart__plot .grid--zero{stroke:var(--line-strong)}
.fchart__plot :is(.bar,.seg){stroke:var(--ink);stroke-width:var(--bar);stroke-linecap:butt;vector-effect:non-scaling-stroke}
/* Année en cours à l'encre, étroite, devant l'année précédente, large et claire */
.fchart__plot .bar{stroke-width:calc(var(--bar) * .55)}
.fchart__plot .bar--prev{stroke:var(--chart-soft);stroke-width:var(--bar)}
.fchart__plot .bar--mark{stroke:var(--marker);stroke-width:calc(var(--bar) * .55 - 3px)}
.fchart__plot .seg--oneoff{stroke:var(--chart-soft)}
.fchart__plot .seg--new{stroke:var(--ok)}
.fchart__plot .seg--lost{stroke:var(--danger)}
.fchart__plot .seg--amber{stroke:var(--warn)}
.fchart__plot .col--future .seg{stroke:var(--line)}
.fchart__plot .col__hit{fill:transparent}
.fchart__plot .col.is-hover .col__hit{fill:var(--card);mix-blend-mode:multiply}
.fchart__plot .area{fill:var(--band)}
.fchart__plot .line{fill:none;stroke:var(--ink);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Point : un trait de longueur nulle aux bouts ronds, un disque qui garde sa taille dans le repère étiré */
.fchart__plot .dot{fill:none;stroke:var(--ink);stroke-width:10px;stroke-linecap:round;vector-effect:non-scaling-stroke;visibility:hidden}
.fchart__plot .dot--core{stroke:var(--paper);stroke-width:4px}
.fchart__plot .pt--last .dot--core{stroke:var(--marker)}
.fchart__plot :is(.pt--last,.pt.is-hover) .dot{visibility:visible}
.fchart__plot .goal{stroke:var(--ok);stroke-width:1.5px;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
/* Valeurs : toutes quand elles tiennent, sinon celle du mois en cours. Mois : tous quand ils tiennent ; sinon, sur 12,
   un sur deux (le mois en cours reste, ses voisins s'effacent) ; sur 24, un sur deux, trois, quatre ou six en partant
   du dernier, le mois en cours */
@container fchart (width < 560px){.fchart__values li:not(.is-current){visibility:hidden}}
@container fchart (width < 520px){.fchart--12 .fchart__x li:nth-child(even):not(.is-current),.fchart--12 .fchart__x li:is(.is-current+li,:has(+.is-current)){visibility:hidden}}
@container fchart (width < 300px){.fchart--12 .fchart__x li:not(.is-current){visibility:hidden}.fchart--12 .fchart__x li:nth-child(3n+1):not(.is-current+li,.is-current+li+li,:has(+.is-current),:has(+li+.is-current)){visibility:visible}}
@container fchart (width < 1400px){.fchart--24 .fchart__x li:nth-last-child(even){visibility:hidden}}
@container fchart (width < 730px){.fchart--24 .fchart__x li:nth-last-child(odd){visibility:hidden}.fchart--24 .fchart__x li:nth-last-child(3n+1){visibility:visible}}
@container fchart (width < 512px){.fchart--24 .fchart__x li:nth-last-child(3n+1){visibility:hidden}.fchart--24 .fchart__x li:nth-last-child(4n+1){visibility:visible}}
@container fchart (width < 392px){.fchart--24 .fchart__x li:nth-last-child(4n+1){visibility:hidden}.fchart--24 .fchart__x li:nth-last-child(6n+1){visibility:visible}}
@media (forced-colors:active){
  .fchart__plot,.fchart__y,.fchart__end,.legend i{forced-color-adjust:none}
  .fchart__plot .grid{stroke:GrayText}
  .fchart__plot :is(.bar,.seg,.line,.dot,.goal){stroke:CanvasText}
  .fchart__plot :is(.bar--prev,.seg--oneoff,.col--future .seg){stroke:GrayText}
  .fchart__plot .bar--mark{stroke:Highlight}
  /* Séries empilées : des hachures distinguent ce que la couleur ne peut plus distinguer */
  .fchart__plot .seg--amber{stroke-dasharray:4 2}
  .fchart__plot :is(.seg--lost,.seg--new){stroke-dasharray:2 2}
  .fchart__plot .area{fill:Canvas}
  .fchart__plot .dot--core{stroke:Canvas}
  .fchart__plot .col.is-hover .col__hit{fill:Canvas}
  .fchart__plot .pt--last .dot--core{stroke:Highlight}
  :is(.fchart__y,.fchart__end) text{fill:CanvasText}
}
.legend i.new{background:var(--green)}
.legend i.lost{background:var(--red)}
.legend i.amber{background:var(--amber)}
/* Légende en contraste élevé : les hachures des séries empilées (après les couleurs, de même précision) */
@media (forced-colors:active){
  .legend i{background:CanvasText}
  .legend i.prev{background:GrayText}
  .legend i:is(.new,.lost){background:repeating-linear-gradient(CanvasText 0 2px,Canvas 2px 4px)}
  .legend i.amber{background:repeating-linear-gradient(CanvasText 0 4px,Canvas 4px 6px)}
}
.chart-tip{position:fixed;z-index:1000;max-width:260px;padding:8px 11px;border-radius:var(--r);background:var(--ink);color:var(--surface);font-size:var(--fs-sm);line-height:1.45;white-space:pre-line;pointer-events:none;box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.panel+.kpis{margin-top:16px}
.kpis--compact .kpi{padding:14px 18px}
.kpis--compact .kpi__value{font-size:var(--fs-xl)}
.hbars{list-style:none;margin:0;padding:8px 20px 18px;display:grid;gap:14px}
.hbars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.hbars__label{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.hbars__value{text-align:right}
.hbars progress{grid-column:1/-1;appearance:none;width:100%;height:8px;border:0;border-radius:4px;background:var(--line);overflow:hidden}
.hbars progress::-webkit-progress-bar{background:var(--line);border-radius:4px}
.hbars progress::-webkit-progress-value{background:var(--blue);border-radius:4px}
.hbars progress::-moz-progress-bar{background:var(--blue);border-radius:4px}
.hbars--ok progress::-webkit-progress-value{background:var(--green)}.hbars--ok progress::-moz-progress-bar{background:var(--green)}
.hbars--danger progress::-webkit-progress-value{background:var(--red)}.hbars--danger progress::-moz-progress-bar{background:var(--red)}
.hbars--warning progress::-webkit-progress-value{background:var(--amber)}.hbars--warning progress::-moz-progress-bar{background:var(--amber)}
.goal-panel .panel__head{flex-wrap:wrap;gap:12px}
.goal-panel .inline-form{display:flex;gap:8px;align-items:center}
.goal-panel .input-suffix{width:170px}
.goal-facts{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted);font-size:var(--fs-sm)}
.goal-facts strong{color:var(--ink)}
[data-tool=simulateur] fieldset{border:0;padding:0;min-width:0}
[data-tool=simulateur] legend{padding:0;margin-bottom:8px;font-weight:600;color:var(--ink)}
[data-tool=simulateur] td.is-alert{color:var(--red);font-weight:600}
.gauge{display:grid;gap:8px}
.gauge__head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gauge__head strong{color:var(--ink)}
.gauge progress{appearance:none;width:100%;height:8px;border:0;border-radius:4px;background:var(--line);overflow:hidden}
.gauge progress::-webkit-progress-bar{background:var(--line);border-radius:4px}
.gauge progress::-webkit-progress-value{background:var(--blue);border-radius:4px}
.gauge progress::-moz-progress-bar{background:var(--blue);border-radius:4px}
.gauge--warning progress::-webkit-progress-value{background:var(--amber)}.gauge--warning progress::-moz-progress-bar{background:var(--amber)}
.gauge--danger progress::-webkit-progress-value{background:var(--red)}.gauge--danger progress::-moz-progress-bar{background:var(--red)}
.gauge p{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.gauge+.gauge{padding-top:16px;border-top:1px solid var(--line)}
/* Barres de répartition et jauges en contraste élevé : leurs fonds étaient remplacés par Canvas, la barre disparaissait */
@media (forced-colors:active){
  :is(.hbars,.gauge) progress{forced-color-adjust:none;border:1px solid CanvasText;background:Canvas}
  :is(.hbars,.gauge) progress::-webkit-progress-bar{background:Canvas}
  :is(.hbars,.gauge) progress::-webkit-progress-value{background:CanvasText}
  :is(.hbars,.gauge) progress::-moz-progress-bar{background:CanvasText}
}
.aging{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.aging div{padding:12px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.aging span{display:block;font-size:var(--fs-xs);color:var(--muted)}
.aging strong{font-variant-numeric:tabular-nums;color:var(--ink)}
.aging .is-bad strong{color:var(--red)}
.late-list .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
.late-list .actions{flex-wrap:nowrap;gap:16px}
@container (max-width:520px){.late-list .row{grid-template-columns:minmax(0,1fr)}.late-list .actions{justify-content:space-between}}

.steps{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 20px;flex-wrap:wrap}
.steps li{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.steps li.is-done{color:var(--green)}
.steps li.is-current{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.account-head{align-items:center}
.account-head__title{display:flex;align-items:center;gap:14px}
.page-icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--blue-soft);color:var(--blue-ink)}
.page-icon .icon{width:23px;height:23px}
.account-head__email{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-title-icon{display:flex;align-items:center;gap:9px}
.panel-title-icon .icon{width:18px;height:18px;color:var(--ink)}

/* Connexion et erreurs */
/* Connexion : une carte papier posée sur le mur, le logo encre, un titre en Funnel Display */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 24px}
.auth__box{width:min(440px,100%)}
.auth__brand{display:flex;justify-content:center;margin-bottom:28px}
.auth__brand .crm-brand__logo{width:115px;height:24px}
.auth__brand .crm-brand__sep{height:20px}
.auth__brand .crm-brand__product{font-size:11px}
.auth__heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:25px}
.auth__heading h1{font-size:26px;margin:2px 0 6px}
.auth__heading p{color:var(--soft);margin:0;line-height:1.55}
.auth__icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--card);color:var(--ink)}
.auth__icon .icon{width:22px;height:22px}
.auth__card form>*+*{margin-top:18px}
.auth__card input:not([type=checkbox]):not([type=radio]):not([type=file]){min-height:48px}
.input-shell{position:relative;display:block}
.input-shell>.icon{position:absolute;z-index:1;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.input-shell input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-left:42px}
.auth__card .btn--block{min-height:48px;margin-top:22px;font-size:var(--fs-md)}
/* Choix du dossier : nom au-dessus, référence en dessous, pour distinguer deux dossiers homonymes. */
.auth__security{display:block;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;text-align:center;text-wrap:balance}
:is(.auth,.page-head) h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.auth__security .icon{display:inline-block;margin-right:8px;vertical-align:-3px;color:var(--ok)}
.auth__foot{text-align:center;font-size:var(--fs-sm);color:var(--muted);margin-top:16px}
.error-page{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.error-page .code{display:inline-block;padding:0 6px;font-family:var(--f-disp);font-size:72px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1;background:linear-gradient(transparent 64%,var(--marker) 64%)}
.error-page h1{margin:18px 0 8px;font-size:26px}
.error-page p{color:var(--soft);max-width:48ch;margin:0 auto 22px}

/* 7 ─ Pièces des fiches : accès, paiements, statistiques --------------- */
.section-title h2{font-size:var(--fs-lg)}
/* Identifiants des services : mot de passe masqué, affiché à la demande (fiche client et formulaire d'un accès,
   views/admin/partials/secret.php) */
.pw{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;margin:0}
.pw__value,.secret-plain,.credential-login{font-family:var(--mono);font-size:.9em;word-break:break-all;color:var(--ink)}
.pw__value[data-shown]{padding:2px 8px;border-radius:6px;background:var(--surface-2)}
.pw__actions{display:inline-flex;gap:2px}
.pw__notes{flex-basis:100%;white-space:pre-wrap;line-height:1.5}
.section-title p{margin:0}
.gstats-sites{list-style:none;margin:0;padding:0}
.gstats-sites li>.grow{flex:1 1 auto;min-width:0}
.gstats-sites li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.gstats-sites li:first-child{border-top:0;padding-top:0}
@media (max-width:900px){.section-title{flex-wrap:wrap}}
/* Serveurs de messagerie d'un accès (formulaire du CRM) */
.mail-servers{display:grid;gap:12px;margin:0;padding:16px;border:1px solid var(--line);border-radius:var(--r)}
.mail-servers legend{padding:0 6px;font-weight:650;color:var(--ink)}
.mail-servers__row{display:grid;grid-template-columns:minmax(0,2fr) minmax(80px,.6fr) minmax(0,1fr);gap:12px}
@media (max-width:560px){.mail-servers__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mail-servers__row .field:first-child{grid-column:1/-1}}

/* 8 ─ Petits écrans ------------------------------------------------------ */
@media (max-width:1180px){
  .grid-main{grid-template-columns:minmax(0,1fr)}
  .aging{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .topbar{align-items:center;justify-content:space-between;gap:10px;height:60px;padding:0 16px;position:sticky;top:0;z-index:30}
  .topbar .crm-brand{color:var(--night-text)}
  .topbar .btn{background:transparent;box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-text)}
  .topbar .btn:hover{background:var(--night-card);color:var(--night-text)}
  .sidebar{transform:translateX(-100%);transition:transform .35s var(--ease);box-shadow:none}
  .sidebar.is-open{transform:none}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .search{margin-left:0;width:100%}
  .search input{width:auto;flex:1}
}
@media (max-width:640px){
  h1{font-size:24px}
  .page-head>:first-child{flex-basis:100%}
  .aging{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl{grid-template-columns:minmax(0,1fr);gap:2px}.dl dd{margin-bottom:10px}
  .table:not(.table--cards) th:nth-child(n+4),.table:not(.table--cards) td:nth-child(n+4){display:none}
  .table td.keep,.table th.keep{display:table-cell}
  .auth{padding:20px 14px}
  .auth__brand{margin-bottom:20px}
  .auth__heading{gap:11px}
  .auth__icon{width:40px;height:40px;border-radius:50%}
  .account-head__title{align-items:flex-start}
  .page-icon{width:40px;height:40px;border-radius:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.sidebar,.topbar,.actions,.btn{display:none!important}body{background:#fff}}

/* Réglages de gestion */
.settings{display:block}
.settings--management{display:grid;align-items:start;min-width:0}
.settings-heading{border-bottom:1px solid var(--line);margin-bottom:28px}
.settings-nav{position:sticky;top:24px;min-width:0}
.settings-nav summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;color:var(--ink);cursor:pointer;padding:8px 10px;list-style:none}
.settings-nav summary::-webkit-details-marker{display:none}
.settings-nav summary::after{content:"";flex:none;width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
.settings-nav details[open]>summary::after{transform:rotate(45deg)}
.settings-nav__group{margin-bottom:22px;display:grid;gap:2px}
.settings-nav__group h2{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin:10px 10px 6px}
.settings-nav a{display:block;padding:9px 10px;color:var(--text);border-radius:7px;font-size:var(--fs-base);text-decoration:none}
.settings-nav a:hover{background:var(--surface-2);color:var(--ink)}
.settings-nav a[aria-current=page]{background:var(--blue-soft);color:var(--blue-ink);font-weight:650}
.settings-workspace{min-width:0;container-type:inline-size}
.settings-page-head{margin-bottom:24px}
.settings-page-head h2{font-size:22px;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.settings-page-head p{margin:0;color:var(--text)}
.settings__tools{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;padding:0 0 20px;border-bottom:1px solid var(--line)}
.settings-outline{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px 18px}
.settings-outline a{color:var(--text);font-size:var(--fs-sm);text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.settings-outline a:hover{color:var(--blue-ink)}
.settings__search{position:relative;flex:0 1 340px;min-width:0}
.settings__search .icon{position:absolute;left:12px;top:50%;margin-top:-8px;color:var(--text);pointer-events:none}
.settings__search input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-left:36px;background:var(--surface-2)}
.settings__empty{padding:36px 20px;text-align:center;color:var(--text)}
.settings__empty p{margin-bottom:16px}
.settings-grid{display:grid;min-width:0}
.set-card{min-width:0;padding:28px 0 32px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.set-card__head{margin-bottom:22px;min-width:0}
.set-card__head h2{font-size:var(--fs-md);font-weight:650;color:var(--ink);margin:0 0 5px}
.set-card__head .hint{line-height:1.6}
.set-card__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:24px 28px;min-width:0}
.set-card__body--pad{display:block}
.set-card__body>:not(.set-row){grid-column:1/-1}
.set-card__body--pad .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.set-row{display:flex;flex-direction:column;gap:8px;min-width:0}
.set-row__text{display:contents}
.set-row__text label,.set-row__text .label{color:var(--ink);font-weight:550;font-size:var(--fs-base);order:0}
.set-row__text .hint{font-size:var(--fs-sm);line-height:1.55;order:2}
.settings--management .hint{color:var(--text)}
.set-row__control{min-width:0;order:1}
.set-row__control .actions{display:flex;flex-wrap:wrap;gap:8px}
.set-row__note{margin:0;font-size:var(--fs-base);color:var(--text)}
.set-row--wide{grid-column:1/-1}
.set-row--switch{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:16px 18px;background:var(--surface-2);border-radius:8px}
.set-row--switch .set-row__text{display:grid;gap:4px}
.settings--management .input-suffix{display:flex;align-items:stretch;min-height:var(--control);border:1.5px solid var(--field-line,var(--line));border-radius:var(--r);background:var(--surface);overflow:hidden}
.settings--management .input-suffix:hover{--field-line:var(--field-line-hover)}
.settings--management .input-suffix:focus-within{border-color:var(--blue)}
.settings--management .input-suffix input:not([type=checkbox]):not([type=radio]):not([type=file]){min-width:0;min-height:0;border:0;padding:0 12px;box-shadow:none;background:transparent}
.settings--management .input-suffix>span{position:static;display:flex;align-items:center;flex:none;padding:0 12px;transform:none;background:var(--surface-2);border-left:1px solid var(--line);color:var(--text);white-space:nowrap}
.settings--management .savebar{margin-top:24px;border-radius:8px;padding:14px 16px;bottom:12px;flex-wrap:wrap}
.settings--management .savebar .actions{display:flex;gap:8px;flex-wrap:wrap}
.settings--management .is-filtered{display:none!important}
.settings--management input::placeholder,.settings--management textarea::placeholder{color:var(--text);opacity:1}
.settings-add-account summary{cursor:pointer;padding:14px 0;color:var(--blue-ink);font-weight:600}
.settings--management .account{border:0;border-radius:0;padding:0;background:transparent}
.settings--management .account--new{padding-top:20px;border-top:1px dashed var(--line-strong)}
.settings--management .account__head{flex-wrap:wrap}
@container (max-width:600px){
  .set-card__body,.set-card__body--pad .form-grid{grid-template-columns:minmax(0,1fr)}
  .set-card__body--pad .span-2{grid-column:1/-1}
  .settings__search{flex-basis:100%}
  .settings--management .savebar{position:static;align-items:stretch}
  .settings--management .savebar .hint{display:block;font-size:var(--fs-sm)}
  .settings--management .savebar .actions{display:grid;grid-template-columns:1fr}
}
@media (min-width:1101px){.settings-nav summary{display:none}}
@media (max-width:1100px){
  .settings-nav{position:static;border:1px solid var(--line);border-radius:8px;padding:8px}
  .settings-nav nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .settings-nav__group{margin:0}
}
@media (max-width:540px){.settings-nav nav{grid-template-columns:minmax(0,1fr)}.settings-nav__group{margin-bottom:8px}}
/* Interrupteur : une case à cocher, dessinée */
.switch{appearance:none;-webkit-appearance:none;flex:none;width:40px;height:23px;margin:0;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch:checked{background:var(--blue)}
.switch:checked::after{transform:translateX(17px);background:var(--knob-on)}
.switch:disabled{background:var(--line);cursor:default}
.switch:disabled::after{box-shadow:none}
.savebar .btn--primary:disabled{pointer-events:none}
.savebar>.actions{margin-left:auto}
/* Mêmes sections ailleurs : réglages des emails, du site vitrine */
.settings__content{min-width:0}
.setting{display:block}
.setting__head{display:grid;gap:4px;padding:16px 20px;border-bottom:1px solid var(--line)}
.setting__head h2{font-size:var(--fs-md)}
.setting__head .hint{font-size:var(--fs-sm)}
.setting__status{margin:4px 0 0;font-size:var(--fs-sm);color:var(--ink)}
.setting__body{padding:18px 20px;min-width:0;container-type:inline-size}
.setting .form-actions{margin-top:24px}
.options{display:grid}
.option{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:12px 32px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.option:first-child{padding-top:0;border-top:0}
.option:last-child{padding-bottom:0}
.option__toggle{display:flex;flex-direction:column;gap:2px}
.option__toggle.check{flex-direction:row}
.option__toggle>span{display:grid;gap:2px}
.option__toggle strong{color:var(--ink);font-weight:600}
.option__detail{min-width:0;transition:opacity .15s}
.option__detail>p{margin:6px 0 0}
.is-off :is(label,.label,.hint,legend){color:var(--muted)}
.admin-ui .is-off :is(input,select,textarea):disabled{background-color:var(--card);color:var(--muted);cursor:not-allowed;opacity:1}
.accounts{display:grid;gap:12px}
.account{margin:0;padding:16px 18px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);min-width:0}
.account--new{background:transparent;border-style:dashed}
.account__head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 0 12px;font-weight:600;color:var(--ink)}
.account__default{font-weight:500;font-size:var(--fs-sm)}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.choice__item{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer}
.choice__item:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-soft)}
.choice__item input{margin-top:2px;accent-color:var(--blue)}
.choice__item span{display:grid;gap:2px}
.choice__item strong{color:var(--ink)}
.savebar{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 20px;background:var(--surface);border:1px solid var(--line)}
@container (max-width:640px){.option{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.savebar{flex-direction:column;align-items:stretch}.savebar .hint{display:none}}
.site-row .site-status{justify-content:flex-start}

/* Échéancier des contrats ponctuels */
.installments{display:grid;gap:12px;border-radius:var(--r-lg)}
.installments__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap}
.installments__head .chips .chip{cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:600}
.installments .table-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.installments__table td{padding:8px 10px}
.installments__table th{padding:8px 10px}
.installments__table td:nth-child(2){min-width:180px}
.installments__pct{width:96px;margin-left:auto}
.installments__table tfoot td{border-top:1px solid var(--line);border-bottom:0;background:var(--surface-2);font-weight:600;color:var(--ink)}
.is-invalid{color:var(--red)!important}
.installments__table td:nth-child(5) select{min-width:168px}
.installments__table td:nth-child(6) input{min-width:150px}
.installments__table td:nth-child(2) input{min-width:170px}
.installments__table td:nth-child(4){min-width:96px}
@container (max-width:860px){
  .installments__table th:first-child,.installments__table td:first-child{display:none}
  .installments__table td:nth-child(2) input{min-width:118px}
  .installments__table td:nth-child(5) select{min-width:142px}
  .installments__table td:nth-child(6) input{min-width:128px}
  .installments__pct{width:80px}
  .installments__table td,.installments__table th{padding:8px 6px}
}

/* Icônes : même trait que le menu, 16 px, couleur du texte (atténuée dans les métadonnées) */
.icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.btn .icon{margin-left:-2px}
.btn--sm .icon{width:14px;height:14px}
.btn .icon:last-child:not(:first-child){margin:0 -2px 0 0}
.btn.btn--icon .icon{margin:0}
.meta>span:has(>.icon){display:inline-flex;align-items:center;gap:6px}
.meta .icon{color:var(--muted)}
.tabs a .icon{color:var(--muted)}
.tabs a:hover .icon,.tabs a[aria-current=page] .icon{color:var(--ink)}
.title-icon{display:flex;align-items:center;gap:10px}
.title-icon .icon{width:18px;height:18px;color:var(--muted)}
.dl dt:has(>.icon){display:flex;align-items:center;gap:8px}
.dl dt .icon{color:var(--muted)}
@media (max-width:640px){.page-head>:not(:first-child){flex:1 1 100%;min-width:0}.page-head>.actions{flex-wrap:wrap}.page-head>.actions>.btn,.page-head>.actions>form,.page-head .actions--live>.btn,.page-head .actions--live>form{flex:1 1 auto}.page-head>.actions>.thread-sound{flex:none}}

/* Suggestions d'adresse (Base Adresse Nationale) */
.address-field{position:relative}
.suggestions{position:absolute;z-index:20;top:62px;left:0;right:0;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-pop);max-height:280px;overflow-y:auto}
.suggestions [role=option]{display:grid;gap:1px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.suggestions [role=option] strong{color:var(--ink);font-weight:600}
.suggestions [role=option] span{font-size:var(--fs-sm);color:var(--muted)}
.suggestions [role=option]:hover,.suggestions [aria-selected=true]{background:var(--blue-soft)}
/* Suggestions d'un champ libre (remplace la liste native) : placées sous le champ par le script */
.suggest-field{position:relative}
.suggestions--field{right:auto;max-height:260px}
.suggestions--field [role=option]{padding:7px 10px}
[data-address-hint] .link-btn,[data-city-hint] .link-btn{font-size:inherit}

/* Note rapide (fiche client) */
.note-form{display:grid;gap:10px}
.note-form__actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.note-form__actions select{width:auto;min-width:140px}
.note-form+*{margin-top:4px}

/* Tableau de bord du quotidien */
.dash-block .list>li{padding:12px 20px}
.dash-count{min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-family:var(--f-mono);font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums;display:inline-grid;place-items:center;margin-left:2px}
.dash-count.is-active{background:var(--blue-soft);color:var(--blue-ink)}
.dash-summary{margin:0;padding:10px 20px 0;font-size:var(--fs-sm);color:var(--text)}
.dash-summary+.list,.dash-summary+.empty{margin-top:4px}
.dash-more{margin:0;padding:10px 20px 14px;font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--line)}
.dash-block .empty{padding:20px}
.is-late{color:var(--red)!important;font-weight:600}
/* Tâches */
.task-list{list-style:none;margin:0;padding:0}
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;border-bottom:1px solid var(--line)}
/* Échéance (rouge doux en retard, ambre doux aujourd'hui, cerclée ensuite) et priorité haute, à droite de la ligne */
.task__side{display:flex;flex-wrap:wrap;justify-content:flex-end;align-self:center;gap:6px;flex:none}
.task:last-child{border-bottom:0}
.task__check{display:flex}
.task__box{width:22px;height:22px;margin-top:1px;border:2px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0;color:var(--green)}
.task__box:hover{border-color:var(--blue)}
.task__box .icon{width:18px;height:18px}
.task--done .task__title{text-decoration:line-through;color:var(--muted)}
.task__main{min-width:0;flex:1;overflow-wrap:anywhere}
.task__title{color:var(--ink);font-weight:600;text-decoration:none}
.task__title:hover{text-decoration:underline}
.task__meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px;font-size:var(--fs-sm);color:var(--muted)}
.task__meta>span,.task__meta>a{display:inline-flex;align-items:center;gap:5px}
.task__meta a{color:var(--muted);text-decoration:none}
.task__meta a:hover{color:var(--blue-ink);text-decoration:underline}
.task__meta .icon{width:14px;height:14px}
.task-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px 16px;align-items:end}
.task-form__title,.task-form__client,.task-form__site{grid-column:span 2}
.task-form__notes{grid-column:1/-1}
.task-form__actions{display:flex;justify-content:flex-end}
/* Création rapide : le bouton ferme la dernière rangée, à droite. Modification : une rangée entière sous les notes, où
   l'état de la saisie (admin.js) se place à gauche et les boutons à droite, comme dans les autres formulaires */
.task-form--compact .task-form__actions{grid-column:-2/-1}
.task-form--compact .task-form__actions>:not(.btn--primary){display:none}
.task-form:not(.task-form--compact) .task-form__actions,.task-form:not(.task-form--compact) .task-form__title{grid-column:1/-1}
@container (max-width:560px){.task-form{grid-template-columns:minmax(0,1fr)}.task-form__title,.task-form__client,.task-form__site,.task-form .task-form__actions{grid-column:auto}}
/* Panneau étroit (téléphone, colonne de la fiche site) : les pastilles passent sous le titre, alignées sur lui */
@container (max-width:520px){.task{flex-wrap:wrap}.task__side{flex-basis:100%;justify-content:flex-start;padding-left:34px}}

/* Domaines d'un site */
.domains{display:grid;gap:10px}
.domain-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr);gap:10px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.domain-row--new{background:transparent;border-style:dashed}
/* Moins de 760 px : le nom de domaine sur toute la ligne, les trois autres champs dessous ; puis deux colonnes ; une seule
   sous 340 px */
@container (max-width:760px){.domain-row{grid-template-columns:repeat(3,minmax(0,1fr))}.domain-row>.field:first-child{grid-column:1/-1}}
@container (max-width:560px){.domain-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:340px){.domain-row{grid-template-columns:minmax(0,1fr)}}

/* Action groupée sur les factures */
.bulkbar{display:flex;align-items:center;gap:8px 10px;margin-bottom:12px;padding:10px 14px}
.bulkbar__label{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);margin-right:4px}
.bulkbar select:not([multiple]),.bulkbar input:not([type=checkbox]):not([type=radio]):not([type=file]){width:auto;flex:0 1 auto;min-width:0}
.table td input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}
.row-pick{display:inline-grid;place-items:center;width:40px;height:40px;margin:-11px;cursor:pointer}
.bulk-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin:0 0 12px}
.bulk-head p{margin:0}
.bulk-all{min-height:40px;align-items:center}
.bulk-all input[type=checkbox]{width:18px;height:18px}

/* État technique d'un site : une information par ligne, pastille de couleur seulement */
.tech{list-style:none;margin:0;padding:0}
.tech__row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.tech__label{font-size:var(--fs-sm);color:var(--muted);padding-top:1px}
.tech__value{display:grid;gap:2px;min-width:0}
.tech__item+.tech__item{margin-top:8px}
.tech__item{display:grid;gap:2px}
.tech__main{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.tech__sub{font-size:var(--fs-sm);color:var(--muted);padding-left:16px}
.tech__main.muted+.tech__sub,.tech__value>.tech__sub:only-child{padding-left:0}
.tech__sub--warn{color:var(--amber)}
.tech__sub--late{color:var(--red);font-weight:600}
.tech__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line-strong)}
.tech__dot--ok{background:var(--green)}
.tech__dot--warn{background:var(--amber)}
.tech__dot--late{background:var(--danger)}
.tech__main.muted .tech__dot{background:var(--line-strong)}
.tech__foot{margin:0;padding:10px 20px 14px;font-size:var(--fs-xs);color:var(--muted)}
.tech__incidents{padding:4px 20px 16px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.tech__incidents strong{display:block;margin:10px 0 6px;color:var(--ink)}
.tech__incidents ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tech__incidents li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.coverage{display:grid;gap:4px;border-bottom:1px solid var(--line)}
.linkable{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.linkable li{display:flex;justify-content:space-between;align-items:center;gap:10px}
.installments__generator{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--r)}
.installments__generator .label{margin-right:4px}
.installments__generator select:not([multiple]),.installments__generator input:not([type=checkbox]):not([type=radio]):not([type=file]){width:auto;flex:0 1 auto;min-width:0}
.installments__legal{margin:0;color:var(--amber)}
.installments__generator .gen-pct{flex:0 0 120px;width:120px}
.installments__generator .gen-pct input:not([type=checkbox]):not([type=radio]):not([type=file]){width:100%}

/* Formulaires longs : une carte par section, barre de sections flottante, enregistrement collé en bas */
.form-cards{display:grid;align-content:start;min-width:0}
.form-card{scroll-margin-top:72px}
.form-card>.panel__head h2{font-size:var(--fs-md)}
.form-card>.panel__head .hint{margin-top:2px}
.form-cards>.savebar{margin-top:0}
.form-actions.savebar{border-top:1px solid var(--line);margin-top:0}
.setting{scroll-margin-top:72px}
.section-nav{position:sticky;top:0;z-index:30;margin:0 0 16px;padding:8px 0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.section-nav__list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;margin:-4px;scroll-padding-inline:8px}
.section-nav__list::-webkit-scrollbar{display:none}
/* La marge de fin compte dans le défilement : la dernière pastille et son anneau ne sont jamais rognés */
.section-nav__list::after{content:"";flex:0 0 2px}
.section-nav a{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.section-nav a:hover{border-color:var(--line-strong);color:var(--ink)}
.section-nav a.is-active{background:var(--blue-solid,var(--blue));border-color:var(--blue-solid,var(--blue));color:var(--paper)}
@media (max-width:960px){.section-nav{top:60px}.form-card,.setting{scroll-margin-top:128px}}
.installments{padding:0;border:0;background:transparent}
.linkable li{flex-wrap:nowrap}
.linkable__text{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
.linkable .btn{flex:none}
.linkable{grid-template-columns:minmax(0,1fr)}
.linkable li{min-width:0}

/* Recherche globale et navigation sans rechargement */
.nav-search .nav-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-search kbd{font:inherit}
.palette{position:fixed;inset:0;z-index:100}
.palette[hidden]{display:none}
.palette__backdrop{position:absolute;inset:0;background:rgba(18,18,18,.55)}
.palette__box{position:relative;width:min(640px,calc(100% - 24px));margin:10vh auto 0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden}
.palette__box input[type=search]{height:54px}
.palette__results{max-height:min(60vh,460px);overflow-y:auto;padding:6px}
.palette__group{margin:10px 10px 4px;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.palette__results a{display:grid;gap:1px;padding:8px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--text)}
.palette__results a strong{color:var(--ink);font-weight:600}
.palette__results a span{font-size:var(--fs-sm);color:var(--muted)}
.palette__results a[aria-selected=true],.palette__results a:hover{background:var(--blue-soft)}
.palette__empty{margin:0;padding:18px;color:var(--muted);text-align:center}
.palette__hint{margin:0;padding:8px 14px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.topbar [data-search-open] .icon{margin:0}

/* Site web (syntaxeo.com) : avis, pagination, menu */
.nav-search+.nav-sep{margin-top:4px}
.stack>input[type=hidden]:first-child~input[type=hidden]+:not(input[type=hidden]){margin-top:0}
.stars{color:#d99a1b;letter-spacing:1px;font-size:var(--fs-sm);white-space:nowrap}
.stars__off{color:var(--line-strong)}
.review__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 20px;margin:4px 0 0;font-size:var(--fs-sm)}
.review__meta dt{color:var(--muted);font-size:var(--fs-xs)}
.review__meta dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.review__reject{flex:1 1 280px}
.review__reject summary{list-style:none}
.review__reject summary::-webkit-details-marker{display:none}
.review__reject[open] summary{margin-bottom:12px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line)}
.pager__pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px}
.pager__pages .btn{min-width:36px;justify-content:center}
.pager__gap{padding:0 4px;color:var(--muted)}
@media (max-width:560px){.pager{flex-wrap:wrap}.pager__pages{order:-1;flex-basis:100%}}
.row__main.title-icon{align-items:flex-start}
.row__main.title-icon>.icon{margin-top:2px}

/* Déclarations URSSAF et CFE : ligne sélectionnée, compteur d'onglet */
.table--select tr.is-selected td{background:var(--blue-soft)}
.table--select tr.is-selected td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.tabs small.is-alert{background:var(--red-soft);color:var(--red)}
@media (forced-colors:active){.admin-ui .table--select tr.is-selected{outline:2px solid Highlight;outline-offset:-2px}}
@media (forced-colors:active){
  .switch{forced-color-adjust:none;background:Canvas;outline:1px solid CanvasText;outline-offset:-1px}
  .switch::after{background:CanvasText;box-shadow:none}
  .switch:checked{background:Highlight;outline-color:Highlight}
  .switch:checked::after{background:HighlightText}
  .switch:disabled{outline-color:GrayText}
  .switch:disabled::after{background:GrayText}
  .admin-ui .switch:focus-visible{outline-color:CanvasText}
  .stars__off{color:GrayText}
  :is(.settings-nav a,.mails__item)[aria-current=page]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  :is(.settings-nav a,.mails__item)[aria-current=page] .badge{background:transparent;color:HighlightText;border-color:HighlightText}
}

/* Site web : cases à cocher des options, cartes d'avis, aperçu de l'annonce */
.option__toggle.check{gap:10px}
.review-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:16px;align-items:start}
.review-card{display:grid;gap:14px;padding:20px}
.review-card__head{display:flex;align-items:center;gap:12px}
.review-card__who{display:grid;gap:1px;min-width:0;flex:1}
.review-card__who strong{color:var(--ink);font-weight:600}
.review-card__text{margin:0;padding:12px 16px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);white-space:pre-line;overflow-wrap:anywhere}
.review-card__actions{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.review-card__actions .review__reject{flex:0 1 auto}
.review-card__actions .review__reject[open]{flex:1 1 100%}
.announce-preview{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:12px 16px;border-radius:var(--r);background:var(--blue-solid,var(--blue));color:var(--paper);font-size:var(--fs-sm)}
.announce-preview strong{color:var(--paper)}
.announce-preview__link{text-decoration:underline;font-weight:600}
.announce-preview.is-off{background:var(--band);color:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.announce-preview.is-off strong{color:var(--ink)}
/* Colonnes resserrées : les colonnes gardées tiennent sans défilement horizontal sur un téléphone. */
@media (max-width:640px){.table th,.table td{padding-left:10px;padding-right:10px}.table td:first-child{min-width:130px}.table--select td:first-child{min-width:0}}

/* Simulateur de facturation */
.sim-result__value{margin:0;font-size:2.4rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.sim-lines>li{padding:11px 20px}
.sim-lines__total{background:var(--surface-2)}
.sim-lines__total strong{font-size:var(--fs-md)}

/* Avis clients : lignes compactes */
.review-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start}
.review-row.is-editing{background:var(--blue-soft)}
.review-row__head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.review-row__head strong{color:var(--ink);font-weight:600}
.review-row__text{margin:4px 0 2px;overflow-wrap:anywhere}
.review-row__actions{gap:2px;flex-wrap:nowrap}
.chip small.is-alert{color:var(--red)}
.chip[aria-current=true] small.is-alert{color:inherit}
@media (max-width:640px){.review-row{grid-template-columns:minmax(0,1fr)}.review-row>.avatar{display:none}.review-row__actions{justify-content:flex-end}}

/* Tarifs du site : liste libellé / montant */
.price-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:0 40px}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.price-row label{color:var(--ink);font-weight:500}
.price-row .input-suffix{flex:0 0 150px}
.price-row input{text-align:right;font-variant-numeric:tabular-nums}

/* 9 ─ Support ------------------------------------------------------------ */
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:var(--fs-xs);font-weight:600}
.tag .icon{width:13px;height:13px;color:var(--muted)}

/* Pièces jointes : zone de dépôt */
.dropzone{display:grid;gap:8px}
.dropzone__prompt,.dropzone__paste{display:none}
.dropzone.is-enhanced .dropzone__area{position:relative;display:grid;place-items:center;min-height:86px;padding:16px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-2);text-align:center;transition:border-color .15s,background .15s}
.dropzone.is-enhanced input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone.is-enhanced .dropzone__prompt{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-sm);pointer-events:none}
.dropzone.is-enhanced .dropzone__prompt .icon{width:20px;height:20px;color:var(--blue-ink)}
.dropzone.is-enhanced .dropzone__prompt strong{color:var(--ink)}
.dropzone.is-enhanced .dropzone__paste{display:inline}
.dropzone.is-enhanced .dropzone__area:hover,.dropzone.is-dragover .dropzone__area{border-color:var(--blue);background:var(--blue-soft)}
.dropzone.is-enhanced .dropzone__area:has(input:focus-visible){box-shadow:var(--focus)}
.dropzone__files{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.dropzone__files:empty{display:none}
.dropzone__files li{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);min-width:0}
.dropzone__files img,.dropzone__thumb{width:36px;height:36px;flex:none;object-fit:cover;border-radius:6px;background:var(--surface-2)}
.dropzone__thumb{display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--red);background:var(--red-soft)}
.dropzone__files span{flex:1;min-width:0;display:grid;font-size:var(--fs-sm);color:var(--ink)}
.dropzone__files span b{font-weight:600;overflow:hidden}
.dropzone__files small{color:var(--muted);font-size:var(--fs-xs)}
.dropzone__files button{width:28px;height:28px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.dropzone__files button .icon{width:14px;height:14px;vertical-align:0}
.dropzone__files button:hover{background:var(--red-soft);color:var(--red)}
.dropzone__error{margin:0;color:var(--red);font-size:var(--fs-sm);font-weight:600}
.conv{list-style:none;margin:0;padding:0;display:grid}
.conv__day{display:flex;align-items:center;gap:12px;text-transform:uppercase}
.conv__day::before,.conv__day::after{content:"";flex:1;height:1px;background:var(--line)}
.conv__event{display:flex;justify-content:center;align-items:center;gap:8px;text-align:center}
.conv__event .icon{width:14px;height:14px}
.conv__msg{display:flex;align-items:flex-end;gap:8px;max-width:min(86%,720px)}
.conv__msg--mine{flex-direction:row-reverse;margin-left:auto}
/* Ses propres messages, comme dans une messagerie : ni nom ni initiales, l'heure et l'accusé en pied de bulle.
   Côté Syntaxeo, le logo accompagne chaque message, des deux côtés de la conversation. Un collègue du même
   client (ou un autre administrateur) garde son nom. */
.conv__msg--self .conv__avatar:not(.conv__avatar--brand){display:none}
.conv__msg--self:not(.conv__msg--note) .conv__meta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.conv__avatar{flex:none;display:grid;place-items:center;border-radius:50%}
.conv__bubble{min-width:0}
.conv__msg--mine .conv__bubble{border-color:transparent}
.conv__msg--note .conv__avatar{border:0}
.conv__msg--note .conv__avatar .icon{width:16px;height:16px}
.conv__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:2px}
.conv__body{white-space:pre-line;overflow-wrap:anywhere}
.conv__foot{display:flex;justify-content:flex-end;align-items:center;margin-top:4px;font-variant-numeric:tabular-nums}
.attach{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.attach__item{display:flex;align-items:center;gap:10px;max-width:260px;padding:6px 10px 6px 6px;color:var(--ink);text-decoration:none}
.attach__item img{width:44px;height:44px;flex:none;object-fit:cover;border-radius:6px;background:var(--surface-2)}
.attach__pdf{width:44px;height:44px;flex:none;display:grid;place-items:center}
.attach__name{min-width:0;display:grid;overflow:hidden}
.attach__name small{color:var(--muted)}
/* Messagerie du support : images et vidéos dans la bulle, accusés (envoyé, reçu, lu), envoi en cours */
.attach-media{display:grid;gap:6px;margin-top:10px;max-width:320px}
.attach-media--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.attach-media__item{display:block;width:100%;max-height:320px;overflow:hidden}
.attach-media__item img{display:block;width:100%;height:100%;max-height:320px;aspect-ratio:4/3;object-fit:cover}
video.attach-media__item{aspect-ratio:16/9}
.attach-media--grid>.attach-media__item:last-child:nth-child(odd){grid-column:1/-1}
video.attach-media__item{object-fit:contain;background:#000}
.attach-media--grid .attach-media__item,.attach-media--grid .attach-media__item img{height:150px}
.receipt{display:flex;align-items:center;gap:3px;color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.receipt .icon{width:14px;height:14px}
.receipt--read{color:var(--blue-ink)}
.conv__msg.is-pending .conv__avatar{visibility:hidden}
.chat-error{margin:0;color:var(--red);font-size:var(--fs-sm);font-weight:600}
.thread-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 0;font-weight:600}
.thread-notice[hidden]{display:none}
.thread-sound{flex:none;width:var(--control);color:var(--muted)}
.thread-sound[hidden]{display:none}
/* Répondre à un message précis, citation, dépôt de fichiers sur tout le fil */
.conv__msg{position:relative}
/* Réagir, répondre : à côté de la bulle, à mi-hauteur, révélés au survol ; toujours là (discrets) sur écran tactile */
.conv__tools{align-self:center;flex:none;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.conv__msg--mine .conv__tools{flex-direction:row-reverse}
.conv__msg:hover .conv__tools,.conv__tools:focus-within,.conv__tools:has([aria-expanded=true]){opacity:1}
.conv__tool{display:grid;place-items:center;border:0;border-radius:999px;background:none;cursor:pointer;transition:background-color .15s,color .15s}
.conv__tool .icon{width:16px;height:16px}
@media (hover:none){.conv__tools{opacity:1}}
/* Réactions : pastilles à cheval sur le bas de la bulle, côté extérieur */
.conv__bubble{position:relative}
.conv__reactions{position:absolute;bottom:-14px;left:10px;display:flex;flex-wrap:wrap;gap:4px}
.conv__msg--mine .conv__reactions{left:auto;right:10px}
.conv__reactions:empty{display:none}
.conv__msg:has(.conv__reactions:not(:empty)){margin-bottom:14px}
.reaction{display:inline-flex;align-items:center;gap:3px;border-radius:999px;color:var(--ink);font:inherit;line-height:1;font-variant-numeric:tabular-nums}
button.reaction{cursor:pointer;transition:border-color .15s,background-color .15s}
.reaction.is-mine{border-color:color-mix(in srgb,var(--blue) 55%,transparent)}
/* Au doigt : les pastilles de réaction descendent un peu plus sous la bulle (les tailles au doigt : bloc plus bas) */
@media (pointer:coarse){.conv__reactions{bottom:-17px}.conv__msg:has(.conv__reactions:not(:empty)){margin-bottom:18px}}
/* Petit écran : les outils passent sous la bulle, qui garde toute sa largeur */
@media (max-width:760px){.conv__msg{flex-wrap:wrap}.conv__tools{order:3;flex-basis:100%;justify-content:flex-start;margin-top:-4px}.conv__msg--mine .conv__tools{flex-direction:row;justify-content:flex-end}.conv__msg:has(.conv__reactions:not(:empty)) .conv__tools{margin-top:14px}.conv__msg:has(.conv__reactions:not(:empty)):has(.conv__tools){margin-bottom:0}}
/* Palette d'émojis (réaction, insertion) : posée au-dessus du bouton qui l'ouvre */
.emoji-picker{position:absolute;z-index:60;display:flex;gap:2px;padding:4px;border-radius:999px;animation:emoji-pop .22s var(--ease)}
.emoji-picker--grid{display:grid;grid-template-columns:repeat(6,36px);border-radius:14px;padding:6px}
.emoji-picker button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:999px;background:none;font-size:20px;line-height:1;cursor:pointer}
.emoji-picker--grid button{border-radius:10px}
@keyframes emoji-pop{from{opacity:0;transform:translateY(4px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.emoji-picker{animation:none}}
.reply-panel__actions .reply-emoji{margin-right:auto}
/* Message supprimé : la place reste, le contenu non */
.conv__deleted{display:flex;align-items:center;gap:6px;margin:0;font-style:italic}
.conv__deleted .icon{width:14px;height:14px}
/* Modifié : l'historique se déplie sous le texte */
.conv__edited{padding:0;border:0;background:none;font:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.conv__edited:hover,.conv__edited[aria-expanded=true]{color:var(--ink)}
.conv__versions{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none;color:var(--muted);font-size:var(--fs-sm)}
.conv__versions[hidden]{display:none}
.conv__versions li{padding-left:10px;white-space:pre-line;overflow-wrap:anywhere}
.conv__versions-when{display:block}
/* Modification sur place */
.conv__msg.is-editing{max-width:min(100%,720px);width:100%}
.conv__msg.is-editing .conv__bubble{flex:1}
.conv__msg.is-editing .conv__tools{display:none}
.conv__editor{display:grid;gap:8px}
.conv__editor textarea{width:100%;resize:vertical}
.conv__editor-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.conv__editor-actions .hint{margin-right:auto}
.conv__quote{display:grid;gap:2px;font-size:var(--fs-sm);text-decoration:none}
.conv__msg.is-highlight .conv__bubble{animation:conv-highlight 1.6s ease}
@keyframes conv-highlight{0%,30%{outline:3px solid var(--marker);outline-offset:2px}100%{outline:3px solid transparent;outline-offset:2px}}
.reply-chip{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)}
.reply-chip[hidden]{display:none}
.reply-chip>.icon{flex:none;width:16px;height:16px}
.reply-chip>span{display:grid;min-width:0;flex:1}
.reply-chip strong{color:var(--ink)}
.reply-chip button{display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer}
.reply-chip button:hover{color:var(--ink)}
.is-drop-target{position:relative}
.is-drop-target::after{content:"Déposez vos fichiers pour les joindre au message";position:absolute;inset:0;z-index:30;display:grid;place-items:center;border:2px dashed var(--blue);border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--blue-ink);font-weight:650;pointer-events:none}
.attach__item--archived{cursor:default}
.attach__item--archived .attach__pdf{background:var(--surface-2);color:var(--muted)}
.attach__item--archived .attach__pdf .icon{width:18px;height:18px}
.dropzone__busy{margin:0}
/* Conversation E′ (étape 5) : celle de l'espace client. Les bulles du client sur papier, les miennes sur ambre doux, la
   note interne sur la bande, cerclée ; heures en mono ; citations sur un fond discret, jamais de filet de couleur épais ;
   extraits et noms de fichiers en entier ; la palette d'émojis s'ouvre sans rebond ni effet au survol */
.conv{gap:14px}
.conv__day{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.conv__event{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--muted)}
.conv__event .icon{color:var(--ok)}
.conv__avatar{width:34px;height:34px;border:0;background:var(--ink);color:var(--wall);font-family:var(--f-disp);font-size:12px;font-weight:800}
.conv__avatar--brand{background:var(--paper) url("../brand/favicon.png") center/22px no-repeat;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
.conv__bubble{padding:10px 16px 8px;border:0;border-radius:18px 18px 18px 6px;background:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 5%,transparent)}
.conv__msg--mine .conv__bubble{border-radius:18px 18px 6px 18px;background:var(--warn-soft);box-shadow:none}
.conv__msg--note .conv__bubble{border:0;background:var(--band);box-shadow:inset 0 0 0 1px var(--line-strong)}
.conv__msg--note .conv__avatar{background:var(--band);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.conv__meta{font-size:12px;color:var(--muted)}
.conv__meta strong{font-size:13px;font-weight:600;color:var(--ink)}
.conv__body{font-size:15px;line-height:1.55;color:var(--ink)}
.conv__foot{gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;color:var(--muted)}
.conv__edited{font-family:var(--f-mono);font-size:10px;font-style:normal;color:var(--muted)}
.conv__versions li{border-left:1px solid var(--line-strong)}
.conv__versions-when{font-family:var(--f-mono);font-size:10px;font-weight:500;color:var(--muted)}
.conv__quote{margin:0 0 8px;padding:8px 12px;border:0;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--soft)}
.conv__quote:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.conv__quote strong{font-size:12px;font-weight:600;color:var(--ink)}
.conv__quote span,.reply-chip span span{overflow:visible;white-space:normal;overflow-wrap:anywhere}
.conv__deleted{color:var(--muted)}
.conv__msg--deleted .conv__bubble{border:1.5px dashed var(--line-strong);background:transparent;box-shadow:none}
.conv__msg.is-pending .conv__bubble{opacity:1;background:var(--card)}
.conv__editor textarea{min-height:88px}
.conv__tool{width:36px;height:36px;color:var(--muted)}
.conv__tool:hover,.conv__tool[aria-expanded=true]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.reaction{height:26px;padding:0 8px;border:0;background:var(--paper);box-shadow:0 0 0 1px var(--line);font-size:14px}
.reaction span{font-family:var(--f-mono);font-size:10.5px;font-weight:500;color:var(--soft)}
.reaction.is-mine{background:var(--marker);box-shadow:0 0 0 1px var(--ink)}
.reaction.is-mine span{color:var(--ink)}
button.reaction:hover{border-color:transparent;box-shadow:0 0 0 1.5px var(--ink)}
.conv__bubble:has(>.conv__reactions:not(:empty)){padding-bottom:16px}
/* Barre d'un panneau repliable : le titre, l'aperçu toujours dessous (même rythme quelle que soit la longueur du titre),
   le « + » au bout, centré sur les deux lignes */
details.panel>summary.panel__head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:16px;row-gap:0;list-style:none;cursor:pointer}
details.panel>summary.panel__head>*{grid-column:1;min-width:0}
details.panel>summary.panel__head>*+*{margin-top:4px}
details.panel>summary.panel__head::-webkit-details-marker{display:none}
details.panel>summary.panel__head::after{content:"";grid-column:2;grid-row:1/3;width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
details.panel[open]>summary.panel__head::after{transform:rotate(45deg)}
details.panel:not([open])>summary.panel__head{border-bottom:0}
.emoji-picker{border:0;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.emoji-picker button{transition:background-color .15s}
.emoji-picker button:hover,.emoji-picker button:focus-visible{background:var(--card);transform:none}
.emoji-picker button.is-current{background:var(--marker)}
.attach__item{border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.attach__item:hover{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.attach__pdf{border-radius:8px;background:var(--danger-soft);color:var(--danger);font-family:var(--f-mono);font-size:10px;font-weight:500}
.attach__ext--mp4,.attach__ext--mov,.attach__ext--webm,.attach__ext--docx,.attach__ext--odt,.attach__ext--txt{background:var(--card);color:var(--ink)}
.attach__ext--xlsx,.attach__ext--ods,.attach__ext--csv{background:var(--ok-soft);color:var(--ok)}
.attach__ext--pptx,.attach__ext--zip{background:var(--warn-soft);color:var(--warn)}
.attach__name,.attach__name small{white-space:normal;overflow-wrap:anywhere}
.attach__name small{font-family:var(--f-mono);font-size:10px}
.attach__item--archived{opacity:1;color:var(--muted)}
.attach-media__item{border-radius:12px;background:var(--card)}
.dropzone__files span b{white-space:normal;overflow-wrap:anywhere}
.thread-notice{padding:10px 14px;border-radius:14px;background:var(--warn-soft);color:var(--ink);font-size:14px}
.reply-chip{padding:8px 8px 8px 12px;border:0;border-radius:12px;background:var(--card);color:var(--soft)}
.reply-chip>.icon{color:var(--ink)}
.reply-chip strong{font-size:12px}
.reply-chip button{width:36px;height:36px;border-radius:50%}
.reply-chip button:hover{background:var(--paper)}
/* Au doigt : 44 px pour chaque commande ; les pastilles de réaction gardent leur taille, leur zone de toucher s'étend */
@media (pointer:coarse){
  .conv__tool,.reply-chip button,.dropzone__files button,.emoji-picker button{width:44px;height:44px}
  .emoji-picker--grid{grid-template-columns:repeat(6,44px)}
  .reaction{position:relative;height:32px;padding:0 11px}
  .reaction::before,.conv__edited::before{content:"";position:absolute;inset:-6px -2px}
  .conv__bubble:has(>.conv__reactions:not(:empty)){padding-bottom:20px}
  .admin-ui .rowmenu__item{min-height:44px}
  .conv__edited{position:relative}
  .conv__edited::before{inset:-14px -6px}
}
/* Contraste élevé : le bord des bulles, pastilles, citations et pièces jointes redessiné aux couleurs du système */
@media (forced-colors:active){
  .conv__bubble,.reaction,.emoji-picker,.attach__item,.dropzone__files li,.conv__quote,.reply-chip{border:1px solid CanvasText}
  .conv__msg--note:not(.conv__msg--deleted) .conv__bubble{border-style:double;border-width:3px}
  .reaction.is-mine{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .reaction.is-mine span{color:HighlightText}
  .admin-ui details.more summary::after,.admin-ui .settings-add-account summary::after,.admin-ui .mails__picker>summary::after,.admin-ui .mails__text summary::after,.settings-nav summary::after,details.panel>summary.panel__head::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/10px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 10px no-repeat}
}
/* Rendez-vous : créneaux en pastilles, cartes, liste du jour */
/* Choix d'un créneau : calendrier du mois et heures du jour choisi (views/admin/appointments/_slots.php) */
.slot-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.slot{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:38px;padding:6px 12px;border-radius:999px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,border-color .15s}
.slot-picker{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start}
.slot-picker:not(.is-ready) .slot-cal__month+.slot-cal__month{margin-top:24px}
.slot-picker.is-ready .slot-cal__month:not(.is-current){display:none}
.slot-cal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.slot-cal__title{margin:0;color:var(--ink)}
.slot-cal__title span{color:var(--muted)}
.slot-cal__nav{display:inline-grid;place-items:center;padding:0;border-radius:999px;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.slot-cal__nav .icon{width:16px;height:16px;transform:rotate(90deg)}
.slot-cal__nav--next .icon{transform:rotate(-90deg)}
.slot-cal__nav:hover:not(:disabled){border-color:var(--line-strong)}
.slot-cal__nav:disabled{cursor:default}
.slot-picker:not(.is-ready) .slot-cal__nav{display:none}
.slot-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.slot-cal__wd{padding-bottom:4px;text-align:center;text-decoration:none;color:var(--muted)}
.slot-cal__day{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.slot-cal__day.is-open{padding:0;border:0;font:inherit;opacity:1;cursor:pointer}
.slot-cal__day.is-open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.slot-cal__day.is-today::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:currentColor}
.slot-picker:not(.is-ready) .slot-times__day+.slot-times__day{margin-top:18px}
.slot-picker.is-ready .slot-times__day:not(.is-active){display:none}
.slot-times__title{margin:6px 0 14px;font-weight:700;color:var(--ink)}
.slot-times__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.slot-times .slot{width:100%;min-height:46px}
@media (max-width:760px){.slot-picker{grid-template-columns:minmax(0,1fr);gap:22px}.slot-cal{max-width:380px}}
/* Administration : le sélecteur vit dans une carte (conteneur) parfois étroite */
@container (max-width:640px){.slot-picker{grid-template-columns:minmax(0,1fr);gap:22px}.slot-cal{max-width:380px}}
.slot-custom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
/* Calendrier de déplacement E′ (étape 5) : celui de la réservation du client. Jours ouverts sur la carte, jour choisi et
   créneau choisi à l'encre, cerclés au survol (jamais de couleur qui change), titres en Funnel Display, initiales en mono */
.slot-cal__title{font-family:var(--f-disp);font-size:20px;font-weight:700;letter-spacing:-.02em}
.slot-cal__title span{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:0}
.slot-cal__nav{width:40px;height:40px;border:0;background:var(--card)}
.slot-cal__nav:hover:not(:disabled){background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.slot-cal__nav:disabled{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.admin-ui .slot-custom input[type=datetime-local]{width:auto;flex:0 1 260px}
.slot-cal__wd{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.06em}
.slot-cal__day{font-family:var(--f-mono);font-size:12px}
.slot-cal__day.is-open{background:var(--card);color:var(--ink);font-family:var(--f-mono);font-size:12px;font-weight:500;transition:background-color .3s var(--ease),color .3s var(--ease)}
.slot-cal__day.is-open:hover{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.slot-cal__day[aria-pressed=true],.slot-cal__day[aria-pressed=true]:hover{background:var(--ink);color:var(--wall);box-shadow:none}
.slot-times__title{font-family:var(--f-disp);font-size:17px;letter-spacing:-.01em}
.slot{border:0;background:var(--card);color:var(--ink)}
.slot:hover,.slot-times .slot:hover{border-color:transparent;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.slot-times .slot,.admin-ui .slot-times .slot{border-radius:14px;font-size:15px}
.slot-radio:checked+.slot,.slot-radio:checked+.slot:hover{border-color:transparent;background:var(--ink);color:var(--wall);box-shadow:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.slot-radio:focus-visible+.slot{outline:3px solid var(--ink);outline-offset:3px}
@media (forced-colors:active){
  .slot,.slot-cal__day.is-open{border:1px solid CanvasText}
  .slot-cal__day[aria-pressed=true],.slot-radio:checked+.slot{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .slot-cal__day[aria-pressed=true]:focus-visible,.slot-radio:checked:focus-visible+.slot{outline-color:CanvasText}
  .slot-cal__nav{border:1px solid ButtonText}
  .slot-cal__nav:disabled{border-color:GrayText;color:GrayText}
}
/* Fenêtres (<dialog class="modal">) */
dialog.modal{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-pop)}
dialog.modal::backdrop{background:rgba(18,18,18,.55)}
.modal__body{padding:20px}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal__head h2{margin:0;font-size:17px;color:var(--ink)}
.modal__close{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer}
.modal__close:hover{background:var(--surface-2);color:var(--ink)}
.modal__actions{justify-content:flex-end}
/* Agenda des rendez-vous : l'heure de chaque appel */
.rdv-row__time{flex:none;min-width:48px;color:var(--ink);font-variant-numeric:tabular-nums}
.admin-ui .rdv-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:8px 20px}
.admin-ui .rdv-row__time{font-family:var(--f-mono);font-size:14px;font-weight:500;letter-spacing:.02em}
@container (max-width:560px){.admin-ui .rdv-row{grid-template-columns:52px minmax(0,1fr);align-items:start}.admin-ui .rdv-row>:last-child{grid-column:2;justify-self:start}}
/* Disponibilités : règles compactes avec leur unité, semaine en liste d'un jour par ligne */
.rdv-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 24px}
.rdv-rule__input{display:flex;align-items:center;gap:8px}
/* Même poids que la règle générale des champs (100 %), déclarée après : la largeur tient */
.rdv-rules .rdv-rule__input input[type=number]{width:96px;flex:none;font-variant-numeric:tabular-nums}
.rdv-rule__unit{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.rdv-week{list-style:none;margin:0;padding:0}
.rdv-week__day{display:grid;grid-template-columns:120px minmax(0,480px);align-items:center;gap:16px;padding:10px 20px;border-top:1px solid var(--line)}
.rdv-week__day:first-child{border-top:0}
.rdv-week__day label{font-weight:600;color:var(--ink)}
.rdv-week__day.is-off label{color:var(--muted);font-weight:500}
.rdv-week__day.is-off{opacity:1}
.rdv-sync{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.rdv-sync p{display:flex;align-items:center;gap:6px;margin:0}
.rdv-sync .icon{width:15px;height:15px}
.rdv-feed__row{display:flex;gap:8px}
/* Adresse à copier : en entier, en mono, sélectionnée d'un clic */
.copy-value{flex:1;min-width:0;display:block;padding:10px 12px;border-radius:var(--r);background:var(--card);color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.5;overflow-wrap:anywhere;user-select:all}
.rdv-feed__row{align-items:flex-start}
@media (forced-colors:active){.copy-value{border:1px solid CanvasText}}
.rdv-feed__renew{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:10px}
.hint code{font-size:.95em;padding:1px 5px;border-radius:4px;background:var(--surface-2)}
/* Enregistrer entre deux cartes : ni trait ni marge de fin de carte, le bouton à droite, de l'air avant la carte suivante */
.rdv-settings>.form-actions{margin-top:16px;padding-top:0;border-top:0;justify-content:flex-end}
.rdv-feed{margin-top:28px}
#indisponibilites{scroll-margin-top:80px}
#indisponibilites .row{flex-wrap:wrap;align-items:flex-start}
#indisponibilites .row__main{flex:1 1 260px;overflow-wrap:anywhere}
/* Google Agenda : carte à part du formulaire des disponibilités, ses propres formulaires */
.rdv-google{margin-top:28px}
.rdv-google .panel__head{align-items:flex-start;flex-wrap:nowrap}
.rdv-google .panel__head>div{flex:1;min-width:0}
.rdv-google select{max-width:480px}
.rdv-cals{border:0;margin:10px 0 0;padding:0;gap:8px}
.rdv-cals legend{padding:0;margin-bottom:8px;font-weight:600;color:var(--ink)}
.rdv-cal{align-items:center}
/* Pastille : hors de la règle .check>span (flex:1), qui l'étirerait sur toute la ligne */
.check>.rdv-cal__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.rdv-google__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rdv-google__off{margin-left:auto;color:var(--red)}
.rdv-google__app{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 24px}
.rdv-steps__list{margin:4px 0 18px;padding-left:20px;display:grid;gap:10px;color:var(--text);line-height:1.5}
.rdv-steps__list .rdv-feed__row{margin-top:8px}
@media (max-width:640px){.rdv-week__day{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 16px}.rdv-feed__row{flex-wrap:wrap}.rdv-feed__row .btn{width:100%;justify-content:center}.rdv-google__off{margin-left:0}}
.conv__action-note{display:flex;align-items:center;gap:6px;margin:8px 0 0;color:var(--muted);font-size:var(--fs-xs)}
.conv__action-note .icon{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.conv__msg.is-highlight .conv__bubble{animation:none;outline:3px solid color-mix(in srgb,var(--blue) 45%,transparent)}}
.thread-sound__off,.thread-sound[aria-pressed=false] .thread-sound__on{display:none}
.thread-sound[aria-pressed=false] .thread-sound__off{display:block}
.actions--live{display:contents}

/* Administration du helpdesk */
.kpi__unit{font-size:var(--fs-md);font-weight:600;color:var(--muted);margin-left:2px}
.unread-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--blue);vertical-align:1px}
.tickets-table tr.is-unread a.row-title{font-weight:750}
.sla{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.sla .icon{width:14px;height:14px;color:var(--muted)}
.sla--late{color:var(--red);font-weight:600}
.sla--late .icon{color:var(--red)}
.reply-panel{scroll-margin-top:20px;transition:background .15s,border-color .15s}
.reply-panel__head{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.reply-panel__head select{width:auto;max-width:100%}
.reply-panel__actions{justify-content:flex-end}
.reply-panel__actions select{width:auto}
.reply-panel.is-note{background:var(--band);border-color:var(--line-strong);box-shadow:inset 0 0 0 1px var(--line-strong)}
.reply-icon--note,.reply-panel.is-note .reply-icon--send{display:none}
.reply-panel.is-note .reply-icon--note{display:inline-block}
/* Avertissement sous la réponse (contact sans accès) : dessiné, sur l'ambre doux */
.reply-warning{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 14px;border-radius:14px;background:var(--warn-soft);color:var(--ink);font-size:14px;line-height:1.5}
.reply-warning .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--warn)}
.badge .icon{width:12px;height:12px;flex:none}
.template-item>summary{cursor:pointer;list-style:none;border-bottom:0}
.template-item>summary::-webkit-details-marker{display:none}
.template-item[open]>summary{border-bottom:1px solid var(--line)}
.stars-static{color:#f2b01e;font-size:18px;letter-spacing:2px}
@media (max-width:760px){
  .conv__msg{max-width:100%}
  .conv__avatar{display:none}
}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}

/* Générateur de devis */
.quote-new{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.quote-new .field{flex:1 1 320px;position:relative}
.qe-page{max-width:none}
.qe-layout{display:grid;align-items:start}
.quote-editor{display:grid;gap:20px;min-width:0}
.qe-summary{display:grid;gap:16px;min-width:0}
.qe-sum__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qe-sum__head .hint{display:block}
.qe-sum__number{display:block;color:var(--ink);font-variant-numeric:tabular-nums}
/* Empreinte entière (jamais « … ») : en mono, coupée où il faut */
.admin-ui .hash{font-family:var(--f-mono);font-size:12px;letter-spacing:.01em;overflow-wrap:anywhere}
.admin-ui .qe-sum__number{margin-top:2px;font-family:var(--f-mono);font-size:15px;font-weight:500;letter-spacing:.02em;overflow-wrap:anywhere}
.admin-ui .qe-sum__total strong{font-family:var(--f-disp);font-weight:800;letter-spacing:-.02em}
.qe-sum__total{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-lg);background:var(--blue-soft);color:var(--blue-ink);font-size:var(--fs-sm);font-weight:600}
.qe-sum__total strong{font-size:28px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.qe-sum__total .hint{font-weight:500}
.qe-sum__facts{display:grid;gap:8px;margin:4px 0 0;font-size:var(--fs-sm)}
.qe-sum__facts>div{display:flex;justify-content:space-between;gap:12px}
.qe-sum__facts dt{color:var(--muted)}
.qe-sum__facts dd{margin:0;min-width:0;text-align:right;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.qe-sum__facts>.qe-sum__fact--block{display:grid;gap:2px}
.qe-sum__facts>.qe-sum__fact--block dd{text-align:left;font-weight:500;font-size:12.5px;line-height:1.5}
.qe-check{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:var(--fs-sm)}
.qe-check li{display:flex;align-items:center;gap:10px;color:var(--muted)}
.qe-check li::before{content:"";flex:none;width:14px;height:14px;border-radius:999px;border:1.5px solid var(--line-strong)}
.qe-check li.is-ok{color:var(--ink)}
.qe-check li.is-ok::before{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--surface)}
.qe-check li.is-missing{color:var(--red)}
.qe-check li.is-missing::before{border-color:var(--red)}
.qe-check a{color:inherit}
@media (forced-colors:active){
  .qe-check li::before,.qe-check li.is-missing::before{forced-color-adjust:none;border:1.5px dashed CanvasText;background:Canvas;box-shadow:none}
  .qe-check li.is-ok::before{border-style:solid;border-color:CanvasText;background:CanvasText;box-shadow:inset 0 0 0 3px Canvas}
}
.qe-sum__actions{padding-top:14px;border-top:1px solid var(--line)}
.qe-sum__actions .check{font-size:var(--fs-sm)}
.qe-sum__actions>.hint{margin-top:10px;line-height:1.5}
.qe-sum__danger{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.qe-sum__delete{display:flex;width:fit-content;margin:0 auto}
.qe-client{display:flex;align-items:center;gap:14px;padding:12px 14px}
.qe-client__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--blue-solid,var(--blue));color:var(--paper);font-weight:700;flex:none}
.qe-client__text{flex:1;min-width:0}
.qe-client__text .badge{margin-left:6px}
.qlines{display:grid;gap:14px}
.qline__icon{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);cursor:pointer}
.qline__icon:hover{color:var(--ink);border-color:var(--line-strong)}
.qline__icon .icon{width:15px;height:15px}
.qe-add{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px;border-radius:var(--r-lg);background:var(--surface-2)}
.qe-add .hint{flex:1 1 260px;margin:0}
.qe-add__search{position:relative;flex:1 1 280px}
.qe-add__search>.icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.qe-add__search input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-left:40px;border-radius:999px}
.qe-add__search.searchable input:not([type=checkbox]):not([type=radio]):not([type=file]){border-radius:var(--r)}
.qe-pick{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.qe-pick__item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:var(--r);cursor:pointer}
.qe-pick__item:hover,.qe-pick__item.is-active{background:var(--blue-soft)}
.qe-pick__text{display:grid;gap:2px;min-width:0}
.qe-pick__text strong{color:var(--ink);font-weight:600}
.qe-pick__text small{color:var(--muted);font-size:var(--fs-xs);line-height:1.45}
.qe-pick__price{flex:none;text-align:right;color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.qe-pick__price small{display:block;color:var(--muted);font-weight:500;font-size:var(--fs-xs)}
.qe-pick__item--offer{margin-left:24px;padding-block:6px;border-left:2px solid var(--line-strong);border-radius:0 var(--r) var(--r) 0}
.qe-pick__empty{padding:12px;color:var(--muted);font-size:var(--fs-sm)}
.quote-total{display:flex;justify-content:flex-end;align-items:baseline;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}
.quote-total .hint{margin-right:auto}
.quote-total strong{font-size:var(--fs-xl);color:var(--ink)}
.qe-recipient,.check__hint{display:block;margin-top:2px}
.searchable{flex:1 1 auto}
.qe-template{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.quote-new__template{flex:0 1 260px}
.quote-templates>summary{cursor:pointer;list-style:none}
.quote-templates>summary::-webkit-details-marker{display:none}
/* Liste des devis : ce qui attend une action (relancer, facturer, reprendre), montant complet d'un abonnement */
.desk-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.desk-item__main{display:flex;gap:12px;align-items:flex-start;flex:1 1 320px;min-width:0}
.desk-item__main .badge{flex:none;min-width:112px;justify-content:center;margin-top:1px}
.desk-item__amount{flex:0 0 150px;text-align:right;color:var(--ink);font-family:var(--f-mono);font-size:13px;white-space:nowrap}
.desk-item form{margin:0}
.desk-more>summary{padding:12px 20px;border-top:1px solid var(--line);color:var(--ink);font-weight:600;cursor:pointer}
.desk-more[open]>summary{border-bottom:1px solid var(--line)}
.list-heading{margin:28px 0 12px;font-size:var(--fs-lg)}
@media (max-width:640px){.desk-item__amount{flex-basis:auto;text-align:left}}
.amount-sub{display:block;margin-top:2px;color:var(--muted);font-family:var(--f-mono);font-size:11px;font-weight:500;white-space:nowrap}
.dash-kpis{display:flex;flex-wrap:wrap;gap:10px;padding:0 20px 12px}
.dash-kpis>div{display:grid;gap:2px;flex:1 1 140px;padding:10px 12px;border-radius:var(--r);background:var(--surface-2)}
.dash-kpis strong{font-family:var(--f-disp);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.dash-kpis span{font-size:var(--fs-xs);color:var(--muted)}
.qe-follow{margin:0 0 4px}
.qe-invoice{display:grid;gap:8px;margin-top:12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--green-soft)}
.qe-invoice .label,.qe-invoice p{margin:0}
.qe-invoice form{margin:0}
.qe-invoice__stage{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--green) 25%,transparent)}
.qe-invoice__stage span{min-width:0}
.inv-deductions{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.inv-deductions .row{display:flex;justify-content:space-between;gap:12px}
.inv-deductions li:last-child{padding-top:8px;border-top:1px solid var(--line)}
.inv-lookup{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.inv-events{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.inv-events li{padding-left:12px;border-left:1px solid var(--line)}
.qe-discount{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:16px}
.qe-discount .field{flex:0 1 200px}
.qe-total-detail{display:block;margin-top:4px;color:var(--ink)}
.terms-sync{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.terms-sync>div{flex:1 1 320px;min-width:0}
.terms-sync h2{font-size:var(--fs-md)}
.terms-sync p{margin:4px 0 0}
.terms-sync__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--green-soft);color:var(--green);flex:none}
/* Moyens de paiement : une carte par moyen, logo à gauche, coordonnée rappelée dessous */
.pay-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;padding-top:4px}
.pay-card{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;min-width:0;transition:border-color .15s,background .15s}
.pay-card:hover{border-color:var(--line-strong)}
.pay-card input{position:absolute;opacity:0;pointer-events:none}
.pay-card:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.pay-card:has(input:focus-visible){box-shadow:var(--focus)}
.pay-card:has(input:disabled){cursor:default;color:var(--muted)}
.pay-card__logo{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.pay-card__text{display:grid;gap:1px;min-width:0}
.pay-card__text strong{color:var(--ink);font-weight:650;font-size:var(--fs-base)}
.pay-card__text small{color:var(--muted);font-size:var(--fs-xs);line-height:1.35;overflow-wrap:anywhere}
.pay-card__glyph{width:20px;height:20px;color:var(--blue-ink)}
/* Marque PayPal en monochrome encre : aucun bleu dans le CRM (charte, § 1) */
.pay-card__mark{width:18px;height:18px;fill:var(--ink)}
.pay-card__word{font-size:12px;font-weight:800;letter-spacing:-.04em;text-transform:uppercase;color:#1d1c1c}
.pay-card--paypal .pay-card__logo{background:#fff;border-color:var(--line)}
.pay-card--wero .pay-card__logo{background:#fff48d;border-color:#ebdf78}
.pay-card--todo .pay-card__text small{color:var(--amber)}
.qe-withdrawal{display:grid;gap:10px;font-size:var(--fs-sm)}
.qe-withdrawal__conditions{display:grid;gap:6px;margin:0 0 0 28px;padding-left:18px;color:var(--text);font-size:var(--fs-sm);line-height:1.5}
.qe-withdrawal__conditions strong{color:var(--ink)}
.qe-withdrawal>.hint{margin:0 0 0 28px}
.mono-area{font-family:var(--mono);font-size:var(--fs-sm);line-height:1.55}
@media (max-width:640px){.qe-client{flex-wrap:wrap}}
@container (max-width:520px){.quote-total{flex-wrap:wrap}}
/* Devis : en-tête (client et objet), tableur des lignes avec leur rythme, conditions en phrases à mots réglables */
.qe-head .panel__body{display:grid;gap:16px}
.qe-head__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;align-items:start}
.qe-head__title{grid-column:span 2}
@container (max-width:520px){.qe-head__title{grid-column:auto}}
.qsheet{container-type:inline-size}
.qsheet .qlines{gap:0}
.qrow__main{display:grid;grid-template-columns:28px minmax(180px,1fr) 84px 118px 128px 140px 128px 88px;gap:8px;align-items:center}
.qsheet--vat .qrow__main{grid-template-columns:28px minmax(170px,1fr) 76px 110px 120px 84px 136px 120px 88px}
.qsheet--once .qrow__main{grid-template-columns:28px minmax(180px,1fr) 84px 118px 128px 128px 88px}
.qsheet--once.qsheet--vat .qrow__main{grid-template-columns:28px minmax(170px,1fr) 76px 110px 120px 84px 120px 88px}
.qsheet__head{padding:0 8px 8px;border-bottom:1px solid var(--ink);color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.qsheet__right{text-align:right}
.qrow{padding:8px;border-bottom:1px solid var(--line)}
.qrow.is-option{background:var(--card);outline:1px dashed var(--line-strong);outline-offset:-1px}
.qrow__num{color:var(--muted);font-family:var(--f-mono);font-size:12px;text-align:center}
.qrow__name{display:flex;align-items:center;gap:8px;min-width:0}
.qrow__name input:not([type=checkbox]):not([type=radio]):not([type=file]){flex:1;min-width:0}
.qrow__flag{display:none;flex:none;padding:3px 8px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--soft);font-size:var(--fs-xs);font-weight:600}
.qrow.is-option .qrow__flag{display:inline-flex}
.qrow__cell{min-width:0}
.qrow__fixed{display:flex;align-items:center;min-height:var(--control);padding:0 12px;color:var(--text);font-size:var(--fs-md)}
.qrow__total{display:flex;align-items:center;justify-content:flex-end;min-height:var(--control);color:var(--ink);font-family:var(--f-mono);font-size:13px;font-weight:500;white-space:nowrap}
.qrow__tools{display:flex;justify-content:flex-end;gap:6px}
.qrow__tools .qline__icon{width:40px;height:40px}
.qrow__more-toggle{position:relative}
.qrow__more-toggle.is-filled::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:999px;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.qrow__more-toggle[aria-expanded=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.qrow__more{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:16px;margin:10px 0 4px 36px;padding:14px;border-radius:var(--r);background:var(--card)}
.qrow__side{display:grid;gap:12px;align-content:start}
.qrow__moves{display:flex;flex-wrap:wrap;gap:6px}
@container (max-width:760px){.qrow__more{grid-template-columns:minmax(0,1fr)}}
@container (max-width:1000px){.qsheet__head{display:none}.qrow__main{grid-template-columns:28px repeat(4,minmax(0,1fr)) minmax(0,1.2fr) 88px;align-items:end}.qsheet--vat .qrow__main{grid-template-columns:28px repeat(5,minmax(0,1fr)) minmax(0,1.2fr) 88px}.qsheet--once .qrow__main{grid-template-columns:28px repeat(3,minmax(0,1fr)) minmax(0,1.2fr) 88px}.qsheet--once.qsheet--vat .qrow__main{grid-template-columns:28px repeat(4,minmax(0,1fr)) minmax(0,1.2fr) 88px}.qrow__num{align-self:center}.qrow__name{grid-column:2/-1}.qrow__name+.qrow__cell{grid-column-start:2}.qrow__cell::before{content:attr(data-col);display:block;margin-bottom:4px;color:var(--muted);font-size:var(--fs-xs);font-weight:600}}
@container (max-width:600px){.qrow__main,.qsheet--vat .qrow__main,.qsheet--once .qrow__main,.qsheet--once.qsheet--vat .qrow__main{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qrow__num{display:none}.qrow__name{grid-column:1/-1}.qrow__name+.qrow__cell{grid-column-start:auto}.qrow__total{justify-content:flex-start}.qrow__tools{grid-column:1/-1;justify-content:flex-start}.qrow__more{grid-template-columns:minmax(0,1fr);margin-left:0}}
.qsheet__foot{display:grid;gap:6px;margin-top:14px}
.qsheet__hint{margin-top:10px}
.qe-cond__body{display:grid;gap:2px}
.qe-sentence{margin:0;color:var(--ink);font-size:17px;line-height:2}
.qsheet__foot .qe-sentence{font-size:var(--fs-base);line-height:1.8}
.qe-tok{display:inline;margin:0 1px;padding:3px 8px;border:0;border-radius:6px;background:var(--marker);color:var(--ink);font:inherit;font-weight:600;line-height:inherit;text-align:left;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qe-tok:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.qe-tok[aria-expanded=true]{background:var(--ink);color:var(--marker)}
.qe-tok:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qe-pop{display:grid;gap:12px;margin:4px 0 12px;padding:16px;border-radius:var(--r-lg);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.qe-pop .qe-discount{margin-top:0}
.qe-pop__foot{display:flex;justify-content:flex-end}
.qe-auto-list{display:grid;gap:6px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.qe-auto-list>div{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:12px}
.qe-auto-list dt{color:var(--muted)}
.qe-auto-list dd{margin:0;color:var(--text)}
@container (max-width:520px){.qe-auto-list>div{grid-template-columns:minmax(0,1fr);gap:2px}}
.qe-sum__block{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.qe-sum__block .label{margin:0}
.qe-flow{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-size:var(--fs-sm)}
.qe-flow li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.qe-flow strong{grid-column:1/-1;color:var(--ink);font-weight:600}
.qe-flow span{color:var(--text)}
.qe-flow .mono{color:var(--ink);font-size:12px;text-align:right;white-space:nowrap}
.qe-printed{display:grid;gap:8px;margin:0;color:var(--text);font-size:12.5px;line-height:1.5}
.qe-printed>div{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line)}
.qe-printed>div:first-child{padding-top:0;border-top:0}
.qe-printed dt{color:var(--ink);font-weight:600}
.qe-printed dd{display:grid;gap:2px;margin:0}
/* Emails : catalogue et aperçu */
.mails{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:20px;align-items:start}
.mails__picker{position:sticky;top:24px;min-width:0}
.mails__picker>summary{display:none}
.mails__list{padding:6px 0 10px;max-height:calc(100vh - 48px);overflow-y:auto}
.mails__group{margin:0;padding:14px 16px 4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mails__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;color:var(--text);text-decoration:none;font-size:var(--fs-sm)}
.mails__item:hover{background:var(--surface-2);color:var(--ink)}
.mails__item[aria-current=page]{background:var(--blue-soft);color:var(--ink);font-weight:600}
.mails__item .badge{flex:none}
.mails__subject{margin:4px 0 0;font-size:var(--fs-lg);line-height:1.3;overflow-wrap:anywhere}
/* Le fond de l'e-mail vient de son propre document (MailHtml, restylé à l'étape 10) ; le cadre ne se voit qu'au chargement. */
.mails__frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.mails__frame iframe{display:block;width:100%;height:640px;border:0;background:var(--card)}
.mails__text summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.mails__text summary::-webkit-details-marker{display:none}
.mails__text summary::after{content:"";flex:none;width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
.mails__text[open] summary::after{transform:rotate(45deg)}
.mails__text pre{margin:0;padding:0 18px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 var(--f-mono);color:var(--text)}
@media (max-width:900px){.mails{grid-template-columns:1fr}.mails__picker{position:static}.mails__list{max-height:none}.mails__picker>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border-radius:var(--r-lg);background:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}.mails__picker>summary::-webkit-details-marker{display:none}.mails__picker>summary::after{content:"";flex:none;margin-left:auto;width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}.mails__picker[open]>summary::after{transform:rotate(45deg)}.mails__picker[open]>summary{margin-bottom:10px}.mails__picker-current{font-weight:400;color:var(--soft)}.mails__picker-current::before{content:"·";margin:0 8px;color:var(--muted)}}

/* Tableau de bord : chiffres clés, graphique, agenda */
.kpis{display:grid}
.kpi{display:grid;align-content:start;gap:4px;color:var(--text);text-decoration:none;transition:border-color .15s}
.kpi__label{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi__value{font-family:var(--f-disp);font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi__delta{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted)}
.kpi__delta.is-up{color:var(--green)}
.kpi__delta.is-down{color:var(--red)}
.kpi__bar{display:block;height:6px;margin-top:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.kpi__bar>span{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.kpi__bar--warning>span{background:var(--warn)}
.kpi__bar--danger>span{background:var(--red)}
.bars{container:bars / inline-size;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:190px;align-items:end}
/* Selon la place (comme l'espace client) : un mois sur deux, puis un sur trois, en partant du mois en cours, toujours écrit ;
   au-dessus des barres, seul le montant du mois en cours (les autres restent dans l'infobulle et la liste pour les lecteurs d'écran) */
@container bars (max-width:440px){.bars__col:not(.is-current) .bars__value{visibility:hidden}}
@container bars (max-width:410px){.bars__col:not(:nth-last-child(odd)) .bars__label{visibility:hidden}}
@container bars (max-width:260px){.bars__col:not(:nth-last-child(3n+1)) .bars__label{visibility:hidden}.bars__col:nth-last-child(3n+1) .bars__label{visibility:visible}}
.bars__col{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);height:100%;min-width:0;border-radius:6px 6px 0 0;text-align:center}
.bars__value{justify-self:center;font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.bars__bar{align-self:end;justify-self:center;display:block;width:min(70%,48px);min-height:0;border-radius:3px 3px 0 0;background:var(--ink)}
.bars__col.is-current .bars__bar{min-height:3px;background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bars__col:hover{background:var(--card)}
.bars__label{justify-self:center;margin-top:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.bars__col.is-current .bars__label{color:var(--ink);font-weight:600}
.bars__data{margin-top:8px}
.bars__data>summary{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);list-style:none;cursor:pointer}
.bars__data>summary::-webkit-details-marker{display:none}
.bars__data>summary::after{content:"";width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
.bars__data>summary:hover{color:var(--ink)}
.bars__data[open]>summary::after{transform:rotate(45deg)}
.bars__table{width:100%;margin:4px 0 0;border-collapse:collapse;font-size:var(--fs-sm)}
.bars__table :is(th,td){padding:6px 0;border-bottom:1px solid var(--line);font-weight:400;text-align:left}
.bars__table thead th{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bars__table tbody th{color:var(--soft)}
.bars__table :is(thead th:not(:first-child),td){text-align:right;font-variant-numeric:tabular-nums}
/* Plusieurs colonnes de montants : un écart entre elles (celui du tableau de bord n'en a que deux) */
.bars__table :is(th,td)+:is(th,td){padding-left:12px}
.dash-note{display:flex;align-items:center;gap:8px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text)}
.dash-note .icon{color:var(--muted);flex:none}
.agenda{list-style:none;margin:0;padding:0}
.agenda>li{display:flex;align-items:center;gap:14px;padding:10px 20px;border-top:1px solid var(--line)}
.agenda>li:first-child{border-top:0}
.agenda__date{display:grid;justify-items:center;width:40px;flex:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;line-height:1.1}
.agenda__date strong{font-family:var(--f-disp);font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.agenda__main{flex:1;min-width:0}
/* Type de l'échéance : icône et couleur (appel, facturation, devis, domaine, URSSAF, tâche) */
.agenda__icon{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted)}
.agenda__icon .icon{width:16px;height:16px}
.agenda__icon--blue{background:var(--blue-soft);color:var(--blue-ink)}
.agenda__icon--green{background:var(--green-soft);color:var(--green)}
.agenda__icon--amber{background:var(--amber-soft);color:var(--amber)}
.agenda__icon--red{background:var(--red-soft);color:var(--red)}
.agenda__icon--violet{background:var(--violet-soft);color:var(--violet)}
.agenda .badge{flex:none}
@container (max-width:520px){.agenda>li{flex-wrap:wrap;row-gap:6px}.agenda__main{flex-basis:calc(100% - 100px)}.agenda .badge{margin-left:100px}}
.dash-ok{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.dash-ok li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--text)}
.dash-ok .icon{color:var(--green);width:15px;height:15px}
.bars__bar[data-p="0"]{height:0%}
.bars__bar[data-p="5"]{height:5%}
.bars__bar[data-p="10"]{height:10%}
.bars__bar[data-p="15"]{height:15%}
.bars__bar[data-p="20"]{height:20%}
.bars__bar[data-p="25"]{height:25%}
.bars__bar[data-p="30"]{height:30%}
.bars__bar[data-p="35"]{height:35%}
.bars__bar[data-p="40"]{height:40%}
.bars__bar[data-p="45"]{height:45%}
.bars__bar[data-p="50"]{height:50%}
.bars__bar[data-p="55"]{height:55%}
.bars__bar[data-p="60"]{height:60%}
.bars__bar[data-p="65"]{height:65%}
.bars__bar[data-p="70"]{height:70%}
.bars__bar[data-p="75"]{height:75%}
.bars__bar[data-p="80"]{height:80%}
.bars__bar[data-p="85"]{height:85%}
.bars__bar[data-p="90"]{height:90%}
.bars__bar[data-p="95"]{height:95%}
.bars__bar[data-p="100"]{height:100%}
.kpi__bar>span[data-p="0"]{width:0%}
.kpi__bar>span[data-p="5"]{width:5%}
.kpi__bar>span[data-p="10"]{width:10%}
.kpi__bar>span[data-p="15"]{width:15%}
.kpi__bar>span[data-p="20"]{width:20%}
.kpi__bar>span[data-p="25"]{width:25%}
.kpi__bar>span[data-p="30"]{width:30%}
.kpi__bar>span[data-p="35"]{width:35%}
.kpi__bar>span[data-p="40"]{width:40%}
.kpi__bar>span[data-p="45"]{width:45%}
.kpi__bar>span[data-p="50"]{width:50%}
.kpi__bar>span[data-p="55"]{width:55%}
.kpi__bar>span[data-p="60"]{width:60%}
.kpi__bar>span[data-p="65"]{width:65%}
.kpi__bar>span[data-p="70"]{width:70%}
.kpi__bar>span[data-p="75"]{width:75%}
.kpi__bar>span[data-p="80"]{width:80%}
.kpi__bar>span[data-p="85"]{width:85%}
.kpi__bar>span[data-p="90"]{width:90%}
.kpi__bar>span[data-p="95"]{width:95%}
.kpi__bar>span[data-p="100"]{width:100%}
/* Aucun encaissement : le graphique réduit, sans transparence (les mois restent lisibles, charte § 12) */
.bars--empty{height:90px}

/* 10 ─ Habillage de l'administration (sa couche au-dessus des composants) ---------- */
.admin-ui .topbar{display:none}
.admin-ui .admin{min-height:100vh}
.admin-ui .main{margin-left:var(--sidebar)}
.admin-ui .sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:var(--sidebar);display:flex;flex-direction:column}
.admin-ui :is(.sidebar,.topbar) .crm-brand__logo{width:104px;height:22px;background-image:url(/assets/brand/syntaxeo-logo-inverse.png)}
.admin-ui .nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.admin-ui .nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none}
.admin-ui .nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.admin-ui .nav .label{display:flex;align-items:center;gap:12px;color:inherit;font-size:inherit;font-weight:inherit}
.admin-ui .nav .count{min-width:22px;height:20px;padding:0 7px;border:0;border-radius:999px;font-family:var(--f-mono);font-size:10.5px;font-weight:500;line-height:20px;text-align:center}
.admin-ui .sidebar__identity{display:flex;align-items:center;gap:10px;min-width:0;padding:6px}
.admin-ui .sidebar__avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:600}
.admin-ui .sidebar__identity-text{display:grid;min-width:0;line-height:1.35}
.admin-ui .sidebar__identity strong,.admin-ui .sidebar__identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-ui .sidebar__foot .actions{margin-top:13px}
.admin-ui .sidebar__foot .actions form{display:flex;min-width:0}
.admin-ui .sidebar__foot .actions .btn{padding-inline:9px}
/* Jetons et habillage propres à l'administration, au-dessus des composants des sections 1 à 9 */
/* Un seul anneau de focus : le contour encre de la section 2, jaune sur la nuit (barre latérale, barre du haut).
   Les halos portés par un parent (.stars label, .dropzone__area, .input-suffix) ne sont pas visés par ce
   sélecteur : c'est l'habillage qui garde l'anneau, et l'élément à l'intérieur n'en pose pas. */
.admin-ui :focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:none}
.admin-ui :is(.sidebar,.topbar) :focus-visible{outline-color:var(--marker-glow)}
/* Les champs de saisie gardent leur anneau de la section 3 (bord encre, halo jaune), comme dans l'espace client : leur contour
   reste transparent, visible seulement en contraste élevé où les ombres disparaissent. En lecture seule, le contour encre. */
.admin-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([readonly]),select,textarea:not([readonly])):focus-visible{outline:2px solid transparent;outline-offset:2px}
.admin-ui .settings--management .input-suffix:focus-within{--field-line:var(--ink);outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px var(--marker)}
.admin-ui .settings--management .input-suffix input:focus-visible{outline:none}
/* Le lien d'évitement s'affiche sur la nuit (barre latérale, barre du haut) : pastille et anneau jaunes. */
.admin-ui .skip{background:var(--marker);color:var(--ink)}
.admin-ui .skip:focus-visible{outline-color:var(--marker-glow)}
/* Palette Ctrl K : un grand champ sans cadre, souligné à l'encre tant qu'il a le focus (il l'a dès l'ouverture). */
.admin-ui .palette__box input[type=search]{min-height:54px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 18px;font-size:var(--fs-md)}
.admin-ui .palette__box input[type=search]:focus{--field-line:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* La croix native qui vide un champ de recherche est bleue dans Chrome : en gris. */
.admin-ui input[type=search]::-webkit-search-cancel-button{filter:grayscale(1);cursor:pointer}
/* Cible du lien d'évitement : le focus s'y pose sans cercler toute la zone de contenu. */
.admin-ui .main:focus,.admin-ui .main:focus-visible{outline:none;box-shadow:none}
.admin-ui input::placeholder,.admin-ui textarea::placeholder{color:var(--muted);opacity:1}
.admin-ui .sidebar{padding:20px 12px 14px;background:var(--night);color:var(--night-soft);border-right:0;overflow:hidden}
.admin-ui .sidebar>.crm-brand{padding:4px 12px 22px;color:var(--night-text)}
/* Sur un écran bas (1 280 × 800), la liste défile sous le pied de barre, et la coupure peut tomber pile entre deux rubriques :
   la liste paraîtrait finie. Un curseur visible sur la nuit (7:1) et, tant qu'il reste des rubriques plus bas, un fondu marqué
   d'un chevron collé au bas de la zone. Lié au défilement, l'indice s'efface sur les 36 derniers pixels : son opacité suit ce
   qui reste caché (s'il ne manque que 7 px, la dernière rubrique n'est pas couverte d'un fondu plein). Quand tout tient
   (aucune plage de défilement), sans prise en charge ou avec « moins d'animations », il reste caché et le curseur suffit.
   Rien sur l'indice ne dépasse la fin de la liste (ni transform, ni hauteur sans sa marge négative) : décalé dessous, il
   agrandissait la plage de défilement dont dépend sa propre animation, et la barre restait figée au hasard, soit avec un
   défilement fantôme de 36 px, soit sans défilement mais le fondu posé sur la dernière rubrique (constaté à 1 243 px de haut,
   28/09/2026). La marge de défilement basse de la liste vaut la hauteur du fondu : le focus clavier et la rubrique ouverte
   (admin.js) s'arrêtent au-dessus ; sans fondu (contraste élevé, « moins d'animations »), elle retombe à 0. */
.admin-ui .sidebar__nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--night-muted) transparent;padding-right:2px}
.admin-ui .sidebar__nav::after{content:"";position:sticky;bottom:0;display:block;height:36px;margin-top:-36px;pointer-events:none;opacity:0;background:linear-gradient(45deg,transparent 50%,var(--night-muted) 50%) calc(50% - 3px) calc(100% - 6px)/6px 6px no-repeat,linear-gradient(135deg,var(--night-muted) 50%,transparent 50%) calc(50% + 3px) calc(100% - 6px)/6px 6px no-repeat,linear-gradient(rgba(18,18,18,0),var(--night) 60%)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){.admin-ui .sidebar__nav{scroll-padding-bottom:36px}.admin-ui .sidebar__nav::after{animation:nav-more linear both;animation-timeline:scroll(nearest block);animation-range:calc(100% - 36px) 100%}}}
@keyframes nav-more{from{opacity:1}to{opacity:0}}
.admin-ui :is(.sidebar,.topbar) .crm-brand__product{color:var(--night-muted)}
.admin-ui :is(.sidebar,.topbar) .crm-brand__sep{background:var(--night-line)}
.admin-ui .nav a{min-height:38px;height:auto;padding:6px 10px 6px 12px;border-radius:var(--r-sm);color:var(--night-soft);font-size:var(--fs-base);font-weight:500}
.admin-ui .nav a:hover{color:var(--night-text);background:var(--night-card)}
/* La zone des rubriques défile, donc rogne ce qui la dépasse : l'anneau de focus se pose à l'intérieur (encre sur la rubrique
   ouverte, jaune ailleurs). */
.admin-ui :is(.nav a,.nav-search):focus-visible{outline-offset:-3px}
.admin-ui .nav a[aria-current=page]:focus-visible{outline-color:var(--ink)}
.admin-ui .nav a[aria-current=page]{color:var(--ink);background:var(--marker);box-shadow:none;font-weight:600}
.admin-ui .nav-icon{width:18px;height:18px;color:inherit}
.admin-ui .nav-sep{margin:20px 12px 6px;color:var(--night-muted);font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
/* Écran moins haut que la barre complète (1 269 px depuis l'entrée « Maintenances » du 28/09/2026, seuil à 1 280) : rubriques
   et intertitres resserrés, la liste tient dès 1 109 px de haut (l'écran de Lucas, 2 560 × 1 243, y gagne 134 px) ; plus
   bas (1 920 × 1 080 en plein écran), elle défile avec son indice. Au doigt, les rubriques gardent 40 px. */
@media (max-height:1280px) and (min-width:961px) and (pointer:fine){.admin-ui .nav a{min-height:32px;padding-block:4px}.admin-ui .nav-sep{margin:14px 12px 4px}}
.admin-ui .nav-search{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--control);margin:0 0 4px;padding:0 10px 0 14px;width:100%;border:1px solid var(--night-line);background:var(--night-card);color:var(--night-soft);border-radius:999px;font:inherit;font-size:var(--fs-base);cursor:pointer}
.admin-ui .nav-search:hover{border-color:#4A4843;color:var(--night-text)}
/* Son libellé porte .label, la classe des étiquettes de champ (encre, gras) : il suit le bouton */
.admin-ui .nav-search .label{display:flex;align-items:center;gap:12px;color:inherit;font-size:inherit;font-weight:500}
.admin-ui .nav-search kbd{padding:2px 7px;border:1px solid var(--night-line);border-radius:6px;background:transparent;color:var(--night-muted);font-family:var(--f-mono);font-size:10px}
.admin-ui .count{background:var(--card);color:var(--soft);font-variant-numeric:tabular-nums}
.admin-ui .sidebar .count{background:var(--night-line);color:var(--night-text)}
/* Compteurs du menu : leur éclat suit l'urgence. Rouge doux = en retard ou en attente de vous, ambre doux = bientôt à faire,
   gris = à surveiller, simple cercle = pour info. Le jaune reste à la rubrique ouverte, où les compteurs passent à l'encre,
   sauf l'alerte qui garde son rouge. */
.admin-ui .nav .count--alert{background:var(--danger-soft);color:var(--danger)}
.admin-ui .nav .count--warning{background:var(--warn-soft);color:var(--warn)}
.admin-ui .nav .count--info{background:transparent;box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-muted)}
.admin-ui .nav a[aria-current=page] .count:where(:not(.count--alert)){background:var(--ink);color:var(--wall);box-shadow:none}
.admin-ui .nav a[aria-current=page] .count--alert{background:var(--danger-soft);color:var(--danger)}
.admin-ui .sidebar__foot{margin-top:auto;padding:16px 4px 0;border-top:1px solid var(--night-line);background:transparent}
.admin-ui .sidebar__identity-text strong{color:var(--night-text);font-weight:600}
.admin-ui .sidebar__identity-text small{color:var(--night-muted)}
.admin-ui .sidebar__avatar{background:var(--night-card);box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-text)}
.admin-ui .sidebar__foot .actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}.admin-ui .sidebar__foot .actions>a{width:100%}.admin-ui .sidebar__foot .actions>form{flex:1}.admin-ui .sidebar__foot .actions>form button{width:100%}
.admin-ui .sidebar__foot .btn{min-height:var(--control);background:transparent;box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-soft);font-size:var(--fs-sm)}
.admin-ui .sidebar__foot .btn:hover{background:var(--night-card);color:var(--night-text)}
.admin-ui .main{padding:28px 36px 56px;max-width:none;min-width:0}
.admin-ui .page-head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line);gap:16px;align-items:flex-start}
.admin-ui .page-head p{margin-top:8px;color:var(--soft);font-size:var(--fs-base);line-height:1.55}
.admin-ui .page-head .actions{flex:0 1 auto;max-width:100%;justify-content:flex-end;gap:8px}
.admin-ui .page-head .badge:is(.badge--success,.badge--warning,.badge--danger){box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent)}
.admin-ui .panel{min-width:0}
.admin-ui .panel__head{padding:16px 20px;background:transparent;gap:12px;flex-wrap:wrap}
.admin-ui .panel__body{padding:20px}
.admin-ui .panel .panel{box-shadow:none}
.admin-ui .filters{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 16px}
/* La recherche se cale à droite tant qu'elle tient sur la ligne des filtres. Quand elle passe à la ligne,
   « margin-left:auto » la laisserait flotter seule au milieu : ici elle reprend le bord gauche des filtres.
   Sa largeur vient de son contenu : le champ garde de quoi montrer son indicatif en entier (38ch couvrent le plus long
   des filtres), le tri ou l'urgence la largeur de leur libellé ; faute de place, elle passe à la ligne. */
.admin-ui .filters .search{flex:0 1 auto;min-width:0;margin-left:0}
.admin-ui .filters .search input{flex:1 1 auto;width:38ch;min-width:0}
.admin-ui .filters .search select{flex:0 0 auto;width:auto}
@media (max-width:720px){.admin-ui .filters .search{flex-wrap:wrap}.admin-ui .filters .search select{flex:1 1 100%;width:100%}}
/* Second axe de filtre (gestion des sites) : sa propre ligne, alignée sur les filtres du dessus. */
.admin-ui .chips{gap:6px;flex-wrap:wrap}
.admin-ui .chip small{margin-left:2px}
.admin-ui .tabs{flex-wrap:wrap;margin-bottom:22px;overflow:visible}
.admin-ui .table-wrap{max-width:100%;overflow:auto;overscroll-behavior-x:contain;border-radius:inherit;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.admin-ui .table-wrap::-webkit-scrollbar{height:10px;width:10px}
.admin-ui .table-wrap::-webkit-scrollbar-track{background:transparent}
.admin-ui .table-wrap::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:var(--line-strong);background-clip:content-box}
.admin-ui .table-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
/* Un tableau qui ne déborde pas n'est pas une zone défilante : admin.js ne le rend focusable que s'il l'est. */
.admin-ui .table-wrap[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.admin-ui .table{width:100%;font-size:13.5px}
.admin-ui .table tbody tr:hover{background:var(--surface-2)}
.admin-ui .table .row-title{font-weight:600;color:var(--ink)}
/* Liste des clients : la colonne des noms à sa mesure (un nom long passe à la ligne), le reste au contact et aux sites */
.admin-ui .table--clients th:first-child{width:28%}
.admin-ui .table--contracts th:first-child{width:26%}
.admin-ui .table--contracts th:nth-child(2){width:22%}
.admin-ui .table--tickets th:first-child{width:30%}
.admin-ui .table--quotes th:first-child,.admin-ui .table--documents th:first-child{width:30%}
.admin-ui .table--recurring th:is(:first-child:not(.keep),.keep+th){width:26%}
/* Livre des recettes : total en pied de tableau, sur une ligne en mode fiches */
.admin-ui .table--receipts tfoot :is(th,td){border-top:1px solid var(--ink);border-bottom:0;color:var(--ink);font-weight:600;text-align:left}
.admin-ui .table--receipts tfoot td.right{text-align:right}
@media screen{@container (max-width:940px){.admin-ui .table--receipts tfoot{display:block}.admin-ui .table--receipts tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding:14px 16px;border-top:1px solid var(--ink)}.admin-ui .table--receipts tfoot :is(th,td){display:block;padding:0;border:0}}}
.admin-ui .table--periods th:first-child{width:24%}
/* Périodes des déclarations en fiches compactes (panneau de 560 à 740 px, à 1 280 px à côté du formulaire) : le titre,
   puis les cinq valeurs sur une ligne, au lieu d'une fiche de cinq rangées par période */
@media screen{@container (560px <= width <= 740px){.admin-ui .table--cards.table--periods tbody tr{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(max-content,1fr)}.admin-ui .table--cards.table--periods tbody tr:not(:has(>td:nth-child(6))){grid-template-columns:repeat(3,minmax(0,1fr)) minmax(max-content,1fr)}.admin-ui .table--cards.table--periods tbody td.is-status{grid-column:auto}}}
/* Colonne du titre réglée, sauf avec la colonne « Plateforme » de SUPER PDP : ses huit colonnes ont besoin de toute la place */
.admin-ui .table--invoices:not(:has(.is-platform)) thead :is(th:first-child:not(.keep),th.keep+th){width:28%}
/* Actions d'une ligne : sous 1 100 px de panneau, elles passent à la ligne plutôt que de faire défiler le tableau de côté
   (contacts : quatre boutons ; factures : « Relancer » et « Réglée ») ; au-delà, elles tiennent sur une ligne */
@container (max-width:1099px){.admin-ui .table--cards td>.actions{flex-wrap:wrap;justify-content:flex-end}}
/* Tableau en fiches dans un panneau de moins de 740 px (téléphone, tablette, petit portable : ces tableaux en demandent 710
   à 760) : chaque ligne devient une fiche, chaque cellule sous l'intitulé de sa colonne en mono (data-label, recopié de
   l'en-tête par admin.js), comme les classements de l'espace client ; rien n'est caché. L'intitulé est déjà lu avec la
   cellule par les lecteurs d'écran : texte de remplacement vide. À l'impression, un tableau reste un tableau. */
@media screen{@container (max-width:740px){
  .admin-ui .table--cards,.admin-ui .table--cards tbody{display:block;width:100%}
  .admin-ui .table--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .admin-ui .table--cards tbody tr{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:12px 20px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .admin-ui .table--cards tbody tr:last-child{border-bottom:0}
  .admin-ui .table--cards tbody :is(th,td){display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  .admin-ui .table--cards tbody :is(th,td):first-child,.admin-ui .table--cards tbody td:has(>.actions),.admin-ui .table--cards tbody td:not([data-label]){grid-column:1/-1}
  /* La pastille d'état (deuxième colonne) tient sur sa ligne, sous le titre (« En attente de réponse » dépasse une
     demi-fiche) ; les valeurs courtes qui suivent comblent les places laissées libres (dense) */
  .admin-ui .table--cards tbody td:nth-child(2):has(>.badge),.admin-ui .table--cards tbody td.is-status{grid-column:1/-1}
  .admin-ui .table--cards.table--checks tbody tr>td:first-child{position:absolute;top:14px;left:16px;grid-column:auto}
  .admin-ui .table--cards.table--checks tbody tr>td:nth-child(2){grid-column:1/-1}
  .admin-ui .table--cards.table--checks tbody tr:has(>td:first-child input)>td:nth-child(2){padding-left:34px}
  .admin-ui .table--cards.table--checks tbody tr>td:nth-child(2)::before{content:none}
  .admin-ui .table--cards tbody td:not([data-label]):empty{display:none}
  .admin-ui .table--cards.table--select tbody tr.is-selected{background:var(--band);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .admin-ui .table--cards.table--select tbody tr.is-selected td{background:transparent;box-shadow:none}
  .admin-ui .table--cards.table--select tbody tr.is-selected:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
  .admin-ui .table--cards tbody td>.badge{white-space:normal;border-radius:11px}
  .admin-ui .table--cards thead :is(input,button,a,select){visibility:hidden}
  /* Identifiant et mot de passe d'un accès : une ligne chacun, pour ne pas couper l'identifiant */
  .admin-ui .credentials-table.table--cards tbody td:is(:nth-child(2),:nth-child(3)){grid-column:1/-1}
  /* Ligne à remplir (correspondance des colonnes de l'import) : chaque cellule sur sa ligne, la liste entière */
  .admin-ui .table--cards tbody tr:has(>td>select)>td{grid-column:1/-1}
  .admin-ui .table--cards tbody td>select{width:100%}
  /* Numéro en tête de fiche (lignes de l'import) : avec son intitulé, « Ligne 12 » */
  .admin-ui .table--cards tbody td.num:first-child::before{content:attr(data-label);content:attr(data-label) / "";margin-right:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .admin-ui .table--cards tbody td[data-label]:not(:first-child)::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
  .admin-ui .table--cards tbody td>.actions{justify-content:flex-start;flex-wrap:wrap}
  /* Le menu d'une ligne en haut à droite de sa fiche */
  .admin-ui .table--cards tbody tr:has(>td>.rowmenu)>:first-child{padding-right:48px}
  .admin-ui .table--cards tbody td:has(>.rowmenu){position:absolute;top:10px;right:10px;grid-column:auto}
}}
/* Tableau large (table--cards-wide : le registre des contrats en demande 922) : les mêmes fiches jusqu'à 940 px de panneau,
   règles recopiées du bloc ci-dessus (à garder en phase) */
@media screen{@container (740px < width <= 940px){
  .admin-ui .table--cards.table--cards-wide,.admin-ui .table--cards.table--cards-wide tbody{display:block;width:100%}
  .admin-ui .table--cards.table--cards-wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .admin-ui .table--cards.table--cards-wide tbody tr{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:12px 20px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .admin-ui .table--cards.table--cards-wide tbody tr:last-child{border-bottom:0}
  .admin-ui .table--cards.table--cards-wide tbody :is(th,td){display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  .admin-ui .table--cards.table--cards-wide tbody :is(th,td):first-child,.admin-ui .table--cards.table--cards-wide tbody td:has(>.actions),.admin-ui .table--cards.table--cards-wide tbody td:not([data-label]){grid-column:1/-1}
  .admin-ui .table--cards.table--cards-wide tbody td:nth-child(2):has(>.badge),.admin-ui .table--cards.table--cards-wide tbody td.is-status{grid-column:1/-1}
  .admin-ui .table--cards.table--cards-wide.table--checks tbody tr>td:first-child{position:absolute;top:14px;left:16px;grid-column:auto}
  .admin-ui .table--cards.table--cards-wide.table--checks tbody tr>td:nth-child(2){grid-column:1/-1}
  .admin-ui .table--cards.table--cards-wide.table--checks tbody tr:has(>td:first-child input)>td:nth-child(2){padding-left:34px}
  .admin-ui .table--cards.table--cards-wide.table--checks tbody tr>td:nth-child(2)::before{content:none}
  .admin-ui .table--cards.table--cards-wide tbody td:not([data-label]):empty{display:none}
  .admin-ui .table--cards.table--cards-wide.table--select tbody tr.is-selected{background:var(--band);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .admin-ui .table--cards.table--cards-wide.table--select tbody tr.is-selected td{background:transparent;box-shadow:none}
  .admin-ui .table--cards.table--cards-wide.table--select tbody tr.is-selected:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
  .admin-ui .table--cards.table--cards-wide tbody td>.badge{white-space:normal;border-radius:11px}
  .admin-ui .table--cards.table--cards-wide thead :is(input,button,a,select){visibility:hidden}
  .admin-ui .table--cards.table--cards-wide tbody tr:has(>td>select)>td{grid-column:1/-1}
  .admin-ui .table--cards.table--cards-wide tbody td>select{width:100%}
  .admin-ui .table--cards.table--cards-wide tbody td.num:first-child::before{content:attr(data-label);content:attr(data-label) / "";margin-right:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .admin-ui .table--cards.table--cards-wide tbody td[data-label]:not(:first-child)::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
  .admin-ui .table--cards.table--cards-wide tbody td>.actions{justify-content:flex-start;flex-wrap:wrap}
  .admin-ui .table--cards.table--cards-wide tbody tr:has(>td>.rowmenu)>:first-child{padding-right:48px}
  .admin-ui .table--cards.table--cards-wide tbody td:has(>.rowmenu){position:absolute;top:10px;right:10px;grid-column:auto}
}}
/* Au téléphone : deux colonnes ; le contact par défaut de la liste (nom, email, téléphone) sur toute la largeur */
@media screen{@container (max-width:420px){
  .admin-ui .table--cards tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-ui .table--clients.table--cards tbody td:nth-child(4){grid-column:1/-1}
}}
/* Échéancier en fiches : chaque échéance garde tous ses champs (libellé et part, puis montant, échéance et date) ;
   le pied reprend les totaux sous leurs intitulés */
@media screen{@container (max-width:740px){
  .admin-ui .installments__table.table--cards tbody tr>td{grid-column:auto}
  .admin-ui .installments__table.table--cards tbody tr>td:first-child{grid-column:1/-1}
  .admin-ui .installments__table.table--cards tbody tr>td:nth-child(2){grid-column:span 2}
  .admin-ui .installments__table.table--cards :is(input,select){min-width:0;width:100%}
  .admin-ui .installments__table.table--cards .installments__pct{width:100%;margin:0}
  .admin-ui .installments__table.table--cards tfoot{display:block}
  .admin-ui .installments__table.table--cards tfoot tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin-top:-1px;padding:14px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
  .admin-ui .installments__table.table--cards tfoot td{display:block;padding:0;border:0;background:none;text-align:left}
  .admin-ui .installments__table.table--cards tfoot td:empty{display:none}
  .admin-ui .installments__table.table--cards tfoot td:nth-child(2){grid-column:1/-1;font-weight:500}
  .admin-ui .installments__table.table--cards tfoot td[data-label]:not(:nth-child(2))::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:3px;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
}}
@media screen{@container (max-width:600px){.admin-ui .installments__table.table--cards :is(tbody,tfoot) tr{grid-template-columns:repeat(2,minmax(0,1fr))}}}
@media screen{@container (max-width:420px){.admin-ui .installments__table.table--cards tfoot tr{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-ui .installments__table.table--cards tbody tr>td:is(:nth-child(5),:nth-child(6)){grid-column:1/-1}}}
/* Données en mono dans un tableau (dates, codes, adresses IP) : à 11 px, Martian Mono a l'œil du texte voisin à 13 px */
.admin-ui .table :is(td.mono,.sub.mono,.sub .mono){font-size:11px;letter-spacing:.02em}
.admin-ui .table .sub{margin-top:3px;font-size:var(--fs-xs)}
.admin-ui .table td .sub>.badge{white-space:normal;border-radius:11px}
.admin-ui .table--invoices td.is-status .badge{white-space:normal;border-radius:11px}
.admin-ui .empty{padding:30px 20px;color:var(--muted);line-height:1.7}
.admin-ui .bulkbar{position:sticky;top:12px;z-index:6;border-radius:var(--r);background:var(--paper);border:1.5px solid var(--ink);box-shadow:var(--lay);flex-wrap:wrap}
/* Sous la barre du haut (60 px) quand celle-ci existe */
@media (max-width:960px){.admin-ui .bulkbar{top:72px}}
/* Onglet Maintenances (Sites) : la saisie d'un passage tient dans la ligne du site, date, actions, visibilité et détail sur
   une rangée quand la place le permet (le détail passe dessous sinon) ; nom du site et de son client jamais coupés en deux
   lignes étroites ; une ligne inscrite aujourd'hui dit « Inscrit » à la place de « Fait », à la même hauteur que le bouton ;
   les refus s'écrivent dans la ligne (ou sous la barre des sites cochés), une date refusée sous la rangée, pas au bout ; en
   fiches, chaque cellule prend toute la largeur (la case de sélection reste dans le coin). Une ligne redessinée ignore la
   souris le temps d'un double clic (admin.js) : le second coup ne tombe sur rien. */
.admin-ui .table--maint td:nth-child(2){min-width:11em}
.admin-ui .maint-last .sub{max-width:24em}
.admin-ui .table--maint .maint-pass{min-width:min(100%,440px)}
.admin-ui .table--maint tr.is-settling{pointer-events:none}
.admin-ui .maint-pass__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.admin-ui .maint-pass__row input[type=date]{width:auto}
.admin-ui .maint-pass__row input[type=text]{flex:1 1 200px;width:auto;min-width:min(100%,180px)}
.admin-ui .maint-pass__row>.field-error{flex-basis:100%;margin:0}
.admin-ui .maint-today{margin:0;line-height:1.6}
.admin-ui .maint-today .link-btn{margin-left:6px}
@media (pointer:coarse){
  .admin-ui .maint-today .link-btn{position:relative}
  .admin-ui .maint-today .link-btn::before{content:"";position:absolute;inset:-10px -6px}
}
/* Champ « Actions » (onglet Maintenances, fiche du site) : un champ de largeur fixe, quel que soit le nombre d'actions
   cochées, avec une loupe ; la liste à cocher s'ouvre dessous, alignée à gauche comme une liste déroulante (menu de ligne,
   rowmenu--start). Largeur : le plus long des libellés seuls (« Contrôle de sécurité ») tient sans être coupé. */
.admin-ui .maint-actions{--maint-actions-w:224px;flex:none}
.admin-ui .rowmenu.maint-actions>summary{justify-content:space-between;gap:10px;width:var(--maint-actions-w);height:auto;min-height:var(--control);padding:0 12px 0 14px;border:1.5px solid var(--field-line,var(--line));border-radius:var(--r);background:var(--paper);color:var(--ink);font-size:var(--fs-md);line-height:1.35}
.admin-ui .rowmenu.maint-actions>summary:hover{--field-line:var(--field-line-hover,var(--muted));border-color:var(--field-line);background:var(--paper);color:var(--ink)}
.admin-ui .rowmenu.maint-actions[open]>summary,.admin-ui .rowmenu.maint-actions>summary:focus-visible{--field-line:var(--ink);border-color:var(--field-line);background:var(--paper);box-shadow:0 0 0 3px var(--marker);outline:none}
.admin-ui .maint-actions__text{white-space:nowrap}
.admin-ui .maint-actions__text.is-empty{color:var(--muted)}
.admin-ui .rowmenu.maint-actions>summary .icon{flex:none;width:16px;height:16px}
.admin-ui .rowmenu--start .rowmenu__panel{left:0;right:auto}
.admin-ui .maint-actions .maint-actions__panel{min-width:var(--maint-actions-w)}
.admin-ui .maint-actions__panel .check{align-items:center;min-height:36px;padding:0 10px;border-radius:var(--r-sm);white-space:nowrap}
.admin-ui .maint-actions__panel .check input{margin:0}
.admin-ui .maint-actions__panel .check:hover{background:var(--surface-2)}
.admin-ui .maint-actions__panel .check:has(input:checked){color:var(--ink)}
@media (pointer:coarse){.admin-ui .maint-actions__panel .check{min-height:44px}}
.admin-ui .maint-done{display:inline-flex;align-items:center;gap:6px;min-height:var(--control);font-weight:600;color:var(--ink);white-space:nowrap}
.admin-ui .maint-done .icon{width:16px;height:16px}
.admin-ui .maint-error{margin:8px 0 0;color:var(--danger);font-size:var(--fs-sm);font-weight:600}
.admin-ui .bulkbar .maint-error{flex-basis:100%;margin:0}
@media (max-width:640px){.admin-ui .bulkbar .maint-hint{display:none}}
@media screen{@container (max-width:740px){.admin-ui .table--cards.table--maint tbody td:not(:first-child){grid-column:1/-1}}}
.admin-ui .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.admin-ui .form-cards{gap:24px}
.admin-ui .form-card{container-type:inline-size}
/* Formulaire dense (contrats) : 4 colonnes sur une carte large, 2 ensuite, 1 sur téléphone ; un champ court n'occupe
   plus une demi-ligne vide. Une paire liée (liste + précision) se range sur deux colonnes. */
@container (min-width:880px){.admin-ui .form-grid.form-grid--dense{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Fiches d'un site et d'un contrat : 4 colonnes seulement dès 1 250 px de carte ; en dessous, leurs listes longues
   (« Site existant (réalisé par un tiers) », « À partir d'un jour du mois précédent ») seraient coupées */
@container (880px <= width < 1250px){.admin-ui .form-grid.form-grid--dense.form-grid--roomy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:620px){.admin-ui .form-grid.form-grid--dense{grid-template-columns:minmax(0,1fr)}.admin-ui .form-grid--dense>.span-2{grid-column:auto}}
@container (max-width:620px){.admin-ui .form-grid:not(.form-grid--dense,.form-grid--pair){grid-template-columns:minmax(0,1fr)}.admin-ui .form-grid:not(.form-grid--dense,.form-grid--pair)>:is(.span-2,.span-all){grid-column:1/-1}}
@container (width < 360px){.admin-ui .form-grid--pair{grid-template-columns:minmax(0,1fr)}}
.admin-ui .field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;align-items:start}
.admin-ui .field-pair>[hidden]{display:none}
.admin-ui .field-pair>.field:only-child,.admin-ui .field-pair>.field:first-child:has(+[hidden]){grid-column:1/-1}
/* Liste et champ à long suffixe (« du mois précédent ») : la liste prend la plus grande part */
@container (width > 620px){.admin-ui .field-pair:has(.input-suffix--long){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.admin-ui .check--card{align-self:start}
@container (max-width:620px){.admin-ui .field-pair{grid-template-columns:minmax(0,1fr)}}
/* Champ fait d'une case (« Destinataire par défaut ») : la case s'aligne sur les champs voisins, pas sur leurs étiquettes */
.admin-ui .field--primary>.check,.admin-ui .field--primary>.primary-state,.admin-ui .field--check>.check{min-height:var(--control);display:flex;align-items:center;gap:10px;margin:0}
.admin-ui .primary-state .icon{flex:none;width:18px;height:18px;color:var(--green)}
/* Création (contact, document, site) : la colonne de droite n'a de contenu qu'une fois la fiche enregistrée */
.admin-ui .grid-main.grid-main--solo{grid-template-columns:minmax(0,1fr)}
/* Création d'un contrat : récapitulatif en direct dans la colonne de droite, qui suit le défilement */
.admin-ui .hint.hint--warn{color:var(--warn);font-weight:600}
.admin-ui .hint.hint--warn:empty{margin:0}
.admin-ui .contract-summary-aside{position:sticky;top:16px}
.admin-ui .contract-summary__list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 14px;margin:0;padding:16px 20px;font-size:13px}
.admin-ui .contract-summary__list dt{color:var(--muted)}
.admin-ui .contract-summary__list dd{margin:0;color:var(--ink);font-weight:550;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.admin-ui .contract-summary__list dd small{display:block;font-weight:400;color:var(--muted)}
.admin-ui .contract-summary__foot{border-top:1px solid var(--line);margin:0}
.admin-ui .field{min-width:0}
.admin-ui .field label,.admin-ui .field>.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.admin-ui .hint{font-size:12px;line-height:1.6;color:var(--muted)}
.admin-ui .list-limit{margin:14px 0 0}
.admin-ui .panel>.list-limit{margin:0;padding:12px 20px 16px}
.admin-ui .form-actions,.admin-ui .savebar{box-shadow:none;gap:10px;flex-wrap:wrap}
.admin-ui .savebar{border-radius:var(--r)}
/* Note au pied d'un panneau (sous un tableau) : jamais collée à son bord */
.admin-ui .panel>.hint{padding:12px 20px 16px}
.admin-ui .form-actions.savebar{padding:14px 16px;bottom:12px}
.admin-ui .form-state{font-size:12px;color:var(--muted);margin-right:auto}
/* « Rétablir » reste à côté de « Modifications non enregistrées », à gauche ; Annuler et Enregistrer à droite */
.admin-ui .form-state:has(+ .btn:not([hidden])){margin-right:0}
.admin-ui .form-state + .btn{margin-right:auto}
.admin-ui .field-error{color:var(--red);font-size:12px;margin:5px 0 0}
/* Rangee « nouveau devis / nouvelle facture » alignee par le bas : un champ qui signale une erreur
   ferait descendre le select voisin et le bouton. Le message se pose alors sous le champ, hors du
   flux, et la rangee reserve sa hauteur le temps qu'il s'affiche.
   Le seuil est au-dessus de la largeur ou la rangee s'empile (mesuree a 693 px) : entre les deux,
   le message hors du flux recouvrait la deuxieme ligne. Une fois empilee, il reprend sa place.
   @supports garde les deux regles ensemble : un navigateur qui gere @container sans :has() aurait
   pris le positionnement absolu sans la reserve, et le message serait passe par-dessus la suite. */
@supports selector(:has(*)){
  @container (min-width:720px){
    .admin-ui .quote-new .field-error{position:absolute;top:100%;left:0;right:0;margin:4px 0 0}
    .admin-ui .quote-new:has(.field-error){padding-bottom:42px}
  }
}
/* La liste de suggestions se pose juste sous le champ, a l'endroit meme du message : apres un envoi
   refuse, le champ reprend le focus, la liste se rouvre et masquait entierement ce qu'on venait
   d'ecrire. Elle descend d'une ligne tant qu'un message est affiche. */
.admin-ui .field:has(.field-error) .qe-pick{top:calc(100% + 28px)}
.admin-ui .qe-pick{max-height:min(60vh,520px)}
.admin-ui [aria-invalid=true]{border-color:var(--red)!important}
.admin-ui .advanced-fields{margin:16px 0;border-top:1px solid var(--line);padding-top:14px}
.admin-ui .advanced-fields>summary{cursor:pointer;font-weight:600;color:var(--text);padding:8px 0}
.admin-ui .advanced-fields[open]>summary{margin-bottom:16px}
.admin-ui .kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:0;border:0;border-radius:var(--r-lg);background:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;margin-bottom:24px}
.admin-ui .kpi{border:0;border-radius:0;box-shadow:none;background:transparent;padding:18px 20px;border-right:1px solid var(--line);margin-right:-1px}
.admin-ui .kpi:last-child{border-right:0}
.admin-ui .kpi__hint,.admin-ui .kpi__note{font-size:12px;color:var(--muted)}
/* Tuiles d'une même bande : libellés, chiffres et notes sur des rangées communes (sous-grille) ; un libellé sur deux lignes
   ne décale plus le chiffre de ses voisines. Autant de rangées que la tuile la plus garnie de la bande (cinq au plus). */
.admin-ui .kpi{grid-row:span 3;grid-template-rows:subgrid;row-gap:4px}
.admin-ui .kpis:has(>.kpi>:nth-child(4))>.kpi{grid-row:span 4}
.admin-ui .kpis:has(>.kpi>:nth-child(5))>.kpi{grid-row:span 5}
/* La bande rogne ce qui la dépasse : survol et focus d'une tuile-lien se posent à l'intérieur. */
.admin-ui a.kpi:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.admin-ui a.kpi:focus-visible{outline-offset:-4px}
.admin-ui .dash-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));columns:auto;gap:20px;align-items:start}
.admin-ui .dash-flow>.panel{display:block;margin:0;width:auto}
.admin-ui .work-queue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:32px}
/* Grand écran : les files « À traiter » tiennent en deux rangées au-dessus de la ligne de flottaison (27 pouces, 2 560 px) */
@media (min-width:1900px){.admin-ui .work-queue{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:2300px){.admin-ui .work-queue,.admin-ui .dash-flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.admin-ui .work-queue .list{margin:0}
.admin-ui .work-queue .row{padding:12px 18px;gap:16px}
.admin-ui .work-queue .row__main{min-width:0;overflow-wrap:anywhere}
.admin-ui .work-queue .row-title{color:var(--ink);font-size:var(--fs-base);font-weight:600}
.admin-ui .work-queue .row__side{display:flex;align-items:center;gap:8px;flex-shrink:0}
.admin-ui .work-queue .row>.task__check{flex-shrink:0;margin-right:-4px}
.admin-ui .work-queue .row>.row__main{flex:1 1 auto}
.admin-ui .work-queue .panel__head{min-height:64px}
.admin-ui .work-queue .dash-count.is-urgent{background:var(--red-soft);color:var(--red)}
.admin-ui .work-queue+.dash-ok{margin:-12px 0 32px}
/* Ma journée (tableau de bord) : la date, la phrase du jour et ce qui est fait ; la frise des appels par heure (les créneaux se
   placent au quart d'heure par classe, styles en ligne interdits) ; puis appels, tâches et argent, à traiter sur place */
.admin-ui .my-day{display:grid;gap:18px;margin-bottom:36px}
.admin-ui .my-day__head{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between}
.admin-ui .my-day__when,.admin-ui .my-day__label{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.admin-ui .my-day__title{margin:4px 0 0;font:800 clamp(28px,3.4vw,38px)/1 var(--f-disp);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.admin-ui .my-day__title mark{background:linear-gradient(transparent 52%,var(--marker) 52%);color:inherit;padding:0 .06em}
.admin-ui .my-day__sentence{margin:8px 0 0;color:var(--soft)}
.admin-ui .my-day__progress{min-width:min(100%,280px);display:grid;gap:4px}
.admin-ui .my-day__progress-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.admin-ui .my-day__progress strong{font:800 22px/1 var(--f-disp);letter-spacing:-.03em;color:var(--ink)}
.admin-ui .my-day__progress .kpi__bar>span{background:var(--ink)}
.admin-ui .my-day__frise{padding:16px 18px 14px;display:grid;gap:10px}
.admin-ui .my-day__scroll{overflow-x:auto;padding:32px 0 6px}
.admin-ui .my-day__tel{white-space:nowrap}
.admin-ui .my-day__line{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);min-width:640px;border-top:1px solid var(--ink)}
.admin-ui .my-day__hour{position:relative;min-height:84px;padding:6px 0 0 6px;border-left:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.admin-ui .my-day__hour:first-child{border-left:0}
.admin-ui .my-day__at-q0{margin-left:0}.admin-ui .my-day__at-q1{margin-left:25%}.admin-ui .my-day__at-q2{margin-left:50%}.admin-ui .my-day__at-q3{margin-left:75%}
.admin-ui .my-day__slot{position:relative;z-index:1;align-self:flex-start;min-width:150px;padding:7px 10px;border:1px solid var(--ink);border-radius:12px;background:var(--marker);color:var(--ink);font-size:var(--fs-sm);line-height:1.3;text-decoration:none;box-shadow:var(--lay)}
.admin-ui .my-day__slot strong{display:block;font-weight:600}
.admin-ui .my-day__slot.is-past{background:var(--surface-2);border-color:var(--line-strong)}
.admin-ui .my-day__slot:hover{background:var(--ink);color:var(--wall)}
.admin-ui .my-day__slot:not(.is-past) .my-day__label{color:var(--marker-muted)}
.admin-ui .my-day__slot:hover .my-day__label{color:var(--on-ink-soft)}
.admin-ui .my-day__now{position:absolute;top:-6px;bottom:0;width:2px;background:var(--danger);z-index:2;pointer-events:none}
.admin-ui .my-day__now.my-day__at-q0{left:0;margin:0}.admin-ui .my-day__now.my-day__at-q1{left:25%;margin:0}.admin-ui .my-day__now.my-day__at-q2{left:50%;margin:0}.admin-ui .my-day__now.my-day__at-q3{left:75%;margin:0}
.admin-ui .my-day__now::before{content:"";position:absolute;top:0;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--danger)}
.admin-ui .my-day__now b{position:absolute;top:-24px;left:-20px;padding:3px 5px;border-radius:4px;background:var(--paper);font:500 10px/1 var(--f-mono);letter-spacing:.06em;color:var(--danger)}
.admin-ui .my-day__untimed{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.admin-ui .my-day__chip{padding:4px 10px;border:1px dashed var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:var(--fs-sm);text-decoration:none}
.admin-ui .my-day__chip.is-late{border-color:var(--danger);color:var(--danger)}
.admin-ui .my-day__chip:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}
.admin-ui .my-day__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1180px){.admin-ui .my-day__cols{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-ui .my-day__col--money{grid-column:1/-1}}
@media (max-width:720px){.admin-ui .my-day__cols{grid-template-columns:minmax(0,1fr)}}
.admin-ui .my-day__col{display:flex;flex-direction:column;min-width:0}
.admin-ui .my-day__col h3{margin:0;display:flex;align-items:center;gap:10px;font:700 19px/1.15 var(--f-disp);letter-spacing:-.02em;color:var(--ink)}
.admin-ui .my-day__col .list{margin:0}
.admin-ui .my-day__row,.admin-ui .my-day__lot{padding:12px 18px;gap:8px 12px;flex-wrap:wrap}
.admin-ui .my-day__row>.row__main,.admin-ui .my-day__lot>.row__main{flex:1 1 170px;min-width:0;overflow-wrap:break-word}
.admin-ui .my-day__row .row__side{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 10px;margin-left:auto}
.admin-ui .my-day__row>.task__check{flex-shrink:0}
.admin-ui .my-day__time{min-width:52px;flex-shrink:0;font:800 17px/1 var(--f-disp);letter-spacing:-.02em;color:var(--ink)}
.admin-ui .my-day__figure{font:800 24px/1 var(--f-disp);letter-spacing:-.03em;color:var(--ink);margin-right:2px}
.admin-ui .my-day__lot{align-items:center;flex-wrap:wrap}
.admin-ui .dash-clear{display:flex;align-items:center;gap:10px;margin:0 0 32px;padding:16px 20px;border:0;border-radius:var(--r-lg);background:var(--paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);color:var(--text);font-size:var(--fs-base)}
.admin-ui .dash-clear .icon{flex:none;color:var(--green);width:18px;height:18px}
.admin-ui .section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:40px 0 16px;padding-top:16px;border-top:1px solid var(--ink);font-family:var(--f-disp);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.admin-ui .page-head+section>.section-title:first-child{margin-top:0;padding-top:0;border-top:0}
.admin-ui .client-contact-strip{display:flex;gap:12px 24px;flex-wrap:wrap;padding:0 0 20px;font-size:13px}
.admin-ui .client-contact-strip a{color:var(--text)}
.admin-ui .qe-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.admin-ui .qe-summary{position:sticky;top:20px}
.admin-ui .qe-client{background:var(--card);border:0;border-radius:var(--r)}
.admin-ui .document-flow{display:flex;gap:8px 22px;align-items:center;flex-wrap:wrap;padding:14px 18px;margin-bottom:22px;background:var(--paper);border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);border-radius:var(--r);font-size:var(--fs-sm)}
.admin-ui .document-flow span{display:flex;align-items:center;gap:7px;color:var(--muted)}
.admin-ui .document-flow [aria-current=step]{color:var(--ink);font-weight:600;background:linear-gradient(transparent 55%,var(--marker) 55%)}
.admin-ui .document-flow__action{display:inline-flex;align-items:center;gap:7px;min-height:var(--control);margin:-8px 0;padding:0 14px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.admin-ui .document-flow__action:hover{background:var(--card);color:var(--ink)}
.admin-ui .settings--management{gap:28px;grid-template-columns:200px minmax(0,1fr)}
.admin-ui .settings-workspace{background:var(--paper);padding:24px;border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);border-radius:var(--r-lg)}
.admin-ui .settings-heading{padding-bottom:20px}
.admin-ui .auth{background:var(--bg)}
.admin-ui .auth__box{padding:40px 36px;border:0;border-radius:20px;background:var(--paper);box-shadow:var(--lay)}
.admin-ui .auth__brand{color:var(--ink)}
@media (max-width:1200px){.admin-ui .qe-layout{grid-template-columns:minmax(0,1fr)}.admin-ui .qe-summary{position:static}.admin-ui .grid-main{grid-template-columns:minmax(0,1fr)}.admin-ui .settings--management{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){.admin-ui .topbar{display:flex;background:var(--night);color:var(--night-text);border-bottom:1px solid var(--night-line)}.admin-ui .main{margin-left:0;padding:24px 20px 40px}.admin-ui .sidebar{overflow-y:auto}.admin-ui .sidebar.is-open{box-shadow:0 0 0 100vmax rgba(18,18,18,.55)}}
@media (max-width:720px){.admin-ui .work-queue,.admin-ui .dash-flow,.admin-ui .form-grid{grid-template-columns:minmax(0,1fr)}.admin-ui .form-grid>.span-2{grid-column:1/-1}.admin-ui .page-head{flex-direction:column}.admin-ui .page-head .actions{justify-content:flex-start}.admin-ui .filters .search{flex-basis:100%}.admin-ui .settings-workspace{padding:18px}.admin-ui .savebar{position:static}.admin-ui .kpi{border-bottom:1px solid var(--line)}.admin-ui .table:not(.table--cards){min-width:620px}.admin-ui .qe-client{flex-wrap:wrap}}
@media (max-width:480px){.admin-ui .main{padding:20px 14px 32px}.admin-ui .panel__body,.admin-ui .panel__head{padding:16px}.admin-ui .settings-workspace{padding:16px}.admin-ui .document-flow{gap:10px 16px}.admin-ui .auth__box{padding:24px}}
@media (prefers-reduced-motion:reduce){.admin-ui *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.to-top,.head-progress{display:none!important}.admin-ui .main{margin:0;padding:0}.admin-ui .form-state,.admin-ui .document-flow{display:none}}

.admin-ui .panel.advanced-fields{margin:0;padding:0}.admin-ui .panel.advanced-fields>summary{display:flex;align-items:center;gap:8px;padding:18px 20px;margin:0;list-style:none;cursor:pointer}
.admin-ui .panel.advanced-fields>summary::-webkit-details-marker{display:none}
.admin-ui .panel.advanced-fields>summary::after{content:"";flex:none;width:10px;height:10px;margin-left:auto;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
.admin-ui .panel.advanced-fields[open]>summary::after{transform:rotate(45deg)}.admin-ui .panel.advanced-fields[open]>summary{border-bottom:1px solid var(--line)}

@media(max-width:720px){.admin-ui .qe-client__text{flex:1 1 calc(100% - 60px);min-width:0}.admin-ui .qe-client>.btn{margin-left:auto}.admin-ui .work-queue .row{align-items:flex-start;flex-wrap:wrap}.admin-ui .work-queue .row__main{flex:1 1 200px}}

.admin-ui .module-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 24px;border-bottom:1px solid var(--line);padding-bottom:12px}.admin-ui .module-nav a{padding:7px 10px;font-size:13px;border-radius:6px;color:var(--text)}.admin-ui .module-nav a[aria-current=page]{background:var(--blue-soft);color:var(--blue-ink);font-weight:600}.admin-ui .module-nav a:hover{background:var(--surface-2)}

.admin-ui .auth__card{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}.admin-ui .auth__heading{margin-top:24px}

/* Menu d'action rapide d'un client (liste et fiche).

   Le panneau est dans le flux par défaut : c'est la seule forme qui survive à tout. Un panneau flottant
   posé dans un tableau se fait rogner par le défilement du cadre (.table-wrap, plus haut), et lever ce
   rognage remet le défilement horizontal à zéro — la colonne qu'on venait d'atteindre repart hors écran.
   Le script le détache donc en « fixed » à l'ouverture, ce qui échappe au rognage sans rien réinitialiser,
   et le repositionne quand la page défile. Sans script, le menu reste utilisable : <details> l'ouvre et le
   ferme, le panneau pousse la ligne au lieu de flotter, et il ne recouvre le déclencheur de personne. */
.admin-ui .rowmenu{position:relative;display:inline-block}
.admin-ui .rowmenu>summary{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid transparent;border-radius:999px;color:var(--muted);cursor:pointer;list-style:none;transition:background .15s,border-color .15s,color .15s}
.admin-ui .rowmenu>summary::-webkit-details-marker{display:none}
.admin-ui .rowmenu__dots{width:18px;height:18px}
.admin-ui .rowmenu__dots circle{fill:currentColor;stroke:none}
.admin-ui .rowmenu>summary:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.admin-ui .rowmenu[open]>summary{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.admin-ui .rowmenu>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.admin-ui .rowmenu__panel{position:absolute;top:100%;right:0;z-index:60;margin-top:6px;min-width:232px;padding:6px;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-pop)}
.admin-ui .rowmenu__panel.is-floating{position:fixed;right:auto;margin:0;z-index:60}
.admin-ui .rowmenu__note{margin:4px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.admin-ui .rowmenu__hint{margin:4px 10px 8px;font-size:12px;line-height:1.45;color:var(--muted)}
.admin-ui .rowmenu__sep{margin:6px 8px;border:0;border-top:1px solid var(--line)}
.admin-ui .rowmenu__item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--text);font:inherit;font-size:13px;font-weight:500;line-height:1.3;text-align:left;text-decoration:none;cursor:pointer}
.admin-ui .rowmenu__item:hover{background:var(--surface-2);color:var(--ink)}
.admin-ui .rowmenu__item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.admin-ui .rowmenu__item .icon{flex:0 0 auto;width:16px;height:16px;color:var(--muted)}
.admin-ui .rowmenu__item.is-current{font-weight:700;color:var(--ink)}
.admin-ui .rowmenu__item.is-current .icon{color:var(--blue)}
.admin-ui .rowmenu__blank{flex:0 0 auto;width:16px}
.admin-ui .rowmenu__item--danger{color:var(--red)}
.admin-ui .rowmenu__item--danger .icon{color:var(--red)}
.admin-ui .rowmenu__item--danger:hover{background:var(--red-soft);color:var(--red)}
/* Au doigt (écran étroit ou pointeur grossier), aucun contrôle sous 40 px : petits boutons, puces, menus de ligne, rubriques. */
@media (max-width:960px),(pointer:coarse){.admin-ui .module-nav a,.mails__item{min-height:40px;display:flex;align-items:center}}
@media (max-width:1100px){.settings-nav summary{min-height:40px}}
@media (max-width:960px),(pointer:coarse){:root{--control-sm:40px}.admin-ui .rowmenu>summary{width:40px;height:40px}.admin-ui .nav a{min-height:40px}}

/* Connexion sans mot de passe : clé de sécurité, puis code par email. */
.admin-ui .auth__passkey{display:flex;flex-direction:column;gap:14px}
.admin-ui .auth__or{display:flex;align-items:center;gap:12px;margin:0;color:var(--muted);font-size:12px}
.admin-ui .auth__or::before,.admin-ui .auth__or::after{content:"";flex:1;height:1px;background:var(--line)}
.admin-ui .account-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.admin-ui .account-key:last-child{border-bottom:0}
.admin-ui .account-key__name{display:flex;align-items:center;gap:8px;min-width:0}
.admin-ui .account-key__name .icon{color:var(--muted)}
.admin-ui .account-key form{margin-left:auto}

/* Conversation du support : statut en menu dans l'en-tête, réglages dans une fenêtre */
.admin-ui .rowmenu--button>summary{width:auto;height:auto;min-height:var(--control);gap:8px;padding:0 18px;border:0;border-radius:999px;color:var(--ink)}
.admin-ui .rowmenu--button>summary:hover,.admin-ui .rowmenu--button[open]>summary{background:var(--ink);color:var(--wall)}
.admin-ui .rowmenu--button>summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.admin-ui .rowmenu--button>summary .badge{margin:0}
.admin-ui .rowmenu--button>summary .icon{width:16px;height:16px;color:var(--muted)}
.admin-ui .rowmenu--button .rowmenu__panel{width:260px;max-width:calc(100vw - 32px)}


/* Place de la plaque « Haut de page » en bas du plan de travail : au bout de la page, elle ne se pose sur aucune action */
.admin-ui .main{padding-bottom:100px}
@media (max-width:760px){.admin-ui .main{padding-bottom:84px}}
/* Haut de page : plaque de laiton du site (admin.js), en bas à droite ; comme dans l'espace client. Médaillon sombre cerclé
   de laiton, dont la bague se remplit avec la lecture (--p, de 0 à 1) ; au survol ou au clavier, le cartel se déplie :
   « Haut de page » et la section en cours. Elle se retire derrière une fenêtre, la palette ou le menu mobile, et monte
   au-dessus de la barre d'enregistrement des réglages. */
.to-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));translate:0 calc(-1 * var(--lift,0px));z-index:50;display:flex;align-items:center;border-radius:999px;background:linear-gradient(160deg,#2B2822,#131210);box-shadow:0 22px 36px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(184,155,98,.42);color:var(--brass-hi);text-decoration:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,visibility 0s .3s,transform .5s var(--ease),translate .35s var(--ease)}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .3s,visibility 0s,transform .5s var(--ease),translate .35s var(--ease)}
.to-top:hover,.to-top:focus-visible{color:var(--brass-hi)}
.admin-ui .to-top:focus-visible{outline-color:var(--ink);box-shadow:0 22px 36px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(184,155,98,.42)}
body:has(dialog[open],.palette:not([hidden]),.sidebar.is-open) .to-top{opacity:0;visibility:hidden}
.to-top-plate{display:flex;flex-direction:column;justify-content:center;gap:4px;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;transition:max-width .5s var(--ease),padding .5s var(--ease),opacity .2s}
.to-top-label{font-family:var(--f-body);font-weight:600;font-size:14px;line-height:1.1;color:var(--brass-hi)}
.to-top-where{width:210px;white-space:normal;font-family:var(--f-mono);font-size:9.5px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.to-top-dial{position:relative;display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;overflow:hidden}
/* Bague : piste de laiton terni, remplie de laiton clair au fil de la lecture */
.to-top-dial::before{content:"";position:absolute;inset:5px;border-radius:50%;background:conic-gradient(var(--brass-hi) calc(var(--p,0) * 1turn),rgba(184,155,98,.3) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
/* Deux flèches gravées : la seconde attend sous la première (tour d'ascenseur au survol) */
.to-top-dial svg{grid-area:1 / 1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.to-top-dial svg+svg{transform:translateY(170%)}
@media (hover:hover) and (pointer:fine){.to-top:hover .to-top-plate{max-width:250px;padding-left:24px;opacity:1}}
.to-top:focus-visible .to-top-plate{max-width:250px;padding-left:24px;opacity:1}
@media (max-width:760px){.to-top{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.to-top-dial{width:54px;height:54px}}
/* Fil de lecture (section 11) : caché tant que le navigateur ne sait pas le lier au défilement */
.head-progress{display:none}

/* 11 ─ Mouvement du site (charte, § 7) --------------------------------------------------------------------------
   Comme l'espace client et le site : tout ce qui bouge est déclaré ici, sous « no-preference » ; si le système demande
   moins d'animations, la page reste immobile et complète. Jamais d'opacité partielle sur du texte au départ d'une
   animation (le fondu entre deux pages mis à part, comme sur le site). */
/* Moins d'animations : la règle « .admin-ui * » coupe celles des éléments, celle-ci celles des pseudo-éléments */
@media (prefers-reduced-motion:reduce){.admin-ui ::before,.admin-ui ::after{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:no-preference){
  /* Fondu court d'une page à l'autre (0,18 s puis 0,34 s). La barre latérale et la barre du haut n'en font pas partie :
     elles restent en place, seul le plan de travail change */
  @view-transition{navigation:auto}
  .admin-ui .sidebar{view-transition-name:admin-sidebar}
  .admin-ui .topbar{view-transition-name:admin-topbar}
  ::view-transition-old(admin-sidebar){display:none}
  ::view-transition-new(admin-sidebar){animation:none}
  ::view-transition-old(root){animation:e2-vt-out .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:e2-vt-in .34s var(--ease) both}
  @keyframes e2-vt-out{to{opacity:0}}
  @keyframes e2-vt-in{from{opacity:0;transform:translateY(8px)}}
  html{scroll-behavior:smooth}
  /* Fil de lecture : un trait d'encre en haut du plan de travail, dont la longueur suit le défilement de la page. Replié
     tant que la page ne défile pas (sans plage de défilement, l'animation ne s'applique pas) */
  @supports (animation-timeline:scroll()){
    .admin-ui .head-progress{display:block;position:fixed;top:0;left:var(--sidebar);right:0;z-index:35;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;animation:e2-grow linear both;animation-timeline:scroll(root)}
    @media (max-width:960px){.admin-ui .head-progress{top:60px;left:0}}
    @keyframes e2-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
  /* Soulignements : celui des onglets se trace au survol, celui des liens fonce */
  .tabs a::after,.bars__data>summary::after,.admin-ui .panel.advanced-fields>summary::after,details.panel>summary.panel__head::after,.settings-nav summary::after,.mails__text summary::after,:is(details.more summary,.settings-add-account summary,.mails__picker>summary)::after{transition:transform .35s var(--ease)}
  .switch{transition:background-color .25s var(--ease)}
  .switch::after{transition:transform .25s var(--ease)}
  .bars__col{transition:background-color .25s var(--ease)}
  a{transition:text-decoration-color .25s var(--ease)}
  /* Connexion et salut du tableau de bord : le surligneur passe une fois sous le mot clé du titre */
  :is(.auth,.page-head) h1 em{background-size:0 100%;background-repeat:no-repeat;animation:e2-mark 1s var(--ease) .3s forwards}
  @keyframes e2-mark{to{background-size:100% 100%}}
  /* Fenêtres et palette Ctrl K : entrée par glissement ; menus d'action : ils descendent de leur bouton */
  dialog.modal[open],.palette:not([hidden]) .palette__box{animation:e2-panel .4s var(--ease)}
  @keyframes e2-panel{from{transform:translateY(16px) scale(.98)}}
  .admin-ui .rowmenu[open]>.rowmenu__panel{animation:e2-drop .3s var(--ease)}
  @keyframes e2-drop{from{transform:translateY(-6px)}}
  /* Menu mobile : les groupes de rubriques glissent en place l'un après l'autre à l'ouverture du tiroir */
  .admin-ui .sidebar.is-open .sidebar__nav>*{animation:e2-navin .5s var(--ease) both}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(2){animation-delay:.03s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(3){animation-delay:.06s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(4){animation-delay:.09s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(5){animation-delay:.12s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(6){animation-delay:.15s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(7){animation-delay:.18s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(8){animation-delay:.21s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(9){animation-delay:.24s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(10){animation-delay:.27s}
  .admin-ui .sidebar.is-open .sidebar__nav>:nth-child(n+11){animation-delay:.3s}
  @keyframes e2-navin{from{transform:translateY(14px)}}
  /* Pendant cette entrée, les groupes décalés de 14 px agrandissent la plage de défilement de la liste : le fondu du bas, qui
     la suit, voilerait la rubrique ouverte d'une liste déjà au bout. Il reste caché jusqu'à la fin de l'entrée (0,7 s), puis
     reparaît avec son opacité du moment. Par la visibilité : l'opacité reste à la seule animation liée au défilement */
  @supports (animation-timeline:scroll()){.admin-ui .sidebar.is-open .sidebar__nav::after{animation:nav-more linear both,nav-rest .8s linear both;animation-timeline:scroll(nearest block),auto;animation-range:calc(100% - 36px) 100%,normal}}
  @keyframes nav-rest{0%,85%{visibility:hidden}}
  /* Plaque « Haut de page » : elle se balance puis se pose, comme accrochée à un clou */
  .to-top{transform:translateY(16px) rotate(-9deg);transform-origin:50% -70%}
  .to-top.is-shown{transform:none;transition:opacity .3s,visibility 0s,transform .9s cubic-bezier(.3,1.7,.5,1),translate .35s var(--ease)}
  .to-top-dial svg{transition:transform .5s var(--ease)}
  .to-top:is(:hover,:focus-visible) .to-top-dial svg:first-child{transform:translateY(-170%)}
  .to-top:is(:hover,:focus-visible) .to-top-dial svg+svg{transform:none}
  /* Reflet du laiton qui balaie la plaque au survol */
  .to-top::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 38%,rgba(247,233,195,.2) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;pointer-events:none}
  .to-top:is(:hover,:focus-visible)::after{background-position:-30% 0;transition:background-position 1s var(--ease)}
}
/* Contraste élevé (Windows) : le système efface fonds et ombres. Les contours des boutons, filtres et cartes (des ombres)
   sont redessinés aux couleurs du système ; la rubrique ouverte, le filtre actif et l'onglet ouvert prennent la couleur
   de sélection ; le logo blanc garde sa plaque de nuit (sinon blanc sur le fond du système). */
@media (forced-colors:active){
  .btn,.chip,.nav-search,input[type=file]::file-selector-button{border:1px solid ButtonText}
  .btn[disabled]{border-color:GrayText}
  select{appearance:auto;background-image:none}
  .admin-ui :is(.panel,.kpi,.kpis,.callout,.flash,.badge,.document-flow,.settings-workspace,.dash-clear,.auth__box,.bulkbar){border:1px solid CanvasText}
  .admin-ui .sidebar{border-right:1px solid CanvasText}
  .admin-ui .sidebar__nav{scroll-padding-bottom:0}
  .admin-ui .sidebar__nav::after{display:none}
  .to-top{background:Canvas;border:1px solid CanvasText}
  /* Graphique du tableau de bord : les barres sont des fonds, que le système efface ; le mois en cours en couleur de sélection */
  .bars__bar{forced-color-adjust:none;background:CanvasText}
  .bars__col.is-current .bars__bar{background:Highlight;box-shadow:none}
  .admin-ui .panel.advanced-fields>summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/10px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 10px no-repeat}
  .bars__data>summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/10px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 10px no-repeat}
  .admin-ui :is(.sidebar,.topbar) .crm-brand__logo{forced-color-adjust:none;background-color:#121212;border-radius:4px;box-shadow:0 0 0 4px #121212}
  .admin-ui .nav a[aria-current=page],.chip[aria-current=true]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .admin-ui .nav a[aria-current=page] .count{forced-color-adjust:none;background:HighlightText;color:Highlight}
  .admin-ui .nav a[aria-current=page]:focus-visible,.chip[aria-current=true]:focus-visible{outline-color:CanvasText}
  /* L'onglet ouvert : un trait sous le nom (le surligneur passait sous le fond que le système peint derrière le texte) */
  .tabs{border-bottom:1px solid CanvasText}
  .tabs a[aria-current=page]::after{forced-color-adjust:none;z-index:0;left:0;right:0;bottom:6px;height:3px;border-radius:0;background:CanvasText}
  .track li::before{forced-color-adjust:none;background:GrayText!important;box-shadow:none}
  .track li.is-done::before,.track--online li::before{background:CanvasText!important}
  .track li.is-current::before{background:linear-gradient(90deg,CanvasText 0 var(--fill,50%),Highlight var(--fill,50%))!important}
  .track.track--paused li::before,.track.track--paused li.is-done::before,.track.track--paused li.is-current::before{background:GrayText!important}
}
#justificatifs .row-title{overflow-wrap:anywhere}
#justificatifs .actions>a{display:inline-flex;align-items:center;gap:4px}
.admin-ui .search-inline{position:relative;flex:1 1 auto;min-width:0}
.admin-ui .filters .search-inline input{width:100%;min-width:0}
.admin-ui .filters .search:has(.search-inline){flex:0 1 560px}
.search-suggestions{position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;min-width:0;max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:0 12px 28px rgba(18,18,18,.12)}
.search-suggestions__status{margin:0;padding:12px;font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.search-suggestions__item{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-top:1px solid var(--line);text-decoration:none;overflow-wrap:anywhere}
.search-suggestions__item strong{font-size:var(--fs-base);font-weight:600;line-height:1.4}
.search-suggestions__item span{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.search-suggestions__item:hover,.search-suggestions__item[aria-selected=true]{background:var(--surface-2)}
@media(max-width:720px){.admin-ui .filters .search:has(.search-inline){flex-basis:100%}.search-suggestions{max-height:280px}}
@media(forced-colors:active){.search-suggestions{border-color:CanvasText;box-shadow:none}.search-suggestions__item[aria-selected=true]{forced-color-adjust:none;background:Highlight;color:HighlightText}.search-suggestions__item[aria-selected=true] span{color:HighlightText}}

/* Menus du compte et des applications (comme Google, sans gestion de plusieurs comptes) */
.admin-ui .sidebar__menus{display:flex;align-items:center;gap:6px}
.admin-ui .sidebar__identity{flex:1;border:0;border-radius:var(--r);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.admin-ui .sidebar__identity:hover,.admin-ui .sidebar__identity:focus-visible{background:var(--night-card)}
.admin-ui .sidebar__apps,.topbar__icon{display:grid;place-items:center;flex:none;width:var(--control);height:var(--control);padding:0;border:0;border-radius:50%;background:transparent;color:var(--night-soft);cursor:pointer}
.admin-ui .sidebar__apps:hover,.admin-ui .sidebar__apps:focus-visible,.topbar__icon:hover,.topbar__icon:focus-visible{background:var(--night-card);color:var(--night-text)}
.topbar__menus{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--night-card);box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-text);font-size:12px;font-weight:600}
.menu-avatar--big{width:64px;height:64px;font:600 24px/1 var(--f-disp);background:var(--ink);color:var(--marker);box-shadow:none}
.menu-pop{position:fixed;inset:auto auto 84px 12px;margin:0;padding:12px;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-pop)}
.menu-pop::backdrop{background:transparent}
.menu-pop--apps{width:300px}
.menu-pop--account{width:min(320px,calc(100vw - 24px))}
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0;padding:0;list-style:none}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;border-radius:var(--r-lg);color:var(--ink);font-size:var(--fs-sm);text-align:center;text-decoration:none}
.app-tile:hover,.app-tile:focus-visible{background:var(--card)}
.app-tile.is-current{background:var(--band)}
.app-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ink);color:var(--marker)}
.menu-pop__close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--soft);cursor:pointer}
.menu-pop__close:hover{background:var(--band)}
.account-card{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:8px;padding:18px 8px 14px;border-radius:18px;background:var(--card);text-align:center}
.account-card strong{margin-top:6px;font:600 var(--fs-lg)/1.2 var(--f-disp)}
.account-card small{color:var(--muted);font-size:var(--fs-sm)}
.menu-pop form{margin:0}
.menu-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);font:500 var(--fs-md)/1.2 var(--f-body);text-align:left;text-decoration:none;cursor:pointer}
.menu-row:hover,.menu-row:focus-visible{background:var(--card)}
.theme-switch{margin:0 0 8px}
.theme-switch__title{margin:0;padding:0 12px 6px;color:var(--muted);font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.theme-switch__options{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:999px;background:var(--card)}
.theme-switch button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:var(--soft);font:500 var(--fs-sm)/1.2 var(--f-body);cursor:pointer}
.theme-switch button:hover{color:var(--ink)}
.theme-switch button[aria-pressed=true]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 0 0 1.5px var(--ink)}
@media (forced-colors:active){.theme-switch button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-2px}}
@media (max-width:960px){.menu-pop{inset:64px 12px auto auto}}