/* =====================================================
   Didier Descamps - Potier Céramiste
   Site moderne responsive
   
   GUIDE PÉDAGOGIQUE - CSS (Cascading Style Sheets)
   ================================================
   
   Ce fichier CSS contient tous les styles visuels du site.
   Il est organisé en sections logiques pour faciliter la maintenance.
   
   Concepts clés utilisés :
   - Variables CSS (Custom Properties) : pour réutiliser des valeurs
   - Flexbox : pour aligner des éléments sur un axe
   - CSS Grid : pour créer des mises en page complexes
   - Media Queries : pour le responsive design
   - Transitions et animations : pour les effets visuels
   - BEM (Block Element Modifier) : convention de nommage des classes
   
   ===================================================== */

/* =====================================================
   SECTION 0 : SCHÉMA DE COULEURS (ACCESSIBILITÉ)
   =====================================================
   
   La propriété color-scheme indique au navigateur et aux
   extensions (comme "Dark Background and Light Text") que
   le site est conçu pour le mode clair, mais peut s'adapter
   au mode sombre si l'utilisateur le préfère.
   
   Cela permet :
   - Aux extensions de mode sombre de mieux fonctionner
   - Au navigateur d'adapter les éléments natifs (scrollbars, 
     champs de formulaire, etc.) au thème de l'utilisateur
   - Une meilleure accessibilité pour les utilisateurs malvoyants
   ===================================================== */

:root {
  color-scheme: light dark;
}

/* =====================================================
   SECTION 1 : VARIABLES CSS (Custom Properties)
   =====================================================
   
   Les variables CSS permettent de stocker des valeurs réutilisables.
   Elles sont définies dans :root (l'élément html) pour être 
   accessibles partout dans le document.
   
   Syntaxe :
   - Déclaration : --nom-variable: valeur;
   - Utilisation : var(--nom-variable)
   
   Avantages :
   - Cohérence : toutes les couleurs sont au même endroit
   - Maintenance facile : changer une valeur = mise à jour partout
   - Lisibilité : noms explicites (--color-primary au lieu de #c24912)
   ===================================================== */

:root {
  /* -----------------------------------------------------
     PALETTE DE COULEURS
     -----------------------------------------------------
     Inspirée de la terre et de la céramique pour coller
     à l'identité visuelle du potier.
     
     Organisation en couleurs principales et variantes :
     - "primary" : couleur d'accent principale (orange terre cuite)
     - "secondary" : couleur complémentaire (beige grès)
     - Chaque couleur a des variantes "dark" et "light"
  */
  --color-primary: #c24912;       /* Orange terre cuite - couleur principale */
  --color-primary-dark: #9a3a0e;  /* Version plus foncée pour le hover */
  --color-primary-light: #e86a3a; /* Version plus claire pour les accents */
  --color-secondary: #b6a475;     /* Beige grès - couleur secondaire */
  --color-secondary-dark: #8f7d52;
  --color-secondary-light: #d4c9a3;
  
  /* -----------------------------------------------------
     COULEURS NEUTRES
     -----------------------------------------------------
     Les neutres servent pour les arrière-plans et le texte.
     Ils créent un contraste lisible et une ambiance apaisante.
  */
  --color-bg: #faf8f5;           /* Arrière-plan principal (blanc cassé chaud) */
  --color-bg-alt: #f0ede6;       /* Arrière-plan alternatif (pour les sections) */
  --color-text: #2d2a26;         /* Texte principal (quasi-noir chaud) */
  --color-text-light: #5a5550;   /* Texte secondaire (gris foncé) */
  --color-white: #ffffff;        /* Blanc pur */
  --color-black: #1a1815;        /* Noir chaud (pas un noir pur) */
  
  /* -----------------------------------------------------
     TYPOGRAPHIE
     -----------------------------------------------------
     Deux familles de polices :
     - "heading" : police décorative pour les titres (Playfair Display)
     - "body" : police lisible pour le texte (Open Sans)
     
     Les polices de secours (fallback) garantissent un affichage
     même si Google Fonts ne charge pas.
  */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* -----------------------------------------------------
     SYSTÈME D'ESPACEMENTS
     -----------------------------------------------------
     Utiliser des espacements cohérents crée une harmonie visuelle.
     
     L'unité "rem" est relative à la taille de police de l'élément racine (html).
     Par défaut, 1rem = 16px.
     
     Échelle : xs < sm < md < lg < xl < 2xl
  */
  --space-xs: 0.25rem;   /* 4px - espacement minimal */
  --space-sm: 0.5rem;    /* 8px - petit espacement */
  --space-md: 1rem;      /* 16px - espacement standard */
  --space-lg: 2rem;      /* 32px - grand espacement */
  --space-xl: 3rem;      /* 48px - très grand espacement */
  --space-2xl: 5rem;     /* 80px - espacement de section */
  
  /* -----------------------------------------------------
     DIMENSIONS GLOBALES
     -----------------------------------------------------
     Ces valeurs contrôlent la structure générale du site.
  */
  --max-width: 1200px;     /* Largeur maximale du contenu (évite les lignes trop longues) */
  --header-height: 80px;   /* Hauteur du header fixe */
  
  /* -----------------------------------------------------
     TRANSITIONS
     -----------------------------------------------------
     Les transitions créent des animations fluides lors des
     changements d'état (hover, focus, etc.).
     
     Format : durée fonction-timing
     - "ease" : accélère puis ralentit (naturel)
  */
  --transition-fast: 0.2s ease;    /* Animation rapide (boutons) */
  --transition-normal: 0.3s ease;  /* Animation standard */
  --transition-slow: 0.5s ease;    /* Animation lente (images) */
  
  /* -----------------------------------------------------
     OMBRES (BOX-SHADOW)
     -----------------------------------------------------
     Les ombres ajoutent de la profondeur et hiérarchisent les éléments.
     
     Format : décalage-x décalage-y flou couleur
     Plus le flou est grand, plus l'ombre est douce.
  */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);   /* Ombre légère */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);   /* Ombre moyenne */
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15); /* Ombre prononcée */
  
  /* -----------------------------------------------------
     COINS ARRONDIS (BORDER-RADIUS)
     -----------------------------------------------------
     Les arrondis adoucissent l'apparence des éléments.
  */
  --radius-sm: 4px;        /* Léger arrondi */
  --radius-md: 8px;        /* Arrondi moyen (boutons, cartes) */
  --radius-lg: 16px;       /* Arrondi prononcé */
  --radius-full: 50%;      /* Cercle parfait (pour les icônes) */
}

