/* ================================================================
   PUBLICUS GROUP — style.css
   Fichier CSS Unique · Partagé par les 4 pages HTML
   ----------------------------------------------------------------
   TABLE DES MATIÈRES :
   1.  Variables CSS (:root)
   2.  Reset & Base
   3.  Fond animé (Animated Background)
   4.  Typographie
   5.  Utilitaires (containers, grilles, badges…)
   6.  Boutons
   7.  Carte Glassmorphism
   8.  Navigation (Header fixe + Burger)
   9.  Footer
   10. Animations Scroll (Reveal)
   11. Formulaire
   12. Responsive (Media Queries)
   ================================================================ */


/* ================================================================
   1. VARIABLES CSS — Charte officielle Publicus Group
      Modifier ces valeurs pour changer TOUT le site d'un coup.
   ================================================================ */

:root {

  /* ── Palette de couleurs ── */
  --or:            #F5C518;   /* Or signature — couleur principale */
  --or-fonce:      #C9A200;   /* Or foncé — hover, accents */
  --or-glow:       rgba(245, 197, 24, 0.30);  /* Lueur dorée */
  --or-subtil:     rgba(245, 197, 24, 0.08);  /* Fond doré très léger */
  --or-bordure:    rgba(245, 197, 24, 0.20);  /* Bordure dorée */

  --noir:          #0D0500;   /* Noir absolu — fond principal */
  --sombre:        #1A0A00;   /* Brun-noir — fond secondaire */
  --sombre-2:      #2A1500;   /* Brun-noir moyen — cartes */
  --sombre-3:      #3A2010;   /* Brun-noir clair — éléments */

  --blanc:         #FFFFFF;   /* Blanc pur */
  --blanc-chaud:   #FFF8E1;   /* Blanc légèrement doré */
  --texte-attenue: rgba(255, 255, 255, 0.60);  /* Texte secondaire */
  --texte-leger:   rgba(255, 255, 255, 0.40);  /* Texte très secondaire */

  --rouge-alerte:  #E74C3C;   /* Rouge — erreurs formulaire uniquement */

  /* ── Glassmorphism ── */
  --glass-bg:      rgba(26, 10, 0, 0.55);
  --glass-bordure: rgba(245, 197, 24, 0.18);
  --glass-blur:    blur(18px);

  /* ── Typographie ── */
  --police-titre:  'Bebas Neue', sans-serif;       /* Titres imposants */
  --police-sub:    'Barlow Condensed', sans-serif; /* Sous-titres, labels */
  --police-corps:  'Barlow', sans-serif;           /* Texte courant */

  /* ── Espacement modulaire ── */
  --espace-xs:     8px;
  --espace-sm:     16px;
  --espace-md:     24px;
  --espace-lg:     40px;
  --espace-xl:     64px;
  --espace-2xl:    100px;

  /* ── Hauteur de la navbar ── */
  --hauteur-nav:   72px;

  /* ── Rayons de bordure ── */
  --rayon:         12px;
  --rayon-lg:      20px;
  --rayon-xl:      28px;

  /* ── Transitions ── */
  --transition-rapide:  0.2s ease;
  --transition-mid:     0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-lente:   0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Ombres ── */
  --ombre-card:    0 8px 32px rgba(0, 0, 0, 0.45);
  --ombre-forte:   0 20px 60px rgba(0, 0, 0, 0.55);
  --ombre-or:      0 0 30px var(--or-glow);

}


/* ================================================================
   2. RESET & BASE
      Supprime les styles par défaut des navigateurs
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;  /* Inclut padding/border dans la taille */
  margin:     0;
  padding:    0;
}

html {
  font-size:       16px;
  scroll-behavior: smooth;  /* Défilement doux pour les ancres */
}

body {
  font-family:  var(--police-corps);
  background:   var(--noir);
  color:        var(--blanc);
  min-height:   100vh;
  overflow-x:   hidden;   /* Pas de scroll horizontal */
  line-height:  1.6;
  -webkit-font-smoothing: antialiased;  /* Texte plus lisse sur macOS */
}

img {
  max-width: 100%;
  display:   block;
}

a {
  text-decoration: none;
  color:           inherit;
  transition:      var(--transition-rapide);
}

ul { list-style: none; }

/* Focus visible pour l'accessibilité clavier */
:focus-visible {
  outline:        2px solid var(--or);
  outline-offset: 3px;
}


/* ================================================================
   3. FOND ANIMÉ
      Dégradés radials subtils + grille géométrique en arrière-plan
   ================================================================ */

