/* ═══════════════════════════════════════════════════════════════════════════
   Vinstant — pages publiques /fr/ et /en/ (référencement).

   Servies par nginx telles quelles, SANS le bundle de l'application : elles ne
   peuvent pas lire `src/styles/design-tokens.css`. Les valeurs ci-dessous en sont
   RECOPIÉES — colonne claire (`[data-theme='light']`) de la charte SOMLR, version
   claire choisie par l'utilisateur le 2026-10-11. Un changement de charte se
   reporte aussi ici.

   Pas de JavaScript : la CSP (`script-src 'self'`) n'en autoriserait pas en
   ligne, et la page n'en a pas besoin (questions fréquentes en <details>).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices ──────────────────────────────────────────────────────────────────
   Servies par le site depuis le 2026-10-16 : la page les chargeait chez Google
   Fonts, qui recevait l'adresse IP de chaque visiteur. Ce sont, à l'octet près,
   les fichiers et les déclarations que Google servait à Chrome et Firefox sous
   Windows (Cormorant Garamond v21, police variable : un fichier pour 500 et
   600, un pour l'italique 400 et 500 ; Poppins v24), mêmes `unicode-range`,
   même ordre, même `font-display` : la page s'affiche à l'identique. Apple et
   Android recevaient les mêmes contours sans la petite table `prep` de
   Cormorant (7 octets), sans effet chez eux (CoreText n'exécute pas les
   instructions TrueType, Chrome Android force son hinting automatique). Un
   fichier ne se télécharge que si la page affiche un caractère de sa plage —
   en pratique le latin seul.
   Noms fixes portant la version de Google (cache de 30 jours, location /site/
   de nginx.conf) : une police mise à jour prend un autre nom. Les trois du
   premier écran sont préchargées par les pages (POLICES_PRECHARGEES de
   scripts/build-public-pages.py), à la même adresse qu'ici. */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-italic-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-v21-normal-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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/poppins-v24-300-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/poppins-v24-300-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/poppins-v24-300-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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/poppins-v24-400-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/poppins-v24-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/poppins-v24-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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-v24-500-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-v24-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/poppins-v24-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;
}

