:root{
      --primary:#0b6b43;
      --primary-dark:#064a2f;
      --secondary:#d71920;
      --gold:#d7a83d;
      --ink:#17231d;
      --text:#17231d;
      --dark:#17231d;
      --primary-light:#e8f4ee;
      --muted:#6d7b74;
      --bg:#f5f7f6;
      --card:#ffffff;
      --border:#e6ebe8;
      --shadow:0 10px 30px rgba(12,45,30,.08);
      --radius:18px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:"Cairo","Tajawal",sans-serif;
      line-height:1.8;
    }
    a{text-decoration:none}
    .topbar-logo{
      display:none;
    }
    .topbar{
      background:#10231b;
      color:#dfe9e4;
      font-size:.85rem;
    }
    .topbar a{color:#dfe9e4}
    .brand-header{
      background:url("../images/lfwchlef_bg.jpg") no-repeat scroll center top #0b6b43;
      border-bottom:1px solid var(--border);
    }
    .brand-logo{
      width:68px;height:68px;
      border-radius:50%;
      background:linear-gradient(145deg,var(--primary),#0e8a58);
      color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-size:1.8rem;
      box-shadow:0 8px 22px rgba(11,107,67,.2);
      flex:0 0 auto;
    }
    .brand-title{font-weight:800;color:var(--primary-dark);font-size:1.35rem}
    .brand-subtitle{font-size:.78rem;color:#fff;}
    .main-nav{
      background:#fff;
      border-top:1px solid #f0f2f1;
      border-bottom:1px solid var(--border);
      position:sticky;top:0;z-index:1030;
    }
    .main-nav .nav-link{
      color:#26352e;
      font-weight:700;
      padding:.95rem .85rem!important;
      position:relative;
    }
    .main-nav .nav-link:hover,.main-nav .nav-link.active{color:var(--primary)}
    .main-nav .nav-link.active:after{
      content:"";position:absolute;right:.8rem;left:.8rem;bottom:0;
      height:3px;background:var(--primary);border-radius:3px 3px 0 0;
    }

    .ticker{
      background:var(--primary);
      color:#fff;
      overflow:hidden;
    }
    .ticker-label{
      background:var(--secondary);
      padding:.55rem 1rem;
      font-weight:800;
      white-space:nowrap;
    }
    .ticker-text{white-space:nowrap;animation:ticker 28s linear infinite}
    @keyframes ticker{from{transform:translateX(20%)}to{transform:translateX(-120%)}}
	/*
    .hero{
      position:relative;
      overflow:hidden;
      border-radius:0 0 24px 24px;
      background:
        linear-gradient(90deg,rgba(4,42,27,.92),rgba(6,75,46,.58)),
        radial-gradient(circle at 80% 20%,#24a56c,transparent 35%),
        linear-gradient(135deg,#15372a,#0a6b43);
      min-height:400px;
      color:#fff;
    }
	*/
	.hero{
	  position:relative;
	  overflow:hidden;
	  border-radius:0 0 24px 24px;
	  min-height:400px;
	  color:#fff;

	  background:
		linear-gradient(
		  90deg,
		  rgba(4,42,27,.90),
		  rgba(6,75,46,.55)
		),
		url("../images/stade_mohamed_boumezrag02.jpg") center center / cover no-repeat;
	}
    .hero:after{
      content:"⚽";
      position:absolute;left:8%;bottom:-25px;
      font-size:12rem;opacity:.07;transform:rotate(-12deg);
    }
    .hero-content{min-height:400px;display:flex;align-items:center}
    .hero-kicker{
      display:inline-flex;gap:.5rem;align-items:center;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;padding:.35rem .8rem;
      font-size:.8rem;
    }
    .hero h1{font-weight:800;font-size:clamp(2rem,4vw,3.7rem);line-height:1.2}
    .hero p{color:#e5f2ec;max-width:720px}
    .hero-btn{border-radius:12px;padding:.7rem 1.2rem;font-weight:700}

    .section-head{
      display:flex;align-items:end;justify-content:space-between;gap:1rem;
      margin-bottom:1.1rem;
    }
    .section-title{
      font-weight:800;margin:0;position:relative;padding-right:.85rem;
    }
    .section-title:before{
      content:"";position:absolute;right:0;top:.25rem;
      width:4px;height:75%;border-radius:4px;background:var(--primary);
    }
    .section-link{font-weight:700;color:var(--primary);font-size:.9rem}

    .content-card,.news-card,.match-card,.standings-card,.quick-card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .news-card{overflow:hidden;height:100%;transition:.25s}
    .news-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(12,45,30,.12)}
	.news-image{
	  height:165px;
	  position:relative;
	  overflow:hidden;
	  color:#fff;
	  background:#193a2d;
	}

	.news-image img{
	  width:100%;
	  height:100%;
	  object-fit:cover;
	  object-position:center;
	  display:block;
	  transition:transform .4s ease;
	}

	.news-image::after{
	  content:"";
	  position:absolute;
	  inset:0;
	  background:linear-gradient(
		180deg,
		rgba(0,0,0,0) 25%,
		rgba(0,0,0,.75) 100%
	  );
	  pointer-events:none;
	}

	.news-image span{
	  position:absolute;
	  right:1rem;
	  bottom:1rem;
	  z-index:2;

	  font-size:.78rem;
	  background:var(--secondary);
	  color:#fff;

	  padding:.25rem .55rem;
	  border-radius:6px;
	  font-weight:700;
	}

.news-card:hover .news-image img{
  transform:scale(1.06);
}
    .news-body{padding:1rem}
    .news-body h3{font-size:1rem;font-weight:800;line-height:1.6;margin:.35rem 0}
    .meta{font-size:.75rem;color:var(--muted)}

    .side-panel{padding:1rem}
    .side-title{font-weight:800;border-bottom:1px solid var(--border);padding-bottom:.7rem;margin-bottom:.4rem}
    .mini-news{
      display:flex;gap:.75rem;padding:.75rem 0;border-bottom:1px solid #eef1ef;
    }
    .mini-news:last-child{border-bottom:0}
	.mini-thumb{
	  width:70px;
	  height:55px;
	  border-radius:10px;
	  overflow:hidden;
	  flex:0 0 auto;
	  background:#edf3ef;
	}

	.mini-thumb img{
	  width:100%;
	  height:100%;
	  display:block;
	  object-fit:cover;
	  object-position:center;
	  transition:transform .3s ease;
	}

	.mini-news:hover .mini-thumb img{
	  transform:scale(1.08);
	}
    .mini-news h4{font-size:.8rem;font-weight:700;margin:0 0 .15rem}

    .quick-card{
      padding:1.1rem;
      display:flex;align-items:center;gap:.8rem;height:100%;
      transition:.2s;
    }
    .quick-card:hover{border-color:#b7d6c7;transform:translateY(-2px)}
    .quick-icon{
      width:48px;height:48px;border-radius:13px;
      display:grid;place-items:center;
      background:#e8f4ee;color:var(--primary);font-size:1.35rem;
      flex:0 0 auto;
    }
    .quick-card h4{font-size:.9rem;font-weight:800;margin:0}
    .quick-card p{margin:0;color:var(--muted);font-size:.72rem}

    .match-card{padding:1rem}
    .match-date{font-size:.72rem;color:var(--muted);margin-bottom:.6rem}
    .team{
      display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.82rem;
    }
    .team-logo{
      width:42px;height:42px;border-radius:50%;
      display:grid;place-items:center;
      background:#edf4f0;border:1px solid #dbe7e1;color:var(--primary);
      font-size:1.1rem;
    }
    .score{
      font-size:1.35rem;font-weight:800;color:var(--primary-dark);
      min-width:58px;text-align:center;
    }
    .status{font-size:.68rem;border-radius:999px;padding:.2rem .5rem;background:#e9f6ef;color:var(--primary);font-weight:800}

    .standings-card{overflow:hidden}
    .table thead th{
      background:#f0f5f2;color:#42554b;font-size:.75rem;
      border:0;padding:.75rem .55rem;
    }
    .table tbody td{vertical-align:middle;font-size:.78rem;padding:.72rem .55rem;border-color:#eef2ef}
    .rank{
      width:28px;height:28px;display:inline-grid;place-items:center;
      border-radius:8px;background:#eef3f0;font-weight:800;
    }
    .rank.top{background:#e8f5ee;color:var(--primary)}
    .club-name{font-weight:700}
    .form span{
      display:inline-grid;place-items:center;width:21px;height:21px;border-radius:5px;
      font-size:.62rem;font-weight:800;margin-left:2px
    }
    .w{background:#dff3e8;color:#137046}.d{background:#fff0cf;color:#a36b00}.l{background:#fbe1e2;color:#b62931}

    .document-list{padding:1rem}
    .document-item{
      display:flex;align-items:center;gap:.7rem;padding:.75rem 0;border-bottom:1px solid #edf1ef
    }
    .document-item:last-child{border-bottom:0}
    .file-icon{
      width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
      background:#fff1f1;color:#c32932
    }
    .document-item h5{font-size:.78rem;font-weight:800;margin:0}
    .document-item small{color:var(--muted);font-size:.68rem}

    .newsletter{
      background:linear-gradient(135deg,var(--primary-dark),var(--primary));
      color:#fff;border-radius:var(--radius);padding:2rem;
      box-shadow:var(--shadow)
    }
    .newsletter .form-control{border:0;border-radius:10px 0 0 10px}
    .newsletter .btn{border-radius:0 10px 10px 0;font-weight:800}

    footer{background:#10231b;color:#cbd9d2}
    footer h5{color:#fff;font-weight:800;font-size:.95rem}
    footer a{color:#cbd9d2;font-size:.82rem}
    footer a:hover{color:#fff}
    .social{
      width:38px;height:38px;border:1px solid rgba(255,255,255,.15);
      border-radius:10px;display:grid;place-items:center;color:#fff
    }
    .bottom-footer{border-top:1px solid rgba(255,255,255,.1);font-size:.75rem;color:#9fb1a8}

    .floating-tools{
      position:fixed;left:18px;bottom:18px;z-index:1040;display:flex;flex-direction:column;gap:8px
    }
    .floating-tools a{
      width:45px;height:45px;border-radius:50%;display:grid;place-items:center;
      background:#fff;color:var(--primary);box-shadow:0 8px 22px rgba(0,0,0,.12);
      border:1px solid var(--border)
    }

    @media (max-width: 991.98px){
      .brand-header .container{padding-top:.8rem;padding-bottom:.8rem}
      .hero{border-radius:0}
      .hero-content{min-height:360px}
      .main-nav .nav-link.active:after{display:none}
	  .brand-height{min-height:80px}
      .brand-logo{display:none}
      .brand-title{display:none}
      .brand-subtitle{display:none}
    }
    @media (max-width: 575.98px){
      .hero h1{font-size:2rem}
      .hero{min-height:350px}
      .hero-content{min-height:350px}
	  .brand-height{min-height:80px}
      .brand-logo{display:none}
      .brand-title{display:none}
      .brand-subtitle{display:none}
      .ticker-label{font-size:.75rem}
    }
	
	
	.article-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
	 
	.article-cover{position:relative;height:470px;overflow:hidden;background:#183b2c}
	.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
	.article-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.55) 100%);pointer-events:none}
	  
	.article-category{position:absolute;z-index:2;right:25px;top:25px;background:var(--secondary);color:#fff;padding:.35rem .8rem;border-radius:7px;font-size:.78rem;font-weight:800}
	  
	.article-content{padding:15px 22px 22px}
	  
	.article-title{font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.45;font-weight:700;color:var(--dark);margin:0 0 18px}
	  
	.article-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:.82rem;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border)}
	.article-meta span{display:inline-flex;align-items:center;gap:6px}
	.article-meta i{color:var(--primary)}
	  
	.article-lead{font-size:1.08rem;color:#435149;font-weight:600;background:#f3f8f5;border-right:4px solid var(--primary);padding:16px 20px;border-radius:8px;margin:0 0 25px}
	  
	.article-body{color:#3c4842;font-size:1rem}
	.article-body p{margin-bottom:20px}
	.article-body h2{font-size:1.35rem;color:var(--primary-dark);font-weight:800;margin:32px 0 15px;padding-right:12px;border-right:4px solid var(--secondary)}
	.article-body ul{padding-right:24px;margin-bottom:25px}
	.article-body li{margin-bottom:8px}
	.article-body blockquote{margin:25px 0;padding:18px 22px;background:#faf7ed;border-right:4px solid var(--gold);color:#5c5138;border-radius:8px}
	  
	.share-box{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:35px;padding:18px;background:#f7f9f8;border:1px solid var(--border);border-radius:13px}
	.share-title{font-size:.88rem;font-weight:800;color:#34423a;white-space:nowrap}
	.share-buttons{display:flex;gap:8px;flex-wrap:wrap}
	.share-btn{border:0;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:.25s ease;cursor:pointer}
	.share-btn:hover{transform:translateY(-2px);filter:brightness(.95)}
	.share-facebook{background:#1877f2}
	.share-x{background:#111}
	.share-copy{background:var(--primary)}
	.share-whatsapp{background:#25d366}

	@media(max-width:991.98px){
		.navbar-nav .nav-link.active:after{display:none}
		.article-cover{height:350px}
		.article-content{padding:28px 25px 32px}
	}
	@media(max-width:767.98px){
		.topbar{display:none}#10231b
		.article-wrap{margin-top:-15px}
		.article-cover{height:245px}
		.article-category{right:15px;top:15px}
		.article-title{font-size:1.55rem}
		.article-content{padding:23px 18px 25px}
		.article-body{font-size:.93rem}
		.share-box{align-items:flex-start;flex-direction:column}
		.page-head{padding:35px 0}
	} 

.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 25px;
    direction: rtl;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;

    color: #237648;
    background-color: #fff;
    border: 1px solid #e2e8e4;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;

    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

/* Survol */
.pagination .page-link:hover {
    color: #fff;
    background-color: #237648;
    border-color: #237648;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(35, 118, 72, 0.15);
}

/* Page active */
.pagination .page-item.active .page-link {
    color: #fff;
    background-color: #237648;
    border-color: #237648;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(35, 118, 72, 0.20);
}

/* Boutons précédent et suivant */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    padding: 0 16px;
    font-size: 13px;
}

/* Éléments désactivés */
.pagination .page-item.disabled .page-link {
    color: #aab4ad;
    background-color: #f5f7f5;
    border-color: #e8ece9;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Focus clavier */
.pagination .page-link:focus-visible {
    outline: 3px solid rgba(35, 118, 72, 0.25);
    outline-offset: 3px;
    box-shadow: none;
}

/* Responsive mobile */
@media (max-width: 576px) {
    .pagination-wrapper {
        margin: 30px 0 20px;
        gap: 5px;
    }

    .pagination {
        gap: 5px;
    }

    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        border-radius: 7px;
        font-size: 13px;
    }

    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        padding: 0 10px;
        font-size: 12px;
    }
}

        /* MAIN 404 */
        .error-main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 65px 15px;
            overflow: hidden;
        }
        .error-container {
            width: 100%;
            max-width: 850px;
            text-align: center;
        }
        .error-illustration {
            position: relative;
            width: 100%;
            max-width: 470px;
            margin: 0 auto 20px;
        }
        .error-number {
            font-size: clamp(120px, 25vw, 235px);
            font-weight: 900;
            line-height: .95;
            letter-spacing: -10px;
            color: var(--primary);
            text-shadow: 0 10px 0 rgba(35, 118, 72, .07);
            user-select: none;
        }
        .error-ball {
            position: absolute;
            top: 4%;
            left: 50%;
            transform: translateX(-50%) rotate(-15deg);
            width: clamp(48px, 10vw, 83px);
            height: clamp(48px, 10vw, 83px);
            border-radius: 50%;
            background: #fff;
            border: 5px solid var(--secondary);
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(23px, 5vw, 39px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
            animation: float-ball 3s ease-in-out infinite;
        }
        @keyframes float-ball {
            0%, 100% {
                transform: translateX(-50%) translateY(0) rotate(-15deg);
            }
            50% {
                transform: translateX(-50%) translateY(-9px) rotate(5deg);
            }
        }
        .error-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 15px;
            margin-bottom: 18px;
            border-radius: 50px;
            background: #e7f3eb;
            color: var(--primary-dark);
            font-size: 12px;
            font-weight: 800;
        }
        .error-title {
            font-size: clamp(25px, 5vw, 38px);
            font-weight: 900;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        .error-description {
            max-width: 580px;
            margin: 0 auto;
            color: var(--muted);
            font-size: 15px;
            line-height: 2.1;
        }
        .error-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 30px;
        }
        .btn-primary-custom,
        .btn-outline-custom {
            min-height: 48px;
            padding: 12px 23px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 800;
            transition: .25s ease;
        }
        .btn-primary-custom {
            color: #fff;
            background: var(--primary);
            border: 1px solid var(--primary);
            box-shadow: 0 5px 13px rgba(35, 118, 72, .16);
        }
        .btn-primary-custom:hover {
            color: #fff;
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            transform: translateY(-2px);
        }
        .btn-outline-custom {
            color: var(--text);
            background: #fff;
            border: 1px solid var(--border);
        }

        .btn-outline-custom:hover {
            color: var(--primary);
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        @media (max-width: 576px) {
            .error-main {
                padding: 48px 15px;
            }

            .error-number {
                letter-spacing: -5px;
            }

            .error-title {
                font-size: 25px;
            }

            .error-description {
                font-size: 13px;
            }

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

            .btn-primary-custom,
            .btn-outline-custom {
                width: 100%;
                max-width: 290px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }
		
    /* HERO */
    .about-hero {
        position: relative;
        overflow: hidden;
        padding: 65px 0;
        color: #fff;
        background:
            linear-gradient(
                105deg,
                rgba(18, 64, 39, .97),
                rgba(35, 118, 72, .88)
            ),
            url('assets/images/assemblee-gle-elec-2024.jpg') center/cover no-repeat;
    }

    .about-hero::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        left: -80px;
        top: -120px;
        border: 40px solid rgba(255,255,255,.06);
        border-radius: 50%;
        pointer-events: none;
    }

    .about-hero-content {
        position: relative;
        z-index: 1;
    }

    .about-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
        color: rgba(255,255,255,.7);
        font-size: 12px;
    }

    .about-breadcrumb a {
        color: #fff;
    }

    .about-breadcrumb i {
        font-size: 9px;
    }

    .about-hero-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 13px;
        margin-bottom: 14px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 50px;
        background: rgba(255,255,255,.1);
        font-size: 11px;
        font-weight: 700;
    }

    .about-hero h1 {
        margin: 0 0 12px;
        font-size: clamp(30px, 5vw, 42px);
        font-weight: 900;
        line-height: 1.6;
    }

    .about-hero p {
        max-width: 650px;
        margin: 0;
        color: rgba(255,255,255,.84);
        font-size: 14px;
        line-height: 2.1;
    }
		
        /* GENERAL SECTIONS */
        .section {
            padding: 75px 0;
        }

        .section-light {
            background: var(--bg);
        }

        .section-heading {
            margin-bottom: 38px;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .section-kicker::before {
            content: "";
            display: inline-block;
            width: 25px;
            height: 3px;
            border-radius: 3px;
            background: var(--secondary);
        }

        .section-title {
            font-size: clamp(24px, 4vw, 32px);
            line-height: 1.6;
            font-weight: 900;
            margin: 0 0 10px;
        }

        .section-subtitle {
            max-width: 650px;
            color: var(--muted);
            font-size: 13px;
            line-height: 2;
            margin: 0;
        }
		
        /* HISTORY */
        .history-image {
            position: relative;
            min-height: 380px;
            height: 100%;
            border-radius: 16px;
            overflow: hidden;
            background: #e9f0eb;
        }

        .history-image img {
            width: 100%;
            height: 100%;
            min-height: 380px;
            object-fit: cover;
            display: block;
        }
        .history-image-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            color: var(--primary);
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            padding: 25px;
        }

        .history-image-placeholder i {
            font-size: 65px;
            opacity: .55;
        }
		
        .history-content {
            padding: 8px 0;
        }

        .history-content p {
            color: #667168;
            font-size: 14px;
            line-height: 2.2;
            margin-bottom: 17px;
            text-align: justify;
        }
		
        .history-note {
            display: flex;
            align-items: flex-start;
            gap: 13px;
            padding: 17px;
            margin-top: 22px;
            background: var(--primary-light);
            border-right: 4px solid var(--primary);
            border-radius: 9px;
        }

        .history-note i {
            color: var(--primary);
            font-size: 20px;
            margin-top: 5px;
        }

        .history-note p {
            margin: 0;
            font-size: 12px;
            text-align: right;
        }
		
        /* TIMELINE */
        .timeline {
            position: relative;
            max-width: 850px;
            margin: 0 auto;
        }

        .timeline-item {
            position: relative;
            padding: 0 35px 35px 0;
            border-right: 2px solid #dce9df;
        }

        .timeline-item:last-child {
            padding-bottom: 0;
            border-right-color: transparent;
        }

        .timeline-dot {
            position: absolute;
            top: 4px;
            right: -10px;
            width: 18px;
            height: 18px;
            border: 4px solid #fff;
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 2px #cde1d2;
        }

        .timeline-year {
            display: inline-block;
            color: var(--primary);
            font-size: 12px;
            font-weight: 900;
            margin-bottom: 5px;
        }

        .timeline-item h3 {
            font-size: 16px;
            font-weight: 800;
            margin: 0 0 7px;
        }

        .timeline-item p {
            color: var(--muted);
            font-size: 13px;
            line-height: 2;
            margin: 0;
        }
		
        /* MISSIONS */
        .mission-card {
            height: 100%;
            background: #fff;
            padding: 27px 24px;
            border: 1px solid var(--border);
            border-radius: 13px;
            transition: .25s ease;
        }

        .mission-card:hover {
            transform: translateY(-5px);
            border-color: #c7ddcd;
            box-shadow: 0 12px 28px rgba(28, 74, 45, .07);
        }

        .mission-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 22px;
            margin-bottom: 18px;
        }

        .mission-card h3 {
            font-size: 16px;
            font-weight: 900;
            margin-bottom: 10px;
        }

        .mission-card p {
            color: var(--muted);
            font-size: 12px;
            line-height: 2.1;
            margin: 0;
        }
		
        /* BUREAU */
        .bureau-intro {
            max-width: 680px;
            margin-bottom: 35px;
            color: var(--muted);
            font-size: 13px;
            line-height: 2.1;
        }

        .bureau-card {
            height: 100%;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 13px;
            text-align: center;
            transition: .25s ease;
        }

        .bureau-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(28, 74, 45, .08);
        }

        .bureau-photo {
            height: 215px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(145deg, #edf6f0, #dcebe0);
        }

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

        .bureau-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 65px;
            opacity: .6;
        }

        .bureau-body {
            padding: 21px 14px 23px;
        }

        .bureau-role {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 50px;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 10px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .bureau-name {
            font-size: 15px;
            font-weight: 900;
            margin: 0 0 7px;
        }

        .bureau-description {
            color: var(--muted);
            font-size: 11px;
            margin: 0;
        }

        .bureau-disclaimer {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 15px 18px;
            margin-top: 28px;
            border: 1px solid #f0e4c7;
            border-radius: 9px;
            background: #fffaf0;
            color: #78643c;
            font-size: 11px;
            line-height: 2;
        }

        .bureau-disclaimer i {
            margin-top: 5px;
        }
		
        /* CTA */
        .contact-banner {
            background: var(--primary-dark);
            color: #fff;
            padding: 38px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        .contact-banner h2 {
            font-size: 22px;
            font-weight: 900;
            margin: 0 0 8px;
        }

        .contact-banner p {
            color: rgba(255,255,255,.76);
            font-size: 12px;
            margin: 0;
            line-height: 2;
        }

        .contact-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 20px;
            border-radius: 9px;
            background: #fff;
            color: var(--primary-dark);
            font-size: 12px;
            font-weight: 900;
            transition: .25s;
        }

        .contact-btn:hover {
            color: var(--primary);
            transform: translateY(-2px);
        }
		
		

        @media (max-width: 576px) {
            .topbar-inner {
                justify-content: center;
            }

            .section {
                padding: 50px 0;
            }

            .history-image,
            .history-image img {
                min-height: 250px;
            }

            .bureau-photo {
                height: 190px;
            }

            .contact-banner {
                flex-direction: column;
                align-items: flex-start;
                padding: 25px 20px;
            }

            .contact-banner h2 {
                font-size: 19px;
            }
        }
		
    /* CONTACT PAGE */
    .contact-page {
        --contact-primary: #237648;
        --contact-primary-dark: #185735;
        --contact-secondary: #c62828;
        --contact-text: #202a24;
        --contact-muted: #758078;
        --contact-bg: #f6f8f6;
        --contact-border: #e5ece7;
        color: var(--contact-text);
    }

    .contact-page a {
        text-decoration: none;
    }

    /* HERO */
    .contact-hero {
        position: relative;
        overflow: hidden;
        padding: 65px 0;
        color: #fff;
        background:
            linear-gradient(
                105deg,
                rgba(18, 64, 39, .97),
                rgba(35, 118, 72, .88)
            ),
            url('assets/images/assemblee-gle-elec-2024.jpg') center/cover no-repeat;
    }

    .contact-hero::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        left: -80px;
        top: -120px;
        border: 40px solid rgba(255,255,255,.06);
        border-radius: 50%;
        pointer-events: none;
    }

    .contact-hero-content {
        position: relative;
        z-index: 1;
    }

    .contact-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
        color: rgba(255,255,255,.7);
        font-size: 12px;
    }

    .contact-breadcrumb a {
        color: #fff;
    }

    .contact-breadcrumb i {
        font-size: 9px;
    }

    .contact-hero-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 13px;
        margin-bottom: 14px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 50px;
        background: rgba(255,255,255,.1);
        font-size: 11px;
        font-weight: 700;
    }

    .contact-hero h1 {
        margin: 0 0 12px;
        font-size: clamp(30px, 5vw, 42px);
        font-weight: 900;
        line-height: 1.6;
    }

    .contact-hero p {
        max-width: 650px;
        margin: 0;
        color: rgba(255,255,255,.84);
        font-size: 14px;
        line-height: 2.1;
    }

    /* SECTIONS */
    .contact-section {
        padding: 70px 0;
    }

    .contact-section-light {
        background: var(--contact-bg);
    }

    .contact-section-heading {
        margin-bottom: 35px;
    }

    .contact-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        color: var(--contact-primary);
        font-size: 12px;
        font-weight: 800;
    }

    .contact-kicker::before {
        content: "";
        width: 24px;
        height: 3px;
        border-radius: 3px;
        background: var(--contact-secondary);
    }

    .contact-section-title {
        margin: 0 0 10px;
        font-size: clamp(23px, 4vw, 31px);
        font-weight: 900;
        line-height: 1.7;
    }

    .contact-section-description {
        max-width: 650px;
        margin: 0;
        color: var(--contact-muted);
        font-size: 13px;
        line-height: 2.1;
    }

    /* CONTACT INFORMATION */
    .contact-info-card {
        height: 100%;
        padding: 23px;
        background: #fff;
        border: 1px solid var(--contact-border);
        border-radius: 12px;
        transition: .25s ease;
    }

    .contact-info-card:hover {
        border-color: #c7ddcd;
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(28,74,45,.06);
    }

    .contact-info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 47px;
        height: 47px;
        margin-bottom: 16px;
        border-radius: 11px;
        background: #edf6f0;
        color: var(--contact-primary);
        font-size: 20px;
    }

    .contact-info-card h2 {
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: 900;
    }

    .contact-info-card p,
    .contact-info-card a {
        margin: 0;
        color: var(--contact-muted);
        font-size: 12px;
        line-height: 2.1;
        overflow-wrap: anywhere;
    }

    .contact-info-card a:hover {
        color: var(--contact-primary);
    }

    /* FORM */
    .contact-form-card {
        padding: 32px;
        background: #fff;
        border: 1px solid var(--contact-border);
        border-radius: 15px;
        box-shadow: 0 8px 28px rgba(28,74,45,.04);
    }

    .contact-form-title {
        margin-bottom: 8px;
        font-size: 21px;
        font-weight: 900;
    }

    .contact-form-description {
        margin-bottom: 25px;
        color: var(--contact-muted);
        font-size: 12px;
        line-height: 2;
    }

    .contact-page .form-label {
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 800;
    }

    .contact-page .form-control,
    .contact-page .form-select {
        min-height: 47px;
        border: 1px solid #dfe7e1;
        border-radius: 8px;
        background-color: #fff;
        color: var(--contact-text);
        font-family: inherit;
        font-size: 13px;
        box-shadow: none;
    }

    .contact-page textarea.form-control {
        min-height: 150px;
        resize: vertical;
    }

    .contact-page .form-control::placeholder {
        color: #a0aaa3;
    }

    .contact-page .form-control:focus,
    .contact-page .form-select:focus {
        border-color: var(--contact-primary);
        box-shadow: 0 0 0 3px rgba(35,118,72,.09);
    }

    .contact-page .form-control.is-invalid {
        border-color: var(--contact-secondary);
    }

    .contact-page .form-check {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding-right: 0;
        margin-top: 18px;
    }

    .contact-page .form-check-input {
        float: none;
        flex-shrink: 0;
        margin: 5px 0 0;
        cursor: pointer;
    }

    .contact-page .form-check-input:checked {
        background-color: var(--contact-primary);
        border-color: var(--contact-primary);
    }

    .contact-page .form-check-label {
        color: var(--contact-muted);
        font-size: 11px;
        line-height: 2;
    }

    .contact-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 49px;
        margin-top: 22px;
        border: 1px solid var(--contact-primary);
        border-radius: 9px;
        background: var(--contact-primary);
        color: #fff;
        font-family: inherit;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: .25s ease;
    }

    .contact-submit:hover {
        background: var(--contact-primary-dark);
        border-color: var(--contact-primary-dark);
    }

    .contact-submit:focus-visible {
        outline: 3px solid rgba(35,118,72,.25);
        outline-offset: 3px;
    }

    .contact-privacy-note {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin-top: 16px;
        color: var(--contact-muted);
        font-size: 10px;
        line-height: 1.9;
    }

    .contact-privacy-note i {
        margin-top: 4px;
        color: var(--contact-primary);
    }

    /* SIDE PANEL */
    .contact-side-panel {
        height: 100%;
        padding: 28px;
        border-radius: 15px;
        background: var(--contact-primary-dark);
        color: #fff;
    }

    .contact-side-panel h2 {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 900;
    }

    .contact-side-panel > p {
        margin-bottom: 25px;
        color: rgba(255,255,255,.75);
        font-size: 12px;
        line-height: 2.1;
    }

    .contact-schedule {
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,.15);
    }

    .contact-schedule h3 {
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: 800;
    }

    .contact-schedule-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        font-size: 11px;
    }

    .contact-schedule-row span:first-child {
        color: rgba(255,255,255,.72);
    }

    .contact-schedule-row span:last-child {
        text-align: left;
        font-weight: 700;
    }

    .contact-schedule-note {
        margin-top: 16px;
        color: rgba(255,255,255,.68);
        font-size: 10px;
        line-height: 2;
    }

    /* MAP */
    .contact-map-card {
        overflow: hidden;
        border: 1px solid var(--contact-border);
        border-radius: 13px;
        background: #fff;
    }

    .contact-map-placeholder {
        min-height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        padding: 25px;
        text-align: center;
        background:
            linear-gradient(135deg, #edf5ef, #f8faf8);
        color: var(--contact-primary);
    }

    .contact-map-placeholder i {
        font-size: 42px;
    }

    .contact-map-placeholder h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 900;
    }

    .contact-map-placeholder p {
        margin: 0;
        color: var(--contact-muted);
        font-size: 12px;
    }

    .contact-map-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        padding: 17px 20px;
    }

    .contact-map-footer span {
        color: var(--contact-muted);
        font-size: 12px;
    }

    .contact-map-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--contact-primary);
        font-size: 12px;
        font-weight: 800;
    }

    .contact-map-link:hover {
        color: var(--contact-primary-dark);
    }

    @media (max-width: 767px) {
        .contact-hero {
            padding: 48px 0;
        }

        .contact-section {
            padding: 48px 0;
        }

        .contact-form-card {
            padding: 23px 18px;
        }

        .contact-side-panel {
            padding: 24px 20px;
        }

        .contact-map-footer {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .contact-page *,
        .contact-page *::before,
        .contact-page *::after {
            transition-duration: .01ms !important;
        }
    }
	
/* =====================================================
   STYLES SPÉCIFIQUES À LA GALERIE
====================================================== */

.gallery-page {
    --gallery-green: #237648;
    --gallery-green-dark: #185735;
    --gallery-red: #c62828;
    --gallery-text: #26332b;
    --gallery-muted: #6b756f;
    --gallery-bg: #f7f9f7;
    color: var(--gallery-text);
    background: #fff;
    overflow: hidden;
}

.gallery-page a {
    text-decoration: none;
}

.gallery-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 0 72px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%,
            rgba(255,255,255,.12), transparent 28%),
        linear-gradient(120deg,
            #164d32 0%, #237648 58%, #2e8654 100%);
}

.gallery-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255,255,255,.78);
    font-size: .88rem;
}

