/* ============================================================
   Picsoucar DXB — design system partagé (accueil + expériences)
   Palette : noir profond + or champagne. Ne pas dévier.
   ============================================================ */

/* ---------- Polices auto-hébergées ----------
   Playfair Display 600/700 + Montserrat 400/500/600/700, latin + latin-ext.
   Auto-hébergées pour supprimer la feuille CSS tierce render-blocking
   et les deux connexions vers fonts.googleapis.com / fonts.gstatic.com. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/PlayfairDisplay-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --pc-bg:        #0A0A0A;
  --pc-panel:     #141311;
  --pc-panel-alt: #0d0c0a;
  --pc-gold:      #C9A24B;
  --pc-gold-lt:   #E8C97D;
  --pc-text:      #F5F1E8;
  --pc-soft:      #cfc8b8;
  --pc-muted:     #9a917f;
  --pc-wa:        #25D366;

  /* Rayon d'image unique, appliqué partout */
  --pc-radius:    10px;

  /* Rythme vertical — la respiration fait le luxe */
  --pc-section:   112px;
  --pc-section-sm: 72px;
}

/* ---------- Échelle typographique unifiée ---------- */
.pc-kicker {
  color: var(--pc-gold);
  font-size: 12px;
  letter-spacing: .34em;      /* letter-spacing appuyé sur les sur-titres dorés */
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.pc-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 22px;
  letter-spacing: -.01em;
}
.pc-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.18;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.005em;
}
.pc-h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 14px;
}
.pc-lead  { color: var(--pc-soft); line-height: 1.85; font-size: 15px; margin: 0 0 16px; }
.pc-rule  { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--pc-gold), transparent); margin: 20px auto 0; }
.pc-sect  { padding-top: var(--pc-section); padding-bottom: var(--pc-section); }

/* ---------- Révélation au scroll (une seule fois, discrète) ---------- */
.pc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.pc-reveal.pc-in { opacity: 1; transform: none; }

/* ---------- Boutons ---------- */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 48px;              /* tap target confortable ≥ 44px */
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;              /* borne le sheen */
  transition: filter .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pc-btn-gold {
  background: linear-gradient(135deg, var(--pc-gold-lt), var(--pc-gold));
  color: #14100a;
  border: none;
}
.pc-btn-wa {
  background: var(--pc-wa);
  color: #062b16;
  border: none;
}
.pc-btn-ghost {
  border: 1px solid var(--pc-gold);
  color: var(--pc-gold-lt);
  background: transparent;
}
.pc-btn-ghost:hover { background: rgba(201,162,75,.12); color: var(--pc-gold-lt); }
.pc-btn-gold:hover, .pc-btn-wa:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Sheen : une brillance traverse le bouton au survol */
.pc-btn-gold::after, .pc-btn-wa::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.pc-btn-gold:hover::after, .pc-btn-wa:hover::after {
  opacity: 1;
  animation: pcSheen .75s ease forwards;
}
@keyframes pcSheen {
  from { left: -60%; }
  to   { left: 130%; }
}

/* ---------- Cartes ---------- */
.pc-card {
  background: var(--pc-panel);
  border: 1px solid rgba(201,162,75,.28);
  border-radius: var(--pc-radius);
  overflow: hidden;
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.pc-card:hover {
  border-color: rgba(201,162,75,.85);
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 0 1px rgba(201,162,75,.18);
  transform: translateY(-5px);
}
/* Zoom doux de l'image au survol de la carte */
.pc-card .pc-zoom { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.pc-card:hover .pc-zoom { transform: scale(1.03); }

/* ---------- Images : rayon cohérent + vignettage unificateur ---------- */
.pc-img {
  border-radius: var(--pc-radius);
  overflow: hidden;
  position: relative;
}
.pc-img::after {              /* vignette : harmonise des photos de luminosités différentes */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
}
image-slot { border-radius: var(--pc-radius); overflow: hidden; }

/* ---------- Header : transparent en haut, opaque une fois scrollé ---------- */
.pc-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.pc-header.pc-scrolled {
  background: rgba(10,10,10,.94);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(201,162,75,.45);
}
.pc-navlink {
  color: var(--pc-text);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding-bottom: 3px;
  transition: color .3s ease;
}
.pc-navlink::after {          /* soulignement or qui se déploie */
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--pc-gold);
  transition: width .35s ease;
}
.pc-navlink:hover { color: var(--pc-gold); }
.pc-navlink:hover::after, .pc-navlink.pc-active::after { width: 100%; }
.pc-navlink.pc-active { color: var(--pc-gold); }

/* ---------- Footer ---------- */
.pc-social {
  color: var(--pc-soft);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  transition: color .3s ease, transform .3s ease;
}
.pc-social svg { fill: currentColor; flex-shrink: 0; transition: fill .3s ease; }
.pc-social:hover { color: var(--pc-gold); transform: translateX(3px); }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .pc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pc-btn-gold::after, .pc-btn-wa::after { display: none; }
  .pc-card:hover { transform: none; }
  .pc-card .pc-zoom, .pc-card:hover .pc-zoom { transition: none; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --pc-section: 76px; --pc-section-sm: 52px; }
}
@media (max-width: 700px) {
  .pc-btn { width: 100%; }              /* CTA pleine largeur */
  .pc-stack { grid-template-columns: 1fr !important; }
  .pc-stack .pc-media { order: -1 !important; }   /* image toujours au-dessus du texte */
  .pc-stack .pc-media { min-height: 0 !important; aspect-ratio: 16 / 9; }  /* images 16:9 en pile */
}

