/* ============================================================
   CAMÉLIA — « La Cure » landing page  ·  /fr/cure.html
   Standalone stylesheet. Does NOT touch assets/css/style.css,
   so the live pages (/, /fr/, thank-you, upsell) are unaffected.

   Design system: 18_Phase1_Design_Blueprint_LP_FR.md §D
   cream = base · aubergine = brand · gold = detail
   green = trust · terracotta = ACTION (buttons only)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Surfaces */
  --cream:        #F6EEE2;   /* main background */
  --cream-light:  #FBF6EF;   /* alternating background */
  --white:        #FFFFFF;

  /* Brand */
  --aubergine:    #4E2A44;
  --aubergine-dk: #3A1E32;
  --green:        #C9A24B;   /* INVERSION: confiance/naturel (was vert, now gold) */
  --gold:         #C9A24B;

  /* Action — buttons ONLY, nothing else may use it */
  --cta:          #2E7D5B;   /* INVERSION: vert profond (was terracotta) */
  --cta-hover:    #1F5A45;   /* vert plus foncé */
  --cta-active:   #16453A;   /* vert encore plus foncé */
  --cta-text:     #FFFFFF;

  /* Text */
  --ink:          #2A2724;   /* primary + the 349 */
  --ink-soft:     #6E6459;   /* secondary */

  /* Form fields */
  --field-bg:     #FFFFFF;
  --field-border: #B9AC97;   /* 3.1:1 on white — WCAG 1.4.11 */
  --card-border:  #E3D9C8;

  /* Shape */
  --r-card:   16px;
  --r-btn:    12px;
  --r-pill:   999px;

  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 10px rgba(78, 42, 68, 0.05);
  --shadow-cta:  0 4px 14px rgba(46, 125, 91, 0.26);   /* INVERSION: vert */
  --shadow-cta-h: 0 8px 22px rgba(46, 125, 91, 0.34); /* INVERSION: vert */

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1080px;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* room for the sticky mobile bar */
  padding-bottom: 76px;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--aubergine);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--aubergine); }

::selection { background: var(--gold); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.section { padding: 44px 0; }
.section--cream { background: var(--cream); }
.section--light { background: var(--cream-light); }
.section--plum  { background: var(--aubergine); color: #F0E6EC; }
.section--plum h2, .section--plum h3 { color: #fff; }

/* Hairline separator between two same-tone blocks */
.section + .section { border-top: 1px solid rgba(110, 100, 89, 0.12); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.section-head p { color: var(--ink-soft); margin: 0; }

/* Small caps eyebrow with fine gold rules */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  height: 1px;
  width: 26px;
  background: var(--gold);
  opacity: 0.6;
}
/* Left-aligned variant: drop both rules — on two lines a trailing dash floats */
.eyebrow--start { justify-content: flex-start; text-align: start; }
.eyebrow--start::before,
.eyebrow--start::after { display: none; }

/* ---------- 3. BUTTONS ---------- */
.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 26px;
  background: var(--cta);
  color: var(--cta-text);
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  /* 19px/700 keeps white-on-terracotta above the AA large-text threshold */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: background .2s, transform .15s, box-shadow .2s;
}

.btn-cta:hover, .btn-cta:focus {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-h);
  outline: none;
}
.btn-cta:active {
  background: var(--cta-active);
  transform: translateY(0);
  box-shadow: var(--shadow-cta);
}
.btn-cta:focus-visible { outline: 3px solid var(--aubergine); outline-offset: 3px; }
.btn-cta.loading { opacity: .85; pointer-events: none; cursor: progress; }
.btn-cta.loading svg { animation: cam-spin .8s linear infinite; transform-origin: 50% 50%; }
@keyframes cam-spin { to { transform: rotate(360deg); } }
.btn-cta svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Secondary — outlined aubergine, never terracotta */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1.5px solid var(--aubergine);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--aubergine);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn-ghost:hover { background: var(--aubergine); color: #fff; }

/* Reassurance line under every CTA */
.microtrust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-align: center;
}
.microtrust svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
.microtrust .sep { opacity: .45; }
.section--plum .microtrust { color: #CFC0C9; }

.cta-block { max-width: 460px; margin: 0 auto; }

/* ---------- 4. HEADER + ANNOUNCE BAR ---------- */
.announce {
  background: var(--aubergine);
  color: #F2E8EF;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-align: center;
  padding: 8px 16px;
}
.announce strong { color: var(--gold); font-weight: 600; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 238, 226, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 58px;
}
.brand {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--aubergine);
  letter-spacing: .04em;
  text-decoration: none;
}
.brand span { color: var(--gold); }
.header-trust { display: none; font-size: 12.5px; color: var(--ink-soft); }
.header-cta {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--cta);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.header-cta:hover { background: var(--cta-hover); }