/* =====================================================
   SECTION 2 : RESET CSS
   =====================================================
   
   Un "reset" normalise l'apparence par défaut des navigateurs.
   Chaque navigateur a ses propres styles par défaut, ce reset
   garantit une base cohérente sur tous les navigateurs.
   
   Le sélecteur * cible TOUS les éléments.
   ::before et ::after ciblent les pseudo-éléments.
   ===================================================== */

*,
*::before,
*::after {
  /* box-sizing: border-box fait que padding et border sont
     INCLUS dans la largeur/hauteur déclarée.
     C'est beaucoup plus intuitif pour le développement ! */
  box-sizing: border-box;
  
  /* Supprime les marges et paddings par défaut des navigateurs */
  margin: 0;
  padding: 0;
}

/* Configuration de l'élément html */
html {
  /* scroll-behavior: smooth active le défilement fluide
     lors des clics sur les liens d'ancrage (#section) */
  scroll-behavior: smooth;
  
  /* Définit la taille de base du texte.
     Tous les "rem" seront calculés à partir de cette valeur. */
  font-size: 16px;
}

/* Configuration du body (corps de la page) */
body {
  /* Utilise la variable de police définie plus haut */
  font-family: var(--font-body);
  font-size: 1rem;       /* = 16px (1 × la taille racine) */
  line-height: 1.6;      /* Interligne de 1.6 × la taille du texte (bonne lisibilité) */
  color: var(--color-text);
  background-color: var(--color-bg);
  
  /* min-height: 100vh garantit que le body fait au moins
     toute la hauteur de la fenêtre (vh = viewport height) */
  min-height: 100vh;
  
  /* Flexbox pour que le footer reste en bas même si
     le contenu est court (grâce à margin-top: auto sur le footer) */
  display: flex;
  flex-direction: column;
}

/* =====================================================
   SECTION 3 : TYPOGRAPHIE
   =====================================================
   
   Définit l'apparence de base de tous les éléments textuels.
   Ces styles peuvent être surchargés par des classes spécifiques.
   ===================================================== */

/* Styles pour tous les niveaux de titres */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); /* Police décorative */
  font-weight: 600;                  /* Semi-bold */
  line-height: 1.2;                  /* Interligne serré pour les titres */
  color: var(--color-black);
}

