/* ============================================================
   Mail Exchange — charte v5.1
   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.
   Trois aplats : noir (haut) -> bleu (bandeau de valeurs) -> blanc (corps).
   ============================================================ */

:root{
  --ink:#0C1620;
  --ink-2:#1F3245;
  --muted:#586B7D;
  --faint:#8798A9;
  --line:#E2E9F1;
  --hair:#EEF3F8;
  --ground:#FFFFFF;
  --tint:#F6F9FC;
  --card:#FFFFFF;

  --blue:#1F6FD0;
  --blue-2:#3F93EE;
  --blue-deep:#0E4A94;
  --blue-lift:#8CC4F8;
  --blue-soft:#EAF3FD;
  --blue-line:#CDE0F8;

  --green-2:#6FBF2E;

  --night:#080F18;
  --night-2:#101E2E;
  --night-3:#16293D;
  --night-ink:#F0F6FC;
  --night-mut:#93A9BE;
  --night-line:rgba(255,255,255,.10);

  --grad:linear-gradient(140deg,var(--blue-2) 4%,var(--blue) 56%,var(--blue-deep) 126%);

  --sans:"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Helvetica,ui-sans-serif,system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;

  --r:14px;
  --r-sm:9px;
  --el-sm:0 1px 2px rgba(12,22,32,.05);
  --el:0 2px 4px rgba(12,22,32,.04), 0 12px 28px -14px rgba(12,22,32,.18);

  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;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--card);color:var(--ink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
  box-shadow:var(--el);font-weight:600;
}
.skip:focus{left:0}