:root {
  color-scheme: light;
  --bg: #f8f4ee;
  --raised: #fffdfa;
  --band: #f2ebe1;
  --ink: #2b1a1c;
  --ink-2: #7a5c52;
  --muted: #6b544c;
  --wine: #7d2130;
  --on-wine: #fdf8f3;
  --wine-wash: #f6e7e2;
  --gold: #8a6a2e;
  --gold-wash: #fdf6e6;
  --gold-line: #e3cfa6;
  --line: #e6dacb;
  --line-strong: #ddcfbf;
  /* Échelle de maturité, thème clair (charte : signature visuelle de l'app). */
  --ph-jeunesse: #3f6280;
  --ph-maturite: #42763f;
  --ph-apogee: #2c6138;
  --ph-pic: #8a6a2e;
  --ph-declin: #9c4f2e;
  --courbe: linear-gradient(90deg, #5a7d9c 0%, #6690ac 22%, #7cae78 42%, #55965a 55%, #346b3e 70%, #b1783a 85%, #a8412f 100%);
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-ui: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 16px;
  --pill: 99px;
  --ombre: 0 18px 40px -18px rgba(43, 26, 28, 0.28), 0 2px 6px rgba(43, 26, 28, 0.06);
  --page: min(1120px, 100% - 2.25rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--wine); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 6px; }

.ls-wrap { width: var(--page); margin-inline: auto; }

.ls-skip {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--raised); padding: 0.5rem 1rem; border-radius: var(--pill); z-index: 10;
}
.ls-skip:focus { left: 1rem; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.ls-head {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #fdfaf6 0%, rgba(245, 239, 230, 0.94) 100%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.ls-head-in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px; padding-block: 0.5rem;
}
.ls-logo { display: block; flex: none; }
.ls-logo img { width: 132px; height: auto; }
.ls-nav { display: flex; gap: 1.6rem; margin-left: 0.5rem; }
.ls-nav a {
  color: var(--muted); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.ls-nav a:hover { color: var(--wine); }
.ls-head-end { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.ls-lang {
  color: var(--ink-2); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.08em;
  border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 0.3rem 0.8rem;
}
.ls-lang:hover { border-color: var(--wine); color: var(--wine); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.ls-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.65rem 1.5rem; border-radius: var(--pill);
  font-family: var(--f-ui); font-size: 0.9rem; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ls-btn-primary { background: var(--wine); color: var(--on-wine); }
.ls-btn-primary:hover { background: #681a27; }
.ls-btn-ghost { color: var(--wine); border-color: var(--line-strong); background: var(--raised); }
.ls-btn-ghost:hover { border-color: var(--wine); }
.ls-head .ls-btn { min-height: 40px; padding: 0.5rem 1.15rem; font-size: 0.82rem; }

/* ── Ouverture ───────────────────────────────────────────────────────────── */
.ls-hero { padding-block: 4.5rem 3.5rem; }
.ls-hero-in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 3.5rem; align-items: center; }
.ls-eyebrow {
  margin: 0 0 1rem; color: var(--wine);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.ls-hero h1 {
  margin: 0; font-family: var(--f-display); font-weight: 500; font-style: italic;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.06; color: var(--ink);
}
.ls-lead { margin: 1.4rem 0 2rem; font-size: 1.05rem; color: var(--muted); max-width: 34rem; }
.ls-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ls-facts { margin: 1.6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--ink-2); font-size: 0.8rem; }
.ls-facts li { position: relative; padding-left: 0.85rem; }
.ls-facts li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.ls-shots { position: relative; padding-bottom: 2.5rem; }
.ls-shot-wide {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--ombre); background: var(--raised);
}
.ls-shot-phone {
  position: absolute; right: -0.5rem; bottom: 0; width: 34%;
  border-radius: 26px; overflow: hidden; border: 6px solid var(--raised);
  box-shadow: var(--ombre); background: var(--raised);
}

/* ── Bande de garde ──────────────────────────────────────────────────────── */
.ls-band { background: var(--band); border-block: 1px solid var(--line); padding-block: 3.5rem; }
.ls-band h2,
.ls-sec h2 {
  margin: 0 0 0.75rem; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1;
}
.ls-band > .ls-wrap > p,
.ls-sec-intro { margin: 0 0 2rem; color: var(--muted); max-width: 44rem; }
.ls-bar { position: relative; height: 10px; border-radius: var(--pill); background: var(--courbe); margin: 0 0 1.25rem; }
/* Le pic est un MARQUEUR posé sur la bande, jamais une zone (charte). */
.ls-bar::after {
  content: ''; position: absolute; left: 79%; top: -4px; bottom: -4px; width: 2px;
  background: var(--ph-pic); border-radius: 2px;
}
.ls-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.ls-phases li { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 0.9rem; }
.ls-phases b { display: block; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ls-phases span { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.45; margin-top: 0.2rem; }
.ls-ph-jeunesse b { color: var(--ph-jeunesse); }
.ls-ph-maturite b { color: var(--ph-maturite); }
.ls-ph-apogee b { color: var(--ph-apogee); }
.ls-ph-pic b { color: var(--ph-pic); }
.ls-ph-declin b { color: var(--ph-declin); }

/* ── Fonctions : rangées alternées, capture de téléphone et texte ────────── */
.ls-sec { padding-block: 4.5rem; }
.ls-features { display: grid; gap: 4.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.ls-feature {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 4rem;
  align-items: center; max-width: 920px; margin-inline: auto;
}
.ls-feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.ls-feature:nth-child(even) figure { order: 2; }
.ls-feature figure { margin: 0; }
.ls-feature figure img {
  width: 100%; border-radius: 26px; border: 6px solid var(--raised);
  box-shadow: var(--ombre); background: var(--raised);
}
.ls-feature figcaption { margin-top: 0.8rem; color: var(--ink-2); font-size: 0.78rem; font-style: italic; text-align: center; }
.ls-kicker { margin: 0 0 0.6rem; color: var(--wine); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.ls-feature h3 { margin: 0 0 0.75rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.12; }
.ls-feature p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 30rem; }

.ls-also { margin-top: 3.5rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem 2rem; }
.ls-also h3 { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.ls-also ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 2rem; }
.ls-also li { position: relative; padding-left: 1.1rem; font-size: 0.92rem; }
.ls-also li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ── Formules ────────────────────────────────────────────────────────────── */
.ls-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: 72rem; }
.ls-plan { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem; display: flex; flex-direction: column; }
.ls-plan-main { border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-wash) 0%, var(--raised) 60%); }
.ls-plan h3 { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.ls-plan > p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; }
/* Après `.ls-plan > p`, et aussi précis que lui : sinon le prix prend sa taille de texte. */
.ls-plan > .ls-price { margin: 0.6rem 0 0.35rem; font-family: var(--f-display); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--ink); }
.ls-price small { font-family: var(--f-ui); font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.ls-plan > .ls-price-alt { margin: 0 0 1.1rem; color: var(--ink-2); font-size: 0.8rem; line-height: 1.5; }
.ls-price-alt span { display: block; }
.ls-plan ul { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.9rem; }
.ls-plan li { position: relative; padding-left: 1.4rem; }
.ls-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--ph-maturite); }
.ls-plan .ls-btn { margin-top: auto; align-self: flex-start; }
.ls-note { margin: 1.5rem 0 0; color: var(--ink-2); font-size: 0.8rem; max-width: 52rem; }

