/* ============================================================
   GWS Template par johan — Barreau de Marseille
   Charte graphique basée sur les maquettes
   ============================================================ */

/* ---------- Design Tokens ---------- */
/* Charte graphique officielle Barreau Marseille (couleurs-polices.pdf) */
:root {
    /* Couleurs brand — valeurs exactes de la charte */
    --bm-beige:        #e2e1d5;       /* fond header */
    --bm-beige-light:  #ecebe0;
    --bm-beige-border: #c9c8b9;

    --bm-blue:         #1c81a0;       /* bleu canard logo */
    --bm-blue-dark:    #166a84;
    --bm-blue-darker:  #0f5368;

    --bm-dark:         #3b4242;       /* gris foncé signature (texte, cartes, boutons) */
    --bm-dark-2:       #3b4242;
    --bm-ink:          #3b4242;       /* même que dark pour cohérence */
    --bm-text:         #3b4242;
    --bm-text-muted:   #6b7070;

    --bm-white:        #ffffff;
    --bm-off:          #fafafa;

    /* Couleurs "au hasard" (pastilles slider, cartes formations...) */
    --bm-pink:         #e6a4bf;
    --bm-sky:          #a2d4d8;
    --bm-yellow:       #e9e080;
    --bm-violet:       #8b8cd1;
    --bm-green:        #7acc5e;
    --bm-gold:         #d4a84a;

    /* Typographie */
    --ff-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.75rem;
    --fs-4xl:  3.5rem;
    --fs-5xl:  4.5rem;

    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-black:   900;

    --lh-tight:   1.1;
    --lh-snug:    1.25;
    --lh-base:    1.5;

    /* Espacements */
    --sp-1:  .25rem;
    --sp-2:  .5rem;
    --sp-3:  .75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-7:  2.5rem;
    --sp-8:  3rem;
    --sp-10: 4rem;
    --sp-12: 6rem;
    --sp-16: 8rem;

    /* Radius — le fameux coin asymétrique signature */
    --r-sm:  8px;
    --r-md:  16px;
    --r-lg:  32px;
    --r-xl:  48px;
    --r-2xl: 64px;

    /* Conteneur — calé sur la maquette : quasi edge-to-edge.
       Sur grand écran (>~2000px) on suit la fenêtre à 95vw avec un cap
       à 2800px pour éviter les lignes trop longues sur les 4K/UWQHD. */
    --container-max: min(2800px, 100%);
    --container-pad: 40px;

    /* Transitions */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t-fast: .2s var(--ease);
    --t-base: .35s var(--ease);
    --t-slow: .6s var(--ease);

    /* Z-index */
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--ff-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    color: var(--bm-text);
    background: var(--bm-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--lh-base);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--bm-blue); }
