@charset "UTF-8";

/*
Diverses adaptations pour ce site uniquement
Ce fichier est actif que si JCCD_V25 (donc ne devrait pas être utile de préciser body.v25 ici)
⚠️ fichier utilisé sur partie historique de JCCD (c'est pourquoi il est mis à part). A terme, pourra sûrement être fusionné avec JC-adaptations-site.css et, partie fontello, avec JC-adaptations-bootstrap-…)

rq :
  - vh : quand l'unité vh est utilisée, je mets aussi en px juste avant (qui sera alors utilisé si unité vh non reconnue)
*/
/** Couleurs via variables
*  mainColor = couleur principale : or sombre (btn, texte cliquable au survol)
*  mainColor_clair = or clair (fond cliquable au survol)
*  mainColor_sombre = or plus sombre (quand sur fond déjà  coloré)
*  rq: dans le code, j'utilise tout de même les couleurs sans variable pour les anciens navigateurs
*  Source variable CSS : https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties
*/
:root {
  --mainColor: #0095dc;
  --mainColor_clair: #d2dd0b;
  --mainColor_sombre: #0172b5;
  --colorGrisClair: #aaaaaa;  /*gris = atténuée*/
  --colorGrisSombre: #787878;  /*gris = atténuée*/
  --espacementGlobal_S: 0.25rem;
  --espacementGlobal_L: 0.6rem;
  --espacementGlobal: var(--espacementGlobal_L);
  /* 0.25rem ≈ 4px si police 15px
       0.6rem ≈ 9px si police 15px
    */

  --kdoRecentColor: 88, 65, 140;  /*violet*/
  --kdoRecentColor_tresSombre: 44, 33, 69;  /*violet très sombre*/
  
  /*couleurs liste (du plus clair au plus sombre) - 10/08/2026*/
  /*--listeColor_clair2: #F6FCF9;  /*ex: fond groupe*/
  /*--listeColor_clair1: #dff4e9;  /*ex: fond titre groupe*/
  
  /*base - ex: fond page*/
  /*--listeColor_base: #BFD4C5;*/  /*ex: fond page*/
  
  /*idem mais en HSL : HSL(137.1, 19.6%, 79%); */
  --listeColor_base_H: 137.1;  /*Hue (=teinte)*/
  --listeColor_base_S: 19.6%;  /*Saturation*/
  --listeColor_base_L: 79%;  /*Luminosité*/
  --listeColor_base: HSL(var(--listeColor_base_H), var(--listeColor_base_S), var(--listeColor_base_L));  /*ex: fond page*/ 
  /*FIN base*/
  
  /*couleurs liste (du plus clair au plus sombre) - 10/08/2026*/
  --listeColor_clair3: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) + 19%));  /*ex: survol fond groupe*/
  --listeColor_clair2: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) + 15%));  /*ex: fond groupe*/
  --listeColor_clair1: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) + 7.5%));  /*ex: fond titre groupe*/
  --listeColor_sombre1: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) - 15%));  /*ex: fond menu*/
  --listeColor_sombre2: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) - 35%));  /*ex: titre groupe */
  --listeColor_sombre3: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) - 50%));  /*ex: menu, bandeau liste cachée*/
  --listeColor_inverseBase: var(--listeColor_sombre3);  /*par défaut, sombre3 car un peu l'inverse de la couleur de base. ex : pour texte sur fond de base*/

  /*couleurs forcées : vin/violet hsl(345, 80%, 30%) - 21/10/2026*/
  --listeColor_sombre1: hsl(345, 70%, 40%);
  --listeColor_sombre2: hsl(345, 80%, 30%);  /*ex: fond titre groupe */
  --listeColor_sombre3: hsl(345, 80%, 20%);  /*ex: survol fond titre groupe */
  --listeColor_base_H: 370;  /*Hue (=teinte)*/  /*355 365 370*/
  --listeColor_base_S: 40%;  /*Saturation*/
  --listeColor_base_L: 85%;  /*Luminosité*/
  --listeColor_base: HSL(var(--listeColor_base_H), var(--listeColor_base_S), var(--listeColor_base_L));  /*ex: fond page*/
  --listeColor_clair1: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) - 10%));  /*ex: fond titre groupe : plsu le cas désormais car fond très coloré - 21/10/2026*/
  --listeColor_clair2: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) + 10%));  /*ex: fond groupe*/
  --listeColor_clair3: HSL(var(--listeColor_base_H), var(--listeColor_base_S), calc(var(--listeColor_base_L) + 14%));  /*ex: survol fond groupe*/

  /*
  background-color: rgba(var(--kdoRecentColor), 0.65);
  background-color: rgba(var(--kdoRecentColor), 0.4);
  background-color: rgba(var(--kdoRecentColor), 0.15);
  */
  /*
  --mainFont: Nunito,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
  --titleFont: AkayaKanadaka, "Times New Roman", serif ;

  --bs-body-font-family: Nunito,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" ;
  --bs-body-font-size: 1.2rem;
  */

  --boutonVertH: 100;
  --boutonVertS: 45%;
  --boutonVertL: 38%;

  --boutonOrangeH: 24;
  --boutonOrangeS: 100%;
  --boutonOrangeL: 52%;

  --boutonBrunH: 30;
  --boutonBrunS: 100%;
  --boutonBrunL: 36%;

  /*--boutonRougeH: 3;
  --boutonRougeS: 92%;
  --boutonRougeL: 29%;*/
  /*32%*/
  --boutonRougeH: 2;
  --boutonRougeS: 85%;
  --boutonRougeL: 47%;
  /*32%*/

  --boutonBleuH: 204;
  --boutonBleuS: 99%;
  --boutonBleuL: 36%;

  --boutonGrisH: 0;
  --boutonGrisS: 0%;
  --boutonGrisL: 27%;

  --boutonNoirH: 0;
  --boutonNoirS: 0%;
  --boutonNoirL: 25%;
}

