/* ============================================================
   Mail Exchange - site public, tunnel de commande, connexion (charte v2, 03.10.2026)

   Identite CLAIRE verrouillee : le site ne suit pas le theme du systeme du visiteur. Les
   zones sombres sont une decision de design, pas un theme.

   L'espace client et l'administration ont leur propre feuille (app.css) et ne chargent pas
   celle-ci. Dessin valide sur mockups/site-public-v2.html.

   Pas de style en ligne dans les pages : la politique de securite (style-src 'self')
   ignore l'attribut style sans rien dire. Tout passe par une classe.
   ============================================================ */

:root{
  --ink:#0C1620; --ink-2:#1F3245; --muted:#586B7D; --faint:#8798A9;
  --line:#E2E9F1; --hair:#EEF3F8; --ground:#FFFFFF; --tint:#F5F8FC; --card:#FFFFFF;
  --blue:#1F6FD0; --blue-2:#3F93EE; --blue-deep:#0E4A94; --blue-lift:#8CC4F8; --blue-soft:#EAF3FD; --blue-line:#CDE0F8;
  --ok:#2B7A1C; --ok-soft:#E8F5E1; --ok-line:#CBE7BC;
  --wa:#8A5F00; --wa-soft:#FDF3DB; --wa-line:#F1DDAE;
  --no:#B3261E; --no-soft:#FCECEA; --no-line:#F4CDC8;
  --red:#D8232A; --red-2:#E4383F;
  --night:#080F18; --night-2:#101E2E; --night-3:#16293D; --night-ink:#F0F6FC; --night-mut:#93A9BE; --night-line:rgba(255,255,255,.10);
  --sans:"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Helvetica,ui-sans-serif,system-ui,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI","Helvetica Neue",Helvetica,ui-sans-serif,system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --r:16px; --r-sm:10px;
  --el:0 1px 2px rgba(12,22,32,.05), 0 14px 34px -18px rgba(12,22,32,.25);
  /* La page s'elargit : le contenu suit jusqu'a 1320 px, puis se centre ; les fonds, eux,
     vont d'un bord a l'autre. */
  --wrap:min(1320px, 100% - 2 * clamp(18px, 4vw, 56px));
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none !important;transition:none !important}}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
/* Une seule police pour tout ce qui se saisit ou se clique */
input,select,textarea,button{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
img,svg{max-width:100%}
[hidden]{display:none !important}
.wrap{width:var(--wrap);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
.muted,.sub{color:var(--muted)}
.sub{font-size:14.5px}
.small{font-size:14.5px}
.lien{color:var(--blue)}
.center{text-align:center}
.mt{margin-top:16px}
.mt-l{margin-top:28px}
.mb{margin-bottom:16px}
.flat{margin:0}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px}
/* champ piege contre les robots : hors de l'ecran, pas « hidden » — un robot saute les champs caches */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- en-tete : une seule ligne ---------- */
.topline{background:var(--night);color:var(--night-mut);font-size:12.5px;border-bottom:1px solid var(--night-line)}
.topline .wrap{display:flex;align-items:center;gap:18px;height:34px}
.status{display:inline-flex;align-items:center;gap:8px;color:#CFE0F0}
.beat{width:7px;height:7px;border-radius:50%;background:#6FBF2E;box-shadow:0 0 0 3px rgba(111,191,46,.18);flex:none}
.topline .links{margin-left:auto;display:flex;align-items:center;gap:18px}
.topline a{color:var(--night-mut)}
.topline a:hover{color:#fff;text-decoration:none}
.topline .lang{display:inline-flex;gap:8px}
.topline .lang b{color:#fff}
.nav{background:rgba(8,15,24,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--night-line)}
.nav .wrap{display:flex;align-items:center;gap:22px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:17px;letter-spacing:-.02em;flex:none}
.brand:hover{text-decoration:none}
/* Rouge, comme sur la facture et les courriels : une seule marque. Le bleu est la couleur
   des actions, pas celle de la maison. */
.brand .mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:linear-gradient(150deg,var(--red-2),var(--red));box-shadow:0 4px 14px -3px rgba(216,35,42,.55)}
.brand .wm b{font-weight:700}
.brand .wm span{font-weight:400;color:var(--night-mut)}
.menu{display:flex;gap:2px;margin-inline:auto;flex-wrap:wrap;justify-content:center}
.menu a{padding:8px 13px;border-radius:9px;color:#C9D8E8;font-size:14.5px;white-space:nowrap}
.menu a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.menu a.on{color:#fff;background:rgba(255,255,255,.1);font-weight:600}
.nav .end{display:flex;gap:10px;flex:none}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-sm);padding:11px 19px;font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.3;text-align:center}
.btn:hover{text-decoration:none}
.btn-p,.btn-b{background:linear-gradient(160deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 22px -9px rgba(63,147,238,.75)}
.btn-p:hover,.btn-b:hover{filter:brightness(1.05)}
.btn-g{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn-g:hover{border-color:var(--blue-line);background:var(--blue-soft)}
.btn-o{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.13)}
.btn-w{background:#fff;color:var(--ink)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-lg{padding:14px 24px;font-size:16px}
.btn-full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- heros ---------- */
.hero{background:radial-gradient(70% 90% at 18% 0%, rgba(63,147,238,.26), transparent 62%),radial-gradient(50% 70% at 92% 30%, rgba(31,111,208,.20), transparent 64%),var(--night);color:var(--night-ink)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(48px,7vw,104px)}
.badge{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:#D6E4F2;border:1px solid var(--night-line);background:rgba(255,255,255,.04);padding:5px 14px 5px 5px;border-radius:99px;margin-bottom:22px}
.badge em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue);color:#fff;padding:3px 9px;border-radius:99px}
.hero h1{font-family:var(--display);font-size:clamp(38px,5vw,64px);line-height:1.06;letter-spacing:-.035em;font-weight:700}
.hero h1 i{font-style:normal;color:var(--blue-lift)}
.hero .lede{font-size:clamp(16px,1.3vw,19px);color:#BCCEE0;max-width:54ch;margin-top:20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.under{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;font-size:14px;color:#BCCEE0;padding:0;list-style:none}
.under li{display:flex;align-items:center;gap:8px}
.under svg{color:#6FBF2E;flex:none}
.signal{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--night-line);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.signal-h{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--night-line);font-weight:600;font-size:14px}
.signal-h .tag{margin-left:auto;font:11px var(--mono);color:var(--night-mut)}
.signal-b{margin:0}
.srow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 20px;border-top:1px solid var(--night-line);color:#BCCEE0;font-size:14.5px}
.srow:first-child{border-top:0}
.srow dt{margin:0}
.srow dd{margin:0}
.srow .v{font-size:24px;color:#fff;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.srow .v small{font-size:13px;font-weight:500;color:var(--night-mut);margin-left:4px}
.ch-mark{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600}
.phead{background:radial-gradient(60% 120% at 15% 0%, rgba(63,147,238,.22), transparent 62%),var(--night);color:var(--night-ink)}
.phead .wrap{padding-block:clamp(40px,5vw,72px)}
.phead h1{font-family:var(--display);font-size:clamp(32px,3.6vw,48px);line-height:1.1;letter-spacing:-.03em}
.phead p{color:#BCCEE0;font-size:18px;max-width:62ch;margin-top:12px}
.phead a{color:var(--blue-lift)}
.crumbs{font-size:13.5px;color:var(--night-mut);margin:0 0 14px}
.phead .crumbs a{color:var(--night-mut)}
.attempted code{font:14px var(--mono);background:rgba(255,255,255,.08);padding:3px 8px;border-radius:6px;color:#DCE9F6}

/* ---------- sections ---------- */
.sec{padding-block:clamp(48px,6vw,92px)}
.sec.alt{background:var(--tint);border-block:1px solid var(--hair)}
.sec.tight{padding-block:clamp(32px,4vw,56px)}
.top{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.top h2,.head h2{font-family:var(--display);font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:-.028em;max-width:26ch}
.top p,.head p{font-size:18px;color:var(--muted);max-width:60ch;margin-top:12px}
.top .more{margin-left:auto;font-weight:600}
.head{margin-bottom:34px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* bande de preuves */
.trust{background:linear-gradient(100deg,var(--blue-2),var(--blue) 60%,var(--blue-deep));color:#fff}
.trust .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.trust .items > div{padding:26px 24px;border-left:1px solid rgba(255,255,255,.18)}
.trust .items > div:first-child{border-left:0;padding-left:0}
.trust b{display:block;font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.trust span{font-size:14px;color:#DCEBFB}

/* cartes */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--el)}
.card.flat{box-shadow:none}
.card .ic{width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue-deep);display:grid;place-items:center;margin-bottom:16px}
.card h3{font-size:18px;font-weight:650;letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px}
.card-h{font-size:18px;font-weight:650;letter-spacing:-.01em;margin-bottom:14px}
.card-h.flat{margin-bottom:0}

/* ---------- offres ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--el);display:flex;flex-direction:column;position:relative}
.plan.hi{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 24px 48px -26px rgba(31,111,208,.55)}
.plan .tagline{position:absolute;top:-12px;left:28px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue);color:#fff;padding:4px 12px;border-radius:99px}
.plan h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.plan .cap{color:var(--muted);font-size:15px}
.plan .pr{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px}
.plan .pr em{font-style:normal;font-size:15px;color:var(--muted)}
.plan .pr b{font-family:var(--display);font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1}
.plan .pr span{font-size:15px;color:var(--muted)}
.excl{font-size:13.5px;color:var(--muted)}
.plan ul{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{color:var(--blue);flex:none;margin-top:5px}
.plan .btn{margin-top:auto}
.incl{background:var(--night-2);color:var(--night-ink);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px}
.incl h3{font-size:18px;font-weight:650}
.incl ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;color:#C9D8E8;font-size:15px}
.incl li{display:flex;gap:10px;align-items:flex-start}
.incl li svg{color:#6FBF2E;flex:none;margin-top:5px}
.incl .btn{margin-top:auto}

/* tableaux */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--el)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{font-size:12.5px;font-weight:600;color:var(--faint);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--tint);white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl .nm{font-weight:650}
.tbl .sub{font-size:13.5px}
.pill{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--tint);color:var(--muted);white-space:nowrap}
.pill.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.pill.wa{color:var(--wa);background:var(--wa-soft);border-color:var(--wa-line)}
.pill.bl{color:var(--blue-deep);background:var(--blue-soft);border-color:var(--blue-line)}

/* noms de domaine : une case par extension, la grille complete en dessous */
.tld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tld{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--card)}
.tld b{font-size:17px}
.tld span{display:block;font-size:13.5px;color:var(--muted)}
details.more{margin-top:18px}
details.more summary{cursor:pointer;font-weight:600;color:var(--blue);padding:6px 0}
details.more[open] summary{margin-bottom:12px}

/* ---------- pages de texte ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,64px);align-items:start}
.prose{max-width:76ch;font-size:17px;color:var(--ink-2)}
.prose h2{font-family:var(--display);font-size:26px;letter-spacing:-.02em;line-height:1.2;margin:38px 0 12px;color:var(--ink);scroll-margin-top:92px}
.prose > h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:26px 0 8px;color:var(--ink)}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose code{font:14.5px var(--mono);background:var(--hair);padding:2px 6px;border-radius:5px;color:var(--ink)}
.prose pre{background:var(--tint);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;font:14px var(--mono)}
.prose pre code{background:none;padding:0}
.prose blockquote{margin:16px 0;border:1px solid var(--blue-line);background:var(--blue-soft);border-radius:var(--r-sm);padding:14px 18px;color:var(--blue-deep)}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.prose th{text-align:left;font-size:12.5px;color:var(--faint);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--tint)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.toc{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--card);font-size:15px;box-shadow:var(--el)}
.toc h2,.toc .lbl{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.toc .lbl + .lbl,.toc .gap{margin-top:18px}
.toc a.l{display:block;padding:6px 0;color:var(--ink-2)}
.toc p{color:var(--muted);font-size:14.5px;margin:0}
.toc ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
/* le bouton d'un encadre : texte blanc, et de l'air au-dessus */
.toc .btn{margin-top:20px}
.doc-back{margin-top:28px}

/* ---------- documentation ---------- */
.docs-h{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:30px 0 12px;font-family:var(--sans);scroll-margin-top:92px}
.docs-h:first-child{margin-top:0}
.doc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.doc-item{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--card);color:var(--ink)}
.doc-item:hover{border-color:var(--blue-line);text-decoration:none;box-shadow:var(--el)}
.doc-item .k{font:12px var(--mono);color:var(--blue-deep);background:var(--blue-soft);padding:4px 8px;border-radius:6px;flex:none}
.doc-item .body{display:flex;flex-direction:column;gap:3px;min-width:0}
.doc-item .t{font-size:17px;font-weight:650}
.doc-item .s{font-size:14.5px;color:var(--muted)}
.doc-item .tags{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}

/* ---------- revendeurs ---------- */
.tier{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--card);box-shadow:var(--el)}
.tier .lvl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.tier b{display:block;font-family:var(--display);font-size:54px;font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--blue)}
.tier span{color:var(--muted);font-size:15.5px}
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.checks li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--card)}
.checks li svg{color:var(--blue);flex:none;margin-top:5px}
.checks li b{font-weight:650}
.checks li span{color:var(--muted);font-size:15.5px}

/* ---------- formulaires ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > span:first-child,.field > label{font-size:14px;font-weight:600;color:var(--ink-2)}
.field small,.field .sub{font-size:13.5px;color:var(--muted)}
.input{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;background:var(--card);font-size:16px}
.input:focus{outline:2px solid var(--blue-soft);border-color:var(--blue)}
.input::placeholder{color:var(--faint);opacity:1}
.input.input-validation-error{border-color:var(--no);background:var(--no-soft)}
textarea.input{resize:vertical;line-height:1.55}
.input-num{width:96px;text-align:center;font-variant-numeric:tabular-nums}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.tel{display:grid;grid-template-columns:128px 1fr;gap:8px}
.stack{display:flex;flex-direction:column;gap:16px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2)}
.check input{width:17px;height:17px;accent-color:var(--blue);margin:0}
.note{padding:12px 16px;border-radius:var(--r-sm);font-size:15px;border:1px solid var(--line);background:var(--tint);color:var(--ink-2)}
.note.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.note.wa{background:var(--wa-soft);border-color:var(--wa-line);color:var(--wa)}
.note.no{background:var(--no-soft);border-color:var(--no-line);color:var(--no)}
.note ul{margin:0;padding-left:18px}
.note.validation-summary-valid{display:none}
.hint{font-size:14.5px;color:var(--muted)}
.field-error{font-size:13.5px;color:var(--no)}

/* ---------- tunnel de commande ---------- */
.steps{display:flex;gap:6px 18px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none}
.steps li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--night-mut)}
.steps li i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700;border:1px solid var(--night-line)}
.steps li.on{color:#fff;font-weight:600}
.steps li.on i{background:var(--blue);border-color:var(--blue)}
.steps li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.shop{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(22px,3vw,44px);align-items:start}
.shop.one{grid-template-columns:minmax(0,820px)}
.pick{display:flex;flex-direction:column;gap:12px;border:0;padding:0;margin:0;min-width:0}
.pick legend{font-size:14px;font-weight:600;color:var(--ink-2);padding:0;margin-bottom:10px}
.opt{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--card)}
.opt:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.opt input{margin-top:4px;width:17px;height:17px;accent-color:var(--blue);flex:none}
.opt b{display:block;font-weight:650}
.opt em{font-style:normal;color:var(--muted);font-size:14.5px}
.qty{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.qty > span{min-width:0;flex:1}
.qty b{display:block;font-weight:650}
.qty em{font-style:normal;color:var(--muted);font-size:14.5px}
.addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.addr .input{flex:0 1 300px;min-width:180px;text-align:right}
.addr > .mono{color:var(--muted);font-size:15px}
.addr.err .input{border-color:var(--no);background:var(--no-soft)}
.addr .why{flex-basis:100%;font-size:13.5px;color:var(--no)}
.sum{position:sticky;top:92px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--el);overflow:hidden}
.sum-h{padding:16px 20px;border-bottom:1px solid var(--hair);font-size:16px;font-weight:650}
.sum ul{list-style:none;margin:0;padding:0}
.sum li{display:flex;justify-content:space-between;gap:14px;padding:12px 20px;border-top:1px solid var(--hair);font-size:15px}
.sum li:first-child{border-top:0}
.sum li em{font-style:normal;color:var(--muted);font-size:13.5px;margin-left:4px}
.sum li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.sum .cart-t{border-top:1px solid var(--line)}
.sum .cart-t li{color:var(--muted)}
.sum .cart-t li.tot{background:var(--tint);color:var(--ink);font-weight:700;font-size:17px}
.sum-b{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.sum-f{padding:16px 20px;border-top:1px solid var(--hair);background:var(--tint)}
.sum-f .btn{width:100%}
hr{border:0;border-top:1px solid var(--hair);margin:20px 0}

/* ---------- connexion ---------- */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.login-art{background:radial-gradient(80% 80% at 20% 10%, rgba(63,147,238,.28), transparent 60%),var(--night);color:var(--night-ink);padding:clamp(32px,6vw,88px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.login-art h1{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.03em;margin-top:18px}
.login-art p{color:#BCCEE0;max-width:46ch}
.login-art .kv{display:flex;gap:28px;flex-wrap:wrap;margin:14px 0 0}
.login-art .kv dt{font-family:var(--display);font-size:26px;font-weight:700;color:#fff}
.login-art .kv dd{margin:0;font-size:13.5px;color:var(--night-mut)}
.login-form{padding:clamp(32px,6vw,88px);display:flex;flex-direction:column;justify-content:center}
.login-form .in{max-width:420px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.login-form h2{font-family:var(--display);font-size:30px;letter-spacing:-.025em}
.login-form form{display:flex;flex-direction:column;gap:16px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14.5px}
.login-foot{font-size:14.5px;color:var(--muted);text-align:center;line-height:1.7}

/* ---------- appel, pied ---------- */
.band{background:radial-gradient(60% 140% at 85% 0%, rgba(63,147,238,.3), transparent 60%),var(--night-2);color:var(--night-ink)}
.band .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:clamp(40px,5vw,72px)}
.band h2{font-family:var(--display);font-size:clamp(26px,2.6vw,36px);letter-spacing:-.028em}
.band p{color:#BCCEE0;margin-top:8px;max-width:56ch}
.band .acts{margin-left:auto}
.foot{background:var(--night);color:var(--night-mut);font-size:14.5px}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px;padding-block:52px 28px}
.foot h2{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot a.l{display:block;color:var(--night-mut);padding:4px 0}
.foot a.l:hover{color:#fff;text-decoration:none}
.foot .about p{margin-top:14px;max-width:44ch}
.foot .ch{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#C9D8E8}
.foot .bar{border-top:1px solid var(--night-line);padding-block:20px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}

/* ---------- pages hors gabarit : erreur, introuvable ---------- */
.standalone{max-width:640px;margin:14vh auto;padding:0 24px;display:flex;flex-direction:column;gap:16px}
.standalone h1{font-family:var(--display);font-size:34px;letter-spacing:-.03em}
.standalone .ref code{font:14px var(--mono);background:var(--hair);padding:2px 7px;border-radius:5px}
.lost{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.lost a{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--card);color:var(--ink)}
.lost a:hover{border-color:var(--blue-line);text-decoration:none;box-shadow:var(--el)}
.lost .t{display:block;font-weight:650}
.lost .s{display:block;font-size:14.5px;color:var(--muted)}

@media (max-width:1100px){
  /* minmax(0, ...) : sans lui, un tableau large elargit la colonne et la page deborde */
  .hero .wrap,.two,.shop,.shop.one,.login{grid-template-columns:minmax(0,1fr)}
  .nav .end{margin-left:auto}
  .toc,.sum{position:static}
  .foot .cols{grid-template-columns:1fr 1fr}
  .nav .wrap{flex-wrap:wrap;padding-block:10px}
  .menu{order:3;flex-basis:100%;justify-content:flex-start;margin:0;overflow-x:auto;flex-wrap:nowrap}
  .login{min-height:0}
}
@media (max-width:640px){
  .f2{grid-template-columns:1fr}
  .topline .links a:not([hreflang]){display:none}
  .trust .items > div{border-left:0;padding-left:0}
  .foot .cols{grid-template-columns:1fr}
  .band .acts{margin-left:0}
  .doc-list{grid-template-columns:1fr}
  .qty{flex-wrap:wrap}
}
@media print{
  .topline,.nav,.foot,.band{display:none}
}