/* ============================================================
   style.css — Zimmer Décoration
   Feuille de style principale du site web
   Auteur : Zimmer Décoration
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS GLOBALES
   Toutes les couleurs et valeurs réutilisables du site.
   Modifier ici pour changer le thème entier du site.
   ============================================================ */
:root {
  --or:        #c9a84c;   /* doré élégant */
  --or-clair:  #ffffff;   /* doré hover */

  --sombre:    #e9e1d2;   /* beige principal (fond) */
  --sombre2:   #ddd2bf;   /* beige un peu plus foncé */
  --sombre3:   #f3eee5;   /* beige très clair */

  --creme:     #1f1f1f;   /* texte noir principal */
  --texte:     #ffffff;   /* texte secondaire gris */

  --accent:    #ffffff;   /* blanc pour boutons / contrastes */
}


/* ============================================================
   2. RESET & BASE
   Suppression des marges/paddings par défaut du navigateur.
   Comportement de base appliqué à tous les éléments.
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Les paddings ne débordent plus */
}

html {
  scroll-behavior: smooth; /* Défilement doux lors des ancres */
}

body {
  background: var(--sombre);
  color: var(--texte);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden; /* Empêche le scroll horizontal */
  cursor: none; /* Masque le curseur natif (remplacé par notre curseur custom) */
}


/* ============================================================
   3. CURSEUR PERSONNALISÉ
   Remplace le curseur navigateur par deux éléments :
   - Un petit point doré (suit le curseur en temps réel)
   - Un cercle plus grand (suit avec un léger retard = effet fluide)
   Animé en JavaScript.
   ============================================================ */
.cursor {
  width: 12px;
  height: 12px;
  background: var(--or);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* N'interfère pas avec les clics */
  z-index: 99999;
  transition: transform 0.1s ease;
  mix-blend-mode: difference; /* Effet d'inversion de couleur sur fond clair */
}

.cursor-follower {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99998;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.3s,
              height 0.3s,
              opacity 0.3s;
}


/* ============================================================
   4. LOADER (ÉCRAN DE CHARGEMENT)
   Affiché pendant ~5 secondes au lancement.
   Couvre tout l'écran avec logo animé, barre de progression
   et compteur de pourcentage.
   ============================================================ */

/* Conteneur principal plein écran */
#loader {
  position: fixed;
  inset: 0;
  background: #ffffff;  /* ← Blanc */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Barre de progression en bas de l'écran */
.loader-bar {
  width: 0%; /* Commence à 0, animé en JS jusqu'à 100% */
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--or), var(--or-clair));
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 4.5s cubic-bezier(0.4, 0, 0.2, 1); /* Progression non-linéaire */
}

/* Grand nom de l'entreprise centré */
.loader-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 12vw, 140px); /* Taille responsive (min 60px, max 140px) */
  letter-spacing: 0.15em;
  color: transparent;
  -webkit-text-stroke: 1px var(--or); /* Texte en contour doré */
  opacity: 0;
  transform: translateY(30px);
  animation: loaderIn 0.8s 0.3s forwards; /* Apparaît 0.3s après le chargement */
}

/* Sous-titre sous le logo du loader */
.loader-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(12px, 2vw, 18px);
  letter-spacing: 0.4em;
  color: var(--or);
  opacity: 0;
  transform: translateY(10px);
  animation: loaderIn 0.8s 0.8s forwards; /* Apparaît 0.8s après le début */
  margin-top: 10px;
  text-transform: uppercase;
}

/* Compteur numérique (0 → 100) en bas à droite */
.loader-counter {
  position: absolute;
  bottom: 30px;
  right: 40px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px;
  color: var(--or);
  opacity: 0.15;
  letter-spacing: 0.05em;
}

/* Lignes verticales décoratives en arrière-plan du loader */
.loader-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.loader-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  width: 1px;
  top: 0;
  bottom: 0;
}

/* Rideau doré qui s'ouvre pour révéler le site (effet de transition finale) */
.loader-reveal {
  position: absolute;
  inset: 0;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
}

/* Animation du rideau : se déploie de gauche à droite, puis se rétracte */
.loader-out {
  animation: loaderSlide 0.7s 0.2s forwards cubic-bezier(0.76, 0, 0.24, 1) !important;
}

/* Keyframe : apparition du logo / sous-titre avec remontée */
@keyframes loaderIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframe : animation du rideau de fermeture */
@keyframes loaderSlide {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}


/* ============================================================
   5. NAVIGATION FIXE
   Barre de navigation en haut, toujours visible.
   Devient semi-transparente (verre dépoli) au scroll.
   ============================================================ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 5vw;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s;
}

/* Classe ajoutée par JS quand l'utilisateur défile vers le bas */
nav.scrolled {
  background: rgba(10, 10, 8, 0.92);
  backdrop-filter: blur(20px); /* Effet de flou derrière la nav */
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
}

/* Logo dans la navigation */
.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.2em;
  color: var(--or);
  text-decoration: none;
}

/* Liste des liens de navigation (desktop) */
.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

/* Chaque lien de navigation */
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte);
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}

/* Trait doré qui s'anime sous le lien au survol */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--or);
  transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-links a:hover { color: var(--or); }
.nav-links a:hover::after { width: 100%; } /* Le trait s'étend à 100% */

/* Bouton "Devis Gratuit" en haut à droite */
.nav-cta {
  border: 1px solid var(--or);
  padding: 10px 24px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  text-decoration: none;
  transition: all 0.3s;
  font-family: 'DM Sans', sans-serif;
}

.nav-cta:hover {
  background: var(--or);
  color: var(--sombre);
}

/* Bouton burger (3 traits) visible uniquement sur mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--or);
  transition: 0.3s;
}

/* Menu mobile (plein écran) — masqué par défaut */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--sombre);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* Classe ajoutée par JS quand le burger est cliqué */
.nav-mobile.open { display: flex; }

.nav-mobile a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: 0.1em;
  color: var(--creme);
  text-decoration: none;
  transition: color 0.3s;
}

.nav-mobile a:hover { color: var(--or); }


/* ============================================================
   6. SECTION HERO (ACCUEIL)
   Section pleine hauteur avec titre géant, description
   et statistiques. Effet parallaxe géré en JS.
   ============================================================ */

#accueil {
  height: 100vh; /* Toute la hauteur de la fenêtre */
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Dégradés de lumière en arrière-plan */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgb(255, 255, 255)0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgb(255, 255, 255) 0%, transparent 40%);
}

/* Grille de points/lignes fines en arrière-plan */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  /* La grille s'efface progressivement vers les bords */
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Ligne verticale décorative fine */
.hero-line-deco {
  position: absolute;
  top: 0;
  right: 25vw;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, 0.15), transparent);
}

/* Bloc de contenu texte à gauche */
.hero-content {
  position: relative;
  padding: 0 5vw;
  z-index: 2;
  max-width: 900px;
}

/* Badge "Artisans du sol depuis 2005" avec trait horizontal */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.2s forwards;
}

.hero-tag::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--or);
}

