/* ============================================================================
   HD INGÉ CONSEIL - DESIGN SYSTEM CSS
   ============================================================================

   FILE: styles.css
   VERSION: 2.0.0
   LAST UPDATE: 2025-11-24
   AUTHOR: HD Ingé Conseil / Claude Code Assistant

   ============================================================================
   PURPOSE / OBJECTIF
   ============================================================================
   Ce fichier constitue la feuille de styles principale du site hd-ingeconseil.be.
   Il implémente un Design System complet avec :
   - Un système typographique centralisé (Text System)
   - Des variables CSS pour les couleurs, espacements et transitions
   - Des composants réutilisables (cartes, boutons, formulaires, etc.)
   - Un système responsive mobile-first
   - Support du mode clair/sombre

   ============================================================================
   ARCHITECTURE / STRUCTURE
   ============================================================================
   Le fichier est organisé en sections numérotées :

   SECTION 1  : Variables CSS globales (couleurs, thèmes)
   SECTION 2  : TEXT SYSTEM - Système typographique centralisé ★ NOUVEAU
   SECTION 3  : Reset & styles de base
   SECTION 4  : Layout principal (sidebar, main)
   SECTION 5  : Sidebar rétractable
   SECTION 6  : Zone principale
   SECTION 7  : Top Bar (header)
   SECTION 8  : Contenu de page & animations
   SECTION 9  : Sections & containers
   SECTION 10 : Hero section
   SECTION 11 : Boutons
   SECTION 12 : Cards
   SECTION 13 : Stats section
   SECTION 14 : Badges
   SECTION 15 : Alertes
   SECTION 16 : Formulaires
   SECTION 17 : Footer
   SECTION 18 : Sections spécifiques (about, CTA, contact, services)
   SECTION 19 : Utilitaires
   SECTION 20 : Responsive
   SECTION 21 : Intro animation
   SECTION 22 : Language selector
   SECTION 23 : Projects page
   SECTION 24 : Logo handling
   SECTION 25 : Animations branding kit
   SECTION 26 : Hero image section
   SECTION 27 : Corporate card style
   SECTION 28 : Enhanced service cards
   SECTION 29 : Section divider
   SECTION 30 : Section backgrounds
   SECTION 31 : Cookie consent banner
   SECTION 32 : Cookie consent popup

   ============================================================================
   COMMENT ÉTENDRE CE FICHIER
   ============================================================================
   1. Pour ajouter une nouvelle taille de texte : modifier la SECTION 2
   2. Pour ajouter une nouvelle couleur : modifier la SECTION 1 (:root)
   3. Pour ajouter un nouveau composant : créer une nouvelle section numérotée
   4. Toujours utiliser les classes du Text System (.text-*) pour les textes
   5. Toujours utiliser les variables CSS (--*) pour les valeurs

   ============================================================================
   DÉPENDANCES
   ============================================================================
   - Google Fonts : Inter (400, 500, 600, 700)
   - Pas de framework CSS externe
   - Pas de préprocesseur (CSS vanilla)

   ============================================================================ */


/* ============================================================================
   SECTION 1 : VARIABLES CSS - COULEURS, THÈMES & ESPACEMENTS
   ============================================================================

   PURPOSE:
   Centralise toutes les valeurs réutilisables du design system.
   Permet de modifier l'apparence globale du site depuis un seul endroit.

   USAGE:
   - Utiliser var(--nom-variable) dans les styles
   - Le mode sombre (.dark) surcharge les variables nécessaires

   COLOR PALETTE:
   - brand-blue     : Couleur corporate principale (headers, navigation)
   - brand-charcoal : Fonds sombres, blocs techniques
   - brand-slate    : Texte secondaire, bordures légères
   - brand-forest   : Accent principal, CTA, succès (vert forêt)
   - brand-violet   : Usage très limité, accents occasionnels

   ============================================================================ */

:root {
  /* --------------------------------------------------------------------------
     BRAND COLORS - Palette de couleurs de la marque
     --------------------------------------------------------------------------
     Ces couleurs définissent l'identité visuelle de HD Ingé Conseil.
     Ne pas les modifier sans validation du design.
     -------------------------------------------------------------------------- */
  --brand-blue: #0f4c81;           /* Bleu ingénieur - Headers, nav, corporate */
  --brand-charcoal: #1e293b;       /* Charbon - Fonds sombres, blocs techniques */
  --brand-slate: #64748b;          /* Slate - Texte secondaire, bordures */
  --brand-forest: #059669;         /* Forest - Accent principal, CTA, succès */
  --brand-forest-dark: #047857;    /* Forest sombre - États hover */
  --brand-forest-light: #10b981;   /* Forest clair - Accents, highlights */
  --brand-violet: #7c3aed;         /* Violet - Usage très limité */

  /* --------------------------------------------------------------------------
     MODE CLAIR (défaut) - Light Mode Theme
     --------------------------------------------------------------------------
     Variables sémantiques qui changent selon le mode (clair/sombre).
     Utiliser ces variables plutôt que les couleurs directes.
     -------------------------------------------------------------------------- */
  --bg: #f8fafc;                   /* Arrière-plan principal de la page */
  --bg-card: #ffffff;              /* Arrière-plan des cartes et composants */
  --text-primary: #0f172a;         /* Texte principal (titres, corps important) */
  --text-secondary: #475569;       /* Texte secondaire (descriptions, meta) */
  --text-muted: #94a3b8;           /* Texte atténué (labels, captions) */
  --border: #e2e8f0;               /* Bordures et séparateurs */

  /* Navigation */
  --nav-bg: var(--brand-blue);     /* Fond de la navigation principale */
  --nav-text: #ffffff;             /* Texte de la navigation */

  /* Sidebar */
  --sidebar-bg: #ffffff;           /* Fond de la sidebar (clair pour voir le logo) */
  --sidebar-text: #334155;         /* Texte de la sidebar */
  --sidebar-collapsed-width: 12px; /* Largeur sidebar fermée (trait visible) */
  --sidebar-expanded-width: 260px; /* Largeur sidebar ouverte */

  /* Boutons */
  --button-primary-bg: var(--brand-forest);
  --button-primary-text: #ffffff;

  /* --------------------------------------------------------------------------
     TYPOGRAPHIE - Font Family
     --------------------------------------------------------------------------
     Police principale : Inter (Google Fonts)
     Fallbacks : polices système pour performance optimale
     -------------------------------------------------------------------------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --------------------------------------------------------------------------
     ÉCHELLE D'ESPACEMENTS - Spacing Scale
     --------------------------------------------------------------------------
     Échelle cohérente basée sur 0.5rem (8px) comme unité de base.
     Utiliser ces variables pour tous les margins et paddings.

     xs  = 0.5rem  = 8px   (espaces serrés, gaps internes)
     sm  = 1rem    = 16px  (espaces standards entre éléments)
     md  = 1.5rem  = 24px  (séparations de groupes)
     lg  = 2.5rem  = 40px  (séparations de sections)
     xl  = 4rem    = 64px  (grands espacements)
     2xl = 6rem    = 96px  (très grands espacements, hero)
     -------------------------------------------------------------------------- */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;

  /* --------------------------------------------------------------------------
     LAYOUT - Dimensions et rayons
     -------------------------------------------------------------------------- */
  --max-width: 1200px;             /* Largeur max du contenu */
  --border-radius: 12px;           /* Rayon standard (cartes, modals) */
  --border-radius-sm: 8px;         /* Petit rayon (boutons, inputs) */
  --topbar-height: 72px;           /* Hauteur de la barre de navigation */

  /* --------------------------------------------------------------------------
     TRANSITIONS - Durées et courbes d'animation
     -------------------------------------------------------------------------- */
  --transition: 0.2s ease;                /* Transition standard (hover, focus) */
  --transition-sidebar: 0.28s ease-out;   /* Transition sidebar (plus lente) */
}


