/* ═══════════════════════════════════════════════════════════════
   SUPPORT RED.T — même système que le site Tetragon EMS
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#F1F3F6;--surface:#FFFFFF;--surface-2:#E9ECF1;
  --ink:#10151B;--ink-2:#39434F;--muted:#5C6979;
  --line:#D9DEE6;--line-soft:#E7EBF1;
  --rouge:#DE2221;--rouge-soft:rgba(222,34,33,.10);--rouge-ink:#B41C1B;
  --bleu:#1A5276;--bleu-soft:rgba(26,82,118,.10);
  --vert:#1E8449;--vert-soft:rgba(30,132,73,.12);
  --orange:#B8690F;--orange-soft:rgba(224,138,30,.14);
  --deep:#0E1319;--deep-2:#171D25;--deep-line:#242C36;
  --on-deep:#EEF1F5;--on-deep-muted:#96A2B2;
  --r-1:4px;--r-2:8px;--r-3:14px;
  --nav-h:64px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0E13;--surface:#141A21;--surface-2:#1C232C;
    --ink:#EDF1F5;--ink-2:#C2CBD6;--muted:#8B98A8;
    --line:#262E39;--line-soft:#1E252E;
    --rouge:#FF4F48;--rouge-soft:rgba(255,79,72,.13);--rouge-ink:#FF6B64;
    --bleu:#6BAEDC;--bleu-soft:rgba(107,174,220,.13);
    --vert:#48B87A;--vert-soft:rgba(72,184,122,.14);
    --orange:#F0B25E;--orange-soft:rgba(240,178,94,.14);
    --deep:#070A0E;--deep-2:#10151B;--deep-line:#1E252E;
  }
}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="light"]{color-scheme:light}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0E13;--surface:#141A21;--surface-2:#1C232C;
  --ink:#EDF1F5;--ink-2:#C2CBD6;--muted:#8B98A8;
  --line:#262E39;--line-soft:#1E252E;
  --rouge:#FF4F48;--rouge-soft:rgba(255,79,72,.13);--rouge-ink:#FF6B64;
  --bleu:#6BAEDC;--bleu-soft:rgba(107,174,220,.13);
  --vert:#48B87A;--vert-soft:rgba(72,184,122,.14);
  --orange:#F0B25E;--orange-soft:rgba(240,178,94,.14);
  --deep:#070A0E;--deep-2:#10151B;--deep-line:#1E252E;
}
/* ── Mode clair explicite ────────────────────────────────────────
   Le thème par défaut garde une bande sombre en en-tête, en héros et
   en pied : c'est la direction artistique du produit. Mais « suivre le
   système » ne laisse aucune issue à qui ne supporte pas le sombre.
   Ce mode, choisi volontairement, éclaircit aussi ces trois bandes en
   redéfinissant les seuls jetons --deep-* ; tout le reste suit.
   ─────────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  --deep:#FFFFFF;
  --deep-2:#F1F3F6;
  --deep-line:#D9DEE6;
  --on-deep:#10151B;
  --on-deep-muted:#5C6979;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.14}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--rouge);outline-offset:3px;border-radius:var(--r-1)}
[hidden]{display:none!important}
.shell{width:100%;max-width:1160px;margin-inline:auto;padding-inline:clamp(18px,4.5vw,44px)}
.shell--etroit{max-width:860px}

/* ── Marque Red.T ───────────────────────────────────────────── */
.wordmark{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;font-size:1.18rem;line-height:1}
.wordmark .pt{color:var(--rouge)}
.brand{display:flex;align-items:center;gap:12px}
.brand__sep{width:1px;height:20px;background:var(--deep-line)}
.brand__sub{font-size:.9rem;color:var(--on-deep-muted);font-weight:500}

