/* ── Consumer landing (home) ─────────────────────────────────────────
   Styles for the "panneau solaire virtuel" landing at /. Everything here
   is scoped under .ld-* classes so nothing collides with the shared
   modal/nav/footer styles the page inherits from index.html's inline
   block (which the auth + account modals depend on).

   Brand tokens, not the mockup's: green #15803D (+ #22C55E accents,
   #F0FDF4 tints), stone greys, secondary yellow #FACC15. Headings use
   the site's Suisse Screen via .font-heading. */

/* ── Animations (from the approved design) ── */
/* The power lines slide a 6-on 5-off dash pattern. One loop must move it
   by a whole number of repeats (11 units), or the dashes visibly snap back
   at every loop end: 28 was two and a half. The duration sits inline on
   each line; 1.73 s keeps the speed that 28 units in 2.2 s had. */
@keyframes ld-flow { to { stroke-dashoffset: -22; } }
@keyframes ld-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-ticker {
  0%, 3% { opacity: 0; transform: translateY(12px); }
  8%, 42% { opacity: 1; transform: translateY(0); }
  47%, 100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes ld-travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ld-travel2 {
  0% { offset-distance: 0%; opacity: 0; }
  3% { opacity: 1; }
  23% { opacity: 1; }
  26% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ld-cellblink { 0%, 100% { opacity: 0.15; } 35%, 65% { opacity: 1; } }
/* Clouds drifting across the "Comment ça marche" sky (user call
   2026-09-05). A cloud is a <use> of the scene's shape inside two groups:
   the outer carries the resting position as an SVG transform and is never
   animated, the inner (.ld-cloud) drifts from --ld-d0 to --ld-d1, the two
   x offsets (inline, per cloud) that put it just past the left and right
   edges, so the loop never shows a jump. Inline animation-duration and
   -delay give each cloud its own speed and a spread start. The
   reduced-motion rule below stops them on their resting positions, which
   read as a still sky. */
@keyframes ld-drift { from { transform: translateX(var(--ld-d0)); } to { transform: translateX(var(--ld-d1)); } }
.ld-cloud { animation: ld-drift 100s linear infinite; }
@keyframes ld-fly {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 0.8; }
  94% { opacity: 0.8; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ld-wingL { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-24deg); } }
@keyframes ld-wingR { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(24deg); } }
@keyframes ld-gustsway {
  0%, 40%, 100% { transform: rotate(-1.2deg); }
  20% { transform: rotate(1deg); }
  62% { transform: rotate(1.5deg); }
  72% { transform: rotate(5deg); }
  82% { transform: rotate(1.5deg); }
  90% { transform: rotate(3deg); }
}
@keyframes ld-leafwave {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(10deg) translateY(-1px); }
}
@keyframes ld-grassbend {
  0%, 55%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(24deg); }
  78% { transform: rotate(8deg); }
  86% { transform: rotate(15deg); }
  94% { transform: rotate(3deg); }
}

/* ── Fixed-nav clearance ──
   The header is fixed, so the clearance lives on <main> (not on the
   hero): that way the offer band, when the admin toggle shows it, sits
   flush under the header, and hiding it can't push the hero under the
   nav. landing.css only loads on the home page, so this doesn't leak. */
