body {
  background: black; 
}



/* ************************************* */
/* ************************************ */
/* *********************************** */

h1, h2 {
  margin: 0;
  text-align: center;
  z-index: 1001;
  position: fixed;

  background: #111;
  color: lightgray;
  padding: 0.5vh 0.4vw;

  font-size: clamp(1rem, 2vw, 24px); /* responsive */
  font-family: sans-serif;
  text-decoration: underline;
}

/* Position responsive */
h1 { 
  left: 5vw; 
  top: 45vh; 
}

h2 { 
  right: 5vw;   /* mieux que left: 1150px */
  top: 45vh; 
}


/* ************************************* */
/* ************************************ */
/* *********************************** */




/* ************************************* */
/* ************************************ */
/* *********************************** */

.imageFond {     
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;     
}


/* titres cadre ************************ */
/* ************************************ */
/* *********************************** */

/*
il faut que les fasse responsive:

.title1 { left: 2vw; top: 1vh; }
.title2 { left: 20vw; top: 1vh; }
.title3 { left: 40vw; top: 1vh; }
.title4 { left: 60vw; top: 1vh; }
.title5 { left: 80vw; top: 1vh; }

.title6 { left: 2vw; top: 90vh; }
.title7 { left: 20vw; top: 90vh; }
.title8 { left: 40vw; top: 90vh; }
.title9 { left: 60vw; top: 90vh; }
.title10 { left: 80vw; top: 90vh; }

ça c'est plus propre:
*/



.title {
    font-weight: bold;
    font-family: "Apple Chancery";
    text-shadow: 0 0 10px red;
    mix-blend-mode: exclusion;
    color: white;
    font-size: clamp(1rem, 2.5vw, 2em); /* responsive */
    pointer-events: none;
}

/* Conteneur commun */
.titles {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-around; /* répartit automatiquement */
    z-index: 1000;
}

/* Ligne du haut */
.top {
    top: 1vh;
}

/* Ligne du bas */
.bottom {
    bottom: 1vh;
}

/* ************************************* */
/* ************************************ */
/* *********************************** */





/* ************************************* */
/* ************************************ */
/* *********************************** */

.zone:hover {
  mix-blend-mode: difference;
}


.zone {
    width: 100px;
    min-height: 20px;
    padding: 2px 4px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    position: absolute;
    /*cursor: pointer;*/
    height: auto;       /* allows height to grow with content */
    white-space: pre-wrap; /* preserves line breaks */
    overflow-wrap: break-word; /* wrap long words */


        /* Default textarea font style */
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;

    mix-blend-mode: normal;
    font-family: "Garamond", "Times New Roman", serif;
}




.zone1 { left: 1000px; top: 6800px; }
.zone2 { left: 120px; top: 5250px; }
.zone3 { left: 950px; top: 5450px; }
.zone4 { left: 1200px; top: 5000px; }
.zone5 { left: 700px; top: 5050px; }
.zone6 { left: 1100px; top: 5200px; }

.zone7 { left: 210px; top: 5800px; }
.zone8 { left: 790px; top: 8800px; }
.zone9 { left: 900px; top: 4950px; }
.zone10 { left: 510px; top: 5400px; }
.zone11 { left: 210px; top: 5400px; }
.zone12 { left: 350px; top: 5760px; }
.zone13 { left: 500px; top: 7760px; }
.zone14 { left: 200px; top: 5000px; }
.zone15 { left: 50px; top: 5000px; }
.zone16 { left: 1000px; top: 5730px; }
.zone17 { left: 50px; top: 6400px; }
.zone18 { left: 600px; top: 9000px; }
.zone19 { left: 300px; top: 5650px; }
.zone20 { left: 1300px; top: 4900px; }

/* ************************************* */
/* ************************************ */
/* *********************************** */



/* POPUPS ************************ */
/* ************************************* */
/* ************************************ */
/* *********************************** */

.popupRecits, .popupNotes, .popupReferences {
    position: absolute;
    top: 50px;
    width: 500px;
    min-height: 20px;
    max-height: 650px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);

    overflow-y: auto;        /* scroll vertical si le contenu dépasse */
    overflow-x: hidden;      /* optionnel : empêche le scroll horizontal */

    font-size: 20px;         
    line-height: 1.3;        
    /*  text-indent: 1.2em;  /* retrait en début de paragraphe */
    white-space: pre-line; /* garde les sauts de ligne du html */

}


.popupRecits img,
.popupNotes img {
    max-width: 100%;   /* empêche l’image de dépasser */
    height: auto;
    display: block;
    margin: 10px 0;
}


