/* =============================================================================
   Lions Club Majunga — Feuille de style principale
   Charte : Bleu #003F87 · Jaune Or #F2B705 · Blanc #FFFFFF · Gris clair #F5F5F5
   Style : moderne, humanitaire, institutionnel, élégant, inspirant.
   ========================================================================== */

:root {
    --lion-blue:   #003F87;
    --lion-blue-d: #002a5c;
    --lion-gold:   #F2B705;
    --lion-gold-d: #d9a200;
    --white:       #FFFFFF;
    --light:       #F5F5F5;
    --gray:        #6b7280;
    --dark:        #1a2233;
    --text:        #2c333e;

    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow:    0 10px 30px rgba(0,63,135,.12);
    --shadow-lg: 0 20px 50px rgba(0,63,135,.18);
    --radius:    16px;
    --transition: .35s cubic-bezier(.2,.8,.2,1);

    --bg:        #ffffff;
    --bg-alt:    #F5F5F5;
    --card-bg:   #ffffff;
    --body-text: #2c333e;
    --heading:   #003F87;
}

/* ----------------------------- Mode sombre ------------------------------- */
[data-theme="dark"] {
    --bg:        #0f1626;
    --bg-alt:    #161f33;
    --card-bg:   #1b2541;
    --body-text: #d7deea;
    --heading:   #ffffff;
    --light:     #161f33;
    --text:      #d7deea;
    --shadow:    0 10px 30px rgba(0,0,0,.4);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.5);
}

/* Texte du contenu principal en mode sombre */
[data-theme="dark"] main {
    color: #fff;
    --body-text: #fff;
    --heading: #fff;
    --text: #fff;
    --gray: #fff;
}
[data-theme="dark"] main * {
    color: #fff !important;
}
[data-theme="dark"] main .form-control::placeholder,
[data-theme="dark"] main .form-select::placeholder,
[data-theme="dark"] main textarea::placeholder {
    color: rgba(255,255,255,.72);
}

/* ------------------------------- Base ------------------------------------ */
* { box-sizing: border-box; }

/* Bloque le scroll horizontal sur tous les navigateurs mobiles */
html {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    max-width: 100%;
}

body {
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    color: var(--body-text);
    background: var(--bg);
    line-height: 1.7;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    transition: background .4s ease, color .4s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--heading);
    line-height: 1.25;
}

a { text-decoration: none; transition: color var(--transition); }

img { max-width: 100%; height: auto; }

.section { padding: 90px 0; }
.bg-light-soft { background: var(--bg-alt); }

/* Isole chaque section pour éviter que les animations AOS débordent en X */
section, header.hero, .stats-strip, .partners-ticker-section, footer {
    overflow-x: clip;
}

/* Sur mobile : neutralise TOUTES les transforms/opacities AOS dès le CSS,
   avant que JS ne tourne. Évite le scroll horizontal et les sections vides. */
@media (max-width: 767px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Titres de section */
.section-head { max-width: 720px; margin: 0 auto 55px; text-align: center; }
.section-head .eyebrow {
    display: inline-block;
    color: var(--lion-gold-d);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.section-head p { color: var(--gray); font-size: 1.05rem; }
.section-head .divider {
    width: 70px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--lion-blue), var(--lion-gold));
    margin: 18px auto 0;
}

/* ------------------------------ Boutons ---------------------------------- */
.btn { font-weight: 600; border-radius: 50px; padding: .7rem 1.8rem; transition: all var(--transition); }
.btn-lion {
    background: var(--lion-gold); color: var(--lion-blue-d);
    border: 2px solid var(--lion-gold);
}
.btn-lion:hover {
    background: var(--lion-gold-d); border-color: var(--lion-gold-d);
    color: #fff; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(242,183,5,.4);
}
.btn-lion-blue { background: var(--lion-blue); color: #fff; border: 2px solid var(--lion-blue); width: fit-content; }
.btn-lion-blue:hover { background: var(--lion-blue-d); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-outline-light-lion { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.8); }
.btn-outline-light-lion:hover { background: #fff; color: var(--lion-blue); transform: translateY(-3px); }

/* ----------------------------- Navbar ------------------------------------ */
.navbar {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    padding: 0.1rem 0;
    transition: all var(--transition);
}
[data-theme="dark"] .navbar { background: rgba(15,22,38,.96); }
.navbar.scrolled { padding: .3rem 0; box-shadow: var(--shadow); }
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--lion-blue);
    min-width: 0;
    flex-shrink: 0;
}
.navbar-brand img {
    width: auto; height: 62px; border-radius: 6px; object-fit: contain;
    background: transparent; border: none;
    box-shadow: none;
}
.navbar-brand .brand-text small { display: block; font-size: .6rem; font-weight: 500; color: var(--lion-gold-d); letter-spacing: 2px; }
.brand-text { line-height: 1.2; white-space: normal; max-width: 100px; font-size: .92rem; font-weight: 800; }
[data-theme="dark"] .navbar-brand { color: #fff; }
.navbar .nav-link { font-weight: 500; color: var(--text); margin: 0; padding: .4rem .6rem; font-size: .93rem; position: relative; white-space: nowrap; }
.navbar-nav .nav-item { white-space: nowrap; }
[data-theme="dark"] .navbar .nav-link { color: var(--body-text); }
.navbar .nav-link::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
    background: var(--lion-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--lion-blue); }
