/* ============================================================
   PRÉPARATEUR.E46 — LE FIL
   Une seule page : le haut de page, cinq zones, la sortie.
   ============================================================ */

/* Le fil occupe toute la largeur : le dégradé doit toucher les bords, sinon on
   voit le fond du thème parent dépasser sur les côtés. */
.pe-fil{
  margin:0;
  padding:0;
  overflow-x:clip;          /* ceinture : aucune ombre ou badge ne peut faire défiler la page en largeur */
}


/* ── LE HAUT DE PAGE ──────────────────────────────────────────────────────── */

.pe-tete{
  padding:clamp(3rem, 9vh, 6.5rem) clamp(1.15rem, 5vw, 3.5rem) clamp(2.5rem, 6vh, 4rem);
  max-width:1180px;
  margin-inline:auto;
  text-align:center;
}

.pe-tete h1{
  margin:.35em 0 .5em;
  /* Le nom de la maison est la plus grande chose de la page — mais il reste dans
     sa colonne : un titre qui touche les bords sur mobile paraît accidentel. */
  max-width:14ch;
  margin-inline:auto;
}

.pe-tete-phrase{
  margin:0 auto clamp(2rem, 5vh, 3rem);
  font-size:clamp(1.02rem, 1.5vw, 1.18rem);
}
.pe-tete-phrase strong{ color:var(--pe-encre); font-weight:600; }


/* ── LA LIGNE DES MOTORISATIONS ───────────────────────────────────────────────
   Sa forme dit « série » : des plaques métalliques alignées, séparées par le
   point médian qui était déjà dans le hero de Florient. Chacune est un vrai
   bouton — c'est tout l'objet du changement. */

.pe-gamme{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  max-width:940px;
  margin-inline:auto;
}

.pe-gamme-lien{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1rem;
  min-width:5.6rem;
  padding:.62rem .9rem .55rem;
  text-decoration:none !important;
  color:inherit;
  border:1px solid rgba(201,148,14,.34);
  border-radius:10px;
  background:linear-gradient(168deg,
              rgba(255,255,255,.10) 0%,
              rgba(0,0,0,.06) 60%,
              rgba(0,0,0,.12) 100%);
  /* Le relief : une tranche solide en bas, comme un vrai bouton qu'on enfonce. */
  box-shadow:0 3px 0 var(--pe-or-sombre),
             0 8px 18px rgba(0,0,0,.22),
             inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-1px);
  transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.pe-gamme-lien:hover,
.pe-gamme-lien:focus-visible{
  transform:translateY(-3px);
  border-color:var(--pe-or);
  box-shadow:0 5px 0 var(--pe-or-sombre),
             0 12px 24px rgba(0,0,0,.28),
             inset 0 1px 0 rgba(255,255,255,.3);
}
/* Au clic il s'enfonce vraiment : la tranche disparaît sous le bouton. */
.pe-gamme-lien:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--pe-or-sombre),
             0 3px 8px rgba(0,0,0,.3),
             inset 0 1px 0 rgba(255,255,255,.12);
}

.pe-gamme-lien .pe-modele{ color:var(--pe-or); }
.pe-gamme-moteur{
  font-family:'Barlow', sans-serif;
  font-size:.66rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.62;
  white-space:nowrap;
}

/* En bas de page la même ligne porte les accroches, pas les références moteur :
   des phrases entières, donc on passe en colonne pour qu'elles respirent. */
.pe-gamme--bas{ max-width:700px; }
.pe-gamme--bas .pe-gamme-lien{
  flex-direction:row;
  align-items:baseline;
  gap:.7rem;
  width:100%;
  min-width:0;
  text-align:left;
  padding:.7rem 1rem;
}
.pe-gamme--bas .pe-modele{ min-width:2.6rem; }
.pe-gamme--bas .pe-gamme-moteur{
  white-space:normal;
  text-transform:none;
  letter-spacing:0;
  font-size:.9rem;
  opacity:.8;
}


/* ── LA SIGNATURE DE CARÈNE ───────────────────────────────────────────────────
   Deux apparitions sur toute la page, et elles doivent rester des ASIDES : plus
   petites que le texte courant, en italique, décalées. Si elles pèsent autant
   que le reste, le sous-entendu devient une annonce — et l'effet se retourne. */

