/* =========================================================
   LA PIEUVRE - HOME
   Cotes reprises de la maquette Figma, frame Home (19:2), 1440 x 5060
   Le canevas #lp-content est plafonne a 1440 et centre :
   toutes les valeurs ci-dessous sont donc les valeurs Figma exactes.
   ========================================================= */

/* ---------- HERO ----------
   bloc x23 y18 1395x647 r20 | contenu x80 | sur-titre y230 | H1 y278 | bouton y515 */
.lp-hero {
  position: relative;
  background: var(--jaune-pale);
  width: calc(100% - 46px);
  margin: 18px auto 0;
  border-radius: 20px;
  padding: 212px 57px 102px;
  /* Pas de overflow:hidden : la vague doit deborder sous le bloc (effet maquette).
     Le debord lateral et superieur est rattrape par #lp-content. */
}
.lp-hero__vague {
  position: absolute;
  top: -49px;
  right: -174px;
  width: 1292px;
  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.lp-hero__inner { position: relative; z-index: 2; }
.lp-hero__kicker {
  font-family: var(--font-texte);
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 18px;
}
.lp-hero__title {
  font-size: 59px;
  line-height: 63px;
  max-width: 899px;
  margin-bottom: 76px;
}

/* ---------- BANDEAU LOGOS ----------
   y780, 7 blocs 149x71, pas de 217 (gap 68), premier a x-11 */
.lp-logos {
  margin-top: 60px;
  /* clip et non hidden : le bandeau ne capte pas la molette. */
  overflow-x: clip;
}
.lp-logos__track {
  display: flex;
  align-items: center;
  gap: 120px;
  width: max-content;
  /* La duree est calculee cote PHP selon le nombre de logos : vitesse constante. */
  animation: lp-defile var(--lp-defile-duree, 90s) linear infinite;
}
.lp-logos:hover .lp-logos__track { animation-play-state: paused; }
.lp-logos__item {
  flex: 0 0 149px;
  width: 149px;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.lp-logos__item img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.lp-logos__item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes lp-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-logos__track { animation: none; }
}

/* ---------- EXPERTISES ----------
   panneau x55 y974 1330x736 r20 fond bleu-clair | contenu a 80.6 du bord */
.lp-expertises { margin-top: 65px; }
.lp-expertises__panel {
  position: relative;
  width: calc(100% - 110px);
  margin: 0 auto;
  background: var(--bleu-clair);
  border-radius: 20px;
  padding: 117px 0 53px;
  overflow: hidden;
}
/* Le cadre est incline (6.81deg comme dans Figma) et la photo est contre-pivotee
   a l'interieur pour rester droite. Le cadre epouse le ratio de la photo chargee :
   seule la rotation rogne un peu les bords, plus rien n'est recadre de force.
   La zone cale le bas du cadre a 346px du haut du panneau, comme dans Figma :
   le cadre grandit vers le haut et se fait couper par le bord du bloc bleu. */
.lp-expertises__zone-visuel {
  position: absolute;
  top: 0;
  right: -28.5px;
  width: 616.5px;
  height: 346px;
  z-index: 1;
}
.lp-expertises__visuel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 616.5px;
  height: auto;
  min-height: 380px;
  max-height: 620px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 4px 4px 22px rgba(0, 0, 0, .25);
  transform: rotate(6.81deg);
  transform-origin: bottom right;
}
.lp-expertises__visuel img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Recouvrement minimal pour que la rotation ne laisse aucun coin vide. */
  width: 111%;
  height: 114%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) rotate(-6.81deg);
}
.lp-expertises__intro {
  position: relative;
  z-index: 2;
  padding: 0 80.6px;
  max-width: 634px;
  margin-bottom: 109px;
}
.lp-expertises__intro h2 { font-size: 45px; line-height: 1.15; margin-bottom: 20px; }
.lp-expertises__intro p { font-size: 18px; line-height: 1.55; }

.lp-expertises__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 31px;
  padding: 0 45.5px;
}
/* Les cartes sont legerement pivotees dans la maquette : on ne fait tourner
   que le fond blanc, le texte reste droit. */