/* Grand titre en capitales */
.hero-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(70px, 11vw, 160px); /* Taille responsive */
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--creme);
  overflow: hidden; /* Masque le texte hors du conteneur (pour l'animation) */
}

/* Chaque ligne du titre s'élève à l'ouverture */
.hero-h1-line {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  animation: slideUp 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-h1-line:nth-child(1) { animation-delay: 0.4s; }
.hero-h1-line:nth-child(2) {
  animation-delay: 0.55s;
  color: transparent;
  -webkit-text-stroke: 1px var(--or); /* 2ème ligne en contour doré */
}
.hero-h1-line:nth-child(3) { animation-delay: 0.7s; }

/* Description sous le titre */
.hero-desc {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.8;
  color: rgb(0, 0, 0);
  max-width: 500px;
  margin-top: 30px;
  opacity: 0;
  animation: fadeUp 0.8s 1s forwards;
}

/* Conteneur des boutons d'action */
.hero-btns {
  display: flex;
  gap: 20px;
  margin-top: 50px;
  opacity: 0;
  animation: fadeUp 0.8s 1.2s forwards;
}

/* Statistiques à droite (desktop uniquement) */
.hero-stats {
  position: absolute;
  right: 5vw;
  bottom: 15vh;
  display: flex;
  flex-direction: column;
  gap: 40px;
  opacity: 0;
  animation: fadeUp 0.8s 1.3s forwards;
}

.hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: var(--or);
  line-height: 1;
  letter-spacing: 0.05em;
}

.hero-stat-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  margin-top: 4px;
}

/* Flèche de défilement animée en bas de page */
.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  opacity: 0;
  animation: fadeUp 0.8s 1.5s forwards;
}

/* Ligne animée qui se remplit du haut vers le bas en boucle */
.hero-scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--or), transparent);
  animation: scrollLine 2s infinite;
}

@keyframes scrollLine {
  0%  { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ============================================================
   7. STYLES COMMUNS AUX SECTIONS
   Règles partagées par toutes les sections.
   ============================================================ */

section {
  padding: 120px 5vw;
  position: relative;
}

/* Tag de section (ex: "— Notre histoire") */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 20px;
}

.section-tag::before { content: '—'; }

/* Titre principal de chaque section */
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--creme);
  margin-bottom: 20px;
}

/* Le mot en italique doré dans les titres */
.section-title em {
  font-style: italic;
  color: var(--or);
}


/* ============================================================
   8. ANIMATIONS DE RÉVÉLATION AU SCROLL
   Ces classes sont ajoutées aux éléments dans le HTML.
   JavaScript détecte quand ils entrent dans la fenêtre
   et ajoute la classe "visible" pour déclencher l'animation.
   ============================================================ */

/* Animation de bas en haut */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animation de gauche vers droite */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animation de droite vers gauche */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quand JS ajoute "visible", l'élément revient à sa position normale */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

/* Délais pour créer des effets en cascade (les éléments apparaissent l'un après l'autre) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }


/* ============================================================
   9. BOUTONS
   Deux styles : primaire (fond doré) et secondaire (contour).
   ============================================================ */

/* Bouton primaire avec fond doré et effet de remplissage au survol */
.btn-primary {
  background: var(--or);
  color: var(--sombre);
  padding: 16px 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

/* Couche plus claire qui glisse en dessous au survol */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--or-clair);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span { position: relative; z-index: 1; } /* Le texte reste au-dessus */

/* Bouton secondaire avec contour */
.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--or);
  padding: 16px 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-secondary:hover {
  border-color: var(--or);
  background: rgba(201, 168, 76, 0.05);
}


/* ============================================================
   10. SECTION QUI SOMMES-NOUS
   ============================================================ */

#qui-sommes-nous {
  background: var(--sombre2);
  overflow: hidden;
}

/* Grille 2 colonnes : visuel | texte */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 60px;
}

/* Conteneur du visuel gauche */
.about-visual {
  position: relative;
  height: 600px;
}

/* Grand bloc visuel avec motif de fond */
.about-img-main {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--sombre3) 0%, #2A2415 100%);
  border: 1px solid rgb(255, 255, 255);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Motif diagonale en arrière-plan du visuel */
.about-img-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(201, 168, 76, 0.03) 20px,
    rgba(201, 168, 76, 0.03) 21px
  );
}

/* Lettre "Z" géante en filigrane */
.about-img-inner {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 200px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.984);
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Badge circulaire doré en bas à droite du visuel */
.about-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 140px;
  height: 140px;
  background: var(--or);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.about-badge-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  color: var(--sombre);
  line-height: 1;
}

.about-badge-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sombre);
  text-align: center;
  padding: 0 10px;
  font-weight: 500;
}

/* Texte de présentation */
.about-text p {
  font-size: 16px;
  line-height: 1.9;
  color: rgb(0, 0, 0);
  margin-bottom: 20px;
}

/* Grille des 4 valeurs */
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

/* Carte de valeur individuelle */
.about-value {
  padding: 24px;
  border: 1px solid rgb(255, 255, 255);
  position: relative;
  transition: border-color 0.3s, background 0.3s;
}

.about-value:hover {
  border-color: rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.03);
}

/* Trait doré en haut à gauche de chaque carte */
.about-value::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 1px;
  background: var(--or);
}

.about-value-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--or);
  margin-bottom: 8px;
}

.about-value p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(212, 207, 196, 0.6);
  margin: 0;
}


/* ============================================================
   11. SÉPARATEUR ANIMÉ (TEXTE DÉFILANT)
   Bande noire avec texte en boucle infinie.
   ============================================================ */
.divider-parallax {
  height: 200px;
  background: var(--sombre);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Texte qui défile de droite à gauche */
.divider-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 10vw, 120px);
  letter-spacing: 0.1em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(0, 0, 0);
  white-space: nowrap;
  animation: textScroll 15s linear infinite;
}

@keyframes textScroll {
  0%   { transform: translateX(5%); }
  100% { transform: translateX(-20%); }
}


/* ============================================================
   12. SECTION SERVICES
   Grille de 6 cartes (3 colonnes), avec numéros, icônes et tags.
   ============================================================ */
#services {
  background: var(--sombre);
  overflow: hidden;
}

.services-intro {
  max-width: 600px;
  margin-bottom: 80px;
}

/* Grille 3 colonnes, séparées par un espacement de 2px */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* Carte de service */
.service-card {
  background: var(--sombre2);
  padding: 50px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
  cursor: default;
}

/* Trait doré en bas qui s'étend au survol */
.service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { background: #161613; }

/* Grand numéro en filigrane en haut à droite */
.service-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px;
  color: rgb(0, 0, 0);
  line-height: 1;
  position: absolute;
  top: 20px;
  right: 30px;
  letter-spacing: 0.05em;
  transition: color 0.4s;
}

.service-card:hover .service-num { color: rgba(201, 168, 76, 0.15); }

/* Conteneur de l'icône SVG */
.service-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 30px;
}

.service-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--or);
  fill: none;
  stroke-width: 1.5;
}