button { font-family: inherit; cursor: pointer; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-sans);
    font-weight: var(--fw-bold);
    color: var(--bm-ink);
    line-height: var(--lh-tight);
    margin: 0 0 var(--sp-4);
    text-transform: uppercase;
    letter-spacing: -0.07em; /* écartement -70 selon la charte */
}
/* Écartements selon la charte : bold/semibold = -70, medium/light/italic = +100 */
strong, b, .fw-bold, .fw-black, .fw-semibold { letter-spacing: -0.07em; }
em, i, .fw-light, .fw-medium, .fw-regular { letter-spacing: 0.1em; }
h1 { font-size: clamp(2.25rem, 5vw, var(--fs-5xl)); }
h2 { font-size: clamp(1.75rem, 4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
p {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.08rem;
}
/* gras et italique dans un paragraphe : mêmes réglages sauf le font-weight */
p strong, p b { font-weight: 700; line-height: 1.3rem; letter-spacing: 0.08rem; }
p em, p i { font-weight: 300; line-height: 1.3rem; letter-spacing: 0.08rem; }

/* ---------- Layout ---------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
.container--narrow {
    max-width: 80%;
    margin-left: 11%;
    margin-right: auto;
}

/* Pleine largeur avec padding container — aligné sur le header */
.container-full {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Page wrapper — même gabarit que le header (max-width + padding) */
.page-wrapper {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Contenu étroit — décalé à gauche à l'intérieur du page-wrapper */
.page-content--narrow {
    max-width: 80%;
    margin-left: 7%;
}

/* Breadcrumb global */
.breadcrumb {
    padding: var(--sp-3) 0 var(--sp-2);
    font-size: 0.7rem !important;
    letter-spacing: normal !important;
    color: var(--bm-text-muted);
}
.breadcrumb a {
    color: var(--bm-text-muted);
    transition: color var(--t-fast);
}
.breadcrumb a:hover { color: var(--bm-blue); }
/* Masquer le nom de la page courante (et le séparateur qui le précède) */
.breadcrumb__current { display: none; }
.breadcrumb__sep:has(+ .breadcrumb__current) { display: none; }

.site-main { min-height: 60vh; }

/* ============================================================
   HEADER — bloc beige flottant avec marge blanche autour
   ============================================================ */
.site-header {
    background: var(--bm-white);
    padding: var(--container-pad) var(--container-pad) 0;
    position: relative;
    z-index: var(--z-header);
    margin-bottom: 0;
}
/* Menu mobile ouvert : le header passe au-dessus du contenu (le bloc « Trouvez un avocat » est en z-index 9999) */
.site-header:has(.site-header__nav.is-open) { z-index: 10000; }

.site-header__inner {
    background: var(--bm-beige);
    border-top-right-radius: var(--r-xl);
    padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--sp-3) var(--sp-6);
    align-items: center;
    position: relative;
    min-height: 200px;
}

.site-header__logo {
    grid-row: 1 / 3;
    display: block;
    flex-shrink: 0;
    padding-left: var(--sp-3);
    min-width: 260px;
    width: 260px;
}
.site-header__logo img {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
}
.site-header__logo-text {
    font-weight: var(--fw-black);
    font-size: var(--fs-xl);
    color: var(--bm-blue);
}

.site-header__oath {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    letter-spacing: 0.1em;
    color: var(--bm-ink);
    text-align: center;
    max-width: 640px;
    justify-self: center;
    line-height: 1.4;
    padding-top: var(--sp-2);
}

.site-header__actions {
    grid-column: 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: center;
    padding-right: var(--sp-3);
}

.site-header__nav {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    padding-bottom: var(--sp-2);
}
.main-menu {
    display: flex;
    gap: var(--sp-8);
    align-items: center;
    white-space: nowrap;
}
.main-menu a,
.main-menu .menu-item > a {
    font-weight: var(--fw-black);
    font-size: var(--fs-xl);
    text-transform: uppercase;
    color: var(--bm-ink);
    letter-spacing: .01em;
    padding: var(--sp-2) 0;
    position: relative;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}
.main-menu .current-menu-item > a,
.main-menu .current-menu-parent > a,
.main-menu .current-menu-ancestor > a,
.main-menu .current-page-ancestor > a,
.main-menu a:hover {
    color: var(--bm-white);
}
.main-menu .current-menu-item > a::after,
.main-menu .current-menu-parent > a::after,
.main-menu .current-menu-ancestor > a::after,
.main-menu .current-page-ancestor > a::after,
.main-menu a:hover::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    width: 60%;
    height: 6px;
    background: var(--bm-white);
    border-radius: 3px;
}


/* ── Sous-menu dropdown ── */
.main-menu li.menu-item-has-children {
    position: static;
}
.main-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    background: var(--bm-beige);
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: var(--sp-2) 0;
    min-width: 230px;
    z-index: 200;
    box-shadow: 5px 5px 20px rgba(0,0,0,.18);
    list-style: none;
    margin: 0;
    flex-direction: column;
    gap: 0;
}
.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu {
    display: flex;
}
.main-menu .sub-menu li {
    display: block;
    padding: 0;
}
.main-menu .sub-menu a {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--bm-ink);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    padding: var(--sp-3) var(--sp-5);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast);
}
.main-menu .sub-menu a::after { display: none !important; }
.main-menu .sub-menu a:hover { color: var(--bm-white); }
/* Sous-page active (page courante) : reste en blanc comme au survol */
.main-menu .sub-menu .current-menu-item > a,
.main-menu .sub-menu .current_page_item > a,
.main-menu .sub-menu .current-menu-ancestor > a { color: var(--bm-white); }
.main-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 50px;
}

/* "À la une" active blanc uniquement sur l'accueil */
body.home .main-menu > li:first-child > a { color: var(--bm-white); }
body.home .main-menu > li:first-child > a::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    width: 60%;
    height: 6px;
    background: var(--bm-white);
    border-radius: 3px;
}