/* Décalée sur la DROITE, pas centrée : c'est ainsi qu'on signe une lettre, et
   c'est ce décalage qui fait qu'on lit une personne plutôt qu'un slogan de plus.
   `margin-inline: auto <marge>` pousse le bloc à droite tout en lui laissant un
   peu d'air contre le bord — collé au bord, l'effet devient un accident de mise
   en page. La marge se réduit d'elle-même sur téléphone. */
.pe-signature-tete,
.pe-signature-bas{
  max-width:34ch;
  margin-block:1.4rem 0;
  margin-inline:auto clamp(.25rem, 5vw, 3.5rem);
  text-align:right;
  font-size:.94rem;
  font-style:italic;
  line-height:1.5;
  opacity:.82;
  text-wrap:pretty;   /* évite la dernière ligne réduite à un seul mot */
}
/* L'écart sous la signature du haut est plus grand que celui du dessus : sans
   lui, le nom « CARÈNE » tombe juste au-dessus des plaques de motorisation et se
   lit comme leur titre. Un aparté doit être isolé des deux côtés, sinon il
   s'attache à ce qui le suit. */
.pe-signature-tete{ margin-bottom:clamp(2rem, 4.5vh, 3rem); }
.pe-signature-bas{ margin-top:1.8rem; }

/* Le nom sur sa propre ligne, en or, en petites capitales espacées : c'est une
   signature au bas d'une lettre, pas un logo. */
.pe-signature-nom{
  display:block;
  margin-top:.45rem;
  font-family:'Barlow Condensed', sans-serif;
  font-style:normal;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--pe-or);
}
/* Sur fond clair, l'or pur manque de contraste : on le fonce juste ce qu'il faut
   pour rester lisible sans changer de couleur. */
.pe-zone--clair .pe-signature-nom{ color:var(--pe-or-sombre); }


/* ── LE GARAGE : « ma E46 » ───────────────────────────────────────────────────
   Posé haut, avant les produits : une compatibilité annoncée AVANT le choix
   évite un retour ; annoncée après, elle ne fait qu'annuler une envie.
   Une fois rempli, il se replie en une seule ligne — il a fait son travail, il
   ne doit plus prendre la place d'un produit. */

.pe-garage{
  max-width:620px;
  margin:clamp(2.2rem, 5vh, 3.2rem) auto 0;
  padding:1.1rem 1.25rem 1.25rem;
  text-align:left;
  border:1px solid rgba(201,148,14,.34);
  border-radius:14px;
  background:linear-gradient(172deg, rgba(20,22,26,.9) 0%, rgba(10,10,11,.95) 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--pe-blanc);
}

.pe-garage-invite{
  margin:0 0 .9rem;
  font-size:.93rem;
  line-height:1.5;
  color:var(--pe-blanc-doux) !important;
}
.pe-garage-invite .pe-oeil{ display:block; margin-bottom:.3rem; }

.pe-garage-champs{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.7rem;
}
.pe-champ{ display:flex; flex-direction:column; gap:.28rem; flex:1 1 8.5rem; min-width:0; }
.pe-champ > span{
  font-family:'Barlow Condensed', sans-serif;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pe-or);
}
.pe-champ select{
  width:100%;
  /* 44 px de haut au minimum : en dessous, une liste déroulante se rate au
     pouce sur téléphone, et c'est là que la majorité du trafic arrive. */
  min-height:44px;
  padding:.5rem .7rem;
  border:1px solid rgba(243,243,243,.22);
  border-radius:9px;
  background:var(--pe-fonte);
  color:var(--pe-blanc);
  font-family:'Barlow', sans-serif;
  font-size:.95rem;
}
.pe-champ select:focus-visible{
  outline:2px solid var(--pe-or);
  outline-offset:2px;
}
.pe-garage-champs .pe-bouton{ min-height:44px; flex:0 0 auto; }

