/* ==========================================================================
   ER AUTO — Design System « Écurie 1985 »
   Direction artistique : carbone / ivoire cadran / orange 914 / or gravé
   Typographie : Archivo (display motorsport) · Fraunces (âme ancêtre)
                 · IBM Plex Mono (plaques constructeur)
   NE PAS SIMPLIFIER — chaque token et chaque détail est intentionnel.

   Composants ajoutés après la maquette initiale :
   · .texte-legal / .sommaire-legal — prose des pages légales (mentions,
     confidentialité). Titres numérotés mono/or, hairline or, puces orange.
   · .page-404 — page d'erreur (compteur de vitesse à zéro).
   ========================================================================== */

:root{
  /* Couleurs — palette fermée, ne rien ajouter */
  --noir:#0B0C0D;          /* fond principal, carbone profond */
  --carbone:#14161A;       /* surfaces, cartes sombres */
  --acier:#1C1F24;         /* surfaces relevées, plaques */
  --ligne:#26292F;         /* hairlines sur fond sombre */
  --ivoire:#F1EBDD;        /* texte principal & sections claires (ivoire cadran) */
  --ivoire-2:#E7DFCC;      /* ivoire légèrement ombré (fonds clairs alternés) */
  --gris:#9B968A;          /* texte secondaire — gris chaud biaisé ivoire */
  --gris-f:#6E6A60;        /* texte tertiaire sur clair */
  --orange:#E85D26;        /* orange 914 — accent signature, avec parcimonie */
  --orange-vif:#F76F35;    /* hover */
  --or:#C6A15B;            /* filets gravés, détails premium */
  --or-30:rgba(198,161,91,.32);
  --encre:#151310;         /* texte sur sections ivoire */

  /* Typo */
  --f-display:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  /* Échelle typographique */
  --t-hero:clamp(2.9rem,7.2vw,6.4rem);
  --t-h2:clamp(2rem,4.2vw,3.4rem);
  --t-h3:clamp(1.25rem,2vw,1.6rem);
  --t-lede:clamp(1.06rem,1.5vw,1.25rem);
  --t-body:1.0rem;
  --t-small:.875rem;
  --t-label:.72rem;

  /* Rythme */
  --sec-pad:clamp(88px,12vw,150px);
  --gutter:clamp(20px,4vw,48px);
  --maxw:1240px;
  --head-h:76px;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--noir);
  color:var(--ivoire);
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
::selection{background:var(--orange);color:var(--noir)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* --------------------------------------------------------- utilitaires */
.mono{font-family:var(--f-mono)}
.label{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gris);
}
.label--orange{color:var(--orange)}
.label--or{color:var(--or)}
.eyebrow{
  display:flex;align-items:center;gap:16px;
  margin-bottom:26px;
}
.eyebrow::after{content:"";height:1px;flex:0 0 64px;background:var(--or-30)}
.h2{
  font-size:var(--t-h2);
  font-weight:800;
  font-stretch:112%;
  line-height:1.04;
  letter-spacing:-.012em;
  text-transform:uppercase;
  text-wrap:balance;
}
.h2 em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:480;
  text-transform:none;
  letter-spacing:0;
  color:var(--or);
}
.lede{
  font-size:var(--t-lede);
  line-height:1.7;
  color:var(--gris);
  max-width:58ch;
}
.section{padding-block:var(--sec-pad);position:relative}
.section--carbone{background:var(--carbone)}
.section--ivoire{background:var(--ivoire);color:var(--encre)}
.section--ivoire .lede{color:var(--gris-f)}
.section--ivoire .label{color:var(--gris-f)}
.section--ivoire .h2 em{color:#8a6a2d}

/* filet de section : hairline or centrée */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--or-30),transparent)}

