/* ============================================================
   LE SPOT.AGENCY — feuille de style consolidée
   Une entreprise du groupe alt-shift
   Polices (Google Fonts) → tokens (couleurs, typo, espacements,
   effets, base) → layout & composants → images.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Anton&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Tokens ---------- */
/* ============================================================
   LE SPOT — COLOR TOKENS
   Brand is disciplined: vivid yellow + ink black + white + greys.
   ============================================================ */
:root {
  /* --- Brand primary: the LE SPOT yellow --- */
  --yellow-500: #FFD400;   /* the logo yellow */
  --yellow-400: #FFDE33;   /* lighter tint */
  --yellow-300: #FFE970;   /* soft highlight */
  --yellow-200: #FFF3B0;   /* pale wash */
  --yellow-100: #FFFAE0;   /* faintest wash / surfaces */
  --yellow-600: #F0C400;   /* hover / pressed */
  --yellow-700: #D9AE00;   /* deep, on light bg */

  /* --- Ink (near-black neutral ramp) --- */
  --ink-900: #0A0A0A;      /* primary text / dark sections */
  --ink-800: #161616;
  --ink-700: #232323;
  --ink-600: #383838;
  --ink-500: #565656;
  --ink-400: #7A7A7A;
  --ink-300: #A8A8A8;
  --ink-200: #D2D2D2;
  --ink-150: #E4E4E4;
  --ink-100: #EFEFEF;
  --ink-50:  #F6F6F5;      /* warm-leaning off white */
  --white:   #FFFFFF;

  /* --- Semantic / status (used sparingly, in product UI) --- */
  --success: #1E9E5A;
  --success-bg: #E5F5EC;
  --warning: #E8920C;
  --warning-bg: #FCF0DC;
  --danger:  #DC3A2B;
  --danger-bg: #FBE7E4;
  --info:    #2563C9;
  --info-bg: #E5EDFB;

  /* ============ SEMANTIC ALIASES ============ */
  /* Text */
  --text-strong: var(--ink-900);
  --text-body:   var(--ink-700);
  --text-muted:  var(--ink-500);
  --text-faint:  var(--ink-400);
  --text-on-yellow: var(--ink-900);
  --text-on-dark:   var(--white);
  --text-inverse:   var(--white);

  /* Surfaces */
  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-dark:    var(--ink-900);
  --surface-dark-2:  var(--ink-800);
  --surface-brand:   var(--yellow-500);
  --surface-brand-soft: var(--yellow-100);

  /* Lines */
  --border-subtle: var(--ink-150);
  --border-strong: var(--ink-900);
  --border-brand:  var(--yellow-500);

  /* Interactive */
  --accent:        var(--yellow-500);
  --accent-hover:  var(--yellow-600);
  --accent-press:  var(--yellow-700);
  --focus-ring:    var(--ink-900);
}


/* ============================================================
   LE SPOT — TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Anton', 'Archivo', system-ui, sans-serif;     /* huge poster headlines */
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;/* headings + UI + body */
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights (Archivo) */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Fluid display scale — billboard energy */
  --fs-display:  clamp(3.5rem, 9vw, 8rem);   /* @kind font */
  --fs-h1:       clamp(2.5rem, 6vw, 5rem);   /* @kind font */
  --fs-h2:       clamp(2rem, 4.5vw, 3.5rem); /* @kind font */
  --fs-h3:       clamp(1.5rem, 3vw, 2.25rem);/* @kind font */
  --fs-h4:       clamp(1.25rem, 2vw, 1.5rem);/* @kind font */
  --fs-lead:     clamp(1.125rem, 1.6vw, 1.5rem); /* @kind font */
  --fs-body:     1rem;       /* @kind font */
  --fs-sm:       0.875rem;   /* @kind font */
  --fs-xs:       0.75rem;    /* @kind font */
  --fs-label:    0.6875rem;  /* @kind font */

  /* Line heights */
  --lh-tight:   0.95;  /* @kind other */
  --lh-snug:    1.1;   /* @kind other */
  --lh-heading: 1.15;  /* @kind other */
  --lh-body:    1.6;   /* @kind other */
  --lh-relaxed: 1.75;  /* @kind other */

  /* Letter spacing */
  --ls-mega:   -0.03em;   /* @kind other */
  --ls-tight:  -0.015em;  /* @kind other */
  --ls-normal: 0;         /* @kind other */
  --ls-wide:   0.04em;    /* @kind other */
  --ls-label:  0.14em;    /* @kind other */
}

