*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    cursor: url("./pictures/extincteur.cur") 16 16, auto;
}

.red-letter {
    color: #b91c1c;
}


.notification{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 15px 20px;
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    animation: fadeOut 4s forwards;
}

.notification.success{
    background: #16a34a;
}

.notification.error{
    background: #dc2626;
}

@keyframes fadeOut{
    0%,80%{opacity:1;}
    100%{opacity:0; visibility:hidden;}
}


.redColor{
    color: #b91c1c;
}

.annonce-bandeau {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    overflow: hidden;
    padding: 0 52px 0 12px;
    background: #b91c1c;
    color: #fff;
}

.annonce-defilement {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.annonce-defilement span {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    animation: annonce-defilement-droite 18s linear infinite;
}

@keyframes annonce-defilement-droite {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.annonce-fermer {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .annonce-defilement span {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }
}


.list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 60px;
}


@media(max-width:768px){

    .list{

        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:15px 20px;
        position:relative;

    }

    .menu{

        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:0;
        max-height:0;
        overflow:hidden;
        transition:.4s;
        box-shadow:0 10px 20px rgba(0,0,0,.12);
        z-index:999;

    }

    .menu.open{

        max-height:700px;
        padding:20px 0;

    }

    .menu li{

        width:100%;
        text-align:center;

    }

    .menu li a{

        display:block;
        padding:18px;
        font-size:18px;

    }

    .actions{
        display:none;
    }

}

.menu {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.menu li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 18px;
}

.menu li a:hover{
    color: #b91c1c;
}

.logo img{
    width: 100px;
}

.burger {
    display: none;
}

.menu li a.active {
    color: #b91c1c;
}

.btnDevis {
    display: flex;
    gap: 12px;
    background-color: #b91c1c;
    color: white;
    text-decoration: none;
    padding: 15px 24px;
    border-radius: 8px;
    font-weight: bold;
}

.btnDevis:hover{
    transform:translateY(-2px);
    transition: .50s;
}


.actions a{
    text-decoration: none;
    color: white;
}

/* ===========================
   Dropdown
=========================== */

.dropdown {
    position: relative;
}

.dropdown > a {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===========================
   Mega Menu
=========================== */

.mega-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);

    width: 950px;

    display: flex;
    justify-content: space-between;
    gap: 40px;

    background: #fff;
    border-top: 4px solid #d62d2d;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,.15);

    padding: 30px;

    opacity: 0;
    visibility: hidden;
    transition: .25s ease;

    z-index: 999;
}
.dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 8px);
}

/* ===========================
   Colonnes
=========================== */

.mega-section {
    flex: 1;
}

/* ===========================
   Titres
=========================== */

.mega-section h3 {
    margin: 0 0 18px;
    padding-bottom: 10px;

    font-size: 20px;
    font-weight: 700;
    color: #b91c1c;

    border-bottom: 2px solid #ececec;
}

/* ===========================
   Liste
=========================== */

.mega-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-section li {
    margin-bottom: 12px;
}

/* ===========================
   Liens
=========================== */

.mega-section li a {
    display: block;

    color: #333;
    text-decoration: none;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;

    padding: 6px 0 6px 18px;

    position: relative;

    transition: all .25s ease;
}

/* Petite puce rouge */

.mega-section li a::before {
    content: "";
    position: absolute;

    left: 0;
    top: 14px;

    width: 6px;
    height: 6px;

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

/* Hover */

.mega-section li a:hover {
    color: #b91c1c;
    padding-left: 24px;
}

/* ------------------ BANNIERE -------------------- */


.imgbanner{
    width:100%;
    height: 500px;
    overflow: hidden;
}

.imgbanner img{
    width:100%;
    height:100%;
}


.mobile-banner {
    display: none;
}

/* ==========================================
   HERO BANNER
========================================== */

.banner {
    position: relative;
    width: 100%;
    height: 700px;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    padding: 0 8%;

    background-image: url('../pictures/New_Banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.banner-content {
    max-width: 600px;
    padding-top: 40px;
    margin-left: 90px;
    position: relative;
    z-index: 2;
}

.banner-content h1 {
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.15;
    color: #172B4D;
    margin-bottom: 20px;
}

.banner-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}
Ce qui c

/* ==========================================
   SERVICES
========================================== */

.circleForma{
    display: flex;
    gap: 35px;
    flex-wrap: wrap;
}

.service{
    display: flex;
    align-items: center;
    gap: 12px;
}

.service i{
    width: 50px;
    height: 50px;

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

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

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

    transition: .3s;
}

.service:hover i{
    background: #C51C1C;
    color: #FFF;
}

.service span{
    font-size: 1rem;
    font-weight: 600;
    color: #172B4D;
}

/* ==========================================
   IMAGES
========================================== */

.banner-images{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.banner-img{

    width: 205px;
    height: 205px;

    overflow: hidden;

    clip-path: polygon(
        25% 0,
        75% 0,
        100% 18%,
        100% 82%,
        75% 100%,
        25% 100%,
        0 82%,
        0 18%
    );

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

    transition: .35s;
}

.banner-img img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .35s;
}

.banner-img:nth-child(2){
    transform: translateY(25px);
}

.banner-img:nth-child(3){
    transform: translateY(50px);
}

.banner-img:hover{
    transform: translateY(-10px);
}

.banner-img:nth-child(2):hover{
    transform: translateY(15px);
}

.banner-img:nth-child(3):hover{
    transform: translateY(40px);
}

.banner-img:hover img{
    transform: scale(1.08);
}


/* ------------------ Pourquoi ? -------------------- */

.choose {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}

.whyChoose h2 {
    font-size:42px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:70px;
}

.allCard {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-direction: row;
}

.card{
    display: flex;
    width: 300px;
    gap: 10px;
    height: 250px;
    margin-top: 30px;
    flex-direction: column;
    padding-top: 30px;
    align-items: center;
    border: 3px solid #F5F5F5;
    border-radius: 20px;
}

.card i {
    display: flex;
    width: 65px;
    height: 50px;
    justify-content: center;
    font-size: 45px;
    border-radius: 2px 3px 2px 3px;

}

.card p {
    max-width: 230px;
    margin-bottom: 30px;
    hyphens: auto;
    color: #0B1D3B;
    font-size: 1.125rem; /* 18px */
}

/* ------------------ FORMATION -------------------- */

.formation{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.formations{
    width:100%;
    max-width:750px;
    margin:80px auto;
}

.formations h2{
    text-align:center;
    font-size:42px;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:70px;
}

.formations-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

/********************************************/
/**************** CARTE **********************/
/********************************************/

.formation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 370px;
    height: 598px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s ease;
}

.formation-card:hover {
    transform: translateY(-8px);
}

.formation-card:hover{
    transform:translateY(-8px);
    transition: .75s;
}


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

.formation-image {
    position: relative;
    width: 100%;
    height: 250px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    z-index: 5;
}

.formation-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.5s ease;
}

.formation-card:hover .formation-image img {
    transform: scale(1.08);
}

/********************************************/
/**************** ICONE **********************/
/********************************************/

.icon{

    position:absolute;
    top:220px;
    left:50%;
    transform:translateX(-50%);
    width:62px;
    height:62px;
    background:#C51C1C;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:22px;
    z-index:10;
    clip-path:polygon(
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0 50%
    );
}

/********************************************/
/*************** FOND BLANC ******************/
/********************************************/

.formation-body{
    position:relative;
    background:#fff;
    border-radius:0 0 22px 22px;
    top:-20px;
    box-shadow:0 15px 35px rgba(0,0,0,.10);
    padding: 50px 38px 20px;
    z-index:1;
}

.formation-body::before{

    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-45px;
    height:45px;
    background:#fff;
    clip-path:polygon(
        0 100%,
        12% 0,
        88% 0,
        100% 100%
    );
    z-index:-1;
}
.formation-card:hover .formation-body{

    box-shadow:0 20px 45px rgba(0,0,0,.16);

}

