/* ====================================
   LANDING PAGES
   ==================================== */

/* === LP BODY === */
.lp-body {
  font-family: var(--font-text);
  color: var(--text);
  background: var(--white);
}

/* ==== BORDER COLORS ==== */
.border-orange:hover {
  border-color: rgba(236, 101, 48, 0.50);

}

.border-green:hover {
  border-color: rgba(109, 176, 74, 0.50);
}

.border-blue:hover {
  border-color: rgba(91, 127, 184, 0.50);
}




/* ====================================
   ICON CIRCLES - Universel toutes LP
   ==================================== */

/* Conteneur circulaire de base */
.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Variantes de couleurs */
.icon-circle--orange {
  background: var(--secondary);
  color: var(--white);
}

.icon-circle--blue {
  background: var(--blue-card);
  color: var(--white);
}

.icon-circle--green {
  background: var(--primary);
  color: var(--white);
}

.icon-circle--dark {
  background: var(--dark);
  color: var(--white);
}

.icon-circle--white {
  background: var(--white);
  color: var(--blue-card);
  border: 2px solid var(--blue-card);
}

/* Animation hover dans les cards */
.lp-avantages__card:hover .icon-circle,
.lp-avantages-basket__card:hover .icon-circle {
  transform: scale(1.1);
}

/* Sizing des SVG dans les icon-circle */
.icon-circle .icon {
  width: 32px;
  height: 32px;
}

/* Icônes FILL (balance, rocket, star, etc.) */
.icon-circle svg[fill="currentColor"] {
  fill: currentColor;
}

/* Icônes STROKE (grid, clock outline, etc.) */
.icon-circle svg[fill="none"] {
  stroke: currentColor;
  stroke-width: 2;
}

/* ====================================
   LP HEADER & NAVIGATION - MOBILE FIRST
   ==================================== */

/* Header principal */
.lp-header {
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1003;
  transition: all 0.3s ease;
}

/* Header au scroll */
.lp-header.scrolled {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* Container header */
.lp-header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  max-width: 1250px;
  margin: 0 auto;
  gap: 1rem;
}

/* Logo - Base mobile */
.lp-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto; /* Ne grandit ni ne rétrécit */
  margin-top: 15px;
  
}

.lp-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.lp-header__logo:hover {
  opacity: 0.8;
}

/* NAV DESKTOP – Base mobile : cachée */
.lp-header__nav {
  display: none;
}

/* Liens navigation */
.lp-header__link {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}

.lp-header__link:hover,
.lp-header__link.active {
  color: var(--secondary);
}

/* Soulignement au hover */
.lp-header__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width 0.3s ease;
}

.lp-header__link:hover::after,
.lp-header__link.active::after {
  width: 100%;
}

/* Bouton CTA desktop - Base mobile : caché */
.lp-header__link--cta {
  display: none;
}

/* ====================================
   MENU BURGER MOBILE - Base mobile : visible
   ==================================== */

.lp-burger-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 25px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1005;
  position: relative;
  flex-shrink: 0; /* Ne se compresse pas */
}

.lp-burger-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--dark);
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animation burger → X */
.lp-burger-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.lp-burger-toggle.active span:nth-child(2) {
  opacity: 0;
}

.lp-burger-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Menu mobile overlay */
.lp-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}

.lp-mobile-menu.active {
  pointer-events: auto;
  visibility: visible;
}

/* Overlay sombre */
.lp-mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lp-mobile-menu.active .lp-mobile-menu-overlay {
  opacity: 1;
}

/* Contenu slide-in */
.lp-mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 400px;
  height: 100%;
  background: var(--white);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 5rem 2rem 2rem;
  gap: 1.5rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.lp-mobile-menu.active .lp-mobile-menu-content {
  transform: translateX(0);
}

/* Liens menu mobile */
.lp-mobile-menu-link {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  display: block;
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.lp-mobile-menu-link:hover,
.lp-mobile-menu-link:active {
  background: rgba(0, 0, 0, 0.05);
  color: var(--secondary);
}

.lp-mobile-menu-link:active {
  border-bottom-color: var(--secondary);
}

/* CTA dans le menu mobile */
.lp-mobile-menu-cta {
  margin-top: 2rem;
  width: 100%;
  justify-content: center;
}





/* ====================================
   LP SECTIONS (Structure de base)
   ==================================== */

.lp-hero,
.lp-offers,
.lp-examples,
.lp-why,
.lp-faq,
.lp-form {
  padding: 4rem 2rem;
}

#avantages.lp-avantages {
  padding-top: 2rem;
}

