/* =====================================================
   VARIABLES CSS GLOBALES
   ===================================================== */
/* Ce bloc :root contient toutes les variables CSS réutilisables du site.
   Ces variables permettent une maintenance facile et une cohérence visuelle globale. */

:root {
    /* ========== COULEURS BRANDING iA GROUPE FINANCIER ========== */
    /* Couleur principale de la marque iA (#064DD9) utilisée pour les CTAs et éléments interactifs.
       Cette teinte bleue inspire confiance et professionnalisme dans le secteur financier. */
    --primary-blue: #064DD9;

    /* Version foncée du bleu pour les états hover et les contrastes (#032B7F).
       Utilisé pour créer de la profondeur visuelle sur les boutons et liens actifs. */
    --dark-blue: #032B7F;

    /* Version claire du bleu (#3D7FFF) pour les accents secondaires et badges.
       Apporte de la luminosité tout en restant dans la palette de marque. */
    --light-blue: #3D7FFF;

    /* Bleu accent (#00A8E8) pour les gradients et éléments décoratifs.
       Complète le bleu primaire dans les dégradés de la charte graphique. */
    --accent-blue: #00A8E8;

    /* ========== NUANCES DE GRIS (NEUTRALS) ========== */
    /* Gris foncé (#7C878E) pour les textes secondaires et icônes.
       Offre un bon contraste tout en restant doux visuellement. */
    --gray-dark: #7C878E;

    /* Gris moyen (#8C8C87) pour les bordures et séparateurs.
       Crée des divisions visuelles subtiles entre les sections. */
    --gray-med: #8C8C87;

    /* Gris clair (#E5E5E5) pour les backgrounds de formulaires et cards.
       Utilisé comme couleur de fond neutre pour les éléments interactifs. */
    --gray-light: #E5E5E5;

    /* ========== COULEURS NEUTRES DE BASE ========== */
    /* Blanc pur (#FFFFFF) pour les backgrounds principaux et textes sur fond foncé.
       Assure une lisibilité maximale et une apparence professionnelle. */
    --white: #FFFFFF;

    /* Blanc cassé (#F8F9FA) pour les sections alternées et cards.
       Réduit la fatigue visuelle tout en gardant un aspect lumineux. */
    --off-white: #F8F9FA;

    /* Noir profond (#1A1A1A) pour les textes principaux en mode jour.
       Offre un excellent contraste sans être trop agressif pour les yeux. */
    --dark: #1A1A1A;

    /* Noir encore plus foncé (#0D0D0D) pour les footers et headers sombres.
       Crée une séparation visuelle forte avec le contenu principal. */
    --darker: #0D0D0D;

    /* ========== GRADIENTS DÉCORATIFS ========== */
    /* Gradient primaire (bleu iA → bleu accent) à 135° pour les boutons et cards.
       Crée un effet de profondeur moderne tout en respectant la charte graphique. */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);

    /* Gradient sombre (noir profond → noir) à 180° vertical pour les sections footer.
       Apporte une transition douce vers les fonds sombres. */
    --gradient-dark: linear-gradient(180deg, var(--darker) 0%, var(--dark) 100%);

    /* ========== OMBRES PORTÉES (3 NIVEAUX) ========== */
    /* Ombre petite (2px blur) pour les éléments légèrement surélevés comme les cards au repos.
       Crée une élévation subtile de 1-2 niveaux selon Material Design. */
    --shadow-sm: 0 2px 8px rgba(6, 77, 217, 0.1);

    /* Ombre moyenne (8px blur) pour les éléments interactifs hover et modales.
       Élévation de 3-4 niveaux, indique un élément actif ou important. */
    --shadow-md: 0 8px 24px rgba(6, 77, 217, 0.15);

    /* Ombre large (16px blur) pour les popups et éléments flottants critiques.
       Élévation maximale de 5-6 niveaux, attire l'attention sur l'élément. */
    --shadow-lg: 0 16px 48px rgba(6, 77, 217, 0.2);

    /* ========== DURÉES DE TRANSITION ========== */
    /* Transition rapide (0.2s) pour les petits changements comme hover sur liens.
       Donne une réactivité immédiate sans être brusque. */
    --transition-fast: 0.2s ease;

    /* Transition standard (0.3s) pour la plupart des interactions (boutons, cards).
       Durée optimale perçue comme fluide sans ralentir l'expérience. */
    --transition-base: 0.3s ease;

    /* Transition lente (0.5s) pour les animations importantes comme les modales.
       Crée un effet cinématique pour les éléments qui méritent l'attention. */
    --transition-slow: 0.5s ease;

    /* ========== ESPACEMENTS STANDARDISÉS ========== */
    /* XS = 0.5rem (8px) pour les petits gaps internes comme badges et chips.
       Plus petit espacement utilisé dans le système de design. */
    --spacing-xs: 0.5rem;

    /* SM = 1rem (16px) pour les marges de base entre éléments adjacents.
       Espacement standard pour la plupart des composants. */
    --spacing-sm: 1rem;

    /* MD = 2rem (32px) pour les paddings de sections et cards.
       Crée une respiration confortable autour des contenus. */
    --spacing-md: 2rem;

    /* LG = 4rem (64px) pour les marges verticales entre sections principales.
       Sépare visuellement les grandes sections de contenu. */
    --spacing-lg: 4rem;

    /* XL = 6rem (96px) pour les espacements de hero et sections critiques.
       Plus grand espacement, utilisé pour les zones d'impact visuel. */
    --spacing-xl: 6rem;

    /* ========== DIMENSIONNEMENT GLOBAL (SOIC - Refonte 2024) ========== */
    /* Largeur maximale des conteneurs (1200px) pour un rendu épuré sur 1920×1080.
       Appliquée aux sections, containers et calculateurs pour une cohérence globale. */
    --max-width-container: 1200px;

    /* Largeur étendue (1400px) pour la navigation et éléments pleine largeur.
       Utilisée uniquement pour les composants qui nécessitent plus d'espace horizontal. */
    --max-width-wide: 1400px;

    /* Padding vertical des sections (60px) pour un espacement proportionné.
       Remplace les anciens spacing-xl variables pour une standardisation uniforme. */
    --section-padding: 60px;

    /* Padding interne des cartes et panels (24px) pour une densité professionnelle.
       S'applique à toutes les cards, calculateurs et éléments conteneurs du site. */
    --panel-padding: 24px;

    /* Hauteur fixe de la navigation (68px) pour un header compact type Apple.
       Optimise l'espace vertical disponible tout en gardant une bonne ergonomie tactile. */
    --nav-height: 68px;

    /* ========== TYPOGRAPHIE STANDARDISÉE (Échelle harmonieuse) ========== */
    /* H1 = 2.4rem (38.4px) pour les titres principaux de hero et sections critiques.
       Réduit de 20% vs ancienne version pour un rendu moins imposant mais professionnel. */
    --font-h1: 2.4rem;

    /* H2 = 1.9rem (30.4px) pour les titres de sections (Services, Expertise, etc.).
       Échelle harmonieuse qui maintient la hiérarchie sans écraser le contenu. */
    --font-h2: 1.9rem;

    /* H3 = 1.5rem (24px) pour les sous-titres de cards et calculateurs.
       Taille optimale pour les titres de composants individuels. */
    --font-h3: 1.5rem;

    /* H4 = 1.2rem (19.2px) pour les petits titres et labels importants.
       Utilisé dans les sidebars, accordéons et éléments secondaires. */
    --font-h4: 1.2rem;

    /* Font navigation = 0.95rem (15.2px) pour les liens du menu principal.
       Compact mais lisible, optimise la densité visuelle du header. */
    --font-nav: 0.95rem;

    /* Font body = 1rem (16px) pour tout le contenu textuel de base.
       Taille standard WCAG pour une lisibilité optimale sur tous devices. */
    --font-body: 1rem;

    /* Font small = 0.85rem (13.6px) pour disclaimers, cookies et textes légaux.
       Permet de hiérarchiser visuellement les informations secondaires. */
    --font-small: 0.85rem;

    /* ========== PALETTE JOUR (MODE CLAIR - Contraste Corporatif) ========== */
    /* Background principal (#f2f4f7) gris-bleu très clair pour réduire la fatigue oculaire.
       Remplace le blanc pur tout en gardant un aspect propre et professionnel. */
    --bg: #f2f4f7;

    /* Foreground / texte principal (#0d1117) noir légèrement bleuté.
       Contraste WCAG AAA avec le background pour une lisibilité maximale. */
    --fg: #0d1117;

    /* Background des panels et cards (#ffffff) blanc pur pour faire ressortir le contenu.
       Crée une élévation visuelle par rapport au background principal. */
    --panel-bg: #ffffff;

    /* Background de la navigation (#ffffff) blanc pour un header lumineux et aéré.
       Assure une séparation claire avec le contenu défilant en dessous. */
    --nav-bg: #ffffff;

    /* Couleur primaire des CTAs (#0052cc) bleu standard plus sobre que le branding.
       Offre un meilleur contraste sur les backgrounds clairs. */
    --primary: #0052cc;

    /* ========== VARIABLES DE COMPATIBILITÉ (Anciennes APIs) ========== */
    /* Ces variables pointent vers les nouvelles pour maintenir la compatibilité.
       Permettent une migration progressive sans casser le code existant. */
    --bg-primary: var(--bg);
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #E5E5E5;
    --text-primary: var(--fg);
    --text-secondary: #7C878E;
    --card-bg: var(--panel-bg);
    --border-color: rgba(6, 77, 217, 0.1);
}

/* =====================================================
   PALETTE NUIT (MODE SOMBRE - Contraste Inversé)
   ===================================================== */
/* Cette section redéfinit les variables pour le mode sombre activé via toggle.
   Le sélecteur body.dark-mode est ajouté dynamiquement par JavaScript au clic. */

body.dark-mode {
    /* ========== COULEURS PRINCIPALES MODE NUIT ========== */
    /* Background principal (#0b0d10) noir bleuté profond pour réduire l'éblouissement.
       Inspiré des interfaces GitHub/VSCode pour une expérience familière aux développeurs. */
    --bg: #0b0d10;

    /* Foreground / texte (#f0f3fa) blanc bleuté clair avec contraste WCAG AAA.
       Lisible sans être trop lumineux, réduit la fatigue oculaire nocturne. */
    --fg: #f0f3fa;

    /* Background des panels (#1a1d23) gris foncé légèrement plus clair que le fond.
       Crée une élévation subtile pour les cards et conteneurs. */
    --panel-bg: #1a1d23;

    /* Background navigation (#111318) presque noir pour un header discret.
       S'intègre au reste de l'interface sans attirer l'attention. */
    --nav-bg: #111318;

    /* Couleur primaire CTAs (#3d8bff) bleu clair lumineux pour les boutons en mode nuit.
       Plus vif que le bleu jour pour compenser le fond sombre. */
    --primary: #3d8bff;

    /* ========== RÉASSIGNATION VARIABLES COMPATIBILITÉ ========== */
    /* Les anciennes variables pointent vers les nouvelles valeurs sombres.
       Garantit que tous les composants s'adaptent automatiquement au thème. */
    --bg-primary: var(--bg);
    --bg-secondary: var(--panel-bg);
    --bg-tertiary: #2A2A2A;
    --text-primary: var(--fg);
    --text-secondary: #B0B0B0;
    --card-bg: var(--panel-bg);
    --border-color: rgba(255, 255, 255, 0.1);

    /* ========== OMBRES AJUSTÉES POUR MODE SOMBRE ========== */
    /* Ombres noires pures (sans teinte bleue) car les fonds sont déjà sombres.
       Opacité augmentée (0.3/0.4/0.5) pour compenser la luminosité réduite. */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   RESET & BASE CSS
   ===================================================== */
/* Cette section réinitialise les styles par défaut du navigateur et définit les règles de base.
   Tous les éléments HTML héritent de ces styles fondamentaux pour assurer une cohérence cross-browser. */

/* ========== RESET UNIVERSEL ========== */
/* Sélecteur universel (*) qui cible TOUS les éléments HTML de la page.
   Supprime les marges et paddings par défaut qui varient entre navigateurs (Chrome, Firefox, Safari). */
* {
    margin: 0;              /* Annule toutes les marges externes par défaut */
    padding: 0;             /* Annule tous les espacements internes par défaut */
    box-sizing: border-box; /* Inclut padding et border dans width/height (modèle CSS moderne) */
}

/* ========== ÉLÉMENT HTML ROOT ========== */
/* Balise <html> = racine du document, définit les comportements globaux de défilement et taille de base.
   La font-size ici (16px) sert de référence pour toutes les unités rem du site. */
html {
    scroll-behavior: smooth; /* Active le défilement fluide lors des ancres (#section) - améliore l'UX */
    font-size: 16px;        /* Taille de base pour les calculs rem : 1rem = 16px, 2rem = 32px, etc. */
}

/* ========== BODY - STYLES PRINCIPAUX ========== */
/* Balise <body> = conteneur principal de tout le contenu visible de la page.
   Définit la police, couleurs de texte, et comportements généraux qui s'appliquent à tous les éléments enfants. */
body {
    font-family: 'Montserrat', sans-serif; /* Police Google Fonts moderne, professionnelle, excellente lisibilité */
    color: var(--text-primary);            /* Couleur de texte par défaut (noir jour, blanc nuit via CSS variables) */
    line-height: 1.6;                      /* Interligne optimal WCAG pour lisibilité (1.5 minimum) */
    background: var(--bg-primary);         /* Couleur de fond principale (change avec le thème jour/nuit) */
    overflow-x: hidden;                    /* Désactive le scroll horizontal pour éviter les débordements accidentels */
    transition: background-color 0.3s ease, color 0.3s ease; /* Anime la transition jour/nuit en douceur (0.3s) */
}

/* ========== TITRES (H1-H6) ========== */
/* Tous les titres héritent de ce style de base avant d'avoir leurs propres tailles.
   Font-weight 700 = Bold, line-height serré pour les gros titres (meilleure densité visuelle). */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;  /* Gras pour tous les titres (impact visuel et hiérarchie claire) */
    line-height: 1.2;  /* Interligne réduit vs body (1.6) car les titres nécessitent moins d'espace vertical */
}

/* ========== TYPOGRAPHIE STANDARDISÉE SOIC ========== */
/* Application des tailles de police définies dans les variables CSS (:root).
   Ces tailles ont été réduites lors de la refonte SOIC pour un rendu plus épuré et professionnel. */
h1 { font-size: var(--font-h1); } /* 2.4rem = 38.4px - Titres hero et sections principales */
h2 { font-size: var(--font-h2); } /* 1.9rem = 30.4px - Titres de sections (Services, Expertise) */
h3 { font-size: var(--font-h3); } /* 1.5rem = 24px - Sous-titres de cards et calculateurs */
h4 { font-size: var(--font-h4); } /* 1.2rem = 19.2px - Labels et accordéons FAQ */

/* ========== LIENS (BALISE <A>) ========== */
/* Style de base pour tous les liens hypertextes du site (navigation, footer, boutons texte).
   Supprime le soulignement par défaut et hérite de la couleur du parent pour plus de contrôle. */
a {
    text-decoration: none;           /* Supprime le soulignement bleu par défaut des navigateurs */
    color: inherit;                  /* Hérite de la couleur du parent (permet de contrôler via classes) */
    transition: var(--transition-base); /* 0.3s - Anime les changements de couleur/transform au hover */
}

/* ========== BOUTONS (BALISE <BUTTON>) ========== */
/* Reset des styles par défaut des boutons qui varient beaucoup entre navigateurs.
   Prépare une base neutre pour appliquer des styles personnalisés via des classes. */
button {
    border: none;                       /* Supprime la bordure par défaut (souvent grise et laide) */
    background: none;                   /* Supprime le background gris gradient par défaut */
    cursor: pointer;                    /* Transforme le curseur en main au survol (indique cliquable) */
    font-family: inherit;               /* Hérite de Montserrat du body (cohérence typographique) */
    transition: var(--transition-base); /* 0.3s - Anime background/transform lors des interactions */
}

/* ========== IMAGES (BALISE <IMG>) ========== */
/* Style de base pour toutes les images afin d'éviter les débordements et problèmes de layout.
   Display block supprime l'espace blanc mystérieux sous les images (causé par inline par défaut). */
img {
    max-width: 100%;  /* Empêche les images de dépasser leur conteneur (responsive par défaut) */
    display: block;   /* Change de inline à block pour éliminer l'espace vertical sous l'image */
}

