/* =============================================================================
   Vitrine AutoExpress — direction B « Garage » (socle + page d'accueil)
   Sombre, sportif, tenu : fond noir chaud #141518, sections alternées en
   anthracite #1E2024, texte blanc cassé #F4F3EF. La primaire du client
   n'apparaît que comme bandes horizontales de 6 px, boutons pleins, filets et
   marque du logo ; l'accent sert aux pastilles « Garantie » ; le vert WhatsApp
   #25D366 est la seule autre couleur. Titres Barlow Condensed 700 en capitales,
   texte Barlow 400/500 (polices chargées dans templates/header.php).

   COULEURS DE MARQUE — lib/Theme.php injecte sur :root, après cette feuille :
     --primary-color, --secondary-color, --accent-color, --on-primary,
     --text-color, --background-color, --hero-gradient-start/mid.
   Correspondance avec les jetons de la direction B :
     --primary    <- --primary-color    (repli #1e3a8a)
     --secondary  <- --secondary-color  (repli #2563eb) : liens de survol, filets secondaires
     --accent     <- --accent-color     (repli #16a34a) : filet des pastilles « Garantie »
     --on-primary <- --on-primary       (repli #fff)    : texte posé sur la primaire
   --text-color et --background-color sont volontairement IGNORÉS : le fond
   noir/anthracite et le texte clair font partie du design B et ne doivent pas
   être écrasés par les réglages « page claire » d'un client.

   Les pages inventaire, détail et contact reçoivent chacune une feuille
   assets/css/page-{voitures|contact|detail}.css chargée après celle-ci par
   header.php ; le bloc « Pages secondaires (transition) » en fin de fichier les
   rend présentables en attendant.
   ============================================================================= */

/* ============================================================
   0. JETONS + RESET
   ============================================================ */
:root {
	--primary: var(--primary-color, #1e3a8a);
	--secondary: var(--secondary-color, #2563eb);
	--accent: var(--accent-color, #16a34a);
	--on-primary: #fff;

	--noir: #141518;
	--noir-2: #0F1012;
	--anth: #1E2024;
	--anth-2: #272A30;
	--blanc: #F4F3EF;
	--gris: #CBCFD6;   /* texte courant sur fond sombre (contraste ≈ 11:1) */
	--gris-2: #A3A8B1; /* libellés secondaires */
	--filet: rgba(244, 243, 239, .12);
	--filet-2: rgba(244, 243, 239, .22);
	--wa: #25D366;
	--sur-wa: #07261A;

	--police-titre: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
	--police-texte: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--rayon: 6px;
	--rayon-s: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--police-texte);
	font-size: 1.06rem;
	line-height: 1.7;
	font-weight: 400;
	color: var(--blanc);
	background: var(--noir);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, p, ul, ol, li, figure, figcaption, address, form { margin: 0; padding: 0; font-style: normal; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
a { color: inherit; text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; margin: 0; }
button, select { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; }
p { color: var(--gris); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap, .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.main-content { display: block; }
[id] { scroll-margin-top: 92px; }

/* ============================================================
   1. VOCABULAIRE — bande 6 px, titres, sur-titres, boutons, pastilles, apparition
   ============================================================ */
/* Le seul dispositif décoratif de marque : une bande horizontale pleine de 6 px */
.bande { height: 6px; background: var(--primary); }

.sur { display: inline-flex; align-items: center; gap: 12px; font-family: var(--police-titre); font-weight: 600; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--gris); }
.sur::before { content: ""; flex: none; width: 28px; height: 3px; background: var(--primary); }

.h2 { font-family: var(--police-titre); font-weight: 700; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: .98; letter-spacing: .01em; text-transform: uppercase; color: var(--blanc); margin-top: 14px; text-wrap: balance; }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.tete__chapo { max-width: 560px; font-size: 1.08rem; }

/* Boutons : plein primaire, contour blanc cassé, WhatsApp vert ; coins 4 px, capitales condensées */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border: 2px solid var(--primary); border-radius: var(--rayon-s); background: var(--primary); color: var(--on-primary); font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-align: center; cursor: pointer; transition: filter .2s, background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; display: block; vertical-align: middle; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: none; filter: brightness(.95); }
.btn--contour { background: transparent; border-color: var(--filet-2); color: var(--blanc); }
.btn--contour:hover { filter: none; border-color: var(--blanc); background: rgba(244, 243, 239, .06); }
.btn--wa { background: var(--wa); border-color: var(--wa); color: var(--sur-wa); }
.btn--wa:hover { filter: brightness(1.06); }
.btn--blanc { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.btn--blanc:hover { filter: brightness(.96); }
.btn--sur-primaire { background: transparent; border-color: var(--on-primary); color: var(--on-primary); }
.btn--sur-primaire:hover { filter: none; background: rgba(255, 255, 255, .12); }
.btn--lg { height: 56px; padding: 0 30px; font-size: 1.12rem; }
.btn--sm { height: 42px; padding: 0 16px; font-size: .95rem; }

/* Pastille « Garantie » : fond noir, filet accent à gauche, texte blanc cassé */
.past { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--rayon-s); background: rgba(20, 21, 24, .92); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; border-left: 4px solid var(--accent); }
.past--neutre { border-left-color: var(--gris); }

/* Lien flèche */
.lien { display: inline-flex; align-items: center; gap: 10px; font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blanc); padding-bottom: 4px; border-bottom: 2px solid var(--primary); transition: gap .25s var(--ease), border-color .25s; }
.lien svg { width: 18px; height: 18px; }
.lien:hover { gap: 16px; border-color: var(--blanc); }

/* Apparition au défilement (verticale uniquement : aucun débordement latéral) ;
   assets/js/main.js pose .est-visible via IntersectionObserver */
[data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--delai, 0s); }
[data-anim].est-visible { opacity: 1; transform: none; }

/* ============================================================
   2. EN-TÊTE — noir, logotype, menu en capitales, WhatsApp contour vert, téléphone en bloc primaire, bande 6 px
   ============================================================ */
.hd { position: sticky; top: 0; z-index: 60; background: var(--noir); }
.hd__in { display: flex; align-items: center; gap: 22px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--blanc); min-width: 0; }
.logo svg { width: 34px; height: 34px; color: var(--primary-texte, var(--primary)); }
.logo img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--rayon-s); background: var(--blanc); padding: 3px; }
.logo__nom { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 1.42rem; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.logo__sous { display: block; margin-top: 4px; font-weight: 600; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; line-height: 1; color: var(--gris); white-space: nowrap; }
.hd__nav { margin: 0 auto; }
.hd__nav ul { display: flex; align-items: center; gap: 26px; }
.hd__nav a { position: relative; display: block; padding: 8px 0; font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); transition: color .2s; white-space: nowrap; }
.hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.hd__nav a:hover, .hd__nav a[aria-current="page"] { color: var(--blanc); }
.hd__nav a:hover::after, .hd__nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd__nav .hd__nav-tel { display: none; }
/* Commandes de l'en-tête (langue, menu) : même famille de formes — pastilles de 44 px, contours fins. */

