.titreright {
  position:relative;
}
.options_nav_haut, .options_nav_milieu, .options_nav_bas {
  display:inline-block;font-size:2.1em;
}
.options_nav_haut {
  position:absolute;bottom:-27px;right:0;overflow:visible;width: 310px !important;
}
.options_nav_milieu {
  position:absolute;bottom:30px;right:0;overflow:visible;width: 310px !important;
}
.options_nav_bas {
  width:99%;
  margin:0 15px 0 5px;
}
/* note: il suffit de retirer les classes ci-dessous pour retrouver la taille d'avant de l'entete */
.titre {
  /*font-family: "InterVariable",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;*/
  font-family: TextFont, verdana, arial, helvetica;
  font-size:22px;
  padding-left: 4em;
}
.titrecont {
	font-size: 0.9em;
	padding: 0.5em 0.1em 0.1em 0.1em;
	height: 2.05em;
  width:calc(100% - 3px);


}















/* tout ça à mettre dans tpl.css et virer */
.content.giant div.pagination {
  font-size:2vw;
}
.content.big div.pagination {
  font-size:1.5vw;
}
.content.medium div.pagination {
  font-size:1vw;
}
.content.small div.pagination {
  font-size:1vw;
}

.newww {
  width:25px;
  height:12px;

/*
  margin:auto 3px;
*/
  /* hspace=3 align=absmiddle */
}


.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




























 /**********/
/* COVER */
/**********/
.eeentete > div:first-child, div[class^="mmmembre"] > div:first-child, .covercont {
  position:absolute;
  left:0.3em;
  top:0.3em;
  width:3.4em;
  height:3.4em;
  z-index:1;
  display:var(--entete_cover_display); /* permet de cacher la cover */
}
.cover, .eeentete > div:nth-child(1) > p, div[class^="mmmembre"] > div:nth-child(1) > p  { /* un seul profil couleur pour la cover */
  border-radius:5px;
  background-color:#6F6F6F;
  border-top:1px #7f9faf solid;
  border-bottom:1px #7f9faf solid;
  border-left:1px #7f9faf solid;
  border-right:1px #7f9faf solid;
}
.eeentete > div:nth-child(1) > p, div[class^="mmmembre"] > div:nth-child(1) > p, .cover {
  width:3.4em;
  height:3.4em; /* https://stackoverflow.com/questions/5427371/multiple-background-images-and-a-background-color */
/*
  background: url(http://127.0.0.1/edsa-yamafoto/images/default/cliparts/8.gif) left no-repeat,
              #6F6F6F;
*/
  /* background-size: contain, 100%;*/ /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
}
.cover {
  width:99%;
  height:99%;
}
.cover > a > img {
  border:5px #000000 solid;
}
.fadeout {
  animation-name: fadeout;
  animation-duration: 0.5s;
}

@keyframes fadeout {
  0%   {opacity:1;}
  100% {opacity:0;}
}

.fadein {
  animation-name: fadein;
  animation-duration: 0.5s;
}

@keyframes fadein {
  0%   {opacity:0;}
  100% {opacity:1;}
}

/* liste */
.margeurliste {
  margin:var(--content_liste_margin);
}
















































/* sous nav et bouton sous nav ma gal (admin) */
/* recencés pour magal: c-h4, c-b4, c-c4b, c-cont4, virer les autres apres si ils sont inutiles */

.c-h4 { background-color:#7f9db9; }

.c-b4 { background-color:#ffffff;border-left:1px #7f9db9 solid;border-right:1px #7f9db9 solid; }


.c-c4b { border-left:1px #7f9db9 solid;border-right:1px #7f9db9 solid; }
.c-cont4, .c-cont4c { border-left:1px #ffffff solid;border-right: 1px #d8d2bd solid; }
.c-cont4b { border-left: 1px #ffffff solid;border-right: 1px #d8d2bd solid;border-top: 1px #ffffff solid;border-bottom: 1px #d8d2bd solid; }
.c-cont4d { border-left: 1px #ffffff solid;border-right: 1px #d8d2bd solid;border-bottom: 1px #d8d2bd solid; }
/* texte du contenu */
.c-cont4, .c-cont4b, .c-cont4c, .c-cont4d { background-color:#fff0ff;color:#996666; }
/* texte 2 du contenu a placer dans un */
.c-cont4 .t2, .c-cont4b .t2 { color:#000; }
/* lien du contenu */

.c-t4 a, .c-t4 a:link, .c-t4 a:active, .c-t4 a:visited,
.c-t4c a, .c-t4c a:link, .c-t4c a:active, .c-t4c a:visited,
.c-cont4 a, .c-cont4b a, .c-cont4c a, .c-cont4d a,
.c-cont4 a:link, .c-cont4 a:active, .c-cont4 a:visited,
.c-cont4b a:link, .c-cont4b a:active, .c-cont4b a:visited,
.c-cont4c a:link, .c-cont4c a:active, .c-cont4c a:visited,
.c-cont4d a:link, .c-cont4d a:active, .c-cont4d a:visited { color:#000; }



































/* album photo */
.btn-cont { height:22px; } /* à virer */
/* avant btn */
/* effet d'enfoncement quand on clique sur un bouton */
a[class^="btn"]:active {
  transform: translateY(1px);
}
.btn-oui, .btn-non {
  cursor:pointer;
  width:30px;
}
.btn-oui {
  margin-left:15px; /* ça passe pas, je suis obligé de le mettre dans le html */
}
.ouinon {
/*  width:90px; */
  width:50%;
  white-space:nowrap; /* si le texte déborde de la width il sera prolongé et s'affichera à droite du div et le div sera alors centré en fonction de sa width grâce à margin:auto */
  text-align:center;
  margin:auto;
}
.ouinon > p {
  width:90px;
  margin:11px auto; /* ça passe pas, je suis obligé de le mettre dans le html */
}
.attention {
  float:left;
  width:200px;
  height:200px;
  background-color: red;
  mask:no-repeat left/contain url(/images/default/pictos/attention.svg);
}
.sup-message{
  width:350px;
  margin:auto auto auto 300px;
  text-align:left;
  color:#000;
  z-index:111;
}
a.btn-diaporama, a.btn-diaporama:active, a.btn-diaporama:visited, a.btn-diaporama:link {
  font-size:2em; /* css: intéressant, la width et heiht en em internes se calent sur la font-size interne définie en px ou en em */
  position:absolute;
  top:-2px;
  right:-1px;
/*
  background:url(/edsa-yamafoto/images/default/diaporama.gif);
  background-repeat:no-repeat;
*/
  color:#fff;
  background: linear-gradient(#ffcc99, #ff9933 15%, #ff9933 100%);
  border-top: 1px #ffcc99 solid;
  border-bottom: 1px #cc6600 solid;
}

.albumdescription {
  clear:both;
  background-color:#eeeeff; /*#f0f0ff;*/

  margin:0.8em;

  font-size:0.9vw; /* 14px; 10px; */
  padding:0 5px;
  border-radius:5px;
}

.optinterfc{
border-left:1px #1c58c3 solid;border-right:1px #1c58c3 solid;
}
.optinterft{
background-color:#6097FF;border-left:1px #9FC8FF solid;border-right:1px #0060FF solid;
padding:3px;
}


.albumoptions {
/* padding:3px; */
background-color:orange;
border-radius:0.5em;
/*
margin:0 5px 5px 5px;
*/
margin:0 0.5em 0 0.5em;
font-size:0.7em;
}

[class^="opt"] { /* .optajfav */
width:32%;
padding:5px;
float:left;
}
[class^="opt"].on {
  background-color:#f0fff0;
  border-radius:5px 5px 0 0;
}
/*
[class^="opt"] > a, [class^="opt"] > a:visited, [class^="opt"] > a:link, [class^="opt"] > a:active {
  text-decoration:none;
}
*/
.optmenfav, .optguest {
text-align:center;
}
.optmenalb, .optinviter {
float:right;
text-align:right;
}
.optecrire{
clear:both;
}

 /**************/
/* navigation */
#navDiv {
  z-index: 14;
  height:50px;
}
#chronoDiv {
  font-size:10px;
  background-color:#000000;
  color:#ffffff;
  visibility:hidden;
  position:absolute;
  bottom:3.1em;
  left:3.7em;
  padding:5px;
  border-radius:5px;
  z-index:16; /*777777;*/
  width:200px;
  height:15px;
}
.photonav {
  margin-left:25px;
/*
background-image:url(edsa-yamafoto/images/default/album/fond_nav.gif);
background-repeat:no-repeat;
*/
  float:left;
  text-align:left;
/*
border-left:1px #fff solid;border-right:1px #fff solid;background-color:#fff;
*/
  background-color:yellow;
  border-radius:15px;
  padding:5px;
}
.photonav a, .photonav a:active, .photonav a:visited, .photonav a:link {
  font-size:10px;
}
.photonav a {
  color:#000;
}
/* fleches photo */
.photonav > a, .photonav > a:visited, .photonav > a:active, .photonav > a:link,
.photonav > span > a, .photonav > span > a:visited, .photonav > span > a:active, .photonav > span > a:link { /* .photonav > span > a c'est pour le span qu'on met pour btn-play et btn-stop quand on a onclick="xxx" */
  display:block;
  float:left;
  text-decoration:none;
  overflow:hidden;
  background-repeat: no-repeat;
  margin-right:7px;
  border-radius:50%;
  background-color:pink;
  width:2.5em; /* 5em 2em */
  height:2.5em; /* 5em 2 em */
  background-size:cover;
  background-image: url("/images/default/pictos/loupe.svg");
  position:relative;
/* fond gris: background-color: rgba(0, 0, 255, 0.5); */
}
.photonav > span {
  display:block;
  float:left;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
}
.photonav > a:hover {
  background-color:cyan;
}
.photonav > a.btn-retourindex {
background-image: url("/images/default/pictos/pellicule.svg");
}
.photonav > a.btn-play, .photonav > span > a.btn-play { /* .photonav > span > a c'est pour le span qu'on met pour btn-play et btn-stop quand on a onclick="xxx" */
background-image: url("/images/default/pictos/play.svg");
}
.photonav > a.btn-stop, .photonav > span > a.btn-stop { /* .photonav > span > a c'est pour le span qu'on met pour btn-play et btn-stop quand on a onclick="xxx" */
background-image: url("/images/default/pictos/stop.svg");
}
.photonav > a.btn-fl-g, .photonav > a.btn-fl-d {
background-image: url("/images/default/pictos/fleche.svg");
}
.photonav > a.btn-fl-g {
transform: rotate(180deg);
}
/*
.btn-fullscreen, .btn-diapo {
*/
.photonav > a.btn-diapo, .photonav > a.btn-diapo {
/*  background-color: rgba(0, 0, 255, 0.5); */
/* background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url("/images/default/pictos/loupe.svg"); */
/*background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url("/images/default/pictos/diaporama.svg");*/
background-image: url("/images/default/pictos/diaporama.svg"); /* https://www.svgrepo.com/svg/451323/slideshow https://www.flaticon.com/fr/icone-gratuite/diaporama_4498625?related_id=4498418&origin=searchhttps://www.flaticon.com/fr/icone-gratuite/diaporama_4498625?related_id=4498418&origin=search https://www.flaticon.com/fr/icone-gratuite/diaporama_1206407 */
background-size: 70%;
background-position: center;
}
/*
.btn-fullscreen:before, .btn-diapo:before {
  content:"Grand format";
  font-size:0.85em;
  position:absolute;
  width:100%;
  left:5%;
  top:15%;
  color:#000;
  font-weight:bold;
}
*/
.btn-fullscreen.gdf {
  opacity:0.5;
  filter: invert(0.30);
}

/*
.btn-diapo:before {
  content:"Diapo rama";
  left:11%;
}
*/
/* .content a#btn-pleinecran { */
.content a.btn-pleinecran_on {
  background: no-repeat center/50% url("/images/default/pictos/fullscreen_1.svg");
}
.content a.btn-pleinecran_off {
  background: no-repeat center/50% url("/images/default/pictos/fullscreen_0.svg");
}
#btn-format {
  background-image: url("/images/default/pictos/size.png");
  background-position:center;
  background-repeat: no-repeat;
  background-size:50%;
  color:#000;
}
a.btn-format {
  background-image: url("/images/default/size/size.png");
  background-position:center;
  background-repeat: no-repeat;
  background-size:50%;
  color:#000;

  transform: rotate(180deg);
}


.photonav.small > a, .photonav.small > a:visited, .photonav.small > a:active, .photonav.small > a:link {
  width:1.5em;
  height:1.5em;
}
.photonav.big > a, .photonav.big > a:visited, .photonav.big > a:active, .photonav.big > a:link {
  width:3.5em;
  height:3.5em;
}
.photonav.giant > a, .photonav.giant > a:visited, .photonav.giant > a:active, .photonav.giant > a:link {
  width:5.5em;
  height:5.5em;
}

.photonav {
  font-size:12px;
  padding-top:5px;
  z-index:666;
}
.photonav > a, .photonav > a:visited, .photonav > a:active, .photonav > a:link {
  margin-right:7px;
  border-radius:50%;
  border:1px #000 solid;
  /*width:2.5em;*/ /* 1.5em : ancienne taille , 3.5 : grand, 5.5 geant */
  /*height:2.5em;*/ /* 1.5em : ancienne taille , 3.5 : grand, 5.5 geant  */
  /*
  https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  */
}
.photonav > a.btn-fl-g, .photonav > a.btn-fl-d {
  background-image: url("/images/default/pictos/fleche_right_album_0.gif");
  background-image: url("/images/default/svg/triangle-right-icon___.svg");
  background-image: url("/images/default/svg/caret-right-icon___.svg");
  background-size: 40%;
  background-position:64%;
  background-size: 30%;
  background-position:60%;
}
.photonav > a.btn-close {
/*background-image: url("/edsa-yamafoto/images/default/pictos/fermer2.gif");
background-image: url("/edsa-yamafoto/images/default/svg/cross-mark-svgrepo-com.svg");*/
background-image: url("/images/default/svg/multiply-cross-svgrepo-com.svg");
background-color:transparent;
border:none;
opacity:0.5;
}
.photonav > a.btn-close:hover {
  opacity:1;
}
.photonav > a.btn-options {
/* background-image: url("/images/default/pictos/fleche_bas_organiser_1.gif"); */
background-image: url("/images/default/svg/triangle-right-icon___.svg");
background-size: 30%;
background-position:54% 50%;
transform: rotate(90deg);

background-size: 20%;
background-position:54% 49%;
}
/*
99ccff bleu tres clair
3c8eff bleu clair normal
6699ff bleu un peu plus clair que le normal
1c58c3 bleu foncé mais pas trop
1567cf bleu un peu moins foncé
3498eb bleu clair intermédiaire
*/
/* BLEU */
.photonav.bleu {
  border: 1px #1c58c3 solid;
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 100%);
}
.photonav.bleu > a, .photonav.bleu > a:visited, .photonav.bleu > a:active, .photonav.bleu > a:link {
  background-color:#3498eb;
  border:1px #000 solid;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #1c58c3 solid;
}
.photonav.bleu > a:hover {
  background-color:orange;
}
/* FIN BLEU */

/* bleu_fonce */
.photonav.bleu_fonce {
  border: 1px #1c22c3 solid;
  background: linear-gradient(#99aaff, #1c22c3 20%, #2115cf 100%);
}
.photonav.bleu_fonce > a, .photonav.bleu_fonce > a:visited, .photonav.bleu_fonce > a:active, .photonav.bleu_fonce > a:link {
  background-color:#909ef5;
  border:1px #000 solid;
  background: linear-gradient(#99aaff, #3c4cff 20%, #6678ff 75%, #3c4cff 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #1c22c3 solid;
}
.photonav.bleu_fonce > a:hover {
  background-color:#344ceb;
}
/* FIN bleu_fonce */

/* bleu_ciel */
.photonav.bleu_ciel {
  border: 1px #9ed6ff solid;
  background: linear-gradient(#d9efff, #9ed6ff 20%, #a6d9ff 100%);
}
.photonav.bleu_ciel > a, .photonav.bleu_ciel > a:visited, .photonav.bleu_ciel > a:active, .photonav.bleu_ciel > a:link {
  background-color:#78c6ff;
  border:1px #000 solid;
  background: linear-gradient(#d9efff, #c4e6ff 20%, #c9e8ff 75%, #c4e6ff 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #9ed6ff solid;
}
.photonav.bleu_ciel > a:hover {
  background-color:#5486ab;
}
/* FIN bleu_ciel */

/* violet_bleute */
.photonav.violet_bleute {
  border: 1px #553a8c solid;
  background: linear-gradient(#c4acf2, #553a8c 20%, #674c9e 100%);
}
.photonav.violet_bleute > a, .photonav.violet_bleute > a:visited, .photonav.violet_bleute > a:active, .photonav.violet_bleute > a:link {
  background-color:#9b74e8;
  border:1px #000 solid;
  background: linear-gradient(#c4acf2, #a57ff0 20%, #b89ded 75%, #a57ff0 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #553a8c solid;
}
.photonav.violet_bleute > a:hover {
  background-color:#c2a9f5;
}
/* FIN violet_bleute */

/* violet */
.photonav.violet {
  border: 1px #673b78 solid;
  background: linear-gradient(#dd80ff, #673b78 20%, #78458c 100%);
}
.photonav.violet > a, .photonav.violet > a:visited, .photonav.violet > a:active, .photonav.violet > a:link {
  background-color:#c573e6;
  border:1px #000 solid;
  background: linear-gradient(#dd80ff, #5486ab 20%, #c471e3 75%, #5486ab 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #673b78 solid;
}
.photonav.violet > a:hover {
  background-color:#844b99;
}
/* FIN violet */

/* mauve */
.photonav.mauve {
  border: 1px #8c3779 solid;
  background: linear-gradient(#fcccf2, #8c3779 20%, #a35291 100%);
}
.photonav.mauve > a, .photonav.mauve > a:visited, .photonav.mauve > a:active, .photonav.mauve > a:link {
  background-color:#e6acd9;
  border:1px #000 solid;
  background: linear-gradient(#fcccf2, #d477c0 20%, #d98dc8 75%, #d477c0 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #8c3779 solid;
}
.photonav.mauve > a:hover {
  background-color:#bf69ac;
}
/* FIN mauve */

/* turquoise */
.photonav.turquoise {
  border: 1px #1b8c89 solid;
  background: linear-gradient(#a5e6e4, #1b8c89 20%, #29c4bf 100%);
}
.photonav.turquoise > a, .photonav.turquoise > a:visited, .photonav.turquoise > a:active, .photonav.turquoise > a:link {
  background-color:#9fc4c3;
  border:1px #000 solid;
  background: linear-gradient(#a5e6e4, #e3c762 20%, #91e3e0 75%, #e3c762 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #1b8c89 solid;
}
.photonav.turquoise > a:hover {
  background-color:#4daba8;
}
/* FIN turquoise */


/* orange */

.photonav.orange {
border: 1px #fd9738 solid;
background: linear-gradient(#ffcc99, #fd9738 20%, #fd9738 100%);
}

.photonav.orange > a, .photonav.orange > a:visited, .photonav.orange > a:active, .photonav.orange > a:link {
  background-color:#ffaa00;
  background: linear-gradient(#ffcc99, #ffc54f 20%, #ffb726 75%, #ffaa00 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #1c58c3 solid;
}
.photonav.orange > a:hover {
  background-color:#99ccff;
}
/* FIN orange */

/* rouge_orange */
.photonav.rouge_orange {
  border: 1px #ff4a00 solid;
  background: linear-gradient(#ffcab5, #ff6221 20%, #ff7942 100%);
}
.photonav.rouge_orange > a, .photonav.rouge_orange > a:visited, .photonav.rouge_orange > a:active, .photonav.rouge_orange > a:link {
  background-color:#ff8452;
  background: linear-gradient(#ffcab5, #ff7942 20%, #ffa682 75%, #ff7942 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #ff4a00 solid;
}
.photonav.rouge_orange > a:hover {
  background-color:orange;
}
/* FIN rouge_orange */

/* ROUGE */
.photonav.rouge {
  border: 1px #b51212 solid;
  background: linear-gradient(#ff8f8f, #b51212 20%, #d92323 100%);
}
.photonav.rouge > a, .photonav.rouge > a:visited, .photonav.rouge > a:active, .photonav.rouge > a:link {
  background-color:#ffc9c9;
  background: linear-gradient(#ff8f8f, #eb3434 20%, #f55d5d 75%, #eb3434 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #b51212 solid;
}
.photonav.rouge > a:hover {
  background-color:#f55d5d;
}
/* FIN ROUGE */



/* marron */
.photonav.marron {
  border: 1px #542d00 solid;
  background: linear-gradient(#e67a00, #542d00 20%, #753f00 100%);
}
.photonav.marron > a, .photonav.marron > a:visited, .photonav.marron > a:active, .photonav.marron > a:link {
  background-color:#965000;
  background: linear-gradient(#e67a00, #b86200 20%, #cc6d00 75%, #b86200 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #542d00 solid;
}
.photonav.marron > a:hover {
  background-color:orange;
}
/* FIN marron */

/* marron_fonce */
.photonav.marron_fonce {
  border: 1px #6e3300 solid;
  background: linear-gradient(#d16200, #6e3300 20%, #7a3900 100%);
}
.photonav.marron_fonce > a, .photonav.marron_fonce > a:visited, .photonav.marron_fonce > a:active, .photonav.marron_fonce > a:link {
  background-color:#ff9a42;
  border:1px #000 solid;
  background: linear-gradient(#d16200, #582900 20%, #783800 75%, #582900 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #6e3300 solid;
}
.photonav.marron_fonce > a:hover {
  background-color:#b85600;
}
/* FIN marron_fonce */

/* vert_clair */
.photonav.vert_clair {
  border: 1px #669c41 solid;
  background: linear-gradient(#deffc7, #669c41 20%, #7cb058 100%);
}
.photonav.vert_clair > a, .photonav.vert_clair > a:visited, .photonav.vert_clair > a:active, .photonav.vert_clair > a:link {
  background-color:#c4e6ac;
  border:1px #000 solid;
  background: linear-gradient(#deffc7, #a5e677 20%, #bbf593 75%, #a5e677 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #669c41 solid;
}
.photonav.vert_clair > a:hover {
  background-color:#96c973;
}
/* FIN vert_clair */

/* vert_fonce */
.photonav.vert_fonce {
  border: 1px #577a61 solid;
  background: linear-gradient(#91c7a0, #577a61 20%, #577a61 100%);
}
.photonav.vert_fonce > a, .photonav.vert_fonce > a:visited, .photonav.vert_fonce > a:active, .photonav.vert_fonce > a:link {
  background-color:#5ae883;
  background: linear-gradient(#91c7a0, #577a61 20%, #6e997a 75%, #577a61 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #246b39 solid;
}
.photonav.vert_fonce > a:hover {
  background-color:#399654;
}
/* FIN vert_fonce */

/* NOIR */
.photonav.noir {
  border: 1px #000 solid;
  background: linear-gradient(#3d3d3d, #303030 20%, #000 100%);
}
.photonav.noir > a, .photonav.noir > a:visited, .photonav.noir > a:active, .photonav.noir > a:link {
  background-color:#2b2b2b;
  background: linear-gradient(#a4a6a5, #ffc54f 20%, #ffb726 75%, #2b2b2b 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #000 solid;
}
.photonav.noir > a:hover {
  background-color:#666666;
}
/* FIN vert_clair */

/* blanc */
.photonav.blanc {
  border: 1px #f0f0f0 solid;
  background: linear-gradient(#fff, #f0f0f0 20%, #f5f5f5 100%);
}
.photonav.blanc > a, .photonav.blanc > a:visited, .photonav.blanc > a:active, .photonav.blanc > a:link {
  background-color:#e3e3e3;
  background: linear-gradient(#fff, #fcfcfc 20%, #f7f7f7 75%, #fcfcfc 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #f0f0f0 solid;
}
.photonav.blanc > a:hover {
  background-color:#ebebeb;
}
/* FIN blanc */


/* jaune */
.photonav.jaune {
  border: 1px #d4d40f solid;
  background: linear-gradient(#f5f5a6, #d4d40f 20%, #e0e024 100%);
}
.photonav.jaune > a, .photonav.jaune > a:visited, .photonav.jaune > a:active, .photonav.jaune > a:link {
  background-color:#f0f067;
  border:1px #000 solid;
  background: linear-gradient(#f5f5a6, #f5f578 20%, #f2f29b 75%, #f5f578 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #d4d40f solid;
}
.photonav.jaune > a:hover {
  background-color:#e3e3a8;
}
/* FIN jaune */

/* jaune_orange */
.photonav.jaune_orange {
  border: 1px #e0b412 solid;
  background: linear-gradient(#fceebb, #e0b412 20%, #f0c529 100%);
}
.photonav.jaune_orange > a, .photonav.jaune_orange > a:visited, .photonav.jaune_orange > a:active, .photonav.jaune_orange > a:link {
  background-color:#f5d664;
  border:1px #000 solid;
  background: linear-gradient(#fceebb, #f5da78 20%, #ffe999 75%, #f5da78 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #e0b412 solid;
}
.photonav.jaune_orange > a:hover {
  background-color:#e3c762;
}
/* FIN jaune_orange */

/* gris_clair */
.photonav.gris_clair {
  border: 1px #bdbdbd solid;
  background: linear-gradient(#ededed, #bdbdbd 20%, #c9c9c9 100%);
}
.photonav.gris_clair > a, .photonav.gris_clair > a:visited, .photonav.gris_clair > a:active, .photonav.gris_clair > a:link {
  background-color:#dbd9d9;
  background: linear-gradient(#ededed, #e3e3e3 20%, #ebebeb 75%, #e3e3e3 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #bdbdbd solid;
}
.photonav.gris_clair > a:hover {
  background-color:#7d7d7d;
}
/* FIN gris_clair */

/* gris_fonce */
.photonav.gris_fonce {
  border: 1px #666666 solid;
  background: linear-gradient(#c7c7c7, #666666 20%, #7a7a7a 100%);
}
.photonav.gris_fonce > a, .photonav.gris_fonce > a:visited, .photonav.gris_fonce > a:active, .photonav.gris_fonce > a:link {
  background-color:#949292;
  background: linear-gradient(#c7c7c7, #949494 20%, #bdbdbd 75%, #949494 100%, url("/edsa-yamafoto/images/default/pictos/fleche_right_album_0.gif"));
  border: 1px #666666 solid;
}
.photonav.gris_fonce > a:hover {
  background-color:orange;
}
/* FIN gris_fonce */

/* photo menu select des photos de l'album */
.photoselect{
/*
background-image:url("/images/default/album/fond_nav.gif");
background-repeat:no-repeat;
*/
margin:20px 33px 0 0;

/* margin:0;*/
text-align:left;
float:right;
/*margin-right:30px;*/
width:370px;
height:21px;
padding:0;

}
.photoselect select {

/*margin-left:5px;*/
/*width:306px;*/ /* 356 */
margin:0;
width:100%;
height:30px;
overflow:hidden;
font-size:10px;

/* float:left; */
}
.photoselect.pleinepage select {
  width: 91%;
}
#btn-pleinecran {
  display:none;
}

































/* planche contact */
#indexDiv { /* thumbnails */
  width:98%;
  z-index:0;
  margin:0 0 25px 5px;
  background-color:#000;
  border-radius:15px;
  color:#fff;
  padding:3px 0 0 8px;
}
#indexDiv a, #indexDiv a:active, #indexDiv a:visited, #indexDiv a:hover{
  color:#fff;
}
/* vignette */
/* drop shaddow */
.v {
  position:relative;
  float:left;
  /*text-align:center;*/
  display:inline;
  /*margin-right:5px;*/ /* on place la marge a droite sinon le design est cass� quand on revient sur la planche contact depuis la photo */
  /*padding:3px 0px;*/
  /* height:'.($vign_dim).$vign_unity.'; */
  margin:0 0 80px 80px;
/*
  border-radius:25px;
  background-color:#000;
  */
  /*border:1px black solid;*/
}
#planchecontactDiv.cov .v p { /* cov pour éviter confusion avec .cover */
  border-radius:25px;
  background-color:#000;
}
#planchecontactDiv.cov2 .v p { /* cov pour éviter confusion avec .cover */
  border-radius:11px;
  background-color:#000;
}
#planchecontactDiv.cov3 .v p { /* cov pour éviter confusion avec .cover */
  border-radius:5px;
  background-color:#000;
}
#planchecontactDiv.cov4 .v p { /* cov pour éviter confusion avec .cover */
  background-color:#000;
}
#planchecontactDiv.shad .v p, #planchecontactDiv.shad .v img { box-shadow: 5px 5px 35px rgba(0,0,0,0.9);   }
#planchecontactDiv.shad2 .v p, #planchecontactDiv.shad2 .v img { box-shadow: 5px 5px 15px 5px #000000;   } /* -webkit-box-shadow: 5px 5px 15px 5px #000000;  */
#planchecontactDiv.shad3 .v p, #planchecontactDiv.shad3 .v img { box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); }
#planchecontactDiv.shad4 .v p, #planchecontactDiv.shad4 .v img { box-shadow: inset -1px 3px 8px 5px #000, 2px 5px 16px 0px #000, -44px -44px 15px -19px rgba(0,0,0,0); }
.content img { border-radius:0; }
#planchecontactDiv.rad .v img { border-radius:5px;   }
#planchecontactDiv.rad2 .v img { border-radius:10px;   }
#planchecontactDiv.rad3 .v img { border-radius:15px;   }
#planchecontactDiv.rad4 .v img { border-radius:25px;   }
#planchecontactDiv.bord .v img { border:5px white solid; }
#planchecontactDiv.bord2 .v img { border:4px white double; }
#planchecontactDiv.bord3 .v img { border:1px white solid; }
.v .vign { background:transparent;border:none; }
.v a:nth-of-type(2) {   font-weight:normal;
  font-style: italic;
  display:block;
  width:76px;
  height:16px;
  overflow:hidden;
  color:#fff;
  font-size:10px;
  line-height:18px;
display:none; } /* https://stackoverflow.com/questions/9550401/select-second-child */



.v a, .v a:active, .v a:visited, .v a:link {
  font-size:11px;
  text-decoration:none;

  display:block;
  /*border: 1px red solid !important;*/

}

.v > a, .v > a:active, .v > a:visited, .v > a:link { /* lien sur le titre */
font-size:0.7em;
overflow:hidden;
text-overflow: ellipsis;
width:100%;
margin-top:15px;
height:20px;
min-height:20px;
/*
width:220px;
margin-top:15px;
height:20px;
*/
/*
display:inline-block;  si je laisse ça les titres sont décallés
*/
width:100%;
/*color:red;*/
line-height: 1em;
font-weight: 400;
word-break: break-all;
white-space: nowrap;
position:absolute; /* permet de ne pas casser la mise en page des vignettes quand on fait un :hover pour afficher le titre complet contrairement à un margin-top:20px */
/*bottom:-45px;
left:0;*/

/*display:none;*//*+++111*/
}

.v > a:hover{ /* https://stackoverflow.com/questions/34833815/showing-truncated-text-on-hover-using-css-ellipsis-overlaps-text-below-it */
    overflow: visible;
    white-space: normal;
    height:auto;  /* just added this line */
    border-radius: 5px;
    background-color: #fff;
    padding:5px;
}


.v u {
  display:block;margin:0;padding:0;
  position:absolute;
  right:0;
  /*left:51px;top:-3px;*/
}
/*
.new {
  position:absolute;left:51px;top:-3px;
}
.vignette {
  height:76px; width:76px;
  margin:auto;
}
*/
.c-hcover { background-color:#7f9faf; }
.c-bcover { background-color:#fff;border-left:1px #7f9faf solid;border-right:1px #7f9faf solid; }
.c-ccoverb { border-left:1px #7f9faf solid;border-right:1px #7f9faf solid; }
.c-tcoverb { background-color:#6F6F6F;border-left:1px #fff solid;border-right: 1px #dfd7cf solid; }
.c-tcoverb img { border:1px #fff solid; }
/*
.a-vign {
  display:block;
  width:76px;
  height:16px;
  overflow:hidden;
  color:#fff;
  font-size:10px;
}
*/
 /*********/
/* photo */
#waitingDiv { /* s'inscrit dans .contenttt qui est en position:relative */
position:absolute;
/*z-index:1;*/
z-index:17; /*33333333333;*/
top:10%;
/*width:100%;*/
width: calc(100% - var(--imgcont_width));
height:90%;
background-image:url("/images/default/loading.svg");
background-position:50% 42%;
background-repeat:no-repeat;
background-size:5%;
/*background-color:#fffff0;*/ /* #000 => l'utilisateur doit pouvoir choisir la couleur en cliquant sur un carré de couleur et pq pas claquer un dégradé */
border-radius:15px;
}
.contenttt { /* bord arrondi du contenu du conteneur donc de l'album et de l'entete */
  border-radius:0 0 0.75em 0.75em;
  position:relative;
}
#photoDiv {
}
/* #img-vign, .img-vign, .img-link { */
#img-vign {
  position:absolute;
  z-index:2;
}
#descDiv {
  /*z-index:13;*/
  /*z-index:12;*/ /* avant: 1 */
  /* z-index:1; */ /* la description est sous la photo par défaut */
  z-index:3; /* la description est au dessus de la photo par défaut */
  position:absolute;
  visibility:visible;
  width:95%;
  /*left:0px;
  top:500px;*/
  overflow:auto;
  max-height:20%;
  /*overflow:auto;*/
  background-color:grey;
  border-radius:25px;
  opacity:0.3;
  font-size:12px;
  padding:15px;
  border:1px #fff solid;

  overflow-y: scroll;
  /* scrollbar-color: rebeccapurple green; */
  scrollbar-width: auto;
}
#descDiv:hover {
  /*z-index:3;*/ /* la description passe au dessus de la photo quand on survole la description avec la souris. */
}
#img-vign:hover {
  z-index:4; /* la photo passe au dessus de la description */
}
.albumphoto {
  /* margin:0; */
  height:324px; /* rq: oblig� de sp�cifier la height sur photoDiv car si il est vide au lancement, il ne prend pas la height du contenu une fois rempli */
  margin:5px 25px 25px 25px;
  margin:0.2em 1.5em 1.5em 1.5em;
  position:relative; /* utile? a priori non: tester avec les difs formes d'affichage de l'album */
}
.popimagephoto {
  height:324px; /* rq: oblig� de sp�cifier la height sur photoDiv car si il est vide au lancement, il ne prend pas la height du contenu une fois rempli */
  position:absolute;
/*
  margin:5px 25px 25px 25px;
  margin:0.2em 1.5em 1.5em 1.5em;
*/
  left:0px;
  top:0px;
  z-index:1;
}
.organiserphoto {
  height:324px; /* rq: oblig� de sp�cifier la height sur photoDiv car si il est vide au lancement, il ne prend pas la height du contenu une fois rempli */
  position:relative;
  width:49%;
  display:block;
  position:relative; /* utile? a priori non: tester avec les difs formes d'affichage de l'album */
}
.phocomcontainer{
  padding:0;
}
.imagecontainer {
  float:left;
  text-align:left;
  width:320px;
  height:320px;
  background-color:#000;
  border-radius:15px;
}
#commentsDiv {
float:right;
text-align:left;
width:380px;
background-color:#fff;
border:none;
border-radius:15px;
position:relative;
text-align:left;
height:320px;
overflow:auto; /* --- */ /* attention car cette height peut entrainer un padding mal venu sous la photo si la hauteur est supérieure à celle du bloc de la photo */
}
.imagecontainer a{
  color:#fff;
}

/* photo */

.t-pseudo { text-decoration:none;color:orange; }
.comment1 { float:left;text-align:right!important;width:150px;font-weight:bold;font-size:12px;margin-right:3px;color:#000; } /* text-align:right!important sinon text-align: left; dans admin_nav.css prend le dessus. */
.comment2 { float:left;text-align:left;width:210px;font-size:12px;color:#000; }
.lien-pic-l3 {
  display:block;
  text-align:left;
  padding:2px 0 0 22px;
  background-repeat: no-repeat;
  height:20px;
  voice-family: "\"}\"";voice-family:inherit;height:20px;
}
html>body .lien-pic-l { height:20px; }

.vide {
  padding:3px;text-align:center;
}

/* image qu'on sélectionne dans un form comme creer editer, guestbook */
#imageDiv {

}
.image-div { /* à la place de #imageDiv sinon ça fait foirer organiser */
  position:absolute;
  width:50%;
  height:50%;
  right:-51%;
  display:none;
}
.formcontainer { /* à distinguer de .form-container qu'il faudra virer, caduque */
  position:relative;
  width:50%;
  margin:auto;
}

/* image du form, valable pour toutes les images qu'on sélectionne: creer, param, form guestbook */

.loading {
/*
position:absolute;
z-index:1;
top:10%;
width:100%;
height:90%;
*/
background-image:url("/images/default/loading.svg");
background-position:50% 42%;
background-repeat:no-repeat;
background-size:5%;
background-color:#fffff0;
border-radius:15px;
}




/* les memes classes css ci-dessous sont définies pour diaporama.css, à fusionner => inclure diaporama.css dans l'album */
#photoDiv {
  /*transition: all 0.5s;*/
}
.phototrans {
  transition: all 0.5s;
}

#photoDiv.pre-animation, #photoDiv.pre-animation0 {
  opacity:0;
}
#photoDiv.pre-animation1 {
  transform: scale(0);
}
#photoDiv.pre-animation2 {
  transform: rotate(0.5turn) scale(0) translate(-100%, -100%);
}
#photoDiv.pre-animation3 {
	opacity:0;
	filter: blur(5px);
	transform: rotate(0.5turn) scale(0) translate(-100%, -100%);
}
#photoDiv.pre-animation4 {
	opacity:0.2;
	filter: blur(5px);
}
#photoDiv.pre-animation5 {
	filter: grayscale(100%);
}
#photoDiv.pre-animation6 {
	transform: rotate(0.5turn);
}
#photoDiv.pre-animation7 {
	filter: blur(5px);
}


#container_photo.autoreso {
  position:fixed;top:0;left:0;z-index:15;background-color:#000;width:100%;height:100%; /* z-index:1111; */
}
#container_photo.autoreso #photoDiv {
  width:100%;
  height:100%;
}
#container_photo.autoreso .imagecontainer {
  width:70%;
  height:100%;
}
#container_photo.autoreso.liseret1 .imagecontainer {
  border-left:1px #000 solid;
  width:calc(70%-1px);
}
#container_photo.autoreso.liseret2 .imagecontainer {
  border-left:2px #000 solid;
  width:calc(70%-2px);
}
#container_photo.autoreso.liseret3 .imagecontainer {
  border-left:3px #000 solid;
  width:calc(70%-3px);
}
#container_photo.autoreso.liseret .imagecontainer {
  border-left:5px #000 solid;
  width:calc(70%-5px);
}
#container_photo.autoreso .phocomcontainer {
  /*border-left:5px #000 solid;*/
  /*padding-left:50px #000 solid;*/
  /*width:calc(100%-50px);*/
  width:100%;
  height:100%;
}
#container_photo.autoreso .photocommentcontainer {
  /* width:30%; */
  height:100%;
}
#container_photo.autoreso.liseret1 .photocommentcontainer {
  border-left:1px #000 solid;
  width:calc(30%-1px);
}
#container_photo.autoreso.liseret2 .photocommentcontainer {
  border-left:2px #000 solid;
  width:calc(30%-2px);
}
#container_photo.autoreso.liseret3 .photocommentcontainer {
  border-left:3px #000 solid;
  width:calc(30%-3px);
}
#container_photo.autoreso.liseret .photocommentcontainer {
  border-left:5px #000 solid;
  width:calc(30%-5px);
}
#container_photo.autoreso .albumphoto {
  /* margin-top:5px;*/
  /*border-left:20px red solid;*/
  /*margin:0;*/
  /*margin:5px 0 0 0;*/
  margin:0; /* je sais pas pourquoi j'avais mis une margin-top de 5px ci-dessus, je l'ai virée car la photo était trop basse du coup. */
  /*padding-left:20px;*/
}
#container_photo.autoreso .photoselect{
  padding:0.5em 0 0 0; /* voir si il n'est pas plus pertinent de mettre l'unité en vw */
  float:right;
  margin:0;
  text-align:left;
  width:30%; /* comme .photocommentcontainer */
}
#container_photo.autoreso .photoselect select{
  margin:0;
  /* width:calc(100% - 40px); */
  width:calc(100% - 80px);
  overflow:hidden;
  font-size:10px;
  float:left;
}
.closex { /* https://codepen.io/brissmyr/pen/nLmreZ */
  cursor:pointer;
  position:relative;
  float:right;
  display:block;
  width:23px;
  height:23px;
  border:none;
  margin:8px 10px 0 0;
  background-color:#000;
}
.closex:before, .closex:after {
  position: absolute;
  left: 9px;
  content: ' ';
  /* height: 23px; */
  height: 100%;
  width: 4px;
  background-color: #fff;
}
.closex:before {
  transform: rotate(45deg);
}
.closex:after {
  transform: rotate(-45deg);
}
.photoselect.pleinepage .closex {
  border-radius: 5px;
  margin:3px 0 0 0px;
  width:25px;
  height:25px;
  /*opacity:0.5;*/
}
.photoselect.pleinepage .closex:before, .photoselect.pleinepage .closex:after {
  left: 10px;
}

#container_photo.autoreso #btn-pleinecran {
  float:right;
  background-color:#000;
  display:block;
  width:30px;
  height:30px;
  border:none;
}
#planchecontactDiv.fullcontact {
/*.fullcontact {*/
  position:fixed;
  top:50px;
  left:0;
  z-index:1111;
  z-index:999999999999999999999;
  background-color:#000;
  width:100%;
  height:100%;
}
#btn-pleinecran2 { /* bouton plein écran de la planche contact */
  background-color:#000;
  position:absolute;
  right:0.5em;
  top:-2em;
  display:block;
  width:1em;
  height:1em;
}
.off {
  display:none;
}


/* navDiv grand format présente dans le tpl du diaporama originel */
.gdf_nav {
  position:absolute;z-index:14;visibility:hidden; left:0px;top:0px;margin:0px;width:100%; /* width:100% sinon le menu select avec les images est foireux et rapetissé quand on passe en plein écran */
}
/* photoDiv grand format présente dans le tpl du diaporama originel */
.gdf_photo {
  position:absolute;width:100%; height:100%; left:0px; top:0px;/*z-index:12 sinon la desc est cachée partiellement en grand format */
}

.orc-h {
	margin: 0 2px;
	height: 1px;
}
.c-h3 {
	background-color: #1c58c3;
}
/*
body, p, td, a {
	FONT-SIZE: 12px;
	COLOR: white;
	FONT-FAMILY: Verdana, Arial, Sans-Serif;
}
*/
.orc-b {
	margin: 0 1px;
	height: 1px;
}
.c-hb3 {
	background-color: #74abe8;
	border-left: 1px #1c58c3 solid;
	border-right: 1px #1c58c3 solid;
}
.c-c3b {
	border-left: 1px #1c58c3 solid;
	border-right: 1px #1c58c3 solid;
}
.c-t3, .c-t3b, .c-t3c, .c-t3d, .c-bord3 {
	color: #fff;
}
.c-t3b, .c-t3c, .c-cont3c, .c-bkgd3 {
	background: url(/edsa-yamafoto/images/default/kit/bleu_xp/degrade_2.jpg);
	background-repeat: repeat-x;
	background-color: #1567cf;
}
.c-t3c {
	background-color: #1567cf;
	border-left: 1px #74abe8 solid;
	border-right: 1px #3366ff solid;
}
.c-bh3 {
	background-color: #3366ff;
	border-left: 1px #1c58c3 solid;
	border-right: 1px #1c58c3 solid;
}
.c-h3 {
	background-color: #1c58c3;
}

/* diaporama */
.intro { FONT-SIZE: 10px; }
@keyframes entract {
  from {top:-40px;}
  to {top:37px;}
}
@keyframes retract {
  from {top:37px;}
  to {top:-40px;}
}
/* on change le déplacement des options en fonction de la taille de la nav */
@keyframes entractsmall {
  from {top:-55px;}
  to {top:25px;}
}
@keyframes retractsmall {
  from {top:25px;}
  to {top:-55px;}
}
@keyframes entractbig {
  from {top:-35px;}
  to {top:45px;}
}
@keyframes retractbig {
  from {top:45px;}
  to {top:-35px;}
}
@keyframes entractgiant {
  from {top:-35px;}
  to {top:65px;}
}
@keyframes retractgiant {
  from {top:65px;}
  to {top:-35px;}
}
/*
@keyframes entractpp {
  from {top:90px;}
  to {top:140px;}
}
@keyframes retractpp {
  from {top:140px;}
  to {top:90px;}
}
*/
#moreInfo_options {
margin:5px;border:1px white solid;width:310px;
position:absolute;left:40px;top:37px;z-index:10;/*top:36px;z-index:999999999999999999999;*/background-color:orange;border-radius:15px;
display:none;
}
.photonav.small ~ #moreInfo_options {
  top:25px;
}
.photonav.big ~ #moreInfo_options {
  top:45px;
}
.photonav.giant ~ #moreInfo_options {
  top:65px;
}
/*
#moreInfo_options.pleinepage {
  top:140px;
}
*/

#moreInfo_options.show {
  animation-name: entract;
  animation-duration: 1s;
}
#moreInfo_options.hide {
  animation-name: retract;
  animation-duration: 1s;
}
.photonav.small ~ #moreInfo_options.show {
  animation-name: entractsmall;
}
.photonav.big ~ #moreInfo_options.show {
  animation-name: entractbig;
}
.photonav.giant ~ #moreInfo_options.show {
  animation-name: entractgiant;
}
.photonav.small ~ #moreInfo_options.hide {
  animation-name: retractsmall;
}
.photonav.big ~ #moreInfo_options.hide {
  animation-name: retractbig;
}
.photonav.giant ~ #moreInfo_options.hide {
  animation-name: retractgiant;
}

