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

body {
    font-family: 'Moustique';
    background-color: #ffffff;
    color: #333;
    padding-top: 80px;                            /* Compense la hauteur du header fixe */
}

/* MENU HORIZONTAL */
header {
    display: flex;                                /* Aligne logo et menu horizontalement */
    justify-content: space-between;               /* Logo à gauche, menu à droite, espace max entre eux */
    align-items: center;                          /* Centre verticalement (haut/MILIEU/bas) */
    padding: 20px 50px;                           /* Espace intérieur (haut/bas 20px, côtés 50px) */
    background-color: #ffffff;                  /* Fond blanc pour le header */
    box-shadow: 0 2px 0px #000000;              /* Ligne noire fine et nette sous le header (au lieu de l'ombre floue) */

    /* Nouvelles lignes pour l'animation */
    position: fixed;                   /* Fixe le header en haut de la page */
    top: 0px;                            /* Positionné tout en haut */
    left: 0;                           /* Aligné à gauche */
    right: 0;                          /* S'étend sur toute la largeur */
    z-index: 1000;                     /* Passe au-dessus de tout le contenu */
    transition: transform 0.3s ease;   /* Animation fluide de 0.3s */
}

/* LOGO */
.logo img {
    height: 55px;      /* Taille élégante pour un header d’avocat */
    width: auto;       /* Respecte les proportions */
    display: block;    /* Évite les petits décalages bizarres */
    margin-left: 20px;
}

/* Classe qui cache le header (sera ajoutée par JavaScript) */
header.hidden {
    transform: translateY(-100%);  /* Déplace le header vers le haut (hors écran) */
}

.logo h2 {
    color: #000000;
    font-size: 24px;
    margin-left: 40px;
}

/* Menu navigation : alignement horizontal avec espaces */
nav {
    display: flex;           /* Aligne les liens sur une ligne */
    gap: 50px;               /* Espace de 50px entre chaque lien */
    margin-right: 40px;      /* Décale le menu de 40px du bord droit */
}

nav a {                      /* Style des liens du menu */
    text-decoration: none;   /* Retire le soulignement automatique de base */
    color: #000000;
    font-size: 16px;         /* Taille du texte */
    font-weight: 500;        /* Semi-gras */
    transition: color 0.3s;  /* Animation fluide du changement de couleur */
}

nav a:hover {                /* Animation changement de couleur lorsqu'on passe la souris - désactiver car même couleur */
    color: #000000;
}

/* ========================================
   MENU DÉROULANT COMPÉTENCES
   ======================================== */

.menu-dropdown {
    position: relative;        /* Nécessaire pour positionner le sous-menu */
}

.menu-dropdown > a {
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/* Sous-menu caché par défaut */
.menu-dropdown-contenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);   /* Centre le menu par rapport au mot "Compétences" */
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1001;
}

/* Liens du sous-menu */
.menu-dropdown-contenu a {
    display: block;            /* Chaque lien sur sa propre ligne */
    padding: 12px 20px;
    color: #000000;
    text-decoration: none;
    font-size: 15px;
    border-left: 3px solid transparent;
    transition: border-color 0.3s, background-color 0.3s;
}

/* Effet au survol des liens du sous-menu */
.menu-dropdown-contenu a:hover {
    background-color: #f5f5f5;
    border-left: 3px solid #ddbd1b;  /* Barre dorée à gauche au survol */
}

/* Affiche le sous-menu au survol */
.menu-dropdown:hover .menu-dropdown-contenu {
    display: block;
}

/* Barre dorée sous "Compétences" comme les autres liens du menu */
.menu-dropdown > a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #C9B037;
    transition: width 0.3s ease;
    margin-top: 5px;
}

.menu-dropdown:hover > a::after {
    width: 100%;
}

/* BARRE SOUS LES TITRES */
nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #ddbd1b;
    transition: width 0.3s ease;
    margin-top: 5px;
}

nav a:hover::after {
    width: 100%;
}

/* SECTION HERO */