[data-theme="dark"] .navbar .nav-link:hover, [data-theme="dark"] .navbar .nav-link.active { color: var(--lion-gold); }
.navbar .nav-link.active::after, .navbar .nav-link:hover::after { transform: scaleX(1); }
.nav-link--join { color: var(--lion-gold-d) !important; font-weight: 700 !important; }
.nav-link--join:hover { color: var(--lion-gold) !important; }

/* Menus déroulants de la navbar */
.navbar .dropdown-menu {
    border: none; border-radius: 14px; box-shadow: var(--shadow); padding: 10px;
    margin-top: 10px; min-width: 230px; background: var(--card-bg);
}
.navbar .dropdown-item {
    border-radius: 10px; padding: 10px 14px; font-weight: 500; color: var(--text); transition: all .2s;
}
[data-theme="dark"] .navbar .dropdown-item { color: var(--body-text); }
.navbar .dropdown-item:hover, .navbar .dropdown-item.active {
    background: rgba(0,63,135,.08); color: var(--lion-blue);
}
[data-theme="dark"] .navbar .dropdown-item:hover, [data-theme="dark"] .navbar .dropdown-item.active {
    background: rgba(242,183,5,.15); color: var(--lion-gold);
}
.navbar .dropdown-toggle::after { margin-left: 6px; vertical-align: middle; }
/* Ouverture au survol sur grand écran */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu { display: block; animation: ddFade .25s ease; }
    .navbar .dropdown-menu { margin-top: 0; }
}
@keyframes ddFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Resserre un peu sur les écrans laptop pour éviter le débordement */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .nav-link { margin: 0 7px; }
    .nav-tools { gap: 8px; }
}

.navbar-toggler {
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--light);
    color: var(--lion-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(242,183,5,.22); }
.navbar-toggler:hover { background: var(--lion-gold); color: #fff; }
.navbar-desktop {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}
.navbar-center {
    min-width: 0;
    overflow: visible;
}
.main-nav {
    gap: 0;
    flex-wrap: nowrap;
    align-items: center;
}
.main-nav .dropdown-menu { min-width: 280px; }
.nav-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    justify-self: end;
}
.nav-tools .btn { white-space: nowrap; }
.navbar .btn-lion,
.navbar .btn-lion-blue {
    padding: .45rem 1rem;
    font-size: .88rem;
    line-height: 1.2;
}
.btn-rejoindre {
    background: transparent; color: var(--lion-gold-d);
    border: 1.5px solid var(--lion-gold-d);
    padding: .38rem .85rem; font-size: .78rem;
    border-radius: 50px; font-weight: 700;
    transition: all var(--transition);
}
.btn-rejoindre:hover { background: var(--lion-gold); color: var(--lion-blue-d); border-color: var(--lion-gold); }
.btn-commencer {
    min-width: 90px;
    justify-content: center;
    padding-inline: .85rem;
    font-size: .78rem;
}
.icon-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--light); color: var(--lion-blue); transition: all var(--transition);
}
.icon-btn:hover { background: var(--lion-gold); color: #fff; }
.lang-switch .dropdown-menu { min-width: 160px; }
.lang-code {
    display: inline-block; min-width: 28px; text-align: center; margin-right: 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .5px; color: var(--lion-blue);
    background: rgba(0,63,135,.1); border-radius: 6px; padding: 2px 6px;
}
[data-theme="dark"] .lang-code { color: var(--lion-gold); background: rgba(242,183,5,.15); }

.offcanvas {
    background: var(--bg);
    color: var(--body-text);
    width: min(92vw, 380px);
    border-left: 0;
    box-shadow: var(--shadow-lg);
}
.offcanvas-header {
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 18px 20px;
}
.offcanvas-body {
    padding: 20px;
}
.nav-section-label {
    margin: 18px 0 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lion-gold-d);
}
.mobile-nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mobile-nav-group .nav-link {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-alt);
    color: var(--text);
}
.mobile-nav-group .nav-link.active,
.mobile-nav-group .nav-link:hover {
    background: rgba(0,63,135,.08);
    color: var(--lion-blue);
}
.mobile-nav-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.mobile-nav-tools .btn,
.mobile-nav-tools .icon-btn {
    width: 100%;
    border-radius: 12px;
    height: 46px;
}
.mobile-nav-tools .dropdown-menu {
    width: 100%;
}
.mobile-private-area {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,.08);
}
[data-theme="dark"] .mobile-private-area {
    border-top-color: rgba(255,255,255,.08);
}
.mobile-private-area .nav-section-label {
    margin-top: 0;
}

