/* Fichier à inclure dans toutes les pages de texte contenant des images */


.panorama, .panorama_petit, .panoramale {
text-align: center !important ;
text-indent: 0pt ;
/*overflow: auto;*/
width: 800px;
max-width: 100% !important;/* Ne marche pas : la taille fait 800 px mais le conteneur est agrandi à cette taille
 (cela marche pour l’image isolée parce qu’on fait un object-fit */
/*display: block flex ;*/
/*margin: 0 0 10px 10px;*/
margin-left: auto;
margin-right: auto ;/* Permet de centrer horizontalement !!! */
/*padding: 0 0 2px 0;*/ /* en-dessous de 4 : barre verticale visible sous opera ; sous rekonq et Chromium ça ne fonctionne pas 
10 semble optimal pour firefox ; chromium 2. rekonq, qtweb aucun effet (et pas bon) ; opera 5 */
/* j'ai mis une particularisation dans p_voyage.php) */
 /*scrollbar-width: thin;*/
 overflow-x: scroll ;
 /*overflow-x: clip ;*/
 overflow-y: clip ;
}

.panorama{
/*height: 363px;*/ /*En fait, ne semble pas jouer du tout ! *//* → inutile depuis qu’on ne définit plus explicitement la taille du div (grâce à overflow-y) */
}

.panorama img {
  height: 333px ;
  object-fit: contain ;
  /* ces réglages utilisées pour les images isolées ne vont pas ici : font disparaître l’ascenseur */
  /*width: 800px ;*//* → la largeur est codée en dur et dépend de l’image  */
 /* max-width: 100% ;*//* Je n’ai pas trouvé mieux (pour ne pas dépasser de la page et ne pas rogner l’ascenseur= */
  /*object-fit: cover ;*/ /* Permet de rogner l’image (si on sous-dimensionne la fenêtre), plutôt que de la rogner*/ 
  /* Ceci pour tenir compte du padding de la page : https://stackoverflow.com/questions/22564756/css-how-to-make-max-width-fixed-when-adding-padding*/
  /*-webkit-box-sizing: border-box;*/ /* Safari/Chrome, other WebKit */
  /*-moz-box-sizing: border-box;*/    /* Firefox, other Gecko */
  /*box-sizing: border-box;*/         /* Opera/IE 8+ */  
}


.panorama_petit {
/*height: 290px;*/
}
/* Je ne sais plus ce que ça fait mais ça semble lié aux panoramas */
#zoom {
	margin: 2px;       
	padding: 0;
        border: 5px solid rgb(102, 51, 0);
	line-height: 337px;
}


/* Environnement côte à côte, pour placer une petite photo verticale et une grande horizontale, côte à côte */
.cote_a_cote{
  text-align: center ;
}


/* Ligne de code utilisées pour les images multiples */
/*  Source : www.ultra-fluide.com/ressources/css/menu-onglets-rollover.htm
/*
    body {
     background:#fff;
     margin:0;
     padding:20px;
     color:#000;
     font:small Georgia,Serif;
     _font:x-small;
      }
*/

p.centrage-image {
  text-align: center !important ;
  text-indent: 0pt ;
  max-width: 100% ;
}


/* Recodage des CSS des images en utilisant les grilles CSS3 */
/* je renomme : image → imgcss3 */


.imgcss3-multiple, .imgcss3le-multiple {  
  margin: auto ; /* permet de centrer (en CSS3) */
  /*display: inline-block ;*//* adapte la largeur au contenu (mais pas compatible avec margin auto */
  width: fit-content ; /* CSS3 adapte la taille au contenu */
  /* → je ne définis plus de taille, ce sont les images à l’intérieur qui devraient s’en charger */
  /*text-align: center ;*/
  /*border: 1px solid black ;*//* → pour déboguer*/
}

.imgcss3-multiple-v, .imgcss3le-multiple-v {  
  margin: auto ; 
  width: fit-content ;
}

.imgcss3-multiple-hv, .imgcss3le-multiple-hv
{/* Positionnement « naturel » (grande horiz & petite verticale). Pas besoin de grille a priori */
  margin: auto ; 
  width: fit-content ;
 /* grid-template-areas: "igh ipv" ;
  align-items: end ;*/
}

