/* main.oeuvre)2025   -------------------------------------------- */

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

main.oeuvre-2025 {
    display: flex;
    flex-direction: row;
    font-size:large;
}

main.oeuvre-2025 section.image {
    flex: 60%;                 /* 60% large */   
    display: flex;             /* pour centrer verticalement */
    justify-content: center;   /* pour centrer horizontalement */
    padding : 0rem 3rem 0rem 0rem;       /* pour un écart à droite */

    max-height: 84.5vh;         /* Pour safari, 13 pouces. En 15 et + ?? */
}

/* ------------------------------------------------------------------*/
/* paramètrage de l'image -------------------------------------------*/

main.oeuvre-2025 section.image .image-jpg {
    max-width: 100%;     /* elle s’adapte au conteneur */
    height: auto;        /* hauteur calculée automatiquement */
    object-fit: contain; /* (si jamais c’est un <img> ou background) */
}

main.oeuvre-2025 section.image img.image-memoire-miniature {
    max-width: 300px;
    max-height: 300px;
}
/* Cas particulier : section contenant une image miniature */
main.oeuvre-2025 section.section-memoire-miniature {
    align-items: center;       /* centre verticalement uniquement dans ce cas */
}

main.oeuvre-2025 section.image img.image-machine-desirante {
    max-width: 20rem; /* 7,3 cm sur un 15 pouces 2800x1800 */
}

main.oeuvre-2025 section.image img.image-symbiose-bb-4 {
    max-width: 29rem; /* 10,7 cm sur un 15 pouces 2800x1800 */
}

main.oeuvre-2025 section.image img.image-symbiose-bb-3 {
    max-width: 41rem; /* 15 cm sur un 15 pouces 2800x1800 */
}

main.oeuvre-2025 section.image img.image-triptyque {
    max-width: 32%;
}

main.oeuvre-2025 section.image img.image-triptyque-centre
{
    margin-right: 10px;
    margin-left: 10px;
}

main.oeuvre-2025 section.image img.image-diptyque {
    max-width: 48%;
}

main.oeuvre-2025 section.image img.image-diptyque-droite
{
    margin-left: 10px;
    margin-right: 20px;
}

main.oeuvre-2025 section.image img.image-diptyque-droite-dreamers
{
    margin-left: 10px;
    margin-right: 5rem;
}

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

main.oeuvre-2025 .cartel{
    flex:40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1rem 1rem 2rem;
    height: 100%; /* <-- important si le parent (main) a une hauteur */
    box-sizing: border-box;
}
main.oeuvre-2025 .cartel > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden; /* empêche les débordements */
}

main.oeuvre-2025 .cartel .voir-plus {
    font-size:1.2rem;
    color: rgb(152, 100, 3)/* #6a2f75; */
}

/* paramétrage de la catégorie --------------------------------------------*/

main.oeuvre-2025 .cartel .categorie {
    font-style: italic;
    color: #555;
}
main.oeuvre-2025 .cartel .categorie h2 {
    margin: 1rem 0rem 0rem 0rem;
    font-size: 1.3rem; /* rien pour la version précédente */
}
main.oeuvre-2025 .cartel .categorie p {
    margin-top: 0;
}   

main.oeuvre-2025 .cartel .categorie-presentation {
    font-size:1.2rem;
}

main.oeuvre-2025 .cartel .categorie-presentation a {
    font-weight: bold; /* gras */
    font-style: italic;
    text-decoration: none;
    color: #333; 
    transition: color 0.3s ease;
}

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

main.oeuvre-2025 .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.oeuvre-2025 .cartel .cartel-technique > * {
    margin: 0.5rem;
}

main.oeuvre-2025 .cartel .cartel-technique h2 {
    font-size: 1.3rem;   /* augmente la taille, 1,9 pour la version précédente */
    color: #222;       /* couleur au choix */
}

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

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

main.oeuvre-2025 .cartel .cartel-technique h2 span {
    font-size: 1.2rem;   /* augmente la taille */
    font-style: italic;
}

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

main.oeuvre-2025 .cartel .categorie a,
main.oeuvre-2025 .cartel .cartel-technique a
{
    font-weight: 900; /* gras */
    font-style: italic;
    text-decoration: none;
    color: #666;
    transition: color 0.3s ease;
}

main.oeuvre-2025 .cartel .categorie .explication-categorie,
main.oeuvre-2025 .cartel .cartel-technique .explication-titre
{
    font-size:1.2rem;
}

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

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

/* --- Scroll vertical propre sur cartel-fonctionnel --- */
main.oeuvre-2025 .cartel .cartel-fonctionnel {
    padding: 0.5rem 2.5rem 0rem 1rem;
    font-style: italic;
    color: #333; 
    text-align: justify;
    font-size: 1rem;

    min-height: 0; /* nécessaire pour le scroll avec flexbox */
    overflow-y: auto;         /* ✅ ascenseur si déborde */
    -webkit-overflow-scrolling: touch; /* ✅ inertie sur mobile */

    flex: 1 1 auto;
}

/* Scrollbar cachée par défaut */ 
main.oeuvre-2025 .cartel .cartel-fonctionnel::-webkit-scrollbar {
  width: 0; 
  height: 0;
}

/* Scrollbar fine et visible au survol */
main.oeuvre-2025 .cartel .cartel-fonctionnel:hover::-webkit-scrollbar {
  width: 0.5rem;
  height: auto;
}

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

/* Marges des paragraphes internes */
main.oeuvre-2025 .cartel .cartel-fonctionnel p {
    margin: 5px 5px;
}


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

/* ------------------------------------------------------------------*/
/* paramétrage des flèches suivants, précédents ---------------------*/

main.oeuvre-2025 .suivant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;

    font-size: 1.5rem;   /* augmente la taille */
    font-weight: bold;   /* gras */
    color: gray;       /* couleur au choix */
}

main.oeuvre-2025 .suivant a {
    font-size: 1.5em;
    text-decoration: none;
    color: #333; 
    transition: color 0.3s ease;
}

main.oeuvre-2025 .suivant .prev {
    text-align: left;
    padding-left: 1.5rem; /* on décale la flèche gauche */
}

main.oeuvre-2025 .suivant .next {
    text-align: right;
    padding-right: 2.5rem; /* espace cliquable élargi */
}




/* Patch Safari */

_::-webkit-full-page-media, _:future, :root main.oeuvre-2025 section.images {
  border: 2px solid green;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px; /* espace entre les images */
  box-sizing: border-box;
  overflow: hidden;
}

_::-webkit-full-page-media, _:future, :root main.oeuvre-2025 section.image img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

_::-webkit-full-page-media, _:future, :root main.oeuvre-2025 section.image {
    font-size: 0; /* peut-être utile pour d'autres version de safari */
    _border: 2px solid red; /* pour vérifer */
}
_::-webkit-full-page-media, _:future, :root main.oeuvre-2025 section.image img {
    display: inline-block;  /* peut-être utile pour d'autres version de safari */
    vertical-align: top;  /* peut-être utile pour d'autres version de safari */
}