#main-content { padding-top: 5rem; }
@media (min-width: 1024px) { #main-content { padding-top: 5.5rem; } }

/* ── Launch-offer band (under the header, above the hero) ── */
.ld-offer-band {
  background: #F0FDF4;
  border-bottom: 1px solid #BBF7D0;
}
.ld-offer-band-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 9px 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  font-size: 0.8125rem;
  color: #1C1917;
}
.ld-offer-title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ld-offer-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ld-offer-item svg { flex-shrink: 0; }
.ld-offer-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  background: #FEF3C7;
  color: #92400E;
  font-size: 10px;
  line-height: 1;
}
.ld-offer-link { font-size: 0.78rem; color: #6B7280; white-space: nowrap; }
@media (max-width: 640px) {
  .ld-offer-band-inner { gap: 4px 14px; font-size: 0.78rem; padding: 8px 0.75rem; }
}

/* ── Hero ── */
/* Three grid areas so the phone order can differ from the desktop
   columns: on mobile the visual slides in right after the lede ("…sur
   votre facture.") and the CTAs + chips follow it (user call,
   2026-09-01). On desktop the visual spans both left-column rows, which
   renders exactly like the old two-column layout. */
.ld-hero {
  display: grid;
  grid-template-columns: minmax(min(100%, 380px), 1.35fr) minmax(min(100%, 340px), 1fr);
  grid-template-areas:
    "text visual"
    "actions visual";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(28px, 4vw, 56px);
  padding: clamp(18px, 2vw, 30px) 1rem 48px;
  max-width: 80rem;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
}
.ld-hero-text { grid-area: text; }
.ld-hero-actions { grid-area: actions; }
.ld-hero-right { grid-area: visual; }
@media (min-width: 640px) { .ld-hero { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .ld-hero { padding-left: 2rem; padding-right: 2rem; } }
@media (max-width: 900px) {
  .ld-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "visual" "actions";
    grid-template-rows: none;
    gap: 0;
    padding-bottom: 31px;
  }
  /* Text→visual gap on phones: the lede's own 24px margin plus 12px
     here (was 24px; trimmed 25% of the 48px total, user call). */
  .ld-hero-right { margin: 12px 0 26px; }
}

.ld-hero-h1 {
  font-weight: 800;
  font-size: clamp(2.3rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #1C1917;
  margin: 0 0 16px;
}
/* The second line's nowrap (design intent: one clean line on desktop)
   is wider than a phone at the clamp floor — let it wrap there instead
   of overflowing the viewport. */
@media (max-width: 640px) {
  .ld-hero-h1 span { white-space: normal !important; }
}
.ld-hero-tagline {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 700;
  font-size: clamp(1.19rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 18px;
}
.ld-hero-tagline .ld-mark {
  color: #15803D;
  background: linear-gradient(transparent 70%, #DCFCE7 70%);
}
.ld-hero-lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: #44403C;
  margin: 0 0 24px;
  max-width: 540px;
  text-wrap: pretty;
}
.ld-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 26px;
}
.ld-cta-primary {
  display: inline-block;
  background: linear-gradient(135deg, #15803D 0%, #166534 100%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ld-cta-primary:hover {
  color: #fff;
  text-decoration: none;
  transform: scale(1.03);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.35);
}
@media (max-width: 420px) { .ld-cta-primary { white-space: normal; text-align: center; } }
/* Actions on phones: primary CTA, eligibility chips, then the video pill
   alone, centered, closing the hero (user call 2026-09-05). .ld-hero-ctas
   dissolves (display: contents) so its two children can be ordered against
   the chips list, their sibling; its 12px gap and 26px margin go with it,
   hence the explicit margins. Declared AFTER the .ld-hero-ctas base rule
   above on purpose: same specificity, so source order decides. Desktop
   keeps the pill beside the CTA. */
@media (max-width: 900px) {
  .ld-hero-actions { display: flex; flex-direction: column; align-items: flex-start; }
  .ld-hero-ctas { display: contents; }
  .ld-cta-primary { order: 1; margin-bottom: 26px; }
  .ld-elig-rail { order: 2; align-self: stretch; }
  .wm-video-link { order: 3; align-self: center; margin-top: 14px; }
}

/* ── Les cinq arguments d'éligibilité: trois façons d'attirer l'œil ──
   (user calls 2026-09-16, 2026-09-18 puis 2026-09-19)

   Immobiles sous le bouton, en deux ou trois rangées, ils se lisaient
   comme une mention légale. Un ruban défilant a tenu du 2026-09-16 au
   2026-09-18, puis la rangée immobile est revenue. Trois traitements sont
   désormais écrits et l'admin choisit (/admin/pages → « Présentation »,
   clé `landing_chips_anim`, servie dans la classe du rail par
   src/i18n/landing-chips.js):

     A `ld-elig--marquee`  le ruban qui défile en continu;
     B `ld-elig--ticker`   un argument à la fois, qui monte, se pose et
                           repart;
     C `ld-elig--sweep`    les cinq restent en place, une lumière verte
                           les parcourt l'un après l'autre;
     D (aucune classe)     immobiles, la rangée de la page producteurs:
                           le défaut depuis le 2026-09-21 (mode « still »).

   **Sans classe de mode, le rail est la rangée immobile du 2026-09-18**:
   cinq pastilles qui reviennent à la ligne, la seconde copie masquée.
   C'est volontaire, et c'est le repli de tout ce qui peut rater en amont
   (base injoignable, jeton non substitué, valeur inconnue en base): le
   pire état possible du bloc reste la page que l'utilisateur a validée.

   A — La piste contient la liste DEUX FOIS et se décale de la MOITIÉ de
   sa largeur, si bien que la copie arrive exactement là où l'original
   était (une boucle sans saut, quelle que soit la langue: l'allemand est
   plus long, la piste plus large, le pas de -50% suit); les deux copies
   portent le même `padding-right` pour que l'espace de la couture soit
   celui des autres, sinon deux pastilles se colleraient une fois par
   tour; le masque dégradé les fait entrer et sortir en fondu plutôt que
   de les trancher au bord du rail. Durée fixe et linéaire, ~35 px/s, la
   vitesse à laquelle on lit un mot qui passe; le survol met en pause,
   parce qu'une phrase qu'on veut relire ne doit pas fuir sous le curseur.

   B — Le motif du bandeau jaune du simulateur (`ld-ticker`, sim-card.css),
   repris tel quel pour que la page ne parle pas deux langues: monter,
   tenir, repartir par le haut. Les cinq pastilles se superposent dans UNE
   cellule de grille, donc la hauteur du bloc est celle de la plus haute,
   calculée et non codée en dur (elle suit la taille de police du
   téléphone). Le plus lisible des trois, et le seul qui laisse quatre
   arguments sur cinq invisibles à chaque instant: c'est le prix.

   C — Personne ne quitte l'écran. Chaque pastille s'allume à son tour
   (bordure, halo, un pixel de lift) pendant que les autres restent
   lisibles. La lumière ne touche ni le fond ni l'encre: le contraste du
   texte est le même allumé qu'éteint, ce qui met le bloc hors de portée
   de la règle AA que la suite axe mesure sur une animation en cours. */
.ld-elig-rail { margin: 0 0 1rem; }
/* Scoped under the rail on purpose: index.html carries the .wm-elig chip
   rules in its own <style>, qui vient APRÈS cette feuille dans le head,
   donc un `.ld-elig-set` nu perd l'égalité sur max-width, margin et
   flex-wrap et la rangée se remet silencieusement à revenir à la ligne
   (mesuré le 2026-09-16: deux rangées, 520px d'une piste de 1040px).
   Deux classes battent une, quel que soit l'ordre. */
.ld-elig-rail .ld-elig-set { margin: 0; }
/* La seconde copie n'existe que pour la boucle du ruban. */
.ld-elig-rail .ld-elig-set + .ld-elig-set { display: none; }

/* A — le ruban */
.ld-elig--marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.ld-elig--marquee .ld-elig-track {
  display: flex;
  width: max-content;
  animation: ld-elig-scroll 22s linear infinite;
}
.ld-elig--marquee:hover .ld-elig-track { animation-play-state: paused; }
.ld-elig--marquee .ld-elig-set {
  flex-wrap: nowrap;
  max-width: none;
  padding-right: 8px;
}
.ld-elig--marquee .ld-elig-set + .ld-elig-set { display: flex; }
@keyframes ld-elig-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* B — un argument à la fois */
.ld-elig--ticker .ld-elig-set { display: grid; max-width: none; }
.ld-elig--ticker .ld-elig-set > li {
  grid-area: 1 / 1;
  justify-self: start;
  opacity: 0;
  animation: ld-elig-rise 20s ease-in-out infinite;
}
.ld-elig--ticker .ld-elig-set > li:nth-child(2) { animation-delay: 4s; }
.ld-elig--ticker .ld-elig-set > li:nth-child(3) { animation-delay: 8s; }
.ld-elig--ticker .ld-elig-set > li:nth-child(4) { animation-delay: 12s; }
.ld-elig--ticker .ld-elig-set > li:nth-child(5) { animation-delay: 16s; }
/* Cinq créneaux de 4s. Le rapport monter / tenir / repartir est celui du
   bandeau jaune, rapporté au créneau: 0,4s de montée, 2,8s posé, 0,4s de
   sortie, et 0,4s de vide avant que le suivant se lève. */
@keyframes ld-elig-rise {
  0%, 1%    { opacity: 0; transform: translateY(10px); }
  3%, 17%   { opacity: 1; transform: translateY(0); }
  19%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* C — la lumière verte */
.ld-elig--sweep .ld-elig-set > li {
  animation: ld-elig-glow 10s ease-in-out infinite;
  will-change: box-shadow;
}
.ld-elig--sweep .ld-elig-set > li:nth-child(2) { animation-delay: 2s; }
.ld-elig--sweep .ld-elig-set > li:nth-child(3) { animation-delay: 4s; }
.ld-elig--sweep .ld-elig-set > li:nth-child(4) { animation-delay: 6s; }
.ld-elig--sweep .ld-elig-set > li:nth-child(5) { animation-delay: 8s; }
/* Dix secondes, cinq créneaux de deux: la pastille s'allume en 0,4s,
   tient 0,8s, s'éteint en 0,6s, et la suivante prend le relais à
   l'instant où celle-ci s'est éteinte. Ni le fond ni la couleur du texte
   ne bougent (cf. l'en-tête). */
@keyframes ld-elig-glow {
  0%, 2%     { border-color: #BBF7D0; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: translateY(0); }
  6%, 14%    { border-color: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); transform: translateY(-1px); }
  20%, 100%  { border-color: #BBF7D0; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: translateY(0); }
}

/* ── Hero right column: launch offer + impact cards + panel ── */
.ld-hero-right { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* A white card on a hairline, resting on a soft shadow (user call
   2026-09-18, after a green radial tint, then the scene's sky blue, then a
   paler blue, all judged too much). The colour of the block now comes
   from what is on it: the light grey rows, the house on its green soil.
   test/landing-markup.test.js pins the three choices. */
.ld-hero-visual {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  box-shadow: 0 6px 24px rgba(28, 25, 23, 0.06);
  border-radius: 24px;
  padding: 18px 30px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
/* The rows of the hero card, on the mockup « Panneau Virtuel » of
   2026-09-07: light grey rows on the white card (user call 2026-09-18;
   they were white on a green tint, then on a blue one), a pastel disc with an
   outlined icon, the figure in the brand green (amber for the savings
   row) and the rest of the line in plain grey. No tint, no tilt, no
   heavy shadow any more. Sizes are the ones of before the mockup (user
   call, same day: the card had grown past a laptop screen). */
.ld-impact-cards { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ld-impact {
  border-radius: 14px;
  padding: 7px 14px;
  box-shadow: 0 1px 2px rgba(16, 40, 24, 0.04);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: #F5F5F4;
}
.ld-impact-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E3F3E8;
}
.ld-impact-icon svg { width: 20px; height: 20px; }
.ld-impact-lead {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: #15803D;
  white-space: nowrap;
}
.ld-impact-text { font-size: 0.79rem; font-weight: 400; line-height: 1.35; color: #374151; }
.ld-impact--savings .ld-impact-icon { background: #FDF1D9; }
/* Darker than the mockup's amber (#B7791F, 3.3:1 on white): at 17 px the
   line is not large text and needs 4.5:1; #92400E gives 6.4:1. */
.ld-impact--savings .ld-impact-lead { color: #92400E; white-space: normal; }
@media (max-width: 639px) {
  .ld-impact { padding: 7px 12px; gap: 10px; }
  .ld-impact-lead { font-size: 1rem; }
}

/* The cat's speech bubble (landing-cat.js): fades in and out, never
   catches the pointer, floats above everything in the scene. */
.ld-diagram-card .ld-cat-bubble { transition: opacity 0.25s ease; pointer-events: none; }
.ld-diagram-card .ld-cat-bubble text { font-family: 'Inter', sans-serif; }
/* Two quick taps on the cat open the arcade (landing-secret.js): a double
   tap on the scene must not zoom the page (manipulation keeps scrolling and
   pinch-zoom), and a double click on the cat must not select the labels
   around it. */
.ld-diagram-card svg { touch-action: manipulation; }
.ld-diagram-card .ld-cat { -webkit-user-select: none; user-select: none; }

/* The hero's house: the consumer house of the « Comment ça marche »
   scene, virtual panel on the roof, in place of the blue panel (user call
   2026-09-18). The markup is a copy of the scene's, in index.html; the
   animations are the scene's keyframes at the top of this file. Width
   fixed like the panel before it, so the card keeps roughly its height. */
/* Two layouts of the same drawing (index.html): wide, the notes beside the
   house, needs 437px for the house to keep its 280px; tall, the notes above
   and below, needs 293px. Wide where the card offers 437px: the single
   column under 900px, and the right column from 1180px up (at 1180 the
   column's content is ~390px and the house still 90% of its size; at 1024
   it would be 76%). Tall elsewhere: phones, and the two-column band from
   900 to 1179px. */
/* Ten percent shorter (user call 2026-09-18, the card was 627px tall on a
   laptop): the air went first (card padding 26/22 → 18/14, title margin
   16 → 10, rows padding 10 → 7 and gap 10 → 8, rows margin 14 → 8, house
   margin 2 → 0), then the house drawing lost 3% of its width (437 → 424)
   and the empty strip under its soil (viewBox 266 → 260 high). 627 → ~563. */
.ld-panel-wrap { position: relative; width: 424px; max-width: 100%; margin: 0 auto; flex-shrink: 0; }
.ld-hero-house { display: block; width: 100%; height: auto; overflow: visible; }
.ld-hero-house-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ld-hero-house--tall { display: none; }
@media (max-width: 639px), (min-width: 900px) and (max-width: 1179px) {
  .ld-panel-wrap { width: 293px; }
  .ld-hero-house--wide { display: none; }
  .ld-hero-house--tall { display: block; }
}
/* The notes: the hand and the green of the pill's « sans panneau »
   (.wm-audience-note), and a sketched line ending in an open arrowhead. */
.ld-hero-note {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  font-weight: 700;
  font-size: 21px;
  fill: #15803D;
}
.ld-hero-arrow { fill: none; stroke: #15803D; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Title of the visual block, above the cards (it captioned the panel at
   the bottom until 2026-09-05): one line saying what the cards add up to,
   so "chaque année" is said once here and not on each card. Two lines
   at every width; text-wrap keeps them even where supported. */
/* The card's heading, on the mockup « Panneau Virtuel » of 2026-09-07:
   a real title in the deep green, « virtuel » in the brand green, no band
   behind it (the white bands of the day before gave way to the mockup). */
.ld-visual-title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #14532D;
  text-align: center;
  text-wrap: balance;
  margin: 0 0 10px;
}
.ld-visual-title .text-primary { color: #15803D; }
@media (max-width: 639px) {
  .ld-visual-title { font-size: 1.2rem; margin-bottom: 10px; }
}
/* Words a locale string wants kept on one line ("panneau virtuel" in the
   hero visual title, "ce soir" in the final CTA): the strings wrap them in
   this span, the template renders them with t! (user calls 2026-09-05). */
.ld-nowrap { white-space: nowrap; }

/* ── Section shells ── */
/* Phone rhythm, trimmed by successive user calls (2026-09-01):
   72px → 58px → 52px → 47px per edge; two adjacent sections meet at
   ~94px. */
.ld-section { padding: 47px 1rem; }
@media (min-width: 640px) { .ld-section { padding: 72px 1.5rem; } }
.ld-section-inner { max-width: 80rem; margin: 0 auto; }
.ld-kicker {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #57534E;
  margin: 0 0 14px;
}
.ld-h2 {
  font-weight: 800;
  font-size: clamp(1.65rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  color: #1C1917;
  margin: 0 0 18px;
}
.ld-h2 .accent { color: #15803D; display: block; }
.ld-section-lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: #44403C;
  max-width: 660px;
  margin: 0 0 48px;
}

/* ── "Comment ça marche" diagram ── */
.ld-diagram-card {
  /* The card is the ground (pale green). The sky is a light blue rect the
     scene draws above its ground line only (user call, 2026-09-08: no blue
     under the dirt); it overflows the <svg> box so it reaches the card's
     edges, and the card's overflow:hidden clips it to the rounded corners.
     The cloud halos and the cat's bubble border are painted in that blue. */
  background: #F0FDF4;
  border-radius: 20px;
  padding: 32px 28px 18px;
  position: relative;
  overflow: hidden;
}
.ld-diagram-card svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Two compositions of the same scene: landscape on tablets/desktops,
   stacked portrait on phones, where the 1000×372 scene shrank to
   thumbnails (user call 2026-09-03). */
.ld-diagram-card .ld-diagram-portrait { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 639px) {
  .ld-diagram-card .ld-diagram-landscape { display: none; }
  .ld-diagram-card .ld-diagram-portrait { display: block; }
  .ld-diagram-card { padding: 22px 12px 14px; }
}
.ld-diagram-caption {
  text-align: center;
  font-size: 0.9rem;
  color: #57534E;
  margin: 14px 0 10px;
}

/* ── "Comment c'est possible" cards ── */
.ld-cards3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}
.ld-card {
  position: relative;
  background: #F0FDF4;
  border-radius: 18px;
  padding: 28px 28px 24px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}
/* Card order since 2026-09-05 (user call): title, then the illustration,
   then the body. The title starts under the watermark letter (76px box
   from y 6), hence the padding, so the two never overlap; on desktop the
   three cards share their rows, so titles and charts still line up. */
.ld-card-head { position: relative; padding-top: 58px; margin-bottom: 12px; }
/* The illustration paints above the watermark letter. */
.ld-card svg { position: relative; z-index: 1; width: calc(100% + 16px); height: auto; display: block; margin: 0 -8px 18px; align-self: end; }
/* Watermark letter, anchored to the card's top-left corner (user call
   2026-09-02; it used to sit behind the title). */
.ld-card-letter {
  position: absolute;
  top: 6px;
  left: 14px;
  z-index: 0;
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: 4.75rem;
  /* green-200, one step darker than the green-100 it launched with: on the
     green-50 card the lighter tint was hard to make out (user call
     2026-09-05). Same green as the chip and label borders. */
  color: #BBF7D0;
  line-height: 1;
  pointer-events: none;
}
.ld-card-title {
  position: relative;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  color: #1C1917;
}
.ld-card-body { font-size: 0.97rem; line-height: 1.55; color: #44403C; margin: 0; }

/* The simulator card styles live in sim-card.css (shared with
   /producteurs). */

/* ── Benefits ── */
/* Centered like the FAQ: the section's content column is narrower than
   the 80rem shell, so a left-anchored title read as misaligned next to
   the other sections (user call, 2026-09-01). */
#benefits .ld-h2 { text-align: center; }
.ld-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  max-width: 980px;
  margin: 0 auto;
  gap: 40px 48px;
}
.ld-benefit-title {
  font-weight: 700;
  font-size: 1.19rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1C1917;
}
.ld-benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #BBF7D0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ld-benefit-body { font-size: 0.97rem; line-height: 1.55; color: #44403C; margin: 0; }

/* ── Final CTA ── */
.ld-cta-final { background: #15803D; text-align: center; }
.ld-cta-final h2 {
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}
.ld-cta-final p { font-size: 1.125rem; color: #DCFCE7; margin: 0 0 36px; }
.ld-cta-final a {
  display: inline-block;
  background: #fff;
  color: #15803D;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 17px 36px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ld-cta-final a:hover { color: #166534; text-decoration: none; transform: scale(1.03); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }

/* ── Reduced motion: the decoration stops, the content stays ── */
@media (prefers-reduced-motion: reduce) {
  /* Quel que soit le mode choisi en admin, le rail redevient la rangée
     immobile du 2026-09-18: une liste qui revient à la ligne, avec les
     CINQ arguments lisibles. C'est la seule règle qui compte ici: calmer
     une animation ne doit jamais coûter un argument, et le mode B en cache
     quatre sur cinq par construction. */
  .ld-elig-rail { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .ld-elig-track { animation: none; display: block; width: auto; }
  .ld-elig-rail .ld-elig-set { display: flex; flex-wrap: wrap; padding-right: 0; }
  .ld-elig-rail .ld-elig-set + .ld-elig-set { display: none; }
  .ld-elig-rail .ld-elig-set > li { animation: none; opacity: 1; transform: none; }
  .ld-ticker-item { animation: none; }
  .ld-ticker-item + .ld-ticker-item { display: none; }
  .ld-ticker-item:first-child { opacity: 1; transform: none; }
  .ld-diagram-card svg *, .ld-card svg *, .ld-panel-wrap svg * { animation: none !important; }
}