/* ============================================================================
   MODE SOMBRE - Dark Mode Theme Override
   ============================================================================

   PURPOSE:
   Surcharge les variables de couleur pour le mode sombre.
   Activé via la classe .dark sur <html> ou <body>.

   NOTES:
   - Seules les variables sémantiques sont modifiées
   - Les couleurs de marque restent identiques
   - La sidebar utilise un gris bleuté (#1e293b)

   ============================================================================ */

.dark {
  --bg: #0f172a;                   /* Fond très sombre (slate-900) */
  --bg-card: #1e293b;              /* Cartes légèrement plus claires */
  --text-primary: #f1f5f9;         /* Texte clair (slate-100) */
  --text-secondary: #cbd5e1;       /* Texte secondaire (slate-300) */
  --text-muted: #64748b;           /* Texte atténué (slate-500) */
  --border: #334155;               /* Bordures visibles sur fond sombre */

  /* Navigation - Conserve le bleu corporate */
  --nav-bg: var(--brand-blue);
  --nav-text: #ffffff;

  /* Sidebar - Gris bleuté assorti au fond */
  --sidebar-bg: #1e293b;

  /* Boutons - Même vert, bonne visibilité sur fond sombre */
  --button-primary-bg: var(--brand-forest);
  --button-primary-text: #ffffff;
}


/* ============================================================================
   SECTION 2 : TEXT SYSTEM - SYSTÈME TYPOGRAPHIQUE CENTRALISÉ
   ============================================================================

   ★★★ SECTION CRITIQUE - LIRE ATTENTIVEMENT ★★★

   PURPOSE:
   Ce système typographique définit TOUTES les tailles, poids et styles
   de texte utilisés sur le site. Il garantit une cohérence visuelle
   totale et facilite les modifications globales.

   ARCHITECTURE:
   1. Variables CSS (--text-*) : définissent les valeurs
   2. Classes utilitaires (.text-*) : appliquent les styles

   CATÉGORIES DE TEXTE:
   ┌─────────────────┬──────────────┬────────────┬───────────────────────────┐
   │ Catégorie       │ Taille (rem) │ Poids      │ Usage                     │
   ├─────────────────┼──────────────┼────────────┼───────────────────────────┤
   │ display         │ 3.5          │ 800        │ Hero titles (très rare)   │
   │ h1              │ 2.625        │ 700        │ Titre de page unique      │
   │ h2              │ 2            │ 600        │ Titres de section         │
   │ h3              │ 1.5          │ 600        │ Sous-sections, cartes     │
   │ h4              │ 1.25         │ 600        │ Sous-titres mineurs       │
   │ h5              │ 1.125        │ 600        │ Labels importants         │
   │ h6              │ 1            │ 600        │ Petits titres             │
   │ body-lg         │ 1.125        │ 400        │ Texte d'intro, taglines   │
   │ body            │ 1            │ 400        │ Texte courant (défaut)    │
   │ body-sm         │ 0.875        │ 400        │ Texte secondaire, meta    │
   │ caption         │ 0.75         │ 400        │ Légendes, notes de bas    │
   │ label           │ 0.875        │ 500        │ Labels de formulaire      │
   │ button          │ 1            │ 600        │ Texte des boutons         │
   │ link            │ inherit      │ inherit    │ Liens (hérite du parent)  │
   │ nav             │ 0.95         │ 500        │ Navigation sidebar/topbar │
   │ badge           │ 0.75         │ 600        │ Badges, tags              │
   └─────────────────┴──────────────┴────────────┴───────────────────────────┘

   RESPONSIVE:
   Les tailles h1 et h2 sont réduites sur mobile (voir SECTION 20).

   COMMENT UTILISER:
   1. Pour un titre : <h2 class="text-h2">Mon titre</h2>
   2. Pour du texte : <p class="text-body">Mon paragraphe</p>
   3. Pour un label : <span class="text-label">Mon label</span>

   NE PAS FAIRE:
   - Ne jamais définir font-size en dur sans utiliser ce système
   - Ne jamais utiliser des tailles arbitraires (ex: 17px)
   - Ne jamais modifier les styles h1-h6 en dehors de cette section

   ============================================================================ */

/* --------------------------------------------------------------------------
   2.1 VARIABLES TYPOGRAPHIQUES
   --------------------------------------------------------------------------
   Ces variables définissent toutes les propriétés typographiques.
   Modifier ici pour impacter tout le site.
   -------------------------------------------------------------------------- */

:root {
  /* FONT SIZES - Échelle typographique modulaire (ratio ~1.25) */
  --text-size-display: 3.5rem;     /* 56px - Très grands titres hero */
  --text-size-h1: 2.625rem;        /* 42px - Titre principal de page */
  --text-size-h2: 2rem;            /* 32px - Titres de section */
  --text-size-h3: 1.5rem;          /* 24px - Sous-sections */
  --text-size-h4: 1.25rem;         /* 20px - Sous-titres */
  --text-size-h5: 1.125rem;        /* 18px - Labels importants */
  --text-size-h6: 1rem;            /* 16px - Petits titres */
  --text-size-body-lg: 1.125rem;   /* 18px - Texte intro */
  --text-size-body: 1rem;          /* 16px - Texte standard */
  --text-size-body-sm: 0.875rem;   /* 14px - Texte secondaire */
  --text-size-caption: 0.75rem;    /* 12px - Légendes */
  --text-size-nav: 0.95rem;        /* 15px - Navigation */
  --text-size-badge: 0.75rem;      /* 12px - Badges */

  /* FONT WEIGHTS - Graisses de caractères */
  --text-weight-regular: 400;      /* Texte courant */
  --text-weight-medium: 500;       /* Labels, navigation */
  --text-weight-semibold: 600;     /* Titres h2-h6, boutons */
  --text-weight-bold: 700;         /* Titre h1 */
  --text-weight-extrabold: 800;    /* Display (très rare) */

  /* LINE HEIGHTS - Interlignages */
  --text-leading-tight: 1.2;       /* Titres (compact) */
  --text-leading-snug: 1.35;       /* Sous-titres */
  --text-leading-normal: 1.6;      /* Texte courant (confortable) */
  --text-leading-relaxed: 1.75;    /* Texte long, lecture */

  /* LETTER SPACING - Espacement des lettres */
  --text-tracking-tight: -0.02em;  /* Grands titres (resserré) */
  --text-tracking-normal: 0;       /* Standard */
  --text-tracking-wide: 0.05em;    /* Badges, labels uppercase */
}

