/* ══════════════════════════════════════════════════════════════════════════
   Page « Médecin libéral ou mixte » — /medecin-liberal-ou-mixte/ (page 1830)
   Première page du menu « Je suis… » (19/10/2026). Hero, sections et CTA
   final réutilisent les composants de la page Aide juridique (juridique.css) :
   ce fichier n'ajoute que la colonne de lecture et les cartes de combats.
   ══════════════════════════════════════════════════════════════════════════ */

/* Colonne de lecture : les sections juridique plafonnent à 1120px, trop large
   pour du texte suivi. */
.jm-liberal-prose > *,
.jm-liberal-prose > .wp-block-group__inner-container > * {
    max-width: 760px;
}

.jm-liberal-prose h2 {
    font-size: var(--jm-text-2xl);
    line-height: var(--jm-lh-titre);
    font-weight: var(--jm-weight-strong);
    color: var(--jm-blue-cta);
    text-wrap: balance;
    margin-top: var(--jm-space-12);
    margin-bottom: var(--jm-space-4);
}

.jm-liberal-prose h2:first-child,
.jm-liberal-prose h3:first-child {
    margin-top: 0;
}

/* Bandes blanches en alternance avec le fond de page (#edf2f8) : la page
   était un seul long bloc, Loubna demandait des sections visibles (19/10). */
.jm-liberal-blanc {
    background-color: var(--jm-fond-carte);
}

.jm-liberal-prose p,
.jm-liberal-prose li {
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-long);
    color: var(--jm-texte-corps);
    text-wrap: pretty;
}

.jm-liberal-prose strong {
    color: var(--jm-ink);
}

.jm-liberal-prose .wp-block-buttons {
    margin-top: var(--jm-space-6);
}

/* Les shortcodes (partenaires, FAQ, slider) ont leur propre largeur. */
.jm-liberal-prose > .jm-liberal-large,
.jm-liberal-prose > .wp-block-group__inner-container > .jm-liberal-large {
    max-width: 1120px;
}

/* ── Combats : une carte dépliable par combat (bloc Détails natif) ────────── */

.jm-liberal-combats {
    display: grid;
    gap: var(--jm-space-3);
    margin-top: var(--jm-space-8);
    margin-bottom: var(--jm-space-8);
}

.jm-liberal-combat {
    background: var(--jm-fond-carte);
    border: 1px solid var(--jm-line);
    border-radius: var(--jm-radius-lg);
    padding: var(--jm-space-5) var(--jm-space-6);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.jm-liberal-combat[open] {
    border-color: rgba(8, 89, 142, 0.35);
    box-shadow: 0 6px 24px rgba(8, 89, 142, 0.08);
}

.jm-liberal-combat summary {
    cursor: pointer;
    font-size: var(--jm-text-lg);
    font-weight: var(--jm-weight-strong);
    line-height: var(--jm-lh-titre);
    color: var(--jm-ink);
    list-style: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--jm-space-4);
}

/* Triangle natif masqué des deux façons : ::marker (Chrome, Firefox) et le
   pseudo-élément WebKit (Safari), sinon il double le « + ». */
.jm-liberal-combat summary::marker {
    content: "";
}

.jm-liberal-combat summary::-webkit-details-marker {
    display: none;
}

/* Le site pose un « ▶ » en ::before sur tous les summary : ici le « + » suffit. */
.jm-liberal-combat summary::before {
    content: none;
}

.jm-liberal-combat summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--jm-fond-section);
    color: var(--jm-blue);
    font-weight: var(--jm-weight-strong);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.jm-liberal-combat[open] summary::after {
    transform: rotate(45deg);
    background: var(--jm-blue);
    color: var(--jm-texte-inverse);
}

.jm-liberal-combat > *:not(summary) {
    margin-top: var(--jm-space-4);
}

/* « Notre position » : la phrase à retenir de chaque combat. */
.jm-liberal-position {
    border-left: 3px solid var(--jm-blue);
    background: var(--jm-cyan);
    border-radius: 0 10px 10px 0;
    padding: var(--jm-space-3) var(--jm-space-4);
}

@media (max-width: 781px) {
    .jm-liberal-combat {
        padding: var(--jm-space-4);
    }
    .jm-liberal-combat summary {
        font-size: var(--jm-text-base);
    }
}

/* ── Slider « Nos combats en actions » ────────────────────────────────────── */
/* Dans la colonne de lecture, 3 cartes par vue tombent à ~235 px : trop
   étroit (Fred, 19/10/2026). 2 cartes sur grand écran ; sur mobile, 1 carte
   et l'amorce de la suivante à droite pour signaler qu'on peut faire défiler. */
.jm-liberal-prose .jm-actualites-slider {
    --jm-slider-per-view: 2;
}

@media (max-width: 781px) {
    .jm-liberal-prose .jm-actualites-slider {
        --jm-slider-per-view: 1.15;
    }
}

