@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Noto+Sans+TC&family=Oswald&family=Roboto+Condensed&family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{
font-family:'Fira Sans', sans-serif;
padding:0;
}
html, body{
height: 100svh;
min-width:400px;
}
body{
  --s: 75px;

  /* base du motif */
  --c: #1b2430;

  /* tailles */
  --_s: calc(2* var(--s)) calc(2* var(--s));
  --_g: 35.36% 35.36% at;

  /* couleur du motif (discret) */
  --_c: #0000 66%, #263241 68% 70%, #0000 72%;
/*
  background:
    radial-gradient(var(--_g) 100% 25%, var(--_c)) var(--s) var(--s) / var(--_s),
    radial-gradient(var(--_g) 0 75%,  var(--_c)) var(--s) var(--s) / var(--_s),
    radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0 / var(--_s),
    radial-gradient(var(--_g) 0 75%,  var(--_c)) 0 0 / var(--_s),
    repeating-conic-gradient(var(--c) 0 25%, #0000 0 50%) 0 0 / var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s) / 2) / var(--s) var(--s) var(--c);

  background-attachment: fixed;
*/


background: url("https://www.gf-utility.com/img/OG/fond_utility.jpg") no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover;

  margin:0;
  padding:63px 1px 0;
  
}

.boutonClass{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
  padding: 10px 12px;
}


header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,211,92,.30), transparent);
  pointer-events:none;
}

main{
margin:0 10%;	
}

#ligne_carousel{
margin: 0 5%;
} 

a.blocYgg:visited h4, a.blocYgg:visited h5, a.blocYgg:visited p { color:#fff !important; } a.blocYgg:visited .ygCta { color:#f91 !important; }

.gf-table-scroll table{
  width:100%;
  min-width:0;            /* <- indispensable */
  table-layout: fixed;    /* <- indispensable */
}

#collec td.gf-col-name,
#collec td.gf-col-name a{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}



.autels-list a:link,
.autels-list a:visited {
  color: #1a0dab;
  text-decoration: underline;
}

.autels-list a:hover,
.autels-list a:active {
  color: #1a0dab;
}



.autel-block{
  border:1px solid #555;
  border-radius:10px;
  padding:10px;
  margin-bottom:20px;
}

.item-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0;
  font-size:14px;
}

.item-line img{
  image-rendering: pixelated;
}

.classes{
  color:#aaa;
  font-size:12px;
}

.badge-new {
  display: inline-flex;              /* IMPORTANT pour mobile */
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;

  font-size: 0.65em;
  font-weight: 700;
  line-height: 1;

  color: #fff !important;
  background-color: #e63946 !important;

  border-radius: 6px;
  text-transform: uppercase;
  vertical-align: middle;
}



/* =========================
   TITRES BIENVENUE / BLOCS
   ========================= */

.bvn-title {
  font-size: 2.2em;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.40);
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}

.bvn-subtitle {
  font-size: 1.6em;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}


/* =========================
   LAYOUT PRINCIPAL (3 COLONNES)
   ========================= */

.split{
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: space-around;

  /* IMPORTANT : même hauteur de cartes */
  align-items: stretch;
  position: relative;
}


/* =========================
   BLOCS COMMUNS (CARTES)
   Objectif : rester dans un bloc + scroll interne
   ========================= */

.split .left,
.split .center,
.split .right{
  /* style glass */
  background: linear-gradient(180deg, rgba(20,26,36,0.55), rgba(20,26,36,0.40));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;

  box-shadow:
    0 14px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  /* padding + largeur mini */
  padding: 22px 24px;
  min-width: 280px;

  /* ✅ BLOCS FIXES + SCROLL INTERNE */
  height: clamp(320px, 45vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* texte */
  color: rgba(255,255,255,0.90);
}

.split .left p,
.split .center p,
.split .right p{
  color: rgba(255,255,255,0.82);
  line-height: 1.55em;
}


/* =========================
   RÉPARTITION DES COLONNES
   ========================= */

.split .left{  flex: 1.35; }

.split .center{
  flex: 1.3;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.split .right{ flex: 0.9; }


/* =========================
   CONTENU RÉCAP MAJ
   ========================= */

.split .center strong{
  display: block;
  margin-bottom: 1px;
}

.split .center p{
  margin-top: 0;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.split .center p:last-child{
  border-bottom: none;
  padding-bottom: 0;
}


/* =========================
   CONTENU COLONNE DROITE
   ========================= */

.split .right p{
  margin-bottom: 12px;
  line-height: 1.5em;
}

.split .right strong{
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.92);
}

/* Vidéos YouTube */
.split .right iframe{
  width: 100%;
  max-width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
  margin-bottom: 14px;
}

/* Séparateur léger entre sections */
.split .right .video-block{
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.split .right .video-block:last-child{
  border-bottom: none;
  margin-bottom: 0;
}

/* Option visuelle ACTU */
.split .right.highlight{
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
}


/* =========================
   RESPONSIVE (MOBILE / TABLETTE)
   Objectif : toujours en scroll, juste hauteur un peu différente
   ========================= */

/* Valeurs smartphone */
@media (max-width : 1200px) {
  :root{
    --lang-top: 12px;
    --lang-right: 30px;

    --search-top: 1px;
    --search-right: 60px;
	--search-width: 0px;
	--search-height: 0px;

    --search-w: 110px;
	--search-h: 22px;

    --searchbtn-right: 0px;
	--searchbtn-width: 31px;
	--searchbtn-height: 23px;
	
	--typo-top: 2px;
	--typo-right: -33px;
	--typo-width: 100px;
	--typo-height: 0px;
	
	--logoh-top: 0px;
	--logoh-right: -40px;
	--logoh-width: 0px;
	--logoh-height: 0px;
	
  }
  
main{
margin:0 4%;	
} 


  
#ligne_carousel{
margin: 0 2%;
} 
  
  
  #DiscordH,
  #DiscordH2{
    display: none !important;
  }
}



@media (max-width: 1099px){
	main{
	margin:0 5%;	
	}
	
	#ligne_carousel{
	margin: 0 2.5%;
	} 
  .split .left,
  .split .center,
  .split .right{
    height: clamp(280px, 55vh, 520px);
	
  }
  
}


