/* ============================================================
   ÉLÉGANCE MENUISERIES — Styles principaux
   Police : Figtree (Google Fonts)
   Référence design : Paper.design / artboard 1920×1200
   ============================================================ */

/* ── Reset de base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Figtree", system-ui, sans-serif;
  background-color: #F3F0EC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   HERO SECTION
   Stratégie de layout :
   — Logo   : positionné en absolu, ancré en haut
   — Tagline: positionné en absolu, ancré en bas
   — Bloc titre+CTA : centré verticalement dans l'espace restant
     (les deux éléments forment un groupe solidaire → jamais de chevauchement)
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 580px;
  overflow: hidden;
}

/* ── Image de fond + overlay ───────────────────────────────── */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.20)),
    url("../assets/images/serene modern outdoor space@2x (2).jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ── Logo ──────────────────────────────────────────────────── */
/*
   Design : top 78.5px sur hero 1200px → 6.54%
   Largeur : 206px sur base 1920px → 10.73vw (max 206px)
*/
.hero__logo {
  position: absolute;
  top: clamp(40px, 6.54vh, 78.5px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 10.73vw, 206px);
  height: auto;
  z-index: 1;
}

/* ── Groupe titre + CTA ────────────────────────────────────── */
/*
   Dans le design (1920×1200) :
   - Titre  : top 481px, hauteur ~240px (3 lignes × 80px)
   - CTA    : top 749px, hauteur 51px
   → Centre du groupe : (481 + 800) / 2 = 640.5px / 1200 = 53.4%
   → Le groupe est centré à ~53% de la hauteur du hero.
   gap 28px entre titre et CTA.
*/
.hero__main {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.33vh, 28px);
  width: 100%;
  z-index: 1;
}

/* ── Titre principal ───────────────────────────────────────── */
/*
   Design : Figtree 75px / weight 400 / letter-spacing -0.05em / line-height 80px
   Largeur conteneur : 1097px / 1920px = 57.14vw
*/
.hero__title {
  width: min(978px, 90vw);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(47px, 3.906vw, 75px);
  font-weight: 400;
  line-height: clamp(50px, 4.167vw, 80px);
  letter-spacing: -0.05em;
  text-align: center;
  color: #ffffff;
}

/* ── Bouton CTA ────────────────────────────────────────────── */
/*
   Design : 388×51px / background #938D82 / gap interne 14px
*/
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 30px;
  height: 51px;
  background-color: #938D82;
  color: #ffffff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.hero__cta:hover {
  background-color: #7d7870;
}

.hero__cta-arrow {
  flex-shrink: 0;
  width: clamp(16px, 1.146vw, 22px);
  height: auto;
}

.hero__cta-label {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* ── Tagline bas de hero ───────────────────────────────────── */
/*
   Design : top 1063px sur 1200px → distance depuis le bas = 137px = 11.42vh
   Font : Figtree 20px / weight 400
*/
.hero__tagline {
  position: absolute;
  bottom: clamp(10px, 5vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(13px, 1.042vw, 20px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
  z-index: 1;
}

/* ============================================================
   NAVIGATION PRINCIPALE
   Design : fond #F3F0EC, items uppercase 16px Figtree,
            carré marqueur 12×12px #9E8C7D, gap 30px entre items,
            séparateur 1px #9E8C7D en bas.
   Comportement : sticky — se fixe en haut du viewport au scroll.
   ============================================================ */

.main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #F3F0EC;
  transition: box-shadow 0.25s ease;
}

/* Sticky state — pas d'ombre */
.main-nav.is-sticky {
  box-shadow: none;
}

/* Liste des items — centrée, flex row, gap 30px */
.main-nav__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
  list-style: none;
  padding: 24px 80px;
  margin: 0;
}

/* Chaque lien — flex row, carré + texte, gap 13px */
.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: #000000;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.main-nav__link:hover {
  opacity: 0.6;
}