/* ---------- 5. HERO ---------- */
.hero { background: var(--cream); padding: 26px 0 40px; }
.hero-media { margin: 0 0 22px; }
/* <picture> : une seule image telechargee (mobile OU desktop) */
.hero-media picture { display: block; }
.hero-media img {
  width: 100%;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.hero-media .desk { display: none; }

.hero h1 { margin-bottom: 12px; }
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 56ch;
}

.hero-benefits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.hero-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
}
.hero-benefits svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 3px; }

.trustline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 11px 14px;
  background: var(--cream-light);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 18px;
}
.trustline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

.rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13.5px; color: var(--ink-soft); }
.rating .stars { color: var(--gold); letter-spacing: 1px; font-size: 15px; }

/* Price block — the 349 is the most contrasted element on the page */
.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.price-now { font-family: var(--font-display); font-size: 54px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.price-cur { font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.price-was { font-size: 16px; color: var(--ink-soft); text-decoration: line-through; }
.price-save {
  align-self: center;
  background: var(--green);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- 6. PAIN ---------- */
.pain-grid { display: grid; gap: 22px; }
.pain-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.pain-list svg { width: 16px; height: 16px; color: var(--aubergine); flex-shrink: 0; margin-top: 3px; }
.pain-note {
  border-inline-start: 3px solid var(--gold);
  padding-block: 4px;
  padding-inline-start: 14px;
  color: var(--ink-soft);
  font-size: 15px;
}
.pain-media img { border-radius: var(--r-card); box-shadow: var(--shadow-soft); width: 100%; }

/* ---------- 7. LA CURE (solution) ---------- */
.cure-intro { text-align: center; max-width: 680px; margin: 0 auto; }
.cure-intro p { font-size: 16px; }
.cure-intro strong { color: var(--aubergine); font-weight: 600; }

.cure-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px auto 0;
  max-width: 560px;
}
.cure-step {
  text-align: center;
  padding: 16px 8px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
}
.cure-step .num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}
.cure-step .lbl { font-family: var(--font-display); font-size: 17px; color: var(--aubergine); font-weight: 600; }

.stats {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin-top: 26px;
  flex-wrap: wrap;
}
.stat { padding: 8px 18px; text-align: center; }
/* Dividers only once the row fits on a single line, otherwise they read ragged */
@media (min-width: 560px) {
  .stat + .stat { border-inline-start: 1px solid rgba(201, 162, 75, .45); }
}
.stat-num { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--aubergine); }
.stat-lbl { display: block; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 8. LES 3 SOINS ---------- */
.soins { display: grid; gap: 18px; }
.soin {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.soin-media { background: var(--cream-light); }
.soin-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.soin-body { padding: 18px; }
.soin-num {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.soin h3 { margin-bottom: 2px; }
.soin-vol { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.soin-tag { font-family: var(--font-display); font-style: italic; color: var(--aubergine); font-size: 16px; margin: 8px 0 6px; }
.soin-role { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 12px; }
.soin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.soin-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; }
.soin-list svg { width: 15px; height: 15px; color: var(--green); flex-shrink: 0; margin-top: 3px; }
.soin-list b { color: var(--aubergine); font-weight: 600; }
.soin-ritual {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--card-border);
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.soin-ritual svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

/* ---------- 9. INGRÉDIENTS ---------- */
.ing-hero { margin-bottom: 24px; }
.ing-hero img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow-soft); aspect-ratio: 16 / 9; object-fit: cover; }

.ing-group { margin-bottom: 26px; }
.ing-group:last-child { margin-bottom: 0; }
.ing-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--card-border);
}
.ing-group-head h3 { margin: 0; font-size: 18px; }
.ing-group-head .for { font-size: 12.5px; color: var(--ink-soft); }

