/* ============ Alain Logistique Trading — feuille de style ============ */
:root {
  --marine: #061a38;
  --marine-2: #0b2650;
  --marine-3: #17396e;
  --or: #e3a92b;
  --or-fonce: #b9851a;
  --texte: #101828;
  --texte-2: #4a5568;
  --texte-3: #7a8497;
  --fond: #f4f5f7;
  --surface: #ffffff;
  --bordure: #e2e6ec;
  --vert-wa: #1fa855;
  --vert-wa-2: #178a45;
  --rayon: 14px;
  --rayon-s: 10px;
  --ombre: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .18);
  --ombre-forte: 0 24px 48px -20px rgba(10, 26, 47, .35);
  --police-titre: "Sora", system-ui, sans-serif;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --largeur: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.6 var(--police); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 88px 0; }
.section-titre { max-width: 640px; margin-bottom: 44px; }
.section-titre h2 { font-size: clamp(28px, 4vw, 40px); }
.section-titre p { color: var(--texte-2); margin-top: 14px; font-size: 17px; }
.surtitre {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--or-fonce); margin-bottom: 12px;
}
.section-sombre .surtitre { color: var(--or); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { font-size: 19px; }
.btn:active { transform: translateY(1px); }
.btn-or { background: var(--or); color: var(--marine); }
.btn-or:hover { background: #f0b83a; }
.btn-wa { background: var(--vert-wa); color: #fff; }
.btn-wa:hover { background: var(--vert-wa-2); }
.btn-contour { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-contour:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.btn-clair { background: var(--surface); border-color: var(--bordure); color: var(--texte); }
.btn-clair:hover { border-color: var(--marine); }
.btn-large { width: 100%; padding: 16px 22px; font-size: 16px; }

/* ---------- Bandeau + en-tête ---------- */
.bandeau { background: var(--marine); color: rgba(255, 255, 255, .78); font-size: 13px; }
.bandeau-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.bandeau-wa { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 500; }
.bandeau-wa svg { color: #3ddc84; font-size: 15px; }
.bandeau-wa:hover { color: var(--or); }
.choix-pays select {
  background: var(--marine-2); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px; padding: 4px 8px; font-size: 13px; cursor: pointer;
}
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--bordure); }
.entete-in { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-marque { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(6, 26, 56, .18); }
.logo-texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo-texte strong { font: 700 17px var(--police-titre); letter-spacing: -.01em; }
.logo-texte small { font-size: 12px; color: var(--texte-3); letter-spacing: .04em; }
.logo-clair .logo-texte small { color: rgba(255, 255, 255, .55); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--texte-2); transition: color .2s, background .2s; }
.nav a:hover { color: var(--texte); background: var(--fond); }
.nav a[aria-current="page"] { color: var(--marine); background: #eef1f6; }
.burger { display: none; background: none; border: 0; font-size: 26px; padding: 6px; cursor: pointer; margin-left: auto; }

/* ---------- Héros ---------- */
.heros {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 80% 0%, var(--marine-3) 0%, var(--marine) 60%);
}
/* Photo de fond du hero : terminal portuaire, véhicules prêts à l'expédition.
   Le dégradé horizontal assombrit la moitié gauche, là où se pose le texte, et laisse
   la droite lisible — portiques, conteneurs et navire restent visibles. */
.heros-fond { position: absolute; inset: 0; z-index: -1; background: var(--marine); }
.heros-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.heros-fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 26, 56, .95) 0%, rgba(6, 26, 56, .88) 34%, rgba(6, 26, 56, .52) 64%, rgba(6, 26, 56, .34) 100%),
    linear-gradient(0deg, rgba(6, 26, 56, .72) 0%, transparent 32%);
}
.heros-in { padding: 96px 20px 64px; position: relative; }

