/*
 * Millesim Automotive · feuille de style du site
 * Charte : vert Millesim #044929, rouge #C10706, noir, blanc ; Montserrat.
 * Chiffres (prix, kilométrage, références) en Barlow Condensed, comme sur une plaque de rallye.
 */

@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}

:root{
  --vert:#044929;
  --vert-nuit:#022c18;
  --brume:#e8ede9;
  --brume-fonce:#d3ddd6;
  --blanc:#ffffff;
  --noir:#000000;
  --gris:#56605a;
  --rouge:#c10706;
  --filet:rgba(4,73,41,.16);
  --filet-clair:rgba(255,255,255,.22);

  --f-texte:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-chiffres:"Barlow Condensed","Arial Narrow","Montserrat",sans-serif;

  --marge:clamp(20px,5.2vw,80px);
  --max:1520px;
  --entete:88px;
  --espace-section:clamp(96px,12vw,184px);

  --sortie:cubic-bezier(.16,1,.3,1);
  --iris:cubic-bezier(.76,0,.24,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font:400 18px/1.6 var(--f-texte);color:var(--noir);background:var(--blanc);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--rouge);color:var(--blanc)}
:focus-visible{outline:2px solid var(--vert);outline-offset:4px}
.hero :focus-visible,.volet :focus-visible,.rallyes :focus-visible,.pied :focus-visible,.fiche-hero :focus-visible,.menu-mobile :focus-visible,.visionneuse :focus-visible,body[data-entete-photo] .entete:not(.est-plein) :focus-visible{outline-color:var(--blanc)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.enveloppe{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.saut{position:fixed;left:16px;top:-80px;z-index:200;background:var(--noir);color:var(--blanc);padding:12px 18px;text-decoration:none;font-weight:600;font-size:15px}
.saut:focus{top:16px}
.bandeau-apercu{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;background:var(--rouge);color:#fff;font:600 13px/1.3 var(--f-texte);padding:10px 16px;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* ---------- Typographie ---------- */
.titre-section{font-size:clamp(38px,5.4vw,88px);line-height:.98;letter-spacing:-.042em;color:var(--vert)}
.compte{font-family:var(--f-chiffres);font-weight:600;font-size:22px;letter-spacing:.01em;color:var(--vert);font-variant-numeric:tabular-nums}
.lien{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:5px;transition:background-size .6s var(--sortie)}
.lien:hover{background-size:0 2px;background-position:100% 100%}
.lien-clair{color:var(--blanc)}

/* Compteur kilométrique : chaque chiffre roule jusqu'à sa valeur. */
.odo{font-variant-numeric:tabular-nums;white-space:nowrap}
.odo-roue{display:inline-flex;align-items:flex-start;line-height:1;height:1em;overflow:hidden}
.odo-colonne{display:flex;flex-direction:column;flex:none;will-change:transform}
.odo-colonne span,.odo-fixe{display:block;flex:none;height:1em;line-height:1}

/* ---------- Boutons : la forme reprend les pointes du losange ---------- */
.bouton{--pointe:16px;--fond:var(--vert);--texte:var(--blanc);--fond-survol:var(--noir);--texte-survol:var(--blanc);display:inline-flex;text-decoration:none;font:600 15px/1 var(--f-texte);letter-spacing:.01em;outline-offset:6px}
.bouton>span{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 calc(var(--pointe) + 24px);background:var(--fond);color:var(--texte);clip-path:polygon(var(--pointe) 0,calc(100% - var(--pointe)) 0,100% 50%,calc(100% - var(--pointe)) 100%,var(--pointe) 100%,0 50%);transition:color .5s var(--sortie);white-space:nowrap}
.bouton>span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fond-survol);transform:translateX(-101%);transition:transform .6s var(--sortie)}
.bouton:hover>span,.bouton:focus-visible>span{color:var(--texte-survol)}
.bouton:hover>span::before,.bouton:focus-visible>span::before{transform:none}
.bouton:active>span{transform:translateY(1px)}
.bouton-plein{--fond:var(--vert);--texte:var(--blanc);--fond-survol:var(--noir);--texte-survol:var(--blanc)}
.bouton-clair{--fond:var(--blanc);--texte:var(--vert);--fond-survol:var(--vert);--texte-survol:var(--blanc)}
.bouton-verre{--fond:rgba(255,255,255,.16);--texte:var(--blanc);--fond-survol:var(--blanc);--texte-survol:var(--vert)}
.bouton-verre>span{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bouton-doux{--fond:var(--brume-fonce);--texte:var(--vert);--fond-survol:var(--vert);--texte-survol:var(--blanc)}
.bouton-large{display:flex;width:100%}
.bouton-large>span{width:100%}

/* ---------- En-tête ---------- */
.entete{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--entete);color:var(--vert);transition:transform .7s var(--sortie),color .35s}
.entete::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--filet);transition:opacity .35s}
body[data-entete-photo] .entete:not(.est-plein){color:var(--blanc)}
body[data-entete-photo] .entete:not(.est-plein)::before{opacity:0}
.entete.est-cache{transform:translateY(-100%)}
.entete-barre{position:relative;height:100%;max-width:var(--max);margin:0 auto;padding:0 var(--marge);display:flex;align-items:center;gap:clamp(24px,3vw,48px)}
.entete-logo{display:block;flex:none}
.entete-logo .logo{width:118px;height:auto}
.entete-nav{display:flex;gap:clamp(20px,2.6vw,40px);margin-left:auto;font-size:15px;font-weight:500}
.entete-nav a,.pied-nav a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1.5px no-repeat;padding:6px 0;transition:background-size .5s var(--sortie)}
.entete-nav a:hover,.pied-nav a:hover{background-size:100% 1.5px;background-position:0 100%}
.entete-tel{font-family:var(--f-chiffres);font-size:20px;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;padding:6px 0 6px 24px;border-left:1px solid currentColor;border-left-color:color-mix(in srgb,currentColor 35%,transparent)}
.entete-menu{display:none;align-items:center;gap:12px;margin-left:auto;height:48px;font-size:15px;font-weight:600}
.entete-menu-traits{position:relative;width:26px;height:10px}
.entete-menu-traits::before,.entete-menu-traits::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .5s var(--sortie)}
.entete-menu-traits::before{top:0}
.entete-menu-traits::after{bottom:0}
.menu-ouvert .entete-menu-traits::before{transform:translateY(4px) rotate(45deg)}
.menu-ouvert .entete-menu-traits::after{transform:translateY(-4px) rotate(-45deg)}
.menu-ouvert .entete{color:var(--blanc)}
.menu-ouvert .entete::before{opacity:0}