.ing-grid { display: grid; gap: 10px; }
.ing {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 12px;
}
.ing-thumb {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream-light);
  border: 1px solid var(--card-border);
}
.ing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ing-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--aubergine); display: block; }
.ing-benefit { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* Ingredient with no photo yet → gold monogram disc, never a broken image */
.ing-thumb--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  background: var(--cream);
}

.ing-footnote { margin-top: 18px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ---------- 10. LE RITUEL ---------- */
.ritual-grid { display: grid; gap: 22px; }
.ritual-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ritual-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.ritual-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.ritual-step h3 { font-size: 17px; margin-bottom: 2px; }
.ritual-step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.ritual-freq {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: rgba(201, 162, 75, .09);
  border-radius: var(--r-pill);
  padding: 3px 11px;
}
.ritual-media img { width: 100%; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }

/* ---------- 11. PREUVE ---------- */
.proof-masonry { columns: 2; column-gap: 10px; }
.proof-masonry figure { margin: 0 0 10px; break-inside: avoid; }
.proof-masonry img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--card-border);
}
.proof-caption { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 14px; }

.audio-grid { display: grid; gap: 14px; margin-top: 26px; }
.audio-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.audio-card.playing { border-color: var(--gold); box-shadow: var(--shadow-soft); }
.audio-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.audio-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--aubergine);
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.audio-name { font-weight: 600; font-size: 14.5px; }
.audio-city { font-size: 12.5px; color: var(--ink-soft); }
.audio-stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.audio-quote { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--aubergine); margin-bottom: 12px; }
.hidden-audio { display: none; }

.audio-player { display: flex; align-items: center; gap: 11px; }
.ap-play-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--aubergine);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.ap-play-btn:hover { background: var(--aubergine-dk); }
.ap-play-btn svg { width: 15px; height: 15px; }
.ap-track-wrap { flex: 1; position: relative; height: 30px; display: flex; align-items: center; cursor: pointer; }
.ap-waveform { width: 100%; height: 30px; display: block; }
.ap-progress-bar { position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; background: var(--card-border); border-radius: 2px; }
.ap-progress-fill { height: 100%; background: var(--gold); border-radius: 2px; width: 0; }
.ap-time { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 34px; text-align: end; }

/* ---------- 12. TIMELINE ---------- */
.timeline { display: grid; gap: 14px; position: relative; }
.tl-item {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.tl-when {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.tl-item h3 { font-size: 17px; margin-bottom: 4px; }
.tl-item p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }
.tl-note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ---------- 13. OFFRE + FORMULAIRE ---------- */
.offer-grid { display: grid; gap: 20px; }

.value-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: 20px 18px;
}
.value-card h3 { text-align: center; margin-bottom: 4px; }
.value-media { margin: 0 0 16px; }
.value-media img { width: 100%; border-radius: 12px; }

.value-list { list-style: none; margin: 0 0 4px; padding: 0; }
.value-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--card-border);
  font-size: 14.5px;
}
.value-list .vl-name { flex: 1; }
.value-list .vl-name small { display: block; font-size: 12px; color: var(--ink-soft); }
.value-list .vl-price { color: var(--ink-soft); white-space: nowrap; }
.value-list .vl-free { color: var(--green); font-weight: 600; white-space: nowrap; }

.value-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 4px; font-size: 14.5px; }
.value-total .vt-old { text-decoration: line-through; color: var(--ink-soft); }