/* Burger (mobile) */
.site-header__burger {
    display: none;
    background: transparent;
    border: 0;
    padding: var(--sp-2);
    grid-row: 1;
    grid-column: 3;
    align-self: center;
}
.site-header__burger span {
    display: block;
    width: 28px; height: 3px;
    background: var(--bm-white);
    margin: 5px 0;
    border-radius: 2px;
    transition: var(--t-fast);
}

/* CTA dupliqués dans le menu : masqués par défaut (desktop), révélés en mobile à l'ouverture */
.site-header__nav-cta { display: none; }

/* ============================================================
   BUTTONS — boutons stackés du header avec coin arrondi bas-gauche
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--ff-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: var(--sp-4) var(--sp-6);
    border: 2px solid var(--bm-ink);
    background: var(--bm-white);
    color: var(--bm-ink);
    cursor: pointer;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
    line-height: 1.2;
    min-height: 60px;
    min-width: 160px;
    white-space: nowrap;
}
.btn:hover {
    opacity: .85;
}
/* Hover header : inversion des couleurs */
.site-header__actions .btn:hover {
    transform: none;
    opacity: 1;
}
.site-header__actions .btn:first-child:hover {
    background: #1c81a0; /* même bleu que le hover de "Nous contacter" */
    /* texte et bordure inchangés au survol (gardent leur couleur par défaut) */
}
.site-header__actions .btn:last-child:hover {
    background: #1c81a0;
    color: var(--bm-white);
    box-shadow: inset 0 0 0 6px var(--bm-white);
}
.btn--dark {
    background: var(--bm-dark);
    color: var(--bm-white);
    border-color: var(--bm-dark);
}
.btn--dark:hover { background: var(--bm-ink); color: var(--bm-white); }
.btn--outline { background: var(--bm-white); color: var(--bm-ink); }

/* Pile de 2 boutons dans le header — intégrés dans le coin droit du beige.
   Chaque bouton a UN SEUL coin arrondi sur la droite, alignant la courbe
   avec le coin arrondi du beige :
   - ESPACE AVOCAT (haut)  → TOP-RIGHT rounded, bordure noire, fond blanc
   - NOUS CONTACTER (bas) → BOTTOM-RIGHT rounded, fond sombre, sans bordure
   Les côtés gauches restent plats. */
.site-header__actions .btn {
    width: 210px;
    height: auto;
    min-height: 90px;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 0;
    display: flex;
    flex: none;
    line-height: 1.1;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
}
/* Bouton du haut (ESPACE AVOCAT) — gros rounded top-right, bordure épaisse noire complète */
.site-header__actions .btn:first-child {
    border: 6px solid var(--bm-ink);
    background: var(--bm-white);
    color: var(--bm-ink);
    border-top-right-radius: 30px;
}
/* Bouton du bas (NOUS CONTACTER) — inset box-shadow pour la bordure blanche (évite le leak bg) */
.site-header__actions .btn:last-child {
    border: none;
    background: var(--bm-dark);
    color: var(--bm-white);
    border-radius: 0 0 0 30px;
    box-shadow: inset 0 0 0 6px var(--bm-white);
}

/* ============================================================
   CARDS — classe utilitaire pour les coins asymétriques signature
   ============================================================ */
.card {
    position: relative;
    overflow: hidden;
    background: var(--bm-dark);
    color: var(--bm-white);
}
/* variations de coin arrondi — identité visuelle du site */
.card--br { border-bottom-right-radius: var(--r-2xl); }
.card--bl { border-bottom-left-radius:  var(--r-2xl); }
.card--tr { border-top-right-radius:    var(--r-2xl); }
.card--tl { border-top-left-radius:     var(--r-2xl); }

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

