/* ============ ACCUEIL — « la vigie » : nuit marine + ambre de lanterne ============ */
#view-home{
  --n-ink:#0A1628; --n-deep:#081221; --n-surf:#0F2036; --n-line:#1C3352; --n-rule:#14273F;
  --n-foam:#F2F6FA; --n-text:#A9BBD0; --n-mist:#7E95B0; --n-dim:#5F7895;
  --lantern:#FFB547; --safe:#2FE6D6; --threat:#FF6B6B; --team:#8B9BFF;
  background:var(--n-ink); color:var(--n-text); font-family:var(--body);
  overflow-x:clip;   /* le halo de lanterne ne doit jamais créer de défilement horizontal */
}
#view-home *:focus-visible{ outline:2px solid var(--lantern); outline-offset:3px; border-radius:6px }

/* ---------- Héros ---------- */
.vh-hero{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:start;
  width:100%; max-width:1200px; margin:0 auto; padding:76px 32px 92px; box-sizing:border-box }
.vh-hero::before{ content:""; position:absolute; right:2%; top:4%; width:560px; height:560px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,181,71,.13), rgba(255,181,71,0) 62%) }
.vh-hero > *{ position:relative }
.vh-hero-text{ padding-top:26px }
.vh-kicker{ color:var(--lantern); font-size:15px; font-weight:500; margin:0 0 18px }
.vh-title{ font-family:var(--disp); font-weight:700; color:var(--n-foam); margin:0 0 24px; max-width:17ch;
  font-size:clamp(2.35rem, 4.7vw, 4.15rem); line-height:1.02; letter-spacing:-.02em; text-wrap:balance }
