/* =========================================================
   LA PIEUVRE - FICHE CAS CLIENT
   Cotes relevees dans l'export du gabarit (frame 1440 x 5781).
   ========================================================= */

/* ---------- Bandeau haut : carte bleue 1395x629 a x22 y17 ----------
   Pastilles y247, titre y306, cartouche client y460, visuel y165. */
/* Petite touche graphique dans le bandeau, derriere le titre et le visuel. */
.lp-cc-hero__vague {
  position: absolute;
  left: -70px;
  bottom: -50px;
  width: 300px;
  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.lp-cc-hero {
  position: relative;
  overflow: clip;
  width: calc(100% - 44px);
  margin: 17px auto 0;
  background: var(--bleu-clair);
  border-radius: 20px;
}
.lp-cc-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 623px;
  gap: 43px;
  align-items: start;
  padding: 110px 41px 90px 52px;
}
.lp-cc-hero__texte { min-width: 0; }
.lp-cc-hero__texte:only-child { grid-column: 1 / -1; }

.lp-cc-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.lp-cc-hero__texte h1 {                /* 56px, interligne 58, 644 de large */
  font-size: 56px;
  line-height: 58px;
  max-width: 644px;
  margin-top: 28px;
}

/* Cartouche du client : marine, texte blanc, largeur libre. */
.lp-cc-hero__client { margin-top: 30px; }
.lp-cc-hero__client span {
  display: inline-block;
  max-width: 100%;
  padding: 8px 24px;
  border-radius: 100px;
  background: var(--marine);
  color: var(--blanc);
  font-family: var(--font-texte);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.lp-cc-hero__media img {               /* 623x415 */
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
}

/* ---------- Corps : encart client a gauche, contenu a droite ---------- */
.lp-cc-corps {
  position: relative;
  padding: 90px 0 120px;               /* bandeau fin 646, encart y736 */
  overflow-x: clip;
}

.lp-cc-corps__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 386px 1fr;    /* encart x74, contenu x590 */
  gap: 130px;
  align-items: start;
  padding: 0 68px 0 74px;
}

/* ---------- Encart client (colonne jaune pale) ---------- */
/* C'est la colonne qui accompagne la lecture, bouton compris. */
.lp-cc-fiche {
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding: 40px 37px 40px;
  background: var(--jaune-pale);
  border-radius: 20px;
}
/* Retour vers la liste, au-dessus de l'encart pour l'alleger. */
.lp-cc-colonne { position: sticky; top: 130px; }
.lp-cc-retour {
  display: inline-block;
  margin-bottom: 22px;
  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-cc-retour:hover { transform: scale(1.05); }

.lp-cc-fiche__ligne {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
}
.lp-cc-fiche__ligne strong { font-weight: 700; }
.lp-cc-fiche__ligne + .lp-cc-fiche__ligne { margin-top: 30px; }
.lp-cc-fiche__presentation {
  margin-top: 22px;
  font-size: 18px;
  line-height: 25px;
}
.lp-cc-fiche__presentation p + p { margin-top: 14px; }
.lp-cc-fiche__presentation + .lp-cc-fiche__ligne { margin-top: 30px; }
.lp-cc-fiche__lien {                   /* bouton 135x36 */
  display: inline-block;
  margin-top: 40px;
  padding: 7px 16px;
  min-width: 135px;
  font-size: 18px;
  line-height: 22px;
}

/* ---------- Colonne de contenu ---------- */
/* Un seul ecart, applique entre toutes les zones du contenu. */
.lp-cc-contenu {
  min-width: 0;
  --lp-cc-ecart: 46px;
}
.lp-cc-contenu > * + * { margin-top: var(--lp-cc-ecart); }
.lp-cc-contenu__chapo {
  font-size: 18px;
  line-height: 25px;
}
.lp-cc-contenu__chapo p + p { margin-top: var(--lp-cc-ecart); }

/* Meme respiration entre chaque paragraphe. */
.lp-cc-bloc > * + * { margin-top: var(--lp-cc-ecart); }
.lp-cc-bloc > .lp-cc-bloc__medias + * { margin-top: calc(var(--lp-cc-ecart) * 1.6); }
.lp-cc-bloc h2 {                       /* 35px Abril */
  font-size: 35px;
  line-height: 44px;
}
.lp-cc-bloc__texte { font-size: 18px; line-height: 25px; }
.lp-cc-bloc__texte p + p { margin-top: var(--lp-cc-ecart); }
.lp-cc-bloc__texte h3 {                /* sous-titre facultatif */
  font-family: var(--font-texte);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  margin: var(--lp-cc-ecart) 0;
}
.lp-cc-bloc__texte ul,
.lp-cc-bloc__texte ol { margin: 14px 0 0 20px; }
.lp-cc-bloc__texte li + li { margin-top: 8px; }
.lp-cc-bloc__texte a { color: var(--marine); text-decoration: underline; }

/* Les visuels sont affiches tels quels, sans recadrage ni arrondi.
   Jusqu'a trois par paragraphe, dont la largeur se regle dans l'editeur. */
.lp-cc-bloc__medias {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  /* Plus d'air entre le texte et les visuels. */
  margin-top: calc(var(--lp-cc-ecart) * 1.6);
  margin-bottom: calc(var(--lp-cc-ecart) * 0.6);
}
.lp-cc-bloc__media {
  flex: 0 1 auto;
  width: var(--lp-cc-img, 100%);
  max-width: 100%;
  margin: 0;
}
/* Deux visuels ou plus : la gouttiere est deduite de leur largeur. */
.lp-cc-bloc__medias .lp-cc-bloc__media:not(:only-child) {
  width: calc(var(--lp-cc-img, 100%) - 16px);
}
.lp-cc-bloc__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .lp-cc-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 120px 40px 60px;
  }
  .lp-cc-hero__texte h1 { margin-top: 24px; font-size: 42px; line-height: 46px; }
  .lp-cc-hero__media img { height: 340px; }
  .lp-cc-corps { padding: 60px 0 80px; }
  .lp-cc-corps__inner {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 40px;
  }
  .lp-cc-colonne { position: static; }
  .lp-cc-fiche { max-height: none; overflow: visible; padding: 40px; }
  .lp-cc-hero__vague { width: 220px; left: -50px; bottom: -30px; }

}

