/* ============================================================
   Wardyn — Portail client · « Poste de Garde » (portal.css v3 — THÈME CLAIR)
   Papier #F5F8F9 · cartes blanches · encre nuit #0D1C2E · teal (la garde) ·
   ambre (le temps) · rose (l'exposition) · vert (l'état sain).
   Seul l'en-tête garde le bandeau nuit (identité de marque).
   Deux voix : Manrope (l'humain) · PlexMono (la machine)
   Signature : le coffre à deux gorges (Verrous A/B) · la seam de rapport · le radar en veille.
   Contrastes WCAG AA/AAA — ratios calculés, pas supposés :
   ink/blanc 17,2 · mut/blanc 7,7 · faint/papier 5,2 · teal-texte/blanc 6,5 ·
   blanc/bouton 5,6 (hover 7,3) · ok 5,6 · ambre 5,5 · rose 5,6 (sur leurs tints).
   ============================================================ */
@font-face{ font-family:'Manrope'; src:url('/fonts/manrope-var.woff2') format('woff2'); font-weight:400 800; font-display:swap }
@font-face{ font-family:'PlexMono'; src:url('/fonts/plexmono-400.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face{ font-family:'PlexMono'; src:url('/fonts/plexmono-700.woff2') format('woff2'); font-weight:700; font-display:swap }

/* ─────────────────── 1. TOKENS — thème CLAIR (défaut) ─────────────────── */
:root{
  /* surfaces (le slot est légèrement creusé sous la carte blanche) */
  --bg0:#F5F8F9; --bg1:#EBF1F2; --surface:#FFFFFF; --surface-2:#FFFFFF; --slot:#F1F5F6; --field:#FFFFFF;
  /* encres */
  --ink:#0D1C2E; --mut:#41556B; --faint:#566A80;
  /* teal = la garde */
  --teal:#0B7565; --teal-night:#0A6653;
  --teal-btn:#0B7565; --teal-btn-h:#086250; --on-teal:#FFFFFF;
  --teal-soft:#DDF3EE; --teal-line:#9FD8CC;
  --line-input:#7C8FA0; /* bordure de champ ≥3:1 sur blanc (WCAG 1.4.11) */
  /* sémantique (texte sombre sur tint clair — tous ≥5,5:1) */
  --ok:#0F6B42;   --ok-tint:#DFF1E7;
  --time:#8A520C; --time-tint:#F8ECDA;
  --risk:#A03344; --risk-dot:#A03344; --risk-tint:#F8E3E7;
  --neutral:#41556B; --neutral-tint:#E7EDEF;
  /* lignes / focus */
  --line:#E3E9EC; --line-2:#DCE4E7; --line-3:#C7D3D8;
  --focus:#0B7565;
  /* rayons */
  --r-sm:8px; --r:12px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  /* élévations (ombres douces, jamais criardes) */
  --elev-1:0 1px 2px rgba(13,28,46,.05),0 8px 22px -16px rgba(13,28,46,.18);
  --elev-2:0 1px 2px rgba(13,28,46,.05),0 20px 44px -28px rgba(13,28,46,.22);
  --elev-pop:0 30px 60px -28px rgba(13,28,46,.30);
  --slot-inset:inset 0 1px 2px rgba(13,28,46,.04);
  --lift-glow:0 14px 30px -14px rgba(11,117,101,.35);
  --glow-on:0 0 0 1px var(--teal-line),0 0 22px -8px rgba(11,117,101,.35);
  /* espacement */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:56px;
  --pas:56px; --max:1040px;
  /* typo + motion */
  --sans:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'PlexMono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --dur-tap:120ms;--dur-hover:180ms;--dur-state:320ms;--dur-reveal:650ms;
  --ease-garde:cubic-bezier(.2,.7,.2,1);
  --ease-verrou:cubic-bezier(.34,1.4,.64,1);
  --ease-pivot:cubic-bezier(.45,0,.55,1);
}

/* ─────────────────── 2. RESET / BASE ─────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg0); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55; font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
/* Radar en veille : très discret sur papier, coin haut-droit — jamais sous des données */
body::before{
  content:""; position:fixed; top:-180px; right:-140px; width:620px; height:620px; z-index:0; pointer-events:none;
  background:
    conic-gradient(from -20deg at 50% 50%, rgba(11,117,101,.10), transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(11,117,101,.06) 59%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(11,117,101,.06) 41%, transparent 42%);
  opacity:.6; -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,transparent 70%); mask:radial-gradient(circle at 50% 50%,#000 0,transparent 70%);
  animation:sweep 12s var(--ease-pivot) infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg) } }
