/*============================
        RESET
=============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins', Arial, Helvetica, sans-serif;
}


/* ==========================================================================================================
                                         CSS DE LA PAPAGE INDEX.PHP 
============================================================================================================ */

/* ==========================================
   BLOC 1 : TOP BAR
========================================== */
.top-bar{
    
    background:#0A4E9B;
    color:white;
    border-bottom:4px solid #FFD200;
}

.top-bar .container{
    width:90%;
    max-width:1300px;
    margin:auto;
    
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
}

.left{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.left > span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
}

.left i{
    color:white;
}


/* Liens de la partie gauche (Nous localiser, téléphone, etc.) */
.left a{
    color:rgb(255, 253, 253);
    text-decoration:none;
    transition:0.3s;
}

.left a:hover{
    color:#FFD200;
}

.right{
    display:flex;
    gap:18px;
}

.right a{
    color:white;
    font-size:20px;
    text-decoration:none;
    transition:0.3s;
}

.right a:hover{
    color:#FFD200;
}

/* Liens de la partie gauche */
.top-bar .left a{
    color:white !important;
    text-decoration:none;
    transition:0.3s;
}

.top-bar .left a:visited{
    color:white;
}

.top-bar .left a:hover{
    color:#FFD200;
}
.localiser-text{
    display:inline;
}

/* ==========================================
   RESPONSIVE BLOC 1 : TOP BAR
========================================== */


/* Tablettes */
@media (max-width:992px){

    .top-bar .container{
        width:95%;
        flex-direction:column;
        gap:10px;
        padding:10px 0;
    }

    .left{
        justify-content:center;
        gap:20px;
    }

    .right{
        justify-content:center;
    }

}


/* Téléphones */

@media (max-width:576px){

    .top-bar .container{
        width:100%;
        padding:8px 5px;
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:50px;
        flex-wrap:nowrap;
    }


    .left{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:6px;
        flex-wrap:nowrap;
        width:auto;
    }


    .left > span{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:15px;
    }


    .right{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:6px;
        width:auto;
    }


    .right a{
        font-size:15px;
    }


    

}

/* ==========================================
   BLOC 2 : HEADER
========================================== */

.header {
    background: #ffffff;
    margin-bottom: 0;
}

.header-content {
    width: 90%;
    max-width: 1300px;
    margin: auto;
    padding: 2px 0;

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


/* ==========================================
   LOGO
========================================== */

.logo-area img {
    height: auto;
    width: 250px;
    display: block;
}


/* ==========================================
   MENU PRINCIPAL
========================================== */

.menu > ul {
    display: flex;
    flex-direction: row;
    align-items: center;

    list-style: none;
    gap: 30px;

    margin: 0;
    padding: 0;
}


/* ==========================================
   ÉLÉMENTS DU MENU
========================================== */

.menu > ul > li {
    display: block;
    position: relative;
}


/* ==========================================
   LIENS DU MENU
========================================== */

.menu > ul > li > a {
    display: block;

    text-decoration: none;
    color: #295297;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;

    white-space: nowrap;
}


/* ==========================================
   SURVOL DES LIENS
========================================== */

.menu > ul > li > a:hover {
    color: #0b5ed7;
}


/* ==========================================
   TRAIT INFÉRIEUR DU HEADER
========================================== */

.header-line {
    height: 4px;
    background: #295297;
    width: 100%;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}


/* ==========================================
   BOUTON HAMBURGER
========================================== */

.hamburger {
    display: none;

    font-size: 30px;
    color: #295297;

    cursor: pointer;
}


/* ==========================================
   RESPONSIVE BLOC 2 : HEADER
========================================== */


/* Tablettes */
@media (max-width:992px){

    .header-content{
        width:95%;
        flex-direction:column;
        gap:15px;
        padding:10px 0;
    }


    .logo-area img{
        width:220px;
    }


    .menu ul{
        gap:20px;
        justify-content:center;
        flex-wrap:wrap;
    }


    .menu ul li a{
        font-size:16px;
    }

}


/* Téléphones */
@media (max-width:576px){

    .header-content{
        width:100%;
        padding:10px 15px;
        flex-direction:row;
        justify-content:space-between;
    }


    .logo-area img{
        width:190px;
    }


    /* Afficher hamburger */
    .hamburger{
        display:block;
    }


    /* Menu caché par défaut */
    .menu{
        display:none;
        width:100%;
    }


    .menu ul{
        flex-direction:column;
        align-items:center;
        gap:15px;
        padding:20px 0;
    }


    .menu ul li a{
        font-size:15px;
    }


    /* Menu ouvert */
    .menu.active{
        display:block;
    }


    .header-content{
        flex-wrap:wrap;
    }

}

/* ==========================================
   BLOC 3 : HERO SLIDER
========================================== */


.hero-slider{
    width:100%;
    height:500px;
    position:relative;
    overflow:hidden;
    margin-bottom: 20px;
}

.slider{
    width:100%;
    height:100%;
    position:relative;
}


.slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    transition:opacity 1s ease;
}


.slide.active{
    opacity:1;
    visibility:visible;
}


.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CONTENU TEXTE DU HERO SLIDER*/

/* Voile sombre sur l'image */
.slide::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,0.45);

    z-index:1;
}


/* Zone du texte */

.slide-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);
    width:80%;
    text-align:center;
    color:white;
    z-index:2;
}


/* Titre principal */

.slide-content h1{

    font-size:42px;
    font-weight:700;
    margin-bottom:20px;
    line-height:1.2;
    text-transform:uppercase;
}


/* Texte descriptif */

.slide-content p{

    font-size:21px;
    line-height:1.6;
    max-width:850px;
    margin:0 auto 35px;

}


/* Bouton */

.btn-slider{

    display:inline-block;
    padding:15px 35px;
    background:#FFD200;
    color:#295297;
    font-size:18px;
    font-weight:bold;
    text-decoration:none;
    border-radius:5px;
    transition:0.3s;
}


/* Effet au survol */

.btn-slider:hover{

    background:white;
    color:#295297;

}
/*   FLÈCHES DU SLIDER */

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.25);
    color:#fff;
    font-size:28px;
    cursor:pointer;
    z-index:10;
    transition:0.3s;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

.prev:hover,
.next:hover{
    background:#FFD200;
    color:#295297;
}

/*    INDICATEURS (POINTS)*/

.slider-dots{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:10;
}

.dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    cursor:pointer;
    transition:0.3s;
}

.dot.active{
    background:#FFD200;
}

/* ==========================================
   RESPONSIVE BLOC 3 : HERO SLIDER
========================================== */


/* ==========================
   TABLETTES
   577px à 991px
========================== */

@media (max-width:991px){

    .hero-slider{
        height:420px;
    }


    .slide-content{
        width:85%;
    }


    .slide-content h1{
        font-size:34px;
    }


    .slide-content p{
        font-size:18px;
        margin-bottom:30px;
    }


    .btn-slider{
        padding:13px 30px;
        font-size:16px;
    }


    .prev,
    .next{
        width:45px;
        height:45px;
        font-size:24px;
    }


    .prev{
        left:15px;
    }


    .next{
        right:15px;
    }

}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){

    .hero-slider{
        height:260px;
    }


    .slide-content{
        width:90%;
    }


    .slide-content h1{
        font-size:24px;
        line-height:1.3;
        margin-bottom:15px;
    }


    .slide-content p{
        font-size:15px;
        line-height:1.5;
        margin-bottom:22px;
    }


    .btn-slider{
        padding:11px 20px;
        font-size:14px;
    }


    /* Flèches */

    .prev,
    .next{
        width:35px;
        height:35px;
        font-size:20px;
    }


    .prev{
        left:10px;
    }


    .next{
        right:10px;
    }


    /* Points */

    .slider-dots{
        bottom:15px;
        gap:8px;
    }


    .dot{
        width:10px;
        height:10px;
    }

}

/* ==========================================
   BLOC 4 : PRESENTATION DE L'IET
========================================== */

.about{
    padding:10px 0;
    background:#ffffff;
}

.about-container{
    width:90%;
    max-width:1300px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}


/* ================= IMAGE ================= */

.about-image{
    flex:1;
}

.about-image img{
    
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}


/* ================= CONTENU ================= */

.about-content{
   flex:1.2;
    background:#ffffff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}


.section-subtitle{

    display:inline-block;
    color:#FFD200;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:18px;

}


.about-content h2{

    color:#295297;
    font-size:42px;
    line-height:1.3;
    margin-bottom:25px;

}


.about-content p{

    color:#555;
    font-size:18px;
    line-height:1.8;
    text-align:justify;
    margin-bottom:35px;

}


/* ================= POINTS FORTS ================= */

.about-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:40px;

}


.feature{

    display:flex;
    align-items:center;
    gap:12px;

}


.feature i{

    color:#295297;
    font-size:20px;

}


.feature span{

    color:#333;
    font-size:17px;
    font-weight:500;

}


/* ================= BOUTON ================= */

.btn-about{

    display:inline-block;
    padding:15px 35px;
    background:#295297;
    color:#ffffff;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    border-radius:6px;
    transition:.3s;

}


.btn-about:hover{

    background:#FFD200;
    color:#295297;

}

/*==================================================
  BLOC 5 - NOS FILIÈRES
==================================================*/

.formations{
    padding:40px 0 100px;
    background:#F8FAFC;
}


/* CONTENEUR */

.formations .container{
    width:90%;
    max-width:1400px;
    margin:auto;
}



/* ================= TITRE DU BLOC ================= */

.section-title{
    text-align:center;
    margin-bottom:10px;
}


.section-title h2{
    font-family:'Poppins', sans-serif;
    font-size:36px;
    font-weight:700;
    color:#0B2C5F;
    margin-bottom:15px;
}


.section-title p{
    font-family:'Poppins', sans-serif;
    font-size:16px;
    color:#666;
    max-width:650px;
    margin:auto;
}
.section-title-box{
    text-align:center;
    display:inline-block;
    padding:25px 50px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
    margin-bottom:50px;
}

.section-title-box h2{
    margin:0 0 12px;
    font-size:32px;
    color:#007bff;
    font-weight:700;
}

.section-title-box p{
    margin:0;
    font-size:17px;
    color:#555;
}



/*
   CARTES
==================================================*/

.formations-cards{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}



/* CARTE */

.formation-card{

    background:#ffffff;
    border-radius:18px;
    padding:35px 25px;
    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

    transition:all 0.4s ease;

    position:relative;
    overflow:hidden;

}


/* TRAIT BLEU EN HAUT */

.formation-card::before{

    content:"";
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#007BFF;

}



/* EFFET AU SURVOL */

.formation-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 15px 35px rgba(0,123,255,0.20);

}



/*
   ICONE
==================================================*/

.formation-icon{

    width:75px;
    height:75px;

    margin:10px auto 25px;

    border-radius:50%;

    background:#EAF3FF;

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

}


.formation-icon i{

    font-size:32px;
    color:#007BFF;

}

/*
   CONTENU
==================================================*/


.formation-content h3{

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:700;

    color:#007BFF;

    margin-bottom:12px;

    letter-spacing:0.5px;

}


.formation-content h4{

    font-family:'Poppins',sans-serif;

    font-size:21px;

    font-weight:600;

    color:#0B2C5F;

    min-height:55px;

    margin-bottom:20px;

}



.formation-content h5{

    font-family:'Cairo',sans-serif;

    font-size:18px;

    font-weight:700;

    color:#007BFF;

    margin-bottom:10px;

}



.formation-content .arabic{

    font-family:'Cairo',sans-serif;

    direction:rtl;

    font-size:18px;

    color:#444;

    margin-bottom:30px;

}




/*
   BOUTON
==================================================*/


.formation-btn{

    display:inline-block;

    padding:12px 25px;

    border-radius:30px;

    background:#007BFF;

    color:white;

    text-decoration:none;

    font-family:'Poppins',sans-serif;

    font-size:14px;

    font-weight:500;

    transition:0.3s;

}



.formation-btn:hover{

    background:#0B2C5F;

    color:white;

}



/*
   CARTE BACHELOR
==================================================*/


.formation-card.bachelor::before{

    background:#F59E0B;

}


