/* ══════════════════════════════════════════════════════════════════════════
   Page publique « Aide juridique » — /aide-juridique/
   Teaser de conversion vers /adherer/. Template : JM — Pleine largeur.
   Les cartes du carrousel réutilisent le composant .jm-actualites-slider
   (CSS de structure dans patterns.css) ; seul l'habillage est ici.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.jm-juridique-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--jm-blue-cta);
    color: var(--jm-texte-inverse);
    padding-top: var(--jm-space-16);
    padding-bottom: var(--jm-space-16);
    padding-left: var(--jm-space-6);
    padding-right: var(--jm-space-6);
}

/* Filigrane « M » — purement décoratif, masqué aux lecteurs d'écran. */
.jm-juridique-hero::before {
    content: "M";
    position: absolute;
    left: -40px;
    bottom: -140px;
    /* Exception assumée : le « M » est un motif graphique, pas du texte.
       Aucun palier de l'échelle ne monte à 340px, et l'interligne doit rester
       à 1 pour que la lettre ne creuse pas sa boîte. Seule la graisse suit. */
    font-size: 340px;
    line-height: 1;
    font-weight: var(--jm-weight-strong);
    color: var(--jm-texte-inverse);
    opacity: 0.04;
    pointer-events: none;
}

/* Gutenberg glisse un .wp-block-group__inner-container entre chaque groupe et
   ses enfants. Poser la grille sur le groupe lui-même ne marche donc pas : il
   n'a qu'un seul enfant. C'est le conteneur interne qu'il faut viser. */
.jm-juridique-hero__inner > .wp-block-group__inner-container {
    display: grid;
    /* minmax(0, …) et pas 1.25fr seul : un élément de grille a min-width:auto,
       donc il refuse de descendre sous son contenu minimum et fait déborder la
       page au lieu de rétrécir. Ceinture, au cas où une règle responsive
       tomberait à côté — c'est exactement ce qui est arrivé ici. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--jm-space-12);
    align-items: center;
}

.jm-juridique-hero__inner {
    position: relative;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.jm-juridique-hero__surtitre {
    margin: 0 0 var(--jm-space-4);
    font-size: var(--jm-text-xs);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: var(--jm-weight-accent);
    color: var(--jm-blue-bright);
}

/* Le palier display est un clamp() : il porte lui-même la réduction mobile.
   Les deux media queries qui redescendaient ce titre (1024px et 781px) ont
   donc été supprimées — un seul endroit décide désormais de sa taille. */
.jm-juridique-hero__titre {
    margin: 0;
    font-size: var(--jm-display-md);
    line-height: var(--jm-lh-display);
    font-weight: var(--jm-weight-strong);
    text-transform: uppercase;
    letter-spacing: -0.4px;
    color: var(--jm-texte-inverse);
}

/* Ligne d'accent sous le titre — le geste qui structure sans illustration.
   En pseudo-élément : évite une div vide, impossible à produire en Gutenberg. */
.jm-juridique-hero__titre::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background-color: var(--jm-blue-bright);
    margin-top: var(--jm-space-6);
    margin-bottom: var(--jm-space-5);
}

.jm-juridique-hero__chapo {
    margin: 0 0 var(--jm-space-8);
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-corps);
    color: var(--jm-texte-inverse-corps);   /* cran 2 — 4,6 */
    max-width: 46ch;
}

/* ── Encart de preuve ─────────────────────────────────────────────────────── */

.jm-juridique-preuve {
    background-color: var(--jm-news-blue-dark);   /* 1,7 */
    border: 1px solid var(--jm-news-blue);   /* 2,2 */
    border-radius: var(--jm-radius-lg);
    padding: var(--jm-space-7) var(--jm-space-7);
}

.jm-juridique-preuve__label {
    margin: 0 0 var(--jm-space-4);
    font-size: var(--jm-text-2xs);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: var(--jm-weight-accent);
    color: var(--jm-texte-inverse-meta);   /* cran 3 — 3,9 · contraste 5,10 -> 5,73 */
}

/* Arbitrage Fred du 19/08/2026 : le chiffre rejoint l'échelle plutôt que de
   rester une exception. Conséquence assumée — il grossit sur desktop (72px au
   lieu de 64) et maigrit sur mobile (40px au lieu de 52), le clamp remplaçant
   la media query qui portait le 52px. */
.jm-juridique-preuve__chiffre {
    margin: 0;
    font-size: var(--jm-display-xl);
    line-height: var(--jm-lh-display);
    font-weight: var(--jm-weight-strong);
    color: var(--jm-blue-bright);
}

.jm-juridique-preuve__legende {
    margin: var(--jm-space-3) 0 var(--jm-space-5);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
    color: var(--jm-texte-inverse-corps);   /* cran 2 — 5,0 */
}

.jm-juridique-preuve__liste {
    list-style: none;
    margin: 0;
    padding-top: var(--jm-space-4);
    padding-left: 0;
    border-top: 1px solid var(--jm-news-blue);   /* 2,2 */
}