.hd,main,.ft{ position:relative; z-index:1 }
a{ color:var(--teal-night); text-decoration:none }
::selection{ background:rgba(11,117,101,.16) }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(18px,4vw,22px) }
.skip{ position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--ink); padding:10px 16px; border-radius:0 0 var(--r) 0; z-index:50; box-shadow:var(--elev-1) }
.skip:focus{ left:0 }

/* ─────────────────── 3. EN-TÊTE — bandeau nuit (identité de marque) ─────────────────── */
.hd{ position:sticky; top:0; z-index:20; min-height:62px; display:flex; align-items:center;
  background:#0B1626; border-bottom:1px solid rgba(255,255,255,.08) }
.hd .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100% }
.brand{ display:flex; align-items:center; gap:10px; min-width:0 }
.brand .radar{ width:18px; height:18px; flex:none; color:#2FC4A8 }
.logo{ font-weight:800; font-size:21px; letter-spacing:-.03em; color:#fff; text-decoration:none }
.cobrand{ display:flex; flex-direction:column; gap:1px; padding-left:12px; margin-left:2px; border-left:1px solid rgba(255,255,255,.14); min-width:0 }
.cobrand .k{ font-family:var(--mono); font-weight:700; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:#8CA3B4 }
.cobrand .n{ font-weight:700; font-size:13px; color:#EAF4F2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hd-right{ display:flex; align-items:center; gap:12px; font-size:13px; color:#8CA3B4 }
.who{ display:inline-flex; align-items:center; gap:8px }
.hd .who b{ color:#EAF4F2; font-weight:700 }
.dot{ width:26px; height:26px; flex:none; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal-night); font-family:var(--mono); font-weight:700; font-size:12px; border:1px solid var(--teal-line) }
.hd .dot{ background:#16304B; color:#2FC4A8; border-color:rgba(255,255,255,.14) }
/* boutons DANS l'en-tête nuit : teal vif lisible sur sombre (8,3:1) */
.hd .btn.ghost{ color:#2FC4A8; border-color:rgba(47,196,168,.45) }
.hd .btn.ghost:hover{ background:rgba(47,196,168,.12) }

main{ padding:var(--s7) 0 var(--s9); min-height:64vh }
.loading{ color:var(--mut); font-family:var(--mono); font-size:13px; padding:48px 0; display:inline-flex; align-items:center; gap:12px }
.loading::before{ content:""; width:18px; height:18px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--teal-btn),transparent 70%); -webkit-mask:radial-gradient(circle,transparent 5px,#000 6px); mask:radial-gradient(circle,transparent 5px,#000 6px);
  animation:sweep 1.1s linear infinite }
.ft{ border-top:1px solid var(--line-2); color:var(--mut); font-size:12px; padding:22px 0; margin-top:var(--s8); background:var(--bg1) }
.ft .wrap{ font-family:var(--mono); letter-spacing:.02em }

/* ─────────────────── 4. TYPOGRAPHIE ─────────────────── */
h1{ font-weight:800; font-size:clamp(24px,3.4vw,30px); line-height:1.12; letter-spacing:-.025em; margin:0 0 var(--s2); color:var(--ink); text-wrap:balance }
/* KICKER de section + SEAM : la voix machine, chaque section ouvre par le filet gradué + tick radar */
h2{ position:relative; font-family:var(--mono); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--mut); margin:var(--s8) 0 var(--s4); padding-top:var(--s6);
  background-image:linear-gradient(90deg,transparent,var(--line-3) 8%,var(--line-3) 92%,transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:top left; display:flex; align-items:center; gap:10px }
h2::before{ content:""; width:16px; height:2px; border-radius:2px; background:var(--teal-btn); flex:none }
h2 .n{ font-family:var(--mono); font-weight:700; color:var(--teal-night); font-variant-numeric:tabular-nums }
h1 + .sub{ margin-top:0 }
.sub{ color:var(--mut); font-weight:500; font-size:15px; line-height:1.55; margin:0 0 var(--s3); max-width:64ch }
.sub strong,.sub b{ color:var(--ink); font-weight:700 }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }

/* ─────────────────── 5. CARTES ─────────────────── */
.card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:var(--s4); box-shadow:var(--elev-2) }
/* carte-ACTION (ajout domaine/client/invitation/thème) = emplacement, pas donnée */
.card.act{ background:var(--bg1); border:1.5px dashed var(--line-3); box-shadow:none }
.card .lbl{ display:block; font-weight:700; font-size:13px; color:var(--ink); margin:0 0 var(--s2) }
.card .hint,.empty{ color:var(--mut); font-size:13px; margin:var(--s2) 0 0 }
.gsc{ margin-top:var(--s2) }
.gsc > b{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut) }

/* centrées : login, co-brand, invite, liens invalides */
.center{ max-width:440px; margin:9vh auto 0; text-align:center; position:relative }
.center h1{ text-wrap:balance }
.center .g{ display:grid; gap:12px; margin-top:22px }
.center .supertitle{ font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-night); margin:0 0 var(--s3) }
.sep{ display:flex; align-items:center; gap:12px; color:var(--faint); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:2px 0 }
.sep::before,.sep::after{ content:""; flex:1; height:1px; background:var(--line-3) }

/* ─────────────────── 6. BOUTONS ─────────────────── */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--teal-btn); color:var(--on-teal); border:none; border-radius:var(--r);
  padding:11px 18px; font-family:var(--sans); font-weight:700; font-size:14px; line-height:1;
  cursor:pointer; text-decoration:none; white-space:nowrap; isolation:isolate;
  transition:transform var(--dur-tap) var(--ease-garde), background var(--dur-hover) var(--ease-garde) }
.btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--lift-glow); opacity:0; transition:opacity var(--dur-hover) var(--ease-garde); z-index:-1 }
.btn:hover{ background:var(--teal-btn-h); transform:translateY(-2px) }
.btn:hover::after{ opacity:1 }
.btn:active{ transform:scale(.985) }
.btn.ghost{ background:transparent; color:var(--teal-night); border:1.5px solid var(--teal-line) }
.btn.ghost:hover{ background:var(--teal-soft); transform:translateY(-1px) }
.btn.ghost::after{ display:none }
.btn.danger{ background:var(--risk-tint); color:var(--risk); border:1.5px solid var(--risk-dot) }
.btn.danger:hover{ background:#F3D4DB }
.btn.danger::after{ display:none }
.btn.sm{ padding:8px 13px; font-size:12.5px; border-radius:var(--r-sm) }
.btn:disabled,.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none }
.btn:disabled::after{ opacity:0 }
.btn:disabled:hover{ background:var(--teal-btn); transform:none }
.btn .ico{ width:15px; height:15px; flex:none }
/* bouton OCCUPÉ : spinner au centre, texte masqué, largeur figée par le JS */
.btn.busy{ color:transparent; pointer-events:none; opacity:1 }
.btn.busy::before{ content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--on-teal),transparent 70%);
  -webkit-mask:radial-gradient(circle,transparent 4px,#000 5px); mask:radial-gradient(circle,transparent 4px,#000 5px);
  animation:sweep .9s linear infinite }
.btn.ghost.busy::before,.btn.danger.busy::before{ background:conic-gradient(from 0deg,var(--teal-night),transparent 70%) }

/* ─────────────────── 7. CHAMPS ─────────────────── */
input,select,textarea{ width:100%; padding:11px 13px; background:var(--field); color:var(--ink);
  border:1.5px solid var(--line-input); border-radius:10px; font-size:15px; font-family:var(--sans);
  transition:border-color var(--dur-hover) var(--ease-garde), box-shadow var(--dur-hover) var(--ease-garde) }
