* {
    box-sizing: border-box
}
.img_to_right-container {
    position: relative;
    margin: var(--space-sm) auto var(--space-md) auto;
    border: calc(2 / 16 * 1rem) solid var(--color-img-to-right-container-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-z2);
    margin-top: var(--space-md);
}
.img_to_right-container > img {
    display: block;
    width: 100%;
    height: auto;
}
/* L'IMAGE : Flottante à droite, taille par défaut 400px */
.img-to-the-right {
    float: right;
    margin-left: var(--space-md);
    width: calc(400 / 16 * 1rem); /* 25rem */
}

/* LE TITRE : Forcé à s'étirer pour combler l'espace à gauche de l'image flottante */
.keep-in-line-icon-and-page-title {
    overflow: hidden;
    width: auto;
}

.resource-text {
    width: 100%;
}
/* Pour forcer le texte à revenir sous l'image après le float */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* --- RESPONSIVITÉ --- */

/* 2. REQUÊTE MÉDIA pour ÉCRAN MOYEN (max-width: 900px) */
/* L'image reste à droite mais sa largeur est réduite à 350px */
@media (max-width: calc(900 / 16 * 1rem)) { /* 56.25rem */
    .img-to-the-right {
        width: calc(350 / 16 * 1rem); /* 21.875rem */
    }
}

/* 3. REQUÊTE MÉDIA pour PETIT ÉCRAN (max-width: 690px) */
/* L'image se place au-dessus, centrée (250px), et le texte s'empile en dessous */
@media (max-width: calc(690 / 16 * 1rem)) { /* 43.125rem */

    /* L'image devient centrée et s'empile */
    .img-to-the-right {
        float: none !important;
        width: calc(250 / 16 * 1rem) !important; /* 15.625rem */
        max-width: 100% !important;
        display: block !important;
        margin: var(--space-md) auto !important; /* Centrage */
    }

    /* Le conteneur s'adapte à la largeur de l'écran pour le centrage */
    .img_to_right-container {
        max-width: 100%;
        width: 95vw;
        margin: 0 auto !important;
    }

    /* Annule l'étirement du titre sur petit écran */
    .keep-in-line-icon-and-page-title {
        overflow: visible;
        width: 100%;
    }
}

/* 4. REQUÊTE MÉDIA pour TRÈS PETIT ÉCRAN (max-width: 350px) */
/* L'image réduit à 80% pour ne jamais déborder sur les plus petits téléphones */
@media (max-width: calc(350 / 16 * 1rem)) { /* 21.875rem */
    .img-to-the-right {
        width: 80% !important;
    }
}