.popupReferences {
    width: 260px;
    max-height: 235px;
    font-size: 15px;
}

.popupNotes {
    font-size: 15px;
    line-height: 1.1;
}



/* LABELS INTERFACE ECRITURE ************************ */
/* ************************************* */
/* ************************************ */
/* *********************************** */


.label {
    position: absolute;     /* pour placer n’importe où */
    transform: translateX(-50%);  /* centrer horizontalement sur le point */
    background: #111;
    color: lightgray;
    padding: 4px 2px;
    font-family: sans-serif; 
    font-size: 24px;
    text-decoration: underline;
    z-index: 1001;
    white-space: nowrap;
    text-align: center;
}



/* Colonne 1/2 */
#corps, #cela1 { left: 18%; }

/* Colonne 3/4 */
#cerveau, #cela2 { left: 58%; }

/* Colonne 5 */
#environnement, #cela3 { left: 88%; }



/* Labels du haut */
#corps, #cerveau, #environnement {
    top: 70px; 
}

/* Labels du bas */
#cela1 {
    bottom: 90px;
}

#cela2 {
    bottom: 290px;
}

 #cela3 {
    top: 180px; 
}

/* ************************************* */
/* ************************************ */
/* *********************************** */






/* Couleurs + placement */
.popupRecits { background: whitesmoke; left: 20px; }
.popupNotes { background: whitesmoke; left: 570px; }
.popupReferences { background: whitesmoke; left: 1120px; }


/* ************************************* */
/* ************************************ */
/* *********************************** */

/* ************************************* */
/* ************************************ */
/* *********************************** */

/* ***************************************  */

.videoDisneyland {
    position: absolute;          /* comme les popups */
    top: calc(20px + 358px + 80px); /* top de .popupReferences + sa max-height + un petit spacing */
    left: 1120px;                /* même que .popupReferences */
    width: 292px;                /* même que .popupReferences */
}

/* ***************************************  */

#fireplace, #enjoy, #fungihands {
    position: absolute;          /* comme les popups */
    top: calc(0px + 358px + 0px); /* top de .popupReferences + sa max-height + un petit spacing */
    left: 1120px;                /* même que .popupReferences */
    width: 292px;                /* même que .popupReferences */
}
/* ***************************************  */

#vampy1, #vampy2, #vampy3 {
    position: absolute;          /* comme les popups */
    top: calc(0px + 348px + 0px); /* top de .popupReferences + sa max-height + un petit spacing */
    left: 1120px;                /* même que .popupReferences */
    width: 292px;                /* même que .popupReferences */
}

/* ************************************* */
/* ************************************ */
/* *********************************** */











/* ************************************* */
/* ************************************ */
/* *********************************** */
/* ***************PRINT********************** */
/* ************************************ */
/* *********************************** */
/* ************************************* */
/* ************************************ */
/* *********************************** */

@media print {

    /* Format A4 */
    @page { size: A4; margin: 20mm; }

    /* Masquer tous les éléments qui ne sont PAS les popups */
    h1, h2, .title, .titles, .imageFond, .zone, .videoDisneyland,
    #fireplace, #enjoy, #fungihands, #vampy1, #vampy2, #vampy3,
    .label {
        display: none !important;
    }

    /* Popups : remise dans le flux normal */
    .popupRecits, .popupNotes, .popupReferences {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 40px !important;
        font-size: 16px;
        line-height: 1.4;
        background: none !important;
    }

    /* Contenu des popups */
    .popupRecits *, .popupNotes *, .popupReferences * {
        display: block !important;
        visibility: visible !important;
    }

    /* Pagination */
    .popupRecits { page-break-after: always; }
    .popupNotes { page-break-after: always; }
    .popupReferences { page-break-after: auto; }

    /* Titres automatiques pour PDF */
    .popupRecits::before { content: "survol"; display: block; font-weight: bold; margin-bottom: 10px; }
    .popupNotes::before { content: "atterissage"; display: block; font-weight: bold; margin-bottom: 10px; }
    .popupReferences::before { content: "ancrage"; display: block; font-weight: bold; margin-bottom: 10px; }

    /* Images */
    .popupRecits img,
    .popupNotes img,
    .popupReferences img {
        max-width: 100%;
        height: auto;
        page-break-inside: avoid;
        margin: 10px 0;
    }

    /* Paragraphes */
    p {
        page-break-inside: avoid;
        orphans: 3;
        widows: 3;
    }
}

/* ************************************* */
/* ************************************ */
/* *********************************** */
/* ************************************* */
/* ************************************ */
/* *********************************** */
/* ************************************* */
/* ************************************ */
/* *********************************** */