/* main.accueil   -------------------------------------------- */
/*
HTML :
body
    layout
        header
        main
        footer

main.accueil
    section.accueil-image-cartel
        div : accueil-image : contient la div cartel-accueil
            img
            div.cartel-accueil
                div.cartel-ligne1
                div.cartel-ligne2
    
    section.citation        
*/
/* main.accueil -------------------------------------- */
main.accueil {
  display: flex;
  flex-direction: row;
  overflow-x: auto; /* ascenseur horizontal si ça dépasse */
  overflow-y: hidden; /* pas d’ascenseur vertical */
  padding: 0rem 1rem 0rem 1rem;
}

/* section image -------------------------------------- */
main.accueil .accueil-image-cartel {
  flex: 62;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* conteneur image -------------------------------------- */
main.accueil .accueil-image-cartel .accueil-image {
  position: relative;
  display: inline-block; /* épouse exactement la taille de l'image */
  overflow: hidden; /* empêche tout débordement du cartel */
  line-height: 0; /* évite un espace blanc sous l’image */
}

/* image -------------------------------------- */
.accueil-image img {
  display: block;
  width: auto;
  height: 84vh; /* 84vh car 84% : image bien visible mais contrôlée */
  max-width: 100%;
  object-fit: contain;
  -webkit-object-fit: contain; /* Safari */
}

/* cartel -------------------------------------- */
.accueil-image .cartel-accueil {
  position: absolute;
  bottom: 2%;
  right: 2%;
  text-align: right;
  color: rgb(191, 187, 187);
  font-family: Arial, sans-serif;
  font-style: italic;
  z-index: 10;
  background: rgba(0, 0, 0, 0); /* pour test : transparent */
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* texte -------------------------------------- */
.cartel-accueil .cartel-ligne1,
.cartel-accueil .cartel-ligne2 {
  padding-right: 5px;
  padding-left: 5px;
  font-size: calc(var(--nav-font-size) * 0.6);
  line-height: 1.2;
  background-color: rgba(230, 220, 200, 0.6);
  color: rgb(57, 1, 1); /* rgb(191, 187, 187); */
}

.cartel-accueil .cartel-ligne1 {
  font-weight: bold;
}

.cartel-accueil .cartel-ligne2 {
  font-weight: normal;
}

/* main.accueil  section.citation  -------------------------------------- */

main.accueil section.citation {
  flex: 38; /* main-oeuvre 62, main-citation 38 */
  display: flex;
  flex-direction: column;
  padding: 0 1rem 0 1rem;
}
main.accueil section.citation .harraway {
  flex: 1.6;
}
main.accueil section.citation .magritte-lahire {
  flex: 1;
  align-items: flex-end; /* aligne le texte à droite */
  font-style: italic;
  font-size: calc(var(--nav-font-size) * 0.8);
  padding-right: 20px;
}
main.accueil section.citation .magritte {
  margin-bottom: 0px;
}
main.accueil section.citation .lahire {
  margin-top: 0px;
}
main.accueil section.citation div {
  display: flex; /* chaque bloc devient un conteneur flex */
  flex-direction: column; /* on empile le texte verticalement */
  justify-content: flex-end; /* le texte descend en bas */
}

main.accueil section.citation .citation-texte {
  font-size: var(--nav-font-size);
  font-style: italic;
  color: #333;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 10px;
}

main.accueil section.citation .citation-auteur {
  margin-top: 0px;
  font-size: calc(var(--nav-font-size) * 0.8);
}

main.accueil .y_repondre,
main.accueil .y_repondre:link,
main.accueil .y_repondre:visited,
main.accueil .y_repondre:active {
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  color: #444; /* gris sobre, à ajuster */
}

main.accueil .citation .citation-texte a.y_repondre {
  display: inline-block; /* ← essentiel pour que transform fonctionne */
  transition: transform 0.3s ease-in-out; /* Transition douce */
}
main.accueil .citation .citation-texte a.y_repondre:hover {
  transform: scale(1.2); /* Zoom léger */
}

/* ✅ Correctif spécifique Safari macOS : forcer le scroll vertical */
@supports (-webkit-overflow-scrolling: touch) {
  main.accueil {
    position: relative; /* permet à Safari de recalculer la hauteur */
    height: 100vh; /* garantit une hauteur écran */
    overflow-y: auto !important; /* réactive le scroll vertical */
    -webkit-overflow-scrolling: touch; /* inertie fluide Safari */
    display: block !important; /* Safari gère mal flex ici */
  }
}

/* 🧯 Correctif Safari : éviter le bug vh + overflow:hidden */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    overflow-y: auto !important;
  }

  main.accueil {
    display: flex !important;
    overflow-y: visible !important;
  }

  .accueil-image img {
    height: auto !important;
    max-height: 84vh !important;
    width: auto;
    object-fit: contain;
  }
}

/* **************************  MEDIA QUERIES                    *********************** */

@media screen and (max-width: 768px) {
  main.accueil {
    flex-direction: column;
    padding-top: 1rem;

    box-sizing: border-box;

    overflow-y: auto; /* pour retouver le scroll */
    overflow-x: hidden; /* pas de scroll latéral */
    max-height: 100vh; /* prend la hauteur visible */

    height: 100dvh; /* nouvelle unité dynamique compatible Safari */
  }

  .accueil-image img {
    height: auto;
  }

  main.accueil section.image,
  main.accueil section.citation {
    flex: none; /* annule les valeurs flex précédentes */
  }
  main.accueil section.main-citation {
    display: block; /* annule le flex */
  }
  header nav ul {
    gap: 1em; /* Espacement entre les liens */
  }
  header .menu-ancien-monde {
    display: none;
  }
  header .header-left {
    padding-left: 0;
  }
  header .header-right {
    margin-right: 0;
  }
  main.accueil .copyright-mobile {
    padding-top: 5px;
    padding-left: 1.5rem;
  }

  main.accueil section.citation {
    flex-direction: column-reverse;
  }
  main.accueil section.citation .harraway {
    flex: 1.6;
  }
  main.accueil section.citation .magritte-lahire {
    flex: 1;
    align-items: flex-end; /* aligne le texte à droite */
    font-style: italic;
    padding-right: 20px;
  }
  main.accueil section.citation div {
  justify-content: flex-start; /* le texte part du haut */
}
}