/* V8 Import : maquette d'après la charte Avantgarde, accent rouge Challenger */
:root {
  --rouge: #C8102E;
  --rouge-pale: #FBE9EC;
  --noir: #111111;
  --gris: #414141;
  --gris-moyen: #696969;
  --gris-clair: #8A8F94;
  --fond: #F4F4F4;
  --blanc: #FFFFFF;
  --courbe: cubic-bezier(0.5, 0, 0, 1);
  --titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texte: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--texte); color: var(--noir); background: var(--blanc); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
.conteneur { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 55px; }

/* ===== En-tête ===== */
.entete { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; }
.entete .barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 55px; }
.menu { display: flex; gap: 30px; list-style: none; }
.menu.gauche { justify-content: flex-end; padding-right: 44px; }
.menu.droite { justify-content: flex-start; padding-left: 44px; align-items: center; }
.menu a { white-space: nowrap; position: relative; color: var(--gris-moyen); font-size: 14px; transition: color .7s var(--courbe); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--rouge); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--courbe); }
.menu a:hover, .menu a.actif { color: var(--rouge); }
.menu a:hover::after, .menu a.actif::after { transform: scaleX(1); transform-origin: 0 50%; }
.logo { display: flex; flex-direction: column; align-items: center; }
.logo img { height: 44px; width: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); }
.logo .mot { font-family: var(--titre); font-weight: 400; font-size: 27px; letter-spacing: .32em; margin: 6px -.32em 0 0; color: var(--noir); line-height: 1; }
.logo .mot em { font-style: normal; color: var(--rouge); }
.logo .sous { font-size: 9px; letter-spacing: .22em; color: var(--gris-clair); text-transform: uppercase; margin-top: 6px; }
.reseaux { display: flex; gap: 4px; margin-left: auto; }
.reseaux a { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.reseaux a::before { content: ""; position: absolute; inset: 0; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); opacity: 0; transition: opacity .5s var(--courbe); }
.reseaux a:hover::before { opacity: 1; }
.reseaux svg { position: relative; z-index: 2; width: 18px; height: 18px; fill: #7E7E7E; transition: fill .5s var(--courbe); }
.reseaux a:hover svg { fill: #fff; }
.burger { display: none; }

/* ===== Boutons à coin coupé ===== */
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 20px 34px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border: 0; cursor: pointer; background: none; }
.bouton::before { content: ""; position: absolute; inset: 0; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: background-color .5s var(--courbe); }
.bouton:hover::before { background: var(--noir); }
.bouton span { position: relative; z-index: 2; }

/* ===== Page « Nos véhicules » ===== */
.haut-liste { position: relative; padding: 190px 0 0; background: linear-gradient(180deg, #fff 0, #fff 150px, var(--fond) 150px); }
.haut-liste::before { content: ""; position: absolute; left: 0; right: 0; top: 150px; height: 240px; background: linear-gradient(180deg, #ececec, var(--fond)); }
.titre-page { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.titre-page h1 { font-family: var(--titre); font-weight: 700; font-size: 44px; letter-spacing: .02em; text-transform: uppercase; }
.titre-page h1 span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.titre-page h1 span s { display: inline-block; text-decoration: none; transform: translateY(60px); transition: transform .9s var(--courbe); }
.vu .titre-page h1 span s { transform: translateY(0); }
.tri { font-size: 12px; color: var(--gris-clair); text-transform: uppercase; letter-spacing: 1px; font-family: var(--titre); font-weight: 700; }
.tri select { display: block; margin-top: 6px; border: 0; border-bottom: 1px solid var(--rouge); background: transparent; padding: 4px 24px 6px 0; font-size: 14px; font-weight: 700; color: var(--noir); letter-spacing: 1px; }

.liste { position: relative; display: grid; grid-template-columns: 250px 1fr; gap: 50px; padding-bottom: 120px; background: var(--fond); }
.filtre { position: sticky; top: 30px; align-self: start; }
.filtre .champ { margin-bottom: 26px; }
.filtre label { display: block; color: #858585; font-family: var(--titre); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.filtre select, .filtre input { width: 100%; border: 0; border-bottom: 1px solid var(--rouge); background: transparent; padding: 2px 0 6px; font-size: 14px; color: var(--gris); letter-spacing: 1px; border-radius: 0; appearance: none; }
.filtre .deux { display: flex; align-items: flex-end; gap: 12px; }
.filtre .deux span { font-family: var(--titre); font-weight: 700; font-size: 12px; color: #858585; padding-bottom: 8px; }
.filtre .bouton { width: 100%; margin-top: 10px; }

.ouvrir-filtre { display: none; }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 0; align-content: start; }
.vide { grid-column: 1 / -1; padding: 60px 0; color: var(--gris-clair); }

/* Carte véhicule : la voiture posée sur le fond, sans encart ; surbrillance au survol */
.carte { position: relative; display: block; cursor: pointer; opacity: 0; transform: translateY(40px); transition: opacity .9s var(--courbe), transform .9s var(--courbe), filter .7s var(--courbe); }
.carte.vu { opacity: 1; transform: none; }
.carte::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 0 100%); opacity: 0; transition: opacity .7s var(--courbe); z-index: 1; }
.carte::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rouge); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--courbe); z-index: 3; }
.carte:hover { filter: drop-shadow(0 4px 94px rgba(0, 0, 0, .12)); }
.carte:hover::before { opacity: 1; }
.carte:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.carte .badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--rouge-pale); color: var(--rouge); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 50px; padding: 4px 12px; }
.carte .photo { position: relative; z-index: 2; height: 230px; display: flex; align-items: center; justify-content: center; padding: 30px 22px 0; }
.carte .photo img { max-height: 200px; width: 100%; object-fit: contain; transition: transform .9s var(--courbe); }
.carte:hover .photo img { transform: scale(1.04); }
.carte .contenu { position: relative; z-index: 3; padding: 16px 40px 64px; }
.carte .marque { color: var(--rouge); font-family: var(--titre); font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
.carte .modele { color: var(--gris); font-size: 17px; font-weight: 300; line-height: 1.15; letter-spacing: 2px; text-transform: uppercase; position: relative; padding-bottom: 22px; margin-bottom: 16px; min-height: 62px; }
.carte .modele::before { content: ""; position: absolute; left: 0; bottom: 0; width: 62px; height: 1px; background: var(--rouge); }
.carte .infos { display: flex; gap: 32px; color: var(--gris); font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; }
.carte .prix { color: var(--gris); }
.carte .prix small { font-size: 12px; margin-left: 4px; }
.carte .prix b { font-size: 18px; font-weight: 600; }
.carte .fleche { position: absolute; z-index: 4; left: 40px; bottom: 26px; opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--courbe), transform .7s var(--courbe); color: var(--rouge); font-size: 22px; }
.carte:hover .fleche { opacity: 1; transform: none; }

/* ===== Fiche véhicule ===== */
.fiche-haut { position: relative; background: #fff; overflow: hidden; }
.fiche-haut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); pointer-events: none; z-index: 3; }
.fiche-haut .zone { position: relative; z-index: 5; display: grid; grid-template-columns: 485px 1fr; align-items: center; min-height: 100vh; padding: 170px 0 40px 40px; }
.surtitre { color: var(--rouge); font-family: var(--titre); font-size: 17px; letter-spacing: .54em; text-transform: uppercase; }
.fiche-haut h1 { font-family: var(--titre); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; margin-top: 12px; }
.lettres span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lettres .mot-l { overflow: visible; white-space: nowrap; }
.lettres span s { display: inline-block; text-decoration: none; transform: translateY(110%); transition: transform .9s var(--courbe); }
.vu .lettres span s { transform: none; }
.fiche-haut .items { display: flex; gap: 55px; margin-top: 50px; }
.fiche-haut .items small { display: block; color: #9F9F9F; font-size: 12px; letter-spacing: 1px; margin-bottom: 5px; }
.fiche-haut .items b { color: #494949; font-size: 14px; letter-spacing: 1px; }
.fiche-haut .tarif { margin-top: 38px; font-family: var(--titre); color: #494949; display: flex; align-items: center; gap: 8px; line-height: 1; }
.fiche-haut .tarif small { font-size: 30px; font-weight: 700; }
.fiche-haut .tarif b { font-size: 46px; font-weight: 700; letter-spacing: .02em; }
.fiche-haut .tarif.demande b { font-size: 30px; }
.fiche-haut .pro { margin-top: 18px; max-width: 420px; font-size: 13px; color: var(--gris); border-left: 2px solid var(--rouge); padding-left: 12px; }
.fiche-haut .pro em { display: block; color: var(--rouge); font-style: normal; font-size: 11px; margin-top: 4px; letter-spacing: .5px; }
.fiche-haut .bouton { margin-top: 44px; }
.voiture-face { position: relative; display: flex; justify-content: center; }
.voiture-face img { width: 100%; max-width: 600px; max-height: 430px; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .18)); opacity: 0; transform: scale(.94) translateY(20px); transition: opacity 1.2s var(--courbe), transform 1.2s var(--courbe); }
.vu .voiture-face img { opacity: 1; transform: none; }
/* voiture posée en bas à droite du haut de page */
.voiture-face { align-self: end; justify-content: flex-end; margin: 0 -40px -10px 0; }
.voiture-face.a-droite img { max-width: 520px; }

.section-titre { font-family: var(--titre); font-weight: 700; font-size: 34px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 40px; }
.section-titre::after { content: ""; display: block; width: 62px; height: 1px; background: var(--rouge); margin-top: 18px; }
.apparait { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--courbe), transform 1s var(--courbe); }
.apparait.vu { opacity: 1; transform: none; }

