/* ============================================================
   LARRIEU AUTOMOBILES — TOKENS & PRIMITIVES
   Source de vérité unique des variables de marque (Design System).
   À reprendre tel quel dans le child theme Bootscore.
   ============================================================ */

:root {
  /* ---- Orange de marque (premium, chaud) ---- */
  --orange-50:  #fdf3ec;
  --orange-100: #fbe3d3;
  --orange-200: #f6c4a3;
  --orange-300: #f0a06f;
  --orange-400: #ec7e3f;
  --orange-500: #e5631b;   /* primary */
  --orange-600: #cb510f;
  --orange-700: #a44110;
  --orange-800: #7d3413;
  --orange-900: #5b2811;

  /* ---- Neutres chauds (graphite → blanc) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f8f7;
  --neutral-100: #f1f0ee;
  --neutral-200: #e3e2df;
  --neutral-300: #c6c4bf;
  --neutral-400: #9a9893;
  --neutral-500: #6e6c68;
  --neutral-600: #4a4845;
  --neutral-700: #322f2d;
  --neutral-800: #201e1c;
  --neutral-900: #161513;
  --neutral-950: #0e0d0c;   /* ink / noir premium */

  /* ---- Statuts (usage fonctionnel parcimonieux) ---- */
  --green-500:  #2f9e5f;  --green-50:  #e8f5ee;
  --amber-500:  #e2a32b;  --amber-50:  #fbf2dd;
  --red-500:    #d23b2c;  --red-50:    #fae9e7;

  /* ---- Alias sémantiques ---- */
  --brand:            var(--orange-500);
  --brand-hover:      var(--orange-600);
  --brand-press:      var(--orange-700);
  --brand-subtle:     var(--orange-50);
  --brand-subtle-bd:  var(--orange-200);
  --on-brand:         var(--neutral-0);

  --bg:               var(--neutral-50);
  --surface:          var(--neutral-0);
  --surface-2:        var(--neutral-100);

  --ink:              var(--neutral-950);
  --ink-2:            var(--neutral-900);
  --ink-elevated:     var(--neutral-800);
  --on-ink:           var(--neutral-0);
  --on-ink-muted:     var(--neutral-400);

  --text-primary:     var(--neutral-950);
  --text-secondary:   var(--neutral-600);
  --text-muted:       var(--neutral-400);
  --text-inverse:     var(--neutral-0);
  --text-brand:       var(--orange-600);

  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-ink:       rgba(255,255,255,0.12);

  --success: var(--green-500);  --success-subtle: var(--green-50);
  --warning: var(--amber-500);  --warning-subtle: var(--amber-50);
  --danger:  var(--red-500);    --danger-subtle:  var(--red-50);
  --ring:    color-mix(in srgb, var(--orange-500) 55%, transparent);

  /* ---- Typographie ---- */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --fw-bold:700; --fw-extrabold:800; --fw-black:900;

  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem;
  --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.375rem;
  --text-4xl:3rem; --text-5xl:3.75rem; --text-6xl:4.75rem;

  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tighter:-0.03em; --ls-tight:-0.015em; --ls-normal:0;
  --ls-wide:0.04em; --ls-wider:0.12em; --ls-widest:0.22em;

  /* ---- Espacements (grille 4px) ---- */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-9:4rem; --space-10:5rem; --space-11:6.5rem; --space-12:8rem;

  --container:1200px; --container-wide:1400px;
  --section-y:var(--space-11);

  /* ---- Formes / ombres / motion ---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:18px; --radius-pill:999px;
  --radius-card:var(--radius-lg);

  --shadow-xs:0 1px 2px rgba(14,13,12,0.06);
  --shadow-sm:0 1px 3px rgba(14,13,12,0.08), 0 1px 2px rgba(14,13,12,0.04);
  --shadow-md:0 4px 12px rgba(14,13,12,0.08), 0 2px 4px rgba(14,13,12,0.05);
  --shadow-lg:0 12px 28px rgba(14,13,12,0.12), 0 4px 10px rgba(14,13,12,0.06);
  --shadow-xl:0 24px 56px rgba(14,13,12,0.16), 0 8px 18px rgba(14,13,12,0.08);
  --shadow-brand:0 8px 24px rgba(229,99,27,0.30);

  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  --focus-ring:0 0 0 3px var(--ring);
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  font-size:var(--text-base);
  line-height:var(--lh-relaxed);
  color:var(--text-primary);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-snug);
  color:var(--text-primary);
  margin:0;
}

p{ margin:0; }
img{ display:block; max-width:100%; }
a{ color:var(--text-brand); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
a:hover{ color:var(--brand); }
ul{ margin:0; }

::selection{ background:var(--orange-200); color:var(--neutral-950); }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

/* Skip link (accessibilité clavier) */
.skip-link{
  position:absolute; left:var(--space-4); top:-60px;
  background:var(--ink); color:var(--on-ink);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-md);
  z-index:2000; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top:var(--space-4); color:var(--on-ink); }

