/* Fichier CSS : /asset/css/img-to-right.css */
* {
  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;
}
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
@media (max-width: calc(840 / 16 * 1rem)) {
  /* 56.25rem */
  .img-to-the-right {
    width: calc(350 / 16 * 1rem); /* 21.875rem */
  }
}
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
@media (max-width: calc(635 / 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%;
  }
}
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
/*@media@media@media@media@media@media@media@media@media@media@media@media*/
@media (max-width: calc(350 / 16 * 1rem)) {
  /* 21.875rem */
  .img-to-the-right {
    width: 80% !important;
  }
}