/* ------------------------------ Hero ------------------------------------- */
.hero {
    position: relative; min-height: 0; max-height: 100vh; overflow: hidden; color: #fff;
}
.hero-bg { position: relative; z-index: 0; width: 100%; }
.hero-bg img, .hero-bg video {
    width: 100%; height: auto; display: block;
    transform: translateY(-10%);
}
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(120deg, rgba(0,42,92,.38) 0%, rgba(0,63,135,.28) 50%, rgba(0,63,135,.06) 100%);
}
.hero > .container {
    position: absolute; bottom: 15px;
    left: 50%; transform: translateX(-50%);
    width: 100%; z-index: 2;
    padding-left: 9%;
}
.hero-content { padding: 0; max-width: 760px; }
.hero .badge-slogan {
    display: inline-block; background: var(--lion-gold); color: var(--lion-blue-d);
    padding: 4px 14px; border-radius: 50px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; font-size: .75rem; margin-bottom: 12px;
}
.hero h1 { color: #fff; font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 800; margin-bottom: 8px; text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.8); }
.hero p.lead { font-size: .9rem; color: rgba(255,255,255,.95); margin-bottom: 16px; max-width: 540px; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.hero .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-scroll {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.8); font-size: 1.4rem; animation: bounce 2s infinite;
    z-index: 2;
}
@keyframes bounce { 0%,100%{transform:translateX(-50%);} 50%{transform:translateX(-50%) translateY(10px);} }

/* ----------------------------- Statistiques ------------------------------ */
.stats-strip { background: linear-gradient(120deg, var(--lion-blue), var(--lion-blue-d)); color: #fff; padding: 10px 0; }
.stat-item { text-align: center; padding: 2px; }
.stat-item .stat-icon {
    width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,183,5,.18); color: var(--lion-gold); font-size: 1.3rem;
}
.stat-item .stat-number { font-size: clamp(1.2rem,2.5vw,1.8rem); font-weight: 800; color: var(--lion-gold); line-height: 1.1; }
.stat-item .stat-label { font-size: .78rem; color: rgba(255,255,255,.85); }

/* ------------------------------- Cartes ---------------------------------- */
.card-lion {
    background: var(--card-bg); border: none; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition); height: 100%;
}
.card-lion:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.card-lion .card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.card-lion .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card-lion:hover .card-img-wrap img { transform: scale(1.08); }
.card-lion .card-body { padding: 24px; }
.card-lion h3, .card-lion h5 { color: var(--heading); }
.card-meta { font-size: .82rem; color: var(--gray); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.card-meta i { color: var(--lion-gold-d); margin-right: 4px; }
.cat-badge {
    position: absolute; top: 14px; left: 14px; background: var(--lion-gold); color: var(--lion-blue-d);
    padding: 5px 14px; border-radius: 50px; font-size: .75rem; font-weight: 700; text-transform: uppercase;
}
.card-link { color: var(--lion-blue); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.card-link:hover { color: var(--lion-gold-d); gap: 12px; }
[data-theme="dark"] .card-lion h3,[data-theme="dark"] .card-lion h5,[data-theme="dark"] .card-link { color: var(--body-text); }

/* --------------------------- Cartes de causes ---------------------------- */
.cause-card {
    background: var(--card-bg); border-radius: var(--radius); padding: 36px 28px; text-align: center;
    box-shadow: var(--shadow-sm); transition: all var(--transition); height: 100%; border-top: 4px solid transparent;
}
.cause-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-top-color: var(--lion-gold); }
.cause-card .cause-icon {
    width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff;
    background: linear-gradient(135deg, var(--lion-blue), var(--lion-gold)); transition: transform var(--transition);
}
.cause-card:hover .cause-icon { transform: rotate(-8deg) scale(1.08); }
.cause-card ul { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; }
.cause-card ul li { padding: 6px 0 6px 26px; position: relative; color: var(--gray); }
.cause-card ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; color: var(--lion-gold-d); }
.cause-img-wrapper { position: relative; margin-bottom: 20px; }
.cause-card-img { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; }
.cause-badge {
    position: absolute; top: 12px; right: 12px; width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--lion-blue), var(--lion-gold)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(0,63,135,.3); transition: transform var(--transition);
    z-index: 10;
}
.cause-card:hover .cause-badge { transform: rotate(-8deg) scale(1.1); }
.carousel-inner .cause-badge {
    top: 16px; right: 16px;
}

/* Section détaillée des causes */
.cause-detail-section {
    padding: 50px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.cause-detail-section:last-child { border-bottom: none; }
[data-theme="dark"] .cause-detail-section { border-bottom-color: rgba(255,255,255,.08); }
.cause-detail-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.cause-detail-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.cause-detail-content {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}
.cause-category-badge {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, var(--lion-blue), var(--lion-gold));
    color: #fff; padding: 8px 20px; border-radius: 50px;
    font-size: .85rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 20px;
    width: fit-content;
}
.cause-items {
    display: grid; gap: 12px;
}
.cause-item {
    display: flex; align-items: center;
    padding: 12px 16px;
    background: var(--bg-alt);
    border-radius: 10px;
    color: var(--body-text);
    transition: all var(--transition);
}
.cause-item:hover {
    background: rgba(0,63,135,.08);
    transform: translateX(5px);
}
[data-theme="dark"] .cause-item:hover { background: rgba(242,183,5,.15); }