/* --------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-mono);
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  padding:1.05em 1.9em;
  border:1px solid var(--or-30);
  color:var(--ivoire);
  background:transparent;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
  position:relative;
}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(6px)}
.btn--plein{background:var(--orange);border-color:var(--orange);color:var(--noir);font-weight:500}
.btn--plein:hover{background:var(--orange-vif);border-color:var(--orange-vif)}
.btn--ghost:hover{border-color:var(--orange);color:var(--orange)}
.section--ivoire .btn--ghost{color:var(--encre);border-color:rgba(21,19,16,.35)}
.section--ivoire .btn--ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ---------------------------------------------------------------- header */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--head-h);
  display:flex;align-items:center;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.header.est-scrolle{
  background:rgba(11,12,13,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--ligne);
}
.header__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.marque{display:flex;align-items:center;gap:14px}
.marque__ecusson{width:40px;height:46px;flex:none}
.marque__txt{display:flex;flex-direction:column;line-height:1}
.marque__nom{
  font-weight:900;font-stretch:120%;font-size:1.22rem;letter-spacing:.06em;
}
.marque__nom span{color:var(--orange)}
.marque__base{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.34em;
  color:var(--or);text-transform:uppercase;margin-top:5px;
}
.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);transition:color .2s ease;position:relative;padding-block:6px;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--orange);transition:width .25s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ivoire)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav .btn{padding:.7em 1.3em;font-size:.7rem;color:var(--ivoire)}
.nav .btn--plein{color:var(--noir)}  /* sinon .nav a (gris) l’emporte : contraste 1,18:1 */
.langues{display:flex;gap:2px;margin-left:6px}
.langues a{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  padding:.45em .6em;color:var(--gris);border:1px solid transparent;
}
.langues a.actif{color:var(--ivoire);border-color:var(--or-30)}
.langues a:hover{color:var(--orange)}
.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger span{display:block;width:24px;height:2px;background:var(--ivoire);transition:transform .3s ease,opacity .3s ease}

/* ------------------------------------------------------------------ hero */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;
  padding-top:var(--head-h);
  background:
    radial-gradient(1100px 520px at 78% 30%,rgba(232,93,38,.07),transparent 62%),
    radial-gradient(900px 600px at 12% 88%,rgba(198,161,91,.05),transparent 60%),
    var(--noir);
  overflow:hidden;
}
.hero::before{ /* grain */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__grille{
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  width:100%;
  padding-bottom:clamp(120px,16vh,170px);
}
.hero__kicker{
  display:flex;align-items:center;gap:18px;margin-bottom:30px;
}
.hero__kicker .trait{width:56px;height:1px;background:var(--orange)}
.hero__titre{
  font-size:var(--t-hero);
  font-weight:900;
  font-stretch:118%;
  line-height:.96;
  letter-spacing:-.015em;
  text-transform:uppercase;
  max-width:13ch;
  text-wrap:balance;
}
.hero__titre .ligne{display:block;overflow:hidden}
.hero__titre .ligne>span{display:block;transform:translateY(110%);animation:leve .9s cubic-bezier(.22,.7,.24,1) forwards}
.hero__titre .ligne:nth-child(2)>span{animation-delay:.12s}
.hero__titre .ligne:nth-child(3)>span{animation-delay:.24s}
@keyframes leve{to{transform:translateY(0)}}
.hero__titre .accent{color:var(--orange)}
.hero__sub{
  margin-top:34px;
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:430;
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--gris);
  max-width:40ch;
  opacity:0;animation:fondu .8s ease .55s forwards;
}
.hero__sub strong{color:var(--or);font-weight:520}
@keyframes fondu{to{opacity:1}}
.hero__cta{display:flex;flex-wrap:wrap;gap:18px;margin-top:44px;opacity:0;animation:fondu .8s ease .75s forwards}
.hero__illu{
  position:absolute;z-index:1;
  right:max(24px,calc((100vw - 1500px)/2));
  bottom:clamp(108px,14vh,170px);
  width:min(45vw,650px);
  pointer-events:none;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6));
  opacity:0;transform:translateY(26px);
  animation:arrive 1s cubic-bezier(.22,.7,.3,1) .5s forwards;
}
.hero__illu picture{display:block}
.hero__illu img{width:100%;height:auto}
@keyframes arrive{to{opacity:1;transform:none}}
.hero__meta{
  position:absolute;z-index:2;
  right:var(--gutter);top:calc(var(--head-h) + 34px);
  display:flex;flex-direction:column;gap:8px;text-align:right;
}
.hero__meta .label{font-size:.62rem}