.value-final {
  margin-top: 8px;
  text-align: center;
  padding: 16px;
  background: var(--cream-light);
  border: 1px solid var(--gold);
  border-radius: 14px;
}
.value-final .vf-price { font-family: var(--font-display); font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1; }
.value-final .vf-cur { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.value-final .vf-save {
  display: inline-block;
  margin-top: 8px;
  background: var(--green);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Form */
.order-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: 20px 18px 22px;
}
.order-card h3 { text-align: center; }
.order-card > p { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 16px; }

.pack-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 18px;
  background: var(--cream-light);
  border: 1px solid var(--gold);
  border-radius: 12px;
}
.pack-line .pl-name { font-weight: 600; font-size: 14.5px; color: var(--aubergine); }
.pack-line .pl-name small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.pack-line .pl-price { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field-wrap { position: relative; display: flex; align-items: center; }
.field input {
  width: 100%;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  padding-block: 14px;
  padding-inline: 14px 42px;   /* 42px du cote de .field-icon, RTL compris */
  font-family: var(--font-body);
  font-size: 16px;               /* 16px prevents iOS zoom-on-focus */
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #A69A88; }
[dir="rtl"] .field input[type="tel"] {
  direction: ltr;      /* un numero se lit toujours 0-6-... */
  text-align: right;   /* ... mais il commence du cote lecture arabe */
  /* direction: ltr inverse AUSSI le sens des proprietes logiques sur cet
     element : padding-inline y redevient gauche-droite, alors que l'icone
     reste positionnee par le parent, toujours en RTL, donc a GAUCHE.
     On repasse donc en physique ici — c'est le seul endroit du fichier ou
     le contexte est mixte, et le physique y est plus lisible que le logique. */
  padding-left: 42px;  /* cote icone */
  padding-right: 14px;
}
.field input:focus {
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(217, 72, 15, .14);
}
.field .field-icon {
  position: absolute;
  inset-inline-end: 14px;
  width: 18px; height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
}

.delivery-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--cream-light);
  border-inline-start: 3px solid var(--gold);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 16px;
}
.delivery-note svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

.form-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 13px;
  background: rgba(201, 162, 75, .07);
  border: 1px solid rgba(201, 162, 75, .2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.form-guarantee svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.form-guarantee b { color: var(--ink); }

/* ---------- 14. POURQUOI LA CURE ---------- */
.why-grid { display: grid; gap: 12px; }
.why-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 15px 16px;
}
.why-icon {
  grid-row: 1 / span 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(201, 162, 75, .14);
  display: flex; align-items: center; justify-content: center;
}
.why-icon svg { width: 19px; height: 19px; color: var(--aubergine); }
.why-item b { font-size: 15px; color: var(--aubergine); font-weight: 600; }
.why-item span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- 15. RÉASSURANCE ---------- */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trust-item {
  text-align: center;
  padding: 18px 12px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
}
.trust-item .ti-icon {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(78, 42, 68, .07);
  display: flex; align-items: center; justify-content: center;
}
.trust-item .ti-icon svg { width: 21px; height: 21px; color: var(--aubergine); }
.trust-item b { display: block; font-size: 14px; color: var(--ink); }
.trust-item span { font-size: 12.5px; color: var(--ink-soft); }