/* Carousel height matching */
.cause-detail-card .carousel {
    flex: 1;
    min-height: 400px;
}
.cause-detail-card .carousel-inner {
    height: 100%;
}
.cause-detail-card .carousel-item {
    height: 100%;
}
.cause-detail-card .carousel-item img {
    height: 100%;
    object-fit: cover;
}
.cause-img-wrapper.h-100 {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cause-img-wrapper.h-100 .cause-card-img {
    flex: 1;
    height: auto;
    min-height: 400px;
}

/* ------------------------------ Page header ------------------------------ */
.page-header {
    position: relative; padding: 150px 0 70px; color: #fff; text-align: center;
    background: linear-gradient(120deg, rgba(0,42,92,.92), rgba(0,63,135,.82)), url('../images/hero-bg.svg') center/cover;
}
.page-header h1 { color: #fff; font-size: clamp(2rem,4vw,3rem); }
.page-header .breadcrumb { justify-content: center; background: transparent; margin: 0; }
.page-header .breadcrumb a { color: var(--lion-gold); }
.page-header .breadcrumb-item.active { color: rgba(255,255,255,.85); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }

/* ------------------------------ À propos --------------------------------- */
.about-img-stack { position: relative; }
.about-img-stack img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about-badge {
    position: absolute; bottom: -24px; right: 10px; background: var(--lion-gold); color: var(--lion-blue-d);
    border-radius: var(--radius); padding: 20px 26px; box-shadow: var(--shadow); text-align: center;
}
.about-badge .num { font-size: 2.2rem; font-weight: 800; display: block; }
.value-box { display: flex; gap: 16px; margin-bottom: 22px; }
.value-box .v-icon {
    flex: 0 0 54px; width: 54px; height: 54px; border-radius: 14px; background: rgba(0,63,135,.08);
    color: var(--lion-blue); display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
[data-theme="dark"] .value-box .v-icon { background: rgba(242,183,5,.15); color: var(--lion-gold); }

/* ------------------------------- Équipe ---------------------------------- */
.team-card { text-align: center; }
.team-card .team-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-sm); }
.team-card .team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-card .team-social {
    position: absolute; inset-inline: 0; bottom: -50px; display: flex; justify-content: center; gap: 10px;
    padding: 12px; background: linear-gradient(transparent, rgba(0,42,92,.85)); transition: bottom var(--transition);
}
.team-card:hover .team-social { bottom: 0; }
.team-card .team-social a { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--lion-blue); display: flex; align-items: center; justify-content: center; }
.team-card h5 { margin: 16px 0 2px; }
.team-card .role { color: var(--lion-gold-d); font-weight: 600; font-size: .9rem; }

/* ------------------------------ Section Membres -------------------------- */
.member-card { text-align: center; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.member-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.member-card .member-photo { position: relative; aspect-ratio: 1; overflow: hidden; }
.member-card .member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.member-card:hover .member-photo img { transform: scale(1.07); }
.member-card .member-overlay {
    position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,42,92,.80) 0%, transparent 60%);
    display: flex; align-items: flex-end; justify-content: center; padding: 14px;
    opacity: 0; transition: opacity var(--transition);
}
.member-card:hover .member-overlay { opacity: 1; }
.member-role-badge { background: var(--lion-gold); color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 50px; }
.member-card .member-info { padding: 16px 12px 18px; }
.member-card .member-info h5 { margin: 0 0 4px; font-size: 1rem; color: var(--heading); }
.member-card .member-role { color: var(--lion-gold-d); font-weight: 600; font-size: .85rem; }