/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero {
    padding-top: 40px;
    padding-bottom: 40px;
    background: var(--bm-white);
}
.hero__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-bottom-left-radius: var(--r-2xl);
}
.hero__slide {
    position: relative;
    height: clamp(300px, 32vw, 500px);
    overflow: hidden;
}
.hero__media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: transform 1.2s var(--ease);
}
.swiper-slide-active .hero__media { transform: scale(1); }
.hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 100%);
}
.hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
    text-align: center;
}
.hero__title {
    color: var(--bm-white);
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .02em;
    max-width: 900px;
    margin: 0;
    text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.hero__pagination {
    position: absolute;
    right: var(--sp-7);
    bottom: 30px !important;
    display: flex;
    gap: var(--sp-1);
    z-index: 5;
    width: auto !important;
    left: auto !important;
}
.hero__pagination .swiper-pagination-bullet {
    width: 20px; height: 20px;
    border-radius: var(--r-xl);
    background: rgba(255,255,255,.8);
    opacity: 1;
    transition: var(--t-fast);
}
.hero__pagination .swiper-pagination-bullet:nth-child(1) { background: var(--bm-green); }
.hero__pagination .swiper-pagination-bullet:nth-child(2) { background: var(--bm-blue); }
.hero__pagination .swiper-pagination-bullet:nth-child(3) { background: var(--bm-gold); }
.hero__pagination .swiper-pagination-bullet-active {
    opacity: 0.5;
}

/* ============================================================
   HOME GRID — layout principal de la home
   ============================================================ */
.home-grid {
    padding: 0;
    background: var(--bm-white);
}
/* ┌─────────────┬───────────────────────────┐
   │  LEFT       │  RIGHT-TOP (events | faq) │
   │  search     ├───────────────────────────┤
   │  network    │  RIGHT-BOTTOM             │
   │  news (2)   │  (barreau | formations)   │
   └─────────────┴───────────────────────────┘ */
.home-grid__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: stretch;
}

/* ── LEFT column ── */
.home-grid__left {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.home-grid__item--search  { flex: 0 0 auto; }
.home-grid__item--network { flex: 1 0 auto;     display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* ── RIGHT area (2 rows indépendantes) ── */
.home-grid__right {
    display: grid;
    grid-template-rows: 1fr 220px;
    gap: var(--sp-5);
}
.home-grid__item--events .tile,
.home-grid__item--faq .tile,
.home-grid__item--barreau .tile,
.home-grid__item--formations .tile {
    height: 100%;
}
/* Fallback avant que le JS ajuste dynamiquement (visible 1 frame max) */
.home-grid__item--events .tile,
.home-grid__item--faq .tile { min-height: 400px; }

/* Right TOP : events | faq (events plus large) */
.home-grid__right-top {
    display: grid;
    grid-template-columns: 4fr 3fr;
    gap: var(--sp-5);
    min-height: 0;
}

/* Right BOTTOM : barreau | formations (même largeur, aligné bas) */
.home-grid__right-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    height: 100%;
    align-items: stretch;
}
.home-grid__item--barreau,
.home-grid__item--formations {
    display: flex;
}
.home-grid__item--barreau .tile,
.home-grid__item--formations .tile {
    min-height: 220px;
    height: 100%;
    width: 100%;
}
/* "Découvrez notre barreau" + "Nos formations" : titre centré, 2.3rem / 700 */
.tile--barreau .tile__title,
.tile--formations .tile__title {
    inset: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
}

/* ============================================================
   FIND LAWYER (Trouvez un avocat)
   ============================================================ */
.find-lawyer {
    position: relative;
    background: var(--bm-dark-2);
    color: var(--bm-white);
    padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-8);
    height: 100%;
    min-height: 300px;
    border-bottom-left-radius: var(--r-2xl);
    overflow: hidden;
}
.find-lawyer__brand {
    position: absolute;
    top: var(--sp-6);
    right: var(--sp-8);
    width: 70px;
    height: auto;
    opacity: 1;
    pointer-events: none;
    /* logo conserve ses tons d'origine (ombres visibles) */
}
.find-lawyer__title {
    color: var(--bm-beige);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: var(--sp-10);
    line-height: 1;
    white-space: nowrap;
    padding-right: 90px; /* laisse la place au monogramme */
}
.find-lawyer__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: none;
    width: 100%;
}
.find-lawyer__input,
.find-lawyer__select {
    padding: var(--sp-4) var(--sp-6);
    border: 0;
    border-radius: 999px;
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    background: var(--bm-white);
    color: var(--bm-text);
    height: 56px;
}
.find-lawyer__input {
    width: 100%;
    height: 50px;
    font-size: 1.3rem;
}
.find-lawyer__select {
    width: 70%;
    align-self: flex-end;
}
.find-lawyer__input::placeholder { color: #999; font-style: italic; }
.find-lawyer__select {
    background-color: var(--bm-blue);
    color: var(--bm-white);
    font-weight: var(--fw-semibold);
    font-size: 1.3rem;
    text-align: center;
    appearance: none;
    /* Deux flèches : une à gauche, une à droite */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2 L7 7 L12 2'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2 L7 7 L12 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 24px center, right 24px center;
    background-size: 22px auto, 22px auto; /* chevrons « V » agrandis */
    padding-left: 56px;
    padding-right: 56px;
    cursor: pointer;
}

/* ============================================================
   TILE (cartes d'image avec titre en overlay)
   ============================================================ */
.tile {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--bm-white);
    isolation: isolate;
}
.tile__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s var(--ease);
    z-index: 0;
}
.tile:hover .tile__media { transform: scale(1.06); }
.tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.65) 100%);
    z-index: 1;
}
.tile__overlay--light {
    background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(245,239,226,.7) 100%);
}
.tile__overlay--blue {
    background: linear-gradient(180deg, rgba(26,160,181,.6) 0%, rgba(15,107,124,.85) 100%);
}
.tile__title {
    position: absolute;
    left: var(--sp-6);
    bottom: var(--sp-6);
    right: var(--sp-6);
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    line-height: .95;
    color: var(--bm-white);
    z-index: 2;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.tile__title--dark { color: var(--bm-ink); text-shadow: none; }

.tile--events    {
    border-top-right-radius: var(--r-xl); /* arrondi 48px en haut à droite */
    border-bottom-right-radius: 0;
}
/* "Nos événements" : pas d'overlay (filtre sera dans l'image), titre centré */
.tile--events .tile__overlay { display: none; }
.tile--events .tile__media { background-position: center bottom; } /* image remontée */
.tile--events .tile__title {
    inset: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
}
.tile--faq       { border-bottom-left-radius: var(--r-2xl); border: 13px solid #000000; }
.tile--faq .tile__title {
    color: #000;
    top: var(--sp-6);
    bottom: auto;
    font-size: 2.3rem;
    font-weight: 700;
}
.tile--barreau   { border-bottom-right-radius: var(--r-2xl); }
.tile--formations{ border-top-right-radius: var(--r-2xl); }

/* ============================================================
   NETWORK HEADING (Sur le réseau)
   ============================================================ */
.network-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
}
.network-head__line {
    flex: 0 0 80px;
    height: 5px;
    background: var(--bm-dark);
    border-radius: 2px;
}
.network-head__label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .15em;
    color: var(--bm-ink);
}
.network-head__icon {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast);
}
.network-head__icon img {
    width: 100%;
    height: 100%;
    display: block;
}
.network-head__icon:hover { transform: scale(1.1); }

