body {
  position:relative;
  font-size:24px;
}

.t-etoile { color:red; }

.t-p, .t-pb { font-size:10px; }

.hrrr {
  position:'fixed';
  z-index: '1111'; /* il faudrait une fonction pour déterminer le zindex max */
  background-color:red;
  width: 100%;
  height: 100%;
}

/* Source: https://codepen.io/brissmyr/pen/nLmreZ */
.close {
  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);
}
/******************************************************/
.fleche-left {
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.fleche-left:hover {
  opacity: 1;
}
.fleche-left:before, .fleche-left:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.fleche-left:before {
  transform: rotate(45deg);
}
.fleche-left:after {
  transform: rotate(-45deg);
}

.fleche-lefttt {
  position:absolute;
  left:0;
  top:50%;
  background-color:#ffffff;
  border-radius:35px;
  border:1px #000000 solid;
  width:70px;
  height:70px;
  font-weight:bold;
  font-family:arial;
  z-index:22222222;
}
.fleche-lefttt:after{
  margin:19px 0 0 24px;
  width:28px;
  height:28px;
  background-color:#ffffff;
  border-color: #000000;
  border-bottom: 6px solid;
  border-left: 6px solid;
  transform: rotate(45deg);
}
.margeur {
  margin-top:5px;
}
.margeur2 {
  margin-top:10px;
}
.margeur3 {
  margin-top:15px;
}
.margeur4 {
  margin-top:20px;
}
.margeur5 {
  margin-top:25px;
}
.off { display:none; }
.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 */

.encadre-prefix { float:left;width:5px; }
.encadre-coin { float:left;width:20px;height:20px; }


  /****************/
 /* encadre coin */
/****************/
.encadre-prefix { float:left;width:5px; }
.encadre-coin { float:left;width:20px;height:20px; }
.encadre-l { float:left;width:1px;margin:2px 0 0 0; }
.encadre-r { float:left;width:1px;margin:1px 0 0 0; }
.encadre { float:left;margin:0;padding:0; }
.encadre p {
  display:block;
  float:left;
  padding: 2px 3px 0 3px;
  margin:0;
  text-decoration: none;
  font-weight:bold;
}

.encadre p { height:19px;voice-family: "\"}\"";voice-family:inherit;height:16px; }
html>body .encadre p { height:16px; }
.encadre { height:20px;voice-family: "\"}\"";voice-family:inherit;height:19px; }
html>body .encadre { height:19px; }
.encadre-l { height:18px;voice-family: "\"}\"";voice-family:inherit;height:18px; }
html>body .encadre-l { height:18px; }
.encadre-r { height:19px;voice-family: "\"}\"";voice-family:inherit;height:18px; }
html>body .encadre-r { height:18px; }




.arrow {
  border: solid black;
  border-width: 0 5px 5px 0;
  border-radius:3px;
  display: inline-block;
  padding: 5px;



  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);
}
/**************************************/

/* https://stackoverflow.com/questions/28109212/can-i-create-an-arrow-using-background-only */