/* ── Questions ───────────────────────────────────────────────────────────── */
.ls-faq { max-width: 48rem; border-top: 1px solid var(--line); }
.ls-faq details { border-bottom: 1px solid var(--line); }
.ls-faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3;
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 0.95rem;
  font-family: var(--f-ui); font-weight: 300; font-size: 1.4rem; color: var(--wine);
}
.ls-faq details[open] summary::after { content: '−'; }
.ls-faq details p { margin: 0 0 1.15rem; color: var(--muted); font-size: 0.92rem; }

/* ── Fin de page ─────────────────────────────────────────────────────────── */
.ls-end { text-align: center; padding-block: 4rem; border-top: 1px solid var(--line); }
.ls-end p { margin: 0 auto 1.5rem; max-width: 36rem; font-family: var(--f-display); font-style: italic; font-size: 1.6rem; line-height: 1.3; }
.ls-foot { background: var(--band); border-top: 1px solid var(--line); padding-block: 2rem; color: var(--ink-2); font-size: 0.8rem; }
.ls-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
.ls-foot a { color: var(--ink-2); }
.ls-foot-in > :first-child { margin-right: auto; }

/* ── Téléphone ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .ls-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .ls-nav { display: none; }
  .ls-head-in { gap: 0.75rem; min-height: 62px; }
  .ls-logo img { width: 112px; }
  .ls-head .ls-btn { padding: 0.45rem 0.9rem; }
  .ls-hero { padding-block: 2.5rem 2rem; }
  .ls-hero-in { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .ls-shot-phone { width: 38%; right: -0.25rem; }
  .ls-band, .ls-sec { padding-block: 3rem; }
  .ls-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-features { gap: 3.5rem; }
  .ls-feature,
  .ls-feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .ls-feature:nth-child(even) figure { order: 0; }
  .ls-feature figure { width: min(280px, 78%); margin-inline: auto; }
  .ls-also { padding: 1.5rem 1.25rem; }
  .ls-also ul { grid-template-columns: minmax(0, 1fr); }
  .ls-plans { grid-template-columns: minmax(0, 1fr); }
  .ls-foot-in > :first-child { margin-right: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}