/* Convenience utility classes (optional, used by cards/site) */
.t-display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-mega); text-transform: uppercase; }
.t-overline { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 700; }


/* ============================================================
   LE SPOT — SPACING TOKENS  (8px base rhythm)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Section rhythm */
  --section-y: clamp(4rem, 9vw, 9rem); /* @kind spacing */
  --gutter:    clamp(1.25rem, 5vw, 5rem); /* @kind spacing */
  --container: 1280px;
  --container-wide: 1480px;
  --container-text: 720px;
}


/* ============================================================
   LE SPOT — RADII, SHADOWS, BORDERS, MOTION
   The logo is a rounded square → the radius motif is generous
   and consistent. Shadows are crisp & low-blur (billboard, not soft UI).
   ============================================================ */
:root {
  /* Radii — echoes the rounded-square app mark */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-mark: 22%;   /* the logo tile corner ratio */

  /* Shadows — crisp, slightly warm, low spread */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.06);
  --shadow-sm: 0 2px 6px rgba(10,10,10,0.08);
  --shadow-md: 0 8px 24px rgba(10,10,10,0.10);
  --shadow-lg: 0 18px 48px rgba(10,10,10,0.14);
  --shadow-yellow: 0 14px 40px rgba(255,212,0,0.45);
  /* Hard "sticker" shadow — signature offset block */
  --shadow-block: 8px 8px 0 var(--ink-900);
  --shadow-block-yellow: 8px 8px 0 var(--yellow-500);
  --shadow-block-sm: 4px 4px 0 var(--ink-900);

  /* Borders */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-hair: 1px solid var(--border-subtle);
  --border-ink: 2px solid var(--ink-900);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   480ms; /* @kind other */
}


/* ============================================================
   LE SPOT — BASE RESET + element defaults
   Lightweight: maps tokens onto bare HTML so any page that links
   styles.css inherits the brand without extra classes.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--yellow-500); color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Shared layout helpers used by cards + site (safe, namespaced-ish) */
.ls-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.ls-overline {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}