/* ------------------------------ Timeline --------------------------------- */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--lion-blue), var(--lion-gold)); transform: translateX(-50%); }
.timeline-item { position: relative; width: 50%; padding: 0 40px 40px; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-item .t-dot { position: absolute; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--lion-gold); border: 4px solid var(--bg); }
.timeline-item:nth-child(odd) .t-dot { right: -9px; }
.timeline-item:nth-child(even) .t-dot { left: -9px; }
.timeline-item .t-card { background: var(--card-bg); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.timeline-item .t-year { color: var(--lion-gold-d); font-weight: 800; font-size: 1.1rem; }

/* ------------------------------ Galerie ---------------------------------- */
.gallery-filter { text-align: center; margin-bottom: 36px; }
.gallery-filter button {
    border: 2px solid transparent; background: var(--light); color: var(--text); border-radius: 50px;
    padding: 8px 22px; margin: 5px; font-weight: 600; cursor: pointer; transition: all var(--transition);
}
.gallery-filter button.active, .gallery-filter button:hover { background: var(--lion-blue); color: #fff; }
.gallery-item { border-radius: var(--radius); overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .g-overlay {
    position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,42,92,.85));
    display: flex; align-items: flex-end; padding: 18px; color: #fff; opacity: 0; transition: opacity var(--transition);
}
.gallery-item:hover .g-overlay { opacity: 1; }
.gallery-item .g-overlay .g-zoom { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: var(--lion-gold); color: var(--lion-blue-d); display: flex; align-items: center; justify-content: center; }

/* Lightbox maison */
.lightbox {
    position: fixed; inset: 0; z-index: 1100; background: rgba(0,21,46,.93);
    display: none; align-items: center; justify-content: center; padding: 30px; flex-direction: column;
}
.lightbox.open { display: flex; animation: fadeIn .3s ease; }
.lightbox img { max-width: 90%; max-height: 82vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox .lb-caption { color: #fff; margin-top: 16px; font-size: 1.05rem; }
.lightbox .lb-close { position: absolute; top: 24px; right: 30px; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--lion-gold); color: var(--lion-blue-d); font-size: 1.4rem; cursor: pointer; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ----------------------------- Partenaires ------------------------------- */
.partner-logo {
    display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--card-bg);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); height: 130px; transition: all var(--transition);
}
.partner-logo img { max-height: 80px; filter: none; opacity: 1; transition: transform var(--transition); }
.partner-logo:hover img { transform: scale(1.04); }

/* ----------------------------- Ticker partenaires ------------------------- */
.partners-ticker-section {
    padding: 32px 0 38px;
    background: var(--bg-alt);
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
}
.partners-ticker-label {
    text-align: center; font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--lion-gold-d); margin-bottom: 16px;
}
.partners-ticker-wrapper {
    overflow: hidden;
    position: relative;
}
.partners-ticker-wrapper::before,
.partners-ticker-wrapper::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
    pointer-events: none;
}
.partners-ticker-wrapper::before { left: 0;  background: linear-gradient(to right,  var(--bg-alt), transparent); }
.partners-ticker-wrapper::after  { right: 0; background: linear-gradient(to left, var(--bg-alt), transparent); }
.partners-ticker-track {
    display: flex; align-items: center;
    gap: 20px;
    width: max-content;
    padding: 0 16px;
    animation: scroll-left calc(var(--partner-count, 10) * 3s) linear infinite;
}

@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.partners-ticker-item {
    flex-shrink: 0;
    background: var(--card-bg); border-radius: 12px;
    padding: 18px 30px; height: 110px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
}
.partners-ticker-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.partners-ticker-item img { max-height: 72px; max-width: 160px; object-fit: contain; }

/* ----------------------------- Témoignages ------------------------------- */
.testi-card { background: var(--card-bg); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); height: 100%; position: relative; }
.testi-card .quote-icon { font-size: 2.4rem; color: var(--lion-gold); opacity: .35; }
.testi-card p { font-style: italic; color: var(--body-text); }
.testi-author { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.testi-author img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.testi-author .name { font-weight: 700; color: var(--heading); }
.testi-author .role { font-size: .85rem; color: var(--gray); }

/* ------------------------------- Dons ------------------------------------ */
.pay-card { background: var(--card-bg); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); text-align: center; height: 100%; transition: all var(--transition); border: 2px solid transparent; }
.pay-card:hover { border-color: var(--lion-gold); transform: translateY(-6px); box-shadow: var(--shadow); }
.pay-card .pay-logo { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin-bottom: 14px; color: var(--lion-blue); }
/* Logo carré des opérateurs Mobile Money */
.pay-logo-square {
    width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 16px;
    background: #fff; border: 1px solid #e6eaf2; box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden;
}
.pay-logo-square img { max-width: 100%; max-height: 100%; object-fit: contain; }
[data-theme="dark"] .pay-logo-square { background: #fff; border-color: #2c3a5c; }
.donate-cta { background: linear-gradient(120deg, var(--lion-blue), var(--lion-blue-d)); color: #fff; border-radius: var(--radius); padding: 50px; }
.amount-chip { border: 2px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 50px; padding: 10px 24px; margin: 6px; font-weight: 700; cursor: pointer; transition: all var(--transition); }
.amount-chip:hover, .amount-chip.active { background: var(--lion-gold); border-color: var(--lion-gold); color: var(--lion-blue-d); }

/* ------------------------------ Formulaires ------------------------------ */
.form-control, .form-select {
    border-radius: 10px;
    padding: .7rem 1rem;
    border: 1.5px solid #c5cdd8;
    background: var(--card-bg);
    color: var(--body-text);
    transition: border-color .2s, box-shadow .2s;
    font-size: .95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--lion-blue);
    box-shadow: 0 0 0 3px rgba(0,63,135,.12);
    outline: none;
}
.form-control::placeholder { color: #a0aab4; font-size: .9rem; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { border-color: #2c3a5c; }
.form-card { background: var(--card-bg); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
label.form-label { font-weight: 600; color: var(--heading); margin-bottom: .5rem; display: block; font-size: .9rem; }
textarea.form-control { resize: vertical; min-height: 130px; }
.contact-message-area {
    min-height: 160px;
    border: 2px solid #b8c4d4;
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem;
    font-size: .95rem;
    line-height: 1.6;
    transition: border-color .25s, box-shadow .25s;
}
.contact-message-area:focus {
    border-color: var(--lion-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,63,135,.12);
    outline: none;
}
.d-grid .btn { justify-content: center; }

/* ------------------------- Boutons flottants ----------------------------- */
.float-whatsapp {
    position: fixed; bottom: 26px; right: 26px; z-index: 999; width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
    box-shadow: 0 8px 24px rgba(37,211,102,.45); animation: pulse 2.2s infinite;
}
.float-whatsapp:hover { color: #fff; transform: scale(1.1); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.back-to-top {
    position: fixed; bottom: 26px; left: 26px; z-index: 999; width: 48px; height: 48px; border-radius: 50%;
    background: var(--lion-blue); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all var(--transition);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--lion-gold); }

/* ------------------------------- Footer ---------------------------------- */
.footer { background: var(--lion-blue-d); color: rgba(255,255,255,.8); padding: 70px 0 0; }
.footer h5 { color: #fff; margin-bottom: 22px; position: relative; padding-bottom: 10px; }
.footer h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--lion-gold); }
.footer a { color: rgba(255,255,255,.78); }
.footer a:hover { color: var(--lion-gold); }
.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 10px; }
.footer .social-row a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
.footer .social-row a:hover { background: var(--lion-gold); color: var(--lion-blue-d); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; margin-top: 50px; font-size: .9rem; }
.newsletter-form .form-control { border-radius: 50px 0 0 50px; border: none; }
.newsletter-form .btn { border-radius: 0 50px 50px 0; }