/* Couche 1 : Dégradés de lumière animés */
body::before {
  content:    '';
  position:   fixed;
  inset:      0;
  z-index:    -2;
  background:
    radial-gradient(ellipse 80% 55% at 15% 15%,  rgba(245, 197, 24, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 85%,  rgba(201, 162, 0,  0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(26,  10,  0,  0.60) 0%, transparent 80%),
    var(--noir);
  animation:  fondPulse 14s ease-in-out infinite alternate;
}

/* Couche 2 : Grille géométrique très subtile */
body::after {
  content:  '';
  position: fixed;
  inset:    0;
  z-index:  -1;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 44px,
      rgba(245, 197, 24, 0.014) 44px,
      rgba(245, 197, 24, 0.014) 45px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 64px,
      rgba(245, 197, 24, 0.011) 64px,
      rgba(245, 197, 24, 0.011) 65px
    );
  pointer-events: none;  /* La grille ne bloque pas les clics */
}

@keyframes fondPulse {
  0%   { opacity: 1;    transform: scale(1);    }
  50%  { opacity: 0.82; transform: scale(1.025); }
  100% { opacity: 1;    transform: scale(1);    }
}


/* ================================================================
   4. TYPOGRAPHIE
      Hiérarchie claire : h1 → h4 + classes utilitaires
   ================================================================ */

h1 {
  font-family: var(--police-titre);
  font-size:   clamp(3.2rem, 8vw, 6.5rem);  /* Fluide : s'adapte à l'écran */
  line-height: 1.05;
  letter-spacing: 0.02em;
  color:       var(--blanc);
}

h2 {
  font-family: var(--police-titre);
  font-size:   clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color:       var(--blanc);
}

h3 {
  font-family:    var(--police-sub);
  font-size:      clamp(1rem, 2.5vw, 1.3rem);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--or);
}

h4 {
  font-family:    var(--police-sub);
  font-size:      0.95rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  color:          var(--blanc);
}

p {
  font-weight: 300;
  color:       var(--texte-attenue);
  line-height: 1.75;
}

/* Texte doré */
.texte-or { color: var(--or); }

/* Texte atténué */
.texte-attenue { color: var(--texte-attenue); }

/* Emphase en blanc */
strong { color: var(--blanc); font-weight: 600; }

/* Italique décoratif */
em {
  font-style: normal;
  color:      var(--or);
}


/* ================================================================
   5. UTILITAIRES
      Containers, grilles, sections, badges, séparateurs…
   ================================================================ */

/* ── Container principal ── */
.container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--espace-md);
}

/* ── Container large ── */
.container-large {
  max-width: 1400px;
  margin:    0 auto;
  padding:   0 var(--espace-md);
}

/* ── Section standard ── */
section {
  padding: var(--espace-2xl) 0;
  position: relative;
}

/* ── Grilles CSS ── */
.grille-2 { display: grid; grid-template-columns: 1fr 1fr;        gap: var(--espace-md); }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-md); }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espace-sm); }

/* ── Centrer le texte ── */
.centre { text-align: center; }

/* ── En-tête de section (label + titre) ── */
.entete-section {
  margin-bottom: var(--espace-xl);
}

.entete-section.centre {
  max-width:  620px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── Label de section (petite ligne + texte doré) ── */
.label-section {
  display:     inline-flex;
  align-items: center;
  gap:         12px;
  font-family:    var(--police-sub);
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--or);
  margin-bottom:  var(--espace-sm);
}

/* Trait décoratif avant le label */
.label-section::before {
  content:       '';
  display:       block;
  width:         32px;
  height:        2px;
  background:    var(--or);
  border-radius: 2px;
  flex-shrink:   0;
}

/* ── Badge arrondi ── */
.badge {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  background:  var(--or-subtil);
  border:      1px solid rgba(245, 197, 24, 0.28);
  border-radius: 100px;
  padding:     6px 16px;

  font-family:    var(--police-sub);
  font-size:      0.76rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--or);
}

/* Point pulsant dans le badge */
.badge::before {
  content:       '';
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--or);
  animation:     pointPulse 2s ease-in-out infinite;
  flex-shrink:   0;
}

@keyframes pointPulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.3; transform: scale(0.65); }
}

/* ── Tag (étiquette compacte) ── */
.tag {
  display:     inline-block;
  background:  rgba(245, 197, 24, 0.09);
  border:      1px solid rgba(245, 197, 24, 0.22);
  border-radius: 6px;
  padding:     4px 12px;

  font-family:    var(--police-sub);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--or);
}

