@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                {   background-color: #f7f9fc; 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;}

.logo:hover {
  filter: drop-shadow(0 0 8px #00ffff);
  transition: filter 0.3s ease;
}

/* ---------------------------------------------------------------------------------- */
/* 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%;  z-index:9999 ;object-fit: cover;  object-position: 0 0; border:0px solid #00FF00;}
#canvas3                  {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: -1; display: block; border:0px solid #00FF00;}

/*
#text_slogan {
  font-family: 'RobotoBlack', sans-serif;
  text-transform: capitalize;
  position: absolute;
  z-index: 100000;

  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  padding: 10px 30px;
  font-weight: bold;
  font-size: calc(1.8vw + 12px);
  color: white;

  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);

  opacity: 0.95;
  transition: all 0.4s ease-out;
  animation: neon-glow 3s infinite alternate ease-in-out;
  will-change: box-shadow, opacity, transform;
}
*/

/* Nouveau style minimaliste et élégant pour les slogans */

#text_slogan {
  font-family: 'Roboto', sans-serif;
  text-transform: none;
  position: absolute;
  z-index: 100000;

  /* Placement en haut à gauche, mais discret */
  bottom: 42%;
  left: 2%;

  /* Apparence moderne */
  padding: 8px 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-size: calc(1.1vw + 9px);
  font-weight: 500;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
  opacity: 0;

  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Apparition fluide */
#text_slogan.show {
  opacity: 1;
  transform: translateY(0px);
}

@keyframes neon-glow {
  from { box-shadow: 0 0 10px rgba(0,255,255,0.3); }
  to   { box-shadow: 0 0 20px rgba(0,255,255,0.6); }
}

ul {
  list-style-type: disc;
  padding-left: 14px;
  margin: 0;
  font-size : 0.95em;
  color : #888;

}

#en_savoir_plus {
  font-family: 'RobotoBlack', sans-serif;
  position: fixed;
bottom: 90%;  right: 10px;
  font-size: clamp(16px, 1vw + 12px, 24px);
  color: #ffffff;
  font-weight: bold;

  background: rgba(0, 20, 30, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 14px 22px;

  box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

  z-index: 100010;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#en_savoir_plus:hover {
  background: rgba(0, 30, 50, 0.8);
  transform: scale(1.03);
}
#en_savoir_plus .sub_savoir {
  font-size: clamp(14px, 1vw + 2px, 20px);
  font-weight: 400;
  color: #aad8ff;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


#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 */
/* ---------------------------------------------------------------------------------- */
h300                 {  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);}
h3000         {  color:#368 !important; font-size: 2.0em; font-weight: 400;
                        padding:10px; padding-left:20px; margin-top:5px; 
                        }
h3         {  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);}
}

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

.img-container     {  width: 100%;  height: 160px;  overflow: hidden;  border-radius: 3px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); margin-top: 10px;margin-bottom: 10px; border:4px solid #FFF;}
.img-container img {  width: 100%;  height: auto;  display: block;  margin: 0;  transform: translateY(-10%);}
.img-container2     {  width: 100%;  height: 150px;  overflow: hidden;  border-radius: 3px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); margin-top: 10px;margin-bottom: 10px;border:4px solid #FFF;}
.img-container2 img {  width: auto;  height: 100%;  display: block;  margin: 0;  transform: translateX(-20%);}
.img-container3     {  width: 100%;  height: 200px;  overflow: hidden;  border-radius: 3px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); margin-top: 10px;margin-bottom: 10px;border:4px solid #FFF;}
.img-container3 img {  width: auto;  height: 100%;  display: block;  margin: 0;  transform: translateX(-20%);}
.img-container4     {  width: 100%;  height: 140px;  overflow: hidden;  border-radius: 3px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); margin-top: 10px;margin-bottom: 10px; border:4px solid #FFF;}
.img-container4 img {  width: 100%;  height: auto;  display: block;  margin: 0;  transform: translateY(-10%);}

.img-container_start     {  width: 100%;  height: 240px;  overflow: hidden;  border-radius: 3px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); margin-top: 10px;margin-bottom: 10px; border:4px solid #FFF;}
.img-container_start img {  width: 100%;  height: auto;  display: block;  margin: 0;  transform: translateY(-10%);}