/* =====================================================
   CANVAS PARTICULES - ARRIÈRE-PLAN ANIMÉ
   ===================================================== */
/* Canvas plein écran en position fixed pour afficher les particules animées en arrière-plan.
   Reste en place lors du scroll (fixed) et se positionne derrière tout le contenu (z-index: -1). */

/* ========== CANVAS #PARTICLES - FOND ANIMÉ ========== */
/* Élément <canvas> géré par la classe ParticleSystem (app.js) pour dessiner les particules.
   Positionné en fixed pour rester visible pendant le scroll, couvre tout le viewport avec width/height 100%. */
#particles {
    position: fixed;        /* Fixe le canvas par rapport au viewport (ne scroll pas avec la page) */
    top: 0;                 /* Ancre le canvas en haut du viewport (0px du bord supérieur) */
    left: 0;                /* Ancre le canvas à gauche du viewport (0px du bord gauche) */
    width: 100%;            /* Étend le canvas sur toute la largeur du viewport (responsive) */
    height: 100%;           /* Étend le canvas sur toute la hauteur du viewport (couvre l'écran) */
    z-index: -1;            /* Place le canvas derrière tous les autres éléments (arrière-plan) */
    opacity: 0.6;           /* Réduit l'opacité à 60% pour éviter que les particules soient trop visibles/distrayantes */
}

/* =====================================================
   CONTAINER - LARGEUR MAXIMALE CENTRÉE
   ===================================================== */
/* Classe utilitaire .container pour limiter la largeur du contenu et le centrer horizontalement.
   Utilisée dans les sections (hero, services, contact) pour maintenir une largeur optimale de lecture. */

/* ========== .CONTAINER - CENTRAGE AUTOMATIQUE ========== */
/* Conteneur principal qui limite la largeur du contenu à 1200px (var --max-width-container).
   Technique classique de centrage avec margin: 0 auto et padding latéral pour les petits écrans. */
.container {
    max-width: var(--max-width-container);  /* Limite la largeur à 1200px pour garder une lisibilité optimale */
    margin: 0 auto;                         /* Centre le conteneur horizontalement (margin auto gauche/droite) */
    padding: 0 var(--spacing-md);           /* Ajoute un padding horizontal de 24px pour éviter que le contenu touche les bords sur mobile */
}

/* =====================================================
   NAVIGATION - BARRE DE MENU FIXE
   ===================================================== */
/* Barre de navigation sticky en haut de la page avec logo, liens de menu et bouton thème.
   Reste visible pendant le scroll (position fixed) avec effet de flou en arrière-plan (backdrop-filter). */

/* ========== .NAVBAR - CONTENEUR PRINCIPAL ========== */
/* Barre de navigation fixée en haut du viewport avec fond semi-transparent et effet glassmorphism.
   Le z-index 1000 assure qu'elle reste au-dessus de tous les autres éléments de la page. */
.navbar {
    position: fixed;                    /* Fixe la navbar en haut du viewport (reste visible pendant le scroll) */
    top: 0;                            /* Ancre la navbar en haut de la page (0px du bord supérieur) */
    left: 0;                           /* Étend la navbar du bord gauche */
    right: 0;                          /* Étend la navbar du bord droit (équivalent à width: 100%) */
    z-index: 1000;                     /* Place la navbar au-dessus de tous les éléments (z-index très élevé) */
    background: var(--card-bg);        /* Fond de carte avec opacité (rgba blanc/noir selon thème) */
    backdrop-filter: blur(10px);       /* Effet de flou glassmorphism sur le contenu en arrière-plan (iOS Safari 9+) */
    border-bottom: 1px solid var(--border-color); /* Bordure subtile en bas pour séparer visuellement la navbar du contenu */
    transition: var(--transition-base); /* Anime les changements de propriétés (shadow lors du scroll) */
}

/* ========== NAVBAR MODE NUIT ========== */
/* Override du background en mode sombre pour un fond noir semi-transparent (95% opacité).
   Plus opaque que le mode jour pour masquer le contenu défilant derrière. */
body.dark-mode .navbar {
    background: rgba(26, 26, 26, 0.95); /* Fond noir avec 95% opacité (5% de transparence) */
}

/* ========== NAVBAR SCROLLED STATE ========== */
/* Classe .scrolled ajoutée dynamiquement via JavaScript quand l'utilisateur scroll vers le bas.
   Ajoute une ombre portée pour créer une élévation visuelle et améliorer la lisibilité. */
.navbar.scrolled {
    box-shadow: var(--shadow-md);       /* Ombre moyenne (0 4px 6px rgba) pour effet de profondeur */
}

/* ========== .NAV-CONTAINER - LAYOUT INTERNE ========== */
/* Conteneur flex interne à la navbar pour organiser le logo, menu et boutons en horizontal.
   Utilise justify-content: space-between pour espacer les éléments aux extrémités. */
.nav-container {
    max-width: var(--max-width-wide);   /* Limite la largeur à 1400px (layout large) */
    margin: 0 auto;                     /* Centre le conteneur horizontalement */
    padding: 0 24px;                    /* Padding horizontal de 24px pour éviter que le contenu touche les bords */
    height: var(--nav-height);          /* Hauteur fixe de la navbar (80px) définie par variable CSS */
    display: flex;                      /* Active Flexbox pour aligner les enfants en horizontal */
    align-items: center;                /* Centre verticalement tous les éléments enfants */
    justify-content: space-between;     /* Espace maximale entre logo (gauche) et menu (droite) */
    gap: 2rem;                          /* Espacement de 32px entre les éléments flex si besoin */
}

/* ========== .NAV-BRAND - LOGO ET TEXTE ========== */
/* Conteneur flex pour le logo (icône ou image) et le texte de marque (nom + titre).
   Aligne horizontalement l'icône et le texte avec un espacement de 1rem (16px). */
.nav-brand {
    display: flex;                      /* Active Flexbox pour aligner icône et texte en horizontal */
    align-items: center;                /* Centre verticalement l'icône et le texte */
    gap: 1rem;                          /* Espacement de 16px entre l'icône et le texte */
}

/* ========== .BRAND-LOGO - IMAGE LOGO ========== */
/* Logo image (format PNG/SVG) avec hauteur fixe de 40px et largeur automatique pour garder le ratio.
   Effet de zoom au hover pour indiquer l'interactivité (retour à l'accueil). */
.brand-logo {
    height: 40px;                       /* Hauteur fixe de 40px pour uniformiser le logo */
    width: auto;                        /* Largeur automatique pour respecter le ratio d'aspect de l'image */
    transition: var(--transition-base); /* Anime le transform au hover (0.3s ease) */
}

.brand-logo:hover {
    transform: scale(1.05);             /* Agrandit le logo de 5% au survol pour feedback visuel */
}

/* ========== .BRAND-ICON - ICÔNE CARRÉE ========== */
/* Icône carrée avec gradient bleu, utilisée comme fallback si pas de logo image.
   Contient les initiales "NLP" (Nicolas Léger Patry) en blanc avec effet de rotation au hover. */
.brand-icon {
    width: 50px;                        /* Largeur fixe de 50px pour icône carrée */
    height: 50px;                       /* Hauteur fixe de 50px pour icône carrée */
    background: var(--gradient-primary); /* Gradient bleu iA (135deg, #064DD9 → #1B6FF0) */
    border-radius: 12px;                /* Bordures arrondies de 12px pour effet moderne */
    display: flex;                      /* Active Flexbox pour centrer le texte à l'intérieur */
    align-items: center;                /* Centre verticalement le texte "NLP" */
    justify-content: center;            /* Centre horizontalement le texte "NLP" */
    color: var(--white);                /* Texte blanc (#ffffff) pour contraste sur fond bleu */
    font-weight: 900;                   /* Poids de police très gras (Black) pour impact visuel */
    font-size: 1.25rem;                 /* Taille de police 20px (1.25 × 16px) pour lisibilité */
    box-shadow: var(--shadow-md);       /* Ombre portée moyenne pour effet de profondeur */
    transition: var(--transition-base); /* Anime transform et shadow au hover */
}

.brand-icon:hover {
    transform: rotate(10deg) scale(1.05); /* Rotation de 10° + zoom 5% au hover pour effet ludique */
}

/* ========== .BRAND-TEXT - NOM ET TITRE ========== */
/* Conteneur vertical (column) pour afficher le nom et le titre sur 2 lignes.
   Ligne 1 = "Nicolas Léger Patry", Ligne 2 = "CONSEILLER EN PLACEMENT". */
.brand-text {
    display: flex;                      /* Active Flexbox pour empiler nom et titre verticalement */
    flex-direction: column;             /* Empile les enfants en colonne (vertical) */
}

/* ========== .BRAND-NAME - NOM PRINCIPAL ========== */
/* Nom "Nicolas Léger Patry" en Bold (700) avec taille 1.1rem (17.6px).
   Couleur primaire qui s'adapte au thème (noir jour, blanc nuit). */
.brand-name {
    font-size: 1.1rem;                  /* Taille légèrement plus grande que le corps (17.6px vs 16px) */
    font-weight: 700;                   /* Poids Bold pour mise en avant du nom */
    color: var(--text-primary);         /* Couleur de texte principale (adapte au thème) */
}

/* ========== .BRAND-TITLE - SOUS-TITRE ========== */
/* Sous-titre "CONSEILLER EN PLACEMENT" en majuscules avec espacement des lettres (letter-spacing).
   Taille réduite (0.75rem = 12px) et couleur secondaire pour hiérarchie visuelle. */
.brand-title {
    font-size: 0.75rem;                 /* Taille réduite à 12px pour sous-titre discret */
    color: var(--text-secondary);       /* Couleur grise secondaire (moins contrasté que le nom) */
    text-transform: uppercase;          /* Force les majuscules pour uniformité */
    letter-spacing: 1px;                /* Espacement de 1px entre les lettres pour effet aéré */
}

/* ========== .NAV-TOGGLE - MENU HAMBURGER MOBILE ========== */
/* Bouton hamburger (3 barres horizontales) affiché uniquement sur mobile (< 768px) via media query.
   Caché par défaut sur desktop (display: none) et activé en flex sur mobile. */
.nav-toggle {
    display: none;                      /* Caché par défaut sur desktop (≥768px) */
    flex-direction: column;             /* Empile les 3 barres verticalement quand visible */
    gap: 6px;                           /* Espacement de 6px entre chaque barre */
}

/* ========== NAV-TOGGLE SPAN - BARRES DU HAMBURGER ========== */
/* Chaque barre du menu hamburger = un <span> avec fond bleu et transition animée.
   Les barres tournent et se transforment en "X" quand le menu est ouvert (via JS). */
.nav-toggle span {
    width: 28px;                        /* Largeur de chaque barre (28px) */
    height: 3px;                        /* Hauteur fine de 3px pour look minimaliste */
    background: var(--primary-blue);    /* Couleur bleu iA (#064DD9) */
    border-radius: 2px;                 /* Bordures arrondies subtiles (2px) */
    transition: var(--transition-base); /* Anime transform et rotate lors de l'ouverture/fermeture */
}

/* =====================================================
   THEME TOGGLE - BOUTON JOUR/NUIT
   ===================================================== */
/* Bouton circulaire avec icônes soleil/lune pour basculer entre mode jour et nuit.
   Anime la transition entre les 2 icônes avec rotation et changement d'opacité. */

/* ========== .THEME-TOGGLE - BOUTON CIRCULAIRE ========== */
/* Bouton rond de 50px avec gradient bleu, positionne les icônes SVG en absolute à l'intérieur.
   Effet de zoom et rotation au hover pour feedback visuel ludique. */
.theme-toggle {
    position: relative;                 /* Position relative pour permettre absolute des SVG enfants */
    width: 50px;                        /* Largeur du bouton circulaire */
    height: 50px;                       /* Hauteur du bouton circulaire (50×50px = cercle parfait) */
    border: none;                       /* Supprime la bordure par défaut du <button> */
    background: var(--gradient-primary); /* Gradient bleu iA (135deg) */
    border-radius: 50%;                 /* Bordure arrondie à 50% = cercle parfait */
    cursor: pointer;                    /* Change le curseur en pointeur pour indiquer interactivité */
    display: flex;                      /* Active Flexbox pour centrer les icônes */
    align-items: center;                /* Centre verticalement les icônes SVG */
    justify-content: center;            /* Centre horizontalement les icônes SVG */
    transition: all 0.3s ease;          /* Anime toutes les propriétés (transform, shadow, background) */
    box-shadow: var(--shadow-sm);       /* Ombre légère pour effet de profondeur */
    margin-left: 1rem;                  /* Espacement de 16px à gauche pour séparer des liens */
}

/* ========== THEME-TOGGLE HOVER - EFFET INTERACTIF ========== */
/* Effet de zoom (1.1 = 110%) et rotation (10°) au survol pour indiquer l'interactivité.
   Augmente l'ombre pour effet d'élévation (impression de bouton qui se soulève). */
.theme-toggle:hover {
    transform: scale(1.1) rotate(10deg); /* Zoom 10% + rotation 10° pour effet ludique */
    box-shadow: var(--shadow-md);        /* Ombre plus prononcée pour effet de profondeur accrue */
}

/* ========== THEME-TOGGLE ACTIVE - FEEDBACK CLIC ========== */
/* Réduit le bouton à 95% lors du clic pour feedback tactile (impression de bouton enfoncé).
   Retourne à scale(1) dès que le clic est relâché. */
.theme-toggle:active {
    transform: scale(0.95);              /* Réduit à 95% pour effet de pression */
}

/* ========== THEME-TOGGLE SVG - ICÔNES SOLEIL/LUNE ========== */
/* Icônes SVG positionnées en absolute au centre du bouton (un seul visible à la fois).
   Transition sur opacity et transform pour animer le changement d'icône. */
.theme-toggle svg {
    position: absolute;                  /* Position absolute pour superposer les 2 icônes */
    transition: all 0.3s ease;           /* Anime opacity, rotation et scale lors du changement */
    color: var(--white);                 /* Couleur blanche pour contraste sur fond bleu */
}

/* ========== MODE JOUR - ICÔNE SOLEIL VISIBLE ========== */
/* En mode jour (par défaut), affiche l'icône soleil à opacity 1 avec rotation 0°.
   L'icône lune est cachée (opacity 0) avec rotation 90° et scale réduit. */
.theme-toggle .sun-icon {
    opacity: 1;                          /* Soleil visible (opacité 100%) */
    transform: rotate(0deg) scale(1);    /* Rotation normale (0°) et taille normale (scale 1) */
}

.theme-toggle .moon-icon {
    opacity: 0;                          /* Lune invisible (opacité 0%) */
    transform: rotate(90deg) scale(0.5); /* Rotation 90° et réduit à 50% pour effet de disparition */
}

/* ========== MODE NUIT - BACKGROUND VIOLET ========== */
/* En mode nuit, change le gradient du bouton pour teintes bleu-violet plus sombres.
   Gradient de bleu marine (#1e3a8a) vers violet (#7c3aed) pour cohérence avec le thème nuit. */
body.dark-mode .theme-toggle {
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); /* Gradient bleu-violet nuit */
}

/* ========== MODE NUIT - ICÔNE LUNE VISIBLE ========== */
/* En mode nuit, inverse la visibilité : lune visible (opacity 1) et soleil caché (opacity 0).
   Anime la transition avec rotation inverse (-90° pour soleil, 0° pour lune). */
body.dark-mode .theme-toggle .sun-icon {
    opacity: 0;                          /* Soleil invisible en mode nuit */
    transform: rotate(-90deg) scale(0.5); /* Rotation inverse -90° et réduit à 50% */
}

body.dark-mode .theme-toggle .moon-icon {
    opacity: 1;                          /* Lune visible en mode nuit (opacité 100%) */
    transform: rotate(0deg) scale(1);    /* Rotation normale (0°) et taille normale (scale 1) */
}

/* ========== .NAV-MENU - LISTE DES LIENS ========== */
/* Liste <ul> contenant les liens de navigation principaux (Accueil, Services, À propos, etc.).
   Utilise Flexbox pour aligner horizontalement les liens avec espacement uniforme. */
.nav-menu {
    display: flex;                      /* Active Flexbox pour aligner les liens horizontalement */
    align-items: center;                /* Centre verticalement les liens */
    gap: 14px;                          /* Espacement de 14px entre chaque lien */
    list-style: none;                   /* Supprime les puces de liste (li) */
}

