/* ==========================================================================
   Bien Connu — site public : accueil, présentation, tarifs, questions, contact,
   pages juridiques. S'appuie sur les variables et composants de brand.css.
   Ici, le panneau s'exprime en grand (charte : « la communication de la marque ») :
   de vraies photos de biens, le panneau planté devant, peu de mots.
   ========================================================================== */

.lp { --wrap: 1240px; --bw: 3px; --paper2: #EAE4D9; --ink-soft: #D9D3C6; --ink-line: #34322E; }
.lp-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.lp section[id] { scroll-margin-top: calc(var(--header-h) + 64px); }
html { scroll-behavior: smooth; }
.lp { font-size: 1.1875rem; }
.lp img { display: block; max-width: 100%; height: auto; }

/* Titres et rythme ------------------------------------------------------------ */
.lp-title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: .91; letter-spacing: -.005em; text-wrap: balance;
  font-size: clamp(2.75rem, 6.2vw, 5rem);
}
.lp-h2 { font-size: clamp(1.875rem, 3.5vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.lp-lead { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.38; max-width: 40ch; }
.lp-section { padding-block: clamp(56px, 7.5vw, 104px); }
.lp-section--tight { padding-block: clamp(44px, 6vw, 80px); }
.lp-section--paper2 { background: var(--paper2); }
.lp-head { display: grid; gap: var(--space-3); margin-bottom: clamp(28px, 4vw, 48px); max-width: 860px; }
.lp-head > p { font-size: 1.125rem; color: var(--muted); max-width: 46ch; }
.lp-head--row { max-width: none; }
@media (min-width: 960px) {
  .lp-head--row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: var(--space-7); }
  .lp-head--row > p { justify-self: end; }
}
.lp-more { margin-top: clamp(24px, 3vw, 40px); }
.lp-more .link, .lp-on-ink-link, .lp-split__copy > .link { display: inline-flex; align-items: center; gap: 8px; }
.lp-on-ink-link { color: var(--paper); }
.lp-small { font-size: 1rem; color: var(--muted); margin-top: var(--space-4); }
.lp-accent { color: var(--orange); }
.lp-title .lp-accent { display: inline; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn--ink:hover { --btn-bg: #2A2A2A; }
.lp .btn--primary { min-height: 56px; padding-inline: 26px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; text-transform: uppercase; letter-spacing: .015em; }
.lp .btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.lp .btn--primary:active { transform: translate(2px, 2px); box-shadow: none; }
.lp .btn--primary .icon { width: 22px; height: 22px; }

/* Bloc noir ------------------------------------------------------------------- */
.lp-ink { background: var(--ink); color: var(--paper); }
.lp-ink .lp-head > p { color: var(--ink-soft); }
.lp-ink :focus-visible { outline-color: var(--orange); }

/* En-tête --------------------------------------------------------------------- */
.lp-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: var(--bw-thin) solid transparent; transition: border-color var(--t-med) var(--ease); }
.lp-header.is-stuck { border-color: var(--ink); }
.lp-header__in { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.lp-header__logo { display: inline-flex; flex: none; }
.lp-nav { display: none; gap: var(--space-5); margin-left: var(--space-4); }
.lp-nav a { font-weight: 600; text-decoration: none; padding-block: 8px; border-bottom: 2px solid transparent; transition: border-color var(--t-fast); }
.lp-nav a:hover { border-color: var(--ink); }
.lp-nav a[aria-current="page"] { border-color: var(--orange); }
.lp-header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.lp-header__cta .link { font-weight: 600; text-decoration: none; display: none; }
.lp-header__cta .btn { white-space: nowrap; min-height: 50px; padding-inline: 18px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
@media (min-width: 1280px) { .lp-nav { display: flex; } .lp-header__cta .link { display: inline; } }
/* Petit écran : le menu garde l'accès à l'essai. */
@media (max-width: 519px) { .lp-header__cta { display: none; } }

/* Menu téléphone -------------------------------------------------------------- */
.lp-menu { margin-left: var(--space-2); }
.lp-menu__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: var(--bw-thin) solid var(--ink); background: var(--paper); font-weight: 800; font-size: .9375rem; user-select: none; }
.lp-menu__btn::-webkit-details-marker { display: none; }
.lp-menu__bars, .lp-menu__bars::before, .lp-menu__bars::after { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform var(--t-med) var(--ease), background-color var(--t-fast); }
.lp-menu__bars { position: relative; }
.lp-menu__bars::before, .lp-menu__bars::after { content: ""; position: absolute; left: 0; }
.lp-menu__bars::before { top: -6px; }
.lp-menu__bars::after { top: 6px; }
.lp-menu[open] .lp-menu__bars { background: transparent; }
.lp-menu[open] .lp-menu__bars::before { transform: translateY(6px) rotate(45deg); }
.lp-menu[open] .lp-menu__bars::after { transform: translateY(-6px) rotate(-45deg); }
.lp-menu__panel { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 29; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--space-6); padding: var(--space-5) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--bw-thin) solid var(--ink); }
/* Menu fermé : le panneau ne doit exister nulle part (sinon le navigateur mobile élargit la page pour lui). */
.lp-menu:not([open]) .lp-menu__panel { display: none; }
.lp-menu[open] .lp-menu__panel { animation: lp-fade var(--t-med) var(--ease); }
.lp-menu__nav { display: grid; }
.lp-menu__nav a { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.1; text-decoration: none; padding: 10px 0; border-bottom: var(--bw-thin) solid var(--line); }
.lp-menu__nav a[aria-current="page"] { color: var(--orange); }
.lp-menu__actions { display: grid; gap: var(--space-3); }
.menu-open { overflow: hidden; }
@media (min-width: 1280px) { .lp-menu { display: none; } }
@media (max-width: 519px) { .lp-menu { margin-left: auto; } }
@media (max-width: 380px) { .lp-menu__label { display: none; } .lp-header__in { gap: var(--space-3); } }

/* Le formulaire d'essai : le lien d'une annonce ------------------------------------ */
.lp-try { display: grid; gap: var(--space-2); width: 100%; max-width: 620px; }
.lp-try__label { font-weight: 800; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.15; }
.lp-try__how { color: var(--muted); max-width: 52ch; margin-bottom: 4px; }
.lp-try--dark .lp-try__how { color: var(--ink); }
.lp-try__row { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-try__input { min-width: 0; min-height: 68px; padding: 16px 18px; border: 0; background: transparent; font: inherit; font-size: 1.125rem; color: var(--ink); }
.lp-try__input::placeholder { color: #7B766C; }
.lp-try__input:focus { outline: 3px solid var(--orange); outline-offset: -3px; }
.lp-try__btn { min-height: 68px; border: 0; border-top: var(--bw) solid var(--ink); justify-content: center; }
.lp-try__hint { font-size: 1rem; color: var(--muted); }
.lp-try__alt { font-size: .95rem; color: var(--muted); }
.lp-try__alt a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lp-try--dark .lp-try__hint, .lp-try--dark .lp-try__alt { color: var(--ink); }
/* Message d'erreur du champ d'essai (annonce illisible) : même rendu que dans l'application. */
.field__error { display: flex; gap: 6px; align-items: flex-start; margin-top: .5rem; font-size: .9375rem; font-weight: 700; color: var(--err); }
.field__error .icon { margin-top: 2px; }
.lp-try--dark .lp-try__btn { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.lp-try--dark .lp-try__btn:hover { --btn-bg: #2A2A2A; }
.lp-try.is-busy .lp-try__btn { pointer-events: none; opacity: .85; }
@media (min-width: 640px) {
  .lp-try__row { grid-template-columns: 1fr auto; }
  .lp-try__btn { border-top: 0; border-left: var(--bw) solid var(--ink); }
}

/* Accueil : la promesse ------------------------------------------------------------- */
.lp-hero { padding-block: clamp(60px, 9vh, 108px) clamp(84px, 13.5vh, 168px); overflow: hidden; }
.lp-hero__grid { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
.lp-hero__copy { display: grid; gap: clamp(14px, 2.4vh, 24px); justify-items: start; }
.lp-hero__intro { display: flex; align-items: center; gap: 16px; }
.lp-hero__intro > img { width: clamp(50px, 6vw, 76px); height: auto; flex: none; }
.lp-hero__intro .sticker { text-wrap: balance; }
/* Le titre suit aussi la hauteur de l'écran : le haut de page tient dans un écran de portable (768 px). */
.lp-hero__title { font-size: clamp(3.2rem, min(6.7vw, 10vh), 6.5rem); }
.lp-hero__title > span { display: block; }
.lp-hero__title > span:last-child { color: var(--orange); }
@media (max-width: 519px) { .lp-hero { padding-top: 36px; } .lp-hero__intro { gap: 10px; } .lp-hero__intro > img { width: 48px; } }
@media (max-width: 380px) { .lp .lp-try__btn { font-size: 1.1875rem; } }
@media (min-width: 1000px) { .lp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Un bien et sa publication : la photo derrière, un vrai téléphone devant (proportions d'un iPhone).
   Le téléphone est un conteneur : son contenu suit sa largeur (unités cqi), comme sur un vrai écran. */
.lp-scene { position: relative; }
.lp-scene__note { position: relative; z-index: 3; width: fit-content; max-width: 100%; margin: 14px 0 0 auto; padding: 5px 9px; border: var(--bw-thin) solid var(--ink); background: var(--paper); font-size: .75rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .025em; }
.lp-scene__photo { position: absolute; right: 0; top: 9%; width: 78%; height: 82%; object-fit: cover; object-position: 62% center; border: var(--bw) solid var(--ink); }
.lp-scene__device { position: relative; z-index: 1; width: clamp(200px, min(44%, calc((100svh - 190px) / 2.2)), 290px); container-type: inline-size; }
.lp-scene .lp-device { max-width: none; font-size: 3.76cqi; padding: 3cqi; border-radius: 14.5cqi; }
.lp-scene .lp-device__screen { border-radius: 11.6cqi; }
.lp-scene__notif { position: absolute; z-index: 2; top: 13%; left: 8%; width: max(112%, 300px); }
@media (max-width: 639px) {
  .lp-scene__photo { top: 12%; width: 100%; height: 70%; }
  .lp-scene__device { width: min(62%, 260px); margin-left: 4%; }
  .lp-scene__notif { left: 6%; width: 136%; max-width: calc(100vw - 2 * var(--gutter) - 8px); font-size: 13px; }
}

/* Bandeau des réseaux ---------------------------------------------------------------- */
.lp-networks { background: var(--white); border-block: var(--bw) solid var(--ink); }
.lp-networks__in { display: grid; gap: 20px 48px; justify-items: center; padding-block: clamp(24px, 3.5vw, 36px); }
.lp-networks__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1; white-space: nowrap; }
.lp-networks__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; }
.lp-networks__list li { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.125rem; }
@media (min-width: 1100px) {
  .lp-networks__in { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; }
  .lp-networks__list { justify-content: space-between; }
}
/* Les vrais logos des réseaux, en couleur. */
.brand-logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #FFF; }
.brand-logo .icon { width: 24px; height: 24px; }
.brand-logo--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.brand-logo--facebook { background: #0866FF; border-radius: 50%; }
.brand-logo--linkedin { background: #0A66C2; border-radius: 9px; font: 700 23px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: -.03em; }
.brand-logo--tiktok { background: #000; }
.brand-logo--tiktok .icon { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
.brand-logo--google { background: #FFF; border: 1.5px solid #DADCE0; border-radius: 50%; }

/* Affiche de marque : le mégaphone fait le lien entre la promesse et le service. */
.lp-broadcast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); background: var(--ink); color: var(--paper); }
.lp-broadcast__symbol { display: grid; place-items: center; min-height: clamp(260px, 30vw, 430px); padding: 36px; background: var(--orange); }
.lp-broadcast__symbol img { width: min(68%, 280px); height: auto; }
.lp-broadcast__copy { display: grid; align-items: center; padding: clamp(36px, 6vw, 84px); }
.lp-broadcast__copy-inner { display: grid; gap: clamp(16px, 2.5vw, 26px); max-width: 820px; }
.lp-broadcast .lp-title { font-size: clamp(3rem, 6.3vw, 6.25rem); }
.lp-broadcast .lp-title span { color: var(--orange); }
.lp-broadcast p { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 699px) {
  .lp-broadcast { grid-template-columns: 1fr; }
  .lp-broadcast__symbol { min-height: 156px; padding: 20px; }
  .lp-broadcast__symbol img { width: 145px; }
  .lp-broadcast__copy { padding: 34px 22px 42px; }
  .lp-broadcast .lp-title { font-size: clamp(2.75rem, 10vw, 4rem); }
  .lp-broadcast p { font-size: 1rem; }
}

/* Trois gestes ---------------------------------------------------------------------- */
.lp-steps { display: grid; gap: var(--space-5); }
.lp-step { display: grid; gap: var(--space-3); align-content: start; }
.lp-step h3 { display: flex; align-items: center; gap: 14px; font-size: 1.375rem; font-weight: 800; line-height: 1.15; margin-top: var(--space-2); }
.lp-step > p { color: var(--muted); }
.lp-step__n { flex: none; font-family: var(--font-display); font-weight: 400; color: var(--orange); font-size: clamp(3.5rem, 5vw, 4.75rem); line-height: .82; }
.lp-step__ui { display: grid; gap: var(--space-3); align-content: center; min-height: 290px; padding: var(--space-5); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-step__ui--ink { background: var(--ink); color: var(--paper); }
@media (min-width: 900px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .lp-step__ui { min-height: 0; } }

.lp-field-mock { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: var(--bw-thin) solid var(--ink); font-size: .875rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-field-mock .icon { flex: none; color: var(--ink); }
.lp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lp-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chips span { padding: 4px 10px; border: var(--bw-thin) solid var(--ink); font-weight: 800; font-size: .875rem; background: var(--paper); }
.lp-chips--actions .is-main { background: var(--orange); }
.lp-mini-post { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.lp-mini-post img { width: 96px; aspect-ratio: 1; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-mini-post p { font-size: .9375rem; line-height: 1.4; }
.lp-notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #1E1D1B; border: var(--bw-thin) solid var(--ink-line); font-size: .9375rem; }
.lp-notif .icon { flex: none; margin-top: 2px; color: var(--orange); }
.lp-notif strong { display: block; font-size: .8125rem; color: var(--ink-soft); }
.lp-step__ui--ink .lp-notif + .lp-notif { margin-top: -4px; }

/* Publications d'exemple ------------------------------------------------------------- */
.lp-posts { display: grid; gap: var(--space-5); align-items: stretch; justify-items: center; }
@media (min-width: 900px) { .lp-posts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) {
  /* Défilement horizontal. « position: relative » y garde les textes pour lecteurs d'écran (sr-only, en absolu) :
     sans lui, ils s'en échappent et le navigateur mobile élargit toute la page. */
  .lp-posts { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .lp-posts > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
}
/* Deux colonnes : texte + visuel ------------------------------------------------------ */
.lp-split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-split__copy { display: grid; gap: var(--space-4); justify-items: start; }
.lp-split__copy > p { color: var(--muted); font-size: 1.125rem; max-width: 46ch; }
.lp-split__visual { position: relative; min-width: 0; }
@media (min-width: 960px) {
  .lp-split { grid-template-columns: 1fr 1fr; }
  .lp-split--flip .lp-split__copy { order: 2; }
}
.lp-num { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 5rem); line-height: .8; color: var(--orange); }
.lp-checks { display: grid; gap: 10px; }
.lp-checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.lp-checks .icon { flex: none; margin-top: 2px; color: var(--ok); }
.lp-under { margin-top: var(--space-3); }

/* Photo + carte posée dessus */
.lp-framed { padding-bottom: 48px; }
.lp-framed > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--bw) solid var(--ink); }
.lp-framed__card { position: absolute; right: 0; bottom: 0; width: min(88%, 380px); }
@media (min-width: 960px) { .lp-framed__card { right: -24px; } }
@media (max-width: 959px) {
  .lp-framed { padding-bottom: 0; }
  .lp-framed__card { position: relative; width: auto; margin: -56px 0 0 clamp(16px, 8vw, 64px); }
}

/* Éléments d'interface dessinés --------------------------------------------------------- */
.mock__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mock__btn { font-weight: 800; font-size: .875rem; padding: 9px 14px; border: var(--bw-thin) solid var(--ink); background: var(--paper); color: var(--ink); }
.mock__btn--main { background: var(--orange); }
.lp-card { background: var(--white); border: var(--bw) solid var(--ink); display: grid; }
.lp-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--bw) solid var(--ink); }
.lp-card__body { display: grid; gap: var(--space-4); padding: clamp(18px, 3vw, 28px); }
.lp-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; }
.lp-facts { display: grid; border: var(--bw-thin) solid var(--ink); }
.lp-facts > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--space-3); padding: 9px 12px; }
.lp-facts > div + div { border-top: var(--bw-thin) solid var(--line); }
.lp-facts dt { color: var(--muted); font-weight: 600; }
.lp-facts dd { margin: 0; font-weight: 800; }

.lp-rows { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; flex-wrap: wrap; }
.lp-rows li + li { border-top: var(--bw-thin) solid var(--line); }
.lp-rows__name { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; }
.lp-rows--photos img { width: 64px; height: 48px; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: var(--bw-thin) solid var(--ok); color: var(--ok); background: var(--ok-bg); font-weight: 700; font-size: .875rem; }

.lp-suggest { display: grid; gap: var(--space-3); padding: clamp(20px, 3vw, 32px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-suggest__kicker { font-weight: 800; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lp-suggest__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1; }
.lp-suggest__text { color: var(--muted); }

.lp-estim { display: grid; gap: var(--space-3); padding: clamp(18px, 2.6vw, 24px); background: var(--white); border: var(--bw) solid var(--ink); justify-items: start; }
.lp-estim__who { display: flex; align-items: center; gap: 10px; font-weight: 800; line-height: 1.2; }
.lp-estim__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: var(--bw-thin) solid var(--ink); }
.lp-estim__who small { display: block; font-weight: 500; color: var(--muted); font-size: .875rem; }
.lp-estim__title { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 800; line-height: 1.1; }
.lp-estim__text { color: var(--muted); font-size: .9375rem; }

.lp-weeks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.lp-weeks li { position: relative; display: grid; align-content: end; gap: 2px; min-height: 160px; padding: 14px; border: var(--bw) solid var(--ink); color: var(--paper); overflow: hidden; background: var(--ink); }
.lp-weeks img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.lp-weeks span, .lp-weeks strong { position: relative; }
.lp-weeks span { font-weight: 700; font-size: .875rem; }
.lp-weeks strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; }
.lp-weeks__price { background: var(--orange) !important; color: var(--ink) !important; }

.lp-figures { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--bw) solid var(--ink); background: var(--white); }
.lp-figures p { display: grid; gap: 2px; padding: clamp(14px, 2.4vw, 24px); }
.lp-figures p + p { border-left: var(--bw-thin) solid var(--line); }
.lp-figures strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; }
.lp-figures span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.lp-figures__note { margin-top: var(--space-3); font-weight: 600; }

.lp-soon { display: grid; gap: var(--space-4); padding: clamp(24px, 4vw, 40px); border: var(--bw) dashed var(--ink); align-items: center; justify-items: start; }
.lp-soon p { color: var(--muted); max-width: 52ch; margin-top: var(--space-2); }
@media (min-width: 900px) { .lp-soon { grid-template-columns: auto 1fr auto; gap: var(--space-6); } }

/* Réponses courtes ------------------------------------------------------------------- */
.lp-answers { display: grid; gap: var(--space-4); }
.lp-answers article { display: grid; gap: var(--space-2); align-content: start; padding: clamp(20px, 3vw, 28px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-answers h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.lp-answers p { color: var(--muted); }
@media (min-width: 900px) { .lp-answers { grid-template-columns: repeat(3, 1fr); } }

/* Engagements (sur fond noir) ------------------------------------------------------------- */
.lp-promises { display: grid; gap: 0; border-top: var(--bw) solid var(--paper); }
.lp-promises li { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-4); padding: var(--space-5) 0; border-bottom: var(--bw-thin) solid var(--ink-line); }
.lp-promises .icon { grid-row: span 2; color: var(--orange); margin-top: 2px; }
.lp-promises h3 { font-size: 1.25rem; font-weight: 800; }
.lp-promises p { color: var(--ink-soft); }
@media (min-width: 800px) { .lp-promises { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

/* Le prix en une ligne ------------------------------------------------------------------- */
.lp-band { border-block: var(--bw) solid var(--ink); background: var(--white); }
.lp-band__in { display: grid; gap: var(--space-3) var(--space-6); padding-block: clamp(28px, 4vw, 44px); align-items: center; justify-items: start; }
.lp-band__price { font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 700; }
.lp-band__price strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; margin: 0 4px; }
.lp-band__text { color: var(--muted); max-width: 52ch; }
@media (min-width: 960px) { .lp-band__in { grid-template-columns: auto 1fr auto; } }

/* Appel final : une affiche noire et un panneau d'essai orange. */
.lp-final { background: var(--ink); color: var(--paper); border-top: 6px solid var(--orange); }
.lp-final__in { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; padding-block: clamp(64px, 8vw, 116px); }
.lp-final__copy { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: start; }
.lp-final__symbol { width: clamp(72px, 8vw, 112px); height: auto; }
.lp-final .lp-title { font-size: clamp(3.25rem, 7vw, 6.5rem); max-width: 12ch; color: var(--paper); }
.lp-final .lp-title span { color: var(--orange); }
.lp-final__copy > p { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.4; max-width: 34ch; color: var(--ink-soft); }
.lp-final__panel { display: grid; gap: var(--space-5); padding: clamp(22px, 3vw, 40px); background: var(--orange); color: var(--ink); border: var(--bw) solid var(--paper); }
.lp-final__panel-title { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; text-transform: uppercase; max-width: 15ch; }
.lp-final .lp-try { max-width: none; }
.lp-final .lp-try__row { grid-template-columns: 1fr; border-color: var(--ink); }
.lp-final .lp-try__btn { border-top: var(--bw) solid var(--ink); border-left: 0; }
.lp-final__contact { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 1rem; font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 960px) { .lp-final__in { grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); } }
@media (max-width: 380px) { .lp-final .lp-try__btn { font-size: 1rem; gap: 6px; padding-inline: 10px; } }

/* En-tête des pages ------------------------------------------------------------------------ */
.lp-pagehead { padding-block: clamp(36px, 6vw, 80px); border-bottom: var(--bw) solid var(--ink); }
.lp-pagehead__in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.lp-pagehead__copy { display: grid; gap: var(--space-5); justify-items: start; }
.lp-pagehead__mark { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 16px; background: var(--orange); }
.lp-pagehead__mark img { width: 70%; height: auto; }
.lp-pagehead__title { font-size: clamp(3rem, 7.3vw, 6rem); max-width: 15ch; }
.lp-pagehead .lp-lead { max-width: 46ch; }
@media (min-width: 1100px) {
  .lp-pagehead:not(.lp-pagehead--scene) { position: relative; }
  .lp-pagehead:not(.lp-pagehead--scene)::after {
    content: ""; position: absolute; top: 22px; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
    width: 76px; height: 76px; border-radius: 16px;
    background: var(--orange) url('../assets/logo/bien-connu-symbole-clair.png') center / 70% auto no-repeat;
  }
}
@media (min-width: 960px) {
  .lp-pagehead--scene .lp-pagehead__in { grid-template-columns: 1.05fr .95fr; }
  .lp-pagehead--scene .lp-pagehead__mark { margin-bottom: var(--space-2); }
  /* Sans photo : le titre et son texte côte à côte, sans grand vide à droite. */
  .lp-pagehead:not(.lp-pagehead--scene) .lp-pagehead__copy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-8); }
  .lp-pagehead:not(.lp-pagehead--scene) .lp-pagehead__title { max-width: none; }
}


/* Navigation dans la page -------------------------------------------------------------------- */
.lp-jump { position: sticky; top: var(--header-h); z-index: 20; background: var(--paper); border-bottom: var(--bw-thin) solid var(--ink); }
.lp-jump__in { display: flex; gap: 4px 24px; overflow-x: auto; scrollbar-width: none; }
.lp-jump__in::-webkit-scrollbar { display: none; }
.lp-jump a { flex: none; padding: 14px 0; font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.lp-jump a:hover { border-color: var(--orange); }

/* Ensuite, sans vous ----------------------------------------------------------------------- */
.lp-timeline { display: grid; border-top: var(--bw) solid var(--paper); }
.lp-timeline li { display: grid; gap: 4px var(--space-6); padding: var(--space-4) 0; border-bottom: var(--bw-thin) solid var(--ink-line); }
.lp-timeline__when { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1; color: var(--ink); }
.lp-timeline p:not(.lp-timeline__when) { color: var(--ink-soft); font-size: 1.0625rem; }
@media (min-width: 800px) { .lp-timeline li { grid-template-columns: 320px 1fr; align-items: baseline; } }

.lp-nomore { display: grid; border-top: var(--bw) solid var(--ink); }
.lp-nomore li { padding: 14px 0; border-bottom: var(--bw-thin) solid var(--ink); font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.05; }
.lp-nomore s { text-decoration-color: var(--orange); text-decoration-thickness: .14em; }
@media (min-width: 900px) { .lp-nomore { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

/* Exemples ------------------------------------------------------------------------------------ */
.lp-samples { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lp-sample { display: grid; align-content: start; background: var(--white); border: var(--bw) solid var(--ink); }
.lp-sample img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--bw) solid var(--ink); }
.lp-sample__tag { padding: 12px 16px 0; font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lp-sample__text { padding: 6px 16px 16px; font-size: 1rem; line-height: 1.5; }
.lp-sample--price { background: var(--orange); }
.lp-sample--price .lp-sample__tag { color: var(--ink); }
.lp-sample__big { aspect-ratio: 4 / 3; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.25rem); border-bottom: var(--bw) solid var(--ink); background: var(--ink); color: var(--orange); }

.lp-tones { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-tone { display: grid; gap: var(--space-3); align-content: start; padding: clamp(20px, 3vw, 32px); }
.lp-tone + .lp-tone { border-top: var(--bw-thin) solid var(--ink); }
.lp-tone__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.75rem; line-height: 1; color: var(--orange); }
.lp-tone__text { font-size: 1.0625rem; }
@media (min-width: 900px) { .lp-tones { grid-template-columns: repeat(3, 1fr); } .lp-tone + .lp-tone { border-top: 0; border-left: var(--bw-thin) solid var(--ink); } }

.lp-moments { display: grid; gap: 0; border-top: var(--bw) solid var(--paper); }
.lp-moments article { padding: var(--space-5) 0; border-bottom: var(--bw-thin) solid var(--ink-line); display: grid; gap: 6px; }
.lp-moments__tag { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--orange); }
.lp-moments p:not(.lp-moments__tag) { color: var(--ink-soft); font-size: 1.0625rem; }
@media (min-width: 800px) { .lp-moments { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

/* Tarifs ---------------------------------------------------------------------------------------- */
[data-period="year"] { display: none; }
.lp-billing:has(#period-year:checked) [data-period="month"] { display: none; }
.lp-billing:has(#period-year:checked) [data-period="year"] { display: block; }
.lp-period { display: inline-flex; flex-wrap: wrap; border: var(--bw) solid var(--ink); padding: 0; margin: 0 0 var(--space-5); background: var(--white); }
.lp-period label { position: relative; cursor: pointer; }
.lp-period input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lp-period span { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; font-weight: 800; transition: background-color var(--t-fast), color var(--t-fast); }
.lp-period label + label span { border-left: var(--bw-thin) solid var(--ink); }
.lp-period em { font-style: normal; font-weight: 700; font-size: .8125rem; padding: 2px 6px; background: var(--orange); color: var(--ink); }
.lp-period input:checked + span { background: var(--ink); color: var(--paper); }
.lp-period input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 420px) {
  .lp-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .lp-period label { min-width: 0; }
  .lp-period span { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 72px; padding: 8px 4px; font-size: 1.0625rem; line-height: 1.15; text-align: center; }
  .lp-period em { padding: 2px 5px; font-size: .75rem; }
}
.lp-launch { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-weight: 700; margin-bottom: var(--space-6); }
.lp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 3vw, 28px); }
.lp-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(22px, 3vw, 32px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-plan--featured { background: var(--ink); color: var(--paper); }
.lp-plan--featured .lp-plan__pitch, .lp-plan--featured .lp-plan__price, .lp-plan--featured .lp-plan__year { color: var(--ink-soft); }
.lp-plan--featured .lp-plan__price strong { color: var(--paper); }

.lp-plan .sticker { position: absolute; top: -16px; right: 18px; }
.lp-plan h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1; }
.lp-plan__pitch { color: var(--muted); font-weight: 600; }
.lp-plan__price { font-weight: 700; color: var(--muted); }
.lp-plan__price strong { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 3.5rem); color: var(--ink); font-weight: 400; margin-right: 4px; }
.lp-plan__price s { font-weight: 600; margin-left: 6px; }
.lp-plan__year { font-size: 1rem; color: var(--muted); margin-top: -8px; }
.lp-plan ul { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-3); display: grid; gap: 10px; flex: 1; }
.lp-plan li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.lp-plan li .icon { flex: none; margin-top: 2px; color: var(--ok); }
.lp-plan--featured li .icon { color: var(--orange); }
.lp-assure { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.lp-assure li { display: flex; gap: 12px; align-items: flex-start; }
.lp-assure .icon { flex: none; margin-top: 2px; }
@media (min-width: 900px) { .lp-assure { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.lp-compare-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-compare { width: 100%; min-width: 620px; border-collapse: collapse; }
.lp-compare th, .lp-compare td { padding: 14px 18px; text-align: left; vertical-align: middle; border-bottom: var(--bw-thin) solid var(--line); }
.lp-compare tbody tr:last-child th, .lp-compare tbody tr:last-child td { border-bottom: 0; }
.lp-compare thead th { border-bottom: var(--bw) solid var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.lp-compare thead th span { display: block; margin-top: 6px; font-family: var(--font-text); text-transform: none; font-size: 1rem; font-weight: 700; color: var(--muted); }
.lp-compare tbody th { font-weight: 600; width: 46%; }
.lp-compare td { font-weight: 700; width: 27%; }
.lp-compare .is-featured { background: #FFF3EA; }
.lp-yes { color: var(--ok); display: inline-flex; }
.lp-no { color: var(--muted); font-weight: 700; }
.lp-section--flush-top { padding-top: 0; }
.lp-billing__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.lp-billing__bar .lp-period { margin: 0; }
.lp-billing__bar .lp-launch { margin: 0; }
.lp-included { display: grid; border: var(--bw) solid var(--ink); background: var(--white); }
.lp-included > article { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 32px); }
.lp-included > article + article { border-top: var(--bw-thin) solid var(--ink); }
.lp-included article .icon { color: var(--orange); }
.lp-included h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1; }
.lp-included p { color: var(--muted); max-width: 40ch; }
.lp-included__list { display: grid; gap: 10px; margin: 0; padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 32px); border-top: var(--bw-thin) solid var(--ink); background: var(--paper2); list-style: none; }
.lp-included__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.lp-included__list .icon { flex: none; margin-top: 2px; color: var(--ok); }
@media (min-width: 800px) {
  .lp-included { grid-template-columns: 1fr 1fr; }
  .lp-included > article + article { border-top: 0; border-left: var(--bw-thin) solid var(--ink); }
  .lp-included__list { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
.lp-compare__hint { display: none; }
@media (max-width: 700px) { .lp-compare__hint { display: block; margin-top: 8px; font-size: .875rem; color: var(--muted); } }

/* Questions -------------------------------------------------------------------------------------- */
.lp-faq { display: grid; max-width: 860px; border-top: var(--bw) solid var(--ink); }
.lp-faq details { border-bottom: var(--bw-thin) solid var(--ink); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-weight: 800; font-size: 1.125rem; min-height: 64px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.75rem; line-height: 1; transition: transform var(--t-med) var(--ease); flex: none; }
.lp-faq details[open] summary::after { transform: rotate(45deg); color: var(--orange); }
.lp-faq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.lp-faq__a { padding: 0 4px 22px; color: var(--muted); max-width: 62ch; }
.lp-faq details[open] .lp-faq__a { animation: lp-fade var(--t-med) var(--ease); }
.lp-faqpage { display: grid; gap: var(--space-7); align-items: start; }
.lp-faqpage__nav { display: grid; gap: var(--space-3); }
.lp-faqpage__nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-faqpage__nav a:not(.btn) { display: inline-block; padding: 8px 12px; border: var(--bw-thin) solid var(--ink); font-weight: 700; text-decoration: none; background: var(--white); }
.lp-faqpage__nav a:not(.btn):hover { background: var(--ink); color: var(--paper); }
.lp-faqpage__ask { margin-top: var(--space-3); }
.lp-faqpage__groups { display: grid; gap: var(--space-7); min-width: 0; }
.lp-faqpage__group { display: grid; gap: var(--space-4); scroll-margin-top: calc(var(--header-h) + 24px); }
@media (min-width: 960px) {
  .lp-faqpage { grid-template-columns: 260px 1fr; gap: var(--space-8); }
  .lp-faqpage__nav { position: sticky; top: calc(var(--header-h) + 24px); }
  .lp-faqpage__nav ul { display: grid; gap: 0; border-top: var(--bw) solid var(--ink); }
  .lp-faqpage__nav a:not(.btn) { display: block; border: 0; border-bottom: var(--bw-thin) solid var(--ink); background: transparent; padding: 12px 4px; }
  .lp-faqpage__nav a:not(.btn):hover { background: transparent; color: var(--orange); }
}

/* Contact ---------------------------------------------------------------------------------------- */
.lp-contact { display: grid; gap: var(--space-7); align-items: start; }
.lp-contact__main { min-width: 0; }
.lp-form { display: grid; gap: var(--space-5); max-width: 680px; padding: clamp(20px, 3vw, 36px); background: var(--white); border: var(--bw) solid var(--ink); }
.lp-form .btn { justify-self: start; }
.lp-form .lp-small { margin: 0; }
.lp .field__hint { font-size: 1rem; color: var(--muted); }
.lp .field__optional { font-weight: 400; color: var(--muted); }
.lp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-sent { display: grid; gap: var(--space-3); justify-items: start; max-width: 680px; padding: clamp(24px, 4vw, 40px); background: var(--ok-bg); border: var(--bw) solid var(--ok); }
.lp-sent > .icon { color: var(--ok); }
.lp-sent:focus { outline: none; }
.lp-contact__aside { display: grid; border-top: var(--bw) solid var(--ink); }
.lp-contact__card { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) 0; border-bottom: var(--bw-thin) solid var(--ink); }
.lp-contact__card .icon { flex: none; margin-top: 2px; }
.lp-contact__label { font-weight: 800; margin-bottom: 2px; }
.lp-contact__card p:not(.lp-contact__label) { color: var(--muted); }
@media (min-width: 960px) { .lp-contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); } }

/* Pages juridiques -------------------------------------------------------------------------------- */
.lp-legal { max-width: calc(820px + var(--gutter) * 2); }
.lp-legal .legal { display: grid; gap: var(--space-3); }
.lp-legal .title-1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1; margin: var(--space-4) 0 var(--space-2); }
.lp-legal .title-3 { font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--bw-thin) solid var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.lp-legal .lead, .lp-legal .text-2 { color: var(--muted); }
.lp-legal ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.lp-legal .legal-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-legal .legal-nav a { padding: 8px 12px; border: var(--bw-thin) solid var(--ink); font-weight: 700; text-decoration: none; font-size: .9375rem; }
.lp-legal .legal-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.lp-legal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--bw-thin) solid var(--ink); }
.lp-legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; background: var(--card); }
.lp-legal th, .lp-legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: var(--bw-thin) solid var(--line); }
.lp-legal th { font-weight: 800; }
.lp-legal mark.todo { background: var(--warn-bg); color: inherit; padding: 0 .2em; }

