/* =========================================================
   LA PIEUVRE — CSS GLOBAL
   Variables de charte, base typographique, composants partagés
   ========================================================= */

:root {
  --marine: #1B2958;
  --jaune: #FECA01;
  --blanc: #FFFFFF;
  --creme: #FFF9E6;
  --jaune-pale: rgba(255, 241, 189, 0.6);  /* fond du bloc hero (Figma) */
  --bleu-clair: #DCE6F2;   /* fond bloc expertises */
  --gris-clair: #D9D9D9;   /* placeholders images */
  --marine-90: rgba(27, 41, 88, 0.9);

  --font-titre: 'Abril Fatface', Georgia, serif;
  --font-texte: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1200px;
  --gutter: 80px;           /* marge de contenu depuis le bord de page (Figma) */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --radius-bloc: 20px;      /* grands blocs de section (hero, CTA) */
  --bloc-marge: 23px;       /* marge blanche autour des grands blocs */
}

/* Fond de page blanc : les grands blocs colores sont poses dessus */
html body,
html {
  background: var(--blanc);
}

/* ---- Canevas : mise en page pleine largeur, les blocs gardent
   les marges laterales de la maquette (23px hero, 55px sections) ---- */
#lp-content {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* clip et non hidden : rogne le debord sans creer de zone de defilement,
     ce qui bloquait la molette sur les pages longues. */
  overflow-x: clip;
}

/* ---- Base ---- */
.lp-page * { box-sizing: border-box; }

.lp-page {
  font-family: var(--font-texte);
  color: var(--marine);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  overflow-x: clip;
}

.lp-page :where(h1, h2, h3, h4) {
  font-family: var(--font-titre);
  color: var(--marine);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.lp-page :where(p) { margin: 0; }
/* Aucun texte ne doit deborder de son bloc de fond. */
.lp-page :where(h1, h2, h3, h4, p, li, a) { overflow-wrap: break-word; }
.lp-page :where(a) { color: inherit; text-decoration: none; }
.lp-page :where(img) { max-width: 100%; display: block; }

/* ---- Conteneur ---- */
.lp-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Boutons ---- */
.lp-btn {
  display: inline-block;
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  padding: 13px 32px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease;
}
.lp-btn--marine,
.lp-page a.lp-btn--marine {
  background: var(--marine);
  color: var(--blanc);
}
.lp-btn--jaune,
.lp-page a.lp-btn--jaune {
  background: var(--jaune);
  color: var(--marine);
}
/* Survol : le bouton grossit legerement, les couleurs ne bougent pas. */
.lp-btn:hover,
.lp-btn:focus-visible {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn:hover,
  .lp-btn:focus-visible { transform: none; }
}


/* ---- Sur-titres (kicker) ---- */
.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp-kicker::before {
  content: "";
  width: 26px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--jaune);
  display: inline-block;
}

/* ---- Badge pilule (numéro de carte) ---- */
.lp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jaune);
  color: var(--marine);
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: 18px;
  line-height: 19px;
  padding: 3.5px 11.6px;
  border-radius: 100px;
  width: fit-content;
}

/* ---- Titre de section centré avec sur-titre ---- */
.lp-section-head {
  text-align: center;
}
.lp-section-head .lp-kicker-plain {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: 15px;
  color: var(--marine);
  display: block;
  margin-bottom: 6px;
}
.lp-section-head h2 {
  font-size: clamp(26px, 3.5vw, 40px);
}
/* =========================================================
   GARDE-FOU DEFILEMENT
   Un conteneur en overflow hidden capte la molette et bloque le
   defilement de la page. Les blocs qui rognent un debord lateral
   doivent utiliser clip, jamais hidden.
   ========================================================= */
html, body { overscroll-behavior-y: auto; }