.imgcss3-multiple-hv-inv, .imgcss3le-multiple-hv-inv
{
  margin: auto ; 
  width: fit-content ;
  display: grid ;
  flex-direction: row ;
  /*grid-template-columns: 350px 1fr;*/
  grid-auto-flow: column;
  grid-template-areas: "iph2 igv" "iph igv" ;
  grid-template-rows: 1fr auto ; /* la première ligne prend le maximum d’espace et la seconde s’adapte à son contenu */
  align-items: end ; 
  /* ce qui suit ne fonctionne pas pour enlever l’espace vertical entre les photos
   gap: 0px ;
  border-collapse: revert;
  border-bottom-width: 0 ;
  */
}

.board-item {
  border-bottom: none ;
}



.imgcss3-multiple-vh, .imgcss3le-multiple-vh
{
  margin: auto ; 
  width: fit-content ;
  display: grid ;
  flex-direction: row ;
  grid-template-areas: "ipv igh" ;
  align-items: end ;
}

.imgcss3-multiple-vh-inv, .imgcss3le-multiple-vh-inv
{ /* Grande verticale et petite horizonale : c’est la possibilité de mettre
  deux images à droite qui entraîne la nécessité de placer une grille */
  margin: auto ; 
  width: fit-content ;
  display: grid ;
  flex-direction: row ;
  grid-auto-flow: column;
  grid-template-areas: "igv iph2" "igv iph" ;
  grid-template-rows: 1fr auto ;
  align-items: end ;
  /*justify-items: end ;*/
}

/* encapsulation des images multiples dans les cas précédents */
.imgcss3-h0-eltmul {  
  grid-area: igh;
  line-height:0 ;
}

/* image secondaire : */ 
.imgcss3-hs-eltmul {  
  grid-area: iph;
  line-height:0 ;
}

.imgcss3-hs-eltmul2 {  
  grid-area: iph2;    
  /*-webkit-border-vertical-spacing: 0px;*/
  -webkit-border-horizontal-spacing: 0px;
  line-height:0 ;/* C’est CECI qui donnait un espace intempestif entre les images !!!*/
}

.imgcss3-v0-eltmul {  
  grid-area: igv;
  line-height:0 ;
}

.imgcss3-vs-eltmul {  
  grid-area: ipv;
  line-height:0 ;
}

/* Tailles des images. Elles étaient originellement déclarées en dur dans le fichier : grandes_image.php 
 (et modifiées pour la version mobile */
/* grande horizontale */
img.imgcss3-h0 {
  width: 500px;
  height: 338px; 
}
/* petite verticale */
img.imgcss3-vs {
  width: 220px; 
  height: 338px; 
}
/* grande_verticale */
img.imgcss3-v0 {
  width: 338px; 
  height: 500px;
}
/* petite_horizontale */
img.imgcss3-hs {
  width: 338px; 
  height: 220px; 
}

/* Styles pour les images relief apparaissant dans le texte (hors fenêtres bondissantes) */
img.anaglyphe {
  border: 5px solid rgb(102, 51, 0) ; 
  width: 500px; 
  height: 332px;
}
img.pokescope {
  border: 5px solid rgb(102, 51, 0) ; 
  width: 350px; 
  height: 232px;
}

img.anaglyphe_v {
  border: 5px solid rgb(102, 51, 0) ; 
  width: 332px; 
  height: 500px;
}

img.pokescope_v {
  border: 5px solid rgb(102, 51, 0) ; 
  width: 332px; 
  height: 500px;  
}




img.relief {
}

/* Style apparaissant uniquement pour la connexion à vitesse lente (écriture en italique et fond coloré) */
img.image-isolee, img.image-rangee, img.image-rangee-v, img.anaglyphe, img.pokescope, img.anaglyphe_v, img.pokescope_v 
.imgcss3le-multiple img, .imgcss3le-multiple-v img, .imgcss3le-multiple-hv img, .imgcss3le-multiple-hv-inv img, .imgcss3le-multiple-vh-inv img, .imgcss3le-multiple-vh img
{
  background-color: rgb(217,204,191) ;
  font-style: italic ; 
  /*display: inline-block ;*/ /* (pour que l'image se mette à la taille correctement en bas débit et sous Firefox*/
}

