/* ============================================================
   NUTRIFIT LANDING V2 — port fidèle de la maquette v2.7 (designeuse)
   Extrait du <style> inline de nutrifit-v2-7-preview.html.
   Deltas : fonts self-hostées (ci-dessous), images rapatriées
   (assets/img/).
   ============================================================ */

/* ============================================================
   Fonts self-hostées — binaires woff2 et unicode-range EXACTS du
   CDN Google (css2?family=Anton&family=Montserrat:wght@600;700;800;900
   &family=Poppins:wght@400;500;600;700, UA Chrome) → rendu identique.
   Montserrat : Google sert le MÊME binaire (variable) pour les 4
   graisses — 1 fichier par subset, déclaré 4× comme le fait le CDN.
   Subsets latin + latin-ext (contenu 100 % FR ; les autres subsets
   ne seraient jamais téléchargés par le navigateur).
   ============================================================ */
/* Anton — latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Anton — latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 600 — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 600 — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 700 — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 700 — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 800 — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 800 — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 900 — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 900 — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 400 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 400 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 500 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 500 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 600 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 600 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 700 — latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 — latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  /* ============================================================
     NUTRIFIT V2.1 — DESIGN SYSTEM
     Palette : vert #5cb162 + orange #f34e2e sur #FAFAF8
     Typo : Anton (logo) · Montserrat Bold (titres) · Poppins (texte)
     ============================================================ */

  :root {
    --green: #5cb162;
    --green-dark: #4a9650;
    --green-deep: #3d7d43;
    --green-light: #e8f4ea;
    --green-lighter: #f2faf3;

    --orange: #f34e2e;
    --orange-dark: #d63d1f;
    --orange-deep: #b53217;
    --orange-light: #fde8e3;
    --orange-lighter: #fef4f1;

    --bg: #FAFAF8;
    --bg-alt: #F4F1EC;
    --bg-warm: #F9F2E9;
    --card: #FFFFFF;
    --ink: #1A1A1A;
    --ink-soft: #4A4A4A;
    --ink-mute: #8A8A8A;
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 32px rgba(0,0,0,0.08), 0 24px 60px rgba(0,0,0,0.10);
    --shadow-orange: 0 8px 24px rgba(243, 78, 46, 0.28);
    --shadow-green: 0 8px 24px rgba(92, 177, 98, 0.24);
  }

  /* ── Reset ─────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  img, svg { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: 0; background: none; }
  ul { list-style: none; }
  em { font-style: italic; }

  .skip {
    position: absolute; top: -100px; left: 12px;
    background: var(--ink); color: white; padding: 12px 18px;
    border-radius: var(--radius-sm); font-weight: 600;
    z-index: 1000;
  }
  .skip:focus { top: 12px; }

  .container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
  }

  /* ============================================================
     UTILITAIRE — Surlignage de mots-clés dans les titres
     ============================================================ */
  .hl {
    position: relative;
    display: inline-block;
    z-index: 1;
  }
  .hl::after {
    content: '';
    position: absolute;
    bottom: 6px; left: -2px; right: -2px;
    height: 14px;
    z-index: -1;
    border-radius: 4px;
    transform: skewX(-4deg);
  }
  .hl-orange::after { background: rgba(243, 78, 46, 0.22); }
  .hl-green::after { background: rgba(92, 177, 98, 0.28); }
  .hl-white::after { background: rgba(255, 255, 255, 0.22); }

  /* ============================================================
     1. TOP NAV
     ============================================================ */
  .nav {
    background: rgba(250, 250, 248, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    max-width: 1180px;
    margin: 0 auto;
  }
  .logo {
    display: flex;
    align-items: center;
  }
  .logo-img {
    height: 40px;
    width: auto;
    display: block;
  }
  @media (max-width: 767px) {
    .logo-img { height: 34px; }
  }
  .nav-links {
    display: none;
    gap: 32px;
    font-size: 14.5px;
    font-weight: 500;
  }
  .nav-links a {
    color: var(--ink-soft);
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--orange); }
  .nav-right {
    display: flex; align-items: center; gap: 14px;
  }
  .nav-login {
    font-size: 14px; font-weight: 500;
    color: var(--ink-soft);
  }
  .nav-cta {
    background: var(--orange);
    color: white;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    transition: all 0.2s;
    box-shadow: var(--shadow-orange);
  }
  .nav-cta:hover {
    background: var(--orange-dark);
    transform: translateY(-1px);
  }
  @media (max-width: 767px) {
    .nav-login { display: none; }
    .nav-cta { padding: 9px 14px; font-size: 13px; }
  }
  @media (min-width: 900px) {
    .nav-links { display: flex; }
  }

  /* ============================================================
     2. HERO (avec mockup tablette)
     ============================================================ */
  .hero {
    position: relative;
    overflow: hidden;
    padding: 32px 0 80px;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(92, 177, 98, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: -180px; left: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(243, 78, 46, 0.12), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
  }
  .hero-copy { position: relative; z-index: 2; }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-light);
    color: var(--green-dark);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
  }
  .hero-eyebrow .dot {
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
  }
  .hero-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 22px;
  }
  .hero-headline .accent {
    color: var(--orange);
    position: relative;
    display: inline-block;
  }
  .hero-headline .accent::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 0; right: 0;
    height: 10px;
    background: rgba(243, 78, 46, 0.18);
    z-index: -1;
    border-radius: 4px;
  }
  .hero-sub {
    font-size: clamp(15px, 1.8vw, 17px);
    color: var(--ink-soft);
    margin-bottom: 28px;
    max-width: 540px;
    line-height: 1.55;
  }
  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
  }
  .btn-primary {
    background: var(--orange);
    color: white;
    padding: 18px 30px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: var(--shadow-orange);
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-primary:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(243, 78, 46, 0.36);
  }
  .btn-primary svg { transition: transform 0.2s; }
  .btn-primary:hover svg { transform: translateX(4px); }
  .btn-secondary {
    background: white;
    color: var(--ink);
    padding: 16px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid var(--border-strong);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .btn-secondary:hover {
    border-color: var(--green);
    color: var(--green-dark);
  }
  .hero-subnote {
    font-size: 13.5px;
    color: var(--ink-mute);
    margin-bottom: 22px;
  }
  .hero-subnote strong { color: var(--green-dark); font-weight: 600; }
  .hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  .stars { display: inline-flex; gap: 2px; }
  .stars svg { width: 16px; height: 16px; color: #FFC83D; fill: currentColor; }
  .hero-trust-text { font-size: 14px; color: var(--ink-soft); }
  .hero-trust-text b { color: var(--ink); font-weight: 700; }

  /* ── Mockup TABLETTE ─────────────────────────────────────── */
  .hero-visual {
    position: relative;
    z-index: 1;
    padding: 30px 20px;
  }
  .tablet-shell {
    position: relative;
    max-width: 380px;
    margin: 0 auto;
  }
  .tablet {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    background: #1A1A1A;
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    position: relative;
    transform: rotate(-1.5deg);
    transition: transform 0.4s ease;
    aspect-ratio: 3 / 4;
    z-index: 2;
  }
  .tablet:hover { transform: rotate(0deg) scale(1.01); }
  .tablet-screen {
    position: absolute;
    inset: 14px;
    background: var(--green-lighter);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 16px 14px 14px;
  }
  .tablet-week-head {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .tablet-day {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
  }
  .tablet-sub {
    font-size: 10.5px;
    color: var(--ink-mute);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .tablet-meals {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
  }
  .tablet-meal {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  .tablet-meal:last-child { border-bottom: 0; }
  .tablet-meal-img {
    width: 38px; height: 38px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-alt);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .tablet-meal-body { flex: 1; min-width: 0; }
  .tablet-meal-slot {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: 1px;
  }
  .tablet-meal-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }
  .tablet-meal-kcal {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--green-dark);
    flex-shrink: 0;
  }

  /* Bilan macros */
  .tablet-summary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .tablet-sum-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .tablet-sum-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
    margin-right: 5px;
  }
  .tablet-sum-lbl {
    color: var(--ink-mute);
    font-size: 10px;
    font-weight: 500;
  }
  .tablet-sum-right {
    color: var(--ink);
    font-weight: 500;
    font-size: 10px;
    text-align: right;
  }
  .tablet-sum-right b {
    font-weight: 800;
    color: var(--ink);
  }
  .tablet-sum-right .dim { color: var(--ink-mute); font-weight: 400; }
  .tablet-macros {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .tablet-macro {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .t-mac-lbl {
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: 34px;
    flex-shrink: 0;
    font-size: 9px;
  }
  .t-mac-bar {
    flex: 1;
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 2px;
    overflow: hidden;
  }
  .t-mac-bar i {
    display: block;
    height: 100%;
    background: var(--green);
    border-radius: 2px;
  }
  .tablet-macro.prot .t-mac-lbl { color: #3B82F6; }
  .tablet-macro.prot .t-mac-bar i { background: #3B82F6; }
  .tablet-macro.gluc .t-mac-lbl { color: #F59E0B; }
  .tablet-macro.gluc .t-mac-bar i { background: #F59E0B; }
  .tablet-macro.lip  .t-mac-lbl { color: #EF4444; }
  .tablet-macro.lip  .t-mac-bar i { background: #EF4444; }
  .t-mac-val {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 9.5px;
    flex-shrink: 0;
    width: 64px;
    text-align: right;
  }

  /* Badges flottants (mordent sur la tablette, JAMAIS cachés derrière) */
  .hero-bubble {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 11px 15px;
    box-shadow: var(--shadow);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: float 4s ease-in-out infinite;
    z-index: 3;
    white-space: nowrap;
  }
  .hero-bubble.b1 {
    top: 12%;
    left: -14%;
    color: var(--green-dark);
  }
  .hero-bubble.b2 {
    bottom: 14%;
    right: -20%;
    animation-delay: -2s;
    color: var(--orange-dark);
  }
  .hero-bubble .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  @media (max-width: 767px) {
    .hero-bubble { font-size: 11.5px; padding: 8px 12px; }
    .hero-bubble.b1 { top: 6%; left: -4%; }
    .hero-bubble.b2 { bottom: 6%; right: -10%; }
  }

  @media (min-width: 960px) {
    .hero { padding: 56px 0 110px; }
    .hero-inner {
      grid-template-columns: 1fr 1fr;
      gap: 56px;
    }
  }
  @media (max-width: 767px) {
    .hero { padding: 24px 0 48px; }
    .hero-visual { padding: 18px 14px; }
    .tablet-shell { max-width: 320px; }
    .tablet { max-width: 320px; border-radius: 22px; }
    .tablet-screen { inset: 10px; border-radius: 14px; padding: 12px 10px 10px; }
    .tablet-meal-img { width: 32px; height: 32px; }
    .tablet-meal-name { font-size: 11px; }
    .tablet-meal-kcal { font-size: 9.5px; }
    .tablet-meal { padding: 5px 0; }
    .tablet-day { font-size: 20px; }
    .tablet-sub { font-size: 9.5px; }
    .tablet-sum-num { font-size: 15px; }
    .tablet-summary { margin-top: 8px; padding-top: 8px; }
    .tablet-sum-head { margin-bottom: 7px; }
    .tablet-macros { gap: 4px; }
    .t-mac-val { font-size: 9px; width: 56px; }
  }

  /* ============================================================
     3. TRUST BAR
     ============================================================ */
  .trust-bar {
    background: white;
    padding: 28px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    text-align: center;
  }
  .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 20px;
  }
  .trust-item + .trust-item { border-left: 1px solid var(--border); }
  .trust-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
  }
  .trust-num .green { color: var(--green); }
  .trust-num .orange { color: var(--orange); }
  .trust-label {
    font-size: 12px;
    color: var(--ink-mute);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  @media (max-width: 600px) {
    .trust-bar-inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px 0;
      justify-content: stretch;
    }
    .trust-item {
      padding: 6px 8px;
      border-left: 0;
    }
    .trust-item + .trust-item { border-left: 0; }
    .trust-num { font-size: 22px; }
  }

  /* ============================================================
     SECTION HEADER (commun)
     ============================================================ */
  .section { padding: 88px 0; position: relative; }
  .section.alt { background: var(--bg-alt); }
  .section.green { background: var(--green-lighter); }

  /* Sections fond plein avec formes non-parallèles */
  .section.solid-green {
    background: var(--green);
    color: white;
    clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 50px), 0 100%);
    margin-top: -40px;
    margin-bottom: -40px;
    padding-top: 130px;
    padding-bottom: 130px;
  }
  .section.solid-orange {
    background: var(--orange);
    color: white;
    clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 calc(100% - 60px));
    margin-top: -50px;
    margin-bottom: -50px;
    padding-top: 130px;
    padding-bottom: 130px;
  }
  /* éviter le saut sur mobile + supprimer clip-path mobile (cause de bugs scroll) */
  @media (max-width: 600px) {
    .section.solid-green, .section.solid-orange {
      clip-path: none;
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 72px;
      padding-bottom: 72px;
    }
    .cta-final {
      clip-path: none;
      margin-top: 0;
      padding: 72px 22px;
    }
  }

  .section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
  }
  .eyebrow {
    display: inline-block;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
  }
  .eyebrow.orange { background: var(--orange-light); color: var(--orange-dark); }
  .eyebrow.on-color {
    background: rgba(255,255,255,0.22);
    color: white;
    backdrop-filter: blur(8px);
  }
  .section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4.5vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .section.solid-green .section-title,
  .section.solid-orange .section-title { color: white; }
  .section-sub {
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .section.solid-green .section-sub,
  .section.solid-orange .section-sub { color: rgba(255,255,255,0.92); }

  @media (max-width: 600px) {
    .section { padding: 64px 0; }
    .section-head { margin-bottom: 40px; }
  }

  /* ============================================================
     4. PROBLEME (3 scènes avec images)
     ============================================================ */
  .problem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 48px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
  @media (min-width: 768px) {
    .problem-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .scene {
    background: white;
    border-radius: var(--radius-lg);
    padding: 0 0 26px;
    border: 1px solid var(--border);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .scene:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: transparent;
  }
  .scene-img-wrap {
    width: 38%;
    max-width: 120px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--orange-light), var(--green-light));
    position: relative;
    border-radius: 14px;
    margin: 26px auto 16px;
    box-shadow: var(--shadow-sm);
  }
  .scene-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .scene-num {
    position: absolute;
    top: 8px; right: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    color: white;
    background: var(--orange);
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: var(--shadow-orange);
    z-index: 2;
  }
  .scene-body {
    padding: 0 24px;
    text-align: center;
  }
  .scene-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .scene-text {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .problem-closing {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    max-width: 760px;
    margin: 0 auto;
    letter-spacing: -0.01em;
  }
  .problem-closing em {
    color: var(--orange);
    font-style: italic;
    font-weight: 800;
  }

  /* ============================================================
     5. POSITIONNEMENT (avec pièce de puzzle en fond)
     ============================================================ */
  .pos-section { position: relative; overflow: hidden; }
  .pos-puzzle {
    position: absolute;
    right: -80px; top: 50%;
    transform: translateY(-50%) rotate(15deg);
    width: 520px;
    opacity: 0.11;
    pointer-events: none;
    color: var(--green);
  }
  .pos-puzzle-2 {
    position: absolute;
    left: -100px; top: 20%;
    transform: rotate(-20deg);
    width: 360px;
    opacity: 0.10;
    pointer-events: none;
    color: var(--orange);
  }
  @media (max-width: 600px) {
    .pos-puzzle { width: 280px; right: -60px; }
    .pos-puzzle-2 { width: 220px; left: -60px; }
  }
  .pos-lines {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .pos-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    background: white;
    border-radius: var(--radius);
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--ink-soft);
    border-left: 4px solid var(--ink-mute);
    box-shadow: var(--shadow-sm);
  }
  .pos-line .x {
    color: var(--ink-mute);
    flex-shrink: 0;
  }
  .pos-punch {
    margin-top: 32px;
    padding: 32px;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-green);
    position: relative;
    overflow: hidden;
  }
  .pos-punch::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    border-radius: 50%;
  }
  .pos-punch em {
    font-style: italic;
    font-weight: 800;
    color: #fff8d2;
  }

  /* ============================================================
     6. SOLUTION (fond VERT plein, formes obliques)
     ============================================================ */
  .pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 768px) {
    .pillars { grid-template-columns: repeat(3, 1fr); }
  }
  .pillar {
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    position: relative;
    transition: all 0.3s;
    box-shadow: var(--shadow);
    color: var(--ink);
  }
  .pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .pillar-num {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: grid; place-items: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 22px;
  }
  .pillar:nth-child(1) .pillar-num { background: var(--green); color: white; }
  .pillar:nth-child(2) .pillar-num { background: var(--orange); color: white; }
  .pillar:nth-child(3) .pillar-num { background: var(--ink); color: white; }
  .pillar-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .pillar-text {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .pillar-viz {
    background: var(--bg-alt);
    border-radius: var(--radius);
    padding: 18px;
    font-size: 12px;
  }
  .viz-week-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 10px;
  }
  .viz-day {
    flex: 1;
    background: white;
    padding: 8px 4px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    color: var(--ink);
    font-size: 11px;
  }
  .viz-day i {
    display: block;
    width: 100%; height: 4px;
    background: var(--green);
    border-radius: 2px;
    margin-top: 6px;
  }
  .viz-cap {
    text-align: center;
    color: var(--ink-mute);
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .viz-cap .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
  }
  .viz-lane {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 11px;
  }
  .viz-lane-lbl {
    width: 60px;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .viz-lane-bar {
    flex: 1;
    height: 6px;
    background: white;
    border-radius: 3px;
    overflow: hidden;
  }
  .viz-lane-bar i {
    display: block;
    height: 100%;
    background: var(--orange);
    border-radius: 3px;
  }
  .viz-train-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
  }
  .viz-train-day {
    flex: 1;
    background: white;
    padding: 8px 2px;
    border-radius: 8px;
    text-align: center;
    font-size: 10px;
  }
  .viz-train-day.is-train { background: var(--green-light); border: 1px solid var(--green); }
  .viz-train-day .d { font-weight: 700; display: block; margin-bottom: 4px; color: var(--ink); }
  .viz-train-day .kc { color: var(--ink-mute); font-weight: 600; }

  /* Formes décoratives sections solid */
  .blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
    opacity: 0.55;
  }
  .blob-1 { top: 20%; left: 10%; width: 280px; height: 280px; background: rgba(255,255,255,0.3); }
  .blob-2 { bottom: 15%; right: 8%; width: 220px; height: 220px; background: rgba(255,255,255,0.25); }

  /* ============================================================
     7. FINI DE (fond ORANGE plein)
     ============================================================ */
  .fini-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 600px) {
    .fini-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .fini-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: white;
    border-radius: var(--radius);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
  }
  .fini-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }
  .fini-x {
    width: 28px; height: 28px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .fini-x svg { width: 14px; height: 14px; }
  .fini-text { line-height: 1.4; }
  .fini-cta-row { text-align: center; position: relative; z-index: 1; }
  .btn-white {
    background: white;
    color: var(--orange);
    padding: 18px 30px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  }
  .btn-white svg { transition: transform 0.2s; }
  .btn-white:hover svg { transform: translateX(4px); }

  /* ============================================================
     8. INCLUS — Layout 2 colonnes + mockup tablette à droite
     ============================================================ */
  .inc-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: center;
  }
  @media (min-width: 960px) {
    .inc-layout { grid-template-columns: 1fr 1fr; gap: 60px; }
  }
  .inc-content { position: relative; z-index: 2; }
  .inc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
  }
  .inc-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.5;
  }
  .inc-check-circle {
    width: 26px; height: 26px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
    box-shadow: 0 2px 6px rgba(92, 177, 98, 0.3);
  }
  .inc-check-circle svg {
    width: 14px; height: 14px;
  }
  .inc-row strong { font-weight: 700; color: var(--ink); }
  .inc-closing-mini {
    padding: 18px 22px;
    background: var(--green-light);
    border-left: 4px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--green-deep);
    margin-bottom: 22px;
  }
  .inc-closing-mini em { color: var(--orange); font-style: italic; }

  /* Mockup tablette compact pour bonus inclus */
  .inc-tablet-wrap {
    position: relative;
    padding: 30px;
    z-index: 1;
  }
  .inc-tablet-wrap .tablet {
    max-width: 380px;
  }
  /* Badges flottants autour de la tablette */
  .inc-badge {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    white-space: nowrap;
    animation: float 4s ease-in-out infinite;
  }
  .inc-badge-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 18px;
  }
  .inc-badge.b1 {
    top: 4%; left: -8%;
    animation-delay: 0s;
  }
  .inc-badge.b1 .inc-badge-icon { background: var(--green-light); color: var(--green-dark); }
  .inc-badge.b2 {
    top: 42%; right: -4%;
    animation-delay: -1.3s;
  }
  .inc-badge.b2 .inc-badge-icon { background: var(--orange-light); color: var(--orange-dark); }
  .inc-badge.b3 {
    bottom: 6%; left: -6%;
    animation-delay: -2.6s;
  }
  .inc-badge.b3 .inc-badge-icon { background: #fff4e0; color: #c97a1f; }
  .inc-badge-text {
    line-height: 1.3;
  }
  .inc-badge-text strong {
    display: block;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 700;
  }
  .inc-badge-text span {
    font-size: 11.5px;
    color: var(--ink-mute);
  }

  @media (max-width: 600px) {
    .inc-badge { font-size: 11px; padding: 8px 12px; }
    .inc-badge.b1 { left: -2%; top: 0; }
    .inc-badge.b2 { right: 0; }
    .inc-badge.b3 { left: -2%; }
    .inc-badge-icon { width: 26px; height: 26px; font-size: 14px; }
  }

  /* ============================================================
     9. ORIGIN STORY (fond clair + image, plus de noir)
     ============================================================ */
  .origin {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--orange-lighter) 100%);
  }
  .origin::before {
    content: '';
    position: absolute;
    top: -100px; left: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(243, 78, 46, 0.10), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .origin::after {
    content: '';
    position: absolute;
    bottom: -120px; right: -100px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(92, 177, 98, 0.10), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .origin-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .origin-inner { grid-template-columns: 0.95fr 1.05fr; gap: 56px; }
  }
  .origin-img-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    aspect-ratio: 3 / 4;
    max-width: 420px;
    margin: 0 auto;
    background: var(--bg-alt);
  }
  .origin-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .origin-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(243, 78, 46, 0.10), transparent 50%);
    pointer-events: none;
  }
  .origin-copy h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
  }
  .origin-copy p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }
  .origin-strong {
    color: var(--ink) !important;
    font-weight: 600;
    margin-top: 20px !important;
  }
  .origin-strong em {
    color: var(--green-dark);
    font-weight: 700;
  }

  /* ============================================================
     10. TÉMOIGNAGES (carrousel 7 avis style La Sèche)
     ============================================================ */
  .testi-section { position: relative; overflow: hidden; }
  .testi-rating-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 36px;
    flex-wrap: wrap;
  }
  .testi-rating {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .testi-rating-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
  }
  .testi-rating-stars { display: flex; gap: 1px; }
  .testi-rating-stars svg { width: 16px; height: 16px; color: #FFC83D; fill: currentColor; }
  .testi-rating-meta {
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: 4px;
  }
  .testi-carousel {
    position: relative;
  }
  .testi-track-wrap {
    overflow: hidden;
    margin: 0 -22px;
    padding: 14px 22px 24px;
  }
  .testi-track {
    display: flex;
    gap: 22px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .testi-card {
    flex: 0 0 320px;
    background: white;
    border-radius: 24px;
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .testi-card { flex: 0 0 360px; }
  }
  .testi-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .testi-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .testi-avatar.is-photo {
    background: var(--bg-alt);
  }
  .testi-avatar.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .testi-avatar.a1 { background: linear-gradient(135deg, #f34e2e, #ff8062); }
  .testi-avatar.a2 { background: linear-gradient(135deg, #5cb162, #88d18e); }
  .testi-avatar.a3 { background: linear-gradient(135deg, #6b7e5a, #9caf88); }
  .testi-avatar.a4 { background: linear-gradient(135deg, #c97a1f, #e89846); }
  .testi-avatar.a5 { background: linear-gradient(135deg, #4a9650, #5cb162); }
  .testi-avatar.a6 { background: linear-gradient(135deg, #d63d1f, #f34e2e); }
  .testi-avatar.a7 { background: linear-gradient(135deg, #b53217, #d63d1f); }
  .testi-id-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
  }
  .testi-id-meta {
    font-size: 12.5px;
    color: var(--ink-mute);
    margin-top: 2px;
  }
  .testi-stars {
    display: flex;
    gap: 1px;
    margin-bottom: 12px;
  }
  .testi-stars svg { width: 14px; height: 14px; color: #FFC83D; fill: currentColor; }
  .testi-date {
    font-size: 11.5px;
    color: var(--ink-mute);
    margin-bottom: 12px;
  }
  .testi-quote {
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.6;
    flex: 1;
  }
  .testi-source {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--ink-mute);
    font-weight: 500;
  }
  .testi-source-dot {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
  }
  /* Boutons nav carrousel */
  .testi-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
  }
  .testi-nav-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border-strong);
    color: var(--ink);
    display: grid; place-items: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
  }
  .testi-nav-btn:hover:not(:disabled) {
    border-color: var(--orange);
    color: var(--orange);
    transform: translateY(-2px);
  }
  .testi-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .testi-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }
  .testi-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: all 0.2s;
  }
  .testi-dot.is-active {
    background: var(--orange);
    width: 26px;
    border-radius: 4px;
  }
  .testi-disclaimer {
    text-align: center;
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: 22px;
  }

  /* ============================================================
     11. GARANTIE
     ============================================================ */
  .section-guarantee {
    position: relative;
    isolation: isolate;
  }
  .section-guarantee::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/img/bg-batch-cooking.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.28;
    z-index: -2;
    pointer-events: none;
  }
  .section-guarantee::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(250, 250, 248, 0.55) 0%, rgba(250, 250, 248, 0.75) 100%);
    z-index: -1;
    pointer-events: none;
  }
  .guarantee {
    background: white;
    border-radius: var(--radius-xl);
    padding: 48px 32px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    border: 2px solid var(--green);
    position: relative;
    box-shadow: var(--shadow);
  }
  .guarantee-shield {
    width: 84px; height: 84px;
    margin: 0 auto 22px;
    background: var(--green-light);
    color: var(--green-dark);
    border-radius: 50%;
    display: grid; place-items: center;
  }
  .guarantee-shield svg { width: 44px; height: 44px; }
  .guarantee-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--green);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .guarantee h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 14px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .guarantee h2 em {
    color: var(--green);
    font-style: italic;
    font-weight: 800;
  }
  .guarantee p {
    font-size: 16px;
    color: var(--ink-soft);
    margin-bottom: 28px;
  }
  .guarantee .btn-primary {
    box-shadow: none;
  }
  .guarantee .btn-primary:hover {
    box-shadow: none;
  }

  /* ============================================================
     12. QUIZ TDEE
     ============================================================ */
  .quiz-title-block {
    text-align: center;
    margin-bottom: 56px;
  }
  .quiz-title-line1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .quiz-title-line2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .quiz-title-line2 .underline {
    display: inline-block;
    position: relative;
  }
  .quiz-title-line2 .underline::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 4px;
    background: var(--green);
    border-radius: 2px;
  }
  .quiz {
    max-width: 720px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
  }
  .quiz-step {
    margin-bottom: 28px;
  }
  .quiz-step-num {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .quiz-step-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--green-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .quiz-step-tag.opt {
    color: var(--orange-dark);
  }
  .quiz-progress {
    flex: 1;
    height: 4px;
    background: var(--bg-alt);
    border-radius: 2px;
    overflow: hidden;
  }
  .quiz-progress i {
    display: block;
    height: 100%;
    background: var(--green);
    border-radius: 2px;
    transition: width 0.4s ease;
  }
  .quiz-question {
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 18px;
    letter-spacing: -0.01em;
  }
  .quiz-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-pill {
    padding: 12px 22px;
    background: white;
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    transition: all 0.2s;
  }
  .quiz-pill:hover {
    border-color: var(--green);
    color: var(--green-dark);
  }
  .quiz-pill.is-active {
    background: var(--green);
    border-color: var(--green);
    color: white;
  }
  .quiz-optional {
    background: var(--bg-alt);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 24px;
  }
  .quiz-sentence {
    font-size: 16px;
    color: var(--ink);
    line-height: 2.4;
  }
  .quiz-inline-input {
    display: inline-block;
    background: white;
    border: 1.5px solid var(--border-strong);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    transition: border-color 0.2s;
    margin: 0 2px;
  }
  .quiz-inline-input:focus {
    outline: none;
    border-color: var(--green);
  }
  .quiz-inline-unit {
    color: var(--ink-mute);
    font-size: 14px;
    margin-left: -2px;
    margin-right: 4px;
  }
  .quiz-result {
    background: var(--green-light);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    margin-top: 18px;
    border-left: 4px solid var(--green);
    transition: opacity 0.3s, transform 0.3s;
  }
  .quiz-result.is-off { display: none; }
  .quiz-result-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--green-deep);
    line-height: 1;
    margin-bottom: 6px;
  }
  .quiz-result-label {
    font-size: 14px;
    color: var(--ink-soft);
  }
  .quiz-empty {
    text-align: center;
    color: var(--ink-mute);
    font-size: 14px;
    padding: 14px;
  }

  /* ============================================================
     13. PRICING
     ============================================================ */
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto;
  }
  @media (min-width: 768px) {
    .pricing-grid {
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
    }
  }
  .price-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    border: 2px solid var(--border);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
  }
  .price-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .price-card.is-featured {
    border-color: var(--orange);
    background: linear-gradient(180deg, var(--orange-lighter) 0%, white 50%);
    transform: scale(1.02);
    box-shadow: var(--shadow);
  }
  .price-card.is-featured:hover { transform: scale(1.02) translateY(-4px); }
  @media (max-width: 767px) {
    .price-card.is-featured { transform: none; order: -1; }
    .price-card.is-featured:hover { transform: translateY(-4px); }
  }
  .price-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--orange);
    color: white;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-orange);
    white-space: nowrap;
  }
  .price-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .price-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .price-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .price-badge.save { background: var(--green); color: white; }
  .price-badge.plain { background: var(--bg-alt); color: var(--ink-soft); }
  .price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
  }
  .price-amount .num {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .price-amount .period {
    font-size: 16px;
    color: var(--ink-mute);
    font-weight: 500;
  }
  .price-eq {
    font-size: 14px;
    color: var(--green-dark);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .price-tag {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border);
  }
  /* Encart bonus uniquement pour le trimestriel (recommandé) */
  .price-bonus {
    background: var(--green-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 13.5px;
    color: var(--green-dark);
    line-height: 1.5;
  }
  .price-bonus strong {
    display: block;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 4px;
    font-size: 14px;
  }
  /* Checklist ✅ pour annuel/mensuel */
  .price-checks {
    margin-bottom: 22px;
  }
  .price-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--ink);
    padding: 7px 0;
    line-height: 1.4;
  }
  .price-check-row .ico {
    width: 22px; height: 22px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    margin-top: 1px;
  }
  .price-check-row.dim { color: var(--ink-mute); }
  .price-check-row.dim .ico {
    background: var(--bg-alt);
    color: var(--ink-mute);
  }
  .price-check-row.dim .ico-x {
    width: 12px; height: 12px;
  }
  .price-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--orange);
    color: white;
    padding: 16px 22px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s;
    margin-top: auto;
    box-shadow: 0 4px 12px rgba(243, 78, 46, 0.2);
  }
  .price-cta:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
  }
  .price-fine {
    font-size: 12px;
    color: var(--ink-mute);
    text-align: center;
    margin-top: 12px;
    line-height: 1.4;
  }

  /* ============================================================
     14. CHALLENGE — refondu avec mockup phone + badges
     ============================================================ */
  .challenge {
    background: linear-gradient(135deg, var(--orange) 0%, #ff7a5c 100%);
    color: white;
    padding: 56px 32px;
    border-radius: var(--radius-xl);
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .challenge::before {
    content: '🔥';
    position: absolute;
    top: -30px; right: -20px;
    font-size: 200px;
    opacity: 0.08;
    transform: rotate(15deg);
    pointer-events: none;
  }
  .challenge::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .challenge-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 900px) {
    .challenge-layout { grid-template-columns: 1.05fr 1fr; gap: 48px; }
  }
  .challenge-copy { text-align: left; }
  .challenge-badge {
    display: inline-block;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .challenge h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .challenge-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 18px;
    font-weight: 600;
  }
  .challenge-body {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    margin-bottom: 12px;
  }
  .challenge-features {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .challenge-feat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: white;
  }
  .challenge-feat-ico {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: var(--orange-dark);
    display: grid; place-items: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  /* Phone mockup à droite */
  .challenge-phone-wrap {
    position: relative;
    padding: 30px;
  }
  .challenge-phone {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    background: #1A1A1A;
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    aspect-ratio: 9 / 19;
    transform: rotate(2deg);
    position: relative;
    transition: transform 0.4s ease;
  }
  .challenge-phone:hover { transform: rotate(0deg) scale(1.02); }
  .challenge-phone-screen {
    position: absolute;
    inset: 10px;
    background: #1A1A1A;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
  }
  .challenge-phone-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.04);
    transform-origin: center;
  }
  /* Badges flottants challenge */
  .challenge-badge-float {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    white-space: nowrap;
    animation: float 4s ease-in-out infinite;
    color: var(--ink);
  }
  .challenge-badge-float .ico {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex-shrink: 0;
    background: var(--orange-light);
    color: var(--orange-dark);
    font-size: 15px;
  }
  .challenge-badge-float.bf1 { top: 5%; left: -6%; }
  .challenge-badge-float.bf2 { top: 45%; right: -4%; animation-delay: -1.3s; }
  .challenge-badge-float.bf2 .ico { background: var(--green-light); color: var(--green-dark); }
  .challenge-badge-float.bf3 { bottom: 5%; left: -8%; animation-delay: -2.6s; }
  .challenge-badge-float.bf3 .ico { background: #fff4e0; color: #c97a1f; }
  @media (max-width: 600px) {
    .challenge-badge-float { font-size: 11px; padding: 8px 11px; }
    .challenge-badge-float.bf1 { left: -2%; }
    .challenge-badge-float.bf2 { right: -2%; }
    .challenge-badge-float.bf3 { left: -2%; }
    .challenge-badge-float .ico { width: 24px; height: 24px; font-size: 13px; }
  }

  /* ============================================================
     15. FAQ
     ============================================================ */
  .faq-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
  }
  @media (min-width: 768px) {
    .faq-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  }
  .faq-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .faq-item {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
  }
  .faq-item:hover {
    border-color: var(--border-strong);
  }
  .faq-item.is-open {
    border-color: var(--green);
    box-shadow: var(--shadow);
  }
  .faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 24px;
    text-align: left;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    gap: 16px;
  }
  .faq-chev {
    width: 30px; height: 30px;
    background: var(--bg-alt);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.25s;
  }
  .faq-item.is-open .faq-chev {
    background: var(--green);
    color: white;
    transform: rotate(180deg);
  }
  .faq-a-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .faq-item.is-open .faq-a-wrap {
    max-height: 500px;
  }
  .faq-a {
    padding: 0 24px 24px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.65;
  }

  /* ============================================================
     16. CTA FINAL (orange chaud + image batch cooking en fond + silhouettes nutrition)
     ============================================================ */
  .cta-final {
    background: linear-gradient(135deg, var(--orange) 0%, #ff6a48 50%, var(--orange-dark) 100%);
    color: white;
    text-align: center;
    padding: 100px 22px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
    margin-top: -40px;
    isolation: isolate;
  }
  .cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/img/bg-batch-cooking.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
  }
  .cta-final::after {
    content: '';
    position: absolute;
    bottom: -150px; right: -100px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
  }
  .cta-final-shape {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .cta-final-shape svg {
    position: absolute;
    opacity: 0.18;
    color: white;
  }
  .cta-final-shape svg.s1 {
    top: 12%; left: 6%;
    width: 90px;
    transform: rotate(-18deg);
  }
  .cta-final-shape svg.s2 {
    bottom: 14%; left: 12%;
    width: 70px;
    transform: rotate(15deg);
  }
  .cta-final-shape svg.s3 {
    top: 18%; right: 10%;
    width: 100px;
    transform: rotate(10deg);
  }
  .cta-final-shape svg.s4 {
    bottom: 18%; right: 14%;
    width: 78px;
    transform: rotate(-12deg);
  }
  .cta-final-shape svg.s5 {
    top: 45%; left: 4%;
    width: 56px;
    transform: rotate(28deg);
    opacity: 0.12;
  }
  .cta-final-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .cta-lead {
    font-size: 17px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 16px;
    font-weight: 500;
  }
  .cta-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 36px;
    color: white;
  }
  .cta-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: white;
    color: var(--orange-dark);
    padding: 22px 38px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.25s;
    margin-bottom: 28px;
  }
  .cta-final-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  }
  .cta-final-btn svg { transition: transform 0.2s; }
  .cta-final-btn:hover svg { transform: translateX(4px); }
  .cta-trust {
    font-size: 13.5px;
    color: rgba(255,255,255,0.88);
  }
  .cta-trust .dot {
    margin: 0 8px;
    color: rgba(255,255,255,0.5);
  }

  /* ============================================================
     17. FOOTER blanc cassé
     ============================================================ */
  footer {
    background: var(--bg-alt);
    color: var(--ink-soft);
    padding: 36px 22px 28px;
    border-top: 1px solid var(--border);
  }
  .ft-inner { max-width: 1180px; margin: 0 auto; }
  .ft-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 13.5px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
  }
  .ft-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  .ft-links a {
    color: var(--ink-soft);
    transition: color 0.15s;
  }
  .ft-links a:hover { color: var(--orange); }
  .ft-brand { color: var(--ink-mute); }
  .ft-disc {
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.55;
    max-width: 800px;
  }

  /* ============================================================
     18. STICKY MOBILE CTA
     ============================================================ */
  .sticky-cta {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 99;
    transition: transform 0.3s, opacity 0.3s;
    transform: translateY(120%);
    opacity: 0;
  }
  .sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
  }
  .sticky-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--orange);
    color: white;
    padding: 18px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(243, 78, 46, 0.4);
  }
  @media (min-width: 768px) {
    .sticky-cta { display: none; }
  }

  /* ============================================================
     ANIMATIONS reveal
     ============================================================ */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
  }

  /* ============================================================
     Modale checkout (réouverture paiement) — form consentement
     box-sizing border-box partout + width min() → zéro overflow @390px / WebKit
     ============================================================ */
  .co-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(26, 26, 26, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    overflow-y: auto;
  }
  .co-overlay.is-open { display: flex; }
  body.co-modal-open { overflow: hidden; }

  .co-panel {
    position: relative;
    box-sizing: border-box;
    width: min(480px, 100%);
    margin: auto;
    background: var(--bg);
    border-radius: 18px;
    padding: 28px 24px 22px;
    box-shadow: 0 24px 60px rgba(26, 26, 26, 0.28);
  }
  .co-panel * { box-sizing: border-box; }

  .co-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--ink-soft);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .co-close:hover { background: var(--orange-light); color: var(--orange-deep); }
  .co-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

  .co-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 40px 6px 0;
  }
  .co-sub { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin: 0 0 18px; }

  .co-msg { display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 19px; }
  .co-msg.is-shown { display: block; }
  .co-msg.is-error { background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; }
  .co-msg.is-info { background: var(--orange-lighter); color: var(--orange-deep); border: 1px solid var(--orange-light); }
  .co-msg a { color: inherit; font-weight: 700; text-decoration: underline; }

  .co-field { margin-bottom: 16px; }
  .co-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }

  .co-tiers { display: flex; flex-direction: column; gap: 8px; }
  .co-tier {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--bg-alt);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .co-tier:hover { border-color: var(--orange-light); }
  .co-tier input { accent-color: var(--orange); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
  .co-tier-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .co-tier-name { font-weight: 700; font-size: 15px; color: var(--ink); }
  .co-tier-desc { font-size: 12.5px; color: var(--ink-mute); }
  .co-tier-price { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
  .co-tier:has(input:checked) { border-color: var(--orange); background: var(--orange-lighter); }
  .co-tier:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

  .co-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--bg-alt);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
  }
  .co-input:focus { outline: none; border-color: var(--orange); }
  .co-input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

  .co-consents { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
  .co-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--bg-alt);
    border-radius: 12px;
    cursor: pointer;
  }
  .co-check:hover { border-color: var(--orange-light); }
  .co-check input { width: 20px; height: 20px; accent-color: var(--orange); margin: 1px 0 0; flex-shrink: 0; }
  .co-check > span { font-size: 12.5px; line-height: 18px; color: var(--ink-soft); min-width: 0; }
  .co-check a { color: var(--orange-dark); text-decoration: underline; }
  .co-check small { display: block; margin-top: 4px; color: var(--ink-mute); font-size: 11.5px; }

  .co-submit {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: var(--orange);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s;
  }
  .co-submit:hover { background: var(--orange-dark); }
  .co-submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .co-submit:disabled { opacity: .6; cursor: progress; }
  .co-fine { margin: 12px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-mute); text-align: center; }

  @media (max-width: 420px) {
    .co-panel { padding: 24px 16px 18px; border-radius: 14px; }
    .co-title { font-size: 20px; }
    .co-tier-price { font-size: 14px; }
  }