/*tests couleurs */
:root {
  /* Couleurs des test :
  color: #495867 !important;
  color: #7F9183 !important;
  color: #928C6F !important;
  color: #7DAA92 !important;
  color: #b7d32a !important;
  color: #ffd700 !important;
  */

 /*valeur H-S-L couleur utilisateur n°1 (ex: bandeau titre GC)*/
  --colorUser1_H: 205;
  --colorUser1_S: 52%;
  --colorUser1_L: 28%;
/*valeur H-S-L couleur utilisateur n°2 (ex: personnage)*/
  --colorUser2_H: 41;
  --colorUser2_S: 38%;
  --colorUser2_L: 60%;
  --colorUser1: HSL( var(--colorUser1_H), var(--colorUser1_S), calc(var(--colorUser1_L) + 0%) ) ;
  --colorUser2: HSL( var(--colorUser2_H), var(--colorUser2_S), calc(var(--colorUser2_L) + 0%) ) ;

  
  /* --listeColor_sombre1: xxx;*/
  --listeColor_sombre2: #D8BA7D;  /* hsl(40, 54%, 67%) */
  --listeColor_sombre3: HSL( var(--colorUser2_H), var(--colorUser2_S), calc(var(--colorUser2_L) - 30%) ); /*comme le txt du menu pour le moment*/
  /* --listeColor_clair1: xxx; */
  --listeColor_clair2: hsl(0, 0%, 95%);  /* ex: fond lignes C normal*/
  --listeColor_clair3: hsl(0, 0%, 98%);  /*ex: fond lignes C survolé */
 
  --listeColor_inverseBase: var(--listeColor_sombre3) ; /*doit ressortir/rester lisible selon le fond*/

  /* Légende :
    - fd = fond
    - txt = texte
  */
  --couleurPageFd_RVB: 235, 227, 216 ;
      /*valeurs R-V-B permet de l'utiliser avec de la transparence via rgba( var(--couleurPageFd_RVB), 0.9) par exemple pour listeColor_menuBloc_fd */
  --couleurPageFd: rgb( var(--couleurPageFd_RVB) );
  
  --couleurTxtNoir: hsl(40, 54%, 10%);  /*≈HSL de #D8BA7D mais ici avec luminosité très très faible */

  --couleurPersonnage: var(--colorUser2);

  --listeColor_enTete_txt: var(--couleurTxtNoir);

 /*perso sans photo*/
  --listeColor_persoSansPhoto: var(--colorUser1) ;
  
  
  --listeColor_GC_bandeau_fd: var(--colorUser1);
  --listeColor_GC_bandeau_fd_survol: HSL( var(--colorUser1_H), var(--colorUser1_S), calc(var(--colorUser1_L) + 7.5%) ) ; /* + clair au survol */
  --listeColor_GC_bandeau_txt_RVB: 255,255,255 ;
  --listeColor_GC_bandeau_txt: rgba( var(--listeColor_GC_bandeau_txt_RVB) , 0.9);
  --listeColor_GC_bandeau_txt_survol: rgba( var(--listeColor_GC_bandeau_txt_RVB) , 1);
  --listeColor_GC_bandeau_txt_quiCocheQuoi: var(--listeColor_GC_bandeau_txt);

  --listeColor_pictoInfo_txt: rgb( var(--listeColor_GC_bandeau_txt_RVB) );
  --listeColor_pictoInfo_txt_enTete: var(--colorUser1);
  --listeColor_pictoInfo_opacityBase: 0.4;
  --listeColor_pictoInfo_txt_enTete_survol: var(--colorUser1);

  --listeColor_menuBloc_fd: rgba(var(--couleurPageFd_RVB), 0.9);  /*si le personnage passe en-dessous du menu, son texte reste lisible avec une légère translucidité (à voir quand motif de fond de page + imposant)*/
  --listeColor_menu_fd: var(--couleurPageFd); /*si menu etroit (pas besoin de translucidité)*/
  --listeColor_menu_fd_survol: HSL( var(--colorUser2_H), calc(var(--colorUser2_S) - 10%), calc(var(--colorUser2_L) - 10%) ) ;
  --listeColor_menu_fd_actif: HSL( var(--colorUser2_H), var(--colorUser2_S), calc(var(--colorUser2_L) - 30%) ) ;
  --listeColor_menu_picto: var(--listeColor_menu_fd_actif);
  --listeColor_menu_picto_actif: var(--couleurPageFd);
  --listeColor_menu_picto_survol: var(--listeColor_GC_bandeau_txt);
  --listeColor_menu_txt: var(--listeColor_menu_fd_actif);
  --listeColor_menu_txt_actif: var(--listeColor_menu_picto_actif);
  --listeColor_menu_txt_survol: var(--listeColor_GC_bandeau_txt);
  
 /*fenêtre popup*/
  --listeColor_popup_bandeau_fd: var(--listeColor_menu_fd_survol);
  --listeColor_popup_bandeau_txt: var(--listeColor_GC_bandeau_txt);
  --listeColor_popup_corps_fd: var(--listeColor_clair2);
  
 /*btn lambda discret*/
  --listeColor_btn_primary_user_fd: #FFF;
  --listeColor_btn_primary_user_txt: var(--colorUser1);
  --listeColor_btn_primary_user_fd_survol: var(--colorUser1);
  --listeColor_btn_primary_user_txt_survol: #FFF;
  
 /*btn d'action participer*/
  --listeColor_btn_participer_clair: HSL( var(--colorUser1_H), var(--colorUser1_S), calc(var(--colorUser1_L) + 65%) ) ;
  --listeColor_btn_participer_sombre: var(--colorUser1) ;

 /*detailC plsu ou moins atténué (atention au éventuels emojies que je ne veux pas atténuer)*/
  --listeColor_C_detail_txt : rgba(0,0,0 , 0.7) ;
  --listeColor_C_detail_txt_discret : rgba(0,0,0 , 0.6) ;
  --listeColor_C_detail_txt_tresDiscret : rgba(0,0,0 , 0.5) ;
  
 /*picto "…" d'une ligne/cadeau*/
  --listeColor_C_troisPoints: var(--couleurTxtNoir); /*HSL( var(--colorUser1_H), var(--colorUser1_S), calc(var(--colorUser1_L) + 40%) ) ;*/
  --listeColor_C_troisPoints_preSurvol: var(--colorUser1) ; /*sruvol ligne masi pas survol picto*/
  --listeColor_C_troisPoints_survol: var(--listeColor_C_troisPoints_preSurvol) ;  /*je garde même couleur que preSurvol car c'est le survol de toute la ligne qui déclenche (pas possibel de faire :hover sur ::after)*/

  /*date mise à jour ligne/cadeau*/
  --listeColor_C_dateMAJ_fd: HSL( var(--colorUser1_H), calc(var(--colorUser1_S) + -30%), calc(var(--colorUser1_L) + 50%) ) ;
  --listeColor_C_dateMAJ_txt: var(--colorUser1) ;
  
 /*picto i (info)*/
  --listeColor_picto_fd: var(--colorUser2) ;
  --listeColor_picto_i: var(--listeColor_clair3) ;
  
 /*champ bodure*/
  --listeColor_bordure: var(--colorUser2) ;

  
  --listeColor_C_URL: HSL( var(--colorUser2_H), var(--colorUser2_S), calc(var(--colorUser2_L) - 15%) ) ; /* ne pas être trop clair */

}

/*pour CSSaide (mais éviter de l'utiliser si pas v25) docn quand v25 ok, ok poru mettre dans CSSaide*/
:root {
 /*aideCompleteDebutants*/
  --colorAidePopUp_txt: var(--couleurTxtNoir) ;
  /*--colorAidePopUp_titre_fd: transparent ;*/
  --colorAidePopUp_titre_txt: var(--colorUser1) ;
  --colorAidePopUp_titre_fd_survol: var(--colorUser1) ;
  --colorAidePopUp_titre_txt_survol: #FFF ;
}