.wrap{max-width:1130px;margin:0 auto;padding:0 24px}
.num{font-variant-numeric:tabular-nums}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-sm);padding:11px 19px;font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:transform .12s,background .15s,border-color .15s;
}
.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{transform:translateY(-1px)}
.btn-g{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--el-sm)}
.btn-g:hover{border-color:var(--blue-line);background:var(--blue-soft)}
.btn-o{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.26);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.12)}
.btn-w{background:#fff;color:var(--blue-deep)}
.btn-sm{padding:8px 15px;font-size:13.5px}
.btn-lg{padding:13px 25px;font-size:15px}
.btn-full{width:100%}

/* ============================================================
   ZONE HAUTE NOIRE
   ============================================================ */
.dark-top{position:relative;background:var(--night);color:var(--night-ink);overflow:hidden}
.dark-top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(44% 54% at 16% 30%, rgba(63,147,238,.30), transparent 66%),
    radial-gradient(36% 46% at 84% 66%, rgba(31,111,208,.20), transparent 70%);
}
.dark-top::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(var(--night-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--night-line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(74% 70% at 50% 34%,#000,transparent 80%);
  mask-image:radial-gradient(74% 70% at 50% 34%,#000,transparent 80%);
}
.dark-top > *{position:relative;z-index:1}

.topline{border-bottom:1px solid var(--night-line);font-size:13px;color:var(--night-mut)}
.topline .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  min-height:40px;padding-top:6px;padding-bottom:6px;
}
.topline .links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topline .links a{opacity:.82}
.topline .links a:hover{opacity:1}
.topline .lang{display:inline-flex;gap:8px;align-items:center}
.topline .lang b{color:#fff;font-weight:650}

.status{display:inline-flex;align-items:center;gap:8px;color:var(--night-ink);font-weight:500}
.beat{width:7px;height:7px;border-radius:50%;background:var(--green-2);position:relative;flex:none}
.beat::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--green-2);opacity:.55;animation:beat 2.6s ease-out infinite;
}
@keyframes beat{
  0%{transform:scale(.55);opacity:.6}
  70%{transform:scale(1.4);opacity:0}
  100%{opacity:0}
}

.nav{border-bottom:1px solid var(--night-line)}
.nav .wrap{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  min-height:70px;padding-top:12px;padding-bottom:12px;
}

.brand{display:inline-flex;align-items:center;gap:10px}
/* Rouge, comme sur la facture et les courriels. Le bleu d'origine faisait deux
   identites pour une seule maison : le client voyait une marque sur le site et une
   autre sur son papier. Le bleu reste la couleur des actions, pas de la marque. */
.brand .mark{
  width:31px;height:31px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#E4383F,#D8232A);
  box-shadow:0 4px 14px -3px rgba(216,35,42,.55);
}
.brand .wm{font-size:17px;letter-spacing:-.02em;color:#fff}
.brand .wm b{font-weight:700}
.brand .wm span{font-weight:400;color:var(--night-mut)}

.menu{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.menu a{
  font-size:14px;color:var(--night-mut);padding:8px 13px;border-radius:var(--r-sm);
  transition:background .15s,color .15s;
}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.menu a.on{color:#fff;font-weight:600;background:rgba(255,255,255,.07)}

.end{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* hero */
.hero .wrap{
  padding-top:64px;padding-bottom:76px;display:grid;
  grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;
}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px}}

.badge{
  display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);color:#DCE9F6;border-radius:30px;
  padding:5px 15px 5px 6px;font-size:12.5px;font-weight:600;
}
.badge em{
  font-style:normal;background:linear-gradient(140deg,var(--blue-2),var(--blue));color:#fff;
  border-radius:20px;padding:2px 10px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;
}

.hero h1{
  margin:24px 0 0;font-size:clamp(32px,4.4vw,52px);line-height:1.05;letter-spacing:-.04em;
  font-weight:660;color:#fff;text-wrap:balance;max-width:16ch;
}
.hero h1 i{
  font-style:normal;
  background:linear-gradient(100deg,var(--blue-lift),#CFE6FC);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--night-mut);max-width:44ch}
.hero .cta{display:flex;gap:11px;margin-top:30px;flex-wrap:wrap}
.hero .under{
  display:flex;gap:20px;margin:22px 0 0;padding:0;flex-wrap:wrap;
  list-style:none;font-size:13.5px;color:var(--night-mut);
}
.hero .under li{display:inline-flex;align-items:center;gap:7px}
.hero .under svg{color:var(--green-2);flex:none}

/* panneau chiffres */
.signal{
  background:linear-gradient(168deg,var(--night-2),var(--night-3));
  border:1px solid var(--night-line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9);
}
.signal-h{
  display:flex;align-items:center;gap:10px;padding:14px 19px;
  border-bottom:1px solid var(--night-line);background:rgba(255,255,255,.03);
}
.signal-h .t{font-size:13px;font-weight:640;color:#fff}
.signal-h .tag{margin-left:auto;font:11px var(--mono);color:var(--night-mut)}
.signal-b{margin:0;padding:6px 19px 15px}
.srow{display:flex;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid var(--night-line)}
.srow:last-child{border-bottom:0}
.srow dt{font-size:13px;color:var(--night-mut);flex:1}
.srow dd{margin:0}
.srow .v{
  font-size:20px;font-weight:660;letter-spacing:-.025em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.srow .v small{font-size:12px;font-weight:500;color:var(--night-mut);margin-left:3px}
.ch-mark{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:640;color:#fff}

/* en-tete de page interieure */
.phead .wrap{padding-top:52px;padding-bottom:58px}
.phead h1{
  margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.035em;
  font-weight:660;color:#fff;text-wrap:balance;max-width:22ch;
}
.phead p{margin:14px 0 0;font-size:16px;color:var(--night-mut);max-width:60ch;line-height:1.6}

/* ============================================================
   BANDEAU DE VALEURS — degrade bleu
   ============================================================ */
.trust{background:var(--grad);color:#fff;position:relative;overflow:hidden}
.trust::after{
  content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;
}
.trust .wrap{position:relative;z-index:1;padding-top:34px;padding-bottom:36px}
.trust .lbl{
  display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.65);margin-bottom:22px;
}
.trust .items{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 0}
.trust .items > div{padding-right:28px;border-right:1px solid rgba(255,255,255,.22)}
.trust .items > div:last-child{border-right:0;padding-right:0}
.trust .items b{
  display:block;font-size:clamp(28px,4vw,40px);font-weight:670;color:#fff;
  letter-spacing:-.045em;line-height:1.02;font-variant-numeric:tabular-nums;
}
.trust .items span{
  display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.82);line-height:1.4;
}
@media (max-width:760px){
  .trust .items{grid-template-columns:repeat(2,1fr)}
  .trust .items > div:nth-child(2n){border-right:0;padding-right:0}
}

/* ============================================================
   CORPS BLANC
   ============================================================ */
.sec{padding:68px 0;background:var(--ground)}
.sec.alt{background:var(--tint);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

.head{max-width:56ch;margin-bottom:36px}
.head h2{
  margin:0;font-size:clamp(22px,2.7vw,31px);letter-spacing:-.03em;font-weight:650;
  color:var(--ink);text-wrap:balance;line-height:1.18;
}
.head p{margin:12px 0 0;font-size:16px;color:var(--muted);line-height:1.6}

/* offres */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:800px}
@media (max-width:720px){.plans{grid-template-columns:1fr}}
.plan{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--el-sm);position:relative;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.plan:hover{transform:translateY(-2px);box-shadow:var(--el);border-color:var(--blue-line)}
.plan.hi{border-color:var(--blue-line);box-shadow:var(--el)}
.plan .tagline{
  position:absolute;top:-10px;left:28px;background:var(--grad);color:#fff;font-size:10.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px;
  box-shadow:0 5px 12px -4px rgba(31,111,208,.7);
}
.plan h3{margin:0;font-size:18px;font-weight:650;color:var(--ink)}
.plan .cap{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.plan .pr{display:flex;align-items:baseline;gap:6px;margin:20px 0 2px}
.plan .pr b{
  font-size:42px;font-weight:660;letter-spacing:-.045em;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan .pr em{font-style:normal;font-size:14px;color:var(--muted);font-weight:600}
.plan .pr span{font-size:13px;color:var(--muted)}
.plan .excl{margin:0;font-size:12px;color:var(--faint)}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.plan li svg{flex:none;margin-top:4px;color:var(--blue)}

/* grille de fonctionnalites */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fgrid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.fgrid,.fgrid.three{grid-template-columns:1fr}}
.fcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  box-shadow:var(--el-sm);
}
.fcard .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue-line);
}
.fcard h3{margin:15px 0 7px;font-size:15.5px;font-weight:640;color:var(--ink);letter-spacing:-.01em}
.fcard p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}

/* documentation */
.docs{display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:820px){.docs{grid-template-columns:1fr;gap:28px}}
.docs-nav{position:sticky;top:24px;border-right:1px solid var(--line);padding-right:22px}
@media (max-width:820px){.docs-nav{position:static;border-right:0;padding-right:0}}
.docs-nav .eyebrow{
  display:block;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);
}
.docs-nav a{display:block;padding:7px 0;font-size:14px;color:var(--muted);border-bottom:1px solid var(--hair)}
.docs-nav a:hover{color:var(--blue)}
.docs-h{
  margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding-top:26px;
}
.docs-h:first-child{padding-top:0}
.doc-item{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.doc-item .k{font:11px var(--mono);color:var(--faint);width:56px;flex:none;padding-top:4px}
.doc-item .body{flex:1;min-width:0}
.doc-item .t{display:block;font-size:15px;font-weight:640;color:var(--ink)}
.doc-item .s{display:block;margin-top:3px;font-size:13.5px;color:var(--muted);line-height:1.5}
.doc-item .tags{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:620px){
  .doc-item{flex-wrap:wrap}
  .doc-item .tags{width:100%;justify-content:flex-start;padding-left:72px}
}
.docs-foot{margin:34px 0 0;font-size:14px;color:var(--muted)}
/* Une entrée de la liste est un lien vers son article : toute la ligne se clique. */
a.doc-item{color:inherit;text-decoration:none}
a.doc-item:hover{background:linear-gradient(90deg,rgba(31,111,208,.045),transparent 75%)}
a.doc-item:hover .t{color:var(--blue)}
.doc-back{margin:38px 0 0;font-size:14.5px}
.pill.wa{background:var(--amber-soft, #FBF2DC);color:#8F6404;border-color:#F0DEB6}
.pill.nu{background:var(--tint);color:var(--muted);border-color:var(--line)}
.pill.bl{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-line)}

/* paliers revendeur — reutilise le bandeau bleu */
.trust .items.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.trust .items.three{grid-template-columns:1fr}
  .trust .items.three > div{border-right:0;padding-right:0;
    border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:16px}
  .trust .items.three > div:last-child{border-bottom:0;padding-bottom:0}}
.trust .lvl{
  display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.68);margin-bottom:8px;
}

/* arguments et demande d'acces */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.checks li{display:flex;gap:11px;font-size:15px;color:var(--ink-2);line-height:1.5}
.checks svg{flex:none;margin-top:4px;color:var(--blue)}
.checks b{color:var(--ink);font-weight:640}
.ask{border:1px solid var(--line);border-radius:var(--r);background:var(--tint);padding:24px;box-shadow:var(--el-sm)}
.ask h2{margin:0 0 6px;font-size:16px;font-weight:650;color:var(--ink)}
.ask > p{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.ask ul{margin:0 0 20px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.ask li{font-size:14px;color:var(--ink-2)}

/* tableau des options */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.tbl th{
  text-align:left;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:0 14px 9px 0;border-bottom:1px solid var(--ink);
}
.tbl td{
  padding:13px 14px 13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:middle;
}
/* Alignement a droite SANS supprimer la gouttiere : la regle d'origine mettait
   padding-right a zero sur toute cellule « r », ce qui collait une colonne du milieu
   a sa voisine — « 7 » contre « Archivage x2 », « 69.00 » contre la date. Elle etait
   pensee pour la DERNIERE colonne, qui doit affleurer le bord ; c'est donc a
   :last-child de porter cette exception, pas a l'alignement. */
.tbl td.r,.tbl th.r{text-align:right;padding-right:22px}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl .nm{color:var(--ink);font-weight:600}
.tbl .sub{font-size:12.5px;color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}

.pill{
  display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 9px;
  border-radius:20px;background:var(--blue-soft);color:var(--blue-deep);
  border:1px solid var(--blue-line);
}

/* appel a l'action */
.cta-band{
  background:var(--grad);border-radius:var(--r);padding:44px 46px;display:flex;align-items:center;
  gap:38px;flex-wrap:wrap;box-shadow:0 24px 50px -24px rgba(31,111,208,.7);
  position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;right:-90px;top:-100px;width:360px;height:360px;
  border-radius:50%;background:rgba(255,255,255,.1);
}
.cta-band h2{
  margin:0;font-size:clamp(21px,2.4vw,27px);font-weight:650;letter-spacing:-.03em;color:#fff;
  max-width:20ch;line-height:1.22;position:relative;
}
.cta-band p{margin:9px 0 0;font-size:15px;color:rgba(255,255,255,.86);max-width:46ch;position:relative}
.cta-band .acts{margin-left:auto;display:flex;gap:11px;position:relative;flex-wrap:wrap}

/* prose Markdown */
.prose{max-width:70ch}
.prose > *:first-child{margin-top:0}
.prose h2{
  margin:44px 0 14px;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.025em;font-weight:650;
  color:var(--ink);text-wrap:balance;line-height:1.25;
}
.prose h3{margin:32px 0 10px;font-size:18px;font-weight:640;color:var(--ink)}
.prose p{margin:0 0 18px;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-2)}
.prose li{margin-bottom:8px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
.prose code{font:14px var(--mono);background:var(--hair);padding:2px 6px;border-radius:4px;color:var(--ink)}
.prose blockquote{
  margin:24px 0;padding:16px 20px;border-left:3px solid var(--blue);
  background:var(--blue-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2);
}
.prose blockquote p:last-child{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 22px}
.prose th{
  text-align:left;font-weight:650;color:var(--ink);padding:10px 16px 10px 0;
  border-bottom:1px solid var(--ink);
}
.prose td{
  padding:11px 16px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:top;
}
.prose td:first-child{color:var(--ink);font-weight:600;width:34%}

/* extensions eligibles au domaine offert */
/* Cinq colonnes de prix : plus large que la colonne de texte, sinon la dernière —
   « Présence locale » — sort du cadre et se lit coupée. */
.tlds{margin-top:52px;max-width:900px}
.tlds .tbl th{white-space:nowrap}
.tlds .tbl th.r,.tlds .tbl td.r{padding-left:18px}
.tlds h2{margin:0 0 14px;font-size:18px;font-weight:640;color:var(--ink)}
.tlds ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tlds li{
  font:14px var(--mono);background:var(--tint);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:5px 11px;color:var(--ink-2);
}

/* ============================================================
   PIED DE PAGE CLAIR
   ============================================================ */
.foot{background:var(--tint);border-top:1px solid var(--line);padding:52px 0 0}
.foot .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:40px}
@media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}
.foot .about .wm{color:var(--ink)}
.foot .about .wm span{color:var(--muted)}
.foot .about p{margin:15px 0 0;font-size:14px;color:var(--muted);max-width:34ch;line-height:1.6}
.foot .ch{
  display:inline-flex;align-items:center;gap:8px;margin-top:17px;background:var(--card);
  border:1px solid var(--line);border-radius:30px;padding:6px 14px 6px 7px;font-size:12.5px;
  font-weight:640;color:var(--ink);box-shadow:var(--el-sm);
}
.foot h2{
  margin:0 0 13px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);font-weight:700;
}
.foot a.l{display:block;padding:5px 0;font-size:14px;color:var(--muted);transition:color .13s}
.foot a.l:hover{color:var(--blue)}
.foot .bar{
  border-top:1px solid var(--line);padding:19px 0 30px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--faint);
}
.foot .bar .r{display:flex;gap:20px;flex-wrap:wrap}

