/* ==========================================================================
   FREDY MOTORS — feuille de style unique
   Tout le design est ici. Les couleurs se changent dans le bloc :root.
   ========================================================================== */

:root{
  --noir:#0b1526;          /* fond principal, bleu nuit */
  --surface:#13243e;       /* cartes et blocs */
  --surface-2:#1d3865;     /* bleu de référence Fredy Motors */
  --ligne:rgba(255,255,255,.11);
  --texte:#f3f4f6;
  --doux:#9ba1ad;
  --accent:#e03a2f;
  --accent-clair:#ff5a4d;
  --vert:#2fbf71;
  --ambre:#f0a92b;
  --max:1280px;
  --r:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
  background:var(--noir);color:var(--texte);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ========================= EN-TÊTE ========================= */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(11,21,38,.84);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ligne);
}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:86px}
.logo img{height:40px;width:auto}
.nav{display:flex;align-items:center;gap:8px}
.nav a{
  padding:9px 15px;border-radius:9px;font-size:14.5px;font-weight:600;
  color:var(--doux);transition:.2s;
}
.nav a:hover,.nav a.on{color:var(--texte);background:rgba(255,255,255,.06)}
.lang{display:inline-flex;gap:2px;margin-left:8px;padding:3px;border-radius:100px;border:1px solid var(--ligne)}
.lang a{padding:5px 12px;border-radius:100px;font-size:12.5px;font-weight:700;color:var(--doux)}
.lang a.on{background:var(--texte);color:var(--noir)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--texte);border-radius:2px}
.burger span+span{margin-top:6px}

/* ========================= HÉRO ========================= */
.hero{
  position:relative;padding:clamp(60px,9vw,110px) 0 clamp(40px,5vw,60px);
  border-bottom:1px solid var(--ligne);overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 15% 0%,rgba(224,58,47,.15),transparent 65%),radial-gradient(760px 420px at 85% 10%,rgba(29,56,101,.55),transparent 68%);
}
.hero .wrap{position:relative}
.hero h1{
  font-size:clamp(2.2rem,5.4vw,4rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;margin-bottom:18px;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--doux);font-size:clamp(1rem,1.3vw,1.12rem);max-width:56ch;font-weight:300}
.hero .sous{
  display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:18px;
}

