/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --primary-blue: #2a3465;
    --accent-gold: #cfa64d;
    --text-dark: #333333;
    --text-light: #555555;
    --bg-white: #ffffff;
    --bg-light: #f9f9f9;
    --bg-mobile-submenu: #f4f4f4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Lato', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
    font-weight: 300;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; } /* Reset des UL important */
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }


.icon-svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px; /* Espace entre l'icône et le texte */
    fill: currentColor; /* L'icône prendra la couleur du texte parent */
}

/* Optionnel : ajuster la taille des icônes dans les cartes de compétences */
.card .icon .icon-svg {
    width: 40px;
    height: 40px;
    margin-right: 0;
    margin-bottom: 15px;
}

.icon-svg-competence {
    width: 60px;       /* Largeur de l'icône */
    height: 60px;      /* Hauteur de l'icône */
    fill: #c5a545;     /* La couleur dorée de l'image */
    display: block;
    margin: 0 auto 15px; /* Centre l'icône et ajoute un espace en bas */
}

/* Centrage dans la carte (si besoin) */
/* .card .icon2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
} */

/* =========================================
   HEADER & TYPO
   ========================================= */
h1 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    text-align: center;
    margin: 40px 0;
    font-weight: 700;
    position: relative; /* Nécessaire pour le pseudo-élément */
    padding-bottom: 15px; /* Espace pour la barre */
}

h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent-gold);
    margin: 15px auto 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-title { font-size: 1.5rem; color: var(--primary-blue); text-align: center; margin-bottom: 2rem; font-weight: 700; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--accent-gold); margin: 15px auto 0; }
p { margin-bottom: 1rem; color: var(--text-light); text-align: justify; }

header { background: var(--bg-white); padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 40px; width: auto; }

/* =========================================
   NAVIGATION (RÈGLES CRITIQUES)
   ========================================= */

/* 1. On cache le sous-menu par défaut avec !important pour être sûr */
.submenu {
    display: none !important;
}

/* 2. Style des liens principaux */
.main-nav a, .dropdown-header {
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
    font-weight: 400;
}

/* =========================================
   VERSION DESKTOP (Écrans > 768px)
   ========================================= */