/* ── Bloc stat (grand chiffre + label) ── */
.bloc-stat { text-align: center; }

.stat-chiffre {
  display:     block;
  font-family: var(--police-titre);
  font-size:   clamp(2.5rem, 5vw, 4rem);
  color:       var(--or);
  line-height: 1;
}

.stat-label {
  display:        block;
  font-family:    var(--police-sub);
  font-size:      0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          rgba(245, 197, 24, 0.55);
  margin-top:     6px;
}

/* ── Séparateur diamant ── */
.separateur {
  display:     flex;
  align-items: center;
  gap:         16px;
  margin:      var(--espace-lg) 0;
}

.separateur::before,
.separateur::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--glass-bordure);
}

.separateur-losange {
  width:      8px;
  height:     8px;
  background: var(--or);
  transform:  rotate(45deg);
  flex-shrink: 0;
}

/* ── Ligne dorée ── */
.ligne-or {
  width:         48px;
  height:        2px;
  background:    var(--or);
  border-radius: 2px;
  margin:        var(--espace-sm) 0;
  transition:    width var(--transition-mid);
}


/* ================================================================
   6. BOUTONS
      Système de boutons cohérent et accessible
   ================================================================ */

/* Base commune à tous les boutons */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         10px;

  font-family:    var(--police-sub);
  font-weight:    700;
  font-size:      0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space:    nowrap;

  border:        2px solid transparent;
  border-radius: var(--rayon);
  padding:       14px 32px;
  cursor:        pointer;
  transition:    var(--transition-mid);
  position:      relative;
  overflow:      hidden;
}

/* Flèche animée au hover */
.btn .fleche {
  display:    inline-block;
  transition: transform var(--transition-rapide);
}

.btn:hover .fleche { transform: translateX(5px); }

/* ── Bouton primaire (doré) ── */
.btn-primaire {
  background:   var(--or);
  color:        var(--sombre);
  border-color: var(--or);
}

.btn-primaire:hover {
  background:   transparent;
  color:        var(--or);
  box-shadow:   var(--ombre-or), var(--ombre-card);
  transform:    translateY(-2px);
}

/* ── Bouton contour (transparent + bordure) ── */
.btn-contour {
  background:   transparent;
  color:        var(--blanc);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-contour:hover {
  border-color: var(--or);
  color:        var(--or);
  transform:    translateY(-2px);
}

/* ── Bouton sombre (pour fond doré) ── */
.btn-sombre {
  background:   var(--sombre);
  color:        var(--or);
  border-color: var(--sombre);
  padding:      16px 36px;
}

.btn-sombre:hover {
  background:   transparent;
  border-color: var(--sombre);
  color:        var(--sombre);
  transform:    translateY(-2px);
}

/* ── Bouton de navigation ── */
.btn-nav {
  font-family:    var(--police-sub);
  font-size:      0.8rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background:   var(--or);
  color:        var(--sombre);
  border:       2px solid var(--or);
  border-radius: 8px;
  padding:      9px 20px;
  cursor:       pointer;
  transition:   var(--transition-rapide);
}

.btn-nav:hover {
  background:   transparent;
  color:        var(--or);
  box-shadow:   0 0 18px var(--or-glow);
}


/* ================================================================
   7. CARTE GLASSMORPHISM
      Composant réutilisable sur toutes les pages
   ================================================================ */

.carte-glass {
  background:     var(--glass-bg);
  backdrop-filter:          var(--glass-blur);
  -webkit-backdrop-filter:  var(--glass-blur);
  border:         1px solid var(--glass-bordure);
  border-radius:  var(--rayon-lg);
  padding:        var(--espace-lg);
  position:       relative;
  overflow:       hidden;
  transition:     var(--transition-mid);
}

/* Reflet lumineux en haut de la carte (au hover) */
.carte-glass::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity:    0;
  transition: opacity var(--transition-mid);
}

/* Lueur de fond au hover */
.carte-glass::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,197,24,0.04) 0%, transparent 70%);
  opacity:    0;
  transition: opacity var(--transition-mid);
  pointer-events: none;
}

.carte-glass:hover {
  border-color: rgba(245, 197, 24, 0.42);
  transform:    translateY(-6px);
  box-shadow:   var(--ombre-forte), 0 0 40px var(--or-subtil);
}

.carte-glass:hover::before,
.carte-glass:hover::after { opacity: 1; }

