* {
    box-sizing: border-box
}
.img_to_right-container {
    position: relative;
    margin: var(--space-sm) auto var(--space-md) auto;
    border: 2px 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: 400px; /* Largeur par défaut pour grand écran */
}

/* 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: 900px) {
    .img-to-the-right {
        width: 350px;
    }
}

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

    /* L'image devient centrée et s'empile */
    .img-to-the-right {
        float: none !important;
        width: 250px !important; /* Taille maximale fixe sur petit écran */
        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: 350px) {
    .img-to-the-right {
        width: 80% !important;
    }
}