@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---------- base ---------- */
:root{color-scheme:light}
[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --ink:#0B1F2E;
  --ink-2:#12293B;
  --ink-3:#1B384E;
  --ember:#FF5A1F;
  --ember-2:#FFB454;
  --frost-rgb:191,236,255;
  --frost:rgb(var(--frost-rgb));
  --frost-2:#2E7CA8;
  --paper:#F7F1E6;
  --paper-2:#EDE4D3;
  --steel:#3E5867;
  --steel-soft:#6E8695;
  --line:#D9CFBB;
  --on-ink:#F3ECDE;
  --on-ink-soft:#B7D8E6;
  --radius:18px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--steel);
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

h1,h2,h3{
  font-family:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit;}
img,svg{max-width:100%;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px;}
section{padding-block:88px; scroll-margin-top:74px;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,31,46,0.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
nav.wrap{
  display:flex; justify-content:center; align-items:center; gap:40px;
  height:74px;
}

.nav-links{display:flex; gap:32px; list-style:none; margin:0; padding:0;}
.nav-links a{
  color:var(--on-ink-soft); text-decoration:none; font-size:.94rem; font-weight:500;
  transition:color .18s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--on-ink);}

.nav-right{display:flex; align-items:center; gap:18px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:100px; font-weight:700; font-size:.95rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
}
.btn:focus-visible{outline:3px solid var(--frost); outline-offset:2px;}
.btn-primary{
  background:linear-gradient(135deg, var(--ember), #E8460B);
  color:#fff;
  box-shadow:0 8px 24px -8px rgba(255,90,31,.65);
}
@media (hover:hover){
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(255,90,31,.75);}
}
.btn-primary:active{transform:translateY(1px);}
.btn-header{padding:10px 20px; font-size:.86rem; min-height:44px;}
.btn-block{width:100%; min-height:50px;}

.hamburger{display:none; background:none; border:0; padding:6px; cursor:pointer;}
.menu-mobile{
  background:var(--ink-2); border-top:1px solid rgba(255,255,255,.08);
  padding:16px 24px; display:flex; flex-direction:column; gap:14px;
}
.menu-mobile a{color:var(--on-ink); text-decoration:none; font-weight:600;}
.hamburger svg{width:24px;height:24px; color:var(--on-ink);}

/* ---------- titres de section ---------- */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(1.6rem, 2.6vw, 2.2rem); font-weight:700;}

/* ---------- BD ---------- */
.comic-frame{
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(11,31,46,.4);
  line-height:0;
}
.comic-frame img{display:block; width:100%; height:auto;}
.comic-caption{
  text-align:center; max-width:760px; margin:26px auto 0; font-weight:800; color:var(--ink);
  text-transform:uppercase; letter-spacing:.01em; font-size:clamp(.92rem,1.6vw,1.08rem); line-height:1.5;
}
.comic-caption b{color:var(--ember);}

.cta-centre{text-align:center; margin-top:28px;}

/* Section carport : titre et BD centrés */
#carport .section-head{max-width:820px; margin-inline:auto; text-align:center;}
#carport .comic-frame{max-width:820px; margin-inline:auto;}

/* ---------- lead ---------- */
.lead-section{
  background:linear-gradient(180deg, var(--ink) 0%, #081420 100%);
}
.lead-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}