/* bandeau défilant façon paddock */
.bandeau{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  border-top:1px solid var(--ligne);
  background:rgba(11,12,13,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;padding-block:16px;
}
.bandeau__piste{
  display:flex;gap:0;width:max-content;
  animation:defile 38s linear infinite;
}
.bandeau:hover .bandeau__piste{animation-play-state:paused}
.bandeau__piste span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gris);padding-inline:1.4em;white-space:nowrap;
}
.bandeau__piste span b{color:var(--or);font-weight:500}
.bandeau__piste span i{color:var(--orange);font-style:normal}
@keyframes defile{to{transform:translateX(-50%)}}

/* ------------------------------------------------------- section Porsche */
.porsche__grille{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,6vw,90px);align-items:start;
}
.porsche__citation{
  font-family:var(--f-serif);font-style:italic;font-weight:440;
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.5;color:var(--ivoire);
  border-left:1px solid var(--or-30);padding-left:28px;margin-top:38px;
}
.porsche__citation small{
  display:block;margin-top:14px;
  font-family:var(--f-mono);font-style:normal;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}
.modeles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.modele{
  border:1px solid var(--ligne);
  background:linear-gradient(160deg,var(--acier),var(--carbone) 70%);
  padding:22px 18px 18px;
  position:relative;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease;
}
.modele:hover{border-color:var(--or-30);transform:translateY(-3px)}
.modele::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:0;
  background:var(--orange);transition:height .3s ease;
}
.modele:hover::after{height:100%}
.modele__nom{
  font-weight:900;font-stretch:116%;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1;letter-spacing:.01em;
}
.modele__annees{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  color:var(--gris);margin-top:10px;display:block;
}
.modele--plus{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  border-style:dashed;border-color:var(--or-30);background:none;
}
.modele--plus .modele__nom{font-size:1.1rem;font-weight:700;color:var(--or)}
a.modele{display:block;color:inherit}
a.modele .modele__lire{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);display:block;margin-top:12px;opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;
}
a.modele:hover .modele__lire{opacity:1;transform:none}

/* ------------------------------------------------------- mur de logos */
.logos-grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px;margin-top:26px;
}
.logo-carte{
  background:var(--ivoire);
  border:1px solid var(--ligne);
  min-height:84px;
  display:flex;align-items:center;justify-content:center;
  padding:16px 18px;position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
}
.logo-carte img{
  max-height:42px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1) opacity(.82);
  transition:filter .25s ease;
}
.logo-carte:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.logo-carte:hover img{filter:none}
.logo-carte span{display:none;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.logo-carte.sans-img img{display:none}
.logo-carte.sans-img span{display:block}
.logo-carte--porsche{outline:2px solid var(--orange);outline-offset:-2px}
.marques-suite{margin-top:22px;font-size:.88rem;color:var(--gris);max-width:70ch;line-height:1.8}

/* ------------------------------------------------- galerie de photos */
.galerie{
  display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:56px;
}
.galerie figure{position:relative;overflow:hidden;border:1px solid var(--ligne);margin:0;background:var(--carbone)}
.galerie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1);filter:saturate(.88)}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(transparent,rgba(11,12,13,.86));
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire);
}
.galerie .g-4{grid-column:span 4;aspect-ratio:4/3}
.galerie .g-8{grid-column:span 8;aspect-ratio:16/9}
.galerie .g-6{grid-column:span 6;aspect-ratio:3/2}
@media (max-width:880px){
  .galerie{grid-template-columns:1fr 1fr}
  .galerie .g-4,.galerie .g-8,.galerie .g-6{grid-column:span 1;aspect-ratio:4/3}
}