/* page introuvable */
.phead .attempted{margin-top:16px}
.phead .attempted code{
  font:13.5px var(--mono);background:rgba(255,255,255,.08);color:#DCE9F6;
  border:1px solid var(--night-line);border-radius:var(--r-sm);padding:5px 10px;
  word-break:break-all;
}
.lost{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:820px}
@media (max-width:640px){.lost{grid-template-columns:1fr}}
.lost a{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;box-shadow:var(--el-sm);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.lost a:hover{transform:translateY(-2px);border-color:var(--blue-line);box-shadow:var(--el)}
.lost .t{display:block;font-size:15.5px;font-weight:640;color:var(--ink)}
.lost .s{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ============================================================
   ESPACE CLIENT
   ============================================================ */
.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--muted)}

/* connexion */
.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
@media (max-width:820px){.login{grid-template-columns:1fr}}
.login-art{
  background:var(--night);color:var(--night-ink);padding:48px 46px;display:flex;
  flex-direction:column;position:relative;overflow:hidden;
}
.login-art::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 44% at 24% 22%, rgba(63,147,238,.30), transparent 68%);
}
.login-art > *{position:relative;z-index:1}
.login-art h1{
  margin:auto 0 0;font-size:clamp(22px,2.6vw,28px);font-weight:620;letter-spacing:-.028em;
  line-height:1.24;max-width:20ch;color:#fff;
}
.login-art p{margin:14px 0 0;font-size:14px;color:var(--night-mut);max-width:40ch;line-height:1.6}
.login-art .kv{display:flex;gap:34px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--night-line)}
.login-art .kv div{display:block}
.login-art .kv dt{font-size:19px;font-weight:660;color:#fff;font-variant-numeric:tabular-nums}
.login-art .kv dd{margin:2px 0 0;font-size:11.5px;color:var(--night-mut)}

.login-form{
  padding:48px 52px;display:flex;flex-direction:column;justify-content:center;
  background:var(--ground);max-width:560px;
}
.login-form h2{margin:0;font-size:22px;font-weight:640;letter-spacing:-.02em;color:var(--ink)}
.login-form > p{margin:6px 0 26px;font-size:14px;color:var(--muted)}
.login-foot{margin:22px 0 0;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}
.login-foot a{color:var(--blue);font-weight:600}

.field{margin-bottom:16px}
.field label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px;
}
.input{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
  background:var(--card);color:var(--ink);font-size:15px;font-family:inherit;
}
.input:focus{border-color:var(--blue);outline:2px solid var(--blue-soft);outline-offset:0}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  text-transform:none;letter-spacing:0;font-weight:400}
.row-between{display:flex;justify-content:space-between;align-items:center;margin:4px 0 22px}
.form-error{
  background:var(--crit-soft, #FBE9E7);border:1px solid #F3CFCB;color:#B3261E;
  border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;margin-bottom:16px;
}
.form-error:empty{display:none}
.form-error ul{margin:0;padding-left:18px}
.field-error{display:block;margin-top:5px;font-size:12.5px;color:#B3261E}
.field-error:empty{display:none}

/* application */
.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
@media (max-width:820px){.app{grid-template-columns:1fr}}
.side{
  background:var(--night);color:var(--night-ink);padding:20px 0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.side::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 30% at 20% 4%, rgba(63,147,238,.24), transparent 70%);
}
.side > *{position:relative;z-index:1}
.side .brand{padding:0 20px 18px;border-bottom:1px solid var(--night-line);margin-bottom:14px}
.side nav{display:flex;flex-direction:column;padding:0 12px;gap:2px}
.side nav a,.side nav .soon{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:14px;color:var(--night-mut);
}
.side nav a.on{
  background:rgba(63,147,238,.18);color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(63,147,238,.34);
}
.side nav .soon{opacity:.5;cursor:default}
.side nav em{margin-left:auto;font-style:normal;font:11px var(--mono);color:var(--night-mut)}
.side .ext{
  margin-top:auto;padding:16px 20px 0;border-top:1px solid var(--night-line);font-size:13px;
}
.side .ext a{color:var(--night-mut)}
.side .ext a:hover{color:#fff}

.topbar{
  display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--line);
  background:var(--ground);flex-wrap:wrap;
}
.topbar h1{margin:0;font-size:19px;font-weight:640;letter-spacing:-.02em;color:var(--ink)}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--muted)}
.avatar{
  width:29px;height:29px;border-radius:50%;background:var(--blue-soft);color:var(--blue-deep);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;border:1px solid var(--blue-line);
}
.app-body{padding:24px 28px 36px;display:flex;flex-direction:column;gap:22px;background:var(--ground)}
.app-note{margin:0;font-size:13px;color:var(--faint);max-width:70ch}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:17px 18px;box-shadow:var(--el-sm)}
.tile .l{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:700}
.tile .v{
  font-size:28px;font-weight:660;letter-spacing:-.035em;color:var(--ink);margin-top:8px;
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.tile .v .unit{font-size:15px;color:var(--muted);font-weight:500;letter-spacing:0}
.tile .d{font-size:12.5px;color:var(--muted);margin-top:5px}

.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--el-sm)}
.panel-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
.panel-h h2{margin:0;font-size:14px;font-weight:640;color:var(--ink)}
.panel-b{padding:16px 18px}
.panel-b.flush{padding:0 18px}