body.v25.imageDeFond::before {
  background-color: var(--couleurPageFd) !important;
}

/* script pour ajouter/enlever
document.querySelector("body").classList.add("testAvecPerso_couleur");  document.querySelector("body").classList.remove("testAvecPerso_clair");  //perso couleur
document.querySelector("body").classList.add("testAvecPerso_clair");  document.querySelector("body").classList.remove("testAvecPerso_couleur");   //perso clair
Object.assign(document.getElementById("ligne73582").dataset, { jcDispo: "1", jcCoche: "1" }); document.getElementById("lePrenomDuProprietaire").textContent = "Amélie" ;  //coche case + change prénom

*/
body.v25.imageDeFond.testAvecPerso_couleur::before,
body.v25.imageDeFond.testAvecPerso_clair::before {
  /*personnage couleur en fond*/
  background-blend-mode: initial !important;
  background-image: none !important;
  -webkit-mask: url("/images/deco/objets/deco-fille-cadeau.svg") left bottom / contain no-repeat !important;
  mask: url("/images/deco/objets/deco-fille-cadeau.svg") left bottom / contain no-repeat !important;
  /*left: -108px !important;
  bottom: 0px !important;*/
  left: -11vh !important;
  bottom: -10% !important;
  top: initial !important;
  height: 80% !important;
}

body.v25.imageDeFond.testAvecPerso_couleur::before {
  /*background-color: #FFF !important;*/
  background-color: var(--couleurPersonnage) !important;
}

body.v25.imageDeFond.testAvecPerso_clair::before {
  /*background-color: #FFF !important;*/
  background-color: var(--couleurPersonnage) !important;
}

body.v25.imageDeFond.testAvecPerso_clair {
  background-color: var(--couleurPageFd);
  /*background-color: #FFF !important;*/
}

body.v25.imageDeFond.testAvecPerso_couleur {
  background-color: var(--couleurPageFd);
  OFF_background-color: #FFF !important;
}

body.v25.titreGC_v25b .lignesGC,
body.titreGC_v25b #stickyTitreGC {
  OFF_background-color: var(--listeColor_GC_bandeau_fd);
  OFF_color: var(--listeColor_GC_bandeau_txt);
  /*background: RGB(130, 23, 50);*/
  /*!!!!!! à ajouter au cas où dégradé background : linear-gradient non reconnu*/
  /*background: linear-gradient(90deg,rgba(130, 23, 50, 1) 0%, rgba(149, 1, 24, 1) 100%);*/
  /* background: linear-gradient(90deg, var(--listeColor_sombre2) 0%, var(--listeColor_sombre1) 100%);*/
  /*degradé linéaire*/
  /*background: radial-gradient(circle, var(--listeColor_sombre1) 0%, var(--listeColor_sombre2) 100%);*/
  /*dégradé raidial (couleurs inversées pour avoir le sombre à gauche du bandeau)*/
  /*background: radial-gradient(circle, rgb(149, 1, 24) 0%, var(--listeColor_sombre2) 100%);*/
}

body.v25.titreGC_v25b .lignesGC:hover,
body.titreGC_v25b #stickyTitreGC:hover {
  OFF_background-color: var(--listeColor_GC_bandeau_fd_survol);
  OFF_color: var(--listeColor_GC_bandeau_txt_survol);
}

body.v25 .infoQuiCocheQuoi_txt {
  OFF_color: inherit;
}

  OFF_body.v25[data-jc-nom-page="liste cadeaux"] nav
, body.v25[data-jc-nom-page="liste cadeaux"].testAvecPerso_couleur nav#zoneMenu1::before
, body.v25[data-jc-nom-page="liste cadeaux"].testAvecPerso_clair nav#zoneMenu1::before
, OFF_body.v25 #zoneCompleteSaisieCode
, OFF_.zoneLienConnaissance
{
  display: none;
}

/*FIN tests couleurs*/


body,
td {
  font-size: inherit;
  /*permettra de changer taille plus facilement (en se basant alors sur la valeur du html)*/
}


body {
  background-color: var(--couleurPageFd);
  background-image: none;
}

nav#zoneMenu1 {
  background-color: rgba(0, 0, 0, 0.2);
  /*noir transparent pour voir couleur fond*/
  background-color: var(--listeColor_sombre1);
}


/* * * * * classes de BS (car BS pas installé sur JCCD) * * * * * */
.text-primary {
  color: var(--mainColor);
}

.text-secondary {
  color: var(--mainColor);
}

.d-none {
  display: none !important
}