/* --------------------------------------------------------------------------
   2.2 STYLES DE BASE DES HEADINGS (h1-h6)
   --------------------------------------------------------------------------
   Appliqués automatiquement à tous les éléments h1-h6.
   Les classes .text-h* permettent d'appliquer ces styles à d'autres éléments.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--text-weight-semibold);
  line-height: var(--text-leading-tight);
  color: var(--text-primary);
  margin: 0;
  /* Marge par défaut sous les titres - peut être surchargée */
  margin-bottom: var(--spacing-sm);
}

h1, .text-h1 {
  font-size: var(--text-size-h1);
  font-weight: var(--text-weight-bold);
  letter-spacing: var(--text-tracking-tight);
  line-height: var(--text-leading-tight);
}

h2, .text-h2 {
  font-size: var(--text-size-h2);
  font-weight: var(--text-weight-semibold);
  line-height: var(--text-leading-tight);
}

h3, .text-h3 {
  font-size: var(--text-size-h3);
  font-weight: var(--text-weight-semibold);
  line-height: var(--text-leading-snug);
}

h4, .text-h4 {
  font-size: var(--text-size-h4);
  font-weight: var(--text-weight-semibold);
  line-height: var(--text-leading-snug);
}

h5, .text-h5 {
  font-size: var(--text-size-h5);
  font-weight: var(--text-weight-semibold);
  line-height: var(--text-leading-snug);
}

h6, .text-h6 {
  font-size: var(--text-size-h6);
  font-weight: var(--text-weight-semibold);
  line-height: var(--text-leading-snug);
}

/* --------------------------------------------------------------------------
   2.3 CLASSES UTILITAIRES TYPOGRAPHIQUES
   --------------------------------------------------------------------------
   Classes à appliquer pour des styles de texte spécifiques.
   Utilisables sur n'importe quel élément.
   -------------------------------------------------------------------------- */

/* Display - Très grands titres (hero, landing) */
.text-display {
  font-size: var(--text-size-display);
  font-weight: var(--text-weight-extrabold);
  letter-spacing: var(--text-tracking-tight);
  line-height: var(--text-leading-tight);
  color: var(--text-primary);
}

/* Body Large - Texte d'introduction, taglines */
.text-body-lg,
.text-large {
  font-size: var(--text-size-body-lg);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-leading-normal);
  color: var(--text-secondary);
}

/* Body - Texte standard (paragraphes) */
.text-body {
  font-size: var(--text-size-body);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-leading-normal);
  color: var(--text-secondary);
}

/* Body Small - Texte secondaire, métadonnées */
.text-body-sm,
.text-small {
  font-size: var(--text-size-body-sm);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-leading-normal);
  color: var(--brand-slate);
}

/* Caption - Légendes, notes de bas de page */
.text-caption {
  font-size: var(--text-size-caption);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-leading-normal);
  color: var(--text-muted);
}

/* Label - Labels de formulaire, catégories */
.text-label {
  font-size: var(--text-size-body-sm);
  font-weight: var(--text-weight-medium);
  line-height: var(--text-leading-snug);
  color: var(--text-primary);
}

/* Button Text - Texte des boutons */
.text-button {
  font-size: var(--text-size-body);
  font-weight: var(--text-weight-semibold);
  line-height: 1;
  letter-spacing: var(--text-tracking-normal);
}

/* Navigation Text - Liens de navigation */
.text-nav {
  font-size: var(--text-size-nav);
  font-weight: var(--text-weight-medium);
  line-height: var(--text-leading-snug);
}

/* Badge Text - Texte des badges/tags */
.text-badge {
  font-size: var(--text-size-badge);
  font-weight: var(--text-weight-semibold);
  line-height: 1;
  letter-spacing: var(--text-tracking-wide);
  text-transform: uppercase;
}

/* Muted Text - Texte atténué */
.text-muted {
  color: var(--text-muted);
}

/* Primary Text Color - Force la couleur primaire */
.text-primary-color {
  color: var(--text-primary);
}

/* Secondary Text Color - Force la couleur secondaire */
.text-secondary-color {
  color: var(--text-secondary);
}

/* Accent Text - Texte avec couleur d'accent (vert) */
.text-accent {
  color: var(--brand-forest);
}

/* --------------------------------------------------------------------------
   2.4 PARAGRAPHES - Styles par défaut
   --------------------------------------------------------------------------
   Les paragraphes utilisent le style body par défaut.
   -------------------------------------------------------------------------- */

p {
  font-size: var(--text-size-body);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-leading-normal);
  color: var(--text-secondary);
  margin: 0;
  margin-bottom: var(--spacing-sm);
}

/* Supprime la marge du dernier paragraphe dans un conteneur */
p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2.5 TAGLINE - Style spécifique pour les sous-titres hero
   --------------------------------------------------------------------------
   Utilisé pour les descriptions sous les titres principaux.
   -------------------------------------------------------------------------- */

.tagline {
  font-size: var(--text-size-body-lg);
  font-weight: var(--text-weight-regular);
  line-height: var(--text-leading-relaxed);
  color: var(--text-secondary);
}


/* ============================================================================
   SECTION 3 : RESET & STYLES DE BASE
   ============================================================================

   PURPOSE:
   Normalise les styles par défaut des navigateurs pour garantir
   une apparence cohérente sur tous les navigateurs.

   INCLUDES:
   - Box-sizing border-box global
   - Suppression des marges/paddings par défaut
   - Styles de base pour body, images, liens, listes

   ============================================================================ */

/* Reset universel - Box-sizing et marges */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Comportement de scroll fluide pour les ancres */
html {
  scroll-behavior: smooth;
}

/* Body - Styles de base du document */
body {
  font-family: var(--font-family);
  font-size: var(--text-size-body);
  line-height: var(--text-leading-normal);
  color: var(--text-primary);
  background-color: var(--bg);
  transition: background-color var(--transition), color var(--transition);
  overflow-x: hidden; /* Évite le scroll horizontal non désiré */
}

