/* ============================================================
   PAGE : Page de contenu (blocs flexibles)
   ============================================================ */

.page-content {
    padding-bottom: var(--sp-12);
}

/* Fil d'Ariane : padding container (écrase le .breadcrumb global qui force padding-left:0) */
.page-content .breadcrumb {
    padding: var(--sp-3) var(--container-pad) var(--sp-2);
}

/* Container narrow décalé comme Notre Barreau */
.page-content .container--narrow {
    max-width: none;
    margin-left: 11%;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* Titre + barre soulignée (identique Notre Barreau) */
.page-content__title.container-full {
    padding-left: calc(var(--container-pad) + 30px);
    padding-right: var(--container-pad);
}
.page-content__title {
    font-family: var(--ff-sans);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.07em;
    line-height: 0.85;
    color: var(--bm-ink);
    margin-top: 0;
    margin-bottom: var(--sp-8);
    font-style: normal;
}
/* Titre — span inline-block, trait calé en bas à droite du texte (comme Formations) */
.page-content__title-inner {
    display: inline-block;
    position: relative;
    padding-bottom: calc(17px + var(--sp-4));
    /* largeur du trait : plafond par défaut, surchargée en JS = min(largeur dernière ligne, plafond)
       pour que le trait ne déborde jamais la dernière ligne (mot court type « DROIT ») */
    --pc-trait-w: 220px;
}
.page-content__title-inner::after {
    content: "";
    /* trait calé sous la FIN de la dernière ligne (bord droit du trait = fin du texte) ;
       en flux inline pour suivre le texte même sur un titre multi-lignes, titre gardé à gauche */
    display: inline-block;
    vertical-align: baseline;
    width: var(--pc-trait-w, 220px);
    margin-left: calc(-1 * var(--pc-trait-w, 220px));
    height: 17px;
    background: var(--bm-ink);
    transform: translateY(0.42em);
}
/* Ancien trait (bloc à gauche) désactivé */
.page-content__title::after { display: none; }

/* ── Body : enchaînement vertical des blocs ── */
.page-content__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

/* ── CTA déposer offre / envoyer CV — style copié du header ── */
.page-content__cta-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--sp-4);
    margin: 0;
    flex-wrap: wrap;
}
.page-content__cta {
    width: 210px;
    min-height: 90px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    white-space: normal;
    transition: background var(--t-fast), color var(--t-fast);
}
/* "Déposez une offre" — style sombre (NOUS CONTACTER) */
.page-content__cta--filled {
    border: 6px solid var(--bm-dark);
    background: var(--bm-dark);
    color: var(--bm-white);
    border-radius: 0 0 0 30px;
}
.page-content__cta--filled:hover {
    background: #000;
    color: var(--bm-white);
}
/* "Envoyez votre CV" — style outline (ESPACE AVOCAT) */
.page-content__cta--outline {
    border: 6px solid var(--bm-ink);
    background: var(--bm-white);
    color: var(--bm-ink);
    border-radius: 0 30px 0 0;
}
.page-content__cta--outline:hover {
    background: var(--bm-ink);
    color: var(--bm-white);
}