.usage{display:flex;align-items:center;gap:10px}
.bar-g{height:6px;border-radius:3px;background:var(--hair);overflow:hidden;width:110px;flex:none}
.bar-g i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue-2),var(--blue))}
.bar-g i.hi{background:linear-gradient(90deg,#D9A93F,#9A6A05)}
.usage .num{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.usage .num.warn{color:#8F6404;font-weight:600}

.banner{
  display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border-radius:var(--r);
  background:#FBF2DC;border:1px solid #F0DEB6;color:#8F6404;
}
.banner .t{font-size:14px;font-weight:640;color:var(--ink)}
.banner .s{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.6}
.pill.ok{background:var(--green-soft, #EFF8E5);color:#3E9E23;border-color:#D4EBBE}

/* tunnel de commande */
.order{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
@media (max-width:900px){.order{grid-template-columns:1fr}}
.choice{border:0;padding:0;margin:0 0 26px}
.choice legend{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);padding:0;margin-bottom:11px;
}
.opt{
  display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r);padding:15px 17px;margin-bottom:10px;background:var(--card);cursor:pointer;
}
.opt.sel{border-color:var(--blue-line);background:var(--blue-soft)}
.opt input{margin-top:3px;flex:none;accent-color:var(--blue);width:16px;height:16px}
.opt .body{flex:1;min-width:0}
.opt .t{display:block;font-size:14.5px;font-weight:640;color:var(--ink)}
.opt .s{display:block;margin-top:3px;font-size:13px;color:var(--muted);line-height:1.5}
.opt .p{margin-left:auto;text-align:right;flex:none}
.opt .p b{font-size:15.5px;font-weight:660;color:var(--ink);font-variant-numeric:tabular-nums}
.opt .p span{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}

.legend-note{margin:-4px 0 12px;font-size:13px;color:var(--muted);max-width:60ch}
.addresses{display:flex;flex-direction:column;gap:9px}
.address{display:flex;align-items:center;gap:10px}
.address .n{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--tint);
  border:1px solid var(--line);display:grid;place-items:center;
  font:11px var(--mono);color:var(--muted);
}
.address .input{flex:1;min-width:0;text-align:right}
.address .domain{font:14px var(--mono);color:var(--muted);flex:none}
@media (max-width:520px){
  .address{flex-wrap:wrap}
  .address .input{text-align:left}
}

.qty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.qty label{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}
.qty .input{width:110px;font-variant-numeric:tabular-nums}
.qty .hint{font-size:12.5px;color:var(--muted)}

.summary{
  border:1px solid var(--line);border-radius:var(--r);background:var(--tint);
  padding:20px;position:sticky;top:20px;
}
.summary h2{
  margin:0 0 14px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:700;
}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0;color:var(--ink-2)}
.sum-row .num{font-variant-numeric:tabular-nums;flex:none}
.sum-row.sub{color:var(--muted);font-size:12.5px}
.sum-row.total-line{border-top:1px solid var(--line);margin-top:6px;padding-top:11px;font-weight:600;color:var(--ink)}
.sum-row.then{margin-top:11px;border-top:1px dashed var(--line);padding-top:11px}
.sum-tot{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--ink);
}
.sum-tot .l{font-size:13.5px;font-weight:640;color:var(--ink)}
.sum-tot .v{font-size:23px;font-weight:660;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.paypal{
  width:100%;justify-content:center;background:#FFC439;color:#0C1620;border:0;
  margin-top:15px;font-weight:700;
}
.paypal:hover{background:#F0B429}
.pay-note{font-size:11.5px;color:var(--faint);margin:10px 0 0;line-height:1.5;text-align:center}

.receipt{margin:24px 0;display:flex;flex-direction:column;gap:0}
.receipt div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.receipt div:last-child{border-bottom:0}
.receipt dt{font-size:13.5px;color:var(--muted)}
.receipt dd{margin:0;font-size:14px;font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums}

/* administration */
.side-role{
  margin:0 0 12px;padding:0 20px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--night-mut);
}
.topbar .search{display:flex;gap:8px;align-items:center;margin-left:20px}
.topbar .search .input{width:260px}
@media (max-width:760px){.topbar .search{margin-left:0;width:100%}.topbar .search .input{flex:1;width:auto}}
.topbar .retour{font-size:13px;color:var(--muted);white-space:nowrap}
.topbar .retour:hover{color:var(--blue)}
.topbar .ref{font-size:12.5px;color:var(--faint)}
.lien{color:var(--blue);font-weight:600}
.lien:hover{text-decoration:underline}
.fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0}
@media (max-width:720px){.fiche{grid-template-columns:1fr}}
.fiche > div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair)}
.fiche dt{flex:none;width:44%;font-size:13px;color:var(--muted)}
.fiche dd{margin:0;font-size:13.5px;color:var(--ink);line-height:1.5}