.menu-mobile{position:fixed;inset:0;z-index:45;background:var(--vert);color:var(--blanc);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--entete) + 32px) var(--marge) max(32px,env(safe-area-inset-bottom))}
.menu-mobile[hidden]{display:none}
.menu-mobile-nav{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.menu-mobile-nav a{font-size:clamp(44px,12vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1.08;text-decoration:none}
.menu-mobile-pied{display:grid;gap:8px;margin-top:40px;padding-top:24px;border-top:1px solid var(--filet-clair);font-size:17px}
.menu-mobile-pied a{text-decoration:none}

/* ---------- Ouverture (diaporama) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;background:var(--vert);color:var(--blanc);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero-diapos{position:absolute;inset:0;z-index:0;overflow:hidden}
.iris-trait{position:absolute;left:0;top:0;z-index:3;width:1000px;height:490.4px;transform-origin:0 0;pointer-events:none;opacity:0;overflow:visible}
.iris-trait path{fill:none;stroke:var(--blanc);stroke-width:2px}
.diapo{position:absolute;inset:0;opacity:0;visibility:hidden}
.diapo.est-active,.diapo.est-entrante{opacity:1;visibility:visible}
.diapo.est-entrante{z-index:2}
.diapo picture,.diapo img{width:100%;height:100%}
.diapo img{object-fit:cover;transform-origin:50% 60%}
.hero-voile{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(1,24,13,.5) 0%,rgba(1,24,13,0) 24%),linear-gradient(0deg,rgba(1,24,13,.84) 0%,rgba(1,24,13,.42) 34%,rgba(1,24,13,0) 62%)}
.hero-contenu{position:relative;z-index:2;padding-bottom:clamp(28px,4vw,48px)}
.hero-titre{font-size:clamp(46px,6.4vw,112px);line-height:.94;letter-spacing:-.046em;max-width:10.5em;color:var(--blanc)}
.hero-bas{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px;margin-top:clamp(24px,3vw,40px)}
.hero-texte{max-width:31em;font-size:clamp(16px,1.25vw,19px);color:rgba(255,255,255,.88)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.hero-lien{font-size:15px}
.hero-pied{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.hero-pied::before{content:"";position:absolute;top:0;left:var(--marge);right:var(--marge);height:1px;background:var(--filet-clair)}
.hero-reperes{display:flex;align-items:center;gap:6px}
.repere{width:40px;height:32px;display:grid;place-items:center}
.repere-forme{width:26px;height:13px;fill:transparent;stroke:var(--blanc);stroke-width:60;opacity:.7;transition:fill .5s var(--sortie),opacity .5s}
.repere.est-actif .repere-forme,.repere:hover .repere-forme{fill:var(--blanc);opacity:1}
.hero-pause{position:relative;width:40px;height:32px;margin-left:8px}
.hero-pause::before,.hero-pause::after{content:"";position:absolute;top:10px;width:3px;height:12px;background:var(--blanc);opacity:.85}
.hero-pause::before{left:15px}
.hero-pause::after{left:22px}
.hero-pause[aria-pressed="true"]::before{left:16px;width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--blanc)}
.hero-pause[aria-pressed="true"]::after{display:none}
.hero-pause-texte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero-defiler{font-size:14px;font-weight:500;text-decoration:none;color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:12px}
.hero-defiler::after{content:"";width:1px;height:28px;background:linear-gradient(var(--blanc),var(--blanc)) 0 0/1px 40% no-repeat,rgba(255,255,255,.3);animation:defiler 2.2s var(--iris) infinite}
@keyframes defiler{0%{background-position:0 -100%}60%,100%{background-position:0 260%}}

/* Introduction : le losange se trace, puis s'ouvre sur la première photo. */
.intro-calque{display:none}
html.intro body{overflow:hidden}
html.intro .intro-calque{display:grid;place-items:center;position:fixed;inset:0;z-index:60;pointer-events:none}
.intro-logo{width:min(60vw,700px);height:auto;overflow:visible;color:var(--blanc)}
.intro-filet{fill:none;stroke:var(--blanc);stroke-width:21.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.intro-nom,.intro-sous{fill:var(--blanc);opacity:0;transform-box:fill-box;transform-origin:50% 50%}
html.intro .intro-filet{animation:intro-filet 1.1s cubic-bezier(.65,0,.35,1) .15s both}
html.intro .intro-nom{animation:intro-nom 1s var(--sortie) .6s both}
html.intro .intro-sous{animation:intro-sous .9s var(--sortie) .9s both}
@keyframes intro-filet{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes intro-nom{from{opacity:0;transform:scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes intro-sous{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.intro .hero-diapos{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
html.intro .hero-voile,html.intro .entete,html.intro [data-hero-apparait],html.intro .hero-titre{opacity:0}

/* ---------- Sections ---------- */
.section-tete{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px clamp(32px,5vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.section-tete-texte p{color:var(--gris);max-width:30em}
.section-tete-texte .compte{margin-top:18px}

/* ---------- Voitures disponibles ---------- */
.voitures{padding:var(--espace-section) 0 calc(var(--espace-section) * .75)}
.cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,6vw,96px) clamp(20px,2.6vw,40px)}
.carte-lien{display:block;text-decoration:none;color:inherit}
.carte-visuel{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--brume)}
.carte-photo,.carte-photo-2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--sortie)}
.carte-photo-2{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%);transition:none}
.carte-lien:hover .carte-photo{transform:scale(1.045)}
.carte-sans-photo{position:absolute;inset:0;display:grid;place-items:center;color:var(--gris);font-size:14px;font-weight:600}
.pastille{position:absolute;top:16px;left:16px;z-index:2;width:58px;height:58px;border-radius:50%;background:var(--blanc);box-shadow:inset 0 0 0 3px var(--rouge),0 4px 14px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-chiffres);color:var(--noir);line-height:.9}
.pastille-n{font-size:11px;font-weight:600;letter-spacing:.08em}
.pastille-chiffre{font-size:27px;font-weight:600;letter-spacing:-.01em}
.pastille-grande{position:static;width:76px;height:76px}
.pastille-grande .pastille-chiffre{font-size:36px}
.pastille-grande .pastille-n{font-size:13px}
.statut{position:absolute;top:22px;right:20px;z-index:2;padding:8px 12px 7px;font:600 12px/1 var(--f-texte);letter-spacing:.04em;background:var(--blanc);color:var(--vert)}
.statut-reservee{background:var(--rouge);color:var(--blanc)}
.statut-vendue{background:var(--noir);color:var(--blanc)}
.statut-brouillon{background:#f4c542;color:var(--noir)}
.carte-texte{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;padding-top:22px}
.carte-titre{grid-column:1/-1;font-size:clamp(26px,2.3vw,36px);line-height:1.06;letter-spacing:-.03em}
.carte-marque{display:block;font-size:15px;letter-spacing:0;line-height:1.3;color:var(--vert);margin-bottom:6px}
.carte-specs{display:flex;flex-wrap:wrap;gap:4px 0;font-family:var(--f-chiffres);font-size:20px;font-weight:500;color:var(--gris);font-variant-numeric:tabular-nums;line-height:1.25}
.carte-specs>*+*{margin-left:16px;padding-left:16px;border-left:1px solid var(--filet)}
.carte-prix{font-family:var(--f-chiffres);font-size:28px;font-weight:600;line-height:1;color:var(--noir);white-space:nowrap}
.carte-voir{grid-column:1/-1;justify-self:start;font-size:14px;font-weight:600;color:var(--vert);margin-top:8px;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .6s var(--sortie)}
.carte-lien:hover .carte-voir,.carte-lien:focus-visible .carte-voir{background-size:100% 2px}

.carte-grande{grid-column:1/-1}
.carte-grande .carte-lien{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:end}
.carte-grande .carte-visuel{aspect-ratio:16/10}
.carte-grande .carte-texte{grid-template-columns:1fr;padding:0 0 8px}
.carte-grande .carte-titre{font-size:clamp(34px,3.6vw,58px)}
.carte-grande .carte-prix{font-size:36px;margin-top:8px}

.vide{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,5vw,72px);background:var(--brume)}
.vide-forme{width:clamp(120px,14vw,220px);height:auto;fill:none;stroke:var(--vert);stroke-width:24}
.vide h3{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;line-height:1.1;color:var(--vert);margin-bottom:12px}
.vide p{color:var(--gris);margin-bottom:28px;max-width:30em}

.vendues{margin-top:clamp(88px,10vw,150px);padding-top:28px;border-top:1px solid var(--filet)}
.vendues-titre{font-size:15px;font-weight:600;color:var(--gris);margin-bottom:24px}
.vendues-piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,300px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin}
.carte-vendue{scroll-snap-align:start}
.carte-vendue .carte-photo{filter:grayscale(1) contrast(.95);opacity:.88}
.carte-vendue .carte-lien:hover .carte-photo{filter:none;opacity:1}
.carte-vendue .carte-titre{font-size:19px}
.carte-vendue .carte-marque{font-size:13px;margin-bottom:2px}
.carte-vendue .carte-specs{font-size:17px}
.carte-vendue .statut{top:12px;right:12px}

/* ---------- Acheter / Vendre ---------- */
.services{padding-top:calc(var(--espace-section) * .55)}
.services .titre-section{max-width:11.5em;margin-bottom:clamp(44px,5vw,80px)}
.volets{display:flex;height:min(94vh,980px);min-height:640px}
.volet{position:relative;flex:1 1 0;overflow:hidden;color:var(--blanc);background:var(--vert-nuit);transition:flex-grow 1.1s var(--sortie)}
.volets:hover .volet:hover,.volet:focus-within{flex-grow:1.4}
.volet-image{position:absolute;inset:-6% 0;overflow:hidden}
.volet-image picture,.volet-image img{width:100%;height:100%}
.volet-image img{object-fit:cover;transition:transform 1.6s var(--sortie)}
.volet:hover .volet-image img{transform:scale(1.04)}
.volet::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,24,13,.86) 0%,rgba(1,24,13,.38) 42%,rgba(1,24,13,0) 70%);pointer-events:none}
.volet-contenu{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(28px,4vw,64px)}
.volet-titre{font-size:clamp(52px,6.6vw,116px);letter-spacing:-.05em;line-height:.9;margin-bottom:22px}
.volet p{max-width:29em;color:rgba(255,255,255,.88);margin-bottom:30px}
.volet+.volet{border-left:1px solid rgba(255,255,255,.18)}