/* Cibles tactiles ≥ 44px sur mobile (liens de footer, sélecteur de langue) */
@media (max-width: 900px) {
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  header button { min-height: 44px; min-width: 44px; }
  .pc-social { min-height: 44px; }
  .pc-cat-tab { min-height: 44px; }
  /* CTA internes des cards flotte (Réserver + icône WhatsApp) */
  .pc-card a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ============================================================
   Composants React Bits — CSS embarqué ici plutôt qu'en imports
   séparés : le runtime ne résout pas les `import './X.css'`.
   ============================================================ */

/* ---------- ShinyText ---------- */
.shiny-text { display: inline-block; }

/* ---------- DepthText ---------- */
.depth-text {
  display: inline-block;
  perspective: var(--depth-text-perspective);
  perspective-origin: 50% 48%;
  isolation: isolate;
}
.depth-text__stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-2.4deg) rotateY(3.15deg);
  transform-origin: 50% 50%;
  will-change: transform;
}
.depth-text__layer,
.depth-text__face {
  grid-area: 1 / 1;
  display: inline-block;
  font-family: 'Playfair Display', serif;   /* aligné sur la DA du site */
  font-size: var(--depth-text-font-size);
  font-weight: var(--depth-text-font-weight);
  line-height: 0.92;
  letter-spacing: -0.02em;                  /* moins serré que l'original, plus lisible en français */
  white-space: nowrap;
  user-select: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}
.depth-text__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: saturate(0.95) brightness(0.92);
  pointer-events: none;
}
.depth-text__face {
  position: relative;
  z-index: 1;
  color: var(--depth-text-face-color);
  text-shadow: var(--depth-text-shadow);
  transform: translateZ(0.6px);
}
/* Le titre est long en FR/AR : on autorise le retour à la ligne sous 900px */
@media (max-width: 900px) {
  .depth-text__layer, .depth-text__face { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-text__stage { will-change: auto; transform: none; }
}

/* ---------- SpecularButton ---------- */
.specular-button {
  position: relative;
  isolation: isolate;
  overflow: visible;          /* le halo déborde du bouton */
}
.specular-button::after { display: none; }   /* neutralise le sheen CSS de .pc-btn */
.specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}
.specular-button__fx canvas { display: block; width: 100%; height: 100%; }
.specular-button__label { position: relative; z-index: 2; }

/* ============================================================
   Arabe : sens de lecture inversé
   ============================================================ */
[dir="rtl"] body { font-family: 'Noto Kufi Arabic', 'Montserrat', sans-serif; }
[dir="rtl"] .pc-kicker { letter-spacing: normal; }   /* l'arabe ne se laisse pas espacer */
[dir="rtl"] .pc-h1, [dir="rtl"] .pc-h2, [dir="rtl"] .pc-h3 { letter-spacing: normal; }
[dir="rtl"] .pc-navlink::after { left: auto; right: 0; }
[dir="rtl"] .pc-social:hover { transform: translateX(-3px); }
[dir="rtl"] .pc-btn { letter-spacing: normal; }

/* Le bouton flottant suit le sens de lecture */
[dir="rtl"] .pc-wa-float { right: auto !important; left: 26px !important; }

/* Le canvas ne participe jamais au dimensionnement de son bouton */
.specular-button__fx { position: absolute !important; }
.specular-button__fx canvas { display: block; width: 100%; height: 100%; max-width: none; }

/* ============================================================
   « Pourquoi nous choisir » — cartes à halo et anneau doré
   ============================================================ */
.pc-why-card {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 34px 18px 30px;
  border: 1px solid rgba(201,162,75,.22);
  border-radius: var(--pc-radius);
  background: linear-gradient(180deg, #141311 0%, #101010 100%);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              border-color .45s ease, box-shadow .45s ease;
}
/* Halo doré piloté par --mx/--my, mis à jour au survol sans re-rendu React */
.pc-why-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(201,162,75,.20), transparent 68%);
}
/* Filet doré qui balaie le haut de la carte */
.pc-why-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-gold), transparent);
  transform: scaleX(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.pc-why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,75,.7);
  box-shadow: 0 22px 48px rgba(0,0,0,.6);
}
.pc-why-card:hover::before { opacity: 1; }
.pc-why-card:hover::after  { transform: scaleX(1); }

.pc-why-num {
  position: absolute; top: 12px; right: 14px;
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700;
  color: rgba(201,162,75,.16);
  transition: color .45s ease;
  pointer-events: none;
}
.pc-why-card:hover .pc-why-num { color: rgba(201,162,75,.38); }