/* Network grid (images LinkedIn) */
.network-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    margin-top: auto;
}
.network-grid__item {
    display: block;
    aspect-ratio: 1 / 1; /* vignettes LinkedIn carrées (plus grandes que les cartes de droite) */
    overflow: hidden;
    background: #eee;
    align-self: end;
}
.network-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    display: block;
    transition: transform .8s var(--ease);
}
/* ============================================================
   NEWS CARDS (2 vignettes carrées)
   ============================================================ */
.news-card {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
    position: relative;
    border-radius: 0;
}
.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.news-card:hover img { transform: scale(1.06); }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
.section { padding: var(--sp-12) 0; }

/* ============================================================
   FOOTER — conforme maquette : fond sombre, arrondi haut-droit,
   icônes sociales | liens légaux bleu canard | isotype + tagline
   ============================================================ */
.site-footer {
    background: var(--bm-dark);
    color: #d9d9d9;
    border-top-left-radius: var(--r-2xl);
    padding: 1rem;
    margin: var(--container-pad) var(--container-pad) var(--sp-7) var(--container-pad);
    max-width: none;
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: nowrap;
    padding: 0 var(--sp-5) 0 var(--container-pad);
}

/* Icônes sociales — serrées comme sur la maquette */
.site-footer__social {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
    flex-shrink: 0;
}
.social-link {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast);
}
.social-link img {
    width: 100%;
    height: 100%;
    display: block;
}
.social-link:hover { transform: scale(1.1); }

