/* VIGIE SCAN – site vitrine (www.vigiescan.com).
   Charte : reprise STRICTE de app/static/style.css (palette marine #002850 / or #FDBD11, même pile typographique,
   mêmes rayons, ombres et boutons). Aucune nouvelle identité. L'or n'est jamais une couleur de texte sur fond clair.
   Aucune ressource externe, aucun style en ligne (politique « style-src 'self' » servie par Caddy). */
:root{
  --marine:#002850; --marine-2:#0A3A6B; --marine-fonce:#001B38; --marine-menu:#012647;
  --or:#FDBD11; --or-fonce:#E0A500; --or-clair:#FFF7DB; --or-ink:#6E4E00;
  --bg:#F4F8FC; --panel:#FFFFFF; --soft:#EEF4FB;
  --ink:#0F1E33; --muted:#566275; --line:#E3EAF3; --line-strong:#CBD6E4; --lien:#0B4F8A;
  --side-ink:#C9D6E8;
  --ok:#17683F; --ok-bg:#E8F6EF; --warn:#8A4F00; --warn-bg:#FFF4DE; --warn-line:#F3D9A6;
  --info:#163B63; --info-bg:#EAF2FB; --info-line:#C9DCF2;
  --rayon:10px; --rayon-carte:14px;
  --ombre:0 1px 2px rgba(0,40,80,.05),0 4px 14px rgba(0,40,80,.04);
  --ombre-forte:0 10px 30px rgba(0,27,56,.12);
  --focus:0 0 0 3px rgba(253,189,17,.6);
  --largeur:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--lien);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 24px}
.lien-evitement{position:absolute;left:-9999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:var(--rayon);z-index:20}
.lien-evitement:focus{left:16px}
.surtitre{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--or-ink);background:var(--or-clair);border-radius:999px;padding:4px 12px;margin-bottom:14px}
h1,h2,h3{color:var(--marine);letter-spacing:-.01em;margin:0}
h2{font-size:clamp(26px,3.2vw,34px);line-height:1.2;margin-bottom:12px}
h3{font-size:18px;line-height:1.3;margin-bottom:8px}
.intro{color:var(--muted);font-size:18px;max-width:720px;margin:0 0 36px}
section{padding:84px 0}
section.fond-doux{background:var(--soft)}

/* ---------- boutons (mêmes formes que l'application) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--rayon);font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;line-height:1.2;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-or{background:var(--or);color:var(--marine)} .btn-or:hover{background:var(--or-fonce)}
.btn-marine{background:var(--marine);color:#fff} .btn-marine:hover{background:var(--marine-2)}
.btn-contour{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn-contour:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-contour-marine{background:var(--panel);color:var(--marine);border-color:var(--line-strong)} .btn-contour-marine:hover{border-color:var(--marine)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(6px)}
.entete .conteneur{display:flex;align-items:center;gap:24px;height:72px}
.entete .marque img{height:44px;width:auto}
.entete nav{display:flex;gap:26px;margin-left:auto}
.entete nav a{color:var(--ink);font-weight:500;font-size:15px}
.entete nav a:hover{color:var(--marine);text-decoration:none;box-shadow:inset 0 -2px 0 var(--or)}
.entete .btn{padding:10px 18px}

/* ---------- héros ---------- */
.heros{background:var(--marine-menu);color:var(--side-ink);padding:72px 0 88px;position:relative;overflow:hidden}
.heros::after{content:"";position:absolute;right:-180px;top:-140px;width:560px;height:560px;border-radius:50%;border:56px solid rgba(253,189,17,.06)}
.heros .conteneur{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;position:relative;z-index:1}
.heros h1{color:#fff;font-size:clamp(32px,4.4vw,50px);line-height:1.12;margin-bottom:20px}
.heros h1 em{font-style:normal;color:var(--or)}
.heros p{font-size:19px;max-width:600px;margin:0 0 30px}
.heros .actions{display:flex;gap:14px;flex-wrap:wrap}
.heros .logo-heros{justify-self:center;max-width:420px;width:100%}
.heros .mention{margin-top:26px;font-size:14px;color:#9FB3CC}

/* ---------- sources ---------- */
.sources{background:var(--panel);border-bottom:1px solid var(--line);padding:26px 0}
.sources ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sources li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted)}
.sources li b{display:block;color:var(--marine)}
.puce{width:10px;height:10px;border-radius:50%;background:var(--or);margin-top:8px;flex-shrink:0}