.pc-why-icon {
  position: relative;
  display: grid; place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  color: var(--pc-gold);
}
.pc-why-icon svg { position: relative; z-index: 1; transition: transform .45s ease; }
.pc-why-card:hover .pc-why-icon svg { transform: scale(1.08); }
/* Anneau statique */
.pc-why-icon::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,162,75,.35);
}
/* Anneau doré qui tourne au survol : dégradé conique masqué en couronne */
.pc-why-icon::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(transparent 0deg 250deg, var(--pc-gold) 320deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity .4s ease;
}
.pc-why-card:hover .pc-why-icon::before {
  opacity: 1;
  animation: pcRing 2.6s linear infinite;
}
@keyframes pcRing { to { transform: rotate(360deg); } }

.pc-why-title {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--pc-text); margin-bottom: 10px;
  /* Certains libellés passent sur deux lignes : on réserve la hauteur
     pour que les sous-titres restent alignés d'une carte à l'autre. */
  min-height: 2.4em;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.2;
}
.pc-why-sub { font-size: 12.5px; color: var(--pc-muted); line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  .pc-why-card, .pc-why-card:hover { transform: none; }
  .pc-why-card:hover .pc-why-icon::before { animation: none; }
  .pc-why-card::after { transition: none; }
}

/* ============================================================
   Débordement horizontal : une grille en 1fr ne descend jamais
   sous la taille min-content de son contenu. Un image-slot en
   aspect-ratio 3/2 avec une hauteur figée réclamait 510 px de
   large et bloquait la colonne, d'où 534 px de page sur un
   écran de 390. minmax(0,1fr) autorise la réduction.
   ============================================================ */
image-slot { max-width: 100%; }
.pc-about, .pc-exp-grid, .pc-why, .pc-footer, .pc-counters, .pc-booking, .pc-stack {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 901px) {
  .pc-about   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pc-counters, .pc-booking, .pc-footer { grid-template-columns: unset; }
  .pc-exp-grid, .pc-why, .pc-stack { grid-template-columns: unset; }
}

/* ============================================================
   Signature de marque en pied de page
   ============================================================ */
/* Le texte réel, lu par les lecteurs d'écran : DepthText empile ses
   couches en aria-hidden, il ne doit pas porter le nom à lui seul. */
.pc-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pc-signature { position: relative; overflow: hidden; }
/* Halo doré diffus derrière la signature */
.pc-signature::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: min(760px, 92%); height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(201,162,75,.16), transparent 70%);
  pointer-events: none;
}
.pc-signature-art {
  position: relative;
  display: flex; justify-content: center;
  line-height: 1;
}
/* Le nom est long : on autorise le retour à la ligne sur petits écrans */
@media (max-width: 760px) {
  .pc-signature-art .depth-text__layer,
  .pc-signature-art .depth-text__face { white-space: normal; text-align: center; }
}

/* ============================================================
   Hero d'accueil — voile, grain, repères
   ============================================================ */
/* Le voile précédent était un aplat uniforme : le texte se battait avec
   la photo du milieu. Il est maintenant dense sous la colonne de texte
   et s'ouvre franchement à droite pour laisser respirer les voitures. */
.pc-hero-scrim {
  background:
    linear-gradient(90deg,
      rgba(10,10,10,.95) 0%,
      rgba(10,10,10,.88) 26%,
      rgba(10,10,10,.55) 46%,
      rgba(10,10,10,.18) 68%,
      rgba(10,10,10,.10) 100%),
    linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.30) 28%, transparent 55%),
    linear-gradient(180deg, rgba(10,10,10,.75) 0%, transparent 22%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* Grain argentique : casse les aplats et donne une texture cinéma */
.pc-hero-grain {
  opacity: .05;
  mix-blend-mode: overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pastilles de réassurance : mêmes icônes que « Pourquoi nous choisir » */
.pc-reassure-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201,162,75,.45);
  background: rgba(201,162,75,.06);
  color: var(--pc-gold);
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.pc-reassure:hover .pc-reassure-ico {
  border-color: var(--pc-gold);
  background: rgba(201,162,75,.14);
  transform: translateY(-2px);
}

/* Repère de défilement : un trait doré qui descend en boucle */
.pc-scrollcue {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: 26px; height: 46px;
  display: grid; place-items: start center;
  border: 1px solid rgba(201,162,75,.4);
  border-radius: 999px;
  padding-top: 8px;
  z-index: 6;
  transition: border-color .35s ease;
}
.pc-scrollcue:hover { border-color: var(--pc-gold); }
.pc-scrollcue-line {
  width: 2px; height: 8px; border-radius: 2px;
  background: var(--pc-gold);
  animation: pcCue 1.9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes pcCue {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(18px); opacity: 0; }
}
@media (max-width: 900px) { .pc-scrollcue { display: none; } }
@media (prefers-reduced-motion: reduce) { .pc-scrollcue-line { animation: none; opacity: 1; } }

/* Le H1 du hero passait sur 4 lignes : légèrement réduit pour tenir en 3,
   la ligne dorée sur une seule ligne. */
.pc-hero-h1 { font-size: clamp(32px, 4.5vw, 53px); line-height: 1.12; }

/* La barre de réservation remonte de 76px sur le hero : le repère de
   défilement doit rester au-dessus d'elle. */
.pc-scrollcue { bottom: 122px; }

/* ============================================================
   Hero cinématique — les 3 voitures se succèdent en plein cadre
   Tout est en CSS : aucun état React, donc aucun re-rendu de la
   page toutes les quelques secondes.
   Cycle de 21 s = 3 plans de 7 s.
   ============================================================ */
.pc-hero-stage { overflow: hidden; }

.pc-slide {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
  animation: pcSlideFade 21s linear infinite;
}
.pc-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
  display: block;
  transform-origin: 50% 50%;
  animation: pcKenBurns 21s ease-in-out infinite;
}
.pc-slide:nth-child(1), .pc-slide:nth-child(1) img { animation-delay: 0s; }
.pc-slide:nth-child(2), .pc-slide:nth-child(2) img { animation-delay: 7s; }
.pc-slide:nth-child(3), .pc-slide:nth-child(3) img { animation-delay: 14s; }

