/* ==========================================================================
   ASSETS/CSS/STYLE.CSS - Styles Communs pour FormaCouple (Version Complète Mise à Jour)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* VARIABLES CSS ET RÉINITIALISATION (Reset)                                  */
/* -------------------------------------------------------------------------- */

:root {
    /* Palette principale */
    --quicksand: #b99f8b;
    --quicksand-light: #d1c3b6;
    --white-rock: #f0ebdf;
    --white-rock-medium: #e8e1d3;
    --white-rock-light: #f8f6f2;
    --black-pearl: #04101f;
    --black-pearl-light: #1a2435;
    --walnut: #703a18;
    --walnut-light: #9b623a;

    /* Variables de conception */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 24px;
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --box-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
    --box-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
    --box-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08);
    --container-width: 1320px; /* Largeur max du contenu */
    --section-spacing: clamp(80px, 10vw, 160px); /* Espacement vertical entre sections */
}

/* Réinitialisation moderne (Reset) */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

body {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    background-color: var(--white-rock-light);
    color: var(--black-pearl);
    overflow-x: hidden;
}

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

a {
    color: var(--walnut);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--walnut-light);
}

/* -------------------------------------------------------------------------- */
/*   AMÉLIORATIONS ACCESSIBILITÉ (A11Y)                                       */
/* -------------------------------------------------------------------------- */

/* 1. Améliore la visibilité de l'élément sélectionné lors de la navigation au clavier */
:focus-visible {
  outline: 3px solid var(--walnut-light); /* Utilise une couleur de votre charte */
  outline-offset: 3px;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 0 0 5px rgba(141, 71, 37, 0.2); /* Ajoute un halo doux pour plus de visibilité */
}

/* 2. Classe utilitaire pour masquer du texte visuellement mais le garder pour les lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------- */
/* UTILITAIRES COMMUNS                                                        */
/* -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 3.2rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 1.6rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none;
    cursor: pointer;
}

.btn span {
    position: relative;
    z-index: 2;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
    transform: translateX(-100%);
    transition: transform var(--transition-medium);
    z-index: 1;
}

.btn:hover::before {
    transform: translateX(0);
}

.btn-primary {
    background: linear-gradient(to right, var(--walnut), var(--walnut-light));
    color: var(--white-rock-light);
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(112, 58, 24, 0.25);
    transform: translateY(-3px);
	color: var(--black-pearl);

}

.btn-secondary {
    background-color: transparent;
    color: var(--black-pearl);
    border: 1px solid var(--quicksand);
}

.btn-secondary:hover {
    background-color: var(--quicksand-light);
    transform: translateY(-3px);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.btn-icon i {
    font-size: 1.8rem;
    display: inline-block;
    vertical-align: middle;
}

.section-heading {
    margin-bottom: 2.4rem;
    position: relative;
}

.overline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.8rem;
    color: var(--walnut);
    margin-bottom: 0.8rem;
    display: block;
}

.title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.2rem, 5vw, 5.6rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin-bottom: 2.4rem;
    color: var(--black-pearl);
}

.subtitle {
    font-size: 2rem;
    font-weight: 300;
    color: var(--black-pearl-light);
    max-width: 70ch;
    margin-bottom: 4rem;
}

.section-divider {
    width: 6rem;
    height: 0.3rem;
    background: linear-gradient(to right, var(--walnut), var(--quicksand));
    margin: 1.6rem 0;
    border-radius: 999px;
}

.card {
    background-color: white;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--box-shadow-sm);
    transition: all var(--transition-fast);
}

.card:hover {
    box-shadow: var(--box-shadow-md);
    transform: translateY(-8px);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* -------------------------------------------------------------------------- */
/* ANIMATIONS DE RÉVÉLATION AU DÉFILEMENT                                     */
/* -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal.initial-visible {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.reveal-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal-children.active > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-children.initial-visible > * {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.reveal-children.active > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-children.active > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-children.active > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-children.active > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-children.active > *:nth-child(6) { transition-delay: 0.6s; }
.reveal-children.active > *:nth-child(7) { transition-delay: 0.7s; }
.reveal-children.active > *:nth-child(8) { transition-delay: 0.8s; }
.reveal-children.active > *:nth-child(9) { transition-delay: 0.9s; }


/* ========================================================================== */
/* == HEADER (EN-TÊTE) - Structure CSS Révisée pour Priorité .scrolled ====== */
/* ========================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0; /* Padding initial ajusté pour logo */
    transition: background-color var(--transition-fast), padding var(--transition-fast), box-shadow var(--transition-fast); /* Transitions ciblées */
}