/* -----------------------------------------------------
   CLAMP() - Typographie fluide
   -----------------------------------------------------
   La fonction clamp(min, préféré, max) permet une taille
   de police responsive qui s'adapte à la largeur de l'écran.
   
   Exemple : clamp(2rem, 5vw, 3.5rem)
   - Minimum : 2rem (32px) sur petits écrans
   - Préféré : 5vw (5% de la largeur de la fenêtre)
   - Maximum : 3.5rem (56px) sur grands écrans
   
   vw = viewport width (1vw = 1% de la largeur de la fenêtre)
*/
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }     /* Grand titre */
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }   /* Titre de section */
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); } /* Sous-titre */
h4 { font-size: 1.25rem; }                       /* Petit titre */

/* Les paragraphes ont une marge en bas pour l'espacement */
p {
  margin-bottom: var(--space-md);
}

/* Liens hypertextes */
a {
  color: var(--color-primary);
  text-decoration: none;  /* Supprime le soulignement par défaut */
  transition: color var(--transition-fast); /* Animation de changement de couleur */
}

/* État :hover = quand la souris survole l'élément */
a:hover {
  color: var(--color-primary-dark);
}

/* Images responsives par défaut */
img {
  max-width: 100%;   /* Ne dépasse jamais son conteneur */
  height: auto;      /* Conserve les proportions */
  display: block;    /* Supprime l'espace sous l'image (comportement inline) */
}

/* =====================================================
   SECTION 4 : CLASSES UTILITAIRES
   =====================================================
   
   Les classes utilitaires sont des styles réutilisables
   qui font une seule chose. On les combine dans le HTML.
   
   Exemple : <div class="container section text-center">
   ===================================================== */

/* Container = limite la largeur du contenu et le centre */
.container {
  width: 100%;
  max-width: var(--max-width);  /* Maximum 1200px */
  margin: 0 auto;               /* Centrage horizontal (marges automatiques) */
  padding: 0 var(--space-lg);   /* Espacement latéral sur mobile */
}

/* Section = espacement vertical pour séparer les blocs */
.section {
  padding: var(--space-2xl) 0;  /* 80px en haut et en bas */
}

/* Variante de section avec fond alternatif */
.section--alt {
  background-color: var(--color-bg-alt);
}

/* Alignement du texte */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }

/* -----------------------------------------------------
   ACCESSIBILITÉ - .visually-hidden
   -----------------------------------------------------
   Cette classe cache visuellement un élément tout en le
   gardant accessible aux lecteurs d'écran.
   
   Utilisée pour des labels ou instructions destinés
   uniquement aux utilisateurs de technologies d'assistance.
   
   C'est mieux que "display: none" qui cache aussi aux
   lecteurs d'écran !
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   SECTION 5 : HEADER & NAVIGATION
   =====================================================
   
   Le header est "fixed" (fixe) : il reste visible en haut
   de l'écran lors du défilement.
   
   Convention BEM (Block Element Modifier) :
   - .header = Block (le composant principal)
   - .header__inner = Element (partie du composant)
   - .header.scrolled = Modifier (état différent)
   ===================================================== */

.header {
  /* Position fixe : reste en haut lors du scroll */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  height: var(--header-height);
  
  /* Fond semi-transparent avec effet de flou (glassmorphism) */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);  /* Flou de l'arrière-plan visible */
  
  box-shadow: var(--shadow-sm);
  
  /* z-index élevé pour que le header soit au-dessus du contenu */
  z-index: 1000;
  
  transition: all var(--transition-normal);
}

/* État "scrolled" = quand l'utilisateur a défilé la page
   (classe ajoutée par JavaScript) */
.header.scrolled {
  height: 60px;                   /* Plus compact */
  box-shadow: var(--shadow-md);   /* Ombre plus prononcée */
}

/* Conteneur interne du header avec Flexbox */
.header__inner {
  display: flex;
  align-items: center;           /* Centre verticalement */
  justify-content: space-between; /* Logo à gauche, nav à droite */
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Logo avec Flexbox pour aligner image et texte */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);  /* Espace entre l'image et le texte */
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-black);
}

.logo img {
  height: 50px;
  width: auto;
  transition: height var(--transition-normal);
}

/* Logo plus petit quand on a scrollé */
.header.scrolled .logo img {
  height: 40px;
}

