/* ============================================================
   FICHIER : style.css
   RÔLE    : Feuille de styles globale pour tout le portfolio
   AUTEUR  : À personnaliser avec ton nom
   ============================================================

   SOMMAIRE :
   1.  Variables CSS (couleurs, polices, espacements)
   2.  Reset & base
   3.  Typographie
   4.  Header & Navigation
   5.  Hero section (page d'accueil)
   6.  Sections génériques
   7.  Galerie photo
   8.  Section vidéo
   9.  Prestations / Cards
   10. Formulaire de contact
   11. Footer
   12. Animations
   13. Responsive (mobile)
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS
   ─────────────────────────────────────────────────────────────
   Toutes les couleurs et valeurs réutilisables sont ici.
   Si tu veux changer une couleur sur tout le site,
   il suffit de la modifier UNE SEULE FOIS ici.
   ============================================================ */
:root {
  /* --- Palette de couleurs --- */
  --color-bg-dark:    #111111;   /* Fond principal (très sombre) */
  --color-bg-card:    #222222;   /* Fond des cartes / sections */
  --color-accent:     #C9A36A;   /* Or / couleur d'accent premium */
  --color-accent-dim: #a07d47;   /* Version plus sombre de l'accent */
  --color-text:       #F5F5F5;   /* Texte principal (quasi blanc) */
  --color-text-muted: #B3B3B3;   /* Texte secondaire (gris clair) */
  --color-border:     #2E2E2E;   /* Couleur des bordures discrètes */
  --color-overlay:    rgba(17, 17, 17, 0.75); /* Superposition sombre */

  /* --- Typographie --- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif; /* Titres élégants */
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;   /* Corps de texte */

  /* --- Espacements --- */
  --spacing-xs:  0.5rem;    /*  8px */
  --spacing-sm:  1rem;      /* 16px */
  --spacing-md:  2rem;      /* 32px */
  --spacing-lg:  4rem;      /* 64px */
  --spacing-xl:  7rem;      /* 112px */

  /* --- Transitions --- */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow:   0.7s ease;

  /* --- Rayons de bordure --- */
  --radius-sm: 4px;
  --radius-md: 8px;
}


/* ============================================================
   2. RESET & BASE
   ─────────────────────────────────────────────────────────────
   Supprime les marges par défaut du navigateur et
   uniformise le comportement des éléments.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box; /* Inclut padding et bordure dans la taille */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Défilement doux lors des ancres (#section) */
  font-size: 16px;
}

body {
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  /* Empêche le défilement horizontal accidentel */
  overflow-x: hidden;
}

/* Liens */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-text);
}

/* Images : toujours responsives */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Boutons : reset des styles par défaut */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}


/* ============================================================
   3. TYPOGRAPHIE
   ─────────────────────────────────────────────────────────────
   Classes réutilisables pour tous les titres et textes.
   ============================================================ */

/* Import des polices Google Fonts
   ──────────────────────────────
   Cormorant Garamond : police serif élégante pour les titres
   Jost               : police sans-serif moderne et lisible */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap');

/* --- Classe de section titre --- */
.section-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

/* --- Titres principaux --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: clamp(2.8rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem,   4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2vw, 2rem); }

/* --- Paragraphe --- */
p {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 65ch; /* Limite la longueur de ligne pour la lisibilité */
}

/* --- Texte centré (utile pour les sections d'intro) --- */
.text-center {
  text-align: center;
}
.text-center p {
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   4. HEADER & NAVIGATION
   ─────────────────────────────────────────────────────────────
   Le header est fixe en haut de page.
   Il devient légèrement opaque au défilement (via JS).
   ============================================================ */
.site-header {
  position: fixed;       /* Reste visible même en scrollant */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;         /* Au-dessus de tout le reste */
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--transition-normal),
              padding var(--transition-normal);
}

/* État "scrollé" : fond sombre ajouté par JS */
.site-header.scrolled {
  background-color: rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 3rem;
  border-bottom: 1px solid var(--color-border);
}

/* --- Logo / Nom --- */
.site-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.05em;
}
.site-logo span {
  color: var(--color-accent); /* La partie colorée du logo */
}

/* --- Menu de navigation --- */
.site-nav {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  align-items: center;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  position: relative;
  padding-bottom: 4px;
}

/* Soulignement animé au survol */
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--transition-normal);
}
.site-nav a:hover {
  color: var(--color-text);
}
.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