/* La ligne dorée s'élargit au hover */
.carte-glass:hover .ligne-or { width: 72px; }

/* Numéro décoratif en fond de carte */
.carte-numero {
  position:    absolute;
  top:         12px;
  right:       20px;
  font-family: var(--police-titre);
  font-size:   3.8rem;
  color:       rgba(245, 197, 24, 0.10);
  line-height: 1;
  transition:  color var(--transition-mid);
  user-select: none;
}

.carte-glass:hover .carte-numero {
  color: rgba(245, 197, 24, 0.20);
}

/* Icône de service (carré doré) */
.icone-service {
  width:         52px;
  height:        52px;
  border-radius: 12px;
  background:    var(--or-subtil);
  border:        1px solid rgba(245, 197, 24, 0.22);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.4rem;
  transition:    var(--transition-mid);
  flex-shrink:   0;
}

.carte-glass:hover .icone-service {
  background: var(--or);
  border-color: var(--or);
  transform: scale(1.05);
}


/* ================================================================
   8. NAVIGATION — Header fixe avec Burger menu mobile
   ================================================================ */

/* ── Structure principale de la navbar ── */
.navbar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  height:     var(--hauteur-nav);
  z-index:    1000;  /* Toujours au-dessus du contenu */
  transition: background var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid);
  padding:    0 var(--espace-lg);
}

/* Quand l'utilisateur scrolle, la navbar devient opaque avec flou */
.navbar.scrollee {
  background:         rgba(13, 5, 0, 0.88);
  backdrop-filter:          var(--glass-blur);
  -webkit-backdrop-filter:  var(--glass-blur);
  border-bottom:      1px solid var(--glass-bordure);
  box-shadow:         0 8px 40px rgba(0, 0, 0, 0.45);
}

/* ── Contenu interne de la navbar ── */
.nav-interieur {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       1300px;
  margin:          0 auto;
}

/* ── Logo dans la navbar ── */
.nav-logo {
  display:     flex;
  align-items: center;
  gap:         12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Image du logo */
.nav-logo img {
  height:     44px;
  width:      44px;
  object-fit: contain;
  filter:     drop-shadow(0 0 8px var(--or-glow));
  transition: filter var(--transition-rapide), transform var(--transition-rapide);
}

.nav-logo:hover img {
  filter:    drop-shadow(0 0 16px var(--or-glow));
  transform: scale(1.06);
}

/* Texte du logo */
.nav-logo-texte {
  font-family:    var(--police-titre);
  font-size:      1.45rem;
  letter-spacing: 0.12em;
  color:          var(--blanc);
  line-height:    1;
}

/* "GROUP" en doré */
.nav-logo-texte span { color: var(--or); }

/* ── Liens de navigation (desktop) ── */
.nav-liens {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.nav-liens a {
  font-family:    var(--police-sub);
  font-size:      0.82rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--texte-attenue);
  padding:        8px 16px;
  border-radius:  6px;
  position:       relative;
  transition:     color var(--transition-rapide);
}

/* Soulignement animé sous le lien */
.nav-liens a::after {
  content:       '';
  position:      absolute;
  bottom:        4px;
  left:          50%;
  transform:     translateX(-50%);
  width:         0;
  height:        2px;
  background:    var(--or);
  border-radius: 2px;
  transition:    width var(--transition-rapide);
}

.nav-liens a:hover,
.nav-liens a.actif {
  color: var(--or);
}

/* Le soulignement apparaît au hover ou sur la page active */
.nav-liens a:hover::after,
.nav-liens a.actif::after {
  width: calc(100% - 32px);
}

/* ── Bouton burger (mobile uniquement) ── */
.burger {
  display:    none;   /* Caché sur desktop */
  flex-direction: column;
  gap:        5px;
  cursor:     pointer;
  padding:    6px;
  border:     none;
  background: none;
  z-index:    1100;   /* Au-dessus du menu mobile */
}

/* Les 3 traits du burger */
.burger span {
  display:          block;
  width:            26px;
  height:           2px;
  background:       var(--or);
  border-radius:    2px;
  transition:       var(--transition-mid);
  transform-origin: center;
}

/* Animation du burger → croix quand ouvert */
.burger.ouvert span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.ouvert span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.ouvert span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Menu mobile (overlay plein écran) ── */
.menu-mobile {
  position:       fixed;
  inset:          0;
  background:     rgba(13, 5, 0, 0.97);
  backdrop-filter:          var(--glass-blur);
  -webkit-backdrop-filter:  var(--glass-blur);
  z-index:        999;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            28px;

  /* État fermé */
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-mid);
}