/* Images - Responsive par défaut */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Liens - Style de base */
a {
  color: var(--brand-forest);
  text-decoration: none;
  transition: opacity var(--transition);
}

a:hover {
  opacity: 0.85;
}

/* Listes - Suppression des styles par défaut */
ul, ol {
  list-style: none;
}


/* ============================================================================
   SECTION 4 : LAYOUT PRINCIPAL
   ============================================================================

   PURPOSE:
   Définit la structure globale de la page avec sidebar + zone principale.

   STRUCTURE:
   ┌──────────────────────────────────────────────────────────────┐
   │ .layout (flex container)                                     │
   │ ┌────────┐ ┌───────────────────────────────────────────────┐ │
   │ │.sidebar│ │ .main                                         │ │
   │ │(fixed) │ │ ┌───────────────────────────────────────────┐ │ │
   │ │        │ │ │ .topbar (sticky)                          │ │ │
   │ │        │ │ ├───────────────────────────────────────────┤ │ │
   │ │        │ │ │ .page-content                             │ │ │
   │ │        │ │ │                                           │ │ │
   │ │        │ │ ├───────────────────────────────────────────┤ │ │
   │ │        │ │ │ .footer                                   │ │ │
   │ │        │ │ └───────────────────────────────────────────┘ │ │
   │ └────────┘ └───────────────────────────────────────────────┘ │
   └──────────────────────────────────────────────────────────────┘

   ============================================================================ */

.layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}


/* ============================================================================
   SECTION 5 : SIDEBAR RÉTRACTABLE
   ============================================================================

   PURPOSE:
   Navigation latérale rétractable qui s'ouvre au survol.
   Fermée par défaut, elle laisse un fin trait visible (12px).

   BEHAVIOR:
   - Position fixe à gauche
   - S'ouvre au mouseenter, se ferme après délai au mouseleave
   - Support tactile : toggle au touch
   - Masquée sur mobile (< 900px)

   STATE CLASSES:
   - .sidebar--open : sidebar ouverte (260px)

   ============================================================================ */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-collapsed-width);
  background: var(--sidebar-bg);
  transition: width var(--transition-sidebar);
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

/* État ouvert de la sidebar */
.sidebar--open {
  width: var(--sidebar-expanded-width);
}

/* Contenu interne de la sidebar */
.sidebar__inner {
  padding: var(--spacing-md) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 0; /* Masqué quand fermé */
  transition: opacity 0.15s ease;
  min-width: calc(var(--sidebar-expanded-width) - 2rem);
}

/* Affiche le contenu quand ouvert */
.sidebar--open .sidebar__inner {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Logo dans la sidebar */
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dark .sidebar__logo {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sidebar__logo img {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

.sidebar__logo-text {
  color: var(--brand-blue);
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-nav);
  white-space: nowrap;
}

.dark .sidebar__logo-text {
  color: #ffffff;
}

/* Navigation dans la sidebar */
.sidebar__nav {
  flex: 1;
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sidebar-text);
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: var(--border-radius-sm);
  font-size: var(--text-size-nav);
  font-weight: var(--text-weight-medium);
  transition: all var(--transition);
  white-space: nowrap;
}

.sidebar__nav a:hover {
  background: rgba(15, 76, 129, 0.08);
  color: var(--brand-blue);
}

.sidebar__nav a.active {
  background: rgba(5, 150, 105, 0.15);
  color: var(--brand-forest);
}

.sidebar__nav a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Section séparateur dans la sidebar */
.sidebar__section {
  font-size: var(--text-size-caption);
  text-transform: uppercase;
  letter-spacing: var(--text-tracking-wide);
  color: var(--brand-slate);
  margin: var(--spacing-md) 0 0.75rem;
  padding-left: 0.5rem;
}

/* Footer de la sidebar (mentions légales) */
.sidebar__footer {
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: auto;
}

.dark .sidebar__footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.sidebar__footer a {
  font-size: var(--text-size-body-sm);
}


/* ============================================================================
   SECTION 6 : ZONE PRINCIPALE
   ============================================================================

   PURPOSE:
   Container principal à droite de la sidebar.
   Contient topbar, contenu et footer.

   ============================================================================ */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-collapsed-width);
  transition: margin-left var(--transition-sidebar);
  min-height: 100vh;
}


/* ============================================================================
   SECTION 7 : TOP BAR (HEADER)
   ============================================================================

   PURPOSE:
   Barre de navigation supérieure fixe (sticky).
   Contient le logo, les liens principaux, le sélecteur de langue
   et le toggle de thème.

   RESPONSIVE:
   - Desktop : navigation horizontale
   - Mobile (< 900px) : menu hamburger avec dropdown

   ============================================================================ */

.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  z-index: 900;
  border-radius: 0 0 4px 0;
}

/* Brand/Logo dans la topbar */
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-body-lg);
}

.topbar__brand img {
  height: 52px;
  width: auto;
  border-radius: 4px;
}

.topbar__brand a {
  color: var(--nav-text);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar__brand a:hover {
  opacity: 1;
}

/* Navigation dans la topbar */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.topbar__nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: var(--text-weight-medium);
  opacity: 0.9;
  transition: opacity var(--transition);
}

.topbar__nav a:hover {
  opacity: 1;
}

.topbar__nav a.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
}

/* Lien Monique dans la topbar - bouton visible avec avatar */
.topbar__monique {
  opacity: 1 !important;
  font-size: 0.85em;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem !important;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: var(--spacing-xs);
  transition: background var(--transition), border-color var(--transition);
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
}

.topbar__monique:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5);
}

.monique-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.6);
}


/* Bouton de bascule de thème (soleil/lune) */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--nav-text);
  padding: 0.5rem;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* Bouton hamburger mobile - Masqué par défaut */
.topbar__toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--nav-text);
  cursor: pointer;
  padding: 0.5rem;
}

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


/* ============================================================================
   SECTION 8 : CONTENU DE PAGE & ANIMATIONS
   ============================================================================

   PURPOSE:
   Styles du conteneur de contenu principal et animations de transition.

   ANIMATIONS:
   - fade-in : animation d'entrée au chargement
   - fade-out : animation de sortie avant navigation
   - page-transition-overlay : overlay de transition entre pages

   ============================================================================ */

.page-content {
  flex: 1;
  padding: 0;
}

/* Animation d'entrée au chargement de page */
.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation de sortie avant changement de page */
.fade-out {
  animation: fadeOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Overlay de transition entre pages */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}