/* ----------------------------------------------- pages modèles Porsche */
.article-modele{max-width:820px}
.article-modele p{margin-bottom:1.25em;color:var(--gris);line-height:1.8}
.article-modele p strong{color:var(--ivoire);font-weight:600}
.article-modele h2{margin:2em 0 .8em}
.fiche-technique{margin-top:10px}
.fiche-technique .plaque__ligne{grid-template-columns:190px 1fr}
.modele-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,70px);align-items:center;
}
.modele-hero figure{margin:0;border:1px solid var(--ligne);overflow:hidden;background:var(--carbone)}
.modele-hero img{width:100%;height:auto;display:block}
.modele-hero figcaption{
  padding:10px 14px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);border-top:1px solid var(--ligne);
}
.chiffres-cles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:34px 0 8px}
.chiffre-cle{border:1px solid var(--ligne);padding:18px 16px;background:var(--carbone)}
.chiffre-cle b{
  display:block;font-family:var(--f-mono);font-weight:500;font-size:1.35rem;color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.chiffre-cle span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.pagination-modeles{
  display:flex;justify-content:space-between;gap:18px;margin-top:70px;
  border-top:1px solid var(--ligne);padding-top:30px;flex-wrap:wrap;
}
@media (max-width:880px){
  .modele-hero{grid-template-columns:1fr}
  .chiffres-cles{grid-template-columns:1fr 1fr}
}
.porsche__note{
  margin-top:26px;font-size:var(--t-small);color:var(--gris);max-width:52ch;
}

/* ------------------------------------------------------------- compteurs */
.compteurs{position:relative}
.compteurs .intro{max-width:640px;margin-bottom:64px}
.cadrans{
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(8px,2.2vw,30px);flex-wrap:wrap;
}
.cadran{display:flex;flex-direction:column;align-items:center;gap:18px}
.cadran svg{width:clamp(120px,15vw,190px);height:auto}
.cadran--central svg{width:clamp(160px,19vw,246px)}
.cadran__legende{text-align:center}
.cadran__legende .label{font-size:.6rem;letter-spacing:.28em}
.cadran__valeur{
  font-family:var(--f-mono);font-weight:500;
  font-size:1.05rem;color:var(--ivoire);margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.cadran .aiguille{
  transition:transform 1.7s cubic-bezier(.3,.9,.34,1.04);
  transform-box:view-box;transform-origin:50% 50%;
}

/* ---------------------------------------------------------------- stock  */
.stock__tete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:60px}
.familles{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);
}
.famille{
  border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:30px 26px 34px;
  position:relative;
  transition:background .3s ease;
  min-height:180px;display:flex;flex-direction:column;gap:12px;
}
.famille:hover{background:var(--carbone)}
.famille__num{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;color:var(--or);
}
.famille__nom{font-weight:800;font-stretch:110%;font-size:1.08rem;text-transform:uppercase;letter-spacing:.02em}
.famille__detail{font-size:.86rem;color:var(--gris);line-height:1.6}
.stock__marques{margin-top:70px}
.marques-liste{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;
}
.marques-liste span{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ligne);color:var(--gris);
  padding:.55em .95em;transition:color .2s ease,border-color .2s ease;
}
.marques-liste span:hover{color:var(--ivoire);border-color:var(--or-30)}
.marques-liste span.porsche{color:var(--orange);border-color:rgba(232,93,38,.4)}