/* Lien actif — couleur taupe */
.main-nav__link--active {
  color: #9E8C7D;
}

/* Carré marqueur 12×12px couleur #9E8C7D */
.main-nav__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: #9E8C7D;
}

/* Séparateur 1px #9E8C7D — marges 80px de chaque côté */
.main-nav__separator {
  display: block;
  width: calc(100% - 160px);
  margin: 0 80px;
  border: none;
  border-top: 1px solid #9E8C7D;
}

/* Marque mobile — masquée en desktop */
.main-nav__brand-mobile {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000000;
  letter-spacing: 0.02em;
}

/* Bouton burger — masqué en desktop */
.main-nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
}

.main-nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #000000;
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-nav__burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.main-nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}

.main-nav__burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Sticky detection via IntersectionObserver ─────────────── */
/* (voir le script en bas de page) */

/* ============================================================
   MENU LATÉRAL STICKY — droite de l'écran
   Réseaux sociaux en haut, bouton CONTACT vertical en bas
   ============================================================ */

.side-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.side-menu__socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.side-menu__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #9E8C7D;
  border-radius: 0;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.side-menu__social:hover {
  opacity: 1;
}

.side-menu__social svg {
  display: block;
}

.side-menu__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  padding: 14px 8px;
  background-color: #9E8C7D;
  color: #ffffff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.side-menu__contact:hover {
  background-color: #7d7870;
}

.side-menu__contact img {
  transform: rotate(90deg);
  flex-shrink: 0;
}

/* Masquer le menu latéral en mobile */
@media (max-width: 768px) {
  .side-menu {
    display: none;
  }
}

/* ============================================================
   COMPOSANTS PARTAGÉS — label de section + séparateur
   ============================================================ */

/*
   Label de section : carré 16px + texte 20px uppercase #998D7F
   Deux variantes : --center (centré) et --left (aligné gauche à 80px)
*/
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.section-label--center {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* --left : aligne à 80px du bord artboard
   Le padding de la section est 160px → on recule de 80px */
.section-label--left {
  margin-left: -80px;
}

.section-label__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #9E8C7D;
}

.section-label__text {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: #998D7F;
  white-space: nowrap;
}

/* Séparateur 1px #9E8C7D — dépasse du padding de 80px de chaque côté */
.section-rule {
  display: block;
  border: none;
  height: 1px;
  background-color: #9E8C7D;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   SECTION "LA PROMESSE ÉLÉGANCE"
   Design ref : label top 1439px, texte top 1520px, règle top 1999px
   ============================================================ */

.section-promesse {
  background-color: #F3F0EC;
  padding: 159px 160px 0;
}

/*
   Grande accroche : Figtree 75px / line-height 75px / letter-spacing -0.05em
   Largeur max : 1325px (design) — centrée
   margin-top : 81px (1520 - 1439)
*/
.promesse__body {
  max-width: 1325px;
  margin: 81px auto 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(47px, 3.906vw, 75px);
  font-weight: 400;
  line-height: clamp(47px, 3.906vw, 75px);
  letter-spacing: -0.05em;
  text-align: center;
  color: #000000;
  text-wrap: pretty;
}

/* Règle après le texte :
   1999 - (1520 + 300) = 179px de marge après le texte */
.section-promesse .section-rule {
  margin-top: 179px;
  margin-left: -80px;
  margin-right: -80px;
}

/* ============================================================
   SECTION "NOTRE GAMME DE MENUISERIES"
   Design ref : label top 2033px, images top 2158px
   ============================================================ */

.section-gamme {
  background-color: #F3F0EC;
  padding: 34px 160px 480px;
}

/* ── Rangée 1 : grande image | texte | petite image décalée ── */
/*
   Colonnes desktop :
   col-1 = 780px  (grande image)
   col-2 = 1fr    (texte descriptif, ~370px)
   col-3 = 370px  (petite image)
   margin-top rangée : 125px (2158 - 2033)
   offset petite image : margin-top 238px (2396 - 2158)
*/
.gamme-intro {
  display: grid;
  /* 780 : texte(≈370) : 370 — proportions exactes du design */
  grid-template-columns: 780fr 370fr 370fr;
  column-gap: 40px;
  align-items: start;
  margin-top: 125px;
}

.gamme-intro__desc {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.35;
  color: #000000;
  text-wrap: pretty;
}

/* Petite image décalée vers le bas de 238px */
.gamme-card--offset {
  margin-top: 238px;
}

/* ── Rangée 2 : 3 cartes (petite | petite | grande) ── */
/*
   Colonnes : 370px | 370px | 1fr (= 780px)
   gap : 40px
   margin-top depuis la fin de la rangée 1 : 81px
*/
.gamme-row {
  display: grid;
  /* 370 : 370 : 780 — Clôtures aussi large que Fenêtres */
  grid-template-columns: 370fr 370fr 780fr;
  gap: 40px;
  margin-top: 81px;
}

/* ── Carte produit ─────────────────────────────────────────── */

.gamme-card {
  position: relative;
  overflow: hidden;
  height: 560px;
  text-decoration: none;
  color: inherit;
  display: block;
}

.gamme-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}

