/* ============================================================
   Le Débrief Auto
   Charte reprise des pages d'offres du site (consult-auto,
   accompagnement-essentiel, accompagnement-vip).
   ============================================================ */

:root{
  --orange:#e8712a;
  --orange-dk:#c25a1c;
  --orange-tint:#fbf2ea;
  --ink:#1a1a1a;
  --ink-soft:#333;
  --grey:#6b6b6b;
  --grey-lt:#9a9a9a;
  --line:#e7e7e7;
  --bg:#faf8f6;
  --card:#fff;
  --erreur:#a4271c;
  --shadow:0 1px 2px rgba(26,26,26,.05),0 8px 28px rgba(26,26,26,.07);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Lora',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink-soft);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--orange-dk)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- En-tête sombre ---------- */
header{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:34px 0 96px}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:80px;background:var(--orange);clip-path:polygon(0 100%,100% 100%,100% 0);opacity:.10}
header::before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(232,113,42,.30),transparent 70%)}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:9px}
.brand img{height:24px;width:auto;display:block}
.brand a{display:inline-flex;line-height:0}
.kicker{display:inline-block;background:#faf8f6;color:var(--ink);font-weight:600;font-size:11px;letter-spacing:2px;margin-top:30px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
h1{font-size:clamp(26px,5.4vw,38px);font-weight:700;color:#fff;line-height:1.1;margin-top:10px;letter-spacing:-.5px}
.sub{font-family:var(--serif);font-style:italic;color:#e6e0d9;font-size:16px;margin-top:10px}

/* Prix dans l'en-tête, repris des pages d'offres */
.offer-hero-price{display:flex;align-items:baseline;gap:12px;margin-top:18px;flex-wrap:wrap}
.offer-hero-price strong{font-size:44px;font-weight:800;color:#fff;line-height:1}
.offer-hero-price em{font-style:normal;color:#d0d0d0;font-size:14px;flex:1 1 15rem}
.hero-reassure{margin-top:12px;font-size:12.5px;color:#b8b8b8}

/* ---------- Carte de contenu ---------- */
.pull-up{margin-top:-70px;position:relative;z-index:3;margin-bottom:50px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:36px 34px}
h2{font-family:var(--font);font-size:18px;font-weight:700;color:var(--ink);margin:30px 0 10px;letter-spacing:-.2px}
h2:first-child{margin-top:0}
h2 .num{color:var(--orange);margin-right:8px}
p{font-size:14.5px;color:var(--ink-soft);margin:0 0 12px}
.lead-big{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-bottom:6px}
.note{background:var(--orange-tint);border:1px solid #f1ddc9;border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--ink-soft);margin:16px 0}

/* Deux colonnes « vous m'envoyez / vous recevez » */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 6px}
.duo .box{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.duo .box h3{font-size:15px;margin:0 0 10px;font-weight:700;color:var(--ink)}
.duo ul{margin:0;padding-left:18px}
.duo li{font-size:14px;margin-bottom:7px}
.duo li::marker{color:var(--orange)}

/* ---------- Formulaire ---------- */
form{margin-top:6px}
fieldset{border:0;min-width:0;margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line)}
fieldset:first-of-type{border-top:0;padding-top:0}
legend{display:flex;align-items:center;gap:.8rem;font-family:var(--font);font-weight:700;font-size:19px;line-height:1.2;color:var(--ink);float:left;width:100%;margin-bottom:6px}
legend+*{clear:both}
.etape{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;background:var(--orange-tint);border:1px solid #f1ddc9;color:var(--orange-dk);font-weight:700;font-size:14px;border-radius:50%;flex:none}

.champ{margin-top:18px}
label,.label-groupe{display:block;font-family:var(--font);font-weight:600;font-size:14.5px;line-height:1.4;color:var(--ink);margin:0 0 7px}
.aide{display:block;font-weight:400;font-size:13.2px;color:var(--grey);margin:3px 0 0;line-height:1.5}
fieldset>.aide{margin-top:0;margin-bottom:4px}
.facultatif{font-weight:400;color:var(--grey-lt)}
.centre{text-align:center}

input[type="text"],input[type="email"],input[type="tel"],input[type="url"],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--font);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;appearance:none;
  transition:border-color .16s,box-shadow .16s;
}
input:hover,select:hover,textarea:hover{border-color:#d4d4d4}
input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,113,42,.12);outline:none}
input::placeholder,textarea::placeholder{color:#b0aaa4}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}
textarea{min-height:130px;resize:vertical;line-height:1.6}
input[type="file"]{font-family:var(--font);font-size:13.5px;padding:12px 14px;background:#fff;border:1px dashed var(--line);border-radius:10px;width:100%;cursor:pointer}
input[type="file"]:hover{border-color:var(--orange)}

.grille-2{display:grid;gap:0 18px}
@media(min-width:34rem){.grille-2{grid-template-columns:1fr 1fr}}

.choix{display:grid;gap:9px}
@media(min-width:34rem){.choix{grid-template-columns:1fr 1fr}}
.choix label{display:flex;align-items:center;gap:11px;margin:0;padding:13px 15px;font-weight:400;font-size:14.5px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .16s,background .16s}
.choix label:hover{border-color:#d4d4d4}
.choix label:has(input:checked){border-color:var(--orange);background:var(--orange-tint);color:var(--ink);font-weight:500}
input[type="checkbox"],input[type="radio"]{width:19px;height:19px;accent-color:var(--orange);flex:none;margin:0;cursor:pointer}

/* Étape finale */
.validation{border-top:2px solid var(--ink);padding-top:26px}
.consentement{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;font-weight:400;font-size:14px;line-height:1.55;color:var(--ink-soft);cursor:pointer}
.consentement input{margin-top:2px}

.bouton{display:block;width:100%;margin:26px 0 10px;padding:16px 24px;font-family:var(--font);font-weight:600;font-size:16px;color:#fff;background:var(--orange);border:0;border-radius:12px;cursor:pointer;transition:background .18s,transform .15s}
.bouton:hover{background:var(--orange-dk)}
.bouton:active{transform:translateY(1px)}
.bouton:disabled{opacity:.6;cursor:progress}
.bouton-retour{width:auto;display:inline-block;margin:18px 0 0;padding:13px 26px}

.erreur-globale{margin:18px 0 0;padding:13px 15px;font-weight:600;font-size:14px;color:var(--erreur);background:#fbeceb;border-left:4px solid var(--erreur);border-radius:0 10px 10px 0}
.liste-erreurs{padding-left:20px;color:var(--erreur);font-size:14.5px}
.liste-erreurs li{margin-bottom:7px}

.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Page de retour ---------- */
.lien-retour{display:inline-block;margin-top:10px;font-weight:600;font-size:14.5px}

/* ---------- Pied ---------- */
footer{padding:24px 0 34px;text-align:center;color:var(--grey-lt);font-size:12px}
footer a{color:var(--grey);text-decoration:none}
footer a:hover{color:var(--orange-dk)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:10px}
.footer-links a{font-size:12.5px}
.footer-links a:hover{text-decoration:underline}

/* ---------- Animations ---------- */
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
header .kicker,header h1,header .sub,header .offer-hero-price,header .hero-reassure{animation:heroIn .6s cubic-bezier(.2,.7,.2,1) both}
header h1{animation-delay:.06s}
header .sub{animation-delay:.12s}
header .offer-hero-price{animation-delay:.18s}
header .hero-reassure{animation-delay:.26s}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="stagger"]{opacity:1;transform:none;transition:none;will-change:auto}
.duo>.box{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.duo.in>.box{opacity:1;transform:none}
.duo.in>.box:nth-child(2){transition-delay:.09s}

@media(prefers-reduced-motion:reduce){
  header .kicker,header h1,header .sub,header .offer-hero-price,header .hero-reassure{animation:none}
  [data-reveal],.duo>.box{opacity:1!important;transform:none!important;transition:none!important}
}

@media(max-width:640px){
  header{padding:28px 0 86px}
  .card{padding:26px 20px}
  .duo{grid-template-columns:1fr}
  .offer-hero-price strong{font-size:36px}
}

/* Commandes fermées (capacité atteinte) */
.ferme{margin-top:26px;background:#fdebdd;border-left:5px solid var(--orange);border-radius:14px;padding:22px 24px}
.ferme p{margin:0 0 12px}
.ferme .lead-big{color:var(--ink);font-weight:600;margin-bottom:12px}
.ferme .bouton{display:inline-block;width:auto;margin:6px 0 0;padding:14px 26px;text-decoration:none}

/* Autres offres (même rendu que les pages d'offres du site) */
.autres-titre{font-size:18px;font-weight:700;color:var(--ink);margin:34px 0 10px}
.autres{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.autre{border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;display:block;transition:border-color .18s,transform .18s}
.autre:hover{border-color:var(--orange);transform:translateY(-2px)}
.autre strong{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.autre span{font-size:13px;color:var(--grey)}
.autre b{color:var(--orange-dk);font-size:14px}
.autres>.autre{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.autres.in>.autre{opacity:1;transform:none}
.autres.in>.autre:nth-child(2){transition-delay:.09s}
@media (max-width:640px){.autres{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.autres>.autre{opacity:1!important;transform:none!important}}