/* ========================= */
/* VARIABLES GLOBALES */
/* ========================= */
:root {
    --color-dark-bg: #0d0d0d; 
    --color-red-accent: #de161d; 
    --color-gold-accent: #79755d; 
    --color-text-light: #f0f0f0; 
    --color-text-faded: #aaaaaa; 
    --font-primary: 'Quattrocento', serif; 
}

/* ========================= */
/* RÉINITIALISATION */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark-bg);
    color: var(--color-text-light);
    line-height: 1.6;
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
    background-size: 4px 4px;
    background-attachment: fixed;
}

/* ========================= */
/* HEADER & NAVIGATION */
/* ========================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    border-bottom: 1px solid rgba(255, 204, 102, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(13, 13, 13, 0.95);
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    width: auto;
    display: block; 
}

.fbn-logo { height: 60px; }
.groupe-logo { height: 90px; }

nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

nav a {
    text-decoration: none;
    color: var(--color-text-faded);
    padding: 10px 0; 
    font-size: 0.9em;
    font-family: var(--font-primary);
    position: relative;
    transition: color 0.3s ease;
}

nav a:not(.main-contact-button):after { 
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-gold-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

nav a:not(.main-contact-button):hover:after {
    transform: scaleX(1);
}

nav a:not(.main-contact-button):hover {
    color: var(--color-gold-accent);
}

/* Bouton Contact */
.main-contact-button {
    background-color: var(--color-gold-accent);
    color: var(--color-dark-bg);
    padding: 8px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-left: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.main-contact-button:hover {
    background-color: var(--color-red-accent);
    color: var(--color-text-light);
}

/* Hamburger menu (mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-light);
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: rgba(13,13,13,0.95);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    nav.mobile-active { max-height: 500px; }

    nav a, .main-contact-button {
        width: 100%;
        padding: 15px 0;
        text-align: center;
        margin-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .hamburger { display: flex; }

    /* Règles de responsivité pour les sections (Approche & Icones) */
    .hero-content {
        flex-direction: column; /* Image et texte s'empilent */
        text-align: center;
    }
    
    .profile-pic {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .icon-grid {
        flex-direction: column; /* Les icônes s'empilent */
        gap: 20px;
    }
    
    .icon-item {
        min-width: unset; 
    }
    
    .step-container {
        /* FIX ALIGNEMENT : Force l'empilage en 1 colonne */
        grid-template-columns: 1fr; 
        /* FIX ALIGNEMENT : Annule le padding global de 5% du conteneur pour la pleine largeur */
        padding: 0; 
    }

    .step-card,
    .cta-form-block {
        /* FIX ALIGNEMENT : Force les éléments à occuper la colonne entière */
        grid-column: 1 / -1; 
        /* FIX ALIGNEMENT : Applique le padding interne (25px haut/bas) et la marge latérale (5%) pour l'alignement */
        padding: 25px 5%; 
    }

}

/* ========================= */
/* BOUTONS GÉNÉRAUX */
/* ========================= */
.btn-main {
    background-color: var(--color-gold-accent);
    color: var(--color-dark-bg);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 700;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-main:hover {
    background-color: var(--color-red-accent);
    color: var(--color-text-light);
}

/* ========================= */
/* HERO SECTION */
/* ========================= */
.hero { padding: 50px 5%; position: relative; }

.hero-content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.profile-pic {
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 5px; 
    margin-right: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.text-content h1 {
    font-size: 2em;
    font-weight: 700; 
    font-family: var(--font-primary);
    margin-bottom: 5px;
}

.text-content .subtitle {
    font-size: 1.2em;
    color: var(--color-gold-accent);
    margin-bottom: 15px;
    font-weight: 700;
}

.text-content .intro-text {
    max-width: 600px;
    font-weight: 400; 
    color: var(--color-text-faded);
}

/* ========================= */
/* SECTION AVANTAGES */
/* ========================= */
.advantage {
    background-color: var(--color-dark-bg); 
    padding: 60px 5%;
    text-align: center;
    border-top: 1px solid rgba(255, 204, 102, 0.1); 
    border-bottom: 1px solid rgba(255, 204, 102, 0.1);
    box-shadow: inset 0 10px 15px -10px rgba(0,0,0,0.5),
                inset 0 -10px 15px -10px rgba(0,0,0,0.5);
}

.advantage h2 {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-gold-accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.advantage-intro-text {
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 1.05em;
    color: var(--color-text-faded);
    font-weight: 400;
}

/* ICON GRID */
.icon-grid {
    display: flex;
    justify-content: center;
    background: none; 
    padding: 0;
    border-radius: 0; 
    box-shadow: none; 
    max-width: 1000px;
    margin: 0 auto; 
    gap: 30px; 
}

.icon-item {
    flex: 1; 
    min-width: 180px; 
    padding: 30px 20px; 
    color: var(--color-text-light);
    font-size: 0.9em;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s ease; 
    border-radius: 8px; 
    background-color: rgba(18,18,18,0.95); 
    border: 1px solid var(--color-gold-accent); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); 
}

.icon-item i {
    font-size: 3em; 
    margin-bottom: 15px; 
    color: var(--color-gold-accent); 
    transition: all 0.4s ease;
    display: block; 
}

.icon-item h4 {
    font-size: 1.2em; 
    font-weight: 700;
    color: var(--color-text-light); 
    transition: color 0.4s ease;
}

.icon-item p {
    font-size: 0.95em; 
    color: var(--color-text-faded); 
    margin-bottom: 0; 
    transition: color 0.4s ease;
}

.icon-item:hover {
    transform: translateY(-8px) scale(1.03); 
    background-color: #1f1f1f; 
    border: 1px solid var(--color-gold-accent); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.9), 0 0 0 4px var(--color-red-accent); 
}

.icon-item:hover i { transform: translateY(-2px) scale(1.05); }
.icon-item:hover h4 { color: var(--color-gold-accent); }
.icon-item:hover p { color: var(--color-text-light); }

/* ========================= */
/* APPROACH SECTION */
/* ========================= */
.approach {
    padding: 50px 0; 
    margin: 30px 0; 
    background: url('images/dark_city_background.jpg') no-repeat center center/cover;
    background-attachment: fixed; 
    position: relative; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
    z-index: 1;
}

.approach::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background-color: rgba(13,13,13,0.85); 
    z-index: 2;
}

.approach h2, .step-container { position: relative; z-index:3; max-width:1200px; margin:0 auto; padding:0 5%; }
.approach-header { 
    text-align:center; 
    max-width:800px; 
    margin:0 auto 50px auto; 
    padding:0 5%; 
    position: relative; 
    z-index: 3;       
}.approach-header h3 { font-size:2.2em; font-weight:700; color:var(--color-gold-accent); margin-bottom:10px; padding-top:20px; }

.step-container { display:grid; grid-template-columns: repeat(4,1fr) 1.5fr; gap:20px; align-items:stretch; padding-bottom:20px; }

.step-card {
    background-color: rgba(26,26,26,0.85); 
    padding:25px; height:100%; cursor:pointer;
    transition: all 0.4s ease; border:1px solid rgba(255,255,255,0.05);
    display:flex; flex-direction:column;
}

.step-card:hover {
    background-color:#1f1f1f; transform:translateY(-5px); border:1px solid var(--color-red-accent);
    box-shadow:0 10px 25px rgba(222,22,29,0.15);
}

.step-card:before { content:''; width:50px; height:3px; background: linear-gradient(to right, var(--color-red-accent), var(--color-gold-accent)); margin-bottom:20px; display:block; }

.step-number {
    font-size:1.5em; font-weight:700; color:var(--color-gold-accent); line-height:1; margin-bottom:20px;
    display:inline-block; padding:8px 15px; border:1px solid var(--color-gold-accent); border-radius:20px;
}

.step-card:hover .step-number { color:var(--color-red-accent); border-color:var(--color-red-accent); }
.step-title { font-size:1.0em; font-weight:700; color:var(--color-text-light); margin-bottom:10px; }
.step-card:hover .step-title { color:var(--color-gold-accent); }
.step-detail { font-size:0.85em; color:var(--color-text-faded); }

/* CTA Form Block */
.cta-form-block {
    grid-column: span 1; background-color: rgba(18,18,18,0.95); padding:25px; height:100%; border:1px solid rgba(255,255,255,0.05); transition:border-color 0.4s ease;
}
.cta-form-block:hover { border:1px solid var(--color-red-accent); }
.cta-form-block h4 { font-size:1.3em; font-weight:700; color:var(--color-gold-accent); margin-bottom:20px; }
.cta-form-block form input, .cta-form-block form select {
    width:100%; padding:10px; margin-bottom:10px; background-color:#2c2c2c; border:1px solid #444; color:var(--color-text-light); border-radius:4px; font-family:var(--font-primary); transition:border-color 0.3s, color 0.3s;
}
.cta-form-block form input::placeholder { color: var(--color-text-faded); }
.cta-form-block form input:focus, .cta-form-block form select:focus { border-color: var(--color-red-accent); outline:none; }

.cta-form-block form select:invalid { color: var(--color-text-faded); }
.cta-form-block form select option:not([disabled]) { color: var(--color-text-light); }

.btn-cta { width:100%; padding:12px; background-color: var(--color-red-accent); color:var(--color-text-light); border:none; cursor:pointer; font-weight:700; text-transform:uppercase; border-radius:4px; font-family:var(--font-primary); transition: background-color 0.3s; }
.btn-cta:hover { background-color:#a30f14; }

/* ========================= */
/* FOOTER */
/* ========================= */
footer {
    position: relative; margin-top:50px; border-top:3px solid var(--color-gold-accent); overflow:hidden;
}

.footer-background { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0; }
.footer-bg-img { width:100%; height:auto; object-fit:contain; display:block; }

.footer-content { position:relative; z-index:2; text-align:center; color:#000; padding:60px 5%; background: rgba(255,255,255,0.4); backdrop-filter: blur(4px); border-top:1px solid rgba(255,255,255,0.2); }

.footer-links a { color:#000; text-decoration:none; margin:0 15px; font-size:0.8em; font-family:var(--font-primary); transition:color 0.3s ease; }
.footer-links a:hover { color: var(--color-red-accent); text-decoration: underline; text-underline-offset:4px; }

.copyright { margin-top:15px; font-size:0.75em; color:#111; font-family:var(--font-primary); }
.jd-power-logo { width:180px; height:auto; margin-top:15px; transition: transform 0.2s ease-in-out; }
.jd-power-link:hover .jd-power-logo { transform:scale(1.40); }

/* Custom select */
.custom-select-wrapper { position: relative; width: 100%; margin-bottom: 10px; }
.custom-select {
  background-color: #2c2c2c;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  color: #aaa;
  padding: 5px;
  position: relative;
  transition: border-color 0.3s;
  font-family: var(--font-primary);
  font-size: 16px;
}
.custom-select .selected { pointer-events: none; }
.custom-select .options {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background-color: #2c2c2c;
  border: 1px solid #444;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}
.custom-select .options div { padding:10px; color:#f0f0f0; transition:background 0.3s; font-size:13px; }
.custom-select .options div:hover { background-color: rgba(222,22,29,0.8); color:#fff; }
.custom-select.active .options { display:block; }


/* ========================= */
/* STATISTIQUES (Style sombre - utilisé dans index et equipe) */
/* ========================= */
.stats {
    background-color: var(--color-dark-bg); /* Fond sombre de la page (hero/body) */
    color: var(--color-text-light); /* Texte clair */
    padding: 30px 5%;
    text-align: center;
}

.stats h2 {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--color-gold-accent); /* Titre Or */
    margin-bottom: 30px;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-item .icon {
    width: 80px;
    height: 80px;
    border-radius: 25%;
    background-color: var(--color-red-accent); /* Cercle Rouge */
    color: var(--color-text-light); /* Icône blanche */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    font-size: 2.5em;
}

.stat-item .value {
    font-size: 1.7em;
    font-weight: 700;
    color: var(--color-text-light); /* Chiffres en Blanc */
    margin-bottom: 5px;
}

.stat-item .label {
    font-size: 0.9em;
    color: var(--color-text-faded); /* Texte secondaire en Gris */
}

.stat-source {
    font-size: 0.75em;
    color: var(--color-text-faded);
    margin-top: 30px;
}

/* Ajustement pour les chiffres sur fond clair */
.stats-light .stat-item .value {
    color: var(--color-red-accent); /* Couleur rouge pour les chiffres */
    font-size: 2.5em; /* Agrandir la taille pour un meilleur impact */
}

.stats-light .stat-item .icon {
    background-color: #0c4a6e; /* Un bleu foncé comme sur l'image fournie */
    color: white; 
}
/* ========================= */
/* BANNIÈRE D'ÉQUIPE (equipe.html) */
/* ========================= */
.team-banner {
    /* Centre le bloc entier horizontalement */
    margin: 0 auto;
    /* Limite la largeur maximale du conteneur à 1200px */
    max-width: 1200px; 
    overflow: hidden; 
}

/* L'image à l'intérieur du conteneur s'adapte à la largeur du conteneur (max 1200px) */
.team-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================= */
/* SECTION DIFFÉRENCE (équipe) */
/* ========================= */
.difference {
    background: var(--color-dark-bg);
    padding: 30px 5%;
    text-align: center;
}

.difference-header {
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.difference-header h2 {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--color-red-accent); /* Titre principal en Rouge */
    margin-bottom: 20px;
}

.difference-header p {
    font-size: 1.05em;
    color: var(--color-text-faded);
    margin-bottom: 30px;
}

.difference-grid {
    display: flex;
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.difference-item {
    background-color: rgba(18, 18, 18, 0.9); /* Fond sombre des cartes */
    padding: 25px;
    flex: 1 1 calc(33.33% - 40px/3); /* Trois cartes par ligne (avec flex-wrap) */
    min-width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    text-align: left;
    transition: all 0.4s ease;
    cursor: default;
}

.difference-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold-accent); /* Bordure en Or au survol */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.difference-item strong {
    color: var(--color-text-light);
    font-size: 1.1em;
    display: block;
}

.difference-item:before {
    content: '\f058'; /* Icône de cercle coché (Check-circle) */
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900;
    color: var(--color-red-accent); /* Icône en Rouge */
    font-size: 1.3em;
    margin-right: 10px;
    display: inline-block;
}

@media (max-width: 768px) {
    .difference-item {
        flex-basis: 100%; /* Une carte par ligne sur mobile */
    }
}

/* NOUVEAU STYLE POUR LA MISE EN PAGE AVEC IMAGE */
.intro-content-wrapper {
    display: flex;
    gap: 40px; 
    align-items: flex-start;
    margin-bottom: 50px; 
}
.text-column {
    flex: 2; 
    min-width: 0; 
}
.image-column {
    flex: 1; 
    min-width: 0;
    text-align: right;
}
.service-intro-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; 
}

/* RESPONSIVE : Empilement sur petits écrans (tablette et mobile) */
@media (max-width: 900px) { 
    .intro-content-wrapper {
        flex-direction: column;
    }
    .image-column {
        flex: none;
        width: 100%;
        order: 2; /* Pour que l'image apparaisse sous le texte */
        margin-top: 30px;
        text-align: center;
    }
    .text-column {
        order: 1;
    }
}
/* ========================= */
/* PAGE CONTACT */
/* ========================= */
.contact-form-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 5%;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.contact-info {
    flex: 1;
    padding: 20px;
    background-color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
}

.contact-info h2 {
    color: var(--color-gold-accent);
    margin-bottom: 20px;
    font-size: 1.8em;
}

.contact-info p {
    color: var(--color-text-light);
    margin-bottom: 15px;
    line-height: 1.6;
}

.contact-info i {
    color: var(--color-red-accent); /* Icônes en rouge */
    margin-right: 10px;
    width: 20px; /* Fixe la largeur pour un alignement propre */
}

/* Effet 'hover-reveal' pour le téléphone et courriel */
.hover-reveal-container {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.hover-reveal-placeholder,
.hover-reveal-content {
    transition: opacity 0.3s ease;
}

.hover-reveal-content {
    opacity: 1;
}

.hover-reveal-container:not(:hover) .hover-reveal-content {
    opacity: 0;
    pointer-events: none; /* S'assurer qu'il n'est pas cliquable */
    position: absolute; /* Empêcher le chevauchement de la mise en page */
}

.hover-reveal-container:not(:hover) .hover-reveal-placeholder {
    opacity: 1;
}

.hover-reveal-container:hover .hover-reveal-placeholder {
    opacity: 0;
}

/* Le formulaire dans la page contact doit aussi prendre de l'espace */
.contact-form-section .cta-form-block {
    flex: 1.5; /* Le formulaire prend un peu plus de place que les infos */
    min-width: 350px;
    padding: 0; 
    background: none; 
    box-shadow: none; 
}

.cta-form-block h4 {
    color: var(--color-gold-accent);
    font-size: 1.5em;
    margin-bottom: 25px;
    text-align: center;
}

/* MODIFICATION CLÉ 1: Inclus input et textarea pour uniformiser les styles (couleur, padding, police). 
   AJOUTÉ: font-size: 1em; */
.cta-form-block form input[type="text"],
.cta-form-block form input[type="email"],
.cta-form-block form input[type="tel"],
.cta-form-block form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #2c2c2c;
    color: var(--color-text-light);
    border: 1px solid #444;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: var(--font-primary);
    font-size: 1em; /* Assure une taille de texte uniforme */
}

/* Styles pour le menu déroulant personnalisé (Patrimoine) */
.custom-select-wrapper {
    margin-bottom: 10px;
}

.custom-select {
    position: relative;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-primary);
}

.custom-select .selected {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* MODIFICATION CLÉ 2: Assure la couleur et la taille de l'élément sélectionné */
    color: var(--color-text-light) !important; /* Ajout du !important pour forcer la couleur grise */
    font-size: 1em; 
}

.custom-select .selected::after {
    content: '\f0d7'; /* Icône flèche vers le bas de Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 10px;
    transition: transform 0.3s;
}

.custom-select.active .selected::after {
    transform: rotate(180deg);
}

.custom-select .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    z-index: 10;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    font-size: 1em;
}

.custom-select.active .options {
    max-height: 200px; /* Assez grand pour afficher toutes les options */
    border-top: 1px solid #444;
}

/* MODIFICATION CLÉ 3: Applique explicitement la couleur du texte aux options */
.custom-select .options div {
    padding: 10px;
    transition: background-color 0.2s;
    color: var(--color-text-light); /* Corrige la couleur du texte des options (gris/light) */
}

.custom-select .options div:hover {
    background-color: #3a3a3a;
}

/* Ajustement pour le champ TEXTAREA */
.cta-form-block form textarea {
    min-height: 120px;
    resize: vertical;
}

/* --- Styles pour la MODALE de Notification --- */
.modal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* Fond semi-transparent */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #1a1a1a;
    margin: auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
    width: 90%;
    max-width: 400px;
    text-align: center;
    border-left: 5px solid; /* La couleur sera définie par les classes de type */
}

/* Couleurs spécifiques aux types de notification */
.modal-success .modal-content {
    border-left-color: var(--color-success);
}

.modal-error .modal-content {
    border-left-color: var(--color-error);
}

.modal-info .modal-content {
    border-left-color: var(--color-info);
}

#notification-message {
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-text-light);
}

#notification-close {
    background-color: var(--color-gold-accent);
    color: var(--color-dark-bg);
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

#notification-close:hover {
    background-color: var(--color-red-accent);
    color: var(--color-text-light);
}


/* ========================= */
/* --- Media Query pour les petits écrans (Mobile) --- */
/* ========================= */
@media (max-width: 768px) {
    
    /* HEADER: Afficher le hamburger, cacher la navigation */
header {
        /* Utilisez Flexbox pour contrôler l'alignement sur mobile */
        display: flex; 
        justify-content: space-between; /* Garde l'espace entre le hamburger et les logos */
        align-items: center;
    }
    
    /* Le logo (conteneur des deux logos) prend l'espace restant */
    .logo {
        flex-grow: 1; 
        /* Le .logo avait display: flex; avec gap: 15px; précédemment.
           Nous allons utiliser cet espace pour les logos. */
        justify-content: flex-end; /* Aligner les logos à droite du conteneur .logo */
        align-items: center;
        margin-left: 15px; /* Petit espace entre le hamburger et les logos */
    }

    /* Ajustement des logos pour qu'ils s'ajustent à la largeur restante */
    .header-logo {
        height: 50px; /* Nouvelle hauteur maximale pour l'ensemble des logos */
        width: auto; /* Permet à chaque logo de se redimensionner proportionnellement */
    }

    .fbn-logo {
        height: 50px; /* Assurez-vous que le SVG a la bonne hauteur */
        width: 100%; /* Permet au logo FBN de prendre la place nécessaire */
        max-width: 100px; /* Limiter sa taille pour laisser de l'espace au 2ème logo */
    }

    .groupe-logo { 
        height: 50px; /* Assurez-vous que l'image a la bonne hauteur */
        width: 100%; /* Permet au logo Groupe de prendre la place nécessaire */
        max-width: 120px; /* Limiter sa taille pour le mobile */
    }

    /* Le hamburger doit rester visible et à gauche, il est déjà bien positionné en premier dans le HTML */
    .hamburger { 
        display: flex; 
        /* Ne pas ajouter de flex-shrink: 0; ou flex-grow: 0; pour qu'il garde sa taille définie par ses spans */
    }

    /* ... (vos autres règles existantes pour le mobile) ... */
}
    /* PAGE CONTACT: Mise en page en colonne */
    .contact-form-section {
        flex-direction: column;
        gap: 30px;
        margin-top: 30px;
    }

    .contact-info,
    .contact-form-section .cta-form-block {
        min-width: 100%; /* S'assurer qu'ils prennent toute la largeur */
    }
    
    /* FOOTER: Ajustement des liens */
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }

}