/* Bouton WhatsApp flottant (templates/footer.php) : fixe en bas à droite pendant tout le défilement,
   au-dessus du contenu mais sous l'en-tête, le menu des langues et la visionneuse de photos. */
.wa-flottant { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .22), 0 2px 8px rgba(37, 211, 102, .35); transition: transform .2s var(--ease), box-shadow .2s; }
.wa-flottant svg { width: 26px; height: 26px; }
.wa-flottant:hover { color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgba(0, 0, 0, .26), 0 4px 12px rgba(37, 211, 102, .45); }
.wa-flottant:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--wa); }
body.lightbox-open .wa-flottant { display: none; }
@media (min-width: 1001px) {
	.wa-flottant { right: 26px; bottom: 26px; width: 52px; height: 52px; }
	.wa-flottant svg { width: 28px; height: 28px; }
}
@media print { .wa-flottant { display: none; } }
.hd__tel { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 46px; padding: 0 18px; border-radius: var(--rayon-s); background: var(--primary); color: var(--on-primary); font-family: var(--police-titre); font-weight: 700; font-size: 1.12rem; letter-spacing: .04em; line-height: 1; white-space: nowrap; transition: filter .2s; }
.hd__tel svg { width: 18px; height: 18px; }
.hd__tel:hover { filter: brightness(1.12); }
/* Choix de la langue (templates/header.php) : <details> natif, liste déroulante sous le bouton */
.langue { position: relative; flex: none; }
.langue summary { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 13px 0 9px; border: 1px solid var(--filet-2); border-radius: 999px; color: var(--blanc); font-family: var(--police-titre); font-weight: 600; font-size: .98rem; letter-spacing: .08em; line-height: 1; cursor: pointer; list-style: none; user-select: none; transition: border-color .2s, background .2s; }
.langue summary::-webkit-details-marker { display: none; }
/* Petit chevron : indique que le bouton ouvre une liste */
.langue summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .65; transition: transform .2s var(--ease); }
.langue[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
/* Drapeau en pastille ronde */
.langue .drapeau { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(128, 128, 128, .28); }
.langue summary:hover, .langue[open] summary { border-color: var(--primary); background: rgba(128, 128, 128, .08); }
.langue summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.langue ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 190px; padding: 6px; border: 1px solid var(--filet-2); border-radius: 14px; background: var(--anth); box-shadow: 0 14px 32px rgba(0, 0, 0, .35); }
.langue a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--gris); font-weight: 500; white-space: nowrap; }
.langue a:hover, .langue a:focus-visible { background: rgba(244, 243, 239, .08); color: var(--blanc); outline: none; }
.langue a[aria-current] { color: var(--blanc); box-shadow: inset 3px 0 0 var(--primary); }
.hd__burger { display: none; position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--filet-2); border-radius: 50%; transition: border-color .2s, background .2s; }
.hd__burger:hover { border-color: var(--primary); background: rgba(128, 128, 128, .08); }
.hd__burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--blanc); transition: transform .3s var(--ease), opacity .2s; }
.hd__burger span:nth-child(1) { top: 14px; }
.hd__burger span:nth-child(2) { top: 20px; }
.hd__burger span:nth-child(3) { top: 26px; }
.hd.est-ouvert .hd__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hd.est-ouvert .hd__burger span:nth-child(2) { opacity: 0; }
.hd.est-ouvert .hd__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Avis « Mode prévisualisation » (jeton de démo) */
.demo-notice { background: var(--anth); border-bottom: 1px solid var(--filet); }
.demo-notice__in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 6px 32px; font-size: .84rem; color: var(--gris); text-align: center; }
.demo-notice__in strong { color: var(--blanc); font-weight: 600; }
.demo-notice__cta { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; background: var(--primary); color: var(--on-primary, #fff); font-weight: 600; font-size: .8rem; text-decoration: none; border-radius: var(--rayon-s); white-space: nowrap; }
.demo-notice__cta:hover, .demo-notice__cta:focus-visible { filter: brightness(1.1); }
.demo-notice__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px 0 8px; border-left: 4px solid var(--primary); background: var(--noir); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; border-radius: var(--rayon-s); white-space: nowrap; }

/* ============================================================
   3. HERO — photo du véhicule vedette fondue dans le noir, titre sur trois lignes, trois chiffres ; moteur de recherche en barre anthracite dessous
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--noir); }
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Fondu de la photo dans le noir, à gauche et en bas (le seul dégradé : noir vers transparent) */
.hero__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--noir) 0%, rgba(20, 21, 24, .86) 22%, rgba(20, 21, 24, .35) 52%, rgba(20, 21, 24, .15) 100%); }
.hero__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; background: linear-gradient(180deg, rgba(20, 21, 24, 0) 0%, var(--noir) 100%); }
.hero__in { position: relative; z-index: 2; padding: 14px 32px 50px; }
.hero__contenu { max-width: 640px; }
.h1 { font-family: var(--police-titre); font-weight: 700; font-size: clamp(2.4rem, 4vw, 2.95rem); line-height: .94; letter-spacing: .01em; text-transform: uppercase; color: var(--blanc); }
.h1 span { display: block; }
.h1 .h1__fort { color: var(--primary-texte, var(--primary)); }
.hero__texte { margin-top: 12px; max-width: 660px; font-size: 1.08rem; color: var(--gris); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.chiffres { display: flex; margin-top: 16px; border-top: 1px solid var(--filet); max-width: 720px; }
.chiffres li { display: flex; align-items: baseline; gap: 8px; padding: 10px 20px 0 0; white-space: nowrap; }
.chiffres li + li { padding-left: 20px; border-left: 1px solid var(--filet); }
.chiffres b { font-family: var(--police-titre); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--blanc); white-space: nowrap; }
.chiffres span { font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); line-height: 1.2; }