.formation-card.bachelor .formation-icon{

    background:#FFF4DD;

}


.formation-card.bachelor .formation-icon i{

    color:#F59E0B;

}

/* ==========================================
   RESPONSIVE BLOC 4 : PRESENTATION IET
========================================== */


/* ==========================
   TABLETTES
   577px - 991px
========================== */

@media (max-width:991px){

    .about-container{

        width:85%;
        flex-direction:column;
        gap:40px;

    }


    .about-image,
    .about-content{

        width:100%;

    }


    .about-image img{

        height:400px;

    }


    .about-content h2{

        font-size:34px;

    }


    .about-content p{

        font-size:17px;

    }

}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){

    .about{

        padding:20px 0;

    }


    .about-container{

        width:90%;
        gap:25px;

    }


    .about-image img{

        height:280px;
        border-radius:10px;

    }


    .about-content{

        padding:20px;

    }


    .section-subtitle{

        font-size:14px;
        letter-spacing:1px;

    }


    .about-content h2{

        font-size:26px;
        line-height:1.4;
        margin-bottom:20px;

    }


    .about-content p{

        font-size:16px;
        line-height:1.7;

    }


    .about-features{

        grid-template-columns:1fr;
        gap:15px;
        margin-bottom:30px;

    }


    .feature span{

        font-size:15px;

    }


    .btn-about{

        padding:12px 25px;
        font-size:15px;

    }

}



/*==================================================
   BLOC 5 - EFFETS HOVER ET ANIMATIONS
==================================================*/


/*
  ANIMATION D'APPARITION DES CARTES
--------------------------------------------------*/

.formation-card{

    opacity:0;
    transform:translateY(40px);

    animation:formationAppear 0.8s ease forwards;
    border-left:2px solid rgba(0,123,255,0.6);

    border-right:2px solid rgba(0,123,255,0.6);
    border-bottom:2px solid rgba(0,123,255,0.6);

}


/* apparition progressive */

.formation-card:nth-child(1){
    animation-delay:0.1s;
}

.formation-card:nth-child(2){
    animation-delay:0.2s;
}

.formation-card:nth-child(3){
    animation-delay:0.3s;
}

.formation-card:nth-child(4){
    animation-delay:0.4s;
}

.formation-card:nth-child(5){
    animation-delay:0.5s;
}

.formation-card:nth-child(6){
    animation-delay:0.6s;
}



@keyframes formationAppear{

    from{

        opacity:0;
        transform:translateY(40px);

    }


    to{

        opacity:1;
        transform:translateY(0);

    }

}



/*
  EFFET HOVER SUR LA CARTE
--------------------------------------------------*/


.formation-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 20px 45px rgba(0,123,255,0.18);

}



/*
  ANIMATION DE L'ICONE
--------------------------------------------------*/


.formation-icon{

    transition:0.4s ease;

}



.formation-card:hover .formation-icon{

    transform:rotateY(360deg);

    background:#007BFF;

}



.formation-card:hover .formation-icon i{

    color:white;

}



/*
  ANIMATION DU TITRE DE LA FORMATION
--------------------------------------------------*/


.formation-content h4{

    transition:0.3s ease;

}



.formation-card:hover h4{

    color:#007BFF;

}



/*
  ANIMATION DU BOUTON
--------------------------------------------------*/


.formation-btn{

    position:relative;

    overflow:hidden;

    z-index:1;

}



/* effet de remplissage */

.formation-btn::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:0%;
    height:100%;

    background:#0B2C5F;

    transition:0.4s ease;

    z-index:-1;

}



.formation-btn:hover::before{

    width:100%;

}



.formation-btn:hover{

    color:white;

}



/*
  EFFET SUR LE TRAIT SUPERIEUR DE LA CARTE
*/


.formation-card::before{

    transition:0.4s ease;

}



.formation-card:hover::before{

    height:8px;

}



/*
  ANIMATION DU BACHELOR
*/


.formation-card.bachelor:hover{

    box-shadow:
    0 20px 45px rgba(245,158,11,0.25);

}


.formation-card.bachelor:hover .formation-icon{

    background:#F59E0B;

}


.formation-card.bachelor:hover .formation-icon i{

    color:white;

}
/*
   LOGO IET EN FILIGRANE
*/


.formation-card{

    position:relative;
    overflow:hidden;

}



/* IMAGE DU LOGO */

/*   LOGO IET FILIGRANE CENTRE DE LA CARTE*/


.watermark-logo{

    position:absolute;

    width:300px;

    height:auto;

    left:50%;

    top:50%;

    transform:translate(-50%, -50%);

    opacity:0.05;

    z-index:0;

    pointer-events:none;

    transition:0.5s ease;

}



/* CONTENU AU-DESSUS DU LOGO */

.formation-icon,
.formation-content{

    position:relative;

    z-index:1;

}



/* EFFET AU SURVOL */

.formation-card:hover .watermark-logo{

    opacity:0.10;

    transform:translate(-50%, -50%) scale(1.1);

}

/* ==========================================
   RESPONSIVE BLOC 5 : NOS FILIÈRES
========================================== */


/* ==========================
   TABLETTES
   577px - 991px
========================== */

@media (max-width:991px){


    .formations{
        padding:40px 0 70px;
    }


    .formations .container{

        width:85%;

    }


    .section-title-box{

        padding:20px 35px;
        margin-bottom:35px;

    }


    .section-title-box h2{

        font-size:28px;

    }


    .formations-cards{

        grid-template-columns:repeat(2,1fr);
        gap:25px;

    }


    .formation-card{

        padding:30px 20px;

    }


    .formation-content h4{

        font-size:19px;

    }

}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){


    .formations{

        padding:30px 0 50px;

    }


    .formations .container{

        width:90%;

    }


    .section-title-box{

        width:100%;
        padding:20px;

    }


    .section-title-box h2{

        font-size:26px;

    }


    .section-title-box p{

        font-size:15px;

    }


    .formations-cards{

        grid-template-columns:1fr;
        gap:25px;

    }


    .formation-card{

        padding:30px 20px;

    }


    .formation-icon{

        width:65px;
        height:65px;

    }


    .formation-icon img{

        max-width:45px;

    }


    .formation-content h3{

        font-size:14px;

    }


    .formation-content h4{

        font-size:20px;
        min-height:auto;

    }


    .formation-content h5{

        font-size:17px;

    }


    .formation-content .arabic{

        font-size:17px;

    }


    .formation-btn{

        padding:11px 22px;
        font-size:13px;

    }


    .watermark-logo{

        width:220px;

    }

}

/*==================================================
  BLOC 6 - VIDEOS ET TEMOIGNAGES
==================================================*/

.videos-section{
    padding:10px 0;
    background:#F8FAFC;
}


.videos-section .container{
    width:90%;
    max-width:1400px;
    margin:auto;
}


/* TITRE */

.videos-section .section-title{
    text-align:center;
    margin-bottom:60px;
}


.videos-section .section-title h2{
    font-size:36px;
    color:#0F172A;
    font-weight:700;
    margin-bottom:15px;
}


.videos-section .section-title p{
    font-size:17px;
    color:#64748B;
}


/* CONTENEUR DES VIDEOS */

.videos-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}


/* CARTE VIDEO */

.video-card{

    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s ease;

}


.video-card:hover{

    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);

}



/* VIDEO */

.video-wrapper{

    position:relative;
    width:100%;
    aspect-ratio:16/9;

}


.video-wrapper iframe{

    width:100%;
    height:100%;
    border:0;

}



/* TEXTE SOUS VIDEO */

.video-card h3{

    font-size:20px;
    color:#004AAD;
    margin:20px 20px 10px;
    font-weight:700;

}


.video-card p{

    font-size:15px;
    line-height:1.6;
    color:#475569;
    margin:0 20px 25px;

}

/* ==========================================
   RESPONSIVE BLOC 6 : VIDEOS
========================================== */


/* ==========================
   TABLETTES
   577px - 991px
========================== */

@media (max-width:991px){


    .videos-section{
        padding:40px 0;
    }


    .videos-section .container{

        width:85%;

    }


    .videos-section .section-title{

        margin-bottom:40px;

    }


    .videos-section .section-title h2{

        font-size:30px;

    }


    .videos-container{

        grid-template-columns:repeat(2,1fr);
        gap:25px;

    }


    .video-card h3{

        font-size:18px;

    }

}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){


    .videos-section{

        padding:30px 0;

    }


    .videos-section .container{

        width:90%;

    }


    .videos-section .section-title{

        margin-bottom:30px;

    }


    .videos-section .section-title h2{

        font-size:25px;
        line-height:1.4;

    }


    .videos-section .section-title p{

        font-size:15px;

    }


    .videos-container{

        grid-template-columns:1fr;
        gap:25px;

    }


    .video-card h3{

        font-size:18px;
        margin:15px 15px 10px;

    }


    .video-card p{

        font-size:14px;
        margin:0 15px 20px;

    }

}

/*==================================================
  BLOC 7 - ACTUALITÉS & ÉVÉNEMENTS
==================================================*/

.news-section{
    padding:100px 0;
    background:#FFFFFF;
}


/* CONTENEUR */

.news-section .container{
    width:90%;
    max-width:1400px;
    margin:auto;
}


/* TITRE */

.news-section .section-title{
    text-align:center;
    margin-bottom:60px;
}

.news-section .section-title h2{
    font-size:36px;
    font-weight:700;
    color:#0B2C5F;
    margin-bottom:15px;
}

.news-section .section-title p{
    font-size:17px;
    color:#64748B;
}


/* CARTES */

.news-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}


/* UNE CARTE */

.news-card{

    background:#fff;
    border-radius:18px;
    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

    transition:0.35s;

}


.news-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 18px 40px rgba(0,123,255,0.18);

}


/* IMAGE */

.news-card img{

    width:100%;
    height:240px;
    object-fit:cover;
    display:block;

}


/* CONTENU */

.news-content{

    padding:25px;

}


/* DATE */

.news-date{

    display:inline-block;

    background:#EAF3FF;

    color:#007BFF;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}


/* TITRE */

.news-content h3{

    font-size:22px;

    color:#0B2C5F;

    margin-bottom:18px;

    line-height:1.4;

}


/* TEXTE */

.news-content p{

    font-size:15px;

    color:#555;

    line-height:1.8;

}
.arabic-text {
    direction: rtl;
    text-align: right;
}


/* TEXTE CACHE */

.more-text{

    display:none;

    margin-top:18px;

}


/* BOUTON */

.read-more-btn{

    margin-top:22px;

    padding:12px 25px;

    background:#007BFF;

    color:#fff;

    border:none;

    border-radius:30px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}


.read-more-btn:hover{

    background:#0B2C5F;

}

/* ==========================================
   RESPONSIVE BLOC 7 : ACTUALITES
========================================== */


/* ==========================
   TABLETTES
   577px - 991px
========================== */

@media (max-width:991px){


    .news-section{

        padding:70px 0;

    }


    .news-section .container{

        width:85%;

    }


    .news-section .section-title{

        margin-bottom:40px;

    }


    .news-section .section-title h2{

        font-size:30px;

    }


    .news-container{

        grid-template-columns:repeat(2,1fr);
        gap:25px;

    }


    .news-card img{

        height:220px;

    }


    .news-content{

        padding:20px;

    }


    .news-content h3{

        font-size:20px;

    }

}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){


    .news-section{

        padding:50px 0;

    }


    .news-section .container{

        width:90%;

    }


    .news-section .section-title h2{

        font-size:25px;
        line-height:1.4;

    }


    .news-section .section-title p{

        font-size:15px;

    }


    .news-container{

        grid-template-columns:1fr;
        gap:25px;

    }


    .news-card img{

        height:200px;

    }


    .news-content{

        padding:18px;

    }


    .news-date{

        font-size:12px;
        padding:5px 12px;

    }


    .news-content h3{

        font-size:19px;

    }


    .news-content p{

        font-size:14px;
        line-height:1.7;

    }


    .read-more-btn{

        padding:10px 22px;
        font-size:14px;

    }

}

/*==================================================
  BLOC 8 - GALERIE PHOTOS
==================================================*/