.jm-juridique-preuve__liste li {
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
    color: var(--jm-texte-inverse-meta);   /* cran 3 — 3,7 */
    margin-bottom: var(--jm-space-2);
}

.jm-juridique-preuve__liste li:last-child {
    margin-bottom: 0;
    /* Cran 4. ⚠️ La valeur MONTE : #5f8fbd avait un contraste de 3,30 sur le
       bleu du bloc, elle échouait AA. Le cran est à 4,62. Le fondu de fin de
       liste survit — 5,9 d'écart avec le cran 3 juste au-dessus. */
    color: var(--jm-texte-inverse-discret);   /* 8,7 — relèvement assumé */
}

/* ── Cartes du carrousel « Vos situations » ───────────────────────────────── */

.jm-juridique-card {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background-color: var(--jm-fond-carte);
    border-radius: var(--jm-radius-lg);
    padding: var(--jm-space-5) var(--jm-space-5);
    box-shadow: 0 4px 6px hsla(0, 0%, 0%, 0.06), 0 2px 4px hsla(0, 0%, 0%, 0.04);
}

/* L'icône reste à 24px et c'est le carré coloré qui occupe la place :
   agrandir une icône dessinée pour 24px la rendrait lourdaude. */
.jm-juridique-card__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--jm-radius-md);
    background-color: var(--jm-cyan);
    color: var(--jm-blue);
    margin-bottom: var(--jm-space-4);
}

/* Rotation des accents de la palette (tokens.css) : huit cartes toutes bleues
   donnaient un mur monochrome. La couleur ne code rien ici, elle rythme. */
.jm-juridique-card:nth-child(4n+2) .jm-juridique-card__icone {
    background-color: var(--jm-mint);
    color: var(--jm-green-deep);   /* 2,2 — le vert des pastels décoratifs */
}

.jm-juridique-card:nth-child(4n+3) .jm-juridique-card__icone {
    background-color: var(--jm-sand);
    /* --jm-warn est documenté « texte d'avertissement, fond --jm-sand » :
       c'est exactement ce rôle. 10,0 d'écart, arbitrage de Fred — le
       contraste monte de 4,67 à 6,52. */
    color: var(--jm-warn);
}

.jm-juridique-card:nth-child(4n+4) .jm-juridique-card__icone {
    background-color: var(--jm-rose);
    color: var(--jm-rose-text);
}

.jm-juridique-card__titre {
    margin: 0 0 var(--jm-space-3);
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-titre);
    font-weight: var(--jm-weight-accent);
    text-transform: uppercase;
    color: var(--jm-blue-cta);
}

.jm-juridique-card__question {
    margin: 0 0 var(--jm-space-3);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-dense);
    font-weight: var(--jm-weight-accent);
    color: var(--jm-blue-cta);
}

.jm-juridique-card__texte {
    margin: 0 0 var(--jm-space-4);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
    color: var(--jm-texte-corps);
}

.jm-juridique-card__retenir {
    margin: 0 0 var(--jm-space-4);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
    color: var(--jm-blue-cta);
    background-color: var(--jm-cyan);
    border-radius: var(--jm-radius-sm);
    padding: var(--jm-space-3) var(--jm-space-4);
}

/* Pousse le lien en bas : les cartes n'ont pas le même volume de texte,
   les CTA doivent malgré tout s'aligner d'une carte à l'autre. */
.jm-juridique-card__lien {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--jm-space-2);
    font-size: var(--jm-text-sm);
    font-weight: var(--jm-weight-accent);
    color: var(--jm-blue-text);
    text-decoration: none;
}

.jm-juridique-card__lien:hover,
.jm-juridique-card__lien:focus-visible {
    color: var(--jm-blue);
    text-decoration: underline;
}

/* ── Cas pratique / Événement / blocs secondaires ─────────────────────────── */

.jm-juridique-cas,
.jm-juridique-event {
    background-color: var(--jm-fond-carte);
    border-radius: var(--jm-radius-lg);
    border-left: 4px solid var(--jm-violet);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: var(--jm-space-7) var(--jm-space-8);
}

.jm-juridique-event {
    border-left-color: var(--jm-blue-bright);
}

.jm-juridique-cas__surtitre,
.jm-juridique-event__surtitre {
    margin: 0 0 var(--jm-space-3);
    font-size: var(--jm-text-xs);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: var(--jm-weight-accent);
    color: var(--jm-violet);
}

.jm-juridique-event__surtitre {
    color: var(--jm-blue-text);
}

.jm-juridique-cas__titre,
.jm-juridique-event__titre {
    margin: 0 0 var(--jm-space-3);
    font-size: var(--jm-text-xl);
    line-height: var(--jm-lh-titre);
    font-weight: var(--jm-weight-strong);
    color: var(--jm-blue-cta);
}

.jm-juridique-cas__titre a,
.jm-juridique-event__titre a {
    color: inherit;
    text-decoration: none;
}

