/* Espace client — base des composants, chargée avant portal.css par views/layouts/portal.php et la page d'erreur de
   l'espace client (views/partials/error.php), et par eux seuls.
   Séparée de l'administration le 27/09/2026 (charte, § 11) : le CRM a sa propre feuille (admin.css), aucune n'est
   commune ; modifier celle-ci ne peut pas toucher l'administration. Le design E′ vit dans portal.css.
   Aucun style inline (CSP style-src 'self').
   Sommaire : 1 jetons · 2 base · 3 contrôles · 4 composants · 5 structure · 6 écrans · 7 espace client · 8 petits
   écrans · 9 support */

/* 1 ─ Jetons ------------------------------------------------------------ */
/* Jetons d'origine des composants : portal.css les redéfinit tous (valeurs E′), déclarée après sur :root */
:root{
  --ink:#0d1b3e;--text:#34435f;--muted:#5f6d88;
  --bg:#f4f6fa;--surface:#fff;--surface-2:#f7f9fc;--line:#e2e7f0;--line-strong:#c9d2e1;
  --blue:#2a66de;--blue-hover:#1f55c2;--blue-ink:#1b4db3;--blue-soft:#e8f0ff;
  --green:#17756f;--green-soft:#e1f2f0;
  --amber:#87570a;--amber-soft:#fbf0d9;
  --red:#b83232;--red-soft:#fbe7e7;--alert:#c93434;
  --violet:#5140b8;--violet-soft:#eeebfc;
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
  --control:36px;--control-sm:30px;
  --r-sm:8px;--r:10px;--r-lg:14px;
  --shadow:0 1px 2px rgba(13,27,62,.05);
  --shadow-pop:0 8px 30px rgba(13,27,62,.12);
  --focus:0 0 0 3px rgba(42,102,222,.35);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}

/* 2 ─ Base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-md);font-weight:650}
h3{font-size:var(--fs-base);font-weight:650}
p{margin:0 0 .75em}
a{color:var(--blue-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue)}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
code,.mono{font-family:var(--mono);font-size:.9em}
.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{font-size:.62em;vertical-align:.22em}
/* Surfaces dessinées par le navigateur : elles appartiennent aussi au thème. */
::selection{background:var(--blue-soft);color:var(--ink)}
html{scrollbar-color:var(--line-strong) transparent}
input,textarea{caret-color:var(--blue)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.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}
/* Champ-piège : l'inverse de .sr-only — invisible à l'œil comme au lecteur d'écran, mais bien posté.
   Sorti de l'écran plutôt que display:none, que les robots un peu sérieux savent repérer et ignorer. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.panel,.field,.check{position:relative}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--surface);padding:8px 14px;border-radius:var(--r);z-index:100}
.skip:focus{left:8px}
[hidden]{display:none!important}
:focus-visible{outline:none;box-shadow:var(--focus)}
.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 ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control);padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-base);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--surface-2);border-color:var(--muted);color:var(--ink)}
/* Le remplissage du bouton principal a son propre jeton (--blue-solid), à défaut --blue */
.btn--primary{background:var(--blue-solid,var(--blue));border-color:var(--blue-solid,var(--blue));color:#fff}
.btn--primary:hover{background:var(--blue-solid-hover,var(--blue-hover));border-color:var(--blue-solid-hover,var(--blue-hover));color:#fff}
.btn--ghost{background:transparent;border-color:transparent;color:var(--text)}
.btn--ghost:hover{background:var(--surface-2);border-color:transparent}
.btn--danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,var(--line))}
.btn--danger:hover{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.btn--ghost.btn--danger{border-color:transparent}
.btn--sm{height:var(--control-sm);padding:0 12px;font-size:var(--fs-sm)}
.btn--icon{padding:0;width:var(--control-sm);justify-content:center}
.btn--icon .icon{margin:0}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--blue-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn--danger{color:var(--red)}
.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:var(--control);padding:0 12px;border:1px solid var(--field-line,var(--line-strong));border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-base);transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:88px;padding:9px 12px;line-height:1.5;resize:vertical}
select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 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,textarea:focus:not([readonly]){--field-line:var(--blue);box-shadow:var(--focus)}
input:focus,select:focus,textarea:focus{outline:none}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input[type=file]{font:inherit;font-size:var(--fs-sm);color:var(--text)}
input[type=file]::file-selector-button{height:var(--control-sm);margin-right:10px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
input[disabled],select[disabled],textarea[disabled]{opacity:.6}
.actions input,.actions select{width:auto}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.field>label .muted{font-weight:500}
.hint{font-size:var(--fs-xs);color:var(--muted);margin:0;line-height:1.45}
.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(--blue);flex:none}
.check>span{flex:1;min-width:0}
.check strong{color:var(--ink);font-weight:600}
.checks{display:flex;gap:8px 20px;flex-wrap:wrap}
.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}
/* 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{height:56px!important;font-size:26px!important;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.panel{container-type:inline-size}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.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 (min-width:1150px){.form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}.span-2{grid-column:auto}}
.form-actions{display:flex;gap:10px;justify-content:space-between;align-items:center;padding-top:20px;margin-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.form-actions>:only-child{margin-left:auto}

/* 4 ─ Composants --------------------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.panel__head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel__head h2{font-size:var(--fs-md)}
.panel__head .hint{margin-top:2px}
.panel__head>a.small{font-weight:600;text-decoration:none}
.panel__body{padding:20px}
.panel__body+.panel__body{border-top:1px solid var(--line)}
.stack>.panel+.panel,.main>.panel+.panel,.main>form.panel+.panel{margin-top:16px}
.empty{padding:32px 20px;text-align:center;color:var(--muted)}
.empty .btn{margin-top:12px}

.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);vertical-align:middle}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--info{background:var(--blue-soft);color:var(--blue-ink);border-color:transparent}
.badge--progress{background:var(--violet-soft);color:var(--violet);border-color:transparent}
.badge--success{background:var(--green-soft);color:var(--green);border-color:transparent}
.badge--warning{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.badge--danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.badge--neutral{background:var(--surface-2);color:var(--text)}

.flash{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--r);margin:0 0 20px;border:1px solid transparent}
/* L'accusé de réception d'une action est le seul moment animé : il se pose, il ne clignote pas.
   Déclaré sous « no-preference » pour que l'état par défaut du message reste visible. */
