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

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
  p { overflow-wrap: break-word; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    --bg: oklch(97.5% 0.014 82);
    --surface: oklch(99.2% 0.008 85);
    --ink: oklch(30% 0.03 55);
    --muted: oklch(47% 0.028 55);
    --line: oklch(89% 0.02 80);
    --brand: oklch(55% 0.16 42);
    --brand-strong: oklch(50% 0.16 42);
    --brand-soft: oklch(93.5% 0.045 55);
    --green: oklch(52% 0.1 150);
    --green-soft: oklch(93.5% 0.045 150);
    --sand-soft: oklch(94% 0.055 90);
    --blue-soft: oklch(93.5% 0.03 240);
    --shadow: 0 1px 2px oklch(30% 0.03 55 / .06), 0 12px 32px -12px oklch(30% 0.03 55 / .14);
    --r-lg: 26px;
    --r-md: 16px;
    --r-sm: 10px;
    --font-display: "Bricolage", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
    --space-s: .75rem;
    --space-m: 1.25rem;
    --space-l: 2.5rem;
    --space-xl: clamp(3.2rem, 6.4vw, 5.6rem);
    --wrap: 72rem;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: oklch(22.5% 0.016 55);
      --surface: oklch(26.5% 0.018 55);
      --ink: oklch(93% 0.012 85);
      --muted: oklch(74% 0.02 80);
      --line: oklch(34% 0.02 55);
      --brand: oklch(71% 0.15 45);
      --brand-strong: oklch(77% 0.15 50);
      --brand-soft: oklch(33% 0.06 45);
      --green: oklch(75% 0.11 150);
      --green-soft: oklch(32% 0.05 150);
      --sand-soft: oklch(32% 0.05 90);
      --blue-soft: oklch(32% 0.035 250);
      --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 12px 32px -12px oklch(0% 0 0 / .5);
    }
  }
  /* Bascule manuelle (bouton) : gagne toujours sur la préférence système ci-dessus */
  :root[data-theme="dark"] {
    --bg: oklch(22.5% 0.016 55);
    --surface: oklch(26.5% 0.018 55);
    --ink: oklch(93% 0.012 85);
    --muted: oklch(74% 0.02 80);
    --line: oklch(34% 0.02 55);
    --brand: oklch(71% 0.15 45);
    --brand-strong: oklch(77% 0.15 50);
    --brand-soft: oklch(33% 0.06 45);
    --green: oklch(75% 0.11 150);
    --green-soft: oklch(32% 0.05 150);
    --sand-soft: oklch(32% 0.05 90);
    --blue-soft: oklch(32% 0.035 250);
    --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 12px 32px -12px oklch(0% 0 0 / .5);
  }
  :root[data-theme="light"] {
    --bg: oklch(97.5% 0.014 82);
    --surface: oklch(99.2% 0.008 85);
    --ink: oklch(30% 0.03 55);
    --muted: oklch(47% 0.028 55);
    --line: oklch(89% 0.02 80);
    --brand: oklch(55% 0.16 42);
    --brand-strong: oklch(50% 0.16 42);
    --brand-soft: oklch(93.5% 0.045 55);
    --green: oklch(52% 0.1 150);
    --green-soft: oklch(93.5% 0.045 150);
    --sand-soft: oklch(94% 0.055 90);
    --blue-soft: oklch(93.5% 0.03 240);
    --shadow: 0 1px 2px oklch(30% 0.03 55 / .06), 0 12px 32px -12px oklch(30% 0.03 55 / .14);
  }
  @font-face {
    font-family: "Bricolage";
    src: url("/assets/fonts/bricolage-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
  }
}

