/* ==========================================================================
   Idtonic — feuille de style principale
   CSS natif uniquement (nesting, @layer, light-dark(), oklch, :has(),
   container queries, scroll-driven animations, @starting-style).
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;

/* --------------------------------------------------------------------------
   Polices auto-hébergées (aucun appel externe → conforme RGPD)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Transitions entre pages (accueil ↔ mentions légales) */
@view-transition { navigation: auto; }

/* Permet d'animer height: auto (accordéons) */
:root { interpolate-size: allow-keywords; }

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, picture, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, li, blockquote { text-wrap: pretty; }
  h1, h2, h3, h4 { text-wrap: balance; }
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Surfaces & encre — basculent automatiquement en mode sombre */
    --paper:    light-dark(oklch(97.6% 0.006 70), oklch(16.5% 0.008 30));
    --paper-2:  light-dark(oklch(94.4% 0.009 70), oklch(20.5% 0.01 30));
    --paper-3:  light-dark(oklch(100% 0 0),       oklch(23.5% 0.012 30));
    --ink:      light-dark(oklch(19% 0.012 30),   oklch(95.5% 0.006 70));
    --muted:    light-dark(oklch(44% 0.012 30),   oklch(74% 0.01 70));
    --line:     light-dark(oklch(19% 0.012 30 / 0.12), oklch(95% 0.01 70 / 0.13));
    --line-strong: light-dark(oklch(19% 0.012 30 / 0.24), oklch(95% 0.01 70 / 0.26));

    /* Marque — le rouge de l'éclair Idtonic */
    --brand:      oklch(53% 0.205 24);
    --brand-hi:   oklch(62% 0.215 26);
    --brand-ink:  light-dark(oklch(48% 0.195 24), oklch(70% 0.17 24));
    --brand-soft: light-dark(oklch(53% 0.205 24 / 0.08), oklch(62% 0.215 26 / 0.16));
    --on-brand:   oklch(99% 0.004 70);

    /* Typographie */
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --step-1:  clamp(1.15rem, 1.06rem + 0.45vw, 1.4rem);
    --step-2:  clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
    --step-3:  clamp(1.8rem, 1.4rem + 1.9vw, 3rem);
    --step-4:  clamp(2.3rem, 1.6rem + 3.4vw, 4.6rem);
    --step-5:  clamp(2.9rem, 1.5rem + 6.6vw, 8.4rem);

    /* Espacements & formes */
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --section: clamp(4.5rem, 3rem + 7vw, 9rem);
    --max: 82rem;
    --radius-s: 0.5rem;
    --radius: 1rem;
    --radius-l: 1.75rem;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --shadow: 0 1px 2px oklch(0% 0 0 / 0.06), 0 8px 24px -8px oklch(0% 0 0 / 0.14);
    --shadow-l: 0 2px 4px oklch(0% 0 0 / 0.05), 0 30px 60px -20px oklch(0% 0 0 / 0.3);

    --header-h: 4.5rem;
  }

  /* Sections « nuit » : on force le schéma sombre localement,
     tous les tokens light-dark() s'inversent pour ce sous-arbre. */
  .is-night { color-scheme: dark; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  html {
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    hanging-punctuation: first last;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    min-block-size: 100svh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
  }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  a:hover { color: var(--brand-ink); }

  :focus-visible {
    outline: 2px solid var(--brand-hi);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection { background: var(--brand); color: var(--on-brand); }

  strong { font-weight: 600; }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--section);
    position: relative;
    background: var(--paper);
    color: var(--ink);
  }
  .section--alt { background: var(--paper-2); }

  .section-head {
    display: grid;
    gap: 1.25rem;
    margin-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    max-inline-size: 52rem;

    & h2 { font-size: var(--step-4); }
    & p { font-size: var(--step-1); color: var(--muted); max-inline-size: 42rem; }
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-ink);

    &::before {
      content: "";
      inline-size: 1.6rem;
      block-size: 2px;
      background: currentColor;
    }
  }
}

/* --------------------------------------------------------------------------
   Composants
   -------------------------------------------------------------------------- */