/* ============================================================
   UTILITAIRES MUTUALISÉS
   ============================================================ */

/* Rythme vertical des sections */
.l-section{ padding-block:var(--section-y); }
.l-section--tight{ padding-block:var(--space-9); }
.l-section--ink{ background:var(--ink); color:var(--on-ink); }
.l-section--surface{ background:var(--surface); }
.l-section--alt{ background:var(--surface-2); }

/* ---- Eyebrow (kicker tracked-caps : motif signature) ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-xs); letter-spacing:var(--ls-wider);
  text-transform:uppercase; color:var(--text-brand); margin:0;
}
.l-section--ink .eyebrow{ color:var(--brand); }
.eyebrow--bar::before{
  content:""; display:inline-block; width:var(--space-7); height:3px;
  background:var(--brand); border-radius:var(--radius-pill);
}

/* ---- Section heading (eyebrow → titre → lead) ---- */
.section-heading{ display:flex; flex-direction:column; gap:var(--space-4); max-width:62ch; }
.section-heading--center{ align-items:center; text-align:center; margin-inline:auto; }
.section-heading__title{
  font-family:var(--font-display); font-weight:var(--fw-black);
  font-size:clamp(1.875rem,3.4vw,3rem); line-height:var(--lh-tight);
  letter-spacing:var(--ls-tighter); text-wrap:balance;
}
.l-section--ink .section-heading__title{ color:var(--on-ink); }
.section-heading__lead{
  font-size:var(--text-md); line-height:var(--lh-relaxed);
  color:var(--text-secondary); max-width:52ch; text-wrap:pretty;
}
.l-section--ink .section-heading__lead{ color:var(--on-ink-muted); }
.section-heading--center .section-heading__lead{ margin-inline:auto; }

/* ---- Boutons (reprise fidèle du composant Button du DS) ---- */
.btn-l{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2); height:44px; padding:0 20px;
  font-family:var(--font-sans); font-weight:var(--fw-bold);
  font-size:var(--text-base); line-height:1; letter-spacing:0.005em;
  border:1.5px solid transparent; border-radius:var(--radius-md);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.btn-l:active{ transform:scale(0.98); }
.btn-l i,.btn-l svg{ font-size:1.05em; }

.btn-l--sm{ height:36px; padding:0 14px; font-size:var(--text-sm); gap:var(--space-2); }
.btn-l--lg{ height:54px; padding:0 28px; font-size:var(--text-md); gap:var(--space-3); }

.btn-l--primary{ background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm); }
.btn-l--primary:hover{ background:var(--brand-hover); color:var(--on-brand); box-shadow:var(--shadow-md); }

.btn-l--secondary{ background:var(--surface); color:var(--text-primary); border-color:var(--border-strong); }
.btn-l--secondary:hover{ background:var(--surface-2); color:var(--text-primary); }

.btn-l--ghost{ background:transparent; color:var(--text-brand); }
.btn-l--ghost:hover{ background:var(--surface-2); color:var(--brand); }

.btn-l--ink{ background:var(--ink); color:var(--on-ink); }
.btn-l--ink:hover{ background:var(--ink-elevated); color:var(--on-ink); }

/* Bouton primaire posé sur fond ink → glow orange */
.l-section--ink .btn-l--primary,
.hero .btn-l--primary{ box-shadow:var(--shadow-brand); }

.btn-l--block{ display:flex; width:100%; }
.btn-l--uppercase{ text-transform:uppercase; letter-spacing:var(--ls-wider); }

/* ---- Lien fléché ---- */
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-weight:var(--fw-bold); font-size:var(--text-sm);
  color:var(--text-brand);
}
.link-arrow i{ transition:transform var(--dur-base) var(--ease-out); }
.link-arrow:hover i{ transform:translateX(4px); }

/* ---- Chiffres mono (specs / proof) ---- */
.mono{ font-family:var(--font-mono); }

/* ---- Animation d'entrée au scroll (réutilisable) ---- */
/* .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
} */