/* ============================================
   CHRU Nancy — Overrides CSS pour les blocs Gutenberg
   ============================================
   Surcharge ciblée des styles compilés par chru-blocks.
   Permet de répondre aux retours client sans avoir à rebuild
   le plugin pour des ajustements purement visuels.
   ============================================ */

/* === Bloc « À retenir » =====================================
 * - Padding du badge : 15px haut, 20px gauche/droite (texte centré en hauteur)
 * - Réduit la marge sous le badge en compactant le padding-top du bloc
 * - Augmente la marge au-dessus du bloc (espace de respiration côté texte)
 * - Sur toutes les pages : examen, article, service, structure
 * Note : le label « À retenir » sera mis à jour côté JS (sans le « ! »).
 */
.chru-a-retenir {
    margin-top: 48px;
    padding: 66px 45px 36px;
}

.chru-a-retenir__badge {
    padding: 15px 20px;
    align-items: center;
    line-height: 1.2;
}

.chru-a-retenir__badge-label {
    line-height: 1.2;
}

@media (max-width: 768px) {
    .chru-a-retenir {
        margin-top: 36px;
        padding: 56px 20px 24px;
    }
    .chru-a-retenir__badge {
        padding: 12px 18px;
    }
}

/* === Bloc Important — liens en rouge ================
 * Le texte du bloc est en rouge (--chru-dark-red, #A01000) ; les liens
 * héritent de la couleur globale bleue → on les force en rouge.
 * Retour client V3 : aligner sur la palette CHRU (token design-system).
 * Retour client juin 2026 : #DA1500 → #A01000 (toutes pages).
 */
/* ⚠️ `:not(.chru-btn)` OBLIGATOIRE — défaut mesuré le 31/08/2026 (B3, retour
 * Marie KUSY : « le survol du bouton n'est pas lisible car fond rouge sur texte
 * rouge »). Depuis le 21/07, un lien seul sur sa ligne devient un BOUTON dans ce
 * bloc ; le bloc lui donne bien `background:#A01000 ; color:#fff` au survol
 * (0,3,0), mais la règle ci-dessous (0,3,1) reprenait la main sur la couleur du
 * libellé : rouge sur rouge, contraste mesuré 1,00:1 — le bouton disparaissait.
 * Les liens AU FIL DU TEXTE, eux, gardent le rouge souligné (6,88:1).
 * Même famille que les fuites CSS des fiches structure : une règle de contenu
 * qui n'exclut pas les composants entre AUSSI dans les blocs. */