/* * bouton BS * */
[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

.btn-primary_OFF20260818

/*, body.v25.btnsFondPastel .btn.btn-primary*/
  {
  color: #fff;
  background-color: var(--mainColor);
  /*border-color: var(--mainColor);*/
}

.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn:hover {
  color: #212529;
}

.btn-primary:hover,
.btn-success:hover {
  color: #fff;
  background-color: var(--mainColor_sombre) !important;
  border-color: var(--mainColor_sombre) !important;
}

/* * FIN bouton BS * */

/* * * * * FIN classes de BS * * * * * */




/* * * * classes de JC-adaptations-bootstrap-… * * * */

/*applique le style de base aux icones ajoutées via before/after dans onglet par exemple*/
.icon-before:before,
.icon-after:after {
  /*contenu strictemetn idem que dans fontello.css : [class^="icon-"]:before, [class*=" icon-"]:before */
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/*petit ajustement : supprime marge inutile (ex: dans onglet, il y a déjà une marge après le texte)*/
.icon-before:before {
  margin-left: 0em;
}

.icon-after:after {
  margin-right: 0em;
}




/*Icones via fontello (une autre façon d'attribuer icone sans utiliser de balise span)*/
/*attribue icone Voir à l'onglet si onglet en mode Voir,…*/
.nav-item .nav-link[data-jc-mode_entite="voir"].icon-after:after
/* et aussi si via classe uniquement (ex: devant un bouton Modifier"*/
,
.icon-before.voir:before,
.icon-after.voir:after

/*selon si placé avant ou après*/
  {
  content: '\e70a';
  /*icon-eye*/
  /*style en + ajouté via .icon-before:before, .icon-after:after */
}

/*attribue icone Edition à l'onglet si onglet en mode creer, modifier*/
.nav-item .nav-link[data-jc-mode_entite="creer"].icon-after:after,
.nav-item .nav-link[data-jc-mode_entite="modifier"].icon-after:after
/* et aussi si via classe uniquement (ex: devant un bouton Modifier"*/
,
.modifier.icon-before:before,
.modifier.icon-after:after

/*selon si placé avant ou après*/
  {
  content: '\270f';
  /*icon-pencil*/
  /*style en + ajouté via .icon-before:before, .icon-after:after */
}

/*attribue icone Imprimer à un bouton,…*/
.imprimer.icon-before:before,
.imprimer.icon-after:after

/*selon si placé avant ou après*/
  {
  /*content: '\e826'; /*icon-print*/
  content: '\f0f6';
  /*icon-doc-text*/
}

/*attribue icone supprimer à un bouton,…*/
.supprimer.icon-before:before,
.supprimer.icon-after:after

/*selon si placé avant ou après*/
  {
  content: '\f1f8';
  /*icon-trash*/
}

/* * * * FIN classes de JC-adaptations-bootstrap-… * * * */


/* btn perso */
/*
.btn.annuler {
  color: #fff;
  background-color: #3B373B;
}
.btn.annuler:hover {
  color: #fff;
  background-color: #0C0C0C !important;
  border-color: #0C0C0C !important;
}*/
.btn.modifier {
  /*background-color: #FFA921;*/
  /*border-color: #FFA921;*/
  /*color: #212529 !important;*/
}

.btn.modifier:hover {
  /*background-color: #ff6e0c !important;*/
  /*border-color: #ff6e0c !important;*/
  /*color: yellow !important;*/
  /*utile que si changé en mode non survolé*/
}

.btn.supprimer {
  /*background-color: #d31409;*/
  /*border-color: #d31409;*/
  /*color: #FFF !important;*/
}

.btn.supprimer:hover {
  /*background-color: #9e0f07 !important;*/
  /*border-color: #9e0f07 !important;*/
  /*color: yellow !important*/
  ;
  /*utile que si changé en mode non survolé*/
}

.btn.commenter {
  /*background-color: #ffed7d;*/
  /*color: #b75c00;*/
}

.btn.commenter:hover {
  /*background-color: #b75c00 !important;*/
  /*color: yellow !important;*/
}

body.v25 .btn {
  margin-left: 2px;
  margin-right: 2px;
}

body.v25 .btn:hover {
  color: #FFF !important;
}

body.v25.btnsFondNeutre .btnNouveauCom,
body.v25.btnsFondNeutre .btn

/*ex: ajouter ligne*/
  {
  background-color: #F0F0F0;
}

body.v25.btnsFondNeutre .btnNouveauCom,
body.v25.btnsFondNeutre .btn

/*ex: ajouter ligne*/
  {
  /*color:#444 !important;*/
  color: #444;
}

body.v25.btnsFondNeutre.btnsTxtCouleur /*#lesBoutons*/ .btn.modifier,
body.v25.btnsFondNeutre .btnModifierCom,
body.v25.btnsFondNeutre .btn.modifCom /*v25*/
{
  /*color:#ff6e0c !important;*/
}

body.v25.btnsFondNeutre.btnsTxtCouleur /*#lesBoutons*/ .btn.supprimer,
body.v25.btnsFondNeutre .btnSupprimerCom,
body.v25.btnsFondNeutre .btn.supprCom /*v25*/
{
  /*color:#d31409 !important;*/
}

body.v25.btnsFondNeutre.btnsTxtCouleur /*#lesBoutons*/ .btn.commenter,
body.v25.btnsFondNeutre.btnsTxtCouleur .btnNouveauCom {
  /*color:#b75c00 !important;*/
}

body.v25.btnsFondNeutre.btnsTxtCouleur /*#lesBoutons*/ .btn.participer {
  /*color:#0172b5 !important;*/
}

body.v25.btnsFondNeutre .btn:hover,
body.v25.btnsFondNeutre.btnsTxtCouleur /*#lesBoutons*/ .btn:hover /*permet de forcer si .btnsTxtCouleur*/
{
  color: #FFF
    /*!important*/
  ;
}


/*
.boutonOrange,
.boutonBrun,
.boutonRouge {
  padding: 12px 24px;
  border-radius: 8px;
  border-width: 2px;
  border-style: solid;
  font-weight: bold;
  cursor: pointer;
}*/
/*les textes*/
body.v25.btnsTxtCouleur .btn.ajouter {
  color: hsl(var(--boutonVertH), var(--boutonVertS), var(--boutonVertL)) !important;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.modifier,
body.v25.btnsTxtCouleur .btnModifierCom,
body.v25.btnsTxtCouleur .btn.modifCom {
  color: hsl(var(--boutonOrangeH), var(--boutonOrangeS), var(--boutonOrangeL)) !important;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.commenter,
body.v25.btnsTxtCouleur .btnNouveauCom,
body.v25 .compteurCom .compteur {
  color: hsl(var(--boutonBrunH), var(--boutonBrunS), var(--boutonBrunL))
    /* !important*/
  ;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.supprimer,
body.v25.btnsTxtCouleur .btnSupprimerCom,
body.v25.btnsTxtCouleur .btn.supprCom {
  color: hsl(var(--boutonRougeH), var(--boutonRougeS), var(--boutonRougeL)) !important;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.participer {
  /*color: hsl(var(--boutonBleuH), var(--boutonBleuS), var(--boutonBleuL)) !important;*/
  color: var(--listeColor_btn_participer_sombre) !important;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.archiver {
  color: hsl(var(--boutonGrisH), var(--boutonGrisS), var(--boutonGrisL)) !important;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.annuler {
  color: hsl(var(--boutonNoirH), var(--boutonNoirS), calc(var(--boutonNoirL) + 0%)) !important;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.btn-primary {
  color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 0%))
    /*!important*/
  ;
}

body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.btn-primary-user {
  color: var(--listeColor_btn_primary_user_txt);
}

body.v25.btnsTxtCouleur .ligneDeveloppable {
  color: var(--listeColor_btn_primary_user_txt);
}


/*les fonds*/
body.v25.btnsFondPastel .btn.ajouter {
  background-color: hsl(var(--boutonVertH), var(--boutonVertS), calc(var(--boutonVertL) + 47%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.modifier,
body.v25.btnsFondPastel .btnModifierCom,
body.v25.btnsFondPastel .btn.modifCom {
  background-color: hsl(var(--boutonOrangeH), var(--boutonOrangeS), calc(var(--boutonOrangeL) + 42%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.commenter,
body.v25.btnsFondPastel .btnNouveauCom {
  background-color: hsl(var(--boutonBrunH), var(--boutonBrunS), calc(var(--boutonBrunL) + 54%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.supprimer,
body.v25.btnsFondPastel .btnSupprimerCom,
body.v25.btnsFondPastel .btn.supprCom {
  background-color: hsl(var(--boutonRougeH), var(--boutonRougeS), calc(var(--boutonRougeL) + 44%
        /*62%*/
      )) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.participer {
  /*background-color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 55%) ) !important;*/
  background-color: var(--listeColor_btn_participer_clair) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.archiver {
  background-color: hsl(var(--boutonGrisH), var(--boutonGrisS), calc(var(--boutonGrisL) + 60%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.annuler {
  background-color: hsl(var(--boutonNoirH), var(--boutonNoirS), calc(var(--boutonNoirL) + 60%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.btn-primary {
  background-color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 60%))
    /*!important*/
  ;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.btn-primary-user {
  /*btn primary adapté à la couleur personnalisée (du user)*/
  /*background-color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 60%) ) /*!important*/
  background-color: var(--listeColor_btn_primary_user_fd);
}

body.v25.btnsFondPastel .ligneDeveloppable {
  background-color: var(--listeColor_clair2);
}


/*texte et fond au survol*/
body.v25.btnsFondNeutre /*#lesBoutons*/ .btn:hover {
  color: #FFF;
  background-color: hsl(var(--boutonBleuH), var(--boutonBleuS), var(--boutonBleuL)) !important;
}

body.v25.btnsFondPastel .btn.ajouter:hover,
body.v25.btnsTxtCouleur .btn.ajouter:hover /*colorise aussi le fond si btnsTxtCouleur*/
{
  color: hsl(var(--boutonVertH), var(--boutonVertS), calc(var(--boutonVertL) + 47%)) !important;
  background-color: hsl(var(--boutonVertH), var(--boutonVertS), var(--boutonVertL)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.modifier:hover,
body.v25.btnsFondPastel .btnModifierCom:hover,
body.v25.btnsFondPastel .btn.modifCom:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.modifier:hover,
body.v25.btnsTxtCouleur .btnModifierCom:hover,
body.v25.btnsTxtCouleur .btn.modifCom:hover
/*, body.v25:is(.btnsTxtCouleur , .btnsFondPastel) #lesBoutons .btn.modifier:hover*/
/*pas ok sur ancien navigateur*/
{
  color: hsl(var(--boutonOrangeH), var(--boutonOrangeS), calc(var(--boutonOrangeL) + 42%)) !important;
  background-color: hsl(var(--boutonOrangeH), var(--boutonOrangeS), var(--boutonOrangeL)) !important;
}

body.v25 .compteurCom .compteur.global {
  color: hsl(var(--boutonBrunH), var(--boutonBrunS), calc(var(--boutonBrunL) + 54%));
  /*sans important ici (car pas pour :hover)*/
  background-color: hsl(var(--boutonBrunH), var(--boutonBrunS), var(--boutonBrunL));
  /*sans important ici (car pas pour :hover)*/
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.commenter:hover,
body.v25.btnsFondPastel .btnNouveauCom:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.commenter:hover,
body.v25.btnsTxtCouleur .btnNouveauCom:hover {
  color: hsl(var(--boutonBrunH), var(--boutonBrunS), calc(var(--boutonBrunL) + 54%)) !important;
  background-color: hsl(var(--boutonBrunH), var(--boutonBrunS), var(--boutonBrunL)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.supprimer:hover,
body.v25.btnsFondPastel .btnSupprimerCom:hover,
body.v25.btnsFondPastel .btn.supprCom:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.supprimer:hover,
body.v25.btnsTxtCouleur .btnSupprimerCom:hover,
body.v25.btnsTxtCouleur .btn.supprCom:hover {
  color: hsl(var(--boutonRougeH), var(--boutonRougeS), calc(var(--boutonRougeL) + 44%/*62%*/)) !important;
  background-color: hsl(var(--boutonRougeH), var(--boutonRougeS), var(--boutonRougeL)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.participer:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.participer:hover {
  /*color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 55%) ) !important;*/
  /*background-color: hsl(var(--boutonBleuH), var(--boutonBleuS), var(--boutonBleuL)) !important;*/
  color: var(--listeColor_btn_participer_clair) !important;
  background-color: var(--listeColor_btn_participer_sombre) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.archiver:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.archiver:hover {
  color: hsl(var(--boutonGrisH), var(--boutonGrisS), calc(var(--boutonGrisL) + 60%)) !important;
  background-color: hsl(var(--boutonGrisH), var(--boutonGrisS), var(--boutonGrisL)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.annuler:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.annuler:hover {
  color: hsl(var(--boutonNoirH), var(--boutonNoirS), calc(var(--boutonNoirL) + 60%)) !important;
  background-color: hsl(var(--boutonNoirH), var(--boutonNoirS), calc(var(--boutonNoirL) + 0%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.btn-primary:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.btn-primary:hover {
  color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 60%)) !important;
  background-color: hsl(var(--boutonBleuH), var(--boutonBleuS), calc(var(--boutonBleuL) + 0%)) !important;
}

body.v25.btnsFondPastel /*#lesBoutons*/ .btn.btn-primary-user:hover,
body.v25.btnsTxtCouleur /*#lesBoutons*/ .btn.btn-primary-user:hover {
  /*color: var(--listeColor_clair2) !important;
  background-color: var(--listeColor_sombre2) !important;*/
  background-color: var(--listeColor_btn_primary_user_fd_survol)!important;
  color: var(--listeColor_btn_primary_user_txt_survol)!important;
}

body.v25.btnsFondPastel .ligneDeveloppable:hover,
body.v25.btnsTxtCouleur .ligneDeveloppable:hover {
  /*color: var(--listeColor_clair2) !important;
  background-color: var(--listeColor_sombre2) !important;*/
  background-color: var(--listeColor_btn_primary_user_fd_survol)!important;
  color: var(--listeColor_btn_primary_user_txt_survol)!important;
}


/* FIN btn perso */

/* bouton sans fond, soit un texte/picto/… dont seule sa couleur change (sans se preoccuper du fond) */
.btnSansFond.text-primary:hover,
.btnSansFond.text-primary:focus {
  color: var(--mainColor_sombre);
  cursor: pointer;
}


/* picto "i" = information (ex: dans bloc légende accueil) */
.btnInfo.btnSansFond {
  font-size: 1.3rem;
  /*je n'utilise pas de fond. C'est le picto (via police fontello) qui se colorise*/
}

.btnInfo.btnSansFond.enCoin {
  position: absolute;
  bottom: 0;
  right: 0;
  /*placé en bas à droite (le parent doit avoir position: relative*/
  padding: 15px 5px 5px 15px;
  /*augmente surface cliquable*/
}

.btnInfo.btnSansFond:hover {
  transform: scale(1.2);
  /*transform-origin: bottom right;*/
}

/*permet de montrer qu'on peut cliquer sur tout le blocBase pour afficher textInfo  */
.legende.monAccueil .blocBase:hover {
  cursor: pointer;
}

.legende.monAccueil .blocBase:hover .btnInfo.btnSansFond {
  transform: scale(1.2);
  color: var(--mainColor_sombre);
}

nav .listeMenus li {
  background-color: var(--listeColor_menu_fd);
}

nav .listeMenus li a {
  color: var(--listeColor_menu_txt);
  padding-left: 0.3rem;
}

nav .listeMenus li a.actif .pictoMenu {
  background-color: var(--listeColor_menu_picto_actif);
}

nav .listeMenus li a.actif,
nav .listeMenus li a.actif .txtMenu {
  background-color: var(--listeColor_menu_fd_actif);
  color: var(--listeColor_menu_txt_actif);
}

nav .listeMenus li a:hover /*menu survol*/
{
  background-color: var(--listeColor_menu_fd_survol);
}

nav .listeMenus li a:hover {
  /*menu survol*/
  color: var(--listeColor_menu_txt_survol);
}

/*liste des images pour chaque menu :*/
nav .listeMenus li a .pictoMenu {
  background-image: none !important;
  background-color: var(--listeColor_menu_picto);
}

nav .listeMenus li a:hover .pictoMenu {
  background-color: var(--listeColor_menu_picto_survol);
}

nav .listeMenus li.maListe a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/ma-liste.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/ma-liste.svg') center / contain no-repeat;
}

nav .listeMenus li.accueil a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/accueil.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/accueil.svg') center / contain no-repeat;
}

nav .listeMenus li.monAccueil a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/mes-connaissances.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/mes-connaissances.svg') center / contain no-repeat;
}

nav .listeMenus li.recherche a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/recherche.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/recherche.svg') center / contain no-repeat;
  -webkit-mask-size: 80%;
  mask-size: 80%;
}

nav .listeMenus li.revoir-liste a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/revoir-liste.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/revoir-liste.svg') center / contain no-repeat;
}

nav .listeMenus li.reglages a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/reglages.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/reglages.svg') center / contain no-repeat;
  -webkit-mask-size: 90%;
  mask-size: 90%;
}

nav .listeMenus li.connexion a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/connexion.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/connexion.svg') center / contain no-repeat;
}

nav .listeMenus li.deconnexion a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/deconnexion.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/deconnexion.svg') center / contain no-repeat;
}

nav .listeMenus li.inscription a .pictoMenu {
  -webkit-mask: url('/images/menu/menu-2016/inscription.svg') center / contain no-repeat;
  mask: url('/images/menu/menu-2016/inscription.svg') center / contain no-repeat;
  -webkit-mask-size: 80%;
  mask-size: 80%;
}



/*si aucun cadeau, texte directement sur le fond donc mieux vaut le contrasté avec ce dernier*/
.txtListeVide.avecInversion {
  color: var(--listeColor_inverseBase) !important;
}

/*permet d'avoir tous les texte adaptés à la couleur perso*/
.txtCliquable {
  color: var(--listeColor_btn_primary_user_txt, #0095dc);
}

.txtCliquable.discret {
  color: var(--listeColor_sombre3, rgba(0, 149, 220, 0.5));
}

body.v25.btnsFondNeutre .txtCliquable:hover {
  /* body.v25.btnsFondNeutre .btn:hover  */
  color: var(--listeColor_btn_primary_user_txt_survol, #FFF) !important;
  background-color: var(--listeColor_inverseBase, #0172b5) !important;
}

/*permet d'avoir un texte sombre ou clair selon couleur du fond (ex: À propos de… sur page liste cadeaux)*/
.txtCliquable.avecInversion {
  color: var(--listeColor_inverseBase) !important;
}
body.v25.imageDeFond.testAvecPerso_couleur .txtCliquable.avecInversion { /*que si perso bien visible (pas si fond discret) à voir comment mieux adapter*/
  background-color: var(--listeColor_menuBloc_fd);
}

.txtCliquable.avecInversion:hover {
  background-color: var(--listeColor_inverseBase) !important;
  color: var(--listeColor_base) !important;

}


/*1er test image fond colorée*/

body.v25.imageDeFond::before {
  /*si image de fond est un jpg, png,… ou svg - adapte un eu la teinte - 24/08/2026 JCCD_V25*/
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: #E6AF2E;
  background-color: #3B413C;
  background-color: #CE796B;
  background-color: #495867;
  background-color: #F3A738;
  background-color: #689689;
  background-color: #7F9183;
  background-color: #8B5FBF;
  background-color: #928C6F;
  background-color: #1E3888;
  background-color: #7DAA92;
  background-color: #3891A6;
  background-color: #F06543;
  background-color: rgb(15, 138, 107);
  background-color: #fff;
  background-color: #FAC8BD;
  background-color: #FDEBE7;
  background-color: var(--listeColor_clair3);

  background-color: var(--listeColor_base);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-position: center;
  background-position: center top;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  background-blend-mode: color;
  /*
  background-image: url("https://cdn.esahubble.org/archives/images/screen/heic0601a.jpg");
  background-image: url("/images/_testFond-003.jpg");
  background-image: url("/images/_testFond-gris.svg");
  background-image: url("/images/_testFond-010.jpg");
  background-image: url("/images/_testFond-011.jpg");
  background-image: url("/images/_testFond-012.jpg");
  background-image: url("/images/_testFond-014.jpg");
  background-image: url("/images/_testFond-015.jpg");
  background-image: url("/images/_testFond-016.jpg");
  background-image: url("/images/_testFond-017.jpg");
  background-image: url("/images/_testFond-018.jpg");
  background-image: url("/images/_testFond-019.jpg");
  background-image: url("/images/_testFond-020.jpg");
  background-image: url("/images/_testFond-021.jpg");
  background-image: url("/images/_testFond-022.jpg");
  background-image: url("/images/_testFond-023.jpg");
  background-image: url("/images/_testFond-024.jpg");
  background-image: url("/images/_testFond-009.svg");
  background-image: url("/images/_testFond-013.jpg");
  background-image: url("/images/_testFond-026b.svg");
  background-image: url("/images/_testFond-026c.svg");
  background-image: url("/images/_testFond-026d.svg");
  background-image: url("/images/_testFond-026e.svg");
  */
  background-image: url("/images/_testFond-030.svg");

  background-blend-mode: luminosity;
  background-blend-mode: color-dodge;
  background-blend-mode: hard-light;

  background-blend-mode: multiply;
  background-blend-mode: lighten;
  background-blend-mode: darken;
  background-blend-mode: color-burn;

  background-blend-mode: overlay;
  background-blend-mode: screen;
  background-blend-mode: soft-light;

  /*filter: blur(0px) opacity(100%);*/
  /*à exploiter*/
}

body.v25 nav#zoneMenu1 {
  /*meneu avec meme couelur que le fond (!!! nécessitera de faire le texte du menu en couleur inverse)*/
  background-color: var(--listeColor_base);
  background-color: initial;
  border-bottom-width: 0;
}

body.v25[data-jc-nom-page="liste cadeaux"] nav#zoneMenu1::before {
  /*deco menu que si data-jc-nom-page="liste cadeaux" */
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 12%;
  max-width: 180px;
  /*idem menu*/
  /*background-color: var(--listeColor_sombre1);*/
  background-color: var(--listeColor_inverseBase);
  -webkit-mask: url("/images/deco/objets/deco-fille-cadeau.svg") left bottom / contain no-repeat;
  mask: url("/images/deco/objets/deco-fille-cadeau.svg") left bottom / contain no-repeat;
}

body.v25 .listePremierPlan {
  /*position: relative; */
  /*car position: fixed; dans body.v25::before (finalmetn pas beosin si je met z-index > celui body.v25::before ici*/
  z-index: 2;
  /*par-dessus menu (mais pas si menu en haut)*/
}


/*2e test image fond colorée*/
/*
body.v25::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--listeColor_base);
  mix-blend-mode: hard-light;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
body.v25::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("https://cdn.esahubble.org/archives/images/screen/heic0601a.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  filter: contrast(0.65) brightness(1.05);
  z-index: 0;
  pointer-events: none;
}
*/

/* fenêtre popup v25 */
body.v25 #formZoneCadeau,
body.v25 #formZoneGroupeCadeau,
body.v25 #formZoneCaseCadeau {
  width: 96%;
  max-width: 1000px;
}

body.v25 #tableauGroupeCadeau,
body.v25 #tableauCadeau,
body.v25 #tableauPhoto,
body.v25 #tableauCaseCadeau {
  width: 100%;
  background-image: none;
  border: none;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  /*background-color: var(--listeColor_base) !important;
  background-color: var(--listeColor_sombre2) !important;*/
  background-color: var(--listeColor_popup_bandeau_fd);
  box-shadow: 0 0px 30px -10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 110px 10px rgba(0, 0, 0, 0.5);
  /* + intense */
  /*box-shadow: none;*/
}

body.v25 #tableauPhoto {
  max-width: 450px;
}

body.v25 #zoneTitreZoneCadeau,
body.v25 #zoneTitreZoneGroupeCadeau,
body.v25 #zoneTitreZCC,
body.v25 #zoneTitreZonePhoto {
  color: var(--listeColor_popup_bandeau_txt);
  font-size: 1.4rem;
  padding: 0.5rem;
  font-weight: bold;
}

body.v25 .fenetrePopup.styleZoneCadeau #zoneChoixTypeGroupe {
  color: var(--listeColor_clair2);
}

body.v25 .fenetrePopup .formZoneTD {
  padding: 1rem;
  border-radius: 0 0 14px 14px;
  background-color: var(--listeColor_popup_corps_fd);
}

/*textarea (ex: chp nomCadeau, detailCadeau) */
body.v25 .fenetrePopup textarea

/*input (ex: chp zoneLienInternetDetail) */
,
body.v25 .fenetrePopup input[type="text"] {
  background-color: #FFF;
  color: #000;
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  /*plus étroit en hauteur pour que ça semble identique visuellement, en réalité*/
  border: 2px solid var(--listeColor_bordure);
  font-size: 1.1rem;
  width: 100%;
}

body.v25 input[type="text"],
body.v25 input[type="email"],
body.v25 input[type="search"] {
  word-break: initial;
  /*il faut éviter word-break: break-word qui empêche de faire défiler le contenu du input (en cliquant et maintenant pour sélectionner vers la droite. Le défielmetn cse fait vers le bas : pas logique pour un input d'une seule ligne). - 07/10/2026*/
}

body.v25 .fenetrePopup #zoneLienInternetDetail {
  /*width: 100%;*/
}

body.v25 .fenetrePopup #zoneLienInternetDetail input[type="text"] {
  width: 100%;
  max-width: 330px;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
}

body.v25 .fenetrePopup #zoneCadeauQuelGroupe select {
  /*ex: liste choix où déplacer : listeGroupeZoneCadeau */
  font-size: 1.1rem;
  width: 100%;
  max-width: 330px;
  /*évite de débroder si écran trop étroit*/
}

body.v25 .fenetrePopup #zoneVisibiliteGC .texteDiscretGris {
  color: #787878;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.85rem;
  margin-left: 2rem;
}

body.v25 .fenetrePopup #zoneCodeASaisir {
  margin-left: 2rem;
}

body.v25 .fenetrePopup #zoneVisibiliteGC #chpCodeASaisir {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

/*adapte picto btn classique : si a aussi classe "valider", alors le picto remplacera celui de la classe modifier|ajouter|… (ex: modifier devient valider)*/
body.v25 .fenetrePopup .btn.valider.icon-before:before,
body.v25 .fenetrePopup .btn.valider.icon-after:after {
  content: '\f06d';
  /*icon-ok-circled*/
}

body.v25 .fenetrePopup .btn.annuler.icon-before:before,
body.v25 .fenetrePopup .btn.annuler.icon-after:after {
  content: '\e802';
  /*icon-cancel-circled*/
}

body.v25 .fenetrePopup .btn {
  box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.75);
  /*ex: btn modifier ressort mieux*/
}

/*pour mettre en vert le label qui suit une box coché (ex: commentaire visible par, Votre signature) */
body.v25 .fenetrePopup #zoneVisiblePar input[type="checkbox"]:checked + label.couleur_siActif
/*label en lui-même*/
,
body.v25 .fenetrePopup #zoneVisiblePar input[type="checkbox"]:checked + label .couleur_siActif

/*enfants du label*/
,
body.v25 .fenetrePopup #zoneComSignature input[type="radio"]:checked + label.couleur_siActif,
body.v25 .fenetrePopup #zoneComSignature input[type="radio"]:checked + label .couleur_siActif {
  color: rgb(0, 166, 0) !important;
  /*vert*/
  font-weight: bold;
}

body.v25 .fenetrePopup #zoneVisiblePar input[type="checkbox"]:not(:checked) + label .visible_siActif,
body.v25 .fenetrePopup #zoneComSignature input[type="radio"]:not(:checked) + label .visible_siActif,
body.v25 .fenetrePopup #zoneNomCadeauMultiLignes input[type="checkbox"]:not(:checked) ~ .texteInfo .visible_siActif,
body.v25 .fenetrePopup #zoneGroupeCochesVisibles input[type="checkbox"]:not(:checked) ~ .texteInfo.visible_siActif {
  display: none;
}

/*aspect des textes d'aide*/
#lesBoutons .texteInfo .bloc,
.styleZoneCadeau .texteInfo .bloc
/*ex: aide dans popup commentaire*/
,
.aideDebutListe .texteInfo .bloc

/*ex: info sur page liste (1er accès)*/
,
.messageGeneral .texteInfo .bloc,
.texteInfo.generique .bloc {
  /*display : inline-block;*/
  /*OFF car non visible par défaut et s'affiche selon état CSS parent*/
  /*background-color: rgba(253, 247, 233, 0.95);
  color: #666;*/
  background-color: var(--listeColor_clair2);
  color: var(--couleurTxtNoir);
  font-size: 0.95rem;
  padding: 5px 5px;
  margin-right: 15px;
  margin-top: 10px;
  border-radius: 4px;
  /*border-top-left-radius: 15px;*/
  padding-left: 2.2em;
  /*lié à margin-left de ….icon-info::before */
}

/*picto "i" (info) devant le texte*/
#lesBoutons .texteInfo .icon-info::before,
.styleZoneCadeau .texteInfo .icon-info::before
/*ex: aide dans popup commentaire*/
,
.aideDebutListe .texteInfo .icon-info::before

/*ex: info sur page liste (1er accès)*/
,
.messageGeneral .texteInfo .icon-info::before,
.texteInfo.generique .icon-info::before {
  /*background-color: #666;
  color: #FFF;*/
  background-color: var(--listeColor_picto_fd);
  color: var(--listeColor_picto_i);
  border-radius: 50px;
  padding: 3px;
  margin-left: -1.8em;
  margin-right: 0.3em;
}

.styleZoneCadeau .texteInfo .bloc,
.aideDebutListe .texteInfo .bloc

/*, .messageGeneral .texteInfo .bloc*/
/*, .texteInfo.generique .bloc*/
  {
  /*background-color: var(--listeColor_clair1);
  color: var(--listeColor_sombre2);*/
  background-color: var(--listeColor_clair3);
  color: var(--listeColor_sombre3);
}

body.v25 .fenetrePopup.styleZoneCadeau[data-jc-qui_coche_quoi="0"] .visible_siQuiCocheQuoi {
  display: none;
}

body.v25 .fenetrePopup.styleZoneCadeau[data-jc-qui_coche_quoi="1"] .visible_siPASQuiCocheQuoi {
  display: none;
}

/* FIN fenêtre popup v25 */

body.v25 .pictoInfo.icon-after:before {
  /*picto "i" par défaut*/
  content: '\e81a';
  color: var(--listeColor_pictoInfo_txt);
  opacity: var(--listeColor_pictoInfo_opacityBase);
  font-size: 1.4rem;
  margin: 0px;
}

body.v25 .fondSombre .pictoInfo.icon-after:before {
  /*picto "i" par défaut si fond sombre*/
  color: var(--listeColor_pictoInfo_txt);
}

body.v25 #decoEnTete {
  color: var(--listeColor_enTete_txt);
}

body.v25 #decoEnTete:not(.survol) .si_survol
/*élément dans en-tête  visible que si en-tête avec survol*/
,
body.v25 #decoEnTete.survol .si_NONsurvol
/*élément dans en-tête  visible que si en-tête NON survol*/
,
body.v25 #decoEnTete:not(.detailON) .si_detailON
/*élément dans en-tête visible que si en-tête avec detailON*/
,
body.v25 .listePremierPlan/*[data-jc-ma_propre_liste="0"]*/ #decoEnTete.detailON .pictoInfo.icon-after
/*masque picto "i" si déjà infos de détail de l'en-tête déjà visibles*/
,
body.v25 .zoneAvec_detailON:not(.detailON) .si_detailON,
body.v25 .zoneAvec_detailON.detailON .pictoInfo.icon-after

/*masque picto "i" si déjà infos de détail déjà visibles*/
  {
  display: none;
}

body.v25 #decoEnTete:hover {
  background-color: var(--listeColor_clair3);
  cursor: pointer;
}

body.v25 #decoEnTete.detailON {}

body.v25 #decoEnTete.survol {
  background-color: #FFF;
  box-shadow: 0 0px 30px -10px rgba(0, 0, 0, 0.2);
}

body.v25 .listePremierPlan/*[data-jc-ma_propre_liste="0"]*/ #decoEnTete .pictoInfo.icon-after {
  float: right;
  position: relative;
  top: -9px;
  right: -8px;
}

body.v25 .listePremierPlan/*[data-jc-ma_propre_liste="0"]*/ #decoEnTete .pictoInfo.icon-after:before {
  xxxdisplay: inline-block;
  content: '\e81a';
  color: var(--listeColor_pictoInfo_txt_enTete);
  opacity: var(--listeColor_pictoInfo_opacityBase);

  font-size: 1.4rem;
  margin: 2px 1px 0 0;
}


body.v25 .groupeDePetitsBlocs.marges_S .blocBase {
  padding: 0.5rem 0.5rem;
}

body.v25 .groupeDePetitsBlocs.marges_S .blocBase .btn,
body.v25 .btn.taille_S {
  padding: 0.2rem .5rem;
  line-height: 1.2;
  font-size: 0.96rem;
}

body.v25 .groupeDePetitsBlocs:not(.infoShow) .textInfo,
body.v25 .groupeDePetitsBlocs.infoShow .btnInf {
  display: none;
}

body.v25 .groupeDePetitsBlocs.zone_flex.couleur1sur1.coul02 .objet_flex .blocBase {
  background-color: var(--listeColor_clair1);
}

body.v25 .enTete .groupeDePetitsBlocs.zone_flex.couleur1sur1.coul02 .objet_flex .blocBase {
  /*que si pour en-tête liste*/
  background-color: var(--listeColor_clair2);
  /*plus clair si bloc dans entete*/
}

body.v25 .enTete .groupeDePetitsBlocs.zone_flex.couleur1sur1.coul02 .objet_flex .blocBase .btn {
  /*que si pour en-tête liste*/
  box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.75);
}

body.v25 .groupeDePetitsBlocs .txt {
  font-size: 0.96rem;
  opacity: 0.75;
}

body.v25 .groupeDePetitsBlocs.btnInfoEnValeurAuSurvolDuBloc .blocBase .btnInfo {
  /* + générique (ex: zoneActionsEnteteListe) */
  color: var(--listeColor_pictoInfo_txt_enTete);
  opacity: var(--listeColor_pictoInfo_opacityBase);
}

body.v25 .groupeDePetitsBlocs.btnInfoEnValeurAuSurvolDuBloc .blocBase:hover .btnInfo {
  /* + générique (ex: zoneActionsEnteteListe) */
  transform: scale(1.2);
  opacity: 0.75;
}
body.v25 .groupeDePetitsBlocs.btnInfoEnValeurAuSurvolDuBloc.infoShow .blocBase .btnInfo { /*si info visible (.infoShow), amsque les picto info*/
  display:none
}

  body.v25 .listePremierPlan/*[data-jc-ma_propre_liste="0"]*/ #decoEnTete .pictoInfo:hover.icon-after:before
, body.v25 .groupeDePetitsBlocs.btnInfoEnValeurAuSurvolDuBloc .blocBase/*:hover*/ .btnInfo:hover
{
  color: var(--listeColor_pictoInfo_txt_enTete_survol) !important;
  opacity: 1 !important;
}

body.v25 .messageGeneral,
body.v25 .messageGeneral .couleurAide,
body.v25 .messageGeneral .couleurAide strong {
  color: inherit;
}

body.v25 .messageGeneral label.couleurAide .attenuer {
  color: var(--listeColor_sombre1);
  /*opacity: 0.8;*/
}