/* --------------------------------------------------------------------------
   Le cercle — commun aux trois variantes rondes.
   -------------------------------------------------------------------------- */
.wp-block-image.is-style-ronde,
.wp-block-image.is-style-ronde-droite,
.wp-block-image.is-style-ronde-nue,
.rosee-rounded-image { /* alias historique, conservé pour le contenu publié */
    position: relative;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 4px solid var(--wp--preset--color--gris-clair);
        aspect-ratio: 1/1;
        border-radius: 100%;
    }
}

.has-gris-clair-background-color .wp-block-image.is-style-ronde {
    img {
        border-color: var(--wp--preset--color--blanc);
    }
}

/* --------------------------------------------------------------------------
   La flèche — variantes « Ronde » et « Ronde, flèche à droite ».
   -------------------------------------------------------------------------- */

/* Image et flèche partagent la première cellule, la légende occupe la seconde.
   La flèche se cale ainsi sur l'image, pas sur la figure. */
.wp-block-image:is(.is-style-ronde, .is-style-ronde-droite),
.rosee-rounded-image {
    display: grid;
    grid-template-columns: 1fr;
}

.wp-block-image:is(.is-style-ronde, .is-style-ronde-droite) > *,
.rosee-rounded-image > * {
    grid-area: 1 / 1;
}

.wp-block-image:is(.is-style-ronde, .is-style-ronde-droite) > figcaption,
.rosee-rounded-image > figcaption {
    grid-area: 2 / 1;
}

/* Légende centrée sur l'axe du cercle, en lignes courtes. Vaut aussi pour
   « Ronde, sans flèche », qui n'est pas une grille. */
.wp-block-image:is(.is-style-ronde, .is-style-ronde-droite, .is-style-ronde-nue) > figcaption,
.rosee-rounded-image > figcaption {
    max-width: 40ch;
    margin-inline: auto;
    text-align: center;
}

/* La hauteur se déduit de la largeur, jamais de celle de la figure.
   Les deux SVG de flèche font 277,9 × 272,4 : `contain` dans une boîte carrée
   les affiche entiers. */
.wp-block-image.is-style-ronde::before,
.wp-block-image.is-style-ronde-droite::before,
.rosee-rounded-image::before {
    content: '';
    grid-area: 1 / 1;
    align-self: end;
    justify-self: start;
    background-image: url('../images/arrow-circle-bleu.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 20%;
    aspect-ratio: 1;
    margin: 0 0 10px 3%;
    z-index: 1;
}

/* Sur fond bleu, la flèche bleue disparaîtrait : variante claire. */
.has-bleu-background-color .wp-block-image.is-style-ronde::before,
.has-bleu-background-color .wp-block-image.is-style-ronde-droite::before,
.has-bleu-background-color .rosee-rounded-image::before {
    background-image: url('../images/arrow-circle.svg');
}

/* Flèche à droite. `.rosee-arrow-right` reste accepté pour le contenu publié. */
.wp-block-image.is-style-ronde-droite::before,
.rosee-rounded-image.rosee-arrow-right::before {
    justify-self: end;
    margin-inline: 0 3%;
    transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   Image mise en avant, sur un article ou un événement.
   -------------------------------------------------------------------------- */
.single .wp-block-post-featured-image {
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
    margin-bottom: var(--wp--preset--spacing--medium);
    aspect-ratio: 16/9;

    img {
        width: 100%;
        height: 100%;
    }
}