/* ------------------------------------------------------------------
   landing.css — pages de présentation des modèles (/fr/…, /en/…)

   Une page par modèle, pour le médecin qui cherche « modèle 3D
   <pathologie> » : ce que le modèle montre, fonctionnalité par
   fonctionnalité, avec de vraies captures (tools/landing-shots.mjs).
   Tout le texte est dans le HTML : c'est lui que lisent les moteurs et
   les assistants. Pas de 3D au chargement : une vidéo en boucle, le
   modèle seulement au clic (« Manipuler en 3D »).

   LE DESSIN. Deux bandes sombres encadrent la page — le premier écran et
   l'appel final, dans le bleu profond du bandeau — et la vidéo du modèle
   est rendue sur ce même fond (vitrine ?bg=…) : elle s'y fond, sans
   cadre. Entre les deux, du blanc et un gris très clair en alternance,
   des cartes blanches qui flottent (ombres longues et douces, pas de
   bordures), une seule couleur d'action, l'orange. Titres serrés, grands
   interlignes, une frise pour « les trois temps ».

   S'appuie sur ui.css (couleurs, polices) et hub.css (bandeau, pied de
   page) ; à charger après eux.
------------------------------------------------------------------ */

.lp {
  --lp-dark-1: #082f38;                 /* bandes sombres : ombre… */
  --lp-dark-2: #0c414c;                 /* …et fond ; la vidéo est rendue sur celui-ci */
  --lp-on-dark: #f1f7f8;
  --lp-on-dark-2: rgba(241, 247, 248, .74);
  --lp-on-dark-3: rgba(241, 247, 248, .52);
  --lp-teal-soft: #7fd3df;              /* accents sur fond sombre */
  --lp-orange-soft: #f3a57a;
  --lp-alt: #f4f7f8;                    /* sections alternées */
  --lp-r: 18px; --lp-r-sm: 12px;
  --lp-shadow: 0 30px 60px -30px rgba(8, 47, 56, .35), 0 2px 6px rgba(8, 47, 56, .06);
  --lp-shadow-sm: 0 14px 30px -18px rgba(8, 47, 56, .30);
  background: var(--surface); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- typographie ---------- */
.lp h1 { margin: 0 0 20px; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.lp h2 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.022em; font-weight: 600; }
.lp h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; letter-spacing: -.012em; font-weight: 600; }
.lp-eyebrow {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.lp-intro { margin: 0 0 40px; max-width: 64ch; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
/* une source citée dans le texte (pages anglaises : chiffres et recommandations américains) */
.lp-intro a, .lp-trace-card p a { color: var(--accent); }
.lp p { text-wrap: pretty; }

/* ---------- boutons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font: inherit; font-size: 15.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.lp-btn:hover { border-color: var(--accent); color: var(--accent); }
.lp-btn:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn-primary {
  background: linear-gradient(180deg, #ea8a57, #dc6b31); border-color: transparent; color: #fff;
  box-shadow: 0 12px 26px -10px rgba(224, 116, 60, .65);
}
.lp-btn-primary:hover { color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(224, 116, 60, .75); }
.lp-btn-primary:active { transform: translateY(0); }

/* Bouton du bandeau (collant) : l'appel à l'action ne quitte jamais l'écran */
.lp-top-btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hub-on-top) 40%, transparent);
  color: var(--hub-on-top); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.lp-top-btn:hover { background: color-mix(in srgb, var(--hub-on-top) 14%, transparent); border-color: var(--hub-on-top); }
.lp-top-btn:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; }
/* le choix de la langue, à gauche du bouton : un menu « hub-menu » (comme
   « Contenus », core/css/hub.css) dont le titre n'est que le drapeau de la
   page — le même repère que le sélecteur de l'application ; ouvert, les
   liens vers la même page dans chaque langue. */
.lp-lang > summary { padding: 7px 8px 7px 10px; }
.lp-flag { font-size: 19px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.lp-lang-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 186px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow);
}
.lp-lang-panel a {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 11px; border-radius: 10px;
  color: var(--ink-2); font-size: 14.5px; text-decoration: none; white-space: nowrap;
}
.lp-lang-panel a:hover { background: var(--surface-2); color: var(--ink); }
.lp-lang-panel a:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }
.lp-lang-panel a[aria-current] { color: var(--ink); font-weight: 600; }
.lp-lang-check { margin-left: auto; display: grid; place-items: center; color: var(--accent); }
.lp-lang-check svg { width: 15px; height: 15px; }
@media (max-width: 620px) {
  .lp-lang-panel { top: 100%; right: 12px; margin-top: 6px; }   /* le menu devient « static » : ancré au bandeau */
}