.jm-juridique-cas__titre a:hover,
.jm-juridique-event__titre a:hover {
    text-decoration: underline;
}

.jm-juridique-cas__extrait {
    margin: 0 0 var(--jm-space-5);
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-long);
    color: var(--jm-texte-corps);
}

.jm-juridique-event__meta {
    margin: 0 0 var(--jm-space-5);
    font-size: var(--jm-text-sm);
    color: var(--jm-texte-corps);
}

.jm-juridique-event__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--jm-space-2);
    margin-right: var(--jm-space-5);
}

.jm-juridique-cas__lien,
.jm-juridique-event__lien {
    display: inline-flex;
    align-items: center;
    gap: var(--jm-space-2);
    font-size: var(--jm-text-sm);
    font-weight: var(--jm-weight-accent);
    color: var(--jm-blue-text);
    text-decoration: none;
}

.jm-juridique-cas__lien:hover,
.jm-juridique-event__lien:hover {
    color: var(--jm-blue);
    text-decoration: underline;
}

/* ── Icônes (helper jm_icon) ──────────────────────────────────────────────── */

.jm-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* La gouttière vit sur le conteneur interne de Gutenberg, pas sur le
       groupe : viser .jm-juridique-hero__inner ne produit aucun effet. */
    .jm-juridique-hero__inner > .wp-block-group__inner-container {
        gap: var(--jm-space-8);
    }
}

@media (max-width: 781px) {
    .jm-juridique-hero {
        padding-top: var(--jm-space-12);
        padding-bottom: var(--jm-space-12);
    }
    /* ⚠️ Correctif : cette règle visait .jm-juridique-hero__inner, donc le
       passage en une colonne n'a jamais eu lieu. Le hero restait en deux
       colonnes à 390px, les colonnes refusaient de rétrécir sous leur
       contenu, et le document devenait plus large que l'écran — toute la
       page glissait latéralement et perdait son padding gauche. */
    .jm-juridique-hero__inner > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        gap: var(--jm-space-8);
    }
    /* Le filigrane décoratif garde ses valeurs en dur : ce n'est pas du texte,
       aucun palier de l'échelle n'a de sens à 220px. Exception assumée. */
    .jm-juridique-hero::before {
        font-size: 220px;
        bottom: -90px;
    }
    .jm-juridique-card {
        width: 82vw;
        max-width: 320px;
    }
    .jm-juridique-cas,
    .jm-juridique-event {
        padding: var(--jm-space-6) var(--jm-space-6);
    }
}

/* ── Sections génériques de la page ───────────────────────────────────────── */

.jm-juridique-section {
    padding-top: var(--jm-space-14);
    padding-bottom: var(--jm-space-14);
    padding-left: var(--jm-space-6);
    padding-right: var(--jm-space-6);
}

/* ⚠️ Reprise en main du padding horizontal des blocs pleine largeur.

   Kadence (`assets/css/content.min.css`) pose :

       .alignfull, .alignwide,
       .entry-content .alignwide, .entry-content .alignfull {
           width: var(--global-vw, 100vw);
           padding-left: 0;
           padding-right: 0;
       }

   `.entry-content .alignfull` pèse 0,2,0 ; nos `.jm-juridique-*` pèsent 0,1,0,
   et la feuille Kadence est imprimée APRÈS les nôtres. Les `padding-left: 24px`
   déclarés ci-dessus n'ont donc jamais pu s'appliquer, à aucune largeur.

   Invisible sur desktop : `__inner` est plafonné à 1120px et centré, la marge
   venait du centrage. Sur mobile il n'y a plus de marge à emprunter, et le
   texte collait au bord de l'écran.

   On reprend la main en 0,3,0 (classe de bloc + `.alignfull` + `.entry-content`),
   sans `!important` : la spécificité suffit. */
.entry-content .alignfull.jm-juridique-hero,
.entry-content .alignfull.jm-juridique-section,
.entry-content .alignfull.jm-juridique-video,
.entry-content .alignfull.jm-juridique-cta {
    padding-left: var(--jm-space-6);
    padding-right: var(--jm-space-6);
}

/* Le template « Pleine largeur » ne contraint rien : c'est ici qu'on tient la
   largeur de lecture. On vise aussi le conteneur interne de Gutenberg, sinon
   la contrainte porte sur un wrapper qui, lui, reste pleine largeur. */