.gallery-breadcrumb a {
    color: #fff;
}

.gallery-breadcrumb i {
    font-size: .65rem;
}

.gallery-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding-top: 48px;
}

.gallery-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    background: rgba(255,255,255,.09);
    font-size: .9rem;
}

.gallery-hero h1 {
    margin: 22px 0 15px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    font-weight: 800;
}

.gallery-hero-content > p {
    max-width: 610px;
    margin-bottom: 27px;
    color: rgba(255,255,255,.86);
    font-size: 1.06rem;
    line-height: 1.9;
}

.gallery-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 23px;
    border-radius: 7px;
    background: #fff;
    color: var(--gallery-green-dark);
    font-weight: 700;
    transition: .25s ease;
}

.gallery-hero-btn:hover {
    transform: translateY(-3px);
    background: #f0f5f1;
    color: var(--gallery-green-dark);
}

.gallery-hero-decoration {
    position: absolute;
    left: 4%;
    bottom: -70px;
    color: rgba(255,255,255,.08);
    font-size: clamp(150px, 25vw, 300px);
    transform: rotate(-12deg);
    pointer-events: none;
}

.gallery-intro {
    padding: 55px 0 25px;
}

.gallery-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.gallery-section-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--gallery-green);
    font-size: .88rem;
    font-weight: 800;
}