/* Pages d'erreur ----------------------------------------------------------------------------------- */
.lp-error { padding-block: clamp(48px, 10vw, 120px); }
.lp-error__in { display: grid; gap: var(--space-5); justify-items: start; }
.lp-error__code { font-family: var(--font-display); font-size: clamp(6rem, 22vw, 14rem); line-height: .8; color: var(--orange); }
.lp-error__title { font-size: clamp(2.5rem, 7vw, 5rem); max-width: 18ch; }
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Pied de page -------------------------------------------------------------------------------------- */
.lp-foot { background: var(--ink); color: var(--paper); padding-block: clamp(44px, 6vw, 72px) var(--space-6); }
.lp-foot__top { display: grid; gap: var(--space-7); }
.lp-foot__brand { display: grid; gap: var(--space-4); justify-items: start; }
.lp-foot__sig { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1; color: var(--orange); }
.lp-foot__pitch { color: #C9C3B8; max-width: 32ch; }
.lp-foot__col h2 { font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #BDB6A8; margin-bottom: var(--space-3); }
.lp-foot__col ul { display: grid; gap: 10px; }
.lp-foot__col a { font-weight: 600; text-decoration: none; }
.lp-foot__col a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lp-foot__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--bw-thin) solid var(--ink-line); font-size: 1rem; color: #C9C3B8; }
.lp-foot__bottom a { color: inherit; }
.lp-foot__bottom a:last-child { margin-left: auto; }
.lp-foot :focus-visible { outline-color: var(--orange); }
@media (min-width: 760px) { .lp-foot__top { grid-template-columns: repeat(3, 1fr); } .lp-foot__brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .lp-foot__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .lp-foot__brand { grid-column: auto; } }

/* Mouvement : l'arrivée de la page, le panneau qu'on plante --------------------------------------------- */
@keyframes lp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lp-hero__copy > * { animation: lp-rise .6s var(--ease) both; }
.lp-hero__copy > *:nth-child(2) { animation-delay: .08s; }
.lp-hero__copy > *:nth-child(3) { animation-delay: .16s; }
.lp-hero__copy > *:nth-child(4) { animation-delay: .24s; }
.lp-scene__device { animation: lp-rise .7s var(--ease) .2s both; }
.lp-scene__notif { animation: lp-drop .55s var(--ease) 1.4s both; }
@keyframes lp-drop { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
.lp-pagehead__copy > * { animation: lp-rise .55s var(--ease) both; }
.lp-pagehead__copy > *:nth-child(2) { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-hero__copy > *, .lp-scene__device, .lp-scene__notif, .lp-pagehead__copy > *, .lp-menu[open] .lp-menu__panel, .lp-faq details[open] .lp-faq__a { animation: none; }
}

/* Bouton d'essai fixé en bas, sur téléphone : visible quand aucun formulaire d'essai n'est à l'écran. */
.lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: var(--bw) solid var(--ink); transform: translateY(110%); transition: transform var(--t-med) var(--ease); }
.lp-sticky .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1.0625rem; white-space: nowrap; }
.lp-sticky:not(.is-on) { visibility: hidden; transition: transform var(--t-med) var(--ease), visibility 0s var(--t-med); }
.lp-sticky.is-on { transform: none; }
@media (min-width: 900px) { .lp-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }

/* ==========================================================================
   Publications d'exemple : l'interface réelle de chaque réseau, sur un téléphone aux vraies proportions
   (écran 9 × 19,5, comme un iPhone actuel). Le fil défile dans le téléphone.
   Polices et couleurs des applications, pas celles de Bien Connu : on reconnaît le réseau au premier regard.
   Tailles en em : le téléphone s'adapte à la largeur de son conteneur.
   ========================================================================== */
.lp-device {
  position: relative; margin: 0; width: 100%; max-width: 372px; padding: 11px; border-radius: 54px;
  background: #0E0E0E; box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B;
  font: 400 14px/1.38 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #000; letter-spacing: 0; text-align: left;
}
.lp-device__screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 43px; background: #FFF; }
.lp-device img { display: block; object-fit: cover; }
.lp-device b { font-weight: 600; }
.lp-device .glyph { width: 1.7em; height: 1.7em; flex: none; }
.lp-device__feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: auto; scrollbar-width: none; }
.lp-device__feed::-webkit-scrollbar { display: none; }
.lp-device :is(.ig__photo, .fb__photo, .li__photo) { width: 100%; }

/* Barre d'état, encoche, barre d'accueil */
.lp-device__status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1.05em 2.1em .45em; font-weight: 600; font-size: 1.05em; }
.lp-device__island { position: absolute; left: 50%; top: .7em; width: 32%; height: 2.1em; transform: translateX(-50%); border-radius: 2em; background: #000; }
.lp-device__icons { display: flex; align-items: center; gap: .35em; }
.lp-device__icons .glyph { width: 1.15em; height: 1.15em; }
.lp-device__battery { position: relative; width: 1.75em; height: .85em; border: 1.5px solid #000; border-radius: 3px; }
.lp-device__battery::before { content: ""; position: absolute; inset: 1.5px; right: 25%; background: #000; border-radius: 1px; }
.lp-device__battery::after { content: ""; position: absolute; right: -4px; top: 30%; width: 2px; height: 40%; background: #000; border-radius: 1px; }
.lp-device__home { position: absolute; left: 50%; bottom: .55em; width: 36%; height: .36em; transform: translateX(-50%); border-radius: 1em; background: #000; }

.app-bar { display: flex; align-items: center; justify-content: space-between; gap: .7em; padding: .35em 1em .55em; }
.app-bar__end { display: flex; align-items: center; gap: 1.1em; }
.app-bar__round { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: #E4E6EB; }
.app-bar__round .glyph { width: 1.3em; height: 1.3em; }
.app-bar__me { width: 2.2em; height: 2.2em; border-radius: 50%; }

.tab-bar { display: flex; justify-content: space-around; align-items: center; padding: .7em .4em 1.9em; border-top: 1px solid #DBDBDB; background: #FFF; }
.tab-bar__me { width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px solid #000; }

/* Commentaires (Facebook, LinkedIn) */
.thread { display: grid; gap: .55em; padding: .5em .8em .9em; }
.thread__item { display: flex; gap: .5em; align-items: flex-start; }
.thread__item--reply { margin-left: 2.6em; }
.thread__avatar { width: 2.2em; height: 2.2em; flex: none; display: grid; place-items: center; border-radius: 50%; background: #D8DADF; font-size: .85em; font-weight: 700; color: #050505; }
img.thread__avatar { font-size: 1em; }
.thread__bubble { padding: .5em .75em; border-radius: 1.1em; background: #F0F2F5; font-size: .92em; }
.thread__bubble b { display: block; font-size: .95em; }
.thread__item small { display: block; padding: .2em .75em 0; color: #65676B; font-size: .75em; font-weight: 600; }
.thread--li .thread__bubble { border-radius: 0 .6em .6em .6em; background: #F2F2F2; }
.thread--li .thread__avatar { background: #DCE6F1; }

/* Réactions */
.react { width: 1.55em; height: 1.55em; display: inline-grid; place-items: center; border-radius: 50%; color: #FFF; vertical-align: middle; box-shadow: 0 0 0 2px #FFF; }
.react + .react { margin-left: -.3em; }
.react .glyph { width: .85em; height: .85em; }
.react--like { background: #0866FF; }
.react--love { background: #F33E58; }
.react--li-like { background: #378FE9; }
.react--li-love { background: #DF704D; }

/* Instagram */
.ig-logo { width: 2em; height: 2em; display: grid; place-items: center; border-radius: .6em; color: #FFF; background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.ig-logo .icon { width: 1.3em; height: 1.3em; }
.ig-stories { display: flex; gap: .85em; padding: .2em .8em .8em; border-bottom: 1px solid #EFEFEF; overflow: hidden; }
.ig-stories span { display: grid; justify-items: center; gap: .3em; flex: none; width: 4.6em; }
.ig-stories img { width: 4.2em; height: 4.2em; border-radius: 50%; border: 2px solid #FFF; box-shadow: 0 0 0 2.5px #D6249F; }
.ig-stories span:first-child img { box-shadow: 0 0 0 1px #DBDBDB; }
.ig-stories small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: .78em; }
.ig__head { display: flex; align-items: center; gap: .65em; padding: .55em .8em; font-size: .95em; line-height: 1.2; }
.ig__head small { display: block; font-size: .85em; }
.ig__avatar { width: 2.4em; height: 2.4em; border-radius: 50%; border: 2px solid #FFF; box-shadow: 0 0 0 2px #D6249F; }
.ig__more { margin-left: auto; }
.ig__photo { aspect-ratio: 1; }
.ig__actions { display: flex; gap: 1em; padding: .65em .8em .35em; }
.ig__liked { color: #FF3040; }
.ig__save { margin-left: auto; }
.ig__likes { padding: 0 .8em; }
.ig__caption { padding: .25em .8em; white-space: pre-line; }
.ig__meta, .ig__time { padding: .15em .8em; color: #737373; }
.ig__comment { padding: .1em .8em; }
.ig__time { font-size: .8em; padding-bottom: .9em; }

/* Facebook */
.fb-logo { width: 2.3em; height: 2.3em; display: grid; place-items: center; border-radius: 50%; background: #0866FF; color: #FFF; }
.fb-logo .icon { width: 1.4em; height: 1.4em; }
.fb-composer { display: flex; align-items: center; gap: .6em; padding: .4em .8em .8em; }
.fb-composer img { width: 2.6em; height: 2.6em; border-radius: 50%; }
.fb-composer span { flex: 1; padding: .55em .9em; border: 1px solid #CED0D4; border-radius: 2em; color: #65676B; }
.fb { border-top: .45em solid #C9CCD1; }
.fb__head { display: flex; align-items: center; gap: .6em; padding: .7em .8em .45em; }
.fb__head b { display: block; color: #050505; font-size: .95em; }
.fb__head small, .li__head small { display: flex; align-items: center; gap: .3em; font-size: .78em; }
.fb__head small { color: #65676B; }
.fb__head small .glyph, .li__head small .glyph { width: 1em; height: 1em; }
.fb__avatar { width: 2.8em; height: 2.8em; border-radius: 50%; }
.fb__more { margin-left: auto; color: #65676B; }
.fb__text { padding: .1em .8em .65em; color: #050505; white-space: pre-line; }
.fb__photo, .li__photo { aspect-ratio: 4 / 3; }
.fb__counts, .li__counts { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .6em .8em; font-size: .82em; }
.fb__counts > span:last-child, .li__counts > span:last-child { text-align: right; }
.fb__counts > span:first-child, .li__counts > span:first-child { display: inline-flex; align-items: center; gap: .3em; }
.fb__counts { color: #65676B; }
.fb__buttons { display: flex; justify-content: space-around; margin: 0 .8em; padding: .55em 0 .65em; border-top: 1px solid #CED0D4; border-bottom: 1px solid #CED0D4; color: #65676B; font-weight: 600; font-size: .85em; }
.fb__buttons span, .li__buttons span { display: inline-flex; align-items: center; gap: .35em; }
.fb__buttons .glyph { width: 1.35em; height: 1.35em; }
.tab-bar--fb .is-on { color: #0866FF; }

/* LinkedIn */
.app-bar--li { gap: .6em; }
.app-bar__search { flex: 1; display: flex; align-items: center; gap: .45em; padding: .45em .7em; border-radius: .35em; background: #EDF3F8; color: #5E5E5E; font-size: .9em; }
.app-bar__search .glyph { width: 1.15em; height: 1.15em; }
.li-logo { width: 2em; height: 2em; flex: none; display: grid; place-items: center; border-radius: .3em; background: #0A66C2; color: #FFF; font-weight: 700; font-size: 1.05em; letter-spacing: -.03em; }
.li { border-top: .45em solid #F4F2EE; }
.li__head { display: flex; align-items: flex-start; gap: .6em; padding: .7em .8em .45em; }
.li__head b { display: block; color: rgba(0, 0, 0, .9); font-size: .95em; }
.li__head small { color: rgba(0, 0, 0, .6); }
.li__avatar { width: 3em; height: 3em; flex: none; border-radius: 50%; }
.li__follow { margin-left: auto; color: #0A66C2; font-weight: 600; font-size: .9em; white-space: nowrap; }
.li__text { padding: .2em .8em .65em; color: rgba(0, 0, 0, .9); white-space: pre-line; }
.li__counts { color: rgba(0, 0, 0, .6); }
.li__buttons { display: flex; justify-content: space-around; margin: 0 .4em; padding: .55em 0 .7em; border-top: 1px solid #E8E8E8; color: rgba(0, 0, 0, .6); font-weight: 600; font-size: .74em; }
.li__buttons span { flex-direction: column; gap: .25em; }
.li__buttons .glyph { width: 1.8em; height: 1.8em; }
.tab-bar--li { align-items: flex-start; }
.tab-bar--li span { display: grid; justify-items: center; gap: .2em; color: rgba(0, 0, 0, .6); font-size: .64em; }
.tab-bar--li span.is-on { color: #000; }
.tab-bar--li .glyph { width: 2.5em; height: 2.5em; }

/* Le fil continue sous la publication : le haut de la suivante, en gris. */
.feed-next { display: flex; gap: .6em; min-height: 6em; padding: .8em; border-top: 1px solid #DBDBDB; }
.lp-device--facebook .feed-next { border-top: .45em solid #C9CCD1; }
.lp-device--linkedin .feed-next { border-top: .45em solid #F4F2EE; }
.feed-next__avatar { width: 2.6em; height: 2.6em; flex: none; border-radius: 50%; background: #E9EAEC; }
.feed-next__lines { flex: 1; display: grid; align-content: start; gap: .45em; padding-top: .3em; }
.feed-next__lines i { display: block; height: .65em; width: 55%; border-radius: .35em; background: #E9EAEC; }
.feed-next__lines i + i { width: 32%; }

/* Les réseaux à connecter : leurs vrais logos. */
.lp-rows__logo { font-size: 18px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ==========================================================================
   Notifications iOS (illustrations) : la police, les couleurs et le flou d'un iPhone.
   ========================================================================== */
.ios-notif {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 1px 10px; align-items: start; padding: 11px 14px 12px; border-radius: 22px;
  background: rgba(246, 246, 248, .86); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16); color: #000; text-align: left;
  font: 400 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0;
}
.ios-notif__icon { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #FFF; }
.ios-notif__icon--messages { background: linear-gradient(180deg, #5DF777, #0BC42B); }
.ios-notif__icon--mail { background: linear-gradient(180deg, #1F9BFF, #0A64E1); }
.ios-notif__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-notif__time { color: rgba(60, 60, 67, .6); font-size: 13px; white-space: nowrap; }
.ios-notif__body { grid-column: 2 / 4; }

/* Écran verrouillé : la date, l'appel entrant, puis les notifications. */
.lp-step__ui--lock {
  align-content: start; gap: 8px; padding: 18px 12px; border-color: var(--ink); color: #FFF;
  background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .5)), url("../assets/photos/maison.webp") center / cover;
}
.ios-lock__date { text-align: center; font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin-bottom: 4px; }
.ios-call {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 30px; background: #1C1C1E; color: #FFF;
  font: 400 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ios-call__avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #A5A5AA, #86868B); font-weight: 600; font-size: 15px; }
.ios-call__who { flex: 1; min-width: 0; }
.ios-call__who b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-call__who small { color: rgba(235, 235, 245, .6); font-size: 13px; }
.ios-call__btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #FFF; }
.ios-call__btn--no { background: #FF3B30; }
.ios-call__btn--no .icon { transform: rotate(135deg); }
.ios-call__btn--yes { background: #34C759; }

/* ==========================================================================
   Accueil : de l'annonce à la publication. La page de l'annonce sur le site de l'agence (à gauche),
   une flèche qui se dessine, le téléphone avec la publication (à droite).
   ========================================================================== */
.lp-scene--source .lp-browser { position: absolute; left: 0; top: 4%; width: 74%; }
.lp-scene--source .lp-flow { position: absolute; left: 10%; top: 63%; width: 46%; height: 30%; }

/* La page d'annonce : un site immobilier quelconque, neutre (police système, bleu générique), pas notre marque. */
.lp-browser {
  overflow: hidden; border-radius: 10px; background: #FFF; border: 1px solid #C9CCD3; box-shadow: 0 18px 40px rgba(17, 17, 17, .14);
  font: 400 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1F2430; letter-spacing: 0;
}
.lp-browser__bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #EEF0F3; border-bottom: 1px solid #DADDE3; }
.lp-browser__dots { display: flex; gap: 5px; }
.lp-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.lp-browser__dots i:nth-child(2) { background: #FEBC2E; }
.lp-browser__dots i:nth-child(3) { background: #28C840; }
.lp-browser__url { flex: 1; display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; background: #FFF; color: #4B5160; white-space: nowrap; overflow: hidden; }
.lp-browser__url .icon { color: #6B7280; }
.lp-browser__page { padding: 8px 10px 12px; display: grid; gap: 8px; }
.lp-browser__nav { display: flex; align-items: center; gap: 12px; color: #6B7280; }
.lp-browser__nav b { margin-right: auto; color: #1E3A8A; font-size: 12px; }
.lp-browser__gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 7.4; }
.lp-browser__gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.lp-browser__gallery img:first-child { grid-row: span 2; }
.lp-browser__info { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.lp-browser__title { font-size: 13px; font-weight: 700; color: #111827; }
.lp-browser__place { color: #6B7280; }
.lp-browser__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lp-browser__chips span { padding: 2px 7px; border-radius: 10px; background: #EEF2FF; color: #3730A3; font-weight: 600; font-size: 10px; }
.lp-browser__aside { display: grid; justify-items: end; gap: 5px; }
.lp-browser__price { font-size: 15px; font-weight: 800; color: #111827; white-space: nowrap; }
.lp-browser__cta { padding: 5px 9px; border-radius: 6px; background: #2563EB; color: #FFF; font-weight: 700; white-space: nowrap; }
.lp-browser__lines { display: grid; gap: 5px; }
.lp-browser__lines i { display: block; height: 6px; border-radius: 3px; background: #E5E7EB; }
.lp-browser__lines i:nth-child(2) { width: 92%; }
.lp-browser__lines i:nth-child(3) { width: 64%; }

/* La flèche : elle se dessine, s'arrête un moment, recommence. */
.lp-flow__arrow { width: 100%; height: 100%; overflow: visible; }
.lp-flow__line, .lp-flow__head { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-flow__line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lp-draw 4.5s var(--ease) .8s infinite; }
.lp-flow__head { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lp-head 4.5s var(--ease) .8s infinite; }
@keyframes lp-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 35%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lp-head { 0%, 30% { stroke-dashoffset: 100; opacity: 1; } 42%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lp-flow__label { position: absolute; left: -4%; bottom: -6%; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .lp-flow__line, .lp-flow__head { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 639px) {
  .lp-scene--source { padding-top: 64%; }
  .lp-scene--source .lp-browser { width: 100%; top: 0; }
  .lp-scene--source .lp-scene__device { margin-left: auto; margin-right: 2%; }
  .lp-scene--source .lp-flow { left: 0; top: 40%; width: 40%; height: 18%; }
  .lp-flow__label { font-size: .875rem; left: 0; bottom: -30%; white-space: normal; max-width: 8.5em; }
}
.lp-scene--source .lp-scene__device { margin-left: auto; }
.lp-scene--source .lp-scene__notif { left: -26%; width: 116%; }
@media (max-width: 639px) { .lp-scene--source .lp-scene__notif { left: -30%; width: 122%; } }

/* ==========================================================================
   Téléphones en 3D : inclinés en perspective, avec une tranche, des boutons et une ombre portée.
   --ry / --rx : l'angle de chaque téléphone ; le pointeur l'ajuste (--px / --py, voir site.js).
   ========================================================================== */
.lp-device {
  --ry: -14deg; --rx: 5deg; --px: 0deg; --py: 0deg;
  transform: perspective(1600px) rotateY(calc(var(--ry) + var(--px))) rotateX(calc(var(--rx) + var(--py)));
  transform-style: preserve-3d; transition: transform .5s var(--ease);
  box-shadow:
    inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B,
    1px 1px 0 #2B2B2B, 2px 2px 0 #262626, 3px 3px 0 #222, 4px 4px 0 #1E1E1E, 5px 5px 0 #1B1B1B, 6px 6px 0 #181818,
    24px 40px 60px -18px rgba(17, 17, 17, .45);
}
/* Les boutons sur la tranche : volume à gauche, marche/arrêt à droite. */
.lp-device::before, .lp-device::after {
  content: ""; position: absolute; width: 4px; border-radius: 2px; background: #1A1A1A; box-shadow: inset 1px 0 0 #3A3A3A;
}
.lp-device::before { left: -3px; top: 20%; height: 9%; box-shadow: 0 calc(9% + 120%) 0 #1A1A1A; }
.lp-device::after { right: -3px; top: 26%; height: 13%; }
/* Un reflet léger sur l'écran, comme une vitre. */
.lp-device .lp-device__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
}

/* L'éventail des trois réseaux : à gauche, de face, à droite. */
.lp-posts > .lp-device:nth-child(1) { --ry: 16deg; --rx: 4deg; }
.lp-posts > .lp-device:nth-child(2) { --ry: 0deg; --rx: 6deg; }
.lp-posts > .lp-device:nth-child(3) { --ry: -16deg; --rx: 4deg; }
.lp-posts > .lp-device:nth-child(1) { box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B, -1px 1px 0 #2B2B2B, -2px 2px 0 #262626, -3px 3px 0 #222, -4px 4px 0 #1E1E1E, -5px 5px 0 #1B1B1B, -6px 6px 0 #181818, -24px 40px 60px -18px rgba(0, 0, 0, .55); }
.lp-posts > .lp-device:nth-child(2) { box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B, 0 2px 0 #262626, 0 4px 0 #1E1E1E, 0 6px 0 #181818, 0 40px 60px -18px rgba(0, 0, 0, .55); }
.lp-ink .lp-posts { padding-block: 12px 28px; }

/* Le téléphone du haut de page : de trois quarts, tourné vers l'annonce. */
.lp-scene .lp-device { --ry: -16deg; --rx: 6deg; }

/* Téléphones et tablettes (écran tactile, ou étroit) : à plat. La 3D y ralentit le défilement. */
@media (max-width: 899px), (hover: none) {
  .lp-device, .lp-posts > .lp-device:nth-child(n) {
    transform: none; transition: none;
    box-shadow: inset 0 0 0 1.5px #3A3A3A, inset 0 0 0 4px #0E0E0E, inset 0 0 0 5px #2B2B2B;
  }
  .lp-device .lp-device__screen::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-device { transition: none; } }
/* La notification suit l'angle du téléphone du haut de page. */
.lp-scene__notif { transform: perspective(1600px) rotateY(-16deg) rotateX(6deg) translateZ(40px); }
@media (max-width: 899px), (hover: none) { .lp-scene__notif { transform: none; } }