/* === Habillage d'image (float / shape-outside) === */
/* Utilisez .float-left ou .float-right pour un habillage rectangulaire */
.float-left {
    float: left;
    margin: 0 16px 16px 0; /* espace entre image et texte */
    max-width: 40%;
    display: block;
}
.float-right {
    float: right;
    margin: 0 0 16px 16px;
    max-width: 40%;
    display: block;
}

/* Cercle avec shape-outside pour un habillage arrondi (navigateurs modernes) */
.float-circle {
    float: left;
    width: 180px;
    height: 180px;
    margin: 0 16px 16px 0;
    border-radius: 50%;
    object-fit: cover; /* recadrage de l'image à l'intérieur */
    display: block;
    /* shape-outside permet de faire 'couler' le texte autour de la forme */
    -webkit-shape-outside: circle(50% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);
    shape-margin: 8px;
    overflow: hidden; /* nécessaire pour masquer le débordement et appliquer correctement la forme */
}

/* Petite utilité pour forcer le conteneur à englober les floats */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Comportement responsive : sur écrans petits, désactiver le float */
@media screen and (max-width: 600px) {
    .float-left, .float-right, .float-circle {
        float: none;
        margin: 0 0 16px 0;
        width: 100%;
        height: auto;
        shape-outside: none;
    }
}

/* Exemple de classe pour image dans un <figure> si besoin */
.figure-img {
    display: block;
    width: 100%;
    height: auto;
}