.lp-expertise-card {
  position: relative;
  min-height: 251px;
  padding: 31px 26px 26px;
  transition: transform .25s ease;
}
.lp-expertise-card:hover { transform: scale(1.03); z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .lp-expertise-card:hover { transform: none; }
}
.lp-expertise-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blanc);
  border-radius: 20px;
  box-shadow: 3px 4px 22px rgba(0, 0, 0, .25);
  z-index: -1;
}
.lp-expertise-card:nth-child(1)::before { transform: rotate(-1.27deg); }
.lp-expertise-card:nth-child(2)::before { transform: rotate(0.82deg); }
.lp-expertise-card:nth-child(3)::before { transform: rotate(-1.26deg); }
.lp-expertise-card h3 {
  font-family: var(--font-texte);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  margin: 21px 0 0;
}
.lp-expertise-card p {
  font-size: 18px;
  line-height: 1.4;
  margin-top: 21px;
}
.lp-expertise-card__link {
  display: inline-block;
  font-family: var(--font-texte);
  font-size: 18px;
  font-weight: 600;
  margin-top: 21px;
}
.lp-expertise-card__link:hover { text-decoration: underline; }

/* ---------- TITRE DE SECTION (sur-titre + H2 centres) ---------- */
.lp-section-head { text-align: center; }
.lp-section-head .lp-kicker-plain {
  display: block;
  font-family: var(--font-texte);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}
.lp-section-head h2 { font-size: 45px; line-height: 1.15; }

/* ---------- CAS CLIENTS ----------
   vague x-196 y1758 | sur-titre y1799 | cartes y1961 (1020 centre) */
.lp-cases {
  position: relative;
  padding-top: 89px;
}
.lp-cases__vague {
  position: absolute;
  left: -196px;
  top: 48px;
  width: 1155px;
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.lp-cases > .lp-section-head,
.lp-cases > .lp-cases__grid,
.lp-cases > .lp-cases__cta { position: relative; z-index: 2; }

.lp-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 41px;
  width: calc(100% - 420px);
  margin: 59px auto 0;
}
/* Carte cas client, commune a toute la vitrine (accueil, pages Expertises,
   archive). Cotes du gabarit : 350x402, visuel 280 arrondi en haut,
   bandeau blanc 125 arrondi en bas, pastille jaune posee sur le visuel. */
.lp-case-card {
  position: relative;
  display: block;
  height: 402px;
  border-radius: 20px;
  box-shadow: 3px 4px 22px rgba(0, 0, 0, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-case-card:hover {
  transform: scale(1.05);
  box-shadow: 3px 6px 28px rgba(0, 0, 0, .2);
  z-index: 2;
}
.lp-case-card[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lp-case-card:hover { transform: none; }
}
.lp-case-card__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  height: 280px;
  padding: 18px 22px 0;
  background: var(--gris-clair);
  background-size: cover;
  background-position: center;
  border-radius: 20px 20px 0 0;
}
.lp-case-card__media .lp-pill {
  padding: 1px 12px;
  min-height: 22px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.lp-case-card__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 277px;
  height: 125px;
  padding: 33px 22px 0;
  background: var(--blanc);
  border-radius: 0 0 20px 20px;
  color: var(--marine);
}
.lp-case-card__title {
  display: block;
  font-family: var(--font-texte);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}
/* Le nom du client respire sous le nom du projet. */
.lp-case-card__client {
  display: inline-block;
  margin-top: 8px;
  font-style: italic;
  font-weight: 500;
}

.lp-cases__cta {
  width: calc(100% - 420px);
  margin: 30px auto 0;
  text-align: right;
}

/* ---------- TEMOIGNAGES ----------
   sur-titre y2489 | cartes y2615, 316x321 r20 */
.lp-testi {
  position: relative;
  z-index: 1;
  margin-top: 142px;
}
.lp-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  width: calc(100% - 420px);
  margin: 23px auto 0;
}
/* Zone rendue par le plugin d avis Google */
.lp-testi__plugin {
  width: calc(100% - 420px);
  margin: 23px auto 0;
}

/* ---------- DERRIERE LA PIEUVRE ----------
   blob x119 y3029 464x501 | bloc bleu x179 y3152 1102x358 r20
   photo x370 y3179 218x343 | texte x640 y3230 l553 */