.lead-copy h2{color:var(--on-ink); font-size:clamp(1.7rem,2.8vw,2.3rem);}
.lead-copy p{color:var(--on-ink-soft); margin-top:16px; max-width:46ch;}
.lead-points{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.lead-points li{display:flex; gap:12px; color:var(--on-ink-soft); font-size:.94rem;}
.lead-points svg{width:18px;height:18px; color:var(--ember-2); flex-shrink:0; margin-top:1px;}

.lead-card{
  background:var(--paper); border-radius:20px; padding:32px; box-shadow:0 40px 70px -30px rgba(0,0,0,.5);
}
.lead-card h3{font-size:1.2rem;}
.lead-card .sub{color:var(--steel-soft); font-size:.88rem; margin-top:6px;}
form{margin-top:24px; display:flex; flex-direction:column; gap:16px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:.8rem; font-weight:600; color:var(--steel);}
.field input{
  border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:12px 14px;
  font-size:1rem; font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;
  width:100%; min-height:48px;
}
.field input:focus-visible{outline:none; border-color:var(--ember); box-shadow:0 0 0 4px rgba(255,90,31,0.12);}

/* Liste des villes */
.field select{
  appearance:none; -webkit-appearance:none;
  width:100%; min-height:48px; padding:12px 42px 12px 14px;
  border:1.5px solid var(--line); border-radius:10px; background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E5867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  font-size:1rem; font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select:focus-visible{outline:none; border-color:var(--ember); box-shadow:0 0 0 4px rgba(255,90,31,0.12);}
.field select:disabled{background-color:#F3EEE4; color:var(--steel-soft); cursor:not-allowed;}
.field-aide{margin:0; font-size:.78rem; line-height:1.4; color:var(--steel-soft); min-height:0;}
.field-aide:empty{display:none;}
.field-aide.erreur{color:#B8430F; font-weight:600;}
.field-aide.ok{color:#1F5F85;}
.lead-card .fineprint{margin-top:14px; font-size:.76rem; color:var(--steel-soft); text-align:center;}

.success{ display:none; text-align:center; padding:28px 8px;}
.success.show{display:block;}
.success .ok{
  width:56px;height:56px;border-radius:50%; background:rgba(255,90,31,0.12); color:var(--ember);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.success .ok svg{width:26px;height:26px;}
.success h3{font-size:1.15rem;}
.success p{color:var(--steel-soft); margin-top:8px; font-size:.92rem;}

.trust-badges{
  display:flex; justify-content:center; gap:20px; flex-wrap:wrap;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
}
.trust-badges span{
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--steel-soft); white-space:nowrap;
}

/* ---------- reveal ---------- */
.reveal.pre{opacity:0; transform:translateY(18px);}
.reveal.go{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease;}


/* ---------- civilité ---------- */
.field .field-label{font-size:.8rem; font-weight:600; color:var(--steel);}
.civilite{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.civilite-option{position:relative; cursor:pointer;}
.civilite-option input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.civilite-option span{
  display:block; text-align:center;
  border:1.5px solid var(--line); background:#fff; border-radius:10px; padding:12px 14px;
  font-size:.95rem; font-weight:600; font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif; color:var(--steel);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.civilite-option:hover span{border-color:var(--steel-soft);}
.civilite-option input:checked + span{
  border-color:var(--ember); background:rgba(255,90,31,0.08); color:var(--ink);
}
.civilite-option input:focus-visible + span{border-color:var(--ember); box-shadow:0 0 0 4px rgba(255,90,31,0.12);}

/* ---------- champ anti-robots (invisible pour les visiteurs) ---------- */
.champ-piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- message hors zone ---------- */
.zone-message{
  margin:0; padding:12px 14px; border-radius:10px;
  background:#FFE8DC; border:1.5px solid #FFC9B3; color:#8A3108;
  font-size:.86rem; font-weight:600; line-height:1.45; text-align:center;
}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}
/* =========================================
   Tablette et téléphone
   ========================================= */

/* Tablette : formulaire sous le texte, centré */
@media (max-width:960px){
  .lead-grid{grid-template-columns:1fr; gap:36px; max-width:620px; margin-inline:auto;}
  .lead-copy p{max-width:none;}
}

/* Petite tablette et téléphone : menu simplifié (un seul lien, pas besoin du bouton menu) */
@media (max-width:820px){
  nav.wrap{height:64px; gap:24px;}
  section{padding-block:64px; scroll-margin-top:64px;}
  .hamburger, #mobile-menu{display:none !important;}
}

/* Téléphone */
@media (max-width:640px){
  section{padding-block:48px;}
  .section-head{margin-bottom:28px;}
  .section-head h2{font-size:1.45rem; line-height:1.2;}
  #carport .comic-frame{border-radius:14px; box-shadow:0 18px 36px -20px rgba(11,31,46,.45);}
  .comic-caption{font-size:.88rem; margin-top:20px; letter-spacing:0;}
  #carport .btn{width:100%; max-width:380px; min-height:50px;}
  .lead-copy h2{font-size:1.6rem;}
  .lead-copy p{font-size:.95rem;}
  .lead-points{margin-top:22px; gap:12px;}
  .lead-points li{font-size:.9rem;}
}

/* Petit téléphone */
@media (max-width:460px){
  .wrap{padding-inline:16px;}
  nav.wrap{gap:18px;}
  .field-row{grid-template-columns:1fr;}
  .lead-card{padding:24px 18px; border-radius:16px;}
  form{gap:14px;}
  .civilite{gap:10px;}
  .civilite-option span{padding:12px 6px; font-size:.92rem;}
  .trust-badges{gap:12px 16px;}
}

/* Très petit écran (iPhone SE, anciens Android) */
@media (max-width:360px){
  nav.wrap{gap:14px;}
  .nav-links a{font-size:.86rem;}
  .btn-header{padding:8px 14px; font-size:.8rem;}
  .section-head h2{font-size:1.3rem;}
  .civilite-option span{font-size:.86rem;}
}