.intro {font-family: 'RobotoBlack', sans-serif; color:#46A; padding-bottom: 5px; font-size: 1.4em;  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;}

/* Style commun pour les encadrés */
.cadre_bleu, .cadre_blanc {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 16px 20px;
  margin: 0px 0;
  
  line-height: 1.6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.cadre_bleu {
  display: flex;
  align-items: flex-start;
  background: #27a5f9;
  color: white;
  font-size: 1.2em;
  font-weight: 200;
  padding: 15px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: 0px 0 25px 0px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cadre_bleu .emoji {
  font-size: 1.5em;
  margin-right: 14px;
  line-height: 1;
  filter: brightness(0) invert(1); /* rend le pouce blanc sur bleu */
}

.cadre_bleu .texte {
  font-size: 1em;
  line-height: 1.6;
  font-weight: 600;
  padding-right:20px;
}


/* Encadré fond blanc avec bord gauche bleu */
.cadre_blanc {
  background: #ffffff;
  border-left: 4px solid #3ba6e0;
  text-indent: 0px;
  
}

/* Sous-éléments du cadre blanc */
.cadre_blanc .label {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 1em;
}

.cadre_blanc .headline {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 1.1em;
  color: #667;
}

.cadre_blanc .sub {
  font-size: 0.92em;
  color: #666;
}
.cadre_blanc, .cadre_bleu {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.sous_titre {
  text-indent: 0px !important; font-size: 1.4em; color:#000; padding-bottom: 15px; padding-top: 20px;;
}
.sous_titre2 {
  text-indent: 0px !important; font-size: 1.3em; color:#000; padding-bottom: 15px; 
}

.block {
    break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
/* ---------------------------------------------------------------------------------- */
/* 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;}


/* ---------------------------------------------------------------------------------- */
/* Autres styles */
/* ---------------------------------------------------------------------------------- */

.table td {
    vertical-align: middle;
}
/* Alignement à gauche avec padding */
.table td:first-child,
.table th:first-child {
  text-align: left;
  padding-left: 10px;
  white-space: nowrap;
}

/* 2ᵉ colonne – ligne impaire */
.table tr:nth-child(odd) td:nth-child(2) {
  background-color: #dDFFEF;
}

/* 2ᵉ colonne – ligne paire */
.table tr:nth-child(even) td:nth-child(2) {
  background-color: #CCFFCC;
}

/* Fond clair pour les lignes impaires de la 1ère colonne */
.table tr:nth-child(odd) td:first-child {
  background-color: #dDEEEF;
}

/* Fond gris pour les lignes paires de la 1ère colonne */
.table tr:nth-child(even) td:first-child {
  background-color: #d8E9Ea;
}

.table { color:#666 !important;
}


  .hero-title {
      background: linear-gradient(90deg, #3b82f6, #06b6d4);
      color: white;
      padding: 1.4rem 2rem;
      border-radius: 14px;
      font-size: 1.6rem;
      text-align: center;
      font-weight: 700;
      margin-bottom: 1rem;
      margin-top: 1rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
    }

    .block-text {
      background-color: #fff;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      background-image: linear-gradient(to bottom, #DEE, #f8ffff);
      padding: 1.3rem 1.5rem;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
      min-height: 350px;
      line-height: 1.6;
    }

    .block-text-outside
    {
        
    }

    .highlight {
      font-weight: 600;
      color: #0ea5e9;
    }

    .final-punch {
      font-size: 1.3rem;
      font-weight: 700;
      text-align: center;
      background: #073366;
      border-left: 6px solid #0ea5e9;
      border-radius: 10px;
      padding: 1.4rem 2rem;
      color: #ffffff;
      margin-top: 2.5rem;
      margin-bottom: 3rem;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 575.98px) {
      .block-text {
        min-height: auto;
        padding: 1rem;
      }
    }

    .rond {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      background-color: #0ea5e9;
      color: white;
      text-align: center;
      font-weight: bold;
      margin-right: 10px;
    }

    .img_argument {
        width:100%;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

        .img_cadre {
        width:100%;
        border-top-left-radius: 0px;
        border-top-right-radius: 44px;
        border-top : 0px solid #FFF;
        border-left : 4px solid #45a1f7;
    }