/* Barre de navigation */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: transform var(--transition-fast);
}
.logo:hover {
    transform: translateY(-2px);
}
/* La taille des logos est gérée plus bas */

/* Liste de navigation Desktop */
.nav-list {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    list-style: none;
}

/* Liens de navigation */
.nav-link {
    font-size: 1.6rem;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
    /* Couleur et soulignement définis par les états ci-dessous */
    transition: color var(--transition-fast);
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-fast);
    /* Fond défini par les états ci-dessous */
}
.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Bouton CTA dans la nav */
.nav-cta {
    margin-left: 1.6rem;
}

/* Bouton Menu Mobile */
.mobile-toggle {
    display: none; /* Caché par défaut sur desktop */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2.4rem;
    z-index: 1100;
    padding: 0.5rem;
    /* Couleur définie par les états ci-dessous */
    transition: color var(--transition-fast);
}


/* --- 1. Styles par Défaut (Hero Lumineux ou Pages sans script About) --- */
/* Ces styles s'appliquent quand le header n'a PAS .scrolled ET n'a PAS .initial-hero-dark */

.header:not(.scrolled):not(.initial-hero-dark) .logo .logo-light {
    display: none;
}
.header:not(.scrolled):not(.initial-hero-dark) .logo .logo-dark {
    display: block;
}
.header:not(.scrolled):not(.initial-hero-dark) .nav-link {
    color: var(--black-pearl);
}
.header:not(.scrolled):not(.initial-hero-dark) .nav-link:hover {
     color: var(--walnut);
}
.header:not(.scrolled):not(.initial-hero-dark) .nav-link::after {
      background: linear-gradient(to right, var(--walnut), var(--walnut-light));
}
.header:not(.scrolled):not(.initial-hero-dark) .mobile-toggle {
    color: var(--black-pearl);
}


/* --- 2. Styles pour État Initial Spécifique (Hero Sombre sur About.html) --- */
/* Ces styles s'appliquent UNIQUEMENT quand .initial-hero-dark est présent ET .scrolled est absent */

.header.initial-hero-dark:not(.scrolled) .logo .logo-dark {
    display: none;
}
.header.initial-hero-dark:not(.scrolled) .logo .logo-light {
    display: block;
}
.header.initial-hero-dark:not(.scrolled) .nav-link {
    color: var(--white-rock-light);
}
.header.initial-hero-dark:not(.scrolled) .nav-link:hover {
    color: var(--quicksand-light);
}
.header.initial-hero-dark:not(.scrolled) .nav-link::after {
    background: linear-gradient(to right, var(--quicksand-light), var(--white-rock));
}
.header.initial-hero-dark:not(.scrolled) .mobile-toggle {
    color: var(--white-rock-light);
}


/* --- 3. Styles pour l'état Scrollé (TOUJOURS PRIORITAIRE) --- */
/* Ces styles s'appliquent dès que .scrolled est ajouté, quelle que soit la classe initial-* */

.header.scrolled {
    background-color: rgba(4, 16, 31, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow-sm);
    padding: 1rem 0; /* Padding réduit au scroll */
}

/* --- 3. Styles pour l'état Scrollé --- */
/* Ces styles s'appliquent dès que .scrolled est ajouté */

.header.scrolled {
    background-color: rgba(4, 16, 31, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow-sm);
    padding: 1rem 0; /* Padding réduit au scroll */
}
/* Styles des éléments enfants QUAND .scrolled est présent */
.header.scrolled .logo .logo-dark {
    display: none; /* Cache le logo sombre */
}
.header.scrolled .logo .logo-light {
    display: block; /* Affiche le logo clair */
}
.header.scrolled .nav-link {
    color: white; /* Texte blanc */
}
.header.scrolled .nav-link::after {
    background: linear-gradient(to right, var(--walnut-light), var(--quicksand-light)); /* Soulignement adapté */
}
.header.scrolled .nav-link:hover {
    color: var(--quicksand-light); /* Survol adapté */
}
.header.scrolled .mobile-toggle {
    color: white; /* Icône blanche */
}


/* --- Responsive pour le Header (principalement pour afficher/cacher nav/toggle) --- */
@media (max-width: 768px) {
    .mobile-toggle {
        display: block; /* Affiche le bouton hamburger sur mobile */
    }
    .navbar .nav-list {
        display: none; /* Cache la liste de navigation desktop */
    }
}