.jm-juridique-section > *,
.jm-juridique-video > *,
.jm-juridique-cta > *,
.jm-juridique-section > .wp-block-group__inner-container > *,
.jm-juridique-video > .wp-block-group__inner-container > *,
.jm-juridique-cta > .wp-block-group__inner-container > * {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

/* Évite les lignes orphelines dans les titres et les fins de paragraphe
   déséquilibrées. Ignoré silencieusement par les navigateurs anciens. */
.jm-juridique-section__titre,
.jm-juridique-cta__titre,
.jm-juridique-video__titre,
.jm-juridique-card__titre,
.jm-juridique-cas__titre,
.jm-juridique-hero__titre {
    text-wrap: balance;
}

.jm-juridique-section__chapo,
.jm-juridique-cta__texte,
.jm-juridique-video__texte,
.jm-juridique-hero__chapo,
.jm-juridique-card__texte,
.jm-juridique-cas__extrait {
    text-wrap: pretty;
}

.jm-juridique-section--pale {
    background-color: var(--jm-fond-carte-doux);   /* 1,6 */
}

.jm-juridique-section--cyan {
    background-color: var(--jm-cyan);
}

.jm-juridique-section__titre {
    font-size: var(--jm-text-2xl);
    line-height: var(--jm-lh-titre);
    font-weight: var(--jm-weight-strong);
    text-transform: uppercase;
    color: var(--jm-blue-cta);
    margin-top: 0;
    margin-bottom: var(--jm-space-4);
}

.jm-juridique-section__chapo {
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-corps);
    color: var(--jm-muted);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--jm-space-10);
}

.jm-juridique-lucie__regle {
    color: var(--jm-blue-cta);
}

.jm-juridique-verbe__titre {
    font-size: var(--jm-text-lg);
    font-weight: var(--jm-weight-accent);
    text-transform: uppercase;
    color: var(--jm-blue-cta);
    margin-top: 0;
    margin-bottom: var(--jm-space-2);
}

.jm-juridique-actions__intro {
    font-size: var(--jm-text-base);
    color: var(--jm-texte-corps);
    margin-bottom: var(--jm-space-7);
}

.jm-juridique-actions .wp-block-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.jm-juridique-actions .wp-block-list li {
    font-size: var(--jm-text-sm);
    color: var(--jm-blue-cta);
    padding-top: var(--jm-space-3);
    padding-bottom: var(--jm-space-3);
    border-bottom: 1px solid var(--jm-line);   /* 2,0 */
}

/* ── Bloc vidéo ───────────────────────────────────────────────────────────── */

.jm-juridique-video {
    background-color: var(--jm-blue-cta);
    color: var(--jm-texte-inverse);
    padding-top: var(--jm-space-14);
    padding-bottom: var(--jm-space-14);
    padding-left: var(--jm-space-6);
    padding-right: var(--jm-space-6);
}

.jm-juridique-video__titre {
    font-size: var(--jm-display-sm);
    font-weight: var(--jm-weight-strong);
    text-transform: uppercase;
    color: var(--jm-texte-inverse);
    margin-top: 0;
    margin-bottom: var(--jm-space-4);
}

.jm-juridique-video__texte {
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-corps);
    color: var(--jm-texte-inverse-corps);   /* cran 2 — 4,6 */
    max-width: 58ch;
    margin-bottom: var(--jm-space-7);
}

/* ── CTA final ────────────────────────────────────────────────────────────── */

.jm-juridique-cta {
    background-color: var(--jm-blue-cta);
    color: var(--jm-texte-inverse);
    padding-top: var(--jm-space-16);
    padding-bottom: var(--jm-space-16);
    padding-left: var(--jm-space-6);
    padding-right: var(--jm-space-6);
}

.jm-juridique-cta__titre {
    font-size: var(--jm-display-sm);
    font-weight: var(--jm-weight-strong);
    text-transform: uppercase;
    color: var(--jm-texte-inverse);
    margin-top: 0;
    margin-bottom: var(--jm-space-2);
}

/* --jm-text-xl et non --jm-text-2xl, contrairement au mapping initial : le
   titre au-dessus est un clamp qui descend à 26px sur mobile, donc une accroche
   fixée à 28px devenait PLUS GROSSE que son titre sous 781px. Un palier fixe
   placé sous un palier fluide doit se caler sur le bas du clamp, pas sur son
   haut — sinon les deux se croisent quelque part dans le responsive. */
.jm-juridique-cta__accroche {
    font-size: var(--jm-text-xl);
    font-weight: var(--jm-weight-strong);
    color: var(--jm-blue-bright);
    margin-top: 0;
    margin-bottom: var(--jm-space-5);
}

.jm-juridique-cta__texte {
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-long);
    color: var(--jm-texte-inverse-corps);   /* cran 2 — 4,6 */
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--jm-space-8);
}

@media (max-width: 781px) {
    .jm-juridique-section,
    .jm-juridique-video,
    .jm-juridique-cta {
        padding-top: var(--jm-space-12);
        padding-bottom: var(--jm-space-12);
    }
    /* Le 26px qui vivait ici a disparu : .jm-juridique-cta__titre est passé en
       --jm-display-sm (clamp, il se réduit seul), et .jm-juridique-section__titre
       reste à --jm-text-2xl à toutes les largeurs — l'échelle n'a pas de palier
       intermédiaire entre 24 et 28, et `text-wrap: balance` tient la casse. */
}

/* ── Points clés du cas pratique ──────────────────────────────────────────── */