/* ========== .NAV-LINK - LIENS DE NAVIGATION ========== */
/* Chaque lien de navigation avec effet d'underline animé au hover (pseudo-élément ::after).
   Position relative pour permettre le positionnement absolute de la barre de soulignement. */
.nav-link {
    font-size: var(--font-nav);         /* Taille de police 0.95rem (15.2px) définie par variable */
    font-weight: 500;                   /* Poids Medium pour lisibilité sans être trop gras */
    color: var(--text-primary);         /* Couleur de texte principale (adapte au thème) */
    position: relative;                 /* Position relative pour le pseudo-élément ::after */
    padding: 0.5rem 0;                  /* Padding vertical de 8px (augmente la zone cliquable) */
    margin: 0 14px;                     /* Marge horizontale de 14px pour espacer les liens */
}

/* ========== NAV-LINK ::AFTER - UNDERLINE ANIMÉ ========== */
/* Barre de soulignement bleue qui s'anime de gauche à droite au hover.
   Utilise width: 0 par défaut et width: 100% au hover pour effet de transition fluide. */
.nav-link::after {
    content: '';                        /* Contenu vide requis pour afficher le pseudo-élément */
    position: absolute;                 /* Position absolute par rapport au .nav-link parent */
    bottom: 0;                          /* Ancre la barre en bas du lien (juste sous le texte) */
    left: 0;                            /* Démarre la barre depuis la gauche */
    width: 0;                           /* Largeur 0 par défaut (invisible) */
    height: 2px;                        /* Hauteur de 2px pour barre fine et élégante */
    background: var(--primary-blue);    /* Couleur bleu iA (#064DD9) */
    transition: var(--transition-base); /* Anime le changement de largeur (width 0→100%) */
}

/* ========== NAV-LINK HOVER & ACTIVE - UNDERLINE VISIBLE ========== */
/* Au survol (.hover) ou pour le lien actif (.active), étend la barre à 100% de largeur.
   Transition fluide grâce au transition défini sur ::after. */
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;                        /* Étend la barre sur toute la largeur du lien */
}

/* ========== .NAV-DROPDOWN - MENU DÉROULANT ========== */
/* Conteneur parent pour un menu dropdown (ex: "Services" avec sous-menus).
   Position relative pour permettre le positionnement absolute du .dropdown-menu enfant. */
.nav-dropdown {
    position: relative;                 /* Position relative pour le positionnement du dropdown enfant */
}

/* ========== .DROPDOWN-MENU - SOUS-MENU CACHÉ ========== */
/* Menu déroulant positionné sous le lien parent, initialement caché avec opacity 0.
   Apparaît au hover du parent avec animation fadeIn + translateY. */
.dropdown-menu {
    position: absolute;                 /* Position absolute pour apparaître au-dessus du contenu */
    top: 100%;                          /* Positionne le dropdown juste sous le lien parent */
    left: 0;                            /* Aligne le dropdown à gauche du lien parent */
    min-width: 250px;                   /* Largeur minimale de 250px pour les longs textes */
    background: var(--card-bg);         /* Fond de carte semi-transparent (blanc/noir selon thème) */
    border-radius: 12px;                /* Bordures arrondies pour design moderne */
    box-shadow: var(--shadow-lg);       /* Ombre large pour effet d'élévation prononcée */
    padding: 1rem;                      /* Padding interne de 16px autour des liens */
    list-style: none;                   /* Supprime les puces de liste */
    opacity: 0;                         /* Invisible par défaut (caché) */
    visibility: hidden;                 /* Caché du DOM (non cliquable) */
    transform: translateY(-10px);       /* Décale de 10px vers le haut pour effet d'apparition */
    transition: var(--transition-base); /* Anime opacity, visibility et transform au hover */
}

/* ========== DROPDOWN HOVER - AFFICHAGE DU MENU ========== */
/* Au survol du .nav-dropdown parent, affiche le .dropdown-menu enfant avec animation.
   Transition de opacity 0→1, visibility hidden→visible et translateY -10px→0. */
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;                         /* Affiche le dropdown (opacité 100%) */
    visibility: visible;                /* Rend le dropdown cliquable */
    transform: translateY(0);           /* Ramène le dropdown à sa position normale (glisse vers le bas) */
}

/* ========== DROPDOWN MENU LI - ÉLÉMENTS DE LISTE ========== */
/* Supprime les marges par défaut des éléments <li> à l'intérieur du dropdown.
   Permet un espacement contrôlé via le padding des liens <a>. */
.dropdown-menu li {
    margin: 0;                          /* Supprime les marges par défaut */
}

/* ========== DROPDOWN MENU A - LIENS DU DROPDOWN ========== */
/* Liens à l'intérieur du dropdown avec padding généreux pour zone cliquable.
   Effet de fond coloré au hover pour feedback visuel. */
.dropdown-menu a {
    display: block;                     /* Affiche en block pour occuper toute la largeur */
    padding: 0.75rem 1rem;              /* Padding 12px vertical, 16px horizontal (zone cliquable large) */
    border-radius: 8px;                 /* Bordures arrondies pour effet de bouton */
    font-size: 0.9rem;                  /* Taille légèrement réduite (14.4px) */
    color: var(--text-primary);         /* Couleur de texte principale */
    transition: var(--transition-fast); /* Transition rapide (0.2s) pour hover réactif */
}

/* ========== DROPDOWN MENU A HOVER - FEEDBACK VISUEL ========== */
/* Au survol, change le fond et la couleur du texte pour indiquer l'interactivité.
   Fond gris clair (off-white) et texte bleu iA. */
.dropdown-menu a:hover {
    background: var(--off-white);       /* Fond gris très clair (#f8f9fa) */
    color: var(--primary-blue);         /* Texte bleu iA (#064DD9) */
}

/* ========== .BTN-PRIMARY-NAV - BOUTON CTA NAVIGATION ========== */
/* Bouton Call-to-Action dans la navbar (ex: "Prendre rendez-vous", "Contactez-moi").
   Gradient bleu, ombre portée et effet de lift au hover pour attirer l'attention. */
.btn-primary-nav {
    padding: 0.75rem 1.5rem;            /* Padding 12px vertical, 24px horizontal pour bouton bien visible */
    background: var(--gradient-primary); /* Gradient bleu iA (135deg) */
    color: var(--white);                /* Texte blanc pour contraste maximal */
    border-radius: 8px;                 /* Bordures arrondies pour design moderne */
    font-weight: 600;                   /* Poids SemiBold pour texte impactant */
    font-size: 0.9rem;                  /* Taille 14.4px (légèrement réduite) */
    box-shadow: var(--shadow-sm);       /* Ombre légère pour effet de profondeur */
    transition: var(--transition-base); /* Anime transform et shadow au hover */
}

/* ========== BTN-PRIMARY-NAV HOVER - EFFET LIFT ========== */
/* Au survol, soulève le bouton de 2px et augmente l'ombre pour effet d'élévation.
   Feedback visuel fort pour encourager le clic. */
.btn-primary-nav:hover {
    transform: translateY(-2px);        /* Soulève le bouton de 2px vers le haut */
    box-shadow: var(--shadow-md);       /* Ombre moyenne pour effet de profondeur accrue */
}

/* =====================================================
   BANNIÈRE PROMOTIONNELLE SAISON REER
   ===================================================== */
.reer-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #032B7F 0%, #064DD9 40%, #00A8E8 100%);
    padding: 0;
    z-index: 999;
}

.reer-banner.reer-hidden {
    display: none;
}

.reer-banner-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 300px at 10% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 400px 400px at 90% 50%, rgba(0, 168, 232, 0.2) 0%, transparent 70%);
    animation: reerShimmer 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes reerShimmer {
    0% { opacity: 0.6; transform: translateX(-2%); }
    100% { opacity: 1; transform: translateX(2%); }
}

.reer-banner-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.9rem 2rem;
    flex-wrap: wrap;
}

.reer-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.reer-badge-urgent {
    background: #FF3B3B;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    animation: reerPulse 1.5s ease-in-out infinite;
}

@keyframes reerPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 12px 4px rgba(255, 59, 59, 0.3); }
}

.reer-badge-date {
    color: #FFD700;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(255, 215, 0, 0.4);
}

.reer-text {
    text-align: center;
}

.reer-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.reer-highlight {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reer-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    margin: 0.2rem 0 0;
    line-height: 1.3;
}

.reer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #032B7F;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    flex-shrink: 0;
}

.reer-cta:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 28px rgba(255, 215, 0, 0.6);
}

.reer-cta-icon {
    font-size: 1.1rem;
}

.reer-cta-arrow {
    width: 16px;
    height: 16px;
    stroke: #032B7F;
}

.reer-close {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    transition: color 0.2s;
}

.reer-close:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .reer-banner-content {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.8rem 1rem;
        padding-right: 2.2rem;
    }

    .reer-badge-wrap {
        flex-direction: row;
        gap: 0.5rem;
    }

    .reer-title { font-size: 1.1rem; }
    .reer-subtitle { font-size: 0.75rem; }
    .reer-cta { font-size: 0.78rem; padding: 0.5rem 1.2rem; }
}

/* =====================================================
   HERO SECTION - BANNIÈRE PRINCIPALE PLEIN ÉCRAN
   ===================================================== */
/* Section hero de hauteur 100vh avec background multi-couches (gradient + SVG + particules).
   Utilise Flexbox pour centrer le contenu verticalement et horizontalement. */

/* ========== .HERO - CONTENEUR PRINCIPAL ========== */
/* Section plein écran (100vh) avec background complexe en 2 couches :
   1. Gradient bleu iA (overlay semi-transparent)
   2. SVG data-uri illustrant un paysage avec soleil, nuages et collines
   Position relative pour permettre les pseudo-éléments ::before (glow animé). */
.hero {
    position: relative;                 /* Position relative pour les pseudo-éléments ::before et ::after */
    min-height: 100vh;                  /* Hauteur minimale = 100% du viewport (plein écran) */
    display: flex;                      /* Active Flexbox pour centrer le contenu */
    align-items: center;                /* Centre verticalement le hero-content */
    justify-content: center;            /* Centre horizontalement le hero-content */
    background: linear-gradient(135deg, rgba(6, 77, 217, 0.9) 0%, rgba(0, 168, 232, 0.8) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="sky" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%2387CEEB"/><stop offset="100%" style="stop-color:%23E0F6FF"/></linearGradient></defs><rect fill="url(%23sky)" width="1200" height="800"/><ellipse cx="200" cy="100" rx="80" ry="80" fill="%23FFD700" opacity="0.9"/><circle cx="600" cy="400" r="200" fill="%2300D4AA" opacity="0.3"/><circle cx="300" cy="500" r="150" fill="%23FF6B9D" opacity="0.2"/><path d="M0,700 Q300,600 600,650 T1200,700 L1200,800 L0,800 Z" fill="%2300C853"/><path d="M0,750 Q400,700 800,720 T1200,750 L1200,800 L0,800 Z" fill="%2300A844"/><g><circle cx="200" cy="400" r="40" fill="%23FF69B4"/><ellipse cx="200" cy="380" rx="15" ry="20" fill="%23FFC0CB"/><circle cx="190" cy="375" r="3" fill="%23000"/><circle cx="210" cy="375" r="3" fill="%23000"/><path d="M195,385 Q200,390 205,385" stroke="%23000" stroke-width="2" fill="none"/></g><g><circle cx="1000" cy="300" r="35" fill="%2387CEEB"/><circle cx="990" cy="295" r="3" fill="%23000"/><circle cx="1010" cy="295" r="3" fill="%23000"/></g></svg>');
                /* Background multi-couches : 1) Gradient bleu (overlay 90% opacité) + 2) SVG illustration */
                /* SVG inline via data-uri : paysage avec soleil doré, collines vertes, et personnages */
                /* Avantage data-uri : pas de requête HTTP supplémentaire, image embarquée directement */
    background-size: cover;             /* Étire le background pour couvrir tout le hero (responsive) */
    background-position: center;        /* Centre le background horizontalement et verticalement */
    color: var(--white);                /* Texte blanc (#ffffff) pour contraste sur fond bleu */
    padding: 8rem 2rem 4rem;            /* Padding : 128px haut (sous navbar), 32px côtés, 64px bas */
    overflow: hidden;                   /* Cache les débordements (particules, animations qui dépassent) */
}

/* ========== .HERO::BEFORE - GLOW ANIMÉ ========== */
/* Pseudo-élément ::before qui ajoute 2 cercles de lumière (radial-gradients) animés.
   Cercle 1 à 20% gauche / 50% haut (bleu iA), Cercle 2 à 80% droite / 30% haut (cyan).
   Animation pulseGlow fait varier l'opacité pour effet de respiration lumineuse. */
.hero::before {
    content: '';                        /* Contenu vide requis pour afficher le pseudo-élément */
    position: absolute;                 /* Position absolute pour couvrir tout le .hero parent */
    top: 0;                            /* Ancre en haut du .hero */
    left: 0;                           /* Ancre à gauche du .hero */
    right: 0;                          /* Étend jusqu'à droite du .hero */
    bottom: 0;                         /* Étend jusqu'en bas du .hero (couvre tout) */
    background:
        radial-gradient(circle at 20% 50%, rgba(6, 77, 217, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(0, 168, 232, 0.15) 0%, transparent 50%);
                /* 2 gradients radiaux : cercles de lumière bleue avec dégradé transparent */
                /* Cercle 1 : 20% gauche, 50% haut (bleu iA 20% opacité) */
                /* Cercle 2 : 80% droite, 30% haut (cyan 15% opacité) */
    animation: pulseGlow 8s ease-in-out infinite; /* Animation respiration 8 secondes en boucle infinie */
}

/* ========== @KEYFRAMES PULSEGLOW - RESPIRATION LUMINEUSE ========== */
/* Animation qui fait varier l'opacité du ::before entre 50% et 100%.
   Crée un effet de respiration / pulsation lumineuse sur les cercles de glow. */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; }         /* Début et fin à 50% d'opacité (glow discret) */
    50% { opacity: 1; }                /* Mi-parcours à 100% d'opacité (glow maximum) */
}

/* ========== .HERO-OVERLAY - GRILLE ANIMÉE ========== */
/* Overlay additionnel avec pattern de grille subtile (SVG 1×1px blanc 5% opacité).
   Animation moveGrid déplace la grille diagonalement pour effet de mouvement parallaxe. */
.hero-overlay {
    position: absolute;                 /* Position absolute pour se superposer au hero */
    inset: 0;                          /* Raccourci pour top:0, right:0, bottom:0, left:0 (couvre tout) */
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="rgba(255,255,255,0.05)"/></svg>') repeat;
                /* SVG data-uri : rectangle 1×1px blanc semi-transparent, répété pour créer une grille */
                /* Repeat crée un pattern pointillé sur tout le hero */
    opacity: 0.3;                      /* Opacité 30% pour effet très subtil (ne doit pas distraire) */
    animation: moveGrid 20s linear infinite; /* Animation déplacement grille 20s en boucle linéaire */
}

/* ========== @KEYFRAMES MOVEGRID - DÉPLACEMENT DIAGONAL ========== */
/* Animation qui translate la grille de (0,0) à (50px,50px) en 20 secondes.
   Crée un effet de mouvement diagonal continu pour donner vie au background. */
@keyframes moveGrid {
    0% { transform: translate(0, 0); }   /* Position initiale (0, 0) */
    100% { transform: translate(50px, 50px); } /* Position finale décalée de 50px horizontalement et verticalement */
}

/* ========== .HERO-CONTENT - CONTENU CENTRÉ ========== */
/* Conteneur du contenu textuel (titre, sous-titre, CTA) positionné au-dessus des overlays.
   z-index 2 pour passer au-dessus du ::before (z-index 1) et overlay (z-index 0).
   Animation fadeInUp à l'apparition pour effet d'entrée élégant. */
.hero-content {
    position: relative;                 /* Position relative pour gérer le z-index */
    z-index: 2;                        /* Au-dessus des overlays (::before et .hero-overlay) */
    text-align: center;                /* Centre tout le texte horizontalement */
    max-width: 900px;                  /* Limite la largeur à 900px pour lisibilité optimale */
    animation: fadeInUp 1s ease;       /* Animation d'entrée 1 seconde (opacité 0→1 + translateY) */
}