/* ============================================================================
   SECTION 9 : SECTIONS & CONTAINERS
   ============================================================================

   PURPOSE:
   Définit les conteneurs de mise en page et les grilles.

   COMPONENTS:
   - .container : conteneur centré avec max-width
   - .section : padding vertical pour les sections
   - .section-title : bloc titre + sous-titre centré
   - .grid-* : grilles responsives

   ============================================================================ */

/* Container principal - Centré avec largeur max */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

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

/* Bloc titre de section (centré) */
.section-title {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-title h2 {
  margin-bottom: var(--spacing-sm);
}

.section-title p {
  max-width: 600px;
  margin: 0 auto;
}

/* Système de grille */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

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

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

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


/* ============================================================================
   SECTION 10 : HERO SECTION
   ============================================================================

   PURPOSE:
   Section d'en-tête principale des pages (banner).
   Contient généralement un titre, une tagline et des CTAs.

   VARIANTS:
   - .hero : hero standard
   - .hero-with-image : hero avec image de fond

   ============================================================================ */

.hero {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-card) 100%);
  border-bottom: 1px solid var(--border);
}

.hero .container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.hero-content {
  flex: 1;
}

.hero-content h1 {
  margin-bottom: var(--spacing-md);
}

.hero-content .tagline {
  font-size: var(--text-size-body-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ============================================================================
   SECTION 11 : BOUTONS
   ============================================================================

   PURPOSE:
   Styles des boutons d'action.

   VARIANTS:
   - .btn-primary : bouton principal (vert forest)
   - .btn-secondary : bouton secondaire (slate)
   - .btn-outline : bouton avec bordure
   - .btn-forest : alias de btn-primary

   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: var(--text-size-body);
  font-weight: var(--text-weight-semibold);
  border-radius: var(--border-radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.btn-primary:hover {
  opacity: 0.85;
  color: var(--button-primary-text);
}

.btn-secondary {
  background-color: var(--brand-slate);
  color: #ffffff;
}

.btn-secondary:hover {
  opacity: 0.85;
  color: #ffffff;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--brand-slate);
  color: var(--text-primary);
}

.btn-outline:hover {
  background-color: var(--brand-slate);
  color: #ffffff;
}

.btn-forest {
  background-color: var(--brand-forest);
  color: #ffffff;
}

.btn-forest:hover {
  opacity: 0.85;
  color: #ffffff;
}


/* ============================================================================
   SECTION 12 : CARDS
   ============================================================================

   PURPOSE:
   Composants de carte pour afficher du contenu structuré.

   FEATURES:
   - Effet de survol avec élévation
   - Bordure qui prend la couleur accent au hover
   - Icône optionnelle (.card-icon)

   ============================================================================ */

.card {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(241, 245, 249, 0.5) 100%);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.dark .card {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.3);
}

/* Icône de carte */
.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-sm);
  color: var(--brand-violet);
}

.dark .card-icon {
  background-color: var(--brand-charcoal);
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  margin-bottom: var(--spacing-xs);
}

.card p {
  margin-bottom: 0;
}

/* Carte de service */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card .card-content {
  flex: 1;
}


/* ============================================================================
   SECTION 13 : STATS SECTION
   ============================================================================

   PURPOSE:
   Section de statistiques avec fond sombre et chiffres mis en valeur.

   ============================================================================ */

.stats {
  background: linear-gradient(135deg, var(--brand-charcoal) 0%, #243447 50%, var(--brand-charcoal) 100%);
  padding: var(--spacing-xl) 0;
}

.stats .grid {
  text-align: center;
}

.stat-item {
  color: #ffffff;
}

.stat-number {
  font-size: 3rem;
  font-weight: var(--text-weight-bold);
  color: var(--brand-forest-light);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  font-size: var(--text-size-body);
  color: var(--brand-slate);
}


/* ============================================================================
   SECTION 14 : BADGES
   ============================================================================

   PURPOSE:
   Petits labels pour tags, catégories, statuts.

   VARIANTS:
   - .badge-neutral : fond slate
   - .badge-accent : fond vert clair
   - .badge-forest : fond vert forest

   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-size-badge);
  font-weight: var(--text-weight-semibold);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: var(--text-tracking-wide);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.badge-neutral {
  background-color: var(--brand-slate);
  color: #ffffff;
}

.badge-accent {
  background-color: var(--brand-forest-light);
  color: #ffffff;
}

.badge-forest {
  background-color: var(--brand-forest);
  color: #ffffff;
}


/* ============================================================================
   SECTION 15 : ALERTES
   ============================================================================

   PURPOSE:
   Messages d'alerte et notifications.

   VARIANTS:
   - .alert-success : vert (succès)
   - .alert-info : bleu (information)
   - .alert-warning : bleu (avertissement)

   ============================================================================ */

.alert {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.alert-success {
  background-color: rgba(5, 150, 105, 0.1);
  border-left: 4px solid var(--brand-forest);
  color: var(--brand-forest);
}

.alert-info {
  background-color: rgba(15, 76, 129, 0.1);
  border-left: 4px solid var(--brand-blue);
  color: var(--brand-blue);
}

.alert-warning {
  background-color: rgba(15, 76, 129, 0.1);
  border-left: 4px solid var(--brand-blue);
  color: var(--brand-blue);
}

.dark .alert-success,
.dark .alert-info,
.dark .alert-warning {
  color: var(--text-primary);
}


/* ============================================================================
   SECTION 16 : FORMULAIRES
   ============================================================================

   PURPOSE:
   Styles des éléments de formulaire.

   COMPONENTS:
   - .form-group : conteneur de champ
   - .form-label : label de champ
   - .form-input : champ texte
   - .form-textarea : zone de texte
   - .form-select : menu déroulant

   ============================================================================ */

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  font-weight: var(--text-weight-medium);
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--text-size-body);
  font-family: var(--font-family);
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand-forest);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

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


/* ============================================================================
   SECTION 17 : FOOTER
   ============================================================================

   PURPOSE:
   Pied de page avec informations de marque, navigation et copyright.

   ============================================================================ */

