/* KAYA MOTORSPORT — site vitrine. Feuille unique, mobile-first.
   Tokens issus du design system Kaya (couleurs, typos, formes, espacements).
   Ne pas inventer de valeurs : tout passe par les variables ci-dessous. */

@import url("https://fonts.googleapis.com/css2?family=Michroma&family=Saira:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500&display=swap");

:root{
  /* Carbone — le fond. Jamais de noir pur. */
  --carbon-900:#08080B;--carbon-800:#0A0A0D;--carbon-700:#0D0D13;--carbon-600:#101017;--carbon-500:#15151E;--carbon-400:#1D1D26;
  /* Violet Kaya — le seul accent. */
  --violet-100:#EDE7FF;--violet-200:#CFC2FF;--violet-300:#B29FF2;--violet-500:#8B5CF6;--violet-600:#6F45D6;--violet-700:#3A2A6B;--violet-800:#241C3D;--violet-900:#17122A;
  /* Craie / béton. */
  --craie-100:#FFFFFC;--craie-200:#EDEDF3;--craie-400:#A9A9B4;--craie-600:#6E6E7A;--craie-800:#3D3D46;
  /* Alerte — réservée : ÉPAVE, danger. Jamais décorative. */
  --alerte-500:#FF4D00;--alerte-700:#5C1E00;

  --page:var(--carbon-800);--surface:var(--carbon-600);--surface-sunken:var(--carbon-700);--surface-raised:var(--carbon-500);
  --line:var(--carbon-400);--line-accent:var(--violet-800);
  --text:var(--craie-200);--text-muted:var(--craie-600);--text-accent:var(--violet-500);--text-on-accent:var(--carbon-800);--text-on-craie:var(--carbon-800);
  --accent:var(--violet-500);--accent-hover:var(--violet-300);--accent-pressed:var(--violet-600);--accent-tint:var(--violet-800);
  --danger:var(--alerte-500);
  --focus-ring:var(--violet-500);--selection-bg:var(--violet-500);--selection-fg:var(--carbon-800);
  --state-hover:color-mix(in oklab,var(--violet-500) 14%,transparent);--state-pressed:color-mix(in oklab,var(--violet-500) 26%,transparent);

  --font-logotype:"Michroma",sans-serif;--font-heading:"Saira",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--font-body:"Inter",system-ui,sans-serif;
  --text-display:38px;--text-h1:32px;--text-h2:24px;--text-h3:20px;--text-h4:17px;--text-body-lg:16px;--text-body:14px;--text-caption:13px;--text-label:11px;--text-label-sm:10px;
  --leading-tight:1;--leading-title:1.06;--leading-body:1.6;
  --track-logotype:0.08em;--track-title:0.02em;--track-label:0.18em;
  --weight-title:700;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:22px;--space-6:32px;--space-7:44px;--space-8:64px;--space-9:96px;
  --page-pad-x:20px;--page-pad-y:40px;--max-measure:620px;--max-page:1320px;--sec-gap:48px;

  --radius-xs:2px;--chamfer-sm:10px;--chamfer:16px;--tile-slant:22%;
  --clip-plate:polygon(0 var(--chamfer),var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%);
  --clip-plate-sm:polygon(0 var(--chamfer-sm),var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%);
  --clip-stamp:polygon(0 0,100% 0,100% 58%,90% 100%,0 100%);
  --clip-tile:polygon(var(--tile-slant) 0,100% 0,calc(100% - var(--tile-slant)) 100%,0 100%);
  --shadow-md:0 2px 14px -6px rgba(0,0,0,.75);
  --ease:cubic-bezier(0.2,0,0,1);--dur-fast:90ms;--dur:160ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--font-heading);font-weight:var(--weight-title);line-height:var(--leading-title);letter-spacing:var(--track-title);text-transform:uppercase;text-wrap:pretty}
h1{font-size:var(--text-display)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}h4{font-size:var(--text-h4)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--selection-bg);color:var(--selection-fg)}