/* ---------- méthode ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:etape}
.etape{background:var(--panel);border:1px solid var(--line);border-radius:var(--rayon-carte);padding:28px;box-shadow:var(--ombre);position:relative}
.etape::before{counter-increment:etape;content:counter(etape);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--marine);color:var(--or);font-weight:700;font-size:18px;margin-bottom:16px}
.etape h3{font-size:22px}
.etape .verbe{color:var(--muted);margin:0 0 14px}
.etape ul{margin:0;padding-left:18px;color:var(--ink)} .etape li{margin:6px 0}
.etape:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:38px;color:var(--or-fonce);font-size:22px;font-weight:700}

/* ---------- fonctionnalités ---------- */
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.carte{background:var(--panel);border:1px solid var(--line);border-radius:var(--rayon-carte);padding:22px;box-shadow:var(--ombre)}
.carte:hover{box-shadow:var(--ombre-forte)}
.carte .icone{width:44px;height:44px;border-radius:12px;background:var(--or-clair);display:grid;place-items:center;margin-bottom:14px}
.carte .icone svg{width:24px;height:24px;stroke:var(--marine);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carte p{margin:0;color:var(--muted);font-size:15px}

/* ---------- sécurité ---------- */
.securite .conteneur{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.liste-coches{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.liste-coches li{background:var(--panel);border:1px solid var(--line);border-radius:var(--rayon);padding:16px 18px 16px 52px;position:relative;box-shadow:var(--ombre)}
.liste-coches li::before{content:"";position:absolute;left:18px;top:19px;width:20px;height:20px;border-radius:50%;background:var(--ok-bg);border:2px solid var(--ok)}
.liste-coches li::after{content:"";position:absolute;left:25px;top:23px;width:5px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.liste-coches b{color:var(--marine);display:block}
.avertissement{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info);border-radius:var(--rayon);padding:16px 18px;font-size:15px;margin-top:22px}

/* ---------- démonstration ---------- */
.demo .conteneur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.formulaire{background:var(--panel);border:1px solid var(--line);border-radius:var(--rayon-carte);padding:28px;box-shadow:var(--ombre)}
.formulaire .bandeau{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);border-radius:var(--rayon);padding:12px 14px;font-size:14px;margin-bottom:18px}
.champ{display:grid;gap:6px;margin-bottom:14px}
.champ label{font-weight:600;font-size:14px;color:var(--marine)}
.champ input,.champ textarea{font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--rayon);background:#F8FAFD;color:var(--muted)}
.champ textarea{min-height:96px;resize:vertical}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- pied ---------- */
.pied{background:var(--marine-menu);color:var(--side-ink);padding:44px 0 28px;font-size:14px}
.pied .conteneur{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.pied img{width:190px}
.pied h4{color:#fff;margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.pied a{color:var(--side-ink)} .pied a:hover{color:#fff}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pied .bas{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:8px;color:#8FA6C4}

/* ---------- pages simples (mentions légales, 404) ---------- */
.page{padding:56px 0 80px}
.page .conteneur{max-width:860px}
.page h1{font-size:34px;margin-bottom:10px}
.page h2{font-size:22px;margin:34px 0 10px}
.page p,.page li{color:var(--ink)}
.a-completer{background:var(--or-clair);color:var(--or-ink);border:1px dashed var(--or-fonce);border-radius:6px;padding:1px 6px;font-weight:600}

/* ---------- adaptatif ---------- */
@media (max-width:1020px){
  .grille{grid-template-columns:repeat(2,1fr)}
  .entete nav{display:none}
  .entete .btn-marine{margin-left:auto}
}
@media (max-width:820px){
  section{padding:60px 0}
  .heros{padding:48px 0 60px}
  .heros .conteneur,.securite .conteneur,.demo .conteneur{grid-template-columns:1fr}
  .heros .logo-heros{max-width:300px;order:-1}
  .etapes,.sources ul{grid-template-columns:1fr}
  .etape:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-27px}
  .pied .conteneur{grid-template-columns:1fr}
}
@media (max-width:560px){
  .conteneur{padding:0 16px}
  .grille,.deux{grid-template-columns:1fr}
  .entete .marque img{height:36px}
  .entete .btn{padding:9px 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}