body {
  background: rgba(247, 245, 191); /* fond beige du site reference sittes.net */
}



/* STYLES DE TEXTE ************************ */
span.italique {
    font-style: italic;
}

a {
    display: block;   /* permet à margin-top de fonctionner verticalement */
    margin-top: 2px; 
}


.imageInterfaceEcriture {
    position: fixed;       
    width: 40px;           
    z-index: 1000;        
}




 /*  
.images { width: 200px; }
#outil { left: 1100px; top: 50px; }
#scroll{ left: 350px; top: 50px; }
*/


.zone {
  width: 100px;
  height: 40px;
  position: absolute;
  cursor: grab;
}

.zone1 { left: 350px; top: 50px; }
.zone2 { left: 600px; top: 250px; }
.zone3 { left: 950px; top: 450px; }
.zone4 { left: 100px; top: 650px; }
.zone5 { left: 1100px; top: 50px; }
.zone6 { left: 1100px; top: 500px; }

.zone textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Bouton + */
.montre-recit {
  position: absolute;
  right: -25px;
  top: 10px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}




/* POPUPS ************************ */
.popupRecits, .popupNotes, .popupReferences {
    position: absolute;
    top: 20px;
    width: 500px;
    min-height: 358px;
    max-height: 715px;
    padding: 15px;
    display: none;
    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 */
}



.popupReferences {
    width: 260px;
    max-height: 358px;
    font-size: 16px;
}

.popupNotes {
    font-size: 18px;
}


/* Couleurs + placement */
/*
.popupRecits { background: rgba(249,251,1,1); left: 20px; }
.popupNotes { background: rgba(158,242,40,1); left: 570px; }
.popupReferences { background: rgba(250,2,4,255); left: 1120px; }
*/


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

/* Bouton X */
.fermer-popup {
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
}

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





.palette {
  position: relative;
  transform-origin: 0 0; /* point de zoom */
  cursor: grab;
  width: 2000px;  /* grande largeur pour le “canvas” */
  height: 2000px; /* grande hauteur */

  overflow: hidden; /* empêche le scroll automatique */
}

.zone {
  position: absolute;
  cursor: grab; /* curseur local */
}







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

.label {
    position: fixed;    
    background: #111;            /* gris très foncé proche du noir */
    color: lightgray;                 /* texte blanc pour contraste */
    padding: 4px 2px;
    font-size: 24px;             /* un peu plus grand */
    font-family: sans-serif;     /* police sans serif */
    text-decoration: underline;  /* texte souligné */
    display: none;               /* caché par défaut puis affiché par script */
    z-index: 999;
}




/* Positionnement X/Y*/
#corps { top: 5px; left: 100px;}
#cerveau { top: 5px; left: 55%; transform: translateX(-50%);}
#environnement { top: 5px; right: 20px; }

#cela1 { top: 300px; left: 100px;}
#cela2 { top: 300px; left: 55%; transform: translateX(-50%);}
#cela3 { top: 300px; right: 20px; }

#former { top: 750px; left: 100px;}
#reflechir { top: 750px; left: 55%; transform: translateX(-50%);}
#situer { top: 750px; right: 20px; }