/* =========================================================
   LA PIEUVRE - ARTICLE DE BLOG
   Contenu issu de l'editeur natif : les styles s'appliquent aux balises
   produites par WordPress, sans champ a remplir.
   ========================================================= */

.lp-ar { --lp-ar-marge: 150px; }

/* ---------- Titre de l'article ----------
   Pas de visuel : la page s'ouvre directement sur le titre. */
/* Le titre est cale sur la colonne de contenu, a 564 du bord. */
.lp-ar-tete {
  padding: 168px 90px 0 564px;
}
.lp-ar-tete__date {
  font-family: var(--font-texte);
  font-size: 16px;
  line-height: 22px;
  color: rgba(27, 41, 88, .7);
}
.lp-ar-tete h1 {
  margin-top: 12px;
  max-width: 786px;
  font-size: 50px;
  line-height: 56px;
}

/* ---------- Corps : sommaire a gauche, article a droite ----------
   Encart 386 a x51, colonne de contenu 786 a x564. */
.lp-ar-corps { padding: 0 0 110px; }
.lp-ar-corps__inner {
  display: grid;
  grid-template-columns: 386px 1fr;
  gap: 127px;
  align-items: start;
  padding: 0 90px 0 51px;
  /* L'encart remonte a hauteur du titre. */
  margin-top: -122px;
}
/* Un seul ecart, applique entre toutes les zones de l'article. */
/* La colonne de contenu reste a droite, sommaire ou non. */
.lp-ar-contenu {
  grid-column: 2;
  --lp-ar-ecart: 30px;
  padding-top: calc(122px + var(--lp-ar-ecart));
}

/* Le sommaire suit la lecture. */
.lp-ar-somm {
  position: sticky;
  top: 130px;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  padding: 41px 29px;
  background: var(--jaune-pale);
  border-radius: 20px;
}
/* Retour vers la liste des articles, en tete de l'encart. */
.lp-ar-somm__retour {
  display: inline-block;
  margin-bottom: 34px;
  padding: 9px 20px;
  border-radius: 10px;
  background: var(--marine);
  color: var(--blanc);
  font-family: var(--font-texte);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  transition: transform .2s ease;
}
.lp-ar-somm__retour:hover { transform: scale(1.05); }

.lp-ar-somm__titre {
  font-family: var(--font-texte);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 30px;
}
.lp-ar-somm__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: somm;
}
.lp-ar-somm__liste li { counter-increment: somm; }
.lp-ar-somm__liste li + li { margin-top: 4px; }
.lp-ar-somm__liste a {
  display: block;
  position: relative;
  padding: 4px 10px 4px 30px;
  border-radius: 10px;
  font-family: var(--font-texte);
  font-size: 18px;
  line-height: 29px;
  color: var(--marine);
  transition: background .2s ease, color .2s ease;
}
.lp-ar-somm__liste a::before {
  content: counter(somm) '.';
  position: absolute;
  left: 10px;
  font-weight: 600;
}
.lp-ar-somm__liste a:hover { background: rgba(255, 255, 255, .6); }
.lp-ar-somm__liste a.is-active {
  background: var(--jaune);
  color: var(--marine);
  font-weight: 600;
}

/* ---------- Contenu de l'article ---------- */
.lp-ar-contenu {
  min-width: 0;
  font-size: 18px;
  line-height: 29px;
}
.lp-ar-contenu > *:first-child { margin-top: 0; }
.lp-ar-contenu > * + * { margin-top: var(--lp-ar-ecart); }
/* Une liste appartient au paragraphe qui l'annonce : elle le suit de pres. */
.lp-ar-contenu > ul,
.lp-ar-contenu > ol { margin-top: 8px; }
.lp-ar-contenu > * { margin-bottom: 0; }
.lp-ar-contenu p { margin: 0 0 var(--lp-ar-ecart); }

