@font-face {
  font-family: 'Roboto';
  src: url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'RobotoBlack';
  src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



body                {   padding:0px;margin:0px; font-family: 'Roboto', sans-serif; color :#888; overflow-y: scroll; font-size: 1.1em;  }

#cookie-banner      {  position: fixed;  bottom: 0;  left: 0;  opacity:0.8;  width: 100%;  background-color: blue;  color: white;
                       border-top:2px solid #FFF;  padding: 5px;  text-align: center;  display:none; z-index:1000000;}


/* ---------------------------------------------------------------------------------- */
/* Menu et sous menus */
/* ---------------------------------------------------------------------------------- */
.submenu            {  display: none;  position: absolute;  top: 100%;  left: 0;  z-index: 99999998;  background-color: #333;  padding: 0;  margin: 0;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);  border:1px solid #555;  border-radius:3px;  white-space: nowrap; }
.submenu.show       {  display: block; }
.submenu li         {  list-style: none;}
.submenu a          {  display: block;  font-size: 0.9em;  order-top: 1px dashed #CCD;  padding: 1px;  z-index: 99999999;  text-decoration: none;  color: #FFF;}
.submenu a:hover    {  background-color: #46C;  color:#FFF !important;  border-radius:3px;}
.nav-item           {  position: relative; }
.subsubmenu         {  display: none;  position: absolute;  top: 0;  left: 100%;  z-index: 99999999;  background-color: #333;  padding: 0;  margin: 0;  border:1px solid #555;  border-radius:3px;  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);}
.subsubmenu.show    {  display: block;}
.subsubmenu li      {  list-style: none;  position: relative;}
.subsubmenu a       {  display: block;  padding: 1px;  text-decoration: none;  color: #333;  border-radius:3px;}
.subsubmenu a:hover {  background-color: #46C;  color:#FFF !important;}
.navbar-nav a:hover {  background-color: #46C;  color:#FFF !important;  border-radius:3px;    }
.bg-dark            {  background-color: rgba(52, 58, 64, 0.0) !important;  background: linear-gradient(rgba(32, 38, 44, 0.9), rgba(32, 38, 44, 0.7) 20px,rgba(12, 58, 84, 0.4) 45px, rgba(52, 58, 64, 0) 55px);    color:#FF0 !important;}
.navbar-opacity     {  z-index:1000; }
.nav-link           {  color:#DDF !important;    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.6);}
.fixed-menu         {  position: fixed;  top: 0;  left: 0;  width: 100%;  z-index: 999999; }
.li_search_txtbox   { float:right; right:40px; position:absolute; width:20%;}
.search_txtbox::placeholder {  color: #FFF ; }
.search_icon        { float:right; right:15px; width:20px;position:absolute; margin-top:5px; cursor:pointer;}

#share-dialog       { display:none; min-width:300px; overflow-x:hidden;}
.share-dialog-image-carousel { width:90% !important;left:5% !important;}
#share-icon         { cursor:pointer;}
.share-link         { cursor:pointer; text-decoration:underline;}
.ui-dialog-titlebar-close { background-image: url("../images/croix.gif");  background-size: 16px 16px;   background-position: center;  
                            background-repeat: no-repeat;  width: 16px;   height: 16px; }
.ui-dialog          { z-index:1000000 !important;}
.custom-dialog      { display: none;  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  background-color: white;
                      padding: 20px;  text-align: center;  color: black;  border: 1px solid #ccc;}


@media (max-width: 991px) 
{
  .nav-item {background-color: #333; padding-left: 15px; }
  .submenu {position: relative; display:block !important; top:0 !important;}
  .subsubmenu {position: relative; display:none !important; top:0 !important;}
  .li_search_txtbox   { float:right; right:60px; position:absolute; width:40%; opacity:0; }
  .search_icon        { float:right; right:39px; position:absolute; margin-top:10px; cursor:pointer;  opacity: 0;  }
}

/* ---------------------------------------------------------------------------------- */
/* grosse bannière home avec slogans */
/* ---------------------------------------------------------------------------------- */
@media (orientation: portrait) {
.image-container         {  position: relative;  width: 100%;  padding-top: min(650px,120vw);  overflow: hidden;  background-size: cover;  background-position: 0px -150px;  opacity:0;}
}
@media (orientation: landscape) {
  .image-container         {  position: relative;  width: 100%;  padding-top: calc(100%/3.2);  overflow: hidden;  background-size: cover;  background-position: 0px -150px;  opacity:0;}
  }
  
.image-container div     {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-size: cover;  background-position: center center;  opacity: 1;  transition: opacity 0.5s ease;}
.iage-container::before {  content: "";  display: block;  ; /* Même valeur que le ratio pour garder l'aspect visuel */}
.out-image-container     {  margin-top: 30px;position: relative;  overflow: hidden;  top:-60px;}
.overlay                 {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(50, 100, 155, 0.3);}
#canvas                  {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  object-fit: cover;  object-position: 0 0; border:0px solid #00FF00;}
#text_slogan             {  font-family: 'RobotoBlack', sans-serif; text-transform:capitalize;   position: absolute;  z-index: 100000;  border: 3px solid #FFF;  border-radius: 30px;  padding-left: 30px;  padding-right: 30px;
                            padding-top: 10px;  padding-bottom: 10px;  font-weight: bold;  color: white;  font-size: calc(2vw + 10px);   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
                            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  opacity: 0.3; }
#en_savoir_plus          {  font-family: 'RobotoBlack', sans-serif; position: absolute;  bottom: 90px;  right: 10px;  font-size: calc(1vw + 15px);  color: #FFF;  background-color: #486;  opacity: 0.7;  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
                            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  font-weight: bold;  border: 3px solid #FFF;  border-radius: 30px 0 30px 00px;  padding: 10px;  z-index: 100010;  cursor:pointer;}
#titre_onglet            {  position: absolute;  top: 50px;  left: 40px;   z-index: 100;  font-size:calc(6vw + 10px);  
                            font-weight: bold;  color:#DDF;  text-shadow: 5px 5px 14px rgba(0, 0, 0, 0.8);  
                            opacity:0.4; cursor:pointer; transition: color 200ms, opacity 200ms, text-shadow 200ms; }
#titre_onglet:hover      {  opacity : 0.7;color: rgb(69, 248, 245);text-shadow: 5px 5px 10px rgba(21, 21, 24, 0.8);}

.sub_savoir              {  font-size: calc(1vw + 4px);}
.image-current           {  z-index: 2;}
.image-next              {  z-index: 1001;  opacity: 0;}
.content_sphere          {  z-index: 100000; position: absolute; top:10px; right:calc(100% / 10); }
.tagcloud                {  z-index: 100000;    margin: auto;    width: 50%;    cursor:pointer;    letter-spacing: -1px;   font-weight: bold;    text-align: center;    
                            font-size: calc(0.87vw);  color: #CCffff;    
                            text-shadow: 2px 2px 4px rgba(0, 0, 200, 0.8); cursor: pointer;  
                            transition: color 200ms, text-shadow 200ms, font-size 200ms, margin-left 200ms,margin-top 200ms;   }
.tagcloud--item          {  transition: all .2s ease;  }
.tagcloud--item:hover    {  color: #FFF; padding:3px;  opacity:1 !important;font-size: calc(0.97vw);    padding:15px; margin-left:-15px;margin-top:-15px;
                            text-shadow: 5px 5px 10px rgba(0, 00, 0, 0.8); background-color:rgba(0, 00, 100, 0.6); border-radius:20px;border:1px solid #FFF; }
.animatedText { }
@media (max-width: 991px) 
{
  .tagcloud                {  z-index: 100000;    margin: auto;    width: 50%;    cursor:pointer;    letter-spacing: -1px;   font-weight: bold;    text-align: center;    
                              font-size: 18px;  color: #CCffff;    
                              text-shadow: 2px 2px 4px rgba(0, 0, 200, 0.8); cursor: pointer;  
                              transition: color 200ms, text-shadow 200ms, font-size 200ms, margin-left 200ms,margin-top 200ms;   }
  .tagcloud--item:hover    {  color: #FFF; padding:3px; z-index: 1000000; opacity:1 !important;font-size: 22px;    padding:15px; margin-left:-15px;margin-top:-15px;
    text-shadow: 5px 5px 10px rgba(0, 00, 0, 0.8); background-color:rgba(0, 00, 100, 0.6); border-radius:20px;border:1px solid #FFF; }
    
}


/* ---------------------------------------------------------------------------------- */
/* Onglets des services sur l'accueil */
/* ---------------------------------------------------------------------------------- */
.onglets-container {  overflow-x: hidden;  white-space: nowrap;  -webkit-overflow-scrolling: touch;  margin-top:-90px;}
.no_select{  user-select: none;  -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none; }
.onglet_accueil          {  display: inline-block;  padding: 7px 20px;  margin-left: 10px;  border-radius: 20px 20px 0 0;  color: #FFF;  font-weight: bold;  font-size: 13px;  cursor: pointer;
                            position: relative;   z-index: 100000;  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);}

.onglet_return          {  display: inline-block;   margin-left: 10px;   color: #FFF;  font-weight: bold;  font-size: 20px;  cursor: pointer;
    position: relative;    z-index: 100000;  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);}

.onglet_accueil.active       {  background-color: #FFF;  color: #000; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.0);text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.0);box-shadow: 0 -7px 13px 0px rgba(0, 255, 255, 0.5); }
.onglet_accueil:not(.active) {  background-color: transparent;}
.onglet_accueil.active:hover {  animation: rainbowText 2s linear infinite;    text-shadow:  0 0 10px #FFF !important;  }
    
@keyframes rainbowText   {   0% {      color: #7F0000; /* Rouge */    }
                            14% {      color: #7F3F00; /* Orange */   }
                            28% {      color: #7F7F00; /* Jaune */    }
                            42% {      color: #007F00; /* Vert */     }
                            57% {      color: #003F7F; /* Bleu */     }
                            71% {      color: #3F007F; /* Indigo */   }
                            85% {      color: #7F007F; /* Violet */   }
                            100% {     color: #7F0000; /* Rouge */    }    }
  
/* ---------------------------------------------------------------------------------- */
/* Arborescence horizontale */
/* ---------------------------------------------------------------------------------- */
.arbo_horizontale a {  text-decoration: none;     font-weight: bold;}
.arbo_horizontale   {  margin-top: 50px;background-color: #668;    padding: 15px;    margin-bottom:5px; }
.arbo_horizontale a, .txt_arbo_horizontale{    color:#FFF; }
.arbo_horizontal_decal { margin-top:0px;}
.horizontal_link {color:#CCF !important;font-weight:normal;text-decoration:underline;}

/* ---------------------------------------------------------------------------------- */
/* Sous catégories avec image et zoom */
/* ---------------------------------------------------------------------------------- */
.img_round          {  border-radius: 15px 15px 0 0;  width: 100%;  min-height: 50px;  border: 0px solid #888;  }
.zoom a             {  text-decoration: none;}
.zoom               {  transition: transform 0.6s ease, filter 0.6s ease; cursor:pointer;  filter:saturate(0.2); transform: scale(0.85);}
.zoom:hover         {  transform: scale(1);  filter:saturate(1.2);}
.zoom_img           {  transition: transform 1.7s ease;  transform: scale(1);}
.zoom_img:hover     {  transform: scale(1.30);}
.label_img_round    {  display: flex;  align-items: center;  justify-content: center;  text-align: center;  font-size: 15px;  min-height: 70px;  color:#AAA;  font-weight: bold;  padding-left:4px;  padding-right:4px;  border: 1px solid #DDD;  background-color: #fAfAfA;  border-radius: 0 0 15px 15px ;  margin-bottom:10px !important;}
.down_arrow_vignette:hover::after {  content: "";  display: inline-block;  width: 0;  height: 0;  border-left: 30px solid transparent;  border-right: 30px solid transparent;  border-top: 30px solid rgb(0, 180, 255, 0.9);
                                    text-shadow: 0 0 20px #000 !important;  position: absolute;  top: 75%;  left: 50%;  transform: translate(-50%, -50%);}

/* ---------------------------------------------------------------------------------- */
/* Titres */
/* ---------------------------------------------------------------------------------- */
h3                 {  font-family: 'RobotoBlack', sans-serif; color:#FFF; background-color: rgb(168, 205, 235); 
                      padding:10px; margin-left:-15px;padding-left:20px; margin-top:15px; margin-right:-15px; margin-bottom:18px;
                      background: rgb(2,0,36);
                      background: linear-gradient(90deg, rgb(118, 116, 158) 0%, rgb(76, 95, 146) 35%, rgb(98, 162, 178) 70%); 
                      border-radius: 20px; text-shadow: 0 2px 10px rgba(0, 220, 255, 0.9);
                      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
.h8                 {  font-family: 'RobotoBlack', sans-serif; color:#FFF; background-color: rgb(168, 205, 235); 
                        padding:10px; margin-left:-15px;padding-left:20px; margin-top:15px; margin-right:-15px; margin-bottom:18px;
                        background: rgb(2,0,36); width:103%;
                        background: linear-gradient(90deg, rgb(118, 116, 158) 0%, rgb(76, 95, 146) 35%, rgb(98, 162, 178) 70%); 
                        border-radius: 20px; text-shadow: 0 2px 10px rgba(0, 220, 255, 0.9);
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
                        
h6                  {  font-size: 13px; font-weight: bold;}
h7                  {  font-size: 11px; color:#777;}

h2                  {  font-family: 'RobotoBlack', sans-serif;  color:#46A;}

.bg-h2              { background-color: #78A; color:#f0f0ff; padding:10px; margin-top: 20px;}
.page_col h5        {  padding:10px;   margin-left:0px; margin-right:0px; margin-bottom:18px;  min-height: 100px; text-align: center !important;  color: #368;
                       background: #AAC2F2;  background: linear-gradient(135deg, #D6E3F7, #F2F2F2);  border-radius: 10px;  padding: 10px;
                       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  display: flex;  align-items: center; hyphens:none !important;justify-content: center;}
.h4_section         {  color:#FFF; background-color: rgb(168, 205, 235); 
                        padding:10px; margin-left:-15px;padding-left:20px; margin-top:55px; margin-right:-15px; margin-bottom:18px;
                        background: rgb(2,0,36);
                        background: linear-gradient(90deg, rgb(118, 116, 158) 0%, rgb(76, 95, 146) 35%, rgb(98, 162, 178) 70%); 
                        border-radius: 20px; text-shadow: 0 2px 10px rgba(0, 220, 255, 0.9);
                        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
.search_h4          { color:#003F7F !important; text-decoration:underline dotted ; margin-top: 10px; background-color: #EEF; padding:10px; border-radius: 10px;}
.img_search         { width:100%; border-radius: 10px;}
.img_search2        { width:100%; border-radius: 10px;}
.surbright          { color:rgb(37, 102, 155); font-weight: bold; text-decoration: underline dotted; background-color: #8FF; border-radius: 10px; border:1px solid #0AF;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) }
.search_p           {text-decoration: none !important;  color:#888 !important;}
.search_p a:hover   {text-decoration: none !important;  color:#888 !important;}
.hide_txt           { display:none;}

.footer              { background-color: #CCD; color:#88A; padding:10px;}
.bg-black           { background-color: #046; color:#FFF; padding:10px; text-align: center;}
h4 { font-family: 'RobotoBlack', sans-serif; }
/* ---------------------------------------------------------------------------------- */
/* Mise en pages et multicolonnes */
/* ---------------------------------------------------------------------------------- */
.multi-columns H3, .multi-columns H4, .multi-columns h5 {background-color: #EEF;color:#46A; font-weight: bold;padding:10px; border-radius : 0 14px 0 14px;text-align: left; }
.multi-columns      {   text-align: justify; font-size: 1.2em;  hyphens:auto;
  text-align-last: left;text-indent: 40px;
  text-justify:inter-word;  column-gap: 50px; column-fill: balance; }
/* Écran de petite taille (xs) : 1 colonne */
@media (max-width: 575.98px)                         {   .multi-columns {    column-count: 1;  }    }
/* Écran de taille moyenne (sm) : 2 colonnes */
@media (min-width: 576px) and (max-width: 991.98px)  {   .multi-columns {    column-count: 2;  }  }
/* Écran de grande taille (md) : 3 colonnes */
@media (min-width: 992px) and (max-width: 1199.98px) {   .multi-columns {    column-count: 3;  }   }
/* Écran extra-large (lg) et au-delà : 3 colonnes */
@media (min-width: 1200px)                           {   .multi-columns {    column-count: 3;  }   }
/* Pour les conteneurs */
.img-container,
.img-container2,
.img-container3,
.img-container4,
.img-container_start {
    width: 100%; /* La largeur est définie à 100% du conteneur parent */
    height: 0; /* Initialisation de la hauteur à 0 */
    padding-top: 100%; /* La hauteur est définie en fonction de la largeur (100% de la largeur) */
    position: relative; /* Nécessaire pour positionner les images correctement */
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    margin-top: 10px;
    margin-bottom: 10px;
    border: 4px solid #FFF;
}

/* Pour les images */
.img-container img,
.img-container2 img,
.img-container3 img,
.img-container4 img,
.img-container_start img {
    width: 100%; /* La largeur de l'image remplit le conteneur */
    height: 100%; /* La hauteur de l'image remplit le conteneur */
    object-fit: cover; /* Assure que l'image remplit entièrement le conteneur sans être déformée */
    position: absolute; /* Positionnement absolu pour remplir le conteneur parent */
    top: 0;
    left: 0;
}

.intro {font-family: 'RobotoBlack', sans-serif; color:#46A; padding-bottom: 5px; font-size: 1.2em;  text-align: justify; hyphens: auto;}
.mini_intro {font-family: 'RobotoBlack', sans-serif; font-weight: 250; color:#46A; padding-bottom: 5px; font-size: 1.1em;  text-align: left; hyphens: auto;letter-spacing: -1px;}

/* ---------------------------------------------------------------------------------- */
/* Carousels horizontaux */
/* ---------------------------------------------------------------------------------- */

/* Appliquer une hauteur maximale pour les images dans le carousel */
.bg_gris_clair {background-color: #f0f0f5; box-shadow:  0 4px 10px rgba(0, 0, 0, 0.1);}
.div_categories { padding: 10px; width: 85%; margin: 0 auto;}
.div_categories .card-img-top {    max-height: 250px;     object-fit: cover;     object-position: top;   }
.card-deck .card img{  object-fit: cover;    height: 150px;    object-position: top;   }
.card-deck .card    {  margin-right: 15px;    margin-left: 15px;  }
.slick-slide        {  outline: none;  }
.card-body          {  min-height: 170px;    }
.slick-prev:before, .slick-next:before {    color: black;  }

#file-list { margin-left:5px;padding-left:15px; border-radius: 10px; background-color:#FFF; margin-bottom:10px;}
#file-list li {margin-left:15px;}
.red { color:#F00; font-weight: bold;}
.delete_file {cursor:pointer;}

/* ---------------------------------------------------------------------------------- */
/* Formulaires */
/* ---------------------------------------------------------------------------------- */
.right {text-align: right;}
.center {text-align:center;}
.cadre_field { border:1px solid #CCC; background-color:#fafafa; margin:4px; border-radius:5px;}
.cadre_label { margin:4px;}