/* -----------------------------------------------------
   NAVIGATION - Menu horizontal
   ----------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
}

/* Liste de liens de navigation */
.nav__list {
  display: flex;
  list-style: none;  /* Supprime les puces */
  gap: var(--space-lg);
}

/* Liens de navigation avec effet de soulignement animé */
.nav__link {
  position: relative;  /* Nécessaire pour le pseudo-élément ::after */
  color: var(--color-text);
  font-weight: 500;
  padding: var(--space-sm) 0;
}

/* -----------------------------------------------------
   PSEUDO-ÉLÉMENT ::after
   -----------------------------------------------------
   ::after crée un élément virtuel APRÈS le contenu.
   Ici, c'est la ligne de soulignement qui s'anime.
   
   Initialement width: 0, puis width: 100% au hover.
*/
.nav__link::after {
  content: '';            /* Obligatoire pour afficher le pseudo-élément */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;               /* Invisible par défaut */
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-normal);
}

/* États hover et active */
.nav__link:hover,
.nav__link.active {
  color: var(--color-primary);
}

.nav__link:hover::after,
.nav__link.active::after {
  width: 100%;  /* La ligne s'étend sur toute la largeur */
}

/* -----------------------------------------------------
   SOUS-MENU DROPDOWN
   -----------------------------------------------------
   Menu déroulant qui apparaît au survol d'un élément parent.
*/
.nav__item--dropdown {
  position: relative;  /* Point de référence pour le dropdown */
}

.nav__dropdown {
  position: absolute;
  top: 100%;            /* Juste en dessous du lien parent */
  left: 50%;
  transform: translateX(-50%);  /* Centre horizontalement */
  min-width: 200px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  
  /* Caché par défaut */
  opacity: 0;
  visibility: hidden;
  
  transition: all var(--transition-normal);
  list-style: none;
}

/* Affiche le dropdown au survol du parent */
.nav__item--dropdown:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
}

/* Liens dans le dropdown */
.nav__dropdown-link {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text);
  white-space: nowrap;  /* Empêche le retour à la ligne */
}

.nav__dropdown-link:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* -----------------------------------------------------
   MENU BURGER (mobile)
   -----------------------------------------------------
   Le burger est composé de 3 lignes qui se transforment
   en X quand le menu est ouvert.
*/
.burger {
  display: none;  /* Caché par défaut (visible seulement sur mobile) */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 1001;  /* Au-dessus de la navigation mobile */
}

/* Chaque ligne du burger */
.burger__line {
  width: 100%;
  height: 3px;
  background-color: var(--color-black);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

/* Animation du burger en X
   transform combine translateY (déplacement) et rotate (rotation) */
.burger.active .burger__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.active .burger__line:nth-child(2) {
  opacity: 0;  /* La ligne du milieu disparaît */
}

.burger.active .burger__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* =====================================================
   SECTION 6 : HERO (Section d'accueil)
   =====================================================
   
   La section "hero" est la première chose que voit l'utilisateur.
   Elle occupe toute la hauteur de l'écran avec une image de fond
   et un overlay (couche semi-transparente) pour la lisibilité du texte.
   ===================================================== */

.hero {
  position: relative;  /* Point de référence pour les éléments absolus */
  min-height: 100vh;   /* Toute la hauteur de la fenêtre */
  display: flex;
  align-items: center; /* Centre verticalement le contenu */
  padding-top: var(--header-height);  /* Compense le header fixe */
  overflow: hidden;    /* Cache ce qui dépasse */
}

/* Image de fond en position absolue */
.hero__background {
  position: absolute;
  /* "inset: 0" = top: 0; right: 0; bottom: 0; left: 0; */
  inset: 0;
  z-index: -1;  /* Derrière le contenu */
}

.hero__background img {
  width: 100%;
  height: 100%;
  /* object-fit: cover = l'image remplit le conteneur en recadrant
     si nécessaire, sans déformation */
  object-fit: cover;
}

/* Overlay = gradient semi-transparent pour améliorer la lisibilité */
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Gradient diagonal avec plusieurs stops de couleur */
  background: linear-gradient(
    135deg,                            /* Direction : coin haut-gauche vers bas-droite */
    rgba(26, 24, 21, 0.7) 0%,          /* Noir 70% opacité au début */
    rgba(26, 24, 21, 0.4) 50%,         /* Noir 40% au milieu */
    rgba(194, 73, 18, 0.3) 100%        /* Orange 30% à la fin */
  );
}

/* Contenu textuel du hero */
.hero__content {
  position: relative;  /* Pour passer au-dessus de l'overlay */
  z-index: 1;
  max-width: 700px;
  color: var(--color-white);
  padding: var(--space-2xl);
}

/* Sous-titre stylisé en majuscules */
.hero__subtitle {
  font-size: 1.125rem;
  text-transform: uppercase;    /* Transforme en MAJUSCULES */
  letter-spacing: 3px;          /* Espace entre les lettres */
  margin-bottom: var(--space-md);
  color: var(--color-secondary-light);
}

.hero__title {
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.hero__description {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  opacity: 0.9;  /* Légèrement transparent */
}

/* Conteneur des boutons d'appel à l'action */
.hero__cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;  /* Les boutons passent à la ligne si nécessaire */
}

/* =====================================================
   SECTION 7 : BOUTONS
   =====================================================
   
   Styles de boutons réutilisables avec différentes variantes.
   La classe de base .btn contient les styles communs,
   les modificateurs (.btn--primary, etc.) ajoutent les couleurs.
   ===================================================== */

.btn {
  /* inline-flex = comme flex mais en élément inline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
}

/* Bouton principal (rempli avec la couleur primaire) */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  /* Effet de "soulèvement" au survol */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Bouton outline (bordure sans remplissage) */
.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Bouton secondaire */
.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-black);
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* =====================================================
   SECTION 8 : SECTIONS GÉNÉRALES
   =====================================================
   
   Styles communs pour les en-têtes de section et
   les blocs de présentation.
   ===================================================== */

/* En-tête de section centré */
.section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);  /* Centré avec marge en bas */
}