/* ── Liste des offres d'emploi (page "intégrer le barreau") ── */
.page-content__offres {
    margin-top: 0;
}
.page-content__offres-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--bm-ink, #3b4242);
    margin: var(--sp-8) 0 var(--sp-5);
}
.offres-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.offres-list__item { margin: 0; }
.offre-item {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color var(--t-fast);
}
.offre-item:hover .offre-item__title {
    color: var(--bm-blue, #1d4f9c);
}
.offre-item__title {
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bm-ink, #3b4242);
    margin: 0 0 var(--sp-1);
    transition: color var(--t-fast);
}
.offre-item__excerpt {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--bm-text, #3b4242);
    margin: 0;
    font-weight: var(--fw-light, 300);
}

/* ── Rich-text commun à tous les blocs ── */
.rich-text {
    font-size: var(--fs-sm);
    line-height: 1.7;
    letter-spacing: 0.03em;
    font-weight: var(--fw-light);
    color: var(--bm-text);
}
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child  { margin-bottom: 0; }
.rich-text p { margin: 0 0 var(--sp-4); }
.rich-text strong { font-weight: var(--fw-bold); }
.rich-text em { font-style: italic; }
.rich-text a {
    color: var(--bm-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rich-text h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.05;
    color: var(--bm-ink);
    margin: var(--sp-6) 0 var(--sp-3);
}
.rich-text h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    color: var(--bm-ink);
    margin: var(--sp-5) 0 var(--sp-2);
}
.rich-text ul,
.rich-text ol {
    margin: 0 0 var(--sp-4);
    padding-left: var(--sp-5);
}
/* Restaure les marqueurs supprimés par le reset global « ul, ol { list-style: none } » */
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text ul ul { list-style: circle; }
.rich-text ul ul ul { list-style: square; }
.rich-text li { margin: 0 0 var(--sp-2); }
.rich-text blockquote {
    border-left: 4px solid var(--bm-ink);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    margin: var(--sp-5) 0;
    font-style: italic;
    color: var(--bm-text-muted);
}

/* ── Images dans les blocs rich-text + alignements WordPress ──
   Les images insérées via l'éditeur portent une classe align* (aligncenter,
   alignleft, alignright). Elles sont souvent enveloppées dans un élément
   inline (<strong>, <em>, <a>) qui empêche margin:auto de centrer : on force
   alors ce wrapper en bloc. */
.rich-text img {
    max-width: 100%;
    height: auto;
}
.rich-text figure { margin: var(--sp-5) 0; }
.rich-text figcaption {
    font-size: var(--fs-xs);
    font-style: italic;
    color: var(--bm-text-muted);
    text-align: center;
    margin-top: var(--sp-2);
}

/* Centré */
.rich-text img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.rich-text figure.aligncenter {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.rich-text :is(strong, em, a):has(> img.aligncenter) {
    display: block;
    text-align: center;
}

/* Aligné à gauche / droite (le texte habille l'image) */
.rich-text img.alignleft,
.rich-text figure.alignleft,
.rich-text :is(strong, em, a):has(> img.alignleft) {
    float: left;
    max-width: 50%;
    margin: var(--sp-1) var(--sp-5) var(--sp-3) 0;
}
.rich-text img.alignright,
.rich-text figure.alignright,
.rich-text :is(strong, em, a):has(> img.alignright) {
    float: right;
    max-width: 50%;
    margin: var(--sp-1) 0 var(--sp-3) var(--sp-5);
}

/* Empêche le contenu suivant de chevaucher une image flottée */
.rich-text::after {
    content: "";
    display: block;
    clear: both;
}

/* ── Lecteurs vidéo (YouTube, Vimeo…) collés en dur dans le contenu ──
   Les iframes brutes gardent leur largeur fixe (ex. 500px) et restent collées
   à gauche : on les passe en pleine largeur, centrées, ratio 16:9. */
.rich-text iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.rich-text iframe[src*="youtube"],
.rich-text iframe[src*="youtu.be"],
.rich-text iframe[src*="vimeo"],
.rich-text iframe[src*="dailymotion"] {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* ── Bloc TEXTE simple ── */
.pc-block--text { max-width: none; }

/* ── Bloc 2 COLONNES ── */
.pc-block--columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
}

/* ── Bloc 3 COLONNES ── */
.pc-block--columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7);
}

/* ── Bloc 4 COLONNES ── */
.pc-block--columns-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
}

/* ── Bloc TEXTE + IMAGE ── */
.pc-block--text-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}
.pc-block--text-image--left .pc-block__media  { order: 1; }
.pc-block--text-image--left .pc-block__text   { order: 2; }
.pc-block--text-image--right .pc-block__text  { order: 1; }
.pc-block--text-image--right .pc-block__media { order: 2; }
.pc-block__media img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom-left-radius: var(--r-2xl);
}
.pc-block--text-image--left .pc-block__media img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--r-2xl);
}

/* ── Bloc IMAGE PLEINE ── */
.pc-block--image-full {
    margin: 0;
}
.pc-block--image-full img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom-left-radius: var(--r-2xl);
}
.pc-block__caption {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--bm-text-muted);
    letter-spacing: 0.05em;
    text-align: center;
}

/* ── Fallback si pas de blocs : contenu WordPress natif ── */
.page-content__fallback { max-width: 920px; }

/* Pages « domaine » + FAQ : le contenu remplit toute la largeur du conteneur (pas de bride à 920px) */
.single-gws_domaine .page-content__fallback,
.single-gws_faq .page-content__fallback { max-width: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .page-content__title { font-size: clamp(2.5rem, 5vw, 4.5rem); }
    .page-content__title-inner { --pc-trait-w: 150px; }
    .page-content__title-inner::after { transform: translateY(0.62em); }
    .page-content .container--narrow { margin-left: auto; }

    .pc-block--columns,
    .pc-block--text-image {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .pc-block--columns-3 {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
    .pc-block--columns-4 {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
    /* Image toujours au-dessus du texte sur mobile */
    .pc-block--text-image--left .pc-block__media,
    .pc-block--text-image--right .pc-block__media { order: 1; }
    .pc-block--text-image--left .pc-block__text,
    .pc-block--text-image--right .pc-block__text { order: 2; }
}

@media (max-width: 600px) {
    .page-content__title { font-size: 2.2rem; }
    .page-content__title-inner {
        padding-bottom: calc(10px + var(--sp-2));
    }
    .page-content__title-inner { --pc-trait-w: 110px; }
    .page-content__title-inner::after {
        height: 10px;
        transform: translateY(0.62em);
    }
    .page-content__title.container-full {
        padding-left: var(--container-pad);
    }
    .page-content__body { gap: var(--sp-7); }
    .pc-block--columns-3,
    .pc-block--columns-4 {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}


/* Grilles d’images (3/4 colonnes, ex. couvertures JBM) : les images remplissent la colonne */
.pc-block--columns-3 .pc-block__col img,
.pc-block--columns-4 .pc-block__col img {
    width: 100%;
    height: auto;
}
.pc-block--columns-3 .pc-block__col p a,
.pc-block--columns-4 .pc-block__col p a {
    display: block;
}