/* ========================= FILTRES ========================= */
.barre{
  position:sticky;top:86px;z-index:90;
  background:rgba(11,21,38,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);padding:16px 0;
}
.barre .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.onglets{display:inline-flex;gap:4px;padding:4px;border-radius:100px;background:var(--surface);border:1px solid var(--ligne)}
.onglets button{
  padding:9px 20px;border-radius:100px;border:0;cursor:pointer;background:none;
  color:var(--doux);font-family:inherit;font-size:14px;font-weight:700;transition:.2s;
}
.onglets button:hover{color:var(--texte)}
.onglets button.on{background:var(--accent);color:#fff}
.compte{color:var(--doux);font-size:13.5px;font-weight:600}

/* ========================= GRILLE ========================= */
.grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:26px;padding:clamp(34px,5vw,54px) 0 90px;
}
.carte{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s;
}
.carte:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.carte__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.carte__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.carte:hover .carte__img img{transform:scale(1.05)}
.carte__corps{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.carte h3{font-size:1.15rem;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.carte .marque{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:7px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.specs span{
  font-size:12.5px;font-weight:600;color:var(--doux);
  background:var(--surface-2);border:1px solid var(--ligne);
  padding:5px 11px;border-radius:7px;
}
.carte .voir{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13.5px;font-weight:700;color:var(--texte);
}
.carte .voir svg{transition:transform .3s}
.carte:hover .voir svg{transform:translateX(4px)}

/* --- pastilles de statut --- */
.pastille{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:6px 13px;border-radius:100px;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);
}
.st-dispo{background:rgba(47,191,113,.9);color:#04240f}
.st-reserve{background:rgba(240,169,43,.92);color:#2b1c00}
.st-vendu{background:rgba(224,58,47,.92);color:#fff}

.vendu .carte__img img,.vendu.fiche__media img{filter:grayscale(.85) brightness(.55)}
.bandeau{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;
  display:grid;place-items:center;pointer-events:none;
}
.bandeau b{
  transform:rotate(-14deg);
  border:3px solid rgba(255,255,255,.92);color:#fff;
  padding:10px 30px;border-radius:8px;
  font-size:clamp(1.1rem,3vw,1.7rem);font-weight:900;letter-spacing:.16em;
  background:rgba(224,58,47,.3);backdrop-filter:blur(2px);
}

/* ========================= FICHE VÉHICULE ========================= */
.fiche{padding:clamp(28px,4vw,46px) 0 90px}
.retour{display:inline-flex;align-items:center;gap:9px;color:var(--doux);font-size:14px;font-weight:600;margin-bottom:26px}
.retour:hover{color:var(--texte)}
.fiche__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(26px,4vw,48px);align-items:start}

.gal{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);background:var(--surface)}
.gal__main{position:relative;aspect-ratio:4/3;background:var(--surface-2)}
.gal__main img{width:100%;height:100%;object-fit:cover}
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(11,21,38,.7);backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:.2s;
}
.gal__nav:hover{background:rgba(11,21,38,.92)}
.gal__prev{left:14px}.gal__next{right:14px}
.gal__cpt{
  position:absolute;right:14px;bottom:14px;z-index:4;
  background:rgba(11,21,38,.76);backdrop-filter:blur(8px);
  padding:5px 12px;border-radius:100px;font-size:12.5px;font-weight:700;
}
.minis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:10px}
.minis img{
  aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:pointer;
  opacity:.45;transition:.2s;border:2px solid transparent;
}
.minis img:hover{opacity:.8}
.minis img.on{opacity:1;border-color:var(--accent)}

.fiche__info h1{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.fiche__info .marque{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:9px}
.tableau{margin:26px 0;border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden}
.tableau div{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;font-size:14.5px}
.tableau div+div{border-top:1px solid var(--ligne)}
.tableau dt,.tableau .k{color:var(--doux);font-weight:600}
.tableau .v{font-weight:700}

/* ========================= BLOC CONTACT ========================= */
.contact-bloc{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  padding:26px;margin-top:4px;
}
.contact-bloc p{color:var(--doux);font-size:14.5px;margin-bottom:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:12px;border:0;cursor:pointer;width:100%;
  font-family:inherit;font-size:15.5px;font-weight:800;transition:.25s;
}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-clair);transform:translateY(-2px)}
.btn--wa{background:#25d366;color:#04240f;margin-top:10px}
.btn--wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn--ligne{background:transparent;border:1.5px solid var(--ligne);color:var(--texte);margin-top:10px}
.btn--ligne:hover{border-color:var(--texte)}

/* numéro révélé */
.revele{display:none;animation:apparait .35s cubic-bezier(.16,1,.3,1)}
.revele.on{display:block}
.revele .num{
  display:block;text-align:center;font-size:clamp(1.3rem,3vw,1.75rem);font-weight:800;
  letter-spacing:.02em;padding:16px;border-radius:12px;
  background:var(--surface-2);border:1px dashed var(--ligne);margin-bottom:12px;
  direction:ltr;
}
.revele .num:hover{border-color:var(--accent);color:var(--accent-clair)}
@keyframes apparait{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ========================= PIED DE PAGE ========================= */
.ftr{border-top:1px solid var(--ligne);padding:52px 0 0;background:var(--surface)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;padding-bottom:40px}
.ftr img{height:36px;width:auto;margin-bottom:16px}
.ftr p,.ftr a{color:var(--doux);font-size:14px;line-height:1.95}
.ftr a:hover{color:var(--texte)}
.ftr h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);font-weight:700;margin-bottom:14px}
.ftr ul{list-style:none}
.rs{display:flex;gap:10px;margin-top:16px}
.rs a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--ligne);transition:.25s;
}
.rs a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.ftr__bas{
  border-top:1px solid var(--ligne);padding:20px 0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:13px;color:#6b7280;
}

/* bouton WhatsApp flottant */
.wa-flot{
  position:fixed;right:20px;bottom:20px;z-index:200;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;box-shadow:0 14px 34px -8px rgba(37,211,102,.6);transition:.25s;
}
.wa-flot:hover{transform:scale(1.08)}

/* ========================= ÉTATS ========================= */
.vide{text-align:center;padding:90px 0;color:var(--doux)}
.vide b{display:block;color:var(--texte);font-size:1.25rem;margin-bottom:8px}