img.image-isolee {
  max-width: 100% ;/* Je n’ai pas trouvé mieux (pour ne pas dépasser de la page et ne pas rogner l’ascenseur= */
  /*max-width:calc(50%);*/
  /*max-width:fit-content(500px);*/
  /*max-width: var(--container - 1600px) ;*/
  /*max-width: calc(var(--spacing) * 50);*/
  /* 16 px : correspond à la somme des padding de #contenu */
  object-fit: cover ; /* Permet de rogner l’image (si on sous-dimensionne la fenêtre), plutôt que de la rogner*/ 
  /* Ceci pour tenir compte du padding de la page : https://stackoverflow.com/questions/22564756/css-how-to-make-max-width-fixed-when-adding-padding*/
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */  
}

  
 .entete-image, .entete-image-v, .entete-image-vh-inv, .entete-image-hv-inv {
      float:left;
/*      background:#DAE0D2 url(../images/maquette/fond-menimages.gif) repeat-x bottom;*/
      font-size:93%;
      line-height:normal;
      display: flex ;/* Ceci permet de gérer le retour à la ligne quand on dépasse la largeur */
      flex-wrap: wrap ;
      }
      .entete-image {
        width:510px; /* 10 pixels ajoutés pour tenir compte des marges */
      }
      .entete-image-v {
        width:348px; /* 10 pixels ajoutés pour tenir compte des marges */
      }
     .entete-image-vh-inv {
        width:340px; 
      }
     .entete-image-hv-inv {
        /*width:750px; */
        width:340px; 
      }

	  
    .entete-image ul, .entete-image-v ul, .entete-image-vh-inv ul, .entete-image-hv-inv ul {
      margin:0;
      padding:0px 10px 0;
      list-style:none;
      }
    .entete-image li, .entete-image-v li, .entete-image-vh-inv li, .entete-image-hv-inv li {
      float:left;
      background:url(../images/maquette/gauche_lesdeux.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      }
/* Ajout : compenser ce qui est dans le style principal */
    .entete-image ul li:before, .entete-image-v ul li:before, .entete-image-vh-inv ul li:before, .entete-image-hv-inv ul li:before {
	
  margin-right: 0mm ;

	  content: "" ; 

    }  
  .entete-image a, .entete-image-v a, .entete-image-vh-inv a, .entete-image-hv-inv a {
      float:left;
      display:block;
      width:.1em;
      background:url(../images/maquette/droite_lesdeux.gif) no-repeat right top;
      padding:5px 15px 4px 6px;/* haut droite bas gauche */
      text-decoration:none;
      font-weight:bold;
      color: rgb(179,153,128) ;
      white-space:nowrap;
      }
    .entete-image > ul a, .entete-image-v > ul a, .entete-image-vh-inv > ul a, .entete-image-hv-inv > ul a 
      {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .entete-image a , .entete-image-v a{float:none;}
    /* End IE5-Mac hack */
    .entete-image a:hover, .entete-image-v a:hover, .entete-image-vh-inv a:hover, .entete-image-hv-inv a:hover {
      color: rgb(153,51,0) ;
      }

/*  Rubrique apparaissant pour l'onglet en cours de sélection*/	  
 .principale .nav-principale, .n1 .nav-n1,
    .n2 .nav-n2, .n3 .nav-n3,
    .n4 .nav-n4, .n5 .nav-n5,
    .n6 .nav-n6, .n7 .nav-n7,
    .n8 .nav-n8, .n9 .nav-n9,
    .n10 .nav-n10, .n11 .nav-n11,
    .n12 .nav-n12, .n13 .nav-n13,
    .n14 .nav-n14, .n15 .nav-n15,
    .n16 .nav-n16, .n17 .nav-n17,
    .n18 .nav-n18, .n19 .nav-n19
	{
      background-position:0 -150px;/* l’image fait 300 de haut ; en la descendant de 150px on en affiche la zone plus foncée */
      border-width:0;/* Par ailleurs les imagettes autres que la principes sont dans une balise <li>. Leur fond n’est donc pas abaissé sauf si */
      }/* on place la souris dessus (:hover) (par contre le coup du décalage de 100% horizontalement sur <a>, je n’ai pas compris pour l’instant ;
      cela devrait servir à placer l’arrondi de droite) */
    .principale .nav-principale a, .n1 .nav-n1 a,
    .n2 .nav-n2 a, .n3 .nav-n3 a,
    .n4 .nav-n4 a, .n5 .nav-n5 a,
    .n6 .nav-n6 a, .n7 .nav-n7 a,
    .n8 .nav-n8 a, .n9 .nav-n9 a,
    .n10 .nav-n10 a, .n11 .nav-n11 a,
    .n12 .nav-n12 a, .n13 .nav-n13 a,
    .n14 .nav-n14 a, .n15 .nav-n15 a,
    .n16 .nav-n16 a, .n17 .nav-n17 a,
    .n18 .nav-n18 a, .n19 .nav-n19 a
	{
      background-position:100% -150px;
      padding-bottom:5px;
      font-weight:bold;
      color: rgb(102,51,0);
      }
 

    .entete-image li:hover, .entete-image li:hover a, .entete-image-v li:hover, 
    .entete-image-v li:hover a, .entete-image-vh-inv li:hover, .entete-image-vh-inv li:hover a,
    .entete-image-hv-inv li:hover, .entete-image-hv-inv li:hover a {
      background-position:0% -150px;
      color: rgb(153,51,0) ;
      }
    .entete-image li:hover a, .entete-image-v li:hover a, .entete-image-vh-inv li:hover a, .entete-image-hv-inv li:hover a {
      background-position:100% -150px;
      }

 
 .nav-principale img, .nav-n1 img, .nav-n2 img, .nav-n3 img, .nav-n4 img, .nav-n5 img, .nav-n6 img, 
 .nav-n7 img, .nav-n8 img, .nav-n9 img, .nav-n10 img, .nav-n11 img, .nav-n12 img, .nav-n13 img, 
 .nav-n14 img, .nav-n15 img, .nav-n16 img, .nav-n17 img, .nav-n18 img, .nav-n19 img { 
  border: 2px solid rgb(102, 51, 0);
  cursor: pointer;
  background-color: rgb(217,204,191) ;
}

/* Sur l'imagette en cours d'affichage le curseur n'est pas en pointeur */
    .principale .nav-principale img, .n1 .nav-n1 img,
    .n2 .nav-n2 img, .n3 .nav-n3 img,
    .n4 .nav-n4 img, .n5 .nav-n5 img,
    .n6 .nav-n6 img, .n7 .nav-n7 img,
    .n8 .nav-n8 img, .n9 .nav-n9 img,
    .n10 .nav-n10 img, .n11 .nav-n11 img,
    .n12 .nav-n12 img, .n13 .nav-n13 img,
    .n14 .nav-n14 img, .n15 .nav-n15 img,
    .n16 .nav-n16 img, .n17 .nav-n17 img,
    .n18 .nav-n18 img, .n19 .nav-n19 img
	{
  cursor: auto;
	}



 .entete-image  img {
   height:56.3px ; /* 338/6*/
   width: 83.3px ; /* 500/6*/
}
.entete-image-v img, .entete-image-vh-inv img, .entete-image-hv-inv img  {
   height: 83.3px ; /* 500/6*/
   width:56.3px ; /* 338/6*/
}
 
 .entete-image  img, .entete-image-v img, .entete-image-vh-inv img, .entete-image-hv-inv img  {
   top: -56.3px ;
   padding-bottom: 0px ;
   margin-bottom: -1px ;
   margin-left: -7px;
   margin-right: -7px;
 }

 .images-rangees {
     text-align: center ;
     line-height: 0% ; /* pas d’espace vertical entre les images */
     margin-bottom: 4px;
  }
 .images-rangees div {
     /*width: 720px ;*/
     display: inline-block;
     width: auto ;
     text-align: left ;
     margin-right: auto ;
     margin-left: auto ;
 }
 .images-rangees img {
   cursor: auto ;
 }
 .images-rangees img.image-rangee {
      width: 350px; 
      height: 263px; 
 }
 .images-rangees img.image-rangee-v {
     width: 263px; 
     height: 350px; 
  } 


/* menu : 250 px ; image h : 500 px ; image v : 220 px */
/* Attention : tout ce qu’on va mettre là-dedans devra être écrasé dans la version mobile */  
@media screen and (max-width: 1100px) {
  img.imgcss3-vs, img.imgcss3-hs {
    width: 0px ;
    display: none ;
  } 
}    

@media screen and (max-width: 1060px) {
  .panorama, .panorama_petit, .panoramale {
    width: 600px ;
  }
  .panorama img {
    height: 250px ;
  }
}
@media screen and (max-width: 860px) {
  .panorama, .panorama_petit, .panoramale {
    width: 450px ;
  }
  .panorama img {
    height: 200px ;
  }  
}
/* Comme on a supprimé le menu on peut agrandir les panoramiques*/
@media screen and (max-width: 750px) {
  .panorama img { 
    height: 250px ;
  }
}