/* ========== @KEYFRAMES FADEINUP - ANIMATION D'ENTRÉE ========== */
/* Animation classique qui combine fadeIn (opacité) et slideUp (translateY).
   Le contenu apparaît progressivement tout en remontant de 30px. */
@keyframes fadeInUp {
    from {
        opacity: 0;                    /* Début invisible (opacité 0) */
        transform: translateY(30px);   /* Décalé de 30px vers le bas */
    }
    to {
        opacity: 1;                    /* Fin visible (opacité 100%) */
        transform: translateY(0);      /* Position normale (0px) */
    }
}

/* ========== .HERO-BADGE - BADGE GLASSMORPHISM ========== */
/* Badge pill avec effet glassmorphism (fond semi-transparent + flou backdrop).
   Affiche un label type "✨ Conseiller certifié" ou "⭐ 15 ans d'expérience". */
.hero-badge {
    display: inline-flex;              /* Inline-flex pour s'adapter à la largeur du contenu */
    align-items: center;               /* Centre verticalement l'icône et le texte */
    gap: 0.5rem;                       /* Espacement 8px entre icône et texte */
    padding: 0.5rem 1.5rem;            /* Padding 8px vertical, 24px horizontal */
    background: rgba(255, 255, 255, 0.1); /* Fond blanc 10% opacité (glassmorphism) */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure blanche 20% opacité */
    border-radius: 50px;               /* Bordures arrondies à 50px = pill shape */
    font-size: 0.85rem;                /* Taille réduite 13.6px (plus petit que corps) */
    font-weight: 500;                  /* Poids Medium pour lisibilité */
    margin-bottom: 2rem;               /* Espacement 32px sous le badge */
    backdrop-filter: blur(10px);       /* Flou glassmorphism du contenu en arrière-plan */
}

/* ========== .BADGE-ICON - ICÔNE DU BADGE ========== */
/* Icône SVG/emoji affichée dans le badge (étoile, certificat, etc.).
   Couleur doré (#FFD700) pour attirer l'attention. */
.badge-icon {
    color: #FFD700;                    /* Couleur or doré pour contraste et attention */
    font-size: 1.2rem;                 /* Taille 19.2px (plus grande que le texte) */
}

/* ========== .HERO-TITLE - TITRE PRINCIPAL H1 ========== */
/* Titre principal avec taille responsive (clamp) et letter-spacing négatif pour effet moderne.
   Font-weight 900 (Black) pour impact visuel maximal. */
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Taille fluide : min 40px, idéal 6vw, max 64px (responsive) */
                /* clamp() évite les media queries, s'adapte automatiquement à la largeur */
    margin-bottom: 1.5rem;             /* Espacement 24px sous le titre */
    font-weight: 900;                  /* Poids Black (ultra gras) pour impact */
    letter-spacing: -2px;              /* Espacement négatif -2px pour effet serré/moderne */
}

/* ========== .GRADIENT-TEXT - TEXTE AVEC GRADIENT ANIMÉ ========== */
/* Texte avec gradient multicolore (bleu → cyan → or) et animation hue-rotate.
   Utilise background-clip: text pour appliquer le gradient au texte. */
.gradient-text {
    background: linear-gradient(135deg, #3D7FFF 0%, #00A8E8 50%, #FFD700 100%);
                /* Gradient 135° : bleu clair (#3D7FFF) → cyan (#00A8E8) → or (#FFD700) */
    -webkit-background-clip: text;     /* Clip le background aux contours du texte (Safari/Chrome) */
    -webkit-text-fill-color: transparent; /* Rend le texte transparent pour voir le gradient */
    background-clip: text;             /* Version standard (non-webkit) */
    animation: gradientShift 5s ease infinite; /* Animation hue-rotate 5s en boucle */
}

/* ========== @KEYFRAMES GRADIENTSHIFT - ROTATION DE TEINTE ========== */
/* Animation qui fait tourner les teintes du gradient avec hue-rotate.
   Crée un effet de changement de couleur subtil et dynamique. */
@keyframes gradientShift {
    0%, 100% { filter: hue-rotate(0deg); }   /* Début/fin à 0° (couleurs originales) */
    50% { filter: hue-rotate(20deg); }       /* Mi-parcours à 20° (légère rotation de teinte) */
}

/* ========== .HERO-SUBTITLE - SOUS-TITRE ========== */
/* Sous-titre descriptif avec taille responsive et couleur blanche semi-transparente.
   Line-height 1.8 pour lisibilité optimale. */
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem); /* Taille fluide : min 16px, idéal 2vw, max 20px */
    color: rgba(255, 255, 255, 0.85);  /* Blanc 85% opacité (légèrement transparent) */
    margin-bottom: 3rem;               /* Espacement 48px sous le sous-titre */
    line-height: 1.8;                  /* Interligne 1.8 pour confort de lecture */
}

/* ========== .HERO-CTA - CONTENEUR BOUTONS ========== */
/* Conteneur flex pour les boutons CTA (Call-to-Action) avec wrap pour responsive.
   Justifie au centre et permet de passer à la ligne sur mobile. */
.hero-cta {
    display: flex;                     /* Active Flexbox pour aligner les boutons */
    gap: 1.5rem;                       /* Espacement 24px entre les boutons */
    justify-content: center;           /* Centre les boutons horizontalement */
    flex-wrap: wrap;                   /* Permet le retour à la ligne sur petits écrans */
    margin-bottom: 4rem;               /* Espacement 64px sous les boutons */
}

/* ========== .BTN-PRIMARY - BOUTON PRINCIPAL CTA ========== */
/* Bouton Call-to-Action principal avec gradient bleu iA et effet de lift au hover.
   Utilisé pour les actions principales : "Prendre rendez-vous", "Contactez-moi". */
.btn-primary {
    display: inline-flex;              /* Inline-flex pour aligner icône + texte horizontalement */
    align-items: center;               /* Centre verticalement l'icône et le texte */
    gap: 0.5rem;                       /* Espacement 8px entre icône et texte */
    padding: 1rem 2rem;                /* Padding 16px vertical, 32px horizontal (bouton généreux) */
    background: var(--gradient-primary); /* Gradient bleu iA (135deg, #064DD9 → #1B6FF0) */
    color: var(--white);               /* Texte blanc pour contraste maximal sur fond bleu */
    border-radius: 12px;               /* Bordures arrondies 12px pour design moderne */
    font-weight: 600;                  /* Poids SemiBold pour texte impactant */
    font-size: 1rem;                   /* Taille standard 16px (lisible) */
    box-shadow: var(--shadow-md);      /* Ombre moyenne pour effet de profondeur */
    transition: var(--transition-base); /* Anime transform et shadow au hover (0.3s) */
}

/* ========== BTN-PRIMARY HOVER - EFFET LIFT ========== */
/* Au survol, soulève le bouton de 3px et augmente l'ombre pour effet d'élévation prononcé.
   Feedback visuel fort pour encourager le clic (améliore le taux de conversion). */
.btn-primary:hover {
    transform: translateY(-3px);       /* Soulève le bouton de 3px vers le haut */
    box-shadow: var(--shadow-lg);      /* Ombre large pour accentuer l'effet de profondeur */
}

/* ========== .BTN-ICON - ICÔNE DANS LE BOUTON ========== */
/* Icône SVG (flèche, calendrier, etc.) affichée à côté du texte du bouton.
   Dimensions 20×20px avec stroke-width 2 pour visibilité. */
.btn-icon {
    width: 20px;                       /* Largeur 20px (taille standard pour icônes inline) */
    height: 20px;                      /* Hauteur 20px (carré parfait) */
    stroke-width: 2;                   /* Épaisseur du trait SVG à 2px (bien visible) */
    transition: var(--transition-base); /* Anime le transform au hover */
}

/* ========== BTN-ICON HOVER - ANIMATION FLÈCHE ========== */
/* Au hover du bouton parent, l'icône se déplace de 5px vers la droite.
   Effet classique de flèche "→" qui indique la direction de l'action. */
.btn-primary:hover .btn-icon {
    transform: translateX(5px);        /* Déplace l'icône de 5px vers la droite */
}

/* ========== .BTN-SECONDARY - BOUTON SECONDAIRE ========== */
/* Bouton secondaire transparent avec glassmorphism (fond flou + bordure blanche).
   Utilisé pour actions secondaires : "En savoir plus", "Voir le portfolio". */
.btn-secondary {
    padding: 1rem 2rem;                /* Padding identique au btn-primary (16px/32px) */
    background: rgba(255, 255, 255, 0.1); /* Fond blanc 10% opacité (glassmorphism) */
    color: var(--white);               /* Texte blanc */
    border: 2px solid rgba(255, 255, 255, 0.3); /* Bordure blanche 30% opacité (2px épaisseur) */
    border-radius: 12px;               /* Bordures arrondies identiques au btn-primary */
    font-weight: 600;                  /* Poids SemiBold */
    font-size: 1rem;                   /* Taille standard 16px */
    backdrop-filter: blur(10px);       /* Flou glassmorphism du contenu en arrière-plan */
    transition: var(--transition-base); /* Anime background et border au hover */
}

/* ========== BTN-SECONDARY HOVER - AUGMENTATION OPACITÉ ========== */
/* Au survol, augmente l'opacité du fond et de la bordure pour feedback visuel subtil.
   Moins prononcé que btn-primary (hiérarchie visuelle claire). */
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2); /* Fond blanc 20% opacité (double l'opacité) */
    border-color: rgba(255, 255, 255, 0.5); /* Bordure blanche 50% opacité (plus visible) */
}

/* ========== .HERO-STATS - STATISTIQUES CLÉS ========== */
/* Conteneur flex pour afficher 3-4 statistiques clés (années d'expérience, clients, AUM, etc.).
   Layout horizontal avec wrap pour passer en vertical sur mobile. */
.hero-stats {
    display: flex;                     /* Active Flexbox pour aligner les stats horizontalement */
    gap: 3rem;                         /* Espacement 48px entre chaque stat */
    justify-content: center;           /* Centre les stats horizontalement */
    flex-wrap: wrap;                   /* Permet le retour à la ligne sur petits écrans */
}

/* ========== .STAT-ITEM - STATISTIQUE INDIVIDUELLE ========== */
/* Conteneur d'une statistique (nombre + label) avec texte centré.
   Format : "10+" au-dessus de "ANNÉES D'EXPÉRIENCE". */
.stat-item {
    text-align: center;                /* Centre le nombre et le label */
}

/* ========== .STAT-NUMBER - NOMBRE STATISTIQUE ========== */
/* Nombre principal affiché en très gros (2.5rem = 40px) avec font-weight 900.
   Ex: "10+", "500+", "$50M+". */
.stat-number {
    font-size: 2.5rem;                 /* Taille 40px (très gros pour impact visuel) */
    font-weight: 900;                  /* Poids Black (ultra gras) pour maximum d'impact */
    color: var(--white);               /* Blanc pur pour contraste sur fond bleu hero */
    margin-bottom: 0.5rem;             /* Espacement 8px sous le nombre */
}

/* ========== .STAT-LABEL - LIBELLÉ STATISTIQUE ========== */
/* Label descriptif sous le nombre (ex: "ANNÉES D'EXPÉRIENCE", "CLIENTS SATISFAITS").
   Uppercase avec letter-spacing pour style moderne et lisibilité. */
.stat-label {
    font-size: 0.9rem;                 /* Taille 14.4px (légèrement réduite) */
    color: rgba(255, 255, 255, 0.7);   /* Blanc 70% opacité (moins prononcé que le nombre) */
    text-transform: uppercase;         /* Force les majuscules pour uniformité */
    letter-spacing: 1px;               /* Espacement 1px entre lettres pour effet aéré */
}

/* ========== .SCROLL-INDICATOR - INDICATEUR DE SCROLL ========== */
/* Indicateur animé en bas du hero invitant l'utilisateur à scroller vers le bas.
   Positionné au centre en bas avec animation bounce (rebond vertical). */
.scroll-indicator {
    position: absolute;                /* Position absolute par rapport au .hero parent */
    bottom: 2rem;                      /* Ancre à 32px du bas du hero */
    left: 50%;                         /* Positionne à 50% de la largeur */
    transform: translateX(-50%);       /* Centre horizontalement (compense les 50%) */
    text-align: center;                /* Centre le texte et la flèche */
    animation: bounce 2s infinite;     /* Animation rebond 2 secondes en boucle infinie */
}

/* ========== @KEYFRAMES BOUNCE - ANIMATION REBOND ========== */
/* Animation de rebond vertical qui déplace l'indicateur de 0px à -10px et retour.
   Crée un effet de rebond pour attirer l'attention de l'utilisateur. */
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }   /* Position normale (0px vertical) */
    50% { transform: translateX(-50%) translateY(-10px); }    /* Remonte de 10px (rebond) */
}

/* ========== SCROLL-INDICATOR SPAN - TEXTE "SCROLL" ========== */
/* Texte "SCROLL" ou "DÉFILER" affiché au-dessus de la flèche.
   Uppercase avec letter-spacing pour style moderne. */
.scroll-indicator span {
    display: block;                    /* Force le span en block pour qu'il prenne toute la largeur */
    font-size: 0.85rem;                /* Taille 13.6px (réduite) */
    margin-bottom: 0.5rem;             /* Espacement 8px sous le texte */
    text-transform: uppercase;         /* Force les majuscules */
    letter-spacing: 2px;               /* Espacement 2px entre lettres (très aéré) */
}

/* ========== .SCROLL-ARROW - FLÈCHE VERS LE BAS ========== */
/* Flèche CSS (chevron) pointant vers le bas créée avec des bordures.
   Technique classique pour créer des formes géométriques en CSS. */
.scroll-arrow {
    width: 24px;                       /* Largeur 24px (taille de la flèche) */
    height: 24px;                      /* Hauteur 24px (carré) */
    border-right: 2px solid var(--white); /* Bordure droite blanche 2px (partie droite du chevron) */
    border-bottom: 2px solid var(--white); /* Bordure bas blanche 2px (partie bas du chevron) */
    transform: rotate(45deg);          /* Rotation 45° pour créer une flèche pointant vers le bas (↓) */
    margin: 0 auto;                    /* Centre horizontalement la flèche */
}
/* Technique CSS chevron : 2 bordures adjacentes (right + bottom) + rotation 45° = flèche ↓
   Avantage : Pas besoin d'image SVG, tout en CSS natif. */

/* =====================================================
   SECTIONS GÉNÉRALES - STYLES RÉUTILISABLES
   ===================================================== */
/* Styles de base appliqués à toutes les sections <section> de la page.
   Définit padding, max-width et centrage horizontal pour cohérence visuelle. */

/* ========== SECTION - CONTENEUR DE BASE ========== */
/* Style appliqué à toutes les balises <section> (Services, Pourquoi Nicolas, FAQ, Contact, etc.).
   Padding vertical de var(--section-padding), max-width pour lisibilité, centré horizontalement. */
section {
    padding: var(--section-padding) 20px; /* Padding 80px vertical (var), 20px horizontal minimum */
    max-width: var(--max-width-container); /* Limite la largeur à 1200px pour lisibilité optimale */
    margin: 0 auto;                    /* Centre la section horizontalement (margin auto) */
}

/* ========== .SECTION-HEADER - ENTÊTE DE SECTION ========== */
/* Conteneur centré pour le tag, titre et sous-titre de chaque section.
   Max-width 700px pour garder un contenu lisible et bien structuré. */
.section-header {
    text-align: center;                /* Centre le tag, titre et sous-titre */
    max-width: 700px;                  /* Limite la largeur à 700px (optimal pour lecture) */
    margin: 0 auto 3rem;               /* Centre horizontalement + espacement 48px en bas */
}

/* ========== .SECTION-TAG - BADGE CATÉGORIE ========== */
/* Badge pill affiché au-dessus du titre (ex: "NOS SERVICES", "POURQUOI NICOLAS").
   Fond bleu clair 10% opacité, texte bleu iA, uppercase pour uniformité. */
.section-tag {
    display: inline-block;             /* Inline-block pour s'adapter à la largeur du texte */
    padding: 0.5rem 1rem;              /* Padding 8px vertical, 16px horizontal */
    background: rgba(6, 77, 217, 0.1); /* Fond bleu iA 10% opacité (très clair) */
    color: var(--primary-blue);        /* Texte bleu iA (#064DD9) */
    border-radius: 50px;               /* Bordures arrondies à 50px = pill shape */
    font-size: 0.85rem;                /* Taille 13.6px (réduite) */
    font-weight: 600;                  /* Poids SemiBold pour lisibilité */
    text-transform: uppercase;         /* Force les majuscules */
    letter-spacing: 1px;               /* Espacement 1px entre lettres */
    margin-bottom: 1rem;               /* Espacement 16px sous le tag */
}