.footer {
  background-color: var(--brand-charcoal);
  color: #ffffff;
  padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-brand h3 {
  color: #ffffff;
  margin-bottom: var(--spacing-sm);
}

.footer-brand p {
  color: var(--brand-slate);
}

.footer-links h4 {
  color: #ffffff;
  margin-bottom: var(--spacing-sm);
  font-size: var(--text-size-body);
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer-links a {
  color: var(--brand-slate);
  transition: color var(--transition);
}

.footer-links a:hover {
  color: #ffffff;
  opacity: 1;
}

.footer-bottom {
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  color: var(--brand-slate);
  font-size: var(--text-size-body-sm);
  margin-bottom: 0;
}

.footer-bottom .copyright {
  margin-bottom: 0.25rem;
}


/* ============================================================================
   SECTION 18 : SECTIONS SPÉCIFIQUES
   ============================================================================

   PURPOSE:
   Styles pour des sections de page spécifiques.

   INCLUDES:
   - About section (page À propos)
   - Profile image (photo circulaire)
   - CTA section (appel à l'action)
   - Contact info block
   - Service detail
   - Under construction page

   ============================================================================ */

/* --------------------------------------------------------------------------
   About Section
   -------------------------------------------------------------------------- */

.about-section {
  background-color: var(--bg-card);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.about-image {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.about-image img {
  width: 100%;
  height: auto;
}

/* Photo de profil circulaire */
.about-image.profile-circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 4px solid var(--brand-forest);
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.about-image.profile-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Image de profil standalone */
.profile-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--spacing-md);
  border: 4px solid var(--brand-forest);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;  /* Ajusté pour centrer davantage le visage dans le cercle */
}

/* --------------------------------------------------------------------------
   CTA Section (Call to Action)
   -------------------------------------------------------------------------- */

.cta-section {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-forest-dark) 50%, var(--brand-forest) 100%);
  color: #ffffff;
  text-align: center;
}

.cta-section h2 {
  color: #ffffff;
  margin-bottom: var(--spacing-sm);
}

.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto var(--spacing-lg);
}

.cta-section .btn {
  background-color: #ffffff;
  color: var(--brand-blue);
}

.cta-section .btn:hover {
  opacity: 0.9;
  color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   Contact Info Block
   -------------------------------------------------------------------------- */

.contact-info-block {
  background: linear-gradient(145deg, var(--brand-charcoal) 0%, #243447 100%);
  color: #ffffff;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

.contact-info-block h3 {
  color: #ffffff;
  margin-bottom: var(--spacing-md);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  color: var(--brand-slate);
}

.contact-info-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brand-forest);
}

/* --------------------------------------------------------------------------
   Service Detail
   -------------------------------------------------------------------------- */

.service-detail {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(241, 245, 249, 0.7) 100%);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-left: 3px solid var(--brand-forest);
}

.dark .service-detail {
  background: linear-gradient(145deg, var(--bg-card) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.service-detail h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--brand-blue);
}

.service-detail h3 svg {
  color: var(--brand-forest);
}

/* Liste de services */
.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
}

.service-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--brand-forest);
  border-radius: 50%;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Page En Construction
   -------------------------------------------------------------------------- */

.under-construction {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl);
}

.under-construction svg {
  width: 80px;
  height: 80px;
  color: var(--brand-slate);
  margin-bottom: var(--spacing-md);
}

.under-construction h1 {
  margin-bottom: var(--spacing-sm);
}

.under-construction p {
  max-width: 500px;
}


/* ============================================================================
   SECTION 19 : UTILITAIRES
   ============================================================================

   PURPOSE:
   Classes utilitaires pour ajustements rapides.
   À utiliser avec parcimonie - préférer les composants.

   ============================================================================ */

/* Alignement de texte */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Marges bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

/* Marges top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

/* Visually hidden (accessibilité) */
.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;
}

/* Focus visible (accessibilité) */
:focus-visible {
  outline: 2px solid var(--brand-forest);
  outline-offset: 2px;
}

/* Offset pour ancres avec nav sticky */
:target {
  scroll-margin-top: 80px;
}


/* ============================================================================
   SECTION 20 : RESPONSIVE
   ============================================================================

   PURPOSE:
   Media queries pour l'adaptation mobile/tablette.

   BREAKPOINTS:
   - 992px : Tablette paysage (grilles réduites)
   - 900px : Mobile (sidebar masquée, menu hamburger)
   - 768px : Mobile (grilles single column, typo réduite)

   ============================================================================ */

/* --------------------------------------------------------------------------
   Tablette paysage (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-content .tagline {
    margin: 0 auto var(--spacing-lg);
  }

  .hero-actions {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Mobile (< 900px) - Sidebar masquée, menu hamburger
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Masquer la sidebar sur mobile */
  .sidebar {
    display: none;
  }

  .main {
    margin-left: 0;
  }

  /* Afficher le bouton hamburger */
  .topbar__toggle {
    display: block;
  }

  /* Navigation mobile overlay */
  .topbar__nav {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    background: var(--nav-bg);
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    display: none;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .topbar__nav.active {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Mobile (< 768px) - Grilles single column, typo réduite
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Grilles en colonne unique */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Typographie réduite - Utilise le Text System */
  h1, .text-h1 {
    font-size: 2rem; /* Réduit de 2.625rem */
  }

  h2, .text-h2 {
    font-size: 1.5rem; /* Réduit de 2rem */
  }

  .text-display {
    font-size: 2.5rem; /* Réduit de 3.5rem */
  }

  /* Espacements réduits */
  .section {
    padding: var(--spacing-xl) 0;
  }

  .container {
    padding: 0 var(--spacing-sm);
  }

  .topbar {
    padding: 0 var(--spacing-sm);
  }

  /* Footer en colonne */
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* About section */
  .about-content {
    grid-template-columns: 1fr;
  }

  .about-image {
    order: -1;
    max-width: 300px;
    margin: 0 auto;
  }

  /* Profile circle plus petit sur mobile */
  .about-image.profile-circle {
    width: 200px;
    height: 200px;
    max-width: none;
  }
}


/* ============================================================================
   SECTION 21 : INTRO ANIMATION
   ============================================================================

   PURPOSE:
   Animation d'introduction au premier chargement du site.
   Affiche le logo sur fond sombre puis disparaît.

   BEHAVIOR:
   - S'affiche une seule fois par session (via sessionStorage)
   - Respecte prefers-reduced-motion
   - Durée : 2 secondes d'affichage + 0.6s de fade out

   ============================================================================ */

.intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #eef1f5; /* fond papier neutre : n'apparaît qu'au fondu (le SVG couvre l'écran) */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  cursor: pointer; /* cliquer n'importe où passe l'animation */
  transition: opacity 0.6s ease-out;
}

.intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.intro-overlay.hidden {
  display: none;
}

/* Masque la barre de défilement de la page tant que l'intro est affichée */
html:has(.intro-overlay:not(.hidden)),
body:has(.intro-overlay:not(.hidden)) {
  overflow: hidden;
}

/* Scène où le moteur HDIntro injecte le SVG animé (plein écran) */
.intro-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-stage svg {
  max-width: 100%;
  max-height: 100%;
}

/* Indice discret « cliquez pour passer », apparaît après 1,6 s */
.intro-overlay::after {
  content: "Cliquez pour passer";
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #8a94a3;
  opacity: 0;
  animation: introHintIn 0.4s ease-out 1.6s forwards;
  pointer-events: none;
}

.intro-overlay.fade-out::after {
  opacity: 0;
}

@keyframes introHintIn {
  to { opacity: 0.7; }
}

