@charset "utf-8";
/* Viewer JPG – PC + mobile/tablette */

/* --------------------------------------
   DESKTOP PAR DÉFAUT (≥ 1200px)
   → frise horizontale
--------------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    overflow-y: hidden;   /* pas de scroll vertical */
    overflow-x: hidden;   /* scroll géré par #page-wrap */
}

/* Conteneur horizontal des panneaux (images + texte) */
#page-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;     /* tous les panneaux font 100vh */
    height: 100vh;            /* exactement hauteur écran */
    overflow-x: auto;         /* barre horizontale ici */
    overflow-y: hidden;
    background-color: #ffffff;
}

/* Chaque panneau (image ou texte) se place à la suite horizontalement */
.panel {
    flex: 0 0 auto;
    height: 100vh;            /* même hauteur que la fenêtre */
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    margin-right: 1vw;        /* petit espace entre les panneaux */
}

/* pas de marge après le dernier */
.panel:last-child {
    margin-right: 0;
}

/* ------------------------------
   Bouton Back
---------------------------------*/
#returnBack {
    top: 10%;
    cursor: pointer;
    height: 4vw;
    opacity: 0.5;
    position: fixed;
    right: 5%;
    width: 4vw;
    z-index: 10;
}
#returnBack img {
    width: 100%;
    height: 100%;
    display: block;
}
#returnBack:hover {
    opacity: 1;
}

/* ------------------------------
   PANNEAUX IMAGES
---------------------------------*/

.image-panel {
    position: relative;
    justify-content: center;
}

/* Image "toute hauteur d'écran" */
.image-panel img {
    max-height: 100vh;
    height: 100vh;
    width: auto;
    display: block;
    background-color: #ffffff;
}

/* Nom du fichier en bas à gauche */
.image-caption {
    position: absolute;
    left: 0;
    bottom: 2vh;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 0.9vw;
    padding: 0.15em 0.6em;
    white-space: nowrap;
}

/* ------------------------------
   PANNEAU TEXTE (titre + résumé)
---------------------------------*/

.text-panel {
    min-width: 26vw;
    max-width: 40vw;
    padding: 2vh 1.8vw;
    box-sizing: border-box;
}

/* Le texte occupe TOUTE la hauteur dispo, comme l’image */
.cartel-text {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* zone haut (titre + matière + résumé) */
.cartel-top {
    flex: 1 1 auto;
    overflow: hidden;       /* pas de scroll interne */
}

/* lien retour au site, en bas de la colonne */
.cartel-bottom {
    flex: 0 0 auto;
    margin-top: 1vh;
    font-size: 0.9vw;
}

/* Titre de l'œuvre */
.cartel-titre {
    font-size: 1.8vw;
    font-weight: 700;
    margin-bottom: 0.5vh;
}

/* Année, matière, technique */
.cartel-annee,
.cartel-matiere,
.cartel-technique {
    font-size: 0.9vw;
    margin-bottom: 0.3vh;
}

/* Matière en italique */
.cartel-matiere em {
    font-style: italic;
}

/* Sous-titre de résumé éventuel */
.cartel-titre-resume {
    font-size: 1vw;
    font-weight: 700;
    margin: 1vh 0 0.5vh 0;
}

/* Résumé : paragraphes séparés, texte compact */
.cartel-resume {
    margin-top: 0.8vh;
}

.cartel-resume p {
    margin: 0 0 0.7em 0;
    font-size: 0.9vw;
    line-height: 1.25;
}

/* ------------------------------
   Liens
---------------------------------*/
a {
    text-decoration: none;
    font-weight: 700;
    color: #000;
}
a:hover {
    color: #F0F;
}

/* Liens dans le résumé */
.cartel-resume a {
    text-decoration: underline;
}

/* ===========================================================
   MOBILE + TABLETTE (< 1200px)
   → affichage VERTICAL
=========================================================== */

@media (max-width: 1199px) {

    html, body {
        margin: 0;
        padding: 0;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;  /* scroll vertical */
    }

    #page-wrap {
        flex-direction: column;
        min-height: 100vh;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .panel {
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 0.1vh;   /* ton réglage compact */
    }

    .panel:last-child {
        margin-bottom: 0;
    }

    .image-panel img {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .image-caption {
        font-size: 3vw;
        bottom: 0.4em;
    }

    #returnBack {
        width: 12vw;
        height: 12vw;
        top: 3%;
        right: 5%;
    }

    .text-panel {
        min-width: 100%;
        max-width: 100%;
        padding: 2vh 5vw;
    }

    /* Valeurs par défaut pour mobile (portrait)
       → smartphone portrait : texte confortable */
    .cartel-titre {
        font-size: 5vw;
    }

    .cartel-annee,
    .cartel-matiere,
    .cartel-technique,
    .cartel-bottom {
        font-size: 3.5vw;
    }

    .cartel-titre-resume {
        font-size: 3.7vw;
    }

    .cartel-resume p {
        font-size: 3.5vw;
        line-height: 1.35;
    }
}

/* ===========================================================
   AFFINAGE 1 : SMARTPHONE HORIZONTAL
   (écran bas, trop peu de hauteur → on réduit un peu)
=========================================================== */

@media (max-width: 767px) and (orientation: landscape) {

    .cartel-titre {
        font-size: 2.9vw;   /* ↓ 3.8 → 2.9 */
    }

    .cartel-annee,
    .cartel-matiere,
    .cartel-technique,
    .cartel-bottom {
        font-size: 2.0vw;   /* ↓ 2.6 → 2.0 */
    }

    .cartel-titre-resume {
        font-size: 2.2vw;   /* ↓ 2.8 → 2.2 */
    }

    .cartel-resume p {
        font-size: 2.2vw;   /* ↓ 2.8 → 2.2 */
        line-height: 1.26;
    }

    .image-caption {
        font-size: 1.4vw;   /* un peu plus petit aussi */
    }
}

/* ===========================================================
   AFFINAGE 2 : TABLETTE VERTICALE
   (768–1199px, portrait)
=========================================================== */

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {

    .cartel-titre {
        font-size: 3vw;
    }

    .cartel-annee,
    .cartel-matiere,
    .cartel-technique,
    .cartel-bottom {
        font-size: 2vw;
    }

    .cartel-titre-resume {
        font-size: 2.2vw;
    }

    .cartel-resume p {
        font-size: 2.2vw;
        line-height: 1.3;
    }
}