/* ========== .SECTION-TITLE - TITRE PRINCIPAL H2 ========== */
/* Titre H2 de la section avec taille responsive (clamp) et couleur adaptative au thème.
   Font-size fluide entre 32px et 48px selon la largeur du viewport. */
.section-title {
    font-size: clamp(2rem, 4vw, 3rem); /* Taille fluide : min 32px, idéal 4vw, max 48px */
                /* clamp() permet un scaling responsive sans media queries */
    color: var(--text-primary);        /* Couleur de texte principale (noir jour, blanc nuit) */
    margin-bottom: 1rem;               /* Espacement 16px sous le titre */
}

/* ========== .SECTION-SUBTITLE - SOUS-TITRE DESCRIPTIF ========== */
/* Sous-titre descriptif sous le titre principal (1-2 phrases explicatives).
   Couleur secondaire (grise) pour hiérarchie visuelle claire. */
.section-subtitle {
    font-size: 1.1rem;                 /* Taille 17.6px (légèrement plus grande que corps) */
    color: var(--text-secondary);      /* Couleur grise secondaire (moins contrasté que titre) */
}

/* =====================================================
   SECTION SERVICES - GRILLE DE CARTES
   ===================================================== */
/* Section affichant les services offerts (planification retraite, gestion portefeuille, etc.).
   Layout CSS Grid avec cartes hover effect (lift + barre bleue animée). */

/* ========== .SERVICES - CONTENEUR SECTION ========== */
/* Section Services avec background gris très clair (off-white) pour contraste visuel.
   Se démarque du background blanc par défaut des autres sections. */
.services {
    background: var(--off-white);      /* Fond gris très clair (#f8f9fa) pour différencier la section */
}

/* ========== .SERVICES-GRID - GRILLE CSS ========== */
/* Grille CSS Grid auto-responsive avec repeat(auto-fit, minmax()).
   Crée automatiquement le nombre de colonnes optimal selon la largeur disponible. */
.services-grid {
    display: grid;                     /* Active CSS Grid pour layout en grille */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                /* auto-fit : crée autant de colonnes que possible
                   minmax(280px, 1fr) : largeur min 280px, max 1 fraction de l'espace dispo
                   Résultat : 1 colonne mobile (< 560px), 2 colonnes tablette, 3-4 colonnes desktop
                   Grille responsive automatique sans media queries ! */
    gap: 2rem;                         /* Espacement 32px entre les cartes (gouttière) */
}

/* ========== .SERVICE-CARD - CARTE INDIVIDUELLE ========== */
/* Carte de service avec fond blanc, shadow, bordures arrondies et effet hover lift.
   Pseudo-élément ::before crée une barre bleue animée en haut au hover. */
.service-card {
    background: var(--card-bg);        /* Fond blanc/noir selon thème (rgba semi-transparent) */
    padding: var(--panel-padding);     /* Padding 32px (variable --panel-padding) */
    border-radius: 14px;               /* Bordures arrondies 14px pour design moderne */
    box-shadow: var(--shadow-sm);      /* Ombre légère pour effet de profondeur */
    transition: var(--transition-base); /* Anime transform et shadow au hover (0.3s) */
    position: relative;                /* Position relative pour le pseudo-élément ::before */
    overflow: hidden;                  /* Cache les débordements (barre bleue qui dépasse) */
    border: 1px solid var(--border-color); /* Bordure grise 1px pour définir les contours */
}

/* ========== SERVICE-CARD::BEFORE - BARRE BLEUE ANIMÉE ========== */
/* Pseudo-élément qui crée une barre horizontale bleue de 4px en haut de la carte.
   Initialement cachée (scaleX(0)), s'anime au hover pour s'étendre de gauche à droite (scaleX(1)). */
.service-card::before {
    content: '';                       /* Contenu vide requis pour afficher le pseudo-élément */
    position: absolute;                /* Position absolute par rapport à la carte parent */
    top: 0;                            /* Ancre en haut de la carte */
    left: 0;                           /* Ancre à gauche de la carte */
    width: 100%;                       /* Largeur 100% de la carte */
    height: 4px;                       /* Hauteur 4px (barre fine) */
    background: var(--gradient-primary); /* Gradient bleu iA (135deg) */
    transform: scaleX(0);              /* Scale horizontal à 0 = invisible par défaut */
    transform-origin: left;            /* Point d'origine de la transformation = gauche (s'étend vers droite) */
    transition: var(--transition-base); /* Anime le scaleX au hover (0.3s) */
}

/* ========== SERVICE-CARD HOVER - EFFET LIFT ========== */
/* Au survol, soulève la carte de 10px et augmente l'ombre pour effet d'élévation.
   Feedback visuel fort pour indiquer l'interactivité. */
.service-card:hover {
    transform: translateY(-10px);      /* Soulève la carte de 10px vers le haut */
    box-shadow: var(--shadow-lg);      /* Ombre large pour accentuer l'effet de profondeur */
}

/* ========== SERVICE-CARD HOVER::BEFORE - BARRE VISIBLE ========== */
/* Au hover, anime la barre bleue de scaleX(0) à scaleX(1).
   Effet de balayage horizontal de gauche à droite. */
.service-card:hover::before {
    transform: scaleX(1);              /* Étend la barre sur toute la largeur (100%) */
}

/* Icône carrée en haut de chaque carte de service (ex: graphique pour planification financière). Sans cette icône, les cartes perdent leur identité visuelle et sont plus difficiles à différencier. */
.service-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(6, 77, 217, 0.1) 0%, rgba(0, 168, 232, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: var(--transition-base);
}

/* Au hover de la carte, transforme le fond de l'icône en gradient bleu plein. Sans cet effet, l'hover est moins visible et engageant. */
.service-card:hover .service-icon {
    background: var(--gradient-primary);
}

/* Icône SVG (35×35px) à l'intérieur du carré, colorée en bleu iA par défaut. */
.service-icon svg {
    width: 35px;
    height: 35px;
    stroke: var(--primary-blue);
    stroke-width: 2;
    transition: var(--transition-base);
}

/* Au hover, l'icône SVG devient blanche pour contraster avec le fond bleu. Sans ce changement, l'icône reste bleue sur fond bleu (illisible). */
.service-card:hover .service-icon svg {
    stroke: var(--white);
}

/* Titre H3 du service (ex: "Planification de retraite"). Sans ce style, le titre n'est pas assez mis en avant visuellement. */
.service-card h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Description du service (1-2 phrases). Sans ce texte, l'utilisateur ne comprend pas en quoi consiste le service. */
.service-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Liste à puces des caractéristiques du service (ex: "Analyse de votre situation", "Plan personnalisé"). Sans cette liste, les détails du service ne sont pas clairs. */
.service-features {
    list-style: none;
    margin-bottom: 1.5rem;
}

/* Chaque élément de la liste de caractéristiques. */
.service-features li {
    color: var(--text-secondary);
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

/* Bouton CTA en bas de chaque carte (ex: "En savoir plus"). Sans ce bouton, l'utilisateur ne peut pas accéder aux détails du service. */
.service-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--off-white);
    color: var(--primary-blue);
    border-radius: 10px;
    font-weight: 600;
    transition: var(--transition-base);
}

/* Au hover, inverse les couleurs du bouton (fond bleu, texte blanc). Sans cet effet, le bouton semble statique et moins cliquable. */
.service-btn:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* === POURQUOI NICOLAS === */
/* Section qui présente les avantages de travailler avec Nicolas (grid de 3-4 cartes). Sans cette section, l'utilisateur ne connaît pas les différenciateurs du conseiller. */
.why-nicolas {
    background: var(--card-bg);
    position: relative;
    overflow: hidden;
}

/* Grid responsive auto-adaptatif (min 260px par carte). Sans ce grid, les cartes ne s'organisent pas correctement sur différents écrans. */
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Carte individuelle présentant un avantage (ex: expertise, indépendance). Sans cette carte, chaque bénéfice n'a pas de conteneur visuel distinct. */
.why-card {
    background: var(--off-white);
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    transition: var(--transition-base);
    position: relative;
}

/* Au hover, soulève la carte et change la bordure en bleu. Sans cet effet, l'interaction est moins engageante. */
.why-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-lg);
}

/* Icône en haut de chaque carte (ex: trophée pour expertise). Sans cette icône, la carte perd son identité visuelle immédiate. */
.why-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(6, 77, 217, 0.1) 0%, rgba(0, 168, 232, 0.15) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: var(--transition-base);
}

/* Au hover de la carte, transforme le fond de l'icône en gradient bleu plein. Sans cet effet, le hover est moins visible. */
.why-card:hover .why-icon {
    background: var(--gradient-primary);
}

/* Icône SVG à l'intérieur du conteneur (30×30px, stroke bleu). Sans ce style, l'icône n'est pas correctement dimensionnée. */
.why-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--primary-blue);
    stroke-width: 2;
    transition: var(--transition-base);
}

/* Au hover, change la couleur de l'icône en blanc pour contraster avec le fond bleu. Sans ce changement, l'icône reste bleue sur fond bleu (invisible). */
.why-card:hover .why-icon svg {
    stroke: var(--white);
}

/* Titre de chaque avantage (ex: "15 ans d'expérience"). Sans ce titre, l'utilisateur ne comprend pas rapidement le bénéfice. */
.why-card h3 {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Description détaillée de l'avantage (2-3 phrases). Sans ce paragraphe, l'utilisateur n'a que le titre sans contexte. */
.why-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Conteneur des badges de confiance (ex: AMF, IQPF, logos certifications). Sans ces badges, la crédibilité professionnelle n'est pas établie visuellement. */
.trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 2rem;
    background: rgba(6, 77, 217, 0.03);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

/* Badge individuel (logo + texte). Sans ce conteneur, chaque certification n'a pas d'unité visuelle. */
.badge-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-base);
}

/* Au hover, agrandit légèrement le badge. Sans cet effet, les badges semblent statiques. */
.badge-item:hover {
    transform: scale(1.05);
}

/* Conteneur circulaire du logo de certification (50×50px). Sans ce style, le logo n'a pas de fond distinct. */
.badge-logo {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

/* Logo SVG de la certification (ex: AMF, IQPF). Sans ce style, le logo n'est pas correctement coloré et dimensionné. */
.badge-logo svg {
    width: 30px;
    height: 30px;
    fill: var(--primary-blue);
}

/* Conteneur du texte à droite du logo (nom certification + numéro). Sans ce conteneur, le texte ne s'empile pas verticalement. */
.badge-text {
    display: flex;
    flex-direction: column;
}

/* Nom de la certification en gras (ex: "AMF"). Sans ce style, le nom n'est pas visuellement distinct du numéro. */
.badge-text strong {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Numéro ou description secondaire (ex: "Membre #12345"). Sans ce style, l'information secondaire n'est pas visuellement hiérarchisée. */
.badge-text span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* === POUR QUI === */
/* Section présentant les profils clients types (jeunes professionnels, préretraités, entrepreneurs). Sans cette section, l'utilisateur ne sait pas s'il correspond à la clientèle cible. */
.target-profiles {
    background: var(--off-white);
    padding: 5rem 0;
}

/* Grid de 3 cartes profils (min 320px par carte). Sans ce grid, les profils ne s'organisent pas harmonieusement. */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Carte profil client individuelle (ex: "Jeune Professionnel 👨‍💼"). Sans cette carte, chaque profil n'a pas de conteneur structuré. */
.profile-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: var(--panel-padding);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--border-color);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

/* Barre gradient bleu en haut de la carte (apparaît au hover). Sans cet effet, le hover est moins remarquable. */
.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition-base);
}

/* Au hover, soulève la carte fortement (-12px) et change la bordure en bleu. Sans cet effet, l'interaction est moins dynamique. */
.profile-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-blue);
}

/* Au hover, révèle la barre gradient bleu en haut. Sans cet effet, la barre reste cachée. */
.profile-card:hover::before {
    transform: scaleX(1);
}

/* Emoji représentant le profil (ex: 👨‍💼, 👴, 🏢). Sans cet emoji, la carte perd son accroche visuelle immédiate. */
.profile-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 1.5rem;
    filter: grayscale(20%);
    transition: var(--transition-base);
}

/* Au hover, retire le grayscale et agrandit l'emoji. Sans cet effet, l'emoji reste grisé et statique. */
.profile-card:hover .profile-icon {
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Titre du profil (ex: "Jeune Professionnel"). Sans ce titre, l'utilisateur ne comprend pas immédiatement le profil ciblé. */
.profile-card h3 {
    font-size: 1.8rem;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Slogan du profil en italique (ex: "Bâtir votre patrimoine dès maintenant"). Sans ce slogan, le profil manque d'accroche émotionnelle. */
.profile-tagline {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.5;
}

/* Sections "Vos besoins" et "Ce que je vous apporte". Sans ces conteneurs, les sections ne sont pas séparées visuellement. */
.profile-needs,
.profile-benefits {
    margin-bottom: 1.5rem;
}

/* Titres des sous-sections (ex: "VOS BESOINS", "CE QUE JE VOUS APPORTE"). Sans ces titres, les sections ne sont pas identifiées. */
.profile-needs h4,
.profile-benefits h4 {
    color: var(--primary-blue);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Liste des besoins du profil. Sans ce style, la liste a des puces par défaut (moins épurée). */
.profile-needs ul {
    list-style: none;
    padding: 0;
}

/* Item de besoin individuel (ex: "Plan REER", "Stratégie fiscale"). Sans ce style, les items ne sont pas correctement espacés. */
.profile-needs li {
    color: var(--text-secondary);
    padding: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Paragraphe décrivant les bénéfices pour ce profil. Sans ce style, le texte n'est pas cohérent avec le reste du site. */
.profile-benefits p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Bouton CTA en bas de chaque carte profil (ex: "Me contacter"). Sans ce bouton, l'utilisateur n'a pas d'action claire après avoir lu le profil. */
.profile-cta {
    width: 100%;
    padding: 1rem;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: 0 4px 15px rgba(6, 77, 217, 0.2);
}

/* Au hover du bouton, soulève et amplifie l'ombre. Sans cet effet, le bouton semble statique. */
.profile-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 77, 217, 0.35);
}

/* === PROCESSUS === */
/* Section présentant les étapes du processus de collaboration (5 étapes en timeline verticale). Sans cette section, l'utilisateur ne comprend pas le déroulement d'un mandat. */
.process {
    background: var(--card-bg);
    position: relative;
}

/* Conteneur de la timeline (max 900px centré). Sans ce conteneur, la timeline n'est pas correctement centrée sur grands écrans. */
.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* Étape individuelle en grid (numéro 80px + contenu flexible). Sans ce grid, le numéro et le contenu ne s'alignent pas correctement. */
.process-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

/* Ligne verticale bleue connectant les étapes (sauf la dernière). Sans cette ligne, les étapes semblent déconnectées. */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 40px;
    top: 80px;
    bottom: -3rem;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-blue) 0%, rgba(6, 77, 217, 0.2) 100%);
}

/* Numéro circulaire de l'étape (ex: "1", "2", "3"). Sans ce numéro, l'utilisateur ne visualise pas la progression. */
.step-number {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 8px 25px rgba(6, 77, 217, 0.3);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Carte contenu de l'étape (titre, description, durée, liste tâches). Sans cette carte, le contenu n'a pas de structure visuelle. */
.step-content {
    background: var(--off-white);
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    transition: var(--transition-base);
}

/* Au hover, glisse vers la droite et change la bordure en bleu. Sans cet effet, l'interaction est moins engageante. */
.step-content:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
    transform: translateX(10px);
}