/* Titre du service */
.service-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--creme);
  margin-bottom: 16px;
  line-height: 1.2;
}

/* Description du service */
.service-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgb(0, 0, 0);
}

/* Conteneur des tags (pastilles) */
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* Tag individuel */
.service-tag {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--or);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 4px 12px;
}


/* ============================================================
   13. SECTION RÉALISATIONS
   Galerie en grille asymétrique (CSS Grid avancé).
   Effet zoom au survol sur chaque image.
   ============================================================ */
#realisations {
  background: var(--sombre2);
  overflow: hidden;
}

/* En-tête de la section avec titre et lien "voir plus" */
.real-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

/* Grille de 12 colonnes pour un agencement editorial */
.real-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}

/* Chaque item de la galerie */
.real-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Disposition des items dans la grille (positions et tailles) */
.real-item:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; height: 450px; } /* Grande carte gauche */
.real-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1; height: 450px; } /* Petite carte droite */
.real-item:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; height: 350px; }
.real-item:nth-child(4) { grid-column: 5 / 9;  grid-row: 2; height: 350px; }
.real-item:nth-child(5) { grid-column: 9 / 13; grid-row: 2; height: 350px; }

/* Fond coloré de chaque carte (remplacer par des images si disponibles) */
.real-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.real-item:hover .real-bg { transform: scale(1.08); } /* Zoom au survol */

/* Couleurs de fond uniques pour chaque réalisation */
.real-item:nth-child(1) .real-bg { background: linear-gradient(135deg, #3D2B1F 0%, #1A1510 100%); }
.real-item:nth-child(2) .real-bg { background: linear-gradient(135deg, #1E2A1A 0%, #0E1510 100%); }
.real-item:nth-child(3) .real-bg { background: linear-gradient(135deg, #2A1E3D 0%, #100E15 100%); }
.real-item:nth-child(4) .real-bg { background: linear-gradient(135deg, #2A2A1E 0%, #15150E 100%); }
.real-item:nth-child(5) .real-bg { background: linear-gradient(135deg, #1E3D2A 0%, #0E1515 100%); }

/* Motif de texture sur chaque fond */
.real-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.3;
}

/* Dégradé sombre en bas de chaque carte (pour la lisibilité du texte) */
.real-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 8, 0.9) 0%, transparent 60%);
  opacity: 0.7;
  transition: opacity 0.4s;
}

.real-item:hover .real-overlay { opacity: 0.9; }

/* Texte en bas de chaque carte */
.real-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  transform: translateY(20px); /* Légèrement en dessous */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.real-item:hover .real-info { transform: translateY(0); } /* Remonte au survol */

.real-category {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
}

.real-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--creme);
}

/* Flèche en haut à droite, apparaît au survol */
.real-arrow {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(10px, -10px);
  transition: opacity 0.3s, transform 0.3s;
}

.real-item:hover .real-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.real-arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--or);
  fill: none;
  stroke-width: 2;
}


/* ============================================================
   14. SECTION AVIS CLIENTS
   Carrousel horizontal infini en CSS animation.
   La piste contient des cartes dupliquées pour l'effet boucle.
   ============================================================ */
#avis-clients {
  background: var(--sombre);
  overflow: hidden;
}

/* Mot "ZIMMER" géant en filigrane derrière les avis */
.avis-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 200px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 168, 76, 0.03);
  letter-spacing: 0.2em;
  white-space: nowrap;
  pointer-events: none;
}

/* Conteneur du carrousel avec masque de dégradé sur les bords */
.avis-track-wrap {
  overflow: hidden;
  margin-top: 60px;
  position: relative;
}

/* Fondu gauche et droit pour cacher les bords */
.avis-track-wrap::before,
.avis-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 10;
}

.avis-track-wrap::before { left: 0;  background: linear-gradient(to right, var(--sombre), transparent); }
.avis-track-wrap::after  { right: 0; background: linear-gradient(to left,  var(--sombre), transparent); }

/* Piste du carrousel — défilement automatique vers la gauche */
.avis-track {
  display: flex;
  gap: 30px;
  animation: slide 30s linear infinite;
  width: max-content; /* Prend la largeur de tous les éléments */
}

/* Pause au survol de la souris */
.avis-track:hover { animation-play-state: paused; }

@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Décale de 50% (les cartes sont dupliquées) */
}

/* Carte d'avis individuelle */
.avis-card {
  width: 360px;
  flex-shrink: 0; /* Ne rétrécit pas */
  background: var(--sombre2);
  border: 1px solid rgba(201, 168, 76, 0.1);
  padding: 40px;
  transition: border-color 0.3s;
}

.avis-card:hover { border-color: rgba(201, 168, 76, 0.3); }

/* Étoiles dorées */
.avis-stars { display: flex; gap: 4px; margin-bottom: 20px; }
.avis-star  { color: var(--or); font-size: 16px; }

/* Texte du témoignage en italique */
.avis-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.7;
  color: rgb(0, 0, 0);
  margin-bottom: 30px;
}

/* Section auteur en bas de la carte */
.avis-author {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  padding-top: 20px;
}

/* Avatar avec initiales */
.avis-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--or), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--sombre);
}

.avis-name  { font-size: 14px; font-weight: 500; color: var(--creme); }
.avis-role  { font-size: 11px; letter-spacing: 0.1em; color: rgba(201, 168, 76, 0.6); margin-top: 2px; }


/* ============================================================
   15. SECTION CERTIFICATIONS
   4 cartes en grille, avec icône SVG, nom et description.
   ============================================================ */
#certificat {
  background: var(--sombre2);
  overflow: hidden;
}

/* Grille de 4 colonnes séparées par 2px */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
}

/* Carte de certification */
.cert-card {
  background: var(--sombre);
  padding: 50px 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Dégradé doré qui apparaît au survol */
.cert-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.cert-card:hover::after { opacity: 1; }

/* Icône SVG de la certification */
.cert-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 24px;
}

.cert-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--or);
  fill: none;
  stroke-width: 1;
}

.cert-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--creme);
  margin-bottom: 10px;
}

.cert-org {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 16px;
}

.cert-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgb(255, 255, 255);
}


/* ============================================================
   16. SECTION COLLABORATIONS
   Marquee des marques + grille des 6 partenaires principaux.
   ============================================================ */
#collaborations {
  background: var(--sombre);
  overflow: hidden;
}

/* Conteneur du défilement de marques */
.collab-marquee-wrap {
  overflow: hidden;
  margin-top: 60px;
  padding: 40px 0;
  border-top: 1px solid rgba(201, 168, 76, 0.08);
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
}

/* Piste de défilement des logos de marques */
.collab-marquee {
  display: flex;
  gap: 80px;
  animation: marquee 20s linear infinite;
  width: max-content;
}

.collab-marquee:hover { animation-play-state: paused; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Chaque nom de marque */
.collab-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.2em;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  transition: color 0.3s;
}

.collab-logo:hover { color: var(--or); }

/* Grille de 3 colonnes pour les partenaires */
.collab-partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