input::placeholder{ color:var(--faint) }
input:hover,select:hover{ border-color:#63798C }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--teal-btn); box-shadow:0 0 0 3px rgba(11,117,101,.15) }
select{ appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230A6653' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center }
.field-err{ font-family:var(--mono); font-size:12px; color:var(--risk); margin-top:6px }
/* champ étiqueté : libellé VISIBLE au-dessus (WCAG 3.3.2), placeholder = simple exemple */
.fld{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.fld > label{ font-weight:700; font-size:13px; color:var(--ink) }
.fld > label small{ font-weight:500; color:var(--mut) }
.row.frm{ align-items:flex-end } /* les boutons s'alignent sur les champs, pas sur les labels */
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.rowb{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap }
/* préfixe collé (slug marque blanche : app.wardyn.fr/c/…) */
.prefixed{ display:flex; align-items:stretch; flex:1; min-width:220px }
.prefixed .pfx{ display:flex; align-items:center; padding:0 12px; background:var(--bg1); border:1.5px solid var(--line-input); border-right:none; border-radius:10px 0 0 10px; font-family:var(--mono); font-size:13px; color:var(--mut); white-space:nowrap }
.prefixed input{ border-radius:0 10px 10px 0 }

/* ─────────────────── 8. LISTES / ITEMS (logements creusés dans la carte) ─────────────────── */
.list{ display:grid; gap:10px }
.item{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--slot); border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px 16px;
  box-shadow:var(--slot-inset); flex-wrap:wrap; min-height:58px; position:relative;
  transition:transform var(--dur-hover) var(--ease-garde), border-color var(--dur-hover) var(--ease-garde), box-shadow var(--dur-hover) var(--ease-garde) }
.item::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--teal-btn); opacity:0; transition:opacity var(--dur-hover) var(--ease-garde) }
.item:hover{ transform:translateY(-1px); border-color:var(--line-3); box-shadow:var(--slot-inset),var(--elev-1) }
.item:hover::before{ opacity:.7 }
.item .l{ min-width:0; flex:1 }
.item .l .fq{ font-weight:700; font-size:15.5px; letter-spacing:-.01em; color:var(--ink); word-break:break-word }
.item .l .meta{ font-size:13px; color:var(--mut); margin-top:3px; font-variant-numeric:tabular-nums }
.item .row{ flex:none }
/* item ARMÉ = les deux verrous seatés */
.item.armed{ border-color:var(--teal-line); background:#F3FAF8; box-shadow:var(--slot-inset),var(--glow-on) }
.item.armed::before{ opacity:1 }

.empty{ color:var(--mut); font-size:13.5px; padding:16px 4px; display:flex; align-items:center; gap:12px }
.empty::before{ content:""; width:26px; height:26px; flex:none; border-radius:50%;
  border:1.5px dashed var(--line-3); background:radial-gradient(circle at 50% 50%,rgba(11,117,101,.12),transparent 60%) }

/* ─────────────────── 9. LE COFFRE À DEUX GORGES (Verrous A/B) ─────────────────── */
.locks{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap }
.lock{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-pill); border:1px solid var(--line-3); background:var(--neutral-tint); color:var(--mut);
  transition:color var(--dur-state) var(--ease-verrou), background var(--dur-state) var(--ease-verrou), border-color var(--dur-state) var(--ease-verrou) }
.lock .pt{ width:9px; height:9px; flex:none; border-radius:50%; border:1.5px solid currentColor; background:transparent;
  transition:background var(--dur-state) var(--ease-verrou), box-shadow var(--dur-state) var(--ease-verrou), transform var(--dur-state) var(--ease-verrou) }
.lock.on{ color:var(--teal-night); background:var(--teal-soft); border-color:var(--teal-line) }
.lock.on .pt{ background:var(--teal-night); box-shadow:0 0 0 3px rgba(11,117,101,.15); transform:translateY(1px) }
/* rung de liaison A→B : se remplit à mesure que les gorges se ferment */
.rung{ width:34px; height:2px; border-radius:2px; flex:none; position:relative; background:var(--line-3); overflow:hidden }
.rung::after{ content:""; position:absolute; inset:0; width:var(--fill,0%); background:linear-gradient(90deg,var(--teal-btn),var(--teal-night)); transition:width var(--dur-reveal) var(--ease-verrou) }

/* ─────────────────── 10. BADGES (point-statut = redondance non-couleur) ─────────────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; font-variant-numeric:tabular-nums }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }
.badge.ok{ background:var(--ok-tint); color:var(--ok) }
.badge.warn{ background:var(--time-tint); color:var(--time) }
.badge.fail{ background:var(--risk-tint); color:var(--risk) }
.badge.mut{ background:var(--neutral-tint); color:var(--neutral) }
.badge.adj{ background:var(--time-tint); color:var(--time) } /* « CONTRASTE AJUSTÉ » */

.chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.02em;
  background:var(--teal-soft); border:1px solid var(--teal-line); color:var(--teal-night);
  border-radius:var(--r-sm); padding:5px 10px; margin:6px 6px 0 0; cursor:pointer;
  transition:transform var(--dur-hover) var(--ease-garde), border-color var(--dur-hover) var(--ease-garde) }