/* Titre de l'étape (ex: "Rencontre découverte"). Sans ce titre, l'étape n'est pas identifiée clairement. */
.step-content h3 {
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Description de l'étape (1-2 phrases). Sans cette description, l'utilisateur ne comprend pas le but de l'étape. */
.step-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Conteneur des badges durée/format (ex: "60 min", "En personne"). Sans ce conteneur, les badges ne s'alignent pas horizontalement. */
.step-details {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* Badges de détail (durée ou format de rencontre). Sans ces badges, les informations pratiques ne sont pas mises en évidence. */
.step-duration,
.step-format {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: rgba(6, 77, 217, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

/* Liste des tâches effectuées lors de l'étape. Sans cette liste, le contenu de l'étape reste abstrait. */
.step-tasks {
    list-style: none;
    padding: 0;
}

/* Tâche individuelle avec checkmark ✓ devant. Sans ce style, les tâches ont des puces par défaut (moins professionnel). */
.step-tasks li {
    color: var(--text-secondary);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Checkmark bleu devant chaque tâche. Sans ce checkmark, la liste semble incomplète visuellement. */
.step-tasks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: 700;
}

/* Conteneur du bouton CTA en bas de la section. Sans ce style, le bouton ne serait pas centré. */
.process-cta {
    text-align: center;
    margin-top: 3rem;
}

/* === FAQ === */
/* Section FAQ accordion avec questions/réponses sur les services. Sans cette section, les questions fréquentes restent sans réponse accessible. */
.faq {
    background: var(--off-white);
}

/* Conteneur des items FAQ (max 900px, empilés verticalement). Sans ce conteneur, les FAQ ne sont pas correctement centrées. */
.faq-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Item FAQ individuel (question + réponse masquée). Sans ce conteneur, chaque FAQ n'a pas de structure cliquable. */
.faq-item {
    background: var(--card-bg);
    border-radius: 14px;
    border: 2px solid var(--border-color);
    overflow: hidden;
    transition: var(--transition-base);
}

/* Au hover, change la bordure en bleu semi-transparent. Sans cet effet, l'item semble non-interactif. */
.faq-item:hover {
    border-color: rgba(6, 77, 217, 0.3);
}

/* Quand l'item est ouvert, bordure bleue pleine et ombre. Sans ce style visuel, l'utilisateur ne voit pas quel item est actif. */
.faq-item.active {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
}

/* Bouton question cliquable (texte + icône chevron). Sans ce bouton, la question ne serait pas cliquable. */
.faq-question {
    width: 100%;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: var(--transition-base);
    text-align: left;
}

/* Au hover du bouton, fond bleu léger. Sans cet effet, le hover n'est pas visible. */
.faq-question:hover {
    background: rgba(6, 77, 217, 0.03);
}

/* Texte de la question en gras. Sans ce style, la question n'est pas visuellement distincte. */
.faq-question span {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    flex: 1;
}

/* Icône chevron à droite de la question (rotate 180° si ouvert). Sans cette icône, l'utilisateur ne sait pas que l'item est cliquable. */
.faq-icon {
    width: 24px;
    height: 24px;
    stroke: var(--primary-blue);
    stroke-width: 2;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Quand l'item est ouvert, rotate le chevron vers le haut. Sans cette rotation, l'icône ne reflète pas l'état. */
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* Conteneur de la réponse (masqué par défaut avec max-height: 0). Sans ce mécanisme, la réponse serait toujours visible. */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 2rem;
}

/* Quand l'item est ouvert, révèle la réponse avec max-height élevé. Sans ce style, la réponse reste masquée. */
.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: 0 2rem 1.5rem 2rem;
}

/* Paragraphe de réponse. Sans ce style, le texte de réponse n'est pas cohérent visuellement. */
.faq-answer p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Dernier paragraphe sans marge en bas. Sans ce style, il y a un espacement excessif en bas. */
.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Liste à puces dans une réponse. Sans ce style, la liste a des puces par défaut (moins épuré). */
.faq-answer ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

/* Item de liste avec bullet bleu. Sans ce style, les items ne sont pas correctement formatés. */
.faq-answer li {
    color: var(--text-secondary);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.7;
}

/* Bullet bleu devant chaque item de liste. Sans ce bullet, la liste semble incomplète visuellement. */
.faq-answer li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Texte en gras dans les réponses (pour emphase). Sans ce style, les mots importants ne sont pas mis en évidence. */
.faq-answer strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* Conteneur du bouton CTA en bas de la section FAQ. Sans ce style, le bouton ne serait pas centré. */
.faq-cta {
    text-align: center;
    margin-top: 3rem;
}

/* === EXPERTISE TIMELINE === */
/* Section timeline du parcours professionnel de Nicolas (années d'expérience). Sans cette section, le parcours professionnel reste abstrait. */
.expertise {
    background: var(--card-bg);
}

/* Conteneur de la timeline (max 800px, ligne verticale centrale). Sans ce conteneur, la timeline n'est pas correctement structurée. */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Ligne verticale centrale grise reliant tous les événements. Sans cette ligne, les événements ne sont pas connectés visuellement. */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-light);
    transform: translateX(-50%);
}

/* Événement timeline individuel (apparaît avec scroll reveal). Sans ce conteneur, chaque événement n'a pas de structure. */
.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-slow);
}

/* Quand l'événement entre dans le viewport, révèle avec fade-in. Sans ce mécanisme, tous les événements sont visibles immédiatement (moins dynamique). */
.timeline-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Les événements impairs sont alignés à droite. Sans cette alternance, tous les événements seraient à gauche (moins équilibré visuellement). */
.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
    text-align: right;
}

/* Point bleu central sur la ligne de temps. Sans ce point, l'année n'est pas marquée visuellement sur la timeline. */
.timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--gradient-primary);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--primary-blue);
    z-index: 2;
}

/* Carte de contenu (50% largeur, décalée du centre). Sans cette carte, l'événement n'a pas de conteneur visuel. */
.timeline-content {
    width: calc(50% - 50px);
    background: var(--off-white);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

/* Au hover, agrandit légèrement la carte. Sans cet effet, la timeline semble statique. */
.timeline-item:hover .timeline-content {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* Badge d'année (ex: "2015", "2018"). Sans ce badge, l'année n'est pas mise en évidence. */
.timeline-year {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Titre de l'événement (ex: "Certification AMF"). Sans ce titre, l'événement n'est pas identifié. */
.timeline-content h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Description de l'événement. Sans cette description, l'événement manque de contexte. */
.timeline-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* === CALCULATEURS === */
/* Section des 4 calculateurs financiers interactifs (retraite, épargne, hypothèque, investissement). Sans cette section, l'utilisateur n'a pas d'outils pour simuler ses projets. */
.calculators {
    background: var(--off-white);
}

/* ✅ DISCLAIMER LÉGAL CALCULATEURS */
/* Avertissement légal jaune/orange en haut de la section. Sans ce disclaimer, l'utilisateur pourrait considérer les calculs comme des conseils professionnels (risque légal). */
.legal-disclaimer-calculators {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%);
    border-left: 4px solid #ff9800;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem auto 3rem;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
}

/* Icône d'avertissement ⚠️ du disclaimer. Sans cette icône, le disclaimer perd son caractère d'alerte visuel. */
.disclaimer-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Conteneur du texte du disclaimer. Sans ce conteneur, le texte ne s'étend pas correctement à côté de l'icône. */
.disclaimer-content {
    flex: 1;
}

/* Titre du disclaimer en orange foncé ("Avertissement"). Sans ce style, le titre n'est pas mis en évidence. */
.disclaimer-content strong {
    display: block;
    color: #e65100;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Texte explicatif du disclaimer. Sans ce style, le texte n'est pas lisible sur le fond jaune. */
.disclaimer-content p {
    color: #5d4037;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Barre de navigation des onglets calculateurs (4 boutons). Sans cette barre, l'utilisateur ne peut pas choisir le calculateur. */
.calculator-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

/* Onglet individuel (ex: "Retraite", "Épargne"). Sans ce style, les onglets ne sont pas cliquables visuellement. */
.calc-tab {
    padding: 0.75rem 2rem;
    background: var(--card-bg);
    color: var(--text-secondary);
    border-radius: 50px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

/* Au hover, change la couleur du texte en bleu. Sans cet effet, l'onglet semble non-interactif. */
.calc-tab:hover {
    color: var(--primary-blue);
}

/* Onglet actif (fond bleu, texte blanc). Sans ce style visuel, l'utilisateur ne voit pas quel calculateur est actif. */
.calc-tab.active {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

/* Panneau calculateur masqué par défaut. Sans ce display:none, tous les calculateurs seraient visibles en même temps. */
.calculator-panel {
    display: none;
    animation: fadeIn 0.5s ease;
}

/* Panneau actif (visible). Sans ce display:block, le calculateur choisi resterait masqué. */
.calculator-panel.active {
    display: block;
}

/* Animation de fade-in lors du changement d'onglet. Sans cette animation, le changement est brusque. */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Grid 2 colonnes (inputs à gauche, résultats à droite 320px). Sans ce grid, inputs et résultats ne sont pas alignés. */
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    background: var(--card-bg);
    padding: var(--panel-padding);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    max-width: var(--max-width-container);
    margin: 0 auto;
}

/* Titre de la section inputs (ex: "Vos paramètres"). Sans ce titre, la section inputs n'est pas identifiée. */
.calc-inputs h3 {
    font-size: var(--font-h3);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* Groupe d'input individuel (label + slider/number/select). Sans ce conteneur, les inputs ne sont pas correctement espacés. */
.input-group {
    margin-bottom: 2rem;
}

/* Label de l'input (ex: "Âge actuel", "Montant initial"). Sans ce label, l'utilisateur ne sait pas à quoi correspond l'input. */
.input-group label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

/* Slider range (track gris de 4px de haut). Sans ce style, le slider a l'apparence par défaut du navigateur (moins esthétique). */
.input-group input[type="range"] {
    width: 100%;
    height: 4px;
    background: var(--gray-light);
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
}

/* Thumb du slider pour Chrome/Safari (cercle bleu de 20px). Sans ce style, le thumb a l'apparence par défaut (moins professionnel). */
.input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--gradient-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* Thumb du slider pour Firefox (cercle bleu de 20px). Sans ce style, Firefox affiche un thumb différent (incohérence visuelle). */
.input-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--gradient-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);
}

/* Inputs number et select (champs de saisie). Sans ce style, les inputs ont l'apparence par défaut (moins cohérents avec le design). */
.input-group input[type="number"],
.input-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--off-white);
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition-base);
}

/* Au focus, bordure bleue et fond plus clair. Sans cet effet, l'utilisateur ne voit pas quel champ est actif. */
.input-group input[type="number"]:focus,
.input-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: var(--card-bg);
}

/* Valeur affichée sous le slider (ex: "45 000 $" en bleu). Sans ce style, l'utilisateur ne voit pas la valeur actuelle du slider. */
.input-value {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--primary-blue);
    font-weight: 600;
}

/* Texte d'aide sous l'input (ex: "Années jusqu'à la retraite"). Sans ce texte, certains inputs manquent de contexte. */
.input-suffix {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Badge "Calcul en temps réel" vert/bleu avec animation pulse. Sans ce badge, l'utilisateur ne sait pas que le calcul se fait automatiquement. */
.live-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #00D4AA 0%, #00A8E8 100%);
    color: var(--white);
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

/* Animation pulse pour le badge live. Sans cette animation, le badge semble statique (moins engageant). */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0, 212, 170, 0.5);
        transform: scale(1.02);
    }
}

/* Conteneur des cartes de résultats (empilées verticalement). Sans ce conteneur, les résultats ne sont pas correctement espacés. */
.calc-results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Carte de résultat individuelle (ex: "Capital à 65 ans", "Revenu mensuel"). Sans cette carte, chaque résultat n'a pas de conteneur visuel distinct. */
.result-card {
    background: var(--off-white);
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition-base);
}

/* Au hover, agrandit la carte légèrement. Sans cet effet, les cartes semblent statiques. */
.result-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

/* Icône emoji du résultat (ex: 💰, 📈, 🏠). Sans cette icône, la carte perd son accroche visuelle. */
.result-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Valeur du résultat en grand et gras (ex: "1 245 000 $"). Sans ce style, la valeur n'est pas visuellement dominante. */
.result-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

/* Label du résultat (ex: "Capital accumulé"). Sans ce label, l'utilisateur ne comprend pas ce que représente la valeur. */
.result-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Canvas pour les graphiques Chart.js (évolution du capital dans le temps). Sans ce canvas, les calculateurs n'ont pas de visualisation graphique. */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 280px;
    margin: 1rem auto 0;
    border-radius: 12px;
    background: #fff;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px;
}

/* === TÉMOIGNAGES === */
/* Section des témoignages clients (grid de 2-3 cartes). Sans cette section, la preuve sociale est absente du site. */
.testimonials {
    background: var(--card-bg);
}

/* Grid auto-responsive pour les témoignages (min 320px par carte). Sans ce grid, les témoignages ne s'organisent pas harmonieusement. */
.testimonials-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

/* Carte témoignage individuelle (étoiles + citation + auteur). Sans cette carte, chaque témoignage n'a pas de conteneur visuel distinct. */
.testimonial-card {
    background: var(--off-white);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

/* Au hover, soulève la carte légèrement. Sans cet effet, les témoignages semblent statiques. */
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Note en étoiles dorées (ex: ⭐⭐⭐⭐⭐). Sans cette note visuelle, la qualité du témoignage n'est pas immédiatement visible. */
.testimonial-rating {
    color: #FFD700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* Texte du témoignage en italique. Sans ce texte, le témoignage n'a pas de contenu (raison d'être de la carte). */
.testimonial-text {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    font-style: italic;
}

/* Conteneur auteur (avatar + nom + titre). Sans ce conteneur, l'avatar et le nom ne s'alignent pas horizontalement. */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Avatar circulaire avec initiales (ex: "JD" pour Jean Dupont). Sans cet avatar, le témoignage manque de personnification visuelle. */
.author-avatar {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
}

/* Nom de l'auteur en gras (ex: "Jean Dupont"). Sans ce nom, le témoignage semble anonyme (moins crédible). */
.author-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

/* Titre/profession de l'auteur (ex: "Entrepreneur, 45 ans"). Sans ce titre, le contexte du témoignage est manquant. */
.author-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* === CONTACT === */
/* Section contact avec informations (gauche) et formulaire (droite). Sans cette section, l'utilisateur ne peut pas contacter Nicolas. */
.contact {
    background: var(--off-white);
}

/* Grid 2 colonnes (info 1fr, formulaire 1.5fr). Sans ce grid, les informations et le formulaire ne s'organisent pas en colonnes. */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

/* Titre de la section contact (ex: "Parlons de vos projets"). Sans ce titre, la section manque d'accroche. */
.contact-info h2 {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Paragraphe d'introduction sous le titre. Sans ce texte, l'invitation au contact manque de chaleur. */
.contact-info > p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 3rem;
    line-height: 1.7;
}

/* Conteneur des méthodes de contact (téléphone, email, adresse). Sans ce conteneur, les méthodes ne sont pas empilées verticalement. */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Méthode de contact individuelle (icône + label + valeur). Sans ce conteneur, chaque méthode n'a pas de structure. */
.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Icône carrée de la méthode (📞, ✉️, 📍). Sans cette icône, la méthode perd son identité visuelle immédiate. */
.method-icon {
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

/* Label en majuscules (ex: "TÉLÉPHONE", "EMAIL"). Sans ce label, la méthode n'est pas identifiée clairement. */
.method-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

/* Valeur de la méthode (ex: "514-123-4567"). Sans cette valeur, la méthode n'a pas d'information concrète. */
.method-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Au hover des liens (email/téléphone), change la couleur en bleu. Sans cet effet, les liens semblent non-interactifs. */
.method-value a:hover {
    color: var(--primary-blue);
}

/* Conteneur des liens réseaux sociaux (LinkedIn, etc.). Sans ce conteneur, les liens ne s'alignent pas horizontalement. */
.social-links {
    display: flex;
    gap: 1rem;
}

/* Bouton réseau social individuel. Sans ce style, les liens sociaux ne sont pas visuellement distincts. */
.social-link {
    padding: 0.75rem 1.5rem;
    background: var(--card-bg);
    color: var(--primary-blue);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

/* Au hover, change le fond en bleu et texte en blanc. Sans cet effet, le bouton semble statique. */
.social-link:hover {
    background: var(--gradient-primary);
    color: var(--white);
    transform: translateY(-3px);
}

/* Carte formulaire de contact (à droite). Sans cette carte, le formulaire n'a pas de conteneur visuel distinct. */
.contact-form {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}

/* Groupe de champ de formulaire (label + input). Sans ce conteneur, les champs ne sont pas correctement espacés. */
.form-group {
    margin-bottom: 1.5rem;
}

/* Ligne de 2 champs côte à côte (ex: Prénom + Nom). Sans ce grid, les champs s'empilent verticalement (perte d'espace). */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Styles des champs input, select, textarea. Sans ces styles, les champs ont l'apparence par défaut (moins cohérente avec le design). */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: var(--off-white);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition-base);
}

/* Au focus, bordure bleue et fond plus clair. Sans cet effet, l'utilisateur ne voit pas quel champ est actif. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: var(--card-bg);
}

/* Classe utilitaire pour champs pleine largeur (ex: Message). Sans cette classe, certains champs restent en grid 50/50. */
.full-width {
    width: 100%;
}

/* ✅ PHASE 2 : Checkbox RGPD */
/* Groupe checkbox (conteneur pour la checkbox RGPD obligatoire). Sans ce conteneur, la checkbox n'est pas correctement espacée. */
.checkbox-group {
    margin-bottom: 1.5rem;
}

/* Label cliquable de la checkbox (checkbox + texte alignés horizontalement). Sans ce style, la checkbox et le texte ne s'alignent pas correctement. */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Checkbox elle-même (18×18px). Sans ce style, la checkbox a la taille par défaut (trop petite). */
.checkbox-label input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Texte du label à droite de la checkbox. Sans ce style, le texte ne prend pas toute la largeur disponible. */
.checkbox-label span {
    flex: 1;
}

/* Lien vers la politique de confidentialité dans le label. Sans ce lien, l'utilisateur ne peut pas consulter la politique. */
.checkbox-label a {
    color: var(--primary-blue);
    text-decoration: underline;
}

/* Au hover du lien, change la couleur en bleu foncé. Sans cet effet, le lien semble statique. */
.checkbox-label a:hover {
    color: var(--dark-blue);
}

/* ===========================
 * COOKIE BANNER - ✅ PHASE 2 RGPD
 * =========================== */
/* Bannière de consentement cookies en bas à gauche (RGPD obligatoire). Sans cette bannière, le site n'est pas conforme au RGPD. */
#cookie-banner, .cookie-banner {
    position: fixed;
    bottom: 18px;
    left: 18px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--font-small);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-width: 360px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Classe .hidden pour masquer la bannière après acceptation. Sans cette classe, la bannière reste visible après consentement. */
#cookie-banner.hidden, .cookie-banner.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* Retire le padding du container interne. Sans ce style, le padding par défaut du container crée un espacement excessif. */
.cookie-banner .container {
    padding: 0;
}

/* Conteneur du texte de la bannière. Sans cet espacement, le texte colle aux boutons. */
.cookie-content {
    margin-bottom: 8px;
}

/* Icône masquée pour version minimale de la bannière. Sans ce display:none, une icône vide apparaîtrait. */
.cookie-icon {
    display: none; /* Pas d'icône pour version minimale */
}

/* Titre de la bannière cookie (ex: "Cookies"). Sans ce titre, la bannière manque d'identité. */
.cookie-text h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--fg);
}