/* Désactive l'intro si l'utilisateur préfère moins de mouvements */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay {
    display: none;
  }
}


/* ============================================================================
   SECTION 22 : LANGUAGE SELECTOR
   ============================================================================

   PURPOSE:
   Sélecteur de langue dans la topbar.
   Boutons FR/EN/NL/DE avec état actif.

   ============================================================================ */

.lang-selector {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: var(--spacing-sm);
}

.lang-selector button {
  padding: 0.35rem 0.5rem;
  font-size: var(--text-size-caption);
  font-weight: var(--text-weight-semibold);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
}

.lang-selector button:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.lang-selector button.active {
  background: var(--brand-forest);
  border-color: var(--brand-forest);
  color: #ffffff;
}


/* ============================================================================
   SECTION 23 : PROJECTS PAGE
   ============================================================================

   PURPOSE:
   Styles pour la page de projets/références.

   ============================================================================ */

.project-categories {
  display: grid;
  gap: var(--spacing-lg);
}

.project-category {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
}

.project-category h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--brand-blue);
}

.project-category h3 svg {
  color: var(--brand-forest);
}

.project-category p {
  margin-bottom: 0;
}

.project-examples {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}

.project-examples h4 {
  font-size: var(--text-size-body-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.project-examples ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.project-examples li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.project-examples li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand-forest);
  border-radius: 50%;
  margin-top: 0.5rem;
  flex-shrink: 0;
}


/* ============================================================================
   SECTION 24 : LOGO HANDLING
   ============================================================================

   PURPOSE:
   Gestion des logos selon le mode (clair/sombre).

   NOTE:
   Actuellement non utilisé car le logo HD fonctionne sur les deux modes.
   Conservé pour future évolution si nécessaire.

   ============================================================================ */

.logo-light {
  display: block;
}

.logo-dark {
  display: none;
}

.dark .logo-light {
  display: none;
}

.dark .logo-dark {
  display: block;
}

/* Logo dans la sidebar - toujours version claire */
.sidebar .logo-light,
.sidebar .logo-dark {
  display: block;
}

/* Fallback texte pour le logo */
.logo-text {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-body-lg);
  color: inherit;
}


/* ============================================================================
   SECTION 25 : ANIMATIONS BRANDING KIT
   ============================================================================

   PURPOSE:
   Animations d'entrée réutilisables pour le branding.

   ANIMATIONS:
   - fade-in-up : apparition vers le haut
   - fade-in-right : apparition vers la droite
   - animate-delay-* : délais d'animation échelonnés

   ============================================================================ */

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.6s ease-out forwards;
}

/* Délais d'animation échelonnés */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }


/* ============================================================================
   SECTION 26 : HERO IMAGE SECTION
   ============================================================================

   PURPOSE:
   Hero avec image de fond semi-transparente.
   L'image apparaît à droite avec faible opacité.

   ============================================================================ */

.hero-with-image {
  position: relative;
  overflow: hidden;
}

.hero-bg-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  object-fit: cover;
  opacity: 0.06; /* Opacité réduite pour lisibilité */
  z-index: 0;
}

.dark .hero-bg-image {
  opacity: 0.03;
}

@media (max-width: 768px) {
  .hero-bg-image {
    width: 100%;
    opacity: 0.04;
  }
}


/* ============================================================================
   SECTION 27 : CORPORATE CARD STYLE
   ============================================================================

   PURPOSE:
   Carte de style corporate (fond bleu) pour mise en avant.
   Utilisée dans le hero pour "Mes Atouts".

   ============================================================================ */

.card-corporate {
  background: var(--brand-blue);
  color: white;
  border: none;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card-corporate:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.card-corporate h3 {
  color: white;
  margin-bottom: var(--spacing-md);
}

.card-corporate-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  transition: transform var(--transition);
}

.card-corporate-item:hover {
  transform: translateX(8px);
}

.card-corporate-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition);
}

.card-corporate-item:hover .card-corporate-icon {
  background: rgba(255, 255, 255, 0.3);
}

.card-corporate-icon svg {
  color: white;
  width: 24px;
  height: 24px;
}

.card-corporate-text h4 {
  color: white;
  font-weight: var(--text-weight-semibold);
  margin-bottom: 0.25rem;
}

.card-corporate-text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-size-body-sm);
  margin: 0;
}


/* ============================================================================
   SECTION 28 : ENHANCED SERVICE CARDS
   ============================================================================

   PURPOSE:
   Variante de carte de service avec bordure et effets hover améliorés.

   ============================================================================ */