/* ---------- Layout & composants ---------- */
/* ============================================================
   LE SPOT.AGENCY — site de communication
   Layout + components on top of the design-system tokens.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--ink-900); color: var(--white); }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }
.section--yellow { background: var(--yellow-500); color: var(--ink-900); }
.section--yellow h2 { color: var(--ink-900); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6rem; color: var(--text-muted);
}
.section--dark .eyebrow { color: var(--yellow-500); }
.section--yellow .eyebrow { color: var(--ink-900); }
.eyebrow::before { content:""; width: 26px; height: 2px; background: currentColor; display:inline-block; }
.section-head { max-width: 760px; margin-bottom: var(--space-7); }
.section-head h2 {
  font-size: var(--fs-h2); font-weight: 900; line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight); margin-top: var(--space-3);
}
.section-head p { font-size: var(--fs-lead); color: var(--text-muted); margin-top: var(--space-4); max-width: 60ch; }
.section--dark .section-head p { color: var(--ink-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .01em; padding: .92rem 1.5rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; transition: transform var(--dur-fast) var(--ease-out),
    background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base);
  white-space: nowrap; text-decoration: none;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--yellow-500); color: var(--ink-900); }
.btn--primary:hover { background: var(--yellow-600); transform: translateY(-2px); box-shadow: var(--shadow-yellow); }
.btn--primary:active { transform: translateY(0); }
.btn--ink { background: var(--ink-900); color: #fff; }
.btn--ink:hover { background: var(--ink-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn--ghost:hover { background: var(--ink-900); color: #fff; }
.section--dark .btn--ghost { color:#fff; border-color: rgba(255,255,255,.4); }
.section--dark .btn--ghost:hover { background:#fff; color: var(--ink-900); border-color:#fff; }
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--fs-body); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Top nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  transition: background var(--dur-base), box-shadow var(--dur-base), padding var(--dur-base);
}
.nav.is-stuck { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border-subtle); padding-block: .65rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark { width: 40px; height: 40px; border-radius: var(--radius-mark); display:block; box-shadow: var(--shadow-sm); }
.brand__type { display:flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink-900); }
.brand__sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; color: var(--ink-500); text-transform: uppercase; margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__link { padding: .5rem .85rem; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); transition: background var(--dur-fast), color var(--dur-fast); }
.nav__link:hover { background: var(--ink-100); color: var(--ink-900); }
.nav__cta { display: flex; align-items: center; gap: .5rem; }
.nav__burger { display:none; width:44px; height:44px; border-radius: var(--radius-sm); border:2px solid var(--ink-900); background:#fff; align-items:center; justify-content:center; cursor:pointer; }
.nav__burger svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero { background: var(--ink-900); color:#fff; padding-top: 8.5rem; padding-bottom: var(--section-y); overflow: hidden; position: relative; }
.hero::after { content:""; position:absolute; right:-8%; top:-20%; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(255,212,0,.16), transparent 62%); pointer-events:none; }
.hero__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(1.5rem,3.5vw,3.5rem); align-items: center; }
.hero__eyebrow { color: var(--yellow-500); }
.hero h1 {
  color:#fff; font-weight: 900; font-size: var(--fs-h1); line-height: .98;
  letter-spacing: var(--ls-mega); margin-top: 1.4rem; text-wrap: balance;
}
.hero h1 .hl { position: relative; color: var(--ink-900); background: var(--yellow-500); padding: 0 .18em; border-radius: var(--radius-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero__lead { font-size: var(--fs-lead); color: var(--ink-200); margin-top: 1.7rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__stats { display:flex; gap: 2.4rem; margin-top: 3rem; flex-wrap: wrap; }
.hero__stat .n { font-weight: 900; font-size: 2rem; color: var(--yellow-500); letter-spacing: -.02em; }
.hero__stat .l { font-size: var(--fs-xs); color: var(--ink-300); text-transform: uppercase; letter-spacing: .08em; margin-top: .2rem; }
.hero__visual { position: relative; }
.hero__visual .slot-img { width: 100%; height: auto; aspect-ratio: 5/6; box-shadow: var(--shadow-lg); }
.hero__tag {
  position: absolute; left: -22px; bottom: 28px; background: var(--yellow-500); color: var(--ink-900);
  font-weight: 800; font-size: var(--fs-sm); padding: .7rem 1.1rem; border-radius: var(--radius-md);
  box-shadow: var(--shadow-block-sm); display:flex; align-items:center; gap:.5rem;
}
.hero__tag svg { width: 18px; height: 18px; }

/* Marquee strip */
.marquee { background: var(--yellow-500); color: var(--ink-900); overflow: hidden; border-block: 3px solid var(--ink-900); }
.marquee__track { display: inline-flex; gap: 2.5rem; align-items:center; padding-block: .75rem; white-space: nowrap; animation: marquee 28s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; }
.marquee__track .dot { width:9px; height:9px; background: var(--ink-900); border-radius:50%; display:inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation: none; } }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svc {
  background: var(--surface-card); border: 2px solid var(--ink-900); border-radius: var(--radius-lg);
  padding: 1.8rem; display:flex; flex-direction: column; gap: 1rem; position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base);
}
.svc:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-block); }
.svc__top { display:flex; align-items:center; justify-content: space-between; }
.svc__num { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-400); }
.svc__icon { width: 54px; height: 54px; border-radius: var(--radius-md); background: var(--yellow-500); display:flex; align-items:center; justify-content:center; color: var(--ink-900); }
.svc__icon svg { width: 28px; height: 28px; stroke-width: 2; }
.svc h3 { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.01em; }
.svc p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.svc__list { list-style: none; padding: 0; margin-top: auto; display:flex; flex-wrap: wrap; gap: .4rem; }
.svc__list li { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-700); background: var(--ink-100); padding: .3rem .6rem; border-radius: var(--radius-pill); }
.svc--feature { background: var(--ink-900); color:#fff; }
.svc--feature h3 { color:#fff; }
.svc--feature p { color: var(--ink-300); }
.svc--feature .svc__num { color: var(--ink-500); }
.svc--feature .svc__list li { background: var(--ink-700); color: var(--ink-100); }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; counter-reset: step; }
.step { padding-top: 1.4rem; border-top: 3px solid var(--ink-900); }
.section--dark .step { border-color: var(--yellow-500); }
.step__n { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--yellow-500); -webkit-text-stroke: 0; }
.section--dark .step__n { color: var(--yellow-500); }
.step h3 { font-size: var(--fs-h4); font-weight: 800; margin-top: .6rem; }
.step p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: .5rem; }
.section--dark .step p { color: var(--ink-300); }