/* 7 s visibles sur 21, avec 1,2 s de fondu de part et d'autre */
@keyframes pcSlideFade {
  0%     { opacity: 0; }
  2%     { opacity: 1; }
  31%    { opacity: 1; }
  35%    { opacity: 0; }
  100%   { opacity: 0; }
}
/* Zoom lent : le plan respire au lieu d'être figé */
@keyframes pcKenBurns {
  0%   { transform: scale(1.04); }
  35%  { transform: scale(1.11); }
  100% { transform: scale(1.11); }
}

/* Nom du véhicule, synchronisé avec son plan */
.pc-slide-cap {
  position: absolute; right: 30px; bottom: 132px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pc-gold-lt);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  pointer-events: none;
}

/* Points indicateurs, animés sur le même cycle */
.pc-hero-dots {
  position: absolute; right: 30px; bottom: 108px;
  display: flex; gap: 7px; z-index: 4;
}
.pc-hero-dots span {
  width: 22px; height: 2px; border-radius: 2px;
  background: rgba(245,241,232,.28);
  animation: pcDot 21s linear infinite;
}
.pc-hero-dots span:nth-child(1) { animation-delay: 0s; }
.pc-hero-dots span:nth-child(2) { animation-delay: 7s; }
.pc-hero-dots span:nth-child(3) { animation-delay: 14s; }
@keyframes pcDot {
  0%, 33.4%  { background: var(--pc-gold); }
  33.5%, 100% { background: rgba(245,241,232,.28); }
}

/* Le survol du hero met la succession en pause */
#accueil:hover .pc-slide,
#accueil:hover .pc-slide img,
#accueil:hover .pc-hero-dots span { animation-play-state: paused; }

@media (max-width: 900px) {
  .pc-slide-cap { right: 20px; bottom: 96px; font-size: 10px; }
  .pc-hero-dots { right: 20px; bottom: 76px; }
}
/* Sans animation : on garde le premier plan, fixe et net */
@media (prefers-reduced-motion: reduce) {
  .pc-slide, .pc-slide img, .pc-hero-dots span { animation: none; }
  .pc-slide:nth-child(1) { opacity: 1; }
  .pc-slide:nth-child(2), .pc-slide:nth-child(3) { opacity: 0; }
  .pc-hero-dots span:nth-child(1) { background: var(--pc-gold); }
}

/* ---------- Hero à deux colonnes ---------- */
.pc-hero-mosaic { position: relative; }
@media (max-width: 1000px) {
  .pc-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .pc-hero-mosaic { max-width: 560px; }
}
@media (max-width: 620px) {
  .pc-hero-mosaic { display: none; }   /* trop à l'étroit pour rester lisible */
}

/* La colonne de texte est plus étroite depuis l'ajout de la mosaïque :
   on resserre les repères pour qu'ils tiennent sur une seule ligne. */
@media (min-width: 1001px) {
  .pc-reassure { padding-right: 13px !important; margin-right: 13px !important; gap: 9px !important; }
  .pc-reassure-ico { width: 32px; height: 32px; }
}


/* ============================================================
   DriftWall (React Bits) — mur de véhicules en défilement 3D
   Classes déjà préfixées à la source, aucune collision.
   ============================================================ */