.c-coin {
width:20px;
height:20px;
/*
background: linear-gradient(0.6turn, transparent, #fff, #f69d3c);
*/
background: linear-gradient(45deg, #f69d3c, #f69d3c 50%, #fff 50%, #fff 100%);
}

.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.4em;
  position:relative;

}
.eeencadre-coin.cpmoderation {
  background: linear-gradient(#ff0000, #ff3d3d 20%, red 75%, #ff3d3d 100%);
}
.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::after {
  background: linear-gradient(45deg, #ff3d3d, red 10%, #ff3d3d 38%, #ff0000 50%, #fff 50%, #fff 100%);
}

* {
  margin:0;
  padding:0;
}
*.biggg, [class^="bbbouton"].biggg, [class^="bbbouton"].biggg:visited, [class^="bbbouton"].biggg:active, [class^="bbbouton"].biggg:link { /* à mettre sur le conteneur qqsoit l'élément défini en em qui se calera sur la font-size définie dans biggg : membre, entete, bouton... */
  font-size:35px;
}
*.smalll, [class^="bbbouton"].smalll:visited, [class^="bbbouton"].smalll:active, [class^="bbbouton"].smalll:link { /* idem */
  font-size:25px;
}
.margev {
  margin-top:0.1em;
}
.t99 { /* marges autour du membre site et de l'entete */
  margin:0.2em;
  /*
  width:99%;
  margin:5px auto;
  */
}

  /***********/
 /* BOUTONS */
/***********/
/* je viens de réaliser un truc: on peut peut-etre appliquer les couleurs de fond... (ca marche pas pour le padding ni color ni text-decoration) uniquement à "a" et appliquer at :active... uniquement "color" et "text-decoration" donc je dois pouvoir optimiser le code, notamment en sortant text-decoration du profil couleur
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
*/

/* bizarre, il faut mettre bbbouton en premier dans la class css sinon ça ne marche pas!!!??? */
[class^="bbbouton"], [class^="bbbouton"]:visited, [class^="bbbouton"]:active, [class^="bbbouton"]:link{
  font-family:impact;
  display:inline-block; /* nécessaire pour que l'effet :active soit visible */
  text-align:center;
  color:#fff;
  font-size:1em;
  text-decoration:none;
  padding:0.35em;
  border-radius:1em;
  cursor:pointer; /* pour <button> */
  position: relative; /* pour le ::after qui est en position:absolute; */
  /****************/
  outline: none;
  box-shadow: 0 0.15em #999;
}
[class^="bbbouton"]:active { /* un autre effet à récupérer ici et à proposer : https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Advanced_styling_effects */
  background-color: #3e8e41;
  box-shadow: 0 0.3em #666;
  transform: translateY(0.1em);
}


/* on pourrait carrément adjoindre une classe correspondant au picto comme ça on peut la réutiliser et on peut facilement changer le picto d'un bouton ou un
lien d'une nav */

/*
[class^="picto"] et [class^="bbbouton"] en meme temps, ça ne marche pas
*/

.picto-enregistrer, .picto-enregistrer:active, .picto-enregistrer:link, .picto-enregistrer:visited,
.picto2-enregistrer, .picto2-enregistrer:active, .picto2-enregistrer:link, .picto2-enregistrer:visited {
  padding:0.2em 1.8em 0.2em 0.2em;
  position:relative;
}

.pictol-enregistrer, .pictol-enregistrer:active, .pictol-enregistrer:link, .pictol-enregistrer:visited,
.picto2l-enregistrer, .picto2l-enregistrer:active, .picto2l-enregistrer:link, .picto2l-enregistrer:visited {
  padding:0.2em 0.2em 0.2em 1.8em;
  position:relative;
}

/* [class^="picto-"]*/
.picto-enregistrer::after, .picto-enregistrer:active::after, .picto-enregistrer:link::after, .picto-enregistrer:visited::after,
.pictol-enregistrer::after, .pictol-enregistrer:active::after, .pictol-enregistrer:link::after, .pictol-enregistrer:visited::after,

.picto2-enregistrer::after, .picto2-enregistrer:active::after, .picto2-enregistrer:link::after, .picto2-enregistrer:visited::after,
.picto2l-enregistrer::after, .picto2l-enregistrer:active::after, .picto2l-enregistrer:link::after, .picto2l-enregistrer:visited::after {
  content:"";
  position:absolute;

  right:0.2em;
  width:1.3em;
  height:1.3em;

/*
  top:0.3em;
  right:0.2em;
  width:1em;
  height:1em;
*/
	/* https://stackoverflow.com/questions/8195215/css-background-image-on-background-color */
/*
249, 198, 103, 0.52
247, 150, 33, 0.73
*/


background-image:linear-gradient(to bottom, rgba(153, 204, 255, 0.51), rgba(28, 88, 195, 0.8)),url(/images/default/cliparts/picto_liste.png);
background-image:linear-gradient(to bottom, rgba(153, 204, 255, 0.51), rgba(28, 88, 195, 0.8)),url(/images/default/cliparts/picto_organiser.png);
background-image:linear-gradient(to bottom, rgba(153, 204, 255, 0.51), rgba(28, 88, 195, 0.8)),url(var(--css_entete_image));

/*
background-image:linear-gradient(to bottom, rgba(153, 204, 255, 0.1), rgba(28, 88, 195, 0.5)),url(/images/default/cliparts/mini/15.gif);
mix-blend-mode: multiply;
*/

/*
 background-blend-mode: multiply;
 background-image: url(/images/default/cliparts/mini/15.gif);
*/
/*
 mix-blend-mode: multiply;
 background-image: url(/images/default/cliparts/mini/15.gif);
*/
background-position: right top;
background-repeat:no-repeat;
background-size:cover; /* contain 100%; cover idée: ici mettre un commentaire ou une zone analysé par php pour récupérer les valeurs possibles pour un menu déroulant {cover,contain} et ce sera lié au block auquel ça appartient */


}

.picto-enregistrer::after, .picto-enregistrer:active::after, .picto-enregistrer:link::after, .picto-enregistrer:visited::after,
.pictol-enregistrer::after, .pictol-enregistrer:active::after, .pictol-enregistrer:link::after, .pictol-enregistrer:visited::after {
border-radius:15px;
/*
box-shadow:2px 2px 10px gray inset;
-moz-box-shadow:2px 2px 10px gray inset;
-webkit-box-shadow:2px 2px 10px gray inset;
*/
box-shadow: inset 2px 2px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}


.pictol-enregistrer::after, .pictol-enregistrer:active::after, .pictol-enregistrer:link::after, .pictol-enregistrer:visited::after,
.picto2l-enregistrer::after, .picto2l-enregistrer:active::after, .picto2l-enregistrer:link::after, .picto2l-enregistrer:visited::after {
  left:0.2em;
  background-position: left top;
}


.picto-enregistrer:active::after,
.pictol-enregistrer:active::after {/* quand on clique */
/*
.bbbouton-enregistrer:active::after {
*/
/* http://css.mammouthland.net/css3/boites-et-lettres-ombres.php */
/*
box-shadow:2px 2px 2px gray,
-1px -1px 2px white;
*/

box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);

}
 /**********/
/* 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/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);
}

 /**********/
/* ENTETE */
/**********/
/*************************************/
/* .ppprofil : entete sans la cover */
/*************************************/
.ppprofil > div:nth-child(2) div p { /* on pourrait mettre ça dans une class css pour proposer une personnalisation de l'affichage du texte */
  float:left;
  width:69%;
  padding:3px;
}
/*
pair impair
https://la-cascade.io/nth-child
https://www.codegrepper.com/code-examples/css/css+nth+child+pair+impair
https://www.w3.org/Style/Examples/007/evenodd.fr.html
*/
.ppprofil > div:nth-child(2) div p:nth-of-type(odd) {  /* on pourrait mettre ça dans une class css pour proposer une personnalisation de l'affichage du texte */
  text-align:right;
  width:29%;
}
.ppprofil > div:nth-child(2) {
  /* font-size: 0.5em; */ /* texte du content du profil */
  font-size: 0.4em;
}
.ppprofil > div:first-child { /* titre */
 /* font-family: impact; */
  letter-spacing: .1rem; /* https://developer.mozilla.org/fr/docs/Web/CSS/letter-spacing */
  text-shadow: 2px 2px #000;
}
.ppprofil > div:nth-child(2) {
  padding-bottom:1.2em;
}

/*************************************/
/* .eeentete2 : entete sans la cover */
/*************************************/
.eeentete, .eeentete2, div[class^="mmmembre"], .ppprofil, .annuaire_entete {
  clear:both; /* pas besoin de clearfix */
  font-family: verdana;
  /* font-size:var(--entete_size); */
  font-size:2em;
  font-smooth: 15em;
  -webkit-font-smoothing: antialiased;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

/*  margin-top:5px; on met un MARGEUR a la place */
  border-radius:5px;
/*  position:relative; a retirer sinon la nav eeentete2 passe en dessous du content */
  background-color:#fff;
}
/* .eeentete .entete, membre entete { */
.eeentete > div:nth-child(2), .eeentete2 > div:nth-child(1), div[class^="mmmembre"] > div:nth-child(2), .ppprofil > div:nth-child(1) {
  font-family: verdana;
  font-size:var(--entete_titre_size); /* font-size titre profil */
  border-radius:4px 4px 0 0; /* permet de lisser le border du div content */
/*  background-repeat: repeat-x; */
  font-weight:bold;
  padding:var(--pseudo_padding);
  height:var(--entete_height);
}
.bande {
  padding:0.3em 0 0 0.5em;
  height:1.7em;
  text-align:left;
}
.bande, .eeentete > div:nth-child(2) span:first-of-type, .eeentete2 > div:nth-child(1) span:first-of-type, div[class^="mmmembre"] > div:nth-child(2) span:first-of-type, .titre { /* titre */
  font-family: impact;
  letter-spacing: .1rem; /* https://developer.mozilla.org/fr/docs/Web/CSS/letter-spacing */
  text-shadow: 2px 2px #000;
}
.eeentete > div:nth-child(2) span:first-of-type, .eeentete2 > div:nth-child(1) span:first-of-type, div[class^="mmmembre"] > div:nth-child(2) span:first-of-type, .titre { /* titre */
  float:left;
  padding-left:var(--pseudo_padding_left);
  width:80%;
}
.eeentete2 > div:nth-child(1) span:first-of-type {
  padding-left:0.5em;
}
/*.eeentete .entete span:nth-of-type(2n){*/ /* titre droite */
.eeentete > div:nth-child(2) span:nth-of-type(2n), .eeentete2 > div:nth-child(1) span:nth-of-type(2n), div[class^="mmmembre"] > div:nth-child(2) span:nth-of-type(2n), .titreright {
  float:right;
}
/* ENTETE ANNUAIRE */

 /***************/
/* MEMBRE SITE */
/**************/
.eeentete2, div[class^="mmmembre"], .ppprofil, .annuaire_entete {
  /* overflow:hidden; sinon menu album invisible */ /* sinon le border du content reste visible */
  border-radius:5px 5px 15px 15px; /*   border-radius: 5px 0 0 5px; */

/*yamafoto
  font-family: verdana;
  font-size:20px; permet de controller la taille de tout le contenu de .mmmembre, les dimensions du contenu étant définies en em
  font-smooth: 15em;
  -webkit-font-smoothing: antialiased;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

  margin-top:5px;

  position:relative;
*/

}
div[class^="mmmembre"].big {
  font-size:35px;
}
div[class^="mmmembre"].small {
  font-size:12px;
}
/* membre entete : voir code entete ci-dessus, et ci-dessous pour la suite. */
.eeentete2 > div:nth-child(2), div[class^="mmmembre"] > div:nth-child(3) { /* entete2 englobe entete3 et contenttt et permet avec min-height d'assurer une hauteur minimum pour le design */
  min-height:2.1em;
/*yamafoto   border-radius:0 0 15px 15px; */
}
.soustitres {
  min-height:3em;
}
div[class^="mmmembre"] > div:nth-child(3) > div:first-child { /* MENU PADDING TOP ET LEFT */
  padding:var(--entete_nav_padding);

  /* ici menu-onglets verticale
  padding-top:50px;
  width:200px;
  float:left;
  */
}
.eeentete2 > div:nth-child(2) > div:first-child {
  padding:0.3em 0 0 0;
}
.eeentete2 > div:nth-child(2) > div:nth-child(2), div[class^="mmmembre"] > div:nth-child(3) > div:nth-child(2) { /* contenttt nécessaire pour gérer le padding autour du content qu'on en mettre ou pas, ainsi que la width qu'occupe le content dans le book, tout en gardant le design de .entete2 pour le fond et les borders du bas incluant border-radius */
  width:var(--content_width);
  font-size:var(--content_font_size);
  padding-left:var(--content_padding_left);
}

/*div[class^="mmmembre-v"] > div:nth-child(3) {*/ /* ecartement du bord, de la nav et du contenu central */
.mmmembre-v > div:nth-child(3) {
/*  padding:0 0.3em 0.4em; */
padding:0 0 0 0.25em;
}
.mmmembre-v-r > div:nth-child(3) {
padding:0 0.25em 0 0;
}

/************************************/
div[class^="mmmembre2"] {
  border:none;
}
div[class^="mmmembre2"] > div:nth-child(2) {
  border-radius:15px 15px 0 0;
}
div[class^="mmmembre2"] > div:nth-child(3) {
  border:none;
  background-color:transparent;
}
div[class^="mmmembre2"] > div:nth-child(3) > div:first-child {
  padding:0.32em 0 0 3.5em;

  border-radius:0 0 15px 15px;
  position:relative;
}
div[class^="mmmembre2"] > div:nth-child(3) > div:nth-child(2) {
  padding: 0;
  width:100%;
}
div[class^="mmmembre2-v"] > div:nth-child(2) {
  border-radius:15px 15px 0 0;
}
div[class^="mmmembre2-v"] > div:nth-child(3) { /* marge ajoutée à la nav verticale et au content */
/*  margin-top:0.2em; */
  margin:var(--entete_nav_padding);
}
.mmmembre2 > div:nth-child(3) { /* marge ajoutée à la nav horizontale permet de la coller au bord */
  margin-top:0.12em;
}
.eeentete2 > div:nth-child(2) > div:nth-child(2),
.mmmembre > div:nth-child(3) > div:nth-child(2),
.mmmembre2 > div:nth-child(3) > div:nth-child(2) { /* marge ajoutée au content */
  margin-top:0.2em;
}
 /**********************************************/
/* faux border ajouté pour membre2 avec nav verticale */
/* pour combler, compense l'absence d'espace dûe au basculement de la menu-onglets à la verticale */
div[class^="mmmembre2"]  > div:nth-child(2) span:nth-of-type(2n):after {
  content:'';
  position:absolute;
  left:0;top:2.04em; /* affiner pour bien positionner le "faux" border */
  width:var(--entete_bas_width); /* si l'entete déborde, c'est ici que ça se règle */
  display:block;
  height:2.5em; /* affiner */
  border-radius:0 0 15px 15px;
}
div[class^="mmmembre-v"] > div:nth-child(3), div[class^="mmmembre2-v"] > div:nth-child(3) {
  padding-top:2.15em; /* 2.25em padding qui correspond au faux border ci dessus, à ajuster pour que ça colle parfaitement */
}
/* fin partie faux border */
/*************************/
div[class^="mmmembre-v"] > div:nth-child(3) > div:first-child, div[class^="mmmembre2-v"] > div:nth-child(3) > div:first-child {
  float:left;
  width:var(--content_vignettes_width);
/*  background-color:green; */
  padding:0;
}
div[class^="mmmembre-v"] > div:nth-child(3) > div:nth-child(2), div[class^="mmmembre2-v"] > div:nth-child(3) > div:nth-child(2) { /* contenttt nécessaire pour gérer le padding autour du content qu'on en mettre ou pas, ainsi que la width qu'occupe le content dans le book, tout en gardant le design de .entete2 pour le fond et les borders du bas incluant border-radius */
  float:right;
  width:var(--content_liste_width);
  font-size:var(--content_liste_size); /* impacte la liste quand il n'y a pas le div avec class="vertic" quand la liste des albums n'est pas dans un div (DIV_DEBUT, DIV_FIN) */
  padding:0;
/*  background-color:red;*/
}
div[class^="mmmembre-v-r"] > div:nth-child(3) > div:first-child, div[class^="mmmembre2-v-r"] > div:nth-child(3) > div:first-child {
  float:right;
}
div[class^="mmmembre-v-r"] > div:nth-child(3) > div:nth-child(2), div[class^="mmmembre2-v-r"] > div:nth-child(3) > div:nth-child(2) { /* contenttt nécessaire pour gérer le padding autour du content qu'on en mettre ou pas, ainsi que la width qu'occupe le content dans le book, tout en gardant le design de .entete2 pour le fond et les borders du bas incluant border-radius */
  float:left;
}
 /********************************/
/* Menus horizontal et vertical */
/*
MODE D'EMPLOI:

Bon à savoir:
.cprouge2.menu-ongletsv équivaut à .menu-ongletsv.cprouge2

Avec une nav verticale dans membre site:
le div "entete" englobe les deux autres - content et nav - et il faut régler avec précision la width des div du content et de la nav pour que les vignettes d'un album occupent tout l'espace.
Actuellement dans la css c'est 80% et 20% mais il faudra sans doute ajuster. Faire des essais.
Pour les besoins de la demo, j'ai mis des width en pixels.

IMPORTANT: pour membre-v et membre2-v IL FAUT INDEPENDAMMENT METTRE menu-onglets-v sinon le menu apparaitra avec des onglets dans la colonne.
Ca me permet de conserver pour les menus une classe indépendante de membre site et de la réutiliser pour tous les menus du site.

membre2-v a un faux border fait avec :after, c'est tordu mais ça permet de ne pas ajouter un <div> supplémentaire pour faire le border.
membre2-v c'est le design "éclaté" avec la nav verticale à gauche ou à droite
on regle le padding du div en dessous pour bien positionner les éléménts qui sont en dessous.
L'alternative serait de mettre un <p> ou un <div> vide en plus qui servirait pour le border.
Ce afin de conserver exactement le meme code html dans tous les cas de figure: membre, membre-v, membre2, membre2-v.

cpadmin est le seul profil couleur dont les dimensions ont été personnalisées pour reproduire le menu admin de yamafoto dans la liste des albums.
Les autres profils couleur n'ont que les couleurs et sont tous calqués sur le même modèle.

pour avoir un menu horizontal, placer class="menuongletsh cpbleu big" sur le conteneur du menu
pour avoir un menu vertical, placer class="menuongletsv cpbleu big" sur le conteneur du menu


Combinaisons possibles à placer sur "membre site" + navigation et qui seront personnalisables par l'utilisateur:

membre + "menu-ongletsh cpbleu"
"mmmembre-v cp1" + "menu-ongletsv cpbleu"
"mmmembre-v-r cp1" + "menu-ongletsv cpbleu"

membre2 + "menu-ongletsh cpbleu"
"mmmembre2-v cp1" + "menu-ongletsv cpbleu"
"mmmembre2-v-r cp1" + "menu-ongletsv cpbleu"


ca c'est une nav particuliere en fait c la nav h sans le trait:
div[class^="mmmembre2"] .ongletc {
  border:none;
}

Chaque profil correspondra en fait à un widget du site en cours avec ses propres dimensions le cas échéant et pas seulement à une couleur.
Pour la démo, pour simplifier, on garde les même dimensions pour tous les profils couleur.
si on veut personnaliser un profil couleur pour un menu on crée:
.menu-ongletsh.cprouge2 > ul > li  { width:9em; } dans lequel on ajoute les propriétés qui changeant par exemple width:9em;

On génèrera automatiquement les couleurs d'un profil couleur, donc on générera automatiquement tous les profils couleur.
On ne va pas les saisir manuellement à chaque fois.
Donc en fait il ne faut faire qu'un seul profil couleur manuellement.

j'ai remarqué un bug, il faut mettre menu-ongletsv au début des classes css sinon il n'est pas reconnu:
BON:
  <div class="menu-ongletsv cpbleu contenttt big" style="font-size:50px;">
PAS BON:
  <div class="contenttt menu-ongletsv cpbleu big" style="font-size:50px;">
C'est peut-etre lié à l'ordre des classes ou bien à la déclaration, ex: menu-ongletsv.cpbleu vs cpbleu.menu-ongletsv vs [class=^menu-onglets].cpbleu

Ancien code pour amener une finesse dans les borders sans ajouter de code html, retiré à cause d'un bug lié au z-index qui empeche de cliquer:
.onglettt:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 2px;  dépend du border
  left: 0;
  height:90%;
  width:99%;
  border-left:1px #99ccff solid;
  border-right: 1px #0066ff solid;
  border-bottom: 1px #0066ff solid;
}
*/
[class^="menu-onglets"] ul {
  list-style: none;
  /* overflow:hidden => affiche la ligne en bas du menu des onglets mais du coup cache les menus , j'ai donc mis un clearfix ci-dessous */
  /*todo
  padding:0.2em 0 0 0;
  */
  /* padding:0.2em 0 0 0.1em; donnait un effet de relief intéressant sur le menu vertical */
  font-family: arial; /* impact verdana */
  font-size:1em; /* +++ 0.6 pour cpadmin, mais pour le menu de la colonne c'est par défaut 1em pour que le menu soit plus gros */
}
[class^="menu-onglets"] a, [class^="menu-onglets"] a:visited, [class^="menu-onglets"] a:link, [class^="menu-onglets"] a:active {
  display:block;
  overflow:hidden; /* permet le texte quand il dépasse donc quand il est trop long, à faire sur <a> et pas sur <li> ni <ul> sinon les menus 		      déroulantsdisparaissent */
/*todo
  font-family: verdana;
  display:block;
 width:100%;
 height:100%;
*/


  font-size:0.5em; /* à revoir, la font-size doit se mettre sur ul comme font-family */
  text-decoration: none;
  font-weight:bold;
/* height:16px; hauteur originelle avec la font verdana pour menu-admin. la height si on la met sur li prend le dessus sur la height définie sur <a> à l'intérieur de <li> */
  /* height:1.9em; */ /* pour align dépend du padding et il faut l'ajuster en fonction de font-size présent dans cette class, dépend de la font, à ajuster 		      selon la font donc à mettre avec la font des neiges
		     ATTENTION CAR LA HEIGHT TIENT COMPTE DES PADDING !!!
		   */
/*
  padding:0.5em;
*/
}
[class^="menu-onglets"] li {
  position:relative; /* permet de positionner les sous menus de la nav horizontale et verticale */
  /***************************/
  letter-spacing: .1rem;
  text-shadow: 2px 2px #000;
  /*  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%); */
}
 /**************************************************************************/
/* A mettre uniquement si <b> positionné à gauche comme C dans menu-admin */
[class^="menu-onglets"] li > b { /* <b> qui permet de positionner C à gauche dans le menu admin */
  display:block;
  float:left;
  margin:0;
  padding:2px 0 0 2px;
}
/*
[class^="menu-onglets"] li b a, [class^="menu-onglets"] li b a:visited, [class^="menu-onglets"] li b a:link, [class^="menu-onglets"] li b a:active {
*/
.copyyy, .copyyy:visited, .copyyy:link, .copyyy:active {
  background-size:0;
  text-decoration:none;
  font-weight:bold;
  padding:15px; /* pour cp-admin */
}
/* fin **********************************************************************/
/* normalement on ne devrait pas avoir à mettre deux fois ça ? */
[class^="menu-onglets"].dim > ul > li:hover > ul, [class^="menu-onglets"].dim > ul > li li:hover > ul {
  font-size:0.9em;
/* inherit conserve la font-size du parent en em (!=1em) et ce qui entraine une diminution proportionnelle de la taille plus on s'enfonce dans les sous menus */
}
 /********************************************************/
/* positionnement des sous menus vertical et horizontal */
[class^="menu-onglets"] > ul ul {
  position: absolute;
  white-space: nowrap;
  left: -99999em;
}
[class^="menu-onglets"] > ul a, [class^="menu-onglets"] > ul > li:hover > ul a {
/*
  background-repeat: no-repeat;
  background-position:right -2px; /* right top et bien découper chaque picto dans photoshop, ça simplifie tout */
*/
 /* background-size:100%; */
}

 /******************************/
/* Menus horizontal (onglets) */
[class^="mmmembre"] [class^="menu-onglets"] { /* MENU FONT SIZE */
  font-size:var(--entete_nav_size);
}
/* clearfix moderne: https://css-tricks.com/snippets/css/clear-fix/ */
.menu-ongletsh > ul:after { /* === clearfix : comme les onglets sont en float:left, il faut mettre un clearfix sur le premier ul */
  content: "";
  display: table;
  clear: both;
}
.menu-ongletsh li {
  float:left;
  text-align:center;
/*  width:5em; */
  font-size: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;
*/

}
.menu-ongletsh a, .menu-ongletsh a:visited, .menu-ongletsh a:link, .menu-ongletsh a:active {
/* à virer si ça sert plus */
/*
  width:98%;
*/
}
.menu-ongletsv a, .menu-ongletsv a:visited, .menu-ongletsv a:link, .menu-ongletsv a:active,
.menu-ongletsh > ul > li:hover ul a, .menu-ongletsh > ul > li:hover ul a:visited, .menu-ongletsh > ul > li:hover ul a:link,
.menu-ongletsh > ul > li:hover ul a:active {
  padding:0.25em 0.4em 0.25em 0.4em;
}
.menu-ongletsh > ul > li > a, .menu-ongletsh > ul > li > a:visited, .menu-ongletsh > ul > li > a:link, .menu-ongletsh > ul > li > a:active {
  height:1.9em;
}
/*
.menu-ongletsh > ul > li a, .menu-ongletsh > ul > li a:visited, .menu-ongletsh:link > ul > li a, .menu-ongletsh:active > ul > li a {
  padding:0;
  height:1.1em;
}
*/
/* ci dessous a mettre dans <a> */
.menu-ongletsh > ul > li > ul li { /* "ul li" à la fin pour que ça prenne en compte tous les <li> alors que ul > li ne prend en compte
						      que les <li> qui suivent directement donc uniquement le premier sous menu */
  font-family:arial; /* ici on peut changer la police de caractères des sous menu et en choisir une autre que celle des onglets */
  font-size:0.9em;
  text-shadow: none;
  text-align:right; /* left right center par defaut, depend de la height et du padding définis pour <a> */
}
/*
.menu-ongletsh a, .menu-ongletsh a:visited, .menu-ongletsh a:link, .menu-ongletsh a:active
*/
.menu-ongletsh > ul > li:hover ul a, .menu-ongletsh > ul > li:hover ul a:visited, .menu-ongletsh > ul > li:hover ul a:link,
.menu-ongletsh > ul > li:hover ul a:active { /* on pourrait mettre .menu-ongletsh a mais on est obligé de mettre ça sinon comme .menu-ongletsh > ul > li:hover ul a est défini au dessus ça prend le dessus sur .menu-ongletsh a ou alors il faut d'abord le virer */
/*  padding:0; *//* à convertir en em */ /* pour align */
  padding:0.3em; /* pour un simple menu sans picto un simple padding suffit pour bien afficher le menu */
  /* herite du padding et de la height de .cp1[class^="menu-onglets"] a ci-dessus */
}
/*********************************/
/* sous menu nav horizontale */
.menu-ongletsh > ul > li:hover > ul li {
  float:none;
  width:98%; /* ce qui permet d'avoir des menus qui prennent la taille du texte, sinon ne rien mettre,
	        pour une width fixe mettre width:6em; width:98% permet aux sous menus d'occuper toute la place disponible en laissant voir le border.
		Ici on pourrait faire un calc pour ajuster */
  margin-left:0;
  /* j'ai gardé le meme padding que ci-dessus dont les sous menus héritent ici mais au besoin on peut le changer ici */
}
/*
.menu-ongletsh > ul ul a {
  background-repeat: no-repeat;
  background-position:right -2px;
}
*/
/* pour avoir un border tourné vers le bas */
/* todo: un dégradé sur le border */
/*
.menu-ongletsh {
  position:relative;
}
.menu-ongletsh::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1.35em; // 50px
  bottom:-1.38em; // 51px
  left:0;
  background-color: transparent;
  border-radius:25px; // 15px 5px
}
*/
/*********************************************************/
/* a retirer pour avoir des sous menus aux bords carrés */
.menu-ongletsh ul {
  border-radius: 0.2em;
  z-index:1;
}
/*
.menu-ongletsh ul ul{
  z-index:2;
}
.menu-ongletsh ul ul ul {
  z-index:3;
}
.menu-ongletsh ul ul ul ul {
  z-index:4;
}
.menu-ongletsh ul ul ul ul ul {
  z-index:5;
}
*/
/* styles à retirer pour avoir des sous menus aux bords carrés */
.menu-ongletsh > ul > li:hover > ul li:first-child {
  border-radius: 0.2em 0.2em 0 0;
}
.menu-ongletsh > ul > li:hover > ul li:first-child:hover > a { /* ici il faut mettre > devant a sinon tous les a internes sont affectés et ont un bord arrondi */
  border-radius: 0.5em 0.5em 0 0;
}
.menu-ongletsh > ul > li:hover > ul li:last-child {
  border-radius: 0 0 0.2em 0.2em;
}
.menu-ongletsh > ul > li:hover > ul li:last-child:hover a { /* ici > devant a est inutile car il y en a un seul */
  border-radius: 0 0 0.5em 0.5em;
}
/* fin des styles à retirer pour avoir des sous menus aux bords carrés */
/**********************************************************************/
 /*********************************/
/* positionnement des sous menus */
.menu-ongletsh > ul > li:hover > ul {
  left:0;
  top:100%;
  font-size:1em;
}
.menu-ongletsh > ul > li li:hover > ul {
  left: 101%;
  top: -1px;
  font-size:1em;
/* margin-left permet d'ajouter un liseret mais attention car la souris perd le focus si on est trop lent donc je ne le mets pas  margin-left:0.2em; */
}
 /*****************************************************/
/* Menu vertical (menu admin de la liste des albums) */
.menu-ongletsv { /* MENU VERTICAL TEXT ALIGN */
  text-align:right; /* par défaut center donc ne rien mettre */
}
.menu-ongletsv ul {
/*  width:8em; pour cpadmin, par défaut la width est 100% pour que la nav occupe la width de la colonne */
  width:var(--entete_nav_width);
  float:right;
  border-radius:0.5em;
}
.menu-ongletsv li:first-child { /* pour etre strict: .menu-ongletsv > ul > li:first-child ou li:first-child.ooon que j'ai racourci pour qu'il y ait moins de code */
  border-radius:0.5em 0.5em 0 0; /* 12px 12px */
}
.menu-ongletsv li:last-child { /* pour etre strict: .menu-ongletsv > ul > li:last-child ou li:last-child.ooon que j'ai racourci pour qu'il y ait moins de code */
 /* border-radius:inherit; */
  border-radius:0 0 0.5em 0.5em; /* 12px 12px */
}
/*
.menu-ongletsv li:first-child {
  border-top:none;
}
.menu-ongletsv li:last-child {
  border-bottom:none;
}
*/
/**************/
/* sous menu */
/*
.menu-ongletsv > ul a, .menu-ongletsh > ul > li:hover > ul a {
  background-repeat: no-repeat;
  background-position:right -2px;
}
*/
 /*********************************/
/* positionnement des sous menus */
.menu-ongletsv > ul ul {
  margin-left:0.05em; /* ajuster à sa convenance pour très légèrement décaler le sous menu et laisser un jour pour des raisons esthétiques plutôt que de le 			         coller */
}
.menu-ongletsv > ul > li:hover > ul {
  left:100%;
  top:0;
  font-size:1em;
}
.menu-ongletsv > ul > li li:hover > ul {
  left: 100%;
  top: -1px;
  font-size:1em;
}
/* correspondances entre les couleurs
bleu très foncé 1c58c3 4c7542 b34444
bleu foncé 1567cf 539642 db5e5e
bleu clair 3366ff 59bd40 f55b5b
bleu ciel 74abe8 7be85f f77777
bleu très clair 99ccff a1f78b f79292

correspondances
#1c58c3 #4c7542 #b34444
#6699ff #6699ff #6699ff #f55d42
#3c8eff #3c8eff #3c8eff #d14c34
#99ccff #a1f78b #f79292
#3c8eff #3c8eff #3c8eff
#80a0af #80a0af #80a0af
#1c58c3 #4c7542 #b34444
--on
#99ccff #a1f78b #fa8873
#1c58c3 #4c7542 #ed7b66
#1567cf #539642
#80a0af #4c7542
*/
/****************************************************/
/***************************************************/
/***************************************************/
  /**************************************/
 /* COMMUN A TOUS LES CP */
/**************************************/
  /**********/
 /* ENTETE ET MEMBRE SITE */
/**********/
/*
Note: cette partie commune à tous les profils couleurs pourra au besoin etre personnalisée indépendament pour chaque profil couleur,
il suffit de rajouter cp1. devant: cp1.div[class^="mmmembre2"] > div:nth-child(2)
*/
div[class^="mmmembre2"] > div:nth-child(2), div[class^="mmmembre2-v"] > div:nth-child(2) {
  border-bottom:none;
}
div[class^="mmmembre2"] > div:nth-child(3) > div:first-child, div[class^="mmmembre2-v"] > div:nth-child(2) span:nth-of-type(2n):after {
  border-top:none;
}
/* a la place de celles de contenttt on peut utiliser les couleurs de .c-cont4b */
.contenttt, .eeentete > div:nth-child(3), div[class^="mmmembre"] > div:nth-child(3),
div[class^="mmmembre2"] > div:nth-child(2) span:nth-of-type(2n):after, .soustitres  /* on applique la couleur de fond du contenu au "faux border" de l'entete */
 { /* entete2 englobe entete3 et contenttt et permet avec min-height d'assurer une hauteur minimum pour le design */
/* ajouter font-size (qui determinera la taille du contenu en em) et font type et color include et hn avec text-shadow */
  background-color:#fff0ff;
  border-left: 1px #ffffff solid;
  border-right: 1px #d8d2bd solid;
  border-top: 1px #ffffff solid;
  background-color:#fffff0;
}
div[class^="mmmembre2"], div[class^="mmmembre2"] > div:nth-child(3) { /* comme le design est éclaté, on retire la couleur de fond du "content" */
  border:none;
  background-color:transparent;
}

.contenttt a, .contenttt a:visited, .contenttt a:link, .contenttt a:active {
  color:#000000;
}

  /**********/
 /* ENTETE IMAGE */
/**********/

.eeentete.cpenteteimage, div[class^="mmmembre"].cpenteteimage {
  color:red;
}
div[class^="mmmembre"].cpenteteimage > div:nth-child(2) {
  position:relative;
  background:transparent;
}
div[class^="mmmembre"].cpenteteimage > div:nth-child(2):after {
content:"";
position:absolute;
left:0;
top:0;
width:100%;
/*
height:100%;
*/
height:50px;
z-index:0;

background-image:linear-gradient(to bottom, rgba(153, 204, 255, 0.51), rgba(28, 88, 195, 0.8)),url(var(--css_entete_image));

background-position: right -200px;
background-repeat:no-repeat;
background-size:cover;




/*  background: linear-gradient(#a1f78b, #4c7542 20%, #539642 90%, #a1f78b 90%, #a1f78b 100%); */

  border-top:1px #7be85f solid;
  border-left:1px #7be85f solid;
  border-right: 1px #59bd40 solid;
  border-bottom: 1px #59bd40 solid;
  color:#fff;

/*  opacity:0.5; */
}
div[class^="mmmembre"].cpenteteimage > div:nth-child(3) {
  position:relative;
  background:transparent;
}

div[class^="mmmembre"].cpenteteimage  {
  position:relative;
  background:transparent;
}

/*
div[class^="mmmembre"].cpenteteimage:before {
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:var(--entete_image_height);
z-index:0;
background-image:linear-gradient(to bottom, rgba(153, 204, 255, 0.1), rgba(28, 88, 195, 0.8)),var(--css_entete_image);
background-image:linear-gradient(to bottom, rgba(200, 254, 255, 1), rgba(100, 0, 255, 1)),var(--css_entete_image);
background-position: var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size:var(--entete_image_size);
}
*/

div[class^="mmmembre"].cpenteteimage  > div:nth-child(2) {

/*
https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element

l'astuce pour ajouter une ligne sous l'image de fond vient du lien ci-dessous et consiste à faire un gradient de 0 0 0 0 0 jusqu'à 99% puis de finir avec le gradient voulu et IMPORTANT: background-position = nul
https://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image
*/
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99.5%, #99ccff 99.5%, #1c58c3 99.7%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
/*background-position: var(--entete_image_position);*/
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
/*
opacity:0.1;
*/
}

.eeentete.cpenteteimage,
div[class^="mmmembre2"].cpenteteimage > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cpenteteimage,
.mmmembre-v.cpenteteimage,
.mmmembre-v-r.cpenteteimage
 {
  border:1px #4c7542 solid;
}

  /**************************************/
 /* .cpbleuenteteimage */
/**************************************/
  /**********/
 /* ENTETE */
/**********/
div[class^="mmmembre"].cpbleuenteteimage > div:nth-child(2) > span > b { /* titre */
  display:block;
  position:absolute;
  left:45%;
  top:0.5%;
  z-index:2222222222222222;
}

/*
ci-dessous: le linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)) simule un opacity:0.7 et permet de garder le titre avec opacity:1 sans avoir à bidouiller avec un :before ou un :after ce que je trouve merdique.
en plus là j'ai pu ajouter un léger dégradé de 0.7 à 0.9 ce qu'on ne peut pas faire avec un opacity

source:
https://stackoverflow.com/questions/7241341/can-i-set-an-opacity-only-to-the-background-image-of-a-div

https://www.w3schools.com/css/css3_animations.asp
*/
div[class^="mmmembre"].cpbleuenteteimage > div:nth-child(2) {

/*
  background: linear-gradient(#99ccff, #1c58c3 4%, #1567cf 18%, #99ccff 18%, #99ccff 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), var(--css_entete_image);
background-position: top, top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
*/
  background: linear-gradient(#99ccff, #1c58c3 4%, #1567cf 18%, #99ccff 18%, #99ccff 20%);
background-position: top, top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);

  border:var(--entete_border) #1c58c3 solid;
  color:#fff;
/* background-color:#000; */
position:relative;
}

div[class^="mmmembre"].cpbleuenteteimage > div:nth-child(2):before {
  content:"";
  display:block;
  width:100%;
  height:80%; /* l'astuce consiste à décaller le top de 20% et à réduire la height de 20% donc de la mettre à 80% pour positionner l'image sous le dégradé du haut de l'entete */
  position:absolute;
  color:#fff;
  left:0;
  top:20%;
  z-index:1;


  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0;
animation: 15s linear 0s infinite normal cpbleuenteteimageslide; /* alternate */
}
div[class^="mmmembre2"].cpbleuenteteimage > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cpbleuenteteimage,
.mmmembre-v.cpbleuenteteimage,
.mmmembre-v-r.cpbleuenteteimage {
  border:var(--entete_border) #1c58c3 solid;
}

/*
https://developer.mozilla.org/fr/docs/Web/CSS/animation
https://www.w3schools.com/css/css3_animations.asp
*/
@keyframes cpbleuenteteimageslide {
  0%   {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0;
  }
  1%   {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0.3;
  }
  12.5%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:1;
}
  25%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:1;
}
  48%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0.3;
}
  49%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0;
}
  50%   {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image2);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0;
  }
  62.5%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image2);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:1;
}
  75%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image2);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:1;
}
  99%  {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image2);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