/* Moteur de recherche : barre anthracite à bord fin, 4 menus sombres + bouton primaire, chevauche le bas du hero */
.rech { position: relative; z-index: 3; margin-top: -34px; padding-bottom: 10px; }
.rech__in { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; padding: 9px; background: var(--anth); border: 1px solid var(--filet-2); border-radius: var(--rayon); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.champ { position: relative; min-width: 0; }
.champ label { position: absolute; left: 14px; top: 6px; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); pointer-events: none; }
.champ select { width: 100%; height: 50px; padding: 17px 38px 0 14px; background: var(--noir); border: 1px solid var(--filet); border-radius: var(--rayon-s); color: var(--blanc); font-weight: 500; font-size: .95rem; line-height: 1.2; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9ADB5' stroke-width='2.5' 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; transition: border-color .2s; }
.champ select:hover, .champ select:focus { border-color: var(--filet-2); outline: none; }
.champ select:focus-visible { outline: 2px solid var(--blanc); outline-offset: 1px; }
.champ option { background: var(--anth); color: var(--blanc); }
.rech__btn { height: 50px; padding: 0 28px; }

/* ============================================================
   4. VÉHICULES — cartes anthracite, photo 16:10, bande primaire sous la photo, prix en gros blanc
   ============================================================ */
.veh { padding: 76px 0 96px; background: var(--noir); }
.veh__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.car-card { display: flex; flex-direction: column; background: var(--anth); border-radius: var(--rayon); overflow: hidden; border: 1px solid rgba(244, 243, 239, .06); transition: transform .3s var(--ease), border-color .3s; min-width: 0; }
.car-card:hover { transform: translateY(-4px); border-color: var(--filet-2); }
.car-image-wrapper { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--noir); }
.car-image-wrapper .card-img-link { display: block; width: 100%; height: 100%; }
.car-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); cursor: zoom-in; }
.car-card:hover .car-image-wrapper img { transform: scale(1.06); }
.car-image-wrapper .past { position: absolute; left: 12px; top: 12px; z-index: 2; }

/* Favori (cœur) : carte véhicule et fiche détail — état géré par main.js */
.fav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .15s, transform .2s var(--ease); }
.fav-btn[aria-pressed="true"] svg { fill: #ef4444; stroke: #ef4444; }
.fav-btn.est-anime svg { transform: scale(1.25); }
.car-image-wrapper .fav-btn { position: absolute; right: 12px; top: 12px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 21, 24, .72); color: #fff; cursor: pointer; }
.car-image-wrapper .fav-btn:hover { background: rgba(20, 21, 24, .9); }
.fav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fav-btn--large { gap: 8px; }
.car-image-wrapper .img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--gris-2); }
/* Flèches de la mini-galerie (conservées : assets/js/main.js) */
.carousel-arrow { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--filet-2); border-radius: var(--rayon-s); background: rgba(20, 21, 24, .82); color: var(--blanc); font-size: 1.4rem; line-height: 1; opacity: 0; transition: opacity .2s, background .2s; }
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.car-card:hover .carousel-arrow, .carousel-arrow:focus-visible { opacity: 1; }
.carousel-arrow:hover { background: var(--noir); }
.img-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--rayon-s); background: rgba(20, 21, 24, .82); color: var(--blanc); font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
.img-count svg { width: 13px; height: 13px; }
/* Bande primaire de 4 px sous la photo : 44 % de large, s'allonge au survol */
.car-card__bande { height: 4px; width: 44%; background: var(--primary); transition: width .45s var(--ease); }
.car-card:hover .car-card__bande { width: 100%; }
.car-card__corps { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.car-card__prix { font-family: var(--police-titre); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--blanc); letter-spacing: .01em; }
.car-card__marque { display: block; margin-top: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-2); }
.car-card__titre { margin-top: 3px; font-family: var(--police-titre); font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--blanc); min-height: 2.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.car-card__titre a { transition: color .2s; }
.car-card__titre a:hover { color: var(--gris); }
.car-card__specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); }
.car-card__specs li { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.car-card__specs svg { width: 14px; height: 14px; color: var(--gris-2); }
.car-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.car-card__actions .btn { flex: 1; height: 46px; padding: 0 14px; font-size: .98rem; }
.car-card__tel { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border: 2px solid var(--filet-2); border-radius: var(--rayon-s); color: var(--blanc); transition: border-color .2s, background .2s; }
.car-card__tel svg { width: 18px; height: 18px; }
.car-card__tel:hover { border-color: var(--blanc); background: rgba(244, 243, 239, .06); }

/* Tuile « tout le stock » : occupe le reste de la rangée (--stock-span calculé par index.php) */
.stock { grid-column: span var(--stock-span, 3); position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 28px 32px 32px; border: 1px solid var(--filet-2); border-radius: var(--rayon); background: transparent; overflow: hidden; transition: border-color .25s, background .25s; }
.stock::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; width: 44%; background: var(--primary); transition: width .45s var(--ease); }
.stock:hover { border-color: var(--blanc); background: rgba(244, 243, 239, .03); }
.stock:hover::after { width: 100%; }
.stock__num { display: flex; align-items: baseline; gap: 12px; font-family: var(--police-titre); font-weight: 700; font-size: 4.6rem; line-height: 1; color: var(--blanc); }
.stock__num small { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.stock__texte { flex: 1; }
.stock__texte strong { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--blanc); }
.stock__texte p { margin-top: 10px; font-size: .98rem; max-width: 520px; }
.stock__marques { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
.stock__marques li { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); padding-left: 14px; position: relative; }
.stock__marques li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--primary); }
.stock .lien { flex: none; }