/* ========================================================================= */
/* == STYLES POUR ICÔNES FEATHER SVG (via <img>) ========================== */
/* ========================================================================= */

.feather-icon-img {
    display: inline-block; /* Ou block selon le contexte */
    width: 1em;           /* Utilise la taille de police du parent par défaut */
    height: 1em;          /* Utilise la taille de police du parent par défaut */
    vertical-align: -0.125em; /* Ajustement alignement vertical fin */
    /* --- Pour contrôler la couleur --- */
    /* Option 1 : Colorer via filter (moins précis, fonctionne sur tout) */
    /* filter: invert(15%) sepia(80%) saturate(1500%) hue-rotate(355deg) brightness(90%) contrast(90%); */ /* Exemple pour couleur Noyer */

    /* Option 2 : Ne pas colorer ici et laisser le SVG définir sa couleur
       OU cibler spécifiquement des contextes plus bas */
}

/* --- Modifier les styles existants qui utilisaient 'i' --- */

/* Exemple : Icônes dans les boutons (.btn-icon i) */
.btn-icon .feather-icon-img { /* Cible l'image DANS le bouton */
     width: 1.8rem;  /* Taille spécifique */
     height: 1.8rem; /* Taille spécifique */
     /* La couleur sera héritée ou définie par le SVG */
}
/* SUPPRIMER ou commenter l'ancienne règle pour .btn-icon i */
/* .btn-icon i { ... } */

/* Exemple : Icônes sociales (.social-link i) */
.social-link .feather-icon-img { /* Cible l'image DANS le lien social */
    width: 1.8rem;
    height: 1.8rem;
     /* Ajouter filter si besoin de colorer */
     /* filter: none; */ /* Reset filter si couleur SVG ok */
}
.social-link:hover .feather-icon-img {
     /* Exemple: colorer en blanc au survol du lien */
     /* filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(105%) contrast(101%); */
}
 /* SUPPRIMER ou commenter l'ancienne règle pour .social-link i */
 /* .social-link i { ... } */


 /* Exemple : Icônes de contact (.contact-item i) */
 .contact-item .feather-icon-img {
     width: 1.8rem;
     height: 1.8rem;
     flex-shrink: 0;
     margin-top: 0.2rem;
      /* Appliquer la couleur via filter si besoin */
      /* filter: invert(27%) sepia(20%) saturate(2954%) hue-rotate(352deg) brightness(94%) contrast(90%); */ /* Filtre Noyer */
 }
  /* SUPPRIMER ou commenter l'ancienne règle pour .contact-item i */
 /* .contact-item i { ... } */

 /* Adaptez de manière similaire pour TOUTES les autres règles
    qui ciblaient i[data-feather=...] ou .feature-icon i, etc.
    Remplacez 'i' par '.feather-icon-img' et ajustez les tailles si nécessaire.
    La couleur est plus délicate avec <img>, filter est une option. */

/* Exemple : .module-overview-icon (modules.html) */
.module-overview-icon .feather-icon-img {
    width: 2.4rem;
    height: 2.4rem;
     /* Rendre blanc (suppose fond sombre sur .module-overview-icon) */
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(105%) contrast(101%);
}
 /* SUPPRIMER .module-overview-icon i { ... } */

 /* Exemple: .feature-icon (About page) */
 .feature-icon .feather-icon-img {
     width: 2rem;
     height: 2rem;
     /* Rendre blanc */
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(105%) contrast(101%);
 }
 /* SUPPRIMER .feature-icon i { ... } */

/* ... etc. pour toutes les utilisations d'icônes ... */

/* IMPORTANT: La coloration des SVG via CSS est limitée quand on utilise <img>.
   L'idéal serait d'utiliser les SVG inline ou une webfont, mais
   avec les fichiers SVG séparés, 'filter' est la solution la plus courante.
   Vous pouvez utiliser des outils en ligne comme "CSS filter generator" pour trouver
   le filtre correspondant à vos couleurs (--walnut, --quicksand, etc.). */

/* -------------------------------------------------------------------------- */
/* MENU MOBILE                                                                */
/* -------------------------------------------------------------------------- */

/* .mobile-toggle est stylé dans la section header */

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 30rem;
    max-width: 80%;
    height: 100vh;
    background-color: white;
    z-index: 2000;
    padding: 8rem 2.4rem 2.4rem;
    transition: right var(--transition-fast);
    box-shadow: var(--box-shadow-lg);
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
}