.drift-wall {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  perspective: var(--dw-perspective, 1200px);
  perspective-origin: 50% 50%;
  --dw-tile-w: 200px; --dw-tile-h: 132px; --dw-gap: 18px; --dw-radius: 14px;
  --dw-lift: 64px; --dw-dim: .55; --dw-gray: 0; --dw-overlay: #0A0A0A; --dw-edge: 40%;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 78% 82% at 50% 46%, #000 var(--dw-edge), transparent 100%),
    linear-gradient(to top, #000 var(--dw-edge), transparent 100%);
  mask-composite: intersect;
}
.drift-wall__plane {
  position: absolute; top: 50%; left: 50%;
  display: flex; flex-direction: row;
  transform-style: preserve-3d;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform;
}
.drift-wall__col {
  position: relative;
  width: calc(var(--dw-tile-w) + var(--dw-gap));
  transform-style: preserve-3d;
}
.drift-wall__track {
  display: flex; flex-direction: column;
  will-change: transform;
  transform-style: preserve-3d;
}
.drift-wall__tile {
  position: relative; display: block;
  width: 100%;
  height: calc(var(--dw-tile-h) + var(--dw-gap));
  flex: 0 0 auto;
  outline: none;
  transform-style: preserve-3d;
}
.drift-wall__inner {
  position: absolute; inset: calc(var(--dw-gap) / 2);
  display: block;
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(201,162,75,.16);   /* filet or, aligné sur la DA */
  opacity: var(--dw-dim);
  transform: translateZ(0);
  pointer-events: none;
  transition: transform .42s cubic-bezier(.22,1,.36,1),
              opacity .42s cubic-bezier(.22,1,.36,1),
              border-color .42s ease,
              box-shadow .42s cubic-bezier(.22,1,.36,1);
}
.drift-wall__tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(var(--dw-gray)) saturate(.92);
  transition: filter .42s cubic-bezier(.22,1,.36,1);
  user-select: none; -webkit-user-drag: none;
}
.drift-wall__overlay {
  position: absolute; inset: 0;
  background: var(--dw-overlay);
  opacity: .3;
  pointer-events: none;
  transition: opacity .42s cubic-bezier(.22,1,.36,1);
}
.drift-wall__tile.is-active .drift-wall__inner,
.drift-wall__tile:focus-visible .drift-wall__inner {
  opacity: 1;
  transform: translateZ(var(--dw-lift));
  border-color: rgba(201,162,75,.8);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.75);
}
.drift-wall__tile.is-active img,
.drift-wall__tile:focus-visible img { filter: grayscale(0) saturate(1.05); }
.drift-wall__tile.is-active .drift-wall__overlay,
.drift-wall__tile:focus-visible .drift-wall__overlay { opacity: 0; }
.drift-wall__tile:focus-visible .drift-wall__inner {
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 2px var(--pc-gold);
}
@media (prefers-reduced-motion: reduce) {
  .drift-wall__plane, .drift-wall__track { will-change: auto; }
}

/* Le mur a besoin d'une hauteur explicite : son contenu est en absolu. */
.pc-hero-mosaic { height: 620px; }
@media (max-width: 1000px) { .pc-hero-mosaic { height: 460px; } }

/* ============================================================
   LightTunnel — fond animé du hero, palette or du site
   ============================================================ */
.pc-hero-tunnel {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;   /* le mur et les CTA restent cliquables */
}
/* Le tunnel passe derrière la colonne de texte : ce voile garantit le
   contraste du titre sans assombrir la moitié droite. */
.pc-hero-tunnel-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 30%,
                           rgba(10,10,10,.35) 52%, rgba(10,10,10,.12) 72%,
                           rgba(10,10,10,.05) 100%),
    linear-gradient(0deg, rgba(10,10,10,.75) 0%, transparent 32%);
}
/* Le contenu du hero doit rester au-dessus des deux couches. */
#accueil > .pc-hero-grid { z-index: 2; }
#accueil > .pc-scrollcue { z-index: 6; }

/* Le flou ne rend rien transparent : il ne peut pas effacer un bord.
   Un masque sur le conteneur fait disparaître le rectangle du mur sur
   ses 4 côtés, le flou ne servant qu'à adoucir la zone de transition. */
.pc-hero-mosaic {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
}

/* ============================================================
   Teaser « Nos Expériences » — traité en chapitre à part
   Il reprenait le style des cartes de la flotte et s'y fondait ;
   il devient une rupture dans le rythme de la page.
   ============================================================ */
.pc-exp-band {
  position: relative;
  overflow: hidden;
  background: #0c0b09;
  border-top: 1px solid rgba(201,162,75,.28);
  border-bottom: 1px solid rgba(201,162,75,.28);
}
/* Halo doré très diffus : signale le changement de chapitre sans bruit */
.pc-exp-glow {
  position: absolute;
  left: 50%; top: 0;
  width: min(1100px, 120%); height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(201,162,75,.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201,162,75,.08), transparent 70%);
  pointer-events: none;
}

/* ---------- Tuiles éditoriales : texte incrusté sur l'image ---------- */
.pc-exp-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--pc-radius);
  overflow: hidden;
  border: 1px solid rgba(201,162,75,.24);
  text-decoration: none;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              border-color .5s ease, box-shadow .5s ease;
}
.pc-exp-tile:hover {
  transform: translateY(-8px);
  border-color: rgba(201,162,75,.85);
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.8);
}
.pc-exp-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
  filter: saturate(.9);
}
.pc-exp-tile:hover .pc-exp-tile-img { transform: scale(1.07); filter: saturate(1.05); }

.pc-exp-tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.05) 38%,
                                       rgba(10,10,10,.72) 72%, rgba(10,10,10,.94) 100%);
  transition: opacity .5s ease;
}
.pc-exp-tile-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  padding: 20px 18px 18px;
}
.pc-exp-tile-title {
  display: block;
  font-size: 13.5px; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; color: var(--pc-text);
  margin-bottom: 7px;
}
.pc-exp-tile-price {
  display: block;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pc-muted);
}
.pc-exp-tile-price b {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 700; color: var(--pc-gold);
  margin: 0 2px;
}
/* La ligne « Découvrir » n'apparaît qu'au survol */
.pc-exp-tile-cta {
  display: block;
  margin-top: 10px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--pc-gold-lt);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.pc-exp-tile:hover .pc-exp-tile-cta,