.hero {
    text-align: center;
    padding: 200px 20px 200px;
    margin-top: -80px;   /* Remonte la section de 80px pour coller sous le header */
    padding-top: 280px;  /* Compense en ajoutant 80px au padding du haut pour garder la même hauteur */
    
    /* Image de fond du tribunal */
    background-image: url('tribunal.png');   /* Chemin vers ton image */
    background-size: cover;                  /* L'image couvre toute la section */
    background-position: center;             /* Centrage de l'image */
    background-repeat: no-repeat;            /* Pas de répétition en mosaïque */
    
    /* Superposition blanche semi-transparente pour atténuer l'image */
    /* Cela crée un "voile" blanc par-dessus l'image pour la rendre plus discrète */
    background-color: rgba(255, 255, 255, 0.0); /* Désactivé car on utilise un autre trick */
    position: relative;                      /* Nécessaire pour positionner le voile */
}

/* Voile blanc semi-transparent PAR-DESSUS l'image, SOUS le texte */

.hero::before {
    content: '';                             /* Crée un élément invisible */
    position: absolute;                      /* Se positionne par rapport à .hero */
    top: 0; left: 0; right: 0; bottom: 0;   /* Couvre toute la section */
    background-color: rgba(255, 255, 255, 0.6); /* Blanc à 60% d'opacité = image à 40% */
    z-index: 0;                              /* Derrière le texte */
}

.hero h1 {
    font-size: 48px;
    color: #000000;
    margin-bottom: 20px;
    position: relative;   /* Permet au z-index de fonctionner */
    z-index: 1;           /* Passe le titre AU-DESSUS du voile blanc */
}

.hero p {
    font-size: 25px;
    color: #000000;
    margin-top: 40px;   /* Espace entre le titre et la phrase */
    position: relative; /* Pour passer au-dessus du voile blanc */
    z-index: 1;         /* Même principe que le h1 */
}

/* SECTION À PROPOS */
.about {
    padding: 80px 50px;
    background-color: #ffffff;
}

.about-container {
    display: flex;
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.about-image {
    flex: 1;
    max-width: 400px;
    height: 500px;
    overflow: hidden;
    border-radius: 12px;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
}

.about-text {
    flex: 1;
}

.about-text h2 {              /* texte à propos */
    font-size: 36px;
    color: #000000;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
}

/* SECTION DESCRIPTION */
.description {
    text-align: center;
    padding: 40px 20px 60px; 
    background-color: #ffffff;
}

.description p {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ========================================
   SECTION COMPÉTENCES
   ======================================== */

.competences {
    padding: 80px 50px;
    background-color: #292828;       /* Même gris foncé que le footer */
    text-align: center;
}

.competences h2 {
    font-size: 30px;
    color: #ddbd1b;                  /* Couleur dorée */
    display: inline-block;
    padding-bottom: 12px;
    border-bottom: 3px solid #ddbd1b; /* Souligné doré */
    margin-bottom: 0;
}

.competences-grid {
    display: grid;                            /* Active le système de grille CSS */
    grid-template-columns: repeat(3, 1fr);    /* Crée 3 colonnes de taille égale */
    gap: 40px;                                /* Espace de 40px entre chaque carte */
    max-width: 1200px;                        /* Largeur maximale de 1200px */
    margin: 0 auto;                           /* Centre la grille horizontalement */
}

.competence-card {
    background-color: #ffffff;                /* Fond beige/crème */
    padding: 30px 20px;                       /* Espace intérieur : 30px en haut/bas, 20px gauche/droite */
    border-radius: 8px;                       /* Arrondit les coins de 8px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);    /* Ombre légère */
    transition: transform 0.3s ease;          /* Animation fluide pour le mouvement au survol */
}

.competence-card:hover {
    transform: translateY(-5px);              /* Monte de 5px quand on passe la souris dessus */
}

.competence-card h3 {
    font-size: 24px;                  /* Texte un peu plus grand */
    color: #000000;
    text-align: center;
    display: inline-block;            /* Permet à la barre de coller au texte */
    padding-bottom: 8px;
}

.competence-card h3::after {
    content: '';
    display: block;
    width: 100%;                      /* La barre = exactement la largeur du texte */
    height: 3px;
    background-color: #ddbd1b;        /* Couleur dorée */
    margin-top: 6px;
}


.competence-card p {
    font-size: 14px;                          /* Taille du texte descriptif */
    color: #666;                              /* Gris foncé */
}

/* ========================================
   SECTIONS PRATIQUE (pénal, famille, civil)
   ======================================== */

/* PARTIE 1 : bandeau image */
.pratique-hero {
    height: 400px;                        /* Hauteur du bandeau */
    max-height: 400px;                    /* Fige la hauteur maximum */
    background-size: 100% auto;           /* Largeur 100% mais hauteur proportionnelle */
    background-position: center;          /* Centrée */
    background-repeat: no-repeat;
    position: relative;                   /* Pour positionner le bloc texte */
    display: flex;
    align-items: center;                  /* Centre verticalement */
    justify-content: flex-end;            /* Pousse le bloc texte à DROITE */
}

/* Voile sombre sur l'image pour la lisibilité */
.pratique-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.029); /* Voile noir léger */
    z-index: 0;
}

