/* Régles sur Mobile*/
@media (max-width: 768px) {
    .barre_liens {
        display: none !important;
    }
}

.offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span
{
    background-color: #000;
}
.burger-icon > span {
  display: block;
  height: 2px;
  background-color: #000;
  margin: 5px 0;
  transition: background-color .3s ease-in,opacity .3s ease-in,transform .3s ease-in;
}

/* === ICONES DANS LES CHAMPS RSFORM PRO === */

/* Positionner les blocs de champs */
.rsform-block {
    position: relative;
}

/* Style général des inputs avec icônes */
.rsform-block input[type="text"],
.rsform-block input[type="email"],
.rsform-block input[type="tel"],
.rsform-block textarea {
    padding-left: 40px !important;
}

/* Icône Email */
.rsform-block-email::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0e0";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px; /* Ajuster selon votre layout */
    color: #666;
    z-index: 1;
}

/* Icône Téléphone */
.rsform-block-telephone::before,
.rsform-block-phone::before {
    font-family: "Font Awesome 5 Free";
    content: "\f095";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px;
    color: #666;
    z-index: 1;
}


/* Icône Utilisateur (pour nom, prénom) */
.rsform-block-nom::before,
.rsform-block-name::before {
    font-family: "Font Awesome 5 Free";
    content: "\f007";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px;
    color: #666;
    z-index: 1;
}

/* Icône Message */
.rsform-block-message::before {
    font-family: "Font Awesome 5 Free";
    content: "\f27a";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px;
    color: #666;
    z-index: 1;
}
/* Icône Ville */
.rsform-block-ville::before {
    font-family: "Font Awesome 5 Free";
    content: "\f64f";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px;
    color: #666;
    z-index: 1;
}
/* Icône Entreprise */
.rsform-block-societe::before,
.rsform-block-entreprise::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1ad";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px;
    color: #666;
    z-index: 1;
}

/* Icône Adresse */
.rsform-block-adresse::before,
.rsform-block-address::before {
    font-family: "Font Awesome 5 Free";
    content: "\f3c5";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 14px;
    color: #666;
    z-index: 1;
}


/*Carte sur formulaire de contact*/
#sppb-addon-604d323f-ed69-4be9-a338-f3adb9f7dc66 .sppb-addon-openstreetmap
 {
   border-radius: 16px;
}

/* Personnalisation des cookies*/
#cookiesck {
    position: fixed;
    left: auto!important;
    right: 20px!important;
    bottom: 20px!important;
    z-index: 1000000;
    min-height: 30px;
    color: #000000!important;
    background: rgba(162, 211, 24, 0.7)!important;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    width: 440px!important;
    padding: 10px!important;
}
/* Responsive : sur mobile, centrer en bas */
@media (max-width: 768px) {
    #cookieck 
    {
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
    }
}

/******************************************
Formulaire de contact
********************************************/
input[type="text"], input[type="email"], input[type="url"], input[type="date"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], select:not(.form-select), .form-control, .sppb-form-group .form-control {
    border-radius: 16px;
}
/******************************************
Volet gauche coulissant affichage des actus
*******************************************/
.container_gauche_fb {
  position: absolute; 
top: 200px; 
  left: 0px;
  width: 430px;
  z-index: 999;
  color:#FFFFFF;
}
.container_gauche_fb a {
    color: #ba1536;
}

.container_gauche_fb svg {
  font-size: 20px; /*definit la taille des icçones*/
  fill: #BA1536;
 }
.espace_icone_fb svg {
  font-size: 22px; /*definit la taille des icçones*/
  fill: #FFF;
  margin-bottom : 15px;
 }
.espace_icone_fb {
 margin-top: 30px;
 margin-bottom: 30px;
 
}
.container_gauche_fb .btn-contact{
  margin-left: 0px;
}