.section__title {
  margin-bottom: var(--space-md);
}

.section__subtitle {
  color: var(--color-text-light);
  font-size: 1.125rem;
}

/* -----------------------------------------------------
   ABOUT / PRÉSENTATION
   -----------------------------------------------------
   Layout en deux colonnes avec CSS Grid.
*/
.about {
  display: grid;
  /* Deux colonnes de même taille */
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;  /* Centre verticalement les éléments */
}

.about__image {
  border-radius: var(--radius-lg);
  overflow: hidden;     /* Cache les coins de l'image qui dépassent */
  box-shadow: var(--shadow-lg);
}

.about__content h2 {
  margin-bottom: var(--space-lg);
}

/* Grille pour les caractéristiques/features */
.about__features {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Chaque feature avec icône + texte */
.feature {
  display: flex;
  align-items: flex-start;  /* Aligne en haut */
  gap: var(--space-md);
}

/* Icône ronde */
.feature__icon {
  flex-shrink: 0;  /* Empêche le rétrécissement de l'icône */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);  /* Cercle parfait */
}

.feature__icon svg {
  width: 24px;
  height: 24px;
}

.feature__text h4 {
  margin-bottom: var(--space-xs);
}

.feature__text p {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* =====================================================
   SECTION 9 : GALERIE PHOTOS
   =====================================================
   
   Grille responsive d'images avec effet de survol.
   Utilise CSS Grid avec auto-fill pour un nombre de
   colonnes automatique.
   ===================================================== */

.gallery {
  display: grid;
  /* auto-fill = remplit avec autant de colonnes que possible
     minmax(280px, 1fr) = chaque colonne fait minimum 280px,
     maximum une fraction égale de l'espace disponible */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.gallery__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  /* aspect-ratio définit le rapport largeur/hauteur */
  aspect-ratio: 4/3;
}

/* -----------------------------------------------------
   IMAGES PORTRAIT
   -----------------------------------------------------
   Pour les images en mode portrait (verticales), ajouter
   la classe "gallery__item--portrait" au lien <a>.
   
   Exemple :
   <a href="images/photo.jpg" class="gallery__item gallery__item--portrait">
   
   L'image prendra alors un ratio 3/4 (inverse du paysage)
   et occupera 2 lignes dans la grille pour plus d'impact.
*/
.gallery__item--portrait {
  aspect-ratio: 3/4;
  grid-row: span 2;  /* Occupe 2 lignes pour plus d'impact visuel */
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Effet de zoom au survol */
.gallery__item:hover img {
  transform: scale(1.05);  /* Agrandit de 5% */
}

/* Overlay avec gradient qui apparaît au survol */
.gallery__overlay {
  position: absolute;
  inset: 0;
  /* Gradient du bas vers le haut (légende visible) */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.6) 0%,     /* Noir en bas */
    transparent 50%         /* Transparent en haut */
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  display: flex;
  align-items: flex-end;    /* Contenu en bas */
  padding: var(--space-lg);
}

.gallery__item:hover .gallery__overlay {
  opacity: 1;
}

.gallery__caption {
  color: var(--color-white);
  font-weight: 500;
}

/* =====================================================
   SECTION 10 : LIGHTBOX
   =====================================================
   
   La lightbox est une fenêtre modale qui affiche les images
   en grand format. Elle couvre tout l'écran.
   
   - Cachée par défaut (display: none)
   - Affichée quand la classe "active" est ajoutée par JS
   ===================================================== */

.lightbox {
  position: fixed;
  inset: 0;                            /* Couvre tout l'écran */
  z-index: 2000;                       /* Au-dessus de tout */
  background-color: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

/* Affiche la lightbox */
.lightbox.active {
  display: flex;
}

.lightbox__content {
  position: relative;
  /* vw et vh = pourcentage de la fenêtre */
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox__image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;  /* L'image entière est visible */
  border-radius: var(--radius-sm);
}

/* Bouton de fermeture */
.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close:hover {
  background-color: var(--color-primary);
}

/* Boutons de navigation (précédent/suivant) */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);  /* Centre verticalement */
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__nav:hover {
  background-color: var(--color-primary);
}

.lightbox__prev {
  left: var(--space-lg);
}

.lightbox__next {
  right: var(--space-lg);
}

/* Légende en bas de la lightbox */
.lightbox__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-white);
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}