/* Lien actif (page courante) */
.site-nav a.active {
  color: var(--color-accent);
}

/* --- Bouton hamburger (mobile) --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-text);
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}


/* ============================================================
   5. HERO SECTION (PAGE D'ACCUEIL)
   ─────────────────────────────────────────────────────────────
   Grande section d'accueil qui prend 100% de la hauteur écran.
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;          /* 100% de la hauteur de la fenêtre */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* --- Image de fond du hero --- */
.hero-bg {
  position: absolute;
  inset: 0;               /* Équivaut à top/right/bottom/left: 0 */
  background-image: url('assets/images/hero-bg.jpg'); /* ← CHANGE ICI ton image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05); /* Légèrement agrandi pour l'effet parallaxe */
  transition: transform 0.1s linear;
  filter: brightness(0.45); /* Assombrit l'image pour lisibilité du texte */
}

/* --- Grain texturé subtil sur le hero --- */
.hero::before {
  content: '';
  position: absolute;
  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.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* --- Contenu centré du hero --- */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--spacing-md);
  max-width: 900px;
}

.hero-content .section-label {
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.3s forwards;
}

.hero-title {
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: var(--spacing-sm);
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.5s forwards;
}
.hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero-subtitle {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  max-width: 50ch;
  margin: 0 auto var(--spacing-md);
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.7s forwards;
}

/* --- Boutons du hero --- */
.hero-buttons {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.9s forwards;
}

/* Flèche de défilement */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeIn 1s ease 1.4s forwards;
}
.hero-scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}


/* ============================================================
   6. SECTIONS GÉNÉRIQUES
   ─────────────────────────────────────────────────────────────
   Styles partagés par toutes les pages.
   ============================================================ */

/* --- Conteneur centré --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* --- Section standard avec espacement vertical --- */
.section {
  padding: var(--spacing-xl) 0;
}

/* En-tête de section (label + titre + description) */
.section-header {
  margin-bottom: var(--spacing-lg);
}

/* Ligne décorative sous le titre */
.section-title-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.section-title-line::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background-color: var(--color-accent);
}


/* --- BOUTONS ---
   .btn          : bouton principal (fond accent)
   .btn-outline  : bouton secondaire (contour)
   .btn-ghost    : bouton transparent
   ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
}
.btn-primary:hover {
  background-color: var(--color-text);
  color: var(--color-bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201, 163, 106, 0.3);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid rgba(245, 245, 245, 0.3);
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* --- Séparateur horizontal --- */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}


/* ============================================================
   7. GALERIE PHOTO
   ─────────────────────────────────────────────────────────────
   Grille responsive pour la page photo.html
   ============================================================ */

/* --- Filtres de catégorie --- */
.gallery-filters {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.filter-btn {
  padding: 0.5rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  color: var(--color-text-muted);
  background: transparent;
  transition: all var(--transition-fast);
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: rgba(201, 163, 106, 0.05);
}

/* --- Grille de photos --- */
.gallery-grid {
  display: grid;
  /* 3 colonnes sur desktop, auto-adapt sur mobile */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* --- Vignette individuelle --- */
.gallery-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4; /* Format portrait, change en 4/3 pour paysage */
  background-color: var(--color-bg-card);
  cursor: pointer;
}

/* Image dans la vignette */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

/* Overlay avec info au survol */
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,0.85) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-normal);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-text);
}
.gallery-item-cat {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-top: 3px;
}

/* --- Lightbox (zoom sur clic) --- */
.lightbox {
  display: none; /* Masqué par défaut, activé par JS */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border: 1px solid var(--color-border);
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 2rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: 1;
}
.lightbox-close:hover { color: var(--color-accent); }

/* Navigation lightbox */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17,17,17,0.7);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--color-accent);
  color: var(--color-bg-dark);
}


/* ============================================================
   8. SECTION VIDÉO
   ─────────────────────────────────────────────────────────────
   Mise en page pour les embeds vidéo (YouTube, Vimeo, local).
   ============================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

/* --- Carte vidéo individuelle --- */
.video-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Ratio 16:9 pour les vidéos */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 9/16 = 56.25% */
  height: 0;
  overflow: hidden;
  background-color: #000;
}

/* iframe (YouTube/Vimeo) ou video (fichier local) */
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Infos sous la vidéo */
.video-info {
  padding: 1.25rem 1.5rem;
}
.video-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.video-info p {
  font-size: 0.85rem;
  max-width: none;
}