/* Carte partenaire avec logo + infos */
.collab-partner {
  background: var(--sombre2);
  padding: 50px;
  display: flex;
  align-items: center;
  gap: 30px;
  transition: background 0.3s;
}

.collab-partner:hover { background: #161613; }

/* Carré avec les initiales du partenaire */
.collab-partner-logo {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--or);
  flex-shrink: 0;
}

.collab-partner-info h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--creme);
  margin-bottom: 6px;
}

.collab-partner-info p {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(201, 168, 76, 0.6);
  text-transform: uppercase;
}


/* ============================================================
   17. SECTION CONTACT
   Formulaire + informations (téléphone, email, adresse, réseaux).
   ============================================================ */
#contact {
  background: var(--sombre2);
  overflow: hidden;
}

/* Grille 2 colonnes : infos | formulaire */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  margin-top: 60px;
}

/* Accroche à gauche */
.contact-info h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 300;
  color: var(--creme);
  line-height: 1.2;
  margin-bottom: 30px;
}

.contact-info h3 em {
  font-style: italic;
  color: var(--or);
}

/* Liste des méthodes de contact */
.contact-methods {
  display: flex;
  flex-direction: column;
}

/* Ligne de contact (téléphone, email, etc.) */
.contact-method {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  text-decoration: none;
  transition: padding-left 0.3s;
  position: relative;
  overflow: hidden;
}

/* Fond qui glisse au survol */
.contact-method::before {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(201, 168, 76, 0.03);
  transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.contact-method:hover::before { width: 100%; }
.contact-method:hover { padding-left: 16px; } /* Léger décalage au survol */

/* Icône de contact (carré avec bordure) */
.contact-method-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.3s, background 0.3s;
}

.contact-method:hover .contact-method-icon {
  border-color: var(--or);
  background: rgba(201, 168, 76, 0.1);
}

.contact-method-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--or);
  fill: none;
  stroke-width: 1.5;
}

.contact-method-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 4px;
}

.contact-method-value {
  font-size: 16px;
  color: var(--creme);
}

/* Section réseaux sociaux */
.contact-social { margin-top: 40px; }

.contact-social h4 {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  margin-bottom: 20px;
}

.social-links { display: flex; gap: 12px; }

/* Bouton réseau social (carré avec icône SVG) */
.social-link {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 168, 76, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s;
  color: var(--or);
}

.social-link:hover {
  border-color: var(--or);
  background: rgba(201, 168, 76, 0.1);
  transform: translateY(-4px); /* Légère élévation au survol */
}

.social-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Formulaire de contact */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group { position: relative; }

/* Label au-dessus du champ */
.form-group label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
}

/* Champs du formulaire (input, textarea, select) */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgb(0, 0, 0); /* Ligne en bas uniquement */
  padding: 14px 0;
  font-size: 15px;
  color: var(--creme);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  transition: border-color 0.3s;
  outline: none;
  appearance: none; /* Supprime le style natif du navigateur */
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--or); }

.form-group textarea { resize: none; height: 100px; }
.form-group select    { background: var(--sombre2); }
.form-group select option { background: var(--sombre2); }

/* Trait doré animé sous le champ au focus */
.form-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--or);
  transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Le trait s'étend quand le champ est actif */
.form-group input:focus    ~ .form-line,
.form-group textarea:focus ~ .form-line,
.form-group select:focus   ~ .form-line { width: 100%; }

/* Deux champs côte à côte (prénom + nom) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Bouton d'envoi */
.form-submit {
  margin-top: 10px;
  background: var(--or);
  color: var(--sombre);
  padding: 18px 50px;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  align-self: flex-start;
}

.form-submit:hover { background: var(--or-clair); }


/* ============================================================
   18. FOOTER (PIED DE PAGE)
   3 colonnes : logo/tagline + liens nav + liens services.
   ============================================================ */
footer {
  background: var(--sombre);
  border-top: 1px solid rgb(255, 255, 255);
  padding: 60px 5vw 30px;
}

/* Grille 3 colonnes du footer */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  margin-bottom: 30px;
}

.footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  letter-spacing: 0.15em;
  color: var(--or);
  margin-bottom: 16px;
}

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
 color: var(--or);
  line-height: 1.6;
}

/* Titre de colonne dans le footer */
.footer-nav h4 {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 24px;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav a {
  font-size: 14px;
  color: var(--or);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-nav a:hover { color: var(--or); }

/* Bas du footer : copyright + mentions légales */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-size: 12px;
  color: var(--or);
  letter-spacing: 0.1em;
}


/* ============================================================
   19. TEXTURE GRAIN (EFFET PELLICULE)
   Superposition légère sur toute la page pour
   un rendu plus organique et premium.
   ============================================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9997;
  opacity: 0.4;
}


/* ============================================================
   20. KEYFRAMES GÉNÉRAUX
   Animations réutilisables dans tout le site.
   ============================================================ */

/* Apparition avec montée depuis le bas */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Apparition avec montée depuis le bas (version depuis 100%) */
@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   21. RESPONSIVE — TABLETTE (max 1024px)
   Adaptation de la mise en page pour les tablettes.
   ============================================================ */
@media (max-width: 1024px) {
  .about-grid    { grid-template-columns: 1fr; gap: 40px; }     /* 1 colonne au lieu de 2 */
  .about-visual  { height: 350px; }
  .services-grid { grid-template-columns: 1fr 1fr; }            /* 2 colonnes au lieu de 3 */
  .cert-grid     { grid-template-columns: 1fr 1fr; }
  .collab-partners { grid-template-columns: 1fr 1fr; }
  .contact-grid  { grid-template-columns: 1fr; gap: 60px; }     /* 1 colonne au lieu de 2 */
  .footer-grid   { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   22. RESPONSIVE — MOBILE (max 768px)
   Adaptation pour les téléphones.
   ============================================================ */
@media (max-width: 768px) {
  /* Masquer les liens de nav et le CTA sur mobile */
  .nav-links, .nav-cta { display: none; }
  /* Afficher le burger */
  .nav-burger { display: flex; }

  /* Masquer les stats du hero sur mobile */
  .hero-stats { display: none; }

  /* Services en 1 colonne */
  .services-grid { grid-template-columns: 1fr; }

  /* Réalisations : toutes en pleine largeur sur mobile */
  .real-item:nth-child(1) { grid-column: 1 / 13; }
  .real-item:nth-child(2) { grid-column: 1 / 13; grid-row: 2; }
  .real-item:nth-child(3) { grid-column: 1 / 13; grid-row: 3; }
  .real-item:nth-child(4) { grid-column: 1 / 13; grid-row: 4; }
  .real-item:nth-child(5) { grid-column: 1 / 13; grid-row: 5; }

  /* Certifications en 2 colonnes */
  .cert-grid { grid-template-columns: 1fr 1fr; }

  /* Collaborations en 1 colonne */
  .collab-partners { grid-template-columns: 1fr; }

  /* Formulaire : champs prénom/nom en 1 colonne */
  .form-row { grid-template-columns: 1fr; }

  /* Footer en 1 colonne */
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Valeurs en 1 colonne */
  .about-values { grid-template-columns: 1fr; }

  /* En-tête réalisations empilé verticalement */
  .real-header { flex-direction: column; align-items: flex-start; gap: 20px; }
}


/* ============================================================
   STYLES SPÉCIFIQUES AU SITE MULTI-PAGES
   Ajouts pour les en-têtes de pages, grille aperçu, etc.
   ============================================================ */

/* Lien de navigation actif (page courante) */
.nav-active {
  color: var(--or) !important;
}
.nav-active::after {
  width: 100% !important;
}

/* En-tête de page interne (remplace le hero sur les sous-pages) */
.page-hero {
  height: 50vh;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px; /* Compense la nav fixe */
}

.page-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 5vw;
}

.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 20px;
}
.page-hero-tag::before { content: ''; width: 40px; height: 1px; background: var(--or); }

.page-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(50px, 8vw, 110px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--creme);
  margin-bottom: 20px;
}
.page-hero-title em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--or); }