/* État ouvert */
.menu-mobile.ouvert {
  opacity:        1;
  pointer-events: all;
}

/* Liens dans le menu mobile (grands, lisibles) */
.menu-mobile a {
  font-family:    var(--police-titre);
  font-size:      clamp(2rem, 8vw, 3rem);
  letter-spacing: 0.08em;
  color:          var(--blanc);
  transition:     color var(--transition-rapide);
}

.menu-mobile a:hover,
.menu-mobile a.actif { color: var(--or); }

/* Infos de contact dans le menu mobile */
.menu-mobile-contact {
  margin-top: var(--espace-md);
  text-align: center;
}

.menu-mobile-contact p {
  font-family:    var(--police-sub);
  font-size:      0.88rem;
  letter-spacing: 0.1em;
  color:          rgba(245, 197, 24, 0.55);
}


/* ================================================================
   9. FOOTER
      Footer professionnel avec liens et réseaux sociaux
   ================================================================ */

footer {
  background:     var(--sombre);
  border-top:     1px solid var(--glass-bordure);
  padding:        64px 0 32px;
}

/* Grille du footer : 4 colonnes sur desktop */
.footer-grille {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap:                   var(--espace-xl);
  margin-bottom:         var(--espace-xl);
}

/* ── Logo dans le footer ── */
.footer-logo {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: var(--espace-sm);
}

.footer-logo img {
  height:     52px;
  width:      52px;
  object-fit: contain;
}

.footer-logo-texte {
  font-family:    var(--police-titre);
  font-size:      1.3rem;
  letter-spacing: 0.12em;
  color:          var(--blanc);
}

.footer-logo-texte span { color: var(--or); }

/* Description sous le logo */
.footer-desc {
  font-size:  0.88rem;
  color:      var(--texte-leger);
  line-height: 1.75;
  max-width:  280px;
}

/* ── Titre de colonne footer ── */
.footer-col-titre {
  font-family:    var(--police-sub);
  font-size:      0.74rem;
  font-weight:    700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color:          var(--or);
  margin-bottom:  var(--espace-md);
}

/* ── Liens du footer ── */
.footer-liens {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.footer-liens a {
  font-size:  0.88rem;
  color:      var(--texte-leger);
  transition: color var(--transition-rapide), padding-left var(--transition-rapide);
}

.footer-liens a:hover {
  color:        var(--or);
  padding-left: 6px;   /* Décalage léger au hover */
}

/* ── Infos de contact dans le footer ── */
.footer-contact-item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin-bottom: 14px;
}

.footer-contact-item svg {
  width:      18px;
  height:     18px;
  color:      var(--or);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-contact-item p {
  font-size: 0.86rem;
  color:     var(--texte-leger);
}

/* ── Boutons réseaux sociaux ── */
.footer-reseaux {
  display: flex;
  gap:     10px;
  margin-top: var(--espace-md);
}

.btn-reseau {
  width:           40px;
  height:          40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid var(--glass-bordure);
  border-radius:   8px;
  color:           var(--texte-leger);
  transition:      var(--transition-rapide);
}

.btn-reseau:hover {
  background:   var(--or);
  border-color: var(--or);
  color:        var(--sombre);
  transform:    translateY(-3px);
}

/* ── Barre du bas du footer ── */
.footer-bas {
  padding-top:     var(--espace-md);
  border-top:      1px solid rgba(255, 255, 255, 0.06);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             12px;
}

.footer-bas p {
  font-size: 0.8rem;
  color:     var(--texte-leger);
}

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


/* ================================================================
   10. ANIMATIONS SCROLL (Reveal)
       Les éléments apparaissent progressivement au défilement
   ================================================================ */

/* État initial — invisible et décalé */
.revele {
  opacity:    0;
  transform:  translateY(40px);
  transition: opacity  var(--transition-lente),
              transform var(--transition-lente);
}

/* Depuis la gauche */
.revele-gauche {
  opacity:    0;
  transform:  translateX(-45px);
  transition: opacity  var(--transition-lente),
              transform var(--transition-lente);
}

/* Depuis la droite */
.revele-droite {
  opacity:    0;
  transform:  translateX(45px);
  transition: opacity  var(--transition-lente),
              transform var(--transition-lente);
}

/* État visible — ajouté par JavaScript (IntersectionObserver) */
.revele.visible,
.revele-gauche.visible,
.revele-droite.visible {
  opacity:   1;
  transform: translate(0);
}

/* Délais progressifs pour un effet en cascade */
.delai-1 { transition-delay: 0.10s; }
.delai-2 { transition-delay: 0.20s; }
.delai-3 { transition-delay: 0.30s; }
.delai-4 { transition-delay: 0.40s; }
.delai-5 { transition-delay: 0.50s; }
.delai-6 { transition-delay: 0.60s; }
.delai-7 { transition-delay: 0.70s; }
.delai-8 { transition-delay: 0.80s; }


/* ================================================================
   11. FORMULAIRE
       Styles cohérents pour tous les champs du formulaire
   ================================================================ */

/* ── Groupe champ + label ── */
.champ-groupe {
  margin-bottom: var(--espace-md);
  position:      relative;
}

/* ── Label flottant ── */
.champ-label {
  display:        block;
  font-family:    var(--police-sub);
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--or);
  margin-bottom:  8px;
}