.chip:hover{ transform:translateY(-2px); border-color:var(--teal-night) }
.chip.ping{ animation:ping 1s var(--ease-pivot) 1 }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 var(--teal-line) } 100%{ box-shadow:0 0 0 8px transparent } }

/* ─────────────────── 11. MESSAGE FLASH ─────────────────── */
.msg{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r); font-size:13.5px; font-weight:600; margin:12px 0;
  border-left:3px solid currentColor; animation:flashin var(--dur-state) var(--ease-garde) }
.msg.err{ background:var(--risk-tint); color:var(--risk) }
.msg.ok{ background:var(--ok-tint); color:var(--ok) }
.msg::before{ content:""; width:16px; height:16px; flex:none; background:currentColor;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat }
.msg.ok::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.msg.err::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") }
@keyframes flashin{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
/* toast fixe : le retour d'action est TOUJOURS visible, où qu'on ait cliqué */
#toast{ position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; gap:8px; width:min(480px,92vw); pointer-events:none }
#toast .msg{ margin:0; box-shadow:var(--elev-pop); pointer-events:auto; flex-wrap:wrap }
#toast .msg .btn{ margin-left:auto }
#toast .msg.out{ opacity:0; transform:translateY(-6px); transition:opacity 180ms var(--ease-garde),transform 180ms var(--ease-garde) }
.msg.rearm{ animation:flashin var(--dur-state) var(--ease-garde) }

/* barre de progression globale des re-rendus (sous l'en-tête) */
#busybar{ position:sticky; top:62px; z-index:19; height:2px;
  background:linear-gradient(90deg,transparent,var(--teal-btn),transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  animation:busyslide 1s var(--ease-pivot) infinite }
@keyframes busyslide{ from{ background-position:-40% 0 } to{ background-position:140% 0 } }

/* lisible uniquement au lecteur d'écran */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* panneau guide Verrou A : deux méthodes (Search Console / DNS) */
.item .dnsg{ flex-basis:100% }
.vgm{ background:var(--bg1); border:1px solid var(--line-2); border-radius:var(--r); padding:12px 14px; margin-top:10px }
.vgm-t{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; font-size:13.5px; color:var(--ink); margin:0 0 6px }
.vgm .hint{ margin:0 0 10px }
.vgm .row{ gap:8px }
.dnsrec{ display:grid; gap:8px; margin:12px 0 }
.dnsrec .f{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.dnsrec .k{ font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); width:64px; flex:none }
.dnsrec code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--bg1);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:5px 10px; word-break:break-all }

/* ─────────────────── 12. BARRE KPI (vue courtier) ─────────────────── */
.kpi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:var(--s2) 0 var(--s4) }
.stat{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--elev-1); position:relative }
.stat.alert{ box-shadow:var(--elev-1),inset 3px 0 0 var(--risk) }
.stat .v{ font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1 }
.stat .v small{ font-size:14px; color:var(--mut); font-weight:700 }
.stat .k{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-top:8px }
/* tuiles KPI cliquables (mènent au module concerné) */
button.stat{ font:inherit; text-align:left; cursor:pointer; width:100%;
  transition:transform var(--dur-hover) var(--ease-garde), border-color var(--dur-hover) var(--ease-garde), box-shadow var(--dur-hover) var(--ease-garde) }
.stat[data-go]:hover{ border-color:var(--teal-line); box-shadow:var(--elev-1),var(--glow-on); transform:translateY(-1px) }
.stat .gr{ font-family:var(--mono); font-weight:700; font-size:15px; margin-left:4px }
.stat .gr.ok{ color:var(--ok) } .stat .gr.warn{ color:var(--time) } .stat .gr.risk{ color:var(--risk) }

/* ─────────────────── 13. JAUGE ARC-RADAR (score) ─────────────────── */
.gauge{ display:block; height:auto }
.gauge .gt{ stroke:var(--line-2) }
.gauge .gv{ animation:gdraw var(--dur-reveal) var(--ease-pivot) both }
@keyframes gdraw{ from{ stroke-dashoffset:var(--len,0) } to{ stroke-dashoffset:0 } }
.g-ok .gv{ stroke:var(--ok) } .g-warn .gv{ stroke:var(--time) } .g-risk .gv{ stroke:var(--risk) }
.gauge .gn{ stroke:var(--teal-night) } .gauge .gnh{ fill:var(--teal-night) }
.gauge .gs{ fill:var(--ink); font-family:var(--mono); font-weight:700; font-size:30px; letter-spacing:-.02em }
.gauge .ggl{ fill:var(--mut); font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em }
.score{ display:inline-flex; align-items:center; gap:10px }
.score .delta{ font-family:var(--mono); font-weight:700; font-size:12px; font-variant-numeric:tabular-nums }
.score .delta.up{ color:var(--ok) } .score .delta.down{ color:var(--risk) }

