/* ------------------------------------------------------------------*/
/* répartition colonne en cartel 40% (le reste) et image 60% --------*/

.main-dreamers {
  display: flex;
  flex-direction: row; 
  overflow-x: auto; /* ascenseur horizontal si ça dépasse */
  overflow-y: hidden; /* pas d’ascenseur vertical */
}

.main-dreamers .cartel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden; /* empêche les débordements */
  max-width: 30%;
  padding: 2rem 2rem 2rem 2rem;
  font-size: large; /*20px;*/
}

.main-dreamers .cartel .cartel-fonctionnel {
  padding: 0.5rem 1rem 0rem 0.5rem;
  font-style: italic;
  color: #333;
  text-align: justify;

  min-height: 0; /* nécessaire pour le scroll avec flexbox */
  overflow-y: auto; /* <-- ascenseur si déborde */

  flex: 1 1 auto;
}

.main-dreamers .cartel .cartel-fonctionnel {
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Base : scrollbar totalement cachée */
.main-dreamers .cartel .cartel-fonctionnel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Quand on survole la zone, on réactive une scrollbar fine et visible */
.main-dreamers .cartel .cartel-fonctionnel:hover::-webkit-scrollbar {
  width: 0.5rem;
  height: auto;
}

/* Style du thumb visible uniquement au survol */
.main-dreamers .cartel .cartel-fonctionnel:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.5rem;
}

.main-dreamers .cartel .cartel-fonctionnel p {
  margin: 5px 5px; /* bottom et top */
}

.main-dreamers .section-image {
  flex: 0 0 auto; /* pas d’écrasement */
  gap: 0.5rem;
  padding-right: 2rem;
  display: flex;
}

.main-dreamers .section-image img {
  max-width: 50%; /* chaque image prend la moitié */
  height: auto; /* conserve proportions */
  flex: 0 0 auto; /* aucune réduction forcée */
  object-fit: contain; /* ou  sécurité anti-écrasement */
  border: 1px solid darkgrey;
}

/* un truc que pour safari */
@supports (-webkit-hyphens: none) {
  .main-dreamers .section-image {
    flex: 1 1 auto; /* Safari recalcul correct */
    justify-content: center; /* plus de marge fantôme */
    gap: 0.5rem;
  }

  .main-dreamers .section-image img {
    max-width: 50%; /* redevient fiable */
    height: auto;
    border: 0px; /* pour éviter la bordure avec un padding right et left */
  }
}

/* un truc que pour firefox */
@-moz-document url-prefix() {
  .main-dreamers {
    _overflow-x: _hidden; /* supprime l’ascenseur horizontal fantôme */
  }
}
/* --- Correctif Firefox uniquement --- */
@-moz-document url-prefix() {
  .main-dreamers {
    overflow-x: auto !important; /* garde ton scroll horizontal */
    min-width: 0;
  }

  .main-dreamers .cartel {
    flex: 0 0 30%; /* largeur stable : 30% */
    max-width: 30%;
    min-width: 280px; /* sécurité pour ne pas s’écraser */
    position: relative;
    z-index: 1;
  }

  .main-dreamers .section-image {
    flex: 1 1 auto; /* occupe le reste, sans pousser le texte */
    justify-content: center;
    flex-shrink: 1; /* autorise un ajustement harmonieux */
  }

  .main-dreamers .section-image img {
    max-width: 50%;
    height: auto;
  }
}

/* ------------------------------------------------------------------*/
/* paramétrage du cartel --------------------------------------------*/

/* paramétrage du cartel technique --------------------------------------------*/

.main-dreamers .cartel .cartel-technique {
  margin-top: 1rem;
  _margin-left: 1.5rem;
  border-left: 5px solid grey;
  padding-left: 0.8rem;

  line-height: 1.1; /* lisible et espacé */
  color: #111;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.main-dreamers .cartel .cartel-technique > * {
  margin: 0.5rem;
}

.main-dreamers .cartel .cartel-technique h2 {
  font-size: 1.3rem; /* augmente la taille */
  color: #222; /* couleur au choix */
}

.main-dreamers .cartel .cartel-technique p {
  font-style: italic;
}

.main-dreamers .cartel .cartel-technique p,
.main-dreamers .cartel .cartel-technique h2 {
  margin-left: 0rem;
}

/* paramétrage du commun : categorie, cartel technique, suivant --------------------------------------------*/

.main-dreamers .cartel .cartel-technique a {
  font-weight: 900; /* gras */
  font-style: italic;
  text-decoration: none;
  color: rgb(152, 100, 3); /* #6a2f75; */
  transition: color 0.3s ease;
}

.main-dreamers .cartel .cartel-technique .explication-titre {
  font-size: 1.2rem;
}

.main-dreamers .cartel-technique a:hover {
  color: rgb(167, 145, 145); /* couleur au survol */
}

/* *****************************************************************************
   *****************************************************************************
*/
.main-dreamers-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .main-dreamers {
    display: none;
  }
  .main-dreamers-mobile {
    display: block;

    padding: 0rem 1rem 1rem 1rem;
    box-sizing: border-box;

    overflow-y: auto; /* ✅ un seul ascenseur vertical */
    overflow-x: hidden;
    max-height: 100vh; /* ✅ prend la hauteur visible */
  }

  /* ✅ Deux images côte à côte avec un petit espace */
  .main-dreamers-mobile .section-image {
    display: flex; /* place les images sur la même ligne */
    justify-content: center; /* centre l’ensemble */
    align-items: center;
    gap: 0.6rem; /* espace entre les images */
    _padding: 0rem;
  }

  .main-dreamers-mobile .section-image img {
    width: 49%; /* chacune prend environ la moitié */
    height: auto; /* garde les proportions */
    display: block;
    object-fit: contain; /* évite les déformations */
    _margin: 0 auto; /* centre si besoin */
  }

  .main-dreamers-mobile .cartel {
    _overflow-y: auto; /* ✅ un seul ascenseur vertical */
    _overflow-x: hidden;
    _height: 20rem;
    text-align: justify;
    padding: 0rem 0.6rem 0rem 0.6rem;
    margin: 0rem 0rem 1rem 0rem;
  }

  .main-dreamers-mobile .cartel a {
    font-weight: 900; /* gras */
    font-style: italic;
    text-decoration: none;
    color: rgb(152, 100, 3); /* #6a2f75; */
    transition: color 0.3s ease;
  }

  .main-dreamers-mobile .cartel-technique {
    font-weight: bold;
  }

  .main-dreamers-mobile .cartel-technique h2 {
    font-size: 1.3rem; /* augmente la taille */
    color: #222; /* couleur au choix */
    margin-bottom: 0.5rem;
  }

  .main-dreamers-mobile .cartel-fonctionnel {
    margin-bottom: 5rem;
    font-size: var(--nav-font-size);
  }

  .main-dreamers-mobile .copyright-mobile {
    padding-top: 5px;
    padding-left: 0rem;
  }
}