.jm-juridique-cas__points {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: var(--jm-space-6);
}

.jm-juridique-cas__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--jm-space-3);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
    color: var(--jm-ink);
    margin-bottom: var(--jm-space-3);
}

/* Exception à l'échelle d'espacement : ce 2px n'est pas du rythme de page,
   c'est l'alignement optique de l'icône sur la ligne de texte à côté d'elle.
   Le porter à --jm-space-1 (4px) la décalerait visiblement vers le bas. */
.jm-juridique-cas__points .jm-icon {
    color: var(--jm-violet);
    margin-top: 2px;
}

/* ── Vidéo intégrée (YouTube Short, vertical 9:16) ────────────────────────── */

.jm-juridique-video__lecteur {
    margin: 0;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.jm-juridique-video__lecteur iframe {
    width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    border-radius: var(--jm-radius-lg);
    display: block;
}

.jm-juridique-verbes .wp-block-column {
    background-color: var(--jm-fond-carte);
    border-radius: var(--jm-radius-md);
    padding: var(--jm-space-6) var(--jm-space-5);
}

/* ── Sections conditionnelles ─────────────────────────────────────────────── */

/* Une section dont le shortcode ne rend rien garderait son fond et ses marges,
   d'où une bande vide. Le PHP ne peut pas la supprimer : l'enveloppe vient du
   contenu Gutenberg, pas du rendu. On la masque donc sur l'absence de contenu.
   Rendre visible à nouveau = catégoriser un événement en « Juridique ». */
.jm-juridique-section--conditionnel:not(:has(.jm-juridique-event)) {
    display: none;
}

/* ── Liste des 16 actions ─────────────────────────────────────────────────── */

/* Deux colonnes de huit lignes n'ont pas besoin de toute la largeur : resserrer
   recentre le bloc et raccourcit le parcours de l'œil. */
.jm-juridique-section > .wp-block-group__inner-container > .jm-juridique-actions {
    max-width: 880px;
}

.jm-juridique-actions__intro {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Sections dynamiques : disparaissent si leur bloc n'a rien rendu ───────── */

/* Les shortcodes [jm_juridique_cas] et [jm_juridique_evenement] renvoient une
   chaîne vide quand il n'y a pas de contenu, mais le groupe Gutenberg qui les
   entoure garde son fond et ses marges — d'où une bande vide sur la page.
   :has() permet de replier la section elle-même. */
.jm-juridique-section--optionnel:not(:has(.jm-juridique-cas)):not(:has(.jm-juridique-event)) {
    display: none;
}

/* ── « Nos actions pour vous » — la liste des 16 situations ────────────────── */

/* Deux colonnes de libellés courts n'ont pas besoin de 1120px : resserrer
   rapproche les deux colonnes et recentre visiblement le bloc. */
.jm-juridique-actions {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.jm-juridique-actions__intro {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}


/* ── Encart de fin d'article vers « Aide juridique » ───────────────────────── */

/* Posé dans le panneau blanc de l'article (single.php), après
   .jm-article__content. Les marges horizontales reprennent le padding
   horizontal du contenu pour rester dans l'alignement de la colonne de
   lecture ; la marge basse redonne au panneau sa respiration de pied. */
.jm-article-cta-juridique {
    display: flex;
    align-items: center;
    gap: var(--jm-space-5);
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: clamp(var(--jm-space-6), 5vw, var(--jm-space-14));
    margin-bottom: clamp(var(--jm-space-10), 5vw, var(--jm-space-16));
    margin-left: clamp(var(--jm-space-6), 5vw, var(--jm-space-14));
    padding-top: var(--jm-space-6);
    padding-right: var(--jm-space-7);
    padding-bottom: var(--jm-space-6);
    padding-left: var(--jm-space-7);
    background-color: var(--jm-cyan);
    border-radius: var(--jm-radius-lg);
}

/* Icône 26px dans un carré blanc : la règle du projet interdit d'agrandir une
   icône Lucide au-delà de ~32px, on lui donne du poids par le fond. */
.jm-article-cta-juridique__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--jm-radius-md);
    background-color: var(--jm-fond-carte);
    color: var(--jm-blue);
}

.jm-article-cta-juridique__corps {
    flex: 1 1 260px;
}

/* Ces deux paragraphes ne sont pas dans .entry-content : ils n'héritent donc
   ni de la taille 17px ni du margin-bottom de 1.4em du corps d'article. */
.jm-article-cta-juridique__titre {
    margin-top: 0;
    margin-bottom: var(--jm-space-1);
    font-size: var(--jm-text-lg);
    font-weight: var(--jm-weight-accent);
    line-height: var(--jm-lh-titre);
    color: var(--jm-ink);
}

.jm-article-cta-juridique__texte {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
    color: var(--jm-muted);
}

/* Bouton bleu plein : .jm-btn--principal est blanc (pensé pour fonds foncés)
   et disparaîtrait sur ce fond clair. Classe dédiée, comme .jm-event-hero__cta. */
.jm-article-cta-juridique__lien {
    display: inline-flex;
    align-items: center;
    gap: var(--jm-space-2);
    flex: 0 0 auto;
    padding-top: var(--jm-space-3);
    padding-right: var(--jm-space-6);
    padding-bottom: var(--jm-space-3);
    padding-left: var(--jm-space-6);
    border-radius: var(--jm-radius-pill);
    background-color: var(--jm-blue);
    color: var(--jm-texte-inverse);
    font-size: var(--jm-text-sm);
    font-weight: var(--jm-weight-accent);
    line-height: var(--jm-lh-titre);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.jm-article-cta-juridique__lien:hover,
.jm-article-cta-juridique__lien:focus {
    background-color: var(--jm-blue-hover);
    color: var(--jm-texte-inverse);
    text-decoration: none;
}

.jm-article-cta-juridique__lien:focus-visible {
    outline: 2px solid var(--jm-blue);
    outline-offset: 3px;
}

/* Sous 600px, le bouton passe pleine largeur plutôt que de se retrouver seul
   sur une ligne, aligné à gauche et visuellement orphelin. */
@media (max-width: 600px) {
    .jm-article-cta-juridique {
        gap: var(--jm-space-4);
        padding-right: var(--jm-space-5);
        padding-left: var(--jm-space-5);
    }

    .jm-article-cta-juridique__lien {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PORTAIL ADHÉRENT — page « Mon assistance juridique » (355)

   La page organise deux parcours explicites : demander l'aide humaine de
   Lucie en premier, trouver une ressource en second. Les sélecteurs restent
   propres à cette page ; il s'agit d'une composition, pas d'un composant
   global du design system.
   ═══════════════════════════════════════════════════════════════════════════ */

.jm-page-assistance-juridique .jm-tpl-panneau__outer {
    max-width: 1160px;
}

.jm-page-assistance-juridique .jm-tpl-panneau__panel {
    padding-right: clamp(var(--jm-space-6), 5vw, var(--jm-space-16));
    padding-left: clamp(var(--jm-space-6), 5vw, var(--jm-space-16));
}

.jm-page-assistance-juridique .jm-tpl-panneau__sep {
    margin-bottom: var(--jm-space-8);
}

.jm-assistance > .wp-block-group__inner-container {
    display: grid;
    gap: var(--jm-space-16);
}

.jm-assistance__intro {
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.jm-assistance__surtitre,
.jm-assistance__section-label,
.jm-assistance__lucie-label,
.jm-assistance__choix-label {
    margin-top: 0;
    margin-bottom: var(--jm-space-3);
    color: var(--jm-blue);
    font-size: var(--jm-text-2xs);
    font-weight: var(--jm-weight-accent);
    line-height: var(--jm-lh-dense);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jm-assistance__titre.wp-block-heading,
.jm-assistance__section-titre.wp-block-heading,
.jm-assistance__demande-titre.wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--jm-space-4);
    color: var(--jm-ink);
    font-size: var(--jm-display-sm);
    font-weight: var(--jm-weight-strong);
    line-height: var(--jm-lh-display);
}

.jm-assistance__chapo,
.jm-assistance__section-intro,
.jm-assistance__demande-intro {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--jm-muted);
    font-size: var(--jm-text-base);
    line-height: var(--jm-lh-corps);
}

.jm-assistance__choix > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--jm-space-6);
}

.jm-assistance__choix-card {
    height: 100%;
    border: 1px solid var(--jm-line);
    border-radius: var(--jm-radius-xl);
    background-color: var(--jm-fond-carte-doux);
    box-shadow: var(--jm-shadow-sm);
    padding: var(--jm-space-7);
}

.jm-assistance__choix-card > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jm-assistance__choix-card--principal {
    border-color: var(--jm-blue-bright);
    background-color: var(--jm-cyan);
    box-shadow: var(--jm-shadow-card);
}

.jm-assistance__choix-titre.wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--jm-space-3);
    color: var(--jm-ink);
    font-size: var(--jm-text-xl);
    font-weight: var(--jm-weight-strong);
    line-height: var(--jm-lh-titre);
}