/* Liens légaux — bleu canard, séparés par des tirets */
.footer-menu {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-style: italic;
    letter-spacing: 0.1em;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-menu a {
    color: var(--bm-white);
    transition: color var(--t-fast);
    white-space: nowrap;
}
.footer-menu a.footer-menu__highlight,
.footer-menu .menu-item a.footer-menu__highlight,
.footer-menu li.footer-menu__highlight > a {
    color: #63b1e3;
}
.footer-menu a:hover,
.footer-menu .current-menu-item a {
    color: var(--bm-blue);
}
.footer-menu .footer-sep {
    color: var(--bm-white);
    user-select: none;
    font-style: normal;
}
/* Quand on utilise wp_nav_menu, les tirets ne sont pas là → on les ajoute via CSS */
.footer-menu .menu-item + .menu-item::before {
    content: "-";
    color: var(--bm-white);
    margin-right: var(--sp-2);
}
.footer-menu .menu-item a {
    color: var(--bm-white);
}
.footer-menu .menu-item a:hover,
.footer-menu .menu-item.current-menu-item a {
    color: var(--bm-blue);
}

/* Isotype + Ordre des avocats — l'isotype dépasse au-dessus du footer */
.site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-shrink: 0;
    position: relative;
        margin-right: var(--sp-6);
}
.site-footer__isotype {
    width: 72px;
    height: auto;
    opacity: 1;
}
.site-footer__tagline {
    font-size: var(--fs-xs);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--bm-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1500px) {
    .site-header__logo,
    .site-header__logo img { min-width: 240px; width: 240px; max-width: 240px; }
    .main-menu { gap: var(--sp-6); }
    .main-menu a { font-size: var(--fs-lg); }
    .site-header__oath { font-size: var(--fs-sm); }
    .site-header__actions { min-width: 180px; }
    .site-header__actions .btn { width: 190px; min-height: 82px; height: auto; font-size: var(--fs-base); }
}

@media (max-width: 1300px) {
    .site-header__logo,
    .site-header__logo img { min-width: 200px; width: 200px; max-width: 200px; }
    .main-menu { gap: var(--sp-4); }
    .main-menu a { font-size: var(--fs-base); }
    .site-header__actions { min-width: 160px; }
    .site-header__actions .btn { width: 170px; min-height: 74px; height: auto; font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-3); }
}

@media (max-width: 1200px) {
    .site-header__inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        min-height: 100px;
        padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
    }
    .site-header__logo,
    .site-header__logo img { min-width: 170px; width: 170px; max-width: 170px; }
    .site-header__oath,
    .site-header__nav,
    .site-header__actions { display: none; }
    /* Burger à gauche du logo en mobile */
    .site-header__burger { display: block; grid-row: 1 / 3; grid-column: 1; align-self: center; justify-self: start; margin-right: var(--sp-3); }
    .site-header__logo { grid-column: 2; justify-self: start; }

    .site-header__nav.is-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        grid-column: auto;
        grid-row: auto;
        width: calc(100vw - 2 * var(--container-pad));
        max-width: none;
        background: var(--bm-beige);
        padding: var(--sp-3) 0;
        border-top: 1px solid rgba(0, 0, 0, .08);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        z-index: 100;
    }
    .site-header__nav.is-open .main-menu {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .site-header__nav.is-open .main-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }
    .site-header__nav.is-open .main-menu li:last-child {
        border-bottom: none;
    }
    .site-header__nav.is-open .main-menu a {
        display: block;
        padding: var(--sp-3) var(--sp-5);
        font-size: var(--fs-base);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--bm-ink);
        text-decoration: none;
        transition: background var(--t-fast), color var(--t-fast);
    }
    /* Pas de barre d'underline blanche héritée du menu desktop dans le panneau déroulé */
    .site-header__nav.is-open .main-menu a::after { display: none !important; }
    .site-header__nav.is-open .main-menu a:hover,
    .site-header__nav.is-open .main-menu a:focus {
        background: rgba(0, 0, 0, .04);
        color: var(--bm-blue);
    }
    .site-header__nav.is-open .main-menu .current-menu-item > a,
    .site-header__nav.is-open .main-menu .current-page-ancestor > a {
        color: var(--bm-blue);
    }
    /* « À la une » : couleur ink dans le panneau (sinon blanc hérité de l'accueil → illisible sur beige) */
    .site-header__nav.is-open .main-menu > li:first-child > a { color: var(--bm-ink); }

    /* Sous-menus : en mobile, on les déroule en accordéon ouvert dans le flux
       (et non plus en flyout absolu nowrap qui débordait hors écran). */
    .site-header__nav.is-open .main-menu .sub-menu {
        display: block;
        position: static;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: rgba(0, 0, 0, .035);
        border-radius: 0;
        box-shadow: none;
        z-index: auto;
    }
    .site-header__nav.is-open .main-menu .sub-menu::before { display: none; }
    .site-header__nav.is-open .main-menu .sub-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }
    .site-header__nav.is-open .main-menu .sub-menu li:last-child {
        border-bottom: none;
    }
    .site-header__nav.is-open .main-menu .sub-menu a {
        white-space: normal;
        padding: var(--sp-2) var(--sp-5) var(--sp-2) calc(var(--sp-5) + var(--sp-4));
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.3;
    }

    /* Boutons CTA repris en bas du menu mobile ouvert */
    .site-header__nav.is-open .site-header__nav-cta {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        padding: var(--sp-4) var(--sp-5) var(--sp-3);
        border-top: 1px solid rgba(0, 0, 0, .08);
    }
    .site-header__nav.is-open .site-header__nav-cta .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 1024px) {
    .home-grid__inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .home-grid__right-top,
    .home-grid__right-bottom {
        grid-template-columns: 1fr 1fr;
    }
    .home-grid__item--events,
    .home-grid__item--faq { min-height: 320px; }
    .home-grid__item--barreau .tile,
    .home-grid__item--formations .tile { min-height: 260px; }
    .hero__pagination { right: var(--sp-5); bottom: var(--sp-5); }
}