/* ---------- fil d'Ariane ---------- */
.lp-crumbs { margin: 0; padding: 22px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--lp-on-dark-3); }
.lp-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.lp-crumbs a { color: var(--lp-on-dark-2); text-decoration: none; }
.lp-crumbs a:hover { color: var(--lp-on-dark); text-decoration: underline; }

/* ---------- premier écran : la bande sombre, la vidéo fondue dedans ---------- */
.lp-hero-band {
  position: relative; overflow: hidden; color: var(--lp-on-dark);
  background:
    radial-gradient(55% 70% at 6% 0%, rgba(18, 143, 160, .42), transparent 70%),
    radial-gradient(38% 50% at 28% 100%, rgba(224, 116, 60, .14), transparent 70%),
    var(--lp-dark-2);
  padding-bottom: 110px;                 /* la place des cartes de bénéfices, qui remontent dessus */
}
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 12fr); gap: 36px; align-items: center;
  padding: 36px 0 0;
}
.lp-hero-band .lp-eyebrow { color: var(--lp-orange-soft); }
.lp-hero h1 { color: #fff; }
.lp-lede { margin: 0 0 18px; font-size: 19px; line-height: 1.55; color: var(--lp-on-dark-2); max-width: 46ch; }
.lp-cred {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px; font-weight: 500; color: #dff1f4;
}
.lp-cred svg { width: 18px; height: 18px; color: var(--lp-teal-soft); flex: none; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-hero-band .lp-btn:not(.lp-btn-primary) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.lp-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--lp-on-dark-3); max-width: 48ch; }

/* La vitrine : une vidéo SANS FOND (vitrine ?bg=transparent), les os posés
   sur le dégradé de la bande — rien à faire correspondre, aucun cadre ; la
   3D au clic prend sa place, transparente elle aussi. */
.lp-stage { position: relative; margin: 0; aspect-ratio: 1200 / 820; }
.lp-stage > video, .lp-stage > img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain;
  background: transparent;
}
.lp-stage > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  background: transparent; color-scheme: normal;
}
.lp-stage-btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lp-stage-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lp-stage.is-live .lp-stage-btn { display: none; }
.lp-stage-cta { position: absolute; right: 16px; bottom: 16px; z-index: 2; min-height: 52px; padding: 0 26px; font-size: 16px; }
.lp-stage-cta[hidden] { display: none; }

/* Bénéfices : quatre cartes blanches qui flottent sur la limite de la bande */
.lp-benefits-wrap { position: relative; z-index: 2; margin-top: -78px; }
.lp-benefits {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.lp-benefits li {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px;
  border-radius: 16px; background: #fff; box-shadow: var(--lp-shadow);
}
.lp-benefits svg {
  width: 40px; height: 40px; padding: 9px; box-sizing: border-box; margin-bottom: 8px; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff);
}
.lp-benefits b { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.lp-benefits span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* les langues : quatre drapeaux nets, puis d'autres qui s'estompent — il y en
   aura d'autres, sans dire lesquelles */
.lp-flags { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 22px; line-height: 1; }
.lp-flags > span { letter-spacing: .12em; white-space: nowrap; }
.lp-flags-more {
  opacity: .75;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 95%);
}

/* ---------- sections ---------- */
.lp-section { padding: 88px 0; }
.lp-section.is-alt { background: var(--lp-alt); }
.lp-benefits-wrap + .lp-section { padding-top: 72px; }

/* En consultation, en trois temps : trois cartes, un pictogramme et son
   numéro, des chevrons entre les cartes */