@layer components {

  /* Lien d'évitement */
  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-s);
    translate: 0 -200%;
    transition: translate 0.2s var(--ease-out);
    &:focus { translate: 0 0; }
  }

  /* Logo */
  .logo {
    display: inline-flex;
    color: var(--ink);
    & svg { inline-size: 7.5rem; block-size: auto; }
    &:hover { color: var(--ink); }
  }

  /* Boutons */
  .btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.4rem;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.25s, color 0.25s, border-color 0.25s, scale 0.25s var(--ease-out);

    & .btn__icon {
      display: grid;
      place-items: center;
      inline-size: 1.6rem;
      block-size: 1.6rem;
      margin-inline-end: -0.6rem;
      border-radius: 50%;
      background: var(--btn-fg);
      color: var(--btn-bg);
      transition: rotate 0.35s var(--ease-out);
      & svg { inline-size: 0.8rem; }
    }

    &:hover { --btn-bg: var(--brand); --btn-fg: var(--on-brand); color: var(--btn-fg); }
    &:hover .btn__icon { rotate: -45deg; }
    &:active { scale: 0.97; }
  }
  .btn--brand { --btn-bg: var(--brand); --btn-fg: var(--on-brand);
    &:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
  }
  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border-color: var(--line-strong);
    & .btn__icon { background: var(--ink); color: var(--paper); }
    &:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); border-color: var(--ink); }
    &:hover .btn__icon { background: var(--paper); color: var(--ink); }
  }

  /* Lien texte flèche */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink);
    background: linear-gradient(currentColor 0 0) no-repeat 0 100% / 0% 1px;
    transition: background-size 0.4s var(--ease-out), color 0.2s;
    & svg { inline-size: 0.9em; transition: translate 0.3s var(--ease-out); }
    &:hover { color: var(--brand-ink); background-size: 100% 1px; }
    &:hover svg { translate: 0.25rem 0; }
  }

  /* Puces / tags */
  .chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--step--1);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* Apparition au scroll — 100 % CSS (scroll-driven animations).
     Les navigateurs sans support affichent simplement le contenu. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      @keyframes reveal {
        from { opacity: 0; translate: 0 2.5rem; }
      }
    }
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
@layer sections {

  /* ---------------- En-tête ---------------- */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    block-size: var(--header-h);
    transition: translate 0.4s var(--ease-out), background 0.3s, box-shadow 0.3s;

    &[data-scrolled] {
      background: color-mix(in oklch, var(--paper) 78%, transparent);
      backdrop-filter: blur(16px) saturate(1.6);
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
      box-shadow: 0 1px 0 var(--line);
    }
    &[data-hidden] { translate: 0 -100%; }

    & .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      block-size: 100%;
    }
  }

  .nav-desktop {
    display: none;
    align-items: center;
    gap: 2.25rem;

    & ul { display: flex; gap: 2rem; }
    & a:not(.btn) {
      position: relative;
      font-size: 0.95rem;
      font-weight: 500;
      text-decoration: none;
      &::after {
        content: "";
        position: absolute;
        inset: auto 0 -0.3rem;
        block-size: 2px;
        background: var(--brand);
        scale: 0 1;
        transform-origin: right;
        transition: scale 0.35s var(--ease-out);
      }
      &:hover { color: var(--ink); }
      &:hover::after, &[aria-current="true"]::after { scale: 1 1; transform-origin: left; }
    }
    & .btn { padding: 0.75rem 1.15rem; font-size: 0.95rem; }

    @media (width >= 62rem) { display: flex; }
  }

  /* Bouton menu mobile + menu en popover natif */
  .menu-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    & span, &::before, &::after {
      content: "";
      grid-area: 1 / 1;
      inline-size: 1.1rem;
      block-size: 1.5px;
      background: currentColor;
    }
    &::before { translate: 0 -0.3rem; }
    &::after  { translate: 0 0.3rem; }
    & span { opacity: 0; }

    @media (width >= 62rem) { display: none; }
  }

  .nav-mobile {
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;

    opacity: 0;
    translate: 0 -1rem;
    transition: opacity 0.35s var(--ease-out), translate 0.45s var(--ease-out),
                overlay 0.35s allow-discrete, display 0.35s allow-discrete;

    &:popover-open {
      display: flex;
      opacity: 1;
      translate: 0 0;
      @starting-style { opacity: 0; translate: 0 -1rem; }
    }

    & ul { display: grid; gap: 0.25rem; }
    & ul a {
      display: block;
      padding-block: 0.4rem;
      font-family: var(--font-display);
      font-size: var(--step-4);
      font-weight: 700;
      letter-spacing: -0.03em;
      text-decoration: none;
    }
    & .menu-close {
      position: absolute;
      inset-block-start: 0.8rem;
      inset-inline-end: var(--gutter);
      display: grid;
      place-items: center;
      inline-size: 2.9rem;
      block-size: 2.9rem;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      & svg { inline-size: 1rem; }
    }
    & .nav-mobile__foot { display: grid; gap: 0.35rem; color: var(--muted); }
  }

  /* ---------------- Hero ---------------- */
  .hero {
    position: relative;
    isolation: isolate;
    min-block-size: 100svh;
    padding-block: calc(var(--header-h) + clamp(2rem, 1rem + 5vw, 5rem)) clamp(3rem, 2rem + 4vw, 5rem);
    display: grid;
    align-items: center;
    overflow: clip;

    & .wrap {
      display: grid;
      gap: clamp(3rem, 2rem + 4vw, 5rem);
      align-items: center;
      @media (width >= 62rem) { grid-template-columns: 1.05fr 1fr; }
    }
  }

  /* Fond : halo de marque animé + grain */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    &::before {
      content: "";
      position: absolute;
      inset: -20% -10% auto auto;
      inline-size: min(70rem, 120vw);
      aspect-ratio: 1;
      background: conic-gradient(from var(--angle),
        oklch(62% 0.215 26 / 0.22), oklch(80% 0.12 60 / 0.16),
        oklch(70% 0.1 300 / 0.12), oklch(62% 0.215 26 / 0.22));
      border-radius: 50%;
      filter: blur(80px);
      animation: spin 24s linear infinite;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 4.5rem 4.5rem;
      mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 20%, transparent 75%);
      opacity: 0.6;
    }
  }
  @keyframes spin { to { --angle: 360deg; } }

  .hero__text {
    display: grid;
    gap: 1.6rem;
    justify-items: start;
  }

  .hero__title {
    font-size: var(--step-5);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-weight: 800;

    & .accent {
      display: inline-block;
      color: var(--brand-ink);
      font-style: italic;
      font-weight: 600;
      letter-spacing: -0.03em;
    }
  }

  .hero__lead {
    font-size: var(--step-1);
    color: var(--muted);
    max-inline-size: 34rem;
  }

  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-block-start: 1rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--muted);
    & strong { display: block; color: var(--ink); font-size: var(--step-0); font-family: var(--font-display); }
  }

  /* ---------------- Vitrine (devices) ---------------- */
  .showcase {
    position: relative;
    display: grid;
    gap: 1.5rem;
  }

  .showcase__stage {
    position: relative;
    padding-inline-end: clamp(2rem, 1rem + 5vw, 4.5rem);
    padding-block-end: clamp(1.5rem, 1rem + 3vw, 3rem);
  }

  .device-desktop {
    position: relative;
    border-radius: 0.9rem;
    background: oklch(18% 0.01 30);
    padding: 1.8rem 0.5rem 0.5rem;
    box-shadow: var(--shadow-l);
    rotate: -1.5deg;
    /* Barre de navigateur */
    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0.7rem;
      inset-inline-start: 0.8rem;
      inline-size: 0.5rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: oklch(65% 0.2 25);
      box-shadow: 0.8rem 0 oklch(80% 0.15 85), 1.6rem 0 oklch(72% 0.17 145);
    }
  }

  .device-mobile {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: clamp(5.5rem, 3rem + 9vw, 9.5rem);
    padding: 0.45rem;
    border-radius: 1.4rem;
    background: oklch(18% 0.01 30);
    box-shadow: var(--shadow-l);
    rotate: 4deg;
    & .screen { border-radius: 1rem; aspect-ratio: 96 / 170; }
  }

  .screen {
    position: relative;
    overflow: hidden;
    border-radius: 0.45rem;
    aspect-ratio: 756 / 425;
    background: oklch(25% 0.01 30);

    & img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: top;
      opacity: 0;
      scale: 1.04;
      transition: opacity 0.9s var(--ease-out), scale 1.6s var(--ease-out);
    }
    & img.is-active { opacity: 1; scale: 1; }
  }

  .showcase__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--step--1);
    color: var(--muted);

    & .showcase__name { color: var(--ink); font-weight: 600; font-size: var(--step-0); }
  }

  .showcase__dots {
    display: flex;
    gap: 0.4rem;
    & button {
      inline-size: 1.6rem;
      block-size: 0.3rem;
      border-radius: 999px;
      background: var(--line-strong);
      transition: background 0.3s, inline-size 0.4s var(--ease-out);
      &[aria-current="true"] { background: var(--brand); inline-size: 2.6rem; }
    }
  }

  /* ---------------- Bandeau défilant ---------------- */
  .ticker {
    overflow: clip;
    background: var(--brand);
    color: var(--on-brand);
    padding-block: 1.1rem;
    rotate: -1.2deg;
    margin-block: -1rem;
    position: relative;
    z-index: 2;

    & ul {
      display: flex;
      gap: 2.5rem;
      inline-size: max-content;
      animation: ticker 38s linear infinite;
    }
    & li {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
      &::after { content: "✦"; font-size: 0.6em; opacity: 0.7; }
    }
    &:hover ul { animation-play-state: paused; }
  }
  @keyframes ticker { to { translate: -50% 0; } }

  /* ---------------- Agence ---------------- */
  .statement {
    display: grid;
    gap: 2rem;
    margin-block-end: clamp(3rem, 2rem + 4vw, 6rem);

    @media (width >= 62rem) {
      grid-template-columns: 1.1fr 1fr;
      align-items: end;
    }

    & .statement__title {
      font-size: var(--step-5);
      line-height: 0.95;
      letter-spacing: -0.045em;
      & em { font-style: normal; color: var(--brand-ink); }
    }
    & .statement__text { display: grid; gap: 1rem; font-size: var(--step-1); color: var(--muted); }
    & .statement__text a { color: var(--ink); }
  }

  .pillars {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .pillar {
    container-type: inline-size;
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1.75rem;
    border-radius: var(--radius-l);
    background: var(--paper-3);
    border: 1px solid var(--line);
    text-decoration: none;
    overflow: hidden;
    transition: translate 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.3s;

    & .pillar__icon {
      display: grid;
      place-items: center;
      inline-size: 3.25rem;
      block-size: 3.25rem;
      border-radius: 1rem;
      background: var(--brand-soft);
      color: var(--brand-ink);
      margin-block-end: 1.25rem;
      transition: background 0.3s, color 0.3s, rotate 0.5s var(--ease-out);
      & svg { inline-size: 1.6rem; }
    }
    & h3 { font-size: var(--step-2); }
    & .pillar__hook { font-weight: 500; }
    & p:last-of-type { color: var(--muted); font-size: 0.95rem; }
    & .pillar__more {
      margin-block-start: 0.75rem;
      font-size: var(--step--1);
      font-weight: 500;
      color: var(--brand-ink);
    }

    &:hover {
      color: var(--ink);
      translate: 0 -0.35rem;
      box-shadow: var(--shadow-l);
      border-color: var(--line-strong);
    }
    &:hover .pillar__icon { background: var(--brand); color: var(--on-brand); rotate: -8deg; }
  }

  /* ---------------- Méthode ---------------- */
  .about-grid {
    display: grid;
    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
    @media (width >= 62rem) { grid-template-columns: 1.2fr 1fr; }
  }

  .prose {
    display: grid;
    gap: 1.1rem;
    font-size: var(--step-1);
    color: var(--muted);
    & strong { color: var(--ink); }
  }

  .facts {
    display: grid;
    gap: 1.5rem;
    align-content: start;

    & .fact {
      padding: 1.5rem 1.6rem;
      border-radius: var(--radius-l);
      background: var(--paper-3);
      border: 1px solid var(--line);
    }
    & h3 {
      font-size: var(--step--1);
      font-family: var(--font-body);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-ink);
      margin-block-end: 0.75rem;
    }
    & .fact__big { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
  }

  .checklist {
    display: grid;
    gap: 0.55rem;
    & li { display: flex; gap: 0.7rem; align-items: baseline; }
    & li::before {
      content: "";
      flex: none;
      inline-size: 1.05rem;
      block-size: 1.05rem;
      translate: 0 0.15rem;
      border-radius: 50%;
      background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23c8102e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
    }
  }

  .steps {
    counter-reset: step;
    display: grid;
    gap: 1px;
    margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;

    & li {
      counter-increment: step;
      display: grid;
      gap: 2.5rem;
      align-content: space-between;
      padding: 1.5rem;
      background: var(--paper);
      font-weight: 500;
      line-height: 1.3;
      transition: background 0.3s, color 0.3s;
      &::before {
        content: counter(step, decimal-leading-zero);
        font-family: var(--font-display);
        font-size: var(--step-3);
        font-weight: 700;
        line-height: 1;
        color: var(--brand-ink);
      }
      &:hover { background: var(--brand); color: var(--on-brand); }
      &:hover::before { color: var(--on-brand); }
    }
  }

  /* ---------------- Équipe (section nuit) ---------------- */
  .team {
    background: var(--paper);
    overflow: clip;
    & .about-grid { align-items: start; }
  }

  .reasons {
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--line);
    & li {
      display: grid;
      grid-template-columns: 2.25rem 1fr;
      gap: 0.25rem 1rem;
      padding-block: 1.75rem;
      border-block-end: 1px solid var(--line);
    }
    & .reasons__n {
      grid-row: span 2;
      font-family: var(--font-display);
      font-size: var(--step-1);
      color: var(--brand-ink);
    }
    & h3 { font-size: var(--step-2); }
    & p { color: var(--muted); }
  }

  .team__mark {
    position: absolute;
    inset-block-end: -6rem;
    inset-inline-end: -4rem;
    inline-size: clamp(14rem, 10rem + 18vw, 30rem);
    color: var(--brand);
    opacity: 0.12;
    pointer-events: none;
  }

  /* ---------------- Savoir-faire (accordéon exclusif natif) ---------------- */
  .services {
    display: grid;
    gap: clamp(2rem, 1.5rem + 3vw, 4rem);
    @media (width >= 62rem) { grid-template-columns: 1fr 1fr; align-items: start; }
  }

  .service {
    border-block-end: 1px solid var(--line-strong);

    & summary {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 1.25rem;
      padding-block: 1.4rem;
      cursor: pointer;
      list-style: none;
      &::-webkit-details-marker { display: none; }
    }
    & .service__n { font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
    & .service__title {
      font-family: var(--font-display);
      font-size: var(--step-3);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
      transition: color 0.3s, translate 0.4s var(--ease-out);
    }
    & .service__toggle {
      position: relative;
      inline-size: 2.4rem;
      block-size: 2.4rem;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      transition: background 0.3s, border-color 0.3s, rotate 0.4s var(--ease-out);
      &::before, &::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        inline-size: 0.8rem;
        block-size: 1.5px;
        background: currentColor;
        translate: -50% -50%;
      }
      &::after { rotate: 90deg; }
    }

    & summary:hover .service__title { translate: 0.4rem 0; }

    &[open] .service__title { color: var(--brand-ink); }
    &[open] .service__toggle { background: var(--brand); border-color: var(--brand); color: var(--on-brand); rotate: 45deg; }

    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;
    }
    &[open]::details-content { block-size: auto; }

    & .service__body {
      display: grid;
      gap: 0.9rem;
      padding: 0 0 1.75rem calc(1.25rem + 2ch);
      color: var(--muted);
      & h4 { font-size: var(--step-1); color: var(--ink); letter-spacing: -0.015em; }
      & .service__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.4rem; color: var(--ink); }
    }
  }

  /* Panneau visuel synchronisé avec l'accordéon via :has() */
  .services__visual {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
    display: none;
    aspect-ratio: 4 / 4.4;
    border-radius: var(--radius-l);
    overflow: hidden;
    background: oklch(17% 0.01 30);
    color: oklch(96% 0.005 70);
    isolation: isolate;

    @media (width >= 62rem) { display: grid; }

    & > * { grid-area: 1 / 1; }

    & .visual {
      display: grid;
      align-content: end;
      gap: 0.75rem;
      padding: 2.5rem;
      opacity: 0;
      translate: 0 1.5rem;
      transition: opacity 0.5s, translate 0.6s var(--ease-out);
      & .visual__icon { inline-size: 5rem; color: var(--brand-hi); margin-block-end: auto; }
      & .visual__big {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 1rem + 3.5vw, 4.2rem);
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: -0.04em;
      }
      & p:not(.visual__big) { color: oklch(80% 0.01 70); max-inline-size: 26rem; }
    }

    &::before {
      content: "";
      position: absolute;
      inset: -30%;
      z-index: -1;
      background: radial-gradient(circle at var(--x, 80%) var(--y, 15%), oklch(53% 0.205 24 / 0.75), transparent 45%);
      transition: --x 0.8s, --y 0.8s;
    }
  }

  .services:has(.service:nth-of-type(1)[open]) .visual:nth-child(1),
  .services:has(.service:nth-of-type(2)[open]) .visual:nth-child(2),
  .services:has(.service:nth-of-type(3)[open]) .visual:nth-child(3),
  .services:has(.service:nth-of-type(4)[open]) .visual:nth-child(4),
  .services:has(.service:nth-of-type(5)[open]) .visual:nth-child(5) {
    opacity: 1;
    translate: 0 0;
  }

  /* ---------------- Projets ---------------- */
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 2rem;
    border: 0;
    padding: 0;

    & legend { position: absolute; clip-path: inset(50%); }
    & input { position: absolute; opacity: 0; pointer-events: none; }
    & label {
      padding: 0.6rem 1.1rem;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.25s, color 0.25s, border-color 0.25s;
      & small { margin-inline-start: 0.3rem; color: var(--muted); font-variant-numeric: tabular-nums; }
      &:hover { border-color: var(--ink); }
    }
    & input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    & input:checked + label small { color: inherit; opacity: 0.7; }
    & input:focus-visible + label { outline: 2px solid var(--brand-hi); outline-offset: 3px; }
  }

  .projects {
    display: grid;
    gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  }

  /* Filtre 100 % CSS grâce à :has() */
  #projets:has(#f-ecommerce:checked) .project:not([data-cat~="ecommerce"]),
  #projets:has(#f-app:checked) .project:not([data-cat~="app"]),
  #projets:has(#f-site:checked) .project:not([data-cat~="site"]) {
    display: none;
  }

  .project {
    container-type: inline-size;

    & article {
      position: relative;
      display: grid;
      gap: 1rem;
    }
    /* Le bouton du titre couvre toute la carte (motif « carte cliquable » accessible) */
    & h3 button {
      text-align: start;
      &::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
      &:focus-visible { outline: none; }
      &:focus-visible::after { outline: 2px solid var(--brand-hi); outline-offset: 4px; }
    }
    & .project__media {
      position: relative;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--paper-2);
      & img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        object-position: top center;
        transition: scale 0.8s var(--ease-out), object-position 3.5s var(--ease-in-out);
      }
      &::after {
        content: "Voir le projet";
        position: absolute;
        inset-block-end: 1rem;
        inset-inline-start: 1rem;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        background: var(--paper);
        color: var(--ink);
        font-size: var(--step--1);
        font-weight: 500;
        opacity: 0;
        translate: 0 0.5rem;
        transition: opacity 0.3s, translate 0.4s var(--ease-out);
      }
    }
    & .project__meta {
      display: grid;
      gap: 0.2rem;
    }
    & h3 { font-size: var(--step-1); letter-spacing: -0.02em; transition: color 0.25s; }
    & p { font-size: var(--step--1); color: var(--muted); }

    & article:is(:hover, :has(button:focus-visible)) {
      & .project__media img { scale: 1.04; object-position: bottom center; }
      & .project__media::after { opacity: 1; translate: 0 0; }
      & h3 { color: var(--brand-ink); }
    }
  }

  /* ---------------- Fiche projet (<dialog> natif) ---------------- */
  .project-dialog {
    inline-size: min(100% - 1.5rem, 64rem);
    max-block-size: calc(100dvh - 1.5rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-l);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-l);
    overscroll-behavior: contain;

    opacity: 0;
    translate: 0 2rem;
    scale: 0.98;
    transition: opacity 0.35s var(--ease-out), translate 0.5s var(--ease-out), scale 0.5s var(--ease-out),
                overlay 0.4s allow-discrete, display 0.4s allow-discrete;

    &[open] {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      @starting-style { opacity: 0; translate: 0 2rem; scale: 0.98; }
    }

    &::backdrop {
      background: oklch(12% 0.01 30 / 0);
      backdrop-filter: blur(0);
      transition: background 0.4s, backdrop-filter 0.4s, overlay 0.4s allow-discrete, display 0.4s allow-discrete;
    }
    &[open]::backdrop {
      background: oklch(12% 0.01 30 / 0.6);
      backdrop-filter: blur(6px);
      @starting-style { background: oklch(12% 0.01 30 / 0); backdrop-filter: blur(0); }
    }
  }

  .pd__head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1.25rem, 1rem + 2vw, 2.5rem);
    background: color-mix(in oklch, var(--paper) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--line);

    & .eyebrow { white-space: nowrap; }
    @media (width < 30rem) { & .eyebrow::before { display: none; } }
    & .pd__nav { display: flex; gap: 0.4rem; }
  }

  .icon-btn {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    & svg { inline-size: 0.95rem; }
    &:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  }

  .pd__body {
    display: grid;
    gap: 2rem;
    padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 3vw, 3rem);
  }

  .pd__intro {
    display: grid;
    gap: 1rem;
    & h2 { font-size: var(--step-4); letter-spacing: -0.04em; }
    & .pd__sub { color: var(--brand-ink); font-weight: 500; }
    & .pd__lead { font-size: var(--step-1); max-inline-size: 48rem; }
  }

  .pd__gallery {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-block-end: 0.5rem;
    margin-inline: calc(-1 * clamp(1.25rem, 1rem + 2vw, 2.5rem));
    padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    scroll-padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);

    & img {
      flex: none;
      block-size: clamp(16rem, 10rem + 22vw, 28rem);
      inline-size: auto;
      max-inline-size: 85%;
      object-fit: cover;
      object-position: top;
      border-radius: var(--radius);
      background: var(--paper-2);
      scroll-snap-align: start;
      border: 1px solid var(--line);
    }
    &:only-child img, & img:only-child { max-inline-size: 100%; }
  }

  .pd__cols {
    display: grid;
    gap: 2rem;
    @media (width >= 48rem) { grid-template-columns: 1.6fr 1fr; }
  }

  .pd__content {
    display: grid;
    gap: 1rem;
    color: var(--muted);
    & ol, & ul { display: grid; gap: 0.4rem; padding-inline-start: 1.25rem; }
    & li::marker { color: var(--brand-ink); font-weight: 600; }
    & a { color: var(--ink); }
  }

  .pd__aside {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    & h3 {
      font-family: var(--font-body);
      font-size: var(--step--1);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-block-end: 0.6rem;
    }
    & .pd__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    & .pd__devices { display: flex; gap: 0.6rem; color: var(--ink); & svg { inline-size: 1.5rem; } }
  }

  .pd__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--paper-2);
    & p { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; }
  }

  html:has(dialog[open]) { overflow: hidden; }

  /* ---------------- Clients ---------------- */
  .logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.75rem;
    margin-block-end: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    & li {
      display: grid;
      place-items: center;
      aspect-ratio: 2 / 1;
      padding: 0.75rem 1rem;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
    }
    & img {
      max-block-size: 100%;
      inline-size: auto;
      object-fit: contain;
      filter: grayscale(1) contrast(1.05);
      opacity: 0.75;
      mix-blend-mode: multiply;
      transition: filter 0.35s, opacity 0.35s, scale 0.4s var(--ease-out);
    }
    & li:hover img { filter: none; opacity: 1; scale: 1.05; }
  }

  .testimonials {
    display: grid;
    gap: 2rem;
    @media (width >= 62rem) { grid-template-columns: 0.8fr 2fr; align-items: start; }

    & .testimonials__head { display: grid; gap: 1.25rem; align-content: start; }
    & .testimonials__head h3 { font-size: var(--step-3); }
    & .testimonials__head p { color: var(--muted); }
    & .testimonials__nav { display: flex; gap: 0.5rem; }
  }

  .quotes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(100%, 30rem);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block-end: 0.5rem;
    &::-webkit-scrollbar { display: none; }

    & figure {
      scroll-snap-align: start;
      display: grid;
      align-content: space-between;
      gap: 2rem;
      padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
      border-radius: var(--radius-l);
      background: var(--paper-3);
      border: 1px solid var(--line);
    }
    & blockquote {
      font-size: var(--step-1);
      line-height: 1.5;
      &::before {
        content: "“";
        display: block;
        font-family: var(--font-display);
        font-size: 4rem;
        line-height: 0.6;
        color: var(--brand-ink);
        margin-block-end: 0.5rem;
      }
    }
    & figcaption {
      display: grid;
      font-size: var(--step--1);
      color: var(--muted);
      & strong { font-size: var(--step-0); color: var(--ink); font-weight: 600; }
    }
  }

  /* ---------------- Contact (section nuit) ---------------- */
  .contact {
    overflow: clip;
    isolation: isolate;
    &::before {
      content: "";
      position: absolute;
      inset: auto -20% -50% auto;
      z-index: -1;
      inline-size: 60rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(closest-side, oklch(53% 0.205 24 / 0.45), transparent);
      filter: blur(40px);
    }
  }

  .contact__title {
    font-size: clamp(3rem, 1rem + 9vw, 10rem);
    line-height: 0.88;
    letter-spacing: -0.055em;
    font-weight: 800;
    margin-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    & em { font-style: italic; font-weight: 600; color: var(--brand-ink); }
  }

  .contact__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }

  .contact-card {
    display: grid;
    align-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--radius-l);
    background: var(--paper-2);
    border: 1px solid var(--line);

    & h3 { font-size: var(--step-2); margin-block-end: 0.6rem; }
    & p { color: var(--muted); }
    & .contact-card__actions { display: grid; gap: 0.75rem; justify-items: start; }
    & .contact-card__big {
      font-family: var(--font-display);
      font-size: var(--step-2);
      font-weight: 600;
      text-decoration: none;
      letter-spacing: -0.02em;
      overflow-wrap: anywhere;
    }
  }

  .contact-card--brand {
    background: var(--brand);
    color: var(--on-brand);
    border-color: transparent;
    & p { color: oklch(96% 0.02 25 / 0.85); }
    & .btn { --btn-bg: var(--on-brand); --btn-fg: var(--brand);
      &:hover { --btn-bg: oklch(16% 0.01 30); --btn-fg: var(--on-brand); }
    }
  }

  .brief {
    margin-block-start: 1rem;
    & summary {
      cursor: pointer;
      font-size: var(--step--1);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
    }
    &[open]::details-content { block-size: auto; }
    & ul { display: grid; gap: 0.3rem; padding: 0.75rem 0 0 1.1rem; font-size: 0.92rem; }
  }

  /* ---------------- Pied de page ---------------- */
  .site-footer {
    background: var(--paper);
    color: var(--muted);
    padding-block: 3rem 2rem;
    border-block-start: 1px solid var(--line);
    font-size: 0.92rem;

    & .footer__top {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
      padding-block-end: 2.5rem;
    }
    & h2 {
      font-family: var(--font-body);
      font-size: var(--step--1);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      margin-block-end: 0.75rem;
    }
    & ul { display: grid; gap: 0.35rem; }
    & a { text-decoration: none; &:hover { color: var(--ink); } }
    & .logo svg { inline-size: 8.5rem; }
    & .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;
      padding-block-start: 1.5rem;
      border-block-start: 1px solid var(--line);
    }
  }

  /* ---------------- Page légale ---------------- */
  .legal {
    padding-block: calc(var(--header-h) + 4rem) var(--section);

    & .wrap { max-inline-size: 48rem; }
    & h1 { font-size: var(--step-5); letter-spacing: -0.045em; margin-block: 1.5rem 3rem; }
    & h2 { font-size: var(--step-2); margin-block: 3rem 1rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
    & p, & li { color: var(--muted); margin-block-end: 1rem; }
    & ul { padding-inline-start: 1.25rem; }
  }
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}