.heros h1 { font-size: clamp(36px, 5.6vw, 64px); max-width: 680px; font-weight: 700; text-shadow: 0 2px 18px rgba(4, 14, 30, .45); }
.heros h1 em { font-style: normal; color: var(--or); }
.heros-texte { font-size: clamp(17px, 2vw, 20px); color: rgba(255, 255, 255, .9); max-width: 600px; margin-top: 22px; text-shadow: 0 1px 12px rgba(4, 14, 30, .5); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.recherche {
  margin-top: 56px; background: var(--surface); color: var(--texte); border-radius: 18px;
  padding: 10px; display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 6px; box-shadow: var(--ombre-forte);
}
.recherche label { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; transition: background .2s; }
.recherche label:hover { background: var(--fond); }
.recherche label + label { border-left: 1px solid var(--bordure); }
.recherche span { font-size: 12px; font-weight: 600; color: var(--texte-3); text-transform: uppercase; letter-spacing: .06em; }
.recherche select { border: 0; background: none; padding: 2px 0; font-weight: 600; font-size: 15px; cursor: pointer; appearance: none; outline: none; }
.recherche .btn { border-radius: 12px; padding: 0 28px; }

.chiffres { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 44px; }
.chiffres div { display: flex; flex-direction: column; }
.chiffres strong { font: 700 32px var(--police-titre); }
.chiffres span { color: rgba(255, 255, 255, .62); font-size: 14px; }

/* ---------- Marques ---------- */
.marques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.marque {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 26px 28px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.marque:hover { border-color: var(--marine); box-shadow: var(--ombre); transform: translateY(-2px); }
.marque strong { font: 700 22px var(--police-titre); display: block; }
.marque span { color: var(--texte-3); font-size: 14px; }
.marque svg { font-size: 22px; color: var(--or-fonce); }

/* ---------- Cartes véhicules ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.carte { background: var(--surface); border-radius: var(--rayon); border: 1px solid var(--bordure); overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s; }
.carte:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); border-color: transparent; }
.carte-lien { display: flex; flex-direction: column; height: 100%; }
.carte-img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #e9edf3, #dde3eb); overflow: hidden; }
.carte-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .5s; }
.carte:hover .carte-img img { transform: scale(1.04); }
.carte-img-vide { position: absolute; inset: 0; display: grid; place-items: center; color: #b7c0cd; font-size: 72px; }
.carte-img-vide svg { width: 1.8em; }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(10, 26, 47, .85); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}
.badge-neuf { background: var(--or); color: var(--marine); }
.nb-photos { position: absolute; bottom: 10px; right: 10px; z-index: 2; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.carte-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.carte-titre { font-size: 18px; font-weight: 600; }
.carte-infos { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--texte-3); font-size: 14px; margin-top: 6px; }
.carte-infos span + span::before { content: "·"; margin-right: 14px; color: var(--bordure); }
.carte-prix { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bordure); margin-top: 16px; display: flex; flex-direction: column; }
.carte-prix strong { font: 700 22px var(--police-titre); color: var(--marine); }
.carte-prix small { font-size: 14px; font-weight: 600; color: var(--texte-2); }
/* Mention sous le montant : le prix affiché est un prix final, transport et douane compris. */
.prix-inclus { font-size: 12px; line-height: 1.4; color: var(--texte-3); margin-top: 5px; }
.sur-demande { font-size: 18px !important; }

/* ---------- Services ---------- */
.section-sombre { background: var(--marine); color: #fff; }
.section-sombre .section-titre p { color: rgba(255, 255, 255, .7); }
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service { background: var(--marine-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--rayon); padding: 30px 26px; }
.service-icone { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(227, 169, 43, .14); color: var(--or); font-size: 26px; margin-bottom: 22px; }
.service h3 { font-size: 19px; margin-bottom: 10px; }
.service p { color: rgba(255, 255, 255, .7); font-size: 15px; }
.service-vedette { background: linear-gradient(160deg, #2a4a78, var(--marine-2)); border-color: rgba(227, 169, 43, .45); }
.service-vedette .tag { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--marine); background: var(--or); padding: 3px 10px; border-radius: 999px; }

/* ---------- Processus ---------- */
.etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: etape; position: relative; }
.etape { position: relative; padding-top: 64px; }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 2px solid var(--marine);
  font: 700 15px var(--police-titre); color: var(--marine); z-index: 1;
}
.etape::after { content: ""; position: absolute; top: 24px; left: 48px; right: -18px; height: 2px; background: repeating-linear-gradient(90deg, var(--bordure) 0 6px, transparent 6px 12px); }
.etape:last-child::after { display: none; }
.etape h3 { font-size: 18px; margin-bottom: 8px; }
.etape p { color: var(--texte-2); font-size: 15px; }

/* ---------- Destinations ---------- */
.destinations { display: flex; flex-wrap: wrap; gap: 8px; }
.destinations span { background: var(--surface); border: 1px solid var(--bordure); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500; }
.destination { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-s); padding: 16px 18px; }
.destination strong { display: block; font-weight: 600; }
.destination span { color: var(--texte-3); font-size: 14px; }

/* ---------- Atouts ---------- */
.atouts { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.atouts-liste { display: grid; gap: 22px; margin-top: 32px; }
.atout { display: flex; gap: 16px; }
.atout-puce { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e8f6ee; color: var(--vert-wa); display: grid; place-items: center; font-size: 16px; margin-top: 2px; }
.atout h3 { font-size: 17px; margin-bottom: 4px; }
.atout p { color: var(--texte-2); font-size: 15px; }
.atouts-visuel { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--marine-3), var(--marine)); box-shadow: var(--ombre-forte); }
.atouts-visuel > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.atouts-carte { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-radius: var(--rayon); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.atouts-carte img { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.atouts-carte b { display: block; color: var(--marine); font-size: 16px; }
.atouts-carte span { color: var(--texte-2); font-size: 14px; line-height: 1.35; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-s); margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--texte-3); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--texte-2); }