.lp-steps { position: relative; margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.lp-steps li {
  position: relative; padding: 28px 26px 26px; border-radius: var(--lp-r);
  background: #fff; box-shadow: var(--lp-shadow-sm);
}
.lp-steps li:not(:last-child)::after {
  content: ""; position: absolute; right: -27px; top: 52px; width: 14px; height: 14px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); opacity: .45;
  transform: rotate(45deg);
}
.lp-tempo-ico {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 20px;
  color: var(--accent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, #fff), color-mix(in srgb, var(--accent) 6%, #fff));
}
.lp-tempo-ico svg { width: 32px; height: 32px; }
.lp-tempo-n {
  position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-2); color: #fff; font: 600 13px/1 "IBM Plex Sans", sans-serif; font-style: normal;
  box-shadow: 0 4px 10px -4px rgba(224, 116, 60, .7);
}
.lp-steps h3 { margin: 0 0 8px; font-size: 20px; }
.lp-steps p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- fonctionnalités ---------- */
.lp-feat {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center;
  padding: 44px 0;
}
.lp-feat.is-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.lp-feat.is-rev .lp-feat-txt { order: 2; }
.lp-feat.is-wide { grid-template-columns: 1fr; gap: 24px; }
.lp-feat.is-wide .lp-feat-txt { max-width: 70ch; }
.lp-feat p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.lp-feat ul { margin: 8px 0 0; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.lp-feat li { margin: 4px 0; }
.lp-feat li::marker { color: var(--brand-2); }

/* capture : coins arrondis, ombre longue, jamais de bordure */
.lp-shot { margin: 0; }
.lp-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--lp-shadow-sm); background: var(--stage-bg); }
.lp-shot figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--ink-2); }
.lp-shot figcaption b { color: var(--ink); font-weight: 600; }

/* Éventail : un détail du panneau agrandi, d'où partent des flèches vers
   les formes qu'il produit. Les flèches (SVG, viewBox 1000 × 120) partent
   sous chaque bouton — le panneau occupe --w de la largeur, centré — et
   arrivent au milieu des colonnes : 158, 500, 842 pour trois ; 320, 680
   pour deux (colonnes resserrées sur 70 % de la largeur). Les abscisses
   sont calculées à l'écriture de la page. */
.lp-fan { margin: 8px 0 0; }
.lp-fan-src {
  display: block; width: var(--w, 34%); height: auto; margin: 0 auto;
  border-radius: 14px; box-shadow: var(--lp-shadow); background: var(--surface);
}
.lp-fan-arrows { display: block; width: 100%; height: auto; overflow: visible; }
.lp-fan-arrows path { fill: none; stroke: var(--brand-2); stroke-width: 2.5; stroke-linecap: round; }
.lp-fan-arrows marker path { fill: var(--brand-2); stroke: none; }
.lp-fan-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6%; }
.lp-fan-out.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 70%; margin: 0 auto; gap: 3.7%; }

/* Carrousel vertical : onglets empilés à gauche (titre, repère, barre de
   progression du défilement automatique), panneau à droite, qui entre par
   le bas. */
.lp-vcar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; padding: 44px 0; }
.lp-feat .lp-vcar { padding: 20px 0 0; }
.lp-vcar-panel h4 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; letter-spacing: -.012em; font-weight: 600; }
.lp-vcar-tabs { display: flex; flex-direction: column; gap: 6px; }
.lp-vcar-tabs [role="tab"] {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px 18px; border-radius: 14px; border: 0; background: transparent;
  font: inherit; color: var(--ink-2);
  transition: background .2s ease, box-shadow .2s ease;
}
.lp-vcar-tabs [role="tab"] b { font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.lp-vcar-tabs [role="tab"] span { font-size: 13.5px; }
.lp-vcar-tabs [role="tab"]:hover { background: rgba(8, 47, 56, .04); }
.lp-vcar-tabs [role="tab"]:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.lp-vcar-tabs [aria-selected="true"] { background: #fff; box-shadow: var(--lp-shadow-sm), inset 4px 0 0 var(--accent); }
.lp-vcar-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--brand-2); }
.lp-vcar.is-ticking [aria-selected="true"] .lp-vcar-bar { animation: lp-tick var(--tick, 8s) linear forwards; }
@keyframes lp-tick { to { width: 100%; } }
.lp-vcar-panel { animation: lp-rise .45s ease; }
.lp-vcar-panel .lp-feat-txt { max-width: 70ch; margin-bottom: 4px; }
.lp-vcar-panel p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Lignes d'étapes : une ligne par traitement ; la bande des étapes défile
   seule, l'étape active est cerclée d'orange. */