@media (max-width: 760px) {
    /* Mobile : grille aplatie en une seule colonne, tuiles ordonnées librement
       (la tuile LinkedIn « Sur le réseau » passe après « Nos formations »). */
    .home-grid__inner {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }
    .home-grid__left,
    .home-grid__right,
    .home-grid__right-top,
    .home-grid__right-bottom {
        display: contents;
    }
    .home-grid__item--search     { order: 1; }
    .home-grid__item--events     { order: 2; }
    .home-grid__item--faq        { order: 3; }
    .home-grid__item--barreau    { order: 4; }
    .home-grid__item--formations { order: 5; }
    .home-grid__item--network    { order: 6; } /* LinkedIn après « Nos formations » */
    /* Flux LinkedIn : vignettes empilées (1 par ligne) sur mobile */
    .network-grid { grid-template-columns: 1fr; }
    .home-grid__item {
        min-width: 0;
        width: 100%;
    }
    .home-grid__right { justify-content: flex-start; }
    .home-grid__right-bottom { margin-top: 0; }
    .home-grid__item--barreau .tile,
    .home-grid__item--formations .tile { min-height: 160px; }
    /* Même hauteur que "Découvrez notre barreau" sur mobile */
    .home-grid__item--events,
    .home-grid__item--faq { min-height: 160px; }
    .home-grid__item--events .tile,
    .home-grid__item--faq .tile { min-height: 160px; }
    /* Sur mobile, l'arrondi de "Nos événements" passe en haut-droite */
    .tile--events {
        border-bottom-right-radius: 0;
        border-top-right-radius: var(--r-2xl);
    }
    .find-lawyer {
        padding: var(--sp-6);
        padding-bottom: var(--sp-4);
        min-height: 0;
    }
    /* Masquer le logo Bb sur mobile */
    .find-lawyer__brand { display: none; }
    /* Titre : éviter le débordement (le logo est masqué → plus besoin du padding-right) */
    .find-lawyer__title {
        font-size: 1.8rem;
        white-space: normal;
        padding-right: 0;
        margin-bottom: var(--sp-6);
    }
    /* Le select prend toute la largeur pour que le libellé ne soit pas coupé */
    .find-lawyer__select { width: 100%; }
    .hero__slide { height: 420px; }
    /* Footer empilé : réseaux → menu → logo, centrés (évite le débordement du logo à droite) */
    .site-footer__inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: var(--sp-4);
        padding: var(--sp-4) 0 0;
    }
    .footer-menu { justify-content: center; }
    .site-footer__brand { top: 0; }
}