/* ---------- Étapes de recherche ---------- */
.etapes{padding:var(--espace-section) 0}
.etapes-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px clamp(40px,7vw,140px);align-items:start}
.etapes-tete{position:sticky;top:calc(var(--entete) + 48px)}
.etapes-tete p{color:var(--gris);margin:26px 0 34px;max-width:24em}
.etapes-liste{position:relative;padding-top:6px}
.etapes-liste::before,.etapes-liste::after{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:2px}
.etapes-liste::before{background:var(--brume-fonce)}
.etapes-liste::after{background:repeating-linear-gradient(180deg,var(--vert) 0 16px,transparent 16px 28px);transform-origin:50% 0;transform:scaleY(var(--route,1))}
.js:not(.calme) .etapes-liste::after{transform:scaleY(var(--route,0))}
.etape{position:relative;padding:0 0 clamp(64px,7vw,104px) 104px}
.etape:last-child{padding-bottom:0}
.etape-repere{position:absolute;left:0;top:4px;width:56px;height:28px;background:var(--blanc)}
.etape-forme{width:56px;height:28px;fill:var(--blanc);stroke:var(--vert);stroke-width:46;transition:fill .6s var(--sortie)}
.etape-n{position:absolute;left:0;top:4px;width:56px;height:28px;display:grid;place-items:center;font-family:var(--f-chiffres);font-weight:600;font-size:17px;line-height:1;color:var(--vert);transition:color .6s var(--sortie)}
.etape.est-atteinte .etape-forme,.calme .etape-forme{fill:var(--vert)}
.etape.est-atteinte .etape-n,.calme .etape-n{color:var(--blanc)}
.etape h3{font-size:clamp(24px,2.5vw,38px);letter-spacing:-.03em;line-height:1.08;margin-bottom:14px}
.etape p{color:var(--gris);max-width:30em}