/* Bloc blanc avec le titre */
.pratique-hero-overlay {
    position: relative;
    z-index: 1;                            /* Au-dessus du voile */
    background-color: rgba(255,255,255,0.85); /* Blanc semi-transparent */
    padding: 40px 60px;
    margin-right: 80px;                    /* Décalé du bord droit */
}

.pratique-hero-overlay h2 {
    font-size: 36px;
    color: #000000;
}

/* Variante avec le bloc texte à GAUCHE (droit de la famille) */
.pratique-hero--gauche {
    justify-content: flex-start;    /* Pousse le bloc à gauche au lieu de droite */
}

.pratique-hero--gauche .pratique-hero-overlay {
    margin-right: 0;               /* Retire la marge droite */
    margin-left: 80px;             /* Ajoute la marge à gauche à la place */
}

/* PARTIE 2 : détail des missions */
.pratique-detail {
    background-color: #ffffff;
    padding: 60px 200px;                   /* Marges généreuses sur les côtés */
    max-width: 1200px;
    margin: 0 auto;
}

.pratique-detail p {
    font-size: 20px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
}

.pratique-detail ul {
    margin: 15px 0 25px 30px;             /* Décalage de la liste */
}

.pratique-detail li {
    font-size: 17px;
    line-height: 2;
    color: #333;
    list-style-type: disc;                /* Points de liste classiques */
}

/* Texte souligné */
.souligne {
    text-decoration: underline;
    text-decoration-color: #ddbd1b;       /* Soulignement doré comme la barre des compétences */
    text-underline-offset: 4px;           /* Petit espace entre le texte et le soulignement */
}

/* ========================================
   SECTIONS COMPÉTENCES COMPACTES (index)
   ======================================== */

.competence-apercu {
    display: flex;
    align-items: center;
    min-height: 350px;
    background-color: #ffffff;
}

/* Alternance fond gris pour les sections inverses */
.competence-apercu--inverse {
    background-color: #f5f5f5;
    justify-content: center;         /* Centre mieux les éléments */
}

.competence-apercu--inverse .competence-apercu-texte {
    padding: 60px 100px 60px 120px;  /* Plus d'espace à gauche pour la famille */
}

.competence-apercu-image {
    flex: none;              /* Ne s'étire plus */
    width: 450px;            /* Largeur fixe */
    height: 350px;           /* Hauteur fixe */
    overflow: hidden;
    margin: 30px;            /* Marge tout autour pour ne pas coller aux bords */
    border-radius: 8px;      /* Coins légèrement arrondis pour l'élégance */
}

.competence-apercu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.competence-apercu-texte {
    flex: 1;
    padding: 60px 100px;             /* Plus d'espace sur les côtés */
}

.competence-apercu-texte h2 {
    font-size: 32px;
    color: #000000;
    margin-bottom: 20px;
    padding-bottom: 12px;
    display: inline-block;
    border-bottom: 3px solid #ddbd1b;  /* Barre dorée sous le titre */
}

.competence-apercu-texte p {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 30px;
}

/* Lien "En savoir plus" */
.en-savoir-plus {
    display: inline-block;
    color: #000000;
    font-size: 16px;
    text-decoration: none;
    border-bottom: 2px solid #ddbd1b;
    padding-bottom: 4px;
    transition: opacity 0.3s;
}

.en-savoir-plus:hover {
    opacity: 0.6;
}

/* ========================================
   FOOTER (pied de page)
   ======================================== */

footer {
    background-color: #292828;               /* Fond vert */
    color: #FFF8F0;                          /* Texte blanc cassé */
    padding: 180px 50px 30px;                   /* Espace intérieur : 50px en haut, 50px à gauche/droite, 20px en bas */
}