/* Une fois rempli : une ligne, un rappel, et le moyen de se corriger. */
.pe-garage--rempli{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem 1rem;
  padding:.85rem 1.1rem;
}
.pe-garage-resume{ margin:0; font-size:1rem; color:var(--pe-blanc) !important; }
.pe-garage-resume .pe-oeil{ margin-right:.4rem; }
.pe-garage-phase{
  margin-left:.4rem;
  padding:.12rem .5rem;
  border-radius:99px;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pe-or);
  border:1px solid rgba(201,148,14,.4);
}
.pe-garage-note{
  flex:1 1 100%;
  margin:0;
  font-size:.82rem;
  color:var(--pe-blanc-doux) !important;
}
/* « Changer de voiture » est un vrai bouton, pas un lien déguisé — mais discret :
   c'est une correction, pas une action qu'on cherche à provoquer. */
.pe-garage-changer{
  margin-left:auto;
  padding:.35rem .7rem;
  border:1px solid rgba(243,243,243,.24);
  border-radius:8px;
  background:transparent;
  color:var(--pe-blanc-doux);
  font-family:'Barlow Condensed', sans-serif;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.pe-garage-changer:hover{ border-color:var(--pe-or); color:var(--pe-or-clair); }


/* ── LE VERDICT DE COMPATIBILITÉ SUR UNE CARTE ────────────────────────────────
   La couleur double toujours un mot : quelqu'un qui distingue mal le vert du
   rouge doit lire la même information. Jamais la couleur seule. */

.pe-compat{
  margin:0;
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.82rem;
  font-weight:600;
  line-height:1.3;
}
.pe-compat::before{
  content:"";
  flex:0 0 auto;
  width:.5rem; height:.5rem;
  border-radius:50%;
}
.pe-compat--oui{ color:var(--pe-confiance) !important; }
.pe-compat--oui::before{ background:var(--pe-confiance); }

.pe-compat--verifier{ color:var(--pe-alerte) !important; }
.pe-compat--verifier::before{ background:var(--pe-alerte); }

.pe-compat--non{ color:var(--pe-refus) !important; }
.pe-compat--non::before{ background:var(--pe-refus); }


/* ── UNE ZONE ─────────────────────────────────────────────────────────────── */

.pe-zone{
  padding:clamp(2.6rem, 7vh, 5rem) clamp(1.15rem, 5vw, 3.5rem);
  max-width:1320px;
  margin-inline:auto;
}

.pe-zone-tete{
  max-width:640px;
  margin-bottom:clamp(1.6rem, 3.5vh, 2.4rem);
}
.pe-zone-tete h2{ margin:.28em 0 .45em; }
.pe-zone-promesse{ font-size:clamp(.99rem, 1.3vw, 1.08rem); margin:0; }

/* La plaque de zone : chaque catégorie s'englobe du même cadre gris clair,
   façon tôle d'atelier — les tons --pe-tole/--pe-alu déjà présents dans le
   dégradé du fil, pas le châssis rivetée de Gravano (hors-sujet ici, cf.
   palette.css). Traitement identique sur toutes les zones, qu'elles soient
   --clair ou --sombre.
   ⚠️ Essayé et abandonné (31/07, Florient) : englober TOUTE la zone (texte +
   grille) plutôt que le seul texte. Résultat : sur toute la hauteur de page,
   la plaque couvre trop de terrain et écrase le dégradé de fond que le fil
   est censé raconter (tôle → nuit). Décision : la plaque reste sur le seul
   bandeau de titre, PARTOUT (desktop et mobile identiques) — les produits
   restent posés sur le dégradé du fil, qui doit rester visible entre eux. */
.pe-zone-tete{
  padding:clamp(1.5rem, 3.4vw, 2.1rem) clamp(1.6rem, 4.2vw, 2.4rem);
  border-radius:16px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(160deg, var(--pe-tole) 0%, var(--pe-alu) 55%, #9198a0 100%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.16);
  color:var(--pe-encre) !important;
}
.pe-zone-tete .pe-zone-promesse{ color:var(--pe-encre-doux) !important; }
/* L'or plein (--pe-or) est fait pour porter sur du sombre : sur la plaque
   claire, en plus écrasé par le reflet juste à cet endroit, il devenait
   illisible. --pe-or-sombre est le même or, mais foncé pour porter sur du
   clair — c'est déjà l'usage prévu par palette.css pour ce cas précis. */
.pe-zone-tete .pe-oeil{ color:var(--pe-or-sombre); }

/* ── LA ZONE DRIFT — plaque à part, hors gradient tôle→noir (01/08) ──────────
   Les cinq zones "atelier" partagent la même plaque grise, façon tôle. Drift
   est l'exception assumée : la plaque devient un dégradé feu/braise (mêmes
   proportions, même relief — juste la matière change), pour qu'on sente la
   rupture de ton avant même d'avoir lu le titre. */
.pe-zone--drift .pe-zone-tete{
  background:
    linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%),
    linear-gradient(160deg, var(--pe-feu) 0%, var(--pe-feu-sombre) 55%, var(--pe-braise) 100%);
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 46px var(--pe-feu-voile),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.4);
  color:var(--pe-blanc) !important;
}
.pe-zone--drift .pe-zone-tete .pe-zone-promesse{ color:var(--pe-blanc-doux) !important; }
.pe-zone--drift .pe-zone-tete .pe-oeil{ color:var(--pe-feu-clair); letter-spacing:.16em; }
.pe-zone--drift .pe-zone-tete h2{ color:var(--pe-blanc) !important; }
/* La carte produit reprend l'accent feu au survol, discrètement — jamais en
   aplat, cf. la règle du groupe sur les lueurs de couleur (une pointe, pas un
   bain). */