/* ── Navigation ─────────────────────────────────────────────── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;height:var(--nav-h);
  background:rgba(14,19,25,.94);background:color-mix(in srgb,var(--deep) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--deep-line);color:var(--on-deep)}
.nav__in{height:100%;display:flex;align-items:center;gap:24px}
.nav__links{display:flex;gap:22px;margin-left:auto}
.nav__links a{font-size:.92rem;color:var(--on-deep-muted);transition:color .2s;cursor:pointer}
.nav__links a:hover,.nav__links a.on{color:var(--on-deep)}
.nav__burger{display:none;margin-left:auto;background:none;border:1px solid var(--deep-line);border-radius:var(--r-2);
  width:42px;height:38px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav__burger span{display:block;width:16px;height:2px;background:var(--on-deep);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Boutons ────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);
  font-weight:700;font-size:.95rem;line-height:1;padding:14px 22px;border-radius:var(--r-2);
  border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s}
.btn--primary{background:var(--rouge);color:#fff}
.btn--primary:hover{background:var(--rouge-ink);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--on-deep);border-color:var(--deep-line)}
.btn--ghost:hover{border-color:var(--on-deep-muted);transform:translateY(-2px)}
.btn--nav{padding:10px 16px;font-size:.88rem}
.btn--small{padding:9px 14px;font-size:.83rem;font-weight:600}
.btn--small.done{border-color:var(--vert);color:var(--vert)}
.btn--bloc{width:100%}

/* ── Bandeau d'aperçu ───────────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────────── */
.hero{background:var(--deep);color:var(--on-deep);padding-block:clamp(48px,7vw,84px)}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;letter-spacing:-.038em;max-width:17ch}
.hero__sub{color:var(--on-deep-muted);margin-top:20px;max-width:56ch;font-size:clamp(1rem,1.7vw,1.15rem)}
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:38px}
.choix__c{background:var(--deep-2);border:1px solid var(--deep-line);border-radius:var(--r-3);
  padding:24px;text-align:left;cursor:pointer;transition:border-color .25s var(--ease),transform .25s var(--ease);
  display:flex;flex-direction:column;gap:9px;font-family:var(--font-body);color:var(--on-deep)}
.choix__c:hover{border-color:var(--on-deep-muted);transform:translateY(-3px)}
.choix__i{width:26px;height:26px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;margin-bottom:6px}
.choix__i b{border-radius:2px;background:var(--deep-line);display:block}
.choix__i b.on{background:var(--rouge)}
.choix__t{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.choix__d{font-size:.9rem;color:var(--on-deep-muted);line-height:1.5}
.hero__deja{margin-top:26px;font-size:.92rem;color:var(--on-deep-muted)}
.hero__deja a{color:var(--on-deep);border-bottom:1px solid var(--deep-line);cursor:pointer}
.hero__deja a:hover{border-color:var(--on-deep)}

/* ── Sections ───────────────────────────────────────────────── */
.band{padding-block:clamp(52px,7vw,88px)}
.band--tint{background:var(--surface-2);border-block:1px solid var(--line-soft)}
.mark{display:flex;gap:4px;margin-bottom:18px}
.mark i{width:9px;height:9px;border-radius:2px;background:var(--line);display:block}
.mark i:first-child{background:var(--rouge)}
.head{max-width:700px;margin-bottom:clamp(30px,4vw,48px)}
.head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);max-width:19ch}
.head p{color:var(--ink-2);margin-top:14px;max-width:62ch;font-size:1.02rem}

/* ── Formulaires ────────────────────────────────────────────── */
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
.formcard__h{padding:22px clamp(20px,3vw,32px);border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.formcard__h h2{font-size:clamp(1.3rem,2.6vw,1.75rem)}
.formcard__h p{color:var(--muted);font-size:.92rem;margin-top:5px;max-width:52ch}
.formcard__b{padding:clamp(22px,3vw,34px)}
.fields{display:grid;gap:22px}
@media (min-width:660px){.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}}
.f{display:grid;gap:8px}
.lab{font-size:.92rem;font-weight:700;color:var(--ink);display:block}
.lab .opt{font-weight:400;color:var(--muted)}
.req{color:var(--rouge)}
.help{font-size:.84rem;color:var(--muted);line-height:1.5}
input[type=text],input[type=email],select,textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:13px 14px;
  transition:border-color .2s,box-shadow .2s}
textarea{min-height:120px;resize:vertical;line-height:1.55}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--rouge-soft)}
[aria-invalid="true"]{border-color:var(--rouge)}
::placeholder{color:var(--muted);opacity:.75}
.opts{display:grid;gap:8px}
.opts--2{grid-template-columns:1fr}
@media (min-width:560px){.opts--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:560px){.opts--3{grid-template-columns:repeat(3,1fr)}}
.opt-it{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-2);padding:12px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.opt-it:hover{border-color:var(--muted)}
.opt-it input{margin:0;flex-shrink:0;width:17px;height:17px;accent-color:var(--rouge);margin-top:2px}
.opt-it span{font-size:.92rem;line-height:1.4}
.opt-it small{display:block;color:var(--muted);font-size:.81rem;margin-top:2px}
.opt-it:has(input:checked){border-color:var(--rouge);background:var(--rouge-soft)}
.opts[aria-invalid="true"] .opt-it{border-color:var(--rouge)}
.err{font-size:.85rem;color:var(--rouge);font-weight:600;display:none}
.err.on{display:block}