/* La seule texture : tissage carbone à 35°. Jamais derrière du corps de texte. */
.k-carbon{background-color:var(--page);background-image:repeating-linear-gradient(35deg,var(--carbon-500) 0 1px,transparent 1px 7px)}
.k-label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.k-label-accent{color:var(--accent)}
.k-wrap{max-width:var(--max-page);margin:0 auto;padding-left:var(--page-pad-x);padding-right:var(--page-pad-x)}
.k-measure{max-width:var(--max-measure)}
.k-lead{font-size:var(--text-body-lg);color:var(--craie-400)}

/* Marque */
.k-mark-tile{width:33px;height:33px;flex:none;background:var(--accent);clip-path:var(--clip-tile);display:inline-flex;align-items:center;justify-content:center}
.k-wordmark{display:flex;align-items:center;gap:5.8px;font-family:var(--font-logotype);font-size:16px;line-height:1;letter-spacing:var(--track-logotype)}
.k-wordmark .k-kaya{display:flex;align-items:center;color:var(--text)}
.k-wordmark .k-mot{color:var(--accent);white-space:nowrap}

/* Barre de navigation — burger en dessous de 900px */
.k-nav{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--page) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.k-nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:12px;padding-bottom:12px}
.k-brand{display:flex;align-items:center;gap:11px}
.k-nav-links{display:none;flex-direction:column;gap:2px}
.k-nav-links.is-open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--carbon-700);border-bottom:1px solid var(--line);padding:var(--space-3) var(--page-pad-x) var(--space-5)}
.k-nav-links a{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--track-label);color:var(--text-muted);white-space:nowrap;padding:10px 0;border-bottom:2px solid transparent;text-transform:uppercase}
.k-nav-links a:hover{color:var(--text)}
.k-nav-links a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent);align-self:flex-start}
.k-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;background:transparent;border:1px solid var(--line);cursor:pointer;clip-path:var(--clip-plate-sm)}
.k-burger i{display:block;height:2px;background:var(--text)}
.k-burger[aria-expanded="true"]{border-color:var(--accent)}
.k-burger[aria-expanded="true"] i{background:var(--accent)}

/* Boutons — coin coupé en bas à droite, jamais arrondi */
.k-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;font-family:var(--font-mono);font-weight:700;font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;text-align:center;clip-path:var(--clip-stamp);cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.k-btn:hover{background:var(--state-hover);color:var(--text);border-color:var(--accent)}
.k-btn:active{background:var(--state-pressed)}
.k-btn-primary{color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}
.k-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent)}
.k-btn-primary:active{background:var(--accent-pressed);color:var(--text-on-accent)}
.k-btn-lg{padding:18px 26px;font-size:var(--text-caption)}
.k-btns{display:flex;flex-wrap:wrap;gap:12px}

/* Tampons */
.k-stamp{display:inline-flex;align-items:center;padding:6px 11px;font-family:var(--font-mono);font-weight:700;font-size:var(--text-label-sm);letter-spacing:var(--track-label);text-transform:uppercase;background:var(--page);color:var(--text);border:1px solid var(--text)}
.k-stamp-accent{color:var(--accent);border-color:var(--accent)}

/* Hero */
.k-hero{padding-top:var(--page-pad-y);padding-bottom:var(--sec-gap);display:flex;flex-direction:column;gap:var(--space-6)}
.k-hero-txt{display:flex;flex-direction:column;gap:var(--space-4);max-width:640px}
.k-hero-side{width:100%;display:flex;flex-direction:column;gap:var(--space-3)}

/* Bandeau chevron */
.k-band{display:block;width:100%;background:var(--page)}

/* Sections */
.k-sec{padding-top:var(--sec-gap);padding-bottom:var(--sec-gap)}
.k-sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-3) var(--space-4);border-top:1px solid var(--line);padding-top:14px;margin-bottom:var(--space-6)}
.k-sec-head p{font-size:var(--text-caption);color:var(--text-muted)}