.gallery-section-heading h2 {
    margin-bottom: 12px;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
}

.gallery-section-heading p {
    max-width: 650px;
    margin-bottom: 0;
    color: var(--gallery-muted);
    line-height: 1.9;
}

.gallery-total {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 19px;
    border: 1px solid #e7eee9;
    border-radius: 12px;
    background: #fff;
    color: var(--gallery-green);
    white-space: nowrap;
    font-weight: 700;
}

.gallery-total i {
    font-size: 1.3rem;
}

.gallery-section {
    padding: 20px 0 75px;
    background: var(--gallery-bg);
}

.gallery-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gallery-filter {
    padding: 10px 19px;
    border: 1px solid #e1e8e3;
    border-radius: 7px;
    background: #fff;
    color: #4b5a50;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.gallery-filter:hover,
.gallery-filter.active {
    border-color: var(--gallery-green);
    background: var(--gallery-green);
    color: #fff;
}

.gallery-filter:focus-visible,
.gallery-image-btn:focus-visible,
.gallery-pagination a:focus-visible,
.gallery-lightbox button:focus-visible {
    outline: 3px solid #efb54a;
    outline-offset: 3px;
}

.gallery-counter {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--gallery-muted);
    font-size: .9rem;
    white-space: nowrap;
}

.gallery-counter i {
    color: var(--gallery-green);
}