@media (max-width: 900px) {
    .container--narrow {
        max-width: 92%;
        box-sizing: border-box;
    }
    .page-content--narrow {
        max-width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    :root { --container-pad: 20px; }
    .container--narrow {
        max-width: 100%;
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }
    .page-content--narrow {
        max-width: 100%;
        margin-left: 0;
    }
    .site-footer__inner { justify-content: center; text-align: center; }
    .footer-menu { justify-content: center; }
}


/* ── Find lawyer custom dropdown (homepage) ──────────────────────────── */
.find-lawyer__dd {
    position: relative;
    margin-top: var(--sp-3);
    z-index: 1;
}
.find-lawyer__dd[data-open="true"] { z-index: 9999; }
/* Trigger keeps the original .find-lawyer__select look (blue pill, 2 chevrons) */
.find-lawyer__dd-trigger {
    display: block;
    width: 70%;
    min-width: 320px;
    max-width: 100%;
    margin-left: auto;
    padding: 0 56px;
    height: 50px;
    background-color: rgb(28, 129, 160);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2 L7 7 L12 2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2 L7 7 L12 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 24px 50%, calc(100% - 24px) 50%;
    border: none;
    border-radius: 999px;
    color: var(--bm-white);
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease;
}
.find-lawyer__dd-trigger:hover { background-color: rgb(20, 110, 140); }
.find-lawyer__dd-trigger:focus-visible { outline: 2px solid var(--bm-white); outline-offset: 2px; }
.find-lawyer__dd-label { display: inline; }
/* Hide the single inline SVG chevron — we use the two background triangles instead */
.find-lawyer__dd-chevron { display: none; }

/* Modern dropdown panel */
.find-lawyer__dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: 70%;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bm-white);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 6px;
}

/* Mobile : champ Spécialités pleine largeur (comme le champ Nom) */
@media (max-width: 760px) {
    .find-lawyer__dd-trigger { width: 100%; min-width: 0; }
    .find-lawyer__dd-panel { width: 100%; left: 0; right: 0; }
}
.find-lawyer__dd-panel[hidden] { display: none; }
.find-lawyer__dd-panel li { list-style: none; }
.find-lawyer__dd-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    text-align: left;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--bm-ink);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    line-height: 1.35;
}
.find-lawyer__dd-option:hover,
.find-lawyer__dd-option:focus-visible {
    background: var(--bm-beige);
    outline: none;
}
.find-lawyer__dd-option.is-active {
    background: rgb(28, 129, 160);
    color: var(--bm-white);
    font-weight: var(--fw-bold);
}
.find-lawyer__dd-panel::-webkit-scrollbar { width: 8px; }
.find-lawyer__dd-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }
.find-lawyer__dd-panel::-webkit-scrollbar-track { background: transparent; }

/* Allow dropdown to overflow the search card and stack above siblings */
.find-lawyer.card { overflow: visible; position: relative; z-index: 9999; }


/* ============================================================
   CONTACT FORM 7 — Style global (s'applique sur toutes les pages)
   ============================================================ */
.wpcf7-form p {
    margin-bottom: var(--sp-3);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--bm-dark);
    background: transparent;
    padding: var(--sp-2) 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-light);
    letter-spacing: 0.05em;
    color: var(--bm-text);
    outline: none;
    transition: border-color var(--t-fast);
    border-radius: 0;
    -webkit-appearance: none;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-bottom-color: var(--bm-blue);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--bm-text);
    opacity: 1;
}
.wpcf7-form textarea {
    min-height: 80px;
    height: 80px;
    resize: vertical;
}
.wpcf7-form .wpcf7-submit {
    display: block;
    margin: var(--sp-6) 0 0 auto;
    background: var(--bm-dark);
    color: var(--bm-white);
    border: none;
    padding: var(--sp-3) var(--sp-10);
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    cursor: pointer;
    border-radius: 0 var(--r-lg) 0 0;
    transition: background var(--t-fast);
}
.wpcf7-form .wpcf7-submit:hover {
    background: var(--bm-blue);
}


/* ============================================================
   Fil d'ariane collé au bord gauche partout
   (pas de recentrage / plafond sur très grand écran ; gauche à --container-pad)
   ============================================================ */
.breadcrumb.container-full,
.breadcrumb > .container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/* Masquer le badge reCAPTCHA v3 (mention légale affichée près des formulaires) */
.grecaptcha-badge { visibility: hidden !important; }

/* Mention reCAPTCHA discrète sous les formulaires */
.form-recaptcha-note {
    margin: 10px 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #9aa0a6;
}
.form-recaptcha-note a {
    color: #9aa0a6;
    text-decoration: underline;
}

/* Lien overlay du slider hero : rend tout le slide cliquable */
.hero__link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
}