/* ---------- Réalisations ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.work { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--ink-900); background:#000; }
.work .slot-img { width: 100%; height: auto; aspect-ratio: 16/11; display: block; }
.work--tall .slot-img { aspect-ratio: 4/5; }
.work__meta { position: absolute; inset: auto 0 0 0; padding: 1.2rem 1.3rem; background: linear-gradient(transparent, rgba(10,10,10,.86)); color:#fff; display:flex; align-items:flex-end; justify-content: space-between; gap: 1rem; }
.work__meta h3 { color:#fff; font-size: var(--fs-h4); font-weight: 800; }
.work__cat { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--yellow-500); text-transform: uppercase; letter-spacing: .1em; }
.work__arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--yellow-500); color: var(--ink-900); display:flex; align-items:center; justify-content:center; flex: none; transition: transform var(--dur-base) var(--ease-snap); }
.work:hover .work__arrow { transform: translate(3px,-3px) rotate(-8deg); }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.stat { text-align: left; }
.stat .n { font-family: var(--font-display); font-size: clamp(3rem,6vw,5rem); line-height: .9; letter-spacing: -.01em; }
.section--yellow .stat .n { color: var(--ink-900); }
.stat .l { font-weight: 600; font-size: var(--fs-sm); margin-top: .6rem; max-width: 22ch; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.quote { background: var(--surface-card); border-radius: var(--radius-lg); border: var(--border-hair); padding: 1.8rem; display:flex; flex-direction: column; gap: 1.2rem; box-shadow: var(--shadow-sm); }
.quote__stars { display:flex; gap:.15rem; color: var(--yellow-600); }
.quote__stars svg { width:18px; height:18px; fill: currentColor; stroke: none; }
.quote p { font-size: 1.05rem; line-height: 1.55; color: var(--ink-800); font-weight: 500; }
.quote__who { display:flex; align-items:center; gap:.8rem; margin-top: auto; }
.quote__av { width: 44px; height: 44px; border-radius: 50%; background: var(--yellow-500); color: var(--ink-900); display:flex; align-items:center; justify-content:center; font-weight: 800; }
.quote__who b { font-weight: 700; font-size: var(--fs-sm); display:block; }
.quote__who span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--yellow-500); color: var(--ink-900); border-radius: var(--radius-2xl); padding: clamp(2.4rem,5vw,4rem); display:flex; align-items:center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-shadow: var(--shadow-block); border: 3px solid var(--ink-900); }
.cta-band h2 { font-size: var(--fs-h2); font-weight: 900; line-height: .98; letter-spacing: var(--ls-tight); max-width: 16ch; }
.cta-band p { margin-top: .8rem; font-weight: 500; max-width: 40ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); }
.contact__info .line { display:flex; gap: .9rem; align-items:flex-start; padding-block: 1rem; border-bottom: var(--border-hair); }
.contact__info .line svg { width: 22px; height: 22px; color: var(--ink-900); flex:none; margin-top: 2px; }
.contact__info .line b { display:block; font-weight: 700; }
.contact__info .line span { color: var(--text-muted); font-size: var(--fs-sm); }
.form { background: var(--surface-card); border: 2px solid var(--ink-900); border-radius: var(--radius-xl); padding: clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction: column; gap: 1rem; }
.field { display:flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field input, .field textarea, .field select {
  border: 2px solid var(--ink-200); border-radius: var(--radius-sm); padding: .8rem .9rem; font-size: var(--fs-sm);
  background: var(--white); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); font-family: var(--font-sans);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 3px var(--yellow-300); }
.field--row { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-900); color: var(--ink-300); padding-block: var(--space-8) var(--space-6); }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: var(--space-7); border-bottom: 1px solid var(--ink-700); }
.footer h4 { color:#fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; font-weight: 700; }
.footer a { display:block; padding-block: .35rem; color: var(--ink-300); font-size: var(--fs-sm); transition: color var(--dur-fast); }
.footer a:hover { color: var(--yellow-500); }
.footer__brand p { font-size: var(--fs-sm); max-width: 34ch; margin-top: 1rem; color: var(--ink-400); }
.footer__social { display:flex; gap:.6rem; margin-top: 1.4rem; }
.footer__social a { width: 40px; height: 40px; border-radius: var(--radius-sm); border:1px solid var(--ink-700); display:flex; align-items:center; justify-content:center; padding:0; }
.footer__social svg { width: 18px; height: 18px; }
.footer__group { display:flex; flex-direction:column; gap:2px; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-700); }
.footer__group-line { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.footer__group-name { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: #fff; }
.footer__bottom { display:flex; align-items:center; justify-content: space-between; padding-top: var(--space-5); font-size: var(--fs-xs); color: var(--ink-500); flex-wrap: wrap; gap: 1rem; }
.footer__bottom > span:last-child { display:flex; align-items:center; gap: .75rem; white-space: nowrap; }
.footer__bottom a { display:inline; padding:0; }

/* ---------- Legal / content pages ---------- */
.legal { background: var(--surface-page); }
.legal__hero { background: var(--ink-900); color:#fff; padding: 9rem var(--gutter) 3rem; }
.legal__hero .wrap { max-width: var(--container-text); }
.legal__hero h1 { color:#fff; font-size: var(--fs-h1); font-weight: 900; letter-spacing: var(--ls-mega); line-height: 1; }
.legal__hero p { color: var(--ink-300); margin-top: 1rem; font-size: var(--fs-lead); }
.legal__body { padding-block: var(--space-8); }
.legal__body .wrap { max-width: var(--container-text); }
.legal__body h2 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 2px solid var(--ink-150); }
.legal__body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal__body h3 { font-size: var(--fs-h4); font-weight: 800; margin-top: var(--space-5); }
.legal__body p { color: var(--text-body); margin-top: 1rem; line-height: var(--lh-relaxed); }
.legal__body ul { margin-top: 1rem; padding-left: 1.2rem; color: var(--text-body); line-height: var(--lh-relaxed); }
.legal__body li { margin-top: .4rem; }
.legal__body a.inline { color: var(--ink-900); font-weight: 700; text-decoration: underline; text-decoration-color: var(--yellow-500); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.legal__body strong { color: var(--text-strong); font-weight: 700; }
.legal__updated { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-6); }
.legal__back { display:inline-flex; align-items:center; gap:.5rem; margin-top: 2.4rem; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); white-space: nowrap; }
.legal__back svg { width: 18px; height: 18px; flex: none; }
.legal__back:hover { color: var(--ink-600); }