.gallery-section{
    padding:100px 0;
    background:#F8FAFC;
}


/*==================================================
  CONTENEUR
==================================================*/

.gallery-section .container{
    width:90%;
    max-width:1400px;
    margin:auto;
}


/*==================================================
  TITRE
==================================================*/

.gallery-section .section-title{
    text-align:center;
    margin-bottom:60px;
}


.gallery-section .section-title h2{
    font-size:36px;
    font-weight:700;
    color:#0B2C5F;
    margin-bottom:15px;
}


.gallery-section .section-title p{
    font-size:17px;
    color:#64748B;
}


/*==================================================
  GRILLE
==================================================*/

.gallery-container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}


/*==================================================
  PHOTO
==================================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(0,0,0,.10);

    transition:.35s;

}


.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,74,173,.18);

}


/*==================================================
  IMAGE
==================================================*/

.gallery-item img{

    width:100%;
    height:250px;

    object-fit:cover;

    display:block;

    transition:.50s;

}


.gallery-item:hover img{

    transform:scale(1.10);

}


/*==================================================
  VOILE BLEU
==================================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,74,173,.45);

    opacity:0;

    transition:.35s;

    z-index:1;

}


.gallery-item:hover::before{

    opacity:1;

}


/*==================================================
  LOUPE
==================================================*/

.gallery-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.35s;

    z-index:2;

}


.gallery-item:hover .gallery-overlay{

    opacity:1;

}


.gallery-overlay i{

    width:65px;
    height:65px;

    border-radius:50%;

    background:#ffffff;

    color:#004AAD;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    transition:.35s;

}


.gallery-item:hover .gallery-overlay i{

    transform:scale(1.15);

}


/*==================================================
  LIGHTBOX RESPONSIVE
==================================================*/

.lightbox{

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

    width:100%;
    height:100%;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;
    align-items:center;

    padding:20px;

    z-index:9999;

    overflow:hidden;

}


.lightbox-image{

    max-width:100%;
    max-height:90vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:12px;

}


/* BOUTON FERMER */

.close-lightbox{

    position:absolute;

    top:15px;
    right:20px;

    color:white;

    font-size:45px;

    cursor:pointer;

    z-index:10000;

}

.close-lightbox:hover{

    color:#FFD200;

}

/* ==========================================
   RESPONSIVE BLOC 8 : GALERIE PHOTOS
========================================== */


/* ==========================
   TABLETTES
   577px - 991px
========================== */

@media (max-width:991px){


    .gallery-section{

        padding:70px 0;

    }


    .gallery-section .container{

        width:85%;

    }


    .gallery-section .section-title{

        margin-bottom:40px;

    }


    .gallery-section .section-title h2{

        font-size:30px;

    }


    .gallery-container{

        grid-template-columns:repeat(2,1fr);
        gap:20px;

    }


    .gallery-item img{

        height:220px;

    }

}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){


    .gallery-section{

        padding:50px 0;

    }


    .gallery-section .container{

        width:90%;

    }


    .gallery-section .section-title h2{

        font-size:25px;

    }


    .gallery-section .section-title p{

        font-size:15px;

    }


    .gallery-container{

        grid-template-columns:1fr;
        gap:20px;

    }


    .gallery-item img{

        height:230px;

    }


    .gallery-overlay i{

        width:55px;
        height:55px;
        font-size:24px;

    }


    .lightbox-image{

        max-width:95%;
        max-height:80%;

    }


    .close-lightbox{

        top:15px;
        right:20px;
        font-size:45px;

    }
    .lightbox{

        padding:10px;

    }


    .lightbox-image{

        width:100%;
        max-width:100%;
        max-height:80vh;

    }


    .close-lightbox{

        top:10px;
        right:15px;

        font-size:40px;

    }

}

/*==================================================
    BLOC 9 - PIED DE PAGE (FOOTER)
==================================================*/

.footer{
    background:#03193d;
    color:#ffffff;
    padding-top:70px;
    font-family:Arial, Helvetica, sans-serif;
}

/*=========================
    CONTENEUR
=========================*/

.footer-container{
    width:90%;
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr 2fr 1.5fr;
    gap:50px;

    padding-bottom:20px;
}

/*=========================
    COLONNES
=========================*/

.footer-col h3{
    font-size:22px;
    color:#7EC8FF;
    margin-bottom:25px;
    position:relative;
}

.footer-col h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:60px;
    height:3px;
    background:#FFD54F;
    border-radius:5px;
}

/*=========================
    LOGO
=========================*/

.footer-logo{
    width:170px;
    margin-bottom:5px;
    height: 90px;
}

/*=========================
    TEXTE
=========================*/

.footer-text{
    color:#E5E7EB;
    font-size:15px;
    line-height:1.8;
    text-align:justify;
    margin-bottom:30px;
}

/*=========================
    LISTES
=========================*/

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-col ul li{
    margin-bottom:15px;
}

.footer-col ul li a{
    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.footer-col ul li a:hover{
    color:#FFD54F;
    padding-left:8px;
}

/*=========================
    CONTACT
=========================*/

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:1.7;
    color:#F1F5F9;
}

.footer-contact i{
    color:#FFD54F;
    font-size:18px;
    margin-top:3px;
    min-width:20px;
}

/*=========================
    RÉSEAUX SOCIAUX
=========================*/

.footer-social{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.footer-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    text-decoration:none;
    transition:.35s;
    font-size:18px;
}

.footer-social a:hover{
    background:#FFD54F;
    color:#0B3C8C;
    transform:translateY(-5px);
}

/*=========================
    BAS DU FOOTER
=========================*/

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    margin-top:20px;
    padding:25px 0;
}

.footer-bottom-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.footer-bottom p{
    margin:0;
    font-size:14px;
    color:#E2E8F0;
}

.footer-bottom .fa-heart{
    color:#ff4d6d;
}

/* ==========================================
   RESPONSIVE BLOC 9 : FOOTER
========================================== */


/* ==========================
   TABLETTES
   577px - 991px
========================== */

@media (max-width:991px){


    .footer{

        padding-top:50px;

    }


    .footer-container{

        width:85%;

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }


    .footer-logo{

        width:150px;
        height:auto;

    }


    .footer-col h3{

        font-size:20px;

    }


}



/* ==========================
   SMARTPHONES
   ≤ 576px
========================== */

@media (max-width:576px){


    .footer{

        padding-top:40px;

    }


    .footer-container{

        width:90%;

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }


    .footer-col h3::after{

        left:50%;

        transform:translateX(-50%);

    }


    .footer-logo{

        width:150px;

    }


    .footer-text{

        text-align:center;

        font-size:14px;

    }


    .footer-social{

        justify-content:center;

    }


    .footer-col ul li a:hover{

        padding-left:0;

    }


    .footer-contact li{

        justify-content:center;

        align-items:center;

    }


    .footer-bottom{

        margin-top:20px;

        text-align:center;

    }


    .footer-bottom-content{

        justify-content:center;

    }


    .footer-bottom p{

        font-size:13px;

        line-height:1.6;

    }

}

/* ==========================================================================================================
                                         CSS DE LA PAPAGE DIPLOMES-FORMATIONS.PHP 
============================================================================================================ */
/* =========================================================
   BLOC 3 : TITRE DIPLÔMES ET FORMATIONS
========================================================= */

.bloc3-titre {
    width: 100%;
    background: #cbe2e7;

    padding: 20px 20px 45px;
}


/* CONTENEUR */

.bloc3-titre-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}


/* TITRE */

.bloc3-titre h1 {
    margin: 0;

    color: #0b315f;

    font-family: "Arial", "Tahoma", sans-serif;

    font-size: 38px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;

    direction: rtl;

    letter-spacing: 0;
}


/* TRAITS DÉCORATIFS */

.bloc3-titre-decoration {
    width: 75px;
    height: 4px;

    background: #0878c9;

    border-radius: 10px;

    flex-shrink: 0;
}

/* =========================================================
   BLOC 3 : RESPONSIVE
========================================================= */


/* ---------------------------------------------------------
   TABLETTE
   768px à 1024px
--------------------------------------------------------- */

