/* ============================================================================
   NIRVANA CHARTER — Pages annexes SEO (landing pages statiques)
   Réutilise les variables de charte de styles.css. Mise en page légère et
   lisible, sans dépendance JS (contenu 100 % indexable).
   ========================================================================== */
.lp { color: var(--ink); background: var(--sand-50); }
.lp .container { width: min(1080px, 92%); margin: 0 auto; }

/* --- En-tête simple --- */
.lp-header { position: sticky; top: 0; z-index: 50; background: rgba(251,247,240,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sand-200); }
.lp-header__in { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; gap: 1rem; }
.lp-header__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--ocean-800); }
.lp-header__brand img { height: 38px; width: auto; }
.lp-header__nav { display: flex; align-items: center; gap: 1.2rem; }
.lp-header__nav a { color: var(--ocean-800); font-weight: 600; font-size: .92rem; }
.lp-header__nav a:hover { color: var(--lagoon-600); }
@media (max-width: 640px) { .lp-header__nav a.lp-hide-sm { display: none; } .lp-header__brand span { display: none; } }

/* --- Hero --- */
.lp-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.lp-hero__bg { position: absolute; inset: 0; }
.lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,50,82,.35) 0%, rgba(8,26,45,.82) 100%); }
.lp-hero__in { position: relative; z-index: 2; padding: 3.5rem 0; }
.lp-hero__eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: .8rem; font-weight: 800; color: var(--lagoon-100); margin: 0 0 .8rem; }
.lp-hero h1 { font-family: var(--font-serif); font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.06; margin: 0 0 1rem; font-weight: 700; text-shadow: 0 4px 22px rgba(0,0,0,.4); }
.lp-hero__lead { font-size: clamp(1.02rem, 2.2vw, 1.25rem); max-width: 640px; color: rgba(255,255,255,.92); margin: 0 0 1.6rem; }

/* --- Boutons (réutilise .btn de styles.css, on ajoute quelques variantes) --- */
.lp-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Sections de contenu --- */
.lp-section { padding: 3.2rem 0; }
.lp-section--alt { background: #fff; }
.lp-prose { max-width: 760px; }
.lp-prose h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--ocean-800); margin: 0 0 .8rem; line-height: 1.12; }
.lp-prose h3 { font-size: 1.18rem; color: var(--ocean-700); margin: 1.8rem 0 .5rem; }
.lp-prose p { font-size: 1.04rem; line-height: 1.72; color: var(--ink); margin: 0 0 1rem; }
.lp-prose ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.lp-prose li { margin: 0 0 .5rem; line-height: 1.6; }
.lp-prose strong { color: var(--ocean-800); }
.lp-prose a { color: var(--lagoon-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lp-lead { font-size: 1.16rem; line-height: 1.7; color: var(--muted); max-width: 760px; margin: 0 0 1.5rem; }

/* --- Grille de points forts --- */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.lp-card { background: var(--sand-50); border: 1px solid var(--sand-200); border-radius: var(--r-md); padding: 1.4rem 1.5rem; }
.lp-section--alt .lp-card { background: var(--sand-50); }
.lp-card__ico { font-size: 1.8rem; margin-bottom: .5rem; }
.lp-card h3 { font-size: 1.05rem; color: var(--ocean-800); margin: 0 0 .4rem; }
.lp-card p { font-size: .95rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* --- Bandeau CTA --- */
.lp-band { background: linear-gradient(135deg, var(--ocean-800), var(--lagoon-600)); color: #fff; text-align: center; padding: 3rem 0; }
.lp-band h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .6rem; }
.lp-band p { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 1.4rem; font-size: 1.05rem; }

/* --- Pages liées --- */
.lp-related { padding: 3rem 0; }
.lp-related h2 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--ocean-800); margin: 0 0 1.2rem; text-align: center; }
.lp-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.lp-related__card { display: block; background: #fff; border: 1px solid var(--sand-200); border-radius: var(--r-md); padding: 1.2rem 1.3rem; color: var(--ocean-800); box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.lp-related__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-related__card strong { display: block; font-size: 1.05rem; margin-bottom: .3rem; }
.lp-related__card span { color: var(--muted); font-size: .92rem; }

/* --- Fil d'ariane --- */
.lp-breadcrumb { font-size: .85rem; color: var(--muted); padding: 1rem 0 0; }
.lp-breadcrumb a { color: var(--lagoon-600); }

/* --- Pied de page --- */
.lp-footer { background: var(--ocean-900); color: rgba(255,255,255,.75); padding: 2.4rem 0; text-align: center; font-size: .9rem; }
.lp-footer a { color: rgba(255,255,255,.9); font-weight: 600; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center; margin: 0 0 1rem; }
.lp-footer__credit { margin-top: 1rem; font-size: .72rem; opacity: .45; }
.lp-footer__credit a { color: inherit; font-weight: 600; }
.lp-footer__credit a:hover { opacity: 1; text-decoration: underline; }