.gamme-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.30);
  z-index: 1;
  pointer-events: none;
}

.gamme-card:hover .gamme-card__bg {
  transform: scale(1.03);
}

/*
   Label centré (H + V) dans la carte :
   Figtree 40px / weight 400 / letter-spacing -0.05em / line-height 40px
*/
.gamme-card__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.05em;
  text-align: center;
  color: #ffffff;
  text-wrap: pretty;
  padding: 0 24px;
  pointer-events: none;
}

/* ============================================================
   SECTION "NOS ATOUTS"
   Fond noir, deux blocs Image+Titre(overlay) → Corps, décalés en diagonale.

   Repères design (artboard 1920px, padding section 160px) :
   — Colonne gauche  : 160–960px   (800px)
   — Colonne droite  : 960–1760px  (800px)
   — Image 1 : x=400–960  → flush droite de col 1  (margin-left: auto)
   — Image 2 : x=1042–1602 → 82px depuis bord gauche col 2
   — Titre 1 : top 260px dans l'image, s'étend 163px à gauche de l'image
   — Titre 2 : top 260px dans l'image, s'étend 166px à gauche de l'image
   ============================================================ */

.section-atouts {
  background-color: #000000;
  padding: 0 160px 265px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  align-items: start;
  overflow: visible;
}

.atout {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/*
   Bloc 1 : image dépasse 80px au-dessus de la section.
   padding-left: 240px → image et corps démarrent à 240px du bord gauche
   du contenu, conformément au design (x=400 sur artboard 1920px,
   padding section = 160px → 400−160 = 240px).
*/
.atout--1 {
  margin-top: -80px;
  padding-left: 240px;
}

/* Bloc 2 : décalé 801px vers le bas + 82px vers la droite dans sa colonne */
.atout--2 {
  margin-top: 801px;
  padding-left: 82px;
}

/*
   Bloc 3 : fabrication française.
   Pleine largeur (2 colonnes), décalé après la fin naturelle de la ligne 1.
   padding-left: 80px → logo à 80px du bord gauche du contenu (x=240 artboard).
   L'image et le corps ont un margin-left: 160px supplémentaire pour atteindre
   240px depuis le bord gauche (même position que l'image du bloc 1).
*/
.atout--3 {
  grid-column: 1 / -1;
  margin-top: 51px;
  display: flex;
  flex-direction: column;
  padding-left: 80px;
}

/*
   Conteneur image + titre overlaid.
   La hauteur est fixée à celle de l'image.
   Le titre est positionné en absolu à l'intérieur.
*/
.atout__visual {
  position: relative;
  width: 560px;
  height: 560px;
  flex-shrink: 0;
}

/* Bloc 3 : image 1200×1200 + margin-left pour aligner à 240px */
.atout--3 .atout__visual {
  width: 1200px;
  height: 1200px;
  margin-left: 160px;
}

.atout__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.30);
  z-index: 1;
  pointer-events: none;
}