.corps { display: grid; grid-template-columns: 240px 1fr; gap: 60px; padding-top: 20px; }
.bandeau { position: sticky; top: 40px; align-self: start; padding: 10px 0 40px; }
.bandeau-marque { color: var(--rouge); font-family: var(--titre); font-size: 14px; letter-spacing: .4em; text-transform: uppercase; }
.bandeau-modele { font-family: var(--titre); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.bandeau-liste { list-style: none; margin-top: 50px; }
.bandeau-liste li { position: relative; margin-bottom: 30px; padding-left: 0; transition: padding .7s var(--courbe); }
.bandeau-liste li::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: var(--rouge); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--courbe); }
.bandeau-liste a { font-family: var(--titre); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #9F9F9F; transition: color .5s var(--courbe); }
.bandeau-liste li.actif { padding-left: 44px; }
.bandeau-liste li.actif::before { transform: scaleX(1); }
.bandeau-liste li.actif a, .bandeau-liste a:hover { color: #494949; }
.bandeau-nav { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bandeau-nav .compte { color: #BFBFBF; font-size: 12px; min-width: 40px; }
.bandeau-nav .progres { position: relative; flex: 1; height: 2px; background: #DFDFDF; border-radius: 10px; }
.bandeau-nav .progres i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rouge); border-radius: 10px; transition: width .6s var(--courbe); }
.bandeau-nav .fleches { display: flex; gap: 8px; width: 100%; }
.contenu-fiche { min-width: 0; }
.galerie { padding: 10px 0 100px; overflow: hidden; }
.galerie .defile { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 0 10px; scrollbar-width: none; }
.galerie .defile::-webkit-scrollbar { display: none; }
.galerie .vue { cursor: zoom-in; flex: 0 0 auto; width: 560px; height: 380px; scroll-snap-align: start; background: #fff; border: 1px solid #EFEFEF; display: flex; align-items: center; justify-content: center; padding: 28px; }
.galerie .vue img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .14)); }
.galerie .nav { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.galerie .compte { color: #BFBFBF; font-size: 12px; min-width: 44px; }
.galerie .progres { position: relative; width: 200px; height: 2px; background: #DFDFDF; border-radius: 10px; margin-right: auto; }
.galerie .progres i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rouge); border-radius: 10px; transition: width .6s var(--courbe); }
.fl { width: 48px; height: 48px; border: 0; background: #EEE; cursor: pointer; font-size: 18px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background .5s var(--courbe), color .5s var(--courbe); }
.fl:hover { background: var(--rouge); color: #fff; }

.specs { position: relative; padding: 40px 0 120px; }
.specs .grille-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px 55px; }
.specs small { display: block; color: #5B5B5B; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.specs b { color: #494949; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; }
.specs b.manque { color: var(--gris-clair); font-weight: 400; font-size: 15px; text-transform: none; }
.specs .fond-nom { position: absolute; right: 0; bottom: 40px; font-family: var(--titre); font-weight: 700; font-size: 180px; line-height: 1; color: #F2F2F2; text-transform: uppercase; z-index: -1; white-space: nowrap; }

.details { padding: 0 0 120px; }
.details .deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.details ul { list-style: none; }
.details li { color: var(--gris); font-size: 16px; font-weight: 300; line-height: 1.4; padding: 14px 0; border-bottom: 1px solid #ECECEC; display: flex; gap: 14px; }
.details li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 7px; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 100%); }
.details .image { background: #fff; padding: 10px; }
.details .image img { width: 100%; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .12)); }
.details .cta { margin-top: 40px; }

.autres { background: var(--fond); padding: 110px 0 120px; }
.autres .grille { grid-template-columns: repeat(3, 1fr); }

/* ===== Photo en grand ===== */
.grand { position: fixed; inset: 0; z-index: 200; background: rgba(255, 255, 255, .97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .5s var(--courbe); }
.grand.ouvert { opacity: 1; pointer-events: auto; }
.grand img { max-width: calc(100vw - 220px); max-height: calc(100vh - 140px); object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .16)); }
.grand .fl { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 20px; }
.grand .fl.g { left: 40px; } .grand .fl.d { right: 40px; }
.grand .fermer { position: absolute; top: 30px; right: 40px; width: 48px; height: 48px; border: 0; background: var(--noir); color: #fff; font-size: 22px; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.grand .fermer:hover { background: var(--rouge); }
.grand .compte-g { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); color: #9F9F9F; font-size: 13px; letter-spacing: 1px; }

/* ===== Encart « Vous recherchez un modèle ? » ===== */
.recherche { position: relative; padding: 120px 0 130px; color: #fff; background: #000 url("img/corvette-garage-dezoom.jpg") center 52% / cover no-repeat; }
.recherche::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .72) 55%, rgba(0, 0, 0, .55) 100%); }
.recherche .conteneur { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.recherche h2 { font-family: var(--titre); font-weight: 700; font-size: 44px; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
.recherche h2::after { content: ""; display: block; width: 62px; height: 1px; background: var(--rouge); margin-top: 22px; }
.recherche-texte p { margin-top: 22px; color: #cfcfcf; font-weight: 300; font-size: 17px; line-height: 1.5; max-width: 380px; }
.recherche-form { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; }
.recherche-form .plein { grid-column: 1 / -1; }
.recherche-form label span { display: block; color: #9a9a9a; font-family: var(--titre); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.recherche-form input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); color: #fff; font-size: 15px; padding: 2px 0 12px; border-radius: 0; }
.recherche-form input::placeholder { color: rgba(255, 255, 255, .35); }
.recherche-form input:focus { outline: none; border-bottom-color: var(--rouge); }
.recherche-form .bouton { justify-self: start; grid-column: 1 / -1; }
.recherche-form .bouton:hover::before { background: #fff; }
.recherche-form .bouton:hover span { color: var(--noir); }
.recherche-form .merci { grid-column: 1 / -1; color: #fff; font-size: 14px; }

/* ===== Pied de page ===== */
.pied { background: var(--noir); color: #9a9a9a; padding: 70px 0 40px; font-size: 14px; }
.pied .cols { display: grid; grid-template-columns: auto 1fr 1fr 1.5fr; gap: 60px; align-items: start; }
.pied img { height: 90px; width: auto; }
.pied h4 { color: #fff; font-family: var(--titre); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.pied p, .pied li { line-height: 1.8; list-style: none; }
.pied a:hover { color: #fff; }
.pied .bas { margin-top: 50px; padding-top: 20px; border-top: 1px solid #262626; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ===== Adaptation écrans ===== */
@media (max-width: 1100px) {
  .conteneur { padding: 0 25px; }
  .entete .barre { grid-template-columns: auto 1fr auto; padding: 18px 25px; }
  .menu, .entete .reseaux { display: none; }
  .logo { grid-column: 2; justify-self: center; }
  .logo img { height: 34px; } .logo .mot { font-size: 21px; } .logo .sous { display: none; }
  .burger { display: flex; grid-column: 3; width: 40px; height: 40px; border: 0; background: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; cursor: pointer; }
  .burger i { display: block; height: 2px; background: var(--rouge); }
  .burger i:nth-child(1) { width: 22px; } .burger i:nth-child(2) { width: 16px; } .burger i:nth-child(3) { width: 22px; }
  .entete.ouvert .menu { display: flex; flex-direction: column; gap: 18px; position: absolute; left: 0; right: 0; background: #fff; padding: 20px 25px; }
  .entete.ouvert .menu.gauche { top: 100%; }
  .entete.ouvert .menu.droite { top: calc(100% + 150px); }
  .liste { grid-template-columns: 1fr; gap: 30px; }
  .filtre { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .filtre .bouton { grid-column: 1 / -1; }
  .grille, .autres .grille { grid-template-columns: repeat(2, 1fr); }
  .fiche-haut .zone { grid-template-columns: 1fr; padding: 130px 0 40px; min-height: 0; text-align: center; }
  .fiche-haut .items { justify-content: center; gap: 30px; }
  .fiche-haut .pro { margin-left: auto; margin-right: auto; text-align: left; }
  .voiture-face { order: -1; margin-bottom: 20px; }
  .corps { grid-template-columns: 1fr; gap: 0; }
  .bandeau { position: static; padding-bottom: 20px; }
  .bandeau-liste { display: none; }
  .voiture-face, .voiture-face.a-droite { justify-content: center; margin: 0; }
  .grand img { max-width: calc(100vw - 30px); }
  .grand .fl.g { left: 10px; } .grand .fl.d { right: 10px; }
  .galerie .vue { width: calc(100vw - 50px); height: 62vw; padding: 16px; }
  .recherche .conteneur { grid-template-columns: 1fr; gap: 40px; }
  .specs .grille-specs { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .specs .fond-nom { font-size: 90px; }
  .details .deux-col { grid-template-columns: 1fr; gap: 40px; }
  .pied .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .haut-liste { padding-top: 130px; }
  .titre-page h1 { font-size: 34px; }
  .tri { display: none; }
  .filtre { grid-template-columns: 1fr; display: none; }
  .filtre.ouvert { display: grid; }
  .ouvrir-filtre { display: flex; justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid var(--rouge); background: none; padding: 12px 0; font-family: var(--titre); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--noir); cursor: pointer; }
  .ouvrir-filtre span { color: var(--rouge); }
  .liste { gap: 20px; }
  .grille, .autres .grille { grid-template-columns: 1fr; }
  .carte { cursor: pointer; }
  .carte .contenu { padding: 12px 25px 56px; }
  .carte .fleche { left: 25px; opacity: 1; transform: none; }
  .fiche-haut h1 { font-size: 34px; letter-spacing: .08em; }
  .surtitre { font-size: 14px; }
  .fiche-haut .tarif b { font-size: 36px; }
  .section-titre { font-size: 28px; }
  .specs .grille-specs { grid-template-columns: 1fr 1fr; }
  .specs b { font-size: 15px; }
  .pied .cols { grid-template-columns: 1fr; }
  .recherche h2 { font-size: 32px; }
  .recherche-form { grid-template-columns: 1fr; }
}

/* ===== Listes maison (remplacent les menus déroulants du système, comme Avantgarde) ===== */
select.maison { display: none; }
.choix { position: relative; }
.choix-bouton { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; border-bottom: 1px solid var(--rouge); padding: 2px 0 6px; cursor: pointer; text-align: left; }
.choix-bouton span { font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--noir); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.choix-bouton svg { flex: 0 0 auto; transition: transform .5s var(--courbe); }
.choix.ouvert .choix-bouton svg { transform: rotate(180deg); }
.choix-liste { position: absolute; top: calc(100% + 10px); left: 0; min-width: 100%; max-height: 210px; overflow: auto; background: #fff; box-shadow: 0 5px 40px rgba(0, 0, 0, .1); list-style: none; opacity: 0; transform: translateY(5px); pointer-events: none; transition: opacity .7s var(--courbe), transform .7s var(--courbe); z-index: 20; }
.choix.ouvert .choix-liste { opacity: 1; transform: none; pointer-events: auto; }
.choix-liste button { display: block; width: 100%; height: 36px; padding: 0 30px 0 12px; border: 0; background: transparent; text-align: left; font-size: 14px; color: var(--noir); white-space: nowrap; cursor: pointer; transition: background-color .5s var(--courbe), color .5s var(--courbe); }
.choix-liste li:hover button, .choix-liste li.actif button { background: rgba(200, 16, 46, .04); color: var(--rouge); }
.choix-liste::-webkit-scrollbar { width: 4px; }
.choix-liste::-webkit-scrollbar-track { background: rgba(0, 0, 0, .1); }
.choix-liste::-webkit-scrollbar-thumb { background: var(--rouge); }
.tri .choix { margin-top: 6px; width: 110px; }
.filtre input:focus, .choix-bouton:focus-visible { outline: none; border-bottom-width: 2px; }

/* ===== Sections de l'accueil ===== */
.bloc { padding: 110px 0; }
.bloc.gris { background: var(--fond); }
.bloc .intro { color: var(--gris-moyen); font-weight: 300; font-size: 17px; line-height: 1.6; max-width: 560px; margin: -12px 0 44px; }
.services { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e3e3e3; }
.service { padding: 34px 28px 38px 0; border-bottom: 1px solid #e3e3e3; }
.service .num { font-family: var(--titre); font-size: 14px; letter-spacing: 2px; color: var(--rouge); }
.service h3 { font-family: var(--titre); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 10px; }
.service p { color: var(--gris-moyen); font-size: 14px; line-height: 1.6; font-weight: 300; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.liste-ok { list-style: none; display: grid; gap: 18px; }
.liste-ok li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--gris); font-weight: 300; }
.liste-ok li b { font-weight: 600; color: var(--noir); }
.liste-ok svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--rouge); }
.note { margin-top: 28px; font-size: 12px; line-height: 1.6; color: var(--gris-clair); }
.apropos { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; align-items: start; }
.grand-texte { font-family: var(--titre); font-size: 40px; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; color: var(--noir); margin-top: -10px; }
.apropos p { color: var(--gris); font-weight: 300; font-size: 17px; line-height: 1.7; }
.az { list-style: none; counter-reset: az; margin-top: 36px; border-top: 1px solid #e3e3e3; }
.az li { counter-increment: az; display: grid; grid-template-columns: 40px 190px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid #e3e3e3; font-size: 14px; align-items: baseline; }
.az li::before { content: counter(az); font-family: var(--titre); color: var(--rouge); font-size: 16px; }
.az b { font-family: var(--titre); font-size: 17px; text-transform: uppercase; letter-spacing: .05em; }
.az span { color: var(--gris-moyen); font-weight: 300; line-height: 1.5; }

/* ===== Petit plan (style Plans) ===== */
.pied .col-contact { min-width: 0; }
.plan { display: block; margin-top: 20px; max-width: 320px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .5s var(--courbe); }
.plan:hover { transform: translateY(-3px); }
.plan svg { display: block; width: 100%; height: auto; }
.plan-pied { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; color: #1d1d1f; font-size: 12px; }
.plan-pied b { font-weight: 600; }
.plan-pied i { font-style: normal; color: #0a6cff; }
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .duo, .apropos { grid-template-columns: 1fr; gap: 60px; }
}
@media (max-width: 640px) {
  .bloc { padding: 70px 0; }
  .services { grid-template-columns: 1fr; }
  .az li { grid-template-columns: 30px 1fr; }
  .az span { grid-column: 2; }
}

.sous-titre { font-family: var(--titre); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.sous-titre + .intro { margin-top: 0; }
#experience .section-titre { max-width: 760px; }

/* ===== Showroom, formulaire, actions de fiche ===== */
.lien { color: var(--rouge); font-weight: 500; }
.emplacement-photo { min-height: 340px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed #c9c9c9; background: #ececec; color: var(--gris-clair); font-family: var(--titre); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.emplacement-photo small { font-family: var(--texte); font-size: 12px; letter-spacing: .1em; }
.form-clair { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; align-items: end; }
.form-clair .plein { grid-column: 1 / -1; }
.form-clair label span { display: block; color: var(--gris-clair); font-family: var(--titre); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.form-clair input, .form-clair textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #bdbdbd; color: var(--noir); font-size: 15px; padding: 2px 0 12px; border-radius: 0; resize: vertical; font-family: var(--texte); }
.form-clair input:focus, .form-clair textarea:focus { outline: 0; border-bottom-color: var(--rouge); }
.form-clair .merci { grid-column: 1 / -1; color: var(--gris-moyen); font-size: 14px; }
.actions-fiche { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.actions-fiche button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); cursor: pointer; border-bottom: 1px solid transparent; transition: color .4s var(--courbe), border-color .4s var(--courbe); }
.actions-fiche button:hover { color: var(--rouge); border-color: var(--rouge); }
.actions-fiche svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .form-clair { grid-template-columns: 1fr; } }
}

/* ===== Pages secondaires ===== */
.page-sec { padding-bottom: 90px; }
.surtitre-page { position: relative; font-family: var(--titre); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--rouge); margin-bottom: 14px; }
.page-sec .titre-page h1 { max-width: 900px; line-height: 1.05; }
.corps-page { position: relative; }
.corps-page .intro { color: var(--gris-moyen); font-weight: 300; font-size: 18px; line-height: 1.6; max-width: 640px; margin-bottom: 44px; }
.chapeau { color: var(--gris); font-weight: 300; font-size: 17px; line-height: 1.7; margin-bottom: 28px; }
.appel { margin-top: 40px; font-size: 15px; color: var(--gris-moyen); }
.lien-sup { margin-top: 26px; }
.services-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.scarte { position: relative; display: flex; flex-direction: column; min-height: 290px; padding: 34px 32px 30px; transition: filter .7s var(--courbe), opacity 1s var(--courbe), transform 1s var(--courbe); }
.scarte::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); opacity: .55; transition: opacity .7s var(--courbe); }
.scarte::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rouge); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--courbe); }
.scarte:hover { filter: drop-shadow(0 4px 60px rgba(0, 0, 0, .13)); }
.scarte:hover::before { opacity: 1; }
.scarte:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.scarte > * { position: relative; z-index: 2; }
.scarte .num { font-family: var(--titre); font-size: 14px; letter-spacing: 2px; color: var(--rouge); }
.scarte h3 { font-family: var(--titre); font-weight: 700; font-size: 24px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 12px; }
.scarte p { color: var(--gris-moyen); font-size: 14px; line-height: 1.6; font-weight: 300; }
.scarte .voir { margin-top: auto; padding-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-clair); transition: color .5s var(--courbe); }
.scarte .voir i { font-style: normal; display: inline-block; transition: transform .5s var(--courbe); }
.scarte:hover .voir { color: var(--rouge); }
.scarte:hover .voir i { transform: translateX(6px); }
.service-fiche { display: grid; grid-template-columns: 1.6fr 1fr; gap: 90px; align-items: start; }
.autres-services { background: #fff; padding: 34px 32px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }
.autres-services a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #ececec; font-size: 14px; color: var(--gris); transition: color .4s var(--courbe); }
.autres-services a i { font-style: normal; color: var(--rouge); }
.autres-services a:hover { color: var(--rouge); }
.autres-services .tous { border: 0; margin-top: 10px; font-weight: 600; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--rouge); }
.duo-page { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.duo-page.qui { grid-template-columns: 1fr 1.2fr; }
.duo-page.showroom { grid-template-columns: 1.1fr 1fr; margin-bottom: 70px; }
.adresse { font-size: 14px; color: var(--gris-moyen); margin-top: 8px; }
.horaires { margin: 0 0 28px; }
.photo-showroom img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; }
.photo-showroom figcaption { margin-top: 10px; font-size: 11px; color: var(--gris-clair); }
.form-visite { max-width: 820px; }
.parcours { margin-top: 90px; }
.etapes { list-style: none; counter-reset: etape; border-top: 1px solid #e3e3e3; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 50px 280px 1fr; gap: 14px; padding: 22px 0; border-bottom: 1px solid #e3e3e3; align-items: baseline; }
.etapes li::before { content: counter(etape, decimal-leading-zero); font-family: var(--titre); color: var(--rouge); font-size: 16px; letter-spacing: 2px; }
.etapes b { font-family: var(--titre); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.etapes span { color: var(--gris-moyen); font-weight: 300; line-height: 1.6; font-size: 15px; }
.retour { background: #fff; padding: 34px 0 60px; border-top: 1px solid #ececec; }
.retour-lien { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); transition: color .4s var(--courbe); }
.retour-lien span { display: inline-block; margin-right: 8px; color: var(--rouge); transition: transform .4s var(--courbe); }
.retour-lien:hover { color: var(--rouge); }
.retour-lien:hover span { transform: translateX(-6px); }
@media (max-width: 1100px) {
  .services-grille { grid-template-columns: repeat(2, 1fr); }
  .service-fiche, .duo-page, .duo-page.qui, .duo-page.showroom { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 640px) {
  .services-grille { grid-template-columns: 1fr; }
  .etapes li { grid-template-columns: 40px 1fr; }
  .etapes span { grid-column: 2; }
  .page-sec .titre-page h1 { font-size: 34px; }
}

/* Défilement automatique continu : pas d'accroche ni de lissage pendant le mouvement */
.galerie .defile.auto { scroll-snap-type: none; scroll-behavior: auto; }

/* ===== Nouveau logo (calandre de pick-up) ===== */
.logo svg { width: 240px; height: auto; display: block; }
.pied .logo-pied svg { width: 230px; height: auto; display: block; }
@media (max-width: 1100px) { .logo svg { width: 150px; } }

/* Logo : rendu photoréaliste (image) */
.logo img { width: 250px; height: auto; display: block; border-radius: 6px; filter: none; }
.pied .logo-pied img { width: 260px; height: auto; border-radius: 6px; }
@media (max-width: 1100px) { .logo img { width: 170px; } }

/* Détails : la photo de l'accueil coupée en deux, les deux moitiés l'une sur l'autre */
.details .coupe { display: grid; gap: 8px; justify-self: center; width: 100%; max-width: 330px; padding: 10px; }
.details .coupe .demi { overflow: hidden; background: #fff; }
.details .coupe .demi img { width: 200%; max-width: none; display: block; filter: none; }
.details .coupe .d2 img { margin-left: -100%; }

/* Détails : vue de face coupée en deux, collée au bord droit de la page, coupe tournée vers l'intérieur */
.details { overflow-x: clip; }
.details .face-moitie { width: 400px; overflow: hidden; justify-self: end; padding: 0; background: none; margin-right: calc(-1 * (55px + max(0px, (100vw - 1280px) / 2))); }
.details .face-moitie img { width: 800px; max-width: none; margin-left: -400px; display: block; filter: none; }
@media (max-width: 1100px) { .details .face-moitie { justify-self: end; margin-right: -25px; width: 300px; } .details .face-moitie img { width: 600px; margin-left: -300px; } }

/* Logo : calandre photoréaliste sans fond, texte vectoriel qui contraste sur le fond */
.logo img { border-radius: 0; width: 260px; }
.pied .logo-pied img { border-radius: 0; width: 260px; }

.pros-stock { margin-top: 90px; }
.pros-stock .grille { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .pros-stock .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pros-stock .grille { grid-template-columns: 1fr; } }

/* Détails (v2) : vue de face centrée sur le bord droit de la page : la moitié gauche se voit en entier, la moitié droite sort du site */
.details .face-moitie { width: 560px; margin-right: calc(-1 * (55px + max(0px, (100vw - 1280px) / 2))); }
.details .face-moitie img { width: 1120px; margin-left: 0; }
@media (max-width: 1100px) { .details .face-moitie { width: 340px; margin-right: -25px; } .details .face-moitie img { width: 680px; margin-left: 0; } }
/* Détails : hauteur plafonnée à 760 px, image calée en bas (le toit est rogné sur les faces très hautes) */
.details .face-moitie { display: flex; align-items: flex-end; max-height: 760px; }
.details .face-moitie img { flex: none; }
/* Détails (v3) : vue de face plus petite (400 px la moitié) : moins d'agrandissement des photos sources, donc plus nette */
.details .face-moitie { width: 400px; max-height: 560px; }
.details .face-moitie img { width: 800px; margin-left: 0; }
@media (max-width: 1100px) { .details .face-moitie { width: 260px; margin-right: -25px; } .details .face-moitie img { width: 520px; } }
/* Galerie « Images » : les photos défilent jusqu'au bord droit de l'écran et sortent du site (plus de marge blanche à droite) */
html, body { overflow-x: clip; }
.galerie { overflow: visible; }
.galerie .defile { margin-right: calc(-1 * (55px + max(0px, (100vw - 1280px) / 2))); padding-right: 55px; }
@media (max-width: 1100px) { .galerie .defile { margin-right: -25px; padding-right: 25px; } }
/* Galerie « Images » : plus de cadres blancs ; les photos défilent sur toute la largeur, du bord gauche au bord droit de l'écran, derrière le texte qui garde sa place */
.galerie .vue { background: transparent; border: 0; }
.corps > .bandeau { position: sticky; top: 90px; z-index: 6; }
.galerie .defile { --g: calc(240px + 60px + 55px + max(0px, (100vw - 1280px) / 2)); margin-left: calc(-1 * var(--g)); padding-left: var(--g); scroll-padding-left: var(--g); }
@media (max-width: 1100px) { .galerie .defile { --g: 25px; } }
/* Les photos s'estompent derrière le texte du bandeau, qui reste lisible */
.galerie .defile { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(var(--g) - 320px), rgba(0,0,0,.14) calc(var(--g) - 290px), rgba(0,0,0,.14) calc(var(--g) - 70px), #000 calc(var(--g) - 20px)); mask-image: linear-gradient(to right, #000 0, #000 calc(var(--g) - 320px), rgba(0,0,0,.14) calc(var(--g) - 290px), rgba(0,0,0,.14) calc(var(--g) - 70px), #000 calc(var(--g) - 20px)); }
.corps > .bandeau { text-shadow: 0 0 10px #fff, 0 0 4px #fff; }
@media (max-width: 1100px) { .galerie .defile { -webkit-mask-image: none; mask-image: none; } }
/* Correctif : plus de coupure à droite (bande blanche) dans Détails ; la galerie s'efface avant le bandeau de texte */
.details { overflow-x: visible; }
.galerie .defile { -webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--g) - 70px), #000 calc(var(--g) - 20px)); mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--g) - 70px), #000 calc(var(--g) - 20px)); }
@media (max-width: 1100px) { .galerie .defile { -webkit-mask-image: none; mask-image: none; } }
/* Correctif d'alignement : en-tête symétrique à toutes les largeurs (logo toujours centré) */
.entete .barre { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.menu { gap: clamp(14px, 1.9vw, 30px); }
.menu.gauche { padding-right: clamp(18px, 2.6vw, 44px); }
.menu.droite { padding-left: clamp(18px, 2.6vw, 44px); }
.menu a { font-size: clamp(12px, 1vw, 14px); }
.reseaux a { width: clamp(30px, 2.6vw, 40px); }
.logo img { width: clamp(190px, 18vw, 260px); }
@media (max-width: 1100px) { .logo img { width: 170px; } }
/* Alignement : l'en-tête suit les mêmes marges que le contenu (même bord gauche et droit) ; le titre de la fiche s'aligne sur le contenu */
.entete .barre { padding-left: calc(55px + max(0px, (100vw - 1280px) / 2)); padding-right: calc(55px + max(0px, (100vw - 1280px) / 2)); }
@media (max-width: 1100px) { .entete .barre { padding-left: 25px; padding-right: 25px; } }
.fiche-haut .zone { padding-left: 0; }
/* Passage du blanc (en-tête) au gris du fond : dégradé progressif en diagonale, sans bande marquée */
.haut-liste { background: linear-gradient(172deg, #fff 0, #fff 90px, var(--fond) 330px, var(--fond) 100%); }
.haut-liste::before { display: none; }

.recherche-texte p { max-width: 470px; }

.horaires-liste { margin: 0 0 30px; border-top: 1px solid #e3e3e3; }
.horaires-liste > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid #e3e3e3; font-size: 15px; }
.horaires-liste dt { font-family: var(--titre); font-weight: 700; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.horaires-liste dd { margin: 0; color: var(--gris-moyen); font-weight: 300; text-align: right; }
@media (max-width: 640px) { .horaires-liste > div { flex-direction: column; gap: 4px; } .horaires-liste dd { text-align: left; } }

.pied .h-horaires { margin-top: 22px; }
/* Galerie : coupure nette à gauche (plus de fondu) : les photos disparaissent d'un coup au bord du bandeau */
.galerie .defile { -webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--g) - 60px), #000 calc(var(--g) - 60px)); mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--g) - 60px), #000 calc(var(--g) - 60px)); }
@media (max-width: 1100px) { .galerie .defile { -webkit-mask-image: none; mask-image: none; } }

/* Véhicules vendus */
.carte .badge-vendu { position: absolute; top: 14px; right: 14px; z-index: 3; background: var(--rouge); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 50px; padding: 4px 14px; }
.carte.est-vendu .photo img { filter: saturate(.85); }
.carte .prix b.vendu-prix { color: var(--rouge); font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fiche-haut .tarif.vendu b { color: var(--rouge); font-size: 30px; letter-spacing: .18em; text-transform: uppercase; border: 2px solid var(--rouge); border-radius: 6px; padding: 6px 18px; }

/* Photos brutes (intérieur, moteur, jante) : pas d'ombre de détourage */
.galerie .vue img.photo-brute { filter: none; object-fit: cover; width: 100%; height: 100%; border-radius: 4px; }

/* Flèches des photos : en bas à droite des images qui défilent */
.galerie { position: relative; }
.galerie .fleches-photos { position: absolute; z-index: 5; bottom: 6px; right: calc(-1 * (55px + max(0px, (100vw - 1280px) / 2)) + 30px); display: flex; gap: 8px; }
@media (max-width: 1100px) { .galerie .fleches-photos { right: 0; } }

/* Flèches des photos : rectangulaires et larges, sous les images ; flèches de rubriques visibles dès « Spécifications » */
.galerie .fleches-photos { top: 100%; bottom: auto; margin-top: 12px; gap: 10px; }
.galerie .fleches-photos .fl { width: 104px; height: 44px; }
.bandeau-nav { transition: opacity .5s var(--courbe); }
.bandeau-nav.cache { opacity: 0; pointer-events: none; }
/* Flèches des photos : sobres, juste sous les images (loin de « Spécifications ») */
.galerie .fleches-photos { top: 404px; bottom: auto; margin-top: 0; gap: 6px; }
.galerie .fleches-photos .fl { width: 60px; height: 28px; font-size: 14px; line-height: 1; background: transparent; color: #9A9A9A; border: 1px solid #DCDCDC; clip-path: none; }
.galerie .fleches-photos .fl:hover { background: transparent; color: var(--rouge); border-color: var(--rouge); }

/* En-tête : le nom de la société seul (texte, non cliquable) ; le logo à calandre reste dans le pied de page */
.nom-societe { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; text-decoration: none; color: inherit; }
.nom-societe b { font-family: var(--titre); font-weight: 700; font-size: 30px; letter-spacing: .16em; margin-right: -.16em; line-height: 1; color: var(--noir); text-transform: uppercase; }
.nom-societe b i { font-style: normal; color: var(--rouge); }
.nom-societe span { margin-top: 8px; font-family: var(--titre); font-weight: 500; font-size: 11px; letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; color: #8A8A8A; white-space: nowrap; }
@media (max-width: 1100px) { .nom-societe { grid-column: 2; justify-self: center; } .nom-societe b { font-size: 24px; } .nom-societe span { font-size: 9px; letter-spacing: .22em; } }

/* Galerie : glisser à la souris */
.galerie .defile { cursor: grab; }
.galerie .defile.glisse { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }

/* Catalogue classé par catégorie */
#grille.grille { display: block; }
.groupe-cat { margin-bottom: 46px; }
.titre-cat { display: flex; align-items: baseline; gap: 16px; margin: 0 0 8px; padding-bottom: 14px; border-bottom: 1px solid #e3e3e3; }
.titre-cat span { font-family: var(--titre); font-weight: 700; font-size: 30px; letter-spacing: .08em; text-transform: uppercase; }
.titre-cat span::before { content: ""; display: inline-block; width: 26px; height: 2px; background: var(--rouge); vertical-align: middle; margin-right: 14px; }
.titre-cat small { color: var(--gris-clair); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.groupe-cat .grille { margin-top: 18px; }

/* Téléphone et tablette : en-tête centré, menu ouvert propre (un seul panneau blanc, au-dessus du contenu) */
@media (max-width: 1100px) {
  .entete .barre { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 14px 20px; }
  .nom-societe { grid-column: 2; justify-self: center; }
  .burger { grid-column: 3; justify-self: end; }
  .entete.ouvert { background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.12); max-height: 100vh; overflow-y: auto; }
  .entete.ouvert .menu { position: static; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0; padding: 0; background: none; }
  .entete.ouvert .menu.gauche { margin-top: 14px; border-top: 1px solid #eee; }
  .entete.ouvert .menu li { border-bottom: 1px solid #f0f0f0; }
  .entete.ouvert .menu li a { display: block; padding: 15px 4px; font-size: 16px; }
  .entete.ouvert .menu li.reseaux { display: flex; gap: 24px; padding: 18px 4px 14px; border-bottom: 0; }
  .entete.ouvert .menu li.reseaux a { display: inline-flex; padding: 0; }
}
@media (max-width: 640px) {
  .nom-societe b { font-size: 22px; letter-spacing: .12em; margin-right: -.12em; }
  .nom-societe span { font-size: 8px; letter-spacing: .2em; margin-right: -.2em; margin-top: 6px; }
}
@media (max-width: 1100px) {
  .entete .barre > .nom-societe { grid-row: 1; grid-column: 2; }
  .entete .barre > .burger { grid-row: 1; grid-column: 3; }
  .entete.ouvert .barre > .menu.gauche { grid-row: 2; grid-column: 1 / -1; }
  .entete.ouvert .barre > .menu.droite { grid-row: 3; grid-column: 1 / -1; }
  .entete.ouvert .menu { text-align: left; align-items: stretch; list-style: none; }
  .entete.ouvert .menu.droite { margin-top: 0; }
  .entete.ouvert .menu li a::after, .entete.ouvert .menu li a::before { display: none; }
  .entete.ouvert .menu li.reseaux { justify-content: flex-start; }
}
@media (max-width: 1100px) { .entete.ouvert { position: fixed; top: 0; left: 0; right: 0; } }
@media (max-width: 1100px) {
  .fiche-haut .zone { text-align: center; }
  .fiche-haut .tarif { justify-content: center; margin-top: 26px; }
  .fiche-haut .tarif.vendu b { font-size: 26px; }
  .fiche-haut .bouton { display: flex; justify-content: center; margin-left: auto; margin-right: auto; max-width: 340px; }
  .actions-fiche { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
  .voiture-face { margin-bottom: 38px !important; }
  .fiche-haut .surtitre { margin-top: 6px; }
}
@media (max-width: 1100px) {
  .galerie { display: flex; flex-direction: column; }
  .galerie .fleches-photos { position: static; order: 2; align-self: flex-end; margin: 6px 0 26px; }
  .galerie .fleches-photos .fl { width: 56px; height: 30px; }
}
@media (max-width: 1100px) {
  .corps > .bandeau { position: static !important; z-index: auto; text-shadow: none; padding: 0 0 10px; }
  .bandeau-nav { display: none !important; }
}

/* Bouton « Voir N véhicules » : seulement quand le filtre est un panneau (téléphone) */
.voir-resultats { display: none; }
@media (max-width: 640px) { .filtre.ouvert .voir-resultats { display: inline-flex; grid-column: 1 / -1; margin-top: 8px; } }
#filtre .voir-resultats { display: none; }
@media (max-width: 640px) { #filtre.ouvert .voir-resultats { display: inline-flex; } }

/* Une catégorie par ligne, sans titre */
.ligne-cat { margin-bottom: 20px; }

/* 1. Menu du haut réparti sur toute la largeur de l'en-tête */
@media (min-width: 1101px) {
  .entete .barre { grid-template-columns: 1fr auto 1fr; padding-left: 40px; padding-right: 40px; }
  .menu.gauche { justify-content: space-between; padding-right: 70px; gap: 0; }
  .menu.droite { justify-content: space-between; padding-left: 70px; gap: 0; }
  .menu.droite .reseaux { margin-left: 0; }
}
/* 2. Fiches : la galerie et les spécifications un peu plus bas */
@media (min-width: 1101px) {
  .fiche-haut .zone { min-height: 112vh; }
  .galerie { margin-top: 60px; }
  .specs { padding-top: 90px; }
}
/* 6. Bouton vers le catalogue */
.tout-catalogue { text-align: center; margin-top: 40px; }
.tout-catalogue .ico-voiture { width: 30px; height: 16px; margin-right: 12px; vertical-align: -3px; }
/* 8 et 15. Demi-voiture de face des Détails : entière (toit compris), plus petite donc plus nette */
.details .face-moitie { width: 330px; max-height: none; align-items: flex-end; }
.details .face-moitie img { width: 660px; margin-left: 0; height: auto; }
@media (max-width: 1100px) { .details .face-moitie { width: 230px; } .details .face-moitie img { width: 460px; } }

/* Contact : panneau slide avec fond photo */
.contact-slide { position: fixed; inset: 0; z-index: 200; transform: translateY(100%); transition: transform .9s var(--courbe); color: #fff; overflow-y: auto; }
.contact-slide.ouvert { transform: none; }
.contact-fond { position: fixed; inset: 0; background: #000 url("img/contact-corvette-dezoom.jpg") center 50% / cover no-repeat; }
.contact-fond::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.45) 100%); }
.contact-fermer { position: fixed; top: 22px; right: 28px; z-index: 3; width: 48px; height: 48px; border: 0; background: transparent; color: #fff; font-size: 38px; cursor: pointer; line-height: 1; }
.contact-fermer:hover { color: var(--rouge); }
.contact-corps { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; min-height: 100%; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; padding: 90px 55px; }
.contact-texte h2 { font-family: var(--titre); font-weight: 700; font-size: 54px; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.contact-texte h2::after { content: ""; display: block; width: 62px; height: 1px; background: var(--rouge); margin-top: 22px; }
.contact-texte p { margin-top: 26px; color: #ddd; font-weight: 300; line-height: 1.7; max-width: 440px; }
.contact-coord { list-style: none; margin-top: 30px; line-height: 2; color: #eee; }
.contact-coord a { color: #fff; }
@media (max-width: 1100px) { .contact-corps { grid-template-columns: 1fr; gap: 36px; padding: 80px 25px 40px; } .contact-texte h2 { font-size: 38px; } }
.contact-form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rouge); color: #fff; font: inherit; padding: 8px 0; resize: none; outline: none; }

/* 19/10 : fiche = une partie par écran. Images plus bas, de la hauteur d'un écran ; Spécifications plus bas, plus petites, recentrées */
@media (min-width: 1101px) {
  .galerie { margin-top: 0; min-height: calc(100vh - 90px); padding: 14vh 0 0; box-sizing: border-box; scroll-margin-top: 90px; }
  .galerie .vue { width: calc(54vh * 1.47); height: 54vh; max-width: 760px; max-height: 520px; }
  .galerie .fleches-photos { top: calc(14vh + min(54vh, 520px) + 26px); }
  .specs { min-height: calc(100vh - 90px); box-sizing: border-box; padding: 16vh 0 120px; scroll-margin-top: 90px; }
  .specs .section-titre { font-size: 28px; margin-bottom: 34px; }
  .specs .grille-specs { max-width: 760px; gap: 34px 44px; }
  .specs small { font-size: 11px; letter-spacing: 1px; margin-bottom: 5px; }
  .specs b { font-size: 15px; }
  .specs b.manque { font-size: 13px; }
  .specs .fond-nom { font-size: 140px; }
}

/* ===== Accueil : défilement de trois véhicules, façon Avantgarde ===== */
.h-hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden; background: radial-gradient(120% 90% at 100% 55%, #FBE9EC 0, rgba(251, 233, 236, 0) 55%), #fff; }
.h-recherche { position: absolute; z-index: 6; top: 150px; left: 50%; transform: translateX(-50%); width: min(1030px, calc(100% - 110px)); display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 40px; align-items: end; background: #fff; padding: 30px 40px; box-shadow: 0 10px 60px rgba(0, 0, 0, .08); }
.h-recherche h3 { font-family: var(--titre); font-size: 22px; line-height: 1.15; font-weight: 700; color: var(--noir, #111); text-transform: none; }
.h-recherche label span { display: block; font-family: var(--titre); font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: 4px; }
.h-recherche .bouton { align-self: center; }
.h-scene { position: absolute; inset: 0; }
.h-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--courbe), visibility 0s .9s; }
.h-slide.actif { opacity: 1; visibility: visible; transition: opacity .9s var(--courbe), visibility 0s 0s; }
.h-texte { position: absolute; z-index: 4; top: 300px; left: 0; right: 0; text-align: center; padding: 0 40px; }
.h-lien { display: block; }
.h-marque { color: var(--rouge); font-family: var(--titre); font-size: 17px; letter-spacing: .6em; text-transform: uppercase; margin-right: -.6em; transform: translateY(14px); opacity: 0; transition: transform .9s var(--courbe) .15s, opacity .9s var(--courbe) .15s; }
.h-titre { font-family: var(--titre); font-weight: 700; font-size: clamp(34px, 5.6vw, 84px); line-height: 1.05; letter-spacing: .26em; margin-right: -.26em; text-transform: uppercase; color: #111; margin-top: 10px; transform: translateY(24px); opacity: 0; transition: transform 1s var(--courbe) .25s, opacity 1s var(--courbe) .25s; }
.h-slogan { margin: 18px auto 0; max-width: 1100px; text-align: right; padding-right: 8%; font-size: 16px; letter-spacing: .16em; color: #111; font-weight: 500; opacity: 0; transition: opacity 1s var(--courbe) .5s; }
.h-slide.actif .h-marque, .h-slide.actif .h-titre { transform: none; opacity: 1; }
.h-slide.actif .h-slogan { opacity: 1; }
.ac-voiture { position: absolute; z-index: 3; left: 50%; bottom: 70px; width: min(56vw, 820px); max-height: 44vh; display: flex; justify-content: center; align-items: flex-end; transform: translateX(calc(-50% + 90px)); opacity: 0; transition: transform 1.2s var(--courbe) .1s, opacity 1.2s var(--courbe) .1s; }
.ac-voiture img { max-width: 100%; max-height: 44vh; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .2)); }
.h-slide.actif .ac-voiture { transform: translateX(-50%); opacity: 1; }
.h-infos { position: absolute; z-index: 5; right: 0; bottom: 150px; width: 270px; padding: 26px 30px; background: linear-gradient(90deg, rgba(240, 240, 240, .85), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity 1s var(--courbe) .6s; }
.h-slide.actif .h-infos { opacity: 1; }
.h-infos div + div { margin-top: 18px; }
.h-infos dt { color: var(--gris-clair); font-size: 13px; letter-spacing: .08em; }
.h-infos dd { color: #333; font-size: 18px; font-weight: 600; letter-spacing: .06em; margin-top: 2px; }
.h-nav { position: absolute; z-index: 7; left: 55px; bottom: 36px; display: flex; align-items: center; gap: 22px; }
.h-fl { width: 44px; height: 30px; border: 1px solid #DCDCDC; background: transparent; color: #9A9A9A; cursor: pointer; font-size: 15px; transition: color .5s var(--courbe), border-color .5s var(--courbe); }
.h-fl:hover { color: var(--rouge); border-color: var(--rouge); }
.h-points { display: flex; gap: 10px; }
.h-pt { width: 34px; height: 3px; border: 0; padding: 0; background: #DADADA; cursor: pointer; transition: background .6s var(--courbe), width .6s var(--courbe); }
.h-pt.actif { background: var(--rouge); width: 56px; }
.a-la-une { padding: 110px 0 50px; }
.a-la-une .section-titre { text-align: center; }
.a-la-une .section-titre::after { margin-left: auto; margin-right: auto; }
.a-la-une .tout-catalogue { margin-top: 56px; }
@media (max-width: 1100px) {
  .h-recherche { grid-template-columns: 1fr 1fr auto; gap: 24px; padding: 24px 28px; top: 130px; }
  .h-recherche h3 { grid-column: 1 / -1; }
  .h-texte { top: 340px; }
  .h-infos { right: 0; bottom: 120px; width: 220px; padding: 18px 22px; }
}
@media (max-width: 760px) {
  .h-hero { height: auto; min-height: 0; padding-bottom: 90px; }
  .h-recherche { display: none; }
  .h-scene { position: relative; inset: auto; height: 640px; }
  .h-texte { top: 120px; padding: 0 22px; }
  .h-titre { letter-spacing: .14em; margin-right: -.14em; }
  .h-slogan { text-align: center; padding-right: 0; }
  .ac-voiture { width: 100%; bottom: 150px; transform: translateX(calc(-50% + 40px)); }
  .h-infos { left: 22px; right: 22px; bottom: 20px; width: auto; display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; }
  .h-infos div + div { margin-top: 0; }
  .h-nav { left: 22px; bottom: 28px; }
  .a-la-une { padding-top: 60px; }
}

/* 18/10 (retours) : bandeau de recherche réduit, titres plus petits, voiture plus basse, encart « nouveaux modèles » à gauche, cartes plus petites */
.h-hero { min-height: 780px; }
.h-recherche { top: 112px; width: min(640px, calc(100% - 110px)); padding: 12px 22px; gap: 20px; grid-template-columns: 1fr 1fr 1fr auto; box-shadow: 0 6px 34px rgba(0, 0, 0, .07); }
.h-recherche h3 { font-size: 14px; line-height: 1.15; }
.h-recherche label span { font-size: 10px; margin-bottom: 1px; }
.h-recherche .bouton { padding: 9px 16px; font-size: 10px; }
.h-recherche select.maison, .h-recherche .maison { font-size: 12px; }
.h-texte { top: 214px; }
.h-marque { font-size: 14px; letter-spacing: .5em; margin-right: -.5em; }
.h-titre { font-size: clamp(28px, 3.8vw, 54px); letter-spacing: .2em; margin-right: -.2em; }
.h-slogan { font-size: 13px; margin-top: 12px; padding-right: 14%; }
.ac-voiture { bottom: 70px; width: min(56vw, 820px); max-height: 46vh; }
.ac-voiture img { max-height: 46vh; }
.h-infos { bottom: 130px; width: 230px; padding: 18px 24px; }
.h-infos div + div { margin-top: 12px; }
.h-infos dd { font-size: 16px; }
.h-infos dt { font-size: 11px; }
.a-la-une { padding: 80px 0 40px; }
.a-la-une-corps { display: grid; grid-template-columns: 250px 1fr; gap: 50px; align-items: start; }
.a-la-une-titre h2 { font-family: var(--titre); font-weight: 700; font-size: 26px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: #111; }
.a-la-une-titre h2::after { content: ""; display: block; width: 50px; height: 1px; background: var(--rouge); margin: 16px 0 24px; }
.bouton.petit { padding: 9px 18px; font-size: 10px; letter-spacing: .12em; }
.a-la-une .grille { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.a-la-une .carte .photo { height: 150px; padding: 22px 14px 0; }
.a-la-une .carte .photo img { max-height: 125px; }
.a-la-une .carte .contenu { padding: 8px 22px 44px; }
.a-la-une .carte .marque { font-size: 12px; margin-bottom: 3px; }
.a-la-une .carte .modele { font-size: 13px; padding-bottom: 14px; margin-bottom: 10px; min-height: 48px; }
.a-la-une .carte .infos { gap: 16px; font-size: 12px; margin-bottom: 6px; }
.a-la-une .carte .prix b { font-size: 15px; }
.a-la-une .carte .fleche { left: 22px; bottom: 16px; font-size: 18px; }
.a-la-une .carte::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); }
@media (max-width: 1100px) {
  .h-recherche { width: min(640px, calc(100% - 50px)); grid-template-columns: 1fr 1fr auto; }
  .h-recherche h3 { grid-column: 1 / -1; }
  .h-texte { top: 230px; }
  .a-la-une-corps { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .h-hero { min-height: 0; }
  .h-texte { top: 120px; }
  .h-titre { font-size: 30px; }
  .ac-voiture { max-height: none; width: 100%; bottom: 150px; }
  .ac-voiture img { max-height: none; }
  .a-la-une .grille { grid-template-columns: 1fr; }
}

/* Fond toujours blanc transparent : plus de filtre d'ombre sur l'image (il grisait le fond pendant l'animation) ; ombre = petite ellipse sous la voiture */
.ac-voiture img { filter: none; position: relative; z-index: 2; background: transparent; }
.ac-voiture::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -6px; height: 34px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, 0) 70%); z-index: 1; }
.h-slide, .ac-voiture, .h-infos { will-change: opacity, transform; }

/* Téléphone : le texte au-dessus, la voiture au milieu, l'encart Année / Km / Prix EN DESSOUS (ces règles passent après les règles du grand écran) */
@media (max-width: 760px) {
  .h-slogan { text-align: center; padding-right: 0; }
  .ac-voiture { bottom: 130px; width: 100%; max-height: none; }
  .ac-voiture::after { bottom: -2px; height: 22px; }
  .h-infos { left: 22px; right: 22px; bottom: 16px; width: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 16px; background: #F6F6F6; }
  .h-infos div { flex: 1 1 0; min-width: 0; }
  .h-infos div + div { margin-top: 0; }
  .h-infos dd { font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
  .h-nav { bottom: 28px; }
  .h-scene { height: 600px; }
  .h-hero { padding-bottom: 84px; }
}
@media (max-width: 760px) {
  .h-titre { font-size: 25px; letter-spacing: .1em; margin-right: -.1em; }
  .h-slogan { margin-top: 8px; }
  .ac-voiture { bottom: 118px; }
}

/* Téléphone : logo V8 Import du pied de page centré */
@media (max-width: 760px) {
  .pied .logo-pied { display: block; justify-self: center; text-align: center; margin: 0 auto 6px; }
  .pied .logo-pied img { display: block; margin: 0 auto; width: 220px; }
}

/* Emblème de la marque en filigrane, à gauche de la voiture (comme Avantgarde) */
.emb { position: absolute; z-index: 1; pointer-events: none; color: #111; opacity: .055; display: flex; align-items: center; justify-content: center; }
.emb svg { width: 100%; height: auto; display: block; }
.h-slide .emb { left: 4%; top: 250px; width: min(34vw, 460px); }
.fiche-haut .emb { left: 3%; top: 50%; width: min(30vw, 420px); transform: translateY(-50%); z-index: 1; }
.emb-chevrolet svg { max-height: 260px; }
.h-slide .emb { opacity: 0; transition: opacity 1s var(--courbe) .3s; }
.h-slide.actif .emb { opacity: .055; }
@media (max-width: 1100px) { .fiche-haut .emb { width: 60vw; left: 50%; top: 60%; transform: translate(-50%, -50%); } }
@media (max-width: 760px) { .h-slide .emb { left: 50%; top: 110px; transform: translateX(-50%); width: 64vw; } }

/* Filigranes un peu plus bas : ils ne touchent plus le nom de la voiture */
.h-slide .emb { top: 330px; width: min(30vw, 400px); }
.fiche-haut .emb { top: 66%; }
@media (max-width: 1100px) { .fiche-haut .emb { top: 70%; } }
@media (max-width: 760px) { .h-slide .emb { top: 230px; } }
.fiche-haut .emb { left: 33%; top: 46%; width: min(22vw, 320px); }
@media (max-width: 1100px) { .fiche-haut .emb { left: 50%; top: 66%; width: 56vw; } }

/* Logos réels en filigrane (noir, transparent) */
.emb img { width: 100%; height: auto; display: block; }
.emb-dodge { width: min(15vw, 210px) !important; }
.emb-ford { width: min(24vw, 340px) !important; }
.emb-ford, .emb-dodge { opacity: .07; }
.h-slide.actif .emb-ford, .h-slide.actif .emb-dodge { opacity: .07; }
.h-slide .emb-dodge { left: 6%; }
@media (max-width: 760px) { .emb-dodge { width: 30vw !important; } .emb-ford { width: 50vw !important; } }

/* Pied de page : colonne de navigation (titre blanc « Véhicules », puis Qui sommes-nous / Pour les pros) */
.pied .col-nav h4 a { color: #fff; }
.pied .col-nav h4 a:hover { color: var(--rouge); }
.pied .col-nav li a { color: #9a9a9a; }
.pied .col-nav li a:hover { color: #fff; }

/* Accueil : le défilement occupe tout l'écran (il faut descendre pour voir la suite) ; sélection de la semaine : encart au-dessus, trois véhicules en dessous */
.h-hero { height: 100vh; margin-bottom: 140px; }
.a-la-une { padding: 40px 0 50px; }
.a-la-une-corps { display: block; }
.a-la-une-titre { text-align: left; max-width: 640px; margin-bottom: 44px; }
.a-la-une-titre .surtitre-page { display: block; margin-bottom: 10px; }
.a-la-une-titre h2 { font-size: 30px; }
.a-la-une-titre h2::after { margin: 16px 0 18px; }
.a-la-une-titre p { color: var(--gris-moyen); font-size: 15px; font-weight: 300; line-height: 1.6; margin-bottom: 22px; }
.a-la-une .grille { gap: 22px; }
.a-la-une .carte .photo { height: 190px; padding: 26px 18px 0; }
.a-la-une .carte .photo img { max-height: 160px; }
.a-la-une .carte .contenu { padding: 10px 28px 52px; }
.a-la-une .carte .marque { font-size: 13px; }
.a-la-une .carte .modele { font-size: 14px; min-height: 52px; }
.a-la-une .carte .infos { font-size: 13px; }
.a-la-une .carte .prix b { font-size: 16px; }
@media (max-width: 760px) { .h-hero { height: auto; margin-bottom: 40px; } }
.a-la-une-titre p { margin-bottom: 6px; }
.a-la-une-titre .a-la-une-visite { color: #111; font-weight: 500; margin-bottom: 0; }

/* Bouton « Voir tout le catalogue » : petit, avec une petite voiture de sport */
.tout-catalogue { margin-top: 30px; }
.tout-catalogue .bouton { padding: 10px 20px; font-size: 10px; letter-spacing: .14em; }
.tout-catalogue .ico-voiture { width: 36px; height: 14px; margin-right: 11px; vertical-align: -3px; }

/* PROPOSITION 2 (19/10) : sol de studio façon Avantgarde : mur blanc, sol très clair sous la voiture, fine ligne claire légèrement penchée, puis bande grise douce qui s'éclaircit et revient au blanc. CSS pur (aucune image), tout est calé en pixels depuis le bas du défilement. Pour revenir en arrière : supprimer ce bloc (version avant sol : v198). */
@media (min-width: 761px) {
  .h-hero { --extra: 100px; height: calc(100vh + var(--extra)); min-height: 860px; margin-bottom: 0; }
  .h-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--extra) + 375px); z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(236, 237, 240, 0) 0, rgba(236, 237, 240, .85) 30px, #f3f3f6 90px, #f7f7f9 190px, #fbfbfc 268px, #cfd0d5 272px, #dcdde1 360px, #eeeef0 430px, #fff 475px); }
  .h-hero::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: calc(var(--extra) + 105px); height: 3px; z-index: 0; pointer-events: none; transform: rotate(-0.22deg);
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 12%, #fff 88%, rgba(255,255,255,0)); box-shadow: 0 0 10px 2px rgba(255, 255, 255, .95); }
  .ac-voiture { bottom: calc(var(--extra) + 120px); }
  .ac-voiture::after { left: 4%; right: 4%; bottom: -8px; height: 40px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, 0) 72%); }
  .h-infos { bottom: calc(var(--extra) + 200px); }
  .h-nav { bottom: calc(var(--extra) + 22px); }
  .a-la-une { padding-top: 10px; }
}

/* Téléphone : bande grise du sol qui touche le bas des roues (sous la voiture), avec fine ligne claire */
@media (max-width: 760px) {
  .h-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 498px; bottom: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, #fbfbfc 0, #fbfbfc 3px, #cfd0d5 5px, #dcdde1 45%, #eeeef0 82%, #fff 100%); }
  .h-hero::after { content: ""; position: absolute; left: -2%; right: -2%; top: 496px; height: 3px; z-index: 0; pointer-events: none; transform: rotate(-0.22deg); background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .95); }
  .h-infos { background: rgba(255, 255, 255, .55); }
}

/* Accueil (ordinateur) : l'emblème de marque et l'encart Année / Km / Prix sont centrés sur la même ligne */
@media (min-width: 761px) {
  .h-slide .emb { top: 390px; height: 160px; transform: none; }
  .h-infos { top: 390px; bottom: auto; height: 160px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
}

/* Fiche véhicule (ordinateur) : texte et voiture remontés, la voiture entière est visible en haut de la fiche sans défiler */
@media (min-width: 1101px) {
  .fiche-haut .zone { min-height: 100vh; padding: 130px 0 50px 40px; }
  .voiture-face { align-self: center; margin: 0 -40px 0 0; }
  .voiture-face img { max-height: min(440px, 52vh); }
  .fiche-haut::after { height: 90px; }
}
@media (min-width: 1101px) { .voiture-face { margin-top: 120px; } }

/* Pied de page : logo centré, Véhicules et Services à sa gauche, Contact à sa droite ; titres Services et Contact cliquables */
.pied .cols { grid-template-columns: 1fr auto 1fr; gap: 50px; align-items: center; }
.pied .pied-g { display: flex; gap: 70px; justify-content: flex-start; align-items: flex-start; }
.pied .pied-d { justify-self: end; }
.pied .logo-pied { justify-self: center; }
.pied .col-services h4 a, .pied .col-contact h4 a { color: #fff; }
.pied .col-services h4 a:hover, .pied .col-contact h4 a:hover { color: var(--rouge); }
@media (max-width: 1100px) { .pied .cols { grid-template-columns: 1fr; justify-items: center; text-align: center; } .pied .pied-g { justify-content: center; flex-wrap: wrap; gap: 40px; } .pied .pied-d { justify-self: center; } .pied .logo-pied { order: -1; } }

/* Showroom : formulaire un peu décalé à gauche, plan (façon Apple Plans) à sa droite */
.visite-duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: start; margin-left: -20px; }
.visite-duo .form-visite { max-width: none; }
.visite-plan .plan { max-width: none; margin-top: 0; box-shadow: 0 10px 34px rgba(0, 0, 0, .14); border-radius: 16px; }
.visite-plan .plan svg { min-height: 300px; height: 100%; width: 100%; }
.visite-plan .adresse { margin-top: 18px; line-height: 1.6; }
@media (max-width: 900px) { .visite-duo { grid-template-columns: 1fr; margin-left: 0; gap: 40px; } }
.visite-plan .plan { max-width: 400px; }
.visite-plan .plan svg { min-height: 0; height: auto; }
.visite-plan .plan-note { margin-top: 10px; font-size: 11px; color: var(--gris-clair); }
/* Plan centré sur la photo du showroom (même colonne, même largeur), légèrement remonté */
@media (min-width: 901px) {
  .visite-plan { justify-self: end; width: min(100%, 514px); margin-top: -34px; text-align: center; }
  .visite-plan .plan { margin-left: auto; margin-right: auto; text-align: left; }
}

/* Accueil : le véhicule apparaît d'abord, puis le texte (marque, nom, catégorie, encart, logo) */
.ac-voiture { transition: transform 1.1s var(--courbe) 0s, opacity .9s var(--courbe) 0s; }
.h-marque { transition: transform .9s var(--courbe) 1s, opacity .9s var(--courbe) 1s; }
.h-titre { transition: transform 1s var(--courbe) 1.15s, opacity 1s var(--courbe) 1.15s; }
.h-slogan { transition: opacity 1s var(--courbe) 1.4s; }
.h-infos { transition: opacity 1s var(--courbe) 1.6s; }
.h-slide .emb { transition: opacity 1s var(--courbe) 1.6s; }
/* à la sortie : tout s'efface ensemble, sans attendre */
.h-slide:not(.actif) .h-marque, .h-slide:not(.actif) .h-titre, .h-slide:not(.actif) .h-slogan, .h-slide:not(.actif) .h-infos, .h-slide:not(.actif) .emb, .h-slide:not(.actif) .ac-voiture { transition-delay: 0s; transition-duration: .5s; }

/* ===== Impression de la fiche véhicule : une seule colonne, comme la version téléphone, photos et textes bien rangés (A4 portrait) ===== */
.impression-tete, .impression-pied { display: none; }
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  .entete, .actions-fiche, .bouton, .bandeau, .recherche, .pied, .autres, .grand, .fl, .fleches-photos, .contact-slide, .bandeau-nav, .voiture-face, .face-moitie, .h-ligne, .fiche-haut::after, .fond-nom, .cta { display: none !important; }
  .apparait, .carte, .voiture-face img { opacity: 1 !important; transform: none !important; }
  .lettres span s { transform: none !important; }
  * { animation: none !important; transition: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .impression-tete { display: flex !important; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #C8102E; padding-bottom: 6px; margin-bottom: 14px; }
  .impression-tete b { font-family: var(--titre); font-size: 20px; letter-spacing: .12em; color: #111; }
  .impression-tete b i { font-style: normal; color: #C8102E; }
  .impression-tete span { font-size: 9px; letter-spacing: .08em; color: #777; text-transform: uppercase; }
  .impression-pied { display: block !important; margin-top: 18px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 9px; color: #666; text-align: center; }
  .conteneur { max-width: none !important; padding: 0 !important; }
  .fiche-haut { overflow: visible; }
  .fiche-haut .zone { display: block !important; min-height: 0 !important; padding: 0 0 8px !important; }
  .fiche-haut .surtitre { font-size: 12px; letter-spacing: .3em; margin: 0; }
  .fiche-haut h1 { font-size: 26px; letter-spacing: .06em; margin: 4px 0 10px; }
  .fiche-haut .items { display: flex; gap: 28px; margin: 6px 0 4px; }
  .fiche-haut .items small { font-size: 8px; } .fiche-haut .items b { font-size: 12px; }
  .fiche-haut .tarif { margin: 6px 0 4px; } .fiche-haut .tarif b { font-size: 26px; }
  .fiche-haut .pro, .fiche-haut [class*="pro"] { font-size: 9px; }
  .corps { display: block !important; padding: 0 !important; }
  .contenu-fiche { display: block; }
  /* galerie : toutes les photos en grille de deux colonnes, même taille, sans défilement */
  .galerie { display: block !important; margin: 0 !important; padding: 8px 0 0 !important; min-height: 0 !important; overflow: visible !important; }
  .galerie .defile { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6mm; overflow: visible !important; margin: 0 !important; padding: 0 !important; transform: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .galerie .vue { width: auto !important; height: 60mm !important; padding: 3mm !important; border: .3mm solid #e6e6e6 !important; background: #fff !important; break-inside: avoid; page-break-inside: avoid; display: flex; align-items: center; justify-content: center; }
  .galerie .vue img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: none !important; }
  .galerie .vue img.photo-brute { width: 100%; height: 100%; object-fit: cover; }
  .specs { min-height: 0 !important; padding: 8mm 0 0 !important; break-inside: avoid; }
  .specs .section-titre, .details .section-titre { font-size: 14px; margin: 0 0 6px; }
  .specs .grille-specs { max-width: none !important; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm 6mm; }
  .specs small { font-size: 8px; } .specs b { font-size: 11px; }
  .details { padding: 6mm 0 0 !important; }
  .details .deux-col { display: block !important; }
  .details li { font-size: 10px; line-height: 1.4; padding: 2.4px 0; break-inside: avoid; }
}
@media print {
  .fiche-haut .zone, .fiche-haut .zone > div { text-align: left !important; }
  .fiche-haut .items, .fiche-haut .tarif { justify-content: flex-start !important; }
  .fiche-haut .surtitre { text-align: left !important; }
}

/* Pied de page v2 : au centre le logo (remonté) avec « Véhicules » dessous ; Services à gauche, Contact à droite, le tout centré en hauteur. Téléphone : une grande bande, tout empilé et centré sous le logo (Véhicules, Services, Contact) */
.pied .cols { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 50px; }
.pied .pied-c { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.pied .pied-c .logo-pied { justify-self: auto; }
.pied .pied-c .col-nav ul { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.pied .pied-g { justify-self: start; }
.pied .pied-d { justify-self: end; }
@media (max-width: 1100px) {
  .pied .cols { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; }
  .pied .pied-c { order: -1; width: 100%; padding-bottom: 26px; }
  .pied .pied-g, .pied .pied-d { justify-self: center; width: 100%; padding: 26px 0; border-top: 1px solid #262626; }
  .pied .pied-c .col-nav ul { flex-direction: column; gap: 4px; }
}
.pied .pied-g { display: block; }

/* Accueil : bouton « Voir tout le catalogue » sous la sélection de la semaine */
.a-la-une .tout-catalogue { text-align: center; margin-top: 44px; }

/* ===== Disponibilité (22/10/2026 : en stock, en dépôt-vente, à importer, vendu) ===== */
.choix-liste.multi button { display: flex; align-items: center; gap: 10px; }
.choix-liste .case { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid var(--gris-clair); background: #fff; position: relative; transition: background-color .4s var(--courbe), border-color .4s var(--courbe); }
.choix-liste li.actif .case { background: var(--rouge); border-color: var(--rouge); }
.choix-liste li.actif .case::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.carte .badge-dispo { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 50px; padding: 4px 12px; background: #fff; color: var(--noir); border: 1px solid #d9d9d9; }
.carte .badge-dispo.dispo-stock { background: var(--noir); color: #fff; border-color: var(--noir); }
.carte .badge-dispo.dispo-importer { background: var(--rouge-pale); color: var(--rouge); border-color: transparent; }
.dispo-ligne { margin-top: 26px; }
.dispo-ligne small { display: block; color: #9F9F9F; font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }
.dispo-ligne ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.dispo-ligne li { font-size: 12px; letter-spacing: .08em; padding: 6px 14px; border: 1px solid #e3e3e3; border-radius: 50px; color: #b4b4b4; }
.dispo-ligne li.actif { color: #fff; background: var(--noir); border-color: var(--noir); font-weight: 600; }
.dispo-ligne li.actif.dispo-importer { background: var(--rouge); border-color: var(--rouge); }
.dispo-ligne li.actif.dispo-vendu { background: var(--rouge); border-color: var(--rouge); }
.dispo-ligne li.actif.dispo-depot { background: #696969; border-color: #696969; }
@media (max-width: 1100px) { .dispo-ligne ul { justify-content: center; } }
@media print { .dispo-ligne li:not(.actif) { display: none; } .carte .badge-dispo { display: none; } }
/* recherche de l'accueil : une seule ligne (titre, marque, modèle, disponibilité, bouton) dès que l'écran le permet */
@media (min-width: 761px) { .h-recherche { grid-template-columns: auto 1fr 1fr auto; gap: 24px; padding: 14px 24px; top: 112px; width: min(720px, calc(100% - 60px)); } .h-recherche h3 { grid-column: auto; font-size: 17px; } .h-recherche .bouton { padding-left: 22px; padding-right: 22px; } }

/* ===== Showroom en images (22/10/2026) : composition symétrique autour de la photo de l'extérieur ===== */
.sr { margin: 0 0 80px; }
.sr .sous-titre { text-align: center; }
.sr .chapeau { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.sr-haut { display: grid; grid-template-columns: 1.2fr 1.6fr 1.2fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.sr figure { position: relative; overflow: hidden; background: #ececec; }
.sr figure img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1.2s var(--courbe); }
.sr figure:hover img { transform: scale(1.04); }
.sr figcaption { position: absolute; left: 14px; bottom: 14px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(255, 255, 255, .92); color: var(--noir); padding: 5px 12px; border-radius: 50px; }
.sr-centre figcaption { background: var(--rouge); color: #fff; }
.sr-g1 { grid-column: 1; grid-row: 1; } .sr-g2 { grid-column: 1; grid-row: 2; }
.sr-centre { grid-column: 2; grid-row: 1 / span 2; min-height: 514px; }
.sr-d1 { grid-column: 3; grid-row: 1; } .sr-d2 { grid-column: 3; grid-row: 2; }
.sr-haut figure { min-height: 250px; }
.sr-bas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.sr-bas figure { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .sr-haut { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .sr-centre { grid-column: 1 / -1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .sr-g1, .sr-g2, .sr-d1, .sr-d2 { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .sr-bas { grid-template-columns: 1fr; }
}

/* Pied de page : logo « traits redessinés » (Logo Modernisation), blanc sur fond sombre. L'en-tête garde son logo. */
.pied .logo-pied img { width: 190px; height: auto; border-radius: 0; }
@media (max-width: 760px) { .pied .logo-pied img { width: 170px; } }

/* Showroom : deux colonnes égales, deux rangées alignées (texte et horaires | photo ; formulaire | plan) */
.duo-page.showroom { grid-template-columns: 1fr 1fr; gap: 50px 70px; align-items: stretch; }
.duo-page.showroom .horaires-liste { margin-bottom: 0; }
.duo-page.showroom .photo-showroom { margin: 0; display: flex; }
.duo-page.showroom .photo-showroom img { width: 100%; height: 100%; aspect-ratio: auto; min-height: 280px; }
.duo-page.showroom .pour-visite { margin: 0 0 26px; }
.duo-page.showroom .form-visite { max-width: none; }
.duo-page.showroom .visite-plan { margin: 0; justify-self: auto; width: auto; text-align: left; }
.duo-page.showroom .visite-plan .plan { margin: 0; max-width: none; }
.duo-page.showroom .visite-plan .plan svg { min-height: 0; height: auto; }
@media (max-width: 900px) { .duo-page.showroom { grid-template-columns: 1fr; gap: 40px; } .duo-page.showroom .photo-showroom img { min-height: 0; aspect-ratio: 4 / 3; } }

/* Mentions légales */
.mentions { max-width: 760px; }
.mentions p { margin: 0 0 18px; line-height: 1.7; color: var(--gris); font-weight: 300; }
.mentions .sous-titre { margin-top: 38px; }
.mentions a { color: var(--rouge); }
.a-completer { background: #FFF1B8; color: #5a4a00; padding: 0 6px; border-radius: 3px; font-size: .92em; }
.pied .bas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Impression (30/10/2026) : photos jamais coupées entre deux pages, photos d'origine non rognées */
@media print {
  .galerie .defile { display: block !important; font-size: 0; }
  .galerie .vue { display: inline-block !important; vertical-align: top; width: calc(50% - 3mm) !important; height: 78mm !important; margin: 0 6mm 6mm 0 !important; break-inside: avoid !important; page-break-inside: avoid !important; box-sizing: border-box; }
  .galerie .vue:nth-child(2n) { margin-right: 0 !important; }
  .galerie .vue img, .galerie .vue img.photo-brute { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block; margin: 0 auto; }
  .galerie .vue { display: inline-flex !important; align-items: center; justify-content: center; }
  .specs, .details, .details li, .grille-specs > * { break-inside: avoid; page-break-inside: avoid; }
  .section-titre { break-after: avoid; page-break-after: avoid; }
}
@media print {
  /* spécifications et détails ensemble, sur une même feuille (30/10/2026) */
  .specs { break-before: page !important; page-break-before: always !important; padding-top: 0 !important; }
  .details { break-before: avoid !important; page-break-before: avoid !important; }
  .specs, .details { break-inside: avoid; }
}

/* Photo agrandie sur téléphone : flèches sous la photo, jamais dessus (30/10/2026) */
@media (max-width: 900px) {
  .grand { padding: 70px 12px 110px; box-sizing: border-box; }
  .grand img { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 200px) !important; }
  .grand .fl { top: auto !important; bottom: 34px !important; transform: none !important; width: 56px; height: 52px; }
  .grand .fl.g { left: calc(50% - 130px) !important; right: auto !important; }
  .grand .fl.d { right: calc(50% - 130px) !important; left: auto !important; }
  .grand .compte-g { bottom: 50px; }
  .grand .fermer { top: 14px; right: 14px; }
}

/* Vidéo de présentation (YouTube) entre images et spécifications */
.video-fiche { padding: 20px 0 80px; }
.video-piste { display: flex; gap: 28px; overflow-x: auto; padding: 8px 0 14px; scroll-snap-type: x mandatory; }
.video-carte { flex: 0 0 260px; margin: 0; scroll-snap-align: start; }
.video-lance, .video-carte iframe { display: block; width: 260px; aspect-ratio: 9 / 16; border: 0; padding: 0; background: #111; position: relative; cursor: pointer; overflow: hidden; }
.video-lance img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.video-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--rouge); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; transition: transform .2s; }
.video-lance:hover .video-play { transform: scale(1.1); }
.video-carte figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #444; }
.video-carte figcaption a { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--rouge); }

/* Encart vidéo : cadre noir 4/3, vidéo centrée */
.video-scene { background: #0b0b0b; aspect-ratio: 4 / 3; max-height: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 28px; box-sizing: border-box; }
.video-piste { display: flex; justify-content: center; align-items: center; gap: 24px; overflow: visible; padding: 0; height: 100%; }
.video-carte { flex: none; height: 100%; display: flex; flex-direction: column; align-items: center; }
.video-lance, .video-carte iframe { height: calc(100% - 56px); width: auto; aspect-ratio: 9 / 16; }
.video-carte figcaption { margin-top: 10px; color: #ddd; text-align: center; font-size: 13px; line-height: 1.4; height: 46px; overflow: hidden; }
.video-carte figcaption a { color: #fff; opacity: .75; }
@media (max-width: 760px) { .video-scene { padding: 16px; } }

/* Vidéo en 4/3, centrée sur fond blanc */
.video-scene { background: transparent; aspect-ratio: auto; max-height: none; padding: 0; }
.video-piste { height: auto; }
.video-carte { height: auto; width: min(640px, 100%); }
.video-lance, .video-carte iframe { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.video-lance img { object-fit: contain; background: #000; }
.video-carte figcaption { color: #444; height: auto; margin-top: 14px; }
.video-carte figcaption a { color: var(--rouge); opacity: 1; }

/* Retour à la vignette verticale, centrée */
.video-scene { background: transparent; aspect-ratio: auto; max-height: none; padding: 0; display: block; }
.video-piste { display: flex; justify-content: center; gap: 28px; height: auto; overflow: visible; padding: 8px 0 14px; }
.video-carte { flex: 0 0 260px; width: 260px; height: auto; display: block; text-align: center; }
.video-lance, .video-carte iframe { width: 260px; height: auto; aspect-ratio: 9 / 16; }
.video-lance img { object-fit: cover; background: none; }
.video-carte figcaption { color: #444; height: auto; margin-top: 12px; font-size: 14px; }
.video-carte figcaption a { color: var(--rouge); opacity: 1; }

/* Showroom : plan plus petit, formulaire compact, blocs de même hauteur */
.duo-page.showroom { align-items: start; }
.duo-page.showroom .visite-plan .plan { max-width: none; margin: 0; }
.duo-page.showroom .visite-plan .plan svg { min-height: 0; height: 208px; }