/* ---------- Née sur les routes ---------- */
.rallyes{background:var(--vert);color:var(--blanc);padding:var(--espace-section) 0;overflow:hidden}
.rallyes .titre-section{color:var(--blanc)}
.rallyes-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px clamp(40px,7vw,140px);align-items:center}
.rallyes-texte p{color:rgba(255,255,255,.84);margin:28px 0 36px;max-width:28em}
.rallyes-mosaique{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,28px);padding:6% 0 14%}
.tuile{margin:0;overflow:hidden;background:var(--vert-nuit)}
.tuile picture,.tuile img{width:100%;height:100%}
.tuile img{aspect-ratio:4/5;object-fit:cover}
.tuile-2,.tuile-4{margin-top:22%}
.tuile-3{margin-top:-22%}

/* ---------- Contact ---------- */
.contact{padding:var(--espace-section) 0}
.contact-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,120px);align-items:end}
.contact .titre-section{font-size:clamp(46px,7.2vw,124px);max-width:9.5em}
.contact-texte p{color:var(--gris);margin-bottom:28px;max-width:26em}
.contact-liens{display:grid;gap:14px;justify-items:start}
.contact-grand{font-size:clamp(22px,2.1vw,32px);font-weight:600;letter-spacing:-.02em;color:var(--vert);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:6px;transition:background-size .6s var(--sortie)}
.contact-grand[href^="tel"]{font-family:var(--f-chiffres);font-size:clamp(32px,3vw,46px);letter-spacing:.01em;font-weight:600}
.contact-grand:hover{background-size:0 2px;background-position:100% 100%}
.contact-liens li:last-child{margin-top:10px}