.pe-zone--drift .pe-carte:hover{ box-shadow:0 0 0 1px var(--pe-feu-voile), 0 18px 40px rgba(0,0,0,.4); }
.pe-zone--drift .pe-prix{ color:var(--pe-feu-clair) !important; }


/* ── LA GRILLE DE PRODUITS ────────────────────────────────────────────────────
   auto-fill plutôt qu'un nombre de colonnes fixe : la grille se remplit d'elle
   même selon la place, donc aucun media query à maintenir, et jamais de
   colonne orpheline étirée sur toute la largeur. */

.pe-grille{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
  gap:clamp(.85rem, 1.8vw, 1.4rem);
}


/* ── LA CARTE PRODUIT ─────────────────────────────────────────────────────── */

.pe-carte{
  position:relative;              /* ancre le lien qui couvre toute la carte */
  display:flex;
  flex-direction:column;
  border:1px solid rgba(201,148,14,.2);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(174deg, var(--pe-anthracite) 0%, var(--pe-noir) 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pe-carte:hover{
  transform:translateY(-3px);
  border-color:rgba(201,148,14,.5);
  box-shadow:0 16px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Le lien qui couvre TOUTE la carte. Son libellé est là pour les lecteurs
   d'écran uniquement : visuellement c'est le titre qui le porte. On ne le cache
   pas avec display:none, qui le retirerait aussi de l'accessibilité. */
.pe-carte-lien{
  position:absolute;
  inset:0;
  z-index:2;
  text-decoration:none !important;
}
.pe-carte-lien-texte{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.pe-carte-media{
  position:relative;
  aspect-ratio:1/1;
  background:#fff;               /* les visuels produits arrivent sur fond blanc */
  display:grid;
  place-items:center;
  overflow:hidden;
}
.pe-carte-image{
  width:100%; height:100%;
  object-fit:contain;             /* jamais couper une pièce pour remplir un cadre */
  padding:6%;
  transition:transform .35s ease;
}
.pe-carte:hover .pe-carte-image{ transform:scale(1.04); }

.pe-carte-etat{
  position:absolute;
  inset-inline:0; bottom:0;
  padding:.4rem;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pe-blanc);
  background:rgba(10,10,11,.86);
}

.pe-carte-corps{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  flex:1;
  padding:.95rem 1rem 1rem;
}
.pe-carte-nom{
  margin:0;
  font-size:1.06rem;
  line-height:1.16;
  color:var(--pe-blanc);
}
.pe-carte-resume{
  margin:0;
  font-size:.86rem;
  line-height:1.45;
  color:var(--pe-blanc-doux);
}

/* Le pied de carte est poussé en bas : les prix s'alignent d'une carte à
   l'autre même quand les noms font une ou trois lignes. */
.pe-carte-pied{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding-top:.35rem;
}
.pe-carte-pied .pe-prix{ font-size:1.22rem; }

/* Le bouton doit passer AU-DESSUS du lien qui couvre la carte, sinon il est
   inatteignable — le piège classique de la carte entièrement cliquable. */
.pe-carte-pied .pe-bouton{ position:relative; z-index:3; }


/* ── LA FIN DU FIL ────────────────────────────────────────────────────────── */

.pe-bas{
  text-align:center;
  padding-bottom:clamp(3.5rem, 9vh, 6rem);
}
.pe-bas h2{ margin:.3em auto .6em; max-width:24ch; }
.pe-bas .pe-lecture{ margin:0 auto clamp(1.8rem, 4vh, 2.6rem); }
.pe-bas .pe-gamme--bas .pe-gamme-lien{ text-align:left; }


/* ── MOBILE ──────────────────────────────────────────────────────────────────
   Une seule règle, en un seul endroit. Sur Gravano, cinq blocs mobiles
   contradictoires s'étaient empilés à force de retouches successives, chacun en
   !important, et toute modification ailleurs était silencieusement écrasée.
   ⚠️ Toute retouche mobile du fil se fait ICI, jamais en ajoutant un bloc. */
@media (max-width:760px){

  /* Deux colonnes plutôt qu'une : sur une boutique d'accessoires, voir deux
     articles à la fois donne l'idée du choix. Une seule colonne fait défiler
     longtemps pour peu de produits. */
  .pe-grille{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.55rem;
  }
  .pe-carte-corps{ padding:.6rem .7rem .7rem; gap:.3rem; }
  .pe-carte-nom{ font-size:.94rem; }
  .pe-carte-resume{ display:none; }   /* à cette taille, le nom et le prix suffisent */
  .pe-carte-pied{ flex-direction:column; align-items:stretch; gap:.4rem; }
  .pe-carte-pied .pe-prix{ font-size:1.1rem; text-align:center; }

  /* Image un peu plus courte (4/3 au lieu de 1/1) : gain de compacité général
     sur la grille en deux colonnes, indépendant du choix de plaque ci-dessus
     (contain ne recadre rien, l'image reste entière). */
  .pe-carte-media{ aspect-ratio:4/3; }

  /* Les badges de motorisation tiennent sur deux lignes de quatre plutôt que
     de se rétrécir jusqu'à devenir illisibles. */
  .pe-gamme{ gap:.4rem; }
  .pe-gamme-lien{ min-width:4.3rem; padding:.5rem .55rem .45rem; }
  .pe-gamme-moteur{ font-size:.58rem; }

  .pe-tete{ padding-top:clamp(2rem, 6vh, 3rem); }
  .pe-tete h1{ max-width:none; }
}

/* Certaines personnes règlent leur système pour supprimer les animations —
   souvent parce qu'elles leur donnent le mal des transports. On respecte. */
@media (prefers-reduced-motion:reduce){
  .pe-carte, .pe-carte-image, .pe-gamme-lien{ transition:none; }
  .pe-carte:hover{ transform:none; }
  .pe-carte:hover .pe-carte-image{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÉTRO-ÉCLAIRAGE DU FIL — posé le 22/08/2026 (demande Florient : « le fil de
   la boutique est trop sombre, essaye de le rétro-éclairer, avec des endroits
   en finition matelassée comme les tapis »).

   ⚠ CE QUE LE DIAGNOSTIC A TROUVÉ, et qui n'était pas une affaire de goût :
   le dégradé « tôle → nuit » que ce fichier décrit depuis le début n'avait
   JAMAIS été écrit. `.pe-fil` ne portait que des marges ; toute la page reposait
   sur un `body` à rgb(18,20,23) — une luminance de 20 sur 255, du haut au bas.
   D'où l'impression de tunnel : huit zones censées descendre de la lumière vers
   la nuit s'affichaient toutes sur le même noir.

   ⚠ POURQUOI ON N'ÉCLAIRCIT PAS SIMPLEMENT LE FOND :
   monter le noir vers le gris délave tout et casse le contraste des textes
   blancs. Ce qui fait « éclairé », ce ne sont pas des fonds plus clairs, ce sont
   des SOURCES : des halos chauds derrière les éléments, comme le contre-jour du
   clip. On monte donc modérément le niveau ET on pose des lumières.

   ⚠ Bloc placé EN TOUT BAS du fichier, à dessein. Leçon de Gravano payée cher :
   des réglages de fond empilés en plusieurs endroits finissent par se contredire
   en silence. Toute retouche de l'ambiance du fil se fait ICI, jamais ailleurs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LA DESCENTE, enfin réelle ─────────────────────────────────────────────
   Du métal éclairé en haut à l'habitacle de nuit en bas. `fixed` : le dégradé
   appartient à la page entière, il ne se répète pas d'une zone à l'autre. */
body.home,
body.page-template-template-fil{
  background-color:#22262B;
}
.pe-fil{
  position:relative;
  background:
    linear-gradient(180deg,
      #363B42 0%,      /* tôle sous la lumière — le regard */
      #2B3037 18%,
      #23272C 42%,     /* l'habitacle */
      #1A1D21 68%,
      #131518 86%,
      #0C0D0F 100%)    /* la route, de nuit */
    fixed;
}

/* ── 2. LE CAPITONNÉ — le décor répète le produit ─────────────────────────────
   Losanges et points de couture, en CSS pur : aucune image à charger, et le
   motif s'adapte à toutes les largeurs. Volontairement DISCRET (opacités sous
   6 %) — un capitonnage trop lisible ferait nappe de restaurant, pas sellerie.
   Il n'habille que les zones hautes, là où la lumière permet de le voir. */
.pe-zone--clair{
  position:relative;
  isolation:isolate;
}
.pe-zone--clair::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 64px),
    radial-gradient(circle at 0 0, rgba(201,148,14,.16) 0 1.6px, transparent 2.2px);
  background-size:auto, auto, 64px 64px;
  background-position:0 0, 0 0, 32px 32px;
  /* Le capitonnage s'estompe en descendant : la sellerie s'enfonce dans l'ombre. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* ── 3. LE CONTRE-JOUR — la lumière vient de derrière ─────────────────────────
   Un halo chaud large et très diffus derrière chaque tête de zone, exactement
   ce que fait le mur rétro-éclairé du clip. C'est ça qui donne la sensation
   d'éclairage, pas un fond plus pâle. */
.pe-zone{
  position:relative;
}
.pe-zone::after{
  content:'';
  position:absolute;
  z-index:-2;
  pointer-events:none;
  left:50%;
  top:0;
  width:min(1100px, 130%);
  height:340px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%,
              rgba(201,148,14,.20) 0%,
              rgba(201,148,14,.09) 38%,
              transparent 72%);
  filter:blur(6px);
}
/* La zone Drift garde SA lumière : elle est rouge braise, pas dorée. */
.pe-zone--drift::after{
  background:radial-gradient(ellipse at 50% 0%,
              rgba(226,67,63,.20) 0%,
              rgba(226,67,63,.08) 40%,
              transparent 72%);
}

/* ── 4. LES CARTES SE DÉTACHENT ───────────────────────────────────────────────
   Sur un fond éclairé, une carte noire sans halo paraît collée. On lui donne le
   même traitement qu'à une pièce posée sous une lampe : une lueur au sol. */
.pe-carte{
  box-shadow:
    0 10px 26px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.pe-carte:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,.5),
    0 0 26px rgba(201,148,14,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* ── 5. LE HAUT DE PAGE, éclairé pour de bon ──────────────────────────────────
   C'est la première chose qu'on voit : elle doit annoncer une boutique allumée,
   pas un garage fermé. */
.pe-tete{
  position:relative;
}
.pe-tete::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:-8% -10% 20%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 28%,
              rgba(255,255,255,.10) 0%,
              rgba(201,148,14,.10) 32%,
              transparent 68%);
}

/* ⚠ Sur un écran où l'utilisateur a demandé moins d'animation, les halos
   restent : ils ne bougent pas. Rien à neutraliser ici — on le note pour que
   personne n'ajoute plus tard une pulsation sans y penser. */