/* =====================================================
   SECTION 11 : CATÉGORIES / RÉALISATIONS
   =====================================================
   
   Cartes de catégories avec image de fond et overlay.
   Effet de changement de couleur au survol.
   ===================================================== */

.categories {
  display: grid;
  /* auto-fit = similaire à auto-fill mais "collapse" les pistes vides */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 3/2;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.category-card:hover img {
  transform: scale(1.1);  /* Zoom plus prononcé que la galerie */
}

/* Overlay avec gradient trois couleurs */
.category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,      /* Noir fort en bas */
    rgba(0,0,0,0.2) 50%,
    transparent 100%          /* Transparent en haut */
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* Contenu en bas */
  padding: var(--space-xl);
  transition: background var(--transition-normal);
}

/* Au survol, l'overlay devient orange */
.category-card:hover .category-card__overlay {
  background: linear-gradient(
    to top,
    rgba(194, 73, 18, 0.9) 0%,    /* Orange primaire */
    rgba(194, 73, 18, 0.4) 50%,
    transparent 100%
  );
}

.category-card__title {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.category-card__description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* =====================================================
   SECTION 12 : FORMULAIRE DE CONTACT
   =====================================================
   
   Layout en deux colonnes : infos de contact + formulaire.
   ===================================================== */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.contact__info h3 {
  margin-bottom: var(--space-lg);
}

/* Chaque item de contact (adresse, téléphone, email) */
.contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Icône ronde */
.contact__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
}

.contact__icon svg {
  width: 20px;
  height: 20px;
}

.contact__item a {
  color: var(--color-text);
}

.contact__item a:hover {
  color: var(--color-primary);
}

/* -----------------------------------------------------
   FORMULAIRE - Styles des champs
   ----------------------------------------------------- */
.form {
  background-color: var(--color-white);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form__group {
  margin-bottom: var(--space-lg);
}

/* Labels des champs */
.form__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* Champs de saisie (input et textarea) */
.form__input,
.form__textarea {
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-body);
  font-size: 1rem;
  border: 2px solid var(--color-bg-alt);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background-color: var(--color-bg);
}

/* État :focus = quand le champ est sélectionné */
.form__input:focus,
.form__textarea:focus {
  outline: none;  /* Supprime le contour par défaut du navigateur */
  border-color: var(--color-primary);
  background-color: var(--color-white);
}

.form__textarea {
  min-height: 150px;
  resize: vertical;  /* Redimensionnable uniquement en hauteur */
}

.form__submit {
  width: 100%;
}