@media (prefers-reduced-motion:no-preference){.flash{animation:flash-in .32s cubic-bezier(.16,1,.3,1) both}}
@keyframes flash-in{from{opacity:0;transform:translateY(-6px)}}
.flash--success{background:var(--green-soft);color:var(--green)}
.flash--error{background:var(--red-soft);color:var(--red)}
.flash--info{background:var(--blue-soft);color:var(--blue-ink)}
.flash--warning{background:var(--amber-soft);color:var(--amber)}
.flash strong{color:inherit}
table.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:var(--fs-xs);font-weight:600;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--surface-2)}
.table th.right,.table td.right{text-align:right}
.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}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip small{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.chip__dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--alert)}
.chip[aria-current=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip[aria-current=true] small{color:inherit;opacity:.75}

.tabs{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--line)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;text-decoration:none;color:var(--muted);font-weight:600;white-space:nowrap;flex:none}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
.tabs small{font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:1px 7px}

.track{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0;padding:0}
.track li{position:relative;padding-top:14px;font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.track li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:3px;background:var(--line)}
.track li.is-done::before{background:var(--blue)}
.track li.is-current::before{background:linear-gradient(90deg,var(--blue) 0 var(--fill,50%),var(--line) var(--fill,50%))}
.track li.is-current{color:var(--ink);font-weight:600}
.track li.is-done{color:var(--text)}
.track--online li::before{background:var(--green)!important}
.track--paused li::before{background:repeating-linear-gradient(135deg,var(--line) 0 6px,var(--line-strong) 6px 12px)!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:6px}

.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(--blue)}
.timeline .when{font-size:var(--fs-xs);color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.timeline .what{color:var(--ink)}
.timeline .body{white-space:pre-line;margin-top:2px}
.secret{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r);font-family:var(--mono);color:var(--ink);overflow-wrap:anywhere}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;list-style:none;padding:0;margin:0}
.codes li{padding:8px;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--mono);color:var(--ink)}
.hint code,.secret span{overflow-wrap:anywhere;word-break:break-all}
details.more summary{cursor:pointer;color:var(--blue-ink);font-weight:600}
details.more[open] summary{margin-bottom:12px}

/* 5 ─ Structure ---------------------------------------------------------- */

.crumbs{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue-ink);text-decoration:underline}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--muted);font-size:var(--fs-sm)}
.search{display:flex;gap:8px;margin-left:auto}
.search input{width:clamp(220px,22vw,340px)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.kpi{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);text-decoration:none;color:inherit}
a.kpi:hover{border-color:var(--line-strong)}
.kpi__label{font-size:var(--fs-sm);color:var(--muted);font-weight:500}
.kpi__value{font-size:var(--fs-2xl);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.kpi__note{font-size:var(--fs-sm);color:var(--muted)}
.kpi__delta{font-weight:600}
.kpi__delta--up{color:var(--green)}.kpi__delta--down{color:var(--red)}
.grid-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,400px);gap:16px;align-items:start}
.grid-main+.panel{margin-top:16px}