.footer-content {
    display: flex;                           /* Aligne les éléments horizontalement */
    justify-content: space-between;          /* Répartit l'espace : les éléments sont éloignés au maximum */
    align-items: flex-start;                 /* Aligne en haut */
    padding: 0 50px;                         /* Même padding que le header */
    max-width: none;                         /* Pas de limite de largeur */
    margin: 0 0 50px 0;                      /* Pas de centrage auto */
}

.footer-section h3 {
    text-align: center;                      /* Centre le titre */
    font-size: 18px;                         /* Taille des titres de section */
    margin-bottom: 15px;                     /* Espace de 15px sous le titre */
    color: #C9B037;                        /* Couleur dorée */
}

.footer-section p {
    text-align: center;                      /* Centre tout le texte de chaque section du footer */
    font-size: 14px;                         /* Taille du texte */
    line-height: 1.8;                        /* Hauteur de ligne : 1.8 fois la taille du texte (pour aérer) */
    margin: 5px 0;                           /* Espace de 5px en haut et en bas de chaque paragraphe */
}

.footer-bottom {
    text-align: center;                      /* Centre le texte */
    padding-top: 40px;                       /* Espace de 20px au-dessus */
    border-top: 1px solid rgba(255,248,240,0.2);  /* Bordure fine en haut : 1px, blanc cassé à 20% d'opacité */
    font-size: 12px;                         /* Petite taille de texte */
    color: #FFF8F0;                          /* Blanc cassé */
}

.footer-section a, .footer-section p a {
    color: #FFF8F0;                        /* Le lien prend la même couleur blanche que le texte du footer */
    text-decoration: none;                   /* Retire le soulignement automatique des liens */
}

.footer-section a:hover {
    color: #FFF8F0;          /* La couleur ne change pas au survol */
}

.footer-section a::after {
    content: '';             /* Crée un élément vide sous le lien */
    display: block;          /* Le transforme en bloc pour lui donner une largeur */
    width: 0;                /* Largeur nulle au départ (invisible) */
    height: 2px;             /* Hauteur de la barre */
    background-color: #C9B037; /* Couleur dorée comme dans le menu */
    transition: width 0.3s ease; /* Animation fluide */
    margin-top: 3px;         /* Petit espace entre le texte et la barre */
}

.footer-section a:hover::after {
    width: 100%;             /* La barre s'étend sur toute la largeur au survol */
}




/* ========================================
   PAGE CONTACT
   ======================================== */

.contact-page {
    padding: 80px 50px 60px;         /* Réduit le padding haut pour remonter le contenu */
    background-color: #ffffff;
    text-align: center;
}

.contact-page h1 {
    font-size: 48px;
    color: #000000;
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: inline-block;
    border-bottom: 3px solid #ddbd1b;   /* Trait doré comme "Honoraires" */
}

.contact-page p {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;             /* Réduit l'espace sous le texte */
    padding-top: 15px;
}

.contact-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 1000px;       /* Plus large pour tout accueillir */
    margin: 60px auto;
    background-color: #ffffff;
    padding: 0;
}

.contact-coordonnees {
    width: 300px;            /* Largeur fixe */
    flex: none;              /* Ne s'étire plus */
    padding: 40px;
    text-align: center;
    margin-right: 40px;      /* Décale les coordonnées à gauche du trait */
}

.contact-coordonnees p {
    font-size: 18px;
    margin: 15px 0;
    color: #333;
}

.contact-separateur {
    width: 2px;
    height: 200px;
    background-color: #ddbd1b;
    opacity: 0.8;
    margin-right: 40px;      /* Espace entre le trait et la photo */
}

.contact-photo {
    flex: none;
    width: 350px;
    padding: 20px;
    margin-left: 40px;       /* Décale la photo à droite du trait */
}

.contact-photo img {
    width: 100%;
    height: auto;                /* La hauteur s'adapte naturellement au format portrait */
    border-radius: 8px;
    object-fit: cover;
}




/* ========================================
   PAGE HONORAIRES 
   ======================================== */

.honoraires-page {
    background-color: #ffffff;
    padding: 60px 120px;      /* Plus d'espace sur les côtés */
}

.honoraires-colonnes .honoraires-bloc {
    margin-bottom: 70px;      /* Plus d'espace entre les blocs */
}