/* Mot du Président */
.president-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
.president-photo img { width: 100%; height: 100%; object-fit: cover; }
.president-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--lion-blue), var(--lion-gold)); }
.president-message { position: relative; padding-left: 8px; }
.president-message .quote-icon { color: var(--lion-gold); opacity: .4; font-size: 1.8rem; margin-bottom: 8px; }
.president-message p { font-size: 1.05rem; font-style: italic; }
.president-sign .name { font-weight: 800; color: var(--heading); font-size: 1.15rem; }
.president-sign .role { font-weight: 600; font-size: .9rem; }

/* Bandeau Leo Club (page d'accueil) */
.leo-band {
    background:
        radial-gradient(circle at 15% 20%, rgba(242,183,5,.10), transparent 45%),
        linear-gradient(120deg, #8B1F41, #5e1330);
    position: relative; overflow: hidden;
    border-top: 4px solid var(--lion-gold);
}
.leo-band::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: .5;
}
.leo-band::after {
    content: '\f06c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: -20px; bottom: -40px; font-size: 14rem; color: rgba(255,255,255,.06);
}
.leo-band .leo-emblem {
    width: 108px; height: 108px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; color: var(--lion-gold);
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(242,183,5,.45);
    box-shadow: 0 0 0 8px rgba(255,255,255,.04);
}
.leo-band .leo-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--lion-gold); color: #5e1330;
    font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; font-size: .72rem;
    padding: 9px 22px 9px 28px;
    margin-bottom: 4px;
    clip-path: polygon(0 50%, 16px 0, 100% 0, 100% 100%, 16px 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.leo-band .leo-badge::after {
    content: '';
    position: absolute; left: 3px; bottom: -6px;
    width: 0; height: 0;
    border-style: solid; border-width: 6px 5px 0 0;
    border-color: #a5810a transparent transparent transparent;
}
.leo-band .btn-lion:hover { box-shadow: var(--shadow-lg); }
.leo-band .btn-outline-light-lion:hover { box-shadow: var(--shadow-lg); }

/* ------------------------------ Utilitaires ------------------------------ */
.text-gold { color: var(--lion-gold-d) !important; }
.text-lion { color: var(--lion-blue) !important; }
.bg-lion { background: var(--lion-blue) !important; }
.divider-gold { width: 60px; height: 4px; background: var(--lion-gold); border-radius: 4px; }

/* ------------------------------ Responsive ------------------------------- */

/* Tablette paysage (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .nav-link { margin: 0; padding: .4rem .45rem; font-size: .82rem; }
    .nav-tools { gap: 6px; }
    .navbar .btn-lion, .navbar .btn-lion-blue { padding: .38rem .75rem; font-size: .78rem; }
}

/* Tablette portrait (768px - 991px) */
@media (max-width: 991px) {
    .section { padding: 70px 0; }
    .section-head { margin-bottom: 40px; }
    .timeline::before { left: 22px; }
    .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 56px; padding-right: 0; }
    .timeline-item .t-dot { left: 13px !important; right: auto !important; }
    .hero h1 { font-size: clamp(1.1rem, 3.5vw, 1.7rem); }
    .hero p.lead { font-size: .88rem; }
    .page-header { padding: 70px 0 40px; }
    .page-header h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); }
    .footer { padding: 50px 0 0; }
    .about-img-stack { margin-bottom: 24px; }
    .stat-item { padding: 20px 12px; }
    .cause-card { padding: 24px 18px; }
    .team-card .team-photo { height: 180px; }
    .action-card .action-img { height: 180px; }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .section { padding: 55px 0; }
    .section-head h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    .section-head { margin-bottom: 30px; }
    .hero h1 { font-size: clamp(1rem, 4.5vw, 1.5rem); }
    .hero p.lead { font-size: .85rem; max-width: 100%; }
    .hero .badge-slogan { font-size: .7rem; padding: 3px 12px; }
    .hero .hero-actions { gap: 8px; }
    .hero .hero-actions .btn { font-size: .82rem; padding: .5rem 1rem; }
    .hero > .container { bottom: 20px; padding-left: 1rem; padding-right: 1rem; }
    .page-header { padding: 60px 0 30px; }
    .page-header h1 { font-size: clamp(1.3rem, 5vw, 2rem); }
    .navbar-brand img { height: 46px; }
    .brand-text { font-size: .82rem; max-width: 80px; }
    .stats-strip .stat-item { padding: 18px 10px; }
    .stat-item .stat-number { font-size: clamp(1rem, 4vw, 1.5rem); }
    .cause-card { padding: 20px 14px; }
    .cause-icon { width: 52px; height: 52px; font-size: 1.2rem; }
    .partner-logo { padding: 16px; height: 100px; }
    .partner-logo img { max-height: 55px; }
    .testi-card { padding: 24px 18px; }
    .footer { padding: 40px 0 0; }
    .footer h5 { font-size: 1rem; margin-bottom: 14px; }
    .footer-bottom { padding: 16px 0; font-size: .8rem; text-align: center; }
    .donate-cta { padding: 28px 20px; }
    .form-card { padding: 20px; }
    .action-card .action-img { height: 160px; }
    .about-img-stack { aspect-ratio: 4/3; margin-bottom: 20px; }
    .about-badge { padding: 8px 14px; font-size: .8rem; }
    .team-card .team-photo { height: 160px; }
    .gallery-item { aspect-ratio: 1; }
}