/* 6 ─ Écrans ------------------------------------------------------------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

.chart{width:100%;height:auto;display:block}
.chart .axis{fill:var(--muted);font-size:11px;font-family:var(--font)}
.chart .value{fill:var(--ink);font-size:11px;font-weight:600;font-family:var(--font)}
.chart .grid{stroke:var(--line);stroke-width:1}
.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(--line-strong)}
.chart .seg{fill:var(--blue)}
.chart .col.is-hover .seg{filter:brightness(1.12)}
.legend i.new{background:var(--green)}
.legend i.lost{background:var(--red)}
.legend i.amber{background:var(--amber)}
.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}

.thread{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.files a{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);text-decoration:none;color:var(--ink);max-width:280px}
.files img{width:40px;height:40px;object-fit:cover;border-radius:6px;background:var(--surface-2)}
.files span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.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)}

/* Connexion et erreurs */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 24px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--blue) 10%,transparent),transparent 38%),var(--bg)}
.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}
.error-page{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.error-page .code{font-size:64px;font-weight:800;color:var(--line-strong);letter-spacing:-.04em;line-height:1}
.error-page h1{margin:12px 0 8px;font-size:var(--fs-xl)}
.error-page p{color:var(--muted);max-width:48ch;margin:0 auto 20px}

/* 7 ─ Espace client ------------------------------------------------------ */
.portal{min-height:100vh;display:flex;flex-direction:column}
.portal-body{font-size:var(--fs-md)}
.portal-main{flex:1;width:100%;max-width:1384px;margin:0 auto;padding:38px clamp(20px,3vw,32px) 72px}
.hello{margin-bottom:28px}
.hello h1{font-size:32px}
.hello p{color:var(--muted);margin:8px 0 0;max-width:62ch}
.hello.row{align-items:flex-end;flex-wrap:wrap}
.todo{display:grid;gap:8px;margin-bottom:28px}
.todo a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:var(--r-lg);text-decoration:none;background:var(--blue-soft);color:var(--blue-ink);font-weight:600}
.todo a.is-due{background:var(--amber-soft);color:var(--amber)}
.todo a.is-late{background:var(--red-soft);color:var(--red)}
.todo a span:last-child{white-space:nowrap}
.project{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.project+.project{margin-top:16px}
.project.row{flex-wrap:wrap}
.project__head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap}
.project__head h2{font-size:var(--fs-lg)}
.project__head h2 a{color:inherit;text-decoration:none}
.project__head h2 a:hover{color:var(--blue-ink)}
.project h1{font-size:var(--fs-xl)}
.project__msg{margin-top:16px;padding:12px 16px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.project .actions{margin-top:18px}
.section-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:36px 0 12px}
.section-title h2{font-size:var(--fs-lg)}
.crumbs+.hello,.crumbs+.project{margin-top:6px}
.doc-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.doc-list li{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.doc-list li:last-child{border-bottom:0}
.doc-ico{width:40px;height:46px;flex:none;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em}
.doc-ico--invoice,.doc-ico--deposit_invoice{color:var(--blue-ink);background:var(--blue-soft);border-color:transparent}
.doc-ico--quote{color:var(--violet);background:var(--violet-soft);border-color:transparent}
.doc-ico--receipt{color:var(--green);background:var(--green-soft);border-color:transparent}
.doc-list .grow{flex:1;min-width:0}
.doc-list .grow a{color:var(--ink);font-weight:600;text-decoration:none}
.doc-list .grow a:hover{color:var(--blue-ink)}
.doc-list .grow small{display:block;color:var(--muted);font-size:var(--fs-sm)}
.doc-list .end{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.pay-box{display:grid;gap:6px;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.pay-box>strong{font-size:var(--fs-lg);color:var(--ink)}
.pay-methods{display:grid;gap:10px;margin:6px 0}
.pay-method{display:grid;gap:4px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2)}
.pay-method h3{font-size:var(--fs-md);margin-bottom:4px}
.pay-method .mono{color:var(--ink);font-size:var(--fs-md);letter-spacing:.03em}
.pay-method .actions{margin-top:6px}
.schedule{list-style:none;margin:0;padding:0}
.schedule li{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.schedule li:last-child{border-bottom:0}
.schedule time,.schedule__undated{color:var(--muted);font-variant-numeric:tabular-nums}
.schedule .late time{color:var(--red);font-weight:600}
.decision{padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.decision h2{margin-bottom:6px}
.proof{font-size:var(--fs-sm);color:var(--muted)}
.proof code{word-break:break-all}
/* Identifiants des services : mot de passe masqué, affiché à la demande (views/partials/secret.php ; la page Mes accès
   a son dessin dans portal.css) */
.pw{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;margin:0}
.pw__value{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}
/* Mes contrats, sans contrat : l'accompagnement présenté plutôt qu'une page vide */
.contracts-empty{display:grid;gap:20px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.contracts-empty__intro{display:flex;align-items:flex-start;gap:16px}
.contracts-empty__intro h2{margin:0 0 6px;font-size:1.25rem;letter-spacing:-.01em}
.contracts-empty__intro p{margin:0;max-width:720px;color:var(--muted);line-height:1.6}
.contracts-empty__icon{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--blue-soft);color:var(--blue-ink)}
.contracts-empty__icon .icon{width:24px;height:24px}
.contracts-empty__quote{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--blue);border-radius:var(--r-lg);background:var(--blue-soft);color:var(--ink);text-decoration:none;transition:transform .15s}
.contracts-empty__quote:hover{transform:translateY(-1px)}
.contracts-empty__quote small{color:var(--muted)}
.contracts-empty__go{display:inline-flex;align-items:center;gap:4px;color:var(--blue-ink);font-weight:650;white-space:nowrap}
.contracts-empty__offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.contracts-empty__offers li{display:grid;align-content:start;gap:8px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.contracts-empty__offers h3{margin:0;font-size:1rem}
.contracts-empty__offers p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.contracts-empty__offer-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface);color:var(--blue-ink)}
.contracts-empty__offer-icon .icon{width:18px;height:18px}
.contracts-empty__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
@media (max-width:760px){.contracts-empty__quote{flex-wrap:wrap}.contracts-empty__go{flex-basis:100%}.contracts-empty__offers{grid-template-columns:minmax(0,1fr)}.contracts-empty__intro{flex-direction:column}.contracts-empty__actions .btn{flex:1 1 200px;justify-content:center}}
/* Statistiques Google (espace client) */
.kpis.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats-note{margin:10px 0 0}
.shares__title{font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-transform:none;margin:0 0 10px}
.stats-grid .panel__body.stack>div+div{margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.kpis--3 .kpi__note{line-height:1.4}
.section-title p{margin:0}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stats-page{display:block;color:var(--ink);font-weight:500}
.stats-path{display:block;font-size:var(--fs-xs);overflow-wrap:anywhere}
.stats-empty h2{font-size:var(--fs-lg);margin-bottom:6px}
.stats-empty p{margin:0 0 14px;max-width:62ch}
.shares{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.shares li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.shares__label{font-size:var(--fs-sm);color:var(--text)}
.shares__pct{font-size:var(--fs-sm);font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.shares__bar{grid-column:1/-1;width:100%;height:6px;display:block}
.stats-pickers{display:none}
.picker{position:relative;min-width:0}
.picker__toggle{display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 12px 7px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.picker__toggle::-webkit-details-marker{display:none}
.picker__toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.picker[open] .picker__toggle{border-color:var(--blue)}
.picker__text{display:grid;gap:1px;min-width:0;flex:1}
.picker__label{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.picker__value{font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker__chev{flex:none;width:16px;height:16px;color:var(--muted);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.picker[open] .picker__chev{transform:rotate(180deg)}
.picker__menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:100%;max-width:calc(100vw - 32px);max-height:60vh;overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 32px rgba(13,27,62,.14)}
.picker:last-child:not(:first-child) .picker__menu{left:auto;right:0}
.picker__item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--r);color:var(--text);text-decoration:none;white-space:nowrap}
.picker__item:hover,.picker__item:focus-visible{background:var(--surface-2);color:var(--ink)}
.picker__item[aria-current]{color:var(--ink);font-weight:650}
.picker__item .icon{flex:none;width:16px;height:16px;color:var(--blue)}
@media (max-width:900px){.stats-wide{display:none}.stats-pickers{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px;margin:0 0 20px}.stats-pickers--single{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.kpis.kpis--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.stats-grid{grid-template-columns:minmax(0,1fr)}.section-title{flex-wrap:wrap}}
@media (max-width:420px){.kpis.kpis--3{grid-template-columns:minmax(0,1fr)}}

/* 8 ─ Petits écrans ------------------------------------------------------ */
@media (max-width:1180px){
  .grid-main{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .main{margin-left:0;padding:20px 16px 48px}
  .search{margin-left:0;width:100%}
  .search input{width:auto;flex:1}
}
@media (max-width:640px){
  h1{font-size:var(--fs-xl)}
  .hello h1{font-size:26px}
  .dl{grid-template-columns:minmax(0,1fr);gap:2px}.dl dd{margin-bottom:10px}
  .table th:nth-child(n+4),.table td:nth-child(n+4){display:none}
  .table td:first-child{min-width:150px}
  .table td.keep,.table th.keep{display:table-cell}
  .track li{font-size:0;padding-top:6px}
  .schedule li{grid-template-columns:minmax(0,1fr) auto}.schedule time{grid-column:1/-1}
  .auth{padding:20px 14px}
  .doc-list li{flex-wrap:wrap}.doc-list .end{width:100%;justify-content:flex-start;padding-left:54px}
  .doc-list li:not(:has(.doc-ico)) .end{padding-left:0}
  .project{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.actions,.btn{display:none!important}.main{margin:0}body{background:#fff}}

/* Réglages de gestion */
.settings{display:block}
/* 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;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(13,27,62,.3);transition:transform .15s}
.switch:checked{background:var(--blue)}
.switch:checked::after{transform:translateX(17px)}
.switch:focus-visible{outline:none;box-shadow:var(--focus)}
.switch:disabled{opacity:.5;cursor:default}
.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}
.is-off{opacity:.45}
.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}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
@container (max-width:640px){.option{grid-template-columns:minmax(0,1fr)}}

/* Échéancier des contrats ponctuels */
.installments{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.is-invalid{color:var(--red)!important}

/* 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(--blue-ink)}
.dl dt:has(>.icon){display:flex;align-items:center;gap:8px}
.dl dt .icon{color:var(--muted)}

/* 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}

/* Tableau de bord du quotidien */
.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.dash-block .list>li{padding:12px 20px}
.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}
.task{display:flex;gap:12px;align-items:flex-start;padding:12px 20px;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}

/* Domaines d'un site */
.domains{display:grid;gap:10px}
.table td input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}

/* État technique d'un site : une information par ligne, pastille de couleur seulement */
.tech{list-style:none;margin:0;padding:0}
.coverage{display:grid;gap:4px;border-bottom:1px solid var(--line)}
@media (max-width:640px){.project .actions .btn{white-space:normal;height:auto;min-height:var(--control);padding:8px 16px;text-align:center;line-height:1.3}}
.installments{padding:0;border:0;background:transparent}
/* Cible du lien d'évitement. Le focus vient bien du clavier, donc :focus-visible s'applique :
   il faut neutraliser le contour ET le halo, sinon « Aller au contenu » cercle toute la page. */
.main:focus,.main:focus-visible,.portal-main:focus,.portal-main:focus-visible{outline:none;box-shadow:none}
.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}
.tabs small.is-alert{background:var(--red-soft);color:var(--red)}
/* 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}}
.chip small.is-alert{color:var(--red)}
.chip[aria-current=true] small.is-alert{color:inherit}

/* 9 ─ Support ------------------------------------------------------------ */
.btn--lg{height:44px;padding:0 22px;font-size:var(--fs-md)}
.prose p{margin:0 0 .8em;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.nav-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:4px;padding:0 5px;border-radius:999px;background:var(--alert);color:#fff;font-size:11px;font-weight:700;line-height:1;vertical-align:1px}

/* Accueil */

/* Cartes et blocs communs */
.help-card{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.help-card>h2{font-size:var(--fs-lg);margin-bottom:10px}
.help-card>p{color:var(--muted)}
.help-card.row{flex-wrap:wrap}
.help-card.row p{margin:0}
.help-card--soft{background:var(--surface-2);box-shadow:none}
.help-card__icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--blue-soft);color:var(--blue-ink);margin-bottom:12px}
.help-card__icon .icon{width:21px;height:21px}
.help-facts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.help-facts li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);color:var(--muted)}
.help-facts li>.icon{width:17px;height:17px;margin-top:2px;color:var(--blue-ink)}
.help-facts span{display:grid;gap:1px;min-width:0;overflow-wrap:anywhere}
.help-facts strong{color:var(--ink);font-weight:600}
.help-tips{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-sm)}
.help-tips li{display:flex;gap:9px;align-items:center}
.help-tips li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--green)}
.help-tips li:has(.icon)::before{display:none}
.help-tips .icon{color:var(--amber);margin-left:-3px}
.help-empty{display:flex;align-items:center;gap:16px;padding:26px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted);background:var(--surface)}
.help-empty>.icon{width:30px;height:30px;flex:none;color:var(--blue-ink)}
.help-empty p{margin:0}
.help-empty strong{color:var(--ink)}
.help-empty--inline{padding:16px 18px}
.help-empty--inline .icon{width:20px;height:20px}
.help-notice{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:14px 18px;border-radius:var(--r-lg);background:var(--amber-soft);color:var(--ink)}
.help-notice>.icon{width:20px;height:20px;flex:none;color:var(--amber);margin-top:1px}
.help-notice p{margin:0}
.help-notice--info{background:var(--blue-soft)}.help-notice--info>.icon{color:var(--blue-ink)}
.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)}
.tag--danger{background:var(--red-soft);border-color:transparent;color:var(--red)}.tag--danger .icon{color:var(--red)}
.tag--warning{background:var(--amber-soft);border-color:transparent;color:var(--amber)}.tag--warning .icon{color:var(--amber)}

/* Surveillance */
.health{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:16px 18px;border-radius:var(--r-lg)}
.health--down{background:var(--red-soft);color:var(--ink)}
.health__icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--surface);color:var(--red)}
.health__icon .icon{width:20px;height:20px}
.health>div{flex:1;min-width:0}
.health strong{color:var(--red)}
.health p{margin:2px 0 0;font-size:var(--fs-sm)}
.health .btn{flex:none}
.health-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.health-list__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;padding:8px 0}
.health-list__item+.health-list__item{border-top:1px solid var(--line)}
.health-list__dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);grid-row:span 2}
.health-list__item--up .health-list__dot{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.health-list__item--down .health-list__dot{background:var(--red);box-shadow:0 0 0 4px var(--red-soft);animation:pulse 1.6s infinite}
.health-list__name{min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.health-list__name a{color:inherit;text-decoration:none}
.health-list__name a:hover{color:var(--blue-ink);text-decoration:underline}
.health-list__state{font-size:var(--fs-sm);color:var(--muted)}
.health-list__item--up .health-list__state{color:var(--green)}
.health-list__item--down .health-list__state{color:var(--red);font-weight:600}
.health-note{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:var(--fs-xs);color:var(--muted)}
.health-note .icon{width:14px;height:14px;color:var(--green)}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}

/* Centre d'aide */
.help-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;overflow:hidden;margin-bottom:22px;padding:clamp(26px,3.5vw,44px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(125deg,var(--surface) 20%,var(--blue-soft));box-shadow:var(--shadow)}
.help-hero::after{content:"";position:absolute;width:300px;height:300px;right:-140px;top:-190px;border:54px solid rgba(47,111,230,.09);border-radius:50%;pointer-events:none}
.help-hero h1{font-size:clamp(29px,3.2vw,42px);letter-spacing:-.035em}
.help-hero__text>p{max-width:60ch;margin:10px 0 0;color:var(--muted)}
.help-search{display:flex;gap:10px;margin-top:22px;max-width:640px}
.help-search .input-shell{flex:1}
.help-search input:not([type=checkbox]):not([type=radio]):not([type=file]){height:48px;border-radius:12px;font-size:var(--fs-md)}
.help-search .btn{height:48px;border-radius:12px}
.help-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,24vw,360px);gap:24px;align-items:start}
.help-layout__main{min-width:0}
.help-layout__main>section+section{margin-top:38px}
.help-layout__side{display:grid;gap:16px;position:sticky;top:96px}
.help-layout .section-title:first-child{margin-top:0}
.help-results{margin-bottom:30px}
.help-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.help-links a{display:flex;align-items:flex-start;gap:12px;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none}
.help-links a:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.help-links .icon{margin-top:3px;color:var(--blue-ink)}
.help-links span{display:grid;gap:2px}
.help-links small{color:var(--muted);font-weight:500}
.help-links--plain{grid-template-columns:minmax(0,1fr);gap:4px}
.help-links--plain a{padding:8px 0;border:0;background:none;font-size:var(--fs-sm)}
.help-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.help-action{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,border-color .15s,box-shadow .15s}
.help-action:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 40%,var(--line));box-shadow:var(--shadow-pop)}
.help-action__icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--blue-soft);color:var(--blue-ink)}
.help-action__icon .icon{width:19px;height:19px}
.help-action>span:last-child{display:grid;gap:3px}
.help-action strong{color:var(--ink);font-weight:650}
.help-action small{color:var(--muted);font-size:var(--fs-sm);line-height:1.4}
.help-action--urgent{grid-column:1/-1;border-color:color-mix(in srgb,var(--red) 30%,var(--line));background:linear-gradient(90deg,var(--red-soft),var(--surface) 70%)}
.help-action--urgent .help-action__icon{background:var(--surface);color:var(--red)}
.help-action--urgent:hover{border-color:var(--red)}