/* --- Vidéo mise en avant (grande, pleine largeur) --- */
.video-featured {
  grid-column: 1 / -1; /* Prend toute la largeur */
}


/* ============================================================
   9. PRESTATIONS / CARDS
   ─────────────────────────────────────────────────────────────
   Cartes de prestations pour prestations.html
   ============================================================ */
.prestations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

/* --- Carte prestation --- */
.prestation-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  position: relative;
  transition: border-color var(--transition-normal),
              transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}
.prestation-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

/* Icône ou numéro en haut */
.prestation-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  line-height: 1;
}

.prestation-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.prestation-type {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--spacing-sm);
}

/* Liste des inclusions */
.prestation-includes {
  list-style: none;
  margin: var(--spacing-sm) 0;
  flex: 1;
}
.prestation-includes li {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.prestation-includes li::before {
  content: '—';
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Prix */
.prestation-price {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-text);
}
.prestation-price small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* Carte mise en avant (gold) */
.prestation-card.featured {
  border-color: var(--color-accent);
  background: linear-gradient(135deg,
    var(--color-bg-card) 0%,
    rgba(201, 163, 106, 0.05) 100%);
}
.prestation-card.featured .prestation-badge {
  position: absolute;
  top: -1px;
  right: 1.5rem;
  background: var(--color-accent);
  color: var(--color-bg-dark);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
}


/* ============================================================
   10. FORMULAIRE DE CONTACT
   ─────────────────────────────────────────────────────────────
   ============================================================ */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--spacing-xl);
  align-items: start;
}

/* Infos à gauche */
.contact-info h2 {
  margin-bottom: var(--spacing-sm);
}
.contact-info p {
  margin-bottom: var(--spacing-md);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.contact-detail-item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}
.contact-detail-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  padding-top: 2px;
}
.contact-detail-text span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.contact-detail-text p {
  font-size: 0.95rem;
  max-width: none;
}

/* Formulaire à droite */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Deux champs côte à côte */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-group label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Style unifié pour input, select, textarea */
.form-group input,
.form-group select,
.form-group textarea {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  padding: 0.85rem 1rem;
  outline: none;
  transition: border-color var(--transition-fast);
  width: 100%;
  border-radius: 2px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #555;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

/* Message de confirmation (affiché par JS) */
.form-success {
  display: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-accent);
  background: rgba(201, 163, 106, 0.08);
  color: var(--color-accent);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}


/* ============================================================
   11. FOOTER
   ─────────────────────────────────────────────────────────────
   ============================================================ */
.site-footer {
  padding: var(--spacing-lg) 0 var(--spacing-md);
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-xl);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-text);
}
.footer-logo span { color: var(--color-accent); }

.footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* Réseaux sociaux */
.footer-social {
  display: flex;
  gap: var(--spacing-sm);
  list-style: none;
}
.footer-social a {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.footer-social a:hover { color: var(--color-accent); }


/* ============================================================
   12. ANIMATIONS
   ─────────────────────────────────────────────────────────────
   Keyframes réutilisables dans tout le site.
   ============================================================ */

/* Apparition en remontant */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apparition simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animation de la ligne de défilement */
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  50.1%{ transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Classe utilitaire : déclenche fadeInUp quand la section devient visible */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Délais d'apparition en cascade pour les grilles */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }


/* ============================================================
   13. RESPONSIVE — MOBILE & TABLETTE
   ─────────────────────────────────────────────────────────────
   Ces règles s'appliquent seulement si l'écran est plus petit
   que la valeur indiquée (max-width).
   ============================================================ */

/* --- Tablette (< 900px) --- */
@media (max-width: 900px) {

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

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

  .video-grid {
    grid-template-columns: 1fr;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

/* --- Mobile (< 640px) --- */
@media (max-width: 640px) {

  /* Header */
  .site-header {
    padding: 1.2rem 1.5rem;
  }
  .site-header.scrolled {
    padding: 1rem 1.5rem;
  }

  /* Menu mobile : caché par défaut, affiché en colonne */
  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-bg-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    z-index: 999;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    font-size: 1rem;
    letter-spacing: 0.2em;
  }

  /* Bouton hamburger visible */
  .nav-toggle { display: flex; z-index: 1001; }

  /* Galerie en 1 colonne sur petit écran */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .prestations-grid {
    grid-template-columns: 1fr;
  }

  /* Formulaire : deux champs l'un sous l'autre */
  .form-row {
    grid-template-columns: 1fr;
  }

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