/* Stock vide */
.vide { padding: 48px 32px; border: 1px dashed var(--filet-2); border-radius: var(--rayon); text-align: center; }
.vide svg { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--gris-2); }
.vide h3 { font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: var(--blanc); }
.vide p { margin: 10px auto 0; max-width: 520px; }
.vide .btn { margin-top: 22px; }

/* ============================================================
   5. ENGAGEMENTS — anthracite, 4 blocs à numéro en contour et icône trait, séparés par des filets
   ============================================================ */
.conf { background: var(--anth); padding: 84px 0 92px; }
.conf__grille { display: grid; grid-template-columns: repeat(4, 1fr); }
.conf__item { position: relative; padding: 0 28px 0 24px; border-left: 1px solid var(--filet-2); }
.conf__num { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 3.2rem; line-height: 1; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 243, 239, .55); }
.conf__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: 18px; color: var(--blanc); }
.conf__ico svg { width: 34px; height: 34px; }
.conf__item h3 { margin-top: 14px; font-family: var(--police-titre); font-weight: 700; font-size: 1.4rem; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--blanc); }
.conf__item p { margin-top: 10px; font-size: 1.02rem; }

/* ============================================================
   6. PRÉSENTATION — bannière pleine largeur sous un voile, bloc anthracite en superposition à gauche
   ============================================================ */
.pres { position: relative; overflow: hidden; background: var(--noir); }
.pres__fond { position: absolute; inset: 0; z-index: 0; }
.pres__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pres__fond::after { content: ""; position: absolute; inset: 0; background: rgba(20, 21, 24, .6); }
.pres__in { position: relative; z-index: 1; padding: 88px 32px; }
.pres__bloc { max-width: 600px; padding: 40px 44px 44px; background: var(--anth); border-top: 6px solid var(--primary); border-radius: 0 0 var(--rayon) var(--rayon); }
.pres__bloc .h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.pres__texte { margin-top: 18px; font-size: 1.08rem; line-height: 1.75; }
.pres__points { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--filet); }
.pres__points li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 1.04rem; color: var(--blanc); }
.pres__points i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: var(--rayon-s); background: var(--primary); color: var(--on-primary); }
.pres__points i svg { width: 14px; height: 14px; }
.pres__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pres__legende { position: absolute; right: 32px; bottom: 28px; z-index: 1; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }

/* ============================================================
   7. CTA — bandeau primaire à coupe diagonale
   ============================================================ */
.cta { position: relative; background: var(--noir); padding-top: 24px; }
.cta__bande { background: var(--primary); color: var(--on-primary); clip-path: polygon(0 52px, 100% 0, 100% 100%, 0 100%); }
.cta__in { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; padding: 112px 32px 72px; }
.cta .h2 { color: var(--on-primary); margin-top: 0; }
.cta__texte { margin-top: 14px; max-width: 600px; font-size: 1.1rem; color: var(--on-primary); opacity: .94; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ============================================================
   8. PIED DE PAGE — noir, bande 6 px, 4 colonnes
   ============================================================ */
.ft { background: var(--noir-2); color: var(--gris); }
.ft__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding: 68px 32px 56px; }
.ft__desc { margin-top: 16px; font-size: .95rem; max-width: 340px; }
.ft__reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ft__reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--filet-2); border-radius: var(--rayon-s); color: var(--blanc); transition: border-color .2s, background .2s; }
.ft__reseaux a:hover { border-color: var(--blanc); background: rgba(244, 243, 239, .06); }
.ft__reseaux svg { width: 18px; height: 18px; }
.ft__titre { display: table; font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blanc); padding-bottom: 10px; margin-bottom: 16px; border-bottom: 3px solid var(--primary); }
.ft__col li + li { margin-top: 8px; }
.ft__col a { font-size: .95rem; color: var(--gris); transition: color .2s; }
.ft__col a:hover { color: var(--blanc); }
.ft__col address, .ft__col p { font-size: .95rem; color: var(--gris); }
/* Un long numéro sans espaces (+229…) ne doit pas déborder de sa colonne */
.ft__col { min-width: 0; }
.ft__col .ft__tel { max-width: 100%; overflow-wrap: anywhere; }
.ft__col .ft__tel { display: inline-block; margin-top: 10px; font-family: var(--police-titre); font-weight: 700; font-size: 1.45rem; letter-spacing: .02em; color: var(--blanc) !important; transition: color .2s; }
.ft__col .ft__tel:hover { color: var(--gris) !important; }
.ft__col .ft__mail { display: inline-block; margin-top: 6px; font-weight: 500; color: var(--blanc) !important; border-bottom: 2px solid var(--primary); overflow-wrap: anywhere; }
.ft__horaires { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filet); }
.ft__bas { border-top: 1px solid var(--filet); }
.ft__bas-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 20px 32px; font-size: .82rem; color: var(--gris-2); }
.ft__bas p { font-size: inherit; color: inherit; }