.pc-exp-tile:focus-visible .pc-exp-tile-cta { opacity: 1; transform: none; }
.pc-exp-tile:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pc-exp-tile, .pc-exp-tile:hover { transform: none; }
  .pc-exp-tile-img, .pc-exp-tile:hover .pc-exp-tile-img { transform: none; }
  .pc-exp-tile-cta { opacity: 1; transform: none; }
}
@media (max-width: 900px) { .pc-exp-tile { aspect-ratio: 4 / 5; } }

/* Sans survol possible (tactile), la ligne « Découvrir » resterait
   invisible : on l'affiche d'emblée. */
@media (hover: none) {
  .pc-exp-tile-cta { opacity: 1; transform: none; }
}

/* ============================================================
   FlowingMenu — sélecteur de catégories de la flotte
   Classes préfixées : .menu / .marquee auraient collisionné.
   ============================================================ */
.pc-fm-host {
  max-width: 1000px;
  margin: 0 auto 40px;
  height: 258px;                       /* 3 entrées de 86px */
  border-top: 1px solid rgba(201,162,75,.28);
  border-bottom: 1px solid rgba(201,162,75,.28);
}
.pc-fm-wrap { width: 100%; height: 100%; overflow: hidden; }
.pc-fm-menu { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; }

.pc-fm-item {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid;
}
.pc-fm-item:first-child { border-top: none; }
/* Filet or à gauche sur la catégorie affichée */
.pc-fm-item.is-active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--pc-gold), transparent);
  z-index: 2;
}

.pc-fm-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  position: relative;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .35s ease;
}
.pc-fm-text {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: .01em;
}
.pc-fm-meta {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--pc-muted);
  font-weight: 500;
}
.pc-fm-item.is-active .pc-fm-meta { color: rgba(201,162,75,.75); }

.pc-fm-marquee {
  position: absolute; top: 0; left: 0;
  overflow: hidden;
  width: 100%; height: 100%;
  pointer-events: none;
  transform: translate3d(0, 101%, 0);
}
.pc-fm-marquee-wrap { height: 100%; width: 100%; overflow: hidden; }
.pc-fm-marquee-inner {
  display: flex; align-items: center;
  position: relative; height: 100%; width: fit-content;
  will-change: transform;
}
.pc-fm-part { display: flex; align-items: center; flex-shrink: 0; }
.pc-fm-part span {
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1;
  padding: 0 18px;
}
.pc-fm-img {
  width: 132px; height: 54px;
  margin: 0 18px;
  border-radius: 999px;
  background-size: cover;
  background-position: 50% 50%;
  border: 1px solid rgba(20,16,10,.35);
}

@media (max-width: 700px) {
  .pc-fm-host { height: 216px; }
  .pc-fm-link { flex-direction: column; gap: 3px; }
  .pc-fm-img { width: 96px; height: 42px; margin: 0 12px; }
}
/* Sans animation, le marquee reste hors champ : le libellé suffit. */
@media (prefers-reduced-motion: reduce) {
  .pc-fm-marquee { display: none; }
}

/* ============================================================
   TiltedCard — photo de la section « À propos »
   ============================================================ */
.pc-about-media { position: relative; }
.tilted-card-figure { perspective: 800px; }
.tilted-card-inner {
  border-radius: var(--pc-radius);
  overflow: hidden;
  border: 1px solid rgba(201,162,75,.28);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
  transition: border-color .4s ease;
}
.tilted-card-figure:hover .tilted-card-inner { border-color: rgba(201,162,75,.75); }
.tilted-card-img { display: block; }
/* Bulle de légende, aux couleurs du site plutôt qu'en blanc */
.tilted-card-caption {
  border-radius: 4px;
  background: rgba(10,10,10,.92);
  border: 1px solid rgba(201,162,75,.5);
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-gold-lt);
  white-space: nowrap;
}
/* Sans survol (tactile), la bulle n'a pas lieu d'être. */
@media (hover: none) {
  .tilted-card-caption { display: none; }
}

/* Beams — canvas plein cadre dans la couche de fond du hero */
.beams-container { position: relative; width: 100%; height: 100%; display: block; }

/* ============================================================
   Panneau de compteurs — remplace la barre de réservation,
   chevauche le hero comme elle le faisait.
   ============================================================ */
.pc-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, rgba(20,19,17,.96), rgba(12,11,9,.98));
  border: 1px solid rgba(201,162,75,.45);
  border-radius: var(--pc-radius);
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
/* Lueur dorée diffuse derrière les chiffres */
.pc-stats-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 140% at 50% 0%, rgba(201,162,75,.16), transparent 70%);
}
/* Filet doré qui court sur le haut du panneau */
.pc-stats::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-gold), transparent);
}