/********************************************/
/**************** CONTENU ********************/
/********************************************/

.content{

    padding:0 28px 30px;
    text-align:center;

}

.content h3{

    color:#1F2937;
    font-size:22px;
    font-weight:700;
    line-height:1.3;
    min-height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:18px;
}

.content p {
    color: #5F6470;
    font-size: 17px;
    text-align: justify;
    hyphens: auto;
    line-height: 1.6;
    min-height: 95px;
    margin-bottom: 30px;
}
/********************************************/
/**************** BOUTON *********************/
/********************************************/

.btn{

    display:inline-block;
    padding:13px 28px;
    border-radius:8px;
    background:#C51C1C;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.btn:hover{

    background:#A61616;

}

/* FORMATION STATS */


.formations-stats{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#b91c1c;
    color:#fff;
    border-radius:18px;
    overflow:hidden;
    margin:40px 0 50px;
}

.stat{
    flex:1;
    text-align:center;
    padding:30px 20px;
    position:relative;
}

.stat:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:70px;
    background:rgba(255,255,255,.3);
}

.stat i{
    font-size:34px;
    margin-bottom:12px;
}

.stat h3{
    font-size:42px;
    font-weight:700;
    line-height:1;
    margin:0 0 6px;
}

.stat p{
    font-size:17px;
    font-weight:500;
    margin:0;
}

/* Responsive */
@media (max-width:768px){

    .formations-stats{
        flex-direction:column;
    }

    .stat{
        width:100%;
    }

    .stat:not(:last-child)::after{
        display:none;
    }
}


/* PARTNAIRE */


.partners{
    width:90%;
    max-width:1400px;
    margin:120px auto;
    text-align:center;
}

.partners h2{
    font-size:42px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:70px;
}

.partners-container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:120px;
    flex-wrap:wrap;
}

.partner{
    width:320px;
    height:160px;

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

    padding:25px;
}

.partner img{
    width:200px;
    height:70px;

    object-fit:contain;

    filter:grayscale(100%);
    opacity:.8;
    transition:.3s;
}

.lifeaz {
    width: 170px;
}

.partner:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.05);
}


.partner-offer{

    margin:60px auto 0;
    max-width:900px;
    display:flex;
    align-items:center;
    gap:35px;
    padding:35px;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    border-left:6px solid #c40000;

}

.offer-icon{

    width:90px;
    height:90px;
    min-width:90px;
    clip-path:polygon(
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0 50%
    );
    background:#c40000;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;

    font-size:36px;

}

.offer-content h3{

    font-size:30px;
    margin-bottom:15px;

}

.offer-content p{

    color:#555;
    line-height:1.8;

}

.offer-action{
    display:flex;
    align-items:center;
    gap:30px;
    margin-top:30px;
}

.offer-product{
    width:180px;
    height:150px;
    object-fit:contain;
}

.offer-right{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
}

.promo-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border:2px dashed #c40000;
    border-radius:12px;
    background:#f8f8f8;
    font-size:20px;
    font-weight:700;
    letter-spacing:3px;
    color:#c40000;
}

.btn-partner{

    display:inline-block;
    margin-top:5px;
    padding:14px 28px;
    margin-left: 20px;
    background:#c40000;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    transition:.3s;

}

.btn-partner:hover{

    background:#990000;

}

/* =========================================================
   AVIS CLIENTS
========================================================= */

.reviews {
    width: min(1200px, 90%);
    margin: 0 auto;
    padding: 100px 0;
}


/* =========================================================
   EN-TÊTE
========================================================= */

.reviews-header {
    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}

.reviews-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #b91c1c;

    font-size: 0.8rem;
    font-weight: 700;

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

.reviews-header h2 {
    margin-bottom: 15px;

    color: #111827;

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.reviews-header h2 span {
    color: #b91c1c;
}

.reviews-header p {
    color: #687282;

    font-size: 0.95rem;

    line-height: 1.8;
}


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

.reviews-content {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 35px;
    align-items: stretch;
}

.reviews-list {
    min-width: 0;
}

.review-google {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}


/* =========================================================
   AVIS
========================================================= */

/* =========================================
   GOOGLE REVIEWS
========================================= */

.google-rating-summary {
    width: fit-content;
    margin: 0 auto 40px;
    text-align: center;
}

.google-rating-score {
    font-size: 48px;
    font-weight: 700;
    color: #b91c1c;
    line-height: 1;
}

.google-stars {
    margin: 8px 0;
    font-size: 22px;
    color: #f59e0b;
}

.google-rating-summary p {
    margin: 0;
    font-size: 16px;
}


/* =========================================
   CARROUSEL AVIS GOOGLE
========================================= */

.google-reviews-carousel {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.google-reviews-wrapper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.google-reviews-track {
    display: flex;
    gap: 20px;
    width: 100%;
    transition: transform 0.45s ease;
}


/* 2 cartes exactement visibles */

.google-review-card {
    flex: 0 0 calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
    min-width: 0;
    box-sizing: border-box;

    padding: 22px 20px;

    background: #fff;

    border: 1px solid #e5e5e5;
    border-radius: 20px;

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


/* =========================================
   FLÈCHES
========================================= */

.review-arrow {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: #b91c1c;
    color: white;

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

    cursor: pointer;

    font-size: 18px;

    transition: 0.2s ease;

    z-index: 5;
}

.review-arrow:hover {
    background: #991b1b;
    transform: scale(1.05);
}

.review-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}


/* =========================================
   AVIS
========================================= */

.google-review-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.google-review-header img,
.google-review-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.google-review-author h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.google-review-author span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #666;
}

.google-review-stars {
    margin: 22px 0 14px;
    text-align: center;
    color: #f59e0b;
    font-size: 20px;
}

.google-review-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}


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

@media (max-width: 700px) {

    .google-reviews-carousel {
        gap: 10px;
    }

    .google-review-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .review-arrow {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

}

/* =========================================================
   BLOC GOOGLE / QR CODE
========================================================= */

.review-google {
    position: relative;

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

    padding: 40px 30px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #991b1b,
            #b91c1c
        );

    color: #ffffff;

    text-align: center;

    overflow: hidden;
}


/* Hexagone supérieur droit */
.review-google::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 320px;

    top: -140px;
    right: -90px;

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

    clip-path: polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

    transform: rotate(15deg);

    pointer-events: none;
}


/* Hexagone inférieur gauche */
.review-google::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 265px;

    bottom: -130px;
    left: -80px;

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

    clip-path: polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

    transform: rotate(-20deg);

    pointer-events: none;
}


.review-google-content {
    position: relative;
    z-index: 1;
}



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

.review-small-title {
    display: block;
    margin-bottom: 8px;
    color: #fecaca;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.review-google h3 {
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 1.45rem;
}


/* =========================================================
   QR CODE
========================================================= */

.review-qr {
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto 15px;
    padding: 10px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15);
}