/* ── Hero « 5 bonnes raisons » (Fred, 19/10/2026) ─────────────────────────── */
/* La phrase de Loubna passe en sous-titre : plus grande qu'un chapô ordinaire. */
.jm-liberal-hero__chapo {
    font-size: var(--jm-text-xl);
    font-weight: var(--jm-weight-accent);
    color: var(--jm-texte-inverse);
    text-wrap: balance;
}

/* Les 5 raisons en pastilles numérotées, chacune mène à sa section. */
.jm-liberal-raisons {
    list-style: none;
    counter-reset: raison;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--jm-space-3);
    padding: 0;
    margin: var(--jm-space-8) auto var(--jm-space-10);
    max-width: 820px;
}

.jm-liberal-raisons li {
    counter-increment: raison;
    margin: 0;
}

.jm-liberal-raisons a {
    display: inline-flex;
    align-items: center;
    gap: var(--jm-space-2);
    padding: var(--jm-space-2) var(--jm-space-4) var(--jm-space-2) var(--jm-space-2);
    border-radius: var(--jm-radius-pill);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--jm-texte-inverse);
    font-size: var(--jm-text-sm);
    font-weight: var(--jm-weight-accent);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.jm-liberal-raisons a::before {
    content: counter(raison);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--jm-texte-inverse);
    color: var(--jm-blue-cta);
    font-size: var(--jm-text-xs);
    font-weight: var(--jm-weight-strong);
}

.jm-liberal-raisons a:hover {
    background: rgba(255, 255, 255, 0.2);
}

.jm-liberal-raisons a:focus-visible {
    outline: 3px solid var(--jm-cyan);
    outline-offset: 2px;
}

@media (max-width: 781px) {
    .jm-liberal-raisons {
        flex-direction: column;
        align-items: stretch;
    }
    .jm-liberal-raisons a {
        width: 100%;
    }
}

/* La grille du hero juridique espace ses enfants de 48 px : trop pour un titre,
   un sous-titre et des pastilles qui se lisent d'un bloc. */
.jm-juridique-hero__inner:has(.jm-liberal-raisons) > .wp-block-group__inner-container,
.jm-juridique-hero__inner:has(.jm-liberal-raisons) {
    gap: var(--jm-space-5);
}

.jm-liberal-hero__chapo {
    margin-top: 0;
    margin-bottom: 0;
}

.jm-liberal-raisons a {
    text-align: left;
}

@media (max-width: 781px) {
    .jm-liberal-hero__chapo {
        font-size: var(--jm-text-lg);
    }
}

/* ── Visuels de Loubna (Drive, 19/10) ─────────────────────────────────────
   Couverture « Dis JM, c'est quoi ? » à droite du texte dans les cartes de
   combat, carrousel URPS et programme en grilles. Clic = agrandissement
   (lightbox native de l'image Gutenberg). */
.jm-liberal-combat .jm-liberal-combat__visuel {
    float: right;
    width: 220px;
    margin: var(--jm-space-4) 0 var(--jm-space-4) var(--jm-space-6);
}

.jm-liberal-combat .jm-liberal-combat__visuel img,
.jm-liberal-urps img,
.jm-liberal-programme img {
    border-radius: var(--jm-radius-md);
    display: block;
}

.jm-liberal-combat[open]::after {
    content: "";
    display: block;
    clear: both;
}

.jm-liberal-urps {
    clear: both;
    margin-top: var(--jm-space-6);
}

/* WordPress calcule la largeur des colonnes avec cette variable : la changer
   elle plutôt que `gap` seul, sinon 5 colonnes débordent et passent à 4. */
.jm-liberal-prose .jm-liberal-urps.wp-block-gallery,
.jm-liberal-prose .jm-liberal-programme.wp-block-gallery {
    --wp--style--unstable-gallery-gap: var(--jm-space-3);
    gap: var(--jm-space-3);
}

/* Pas d'image étirée sur une dernière ligne incomplète. */
.jm-liberal-prose .wp-block-gallery.jm-liberal-urps > figure.wp-block-image,
.jm-liberal-prose .wp-block-gallery.jm-liberal-programme > figure.wp-block-image {
    flex-grow: 0;
}

@media (max-width: 781px) {
    .jm-liberal-combat .jm-liberal-combat__visuel {
        float: none;
        width: 100%;
        max-width: 280px;
        margin: var(--jm-space-4) auto;
    }

    /* 5 colonnes illisibles sur téléphone : 2 colonnes. */
    .jm-liberal-prose .wp-block-gallery.jm-liberal-urps > figure.wp-block-image,
    .jm-liberal-prose .wp-block-gallery.jm-liberal-programme > figure.wp-block-image {
        width: calc(50% - var(--jm-space-3) / 2) !important;
    }
}