.lp-srows { display: flex; flex-direction: column; gap: 20px; }
.lp-srow {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: center;
  padding: 24px; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm);
}
.lp-srow-head h4 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.lp-srow-head p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lp-srow-view { overflow: hidden; padding: 4px; margin: -4px; }
.lp-srow-track { display: flex; gap: 14px; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.lp-step { flex: 0 0 calc((100% - 28px) / 3); margin: 0; cursor: pointer; }
.lp-step img {
  display: block; width: 100%; height: auto; border-radius: 12px; background: var(--stage-bg);
  opacity: .55; transition: opacity .3s ease, box-shadow .3s ease;
}
.lp-step figcaption { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.lp-step figcaption span {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 600; background: var(--border); color: var(--ink-2);
}
.lp-step.is-on img { opacity: 1; box-shadow: 0 0 0 3px var(--brand-2), var(--lp-shadow-sm); }
.lp-step.is-on figcaption { color: var(--ink); font-weight: 600; }
.lp-step.is-on figcaption span { background: var(--brand-2); color: #fff; }

/* Téléphone : la vue patient, posée sur un panneau teal */
.lp-phone {
  margin: 0; padding: 40px 24px; border-radius: 24px;
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(224, 116, 60, .22), transparent 70%),
    linear-gradient(160deg, var(--lp-dark-2), #128fa0);
}
.lp-phone img {
  display: block; width: min(250px, 100%); height: auto; margin: 0 auto;
  border: 9px solid #12171a; border-radius: 36px; background: #12171a;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
}
.lp-phone figcaption { margin-top: 18px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); }
.lp-phone.is-plain { padding: 0; background: none; }
.lp-phone.is-plain figcaption { color: var(--ink-2); }

/* ---------- appel intermédiaire : une bande sombre, courte ---------- */
.lp-midcta { background: linear-gradient(100deg, var(--lp-dark-1), var(--lp-dark-2) 60%, #0f5a67); color: var(--lp-on-dark); }
.lp-midcta .lp-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 34px; padding-bottom: 34px; }
.lp-midcta p { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; color: var(--lp-on-dark-2); }
.lp-midcta .lp-btn-primary { flex: none; }

/* ---------- information tracée ---------- */
.lp-trace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp-trace-card { padding: 28px; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-trace-card h3 { margin: 14px 0 8px; font-size: 20px; }
.lp-trace-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lp-trace-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); }
.lp-trace-card + .lp-trace-card .lp-trace-ico { background: color-mix(in srgb, var(--brand-2) 14%, #fff); color: var(--brand-2); }
.lp-trace-ico svg { width: 24px; height: 24px; }
.lp-trace-facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 28px; }
.lp-trace-facts li { display: flex; flex-direction: column; gap: 4px; }
.lp-trace-facts svg { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 10px; margin-bottom: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.lp-trace-facts b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.lp-trace-facts span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lp-law {
  margin: 36px 0 16px; padding: 28px 32px; border-radius: var(--lp-r); color: var(--lp-on-dark);
  background: linear-gradient(120deg, var(--lp-dark-1), var(--lp-dark-2));
  box-shadow: inset 5px 0 0 var(--brand-2);
}
.lp-law blockquote { margin: 0; }
.lp-law blockquote p { margin: 0; font-size: 18px; line-height: 1.6; font-style: italic; color: #fff; text-wrap: pretty; }
.lp-law figcaption { margin-top: 12px; font-size: 14px; color: var(--lp-on-dark-2); }
.lp-law a { color: var(--lp-teal-soft); }
.lp-small { font-size: 14px !important; color: var(--ink-2) !important; }
.lp-small a { color: var(--accent); }

/* ---------- questions de confrères ---------- */
.lp-faq { max-width: 82ch; }
.lp-faq-item { border-top: 1px solid var(--border); }
.lp-faq-item:last-child { border-bottom: 1px solid var(--border); }
.lp-faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 44px 18px 0; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.lp-faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lp-faq-item summary:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.lp-faq-item p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- conception ---------- */
.lp-author { display: flex; gap: 16px; align-items: flex-start; max-width: 76ch; }
.lp-author p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lp-author a { color: var(--accent); }
.lp-refs { margin: 18px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 90ch; }
.lp-refs a { color: var(--accent); }

/* ---------- autres modèles ---------- */
.lp-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-model {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-model:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.lp-model:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.lp-model-vis { display: block; height: 160px; background: linear-gradient(162deg, var(--lp-alt), #fff); }
.lp-model-vis img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px 16px; box-sizing: border-box; transition: transform .25s ease; }
.lp-model:hover .lp-model-vis img { transform: scale(1.04); }
.lp-model-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.lp-model-region { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lp-model-body b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.lp-model-body > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lp-more-link { margin: 22px 0 0; font-size: 15.5px; font-weight: 600; }
.lp-more-link a { color: var(--accent); text-decoration: none; }
.lp-more-link a:hover { text-decoration: underline; }

/* ---------- appel final : la bande sombre, qui referme la page ---------- */
.lp-final-band {
  color: var(--lp-on-dark); text-align: center;
  background:
    radial-gradient(50% 70% at 90% 100%, rgba(224, 116, 60, .18), transparent 70%),
    radial-gradient(45% 60% at 5% 0%, rgba(18, 143, 160, .38), transparent 70%),
    var(--lp-dark-2);
}
.lp-final { padding: 88px 0; }
.lp-final h2 { margin: 0 0 12px; color: #fff; }
.lp-final p { margin: 0 0 28px; font-size: 18px; color: var(--lp-on-dark-2); }
.lp-final .lp-ctas { justify-content: center; }
.lp-final .lp-btn:not(.lp-btn-primary) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.lp-final .lp-btn:not(.lp-btn-primary):hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.lp-share { margin: 26px 0 0 !important; font-size: 14.5px !important; color: var(--lp-on-dark-2) !important; }
.lp-share a, .lp-linkbtn { color: var(--lp-teal-soft); }
.lp-linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.lp-linkbtn:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* ---------- pages de spécialité et de région (/fr/modeles-3d-…/) ----------
   Pas de vidéo en haut : une mosaïque des modèles (leurs vignettes
   card.webp, de vrais rendus). Puis une ligne par modèle — image, lésions,
   traitements, liens —, plus riche qu'une simple vignette : c'est le texte
   qui répond à « modèle 3D épaule ». */
.lp-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp-mosaic a {
  display: block; border-radius: var(--lp-r-sm); overflow: hidden; background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55); transition: transform .2s ease;
}
.lp-mosaic a:hover { transform: translateY(-3px); }
.lp-mosaic a:focus-visible { outline: 2.5px solid #fff; outline-offset: 3px; }
.lp-mosaic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; padding: 8px 10px; box-sizing: border-box; }
.lp-mosaic.is-1 { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; }

.lp-mrows { display: flex; flex-direction: column; gap: 22px; }
.lp-mrow {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 32px; align-items: center;
  padding: 26px; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm);
}
.lp-mrow-vis { display: block; border-radius: var(--lp-r-sm); background: linear-gradient(162deg, var(--lp-alt), #fff); }
.lp-mrow-vis img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; padding: 10px; box-sizing: border-box; }
.lp-mrow h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp-mrow > div > p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lp-mrow dl { margin: 0 0 18px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 15px; line-height: 1.55; }
.lp-mrow dt { font-weight: 600; color: var(--ink); }
.lp-mrow dd { margin: 0; color: var(--ink-2); }
.lp-mrow .lp-ctas .lp-btn { min-height: 42px; font-size: 14.5px; }
.lp-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: #fdf0e7; color: #9a4417;
}

/* une région, sur la page de spécialité : son texte, ses modèles, son lien */
.lp-region + .lp-region { margin-top: 64px; }
.lp-region .lp-intro { margin-bottom: 26px; }
.lp-region .lp-more-link { margin-top: 22px; }
.lp-region h3 a { color: var(--accent); text-decoration: none; }
.lp-region h3 a:hover { text-decoration: underline; }

/* ---------- les offres (page « Pour les médecins ») ----------
   Trois cartes aux mêmes lignes, comme la fenêtre des offres de
   l'application (core/js/plan.js) : ce qui manque à une offre se voit
   autant que ce qu'elle contient. Pas de prix avant leur annonce. */
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-plan { padding: 26px 24px; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-plan h3 { margin: 0 0 4px; }
.lp-plan > p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.lp-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.lp-plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink); }
.lp-plan li svg { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.lp-plan li.is-part svg { color: #b0682f; }
.lp-plan li.is-no { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 55%, transparent); }
.lp-plan li.is-no svg { color: var(--ink-3); }
/* texte pour les lecteurs d'écran seulement (« Non inclus : » devant une ligne barrée) */
.lp .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-plan-studio { margin: 22px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- pages « classification en 3D » (/en/classifications/…) ----------
   docs/seo-plan.md, étape 12 : des pages de référence, pas de maquette
   intégrée. Une vignette par grade (un vrai rendu, tools/classification-figures.mjs),
   les chiffres-clés, des tableaux sourcés, les infographies à télécharger,
   la citation prête à coller, un petit quiz. */
.cl-hero-fig { margin: 0; }
.cl-hero-fig img { display: block; width: 100%; height: auto; border-radius: var(--lp-r-sm); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); background: #fff; }
.cl-hero-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--lp-on-dark-3); }
.cl-hero-fig figcaption a { color: var(--lp-teal-soft); }

.cl-facts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cl-facts li { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 16px; background: #fff; box-shadow: var(--lp-shadow); }
.cl-facts b { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--accent); }
.cl-facts span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.cl-grades { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.cl-grade {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: center;
  padding: 22px; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm);
}
.cl-grade img { display: block; width: 100%; height: auto; border-radius: var(--lp-r-sm); background: var(--lp-alt); }
.cl-grade h3 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cl-grade h3 .cl-n { font-size: 34px; line-height: 1; color: var(--accent); }
.cl-sev { display: flex; gap: 4px; max-width: 220px; margin: 0 0 14px; }
.cl-sev i { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.cl-sev i.on { background: var(--brand-2); }
.cl-grade dl { margin: 0 0 14px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 15.5px; line-height: 1.55; }
.cl-grade dt { font-weight: 600; color: var(--ink); }
.cl-grade dd { margin: 0; color: var(--ink-2); }
.cl-3d { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cl-3d:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-3d svg { width: 18px; height: 18px; }

/* un texte de lecture : 72 caractères par ligne, mais aligné sur les autres sections */
.cl-prose > * { max-width: 72ch; }
.cl-prose p:not(.lp-eyebrow), .cl-prose li { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.cl-prose p:not(.lp-eyebrow) { margin: 0 0 14px; }
.cl-prose ul { margin: 0 0 16px; padding-left: 20px; }
.cl-prose li { margin: 6px 0; }
.cl-prose li::marker { color: var(--brand-2); }
.cl-prose b { color: var(--ink); font-weight: 600; }
.cl-prose a, .cl-table a { color: var(--accent); }
.cl-prose h3 { margin: 30px 0 10px; }

.cl-table-wrap { overflow-x: auto; margin: 8px 0 18px; border-radius: var(--lp-r-sm); box-shadow: var(--lp-shadow-sm); background: #fff; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cl-table caption { caption-side: bottom; padding: 10px 14px 12px; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.cl-table th, .cl-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.cl-table thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: var(--lp-alt); }
.cl-table tbody th { font-weight: 600; color: var(--ink); }
.cl-table td { color: var(--ink-2); }
.cl-table td.cl-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }

.cl-dls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cl-dl { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm); }
.cl-dl-vis { display: flex; align-items: center; justify-content: center; height: 210px; padding: 16px; background: var(--lp-alt); }
.cl-dl-vis img { display: block; max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 22px -12px rgba(8, 47, 56, .45); }
.cl-dl-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; flex: 1; }
.cl-dl-body b { font-size: 16.5px; font-weight: 600; }
.cl-dl-body span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cl-dl-body .lp-btn { margin-top: auto; align-self: flex-start; min-height: 42px; font-size: 14.5px; }

.cl-cite { margin-top: 28px; padding: 26px 28px; border-radius: var(--lp-r); background: #fff; box-shadow: var(--lp-shadow-sm); }
.cl-cite h3 { margin: 0 0 6px; }
.cl-cite > p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.cl-cite-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.cl-cite-row > b { font-size: 14px; color: var(--ink); }
.cl-cite-row code { display: block; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.cl-cite-row .lp-btn { min-height: 38px; padding: 0 16px; font-size: 14px; }

.cl-quiz { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.cl-quiz img { display: block; width: 100%; height: auto; border-radius: var(--lp-r-sm); box-shadow: var(--lp-shadow-sm); background: var(--lp-alt); }
.cl-quiz-q { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.cl-quiz-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cl-quiz-opts button { min-width: 64px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1; color: var(--ink); cursor: pointer; }
.cl-quiz-opts button:hover { border-color: var(--accent); color: var(--accent); }
.cl-quiz-opts button:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.cl-quiz-opts button.is-right { background: var(--accent); border-color: var(--accent); color: #fff; }
.cl-quiz-opts button.is-wrong { border-color: var(--brand-2); color: var(--brand-2); }
.cl-quiz-fb { min-height: 3.2em; margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.cl-quiz-meta { font-size: 13.5px; color: var(--ink-2); }
/* quiz sur cas cliniques (classification clinique, McGowan) : le cas à la place de l'image */
.cl-case { margin: 0; padding: 26px 28px; border-radius: var(--lp-r-sm); background: #fff; box-shadow: var(--lp-shadow-sm);
  border-left: 4px solid var(--accent); font-size: 18px; line-height: 1.6; color: var(--ink); min-height: 9em; }

/* ---------- petits écrans ---------- */
@media (max-width: 900px) {
  .lp-plans { grid-template-columns: 1fr; }
  .lp-plan > p { min-height: 0; }
  .lp-mrow { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .lp-mosaic.is-1 { margin: 0; }
  .lp-section { padding: 60px 0; }
  .lp-hero { grid-template-columns: 1fr; gap: 12px; padding-top: 28px; }
  .lp-hero-band { padding-bottom: 60px; }
  .lp-benefits-wrap { margin-top: -36px; }
  .lp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: 1fr; gap: 20px; }
  .lp-steps li:not(:last-child)::after { display: none; }
  .lp-feat, .lp-feat.is-rev, .lp-vcar, .lp-srow { grid-template-columns: 1fr; gap: 22px; }
  .lp-feat.is-rev .lp-feat-txt { order: 0; }
  .lp-vcar-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .lp-vcar-tabs [role="tab"] { flex: 0 0 43%; scroll-snap-align: start; }
  .lp-vcar-tabs [aria-selected="true"] { box-shadow: var(--lp-shadow-sm), inset 0 -4px 0 var(--accent); }
  .lp-step { flex-basis: calc((100% - 14px) / 2); }
  .lp-midcta .lp-wrap { flex-direction: column; align-items: flex-start; }
  .lp-trace-grid, .lp-models { grid-template-columns: 1fr; }
  .lp-trace-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-final { padding: 64px 0; }
  .cl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-grade, .cl-quiz { grid-template-columns: 1fr; gap: 18px; }
  .cl-dls { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lp-fan-src { width: 78%; }
  .lp-fan-arrows { display: none; }
  .lp-fan-out, .lp-fan-out.is-2 { margin-top: 18px; grid-template-columns: 1fr; gap: 14px; width: 100%; }
}
@media (max-width: 560px) {
  .lp .hub-brand-txt { display: none; }     /* le bandeau des pages : logo, « Contenus », langue, bouton */
  .lp-wrap { padding: 0 18px; }
  .lp-mrow dl { grid-template-columns: 1fr; gap: 2px; }
  .lp-mrow dd + dt { margin-top: 8px; }
  .lp-benefits { grid-template-columns: 1fr; }
  .lp-trace-facts { grid-template-columns: 1fr; }
  .lp-top-btn { padding: 0 12px; font-size: 13px; }
  .lp-stage-cta { right: 10px; bottom: 10px; }
  .lp-law { padding: 22px 20px; }
  .cl-facts { grid-template-columns: 1fr; }
  .cl-grade { padding: 16px; }
  .cl-grade dl { grid-template-columns: 1fr; gap: 2px; }
  .cl-grade dd + dt { margin-top: 8px; }
  .cl-cite { padding: 20px 18px; }
  .cl-cite-row { grid-template-columns: 1fr; gap: 8px; }
  .cl-cite-row .lp-btn { justify-self: start; }
}