.page-hero-sub {
  font-size: clamp(14px, 1.5vw, 18px);
  color: rgba(212,207,196,0.65);
  max-width: 550px;
  line-height: 1.7;
}

/* Section CTA (bas de chaque page) */
.cta-section {
  background: var(--sombre);
  border-top: 1px solid rgba(201,168,76,0.08);
  padding: 100px 5vw;
}
.cta-content { max-width: 700px; }

/* Grille d'aperçu sur la page d'accueil (6 cartes cliquables) */
.home-preview {
  background: var(--sombre);
  padding: 0;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--sombre);
}

.preview-card {
  background: var(--sombre2);
  padding: 50px 40px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s;
  display: block;
}

.preview-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.preview-card:hover::before { transform: scaleX(1); }
.preview-card:hover { background: #161613; }

.preview-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px;
  color: rgba(201,168,76,0.08);
  line-height: 1;
  position: absolute;
  top: 20px; right: 30px;
  transition: color 0.4s;
}
.preview-card:hover .preview-num { color: rgba(201,168,76,0.18); }

.preview-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--creme);
  margin-bottom: 14px;
  line-height: 1.2;
  transition: color 0.3s;
}
.preview-card:hover .preview-title { color: var(--or); }

.preview-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgb(255, 255, 255);
}

.preview-arrow {
  margin-top: 30px;
  font-size: 20px;
  color: var(--or);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s, transform 0.3s;
}
.preview-card:hover .preview-arrow { opacity: 1; transform: translateX(0); }

/* Grille statique des avis (page avis-clients) */
.avis-static-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.avis-card-static {
  background: var(--sombre);
  border: 1px solid rgba(201,168,76,0.1);
  padding: 40px;
  transition: border-color 0.3s, background 0.3s;
}
.avis-card-static:hover { border-color: rgba(201,168,76,0.3); background: #0f0f0e; }

/* Grille des statistiques (page qui-sommes-nous) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.stat-block {
  background: var(--sombre2);
  padding: 60px 40px;
  text-align: center;
  border: 1px solid rgba(201,168,76,0.05);
  transition: border-color 0.3s;
}
.stat-block:hover { border-color: rgba(201,168,76,0.2); }

.stat-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: var(--or);
  line-height: 1;
  letter-spacing: 0.05em;
}

.stat-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  margin-top: 10px;
}

/* Section hero de la page d'accueil — pleine hauteur */
.hero-section {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Responsive pour les nouvelles sections */
@media (max-width: 1024px) {
  .preview-grid     { grid-template-columns: 1fr 1fr; }
  .avis-static-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid       { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .preview-grid     { grid-template-columns: 1fr; }
  .avis-static-grid { grid-template-columns: 1fr; }
  .stats-grid       { grid-template-columns: 1fr 1fr; }
  .page-hero        { height: 40vh; min-height: 300px; }
}

/* ============================================================
   realisations.css — Page Avant / Après
   Styles de la galerie flip 30 réalisations
============================================================ */

/* --- Filtres --- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 50px 0 30px;
}

.filtre-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  border: 1px solid rgba(201,168,76,0.15);
  padding: 10px 24px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}

.filtre-btn:hover,
.filtre-btn.actif {
  color: var(--sombre);
  background: var(--or);
  border-color: var(--or);
}

/* --- Note d'utilisation --- */
.aide-flip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(212,207,196,0.45);
  margin: 20px 0 16px;
}

/* --- Compteur --- */
.galerie-compteur {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.986);
  margin-bottom: 40px;
}

.galerie-compteur span { color: var(--or); }

/* --- Grille 3 colonnes --- */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* --- Item de galerie --- */
.galerie-item {
  position: relative;
  height: 380px;
  cursor: pointer;
  perspective: 1200px; /* Donne la profondeur 3D */
}

/* Items masqués par le filtre */
.galerie-item.masque { display: none; }

/* --- Carte flip (conteneur des 2 faces) --- */
.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Les enfants gardent leur 3D */
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rotation 180° au clic */
.galerie-item.retourne .flip-card {
  transform: rotateY(180deg);
}

/* --- Faces avant et après --- */
.flip-avant,
.flip-apres {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Chaque face cache son dos */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* La face "après" est retournée de 180° par défaut */
.flip-apres { transform: rotateY(180deg); }

/* --- Image de fond de chaque face ---
   Remplacer background par url('photo.jpg') pour de vraies photos
--- */
.flip-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease;
  position: relative;
}

.galerie-item:hover .flip-img { transform: scale(1.05); }

/* Motif texture "vieux sol" sur les faces AVANT */
.flip-avant .flip-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0px, transparent 1px, transparent 55px);
  pointer-events: none;
}

/* Motif texture "nouveau sol" sur les faces APRÈS */
.flip-apres .flip-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(201,168,76,0.05) 0px, transparent 1px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(201,168,76,0.04) 0px, transparent 1px, transparent 90px);
  pointer-events: none;
}

/* Superposition sombre (lisibilité du texte) */
.flip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,4,0.88) 0%, rgba(5,5,4,0.08) 55%);
  pointer-events: none;
}

/* --- Badge AVANT / APRÈS en haut à gauche --- */
.flip-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  padding: 5px 14px;
  z-index: 3;
}

.flip-avant .flip-badge {
  background: rgba(8,8,7,0.65);
  color: rgba(212,207,196,0.6);
  border: 1px solid rgba(212,207,196,0.18);
}

.flip-apres .flip-badge {
  background: var(--or);
  color: var(--sombre);
  font-weight: 700;
}

/* --- Icône de retournement (cercle avec flèches) --- */
.flip-hint {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.galerie-item:hover .flip-hint {
  background: var(--or);
  border-color: var(--or);
  transform: rotate(180deg);
}

.flip-hint svg {
  width: 15px;
  height: 15px;
  stroke: var(--or);
  fill: none;
  stroke-width: 2;
  transition: stroke 0.3s;
}

.galerie-item:hover .flip-hint svg { stroke: var(--sombre); }

/* --- Texte en bas de chaque face --- */
.flip-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px;
  z-index: 3;
  transform: translateY(6px);
  transition: transform 0.4s ease;
}