.honoraires-page h1 {
    color: #000000;
    text-align: center;
    margin-bottom: 60px;
    padding-top: 40px;
    padding-bottom: 15px;
    margin-bottom: 60px;
    display: inline-block;        /* Pour que le trait colle au texte */
    border-bottom: 3px solid #ddbd1b;  /* Trait doré */
}

.honoraires-intro {
    max-width: 900px;
    margin: 0 auto 60px auto;        /* Centré, espace sous le texte intro */
    text-align: center;
}

.honoraires-intro p {
    font-size: 20px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 15px;
}

.honoraires-colonnes {
    display: flex;                   /* Les deux colonnes côte à côte */
    gap: 0;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
}

.honoraires-col {
    flex: 1;                         /* Chaque colonne prend la même largeur */
    padding: 0 50px;                 /* Espace intérieur des colonnes */
}

/* Trait de séparation vertical élégant */
.honoraires-separateur {
    width: 1px;
    background-color: #ddbd1b;       /* Doré comme le reste du site */
    align-self: stretch;             /* S'étend sur toute la hauteur des colonnes */
    opacity: 0.6;                    /* Légèrement transparent pour l'élégance */
}

/* Réinitialise les blocs dans ce nouveau contexte */
.honoraires-colonnes .honoraires-bloc {
    background-color: transparent;   /* Pas de fond blanc cette fois */
    box-shadow: none;                /* Pas d'ombre */
    padding: 0;
    margin-bottom: 50px;             /* Espace entre les deux blocs d'une même colonne */
    border-radius: 0;
}

.honoraires-colonnes .honoraires-bloc h2 {
    font-size: 22px;
    color: #000000;                  /* Noir */
    border-left: 3px solid #ddbd1b; /* Barre dorée à gauche */
    padding-left: 12px;
    margin-bottom: 15px;
}

.honoraires-colonnes .honoraires-bloc p {
    font-size: 18px;
    line-height: 1.9;
    color: #444;
    margin-bottom: 12px;
}

.honoraires-colonnes .honoraires-bloc li {
    font-size: 18px;
    line-height: 2;
    color: #444;
}

.honoraires-colonnes .honoraires-bloc ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

/* ========================================
   PAGE DROIT PÉNAL
   ======================================== */

/* Bandeau titre noir */
.penal-titre {
    background-color: #292828;       /* Même noir que le footer et "domaines de compétence" */
    padding: 80px 50px;
    margin-top: -15px;                   /* Supprime l'espace blanc sous le header */
}

.penal-titre h1 {
    color: #ddbd1b;                  /* Titre doré */
    font-size: 35px;
    display: inline-block;
    padding-bottom: 12px;
    border-bottom: 3px solid #ddbd1b; /* Souligné doré */
}

/* Blocs photo + texte */
.penal-bloc {
    display: flex;
    align-items: center;
    min-height: 350px;
    background-color: #ffffff;
}

.penal-bloc--inverse {
    background-color: #f5f5f5;       /* Fond gris clair pour alterner */
}

.penal-bloc-image {
    flex: none;
    width: 450px;
    height: 350px;
    overflow: hidden;
    margin: 30px;
    border-radius: 8px;
}

.penal-bloc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.penal-bloc-texte {
    flex: 1;
    padding: 60px 100px;
}

.penal-bloc-texte h2 {
    font-size: 28px;
    color: #000000;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #ddbd1b; /* Barre dorée sous le titre */
    margin-bottom: 20px;
}

.penal-bloc-texte p {
    font-size: 18px;
    line-height: 1.9;
    color: #555;
}