/* ---------- Pied de page ---------- */
.pied{background:var(--vert-nuit);color:var(--blanc)}
.partenaires{padding:60px 0 52px;border-bottom:1px solid var(--filet-clair)}
.partenaires-titre{font-size:15px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:30px}
.defile{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.defile-piste{display:flex;align-items:center;width:max-content;animation:defile 42s linear infinite}
.defile-piste li{flex:none;padding-right:clamp(64px,8vw,128px)}
.defile:hover .defile-piste{animation-play-state:paused}
.defile a{display:block;transition:opacity .3s}
.defile a:hover{opacity:.7}
.defile img{height:62px;width:auto}
.defile .logo-loubat{height:70px}
.defile .logo-targa{height:76px}
@keyframes defile{to{transform:translateX(-33.3333%)}}
.pied-grille{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px clamp(32px,5vw,80px);align-items:center;padding-top:64px;padding-bottom:44px}
.pied-logo{display:block}
.pied-logo .logo{width:156px;height:auto;color:var(--blanc)}
.pied-signature{color:rgba(255,255,255,.76);font-size:15px;max-width:30em}
.pied-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;padding-top:28px;border-top:1px solid var(--filet-clair)}
.pied-copyright{grid-column:1/-1;font-size:13px;color:rgba(255,255,255,.6)}