/* ============================================================
   9. VISIONNEUSE PLEIN ÉCRAN (assets/js/main.js, conservée)
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(15, 16, 18, .96); padding: 32px; }
.lightbox.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; object-fit: contain; border-radius: var(--rayon); }
.lightbox-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--filet-2); border-radius: var(--rayon-s); background: rgba(20, 21, 24, .8); color: var(--blanc); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color .18s, background .18s; }
.lightbox-btn:hover { border-color: var(--blanc); background: var(--anth); }
.lightbox-close { top: 20px; right: 20px; font-size: 1.6rem; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: var(--rayon-s); background: var(--anth); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .9rem; letter-spacing: .08em; }

/* ============================================================
   10. PAGES SECONDAIRES (transition) — inventaire, détail, contact en attendant leurs feuilles page-*.css
   ============================================================ */
.vehicles-page, .contact-page, .car-detail { padding: 56px 0 88px; }
.vehicles-header { margin-bottom: 36px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--police-titre); font-weight: 600; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.eyebrow::before { content: ""; flex: none; width: 28px; height: 3px; background: var(--primary); }
.vehicles-header h2, .detail-head h2 { margin-top: 14px; font-family: var(--police-titre); font-weight: 700; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: .98; text-transform: uppercase; color: var(--blanc); }
.section-sub { margin-top: 12px; max-width: 60ch; }
.inventory-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.inventory-card { padding: 18px 20px; background: var(--anth); border-left: 4px solid var(--primary); border-radius: var(--rayon); }
.inventory-card small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.inventory-card strong { display: block; margin-top: 6px; font-family: var(--police-titre); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--blanc); }
.inventory-card span { display: block; margin-top: 6px; font-size: .9rem; color: var(--gris); }
.cars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.empty-state { padding: 48px 32px; border: 1px dashed var(--filet-2); border-radius: var(--rayon); text-align: center; }
.btn-details, .btn-outline, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border: 2px solid var(--primary); border-radius: var(--rayon-s); background: var(--primary); color: var(--on-primary); font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; cursor: pointer; transition: filter .2s, border-color .2s, background .2s; }
.btn-details:hover, .btn-primary:hover { filter: brightness(1.12); }
.btn-outline, .btn-secondary { background: transparent; border-color: var(--filet-2); color: var(--blanc); }
.btn-outline:hover, .btn-secondary:hover { border-color: var(--blanc); background: rgba(244, 243, 239, .06); }
.btn-lg { height: 56px; padding: 0 30px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font-family: var(--police-titre); font-weight: 600; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); transition: color .2s; }
.back-link:hover { color: var(--blanc); }
.car-detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.detail-gallery { position: relative; }
.detail-main-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon); background: var(--anth); cursor: zoom-in; }
.detail-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.detail-thumbs img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon-s); border: 2px solid transparent; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.detail-thumbs img.is-active, .detail-thumbs img:hover { opacity: 1; border-color: var(--primary); }
.detail-head { margin-bottom: 24px; }
.car-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.detail-price { margin-top: 12px; font-family: var(--police-titre); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--blanc); }
.vehicle-attrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.vehicle-attrs div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--anth); font-size: .92rem; }
.vehicle-attrs span { color: var(--gris); }
.vehicle-attrs strong { color: var(--blanc); font-weight: 600; text-align: right; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; }
.spec-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.detail-desc { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--filet); font-size: .98rem; color: var(--gris); }
.detail-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.contact-aside { display: flex; flex-direction: column; gap: 12px; }
.contact-item { display: flex; gap: 14px; padding: 16px 18px; background: var(--anth); border-left: 4px solid var(--primary); border-radius: var(--rayon); }
.contact-item svg { color: var(--blanc); flex: none; margin-top: 2px; }
.contact-item small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.contact-item strong { font-size: 1rem; font-weight: 600; color: var(--blanc); }
.contact-card { padding: 32px; background: var(--anth); border-top: 6px solid var(--primary); border-radius: 0 0 var(--rayon) var(--rayon); }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; background: var(--noir); border: 1px solid var(--filet); border-radius: var(--rayon-s); color: var(--blanc); font-size: .98rem; transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blanc); }
.field textarea { resize: vertical; min-height: 130px; }
.field input[readonly] { color: var(--gris); }

/* ============================================================
   11. ADAPTATIF — 1272 / ≤ 1100 / ≤ 1000 / ≤ 640
   ============================================================ */