/* Liste des demandes */
.ticket-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticket-item a{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
/* Les états avant le survol : à spécificité égale, la dernière règle gagne — le survol doit rester visible. */
.ticket-item.is-unread a{border-color:color-mix(in srgb,var(--blue) 55%,var(--line))}
.ticket-item.is-waiting a{border-color:color-mix(in srgb,var(--amber) 60%,var(--line))}
.ticket-item a:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));box-shadow:var(--shadow-pop)}
.ticket-item.is-waiting a:hover{border-color:var(--amber)}
.ticket-item__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ticket-item__title{color:var(--ink);font-weight:650;font-size:var(--fs-md);min-width:0;overflow-wrap:anywhere}
.ticket-item.is-unread .ticket-item__title{font-weight:750}
.ticket-item__meta{font-size:var(--fs-sm);color:var(--muted)}
.ticket-item__urgent{color:var(--red);font-weight:600}
.ticket-item__excerpt{font-size:var(--fs-sm);color:var(--text);overflow-wrap:anywhere}
.ticket-item__excerpt strong{color:var(--ink);font-weight:600}
.ticket-item .tprogress{margin-top:6px}

/* Avancement */
.tprogress{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;counter-reset:step}
.tprogress li{position:relative;display:flex;align-items:center;gap:8px;padding-top:12px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);min-width:0}
.tprogress li::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:3px;background:var(--line)}
.tprogress li.is-done::before{background:var(--green)}
.tprogress li.is-current::before{background:linear-gradient(90deg,var(--blue) 0 55%,var(--line) 55%)}
.tprogress--waiting li.is-current::before{background:linear-gradient(90deg,var(--amber) 0 55%,var(--line) 55%)}
.tprogress__dot{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);font-size:11px}
.tprogress__dot .icon{width:12px;height:12px;stroke-width:2.6}
.tprogress li.is-done{color:var(--text)}
.tprogress li.is-done .tprogress__dot{background:var(--green);border-color:var(--green);color:#fff}
.tprogress li.is-current{color:var(--ink)}
.tprogress li.is-current .tprogress__dot{background:var(--blue-solid,var(--blue));border-color:var(--blue-solid,var(--blue));color:#fff}
.tprogress--waiting li.is-current .tprogress__dot{background:var(--amber);border-color:var(--amber)}
.tprogress__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tprogress--compact li{padding-top:9px}
.tprogress--compact li::before{height:4px}
.tprogress--compact .tprogress__dot{display:none}

/* FAQ */
.faq{display:grid;gap:22px}
.faq__group h3{margin:0 0 8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.faq__item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.faq__item+.faq__item{margin-top:8px}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;list-style:none;color:var(--ink);font-weight:600}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--blue-ink);font-size:18px;font-weight:500;line-height:1;transition:transform .2s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--blue-ink)}
.faq__answer{padding:0 18px 16px;color:var(--text)}
.faq__foot{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm)}

/* Nouvelle demande */
.ticket-form{display:grid;gap:18px}
.form-step{margin:0;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.form-step legend{float:left;width:100%;display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:0;color:var(--ink);font-size:var(--fs-lg);font-weight:650}
.form-step legend+*{clear:both}
.form-step__num{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--blue-solid,var(--blue));color:#fff;font-size:var(--fs-sm);font-weight:700}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.type-card{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.type-card:hover{border-color:var(--line-strong)}
.type-card input{position:absolute;opacity:0;pointer-events:none}
.type-card:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.type-card:has(input:focus-visible){box-shadow:var(--focus)}
.type-card__icon{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);color:var(--blue-ink)}
.type-card:has(input:checked) .type-card__icon{background:var(--blue-solid,var(--blue));color:#fff}
.type-card__text{display:grid;gap:2px}
.type-card__text strong{color:var(--ink);font-weight:650;font-size:var(--fs-base)}
.type-card__text small{color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.urgency{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.urgency__item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer}
.urgency__item input{margin-top:3px;accent-color:var(--blue);flex:none}
.urgency__item span{display:grid;gap:2px;flex:1;min-width:0}
.urgency__item strong{color:var(--ink);font-weight:650}
.urgency__item small{color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.urgency__item:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.urgency__item--high:has(input:checked){border-color:var(--amber);background:var(--amber-soft)}
.urgency__item--high input{accent-color:var(--amber)}
.urgency__item--urgent:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.urgency__item--urgent input{accent-color:var(--red)}
.urgency__note{display:flex;gap:8px;align-items:flex-start;margin-top:12px!important;padding:10px 12px;border-radius:var(--r);background:var(--red-soft);color:var(--ink);font-size:var(--fs-sm)}
.urgency__note .icon{color:var(--red);flex:none;margin-top:2px}
.tip{display:flex;gap:7px;align-items:flex-start;padding:8px 12px;border-radius:var(--r);background:var(--surface-2);color:var(--text);font-size:var(--fs-sm)}
.tip .icon{color:var(--amber);flex:none;margin-top:2px;width:14px;height:14px}
.suggest{padding:14px 16px;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line));border-radius:var(--r-lg);background:var(--blue-soft)}
.suggest__title{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--blue-ink);font-size:var(--fs-sm);font-weight:650}
.suggest__list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.suggest__list a{font-weight:600}
.ticket-form__submit{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:4px 2px}
.ticket-form__submit p{margin:0;display:flex;align-items:center;gap:6px}
.next-steps{list-style:none;margin:0;padding:0;counter-reset:next}
.next-steps li{position:relative;display:grid;gap:2px;padding:0 0 16px 38px;counter-increment:next;font-size:var(--fs-sm);color:var(--muted)}
.next-steps li::before{content:counter(next);position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);color:var(--blue-ink);font-weight:700;font-size:var(--fs-xs)}
.next-steps li:not(:last-child)::after{content:"";position:absolute;left:12.5px;top:30px;bottom:4px;width:1px;background:var(--line)}
.next-steps li:last-child{padding-bottom:0}
.next-steps strong{color:var(--ink);font-weight:600}

/* 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;text-overflow:ellipsis;white-space:nowrap}
.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}

/* Conversation */
.ticket-head{margin-bottom:18px}
.ticket-head h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;overflow-wrap:anywhere}
.ticket-head .meta{margin-top:10px}
.ticket-status{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:18px 32px;align-items:center;margin-bottom:22px;padding:20px 22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.ticket-status__main{display:flex;gap:14px;align-items:flex-start}
.ticket-status__icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--blue-soft);color:var(--blue-ink)}
.ticket-status__icon .icon{width:22px;height:22px}
.ticket-status h2{font-size:var(--fs-lg)}
.ticket-status p{margin:4px 0 0;color:var(--text)}
.ticket-status .btn{margin-top:12px}
.ticket-status--warning{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));background:linear-gradient(90deg,var(--amber-soft),var(--surface) 75%)}
.ticket-status--warning .ticket-status__icon{background:var(--surface);color:var(--amber)}
.ticket-status--success{border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:linear-gradient(90deg,var(--green-soft),var(--surface) 75%)}
.ticket-status--success .ticket-status__icon{background:var(--surface);color:var(--green)}
.ticket-status--progress .ticket-status__icon{background:var(--violet-soft);color:var(--violet)}
.ticket-status--neutral .ticket-status__icon{background:var(--surface-2);color:var(--muted)}
.conv{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.conv__day{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.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;color:var(--muted);font-size:var(--fs-sm);text-align:center}
.conv__event .icon{width:14px;height:14px;color:var(--green)}
.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{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font-size:var(--fs-xs);font-weight:700}
.conv__avatar--brand{background:var(--surface) url("../brand/favicon.png") center/20px no-repeat}
.conv__bubble{min-width:0;padding:10px 14px 8px;border:1px solid var(--line);border-radius:18px 18px 18px 6px;background:var(--surface)}
.conv__msg--mine .conv__bubble{border-radius:18px 18px 6px 18px;background:var(--blue-soft);border-color:transparent}
.conv__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:2px;font-size:var(--fs-xs);color:var(--muted)}
.conv__meta strong{color:var(--ink);font-weight:650}
.conv__body{white-space:pre-line;color:var(--ink);overflow-wrap:anywhere;line-height:1.55}
.conv__foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:4px;color:var(--muted);font-size:var(--fs-xs);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;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:var(--fs-sm);text-decoration:none}
.attach__item:hover{border-color:var(--blue)}
.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;border-radius:6px;background:var(--red-soft);color:var(--red);font-size:11px;font-weight:800}
.attach__name{min-width:0;display:grid;overflow:hidden}
.attach__name,.attach__name small{text-overflow:ellipsis;white-space:nowrap}
.attach__name small{color:var(--muted);font-size:var(--fs-xs)}
/* 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;border-radius:12px;background:var(--surface-2);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}
.attach__ext--mp4,.attach__ext--mov,.attach__ext--webm{background:var(--blue-soft);color:var(--blue-ink)}
.attach__ext--docx,.attach__ext--odt,.attach__ext--txt{background:var(--blue-soft);color:var(--blue-ink)}
.attach__ext--xlsx,.attach__ext--ods,.attach__ext--csv{background:var(--green-soft);color:var(--green)}
.attach__ext--pptx,.attach__ext--zip{background:var(--amber-soft);color:var(--amber)}
.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__bubble{opacity:.7}
.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;padding:10px 14px;border-radius:var(--r);background:var(--amber-soft);color:var(--amber);font-size:var(--fs-sm);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;width:32px;height:32px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.conv__tool:hover,.conv__tool[aria-expanded=true]{background:var(--surface-2);color:var(--ink)}
.conv__tool .icon{width:16px;height:16px}
@media (hover:none){.conv__tools{opacity:.6}}
/* 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;height:24px;padding:0 7px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgb(0 0 0/.12)}
.reaction span{font-size:var(--fs-xs);font-weight:650;color:var(--muted)}
button.reaction{cursor:pointer;transition:border-color .15s,background-color .15s}
button.reaction:hover{border-color:var(--line-strong,var(--line))}
.reaction.is-mine{border-color:color-mix(in srgb,var(--blue) 55%,transparent);background:var(--blue-soft)}
.reaction.is-mine span{color:var(--blue-ink)}
/* Au doigt : cibles plus grandes pour les outils et les pastilles */
@media (pointer:coarse){.conv__tool{width:40px;height:40px}.reaction{height:30px;padding:0 10px}.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:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-pop);animation:emoji-pop .14s cubic-bezier(.2,.9,.3,1.2)}
.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;transition:transform .12s,background-color .12s}
.emoji-picker--grid button{border-radius:10px}
.emoji-picker button:hover,.emoji-picker button:focus-visible{background:var(--surface-2);transform:scale(1.15)}
.emoji-picker button.is-current{background:var(--blue-soft)}
@keyframes emoji-pop{from{opacity:0;transform:translateY(4px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.emoji-picker{animation:none}.emoji-picker button:hover,.emoji-picker button:focus-visible{transform:none}}
/* Message supprimé : la place reste, le contenu non */
.conv__msg--deleted .conv__bubble{background:transparent;border:1px dashed var(--line)}
.conv__deleted{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);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;color:inherit;font:inherit;font-style:italic;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;border-left:2px solid var(--line);white-space:pre-line;overflow-wrap:anywhere}
.conv__versions-when{display:block;font-size:var(--fs-xs);font-weight:600}
/* 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%;min-height:72px;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}
.reply-form__tools{display:flex;align-items:center;gap:8px}
.conv__quote{display:grid;gap:2px;margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--blue);border-radius:6px;background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--text);font-size:var(--fs-sm);text-decoration:none}
.conv__quote strong{color:var(--ink);font-size:var(--fs-xs)}
.conv__quote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv__quote:hover{background:var(--surface-2)}
.conv__msg.is-highlight .conv__bubble{animation:conv-highlight 1.6s ease}
@keyframes conv-highlight{0%,30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 45%,transparent)}100%{box-shadow:none}}
.reply-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-left:3px solid var(--blue);border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-sm);color:var(--text)}
.reply-chip[hidden]{display:none}
.reply-chip>.icon{flex:none;width:16px;height:16px;color:var(--blue-ink)}
.reply-chip>span{display:grid;min-width:0;flex:1}
.reply-chip strong{color:var(--ink);font-size:var(--fs-xs)}
.reply-chip span span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply-chip button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer}
.reply-chip button:hover{background:var(--surface);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{opacity:.7;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}
/* Rendez-vous : créneaux en pastilles, cartes, liste du jour */
/* Choix d'un créneau : les heures en pastilles (.slot, .slot-radio) de la rangée de jours, dessinée dans portal.css */
.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:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,border-color .15s}
.slot:hover{border-color:var(--blue)}
.slot-radio:focus-visible+.slot{outline:2px solid var(--blue);outline-offset:2px}
.slot-radio:checked+.slot{background:var(--blue-solid,var(--blue));border-color:var(--blue-solid,var(--blue));color:#fff}
/* 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(6,11,24,.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}
.modal__text{margin:0;color:var(--muted);line-height:1.55}
.modal__text strong{color:var(--ink)}
/* Espace client : « Ajouter à mon agenda » (la page Rendez-vous est dessinée par portal.css) */
.rdv-add{position:relative}
.rdv-add>summary{list-style:none}
.rdv-add>summary::-webkit-details-marker,.rdv-add>summary::after{display:none}
.rdv-add__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-pop)}
.rdv-add__menu a{padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:var(--fs-sm)}
.rdv-add__menu a:hover{background:var(--surface-2)}
@media (max-width:640px){.rdv-add__menu{left:0;right:auto}}
.hint code{font-size:.95em;padding:1px 5px;border-radius:4px;background:var(--surface-2)}
.conv__action{margin-top:10px}
@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:hover{color:var(--ink)}
.thread-sound__off,.thread-sound[aria-pressed=false] .thread-sound__on{display:none}
.thread-sound[aria-pressed=false] .thread-sound__off{display:block}
.ticket-head__title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.reply-form{display:grid;gap:14px;scroll-margin-top:100px}
.reply-form__actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rating-form{display:grid;gap:12px;scroll-margin-top:100px}
.rating-form h2{margin:0}
.rating-form>p{margin:0}
.stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin:0;padding:0;border:0}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{cursor:pointer;color:var(--line-strong);transition:transform .12s,color .12s}
.stars label .icon{width:34px;height:34px;stroke-width:1.4}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:#f2b01e}
.stars label:hover .icon,.stars label:hover~label .icon,.stars input:checked~label .icon{fill:currentColor}
.stars label:hover{transform:scale(1.1)}
.stars input:focus-visible+label{box-shadow:var(--focus);border-radius:6px}
.rating-done{display:flex;align-items:center;gap:14px;flex-wrap:wrap;scroll-margin-top:100px}
.rating-done p{margin:0}
.rating-done__stars{display:inline-flex;gap:2px;color:var(--line-strong)}
.rating-done__stars .is-on{color:#f2b01e}
.rating-done__stars .is-on .icon{fill:currentColor}
.closed-actions h2{margin-bottom:12px}
.closed-actions details{margin-top:16px}
.dl--compact{gap:8px 14px;font-size:var(--fs-sm)}
.ticket-aside{position:sticky;top:96px}
.help-article h1{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;margin-bottom:18px}
.help-article .prose{font-size:var(--fs-md);color:var(--text)}
.help-article__topic{margin:0 0 12px}
.help-article__vote{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.help-article__vote p{margin:0;display:flex;align-items:center;gap:8px}
.help-article__vote .icon{color:var(--red)}

@media (max-width:1100px){
  .help-layout{grid-template-columns:minmax(0,1fr)}
  .help-layout__side,.ticket-aside{position:static}
  .help-hero{grid-template-columns:minmax(0,1fr)}
  .ticket-status{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .urgency{grid-template-columns:minmax(0,1fr)}
  .help-search{flex-direction:column}
  /* Alerte d'incident : le bouton passe à la ligne, sinon le texte s'écrase en colonne d'un mot de large. */
  .health{flex-wrap:wrap;align-items:flex-start}
  .health>div{flex:1 1 160px}
  .health .btn{flex:1 0 100%;justify-content:center}
  .conv__msg{max-width:100%}
  .conv__avatar{display:none}
  .form-step{padding:18px}
  .ticket-form__submit .actions{width:100%}
  .ticket-form__submit .btn--primary{flex:1}
  .ticket-item__head{flex-direction:column}
}
.help-live{list-style:none;position:relative;z-index:2;max-width:640px;margin:8px 0 0;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-pop)}
.help-live a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-weight:600;text-decoration:none}
.help-live a:hover,.help-live a:focus-visible{background:var(--blue-soft);color:var(--blue-ink)}
.help-live__more{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.help-live__more a{color:var(--blue-ink);font-weight:600;font-size:var(--fs-sm)}

/* Volet dépliable : déclencheur discret avec chevron, contenu encadré */
.disclosure>summary{display:inline-flex;align-items:center;gap:8px;padding:6px 2px;list-style:none;cursor:pointer;color:var(--text);font-size:var(--fs-sm);font-weight:600;border-radius:var(--r-sm)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::after{content:"";width:7px;height:7px;margin-left:2px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.disclosure[open]>summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.disclosure>summary:hover{color:var(--ink)}
.disclosure>summary .icon{color:var(--muted)}
.disclosure>summary small{color:var(--muted);font-weight:500}
.disclosure>summary small::before{content:"· ";}
.disclosure[open]>summary{margin-bottom:12px}
.contract-end{margin-top:20px;padding-top:12px;border-top:1px solid var(--line)}
.contract-end>summary:hover,.contract-end[open]>summary{color:var(--red)}
.contract-end>summary:hover .icon,.contract-end[open]>summary .icon{color:var(--red)}
.contract-end__form{padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.contract-end__when{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--text)}
.contract-end__when .icon{flex:none;margin-top:3px;color:var(--blue-ink)}
.contract-end__when strong{color:var(--ink)}
.end-choice{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.end-choice legend{margin-bottom:10px;padding:0}
.end-choice__item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);cursor:pointer}
.end-choice__item input{margin-top:3px;flex:none;accent-color:var(--blue)}
.end-choice__item span{display:grid;gap:3px;flex:1;min-width:0}
.end-choice__item strong{color:var(--ink);font-weight:650}
.end-choice__item small{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.end-choice__item small b{color:var(--ink)}
.end-choice__item:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.end-choice__item--early input{accent-color:var(--red)}
.end-choice__item--early:has(input:checked){border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--red-soft)}

/* Devis : bon pour accord depuis l'espace client */
.quote-accept{padding:22px;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);scroll-margin-top:100px}
.quote-accept__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.quote-accept__head .help-card__icon{margin:0}
.quote-accept__head h2{font-size:var(--fs-lg)}
.quote-accept__head p{margin:4px 0 0;color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2)}
.seg__item{position:relative;cursor:pointer}
.seg__item input{position:absolute;opacity:0;pointer-events:none}
.seg__item span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;font-weight:600;font-size:var(--fs-sm);color:var(--text)}
.seg__item input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(13,27,62,.14)}
.seg__item input:focus-visible+span{box-shadow:var(--focus)}
.quote-accept__form:has(input[name=method][value=online]:checked) [data-method-panel=scan],
.quote-accept__form:has(input[name=method][value=scan]:checked) [data-method-panel=online]{display:none}
.quote-accept__terms{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.quote-accept__terms:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.quote-accept__withdrawal{display:grid;gap:12px;padding:14px 16px;border-radius:var(--r-lg);background:var(--blue-soft)}
.quote-accept__withdrawal p{display:flex;gap:10px;margin:0;color:var(--ink)}
.quote-accept__withdrawal p .icon{flex:none;margin-top:3px;color:var(--blue-ink)}
.quote-accept__decline{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.decision--ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:linear-gradient(90deg,var(--green-soft),var(--surface) 70%)}
.decision--ok h2{color:var(--green)}
.decision .dl{margin-top:10px}
.decision .disclosure{margin-top:14px}
.sigpad__canvas{display:block;width:100%;height:180px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:#fff;cursor:crosshair;touch-action:none}
.sigpad__foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.quote-options{display:grid;gap:8px;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg)}
.quote-options legend{padding:0 6px;font-weight:600;color:var(--ink)}
.quote-options .hint{margin:0}
.quote-options__item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.quote-options__item:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.quote-options__item input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue);flex:none}
.quote-options__text{display:grid;gap:2px;flex:1;min-width:0}
.quote-options__text small{color:var(--muted);font-size:var(--fs-xs);line-height:1.45}
.quote-options__price{flex:none;font-weight:650;color:var(--ink);white-space:nowrap;text-align:right}
.quote-options__price small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--muted)}
.quote-options__total{margin:4px 0 0;text-align:right;color:var(--muted)}
.quote-options__total strong{color:var(--ink);font-size:var(--fs-md)}
/* Écran étroit : le prix passe sous l'intitulé au lieu de l'écraser en colonne d'un mot de large. */
@media (max-width:760px){
  .quote-options__item{flex-wrap:wrap}
  .quote-options__text{flex:1 1 140px}
  .quote-options__price{flex:1 0 100%;text-align:left;padding-left:30px}
  .quote-options__price small{display:inline;margin-left:6px}
}
.pay-card__glyph{width:20px;height:20px;color:var(--blue-ink)}
.pay-card__mark{width:18px;height:18px;fill:#003087}
.pay-card__word{font-size:12px;font-weight:800;letter-spacing:-.04em;text-transform:uppercase;color:#1d1c1c}

/* Tableau de bord : chiffres clés, graphique, agenda */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-bottom:16px}
.kpi{display:grid;align-content:start;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s}
.kpi:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.kpi__label{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.kpi__value{font-size:26px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi__delta{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.kpi__delta.is-up{color:var(--green)}
.kpi__delta.is-down{color:var(--red)}
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:190px;align-items:end}
.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 .badge{flex:none}
.dash{margin-bottom:16px}
/* Tableau de bord : les blocs s'empilent en colonnes (1 à 3 selon la largeur), sans trou sous les blocs courts */