/* Slim footer for content/legal pages */
.footer--slim { padding-block: var(--space-6); }
.footer--slim .footer__row { display:flex; align-items:center; justify-content:space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer--slim .footer__links { display:flex; align-items:center; gap: 1.5rem; flex-wrap: wrap; }
.footer--slim .footer__links a { padding:0; font-size: var(--fs-sm); font-weight: 600; }
.footer--slim .footer__copy { display:flex; align-items:center; justify-content:space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--ink-700); font-size: var(--fs-xs); color: var(--ink-500); }
@media (max-width: 680px){
  .footer--slim .footer__row { flex-direction: column; align-items:flex-start; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Mobile ---------- */
.mobile-menu { display:none; }
@media (max-width: 980px){
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 540px; }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .quotes { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .nav__links, .nav__cta .btn { display:none; }
  .nav__burger { display:flex; }
  .svc-grid, .work-grid, .stats, .steps, .contact-grid, .field--row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer__bottom { flex-direction: column; align-items:flex-start; }
  .mobile-menu.open { display:block; position: fixed; inset: 0; z-index: 99; background: var(--ink-900); padding: 6rem var(--gutter) 2rem; }
  .mobile-menu.open a { color:#fff; font-size: 1.6rem; font-weight: 800; padding-block: .8rem; border-bottom: 1px solid var(--ink-700); }
  .mobile-menu.open .btn { margin-top: 1.4rem; }
}


/* ---------- Images (ex-<image-slot> du design system, désormais de vraies <img>) ---------- */
.slot-img { display: block; width: 100%; object-fit: cover; }
.hero__visual .slot-img { border-radius: 20px; }