.review-qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.review-qr-text {
    margin-bottom: 20px !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

.review-qr-text strong {
    font-weight: 700;
}


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

.review-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.review-button:hover {
    background: #ffffff;
    color: #991b1b;
    transform: translateY(-2px);
}



/* ------------- BACK TO TOP -------------- */

.back-to-top{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background-color: #b91c1c;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.5s;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.secbacktotop a{
    list-style-type: none;
    text-decoration: none;
}

.back-to-top.active{
    visibility: visible;
    opacity: 1;
}


/* ---------------- FOOTER ------------------ */


footer{
    margin-top:100px;
    color:#fff;
}

.footer-top{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    background:#b91c1c;
    padding:30px 60px;
}

.footer-title{
    display:flex;
    align-items:center;
    gap:25px;
}

.footer-icon{
    width:80px;
    height:80px;
    clip-path:polygon(
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0 50%
    );
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.footer-icon i{
    font-size:40px;
    color:#b91c1c;
}

.footerContentTop h2{
     margin:0;
    color:#fff;
    font-size:32px;
    font-weight:700;
    text-transform:uppercase;
}

.footerContentTop p{
     margin-top:8px;
    color:#fff;
    font-size:20px;
}

.footer-btn-burger {
    display: none;
}

.menu-socials {
    display: none;
}

.footer-btn{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    color:#b91c1c;
    padding:18px 35px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.footer-btn:hover{
    transform:translateY(-2px);
}


.footer-content{

    background:#151515;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    padding:60px 8%;
}

.footer-logo{
    width:200px;
    margin-bottom:20px;
}

.footer-col p{
    width: 300px;
    color:#ccc;
    line-height:1.6;
    margin:20px 0;
}

.footer-col h3{
    margin-bottom:20px;
    font-size:22px;
}

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

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

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

.footer-col a:hover{
    color:#fff;
}

.socials{

    display:flex;
    gap:15px;
    margin-top:25px;

}

.socials a{

    width:45px;
    height:45px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    display:flex;
    font-size: 18px;
    text-decoration: none;
    justify-content:center;
    align-items:center;
    color:#fff;
    transition:.3s;

}

.socials a:hover{

    background:#b91c1c;
    border-color:#b91c1c;

}

.infos li{

    display:flex;
    gap:15px;
    align-items:flex-start;

    color:#ccc;

}

.infos i{
    color:#b91c1c;
    margin-top:3px;
}

.qualiopi{
    width:220px;
    max-width:100%;
}

.footer-bottom{

    background:#101010;

    border-top:1px solid rgba(255,255,255,.08);
    padding:25px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{
    color:#bdbdbd;
}

.footer-bottom div{
    display:flex;
    gap:30px;
}

.footer-bottom a{
    color:#bdbdbd;
    text-decoration:none;
}

.footer-bottom a:hover{
    color:#fff;
}


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

.banner-contact{

    position:relative;

    height: 500px;

    background:url("./pictures/banner_contact.png") center/cover no-repeat;

    display:flex;

    justify-content:space-between;

    overflow:hidden;

    align-items: flex-start; /* contenu en haut */
    padding: 50px 8% 0;      /* espace en haut */

}

.contactMe {
    font-size: 58px;
    font-weight: bold;
    color: #fd1818;
}

.banner-content_contact {
    display: flex;
    flex-direction: column;
    width: 600px;
    gap: 20px;
    color: white;
    font-size: 26px;
    line-height:1.1;
    margin-bottom: 50px;
    margin-top: 50px;
}

.banner-content_contact p{

    font-size:25px;
    color:white;
    margin-bottom:40px;

}

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

.contact {
    padding: 70px 20px;
}

.contact .container {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 35px;
}

/* ==========================================
   BLOCS
========================================== */

.contact-form {
    flex: 1;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.contact-info {
    width: 340px;
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* ==========================================
   TITRES
========================================== */

.contact-form h2,
.contact-info h2{
    font-size:1.7rem;
    margin-bottom:25px;
    color:#222;
}

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

.form-row{
    display:flex;
    gap:20px;
    margin-bottom:18px;
}

.input-group{
    flex:1;
    display:flex;
    flex-direction:column;
}

.input-group label{
    margin-bottom:6px;
    font-size:.95rem;
    font-weight:600;
    color:#444;
}

.input-group input,
.input-group select,
.input-group textarea{
    width:100%;
    padding:13px 15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:.95rem;
    font-family:inherit;
    transition:.2s;
}

.input-group textarea{
    min-height:180px;
    resize:vertical;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(170,30,30,.12);
}

/* ==========================================
   CONFIDENTIALITÉ
========================================== */

.privacy{
    margin:18px 0;
    font-size:.85rem;
    color:#666;
}

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

.contact-form button{
    display: block;
    margin: 30px auto 0;
    gap: 15px;
    padding:13px 24px;
    border:none;
    border-radius:10px;
    background: #b91c1c;
    color:#fff;
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.contact-form button:hover{
    opacity:.9;
}

/* ==========================================
   COORDONNÉES
========================================== */

.info-item{
    display: flex;
    gap: 15px;
    padding:18px 0;
    border-bottom:1px solid #ececec;
}

.info-item:last-child{
    border:none;
}

.info-item h3{
    font-size:1rem;
    margin-bottom:5px;
    color:#222;
}

.info-item p{
    color:#666;
    line-height:1.6;
}

/* ==========================================
   POURQUOI NOUS CONTACTER
========================================== */

.contact-card{
    margin-top:25px;
    padding:20px;
    background:#f7f7f7;
    border-radius:12px;
}

.contact-card h3{
    margin-bottom:15px;
    font-size:1.1rem;
}

.contact-card ul{
    padding-left:18px;
}

.contact-card li{
    margin-bottom:10px;
    color:#555;
}

/* =====================================================
   CONNEXION ADMINISTRATION
===================================================== */

.login-section{

    min-height:100vh;

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

    padding:40px 20px;

    background:
        radial-gradient(
            circle at top left,
            rgba(185,28,28,.08),
            transparent 35%
        ),
        #f6f7f9;

}


/* =====================================================
   CONTAINER
===================================================== */

.login-container{

    width:100%;
    max-width:460px;

    padding:45px 45px 35px;

    background:#ffffff;

    border-radius:20px;

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

}


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

.login-logo{

    display:flex;
    justify-content:center;

    margin-bottom:25px;
}

.login-logo img{

    width:120px;
    height:auto;

}


/* =====================================================
   HEADER
===================================================== */

.login-header{

    text-align:center;

    margin-bottom:35px;

}

.login-subtitle{

    display:block;

    margin-bottom:10px;

    color:#b91c1c;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

}

.login-header h1{

    margin:0 0 10px;

    color:#172B4D;

    font-size:36px;

    font-weight:800;

}

.login-header p{

    margin:0;

    color:#6b7280;

    font-size:15px;

    line-height:1.6;

}


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

.login-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}


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

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    color:#172B4D;

    font-size:14px;

    font-weight:700;

}


.input-box{

    position:relative;

    display:flex;

    align-items:center;

}

.input-box > i{

    position:absolute;

    left:17px;

    color:#9ca3af;

    font-size:16px;

    pointer-events:none;

}

.input-box input{

    width:100%;

    height:54px;

    padding:0 48px;

    border:1px solid #dfe3e8;

    border-radius:10px;

    outline:none;

    background:#fafafa;

    color:#172B4D;

    font-size:15px;

    transition:.25s ease;

    box-sizing:border-box;

}

.input-box input::placeholder{

    color:#9ca3af;

}

.input-box input:focus{

    border-color:#b91c1c;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(185,28,28,.10);

}


/* =====================================================
   AFFICHER MOT DE PASSE
===================================================== */

.password-toggle{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:transparent;

    color:#9ca3af;

    cursor:pointer;

    font-size:16px;

    padding:5px;

    transition:.2s;

}

.password-toggle:hover{

    color:#b91c1c;

}


/* =====================================================
   OPTIONS
===================================================== */

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:-5px;

}

.remember{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6b7280;

    font-size:14px;

    cursor:pointer;

}

.remember input{

    width:16px;

    height:16px;

    accent-color:#b91c1c;

    cursor:pointer;

}


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

.login-btn{

    width:100%;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border:none;

    border-radius:10px;

    background:#b91c1c;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

}

.login-btn:hover{

    background:#991b1b;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(185,28,28,.20);

}

.login-btn:active{

    transform:translateY(0);

}


/* =====================================================
   SÉCURITÉ
===================================================== */

.login-security{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin:5px 0 0;

    color:#9ca3af;

    font-size:12px;

}

.login-security i{

    color:#b91c1c;

}


/* ===========================
   LAYOUT
=========================== */

.admin-dashboard{
    display:flex;
    min-height:100vh;
    background:#F5F7FA;
}

.admin-sidebar{
    width:260px;
    background:#B81F24;
    color:#FFFFFF;
    padding:30px 22px;
    display:flex;
    flex-direction:column;
    gap:40px;
}

.admin-logo {
    display: flex;
    flex-direction: column;
}

.admin-logo img{
    display: flex;
    width: 90px;
    height: 90px;
}

.admin-logo h2{
    font-size:32px;
    font-weight:700;
    margin:0;
}

.admin-logo p{
    margin:8px 0 0;
    opacity:.8;
    font-size:14px;
}

.admin-menu{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.admin-menu-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:14px;
    color:#FFFFFF;
    text-decoration:none;
    transition:.25s;
}

.admin-menu-item:hover,
.admin-menu-item.active{
    background:rgba(255,255,255,.12);
}

#fileUploadBtn {
    display:flex;
    align-items:center;
    gap:10px;
    background:#C91D22;
    color:#FFFFFF;
    border:none;
    border-radius:14px;
    padding:15px 22px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}

.admin-create-page-btn {
    display:flex;
    align-items:center;
    gap:10px;
    background:#C91D22;
    color:#FFFFFF;
    border:none;
    border-radius:14px;
    padding:15px 22px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}


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

.admin-main{
    flex:1;
    padding:40px;
}

.admin-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.admin-title h1{
    margin:0;
    font-size:34px;
    color:#17233C;
}

.admin-title p{
    margin-top:8px;
    color:#64748B;
    font-size:15px;
}

.admin-create-btn{
    display:flex;
    align-items:center;
    gap:10px;
    background:#C91D22;
    color:#FFFFFF;
    border:none;
    border-radius:14px;
    padding:15px 22px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}


.admin-create-btn:hover{
    background:#A9181D;
}

.hidden-training {
    display: none;
}

.admin-show-more {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #f4f6fb;
    color: #c1121f;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

.admin-show-more:hover {
    background: #c1121f;
    color: #fff;
}

/* ===========================
   POPUP SUPPRESSION FORMATION
=========================== */

.delete-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.delete-modal.active {
    display: flex;
    animation: fadeIn .25s ease;
}

.delete-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #ffe9e9;
    color: #c1121f;
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delete-modal-content h3 {
    font-size: 28px;
    color: #061C3D;
    margin-bottom: 12px;
    font-weight: 700;
}

#deleteMessage {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Boutons */
.delete-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.cancel-delete,
.confirm-delete {
    flex: 1;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s ease;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Annuler */
.cancel-delete {
    background: #F1F5F9;
    color: #334155;
    border: 1px solid #E2E8F0;
}

.cancel-delete:hover {
    background: #E2E8F0;
}

/* Supprimer */
.confirm-delete {
    background: #C1121F;
    color: #fff;
    border: 1px solid #C1121F;
}

.confirm-delete:hover {
    background: #9F0F19;
    border-color: #9F0F19;
}

.delete-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #FCE8EA;

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

.delete-modal-content i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #C1121F;
    line-height: 1;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive */
@media (max-width: 600px) {

    .delete-modal-content {
        padding: 25px;
    }

    .delete-actions {
        flex-direction: column;
    }

}

/* ===========================
   BLOCS
=========================== */

.admin-section{
    background:#FFFFFF;
    border-radius:22px;
    padding:28px;
    margin-bottom:30px;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
}

.admin-section h2{
    margin:0 0 22px;
    color:#17233C;
    font-size:24px;
}

/* ===========================
   CATEGORIES
=========================== */

.admin-categories{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.admin-category-card{
    position:relative;
    background:#FFFFFF;
    border:2px solid #E5E7EB;
    border-radius:18px;
    padding:25px 15px;
    text-align:center;
    cursor:pointer;
    transition:.25s;
}

.admin-category-card input{
    display:none;
}

.admin-category-card i{
    font-size:28px;
    color:#C91D22;
    margin-bottom:12px;
}

.admin-category-card span{
    display:block;
    font-weight:600;
    color:#17233C;
}

.admin-category-card:hover,
.admin-category-card.active{
    border-color:#C91D22;
    background:#FFF4F4;
}

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

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



.admin-input{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top: 15px;
}

.admin-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    display: flex;
    background-color: #B91C1C;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    cursor: pointer;
    list-style-type: none;
    border-radius: 8px;
    border: none;
    margin-top: 20px;
}

.admin-input label{
    color:#334155;
    font-weight:600;
    font-size:14px;
}

.admin-input input,
.admin-input select,
.admin-input textarea{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid #D9DEE7;
    background:#FFFFFF;
    font-size:15px;
    color:#17233C;
    transition:.2s;
}

.admin-input input:focus,
.admin-input select:focus,
.admin-input textarea:focus{
    border-color:#C91D22;
    box-shadow:0 0 0 4px rgba(201,29,34,.08);
    outline:none;
}

.admin-input textarea{
    resize:vertical;
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 15px; /* espace entre le bouton et le texte */
    margin-top: 8px;
}

#buttonDownloadFiles {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: #b91c1c;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}

#buttonDownloadFiles:hover {
    background: #991b1b;
}

#fileName {
    font-size: 14px;
    color: #555;
}

/* ===========================
   APERÇU CARTE
=========================== */

.admin-preview-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.admin-refresh-preview{
    background:#EEF2F6;
    border:none;
    border-radius:10px;
    padding:10px 16px;
    cursor:pointer;
    color:#475569;
}

.admin-preview-card{
    max-width:420px;
    border-radius:24px;
    overflow:hidden;
    background:#FFFFFF;
    box-shadow:0 15px 35px rgba(15,23,42,.08);
}

.admin-preview-image{
    height:220px;
    background:#E2E8F0;
}

.admin-preview-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-preview-content{
    padding:28px;
}

.admin-preview-badge{
    display:inline-block;
    background:#C91D22;
    color:#FFFFFF;
    padding:8px 16px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-bottom:18px;
}

.admin-preview-content h3{
    margin:0 0 16px;
    font-size:28px;
    color:#17233C;
    line-height:1.2;
}

.admin-preview-content p{
    color:#475569;
    line-height:1.7;
    margin-bottom:20px;
}

.admin-preview-infos{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:25px;
}

.admin-preview-info{
    display:flex;
    align-items:center;
    gap:12px;
    color:#334155;
}

.admin-preview-info i{
    color:#C91D22;
}

.admin-preview-btn{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    background:#C91D22;
    color:#FFFFFF;
    border:none;
    border-radius:14px;
    padding:16px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.admin-preview-btn:hover{
    background:#A9181D;
}

/* ===========================
   LISTE DES FORMATIONS
=========================== */

.admin-section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.admin-section-title span{
    color:#64748B;
    font-size:14px;
}

.admin-training-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.admin-training-item{
    display:flex;
    align-items:center;
    gap:20px;
    background:#F9FAFB;
    border:1px solid #ECEFF4;
    border-radius:18px;
    padding:16px;
}

.admin-training-item img{
    width:120px;
    height:85px;
    object-fit:cover;
    border-radius:14px;
}

.admin-training-content{
    flex:1;
}

.admin-training-badge{
    display:inline-block;
    background:#FFE8E8;
    color:#C91D22;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-bottom:12px;
}

.admin-training-content h3{
    margin:0 0 10px;
    color:#17233C;
    font-size:20px;
}

.admin-training-content p{
    margin:0 0 6px;
    color:#475569;
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-training-content small{
    color:#64748B;
}

.admin-training-buttons{
    display:flex;
    gap:10px;
}

.admin-edit,
.admin-delete{
    display:flex;
    align-items:center;
    gap:8px;
    border:none;
    border-radius:12px;
    padding:12px 16px;
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.admin-edit{
    background:#EEF4FF;
    color:#2563EB;
}

.admin-edit:hover{
    background:#DCEAFF;
}

.admin-save {
    display:flex;
    align-items:center;
    gap:10px;
    background:#C91D22;
    color:#FFFFFF;
    border:none;
    border-radius:14px;
    padding:15px 22px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}


/* Caché par défaut */
.admin-edit-form {
    display: none !important;
    margin: 20px 0 30px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Affiché uniquement quand on clique sur Modifier */
.admin-edit-form.active {
    display: block !important;
}

.admin-delete{
    background:#FDECEC;
    color:#DC2626;
}

.admin-delete:hover{
    background:#FAD8D8;
}

.delete-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.delete-modal.active{
    display:flex;
}

.delete-modal-content{
    background:#fff;
    width: 500px;
    max-width:95%;
    border-radius:20px;
    padding:30px;
    text-align:center;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.delete-actions{
    display: grid;
    grid-template-columns: repeat(2, 200px);
    justify-content: center;   /* Centre les 4 colonnes dans la popup */
    gap: 20px;
    margin: 30px 0;
}

.delete-choice,
.cancel-delete{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 55px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
}

.delete-choice.cardButtonDelete{
    background:#ff9800;
    color:#fff;
}

.delete-choice.page{
    background:#2563eb;
    color:#fff;
}

.delete-choice.all{
    background:#dc2626;
    color:#fff;
}

.cancel-delete{
    background:#efefef;
}

.admin-training-status{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 15px;
    margin:15px 0;
    padding:10px 14px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
}

.status-label{
    gap: 15px;
    font-weight:600;
    color:#1f2937;
}

.switch{
    position:relative;
    display:inline-block;
    width:58px;
    height:30px;
}

.switch input{
    display:none;
}

.slider{
    position:absolute;
    inset:0;
    cursor:pointer;
    background:#dc2626;
    border-radius:30px;
    transition:.3s;
}

.slider::before{
    content:"";
    position:absolute;
    width:24px;
    height:24px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    transition:.3s;
}

.switch input:checked + .slider{
    background:#16a34a;
}

.switch input:checked + .slider::before{
    transform:translateX(28px);
}

/* Dernière mise à jour de la formation */
.admin-training-update{
    margin-top: 20px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;

    background: #fff5f5;
    border: 1px solid #fecaca;
    border-left: 4px solid #b91c1c;
    border-radius: 12px;

    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.4;
}

.admin-training-update i{
    font-size: 1.1rem;
    color: #b91c1c;
    flex-shrink: 0;
}

.admin-training-update strong{
    color: #991b1b;
    font-weight: 700;
}

/* Version mobile */
@media (max-width: 768px){
    .admin-training-update{
        padding: 12px 14px;
        font-size: 0.9rem;
        gap: 8px;
    }

    .admin-training-update i{
        font-size: 1rem;
    }
}


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

@media (max-width:1100px){

    .admin-categories{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:850px){

    .admin-dashboard{
        flex-direction:column;
    }

    .admin-sidebar{
        width:100%;
    }

    .admin-topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .admin-grid{
        grid-template-columns:1fr;
    }

    .admin-training-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .admin-training-item img{
        width:100%;
        height:200px;
    }

    .admin-training-buttons{
        width:100%;
    }

    .admin-edit,
    .admin-delete{
        flex:1;
        justify-content:center;
    }

}


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

@media(max-width:600px){

    .login-section{

        padding:25px 15px;

    }

    .login-container{

        padding:35px 25px 30px;

        border-radius:16px;

    }

    .login-header h1{

        font-size:30px;

    }

}


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

@media(max-width:992px){

    .contact .container{
        flex-direction:column;
    }

    .contact-info{
        width:100%;
    }

}

@media(max-width:768px){

    .contact{
        padding:50px 15px;
    }

    .contact-form,
    .contact-info{
        padding:22px;
    }

    .form-row{
        flex-direction:column;
        gap:15px;
    }

    .contact-form h2,
    .contact-info h2{
        font-size:1.5rem;
    }

    .contactMe {
        font-size: 40px;
        font-weight: bold;
        color: #fd1818;
    }


}
/* ========================= */
/* COORDONNÉES */
/* ========================= */

.info-item {
    padding: 18px 0;
    border-bottom: 1px solid #ececec;
}

.info-item:first-of-type {
    padding-top: 0;
}

.info-item:last-of-type {
    border-bottom: none;
}

.info-item h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: #222;
}

.info-item p {
    font-size: .95rem;
    line-height: 1.7;
    color: #666;
}

/* ========================= */
/* BLOC EN BAS */
/* ========================= */

.contact-card {
    margin-top: 25px;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 12px;
}

.contact-card h3 {
    margin-bottom: 15px;
    font-size: 1.15rem;
}

.contact-card ul {
    list-style: none;
    padding: 0;
}

.contact-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .95rem;
}

.contact-card li:last-child {
    margin-bottom: 0;
}

.contact-card i {
    color: var(--primary);
}

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

@media (max-width: 992px) {

    .contact .container {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {

    .contact {
        padding: 50px 0;
    }

    .contact-form,
    .contact-info {
        padding: 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .contact-form h2,
    .contact-info h2 {
        font-size: 1.5rem;
    }

}




/* =======================================================
   PAGE - GESTE DE PREMIERS SECOURS
======================================================= */

.about-training{
    padding: 80px 0;
    background:#fff;
}

.training-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;
    margin: 0px 0 0px 30px; /* ← décale de 30px à gauche */

    background: #fff;
    color: #b91c1c;
    border: 2px solid #b91c1c;
    border-radius: 50px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all .25s ease;
}

.training-back-btn:hover {
    background: #b91c1c;
    color: #fff;
}

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

.about-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

.about-text{
    flex:1;
}

.subtitle{
    color:#c1121f;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.about-text h2{
    font-size:46px;
    margin:12px 0 20px;
    color:#111;
}

.line{
    width:60px;
    height:4px;
    background:#c1121f;
    border-radius:5px;
    margin-bottom:30px;
}

.about-text p{
    color:#444;
    font-size:18px;
    line-height:1.8;
    margin-bottom:20px;
    max-width:500px;
}

.about-image{
    flex:1;
    display:flex;
    justify-content:center;
    position:relative;
}

.hexagon{
    width:420px;
    aspect-ratio:1;
    clip-path:polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );
    overflow:hidden;
    position:relative;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.hexagon img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.hexagon:hover img{
    transform:scale(1.08);
}

.hexagon::before{
    content:"";
    position:absolute;
    left:-12px;
    top:0;
    width:15px;
    height:100%;
    background:#c1121f;
    transform:skewY(-30deg);
    z-index:2;
}

.hexagon-decoration{
    position:absolute;
    width:55px;
    aspect-ratio:1;
    clip-path:polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );
}

.grey{
    border:2px solid #d8d8d8;
    background: #d6d6d6;
}

.red{
    background:#c1121f;
}

.one{
    top:40px;
    right:10px;
}

.two{
    top:150px;
    right:-30px;
}

.red{
    bottom:70px;
    right:20px;
}

.separator-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:70px;
}

.separator{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:80px 0;
}

.hex{
    display:block;
    width:18px;
    height:20px;

    clip-path:polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );
}

.red{
    background:#c61b1b;
}

.gray{
    background:#d9d9d9;
}

/* =========================================================
   PAGE QUI SOMMES-NOUS - AP3S
========================================================= */

.about-page {
    width: min(1200px, 90%);
    margin: 0 auto;
}


/* =========================================================
   PRÉSENTATION
========================================================= */

.about-intro {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 80px;

    padding: 90px 0;
}

.about-photo {
    position: relative;
}

.about-photo::before {
    content: "";

    position: absolute;

    width: 85%;
    height: 85%;

    left: -18px;
    bottom: -18px;

    background: #b91c1c;

    border-radius: 18px;

    z-index: 0;
}

.about-photo img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 520px;

    object-fit: cover;

    border-radius: 18px;
}

.about-text {
    max-width: 650px;
}

.section-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #b91c1c;

    font-size: 0.85rem;
    font-weight: 700;

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

.about-text h1 {
    margin-bottom: 25px;

    color: #111827;

    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.15;
}

.about-text h1 span {
    color: #b91c1c;
}

.about-text p {
    margin-bottom: 18px;

    color: #5b6472;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.8;
}

.about-text strong {
    color: #374151;
    font-weight: 600;
}


/* =========================================================
   MISSION
========================================================= */

.about-mission {
    position: relative;

    padding: 80px 70px;

    border-radius: 18px;

    background: #f8f9fb;

    overflow: hidden;
}

.about-mission::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    top: -120px;
    right: -80px;

    border-radius: 50%;

    background: rgba(185, 28, 28, 0.06);
}

.mission-content {
    position: relative;
    z-index: 1;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}

.mission-content h2 {
    margin-bottom: 25px;

    color: #111827;

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.mission-content h2 span {
    color: #b91c1c;
}

.mission-content p {
    max-width: 750px;

    margin: 0 auto 18px;

    color: #687282;

    line-height: 1.8;
}


/* =========================================================
   VALEURS
========================================================= */

.about-values {
    padding: 100px 0;
}

.values-heading {
    max-width: 750px;

    margin: 0 auto 50px;

    text-align: center;
}

.values-heading h2 {
    color: #111827;

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.values-heading h2 span {
    color: #b91c1c;
}

.values-grid {
    display: grid;

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

    gap: 25px;
    margin-bottom: 30px;
}

.value-card {
    padding: 35px 30px;

    background: #ffffff;

    border: 1px solid #e8eaee;

    border-radius: 14px;

    text-align: center;

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

.value-card:hover {
    transform: translateY(-6px);

    border-color: #b91c1c;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.08);
}

.value-icon {
    width: 65px;
    height: 65px;

    display: flex;

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

    margin: 0 auto 22px;

    border-radius: 14px;

    background: #fef2f2;

    color: #b91c1c;

    font-size: 1.5rem;
}

.value-card h3 {
    margin-bottom: 12px;

    color: #111827;

    font-size: 1.25rem;
}

.value-card p {
    color: #687282;

    font-size: 0.93rem;

    line-height: 1.75;
}


/* =========================================================
   CITATION
========================================================= */

.about-quote {
    position: relative;
    max-width: 900px;
    margin: 30px auto 50px;
    padding: 55px 50px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #991b1b,
            #b91c1c
        );

    color: #ffffff;
    text-align: center;
    overflow: hidden;
}

.about-quote::before {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    top: -100px;
    left: -60px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
}

.about-quote i {
    position: relative;
    z-index: 1;

    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 2rem;
}

.about-quote p {
    position: relative;
    z-index: 1;

    max-width: 700px;

    margin: 0 auto 18px;

    color: #ffffff;

    font-size: 1.25rem;
    font-weight: 500;

    line-height: 1.7;
}

.about-quote span {
    position: relative;
    z-index: 1;

    color: #fee2e2;

    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media screen and (max-width: 950px) {

    .about-intro {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 70px 0;
    }

    .about-photo {
        width: min(650px, 100%);

        margin: 0 auto;
    }

    .about-text {
        max-width: 100%;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-mission {
        padding: 65px 45px;
    }
}


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

@media screen and (max-width: 650px) {

    .about-page {
        width: 90%;
    }

    .about-intro {
        padding: 55px 0;
    }

    .about-photo img {
        height: 400px;
    }

    .about-photo::before {
        left: -10px;
        bottom: -10px;
    }

    .about-text h1 {
        font-size: 2.4rem;
    }

    .about-text p {
        font-size: 0.95rem;
    }

    .about-mission {
        padding: 50px 25px;

        border-radius: 14px;
    }

    .mission-content h2 {
        font-size: 2rem;
    }

    .about-values {
        padding: 70px 0;
    }

    .values-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .value-card {
        padding: 30px 25px;
    }

    .about-quote {
        margin-bottom: 60px;

        padding: 45px 25px;

        border-radius: 14px;
    }

    .about-quote p {
        font-size: 1.05rem;
    }
}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media screen and (max-width: 450px) {

    .about-photo img {
        height: 320px;
    }

    .about-text h1 {
        font-size: 2.1rem;
    }

    .section-label {
        font-size: 0.75rem;
    }

    .about-mission {
        padding: 40px 20px;
    }

    .mission-content h2 {
        font-size: 1.8rem;
    }

    .about-quote {
        padding: 40px 20px;
    }
}

/* ==========================================
   SECTION FORMATION
========================================== */

/* ===================================
   FORMATIONS PREMIERS SECOURS
=================================== */

.first-aid-training{
    padding:100px 0;
    background:#f8f9fb;
}

.section-title{
    max-width:700px;
    margin:0 auto 70px;
    text-align:center;
}

.section-title span{
    display:inline-block;
    color:#b91c1c;
    font-size:.9rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:15px;
}

.section-title h2{
    font-size:2.7rem;
    color:#1f2937;
    margin-bottom:20px;
}

.section-title p{
    color:#6b7280;
    line-height:1.8;
    font-size:1.05rem;
}

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

.training-cards{

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

}

.training-card{

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

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

    transition:.35s;

    display:flex;
    flex-direction:column;

}

.training-card:hover{

    transform:translateY(-12px);

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

}

/* ==========================================
   FORMATION BIENTÔT DISPONIBLE
========================================== */

.training-coming-soon {
    position: relative;
    overflow: hidden;
}

/* Image */

.training-coming-soon .card-image {
    position: relative;
    overflow: hidden;
}

.training-coming-soon .card-image img {
    filter: grayscale(100%) blur(1.5px);
    opacity: 0.65;
    transition: .3s ease;
}


/* Overlay */

.coming-soon-overlay {
    position: absolute;

    inset: 0;

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

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

    z-index: 5;
}

.coming-soon-overlay span {
    background: #b91c1c;

    color: #fff;

    padding: 12px 25px;

    border-radius: 6px;

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

    text-transform: uppercase;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}


/* Carte légèrement désactivée */

.training-coming-soon .card-content {
    opacity: 0.75;
}


/* Badge */

.training-coming-soon .card-badge {
    background: #777;
}


/* Bouton désactivé */

.btn-disabled {
    display: inline-flex;

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

    gap: 10px;

    background: #999 !important;

    color: #fff;

    cursor: not-allowed;

    pointer-events: none;

    opacity: 0.8;
}

/* Carte mise en avant */

.training-card.featured{

    border:3px solid #b91c1c;

    transform:scale(1.03);

}

.training-card.featured:hover{

    transform:scale(1.05) translateY(-10px);

}

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

.card-image{

    height:240px;
    overflow:hidden;

}

.card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s;

}

.training-card:hover img{

    transform:scale(1.08);

}

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

.card-content{

    padding:35px;

    display:flex;
    flex-direction:column;

    flex:1;

}

.card-badge{

    display:inline-block;

    align-self:flex-start;

    padding:8px 18px;

    border-radius:25px;

    background:#b91c1c;

    color:#fff;

    font-size:.75rem;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:20px;

}

.card-content h3{

    font-size:1.5rem;

    color:#1f2937;

    margin-bottom:15px;

}

.card-content p{

    color:#6b7280;

    line-height:1.8;

    margin-bottom:25px;

}

/* ==========================
   LISTE
========================== */

.card-content ul{

    list-style:none;

    padding:0;
    margin:0 0 35px;

}

.card-content li{

    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:#4b5563;

}

.card-content li i{

    width:20px;

    color:#b91c1c;

    font-size:1rem;

}

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

.btn-training{

    margin-top:auto;

    display:flex;

    justify-content:center;
    align-items:center;
    gap:10px;

    padding:16px;

    border-radius:10px;

    background:#b91c1c;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-training:hover{

    background:#991b1b;

}

.btn-training i{

    transition:.3s;

}

.btn-training:hover i{

    transform:translateX(6px);

}

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

@media(max-width:1100px){

    .training-cards{

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

    }

}

@media(max-width:768px){

    .training-cards{

        grid-template-columns:1fr;

    }

    .training-card.featured{

        transform:none;

    }

    .training-card.featured:hover{

        transform:translateY(-10px);

    }

    .section-title h2{

        font-size:2rem;

    }

}

@media(max-width:576px){

    .first-aid-training{

        padding:70px 0;

    }

    .card-content{

        padding:25px;

    }

    .section-title h2{

        font-size:1.7rem;

    }

}

.training-section{
    padding:100px 0;
    background:#fff;
}

.training-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    align-items:flex-start;
}

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

.training-image{
    display:flex;
    justify-content:center;
    position:sticky;
    top:120px;
}

.training-hexagon{
    width:360px;
    aspect-ratio:1;
    overflow:hidden;

    clip-path:polygon(
        25% 6.7%,
        75% 6.7%,
        100% 50%,
        75% 93.3%,
        25% 93.3%,
        0% 50%
    );

    box-shadow:0 20px 45px rgba(0,0,0,.15);
    position:relative;
}

.training-hexagon img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.training-hexagon:hover img{
    transform:scale(1.08);
}

.training-hexagon::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:12px;
    height:100%;

    background:#b91c1c;

    z-index:2;
}

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

.training-category{

    display:inline-block;

    color:#b91c1c;

    font-weight:700;

    text-transform:uppercase;

    font-size:.9rem;

    letter-spacing:2px;

    margin-bottom:15px;

}

.training-content h2{

    font-size:2.6rem;

    color:#222;

    margin-bottom:15px;

}

.training-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:25px;

    background:#b91c1c;

    color:#fff;

    font-size:.8rem;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:30px;

}

.training-description{

    color:#555;

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:40px;

}

/* ==========================================
   BLOCS
========================================== */

.training-block{

    margin-bottom:40px;

}

.training-block h3{

    display:flex;

    align-items:center;

    gap:12px;

    color:#222;

    margin-bottom:18px;

    font-size:1.3rem;

}

.training-block h3 i{

    color:#b91c1c;

    font-size:1.2rem;

}

.training-block ul{

    margin-left:20px;

    line-height:2;

    color:#555;

}

.training-block p{

    color:#555;

    line-height:1.8;

}

/* ==========================================
   PROGRAMME
========================================== */

.program-list{

    display:grid;

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

    gap:12px 35px;

    list-style:none;

    padding:0;

    margin:0;

}

.program-list li{

    position:relative;

    padding-left:28px;

}

.program-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#b91c1c;

    font-weight:bold;

}

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

.training-cards{

    display:grid;

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

    gap:20px;

    margin:45px 0;

}

.info-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    padding:30px 20px;

    text-align:center;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.info-card:hover{

    transform:translateY(-8px);

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

}

.info-card i{

    font-size:1.8rem;

    color:#b91c1c;

    margin-bottom:15px;

}

.info-card h4{

    margin-bottom:8px;

    color:#222;

}

.info-card p{

    color:#666;

    line-height:1.5;

}

/* ==========================================
   ACCESSIBILITE
========================================== */

.training-accessibility{

    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:25px;
    background:#fff5f5;
    border-left:5px solid #b91c1c;
    border-radius:10px;
    margin-bottom:40px;

}

.training-accessibility i{

    color:#b91c1c;

    font-size:2rem;

}

.training-accessibility p{

    color:#555;

    line-height:1.7;

}

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

.training-buttons {
    display: flex;
    gap: 20px;          /* espace entre les deux boutons */
    margin-top: 25px;
}

.training-btn {
    flex: 1;            /* les deux boutons prennent la même largeur */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: #b91c1c;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    transition: .3s;
}

.training-btn:hover{

    background:#981515;
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(185,28,28,.25);

}

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

@media(max-width:1100px){

    .training-grid{

        grid-template-columns:1fr;

    }

    .training-image{

        position:relative;

        top:0;

        margin-bottom:50px;

    }

    .training-hexagon{

        width:320px;

    }

}

@media(max-width:768px){

    .training-content h2{

        font-size:2rem;

    }

    .training-cards{

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

    }

    .program-list{

        grid-template-columns:1fr;

    }

    .training-buttons
    {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 25px;
    }

}

@media(max-width:576px){

    .training-cards{

        grid-template-columns:1fr;

    }

    .training-section{

        padding:70px 0;

    }

    .training-content h2{

        font-size:1.7rem;

    }

}

@media(max-width:992px){

    .about-content{
        flex-direction:column;
        text-align:center;
        gap:60px;
    }

    .about-text p{
        margin:auto;
        margin-bottom:20px;
    }

    .line{
        margin:20px auto 30px;
    }

    .hexagon{
        width:340px;
    }

}

/* =======================================================
   RESPONSIVE - TELEPHONE
======================================================= */

@media screen and (max-width:768px){

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        overflow-x: hidden;
    }

    /* ---------------- HEADER ---------------- */

    .logo img{
        width:80px;
    }

    .list{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:15px 20px;
        position:relative;
    }

    .burger{
        display: flex;
        width:35px;
        height:28px;
        cursor:pointer;
        flex-direction:column;
        justify-content:space-between;
        z-index:1001;
    }

    .burger span{
        width:100%;
        height:4px;
        background:#d81f26;
        border-radius:20px;
        transition:0.3s ease;
    }


    .menu{

        position:fixed;
        top:0;
        right:-100%;
        width:100%;
        height:100vh;

        background:#fff;

        display:flex;
        flex-direction:column;

        overflow-y:auto;

        transition:right .35s ease;

        z-index:999;
    }

    .menu.open{
        right:0;
    }

    .menu li{
        width: 80%;
        text-align:center;
        border-bottom: 1px solid rgba(0,0,0,.07);
    }

    .menu li a{
        display:block;
        padding:18px;
        font-size:18px;
    }

    .actions{
        display:none;
    }



    .burger.active span:nth-child(1){
        transform:rotate(45deg) translateY(17px)
    }

    .burger.active span:nth-child(2){
        opacity:0;
    }

    .burger.active span:nth-child(3){
        transform:rotate(-45deg) translateY(-17px);
    }

    /* Mega menu */

    .mega-menu{

        position: static;
        transform: none;
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        margin-top: 15px;
        background: #fff;
        border-top: 2px solid #b91c1c;
        border-radius: 10px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        overflow: hidden;

    }

    .dropdown.open .mega-menu{
        display: flex;
    }

    /* ---------------- BANNIERE ---------------- */

    .imgbanner{
        display: none;
    }

    .logo img{
        display: flex;
        align-items: end;
    }



    .circleForma .service{
        display: none;
    }

    .menu-banner{
        list-style: none;
        width: 100%;
        padding: 0;
        margin: 0 0 30px 0;
        border: none;
    }

    .menu > li.menu-banner {
        border-bottom: none;
    }

    .menu li .footer-btn {
        color: #fff;
    }

    .menu li a.footer-btn-burger {
        color: white;
        background: #b91c1c;
    }

    .footer-btn-burger{
        width: 250px;
        display:flex;
        align-items:center;
        margin-left: 30px;
        padding:18px 35px;
        border-radius:8px;
        text-decoration:none;
        font-weight:600;
        transition:.3s;
    }

    .footer-btn{
        width: 250px;
        display:flex;
        align-items:center;
        margin-left: 30px;
        background:#b91c1c;
        padding:18px 35px;
        border-radius:8px;
        text-decoration:none;
        font-weight:600;
        transition:.3s;
    }

    .footer-btn:hover{
        transform:translateY(-2px);
    }

    .banner{

        display: none;
        position:relative;
        height: 100px;
        min-height: 200px;
        background:none;
        display:flex;
        justify-content:space-between;
        overflow:hidden;
        align-items: flex-start; /* contenu en haut */
        padding: 0;      /* espace en haut */

    }

    .menu-socials{
        display: flex;
        justify-content: center;
        gap: 20px;
        padding: 30px 0;
        border: none;
    }

    /* RESEAU SOCIAUX MENU BURGER */

    .menu li.menu-socials {
        border-bottom: none;
    }

    .menu li.menu-socials a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #b91c1c;
        list-style-type: none;
        font-size: 25px;
        border: 1px solid #b91c1c;
        padding: 10px;
        border-radius: 50%;
    }

    .menu-socials::after{
        display: none;
    }


    .banner-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 30px;
        text-align: center;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .mobile-banner{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px;
    }

    .mobile-banner a img {
        width: 130px;
    }

    .banner-content h1{

        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 15px;

    }

    .banner-images {
        display: none;
    }

    .banner-content p{

        font-size: 16px;
        margin: 0;

    }

    .circleForma{

        position:static;
        transform:none;
        margin-top:25px;
        display:flex;
        flex-direction:column;
        gap:15px;
        width:100%;

    }

    .service{

        gap:15px;

    }

    .service i{

        width:42px;
        height:42px;
        font-size:18px;

    }

    .service span{

        font-size:16px;

    }

    /* ---------------- CHOOSE ------------------ */

    .whyChoose {
        padding: 0 20px; /* marge intérieure de la section */
    }

    .whyChoose h2 {
        font-size: 1.8rem;          /* environ 32px */
        line-height: 1.15;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;

        max-width: 320px;
        margin: 0 auto 40px;
    }

    .allCard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;
    }

    .card {
        box-sizing: border-box; /* très important */
        width: 100%;
        max-width: 300px;        /* 300 px max sur grand téléphone */
        height: auto;
        min-height: 250px;
        padding: 30px 20px;
        border: 3px solid #F5F5F5;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 0;
    }

    /* --------------- NOS FORMATIONS --------------- */

    .formations h2 {
        font-size: 30px;
    }

    .formations-grid {
        display: flex;
        flex-direction: column;
        margin-left: 11px;
        gap: 40px;

    }

    .formations{
        width:100%;
        max-width:750px;
        margin:80px auto;
    }


    .formation-card {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 370px;
        height: 598px;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
        transition: transform 0.35s ease;
    }

    /* ---------------------- PARTNERS ---------------------- */

    .partners h2 {
        font-size: 25px;
    }

    .partner-offer{

        margin:40px 20px 0;
        max-width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:20px;
        padding:25px 20px;
        background:#ffffff;
        border-radius:16px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        border-left:none;
        border-top:6px solid #c40000;

    }

    .offer-icon{
        width:70px;
        height:70px;
        min-width:70px;
        font-size:28px
    }

    .offer-content h3{
        font-size:24px;
        margin-bottom:12px;
    }

    .offer-content p{
        font-size:15px;
        line-height:1.7;
    }

    .promo-code{
        display:block;
        width:100%;
        max-width:260px;
        margin:20px auto;
        padding:12px 15px;
        border:2px dashed #c40000;
        border-radius:10px;
        background:#f8f8f8;
        font-size:22px;
        font-weight:700;
        letter-spacing:2px;
        color:#c40000;
    }

    .offer-action{
        display: flex;
        flex-direction: column;
    }

    .btn-partner{

        display:block;
        width:100%;
        max-width:280px;
        margin:10px auto 0;
        padding:14px 20px;
        text-align:center;
        background:#c40000;
        color:#fff;
        border-radius:8px;
        text-decoration:none;
    }

    .offer-right{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
    }


    /* ------------------------ TIME LINE ------------------------ */

    .timeline{
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 40px;
    }

    .line{
        position: absolute;
        top: 18px;
        left: 18px;
        width: 3px;
        height: calc(100% - 40px);
        background: #b91c1c;
    }

    .step{
        display: flex;
        align-items: flex-start;
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .number{
        width: 38px;
        height: 38px;
        margin: 0;
        flex-shrink: 0;
        background: #b91c1c;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }

    .step-content{
        display: flex;
        flex-direction: column;
    }

    .step h3{
        margin-bottom: 8px;
        font-size: 18px;
    }

    .step p{
        font-size: 16px;
        color: #555;
    }


    .about-training{
        padding: 80px 0;
        background:#fff;
    }

    .training-back-btn{
        display: flex;          /* ou inline-flex */
        width: fit-content;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        margin: 0 auto 30px;    /* Centre horizontalement */
        background: #fff;
        color: #b91c1c;
        border: 2px solid #b91c1c;
        border-radius: 50px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all .25s ease;
    }

    .training-back-btn:hover {
        background: #b91c1c;
        color: #fff;
    }

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

    .about-content{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:80px;
    }

    .about-text{
        flex:1;
    }

    .subtitle{
        color:#c1121f;
        font-size:14px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:1px;
    }

    .about-text h2{
        font-size:46px;
        margin:12px 0 20px;
        color:#111;
    }

    .line{
        display: none;
        width:60px;
        height:4px;
        background:#c1121f;
        border-radius:5px;
        margin-bottom:30px;
    }

    .about-text p{
        color:#444;
        font-size:18px;
        line-height:1.8;
        margin-bottom:20px;
        max-width:500px;
    }

    .about-image{
        flex:1;
        display:flex;
        justify-content:center;
        position:relative;
    }

    .hexagon{
        width:320px;
        aspect-ratio:1;
        clip-path:polygon(
            25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%
        );
        overflow:hidden;
        position:relative;
        box-shadow:0 15px 40px rgba(0,0,0,.18);
    }

    .hexagon img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:.4s;
    }

    .hexagon:hover img{
        transform:scale(1.08);
    }

    .hexagon::before{
        content:"";
        position:absolute;
        left:-12px;
        top:0;
        width:15px;
        height:100%;
        background:#c1121f;
        transform:skewY(-30deg);
        z-index:2;
    }

    .hexagon-decoration{
        position:absolute;
        width:55px;
        aspect-ratio:1;
        clip-path:polygon(
            25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%
        );
    }

    .grey{
        border:2px solid #d8d8d8;
        background: #d6d6d6;
    }

    .red{
        background:#c1121f;
    }

    .one{
        top:40px;
        right:10px;
    }

    .two{
        top:150px;
        right:-30px;
    }

    .red{
        bottom:70px;
        right:20px;
    }

    .separator-wrapper{
        width:100%;
        display:flex;
        justify-content:center;
        margin-top:70px;
    }

    .separator{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:8px;
        margin:80px 0;
    }

    .hex{
        display:block;
        width:18px;
        height:20px;

        clip-path:polygon(
            25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0% 50%
        );
    }

    .red{
        background:#c61b1b;
    }

    .gray{
        background:#d9d9d9;
    }


   /* =========================================================
   RESPONSIVE TABLETTE
========================================================= */



    .reviews {
        padding: 80px 0;
    }

    .reviews-content {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .review-google {
        max-width: 550px;

        margin: 0 auto;

        width: 100%;
    }



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

    .reviews {
        width: 90%;

        padding: 60px 0;
    }

    .reviews-header {
        margin-bottom: 35px;
    }

    .reviews-header h2 {
        font-size: 2rem;
    }

    .review-google {
        padding: 35px 20px;
    }

    .review-google h3 {
        font-size: 1.3rem;
    }

    .review-qr {
        width: 160px;
        height: 160px;
    }




    /* ----------------- FOOTER ------------------ */


    .footer-top{
        flex-direction:column;
        text-align:center;
        gap:25px;
        padding:30px 20px;
    }


    .footer-title{
        flex-direction: column;
        text-align: center;
    }

    .footer-icon{
        margin: 0 auto;
    }

    .footer-content{
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        padding: 50px 25px;
    }

    .footer-col{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo{
        width: 120px;
    }

    .footer-col p{
        width: 100%;
        max-width: 320px;
    }

    .footer-col ul{
        padding: 0;
    }

    .socials{
        justify-content: center;
    }

    .infos li{
        justify-content: center;
        text-align: left;
    }

    .qualiopi{
        width: 180px;
    }

    .footer-bottom{
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .footer-bottom div{
        flex-direction: column;
        gap: 10px;
    }
}