.lp-about {
  position: relative;
  margin-top: 93px;
  padding-top: 123px;
}
.lp-about__inner {
  position: relative;
  width: calc(100% - 338px);
  min-height: 358px;
  margin: 0 auto;
  padding: 60px 6% 60px calc(17.3% + 270px);
  background: var(--bleu-clair);
  border-radius: 20px;
  display: flex;
  align-items: center;
}
.lp-about__blob {
  position: absolute;
  left: -60px;
  top: -123px;
  width: 464px;
  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.lp-about__photo {
  position: absolute;
  left: 17.3%;
  top: auto;
  bottom: -12px;
  width: 218px;
  height: 343px;
  border-radius: 10px;
  object-fit: cover;
  z-index: 2;
}
.lp-about__text {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 620px;
  margin: 0 auto;
}
.lp-about__text h2 {
  font-size: 45px;
  line-height: 1.15;
  margin-bottom: 35px;
}
.lp-about__text p { font-size: 18px; line-height: 1.55; margin-bottom: 27px; }
.lp-about__link {
  font-family: var(--font-texte);
  font-size: 18px;
  font-weight: 600;
}
.lp-about__link:hover { text-decoration: underline; }

/* ---------- BLOG ----------
   bandeau pleine largeur y3640 h745 | sur-titre y3709 | cartes y3854 */
.lp-blog {
  background: var(--bleu-clair);
  margin-top: 130px;
  padding: 69px 0 210px;
}
.lp-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  width: calc(100% - 420px);
  margin: 42px auto 0;
}
.lp-blog-card { display: block; }
.lp-blog-card:hover .lp-blog-card__media { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .lp-blog-card:hover .lp-blog-card__media { transform: none; }
}
/* Image mise en avant, ou motif genere comme sur la page Blog.
   Meme format que les vignettes d'articles : large et peu haut. */
.lp-blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 516 / 232;
  background: var(--bleu-clair);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 3px 4px 22px rgba(0, 0, 0, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-blog-card:hover .lp-blog-card__media { box-shadow: 3px 6px 28px rgba(0, 0, 0, .2); }
.lp-blog-card__media img,
.lp-blog-card__media svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-blog-card__title {
  display: block;
  font-family: var(--font-texte);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  margin-top: 18px;
}
.lp-blog-card__date {
  display: block;
  margin-top: 14px;
  font-family: var(--font-texte);
  font-size: 15px;
  line-height: 20px;
  color: rgba(27, 41, 88, .6);
}

/* ---------- CTA ----------
   bloc x114 y4262 1212x242 r20, chevauche le bandeau blog
   titre x198 y4319 | bouton y4399 | visuel x896 y4336 379x234 */
.lp-cta { position: relative; margin-top: -123px; }
.lp-cta__block {
  position: relative;
  width: calc(100% - 228px);
  height: 242px;
  margin: 0 auto;
  background: linear-gradient(198deg, #FECA01 0%, #FFF1BD 100%);
  border-radius: 20px;
}
.lp-cta__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  z-index: 1;
}
.lp-cta__vague {
  position: absolute;
  left: 33.6%;
  top: 0;
  width: auto;
  max-width: none;
  height: 100%;
  /* Blanc a 57% comme dans Figma : la vague eclaircit le degrade sans le masquer. */
  opacity: .57;
  z-index: 1;
}
.lp-cta__inner {
  position: absolute;
  left: 6.9%;
  top: 57px;
  right: 40%;
  z-index: 4;
}
.lp-cta__inner h2 { font-size: 45px; line-height: 1.15; margin-bottom: 22px; }
/* Place dans .lp-cta__clip : il est donc coupe par le bas du bandeau. */
.lp-cta__visuel {
  position: absolute;
  right: 50px;
  top: 74px;
  width: 379.4px;
  height: auto;
  min-height: 200px;
  max-height: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 4px 4px 24px rgba(0, 0, 0, .25);
  transform: rotate(5deg);
  transform-origin: center top;
  z-index: 3;
}
.lp-cta__visuel img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Recouvrement minimal pour que la rotation ne laisse aucun coin vide. */
  width: 106%;
  height: 115%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) rotate(-5deg);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .lp-hero { padding: 170px 40px 70px; }
  .lp-hero__title { font-size: 46px; line-height: 50px; }
  .lp-expertises__zone-visuel { display: none; }
  .lp-expertises__intro { max-width: none; padding: 0 40px; margin-bottom: 60px; }
  .lp-expertises__grid { padding: 0 40px; gap: 24px; }
  .lp-cases__grid,
  .lp-cases__cta,
  .lp-testi__grid,
  .lp-blog__grid,
  .lp-testi__plugin { width: calc(100% - 80px); }
  .lp-about__inner { width: calc(100% - 80px); min-height: 0; }
  .lp-about__blob { display: none; }
  .lp-about__photo { position: static; }
  .lp-about__inner { display: grid; grid-template-columns: 218px 1fr; gap: 40px; padding: 40px; align-items: center; }
  .lp-cta__block { width: calc(100% - 80px); height: auto; }
  .lp-cta__inner { position: static; width: auto; padding: 40px; }
  .lp-cta__visuel { display: none; }
}