.galerie-item:hover .flip-info { transform: translateY(0); }

.flip-categorie {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 5px;
}

.flip-titre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--creme);
  line-height: 1.2;
}

.flip-detail {
  font-size: 12px;
  color: rgba(212,207,196,0.6);
  margin-top: 7px;
  line-height: 1.6;
}

/* --- Palettes de couleurs des visuels CSS ---
   AVANT = tons sombres/usés   APRÈS = tons riches/lumineux
   Remplace par background: url('photo.jpg') center/cover no-repeat
--- */
.av1 { background: url('photos/av1.jpg') center/cover no-repeat; }
.av2 { background: url('photos/av2.jpg') center/cover no-repeat; }
.av3 { background: url('photos/av3.jpg') center/cover no-repeat; }
.av4 { background: url('photos/av4.jpg') center/cover no-repeat; }
.av5 { background: url('photos/av5.jpg') center/cover no-repeat; }
.av6 { background: url('photos/av6.jpg') center/cover no-repeat; }
.av7 { background: url('photos/av7.jpg') center/cover no-repeat; }
.av8 { background: url('photos/av8.jpg') center/cover no-repeat; }
.av9 { background: url('photos/av9.jpg') center/cover no-repeat; }
.av10{ background: url('photos/av10.jpg') center/cover no-repeat; }
.av11{ background: url('photos/av11.jpg') center/cover no-repeat; }
.av12{ background: url('photos/av12.jpg') center/cover no-repeat; }
.av13{ background: url('photos/av13.jpg') center/cover no-repeat; }
.av14{ background: url('photos/av14.jpg') center/cover no-repeat; }
.av15{ background: url('photos/av15.jpg') center/cover no-repeat; }
.av16{ background: url('photos/av16.jpg') center/cover no-repeat; }
.av17{ background: url('photos/av17.jpg') center/cover no-repeat; }
.av18{ background: url('photos/av18.jpg') center/cover no-repeat; }
.av19{ background: url('photos/av19.jpg') center/cover no-repeat; }
.av20{ background: url('photos/av20.jpg') center/cover no-repeat; }
.av21{ background: url('photos/av21.jpg') center/cover no-repeat; }
.av22{ background: url('photos/av22.jpg') center/cover no-repeat; }
.av23{ background: url('photos/av23.jpg') center/cover no-repeat; }
.av24{ background: url('photos/av24.jpg') center/cover no-repeat; }
.av25{ background: url('photos/av25.jpg') center/cover no-repeat; }
.av26{ background: url('photos/av26.jpg') center/cover no-repeat; }
.av27{ background: url('photos/av27.jpg') center/cover no-repeat; }
.av28{ background: url('photos/av28.jpg') center/cover no-repeat; }
.av29{ background: url('photos/av29.jpg') center/cover no-repeat; }
.av30{ background: url('photos/av30.jpg') center/cover no-repeat; }
.av31{ background: url('photos/av31.jpg') center/cover no-repeat; }
.av32{ background: url('photos/av32.jpg') center/cover no-repeat; }
.av33{ background: url('photos/av33.jpg') center/cover no-repeat; }
.av34{ background: url('photos/av34.jpg') center/cover no-repeat; }
.av35{ background: url('photos/av35.jpg') center/cover no-repeat; }
.av36{ background: url('photos/av36.jpg') center/cover no-repeat; }
.av37{ background: url('photos/av37.jpg') center/cover no-repeat; }
.av38{ background: url('photos/av38.jpg') center/cover no-repeat; }
.av39{ background: url('photos/av39.jpg') center/cover no-repeat; }
.av40{ background: url('photos/av40.jpg') center/cover no-repeat; }
.av41{ background: url('photos/av41.jpg') center/cover no-repeat; }
.av42{ background: url('photos/av42.jpg') center/cover no-repeat; }
.av43{ background: url('photos/av43.jpg') center/cover no-repeat; }
.av44{ background: url('photos/av44.jpg') center/cover no-repeat; }
.av45{ background: url('photos/av45.jpg') center/cover no-repeat; }
.av46{ background: url('photos/av46.jpg') center/cover no-repeat; }
.av47{ background: url('photos/av47.jpg') center/cover no-repeat; }
.av48{ background: url('photos/av48.jpg') center/cover no-repeat; }
.av49{ background: url('photos/av49.jpg') center/cover no-repeat; }
.av50{ background: url('photos/av50.jpg') center/cover no-repeat; }
.av51{ background: url('photos/av51.jpg') center/cover no-repeat; }
.av52{ background: url('photos/av52.jpg') center/cover no-repeat; }
.av53{ background: url('photos/av53.jpg') center/cover no-repeat; }
.av54{ background: url('photos/av54.jpg') center/cover no-repeat; }
.av55{ background: url('photos/av55.jpg') center/cover no-repeat; }
.av56{ background: url('photos/av56.jpg') center/cover no-repeat; }
.av57{ background: url('photos/av57.jpg') center/cover no-repeat; }
.av58{ background: url('photos/av58.jpg') center/cover no-repeat; }
.av59{ background: url('photos/av59.jpg') center/cover no-repeat; }
.av60{ background: url('photos/av60.jpg') center/cover no-repeat; }
.av61{ background: url('photos/av61.jpg') center/cover no-repeat; }
.av62{ background: url('photos/av62.jpg') center/cover no-repeat; }
.av63{ background: url('photos/av63.jpg') center/cover no-repeat; }
.av64{ background: url('photos/av64.jpg') center/cover no-repeat; }
.av65{ background: url('photos/av65.jpg') center/cover no-repeat; }
.av66{ background: url('photos/av66.jpg') center/cover no-repeat; }
.av67{ background: url('photos/av67.jpg') center/cover no-repeat; }
.av68{ background: url('photos/av68.jpg') center/cover no-repeat; }
.av69{ background: url('photos/av69.jpg') center/cover no-repeat; }
.av70{ background: url('photos/av70.jpg') center/cover no-repeat; }
.av71{ background: url('photos/av71.jpg') center/cover no-repeat; }
.av72{ background: url('photos/av72.jpg') center/cover no-repeat; }
.av73{ background: url('photos/av73.jpg') center/cover no-repeat; }
.av74{ background: url('photos/av74.jpg') center/cover no-repeat; }
.av75{ background: url('photos/av75.jpg') center/cover no-repeat; }
.av76{ background: url('photos/av76.jpg') center/cover no-repeat; }
.av77{ background: url('photos/av77.jpg') center/cover no-repeat; }
.av78{ background: url('photos/av78.jpg') center/cover no-repeat; }
.av79{ background: url('photos/av79.jpg') center/cover no-repeat; }
.av80{ background: url('photos/av80.jpg') center/cover no-repeat; }
.av81{ background: url('photos/av81.jpg') center/cover no-repeat; }
.av82{ background: url('photos/av82.jpg') center/cover no-repeat; }
.av83{ background: url('photos/av83.jpg') center/cover no-repeat; }
.av84{ background: url('photos/av84.jpg') center/cover no-repeat; }
.av85{ background: url('photos/av85.jpg') center/cover no-repeat; }
.av86{ background: url('photos/av86.jpg') center/cover no-repeat; }
.av87{ background: url('photos/av87.jpg') center/cover no-repeat; }
.av88{ background: url('photos/av88.jpg') center/cover no-repeat; }
.av89{ background: url('photos/av89.jpg') center/cover no-repeat; }
.av90{ background: url('photos/av90.jpg') center/cover no-repeat; }
.av91{ background: url('photos/av91.jpg') center/cover no-repeat; }
.av92{ background: url('photos/av92.jpg') center/cover no-repeat; }
.av93{ background: url('photos/av93.jpg') center/cover no-repeat; }
.av94{ background: url('photos/av94.jpg') center/cover no-repeat; }
.av95{ background: url('photos/av95.jpg') center/cover no-repeat; }
.av96{ background: url('photos/av96.jpg') center/cover no-repeat; }
.av97{ background: url('photos/av97.jpg') center/cover no-repeat; }
.av98{ background: url('photos/av98.jpg') center/cover no-repeat; }
.av99{ background: url('photos/av99.jpg') center/cover no-repeat; }
.av100{ background: url('photos/av100.jpg') center/cover no-repeat; }