.jm-assistance__choix-texte {
    margin-top: 0;
    margin-bottom: var(--jm-space-6);
    color: var(--jm-muted);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
}

.jm-assistance__choix-action {
    margin-top: auto;
}

.jm-assistance__choix-action .wp-block-button,
.jm-assistance__choix-action .wp-block-button__link {
    width: 100%;
}

.jm-assistance__choix-action .wp-block-button__link {
    justify-content: center;
    text-align: center;
}

.jm-assistance__contact,
.jm-assistance__ressources {
    scroll-margin-top: 140px;
}

.jm-assistance__contact > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    gap: var(--jm-space-7);
    align-items: start;
}

.jm-assistance__lucie,
.jm-assistance__demande {
    border-radius: var(--jm-radius-xl);
    padding: var(--jm-space-7);
}

.jm-assistance__lucie {
    background-color: var(--jm-cyan);
}

.jm-assistance__demande {
    border: 1px solid var(--jm-line);
    background-color: var(--jm-fond-carte);
    box-shadow: var(--jm-shadow-card);
}

.jm-assistance__lucie-photo {
    width: 120px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--jm-space-5);
    margin-left: 0;
}

.jm-assistance__lucie-photo img {
    display: block;
    width: 120px;
    height: 120px;
    border: 4px solid var(--jm-fond-carte);
    border-radius: var(--jm-radius-pill);
    object-fit: cover;
    object-position: center 24%;
    box-shadow: var(--jm-shadow-sm);
}