/* Carte Google Maps */
.map {
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.map iframe {
  width: 100%;
  height: 300px;
  border: none;
}

/* =====================================================
   SECTION 13 : FEED INSTAGRAM
   =====================================================
   
   Grille de 6 colonnes pour afficher des photos Instagram.
   ===================================================== */

.instagram {
  text-align: center;
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* 6 colonnes égales */
  gap: var(--space-sm);
}

.instagram__item {
  position: relative;
  aspect-ratio: 1;  /* Carré (1:1) */
  overflow: hidden;
}

.instagram__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.instagram__item:hover img {
  transform: scale(1.1);
}

/* Overlay avec icône Instagram */
.instagram__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(194, 73, 18, 0.8);  /* Orange semi-transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.instagram__item:hover .instagram__overlay {
  opacity: 1;
}

.instagram__overlay svg {
  width: 32px;
  height: 32px;
  color: var(--color-white);
}

.instagram__link {
  margin-top: var(--space-xl);
}

/* =====================================================
   SECTION 14 : FOOTER (Pied de page)
   =====================================================
   
   Footer sombre avec grille de 4 colonnes :
   - Colonne 1 (2fr) : logo et description
   - Colonnes 2-4 (1fr chacune) : liens, horaires, contact
   
   Le margin-top: auto pousse le footer en bas de la page
   même si le contenu est court (grâce au flex sur body).
   ===================================================== */

.footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--space-2xl) 0;
  margin-top: auto;  /* Pousse le footer en bas */
}

.footer__grid {
  display: grid;
  /* 2fr = 2 parts, 1fr = 1 part */
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
}

.footer__brand {
  max-width: 300px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

/* Filtre CSS pour rendre le logo blanc */
.footer__logo img {
  height: 60px;
  filter: brightness(0) invert(1);  /* Transforme en blanc */
}

.footer__description {
  color: rgba(255, 255, 255, 0.7);  /* Blanc semi-transparent */
  font-size: 0.9rem;
  line-height: 1.8;
}

.footer__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin-bottom: var(--space-lg);
  color: var(--color-white);
}

/* Liste de liens */
.footer__links {
  list-style: none;
}

.footer__links li {
  margin-bottom: var(--space-sm);
}

.footer__links a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-primary-light);
}

/* Infos de contact */
.footer__contact p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

/* Icônes réseaux sociaux */
.footer__social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.footer__social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.footer__social a:hover {
  background-color: var(--color-primary);
  transform: translateY(-3px);  /* Effet de soulèvement */
}

/* Barre inférieure du footer */
.footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.5);
  margin-left: var(--space-lg);
}

.footer__legal a:hover {
  color: var(--color-white);
}