opacity:0;
}

}

/*
foireux mais marrant, à conserver pour des idées:
@keyframes cpbleuenteteimageslide {
  0%   {
  background: linear-gradient(#99ccff, #1c58c3 4%, #1567cf 18%, #99ccff 18%, #99ccff 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), var(--css_entete_image);
background-position: top, top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
  }
  25%  {
  background: linear-gradient(#99ccff, #1c58c3 4%, #1567cf 18%, #99ccff 18%, #99ccff 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
}
  50%  {
  background: linear-gradient(#99ccff, #1c58c3 4%, #1567cf 18%, #99ccff 18%, #99ccff 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), var(--css_entete_image2);
background-position: top, top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
}
  100% {
  background: linear-gradient(#99ccff, #1c58c3 4%, #1567cf 18%, #99ccff 18%, #99ccff 20%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 99%, #99ccff 99%, #1c58c3 99.2%, #1567cf 99.75%, #1c58c3 100%), var(--css_entete_image2);
background-position: top, var(--entete_image_position);
background-repeat:var(--entete_image_repeat);
background-size: var(--entete_image_size);
}

*/


  /**************************************/
 /* .cp1 */
/**************************************/
.cp1[class^="menu-onglets"] a, .cp1[class^="menu-onglets"] a:visited, .cp1[class^="menu-onglets"] a:link, .cp1[class^="menu-onglets"] a:active {
  color:#fff;
}
.cp1[class^="menu-onglets"] li.ooon {
  background-color:#80a0af;
  border:1px #1c58c3 solid;
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
}
/*
.cp1[class^="menu-onglets"] li a, .cp1[class^="menu-onglets"] li a:visited, .cp1[class^="menu-onglets"] li a:link, .cp1[class^="menu-onglets"] li a:active {
 color:#fff;
}
équivaut à .cp1.menu-ongletsv li :
[class^="menu-ongletsvb"].cp1 li {
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border:none;
}
*/
/*
.cp1.menu-ongletsh { border tourné vers le haut
  border-bottom:1px #1c58c3 solid;
}
*/
.cp1.menu-ongletsh::after { /* pour avoir un border tourné vers le bas, todo: un dégradé sur le border */
  border-top:1px #1c58c3 solid;
}
.menu-ongletsh.cp1 > ul ul { /*A MUTUALISER AVEC menu-ongletsv */
  background-color:#6699ff; /* ici on met un bkgd pour masquer le jour entre le border du ul et celui du li */
  border:1px #1c58c3 solid;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cp1 > ul > li > ul li:first-child {
  border-top: 1px #3c8eff solid;
}
.menu-ongletsh.cp1 > ul > li > ul li:last-child {
  border-bottom: 1px #3c8eff solid;
}
.menu-ongletsh.cp1 > ul > li > ul li:hover > a, .menu-ongletsh.cp1 > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cp1 > ul > li > ul li:hover > a:link, .menu-ongletsh.cp1 > ul > li > ul li:hover > a:active,
.menu-ongletsh.cp1 > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cp1 > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cp1 > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cp1 > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#6699ff;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cp1 > ul li { /* tous les niveaux de <li> en commençant par les onglets */
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #99ccff solid;
}
/* personnalisation de la width du sous menu de l'onglet 3
.menu-ongletsh > ul > li:nth-child(3) > ul li {
  width:9em;
}
*/
.cp1.menu-ongletsv ul {
  border-top: 1px #3c8eff solid;
  border-left: 1px #3c8eff solid;
  border-bottom: 1px #99ccff solid;
  border-right: 1px #99ccff solid;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  box-shadow: 0px 1px 2px #ccc;
}
.menu-ongletsv.cp1 li {
  background-color:transparent; /* à virer idem ci-dessus */
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #99ccff solid;
}
  /**********/
 /* ENTETE ET MEMBRE SITE */
/**********/
.eeentete.cp1 > div:nth-child(2), div[class^="mmmembre"].cp1 > div:nth-child(2) {
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
  border-top:1px #74abe8 solid;
  border-left:1px #74abe8 solid;
  border-right: 1px #3366ff solid;
  border-bottom: 1px #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(/images/default/kit/bleu_xp/degrade_1.jpg); background-color:#1567cf; */
}
.eeentete.cp1,
div[class^="mmmembre2"].cp1 > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cp1,
.mmmembre-v.cp1,
.mmmembre-v-r.cp1 {
  border:1px #1c58c3 solid;
}
/****************************************************/
/***************************************************/
/***************************************************/
  /**************************************/
 /* .cpbleu */
/**************************************/
.cpbleu[class^="menu-onglets"] a, .cpbleu[class^="menu-onglets"] a:visited, .cpbleu[class^="menu-onglets"] a:link, .cpbleu[class^="menu-onglets"] a:active {
  color:#fff;
}
.cpbleu[class^="menu-onglets"] li.ooon {
  background-color:#80a0af;
  border:1px #1c58c3 solid;
  /*
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #80a0af 100%);
  */
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
  /* background: url(/application/images/default/kit/bleu_xp/degrade_1.jpg);background-repeat: repeat-x; */
  background-repeat: repeat-x;
  /*
  background-color:#74abe8;
  background-color:#1567cf;
  border-left:1px #74abe8 solid;
  border-right: 1px #3366ff solid;
  border-bottom: 1px #3366ff solid;
  */

}
.cpbleu[class^="menu-onglets"] li.orange {
  background-color:#ffb46a;
  border:1px #cc6600 solid;
  background: linear-gradient(#ffcc99, #cc6600 20%, #ff9933 100%);
}

.cpbleu[class^="menu-onglets"] li.creer {
  background-color:#ffb46a;
  border:1px #cc6600 solid;
  background: linear-gradient(#ffcc99, #cc6600 20%, #ff9933 100%);
}

.cpbleu[class^="menu-onglets"] li.ccconnect {
  background-color:#000;
  border:1px #cc6600 solid;
  background:grey;
  border-radius:0;
  width:3em;
}

/*
.cpbleu.menu-ongletsh {  border tourné vers le haut
  border-bottom:1px #1c58c3 solid;
  border-radius:5px;
}
*/
.cpbleu.menu-ongletsh::after { /* pour avoir un border tourné vers le bas, todo: un dégradé sur le border */
  border-top:1px #1c58c3 solid;
}
.menu-ongletsh.cpbleu > ul ul { /*A MUTUALISER AVEC menu-ongletsv */
  background-color:#6699ff; /* ici on met un bkgd pour masquer le jour entre le border du ul et celui du li */
  border:1px #1c58c3 solid;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cpbleu > ul > li > ul li:first-child {
  border-top: 1px #3c8eff solid;
}
.menu-ongletsh.cpbleu > ul > li > ul li:last-child {
  border-bottom: 1px #3c8eff solid;
}
.menu-ongletsh.cpbleu > ul > li > ul li:hover > a, .menu-ongletsh.cpbleu > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cpbleu > ul > li > ul li:hover > a:link, .menu-ongletsh.cpbleu > ul > li > ul li:hover > a:active,
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#6699ff;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cpbleu > ul li { /* tous les niveaux de <li> en commençant par les onglets */
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border:1px #3c8eff solid;
}
.cpbleu.menu-ongletsv ul {
  border: 1px #3c8eff solid;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  box-shadow: 0px 1px 2px #ccc;
}
.menu-ongletsv.cpbleu li {
  background-color:transparent; /* à virer idem ci-dessus */
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #3c8eff solid;
}
  /**********/
 /* 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(/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 */
}
/****************************************************/
/***************************************************/
/***************************************************/
  /**************************************/
 /* .cpvert */