/* Liens dans menu mobile - couleur standard noire */
.mobile-menu .nav-link {
    color: var(--black-pearl);
    font-weight: 500; /* Peut-être un peu plus gras ? */
    width: 100%; /* Pour une meilleure zone de clic */
    padding: 1rem 0;
}
.mobile-menu .nav-link:hover {
    color: var(--walnut);
}
/* Pas besoin de soulignement ::after dans le menu mobile */
.mobile-menu .nav-link::after {
    display: none;
}


.mobile-menu .nav-cta {
    margin: 2rem 0 0;
    width: 100%;
    text-align: center;
}

.mobile-close {
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2.4rem;
    color: var(--black-pearl);
    padding: 0.5rem;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

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

.cta-section {
    background-color: var(--white-rock-light);
    /* background-image: url('../images/bg-texture-light.png'); */
    background-size: 200px;
    background-repeat: repeat;
    padding: 8rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* margin-bottom: 6rem; */ /* Margin retirée, utiliser padding section suivante si besoin */
    padding-bottom: calc(var(--section-spacing) * 0.8); /* Moins de padding en bas */
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(185, 159, 139, 0.15) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.cta-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.cta-container .section-divider {
    margin-left: auto;
    margin-right: auto;
}


.cta-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    min-width: 220px;
}

/* ==========================================================================
   EFFET D'OMBRE FIXE POUR SCROLL (GLOBAL)
   ========================================================================== */

body::before,
body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 99;
    pointer-events: none;
    opacity: 0; /* Invisible par défaut */
    transition: opacity var(--transition-fast);
}

body::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(4, 16, 31, 0.6), transparent);
}

body::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(4, 16, 31, 0.6), transparent);
    opacity: 0.12; /* Ombre du bas toujours un peu visible */
}

/* Affiche l'ombre du haut SEULEMENT quand on a scrollé */
/* Utilise la classe .scrolled ajoutée par script.js */
body:has(#header.scrolled)::before { /* :has() peut ne pas être universel */
    opacity: 0.12;
}
/* Alternative JS si :has() n'est pas supporté: ajouter une classe au body au scroll */


/* ========================================================================== */
/* == FOOTER (PIED DE PAGE) - Version Finale Grid 3 Colonnes Directes ======== */
/* ========================================================================== */

.footer {
    padding: 8rem 0 4rem; /* Augmentation du padding haut et bas */
    background-color: white;
    border-top: 1px solid var(--quicksand-light);
    overflow: hidden;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: start;
}

.footer-column {
    width: 100%;
    box-sizing: border-box;
}

.footer-logo {
    text-decoration: none;
    margin-bottom: 1.6rem;
    display: inline-block;
    transition: transform var(--transition-fast);
}

.footer-logo img {
    /* Géré par section LOGO STYLING */
}

.footer-logo:hover {
    transform: translateY(-2px);
}