/* ─────────────────── 14. TUILE CLIENT (courtier) + drill-down ─────────────────── */
.clientRow{ flex-direction:column; align-items:stretch }
.clientRow .mini{ display:flex; align-items:center; gap:12px }
.drill{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-state) var(--ease-pivot) }
.drill.open{ grid-template-rows:1fr; margin-top:10px }
.drill > div{ overflow:hidden }
.drill .panel{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:14px 16px; font-size:13px; color:var(--mut); line-height:1.7 }

/* switch audit actif */
.sw{ position:relative; width:44px; height:24px; flex:none; border-radius:var(--r-pill); background:var(--line-3); border:1px solid var(--line-input); cursor:pointer; transition:background var(--dur-state) var(--ease-verrou) }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(13,28,46,.25); transition:transform var(--dur-state) var(--ease-verrou) }
.sw.on{ background:var(--teal-btn) } .sw.on::after{ transform:translateX(20px) }

/* ─────────────────── 14bis. EXPÉRIENCE GUIDÉE ─────────────────── */
html{ scroll-behavior:smooth }
section[id]{ scroll-margin-top:84px }
.pulse{ animation:pulse 1.2s var(--ease-verrou) 1 }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(11,117,101,.35) } 100%{ box-shadow:0 0 0 14px transparent } }

/* onglets : un module = un onglet, seul le panneau actif est affiché */
.tabpane{ display:none }
.tabpane.active{ display:block; animation:flashin var(--dur-state) var(--ease-garde) }
.tabpane > h2:first-child{ margin-top:0 }

/* layout à deux colonnes : sidebar sticky + contenu */
.layout{ display:grid; grid-template-columns:212px minmax(0,1fr); gap:32px; align-items:start }
.side{ position:sticky; top:78px; display:flex; flex-direction:column; gap:6px }
.snav{ display:flex; flex-direction:column; gap:2px }
a.sl{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--mut);
  font-weight:600; font-size:13.5px; border:1px solid transparent; text-decoration:none;
  transition:background var(--dur-hover) var(--ease-garde), color var(--dur-hover) var(--ease-garde) }
a.sl:hover{ background:var(--bg1); color:var(--ink) }
a.sl.active{ background:var(--teal-soft); color:var(--teal-night); border-color:var(--teal-line) }
a.sl .ic{ width:16px; height:16px; flex:none }
a.sl .bd{ margin-left:auto; font-family:var(--mono); font-weight:700; font-size:10.5px; font-variant-numeric:tabular-nums;
  background:var(--neutral-tint); color:var(--neutral); border-radius:var(--r-pill); padding:2px 7px }
a.sl .bd.hot{ background:var(--risk-tint); color:var(--risk) }
.side .next{ margin-top:14px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md); padding:14px; box-shadow:var(--elev-1) }
.side .next .k{ font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut) }
.side .next .t{ font-weight:700; font-size:13.5px; margin:6px 0 10px; color:var(--ink); line-height:1.35 }