/* -------------------------------------------------------------- méthode  */
.methode{counter-reset:etape}
.methode__etapes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
  margin-top:64px;
}
.etape{position:relative;padding-top:34px}
.etape::before{
  counter-increment:etape;
  content:"0" counter(etape);
  position:absolute;top:0;left:0;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.3em;color:var(--orange);
}
.etape::after{
  content:"";position:absolute;top:8px;left:64px;right:0;height:1px;background:var(--ligne);
}
.etape:last-child::after{background:linear-gradient(90deg,var(--ligne),transparent)}
.etape__titre{font-weight:800;font-stretch:110%;text-transform:uppercase;font-size:1.14rem;margin-bottom:14px;letter-spacing:.02em}
.etape__txt{color:var(--gris);font-size:.95rem}
.methode__cta{margin-top:70px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.methode__tel{
  font-family:var(--f-mono);font-size:1.05rem;letter-spacing:.08em;color:var(--ivoire);
}
.methode__tel b{color:var(--orange);font-weight:500}

/* -------------------------------------------------------------- histoire */
.histoire{background:var(--ivoire);color:var(--encre)}
.histoire .eyebrow::after{background:rgba(21,19,16,.2)}
.histoire__grille{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(44px,6vw,96px);
}
.histoire__recit p{margin-bottom:1.2em;max-width:58ch;color:#3d382f}
.histoire__recit p:first-of-type::first-letter{
  font-family:var(--f-serif);font-weight:600;font-size:3.2em;float:left;
  line-height:.82;padding-right:.12em;color:var(--orange);
}
.histoire__slogan{
  font-family:var(--f-serif);font-style:italic;font-weight:470;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.35;
  margin:34px 0 10px;color:var(--encre);
}
.histoire__slogan b{color:var(--orange);font-weight:520}
.frise{border-left:1px solid rgba(21,19,16,.18);padding-left:34px;display:flex;flex-direction:column;gap:38px}
.jalon{position:relative}
.jalon::before{
  content:"";position:absolute;left:-38px;top:8px;width:7px;height:7px;
  background:var(--orange);transform:rotate(45deg);
}
.jalon__date{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.26em;color:#7A5D28;text-transform:uppercase}  /* or assombri : 5,06:1 sur ivoire (4,22 avec #8a6a2d) */
.jalon__titre{font-weight:800;font-stretch:110%;font-size:1.1rem;text-transform:uppercase;margin:8px 0 8px}
.jalon__txt{font-size:.93rem;color:#4a453b;max-width:44ch}

/* ------------------------------------------------------------------ avis */
.avis__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.avis-carte{
  border:1px solid var(--ligne);background:var(--carbone);
  padding:34px 30px;display:flex;flex-direction:column;gap:20px;
  transition:border-color .25s ease,transform .25s ease;
}
.avis-carte:hover{border-color:var(--or-30);transform:translateY(-4px)}
.avis-carte__etoiles{color:var(--or);letter-spacing:.28em;font-size:.8rem}
.avis-carte__txt{
  font-family:var(--f-serif);font-style:italic;font-weight:430;
  font-size:1.02rem;line-height:1.65;color:var(--ivoire);flex:1;
}
.avis-carte__auteur{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}

/* --------------------------------------------------------------- contact */
.contact__grille{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,90px);align-items:start;
}
.plaque{
  background:linear-gradient(155deg,#23262c,#191b1f 60%);
  border:1px solid var(--ligne);
  box-shadow:inset 0 1px 0 rgba(241,235,221,.06),0 24px 60px rgba(0,0,0,.45);
  padding:44px 42px;position:relative;
}
.plaque::before,.plaque::after,
.plaque .rivet-a,.plaque .rivet-b{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d7cdb8,#6f695c 65%,#3c382f);
}
.plaque::before{top:12px;left:12px}
.plaque::after{top:12px;right:12px}
.plaque .rivet-a{bottom:12px;left:12px}
.plaque .rivet-b{bottom:12px;right:12px}
.plaque__titre{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--or);border-bottom:1px solid var(--ligne);padding-bottom:18px;margin-bottom:10px;
}
.plaque__ligne{
  display:grid;grid-template-columns:120px 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid rgba(38,41,47,.7);
  align-items:baseline;
}
.plaque__ligne dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.plaque__ligne dd{font-family:var(--f-mono);font-size:.95rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;overflow-wrap:break-word;min-width:0}
.plaque__ligne dd a:hover{color:var(--orange)}
.plaque__ligne dd .off{color:var(--gris-f)}
.contact__droite .lede{margin-bottom:38px}
.horaires{margin-top:8px}
.horaires .plaque__ligne{grid-template-columns:150px 1fr}

/* ---------------------------------------------------------------- footer */
.footer{border-top:1px solid var(--ligne);padding:64px 0 40px;background:var(--noir)}
.footer__grille{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.85fr));gap:44px}
.footer__marque p{color:var(--gris);font-size:.9rem;max-width:34ch;margin-top:18px}
.footer h3,.footer h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:20px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer ul a{color:var(--gris);font-size:.92rem;transition:color .2s ease}
.footer ul a:hover{color:var(--ivoire)}
.footer__legal{
  margin-top:56px;padding-top:26px;border-top:1px solid var(--ligne);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:var(--gris);
}
.footer__legal .disc{max-width:62ch;line-height:1.7}

/* ------------------------------------------------------------ animations
   (uniquement si JS présent : sans JS, tout reste visible) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.3,1)}
.js .reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

/* --------------------------------------------------------- pages internes */
.entete-page{
  padding:calc(var(--head-h) + clamp(70px,10vw,120px)) 0 clamp(56px,8vw,90px);
  background:
    radial-gradient(900px 420px at 80% 0%,rgba(232,93,38,.06),transparent 60%),
    var(--noir);
  border-bottom:1px solid var(--ligne);
}
.entete-page .h2{max-width:20ch}
.entete-page .lede{margin-top:26px}

/* formulaire */
.formulaire{display:grid;gap:22px;margin-top:12px}
.champ{display:flex;flex-direction:column;gap:9px}
.champ label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.champ input,.champ textarea,.champ select{
  background:var(--carbone);border:1px solid var(--ligne);color:var(--ivoire);
  font-family:var(--f-display);font-size:.98rem;padding:.95em 1.1em;
  transition:border-color .2s ease;border-radius:0;appearance:none;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--orange)}