/* ---------- Fiche d'une voiture ---------- */
.fiche-hero{position:relative;height:90vh;height:90svh;min-height:580px;display:flex;align-items:flex-end;color:var(--blanc);background:var(--vert);overflow:hidden}
.fiche-hero-image{position:absolute;inset:0;overflow:hidden}
.fiche-hero-image img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.fiche-hero-contenu{position:relative;z-index:2;padding-bottom:clamp(40px,5.5vw,84px)}
.fiche-hero-sans-photo{height:auto;min-height:0;padding-top:calc(var(--entete) + clamp(56px,8vw,120px))}
.fiche-retour{display:inline-block;font-size:14px;font-weight:600;text-decoration:none;color:rgba(255,255,255,.88);margin-bottom:28px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:4px;transition:background-size .6s var(--sortie)}
.fiche-retour:hover{background-size:0 1.5px;background-position:100% 100%}
.fiche-hero-badges{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.fiche-hero-badges .statut{position:static}
.fiche-titre{display:flex;flex-direction:column;gap:12px}
.fiche-marque{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em}
.fiche-modele{font-size:clamp(48px,7.6vw,132px);line-height:.92;letter-spacing:-.048em;max-width:11em}

.fiche-caracs{border-bottom:1px solid var(--filet)}
.caracs{display:flex;flex-wrap:wrap}
.carac{flex:1 1 160px}
.carac-prix{flex-grow:1.4}
.carac{padding:28px 24px 30px 0}
.carac+.carac{padding-left:24px;border-left:1px solid var(--filet)}
.carac dt{font-size:13px;font-weight:600;color:var(--gris);margin-bottom:8px}
.carac dd{font-family:var(--f-chiffres);font-size:clamp(26px,2.3vw,38px);font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums}
.carac-prix dd{color:var(--vert)}

.fiche-corps{padding:clamp(72px,9vw,140px) 0}
.fiche-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px clamp(40px,7vw,140px);align-items:start}
.fiche-alerte{background:var(--brume);padding:22px 26px;margin-bottom:40px;border-left:4px solid var(--rouge)}
.fiche-alerte p{margin-bottom:10px}
.fiche-alerte p:last-child{margin-bottom:0}
.fiche-sous-titre{font-size:15px;font-weight:600;color:var(--vert);margin-bottom:18px}
.fiche-description{margin-bottom:56px}
.fiche-description p{font-size:clamp(18px,1.35vw,20px);line-height:1.72;max-width:36em;margin-bottom:1.1em}
.fiche-technique{display:grid;max-width:38em;margin-bottom:56px;border-top:1px solid var(--filet)}
.fiche-technique div{display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--filet)}
.fiche-technique dt{font-size:15px;color:var(--gris)}
.fiche-technique dd{font-weight:500}
.points{display:grid;gap:14px;max-width:38em}
.points li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:baseline}
.point-forme{width:22px;height:11px;fill:var(--vert);transform:translateY(-1px)}
.fiche-contact{position:sticky;top:calc(var(--entete) + 24px)}
.fiche-contact-carte{background:var(--brume);padding:clamp(28px,3vw,40px);display:grid;gap:12px}
.fiche-contact-prix{font-family:var(--f-chiffres);font-size:clamp(38px,3.4vw,52px);font-weight:600;line-height:1;color:var(--vert)}
.fiche-contact-ref{font-size:14px;color:var(--gris);margin-bottom:12px}
.fiche-contact-titre{font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.fiche-partager{justify-self:start;margin-top:8px;font-size:15px;font-weight:600;color:var(--vert);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:4px}
.fiche-partager:hover{background-size:0 1.5px;background-position:100% 100%}
.fiche-barre{display:none}

.galerie{padding-bottom:var(--espace-section)}
.galerie-tete{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,4vw,56px)}
.galerie-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.galerie-photo{position:relative;display:block;overflow:hidden;background:var(--brume);aspect-ratio:4/3;cursor:zoom-in}
.galerie-photo:nth-child(5n+1),.galerie-photo:last-child:nth-child(5n+2),.galerie-photo:last-child:nth-child(5n+4){grid-column:1/-1;aspect-ratio:16/9}
.galerie-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--sortie)}
.galerie-photo:hover img{transform:scale(1.04)}