/* =========================
   SCROLLBAR DISCRÈTE (left + center + right)
   ========================= */

.split .left::-webkit-scrollbar,
.split .center::-webkit-scrollbar,
.split .right::-webkit-scrollbar{
  width: 6px;
}

.split .left::-webkit-scrollbar-thumb,
.split .center::-webkit-scrollbar-thumb,
.split .right::-webkit-scrollbar-thumb{
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.split .left::-webkit-scrollbar-track,
.split .center::-webkit-scrollbar-track,
.split .right::-webkit-scrollbar-track{
  background: transparent;
}

.split .right .bvn-title,
.split .right h2{
  color: rgba(255,255,255,0.95);
}




.responsive-imgw {
  width: 100%;        /* Par défaut : l'image occupe toute la largeur dispo sur mobile */
  height: auto;       /* conserve les proportions */
  max-width: 100%;    /* évite de dépasser le conteneur */
  
}


.responsive-imgsprite {
  width: 100%;        /* Par défaut : l'image occupe toute la largeur dispo sur mobile */
  height: auto;       /* conserve les proportions */
  max-width: 100%;    /* évite de dépasser le conteneur */
  
}


header{
  /* === Thème === */
  --bg1: rgba(12, 14, 18, 0.92);
  --bg2: rgba(18, 21, 30, 0.92);

  display: flex;
  justify-content:space-between;
  align-items: center;


  /* === Nouveau fond (plus clean, plus premium) === */
  background:
    radial-gradient(1100px 160px at 50% 0%, rgba(255, 211, 92, 0.14), transparent 60%),
    radial-gradient(900px 240px at 15% 120%, rgba(120, 190, 255, 0.10), transparent 65%),
    linear-gradient(180deg, var(--bg1), var(--bg2)),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.035) 0 10px,
      rgba(255,255,255,0.00) 10px 22px
    );

  background-attachment: fixed;
  color:#eee;

  height:53px;
  padding:0 10px;
  margin:0 0 10px;

  /* profondeur + séparation */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-bottom: 1px solid var(--gold);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 999;
  width: 100%;
}





#burgerBtn{
position: fixed;
z-index: 8000;
}


.header-shadow{
box-shadow:0 0 10px;
}




#Logo a img{
width:50px;
}


#Logo{
margin-right:5px;
width: 56px;
}
header div ul li, #Liens_1 ul li{
clear:both;
list-style:none;
}
header div ul li{
display:inline-block;
}
#NomSite{
/*
font-family: 'Fira Sans', sans-serif !important;
font-size:20px;
margin:5px 110px 5px 70px;
min-width:230px;
text-shadow:1px 1px 2px #000;
*/
}

header div.headerG{
display: flex;
align-items: center;
width:190px;
}
header div.headerR{
min-width: 150px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right:82px;
}


#searchForm{
position:relative;
}
#Search{
min-width: 187px;
}

#inputSearch{
border:0;
border-radius:0;
position:relative;
max-width:140px;
width:140px;
}