@media (max-width: 940px) {

  /* --- Hero --- */
  .lp-hero {
    width: calc(100% - 32px);
    margin: 12px auto 0;
    padding: 120px 24px 56px;
    border-radius: 16px;
    /* Sur mobile la vague reste dans le bloc : sinon elle recouvre
       le bandeau de logos et le bloc suivant. */
    overflow: hidden;
  }
  .lp-hero__vague {
    top: -30px;
    right: -35%;
    width: 155%;
    height: auto;
  }
  .lp-hero__kicker { font-size: 20px; line-height: 24px; margin-bottom: 12px; }
  .lp-hero__title { font-size: 34px; line-height: 38px; margin-bottom: 32px; }

  /* --- Bandeau de logos --- */
  .lp-logos { margin-top: 36px; overflow-x: clip; }
  .lp-logos__track { gap: 56px; }

  /* --- Largeurs de blocs alignees sur celle du hero --- */
  .lp-expertises { margin-top: 40px; }
  .lp-expertises__panel { width: calc(100% - 32px); padding: 48px 0 40px; }
  .lp-expertises__intro { padding: 0 24px; margin-bottom: 40px; }
  .lp-expertises__grid { padding: 0 24px; }
  .lp-cases__grid,
  .lp-cases__cta,
  .lp-testi__grid,
  .lp-testi__plugin,
  .lp-blog__grid { width: calc(100% - 32px); }
  .lp-about__inner { width: calc(100% - 32px); padding: 32px 24px; }
  .lp-cta__block { width: calc(100% - 32px); height: auto; min-height: 0; }
  /* Le texte et le bouton sont dans le flux : le bandeau s'ajuste a eux. */
  .lp-cta__inner {
    position: relative;
    z-index: 4;
    left: auto;
    top: auto;
    right: auto;
    padding: 30px 22px;
  }
  .lp-cta__inner h2 { font-size: 24px; line-height: 30px; margin-bottom: 20px; }
  .lp-cta__inner .lp-btn { display: inline-block; }
  .lp-cta__clip { z-index: 0; }
  .lp-cta__vague { opacity: .4; }

  /* --- Grilles en une colonne --- */
  .lp-expertises__grid,
  .lp-cases__grid,
  .lp-testi__grid,
  .lp-blog__grid { grid-template-columns: 1fr; }

  /* --- Typographie --- */
  .lp-section-head h2,
  .lp-expertises__intro h2,
  .lp-about__text h2 { font-size: 32px; line-height: 38px; }
  .lp-section-head .lp-kicker-plain { font-size: 16px; line-height: 24px; }

  /* --- Divers --- */
  .lp-about { margin-top: 50px; padding-top: 0; }
  /* La photo revient en bas du bloc, collee au fond bleu. */
  .lp-about__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  .lp-about__text { order: 1; margin-bottom: 28px; }
  .lp-about__photo {
    order: 2;
    width: 218px;
    height: auto;
    margin: 0 auto -1px;
    border-radius: 10px 10px 0 0;
  }
  .lp-cases { padding-top: 50px; }
  .lp-cases__vague { display: none; }
  .lp-testi { margin-top: 60px; }
  .lp-blog { margin-top: 50px; padding: 50px 0 80px; }
  .lp-cta { margin-top: 40px; }
}