.vh-lead{ font-size:18px; line-height:1.62; margin:0 0 30px; max-width:52ch }
.vh-actions{ display:flex; gap:12px; flex-wrap:wrap }
.vh-actions-center{ justify-content:center }
.vh-btn{ font:600 15px/1 var(--body); padding:15px 22px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition:background .2s, border-color .2s, box-shadow .2s, color .2s }
.vh-btn-main{ background:var(--lantern); color:#1C1304 }
.vh-btn-main:hover{ background:#FFC56E; box-shadow:0 0 0 6px rgba(255,181,71,.16) }
.vh-btn-quiet{ background:transparent; color:var(--n-foam); border-color:#2A4466 }
.vh-btn-quiet:hover{ border-color:var(--lantern); color:#fff }
.vh-note{ color:var(--n-dim); font-size:13.5px; line-height:1.55; margin:20px 0 0; max-width:48ch }

/* ---------- Boîte de réception de démonstration ---------- */
.vh-inbox{ position:relative; overflow:hidden; border-radius:16px; border:1px solid #1F3655;
  background:linear-gradient(180deg,#10223A,#0C1B2E);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.75) }
.vh-inbox-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--n-line); font-size:13px; color:var(--n-mist) }
.vh-watch{ display:inline-flex; align-items:center; gap:7px; color:var(--safe); font-size:12.5px; white-space:nowrap }
.vh-watch i{ width:7px; height:7px; border-radius:50%; background:var(--safe); animation:vh-pulse 2.4s ease-out infinite }
@keyframes vh-pulse{ 0%{box-shadow:0 0 0 0 rgba(47,230,214,.55)} 70%{box-shadow:0 0 0 7px rgba(47,230,214,0)} 100%{box-shadow:0 0 0 0 rgba(47,230,214,0)} }
.vh-mails{ list-style:none; margin:0; padding:4px 0; position:relative }
.vh-mail{ display:grid; grid-template-columns:9.5rem minmax(0,1fr) auto; gap:4px 14px; align-items:baseline;
  padding:15px 18px; border-left:3px solid transparent; opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease, background .5s ease, border-color .5s ease }
.vh-mail + .vh-mail{ border-top:1px solid #152A45 }
.vh-mail.in{ opacity:1; transform:none }
.vh-mail b{ color:var(--n-foam); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vh-mail span{ color:#9DB0C6; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vh-mail time{ color:var(--n-dim); font-size:12px; font-variant-numeric:tabular-nums }
.vh-flag{ display:none; grid-column:1 / -1; justify-self:start; margin-top:7px; font-style:normal; font-size:12px; font-weight:600;
  color:var(--threat); background:rgba(255,107,107,.13); padding:3px 10px; border-radius:999px }
.vh-suspect.flagged{ background:rgba(255,107,107,.07); border-left-color:var(--threat) }
.vh-suspect.flagged .vh-flag{ display:inline-block }
.vh-beam{ position:absolute; left:0; right:0; top:var(--beam-top,52px); height:64px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(255,181,71,0), rgba(255,181,71,.16) 42%, rgba(255,181,71,.3) 50%, rgba(255,181,71,.16) 58%, rgba(255,181,71,0)) }
.vh-inbox.sweeping .vh-beam{ animation:vh-sweep 1.7s ease-in-out forwards }
@keyframes vh-sweep{ 0%{opacity:0; transform:translateY(-20px)} 14%{opacity:1} 84%{opacity:1; transform:translateY(var(--beam-travel,220px))} 100%{opacity:0; transform:translateY(var(--beam-travel,220px))} }
.vh-inspect{ padding:6px 18px 18px }
.vh-btn-inspect{ width:100%; background:rgba(255,181,71,.1); color:var(--lantern); border-color:rgba(255,181,71,.38) }
.vh-btn-inspect:hover:not(:disabled){ background:rgba(255,181,71,.18) }
.vh-btn-inspect:disabled{ opacity:.35; cursor:default }
.vh-clues{ max-height:0; overflow:hidden; padding:0 18px; transition:max-height .55s ease, padding .55s ease }
.vh-clues.open{ max-height:460px; padding-bottom:20px }
.vh-from{ font-family:var(--mono); font-size:12.5px; color:var(--threat); margin:0 0 12px; word-break:break-all }
.vh-clues ol{ list-style:none; margin:0; padding:0 }
.vh-clues li{ position:relative; padding-left:18px; color:#C8D4E2; font-size:14px; line-height:1.55; margin:0 0 10px }
.vh-clues li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:2px; background:var(--threat) }
.vh-clues li b{ color:var(--n-foam) }
.vh-verdict{ color:var(--safe); font-weight:600; font-size:14px; margin:12px 0 0 }

/* ---------- Bandes de contenu ---------- */
.vh-band{ padding:96px 0; border-top:1px solid var(--n-rule) }
.vh-band-alt{ background:#0C1A2C }
.vh-wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 32px; box-sizing:border-box }
.vh-h2{ font-family:var(--disp); font-weight:700; color:var(--n-foam); margin:0 0 14px; max-width:22ch;
  font-size:clamp(1.85rem, 3.1vw, 2.65rem); line-height:1.08; letter-spacing:-.015em }
.vh-sub{ color:#9DB0C6; font-size:17px; line-height:1.62; margin:0 0 46px; max-width:60ch }

/* La boucle : une vraie séquence, d'où la numérotation */
.vh-loop{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; position:relative; counter-reset:vhs }
.vh-loop::before{ content:""; position:absolute; top:9px; left:10px; right:10px; height:2px; background:#284A72 }
.vh-loop li{ position:relative; counter-increment:vhs }
.vh-dot{ display:block; position:relative; z-index:1; width:20px; height:20px; border-radius:50%; margin:0 0 20px;
  background:var(--n-ink); border:2px solid var(--safe) }
.vh-dot-ai{ background:var(--lantern); border-color:var(--lantern); box-shadow:0 0 0 7px rgba(255,181,71,.16) }
.vh-loop h3{ font-family:var(--disp); font-size:18px; font-weight:600; color:#EAF0F6; margin:0 0 8px }
.vh-loop h3::before{ content:counter(vhs) "  "; color:var(--n-dim); font-weight:500 }
.vh-loop p{ color:#94A8BF; font-size:14.5px; line-height:1.55; margin:0 }
.vh-loop-back{ margin:36px 0 0; color:var(--lantern); font-size:14.5px }
.vh-loop-back::before{ content:"\21BB  " }

/* Ce que chacun y trouve : trois publics, trois couleurs */
.vh-aud{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px }
.vh-aud-col{ border-top:3px solid var(--c); padding-top:22px }
.vh-aud-lead{ --c:var(--lantern) } .vh-aud-team{ --c:var(--team) } .vh-aud-comp{ --c:var(--safe) }
.vh-aud-col h3{ font-family:var(--disp); font-size:21px; font-weight:700; color:var(--n-foam); margin:0 0 14px }
.vh-aud-col ul{ list-style:none; margin:0; padding:0 }
.vh-aud-col li{ color:var(--n-text); font-size:15px; line-height:1.55; padding:11px 0; border-bottom:1px solid #172C47 }
.vh-aud-col li:last-child{ border-bottom:0 }

/* Transparence IA */
.vh-ai{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:start }
.vh-ai .vh-sub{ margin-bottom:22px }
.vh-ai-lists{ display:grid; grid-template-columns:1fr 1fr; gap:30px }
.vh-ai-lists h3{ font-family:var(--disp); font-size:18px; font-weight:600; color:var(--n-foam); margin:0 0 12px }
.vh-ai-lists ul{ list-style:none; margin:0; padding:0 }
.vh-ai-lists li{ position:relative; padding:8px 0 8px 20px; font-size:15px; line-height:1.5; color:var(--n-text) }
.vh-ai-lists > div:first-child li::before{ content:""; position:absolute; left:0; top:.95em; width:8px; height:8px; border-radius:50%; background:var(--lantern) }
.vh-ai-lists > div:last-child li::before{ content:""; position:absolute; left:0; top:1.05em; width:10px; height:2px; background:var(--n-dim) }
.vh-link{ background:none; border:0; padding:0; cursor:pointer; color:var(--lantern); font:600 15px var(--body);
  text-decoration:underline; text-underline-offset:4px }
.vh-link:hover{ color:#FFC56E }

/* Appel final */
.vh-final{ padding:112px 0 124px; text-align:center; border-top:1px solid var(--n-rule);
  background:radial-gradient(ellipse 60% 75% at 50% 100%, rgba(255,181,71,.12), rgba(255,181,71,0) 70%), var(--n-ink) }
.vh-final-title{ font-family:var(--disp); font-weight:700; color:var(--n-foam); margin:0 0 14px;
  font-size:clamp(2rem, 4vw, 3.3rem); line-height:1.05; letter-spacing:-.02em }
.vh-final p{ color:#9DB0C6; font-size:17px; line-height:1.62; max-width:52ch; margin:0 auto 30px }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .vh-hero{ grid-template-columns:1fr; gap:42px; padding:52px 20px 68px }
  .vh-hero::before{ width:340px; height:340px; right:0; top:44% }
  .vh-hero-text{ padding-top:0 }
  .vh-wrap{ padding:0 20px }
  .vh-band{ padding:72px 0 }
  .vh-loop{ grid-template-columns:1fr; gap:0 }
  .vh-loop::before{ top:10px; bottom:30px; left:9px; right:auto; width:2px; height:auto }
  .vh-loop li{ padding:0 0 28px 42px }
  .vh-dot{ position:absolute; left:0; top:0; margin:0 }
  .vh-aud{ grid-template-columns:1fr; gap:36px }
  .vh-ai{ grid-template-columns:1fr; gap:30px }
  .vh-final{ padding:84px 0 92px }
}
@media (max-width:560px){
  .vh-mail{ grid-template-columns:minmax(0,1fr) auto }
  .vh-mail b{ grid-column:1; grid-row:1 }
  .vh-mail time{ grid-column:2; grid-row:1 }
  .vh-mail span{ grid-column:1 / -1; grid-row:2 }
  .vh-ai-lists{ grid-template-columns:1fr; gap:20px }
  .vh-btn{ width:100% }
  .vh-actions{ flex-direction:column }
}
@media (prefers-reduced-motion:reduce){
  .vh-mail{ opacity:1; transform:none; transition:none }
  .vh-beam{ display:none }
  .vh-watch i{ animation:none }
  .vh-clues{ transition:none }
}

/* ============ Rapports en file d'attente (tableau de bord) ============ */
.rep-jobs{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px }
.rep-job{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px }
.rep-job b{ color:var(--fg); margin-right:8px }
.rep-job span{ color:var(--muted) }
.rep-st{ color:var(--muted) }
.rep-st a{ color:var(--cyan); margin-left:10px; font-weight:600 }
.rep-sent .rep-st, .rep-ready .rep-st{ color:var(--ok) }
.rep-error .rep-st{ color:var(--bad) }
.rep-queued .rep-st, .rep-processing .rep-st{ color:var(--warn) }

/* ============ Recommandations exclusives (en préparation) ============ */
.reco-gen{ display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border:1px dashed rgba(47,230,214,.35);
  border-radius:12px; background:rgba(47,230,214,.04) }
.reco-gen b{ color:var(--fg) }
.reco-gen p{ margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.5 }
.reco-gen-bar{ flex:0 0 4px; align-self:stretch; border-radius:4px; background:linear-gradient(180deg,var(--cyan),rgba(47,230,214,.15));
  animation:reco-breathe 1.8s ease-in-out infinite }
.reco-idle{ border-style:solid; border-color:var(--line); background:transparent }
@keyframes reco-breathe{ 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .reco-gen-bar{ animation:none } }