/* Texte explicatif de la bannière. Sans ce texte, l'utilisateur ne comprend pas pourquoi la bannière apparaît. */
.cookie-text p {
    font-size: var(--font-small);
    line-height: 1.4;
    margin: 0;
    color: var(--text-secondary);
}

/* Conteneur des boutons d'action (Accepter + lien Politique). Sans ce conteneur, les boutons ne s'alignent pas horizontalement. */
.cookie-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Bouton "Accepter" de la bannière cookie. Sans ce bouton, l'utilisateur ne peut pas donner son consentement (site bloqué). */
.cookie-btn {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: var(--font-small);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Au hover, change la couleur de fond du bouton. Sans cet effet, le bouton semble statique. */
.cookie-btn:hover {
    background: var(--primary-blue);
}

/* Lien vers la politique de confidentialité. Sans ce lien, l'utilisateur ne peut pas consulter les détails (non-conformité RGPD). */
.cookie-link {
    color: var(--primary);
    text-decoration: none;
    font-size: var(--font-small);
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Au hover du lien, souligne le texte. Sans cet effet, le lien semble moins interactif. */
.cookie-link:hover {
    text-decoration: underline;
}

/* Sur mobile, bannière pleine largeur. Sans cette règle responsive, la bannière reste à gauche avec max-width fixe (mauvais UX). */
@media (max-width: 768px) {
    #cookie-banner, .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}

/* === FOOTER === */
/* Footer sombre en bas de page (branding, liens, copyright, disclaimer). Sans ce footer, le site manque de navigation complémentaire et d'informations légales. */
.footer {
    background: var(--darker);
    color: var(--white);
    padding: 4rem 0 2rem;
}

/* Grid 4 colonnes (brand 2fr, 3 colonnes de liens 1fr chacune). Sans ce grid, le contenu du footer s'empile verticalement (perte d'espace). */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Conteneur du logo et tagline (première colonne). Sans ce conteneur, l'icône et le texte ne s'alignent pas horizontalement. */
.footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Icône du logo qui ne rétrécit pas. Sans ce flex-shrink, le logo pourrait se comprimer. */
.footer-brand .brand-icon {
    flex-shrink: 0;
}

/* Texte de description sous le logo (tagline de l'entreprise). Sans ce texte, le footer manque de contexte sur l'activité. */
.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

/* Titre de colonne de liens (ex: "Services", "Ressources"). Sans ce titre, les groupes de liens ne sont pas identifiés. */
.footer-links h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--white);
}

/* Liens individuels du footer (empilés verticalement). Sans ce style, les liens ont l'apparence par défaut (moins espacés). */
.footer-links a {
    display: block;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    transition: var(--transition-base);
}

/* Au hover, change la couleur en bleu clair et décale légèrement à droite. Sans cet effet, les liens semblent statiques. */
.footer-links a:hover {
    color: var(--light-blue);
    padding-left: 5px;
}

/* Section bas du footer (copyright + disclaimer légal). Sans cette section, les mentions légales ne sont pas séparées visuellement. */
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

/* Texte de copyright (ex: "© 2024 Nicolas..."). Sans ce texte, la propriété intellectuelle n'est pas affirmée. */
.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Disclaimer légal en très petit (protection AMF, avertissement). Sans ce disclaimer, le site n'est pas conforme aux exigences AMF. */
.footer-disclaimer {
    font-size: 0.75rem !important;
    max-width: 800px;
    margin: 1rem auto 0;
}

/* === SCROLL TO TOP === */
/* Bouton flottant "Retour en haut" en bas à droite (apparaît après scroll). Sans ce bouton, l'utilisateur doit scroller manuellement vers le haut (mauvais UX sur longue page). */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 999;
}

/* Classe .visible ajoutée par JS après scroll de 300px. Sans cette classe, le bouton reste invisible en permanence. */
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Au hover, soulève légèrement le bouton. Sans cet effet, le bouton semble moins interactif. */
.scroll-top:hover {
    transform: translateY(-5px);
}

/* === RESPONSIVE === */
/* Breakpoint tablette (1024px) : ajustements layout pour écrans moyens. Sans ces règles, certains grids restent en multi-colonnes (trop étroit). */
@media (max-width: 1024px) {
    /* Calculateurs et Contact passent en 1 colonne. Sans ce changement, inputs et résultats sont trop compressés. */
    .calc-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Footer passe en 2 colonnes au lieu de 4. Sans ce changement, les colonnes sont trop étroites. */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    /* Nouvelles sections responsive */
    /* Grid "Pourquoi Nicolas" passe en 2 colonnes. Sans ce changement, 3-4 cartes côte à côte sont trop compressées. */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Profils clients en 1 colonne. Sans ce changement, les cartes profils sont trop étroites (texte illisible). */
    .profiles-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    /* Réduit l'espacement dans les étapes du processus. Sans ce changement, les étapes prennent trop de hauteur verticale. */
    .process-step {
        gap: 1.5rem;
    }

    /* Réduit l'espacement des badges de confiance. Sans ce changement, les badges sont trop espacés sur écrans moyens. */
    .trust-badges {
        gap: 2rem;
    }
}

/* Breakpoint mobile (768px) : ajustements majeurs pour smartphones. Sans ces règles, le site est inutilisable sur mobile (éléments trop petits, grids cassés). */
@media (max-width: 768px) {
    /* Affiche le bouton hamburger de navigation. Sans ce changement, le menu hamburger reste masqué sur mobile. */
    .nav-toggle {
        display: flex;
    }

    /* Menu de navigation devient un panneau fixe plein écran (masqué par défaut). Sans ce changement, le menu horizontal déborde sur mobile. */
    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--card-bg);
        flex-direction: column;
        align-items: stretch;
        padding: 2rem;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
    }

    /* Quand le menu est ouvert (classe .active), descend en glissant. Sans ce changement, le menu reste masqué même après clic hamburger. */
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Masque le bouton CTA dans la nav (pas de place sur mobile). Sans ce changement, le bouton déborde et casse le layout. */
    .btn-primary-nav {
        display: none;
    }

    /* Réduit l'espacement des statistiques hero. Sans ce changement, les stats prennent trop de hauteur verticale sur mobile. */
    .hero-stats {
        gap: 2rem;
    }

    /* Réduit la taille des chiffres des stats. Sans ce changement, les chiffres sont trop grands sur petits écrans. */
    .stat-number {
        font-size: 2rem;
    }

    /* Grid services passe en 1 colonne. Sans ce changement, les cartes services sont trop étroites (illisibles). */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline verticale déplace la ligne à gauche (20px). Sans ce changement, la ligne centrale ne correspond plus aux dots. */
    .timeline::before {
        left: 20px;
    }

    /* Tous les items de timeline alignés à gauche (plus d'alternance gauche/droite). Sans ce changement, l'alternance casse le layout mobile. */
    .timeline-item {
        flex-direction: row !important;
        text-align: left !important;
    }

    /* Dot de timeline positionné à gauche. Sans ce changement, les dots restent au centre (incohérent avec la ligne). */
    .timeline-dot {
        left: 20px;
        transform: translateX(-50%);
    }

    /* Contenu de timeline prend toute la largeur disponible. Sans ce changement, le contenu est trop étroit. */
    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px;
    }

    /* Footer en 1 colonne (empilé verticalement). Sans ce changement, 2 colonnes sont trop étroites sur mobile. */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Nouvelles sections mobile */
    /* Grid "Pourquoi Nicolas" en 1 colonne. Sans ce changement, 2 cartes côte à côte sont trop compressées sur mobile. */
    .why-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Réduit le padding des cartes "Pourquoi". Sans ce changement, le padding prend trop de place sur petits écrans. */
    .why-card {
        padding: 1.5rem;
    }

    /* Badges de confiance empilés verticalement. Sans ce changement, les badges restent horizontaux et débordent. */
    .trust-badges {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Réduit le padding des cartes profil. Sans ce changement, le contenu est trop compressé. */
    .profile-card {
        padding: 2rem 1.5rem;
    }

    /* Réduit la taille des emojis de profil. Sans ce changement, les emojis sont disproportionnés sur mobile. */
    .profile-icon {
        font-size: 3rem;
    }

    /* Réduit la taille du titre profil. Sans ce changement, les titres sont trop grands sur mobile. */
    .profile-card h3 {
        font-size: 1.5rem;
    }

    /* Étapes processus avec numéro plus petit (60px au lieu de 80px). Sans ce changement, les numéros prennent trop de largeur. */
    .process-step {
        grid-template-columns: 60px 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    /* Ligne connectrice ajustée pour numéro 60px. Sans ce changement, la ligne ne part plus du centre du numéro. */
    .process-step:not(:last-child)::after {
        left: 30px;
        bottom: -2rem;
    }

    /* Numéro circulaire plus petit (60×60px). Sans ce changement, le numéro déborde sur le contenu. */
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Réduit le padding du contenu d'étape. Sans ce changement, le padding prend trop de place sur mobile. */
    .step-content {
        padding: 1.5rem;
    }

    /* Réduit la taille du titre d'étape. Sans ce changement, les titres sont trop grands sur mobile. */
    .step-content h3 {
        font-size: 1.3rem;
    }

    /* Désactive le glissement au hover sur mobile. Sans ce changement, le transform crée des problèmes tactiles. */
    .step-content:hover {
        transform: none;
    }

    /* Badges durée/format empilés verticalement. Sans ce changement, les badges restent horizontaux et débordent sur mobile. */
    .step-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Réduit le padding de la question FAQ. Sans ce changement, la question prend trop de place sur mobile. */
    .faq-question {
        padding: 1rem 1.5rem;
    }

    /* Réduit la taille du texte de la question. Sans ce changement, les questions sont trop grandes sur mobile. */
    .faq-question span {
        font-size: 1rem;
    }

    /* Réduit le padding de la réponse FAQ ouverte. Sans ce changement, le padding prend trop de place sur mobile. */
    .faq-item.active .faq-answer {
        padding: 0 1.5rem 1rem 1.5rem;
    }
}

/* Breakpoint très petits mobiles (480px) : optimisations extrêmes pour petits écrans. Sans ces règles, le site est difficilement utilisable sur très petits mobiles (<5 pouces). */
@media (max-width: 480px) {
    /* Boutons hero empilés verticalement. Sans ce changement, les boutons côte à côte sont trop étroits. */
    .hero-cta {
        flex-direction: column;
        gap: 1rem;
    }

    /* Boutons hero pleine largeur. Sans ce changement, les boutons empilés sont trop étroits. */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Champs formulaire en 1 colonne (Prénom/Nom empilés). Sans ce changement, 2 colonnes sont illisibles sur très petits écrans. */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Nouvelles sections petit mobile */
    /* Titres cartes "Pourquoi" encore plus petits. Sans ce changement, les titres sont trop grands sur très petits écrans. */
    .why-card h3 {
        font-size: 1.2rem;
    }

    /* Padding minimal pour cartes profil. Sans ce changement, le padding prend trop de place. */
    .profile-card {
        padding: 1.5rem 1rem;
    }

    /* Tagline profil plus petit. Sans ce changement, le texte italique est trop grand. */
    .profile-tagline {
        font-size: 0.95rem;
    }

    /* Numéros processus encore plus petits (50×50px). Sans ce changement, les numéros prennent trop de largeur sur très petits écrans. */
    .process-step {
        grid-template-columns: 50px 1fr;
    }

    /* Ligne connectrice ajustée pour numéro 50px. Sans ce changement, la ligne ne part plus du centre. */
    .process-step:not(:last-child)::after {
        left: 25px;
    }

    /* Numéro circulaire 50×50px. Sans ce changement, le numéro déborde. */
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    /* Padding minimal pour contenu d'étape. Sans ce changement, le padding prend trop de place. */
    .step-content {
        padding: 1rem;
    }

    /* Titre d'étape très petit. Sans ce changement, les titres sont trop grands sur très petits écrans. */
    .step-content h3 {
        font-size: 1.1rem;
    }

    /* Description d'étape plus petite. Sans ce changement, le texte est trop grand. */
    .step-description {
        font-size: 0.95rem;
    }

    /* Padding minimal pour question FAQ. Sans ce changement, le padding prend trop de place. */
    .faq-question {
        padding: 0.875rem 1rem;
    }

    /* Texte question très petit. Sans ce changement, les questions sont trop grandes. */
    .faq-question span {
        font-size: 0.95rem;
    }

    /* Padding minimal pour réponse FAQ. Sans ce changement, le padding prend trop de place. */
    .faq-item.active .faq-answer {
        padding: 0 1rem 0.875rem 1rem;
    }
}

/* === ANIMATIONS UTILITIES === */
/* Attribut data-scroll-reveal pour éléments qui apparaissent au scroll (fade-in + slide-up). Sans ce style, les éléments sont visibles dès le chargement (moins dynamique). */
[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Classe .revealed ajoutée par IntersectionObserver JS. Sans cette classe, les éléments restent masqués même après scroll. */
[data-scroll-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Attribut data-tilt pour effet parallaxe 3D au hover (utilisé sur certaines cartes). Sans ce style, l'effet tilt ne fonctionne pas. */
[data-tilt] {
    transition: transform 0.3s ease;
}

/* === AVATAR COMPAGNON CONTEXTUEL === */
/* Carte flottante en bas à droite qui affiche des messages contextuels selon la section (ex: "Vous regardez les calculateurs"). Sans cette carte, l'utilisateur n'a pas de guidage contextuel. */
.advisor-companion {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 340px;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    z-index: 998;
    border: 2px solid var(--primary-blue);
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Classe .hidden pour masquer la carte (après clic X). Sans cette classe, la carte reste toujours visible (intrusif). */
.advisor-companion.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* Bouton X en haut à droite pour fermer la carte. Sans ce bouton, l'utilisateur ne peut pas fermer la carte (expérience forcée). */
.companion-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    color: var(--text-secondary);
}

/* Au hover, fond bleu clair et rotation 90°. Sans cet effet, le bouton X semble moins interactif. */
.companion-close:hover {
    background: rgba(6, 77, 217, 0.1);
    color: var(--primary-blue);
    transform: rotate(90deg);
}

/* Icône SVG du X (18×18px). Sans ce style, l'icône serait trop grande. */
.companion-close svg {
    width: 18px;
    height: 18px;
}

/* Header de la carte (avatar + nom + titre). Sans ce header, la carte manque d'identité visuelle. */
.companion-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* Conteneur de l'avatar (64×64px avec statut vert). Sans ce conteneur, l'avatar et le statut ne sont pas positionnés correctement. */
.companion-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

/* Image avatar circulaire avec bordure bleue. Sans cette image, la carte manque de personnification. */
.companion-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--primary-blue);
    background: var(--off-white);
    padding: 4px;
}

/* Pastille verte "En ligne" en bas à droite de l'avatar. Sans ce statut, on ne sait pas si Nicolas est disponible. */
.companion-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #10b981;
    border: 3px solid var(--card-bg);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Animation pulse pour la pastille verte. Sans cette animation, la pastille semble statique (moins vivante). */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Info à droite de l'avatar (nom + titre). Sans ce conteneur, le texte ne s'empile pas verticalement. */
.companion-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

/* Nom du conseiller (ex: "Nicolas Tremblay"). Sans ce nom, l'avatar n'est pas identifié. */
.companion-name {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

/* Titre professionnel (ex: "Conseiller en placement"). Sans ce titre, le rôle n'est pas clair. */
.companion-title {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Conteneur du message contextuel. Sans ce conteneur, le message n'est pas correctement espacé. */
.companion-content {
    margin-bottom: 1rem;
}

/* Message contextuel qui change selon la section (géré par JS). Sans ce message, la carte perd sa raison d'être (pas de contexte). */
.companion-message {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    animation: fadeInMessage 0.5s ease;
}

/* Animation fade-in lors du changement de message. Sans cette animation, le changement de texte est brusque. */
@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bouton CTA en bas de la carte (ex: "Commencer maintenant"). Sans ce bouton, l'utilisateur n'a pas d'action à effectuer après lecture. */
.companion-cta {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(6, 77, 217, 0.25);
}

/* Au hover, soulève le bouton et amplifie l'ombre. Sans cet effet, le bouton semble statique. */
.companion-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 77, 217, 0.35);
}

/* Icône à l'intérieur du bouton CTA. Sans ce style, l'icône serait trop grande. */
.companion-cta .btn-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Mobile Responsive */
/* Sur tablette/mobile, la carte se positionne en haut au lieu du bas. Sans ce changement, la carte en bas couvre le contenu important. */
@media (max-width: 768px) {
    .advisor-companion {
        position: fixed;
        bottom: auto;
        top: 80px;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: 500px;
        margin: 0 auto;
    }

    /* Quand masquée, glisse vers le haut. Sans ce changement, l'animation serait incohérente avec la nouvelle position. */
    .advisor-companion.hidden {
        transform: translateY(-20px);
    }
}

/* Sur très petits mobiles, réduit le padding et les bordures. Sans ce changement, la carte prend trop de place verticale. */
@media (max-width: 480px) {
    .advisor-companion {
        padding: 1rem;
        border-radius: 16px;
    }

    /* Avatar plus petit sur très petits mobiles. Sans ce changement, l'avatar prend trop de place. */
    .companion-avatar {
        width: 56px;
        height: 56px;
    }

    /* Nom plus petit. Sans ce changement, le texte est trop grand. */
    .companion-name {
        font-size: 0.9rem;
    }

    /* Message plus petit. Sans ce changement, le texte prend trop de place. */
    .companion-message {
        font-size: 0.875rem;
    }

    /* Bouton CTA plus petit. Sans ce changement, le bouton est trop grand. */
    .companion-cta {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* === CHATBOT === */
/* Fenêtre de chatbot flottante en bas à droite (400×600px, masquée par défaut). Sans cette fenêtre, l'utilisateur ne peut pas poser de questions en temps réel. */
.chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 400px;
    height: 600px;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: var(--transition-base);
}

/* Classe .active ajoutée par JS au clic sur l'avatar. Sans cette classe, la fenêtre reste masquée en permanence. */
.chatbot-container.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Header bleu en haut de la fenêtre chatbot (titre + bouton fermer). Sans ce header, la fenêtre manque d'identité visuelle. */
.chatbot-header {
    background: var(--gradient-primary);
    color: var(--white);
    padding: 1.5rem;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Titre du chatbot (ex: "Assistant virtuel"). Sans ce titre, l'utilisateur ne comprend pas le rôle de la fenêtre. */
.chatbot-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

/* Bouton X pour fermer le chatbot. Sans ce bouton, l'utilisateur ne peut pas fermer la fenêtre (sauf en cliquant sur l'avatar). */
.chatbot-close {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-base);
}

/* Au hover, fond plus clair et rotation 90°. Sans cet effet, le bouton X semble moins interactif. */
.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Zone de messages (scrollable, prend toute la hauteur disponible). Sans cette zone, les messages n'ont pas de conteneur. */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--off-white);
}

/* Message individuel (avatar + bulle). Sans ce conteneur, l'avatar et la bulle ne s'alignent pas horizontalement. */
.chat-message {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    animation: slideIn 0.3s ease;
}

/* Animation d'apparition des messages. Sans cette animation, les messages apparaissent brusquement. */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Messages de l'utilisateur alignés à droite (flex-direction: row-reverse). Sans ce changement, les messages utilisateur sont à gauche comme le bot. */
.chat-message.user {
    flex-direction: row-reverse;
}

/* Avatar du message (bot = bleu, utilisateur = gris). Sans cet avatar, impossible de distinguer qui parle. */
.message-avatar {
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Avatar utilisateur en gris. Sans cette distinction, bot et utilisateur ont la même apparence. */
.chat-message.user .message-avatar {
    background: var(--gray-light);
}

/* Bulle de message (max 70% largeur). Sans cette bulle, le message n'a pas de conteneur visuel distinct. */
.message-content {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: 15px;
    max-width: 70%;
    box-shadow: var(--shadow-sm);
}

/* Bulle utilisateur en bleu avec texte blanc. Sans cette distinction, messages bot et utilisateur sont identiques. */
.chat-message.user .message-content {
    background: var(--primary-blue);
    color: var(--white);
}

/* Paragraphes dans les messages. Sans ce style, les paragraphes n'ont pas d'espacement. */
.message-content p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Dernier paragraphe sans marge en bas. Sans ce style, il y a un espacement excessif en bas de la bulle. */
.message-content p:last-child {
    margin-bottom: 0;
}

/* Listes à puces dans les réponses du bot. Sans ce style, les listes ont l'apparence par défaut (trop d'indentation). */
.message-content ul {
    margin: 0.5rem 0 0 1.25rem;
}

/* Items de liste dans les messages. Sans ce style, les items ne sont pas correctement espacés. */
.message-content li {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

/* Barre d'input en bas (input + bouton Envoyer). Sans cette barre, l'utilisateur ne peut pas écrire de message. */
.chatbot-input {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--card-bg);
    border-top: 1px solid var(--gray-light);
}

/* Champ de saisie du message (prend toute la largeur disponible). Sans ce champ, l'utilisateur ne peut pas taper. */
.chatbot-input input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--off-white);
    border: 2px solid var(--gray-light);
    border-radius: 25px;
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-base);
}