.panel_fb {
  position: fixed;
  top: 143px;
  left: -374px;
  width: 430px;
background-image: linear-gradient(131deg, rgb(162, 212, 23) 0%, rgb(162, 212, 23) 100%);
 /*  background-color: #ba1536;*/
  padding: 10px;
  transition: transform 0.3s ease, left 0.3s ease;
  z-index: 1;
   display: flex;
  flex-direction: row; /* Afficher les colonnes côte à côte */
  justify-content: space-between; /* Pour espacer les colonnes */
  align-items: center; /* alligne le contenu des colonnes verticalement*/
  border-radius: 0px 25px 25px 0px;
  text-align: center;
}
.column_pg_fb {
  flex: auto; /*permet d'attribuer la largeur des colonnes*/
  padding:0px 10px 0px 10px;
}
.hover-trigger:hover + .panel_fb,
.panel_fb:hover {
  left: 0px;
}

.hover-trigger:hover {
  transform: translateX(-100%);
}
.verti_texte{
   writing-mode: vertical-rl;
   color: #FFF;
   font-size: 20px !important;
   font-weight: 600;
   letter-spacing: 3px;
   margin: -8px;
}
/*********************************************/


#sp-menu .sp-module .sppb-btn.gradient-button:hover{
  background : #ff8f1f!important;
}

/* Bloc avec icône */

.service-feature:hover {
    background: linear-gradient(133.69deg, #d3e387 -2.59%, #a2d417 113.65%)
}
.service-feature {
    transition: all 0.3s ease;
    background: linear-gradient(133deg, rgba(255, 172, 89, 1) 0%, rgba(255, 143, 31, 1) 100%);
    padding: 30px;
    border-radius: 16px;
}
/*Bloc page d'accueil */
.service-feature1:hover {
    /*background:  #ff8f1f;*/
  
background: linear-gradient(133deg, rgba(255, 172, 89, 1) 0%, rgba(255, 143, 31, 1) 100%);
}
.service-feature1 {
    transition: all 0.3s ease;
    background: linear-gradient(133.69deg, #d3e387 -2.59%, #a2d417 113.65%); 
    padding: 15px;
    border-radius: 16px;
  height: 350px;
}

/********************************************/

blockquote {
    border-left: 4px solid #a2d416;
    margin-left: 60px;
    /*font-size: 14px;
    line-height: 1.7em;*/
  
    padding: 0 0 0 15px;
}

/* Couleur pour le bloc Tax d'apprentissage*/

.fond_call{
  background: linear-gradient(360deg, rgba(211, 227, 135, 1) 0%, rgba(211, 227, 135, 1) 50%, rgba(247, 250, 233, 1) 50%) !important;
}

/******************************
Barre de menu afficher en bas de l'écran
******************************/
.barre_liens{
  position: fixed;
  z-index: 100;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  
}
.menu_liens {
  padding: 1rem;
  background: #FFF;
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  gap: 14px;
}
.bliens {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 80px;
  height: 50px;
  border-radius: 16px;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.bliens:hover,
.bliens:focus-visible {
  width: 200px;
  color: #fff;
  background: #a2d417;
  box-shadow: 0 4px 12px rgba(124, 179, 66, 0.4);
}

.bliens-icon {
 /* font-family: "Material Symbols Rounded";*/
  font-size: 26px;
  margin-left: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.bliens:hover .bliens-icon {
  transform: scale(1.1);
}

.bliens-title {
  margin-left: 12px;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  font-size: 15px;
}

.bliens:hover .bliens-title,
.bliens:focus-visible .bliens-title {
  opacity: 1;
  transform: translateX(0);
}
#sp-bottom {
    padding: 0px; 
    }

/*Bouton***/
 .button-container {
            display: flex;
            flex-direction: row;
            gap: 15px;
            padding: 0px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .custom-button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 250px;
            height: 50px;
            padding-left: 20px;
            background: #a2d417;
            border: 3px solid #a2d417;
            border-radius: 50px;
            color: white;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .custom-button::before {
            content: '';
            position: absolute;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100%;
            background: #D3E387;
            transition: right 0.4s ease;
            z-index: 0;
        
        }

        .custom-button:hover::before {
            right: 0;
        }

        .button-text {
            position: relative;
            z-index: 1;
        }

        .button-icon {
            position: absolute;
            top: -3px;
            right: -3px;
            z-index: 2;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border: 3px solid #a2d417;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }

        .custom-button:hover .button-icon {
            transform: scale(1.05);
          
        }

        /* Icône en SVG */
        .icon-svg {
            width: 24px;
            height: 24px;
            fill: white;
        }

/*********************************/


body .sppb-btn.gradient-button:hover,body .btn.gradient-button:hover {
    background: linear-gradient(133.69deg, var(--gradient-color-1) -2.59%, var(--gradient-color-2) 113.65%);
    color: #dc3545
}
body .sppb-btn.gradient-button:hover,body .btn.gradient-button:hover {
   
}





:root {
  --gradient-color-1: #000;
  --gradient-color-2: #000;
}
#sp-menu .sp-module .sppb-btn.gradient-button {
    padding: 9px 30px 17px 32px;
    background: transparent;
    border: 1px solid #13AE6D;
    font-size: 14px;
}
body {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
}
body.transparent-header #sp-header.header-sticky {
    position: fixed;
    background-color: #198754;
}

.sp-megamenu-parent>li>a {
        font-weight: 700!important;
  }
.sp-megamenu-parent>li>a,.sp-megamenu-parent>li>span{
  font-weight: 700;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    line-height: 1rem;
    font-weight: 700;
}
.sp-megamenu-parent>li>a:before,.sp-megamenu-parent>li>span:before {
    content: "";
    width: 0px;
    height: 2px;
    border-radius: 2px;
    display: inline-block;
    background: #FF8F1F;
    position: absolute;
    bottom: 25px;
    transition: all 0.4s ease
}
.sp-megamenu-parent>li>a:hover:before,.sp-megamenu-parent>li>span:hover:before {
    width: 40px
}
  
/**/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover::before, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge):hover::before {
  width: 40px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a::before, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge)::before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  display: inline-block;
  background: #33CC00;
  position: absolute;
  bottom: 25px;
  transition: all 0.4s ease;
  bottom: -5px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a::before, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge)::before {
  background:#FF8F1F!important;
}
  

#sp-header {
    background: #FFF!important;
}
/*Soulignement Titre h3*/
    .soulignement {
      font-weight: bold;
      font-size: 24px;
      position: relative; /* nécessaire pour placer le ::after */
      display: inline-block;
    }

    .soulignement::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 6px;                 /* épaisseur du trait */
      background-color: #d3e387;     /* couleur du trait */
      bottom: -2px;                /* distance sous le texte (négatif pour remonter) */
      z-index: -100;  
    }