.service-card-enhanced {
  border: 2px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-card-enhanced:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.service-card-enhanced .card-icon {
  transition: background var(--transition), transform var(--transition);
}

.service-card-enhanced:hover .card-icon {
  background: var(--brand-blue);
  transform: scale(1.1);
}

.service-card-enhanced:hover .card-icon svg {
  color: white;
}


/* ============================================================================
   SECTION 29 : SECTION DIVIDER
   ============================================================================

   PURPOSE:
   Barre de séparation décorative sous les titres de section.

   ============================================================================ */

.section-divider {
  width: 96px;
  height: 4px;
  background: var(--brand-blue);
  margin: 0 auto var(--spacing-md);
  border-radius: 2px;
}


/* ============================================================================
   SECTION 30 : SECTION BACKGROUNDS WITH IMAGES
   ============================================================================

   PURPOSE:
   Sections avec images de fond décoratives (très faible opacité).
   Les images sont en pseudo-élément pour ne pas interférer avec le contenu.

   VARIANTS:
   - .section-bg-process : diagramme processus
   - .section-bg-certification : V au-dessus de l'Europe
   - .section-bg-materials : matériaux
   - .section-bg-lab : laboratoire
   - .section-bg-construction : construction
   - .section-bg-blueprint : plans techniques

   ============================================================================ */

.section-with-bg {
  position: relative;
  overflow: hidden;
}

.section-with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

.dark .section-with-bg::before {
  opacity: 0.08;
}

.section-with-bg > .container {
  position: relative;
  z-index: 1;
}

/* Section SGQ - Diagramme processus */
.section-bg-process::before {
  background-image: url('../img/Gemini_Generated_Image_awh0ryawh0ryawh0.png');
}

/* Section Certifications CE2+ - V au-dessus de l'Europe */
.section-bg-certification::before {
  background-image: url('../img/Gemini_Generated_Image_cw0xqkcw0xqkcw0x.png');
  opacity: 0.1;
}

.dark .section-bg-certification::before {
  opacity: 0.15;
}

/* Section Matériaux */
.section-bg-materials::before {
  background-image: url('../img/Gemini_Generated_Image_3zeg293zeg293zeg.png');
}

/* Section Laboratoire */
.section-bg-lab::before {
  background-image: url('../img/Gemini_Generated_Image_vjphivjphivjphiv.png');
}

/* Section Construction */
.section-bg-construction::before {
  background-image: url('../img/Gemini_Generated_Image_bq6adwbq6adwbq6a.png');
}

/* Section Blueprint */
.section-bg-blueprint::before {
  background-image: url('../img/Gemini_Generated_Image_f1may4f1may4f1ma.png');
  opacity: 0.08;
}

.dark .section-bg-blueprint::before {
  opacity: 0.12;
}

/* Mobile - réduire opacité des fonds pour lisibilité */
@media (max-width: 768px) {
  .section-with-bg::before {
    opacity: 0.04;
  }

  .section-bg-certification::before {
    opacity: 0.06;
  }
}


/* ============================================================================
   SECTION 31 : COOKIE CONSENT BANNER (RGPD)
   ============================================================================

   PURPOSE:
   Bandeau de consentement cookies (ancienne version, conservée pour référence).
   La version actuelle utilise le popup centré (SECTION 32).

   FEATURES:
   - Position fixe en bas de page
   - Animation d'entrée slide-up
   - Responsive pour mobile

   ============================================================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: var(--spacing-md) var(--spacing-lg);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner__content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.cookie-banner__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-forest);
  color: white;
  border-radius: 12px;
}

.cookie-banner__icon svg {
  width: 28px;
  height: 28px;
}

.cookie-banner__text {
  flex: 1;
}

.cookie-banner__text h3 {
  font-size: var(--text-size-body);
  font-weight: var(--text-weight-semibold);
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.cookie-banner__text p {
  font-size: var(--text-size-body-sm);
  margin-bottom: 0;
  color: var(--text-muted);
  line-height: var(--text-leading-normal);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  align-items: center;
}

.cookie-banner__actions .btn-text {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.cookie-banner__actions .btn-text:hover {
  color: var(--brand-blue);
}

/* Cookie banner responsive */
@media (max-width: 900px) {
  .cookie-banner {
    padding: var(--spacing-md);
  }

  .cookie-banner__content {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-md);
  }

  .cookie-banner__icon {
    margin: 0 auto;
  }

  .cookie-banner__actions {
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .cookie-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .cookie-banner__actions .btn-text {
    margin-top: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    padding: var(--spacing-sm);
  }

  .cookie-banner__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .cookie-banner__icon svg {
    width: 22px;
    height: 22px;
  }

  .cookie-banner__text h3 {
    font-size: 0.9rem;
  }

  .cookie-banner__text p {
    font-size: 0.8rem;
  }

  .cookie-banner__actions .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-size-body-sm);
  }

  .cookie-banner__actions .btn-text {
    font-size: var(--text-size-caption);
  }
}

/* --------------------------------------------------------------------------
   Cookie Settings Modal
   -------------------------------------------------------------------------- */

.cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-modal--visible {
  opacity: 1;
  visibility: visible;
}

.cookie-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.cookie-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border-radius: var(--border-radius);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border);
}

.cookie-modal__header h3 {
  margin: 0;
  font-size: var(--text-size-h4);
}

.cookie-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.25rem;
  line-height: 1;
}

.cookie-modal__close:hover {
  color: var(--text-primary);
}

.cookie-modal__body {
  padding: var(--spacing-md);
}

.cookie-category {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border);
}

.cookie-category:last-child {
  border-bottom: none;
}

.cookie-category__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.cookie-category__info h4 {
  font-size: var(--text-size-nav);
  margin-bottom: 0.25rem;
}

.cookie-category__info p {
  font-size: var(--text-size-body-sm);
  margin-bottom: 0;
}

/* Cookie Toggle Switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--brand-slate);
  transition: 0.3s;
  border-radius: 26px;
}

.cookie-toggle__slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.cookie-toggle input:checked + .cookie-toggle__slider {
  background-color: var(--brand-forest);
}

.cookie-toggle input:checked + .cookie-toggle__slider::before {
  transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-toggle__slider {
  opacity: 0.6;
  cursor: not-allowed;
}

.cookie-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border);
}

/* Cookie settings link in footer */
.cookie-settings-link {
  cursor: pointer;
  color: var(--brand-slate);
  transition: color var(--transition);
}

.cookie-settings-link:hover {
  color: #ffffff;
}


/* ============================================================================
   SECTION 32 : COOKIE CONSENT POPUP (Centered Modal)
   ============================================================================

   PURPOSE:
   Modal de consentement cookies centré à l'écran.
   Version actuelle utilisée sur le site.

   FEATURES:
   - Modal centré avec overlay flou
   - Animation d'entrée scale
   - Boutons Accepter/Refuser + lien Personnaliser
   - Responsive pour mobile

   ============================================================================ */

.cookie-consent-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-consent-popup--visible {
  opacity: 1;
  visibility: visible;
}

.cookie-consent-popup__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.cookie-consent-popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.cookie-consent-popup--visible .cookie-consent-popup__content {
  transform: translate(-50%, -50%) scale(1);
}

.cookie-consent-popup__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md);
  background: linear-gradient(135deg, var(--brand-forest) 0%, var(--brand-forest-dark) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.cookie-consent-popup__content h3 {
  font-size: var(--text-size-h4);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.cookie-consent-popup__content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: var(--text-leading-normal);
}

.cookie-consent-popup__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.cookie-consent-popup__actions .btn {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.cookie-consent-popup__customize {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-size-body-sm);
  cursor: pointer;
  text-decoration: underline;
  padding: var(--spacing-xs);
  transition: color 0.2s ease;
}

.cookie-consent-popup__customize:hover {
  color: var(--brand-forest);
}

/* Cookie popup responsive */
@media (max-width: 480px) {
  .cookie-consent-popup__content {
    padding: var(--spacing-md);
  }

  .cookie-consent-popup__actions {
    flex-direction: column;
  }

  .cookie-consent-popup__icon {
    width: 56px;
    height: 56px;
  }

  .cookie-consent-popup__icon svg {
    width: 32px;
    height: 32px;
  }
}


/* ============================================================================
   SECTION 27: CONTENT LOADING
   Note: Le préchargement synchrone du français (preload-fr-content.js)
   élimine déjà le flash de contenu. Pas besoin de CSS opacity.
   ============================================================================ */

/* Section réservée pour d'éventuelles améliorations futures */


/* ============================================================================
   FIN DU FICHIER - END OF FILE
   ============================================================================

   NOTES DE MAINTENANCE:
   - Toujours ajouter les nouvelles sections à la fin, avant cette note
   - Mettre à jour le sommaire en haut du fichier
   - Utiliser le Text System (SECTION 2) pour tout nouveau texte
   - Tester sur mobile (< 768px) et tablette (< 992px)
   - Vérifier le mode sombre (.dark)

   ============================================================================ */