/**
 * AllRoad Automobile — Jetons de design (source de vérité)
 *
 * Direction : anthracite mat · rouge carmin pour l'action · gris pour tout le reste.
 * Le sombre est le showroom, le clair est la fiche produit.
 *
 * RÈGLE ABSOLUE : aucune couleur ni taille en dur dans le thème.
 * Tout passe par ces jetons.
 */

:root {
  /* ══════════════════════════════════════════════════════════
     COULEURS — FONDS SOMBRES (le showroom)
     Neutres chauds (teinte ~30°, saturation très basse) : le gris
     penche discrètement vers le rouge de la marque.
     ══════════════════════════════════════════════════════════ */
  --ar-ground:            #0A0908;  /* fond de page */
  --ar-surface:           #171614;  /* sections, bandeaux */
  --ar-surface-elevated:  #1E1C1A;  /* panneaux, onglets inactifs */
  --ar-surface-hover:     #232120;
  --ar-surface-sunken:    #050504;  /* zones photo hors tuile */

  /* Voiles — le fond translucide posé PAR-DESSUS une photo ou la page.
     Ils ne remplacent pas une surface : ils la laissent transparaître. */
  --ar-veil-bar:          rgba(10, 9, 8, 0.96);  /* barre d'action fixe */
  --ar-veil-badge:        rgba(8, 7, 6, 0.80);   /* pastille posée sur une photo */
  --ar-veil-full:         rgba(5, 5, 4, 0.97);   /* visionneuse plein écran */

  /* ══════════════════════════════════════════════════════════
     COULEURS — LIGNES
     ⚠ --ar-line et --ar-line-strong sont DÉCORATIFS (< 3:1).
     Toute bordure porteuse de sens utilise --ar-line-interactive.
     ══════════════════════════════════════════════════════════ */
  --ar-line:              #2A2724;  /* 1,34:1 — décoratif */
  --ar-line-strong:       #3A3733;  /* 1,68:1 — décoratif */
  --ar-line-interactive:  #6E6862;  /* 3,62:1 — conforme UI */

  /* ══════════════════════════════════════════════════════════
     COULEURS — TEXTE SUR FOND SOMBRE (ratios sur --ar-ground)
     ══════════════════════════════════════════════════════════ */
  --ar-text:              #E8E4DE;  /* 15,71:1  AAA */
  --ar-text-muted:        #9B948C;  /*  6,64:1  AA  */
  --ar-text-disabled:     #6E6862;  /*  3,62:1  AA grand format */

  /* ══════════════════════════════════════════════════════════
     SURFACES CLAIRES — la fiche produit
     Tuiles véhicule et panneaux de données. Gris franc, pas blanc :
     les photos y sont posées, pas découpées.
     ══════════════════════════════════════════════════════════ */
  --ar-card:              #E2E1DE;  /* tuile — 15,2:1 face au fond de page */
  --ar-card-band:         #D6D5D1;  /* bandeau des caractéristiques */
  --ar-card-line:         #C4C3BE;  /* séparateur — décoratif, 1,2:1 */
  --ar-card-line-interactive: #7E7972; /* 3,30:1 sur la tuile — contours de champs */
  --ar-card-hover:        #E9E8E5;
  --ar-card-empty:        #CFCEC9;  /* emplacement photo manquante */

  --ar-ink:               #171614;  /* 13,83:1 sur --ar-card — AAA */
  --ar-ink-muted:         #55504A;  /*  6,10:1 — AA — finition, texte secondaire */
  --ar-ink-soft:          #5E5851;  /*  5,37:1 — AA — libellés, icônes */

  /* Le rouge du logo est lisible en texte sur surface claire : 5,99:1. */

  /* ══════════════════════════════════════════════════════════
     ROUGE — le seul accent du système
     ⚠ #9E1F29 en TEXTE sur fond SOMBRE = 2,43:1 → INTERDIT.
       Il ne sert qu'en APLAT, avec du blanc dessus (7,83:1).
       Pour du rouge lisible sur fond sombre : --ar-red-text.
     ══════════════════════════════════════════════════════════ */
  --ar-red:               #9E1F29;  /* rouge du logo — aplats */
  --ar-red-hover:         #B8232F;
  --ar-red-active:        #86171F;
  --ar-red-text:          #E8404C;  /* 4,99:1 sur fond sombre — AA */
  --ar-red-wash:          rgba(158, 31, 41, 0.12);

  /* ══════════════════════════════════════════════════════════
     STATUTS — sémantique, distincte de l'accent de marque.
     Toujours accompagnés d'une forme (pastille, contour), jamais
     de la couleur seule.
     ══════════════════════════════════════════════════════════ */
  --ar-available:         #35B37E;
  --ar-reserved:          #E5843D;
  --ar-sold:              #6E6862;

  /* ══════════════════════════════════════════════════════════
     DÉGRADÉS
     ══════════════════════════════════════════════════════════ */

  /* Étiquette de prix : dégradé saccadé, bandes à arrêts nets.
     Chaque bande garde le texte blanc au-dessus de 6,3:1. */
  --ar-price-gradient: linear-gradient(100deg,
      #7A141D 0 20%,
      #9E1F29 20% 44%,
      #8C1A24 44% 60%,
      #B8232F 60% 80%,
      #9E1F29 80% 100%);

  /* Filet séparateur de section — gris, discret */
  --ar-hairline: linear-gradient(90deg,
      transparent 0%,
      var(--ar-line) 14%,
      var(--ar-line-strong) 38%,
      #4A453F 50%,
      var(--ar-line-strong) 62%,
      var(--ar-line) 86%,
      transparent 100%);

  /* Voile sur photo : garantit la lisibilité du texte en surimpression */
  --ar-photo-scrim: linear-gradient(to top,
      rgba(5, 5, 4, 0.94) 0%,
      rgba(5, 5, 4, 0.72) 28%,
      rgba(5, 5, 4, 0.18) 58%,
      transparent 100%);

  /* ══════════════════════════════════════════════════════════
     TYPOGRAPHIE
     Une seule famille : Inter variable. Neutre, très lisible aux
     petites tailles, chiffres tabulaires irréprochables. La police
     ne cherche pas à être remarquée — ce sont les véhicules qui
     doivent l'être.
     Auto-hébergée (RGPD — jamais le CDN Google).
     ══════════════════════════════════════════════════════════ */
  --ar-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Échelle fluide — mobile d'abord */
  --ar-size-hero:     clamp(2.25rem, 8vw, 4rem);
  --ar-size-display:  clamp(1.75rem, 5.5vw, 3rem);
  --ar-size-title:    clamp(1.375rem, 4vw, 2rem);
  --ar-size-heading:  1.25rem;
  --ar-size-subhead:  1.0625rem;
  --ar-size-body:     1rem;
  --ar-size-small:    0.875rem;
  --ar-size-label:    0.6875rem;
  --ar-size-price:    clamp(1.25rem, 4.5vw, 1.625rem);

  --ar-weight-bold:   700;
  --ar-weight-semi:   600;
  --ar-weight-medium: 500;
  --ar-weight-normal: 400;

  --ar-leading-tight: 1.06;
  --ar-leading-snug:  1.25;
  --ar-leading-body:  1.62;

  --ar-track-title:  -0.022em;   /* Inter demande un resserrage en grand */
  --ar-track-body:    0;
  --ar-track-label:   0.12em;    /* libellés en majuscules */
  --ar-track-button:  0.06em;

  --ar-measure: 68ch;

  /* ══════════════════════════════════════════════════════════
     ESPACEMENT — base 4px
     ══════════════════════════════════════════════════════════ */
  --ar-space-1:   4px;
  --ar-space-2:   8px;
  --ar-space-3:  12px;
  --ar-space-4:  16px;
  --ar-space-5:  24px;
  --ar-space-6:  32px;
  --ar-space-7:  48px;
  --ar-space-8:  64px;
  --ar-space-9:  96px;
  --ar-space-10: 128px;

  --ar-section-y: clamp(56px, 10vw, 120px);

  /* ══════════════════════════════════════════════════════════
     FORMES
     ══════════════════════════════════════════════════════════ */
  --ar-radius-sm:   2px;
  --ar-radius:      4px;
  --ar-radius-lg:   8px;
  --ar-radius-card: 12px;    /* tuiles */
  --ar-radius-pill: 999px;   /* pastilles de statut et onglets */
  --ar-tag-skew:    14px;    /* biseau de l'étiquette prix */

  /* ══════════════════════════════════════════════════════════
     ÉLÉVATION
     ══════════════════════════════════════════════════════════ */
  --ar-shadow-card:   0 22px 44px -30px rgba(0, 0, 0, 0.95);
  --ar-shadow-raised: 0 30px 54px -28px rgba(0, 0, 0, 1);
  --ar-focus-ring:    0 0 0 2px var(--ar-ground), 0 0 0 4px var(--ar-text);
  --ar-focus-ring-light: 0 0 0 2px var(--ar-card), 0 0 0 4px var(--ar-ink);

  /* ══════════════════════════════════════════════════════════
     MOUVEMENT — retenu. Le luxe ne gesticule pas.
     ══════════════════════════════════════════════════════════ */
  --ar-ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --ar-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ar-dur-fast:  160ms;
  --ar-dur-base:  280ms;
  --ar-dur-slow:  600ms;

  /* ══════════════════════════════════════════════════════════
     MISE EN PAGE
     ══════════════════════════════════════════════════════════ */
  --ar-max-width:  1280px;
  --ar-max-text:   720px;
  --ar-gutter:     20px;
  --ar-header-h:   64px;
  --ar-touch-min:  48px;    /* cible tactile minimale — non négociable */
  --ar-thumb-zone: 92px;    /* barre d'action basse sur mobile */
  --ar-z-header:   100;
  --ar-z-sheet:    200;
  --ar-z-overlay:  300;
}

@media (min-width: 768px) {
  :root {
    --ar-gutter:   32px;
    --ar-header-h: 80px;
  }
}

@media (min-width: 1200px) {
  :root {
    --ar-gutter:   40px;
    --ar-header-h: 88px;
  }
}

/* ════════════════════════════════════════════════════════════
   POLICE AUTO-HÉBERGÉE
   Aucun appel au CDN Google : transfert de données personnelles
   hors UE, sanctionné en France et en Allemagne.
   ════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════
   PRIMITIVES RÉUTILISABLES
   ════════════════════════════════════════════════════════════ */

/* Filet séparateur */
.ar-hairline {
  height: 1px;
  border: 0;
  background: var(--ar-hairline);
}

/* Libellé : majuscules espacées, gris */
.ar-label {
  font-size: var(--ar-size-label);
  font-weight: var(--ar-weight-medium);
  letter-spacing: var(--ar-track-label);
  text-transform: uppercase;
  color: var(--ar-text-muted);
}

/* Sur surface claire */
.ar-label--light {
  color: var(--ar-ink-soft);
}

/* Chiffres alignés — obligatoire partout où des nombres se superposent */
.ar-figures {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Étiquette de prix à dégradé saccadé */
.ar-price-tag {
  background: var(--ar-price-gradient);
  color: #FFFFFF;
  font-weight: var(--ar-weight-bold);
  font-variant-numeric: tabular-nums;
  clip-path: polygon(var(--ar-tag-skew) 0, 100% 0, 100% 100%, 0 100%);
}

/* Focus visible — cohérent sur tout le site */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ar-focus-ring);
  border-radius: var(--ar-radius-sm);
}

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITÉ DU MOUVEMENT
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}