.atout__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo EM au-dessus de l'image du bloc 3 */
.atout__logo {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
}

/*
   Titre overlaid :
   — position absolue dans .atout__visual
   — top: 260px → se place à 46% de la hauteur de l'image (zone basse)
   — white-space: nowrap → une seule ligne, comme dans le design
*/
.atout__heading {
  position: absolute;
  top: 260px;
  left: -163px;
  z-index: 2;
  white-space: nowrap;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.05em;
  color: #ffffff;
}

/* Bloc 2 : titre déborde légèrement plus à gauche de l'image */
.atout--2 .atout__heading {
  left: -166px;
}

/*
   Bloc 3 : titre à 580px depuis le haut de l'image (design : 6340−5760=580px)
   et à −161px depuis le bord gauche de l'image (atteint x=79px depuis content left)
*/
.atout--3 .atout__heading {
  top: 580px;
  left: -161px;
  white-space: nowrap;
}

.atout__body {
  width: 718px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  margin-top: 40px;
  text-wrap: pretty;
}

/* Corps bloc 3 : margin-left identique à l'image pour aligner à 240px */
.atout--3 .atout__body {
  margin-left: 160px;
}

/* Bloc 4 : interlocuteur local — pleine largeur, aligné à droite */
.atout--4 {
  grid-column: 1 / -1;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  padding-right: 80px;
}

.atout--4 .atout__visual {
  width: 558px;
  height: 560px;
}

.atout--4 .atout__heading {
  top: 250px;
  left: -220px;
  white-space: nowrap;
}

.atout--4 .atout__body {
  margin-top: 80px;
}

/* ============================================================
   SECTION "NOTRE MÉTHODE"
   Design ref : artboard 1920px, section padding 160px top/200px bottom, 80px H
   — Label (Frame 4) à x=80, y=8400 : règle en haut puis label
   — Intro : x=712, width=1043, alignée colonne description
   — Étapes : grille 160px | 481px | 1fr, séparateurs 1px taupe
   ============================================================ */

.section-methode {
  background-color: #F3F0EC;
  padding: 160px 80px 200px;
}

/* Règle en haut de section — pas de marge négative (padding=80px déjà correct) */
/* Label — déjà à 80px du bord artboard, pas de décalage supplémentaire */
.section-methode .section-label--left {
  margin-left: 0;
  margin-top: 30px;
}