.jm-assistance__lucie-nom.wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--jm-space-1);
    color: var(--jm-ink);
    font-size: var(--jm-text-xl);
    font-weight: var(--jm-weight-strong);
    line-height: var(--jm-lh-titre);
}

.jm-assistance__lucie-role,
.jm-assistance__lucie-texte {
    margin-top: 0;
    color: var(--jm-muted);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
}

.jm-assistance__lucie-role {
    margin-bottom: var(--jm-space-5);
    color: var(--jm-blue);
    font-weight: var(--jm-weight-accent);
}

.jm-assistance__lucie-texte {
    margin-bottom: var(--jm-space-6);
}

.jm-assistance__sujets-titre.wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--jm-space-3);
    color: var(--jm-ink);
    font-size: var(--jm-text-sm);
    font-weight: var(--jm-weight-accent);
    line-height: var(--jm-lh-titre);
}

.jm-assistance__sujets,
.jm-assistance__conseils-liste {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.jm-assistance__sujets li,
.jm-assistance__conseils-liste li {
    position: relative;
    margin-bottom: var(--jm-space-2);
    padding-left: var(--jm-space-6);
    color: var(--jm-ink);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-dense);
}

.jm-assistance__sujets li::before,
.jm-assistance__conseils-liste li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--jm-blue);
    font-weight: var(--jm-weight-strong);
}

.jm-assistance__sujets li:last-child,
.jm-assistance__conseils-liste li:last-child {
    margin-bottom: 0;
}

.jm-assistance__conseils {
    margin-top: var(--jm-space-5);
    margin-bottom: var(--jm-space-6);
    border-radius: var(--jm-radius-md);
    background-color: var(--jm-mint);
    padding: var(--jm-space-5);
}

.jm-assistance__conseils-titre {
    margin-top: 0;
    margin-bottom: var(--jm-space-3);
    color: var(--jm-ink);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-titre);
}

.jm-assistance__confidentialite {
    margin-top: var(--jm-space-4);
    margin-bottom: 0;
    border-top: 1px solid var(--jm-line);
    padding-top: var(--jm-space-4);
    color: var(--jm-muted);
    font-size: var(--jm-text-xs);
    line-height: var(--jm-lh-corps);
}

.jm-assistance-disponibilite,
.jm-assistance-confirmation {
    margin-top: var(--jm-space-5);
    margin-bottom: var(--jm-space-5);
    border-left: 4px solid var(--jm-warn);
    border-radius: var(--jm-radius-md);
    background-color: var(--jm-sand);
    padding: var(--jm-space-4) var(--jm-space-5);
    color: var(--jm-warn);
    font-size: var(--jm-text-sm);
    line-height: var(--jm-lh-corps);
}

.jm-assistance-disponibilite strong,
.jm-assistance-confirmation strong {
    display: block;
    margin-bottom: var(--jm-space-1);
    color: var(--jm-ink);
}

.jm-assistance-confirmation--succes {
    border-left-color: var(--jm-green);
    background-color: var(--jm-mint);
    color: var(--jm-ink);
}

.jm-assistance__demande .gform_wrapper {
    margin-top: var(--jm-space-6);
}

.jm-assistance__demande .gform_footer input[type="submit"] {
    width: 100%;
}

.jm-assistance__ressources,
.jm-assistance__veille {
    border-top: 1px solid var(--jm-line);
    padding-top: var(--jm-space-12);
}

.jm-assistance__section-intro {
    max-width: 760px;
    margin-bottom: var(--jm-space-7);
}

.jm-assistance__veille .jm-nl-section {
    margin-top: var(--jm-space-12);
}

@media (max-width: 820px) {
    .jm-assistance > .wp-block-group__inner-container {
        gap: var(--jm-space-12);
    }

    .jm-assistance__choix > .wp-block-group__inner-container,
    .jm-assistance__contact > .wp-block-group__inner-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .jm-assistance__lucie-photo {
        width: 104px;
    }

    .jm-assistance__lucie-photo img {
        width: 104px;
        height: 104px;
    }
}