/*Couleur fond de page*/
#sp-page-builder {
       /*background-image: linear-gradient(180deg, #ffffff 0%, #F9F0DB 80%);*/
  background: #F7FAE9;
}
/* Couleur du bouton dans le menu*/
#sp-menu .sp-module .sppb-btn.gradient-button {
    padding: 9px 30px 17px 32px;
    background: transparent;
    border: none; /*1px solid #13AE6D;*/
      background: linear-gradient(131deg, #A2D417 0%, #A2D417 100%);
    /*background: linear-gradient(131deg,rgba(244, 91, 60, 1) 0%, rgba(244, 131, 60, 1) 100%);*/
    font-size: 14px;
}
/* Cpouleur de fonds des artciles*/
#sp-page-builder .page-content .sppb-section:not(div.sppb-section):first-child {
    margin-top: 0;
   /* background-image: linear-gradient(180deg, #ffffff 0%, #F9F0DB 80%);*/
}
body .sppb-btn.gradient-button.btn-black, body .btn.gradient-button.btn-black
Specificity: (0,3,1)
 {
    color: #198754;
    border-style: solid;
}
/*Le dégradé sur l'image dans le titre de page*/
.sp-page-title:after {
background: linear-gradient(170deg, rgba(25, 135, 84, 1) 0%, rgba(60, 190, 135, 0.57) 41%);
}
/*Couleur sur pied de page*/
#sp-footer, #sp-bottom {
/*background: linear-gradient(178deg, rgba(60, 190, 135, 1) 0%, rgba(25, 135, 84, 1) 100%);*/
  background: #D3E387;
}
/* Supprimer le texte dans la photo des articles*/
.sp-page-title .sp-page-title-heading {
    display: none;
}
/* Liste à puce*/
  .custom-list {
            list-style: none;
            padding: 0;
            margin: 0;
          /*  max-width: 500px;*/
        }

        .custom-list li {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
           /* font-size: 18px;*/
            font-weight: 500;
            color: #333;
        }

        .custom-list li:last-child {
            margin-bottom: 0;
        }

        .bullet {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #a2d416;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .bullet::after {
            content: "✓";
            color: white;
            font-size: 14px;
            font-weight: bold;
        }