.champ textarea{min-height:150px;resize:vertical}
.champ--2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ------------------------------------------------------------ pages légales
   Composant .texte-legal — ajouté pour mentions-legales / confidentialite.
   Même langage que .article-modele (prose grise, 1.8 d'interligne) mais avec
   une hiérarchie de titres : numérotation mono/or en marge, hairline or sous
   chaque h2, listes à puce orange. Aucun angle arrondi, aucune couleur hors
   palette. Voir aussi .sommaire-legal (table des matières en plaque). */
/* grille légale : prose large + sommaire étroit */
.contact__grille--legal{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr)}
@media (max-width:880px){.contact__grille--legal{grid-template-columns:1fr}}
.texte-legal{max-width:780px}
.texte-legal h2{
  font-family:var(--f-display);font-size:var(--t-h3);font-weight:800;font-stretch:112%;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.2;
  margin:3.2em 0 0;padding-bottom:.7em;border-bottom:1px solid var(--or-30);
  display:flex;align-items:baseline;gap:18px;
}
.texte-legal h2:first-child{margin-top:0}
.texte-legal h2 .num{
  font-family:var(--f-mono);font-size:.68rem;font-weight:400;letter-spacing:.2em;
  color:var(--or);flex:0 0 auto;
}
.texte-legal h3{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gris);margin:2.4em 0 .9em;
}
.texte-legal p{margin-top:1.25em;color:var(--gris);line-height:1.8}
.texte-legal p strong{color:var(--ivoire);font-weight:600}
.texte-legal a{color:var(--or);text-decoration:underline;text-underline-offset:.25em}
.texte-legal a:hover{color:var(--orange)}
.texte-legal ul{list-style:none;margin:1.25em 0 0;padding:0}
.texte-legal li{
  position:relative;padding-left:26px;margin-bottom:.75em;
  color:var(--gris);line-height:1.8;
}
.texte-legal li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--orange);
}
.texte-legal li strong{color:var(--ivoire);font-weight:600}
.texte-legal .maj{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-top:3.4em;padding-top:20px;border-top:1px solid var(--ligne);
}
/* table des matières — plaque compacte, colonne de droite */
.sommaire-legal{position:sticky;top:calc(var(--head-h) + 28px)}
.sommaire-legal ol{list-style:none;margin:0;padding:0;counter-reset:som}
.sommaire-legal li{counter-increment:som;border-bottom:1px solid var(--ligne)}
.sommaire-legal li:last-child{border-bottom:0}
.sommaire-legal a{
  display:flex;gap:14px;padding:.85em 0;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);transition:color .2s ease;
}
.sommaire-legal a::before{content:counter(som,decimal-leading-zero);color:var(--or);flex:0 0 auto}
.sommaire-legal a:hover{color:var(--orange)}
@media (max-width:880px){
  .sommaire-legal{position:static;margin-bottom:44px}
}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .familles{grid-template-columns:repeat(2,1fr)}
  .modeles{grid-template-columns:repeat(3,1fr)}
  .hero__illu{width:60vw;bottom:170px;opacity:0}
}
@media (max-width:880px){
  .nav{display:none}
  .burger{display:flex}
  /* minmax(0,…) et non 1fr : sinon la piste ne descend pas sous la
     largeur min-content et la page déborde horizontalement */
  .porsche__grille,.histoire__grille,.contact__grille{grid-template-columns:minmax(0,1fr)}
  .methode__etapes{grid-template-columns:1fr;gap:40px}
  .etape::after{display:none}
  .avis__grille{grid-template-columns:1fr;gap:18px}
  .footer__grille{grid-template-columns:1fr;gap:36px}
  .stock__tete{grid-template-columns:1fr}
  .cadrans{gap:22px}
  .champ--2{grid-template-columns:1fr}
  .hero__meta{display:none}
}
@media (max-width:560px){
  .familles{grid-template-columns:1fr}
  .modeles{grid-template-columns:repeat(2,1fr)}
  /* le NL est plus long que le FR (« onderdeel ») : on desserre le 13ch
     et on réduit un peu la taille pour qu’aucune langue ne soit rognée */
  .hero__titre{font-size:clamp(2.2rem,11.2vw,3.4rem);max-width:none}
  /* la baseline traduite (NL : « OLDTIMERS · PRESTIGE · LUIK ») poussait le
     bouton burger hors de l’écran : on laisse le bloc marque se rétrécir. */
  .header__in{gap:12px}
  .marque{gap:10px;min-width:0}
  .marque__txt{min-width:0;overflow:hidden}
  .marque__base{font-size:.5rem;letter-spacing:.18em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* la plaque passe en colonne : la colonne d'étiquette de 120/150/190 px
     ne laissait pas assez de place à la valeur sur un écran de 375 px */
  .plaque{padding:34px 26px}
  .plaque__ligne,.horaires .plaque__ligne,.fiche-technique .plaque__ligne{
    grid-template-columns:minmax(0,1fr);gap:6px;padding:13px 0;
  }
  .hero__illu{width:82vw;right:6vw;bottom:150px}
}

/* menu mobile plein écran */
.menu-mobile{
  position:fixed;inset:0;z-index:99;background:var(--noir);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(28px,8vw,60px);
  transform:translateY(-102%);transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.menu-mobile.ouvert{transform:none}
.menu-mobile a{
  font-weight:900;font-stretch:116%;text-transform:uppercase;
  font-size:clamp(2rem,8vw,3rem);line-height:1.3;color:var(--ivoire);
  transition:color .2s ease;
}
.menu-mobile a:hover{color:var(--orange)}
.menu-mobile .langues{margin-top:40px;margin-left:0}
.corps-fige{overflow:hidden}

/* ------------------------------------------------------------------- 404
   .page-404 — page d'erreur : le cadran de la maison, aiguille à zéro.
   Réutilise .cadran (dessiné par main.js) et .entete-page, rien de neuf. */
.page-404{
  min-height:100svh;display:flex;align-items:center;border-bottom:0;
}
.page-404 .container{text-align:center;max-width:760px}
.page-404 .eyebrow{justify-content:center}
.page-404 .lede{margin:26px auto 0}
.page-404 .cadrans{margin-bottom:48px}
.page-404 .cadran svg{width:clamp(150px,22vw,215px)}
.page-404 .hero__cta{justify-content:center;margin-top:44px;animation:none;opacity:1}