#searchSubmit{
border: 0;
border-left: 0;
border-width: 1px;
border-radius: 0 10px 10px 0;
height: 34px;
left: -6px;
position: relative;
top: 2px;
}
#inputSearchIN{
max-width:300px;
width:300px;
}
/*
#Options{
position: absolute;
right: 5px;
top:12px;
}
*/
#Options ul{
clear:both;
}
details.choixLang{
z-index:9999;
position: relative;
}
details.choixLang summary{
background-color: #dab55c !important;
background-repeat: no-repeat !important;
background-size: 30% !important;
background-position: 3px !important;
border-radius: 5px;
color: #000 !important;
padding:5px 29px 5px 35px;
z-index:9999;
}
details.choixLang summary::after,
	details.choixLang[open] > summary:after {
right:6px;
}
details.choixLang summary.lang_ES{
background-image:url(https://www.gf-utility.com/flags/es.svg);
}
details.choixLang summary.lang_FR{
background-image:url(https://www.gf-utility.com/flags/fr.svg);
}
details.choixLang summary.lang_PT{
background-image:url(https://www.gf-utility.com/flags/pt.svg);
}
details.choixLang summary.lang_US{
background-image:url(https://www.gf-utility.com/flags/us.svg);
}
details.choixLang summary.lang_DE{
background-image:url(https://www.gf-utility.com/flags/de.svg);
}
details.choixLang summary.lang_TW{
background-image:url(https://www.gf-utility.com/flags/tw.svg);
}
details.choixLang summary.lang_CN{
background-image:url(https://www.gf-utility.com/flags/cn.svg);
}
details.choixLang summary.lang_JP{
background-image:url(https://www.gf-utility.com/flags/jp.svg);
}
details.choixLang summary.lang_IT{
background-image:url(https://www.gf-utility.com/flags/it.svg);
}
details.choixLang summary.lang_GR{
background-image:url(https://www.gf-utility.com/flags/gr.svg);
}
details.choixLang > div{
border: 2px solid #fff;
border-radius: 5px;
padding: 4px;
}
details.choixLang div div{
background-color:#fafafa;
background-repeat: no-repeat;
background-size: 31%;
background-position: 10px;
border-radius: 7px;
color:#000;
padding:0;
text-align: right;
z-index:10000;
}
details.choixLang div.lgES,
	details.choixLang div.lgFR,
	details.choixLang div.lgPT,
	details.choixLang div.lgUS,
	details.choixLang div.lgDE,
	details.choixLang div.lgTW,
	details.choixLang div.lgCN,
	details.choixLang div.lgJP,
	details.choixLang div.lgIT,
	details.choixLang div.lgGR
	{
margin-bottom:2px;
}
details.choixLang div.lgES{
background-image:url(https://www.gf-utility.com/flags/es.svg);
}
details.choixLang div.lgFR{
background-image:url(https://www.gf-utility.com/flags/fr.svg);
}
details.choixLang div.lgPT{
background-image:url(https://www.gf-utility.com/flags/pt.svg);
}
details.choixLang div.lgUS{
background-image:url(https://www.gf-utility.com/flags/us.svg);
}
details.choixLang div.lgDE{
background-image:url(https://www.gf-utility.com/flags/de.svg);
}
details.choixLang div.lgTW{
background-image:url(https://www.gf-utility.com/flags/tw.svg);
}
details.choixLang div.lgCN{
background-image:url(https://www.gf-utility.com/flags/cn.svg);
}
details.choixLang div.lgJP{
background-image:url(https://www.gf-utility.com/flags/jp.svg);
}
details.choixLang div.lgIT{
background-image:url(https://www.gf-utility.com/flags/it.svg);
}
details.choixLang div.lgGR{
background-image:url(https://www.gf-utility.com/flags/gr.svg);
}
details.choixLang input[type="submit"]{
background: none;
border:0;
color: black;
font-family:sans-serif;
font-weight:600;
letter-spacing:1px;
padding-left:40px;
}
details.choixLang div div input[type="submit"][disabled]{
border-radius:7px;
box-shadow: 0 0 10px rgb(0, 0, 0, 0.2) inset;
color:#f33;
cursor: no-drop;
}


.floatL{
float:left;
}
.clearBoth{
clear:both;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif !important;
margin-top: 0;
margin-bottom: .5rem;
font-weight: 500;
}
h1{font-size:2.3rem;}
h2{font-size:2rem;}
h3, .h3{font-size: 1.75rem;}
h4{font-size:1.5rem;}
h5{font-size:1.25rem;}
h6{font-size:1.05rem;}
h1 + h5{
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
color: rgba(50, 50, 50, 0.8);
font-style: italic;
margin-bottom: 30px;
padding-bottom: 20px;
}

.center-title {
  text-align: center;
  display: block;
  margin: 20px auto;
}

hr {
margin: 1rem 0;
color: inherit;
border: 0;
border-top: 1px solid;
opacity: .25;
}

section {
    background-color: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Compatibilité Safari */
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    padding: 18px 22px;
    margin: 10px auto;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

section:hover {
    background-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Animation d'apparition au chargement désactivée */
to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul{
list-style:none;
}

a, a:active, a:visited, a:-webkit-any-link {
color:#0ad!important;
border-bottom: 1px solid rgb(34, 153, 204, 0.2);
text-decoration: none;
text-shadow: 1px 1px 0 rgb(0, 0, 0, 0.3);
}
img, svg{
vertical-align: middle;
}

dl{
margin: 5px;
box-shadow: 0 0 28px rgb(255,255,255,0.2) inset;
padding: 10px;
}
dt{
font-weight: 700;
}
dd{
margin: 0 15px;
}

#ligne_carousel{
border:1px solid rgb(240, 190, 50, 0.75);
box-shadow:-2px -2px 7px rgba(255, 255, 255, 0.2), 0 0 15px rgb(0,0,0.1) inset;
padding:0;
height:238px;
overflow:hidden;
border-radius:10px;
}

#wb_Carousel {
margin-bottom: 2rem;
}
.wb_Carousel_block {
background-color:rgb(127, 133, 146, 0.8);
width: 450px;
left: calc((max(450px, 100%) - 450px) / 2);
position: relative;
height:238px;
}
.wb_Carousel_block::before {
content:'';
position:absolute;
top:35px;
left:0;
width: calc(var(--width, 0) * 1%);
min-width:5px;
max-width:450px;
height:5px;
border-right: 1px solid cyan;
background-color:rgb(0,100,170,0.8);
z-index:150;
}

.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
padding: 0;
margin-bottom: 0;
z-index: 12;
}

#carousel_jours {
position: absolute;
right: 10px;
top: 21px;
color: #4bf;
font-size: 10px;
}
#carousel_jours a, #carousel_jours a:active, #carousel_jours a:visited {
color: #21abeb;
}

#carousel-heading {
font-family: Impact;
font-size:2rem;
font-weight: 600;
margin: 0px 30px 0;
margin-block-start: 0;
margin-block-end: -9px;
color: rgb(59, 62, 65, 0.9);
text-shadow:-1px -1px 0 rgb(255,255,255,0.2),1px -1px 0 rgb(0,0,0,0.2);
}
.carousel-item {
background-color:rgb(59, 62, 65, 0.6);
height: 200px;
position: relative;
display: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
float: left;
width: 100%;
transition: transform .6s ease-in-out;
overflow: hidden;
}



.carousel-item {
    transition: none;
}
.carousel-item.active{
display:block;
}

.carousel-caption {
height:140px;
padding:0;
color: #fff;
text-align: center;
z-index: 10;
}
.carousel-item h3 {
position: relative;
top: 0;
margin-bottom: 30px;
margin-top: 15px;
font-size: 20px;
font-weight:500;
}
.wb_Nom span.titre {
font-size: 12px;
}
.carousel-item p {
margin-top: 3px;
margin-bottom: 5px;
font-size: 14px;
}
.carousel-item p img{
	vertical-align:middle;
}
.carousel-item p.wb_lvl {
position: absolute;
top: 24px;
right: 5px;
}
.carousel-item p.wb_time {
position: absolute;
top: 24px;
}
.wb_BoiteAuxLettres a, .wb_BoiteAuxLettres a:active, .wb_BoiteAuxLettres a:visited {
color: #21abeb;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
.carousel-control-next {
    right: 0;
}
.carousel-control-prev {
    left: 0;
}
.carousel-control-playpause {
    bottom: 0;
}





.carousel-control-next, .carousel-control-prev {
    transition: none;
}
.carousel-control-playpause {
position: absolute;
display: flex;
justify-content: center;
top: 40px;
bottom: auto;
left: 0;
border: 2px solid rgb(99,99,99,0.2);
border-radius: 10%;
background: rgb(100,100,100,0.6);
color: #fff;
padding: 0;
margin: 0;
height: 25px;
width: 30px;
opacity: 1;
box-shadow: 4px 2px 5px rgb(255,255,255,0.1) inset;
z-index: 15;
}
.carousel-control-playpause:hover {
border-color:#27c;
}
.carousel-control-next, .carousel-control-prev {
position: absolute;
top: 40px;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 15%;
padding: 0;
margin-top: 38px;
color: #fff;
text-align: center;
background: 0 0;
border: 0;
opacity: .5;
transition: opacity .15s ease;
z-index: 11;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
display: inline-block;
width: 2rem;
height: 2rem;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
pointer-events: none;
}
.carousel-control-playpause-icon {
display: inline-block;
pointer-events: none;
width:100%;
}
.carousel-control-next:hover {
box-shadow: -25px 0 50px rgb(255,255,255,0.2) inset;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev:hover {
box-shadow: 25px 0 50px rgb(255,255,255,0.2) inset;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    border-radius: 0;
}
.carousel-indicators [data-bs-target] {
}





.carousel-indicators [data-bs-target] {
    transition: none;
}
.carousel-indicators [data-bs-target] {
border: 1px solid #030405;
box-sizing: content-box;
flex: 0 1 auto;
padding: 0;
border-radius: 2px;
width: 25px;
height: 4px;
margin: 0 2px 4px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
opacity: .5;
}
.carousel-indicators .active {
border: 1px solid #39c;
height: 4px;
opacity: 1;
}
.carousel-indicators > div {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.wb-indicator-time {
display: block;
font-size: 9px;
color: #fff;
text-align: center;
}


.w150{max-width:150px !important;}

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

div.imgTxtInline{
display: flex;
align-items: flex-start;
}
div.imgTxtInline div.imgNbre{
position: relative;
padding: 0px;
text-shadow: -1px 0 rgb(0,0,0,0.9), 0 1px rgb(0,0,0,0.9), 1px 0 rgb(0,0,0,0.9), 0 -1px rgb(0,0,0,0.9);
font-weight: 600;
left: 4px;
top: 15px;
color: #fff;
}
div.imgTxtInline div.icon{
display:contents;
text-align: left;
word-wrap: break-word;
}
div.imgTxtInline div.icon img{
margin:0;
padding:0;
}
div.imgTxtInline div.text{
align-self: center !important;
flex:1;
padding-left:5px;
text-align: left !important;
word-wrap: break-word;
}

.opacity-50 {opacity: .50 !important;}
.opacity-75 {opacity: .75 !important;}

div.dt-search, div.dt-paging {
background-color: #ddd;
border: 1px solid #777;
border-radius: 5px;
padding: 4px 10px;
}
div.dt-search{
display: inline-block;
}
div.dt-paging {
display: inline-block;
}

div.dtsp-panesContainer {
background: #fff;
border: 1px solid #777;
border-radius: 5px;
float:right;
padding: 10px !important;
width:480px;
}
div.dtsp-panesContainer div.dtsp-title {
font-weight: 800;
padding:0!important;
}
div.dtsp-panesContainer div.dtsp-titleRow button{
border: 1px solid #bbc;
border-radius: 7px;
font-size: 11px;
margin: 0 2px;
padding: 3px 5px;
}
div.dtsp-columns-1, div.dtsp-columns-2 {
background: #cdcdcd;
border: 1px solid #bbb;
border-radius: 3px;
box-shadow: 0 0 10px rgb(0, 0, 0, 0.4);
margin: 0px !important;
}
div.dtsp-topRow div.dtsp-subRow1 input {
font-weight: 600;
}
div.dtsp-searchPane div.dt-container div.dt-scroll-body table{
background:transparent;
}
div.dtsp-searchPane div.dt-container div.dt-scroll-body tbody{
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}
div.dtsp-searchPane div.dt-container div.dt-scroll-body tbody tr{
margin:1px 2px;
}
div.dtsp-searchPane div.dt-container div.dt-scroll-body div.dtsp-nameCont span.dtsp-name{
margin-right:7px;
}
div.dtsp-searchPane div.dt-container div.dt-scroll-body{
height:auto !important;
}

div.dt-container .dt-paging button.dt-paging-button{
border:1px solid #aa9;
}

div.dt-container .dt-paging button.dt-paging-button.current{
background: linear-gradient(#2b7f9d 0%, #296487 100%);
border-color: #222;
border-width: 1px 2px;
color:#fff !important;
}
div.dt-container .dt-paging button.dt-paging-button.current:hover{
border-width: 1px 2px;
}

div.data-link{
margin-bottom:2px;
text-align:center;
}
div.data-link a{
font-family: 'Oswald', sans-serif !important;
background: #2777bb;
background: linear-gradient(#555, #333);
border:2px solid #333;
border-radius: 11px;
color: #bbb!important;
cursor: pointer;
margin-bottom:2px;
padding: 4px 12px;
text-shadow: 0 0 1px #000;
-webkit-appearance: button;
}
div.data-link a:hover:not(.active){
border-color:#ccc;
color:#dadada;
}
div.data-link a.active{
background: linear-gradient(#3787cb, #1767ab);
color: #fff;
}

table{
background:#313437;
border-collapse:collapse;
border:2px solid rgb(255,255,255,0.7);
color:#fff;
}
table th, table td{
border:1px solid #010203;
padding:4px 7px;
}
table th{
background:#192021;
padding:10px 15px;
}
table td{
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal !important;
}
table tr:nth-child(odd){
background:rgb(200,200,200,0.1);
}
table td{
padding:7px 10px;
}


/* =========================
   FIX DataTables colonne Icon (#collec)
   - Empêche les gros écarts à gauche selon la langue (autoWidth / align)
   ========================= */
#collec thead th:nth-child(1),
#collec tbody td:nth-child(1){
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
#collec tbody td:nth-child(1) img{
  display:block;
  margin:0 auto !important;
}


fieldset{
border: 3px dashed #9af;
margin: 15px;
padding: 10px;
box-shadow: 0 0 4px inset;
}
fieldset legend{
border:2px dashed #9af;
background-color:#fff;
margin-left:15px;
padding:3px 7px;
box-shadow: 3px 3px 10px rgb(0,0,0,0.5);
}
input[type=text] , input[type=number] {
box-sizing: border-box;
border-radius: 5px;
margin: 8px 0;
padding: 8px 15px;
}
input[type=submit] {
font-family: 'Oswald', sans-serif;
background: #2777bb;
background: linear-gradient(#3787cb, #1767ab);
color: #fff;
cursor: pointer;
border-radius: 11px;
padding: 4px 7px;
text-shadow: 0 0 1px #000;
}

.qlt0, .qlt1, .qlt2, .qlt3, .qlt4, .qlt5, .qlt6, .qlt7 {
text-shadow:
1px 1px 0 #444,
-1px 1px 0 #444,
-1px -1px 0 #444,
1px -1px 0 #444;
}
.qlt0, a.qlt0{color: #fff!important;}
.qlt1, a.qlt1{color: #aaa!important;}
.qlt2, a.qlt2{color: #3c6!important;}
.qlt3, a.qlt3{color: #39c!important;}
.qlt4, a.qlt4{color: #f93!important;}
.qlt5, a.qlt5{color: #ef6!important;}
.qlt6, a.qlt6{color: #c040c0!important;}
.qlt7, a.qlt7{color: #c33!important;}

.color0, a.color0{color:#fff !important;}
.color1, a.color1{color:#aaa !important;}
.color2, a.color2{color:#3c6 !important;}
.color3, a.color3{color:#39c !important;}
.color4, a.color4{color:#f93 !important;}
.color5, a.color5{color:#ef6 !important;}
.color6, a.color6{color:#c040c0 !important;}
.color7, a.color7{color:#c33 !important;}
.color0 , .color1 , .color2 , .color3 , .color4 , .color5 , .color6 , .color7 ,
	.carac_obj .cyan , .carac_obj .jaune , .carac_obj .rouge , .carac_obj .vert{
text-shadow:-1px -1px 0 rgb(0,0,0,0.4) , -1px 1px 0 rgb(0,0,0,0.4) , 1px 1px 0 rgb(0,0,0,0.4) , 1px -1px 0 rgb(0,0,0,0.4) ;
}
a.color0:hover, a.color1:hover, a.color2:hover, a.color3:hover, a.color4:hover, a.color5:hover, a.color6:hover, a.color7:hover {
text-decoration:underline;
}

.carac_obj{}
.carac_obj .cyan{color:#05f4e6 !important;}
.carac_obj .jaune{color:#fbf177 !important;}
.carac_obj .rouge{color:#fb7777 !important;}
.carac_obj .vert{color:#bbe477 !important;}


:root {
  --main-radius: 5px;
  --main-padding: 5px;
  --logo-data : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjI0cHgiIHk9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNTYgMjU2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPG1ldGFkYXRhPiBTdmcgVmVjdG9yIEljb25zIDogaHR0cDovL3d3dy5vbmxpbmV3ZWJmb250cy5jb20vaWNvbiA8L21ldGFkYXRhPgo8Zz48Zz48Zz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTE1LjUsMTAuMWMtMjYuMSwyLjItNDQuNCw2LjUtNjAuMywxNC4zYy04LjksNC40LTEzLjMsNy40LTE4LjQsMTIuNWMtNC42LDQuNi02LjcsNy44LTguNywxMi45TDI3LDUzdjc1LjF2NzUuMWwxLjEsMi44YzcsMTguNCwzMy4xLDMyLjcsNjkuMSwzNy45YzExLjMsMS42LDE3LjksMi4xLDMwLjksMi4xYzYuOSwwLDE1LjEtMC4zLDE4LjQtMC42YzQzLjQtNC4xLDczLjgtMTguOCw4MS42LTM5LjRsMS4xLTIuOHYtNzUuMVY1M2wtMS4yLTMuMmMtMi01LTQuMS04LjItOC43LTEyLjljLTUtNS4xLTkuNS04LjEtMTguNC0xMi41Yy0xMy43LTYuNy0zMC41LTExLjItNTAuNi0xMy40QzE0My42LDEwLjMsMTIwLjcsOS43LDExNS41LDEwLjF6IE0xMzkuMywyMGMzNi42LDEuMyw3MC4zLDE0LjYsNzguMywzMC45YzEuNCwyLjcsMS41LDMuNCwxLjUsNy4zYzAsMy42LTAuMiw0LjctMS4yLDYuOGMtMy4xLDYuNS0xMC4yLDEyLjYtMjAuOSwxNy45Yy0xMi44LDYuMy0yNywxMC4yLTQ2LjMsMTIuNmMtOS4yLDEuMi0zNi4yLDEuMi00NS40LDBDODYsOTMuMSw3MS44LDg5LjEsNTksODIuOUM0OC4zLDc3LjYsNDEuMSw3MS41LDM4LjEsNjVjLTEtMi4yLTEuMi0zLjMtMS4yLTYuOGMwLTMuOSwwLjEtNC42LDEuNS03LjNjOC4yLTE2LjcsNDEuNC0yOS40LDgwLjctMzFjNC41LTAuMiw5LjQtMC4zLDEwLjgtMC4yQzEzMS4zLDE5LjcsMTM1LjUsMTkuOSwxMzkuMywyMHogTTQ3LDg3LjRjMzEuNywxOS43LDg5LjUsMjQuOCwxMzQuNiwxMS44YzE0LjItNCwyNi40LTEwLjEsMzQuOC0xNy4ybDMuNC0yLjl2MTIuNmMwLDE0LjktMC4zLDE3LjktMi4zLDIyLjFjLTEuNywzLjctNy40LDkuNy0xMi4zLDEyLjljLTYuNyw0LjQtMTcuOSw5LjItMjguMywxMi4xYy0yOS44LDguMi02OC4yLDguMi05OCwwYy0xMC4zLTIuOS0yMS41LTcuNi0yOC4zLTEyLjFjLTQuOS0zLjItMTAuNi05LjEtMTIuMy0xMi45Yy0yLTQuMi0yLjMtNy4yLTIuMy0yMi4xVjc5LjFsMy40LDIuOUM0MS40LDgzLjUsNDQuOCw4NS45LDQ3LDg3LjR6IE0zNy44LDEyOC42YzEuMywxLjUsNy41LDYuMSwxMC44LDguMWMxNC4yLDguNCwzNC42LDE0LjMsNTguOSwxN2M3LjUsMC44LDMzLjUsMC44LDQxLDBjMjQuMy0yLjYsNDQuNy04LjUsNTguOS0xN2MzLjMtMS45LDkuNS02LjYsMTAuOC04LjFjMC41LTAuNSwxLjEtMSwxLjMtMWMwLjUsMCwwLjUsMjMuNywwLDI4LjJjLTIsMTcuMS0yOS41LDMxLjUtNjkuNSwzNi4yYy0xMCwxLjItMzMuOCwxLjItNDMuOCwwYy0zOS43LTQuNy02Ny4zLTE5LTY5LjUtMzUuOWMtMC42LTQuMS0wLjYtMjguNS0wLjEtMjguNUMzNi44LDEyNy42LDM3LjMsMTI4LjEsMzcuOCwxMjguNnogTTQxLjYsMTgwLjFjMTUuNCwxMi41LDQ0LjgsMjEuMSw3Ni44LDIyLjRjMzQuNywxLjQsNjcuNy01LDg4LjUtMTcuNGM0LjEtMi41LDUuOS0zLjgsMTEuNi04LjRsMS40LTEuMXYxMC44YzAsNS45LTAuMiwxMi0wLjUsMTMuNWMtMS40LDguNy04LjgsMTYuMi0yMi40LDIyLjljLTEyLjcsNi4zLTI2LjYsMTAtNDYuMiwxMi42Yy05LjUsMS4yLTM2LjIsMS4yLTQ1LjcsMGMtMTkuNi0yLjUtMzMuNC02LjMtNDYuMi0xMi42Yy0xMy42LTYuNy0yMS0xNC4zLTIyLjQtMjIuOWMtMC4zLTEuNS0wLjUtNy42LTAuNS0xMy41di0xMC44bDEuNCwxLjFDMzguMywxNzcuMyw0MC4xLDE3OC44LDQxLjYsMTgwLjF6Ii8+PC9nPjwvZz48L2c+Cjwvc3ZnPg==);
  --logo-menu : url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2ZXJzaW9uPScxLjEnIHg9JzI0cHgnIHk9JzI0cHgnIHZpZXdCb3g9JzAgMCAyNTYgMjU2JyBlbmFibGUtYmFja2dyb3VuZD0nbmV3IDAgMCAyNTYgMjU2Jz48Zz48Zz48Zz48cGF0aCBmaWxsPScjMDAwMDAwJyBkPSdNMTUuNSw1MC4yYy0xLjEsMC42LTIuOCwyLTMuNywzLjFjLTIuNCwzLjEtMi4zLDguMywwLDExLjNjMy40LDQuNi02LjYsNC4yLDExNi4yLDQuMmMxMjIuOCwwLDExMi44LDAuNCwxMTYuMi00LjJjMS40LTEuOCwxLjctMi44LDEuNy01LjdzLTAuMy0zLjktMS43LTUuN2MtMy40LTQuNiw2LjYtNC4yLTExNi40LTQuMkMyNyw0OS4yLDE3LjQsNDkuMywxNS41LDUwLjJ6Jy8+PHBhdGggZmlsbD0nIzAwMDAwMCcgZD0nTTE1LjUsMTE5LjJjLTEuMSwwLjYtMi44LDItMy43LDMuMWMtMi40LDMuMS0yLjMsOC4zLDAsMTEuM2MzLjQsNC42LTYuNiw0LjIsMTE2LjIsNC4yYzEyMi44LDAsMTEyLjgsMC40LDExNi4yLTQuMmMxLjQtMS44LDEuNy0yLjgsMS43LTUuN3MtMC4zLTMuOS0xLjctNS43Yy0zLjQtNC42LDYuNi00LjItMTE2LjQtNC4yQzI3LDExOC4xLDE3LjQsMTE4LjMsMTUuNSwxMTkuMnonLz48cGF0aCBmaWxsPScjMDAwMDAwJyBkPSdNMTUuNywxODhjLTUuNywyLjUtNy41LDkuOS0zLjcsMTQuOGMzLjMsNC4zLTYuMyw0LDExNi4xLDRjMTIyLjgsMCwxMTIuOCwwLjQsMTE2LjItNC4yYzEuNC0xLjgsMS43LTIuOCwxLjctNS43cy0wLjMtMy45LTEuNy01LjdjLTMuNC00LjYsNi42LTQuMi0xMTYuNC00LjJDMzcuNiwxODcuMiwxNy4yLDE4Ny4zLDE1LjcsMTg4eicvPjwvZz48L2c+PC9nPjwvc3ZnPg==");
}

body {
  font-family: "Inter", sans-serif;
}

.container {
  height: 100vh;
  font-size: 14px;
  color: #121314;
}






#sidebar{
--s: 50px;
--c: #191b22;
--_g: 35.36% 35.36% at;
--_c: #0000 66%,#20222a 68% 70%,#0000 72%;
background: 
	radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
	radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
	radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
	radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
	repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), 
	radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
background-attachment: fixed;
border-radius:0 3px 3px 0;
width:300px;
}

#sidebar ul li a,
#sidebar ul li a:visited {
    color: #0ad !important;
    text-decoration: none;
}


#sidebar ul{
list-style:none;
padding-top:1px;
min-width:255px;
max-width:270px;
}
#sidebar > ul li{
background: linear-gradient(to bottom,  rgba(86,86,86,1) 0%,rgba(70,70,70,1) 50%,rgba(27,27,27,1) 51%,rgba(54,54,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#sidebar li ul li {
    background: linear-gradient(110deg, rgba(255, 215, 130, 0.08) 0%, rgba(0, 0, 0, 0.20) 100%);
    color: #fff !important;
    padding: 0;
    position: relative;
    transition: all 0.3s ease-in-out;
}

#sidebar li ul li:hover {
    background: linear-gradient(110deg, rgba(255, 215, 130, 0.18) 0%, rgba(0, 0, 0, 0.28) 100%);
    text-shadow: 0 0 2px rgba(255, 230, 180, 0.4);
}
#sidebar ul li a, #sidebar ul li a:visited {
display:block;
padding:8px 0;
text-decoration:none;
}
#sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 8px 6px;
}

/* Icônes */
#sidebar ul li a img {
    min-width: 18px;
    margin-right: 6px;
}

/* Correction spécifique icône Déblocage des donjons */
#sidebar ul li a img[src*="dj.png"] {
    margin-left: -2px;   /* ← recentre horizontalement */
    margin-right: 3px;  /* garde l'espace texte cohérent */
}

.sidebar-logo {
    width: auto !important;
    height: auto !important;
    max-width: 40% !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}



#sidebar ul li hr{
border-color: #a7843e;
margin: 1px 5px;
}

summary{
cursor:zoom-in;
color:#fff;
padding:10px 7px;
text-shadow:1px 1px 1px rgb(0,0,0,0.7);
}

details[open] {
box-shadow:0px 0px 3px rgb(255, 255, 255, 0.2);
}
details[open] li{
padding-left:7px !important;
}
details[open] details[open] summary{
padding:10 10px 10 25px !important;
}
details[open] details[open] li{
padding:0 10px 0 17px !important;
}
details[open] details[open] details[open] summary{
padding:10 10px 10 40px !important;
}
details[open] details[open] details[open] li{
padding:0 10px 0 25px !important;
}

details[open] > summary{
background: linear-gradient(#f3eea0, #bb8b51, #bb8b51);
color:#fff;
}
details>summary {
list-style: none;
position:relative;
}
summary::-webkit-details-marker {
display: none
}

summary::after {
content: '►';
position:absolute;
right:0;
}
details[open] > summary:after {
content: '▼';
position:absolute;
right:0;
}



#menubody {
display: flex;
justify-content:flex-start;
overflow-x:hidden;
}
#menusite {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: nowrap;
}

#menudata{
display: flex;
flex-direction: column;
align-items: flex-end;
flex-wrap: nowrap;
}



#content1 {
background-color: rgba(255, 255, 255, 0.27);
border: 2px solid #fff;
border-radius: 15px;
padding: 15px;
margin: 7px;
margin-left: auto;
margin-right: auto;
}

#content2 {
background-color: rgba(255, 255, 255, 0.27);
border: 2px solid #fff;
border-radius:15px 5px 5px 15px;
height:;
padding: 15px;
margin: 7px;
margin-left: auto;
margin-right: auto;
height: 200px;
overflow-y: auto;
}

footer {
  background: #1d1926;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#selectLANG{
margin:0;
padding:0 0 0 25px;
border-radius:3px 0 0 3px;
}

#selectLANG:has(option[value="ES"]:checked) {
background-image: url(https://www.gf-utility.com/flags/es.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="FR"]:checked) {
background-image: url(https://www.gf-utility.com/flags/fr.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="PT"]:checked) {
background-image: url(https://www.gf-utility.com/flags/pt.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="US"]:checked) {
background-image: url(https://www.gf-utility.com/flags/us.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="GR"]:checked) {
background-image: url(https://www.gf-utility.com/flags/gr.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="IT"]:checked) {
background-image: url(https://www.gf-utility.com/flags/it.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="TW"]:checked) {
background-image: url(https://www.gf-utility.com/flags/tw.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="CN"]:checked) {
background-image: url(https://www.gf-utility.com/flags/cn.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="JP"]:checked) {
background-image: url(https://www.gf-utility.com/flags/jp.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}
#selectLANG:has(option[value="DE"]:checked) {
background-image: url(https://www.gf-utility.com/flags/de.svg);
background-repeat: no-repeat;
background-size: 30%;
background-position: 3px;
}

div.grpe_debloc_dj{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
button.btn_debloc_dj{
font-family: 'Oswald', sans-serif !important;
background: #2777bb;
background: linear-gradient(#9395979c, #1767ab);
border-radius: 11px;
color: #fff;
cursor: pointer;
padding:0;
margin: 7px;
width: 170px;
}
button.btn_debloc_dj a{
display:block;
padding:4px 12px;
}
button.btn_debloc_dj span.btn_debloc_dj_dj{
color: #fff;
text-shadow: 0 0 1px #000;
}
button.btn_debloc_dj span.btn_debloc_dj_nbre{
color:rgb(0,0,0,0.8);
font-style:italic;
margin-left:10px;
}


.collapse:not(.show) {
display: none;
}
.show{
display:auto;
visibility:1;
}

.alert-info{
display: flex;
align-items: center;
justify-content: flex-start;
background: #cef3fc;
border:1px solid #9fe9f9;
border-radius: 10px;
color:#075060;
padding: 15px;
}
.alert-primary {
display: flex;
align-items: center;
justify-content: flex-start;
background:#cfe1ff;
border:1px solid #9ec7fe;
border-radius: 10px;
color:#072c65;
padding: 15px;
}
.alert-danger {
display: flex;
align-items: center;
justify-content: flex-start;
background: #f8d7da;
border:1px solid #f1aeb5;
border-radius: 10px;
color:#58151c;
padding: 15px;
}
.alert-warning {
display: flex;
align-items: center;
justify-content: flex-start;
background: #fff3cd;
border:1px solid #ffeeba;
border-radius: 10px;
color:#856404;
padding: 15px;
}
.alert-success {
display: flex;
align-items: center;
justify-content: flex-start;
background: #d4edda;
border:1px solid #c3e6cb;
border-radius: 10px;
color:#155724;
padding: 15px;
}
.alert-danger > svg, .alert-warning > svg, .alert-primary > svg, .alert-info > svg .alert-success > svg{
min-width: fit-content;
}
.alert-danger > div, .alert-warning > div, .alert-primary > div, .alert-info > div, .alert-success > div{
margin-left:20px;
}




footer{
background:#000;
box-shadow: 0 0px 15px;
margin:27px 0 0;
padding:0 5px;
}
footer *{
color:#fcfdff;
text-shadow:0 0 1px #000;
font-size:12px;
}
footer .row {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
footer .containerF{
}
footer .foot{
background:rgb(200,210,250,0.1);
box-sizing: border-box;
box-shadow:0 0 5px rgb(225,235,250,0.15) inset;
border-radius:10px;
margin:5px;
padding:10px;
min-width: 205px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: normal;
justify-content: flexflex-start;
align-items: stretch;
flex: 1 2 250px;
max-width:380px;
}
footer h3{
font-size:16px;
}
footer h4{
font-size:14px;
color:#aaa;
}
footer ul.gvg{
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul.gvg li{
padding: 0 0 0 2em;
box-shadow: 0 0 10px rgb(20,21,25,0.9) inset;
background: rgb(100,120,150,0.1);
border-radius: 15px;
}
footer ul.gvg li p{
text-align:right;
padding-right:2em;
margin:0;
}
p.copyright{
text-align:center;
margin-bottom:0;
}

div:has(> button.btn.btn-dark){
background:rgb(0,0,0,0.1);
border:2px solid #505356;
border-radius:10px;
padding:18px 10px 5px;
position:relative;
}
.btn.btn-dark{
border-radius:5px 20px;
float: right;
font-size: 35px;
line-height: 26px;
padding:2px 5px !important;
position: absolute;
top: -8px;
right: -7px;
left: auto;
}

div.dataTables_paginate ul.pagination{
display: flex;
background: rgb(0, 0, 0, 0.1);
border-radius: 3px;
border: 1px dotted #333;
padding: 5px;
list-style:none;
}
div.dataTables_paginate ul.pagination li{
background: linear-gradient(#e2d1c3 0%, #f3f2f1 100%);
border: 1px solid #777;
border-radius: 7px;
margin:1px;
padding: 3px 7px;
}
div.dataTables_paginate ul.pagination li.active{
background: linear-gradient(#2b7f9d 0%, #296487 100%);
border-color: #222;
border-width:1px 2px;
padding: 3px 10px;
}
div.dataTables_paginate ul.pagination li.active a{
color:#fff;
}
div.dataTables_paginate ul.pagination li.disabled{
background: linear-gradient(#999 0%, #777 100%);
border-color: #555;
}
div.dataTables_paginate ul.pagination li.disabled a{
color:#ccc;
}
table.dataTable>tbody>tr:not(.selected)>* {
background: linear-gradient(#3e3e3f 0%, #212223 100%);
}
table.dataTable>tbody>tr.selected>* {
background: linear-gradient(#2b7f9d 0%, #296487 100%);
box-shadow:none!important;
color:#fcfdfe!important;
border: 1px solid #afbfcf;
border-radius: 10px;
}

.div_mission > div{
background: #999a9d;
border: 2px solid #333;
border-top: 0;
border-radius: 0 0 10px 10px;
padding: 7px;
margin-bottom: 5px;
}




/* =========================
   RESPONSIVE MOBILE
   ========================= */


@media (max-width: 900px) {

main{
margin: 0;	
}

#ligne_carousel{
margin: 0;
} 

main section{
padding:5px 2px;
}



  /* Passage en colonne */
.split {
flex-direction: column;
gap: 20px;
flex-wrap: wrap;
}

  /* Tous les blocs pleine largeur */
  .split .left,
  .split .center,
  .split .right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
  }

  /* Bloc récap MAJ (scroll interne) */
  .split .center {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Bloc Guide online (moins massif visuellement) */
  .split .right {
    max-height: 360px;
    overflow-y: auto;
  }

  /* Vidéos YouTube responsives */
  .split .right iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }

  /* Badge NEW bien visible sur mobile */
  .badge-new {
    display: inline-block;
    font-size: 0.7em;
    padding: 3px 7px;
    margin-left: 6px;
    border-radius: 6px;
    background: #e53935;
    color: #fff;
    font-weight: 700;
    vertical-align: middle;
  }
}


@media (min-width: 768px) {
  .responsive-imgsprite {
    width: 100%;       /* Sur PC : très grand (presque toute la largeur) */
    max-width: 1000px; /* limite max en pixels (tu peux ajuster selon tes besoins) */
  }
  .responsive-imgw {
    width: 100%;       /* Sur PC : très grand (presque toute la largeur) */
    max-width: 1000px; /* limite max en pixels (tu peux ajuster selon tes besoins) */
  }
}







	
:root{
	
  --lang-top: 12px;
  --lang-right: 26px;
  --search-top: 0px;
  --search-right: 77px;
  --search-w: 135px;
  --search-h: 26px;
  --searchbtn-top: 2px;
  --searchbtn-right: 0px;
  --searchbtn-height: 26px;
  --searchbtn-width: 31px;
  --discord-top: 2px;
  --discord-right: 87px;
  --typo-top: 2px;
  --typo-right: -28px;
  --logoh-top: 0px;
  --logoh-right: -35px;
  --logoh-width: 0px;
  --logoh-height: 0px;
   
  
}


#LogoH{
  position: relative;
  top: var(--logoh-top);
  right: var(--logoh-right);
  width: var(--logoh-width);
  height: var(--logoh-height);
}


#typo{
  position: relative;
  top: var(--typo-top);
  right: var(--typo-right);
  width:  var(--typo-width);
  height: var(--typo-height);
}
	

/* =========================================================
   BOUTON LANGUE (summary:lang_FR)
   ========================================================= */

#Options{
  position: absolute;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}
   
/*
summary#lang_FR,
summary.lang_FR,
#lang_FR{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_ES,
summary.lang_ES,
#lang_ES{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_US,
summary.lang_US,
#lang_US{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_PT,
summary.lang_PT,
#lang_PT{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_CN,
summary.lang_CN,
#lang_CN{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_TW,
summary.lang_TW,
#lang_TW{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_JP,
summary.lang_JP,
#lang_JP{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_DE,
summary.lang_DE,
#lang_DE{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_IT,
summary.lang_IT,
#lang_IT{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}

summary#lang_GR,
summary.lang_GR,
#lang_GR{
  position: relative;
  top: var(--lang-top);
  right: var(--lang-right);
  z-index: 50;
}
*/
/* =========================================================
   RECHERCHE (bloc + input)
   ========================================================= */
#Search{
  position: relative;
  top: var(--search-top);
  right: var(--search-right);
  z-index: 40;
}

#inputSearch{
  width: var(--search-w);
  max-width: var(--search-w);
  height: var(--search-h);
  
}

/* Bouton loupe (selon ton id exact) */

#searchSubmit{
  position: relative;
  right: var(--searchbtn-right);
  width: var(--searchbtn-width);
  height: var(--searchbtn-height);
  padding: 0;
}

/* =========================================================
   DISCORD
   ========================================================= */
#DiscordH{
display:inline-block;
  position: relative;
  top: var(--discord-top);
  right: var(--discord-right);
  z-index: 50;
}
	
	
	
#sidebar{
width:auto;
}

header div.headerR {
padding-right:5px;
}



/* au cas où ton <a> a un style global */
a{
  text-decoration:none;
}

a:focus,
a:active{
  outline: none;
  box-shadow: none;
}

/* iOS/Android : surbrillance au tap */
a{
  -webkit-tap-highlight-color: transparent;
}
	  

  /* highlight bleu au tap (mobile) */
  a{
    -webkit-tap-highlight-color: transparent;
  }
}