/**************************************/
.cpvert[class^="menu-onglets"] a, .cpvert[class^="menu-onglets"] a:visited, .cpvert[class^="menu-onglets"] a:link, .cpvert[class^="menu-onglets"] a:active {
  color:#fff;
}
.cpvert[class^="menu-onglets"] li.ooon {
  background-color:#4c7542;
  border:1px #4c7542 solid;
  background: linear-gradient(#a1f78b, #4c7542 20%, #539642 75%, #4c7542 100%);
  background-repeat: repeat-x;
}
/* pour avoir un border tourné vers le bas */
/* todo: un dégradé sur le border */
.cpvert.menu-ongletsh::after {
  border-radius:25px; /* 15px 5px */
  border-top:1px #4c7542 solid;
}
.menu-ongletsh.cpvert > ul ul { /*A MUTUALISER AVEC menu-ongletsv */
  background-color:#6699ff; /* ici on met un bkgd pour masquer le jour entre le border du ul et celui du li */
  border:1px #4c7542 solid;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cpvert > ul > li > ul li:first-child {
  border-top: 1px #3c8eff solid;
}
.menu-ongletsh.cpvert > ul > li > ul li:last-child {
  border-bottom: 1px #3c8eff solid;
}
.menu-ongletsh.cpvert > ul > li > ul li:hover > a, .menu-ongletsh.cpvert > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cpvert > ul > li > ul li:hover > a:link, .menu-ongletsh.cpvert > ul > li > ul li:hover > a:active,
.menu-ongletsh.cpvert > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cpvert > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cpvert > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cpvert > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#6699ff;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cpvert > ul li { /* tous les niveaux de <li> en commençant par les onglets */
  background: linear-gradient(#a1f78b, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border:1px #3c8eff solid;
}
.cpvert.menu-ongletsv ul {
  border-top: 1px #3c8eff solid;
  border-left: 1px #3c8eff solid;
  border-bottom: 1px #3c8eff solid;
  border-right: 1px #3c8eff solid;
  background: linear-gradient(#a1f78b, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  box-shadow: 0px 1px 2px #ccc;
}
.menu-ongletsv.cpvert li {
  background-color:transparent; /* à virer idem ci-dessus */
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #3c8eff solid;
}
  /**********/
 /* ENTETE ET MEMBRE SITE */
/**********/
.eeentete.cpvert > div:nth-child(2), div[class^="mmmembre"].cpvert > div:nth-child(2) {
  background: linear-gradient(#a1f78b, #4c7542 20%, #539642 90%, #a1f78b 90%, #a1f78b 100%);
  border-top:1px #7be85f solid;
  border-left:1px #7be85f solid;
  border-right: 1px #59bd40 solid;
  border-bottom: 1px #59bd40 solid;
  color:#fff;
}
.eeentete.cpvert,
div[class^="mmmembre2"].cpvert > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cpvert,
.mmmembre-v.cpvert,
.mmmembre-v-r.cpvert
 {
  border:1px #4c7542 solid;
}
/****************************************************/
/***************************************************/
/***************************************************/
  /*************************************/
 /* .cprouge : UNIQUEMENT LES MENUS */
/*************************************/
.cprouge[class^="menu-onglets"] a, .cprouge[class^="menu-onglets"] a:visited, .cprouge[class^="menu-onglets"] a:link, .cprouge[class^="menu-onglets"] a:active {
  color:#fff;
}
.cprouge[class^="menu-onglets"] li.ooon {
  background-color:#b34444;
  border:1px #b34444 solid;
  background: linear-gradient(#f79292, #b34444 20%, #db5e5e 75%, #b34444 100%);
  background-repeat: repeat-x;
}
/* pour avoir un border tourné vers le bas */
/* todo: un dégradé sur le border */
.cprouge.menu-ongletsh::after {
  border-radius:25px; /* 15px 5px */
  border-top:1px #b34444 solid;
}
.menu-ongletsh.cprouge > ul ul { /*A MUTUALISER AVEC menu-ongletsv */
  background-color:#6699ff; /* ici on met un bkgd pour masquer le jour entre le border du ul et celui du li */
  border:1px #b34444 solid;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cprouge > ul > li > ul li:first-child {
  border-top: 1px #3c8eff solid;
}
.menu-ongletsh.cprouge > ul > li > ul li:last-child {
  border-bottom: 1px #3c8eff solid;
}
.menu-ongletsh.cprouge > ul > li > ul li:hover > a, .menu-ongletsh.cprouge > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cprouge > ul > li > ul li:hover > a:link, .menu-ongletsh.cprouge > ul > li > ul li:hover > a:active,
.menu-ongletsh.cprouge > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cprouge > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cprouge > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cprouge > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#6699ff;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cprouge > ul li { /* tous les niveaux de <li> en commençant par les onglets */
  background: linear-gradient(#f79292, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border: 1px #3c8eff solid;
}
.cprouge.menu-ongletsv ul {
  border-top: 1px #3c8eff solid;
  border-left: 1px #3c8eff solid;
  border-bottom: 1px #3c8eff solid;
  border-right: 1px #3c8eff solid;
  background: linear-gradient(#f79292, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  box-shadow: 0px 1px 2px #ccc;
}
.menu-ongletsv.cprouge li {
  background-color:transparent; /* à virer idem ci-dessus */
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #3c8eff solid;
}
/****************************************************/
/***************************************************/
/***************************************************/
  /**************************************/
 /* .cprouge2 : UNIQUEMENT LES MENUS */
/**************************************/
.cprouge2[class^="menu-onglets"] a, .cprouge2[class^="menu-onglets"] a:visited, .cprouge2[class^="menu-onglets"] a:link, .cprouge2[class^="menu-onglets"] a:active {
  color:#fff;
}
.cprouge2[class^="menu-onglets"] li.ooon {
  background-color:#fa8873;
  border:1px #ed7b66 solid;
  background: linear-gradient(#fa8873, #ed7b66 20%, #f55d42 75%, #ed7b66 100%);
  background-repeat: repeat-x;
}
/*
.cprouge2.menu-ongletsh {  border tourné vers le haut
  border-bottom:1px #b34444 solid;
  border-radius:5px;
}
*/
/* pour avoir un border tourné vers le bas */
/* todo: un dégradé sur le border */
.cprouge2.menu-ongletsh::after {
  border-radius:25px; /* 15px 5px */
  border-top:1px #b34444 solid;
}

.menu-ongletsh.cprouge2 > ul ul { /*A MUTUALISER AVEC menu-ongletsv */
  background-color:#f55d42; /* ici on met un bkgd pour masquer le jour entre le border du ul et celui du li */
  border:1px #b34444 solid;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cprouge2 > ul > li > ul li:first-child {
  border-top: 1px #d14c34 solid;
}
.menu-ongletsh.cprouge2 > ul > li > ul li:last-child {
  border-bottom: 1px #d14c34 solid;
}
.menu-ongletsh.cprouge2 > ul > li > ul li:hover > a, .menu-ongletsh.cprouge2 > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cprouge2 > ul > li > ul li:hover > a:link, .menu-ongletsh.cprouge2 > ul > li > ul li:hover > a:active,
.menu-ongletsh.cprouge2 > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cprouge2 > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cprouge2 > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cprouge2 > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#f55d42;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cprouge2 > ul li { /* tous les niveaux de <li> en commençant par les onglets */
  background-color:#f55d42;
  background: linear-gradient(#fa8873, #d14c34 20%, #f55d42 75%, #d14c34 100%);
  border: 1px #d14c34 solid;
}
.cprouge2.menu-ongletsv ul {
  border-top: 1px #d14c34 solid;
  border-left: 1px #d14c34 solid;
  border-bottom: 1px #d14c34 solid;
  border-right: 1px #d14c34 solid;
  background: linear-gradient(#fa8873, #d14c34 20%, #f55d42 75%, #d14c34 100%);
  box-shadow: 0px 1px 2px #ccc;
}
.menu-ongletsv.cprouge2 li {
  background-color:transparent; /* à virer idem ci-dessus */
  border-top: 1px #d14c34 solid;
  border-bottom: 1px #d14c34 solid;
}
  /**********/
 /* ENTETE ET MEMBRE SITE */
/**********/
.eeentete.cprouge2 > div:nth-child(2), div[class^="mmmembre"].cprouge2 > div:nth-child(2) {
  background: linear-gradient(#a1f78b, #4c7542 20%, #539642 90%, #a1f78b 90%, #a1f78b 100%);
  border:1px #b34444 solid;
  color:#fff;
}
.eeentete.cprouge2,
div[class^="mmmembre2"].cprouge2 > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cprouge2,
.mmmembre-v.cprouge2,
.mmmembre-v-r.cprouge2
 {
  border-left:1px #b34444 solid;
  border-right:1px #b34444 solid;
}
  /*************************************************/
 /* cprouge3 : UNIQUEMENT ENTETE ET MEMBRE SITE */
/*************************************************/
  /**********/
 /* ENTETE ET MEMBRE SITE */
/**********/
.eeentete.cprouge3 > div:nth-child(2), div[class^="mmmembre"].cprouge3 > div:nth-child(2) {
  background: linear-gradient(#f79292, #b34444 20%, #db5e5e 90%, #f79292 90%, #f79292 100%);
  border-top:1px #f77777 solid;
  border-left:1px #f77777 solid;
  border-right: 1px #f55b5b solid;
  border-bottom: 1px #f55b5b solid;
  color:#fff;
}

.eeentete.cprouge3,
div[class^="mmmembre2"].cprouge3 > div:nth-child(2) span:nth-of-type(2n):after,
.mmmembre.cprouge3,
.mmmembre-v.cprouge3,
.mmmembre-v-r.cprouge3 {
  border:1px #b34444 solid;
/*
  border-bottom:none;
*/
}

/****************************************************/
/***************************************************/
/***************************************************/
  /***************************/
 /* cpadmin */
/*************************************************/
.cpadmin[class^="menu-onglets"] li {
/*  letter-spacing: .01rem;*/
/*  background-repeat: repeat-x; */
}
.cpadmin[class^="menu-onglets"] ul {
  font-family: verdana;
  font-size:0.6em; /* 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 */
.cpadmin[class^="menu-onglets"] a, .cpadmin[class^="menu-onglets"] a:visited, .cpadmin[class^="menu-onglets"] a:link, .cpadmin[class^="menu-onglets"] a:active,
/* nav h onglets */
.cpadmin.menu-ongletsh li a, .cpadmin.menu-ongletsh li a:visited, .cpadmin.menu-ongletsh li a:link, .cpadmin.menu-ongletsh li a:active,
/* nav h sous-menus */
.cpadmin.menu-ongletsh li ul li a, .cpadmin.menu-ongletsh li ul li a:visited, .cpadmin.menu-ongletsh li ul li a:link, .cpadmin.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 1px 2px;*/ /* à convertir en em */
  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 */
 /* background-size:100%; */
}
/*
.cpadmin.menu-ongletsh > ul > li > ul > li {
  font-family:arial;
  font-size:0.6em; /* ça sert à définir indépendament des onglets la font-size des li apres la premiere ligne aut dit dans les menus déroulants des onglets,
		      mettre font-size:1em pour garder la meme que ul*/
  text-shadow: none;
  text-align:left;
}
*/
/*
.cpadmin.menu-ongletsh ul {
  font-size:0.6em;
}
*/
.cpadmin[class^="menu-onglets"] li a, .cpadmin[class^="menu-onglets"] li a:visited, .cpadmin[class^="menu-onglets"] li a:link, .cpadmin[class^="menu-onglets"] li a:active {
 color:#fff;
}
/*
.cpadmin[class^="menu-onglets"] li {
  background-repeat: repeat-x;
}
*/
.cpadmin.menu-ongletsh > ul > li {
  text-align:center; /* par défaut center donc ne rien mettre */
}
.cpadmin.menu-ongletsh > ul > li > ul li { /* sous menus des onglets A METTRE EN DESSOUS DE .cpadmin.menu-ongletsh > ul > li */
  font-size:1.1em; /* ça fait grossir la seconde police de caractère à savoir celle des sous-menus */
  /*text-shadow: none;*/
  text-align:right;
}
.cpadmin[class^="menu-onglets"] li.ooon {
  background-color:#ffb46a;
  border:1px #cc6600 solid;
  background: linear-gradient(#ffcc99, #cc6600 20%, #ff9933 100%);
}
/* on pourrait appeler une seule image avec tous les pictos et se positionner au bon endroit */
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(1) > a {
  background-image: url(/images/default/pictos/btn-editer.png);
  background-position:14.5em 0.25em;
/*
  background-image:linear-gradient(to bottom, rgba(249, 198, 103, 0.52), rgba(247, 150, 33, 0.73)),url(/images/default/pictos/btn-editer.png);
*/
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(1) > a:hover {
  background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(2) > a {
  background-image: url(/images/default/cliparts/mini/15.gif);
/*
  background-image:linear-gradient(to bottom, rgba(249, 198, 103, 0.52), rgba(247, 150, 33, 0.73)),url(/images/default/cliparts/mini/15.gif);
*/
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(3) > a {
  background-image: url(/images/default/cliparts/mini/16.gif);
/*
  background-image:linear-gradient(to bottom, rgba(249, 198, 103, 0.52), rgba(247, 150, 33, 0.73)),url(/images/default/cliparts/mini/16.gif);
*/
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(4) > a {
  background-image: url(/images/default/cliparts/mini/25.gif);
/*
  background-image:linear-gradient(to bottom, rgba(249, 198, 103, 0.52), rgba(247, 150, 33, 0.73)),url(/images/default/cliparts/mini/25.gif);
*/
  background-position:165px -1px;
/* background-image: url(/images/default/puces/fleche_action.gif);  */
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(1) li:nth-of-type(1) a {
  background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(1) li:nth-of-type(2) a {
  background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(1) li:nth-of-type(3) a {
  background-image: url(/images/default/cliparts/mini/22.gif);
}
[class^="menu-onglets"].cpadmin > 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"].cpadmin > ul  li:nth-of-type(3) li:nth-of-type(1) a {
  background-image: url(/images/default/pictos/btn-editer.png);
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(3) li:nth-of-type(2) a {
  /* https://stock.adobe.com/fr/images/office-badge-line-and-glyph-icon-office-and-work-card-sign-vector-graphics-a-linear-pattern-on-a-white-background-eps-10/216692150 */
  background-image: url(/images/default/cliparts/mini/abonne_1.gif);
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(3) li:nth-of-type(3) a {
  background-image: url(/images/default/cliparts/mini/77.gif);
}
[class^="menu-onglets"].cpadmin > ul  li:nth-of-type(3) li:nth-of-type(4) a {
  background-image: url(/images/default/cliparts/mini/21.gif);
}
.cpadmin.menu-ongletsh > ul > li > a, .cpadmin.menu-ongletsh > ul > li > a:visited, .cpadmin.menu-ongletsh > ul > li > a:link, .cpadmin.menu-ongletsh > ul > li > a:active {
  height:1.9em;
  padding:0;
}
.cpadmin.menu-ongletsh {
  border-bottom:1px #cc6600 solid;
}
.menu-ongletsh.cpadmin > ul ul {
  border:1px #cc6600 solid;
}
.menu-ongletsh.cpadmin > ul li { /* tous les niveaux de <li> en commençant par les onglets */
  /* background-color:#ff9933; pour les vieux navigateurs
     background: url(/images/default/kit/orange2/degrade_2.jpg);background-repeat: repeat-x;
  */
  background: linear-gradient(#ffcc99, #ff9933 15%, #ff9933 100%);
  border-top: 1px #ffcc99 solid;
  border-bottom: 1px #cc6600 solid;
}
.menu-ongletsh.cpadmin > ul > li { /* on vire le border du bas sur les onglets */
  border-bottom: none;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cpadmin > ul > li > ul li:first-child {
/*  border-top: 1px #cc6600 solid; */
  border-top: none;
}
.menu-ongletsh.cpadmin > ul > li > ul li:last-child {
/*
  border-bottom: 1px #cc6600 solid;
*/
  border-bottom:none;
}
.menu-ongletsh.cpadmin > ul > li > ul li:hover > a, .menu-ongletsh.cpadmin > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cpadmin > ul > li > ul li:hover > a:link, .menu-ongletsh.cpadmin > ul > li > ul li:hover > a:active,
.menu-ongletsh.cpadmin > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cpadmin > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cpadmin > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cpadmin > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#ff9933;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.cpadmin.menu-ongletsv ul {
  border-top: 1px #ffcc99 solid;
  border-left: 1px #ffcc99 solid;
  border-bottom: 1px #cc6600 solid;
  border-right: 1px #cc6600 solid;
  /* dimensions */
}
.menu-ongletsv.cpadmin ul, .menu-ongletsh.cpadmin > 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 */
}
.menu-ongletsv.cpadmin li {
 /* background-color:transparent;*/ /* à virer idem ci-dessus */
  border-top: 1px #ffcc99 solid;
  border-bottom: 1px #cc6600 solid;
/* à mettre si on veut un bkgd sur chaque lien
  background: linear-gradient(#ffcc99, #ff9933 10%, #ff9933 100%);
  border:none;
*/
  text-shadow: none;
}

/****************************************************/
/***************************************************/
/***************************************************/
  /***************************/
 /* cpadminhoriz */
/*************************************************/
.cpadminhoriz[class^="menu-onglets"] ul {
  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 */
}
.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 {
  background-image: url(/images/default/pictos/btn-editer.png);
  background-position:14.5em 0.25em;
}
[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 */
}
/*-*-*/
 /**************************/
/* Fin du menu ci-dessous */
/* sous nav de la nav horizontale */
/*[class=^cp].menu-ongletsh > ul > li > ul li {*/ /* tous les niveaux de <li> après le premier niveau donc apres les onglets */
.cp1.menu-ongletsh > ul > li > ul li,
.cpbleu.menu-ongletsh > ul > li > ul li,
.cpvert.menu-ongletsh > ul > li > ul li,
.cprouge.menu-ongletsh > ul > li > ul li,
.cprouge2.menu-ongletsh > ul > li > ul li,
.cpadmin.menu-ongletsh > ul > li > ul li,
.cpadminhoriz.menu-ongletsh > ul > li > ul li {
  background: transparent;
}
.menu-ongletsv li:first-child {
  border-top:none;
}
.menu-ongletsv li:last-child {
  border-bottom:none;
}
.mmmembre2 .menu-ongletsh::after { /* pour cacher le trait avec un arrondi de la nav horizontale sur le design éclaté */
  border-radius:0;
  border:none;
}
/*************************************************************************************/
/*************************************************************************************/
/*************************************************************************************/

.c-a1, .c-a1:link, .c-a1:active, .c-a1:visited { color:#fff;text-decoration:none; }


  /*********************/
 /* Boutons et autres */
/*********************/
.cccp1, .cccp1a, .cccp1[class^="menu-onglets"] li.ooon { /* le cccp1 de base sert pour tout à commencer par les boutons */
  background-color:#80a0af;
  border:1px #1c58c3 solid;
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
}
.cccp1a, .cccp1a:active, .cccp1a:link, .cccp1a:visited { /* cccp1a comme applat */
  background: transparent;
  background-color:#1c58c3;
}
.cccp1a:hover, .cccp1:hover { /* cccp1a comme applat */
  filter: invert(0.11);
}


  /*****************************/
 /* TEASERS GRANDES VIGNETTES */
/*****************************/
.vignettes.cccp1 > div > p:first-child {
  color:#fff;
  background-color:#6699ff;
  border-left:1px #3c8eff solid;
  border-right:1px #3c8eff solid;
  border-bottom:1px #3c8eff solid;
  border-top:1px #3c8eff solid;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  background-repeat: repeat-x;background-color:#6699ff;
}
.vignettes.cccp1 > div > p:first-child:before {
  border-left:1px #99ccff solid;
  border-right: 1px #1c58c3 solid;
  border-bottom: 1px #1c58c3 solid;
}
.vignettes.cccp1 > div div:nth-child(2) {
  border-left:1px #3c8eff solid;
  border-right:1px #3c8eff solid;
  border-bottom:1px #3c8eff solid;
  background-color:#fff0ff;
  color:#996666; /* couleur du texte de .vtitle */
}
.vignettes.cccp1 > div div:nth-child(2) p:first-child a {
  border-top: 1 px #7f9faf solid;
  border-left:1px #7f9faf solid;
  border-right:1px #7f9faf solid;
  background-color:#6F6F6F;
}
.vignettes.cccp1 > div div:nth-child(2) p:nth-child(2) a, .vignettes.cccp1 > div div:nth-child(2) p:nth-child(2) a:link,
.vignettes.cccp1 > div div:nth-child(2) p:nth-child(2) a:active, .vignettes.cccp1 > div div:nth-child(2) p:nth-child(2) a:visited {
  color:#000;
}

  /*****************************/
 /* TEASERS GRANDES VIGNETTES */
/*****************************/
.vignettes.cpadmin > div > p:first-child {
  color:#fff;
  background-color:#ff9933;
  border-left:1px #cc6600 solid;
  border-right:1px #cc6600 solid;
  border-bottom:1px #cc6600 solid;
  border-top:1px #cc6600 solid;
  background: linear-gradient(#ffcc99, #ff9933 20%, #ff9933 100%);
  background-repeat: repeat-x;background-color:#ff9933;
}
.vignettes.cpadmin > div > p:first-child:before {
  border-left:1px #ffcc99 solid;
  border-right: 1px #ff9933 solid; /* un peu plus foncé ici c'est tout */
  border-bottom: 1px #ff9933 solid; /* un peu plus foncé ici c'est tout */
}
.vignettes.cpadmin > div div:nth-child(2) {
  border-left:1px #cc6600 solid;
  border-right:1px #cc6600 solid;
  border-bottom:1px #cc6600 solid;
  background-color:#fff0ff;
  color:#996666; /* couleur du texte de .vtitle */
}
.vignettes.cpadmin > div div:nth-child(2) p:first-child a {
  border-top: 1 px #7f9faf solid;
  border-left:1px #7f9faf solid;
  border-right:1px #7f9faf solid;
  background-color:#6F6F6F;
}
.vignettes.cpadmin > div div:nth-child(2) p:nth-child(2) a, .vignettes.cpadmin > div div:nth-child(2) p:nth-child(2) a:link,
.vignettes.cpadmin > div div:nth-child(2) p:nth-child(2) a:active, .vignettes.cpadmin > div div:nth-child(2) p:nth-child(2) a:visited {
  color:#000;
}

/*************************************************************************************/
/*************************************************************************************/
/*************************************************************************************/
  /*****************************/
 /* TEASERS GRANDES VIGNETTES */
/*****************************/
[class^="vignettes"].cccp2 > div > p:first-child {
  color:#fff;
  background-color:#ffde66;
  border-left:1px #ffb83c solid;
  border-right:1px #ffb83c solid;
  border-bottom:1px #ffb83c solid;
  border-top:1px #ffb83c solid;
  background: linear-gradient(#ffdd99, #ffb83c 20%, #ffde66 75%, #ffb83c 100%);
  background-repeat: repeat-x;background-color:#ffde66;
}
[class^="vignettes"].cccp2 > div > p:first-child:before {
  border-left:1px #ffdd99 solid;
  border-right: 1px #ff7300 solid;
  border-bottom: 1px #ff7300 solid;
}
[class^="vignettes"].cccp2 > div div:nth-child(2) {
  border-left:1px #ffb83c solid;
  border-right:1px #ffb83c solid;
  border-bottom:1px #ffb83c solid;
  background-color:#fff0ff;
  color:#996666; /* couleur du texte de .vtitle */
}
[class^="vignettes"].cccp2 > div div:nth-child(2) p:first-child a {
  border-top: 1 px #7f9faf solid;
  border-left:1px #7f9faf solid;
  border-right:1px #7f9faf solid;
  background-color:#6F6F6F;
}
[class^="vignettes"].cccp2 > div div:nth-child(2) p:nth-child(2) a, [class^="vignettes"].cccp2 > div div:nth-child(2) p:nth-child(2) a:link,
[class^="vignettes"].cccp2 > div div:nth-child(2) p:nth-child(2) a:active, [class^="vignettes"].cccp2 > div div:nth-child(2) p:nth-child(2) a:visited {
  color:#000;
}

/* à virer?
.cpmom, .cpmoma, .cpmom[class^="menu-onglets"] li.ooon {
  background-color:#80a0af;
  border:1px #1c58c3 solid;
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
}
.cpmoma, .cpmoma:active, .cpmoma:link, .cpmoma:visited {
  background: transparent;
  background-color:#1c58c3;
}
.cpmoma:hover, .cpmom:hover {
  filter: invert(0.11);
}
*/

.cpmom[class^="menu-onglets"] ul {
/*
  font-family: arial;
  font-size:0.6em;
*/
}
.cpmom[class^="menu-onglets"] li { /* COPY B */
/*
  letter-spacing: .1rem;
  text-shadow: 2px 2px #000;
*/
}
.cpmom[class^="menu-onglets"] a, .cpmom[class^="menu-onglets"] a:visited, .cpmom[class^="menu-onglets"] a:link, .cpmom[class^="menu-onglets"] a:active {
  text-decoration:none;
  color:#33336c;
/*  font-size:0.5em;*/
}
.cpmom.menu-ongletsh > ul > li:hover ul a, .cpmom.menu-ongletsh > ul > li:hover ul a:visited, .cpmom.menu-ongletsh > ul > li:hover ul a:link,
.cpmom.menu-ongletsh > ul > li:hover ul a:active {
/*
  padding:0.25em 0.4em 0.25em 0.4em;
*/

}
/*
.cpmom.menu-ongletsh > ul > li > a, .cpmom.menu-ongletsh > ul > li > a:visited, .cpmom.menu-ongletsh > ul > li > a:link, .cpmom.menu-ongletsh > ul > li > a:active {
  height:1.9em;
}
*/

.cpmom.menu-ongletsh > ul > li > ul li {
/*
  font-family:arial;
  font-size:0.9em;
  text-shadow: none;
  text-align:right;
*/
/*  margin:0;*/
/*remettre
  padding:0 1vw;
*/
  padding:0;
/*  float:none;*/
  white-space: nowrap;

}
.menu-ongletsh.cpmom > ul ul {
  background-color:#FFFFFF;
  border:1px #000000 solid;

/*  z-index:1; */
}
/*
.menu-ongletsh.cpmom > ul > li {
  border-radius:0.4em 0.4em 0 0;
}
.menu-ongletsh.cpmom ul {
  border-radius: 0.2em;
  z-index:1;
}
.menu-ongletsh.cpmom > ul > li:hover > ul li:first-child {
  border-radius: 0.2em 0.2em 0 0;
}
.menu-ongletsh.cpmom > ul > li:hover > ul li:first-child:hover > a {
  border-radius: 0.5em 0.5em 0 0;
}
.menu-ongletsh.cpmom > ul > li:hover > ul li:last-child {
  border-radius: 0 0 0.2em 0.2em;
}
.menu-ongletsh.cpmom > ul > li:hover > ul li:last-child:hover a {
  border-radius: 0 0 0.5em 0.5em;
}
*/
/*
.menu-ongletsh.cpmom > ul > li > ul li {
  background: transparent;

}
.menu-ongletsh.cpmom > ul > li > ul li:first-child {
  border-top: 1px #3c8eff solid;
}
.menu-ongletsh.cpmom > ul > li > ul li:last-child {
  border-bottom: 1px #3c8eff solid;
}
*/
.menu-ongletsh.cpmom > ul > li > ul li:hover > a, .menu-ongletsh.cpmom > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cpmom > ul > li > ul li:hover > a:link, .menu-ongletsh.cpmom > ul > li > ul li:hover > a:active,
.menu-ongletsh.cpmom > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cpmom > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cpmom > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cpmom > ul > li > ul li:hover a:hover:link {
  background-color: #33336c;
  color:#ffffff;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cpmom > ul li { /* tous les niveaux de <li> en commençant par les onglets */
/*
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #99ccff solid;
*/
}
/* COMPLEMENT QU'IL FAUDRA METTRE DANS TOUS LES PROFILS COULEUR CAR CA DOIT ETRE EDITABLE */
[class^="menu-onglets"].dim > ul > li:hover > ul, [class^="menu-onglets"].dim > ul > li li:hover > ul {
  font-size:0.2em;
}
.menu-ongletsh li {
  text-align:left;
 /* width:15em; */
  font-size:1em;
}
.menu-ongletsh > ul > li { /* onglets, le padding est uniquement sur les onglets pour la nav horizontale */
/*
  margin-left:0.2em;
  padding:0.4em 0 0 0;
*/
}
/****************************************/
.cpmom[class^="menu-onglets"] ul {
/*
  font-family: arial;
  font-size:0.6em;
*/
  margin:0 0 1.1vw 1.1vw;
  padding:0;
}
.cpmom[class^="menu-onglets"] li {
  font-size:1.5vw;
/*
  font-weight:bold;
  margin:0 15px;
*/
  z-index:3;
  opacity:1;
}


/* fleches membre suivant membre précédent */
#entete {
  position:absolute;
}
.mp, .ms {
  position:absolute;
  top:0;
  /*
  width:55px;
  height:55px;
  background-color:red;
  z-index:1111111111111111111111111111;
  font-size:50px;
  font-weight:bold;
  display:none;
  */
  z-index:1111111111111111111111111111;
  /* display:none; */

  background-color:#ffffff;
  border-radius:35px;
  border:1px #000000 solid;
  width:40px;
  height:40px;
  font-weight:bold;
  font-family:arial;
  opacity:0.3; /* chaque user doit pouvoir regler le contraste dans ses préférences de yama => tuto */

  text-align:center;
}
.mp a, .mp a:link, .mp a:active, .mp a:visited,
.ms a, .ms a:link, .ms a:active, .ms a:visited { /* Source: file:///I:/serveur%20planet-service/code/yamafoto.com/public_html/websites/htdocs/etude/test_fleches_css.htm */
  display: block;
  width:14px;
  height:14px;
  /* color:green; pas pris en compte */
  background-color:#ffffff;
  border-color: #000000;
  border-bottom: 6px solid;
  border-left: 6px solid;
}
.mp a, .mp a:link, .mp a:active, .mp a:visited {
  margin:10px 0 0 14px;
  transform: rotate(45deg);
}
.ms a, .ms a:link, .ms a:active, .ms a:visited {
  margin:10px 0 0 9px;
  transform: rotate(-135deg);
}
.mp span, .ms span {
/*  display: none; */
  border:1px black solid;
  font-size:12px;
  padding:5px;
  border-radius:5px;
  background-color:#ffffff;

  display:inline-block;
  position:relative;
  bottom:-12px;
  /* box-sizing: border-box; https://www.paulirish.com/2012/box-sizing-border-box-ftw/ https://stackoverflow.com/questions/20641399/css-min-width-and-margin-padding-with-absolute-positioning */
  /*max-width:70px;
  overflow:hidden;
  */
  /* 75px: 70px + padding */
  /* https://stackoverflow.com/questions/17976995/how-to-center-absolute-div-horizontally-using-css */
  /*
  min-width:70px;
  margin:auto;
  left:-5px;
  right:0;
  text-align:center;
  */
  /* word-break: break-all; */ /* https://developer.mozilla.org/fr/docs/Web/CSS/word-break */

}
@keyframes flechein {
  from { opacity:0.3; }
  to   { opacity:1; }
}
.mp:hover, .ms:hover {
  opacity:1;
}
/* https://stackoverflow.com/questions/30835168/is-there-an-opposite-css-pseudo-class-to-hover */
.mp:not(:hover) > a, .mp:not(:hover) > a:link, .mp:not(:hover) > a:active, .mp:not(:hover) > a:visited,
.ms:not(:hover) > a, .ms:not(:hover) > a:link, .ms:not(:hover) > a:active, .ms:not(:hover) > a:visited {
  color:#000000;
}
.mp:hover > a, .mp:hover > a:link, .mp:hover > a:active, .mp:hover > a:visited,
.ms:hover > a, .ms:hover > a:link, .ms:hover > a:active, .ms:hover > a:visited {
  opacity:1;
  color:#000000;
}

/*
.mp:hover span, .ms:hover span {
  display: block;
  animation-name: flechein;
  animation-duration: 0.5s;
}
*/
.mp:hover, .ms:hover {
  display: block;
  animation-name: flechein;
  animation-duration: 0.5s;
}
.mp::before{
  /*
  content:'<';
  */
  padding-left:15px;
}
.ms {
  right:0;
}
.ms::before{
/*
  content:'>';
  */
  padding-left:15px;
}
#entete:hover .mp, #entete:hover .ms { /* https://openclassrooms.com/forum/sujet/hover-qui-display-block-un-autre-div */
  display:block;
}
/* grandes vignettes */
.vignettes {
  font-size:32px;
}
[class^="vignettesl"], [class^="vignettesr"] {
  font-size:var(--content_vignettes_size);
}
.vignettes.small {
  font-size:16px;
}
[class^="vignettesl"].small, [class^="vignettesr"].small {
  font-size:1.2em;
}
.vignettes.big {
  font-size:64px;
}
[class^="vignettesl"].big, [class^="vignettesr"].big {
  font-size:4.8em;
}
.menu-ongletsv, .menu-ongletsh { /* sert pour la nav de yamafoto: à revoir: séparer la nav de yamafoto ou alors définir une size dédiée */
  font-size:25px;
}
.menu-ongletsv.big, .menu-ongletsh.big {
  font-size:64px;
}
.menu-ongletsv.small, .menu-ongletsh.small {
  font-size:16px;
}
.d-vignette130 img { border:none; }
/* NOUVEAU TEASERS */
/*
pour les vieux browsers il faudra simplement ici remplacer par une class="xx" pour chaque element
exemple:
.vignettes > div div:nth-child(2) p:first-child a devient .toto => <a class="toto">
p:first-child remplace .vtitle avec <div class="v-title">
div:first-child remplace .vcontent avec <div class="v-content">
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://stackoverflow.com/questions/13285440/how-do-i-target-the-first-link-inside-a-div-with-css
*/
/* [class^="vignettes"] */
[class^="vignettes"] > div {
margin:var(--content_vignettes_margin); /* marges entre les grandes vignettes quand elles sont positionnées horizontalement */
}
.vignettes > div, .vignettesl > div {
  float:left;
}
.vignettesr > div {
  float:right;
}
.vignetteslch > div, .vignettesrch > div { /* ch comme chevauche et pas ch commc cheval */
  height: 33px; /* permet que les vignettes se chevauchent dans la colonne */
}
.vignettesr > div, .vignettesrch > div { /*  margin:0 0 0 15px; */

}
.vertic {
  width:var(--content_liste_width); /* sert à afficher la liste des albums dans un div avec class="vertic" quand on affiche les grandes vignettes verticalement
	on pourra changer les valeurs ici de 80% et 20% en dessous pour les agrandir ou les racourcir.
	*/
  float:left;
  font-size:var(--content_liste_size);
  margin:var(--content_liste_margin);
}
[class^="vignettesl"] {
  width:var(--content_vignettes_width);
  float:left;
}
[class^="vignettesr"] {
  width:var(--content_vignettes_width);
  float:right;
  text-align:center;
}

.ventete {
  position:absolute; /* le dernier position:relative avant doit etre l'entete */
  top:3%;
  right:5%;
  font-size:18px;
}
.ventete > div:nth-child(1) {
  left:0;
}
.ventete > div:nth-child(2) {
  left:20%;
}
.ventete > div:nth-child(3) {
  left:50%;
}
.ventete > div:nth-child(4) {
  left:70%;
}

/*
super intéressant: les variables dans la css: https://stackoverflow.com/questions/8833352/css3-calc-with-variables

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
nth-child(an+b)
.vleftch > div > div:nth-child(an+b) {

https://developer.mozilla.org/en-US/docs/Web/CSS/--*
*/
.vleftch > div {
  position:relative;
}
.vleftch > div:nth-child(1n) {
  left:calc(var(--left)+20)%;
  --left: 0;
}
/*
.vleftch > div:nth-child(1) {
  left:0;
  --left: 0;
}
.vleftch > div:nth-child(2) {
  left:17%;
  --left: 17%;
}
.vleftch > div:nth-child(3) {
  left:34%;
  --left: 34%;
}
.vleftch > div:nth-child(4) {
  left:51%;
  --left: 51%;
}
*/
/*
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://stackoverflow.com/questions/50661638/css-animate-custom-properties-variables
https://stackoverflow.com/questions/21275565/can-i-use-the-auto-value-with-the-calc-property
*/
:root {
  --left: 20%;
}

@keyframes vleftch {
  from {font-size: 0;opacity:0;}
  to {font-size: 16px;opacity:1;}
  /*
  from {font-size: 32px;opacity:0;}
  to {font-size: 16px;opacity:1;}
  */
/*
  from {font-size: 1000px;opacity:0;}
  to {font-size: 16px;opacity:1;}
*/
  /*
  from {left:calc(var(--left)-100%;);}
  to {left:var(--left);}
 */
}

/*
https://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
https://stackoverflow.com/questions/4623328/select-first-occurring-element-after-another-element
https://stackoverflow.com/questions/43569452/change-z-index-with-counter-increment
https://stackoverflow.com/questions/18493427/mouseover-and-mouseout-in-css
https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered
*/
.vleftch {
  font-size:16px;
  animation-name: vleftch;
  animation-duration: 1s;
}
.vleftch:hover {
  /*
  font-size: 32px;
  */
}
/*
.vleftch > div:hover ~ div {
  display:none;
}
*/
.vleftch:hover > div:not(:hover) {
  /* display:none; */
  /*
  opacity:0;
  */
}

.vleftch > div > p:first-child:hover + div, .vleftch > div > p:first-child + div:hover,
.vrightch > div > p:first-child:hover + div, .vrightch > div > p:first-child + div:hover {
  position:relative;
  z-index: 12;
}
[class^="vignettes"] > div > p:first-child:hover {
  cursor:pointer;
}
[class^="vignettes"] > div > p:first-child {
/*
sans le > tous les <p> à l'intérieur de koko hééritent de cette propriété
ul > li
does select the li that are child of the ul.
ul li
does select the li that are descendant of the ul.
https://www.neowin.net/forum/topic/1138004-selecting-the-first-level-only-in-css/
https://stackoverflow.com/questions/2094508/is-there-a-css-selector-for-the-first-direct-child-only
*/
  text-align:center;
  font-size:0.35em;
  font-weight:bold;
  height:2em;
  overflow:hidden;
  position:relative;
  margin:auto;
  border-radius:5px 5px 0 0;
  padding:0.4em 0 0 0;
  margin-top:0.3em; /*+++*/
}
[class^="vignettes"] > div > p:first-child:before { /* sans le > tous les <p> à l'intérieur de koko hééritent de cette propriété */
  content: "";
  position: absolute;
  z-index: 10;
  top: 2px; /* dépend du border */
  left: 0;
  height:90%;
  width:99%;
}
[class^="vignettes"] > div div:nth-child(2) { /* ici je ne mets pas le > car il y a un seul <div> dans .koko mais si il y en avait plusieurs il faudrait mettre un > pour signifier le premier div */
  /*
  position:relative;
  text-align:left;
  margin:auto;
  */
  padding-bottom:5px;
}
[class^="vignettes"] > div div:nth-child(2) p:first-child { /* sert pour la vignette */
  display:block;
  padding:0.2em;
  /*
  font-weight:bold;
  */
  text-align:center;
}
[class^="vignettes"] > div div:nth-child(2) p:first-child a {
  display:block;
  border-radius:0.3em;
  width:4em;
  height:4em;
  overflow:hidden;
}
.v > div div:nth-child(2) p:nth-child(2) { /* pour que la height soit homogene QUAND LES VIGNETTES SONT AFFICHEES LES UNES A COTE DES AUTRES */
  height:2.5em;
}
[class^="vignettes"] > div div:nth-child(2) p:nth-child(2) {
  /*
  Pour que les ... apparaissent directement dans la css, le pb etant que ça ne prend pas en compte la height mais seulement la width:
  white-space: nowrap;  white-space: nowrap; a mettre pour que text-overflow: ellipsis; soit pris en compte https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
  overflow:hidden;
  text-overflow: ellipsis;
  */
  display:block;
  overflow:hidden;
  width:12em;
  max-height:2.5em;
  font-size:0.35em; /* s'applique aussi aux <a> */
  padding:0.35em;
  font-weight:normal;
  text-align:justify; /* bien pris en compte mais ça ne change pas grand chose: ça aligne simplement le "by" (ou "par") à droite quand il y a un deuxième ligne. */
	text-align-last: justify; /* https://usefulangle.com/post/149/css-text-justify */
	text-justify: inter-character;
}
[class^="vignettes"] > div div:nth-child(2) p:nth-child(2) a, [class^="vignettes"] > div div:nth-child(2) p:nth-child(2) a:link,
[class^="vignettes"] > div div:nth-child(2) p:nth-child(2) a:active, [class^="vignettes"] > div div:nth-child(2) p:nth-child(2) a:visited {
  text-decoration: none;
}
[class^="vignettes"] > div div:nth-child(2) p:nth-child(2) a:nth-child(2) {
  font-weight:bold; /* mise en gras du membre */
}
/************************************************/
/***********************************************/
/***********************************************/
.content .btn-enregistrer111:active, .content .btttn-creer:active, .content .btn-annuler:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.content .btn-enregistrer111, .content .btn-annuler {
  background:url(/images/default/pictos/enregistrer.gif) no-repeat left center, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
}
.btttn-creer{
  background:url(/images/default/cliparts/mini/14.gif) no-repeat left center, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
}
.btn-annuler {
  background: url(/images/default/pictos/annuler.gif) no-repeat 2px 2px, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
}

/*
'.IMG_PATH_TMP.'cliparts/mini/14.gif style="width:11px;"
*/

.content .btn-enregistrer111, .content .btttn-creer, .content .btttn-enregistrer111:visited, .content .btttn-creer:visited, .content .btttn-creer:link,
.content .btn-annuler:link, .content .btn-annuler:visited {
    position: relative;
/*     display: inline-block; */
    margin:0 auto; /* j'avais bon pour auto mais il faut un block https://stackoverflow.com/questions/15300234/how-can-i-horizontally-center-a-button-element-in-a-div-element/15300266 */
    display:block;
    text-decoration: none;
    color:#ffffff;
    border:1px #000000 solid;
    border-radius: 3px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    padding:2px 3px 2px 20px;
    /* font-weight: bold; */
    font-size:1.3em;
    font-family:verdana, arial;
    cursor:pointer;
}
/* boutons.css */

/* 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; }


.sousnav a, .sousnav a:link, .sousnav a:active, .sousnav a:visited {
  font-family: arial;
  font-size:16px;
  padding:5px;
  margin:3px 0 3px 3px;
  display:block;
  float:left;
  height:20px;
  font-weight:normal;
  color: #000;
  text-decoration:none;
  border: 1px grey solid;
  border-radius: 5px;
  opacity:0.5;
}
.sousnav a:hover {
  opacity:1;
  border: 1px #000 solid;
}
/*
.sousnav a.btn-on, .sousnav a.btn-on:link, .sousnav a.btn-on:active, .sousnav a.btn-on:visited {
*/
/* note: comme les propriétés ci-dessus n'ont pas encore été définies pour une ancre (a) dans un conteneur alors la class css fonctionne directement sur l'ancre sans spécifier le conteneur */
.sousnav a.btn-on, .sousnav a.btn-on:link, .sousnav a.btn-on:active, .sousnav a.btn-on:visited {
  border: 1px #000 solid;
  opacity:1;

  color:#fff;
  text-decoration:none;
  background-color:#80a0af;
  border:1px #1c58c3 solid;
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
  background-repeat: repeat-x;
}

/* ancienne sous nav avec les pictos: je vire les pictos (dont certains manquent) mais j'ai gardé le code au cas où
.sousnav a, .sousnav a:active, .sousnav a:visited
{
  background-repeat: no-repeat;
  background-position: 0 0;
  padding:2px 0 0 20px;
  margin-right:3px;
  display:block;
  float:left;
  height:20px;
  font-weight:bold;
  color: #000;
}
#a-accueil, #a-accueil:active, #a-accueil:visited {
  background-image: url(/images/default/cliparts/mini/78.gif);
}
#a-profil, #a-profil:active, #a-profil:visited {
  background-image: url(/images/default/cliparts/mini/62.gif);
}
#a-compte, #a-compte:active, #a-compte:visited {
  background-image: url(/images/default/cliparts/mini/62.gif);
}
#a-albums, #a-albums:active, #a-albums:visited {
  background-image: url(/images/default/cliparts/mini/13.gif);
}
#a-contacts, #a-contacts:active, #a-contacts:visited {
  background-image: url(/images/default/cliparts/mini/25.gif);
}
#a-favoris, #a-favoris:active, #a-favoris:visited {
  background-image: url(/images/default/cliparts/mini/28.gif);
}
#a-partage, #a-partage:active, #a-partage:visited {
  background-image: url(/images/default/cliparts/mini/25.gif);
}
*/

.sup_stat {
  background-color:#fff;position:fixed;bottom:0;left:0;width:100%;padding:5px;z-index:1111;
}
.sup_stat span.l, .sup_stat span.r {
  width:20%;
}
.sup_stat span.link_partage {
  border-radius:5px;background-color:grey;padding:5px;
}

.lien-pic-l {
  display:block;
  text-align:left;
  padding:2px 2px 2px 20px;
  margin:3px 0 0 0;
  background-repeat: no-repeat;
  height:16px;
  voice-family: "\"}\"";voice-family:inherit;height:14px;
}
html>body .lien-pic-l { height:14px; }

.lien-pic-l2 {
  display:block;
  text-align:left;
  padding-left:20px;
  margin-right:3px;
  background-repeat: no-repeat;
  height:22px;
}


.btn-delete { background-image: url(/images/default/pictos/delete.gif); }
.btn-stats { background-image: url(/images/default/cliparts/mini/22.gif); }

/* creer param */
.theme-validation {
  display:none;padding:1px;position:absolute;right:0;top:0px;width:200px;background-color:green;border-radius:5px;color:#fff;
}
.theme-validation2 {
  position:absolute;
  right:0;
  background-color:green;
  border-radius:5px;
  color:#fff;
  width:23%;
/*  height:70em; */
  height:90%;
  overflow:auto;
  z-index:11111;
  padding:5px;
/*
  display:none;
  top:100px;
  width:23em;
*/
  font-family:arial;
  font-size:12px;

  text-align:justify;
}
.theme-validation2 ol {
  margin:0 9px;
/*  list-style-type: upper-roman; */
}
.theme-validation2 span {
  color:cyan;
}
.theme-validation2 h1, .theme-validation2 h2  { /* h2 sert pour les messages pour promouvoir l'abonnement */
  margin-top:5px;
  font-size:14px;
}
.theme-validation2 h2 {
  color:orange;
}
.theme-validation2 a {
  /* position:absolute;top:5px;right:5px; */
}

 /***********/
/* visiter */

.themes-nouveautes {
  display:block;
  height:20px;
  background-image:url(/images/default/puces/puce.gif);
  background-repeat:no-repeat;
  background-position:0 3px;
  padding-left:10px;
  padding-right:3px;
  margin-bottom:3px;
}

.lis-nouv-vide {
  width:291px;height:108px;voice-family: "\"}\"";voice-family:inherit;width:289px;height:132px;
}
html>body .lis-nouv-vide  { width:289px;height:132px; }
.lis-th-vide { float:left; width:291px;height:108px;voice-family: "\"}\"";voice-family:inherit;width:289px;height:106px; }
html>body .lis-th-vide  { width:289px;height:106px; }

/* liste themes annuaire float */

/* détermine la taille des vignettes des themes, une idée: en changeant ça par ex à 0.5vw les themes prennent un autre aspect et en changeant les couleurs on peut avoir une présentation complètement différente pour une déclinaison */
.theme-content {
  font-size:2.5vw;
}
.lis-th, .lis-th1, .lis-th4  { float:left; }

/* liste themes annuaire margin */
.lis-th-desc { margin-left:3px; }

/* liste themes annuaire padding */
.lis-th  { padding:0px 2px 2px 2px; }
.lis-th2 { padding-bottom:2px; }
.lis-th-desc { padding:2px; }

/* liste themes annuaire proprietes */
.lis-th-desc { overflow:hidden; }

/* liste themes annuaire couleurs */
.lis-th-desc { background-color: #f2f2f4; }

/* liste themes annuaire centrage */
.lis-th4 { text-align:center; }

/* liste themes annuaire */
.lis-th  { width:291px;voice-family: "\"}\"";voice-family:inherit;width:285px; }
html>body .lis-th  { width:285px; }
.lis-th1, .lis-th4 { width:72px; }
.lis-th-desc { width:205px;height:76px;voice-family: "\"}\"";voice-family:inherit;height:70px;width:200px; }
html>body .lis-th-desc { height:70px;width:200px; }
.lis-th5 { width:205px;height:76px; }

.theme {
width:24.8%;float:left;
position:relative;font-size:1em;
margin-top:1.5em;
}
@media screen and (max-width: 800px) {
  .theme-content {
    font-size:7vw;
  }
  .theme {
    width:100%;
    position:relative;
    font-size:1em;
    margin-top:0;
  }
}

.theme img {
  border:5px black solid;
}
.theme > div:first-child {
font-size:0.3em;
display:none;
background-color:#ffffff;
border:1px #000000 solid;
position:absolute;
right:0;
bottom:60%;
padding:5px;
}
.theme p:nth-child(2) {
text-align:center;
overflow:hidden;
max-height:1em;
text-overflow:ellipsis;
}
.theme p:nth-child(3) {
text-align:center;
margin-top:0.2em;
min-height:12em;
}
.theme div:nth-child(4) {
margin-top:0.2em;
font-size:10px;
}
.theme div:nth-child(4) p:first-child {
width:49%;
float:left;
text-align:right;
}
.theme > div:nth-child(4) > p:nth-child(2) {
width:49%;
float:right;
}

  /****************/
 /* liste albums */
/****************/
.c-clist {
border:1px #1c58c3 solid;
border-radius:5px;
}

/*
.liste-big {
  font-size:1.35em;
}
*/
.liste-big {
  font-size:1em;
}

.liste-normal {
/* font-size:1.05em; */
  font-size:0.7em;
}

.liste-small {
  font-size:0.85em;
}

/* liste albums visiter */
.liste-albums-nouveautes2 {
width:49%;
padding: 0px 2px 0px 2px;
}

.liste-albums-nouveautes {
width:49%;
padding: 0px 2px 0px 2px;
}

.ct1 { width:76px;margin-right:3px;float:left;text-align:center; }
.ct2 { width:200px;height:22px;overflow:hidden;margin-right:3px;float:left; }

.liste-albums { padding: 0 2px; }
.c-contlistb {
border-left: 1px #ffffff solid;border-right: 1px #d8d2bd solid;border-top: 1px #ffffff solid;border-bottom: 1px #d8d2bd solid;
background-color:#fff0ff;color:#996666;
color:#000;
}
.c-contlistb a {
color:#000;
}
.liste-albums-checkbox {
  float:left;
  width:1em;
  background:url(/images/default/checked2.gif);
}
.liste-albums-checkbox2 {
  float:left;
  height:78px;
  padding:3em 0 0 2px;
  background:url(/images/default/checked2.gif);
}
.liste-albums-left { width:5.5em;padding-bottom:3px;margin-right:3px;float:left;text-align:center; }
.listebas-albums-left { width:10.5em;padding-bottom:3px;margin-right:3px;float:left;text-align:center; }
.liste-albums-center { padding-bottom:3px;margin-right:3px;float:left; }

/*
.liste-albums-desc { text-align:right;margin:0;float:right;width:502px;height:76px;text-align:left; }
*/
.liste-albums-desc { text-align:right;margin:0;float:left;width: calc(100% - 75px);height:76px;text-align:left; } /* width:515px; */

.liste-albums-right { text-align:right;padding-bottom:3px;margin:0;float:right; }

/*
.desc-album { position:relative;padding:3px;width:502px;height:71px;overflow:auto;voice-family: "\"}\"";voice-family:inherit;width:494px;height:65px; }
html>body .desc-album { width:494px;height:65px; }
*/

/*****************/
/* select blocks */
/*****************/

.sel-block { float:left;width:278px; }

/* select block padding */
.sel-cont { padding:3px; }

/* select block dimensions */
.sel-cont { height:22px;voice-family: "\"}\"";voice-family:inherit;height:17px; }
html>body .sel-cont { height:17px; }

.sel-cont a, .sel-cont a:active, .sel-cont a:visited { color:#000;text-decoration:none;font-weight:bold; }


 /*********/
/* liste */
/*********/
/*
FAIRE UN SCRIPT POUR CALCULER AUTO les calc dans la css

Important: j'ai cherché pendant une heure pour me rendre compte qu'il fallait diviser par n la valeur à retirer, n=2 ici étant le nb de divs en %ages concernés - n', n'=1 étant le nb de divs concernés par la valeur à retirer

Exemple:
        <div style="float:left;width:5em;background-color:blue;">bbb</div>
        <div style="float:left;width:calc(70% - 2.5em);background-color:red;">{ALBUM_DESC}</div>
	<div style="float:left;width:calc(30% - 2.5em);background-color:green;">aaa</div>
        <div style="clear:both;"></div>

Exemple2:
        <div style="float:left;width:5em;background-color:blue;">bbb</div>
        <div style="float:left;width:calc(70% - 6em);background-color:red;">{ALBUM_DESC}</div>
        <div style="float:left;width:7em;background-color:blue;">bbb</div>
	<div style="float:left;width:calc(30% - 6em);background-color:green;">aaa</div>
        <div style="clear:both;"></div>
*/
.liste-albums-desc-admin { /* source width:388px; https://stackoverflow.com/questions/18961918/css-fill-remaining-width */
  text-align:right;
/*  margin:0;*/
  margin-left:1px;
  float:left;
/*
  width:calc(70% - 3.17em - 6.5px);
*/
/*
width:calc(70% - 4.17em - 6.5px);
*/
  width:calc(70% - 4.8em - 6.5px);
  height:76px;
  text-align:left;
}
.cpadmin.menu-ongletsv {
  margin-left:2px;
}
.cpadmin.menu-ongletsv > ul > li > a, .cpadmin.menu-ongletsv > ul > li > a:visited, .cpadmin.menu-ongletsv > ul > li > a:link, .cpadmin.menu-ongletsv > ul > li > a:active {
  height:1.15em;
  padding:0.3em;
}
.liste-entete p, .llliste p {
/*
  padding:3px;
*/
}

.desccc-album {
/*
  position:relative;
*/
padding:3px;
/*

  height:64px;
*/
  height:6em;
  overflow:auto;
  scrollbar-width: thin;
  z-index:0;
}
.desccc-color {
  border-radius:5px;
  background-color:#a3cced;
  border-left:1px #c3e2fa solid;
  border-right: 1px #91bfe3 solid;
  background-repeat: repeat-x;
  color:#5982a3;
}

.coverliste {
  display:block;
  width:6.25em;/*100px;*/
  height:6.25em;/*100px;*/
  float:left;
}

.lien {
  clear:both;
  font-size:0.7em;
}

.liste-entete p {
  float:left;
  overflow:hidden;
}

.liste-content {
  position:relative;
  border-radius:0 0 15px 15px;
  padding-bottom:30px;
}

.font-size-liste {
  font-size:var(--liste-font-size);
}

.llliste .lien, .llliste p { /* mutualiser avec .contenttt */
  height:16px;
  float:left;
  overflow:hidden;
  padding:3px;

  background-color:#fff0ff;
  border-left: 1px #ffffff solid;
  border-right: 1px #d8d2bd solid;
  border-top: 1px #ffffff solid;
  background-color:#fffff0;
/*
border-left: 1px #ffffff solid;border-right: 1px #d8d2bd solid;border-top: 1px #ffffff solid;border-bottom: 1px #d8d2bd solid;background-color:#fff0ff;color:#996666;
*/
}

.llliste a {
color:#000;
}

.llliste p:nth-child(4), .llliste p:nth-child(5), .llliste p:nth-child(6), .llliste p:nth-child(8) {
  text-align:center;
}

.llliste a, .llliste a:active, .llliste a:visited, .llliste a:link {
  font-size:1em;
}

/*
.e1, .llliste p:nth-child(1) { min-width:23px; }
.e2, .llliste p:nth-child(2) { min-width:256px;width:30%; }
.e3, .llliste p:nth-child(3) { min-width:18px; }

.e5, .llliste p:nth-child(5) { min-width:60px; }
.e6, .llliste p:nth-child(6) { min-width:40px; }
.e7 { width:121px; }
*/

.liste-entete p:first-child, .llliste p:first-child { min-width:17px;padding:3px; }
.liste-entete p:first-child { background:url(/images/default/check_block.gif);padding:3px 0; }
.llliste p:first-child { background:url(/images/default/checked2.gif); }
.liste-entete p:nth-child(2), .llliste p:nth-child(2) { width:calc(100% - 332px);padding:3px; }
.liste-entete p:nth-child(3), .llliste p:nth-child(3) { min-width:12px;padding:3px; } /* a revoir: la largeur varie quand il y a un cadenas ou pas de cadenas */
.liste-entete p:nth-child(4), .llliste p:nth-child(4) { min-width:29px;padding:3px; }
.liste-entete p:nth-child(5), .llliste p:nth-child(5) { width:64px;padding:3px; }
.liste-entete p:nth-child(6), .llliste p:nth-child(6) { width:29px;padding:3px; }
/* elements dont la width change avec le scroll */
.llliste p:nth-child(7) { width:105px;padding:3px;text-align:center; }
.llliste p:nth-child(8) { width:14px;padding:3px; }

.liste-entete p:nth-child(7) { width:100px;text-align:center; }
.liste-entete p:nth-child(8) { float:left;width:10px;overflow:hidden; }

/* liste couleurs */

/* liste padding */
.liste-entete p:nth-child(2), .liste-entete p:nth-child(4), .liste-entete p:nth-child(5) {
  cursor:pointer; /* https://stackoverflow.com/questions/3087975/how-to-change-the-cursor-into-a-hand-when-a-user-hovers-over-a-list-item */
}
.liste-entete p:first-child, .liste-entete p:nth-child(3), .llliste p:first-child, .llliste p:nth-child(3) {
/*
  padding:0;
*/
}
/*
.e2, .e4, .e5, .e6, .e7, .ct2, .ct4, .ct5, .ct6, .ct7, .ct7s {  }
.e3, .ct3, .ct8, .ct8s { padding-top:3px; }
*/

/* liste float */
/*
.e1, .e2, .e3, .e4, .e5, .e6, .e7, .ct1, .ct2, .ct3, .ct4, .ct5, .ct6, .ct7, .ct8, .ct7s, .ct9, .ct10 { float:left;overflow:hidden; }
*/

/* liste centrage */
.e1, .e2, .e3, .e4, .e5, .e6, .e7, .ct4, .ct5, .ct6, .ct8 { text-align:center; }

/* liste height */
/*
.e { height:22px; }
*/
/* liste width */
/*
.e7 { width:121px; }
*/

/* Upload */
.fct1 { float:left;width:22px;float:left; }
.fct2 { float:left;text-align:center;width:105px; }
.fct3 { float:left;width:435px; }
.fct4 { width:575px; }
.ctfile { width:99%;height:22px; }
.cttitre { width:49%; }

/*************************************/
/* Inspiration: https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-deroulant/ */
.menu-liste {
  float:right;
  font-size:0.4em;
}
/* .menu-liste, */
.menu-liste ul { /* plutot mettre * {margin:0;padding:0;} */
  position:relative;
  z-index:1;
  margin:0;
  padding:0;
  list-style: none;
  border-radius: 0 0.5em 0.5em 0;
  background-color:#ff9933;
  color:#fff;
  background: url(/images/default/kit/orange2/degrade_2.jpg);background-repeat: repeat-x;
  /* padding:15px; */
  box-shadow: 0px 0.1em 0.2em #ccc;
  border-left: 0.1em #ffcc99 solid;
  border-right: 0.1em #cc6600 solid;
  border-top: 0.1em #ffcc99 solid;
  border-bottom: 0.1em #cc6600 solid;
}
.menu-liste ul li a, .menu-liste ul li a:active, .menu-liste ul li a:visited, .menu-liste ul li a:link, .menu-liste ul li a:hover {
  display:block;
  padding:0.1em;
  text-decoration:none;
  color:#ffffff;
  font-size:1em;
}
/******************/
/* FLECHE DU MENU */
/******************/
/* Source: https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ */
.menu-liste ul:first-child li a:first-child:nth-last-child(2):before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 1em solid transparent; /* 4px */
  top: 40% ;
  right: 12%;
}
/* arrow hover styling */
.menu-liste ul:first-child > li > a:first-child:nth-last-child(2):before {
  border-top-color: #aaa;
}
.menu-liste ul:first-child > li:hover > a:first-child:nth-last-child(2):before {
  border: 1em solid transparent; /* 4px */
  border-bottom-color: black;
  margin-top:-50%;
}
/*
.menu-liste ul:first-child li li > a:first-child:nth-last-child(2):before {
  border-left-color: #aaa;
  margin-top: -0.5em;
}
.menu-liste ul:first-child li li:hover > a:first-child:nth-last-child(2):before {
  border: 1em solid transparent;
  border-right-color: black;
  right: 1em;
}
*/
.menu-liste ul:first-child .menuc { /* conteneur de la fleche */
  padding:0.3em 0.8em;
  width:1em;
  height:2em;
}
/* FIN FLECHE DU MENU */
/******************/
/******************/
/* SUB MENU AVEC LES LIENS TEXTES */
/******************/
.menu-liste ul.sub li a, .menu-liste ul.sub li a:active, .menu-liste ul.sub li a:link, .menu-liste ul.sub li a:visited, .menu-liste ul.sub li a:hover {
  font-size:2.5em;
  border-top: 0.01em #ffcc99 solid;
  border-bottom: 0.01em #cc6600 solid;

}
.menu-liste ul.sub li:last-child a, .menu-liste ul.sub li:last-child a:active, .menu-liste ul.sub li:last-child a:visited, .menu-liste ul.sub li:last-child a:link, .menu-liste ul.sub li:last-child a:hover {
  border-bottom:none;
}
.sub {
  display:none;
  box-shadow: 0 0.1em 0.2em #ccc;
}
.sub div:first-child { /* premier div dans le .sub qui sert à cacher un bout du bkgd dégradé */
/*  position:absolute;
  left:0;
  top:-0.38em; *//* a revoir */
/*  background-color:#ff9933;
  width:2.6em;*/
/*  height:0.35em;*/
}
nav > ul li:hover .sub { /* ou .menu-liste > ul li:hover .sub */
  display:block;
  position:absolute;
/*  right:-11.95em; */
/*  right:-515%; */
  right:-509%;
  top:2.6em;
  z_index:1111;
}
/******************/
/* FIN SUB MENU AVEC LES LIENS TEXTES */
/******************/
/****************************************************************************************/
/* guestbook */

.guestbookoptions {
padding:3px;

  background-color:#f0fff0;


border-radius:0.5em;
margin:0 5px 0 5px;
font-size:0.7em;
}
/*
.c-hguest { background-color:#7F9FAF; }
.c-hbguest { border-left:1px #7F9FAF solid;border-right:1px #7F9FAF solid;background-color:#fff; }
.c-bhguest { border-left:1px #7F9FAF solid;border-right:1px #7F9FAF solid;background-color:#fff; }
.c-cguestb { border-left:1px #7F9FAF solid;border-right:1px #7F9FAF solid;background-color:#fff; }
.c-tguestb { border-left:1px #fff solid;border-right:1px #fff solid;background-color:#E2D5D5;color:#000; }
*/

/* liste messages */
.liste-msgs-right { width:76px;float:right;text-align:center; }
.liste-msgs-center { float:left;overflow:hidden;margin-bottom:3px;font-size:0.8em; }
.liste-msgs-left {
margin:0px;
float:left;
width:calc(100% - 88px);
border-radius:5px;
/*
border-left:1px #fff solid;
border-right:1px #fff solid;
*/
background-color:#E2D5D5;
color:#000;
border:1px #7F9FAF solid;
font-size:0.8em; /* texte message guestbook */

padding:3px;min-height:62px;
 scrollbar-width: thin;position:relative;height:62px;overflow:auto;
}
.liste-msgs-left.msg-admin { margin-left:20px;float:left;width:calc(100% - 100px); }
.liste-mgs-admin p:first-child {
  float:left;
  width:20px;
}
.liste-mgs-admin p:nth-child(2) {
  float:left;
  width: calc(100% - 96px);
}
.liste-mgs-admin p:nth-child(3) {
  float:right;
  text-align:center;
  width: 76px;
}

.d-vignette70 { width:72px;height:72px;text-align:center;padding:0;border:0 none; }

.desc { scrollbar-width: thin;position:relative;padding:3px;min-height:62px;height:62px;overflow:auto; }

/* membre site profil couleur */
/*
.c-cont2b { border-left: 1px #99ccff solid;border-right: 1px #0066ff solid;border-top: 1px #99ccff solid;border-bottom: 1px #0066ff solid; }
.c-cont2b { background-color:#6699ff;color:#fff; }
.c-cont2b .t2 { color:#fff; }
.c-cont2b a, .c-cont2b a:link, .c-cont2b a:active, .c-cont2b a:visited { color:#fff; }
*/
.c-cont2b { border-left: 1px #ffffff solid;border-right: 1px #d8d2bd solid;border-top: 1px #ffffff solid; }
.c-cont2b { background-color:#fffff0; }
.c-cont2b .t2 { color:#000; }
.c-cont2b a, .c-cont2b a:link, .c-cont2b a:active, .c-cont2b a:visited { color:#000; }
.c-cont2b hr { border-bottom: 1px #d8d2bd solid;border-top: 1px #ffffff solid; }

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

/* Membres liste */
.puce {
  width:10px;
  background-repeat: no-repeat;
  height:28px;
  background-position: 0 5px;
  background-image: url(/images/default/puces/puce.gif);
}
.date-insc { padding-top:3px; }
.m-cont { padding:3px; }

/* album photo */
.btn-cont { height:22px; } /* à virer */
/* 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:1.2em;
  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;
}
/* 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(/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 {
  font-size:10px;
  padding:0 5px;
  clear:both;
  background-color:#f0f0ff;

  margin:0.3em;

  font-size: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 {

}
.photonav {
margin-left:25px;
/*
background-image:url(/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:3.5em; /* 5em 2em */
  height:3.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 {
/*  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);
}
.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-diapo:before {
  content:"Diapo rama";
  left:11%;
}




/* photo menu select des photos de l'album */
.photoselect{
width:319px;
height:21px;padding:2px 0 0 3px;
background-image:url(http://www.yamafoto.com/images/default/album/fond_nav.gif);
background-repeat:no-repeat;
float:right;text-align:left;
}
.photoselect select {

margin-left:5px;
width:306px; /* 356 */
font-size:10px;
}

/* 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 */
.v {
  position:relative;
  float:left;text-align:center;
  width:76px;
  height:100px;
  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;
  voice-family: "\"}\"";voice-family:inherit;height:94px;
}
html>body .v { height:94px; }
.v a, .v a:active, .v a:visited {
  font-size:11px;
  text-decoration:none;
}
/*
.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;
}
*/
.v u, .v i, .v h1, .v h2, .v h3, .v h4 {
  display:block;margin:0;padding:0;
}
.v u { position:absolute;left:51px;top:-3px; }
.v u img { border:none; }
.v i { height:76px; width:76px;margin:auto;  }
/*
.v h1 { margin:0 2px;height:1px;overflow:hidden;background-color:#7f9faf; }
.v h2 { margin:0 1px;height:1px;overflow:hidden;background-color:#fff;border-left:1px #7f9faf solid;border-right:1px #7f9faf solid; }
.v div { border-left:1px #7f9faf solid;border-right:1px #7f9faf solid; }
.v .vign { text-align:left;display:block;width:72px;height:72px;background-color:#6F6F6F;border-left:1px #fff solid;border-right: 1px #dfd7cf solid; }
.v img { border:1px #fff solid; }
*/
.v h1 { margin:0 2px;height:1px;overflow:hidden;background-color:#000; }
.v h2 { margin:0 1px;height:1px;overflow:hidden;background-color:#000;border-left:1px #000 solid;border-right:1px #000 solid; }
.v div { border-left:1px #000 solid;border-right:1px #000 solid; }
.v .vign { text-align:left;display:block;width:72px;height:72px;background-color:#000;border-left:1px #000 solid;border-right: 1px #000 solid; }
.v img { border:1px #fff solid;  }
.v b {
  font-weight:normal;
  font-style: italic;
  display:block;
  width:76px;
  height:16px;
  overflow:hidden;
  color:#fff;
  font-size:10px;
  line-height:18px;
}

 /*********/
/* photo */
#waitingDiv { /* s'inscrit dans .contenttt qui est en position:relative */
position:absolute;
/*z-index:1;*/
z-index:33333333333;
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; /* #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; a retirer sinon le content passe au dessus de la nav alors que la nav doit passer au dessus quand on scrolle, indépendament des zindex à priori parce que les z-index n'y changent rien ou il n'y a pas de z-index défini */
}
#photoDiv {
}
.albumphoto {
  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;width:150px;font-weight:bold;font-size:12px;margin-right:3px;color:#000; }
.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;
}

/* membre contact / Ecrire à */
.eeecrire {
  padding:5px;
}
.eeecrire > p:nth-child(odd) {
  padding:15px 0 5px 0;
}
.eeecrire p.email {
  background-color:#fff;
  border-radius:5px;
  padding:5px;
  width:99%;
}
.eeecrire input[type=text] {
  width:100%;
}
.eeecrire textarea {
  width:100%;
  overflow:auto;font-size:12px;font-family:verdana,arial,helvetica;
}

.btn-retour, .btn-retour:active, .btn-retour:visited, .btn-retour:link {
  text-decoration:none; /* le lien apparait souligné alors qu'il devrait pas : à revoir */
/*oldbrowsers pour les vieux navigateurs:
  background-image: url(/images/default/pictos/fleche_retour.gif);
*/
}
.btn-retour:before { /* bouton retour en bas dur form pour poster un message */
  font-size:1em;
  content:"\0025C4  "; /* \2039 */
}

@media all and (min-width: 0px){ /* hack opera : sans doute deprecie a l'avenir si les nouveaux browsers reconnaissent cette propriete */
  .p-email { width:351px; }
  .i { width:351px;height:20px; }
  .texta { width:353px;height:136px; }
}

/* 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;
background-color:red;
}
.radiogroup {
  padding:0.7em 0 0 0.5em;width:37%;min-height:2em;margin-bottom:0.5em;border:1px #000 solid;border-radius:1em;
}
/* admin */
input[type=text], input[type=password], 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)
}

textarea, .texta, .texta2 {
  font-size:1rem;
  height:206px;
  resize: none;
  scrollbar-width: thin; /* https://css-tricks.com/almanac/properties/s/scrollbar-width/ */
}

 /********************************/
/* 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 */
}

/*** DEBUT SELECT BLOCK ***/
/*
idée: remplacer les liens par deux boutons
idée: remplacer all/none par deux boutons
*/
.select-block57 {
  width:17em; /* 200px */
  position:relative;
/*  margin-left:1.85em; *//* 23px; */
  margin-left:1.5em; /* testé sur : inviter_admin contacts */
  border-radius:0.4em; /* 5px; */
  color:#fff;
  background-color:#ff9933;
  background: linear-gradient(#ffcc99, #ff9933 15%, #ff9933 100%);
  border-top:1px #862f00 solid;
  border-bottom: 1px #cc6600 solid;
  border-left:1px #862f00 solid;
  border-right:1px #862f00 solid;
}
.select-block57 > p:first-child {
  padding:0.25em; /* 3px; */
}
.select-block57 > p:nth-child(2) {
/*   padding:0 3px 3px 3px; */
  padding:0 0.25em 0.25em 0.25em;
  border-radius:0.4em;/* 5px; */
  margin:0 0.15em 0.15em 0.15em; /* permet d'ajouter un pourtour orange */
  background-color:#fff0ff;
  border-left: 1px #ffffff solid;
  border-right: 1px #d8d2bd solid;
  border-bottom: 1px #d8d2bd solid;
  border-top: 1px #ffffff solid;
  background-color:#fffff0;
}
.select-block57 > p:nth-child(2) > button {
  background-color:transparent; /* transparent sinon la meme couleur que le fond */
/* avoir la meme font-family la meme font-size et le meme placement que pour les liens et la meme font-size */
  font-size:20px;
  border:none;
  cursor:pointer;
  float:left;
}
.select-block57 > p:nth-child(2) > a, .select-block57 > p:nth-child(2) > a:active, .select-block57 > p:nth-child(2) > a:visited, .select-block57 > p:nth-child(2) > a:link, .select-block57 > p:nth-child(2) > button {
  text-decoration:none; /* à déplacer dans .contenttt */
  color:#000; /* à déplacer dans .contenttt */
  padding:0.25em 0 0 2em;
  background-repeat:no-repeat;
  background-position:left top;
  height:1.4em;
  display:block;
}
.select-block57 > p:nth-child(2) > a, .select-block57 > p:nth-child(2) > button {
  background-size:contain;
  float:left;
  margin-left:13px;
}
.select-block57 > p:nth-child(2) > a:first-child {
  margin-left:0;
}
.select-block57 > p:nth-child(2) > a:last-child {  /* l'astuce c'est d'utiliser last-child pour claquer le float right car le last-child peut correspondre au a:nth-child(2) ou au a:nth-child(3), putain c'est beau! */
  float:right;
}
.select-block57.alone > p:nth-child(2) > a:last-child {
  float:left; /* annule le float right quand il y a un seul lien de manière à le caler à gauche */
}
.select-block57 > p:nth-child(2) > a.inviter, .select-block57 > p:nth-child(2) > button.inviter {
 background-image: url(/images/default/pictos/inviter.gif);
}
.select-block57 > p:nth-child(2) > a.modifier, .select-block57 > p:nth-child(2) > button.modifier {
 background-image: url(/images/default/pictos/modifier.gif);
}
.select-block57 > p:nth-child(2) > a.supprimer, .select-block57 > p:nth-child(2) > button.supprimer {
 background-image: url(/images/default/pictos/delete.gif);
}
.select-block57 > p:nth-child(2) > a.all_messages {
 background-image: url(/images/default/pictos/formulaire_transp.gif);
}
/* pointillé */
.select-block57 > p:nth-child(3) {
  position:absolute;
  left:-0.9em; /*-11px;*/
  top:1.3em; /*15px;*/
  width:0.8em; /*9px;*/
  padding:0;
  height:4.5em; /*50px;*/
 /* border-left:1px dashed grey; */
}
.select-block57 > p:nth-child(3) > a, .select-block57 > p:nth-child(4) {
  display:block;
  width:0.8em; /*9px*/
  height:1.65em; /* 20px; */
 /* border:1px dashed grey; */
  border-right:none;
}
.select-block57 > p:nth-child(4) {
  position:absolute;
 /* border:1px dashed grey; */
  border-left:none;
  right:-0.9em; /*-11px;*/
  top:1.3em;/*15px;*/
}
.select-block57 > p > a, .select-block57 > p > a:active, .select-block57 > p > a:visited, .select-block57 > p > a:link {
  color:#fff;
  text-decoration:none;
}
/* bloc à seul étage, on vire le deuxième */
.select-block57.level1 > p:nth-child(2) {
  display:none;
}
.select-block57.level1 {
  margin-top:0.4em;/*5px*/
}
.select-block57.level1 > p:nth-child(3), .select-block57.level1 > p:nth-child(4) {
  top:0.4em;/*5px;*/
}
.select-block57.level1 > p:nth-child(3) > a, .select-block57.level1 > p:nth-child(4) {
  height:1em;
}
.select-block57.albums_partage {
  margin-left:40px;
}
.select-block57.albums_list {
  width:210px;
}
.select-block57.guestbook {
  width:230px;
}
.select-block-sticky { /* A PRIORI C LE CODE AU DESSUS QU'IL FAUT REVOIR car ça ne marche pas: j'ai du refoutre le code en style="" dans le select block bordel de merde!!! a revoir */
  position:sticky;
  top:20px;
  z-index:99999999999999999999;
  margin-bottom:5px; /* A savoir: avec position:sticky le margin-top de l'élément en dessous en l'occurence la liste n'est plus pris en compte, donc pour le remplacer je suis obligé de faire un margin-bottom sur le select block */
}
/*** FIN SELECT BLOCK ***/

.alert {
  margin-top:5px;
  float:left;
  color:#fff;
  background-color:red;
  border-radius:15px;
}

.theme_alert, .theme_alert_change_cover {
  z-index:111;
  position:fixed;
  visibility:visible;
}
.theme_alert {
  font-size:12px;
  width:250px;
/*  height:15px; */
  left:50%;
  top:50%;
}
.theme_alert_change_cover {
  width:100%;
  height:85%;
  left:0;
  top:10px;
}

/* sitebook */
.liste-decors {
  padding-top:10px;
}
.liste-decors-container {
/*  position:relative; a retirer pour que la nav passe au dessus du content */
  border-radius:0 0 15px 15px;
  padding:15px;
  font-size:12px;
 /* overflow-x:clip; pour sticky */
}
.decor { /* j'ai du refoutre le style dans le tpl html car c'était foireux sans doute à cause du eeentete2 qui est à revoir et arreter d'utiliser les first-child sauf exception pour un truc qu'on utilise une seule fois */
  float:left;
  width:20%;
  text-align:center;
  margin-left:0.5em;
}
.coverdecor {
  background-size:cover;
  background-size: contain;
background-repeat: no-repeat;
  background-position:center;
}
.decor a.cover, .decor a.cover:active, .decor a.cover:visited, .decor a.cover:link {
  display:block;
  border:1px black solid;
  border-radius:5px;
  width:5em;
  height:5em;
  padding:0.5em;
  margin:0.8em auto 0.3em auto;
}
.btn-voir-site {
  font-size:24px;
}
.btn-valider { /* bouton submit */  /* peut-etre a virer car je le mets dans admin.css ou admin_nav.css ou meme form.css */
  margin-top:0.5em;
  position:sticky;
  bottom:20px;
  /* right:4%;*/
  left:80%;
  font-size:35px;
}
.btn-valider2 { /* bouton submit */  /* peut-etre a virer car je le mets dans admin.css ou admin_nav.css ou meme form.css */
  margin-top:2.5em;
  position:sticky;
  bottom:-15px;
  /* right:4%;*/
  left:50%;
  font-size:35px;
}

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

/* guestbook */
.btn-all-messages, .btn-all-messages:visited, .btn-all-messages:active, .btn-all-messages:link { /* peut-etre a deplacer dans admin.css */
  margin-right:15px; /* pas pris en compte, j'ai du le refoutre dans style="" donc à revoir et virer le style="" */
}

.btn-ecrire, .btn-ecrire:visited, .btn-ecrire:active, .btn-ecrire:link { /* peut-etre a deplacer dans admin.css */
  display:block;
  margin:15px;
  padding:40px;
}
/* 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;
}

/* titre dans l'entete admin: mes albums, mes contacts */
/*
CSS IMPORTANT:
le lien défini pour .content dans new_montmartre.css prend le dessus sur un simple "a.titre"
TOUS LES LIENS DEFINIS POUR .content a à l'intérieur de .content AURONT L'APPARENCE DE .content a INDEPENDAMENT DE LEUR CLASS CSS SAUF SI ON REDEFINIT SPECIFIQUEMENT UN LIEN POUR UN CONTENEUR A L'INTERIEUR DE .content
C PQ IL VAUDRA MIEUX REVOIR LE HTML ET LA CSS ET DEFINIR UNE CLASSE .annuaire_entete
C pq ci-dessous je suis obligé de spéficier/préciser et définir .content a.titre

SI LES LIENS SONT DEFINIS POUR UN CONTENEUR, LE DERNIER CONTENEUR PREND LE DESSUS SUR LES CLASSES CSS APPLIQUEES DIRECTEMENT AUX ANCRES.

.content a.titre, .content a.titre:active, .content a.titre:link, .content a.titre:visited  {
  color:#ffffff;text-decoration:none;
}
.content a.titre:hover {
  text-decoration:underline;
  text-shadow:none;
}
pas bon:
a.titre, a.titre:active, a.titre:link, a.titre:visited  {
  color:#ffffff;text-decoration:none;
}
*/

.message-central {
  width:50%;
  margin:auto;
}
.message-central > a, .message-central > a:active, .message-central > a:visited, .message-central > a:link {
  display:block;
  padding-left:10px;
  background-repeat: no-repeat;
  background-position: 0 5px;
  background-image: url(/images/default/puces/puce.gif);
  font-size:14px;
}

/* inviter_admin rappel */
.rappel-conteneur {
border-radius:3px;border:1px #7f9db9 solid;
}
.rappel-content {
  border-radius:3px;padding:3px;
  border-left:1px #ffffff solid;
  border-right: 1px #d8d2bd solid;
  border-bottom: 1px #d8d2bd solid;
  color:#996666;
  background: url(/images/default/kit/gris_xp_clair/degrade_2.jpg);background-repeat: repeat-x;
  background-color:#fff0ff;
}






.entete-liste {
  clear:both; /* pas besoin de clearfix */
  font-family: verdana;
  font-size:var(--entete_size);
  font-smooth: 15em;
  -webkit-font-smoothing: antialiased;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  position:relative;
  border:var(--entete_border) #1c58c3 solid;
  border-radius:5px 5px 15px 15px;
}
.entete-liste > div:nth-child(1) {
  font-size:var(--entete_titre_size);

  font-weight:bold;
  padding:var(--pseudo_padding);
  height:var(--entete_height);

  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 90%, #99ccff 90%, #99ccff 100%);
  border:var(--entete_border) #1c58c3 solid;
  color:#fff;
}
/*
.btn-continuer {
  background: url(/images/default/pictos/big_fleche_right.gif) no-repeat right top, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
  padding: 2px 20px 2px 2px;
  border-radius: 10% 90% 90% 10%;

  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size: 12px;
  font-family: verdana, arial;
  background-repeat: no-repeat;
  cursor: pointer;
}
était avant : dans le code de .btn-continuer {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  border: 1px #000000 solid;
  border-radius: 3px;

*/

input.btn-continuer {
padding-right:2em;font-size:1em;border:none;
background: url(/images/default/pictos/big_fleche_right.gif) no-repeat right top, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);

background: url(/images/default/pictos/big_fleche_right.gif) no-repeat right 3px, linear-gradient(#99ccff, #3c8eff, #6699ff, #3c8eff);

  padding: 5px 20px 5px 5px; /* on peut mettre 7px au lieu de 5px pour élargir le bouton */
/*
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
*/
  font-weight: bold;
  font-size: 12px;
  font-family: verdana, arial;
  background-repeat: no-repeat;
  cursor: pointer;
}
input.btn-continuer:active {
  transform: translateY(1px);
}


/*
IMPORTANT: bien comprendre la subtilité et l'astuce, s'aider au besoin de l'inspecteur css de firefix ou chrome:
Ici pour que les styles soient pris en compte par .btn-annuler, JE NE PEUX PAS ME CONTENTER DE METTRE:
.btn-annuler, .btn-annuler:visited, .btn-annuler:link, .btn-annuler:active {
CAR CA NE MARCHE PAS
ni:
a.btn-annuler, a.btn-annuler:visited, a.btn-annuler:link, a.btn-annuler:active {

pour les propriétés qui ont déjà été définies dans .content a {
je dois mettre:
.content a.btn-annuler, .content a.btn-annuler:visited, .content a.btn-annuler:link, .content a.btn-annuler:active {
*/
.content a.btn-annuler, .content a.btn-annuler:visited, .content a.btn-annuler:link, .content a.btn-annuler:active {
  background-image: url(/images/default/pictos/annuler.gif);
  padding: 2px 2px 2px 20px;
/*  background:transparent;
  padding:0;*/


font-size: 1.2em;
z-index: 5;
display: block;
text-decoration: none;
color: #fff;
background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  background: url(/images/default/pictos/annuler.gif) no-repeat 2px 2px, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
border-top: 1px #99ccff solid;
border-bottom: 1px #3c8eff solid;
/*
padding: 0.15em;
*/
border-radius: 15px;
margin: auto;
  margin-right: auto;
cursor: pointer;
}
/*
annuler
  height: 14px;
/*  float: none; */
/*
  background-image: url(/images/default/pictos/annuler.gif);
*/

  background: url(/images/default/pictos/annuler.gif) no-repeat 2px 2px, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
    background-image: url("/images/default/pictos/annuler.gif"), linear-gradient(rgb(255, 204, 153), rgb(253, 151, 56), rgb(253, 151, 56), rgb(253, 151, 56));


  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size: 12px;
  font-family: verdana, arial;
  background-repeat: no-repeat;
  cursor: pointer;

--------------------

html > body .btn, html > body .btn-pic-l, html > body .btn-pic-r {
  height: 14px;
  float: none;
}
btn-annuler {
  background-image: url(/images/default/pictos/annuler.gif);
}
btn-annuler {
  background: url(/images/default/pictos/annuler.gif) no-repeat 2px 2px, linear-gradient(#ffcc99, #fd9738, #fd9738, #fd9738);
    background-image: url("/images/default/pictos/annuler.gif"), linear-gradient(rgb(255, 204, 153), rgb(253, 151, 56), rgb(253, 151, 56), rgb(253, 151, 56));
}
padding: 2px 2px 2px 20px;
.btn-annuler, .btn-annuler:visited, .btn-valider, .btn-valider:visited, .btn-enregistrer, .btn-enregistrer:visited, .btn-diaporama, .btn-diaporama:visited, .btn-continuer, .btn-continuer:visited, .btn-ajoutercontacts, .btn-ajoutercontacts:visited, .btn-ok, .btn-ok:visited {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  border: 1px #000000 solid;
  border-radius: 3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size: 12px;
  font-family: verdana, arial;
  background-repeat: no-repeat;
  cursor: pointer;
}


bouton en haut
#a-contacts, #a-contacts:active, #a-contacts:visited {
  background-image: url(/images/default/cliparts/mini/25.gif);
}

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

/*
.btn-on {
  border: 1px #000 solid;
  border-radius: 5px;
  display: block;
}
*/

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

/* covers */
/* todo: si poss garder une seule classe css ci dessous et variabiliser le nom du fichier */
/* ajouter cover_ à la css, ex: cover_albums_nouveautes */
p.albums_nouveautes {
  background: url(http://127.0.0.1/images/default/cliparts/6.gif) center no-repeat, #6F6F6F;
  background-size: 90% 90%, 100%;
}
p.albums_moteur {
  background: url(http://127.0.0.1/images/default/cliparts/7.gif) center no-repeat, #6F6F6F;
  background-size: 90% 90%, 100%;
}
p.membres_liste {
  background: url(http://127.0.0.1/images/default/cliparts/membres_liste.gif) center no-repeat, #6F6F6F;
  background-size: 90% 90%, 100%;
}
p.albums_themas {
  background: url(http://127.0.0.1/images/default/cliparts/albums_themas.gif) center no-repeat, #6F6F6F;
  background-size: 90% 90%, 100%;
}
p.membre_site {
  background: url(http://127.0.0.1/images/default/cliparts/membre_site.gif) center no-repeat, #6F6F6F;
  background-size: 90% 90%, 100%;
}
p.album_prive {
  background: url(http://127.0.0.1/images/default/pictos/image_prive2.gif) center no-repeat, #6F6F6F;
  background-size: 90% 90%, 100%;
}
p.album_vide, p.album_creer, p.album_voir, p.album_editer {
  background: url(http://127.0.0.1/images/default/cliparts/1318702.svg) center no-repeat, #6F6F6F;
  background-size: 60%, 60%;
}
/* fin covers */

#descriptionCont {
  position:sticky;
/*  left:0;
  top:0; */
/*  top:-1px; */
  background-color:blue;
  /* padding: 1em;padding-top: calc(1em + 1px);*/

  height:400px;
}
#descriptionCont.isSticky{ /* pour sitebook_page textarea https://stackoverflow.com/questions/16302483/event-to-detect-when-positionsticky-is-triggered */
  zIndex:111;
  background-color:yellow;/*#fff*/
/*  top:0;
  left:0;
  width:100%;*/
  height:30%;
}
#description {
  height:100%;
  width:99%;
}


/* profil */

.entetete { /* inefficient */
  font-family: verdana;
  font-size:var(--entete_titre_size);
  border-radius:4px 4px 0 0; /* permet de lisser le border du div content */

  font-weight:bold;
  padding:var(--pseudo_padding);
  height:var(--entete_height);
}
.c-cont2b { border-left: 1px #99ccff solid;border-right: 1px #0066ff solid;border-top: 1px #99ccff solid;border-bottom: 1px #0066ff solid; }
.c-cont2, .c-cont2b, .c-cont2c, .c-cont2d { background-color:#6699ff;color:#fff; }
.c-cont2 .t2, .c-cont2b .t2 { color:#fff; }
.c-cont2 a, .c-cont2b a, .c-cont2c a, .c-cont2d a,
.c-cont2 a:link, .c-cont2 a:active, .c-cont2 a:visited,
.c-cont2b a:link, .c-cont2b a:active, .c-cont2b a:visited,
.c-cont2c a:link, .c-cont2c a:active, .c-cont2c a:visited,
.c-cont2d a:link, .c-cont2d a:active, .c-cont2d a:visited { color:#fff; }

/* fin profil */

/* nouvelle liste (enrobage de la liste) qui servira pour tout, à commencer par liste guestbook */
.abracadab > div:nth-child(1) {
  font-family: verdana;
  font-size:1.5em; /* var(--entete_titre_size) */ /* font-size titre profil */

  border-radius:4px 4px 0 0; /* permet de lisser le border du div content */
/*  background-repeat: repeat-x; */
  font-weight:bold;
  padding:var(--pseudo_padding);
  height:var(--entete_height);


  letter-spacing: .1rem;
  text-shadow: 2px 2px #000;

  clear:both; /* pas besoin de clearfix */
  /* font-size:var(--entete_size); */
  font-smooth: 15em;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);


}
.abracadab {
  border-radius:5px 5px 15px 15px;
}
.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;
}
.abracadab.cpbleu {
  border:1px #1c58c3 solid; /* var(--entete_border) à la place de 1px */
}

/* Buttons */
/***********/
/*
.button-71 {
  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;
  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;
}

.button-71: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: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);
}
*/
@media (min-width: 768px) {
  .button-71 {
    padding: 16px 48px;
  }
}

#container_photo {
  position:fixed;top:0;left:0;z-index:1111;background-color:#000;width:100%;height:100%;
}
@media only screen and (max-width: 812px) and (orientation: portrait) {
  /*
.eeentete2.cpbleu {
  width:95%;
}
*/
.formh {
  padding:0 2vh 2vh;
}
.eeentete > div:nth-child(2), .eeentete2 > div:nth-child(1), div[class^="mmmembre"] > div:nth-child(2), .ppprofil > div:nth-child(1) {
	height: 7vh;
}
.eeentete > div:nth-child(2), .eeentete2 > div:nth-child(1), div[class^="mmmembre"] > div:nth-child(2), .ppprofil > div:nth-child(1) {
	font-size: 0.9vw;/*0.72vh;*/
  padding: 3vh 0 0 1.5vh; /*2.5vh 0 0 0.7vh;*/
}
.eeentete2.compte > div:nth-child(1) {
  font-size: 0.7vw;
}
.radiogroup{
  font-size:0.5vh;
  width:50%; /* marche pas */
  background-color: #fff;
  /*color:#ced4da;*/
  border: 1px solid #ced4da;
  border-radius: .25rem;
  padding:1vh;
}
.formh p:nth-child(3n+2).radiogroup{
  font-size: 0.4vh;
}
.compte p:nth-child(3n+2).radiogroup{
  font-size: 0.35vh;
}
/* j'avais bon (mais ça marche pas) comme confirmé ici: https://stackoverflow.com/questions/306062/css3-selector-to-find-the-2nd-div-of-the-same-class */
/* j'ai essayé par tous les moyens de filtrer .formh:nth-child(2)/.formh:first-child/.contenttt:nth-child(2) > div > p:nth-child(3n+1) etc... mais ça marche pas donc j'ai rajouté la class compte propre à la seconde partie du form d'insc https://stackoverflow.com/questions/5428676/nth-child-doesnt-respond-to-class */
.compte p:nth-child(13), .compte p:nth-child(16), .compte p:nth-child(19){
font-size: 0.4vh;
}
.compte p:nth-child(22) { /* Décrire votre besoin */
	font-size: 0.45vh;
}
input[type="text"], input[type="password"], textarea, select, .c-i {
  /* display: block; */
  width: 95%;
  height: 9vw;
  padding: .375rem .75rem;
  font-size: 0.5vh;
  font-weight: 400;
  line-height: 5; /* 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;
}
.t-p {
  font-size: 0.3vh; /* texte conformité, à remplacer par s ou small */
}
.formh p:nth-child(23){
width:100%;
}
textarea {
  width:100%;
}
/*
@media only screen and (max-width: 959px) and (orientation: portrait) {
  *:not(a.catalog > h3, .bouton-suiv, .bottom, .formh p, .p-pseudo, .button-71) {
    font-size-adjust: 3;
  }
}
*/

}