/* ========================= RESPONSIVE ========================= */
@media(max-width:980px){
  .fiche__grid{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .nav{
    display:none;position:absolute;top:86px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--noir);border-bottom:1px solid var(--ligne);
    padding:14px 24px 22px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 14px;font-size:15.5px}
  .lang{margin:10px 0 0;align-self:flex-start}
  .burger{display:block}
  .barre{top:86px}
}
@media(max-width:640px){
  .grille{grid-template-columns:1fr;gap:20px}
  .minis{grid-template-columns:repeat(4,1fr)}
  .ftr__grid{grid-template-columns:1fr;gap:28px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ==========================================================================
   PAGES INTÉRIEURES (Contact, Qui sommes-nous)
   ========================================================================== */
.phead{position:relative;padding:clamp(56px,8vw,96px) 0 clamp(34px,4vw,52px);border-bottom:1px solid var(--ligne);overflow:hidden}
.phead::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 400px at 20% 0%,rgba(29,56,101,.7),transparent 66%),
             radial-gradient(520px 300px at 88% 20%,rgba(224,58,47,.14),transparent 70%)}
.phead .wrap{position:relative}
.phead .sous{display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:16px}
.phead h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;letter-spacing:-.034em;line-height:1.08;margin-bottom:16px}
.phead h1 em{font-style:normal;color:var(--accent)}
.phead p{color:var(--doux);max-width:60ch;font-weight:300;font-size:clamp(1rem,1.25vw,1.1rem)}

.sect{padding:clamp(44px,6vw,80px) 0}
.sect--bleu{background:var(--surface)}
.sect h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.025em;line-height:1.18;margin-bottom:16px}
.sect h2 em{font-style:normal;color:var(--accent)}
.sect p{color:var(--doux);font-weight:300;margin-bottom:14px;max-width:68ch}
.sect p strong{color:var(--texte);font-weight:600}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.duo__img{border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);aspect-ratio:4/3}
.duo__img img{width:100%;height:100%;object-fit:cover}

.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.bloc{background:var(--noir);border:1px solid var(--ligne);border-radius:var(--r);padding:28px 26px 30px}
.sect--bleu .bloc{background:var(--noir)}
.bloc__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(224,58,47,.14);border:1px solid rgba(224,58,47,.3);margin-bottom:18px}
.bloc h3{font-size:1.06rem;font-weight:800;margin-bottom:9px;letter-spacing:-.01em}
.bloc p{font-size:.94rem;margin:0;color:var(--doux)}

/* --- cartes de contact --- */
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px}
.cc{
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  padding:28px 26px;display:flex;flex-direction:column;transition:.3s;
}
.cc:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.22)}
.cc__ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;background:var(--surface-2)}
.cc h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);font-weight:700;margin-bottom:10px}
.cc .val{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;word-break:break-word;direction:ltr}
.cc .note{font-size:13.5px;color:var(--doux);margin-top:8px}
.cc--wa{background:linear-gradient(150deg,rgba(37,211,102,.16),var(--surface) 60%);border-color:rgba(37,211,102,.35)}
.cc--wa .cc__ico{background:#25d366}

.form{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);padding:clamp(26px,4vw,42px);margin-top:30px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);font-weight:700;margin-bottom:8px}
.champ input,.champ textarea,.champ select{
  width:100%;padding:14px 16px;border-radius:11px;border:1px solid var(--ligne);
  background:var(--noir);color:var(--texte);font-family:inherit;font-size:15px;transition:.2s;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(224,58,47,.14)}
.champ textarea{min-height:130px;resize:vertical}
.form .note{font-size:12.5px;color:var(--doux);margin-top:12px}

.cta-bande{background:var(--surface-2);border-radius:var(--r);padding:clamp(30px,4vw,48px);text-align:center;margin-top:10px}
.cta-bande h2{margin-bottom:12px}
.cta-bande p{color:rgba(255,255,255,.78);margin:0 auto 24px}
.cta-bande .btn{width:auto;display:inline-flex;margin:6px}

@media(max-width:860px){
  .duo{grid-template-columns:1fr}
  .trois{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
}

/* ---------- description et équipements sur la fiche véhicule ---------- */
.descr{margin:26px 0}
.descr h2{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);font-weight:700;margin-bottom:12px
}
.descr p{font-size:15px;line-height:1.72;color:var(--texte)}
.opts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.opts li{
  position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;font-weight:600
}
.opts li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:9px;
  border-left:2.2px solid var(--accent);border-bottom:2.2px solid var(--accent);
  transform:rotate(-45deg)
}
@media(max-width:620px){ .opts{grid-template-columns:1fr} }