/* page autonome (erreur) */
.standalone{max-width:60ch;margin:0 auto;padding:96px 24px}
.standalone h1{margin:0 0 14px;font-size:30px;letter-spacing:-.03em;font-weight:650}
.standalone p{color:var(--muted)}
.standalone .ref{font-size:14px}
.standalone code{
  font:14px var(--mono);background:var(--hair);padding:2px 6px;border-radius:4px;color:var(--ink);
}

/* administration — formulaires du catalogue */
.panel-f{padding:14px 18px;border-top:1px solid var(--line);background:var(--tint)}
.panel-b > label{display:block;margin-bottom:14px}
.panel-b > label > span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.panel-b > label > span.sub{margin:5px 0 0}
.panel-b > label:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.fs{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:0 0 14px}
.fs legend{font-size:12.5px;color:var(--muted);padding:0 5px}
.fs .check{margin-right:16px}
.fs .sub{display:block;margin-top:9px}
textarea.input{resize:vertical;font:14px var(--mono);line-height:1.6}
.input-num{width:100px;text-align:right;font-variant-numeric:tabular-nums}
.topbar .sep{color:var(--faint);font-weight:400;margin:0 2px}
.app-note.ok{color:#3E9E23;font-weight:600}
.app-note.wa{color:#8F6404;font-weight:600}
.newrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.newrow > label{margin:0}
.newrow .input{min-width:120px}
.newrow .check{align-self:center;margin-bottom:7px}

/* boutique */
.steps{font-size:13px;letter-spacing:.02em;opacity:.85;margin:0 0 10px}
.shop{max-width:38rem}
.shop > label{display:block;margin:0 0 16px}
.shop > label > span{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.shop > label > span.sub{margin:6px 0 0;font-size:12.5px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:11px 0;cursor:pointer}
.opt input{margin-top:4px;flex:none}
.opt b{display:block;font-weight:640;color:var(--ink);font-size:15px}
.opt em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.55}
/* Ligne de produit : le nom porte, le detail suit. Sans hierarchie, la page
   ressemble a un formulaire administratif — or c'est ici qu'on vend. */
.qty{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--hair)}
.qty:last-child{border-bottom:0}

/* Ce qui empêche d'aller plus loin, dit en tête de formulaire. */
.problems{margin:0;padding-left:18px;color:#D8232A;font-weight:600;font-size:14.5px}

/* Un champ refusé par le serveur : le cadre lui pose cette classe, on l'entoure en rouge. */
.input.input-validation-error{border-color:#D8232A;background:#FDEDED}
.input.input-validation-error:focus{border-color:#D8232A;outline-color:#F6CFCF}

/* Le champ piège des formulaires : hors de l'écran, pas « display:none » — certains robots
   sautent ce qui est masqué de cette façon. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Le nom d'une boîte, à la commande : le champ, puis le domaine sur la même ligne. Fautif,
   il est entouré en rouge et dit pourquoi juste dessous. Les sélecteurs sont lourds à
   dessein : ils passent devant « .panel-b > label », qui empile tout en colonne. */
.panel-b > label.addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.panel-b > label.addr .input{flex:0 1 340px;min-width:180px}
.panel-b > label.addr > span.mono{
  display:inline;margin:0;font:14px var(--mono);font-weight:400;color:var(--muted);
}
.panel-b > label.addr.err .input{border-color:#D8232A;background:#FDEDED}
.panel-b > label.addr.err .input:focus{border-color:#D8232A;outline-color:#F6CFCF}
.panel-b > label.addr > span.why{
  display:block;flex-basis:100%;margin:0;font-size:13px;font-weight:600;color:#D8232A;
}
.qty:hover{background:linear-gradient(90deg,rgba(31,111,208,.035),transparent 70%)}
.qty > span{flex:1}
.qty b{
  display:block;font-weight:660;color:var(--ink);font-size:17px;letter-spacing:-.015em;
  line-height:1.25;
}
.qty em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.qty .input-num{width:86px;font-size:16px;padding:9px 10px;font-weight:600}
.cart{position:sticky;top:20px}
.cart-l,.cart-t{list-style:none;margin:0;padding:0}
.cart-l li,.cart-t li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.cart-l li{border-bottom:1px solid var(--hair)}
.cart-l em{font-style:normal;color:var(--faint);font-size:12.5px}
.cart-t{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.cart-t li span{color:var(--muted)}
.cart-t li.tot{font-size:16px;font-weight:660;color:var(--ink);border-top:1px solid var(--ink);margin-top:6px;padding-top:9px}
.cart-t li.tot span{color:var(--ink)}

/* Formulaire de commande — une seule graisse pour tous les libellés.
   Ils etaient plus pales que le titre de section, ce qui faisait lire la page
   en deux temps. Meme taille, meme couleur, du haut en bas. */
.shop .panel-b > label > span,
.shop .panel-b .grid2 > label > span{
  font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.005em;margin-bottom:6px;
}
.shop .panel-b > label > span.sub,
.shop .panel-b .grid2 > label > span.sub{
  font-weight:400;color:var(--muted);font-size:12.5px;letter-spacing:0;
}
.shop select.input{appearance:auto;background:#fff}
/* Indicatif et numero sur une ligne : le pays d'abord, comme on le compose. */
.tel{display:flex;gap:8px}
.tel select{flex:none;width:112px}
.tel input{flex:1;min-width:0}

/* Le document de facture, cote administration — meme mise en page que le PDF.
   Le resumer autrement ferait decrire au telephone un papier qu'on n'a pas sous
   les yeux, et la conversation porterait sur l'ecart plutot que sur le probleme. */
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
     padding:30px 34px;box-shadow:var(--el-sm)}
.doc-hd{display:flex;justify-content:space-between;gap:24px;margin-bottom:24px}
.doc-brand{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:15px}
.doc-brand .mark{width:26px;height:26px;border-radius:6px;background:#D8232A;display:grid;place-items:center}
.doc-em{margin:0;line-height:1.6}
.doc-ti{text-align:right}
.doc-ti .t{font-size:21px;font-weight:700;color:var(--blue);letter-spacing:.05em}
.doc-ti p{margin:12px 0 0;line-height:1.7}
.doc-to{margin-bottom:20px}
.doc-to .lbl{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
             color:var(--faint);font-weight:700}
.doc-to b{display:block;font-size:16px;margin-top:4px}
.doc-tot{margin:16px 0 0 auto;width:300px;border-collapse:collapse;font-size:14px}
.doc-tot td{padding:4px 0;border:0}
.doc-tot td.l{color:var(--muted)}
.doc-tot td.r{text-align:right;font-variant-numeric:tabular-nums}
.doc-tot tr.g td{border-top:2px solid var(--ink);padding-top:10px;font-size:18px;font-weight:700}
.doc-tot tr.b td{color:var(--blue);font-weight:700}
.pill.bl{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)}

/* Filtres d'une liste : des onglets discrets, l'actif souligne en bleu. */
.filters{display:flex;gap:4px;flex-wrap:wrap}
.filters a{
  text-decoration:none;font-size:13.5px;font-weight:600;color:var(--muted);
  padding:7px 13px;border-radius:6px;border:1px solid transparent;
}
.filters a:hover{background:#fff;border-color:var(--line)}
.filters a.on{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)}
.tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* fiche commande : deux panneaux cote a cote, un seul sous 900px */
.app-body .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:900px){.app-body .cols{grid-template-columns:1fr}}

/* formulaire empile : un champ, son libelle, son bouton */
.stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:18px;max-width:44ch}
.stack input{width:100%}

/* pastille de retard dans la barre laterale : elle suit le client sur tous les ecrans */
.side nav a .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
                 background:#D8232A;margin-left:6px;vertical-align:middle}

/* le bandeau d'alerte : rouge, et seulement en cas de retard reel */
.banner.late{background:#FDEDED;border-color:#F6CFCF;color:#D8232A;align-items:center}
.banner.late .t{color:#8E1418}
.banner.late .s{color:#D8232A}
.banner.late .btn{margin-left:auto;flex:none}

/* deux actions dans une meme cellule : elles se suivent au lieu de s'empiler */
.tbl td form.inline{display:inline-block;margin-left:6px}
.tbl td form.inline:first-of-type{margin-left:0}

/* Longueur des jauges par classe, jamais par attribut style : style-src 'self' interdit les
   styles en ligne et le navigateur les ignore SANS rien signaler. La jauge gardait alors sa
   largeur par defaut — pleine — et annoncait a chaque client une boite saturee. */
.bar-g i.w0{width:0%}
.bar-g i.w5{width:5%}
.bar-g i.w10{width:10%}
.bar-g i.w15{width:15%}
.bar-g i.w20{width:20%}
.bar-g i.w25{width:25%}
.bar-g i.w30{width:30%}
.bar-g i.w35{width:35%}
.bar-g i.w40{width:40%}
.bar-g i.w45{width:45%}
.bar-g i.w50{width:50%}
.bar-g i.w55{width:55%}
.bar-g i.w60{width:60%}
.bar-g i.w65{width:65%}
.bar-g i.w70{width:70%}
.bar-g i.w75{width:75%}
.bar-g i.w80{width:80%}
.bar-g i.w85{width:85%}
.bar-g i.w90{width:90%}
.bar-g i.w95{width:95%}
.bar-g i.w100{width:100%}

.mt{margin-top:16px}
.mt-l{margin-top:32px}
.mb{margin-bottom:20px}
.ml{margin-left:12px}
.narrow{max-width:34rem}
.center{text-align:center}
.flat{margin:0}

/* souverainete : trois affirmations, chacune sur sa carte */
.sec.sov{background:var(--card);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:8px}
@media (max-width:860px){.sov-grid{grid-template-columns:1fr}}
.sov-grid article{border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;background:var(--ground)}
.sov-ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:9px;
         background:var(--blue-soft);color:var(--blue-deep);margin-bottom:14px}
.sov-grid h3{margin:0 0 8px;font-size:16.5px;font-weight:660;letter-spacing:-.01em}
.sov-grid p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.sov-more{margin:26px 0 0}

/* espace client : dans une grille, l'etiquette n'est plus enfant direct du panneau */
.app-body .panel-b .grid2 > label > span:first-child{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}

/* Le recapitulatif de validation d'ASP.NET cache son <li> vide par style="display:none" —
   un style en ligne, que la CSP bloque : la puce apparaissait seule. */
.validation-summary-valid{display:none}
.validation-summary-errors ul{margin:0;padding-left:18px}

/* serveurs de noms : deux options, l'une a cote de l'autre */
.ns-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (max-width:640px){.ns-choice{grid-template-columns:1fr}}
.ns-choice label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;background:var(--card)}
.ns-choice label:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.ns-choice input{margin-top:3px;flex:none}
.ns-choice b{font-weight:650;font-size:14px}

/* espace client et administration : etiquettes de formulaire lisibles, pas un sous-titre gris */
.app-body .panel-b label > span:first-child,
.app-body .panel-b .grid2 > label > span:first-child{
  font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;margin-bottom:6px}
.app-body .panel-b label > span.sub{font-weight:400;color:var(--muted)}
.app-body .panel-b .input{font-size:15px;padding:10px 12px}
.app-body .panel-b .app-note{font-size:14px;line-height:1.55}

/* barres laterales : un pictogramme par entree, qui suit la couleur du lien */
.side nav a .ni{flex:none;opacity:.7}
.side nav a.on .ni{opacity:1}
.side nav a:hover .ni{opacity:1}
.side .ext{display:flex;flex-direction:column;gap:8px}
.side .ext a{display:inline-flex;align-items:center;gap:8px}
.side .ext a .ni{opacity:.7}

/* un petit formulaire sur une ligne : un ou deux champs, un bouton */
.inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:12px}
.inline-form label{display:flex;flex-direction:column;min-width:160px}
.inline-form label.grow{flex:1;min-width:240px}
.inline-form .btn{margin-bottom:1px}