.chru-important .chru-important__text a:not(.chru-btn),
.chru-important__text a:not(.chru-btn) {
    color: var(--chru-dark-red, #A01000);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.chru-important .chru-important__text a:not(.chru-btn):hover,
.chru-important .chru-important__text a:not(.chru-btn):focus-visible {
    color: var(--chru-dark-red, #A01000);
    text-decoration-thickness: 2px;
}

/* === Bloc Texte + Image — titre à la taille des H2 du site ===
 * B5, retour Marie KUSY du 31/08/2026 : « mettre le titre considéré comme un
 * H2 avec le même CSS que les H2 » (page « Imagerie fœtale et périnatale »).
 * Le titre ÉTAIT déjà un <h2> dans le markup ; c'est sa TAILLE qui divergeait —
 * 32px / interligne 1, contre 24px / 1,2 pour tous les H2 éditoriaux depuis
 * l'harmonisation du 13/08. Le mobile suit automatiquement (--h2-size vaut
 * 20px sous 768px), ce qui rend inutile le `font-size:24px` que le bloc force
 * de son côté — d'où la double classe, qui passe devant lui.
 * ⚠️ Revirement assumé : le 13/08, les titres internes des blocs avaient été
 * volontairement EXCLUS de l'harmonisation. Ce bloc-ci en sort à la demande du
 * client ; les autres blocs gardent leur typo propre. */
.chru-texte-image .chru-texte-image__title {
    font-size: var(--h2-size, 24px);
    line-height: 1.2;
}


/* === Bloc Texte + Image =====================================
 * Le wrapper avait border-radius: 30px partout → l'image apparaissait
 * arrondie aussi en haut. On force les angles supérieurs en droits :
 * haut carré + bas arrondi (cf. retour client).
 */
.chru-texte-image {
    border-radius: 0 0 30px 30px;
}

/* Variante « sans image » :
 * - le bloc apparaît comme une carte texte seule
 * - on rétablit la border-bottom pour fermer visuellement le bloc
 * - on arrondit les 4 angles puisqu'il n'y a plus de média en bas
 */
.chru-texte-image--no-media {
    border-radius: 30px;
}

.chru-texte-image--no-media .chru-texte-image__content {
    border-bottom: 1px solid #e1e1e1;
    border-radius: 30px;
}

/* === Bloc Pour aller plus loin / Liens externes =============
 * Différenciation visuelle entre lien interne (flèche vers le bas/droite)
 * et lien externe (icône carré-flèche).
 * Cohérence du souligné des titres entre pages service et article :
 * on harmonise sur la couleur bleue institution.
 */
.chru-liens-externes__title,
.chru-liens-utiles__title {
    text-decoration-color: var(--chru-blue-canard, #0096D6);
}

/* === Bloc Titre avec picto — variantes de fond/bordure =======
 * Trois variantes possibles via une classe utilitaire que l'éditeur
 * peut ajouter (Inspector > Avancé > Classe CSS additionnelle) :
 *  - is-bg-grey  → fond gris pâle (cohérent avec les sections blocs)
 *  - is-bg-white → fond blanc bordé fin (carte légère)
 *  - is-bordered → bordure grise sur fond transparent
 * (En attendant l'attribut natif côté JS, ces classes utilitaires
 *  permettent au client de varier les rendus dès maintenant.)
 */
.chru-titre-picto.is-bg-grey {
    background: var(--chru-gray, #F6F6F6);
    padding: 24px 28px;
    border-radius: 14px;
}

.chru-titre-picto.is-bg-white {
    background: #fff;
    padding: 24px 28px;
    border-radius: 14px;
    border: 1px solid var(--chru-gray-border, #E1E1E1);
}

.chru-titre-picto.is-bordered {
    padding: 24px 28px;
    border-radius: 14px;
    border: 1px solid var(--chru-gray-border, #E1E1E1);
}

/* === Homogénéisation des padding-bottom de blocs ============
 * Quand un bloc se termine par une liste, le margin-bottom du dernier
 * <li> creusait un trou supplémentaire. On harmonise avec un paragraphe.
 */
.chru-content > ul:last-child,
.chru-content > ol:last-child,
.chru-post-content > ul:last-child,
.chru-post-content > ol:last-child,
.chru-service-content > ul:last-child,
.chru-service-content > ol:last-child {
    margin-bottom: 0;
}

.chru-content > ul:last-child li:last-child,
.chru-content > ol:last-child li:last-child,
.chru-post-content > ul:last-child li:last-child,
.chru-post-content > ol:last-child li:last-child,
.chru-service-content > ul:last-child li:last-child,
.chru-service-content > ol:last-child li:last-child {
    margin-bottom: 0;
}

/* === Retour Marie 20/07 — couleurs de texte des blocs « Important » et
 * « Information utile » écrasées par la typo de contenu des templates
 * (`.chru-ecole-content p`, `.chru-content p`… = même spécificité que le CSS
 * du bloc, mais chargées après). On remonte la spécificité pour que le bloc
 * reprenne toujours la main, sans `!important`.
 * ========================================================================= */
.chru-info-utile .chru-info-utile__title,
.chru-info-utile .chru-info-utile__content,
.chru-info-utile .chru-info-utile__content p,
.chru-info-utile .chru-info-utile__content li,
.chru-info-utile .chru-info-utile__content h2,
.chru-info-utile .chru-info-utile__content h3,
.chru-info-utile .chru-info-utile__content h4,
.chru-info-utile .chru-info-utile__content h5,
.chru-info-utile .chru-info-utile__content h6,
.chru-info-utile .chru-info-utile__content blockquote,
.chru-info-utile .chru-info-utile__link {
    color: #fff;
}

/* ⚠️ `:not(.chru-btn)` OBLIGATOIRE — retour Marie 30/07/2026 (3e remontée).
 * Ces règles visent les liens AU FIL DU TEXTE. Sans l'exclusion, elles
 * repassaient devant `components.css` (0,3,1 > 0,2,0) et forçaient le libellé
 * du bouton en blanc → blanc sur blanc au survol. Les boutons du bloc n'ont
 * qu'une seule source : `components.css` (.chru-btn--outline-white). */
.chru-info-utile .chru-info-utile__content a:not(.chru-btn) {
    color: #AFDCFF;
}

.chru-info-utile .chru-info-utile__content a:not(.chru-btn):hover,
.chru-info-utile .chru-info-utile__content a:not(.chru-btn):focus {
    color: #fff;
}

.chru-important .chru-important__text,
.chru-important .chru-important__text p,
.chru-important .chru-important__text li {
    color: var(--chru-dark-red, #DA1500);
}

.chru-important .chru-important__text a:not(.chru-btn) {
    color: inherit;
}

/* === Retour Marie 20/07 — bloc « Contacter le service », mention du bas.
 * La mention est déjà en italique par construction : le gras saisi (ou hérité)
 * n'y apporte rien et alourdit la lecture. On la remet en graisse normale par
 * défaut (elle reste distincte grâce à l'italique + au filet du dessus).
 * ========================================================================= */
.chru-contacter .chru-contacter__note,
.chru-contacter .chru-contacter__note strong,
.chru-contacter .chru-contacter__note b {
    font-weight: 400;
}

/* === Retours Marie 21/07 — titre du bloc gris/encart école sur fonds foncés.
 * Le format « Accent bleu » (#0096D6) posé dans le titre est illisible sur les
 * variantes bleu foncé / teal (contraste < 3:1). On le remonte en bleu très
 * clair #AFDCFF (≈ 7:1 sur --blue), comme les liens inline de ces mêmes fonds.
 * ========================================================================= */
.chru-encart-ecole--blue .chru-encart-ecole__title .chru-accent,
.chru-encart-ecole--teal .chru-encart-ecole__title .chru-accent,
.chru-encart-ecole--blue .chru-encart-ecole__content .chru-accent,
.chru-encart-ecole--teal .chru-encart-ecole__content .chru-accent {
    color: #AFDCFF;
}

/* === Retour Thomas 24/07 — chevrons du carrousel « Points forts »
 * (Les équipements de l'institut…). Le disque bleu marine plein du bouton
 * « suivant » était l'état HOVER de la maquette figé dans le save du bloc.
 * Chaque bouton porte désormais les DEUX SVG Figma d'origine
 * (points-forts-nav-render.php, plugin) — aucun glyphe redessiné :
 *   repos          → cercle outline bleu clair (SVG Figma) ;
 *   hover / active → disque bleu marine plein, chevron blanc (SVG Figma).
 * Ici : uniquement la bascule d'affichage entre les deux visuels.
 * ========================================================================= */
.chru-points-forts .chru-points-forts__chev--hover {
    display: none;
}

.chru-points-forts .chru-points-forts__nav-btn:hover .chru-points-forts__chev--rest,
.chru-points-forts .chru-points-forts__nav-btn:active .chru-points-forts__chev--rest {
    display: none;
}

.chru-points-forts .chru-points-forts__nav-btn:hover .chru-points-forts__chev--hover,
.chru-points-forts .chru-points-forts__nav-btn:active .chru-points-forts__chev--hover {
    display: block;
}

/* =========================================================================
 * Bloc « Liste de documents » — repli de la ligne de méta en mobile
 * RGAA 10.11 (audit ARA du 27/07/2026).
 * La mention « Mis à jour le JJ/MM/AAAA » est en `white-space: nowrap` dans
 * une ligne `display:flex` sans repli : à 320px de large elle dépassait de
 * 28px, ce qui faisait défiler horizontalement toute la page école.
 * ========================================================================= */
@media (max-width: 480px) {
    .chru-documents-list__meta {
        flex-wrap: wrap;
    }

    .chru-documents-list__date,
    .chru-documents-list__download-label {
        white-space: normal;
    }
}

/* =========================================================================
 * Titres de cartes — plus de troncature à 2 lignes
 * RGAA 10.12 (audit ARA du 27/07/2026).
 * `-webkit-line-clamp: 2` coupait visuellement le titre dès que l'utilisateur
 * redéfinit l'espacement du texte (interligne 1,5 / inter-lettre 0,12em) :
 * mesuré, un titre supplémentaire est tronqué sur les cartes de page et un
 * de plus sur les cartes de service. Le titre identifie la destination du
 * lien : il doit rester lisible en entier. Les chapôs restent tronqués (ils
 * ne sont qu'une accroche, le texte complet est sur la page cible).
 * `display:block` annule le contexte -webkit-box du clamp. Sélecteurs à deux
 * classes : `archive-services.css` est chargée APRÈS cette feuille et pose la
 * même règle à spécificité égale (0,1,0) — sans le parent, elle l'emporterait.
 * ========================================================================= */
.chru-card-service .chru-card-service__title,
.chru-svc-archive .chru-card-service__title,
.chru-pages-cards .chru-pages-cards__card-title,
.wp-block-chru-pages-cards .chru-pages-cards__card-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* 🔴 GRAS INVISIBLE DANS LES BLOCS À FOND COLORÉ (Marie KUSY 05/08/2026,
   bloc « Information utile » des pages structure).
   `single-structure.css` pose `.chru-etab__body .chru-content strong {
   color: var(--chru-secondary) }` pour le contenu éditorial — lisible sur le
   fond blanc de la page, mais cette règle attrape AUSSI les <strong> écrits
   à l'intérieur des blocs, où le marine est la couleur du fond :
   contraste mesuré **1,00:1**, le texte gras disparaissait purement et
   simplement (deux passages entiers illisibles sur /structure/heydenreich/).
   On rend au gras la couleur de son bloc. `inherit` plutôt qu'une valeur en
   dur : chaque bloc (bleu, teal, rosé) impose déjà la sienne à son contenu.
   ⚠️ La classe racine est DOUBLÉE volontairement (`.chru-info-utile.chru-info-utile`)
   pour monter à 0,3,1 : écrite simplement, la règle est à 0,2,1, soit EXACTEMENT
   la spécificité du gabarit — et `single-structure.css` étant chargé APRÈS
   `blocks-overrides.css`, c'est lui qui gagnait. Même patron que
   `.chru-btn.chru-btn--outline-white` dans components.css. */
.chru-info-utile.chru-info-utile .chru-info-utile__content strong,
.chru-encart-ecole.chru-encart-ecole--blue .chru-encart-ecole__content strong,
.chru-encart-ecole.chru-encart-ecole--teal .chru-encart-ecole__content strong,
.chru-important.chru-important .chru-important__text strong,
.chru-important.chru-important .chru-important__list strong {
    color: inherit;
}