.footer-about {
    color: var(--black-pearl-light);
    margin-bottom: 2.4rem;
    font-size: 1.5rem;
    line-height: 1.5;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.social-link {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-rock-light);
    color: var(--black-pearl);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.social-link:hover {
    background-color: var(--walnut);
    color: white;
    transform: translateY(-3px);
}
.social-link i {
    width: 1.8rem;
    height: 1.8rem;
}

.footer-heading {
    font-size: 2rem;
    font-weight: 600;
    color: var(--black-pearl);
    margin-bottom: 2.4rem;
}

.footer-nav {
    list-style: none;
    padding-left: 0;
}
.footer-link {
    margin-bottom: 1.2rem;
}
.footer-link a {
    color: var(--black-pearl-light);
    text-decoration: none;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.5rem;
}
.footer-link a:hover {
    color: var(--walnut);
    gap: 1.2rem;
}
.footer-link a i {
    width: 1.6rem;
    height: 1.6rem;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.footer-contact {
    list-style: none;
    padding-left: 0;
}
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    font-size: 1.5rem;
}
.contact-item a, .contact-item span {
    color: var(--walnut);
    transition: color var(--transition-fast);
    word-break: break-word;
    line-height: 1.4;
    padding-top: 0.1rem;
}
.contact-item a:hover {
    color: var(--walnut);
}
.contact-item i {
    color: var(--walnut);
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--quicksand-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    width: 100%;
}
.copyright {
    color: var(--black-pearl-light);
    font-size: 1.4rem;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: auto;
}
.footer-legal {
    display: flex;
    gap: 1.5rem 2.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}
.legal-link {
    color: var(--black-pearl-light);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-size: 1.4rem;
    white-space: nowrap;
}
.legal-link:hover {
    color: var(--walnut);
}

.social-link {
    /* ... vos styles actuels pour .social-link ... */
    background-color: var(--white-rock-light); /* Fond par défaut */
    color: var(--black-pearl); /* Couleur de l'icône Feather par défaut */
    /* ... */
}

.tiktok-link .social-icon-svg {
    width: 2.6rem; /* Essayez une valeur légèrement supérieure */
    height: 2.6rem;
}

.social-link:hover {
    background-color: var(--walnut); /* Le fond devient couleur Noyer au survol pour TOUS les liens sociaux */
    color: white; /* Couleur pour les icônes Feather ou texte devient blanche */
    transform: translateY(-3px);
}

/* Style pour les icônes Feather classiques au survol (hérite de color: white) */
.social-link:hover i {
    /* Pas besoin de style spécifique ici si 'color: white' sur .social-link:hover suffit */
}

/* Styles pour les icônes SVG (comme TikTok) */
.social-icon-svg { /* Classe de votre <img> pour TikTok */
    width: 2.1rem;  /* Votre taille ajustée */
    height: 2.1rem; /* Votre taille ajustée */
    /* Si votre SVG TikTok est noir par défaut, vous n'avez pas forcément besoin de filtre ici.
       Si vous avez besoin de le forcer en noir/foncé, décommentez et ajustez un filtre: */
    /* filter: invert(10%) sepia(10%) saturate(1000%) hue-rotate(180deg) brightness(90%) contrast(90%); */
    transition: filter var(--transition-fast); /* Ajout d'une transition pour le filtre */
}

/* RENDRE L'ICÔNE SVG BLANCHE AU SURVOL DU LIEN PARENT */
.social-link:hover .social-icon-svg {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
    /* Explication du filtre pour le blanc:
       brightness(0) rend tout noir.
       saturate(100%) n'a pas d'effet sur le noir.
       invert(100%) inverse le noir en blanc.
       sepia(100%) et saturate(0%) peuvent aider à obtenir un blanc plus pur en éliminant les teintes.
       hue-rotate(0deg) pas d'effet.
       brightness(200%) et contrast(100%) pour un blanc éclatant.
       Vous pouvez simplifier avec : filter: brightness(0) invert(1);
    */
}

/* Plus besoin de .tiktok-link:hover spécifique pour la couleur si .social-link:hover fait le travail.
   Si vous aviez un fond différent pour tiktok-link au survol, alors vous garderiez une règle spécifique.
*/
/*
.tiktok-link:hover {
    // background-color: var(--walnut); // Déjà géré par .social-link:hover
}
.tiktok-link:hover .social-icon-svg {
     // filter: brightness(0) invert(1); // Déjà géré par .social-link:hover .social-icon-svg
}
*/

/* -------------------------------------------------------------------------- */
/* RESPONSIVE FOOTER                                                          */
/* -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .footer-top {
         grid-template-columns: 1fr;
         justify-items: center;
         text-align: center;
         gap: 4rem;
    }
    .footer-column {
         display: flex;
         flex-direction: column;
         align-items: center;
         max-width: 450px;
         width: 100%;
    }
    .footer-social { justify-content: center; }
    .footer-nav, .footer-contact { align-items: center; }
     .footer-link, .contact-item {
          width: auto;
          justify-content: center;
     }
     .footer-link a, .contact-item span, .contact-item a {
          text-align: center;
     }
}

@media (max-width: 768px) {
    .footer-top { gap: 3rem; }
    .footer-column { max-width: 90%; }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 4rem;
        gap: 1rem;
    }
    .copyright { margin-right: 0; }
    .footer-legal {
        justify-content: center;
        gap: 1rem 1.5rem;
        margin-top: 1rem;
        text-align: center;
    }

     /* --- Responsive Header Mobile Toggle --- */
    .mobile-toggle {
        display: block; /* Affiche le bouton hamburger sur mobile */
    }
    .navbar .nav-list {
        display: none; /* Cache la liste de navigation desktop */
    }
}

/* =========================================================================
   LOGO STYLING
   ========================================================================== */

.logo img, .footer-logo img {
  height: 55px;
  width: auto;
  /* display: block; */ /* Géré par les règles spécifiques dark/light */
  transition: opacity var(--transition-fast);
}

.footer-logo img {
  height: 180px;
}

@media (max-width: 576px) {
  .logo img, .footer-logo img {
    height: 55px;
  }
}