@media (max-width: 1024px) {

    .bloc3-titre {
        padding: 18px 15px 35px;
    }

    .bloc3-titre-container {
        width: 94%;
        gap: 18px;
    }

    .bloc3-titre h1 {
        font-size: 32px;
        line-height: 1.4;
    }

    .bloc3-titre-decoration {
        width: 55px;
        height: 3px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   Jusqu'à 767px
--------------------------------------------------------- */

@media (max-width: 767px) {

    .bloc3-titre {
        padding: 15px 10px 30px;
    }

    .bloc3-titre-container {
        width: 100%;
        gap: 12px;
    }

    .bloc3-titre h1 {
        font-size: 25px;
        line-height: 1.4;
        white-space: normal;
    }

    .bloc3-titre-decoration {
        width: 35px;
        height: 3px;
    }
}


/* ---------------------------------------------------------
   PETITS SMARTPHONES
   Jusqu'à 480px
--------------------------------------------------------- */

@media (max-width: 480px) {

    .bloc3-titre {
        padding: 12px 8px 25px;
    }

    .bloc3-titre-container {
        gap: 8px;
    }

    .bloc3-titre h1 {
        font-size: 21px;
        line-height: 1.5;
    }

    .bloc3-titre-decoration {
        width: 25px;
        height: 3px;
    }
}
/* =========================================================
   BLOC 4 : ORIENTATION
========================================================= */

.bloc4-orientation {
    width: 100%;
    height: 130px;

    position: relative;
    overflow: hidden;

    /* Départ au centre */
    clip-path: inset(0 50% 0 50%);

    animation: ouvertureBloc4 1.4s cubic-bezier(.25,.8,.25,1) forwards;
}


/* IMAGE */

.bloc4-image {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}


/* VOILE SUR L'IMAGE */

.bloc4-orientation::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(255, 255, 255, 0.65);

    z-index: 2;
}


/* =========================================================
   CONTENU
========================================================= */

.bloc4-container {
    position: relative;

    z-index: 3;

    width: 90%;
    max-width: 1300px;

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    opacity: 0;

    animation: apparitionContenu 0.8s ease forwards;

    animation-delay: 0.8s;
}


/* =========================================================
   TEXTE
========================================================= */

.bloc4-content {
    flex: 1;
}


.bloc4-content h2 {
    margin: 0 0 10px;

    color: #0b315f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 26px;

    font-weight: 700;

    white-space: nowrap;
}


.bloc4-content p {
    margin: 0;

    color: #333333;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   BOUTON WHATSAPP
========================================================= */

.bloc4-action {
    flex-shrink: 0;
}


.btn-whatsapp {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 15px 25px;

    background: #25d366;

    color: #ffffff;

    text-decoration: none;

    border-radius: 8px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 700;

    transition: all 0.3s ease;
}


.btn-whatsapp i {
    font-size: 23px;
}


.btn-whatsapp:hover {
    transform: translateY(-3px);

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ANIMATION : DU CENTRE VERS LES CÔTÉS
========================================================= */

@keyframes ouvertureBloc4 {

    0% {
        clip-path: inset(0 50% 0 50%);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }

}


/* =========================================================
   APPARITION DU CONTENU
========================================================= */

@keyframes apparitionContenu {

    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

/* =========================================================
   BLOC 4 : RESPONSIVE
========================================================= */


/* ---------------------------------------------------------
   TABLETTE
   768px à 1024px
--------------------------------------------------------- */

@media (max-width: 1024px) {

    .bloc4-orientation {
        height: 150px;
    }

    .bloc4-container {
        width: 94%;
        gap: 30px;
    }

    .bloc4-content h2 {
        font-size: 23px;
        white-space: normal;
    }

    .bloc4-content p {
        font-size: 15px;
        line-height: 1.5;
    }

    .btn-whatsapp {
        padding: 13px 20px;
        font-size: 15px;
    }

    .btn-whatsapp i {
        font-size: 21px;
    }
}


/* ---------------------------------------------------------
   MOBILE
   Jusqu'à 767px
--------------------------------------------------------- */

@media (max-width: 767px) {

    .bloc4-orientation {
        height: auto;
        min-height: 230px;
    }

    .bloc4-container {
        width: 92%;
        height: auto;
        min-height: 230px;

        padding: 20px 0;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 18px;

        text-align: center;
    }


    /* TEXTE */

    .bloc4-content {
        width: 100%;
        flex: none;
    }

    .bloc4-content h2 {
        margin: 0 0 8px;

        font-size: 21px;
        line-height: 1.35;

        white-space: normal;
    }

    .bloc4-content p {
        font-size: 14px;
        line-height: 1.5;
    }


    /* BOUTON */

    .bloc4-action {
        width: 100%;

        display: flex;
        justify-content: center;
    }

    .btn-whatsapp {
        padding: 12px 20px;

        font-size: 14px;

        border-radius: 7px;

        width: auto;
        max-width: 100%;
    }

    .btn-whatsapp i {
        font-size: 21px;
    }
}


/* ---------------------------------------------------------
   PETITS SMARTPHONES
   Jusqu'à 480px
--------------------------------------------------------- */

@media (max-width: 480px) {

    .bloc4-orientation {
        min-height: 245px;
    }

    .bloc4-container {
        width: 90%;
        min-height: 245px;

        padding: 18px 0;

        gap: 16px;
    }


    /* TITRE */

    .bloc4-content h2 {
        font-size: 19px;
        line-height: 1.4;
    }


    /* PARAGRAPHE */

    .bloc4-content p {
        font-size: 13px;
        line-height: 1.55;
    }


    /* BOUTON */

    .btn-whatsapp {
        padding: 11px 17px;
        font-size: 13px;
    }

    .btn-whatsapp i {
        font-size: 19px;
    }
}

/* =========================================================
   BLOC 5 : DIPLÔMES
========================================================= */

.bloc5-diplomes {
    width: 100%;

    background: #ffffff;

    padding: 60px 0 70px;
}


/* CONTENEUR */

.bloc5-container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;

   }


/* =========================================================
   TITRE
========================================================= */

.bloc5-header {
    text-align: center;

    margin-bottom: 40px;
}


.bloc5-header h2 {
    margin: 0;

    color: #0b315f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 700;
}


.bloc5-header p {
    margin: 8px 0 0;

    color: #0878c9;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: 600;
}


/* =========================================================
   GRILLE
========================================================= */

.bloc5-cartes {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    align-items: center;
}


/* =========================================================
   CARTE
========================================================= */

.carte-filiere {

    display: block;

    border: 2px dashed #0d6efd;
    border-radius: 12px;

    overflow: hidden;

    padding: 8px;

    background: #ffffff;

    box-sizing: border-box;

}


/* IMAGE */

.carte-filiere img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;

}


/* =========================================================
   ANIMATION AU SURVOL
========================================================= */

.carte-filiere:hover {

    transform: scale(1.05);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.20);

}

/* =========================================================
   RESPONSIVE — BLOC 5 : DIPLÔMES
========================================================= */


/* =========================================================
   TABLETTE
   769px → 1100px
========================================================= */

@media (max-width: 1100px) {

    .bloc5-diplomes {
        padding: 50px 0 60px;
    }

    .bloc5-container {
        width: 92%;
    }

    .bloc5-header {
        margin-bottom: 30px;
    }

    .bloc5-header h2 {
        font-size: 30px;
    }

    .bloc5-header p {
        font-size: 17px;
    }

    .bloc5-cartes {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .carte-filiere {
        padding: 7px;
    }

}


/* =========================================================
   MOBILE
   481px → 768px
========================================================= */

@media (max-width: 768px) {

    .bloc5-diplomes {
        padding: 40px 0 50px;
    }

    .bloc5-container {
        width: 92%;
    }

    .bloc5-header {
        margin-bottom: 25px;
    }

    .bloc5-header h2 {
        font-size: 26px;
        line-height: 1.25;
    }

    .bloc5-header p {
        font-size: 16px;
        line-height: 1.4;
    }

    .bloc5-cartes {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .carte-filiere {
        width: 100%;
        padding: 7px;
    }

    .carte-filiere img {
        width: 100%;
        height: auto;
    }

    /* Désactivation de l'agrandissement trop important sur mobile */
    .carte-filiere:hover {
        transform: scale(1.02);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.15);
    }

}


/* =========================================================
   PETIT MOBILE
   320px → 480px
========================================================= */

@media (max-width: 480px) {

    .bloc5-diplomes {
        padding: 35px 0 45px;
    }

    .bloc5-container {
        width: 94%;
    }

    .bloc5-header {
        margin-bottom: 22px;
    }

    .bloc5-header h2 {
        font-size: 23px;
        line-height: 1.3;
    }

    .bloc5-header p {
        font-size: 15px;
        line-height: 1.4;
    }

    .bloc5-cartes {
        gap: 16px;
    }

    .carte-filiere {
        padding: 6px;
        border-width: 2px;
        border-radius: 10px;
    }

    .carte-filiere img {
        border-radius: 8px;
    }

    .carte-filiere:hover {
        transform: scale(1.01);
    }

}

/* =========================================================
   BLOC 6 : LICENCES PROFESSIONNELLES
========================================================= */

.bloc6-licences {
    width: 100%;

    background: #f5f8fc;

    padding: 60px 0 70px;
}


/* CONTENEUR */

.bloc6-container {
    width: 90%;
    max-width: 1300px;

    margin: auto;
}


/* =========================================================
   TITRE
========================================================= */

.bloc6-header {
    text-align: center;

    margin-bottom: 40px;
}


.bloc6-header h2 {
    margin: 0;

    color: #0b315f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 700;
}


.bloc6-header p {
    margin: 8px 0 0;

    color: #0878c9;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: 600;
}


/* =========================================================
   GRILLE
========================================================= */

.bloc6-cartes {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    align-items: center;
}


/* =========================================================
   CARTE
========================================================= */

.carte-licence {

    display: block;

    width: 100%;

    text-decoration: none;

    overflow: hidden;

    border-radius: 10px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* IMAGE */

.carte-licence img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;
}


/* =========================================================
   ANIMATION AU SURVOL
========================================================= */

.carte-licence:hover {

    transform: scale(1.05);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.20);
}

/* =========================================================
   RESPONSIVE — BLOC 6 : LICENCES PROFESSIONNELLES
========================================================= */


/* =========================================================
   TABLETTE
   769px → 1100px
========================================================= */

@media (max-width: 1100px) {

    .bloc6-licences {
        padding: 50px 0 60px;
    }

    .bloc6-container {
        width: 92%;
    }

    .bloc6-header {
        margin-bottom: 30px;
    }

    .bloc6-header h2 {
        font-size: 30px;
    }

    .bloc6-header p {
        font-size: 17px;
    }

    .bloc6-cartes {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .carte-licence {
        width: 100%;
    }

}


/* =========================================================
   MOBILE
   481px → 768px
========================================================= */

@media (max-width: 768px) {

    .bloc6-licences {
        padding: 40px 0 50px;
    }

    .bloc6-container {
        width: 92%;
    }

    .bloc6-header {
        margin-bottom: 25px;
    }

    .bloc6-header h2 {
        font-size: 26px;
        line-height: 1.25;
    }

    .bloc6-header p {
        font-size: 16px;
        line-height: 1.4;
    }

    .bloc6-cartes {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .carte-licence {
        width: 100%;
    }

    .carte-licence img {
        width: 100%;
        height: auto;
    }

    /* Effet plus discret sur téléphone */
    .carte-licence:hover {
        transform: scale(1.02);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.15);
    }

}


/* =========================================================
   PETIT MOBILE
   ≤ 480px
========================================================= */

@media (max-width: 480px) {

    .bloc6-licences {
        padding: 35px 0 45px;
    }

    .bloc6-container {
        width: 94%;
    }

    .bloc6-header {
        margin-bottom: 22px;
    }

    .bloc6-header h2 {
        font-size: 23px;
        line-height: 1.3;
    }

    .bloc6-header p {
        font-size: 15px;
        line-height: 1.4;
    }

    .bloc6-cartes {
        gap: 16px;
    }

    .carte-licence {
        border-radius: 9px;
    }

    .carte-licence img {
        border-radius: 9px;
    }

    .carte-licence:hover {
        transform: scale(1.01);
    }

}

/* =========================================================
   BLOC 7 : FORMATIONS CERTIFIANTES
========================================================= */

.bloc7-certifiantes {
    width: 100%;

    background: #ffffff;

    padding: 60px 0 70px;
}


/* =========================================================
   CONTENEUR
========================================================= */

.bloc7-container {
    width: 90%;
    max-width: 1300px;

    margin: auto;
}


/* =========================================================
   TITRE
========================================================= */

.bloc7-header {
    text-align: center;

    margin-bottom: 40px;
}


.bloc7-header h2 {
    margin: 0;

    color: #0b315f;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 34px;

    font-weight: 700;
}


.bloc7-header p {
    margin: 8px 0 0;

    color: #0878c9;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;

    font-weight: 600;
}


/* =========================================================
   GRILLE DES 9 CARTES
========================================================= */

.bloc7-cartes {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    align-items: center;
}


/* =========================================================
   CARTE
========================================================= */


.carte-certif {

    display: block;

    width: 100%;

    text-decoration: none;

    overflow: hidden;

    border-radius: 10px;

    /* BORDURE */
    border: 2px solid #064780;

    /* OMBRE */
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.18);

    background: #ffffff;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

/* =========================================================
   IMAGE
========================================================= */

.carte-certif img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 10px;
}


/* =========================================================
   ANIMATION AU SURVOL
========================================================= */

.carte-certif:hover {

    transform: scale(1.05);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.20);
}

/* =========================================================
   RESPONSIVE — BLOC 7 : FORMATIONS CERTIFIANTES
========================================================= */


/* =========================================================
   TABLETTE
   769px → 1100px
========================================================= */