@media (max-width: 940px) {
  .lp-cc-hero { width: calc(100% - 32px); }
  .lp-cc-hero__inner { padding: 100px 20px 40px; }
  .lp-cc-hero__texte h1 { font-size: 32px; line-height: 38px; }
  .lp-cc-hero__pills { gap: 12px; }
  .lp-cc-hero__vague { display: none; }
  .lp-cc-corps__inner { padding: 0 16px; }
  .lp-cc-fiche { padding: 28px 24px; }

  .lp-cc-bloc h2 { font-size: 28px; line-height: 34px; }
  .lp-cc-bloc__medias { gap: 16px; }
  .lp-cc-bloc__media,
  .lp-cc-bloc__medias .lp-cc-bloc__media:not(:only-child) { width: 100%; }
}

/* ---------- Cas clients precedents ---------- */
.lp-cc-suite {
  margin-top: 90px;
  padding: 70px 0 90px;
  background: var(--bleu-clair);
}
.lp-cc-suite__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 45px;
  row-gap: 46px;
  width: calc(100% - 300px);
  margin: 46px auto 0;
}
/* Les vignettes se detachent du fond bleu. */
.lp-cc-suite .lp-case-card { box-shadow: 3px 4px 22px rgba(0, 0, 0, .14); }

@media (max-width: 1024px) {
  .lp-cc-suite__grid { width: calc(100% - 80px); column-gap: 30px; }
}
@media (max-width: 940px) {
  .lp-cc-suite { margin-top: 60px; padding: 50px 0 60px; }
  .lp-cc-suite__grid { grid-template-columns: 1fr; width: calc(100% - 32px); }
}

/* ---------- Navigation entre les fiches ----------
   Memes boutons que ceux du carrousel des pages Expertises. */
.lp-cc-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 24px 0;
}
.lp-cc-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: var(--marine);
  color: var(--blanc);
  transition: transform .2s ease, opacity .2s ease;
}
.lp-cc-nav__btn svg { width: 22px; height: 22px; display: block; }
.lp-cc-nav__btn:hover { transform: scale(1.08); }
/* Extremites de la serie : le bouton reste en place, sans lien. */
.lp-cc-nav__btn.is-vide { opacity: .25; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-cc-nav__btn:hover { transform: none; }
}
@media (max-width: 940px) {
  .lp-cc-nav { padding-top: 10px; }
  .lp-cc-nav__btn { width: 44px; height: 44px; }
}

/* ---------- Video integree ----------
   Cadre 16:9 fluide, arrondi comme les blocs du site. */
.lp-cc-bloc__video {
  margin-top: calc(var(--lp-cc-ecart) * 1.6);
  margin-bottom: calc(var(--lp-cc-ecart) * 0.6);
}
.lp-cc-bloc__video iframe,
.lp-cc-bloc__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 20px;
}