.pc-stat {
  position: relative;
  padding: 30px 16px 28px;
  text-align: center;
  animation: pcStatIn .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--pc-stat-delay, 0ms);
}
/* Séparateurs : dégradés verticaux, pas des traits secs */
.pc-stat + .pc-stat::before {
  content: '';
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201,162,75,.42), transparent);
}
@keyframes pcStatIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.pc-stat-value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #FFF0C4 0%, #E8C97D 42%, #C9A24B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 26px rgba(201,162,75,.28);
  font-variant-numeric: tabular-nums;   /* le chiffre ne tremble pas en comptant */
}
.pc-stat-label {
  margin-top: 9px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

@media (max-width: 900px) {
  .pc-stats { grid-template-columns: repeat(3, 1fr); }
  /* En grille multi-lignes, le séparateur gauche du 1er de chaque ligne saute */
  .pc-stat:nth-child(3n + 1)::before { display: none; }
}
@media (max-width: 560px) {
  .pc-stats { grid-template-columns: repeat(2, 1fr); }
  .pc-stat:nth-child(3n + 1)::before { display: block; }
  .pc-stat:nth-child(2n + 1)::before { display: none; }
  .pc-stat { padding: 22px 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-stat { animation: none; }
}

/* ============================================================
   Bande de marques — déduite de la flotte réelle
   ============================================================ */
.pc-brands-band {
  position: relative;
  border-top: 1px solid rgba(201,162,75,.18);
  border-bottom: 1px solid rgba(201,162,75,.18);
  background: #0c0b09;
}
/* Bandeau des marques. Le défilement lui-même vit dans
   components/BrandMarquee.jsx : les cartes y sont recyclées une à une, il n'y
   a donc aucun point de bouclage à masquer. Le masque dégradé sert seulement à
   effacer les deux extrémités, que overflow: hidden trancherait net. */
.pc-brands-marquee {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.pc-brands-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* La carte se soulève de 4 px au survol et porte une ombre de 22 px : sans
     cette réserve, overflow: hidden les tranche, la hauteur du rail valant
     exactement celle des cartes. Verticale seulement — une marge horizontale
     désaccorderait les deux moitiés et ferait sauter la boucle. */
  padding: 12px 0 26px;
}
/* Sans défilement, les marques au-delà de la fenêtre seraient hors d'atteinte :
   le bandeau devient glissable à la main. */
@media (prefers-reduced-motion: reduce) {
  .pc-brands-marquee { overflow-x: auto; scrollbar-width: none; }
  .pc-brands-marquee::-webkit-scrollbar { display: none; }
}
.pc-brand {
  flex: 0 0 186px;
  margin-right: 14px;
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 16px 10px;
  border: 1px solid rgba(201,162,75,.20);
  border-radius: var(--pc-radius);
  background: linear-gradient(180deg, #141311, #100f0d);
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              border-color .4s ease, box-shadow .4s ease;
}
.pc-brand:hover {
  transform: translateY(-4px);
  border-color: rgba(201,162,75,.7);
  box-shadow: 0 16px 36px -14px rgba(0,0,0,.75);
}
.pc-brand-mark {
  font-family: 'Playfair Display', serif;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.15;
  color: var(--pc-soft);
  transition: color .4s ease;
}
.pc-brand:hover .pc-brand-mark { color: var(--pc-gold-lt); }

@media (prefers-reduced-motion: reduce) {
  .pc-brand, .pc-brand:hover { transform: none; }
}

/* ============================================================
   Pages légales
   ============================================================ */
.pc-legal-note {
  margin: 28px 0 40px;
  padding: 18px 20px;
  border: 1px solid rgba(201,162,75,.5);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(201,162,75,.07);
  color: var(--pc-soft);
  font-size: 13.5px;
  line-height: 1.75;
}
.pc-legal-note strong { color: var(--pc-gold-lt); }
.pc-legal-list {
  color: var(--pc-soft);
  line-height: 1.85;
  font-size: 15px;
  padding-left: 20px;
  margin: 0 0 16px;
}
.pc-legal-list li { margin-bottom: 8px; }
.pc-legal-list li::marker { color: var(--pc-gold); }
/* Les mentions à compléter doivent sauter aux yeux du client */
main strong:not(.pc-legal-note strong) { color: var(--pc-gold-lt); }
main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: rgba(201,162,75,.12);
  border: 1px solid rgba(201,162,75,.25);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--pc-gold-lt);
}

/* La section des avantages passe de 5 à 8 cartes : 4 colonnes, puis 2, puis 1 */
@media (min-width: 901px) { .pc-why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Logos de marques : dorés, discrets au repos, pleins au survol.
   Boîte de taille fixe + object-fit : les marques larges (McLaren, Jeep)
   et hautes (Ferrari, Lamborghini) occupent la même surface optique. */
.pc-brand-logo {
  width: 100%;
  max-width: 118px;
  height: 52px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  opacity: .82;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
/* Réglages optiques : « contain » égalise les cadres, pas la présence. Un
   logotype gras occupe toute la largeur quand un monogramme carré se retrouve
   bridé par la hauteur. En pourcentage, pas en pixels : le cadre rétrécit sur
   mobile et des valeurs absolues rogneraient les logos. */
[data-brand="jeep"]       .pc-brand-logo { background-size: 67% auto; }
[data-brand="brabus"]     .pc-brand-logo { background-size: 76% auto; }
[data-brand="ferrari"]    .pc-brand-logo { background-size: 79% auto; }
[data-brand="audi"]       .pc-brand-logo { background-size: 82% auto; }
[data-brand="porsche"]    .pc-brand-logo { background-size: 86% auto; }
[data-brand="mclaren"]    .pc-brand-logo { background-size: 88% auto; }
[data-brand="lamborghini"].pc-brand-logo { background-size: 92% auto; }
[data-brand="mansory"]    .pc-brand-logo { background-size: 96% auto; }
[data-brand="renault"]    .pc-brand-logo { background-size: auto 88%; }
[data-brand="bmw"]        .pc-brand-logo { background-size: auto 92%; }
[data-brand="volkswagen"] .pc-brand-logo { background-size: auto 92%; }
[data-brand="mercedes"]   .pc-brand-logo { background-size: auto 100%; }
.pc-brand:hover .pc-brand-logo { opacity: 1; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .pc-brand:hover .pc-brand-logo { transform: none; }
}

/* Mots-symboles (Brabus, Mansory) : traitement de logotype assumé, aucune
   source officielle n'existant en SVG libre pour ces deux préparateurs. */
.pc-brand-mark {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-indent: .26em;
  color: var(--pc-gold);
  opacity: .72;
  transition: opacity .4s ease, color .4s ease;
}
.pc-brand:hover .pc-brand-mark { opacity: 1; color: var(--pc-gold-lt); }
@media (max-width: 700px) {
  .pc-brand { flex-basis: 118px; margin-right: 10px; min-height: 74px; padding: 12px 8px; }
  .pc-brand-logo { max-width: 90px; height: 40px; }
  .pc-brand-mark { font-size: 11px; letter-spacing: .16em; text-indent: .16em; }
}

/* ============================================================
   Carte du footer
   ============================================================
   Dessinée hors ligne par tools/build-map.js à partir des données
   OpenStreetMap, puis servie depuis le domaine : le site ne fait aucune
   requête vers un tiers, et sa politique de confidentialité s'appuie sur ce
   fait. Un iframe Google Maps la rendrait fausse. */
.pc-map {
  position: relative;
  display: block;
  margin-top: 4px;
  border: 1px solid rgba(201,162,75,.28);
  border-radius: var(--pc-radius);
  overflow: hidden;
  line-height: 0;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.pc-map img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .88;
  transition: opacity .4s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.pc-map:hover { border-color: rgba(201,162,75,.75); box-shadow: 0 14px 30px -16px rgba(0,0,0,.8); }
.pc-map:hover img { opacity: 1; transform: scale(1.04); }
.pc-map:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 2px; }

/* Le point est au centre exact de l'image par construction (voir la sortie de
   tools/build-map.js) : l'onde peut donc se caler sur 50 %/50 %. */
.pc-map-pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1px solid var(--pc-gold-lt);
  animation: pcMapPulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes pcMapPulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-map-pulse { animation: none; opacity: .5; transform: scale(1.6); }
  .pc-map:hover img { transform: none; }
}
.pc-map-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 10px 7px;
  background: linear-gradient(transparent, rgba(10,10,10,.92) 55%);
  color: var(--pc-gold-lt);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.3;
}
.pc-map-credit {
  font-size: 10px;
  color: #6b6459;
  letter-spacing: .04em;
}

/* ============================================================
   Pastille WhatsApp de l'en-tête
   ============================================================
   Le numéro seul ne disait pas ce qu'un clic déclenche. L'icône l'annonce,
   la pastille verte signale la disponibilité, et le libellé au-dessus donne
   la raison de cliquer plutôt que la seule information. */
.pc-phone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-block: 6px;
  padding-inline: 6px 18px;
  border: 1px solid rgba(201,162,75,.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(201,162,75,.10), rgba(201,162,75,.025));
  overflow: hidden;                /* borne le sheen */
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.pc-phone:hover {
  border-color: var(--pc-gold);
  box-shadow: 0 10px 26px -14px rgba(201,162,75,.6);
  transform: translateY(-1px);
}
.pc-phone:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 3px; }
/* Sheen : la même brillance que les boutons principaux, en plus court */
.pc-phone::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(232,201,125,.30), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.pc-phone:hover::after { opacity: 1; animation: pcSheen .8s ease forwards; }

.pc-phone-icon {
  position: relative;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pc-gold-lt), var(--pc-gold));
  color: #14100a;
}
.pc-phone-live {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;        /* côté intérieur, quel que soit le sens */
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pc-wa);
  border: 2px solid #0d0c0a;
}
/* Onde de disponibilité, accordée à celle du point sur le plan du footer */
.pc-phone-live::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--pc-wa);
  animation: pcLive 2.6s ease-out infinite;
}
@keyframes pcLive {
  0%   { transform: scale(.7); opacity: .85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.pc-phone-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.pc-phone-kicker {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pc-gold);
}
.pc-phone-num {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--pc-text);
}
.pc-phone:hover .pc-phone-num { color: var(--pc-gold-lt); }

/* En dessous, la barre de navigation devient trop serrée pour deux lignes :
   la pastille se réduit au numéro. */
@media (max-width: 1180px) {
  .pc-phone-kicker { display: none; }
  .pc-phone-txt { gap: 0; }
  .pc-phone { padding-block: 5px; padding-inline: 5px 16px; }
  .pc-phone-icon { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-phone-live::after { animation: none; opacity: .45; }
  .pc-phone:hover { transform: none; }
  .pc-phone:hover::after { animation: none; opacity: 0; }
}