@media (max-width: 1100px) {

    .bloc7-certifiantes {
        padding: 50px 0 60px;
    }

    .bloc7-container {
        width: 92%;
    }

    .bloc7-header {
        margin-bottom: 30px;
    }

    .bloc7-header h2 {
        font-size: 30px;
    }

    .bloc7-header p {
        font-size: 17px;
    }

    .bloc7-cartes {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .carte-certif {
        width: 100%;
    }

}


/* =========================================================
   MOBILE
   481px → 768px
========================================================= */

@media (max-width: 768px) {

    .bloc7-certifiantes {
        padding: 40px 0 50px;
    }

    .bloc7-container {
        width: 92%;
    }

    .bloc7-header {
        margin-bottom: 25px;
    }

    .bloc7-header h2 {
        font-size: 26px;
        line-height: 1.25;
    }

    .bloc7-header p {
        font-size: 16px;
        line-height: 1.4;
    }

    .bloc7-cartes {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .carte-certif {
        width: 100%;
    }

    .carte-certif img {
        width: 100%;
        height: auto;
    }

    /* Effet plus léger sur écran tactile */
    .carte-certif:hover {
        transform: scale(1.02);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.15);
    }

}


/* =========================================================
   PETIT MOBILE
   ≤ 480px
========================================================= */

@media (max-width: 480px) {

    .bloc7-certifiantes {
        padding: 35px 0 45px;
    }

    .bloc7-container {
        width: 94%;
    }

    .bloc7-header {
        margin-bottom: 22px;
    }

    .bloc7-header h2 {
        font-size: 23px;
        line-height: 1.3;
    }

    .bloc7-header p {
        font-size: 15px;
        line-height: 1.4;
    }

    .bloc7-cartes {
        gap: 16px;
    }

    .carte-certif {
        border-radius: 9px;
        border-width: 2px;
    }

    .carte-certif img {
        border-radius: 8px;
    }

    .carte-certif:hover {
        transform: scale(1.01);
    }

}
/* =========================================================
   BLOC 8 : CONSEILLER WHATSAPP
========================================================= */

.bloc8-conseiller {

    width: 100%;
    height: 160px;

    position: relative;

    overflow: hidden;

    margin-bottom: 20px;
}


/* =========================================================
   IMAGE
========================================================= */

.bloc8-image {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================================
   CONTENU
========================================================= */

.bloc8-contenu {

    position: relative;

    z-index: 2;

    width: 90%;
    max-width: 1300px;

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;
}


/* =========================================================
   BOUTON À GAUCHE
========================================================= */

.bloc8-action {

    flex: 0 0 auto;
}


/* =========================================================
   BOUTON WHATSAPP
========================================================= */

.bloc8-whatsapp {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 28px;

    background: #25d366;

    color: #ffffff;

    text-decoration: none;

    border-radius: 8px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   ICÔNE WHATSAPP
========================================================= */

.bloc8-whatsapp i {

    font-size: 24px;
}


/* =========================================================
   TEXTE ARABE À DROITE
========================================================= */

.bloc8-texte {

    flex: 1;

    max-width: 700px;

    text-align: right;

    color: #130369;

    font-family: Arial, Helvetica, sans-serif;
}


.bloc8-texte p {

    margin: 0;

    font-size: 25px;

    line-height: 1.8;

    font-weight: 600;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.65);
}


/* =========================================================
   ANIMATION AU SURVOL
========================================================= */

.bloc8-whatsapp:hover {

    transform: scale(1.06);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.30);
}

/* =========================================================
   RESPONSIVE — BLOC 8 : CONSEILLER WHATSAPP
========================================================= */


/* =========================================================
   TABLETTE
   769px → 1100px
========================================================= */

@media (max-width: 1100px) {

    .bloc8-conseiller {
        height: 170px;
    }

    .bloc8-contenu {
        width: 92%;
        gap: 30px;
    }

    .bloc8-whatsapp {
        padding: 14px 24px;
        font-size: 15px;
    }

    .bloc8-whatsapp i {
        font-size: 22px;
    }

    .bloc8-texte {
        max-width: 600px;
    }

    .bloc8-texte p {
        font-size: 21px;
        line-height: 1.6;
    }

}


/* =========================================================
   MOBILE
   481px → 768px
========================================================= */

@media (max-width: 768px) {

    .bloc8-conseiller {
        height: auto;

        min-height: 260px;

        margin-bottom: 15px;
    }

    .bloc8-contenu {

        width: 92%;

        min-height: 260px;

        height: auto;

        padding: 25px 0;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 20px;
    }


    /* TEXTE */

    .bloc8-texte {

        order: 1;

        width: 100%;

        max-width: none;

        text-align: center;
    }

    .bloc8-texte p {

        font-size: 20px;

        line-height: 1.7;

        font-weight: 600;
    }


    /* BOUTON */

    .bloc8-action {

        order: 2;

        width: 100%;

        display: flex;

        justify-content: center;
    }

    .bloc8-whatsapp {

        padding: 14px 24px;

        font-size: 15px;

        border-radius: 8px;
    }

    .bloc8-whatsapp i {
        font-size: 22px;
    }


    /* EFFET HOVER */

    .bloc8-whatsapp:hover {

        transform: scale(1.03);

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.25);
    }

}


/* =========================================================
   PETIT MOBILE
   ≤ 480px
========================================================= */

@media (max-width: 480px) {

    .bloc8-conseiller {

        min-height: 280px;
    }

    .bloc8-contenu {

        width: 94%;

        min-height: 280px;

        padding: 25px 0;

        gap: 18px;
    }


    /* TEXTE ARABE */

    .bloc8-texte p {

        font-size: 18px;

        line-height: 1.7;

        font-weight: 600;
    }


    /* BOUTON */

    .bloc8-whatsapp {

        padding: 13px 20px;

        font-size: 14px;

        gap: 8px;

        width: auto;

        max-width: 95%;

        text-align: center;
    }

    .bloc8-whatsapp i {

        font-size: 21px;
    }


    .bloc8-whatsapp:hover {

        transform: scale(1.02);
    }

}


/* ==========================================================================================================
                                         CSS DE LA PAPAGE DEMANDE D'INSCRIPTION
============================================================================================================ */

/* =========================================================
   BLOC 3 : DEMANDE D'INSCRIPTION
========================================================= */

.bloc3-inscription {
    width: 100%;
    padding: 50px 0 70px;
    background: #f5f8fc;
}


/* =========================================================
   TITRE DU BLOC
========================================================= */