@media (min-width: 769px) {
    /* Cacher les éléments mobiles */
    .mobile-menu-btn, .mobile-nav-header, .toggle-icon { display: none !important; }

    /* Menu Principal Horizontal */
    /* Utilisation de '>' pour ne cibler QUE la liste principale, pas le sous-menu */
    .main-nav > ul { 
        display: flex; 
        gap: 30px; 
        align-items: center; 
    }
    
    .main-nav > ul > li > a:hover, 
    .dropdown-header:hover span {
        color: var(--accent-gold); 
        border-bottom: 2px solid var(--accent-gold);
        padding-bottom: 5px;
    }

    /* --- Sous-menu Desktop --- */
    .dropdown-item { position: relative; padding: 10px 0; }

    .submenu {
        /* Reset du display pour le survol */
        position: absolute;
        top: 100%;
        left: -20px;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        min-width: 280px;
        padding: 10px 0;
        border-top: 3px solid var(--accent-gold);
        z-index: 1000;
    }

    /* AFFICHER LE SOUS-MENU AU SURVOL */
    .dropdown-item:hover .submenu {
        display: block !important;
    }

    .submenu li a { padding: 12px 20px; display: block; border-bottom: 1px solid #f0f0f0; }
    .submenu li a:hover { background-color: var(--bg-light); color: var(--accent-gold); }
}

/* =========================================
   VERSION MOBILE (Écrans <= 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* Bouton Burger */
    .mobile-menu-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; font-size: 1rem; color: var(--text-dark); cursor: pointer; font-weight: 700; }

    /* Menu Principal Plein Écran */
    .main-nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: #fff; z-index: 2000;
        display: none; /* Caché */
        flex-direction: column; overflow-y: auto;
    }
    
    .main-nav.open { display: flex; }

    /* Header interne */
    .mobile-nav-header { display: flex; justify-content: flex-end; padding: 20px; border-bottom: 1px solid #eee; }
    .close-menu-btn { background: none; border: none; font-size: 1.1rem; color: var(--text-dark); cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; }

    /* Liste Verticale */
    .main-nav > ul { display: flex; flex-direction: column; width: 100%; }
    .main-nav > ul > li { width: 100%; border-bottom: 1px solid #eee; }
    
    /* Liens */
    .main-nav > ul > li > a,
    .dropdown-header { 
        display: flex; 
        justify-content: space-between;
        align-items: center;
        padding: 20px; 
        width: 100%;
        font-size: 1rem; 
    }

    /* --- Sous-menu Mobile --- */
    .toggle-icon { display: block; transition: transform 0.3s ease; font-size: 0.9rem; color: var(--accent-gold); }

    .submenu {
        position: static;
        background-color: var(--bg-mobile-submenu);
        width: 100%;
        box-shadow: none;
        border-top: none;
    }

    /* AFFICHER LE SOUS-MENU AU CLIC (Classe .active ajoutée par JS) */
    .dropdown-item.active .submenu {
        display: block !important;
    }

    .dropdown-item.active .toggle-icon { transform: rotate(180deg); }
    .submenu li a { padding: 15px 20px 15px 40px; font-size: 0.95rem; color: #555; border-bottom: 1px solid #e0e0e0; display: block; }
}


/* =========================================
   AUTRES SECTIONS
   ========================================= */
.city-banner { height: 300px; background-image: url('images/bordeaux-batiment-avocat-droit-travail-1200x700.webp'); background-size: cover; background-position: center; }

.section-presentation { padding: 40px 0; }
.presentation-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
.image-content img { border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.caption { font-size: 0.75rem; font-style: italic; text-align: center; margin-top: 10px; }

.section-serieux { padding: 40px 0; }
.serieux-content p { text-align: center; max-width: 800px; margin: 0 auto 10px; }

.section-competences { padding: 40px 0; }
.cards-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
.card { background: #fff; border: 1px solid #eee; padding: 30px; width: 300px; text-align: center; box-shadow: 0 5px 10px rgba(0,0,0,0.05); border-radius: 4px; }
.card .icon { font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 20px; }
.card h3 { color: var(--primary-blue); font-size: 1.1rem; font-weight: 700; }

.section-honoraires { padding: 40px 0; }

.section-contact-main { 
    padding: 60px 0 80px; 
}

.grid-2-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
    gap: 30px;
    margin-top: 30px;
}

.grid-2-2 .card {
    width: 100%; /* Les cartes prennent toute la largeur de leur cellule de grille */
    max-width: none; /* Annule d'éventuelles limites */
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 1 part pour le texte, 1.5 part pour la carte */
    gap: 40px;
    align-items: center;
    margin-top: 40px;
}

.contact-info {
    text-align: left;
}

.contact-info p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    color: var(--text-dark);
}

.contact-info .icon-svg {
    color: var(--primary-blue);
    margin-right: 15px;
    flex-shrink: 0;
}

.contact-map iframe {
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


.contact-details-center i { color: var(--primary-blue); margin-right: 10px; }
.contact-details-center p { font-size: 1.1rem; margin-bottom: 10px; }

/* --- Footer --- */
footer {
    background-color: var(--primary-blue);
    color: #fff;
    padding-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 40px;
}

/* Titres centrés avec soulignement centré */
.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    text-align: center; /* Centre le texte */
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Place le début du trait à 50% */
    transform: translateX(-50%); /* Recule de 50% de sa propre largeur pour être parfaitement centré */
    width: 40px;
    height: 2px;
    background: #fff;
}

.footer-col p {
    color: #ddd;
    font-size: 0.9rem;
    /* On garde le texte aligné à gauche pour la lisibilité des paragraphes, 
       sauf si vous voulez tout centrer, mettez text-align: center ici */
}

/* Logo column spécifique */
.logo-col { text-align: center; }
.logo-col img { 
    filter: brightness(0) invert(1); 
    max-width: 180px; /* Était à 120px -> Agrandissement */
    margin-bottom: 15px; 
    display: block; /* Assure le centrage */
    margin-left: auto; /* Centrage */
    margin-right: auto; /* Centrage */
}
.logo-col .mentions {
    font-weight: 300;
    font-size: 0.75rem;
    margin-top: 10px;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}

/* Map */
.map-placeholder img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Contact Icons */
.contact-col p a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact-col p a:hover { text-decoration: underline; }

/* Footer Bottom (Barre du bas) */
.footer-bottom {
    background: var(--accent-gold);
    color: #000;
    padding: 15px 0;
    font-size: 0.8rem;
}

.footer-bottom-content {
    display: flex;
    justify-content:space-between; 
    align-items: center;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-grid { 
        grid-template-columns: 1fr; 
        text-align: center; /* Centre tout sur mobile */
    }
    
    /* Sur mobile, on centre aussi les paragraphes */
    .footer-col p {
        text-align: center;
    }
    
    /* Sur mobile, on centre les liens contact */
    .contact-col p a {
        justify-content: center;
    }

    .contact-grid {
        grid-template-columns: 1fr; /* On empile sur mobile */
        text-align: center;
    }
    
    .contact-info {
        text-align: center;
    }

    .contact-info p {
        justify-content: center;
    }

    /* Footer bottom sur mobile : on empile */
    .footer-bottom-content {
        flex-direction: column;
        gap: 10px;
    }

    
    /* On force la grille à n'avoir qu'une seule colonne */
    .presentation-grid {
        grid-template-columns: 1fr; /* */
        gap: 30px; /* Espace entre le texte et l'image */
    }

    /* Optionnel : Centrer l'image pour un meilleur rendu visuel sur téléphone */
    .image-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }

    .image-content img {
        width: 100%;
        max-width: 400px; /* Évite que l'image ne soit trop immense sur grand téléphone */
        height: auto;
    }
        .grid-2-2 {
        grid-template-columns: 1fr;
    }
}