/* Au focus, bordure bleue. Sans cet effet, l'utilisateur ne voit pas que le champ est actif. */
.chatbot-input input:focus {
    border-color: var(--primary-blue);
    background: var(--card-bg);
}

/* Bouton Envoyer. Sans ce bouton, l'utilisateur doit appuyer sur Entrée (pas intuitif sur mobile). */
.chatbot-input button {
    padding: 0.75rem 1.5rem;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

/* Au hover, soulève le bouton. Sans cet effet, le bouton semble statique. */
.chatbot-input button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Disclaimer légal en bas du chatbot (avertissement "pas un conseil financier"). Sans ce disclaimer, risque légal AMF. */
.chatbot-disclaimer {
    padding: 0.75rem 1rem;
    background: rgba(6, 77, 217, 0.1);
    color: var(--primary-blue);
    font-size: 0.8rem;
    text-align: center;
    border-radius: 0 0 20px 20px;
}

/* === PRINT === */
/* Media query pour impression : masque tous les éléments interactifs (navbar, boutons, chatbot, particules). Sans cette règle, l'impression inclut des éléments non pertinents (gaspillage papier/encre). */
@media print {
    .navbar,
    .scroll-top,
    .hero-cta,
    .calculators,
    #particles,
    .assistant-avatar,
    .chatbot-container {
        display: none;
    }
}

/* === RESPONSIVE CHATBOT === */
/* Breakpoint mobile (768px) : adaptations chatbot et avatar pour petits écrans. Sans ces règles, le chatbot déborde sur mobile (inutilisable). */
@media (max-width: 768px) {
    /* Chatbot en plein écran mobile (100% - marges 10px). Sans ce changement, la fenêtre 400px déborde sur mobile (<400px). */
    .chatbot-container {
        width: calc(100% - 20px);
        height: calc(100% - 80px);
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    /* Avatar assistant remonté à 80px du bas pour laisser place au chatbot ouvert. Sans ce changement, avatar et chatbot se chevauchent. */
    .assistant-avatar {
        bottom: 80px;
        right: 20px;
    }

    /* Avatar réduit à 90×135px sur mobile (vs 140×210px desktop). Sans cette réduction, l'avatar occupe trop d'espace écran. */
    .avatar-img {
        width: 90px;
        height: 135px;
    }

    /* Bulle de message réduite à 220px (vs 300px desktop). Sans cette réduction, la bulle déborde sur petits mobiles. */
    .avatar-bubble {
        width: 220px;
        bottom: 140px;
    }
}

/* ========================================
   AVATAR ASSISTANT (Sobre & Professionnel)
   ======================================== */
/* Avatar flottant rond (140×140px) de Nicolas en bas à droite avec ombre et z-index maximal (99999). Sans cet avatar, pas d'accès visuel direct au conseiller ni au chatbot (CTA principal manquant). */
#avatar-assistant {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    cursor: pointer;
    transition: transform 0.25s ease;
    object-fit: cover;
}

/* Léger agrandissement au hover (scale 1.05) pour indiquer l'interactivité. Sans ce hover, l'utilisateur ne sait pas que l'avatar est cliquable. */
#avatar-assistant:hover {
    transform: scale(1.05);
}

/* Responsive mobile */
/* Avatar réduit à 100×100px sur mobile pour libérer espace écran. Sans cette réduction, l'avatar de 140px est trop imposant sur petits mobiles. */
@media (max-width: 768px) {
    #avatar-assistant {
        width: 100px;
        height: 100px;
        bottom: 15px;
        right: 15px;
    }
}

/* ========================================
   AUGMENTATION BOUTONS SPIN (CALCULATEURS)
   ======================================== */
/* Chrome, Safari, Edge */
/* Agrandissement des flèches +/- des inputs number (scale 1.35) pour faciliter le clic sur mobile. Sans cette augmentation, les petits boutons natifs (10×10px) sont difficiles à viser au doigt. */
input[type="number"]::-webkit-inner-spin-button {
    width: 22px;
    height: 22px;
    margin-right: 4px;
    transform: scale(1.35);
    cursor: pointer;
}

/* Firefox */
/* Suppression de l'apparence par défaut Firefox pour input number (textfield) puis agrandissement spin-box. Sans ces règles, Firefox affiche des boutons spin trop petits (mauvais UX mobile). */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-moz-number-spin-box {
    transform: scale(1.35);
}

/* =====================================================
   CLASH DISPLAY FONT — TYPOGRAPHIE TECHNO/DISPLAY
   ===================================================== */
/* Police display moderne pour headings immersifs.
   Fallback sur Montserrat si CDN indisponible. */

/* =====================================================
   COUNTDOWN REER — STYLES COMPTE À REBOURS
   ===================================================== */
.countdown-reer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
}

.cd-num {
    font-family: 'Clash Display', var(--font-primary), sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFD700;
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: cdPulse 1s ease-in-out infinite;
}

.cd-lbl {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

.cd-sep {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(255, 215, 0, 0.6);
    margin: 0 2px;
    animation: cdBlink 1s step-end infinite;
}

.cd-expired {
    font-weight: 700;
    color: #FF3B3B;
    font-size: 1rem;
}

@keyframes cdPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes cdBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.3; }
}

/* Countdown dans la bannière REER */
.reer-banner .countdown-reer {
    gap: 0.1rem;
}

.reer-banner .cd-num {
    font-size: 1.3rem;
}

.reer-banner .cd-sep {
    font-size: 1rem;
}

.reer-banner .cd-unit {
    min-width: 36px;
}

/* Countdown dans le Hero */
.hero-countdown {
    margin-top: 2rem;
    padding: 1.2rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 16px;
    display: inline-block;
}

.hero-countdown .countdown-label-main {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    display: block;
}

.hero-countdown .cd-num {
    font-size: 2.5rem;
}

.hero-countdown .cd-sep {
    font-size: 1.8rem;
}

.hero-countdown .cd-unit {
    min-width: 56px;
}

.hero-countdown .cd-lbl {
    font-size: 0.65rem;
}

/* =====================================================
   MESH GRADIENT HERO — ARRIÈRE-PLAN IMMERSIF
   ===================================================== */
.hero-immersive {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(6, 77, 217, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(0, 168, 232, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(61, 127, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 30%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, #020B1A 0%, #032B7F 40%, #064DD9 70%, #00A8E8 100%);
    color: var(--white);
    padding: 8rem 2rem 4rem;
    overflow: hidden;
}

.hero-immersive::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 45%, rgba(6, 77, 217, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 75% 35%, rgba(0, 168, 232, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(255, 215, 0, 0.06) 0%, transparent 40%);
    animation: meshPulse 10s ease-in-out infinite;
    pointer-events: none;
}

.hero-immersive::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(255,255,255,0.02) 100px),
        repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(255,255,255,0.02) 100px);
    pointer-events: none;
    animation: gridDrift 30s linear infinite;
}

@keyframes meshPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes gridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(100px, 100px); }
}

/* =====================================================
   HERO GLASS CARD — GLASSMORPHISM AVANCÉ
   ===================================================== */
.hero-glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 3rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-glass::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%, rgba(255,215,0,0.1));
    z-index: -1;
    pointer-events: none;
}

/* =====================================================
   SCÉNARIOS COMPARATIFS — 3 PROFILS DE RISQUE
   ===================================================== */
.scenario-toggle {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.scenario-btn {
    padding: 0.5rem 1rem;
    border: 2px solid rgba(6, 77, 217, 0.3);
    border-radius: 50px;
    background: transparent;
    color: var(--gray-dark);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scenario-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.scenario-btn.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.scenario-btn .scenario-rate {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-left: 4px;
}

/* =====================================================
   MULTI-PAGE — STYLES NAVIGATION INTER-PAGES
   ===================================================== */
.nav-link.active {
    color: var(--primary-blue) !important;
    font-weight: 700;
}

.page-hero {
    position: relative;
    padding: 10rem 2rem 4rem;
    background: linear-gradient(160deg, #020B1A 0%, #032B7F 50%, #064DD9 100%);
    color: white;
    text-align: center;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 168, 232, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.page-hero .section-tag {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.page-hero .section-title {
    color: white;
}

.page-hero .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* Breadcrumb */
.breadcrumb {
    padding: 1rem 2rem;
    font-size: 0.8rem;
    color: var(--gray-dark);
}

.breadcrumb a {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 0.5rem;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .hero-countdown .cd-num { font-size: 1.8rem; }
    .hero-countdown .cd-unit { min-width: 44px; }
    .hero-countdown { padding: 0.8rem 1.2rem; }
    .hero-glass { padding: 1.5rem; }
    .cd-num { font-size: 1.3rem; }
    .cd-unit { min-width: 36px; }
    .page-hero { padding: 8rem 1rem 3rem; }
}