.ap1 { background: url('photos/ap1.jpg') center/cover no-repeat; }
.ap2 { background: url('photos/ap2.jpg') center/cover no-repeat; }
.ap3 { background: url('photos/ap3.jpg') center/cover no-repeat; }
.ap4 { background: url('photos/ap4.jpg') center/cover no-repeat; }
.ap5 { background: url('photos/ap5.jpg') center/cover no-repeat; }
.ap6 { background: url('photos/ap6.jpg') center/cover no-repeat; }
.ap7 { background: url('photos/ap7.jpg') center/cover no-repeat; }
.ap8 { background: url('photos/ap8.jpg') center/cover no-repeat; }
.ap9 { background: url('photos/ap9.jpg') center/cover no-repeat; }
.ap10 { background: url('photos/ap10.jpg') center/cover no-repeat; }
.ap11{ background: url('photos/ap11.jpg') center/cover no-repeat; }
.ap12{ background: url('photos/ap12.jpg') center/cover no-repeat; }
.ap13{ background: url('photos/ap13.jpg') center/cover no-repeat; }
.ap14{ background: url('photos/ap14.jpg') center/cover no-repeat; }
.ap15{ background: url('photos/ap15.jpg') center/cover no-repeat; }
.ap16{ background: url('photos/ap16.jpg') center/cover no-repeat; }
.ap17{ background: url('photos/ap17.jpg') center/cover no-repeat; }
.ap18{ background: url('photos/ap18.jpg') center/cover no-repeat; }
.ap19{ background: url('photos/ap19.jpg') center/cover no-repeat; }
.ap20{ background: url('photos/ap20.jpg') center/cover no-repeat; }
.ap21{ background: url('photos/ap21.jpg') center/cover no-repeat; }
.ap22{ background: url('photos/ap22.jpg') center/cover no-repeat; }
.ap23{ background: url('photos/ap23.jpg') center/cover no-repeat; }
.ap24{ background: url('photos/ap24.jpg') center/cover no-repeat; }
.ap25{ background: url('photos/ap25.jpg') center/cover no-repeat; }
.ap26{ background: url('photos/ap26.jpg') center/cover no-repeat; }
.ap27{ background: url('photos/ap27.jpg') center/cover no-repeat; }
.ap28{ background: url('photos/ap28.jpg') center/cover no-repeat; }
.ap29{ background: url('photos/ap29.jpg') center/cover no-repeat; }
.ap30{ background: url('photos/ap30.jpg') center/cover no-repeat; }
.ap31{ background: url('photos/ap31.jpg') center/cover no-repeat; }
.ap32{ background: url('photos/ap32.jpg') center/cover no-repeat; }
.ap33{ background: url('photos/ap33.jpg') center/cover no-repeat; }
.ap34{ background: url('photos/ap34.jpg') center/cover no-repeat; }
.ap35{ background: url('photos/ap35.jpg') center/cover no-repeat; }
.ap36{ background: url('photos/ap36.jpg') center/cover no-repeat; }
.ap37{ background: url('photos/ap37.jpg') center/cover no-repeat; }
.ap38{ background: url('photos/ap38.jpg') center/cover no-repeat; }
.ap39{ background: url('photos/ap39.jpg') center/cover no-repeat; }
.ap40{ background: url('photos/ap40.jpg') center/cover no-repeat; }
.ap41{ background: url('photos/ap41.jpg') center/cover no-repeat; }
.ap42{ background: url('photos/ap42.jpg') center/cover no-repeat; }
.ap43{ background: url('photos/ap43.jpg') center/cover no-repeat; }
.ap44{ background: url('photos/ap44.jpg') center/cover no-repeat; }
.ap45{ background: url('photos/ap45.jpg') center/cover no-repeat; }
.ap46{ background: url('photos/ap46.jpg') center/cover no-repeat; }
.ap47{ background: url('photos/ap47.jpg') center/cover no-repeat; }
.ap48{ background: url('photos/ap48.jpg') center/cover no-repeat; }
.ap49{ background: url('photos/ap49.jpg') center/cover no-repeat; }
.ap50{ background: url('photos/ap50.jpg') center/cover no-repeat; }
.ap51{ background: url('photos/ap51.jpg') center/cover no-repeat; }
.ap52{ background: url('photos/ap52.jpg') center/cover no-repeat; }
.ap53{ background: url('photos/ap53.jpg') center/cover no-repeat; }
.ap54{ background: url('photos/ap54.jpg') center/cover no-repeat; }
.ap55{ background: url('photos/ap55.jpg') center/cover no-repeat; }
.ap56{ background: url('photos/ap56.jpg') center/cover no-repeat; }
.ap57{ background: url('photos/ap57.jpg') center/cover no-repeat; }
.ap58{ background: url('photos/ap58.jpg') center/cover no-repeat; }
.ap59{ background: url('photos/ap59.jpg') center/cover no-repeat; }
.ap60{ background: url('photos/ap60.jpg') center/cover no-repeat; }
.ap61{ background: url('photos/ap61.jpg') center/cover no-repeat; }
.ap62{ background: url('photos/ap62.jpg') center/cover no-repeat; }
.ap63{ background: url('photos/ap63.jpg') center/cover no-repeat; }
.ap64{ background: url('photos/ap64.jpg') center/cover no-repeat; }
.ap65{ background: url('photos/ap65.jpg') center/cover no-repeat; }
.ap66{ background: url('photos/ap66.jpg') center/cover no-repeat; }
.ap67{ background: url('photos/ap67.jpg') center/cover no-repeat; }
.ap68{ background: url('photos/ap68.jpg') center/cover no-repeat; }
.ap69{ background: url('photos/ap69.jpg') center/cover no-repeat; }
.ap70{ background: url('photos/ap70.jpg') center/cover no-repeat; }
.ap71{ background: url('photos/ap71.jpg') center/cover no-repeat; }
.ap72{ background: url('photos/ap72.jpg') center/cover no-repeat; }
.ap73{ background: url('photos/ap73.jpg') center/cover no-repeat; }
.ap74{ background: url('photos/ap74.jpg') center/cover no-repeat; }
.ap75{ background: url('photos/ap75.jpg') center/cover no-repeat; }
.ap76{ background: url('photos/ap76.jpg') center/cover no-repeat; }
.ap77{ background: url('photos/ap77.jpg') center/cover no-repeat; }
.ap78{ background: url('photos/ap78.jpg') center/cover no-repeat; }
.ap79{ background: url('photos/ap79.jpg') center/cover no-repeat; }
.ap80{ background: url('photos/ap80.jpg') center/cover no-repeat; }
.ap81{ background: url('photos/ap81.jpg') center/cover no-repeat; }
.ap82{ background: url('photos/ap82.jpg') center/cover no-repeat; }
.ap83{ background: url('photos/ap83.jpg') center/cover no-repeat; }
.ap84{ background: url('photos/ap84.jpg') center/cover no-repeat; }
.ap85{ background: url('photos/ap85.jpg') center/cover no-repeat; }
.ap86{ background: url('photos/ap86.jpg') center/cover no-repeat; }
.ap87{ background: url('photos/ap87.jpg') center/cover no-repeat; }
.ap88{ background: url('photos/ap88.jpg') center/cover no-repeat; }
.ap89{ background: url('photos/ap89.jpg') center/cover no-repeat; }
.ap90{ background: url('photos/ap90.jpg') center/cover no-repeat; }
.ap91{ background: url('photos/ap91.jpg') center/cover no-repeat; }
.ap92{ background: url('photos/ap92.jpg') center/cover no-repeat; }
.ap93{ background: url('photos/ap93.jpg') center/cover no-repeat; }