/* Ligne des types de véhicules */
.k-types{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.k-types span{flex:1 1 auto;background:var(--surface-sunken);padding:12px 14px;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap}

/* Cellules séparées par un filet d'un pixel — services, étapes, specs */
.k-cells{display:flex;flex-wrap:wrap;gap:1px;background:var(--line)}
.k-cells>*{flex:1 1 260px;background:var(--surface-sunken);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.k-cells.k-cells-col{flex-direction:column}
.k-cells.k-cells-col>*{flex:0 0 auto}
.k-cells p{font-size:var(--text-caption);color:var(--text-muted)}
.k-cells .k-more{margin-top:auto;padding-top:var(--space-4);font-family:var(--font-mono);font-weight:700;font-size:var(--text-label);letter-spacing:var(--track-label);color:var(--accent)}
a.k-cell{color:var(--text);transition:background var(--dur-fast) var(--ease)}
a.k-cell:hover{background:var(--surface-raised);color:var(--text)}
a.k-cell:hover .k-more{color:var(--accent-hover)}

/* Listes — marqueur typographique, pas d'icône */
.k-list{display:flex;flex-direction:column;gap:10px}
.k-list li{display:flex;gap:12px;font-size:var(--text-body-lg);color:var(--craie-400)}
.k-list li::before{content:"→";font-family:var(--font-mono);color:var(--accent);flex:none}
.k-list-no li{color:var(--text-muted)}
.k-list-no li::before{content:"✕";color:var(--craie-800)}
.k-cols{display:flex;flex-wrap:wrap;gap:1px;background:var(--line)}
.k-cols>div{flex:1 1 280px;background:var(--surface-sunken);padding:24px 22px;display:flex;flex-direction:column;gap:var(--space-4)}

.k-cells.k-cells-2>*{flex:1 1 46%}

/* Plaque d'appel — bord violet, coins coupés */
.k-cta{border:1px solid var(--line-accent);padding:26px 22px;display:flex;flex-direction:column;gap:var(--space-5)}
.k-cta h2,.k-cta h3{max-width:var(--max-measure)}

/* Note de cadre — mentions techniques et légales */
.k-note{border-left:none;border:1px solid var(--line);background:var(--surface-sunken);padding:16px 18px;font-family:var(--font-mono);font-size:var(--text-caption);line-height:1.7;color:var(--craie-400)}

/* Coordonnées */
.k-coord{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.k-coord div{background:var(--surface-sunken);padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.k-coord dt{font-family:var(--font-mono);font-size:var(--text-label-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.k-coord dd{margin:0;font-family:var(--font-mono);font-weight:700;font-size:var(--text-caption);color:var(--text)}

/* Pied de page */
.k-foot{border-top:1px solid var(--line);padding-top:var(--space-6);padding-bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}
.k-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-6)}
.k-plate-lock{display:inline-flex;align-items:center;gap:11px;padding:12px 14px;background:var(--page);border:1px solid var(--accent);clip-path:var(--clip-plate-sm)}
.k-foot-nav{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-5)}
.k-foot-nav a{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.k-foot-nav a:hover{color:var(--text)}
.k-foot-info{display:flex;flex-direction:column;gap:4px}
.k-foot-info p{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.k-legal{border-top:1px solid var(--line);padding-top:var(--space-4);text-align:center}
.k-legal p{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase}
.k-legal p.k-todo{color:var(--danger)}

@media(min-width:760px){
  :root{--page-pad-x:40px;--page-pad-y:56px;--text-display:52px;--text-h2:28px;--text-h3:22px;--sec-gap:64px}
  .k-hero{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-8)}
  .k-hero-side{width:auto;flex:none;min-width:300px}
  .k-cta{padding:36px 32px;clip-path:var(--clip-plate)}
  .k-cta-row{flex-direction:row;align-items:center;justify-content:space-between}
  .k-cells>*{padding:28px 26px}
  .k-two{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-8);align-items:start}
}
@media(min-width:1000px){
  :root{--page-pad-x:72px;--page-pad-y:64px;--text-display:66px;--text-h2:34px;--text-h3:24px}
  .k-burger{display:none}
  .k-nav-links{display:flex;flex-direction:row;align-items:center;gap:22px}
  .k-nav-links a{padding:6px 2px}
  .k-nav-in{padding-top:14px;padding-bottom:14px}
}