.gallery-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e9eee9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20,55,35,.035);
    transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 13px 32px rgba(20,55,35,.11);
}

.gallery-image-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #e7eee9;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
}

.gallery-image-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.gallery-card:hover .gallery-image-btn img {
    transform: scale(1.055);
}

.gallery-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(12,40,24,.38);
    opacity: 0;
    transition: opacity .25s ease;
}

.gallery-card:hover .gallery-image-overlay,
.gallery-image-btn:focus-visible .gallery-image-overlay {
    opacity: 1;
}

.gallery-zoom {
    display: grid;
    width: 49px;
    height: 49px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: rgba(255,255,255,.17);
    color: #fff;
    font-size: 1.1rem;
}

.gallery-card-caption {
    padding: 18px 19px 20px;
}

.gallery-category {
    display: inline-block;
    margin-bottom: 9px;
    padding: 5px 10px;
    border-radius: 5px;
    background: #eaf4ed;
    color: var(--gallery-green);
    font-size: .77rem;
    font-weight: 800;
}

.gallery-card-caption h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.7;
}

.gallery-empty {
    padding: 50px 15px;
    text-align: center;
    color: var(--gallery-muted);
}

.gallery-empty > i {
    margin-bottom: 17px;
    color: #a5b6a9;
    font-size: 3rem;
}

