/* ==========================================================================
   rachats-voitures.be — feuille de style unique, zéro dépendance externe.
   Design clair (marine / corail), factorisé depuis docs/maquette/accueil.html
   (source de vérité visuelle). Mobile-first, breakpoints 720px et 1024px.
   ========================================================================== */

/* ---------- 1. Reset minimal + variables ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --fond:#FBFCFE;         /* blanc cassé */
  --fond-2:#F1F4F9;        /* sections alternées */
  --marine:#26317E;        /* titres, marque, en-tête du wizard */
  --marine-fonce:#1B2359;  /* footer */
  --encre:#2A3140;         /* texte courant */
  --texte-2:#6B7484;       /* secondaire */
  --accent:#C03A2E;        /* corail : CTA (assombri vs. maquette pour un contraste AA ≥ 4.5:1) */
  --accent-fonce:#A62F24;
  --ok:#2FA97C;            /* coches réassurance, succès */
  --bordure:#E3E8F0;
  --police-titre:"Avenir Next","Segoe UI",system-ui,sans-serif;
  --police:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

body{
  background:var(--fond);color:var(--encre);font-family:var(--police);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{max-width:100%;display:block}

.conteneur{max-width:1120px;margin:0 auto;padding:0 24px}

h1,h2,h3{
  font-family:var(--police-titre);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;color:var(--marine);
}
h1{font-size:clamp(2.2rem,4.8vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.4em}
h3{font-size:1.1rem}

.section{padding:88px 0}
.fond-2{background:var(--fond-2)}

/* sur-titre + double trait corail signature sous les titres de section */
.sur-titre{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.trait{width:74px;height:4px;background:var(--accent);border-radius:99px;margin:18px 0 0;position:relative}
.trait::after{
  content:"";position:absolute;top:8px;left:14px;width:46px;height:4px;
  background:var(--accent);opacity:.45;border-radius:99px;
}

/* ---------- 2. Header sticky ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(251,252,254,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--bordure);
}
.header-int{display:flex;align-items:center;gap:28px;height:70px}
.logo{
  display:flex;align-items:center;gap:11px;font-family:var(--police-titre);
  font-weight:800;font-size:1.1rem;color:var(--marine);text-decoration:none;
}
nav{display:flex;gap:24px;margin-left:auto}
nav a{color:var(--texte-2);text-decoration:none;font-size:.93rem;font-weight:600;transition:color .15s}
nav a:hover{color:var(--marine)}

.langues{display:flex;gap:2px;margin-left:4px;font-size:.78rem;font-weight:700}
.langues a{color:var(--texte-2);text-decoration:none;padding:4px 7px;border-radius:6px}
.langues a.actif{color:var(--accent)}
.langues a:hover{background:var(--fond-2)}

/* ---------- 3. Boutons ---------- */
/* .btn = forme de base (inclinaison signature) ; .btn-accent = variante corail
   pleine (CTA principal). Les deux classes se combinent : class="btn btn-accent" */
.btn{
  display:inline-block;background:transparent;color:var(--marine);font-weight:800;
  padding:14px 30px;border-radius:8px;border:1.5px solid var(--marine);
  text-decoration:none;cursor:pointer;font-size:.98rem;font-family:var(--police);
  transform:skewX(-6deg);transition:background .15s,transform .15s,box-shadow .15s,color .15s,border-color .15s;
}
.btn>span{display:inline-block;transform:skewX(6deg)}
.btn:hover{background:var(--fond-2)}
.btn-accent{
  background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(192,58,46,.25);
}
.btn-accent:hover{
  background:var(--accent-fonce);transform:skewX(-6deg) translateY(-1px);
  box-shadow:0 10px 26px rgba(166,47,36,.32);
}
.btn-header{padding:10px 22px;font-size:.9rem;white-space:nowrap}
@media (max-width:720px){
  .choix button{width:104px;padding:14px 8px 12px;font-size:.76rem}
  .choix-icone svg{width:38px;height:38px}
  .wizard-corps{padding:26px 18px 24px}

  .btn-header{padding:9px 14px;font-size:.8rem}
  .header-int{gap:14px}
}

/* ---------- 4. Hero ---------- */
.hero{position:relative;overflow:hidden;padding:88px 0 96px}
.hero::before{ /* grande diagonale gris clair, signature du site */
  content:"";position:absolute;top:0;right:0;width:58%;height:120%;
  background:linear-gradient(180deg,var(--fond-2),#E9EDF5);
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
}
.hero-int{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-texte p{color:var(--texte-2);font-size:1.13rem;max-width:44ch;margin-bottom:8px}
.hero-points{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:26px}
.hero-points li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1rem;color:var(--encre)}
.hero-intro{color:var(--texte-2);font-size:1.1rem;max-width:60ch;margin:14px 0 26px}

.coche{
  flex:none;width:23px;height:23px;border-radius:50%;
  background:rgba(47,169,124,.13);color:var(--ok);
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;
}

.hero-texte>*{opacity:0;transform:translateY(14px);animation:lever .6s ease forwards}
.hero-texte>*:nth-child(2){animation-delay:.08s}
.hero-texte>*:nth-child(3){animation-delay:.16s}
.hero-texte>*:nth-child(4){animation-delay:.24s}
.wizard{opacity:0;transform:translateY(14px);animation:lever .6s .2s ease forwards}
@keyframes lever{to{opacity:1;transform:none}}

/* ---------- 4b. Hero ville : une seule colonne (h1, intro, CTA, réassurance) ---------- */
.hero-ville .conteneur{position:relative;max-width:760px}
.hero-ville::before{width:100%;clip-path:polygon(0 78%,100% 55%,100% 100%,0 100%)}
.hero-ville .hero-points{margin-top:24px}
.hero-ville .btn-accent{margin-top:4px}

/* ---------- 5. Formulaire wizard ---------- */
.wizard{
  background:#fff;border:1px solid var(--bordure);border-radius:16px;overflow:hidden;
  box-shadow:0 28px 70px rgba(38,49,126,.14);
}
.wizard-tete{
  background:var(--marine);color:#fff;padding:20px 28px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.wizard-tete h2{font-size:1.15rem;color:#fff;margin-bottom:0}
.wizard-compteur{color:#B9C1E8;font-size:.8rem;font-weight:700}
.wizard-corps{padding:36px 44px 30px}
.wizard{max-width:820px;margin:0 auto}
.section-estimation{padding:8px 0 88px}
.hero-simple{display:block;max-width:760px}
.btn-hero{margin-top:28px;font-size:1.05rem;padding:16px 34px}
@keyframes wizApparition{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wizard-etape.active{animation:wizApparition .35s ease}
.wizard-barre{height:5px;background:var(--fond-2);border-radius:99px;margin-bottom:24px;overflow:hidden}
.wizard-barre i{display:block;height:100%;width:25%;background:var(--accent);border-radius:99px;transition:width .3s ease}

.champ{margin-bottom:16px}
.champ label{display:block;font-size:.85rem;font-weight:700;color:var(--marine);margin-bottom:7px}
.champ input{
  width:100%;background:var(--fond);border:1.5px solid var(--bordure);color:var(--encre);
  padding:13px 14px;border-radius:9px;font-size:1rem;font-family:var(--police);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.wizard-etape-titre{font-size:1.4rem;color:var(--marine);margin-bottom:26px;font-family:var(--police-titre);text-align:center}
.champ .optionnel{font-weight:400;color:var(--texte-2);font-size:.8rem}
.champs-centres{max-width:430px;margin:0 auto}
.champs-vehicule .champ select,.champs-vehicule .champ input{
  background:var(--marine);color:#fff;border:2px solid var(--marine);
  padding:14px 16px;font-size:1.02rem;border-radius:9px;
}
.champs-vehicule .champ input::placeholder{color:rgba(255,255,255,.55)}
.champs-vehicule .champ select:focus,.champs-vehicule .champ input:focus{border-color:var(--marine);box-shadow:0 0 0 3px rgba(38,49,126,.25)}
.champs-vehicule .champ select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.champs-vehicule .champ select option{background:#fff;color:var(--encre)}
.champ select{width:100%;background:var(--fond);border:1.5px solid var(--bordure);color:var(--encre);padding:13px 14px;border-radius:9px;font-size:1rem;font-family:var(--police);outline:none;appearance:auto}
.champ select:focus{border-color:var(--marine);box-shadow:0 0 0 3px rgba(38,49,126,.12)}
.btn-photos{display:none;margin-top:14px}
.champ input:focus{border-color:var(--marine);box-shadow:0 0 0 3px rgba(38,49,126,.12)}
/* Masqué par défaut (pas de style="" inline : bloqué par la CSP) ;
   formulaire.js pose display:block/none explicitement — l'inline JS gagne sur la feuille */
.champ .erreur{display:none;color:var(--accent-fonce);font-size:.8rem;font-weight:700;margin-top:6px}

.choix{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.choix button{
  width:138px;background:#fff;border:2px solid var(--bordure);border-radius:12px;
  padding:18px 12px 14px;cursor:pointer;font-family:var(--police);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.85rem;font-weight:600;color:var(--encre);line-height:1.3;text-align:center;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.choix button:hover{border-color:var(--marine);box-shadow:0 6px 20px rgba(38,49,126,.10);transform:translateY(-3px)}
.choix button.choisi{border-color:var(--marine);background:rgba(38,49,126,.05);color:var(--marine);font-weight:700}
.choix-icone{color:var(--marine);display:flex}
.choix button:hover .choix-icone svg{transform:scale(1.08)}
.choix-icone svg{transition:transform .25s}

.wizard-actions{display:flex;flex-direction:column-reverse;align-items:center;gap:10px;margin-top:26px}
.btn-retour{
  background:none;border:none;color:var(--texte-2);font-weight:700;cursor:pointer;
  font-size:.92rem;font-family:var(--police);padding:12px 6px;
}
.btn-retour:hover{color:var(--marine)}
/* Caché par défaut (étape 1) sans style="" inline (CSP) ; formulaire.js pose
   visibility:visible/hidden explicitement à chaque étape — l'inline JS gagne */
#retour{visibility:hidden}
.wizard-actions .btn{min-width:280px;text-align:center}
.wizard-note{margin:14px 0 2px;font-size:.8rem;color:var(--texte-2);text-align:center}
.wizard-etape{display:none}
.wizard-etape.active{display:block}
.wizard-succes,.wizard-erreur{display:none;text-align:center;padding:26px 6px}
.wizard-succes .coche{width:54px;height:54px;font-size:1.5rem;margin:0 auto 16px}
.wizard-succes h3,.wizard-erreur h3{font-size:1.25rem;margin-bottom:8px;font-family:var(--police-titre);color:var(--marine)}
.wizard-succes p,.wizard-erreur p{color:var(--texte-2);font-size:.95rem}
.wizard-erreur .coche{width:54px;height:54px;font-size:1.5rem;margin:0 auto 16px;background:rgba(166,47,36,.13);color:var(--accent-fonce)}
.wizard-erreur .btn{margin-top:14px;flex:none}

/* Honeypot anti-robots (formulaire.html) : masqué via classe, pas en style="" inline
   (bloqué par la CSP style-src du site — cf. base.html). */
.champ-piege{position:absolute;left:-9999px}

/* ---------- 6. Réassurance : bande marine en diagonale ---------- */
.reassurance{
  background:var(--marine);color:#fff;
  clip-path:polygon(0 12%,100% 0,100% 88%,0 100%);
  padding:64px 0;
}
.reassurance .conteneur{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.badge-ok{display:flex;gap:13px;align-items:center}
.badge-ok b{display:block;font-size:.98rem;color:#fff}
.badge-ok span{font-size:.83rem;color:#B9C1E8}
.badge-ok .coche{background:rgba(255,255,255,.14);color:#7BE0B4}

/* ---------- 7. Étapes numérotées ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;counter-reset:etape}
.etape{
  background:#fff;border:1px solid var(--bordure);border-radius:14px;
  padding:32px 28px;position:relative;counter-increment:etape;
  box-shadow:0 10px 30px rgba(38,49,126,.06);
}
.etape::before{
  content:"0" counter(etape);
  font-family:var(--police-titre);font-weight:800;font-size:2.6rem;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);
  display:block;margin-bottom:12px;
}
.etape h3{margin-bottom:8px}
.etape p{color:var(--texte-2);font-size:.95rem}

/* ---------- 8. Grille + cartes (véhicules, contenus divers) ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:44px}
.carte{
  background:#fff;border:1px solid var(--bordure);border-radius:14px;
  padding:28px 24px;text-decoration:none;display:block;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.carte:hover{transform:translateY(-4px);border-color:var(--marine);box-shadow:0 18px 44px rgba(38,49,126,.12)}
.carte-icone{
  width:48px;height:48px;border-radius:12px;background:rgba(192,58,46,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent);
}
.carte h3{margin-bottom:6px}
.carte p{color:var(--texte-2);font-size:.9rem}
.carte .plus{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;font-size:.88rem}

/* ---------- 9. Villes / régions ---------- */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.region{background:#fff;border:1px solid var(--bordure);border-radius:14px;padding:28px 24px;box-shadow:0 10px 30px rgba(38,49,126,.05)}
.region h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.region ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.region a{
  display:inline-block;background:var(--fond-2);border:1px solid var(--bordure);
  padding:8px 15px;border-radius:99px;text-decoration:none;font-size:.9rem;font-weight:600;color:var(--encre);
  transition:border-color .15s,color .15s,background .15s;
}
.region a:hover{border-color:var(--marine);color:var(--marine);background:#fff}

/* ---------- 9b. Sections de contenu éditorial (pages ville / type) ---------- */
.ville-section{margin-bottom:52px}
.ville-section:last-child{margin-bottom:0}
.ville-section p{color:var(--texte-2);max-width:74ch;margin-top:16px}
.ville-section p+p{margin-top:12px}

/* ---------- 10. Cadre photo (placeholder en attendant les vraies photos) ---------- */
.photo-illustration{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.photo-cadre{
  aspect-ratio:16/10;border-radius:14px;border:1px solid var(--bordure);
  background:linear-gradient(160deg,var(--fond-2),#E4E9F2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--texte-2);
}
.photo-cadre svg{opacity:.55}
.photo-cadre span{font-size:.85rem;font-weight:600}

/* ---------- 11. FAQ ---------- */
.faq{max-width:760px}
.faq .trait+details{margin-top:40px}
.faq details{background:#fff;border:1px solid var(--bordure);border-radius:12px;padding:2px 22px;margin-bottom:12px}
.faq summary{
  cursor:pointer;font-weight:700;font-size:1.02rem;padding:16px 34px 16px 0;
  list-style:none;position:relative;color:var(--marine);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:11px;color:var(--accent);
  font-size:1.5rem;font-weight:400;transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--texte-2);padding-bottom:18px;font-size:.96rem;max-width:64ch}

/* ---------- 12. CTA final : bande corail diagonale ---------- */
.cta-final{
  background:linear-gradient(120deg,var(--accent),var(--accent-fonce));color:#fff;
  clip-path:polygon(0 14%,100% 0,100% 86%,0 100%);
  padding:96px 0;text-align:center;
}
.cta-final h2{color:#fff;margin-bottom:10px}
.cta-final p{color:rgba(255,255,255,.85);margin-bottom:28px}
.cta-final .btn-accent{background:#fff;color:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.cta-final .btn-accent:hover{background:var(--fond-2)}

/* ---------- 13. Footer ---------- */
footer{background:var(--marine-fonce);color:#C7CDE9;padding:60px 0 32px}
.footer-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer-grille .footer-titre{
  font-family:var(--police);font-weight:700;line-height:normal;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#8E97C9;margin-bottom:14px;
}
.footer-grille ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-grille a{color:#C7CDE9;text-decoration:none;font-size:.9rem}
.footer-grille a:hover{color:#fff}
.footer-logo{display:flex;align-items:center;gap:11px;font-family:var(--police-titre);font-weight:800;font-size:1.1rem;color:#fff;text-decoration:none}
.footer-desc{font-size:.92rem;max-width:34ch;margin-top:12px;color:#8E97C9}
.footer-tel{margin-top:10px}
.footer-tel a{color:#fff;font-weight:700;text-decoration:none}
.footer-langues{display:flex;gap:6px;flex-wrap:wrap}
.footer-langues a{color:#C7CDE9;text-decoration:none;font-size:.9rem;font-weight:700}
.footer-langues a.actif{color:#fff;text-decoration:underline}
.footer-langues a:hover{color:#fff}
.footer-bas{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:.82rem;color:#8E97C9;
}

/* ---------- 14b. Pages légales (mentions, confidentialité) ---------- */
.legal{max-width:760px}
.legal h1{margin-bottom:36px}
.legal-section{margin-bottom:40px}
.legal-section:last-child{margin-bottom:0}
.legal-section h2{font-size:1.25rem;margin-bottom:12px}
.legal-section p{margin-bottom:12px}
.legal-section p:last-child{margin-bottom:0}
.legal-section a{color:var(--accent);font-weight:600}

/* ---------- 14c. Page 404 ---------- */
.page-404{text-align:center}
.page-404 p{color:var(--texte-2);font-size:1.05rem;max-width:560px;margin:0 auto 32px}
.page-404-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 15. Responsive ---------- */
@media (max-width:1024px){
  .reassurance .conteneur{grid-template-columns:1fr 1fr;gap:20px}
  .etapes,.regions{grid-template-columns:1fr}
}
@media (max-width:960px){
  .hero-int{grid-template-columns:1fr;gap:44px}
  .hero::before{width:100%;clip-path:polygon(0 72%,100% 55%,100% 100%,0 100%)}
  .footer-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .section{padding:60px 0}
  nav{display:none}
  .reassurance .conteneur{grid-template-columns:1fr}
  .footer-grille{grid-template-columns:1fr}
}