.bloc3-inscription-header {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.bloc3-inscription-header h2 {
    margin: 0;
    color: #0b4f8a;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

.bloc3-inscription-container {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   PARTIE GAUCHE : IMAGE
========================================================= */

.bloc3-inscription-image {
    width: 50%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.bloc3-inscription-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   PARTIE DROITE : FORMULAIRE
========================================================= */

.bloc3-inscription-form {
    width: 50%;
    padding: 25px;
    box-sizing: border-box;
    border: 1px solid #978f8f;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
}


/* =========================================================
   FORMULAIRE
========================================================= */

#inscriptionForm {
    width: 100%;
}


/* =========================================================
   LIGNES DU FORMULAIRE
========================================================= */

.form-row {
    width: 100%;
    display: flex;
    gap: 25px;
    margin-bottom: 0;
}


/* =========================================================
   CHAMPS
========================================================= */

.form-group {
    flex: 1;
    position: relative;
}


/* =========================================================
   CHAMPS AVEC LABEL FLOTTANT
   PRÉNOM / NOM / TÉLÉPHONE / EMAIL
========================================================= */

.floating-field {
    position: relative;
    height: 58px;
    margin-bottom: 25px;
}


/* =========================================================
   INPUT
========================================================= */

.floating-field input {
    width: 100%;
    height: 58px;
    padding: 20px 5px 5px;
    border: none;
    border-bottom: 2px solid #b8b8b8;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.25s ease;
}


/* =========================================================
   LABEL AU REPOS
========================================================= */

.floating-field label {
    position: absolute;
    left: 5px;
    top: 22px;
    color: #888;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;

    transition:
        top 0.25s ease,
        font-size 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   ASTÉRISQUE
========================================================= */

.floating-field label span {
    color: #888;
}


/* =========================================================
   SURVOL
========================================================= */

.floating-field:hover input {
    border-bottom-color: #1976b9;
}


/* =========================================================
   FOCUS
========================================================= */

.floating-field input:focus {
    border-bottom-color: #1976b9;
}


/* =========================================================
   LABEL LORSQUE LE CHAMP EST ACTIF
========================================================= */

.floating-field input:focus + label {
    top: 0;
    color: #1976b9;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   ASTÉRISQUE DU LABEL ACTIF
========================================================= */

.floating-field input:focus + label span {
    color: #1976b9;
}


/* =========================================================
   PLACEHOLDER CACHÉ AU REPOS
========================================================= */

.floating-field input::placeholder {
    color: transparent;
    opacity: 0;
    transition: opacity 0.25s ease;
}


/* =========================================================
   PLACEHOLDER VISIBLE AU FOCUS
========================================================= */

.floating-field input:focus::placeholder {
    color: #999;
    opacity: 1;
}


/* =========================================================
   LABEL RESTE EN HAUT APRÈS LA SAISIE
========================================================= */

.floating-field input:not(:placeholder-shown) + label {
    top: 0;
    color: #1976b9;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   ASTÉRISQUE APRÈS LA SAISIE
========================================================= */

.floating-field input:not(:placeholder-shown) + label span {
    color: #1976b9;
}


/* =========================================================
   PLACEHOLDER INVISIBLE APRÈS AVOIR QUITTÉ LE CHAMP
========================================================= */

.floating-field input:not(:focus)::placeholder {
    color: transparent;
    opacity: 0;
}


/* =========================================================
   LISTE DÉROULANTE : DERNIER DIPLÔME
========================================================= */

.floating-select {
    position: relative;
    height: 58px;
    margin-bottom: 30px;
}


/* =========================================================
   LABEL DU SELECT
========================================================= */

.floating-select label {
    position: absolute;
    left: 5px;
    top: 22px;
    color: #888;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;

    transition:
        top 0.25s ease,
        font-size 0.25s ease,
        color 0.25s ease;

    z-index: 3;
}


/* =========================================================
   SELECT
========================================================= */

.floating-select select {
    width: 100%;
    height: 58px;
    padding: 20px 30px 5px 5px;
    border: none;
    border-bottom: 2px solid #b8b8b8;
    border-radius: 0;
    background: transparent;
    color: transparent;
    font-size: 15px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;

    transition:
        border-color 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   SURVOL SELECT
========================================================= */

.floating-select:hover select {
    border-bottom-color: #1976b9;
}


/* =========================================================
   FLÈCHE
========================================================= */

.floating-select::after {
    content: "\f078";
    position: absolute;
    right: 5px;
    bottom: 18px;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: #888;

    pointer-events: none;

    transition: color 0.25s ease;
}


/* =========================================================
   FLÈCHE AU SURVOL
========================================================= */

.floating-select:hover::after {
    color: #1976b9;
}


/* =========================================================
   FOCUS SELECT
========================================================= */

.floating-select:focus-within select {
    border-bottom-color: #1976b9;
    color: #999;
}


/* =========================================================
   FLÈCHE AU FOCUS
========================================================= */

.floating-select:focus-within::after {
    color: #1976b9;
}


/* =========================================================
   LABEL MONTE LORS DU CLIC
========================================================= */

.floating-select:focus-within label {
    top: 0;
    color: #1976b9;
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   TEXTE APRÈS LE CLIC
========================================================= */

.floating-select:focus-within select {
    color: #999;
}


/* =========================================================
   OPTIONS DU SELECT
========================================================= */

.floating-select select option {
    color: #555;
    background: #ffffff;
}


/* =========================================================
   TYPE DE FORMATION
========================================================= */

.formation-choice {
    width: 100%;
    margin-top: 5px;
}


/* =========================================================
   TITRE TYPE DE FORMATION
========================================================= */

.formation-choice h3 {
    margin: 0 0 18px;
    color: #444;
    font-size: 16px;
    font-weight: 600;
}


/* =========================================================
   OPTIONS DE FORMATION
   2 COLONNES SUR ORDINATEUR
========================================================= */

.formation-radio-options {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
}


/* =========================================================
   OPTION RADIO
========================================================= */

.formation-radio-option {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;
    height: 25px;
    padding: 0 8px;

    box-sizing: border-box;
    cursor: pointer;
    border-radius: 0;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   RADIO NATIF CACHÉ
========================================================= */

.formation-radio-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   CERCLE RADIO
========================================================= */

.radio-circle {
    width: 17px;
    height: 17px;
    min-width: 17px;

    border: 2px solid #aeb7c2;
    border-radius: 50%;

    margin-right: 10px;

    box-sizing: border-box;
    position: relative;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


/* =========================================================
   RADIO SÉLECTIONNÉ
========================================================= */

.formation-radio-option input:checked + .radio-circle {
    border-color: #1976b9;
    background: #1976b9;
}


/* =========================================================
   POINT CENTRAL
========================================================= */

.formation-radio-option input:checked + .radio-circle::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: #ffffff;
    border-radius: 50%;
}


/* =========================================================
   TEXTE RADIO
========================================================= */

.radio-label {
    color: #555;
    font-size: 14px;
    font-weight: 500;

    transition: color 0.25s ease;
}


/* =========================================================
   SURVOL
========================================================= */

.formation-radio-option:hover {
    background: #f4f8fc;
}


/* =========================================================
   CERCLE AU SURVOL
========================================================= */

.formation-radio-option:hover .radio-circle {
    border-color: #1976b9;
}


/* =========================================================
   OPTION SÉLECTIONNÉE
========================================================= */

.formation-radio-option:has(input:checked) {
    background: #f1f7fc;
}


/* =========================================================
   TEXTE SÉLECTIONNÉ
========================================================= */

.formation-radio-option input:checked ~ .radio-label {
    color: #0b4f8a;
    font-weight: 600;
}


/* =========================================================
   CONTENEUR DES FILIÈRES
========================================================= */

.filieres-container {
    display: none;

    width: 100%;
    margin-top: 18px;
    padding: 15px;

    box-sizing: border-box;

    border: 1px solid #d9e2ec;
    border-left: 4px solid #1976b9;
    border-radius: 8px;

    background: #f8fafc;
}


/* =========================================================
   TITRE DES FILIÈRES
========================================================= */

.filieres-container h4 {
    margin: 0 0 12px 0;

    font-size: 16px;
    font-weight: 600;

    color: #1f4e79;
    text-align: left;
}


/* =========================================================
   LISTE DES FILIÈRES
========================================================= */

.filieres-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 4px;

    width: 100%;
}


/* =========================================================
   OPTION FILIÈRE
========================================================= */

.filiere-option {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    margin: 0;
    padding: 0 10px;

    box-sizing: border-box;

    border: 1px solid #d5dce5;
    border-radius: 5px;

    background: #ffffff;

    cursor: pointer;

    transition: all 0.2s ease;
}


/* =========================================================
   RADIO FILIÈRE
========================================================= */

.filiere-option input[type="radio"] {
    margin: 0 8px 0 0;

    width: 16px;
    height: 16px;

    cursor: pointer;

    accent-color: #1f4e79;
}


/* =========================================================
   TEXTE DE LA FILIÈRE
========================================================= */

.filiere-label {
    font-size: 14px;
    line-height: 1.2;

    color: #1f4e79;

    cursor: pointer;
}


/* =========================================================
   SURVOL FILIÈRE
========================================================= */

.filiere-option:hover {
    border-color: #1f4e79;
    background: #f0f6fb;
}


/* =========================================================
   FILIÈRE SÉLECTIONNÉE
========================================================= */

.filiere-option:has(input[type="radio"]:checked) {
    border-color: #1f4e79;
    background: #eaf3fb;
}

.filiere-option:has(input[type="radio"]:checked) .filiere-label {
    color: #1f4e79;
    font-weight: 600;
}


/* =========================================================
   BOUTON ENVOYER
========================================================= */

.form-submit {
    width: 100%;
    margin-top: 25px;
    text-align: left;
}


/* =========================================================
   BOUTON
   ACTIF PAR DÉFAUT
========================================================= */

.btn-inscription {
    min-width: 230px;

    padding: 13px 15px;

    border: none;
    border-radius: 7px;

    background: #0b4f8a;
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   ICÔNE DU BOUTON
========================================================= */

.btn-inscription i {
    margin-right: 8px;
}


/* =========================================================
   SURVOL DU BOUTON
========================================================= */

.btn-inscription:hover {
    background: #083b68;

    transform: translateY(-2px);

    box-shadow:
        0 6px 15px rgba(11, 79, 138, 0.25);
}


/* =========================================================
   RESPONSIVE - BLOC 3
========================================================= */


/* =========================================================
   TABLETTES
   Écrans jusqu'à 1100px
========================================================= */

@media (max-width: 1100px) {

    .bloc3-inscription {
        padding: 40px 0 60px;
    }

    .bloc3-inscription-header {
        margin-bottom: 30px;
    }

    .bloc3-inscription-header h2 {
        font-size: 28px;
    }

    .bloc3-inscription-container {
        width: 94%;
    }

    .bloc3-inscription-image {
        width: 45%;
        min-height: 520px;
    }

    .bloc3-inscription-form {
        width: 55%;
        padding: 25px;
    }

    .form-row {
        gap: 15px;
    }

    .formation-radio-options {
        grid-template-columns: 1fr 1fr;
    }

    .radio-label {
        font-size: 13px;
    }

    .filieres-list {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   TABLETTES PETITES / GRANDS TÉLÉPHONES
   Écrans jusqu'à 768px
========================================================= */

@media (max-width: 768px) {

    .bloc3-inscription {
        padding: 35px 0 50px;
    }


    /* ---------- TITRE ---------- */

    .bloc3-inscription-header {
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .bloc3-inscription-header h2 {
        font-size: 25px;
        letter-spacing: 0.5px;
    }


    /* ---------- CONTENEUR PRINCIPAL ---------- */

    .bloc3-inscription-container {
        width: 94%;

        display: flex;
        flex-direction: column;

        border-radius: 12px;
    }


    /* ---------- IMAGE ---------- */

    .bloc3-inscription-image {
        width: 100%;

        min-height: 280px;
        height: 280px;
    }

    .bloc3-inscription-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* ---------- FORMULAIRE ---------- */

    .bloc3-inscription-form {
        width: 100%;

        padding: 25px 20px 30px;

        border: none;
        border-radius: 0;

        box-shadow: none;
    }


    /* ---------- PRÉNOM / NOM
       TÉLÉPHONE / EMAIL ---------- */

    .form-row {
        display: flex;
        flex-direction: column;

        gap: 0;

        width: 100%;
    }

    .floating-field {
        width: 100%;
        margin-bottom: 20px;
    }


    /* ---------- SELECT ---------- */

    .floating-select {
        width: 100%;
        margin-bottom: 25px;
    }


    /* ---------- TYPE DE FORMATION ---------- */

    .formation-choice {
        margin-top: 5px;
    }

    .formation-choice h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .formation-radio-options {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .formation-radio-option {
        height: 32px;
        padding: 0 5px;
    }

    .radio-label {
        font-size: 14px;
    }


    /* ---------- FILIÈRES ---------- */

    .filieres-container {
        margin-top: 18px;
        padding: 12px;
    }

    .filieres-container h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .filieres-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .filiere-option {
        min-height: 42px;
        padding: 0 10px;
    }

    .filiere-label {
        font-size: 13px;
        line-height: 1.3;
    }


    /* ---------- BOUTON ---------- */

    .form-submit {
        margin-top: 20px;
        text-align: center;
    }

    .btn-inscription {
        width: 100%;
        min-width: 0;

        padding: 13px 10px;

        font-size: 14px;
    }
}


/* =========================================================
   PETITS TÉLÉPHONES
   Écrans jusqu'à 480px
========================================================= */

@media (max-width: 480px) {

    .bloc3-inscription {
        padding: 25px 0 40px;
    }


    /* ---------- TITRE ---------- */

    .bloc3-inscription-header {
        margin-bottom: 20px;
    }

    .bloc3-inscription-header h2 {
        font-size: 21px;
        letter-spacing: 0;
    }


    /* ---------- CONTENEUR ---------- */

    .bloc3-inscription-container {
        width: 96%;
        border-radius: 10px;
    }


    /* ---------- IMAGE ---------- */

    .bloc3-inscription-image {
        height: 220px;
        min-height: 220px;
    }


    /* ---------- FORMULAIRE ---------- */

    .bloc3-inscription-form {
        padding: 20px 15px 25px;
    }


    /* ---------- CHAMPS ---------- */

    .floating-field {
        height: 54px;
        margin-bottom: 18px;
    }

    .floating-field input {
        height: 54px;
        font-size: 14px;
    }

    .floating-field label {
        font-size: 14px;
        top: 20px;
    }


    /* ---------- SELECT ---------- */

    .floating-select {
        height: 54px;
        margin-bottom: 22px;
    }

    .floating-select select {
        height: 54px;
        font-size: 14px;
    }

    .floating-select label {
        font-size: 14px;
        top: 20px;
    }


    /* ---------- TYPE DE FORMATION ---------- */

    .formation-choice h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .formation-radio-option {
        height: 34px;
    }

    .radio-circle {
        width: 16px;
        height: 16px;
        min-width: 16px;
        margin-right: 8px;
    }

    .radio-label {
        font-size: 13px;
    }


    /* ---------- FILIÈRES ---------- */

    .filieres-container {
        padding: 10px;
        margin-top: 15px;
    }

    .filieres-container h4 {
        font-size: 14px;
    }

    .filiere-option {
        min-height: 40px;
        padding: 0 8px;
    }

    .filiere-option input[type="radio"] {
        width: 15px;
        height: 15px;
        margin-right: 7px;
    }

    .filiere-label {
        font-size: 12.5px;
    }


    /* ---------- BOUTON ---------- */

    .btn-inscription {
        font-size: 13px;
        padding: 12px 8px;
    }
}


/* =========================================================
   TRÈS PETITS TÉLÉPHONES
   Écrans jusqu'à 360px
========================================================= */

@media (max-width: 360px) {

    .bloc3-inscription-container {
        width: 97%;
    }

    .bloc3-inscription-form {
        padding: 18px 12px 22px;
    }

    .bloc3-inscription-image {
        height: 190px;
        min-height: 190px;
    }

    .bloc3-inscription-header h2 {
        font-size: 19px;
    }

    .radio-label {
        font-size: 12px;
    }

    .filiere-label {
        font-size: 12px;
    }
}



/* =========================================================
   CSS DU MESSAGE APRES ENREGISTREMENT DES DONNEES
========================================================= */
/* =========================================================
   MESSAGE DE CONFIRMATION
   ========================================================= */

.message-confirmation {
    width: 100%;
    max-width: 700px;
    margin: 35px auto 20px auto;
    padding: 30px 25px;

    text-align: center;

    background: #f0f7ff;
    border: 1px solid #b8d8f5;
    border-radius: 12px;

    color: #0b5ea8;

    box-shadow: 0 5px 18px rgba(0, 80, 150, 0.12);

    box-sizing: border-box;
}


/* Icône */

.message-confirmation i {
    font-size: 42px;
    color: #0b72c9;
    margin-bottom: 15px;
}


/* Titre */

.message-confirmation h2 {
    margin: 0 0 15px 0;

    font-size: 24px;
    font-weight: 600;

    color: #075a9e;
}


/* Paragraphes */

.message-confirmation p {
    margin: 10px 0;

    font-size: 17px;
    line-height: 1.6;

    color: #245a80;
}


/* Numéro du candidat */

.message-confirmation strong {
    display: block;

    margin: 12px 0 15px 0;

    font-size: 25px;
    font-weight: 700;

    color: #006dcc;

    letter-spacing: 1px;
}


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

@media (max-width: 600px) {

    .message-confirmation {
        width: calc(100% - 20px);
        margin: 25px auto 15px auto;
        padding: 25px 15px;
    }


    .message-confirmation i {
        font-size: 36px;
    }


    .message-confirmation h2 {
        font-size: 20px;
    }


    .message-confirmation p {
        font-size: 15px;
    }


    .message-confirmation strong {
        font-size: 22px;
    }

}



/* ===========================================================================================================
                                    LE CSS DES PAGES DU DOSSIER FORMATIONS 
   ======================================================================================================= */

   /* ===========================================================================================================
                                    LE CSS DE LA PAGE ia.php 
   ======================================================================================================= */

  /* ==================================================
   BLOC 3 — BANNIÈRE DE LA FORMATION
================================================== */

.formation-banner {

    width: 100%;
    height: 360px;

    background-image: url("../images/formation-ia-big-data.jpg");

    background-size: cover;
    background-position: center;

    position: relative;

    overflow: hidden;
}


/* ==================================================
   VOILE SOMBRE
================================================== */

.formation-banner-overlay {

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.50);

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ==================================================
   CONTENU
================================================== */

.formation-banner-content {

    width: 100%;

    max-width: 1000px;

    padding: 30px 20px;

    color: #ffffff;
}


/* ==================================================
   BADGE — NIVEAU DU DIPLÔME
================================================== */

.formation-banner-badge {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.45);

    border-radius: 25px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: 0.4px;

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}


/* ==================================================
   TITRE PRINCIPAL
================================================== */

.formation-banner-content h1 {

    margin: 0;

    font-size: 52px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #ffffff;

    text-shadow:
        0 3px 8px rgba(0, 0, 0, 0.6);
}


/* ==================================================
   DESCRIPTION
================================================== */

.formation-banner-description {

    max-width: 700px;

    margin: 20px auto 25px;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.6;

    color: #ffffff;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.6);
}


/* ==================================================
   BOUTON
================================================== */

.formation-banner-button {

    display: inline-block;

    padding: 13px 28px;

    background: #1687d9;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    text-decoration: none;

    border-radius: 6px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Hover bouton */

.formation-banner-button:hover {

    background: #0A4E9B;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.28);
}


/* ==================================================
   RESPONSIVE — TABLETTE
   Jusqu'à 992px
================================================== */

@media (max-width: 992px) {

    .formation-banner {

        height: 350px;
    }


    .formation-banner-content {

        max-width: 850px;

        padding: 25px 20px;
    }


    .formation-banner-badge {

        font-size: 16px;

        padding: 7px 16px;

        margin-bottom: 17px;
    }


    .formation-banner-content h1 {

        font-size: 44px;
    }


    .formation-banner-description {

        max-width: 620px;

        font-size: 17px;

        margin: 18px auto 22px;
    }


    .formation-banner-button {

        padding: 12px 24px;

        font-size: 15px;
    }

}


/* ==================================================
   RESPONSIVE — PETITE TABLETTE
   Jusqu'à 768px
================================================== */

@media (max-width: 768px) {

    .formation-banner {

        height: 330px;

        background-position: center center;
    }


    .formation-banner-overlay {

        background: rgba(0, 0, 0, 0.52);
    }


    .formation-banner-content {

        width: 100%;

        padding: 20px;
    }


    .formation-banner-badge {

        font-size: 15px;

        padding: 7px 14px;

        margin-bottom: 15px;
    }


    .formation-banner-content h1 {

        font-size: 36px;

        line-height: 1.2;

        letter-spacing: 0.5px;
    }


    .formation-banner-description {

        max-width: 90%;

        font-size: 16px;

        line-height: 1.5;

        margin: 16px auto 20px;
    }


    .formation-banner-button {

        padding: 11px 22px;

        font-size: 15px;
    }

}


/* ==================================================
   RESPONSIVE — MOBILE
   Jusqu'à 480px
================================================== */

@media (max-width: 480px) {

    .formation-banner {

        height: 310px;
    }


    .formation-banner-overlay {

        background: rgba(0, 0, 0, 0.55);
    }


    .formation-banner-content {

        padding: 15px;
    }


    .formation-banner-badge {

        font-size: 13px;

        padding: 6px 12px;

        margin-bottom: 13px;
    }


    .formation-banner-content h1 {

        font-size: 28px;

        line-height: 1.2;

        letter-spacing: 0;
    }


    .formation-banner-description {

        max-width: 100%;

        font-size: 14px;

        line-height: 1.45;

        margin: 14px auto 18px;
    }


    .formation-banner-button {

        padding: 10px 18px;

        font-size: 14px;

        border-radius: 5px;
    }

}


/* ==================================================
   RESPONSIVE — TRÈS PETIT MOBILE
   Jusqu'à 360px
================================================== */

@media (max-width: 360px) {

    .formation-banner {

        height: 300px;
    }


    .formation-banner-badge {

        font-size: 12px;

        padding: 5px 10px;

        margin-bottom: 12px;
    }


    .formation-banner-content h1 {

        font-size: 24px;
    }


    .formation-banner-description {

        font-size: 13px;

        line-height: 1.4;

        margin: 12px auto 16px;
    }


    .formation-banner-button {

        padding: 9px 15px;

        font-size: 13px;
    }

}

/* ==================================================
   BLOC 4 — PRÉSENTATION DE LA FORMATION
================================================== */

.formation-presentation {

    width: 100%;

    padding: 70px 20px;

    background: #ffffff;
}


/* Conteneur principal */

.formation-presentation-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}


/* ==================================================
   COLONNE GAUCHE — TEXTE
================================================== */

.formation-presentation-text {

    flex: 1;

    max-width: 600px;
}


.formation-presentation-text h2 {

    margin: 0 0 30px 0;

    font-size: 36px;

    font-weight: 700;

    color: #123b63;

    position: relative;
}


/* Petite ligne sous le titre */

.formation-presentation-text h2::after {

    content: "";

    display: block;

    width: 70px;

    height: 4px;

    margin-top: 12px;

    background: #1687d9;

    border-radius: 3px;
}


.formation-presentation-text p {

    margin: 0 0 18px 0;

    font-size: 17px;

    line-height: 1.8;

    color: #555;

    text-align: justify;
}


.formation-presentation-text strong {

    color: #123b63;

    font-weight: 700;
}


/* ==================================================
   COLONNE DROITE — IMAGE
================================================== */

.formation-presentation-image {

    flex: 1;

    max-width: 520px;
}


.formation-presentation-image img {

    display: block;

    width: 100%;

    height: 350px;

    object-fit: cover;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ==================================================
   RESPONSIVE — BLOC 4 PRÉSENTATION DE LA FORMATION
================================================== */

/* =========================
   TABLETTE
   jusqu'à 992px
========================= */

@media (max-width: 992px) {

    .formation-presentation {
        padding: 60px 20px;
    }

    .formation-presentation-container {
        gap: 35px;
    }

    .formation-presentation-text h2 {
        font-size: 32px;
    }

    .formation-presentation-text p {
        font-size: 16px;
    }

    .formation-presentation-image img {
        height: 320px;
    }

}


/* =========================
   TABLETTE / PETIT ÉCRAN
   jusqu'à 768px
========================= */

@media (max-width: 768px) {

    .formation-presentation {
        padding: 50px 20px;
    }

    .formation-presentation-container {
        flex-direction: column;
        gap: 35px;
    }

    .formation-presentation-text {
        max-width: 100%;
        width: 100%;
    }

    .formation-presentation-image {
        max-width: 100%;
        width: 100%;
    }

    .formation-presentation-text h2 {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .formation-presentation-text p {
        font-size: 16px;
        line-height: 1.7;
    }

    .formation-presentation-image img {
        width: 100%;
        height: 320px;
    }

}


/* =========================
   MOBILE
   jusqu'à 480px
========================= */

@media (max-width: 480px) {

    .formation-presentation {
        padding: 40px 15px;
    }

    .formation-presentation-container {
        gap: 28px;
    }

    .formation-presentation-text h2 {
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 22px;
    }

    .formation-presentation-text h2::after {
        width: 55px;
        height: 3px;
        margin-top: 10px;
    }

    .formation-presentation-text p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 15px;

        /* meilleur affichage sur petit écran */
        text-align: left;
    }

    .formation-presentation-image img {
        height: 240px;
        border-radius: 10px;
    }

}

/* ==================================================
   BLOC 5 — PROGRAMME DE FORMATION
================================================== */

.formation-programme {
    width: 100%;
    padding: 80px 20px;
    background: #f5f8fb;
}

.formation-programme-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================
   TITRE
========================= */

.formation-programme-header {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.formation-programme-subtitle {
    margin-bottom: 8px;

    color: #1976b9;

    font-size: 15px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.formation-programme-header h2 {
    margin: 0 0 20px;

    color: #0A4E9B;

    font-size: 36px;
    font-weight: 700;
}

.formation-programme-intro {
    margin: 0 auto;

    color: #555;

    font-size: 17px;
    line-height: 1.8;
}


/* =========================
   GRILLE
========================= */

.formation-programme-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


/* =========================
   CARTES
========================= */

.programme-card {
    position: relative;

    padding: 30px;

    background: #ffffff;

    border-radius: 12px;

    border: 1px solid #e4e9ef;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.programme-card:hover {
    transform: translateY(-7px);

    border-color: #1976b9;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.10);
}


/* =========================
   ICÔNE
========================= */

.programme-icon {
    width: 60px;
    height: 60px;

    margin-bottom: 20px;

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

    background: #eaf4fb;

    border-radius: 12px;

    color: #0A4E9B;

    font-size: 26px;
}


/* =========================
   TITRE DES CARTES
========================= */

.programme-card h3 {
    margin: 0 0 15px;

    color: #0A4E9B;

    font-size: 21px;
    font-weight: 700;
}


/* =========================
   TEXTE
========================= */

.programme-card p {
    margin-bottom: 18px;

    color: #555;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   LISTE
========================= */

.programme-card ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.programme-card ul li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 22px;

    color: #444;

    font-size: 14px;
    line-height: 1.5;
}

.programme-card ul li::before {
    content: "\f058";

    position: absolute;

    left: 0;
    top: 1px;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    color: #23a455;
}


/* ==================================================
   RESPONSIVE TABLETTE
================================================== */

@media (max-width: 992px) {

    .formation-programme-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 650px) {

    .formation-programme {
        padding: 55px 15px;
    }

    .formation-programme-header {
        margin-bottom: 35px;
    }

    .formation-programme-header h2 {
        font-size: 28px;
    }

    .formation-programme-intro {
        font-size: 15px;
    }

    .formation-programme-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .programme-card {
        padding: 24px;
    }

}

/* ==================================================
   BLOC 6 — COMPÉTENCES ACQUISES
================================================== */

.formation-competences {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
}

.formation-competences-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* ==================================================
   EN-TÊTE
================================================== */

.formation-competences-header {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.formation-competences-subtitle {
    margin-bottom: 8px;

    color: #1687d9;

    font-size: 15px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.formation-competences-header h2 {
    margin: 0 0 18px;

    color: #123b63;

    font-size: 36px;
    font-weight: 700;
}

.formation-competences-header > p:last-child {
    margin: 0;

    color: #555;

    font-size: 17px;
    line-height: 1.8;
}


/* ==================================================
   GRILLE
================================================== */

.formation-competences-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


/* ==================================================
   CARTE
================================================== */

.competence-card {
    padding: 30px;

    background: #f8fbfd;

    border: 1px solid #e4edf4;

    border-radius: 12px;

    text-align: center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.competence-card:hover {
    transform: translateY(-6px);

    border-color: #1687d9;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);
}


/* ==================================================
   ICÔNE
================================================== */

.competence-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

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

    background: #e5f3fc;

    border-radius: 50%;

    color: #1687d9;

    font-size: 27px;
}


/* ==================================================
   TITRE CARTE
================================================== */

.competence-card h3 {
    margin: 0 0 14px;

    color: #123b63;

    font-size: 20px;
    font-weight: 700;
}


/* ==================================================
   TEXTE CARTE
================================================== */

.competence-card p {
    margin: 0;

    color: #555;

    font-size: 15px;
    line-height: 1.7;
}


/* ==================================================
   RESPONSIVE TABLETTE
================================================== */

@media (max-width: 992px) {

    .formation-competences-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 650px) {

    .formation-competences {
        padding: 55px 15px;
    }

    .formation-competences-header {
        margin-bottom: 35px;
    }

    .formation-competences-header h2 {
        font-size: 28px;
    }

    .formation-competences-header > p:last-child {
        font-size: 15px;
    }

    .formation-competences-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .competence-card {
        padding: 25px 22px;
    }

    .competence-card h3 {
        font-size: 19px;
    }

}

/* ==================================================
   BLOC 7 — DÉBOUCHÉS ET MÉTIERS
================================================== */

.formation-debouches {
    width: 100%;

    padding: 80px 20px;

    background: #f4f8fb;
}


.formation-debouches-container {
    max-width: 1200px;

    margin: 0 auto;
}


/* ==================================================
   EN-TÊTE
================================================== */

.formation-debouches-header {
    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;
}


.formation-debouches-subtitle {
    margin: 0 0 8px;

    color: #1687d9;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.formation-debouches-header h2 {
    margin: 0 0 18px;

    color: #123b63;

    font-size: 36px;

    font-weight: 700;
}


.formation-debouches-header > p:last-child {
    margin: 0;

    color: #555;

    font-size: 17px;

    line-height: 1.8;
}


/* ==================================================
   GRILLE DES MÉTIERS
================================================== */

.formation-debouches-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


/* ==================================================
   CARTES
================================================== */

.debouche-card {
    padding: 30px;

    background: #ffffff;

    border: 1px solid #e2eaf1;

    border-radius: 12px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.debouche-card:hover {
    transform: translateY(-7px);

    border-color: #1687d9;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.10);
}


/* ==================================================
   ICÔNE
================================================== */

.debouche-icon {
    width: 62px;

    height: 62px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e7f4fc;

    border-radius: 12px;

    color: #1687d9;

    font-size: 27px;
}


/* ==================================================
   TITRES
================================================== */

.debouche-card h3 {
    margin: 0 0 13px;

    color: #123b63;

    font-size: 20px;

    font-weight: 700;
}


/* ==================================================
   TEXTE
================================================== */

.debouche-card p {
    margin: 0;

    color: #555;

    font-size: 15px;

    line-height: 1.7;
}


/* ==================================================
   BLOC INFÉRIEUR
================================================== */

.formation-debouches-bottom {
    margin-top: 50px;

    padding: 30px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    background: #123b63;

    border-radius: 12px;
}


.formation-debouches-bottom-text {
    flex: 1;

    max-width: 780px;
}


.formation-debouches-bottom-text h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 24px;

    font-weight: 700;
}


.formation-debouches-bottom-text p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;

    line-height: 1.7;
}


/* ==================================================
   BOUTON
================================================== */

/* ==================================================
   ZONE DES BOUTONS
================================================== */

.formation-debouches-bottom-action {

    display: flex;
    flex-direction: column;

    gap: 12px;

    min-width: 270px;
}


/* Bouton inscription */

.formation-debouches-button {

    display: block;

    padding: 13px 24px;

    background: #1687d9;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;
    text-align: center;

    border-radius: 6px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.formation-debouches-button:hover {

    background: #0b6fb6;

    transform: translateY(-2px);
}


/* ==================================================
   BOUTON WHATSAPP
================================================== */

.formation-debouches-whatsapp {

    display: block;

    padding: 13px 24px;

    background: #25D366;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;
    text-align: center;

    border-radius: 6px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.formation-debouches-whatsapp i {

    margin-right: 7px;

    font-size: 19px;

    vertical-align: middle;
}


.formation-debouches-button i {

    margin-right: 7px;
}


.formation-debouches-whatsapp:hover {

    background: #1ebe5d;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .formation-debouches-bottom-action {

        width: 100%;

        min-width: 0;
    }


    .formation-debouches-button,
    .formation-debouches-whatsapp {

        width: 100%;

        padding: 13px 16px;

        white-space: normal;
    }

}


/* ==================================================
   RESPONSIVE — TABLETTE
================================================== */

@media (max-width: 992px) {

    .formation-debouches-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .formation-debouches-bottom {
        padding: 28px;
    }

}


/* ==================================================
   RESPONSIVE — 768px
================================================== */

@media (max-width: 768px) {

    .formation-debouches {
        padding: 60px 20px;
    }


    .formation-debouches-header {
        margin-bottom: 40px;
    }


    .formation-debouches-header h2 {
        font-size: 31px;
    }


    .formation-debouches-header > p:last-child {
        font-size: 16px;
    }


    .formation-debouches-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }

}


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

@media (max-width: 600px) {

    .formation-debouches {
        padding: 50px 15px;
    }


    .formation-debouches-header {
        margin-bottom: 32px;
    }


    .formation-debouches-subtitle {
        font-size: 13px;
    }


    .formation-debouches-header h2 {
        font-size: 27px;
    }


    .formation-debouches-header > p:last-child {
        font-size: 15px;

        line-height: 1.7;
    }


    .formation-debouches-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .debouche-card {
        padding: 24px;
    }


    .debouche-icon {
        width: 55px;

        height: 55px;

        font-size: 23px;
    }


    .debouche-card h3 {
        font-size: 19px;
    }


    .formation-debouches-bottom {
        margin-top: 35px;

        padding: 25px 22px;
    }


    .formation-debouches-bottom-text h3 {
        font-size: 21px;
    }


    .formation-debouches-bottom-text p {
        font-size: 14px;
    }


    .formation-debouches-bottom-action {
        width: 100%;
    }


    .formation-debouches-button {
        width: 100%;

        padding: 12px 16px;

        text-align: center;

        white-space: normal;
    }

}

/* ==================================================
   BLOC 8 — CONDITIONS D’ACCÈS ET PIÈCES À FOURNIR
================================================== */

.formation-acces {

    width: 100%;

    padding: 80px 20px;

    background: #ffffff;
}


.formation-acces-container {

    max-width: 1200px;

    margin: 0 auto;
}


/* ==================================================
   EN-TÊTE
================================================== */

.formation-acces-header {

    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;
}


.formation-acces-subtitle {

    margin: 0 0 8px;

    color: #1687d9;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.formation-acces-header h2 {

    margin: 0 0 18px;

    color: #123b63;

    font-size: 36px;

    font-weight: 700;
}


.formation-acces-header > p:last-child {

    margin: 0;

    color: #555;

    font-size: 17px;

    line-height: 1.8;
}


/* ==================================================
   CONTENU PRINCIPAL
================================================== */

.formation-acces-content {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 30px;

    align-items: stretch;
}


/* ==================================================
   CARTES
================================================== */

.formation-acces-card {

    padding: 35px;

    background: #f7fafc;

    border: 1px solid #e2eaf1;

    border-radius: 14px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.formation-acces-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.09);
}


.formation-acces-card-icon {

    width: 60px;

    height: 60px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e5f3fc;

    color: #1687d9;

    font-size: 26px;

    border-radius: 12px;
}


.formation-acces-card h3 {

    margin: 0 0 25px;

    color: #123b63;

    font-size: 23px;

    font-weight: 700;
}


/* ==================================================
   CONDITION D’ACCÈS
================================================== */

.condition-principale {

    margin-top: 15px;

    padding: 28px 25px;

    display: flex;

    align-items: center;

    gap: 20px;

    background: #ffffff;

    border: 1px solid #e2eaf1;

    border-left: 5px solid #23a455;

    border-radius: 10px;
}


.condition-principale-icon {

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8f7ee;

    color: #23a455;

    font-size: 27px;

    border-radius: 50%;
}


.condition-principale-text {

    display: flex;

    flex-direction: column;
}


.condition-principale-text span {

    margin-bottom: 5px;

    color: #777;

    font-size: 14px;
}


.condition-principale-text strong {

    color: #123b63;

    font-size: 20px;

    font-weight: 700;
}


.condition-principale-text p {

    margin: 10px 0 0;

    color: #555;

    font-size: 15px;

    line-height: 1.6;
}


/* ==================================================
   PIÈCES À FOURNIR
================================================== */

.pieces-list {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.piece-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

    background: #ffffff;

    border: 1px solid #e2eaf1;

    border-radius: 9px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.piece-item:hover {

    transform: translateX(4px);

    border-color: #1687d9;

    box-shadow:
        0 5px 15px rgba(22, 135, 217, 0.08);
}


.piece-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eaf5fc;

    color: #1687d9;

    border-radius: 50%;

    font-size: 17px;
}


.piece-text {

    display: flex;

    flex-direction: column;
}


.piece-text strong {

    color: #123b63;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;
}


/* ==================================================
   DOCUMENT PDF
================================================== */

.formation-document {

    margin-top: 35px;

    padding: 28px 32px;

    display: flex;

    align-items: center;

    gap: 22px;

    background: #123b63;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(18, 59, 99, 0.15);
}


.formation-document-icon {

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    font-size: 30px;

    border-radius: 12px;
}


.formation-document-text {

    flex: 1;
}


.formation-document-text h3 {

    margin: 0 0 6px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;
}


.formation-document-text p {

    margin: 0;

    color: #dce9f5;

    font-size: 14px;

    line-height: 1.6;
}


/* ==================================================
   BOUTON PDF
================================================== */

.formation-document-btn {

    padding: 14px 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    flex-shrink: 0;

    background: #ffffff;

    color: #123b63;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    border-radius: 8px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.formation-document-btn:hover {

    background: #edf6fc;

    transform: translateY(-2px);
}


/* ==================================================
   RESPONSIVE TABLETTE
================================================== */

@media (max-width: 900px) {

    .formation-acces {

        padding: 65px 20px;
    }


    .formation-acces-content {

        grid-template-columns: 1fr;
    }


    .formation-document {

        flex-wrap: wrap;
    }


    .formation-document-btn {

        margin-left: 87px;
    }

}


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

@media (max-width: 600px) {

    .formation-acces {

        padding: 50px 15px;
    }


    .formation-acces-header {

        margin-bottom: 35px;
    }


    .formation-acces-header h2 {

        font-size: 28px;
    }


    .formation-acces-header > p:last-child {

        font-size: 15px;

        line-height: 1.7;
    }


    .formation-acces-card {

        padding: 25px 20px;
    }


    .formation-acces-card h3 {

        font-size: 20px;
    }


    .condition-principale {

        flex-direction: column;

        align-items: flex-start;

        padding: 22px 20px;
    }


    .condition-principale-text strong {

        font-size: 18px;
    }


    .piece-item {

        padding: 13px 14px;
    }


    .piece-text strong {

        font-size: 14px;
    }


    .formation-document {

        padding: 25px 20px;

        flex-direction: column;

        align-items: flex-start;
    }


    .formation-document-btn {

        width: 100%;

        margin-left: 0;

        padding: 14px 15px;
    }

}


/* ==================================================
   BANDEAU CONTACT
================================================== */

.formation-acces-contact {

    margin-top: 45px;

    padding: 30px 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    background: #123b63;

    border-radius: 14px;
}


.formation-acces-contact-text {

    flex: 1;

    max-width: 700px;
}


.formation-acces-contact-text h3 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 24px;

    font-weight: 700;
}


.formation-acces-contact-text p {

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;

    line-height: 1.7;
}


/* ==================================================
   ZONE DES BOUTONS
================================================== */

.formation-acces-contact-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-width: 290px;
}


/* ==================================================
   BOUTON INSCRIPTION
================================================== */

.formation-acces-inscription {

    display: block;

    padding: 13px 20px;

    background: #1687d9;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    text-align: center;

    border-radius: 6px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.formation-acces-inscription:hover {

    background: #0b6fb6;

    transform: translateY(-2px);
}


/* ==================================================
   BOUTON WHATSAPP
================================================== */

.formation-acces-whatsapp {

    display: block;

    padding: 13px 20px;

    background: #25D366;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    text-align: center;

    border-radius: 6px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.formation-acces-whatsapp:hover {

    background: #1ebe5d;

    transform: translateY(-2px);
}


.formation-acces-inscription i,
.formation-acces-whatsapp i {

    margin-right: 7px;
}


/* ==================================================
   RESPONSIVE — TABLETTE
   JUSQU'À 992px
================================================== */

@media (max-width: 992px) {

    .formation-acces-content {

        gap: 22px;
    }


    .formation-acces-card {

        padding: 30px;
    }


    .condition-principale {

        padding: 24px 20px;
    }


    .condition-principale-text strong {

        font-size: 19px;
    }

}


/* ==================================================
   RESPONSIVE — PETITE TABLETTE
   JUSQU'À 768px
================================================== */

@media (max-width: 768px) {

    .formation-acces {

        padding: 60px 20px;
    }


    .formation-acces-header {

        margin-bottom: 40px;
    }


    .formation-acces-header h2 {

        font-size: 31px;
    }


    .formation-acces-header > p:last-child {

        font-size: 16px;
    }


    .formation-acces-content {

        grid-template-columns: 1fr;

        gap: 22px;
    }


    .formation-acces-contact {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }


    .formation-acces-contact-actions {

        width: 100%;

        min-width: 0;
    }


    .formation-acces-inscription,
    .formation-acces-whatsapp {

        width: 100%;
    }

}


/* ==================================================
   RESPONSIVE — MOBILE
   JUSQU'À 480px
================================================== */

@media (max-width: 480px) {

    .formation-acces {

        padding: 50px 15px;
    }


    .formation-acces-header {

        margin-bottom: 32px;
    }


    .formation-acces-subtitle {

        font-size: 13px;
    }


    .formation-acces-header h2 {

        font-size: 27px;
    }


    .formation-acces-header > p:last-child {

        font-size: 15px;

        line-height: 1.7;
    }


    .formation-acces-card {

        padding: 24px 20px;
    }


    .formation-acces-card-icon {

        width: 54px;

        height: 54px;

        font-size: 23px;
    }


    .formation-acces-card h3 {

        font-size: 21px;
    }


    .condition-principale {

        padding: 22px 18px;

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }


    .condition-principale-icon {

        width: 55px;

        height: 55px;

        font-size: 23px;
    }


    .condition-principale-text strong {

        font-size: 19px;
    }


    .condition-principale-text p {

        font-size: 14px;
    }


    .formation-info-item {

        padding: 13px;
    }


    .formation-acces-contact {

        margin-top: 35px;

        padding: 25px 20px;
    }


    .formation-acces-contact-text h3 {

        font-size: 21px;
    }


    .formation-acces-contact-text p {

        font-size: 14px;
    }


    .formation-acces-inscription,
    .formation-acces-whatsapp {

        width: 100%;

        padding: 12px 14px;

        font-size: 14px;
    }

}