.guide-card {
  display: grid;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  background: var(--aubergine);
  color: #F0E6EC;
  border-radius: var(--r-card);
  padding: 22px 20px;
}
.guide-card h3 { color: #fff; }
.guide-card p { font-size: 14.5px; color: #DCCCD7; }
.guide-badge {
  display: inline-block;
  background: var(--gold);
  color: #2A2724;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 4px 12px;
  margin-bottom: 10px;
}
.guide-media img { width: 100%; border-radius: 12px; }

/* ---------- 16. FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--aubergine);
  text-align: start;
  cursor: pointer;
}
.faq-arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); transition: transform .25s; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 18px;
}
.faq-item.open .faq-answer { max-height: 460px; padding: 0 18px 16px; }
.faq-answer p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 17. CTA FINAL ---------- */
.final { text-align: center; }
.final h2 { color: #fff; }
.final .final-price { font-family: var(--font-display); font-size: 20px; color: var(--gold); margin-bottom: 18px; }
.final .final-price s { color: #B9A6B2; font-size: 16px; }

/* ---------- 18. FOOTER ---------- */
.site-footer {
  background: #2E1A28;
  color: #C4B4BE;
  text-align: center;
  padding: 34px 0 30px;
  font-size: 13px;
}
.site-footer .brand { color: #fff; font-size: 22px; display: inline-block; margin-bottom: 10px; }
.footer-rule { width: 44px; height: 1px; background: var(--gold); margin: 0 auto 14px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0; }
.footer-links a { color: #C4B4BE; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 12.5px;
}
.lang-switch a { color: #C4B4BE; text-decoration: none; }
.lang-switch .cur { color: #fff; font-weight: 600; }

/* ---------- 19. STICKY MOBILE CTA ---------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 246, 239, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--card-border);
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  transform: translateY(110%);
  transition: transform .28s ease;
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-thumb {
  width: 46px; height: 46px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}
.sticky-price { flex-shrink: 0; line-height: 1.15; }
.sticky-price b { display: block; font-family: var(--font-display); font-size: 21px; color: var(--ink); }
.sticky-price s { font-size: 12px; color: var(--ink-soft); }
.sticky-bar .btn-cta { flex: 1; padding: 13px 16px; font-size: 16px; box-shadow: none; }
.sticky-bar .btn-cta:hover { transform: none; }

/* ---------- 20. PLACEHOLDER (missing image, never broken/stretched) ---------- */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--cream-light);
  border: 1px dashed var(--card-border);
  border-radius: var(--r-card);
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 16px;
}
.img-ph--43 { aspect-ratio: 4 / 3; }
.img-ph--45 { aspect-ratio: 4 / 5; }
.img-ph--11 { aspect-ratio: 1 / 1; }

/* ---------- 21. SCROLL ANIMATIONS (main.js adds .visible) ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-in.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }

/* Hero (perf mobile 2026-09-23) : meme fondu + montee, mais en animation CSS
   lancee au premier rendu au lieu d'attendre que main.js (defer) pose
   .visible. Sur 4G lente cette attente retardait le LCP de plusieurs
   secondes. Opacite de depart 0.01 et non 0 : Chrome ignore un element a
   opacite 0 pour le LCP. Visuellement identique. */
@keyframes cam-hero-in {
  from { opacity: .01; transform: translateY(14px); }
  to   { opacity: 1;   transform: none; }
}
.hero .fade-in {
  opacity: 1;
  transform: none;
  transition: none;
  animation: cam-hero-in .5s ease both;
}
.hero .delay-1 { animation-delay: .08s; }
.hero .delay-2 { animation-delay: .16s; }
.hero .delay-3 { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .hero .fade-in { animation: none; }
  .btn-cta, .sticky-bar { transition: none; }
}

/* Skip link */
.skip {
  position: absolute; inset-inline-start: -9999px;
  background: var(--aubergine); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { inset-inline-start: 0; top: 0; }

/* ============================================================
   TABLET / DESKTOP
   ============================================================ */
@media (min-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 20px; }

  .section { padding: 72px 0; }
  .section-head { margin-bottom: 34px; }

  .header-trust { display: block; }

  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-item:first-child { grid-column: 1 / -1; }
  .ing-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .audio-grid { grid-template-columns: repeat(3, 1fr); }
  .proof-masonry { columns: 3; column-gap: 12px; }
  .soins { grid-template-columns: repeat(3, 1fr); align-items: start; }

  .pain-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 34px; }
  .ritual-grid { grid-template-columns: .95fr 1.05fr; align-items: center; gap: 34px; }
  .ritual-media { order: -1; }

  .guide-card { grid-template-columns: 1fr 220px; padding: 28px; }

  .offer-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }

  /* Hero: text left, product right */
  .hero { padding: 48px 0 64px; }
  .hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .hero-media { order: 2; margin: 0; }
  .hero-media .mob { display: none; }
  .hero-media .desk { display: block; }
  .hero-text { order: 1; }
  .price-now { font-size: 64px; }
  .cta-block { margin: 0; max-width: 420px; }
  .microtrust { justify-content: flex-start; }

  .btn-cta { font-size: 19px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }
  .section { padding: 88px 0; }
  .hero { padding: 60px 0 80px; }
  .ing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The sticky bar is a phone aid — desktop always shows a CTA in flow */
@media (min-width: 900px) {
  .sticky-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ============================================================
   ARABIC (RTL) MODE — /cure.html
   Layout mirroring already comes for free from the logical
   properties used throughout this file (border-inline-start,
   padding-inline-start, inset-inline-end, text-align: start…).
   This block only swaps typography for Arabic script.
   ============================================================ */
html[lang="ar"] {
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-body: 'Cairo', 'Tajawal', sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-weight: 700;
  letter-spacing: 0;
}
html[lang="ar"] .hero h1 em,
html[lang="ar"] .soin-tag,
html[lang="ar"] .audio-quote {
  font-style: normal;
}
html[lang="ar"] .eyebrow,
html[lang="ar"] .soin-num,
html[lang="ar"] .tl-when {
  letter-spacing: 0;
}
html[lang="ar"] .brand {
  letter-spacing: 0;
}

/* ============================================================
   COUPONS INFLUENCEUSES
   Bloc "code promo" dans la carte de commande + animation
   d'application du prix. Markup : #coupon-block dans #order-form.
   Direction-agnostique (propriétés logiques) : identique AR/FR.
   ============================================================ */

.coupon-block { margin: -4px 0 16px; }
/* .coupon-toggle et .coupon-applied ont un display explicite : sans cette
   regle, l'attribut [hidden] (feuille du navigateur) serait ecrase. */
.coupon-block [hidden] { display: none !important; }

/* Le déclencheur : un vrai bouton, pas un lien.
   Doré = badge/secondaire dans le systeme de la page — assez visible pour
   etre trouve, sans jamais concurrencer le vert d'action reserve a l'achat. */
.coupon-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #FBF3E2;
  border: 1.5px dashed var(--gold);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--aubergine);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s;
}
.coupon-toggle:hover {
  background: #F6E9CC;
  border-style: solid;
}
.coupon-toggle:active { transform: translateY(1px); }
.coupon-toggle svg {
  width: 19px;
  height: 19px;
  color: var(--gold-strong, #A8872A);
  flex-shrink: 0;
}

/* Variante permanente (formulaire de commande) : pas de declencheur,
   le champ est toujours la. Il se presente comme les autres champs du
   formulaire — libelle au-dessus, meme graisse, meme rythme vertical. */
.coupon-block--static { margin: 0 0 14px; }
.coupon-block--static .coupon-panel {
  padding-top: 0;
  animation: none;          /* rien a deplier : pas de slide a l'ouverture */
}
.coupon-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.coupon-label small {
  font-weight: 400;
  color: var(--ink-soft);
}

/* Variante hero : compacte et autonome, posee sous le prix.
   Fond blanc translucide car le hero est sur une photo/aplat sombre. */
.coupon-block--hero { margin: 0 0 18px; }
.coupon-block--hero .coupon-toggle {
  width: auto;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  background: rgba(255, 255, 255, .92);
  border-color: var(--gold);
}
.coupon-block--hero .coupon-toggle:hover { background: #fff; }
.coupon-block--hero .coupon-panel,
.coupon-block--hero .coupon-applied {
  max-width: 420px;
  background: rgba(255, 255, 255, .96);
}
.coupon-block--hero .coupon-panel { padding: 12px; border-radius: 12px; }
.coupon-block--hero .coupon-applied { padding: 10px 12px; }
.coupon-block--hero .ca-text { font-size: 13px; }

.coupon-panel { padding-top: 10px; animation: cam-slide-down .26s ease both; }

.coupon-row { display: flex; gap: 8px; align-items: stretch; }

.coupon-row input {
  flex: 1;
  min-width: 0;
  background: var(--field-bg);
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;              /* 16px = pas de zoom iOS au focus */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.coupon-row input::placeholder {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #A69A88;
}
.coupon-row input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .18);
}

.coupon-apply {
  flex-shrink: 0;
  background: var(--aubergine);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.coupon-apply:hover { background: var(--aubergine-dk); }
.coupon-apply:active { transform: translateY(1px); }

.coupon-msg { margin: 8px 0 0; font-size: 13px; line-height: 1.5; min-height: 0; }
.coupon-msg:empty { display: none; }
.coupon-msg--error { color: #B3261E; font-weight: 600; }

/* État appliqué : la carte verte de confirmation */
.coupon-applied {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #EFF7F2;
  border: 1.5px solid var(--cta);
}
.coupon-applied .ca-check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cta);
  color: #fff;
  display: grid;
  place-items: center;
}
.coupon-applied .ca-check svg { width: 15px; height: 15px; }
.coupon-applied .ca-text { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.coupon-applied .ca-text b {
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--cta);
}
.coupon-applied .ca-text small { display: block; font-size: 12px; color: var(--ink-soft); }
.coupon-applied .ca-text small:empty { display: none; }
.coupon-remove {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 4px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.coupon-remove:hover { color: #B3261E; }

/* Entrée de la carte + reflet doré qui balaie une seule fois */
.coupon-applied.pop { animation: cam-pop .42s cubic-bezier(.2, .9, .3, 1.4) both; }
.coupon-applied.pop .ca-check { animation: cam-check .5s .12s cubic-bezier(.2, .9, .3, 1.6) both; }
.coupon-applied.pop::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: cam-shine .85s .18s ease-out both;
}

/* Le prix qui bascule — appliqué sur chaque [data-cam] par main.js */
.cam-price-pop { animation: cam-price .62s ease-out both; }

/* Une fois le code actif, les pastilles d'économie passent au vert action */
html.has-coupon .price-save,
html.has-coupon .vf-save { background: var(--cta); }

@keyframes cam-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cam-pop {
  0%   { opacity: 0; transform: scale(.94) translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes cam-check {
  0%   { transform: scale(0) rotate(-40deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes cam-shine {
  to { inset-inline-start: 115%; }
}
@keyframes cam-price {
  0%   { color: var(--ink); }
  22%  { transform: scale(1.14); color: var(--cta); }
  55%  { transform: scale(.99); }
  100% { transform: scale(1); color: var(--ink); }
}
.cam-price-pop { display: inline-block; }
.shake { animation: cam-shake .38s ease both; }
@keyframes cam-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .coupon-panel,
  .coupon-applied.pop,
  .coupon-applied.pop .ca-check,
  .coupon-applied.pop::after,
  .cam-price-pop,
  .shake { animation: none; }
}

/* ============================================================
   COMMANDE PAR WHATSAPP
   Deux points d'entree : un bouton flottant permanent et une
   option secondaire sous le bouton d'envoi du formulaire.
   Le vert WhatsApp (#25D366) est une couleur de MARQUE, distincte
   du vert d'action --cta : elle n'apparait qu'accompagnee du
   logo WhatsApp, jamais seule, pour ne pas brouiller le CTA.
   ============================================================ */

:root {
  --wa:       #25D366;
  --wa-dark:  #128C7E;
  --wa-ink:   #0B5C4C;   /* 4.7:1 sur blanc — lisible en texte */
}

/* ---- Bouton flottant ---- */
.wa-fab {
  position: fixed;
  z-index: 60;                 /* sous la barre collante (70) */
  inset-inline-end: 16px;
  inset-block-end: 16px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 6px 18px rgba(18, 140, 126, .38);
  transition: transform .2s, box-shadow .2s, inset-block-end .28s ease;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(18, 140, 126, .46); }
.wa-fab:active { transform: scale(.97); }
.wa-fab svg { width: 30px; height: 30px; }

/* La barre collante mobile fait ~76px : quand elle est visible, le bouton
   remonte au-dessus plutot que de passer dessous. Le selecteur frere exige
   que .wa-fab soit place APRES .sticky-bar dans le HTML. */
.sticky-bar.visible ~ .wa-fab { inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Desktop : la barre collante disparait, le bouton reprend sa place basse
   et s'ecarte du bord. */
@media (min-width: 900px) {
  .wa-fab { inset-inline-end: 24px; inset-block-end: 24px; width: 58px; height: 58px; }
  .sticky-bar.visible ~ .wa-fab { inset-block-end: 24px; }
}

/* ---- Option dans le formulaire ---- */
/* Separateur « ou » : le trait est purement decoratif, le mot porte le sens. */
.form-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.form-or::before,
.form-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--card-border);
}

/* Contour et non aplat : l'achat direct reste le seul bouton plein. */
.btn-wa {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border: 1.5px solid var(--wa);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--wa-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.btn-wa:hover { background: #F0FBF5; }
.btn-wa:active { transform: translateY(1px); }
.btn-wa svg { width: 20px; height: 20px; color: var(--wa); flex-shrink: 0; }

.wa-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .btn-wa { transition: none; }
  .btn-cta.loading svg { animation: none; }
}

/* ============================================================
   PERF MOBILE (2026-09-23) — rendu differe des sections hors ecran
   Le navigateur saute le style/layout des sections loin de l'ecran
   jusqu'a ce qu'on s'en approche (Lighthouse : ~1,2 s de « Style &
   Layout » au chargement, relance a chaque police recue).
   Le hero n'est pas concerne (pas .section). Rendu identique.
   html.cv-off (pose par cure.js au 1er clic sur un lien #ancre) rend
   tout avant le defilement, pour que la cible — le formulaire — soit a
   sa position exacte et que le scroll doux ne s'arrete pas a cote.
   ============================================================ */
main > .section,
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
html.cv-off main > .section,
html.cv-off .site-footer {
  content-visibility: visible;
}