/* ============================================
   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 (#b40a29) ; les liens héritaient de la
 * couleur globale bleue. On les force en rouge avec un soulignement net.
 */
.chru-important .chru-important__text a,
.chru-important__text a {
    color: #b40a29;
    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:hover,
.chru-important .chru-important__text a:focus-visible {
    color: #7a061b;
    text-decoration-thickness: 2px;
}

/* === 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, #197CAA);
}

/* === 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;
}