/* Paragraphes détaillés */
.penal-detail {
    background-color: #ffffff;
    padding: 50px 200px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.penal-detail p {
    font-size: 18px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 20px;
}

/* Bouton rendez-vous */
.penal-rdv {
    background-color: #ffffff;
    padding: 60px;
    text-align: center;
}

.bouton-rdv {
    display: inline-block;
    background-color: #ddbd1b;       /* Fond doré */
    color: #000000;                  /* Texte noir */
    font-size: 18px;
    font-weight: 600;
    padding: 18px 50px;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.3s;
}

.bouton-rdv:hover {
    opacity: 0.85;                   /* Légèrement transparent au survol */
}

.penal-bloc-texte ul {
    padding-left: 20px;      /* Rentre la liste */
    margin: 15px 0 20px 0;   /* Espace au-dessus et en-dessous */
}

.penal-bloc-texte li {
    font-size: 17px;
    line-height: 2;           /* Espace entre chaque élément */
    color: #555;
    list-style-type: disc;    /* Points de liste */
}

/* ========================================
   PAGE MENTIONS LÉGALES
   ======================================== */

.mentions-content {
    max-width: 860px;
    margin: 40px auto 60px auto;
    padding: 0 40px 60px 40px;
}

.mentions-content h2 {
    font-size: 20px;
    color: #000000;
    margin-top: 60px;        /* Plus d'espace au-dessus de chaque titre */
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ddbd1b;
}

.mentions-content p {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 15px;     /* Espace entre chaque paragraphe */
}

/* ========================================
   RESPONSIVE TÉLÉPHONE (écrans < 768px)
   ======================================== */

/* Hamburger caché sur ordinateur */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #000000;
}

@media (max-width: 768px) {

    /* GÉNÉRAL */
    body {
        padding-top: 70px;
    }

    /* HEADER */
    header {
        padding: 15px 20px;
    }

    nav {
        display: none;
    }

    .logo img {
        height: 40px;
    }

    /* MENU HAMBURGER */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
    }

    nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0px;              /* Collé au bord droit */
        left: auto;              /* Annule l'étirement à gauche */
        width: 200px;            /* Largeur fixe et compacte */
        background-color: #ffffff;
        padding: 20px;
        gap: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 999;
        border-radius: 0 0 8px 8px;      /* Arrondit uniquement les angles du bas */    }

    nav.open .menu-dropdown-contenu {
        display: flex;
        flex-direction: column;
        position: static;
        transform: none;
        box-shadow: none;
        padding-left: 20px;
        min-width: unset;
        border-left: 2px solid #ddbd1b;
        margin-top: 5px;
    }

    nav.open .menu-dropdown-contenu a {
        background-color: transparent;
        color: #000000;
        border-left: none;
        border-bottom: none;
    }

    nav.open a::after {
        display: none;
    }

    /* HERO */
    .hero {
        padding: 150px 20px 100px;
        margin-top: -70px;
        padding-top: 180px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero p {
        font-size: 18px;
    }

    /* À PROPOS */
    .about-container {
        flex-direction: column;
        gap: 30px;
    }

    .about-image {
        max-width: 100%;
        width: 100%;
        height: 350px;
    }

    .about-text h2 {
        font-size: 28px;
    }

    .about-text p {
        font-size: 16px;
    }

    /* COMPÉTENCES */
    .competences {
        padding: 50px 20px;
    }

    /* SECTIONS COMPÉTENCES COMPACTES */
    .competence-apercu {
        flex-direction: column;
        border-bottom: 1px solid #f0f0f0;
    }

    .competence-apercu--inverse {
        flex-direction: column-reverse;
    }

    .competence-apercu-image {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .competence-apercu-texte {
        padding: 30px 20px;
    }

    .competence-apercu--inverse .competence-apercu-texte {
        padding: 30px 20px;
    }

    /* PAGES PÉNAL/FAMILLE/CIVIL */
    .penal-titre {
        padding: 50px 20px;
        margin-top: -70px;
        padding-top: 120px;
    }

    .penal-bloc {
        flex-direction: column;
    }

    .penal-bloc--inverse {
        flex-direction: column;
    }

    .penal-bloc-image {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .penal-bloc-texte {
        padding: 30px 20px;
    }

    .penal-detail {
        padding: 30px 20px;
    }

    .penal-rdv {
        padding: 40px 20px;
    }

    /* FOOTER */
    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 0 20px;
    }

    footer {
        padding: 60px 20px 30px;
    }

    /* HONORAIRES */
    .honoraires-page {
        padding: 40px 20px;
    }

    .honoraires-colonnes {
        flex-direction: column;
    }

    .honoraires-separateur {
        width: 100%;
        height: 1px;
        margin: 20px 0;
    }

    /* CONTACT */
    .contact-info {
        flex-direction: column;
        align-items: center;
    }

    .contact-coordonnees {
        width: 100%;
        margin-right: 0;
    }

    .contact-separateur {
        width: 80%;
        height: 1px;
        margin: 20px auto;
    }

    .contact-photo {
        width: 100%;
        margin-left: 0;
    }

}