/* Petit mobile (< 576px) */
@media (max-width: 575px) {
    .section { padding: 45px 0; }
    .hero h1 { font-size: clamp(.95rem, 5vw, 1.4rem); }
    .hero p.lead { font-size: .82rem; }
    .hero .hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hero .hero-actions .btn { width: 100%; text-align: center; justify-content: center; font-size: .82rem; }
    .navbar-brand img { height: 40px; }
    .navbar-brand .brand-text small { display: none; }
    .brand-text { font-size: .78rem; max-width: 75px; }
    .section-head h2 { font-size: clamp(1.2rem, 5.5vw, 1.7rem); }
    .page-header h1 { font-size: clamp(1.1rem, 5.5vw, 1.6rem); }
    .stat-item .stat-number { font-size: clamp(.95rem, 4.5vw, 1.3rem); }
    .stat-item .stat-label { font-size: .75rem; }
    .partner-logo { padding: 12px; height: 80px; }
    .partner-logo img { max-height: 45px; }
    .value-box { padding: 12px; }
    .form-card { padding: 16px; }
    .donate-cta { padding: 24px 16px; }
    .donate-cta h2 { font-size: 1.4rem; }
    /* Empile les boutons dans les sections CTA sur très petit mobile */
    .donate-cta a.btn,
    .donate-cta button.btn { display: block; width: 100%; margin: 4px 0 !important; }
    .testi-card { padding: 20px 14px; }
    .footer { padding: 32px 0 0; }
    .timeline-item .t-card { padding: 16px; }
    .breadcrumb { font-size: .8rem; }
    .about-img-stack .about-badge { bottom: 8px; left: 8px; }
    .partners-ticker-item { padding: 10px 16px; height: 64px; }
    .partners-ticker-item img { max-height: 38px; max-width: 100px; }
}

/* -------- Utilitaires responsifs globaux -------- */
@media (max-width: 767px) {
    /* Boutons CTA pleine largeur dans les sections bleues */
    .intl-cta-buttons,
    .fr-cta-buttons { flex-direction: column; align-items: stretch; }
    .intl-cta-buttons .btn,
    .fr-cta-buttons .btn { width: 100%; }
    /* Reduce padding of form-card CTA on medium mobile */
    .form-card { padding: 24px 16px; }
    /* Gallery filter scrollable horizontal */
    .gallery-filter { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .gallery-filter button { white-space: nowrap; }
    /* Leo band buttons wrap */
    .leo-band .col-lg-4 { text-align: center !important; }
    /* Réduit le gap g-5 sur mobile (cause de grands espaces vides) */
    .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.5rem; }
    /* Assure qu'aucun élément ne dépasse la largeur du viewport */
    .container, .container-fluid { max-width: 100vw; overflow-x: hidden; }
    img, video, iframe, table { max-width: 100%; }
    /* Alignement centré pour les colonnes qui se superposent */
    .col-lg-4, .col-lg-8, .col-lg-6, .col-lg-5 { text-align: center; }
    .col-lg-4 .president-photo img,
    .col-lg-6 .about-img-stack { margin: 0 auto 20px; }
}