/* Grand texte décoratif centré dans les faux visuels */
.flip-deco {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 90px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  letter-spacing: 0.05em;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

/* --- Responsive --- */
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* change cette valeur — 4px actuellement */
}
@media (max-width: 640px) {
  .galerie-grid { grid-template-columns: 1fr; }
  .galerie-item { height: 300px; }
  .flip-deco { font-size: 60px; }
}

.loader-sub img {
  width: 400px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s ease;
}

/* état visible */
.loader-sub img.show {
  opacity: 1;
  transform: scale(1);
}

.svc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.svc-dot.active {
  background: var(--or);
  transform: scale(1.3);
}

.bande-photos {
  overflow: hidden;
  width: 100%;
  background: var(--sombre);
  padding: 20px 0;
}

.bande-track {
  display: flex;
  gap: 6px;
  width: max-content;
  animation: bandeDefile 80s linear infinite;
}

.bande-track:hover {
  animation-play-state: paused;
}

.bande-track img {
  height: 280px;
  width: 380px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

@keyframes bandeDefile {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bande-track a {
  position: relative;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.bande-track a img {
  height: 280px;
  width: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bande-track a:hover img {
  transform: scale(1.08);
}

.bande-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--or);
  color: var(--sombre);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 18px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.bande-track a:hover .bande-btn {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ───────── MOBILE ───────── */
@media (max-width: 768px) {

  /* HERO */
  h1 {
    font-size: 42px !important;
    line-height: 1.1;
  }

  .hero-section div[style*="bottom:120px;left:5vw"] {
    bottom: 80px !important;
    max-width: 100%;
  }

  /* cacher stats à droite */
  .hero-section div[style*="right:5vw"] {
    display: none;
  }

  /* boutons */
  .hero-section a {
    width: 100%;
    text-align: center;
  }

  /* QUIZ */
  .quiz-section {
    padding: 60px 20px;
  }

  .quiz-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .quiz-box-body {
    padding: 24px 20px;
  }

  .quiz-box-head {
    padding: 18px 20px;
  }

  .quiz-box-foot {
    padding: 0 20px 20px;
  }

  .quiz-q-text {
    font-size: 18px;
  }

  /* SCORE PREVIEW */
  .quiz-score-preview {
    flex-direction: column;
  }

  /* PREVIEW GRID */
  .preview-grid {
    grid-template-columns: 1fr;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

}

body {
  overflow-x: hidden;
}

/* ───────── MOBILE ───────── */
@media (max-width: 768px) {

  /* GLOBAL */
  body {
    overflow-x: hidden;
  }

  /* ABOUT */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .about-img-main {
    height: 260px;
  }

  .about-badge {
    position: relative;
    margin-top: 20px;
  }

  /* TEXT */
  .about-text {
    font-size: 14px;
  }

  /* VALUES */
  .about-values {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* STATS */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .stat-big {
    font-size: 36px;
  }

  /* MAP + HORAIRES */
  section div[style*="grid-template-columns:1fr 400px"] {
    grid-template-columns: 1fr !important;
  }

  iframe {
    min-height: 300px !important;
  }

  /* HORAIRES BOX */
  section div[style*="padding:40px 36px"] {
    padding: 24px 20px !important;
  }

  /* FOURNISSEURS */
  section div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  section a[style*="padding:70px"] {
    padding: 40px 20px !important;
  }

  /* CTA */
  .cta-content div {
    flex-direction: column;
  }

  .cta-content a {
    width: 100%;
    text-align: center;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

}

/* =========================
   TABLETTE
========================= */
@media (max-width: 1024px) {

  section > div {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .page-hero-title {
    font-size: 48px;
  }

  .avis-static-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  nav {
    padding: 15px 20px;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {

  /* NAV */
  .nav-links,
  .nav-cta {
    display: none !important;
  }

  .nav-burger {
    display: flex !important;
  }

  /* HERO */
  .page-hero-title {
    font-size: 34px !important;
    text-align: center;
  }

  .page-hero-sub {
    text-align: center;
    font-size: 13px;
  }

  /* GRILLES */
  .avis-static-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* NOTE GLOBALE */
  section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    text-align: center;
  }

  /* CARTES AVIS */
  .avis-card-static {
    padding: 20px !important;
  }

  .avis-text {
    font-size: 14px;
    line-height: 1.6;
  }

  /* CARROUSEL */
  #avis-clients {
    padding: 60px 20px;
  }

  /* CTA */
  .cta-content {
    text-align: center;
  }

  .cta-section .btn-primary,
  .cta-section .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center;
  }
}

/* =========================
   PETITS TÉLÉPHONES
========================= */
@media (max-width: 480px) {

  .page-hero-title {
    font-size: 28px !important;
  }

  .section-title {
    font-size: 26px !important;
  }

  .avis-card-static {
    padding: 16px !important;
  }

  .avis-stars {
    font-size: 14px;
  }

  .avis-text {
    font-size: 13px;
  }
}