@media (max-width: 1100px) {
	.conf__grille { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
	.ft__in { grid-template-columns: 1fr 1fr; }
	.cars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
	.hd__in { flex-wrap: wrap; height: auto; min-height: 72px; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
	.hd__nav { display: none; order: 10; width: 100%; margin: 0; padding: 8px 0 14px; border-top: 1px solid var(--filet); }
	.hd.est-ouvert .hd__nav { display: block; }
	.hd__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.hd__nav a { padding: 13px 0; font-size: 1.2rem; border-bottom: 1px solid var(--filet); white-space: normal; }
	.hd__nav a::after { display: none; }
	.hd__nav .hd__nav-tel { display: flex; margin-top: 18px; width: 100%; }
	/* Langue et menu poussés à droite du logo */
	.hd__tel { margin-left: auto; }
	.hd__tel + .langue { margin-left: 0; }
	.langue { margin-left: auto; }
	.hd__burger { display: block; }
	/* Hero empilé : la photo passe au-dessus, fondue vers le bas, le texte dessous */
	.hero__photo { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 380px; }
	.hero__photo::before { background: linear-gradient(90deg, rgba(20, 21, 24, .35) 0%, rgba(20, 21, 24, 0) 40%); }
	.hero__photo::after { height: 60%; }
	.hero__in { margin-top: -90px; padding: 0 32px 74px; }
	.rech__in { grid-template-columns: 1fr 1fr; }
	.rech__btn { grid-column: 1 / -1; }
	.veh__grille, .cars-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.stock { grid-column: span 1; gap: 18px; padding: 24px; }
	.stock__num { font-size: 3.4rem; }
	.tete { flex-direction: column; align-items: flex-start; gap: 16px; }
	.pres__in { padding: 64px 32px; }
	.pres__legende { display: none; }
	.cta__in { grid-template-columns: 1fr; gap: 28px; padding: 96px 32px 64px; }
	.cta__btns { justify-content: flex-start; }
	.car-detail-grid, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
	.inventory-stats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.wrap, .container { padding: 0 20px; }
	.hd__in { min-height: 64px; }
	.logo svg { width: 30px; height: 30px; }
	.logo img { width: 34px; height: 34px; }
	.logo__nom { font-size: 1.2rem; }
	/* Pas de bouton d'appel dans l'en-tête sur mobile : le numéro est dans le menu et sous le titre */
	.hd__tel { display: none; }
	.hd__tel + .langue { margin-left: auto; }
	.hd__in { gap: 10px; }
	.langue summary { padding: 0 11px 0 8px; gap: 7px; }
	.hd__nav .hd__nav-tel { width: 100%; padding: 0 18px; justify-content: center; }
	.hd__nav .hd__nav-tel span { display: inline; }
	.demo-notice__in { padding: 8px 20px; font-size: .8rem; }
	.hero__photo { max-height: 260px; aspect-ratio: 4 / 3; }
	.hero__photo img { object-position: 58% 50%; }
	.hero__in { margin-top: -70px; padding: 0 20px 66px; }
	.h1 { font-size: 2.5rem; }
	.btn { width: 100%; white-space: normal; height: auto; min-height: 50px; padding: 12px 18px; line-height: 1.2; }
	.hero__btns, .pres__btns, .cta__btns, .detail-cta { flex-direction: column; gap: 10px; }
	.chiffres { flex-direction: column; max-width: none; border-top: 0; }
	.chiffres li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--filet); }
	.chiffres li + li { padding-left: 0; border-left: 0; }
	.chiffres b { font-size: 1.4rem; min-width: 2.2em; }
	.rech { margin-top: -30px; }
	.rech__in { grid-template-columns: 1fr; padding: 10px; }
	.rech__btn { width: 100%; }
	.veh { padding: 60px 0 72px; }
	.veh__grille, .cars-grid { grid-template-columns: 1fr; gap: 18px; }
	.car-card__actions .btn { width: auto; height: 46px; min-height: 0; padding: 0 14px; }
	.carousel-arrow { opacity: 1; }
	.stock { padding: 24px 20px; }
	.stock__texte strong { font-size: 1.45rem; }
	.conf { padding: 64px 0 68px; }
	.conf__grille { grid-template-columns: 1fr; gap: 32px; }
	.conf__item { padding: 0 0 0 20px; }
	.pres__in { padding: 48px 20px; }
	.pres__bloc { padding: 28px 24px 30px; }
	.cta__in { padding: 84px 20px 56px; }
	.cta__bande { clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%); }
	.h2 { font-size: 2rem; }
	.tete { margin-bottom: 32px; }
	.ft__in { grid-template-columns: 1fr; gap: 32px; padding: 52px 20px 44px; }
	.ft__bas-in { padding: 18px 20px; justify-content: center; text-align: center; }
	.vehicles-page, .contact-page, .car-detail { padding: 40px 0 64px; }
	.vehicle-attrs { grid-template-columns: 1fr; }
	.detail-thumbs { grid-template-columns: repeat(4, 1fr); }
	.contact-card { padding: 22px 18px; }
	.btn-details, .btn-outline, .btn-primary, .btn-secondary { width: 100%; white-space: normal; height: auto; min-height: 50px; padding: 12px 18px; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-anim] { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ============================================================
   12. MODE CLAIR — THEME CLAIR PROFESSIONNEL ET COHÉRENT
   ============================================================ */
body.theme-clair,
[data-theme="light"] {
	background-color: var(--background-color, #f8fafc) !important;
	color: var(--text-color, #0f172a) !important;
}

body.theme-clair p,
[data-theme="light"] p {
	color: #475569;
}

/* En-tête */
body.theme-clair .hd {
	background: #ffffff !important;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
}
body.theme-clair .logo { color: var(--text-color, #0f172a); }
body.theme-clair .logo__sous { color: #64748b; }
body.theme-clair .hd__nav a { color: #475569; }
body.theme-clair .hd__nav a:hover,
body.theme-clair .hd__nav a[aria-current="page"] { color: var(--text-color, #0f172a); }
/* Bouton d'appel du menu mobile : texte blanc sur la couleur primaire, quel que soit le thème
   (sans quoi il prend le gris des liens du menu et devient illisible) */
.hd__nav .hd__nav-tel,
.hd__nav .hd__nav-tel:hover,
body.theme-clair .hd__nav .hd__nav-tel,
body.theme-clair .hd__nav .hd__nav-tel:hover { color: var(--on-primary); border-bottom: 0; }
body.theme-clair .hd__burger { border-color: rgba(15, 23, 42, 0.15); }
body.theme-clair .langue summary { border-color: rgba(15, 23, 42, 0.15); color: var(--text-color, #0f172a); }
body.theme-clair .langue ul { background: #fff; border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 14px 32px rgba(15, 23, 42, .14); }
body.theme-clair .langue a { color: #475569; }
body.theme-clair .langue a[aria-current], body.theme-clair .langue a:hover { color: var(--text-color, #0f172a); }
body.theme-clair .langue a:hover, body.theme-clair .langue a:focus-visible { background: #f1f5f9; }
body.theme-clair .hd__burger span { background: var(--text-color, #0f172a); }

/* Avis démo */
body.theme-clair .demo-notice {
	background: #fffbeb !important;
	border-bottom: 1px solid #fde68a !important;
	color: #92400e !important;
}
body.theme-clair .demo-notice__in { color: #92400e; }
body.theme-clair .demo-notice__in strong { color: #78350f; }
body.theme-clair .demo-notice__tag {
	background: #f59e0b;
	color: #ffffff;
	border-left: none;
}

/* Hero */
body.theme-clair .hero {
	background: var(--background-color, #f8fafc) !important;
}
body.theme-clair .h1 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .hero__texte {
	color: #475569 !important;
}
body.theme-clair .hero__photo {
	opacity: 0.94;
}
body.theme-clair .hero__photo::before {
	background: linear-gradient(90deg, var(--background-color, #f8fafc) 0%, rgba(248, 250, 252, 0.94) 24%, rgba(248, 250, 252, 0.45) 55%, rgba(248, 250, 252, 0.05) 100%) !important;
}
body.theme-clair .hero__photo::after {
	background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, var(--background-color, #f8fafc) 100%) !important;
}
body.theme-clair .chiffres {
	border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
}
body.theme-clair .chiffres li + li {
	border-left: 1px solid rgba(15, 23, 42, 0.1) !important;
}
body.theme-clair .chiffres b {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .chiffres span {
	color: #64748b !important;
}
body.theme-clair .btn--contour {
	border-color: rgba(15, 23, 42, 0.2) !important;
	color: var(--text-color, #0f172a) !important;
	background: #ffffff !important;
}
body.theme-clair .btn--contour:hover {
	border-color: var(--primary) !important;
	color: var(--primary-texte, var(--primary)) !important;
	background: rgba(37, 99, 235, 0.04) !important;
}

/* Moteur de recherche */
body.theme-clair .rech__in {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.1) !important;
	box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.08) !important;
}
body.theme-clair .champ label {
	color: #64748b !important;
}
body.theme-clair .champ select {
	background-color: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	color: var(--text-color, #0f172a) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
body.theme-clair .champ select:hover,
body.theme-clair .champ select:focus {
	border-color: var(--primary) !important;
	background-color: #ffffff !important;
}
body.theme-clair .champ option {
	background: #ffffff !important;
	color: var(--text-color, #0f172a) !important;
}

/* Section Véhicules & Stock */
body.theme-clair .veh {
	background: var(--background-color, #f8fafc) !important;
}
body.theme-clair .sur {
	color: #64748b !important;
}
body.theme-clair .h2 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .tete__chapo {
	color: #475569 !important;
}
body.theme-clair .car-card {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.09) !important;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}
body.theme-clair .car-card:hover {
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09) !important;
	border-color: rgba(37, 99, 235, 0.3) !important;
}
body.theme-clair .car-card__prix {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .car-card__marque {
	color: #64748b !important;
}
body.theme-clair .car-card__titre {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .car-card__titre a:hover {
	color: var(--primary-texte, var(--primary)) !important;
}
body.theme-clair .car-card__specs {
	border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body.theme-clair .car-card__specs li {
	color: #475569 !important;
}
body.theme-clair .car-card__specs svg {
	color: #94a3b8 !important;
}
body.theme-clair .car-card__tel {
	border-color: rgba(15, 23, 42, 0.18) !important;
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .car-card__tel:hover {
	border-color: var(--primary) !important;
	color: var(--primary-texte, var(--primary)) !important;
	background: rgba(37, 99, 235, 0.04) !important;
}

/* Tuile tout le stock */
body.theme-clair .stock {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.1) !important;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}
body.theme-clair .stock__num {
	color: var(--primary-texte, var(--primary)) !important;
}
body.theme-clair .stock__num small {
	color: #64748b !important;
}
body.theme-clair .stock__texte strong {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .stock__texte p {
	color: #475569 !important;
}
body.theme-clair .stock__marques li {
	color: #475569 !important;
}
body.theme-clair .lien {
	color: var(--text-color, #0f172a) !important;
	border-bottom-color: var(--primary) !important;
}
body.theme-clair .lien:hover {
	color: var(--primary-texte, var(--primary)) !important;
}

/* Stock vide */
body.theme-clair .vide {
	background: #ffffff !important;
	border: 2px dashed #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
body.theme-clair .vide svg {
	color: #94a3b8 !important;
}
body.theme-clair .vide h3 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .vide p {
	color: #475569 !important;
}

/* Engagements */
body.theme-clair .conf {
	background: #f1f5f9 !important;
	border-top: 1px solid #e2e8f0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
}
body.theme-clair .conf__item {
	border-left: 1px solid #cbd5e1 !important;
}
body.theme-clair .conf__num {
	color: transparent !important;
	-webkit-text-stroke: 1.5px rgba(15, 23, 42, 0.22) !important;
}
body.theme-clair .conf__ico {
	color: var(--primary-texte, var(--primary)) !important;
}
body.theme-clair .conf__item h3 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .conf__item p {
	color: #475569 !important;
}

/* Présentation */
body.theme-clair .pres {
	background: var(--background-color, #f8fafc) !important;
}
body.theme-clair .pres__fond::after {
	background: rgba(15, 23, 42, 0.35) !important;
}
body.theme-clair .pres__bloc {
	background: #ffffff !important;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12) !important;
	border-top: 6px solid var(--primary) !important;
}
body.theme-clair .pres__bloc .h2 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .pres__texte {
	color: #475569 !important;
}
body.theme-clair .pres__points {
	border-top: 1px solid #e2e8f0 !important;
}
body.theme-clair .pres__points li {
	color: #1e293b !important;
}

/* CTA */
body.theme-clair .cta {
	background: var(--background-color, #f8fafc) !important;
}
body.theme-clair .cta__bande {
	background: var(--primary) !important;
	color: var(--on-primary) !important;
}
body.theme-clair .cta .h2 {
	color: var(--on-primary) !important;
}
body.theme-clair .cta__texte {
	color: var(--on-primary) !important;
	opacity: 0.95;
}
body.theme-clair .cta .btn--contour {
	border-color: var(--on-primary) !important;
	color: var(--on-primary) !important;
	background: transparent !important;
}
body.theme-clair .cta .btn--contour:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	color: var(--on-primary) !important;
	border-color: var(--on-primary) !important;
}

/* Pied de page */
body.theme-clair .ft {
	background: #ffffff !important;
	color: #475569 !important;
	border-top: 1px solid #e2e8f0 !important;
}
body.theme-clair .ft__desc {
	color: #475569 !important;
}
body.theme-clair .ft__titre {
	color: var(--text-color, #0f172a) !important;
	border-bottom: 3px solid var(--primary) !important;
}
body.theme-clair .ft__col a {
	color: #475569 !important;
}
body.theme-clair .ft__col a:hover {
	color: var(--primary-texte, var(--primary)) !important;
}
body.theme-clair .ft__col address,
body.theme-clair .ft__col p {
	color: #475569 !important;
}
body.theme-clair .ft__col .ft__tel {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .ft__col .ft__tel:hover {
	color: var(--primary-texte, var(--primary)) !important;
}
body.theme-clair .ft__col .ft__mail {
	color: var(--text-color, #0f172a) !important;
	border-bottom: 2px solid var(--primary) !important;
}
body.theme-clair .ft__reseaux a {
	border-color: #e2e8f0 !important;
	color: var(--text-color, #0f172a) !important;
	background: #f1f5f9 !important;
}
body.theme-clair .ft__reseaux a:hover {
	border-color: var(--primary) !important;
	color: var(--primary-texte, var(--primary)) !important;
	background: rgba(37, 99, 235, 0.05) !important;
}
body.theme-clair .ft__horaires,
body.theme-clair .ft__bas {
	border-top: 1px solid #e2e8f0 !important;
}
body.theme-clair .ft__bas-in {
	color: #64748b !important;
}

/* Pages secondaires (Inventaire, Détail, Contact) */
body.theme-clair .vehicles-header h2,
body.theme-clair .detail-head h2 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .section-sub {
	color: #475569 !important;
}
body.theme-clair .inventory-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-left: 4px solid var(--primary) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
body.theme-clair .inventory-card small {
	color: #64748b !important;
}
body.theme-clair .inventory-card strong {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .inventory-card span {
	color: #475569 !important;
}
body.theme-clair .empty-state {
	background: #ffffff !important;
	border: 2px dashed #cbd5e1 !important;
}
body.theme-clair .empty-state h3 {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .detail-price {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .vehicle-attrs {
	background: #e2e8f0 !important;
	border-color: #e2e8f0 !important;
}
body.theme-clair .vehicle-attrs div {
	background: #ffffff !important;
}
body.theme-clair .vehicle-attrs span {
	color: #64748b !important;
}
body.theme-clair .vehicle-attrs strong {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .spec-chips span {
	color: #475569 !important;
}
body.theme-clair .detail-desc {
	color: #475569 !important;
	border-top: 1px solid #e2e8f0 !important;
}
body.theme-clair .contact-item {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-left: 4px solid var(--primary) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
body.theme-clair .contact-item svg {
	color: var(--primary-texte, var(--primary)) !important;
}
body.theme-clair .contact-item small {
	color: #64748b !important;
}
body.theme-clair .contact-item strong {
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .contact-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-top: 6px solid var(--primary) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
body.theme-clair .field label {
	color: #64748b !important;
}
body.theme-clair .field input,
body.theme-clair .field select,
body.theme-clair .field textarea {
	background: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	color: var(--text-color, #0f172a) !important;
}
body.theme-clair .field input:focus,
body.theme-clair .field select:focus,
body.theme-clair .field textarea:focus {
	border-color: var(--primary) !important;
	background: #ffffff !important;
}

/* Pastilles / badges : fond sombre conservé en mode clair → texte blanc forcé */
body.theme-clair .past,
body.theme-clair .past--neutre {
	color: #ffffff !important;
	background: rgba(15, 23, 42, 0.85) !important;
}
/* img-count (compteur de photos) */
body.theme-clair .img-count {
	color: #ffffff !important;
	background: rgba(15, 23, 42, 0.75) !important;
}
/* Flèches de galerie */
body.theme-clair .carousel-arrow {
	color: #ffffff !important;
	background: rgba(15, 23, 42, 0.75) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}