@font-face {
         font-family: 'MainFont';
         src: url('../fonts/inter.ttf');
         font-weight: normal;
         font-style: normal;
     }


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

     :root {
         --primary-color: #e11d2f;
         --primary-color-5: rgba(200, 16, 46, 0.05);
         --primary-color-10: rgba(200, 16, 46, 0.1);
         --primary-color-20: rgba(200, 16, 46, 0.2);
         --accent-color: #1f8b4c;
         --accent-color-dark: #166b3a;
         --alert-color: rgb(255, 255, 0);
         --alert-color-10: rgba(255, 255, 0, 0.1);
         --ink: #0b1220;
         --muted: #64748b;
         --bg-soft: #f6f8fb;
         --border: #e9edf3;
         --border-dark: rgb(225, 227, 229);
         --radius-lg: 22px;
         --radius-md: 16px;
         --radius-sm: 12px;
         --shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.06);
         --shadow-hover: 0 20px 50px rgba(15, 23, 42, 0.10);
         --grad-brand: linear-gradient(135deg, var(--primary-color) 0%, #ff6b5b 100%);
         --grad-accent-color: linear-gradient(135deg, var(--accent-color) 0%, #35c274 100%);
         --grad-alert: linear-gradient(135deg, var(--alert-color) 0%, var(--alert-color-10) 100%);
     }

     body {
         font-family: 'MainFont', sans-serif;
         background: #ffffff;
         color: var(--ink);
         line-height: 1.65;
         -webkit-font-smoothing: antialiased;
         display: flex;
         justify-content: center;
         min-height: 100vh;
     }

     .page-wrapper {
         max-width: 1320px;
         width: 100%;
         background: #ffffff;
         box-shadow: 0 0 60px rgba(15, 23, 42, 0.05);
         margin: 0 auto;
         overflow: hidden;
     }

     .container {
         max-width: 1260px;
         margin: 0 auto;
         padding: 0 24px;
     }

     a {
         text-decoration: none;
         color: inherit;
     }

     /* ========== BARRE SUPÉRIEURE ========== */
     .top-bar {
         background: var(--ink);
         color: #cbd5e1;
         padding: 10px 0;
         transition: transform 0.3s ease, opacity 0.3s ease;
         position: sticky;
         top: 0;
         z-index: 998;
     }

     .top-bar.hidden {
         display: none;
     }

     .top-bar .container {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
         gap: 8px 16px;
     }

     .top-bar-left,
     .top-bar-right {
         display: flex;
         align-items: center;
         gap: 18px;
         flex-wrap: wrap;
     }

     .top-bar a {
         color: #cbd5e1;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         transition: color .25s, transform .25s;
         font-size: 0.8rem;
         font-weight: 700;
     }

     .top-bar a:hover {
         color: #ffffff;
         transform: translateY(-1px);
     }

     .top-bar svg {
         width: 15px;
         height: 15px;
         fill: currentColor;
         flex-shrink: 0;
     }

     .top-bar-left a .icon-circle {
         width: 22px;
         height: 22px;
         border-radius: 50%;
         background: var(--accent-color);
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
     }

     .top-bar-left a .icon-circle svg {
         width: 12px;
         height: 12px;
         fill: #ffffff;
         stroke: none;
     }

     .top-bar-right a {
         width: 32px;
         height: 32px;
         border-radius: 50%;
         background: var(--primary-color);
         color: #ffffff;
         justify-content: center;
         transition: background .25s, transform .25s, color .25s;
     }

     .top-bar-right a:hover {
         background: var(--grad-brand);
         color: #ffffff;
         transform: translateY(-2px);
     }

     .top-bar-right a svg {
         width: 15px;
         height: 15px;
     }

     /* ========== EN-TÊTE ========== */
     header {
         background: rgba(255, 255, 255, 0.92);
         backdrop-filter: blur(10px);
         border-bottom: 1px solid var(--border);
         padding: 0;
         transition: transform 0.3s ease;
         display: flex;
         flex-direction: column;
     }



     .header-grid {
         width: 100%;
         display: flex;
         flex-direction: column-reverse;
         margin-top: 0;
         margin-bottom: 0;
         margin: 0;

     }

    header .grid{

        padding-left: 58px;
        padding-right: 58px;

    }

    .header-buttons{
        display: none;
    }

     .grid-left {
         display: flex;
         justify-content: space-between;
         gap: 40px;
         padding: 10px 0px;
         border-bottom: 1px solid var(--border);
     }

     .header-contacts {
         width: auto;
         max-width: 100%;
         display: flex;
         gap: 5px;
         align-items: center;
         justify-content: space-between;
         background: linear-gradient(to right, #e11d2f, #8b0f1a);
         padding: 10px 54px;
     }

     .header-contacts .h-contacts {
         display: flex;
         gap: 20px;
         font-size: 14px;
     }

     .header-contacts .h-contacts a {
         display: flex;
         gap: 10px;
         align-items: center;
         color: #fff;
     }

     .header-contacts .h-contacts .icon-circle {
         width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #fff;
         border-radius: 50%;
         color: var(--primary-color);
     }

     .header-contacts .h-socials {
         display: flex;
         gap: 7px;
         align-items: center;
         justify-content: center;
     }

     .header-contacts .h-socials a {
         width: 25px;
         height: 25px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: var(--ink);
         border-radius: 50%;
         color: #ffffff;
         font-size: 10px;
     }

     .logo-area {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 14px;
         flex-shrink: 0;
     }


     .flag-burundi img {
         width: 70px;
     }

     .mini-flag {
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .mini-flag img {
         width: 30px;
     }

     .logo h1 {
         font-size: 1.35rem;
         font-weight: 800;
         letter-spacing: -0.5px;
         color: var(--ink);
         line-height: 1.2;
     }

     .logo h1 span {
         background: var(--grad-brand);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
     }

     .logo .devise {
         display: block;
         font-size: 0.65rem;
         font-weight: 700;
         color: var(--accent-color);
         letter-spacing: 1px;
         text-transform: uppercase;
         margin-top: 2px;
     }

     .logo .devise small {
         font-weight: 400;
         color: var(--muted);
         letter-spacing: 0.3px;
     }

     .logo .sous-titre {
         display: block;
         font-size: 0.55rem;
         font-weight: 500;
         color: #a1acbd;
         letter-spacing: 0.5px;
         text-transform: uppercase;
         margin-top: -1px;
     }

     header .search-toggle{
        background: transparent;
        outline: none;
        width: 45px;
        height: 45px;
        display: none;
        align-items: center;
        justify-content: center;
        border: none;
     }

      header .search-toggle i{
        font-size: 18px;
     }

     .header-search {
         flex: 1;
         max-width: 340px;
         min-width: 140px;
         padding: 4px 4px;
         border: 1px solid var(--border);
         border-radius: 40px;
         font-size: 0.85rem;
         background: var(--bg-soft);
         transition: .3s;
         display: flex;
         gap: 7px;
         align-items: center;
         align-self: center;
     }

          .header-search button{
            background: var(--primary-color);
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: none;
     }

     .header-search button i{
        color: #fff;
     }

     .header-search input {
         width: calc( 100% - 42px);
         border: none;
         font-family: inherit;
         background: transparent;
         outline: none;
         padding-left: 10px;
     }

/*      .header-search input:focus {
         outline: none;
         border-color: var(--primary-color);
         background: #ffffff;
         box-shadow: 0 0 0 5px rgba(225, 29, 47, 0.09);
     } */


     .menu-toggle {
         display: none;
         flex-direction: column;
         gap: 5px;
         background: none;
         border: none;
         cursor: pointer;
         padding: 8px;
         border-radius: 10px;
         transition: background .25s;
     }

     .menu-toggle:hover {
         background: var(--bg-soft);
     }

     .menu-toggle span {
         display: block;
         width: 24px;
         height: 2.5px;
         background: var(--ink);
         border-radius: 2px;
         transition: .3s;
     }

     .menu-toggle.active span:nth-child(1) {
         transform: rotate(45deg) translate(5px, 5px);
     }

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

     .menu-toggle.active span:nth-child(3) {
         transform: rotate(-45deg) translate(5px, -5px);
     }


     /* ========== NAVIGATION ========== */
nav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  background: #fff;
}
header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}

     nav ul {
         list-style: none;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 0;
         padding: 0;
         margin: 0;
         position: relative;
         z-index: 10;
     }

     nav>.container>ul>li {
         position: relative;
         padding: 14px 20px;
         font-size: 0.9rem;
         font-weight: 600;
         cursor: pointer;
         transition: background .25s;
         border-radius: 10px 10px 0 0;
     }



     nav>.container>ul>li>a {
         display: flex;
         align-items: center;
         gap: 6px;
         color: #334155;
     }

     nav>.container>ul>li>a svg {
         width: 13px;
         height: 13px;
         stroke: currentColor;
         stroke-width: 2.5;
         fill: none;
         transition: transform .3s;
     }

     nav>.container>ul>li:hover>a svg {
         transform: rotate(180deg);
     }

     nav>.container>ul>li:hover>a {
         color: var(--primary-color);
     }

     .dropdown {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         background: #ffffff;
         min-width: 230px;
         border-radius: var(--radius-md);
         box-shadow: var(--shadow-hover);
         border: 1px solid var(--border);
         padding: 10px;
         z-index: 10000;
     }

     nav>.container>ul>li:hover .dropdown {
         display: block;
         animation: fadeDown .25s ease;
     }

     @keyframes fadeDown {
         from {
             opacity: 0;
             transform: translateY(-8px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .dropdown li {
         padding: 0;
         list-style: none;
     }

     .dropdown a {
         display: block;
         padding: 10px 16px;
         color: #334155;
         font-weight: 500;
         font-size: 0.85rem;
         border-radius: 10px;
         transition: background .2s, color .2s;
     }

     .dropdown a:hover {
         background: var(--bg-soft);
         color: var(--primary-color);
     }

     .nav-flag {
         display: flex;
         align-items: center;
         gap: 6px;
     }




     /* ========== ALERTE ========== */
     .alert-bar {

         background: var(--primary-color-5);
         color: var(--ink);
         font-size: 0.82rem;
         text-align: center;
         border-radius: 100px;
         margin-top: 20px;
         margin-left: 10px;
         margin-right: 10px;
         box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5);
     }

     .alert-bar .container {
         padding: 10px 18px;
         width: 100%;
         max-width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-wrap: wrap;
         gap: 10px;

     }

     .alert-bar .alert-card {
         font-weight: 700;
         color: #ffffff;
         background: var(--grad-brand);
         padding: 5px 10px;
         border-radius: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 7px;
     }

     .alert-bar .icon {
         width: 25px;
         height: 25px;
         border-radius: 50%;
         background: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .alert-bar .icon i {
         font-size: 14px;
         color: var(--ink);
     }

     /* ========== CONTENU PRINCIPAL ========== */
     .main-content {
         padding: 0 24px;
         max-width: 1260px;
         margin: 0 auto;
     }

     /* ========== BANNIÈRE ========== */
       .banner-section {
           margin: 32px 0 36px;
       }

       .banner-grid {
           display: grid;
           grid-template-columns: 2fr 1fr;
           gap: 26px;
           position: relative;
           z-index: 1;
       }

       .slider-container {
           position: relative;
           border-radius: var(--radius-lg);
           overflow: hidden;
           box-shadow: var(--shadow-soft);
           background: #ffffff;
           height: 400px;
           z-index: 1;
       }

       .slider-track {
           display: flex;
           width: 100%;
           height: 100%;
           transition: transform .8s cubic-bezier(.22, 1, .36, 1);
       }

       .slide {
           min-width: 100%;
           height: 100%;
           position: relative;
           z-index: 1;

       }

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

       .slide-overlay {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           padding: 32px 34px 30px;
           background: linear-gradient(transparent, rgba(0, 0, 0, .8));
           color: #ffffff;
           z-index: 100;
       }

       .slide-overlay .tag {
           display: inline-block;
           background: var(--grad-brand);
           font-size: 0.65rem;
           font-weight: 700;
           padding: 4px 16px;
           border-radius: 30px;
           letter-spacing: .5px;
           text-transform: uppercase;
           margin-bottom: 8px;
       }
     .slide-overlay h2 {
         font-size: 1.6rem;
           font-weight: 800;
           line-height: 1.3;
           letter-spacing: -.3px;
     }

     .slide-overlay p {
         font-size: 0.95rem;
         opacity: .9;
         margin-top: 5px;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
         text-overflow: ellipsis;
     }




     .slider-controls {
         position: absolute;
         bottom: 18px;
         right: 26px;
         display: flex;
         gap: 8px;
         z-index: 999;
     }

     .slider-controls button {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         border: none;
         background: rgba(255, 255, 255, .18);
         color: #ffffff;
         cursor: pointer;
         backdrop-filter: blur(6px);
         transition: background .25s, transform .2s;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .slider-controls button:hover {
         background: var(--primary-color);
         transform: scale(1.08);
     }

     .slider-controls button svg {
         width: 22px;
         height: 22px;
         stroke: #ffffff;
         stroke-width: 2.5;
         fill: none;
     }

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

     .slider-dots span {
         width: 9px;
         height: 9px;
         border-radius: 50%;
         background: rgba(255, 255, 255, .45);
         cursor: pointer;
         transition: background .3s, transform .3s, width .3s;
     }

     .slider-dots span.active {
         background: var(--primary-color);
         width: 22px;
         border-radius: 6px;
     }

     /* CAROUSEL */
     .team-carousel {
         overflow: hidden;
         width: 100%;
         max-width: 100%;
         /* limit sidebar carousel width */
         margin: 0 auto;
         position: relative;
     }

     .team-track {
         display: flex;
         transition: transform 1s ease;
         will-change: transform;
     }

     .team-slide {
         flex: 0 0 100%;
         min-width: 100%;
         text-align: center;
         padding: 20px 0;
         opacity: 0;
         transform: translateY(40px);
         transition: all 0.8s ease;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
     }

     .team-slide.active {
         opacity: 1;
         transform: translateY(0);
     }

     .team-slide img {
         width: 100%;
         height: 240px;
         border-radius: var(--radius-md);
         object-fit: cover;
         display: block;
     }

     .team-slide .infos{
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--border);
        padding: 10px;
        margin: 20px;
     }

     .team-slide h3 {
         font-size: 1.12rem;
     }

     .team-slide p {
         font-size: .9rem;
         color: #666;
     }

     .contacts{
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex-wrap: wrap;
     }

     .contacts a {
         font-size: 1rem;
         text-decoration: none;
         color: #fff;
         transition: background 0.3s ease;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: var(--accent-color);
         padding: 5px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .contacts a:hover {
         background: var(--accent-color-dark);
     }

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

        .logo-area.hidden{
        display: none;
     }


            .menu-toggle.hidden{
        display: none;
     } 

          .header-search.open {
         display: flex;
     }

         .team-slide img {
             width: 100%;
             height: 240px;
         }
     }

          .grid-left {
         gap: 5px;
     }


     .banner {
         position: relative;
         width: 100%;
         height: 40vh;
         max-height: 40vh;
     }

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

     .banner .banner-overlay {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.4);
         display: flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         flex-direction: column;
         padding: 20px;
         text-align: center;
     }

     .banner .banner-overlay h1{
         font-size: 2rem;
         letter-spacing: 4px;
         margin: 0;
         padding: 0;
     }

     

     /* ========== SIDEBAR CADRES ========== */
     .cadres-sidebar {
         display: flex;
         flex-direction: column;
     }

     .cadres-sidebar .section-header {
         margin-top: 0px;
     }

     .cadres-sidebar .section-title {
         margin-top: 0;
     }

     .cadres-sidebar .section-title svg {
         width: 18px;
         height: 18px;
         fill: var(--primary-color);
         flex-shrink: 0;
     }

     .cadre-slider-large {
         position: relative;
         border-radius: var(--radius-md);
         overflow: hidden;
         background: var(--bg-soft);
         aspect-ratio: 1 / 1;
         width: 100%;
         max-height: 270px;
         margin: 0 auto;
         box-shadow: var(--shadow-soft);
         transition: box-shadow .3s, transform .3s;
         padding: 8px;
     }

     .cadre-slider-large:hover {
         box-shadow: var(--shadow-hover);
         transform: translateY(-3px);
     }

     .slider-track-large {
         display: flex;
         width: 100%;
         height: 100%;
         transition: transform 1.2s ease-in-out;
         border-radius: calc(var(--radius-md) - 8px);
         overflow: hidden;
     }

     .slide-large {
         min-width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #eef2f6;
     }

     .slide-large img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center top;
         display: block;
     }

     .cadre-caption {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         gap: 6px;
         background: #ffffff;
         padding: 16px 20px;
         border-radius: var(--radius-md);
         box-shadow: var(--shadow-soft);
         transition: transform .25s, box-shadow .25s;
         min-height: 80px;
         cursor: default;
         text-align: center;
         border: 1px solid var(--border);
     }

     .cadre-caption:hover {
         transform: translateY(-2px);
         box-shadow: var(--shadow-hover);
         background: #fafcff;
     }

     .cadre-caption .info h4 {
         font-size: 1.05rem;
         font-weight: 700;
         color: var(--ink);
         line-height: 1.2;
         margin-bottom: 2px;
     }

     .cadre-caption .info p {
         font-size: 0.85rem;
         color: var(--muted);
         margin-top: 2px;
     }

     .cadre-caption .info .fonction {
         display: inline-block;
         background: var(--grad-brand);
         font-size: 0.65rem;
         font-weight: 700;
         padding: 4px 18px;
         border-radius: 20px;
         color: #ffffff;
         margin-top: 6px;
     }

     /* ========== ACTUALITÉS À LA UNE (sans onglets) ========== */
     .actu-une-section {
         margin: 36px 0 44px;
     }

     .section-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
         gap: 12px;
         margin: 40px 0 22px 0;
     }

     .section-title {
         font-size: 2rem;
         font-weight: 800;
         color: var(--ink);
         display: flex;
         align-items: center;
         gap: 12px;
         letter-spacing: -.4px;
         margin-bottom: 0;

     }

     .section-title span {
         padding: 4px 16px;
         border-radius: 30px;
         background: var(--primary-color-10);
         color: var(--primary-color);
         font-size: 14px;
         font-weight: 700;
     }

     .section-title .icon-title {
         width: 26px;
         height: 26px;
         stroke: var(--primary-color);
         stroke-width: 2;
         fill: none;
         flex-shrink: 0;
     }

     .badge-primary-color {
         display: inline-block;
         background: var(--grad-brand);
         color: #ffffff;
         font-size: 0.7rem;
         font-weight: 700;
         padding: 3px 18px;
         border-radius: 30px;
         text-transform: uppercase;
         letter-spacing: .4px;
     }

     .badge-accent-color {
         display: inline-block;
         background: var(--grad-accent-color);
         color: #ffffff;
         font-size: 0.7rem;
         font-weight: 700;
         padding: 3px 18px;
         border-radius: 30px;
         text-transform: uppercase;
         letter-spacing: .4px;
     }

     .btn-voir-tous {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: var(--grad-accent-color);
         border: none;
         color: #ffffff;
         font-weight: 700;
         font-size: 0.8rem;
         padding: 10px 24px;
         border-radius: 40px;
         transition: background .3s, transform .2s, box-shadow .3s;
         cursor: pointer;
         font-family: inherit;
         margin-left: auto;
     }

     .btn-voir-tous:hover {
         background: var(--accent-color);
         transform: translateY(-2px);
         box-shadow: 0 10px 24px var(--shadow-hover);
     }

     .btn-voir-tous svg {
         width: 16px;
         height: 16px;
         stroke: currentColor;
         stroke-width: 2.5;
         fill: none;
     }

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

     .actu-card {
         overflow: hidden;
         transition: transform .3s, box-shadow .3s, border-color .3s;
         cursor: pointer;
         display: flex;
         flex-direction: column;
         border: 1px solid var(--border-dark);
         border-radius: var(--radius-md);
         box-shadow: var(--shadow-soft);
         padding: 15px;
     }

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

     .actu-card .card-img {
         width: 100%;
         height: 250px;
         object-fit: cover;
         /* keeps aspect ratio, fills box */
         object-position: center top;
         /* center horizontally, top vertically */
         display: block;
         background: var(--bg-soft);
         border-radius: 10px;
         transition: transform 0.4s ease;
         overflow: hidden;
     }



     .actu-card .card-body {
         padding: 15px 0;
         flex: 1;
         display: flex;
         flex-direction: column;
     }

     .actu-card .card-body .tag {
         display: inline-block;
         background: var(--primary-color-10);
         color: var(--primary-color);
         font-size: 0.7rem;
         padding: 6px 14px;
         border-radius: 15px;
         margin-bottom: 8px;
         align-self: flex-start;
     }



     .actu-card .card-body h3 {
         font-size: 1rem;
         font-weight: 700;
         color: var(--ink);
         line-height: 1.35;
         margin-bottom: 6px;
     }

     .actu-card .card-body p {
         font-size: 0.82rem;
         margin-bottom: 12px;
         flex: 1;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: accent-colorical;
         overflow: hidden;
     }

     .actu-card .card-body .meta {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         gap: 14px;
         font-size: 0.7rem;
         color: #94a3b8;
         font-weight: 500;
         border-top: 1px solid var(--border);
         padding-top: 12px;
         margin-top: auto;
     }

     .actu-card .card-body .meta .meta-item {
         display: flex;
         align-items: center;
         gap: 5px;
     }

     .actu-card .card-body .meta .meta-item svg {
         width: 14px;
         height: 14px;
         stroke: #94a3b8;
         stroke-width: 2;
         fill: none;
     }

     .actu-card .card-body .meta .meta-item .count {
         font-weight: 600;
         color: var(--muted);
     }

     .actu-card .card-body .meta .author {
         display: flex;
         align-items: center;
         gap: 6px;
         margin-left: auto;
     }

     .actu-card .card-body .meta .author svg {
         width: 14px;
         height: 14px;
         stroke: #94a3b8;
         stroke-width: 2;
         fill: none;
     }

     /* ========== PILIERS STRATÉGIQUES ========== */
     .piliers-section {
         margin: 0 0 44px;
     }

     .piliers-section h2 {
         font-size: 1.4rem;
         font-weight: 800;
         color: var(--ink);
         margin-bottom: 20px;
     }

     .piliers-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 18px;
     }

     .pilier-card {
         background: var(--bg-soft);
         border-radius: var(--radius-sm);
         padding: 20px 16px;
         border: 1px solid var(--border);
         text-align: left;
         transition: transform .3s, box-shadow .3s;
     }


     .pilier-card .icon i {
         color: var(--primary-color);
         font-size: 20px;
         margin-bottom: 10px;
     }

     .pilier-card:hover {
         transform: translateY(-4px);
         box-shadow: var(--shadow-hover);
     }

     .pilier-card .num {
         display: inline-block;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: var(--grad-brand);
         color: #ffffff;
         font-weight: 800;
         line-height: 40px;
         margin-bottom: 10px;
     }

     .pilier-card h4 {
         font-weight: 700;
         color: var(--ink);
         margin-bottom: 6px;
     }

     .pilier-card p {
         font-size: 0.8rem;
         color: var(--muted);
         line-height: 1.4;
     }

     /* ========== À PROPOS DE BUHUMUZA ========== */
     .about-section {
         margin: 0 0 40px;
     }

     .about-inner {
         display: flex;
         flex-direction: column;
         gap: 28px;
         padding: 32px 40px;
     }

     .about-top {
         display: flex;
         align-items: center;
         gap: 32px;
     }

     .about-map {
         position: relative;
         flex: 0 0 340px;
         border-radius: var(--radius-md);
         overflow: hidden;
         box-shadow: var(--shadow-soft);
     }

     .about-map img {
         width: 100%;
         height: 220px;
         object-fit: cover;
         display: block;
     }

     .btn-play-video {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 60px;
         height: 60px;
         border-radius: 50%;
         background: rgba(225, 29, 47, 0.92);
         border: 3px solid #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: transform .2s, background .25s;
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
     }

     .btn-play-video:hover {
         transform: translate(-50%, -50%) scale(1.08);
         background: var(--primary-color);
     }

     .btn-play-video svg {
         width: 24px;
         height: 24px;
         fill: #ffffff;
         stroke: none;
         margin-left: 2px;
     }

     .about-icon {
         flex-shrink: 0;
         width: 56px;
         height: 56px;
         border-radius: 50%;
         background: var(--grad-accent-color);
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 14px;
     }

     .about-icon svg {
         width: 28px;
         height: 28px;
         stroke: #ffffff;
         stroke-width: 1.8;
         fill: none;
     }

     .about-text {
         flex: 1;
     }

     .about-text h2 {
         font-size: 1.4rem;
         font-weight: 800;
         color: var(--ink);
         margin-bottom: 8px;
         letter-spacing: -.3px;
     }

     .about-text h2 span {
         color: var(--accent-color);
     }

     .about-text p {
         font-size: 0.92rem;
         line-height: 1.6;
         margin-bottom: 12px;
     }

     .about-vision {
         border-left: 4px solid #cbd5e1;
         padding-left: 18px;
         margin: 16px 0 18px 0;
         background: transparent;
     }

     .about-vision h3 {
         font-size: 0.95rem;
         font-weight: 700;
         color: var(--ink);
         margin-bottom: 4px;
         letter-spacing: 0.3px;
     }

     .about-vision p {
         font-size: 0.92rem;
         line-height: 1.6;
         margin-bottom: 0;
     }

     .about-vision strong {
         color: var(--ink);
     }

     .about-vision .source {
         display: block;
         font-size: 0.75rem;
         color: #94a3b8;
         margin-top: 4px;
     }

     .btn-voir-plus-about,
     .btn-accent {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: var(--grad-accent-color);
         color: #ffffff;
         font-weight: 700;
         font-size: 0.85rem;
         padding: 10px 24px;
         border-radius: 40px;
         box-shadow: 0 4px 12px rgba(31, 139, 76, 0.3);
         transition: transform .2s, box-shadow .3s;
         border: none;
         cursor: pointer;
         font-family: inherit;
         margin-top: 4px;
     }

     .btn-voir-plus-about:hover,
     .btn-accent:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 20px rgba(31, 139, 76, 0.4);
     }

     .btn-voir-plus-about svg,
     .btn-accent svg {
         width: 16px;
         height: 16px;
         stroke: currentColor;
         stroke-width: 2.5;
         fill: none;
     }

     .stats-block {
         margin-top: 8px;
     }

     .stats-title {
         font-size: 1.1rem;
         font-weight: 700;
         color: var(--ink);
         margin-bottom: 14px;
         letter-spacing: -0.2px;
     }

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

     .stat-card {
         text-align: center;
         transition: transform .25s, box-shadow .25s;
     }



     .stat-card .chiffre {
         font-size: 1.8rem;
         font-weight: 800;
         color: var(--primary-color);
         line-height: 1.2;
     }

     .stat-card h4 {
         font-size: 0.9rem;
         font-weight: 700;
         color: var(--ink);
         margin: 4px 0 2px;
     }

     .stat-card p {
         font-size: 0.75rem;
         color: var(--muted);
     }

     /* ========== FORMULAIRE DE CONTACT ========== */
     .contact-section {
         margin: 44px 0 36px;
     }

     .contact-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 36px;
         padding: 44px 0;
     }

     .contact-info {
         background: #ffff;
         border-radius: 28px;
         border: 1px solid var(--border-dark);
         padding: 20px;
     }

     .contact-info h3 {
         font-size: 1.45rem;
         font-weight: 800;
         color: var(--ink);
         margin-bottom: 10px;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .contact-info h3 svg {
         width: 28px;
         height: 28px;
         stroke: var(--primary-color);
         stroke-width: 2;
         fill: none;
     }

     .contact-info p {
         color: var(--muted);
         font-size: 0.95rem;
         margin-bottom: 22px;
     }

     .contact-info .coordonnees {
         display: flex;
         flex-direction: column;
         gap: 16px;
         margin-top: 12px;
     }

     .contact-info .coordonnees .item {
         display: flex;
         align-items: center;
         gap: 14px;
         font-size: 0.9rem;
         color: #1e293b;
         background: #ffffff;
         padding: 12px 16px;
         border-radius: 14px;
     }

     .contact-info .coordonnees .item svg {
         width: 20px;
         height: 20px;
         stroke: var(--primary-color);
         stroke-width: 2;
         fill: none;
         flex-shrink: 0;
     }

     .contact-info .coordonnees .item strong {
         font-weight: 700;
         color: var(--ink);
     }

     .contact-form form {
         display: flex;
         flex-direction: column;
         gap: 16px;
     }

     .contact-form .form-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 16px;
     }

     .contact-form .form-group {
         display: flex;
         flex-direction: column;
         gap: 6px;
     }

     .contact-form .form-group label {
         font-size: 0.82rem;
         font-weight: 700;
         color: #1e293b;
     }

     .contact-form .form-group input,
     .contact-form .form-group textarea,
     .contact-form .form-group select {
         padding: 13px 18px;
         border: 1px solid var(--border-dark);
         border-radius: 14px;
         font-size: 0.9rem;
         font-family: inherit;
         background: #ffffff;
         transition: .25s;
         width: 100%;
     }

     .contact-form .form-group input:focus,
     .contact-form .form-group textarea:focus,
     .contact-form .form-group select:focus {
         outline: none;
         border-color: var(--accent-color);
         box-shadow: 0 0 0 5px rgba(31, 139, 76, 0.12);
     }

     .contact-form .form-group textarea {
         resize: accent-colorical;
         min-height: 100px;
     }

     .contact-form .form-group select {
         appearance: none;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right 16px center;
         background-size: 18px;
         cursor: pointer;
     }

     .contact-form .btn-submit {
         padding: 15px 38px;
         border: none;
         border-radius: 60px;
         background: var(--grad-accent-color);
         color: #ffffff;
         font-weight: 700;
         font-size: 0.95rem;
         cursor: pointer;
         transition: transform .2s, box-shadow .3s, flex .3s;
         font-family: inherit;
         align-self: flex-end;
         box-shadow: 0 10px 24px rgba(31, 139, 76, .3);
         display: inline-flex;
         align-items: center;
         justify-content: space-between;
         gap: 8px;
         min-width: 40%;
         max-width: 100%;
     }

     .contact-form .btn-submit:hover {
         transform: translateY(-2px) scale(1.02);
         box-shadow: 0 14px 32px rgba(31, 139, 76, .4);
     }

     .contact-form .btn-submit svg {
         width: 20px;
         height: 20px;
         stroke: currentColor;
         stroke-width: 2.5;
         fill: none;
     }

     /* ========== FAQS ========== */
     .faqs-section {
         margin: 44px 0 36px;
     }

     .faqs-section h2 {
         font-size: 1.4rem;
         font-weight: 800;
         color: var(--ink);
         margin-bottom: 24px;
     }

     .faq-item {
         background: #ffffff;
         border: 1px solid var(--border);
         border-radius: var(--radius-sm);
         margin-bottom: 12px;
         overflow: hidden;
         box-shadow: var(--shadow-soft);
         transition: box-shadow .25s;
     }

     .faq-item:hover {
         box-shadow: var(--shadow-hover);
     }

     .faq-question {
         padding: 16px 20px;
         font-weight: 700;
         color: var(--ink);
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         align-items: center;
         transition: background .2s;
         background: #ffffff;
     }

     .faq-question:hover {
         background: var(--bg-soft);
     }

     .faq-question .icon {
         transition: transform .3s;
         font-size: 1.1rem;
         color: var(--accent-color);
     }

     .faq-item.active .faq-question .icon {
         transform: rotate(180deg);
     }

     .faq-answer {
         max-height: 0;
         overflow: hidden;
         transition: max-height .4s ease, padding .3s ease;
         padding: 0 20px;
         color: var(--muted);
         font-size: 0.92rem;
         line-height: 1.6;
     }

     .faq-item.active .faq-answer {
         max-height: 300px;
         padding: 0 20px 20px 20px;
     }

     /* ========== MODAL VIDÉO ========== */
     .video-modal-overlay {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(11, 18, 32, 0.85);
         z-index: 2000;
         align-items: center;
         justify-content: center;
         padding: 20px;
     }

     .video-modal-overlay.active {
         display: flex;
     }

     .video-modal-box {
         position: relative;
         width: 100%;
         max-width: 900px;
     }

     .video-modal-frame-wrap {
         position: relative;
         width: 100%;
         padding-top: 56.25%;
         border-radius: var(--radius-md);
         overflow: hidden;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
     }

     .video-modal-frame-wrap iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: 0;
     }

     .video-modal-close {
         position: absolute;
         top: -44px;
         right: 0;
         width: 36px;
         height: 36px;
         border-radius: 50%;
         background: #ffffff;
         border: none;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: background .2s, transform .2s;
     }

     .video-modal-close:hover {
         background: var(--primary-color);
         transform: rotate(90deg);
     }

     .video-modal-close svg {
         width: 18px;
         height: 18px;
         stroke: var(--ink);
         stroke-width: 2.5;
         fill: none;
     }

     .video-modal-close:hover svg {
         stroke: #ffffff;
     }

     /* ========== NEWSLETTER ========== */
     .newsletter-section {
         display: block;
         width: 100%;
         box-sizing: border-box;
         background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
         border-radius: 20px;
         border: 1px solid var(--border);
         padding: 40px 48px;
         margin: 0 auto 44px;
         text-align: center;
         box-shadow: var(--shadow-soft);
         transition: box-shadow .3s ease;
         color: var(--ink);
     }

     .newsletter-section:hover {
         box-shadow: var(--shadow-hover);
     }

     .newsletter-section .icon-newsletter {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 64px;
         height: 64px;
         background: rgba(31, 139, 76, 0.10);
         border-radius: 50%;
         margin-bottom: 12px;
     }

     .newsletter-section .icon-newsletter svg {
         width: 32px;
         height: 32px;
         stroke: var(--accent-color);
         stroke-width: 1.8;
         fill: none;
     }

     .newsletter-section h2 {
         font-size: 1.6rem;
         font-weight: 800;
         margin-bottom: 4px;
         letter-spacing: -.3px;
         color: var(--ink);
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         flex-wrap: wrap;
     }

     .newsletter-section h2 span {
         color: var(--accent-color);
     }

     .newsletter-section .sous-titre {
         color: var(--muted);
         font-size: 0.95rem;
         margin-bottom: 24px;
         max-width: 500px;
         margin-left: auto;
         margin-right: auto;
     }

     .newsletter-form {
         display: flex;
         justify-content: center;
         gap: 12px;
         flex-wrap: wrap;
         max-width: 560px;
         margin: 0 auto;
     }

     .newsletter-form .input-group {
         flex: 1;
         min-width: 220px;
         position: relative;
     }

     .newsletter-form .input-group svg {
         position: absolute;
         left: 16px;
         top: 50%;
         transform: translateY(-50%);
         width: 20px;
         height: 20px;
         stroke: #94a3b8;
         stroke-width: 2;
         fill: none;
         pointer-events: none;
     }

     .newsletter-form input {
         width: 100%;
         padding: 14px 20px 14px 48px;
         border: 2px solid #e2e8f0;
         border-radius: 60px;
         font-size: 0.95rem;
         background: #ffffff;
         color: var(--ink);
         transition: .3s;
         font-family: inherit;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
         box-sizing: border-box;
     }

     .newsletter-form input:focus {
         outline: none;
         border-color: var(--accent-color);
         box-shadow: 0 0 0 4px rgba(31, 139, 76, 0.12);
         background: #ffffff;
     }

     .newsletter-form input::placeholder {
         color: #94a3b8;
         font-weight: 400;
     }

     .newsletter-form button {
         padding: 14px 40px;
         border: none;
         border-radius: 60px;
         background: var(--accent-color);
         color: #ffffff;
         font-weight: 700;
         font-size: 0.95rem;
         cursor: pointer;
         transition: background .3s, transform .15s, box-shadow .3s;
         font-family: inherit;
         white-space: nowrap;
         box-shadow: 0 4px 12px rgba(31, 139, 76, 0.30);
         display: inline-flex;
         align-items: center;
         gap: 8px;
     }

     .newsletter-form button:hover {
         background: #166b3a;
         transform: scale(1.02);
         box-shadow: 0 6px 20px rgba(31, 139, 76, 0.40);
     }

     .newsletter-form button svg {
         width: 20px;
         height: 20px;
         stroke: currentColor;
         stroke-width: 2.5;
         fill: none;
     }

     .newsletter-footer {
         margin-top: 16px;
         font-size: 0.75rem;
         color: #94a3b8;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 6px;
     }

     .newsletter-footer svg {
         width: 14px;
         height: 14px;
         stroke: #94a3b8;
         stroke-width: 2;
         fill: none;
     }

     /* ========== BOUTON WHATSAPP FLOTTANT ========== */
     .whatsapp-float {
         position: fixed;
         bottom: 30px;
         right: 30px;
         z-index: 1500;
         width: 60px;
         height: 60px;
         border-radius: 50%;
         background: #25d366;
         color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
         transition: transform .3s, box-shadow .3s;
         font-size: 2rem;
         text-decoration: none;
     }

     .whatsapp-float:hover {
         transform: scale(1.1);
         box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
         color: #ffffff;
     }

     /* ========== FOOTER ========== */
     footer {
         background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
         color: #f0f0f0;
         padding: 56px 0 0;
     }

     .footer-columns {
         display: grid;
         grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
         gap: 40px;
         padding-bottom: 40px;
     }

     .footer-col h4 {
         color: #ffffff;
         font-size: 1.05rem;
         font-weight: 800;
         letter-spacing: .3px;
         margin-bottom: 20px;
         text-transform: uppercase;
     }

     .footer-col a {
         display: block;
         color: #d1d1d1;
         font-size: 0.92rem;
         font-weight: 500;
         margin-bottom: 14px;
         transition: color .2s, transform .2s;
     }

     .footer-col a:hover {
         color: #ffffff;
         transform: translateX(3px);
     }

     .footer-logo {
         display: flex;
         align-items: center;
         gap: 12px;
         margin-bottom: 18px;
     }

     .footer-logo .flag-burundi {
         box-shadow: none;
     }

     .footer-logo-text {
         font-size: 1.15rem;
         font-weight: 700;
         color: #ffffff;
         letter-spacing: -.2px;
     }

     .footer-logo-text strong {
         color: var(--accent-color);
         font-weight: 800;
     }

     .footer-desc {
         font-size: 0.88rem;
         color: #c0c0c0;
         line-height: 1.7;
         margin-bottom: 22px;
         max-width: 320px;
     }

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

     .footer-social a {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: var(--accent-color);
         display: flex;
         align-items: center;
         justify-content: center;
         transition: background .25s, transform .2s;
         margin-bottom: 0;
     }

     .footer-social a svg {
         width: 18px;
         height: 18px;
         color: #ffffff;
     }

     .footer-social a:hover {
         background: var(--primary-color);
         transform: translateY(-3px);
     }

     .footer-hours {
         display: flex;
         align-items: center;
         gap: 10px;
         font-size: 0.88rem;
         color: #d1d1d1;
         margin-bottom: 16px;
     }

     .footer-hours svg {
         width: 18px;
         height: 18px;
         stroke: var(--accent-color);
         stroke-width: 2;
         fill: none;
         flex-shrink: 0;
     }

     .footer-bottom-bar {
         background: var(--grad-accent-color);
         color: #ffffff;
         text-align: center;
         font-size: 0.88rem;
         font-weight: 500;
         padding: 18px 0;
     }

     .footer-bottom-bar strong {
         font-weight: 700;
     }

     .footer-bottom-bar .nexusx {
         color: #fde68a;
     }

     /* ========== ANIMATIONS ========== */
     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .banner-section,
     .cadre-slider-large,
     .cadre-caption,
     .actu-une-section,
     .piliers-section,
     .contact-section,
     .newsletter-section,
     .about-section,
     .faqs-section {
         animation: fadeInUp .7s ease forwards;
     }

     /* ========== SHAPES ========== */

     .trapezoid {
         padding-left: 50px;
         clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
     }


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

          @media (max-width: 1137px) {

         header .header-grid {
             flex-direction: column-reverse;
             gap: 0;
         }

         header .header-grid .header-contacts.trapezoid {
             padding-left: 10px;
             clip-path: none;

         }

         header .header-grid .header-contacts {
             flex-direction: row;
             justify-content: space-between;
         }

     }

     @media (max-width: 1024px) {
         .banner-grid {
             grid-template-columns: 1fr;
         }

         .slider-container {
            width: 100%;
             height: 340px;
         }

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

         .contact-grid {
             grid-template-columns: 1fr;
             padding: 32px 28px;
         }

         .contact-form .btn-submit {
             align-self: stretch;
             justify-content: center;
         }

         .about-top {
             flex-direction: column-reverse;
             text-align: center;
         }

         .about-map {
             flex: 0 0 auto;
             width: 100%;
         }

         .about-icon {
             margin: 0 auto 14px;
         }

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

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

     @media (max-width: 768px) {


         /* --- Justification des textes sur mobile --- */
         .footer-col,
         .footer-desc,
         .footer-hours,
         .footer-col a,
         .contact-info,
         .contact-info p,
         .contact-info .coordonnees .item,
         .about-text,
         .about-text p,
         .faq-item,
         .faq-answer {
             text-align: left !important;
         }

         .footer-social {
             justify-content: flex-start;
         }

         .footer-logo {
             justify-content: flex-start;
         }

         .footer-hours {
             justify-content: flex-start;
         }

         .top-bar .container {
             justify-content: center;
             gap: 10px 16px;
         }


         .alert-bar {
             display: none;
         }

         .top-bar.hidden {
             transform: translateY(-100%);
             opacity: 0;
             pointer-events: none;
         }

         header.fixed {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             max-height: calc(100vh - 70px);
             transform: translateY(0);
             transition: transform 0.3s ease;
             display: flex;
             z-index: 1001;
         }

         .grid-left {
             width: 100%;
         }

         .header-contacts .h-contacts {
             justify-content: space-between;
             width: 100%;
             transition: transform 0.3s ease, opacity 0.3s ease;
         }


         .header-contacts.hidden {
             display: none;
             transform: translateY(-100%);
             opacity: 0;
             pointer-events: none;
         }

         .header-contacts .h-contacts a {
             font-size: 10px;
         }

         .header-contacts .h-contacts .icon-circle {
             padding: 0;
             background: transparent;
             width: auto;
             height: auto;
         }

         .header-contacts .h-contacts .icon-circle i {
             color: #fff;
         }


         .header-contacts .h-socials {
             display: none;
         }


         .header-search {
             order: 3;
             flex: 1 1 100%;
             max-width: 100%;
             margin-top: 6px;
             text-align: center;
             display: none;

         }

         .header-search input {
             max-width: 320px;
             margin: 0 auto;
             display: block;
         }

         .menu-toggle {
             display: flex;
             background: transparent !important;
         }

         .header-buttons{
            display: flex;
            gap: 4px;
            align-items: center;
            justify-content: flex-end;
         }

         header .search-toggle{
            display: flex;
         }


         nav {
             max-height: 0;
             overflow: hidden;
             transition: max-height .4s ease, padding .3s ease;
             position: fixed;
             z-index: 999;
             width: 100vw;
             max-width: 100vw;
             

         }

         nav.open {
             max-height: calc(100vh - 80px);
             overflow-y: auto;
             padding: 0px 0 16px;
             border-bottom: 1px solid var(--border);
         }

         nav>.container>ul {
             flex-direction: column;
             align-items: stretch;
             gap: 0;
             padding-top: 20px;
         }

         nav>.container>ul>li {
             padding: 10px 16px;
             border-radius: 10px;
             position: relative;
         }

         nav>.container>ul>li:hover {
             background: transparent;
         }

         .dropdown {
             position: absolute;
             display: none;
             box-shadow: none;
             padding-left: 20px;
             background: var(--bg-soft);
             border-radius: 10px;
             margin-top: 4px;
             z-index: 9999;
         }

         nav>.container>ul>li.open-dropdown .dropdown {
             display: block;
             animation: none;
         }

         nav>.container>ul>li.open-dropdown>a svg {
             transform: rotate(180deg);
         }

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

         .slider-container {
             height: 280px;
             margin-top: 140px;
         }

         .slide-overlay h2 {
             font-size: 1.5rem;
         }

         .slide-overlay p {
             font-size: 0.8rem;
         }

         .actu-grid {
             grid-template-columns: 1fr 1fr;
             gap: 14px;
         }

         .actu-card img {
             height: 120px;
         }

         .contact-grid {
             padding: 24px 18px;
             gap: 24px;
             border-radius: 20px;
         }

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

         .contact-info h3 {
             font-size: 1.2rem;
         }

         .newsletter-section {
             padding: 32px 24px;
             margin: 0 auto 32px;
             border-radius: 20px;
         }

         .newsletter-section .icon-newsletter {
             width: 56px;
             height: 56px;
         }

         .newsletter-section .icon-newsletter svg {
             width: 28px;
             height: 28px;
         }

         .newsletter-section h2 {
             font-size: 1.3rem;
             gap: 6px;
         }

         .newsletter-section .sous-titre {
             font-size: 0.85rem;
             margin-bottom: 18px;
         }

         .newsletter-form {
             flex-direction: column;
             align-items: stretch;
             gap: 12px;
             max-width: 100%;
         }

         .newsletter-form .input-group {
             min-width: unset;
             width: 100%;
         }

         .newsletter-form input {
             padding: 15px 20px 15px 50px;
             font-size: 0.9rem;
         }

         .newsletter-form button {
             width: 100%;
             justify-content: center;
             padding: 15px 20px;
             font-size: 0.9rem;
         }

         .newsletter-footer {
             font-size: 0.7rem;
             flex-wrap: wrap;
         }

         .footer-columns {
             grid-template-columns: 1fr 1fr;
             gap: 32px 24px;
         }

         .footer-brand {
             grid-column: 1 / -1;
         }

         .footer-desc {
             max-width: 100%;
         }

         .footer-bottom-bar {
             font-size: 0.78rem;
             padding: 14px 0;
         }

         .cadre-slider-large {
             max-height: 220px;
         }

         .section-title {
             font-size: 1.25rem;
         }

         .btn-voir-tous {
             font-size: 0.75rem;
             padding: 8px 18px;
         }

         .about-text h2 {
             font-size: 1.2rem;
         }

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

         .about-map img {
             height: 160px;
         }

         .btn-play-video {
             width: 50px;
             height: 50px;
         }

         .btn-play-video svg {
             width: 20px;
             height: 20px;
         }

         .about-stats {
             grid-template-columns: 1fr;
             gap: 20px;
         }

         .stats-card {
             border-bottom: 1px solid #ccc;
         }

         .piliers-grid {
             grid-template-columns: 1fr 1fr;
             gap: 14px;
         }

         .about-inner {
             padding: 24px 18px;
         }

         .about-vision {
             padding-left: 14px;
         }

         .whatsapp-float {
             width: 54px;
             height: 54px;
             font-size: 1.8rem;
             bottom: 20px;
             right: 20px;
         }

         .banner {
             height: 25vh;
             max-height: 25vh;
         }

         .banner h1 {
             font-size: 1.7rem;
         }
     }

     @media (max-width: 480px) {
         .main-content {
             padding: 0 16px;
         }

         .container {
             padding: 0 16px;
         }


         .logo h1 {
             font-size: 1rem;
         }

         .logo h1 span {
             display: inline;
         }

         .logo .devise {
             font-size: 0.5rem;
             letter-spacing: .4px;
         }

         .logo .sous-titre {
             font-size: 0.45rem;
         }

         .slider-container {
               height: 220px;
           }

           .slide-overlay {
               padding: 16px 18px 18px;
           }

           .slide-overlay h2 {
               font-size: 0.95rem;
           }

           .slide-overlay p {
               display: none;
           }

           .slider-dots {
               bottom: 10px;
           }

           .slider-controls {
               bottom: 10px;
               right: 12px;
           }

           .slider-controls button {
               width: 32px;
               height: 32px;
           }

           .slider-controls button svg {
               width: 18px;
               height: 18px;
           }

         .cadre-caption {
             padding: 12px 16px;
             min-height: 70px;
         }

         .cadre-caption .info h4 {
             font-size: 0.95rem;
         }


         .actu-grid {
             grid-template-columns: 1fr;
             gap: 14px;
         }

         .actu-card img {
             height: 140px;
         }

         .contact-grid {
             padding: 18px 14px;
             border-radius: 16px;
         }

         .contact-info h3 {
             font-size: 1rem;
         }

         .contact-info .coordonnees .item {
             font-size: 0.8rem;
         }

         .contact-form .btn-submit {
             font-size: 0.85rem;
             padding: 12px 24px;
         }

         .newsletter-section {
             padding: 24px 16px;
             border-radius: 16px;
             margin: 0 auto 32px;
         }

         .newsletter-section h2 {
             font-size: 1.1rem;
         }

         .newsletter-section .icon-newsletter {
             width: 48px;
             height: 48px;
         }

         .newsletter-section .icon-newsletter svg {
             width: 24px;
             height: 24px;
         }

         .newsletter-form input {
             padding: 13px 16px 13px 46px;
             font-size: 0.85rem;
         }

         .newsletter-form button {
             font-size: 0.85rem;
             padding: 13px 16px;
         }

         .newsletter-form .input-group svg {
             width: 18px;
             height: 18px;
             left: 16px;
         }

         .top-bar .top-bar-right a {
             width: 28px;
             height: 28px;
         }

         .top-bar .top-bar-right a svg {
             width: 13px;
             height: 13px;
         }

         .section-title {
             font-size: 1.15rem;
         }

         .section-title .icon-title {
             width: 22px;
             height: 22px;
         }

         .btn-voir-tous {
             font-size: 0.7rem;
             padding: 6px 18px;
         }

         .footer-columns {
             grid-template-columns: 1fr;
             gap: 28px;
             text-align: left !important;
         }

         .footer-logo {
             justify-content: flex-start;
         }

         .footer-social {
             justify-content: flex-start;
         }

         .footer-hours {
             justify-content: flex-start;
         }

         .footer-col a {
             text-align: left !important;
         }

         .about-map img {
             height: 140px;
         }

         .btn-play-video {
             width: 44px;
             height: 44px;
         }

         .btn-play-video svg {
             width: 18px;
             height: 18px;
         }

         .about-stats {
             grid-template-columns: 1fr;
         }


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

         .about-inner {
             padding: 18px 14px;
         }

         .about-vision {
             padding-left: 12px;
         }

         .whatsapp-float {
             width: 48px;
             height: 48px;
             font-size: 1.5rem;
             bottom: 16px;
             right: 16px;
         }

                  .banner {
             height: 20vh;
             max-height: 20vh;
         }
     }

     .top-bar a,
     .top-bar .top-bar-left a,
     .top-bar .top-bar-right a {
         font-weight: 700 !important;
     }

     .top-bar a svg,
     .btn-voir-tous svg,
     .actu-card .date svg {
         accent-colorical-align: middle;
     }