/*
   Intro : Figtree 75px / weight 400 / letter-spacing -0.05em
   Alignée avec la colonne description (content offset 641px)
   margin-top : 54px depuis le bas du label
*/
.methode__intro {
  margin-top: 54px;
  margin-left: 641px;
  max-width: 1043px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(47px, 3.906vw, 75px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #000000;
  text-wrap: pretty;
}

/* Liste des étapes — margin-top 156px depuis le bas de l'intro */
.methode__list {
  list-style: none;
  margin-top: 156px;
}

/*
   Étape : grille 3 colonnes
   Col 1 : 160px (numéro)
   Col 2 : 481px (titre + espace, aligne description à x=721 artboard)
   Col 3 : 1fr  (description)
*/
.methode__step {
  display: grid;
  grid-template-columns: 160px 481px 1fr;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid #9E8C7D;
}

.methode__step + .methode__step {
  padding-top: 52px;
}

.methode__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Numéro : Figtree 75px / weight 300 / taupe */
.methode__step-num {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(47px, 3.906vw, 75px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #9E8C7D;
}

/* Titre : Figtree 30px / weight 700 / taupe / line-height 0.9 */
.methode__step-title {
  display: block;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(24px, 1.5625vw, 30px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: #9E8C7D;
}

/* Description : Figtree 20px / weight 400 / noir */
.methode__step-desc {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.35;
  color: #000000;
}

/* ============================================================
   SECTION "TÉMOIGNAGES CLIENTS"
   Design ref : artboard 1920px, padding 0 top / 80px H / 200px bottom
   — Label (Frame 5) à x=80, y=9680 : règle en haut puis label
   — Photo 240×240 à content x=0
   — Quote 75px à content x=637 (gap 397px depuis la photo)
   — Auteur 20px et 6 dots sous la quote
   ============================================================ */

.section-temoignages {
  background-color: #F3F0EC;
  padding: 0 80px 200px;
}

.section-temoignages .section-label--left {
  margin-left: 0;
  margin-top: 30px;
}

/*
   Conteneur flex : photo à gauche, bloc texte à droite
   margin-top : 55px depuis le bas du label (9840 − 9785 = 55px)
*/
.temoignages__content {
  display: flex;
  align-items: flex-start;
  margin-top: 55px;
}

/*
   Photo auteur : 240×240, margin-right 397px pour laisser
   la quote démarrer à content x=637 (artboard x=717)
*/
.temoignages__photo {
  flex-shrink: 0;
  width: 240px;
  height: 240px;
  object-fit: cover;
  margin-right: 397px;
}

.temoignages__right {
  flex: 1;
  min-width: 0;
}

/*
   Citation : Figtree 75px / weight 400 / letter-spacing -0.05em / line-height 1
*/
.temoignages__quote {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(47px, 3.906vw, 75px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #000000;
  quotes: none;
  text-wrap: pretty;
}

/*
   Auteur : Figtree 20px / weight 400 / line-height 1.35
   margin-top 41px depuis le bas de la citation (10166 − 10125 = 41px)
*/
.temoignages__author {
  margin-top: 41px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 400;
  line-height: 1.35;
  color: #000000;
}

/*
   Dots carousel : cercles 26px, gap 9px (espacement bord-à-bord)
   margin-top 70px depuis le bas de l'auteur (10295 − 10225 = 70px)
*/
.temoignages__dots {
  display: flex;
  gap: 9px;
  margin-top: 70px;
}

.temoignages__dot {
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #D9D9D9;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.temoignages__dot--active {
  background-color: #9E8C7D;
}

/* Transition fondu + hauteur animée lors du changement de témoignage */
.temoignages__content {
  transition: opacity 0.3s ease;
}

.temoignages__right {
  transition: height 0.4s ease;
  overflow: hidden;
}

.temoignages__content.is-fading {
  opacity: 0;
}

/* ============================================================
   BANDE DÉCORATIVE — motif brique de logos EM 80×80px
   Rangée 1 : x=0,160,320... / Rangée 2 : x=80,240,400... (décalage 80px)
   ============================================================ */

.divider-em {
  height: 160px;
  background-image:
    url('../assets/icons/logo-em-tile.svg'),
    linear-gradient(to bottom, #F3F0EC 80px, #000000 80px);
  background-size: 160px 160px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;
}

/* ============================================================
   SECTION CTA / CONTACT
   Fond noir, accroche 75px centrée, blanc
   padding top: 243px (y=10804 − y=10561 artboard)
   ============================================================ */

.section-cta {
  background-color: #000000;
  padding: 243px 160px 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta__text {
  max-width: 1450px;
  margin: 0 auto;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(47px, 3.906vw, 75px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  color: #ffffff;
  text-wrap: pretty;
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 30px;
  height: 50px;
  background-color: #938D82;
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  margin-top: clamp(40px, 5vw, 80px);
}

.cta__btn:hover {
  background-color: #7d7870;
}

.cta__btn img {
  flex-shrink: 0;
  width: 20px;
  height: auto;
}

.cta__btn span {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* ============================================================
   FOOTER PRINCIPAL
   Grande image de fond (même que hero) avec overlay 40%
   padding top: 338px (logo à y=11600 − y=11262 image top)
   ============================================================ */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 160px 80px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.40)),
    url('../assets/images/serene modern outdoor space@2x (2).jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Tous les enfants directs au-dessus du fond (sauf le bg lui-même) */
.site-footer > *:not(.site-footer__bg) {
  position: relative;
  z-index: 1;
}

/* Bloc logo + CTA — centré horizontalement */
.site-footer__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.site-footer__logo {
  width: clamp(180px, 16.04vw, 308px);
  height: auto;
}

/* Bouton CTA footer — même style que hero, margin-top 118px */
.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  height: 50px;
  padding: 0 30px;
  background-color: #9E8C7D;
  color: #ffffff;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(11px, 0.833vw, 16px);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  margin-top: 60px;
}

.site-footer__cta:hover {
  background-color: #7d7870;
}

.site-footer__cta img {
  flex-shrink: 0;
}

/*
   Adresse — alignée à gauche
   margin-top 138px depuis le bas du bouton (12146 − 12008 = 138px)
*/
.site-footer__address {
  margin-top: 138px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  font-style: normal;
}

/*
   Barre légale — flex row, 3 liens à gauche, 1 crédit à droite
   margin-top 69px depuis le bas de l'adresse (12307 − 12238 = 69px)
*/
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  margin-top: 69px;
}

.site-footer__legal a {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.site-footer__legal a:hover {
  opacity: 1;
}

.site-footer__credit {
  margin-left: auto;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 700;
  color: #ffffff;
}

/* ============================================================
   RESPONSIVE — Menu burger (≤ 1350px)
   ============================================================ */

@media (max-width: 1350px) {

  .main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
  }

  .main-nav__brand-mobile {
    display: flex;
  }

  .main-nav__burger {
    display: block;
  }

  .main-nav__list .main-nav__item:first-child {
    display: none;
  }

  .main-nav__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .main-nav__list.is-open {
    display: flex;
    padding: 16px 0;
  }

  .main-nav__item {
    width: 100%;
  }

  .main-nav__link {
    display: flex;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(158, 140, 125, 0.2);
  }

  .main-nav__separator {
    display: none;
  }
}

/* ============================================================
   RESPONSIVE — Tablette & mobile (≤ 1500px)
   ============================================================ */

@media (max-width: 1500px) {

  .section-rule,
  .section-promesse .section-rule {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }


  .section-methode {
    padding-left: 40px;
    padding-right: 40px;
  }

  .methode__intro {
    margin-left: 0;
    max-width: 100%;
  }

  .methode__list {
    margin-top: 80px;
  }

  .methode__step {
    grid-template-columns: 100px 1fr;
  }

  .methode__step-desc {
    grid-column: 2;
    grid-row: 2;
    margin-top: 16px;
  }

  .section-atouts {
    padding-left: 80px;
    padding-right: 80px;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 80px;
  }

  .atout--1,
  .atout--2 {
    margin-top: 0;
    padding-left: 0;
  }

  .atout--3,
  .atout--4 {
    padding-left: 0;
    padding-right: 0;
  }

  .atout__visual {
    width: 100%;
    max-width: 560px;
    height: auto;
    overflow: visible;
  }

  .atout__visual::before {
    display: none;
  }

  .atout__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    filter: brightness(0.7);
  }

  .atout--3 .atout__visual {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin-left: 0;
    overflow: visible;
  }

  .atout--4 .atout__visual {
    width: 100%;
    max-width: 560px;
    height: auto;
    overflow: visible;
  }

  .atout--4 .atout__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .atout--4 {
    margin-left: 0;
  }

  .atout__heading {
    position: static;
    white-space: normal;
    font-size: 36px;
    line-height: 1.2;
    margin-top: 20px;
  }

  .atout--2 .atout__heading,
  .atout--3 .atout__heading,
  .atout--4 .atout__heading {
    left: auto;
    top: auto;
  }

  .atout {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .atout__body {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 16px;
  }

  .atout--3 .atout__body {
    margin-left: 0;
  }

  .atout--4 .atout__body {
    margin-top: 16px;
  }

  /* Témoignages — réduire le gap photo */
  .temoignages__photo {
    margin-right: 80px;
  }

  .section-promesse,
  .section-gamme {
    padding-left: 80px;
    padding-right: 80px;
  }

  .section-gamme {
    padding-bottom: 120px;
  }

  .section-label--left {
    margin-left: 0;
  }

  .gamme-intro {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* Texte passe au-dessus des vignettes */
  .gamme-intro__desc {
    grid-column: 1 / -1;
    order: -1;
  }

  .gamme-card--offset {
    margin-top: 0;
  }

  .gamme-row {
    grid-template-columns: 1fr 1fr;
  }

  /* La grande carte prend toute la largeur */
  .gamme-row .gamme-card--large {
    grid-column: 1 / -1;
    height: 400px;
  }
}

@media (max-width: 768px) {

  /* Section atouts — empilement vertical, offsets supprimés */
  .section-atouts {
    grid-template-columns: 1fr;
    padding: 40px 24px 80px;
    row-gap: 64px;
    overflow: hidden;
  }

  .atout--1,
  .atout--2,
  .atout--3,
  .atout--4 {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    align-items: stretch;
  }

  .atout__visual {
    width: 100%;
    height: auto;
  }

  .atout__img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .atout--3 .atout__visual {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .atout__logo {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
  }

  .atout__heading {
    position: static;
    white-space: normal;
    font-size: 28px;
    line-height: 32px;
    margin-top: 24px;
  }

  .atout--2 .atout__heading,
  .atout--3 .atout__heading {
    left: auto;
    top: auto;
  }

  .atout__body {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
  }

  .atout--3 .atout__body {
    margin-left: 0;
  }

  .hero__title {
    white-space: normal;
  }

  .section-promesse,
  .section-gamme {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 80px;
  }

  .section-label--left {
    margin-left: 0;
  }

  .section-promesse {
    padding-top: 64px;
    padding-bottom: 0;
  }

  .section-promesse .section-rule {
    margin-top: 64px;
  }

  .gamme-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }

  .gamme-card--offset {
    margin-top: 0;
  }

  .gamme-row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
  }

  .gamme-row .gamme-card--large {
    grid-column: 1;
    height: 300px;
  }

  .gamme-card {
    height: 280px;
  }

  .gamme-card__label {
    font-size: 28px;
    line-height: 32px;
  }

  .section-label__text {
    font-size: 14px;
  }

  .section-methode {
    padding: 80px 24px 120px;
  }

  .methode__intro {
    margin-left: 0;
    max-width: 100%;
    margin-top: 32px;
  }

  .methode__list {
    margin-top: 56px;
  }

  .methode__step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 32px;
  }

  .methode__step + .methode__step {
    padding-top: 32px;
  }

  .methode__step-num {
    font-size: 40px;
  }

  .methode__step-title {
    font-size: 24px;
    line-height: 1.2;
  }

  /* Section témoignages — empilé en colonne */
  .section-temoignages {
    padding: 0 24px 80px;
  }

  .temoignages__content {
    flex-direction: column;
    align-items: center;
  }

  .temoignages__photo {
    width: 160px;
    height: 160px;
    margin-right: 0;
    margin-bottom: 32px;
  }

  .temoignages__right {
    width: 100%;
  }

  .temoignages__quote {
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
  }

  .temoignages__author {
    font-size: 16px;
    text-align: center;
  }

  .temoignages__dots {
    justify-content: center;
  }

  .hero__cta {
    white-space: nowrap;
  }

  .hero__cta-label {
    font-size: 14px;
    white-space: normal;
  }

  .hero__tagline {
    white-space: normal;
    width: 90vw;
    line-height: 1.5;
    font-size: 14px;
  }
}

/* ============================================================
   RESPONSIVE — Petit mobile (< 768px)
   ============================================================ */

@media (max-width: 767px) {
  .hero__title {
    font-size: 30px;
    line-height: 36px;
  }
}