/* ---------- Appel à l'action ---------- */
.cta { background: linear-gradient(120deg, var(--marine) 0%, var(--marine-3) 100%); border-radius: 24px; color: #fff; padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 169, 43, .25), transparent 70%); }
.cta h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: 560px; }
.cta p { color: rgba(255, 255, 255, .72); margin-top: 10px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--marine); color: rgba(255, 255, 255, .72); margin-top: 88px; padding-top: 64px; font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.pied-grille > div:first-child p { margin-top: 18px; max-width: 320px; }
.pied .devise { font-style: italic; color: #fff; font-size: 17px; margin-top: 20px; }
.pied .devise + p { margin-top: 8px; }
.pied h4 { color: #fff; font-size: 15px; margin-bottom: 16px; font-family: var(--police); font-weight: 600; letter-spacing: 0; }
.pied-grille a, .pied-grille span { display: block; padding: 4px 0; }
.pied-grille a:hover { color: var(--or); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; padding-bottom: 28px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.wa-flottant { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--vert-wa); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 10px 30px -8px rgba(31, 168, 85, .7); transition: transform .2s; }
.wa-flottant:hover { transform: scale(1.06); }

/* ---------- Catalogue ---------- */
.page-titre { background: var(--marine); color: #fff; padding: 48px 0 44px; }
.page-titre h1 { font-size: clamp(30px, 4vw, 44px); }
.page-titre p { color: rgba(255, 255, 255, .7); margin-top: 10px; }
.fil { font-size: 14px; color: rgba(255, 255, 255, .55); margin-bottom: 14px; }
.fil a:hover { color: #fff; }
.catalogue { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding-top: 36px; align-items: start; }
.filtres { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px; }
.filtres h2 { font-size: 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.filtres h2 button { background: none; border: 0; color: var(--or-fonce); font: 600 14px var(--police); cursor: pointer; }
.filtre { padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.filtre:last-of-type { border-bottom: 0; }
.filtre > span { display: block; font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 8px; }
.filtre select, .filtre input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--surface); }
.filtre select:focus, .filtre input:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(18, 41, 74, .12); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilles label { cursor: pointer; }
.pastilles input { position: absolute; opacity: 0; pointer-events: none; }
.pastilles span { display: inline-block; padding: 7px 14px; border: 1px solid var(--bordure); border-radius: 999px; font-size: 14px; transition: all .15s; }
.pastilles input:checked + span { background: var(--marine); border-color: var(--marine); color: #fff; }
.pastilles input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
.barre-resultats { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.barre-resultats p { color: var(--texte-2); }
.barre-resultats strong { color: var(--texte); }
.barre-resultats select { padding: 9px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--surface); }
.btn-filtres { display: none; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.pagination button { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bordure); background: var(--surface); cursor: pointer; font-weight: 600; }
.pagination button[aria-current="page"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: default; }
.vide { text-align: center; padding: 80px 20px; background: var(--surface); border: 1px dashed var(--bordure); border-radius: var(--rayon); }
.vide h3 { font-size: 20px; margin-bottom: 8px; }
.vide p { color: var(--texte-2); margin-bottom: 20px; }

/* ---------- Fiche véhicule ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 36px; padding-top: 32px; align-items: start; }
.fiche-fil { font-size: 14px; color: var(--texte-3); padding-top: 28px; }
.fiche-fil a:hover { color: var(--texte); }
.galerie-principale { position: relative; aspect-ratio: 16 / 10; border-radius: var(--rayon); overflow: hidden; background: linear-gradient(135deg, #e9edf3, #dde3eb); }
.galerie-principale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.galerie-principale .carte-img-vide { font-size: 110px; }
.galerie-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); cursor: pointer; display: grid; place-items: center; font-size: 20px; box-shadow: var(--ombre); }
.galerie-nav.prec { left: 14px; } .galerie-nav.prec svg { transform: rotate(180deg); }
.galerie-nav.suiv { right: 14px; }
.galerie-compteur { position: absolute; bottom: 14px; right: 14px; z-index: 2; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.vignettes { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.vignettes button { flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: #e3e8ef; opacity: .7; transition: opacity .2s, border-color .2s; }
.vignettes button[aria-current="true"] { border-color: var(--or); opacity: 1; }
.vignettes button:hover { opacity: 1; }
.vignettes img { width: 100%; height: 100%; object-fit: cover; }
.fiche-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 28px; margin-top: 24px; }
.fiche-bloc h2 { font-size: 20px; margin-bottom: 18px; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bordure); border: 1px solid var(--bordure); border-radius: var(--rayon-s); overflow: hidden; }
.specs div { background: var(--surface); padding: 14px 16px; }
.specs dt { font-size: 12px; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.specs dd { margin: 2px 0 0; font-weight: 600; }
.fiche-texte p + p { margin-top: 12px; }
.fiche-texte p { color: var(--texte-2); }
.inclus-titre { margin-top: 20px; font-weight: 600; }
.inclus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 18px; padding: 0; list-style: none; }
.inclus li { display: flex; gap: 10px; font-size: 15px; }
.inclus li::before { content: "✓"; color: var(--vert-wa); font-weight: 700; }

.achat { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 18px; padding: 28px; box-shadow: var(--ombre); }
.achat-etiquettes { display: flex; gap: 8px; margin-bottom: 12px; }
.etiquette { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--fond); color: var(--texte-2); }
.etiquette-or { background: #fbf1da; color: var(--or-fonce); }
.achat h1 { font-size: 28px; }
.achat-sous { color: var(--texte-3); margin-top: 6px; }
.achat-pays { display: block; margin-top: 22px; }
.achat-pays span { display: block; font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 6px; }
.achat-pays select { width: 100%; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon-s); background: var(--surface); font-weight: 600; }
.detail-prix { margin: 20px 0; border-top: 1px solid var(--bordure); }
.detail-prix div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bordure); font-size: 15px; }
.detail-prix dt { color: var(--texte-2); }
.detail-prix dd { margin: 0; font-weight: 600; text-align: right; }
.detail-prix dd small { display: block; font-weight: 400; font-size: 13px; color: var(--texte-3); }
.detail-prix .total dd { font-size: 26px !important; }
.detail-prix .total { padding-top: 16px; align-items: baseline; }
.detail-prix .total dt { color: var(--texte); font-weight: 600; }
.detail-prix .total dd { font: 700 30px var(--police-titre); color: var(--marine); }
.detail-prix .total dd small { display: block; font: 500 14px var(--police); color: var(--texte-3); }
.achat-note { font-size: 13px; color: var(--texte-3); margin-top: 14px; line-height: 1.5; }
.achat .btn + .btn { margin-top: 10px; }
.similaires { margin-top: 72px; }
.similaires h2 { font-size: 28px; margin-bottom: 24px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  /* Cinq champs de recherche tiennent mal en une ligne sous 1080 px. */
  .recherche { grid-template-columns: repeat(3, 1fr); }
  .recherche label + label { border-left: 0; }
  .recherche .btn { grid-column: 1 / -1; padding: 14px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .etapes { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .etape::after { display: none; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .fiche { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fiche > div:first-child { display: contents; }
  .achat { position: static; order: 1; margin-top: 20px; }
  .fiche-bloc { order: 2; }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--bordure); padding: 12px 20px 20px; box-shadow: var(--ombre); }
  .nav.ouvert { display: flex; }
  .nav a { padding: 12px 14px; }
  .burger { display: block; }
  .entete-cta { margin-left: auto; }
  .entete-cta + .burger { margin-left: 0; }
  .recherche { grid-template-columns: 1fr 1fr; }
  .recherche label + label { border-left: 0; }
  .recherche .btn { grid-column: 1 / -1; padding: 14px; }
  .marques { grid-template-columns: 1fr; }
  .atouts { grid-template-columns: 1fr; }
  .atouts-visuel { aspect-ratio: 16 / 10; }
  .cta { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .catalogue { grid-template-columns: minmax(0, 1fr); }
  .filtres { display: none; position: fixed; inset: 0; top: 0; z-index: 80; border-radius: 0; overflow-y: auto; }
  .filtres.ouvert { display: block; }
  .btn-filtres { display: inline-flex; }
  .specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .conteneur { padding: 0 16px; }
  .section { padding: 64px 0; }
  .bandeau { display: none; }
  .entete-cta span { display: none; }
  .entete-cta { padding: 10px; }
  .logo-texte small { display: none; }
  .heros-in { padding: 64px 16px 48px; }
  .recherche { grid-template-columns: 1fr; }
  .chiffres { gap: 28px; }
  .chiffres strong { font-size: 26px; }
  .services, .etapes { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .inclus { grid-template-columns: 1fr; }
  .achat, .fiche-bloc { padding: 22px; }
  .detail-prix div { flex-direction: column; gap: 2px; }
  .detail-prix dd { text-align: left; }
  .wa-flottant { right: 16px; bottom: 16px; width: 54px; height: 54px; font-size: 26px; }
}


/* ---------- Visionneuse plein écran ---------- */
.galerie-principale { cursor: zoom-in; }
.galerie-loupe { position: absolute; bottom: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 8px; pointer-events: none; }
.galerie-loupe svg { width: 15px; height: 15px; }
body.vis-ouverte { overflow: hidden; }
.visionneuse { position: fixed; inset: 0; z-index: 90; background: #060d1a; display: none; }
.visionneuse.ouverte { display: block; }
.vis-scene { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.vis-scene img { width: 100%; height: 100%; max-width: 1100px; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center center; }
.visionneuse.zoome .vis-scene { cursor: grab; }
.vis-fermer, .vis-nav { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #0b1b33; cursor: pointer; display: grid; place-items: center; }
.vis-fermer svg, .vis-nav svg { width: 22px; height: 22px; }
.vis-fermer { top: 16px; right: 16px; }
.vis-nav { top: 50%; transform: translateY(-50%); }
.vis-nav.prec { left: 16px; } .vis-nav.prec svg { transform: rotate(180deg); }
.vis-nav.suiv { right: 16px; }
.vis-barre { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 14px; color: #fff; font-size: 13px; pointer-events: none; }
.vis-compteur { background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 8px; }
.vis-aide { opacity: .75; }
@media (max-width: 640px) {
  .vis-nav { width: 40px; height: 40px; }
  .vis-nav.prec { left: 8px; } .vis-nav.suiv { right: 8px; }
  .vis-aide { display: none; }
}


/* ---------- Navigation par catégorie et par marque ---------- */
.categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.categorie {
  display: flex; align-items: center; gap: 16px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.categorie:hover { border-color: var(--marine); box-shadow: var(--ombre); transform: translateY(-2px); }
.categorie-img, .marque-img {
  width: 92px; height: 70px; flex: none; border-radius: var(--rayon-s); overflow: hidden;
  background: linear-gradient(135deg, #e9edf3, #dde3eb);
}
.categorie-img img, .marque-img img { width: 100%; height: 100%; object-fit: cover; }
.categorie-texte { display: flex; flex-direction: column; min-width: 0; }
.categorie-texte strong { font: 700 17px/1.25 var(--police-titre); }
.categorie-texte small {
  color: var(--texte-3); font-size: 13px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.categorie-texte em { color: var(--or-fonce); font-style: normal; font-weight: 600; font-size: 13px; margin-top: 6px; }
.marque { justify-content: flex-start; padding: 14px; }
.marque-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.marque-texte strong { font: 700 20px var(--police-titre); }
.marque-texte small { color: var(--texte-3); font-size: 14px; }
@media (max-width: 640px) {
  .categories { grid-template-columns: 1fr; }
  .categorie-img, .marque-img { width: 78px; height: 60px; }
}

/* ---------- Documents officiels ---------- */
.documents { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.documents-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.certificat { margin: 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px; }
.certificat-vue {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--rayon-s);
  background: var(--fond); display: grid; place-items: center; overflow: hidden;
}
/* L'image est montrée en entier : un document ne se recadre pas. */
.certificat-vue img { width: 100%; height: 100%; object-fit: contain; }
.certificat-attente {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 10px; text-align: center; padding: 12px;
  border: 1.5px dashed var(--bordure); border-radius: var(--rayon-s);
  color: var(--texte-3); font-size: 13px;
}
.certificat-attente svg { width: 30px; height: 30px; color: #b7c0cd; }
.certificat-rempli .certificat-attente { display: none; }
.certificat-rempli .certificat-vue { cursor: zoom-in; }
.certificat figcaption { display: flex; flex-direction: column; margin-top: 12px; }
.certificat-nom { font: 600 15px/1.3 var(--police-titre); }
.certificat-detail { color: var(--texte-3); font-size: 13px; margin-top: 2px; }
@media (max-width: 900px) {
  .documents { grid-template-columns: 1fr; gap: 30px; }
  /* Sur téléphone, un seul document par ligne : le cadre occupe toute la largeur,
     ce qui laisse assez de place pour le lire avant de l'ouvrir en plein écran. */
  .documents-liste { grid-template-columns: 1fr; }
}

/* ---------- Hero : cadrage mobile et tablette ----------
   Pensé à part, et pas réduit du desktop. Sur téléphone le hero mesure près de 1 400 px :
   une photo en fond plein cadre y placerait les véhicules au beau milieu du formulaire de
   recherche, invisibles. Elle passe donc en bandeau haut, sur toute la largeur, cadrée de
   façon à contenir la scène entière — ciel, portiques, conteneurs, rangée de véhicules —
   puis le texte se pose dessous sur le bleu de la marque. L'image ouvre la page au lieu
   de se diluer derrière elle. */
@media (max-width: 900px) {
  .heros { background: var(--marine); }
  .heros-fond { inset: 0 0 auto 0; height: 330px; }
  .heros-fond img { height: 330px; object-position: 55% 50%; }
  .heros-fond::after {
    background: linear-gradient(180deg,
      rgba(6, 26, 56, .18) 0%,
      rgba(6, 26, 56, .30) 52%,
      rgba(6, 26, 56, .78) 84%,
      var(--marine) 100%);
  }
  .heros-in { padding-top: 356px; }
}
@media (max-width: 600px) {
  .heros-fond, .heros-fond img { height: 280px; }
  .heros-in { padding-top: 304px; }
}

/* ---------- Échéancier de paiement ---------- */
.detail-prix .versement dt { color: var(--texte); font-weight: 600; }
.detail-prix .versement dd { display: flex; flex-direction: column; align-items: flex-end; font-size: 17px; }
.detail-prix .versement dd small { max-width: 32ch; margin-top: 4px; text-align: right; line-height: 1.45; }
.detail-prix .versement sup { font-size: .7em; }
@media (max-width: 600px) {
  /* En colonne, tout est aligné à gauche : le texte d'explication reste lisible. */
  .detail-prix .versement dd { align-items: flex-start; }
  .detail-prix .versement dd small { text-align: left; max-width: none; }
}

/* ---------- Recherche du catalogue ----------
   Premier élément utile de la page : visible d'emblée, sur toutes les tailles d'écran,
   sans avoir à ouvrir le panneau de filtres. */
.barre-recherche {
  display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 8px 8px 16px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 999px;
  box-shadow: var(--ombre); max-width: 720px;
}
.barre-recherche .loupe { width: 21px; height: 21px; flex: none; color: var(--texte-3); }
.barre-recherche input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 400 16px var(--police); color: var(--texte); padding: 10px 0;
}
.barre-recherche input::placeholder { color: var(--texte-3); }
.barre-recherche input::-webkit-search-cancel-button { display: none; }
#effacer-recherche {
  border: 0; background: var(--fond); color: var(--texte-2); width: 28px; height: 28px;
  border-radius: 50%; font-size: 19px; line-height: 1; cursor: pointer; flex: none;
}
#effacer-recherche:hover { background: var(--bordure); }
.barre-recherche .btn { border-radius: 999px; padding: 12px 26px; flex: none; }

.suggestions { margin-top: 12px; font-size: 13.5px; color: var(--texte-3); }
.suggestions button {
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte-2);
  font: 500 13.5px var(--police); padding: 5px 13px; border-radius: 999px;
  margin: 4px 4px 0 0; cursor: pointer;
}
.suggestions button:hover { border-color: var(--marine-3); color: var(--marine-3); }

@media (max-width: 600px) {
  .barre-recherche { padding-left: 14px; gap: 8px; }
  .barre-recherche .btn { padding: 12px 18px; font-size: 15px; }
  .barre-recherche input { font-size: 16px; }
}

/* ---------- Pays de livraison, dans le pied de page ----------
   Une bande discrete de liens vers les pages pays. Elle sert autant au visiteur, qui
   voit tout de suite si son pays est couvert, qu'a Google, qui ne suit que les liens. */
.pied-pays { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; }
.pied-pays h4 { color: #fff; font-size: 14px; margin-bottom: 12px; font-weight: 600; }
.pied-pays p { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pied-pays a { color: rgba(255, 255, 255, .62); font-size: 13.5px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 4px 12px; }
.pied-pays a:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }