/***************/
/* STYLES YAMAFOTO */
/***************/
.s { display:inline-block;font-size:9px; }
.mh { margin-top:5px; }
.tc { text-align:center; }
.l { float:left;text-align:left; }
.lr { float:left;text-align:right; }
.r { float:right;text-align:right; }
.rl { float:right;text-align:left; }
.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 */

h5 {
  font-size:20px; /* Mes sites > (dans bread) */
}
/***************/
/* STYLES YAMAFOTO */
/***************/



.content.giant, .content.g {
  font-size:3.65vw; /* 50px; */
}
.content.big, .content.b {
  font-size:1.5vw; /* 40px; */
}
.content.medium, .content.m {
  font-size:1vw; /* 25px; */
}
.content.small, .content.s {
  font-size:0.8vw; /* 15px; */
}

/***************/
/* STYLES JEBOU */
/***************/
.encart {
  clear:both;
  padding-top:15px;
}
.sommaire {
  border:3px orange groove; /* groove: https://www.geeksforgeeks.org/how-to-create-a-3d-groove-border-using-css/ */
  padding:5px 5px 25px;
  border-radius:30px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45); /* https://stackoverflow.com/questions/49653136/css-glassy-slightly-folded-borders-3d-effect */
}
.sommaire .a1 {
  font-size:1vw; /*17px;*/
  margin-left:0;
}
.sommaire .a2 {
  font-size:0.8vw; /*15px;*/
  margin-left:1vw;
}
.sommaire .a3 {
  font-size:0.75vw; /*14px;*/
  margin-left:1.8vw;
}
.sommaire .a4 {
  font-size:0.7vw; /*13px;*/
  margin-left:2.8vw;
}
.sommaire .a5 {
  font-size:0.65vw; /*12px;*/
  margin-left:3.8vw;
}
.sommaire .a6 {
  font-size:0.6vw; /*11px;*/
  margin-left:4.8vw;
}
.sommaire h5{
  padding:0;margin:0;
}
/***************/
/* FIN STYLES JEBOU */
/***************/




 /*********************/
/* STYLES DE LA PAGE */
/*********************/
* {
/*  margin:0; Pour une raison inconnue ça fout la merde et le bouton "Créer un site" en haut dans l'admin dans sitebook_liste n'est plus cliquable */
  padding:0;
}

/*
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
body,button,input,select,textarea{color:#333;font-family:futura-pt,Helvetica,Arial,sans-serif!important;font-size:17px;font-size:1.1rem;line-height:1.2}
*/
@font-face { /* https://stackoverflow.com/questions/3837249/font-face-src-local-how-to-use-the-local-font-if-the-user-already-has-it */
  font-family: 'LogoFont';
  /* src: url(https://www.montmartre-site.com/test/Bahagia.otf); */
  src: local('Segoe script'), url(/fonts/segoesc.ttf); /*src: url(/fonts/segoesc.ttf);*/
}

@font-face {
  font-family: 'TitleFont';
  /* src: url('https://www.globe-site.com/fonts/a53e489ff8262e8e5302c1ad24494aff.woff')format("woff"); */
  src: url(/fonts/gilmer-light.otf);
}
@font-face {
  font-family: 'TextFont';
  /* src: url(https://www.montmartre-site.com/test/Monospace.ttf); */
  /* src: url(/fonts/Roboto-Regular.ttf); */
  src: url(/fonts/gilmer-light.otf);
}
@font-face {
  font-family: 'MenuFont';
  src: url(/fonts/gilmer-light.otf);
}
h1 {
  font-size:1.8vw; /*1.8 passe mieux en portrait sur mobile avant: 2vw */
  color:#000; /* #003366; couleur texte principal */
  margin:0;
}
/* form guestbook */
.oblig {
  width:450px;
  margin:auto;
}
/******************/
/* admin */
/*h3 {
  font-family:titlefont;*/ /* "American Scribe W04 Regular" */
/*  font-size:70px;
  margin:0;
}*/

/*************************************************/
body  {
  -webkit-text-size-adjust: 100%;
  background-color:#000;/*42B26B;FFBE29;2E4F79;A34C7C */
  /*
  margin:1px 10px;
  */
  text-align:center;
  /*
  font-family:"Verdana", "arial", "helvetica";
  */
  font-size:12px;
  color:#000000;
  margin:0 0 15px 0; /* bug: il me rajoute une marge en haut du body meme quand margin=0 */
  padding:0 5%; /*+++*/



  /* ajout� depuis admin.css */
  background-image:url(images/fond.gif);
  background-color:#9FC8EF;
  text-align:center;
  /* margin:0 15px 0px 15px auto; */
/*  margin:0; */
/*  padding:0; */
  font-size:14px;
  color:#3F77AF;

  /* ajout� depuis admin.css */
  font-size:12px;
  color:#3F77AF;

  height:90%;

  font-family:TextFont, comic sans ms,arial,helvetica;
}
@media only screen and (max-width: 1420px) { /*+++*/
  body {
    padding:0 1%;
  }
}

/* ajouté depuis admin.css */
/*
a, a:active, a:visited, a:link { color:#3F77AF; }
*/
a:hover { text-decoration:none; }
/***************************/
h1, h2, h3, h4, h5, h6 {
  font-family:TitleFont;
}
.doc  {
/*
  width:750px;
  */
  margin:auto;
}
.top  {
  text-align:left;
/*
  margin:0;
*/
  border-radius:25px 25px 0 0; /* admin avant: border-radius:25px 25px 0 0; */
/*  background-color:#fff; retiré pour admin */
  padding: 25px 0 0 45px; /* admin avant: padding: 15px 0 0 45px; */
/*
  height:110px;
  */
}
.bottom {
  position: relative; /* pour mettre les liens des reseaux sociaux en absolute */
  height:20px;
}
.bottom > div:first-child {
  float:left;padding-left:3px;z-index:0;
}
.bottom > div:nth-of-type(2) {
  float:left;z-index:0;padding-left:11vw;
}
.bottom > div:nth-of-type(3) {
  float:left;z-index:0;padding: 0 0 0 10vw;
	font-size: 0.7vw;
	font-weight: normal;
}
.bottom > div:nth-of-type(4) {
  z-index:0;
}
/****************/
.left_col  {
  display:table-cell;
  vertical-align:top;

  width:21%;
  padding:0;
  margin:0;

  text-align:center; /* left */
  font-size: 1.7vw;

  /* background-color:#fff; retiré pour admin */

  padding-left:15px; /* ajouté pour globe-site.com */
}
.right_col  {
/*  display:table-cell; */
  display:none;
  vertical-align:top;
  width:1px;
  padding:5px;
  border:1px solid #fff;
  border-left:none;
  border-bottom:none;
  background-color:#CDBFFF;
  color:#FFFFFF;
  font-size:12px;
  text-align:center;
}
.content  {
  display: table-cell;
  /*width:476px;*/ /* 610 */
  border:1px solid #fff;
  border-bottom:none;
  color:#000;
  /* background-color:#fff; retiré pour admin */
  text-align:left;
  padding:0 1vw; /* admin, avant: padding: 1vw; */
  /*
  font-size:12px;
  */
  font-size: 1vw;
  font-family:TextFont, comic sans ms,arial,helvetica;
/* admin
  décaler vers le haut le .content pour avoir le meme resultat qu'avec le logo dans la colonne
  pour remonter le content parce que le logo est dans le header alors que normalement il devrait etre dans la colonne avec le content au meme niveau. Il en résulte en bas un espace équivalent en hauteur mais c'est pas grave et c'est même bien car ça aère le contenu. */
  border:none; /* admin */

}
.ta_l {
  text-align:left;
}
.ta_r {
  text-align:right;
}
.ta_c {
  text-align:center;
}
.ta_s {
  text-align:start;
}
.ta_e {
  text-align:end;
}
.ta_j {
  text-align:justify;
}
.ta_a {
  text-align:justify-all;
}
.table {
  display:table;
  margin:auto;
  width:100%;
  /*background-color:#fff; retiré pour admin */
  height:100%;
  position:relative;
}
.table, .top { /* admin */
  /* admin */
  /*  pexels-steve-1902415 */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 1)), url('/images/pexels-rovenimages-com-344613-949587.jpg'); /* https://stackoverflow.com/questions/8287447/create-a-white-rgba-css3 */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95)), url('/images/pexels-hngstrm-1939485.jpg');
  background-size:contains;

  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1)), url('/images/japonaise.png'); /* https://www.artmajeur.com/pechane/fr/oeuvres-d-art/10599913/visage-japonais */
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:top center;
  background-attachment: fixed;
}
.bando-haut-cont {
  display:none; /* admin */
}
.bando-haut {
height:1vw;
padding:0.5vw;
border-radius: 0px 0px 0px 16px;
-moz-border-radius: 0px 0px 0px 16px;
-webkit-border-radius: 0px 0px 0px 16px;
border: 0px solid #000000;
background: #ffa84c;
background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%);
background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%);
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
}
.content a:active, .content a:link, .content a:visited {
  color:#000; /* #3F77AF; couleur liens principal */
  font-weight:normal;
  text-decoration:underline;
}
.content a:hover  {
  color:#000; /* #003366; couleur texte principal */
  text-decoration:none;
}
.content img.center {
  margin:auto;
  display:block;
}
.content img.left {
 width:20vw;
 float:left;
 margin-right:1.5vw;
 border-radius:15px;
}
.content img.giant, .content img.g {
  width:50vw;
}
.content img.big, .content img.b {
  width:30vw;

  /*-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.3)))*/
  /* mask-image:linear-gradient(180deg, black 60%, transparent 100%); */ /* https://www.youtube.com/watch?v=MftATkhHrnY */
  mask-image:linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, black 30%, black 60%, transparent 100%),
linear-gradient(90deg, transparent 0%, black 30%, black 90%, transparent 100%)
  ;
  mask-composite:intersect;

}
.content img.medium, .content img.m {
  width:10vw;
}
.content img.small, .content img.s {
  width:5vw;
}
.content img.right, .content img.r {
 float:right;
 margin-left:1.5vw;
}
.cent_p, .cent_m, .cent_g { /* Note : .left et .right n'ont aucun impact sur .cent_xxx car il est en width:100% et il n'est pas en position:relative ni absolute; */
  /* box-sizing:content-box; Pour cacher la scrollbar et que l'image occupe vraiment 100% https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll */
  width:100%;height:200px;background-size:cover;overflow:hidden;box-sizing:content-box;
}
.cent_p {
  height:200px;
}
.cent_m {
  height:350px;
}
.cent_g {
  height:500px;
}
.link_menu {
background: #f9c667;
background: -moz-linear-gradient(top,  #f9c667 0%, #f79621 100%);
background: -webkit-linear-gradient(top,  #f9c667 0%,#f79621 100%);
background: linear-gradient(to bottom,  #f9c667 0%,#f79621 100%);
background-repeat: repeat-y;
background-position: 55% bottom;
background-size: cover;
background-image: linear-gradient(to bottom, rgba(249, 198, 103, 0.95), rgba(247, 150, 33, 0.83)), url('/images/Texturelabs_Atmosphere_147S.jpg');
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 );
opacity: 1;border-radius:51px;padding:0;margin:0;
}
/* j'avais mis la lignne ci-dessous en commentaire, je l'ai vir�e pour qu'on voit class="on" pour le book (et sans doute aussi pour le site) et du coup la ligne en dessous sert � rien je pense */
.link_menu .on, .link_menu .on:visited, .link_menu .on:link, .link_menu .on:active, .link_menu .level1on, .link_menu .level1on:visited, .link_menu .level1on:link, .link_menu .level1on:active,

.link_menu .on a, .link_menu .on a:visited, .link_menu .on a:link, .link_menu .on a:active, .link_menu .level1on a, .link_menu .level1on a:visited, .link_menu .level1on a:link, .link_menu .level1on a:active
 {
  font-weight:bold;
  color:red;
  /*
  background-color:#fff;
  */
  /*
border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  */
}
/* https://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container */
.zap {
  display:block;
  position:relative;
  /*****************/
  /*
  background-color:orange;
  width:200px;
  height:30px;
  z-index:111;
  */
}
.zap:after
{
    content: "";
    position: absolute;
	top:0; /* top:0 est necessaire sinon le background apparait comme decalle vers le bas, mais ne pas definir left:0 sinon le background se positionne au dessus du texte. Laisser comme ca et le background se positionne juste apres le texte */
    width: 60%; /* choisir une valeur entre 60% et 100% pour width, width et height sont necessaires sinon le background n'apparait pas */
    height: 100%;
/*
variantes de fleches:
background: linear-gradient(45deg, green 25%, transparent 25%, transparent), linear-gradient(-45deg, transparent 74%, green 75%);
background: linear-gradient(-45deg, green 75%, transparent 75%), linear-gradient(45deg, green 25%, transparent 25%, transparent);
idee: faire des traits derriere les fleches, ou des fleches avec des traits
*/
/* il faut mettre le background dans :after a cause du "transparent" */
/* background: linear-gradient(-45deg, #f79d2c 75%, transparent 75%), linear-gradient(45deg, transparent 25%, #f79d2c 25%); */ /* on fabrique la fleche grace a un degrade */
background-size: cover;  /* permet de couvrir toute la surface avec le background */
background-repeat: no-repeat;
/*
background: linear-gradient(-45deg, #f79d2c 75%, transparent 77%),  linear-gradient(45deg, transparent 23%, #f79d2c 25%), linear-gradient(to right,  #f9c667 0%,#f79621 100%);
*/
background: linear-gradient(-45deg, #f79d2c 75%, transparent 77%),  linear-gradient(45deg, transparent 23%, #f79d2c 25%);

}


.link_menu p { /* https://www.w3schools.com/howto/howto_css_arrows.asp */
/* https://tipue.com/blog/background-zoom-rotate/ */
/* https://stackoverflow.com/questions/31068603/how-to-rotate-background-keeping-container-fixed */
/* https://stackoverflow.com/questions/28109212/can-i-create-an-arrow-using-background-only */
/*
float:right;
width: 40px;
  height: 18px;
  background: linear-gradient(45deg, black 25%, transparent 25%, transparent), linear-gradient(-45deg, black 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, black 75%), linear-gradient(-45deg, transparent 75%, black 75%);
  background-position: 20px 0;
  background-size: 40px 35px;
transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  */
  /*
border: solid black;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 10px;
transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  */
}
.link_menu a {
  font-family:MenuFont, comic sans ms,arial,helvetica;
/*
  background-color:#c286c2;*/ /* level 0 */
  color:#fff;
  display: block;
  text-decoration:none;
  padding:0.5vw;
  border-bottom:1px #f79621 solid;
}
.link_menu li:last-child a {
	border-bottom: none;
}
.link_menu .level1 {
/*
  background-color:#ffbfff;*/ /* meme bkgd color que left_col */
  color:#1865ce;
  padding-left:2em;
}
.link_menu a:hover  {
  background-color:#fff;
  color:green; /* a priori a virer */
  background-position:-200px 0;
}
.link_infos {
  background:url(images/liens/liens_infos.gif);
}
.titre {
  margin:0;
  height:22px;
  background-repeat:no-repeat;
}
.bottom  {
border-radius: 0px 0px 16px 16px;
border: 0px solid #000000;
background: #ffa84c;
background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%);
background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%);
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 );
text-align:center;
padding:0.5vw;
font-size:0.9vw;
font-weight:bold;
color:#ffffff;
}
.bottom a:link, .bottom a:visited {
  text-decoration:none;
  color:#FFFFFF;
}
.bottom a:hover  {
  text-decoration:underline;
  color:#FFFFFF;
}
.mentions-legales{
  /*font-size:0.9vw;*/
}
.copyright {
  text-align:right;padding-right:3px;
}
h3 {
  font-size:1.5vw;
}
h2, .sommaire h5  { /* admin et globe-site.com : .sommaire h5 */
  font-size:1.7vw;
  color:#000;/*color:#003366; couleur texte principal */
  margin:0;
  padding:0;
  border-bottom:1px #000 solid;/*border-bottom:1px #003366 solid;*/

  background: #FFEFBA;
  background-size: contains, contains, contains;
  border-radius:51px;
  background: linear-gradient(to bottom,  rgba(249, 198, 103, 1) 0%,rgba(247, 150, 33, 1) 100%), url('/images/japonaise.png');

	text-align: center;

	color: #e68a1e; /*#f79621;*/
	text-shadow: 1px 1px 1px #000; /* https://web-eau.net/blog/ecrire-en-3d-avec-css3 */
  padding-bottom:1.5vh;
}
h2::first-letter, .sommaire h5::first-letter {
  font-size:2vw;
  font-weight: bold;
  color: #b36c17;
}
img  {
  border:none;
}

.link_menu .news {
  background-color:red;
  color:#ffffff;
}
 /*********************/
/* FIN STYLES DE LA PAGE */
/*********************/


/***************/
/* FORM DE CONTACT */
/***************/
.contact div {
  clear: both;
}
.contact p {
  padding:3px;
  width: 20%;
  float:left;
  text-align:right;
}
.contact i {
  display:block;
  float:left;
}
.contact textarea {
  width:320px;
  height:200px;
}
/***************/
/* FIN FORM DE CONTACT */
/***************/






  /*********/
/* Mobile */
/*********/
#mobile-cont, #mobile-footer-cont {
  clear:both;
  position:relative;
}
#mobile-footer {
  background-color: #ffffff;
}
/*.mob-foot-btn {*/
.bouton-visite {
    position:fixed;

    cursor:pointer;
    white-space: nowrap;
    /*
    width:20vw;*/
    /*height:5vw;*/
    font-size:1.5vw;

/*
    border-radius:11px;
*/

    right:5.45vw;
    top:0.3vw;

    z-index:2;

    /*
    opacity:1;
    animation: change 5s ease-in-out infinite;
    color:#33336c;
    */
}

#mobile-footer .bouton {
  display:block;
  width: 100px;
  height:35px;
  position:absolute;
  left: 0;
  top: -20px;
  padding:0;
}
#mobile-footer .btnimg {
  border:none;
  width:100px;
}
#mobile-footer a:not(.button-71, .bouton-suiv) {
  text-decoration:none;
  background-color: orange;
  color:#ffffff;
  padding:5px;
}
#mobile-footer .bouton-suiv {
  background-color: orange;
}
#mobile {
  height:46px; /* 36 = fleche + 2*5 = marges*/
  display:none;
  background-color:#ffffff;
}
#mobile form {
  margin:0;
  padding:0;
}
#mobile p {
/*
  margin:9px 0 0 13px;
*/
  padding:9px 0 0 13px;
  float: left;
  text-align:center;
  margin:auto;
}
#mobile .l, #mobile .r {
  margin:5px 5px;
  padding:0;
  width:40px;
  height:36px;
}
#mobile .r {
  float: right;
  position:relative;
}
#mobile .bouton {
  display:block;
  width: 70px;
  height:35px;
  position:absolute;
  left: -120px;
  top: -20px;
}
#mobile .btnimg {
  border:none;
  width:100px;
}
#mobile_prev, #mobile_next {
  display:none;
  border:none;
  background:none;
  height:36px;
  width:40px;
}
#mobile_prev {
  background-image:url(images/fleche_gauche.png);
}
#mobile_next {
  background-image:url(images/fleche_droite.png);
}
  /*********/
/* FIN Mobile */
/*********/




  /*********/
/* FLECHE */
/*********/
.sticky, .sticky-footer, .sticky-arrow {
  position: fixed;
  width: 100%
}
.sticky-arrow {
  font-size:10vw;
  display:block;
  right:0;
  bottom:30%;
}
.sticky {
  top: 0;
}
.sticky-footer {
  bottom: 0;
}
#mobile-footer {
  display:none;
}
  /*********/
/* FIN FLECHE */
/*********/



  /*********/
/* FLAGS */
/*********/
.flags {
  display:none;
  clear:both;
  height:40px;
  background-color:#fff;
  padding-top:5px;
}
.flags-cont {
  width:350px;margin:auto;
}
.flags-cont p {
  float:left;font-size:9px;margin:0 5px;
}
/**************************/
.flagsheader {
  float:right;
}
.flagsheader a{
  display:block;
  float:left;
  /*
  width:25px;
  height:20px;
  */
  width:2.5vw;
  height:1.5vw;
  margin-left:5px;
  background-size:cover;
}
.flm{ /* sert uniquement a ajouter une margin-top a .flagsheader en bas */
  margin-top:5px;
}
.us{
  background:url('https://www.montmartre-site.com/test/english-version.jpg');
}
.uk{
  background:url('https://www.montmartre-site.com/test/la-version-anglaise.jpg');
}
.cn{
  background:url('https://www.montmartre-site.com/test/chinese-flag.jpg');
}
.tw{
  background:url('https://www.montmartre-site.com/test/taiwan-flag.jpg');
}
.es{
  background:url('https://www.montmartre-site.com/test/drapeau-espagne.jpg');
}
.it{
  background:url('https://www.montmartre-site.com/test/bandiera-italiana.jpg');
}
.de{
  background:url('https://www.montmartre-site.com/test/drapeau-allemand.jpg');
}
.nl{
  background:url('https://www.montmartre-site.com/test/drapeau-neerlandais.jpg');
}
  /*********/
/* FIN FLAGS */
/*********/









/*****************************************/
/* SLIDE */
/*****************************************/
.slidecont {
  position:relative;
  clear:both;
  height:30vw;
}
.slideshow {
  opacity:0.5;
/*
  overflow:scroll;
  width:100%;
  height:50%;
*/
/*
  position:relative;
  clear:both;
  height:30vw;
  */
  position:absolute;
  width:100%;
  height:30vw;

  /* On definit dans .slideshow ici le background par defaut qui est le premier dans la liste ci-dessous.
  C'est le background qui doit apparaitre si le navigateur est trop vieux,
  ou si on n'a pas defini un background pour la page en cours
  */
/*
  background:
    url("https://www.montmartre-site.com/test/visite-guidee-Montmartre-devant-le-Passe-Muraille-avec-les-masques.jpg") no-repeat, url("la-visite-guidee-insolite-de-Montmartre.jpg") no-repeat,
    url("aurore-guide-3.jpg") no-repeat, url("lisette-visite-scolaire-Montmartre.jpg") no-repeat,
    url("saint-pierre-de-montmartre-vitrail-delivrance-pierre-de-la-prison-actes-des-apotres.jpg") no-repeat, url("st-pierre-de-montmartre-basilique-sacre-coeur-montmartre.jpg") no-repeat
  ;
*/
  background:
    url("https://www.montmartre-site.com/test/visite-guidee-Montmartre-devant-le-Passe-Muraille-avec-les-masques.jpg") no-repeat, url("https://www.montmartre-site.com/test/la-visite-guidee-insolite-de-Montmartre.jpg") no-repeat,
    url("https://www.montmartre-site.com/test/dorothee-guide-montmartre-devant-cabaret-du-lapin-agile.jpg") no-repeat, url("https://www.montmartre-site.com/test/lisette-visite-scolaire-Montmartre.jpg") no-repeat,
    url("https://www.montmartre-site.com/test/robert-en-visite-a-montmartre.jpg") no-repeat, url("https://www.montmartre-site.com/test/st-pierre-de-montmartre-basilique-sacre-coeur-montmartre.jpg") no-repeat
  ;

  background-size:
    contain, cover,
    contain, cover,
    contain, cover
  ;

  /* https://stackoverflow.com/questions/5981842/html-background-image-offset-by-x-pixels-from-the-center */
  /*
  background-position:
    50% calc(50% - 30vw), 0 -100%,
	50%, 0 0,
	50% calc(50% - 30vw), 0 -100%
  ;
  */
  background-position:
	  50%, 0 40%,
      50% calc(50% + 30vw), 0 200%,
	  50% calc(50% + 60vw), 0 300%
  ;
}

/*
.slideshow-page_id substitue le background par defaut avec celui de la page
IMPORTANT: il doit figurer dans la css en dessous de la class par defaut, ici .slideshow
*/
.slideshow-730 {
  background: url("https://www.montmartre-site.com/test/photo4.jpg") no-repeat;
  background-size:cover;
  background-position:0 40%;
}


.slideshow.slideshow0 {
    background-position:
	  50%, 0 40%,
      50% calc(50% + 30vw), 0 200%,
	  50% calc(50% + 60vw), 0 300%
	  !important
	;
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}
.slideshow.slideshow1 {
    background-position:
      50% calc(50% + 60vw), 0 500%,
	  50%, 0 20%,
	  50% calc(50% + 60vw), 0 200%
	  !important
	;
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}
.slideshow.slideshow2 {
    background-position:
      50% calc(50% + 60vw), 0 500%, /* j'ai du passer de 300% a 250% sinon ca deconnait quand on resizait en plus petite resolution d'ecran : experimenter et verifier que ca passe partout */
	  50% calc(50% + 60vw), 0 300%,
	  50%, 0 60%
	  !important
	;
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}

.slidepix {
/*
  position:absolute;
  */
  z-index:5;
  left:0;
  top:0;
  width:100%;
  height:30vw;
  /*
  background: url("https://www.montmartre-site.com/test/visite-montmartre.jpg") no-repeat;

  Pour une variation dans l'animation, mettre en commentaire les deux lignes ci-dessous mais dans ce cas il faudra virer l'image centrale de slideshow
  */
  background-size: contain;
  background-position: 50%;

  opacity:0;
}

.slidepix::before {
  content: "";
  font-size:1.5vw;
  background-color: #ffffff;
  color: #000000;
  font-weight: bold;
  border-radius:3vw;

  position: absolute;
  display: block;
  top: 85%;
  left:50%;

 -webkit-transform: translate(-50%);
 -moz-transform: translate(-50%);
 -ms-transform: translate(-50%, -50%); /* Source: https://www.w3schools.com/howto/howto_css_center-vertical.asp et https://stackoverflow.com/questions/14523927/vertically-centering-content-of-before-after-pseudo-elements/14524161#14524161 */
  transform: translate(-50%, -50%);
}

.slidepix.slidepix0::before {
  content: "Visite insolite de Montmartre";
}

.slidepix.slidepix1::before {
  content: "Visite scolaire de Montmartre";
}

.slidepix.slidepix2::before {
  content: "Guides specialistes de Montmartre";
}

.slidepix.slidepix0, .slidepix.slidepix1, .slidepix.slidepix2 {
  opacity:1;
  transition:5s;
}

.slidepix.slidepixb0, .slidepix.slidepixb1, .slidepix.slidepixb2 {
  opacity:0;
  transition:1s;
}

.slidepix.slidepix0 {
  background: url("https://www.montmartre-site.com/test/visite-guidee-Montmartre-devant-le-Passe-Muraille-avec-les-masques.jpg") no-repeat;
  background-size: contain;
  background-position: 50%;
}
.slidepix.slidepix1 {
  background: url("https://www.montmartre-site.com/test/dorothee-guide-montmartre-devant-cabaret-du-lapin-agile.jpg") no-repeat;
  background-size: contain;
  background-position: 50%;
}

.slidepix.slidepix2 {
  background: url("https://www.montmartre-site.com/test/robert-en-visite-a-montmartre.jpg") no-repeat;
  background-size: contain;
  background-position: 50%;
}

/****************************************/
.circle {
  position:absolute;
  left:50%;
  top:95%;
  /*bottom:0;*/
  background-color:#ffffff;
  margin:0;padding:0;
  border-radius:5vw;
  /*
  padding-right:0.5vw;
  */
  padding:0.5vw 0.5vw 0.5vw 0;
  /*
  margin-bottom:0.5vw;
*/
 -webkit-transform: translate(-50%);
 -moz-transform: translate(-50%);
 -ms-transform: translate(-50%, -50%); /* Source: https://www.w3schools.com/howto/howto_css_center-vertical.asp et https://stackoverflow.com/questions/14523927/vertically-centering-content-of-before-after-pseudo-elements/14524161#14524161 */
  transform: translate(-50%, -50%);
}
.circle p {
  cursor:pointer;
  float:left;
  width:1vw;
  height:1vw;
  border-radius:5vw;
  background-color:grey;
  /*
  margin-left:0.5vw;
  */
  margin:0 0 0 0.5vw;
}
.circle p:hover, .circle p.on {
  background-color:#000000;
}

/*****************************************/
/* FIN SLIDE */
/*****************************************/





/*****************************************/
/* LOGO */
/*****************************************/
.logo {
  width:5vw;
  height:5vw;
  background-image:url('logo.png');
  background-size:cover;
  margin:0;

  opacity:0.5;
  float:left;

  width:5vw;
  height:5vw;

  display:none;
}
.logotitre.header {
  display:none;
}
.logotitre {
  font-family: LogoFont, comic sans ms,arial,helvetica;/* admin, avant: LogoFont; */
  /* admin, avant:
  display:block;
  clear:both;
  font-size:5vw;
  color: orange;
  font-weight: bold;
  */
  /*
  text-shadow: 1px 1px 2	px #000000;
  text-shadow: 1px 1px 2px black, 0 0 25px orange, 0 0 5px darkblue;
  */
    /* admin, avant:
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  */
/*  background-color:#fff;*/
  /* margin:15px 0 15px 0; */
  /* padding:15px 0 15px 15px; */
  padding:0 0 15px 15px; /* admin */
}
.logo-anim {
  animation: runlogo 1.5s linear forwards;
}
.logotitre.sticky span { /* l'astuce ici consiste a creer un style associe a .logotitre.sticky pour ajouter une magin top au texte quand on reduit sa taille dans l'animation. Noter qie .logotitre.sticky est tout attache. */
  display:inline-block;
  margin-top:1vw;
}
@keyframes runlogo {
    0% { font-size:2vw; top: -20%;}
    100%{ font-size:2vw; top : 0;}
}

.logotitre a, .logotitre a:active, .logotitre a:link, .logotitre a:visited{
  text-decoration:none;
  font-family: LogoFont, comic sans ms,arial,helvetica;/* admin, avant: LogoFont; */
  display:block;
  clear:both;
  font-size:1.8vw; /* 1.7 admin, avant: font-size:3vw; */
  /* color: orange;
  font-weight: bold;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  */
/*  background-color:#fff;*/
  color:#f79f2e; /* #c4a13f;#ba8900; #e6a00b; */
  /*text-shadow: 1px 1px 2px blue;*/ /* grey #ffd182 #d48b0f black */
  text-shadow: 0.5px 0.5px 1px #023b96; /* #0279d0 #114ba6 #023b96 #225bb5 #5596ad #3289a8 */
  text-shadow: 2px 2px 4px #4ca0de;
  text-shadow: 1px 1px 2px #4ca0de;
/*  margin-left:25vw;*/
}
.logotitre a::first_letter, .logotitre a::first_letter:active, .logotitre a::first_letter:link, .logotitre a::first_letter:visited {
  color:#9c6c08;
  display:block;
}
.logotitre a::first-letter{
  color:#OOO;
}
/*****************************************/
/* FIN LOGO */
/*****************************************/







.img-vign { /* vignette dans guestbook; organiser */
  cursor:pointer; /* pour quand on déclare les événements en javascript */
}












/* avant : bouton réserver une visite */

.bouton-anim {
  animation: runbouton 1.5s linear forwards;
}
@keyframes runbouton {
    0% { top: -20%;}
    100%{ top : 0;}
}
@keyframes change {
  0%   {background-position: 0 50%;}
  50%  {background-position: 100% 50%;	}
  100% {background-position: 0 50%;}
}
 /******************************/
/* FIN BOUTON RESERVEZ UNE VISITE */
/******************************/




 /******************/
/* FLECHE EN HAUT */
/******************/
.fleche-haut {
  cursor: pointer;
  font-size:0.1vw;
  position:fixed;
  right:-20%;
  top:70%;
  z-index:1;
  background-color:grey;
  opacity: 0.5;

  width:3vw;
  height:3vw;
  border-radius:0.5vw;
}
.fleche-haut p {
/*  cursor:pointer;  */
  margin:1.3vw 1.1vw;
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); /* Source de la fleche: https://www.w3schools.com/howto/howto_css_arrows.asp */
}
.fleche-haut-anim {
  animation: runflechehaut 1.5s linear forwards;
}
@keyframes runflechehaut {
  0% { right: -20%;}
  100%{ right : 1%;}
}
 /******************/
/* FIN FLECHE EN HAUT */
/******************/







 /*************/
/* CADUQUE ? */
 /*************/
.arrow {
  border: solid white;
  border-width: 0 30px 30px 0;
  display: inline-block;
  padding: 30px;

  position:absolute;

  cursor:pointer;
}
/*
.right {
  z-index:2;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:50%;
  right:0;
}
*/

.left {
  left:0;
  top:50%;

  z-index:2;
/*
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
*/
}








 /*************/
/* CROSS : CADUQUE ? */
 /*************/
/* adapted from https://stackoverflow.com/questions/10019797/pure-css-close-button */
.cross{
/* le refaire avec un background */

visibility:hidden;

position:absolute;
right:30px;
top:0;
z-index:2;

width:15px;

    cursor:pointer;
    color: #fff;
    border: 2px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;

    font-size: 25px;

    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;
	/*
    padding: 11px 3px;
	*/
}

.cross:before {
	position:absolute;
	left:0px;
	top:8px;
    content: "�";
}







/********************/
/* RESEAUX SOCIAUX */
/********************/
/* ancien */
.social {
/*
  position:absolute;
  left:0;
  bottom:50px;
*/
  float:right;
}
.social-anim {
  position:absolute;
  /*
  left:0;
  bottom:50px;
  */
/*
  animation: runsocial 1.5s linear forwards;
*/
}
@keyframes runsocial {
	/* bottom marche pas
    0% { bottom:-50px;}
    100%{ bottom:50px;}
	*/
    0% { position:fixed;top:55vw;}
    100%{ position:fixed;top:49vw;}
}

.social a {
  width:4vw;
  height:4vw;
  display:block;
  float:left;
  margin-left:5px;
  background-size: cover;
/*  background-position:left; */
  opacity: 1;
  border-radius:25px;
  border:1px #000000 dashed;
}

.social2 {
  position:absolute;
  right:0;
  bottom:0.3vw;
  height:1.5vw;
  padding-right:1vw;
}
.social2 a {
  width:1.5vw;
  height:1.5vw;
  display:block;
  float:right;
  margin-left:5px;
  background-size: cover;
  opacity: 1;
  border-radius:25px;
  border:1px #000000 dashed;

/*
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  */
}

.tube{
/*
  background-image:linear-gradient(to bottom, rgba(249, 198, 103, 0.52), rgba(247, 150, 33, 0.73)),url("youtube.jpg");
  */
  background-image:url("/images/rs/youtube2.svg");
  background-position:40% center !important;
		/*
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 );*/ /* IE6-9 */
}
.book{
  background-image:url("/images/rs/facebook.svg");
}
.gram{
  background-image:url("/images/rs/instagram.svg");
}
.twitter{
  /* background-image:url("https://www.montmartre-site.com/test/twitter.jpg"); */
  background-image:url("/images/rs/x.svg");
}
.tiktok{
  background-image:url("/images/rs/tiktok.svg");
}
.pint{
  background-image:url("/images/rs/pinterest.svg");
}
.linked{
  background-image:url("/images/rs/LinkedIn-Icon-Logo.wine.svg");
  background-position:30% center !important;
  background-size: 170% 170% !important;
  background-repeat:no-repeat;
}
/********************/
/* FIN RESEAUX SOCIAUX */
/********************/

























/**********************/
/* MENU DEROULANT DU HAUT */
/**********************/
.menu {
  margin:0 0 1.1vw 1.1vw;
  padding:0;
}
.menu-anim {
	/*
    -webkit-animation:linear infinite alternate;
	*/
	/*
	animation-direction:normal;
	animation-iteration-count:1;
    animation-name: run;
    animation-duration: 2s;
	*/
	animation: run 2s linear forwards; /* pour forwards: https://stackoverflow.com/questions/3087360/cant-stop-animation-at-end-of-one-cycle et https://www.w3schools.com/css/css3_animations.asp */
}
@keyframes run { /* inspiration: https://stackoverflow.com/questions/41587802/css-animation-from-left-to-right */
    0% { left: 0;}
    100%{ left : 15%; top:2%; }
}
ul.link_menu li {
  list-style-type: none;
}
.menu li {
  list-style-type: none; /* https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-deroulant/ */
  float:left;
  font-size:1.5vw;
  font-weight:bold;
  margin:0 15px;
  position:relative;

  z-index:3;
  opacity:1;
}
.menu a, .menu a:active {
  text-decoration:none;
  color:#33336c;
}
.sub-menu {
  margin:0;
  padding:0;
  position:absolute;
  z-index:1;
  display:none;
  background-color:#FFFFFF;
  border:1px #000000 solid;
}
.sub-menu li {
  margin:0;
  padding:0 1vw;
  float:none;
  white-space: nowrap;
}
nav > ul li:hover {
  background-color: #33336c;
  color:#ffffff;
}
nav > ul li a:hover {
  color:#ffffff;
}
nav > ul li:hover .sub-menu {  /* https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-deroulant/ */
  display:block
}
/**********************/
/* FIN MENU DEROULANT DU HAUT */
/**********************/





/**********************/
/* ANIMATION DU HAUT */
/**********************/
@keyframes run {
    0% { left: 0;}
    100%{ left : 15%; top:2%; }
}









/**********************/
/* MESSAGES D'ALERTE */
/**********************/
.alert {
  border:1px #fff dashed;
  border-radius:5px;
  background-color:red;
  color:#fff;
  padding:3px;
}
.alert a{
  color:#fff;
}
#alerteDiv {
  position:fixed;
  left:45%;
  top:35%;
  z-index:111;
}
/* .alertmsg { */
#alerteDiv p {
  margin:15px;
  font-size:0.5em !important;
}
#alerteDiv > div:first-child {
  text-align:center;
  font-family:impact;
  font-size:19px;
}
#alerteDiv span {
  position:absolute;
  right:3px;
  top:3px;
}
#alerteDiv > div.contenttt {
  border-radius:0;
  padding-bottom:15px;
}
#alerteDiv div.clearfix {
  width:70px;
  font-size:14px;
  margin:auto;
}









 /**********/
/* COVER */
/**********/
.eeentete > div:first-child, div[class^="mmmembre"] > div:first-child, .covercont { /* a priori .covercont est caduque, en tous cas pour galerie */
  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(/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);
}













/* galerie */











.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; }





















/****************************************************************************************/
/* pagination */
.nextprev { /* pr�sent pour la pagination de l'album, peut-�tre � virer quand j'aurais d�fini la font-size qui impacte .pagination en amont */
  font-size:10px;
}
/* nextprev */
.nextprev a, .nextprev a:active, .nextprev a:visited, .nextprev a:link {
  color:#000;
}

.pagination {
  font-size:1.35em;
  margin-top:0.4em;
}



/*
ci-dessous permet d'adapter avec précision la taille de la pagination en fonction de la taille qu'on a choisi pour le contenu .content: giant...
alors que la taille en em est imprécise comme définie ci-dessous dans les commentaires:
.content div.pagination {
  font-size:0.5em;
}
*/
.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;
}


.pagination.membre_site {
  font-size:var(--pagination_size);
}
.pagination.big {
  font-size:1.5em;
}
.pagination.small {
  font-size:0.7em;
}
.pagination > div:first-child, .pagination > div:nth-child(2) {
  width:35%;
  float:left;
  text-align:left;
  padding:0.5em 0.3em 0 0;
}
.pagination > div:nth-child(2) {
  text-align:right;
  width:64%;
  padding:0;
}
.pagination > div:nth-child(2) a, .pagination > div:nth-child(2) a:active, .pagination > div:nth-child(2) a:visited, .pagination > div:nth-child(2) a:link, .pagination b.s  {
/* pas mal non plus si on met tout en commentaire */
  display:inline-block;
  width:2.5em;
  height:2em;
  background-color:#f0f0ff;
  margin-right:0.1em;
  color:#000;
  text-decoration:none;
  border-radius:5px;
  text-align:center;
  padding-top:0.5em;
}
.pagination > div:nth-child(2) a.off {
  visibility:hidden; /* permet de conserver les espaces contrairement � display:none qui cache les �l�ments et retire les espaces qu'ils occupent */
}
.pagination a.pagi-fl-l, .pagination a.pagi-fl-l:active, .pagination a.pagi-fl-l:visited, .pagination a.pagi-fl-l:link,
.pagination a.pagi-fl-r, .pagination a.pagi-fl-r:active, .pagination a.pagi-fl-r:visited, .pagination a.pagi-fl-r:link,
.pagi-fl-dble-l, .pagi-fl-dble-l:active, .pagi-fl-dble-l:visited, .pagi-fl-dble-l:link,
.pagi-fl-dble-r, .pagi-fl-dble-r:active, .pagi-fl-dble-r:visited, .pagi-fl-dble-r:link  {
  position:relative;
  margin:0;
  padding:0;
}
.pagination a.pagi-fl-l:before, .pagination a.pagi-fl-l:active:before, .pagination a.pagi-fl-l:link:before, .pagination a.pagi-fl-l:visited:before,
/*
https://outils-javascript.aliasdmc.fr/encodage-caracteres-geometrie/encode-caractere-25BA-html-css-js-autre.html
https://outils-javascript.aliasdmc.fr/encodage-caracteres-geometrie/encode-caractere-25C4-html-css-js-autre.html
https://www.toptal.com/designers/htmlarrows/
*/
.pagi-fl-r:before, .pagi-fl-dble-l:before, .pagi-fl-dble-r:before {
  content:"\2039"; /* \0025C4 */
/*
  position:absolute;
  font-size:2em;
  font-weight:bold;
  margin:0;
  padding:0;
*/
/*
  background:url(/images/default/pictos/fleche_double_left.gif);
  background:url(/images/default/pictos/fleche_double_right.gif);
*/
}
.pagi-fl-dble-l:before {
  content:"\00AB";
}
.pagi-fl-r:before {
  content:"\203A"; /* ? \0025BA */
}
.pagi-fl-dble-r:before {
  content:"\00BB";
}

  /*********/
/* AIDE */
/*********/
#aide {
  position:relative;
  overflow:hidden;

clear:both;border:1px green dashed;border-radius:25px;padding:5px;

display:none;
margin-top:5px;
}

#aide::before, #aide_close {
  content: "Aide";
  z-index:111; /* il faut que �a apparaisse au dessus du texte de l'aide */
  padding: 5px 15px;
  position:absolute;
  display: block;
  right:0;
  background-color:green;
  color:#fff;
  width:auto;
  border-radius: 0 25px 0 25px;
  text-decoration:none;
}

#aide::before {
  top:0;
}

#aide_close {
  bottom:0px;
  border-radius: 25px 0 25px 0;
}
  /*********/
/* FIN AIDE */
/*********/










/* ancienne position des mediaqueries */























/* ici avant nav horiz que j'ai mise dans admin_nav.css */



/* ici avant SITE BREAD */







 /***********/
/* BOUTONS */
/***********/
[class^="btn"], a[class^="btn"]:active, a[class^="btn"]:visited, a[class^="btn"]:link,
.but-nouveau, a.but-nouveau:active, a.but-nouveau:visited, a.but-nouveau:link,
.but-nouveau-r, a.but-nouveau-r:active, a.but-nouveau-r:visited, a.but-nouveau-r:link { /* nouveautes */
/*  font-size:1em; */
/*  z-index:5; */
  text-decoration:none;
  color:#fff;
}
/* effet d'enfoncement quand on clique sur un bouton */
a[class^="btn"]:active, a.but-nouveau:active, a.but-nouveau-r:active {
  transform: translateY(1px);
}


/* sitebook admin */
.bouton-visite button, .bouton-suiv, .content a.button-71, .content a.button-71:active, .content a.button-71:link, .content a.button-71:visited {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.bouton-visite button, .bouton-suiv, .button-71, .btn-nouveau, .btn-nouveau-r, .but-nouveau, .but-nouveau-r {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  /*
  font-size: 18px;
  */
  font-weight: 600;

  /*
  font-weight: bold;
  */
  font-size: 1.3em;

  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.bouton-visite button:before, .bouton-suiv:before, .button-71:before, .btn-nouveau:before, .btn-nouveau-r:before, .but-nouveau:before, .but-nouveau-r:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}
.button-71.bg {
  background-color: green;
}
.cancel {
  background-color: orange;
  opacity:0.2;
}
.but-nouveau, .but-nouveau-r {
  visibility: 'hidden'; /* par défaut on cache le bouton et c le js qui le montre onload sinon quand on n'a pas de scroll dans la page le bouton est visible jusqu'à ce que la page se charge donc le bouton du haut et du bas visibles en meme temps, ce qui est merdique, MAIS IL FAUT TROUVER UN MOYEN DE MONTRER LE BOUTON ICI AU CAS OU JS EST DESACTIVE */
}
.button-71.small {
  font-size:15px;
  font-weight:normal;
}
.content a.retour {
  padding-right:15px;
  opacity:0.2;
}
.retour::before {
  top:-5px;
  font-size: 2.5em;
  content: "\0025C4";
}
.bouton-visite button:hover, .bouton-suiv:hover, .button-71:hover, .btn-nouveau:hover, .btn-nouveau-r:hover, .but-nouveau:hover, .but-nouveau-r:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}
.but-enr {
  margin: 0 auto;
  display: block;
  font-weight: bold;
  font-size: 1.3em;
}
@media (min-width: 768px) {
  .button-71, .btn-nouveau, .btn-nouveau-r, .but-nouveau, .but-nouveau-r {
    padding: 16px 48px;
  }
}
.btn-nouveau, .btn-nouveau-r, .but-nouveau, .but-nouveau-r {
  display:inline-block;
  margin:5px auto;
  text-decoration:none;
  color:#fff;
  float:right;
}
.btn-nouveau, .but-nouveau {
  float:left;
}
/* boutons de la page */
.btnpage {
font-size:15px;float:right;margin-left:5px;
}

/* a[class^="btn"] interet de mettre [class^="btn"] au lieu de a[class^="btn"] = ça prend alors aussi en compte les boutons submit */
[class^="btn"], a[class^="btn"]:active, a[class^="btn"]:visited, a[class^="btn"]:link { /* nouveautes */
  font-size:2.7vw; /* 1.2em je l'ai changé uniquement à cause des boutons "Tous mes albums/une sélection d'albums" en haut de admingalerie */
  z-index:5;
  display:block;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border-top: 1px #99ccff solid;
  border-bottom: 1px #3c8eff solid;
  padding:0.15em;
  border-radius:15px;
  margin:auto;
  cursor:pointer;

  display:inline-block;
}
/* effet d'enfoncement quand on clique sur un bouton */
a[class^="btn"]:active {
  transform: translateY(1px);
}
a.btn-s, a.btn-s:active, a.btn-s:visited, a.btn-s:link  { /* s comme small, note: ici il faut mettre a.btn-s et pas simplement .btn-s sinon ça ne marche pas parce que avant dans la css j'ai mis a[class^="btn"]. */
  font-size:10px;
  display:inline-block;
}




 /***************/
/* MISE A JOUR */
/***************/
.misajour {
position:absolute;right:0;/* top:-50px; */display:inline-block;border-radius:11px;margin-top:5px;padding:5px;background-color:red;color:#fff;font-weight:bold;animation: 5s dissolve 1s forwards;
/* z-index:1111111111; */
z-index:9999999999999;top:45px;
}
.misajour_album {
position:absolute;right:10px;bottom:-5px;display:inline-block;border-radius:11px;margin-top:5px;padding:5px;background-color:red;color:#fff;font-weight:bold;animation: 5s dissolve 1s forwards;
}

/* dissolve effect */
@keyframes dissolve { /* https://www.sitepoint.com/community/t/help-with-fade-out-or-dissolve-text-in-css-animation/354436 https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css-animation */
  0% {
    opacity: 1;
  }
  100% {
    filter: blur(50px);
    opacity: 0;
    display:none;
  }
}
 /***************/
/* FIN MISE A JOUR */
/***************/



/* select block dans admin_nav_complement.css */




/* dep sup copier images */

/* favoris admin */





/* select block (suite) dans admin_nav_complement.css */
















/*************************/
/* MENU SELECT STYLYSE */
/*************************/
/* source: https://codepen.io/mrphang/pen/XWxKdpV */
select {
  /* Reset Select */
  /*
  appearance: none;
  outline: 10px red;
  border: 0;
  box-shadow: none;
  */
  /* Personalize */
  /*
  flex: 1;
  padding: 0 1em;
  color: #fff;
  background-color: #2c3e50;;
  background-image: none;
  cursor: pointer;
  */

}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
/*  display: flex; */
  width: 20em;
  height: 3em;
  border-radius: .25em;
  overflow: hidden;
}
/* Arrow */
.select::after {
font-size:10px;
  content: '\25BC';
  position: absolute;
  top: 0em;
  right: 1.1em;
  padding: 1.3em;
  background-color: #34495e;
  transition: .25s all ease;
  pointer-events: none;
}
/* Transition */
.select:hover::after {
  color: #f39c12;
}
.select:active::after { /* ajout jb */
  transform: rotate(180deg);
}

/*************************/
/* FIN MENU SELECT STYLYSE */
/*************************/










/***************************/
/* FORMULAIRE */
/***************************/
/*
form g?n?rique pas seulement form profil, r?utilisable partout, formh qu'on peut ensuite sp?cialiser en formhprofil si n?cessaire pour un ou plusieurs ?l?ments

A virer:
.col1, .col2, .col3
*/

/* je mets des input par d?faut pour tout le site y compris globesite */
input[type=password],
input[type=text],
input[type=number] {
}
/* pour l'avenir afin de mutualiser pour tout le site et virer les class i et c-i */
.form-container {
  width:49%;
/* tir? du form attestation d?placement: bootstrap? */
/* tir? du meme form:
font-family:sans-serif;
mono space:
font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-family:inherit;
font-family:marianne-bold;
font-family:marianne-regular,Arial,Helvetica,sans-serif;
*/
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
font-size:1vw;
}

/***************************/
/* FORMULAIRE STANDARD !!! */
/***************************/
.profiladmin_photo {
  position:absolute;
  right:1.8em;
  top:1.7em;
  display:block;
  width:26%;
  text-align:center;
}
.profiladmin_photo img {
  border:5px black solid;
  display:none;
}
.formh {
  font-size:1rem;
  padding-top:1em;
}
.formh p {
  /* min-height:3.5em; */
  /*min-height:2.8em;*/
  min-height:2.5em;
  /*border:1px black solid;*/
  float:left;
}
.formh p:nth-child(3n+1) {
  /*background:blue;*/
  clear:both;
  width:30%;
  text-align:right;
  padding:0.6em 0.8em 0 0;
  /*min-height:2.8em;*/
}
.formh p:nth-child(3n+2) {
  /*background:red;*/
  width:40%;
}
.formh p:nth-child(3n+3) { /* ?a, ?a sert ? mettre une "*" */
  width:15%;
  text-align:center;
/*
  padding-top:3px;
  color:red;
  width:16px;
*/
}
/* Formulaire vertical: creer param organiser */
.formv {
  font-size:1rem;
  padding:1em;
}
.formv p {
  min-height:2.35em;
}
.formv p:nth-child(3n+1) {
  text-align:left;
  padding:0.6em 0.8em 0 0;
  min-height:1.5em;
}
.formv p:nth-child(3n+3) {
  display:none;
}
.formv input[type=text], select {
  width:60%;
}
/*caduque?
.form-options {
  float:left;
  width:49%;
  margin:1px 0;
}
.sel1 {
  width:100%;
  margin:1px 0;
}
*/
/******************************************************************************************/
input[type=text], textarea, select, .c-i{
/*
display:block;
*/
  width:95%;
  height:calc(1.5em + .75rem + 2px);
  padding:.375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:#495057;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid #ced4da;
  border-radius:.25rem;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
@media (prefers-reduced-motion:reduce){
  input[type=text], textarea, select, .c-i{transition:none}
}
input[type=text]::-ms-expand, .c-i::-ms-expand{background-color:rgba(0,0,0,0);border:0}
input[type=text]:-moz-focusring, .c-i:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #495057}
input[type=text]:focus, textarea:focus, .c-i:focus, .select:focus {
  color:#495057;
  background-color:#fff;
  border-color:#80bdff;
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}

/* pomp? sur form attestation d?placement covid
input:invalid+span:after{content:"?";padding-left:.3em}
input:valid+span:after{content:"?";padding-left:.3em}
*/
.c-i:invalid+span:after{content:"?";padding-left:.3em}
.c-i:valid+span:after{content:"?";padding-left:.3em}
.c-i+span {
  margin-left:3px;
}

/*
.i:focus:not, .select:focus:not {
  color:#495057;
  background-color:#fff;
  border-color:#80bdff;
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}
*/

.i-speed { /* marche pas */ /* il me semble que c dans organiser */
  margin:0;
  padding:0;
  width:20px;
  height:20px;

  width:17px;
  height:17px;
  font-size:10px;
}

textarea, .texta, .texta2 {
/*
  display:block;
  width:100%;
*/
/*
  overflow:auto;
  font-family:verdana,arial,helvetica;
  width:99%;
*/
  font-size:1rem;
  height:206px;
  min-height:206px;
/*  resize: none; */
  resize: vertical; /* https://teamtreehouse.com/community/is-there-a-way-to-make-the-textarea-resizable-on-only-one-axis-like-can-you-keep-it-a-fixed-width-but-adjust-height */
  scrollbar-width: thin; /* https://css-tricks.com/almanac/properties/s/scrollbar-width/ */
}

@media all and (min-width: 0px){
  .texta-profil { width:284px;height:106px; }
}


 /********************************/
/* THIN SCROLLBAR POUR TEXTAREA */
/* Source: https://www.codegrepper.com/code-examples/css/thin+scrollbar+css */
/* uniquement pour les browsers webkit comme chrome */
textarea::-webkit-scrollbar, .texta::-webkit-scrollbar, .texta2::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
}
textarea::-webkit-scrollbar-track, .texta::-webkit-scrollbar-track, .texta2::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
textarea::-webkit-scrollbar-thumb, .texta::-webkit-scrollbar-thumb, .texta2::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}
/******************************************************************************/

/*caduque?
textarea, .texta2 {
  height:79px;
}
*/

.form-radio {
  float:left;
  margin:1px 0;
  padding:1px;width:280px;height:22px;
  voice-family: "\"}\"";voice-family:inherit;width:276px;height:18px;
}
html>body .form-radio { width:276px;height:18px; }

.form-check {
  margin-top:3px;
}
.naissance {
  width:32%;
}

/*
idees:
- une ligne de separation entre chaque input
*/














/* admin */
input[type=text], textarea, select, .c-i{
/*
display:block;
*/
  width:95%;
  height:calc(1.5em + .75rem + 2px);
  padding:.375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:#495057;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid #ced4da;
  border-radius:.25rem;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
@media (prefers-reduced-motion:reduce){
  input[type=text], textarea, select, .c-i{transition:none}
}
input[type=text]::-ms-expand, .c-i::-ms-expand{background-color:rgba(0,0,0,0);border:0}
input[type=text]:-moz-focusring, .c-i:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #495057}
input[type=text]:focus, textarea:focus, .c-i:focus, .select:focus {
  color:#495057;
  background-color:#fff;
  border-color:#80bdff;
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}

/* MENU SELECT DU BREAD DANS L'ADMIN GLOBESITE */
.select-inv {
  /*
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    */
    /* needed for Firefox: */
/*    overflow:hidden;*/
/*    width: 120%; */
/*
  background-color:#fff;
  width:auto;
  font-weight:bold;
  */
}
.select-inv:hover {
  background-color:grey;
  color:#fff;
  appearance: auto; /* https://developer.mozilla.org/en-US/docs/Web/CSS/appearance */
}

/***************************/
/* FIN FORMULAIRE STANDARD */
/***************************/




/***************************/
/* ENCADRE ACCUEIL ADMIN (sitebook_edit) POUR UN BOOK */
/***************************/
.accenc-cont {
border-radius:25px;display:inline-block;margin-top:3px;border:1px #7f9db9 solid;
}
.accenc-cont > p {
border-radius:25px;padding:15px;border-left:1px #ffffff solid;border-right: 1px #d8d2bd solid;background-color:#fff0ff;color:#996666;
}





/***************************/
/* SITEBOOK CONFIG */
/***************************/
.siteconfig {
border-radius:25px;
margin-bottom:5px; /* marge entre le form et le bouton Valider */
}

.container {
display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.siteconfig p:nth-child(even) {
float:left;width:59%;height:40px;text-align:right;
padding-top:6px;
}
.siteconfig p:nth-child(odd) {
float:left;width:39%;height:40px;padding:8px 0 0 8px;
}
.sitesel{
padding-top:5px;
}
.sitesel2{
padding:0 0 0 8px;
}

/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



















































/* Journal */
  /***********/
 /* encarts */
/***********/

/* encart entete margin */
.orc-h { margin:0 2px;height:1px; }
.orc-b { margin:0 1px;height:1px; }

.c-h3 { background-color:#73b2de; }
.c-hb3 { background-color:#a5cfef;border-left:1px #73b2de solid;border-right:1px #73b2de solid; }
.c-c3 { border-left:1px #73b2de solid;border-right:1px #73b2de solid;border-bottom:1px #73b2de solid; }
.c-t3d { border-left:1px #73b2de solid;border-right: none; }
.c-bord3 { background-color:#a5cfef; }
.c-t3d { color:#fff; }

/* A VIRER QUAND J'AURAI REMPLACE TOUTES LES LISTES AVEC CES TRUCS: albums, inviter, contact et favoris */
/* liste aspect */
.e1 { background:url(/images/default/check_block.gif); }
.ct1 { background:url(/images/default/checked2.gif); }

/* liste centrage */
.e2, .e3, .e4, .e5, .e6, .ct4, .ct4s { text-align:center; }

/* liste float */
/* Rq: on n'utilise pas class="l" car "l" comporte un text-align:left; */
.e1, .e2, .e3, .e4, .e5, .e6, .ct1, .ct2, .ct3, .ct4, .ct4s { float:left; }

/* liste padding */
.e1 { padding:3px 0; }
.e2, .e3, .e4, .e5, .e6 { padding:3px; }
.ct1 { padding:0; } /* padding:0 2px 0 0; */
.ct2, .ct3 { padding:5px 3px 0 3px; }
.ct4, .ct4s { padding:4px 3px 0 3px; }

/* liste properties */
.ct2, .ct3, .ct5, .ct6, .ct7, .ct8 { overflow:hidden; }

/* liste width */
/* .ct4, .ct4s: la largeur depend du scroll et occupe donc tout l'espace dispo */
.e1, .ct1 { width:2%;}
.e2, .ct2 { width:30%; }
.e3, .ct3 { width:21%; }
.e4, .ct4 { width:25%; }
.ct4s { width:195px; }
.e5, .ct5, .ct7 { width:195px; }
.e6, .ct6, .ct8 { width:193px; }

/* liste height */
.e { height:22px; }
.ct1 { height:26px; }
.ct2, .ct3, .ct7, .ct8 { height:26px; }
.ct4, .ct4s { height:22px; }
.ct5, .ct6 { height:30px; }

/* contenu liens */
.ct4 a, .ct4 a:active, .ct4 a:visited,
.ct4s a, .ct4s a:active, .ct4s a:visited {
  color:#000;font-size:10px;text-align:center;width:50px;font-weight:bold;
}

/* input text contact */
.i-ct {
  border:1px #7f9db9 solid;width:184px;height:20px;
}




/* CREER PARAM (entre autres) */
/* Source: https://codepen.io/brissmyr/pen/nLmreZ */
.close {
  visibility:hidden;
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}
/* ci-dessous: une variante serait d'utiliser un .svg */
.fleche_left, .fleche_left:active, .fleche_left:link, .fleche_left:visited,
.fleche_right, .fleche_right:active, .fleche_right:link, .fleche_right:visited {
  visibility:hidden;
  cursor: pointer;
  z-index:111;
/*
  border: solid #fff !important;
  border-width: 0 3px 3px 0 !important;
*/
  display: inline-block !important;
/*
  padding: 3px !important;
*/
  position: absolute !important;
  right: 3% !important;
  top: 50% !important;
  opacity:0.3;
  width:7vw !important;
  height:7vw !important;
  background-color:grey !important;
  border-radius:25px !important; /* 5vw pour un rond */
/*
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_arrows
https://www.w3schools.com/howto/howto_css_arrows.asp
*/
}
.fleche_left:hover, .fleche_right:hover {
  opacity: 0.5;
}
.fleche_left, .fleche_left:active, .fleche_left:link, .fleche_left:visited {
  left:3% !important;
}
.fleche_left span, .fleche_left:active span, .fleche_left:link span, .fleche_left:visited span,
.fleche_right span, .fleche_right:active span, .fleche_right:link span, .fleche_right:visited span {
  border: solid #fff !important;
  border-width: 0 3px 3px 0 !important;
  display: inline-block !important;
  padding: 3px !important;
  width:50%;
  height:50%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin:20% 0 0 30%;
}
.fleche_right span, .fleche_right:active span, .fleche_right:link span, .fleche_right:visited span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin:20% 30% 0 0;
}
  /***********/
 /* Mes messages email */
/***********/
table.messages tr {
  border: 1px black solid;
  border-right: 1px black solid;
}
table.messages td {
  padding:5px;
}
tr.line {
height:1px;
}
tr.line td {
padding:0;
background-color:grey;
}
.msg_deja_repondu {
  margin-top:5px;
  padding:5px;
  border:1px black solid;
  font-size:14px;
}
.repondu {
  background-color:yellow;
}
table.messages tr:first-child td { /* https://stackoverflow.com/questions/10450221/apply-style-to-cells-of-first-row */
    border:1px black solid;
    vertical-align: top;
}

/* avant .content.giant */












/* liste et album photos */
.newww {
  width:25px;
  height:12px;
/*
  margin:auto 3px;
*/
  /* hspace=3 align=absmiddle */
}

















/* form guestbook venant de new_montmartre.css figure dans guestbook.css */







/* loading */
/* .loading:after { */
.loading, .image_absente, .image_absente_diapo {
position:absolute;
/*z-index:99999999999999999;*/
top:0;
left:0;
width:100%;
height:95%;
background-image:url(/images/default/loading.svg);
background-position:50% 42%;
background-repeat:no-repeat;
background-size:10%;
}
.image_absente, .image_absente_diapo {
  z-index:-1;
}
.loading {
  z-index:99999999999999999;
}
.cover .image_absente, .cover .image_absente_diapo, #coverDiv .image_absente { /* pour la vignette du menu ecrire livre d'or et menu pochette editer album et vignette organiser (.cover .image_absente_diapo) */
  z-index:1;
}
.image_absente, .image_absente_diapo {
  top:10%;
  left:15%;
  width:70%;
  height:70%;
  background-image:url(/images/svg/image_absente.svg);
  background-position:center center;
  background-size:contain;
  opacity:0.2;
}
.image_absente_diapo {
  top:0%;
  left:0%;
}
.image_absente_diapo.cover { /* dans organiser album */
  width:100%;
  height:100%;
}
.image_absente::after, .image_absente_diapo::after { /* https://developer.mozilla.org/fr/docs/Web/CSS/::after https://stackoverflow.com/questions/36259410/how-to-set-size-of-svg-image-in-before-pseudo-class */
  content: "";
  display:block;
  height:100%;
  width:100%;
  background-position: center center;
  background-size: 70% 70%;
  background-image: url('/images/svg/interdit.svg');
  background-repeat: no-repeat;
  opacity:0.5;
}
.loading { /* loading form guestbook et editer album */
  background-color:#fffff0;
  border-radius:15px;
}
.cover.loading { /* livre d'or form image menu */
  z-index:0;
}
.menu-ongletsh, .menu-ongletsh ul, .menu-ongletsh li, .site_bread h5, .page_bread h5, .site_bread p, .page_bread div {
  margin:0;
  padding:0;
}
a.catalog, a.catalog:hover, a.catalog:link, a.catalog:active {
float:left;
margin:0 15px 15px 0;
display:block;
width:45%;
text-decoration:none;
}
a.catalog > h3 {
  font-size:1.47vw; /* 30px */
}
a.catalog > p:first-child {
  height:400px;
  opacity:0.65;
  background-size:contain; /* +++ */
}
a.catalog:hover > p:first-child {
  opacity:1;
}

ul.puce_point {list-style-type: circle;}
ul.puce_tiret {list-style-type: square;}
/*
ul.puce_tiret { margin:0;margin-left:0;padding:0;background-color: red;

list-style-image:url('/images/svg/archive-minimalistic-svgrepo-com.svg');
}
*/
ul.puce_tiret li {
/*  list-style-image:none; background-size:contains;background:url('/images/svg/archive-minimalistic-svgrepo-com.svg'); */
/*
display:block;
padding-left:25px;
margin:0;margin-left:0;
list-style-image:url('/images/svg/archive-minimalistic-svgrepo-com.svg');
*/
  /*font-size: 30px;*/
    /*list-style-type: none;*/
/*    margin-bottom: 1rem;*/
    /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Ik0wIDAgMjAgMTAgMCAyMFoiIGZpbGw9IiNhYWEiLz48L3N2Zz4=) no-repeat left top; */
    /*
    background-image: url('/images/svg/archive-minimalistic-svgrepo-com.svg') no-repeat left top;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Ik0wIDAgMjAgMTAgMCAyMFoiIGZpbGw9IiNhYWEiLz48L3N2Zz4=) no-repeat left top;
    */
    /*background-size:cover;*/
    /*padding: 0px 0 3px 24px;*/
} /* https://stackoverflow.com/questions/52347084/positioning-a-svg-icon-as-list-style-image */
/*
ul.puce_tiret li::marker{font-size: 0.1em;}
*/
/*
ul.puce_point {list-style-type: upper-roman;}
ul.puce_tiret {list-style-type: lower-alpha;}
*/
ul.puce_etoile, ul.puce_tiret, ul.puce_point, ol.puce_dieze {
  margin:0;
  padding:0 0 0 20px;
}
ul.puce_etoile li, ul.puce_tiret li, ul.puce_point li, ol.puce_dieze li {
  margin-bottom:15px;
  /*list-style-type: none;*/
}
ul.puce_tiret, ul.puce_etoile, ul.puce_point { /* https://stackoverflow.com/questions/57231618/how-to-resize-list-style-image */
list-style-type: none;
padding: 0;
margin: 0;
}
ul.puce_tiret li, ul.puce_etoile li, ul.puce_point li, .toto a.puce_tiret { /* .toto a.puce_tiret ajouté pour l'éditeur */
background: url('/images/svg/archive-minimalistic-svgrepo-com.svg') no-repeat left 6px;
background-size: 20px;
vertical-align: baseline;
min-height: 20px;
padding: 3px 0 7px 25px;
}
ul.puce_etoile li, .toto a.puce_etoile {
background: url('/images/svg/thin-chevron-round-right-icon.svg') no-repeat left 6px;
background-size: 20px;
}
ul.puce_point li, .toto a.puce_point {
background: url('/images/svg/pointing-right-finger-svgrepo-com.svg') no-repeat left 6px;
background-size: 20px;
}
  /***************/
 /* newsletter */
/***************/
.newsletter {

  font-size:1vw;
  text-align:justify;
  background-color:orange;
  margin-top:15px;
  padding: 15px;
  border-radius:25px;
  display:inline-block; /* j'y pensais plus mais c'est tout con pour que la width épouse le contenu https://stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents */

  color:#fff;
  background-position: -50% bottom;
  background-position: -10% bottom;
  background-position: 55% bottom;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(249, 198, 103, 0.95), rgba(247, 150, 33, 0.83)), url('/images/Texturelabs_Film_124S.jpg');
  background-image: linear-gradient(to bottom, rgba(249, 198, 103, 0.95), rgba(247, 150, 33, 0.83)), url('/images/Texturelabs_Atmosphere_147S.jpg');

}
.newsletter.col {
  padding: 5px;
  position:sticky;
  top:20px;
}
.newsletter.col form {
  text-align:center;
}
.newsletter p:first-child {
  font-size:1.2vw;
  font-weight:bold;
}
.newsletter input[type=text] {
  width:300px;
}

/* admin nav */
nav.menu-ongletsv.cpmainnav {
  width:85%;font-size:28px;margin:10px auto;position:sticky;
}
nav.menu-ongletsv.cpmainnav > ul {
  border-top:none;margin:0 0 15px;
}

/* jebou */
.encadre_1 {

}
.encadre_2, .encadre_3, .encadre_4, .encadre_5 { /* j'ai ajouté !important pour les liens du menu déroulant de l'éditeur */
/*  padding:5px; */
/*  border:1px green solid;*/
  width:auto !important; /* prendre fit-content */
  box-sizing: border-box !important;
  border-radius:5px !important;
  padding: 23px 20px;

  background: #fcf6e1 !important; /*#fff8e2 #ebb85e;*/
	border: 2px solid #de9d3f !important; /*#fea419;*/

}
.encadre_3 {
  background: #e2ffee !important;
	border: 2px solid #37ad4b !important;
}
.encadre_4 {
  background: #e2f2ff !important;
	border: 2px solid #4c87fc !important;
}
.encadre_5 {
  /*background: #ffe2e2;*/
	border: 2px solid #ad3737 !important;
  padding-left:80px !important;

  background: #ffe2e2 url('/images/svg/exclamation.svg') no-repeat 25px 15px !important;
  filter: invert(37%) sepia(30%) saturate(0%) hue-rotate(314deg) brightness(115%) contrast(110%);
  filter: invert(37%) sepia(30%) saturate(1000%) hue-rotate(200deg) brightness(115%) contrast(110%);
  filter: invert(37%) sepia(30%) saturate(1000%) hue-rotate(350deg) brightness(115%) contrast(110%);
  filter: invert(37%) sepia(30%) saturate(1000%) hue-rotate(320deg) brightness(115%) contrast(110%); /* presque bon */
  filter: invert(37%) sepia(30%) saturate(1000%) hue-rotate(320deg) brightness(50%) contrast(120%);
  filter: invert(37%) sepia(30%) saturate(1000%) hue-rotate(320deg) brightness(90%) contrast(120%); /* bien */
  filter: invert(37%) sepia(30%) saturate(1000%) hue-rotate(327deg) brightness(87%) contrast(130%); /* pas mal, changer simplement hue-rotate et ça rend bien avec difs valeurs */
  filter: invert(35%) sepia(40%) saturate(700%) hue-rotate(327deg) brightness(87%) contrast(130%); /* bien */
  filter: invert(30%) sepia(40%) saturate(700%) hue-rotate(327deg) brightness(87%) contrast(130%);
  filter: invert(30%) sepia(30%) saturate(900%) hue-rotate(927deg) brightness(87%) contrast(130%); /* sympa */
  filter: invert(30%) sepia(30%) saturate(900%) hue-rotate(327deg) brightness(100%) contrast(130%) !important;

  background-size: 50px !important;
  /*
il doit y avoir moyen soit en trouvant un outil pour choisir la couleur filtrée,
soit en combinant le filtre et mask-image
  https://codepen.io/sosuke/pen/Pjoqqp
  https://www.reddit.com/r/webdev/comments/ppm6io/changing_the_color_of_an_svg_image_with_css_on/?rdt=51873
  https://css-tricks.com/cascading-svg-fill-color/
  https://dev.to/hasantezcan/how-to-colorize-svg-image-1kc8
  https://stackoverflow.com/questions/11383922/can-css-be-used-to-mask-background-images
  filter: invert(77%) sepia(2%) saturate(2283%) hue-rotate(314deg) brightness(115%) contrast(110%);
*/
  /*border: 2px solid #000;*/
  /*background: #000;*/
  /*
  background: #ededed url('/images/svg/exclamation.svg') no-repeat 25px 15px;
  background: #404040 url('/images/svg/exclamation.svg') no-repeat 25px 15px;
  background-size: 50px;
  */
  /*
  color:#000;
  filter: invert(77%) sepia(2%) saturate(2283%) hue-rotate(314deg) brightness(115%) contrast(110%);
*/

/* ci-dessous avec mask-size:100% : moyen de faire des anims intéressantes avec le masque et le texte en dessous */
/*
color:#000;
background: #ffe2e2;
mask-size: 50px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-position: 25px 15px;
  mask-image:url(/images/svg/exclamation.svg); *//*  no-repeat 25px 15px */

}
.encadre_5::before {
  content: "";
  display:block;
  /*
  height:10%;
  width:10%;
  background-position: center center;
  background-size: 70% 70%;
  */
  background-image: url('/images/svg/interdit.svg');
  background-repeat: no-repeat;
  /* opacity:0.5; */
}

/* figure aussi dans admin_nav_complement.css : à retirer de admin_nav_complement.css */
/* ENCADRE-COIN POUR FORM POSTER MESSAGE GUESTBOOK */
.eeencadre-coin {
  float:left;
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
  color:#ccc;
  font-weight:bold;
  border-radius:0.5em 0 0 0;
  padding:0.45em;
  position:relative;

}
.eeencadre-coin::after, .eeencadre-coin:after {
  content:"";
  position:absolute;
  right:-2em;
  top:0em;

/* pour faire une sorte de zoom
box-shadow:2px 2px 2px gray,
-1px -1px 2px white;
border-radius:15px;
*/

  width:2em;
  height:2em;
  background: linear-gradient(45deg, #1c58c3, #1567cf 10%, #1c58c3 38%, #99ccff 50%, #fff 50%, #fff 100%);
}
.eeencadre-coin.cpmoderation {
  background: linear-gradient(#ff0000, #ff3d3d 20%, red 75%, #ff3d3d 100%);
}
.eeencadre-coin.cpmoderation::after, .eeencadre-coin.cpmoderation:after {
  background: linear-gradient(45deg, #ff3d3d, red 10%, #ff3d3d 38%, #ff0000 50%, #fff 50%, #fff 100%);
}
.c-clist {
border:1px #1c58c3 solid;

  border-radius:0 5px 5px 5px;
}
/* FIN encadre coin */
/* ci-dessou présent dans admin_nav.css */
.adminlogo {
  display:block;
  text-decoration:none;
  font-size:1em; /* 36px */
  /*margin:15px 0 15px 85px;*/
  margin:15px 0 15px 0;
  font-family:LogoFont;
/*
  display:block;
  float:left;
  width:288px;
    height:92px;
  text-decoration:none;
*/
}
/* form guestbook venant de new_montmartre.css */
/* membre contact / Ecrire � */
.eeecrire {
  padding:5px 5px 25px;
  border-radius:0 5px 5px 5px;
}
.eeecrire p {
  margin:0;
  padding:0 0 5px 0;
}
.eeecrire > p:nth-child(odd), .eeecrire > div > p  { /* .eeecrire > div > p : revoir le form car je ne sais plus pq j'ai mis un div à cet endroit */
  padding:15px 0 5px 0;
}
.eeecrire input[type=text] {
  /*width:100%;*/
}
.eeecrire textarea {
  /*width:100%;*/
  overflow:auto;font-size:12px;font-family:verdana,arial,helvetica;
}


/*********/
/* MEDIAQUERYES */
/*********/

/* Portrait and Landscape */
@media only screen and (max-width: 959px) {
#cookieChoiceInfo {
  font-size:5px;
}
.logotitre.header {
  display:block;
}
.doc  {
width:100%;
}
a.catalog > p:first-child { /* hauteur des images de catalog */
	height: 300px;
}
#mobile-footer {
display:block;
}
.content, .table {
/*overflow:hidden;*/
}
.left_col, .right_col {
display:none;
}
.flags, .mobile-footer-cont {
display:block;
}
#mobile {
display:block;
}
a.catalog, a.catalog:hover, a.catalog:link, a.catalog:active {
width:95%;
}
.table, .top {
  background-position:30% center;
  background-size: 85%;
}
.eeencadre-coin::after, .eeencadre-coin::after {
	content: "";
	position: absolute;
	right: -8.0em;
	top: -0em;
	width: 8em;
	height: 5.8em;
	background: linear-gradient(45deg, #1c58c3, #1567cf 10%, #1c58c3 38%, #99ccff 50%, #fff 50%, #fff 100%);
}
.top {
	padding: 20px 0 20px 40px;
}
.logotitre {
	padding: 0;
  /* text-shadow: #FC0 1px 0 10px; */
  /*text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;*/
  /*text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;*/
}
}

/* Paysage */
@media only screen and (max-width: 959px) and (orientation: landscape) {
  *:not(a.catalog > h3, .bouton-suiv, .bottom, .formh p, select) {
    font-size-adjust: 1.2;
  }
  .top {
  	padding: 20px 0 20px 30px;
  }
  #mobile p:nth-child(odd) {
    padding-top:1.2vh;
  }
  #mobile-footer {
    display:none;
  }
  .bottom {
  	height: unset;
  }
  .bottom > div:nth-of-type(3) {
  	float:unset;
  	padding-right:unset;
  	width: fit-content;
  	margin: auto;
    padding:0;
  }
  .social2 {
  	position: unset;
  	right: unset;
  	bottom: unset;
  	height: unset;
  	padding-right: 1vw;
  }
  .social2 a {
  	width: 3vw;
  	height: 3vw;
  }
}
/* Portrait */
@media only screen and (max-width: 959px) and (orientation: portrait) {
  *:not(a.catalog > h3, .bouton-suiv, .bottom, .formh p, .p-pseudo) {
    font-size-adjust: 3;
  }
  .logotitre a, .logotitre a:active, .logotitre a:link, .logotitre a:visited {
    font-size: 1.5vw !important;
    margin-left:5vw;
  }
  h1 {
  	font-size: 1.4vw;
  	color: #000;
  	margin: 0;
  }
  h4 {
    font-size:1vw;
    margin: 3vw 0;
  }
  .catalog > h3 {
    text-align:center;
  }
  .dropzone {
    font-size: 10vw;
  }
.content img.b {
   width: 90vw;
}
.content img.medium, .content img.m {
	width: 40vw;
	border-radius: 25px;
}
  p {text-align:justify}
  .fleche-haut {
  	font-size: 1vw;
  	width: 9vw;
  	height: 9vw;
  	border-radius: 2vw;
  }
  .fleche-haut p {
    margin:3.2vw 2.6vw;
    /*border-width: 0 1.5vw 1.5vw 0;*/
    border-width: 0 0.8vw 0.8vw 0;
    padding: 1.5vw;
  }
  #mobile p:nth-child(odd) { /* les deux fleches de part et d'autre du menu select */
    display:none;
  }
  .formcontainer {
    width:unset;
  }
  h2, .sommaire h5  { /* admin et globe-site.com : .sommaire h5 */
    padding:4vh 0.3vh 4vh 0.3vh;
    font-size:0.75vh;
  }
  h2::first-letter, .sommaire h5::first-letter {
    font-size:1.5vw;
  }
  .bottom {
    padding:2vw;
    height:10vw;
    font-size: 0.5vw;
    /*
    height: fit-content;
    block-size: fit-content;
    */
  }
  .bottom > div, .bottom > div:first-child, .bottom > div:nth-of-type(2), .bottom > div:nth-of-type(3), .bottom > div:nth-of-type(4) {
    clear:both;
    float:unset;
    float:unset;
    text-align:center;
    /*border:1px black solid;*/
    width:100%;
    padding:unset;
    z-index:unset;
  }
  .bottom > div:nth-of-type(1)::after {
    display:block;
    content:var(--copyright);
    font-size:0.45vw;
    font-weight:normal;
    padding-top:0.5vw;
  }
  .bottom > div:nth-of-type(3) {
    display:none;
    float:unset;
    padding:0.9vw 0 0 0;
    padding:0;
  }
  /*
  .bottom > div:nth-of-type(3) > span:nth-of-type(1){
    display:none;
  }
  */
  .bottom > div:nth-of-type(3) > span:nth-of-type(2){
    font-size: 0.4vw;
    font-weight:normal;
  }
  .bottom > div:nth-of-type(2){
    width:fit-content;
    float:unset;
    text-align:center;
    font-size: 0.4vw;
    font-weight:normal;
    margin:auto;
    padding:2.5vw 0 1.5vw 0;
  }
  .bottom, .bottom > div:nth-of-type(4) {
/*    height:500px; */
    height: fit-content;
    block-size: fit-content;
  }
  /*
  .bottom {
    height: fit-content;
    width: fit-content;
    block-size: fit-content;
  }
  */
  .content a.button-71, .content a.button-71:active, .content a.button-71:link, .content a.button-71:visited {
    margin-left: 15vw;
  }
  .social2 a {
    width:10vw;
    height:10vw;
    margin-left:2vw;
  }
  .social2 {
    text-align:center;
    clear:both;
    position:unset;
    right:unset;
    bottom:unset;
    height:fit-content;
    block-size: fit-content;
  }
  input[type="text"], textarea, select { /* , .c-i */
  	/* display: block; */
  	width: 95%;
  	height: calc(10em + .75rem + 2px);
  	padding: .375rem .75rem;
  	font-size: 0.2rem;
  	font-weight: 400;
  	line-height: 10;
  	color: #495057;
  	background-color: #fff;
  	background-clip: padding-box;
  	border: 1px solid #ced4da;
  	border-radius: .25rem;
  	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  .content img.b {
    width:50vw;
  }
  .bouton-visite {
    top:7.5vw;
  }
  #mobile-footer > p { /* texte du nom de la page en dessous du bouton Page suivante */
  	font-size: 1.2vw;
  }
  /*.formh p:(odd), .formh p:(even) {*/
  /* .formh p {*/
  .formh p:nth-child(3n+1), .formh p:nth-child(3n+2), .formh p:nth-child(3n+3) {
    float:left;
    text-align:left;
    font-size:0.5vh;
    width:100%;
  }
  .formh p:nth-child(3n+1) {
    padding-top:2vh;
  }
  .formh p:nth-child(3n+1):after {
    content:":";
  }
  .formh p:nth-child(3n+2) {
    float:left;
    width: 90%;
  }
  .formh p:nth-child(3n+3) {
    float:right;
	  width: 5%;
    color:orange;
  }
  .eeencadre-coin::after, .eeencadre-coin::after {
  	right: -6.0em;
  	top: -0.3em;
  	width: 6em;
  	height: 6.0em;
  	background: linear-gradient(45deg, #1cc36a, #15cf6f 10%, #1cc36a 38%, #99ffb1 50%, #fff 50%, #fff 100%);
  }

}
.bouton-visite > button, .bouton-suiv {
  font-size:1vw;
}
#mobile p {
padding:9px 0 0 0;
}
#mobile p {
width:100%;
}
/*
#mobile .l, #mobile .r {
display:none;
}
*/
.bouton-visite {
  position:sticky;
  top:60px;
  text-align:center;
  padding:0 0 15px 0;
  margin:0;
}
}

/***********************************************************************/
@media only screen and (max-width: 959px) {
  /*
h1 {
font-size:5vw;
}
h2, .sommaire h5 {
  padding:1.5vw 5vw;
text-align:center;
display:block;
}
*/
.content, .table {
  /*
overflow:hidden;*/
font-size:1vw; /*avant 4.5vw : ca faisait foirer le mode portrait 3.5vw;*/
}
#main_nav {
visibility:hidden;
}
.flagsheader a{
width:6vw;
height:4vw;
}
.logo {
width:10vw;
height:10vw;
}
/*
.logotitre a {
font-size:8vw;
}
*/
.fleche-haut {
font-size:4vw;
width:5vw;
height:5vw;
border-radius:1vw;
}
.fleche-haut p {
margin:1.8vw 1.1vw;
}
.bottom {
	height: fit-content;
  padding:7px;
}
.bottom > div {
  width:100%;
  /*
  font-size:2vw;
  */
  float:unset;
  text-align:center;
}
.bottom > div:first-child {
/*  width:100%;*/
/*
  font-size:3vw;
  */
}
/* https://stackoverflow.com/questions/9550401/select-second-child */
.bottom > div:nth-of-type(3) {
  padding-bottom:15px;
}
.social2 {
  clear:both;
position:unset;
right:unset;
bottom:unset;
/*height:1.5vw;*/
/*padding-right:1vw;*/
/*width:100%;*/
margin:auto;
height: fit-content;
width: fit-content; /* https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content */
block-size: fit-content;
}
.social2 a {
  display:inline-block;
  float:unset;
width:7vw;
height:7vw;
border-radius:5px;
margin-left:3vw;
}
.flagsheader {
float:right;
width:10vw;
}
.flagsheader p{
float:left;
}
.flagsheader a{
display:inline-block;
float:left;
width:2.5vw;
height:1.5vw;
margin-left:5px;
background-size:cover;
}

.bando-haut {
border-radius: 0px 0px 16px 16px;
-moz-border-radius: 0px 0px 16px 16px;
-webkit-border-radius: 0px 0px 16px 16px;
}
.bouton-visite {
  top:5.3vw;
}
.content img {
width:5vw;
/*margin-right:0vw;*/
margin-top:1vw;
border-radius:15px;
}
.content img.small, .content img.s {
width:15vw;
}
.content img.right, .content img.r {
margin-left:5vw;
}

}

.flags {
display:block;
}

.sticky-footer {
z-index:111;
}


#mobile-footer a:not(.button-71, .bouton-suiv) { /* https://www.geeksforgeeks.org/how-to-exclude-particular-class-name-from-css-selector/ */
font-family:verdana;
font-size:4vw;
font-weight:bold;
border-radius:3vw;
}

@media only screen and (max-width: 959px) and (orientation: landscape) {
.logotitre a, .logotitre a:active, .logotitre a:link, .logotitre a:visited {
  margin-left:25vw;
}
#mobile select {
vertical-align: middle;
}
#mobile p {
width:50%;
}
#mobile .l, #mobile .r {
margin:5px 5px;
padding:0;
width:20%;
height:36px;
}
}
/*****************************************/
/* FIN MEDIAQUERIES */
/*****************************************/




/* ajout de admin_nav.css pour album */
[class^="menu-onglets"] ul {
	list-style: none;
}
.menu-ongletsh > ul > li {
	padding: 0.4em 0.15em 0 0.15em;
	border-radius: 0.4em 0.4em 0 0;
	width: auto;
	margin-left: 0.2em;
	height: 1.05em;
}
[class^="menu-onglets"] li {
	position: relative;
}
.menu-ongletsh li {
	font-size: 1em;
}
.menu-ongletsh li {
	float: left;
}
.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;
}
[class^="menu-onglets"] a, [class^="menu-onglets"] a:visited, [class^="menu-onglets"] a:link, [class^="menu-onglets"] a:active {
	display: block;
	overflow: hidden;
}


/**********/
/* ALBUM ENTETE */
/**********/
.bande.cpbleu, .eeentete.cpbleu > div:nth-child(2), .eeentete2.cpbleu > div:nth-child(1), div[class^="mmmembre"].cpbleu > div:nth-child(2), .ppprofil.cpbleu > div:nth-child(1), .annuaire_entete.cpbleu > div.titrecont {
background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
border:var(--entete_border) #1c58c3 solid;
/*
border-top:var(--entete_border) #74abe8 solid;
border-left:var(--entete_border) #74abe8 solid;
border-right:var(--entete_border) #3366ff solid;
border-bottom:var(--entete_border) #3366ff solid;
*/
color:#fff;
/*
background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #80a0af 100%);
background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #99ccff 95%, #3c8eff 100%);

plutot mettre le background sur le container et virer le border radius ici

variante: virer le border-radius et les borders sauf le border-bottom:
background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
border-bottom: 1px #3366ff solid;

background: url(/edsa-yamafoto/images/default/kit/bleu_xp/degrade_1.jpg); background-color:#1567cf;
*/

}
.eeentete.cpbleu,
.eeentete2.cpbleu,
div[class^="mmmembre2"].cpbleu > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cpbleu,
.mmmembre-v.cpbleu,
.mmmembre-v-r.cpbleu,
.ppprofil.cpbleu,
.annuaire_entete.cpbleu {
border:1px #1c58c3 solid; /* var(--entete_border) à la place de 1px */
}
/****************************************************/
/***************************************************/
/***************************************************/

/* entete guestbook */
.bande.cpbleu, .eeentete.cpbleu > div:nth-child(2), .eeentete2.cpbleu > div:nth-child(1), div[class^="mmmembre"].cpbleu > div:nth-child(2), .ppprofil.cpbleu > div:nth-child(1), .annuaire_entete.cpbleu > div.titrecont {
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
  border:var(--entete_border) #1c58c3 solid;
/*
  border-top:var(--entete_border) #74abe8 solid;
  border-left:var(--entete_border) #74abe8 solid;
  border-right:var(--entete_border) #3366ff solid;
  border-bottom:var(--entete_border) #3366ff solid;
*/
  color:#fff;
  /*
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #80a0af 100%);
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #99ccff 95%, #3c8eff 100%);

  plutot mettre le background sur le container et virer le border radius ici

  variante: virer le border-radius et les borders sauf le border-bottom:
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
  border-bottom: 1px #3366ff solid;

  background: url(/edsa-yamafoto/images/default/kit/bleu_xp/degrade_1.jpg); background-color:#1567cf;
  */

}
.eeentete.cpbleu,
.eeentete2.cpbleu,
div[class^="mmmembre2"].cpbleu > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cpbleu,
.mmmembre-v.cpbleu,
.mmmembre-v-r.cpbleu,
.ppprofil.cpbleu,
.annuaire_entete.cpbleu {
  border:1px #1c58c3 solid; /* var(--entete_border) ? la place de 1px */
}
/* fin entete guestbook */
/* entete messages guestbook */
.abracadab.cpbleu > div:nth-child(1) {
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
  border:var(--entete_border) #1c58c3 solid;
  color:#fff;

  font-family: TextFont, comic sans ms,arial,helvetica;
  letter-spacing: .1rem; /* https://developer.mozilla.org/fr/docs/Web/CSS/letter-spacing */
  text-shadow: 2px 2px #000;

}
.abracadab.cpbleu {
  border:1px #1c58c3 solid; /* var(--entete_border) ? la place de 1px */
}
/* fin entete guestbook */

/* btn retour guestbook */
/* a[class^="btn"] interet de mettre [class^="btn"] au lieu de a[class^="btn"] = ça prend alors aussi en compte les boutons submit */
[class^="btn"], a[class^="btn"]:active, a[class^="btn"]:visited, a[class^="btn"]:link { /* nouveautes */
  font-size:0.7vw;
  z-index:14;
  display:inline-block;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border-top: 1px #99ccff solid;
  border-bottom: 1px #3c8eff solid;
  padding:0.15em;
  border-radius:15px;
  margin:auto;
  cursor:pointer;
}
/* fin btn retour guestbook */