/* ==========================================================================
   BLOG — Page Actualités (layout inspiré d'un blog magazine)
   Cartes blanches, fond gris clair, coins arrondis, ombres légères.
   ========================================================================== */
.news-blog-section { background: var(--body-bg, #f4f6f9); }
[data-theme="dark"] .news-blog-section { background: var(--body-bg); }

/* Carte générique du blog */
.blog-card {
    background: var(--card-bg); border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-sm); transition: all var(--transition);
}

/* --------- Carte vedette : image à gauche, texte à droite ---------- */
.blog-featured { overflow: hidden; }
.blog-featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-featured-img { position: relative; overflow: hidden; min-height: 260px; }
.blog-featured-img img {
    width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
    transition: transform .6s ease;
}
.blog-featured:hover .blog-featured-img img { transform: scale(1.06); }
.blog-featured-img .cat-badge { z-index: 2; background: var(--lion-gold); color: var(--lion-blue-d); position: absolute; }
.blog-featured h2 { color: var(--heading); }

/* --------------------------- Colonne latérale ----------------------- */
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.blog-widget {
    background: var(--card-bg); border-radius: var(--radius, 16px);
    box-shadow: var(--shadow-sm); padding: 24px;
}
.blog-widget h4 {
    font-size: 1.05rem; color: var(--heading); margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 2px solid var(--lion-gold);
    display: inline-block;
}
.blog-widget h4 i { color: var(--lion-blue); }

/* Articles récents (miniatures) */
.blog-recent {
    display: flex; align-items: center; gap: 14px; padding: 10px 0;
    text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.06);
}
.blog-recent:last-child { border-bottom: none; }
.blog-recent img {
    width: 72px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
}
.blog-recent strong {
    display: block; font-size: .9rem; color: var(--heading); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-recent small { color: var(--gray); font-size: .78rem; }
.blog-recent:hover strong { color: var(--lion-blue); }

/* Catégories */
.blog-cats li a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; border-radius: 10px; text-decoration: none;
    color: var(--body-text); font-size: .92rem; transition: all var(--transition);
}
.blog-cats li a:hover, .blog-cats li.active a { background: rgba(0,63,135,.08); color: var(--lion-blue); font-weight: 600; }
.blog-cats li a span {
    background: var(--lion-gold); color: var(--lion-blue-d); border-radius: 50px;
    font-size: .72rem; font-weight: 700; padding: 2px 10px;
}

/* ------------------------- Pagination dorée ------------------------- */
.news-blog-section .pagination .page-link {
    border-radius: 10px; margin: 0 4px; border: none; color: var(--body-text);
    background: var(--card-bg); box-shadow: var(--shadow-sm); min-width: 40px; text-align: center;
}
.news-blog-section .pagination .page-item.active .page-link {
    background: var(--lion-blue); color: #fff;
}
.news-blog-section .pagination .page-link:hover { background: var(--lion-gold); color: var(--lion-blue-d); }

/* ----------------------------- Responsive --------------------------- */
@media (max-width: 991px) {
    .blog-sidebar { order: 2; }
    .news-blog-section .col-lg-8 { order: 1; }
}
@media (max-width: 767px) {
    .blog-featured-img { min-height: 220px; }
    .blog-widget { padding: 18px; }
}

/* -------------------------------------------------------------------------- */
/*  Contenu riche des actualités (page publique /news/show)                    */
/* -------------------------------------------------------------------------- */
.news-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #3a3a3a;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.news-content h1,
.news-content h2,
.news-content h3,
.news-content h4 {
    color: #1a1a2e;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 .6em;
}
.news-content h1 { font-size: 1.9rem; }
.news-content h2 { font-size: 1.55rem; }
.news-content h3 { font-size: 1.25rem; }
.news-content h2:first-child,
.news-content h1:first-child,
.news-content h3:first-child { margin-top: 0; }
.news-content p { margin-bottom: 1.1em; }
.news-content a {
    color: #b8860b;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s;
}
.news-content a:hover { color: #8a6d0b; }
.news-content ul,
.news-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.6em;
}
.news-content ul { list-style: disc; }
.news-content ol { list-style: decimal; }
.news-content li { margin-bottom: .35em; }
.news-content blockquote {
    border-left: 4px solid #c9a227;
    background: #fffdf5;
    margin: 1.4em 0;
    padding: .8em 1.4em;
    font-style: italic;
    color: #555;
    border-radius: 0 10px 10px 0;
}
.news-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c9a227, transparent);
    margin: 2em 0;
}
.news-content img,
.news-content figure {
    max-width: 100%;
    height: auto;
}
.news-content figure {
    margin: 1.4em 0;
    text-align: center;
}
.news-content figcaption {
    font-size: .85rem;
    color: #888;
    margin-top: .4em;
    font-style: italic;
}
.news-content pre,
.news-content code {
    background: #f6f4ec;
    border-radius: 6px;
    font-size: .92em;
}
.news-content pre { padding: 1em; overflow-x: auto; }
.news-content code { padding: .15em .4em; }
.news-content pre code { padding: 0; background: none; }
.news-content sub,
.news-content sup { font-size: .7em; }