/* Tableau fourniture scolaires*/
  .custom-card {
    /*background-image: linear-gradient(180deg, #ffffff 0%, #F9F0DB 80%);*/
         /*   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
            border-radius: 20px;
            border: none;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            padding: 0.8rem;
            max-width: 1000px;
            width: 100%;
    background: #ff8f1f30;
    
        }
        
        .card-title {
            color: #333;
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
        }
        
        .menu-item {
            background: white;
            border: none;
           border-left: 4px solid #f45b3c;
            
            border-radius: 8px;
            padding: 1rem 1.5rem;
            margin-bottom: 0.5rem;
            text-align: left;
            color: #333;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }
        
        .menu-item:hover {
            background: #f8f9fa;
            transform: translateX(5px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }
        
        .menu-item::after {
            content: '›';
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            color: #6c757d;
            transition: all 0.3s ease;
        }
        
        .menu-item:hover::after {
            color: #4a5568;
            transform: translateY(-50%) translateX(3px);
        }
      /*  
        .container-custom {
            padding: 2rem;
        }*/
/* Pied de page */
#sp-footer, #sp-bottom {
     color: #0D4B32;
}



/*images qui défilent en pie de page les logos*/
/* Container */
.slider {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
 /* background: #fff; /* optionnel */
}

/* Piste de logos */
.slider-track {
  display: flex;
  gap: 30px; /* espace entre logos */
  width: max-content;
  animation: scroll 30s linear infinite;
}

/* Liens */
.slider-track a {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Images */
.slider-track img {
  height: 60px;       /* fixe la hauteur */
  width: auto;        /* garde les proportions */
  object-fit: contain;
  display: block;
}

/* Animation défilement */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*Téléphone pied de page*/
#sppb-addon-e888a5bb-a1bc-4694-92ff-f75487bb67b5 .sppb-btn i {
  padding-right: 15px;
 
  }
#sppb-addon-e888a5bb-a1bc-4694-92ff-f75487bb67b5 #btn-e888a5bb-a1bc-4694-92ff-f75487bb67b5.sppb-btn-custom {
  border: solid 1px #FFF;
}

#section-id-254fffb3-e342-4b2c-a4a0-3691bc073d37 .sppb-btn{
  
   margin-top: 5px;
  padding: 13px 13px;
}
/* icones reseaux sociaux*/
#sppb-addon-3b43aeee-cc57-4e10-af32-56501cfc3190 ul {
    justify-content: flex-end;
}
/*pied de âge dans la copuleur foncé*/
.sp-page-builder .page-content #section-id-f546d89e-8ddc-44c0-be6d-94bc6cfc2dbf {
     color: #13AE6D;
}
.sp-page-builder .page-content #section-id-f546d89e-8ddc-44c0-be6d-94bc6cfc2dbf a
 {
    color: #13AE6D;
}
.sp-page-builder .page-content #section-id-f546d89e-8ddc-44c0-be6d-94bc6cfc2dbf a:hover
 {
    color: #FFF;
}

/* Compteur avec cercle*/
.container {
  display: flex;
 gap: 130px;
  flex-wrap: wrap;
  justify-content: center;
}