/* ── Pièces jointes ─────────────────────────────────────────── */
.drop{border:1.5px dashed var(--line);border-radius:var(--r-2);padding:22px;text-align:center;
  background:var(--surface-2);transition:border-color .2s,background .2s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--rouge);background:var(--rouge-soft)}
.drop b{display:block;font-size:.95rem;margin-bottom:4px}
.drop span{font-size:.85rem;color:var(--muted)}
.drop input{display:none}
.pj{display:grid;gap:8px;margin-top:10px}
.pj__it{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-2);padding:9px 12px}
.pj__vig{width:38px;height:38px;border-radius:var(--r-1);background:var(--surface-2);flex-shrink:0;
  object-fit:cover;display:grid;place-items:center;font-size:.62rem;font-weight:700;color:var(--muted);overflow:hidden}
.pj__vig img{width:100%;height:100%;object-fit:cover;display:block}
.pj__n{font-size:.89rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj__p{font-size:.78rem;color:var(--muted);margin-left:auto;flex-shrink:0}
.pj__x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;
  padding:5px 7px;border-radius:var(--r-1);flex-shrink:0}
.pj__x:hover{color:var(--rouge);background:var(--rouge-soft)}

/* ── Récapitulatif ──────────────────────────────────────────── */
.recap{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
.recap__h{padding:13px 17px;border-bottom:1px solid var(--line);font-size:.86rem;font-weight:700;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.recap__b{padding:15px 17px;max-height:250px;overflow:auto}
.recap__b dl{display:grid;grid-template-columns:minmax(115px,32%) 1fr;gap:9px 15px;font-size:.88rem}
.recap__b dt{color:var(--muted)}
.recap__b dd{word-break:break-word}
.barre{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;align-items:center}
.barre .spacer{flex:1}
.saved{font-size:.81rem;color:var(--muted)}

/* ── Confirmation ───────────────────────────────────────────── */
.ok-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:clamp(26px,4vw,42px)}
.ok-mark{width:40px;height:40px;border-radius:var(--r-2);background:var(--rouge);display:grid;
  grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;padding:8px;margin-bottom:20px}
.ok-mark i{background:#fff;border-radius:2px;display:block;opacity:.35}
.ok-mark i:nth-child(2),.ok-mark i:nth-child(3){opacity:1}
.ok-card h2{font-size:clamp(1.4rem,3vw,2rem);max-width:22ch}
.ok-card > p{color:var(--ink-2);margin-top:14px;max-width:60ch;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ref{display:inline-flex;align-items:center;gap:10px;margin-top:20px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-2);padding:11px 15px;font-family:var(--font-display);
  font-weight:700;letter-spacing:-.01em}
.ref span{font-family:var(--font-body);font-weight:400;font-size:.85rem;color:var(--muted);letter-spacing:0}
.rappel{margin-top:24px;padding:18px 20px;background:var(--surface-2);border-radius:var(--r-2);border-left:3px solid var(--rouge)}
.rappel p{font-size:.9rem;color:var(--ink-2);max-width:62ch;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.rappel a{font-weight:700;color:var(--ink)}

/* ── Statuts ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;
  padding:4px 10px;border-radius:100px;white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:2px;background:currentColor;flex-shrink:0}
.badge--recue{background:var(--bleu-soft);color:var(--bleu)}
.badge--cours{background:var(--orange-soft);color:var(--orange)}
.badge--vous{background:var(--rouge-soft);color:var(--rouge)}
.badge--resolue{background:var(--vert-soft);color:var(--vert)}
.badge--close{background:var(--surface-2);color:var(--muted)}
.puce{font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:var(--r-1);
  background:var(--surface-2);color:var(--muted);white-space:nowrap}
.puce--bug{background:var(--rouge-soft);color:var(--rouge)}
.puce--idee{background:var(--bleu-soft);color:var(--bleu)}

/* ── Espace client ──────────────────────────────────────────── */
.espace{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.cote{position:sticky;top:calc(var(--nav-h) + 20px + env(safe-area-inset-top,0px));display:grid;gap:4px}
.cote__u{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:14px 15px;margin-bottom:12px}
.cote__u b{display:block;font-size:.93rem;line-height:1.3}
.cote__u span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.cote a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-2);
  font-size:.93rem;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.cote a:hover{background:var(--surface)}
.cote a.on{background:var(--ink);color:var(--bg);font-weight:700}
.cote a i{width:9px;height:9px;border-radius:2px;background:var(--line);flex-shrink:0}
.cote a.on i{background:var(--rouge)}
.cote__q{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;margin-bottom:26px}
.stat{background:var(--surface);padding:18px 18px}
.stat b{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.stat span{display:block;font-size:.83rem;color:var(--muted);margin-top:6px}
.stat--vous b{color:var(--rouge)}

.tools{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{font-family:var(--font-body);font-size:.85rem;font-weight:600;padding:8px 14px;border-radius:100px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.liste{border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;background:var(--surface)}
.tk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:16px 18px;cursor:pointer;
  text-align:left;width:100%;background:none;border:none;font-family:var(--font-body);transition:background .2s}
.tk + .tk{border-top:1px solid var(--line-soft)}
.tk:hover{background:var(--surface-2)}
.tk__t{font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.35}
.tk__m{font-size:.82rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tk__r{grid-row:span 2;display:flex;flex-direction:column;align-items:flex-end;gap:7px;justify-content:center}
.vide{padding:44px 24px;text-align:center;color:var(--muted);font-size:.93rem}

/* ── Détail d'une demande ───────────────────────────────────── */
.retour{background:none;border:none;font-family:var(--font-body);font-size:.88rem;color:var(--muted);
  cursor:pointer;padding:6px 0;margin-bottom:14px}
.retour:hover{color:var(--ink)}
.dt__h{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0;padding:22px clamp(18px,2.6vw,28px)}
.dt__h h2{font-size:clamp(1.25rem,2.4vw,1.6rem);max-width:30ch}
.dt__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.infos{border:1px solid var(--line);border-top:none;background:var(--surface-2);
  padding:16px clamp(18px,2.6vw,28px);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px}
.infos div span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:2px}
.infos div b{font-size:.9rem;font-weight:600}
.fil{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-3) var(--r-3);
  background:var(--surface);padding:clamp(18px,2.6vw,28px);display:grid;gap:16px}
.msg{display:grid;gap:7px;max-width:88%}
.msg--moi{margin-left:auto}
.msg__w{padding:13px 16px;border-radius:var(--r-2);font-size:.94rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msg--eux .msg__w{background:var(--surface-2);border:1px solid var(--line)}
.msg--moi .msg__w{background:var(--ink);color:var(--bg)}
.msg--sys .msg__w{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:.87rem}
.msg--sys{max-width:100%;text-align:center}
.msg__q{font-size:.78rem;color:var(--muted)}
.msg--moi .msg__q{text-align:right}
.msg__pj{display:flex;gap:7px;flex-wrap:wrap}
.msg__pj span{font-size:.76rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-1);padding:4px 8px;color:var(--muted)}
.repondre{border-top:1px solid var(--line-soft);padding-top:16px;display:grid;gap:10px}
.repondre textarea{min-height:82px}

/* ── Chat support ───────────────────────────────────────────── */
.chatbtn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;
  background:var(--rouge);color:#fff;border:none;border-radius:100px;padding:14px 20px;
  font-family:var(--font-body);font-weight:700;font-size:.9rem;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:9px;
  transition:transform .2s var(--ease),background .2s}
.chatbtn:hover{background:var(--rouge-ink);transform:translateY(-2px)}
.chatbtn i{width:8px;height:8px;border-radius:2px;background:#fff}
.chatpan{position:fixed;right:0;bottom:0;top:auto;z-index:85;width:min(400px,100%);
  height:min(560px,calc(100% - 20px));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3) var(--r-3) 0 0;display:flex;flex-direction:column;
  box-shadow:0 -10px 50px rgba(0,0,0,.22);
  margin-right:clamp(0px,2vw,18px);margin-bottom:env(safe-area-inset-bottom,0px)}
.chatpan__h{background:var(--deep);color:var(--on-deep);padding:15px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;border-radius:var(--r-3) var(--r-3) 0 0}
.chatpan__h b{font-family:var(--font-display);font-size:1rem}
.chatpan__h span{display:block;font-size:.78rem;color:var(--on-deep-muted);margin-top:2px}
.chatpan__x{background:none;border:none;color:var(--on-deep-muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 6px}
.chatpan__x:hover{color:var(--on-deep)}
.chatpan__b{flex:1;overflow-y:auto;padding:16px;display:grid;gap:13px;align-content:start}
.chatpan__f{border-top:1px solid var(--line);padding:12px;display:grid;gap:9px}
.chatpan__f textarea{min-height:60px;font-size:.93rem}
.chatpan__f .row{display:flex;gap:9px;align-items:center}
@media (max-width:520px){
  .chatpan{width:100%;height:calc(100% - 52px);margin-right:0;border-radius:0}
  .chatpan__h{border-radius:0}
}

/* ── Mes produits ───────────────────────────────────────────── */
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:22px}
.prod h3{font-size:1.1rem;margin-bottom:5px}
.prod__d{font-size:.88rem;color:var(--muted);line-height:1.5;margin-bottom:16px}
.prod__l{display:grid;gap:9px;padding-top:14px;border-top:1px solid var(--line-soft)}
.prod__l div{display:flex;justify-content:space-between;gap:14px;font-size:.87rem}
.prod__l span{color:var(--muted)}
.prod__l b{font-weight:600;text-align:right;word-break:break-word}

/* ── Connexion ──────────────────────────────────────────────── */
.login{max-width:430px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);padding:clamp(26px,4vw,38px)}
.login h2{font-size:1.5rem;margin-bottom:8px}
.login > p{color:var(--muted);font-size:.93rem;margin-bottom:24px}
.login .fields{gap:18px}
.login__note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:.86rem;color:var(--muted)}
.login__note b{color:var(--ink)}

/* ── Statuts expliqués ──────────────────────────────────────── */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
.etape{background:var(--surface);padding:22px 20px}
.etape__n{width:26px;height:26px;border-radius:var(--r-1);background:var(--surface-2);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;margin-bottom:12px;color:var(--muted)}
.etape:first-child .etape__n{background:var(--rouge);color:#fff}
.etape h3{font-size:1rem;margin-bottom:6px}
.etape p{font-size:.87rem;color:var(--muted);line-height:1.55;text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* ── Pied ───────────────────────────────────────────────────── */
.foot{background:var(--deep);color:var(--on-deep-muted);padding-block:34px;font-size:.87rem;
  margin-top:0;border-top:1px solid var(--deep-line)}
.foot__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--on-deep)}

@media (max-width:860px){
  .espace{grid-template-columns:1fr}
  .cote{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;
    padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .cote__u,.cote__q{display:none}
  .cote a{white-space:nowrap}
}
@media (max-width:720px){
  .nav__links{position:fixed;inset:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;
    gap:0;background:var(--deep);border-bottom:1px solid var(--deep-line);padding:6px 0 16px;margin:0;display:none}
  .nav.is-open .nav__links{display:flex}
  .nav__links a{padding:13px clamp(18px,4.5vw,44px);font-size:1rem;border-bottom:1px solid var(--deep-line)}
  .nav__burger{display:flex}
  .nav .btn--nav{display:none}
  .ok-card > p,.rappel p,.etape p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
  .tk{grid-template-columns:1fr}
  .tk__r{grid-row:auto;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap}
  .msg{max-width:96%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════
   Compléments propres à l'application serveur
   ═══════════════════════════════════════════════════════════════ */

/* Messages d'une requête à la suivante */
.flash{margin-bottom:20px;display:grid;gap:9px}
.flash__m{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-2);
  border:1px solid var(--line);background:var(--surface);font-size:.93rem}
.flash__m i{width:10px;height:10px;border-radius:2px;margin-top:5px;flex-shrink:0;background:var(--muted)}
.flash__m.succes{border-color:var(--vert);background:var(--vert-soft)}
.flash__m.succes i{background:var(--vert)}
.flash__m.erreur{border-color:var(--rouge);background:var(--rouge-soft)}
.flash__m.erreur i{background:var(--rouge)}
.flash__m.info i{background:var(--bleu)}

/* Erreurs de champ */
.err.on{display:block}
.champ-err input,.champ-err select,.champ-err textarea{border-color:var(--rouge)}

/* Connexion */
.carte-auth{max-width:440px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);padding:clamp(26px,4vw,38px)}
.carte-auth h1{font-size:1.6rem;margin-bottom:8px}
.carte-auth > p{color:var(--muted);font-size:.93rem;margin-bottom:24px}
.carte-auth .fields{gap:18px}
.carte-auth__note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:.87rem;color:var(--muted)}
.carte-auth__note a{font-weight:700;color:var(--ink)}

/* Fil de conversation */
.fil{display:grid;gap:16px}
.msg{display:grid;gap:7px;max-width:88%}
.msg--moi{margin-left:auto}
.msg__w{padding:13px 16px;border-radius:var(--r-2);font-size:.94rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.msg--eux .msg__w{background:var(--surface-2);border:1px solid var(--line)}
.msg--moi .msg__w{background:var(--ink);color:var(--bg)}
.msg--sys{max-width:100%;text-align:center}
.msg--sys .msg__w{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:.87rem}
.msg--interne .msg__w{background:var(--orange-soft);border:1px solid var(--orange);color:var(--ink)}
.msg__q{font-size:.78rem;color:var(--muted)}
.msg--moi .msg__q{text-align:right}
.msg__pj{display:flex;gap:7px;flex-wrap:wrap}
.msg__pj a{font-size:.78rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-1);padding:5px 9px;color:var(--ink-2)}
.msg__pj a:hover{border-color:var(--ink)}

/* Détail d'une demande */
.dt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;margin-bottom:22px}
.dt__h{padding:22px clamp(18px,2.6vw,28px);border-bottom:1px solid var(--line)}
.dt__h h1{font-size:clamp(1.25rem,2.4vw,1.7rem);max-width:34ch}
.dt__meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.dt__b{padding:clamp(18px,2.6vw,28px)}
.infos{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding:16px clamp(18px,2.6vw,28px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px}
.infos div span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:2px}
.infos div b{font-size:.9rem;font-weight:600}
.bloc{margin-bottom:22px}
.bloc h2{font-size:1.02rem;margin-bottom:10px}
.bloc p{font-size:.94rem;color:var(--ink-2);white-space:pre-wrap}

/* Panneau d'actions du back-office */
.actions{display:grid;gap:16px}
.action-carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:16px 18px}
.action-carte h3{font-size:.95rem;margin-bottom:10px}
.action-carte .f{gap:7px;margin-bottom:10px}
.deux-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:clamp(20px,3vw,34px);align-items:start}
@media (max-width:900px){.deux-col{grid-template-columns:1fr}}

/* Historique */
.hist{display:grid;gap:10px;font-size:.87rem}
.hist div{display:grid;grid-template-columns:12px 1fr;gap:10px;align-items:start}
.hist i{width:9px;height:9px;border-radius:2px;background:var(--line);margin-top:6px}
.hist div:last-child i{background:var(--rouge)}
.hist b{font-weight:600}
.hist span{color:var(--muted)}

/* Sélecteur d'apparence */
.theme{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--deep-line);
  border-radius:var(--r-2);align-self:center;flex-shrink:0}
.theme button{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--on-deep-muted);
  background:none;border:none;padding:6px 10px;border-radius:5px;cursor:pointer;
  transition:background .2s,color .2s;white-space:nowrap}
.theme button:hover{color:var(--on-deep)}
.theme button[aria-pressed="true"]{background:var(--deep-line);color:var(--on-deep)}
@media (max-width:720px){
  .theme{margin:14px clamp(18px,4.5vw,44px) 4px;align-self:flex-start}
}

/* Barre du haut connectée */
.nav__u{display:flex;align-items:center;gap:12px;margin-left:18px}
.nav__u span{font-size:.86rem;color:var(--on-deep-muted)}
.nav__u button{background:none;border:1px solid var(--deep-line);color:var(--on-deep-muted);
  border-radius:var(--r-1);padding:7px 12px;font-family:var(--font-body);font-size:.82rem;cursor:pointer}
.nav__u button:hover{color:var(--on-deep);border-color:var(--on-deep-muted)}
@media (max-width:720px){.nav__u{display:none}}

/* Chat plein écran */
.chatpage{display:grid;grid-template-rows:1fr auto;gap:16px;
  min-height:min(560px,60vh);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);padding:clamp(16px,2.4vw,24px)}
.chatpage__fil{overflow-y:auto;display:grid;gap:13px;align-content:start;max-height:56vh}
.chatpage__form{display:grid;gap:10px;border-top:1px solid var(--line-soft);padding-top:14px}

/* Tableaux simples */
.tab{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
.tab th{text-align:left;font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tab td{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.tab tr:last-child td{border-bottom:none}
.tab a{font-weight:600}