.autres{padding-bottom:var(--espace-section)}
.autres .titre-section{margin-bottom:clamp(40px,5vw,72px);max-width:10em}
.cartes-defilantes{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Visionneuse plein écran */
.visionneuse{position:fixed;inset:0;z-index:120;background:#010f08;color:var(--blanc);display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:0;transition:opacity .45s var(--sortie)}
.visionneuse.est-ouverte{opacity:1}
.visionneuse-haut,.visionneuse-bas{display:flex;align-items:center;justify-content:space-between;padding:18px var(--marge)}
.visionneuse-compte{font-family:var(--f-chiffres);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.visionneuse-fermer{font-size:15px;font-weight:600;padding:10px 0}
.visionneuse-scene{position:relative;overflow:hidden}
.visionneuse-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0 var(--marge)}
.visionneuse-nav{display:flex;gap:12px}
.visionneuse-nav button{width:56px;height:44px;display:grid;place-items:center;border:1px solid var(--filet-clair);font-size:20px}
.visionneuse-nav button:hover{background:rgba(255,255,255,.1)}

/* ---------- Pages de texte ---------- */
.page-texte{padding:calc(var(--entete) + clamp(56px,8vw,120px)) 0 var(--espace-section)}
.page-texte .texte-colonne>*{max-width:46rem}
.titre-page{font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.042em;color:var(--vert);margin-bottom:clamp(36px,4vw,56px)}
.page-texte h2{font-size:21px;letter-spacing:-.01em;margin:44px 0 12px}
.page-texte p{max-width:40em;margin-bottom:12px;color:#1c241f}
.texte-retour{margin-top:48px}
.page-404 .vide-forme{width:140px;margin-bottom:40px}
.actions-texte{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ---------- Animations : états de départ (seulement si le mouvement est permis) ---------- */
.attente [data-titre],.attente [data-hero-titre]{visibility:hidden}
.attente [data-hero-apparait],.attente .carte-texte,.attente .caracs,.attente .fiche-texte,.attente .fiche-contact-carte{opacity:0}
.ligne-masque{display:block}

/* ---------- Écrans moyens ---------- */
@media (max-width:1100px){
  :root{--entete:80px}
  .entete-nav{gap:22px}
  .entete-tel{display:none}
  .section-tete,.etapes-grille,.rallyes-grille,.contact-grille,.fiche-grille{grid-template-columns:1fr}
  .etapes-tete{position:static}
  .rallyes-mosaique{max-width:760px}
  .carte-grande .carte-lien{grid-template-columns:1fr}
  .cartes-defilantes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiche-contact{position:static}
  .volets{height:auto;min-height:0;flex-direction:column}
  .volet{min-height:78vh}
  .volet+.volet{border-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .volets:hover .volet:hover,.volet:focus-within{flex-grow:1}
}

/* ---------- Téléphones ---------- */
@media (max-width:760px){
  :root{--entete:72px}
  body{font-size:17px}
  .entete-logo .logo{width:96px}
  .entete-nav{display:none}
  .entete-menu{display:inline-flex}
  .hero{display:block;height:auto;min-height:0}
  .hero-diapos{position:relative;height:62vh;height:62svh;min-height:400px}
  .hero-voile{bottom:auto;height:62vh;height:62svh;min-height:400px;background:linear-gradient(180deg,rgba(1,24,13,.55) 0%,rgba(1,24,13,0) 26%),linear-gradient(0deg,rgba(4,73,41,.65) 0%,rgba(4,73,41,0) 30%)}
  .hero-contenu{padding-top:30px;padding-bottom:max(40px,env(safe-area-inset-bottom))}
  .hero-titre{font-size:clamp(40px,11.6vw,60px)}
  .hero-bas{gap:24px;margin-top:20px}
  .hero-actions{width:100%;gap:20px 28px}
  .hero-actions .bouton{flex:1 1 100%}
  .hero-actions .bouton>span{width:100%;padding:0 26px}
  .hero-pied{position:absolute;left:0;right:0;top:calc(max(62svh,400px) - 60px);padding-top:0;padding-bottom:0}
  .hero-pied::before{display:none}
  .hero-defiler{display:none}
  .etape{padding-left:80px}
  .etapes-liste::before,.etapes-liste::after{left:23px}
  .etape-repere,.etape-forme,.etape-n{width:48px;height:24px}
  .cartes,.cartes-defilantes{grid-template-columns:1fr}
  .carte-texte{grid-template-columns:1fr}
  .carte-prix{justify-self:start}
  .vide{grid-template-columns:1fr}
  .vide-forme{width:120px}
  .volet{min-height:86svh}
  .rallyes-mosaique{gap:12px}
  .caracs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carac{padding:20px 12px 22px 0;border-bottom:1px solid var(--filet)}
  .carac+.carac{padding-left:0;border-left:0}
  .carac:nth-child(even){padding-left:16px;border-left:1px solid var(--filet)}
  .galerie-grille{grid-template-columns:1fr}
  .galerie-photo,.galerie-photo:nth-child(5n+1){grid-column:auto;aspect-ratio:4/3}
  .fiche-barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--filet);transform:translateY(110%);transition:transform .6s var(--sortie)}
  .fiche-barre.est-visible{transform:none}
  .fiche-barre-prix{margin-right:auto;font-family:var(--f-chiffres);font-weight:600;font-size:22px;line-height:1.1;color:var(--vert);white-space:nowrap}
  .fiche-barre .bouton{--pointe:12px}
  .fiche-barre .bouton>span{min-height:46px;padding:0 24px}
  .pied-grille{grid-template-columns:1fr}
  .defile img{height:50px}
  .defile .logo-loubat{height:56px}
  .defile .logo-targa{height:60px}
  .visionneuse-scene img{padding:0}
}

/* ---------- Mouvement réduit ---------- */
.calme *,.calme *::before,.calme *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.calme .defile-piste{animation:none;flex-wrap:wrap;width:auto;row-gap:28px}
.calme .defile-piste li[aria-hidden="true"]{display:none}
.calme .defile{-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){
  .defile-piste{animation:none}
  .hero-defiler::after{animation:none}
}

/* ---------- Passage d'une page à l'autre : ouverture en losange (navigateurs compatibles) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sortie .8s var(--iris) both}
::view-transition-new(root){animation:vt-entree .95s var(--iris) both}
@keyframes vt-sortie{to{transform:scale(.97);opacity:.55}}
@keyframes vt-entree{
  from{clip-path:polygon(calc(50% - 0vmax) calc(50% - 0vmax),50% calc(50% - 0vmax),calc(50% + 0vmax) calc(50% - 0vmax),calc(50% + 0vmax) calc(50% + 0vmax),50% calc(50% + 0vmax),calc(50% - 0vmax) calc(50% + 0vmax))}
  to{clip-path:polygon(calc(50% - 160vmax) calc(50% - 4.5vmax),50% calc(50% - 74.9vmax),calc(50% + 160vmax) calc(50% - 4.5vmax),calc(50% + 160vmax) calc(50% + 4.5vmax),50% calc(50% + 74.9vmax),calc(50% - 160vmax) calc(50% + 4.5vmax))}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}