/*
#moreInfo_options.showpp {
  animation-name: entractpp;
  animation-duration: 1s;
}
#moreInfo_options.hidepp {
  animation-name: retractpp;
  animation-duration: 1s;
}
*/
#moreInfo_options p{
  width:49%;
  font-size:10px;
  margin:5px 0;
  vertical-align: middle;
  float:left;
}
#moreInfo_options p:nth-child(odd){
  clear:both;
  text-align:right;
}
#moreInfo_options p:nth-child(even){
  padding-left:5px;
}
#moreInfo_options p:nth-child(even) input[type=text]{
  width:50px;
  height:15px;
}
.diapo_encart {
  color:#fff;
  padding:5px;
  border-radius:5px;
  width:315px;
  background-color:red;
  margin:auto;
  position: absolute;
  left:35%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);background: linear-gradient(#99ccff, #1c58c3 3%, #1567cf 100%);
}
.diapo_encart #moreInfo_options {
  position:relative;
  left:0;
  top:0px;
}
.gdf_nav .diapo_encart, .gdf_photo .diapo_encart { /* QUAND ON LANCE L'ENCART DEPUIS btn-diapo dans la nav diaporama grand format SINON C'est décalé */
  left:-15%;
}
#btn-annuler {
  background:url('/images/default/pictos/annuler.gif');
  background-repeat: no-repeat;
  padding-left:20px;
  cursor:pointer;
}
/* ci-dessous figure aussi dans admin_nav.css mais comme c'était pas visible en ligne quand on n'est pas identifié, j'ai du le mettre aussi ici */
/***************************/
/* cpadminhoriz */
/*************************************************/
.cpadminhoriz[class^="menu-onglets"] ul { /* si on veut des tres gros onglets, retirer ul : .cpadminhoriz[class^="menu-onglets"] { */
font-family: verdana;
font-size:0.7em; /* 0.6 ou 0.7 � voir �a fait grossir le menu dans son ensemble avec tout dedans, y compris les deux polices de caract�res. */
font-weight:bold;
}
/* nav verticale et horizontale */
.cpadminhoriz[class^="menu-onglets"] a, .cpadminhoriz[class^="menu-onglets"] a:visited, .cpadminhoriz[class^="menu-onglets"] a:link, .cpadminhoriz[class^="menu-onglets"] a:active,
/* nav h onglets */
.cpadminhoriz.menu-ongletsh li a, .cpadminhoriz.menu-ongletsh li a:visited, .cpadminhoriz.menu-ongletsh li a:link, .cpadminhoriz.menu-ongletsh li a:active,
/* nav h sous-menus */
.cpadminhoriz.menu-ongletsh li ul li a, .cpadminhoriz.menu-ongletsh li ul li a:visited, .cpadminhoriz.menu-ongletsh li ul li a:link, .cpadminhoriz.menu-ongletsh li ul li a:active {
font-size:0.5em; /*+++*/ /* �a fait grossir la premiere police de caractere donc celle des onglets
        et proportionnelement �a fait grossire la seconde donc celle des sous-menus */
text-decoration: none;
font-weight:bold;
padding:2px 25px 2px 2px;
color:#fff;
/*******************/
/*
background-repeat: no-repeat;
background-position:right -2px; *//* right top et bien d�couper chaque picto dans photoshop, �a simplifie tout */
}
@media only screen and (max-width: 1420px) { /*+++*/
.cpadminhoriz[class^="menu-onglets"] a, .cpadminhoriz[class^="menu-onglets"] a:visited, .cpadminhoriz[class^="menu-onglets"] a:link, .cpadminhoriz[class^="menu-onglets"] a:active,
.cpadminhoriz.menu-ongletsh li a, .cpadminhoriz.menu-ongletsh li a:visited, .cpadminhoriz.menu-ongletsh li a:link, .cpadminhoriz.menu-ongletsh li a:active,
.cpadminhoriz.menu-ongletsh li ul li a, .cpadminhoriz.menu-ongletsh li ul li a:visited, .cpadminhoriz.menu-ongletsh li ul li a:link, .cpadminhoriz.menu-ongletsh li ul li a:active {
font-size:0.38em;
}
}
/* Portrait */
@media only screen and (max-width: 959px) and (orientation: portrait) {
  .titre {
  	/* font-family: "InterVariable",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; */
  	font-size: 22px;
  	padding-left: 4em;
  }
  .titre {
  	/* font-family: "InterVariable",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif; */
  	font-size: 5px;
  	padding-left: 18em;
  }
  #planchecontactDiv {
  	padding: 10px 50px;
  	width: 300px;
  }
  /* dans nav on remplace menu-ongletsh par menu-ongletsv */
  .menu-ongletsh {
  	text-align: center;
  }
  .menu-ongletsh > ul > li {
    float:unset;
	  border-radius: 0;
	  font-size: 0.5em;
    height:2vw;
  }
  .menu-ongletsh li:first-child {
  	border-radius: 0.5em 0.5em 0 0;
  }
  .menu-ongletsh li:last-child {
  	border-bottom: none;
  }
  .menu-ongletsh li:last-child {
  	/* border-radius: inherit; */
  	border-radius: 0 0 0.5em 0.5em;
  }
  .soustitre { /* dans album_entete.css */
  	font-size: 5px;
    padding: 0.5em 0 0 18em;
  }
  #entete {
    	position: relative;
    	font-size: 18px;
    	width: 99%;
  }
  .nextprev {
    width:100%;
    clear:both;
    margin-bottom:45px;
  }
}
.cpadminhoriz[class^="menu-onglets"] li a, .cpadminhoriz[class^="menu-onglets"] li a:visited, .cpadminhoriz[class^="menu-onglets"] li a:link, .cpadminhoriz[class^="menu-onglets"] li a:active {
color:#fff;
}
.cpadminhoriz.menu-ongletsh > ul > li {
text-align:center; /* par d�faut center donc ne rien mettre */
}
.cpadminhoriz.menu-ongletsh > ul > li > ul li { /* sous menus des onglets A METTRE EN DESSOUS DE .cpadminhoriz.menu-ongletsh > ul > li */
font-size:4em; /* �a fait grossir la seconde police de caract�re � savoir celle des sous-menus */
/*text-shadow: none;*/
text-align:right;
}
.cpadminhoriz[class^="menu-onglets"] li.ooon {
background-color:#ffb46a;
border:1px #cc6600 solid;
background: linear-gradient(#ffcc99, #cc6600 20%, #ff9933 100%);
}
/*
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(1) > a {
*/
[class^="menu-onglets"].cpadminhoriz > ul  li > a {
/*filter: invert(45%) sepia(15%) saturate(605%) hue-rotate(5deg) brightness(93%) contrast(89%);*/ /* pour que le .svg ait la couleur choisie ici #7a7057 via https://isotropic.co/tool/hex-color-to-css-filter/ via https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element */
background-size:auto 70%; /* https://stackoverflow.com/questions/22334948/background-sizecontain-y */
background-repeat:no-repeat;
background-position: right 3px center; /* https://stackoverflow.com/questions/3197250/position-a-css-background-image-x-pixels-from-the-right */
/* background-position:14.5em 0.25em; */
}
[class^="menu-onglets"].cpadminhoriz > ul  li.edit > a {
filter: brightness(0) invert(1); /* https://stackoverflow.com/questions/24224112/css-filter-make-color-image-with-transparency-white */
background-image: url(/images/svg/edit.svg);/* https://www.svgrepo.com/svg/103461/edit */
}
[class^="menu-onglets"].cpadminhoriz > ul  li.stats > a {
filter: brightness(0) invert(1);
background-image: url(/images/svg/stats.svg);
}
[class^="menu-onglets"].cpadminhoriz > ul  li.del > a {
filter: brightness(0) invert(1);
background-image: url(/images/svg/trash.svg);
}
[class^="menu-onglets"].cpadminhoriz > ul  li.org > a {
filter: brightness(0) invert(1);
background-image: url(/images/svg/org.svg);
}
[class^="menu-onglets"].cpadminhoriz > ul  li.copy > a {
filter: brightness(0) invert(1);
background-image: url(/images/svg/copy.svg);
}
[class^="menu-onglets"].cpadminhoriz > ul  li.move > a {
filter: brightness(0) invert(1);
background-image: url(/images/svg/move.svg);
}
[class^="menu-onglets"].cpadminhoriz > ul  li.share > a {
filter: brightness(0) invert(1);
background-image: url(/images/svg/mail.svg);
}
/*
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(1) > a:hover {
background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(2) > a {
background-image: url(/images/default/cliparts/mini/15.gif);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(3) > a {
background-image: url(/images/default/cliparts/mini/16.gif);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(4) > a {
background-image: url(/images/default/cliparts/mini/25.gif);
background-position:165px -1px;
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(1) li:nth-of-type(1) a {
background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(1) li:nth-of-type(2) a {
background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(1) li:nth-of-type(3) a {
background-image: url(/images/default/cliparts/mini/22.gif);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(1) li:nth-of-type(4) a {
background-image: url(/images/default/cliparts/mini/21.gif);
background-position:14.2em -0.1em;
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(3) li:nth-of-type(1) a {
background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(3) li:nth-of-type(2) a {
background-image: url(/images/default/cliparts/mini/abonne_1.gif);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(3) li:nth-of-type(3) a {
background-image: url(/images/default/cliparts/mini/77.gif);
}
[class^="menu-onglets"].cpadminhoriz > ul  li:nth-of-type(3) li:nth-of-type(4) a {
background-image: url(/images/default/cliparts/mini/21.gif);
}
*/
.cpadminhoriz.menu-ongletsh > ul > li > a, .cpadminhoriz.menu-ongletsh > ul > li > a:visited, .cpadminhoriz.menu-ongletsh > ul > li > a:link, .cpadminhoriz.menu-ongletsh > ul > li > a:active {
height:1.9em;
padding:0;
}
.cpadminhoriz.menu-ongletsh {
border-bottom:1px #cc6600 solid;
}
.menu-ongletsh.cpadminhoriz > ul ul {
border:1px #cc6600 solid;
}
.menu-ongletsh.cpadminhoriz > ul li { /* tous les niveaux de <li> en commen�ant par les onglets */
background: linear-gradient(#ffcc99, #ff9933 15%, #ff9933 100%);
border-top: 1px #ffcc99 solid;
border-bottom: 1px #cc6600 solid;
}
.menu-ongletsh.cpadminhoriz > ul > li { /* on vire le border du bas sur les onglets */
border-bottom: none;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cpadminhoriz > ul > li > ul li:first-child {
border-top: none;
}
.menu-ongletsh.cpadminhoriz > ul > li > ul li:last-child {
/*
border-bottom: 1px #cc6600 solid;
*/
border-bottom:none;
}
.menu-ongletsh.cpadminhoriz > ul > li > ul li:hover > a, .menu-ongletsh.cpadminhoriz > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cpadminhoriz > ul > li > ul li:hover > a:link, .menu-ongletsh.cpadminhoriz > ul > li > ul li:hover > a:active,
.menu-ongletsh.cpadminhoriz > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cpadminhoriz > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cpadminhoriz > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cpadminhoriz > ul > li > ul li:hover a:hover:link {
background-color:#fff;
color:#ff9933;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cpadminhoriz > ul ul {
background: linear-gradient(#ffcc99, #ff9933 10%, #ff9933 100%);
box-shadow: 0px 1px 2px #ccc;
border-radius:0.2em; /* 5px pour le menu orange originel */
}
/*-*-*/

/* ci-dessous figure aussi dans admin_nav_complement.css mais comme c'était pas visible en ligne quand on n'est pas identifié, j'ai du le mettre aussi ici */
[class^="menu-onglets"] li {
  position:relative; /* permet de positionner les sous menus de la nav horizontale et verticale */
  /***************************/
  letter-spacing: .05rem; /*+++*/ /*.1rem*/
  text-shadow: 2px 2px #000; /*+++*/
  /*  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%); */
}
.menu-ongletsh > ul > li { /* onglets, le padding est uniquement sur les onglets pour la nav horizontale */
  padding:0.4em 0.15em 0 0.15em; /*+++*/
  border-radius:0.4em 0.4em 0 0; /* si on veut des onglets carr?s, retirer le border-radius ci-dessous */
  /*width:5em;*/ /*+++*/
  width:auto;
  margin-left:0.2em; /*+++*/
/*todo
  font-size:1em;
*/
  height:1.05em; /*+++*/ /* 1.1em; */
}
.menu-ongletsh > ul > li { /* onglets, le padding est uniquement sur les onglets pour la nav horizontale */
  padding:0.4em 0 0 0;
  border-radius:0.4em 0.4em 0 0; /* si on veut des onglets carrés, retirer le border-radius ci-dessous */
  width:5em;
  margin-left:0.2em;
/*todo
  height:1.1em;
  font-size:1em;
*/

}
@media only screen and (max-width: 959px) and (orientation: portrait) {
  .menu-ongletsh > ul {
    border:none;
  }
  .menu-ongletsh > ul > li {
    padding:5px;
    height: 30px;
    width: 95%;
    border-radius:0;
    font-family: TextFont;
  }
  .menu-ongletsh > ul > li:first-child {
  }
  .cpadminhoriz.menu-ongletsh > ul > li > a, .cpadminhoriz.menu-ongletsh > ul > li > a:visited, .cpadminhoriz.menu-ongletsh > ul > li > a:link, .cpadminhoriz.menu-ongletsh > ul > li > a:active {
    height:100%;
    width: fit-content;
  }
}