/* parcours de protection (stepper) */
.journey-card{ padding:16px 18px }
.jhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.jk{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut) }
.jp{ font-weight:700; font-size:13px; color:var(--teal-night) }
.journey{ display:flex; flex-wrap:wrap; gap:2px }
.step{ flex:1; min-width:150px; display:flex; gap:10px; padding:8px 12px; align-items:flex-start }
.step + .step{ border-left:1px dashed var(--line-2) }
.step .pt{ width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:11px; border:1.5px solid var(--line-input); color:var(--mut); background:#fff }
.step.done .pt{ background:var(--ok); border-color:var(--ok); color:#fff }
.step.now .pt{ background:var(--teal-btn); border-color:var(--teal-btn); color:#fff; box-shadow:0 0 0 4px rgba(11,117,101,.14) }
.step .sx{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.step .tt{ font-size:12.5px; font-weight:700; color:var(--mut); line-height:1.3 }
.step.now .tt{ color:var(--ink) }
.step.done .tt{ color:var(--ok) }
.step .st{ font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint) }
.step.done .st{ color:var(--ok) }
.step .jgo{ align-self:flex-start }

/* bulles d'aide (tooltips accessibles) */
.tipwrap{ position:relative; display:inline-flex; align-items:center }
.tip{ position:relative; display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; padding:0;
  border:1.5px solid var(--line-input); background:#fff; color:var(--mut);
  font-family:var(--mono); font-weight:700; font-size:10px; line-height:1; cursor:pointer; vertical-align:middle }
.tip::after{ content:""; position:absolute; inset:-14px; border-radius:50% } /* hitbox tactile 44px */
.tip:hover,.tip[aria-expanded="true"]{ border-color:var(--teal-btn); color:var(--teal-night); background:var(--teal-soft) }
.tipbox{ position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); z-index:30;
  width:min(270px,74vw); background:var(--ink); color:#F5F8F9; font-family:var(--sans); font-size:12.5px; font-weight:500;
  line-height:1.5; letter-spacing:0; text-transform:none; padding:10px 12px; border-radius:10px; box-shadow:var(--elev-pop); text-align:left;
  animation:flashin var(--dur-hover) var(--ease-garde) }
.tipbox b{ display:block; margin-bottom:3px; font-weight:700; color:#fff }
.tipbox::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ink) }
.tipbox::before{ content:""; position:absolute; top:100%; left:0; right:0; height:12px } /* pont de survol (WCAG 1.4.13) */

/* ─────────────────── 15. RESPONSIVE ─────────────────── */
@media (max-width:919px){
  /* minmax(0,1fr) : sans quoi le ruban nowrap impose sa largeur intrinsèque (min-width:auto) */
  .layout{ grid-template-columns:minmax(0,1fr); gap:0 }
  .side{ position:static; margin-bottom:var(--s4); min-width:0 }
  /* ruban d'onglets sur UNE ligne, défilable au doigt, sans barre visible */
  .snav{ flex-direction:row; flex-wrap:nowrap; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; scroll-snap-type:x proximity;
    margin:0 calc(-1*clamp(18px,4vw,22px)); padding:2px clamp(18px,4vw,22px) 6px }
  .snav::-webkit-scrollbar{ display:none }
  a.sl{ flex:none; min-height:44px; white-space:nowrap; scroll-snap-align:center; border:1px solid var(--line-2); background:var(--surface); padding:8px 12px }
  /* la carte « Prochaine étape » reste visible : bannière horizontale compacte */
  .side .next{ display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px 14px }
  .side .next .k{ display:none }
  .side .next .t{ flex:1; margin:0; font-size:13px }
  .side .next .btn{ flex:none; min-height:44px }
  .step + .step{ border-left:none; border-top:1px dashed var(--line-2) }
  .step{ min-width:100% }
}
@media (max-width:640px){
  .hd{ min-height:0; padding:8px 0 }
  .hd .wrap{ flex-wrap:wrap; gap:8px }
  .cobrand{ order:3; flex-basis:100%; border-left:none; padding-left:0; margin-left:0 }
  .hd .who b{ display:none }
  .who .lbl-txt{ display:none }
}
@media (max-width:640px){
  /* 16px = plus de zoom automatique iOS au focus d'un champ */
  input,select,textarea{ font-size:16px }
  .prefixed .pfx{ font-size:14px }
  /* lignes du guide DNS : libellé au-dessus, valeur + bouton Copier alignés */
  .dnsrec .f{ display:grid; grid-template-columns:1fr auto; align-items:center }
  .dnsrec .k{ grid-column:1/-1; width:auto }
  .dnsrec code{ min-width:0; overflow-wrap:anywhere }
  .dnsrec .f .btn{ min-height:44px }
}
@media (max-width:560px){
  .row,.rowb{ flex-direction:column; align-items:stretch }
  .row > input,.row > select,.row > .btn,.rowb > .btn{ width:100% }
  .item{ flex-direction:column; align-items:stretch }
  .item .row{ width:100%; flex-direction:row; flex-wrap:wrap; padding-top:12px; margin-top:4px; border-top:1px solid var(--line-2) }
  .item .row .btn{ flex:1; min-height:44px }
  .clientRow .mini{ justify-content:space-between }
  .prefixed{ min-width:0 }
}
@media (max-width:480px){
  .locks{ gap:6px }
  .rung{ width:14px }
}

/* ─────────────────── 16. MOTION — accessibilité non négociable ─────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  body::before{ animation:none }
}