.progress-item {
  text-align: center;
  position: relative;
  width: 120px;
  height: 120px; /* ajoute la hauteur pour que le texte se centre */
}

.progress-ring {
  width: 120px;
  height: 120px;
}

.progress-ring__bg {
  fill: transparent;
  stroke: #ffdb90;
}

.progress-ring__circle {
  fill: transparent;
  stroke: #ff8f1f;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 339.292; /* 2*PI*R */
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 2s linear;
}

.circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: bold;
  color: #333;
  pointer-events: none;
}

.description {
  margin-top: 10px;
  text-align: center;
  margin-left: -40px;
  margin-right: -40px;
}

/*Bouton Call to action */

.sppb-btn.gradient-button.btn-vert
{
    background: linear-gradient(133.69deg, #269C68 -2.59%, #269C68 113.65%)!important;
    color: #fff;
    transition: all 0.2s ease
}
/*********************
**********************/
  .timeline-container {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            padding: 20px 0;
        }

        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 28px;
            width: 2px;
            background-color: #E0E0E0;
            transform: translateX(-50%);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 40px;
            min-height: 30px;
        }

        .timeline-content {
            position: absolute;
            max-width: 350px;
            padding: 0;
            font-size: 18px;
            font-weight: 500;
            white-space: nowrap;
            top: -5px;
        }

        .timeline-item.left .timeline-content {
            right: calc(50% + 50px);
            text-align: right;
        }

        .timeline-item.right .timeline-content {
            left: calc(50% + 50px);
            text-align: left;
        }

        .timeline-dot {
            position: absolute;
            left: 50%;
            width: 20px;
            height: 20px;
            background-color: #ffffff;
            border: 5px solid #a7d22f;
            border-radius: 50%;
            transform: translateX(-50%);
            z-index: 2;
            box-shadow: 0 0 0 5px #FFFFFF;
        }

        .timeline-dot.small {
            width: 12px;
            height: 12px;
            border: 4px solid #28a745;
            box-shadow: 0 0 0 4px #ffd700;
        }

        .timeline-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 30px;
            height: 2px;
            background-color: #E0E0E0;
            transform: translateY(-50%);
            z-index: 1;
            margin-left: 10px;
            margin-right: 10px;
        }

        .timeline-item.left .timeline-dot::before {
            right: 100%;
        }

        .timeline-item.right .timeline-dot::before {
            left: 100%;
        }

        .timeline-item:last-child {
            margin-bottom: 20px;
        }

        /* Responsive pour tablettes */
        @media (max-width: 768px) {
            body {
                padding: 30px 15px;
            }

            .timeline-content {
                font-size: 16px;
                white-space: normal;
                max-width: 280px;
            }

            .timeline-item.left .timeline-content {
                right: calc(50% + 45px);
            }

            .timeline-item.right .timeline-content {
                left: calc(50% + 45px);
            }

            .timeline-dot::before {
                width: 25px;
                margin-left: 8px;
                margin-right: 8px;
            }
        }

        /* Responsive pour mobiles */
        @media (max-width: 480px) {
            body {
                padding: 20px 10px;
            }

            .timeline-line {
                left: 40px;
            }

            .timeline-item {
                margin-bottom: 35px;
            }

            .timeline-content {
                position: relative;
                left: 70px !important;
                right: auto !important;
                text-align: left !important;
                top: -8px;
                font-size: 15px;
                white-space: normal;
                max-width: calc(100% - 80px);
            }

            .timeline-dot {
                left: 40px;
            }

            .timeline-dot::before {
                left: 100% !important;
                right: auto !important;
                width: 20px;
                margin-left: 5px;
            }
        }

        /* Très petits écrans */
        @media (max-width: 360px) {
            .timeline-content {
                font-size: 14px;
                left: 65px !important;
                max-width: calc(100% - 75px);
            }

            .timeline-dot::before {
                width: 15px;
            }
        }
/*********************
**********************/