/* Container général LP */
.lp-container {
  max-width: 1200px;
  margin: 0 auto;
}



/* ====================================
   LP HERO – base mobile
   ==================================== */

.lp-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background-color: var(--light);
}

.lp-hero__picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.lp-hero__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay sombre pour lisibilité */
.lp-hero__overlay {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(59, 22, 6, 0.45) 0%,
    rgba(0, 0, 0, 0.45) 100%
  );
  
}

/* Contenu Hero */
.lp-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  text-align: center;
  color: var(--white);
}

/* Titres – base mobile (≈ ancien bloc 480px) */
.lp-hero__title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2rem;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.lp-hero__title-light {
  display: block;
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.lp-hero__title-emphasis {
  display: block;
  font-weight: 700;
  font-size: 1.6rem;
}

.lp-hero__title-emphasis em {
  font-style: italic;
  font-weight: 400;
}

.lp-hero__title-strong {
  display: block;
  font-weight: 800;
  font-size: 1.9rem;
  margin-top: 0.5rem;
}

/* Sous-titre */
.lp-hero__subtitle {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  font-weight: 400;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  display: none;
}

/* Badges – base mobile : colonne */
.lp-hero__badges {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  
}

.lp-hero__badge {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.9rem;
  border-radius: 8px;
  color: var(--white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: default;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

/* Couleurs des badges */
.lp-hero__badge--orange { background: var(--secondary); }
.lp-hero__badge--blue   { background: var(--blue-roi); }
.lp-hero__badge--green  { background: var(--primary); }

/* Groupe de CTA – base mobile : colonne */
.lp-hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.lp-hero__cta {
  width: 100%;
  max-width: 300px;
  text-align: center;
}

/* CTA secondaire (Découvrir nos offres) */
.lp-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem 2rem;
  background: var(--white);
  color: var(--dark);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.lp-hero__cta-secondary:hover {
  background: var(--light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.lp-hero__cta-secondary svg {
  transition: transform 0.3s ease;
}

.lp-hero__cta-secondary:hover svg {
  transform: translateX(5px);
}


/* ====================================
   LP AVANTAGES - SYSTÈME UNIVERSEL V2
   Template réutilisable toutes LP
   ==================================== */

/* ===== BLOC INTRO (Titre + Texte) ===== */

.lp-avantages,
.lp-offers-renovation {
  padding: 4rem 1.5rem;
  background: var(--light);
}

.lp-avantages__title {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 1rem;
}

.lp-avantages__divider {
  width: 40%;
  height: 2px;
  background: var(--blue-card);
  opacity: 0.5;
  margin: 0 auto 2.5rem;
}

.lp-avantages__intro {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto 3rem;
}

.lp-avantages__intro strong {
  font-weight: 600;
  color: var(--dark);
}

/* ===== CARDS UNIVERSELLES ===== */

#offres.section-white {
  background: var(--white);
}

.lp-avantages__card {
  background: var(--white);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.lp-avantages__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Variante bordure (pour layout split) */
.lp-avantages__card--bordered {
  border: 2px solid #ededee;
  padding: 1.5rem;
  box-shadow: none;
}

.lp-avantages__card--bordered:hover {
 /* border-color: var(--blue-roi);*/
  box-shadow: 0 6px 20px rgba(91, 127, 184, 0.15);
  transform: translateY(-4px);
}

/* Variante highlight (Tennis - card centrale bleue) */
.lp-avantages__card--highlight {
  background: var(--blue-card);
  color: var(--white);
  padding: 2.8rem 1.7rem;
  transform: none;
}

.lp-avantages__card--highlight:hover {
  transform: translateY(-5px);
}

.lp-avantages__card--highlight .icon-circle {
  background: var(--white);
  color: var(--blue-card);
}

.lp-avantages__card--highlight .lp-avantages__card-title,
.lp-avantages__card--highlight .lp-avantages__card-text {
  color: var(--white);
}

/* Titres */
.lp-avantages__card-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
  color: var(--dark);
}

.lp-avantages__card-title--compact {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Descriptions */
.lp-avantages__card-text,
.lp-avantages__card-desc {
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

.lp-avantages__card-desc--compact {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ===== LAYOUT GRID (Tennis style - 3 cards) ===== */

.lp-avantages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* ===== LAYOUT SPLIT (Basket style - Photo + Cards) ===== */

.lp-avantages__wrapper {
  background: var(--light);
  padding: 2rem 1.5rem;
  margin-top: 2rem;
}

.lp-avantages__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.lp-avantages__split-photo {
  width: 100%;
  border: 12px solid white;
   overflow: hidden;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lp-avantages__split-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.lp-avantages__cards-grid {
  display: grid;
  gap: 1.5rem;
}

.lp-avantages__cards-grid--2x2 {
  grid-template-columns: 1fr;
}




/* ====================================
   LP OFFRES ENTRETIEN / RENOVATION
   ==================================== */

.lp-offers-entretien,
.lp-offers {
  padding: 4rem 1.5rem;
  background: var(--white);
}

/* Titre */
.lp-offers__title {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 1rem;
}

/* Ligne décorative */
.lp-offers__divider {
  width: 30%;
  height: 2px;
  background: var(--blue-card);
  opacity: 0.50;
  margin: 0 auto 2rem;
}

/* Intro */
.lp-offers__intro {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text);
  max-width: 800px;
  margin: 0 auto 3rem;
}


/* Grid cartes – base mobile */
.lp-offers__grid {
  display: grid;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;   /* pour aligner les hauteurs */
}

.lp-offers__grid--two,
.lp-offers__grid--three {
  grid-template-columns: 1fr;   /* 1 colonne sur mobile */
  max-width: 420px;
  margin: 0 auto;
}

/* === CARTE OFFRE === */




/* Cartes */
.lp-offers__card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;      /* occupe toute la cellule de grid */
}

.lp-offers__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Header avec image */
.lp-offers__card-header {
  position: relative;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem 2rem 2rem;

  }

/* Badge type surface */
.lp-offers__badge {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  padding: 0.7rem 2rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.lp-offers__badge--orange {
  background: var(--secondary);
}

.lp-offers__badge--green {
  background: var(--primary);
}

.lp-offers__badge--blue {
  background: var(--blue-roi);
}

.lp-offers__badge--gazon {
  display: block;
  padding: 0.20rem;
  margin-top: 0.75rem;
  border-radius: 6px;
  background: var(--primary);
}


/* Titre carte */
.lp-offers__card-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Body carte */
.lp-offers__card-body {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Liste features */
.lp-offers__features {
  list-style: none;
  margin-bottom: 1rem;
}

/* Checkbox*/

 .lp-offers__features li.checkbox{
  position: relative;
  padding-left: 32px; /* place pour le rond */
  list-style: none;
}
.lp-offers__features li.checkbox::before {
  content: "✓";              /* ou "\2713" */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 20px;
  text-align: center;
  color: #fff;
  font-weight: 600;
}

/* Checkbox orange pour carte Béton Poreux */
.lp-offers__features.badge--orange li.checkbox::before {
  background-color: var(--secondary);  /* Orange */
}

/* Checkbox bleue pour carte Gazon */
.lp-offers__features.badge--green li.checkbox::before {
  background-color: var(--primary);  /* vert */
}

/* Checkbox bleue pour carte Résine Acrylique */
.lp-offers__features.badge--blue li.checkbox::before {
  background-color: var(--blue-roi);  /* Bleu */
}


.lp-offers__features li {
  font-family: var(--font-text);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  padding: 1rem 0;  /* Padding pour espacer */
  display: flex;
  align-items: flex-start;  /* Centre verticalement */
  /*justify-content: center;   Centre horizontalement */
  gap: 0.7rem;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;  /* Ligne séparation gris clair */
}

.lp-offers__features li:last-child {
  border-bottom: none;  /* Pas de ligne sur le dernier élément */
}


/* Prix */
.lp-offers__price-label {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: var(--secondary);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 1rem;
  width: fit-content;
  align-self: center;
}

.lp-offers__price-label--green {
  background: var(--primary);  /* Vert au lieu d'orange */
}

.lp-offers__price {
  font-family: var(--font-title);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark);
  text-align: center;
  margin-bottom: 0.5rem;
}

.lp-offers__price-ht {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-left: 0.3rem;
}

.lp-offers__price-note {
  font-family: var(--font-text);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* CTA */
.lp-offers__cta {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.lp-offers__cta--orange {
  background: var(--secondary);
}

.lp-offers__cta--green {
  background: var(--primary);
}

.lp-offers__cta--blue {
  background: var(--blue-roi);
}

.lp-offers__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

/* Disclaimer */
.lp-offers__disclaimer {
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
  color: #999;
  text-align: center;
}

/* Badge prix bleu (résine acrylique) */
.lp-offers__price-label--blue {
  background: var(--blue-roi);  /* Bleu */
}

/* Sous-titre dans le header */
.lp-offers__card-subtitle, h3.lp-offers__card-subtitle  {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--white);
  text-align: center;
  margin-top: 1rem;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  max-width: 280px;
}

/* CTA bleu */
.lp-offers__cta--blue {
  background: var(--blue-roi);
}
/* ============================================
   STYLES POUR IMAGES CONVERTIES (bg → img)
   ============================================ */


/* Image de fond positionnée en absolu */
.lp-offers__card-bg
 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Overlay sombre (remplace background-blend-mode) */
.lp-offers__card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
}

/* Contenu au-dessus de l'image */
.lp-offers__card-header > *:not(img) {
  position: relative;
  z-index: 2;
}




/* ====================================
   LP EXEMPLES AVANT/APRÈS – base mobile
   ==================================== */

.lp-examples {
  padding: 4rem 1.5rem;
  background: var(--white);
}

/* Titre */
.lp-examples__title {
  font-family: var(--font-title);
  font-size: 1.8rem;           /* plus petit sur mobile */
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 1rem;
}

/* Ligne décorative */
.lp-examples__divider {
  width: 30%;
  height: 2px;
  background: var(--blue-card);
  opacity: 0.50;
  margin: 0 auto 2rem;
}

/* Intro */
.lp-examples__intro {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text);
  max-width: 800px;
  margin: 0 auto 1.5rem;
}

.lp-examples__intro:last-of-type {
  margin-bottom: 3rem;
}

.lp-examples__intro strong {
  font-weight: 600;
  color: var(--dark);
}

/* Grid : 1 colonne en base mobile */
.lp-examples__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Carte flip */
.lp-examples__card {
  perspective: 1000px;
  height: 300px;              
  isolation: isolate;
}


/* === CARTE FLIP === */

.lp-examples__card {
  perspective: 1000px;  /* Perspective 3D pour le flip */
  height: 350px;
  isolation: isolate;
}

.lp-examples__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Flip au hover */
.lp-examples__card:hover .lp-examples__card-inner {
  transform: rotateX(180deg);  /* Flip vertical */
}

/* Face commune */
.lp-examples__card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  

  
  /* Contenu centré */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Face avant (Avant rénovation) */
.lp-examples__card-front {
  z-index: 2;
}

/* Face arrière (Après rénovation) */
.lp-examples__card-back {
  transform: rotateX(180deg);  /* Déjà retournée */
}

/* Titre carte */
.lp-examples__card-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Icône flèche (seulement sur face avant) */
.lp-examples__icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  color: var(--white);
  font-size: 2rem;
  animation: bounce 2s infinite;
}

.lp-examples__icon-arrow {
  width: 70%;
  height: 70%;
  display: block;
  
}


/* Animation bounce de l'icône */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Image de fond pour cartes flip */
.lp-examples__card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Overlay sombre (remplace background-blend-mode) */
.lp-examples__card-face::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

/* Contenu par-dessus l'image */
.lp-examples__card-face > *:not(img) {
  position: relative;
  z-index: 2;
}

/* ====================================================
   SECTION SHOWCASE/REALISATION - Timeline -avant/après
======================================================== */

.lp-showcase {
  padding: 3rem 2rem;
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

.lp-showcase__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  color: #1a202c;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-showcase__intro {
  max-width: 700px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #4a5568;
}

/* Grille principale */
.lp-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Item (étape) */
.lp-showcase__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*.lp-showcase__badge {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #EC6530 0%, #d45728 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(236, 101, 48, 0.3);
  margin: 0 auto 1rem;
  z-index: 2;
}*/

.lp-showcase__badge {
  position: absolute;
 width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #EC6530 0%, #d45728 100%);
  color: white;
  border-radius: 50%;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(236, 101, 48, 0.3);
  z-index: 10;
  margin: 0; /* Supprime margin-bottom actuel */
}

.lp-showcase__content {
  flex: 1;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-showcase__content:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.lp-showcase__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.lp-showcase__subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 1.5rem 1.5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lp-showcase__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
  margin: 0 1.5rem 1.5rem;
}






/* ====================================
   LP RESEAU - BASE MOBILE
   ==================================== */

.lp-why {
  padding: 4rem 1.5rem;
  background: var(--light);
}

/* Titre */
.lp-why__title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 1rem;
}

/* Ligne décorative */
.lp-why__divider {
  width: 30%;
  height: 2px;
  background: var(--blue-card);
  opacity: 0.50;
  margin: 0 auto 2rem;
}

/* Intro */
.lp-why__intro {
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto 4rem;
}

.lp-why__intro strong {
  font-weight: 600;
  color: var(--dark);
}

/* Base mobile : 1 colonne */
.lp-why__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1250px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* Image gauche */
.lp-why__image {
  width: 100%;
  height: 100%;  /* Prend toute la hauteur */
}

.lp-why__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Remplit l'espace */
  display: block;
}

/* Contenu droite */
.lp-why__text {
  padding: 2rem;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.lp-why__subtitle {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

/* Description */
.lp-why__description {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 2rem;
}

/* Liste arguments */
.lp-why__features {
  list-style: none;
  margin-bottom: 2rem;
}

.lp-why__features li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.lp-why__features .bg-blue svg {
  color: var(--blue-roi);
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 30px;
  height: 30px;
}

.lp-why__features strong {
  font-weight: 600;
  color: var(--dark);
}

/* Citation */
.lp-why__quote {
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--blue-card);
}

/* CTA */
.lp-why__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  color: #E91E63;  /* Rose */
  text-decoration: none;
  transition: all 0.3s ease;
}

.lp-why__cta:hover {
  color: #C2185B;  /* Rose foncé */
  gap: 1rem;  /* Effet de décalage de la flèche */
}

.lp-why__cta i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.lp-why__cta:hover i {
  transform: translateX(5px);
}





/* ====================================
   LP FAQ – base mobile
   ==================================== */

.lp-faq {
  padding: 4rem 1.5rem;
  background: var(--white);
}

/* Titre */
.lp-faq__title {
  font-family: var(--font-title);
  font-size: 1.8rem;              /* plus petit sur mobile */
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.3;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Ligne décorative */
.lp-faq__divider {
  width: 30%;
  height: 2px;
  background: var(--blue-card);
  opacity: 0.50;
  margin: 0 auto 3rem;
}

/* Conteneur accordéon */
.lp-faq__accordion {
  max-width: 900px;
  margin: 0 auto;
}

/* Item FAQ */
.lp-faq__item {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Question (bouton) – base mobile */
.lp-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
  background: #F5F5F5;
  border: none;
  padding: 1.2rem 1.5rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover question (desktop, mais on laisse la règle, elle gêne pas sur mobile) */
.lp-faq__question:hover {
  background: var(--secondary);
  color: var(--white);
}

.lp-faq__question:hover .lp-faq__icon {
  color: var(--white);
}

/* Question active (ouverte) */
.lp-faq__question[aria-expanded="true"] {
  background: var(--secondary);
  color: var(--white);
}

.lp-faq__question[aria-expanded="true"] .lp-faq__icon {
  color: var(--white);
  transform: rotate(180deg);
}

/* Icône flèche */
.lp-faq__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background-color: var(--secondary); /* fond orange par défaut */
  color: #fff;                        /* chevron blanc */
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* Chevron ↓, parfaitement centré et symétrique */
.lp-faq__icon::before {
  content: "";
  position: absolute;
  width: 0.7rem;   /* longueur des branches */
  height: 0.7rem;  /* même valeur → chevron bien symétrique */
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 2px;
  transform: translate(-50%, -55%) rotate(45deg);
  top: 50%;
  left: 50%;
  transition: inherit;
}
/* Hover : inversion couleurs */
.lp-faq__question:hover .lp-faq__icon,
.lp-faq__question:focus-visible .lp-faq__icon {
  background-color: #fff;
  color: var(--secondary);
}

/* Question ouverte : flèche vers le haut + couleurs inversées */
.lp-faq__question[aria-expanded="true"] .lp-faq__icon {
  transform: rotate(180deg);          /* pointe vers le haut */
  background-color: #fff;
  color: var(--secondary);
}


/* Réponse (cachée) */
.lp-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background: var(--white);
  border: 1px solid #e5e5e5;
  border-top: none;
}

/* Réponse ouverte */
.lp-faq__item.active .lp-faq__answer {
  max-height: 1000px;
}

/* Contenu réponse */
.lp-faq__answer-content {
  padding: 1.5rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
}

.lp-faq__answer-content p {
  margin-bottom: 1rem;
}

.lp-faq__answer-content p:last-child {
  margin-bottom: 0;
}

.lp-faq__answer-content strong {
  font-weight: 600;
  color: var(--dark);
}


/* ====================================
   LP FORMULAIRE DEVIS – base mobile
   ==================================== */

.lp-form {
  padding: 4rem 1.5rem;
  background: var(--light);
}

/* Titre principal */
.lp-form__title {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

/* Sous-titre */
.lp-form__subtitle {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  color: var(--dark);
  margin-bottom: 1rem;
}

/* Ligne décorative */
.lp-form__divider {
  width: 30%;
  height: 2px;
  background: var(--blue-card);
  opacity: 0.50;
  margin: 0 auto 2rem;
}

/* Intro */
.lp-form__intro {
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

.lp-form__intro strong {
  font-weight: 600;
  color: var(--dark);
}

/* Container formulaire – mobile */
.lp-form__container {
  max-width: 750px;
  margin: 0 auto;
  background: var(--white);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Titre formulaire */
.lp-form__form-title {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Formulaire */
.lp-form__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Ligne – base mobile : 1 colonne */
.lp-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Champ */
.lp-form__field input,
.lp-form__form textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 0.95rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.lp-form__field input:focus,
.lp-form__form textarea:focus {
  outline: none;
  border-color: var(--blue-card);
  box-shadow: 0 0 0 3px rgba(91, 127, 184, 0.1);
}

/* Champs obligatoires */
.lp-form__required {
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: #999;
  font-style: italic;
  margin: -0.5rem 0 0;
}

/* Section */
.lp-form__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Label */
.lp-form__label {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
}

/* Radio group – mobile : en colonne */
.lp-form__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Radio */
.lp-form__radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.lp-form__radio input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Checkboxes – base mobile : 1 colonne */
.lp-form__checkbox-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.lp-form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.lp-form__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.lp-form__submit {

font-size: 0.9rem;
}



/* ===============================
   RESPONSIVE : MQ - BREAKPOINTS
   =============================== */
/*====================================
    ≥ 480PX : 
 ==================================== */

@media (min-width: 480px) {

 /* Exemples Avant /Apres */
  .lp-examples__card {
    height: 350px;          /* ancien comportement “par défaut” */
  }

  .lp-examples__card-title {
    font-size: 1.5rem;      /* valeur que tu avais en desktop */
  }
}



/*====================================
    ≥ 768PX : Tablette portrait
 ==================================== */

@media (min-width: 768px) {

    /* --- HEADER--- */
  .lp-header__content {
    padding: 1rem 2rem;
    gap: 2rem;
  }

  .lp-header__logo img {
    height: 48px;
  }

   /* --- HERO--- */

   .lp-hero {
    min-height: 550px;
    padding: 4rem 1.5rem;
  }

  .lp-hero__title {
    font-size: 2.2rem;
  }

  .lp-hero__title-light {
    font-size: 1.6rem;
  }

  .lp-hero__title-emphasis {
    font-size: 2rem;
  }

  .lp-hero__title-strong {
    font-size: 2.3rem;
  }

  .lp-hero__subtitle {
    display: block;
    font-size: 1.1rem;
  }

  /* Badges en ligne */
  .lp-hero__badges {
    
    justify-content: center;
    gap: 1.5rem;
  }

  .lp-hero__badge {
    font-size: 1.1rem;
    padding: 0.95rem 2rem;
    width: auto;
    max-width: none;
  }

  /* CTA group en ligne */
  .lp-hero__cta-group {
    flex-direction: row;
    justify-content: center;
  }

  .lp-hero__cta {
    width: auto;
    max-width: none;
  }

  /* --- AVANTAGES--- */
 .lp-avantages,
  .lp-offers-renovation {
    padding: 5rem 2rem;
  }
  
  .lp-avantages__title {
    font-size: 2.3rem;
    padding: 0 5rem;
  }
  
  .lp-avantages__intro {
    font-size: 1.05rem;
    margin-bottom: 3.5rem;
  }
  
  /* Cards */
  .lp-avantages__card {
    padding: 3rem 2rem;
  }
  
  .lp-avantages__card--bordered {
    padding: 1.75rem 1.25rem;
  }
  
  .lp-avantages__card--highlight {
    padding: 3.2rem 2rem;
  }
  
  .lp-avantages__card-title--compact {
    font-size: 1.2rem;
  }
  
  .lp-avantages__card-desc--compact {
    font-size: 0.95rem;
  }
  
  /* Grid Tennis : 2 colonnes sur tablet */
  .lp-avantages__grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 2.5rem;
  }
  
  /* 3e card centrée sur 2e ligne */
  .lp-avantages__grid .lp-avantages__card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 420px;
    justify-self: center;
  }
  
  /* Split Basket */
  .lp-avantages__wrapper {
    padding: 2rem;
  }
  
  .lp-avantages__cards-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  

    /* --- OFFRES ENTRETIEN / RENOVATION--- */

  .lp-offers-entretien,
  .lp-offers {
    padding: 5rem 2rem;
  }

  .lp-offers__title {
    font-size: 2.2rem;
  }

  .lp-offers__intro {
    font-size: 1.05rem;
    margin-bottom: 3.5rem;
  }

  /* Entretien : 2 cartes centrées */
  .lp-offers__grid--two {
    grid-template-columns: repeat(2, minmax(260px, 360px));
    justify-content: center;
    max-width: 900px;
  }

  /* Rénovation : 2 colonnes (3ᵉ carte sur 2ᵉ ligne) */
  .lp-offers__grid--three {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    max-width: 1000px;
    margin: auto;
  }
 /* 3e card centrée sur la 2e ligne */
  .lp-offers__grid--three .lp-offers__card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 420px;
    justify-self: center;
  }

   /* --- EX. AVANT/ APRES--- */

   .lp-examples {
    padding: 5rem 2rem;
  }

  .lp-examples__title {
    font-size: 2rem;
  }

  .lp-examples__intro {
    font-size: 1.05rem;
    margin-bottom: 3.5rem;
  }

  /* 2 colonnes sur tablette */
  .lp-examples__grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 3rem;
    max-width: 900px;
  }

  /* 3e card centrée sur la 2e ligne */
  .lp-examples__grid .lp-examples__card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 480px;
    width: 100%;
    justify-self: center;
  }

  /***SHOWCASE - REALISATION***/

  .lp-showcase {
    padding: 4rem 0;
  }

  .lp-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  /* 3ème item centré sur 2 colonnes */
  .lp-showcase__item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 500px;
    justify-self: center;
  }

  .lp-showcase__badge {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .lp-showcase__subtitle {
    font-size: 1.5rem;
  }

  /* --- FAQ--- */

   .lp-faq {
    padding: 5rem 2rem;
  }

  .lp-faq__title {
    font-size: 2rem;
  }

  .lp-faq__divider {
    margin-bottom: 3.5rem;
  }

  .lp-faq__question {
    font-size: 1.05rem;
    padding: 1.5rem 2rem;
    gap: 1.5rem;
  }

  .lp-faq__answer-content {
    padding: 2rem;
  }

   /* --- FORM--- */

.lp-form {
    padding: 5rem 2rem;
  }

  .lp-form__title {
    font-size: 1.8rem;
  }

  .lp-form__subtitle {
    font-size: 1.2rem;
  }

  .lp-form__intro {
    margin-bottom: 3rem;
  }

  .lp-form__container {
    padding: 2.5rem;
  }

  /* 2 colonnes dès 768px pour limiter la hauteur */
  .lp-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .lp-form__checkbox-group {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-form__radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  /*---Btn Submit---*/

  .lp-form__submit {

    font-size: 1.1rem;
}

}



/*====================================
    ≥ 992PX : Tablette landscape / petit desktop
 ==================================== */


@media (min-width: 992px) {

    /* --- RESEAU--- */

    .lp-why {
    padding: 5rem 2rem;
  }

  .lp-why__title {
    font-size: 2.5rem;
  }

  .lp-why__content {
    grid-template-columns: 45% 55%;
    gap: 0;
  }

  .lp-why__text {
    padding: 3rem;
  }

  .lp-why__subtitle {
    font-size: 1.5rem;
  }
   /*====AVANTAGES=====*/
  /* Grid Tennis : 3 COLONNES */
  .lp-avantages__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Annuler le centrage de la 3e card */
  .lp-avantages__grid .lp-avantages__card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }

   /* Card centrale (highlight) légèrement surélevée */
  .lp-avantages__card--highlight {
    transform: scale(1.05) translateY(-10px);  
  }

  .lp-avantages__card--highlight:hover {
    transform: scale(1.05) translateY(-15px); 
  }

  /*SECTION SHOWCASE/REALISATION */

  .lp-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* Annule le centrage du 3ème item */
  .lp-showcase__item:nth-child(3) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }

  .lp-showcase__details {
    grid-template-columns: repeat(4, 1fr);
  }


}
 /*====================================
    ≥ 1200PX : Desktop standard
 ==================================== */


@media (min-width: 1200px) {

  /* --- ICONS-- */

  .icon-circle {
    width: 72px;
    height: 72px;
  }
  
  .icon-circle .icon {
    width: 36px;
    height: 36px;
  }
  
  .icon-circle svg[fill="none"] {
    stroke-width: 2.5;
  }

 /* --- HEADER--- */

  .lp-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
  }

   /* Logo - Fixe, ne bouge pas */
  .lp-header__logo {
    flex: 0 0 auto;
    
  }

  .lp-header__logo img {
    height: 48px;
  }

/* Nav - Flexible, occupe l'espace disponible */
  .lp-header__nav {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1 1 auto; /* Grandit, peut rétrécir */
    justify-content: center; /* Centre le contenu */
    min-width: 0; /* Permet le rétrécissement */
  }

/* CTA - Fixe, protégé */
  .lp-header__link--cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
    background: var(--secondary);
    color: var(--white);
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex: 0 0 auto; /* Ne grandit ni ne rétrécit */
    
  }


   .lp-header__link {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem 0.6rem;
    white-space: nowrap; /* Empêche retour ligne */
  }

  /* CTA - Fixe, protégé */
  .lp-header__link--cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    background: var(--secondary);
    color: var(--white);
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex: 0 0 auto; /* Ne grandit ni ne rétrécit */
    
  }

  .lp-header__link--cta.active,
  .lp-header__link--cta:hover {

  color: var(--white) !important;
}

   .lp-header__link--cta:hover {
    background: var(--blue-card);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 127, 184, 0.2);;
  }

  .lp-header__link--cta::after {
    display: none; /* Pas de soulignement sur le CTA */
  }

  .lp-burger-toggle,
  .lp-mobile-menu {
    display: none;
  }

  /* --- HERO--- */

  .lp-hero {
    min-height: 650px;
    padding: 3rem 2rem;
  }

  .lp-hero__title {
    font-size: 3rem;
  }

  .lp-hero__title-light {
    font-size: 2.2rem;
  }

  .lp-hero__title-emphasis {
    font-size: 2.8rem;
  }

  .lp-hero__title-strong {
    font-size: 3.2rem;
  }

  .lp-hero__subtitle {
    font-size: 1.3rem;
    margin-bottom: 3rem;
    padding: 0 4rem;
  }

  /* AVANTAGES */

  /* Split Basket */
  .lp-avantages__wrapper {
    padding: 2rem;
  }
  
  .lp-avantages__split {
    grid-template-columns: 40% 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  
  .lp-avantages__split-photo {
    height: 100%;
  }
  
  .lp-avantages__split-photo img {
    height: 100%;
    object-fit: cover;
  }
  
  .lp-avantages__cards-grid {
    gap: 2rem;
  }
  
  .lp-avantages__card--bordered {
    padding: 1.75rem 1.25rem;
  
  }
  /* --- OFFRES ENTRETIEN / RENOVATION--- */
.lp-offers-entretien,
  .lp-offers {
    padding: 6rem 2rem;
  }

  .lp-offers__grid {
    gap: 2.5rem;
  }

   
   .lp-offers__grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }

  /* On remet la 3e card à sa place “normale” */
  .lp-offers__grid--three .lp-offers__card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }

    /* --- EXEMPLES AVANT / APRÈS --- */

  .lp-examples {
    padding: 6rem 2rem;
  }

  .lp-examples__title {
    font-size: 2.2rem;
  }

  /* 3 colonnes desktop */
  .lp-examples__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1400px;
  }
  .lp-examples__grid .lp-examples__card:nth-child(3) {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  .lp-examples__intro:last-of-type {
    margin-bottom: 4rem;
  }

  /***SHOWCASE - REALISATION***/

   .lp-showcase__badge {
    width: 70px;
    height: 70px;
    font-size: 1.75rem;
  }

  .lp-showcase__subtitle {
    font-size: 1.75rem;
  }

  .lp-showcase__text {
    font-size: 1rem;
  }

   /* --- RESEAU--- */
 .lp-why {
    padding: 6rem 2rem;
  }

  .lp-why__title {
    font-size: 2.2rem;
  }

  /* --- FAQ --- */

  .lp-faq {
    padding: 6rem 2rem;
  }

  .lp-faq__title {
    font-size: 2.2rem;
  }

  .lp-faq__divider {
    margin-bottom: 4rem;
  }

   /* --- FORM--- */

   .lp-form {
    padding: 6rem 2rem;
  }

  .lp-form__title {
    font-size: 1.9rem;
  }

  .lp-form__intro {
    margin-bottom: 3.5rem;
  }

  .lp-form__container {
    padding: 3rem;
  }

}

 /*====================================
    ≥ 1500PX : Large screen
 ==================================== */


@media (min-width: 1500px) {

 /* --- HEADER--- */

   .lp-header__content {
    max-width: 1500px;
    padding: 1rem 2rem;
    gap: 2rem;
  }

  .lp-header__nav {
    gap: 1.5rem; /* Plus d'espace entre liens */
  }

   .lp-avantages__cards-grid {
    gap: 2.5rem;
  }
  
  .lp-avantages__card--bordered {
    padding: 2rem 1.5rem;
  }

  
}