/* Page d'accueil — reproduction de la maquette images/landing page.png.
 * Feuille autonome (préfixe .lp-) : couleurs explicites, la page garde le
 * même rendu quel que soit le thème choisi ailleurs sur le site. */

.lp {
  --lp-navy: #0b2a4f;
  --lp-navy-2: #0f3460;
  --lp-navy-3: #082040;
  --lp-blue: #1f6fbf;
  --lp-sky: #6cb8f5;
  --lp-ink: #13243b;
  --lp-text: #4a5a70;
  --lp-muted: #6b7a8f;
  --lp-line: #e3e9f1;
  --lp-soft: #f3f6fa;
  --lp-green: #1f8a4c;
  --lp-bj-green: #008751;
  --lp-bj-yellow: #fcd116;
  --lp-bj-red: #e8112d;
  --lp-radius: 14px;
  --lp-shadow: 0 1px 2px rgba(16, 38, 66, .05), 0 8px 24px rgba(16, 38, 66, .07);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--lp-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
body.lp-body { background: #fff !important; color: #13243b; }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp a { text-decoration: none; }
.lp h1, .lp h2, .lp h3, .lp h4 { color: inherit; font-family: inherit; text-wrap: balance; }
.lp p { margin: 0; }
.lp-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* En-tête et bannière : conteneur plus large, marges gauche et droite égales */
.lp-container-wide { max-width: 1424px; padding: 0 40px; }
.lp :focus-visible { outline: 3px solid #6cb8f5; outline-offset: 3px; border-radius: 6px; box-shadow: none !important; }

/* Bandeau tricolore partiel en haut (comme la maquette) */
.lp-flag { /* bandeau tricolore pleine largeur, identique aux autres pages */
  height: 4px;
  background: linear-gradient(90deg, var(--lp-bj-green) 0 33.333%, var(--lp-bj-yellow) 33.333% 66.666%, var(--lp-bj-red) 66.666% 100%);
}

/* ---------- En-tête ---------- */
.lp-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lp-line); transition: box-shadow .2s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.lp-header.is-hidden { transform: translateY(-100%); }
.lp-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--lp-bj-green) 0 33.3%, var(--lp-bj-yellow) 33.3% 66.6%, var(--lp-bj-red) 66.6%); pointer-events: none; }
.lp-header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 38, 66, .08); }
.lp-header-in { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.lp-logo { --logo-gap: #fff; display: inline-flex; align-items: center; gap: 12px; color: #0f3a68; }
.lp-logo .logo-mark { width: 46px; height: 65px; flex-shrink: 0; }
.lp-logo .logo-text { display: block; }
.lp-logo .logo-name { display: block; font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: var(--lp-navy); }
.lp-logo .logo-tag { display: block; font-size: .72rem; line-height: 1.35; color: #3d5a80; margin-top: 3px; white-space: nowrap; }
.lp-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.lp-nav a { color: var(--lp-ink); font-size: .88rem; font-weight: 600; white-space: nowrap; padding: 10px 11px; border-radius: 8px; transition: color .15s, background .15s; }
.lp-nav a:hover { color: var(--lp-blue); background: var(--lp-soft); }
.lp-header-actions { display: flex; align-items: center; gap: 14px; margin-left: 10px; }
.lp-header .lp-btn { padding: 11px 20px; font-size: .86rem; }
.lp-agents { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ink); font-size: .9rem; font-weight: 600; padding: 10px 6px; }
.lp-agents:hover { color: var(--lp-blue); }
.lp-agents .bi { font-size: 1.15rem; }
.lp-burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--lp-line); border-radius: 10px; background: #fff; color: var(--lp-navy); font-size: 1.5rem; }

/* ---------- Boutons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 24px; border-radius: 999px;
  font-size: .92rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.lp-btn .bi-arrow-right { transition: transform .18s; }
.lp-btn:hover .bi-arrow-right { transform: translateX(3px); }
.lp-btn-navy { background: var(--lp-navy); color: #fff; box-shadow: 0 6px 16px rgba(11, 42, 79, .22); }
.lp-btn-navy:hover { background: var(--lp-navy-2); color: #fff; }
.lp-btn-white { background: #fff; color: var(--lp-navy); }
.lp-btn-white:hover { background: #e9f3fc; color: var(--lp-navy); }
.lp-btn-outline { background: #fff; color: var(--lp-navy); border-color: var(--lp-navy); min-height: 42px; padding: 10px 20px; font-size: .85rem; }
.lp-btn-outline:hover { background: var(--lp-navy); color: #fff; }
.lp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); min-height: 42px; padding: 10px 20px; font-size: .85rem; }
.lp-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.lp-play { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: .9rem; font-weight: 600; background: none; border: 0; padding: 6px 4px; cursor: pointer; }
.lp-play-ic { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); display: grid; place-items: center; transition: background .18s; }
.lp-play-ic .bi { font-size: 1rem; margin-left: 2px; }
.lp-play:hover .lp-play-ic { background: rgba(255, 255, 255, .15); }

/* ---------- Hero ---------- */
/* Bannière : presque tout l'écran. La photo est calée à droite et affichée
   entière en largeur (sa largeur suit la hauteur : rapport 2400 / 1940),
   pour qu'on voie la dame, son visage et son téléphone sans recadrage. */
.lp-hero { --lp-hero-h: clamp(700px, 56vw, 800px); position: relative; overflow: hidden; background: var(--lp-navy); min-height: var(--lp-hero-h); color: #fff; }
.lp-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lp-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; display: block;
  filter: blur(22px) saturate(1.25) brightness(.92); transform: scale(1.2);
}
.lp-hero-bg::after { /* teinte bleue : garde le texte lisible (contraste AA) */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 30, 58, .62) 0%, rgba(8, 30, 58, .46) 40%, rgba(8, 30, 58, .25) 62%, rgba(8, 30, 58, .2) 100%);
}
.lp-hero-photo {
  /* calée sur le bord de la zone de contenu (comme le texte et la maquette),
     pour que la composition reste identique sur tous les écrans larges */
  position: absolute; top: 0; bottom: 0; right: max(0px, calc((100% - 1424px) / 2)); z-index: 1;
  width: calc((var(--lp-hero-h) + 80px) * 1.237); max-width: 78%;
  /* la photo nette se fond dans la version floutée, à gauche et au bord droit */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%, #000 93%, transparent 100%);
}
.lp-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.lp-hero::before { /* léger voile au-dessus de la photo, côté texte */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 30, 58, .32) 0%, rgba(8, 30, 58, .18) 36%, rgba(8, 30, 58, 0) 52%);
}
.lp-hero-tri { /* triangle vert, coin bas gauche */
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 120px; height: 52px;
  background: var(--lp-green); clip-path: polygon(0 0, 100% 100%, 0 100%); transform-origin: 0 100%;
}
.lp-hero-in { position: relative; z-index: 3; display: flex; align-items: center; min-height: var(--lp-hero-h); padding-top: 44px; padding-bottom: 64px; }
.lp-hero-copy { max-width: 700px; text-shadow: 0 1px 2px rgba(4, 16, 36, .45), 0 2px 18px rgba(4, 16, 36, .35); }
.lp-hero-copy .lp-btn { text-shadow: none; }
.lp-badge-outline { display: inline-block; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-size: .8rem; font-weight: 500; color: #fff; }
.lp-hero h1 { font-size: clamp(2.1rem, 3.3vw, 2.95rem); font-weight: 700; line-height: 1.16; letter-spacing: -.02em; margin: 22px 0 22px; color: #fff; }
.lp-hero h1 .lp-sky { color: var(--lp-sky); }
.lp-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lp-line > span { display: inline-block; }
.lp-hero-lead { font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, .9); max-width: 470px; }
.lp-hero-lead strong { color: #fff; font-weight: 700; }
.lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.lp-hero-note { display: flex; align-items: center; gap: 12px; margin-top: 38px; font-size: .82rem; color: rgba(255, 255, 255, .85); }
.lp-tricolor { display: inline-flex; width: 34px; height: 3px; border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.lp-tricolor i { flex: 1; }
.lp-tricolor i:nth-child(1) { background: var(--lp-bj-green); }
.lp-tricolor i:nth-child(2) { background: var(--lp-bj-yellow); }
.lp-tricolor i:nth-child(3) { background: var(--lp-bj-red); }

.lp-script {
  position: absolute; z-index: 3; right: 250px; top: 40px; transform: rotate(-9deg); transform-origin: right top;
  font-family: "Caveat", cursive; font-size: 2.3rem; line-height: 1.05; color: #fff; text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.lp-script svg { display: block; margin: 4px 0 0 auto; }

/* Téléphone (maquette de l'application, en HTML : toujours net) */
.lp-phone {
  position: absolute; z-index: 3; right: 38px; top: 50px; width: 200px; transform: scale(.9); transform-origin: top right;
  perspective: 1100px; perspective-origin: 30% 40%;
}
/* Téléphone en 3D : incliné vers la gauche (écran tourné vers la dame et le
   texte), avec une vraie épaisseur (couches empilées en profondeur), un
   reflet sur l'écran et une ombre au sol. L'orientation suit la souris
   (static/js/landing-motion.js). */
.lp-phone-tilt { transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-32deg) rotateZ(3deg); }
.lp-phone-body {
  position: relative; transform-style: preserve-3d;
  border-radius: 30px; padding: 8px;
  background: linear-gradient(150deg, #3a4558 0%, #151c29 35%, #0b1019 100%);
  box-shadow: inset 0 0 0 1.5px #4a5670, inset 0 0 0 3.5px #0a0f17;
}
.lp-phone-layer {
  position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  background: linear-gradient(90deg, #8a96ae 0%, #39445a 10%, #1a2231 45%, #2a3446 85%, #9aa6bd 100%);
  transform: translateZ(var(--z));
}
.lp-phone-key { position: absolute; right: -4px; width: 4px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #2a3343, #8a96ae); transform: translateZ(-9px); }
.lp-phone-key-power { top: 96px; height: 34px; }
.lp-phone-key-vol { top: 140px; height: 56px; }
.lp-phone-shadow {
  position: absolute; left: 6%; right: -4%; bottom: -52px; height: 40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2, 10, 24, .75), rgba(2, 10, 24, .25) 60%, rgba(2, 10, 24, 0));
  filter: blur(5px); transform: skewX(-24deg);
}
.lp-phone-screen { position: relative; border-radius: 23px; overflow: hidden; background: #fff; color: var(--lp-ink); height: 400px; display: flex; flex-direction: column; transform: translateZ(.5px); }
.lp-phone-screen::after { /* reflet de la vitre */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .06) 100%);
}
.lp-phone-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 64px; height: 16px; border-radius: 10px; background: #101826; z-index: 2; }
.lp-ph-top { display: flex; align-items: center; justify-content: space-between; padding: 30px 14px 8px; }
.lp-ph-brand { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; color: var(--lp-navy); }
.lp-ph-brand svg { width: 13px; height: 18px; color: #0f3a68; --logo-gap: #fff; }
.lp-ph-top .bi { font-size: .78rem; color: var(--lp-navy); }
.lp-ph-hello { padding: 4px 14px 0; }
.lp-ph-hello b { display: block; font-size: .78rem; }
.lp-ph-hello span { font-size: .58rem; color: var(--lp-muted); }
.lp-ph-book { margin: 10px 12px 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--lp-line); border-radius: 10px; font-size: .62rem; font-weight: 700; }
.lp-ph-book .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--lp-navy); color: #fff; display: grid; place-items: center; font-size: .72rem; }
.lp-ph-label { padding: 12px 14px 4px; font-size: .6rem; font-weight: 700; color: var(--lp-muted); }
.lp-ph-item { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 7px 8px; border: 1px solid var(--lp-line); border-radius: 10px; }
.lp-ph-item .ic { width: 24px; height: 24px; border-radius: 50%; background: #eaf2fb; color: var(--lp-navy); display: grid; place-items: center; font-size: .66rem; flex-shrink: 0; }
.lp-ph-item b { display: block; font-size: .6rem; line-height: 1.2; }
.lp-ph-item span { display: block; font-size: .5rem; color: var(--lp-muted); line-height: 1.2; }
.lp-ph-item .bi-chevron-right { margin-left: auto; font-size: .6rem; color: var(--lp-muted); }
.lp-ph-nav { margin-top: auto; display: flex; justify-content: space-around; padding: 8px 6px 10px; border-top: 1px solid var(--lp-line); }
.lp-ph-nav span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .48rem; color: var(--lp-muted); }
.lp-ph-nav span .bi { font-size: .78rem; }
.lp-ph-nav span.on { color: var(--lp-navy); font-weight: 700; }

/* ---------- Pourquoi ---------- */
.lp-why { padding: 30px 0 46px; background: #fff; }
.lp-why-grid { display: grid; grid-template-columns: 1.45fr repeat(5, 1fr); gap: 16px; }
.lp-card { background: #fff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); }
.lp-why-intro { padding: 26px 24px; }
.lp-why-intro h2 { font-size: 1.55rem; font-weight: 600; line-height: 1.25; color: var(--lp-navy); margin: 0 0 14px; }
.lp-why-intro p { font-size: .84rem; line-height: 1.6; color: var(--lp-text); }
.lp-feat { padding: 22px 18px 20px; transition: transform .2s, box-shadow .2s; }
.lp-feat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 38, 66, .11); }
.lp-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 16px; background: #e9f2fc; color: var(--lp-blue); }
.lp-ic.is-green { background: #e5f5ec; color: var(--lp-green); }
.lp-feat h3 { font-size: .9rem; font-weight: 700; margin: 0 0 8px; color: var(--lp-ink); }
.lp-feat p { font-size: .8rem; line-height: 1.55; color: var(--lp-text); }

/* ---------- Comment ça marche ---------- */
.lp-steps { background: var(--lp-soft); padding: 64px 0; }
.lp-steps-grid { display: grid; grid-template-columns: 370px 1fr; gap: 48px; align-items: center; }
.lp-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-blue); margin-bottom: 14px; }
.lp-h2 { font-size: clamp(1.7rem, 2.4vw, 2.05rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--lp-navy); margin: 0 0 16px; }
.lp-sub { font-size: .95rem; line-height: 1.65; color: var(--lp-text); margin-bottom: 28px !important; }
.lp-steps-row { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; align-items: center; }
.lp-step { padding: 24px 24px 28px; height: 100%; }
.lp-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lp-num { width: 34px; height: 34px; border-radius: 50%; background: #f8ecd2; color: #8a5a12; font-size: .78rem; font-weight: 800; display: grid; place-items: center; }
.lp-step .lp-ic { margin: 0; width: 50px; height: 50px; background: #fff; border: 1.5px solid #d6e4f3; color: var(--lp-navy); font-size: 1.35rem; }
.lp-step h3 { font-size: 1.12rem; font-weight: 700; color: var(--lp-navy); margin: 0 0 12px; }
.lp-step p { font-size: .84rem; line-height: 1.65; color: var(--lp-text); }
.lp-arrow { text-align: center; color: var(--lp-navy); font-size: 1.05rem; }

/* ---------- Administrations ---------- */
.lp-admins { padding: 72px 0; background: #fff; }
.lp-admins-grid { display: grid; grid-template-columns: 370px 1fr; gap: 48px; align-items: start; }
.lp-admins-copy { padding-top: 12px; }
.lp-admins-copy .lp-sub strong { color: var(--lp-ink); }
.lp-admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-admin { overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.lp-admin:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16, 38, 66, .13); }
.lp-admin-img { aspect-ratio: 1000 / 525; overflow: hidden; background: #dfe8f1; }
.lp-admin-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.lp-admin:hover .lp-admin-img img { transform: scale(1.04); }
.lp-admin-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.lp-admin-head { display: flex; gap: 12px; align-items: flex-start; }
.lp-admin-head .lp-ic { margin: 0; width: 40px; height: 40px; font-size: 1.05rem; background: #fff; border: 1.5px solid #d6e4f3; color: var(--lp-navy); flex-shrink: 0; }
.lp-admin h3 { font-size: 1.08rem; font-weight: 700; margin: 2px 0 4px; color: var(--lp-ink); }
.lp-admin-sub { font-size: .78rem; line-height: 1.45; color: var(--lp-muted); }
.lp-pill { display: inline-block; margin: 14px 0 0 52px; padding: 4px 14px; border-radius: 999px; font-size: .74rem; font-weight: 700; align-self: flex-start; }
.lp-pill-green { background: var(--lp-green); color: #fff; }
.lp-pill-blue { background: #e6f1fb; color: #1f5f9e; border: 1px solid #c9def3; }
.lp-admin-link { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; color: var(--lp-blue); }
.lp-admin-link:hover { color: var(--lp-navy); }

/* ---------- Accompagnement ---------- */
.lp-human { display: grid; grid-template-columns: 40% 60%; background: var(--lp-navy-2); color: #fff; min-height: 300px; }
.lp-human-photo { position: relative; overflow: hidden; }
.lp-human-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.lp-human-in { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; padding: 48px 56px; max-width: 900px; }
.lp-human .lp-eyebrow { color: #a9cdf0; }
.lp-human h2 { font-size: clamp(1.6rem, 2.2vw, 1.95rem); font-weight: 600; color: #fff; margin: 0 0 16px; }
.lp-human p { font-size: .92rem; line-height: 1.7; color: rgba(255, 255, 255, .88); margin-bottom: 26px; }
.lp-human p strong { color: #fff; }
.lp-human-list { list-style: none; margin: 0; padding: 0 0 0 32px; border-left: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 18px; }
.lp-human-list li { display: flex; align-items: center; gap: 14px; font-size: .9rem; font-weight: 500; }
.lp-human-list .ic { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); display: grid; place-items: center; font-size: 1.02rem; flex-shrink: 0; }

/* ---------- Trio : suivi / FAQ / citation ---------- */
.lp-trio { padding: 40px 0; background: #fff; }
.lp-trio-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 0; align-items: stretch; }
.lp-track { display: flex; gap: 26px; align-items: center; padding-right: 36px; }
.lp-track-img { width: 200px; flex-shrink: 0; aspect-ratio: 800 / 640; border-radius: 12px; overflow: hidden; box-shadow: var(--lp-shadow); }
.lp-track-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-trio h3 { font-size: 1.15rem; font-weight: 600; color: var(--lp-navy); margin: 0 0 12px; }
.lp-trio p { font-size: .84rem; line-height: 1.65; color: var(--lp-text); margin-bottom: 20px; }
.lp-faq-col { padding: 8px 36px; border-left: 1px solid var(--lp-line); display: flex; flex-direction: column; justify-content: center; }
.lp-faq-col .lp-btn, .lp-track .lp-btn { align-self: flex-start; }
.lp-quote { background: var(--lp-soft); border-radius: var(--lp-radius); padding: 30px 30px 26px; display: flex; flex-direction: column; justify-content: center; margin-left: 12px; }
.lp-quote blockquote { margin: 0; font-size: 1.12rem; line-height: 1.5; font-weight: 500; color: var(--lp-navy); position: relative; padding-left: 26px; }
.lp-quote blockquote::before { content: "\201C"; position: absolute; left: 0; top: -8px; font-size: 2.4rem; font-weight: 800; color: var(--lp-navy); line-height: 1; }
.lp-quote blockquote::after { content: "\201D"; font-size: 1.6rem; font-weight: 800; line-height: 0; vertical-align: -.35em; margin-left: 4px; }
.lp-quote .lp-tricolor { margin: 18px 0 0 26px; width: 42px; }

/* ---------- Appel final ---------- */
.lp-cta { position: relative; overflow: hidden; background: var(--lp-navy-2); color: #fff; }
.lp-cta-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 108px; padding-top: 22px; padding-bottom: 22px; }
.lp-cta h2 { font-size: 1.45rem; font-weight: 600; color: #fff; margin: 0 0 6px; }
.lp-cta p { font-size: .86rem; color: rgba(255, 255, 255, .82); max-width: 420px; }
.lp-cta-skyline { position: absolute; right: 0; bottom: 0; width: 56%; height: 100%; color: #163f6b; pointer-events: none; }
.lp-cta .lp-btn { margin-right: 22%; }

/* ---------- Pied de page ---------- */
.lp-footer { background: var(--lp-navy-3); color: #c9d6e6; }
.lp-footer-top { display: grid; grid-template-columns: 1.1fr 2.2fr 1.1fr; gap: 32px; align-items: center; padding: 34px 0 26px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.lp-footer .lp-logo, .lp-footer .lp-logo .logo-name { color: #fff; }
.lp-footer .lp-logo { --logo-gap: var(--lp-navy-3); }
.lp-footer .lp-logo .logo-tag { color: #9fb2c8; }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
.lp-footer-nav a { white-space: nowrap; color: #dbe5f1; font-size: .84rem; font-weight: 500; }
.lp-footer-nav a:hover { color: #fff; text-decoration: underline; }
.lp-footer-made { text-align: right; font-size: .78rem; color: #c9d6e6; }
.lp-footer-made .lp-tricolor { width: 64px; margin-top: 8px; }
.lp-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0 22px; font-size: .76rem; color: #9fb2c8; }
.lp-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.lp-legal span.sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .25); }
.lp-social { display: flex; gap: 10px; margin-left: 14px; }
.lp-social span { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--lp-navy-3); display: grid; place-items: center; font-size: .78rem; }

/* ---------- Modales (présentation, FAQ) ---------- */
.lp-modal .modal-content { border: 0; border-radius: 18px; font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: #fff; color: var(--lp-ink); }
.lp-modal .modal-header { border-bottom: 1px solid var(--lp-line); padding: 18px 24px; }
.lp-modal .modal-title { font-weight: 700; color: var(--lp-navy); font-size: 1.15rem; }
.lp-modal .modal-body { padding: 22px 24px 26px; }
.lp-modal .btn-close { filter: none; }
.lp-slide { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; min-height: 150px; padding: 8px 4px 34px; }
.lp-slide .lp-ic { width: 60px; height: 60px; font-size: 1.6rem; margin: 0; }
.lp-slide h3 { font-size: 1.15rem; font-weight: 700; color: var(--lp-navy); margin: 4px 0 8px; }
.lp-slide p { font-size: .94rem; line-height: 1.65; color: var(--lp-text); }
.lp-slide small { display: block; margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--lp-blue); text-transform: uppercase; letter-spacing: .08em; }
.lp-modal .carousel-indicators { margin-bottom: 0; }
.lp-modal .carousel-indicators [data-bs-target] { background-color: var(--lp-navy); width: 22px; height: 4px; border-radius: 2px; }
.lp-modal .accordion { --bs-accordion-bg: #fff; --bs-accordion-color: var(--lp-ink); --bs-accordion-border-color: var(--lp-line); --bs-accordion-active-bg: #f3f6fa; --bs-accordion-active-color: var(--lp-navy); --bs-accordion-btn-color: var(--lp-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(31, 111, 191, .3); }
.lp-modal .accordion-button { font-weight: 700; font-family: inherit; }
.lp-modal .accordion-body { color: var(--lp-text); font-size: .93rem; line-height: 1.65; }
.lp-slide-ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.lp-slide-ctrl button { border: 1px solid var(--lp-line); background: #fff; color: var(--lp-navy); border-radius: 999px; width: 42px; height: 42px; display: grid; place-items: center; }
.lp-slide-ctrl button:hover { background: var(--lp-soft); }

/* ---------- Animations (Motion, static/js/landing-motion.js) ----------
   États de départ seulement sous html.lp-motion (posée avant le rendu si
   l'appareil accepte le mouvement) : sans JS, tout reste visible. */
[data-anim="bar"] { transform-origin: 0 50%; }
.lp-motion .lp [data-anim]:not([data-anim-done]),
.lp-motion .lp-header:not([data-anim-done]),
.lp-motion .lp-hero-photo,
.lp-motion .lp-hero-bg,
.lp-motion .lp-badge-outline,
.lp-motion .lp-hero-lead,
.lp-motion .lp-hero-actions,
.lp-motion .lp-hero-note,
.lp-motion .lp-phone-body,
.lp-motion .lp-phone-shadow,
.lp-motion .lp-ph-anim,
.lp-motion .lp-script { opacity: 0; }
.lp-motion .lp-line > span { transform: translateY(110%); }
.lp-motion .lp-hero-tri { transform: scaleX(0); }
.lp-motion .lp-hero-photo img { position: relative; top: -80px; height: calc(100% + 80px); }
.lp-motion .lp-cta-skyline { right: -60px; }
html.lp-motion { scroll-behavior: smooth; }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 1439.98px) {
  .lp-phone { transform: scale(.86); top: 46px; right: 38px; }
  .lp-script { right: 238px; }
}
@media (max-width: 1379.98px) {
  .lp-logo .logo-tag { font-size: .66rem; }
  .lp-nav a { padding: 10px 7px; font-size: .84rem; }
  .lp-header-actions { margin-left: 8px; gap: 10px; }
}
@media (max-width: 1339.98px) {
  .lp-phone { transform: scale(.82); top: 44px; right: 37px; }
  .lp-script { right: 226px; font-size: 2.05rem; }
  .lp-header-in { gap: 14px; }
  .lp-nav a { padding: 10px 6px; font-size: .82rem; }
  .lp-header .lp-btn { padding: 10px 16px; font-size: .82rem; }
  .lp-header-actions { gap: 8px; margin-left: 4px; }
  .lp-agents { font-size: .84rem; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .lp-header .lp-logo .logo-tag { display: none; }
}
@media (max-width: 1199.98px) {
  .lp-nav, .lp-header-actions { display: none; }
  .lp-burger { display: grid; place-items: center; }
  .lp-header.is-open .lp-nav, .lp-header.is-open .lp-header-actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin: 0;
  }
  .lp-header.is-open .lp-header-in { flex-wrap: wrap; padding-bottom: 16px; }
  .lp-header.is-open .lp-header-actions { gap: 10px; padding-top: 8px; border-top: 1px solid var(--lp-line); }
  .lp-header.is-open .lp-nav a { padding: 12px 10px; }
  .lp-logo .logo-tag { display: block; }
  .lp-why-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-why-intro { grid-column: span 3; }
  .lp-steps-grid, .lp-admins-grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-script { display: none; }
  .lp-hero { min-height: 0; }
  .lp-hero::before { content: none; }
  .lp-hero-bg img { object-position: 50% 30%; }
  .lp-hero-bg::after { background: rgba(8, 30, 58, .58); }
  .lp-hero-tri { display: none; }
  .lp-hero-photo {
    position: relative; inset: auto; width: 100%; max-width: none; height: clamp(380px, 62vw, 620px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  .lp-hero-photo img { object-position: 40% 20%; }
  .lp-motion .lp-hero-photo img { top: -60px; height: calc(100% + 60px); }
  .lp-phone { display: none; }
  .lp-hero-in { min-height: 0; margin-top: -48px; padding-top: 0; padding-bottom: 52px; }
  .lp-human { grid-template-columns: 38% 62%; }
  .lp-human-in { padding: 40px; gap: 28px; }
  .lp-trio-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .lp-track { grid-column: span 2; padding-right: 0; }
  .lp-faq-col { border-left: 0; padding: 0; }
  .lp-quote { margin-left: 0; }
}
@media (max-width: 991.98px) {
  .lp-steps-row { grid-template-columns: 1fr; gap: 14px; }
  .lp-arrow { transform: rotate(90deg); }
  .lp-admin-cards { grid-template-columns: 1fr 1fr; }
  .lp-human { grid-template-columns: 1fr; }
  .lp-human-photo { min-height: 260px; }
  .lp-human-in { grid-template-columns: 1fr; padding: 40px 24px; }
  .lp-human-list { padding-left: 0; border-left: 0; }
  .lp-cta-in { flex-direction: column; align-items: flex-start; }
  .lp-cta .lp-btn { margin-right: 0; }
  .lp-cta-skyline { width: 100%; opacity: .55; }
  .lp-footer-top { grid-template-columns: 1fr; text-align: left; }
  .lp-footer-nav { justify-content: flex-start; }
  .lp-footer-made { text-align: left; }
}
@media (max-width: 767.98px) {
  .lp-why-grid { grid-template-columns: 1fr 1fr; }
  .lp-why-intro { grid-column: span 2; }
  .lp-admin-cards { grid-template-columns: 1fr; }
  .lp-trio-grid { grid-template-columns: 1fr; }
  .lp-track { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .lp-track-img { width: 100%; max-width: 360px; }
  .lp-logo .logo-tag { display: none; }
}
@media (max-width: 575.98px) {
  .lp-container { padding: 0 16px; }
  .lp-why-grid { grid-template-columns: 1fr; }
  .lp-why-intro { grid-column: auto; }
  .lp-hero-actions { gap: 14px; }
  .lp-hero-actions .lp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
}

.modal-backdrop { --bs-backdrop-bg: #071a33; --bs-backdrop-opacity: .6; }