/* Badge "Alimentaire" (certification) */
.badge-alimentaire {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.badge-alimentaire img {
  height: 24px;
  width: auto;
}

/* =====================================================
   SECTION 15 : PAGES INTERNES
   =====================================================
   
   Styles pour les pages autres que l'accueil :
   réalisations, technique, prix, mentions légales.
   ===================================================== */

/* En-tête de page coloré */
.page-header {
  background-color: var(--color-primary);
  /* calc() permet de faire des calculs CSS */
  padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
  text-align: center;
  color: var(--color-white);
}

.page-header__title {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

/* Fil d'Ariane (breadcrumb) */
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb a:hover {
  color: var(--color-white);
}

.breadcrumb span {
  color: rgba(255, 255, 255, 0.6);
}

/* -----------------------------------------------------
   LISTE DE PRIX
   ----------------------------------------------------- */
.price-list {
  display: grid;
  gap: var(--space-md);
}

.price-item {
  display: flex;
  justify-content: space-between;  /* Nom à gauche, prix à droite */
  align-items: center;
  padding: var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.price-item__name {
  font-weight: 500;
}

.price-item__price {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-primary);
}

/* -----------------------------------------------------
   CARTES DE COURS
   ----------------------------------------------------- */
.course-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.course-card__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
}

.course-card__icon svg {
  width: 40px;
  height: 40px;
}

.course-card__title {
  margin-bottom: var(--space-md);
}

.course-card__description {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

/* =====================================================
   SECTION 16 : RESPONSIVE DESIGN (Media Queries)
   =====================================================
   
   Les media queries permettent d'adapter les styles
   en fonction de la taille de l'écran.
   
   Approche "desktop-first" : les styles de base sont
   pour les grands écrans, puis on adapte pour les plus petits.
   
   Breakpoints courants :
   - 1024px : tablettes paysage
   - 768px : tablettes portrait
   - 480px : mobiles
   ===================================================== */

/* TABLETTES PAYSAGE ET EN-DESSOUS (max-width: 1024px) */
@media (max-width: 1024px) {
  /* Footer en 2 colonnes au lieu de 4 */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Section "about" en une seule colonne */
  .about {
    grid-template-columns: 1fr;
  }
  
  /* Image au-dessus du texte (order: -1 = premier) */
  .about__image {
    order: -1;
  }
  
  /* Contact en une seule colonne */
  .contact {
    grid-template-columns: 1fr;
  }
}

/* TABLETTES PORTRAIT ET EN-DESSOUS (max-width: 768px) */
@media (max-width: 768px) {
  /* Réduit la hauteur du header */
  :root {
    --header-height: 70px;
  }
  
  /* Affiche le menu burger */
  .burger {
    display: flex;
  }
  
  /* Navigation en panneau latéral (off-canvas) */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;  /* Caché à droite */
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--color-white);
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
    box-shadow: var(--shadow-lg);
    transition: right var(--transition-normal);
    overflow-y: auto;  /* Scroll si le menu est long */
  }
  
  /* Menu ouvert = glisse vers la gauche */
  .nav.active {
    right: 0;
  }
  
  /* Menu vertical sur mobile */
  .nav__list {
    flex-direction: column;
    gap: 0;
  }
  
  .nav__link {
    display: block;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-bg-alt);
  }
  
  /* Dropdown en accordéon sur mobile */
  .nav__dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    padding-left: var(--space-lg);
    display: none;  /* Caché par défaut */
  }
  
  /* Affiche le dropdown quand le parent est actif */
  .nav__item--dropdown.active .nav__dropdown {
    display: block;
  }
  
  /* Hero centré sur mobile */
  .hero__content {
    padding: var(--space-lg);
    text-align: center;
  }
  
  .hero__cta {
    justify-content: center;
  }
  
  /* Sections plus compactes */
  .section {
    padding: var(--space-xl) 0;
  }
  
  .container {
    padding: 0 var(--space-md);
  }
  
  /* Galerie en 2 colonnes */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  /* Portrait sur tablette : n'occupe qu'une ligne */
  .gallery__item--portrait {
    grid-row: span 1;
  }
  
  /* Catégories en une colonne */
  .categories {
    grid-template-columns: 1fr;
  }
  
  /* Instagram en 3 colonnes */
  .instagram__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Footer centré sur mobile */
  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer__brand {
    max-width: none;
  }
  
  .footer__social {
    justify-content: center;
  }
  
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
  
  .footer__legal a {
    margin: 0 var(--space-sm);
  }
  
  /* Boutons de lightbox plus petits sur mobile */
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  
  .lightbox__prev {
    left: var(--space-sm);
  }
  
  .lightbox__next {
    right: var(--space-sm);
  }
}

/* MOBILES (max-width: 480px) */
@media (max-width: 480px) {
  /* Réduit la taille de base du texte */
  html {
    font-size: 14px;  /* Tous les rem seront plus petits */
  }
  
  /* Galerie en une seule colonne */
  .gallery {
    grid-template-columns: 1fr;
  }
  
  /* Instagram en 2 colonnes */
  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Boutons empilés verticalement */
  .hero__cta {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;  /* Boutons pleine largeur */
  }
}

/* =====================================================
   SECTION 17 : ANIMATIONS
   =====================================================
   
   @keyframes définit une animation étape par étape.
   L'animation est ensuite appliquée via la propriété "animation".
   
   Format : animation: nom durée fonction-timing mode-remplissage;
   - "forwards" = conserve le style final après l'animation
   ===================================================== */

@keyframes fadeIn {
  /* État de départ */
  from {
    opacity: 0;
    transform: translateY(20px);  /* Décalé vers le bas */
  }
  /* État final */
  to {
    opacity: 1;
    transform: translateY(0);     /* Position normale */
  }
}

/* Classe à appliquer aux éléments pour les animer */
.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

/* =====================================================
   SECTION 18 : STYLES D'IMPRESSION
   =====================================================
   
   @media print s'applique quand l'utilisateur imprime la page.
   On cache les éléments interactifs et on optimise pour le papier.
   ===================================================== */

@media print {
  /* Cache les éléments non essentiels */
  .header,
  .footer,
  .lightbox,
  .burger {
    display: none;
  }
  
  /* Optimise pour l'impression */
  body {
    font-size: 12pt;     /* Points au lieu de pixels */
    color: #000;         /* Noir pur pour l'encre */
    background: #fff;    /* Fond blanc */
  }
  
  /* Les liens sont soulignés sur papier */
  a {
    text-decoration: underline;
    color: #000;
  }
}