/* ---------- BASE ---------- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.015em; }
  h1 { font-size: clamp(2.5rem, 5.5vw + 1rem, 4.25rem); font-weight: 750; }
  h2 { font-size: clamp(1.75rem, 2.6vw + .6rem, 2.6rem); font-weight: 700; }
  h3 { font-size: 1.25rem; font-weight: 650; }
  a { color: inherit; }
  p a, li a { text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  p a:hover, li a:hover { color: var(--brand-strong); }
  :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--brand-soft); }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
  section { padding-block: var(--space-xl); }
  .section-head { max-width: 46rem; margin-block-end: var(--space-l); }
  .section-head .kicker {
    display: inline-block;
    font-weight: 600; font-size: .9rem;
    color: var(--brand-strong);
    background: var(--brand-soft);
    padding: .3rem .85rem; border-radius: 99px;
    margin-block-end: var(--space-s);
  }
  .section-head p { color: var(--muted); font-size: 1.15rem; margin-block-start: var(--space-s); }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 99;
    background: var(--surface); padding: .75rem 1.25rem; border-radius: var(--r-sm);
  }
  .skip-link:focus { left: 1rem; top: 1rem; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* Header */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklch, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--line);
  }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
  .brand {
    font-family: var(--font-display); font-weight: 750; font-size: 1.3rem;
    text-decoration: none; white-space: nowrap;
  }
  .brand span { font-weight: 350; }
  .site-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
  .site-nav a:not(.btn) {
    text-decoration: none; font-weight: 500; font-size: .98rem;
    border-block-end: 2px solid transparent;
    transition: border-color .15s;
  }
  .site-nav a:not(.btn):hover { border-block-end-color: var(--brand); }
  .nav-toggle { display: none; }

  .theme-toggle {
    position: relative;
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 60px; height: 32px; flex-shrink: 0;
    padding: 3px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s;
  }
  .theme-toggle:hover { border-color: var(--brand); }
  .theme-toggle-icon {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    font-size: .8rem; line-height: 1;
    opacity: .5;
    transition: opacity .2s;
  }
  .theme-toggle-icon-sun { opacity: 1; }
  .theme-toggle-thumb {
    position: absolute; top: 50%; left: 3px; z-index: 0;
    margin-block-start: -13px;
    width: 26px; height: 26px; border-radius: 50%;
    background: oklch(90% 0.07 85);
    transition: transform .25s ease, background .25s ease;
  }
  .theme-toggle[data-theme="dark"] .theme-toggle-icon-sun { opacity: .5; }
  .theme-toggle[data-theme="dark"] .theme-toggle-icon-moon { opacity: 1; }
  .theme-toggle[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(28px);
    background: oklch(27% 0.06 260);
  }

  @media (max-width: 44rem) {
    .nav-toggle {
      display: grid; place-items: center;
      width: 44px; height: 44px;
      background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
      cursor: pointer;
    }
    .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
      content: ""; display: block; width: 20px; height: 2px;
      background: var(--ink); border-radius: 2px; position: relative;
      transition: transform .2s, opacity .2s;
    }
    .nav-toggle-bar::before { position: absolute; top: -6px; }
    .nav-toggle-bar::after { position: absolute; top: 6px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: rotate(90deg) translateX(6px); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { opacity: 0; }
    .site-nav {
      display: none;
      position: absolute; inset-inline: 0; top: 100%;
      flex-direction: column; align-items: stretch;
      background: var(--bg); border-block-end: 1px solid var(--line);
      padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
    }
    .site-nav a { padding-block: .6rem; }
    body:has(.nav-toggle[aria-expanded="true"]) .site-nav { display: flex; }
  }

  /* Boutons */
  .btn {
    display: inline-block;
    background: var(--brand); color: oklch(99% 0.01 85);
    font-weight: 650; text-decoration: none;
    padding: .85rem 1.6rem; border: none; border-radius: 99px;
    cursor: pointer;
    transition: transform .15s, background .15s, box-shadow .15s;
  }
  .btn:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
  .btn-small { padding: .5rem 1.1rem; font-size: .95rem; }
  .btn-ghost {
    background: transparent; color: var(--ink);
    border: 1.5px solid var(--line);
  }
  .btn-ghost:hover { background: var(--surface); }
  @media (prefers-color-scheme: dark) {
    .btn:not(.btn-ghost) { color: oklch(20% 0.02 55); }
  }
  /* .btn-ghost garde toujours var(--ink), jamais forcé par les règles ci-dessous */
  :root[data-theme="dark"] .btn:not(.btn-ghost) { color: oklch(20% 0.02 55); }
  :root[data-theme="light"] .btn:not(.btn-ghost) { color: oklch(99% 0.01 85); }

  /* Héro */
  .hero { padding-block: var(--space-xl); }
  .hero .wrap {
    display: grid; gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 56rem) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } }
  .hero .eyebrow { font-weight: 600; color: var(--brand-strong); margin-block-end: var(--space-s); }
  .hero h1 .accent { color: var(--brand); }
  .hero .lead { font-size: clamp(1.1rem, 1.5vw + .6rem, 1.3rem); color: var(--muted); max-width: 34rem; margin-block: var(--space-m) var(--space-l); }
  .hero .lead strong { color: var(--ink); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-l); }
  .hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: var(--space-l); }
  .chip {
    font-size: .92rem; font-weight: 550;
    background: var(--surface); border: 1px solid var(--line);
    padding: .45rem 1rem; border-radius: 99px;
  }

  .hero-visual { display: grid; place-items: center; position: relative; }
  .blob {
    width: min(340px, 75vw); aspect-ratio: 1;
    display: grid; place-items: center;
    font-size: clamp(5rem, 12vw, 8rem);
    background: linear-gradient(145deg, var(--brand-soft), var(--sand-soft) 55%, var(--green-soft));
    border-radius: 44% 56% 58% 42% / 46% 42% 58% 54%;
    box-shadow: var(--shadow);
  }
  .hero-badge {
    position: absolute; bottom: 8%; right: 6%;
    background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
    padding: .5rem 1.1rem; font-weight: 600; font-size: .95rem;
    box-shadow: var(--shadow);
  }
  .hero-badge .dot {
    display: inline-block; width: .6em; height: .6em; border-radius: 50%;
    background: var(--green); margin-inline-end: .4em;
  }

  /* Bandeau clients */
  .clients { padding-block: var(--space-l); border-block: 1px solid var(--line); background: var(--surface); }
  .clients p.clients-title { text-align: center; color: var(--muted); font-size: .95rem; margin-block-end: var(--space-m); }

  .logo-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .logo-track {
    display: flex; width: max-content;
    animation: logo-scroll 36s linear infinite;
  }
  .logo-track:hover { animation-play-state: paused; }
  .logo-strip {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: 1.25rem;
    padding-inline-end: 1.25rem;
  }
  .logo-strip li { flex-shrink: 0; }
  .logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
    background: oklch(99% 0.005 85);
    border-radius: var(--r-md);
    padding: .6rem 1.1rem;
    box-shadow: var(--shadow);
    text-decoration: none;
  }
  .logo-chip img {
    display: block; height: 52px; width: auto; max-width: 220px;
    object-fit: contain;
  }
  .logo-chip-dark { background: oklch(24% 0.025 55); }

  @keyframes logo-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Bento prestations */
  .bento {
    display: grid; gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }
  .card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    text-decoration: none; color: inherit;
    transition: transform .18s, box-shadow .18s;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .card .icon { font-size: 2rem; margin-block-end: var(--space-s); }
  .card .card-more { display: inline-block; margin-block-start: var(--space-s); font-weight: 650; color: var(--brand-strong); }
  .card h3 { margin-block-end: .5rem; }
  .card p { color: var(--muted); font-size: .98rem; }
  .card-featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--brand-soft), var(--sand-soft));
    border: none;
  }
  @media (min-width: 56rem) { .card-featured { grid-column: span 2; } }
  .card-featured p { color: var(--ink); opacity: .85; }
  .card-green { background: var(--green-soft); border: none; }
  .card-blue { background: var(--blue-soft); border: none; }
  .card-sand { background: var(--sand-soft); border: none; }

  /* Pour qui */
  .audiences { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

  /* Étapes */
  .steps { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: etape; }
  .step { position: relative; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .step::before {
    counter-increment: etape; content: counter(etape);
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--brand); color: oklch(99% 0.01 85);
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    margin-block-end: var(--space-s);
  }
  @media (prefers-color-scheme: dark) { .step::before { color: oklch(20% 0.02 55); } }
  :root[data-theme="dark"] .step::before { color: oklch(20% 0.02 55); }
  :root[data-theme="light"] .step::before { color: oklch(99% 0.01 85); }
  .step h3 { margin-block-end: .4rem; }
  .step p { color: var(--muted); font-size: .98rem; }

  /* Tarif */
  .pricing-card {
    max-width: 44rem; margin-inline: auto;
    text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    box-shadow: var(--shadow);
  }
  .price { font-family: var(--font-display); font-weight: 780; font-size: clamp(3.2rem, 7vw, 5rem); line-height: 1; }
  .price small { font-size: .35em; font-weight: 500; color: var(--muted); }
  .pricing-card > p { color: var(--muted); margin-block: var(--space-m); }
  .pricing-card .icon { font-size: 2.5rem; margin-block-end: var(--space-s); }
  .pricing-points {
    list-style: none; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem;
    margin-block-end: var(--space-l);
    font-weight: 550; font-size: .98rem;
  }
  .pricing-points li::before { content: "✓ "; color: var(--green); font-weight: 700; }

  /* À propos */
  .about .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 56rem) { .about .wrap { grid-template-columns: .8fr 1.2fr; } }
  .about .blob { font-size: clamp(4rem, 9vw, 6rem); width: min(280px, 65vw); }
  .about-text p + p { margin-block-start: var(--space-m); }
  .about-text .stats {
    display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-l);
    margin-block-start: var(--space-l);
  }
  .about-linkedin { display: inline-block; margin-block-start: var(--space-m); }
  .stat .stat-num { font-family: var(--font-display); font-weight: 750; font-size: 2rem; color: var(--brand-strong); display: block; line-height: 1.1; }
  .stat .stat-label { color: var(--muted); font-size: .92rem; }

  /* FAQ */
  .faq-list { max-width: 46rem; display: grid; gap: var(--space-s); }
  .faq-list details {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 1.1rem 1.4rem;
  }
  .faq-list summary {
    cursor: pointer; font-weight: 650; font-family: var(--font-display); font-size: 1.08rem;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--brand); transition: rotate .2s; }
  .faq-list details[open] summary::after { rotate: 45deg; }
  .faq-list details[open] summary { margin-block-end: .6rem; }
  .faq-list details p { color: var(--muted); }

  /* CTA final */
  .cta-final { text-align: center; background: linear-gradient(135deg, var(--brand-soft), var(--green-soft)); border-radius: var(--r-lg); margin-inline: clamp(1.25rem, 4vw, 2.5rem); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
  .cta-final h2 { margin-block-end: var(--space-s); }
  .cta-final p { color: var(--muted); margin-block-end: var(--space-l); }
  .cta-final-note { margin-block-start: var(--space-m); margin-block-end: 0; font-size: .92rem; }

  /* Formulaire */
  .form-grid { display: grid; gap: var(--space-m); max-width: 38rem; }
  .field { display: grid; gap: .35rem; }
  .field label { font-weight: 600; font-size: .95rem; }
  .field .hint { color: var(--muted); font-size: .85rem; }
  .field input, .field textarea {
    background: var(--surface); color: var(--ink);
    border: 1.5px solid var(--line); border-radius: var(--r-sm);
    padding: .75rem 1rem;
  }
  .field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--brand); }
  .field-hp { position: absolute; left: -9999px; top: -9999px; }
  .form-rgpd { font-size: .85rem; color: var(--muted); max-width: 38rem; }
  .form-error {
    background: var(--brand-soft); border-radius: var(--r-sm);
    padding: .85rem 1.1rem; font-weight: 550;
  }

  /* Footer */
  .site-footer { border-block-start: 1px solid var(--line); background: var(--surface); }
  .footer-grid {
    display: grid; gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    padding-block: var(--space-l);
  }
  .site-footer p { color: var(--muted); font-size: .95rem; }
  .site-footer .brand { font-size: 1.15rem; color: var(--ink); }
  .footer-title { font-weight: 650; color: var(--ink) !important; margin-block-end: .35rem; }
  .footer-bottom { border-block-start: 1px solid var(--line); padding-block: var(--space-m); }
  .footer-bottom p { font-size: .85rem; text-align: center; }
  .footer-grid a {
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: border-color .15s;
  }
  .footer-grid a:hover { border-block-end-color: var(--brand); color: var(--ink); }

  .link-button {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: var(--muted); text-decoration: underline;
    cursor: pointer;
  }
  .link-button:hover { color: var(--ink); }

  /* Bandeau de consentement */
  .consent-banner {
    display: none;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
    background: var(--surface); border-block-start: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: var(--space-m) clamp(1.25rem, 4vw, 2.5rem);
  }
  .consent-banner.is-visible { display: block; }
  .consent-banner-inner {
    max-width: var(--wrap); margin-inline: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-m);
  }
  .consent-banner p { color: var(--muted); font-size: .92rem; flex: 1 1 26rem; }
  .consent-banner p a {
    color: var(--ink);
    text-decoration: none;
    border-block-end: 1px solid var(--brand);
    transition: border-color .15s;
  }
  .consent-banner p a:hover { border-block-end-color: var(--muted); }
  .consent-banner-actions { display: flex; gap: .75rem; flex-shrink: 0; }

  /* Bouton WhatsApp (mobile uniquement) */
  .whatsapp-wrap { display: none; }
  @media (max-width: 44rem) {
    .whatsapp-wrap { display: block; }
  }
  body:has(.consent-banner.is-visible) .whatsapp-wrap { display: none; }
  .whatsapp-wrap {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  }
  .whatsapp-btn {
    display: flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: #25d366; color: #fff;
    box-shadow: var(--shadow);
    opacity: 0; transform: scale(.6); pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .whatsapp-btn.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
  .whatsapp-btn:hover { transform: scale(1.06); }
  .whatsapp-btn.is-visible:hover { transform: scale(1.06); }
  .whatsapp-bubble {
    position: absolute; right: 0; bottom: calc(100% + .6rem);
    max-width: 13rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow);
    padding: .65rem .85rem; font-size: .85rem; line-height: 1.35;
    opacity: 0; transform: translateY(6px);
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .whatsapp-bubble.is-visible { opacity: 1; transform: translateY(0); }

  /* Modale d'entrée (home uniquement) */
  .entry-modal-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 100;
    background: oklch(20% 0.02 55 / .55);
    align-items: center; justify-content: center;
    padding: 1.25rem;
  }
  .entry-modal-backdrop.is-visible { display: flex; }
  .entry-modal {
    position: relative;
    width: 100%; max-width: 28rem; max-height: 85vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: clamp(1.75rem, 4vw, 2.5rem);
  }
  .entry-modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: grid; place-items: center;
    background: none; border: 1px solid var(--line); color: var(--muted);
    cursor: pointer; font-size: 1rem; line-height: 1;
  }
  .entry-modal-close:hover { border-color: var(--brand); color: var(--ink); }
  .entry-modal-step { display: none; }
  .entry-modal-step.is-active { display: block; }
  .entry-modal .kicker { margin-block-end: .5rem; }
  .entry-modal h2 { font-size: 1.4rem; padding-inline-end: 2rem; }
  .entry-modal-sub { color: var(--muted); margin-block-start: .35rem; }
  .entry-modal-back {
    background: none; border: none; padding: 0; margin-block-end: 1rem;
    color: var(--muted); font-weight: 550; cursor: pointer;
  }
  .entry-modal-back:hover { color: var(--ink); }
  .entry-modal-choices {
    display: flex; flex-direction: column; gap: .6rem;
    margin-block-start: 1.25rem;
  }
  .entry-modal-choice {
    display: block; width: 100%; text-align: left;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: .85rem 1.1rem; font-size: 1rem; font-weight: 550; color: inherit;
    cursor: pointer; transition: border-color .15s, transform .15s;
  }
  .entry-modal-choice:hover { border-color: var(--brand); transform: translateX(2px); }

  /* Pages internes */
  .page-head { padding-block: var(--space-l) 0; max-width: 46rem; }
  .page-head p { color: var(--muted); font-size: 1.1rem; margin-block-start: var(--space-s); }
  .prose { max-width: 46rem; padding-block: var(--space-l); }
  .prose h2 { font-size: 1.4rem; margin-block: var(--space-l) var(--space-s); }
  .prose p + p { margin-block-start: var(--space-s); }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .center { text-align: center; }
  .center .section-head { margin-inline: auto; }
  .section-compact { padding-block: var(--space-l); }
}