.lp-ar-contenu h2 {
  margin: var(--lp-ar-ecart) 0;
  font-family: var(--font-titre);
  font-size: 35px;
  line-height: 44px;
  /* L'ancre ne passe pas sous l'en-tete fixe. */
  scroll-margin-top: 100px;
}
.lp-ar-contenu h3 {
  margin: var(--lp-ar-ecart) 0;
  font-family: var(--font-texte);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
}
.lp-ar-contenu h4 {
  margin: var(--lp-ar-ecart) 0;
  font-family: var(--font-texte);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.lp-ar-contenu a {
  color: var(--marine);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-ar-contenu strong { font-weight: 600; }

/* Listes a puces jaunes, comme sur les pages Expertises. */
.lp-ar-contenu ul { list-style: none; margin: 0 0 var(--lp-ar-ecart); padding: 0; }
.lp-ar-contenu ul li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 6px;
}
.lp-ar-contenu ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 100px;
  background: var(--jaune);
}
.lp-ar-contenu ol { margin: 0 0 var(--lp-ar-ecart) 22px; }
.lp-ar-contenu ol li { margin-bottom: 6px; }

/* Visuels : arrondis, jamais recadres. */
.lp-ar-contenu img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}
.lp-ar-contenu figure { margin: var(--lp-ar-ecart) 0; }
.lp-ar-contenu figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 21px;
  color: rgba(27, 41, 88, .7);
}

.lp-ar-contenu blockquote {
  margin: var(--lp-ar-ecart) 0;
  padding: 26px 30px;
  background: var(--bleu-clair);
  border-radius: 20px;
  font-size: 20px;
  line-height: 30px;
}
.lp-ar-contenu blockquote p:last-child { margin-bottom: 0; }

.lp-ar-contenu hr {
  margin: var(--lp-ar-ecart) 0;
  border: 0;
  border-top: 1px solid rgba(27, 41, 88, .15);
}

/* ---------- A lire aussi ---------- */
.lp-ar-suite {
  padding: 70px 0 90px;
  background: var(--bleu-clair);
}
/* Les vignettes se detachent du fond bleu. */
.lp-ar-suite .lp-bl-card__cover {
  box-shadow: 3px 4px 22px rgba(0, 0, 0, .14);
  transition: box-shadow .25s ease;
}
.lp-ar-suite .lp-bl-card__lien:hover .lp-bl-card__cover {
  box-shadow: 3px 6px 28px rgba(0, 0, 0, .2);
}

.lp-ar-suite .lp-bl-grille__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 45px;
  row-gap: 46px;
  width: calc(100% - 2 * var(--lp-ar-marge));
  margin: 46px auto 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .lp-ar { --lp-ar-marge: 40px; }
  .lp-ar-tete { padding: 130px 40px 0; }
  .lp-ar-corps__inner { margin-top: 0; }
  .lp-ar-contenu { padding-top: 0; }
  .lp-ar-tete h1 { font-size: 38px; line-height: 44px; }
  .lp-ar-corps { padding: 40px 0 80px; }
  .lp-ar-corps__inner { grid-template-columns: 300px 1fr; gap: 50px; padding: 0 40px; }
  .lp-ar-contenu h2 { font-size: 30px; line-height: 38px; }
}

@media (max-width: 940px) {
  .lp-ar { --lp-ar-marge: 16px; }
  .lp-ar-tete { padding: 110px 16px 0; }
  .lp-ar-tete h1 { font-size: 30px; line-height: 36px; }
  .lp-ar-corps__inner { grid-template-columns: 1fr; gap: 34px; padding: 0 16px; }
  .lp-ar-contenu { grid-column: 1; }
  .lp-ar-somm { padding: 26px 22px; }
  /* Le sommaire repasse dans le flux, en tete d'article. */
  .lp-ar-somm { position: static; max-height: none; }
  .lp-ar-contenu h2 { font-size: 26px; line-height: 32px; scroll-margin-top: 100px; }
  /* Les vignettes se detachent du fond bleu. */
.lp-ar-suite .lp-bl-card__cover {
  box-shadow: 3px 4px 22px rgba(0, 0, 0, .14);
  transition: box-shadow .25s ease;
}
.lp-ar-suite .lp-bl-card__lien:hover .lp-bl-card__cover {
  box-shadow: 3px 6px 28px rgba(0, 0, 0, .2);
}

.lp-ar-suite .lp-bl-grille__inner { grid-template-columns: 1fr; }
}