/* ── Champs de saisie communs ── */
.champ-input,
.champ-textarea,
.champ-select {
  width:       100%;
  background:  rgba(255, 255, 255, 0.04);
  border:      1px solid var(--glass-bordure);
  border-radius: var(--rayon);
  padding:     14px 18px;

  font-family: var(--police-corps);
  font-size:   0.95rem;
  color:       var(--blanc);
  outline:     none;
  transition:  border-color var(--transition-rapide),
               background   var(--transition-rapide),
               box-shadow   var(--transition-rapide);
}

.champ-input::placeholder,
.champ-textarea::placeholder {
  color: rgba(255, 255, 255, 0.22);
}

/* Focus : bordure dorée + légère lueur */
.champ-input:focus,
.champ-textarea:focus,
.champ-select:focus {
  border-color: var(--or);
  background:   rgba(245, 197, 24, 0.04);
  box-shadow:   0 0 0 3px rgba(245, 197, 24, 0.12);
}

/* ── Textarea ── */
.champ-textarea {
  min-height: 150px;
  resize:     vertical;
}

/* ── Select ── */
.champ-select {
  cursor:           pointer;
  appearance:       none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5C518' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 16px center;
  padding-right:    42px;
}

.champ-select option { background: var(--sombre-2); }

/* ── État d'erreur ── */
.champ-erreur {
  border-color: var(--rouge-alerte) !important;
  box-shadow:   0 0 0 3px rgba(231, 76, 60, 0.14) !important;
}

/* Message d'erreur */
.msg-erreur {
  display:   none;
  font-size: 0.78rem;
  color:     var(--rouge-alerte);
  margin-top: 6px;
  font-family: var(--police-sub);
  letter-spacing: 0.05em;
}

.msg-erreur.visible { display: block; }

/* ── Message de succès après envoi ── */
.form-succes {
  display:        none;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        var(--espace-xl);
  gap:            var(--espace-md);
}

.form-succes.visible { display: flex; }

.succes-icone {
  width:         72px;
  height:        72px;
  border-radius: 50%;
  background:    rgba(245, 197, 24, 0.12);
  border:        2px solid var(--or);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     2rem;
  animation:     apparitionSucces 0.5s ease;
}

@keyframes apparitionSucces {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);       opacity: 1; }
}


/* ================================================================
   12. RESPONSIVE — Mobile First
       Breakpoints : < 1024px (tablette) · < 768px (mobile)
   ================================================================ */

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

  .footer-grille { grid-template-columns: 1fr 1fr; }
  .grille-4      { grid-template-columns: 1fr 1fr; }

}

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

  :root {
    --hauteur-nav: 64px;   /* Navbar plus petite sur mobile */
  }

  /* Sections plus compactes */
  section { padding: 72px 0; }

  /* Cache les liens desktop, montre le burger */
  .nav-liens,
  .btn-nav { display: none; }

  .burger { display: flex; }

  /* Grilles → 1 seule colonne */
  .grille-2,
  .grille-3,
  .grille-4 { grid-template-columns: 1fr; }

  /* Footer → 1 colonne */
  .footer-grille {
    grid-template-columns: 1fr;
    gap: var(--espace-lg);
  }

  .footer-desc { max-width: 100%; }

  .footer-bas {
    flex-direction: column;
    text-align:     center;
  }

}

/* ── TRÈS PETIT (≤ 480px) ── */
@media (max-width: 480px) {
  .container { padding: 0 var(--espace-sm); }
  .carte-glass { padding: var(--espace-md); }
}