@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-weight:100 900;font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');}

:root{
  --bleu:#1C7CC0; --bleu-fonce:#13598a; --orange:#E8742A; --encre:#1d2630; --gris:#68727A;
  --trait:#d8dee2; --fond:#f6f8f9; --blanc:#fff; --vert:#2E8F60; --rouge:#b3261e;
  color-scheme:light only;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font:400 16px/1.6 'Inter',system-ui,sans-serif;color:var(--encre);background:var(--fond);padding-bottom:44px;}
h1,h2,h3{font-family:'Archivo','Inter',sans-serif;line-height:1.2;margin:0 0 .5em;}
h1{font-size:clamp(28px,5vw,46px);font-weight:800;letter-spacing:-.01em;}
h2{font-size:clamp(22px,3.4vw,30px);font-weight:700;}
h3{font-size:18px;font-weight:700;}
p{margin:0 0 1em;}
a{color:var(--bleu);}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto;}
.wrap.etroit{width:min(640px,100% - 32px);}

header.top{background:var(--blanc);border-bottom:1px solid var(--trait);}
header.top .wrap{display:flex;align-items:center;gap:16px;padding:12px 0;}
header.top img{width:54px;height:54px;}
header.top .marque{font:700 17px 'Archivo',sans-serif;}
header.top .marque small{display:block;font:500 11px 'JetBrains Mono',monospace;color:var(--gris);letter-spacing:.04em;}
header.top nav{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
header.top nav a.lien{color:var(--encre);text-decoration:none;font-weight:500;font-size:14px;padding:6px 8px;}

.btn{display:inline-block;border:0;border-radius:8px;padding:12px 20px;font:600 15px 'Inter',sans-serif;cursor:pointer;
  text-decoration:none;background:var(--bleu);color:#fff;text-align:center;}
.btn:hover{background:var(--bleu-fonce);}
.btn.sec{background:#fff;color:var(--bleu);border:1.5px solid var(--bleu);}
.btn.sec:hover{background:#EEF6FC;}
.btn.orange{background:var(--orange);} .btn.orange:hover{background:#c85f1b;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn.petit{padding:8px 14px;font-size:14px;}

.hero{background:linear-gradient(180deg,#fff 0%,#eef6fc 100%);padding:56px 0 48px;border-bottom:1px solid var(--trait);}
.hero .wrap{display:grid;gap:32px;grid-template-columns:1.1fr .9fr;align-items:center;}
.hero p.chapo{font-size:18px;color:#44505a;max-width:34em;}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.hero .puces{margin:22px 0 0;padding:0;list-style:none;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:14px;color:var(--gris);}
.hero .puces li::before{content:"✓ ";color:var(--vert);font-weight:700;}
.apercu{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:18px;box-shadow:0 10px 30px rgba(29,38,48,.08);}
.apercu .ligne{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eef1f3;font-size:14px;}
.apercu .ligne:last-child{border:0;}
.apercu .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bleu);color:#fff;font:600 12px 'JetBrains Mono',monospace;display:grid;place-items:center;}
.apercu .km{margin-left:auto;font:500 12px 'JetBrains Mono',monospace;color:var(--gris);}
.apercu .titre{font:600 11px 'JetBrains Mono',monospace;color:var(--gris);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.apercu .gain{margin-top:12px;background:#F0FAF4;border:1px solid #bfe3cb;color:#1d6a43;border-radius:8px;padding:9px 12px;font-weight:600;font-size:14px;}

section.bloc{padding:52px 0;}
section.bloc.blanc{background:#fff;border-block:1px solid var(--trait);}
.grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:22px;}
.carte{background:#fff;border:1px solid var(--trait);border-radius:12px;padding:20px;}
section.blanc .carte{background:var(--fond);}
.carte h3{margin-bottom:6px;}
.carte p{margin:0;color:#44505a;font-size:15px;}
.carte .pastille{display:inline-block;font:600 11px 'JetBrains Mono',monospace;background:#EEF6FC;color:var(--bleu);border-radius:5px;padding:2px 8px;margin-bottom:10px;letter-spacing:.04em;}
.etapes{counter-reset:e;display:grid;gap:14px;margin-top:20px;}
.etapes li{list-style:none;counter-increment:e;background:#fff;border:1px solid var(--trait);border-radius:12px;padding:16px 18px 16px 62px;position:relative;}
.etapes li::before{content:counter(e);position:absolute;left:18px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font:700 15px 'Archivo',sans-serif;display:grid;place-items:center;}
.etapes{padding:0;margin-bottom:0;}
.garantie{background:#FFF8E6;border:1px solid #f0d58a;border-radius:12px;padding:20px;color:#5f4a00;}
.garantie h3{color:#5f4a00;}
.garantie ul{margin:8px 0 0;padding-left:20px;}
.metiers{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.metiers span{background:#fff;border:1px solid var(--trait);border-radius:999px;padding:7px 16px;font-weight:500;font-size:15px;}

/* formulaires */
.formulaire{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:26px;margin:28px 0;box-shadow:0 6px 24px rgba(29,38,48,.06);}
.formulaire h1{font-size:28px;}
.alerte-reel{background:#FFF1DC;border:1px solid #f0c48a;color:#7a3e00;border-radius:8px;padding:11px 14px;font-size:14px;margin:0 0 18px;}
.champ{margin-bottom:16px;}
.champ label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;}
.champ label .fac{font-weight:400;color:var(--gris);}
.champ input,.champ select{width:100%;border:1.5px solid var(--trait);border-radius:8px;padding:11px 12px;font:400 16px 'Inter',sans-serif;background:#fff;color:var(--encre);}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(28,124,192,.15);}
.champ.erreur input,.champ.erreur select{border-color:var(--rouge);}
.champ .aide{font-size:13px;color:var(--gris);margin-top:4px;}
.champ .msg{font-size:13px;color:var(--rouge);margin-top:4px;display:none;}
.champ.erreur .msg{display:block;}
.deux{display:grid;gap:14px;grid-template-columns:1fr 1fr;}
.trois{display:grid;gap:14px;grid-template-columns:140px 1fr;}
.mdp-ligne{position:relative;}
.mdp-ligne button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--bleu);font:600 13px 'Inter',sans-serif;cursor:pointer;padding:6px 8px;}
.force{height:5px;border-radius:3px;background:#e5e9ec;margin-top:6px;overflow:hidden;}
.force i{display:block;height:100%;width:0;background:var(--rouge);transition:width .2s,background .2s;}
.consent{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:14px;line-height:1.5;}
.consent input{flex:none;margin-top:4px;width:18px;height:18px;}
.consent.erreur{color:var(--rouge);}
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.retour{margin-top:14px;padding:12px 14px;border-radius:8px;font-size:15px;display:none;}
.retour.ok{display:block;background:#F0FAF4;border:1px solid #bfe3cb;color:#1d6a43;}
.retour.ko{display:block;background:#FDECEA;border:1px solid #f3b8b3;color:var(--rouge);}
.petit-texte{font-size:13px;color:var(--gris);}

/* pages légales */
.legal{background:#fff;border:1px solid var(--trait);border-radius:14px;padding:28px;margin:28px 0;}
.legal h1{font-size:30px;} .legal h2{font-size:20px;margin-top:1.6em;}
.legal .brouillon{background:#FFF1DC;border:1px solid #f0c48a;color:#7a3e00;border-radius:8px;padding:11px 14px;font-size:14px;margin-bottom:20px;}
.legal .a-completer{background:#fff3b0;padding:0 4px;border-radius:3px;}

/* bandeau de bas de page : visible sur toutes les pages */
#bandeau-test{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#1d2630;color:#e9eef2;
  font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.02em;padding:9px 12px;text-align:center;border-top:2px solid var(--orange);}
#bandeau-test b{color:#fff;}
#bandeau-test a{color:#ffc79b;text-decoration:underline;margin-left:10px;white-space:nowrap;}

@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr;}
  .deux,.trois{grid-template-columns:1fr;}
  header.top .marque small{display:none;}
  body{padding-bottom:64px;}
}