@media (max-width: 600px) {
    .jm-page-assistance-juridique .jm-tpl-panneau__panel {
        padding-right: var(--jm-space-5);
        padding-left: var(--jm-space-5);
    }

    .jm-assistance__choix-card,
    .jm-assistance__lucie,
    .jm-assistance__demande {
        padding: var(--jm-space-5);
    }

    .jm-assistance__contact,
    .jm-assistance__ressources {
        scroll-margin-top: 112px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OUTIL CASCADE — page adhérent « Mon assistance juridique » (355)
   Remplace le CSS inline + Bulma du bloc wp:html (session 40). Bulma n'a
   jamais été chargé sur le site : .field, .select, .box et .button ne
   rendaient rien, l'outil s'affichait nu.
   ═══════════════════════════════════════════════════════════════════════════ */

.jm-cascade {
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
}

.jm-cascade__etapes {
    background: var(--jm-fond-carte-doux);
    border: 1px solid var(--jm-line);
    border-radius: var(--jm-radius-lg);
    padding-top: var(--jm-space-6);
    padding-right: var(--jm-space-7);
    padding-bottom: var(--jm-space-6);
    padding-left: var(--jm-space-7);
}

/* Chaque étape : libellé à gauche, select à droite. C'est ce que visait le
   `.field is-horizontal` de Bulma, qui n'a jamais pris. */
.jm-cascade__etape {
    display: flex;
    align-items: center;
    gap: var(--jm-space-4);
    margin-top: 0;
    margin-bottom: var(--jm-space-4);
}

.jm-cascade__etape:last-child {
    margin-bottom: 0;
}

.jm-cascade__label {
    flex: 0 0 170px;
    font-weight: var(--jm-weight-accent);
    color: var(--jm-ink);
}

/* Chevron dessiné en data-URI : pas de dépendance à une police d'icônes, et
   `appearance: none` neutralise le rendu natif hétérogène des navigateurs.

   ⚠️ Exception à l'échelle d'espacement : les quatre paddings ci-dessous
   (11 / 42 / 11 / 14) sont la géométrie interne du champ, pas du rythme de
   page. Le 42px de droite réserve la place du chevron (18px de large, posé à
   14px du bord) : l'arrondir à 40px ferait passer le texte sous l'icône sur
   les options longues. Les 11px verticaux tiennent la hauteur du champ
   alignée sur celle des boutons voisins. */
.jm-cascade__select {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--jm-fond-carte);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6678' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    border: 1px solid var(--jm-line);
    border-radius: var(--jm-radius-sm);
    color: var(--jm-ink);
    font-family: inherit;
    font-size: var(--jm-text-base);
    padding-top: 11px;
    padding-right: 42px;
    padding-bottom: 11px;
    padding-left: 14px;
    cursor: pointer;
}

.jm-cascade__select:hover {
    border-color: var(--jm-blue-bright);
}

.jm-cascade__select:focus-visible {
    outline: 2px solid var(--jm-blue);
    outline-offset: 2px;
}

.jm-cascade__attente {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--jm-space-3);
    margin-top: var(--jm-space-5);
    margin-bottom: 0;
    color: var(--jm-muted);
}

.jm-cascade__attente-icone {
    display: inline-flex;
    color: var(--jm-blue-bright);
}

.jm-cascade__resultat {
    margin-top: var(--jm-space-5);
    background: var(--jm-cyan);
    border-radius: var(--jm-radius-md);
    padding-top: var(--jm-space-5);
    padding-right: var(--jm-space-6);
    padding-bottom: var(--jm-space-5);
    padding-left: var(--jm-space-6);
}

.jm-cascade__resultat-intro {
    margin-top: 0;
    margin-bottom: var(--jm-space-3);
    font-weight: var(--jm-weight-accent);
    color: var(--jm-ink);
}

.jm-cascade__resultat-lien {
    display: inline-block;
    background: var(--jm-blue);
    border-radius: var(--jm-radius-pill);
    color: var(--jm-texte-inverse);
    font-weight: var(--jm-weight-accent);
    text-decoration: none;
    padding-top: var(--jm-space-3);
    padding-right: var(--jm-space-6);
    padding-bottom: var(--jm-space-3);
    padding-left: var(--jm-space-6);
}

.jm-cascade__resultat-lien:hover,
.jm-cascade__resultat-lien:focus {
    background: var(--jm-blue-hover);
    color: var(--jm-texte-inverse);
}

.jm-cascade__resultat-lien:focus-visible {
    outline: 2px solid var(--jm-blue);
    outline-offset: 3px;
}

.jm-cascade__noscript-titre,
.jm-cascade__noscript-sous-titre {
    margin-bottom: var(--jm-space-2);
}

/* Sous 700px, le libellé repasse au-dessus de son select : à 170px de colonne
   fixe, il ne reste plus assez de place pour lire les options. */
@media (max-width: 700px) {
    .jm-cascade__etape {
        flex-direction: column;
        align-items: stretch;
        gap: var(--jm-space-2);
    }

    .jm-cascade__label {
        flex: 0 0 auto;
    }

    .jm-cascade__etapes {
        padding-right: var(--jm-space-5);
        padding-left: var(--jm-space-5);
    }
}