.gallery-empty h3 {
    color: var(--gallery-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.gallery-pagination-wrap {
    margin-top: 40px;
}

.gallery-pagination {
    justify-content: center;
    gap: 7px;
    margin-bottom: 0;
}

.gallery-pagination .page-link {
    display: grid;
    min-width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #e0e8e2;
    border-radius: 7px !important;
    background: #fff;
    color: var(--gallery-green);
    font-weight: 700;
}

.gallery-pagination .page-item.active .page-link {
    border-color: var(--gallery-green);
    background: var(--gallery-green);
    color: #fff;
}

.gallery-pagination .page-item.disabled .page-link {
    color: #aab4ad;
    pointer-events: none;
}

/* LIGHTBOX */

.gallery-lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 75px 35px;
    background: rgba(5,15,9,.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.gallery-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.gallery-lightbox-content {
    width: min(100%, 1050px);
    max-height: 100%;
    text-align: center;
}

.gallery-lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    margin: auto;
    object-fit: contain;
    border-radius: 5px;
}

.gallery-lightbox-caption {
    padding-top: 18px;
    color: #fff;
}

.gallery-lightbox-caption > span {
    color: #9ed0ad;
    font-size: .85rem;
}

.gallery-lightbox-caption h3 {
    margin: 7px 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
}

.gallery-lightbox-caption p {
    margin: 0;
    color: #bdc8c0;
    font-size: .85rem;
}

.gallery-lightbox button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.gallery-lightbox button:hover {
    background: var(--gallery-green);
}

.gallery-lightbox-close {
    top: 22px;
    left: 25px;
    font-size: 1.4rem;
}

.gallery-lightbox-prev {
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.gallery-lightbox-next {
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767.98px) {
    .gallery-hero {
        padding-bottom: 52px;
    }

    .gallery-hero-content {
        padding-top: 35px;
    }

    .gallery-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .gallery-total {
        padding: 11px 14px;
    }

    .gallery-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .gallery-filters {
        width: 100%;
    }

    .gallery-filter {
        padding: 9px 13px;
    }

    .gallery-lightbox {
        padding: 65px 18px 25px;
    }

    .gallery-lightbox-prev {
        right: 8px;
    }

    .gallery-lightbox-next {
        left: 8px;
    }

    .gallery-lightbox button {
        width: 40px;
        height: 40px;
    }

    .gallery-lightbox-content img {
        max-height: calc(100vh - 205px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-page *,
    .gallery-page *::before,
    .gallery-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}