/*
Theme Name: GACF
Theme URI: https://groupeactioncommunautairefalardeau.ca/
Author: GACF
Author URI: https://groupeactioncommunautairefalardeau.ca/
Description: Thème WordPress personnalisé pour le Groupe d'Actions Communautaires de Farnham. Site institutionnel moderne, accessible et sobre.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gacf
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ============================================
   GACF - Styles Globaux
   Site institutionnel moderne & accessible
   ============================================ */

/* ============================================
   HEADER - TOP BAR & NAVIGATION
   ============================================ */

/* --- TOP BAR (Desktop) --- */
.gacf-topbar {
    background-color: var(--gacf-primary);
    padding: 0.75rem 0;
    position: relative;
    z-index: 1040;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* État caché lors du scroll vers le bas */
.gacf-topbar.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.gacf-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.gacf-topbar__left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.gacf-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--gacf-duration) var(--gacf-ease);
}

.gacf-topbar__phone:hover {
    color: #ffffff;
    opacity: 0.85;
    text-decoration: none;
}

.gacf-topbar__social {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.gacf-topbar__social a,
.gacf-topbar__social button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #ffffff;
    font-size: 1.25rem;
    border-radius: 50%;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
    background: none;
    border: none;
    cursor: pointer;
}

.gacf-topbar__social a:hover,
.gacf-topbar__social button:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
}

.gacf-topbar__center {
    flex: 0 1 320px;
}

/* Wrapper de recherche pour positionner le dropdown */
.gacf-search-wrapper {
    position: relative;
}

.gacf-topbar__search {
    display: flex;
    background-color: #ffffff;
    border-radius: 50px;
    overflow: hidden;
}

.gacf-topbar__search input {
    flex: 1;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    background: transparent;
    outline: none;
}

.gacf-topbar__search input::placeholder {
    color: #6c757d;
}

.gacf-topbar__search button {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    color: var(--gacf-primary);
    cursor: pointer;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-topbar__search button:hover {
    background-color: #f8f9fa;
}

/* ============================================
   DROPDOWN DE RECHERCHE INTELLIGENTE
   ============================================ */
.gacf-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    overflow: hidden;
    max-height: 400px;
}

/* S'assurer que le wrapper de recherche a un z-index élevé */
.gacf-search-wrapper {
    position: relative;
    z-index: 9999;
}

.gacf-search-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gacf-search-dropdown__content {
    padding: 0.5rem 0;
    max-height: 380px;
    overflow-y: auto;
}

/* État de chargement */
.gacf-search-dropdown__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #6c757d;
    font-size: 0.875rem;
}

.gacf-search-dropdown__loading i {
    margin-right: 0.5rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Aucun résultat */
.gacf-search-dropdown__empty {
    padding: 1.5rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

.gacf-search-dropdown__empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.gacf-search-dropdown__empty small {
    display: block;
    margin-top: 0.5rem;
    color: #adb5bd;
    font-size: 0.75rem;
}

/* Items de résultat */
.gacf-search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--gacf-text);
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
}

.gacf-search-result:last-child {
    border-bottom: none;
}

.gacf-search-result:hover,
.gacf-search-result.is-focused {
    background-color: #f5f6f7;
    text-decoration: none;
    color: var(--gacf-text);
}

.gacf-search-result__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Couleurs par type */
.gacf-search-result--suggestion .gacf-search-result__icon {
    background-color: #e8f4fd;
    color: #0077cc;
}

.gacf-search-result--service .gacf-search-result__icon {
    background-color: #e8f5e9;
    color: var(--gacf-secondary);
}

.gacf-search-result--activite .gacf-search-result__icon {
    background-color: #fff8e1;
    color: #f59e0b;
}

.gacf-search-result--evenement .gacf-search-result__icon {
    background-color: #fce4ec;
    color: #e91e63;
}

.gacf-search-result--page .gacf-search-result__icon {
    background-color: #f3e5f5;
    color: #9c27b0;
}

.gacf-search-result--equipe .gacf-search-result__icon {
    background-color: #e3f2fd;
    color: #1976d2;
}

.gacf-search-result--ca .gacf-search-result__icon {
    background-color: #fef3e2;
    color: #e65100;
}

.gacf-search-result__content {
    flex: 1;
    min-width: 0;
}

.gacf-search-result__title {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gacf-search-result__type {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
    margin-top: 2px;
}

.gacf-search-result__arrow {
    color: #adb5bd;
    font-size: 0.875rem;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.15s ease;
}

.gacf-search-result:hover .gacf-search-result__arrow,
.gacf-search-result.is-focused .gacf-search-result__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Séparateur entre groupes */
.gacf-search-dropdown__separator {
    height: 1px;
    background-color: #e9ecef;
    margin: 0.5rem 1rem;
}

/* Pied du dropdown - masqué */
.gacf-search-dropdown__footer {
    display: none;
}

.gacf-search-dropdown__footer-link {
    font-size: 0.8rem;
    color: var(--gacf-primary);
    text-decoration: none;
    font-weight: 600;
}

.gacf-search-dropdown__footer-link:hover {
    text-decoration: underline;
}

/* Highlight du texte recherché */
.gacf-search-highlight {
    background-color: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

/* Version mobile */
.gacf-search-wrapper--mobile {
    position: static;
}

.gacf-search-dropdown--mobile {
    position: fixed;
    top: auto;
    left: 1rem;
    right: 1rem;
    bottom: auto;
    margin-top: 0.5rem;
    max-height: 60vh;
}

.gacf-search-dropdown--mobile .gacf-search-dropdown__content {
    max-height: calc(60vh - 20px);
}

.gacf-topbar__right {
    display: flex;
    gap: 0.75rem;
}

/* Boutons outline light pour la topbar */
.btn-gacf--icon-light {
    font-family: "Mulish", sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    background-color: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 50px;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background-color 200ms ease,
        color 200ms ease;
}

.btn-gacf--icon-light:hover {
    background-color: #ffffff !important;
    color: #141c38 !important;
    text-decoration: none !important;
}

.btn-gacf--icon-light:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.btn-gacf--icon-light i {
    font-size: 1.1em;
}

/* --- NAVBAR DESKTOP --- */
.gacf-navbar {
    background-color: #ffffff;
    box-shadow: var(--gacf-shadow-sm);
}

.gacf-navbar--desktop {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.gacf-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.gacf-navbar__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.gacf-navbar__logo img {
    max-height: 70px;
    width: auto;
}

.gacf-navbar__logo-placeholder {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--gacf-primary);
    border-radius: var(--gacf-radius-sm);
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    color: var(--gacf-primary);
}

/* Menu Desktop */
.gacf-navbar__menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gacf-navbar__item {
    position: relative;
}

.gacf-navbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.625rem 1rem;
    font-family: "Mulish", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-text);
    text-decoration: none;
    border-radius: var(--gacf-radius-sm);
    transition:
        color var(--gacf-duration) var(--gacf-ease),
        background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__link:hover,
.gacf-navbar__link.is-active {
    color: var(--gacf-primary);
    background-color: rgba(20, 28, 56, 0.05);
    text-decoration: none;
}

.gacf-navbar__chevron {
    font-size: 0.75em;
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__item--has-children:hover .gacf-navbar__chevron {
    transform: rotate(180deg);
}

/* Sous-menu Desktop */
.gacf-navbar__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background-color: #ffffff;
    border-radius: var(--gacf-radius-md);
    box-shadow: var(--gacf-shadow-md);
    padding: 0.75rem 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity var(--gacf-duration) var(--gacf-ease),
        visibility var(--gacf-duration) var(--gacf-ease),
        transform var(--gacf-duration) var(--gacf-ease);
    z-index: 1000;
}

.gacf-navbar__item--has-children:hover .gacf-navbar__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Sous-liens avec icône de service */
.gacf-navbar__sublink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--gacf-text);
    text-decoration: none;
    transition:
        color var(--gacf-duration) var(--gacf-ease),
        background-color var(--gacf-duration) var(--gacf-ease);
}

/* Icône du service dans le sous-menu */
.gacf-navbar__sublink-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__sublink-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gacf-navbar__sublink:hover {
    color: var(--gacf-primary);
    background-color: rgba(20, 28, 56, 0.05);
    text-decoration: none;
}

.gacf-navbar__sublink:hover .gacf-navbar__sublink-icon {
    transform: scale(1.15);
}

/* --- NAVBAR MOBILE --- */
.gacf-navbar--mobile {
    position: sticky;
    top: 0;
    z-index: 1050;
}

.gacf-navbar--mobile .gacf-navbar__inner {
    padding: 0.625rem 0;
}

.gacf-navbar--mobile .gacf-navbar__logo img {
    max-height: 50px;
}

.gacf-navbar__mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bouton Recherche Mobile */
.gacf-navbar__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #f8f9fa;
    border: none;
    border-radius: 50%;
    color: var(--gacf-primary);
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__search-toggle:hover {
    background-color: #e9ecef;
}

/* Bouton Calendrier Mobile */
.gacf-navbar__calendar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--gacf-primary);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.125rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__calendar-toggle:hover {
    background-color: #2a3a5c;
    color: #ffffff;
    text-decoration: none;
}

/* Bouton Burger */
.gacf-navbar__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background-color: #f8f9fa;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__burger:hover {
    background-color: #e9ecef;
}

/* Burger actif (menu ouvert) : assurer visibilité */
.gacf-navbar__burger.is-active {
    position: relative;
    z-index: 1051;
    background-color: var(--gacf-primary);
}

.gacf-navbar__burger-line {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--gacf-primary);
    border-radius: 2px;
    transition:
        transform var(--gacf-duration) var(--gacf-ease),
        opacity var(--gacf-duration) var(--gacf-ease);
}

.gacf-navbar__burger.is-active .gacf-navbar__burger-line {
    background-color: #ffffff;
}

.gacf-navbar__burger.is-active .gacf-navbar__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.gacf-navbar__burger.is-active .gacf-navbar__burger-line:nth-child(2) {
    opacity: 0;
}

.gacf-navbar__burger.is-active .gacf-navbar__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Barre de recherche mobile dépliable */
.gacf-navbar__search-mobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.gacf-navbar__search-mobile.is-open {
    max-height: 70px;
    padding: 0.75rem 0;
}

.gacf-navbar__search-mobile form {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 50px;
    padding: 0.25rem;
}

.gacf-navbar__search-mobile input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    outline: none;
}

.gacf-navbar__search-mobile button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--gacf-primary);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
}

.gacf-navbar__search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--gacf-text);
    cursor: pointer;
    margin-left: 0.25rem;
}

/* --- MENU MOBILE OVERLAY --- */
.gacf-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    /* Dynamic viewport height pour mobile */
    background-color: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1040;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gacf-mobile-menu.is-open {
    right: 0;
}

.gacf-mobile-menu__content {
    display: flex;
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
    padding-bottom: 100px;
    /* Espace supplémentaire en bas */
}

/* Liste du menu mobile */
.gacf-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gacf-mobile-menu__item {
    border-bottom: 1px solid #e9ecef;
}

.gacf-mobile-menu__item--has-children {
    position: relative;
}

.gacf-mobile-menu__link {
    display: block;
    padding: 1rem 0;
    font-family: "Mulish", sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gacf-text);
    text-decoration: none;
}

.gacf-mobile-menu__link:hover,
.gacf-mobile-menu__link.is-active {
    color: var(--gacf-primary);
    text-decoration: none;
}

/* Bouton dropdown mobile */
.gacf-mobile-menu__dropdown-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gacf-text);
    cursor: pointer;
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.gacf-mobile-menu__item--has-children.is-open .gacf-mobile-menu__dropdown-toggle {
    transform: rotate(180deg);
}

/* Sous-menu mobile */
.gacf-mobile-menu__submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gacf-mobile-menu__sublink {
    display: block;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: #6c757d;
    text-decoration: none;
}

.gacf-mobile-menu__sublink:hover {
    color: var(--gacf-primary);
    text-decoration: none;
}

/* Réseaux sociaux mobile */
.gacf-mobile-menu__social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 0;
    margin-top: auto;
}

.gacf-mobile-menu__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: #f8f9fa;
    border-radius: 50%;
    color: var(--gacf-text);
    font-size: 1.5rem;
    transition:
        background-color var(--gacf-duration) var(--gacf-ease),
        color var(--gacf-duration) var(--gacf-ease);
}

.gacf-mobile-menu__social a:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
    text-decoration: none;
}

/* Boutons CTA Mobile */
.gacf-mobile-menu__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem 0;
}

.gacf-mobile-menu__cta .btn-gacf--icon {
    justify-content: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}

/* Téléphone mobile */
.gacf-mobile-menu__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    margin-top: 0.75rem;
    background-color: #f8f9fa;
    border-radius: 50px;
    color: var(--gacf-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-mobile-menu__phone:hover {
    background-color: #e9ecef;
    color: var(--gacf-text);
    text-decoration: none;
}

/* Overlay sombre quand menu ouvert */
body.menu-open {
    overflow: hidden;
}

/* Navbar mobile fixe quand menu ouvert */
body.menu-open .gacf-navbar--mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.gacf-mobile-menu__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1039;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gacf-mobile-menu__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   A) VARIABLES CSS
   ============================================ */
:root {
    /* --- Couleurs de base --- */
    --gacf-primary: #141c38;
    --gacf-primary-dark: #0d1225;
    --gacf-primary-light: rgba(20, 28, 56, 0.1);
    --gacf-secondary: #5ba34f;
    --gacf-secondary-dark: #4a8a40;
    --gacf-dark: #141c38;
    --gacf-muted: #6c757d;
    --gacf-bg: #ffffff;
    --gacf-text: #101010;
    --gacf-text-muted: #6c757d;
    /* Couleur pour textes secondaires avec bon contraste (WCAG AA) */

    /* --- Override Bootstrap Primary --- */
    --bs-primary: #141c38;
    --bs-primary-rgb: 20, 28, 56;

    /* --- Couleurs des services --- */
    --gacf-service-itmav: #183480;
    --gacf-service-atb: #2146ab;
    --gacf-service-cafetaria: #ffa008;
    --gacf-service-soutien-ali: #fdbc53;
    --gacf-service-centre-dj: #ff5024;
    --gacf-service-pret-equip: #c3d4ee;
    --gacf-service-prepose-dom: #42d9dc;
    --gacf-service-comptoir-com: #78cd65;

    /* --- Border Radius --- */
    --gacf-radius: 8px;
    --gacf-radius-sm: 10px;
    --gacf-radius-md: 14px;
    --gacf-radius-lg: 18px;

    /* --- Spacing (échelle propre) --- */
    --gacf-space-1: 0.25rem;
    /* 4px */
    --gacf-space-2: 0.5rem;
    /* 8px */
    --gacf-space-3: 1rem;
    /* 16px */
    --gacf-space-4: 1.5rem;
    /* 24px */
    --gacf-space-5: 2.5rem;
    /* 40px */
    --gacf-space-6: 4rem;
    /* 64px */
    --gacf-space-7: 5rem;
    /* 80px */
    --gacf-space-8: 6rem;
    /* 96px */
    --gacf-space-9: 8rem;
    /* 128px */

    /* --- Motion & Transitions --- */
    --gacf-duration: 200ms;
    --gacf-duration-fast: 150ms;
    --gacf-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Shadows --- */
    --gacf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --gacf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --gacf-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);

    /* --- Focus visible --- */
    --gacf-focus-ring: 0 0 0 3px rgba(20, 28, 56, 0.25);
}

/* ============================================
   B) TYPOGRAPHIE GLOBALE
   ============================================ */

/* --- Body --- */
html {
    overflow-x: clip;
    /* Empêche le scroll horizontal sans casser position: sticky */
}

body {
    font-family: "Mulish", sans-serif;
    font-size: 1.125rem;
    /* 18px */
    font-weight: 400;
    line-height: 1.7;
    color: var(--gacf-text);
    background-color: var(--gacf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    /* Empêche le scroll horizontal dû à la ligne décorative 100vw */
}

/* --- Titres avec clamp() responsive --- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: "Quicksand", sans-serif !important;
}

h1,
.h1 {
    font-size: clamp(2rem, 5vw + 1rem, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--gacf-primary);
}

h2,
.h2 {
    font-size: clamp(1.625rem, 3vw + 0.75rem, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gacf-primary);
}

h3,
.h3 {
    font-size: clamp(1.375rem, 2vw + 0.5rem, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--gacf-primary);
}

h4,
.h4 {
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gacf-primary);
}

h5,
.h5 {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--gacf-primary);
}

h6,
.h6 {
    font-size: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--gacf-primary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* ============================================
   C) RYTHME & ESPACEMENTS
   ============================================ */

/* --- Paragraphes --- */
p {
    margin-top: 0;
    margin-bottom: var(--gacf-space-3);
}

p:last-child {
    margin-bottom: 0;
}

/* --- Listes --- */
ul,
ol {
    margin-top: 0;
    margin-bottom: var(--gacf-space-3);
    padding-left: var(--gacf-space-4);
}

ul ul,
ul ol,
ol ul,
ol ol {
    margin-bottom: 0;
}

li {
    margin-bottom: var(--gacf-space-1);
}

/* --- Titres : marges cohérentes --- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    margin-bottom: var(--gacf-space-3);
}

/* ============================================
   C-bis) ACCESSIBILITÉ MOBILE — Tailles de texte minimales
   Sur petit téléphone, on relève les planchers pour éviter
   les textes trop petits (< 14px) difficiles à lire.
   ============================================ */
@media (max-width: 576px) {

    /* Remonter la base body pour que 0.875rem ≈ 14.5px au lieu de 14px */
    body {
        font-size: 1.0625rem;
        /* 17px — base légèrement relevée */
    }

    /* Paragraphes, listes, textes courants */
    p,
    li,
    td,
    th,
    label,
    .form-control,
    .form-select,
    textarea,
    input {
        font-size: 1rem !important;
        /* plancher 16px */
    }

    /* Sous-titres et textes secondaires : plancher 0.875rem (≈14.9px sur cette base) */
    .text-muted,
    small,
    .small,
    figcaption,
    .form-text,
    .faq__answer-content,
    .card-text {
        font-size: 0.9375rem !important;
        /* 15px plancher */
    }

    /* Très petits textes (badges, tags, dates) : plancher 13px */
    .badge,
    .event-card__date,
    .event-card__location,
    .btn-gacf--small,
    [class*="__meta"],
    [class*="__date"],
    [class*="__tag"] {
        font-size: 0.8125rem !important;
        /* 13px plancher */
    }
}

/* ============================================
   C) ÉLÉMENTS DÉCORATIFS
   ============================================ */

/* --- Titre avec ligne décorative --- 
   Structure HTML simplifiée :
   <h2 class="title-decorated">Mon titre</h2>
   
   Le parent doit avoir overflow-x: hidden ou être dans un container
---------------------------------------- */
.title-decorated {
    position: relative;
    padding-left: 1.5rem;
}

.title-decorated::before {
    content: "";
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 12px;
    border-radius: 0 6px 6px 0;
    background-color: var(--service-color, #141c38);
}

/* Pour les titres sur plusieurs lignes, on cible la première ligne */
.title-decorated--multiline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.title-decorated--multiline::before {
    top: 0.6em;
    transform: none;
}

/* Variante blanche pour fond foncé */
.title-decorated--white::before {
    background-color: #ffffff;
}

/* Masquer la ligne décorative sur mobile */
@media (max-width: 767px) {
    .title-decorated::before {
        display: none;
    }

    .title-decorated {
        padding-left: 0;
    }
}


/* ============================================
   D) CARD TÉMOIGNAGE
   ============================================ */

/* --- Structure HTML :
<div class="testimonial-card testimonial-card--soutien-ali">
    <div class="testimonial-card__header">
        <img src="avatar.jpg" alt="" class="testimonial-card__avatar">
        <div class="testimonial-card__info">
            <p class="testimonial-card__name">R. Yong-Fong</p>
            <p class="testimonial-card__service">Soutien alimentaire</p>
        </div>
    </div>
    <blockquote class="testimonial-card__quote">...</blockquote>
</div>
---------------------------------------- */

.testimonial-card {
    --card-accent: var(--gacf-primary);
    position: relative;
    background-color: #ffffff;
    border-radius: var(--gacf-radius-lg);
    padding: var(--gacf-space-4);
    padding-top: var(--gacf-space-5);
    overflow: visible;
    box-shadow: var(--gacf-shadow-md);
}

/* --- Bulle décorative en haut à droite (60% opacité) --- */
.testimonial-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 52px;
    opacity: 0.4;
    background-color: var(--card-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245.121 51.737'%3E%3Cpath d='M0,0H245.121V51.737c-25.4-.338-91.09-2.258-154.891-16.76C35.619,22.564,10.231,7.26,0,0' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245.121 51.737'%3E%3Cpath d='M0,0H245.121V51.737c-25.4-.338-91.09-2.258-154.891-16.76C35.619,22.564,10.231,7.26,0,0' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top right;
    mask-position: top right;
    pointer-events: none;
    border-radius: 0 var(--gacf-radius-lg) 0 0;
}

/* --- Apostrophe/guillemets (sort de la card, plus grosse, descendue) --- */
.testimonial-card::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 20px;
    width: 45px;
    height: 40px;
    background-color: var(--card-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69.754 62.777'%3E%3Cpath d='M9.975,65.777A6.975,6.975,0,0,1,3,58.8V41.768a6.975,6.975,0,0,1,6.975-6.975h9.682a62.87,62.87,0,0,0-.432-7.352,24.35,24.35,0,0,0-2.162-6.919,12.871,12.871,0,0,0-3.9-4.764,9.231,9.231,0,0,0-6.055-1.946V3a21.025,21.025,0,0,1,10.6,2.595,23.018,23.018,0,0,1,7.568,6.919A34.179,34.179,0,0,1,29.6,22.684a53.709,53.709,0,0,1,1.3,12.109V58.8a6.975,6.975,0,0,1-6.975,6.975Zm41.851,0A6.975,6.975,0,0,1,44.851,58.8V41.768a6.975,6.975,0,0,1,6.975-6.975h9.682a62.871,62.871,0,0,0-.432-7.352,24.649,24.649,0,0,0-2.162-6.919,12.871,12.871,0,0,0-3.9-4.764,9.231,9.231,0,0,0-6.054-1.946V3a21.025,21.025,0,0,1,10.6,2.595,23.018,23.018,0,0,1,7.568,6.919,34.179,34.179,0,0,1,4.325,10.17,53.709,53.709,0,0,1,1.3,12.109V58.8a6.975,6.975,0,0,1-6.975,6.975Z' transform='translate(-3 -3)' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69.754 62.777'%3E%3Cpath d='M9.975,65.777A6.975,6.975,0,0,1,3,58.8V41.768a6.975,6.975,0,0,1,6.975-6.975h9.682a62.87,62.87,0,0,0-.432-7.352,24.35,24.35,0,0,0-2.162-6.919,12.871,12.871,0,0,0-3.9-4.764,9.231,9.231,0,0,0-6.055-1.946V3a21.025,21.025,0,0,1,10.6,2.595,23.018,23.018,0,0,1,7.568,6.919A34.179,34.179,0,0,1,29.6,22.684a53.709,53.709,0,0,1,1.3,12.109V58.8a6.975,6.975,0,0,1-6.975,6.975Zm41.851,0A6.975,6.975,0,0,1,44.851,58.8V41.768a6.975,6.975,0,0,1,6.975-6.975h9.682a62.871,62.871,0,0,0-.432-7.352,24.649,24.649,0,0,0-2.162-6.919,12.871,12.871,0,0,0-3.9-4.764,9.231,9.231,0,0,0-6.054-1.946V3a21.025,21.025,0,0,1,10.6,2.595,23.018,23.018,0,0,1,7.568,6.919,34.179,34.179,0,0,1,4.325,10.17,53.709,53.709,0,0,1,1.3,12.109V58.8a6.975,6.975,0,0,1-6.975,6.975Z' transform='translate(-3 -3)' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

/* --- Header : avatar + infos --- */
.testimonial-card__header {
    display: flex;
    align-items: center;
    gap: var(--gacf-space-3);
    margin-bottom: var(--gacf-space-3);
}

.testimonial-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
    flex-shrink: 0;
}

/* =========================================================
   FIX: Avatar témoignages bénévoles (quand .avatar est un DIV)
   -> rend l'image ronde comme sur la page d'accueil
========================================================= */

.testimonial-card__avatar {
    overflow: hidden;
    /* coupe l'image dans le cercle */
}

.testimonial-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.testimonial-card__info {
    min-width: 0;
}

.testimonial-card__name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--gacf-text);
    margin: 0;
    line-height: 1.3;
}

.testimonial-card__service {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/* --- Citation --- */
.testimonial-card__quote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--gacf-text);
}

/* --- Variantes par service --- */
.testimonial-card--itmav {
    --card-accent: var(--gacf-service-itmav);
}

.testimonial-card--atb {
    --card-accent: var(--gacf-service-atb);
}

.testimonial-card--cafetaria {
    --card-accent: var(--gacf-service-cafetaria);
}

.testimonial-card--soutien-ali {
    --card-accent: var(--gacf-service-soutien-ali);
}

.testimonial-card--centre-dj {
    --card-accent: var(--gacf-service-centre-dj);
}

.testimonial-card--pret-equip {
    --card-accent: var(--gacf-service-pret-equip);
}

.testimonial-card--prepose-dom {
    --card-accent: var(--gacf-service-prepose-dom);
}

.testimonial-card--comptoir-com {
    --card-accent: var(--gacf-service-comptoir-com);
}

/* --- Avatar anonyme (SVG) --- */
.testimonial-card__avatar-anon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-card__avatar-anon svg {
    width: 42px;
    height: 42px;
}

/* --- Section témoignages --- */
.service-testimonials {
    padding: var(--gacf-space-6) 0;
}

.service-testimonials__title {
    font-weight: 700;
    color: var(--gacf-primary);
    text-align: center;
    margin-bottom: var(--gacf-space-5);
}

.service-testimonials__carousel {
    position: relative;
    padding: 0 70px;
}

.service-testimonials__carousel>.carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
}

.service-testimonials__carousel>.carousel-arrow:first-of-type {
    left: 0;
}

.service-testimonials__carousel>.carousel-arrow:last-of-type {
    right: 0;
}

.service-testimonials__track {
    width: 100%;
    position: relative;
    min-height: 280px;
}

.service-testimonials__item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-testimonials__item.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Classes de transition pour le carousel témoignages */
.service-testimonials__item.slide-out-left,
.service-testimonials__item.slide-out-right {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .service-testimonials__item {
        transition: none;
    }
}

/* Hauteur fixe pour les cartes dans le carrousel de témoignages */
.service-testimonials .testimonial-card {
    height: 280px;
    overflow-y: auto;
}

/* --- Responsive témoignages --- */
@media (max-width: 767.98px) {
    .service-testimonials__carousel {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .service-testimonials__carousel>.carousel-arrow {
        position: static;
    }

    /* Reorder: track first, then arrows in a row */
    .service-testimonials__track {
        order: 1;
    }

    .service-testimonials__carousel>.carousel-arrow:first-of-type {
        order: 2;
        left: auto;
        right: 56px;
        position: absolute;
        bottom: 0;
        top: auto;
    }

    .service-testimonials__carousel>.carousel-arrow:last-of-type {
        order: 3;
        right: 0;
        position: absolute;
        bottom: 0;
        top: auto;
    }

    .service-testimonials__carousel {
        position: relative;
        padding-bottom: 56px;
    }

    .service-testimonials .testimonial-card {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .service-testimonials {
        padding: var(--gacf-space-5) 0;
    }

    .service-testimonials__carousel {
        padding-bottom: 56px;
    }

    .service-testimonials__carousel>.carousel-arrow:first-of-type {
        right: 56px;
    }

    .service-testimonials .testimonial-card {
        height: 360px;
    }

    .testimonial-card__avatar-anon svg {
        width: 36px;
        height: 36px;
    }
}

/* --- Responsive --- */
@media (max-width: 576px) {
    .testimonial-card {
        padding: var(--gacf-space-3);
        padding-top: var(--gacf-space-4);
    }

    .testimonial-card::before {
        width: 140px;
        height: 40px;
    }

    .testimonial-card::after {
        width: 40px;
        height: 36px;
        top: -6px;
        right: 16px;
    }

    .testimonial-card__avatar {
        width: 48px;
        height: 48px;
    }

    .testimonial-card__name {
        font-size: 1rem;
    }

    .testimonial-card__quote {
        font-size: 0.9375rem;
    }
}


/* ============================================
   E) CARD ÉVÉNEMENT / ACTIVITÉ
   ============================================ */

/* --- Structure HTML :
<article class="event-card">
    <div class="event-card__image">
        <img src="image.jpg" alt="">
        <span class="event-card__date">
            <svg>...</svg>
            23 juin
        </span>
    </div>
    <div class="event-card__content">
        <h4 class="event-card__title">Anniversaire</h4>
        <div class="event-card__location">
            <i class="bi bi-geo-alt"></i>
            Charlevoix
        </div>
        <p class="event-card__desc">Sortie en groupe vers Charlevoix...</p>
        <div class="event-card__footer">
            <a href="#" class="event-card__link">Découvrir</a>
        </div>
    </div>
</article>
---------------------------------------- */

.event-card {
    background-color: #ffffff;
    border-radius: var(--gacf-radius-lg);
    overflow: hidden;
    box-shadow: var(--gacf-shadow-md);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: box-shadow var(--gacf-duration) var(--gacf-ease), transform var(--gacf-duration) var(--gacf-ease);
}

/* Hover sur toute la carte */
.event-card:hover {
    box-shadow: var(--gacf-shadow-lg);
    transform: translateY(-4px);
}

/* Lien stretch sur toute la carte */
.event-card__link {
    position: static;
}

.event-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* --- Zone image --- */
.event-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

/* Courbe décorative en bas de l'image - fond blanc avec contour bleu */
.event-card__image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #ffffff;
    border-top: 4px solid var(--gacf-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L0,30 Q200,0 400,30 L400,30 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L0,30 Q200,0 400,30 L400,30 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Badge date */
.event-card__date,
.event-card__date--green {
    position: absolute;
    top: var(--gacf-space-3);
    left: var(--gacf-space-3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--gacf-primary);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border-radius: 50px;
}

.event-card__date svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Zone contenu --- */
.event-card__content {
    padding: var(--gacf-space-4);
    padding-top: var(--gacf-space-3);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-card__title {
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.375rem);
    font-weight: 700;
    color: var(--gacf-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
    flex-shrink: 0;
}

/* Lieu - affiché après le titre */
.event-card__location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-card__location i {
    color: var(--gacf-primary);
    font-size: 0.9rem;
}

.event-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gacf-text);
    margin: 0 0 var(--gacf-space-3);
    flex-grow: 1;
}

/* Footer : lieu + bouton */
.event-card__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Tronquer le nom du lieu pour ne pas pousser le bouton */
.event-card__footer .event-card__location {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
}

.event-card__footer .event-card__location i {
    vertical-align: middle;
}

.event-card__link {
    flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 576px) {
    .event-card__content {
        padding: var(--gacf-space-3);
    }

    .event-card__date {
        font-size: 0.8125rem;
        padding: 0.4rem 0.75rem;
    }

    .event-card__title {
        font-size: 1.125rem;
    }

    .event-card__footer {
        flex-wrap: wrap;
    }
}


/* ============================================
   F) BOUTONS GACF
   Tous avec flèche + hover changement de couleur + décalage flèche
   ============================================ */

/* --- Styles de base communs --- */
.btn-gacf,
.btn-gacf--white,
.btn-gacf--secondary,
.btn-gacf--link {
    font-family: "Mulish", sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gacf-space-2);
    text-decoration: none !important;
    /* Jamais de soulignement */
    cursor: pointer;
    transition:
        background-color var(--gacf-duration) var(--gacf-ease),
        color var(--gacf-duration) var(--gacf-ease),
        border-color var(--gacf-duration) var(--gacf-ease),
        box-shadow var(--gacf-duration) var(--gacf-ease);
}

/* --- Pseudo-élément flèche commune --- */
.btn-gacf::after,
.btn-gacf--white::after,
.btn-gacf--secondary::after,
.btn-gacf--link::after {
    content: "\F138";
    font-family: "bootstrap-icons";
    display: inline-block;
    font-size: 0.9em;
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

/* --- Variante sans flèche --- */
.btn-gacf--no-arrow::after {
    display: none;
}

/* --- Hover : flèche glisse à droite (pour tous) --- */
.btn-gacf:hover::after,
.btn-gacf--white:hover::after,
.btn-gacf--secondary:hover::after,
.btn-gacf--link:hover::after {
    transform: translateX(5px);
}

/* ----------------------------------------
   1a) BOUTON PRIMAIRE COULEUR (.btn-gacf)
   Hover : devient plus clair (bleu intermédiaire)
   ---------------------------------------- */
.btn-gacf {
    padding: 0.875rem 1.75rem;
    font-size: 1.0625rem;
    background-color: var(--gacf-primary);
    color: #ffffff;
    border: 2px solid var(--gacf-primary);
    border-radius: 50px;
    /* Bien rond */
}

.btn-gacf:hover {
    background-color: #2a3a5c;
    /* Bleu plus clair */
    border-color: #2a3a5c;
    color: #ffffff;
    text-decoration: none !important;
}

.btn-gacf:active {
    background-color: #0d1226;
    border-color: #0d1226;
}

.btn-gacf:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
}

/* ----------------------------------------
   1b) BOUTON PRIMAIRE BLANC (.btn-gacf--white)
   Pour fond foncé - hover : fond légèrement teinté
   ---------------------------------------- */
.btn-gacf--white {
    padding: 0.875rem 1.75rem;
    font-size: 1.0625rem;
    background-color: #ffffff;
    color: var(--gacf-primary);
    border: 2px solid #ffffff;
    border-radius: 50px;
    /* Bien rond */
}

.btn-gacf--white:hover {
    background-color: #f0f4ff;
    /* Légère teinte bleutée */
    border-color: #f0f4ff;
    color: var(--gacf-primary);
    text-decoration: none !important;
}

.btn-gacf--white:active {
    background-color: #e0e8f5;
    border-color: #e0e8f5;
}

.btn-gacf--white:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ----------------------------------------
   2) BOUTON SECONDAIRE (.btn-gacf--secondary)
   Style outline - hover : se remplit
   ---------------------------------------- */
.btn-gacf--secondary {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    background-color: transparent;
    color: var(--gacf-primary);
    border: 2px solid var(--gacf-primary);
    border-radius: 50px;
    /* Bien rond */
}

.btn-gacf--secondary:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
    text-decoration: none !important;
}

.btn-gacf--secondary:active {
    background-color: #0d1226;
    border-color: #0d1226;
}

.btn-gacf--secondary:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
}

/* ----------------------------------------
   2b) BOUTON OUTLINE (.btn-gacf--outline)
   Alias pour secondary - style outline
   ---------------------------------------- */
.btn-gacf--outline {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    background-color: transparent;
    color: var(--gacf-primary);
    border: 2px solid var(--gacf-primary);
    border-radius: 50px;
}

.btn-gacf--outline:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
    text-decoration: none !important;
}

.btn-gacf--outline:active {
    background-color: #0d1226;
    border-color: #0d1226;
}

.btn-gacf--outline:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
}

/* ----------------------------------------
   3) BOUTON LIEN (.btn-gacf--link)
   Pas de fond, pas de bordure, underline au hover
   ---------------------------------------- */
.btn-gacf--link {
    padding: 0.5rem 0;
    font-size: 1rem;
    background-color: transparent;
    color: var(--gacf-primary);
    border: none;
    border-radius: 0;
    position: relative;
}

/* Underline animé */
.btn-gacf--link::before {
    content: "";
    position: absolute;
    bottom: 0.25rem;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--gacf-primary);
    transition: width var(--gacf-duration) var(--gacf-ease);
}

.btn-gacf--link:hover {
    transform: none;
    /* Pas de scale pour le lien */
    color: var(--gacf-primary);
}

.btn-gacf--link:hover::before {
    width: calc(100% - 1.5rem);
}

.btn-gacf--link:active {
    opacity: 0.8;
}

.btn-gacf--link:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
    border-radius: var(--gacf-radius-sm);
}

/* ----------------------------------------
   ÉTATS DISABLED (tous les boutons)
   ---------------------------------------- */
.btn-gacf:disabled,
.btn-gacf[disabled],
.btn-gacf--white:disabled,
.btn-gacf--white[disabled],
.btn-gacf--secondary:disabled,
.btn-gacf--secondary[disabled],
.btn-gacf--link:disabled,
.btn-gacf--link[disabled],
.btn-gacf.disabled,
.btn-gacf--white.disabled,
.btn-gacf--secondary.disabled,
.btn-gacf--link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ----------------------------------------
   UTILITAIRE BLOCK (width: 100%)
   ---------------------------------------- */
.btn-gacf--block {
    width: 100%;
}

/* ----------------------------------------
   UTILITAIRE TAILLE SMALL
   S'applique sur .btn-gacf ou .btn-gacf--white
   ---------------------------------------- */
.btn-gacf--sm {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}

/* ----------------------------------------
   4) BOUTON AVEC ICÔNE (.btn-gacf--icon)
   Outline avec icône à gauche, pas de flèche
   ---------------------------------------- */
.btn-gacf--icon {
    font-family: "Mulish", sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--gacf-space-2);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    background-color: transparent;
    color: var(--gacf-primary);
    border: 2px solid var(--gacf-primary);
    border-radius: 50px;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background-color var(--gacf-duration) var(--gacf-ease),
        color var(--gacf-duration) var(--gacf-ease),
        border-color var(--gacf-duration) var(--gacf-ease);
}

.btn-gacf--icon svg,
.btn-gacf--icon i {
    width: 1.25em;
    flex-shrink: 0;
}

.btn-gacf--icon:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
}

.btn-gacf--icon:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
}

.btn-gacf--icon:disabled,
.btn-gacf--icon.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   E) LIENS DANS LE TEXTE
   ============================================ */
a {
    color: var(--gacf-primary);
    text-decoration: none;
    transition: color var(--gacf-duration-fast) var(--gacf-ease);
}

a:hover {
    color: var(--gacf-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
    border-radius: 2px;
}


/* [CARD REMOVEE PAR L'UTILISATEUR] */


/* ============================================
   F) BASE UI : FORMULAIRES
   ============================================ */
.form-control,
.form-select {
    border-radius: var(--gacf-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition:
        border-color var(--gacf-duration-fast) var(--gacf-ease),
        box-shadow var(--gacf-duration-fast) var(--gacf-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gacf-primary);
    box-shadow: var(--gacf-focus-ring);
    outline: none;
}

/* ============================================
   F) BASE UI : IMAGES
   ============================================ */
img {
    max-width: 100%;
    height: auto;
}

.img-rounded {
    border-radius: var(--gacf-radius-md);
}

.img-rounded-lg {
    border-radius: var(--gacf-radius-lg);
}

/* ============================================
   G) BOUTONS DE DÉFILEMENT / CARROUSEL
   ============================================ 
   
   Système unifié de flèches carrousel
   
   Classes disponibles :
   - .carousel-arrow           : style outline bleu (50px)
   - .carousel-arrow--white    : outline blanc (sur fond foncé)
   - .carousel-arrow--filled   : fond bleu plein, bordure blanche
   - .carousel-arrow--filled-white : fond blanc plein, bordure bleue
   - .carousel-arrow--ghost    : semi-transparent blanc (sur fond foncé)
   - .carousel-arrow--lg       : grande taille (52px)
   - .carousel-arrow--sm       : petite taille (40px)
   - .carousel-arrow--xs       : très petite taille (36px)
   
   Structure HTML :
   <button class="carousel-arrow">
     <svg>...</svg>
   </button>
*/

/* --- Variables carrousel --- */
:root {
    --gacf-carousel-arrow-size: 48px;
}

/* --- Navigation conteneur --- */
.carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: var(--gacf-space-4);
}

.carousel-nav--center {
    justify-content: center;
}

/* --- Bouton flèche carrousel (STYLE UNIQUE: fond blanc, bordure bleue) --- */
[class*="carousel-arrow"] {
    width: var(--gacf-carousel-arrow-size);
    height: var(--gacf-carousel-arrow-size);
    min-width: var(--gacf-carousel-arrow-size);
    min-height: var(--gacf-carousel-arrow-size);
    border-radius: 50%;
    border: 2px solid var(--gacf-primary);
    background: #ffffff !important;
    color: var(--gacf-primary) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: background-color var(--gacf-duration) var(--gacf-ease),
        border-color var(--gacf-duration) var(--gacf-ease),
        transform var(--gacf-duration) var(--gacf-ease);
}

[class*="carousel-arrow"]:hover:not(:disabled) {
    background: rgba(34, 49, 94, 0.12) !important;
    color: var(--gacf-primary) !important;
    border-color: var(--gacf-primary) !important;
    box-shadow: none !important;
    transform: scale(1.05);
}

[class*="carousel-arrow"]:active:not(:disabled) {
    background: rgba(34, 49, 94, 0.2) !important;
    transform: scale(1) !important;
}

[class*="carousel-arrow"]:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring) !important;
}

[class*="carousel-arrow"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

[class*="carousel-arrow"] svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --- Variante filled : fond blanc, bordure bleue (pour fonds colorés) --- */
.carousel-arrow--filled {
    background: #ffffff !important;
    border: 2px solid var(--gacf-primary) !important;
    color: var(--gacf-primary) !important;
}

.carousel-arrow--filled:hover:not(:disabled) {
    background: #ffffff !important;
    border-color: var(--gacf-primary) !important;
    color: var(--gacf-primary) !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.carousel-arrow--filled:active:not(:disabled) {
    background: #f0f0f0 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* --- Variante lg : grande taille --- */
.carousel-arrow--lg {
    --gacf-carousel-arrow-size: 52px;
}

.carousel-arrow--lg svg {
    width: 24px;
    height: 24px;
}

/* --- Bouton nav petit (style équipe/miniatures) - utiliser .carousel-arrow--xs à la place --- */
.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: var(--gacf-primary);
    cursor: pointer;
    transition:
        background-color var(--gacf-duration) var(--gacf-ease),
        color var(--gacf-duration) var(--gacf-ease),
        transform var(--gacf-duration) var(--gacf-ease);
    box-shadow: var(--gacf-shadow-sm);
}

.nav-btn:hover {
    background: var(--gacf-primary);
    color: #ffffff;
    transform: scale(1.1);
}

.nav-btn:active {
    transform: scale(1);
}

.nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--gacf-focus-ring);
}

.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

/* --- Responsive carrousel arrows --- */
@media (max-width: 768px) {
    .carousel-nav {
        justify-content: center;
    }
}

/* ============================================
   F) SECTION ILLUSTRATION - 3 images avec SVG
   ============================================ 
   
   Composant pour afficher 3 images rondes avec
   une illustration SVG en arrière-plan.
   Les couleurs sont dynamiques via --illus-color-1, --illus-color-2, --illus-color-3
   
   Structure HTML requise:
   <div class="section-illustration">
     <div class="section-illustration__bg"></div>
     <div class="section-illustration__images">
       <img src="..." alt="..." class="section-illustration__img section-illustration__img--1">
       <img src="..." alt="..." class="section-illustration__img section-illustration__img--2">
       <img src="..." alt="..." class="section-illustration__img section-illustration__img--3">
     </div>
   </div>
*/

.section-illustration {
    position: relative;
    /* === AJUSTER: Largeur du conteneur === */
    width: 400px;
    max-width: 100%;
    /* === AJUSTER: Hauteur du conteneur === */
    height: 480px;
}

/* --- Couleurs par défaut (modifiables via variantes) --- */
.section-illustration {
    --illus-color-1: #78cd65;
    /* Vert - forme du haut droite */
    --illus-color-2: #ffc0b1;
    /* Rose/pêche - forme gauche */
    --illus-color-3: #fd9502;
    /* Orange - grande forme bas */
    --illus-opacity-1: 0.25;
    --illus-opacity-3: 0.25;
}

/* --- Arrière-plan SVG avec formes colorées --- */
.section-illustration__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* SVG avec les 3 formes - couleurs encodées via CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 453.845 538.073'%3E%3Cpath d='M129.45,156.023h0C57.956,156.023,0,86.169,0,0H129.45C200.944,0,258.9,69.854,258.9,156.023Z' transform='translate(193.554 279.171) rotate(90)' fill='%2378cd65' opacity='0.25'/%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 281.538) rotate(-90)' fill='%23ffc0b1'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(193.437 465.721) rotate(-90)' fill='%23fd9502' opacity='0.25'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Conteneur des images --- */
.section-illustration__images {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* --- Style commun des images rondes --- */
.section-illustration__img {
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
    /* === AJUSTER: Épaisseur de la bordure blanche === */
    border: 5px solid #ffffff;
    box-shadow: var(--gacf-shadow-md);
}

/* --- Image 1 (haut gauche - la plus petite) --- */
.section-illustration__img--1 {
    /* === AJUSTER: Taille de l'image 1 === */
    width: 140px;
    height: 140px;
    /* === AJUSTER: Position de l'image 1 === */
    top: 5%;
    left: 5%;
}

/* --- Image 2 (droite, un peu en bas - la plus grosse) --- */
.section-illustration__img--2 {
    /* === AJUSTER: Taille de l'image 2 === */
    width: 200px;
    height: 200px;
    /* === AJUSTER: Position de l'image 2 === */
    top: 15%;
    right: 0;
}

/* --- Image 3 (bas centre - taille moyenne) --- */
.section-illustration__img--3 {
    /* === AJUSTER: Taille de l'image 3 === */
    width: 170px;
    height: 170px;
    /* === AJUSTER: Position de l'image 3 === */
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

/* === VARIANTES DE COULEURS (selon le service) ===
   Utilisation: <div class="section-illustration section-illustration--cafeteria">
*/

.section-illustration--itmav {
    --illus-color-1: var(--gacf-service-itmav);
    --illus-color-2: #ffc0b1;
    --illus-color-3: var(--gacf-primary);
}

.section-illustration--atb {
    --illus-color-1: var(--gacf-service-atb);
    --illus-color-2: #b1d4ff;
    --illus-color-3: var(--gacf-primary);
}

.section-illustration--cafeteria {
    --illus-color-1: var(--gacf-service-cafeteria);
    --illus-color-2: #ffe0b1;
    --illus-color-3: var(--gacf-primary);
}

.section-illustration--centre-dj {
    --illus-color-1: var(--gacf-service-centre-dj);
    --illus-color-2: #ffb1b1;
    --illus-color-3: var(--gacf-primary);
}

/* --- Responsive --- */
@media (max-width: 576px) {
    .section-illustration {
        /* === AJUSTER: Taille mobile === */
        width: 300px;
        height: 340px;
        margin: 0 auto;
    }

    .section-illustration__img--1 {
        width: 130px;
        height: 130px;
        top: 0;
        left: 5%;
    }

    .section-illustration__img--2 {
        width: 165px;
        height: 165px;
        top: 5%;
        right: 0;
    }

    .section-illustration__img--3 {
        width: 145px;
        height: 145px;
        bottom: 5%;
    }
}

/* ============================================
   F.2) SECTION ILLUSTRATION - Version 2 images
   ============================================ 
   
   Variante avec 2 images rondes et un SVG différent.
   Image 1: Grande, centre-droite
   Image 2: Plus petite, bas-gauche
   
   Structure HTML:
   <div class="section-illustration-2">
     <div class="section-illustration-2__bg"></div>
     <div class="section-illustration-2__images">
       <img src="..." class="section-illustration-2__img section-illustration-2__img--1">
       <img src="..." class="section-illustration-2__img section-illustration-2__img--2">
     </div>
   </div>
*/

.section-illustration-2 {
    position: relative;
    /* === AJUSTER: Largeur du conteneur === */
    width: 460px;
    max-width: 100%;
    /* === AJUSTER: Hauteur du conteneur === */
    height: 460px;
}

/* --- Arrière-plan SVG (2 formes, couleur dynamique via CSS variable) --- */
.section-illustration-2__bg {
    --illustration-color: var(--gacf-primary);
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23687aac'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23687aac' opacity='0.41'/%3E%3C/svg%3E");
}

/* Couleurs spécifiques des services */
.section-illustration-2__bg--itmav {
    --illustration-color: #687aac;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23687aac'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23687aac' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--atb {
    --illustration-color: #5a7bc7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%235a7bc7'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%235a7bc7' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--cafetaria {
    --illustration-color: #ffc04d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23ffc04d'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23ffc04d' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--soutien-ali {
    --illustration-color: #fdd380;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23fdd380'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23fdd380' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--centre-dj {
    --illustration-color: #ff7a5c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23ff7a5c'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23ff7a5c' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--pret-equip {
    --illustration-color: #c3d4ee;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23c3d4ee'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23c3d4ee' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--prepose-dom {
    --illustration-color: #6ee3e5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%236ee3e5'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%236ee3e5' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--comptoir-com {
    --illustration-color: #9ddb8f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%239ddb8f'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%239ddb8f' opacity='0.41'/%3E%3C/svg%3E");
}

.section-illustration-2__bg--benevolat {
    --illustration-color: #ff7a5c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.647 528.11'%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 274.733) rotate(-90)' fill='%23ff7a5c'/%3E%3Cpath d='M232.86,260.408h0C104.254,260.408,0,143.819,0,0V0H232.86C361.465,0,465.721,116.589,465.721,260.408Z' transform='translate(118.636 434.788) rotate(-69)' fill='%23ff7a5c' opacity='0.41'/%3E%3C/svg%3E");
}

/* --- Conteneur des images --- */
.section-illustration-2__images {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* --- Style commun des images rondes --- */
.section-illustration-2__img {
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
    /* === AJUSTER: Épaisseur de la bordure blanche === */
    border: 6px solid #ffffff;
    box-shadow: var(--gacf-shadow-md);
}

/* --- Image 1 (grande, centre-droite) --- */
.section-illustration-2__img--1 {
    /* === AJUSTER: Taille de l'image 1 === */
    width: 280px;
    height: 280px;
    /* === AJUSTER: Position de l'image 1 === */
    top: 5%;
    right: 0;
}

/* --- Image 2 (plus petite, bas-gauche) --- */
.section-illustration-2__img--2 {
    /* === AJUSTER: Taille de l'image 2 === */
    width: 200px;
    height: 200px;
    /* === AJUSTER: Position de l'image 2 === */
    bottom: 8%;
    left: 5%;
}

/* --- Responsive version 2 images --- */
@media (max-width: 576px) {
    .section-illustration-2 {
        width: 100%;
        height: 380px;
    }

    .section-illustration-2__img--1 {
        width: 180px;
        height: 180px;
    }

    .section-illustration-2__img--2 {
        width: 140px;
        height: 140px;
    }
}

/* ============================================
   F.3) SECTION ILLUSTRATION - Version 1 image
   ============================================ 
   
   Variante avec 1 seule image ronde et 2 formes SVG.
   
   Structure HTML:
   <div class="section-illustration-1">
     <div class="section-illustration-1__bg"></div>
     <img src="..." class="section-illustration-1__img">
   </div>
*/

.section-illustration-1 {
    position: relative;
    /* === AJUSTER: Largeur du conteneur === */
    width: 340px;
    max-width: 100%;
    /* === AJUSTER: Hauteur du conteneur === */
    height: 310px;
}

/* --- Arrière-plan SVG (2 formes: gris-bleu et pêche) --- */
.section-illustration-1__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 385.844 354.92'%3E%3Cpath d='M140.807,192.581h0C63.041,192.581,0,106.359,0,0H140.807c77.766,0,140.808,86.221,140.808,192.581Z' transform='translate(193.264 354.92) rotate(-90)' fill='%23a8b3cf'/%3E%3Cpath d='M124.3,0h0C55.653,0,0,86.527,0,193.262H124.3c68.652,0,124.305-86.527,124.305-193.263Z' transform='translate(0 248.609) rotate(-90)' fill='%23ffc095'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- Image unique (centrée sur les formes) --- */
.section-illustration-1__img {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    object-fit: cover;
    /* === AJUSTER: Épaisseur de la bordure blanche === */
    border: 6px solid #ffffff;
    box-shadow: var(--gacf-shadow-md);
    /* === AJUSTER: Taille de l'image === */
    width: 220px;
    height: 220px;
    /* === AJUSTER: Position de l'image === */
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

/* --- Responsive version 1 image --- */
@media (max-width: 576px) {
    .section-illustration-1 {
        width: 100%;
        height: 280px;
    }

    .section-illustration-1__img {
        width: 160px;
        height: 160px;
    }
}

/* ============================================
   G) EN-TÊTE DE SERVICE (Service Header)
   ============================================ 
   
   En-tête pour les pages de services avec:
   - Titre à gauche avec ligne décorative
   - Illustration 2 images à droite
   
   Structure HTML:
   <section class="service-header">
     <div class="container">
       <div class="service-header__content">
         <div class="service-header__text">
           <h1 class="service-header__title title-decorated">Titre du service</h1>
           <p class="service-header__subtitle">Description optionnelle</p>
         </div>
         <div class="service-header__illustration">
           <div class="section-illustration-2">
             <div class="section-illustration-2__bg"></div>
             <div class="section-illustration-2__images">
               <img src="..." class="section-illustration-2__img section-illustration-2__img--1">
               <img src="..." class="section-illustration-2__img section-illustration-2__img--2">
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>
*/

.service-header {
    /* === AJUSTER: Padding vertical === */
    padding: var(--gacf-space-5) 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* Utilise .container Bootstrap pour la largeur max */
.service-header__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--gacf-space-4), 6vw, var(--gacf-space-6));
}

/* --- Partie texte (gauche) --- */
.service-header__text {
    flex: 0 1 auto;
    /* === AJUSTER: Largeur max du texte === */
    max-width: 500px;
}

.service-header__title {
    margin-bottom: var(--gacf-space-3);
}

.service-header__subtitle {
    color: var(--gacf-primary);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Partie illustration (droite) --- */
.service-header__illustration {
    flex: 0 0 auto;
    /* === AJUSTER: Taille de l'illustration === */
    width: 400px;
    height: 400px;
    /* Centre l'illustration dans sa zone */
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-header__illustration .section-illustration-2 {
    width: 100%;
    height: 100%;
}

/* --- Responsive en-tête service --- */
@media (max-width: 991px) {
    .service-header__content {
        flex-direction: column;
        gap: var(--gacf-space-3);
    }

    .service-header__text {
        max-width: 100%;
    }

    .service-header__illustration {
        width: 100%;
        max-width: 400px;
        height: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .service-header {
        padding: var(--gacf-space-4) 0;
    }

    .service-header__content {
        gap: var(--gacf-space-2);
    }

    .service-header__illustration {
        max-width: 300px;
        height: 280px;
    }

    .service-header__subtitle {
        font-size: 1rem;
    }
}

/* ============================================
   SERVICE BUTTONS (Publications/Téléchargements)
   Boutons dans la description du service
   ============================================ */

.service-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.service-buttons .btn-gacf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.service-buttons .btn-gacf--small {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}

.service-buttons .btn-gacf--no-arrow::after {
    display: none;
}

/* Style spécifique pour les boutons de téléchargement */
.service-buttons .btn-gacf--small.btn-gacf--no-arrow {
    background-color: var(--gacf-primary);
    color: #ffffff;
    border: 2px solid var(--gacf-primary);
}

.service-buttons .btn-gacf--small.btn-gacf--no-arrow:hover {
    background-color: #2a3a5c;
    border-color: #2a3a5c;
    transform: translateY(-2px);
}

/* Style pour les boutons de redirection (outline) */
.service-buttons .btn-gacf--outline {
    background-color: transparent;
    color: var(--gacf-primary);
    border: 2px solid var(--gacf-primary);
}

.service-buttons .btn-gacf--outline:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
}

@media (max-width: 576px) {
    .service-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .service-buttons .btn-gacf {
        width: 100%;
    }
}

/* ============================================
   H) FAQ ACCORDÉON
   ============================================ 
   
   Composant accordéon pour la foire aux questions.
   Utilise <details> et <summary> natifs HTML pour l'accessibilité.
   
   Structure HTML:
   <div class="faq">
     <details class="faq__item">
       <summary class="faq__question">Question ici ?</summary>
       <div class="faq__answer">
         <p>Réponse ici...</p>
       </div>
     </details>
   </div>
*/

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--gacf-space-2);
}

.faq__item {
    background-color: #ffffff;
    border-radius: var(--gacf-radius-md);
    box-shadow: var(--gacf-shadow-sm);
    overflow: hidden;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.faq__item[open] {
    background-color: #eef2fb;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gacf-space-3) var(--gacf-space-4);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--gacf-primary);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--gacf-transition);
}

/* Retirer le marker par défaut de <summary> */
.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::marker {
    display: none;
    content: "";
}

/* Icône flèche à droite */
.faq__question-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: var(--gacf-space-3);
    transition: transform var(--gacf-duration) var(--gacf-ease);
    color: var(--gacf-text-muted);
}

.faq__question-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Flèche tournée vers le haut quand ouvert */
.faq__item[open] .faq__question-icon {
    transform: rotate(180deg);
}

.faq__question:hover {
    background-color: var(--gacf-bg-light);
}

/* HR gris sous la question (visible seulement quand ouvert) */
.faq__hr {
    display: block;
    margin: 0 var(--gacf-space-4);
    border: none;
    height: 1px;
    background-color: var(--gacf-border);
}

/* Réponse avec transition fluide */
.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faq__item[open] .faq__answer {
    grid-template-rows: 1fr;
}

.faq__answer-content {
    overflow: hidden;
    padding: 0 var(--gacf-space-4);
    color: var(--gacf-text-muted);
    line-height: 1.7;
}

.faq__item[open] .faq__answer-content {
    padding-bottom: var(--gacf-space-4);
}

.faq__answer-content p:last-child {
    margin-bottom: 0;
}

/* --- Responsive FAQ --- */
@media (max-width: 576px) {
    .faq__question {
        padding: var(--gacf-space-3);
        font-size: 1rem;
    }

    .faq__hr {
        margin: 0 var(--gacf-space-3);
    }

    .faq__answer-content {
        padding: 0 var(--gacf-space-3);
    }

    .faq__item[open] .faq__answer-content {
        padding-bottom: var(--gacf-space-3);
    }
}

/* ============================================
   I) CARTE INTERVENANT
   ============================================ */

.intervenant-card {
    background-color: #ffffff;
    border-radius: var(--gacf-radius-lg);
    border: 0.6px solid #d0d0d0;
    padding: var(--gacf-space-4);
}

.intervenant-card__photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.intervenant-card__quote {
    color: var(--gacf-text-muted);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: var(--gacf-space-3);
}

.intervenant-card__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gacf-primary);
    font-weight: 600;
    text-decoration: underline;
}

.intervenant-card__phone svg {
    flex-shrink: 0;
}

.intervenant-card__phone:hover {
    color: var(--gacf-primary-dark);
}

/* ============================================
   J) CARTE EXEMPLE DE SITUATION (Aside)
   ============================================ */

.situation-card {
    --situation-color: var(--gacf-primary);
    background-color: var(--situation-color);
    border-radius: var(--gacf-radius-lg);
    color: #ffffff;
    padding: 30px;
    font-family: "Mulish", sans-serif;
    font-size: 1.125rem;
    /* 18px */
}

.situation-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--gacf-radius-md);
    border: 4px solid #ffffff;
    margin-bottom: var(--gacf-space-3);
}

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

.situation-card__label {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: var(--gacf-space-1);
}

.situation-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--gacf-space-3);
}

.situation-card__text {
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 0;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .situation-card {
        margin-top: var(--gacf-space-4);
    }
}

/* ============================================
   K) SECTION SERVICE - DÉTAILS (Offrons & Bénéficier)
   ============================================ */

/* --- Section avec fond coloré et courbe concave en haut --- */
.service-details {
    padding: var(--gacf-space-6) 0;
    padding-top: calc(var(--gacf-space-6) + 140px);
    /* Plus d'espace pour la courbe + marge titre */
    position: relative;
    margin-top: 0;
    /* Remonte pour compenser l'espace de la courbe */
    overflow: hidden;
    /* Évite tout débordement */
}

/* Courbe concave (vers l'intérieur) en haut - plus prononcée et professionnelle */
.service-details::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    /* Plus large pour une courbe plus douce */
    height: 160px;
    /* Plus haute pour effet plus prononcé */
    background-color: #ffffff;
    border-radius: 0 0 50% 50%;
    pointer-events: none;
}

.service-details__header {
    margin-bottom: var(--gacf-space-5);
    /* Plus d'espace après le header */
    position: relative;
    z-index: 1;
}

.service-details__title {
    margin-bottom: var(--gacf-space-1);
}

.service-details__subtitle {
    font-size: 1rem;
    color: var(--gacf-primary);
    margin-bottom: 0;
}

/* --- Bloc blanc "Ce que nous offrons" --- */
.offrons-card {
    background-color: #ffffff;
    border-radius: var(--gacf-radius-lg);
    padding: var(--gacf-space-4);
    height: 100%;
}

.offrons-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: var(--gacf-space-3);
}

/* --- Contenu WYSIWYG --- */
.offrons-card__content {
    font-size: 1.125rem;
    line-height: 1.6;
}

.offrons-card__content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offrons-card__content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--gacf-space-3);
}

.offrons-card__content li:last-child {
    margin-bottom: 0;
}

.offrons-card__content li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--gacf-primary);
    font-weight: 700;
}

.offrons-card__content p:last-child {
    margin-bottom: 0;
}

/* --- Bloc blanc "Comment en bénéficier" --- */
.beneficier-card {
    background-color: #ffffff;
    border-radius: var(--gacf-radius-lg);
    padding: var(--gacf-space-4);
    height: 100%;
}

.beneficier-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: var(--gacf-space-3);
}

.beneficier-card__steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Ligne grise entre les étapes */
.beneficier-step+.beneficier-step {
    padding-top: var(--gacf-space-3);
    border-top: 1px solid #dee2e6;
    margin-top: var(--gacf-space-3);
}

/* --- Étape individuelle --- */
.beneficier-step {
    display: flex;
    align-items: flex-start;
    gap: var(--gacf-space-3);
}

.beneficier-step__number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--gacf-primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.beneficier-step__content {
    flex: 1;
    padding-top: 4px;
}

.beneficier-step__text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Séparateur entre les étapes --- */
.beneficier-step__separator {
    display: flex;
    align-items: stretch;
    gap: var(--gacf-space-3);
    padding: 0;
}

.beneficier-step__separator-line {
    width: 32px;
    display: flex;
    justify-content: center;
}

.beneficier-step__separator-line::after {
    content: "";
    width: 2px;
    height: 100%;
    min-height: 20px;
    background-color: var(--gacf-primary);
}

.beneficier-step__separator-spacer {
    flex: 1;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 8px;
}

/* ============================================
   L) SECTION SERVICE - INFOS PRATIQUES (Pour qui, Où, Quand)
   ============================================ */

.service-infos {
    padding: var(--gacf-space-5) 0 var(--gacf-space-6);
}

.service-infos__header {
    margin-bottom: var(--gacf-space-4);
}

.service-infos__title {
    margin-bottom: var(--gacf-space-1);
}

.service-infos__subtitle {
    font-size: 1rem;
    color: var(--gacf-primary);
    margin-bottom: 0;
}

/* --- Bloc info individuel --- */
.info-card {
    background-color: #ffffff;
    border-radius: var(--gacf-radius-lg);
    padding: var(--gacf-space-4);
    height: 100%;
}

.info-card__header {
    display: flex;
    align-items: center;
    gap: var(--gacf-space-2);
    margin-bottom: var(--gacf-space-3);
}

.info-card__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.info-card__icon svg {
    width: 100%;
    height: 100%;
}

.info-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: 0;
}

.info-card__text {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 0;
}

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

    .offrons-card,
    .beneficier-card {
        margin-bottom: var(--gacf-space-4);
    }

    .info-card {
        margin-bottom: var(--gacf-space-3);
    }
}

/* ============================================
   M) FOOTER
   ============================================ */

/* ============================================
   N) SECTION FAQ & SERVICES LIÉS (Page Service)
   ============================================ */

.service-faq-section {
    padding: var(--gacf-space-6) 0;
    background-color: #ffffff;
}

.service-faq-section__title {
    margin-bottom: var(--gacf-space-4);
}

/* Services liés */
.related-services__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: var(--gacf-space-4);
}

.related-services__list {
    display: flex;
    gap: var(--gacf-space-4);
    flex-wrap: wrap;
}

.related-services__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gacf-space-2);
    text-decoration: none;
}

.related-services__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--gacf-duration) var(--gacf-ease);
    overflow: hidden;
}

.related-services__icon svg {
    width: 60px;
    height: 60px;
}

.related-services__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-services__item:hover .related-services__icon {
    transform: scale(1.1);
}

.related-services__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-primary);
    text-align: center;
    max-width: 120px;
    line-height: 1.3;
}

/* --- Responsive FAQ section --- */
@media (max-width: 991px) {
    .service-faq-section .row {
        flex-direction: column;
    }

    .related-services {
        margin-top: var(--gacf-space-5);
    }

    .related-services__list {
        justify-content: center;
    }
}

/* ============================================
   O) SECTION CONTACT / FORMULAIRE CTA
   ============================================ */

.service-contact-cta {
    background-color: var(--gacf-primary);
    border-radius: var(--gacf-radius-lg);
    padding: var(--gacf-space-5);
}

.service-contact-cta__title {
    color: #ffffff;
    font-size: clamp(1.375rem, 2vw + 0.5rem, 1.75rem);
    font-style: italic;
    font-weight: 700;
    margin-bottom: var(--gacf-space-3);
}

.service-contact-cta__text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--gacf-space-4);
}

.service-contact-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--gacf-space-2);
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--gacf-duration) var(--gacf-ease);
}

.service-contact-cta__phone:hover {
    opacity: 0.8;
    color: #ffffff;
}

.service-contact-cta__phone svg {
    flex-shrink: 0;
}

.service-contact-cta__form {
    display: flex;
    flex-direction: column;
    gap: var(--gacf-space-3);
}

.service-contact-cta__label {
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--gacf-space-1);
    display: block;
}

.service-contact-cta__input,
.service-contact-cta__textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: var(--gacf-radius-sm);
    font-family: "Mulish", sans-serif;
    font-size: 1rem;
}

.service-contact-cta__textarea {
    min-height: 120px;
    resize: vertical;
}

.service-contact-cta__input:focus,
.service-contact-cta__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Bouton avec icône blanc sur fond foncé */
.service-contact-cta .btn-gacf--icon {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.service-contact-cta .btn-gacf--icon:hover {
    background-color: #ffffff;
    color: var(--gacf-primary);
}

/* --- Responsive contact CTA --- */
@media (max-width: 991px) {
    .service-contact-cta {
        padding: var(--gacf-space-4);
    }

    .service-contact-cta__content {
        margin-bottom: var(--gacf-space-4);
    }
}

/* ============================================
   P) SECTION DEVENIR MEMBRE
   ============================================ */

.service-member-section {
    padding: var(--gacf-space-6) 0;
    background-color: #ffffff;
}

.service-member-section__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--gacf-space-4), 5vw, var(--gacf-space-5));
}

.service-member-section__text {
    flex: 0 1 auto;
    max-width: 420px;
}

.service-member-section__title {
    margin-bottom: var(--gacf-space-3);
}

.service-member-section__desc {
    color: var(--gacf-text);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: var(--gacf-space-4);
}

.service-member-section__illustration {
    flex: 0 0 auto;
    width: 340px;
    height: 310px;
}

/* --- Responsive membre section --- */
@media (max-width: 991px) {
    .service-member-section__content {
        flex-direction: column;
        text-align: center;
    }

    .service-member-section__text {
        max-width: 100%;
    }

    .service-member-section__illustration {
        width: 100%;
        max-width: 320px;
        height: 300px;
    }
}

@media (max-width: 576px) {
    .service-member-section {
        padding: var(--gacf-space-5) 0;
    }

    .service-member-section__illustration {
        max-width: 280px;
        height: 260px;
    }
}

.site-footer {
    background-color: var(--gacf-primary) !important;
    margin-top: var(--gacf-space-5);
}

.site-footer h4 {
    color: #ffffff;
}

/* Titre souligné */
.footer-title-underline {
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-underline-offset: 5px;
}

/* Carte Google Maps */
.footer-map {
    border: 5px solid #ffffff;
    border-top-right-radius: 50px;
    min-height: 350px;
}

/* Footer Nav - Menu dynamique */
.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    display: inline-flex;
    align-items: center;
    list-style: none;
}

.footer-nav li a {
    color: #fff !important;
    text-decoration: none;
    transition: opacity var(--gacf-duration) var(--gacf-ease);
}

.footer-nav li a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.footer-nav li:not(:last-child)::after {
    content: "•";
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.75rem;
}

/* Footer bouton Facebook */
.site-footer .btn-light {
    color: var(--gacf-primary);
    font-weight: 600;
}

.site-footer .btn-light:hover {
    background-color: #f8f9fa;
}

/* Responsive Footer */
@media (max-width: 991.98px) {
    .footer-map {
        border-top-right-radius: 0;
        min-height: 250px;
    }
}

@media (max-width: 767.98px) {
    .site-footer p {
        justify-content: center;
    }
}

/* ============================================
   Q) PAGE HEADER HERO (En-tête réutilisable)
   ============================================ */

.page-hero {
    position: relative;
    padding: var(--gacf-space-6) 0 calc(var(--gacf-space-6) + 80px);
    background-color: rgba(158, 179, 255, 0.16);
    overflow: hidden;
}

/* Contenu */
.page-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--gacf-space-4), 5vw, var(--gacf-space-6));
}

.page-hero__text {
    flex: 0 1 auto;
    max-width: 500px;
}

.page-hero__title {
    margin-bottom: var(--gacf-space-3);
}

.page-hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gacf-primary);
    margin-bottom: 0;
}

/* Image avec décoration */
.page-hero__image-wrapper {
    position: relative;
    flex: 0 0 auto;
    width: 480px;
    max-width: 100%;
    padding-top: 60px;
    padding-right: 60px;
}

/* Décoration SVG derrière l'image - plus grosse et plus haute */
.page-hero__decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.page-hero__decoration svg {
    width: 100%;
    height: auto;
}

.page-hero__image {
    position: relative;
    z-index: 1;
    border-radius: var(--gacf-radius-lg);
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: var(--gacf-shadow-md);
    aspect-ratio: 16 / 9;
}

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

/* Forme courbe CSS en bas de la section */
.page-hero__curve {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 120px;
    background-color: #ffffff;
    border-radius: 100% 100% 0 0;
    z-index: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .page-hero__content {
        flex-direction: column;
        text-align: center;
    }

    .page-hero__image-wrapper {
        width: 100%;
        max-width: 500px;
        padding-top: 50px;
        padding-right: 40px;
    }

    .page-hero__decoration {
        width: 200px;
    }

    .page-hero__curve {
        height: 80px;
    }
}

@media (max-width: 576px) {
    .page-hero {
        padding: var(--gacf-space-4) 0 var(--gacf-space-4);
    }

    .page-hero__image-wrapper {
        padding-top: 40px;
        padding-right: 35px;
    }

    .page-hero__decoration {
        width: 180px;
    }

    .page-hero__curve {
        height: 50px;
    }
}

/* ============================================
   SINGLE EVENT/ACTIVITÉ - INFOS EMPILÉES MOBILE
   ============================================ */
/* Empiler les informations sur mobile */
@media (max-width: 767px) {

    /* Infos de la sidebar empilées */
    .card-body .row.g-4>.col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Réduire les icônes sur mobile */
    .card-body .row.g-4 svg[width="50"] {
        width: 45px;
        height: 45px;
    }
}

/* ============================================
   R) SECTION MOT DE LA PRÉSIDENTE
   ============================================ */

.president-section {
    padding: var(--gacf-space-7) 0;
    background-color: #ffffff;
}

.president-section__header {
    margin-bottom: var(--gacf-space-5);
}

.president-section__title {
    margin-bottom: var(--gacf-space-2);
}

.president-section__subtitle {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--gacf-primary);
    line-height: 1.6;
}

.president-section__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--gacf-space-4), 5vw, var(--gacf-space-6));
}

.president-section__illustration {
    flex: 0 0 auto;
    width: 340px;
    height: 310px;
}

.president-section__info {
    flex: 0 1 auto;
    max-width: 480px;
}

.president-section__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: var(--gacf-space-1);
}

.president-section__role {
    font-size: 1rem;
    color: var(--gacf-muted);
    margin-bottom: var(--gacf-space-3);
}

.president-section__bio {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--gacf-text);
}

.president-section__bio strong {
    color: var(--gacf-primary);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 991px) {
    .president-section__content {
        flex-direction: column;
        text-align: center;
    }

    .president-section__illustration {
        order: -1;
    }
}

@media (max-width: 576px) {
    .president-section {
        padding: var(--gacf-space-5) 0;
    }

    .president-section__illustration {
        width: 280px;
        height: 260px;
    }
}

/* ========================================
   Mot de la direction: image à droite + espace sous la section
======================================== */

.president-section--direction .president-section__content {
    display: flex;
    /* au cas où, mais tu l'as déjà */
    flex-direction: row-reverse;
    /* ✅ inverse: image à droite */
    gap: 40px;
    /* optionnel: un peu plus d'air */
}

/* ✅ Séparer “Mot de la direction” du contenu en dessous */
.president-section--direction {
    margin-bottom: 0px;
}

/* Responsive: sur mobile, on repasse en colonne (propre) */
@media (max-width: 991px) {
    .president-section--direction .president-section__content {
        flex-direction: column;
        /* image au-dessus du texte sur mobile */
        gap: 20px;
    }

    .president-section--direction {
        margin-bottom: 0px;
        padding-bottom: 20px;
    }
}

/* Variante: Mot de la direction (fond gris doux pour alterner avec la présidence) */
.president-section--direction {
    background-color: #f8f9fa;
}

/* ============================================
   S) SECTION ORGANISATION (Équipe + CA)
   ============================================ */

.organization-section {
    padding: var(--gacf-space-8) 0 var(--gacf-space-9);
    background-color: #f8f9fa;
}

.organization-section__header {
    text-align: center;
    margin-bottom: var(--gacf-space-5);
}

.organization-section__title {
    margin-bottom: var(--gacf-space-2);
}

.organization-section__subtitle {
    font-size: 1.125rem;
    color: var(--gacf-primary);
}

/* ===== ONGLETS TEAM TABS ===== */
.team-tabs {
    display: flex;
    justify-content: center;
    gap: var(--gacf-space-3);
    margin-bottom: var(--gacf-space-5);
}

.team-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-family: "Quicksand", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-text);
    background-color: #ffffff;
    border: 2px solid rgba(20, 28, 56, 0.1);
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--gacf-duration) var(--gacf-ease);
}

.team-tab:hover {
    border-color: var(--gacf-primary);
    color: var(--gacf-primary);
}

.team-tab.active {
    background-color: var(--gacf-primary);
    border-color: var(--gacf-primary);
    color: #ffffff;
}

.team-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    background-color: rgba(20, 28, 56, 0.08);
    border-radius: 50px;
    transition: all var(--gacf-duration) var(--gacf-ease);
}

.team-tab.active .team-tab-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* ===== PANELS ===== */
.team-panels {
    max-width: 1000px;
    margin: 0 auto;
}

.team-panel {
    display: none;
}

.team-panel.active {
    display: block;
    animation: fadeInPanel 0.3s ease;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ===== SMALL TEAM CONTAINER (Grille + Détail) ===== */
.small-team-container {
    display: flex;
    align-items: flex-start;
    gap: var(--gacf-space-5);
    background-color: #ffffff;
    border-radius: var(--gacf-radius-xl);
    padding: var(--gacf-space-5);
    box-shadow: 0 4px 24px rgba(20, 28, 56, 0.08);
}

/* ===== GRILLE DES MINIATURES (Gauche) ===== */
.small-team-thumbs-wrapper {
    flex: 0 0 420px;
    position: relative;
}

.small-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gacf-space-3);
    width: 100%;
}

/* Flèches de navigation (cachées par défaut, visibles en responsive) */
.small-team-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid var(--gacf-primary);
    color: var(--gacf-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(20, 28, 56, 0.15);
    transition: all var(--gacf-duration) var(--gacf-ease);
}

.small-team-arrow:hover {
    background-color: rgba(34, 49, 94, 0.12);
    color: var(--gacf-primary);
    border-color: var(--gacf-primary);
    transform: translateY(-50%) scale(1.05);
}

.small-team-arrow:active {
    background-color: rgba(34, 49, 94, 0.2);
    transform: translateY(-50%) scale(1);
}

.small-team-arrow--prev {
    left: -20px;
}

.small-team-arrow--next {
    right: -20px;
}

.small-team-arrow svg {
    width: 20px;
    height: 20px;
}

/* Miniature individuelle - PLUS GROSSE */
.small-team-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--gacf-space-3);
    border-radius: var(--gacf-radius-md);
    cursor: pointer;
    transition: all var(--gacf-duration) var(--gacf-ease);
    text-align: center;
}

.small-team-thumb:hover {
    background-color: rgba(20, 28, 56, 0.03);
}

.small-team-thumb.active {
    background-color: rgba(63, 104, 230, 0.08);
}

/* Photo miniature plus grosse */
.small-team-thumb-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid transparent;
    margin-bottom: var(--gacf-space-2);
    transition: all var(--gacf-duration) var(--gacf-ease);
    background-color: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quand c'est un SVG (pas de photo), retirer le fond et la bordure */
.small-team-thumb-img:has(svg) {
    background-color: transparent;
    border-color: transparent;
}

.small-team-thumb:hover .small-team-thumb-img:has(svg),
.small-team-thumb.active .small-team-thumb-img:has(svg) {
    border-color: transparent;
    box-shadow: none;
}

.small-team-thumb:hover .small-team-thumb-img,
.small-team-thumb.active .small-team-thumb-img {
    border-color: var(--gacf-primary);
}

.small-team-thumb.active .small-team-thumb-img {
    box-shadow: 0 0 0 4px rgba(63, 104, 230, 0.2);
}

.small-team-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SVG avatar anonyme pour miniature sans photo */
.small-team-thumb-img svg {
    width: 50px;
    height: 50px;
    opacity: 0.4;
}

/* Texte miniature plus lisible */
.small-team-thumb-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gacf-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.small-team-thumb-role {
    display: block;
    font-size: 0.75rem;
    color: #5a6169;
    line-height: 1.3;
}

/* ===== DÉTAIL MEMBRE (Droite) ===== */
.small-team-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: var(--gacf-space-5);
    background: linear-gradient(135deg, rgba(63, 104, 230, 0.04) 0%, rgba(20, 28, 56, 0.02) 100%);
    border-radius: var(--gacf-radius-lg);
    min-height: 420px;
    transition: opacity 0.2s ease;
}

.small-team-detail.fade-out {
    opacity: 0;
}

/* Photo détail */
.small-team-detail-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--gacf-primary);
    box-shadow: 0 8px 24px rgba(20, 28, 56, 0.2);
    margin-bottom: var(--gacf-space-4);
    background-color: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quand c'est un SVG (pas de photo), retirer le fond et la bordure */
.small-team-detail-img:has(svg) {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.small-team-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SVG avatar anonyme pour membre sans photo */
.small-team-detail-img svg {
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

.small-team-detail-name {
    display: block;
    font-family: "Quicksand", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: var(--gacf-space-1);
}

.small-team-detail-role {
    display: block;
    font-size: 1rem;
    color: var(--gacf-secondary);
    font-weight: 500;
    margin-bottom: var(--gacf-space-3);
}

.small-team-detail-bio {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gacf-text);
    width: 100%;
    max-width: 360px;
    margin: 0;
    /* Hauteur pour 5 lignes de texte (5 × 1rem × 1.7 line-height ≈ 136px + marge) */
    min-height: 170px;
}

.small-team-detail-bio strong {
    color: var(--gacf-primary);
    font-weight: 600;
}

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

/* --- Tablette (≤ 991px) : empilement vertical, detail en haut, vignettes défilables en bas --- */
@media (max-width: 991px) {
    .organization-section {
        padding: var(--gacf-space-7) 0 var(--gacf-space-8);
    }

    .small-team-container {
        flex-direction: column;
        align-items: stretch;
        padding: var(--gacf-space-4);
        max-width: 560px;
        margin: 0 auto;
    }

    /* Détail en haut */
    .small-team-detail {
        order: 1;
        width: 100%;
        min-height: auto;
        padding: var(--gacf-space-4);
    }

    .small-team-detail-bio {
        height: auto;
        min-height: 0;
        max-width: 100%;
    }

    /* Vignettes en bas */
    .small-team-thumbs-wrapper {
        flex: none;
        width: 100%;
        order: 2;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: var(--gacf-space-3);
        padding: 0 0.25rem;
    }

    /* Afficher les flèches */
    .small-team-arrow {
        display: flex;
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .small-team-arrow:hover {
        transform: scale(1.05);
    }

    .small-team-arrow:active {
        transform: scale(1);
    }

    /* Bande défilable horizontale */
    .small-team-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--gacf-space-2);
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: var(--gacf-space-2) 0;
        flex: 1;
        min-width: 0;
    }

    .small-team-grid::-webkit-scrollbar {
        display: none;
    }

    .small-team-thumb {
        flex: 0 0 auto;
        min-width: 90px;
        max-width: 100px;
        padding: var(--gacf-space-2);
    }

    .small-team-thumb-img {
        width: 72px;
        height: 72px;
    }

    .small-team-thumb-img svg {
        width: 40px;
        height: 40px;
    }

    .small-team-thumb-name {
        font-size: 0.8125rem;
    }
}

/* --- Petite tablette (≤ 768px) --- */
@media (max-width: 768px) {
    .team-tabs {
        flex-direction: column;
        align-items: center;
        gap: var(--gacf-space-2);
    }

    .team-tab {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .small-team-thumb-img {
        width: 64px;
        height: 64px;
    }
}

/* --- Mobile (≤ 576px) : bande compacte avec défilement tactile --- */
@media (max-width: 576px) {
    .organization-section {
        padding: var(--gacf-space-6) 0 var(--gacf-space-7);
    }

    .small-team-container {
        padding: var(--gacf-space-3);
        max-width: 100%;
    }

    .small-team-thumbs-wrapper {
        padding: 0;
        margin-top: var(--gacf-space-3);
        gap: 0;
    }

    /* Garder les flèches visibles et fonctionnelles sur mobile aussi */
    .small-team-arrow {
        display: flex;
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .small-team-arrow svg {
        width: 16px;
        height: 16px;
    }

    /* Bande défilable — pas de wrap */
    .small-team-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--gacf-space-2);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        padding: var(--gacf-space-1) 0;
    }

    .small-team-thumb {
        flex: 0 0 auto;
        min-width: 72px;
        max-width: 80px;
        padding: var(--gacf-space-1);
        scroll-snap-align: center;
    }

    .small-team-thumb-img {
        width: 52px;
        height: 52px;
    }

    .small-team-thumb-img svg {
        width: 30px;
        height: 30px;
    }

    .small-team-thumb-name {
        font-size: 0.8125rem;
    }

    .small-team-thumb-role {
        display: none;
    }

    .small-team-detail {
        min-height: auto;
        padding: var(--gacf-space-3);
    }

    .small-team-detail-img {
        width: 110px;
        height: 110px;
    }

    .small-team-detail-img svg {
        width: 55px;
        height: 55px;
    }

    .small-team-detail-name {
        font-size: 1.25rem;
    }

    .small-team-detail-bio {
        font-size: 0.9375rem;
        height: auto;
        min-height: 0;
    }
}

/* ============================================
   COMPOSANT UNIFIÉ : GRILLE SERVICES ICÔNES
   ============================================
   
   Composant réutilisable pour les grilles de services avec icônes.
   Utilisé dans : Accueil (Nos services) et Équipe & CA (Notre engagement)
   
   Structure HTML :
   <div class="service-icons-grid">
     <a href="#" class="service-icon-card">
       <div class="service-icon-card__icon">
         <img src="..." alt="...">
       </div>
       <span class="service-icon-card__name">Nom du service</span>
     </a>
   </div>
   
   Modificateurs :
   - .service-icons-grid--compact : grille plus étroite (460px)
   ============================================ */

.service-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gacf-space-4);
    width: 100%;
    max-width: 600px;
}

.service-icons-grid--compact {
    max-width: 460px;
}

.service-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform var(--gacf-duration) var(--gacf-ease);
    max-width: 120px;
    margin: 0 auto;
}

.service-icon-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: inherit;
}

.service-icon-card__icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gacf-space-2);
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.service-icon-card:hover .service-icon-card__icon {
    transform: scale(1.1);
}

.service-icon-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-icon-card__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gacf-text);
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive grille services unifiée */
@media (max-width: 1199px) {
    .service-icons-grid {
        max-width: 440px;
    }

    .service-icon-card__icon {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 991px) {
    .service-icons-grid {
        max-width: 480px;
        margin: 0 auto;
    }

    .service-icon-card__icon {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 576px) {
    .service-icons-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 240px;
    }

    .service-icon-card__icon {
        width: 70px;
        height: 70px;
    }

    .service-icon-card__name {
        font-size: 0.75rem;
    }
}

/* ============================================
   T) SECTION NOTRE ENGAGEMENT
   ============================================ */

.engagement-section {
    padding: var(--gacf-space-8) 0 var(--gacf-space-9);
    background-color: #ffffff;
}

.engagement-section__header {
    margin-bottom: var(--gacf-space-6);
}

.engagement-section__title {
    margin-bottom: var(--gacf-space-2);
}

.engagement-section__subtitle {
    font-size: 1.125rem;
    color: var(--gacf-primary);
}

.engagement-section__content {
    display: flex;
    align-items: flex-start;
    gap: var(--gacf-space-6);
}

/* Grille des icônes services (gauche) */
.engagement-services {
    flex: 0 0 auto;
    width: 460px;
}

.engagement-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gacf-space-4);
}

/* Icône service individuelle */
.engagement-service-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.engagement-service-icon:hover {
    transform: translateY(-4px);
}

.engagement-service-icon__img {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gacf-space-2);
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.engagement-service-icon:hover .engagement-service-icon__img {
    transform: scale(1.1);
}

.engagement-service-icon__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.engagement-service-icon__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gacf-text);
    line-height: 1.3;
    max-width: 100px;
}

/* Illustration 3 images (droite) */
.engagement-illustration {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Responsive engagement */
@media (max-width: 1199px) {
    .engagement-services {
        width: 440px;
    }

    .engagement-service-icon__img {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 991px) {
    .engagement-section__content {
        flex-direction: column;
    }

    .engagement-services {
        width: 100%;
        order: 2;
    }

    .engagement-illustration {
        order: 1;
        width: 100%;
        margin-bottom: var(--gacf-space-4);
    }

    .engagement-services__grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 480px;
        margin: 0 auto;
    }

    .engagement-service-icon__img {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 576px) {
    .engagement-section {
        padding: var(--gacf-space-5) 0 var(--gacf-space-6);
    }

    .engagement-services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gacf-space-4);
        max-width: 240px;
    }

    .engagement-service-icon__img {
        width: 70px;
        height: 70px;
    }

    .engagement-service-icon__name {
        font-size: 0.75rem;
    }
}

/* ============================================
   U) HERO ÉVÉNEMENT/ACTIVITÉ (Single Post)
   ============================================ 
   
   En-tête élégante pour les pages single événement/activité.
   Design cohérent avec page-hero mais adapté aux événements.
   - Fond bleu clair subtil
   - Titre H1 à gauche
   - Grande image à droite avec bordure et ombre
   - Courbe décorative en bas
   
   Structure HTML:
   <section class="single-event-hero">
     <div class="container">
       <div class="single-event-hero__content">
         <div class="single-event-hero__text">
           <h1 class="single-event-hero__title">Titre</h1>
         </div>
         <div class="single-event-hero__image-wrapper">
           <div class="single-event-hero__image">
             <img src="..." alt="...">
           </div>
         </div>
       </div>
     </div>
     <div class="single-event-hero__curve"></div>
   </section>
*/

.single-event-hero {
    position: relative;
    padding: var(--gacf-space-5) 0 calc(var(--gacf-space-5) + 60px);
    background-color: rgba(158, 179, 255, 0.12);
    overflow: hidden;
}

.single-event-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gacf-space-5);
}

/* --- Partie texte (gauche) --- */
.single-event-hero__text {
    flex: 0 1 auto;
    max-width: 420px;
}

.single-event-hero__title {
    font-family: "Quicksand", sans-serif;
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.25rem);
    font-weight: 700;
    color: var(--gacf-primary);
    line-height: 1.25;
    margin-bottom: 0;
}

/* --- Partie image (droite) --- */
.single-event-hero__image-wrapper {
    flex: 1 1 auto;
    max-width: 580px;
}

.single-event-hero__image {
    position: relative;
    border-radius: var(--gacf-radius-lg);
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: var(--gacf-shadow-lg);
    aspect-ratio: 16 / 9;
}

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

/* Courbe décorative en bas */
.single-event-hero__curve {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 80px;
    background-color: #ffffff;
    border-radius: 100% 100% 0 0;
    z-index: 0;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .single-event-hero__content {
        flex-direction: column;
        text-align: center;
        gap: var(--gacf-space-4);
    }

    .single-event-hero__text {
        max-width: 100%;
        order: 1;
    }

    .single-event-hero__image-wrapper {
        max-width: 100%;
        width: 100%;
        order: 2;
    }

    .single-event-hero__curve {
        height: 60px;
    }
}

@media (max-width: 576px) {
    .single-event-hero {
        padding: var(--gacf-space-4) 0 calc(var(--gacf-space-4) + 40px);
    }

    .single-event-hero__title {
        font-size: 1.5rem;
    }

    .single-event-hero__curve {
        height: 40px;
    }
}

/* ============================================
   CALENDRIER - DESIGN ÉPURÉ PLEINE LARGEUR
   ============================================ */

/* --- Header calendrier --- */
.cal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border-radius: var(--gacf-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cal-header__left {
    flex-shrink: 0;
}

.cal-header__center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-header__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.cal-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin: 0;
}

.cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f4f8;
    color: var(--gacf-dark);
    text-decoration: none;
    transition: all var(--gacf-duration) var(--gacf-ease);
    border: none;
}

.cal-nav-btn:hover {
    background-color: var(--gacf-primary);
    color: #fff;
}

.cal-today-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--gacf-primary);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    transition: all var(--gacf-duration) var(--gacf-ease);
}

.cal-today-btn:hover {
    background-color: var(--gacf-primary-dark, #004a7c);
    color: #fff;
    transform: translateY(-1px);
}

/* --- Légende --- */
.cal-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cal-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gacf-text);
}

.cal-legend__item--green .cal-legend__dot {
    background-color: #ffd166;
}

.cal-legend__item--blue .cal-legend__dot {
    background-color: #f0a0a0;
}

.cal-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* --- Filtres --- */
.cal-filter {
    display: flex;
    gap: 0.375rem;
    background-color: #f0f4f8;
    padding: 0.25rem;
    border-radius: 50px;
}

.cal-filter__btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gacf-text);
    background-color: transparent;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all var(--gacf-duration) var(--gacf-ease);
}

.cal-filter__btn:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.cal-filter__btn.active {
    background-color: #fff;
    color: var(--gacf-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cal-filter__btn--green.active {
    background-color: #ffd166;
    color: #141c38;
}

.cal-filter__btn--blue.active {
    background-color: #f0a0a0;
    color: #141c38;
}

/* --- Grille calendrier --- */
.cal-grid {
    background-color: #fff;
    border-radius: var(--gacf-radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
}

.cal-grid__header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background-color: var(--gacf-primary);
}

.cal-grid__weekday {
    padding: 1rem 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
}

.cal-grid__body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* --- Jour dans la grille --- */
.cal-day {
    min-height: 120px;
    padding: 0.5rem;
    border-right: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
    position: relative;
}

.cal-day:nth-child(7n) {
    border-right: none;
}

.cal-day--empty {
    background-color: #f8f9fa;
}

.cal-day--today {
    background-color: rgba(0, 91, 154, 0.05);
}

.cal-day__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gacf-dark);
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.cal-day__number--today {
    background-color: var(--gacf-primary);
    color: #fff;
    font-weight: 700;
}

.cal-day__events {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-day__more {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gacf-primary);
    padding: 0.25rem;
    text-align: center;
    margin-top: 0.25rem;
}

/* --- Événement dans grille --- */
.cal-event {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.3;
    transition: all var(--gacf-duration) var(--gacf-ease);
    position: relative;
    z-index: 1;
    background-color: #e9ecef;
    color: #141c38;
}

.cal-event:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.cal-event--blue {
    background-color: #f0a0a0;
    color: #141c38;
}

.cal-event--green {
    background-color: #ffd166;
    color: #141c38;
}

/* Teintes variées pour plusieurs items sur une même date */
.cal-event--blue:nth-child(2) {
    background-color: #e8b8b8;
}

.cal-event--blue:nth-child(3) {
    background-color: #f5c5c5;
}

.cal-event--blue:nth-child(4) {
    background-color: #f8d5d5;
}

.cal-event--green:nth-child(2) {
    background-color: #ffe08a;
}

.cal-event--green:nth-child(3) {
    background-color: #ffecb3;
}

.cal-event--green:nth-child(4) {
    background-color: #fff5d6;
}

.cal-event__time {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.9;
}

.cal-event__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* --- Liste mobile --- */
.cal-list {
    background-color: #fff;
    border-radius: var(--gacf-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 1.25rem;
}

.cal-list__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gacf-primary);
}

.cal-list__date {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 1rem 0 0.5rem;
    border-top: 1px solid #e9ecef;
    margin-top: 0.75rem;
}

.cal-list__date:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.cal-list__date-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-primary);
}

.cal-list__date-day {
    font-size: 0.875rem;
    color: var(--gacf-muted);
    text-transform: capitalize;
}

.cal-list__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    margin: 0.5rem 0;
    border-radius: var(--gacf-radius);
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all var(--gacf-duration) var(--gacf-ease);
    background-color: #f0f4f8;
    color: #141c38;
}

.cal-list__item--blue {
    background-color: #f0a0a0;
    color: #141c38;
}

.cal-list__item--green {
    background-color: #ffd166;
    color: #141c38;
}

.cal-list__item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cal-list__time {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 50px;
    opacity: 0.9;
}

.cal-list__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
}

.cal-list__item-title {
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-list__item-lieu {
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* Note: Les cartes du bas du calendrier utilisent les mêmes composants Bootstrap 
   que archive-evenement.php (.card, .situation-card) pour plus de cohérence */

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

/* Entre 992px et 1199px - taille intermédiaire */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .cal-day {
        min-height: 100px;
        padding: 0.375rem;
    }

    .cal-event {
        font-size: 0.8125rem;
        padding: 0.25rem 0.375rem;
    }

    .cal-event__time {
        display: none;
    }

    .cal-event__title {
        font-size: 0.8125rem;
    }

    .cal-day__number {
        width: 28px;
        height: 28px;
        font-size: 0.8125rem;
    }

    .cal-grid__weekday {
        font-size: 0.75rem;
        padding: 0.75rem 0.25rem;
    }
}

@media (max-width: 991.98px) {
    .cal-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .cal-header__left,
    .cal-header__center,
    .cal-header__right {
        justify-content: center;
    }

    .cal-header__right {
        flex-direction: column;
        gap: 1rem;
    }

    .cal-day {
        min-height: 90px;
        padding: 0.375rem;
    }

    .cal-event__time {
        display: none;
    }

    .cal-event {
        font-size: 0.8125rem;
        padding: 0.25rem 0.375rem;
    }

    .cal-event__title {
        font-size: 0.8125rem;
    }

    .cal-day__number {
        width: 26px;
        height: 26px;
        font-size: 0.8125rem;
    }

    .cal-grid__weekday {
        font-size: 0.8125rem;
        padding: 0.75rem 0.25rem;
    }

    .cal-grid {
        overflow-x: auto;
    }

    .cal-grid__header,
    .cal-grid__body {
        min-width: 600px;
    }
}

@media (max-width: 767.98px) {
    .cal-grid {
        display: none;
    }

    .cal-list {
        display: block !important;
    }

    .cal-legend {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .cal-header__title {
        font-size: 1.5rem;
        text-align: center;
    }

    .cal-filter {
        width: 100%;
        justify-content: center;
    }

    .cal-filter__btn {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* --- Modal calendrier --- */
.calendar-modal {
    border-radius: var(--gacf-radius-lg);
    overflow: hidden;
    border: none;
}

.calendar-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.calendar-modal__body {
    padding: 2rem;
}

.calendar-modal__badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-radius: 4px;
    margin-bottom: 1rem;
    background-color: #e9ecef;
    color: #141c38;
}

.calendar-modal__badge--blue {
    background-color: rgba(240, 160, 160, 0.3);
    color: #a05050;
}

.calendar-modal__badge--green {
    background-color: rgba(255, 209, 102, 0.3);
    color: #b38600;
}

.calendar-modal__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin-bottom: 1.5rem;
}

.calendar-modal__infos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .calendar-modal__infos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479.98px) {
    .calendar-modal__infos {
        grid-template-columns: 1fr;
    }
}

.calendar-modal__info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.calendar-modal__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(20, 28, 56, 0.1);
    color: #141c38;
    border-radius: var(--gacf-radius);
    flex-shrink: 0;
    font-size: 1.125rem;
}

.calendar-modal__info-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gacf-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

.calendar-modal__info-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gacf-dark);
}

.calendar-modal__desc {
    font-size: 0.9375rem;
    color: var(--gacf-text);
    line-height: 1.6;
}

.calendar-modal__divider {
    margin: 1.5rem 0;
    border-color: #e9ecef;
}

.calendar-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 575.98px) {
    .calendar-modal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-modal__actions .btn-gacf,
    .calendar-modal__actions .btn-gacf--link {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================
   VIE COMMUNAUTAIRE - SECTION ÉVÉNEMENTS/ACTIVITÉS
   ============================================ */
.community-events {
    background-color: transparent;
}

.community-card {
    display: block;
    position: relative;
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.community-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.community-card__image {
    position: absolute;
    inset: 0;
}

.community-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.community-card:hover .community-card__image img {
    transform: scale(1.05);
}

.community-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
    opacity: 0.5;
}

.community-card--activity .community-card__placeholder {
    background: linear-gradient(135deg, #ffd166 0%, #e6b84d 100%);
}

.community-card--event .community-card__placeholder {
    background: linear-gradient(135deg, #f0a0a0 0%, #d88888 100%);
}

.community-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 28, 56, 0.9) 0%, rgba(20, 28, 56, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}

.community-card__badge {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.community-card--activity .community-card__badge {
    background-color: #ffd166;
    color: var(--gacf-primary);
}

.community-card--event .community-card__badge {
    background-color: #f0a0a0;
    color: var(--gacf-primary);
}

.community-card__title {
    color: white;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* Responsive - mobile 2x2 */
@media (max-width: 991.98px) {
    .community-card {
        height: 220px;
    }

    .community-card__title {
        font-size: 1rem;
    }

    .community-card__badge {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }

    .community-card__overlay {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .community-card {
        height: 180px;
    }

    .community-card__title {
        font-size: 0.9rem;
    }
}

/* ============================================
   VIE COMMUNAUTAIRE - GALERIE IMAGES
   ============================================ */
.community-gallery {
    background-color: white;
    overflow: hidden;
}

.gallery-marquee {
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.gallery-marquee__track {
    display: flex;
    gap: 1rem;
    width: fit-content;
    animation: marquee-scroll 120s linear infinite;
    will-change: transform;
}

.gallery-marquee__track--reverse {
    animation: marquee-scroll-reverse 130s linear infinite;
}

/* Pause au survol de la galerie */
.gallery-marquee:hover .gallery-marquee__track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marquee-scroll-reverse {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0%);
    }
}

.gallery-marquee__item {
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
}

.gallery-marquee__item--small {
    width: 200px;
}

.gallery-marquee__item--medium {
    width: 300px;
}

.gallery-marquee__item--large {
    width: 400px;
}

.gallery-marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-marquee__btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.gallery-marquee__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 56, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-marquee__btn:hover .gallery-marquee__overlay,
.gallery-marquee__btn:focus-visible .gallery-marquee__overlay {
    opacity: 1;
}

.gallery-marquee__btn:hover img {
    transform: scale(1.05);
}

.gallery-marquee__overlay i {
    color: white;
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Lightbox */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

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

.gallery-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.gallery-lightbox__img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--gacf-radius-sm);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox__close,
.gallery-lightbox__prev,
.gallery-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.gallery-lightbox__close:hover,
.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover {
    background: white;
    color: var(--gacf-primary);
    transform: scale(1.1);
}

.gallery-lightbox__close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 2rem;
    line-height: 1;
}

.gallery-lightbox__prev,
.gallery-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
}

.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover {
    transform: translateY(-50%) scale(1.1);
}

.gallery-lightbox__prev {
    left: 30px;
}

.gallery-lightbox__next {
    right: 30px;
}

/* Boutons galerie pages activité/événement */
.evenement-galerie__item {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.evenement-galerie__item:hover {
    transform: scale(1.05);
}

.evenement-galerie__item img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Style icone service dans carte témoignage */
.testimonial-card__service-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-card__service-icon svg,
.testimonial-card__service-icon img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* Bouton Facebook */
.btn-gacf--facebook {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #1877F2;
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-gacf--facebook:hover {
    background-color: #0d65d9;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(24, 119, 242, 0.4);
}

.btn-gacf--facebook::after {
    content: none !important;
}

/* Responsive galerie */
@media (max-width: 767.98px) {
    .gallery-marquee__item {
        height: 150px;
    }

    .gallery-marquee__item--small {
        width: 150px;
    }

    .gallery-marquee__item--medium {
        width: 220px;
    }

    .gallery-marquee__item--large {
        width: 300px;
    }

    /* Ralentir le défilement sur mobile pour une meilleure lisibilité */
    .gallery-marquee__track {
        animation-duration: 100s;
    }

    .gallery-marquee__track--reverse {
        animation-duration: 110s;
    }
}

/* ============================================
   VIE COMMUNAUTAIRE - FILTRES TÉMOIGNAGES
   ============================================ */

/* Liste à puces des filtres */
.testimonials-filter__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.testimonials-filter__list li {
    display: inline-block;
}

/* Filtres */
.testimonials-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--gacf-primary);
    background-color: transparent;
    color: var(--gacf-primary);
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-filter__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.testimonials-filter__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(10%) sepia(20%) saturate(2000%) hue-rotate(200deg) brightness(95%) contrast(95%);
    transition: filter 0.3s ease;
}

.testimonials-filter__icon svg {
    width: 20px;
    height: 20px;
}

.testimonials-filter__btn:hover {
    background-color: var(--gacf-primary);
    color: white;
}

.testimonials-filter__btn:hover .testimonials-filter__icon img {
    filter: brightness(0) invert(1);
}

.testimonials-filter__btn:hover .testimonials-filter__icon svg {
    stroke: white;
}

.testimonials-filter__btn.active {
    background-color: var(--gacf-primary);
    color: white;
}

.testimonials-filter__btn.active .testimonials-filter__icon img {
    filter: brightness(0) invert(1);
}

.testimonials-filter__btn.active .testimonials-filter__icon svg {
    stroke: white;
}

/* Dropdown mobile (masqué sur desktop) */
.testimonials-filter__select {
    display: none;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-primary);
    background-color: #ffffff;
    border: 2px solid var(--gacf-primary);
    border-radius: var(--gacf-radius-md, 12px);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23141c38' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.testimonials-filter__select:focus {
    outline: none;
    border-color: var(--gacf-secondary, #3f68e6);
    box-shadow: 0 0 0 3px rgba(63, 104, 230, 0.15);
}

@media (max-width: 767.98px) {
    .testimonials-filter__btn {
        padding: 0.6rem 1.25rem;
        font-size: 0.875rem;
    }

    .testimonials-filter__icon {
        width: 20px;
        height: 20px;
    }

    /* --- Vie communautaire : filtre déroulant sur mobile --- */
    .testimonials-filter--community .testimonials-filter__list {
        display: none;
    }

    .testimonials-filter--community .testimonials-filter__select {
        display: block;
    }
}

/* ============================================
   ACCESSIBILITÉ : REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn-gacf:hover,
    .btn-gacf--white:hover,
    .btn-gacf--secondary:hover,
    .btn-gacf--link:hover,
    .carousel-arrow:hover,
    .nav-btn:hover {
        transform: none;
    }

    .btn-gacf:hover::after,
    .btn-gacf--white:hover::after,
    .btn-gacf--secondary:hover::after,
    .btn-gacf--link:hover::after {
        transform: none;
    }

    .gallery-marquee__track,
    .gallery-marquee__track--reverse {
        animation: none;
    }
}

/* ========================================
   PAGE RAPPORT D'ACTIVITÉ
======================================== */

.rapport-section__image img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
}

.rapport-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rapport-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: var(--gacf-radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform var(--gacf-duration) var(--gacf-ease),
        box-shadow var(--gacf-duration) var(--gacf-ease);
}

.rapport-list__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.rapport-list__info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rapport-list__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--gacf-radius-md);
    color: var(--gacf-primary);
    font-size: 2rem;
    flex-shrink: 0;
}

.rapport-list__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rapport-list__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-dark);
    margin: 0;
}

.rapport-list__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0;
}

.rapport-list__format,
.rapport-list__size {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.rapport-list__format i,
.rapport-list__size i {
    font-size: 0.75rem;
}

.btn-gacf--small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 767.98px) {
    .rapport-list__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .rapport-list__item .btn-gacf--small {
        width: 100%;
        justify-content: center;
    }

    .rapport-section__image {
        max-width: 300px;
        margin: 0 auto 2rem;
    }
}

/* ========================================
   PAGE BÉNÉVOLAT
======================================== */

/* --- Section Hero Bénévolat --- */
.benevolat-hero__details p {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
}

.benevolat-hero__images {
    position: relative;
    height: 450px;
}

.benevolat-hero__shape {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 350px;
    height: 350px;
    background: var(--gacf-secondary);
    opacity: 0.3;
    border-radius: 0 0 0 60%;
    z-index: 0;
}

.benevolat-hero__img {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

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

.benevolat-hero__img--1 {
    width: 280px;
    height: 280px;
    top: 0;
    right: 80px;
}

.benevolat-hero__img--2 {
    width: 200px;
    height: 200px;
    bottom: 20px;
    right: 0;
}

/* --- Section Offres Bénévolat --- */
.benevolat-offres {
    background-color: var(--gacf-primary);
    padding: 4rem 0;
    overflow: hidden;
    position: relative;
}

/* Effet de dégradé sur les bords */
.benevolat-offres__slider-wrapper {
    margin-top: 1rem;
    position: relative;
}

.benevolat-offres__slider {
    overflow: visible;
    position: relative;
}

.benevolat-offres__track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: max-content;
    padding: 1rem 0;
    cursor: grab;
    user-select: none;
    touch-action: pan-y pinch-zoom;
}

.benevolat-offres__track.is-dragging {
    cursor: grabbing;
    transition: none;
}

.benevolat-offres__card {
    background: var(--gacf-white, #fff);
    border-radius: 16px;
    padding: 1.5rem;
    width: 320px;
    flex-shrink: 0;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Card link variant (slider - keeps width) */
.benevolat-offres__card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.benevolat-offres__card--link:hover {
    text-decoration: none;
    color: inherit;
}

.benevolat-offres__card--link:hover .benevolat-offres__card-title,
.benevolat-offres__card--link:hover .benevolat-offres__card-info,
.benevolat-offres__card--link:hover .benevolat-offres__card-desc {
    text-decoration: none;
}

.benevolat-offres__card--link:hover .benevolat-offres__card-cta {
    text-decoration: underline;
}

/* Card link variant in grid (autres postes section) - fills column */
.single-poste-autres .benevolat-offres__card--link {
    width: 100%;
}

.benevolat-offres__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.benevolat-offres__card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.benevolat-offres__card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 42, 73, 0.08);
    border-radius: 12px;
}

.benevolat-offres__card-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.benevolat-offres__card-icon i {
    font-size: 1.5rem;
    color: var(--gacf-primary);
}

.benevolat-offres__card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

.benevolat-offres__card-info {
    font-size: 0.85rem;
    color: #718096;
    margin: 0;
}

.benevolat-offres__card-info span:not(:last-child)::after {
    content: " • ";
}

.benevolat-offres__card-desc {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
    /* Limite à 4 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA link at bottom of card */
.benevolat-offres__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gacf-primary);
    margin-top: 1rem;
    transition: gap 0.2s ease;
}

.benevolat-offres__card--link:hover .benevolat-offres__card-cta {
    gap: 0.75rem;
}

.benevolat-offres__card-cta i {
    transition: transform 0.2s ease;
}

.benevolat-offres__card--link:hover .benevolat-offres__card-cta i {
    transform: translateX(4px);
}

.benevolat-offres__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.benevolat-offres__arrows {
    display: flex;
    gap: 0.75rem;
}

/* Les flèches utilisent maintenant .carousel-arrow.carousel-arrow--ghost */

/* Bouton dans la section offres - style blanc sur fond bleu */
.benevolat-offres__nav .btn-gacf--secondary {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

.benevolat-offres__nav .btn-gacf--secondary:hover {
    background-color: #fff;
    color: var(--gacf-primary);
}

/* --- Section Conditions --- */
.benevolat-conditions {
    background-color: var(--gacf-primary);
    padding: 4rem 0;
}

.benevolat-conditions__card {
    background: #fff;
    border-radius: var(--gacf-radius-lg);
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    height: 100%;
}

.benevolat-conditions__icon {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: var(--gacf-radius-md);
    overflow: hidden;
}

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

.benevolat-conditions__content {
    flex: 1;
}

.benevolat-conditions__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gacf-dark);
    margin: 0 0 0.5rem;
}

.benevolat-conditions__desc {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.5;
    margin: 0;
}

/* --- Section Témoignages Bénévoles --- */
.benevolat-testimonials {
    background: #fff;
}

/* --- Section Formulaire --- */
.benevolat-form {
    background-color: var(--gacf-primary);
    padding: 4rem 0;
}

.benevolat-form__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity var(--gacf-duration) var(--gacf-ease);
}

.benevolat-form__phone:hover {
    color: #fff;
    opacity: 0.8;
}

.benevolat-form__phone i {
    font-size: 1.25rem;
}

.benevolat-form__form {
    background: transparent;
}

.benevolat-form__label {
    display: block;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.benevolat-form__input,
.benevolat-form__select,
.benevolat-form__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: none;
    border-radius: var(--gacf-radius-sm);
    background: #fff;
    color: var(--gacf-dark);
    transition: box-shadow var(--gacf-duration) var(--gacf-ease);
}

.benevolat-form__input:focus,
.benevolat-form__select:focus,
.benevolat-form__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.benevolat-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

.benevolat-form__textarea {
    resize: vertical;
    min-height: 100px;
}

/* Bouton soumettre - blanc sur fond bleu */
.benevolat-form .btn-gacf--secondary {
    background-color: #fff;
    color: var(--gacf-primary);
    border-color: #fff;
}

.benevolat-form .btn-gacf--secondary:hover {
    background-color: #d1d5db;
    color: var(--gacf-primary);
    border-color: #d1d5db;
}

/* --- Responsive Bénévolat --- */
@media (max-width: 991.98px) {
    .benevolat-hero__images {
        height: 350px;
        margin-top: 2rem;
    }

    .benevolat-hero__img--1 {
        width: 220px;
        height: 220px;
        right: 60px;
    }

    .benevolat-hero__img--2 {
        width: 160px;
        height: 160px;
    }

    .benevolat-hero__shape {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 767.98px) {
    .benevolat-hero__images {
        height: 280px;
    }

    .benevolat-hero__img--1 {
        width: 180px;
        height: 180px;
        right: auto;
        left: 50%;
        transform: translateX(-70%);
    }

    .benevolat-hero__img--2 {
        width: 130px;
        height: 130px;
        right: auto;
        left: 50%;
        transform: translateX(20%);
    }

    .benevolat-hero__shape {
        width: 220px;
        height: 220px;
        right: auto;
        left: 50%;
        transform: translate(-30%, -50%);
    }

    .benevolat-offres__track {
        gap: 1rem;
    }

    .benevolat-offres__card {
        width: 280px;
    }

    .benevolat-offres__nav {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .benevolat-offres__arrows {
        gap: 0.5rem;
    }

    .benevolat-offres__arrows .carousel-arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .benevolat-conditions__card {
        flex-direction: column;
        text-align: center;
    }

    .benevolat-conditions__icon {
        margin: 0 auto;
    }
}

/* --- Responsive illustration section Devenir bénévole (images agrandies) --- */

/* Espacement section Devenir bénévole */
.benevolat-devenir {
    padding-bottom: 5rem !important;
}

@media (max-width: 991px) {
    .benevolat-devenir .section-illustration-2 {
        width: 100%;
        max-width: 460px;
        /* rapproché de la taille desktop */
        height: 460px;
        margin: 0 auto;
    }

    .benevolat-devenir .section-illustration-2__img--1 {
        width: 280px;
        height: 280px;
    }

    .benevolat-devenir .section-illustration-2__img--2 {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 576px) {
    .benevolat-devenir .section-illustration-2 {
        max-width: 340px;
        height: 320px;
        margin: 0 auto;
    }

    .benevolat-devenir .section-illustration-2__img--1 {
        width: 220px;
        height: 220px;
        top: 6%;
        right: 0;
    }

    .benevolat-devenir .section-illustration-2__img--2 {
        width: 160px;
        height: 160px;
        bottom: 6%;
        left: 5%;
    }
}

/* ============================================
   PAGE D'ACCUEIL - HERO SECTION
   ============================================ */
.home-hero {
    position: relative;
    padding: 4rem 0 3rem;
    background: #fff;
    overflow-x: clip;
    overflow-y: visible;
}

/* Le container doit passer au-dessus de la courbure */
.home-hero>.container {
    position: relative;
    z-index: 3;
}

/* Décoration SVG en fond */
.home-hero__deco {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.home-hero__deco svg {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.15;
}

/* Formes flottantes décoratives */
.home-hero__floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.home-hero__shape {
    position: absolute;
    border-radius: 50%;
    animation: floatShape 15s ease-in-out infinite;
    z-index: -1;
}

.home-hero__shape--1 {
    width: 180px;
    height: 180px;
    background: var(--gacf-service-prepose-dom);
    opacity: 0.25;
    filter: blur(40px);
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.home-hero__shape--2 {
    width: 250px;
    height: 250px;
    background: var(--gacf-service-cafetaria);
    opacity: 0.25;
    filter: blur(50px);
    top: 50%;
    left: 0%;
    animation-delay: -4s;
}

.home-hero__shape--3 {
    width: 150px;
    height: 150px;
    background: var(--gacf-service-atb);
    opacity: 0.25;
    filter: blur(35px);
    top: 15%;
    right: 10%;
    animation-delay: -8s;
}

.home-hero__shape--4 {
    width: 200px;
    height: 200px;
    background: var(--gacf-service-comptoir-com);
    opacity: 0.25;
    filter: blur(45px);
    bottom: 15%;
    right: 3%;
    animation-delay: -12s;
}

.home-hero__shape--5 {
    width: 120px;
    height: 120px;
    background: var(--gacf-service-itmav);
    opacity: 0.25;
    filter: blur(30px);
    top: 35%;
    left: 18%;
    animation-delay: -6s;
}

@keyframes floatShape {

    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }

    25% {
        transform: translateY(-20px) translateX(10px) scale(1.1);
    }

    50% {
        transform: translateY(-35px) translateX(-5px) scale(1);
    }

    75% {
        transform: translateY(-15px) translateX(15px) scale(1.05);
    }
}

/* Courbe décorative en bas */
.home-hero__curve {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--gacf-primary);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 1;
}

/* --- Contenu gauche --- */
.home-hero__content {
    position: relative;
    z-index: 2;
}

.home-hero__title {
    font-family: var(--gacf-font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--gacf-primary);
    margin-bottom: 1.5rem;
}

.home-hero__description {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--gacf-text-muted);
    margin-bottom: 2rem;
    max-width: 520px;
}

/* --- Statistiques --- */
.home-hero__stats {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.home-hero__stat {
    display: flex;
    flex-direction: column;
}

.home-hero__stat-number {
    font-family: var(--gacf-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gacf-primary);
    line-height: 1;
}

.home-hero__stat-label {
    font-size: 0.9375rem;
    color: var(--gacf-text-muted);
    margin-top: 0.25rem;
    max-width: 100px;
}

/* --- Carousel Nouvelles (droite) - NOUVEAU DESIGN SLIDER --- */
.home-hero__carousel {
    position: relative;
    max-width: 100%;
    margin-left: auto;
    padding: 0 40px;
    /* Espace pour les flèches */
    overflow: visible;
}

.home-hero__carousel-wrapper {
    overflow: hidden;
    border-radius: 20px;
}

.home-hero__carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
}

.home-hero__carousel-track:active {
    cursor: grabbing;
}

.home-hero__slide {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
}

/* Image du slide */
.home-hero__slide-image {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.home-hero__slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-hero__slide:hover .home-hero__slide-image img {
    transform: scale(1.03);
}

.home-hero__slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

/* Badge date - UNIFIÉ fond bleu texte blanc */
.home-hero__slide-date {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gacf-primary);
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
}

.home-hero__slide-date svg {
    opacity: 1;
    color: #ffffff;
}

/* Contenu du slide (card blanche) */
.home-hero__slide-content {
    background: #fff;
    border-radius: 0 0 20px 20px;
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    border: 1px solid #e2e8f0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.home-hero__slide-title {
    font-family: var(--gacf-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-hero__slide-excerpt {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gacf-text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-hero__slide-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gacf-primary);
    text-decoration: none;
    padding: 0;
    border: none;
    background: none;
    transition: gap 0.3s ease, color 0.3s ease;
}

.home-hero__slide-link:hover {
    gap: 0.75rem;
    color: var(--gacf-primary);
    opacity: 0.8;
    text-decoration: none;
}

.home-hero__slide-link svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.home-hero__slide-link:hover svg {
    transform: translateX(4px);
}

/* Conteneur pour plusieurs boutons */
.home-hero__slide-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: auto;
    justify-content: flex-start;
}

/* --- Navigation carousel Nouvelles --- */
.home-hero__carousel-nav {
    position: absolute;
    top: 140px;
    /* Centré sur l'image */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

/* Les flèches utilisent maintenant .carousel-arrow.carousel-arrow--filled.carousel-arrow--lg */
.home-hero__carousel-nav .carousel-arrow {
    pointer-events: auto;
}

/* Pagination dots */
.home-hero__carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.home-hero__carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.home-hero__carousel-dot.active,
.home-hero__carousel-dot:hover {
    background: var(--gacf-primary);
    transform: scale(1.2);
}

/* --- Décoration SVG Publications --- */
.home-hero__carousel-deco {
    position: absolute;
    top: -20px;
    right: -40px;
    z-index: 0;
    pointer-events: none;
}

.home-hero__carousel-deco svg {
    width: 300px;
    height: auto;
}

.home-hero__carousel-deco svg path {
    fill: var(--gacf-primary);
    opacity: 0.15;
}

/* --- Responsive Hero --- */
@media (max-width: 1199px) {
    .home-hero__carousel {
        padding: 0 30px;
    }
}

@media (max-width: 991px) {
    .home-hero {
        padding: 2rem 0 5rem;
    }

    .home-hero__curve {
        height: 50px;
    }

    .home-hero__carousel {
        max-width: 500px;
        margin: 1rem auto 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .home-hero__carousel-wrapper {
        order: 1;
    }

    .home-hero__carousel-dots {
        order: 2;
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }

    .home-hero__carousel-nav {
        order: 3;
        position: relative;
        top: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .home-hero__carousel-nav .carousel-arrow {
        position: relative;
    }

    /* Sur mobile, hauteur auto pour éviter overflow avec boutons empilés */
    .home-hero__slide-content {
        height: auto;
        min-height: 280px;
    }

    /* Boutons publications : toujours empilés en tablette/mobile */
    .home-hero__slide-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero__slide-buttons .btn-gacf,
    .home-hero__slide-buttons .btn-gacf--small,
    .home-hero__slide-buttons .home-hero__slide-link {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .home-hero__stats {
        gap: 1.5rem;
    }

    .home-hero__stat-number {
        font-size: 2rem;
    }

    .home-hero__stat-label {
        font-size: 0.8125rem;
    }

    .home-hero__slide-image {
        height: 180px;
    }

    .home-hero__carousel-dot {
        width: 12px;
        height: 12px;
    }

    .home-hero__carousel {
        padding: 0 10px;
    }

    .home-activities__slide-image {
        height: 180px;
    }

    .home-activities__carousel-dot {
        width: 12px;
        height: 12px;
    }

    .home-activities__carousel {
        padding: 0 10px;
    }
}

@media (max-width: 576px) {
    .home-hero {
        padding: 2rem 0 5rem;
    }

    .home-hero__curve {
        height: 50px;
    }

    .home-hero__stats {
        flex-wrap: wrap;
        gap: 1rem 2rem;
    }

    .home-hero__stat {
        align-items: center;
    }

    .home-hero__slide-content {
        padding: 1.25rem;
        min-height: 260px;
    }

    .home-hero__slide-title {
        font-size: 1.125rem;
    }

    .home-hero__carousel-nav {
        gap: 1rem;
    }
}

/* ============================================
   SECTION HOME SERVICES
   ============================================ */
.home-services {
    padding: var(--gacf-space-8) 0 var(--gacf-space-4);
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.home-services__decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.home-services__decoration svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-services .container {
    position: relative;
    z-index: 1;
}

.home-services__header {
    margin-bottom: var(--gacf-space-6);
    text-align: left;
}

.home-services__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gacf-text);
    margin-bottom: var(--gacf-space-3);
    line-height: 1.2;
    position: relative;
    padding-left: 1.5rem;
    text-align: left;
}

.home-services__title::before {
    content: "";
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 12px;
    border-radius: 0 6px 6px 0;
    background-color: var(--gacf-primary);
}

.home-services__subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gacf-primary);
    margin-bottom: 0.75rem;
    text-align: left;
}

.home-services__description {
    font-size: 1.125rem;
    color: var(--gacf-text, #101010);
    opacity: 0.75;
    max-width: 600px;
    text-align: left;
}

.home-services__content {
    display: flex;
    align-items: flex-start;
    gap: var(--gacf-space-6);
}

/* Grille des services (gauche) */
.home-services__grid {
    flex: 0 0 auto;
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gacf-space-4);
}

/* Card service individuelle */
.home-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform var(--gacf-duration) var(--gacf-ease);
    max-width: 120px;
    margin: 0 auto;
}

.home-service-card:hover {
    transform: translateY(-4px);
}

.home-service-card__icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gacf-space-2);
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.home-service-card:hover .home-service-card__icon {
    transform: scale(1.1);
}

.home-service-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-service-card__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gacf-text);
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Illustration 3 images (droite) */
.home-services__illustration {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Responsive Home Services --- */
@media (max-width: 1199px) {
    .home-services__grid {
        width: 440px;
    }

    .home-service-card__icon {
        width: 90px;
        height: 90px;
    }

    .home-services__title {
        font-size: 2.25rem;
    }
}

@media (max-width: 991px) {
    .home-services__content {
        flex-direction: column;
    }

    .home-services__grid {
        width: 100%;
        order: 1;
        max-width: 480px;
    }

    .home-services__illustration {
        order: 2;
        width: 100%;
        margin-bottom: var(--gacf-space-4);
    }

    .home-service-card__icon {
        width: 80px;
        height: 80px;
    }

    .home-services__decoration {
        width: 80%;
    }
}

@media (max-width: 767px) {
    .home-services__title {
        font-size: 1.875rem;
        padding-left: 0;
    }

    .home-services__title::before {
        display: none;
    }

    .home-services__subtitle,
    .home-services__description {
        font-size: 1rem;
    }

    .home-services__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gacf-space-3);
        max-width: 100%;
    }

    .home-service-card__icon {
        width: 70px;
        height: 70px;
    }

    .home-service-card__name {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .home-services {
        padding: var(--gacf-space-5) 0 var(--gacf-space-6);
    }

    .home-services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gacf-space-3);
        max-width: 100%;
    }

    .home-service-card__icon {
        width: 80px;
        height: 80px;
    }

    .home-services__title {
        font-size: 1.625rem;
    }

    .home-services__decoration {
        display: none;
    }
}

/* ============================================
   SECTION HOME EVENTS (ÉVÉNEMENTS)
   ============================================ */
.home-events {
    background-color: var(--gacf-primary);
    padding: 6rem 0 4rem;
    overflow: hidden;
    position: relative;
    padding-top: calc(6rem + 140px);
    /* Espace pour la courbe */
}

/* Courbe concave en haut — identique à .service-details::before */
.home-events__curve {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 160px;
    background-color: #ffffff;
    border-radius: 0 0 50% 50%;
    z-index: 0;
    pointer-events: none;
}

.home-events .container {
    position: relative;
    z-index: 1;
}

.home-events .container:first-child {
    margin-bottom: 1.5rem;
}

.home-events__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    position: relative;
    padding-left: 1.5rem;
}

.home-events__title::before {
    content: "";
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 12px;
    border-radius: 0 6px 6px 0;
    background-color: #ffffff;
}

.home-events__slider-wrapper {
    margin-top: 1rem;
    position: relative;
    /* Full-width sans déborder (évite scroll horizontal mobile) */
    width: calc(100vw - (100vw - 100%));
    margin-left: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    max-width: 100vw;
}

.home-events__slider {
    overflow: visible;
    position: relative;
}

.home-events__track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: max-content;
    padding: 1rem 0;
    /* Permettre le swipe tactile sur mobile */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.home-events__track:active {
    cursor: grabbing;
}

.home-events__track.is-dragging {
    transition: none;
}

/* Wrapper pour les cards événement */
.home-events__card-wrapper {
    width: 320px;
    flex-shrink: 0;
}

.home-events__card-wrapper .event-card {
    width: 100%;
}

/* Navigation */
.home-events__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.home-events__arrows {
    display: flex;
    gap: 0.75rem;
}

/* Les flèches utilisent maintenant .carousel-arrow.carousel-arrow--ghost */

/* --- Responsive Home Events --- */
@media (max-width: 991px) {
    .home-events__title {
        font-size: 2.25rem;
    }

    .home-events {
        padding: 5rem 0 3rem;
        padding-top: calc(5rem + 140px);
    }
}

@media (max-width: 767px) {
    .home-events {
        padding: 4rem 0 3rem;
        padding-top: calc(4rem + 140px);
    }

    .home-events__title {
        font-size: 1.875rem;
        padding-left: 0;
    }

    /* Cacher la ligne décorative sur tablette */
    .home-events__title::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .home-events__title {
        font-size: 1.625rem;
        text-align: left;
    }

    .home-events {
        padding: 3.5rem 0 2.5rem;
        padding-top: calc(3.5rem + 140px);
    }

    .home-events__nav {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .home-events__arrows {
        align-self: flex-end;
    }
}

/* ============================================
   SECTION HOME ACTIVITIES (ACTIVITÉS)
   ============================================ */
.home-activities {
    padding: 6rem 0 var(--gacf-space-9);
    background-color: var(--gacf-primary);
    position: relative;
    overflow: hidden;
}

/* Courbe en haut de la section */
.home-activities__curve {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    border-radius: 0 0 50% 50%;
    z-index: 0;
}

.home-activities .container {
    position: relative;
    z-index: 1;
}

.home-activities__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--gacf-space-6);
    line-height: 1.2;
    position: relative;
    padding-left: 1.5rem;
}

.home-activities__title::before {
    content: "";
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 100vw;
    height: 12px;
    border-radius: 0 6px 6px 0;
    background-color: #ffffff;
}

/* Carousel activités - NOUVEAU DESIGN SLIDER HORIZONTAL */
.home-activities__carousel {
    position: relative;
    max-width: 100%;
    padding: 0 40px;
    /* Espace pour les flèches */
}

.home-activities__carousel-wrapper {
    overflow: hidden;
    border-radius: 20px;
}

.home-activities__carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
}

.home-activities__carousel-track:active {
    cursor: grabbing;
}

.home-activities__slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
}

.home-activities__slide-image {
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

.home-activities__slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-activities__slide:hover .home-activities__slide-image img {
    transform: scale(1.03);
}

.home-activities__slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

.home-activities__slide-date {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gacf-primary);
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff;
}

.home-activities__slide-date svg {
    opacity: 1;
    color: #ffffff;
}

.home-activities__slide-content {
    background: #fff;
    border-radius: 0 0 20px 20px;
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.home-activities__slide-title {
    font-family: var(--gacf-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-activities__slide-excerpt {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gacf-text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-activities__slide-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gacf-primary);
    text-decoration: none;
    padding: 0;
    border: none;
    background: none;
    transition: gap 0.3s ease, color 0.3s ease;
    margin-top: auto;
}

.home-activities__slide-link:hover {
    gap: 0.75rem;
    color: var(--gacf-primary);
    opacity: 0.8;
    text-decoration: none;
}

.home-activities__slide-link svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.home-activities__slide-link:hover svg {
    transform: translateX(4px);
}

/* Navigation flèches */
.home-activities__carousel-nav {
    position: absolute;
    top: 140px;
    /* Centré sur l'image */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

/* Les flèches utilisent maintenant .carousel-arrow.carousel-arrow--filled-white.carousel-arrow--lg */
.home-activities__carousel-nav .carousel-arrow {
    pointer-events: auto;
}

/* Pagination dots */
.home-activities__carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.home-activities__carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.home-activities__carousel-dot.active,
.home-activities__carousel-dot:hover {
    background: #ffffff;
    transform: scale(1.2);
}

/* Calendrier CTA */
.home-activities__calendar-wrapper {
    position: relative;
    overflow: visible;
}

/* =============================================
   SVG DÉCORATIF - NOTRE CALENDRIER
   Modifier ces valeurs pour ajuster la position
   ============================================= */
.home-activities__calendar-deco {
    position: absolute;

    /* POSITION VERTICALE - Valeur négative = monte au-dessus du div */
    top: -90px;
    /* Modifier: ex: -80px pour monter, -20px pour descendre */

    /* POSITION HORIZONTALE - Valeur négative = dépasse à droite */
    right: -10px;
    /* Modifier: ex: -100px pour plus à droite, -40px pour moins */

    /* Peut aussi utiliser left au lieu de right si besoin */
    /* left: auto; */

    z-index: 0;
    /* Derrière le contenu (z-index: 1 pour devant) */
    pointer-events: none;
}

.home-activities__calendar-deco svg {
    /* TAILLE DU SVG */
    width: 350px;
    /* Modifier: ex: 400px pour plus grand, 250px pour plus petit */
    height: auto;

    /* ROTATION (optionnel) */
    /* transform: rotate(15deg); */
}

.home-activities__calendar-deco svg path {
    /* COULEUR ET OPACITÉ DU SVG */
    fill: #ffffff;
    /* Couleur de remplissage */
    opacity: 0.329;
    /* Opacité: 0 = invisible, 1 = opaque */
}

/* ============================================= */

.home-activities__calendar-cta {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    max-width: 480px;
}

.home-activities__calendar-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gacf-primary);
    border-radius: 12px;
}

.home-activities__calendar-icon svg {
    color: #ffffff;
    width: 40px;
    height: 40px;
}

.home-activities__calendar-content {
    flex: 1;
}

.home-activities__calendar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin: 0 0 0.75rem;
}

.home-activities__calendar-text {
    font-size: 0.9375rem;
    color: var(--gacf-text-muted);
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

/* --- Responsive Home Activities --- */
@media (max-width: 1199px) {
    .home-activities__carousel {
        padding: 0 30px;
    }
}

@media (max-width: 991px) {
    .home-activities {
        padding: 5rem 0 var(--gacf-space-6);
    }

    .home-activities__title {
        font-size: 2.25rem;
    }

    .home-activities__carousel {
        max-width: 500px;
        margin: 0 auto 3rem;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .home-activities__carousel-wrapper {
        order: 1;
    }

    .home-activities__carousel-dots {
        order: 2;
        display: flex;
        justify-content: center;
        margin-top: 1.5rem;
    }

    .home-activities__carousel-nav {
        order: 3;
        position: relative;
        top: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    .home-activities__carousel-nav .carousel-arrow {
        position: relative;
    }

    .home-activities__calendar-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }

    /* SVG décoratif visible sur mobile avec taille adaptée */
    .home-activities__calendar-deco {
        top: -60px;
        right: -50px;
    }

    .home-activities__calendar-deco svg {
        width: 220px;
    }
}

@media (max-width: 767px) {
    .home-activities {
        padding: 4rem 0 var(--gacf-space-5);
    }

    .home-activities__title {
        font-size: 1.875rem;
        padding-left: 0;
    }

    /* Cacher la ligne décorative sur tablette */
    .home-activities__title::before {
        display: none;
    }

    .home-activities__slide-image {
        height: 200px;
    }

    .home-activities__calendar-cta {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
        text-align: center;
    }

    .home-activities__calendar-icon {
        margin: 0 auto;
    }

    .home-activities__curve {
        height: 60px;
    }
}

@media (max-width: 576px) {
    .home-activities {
        padding: 3.5rem 0 var(--gacf-space-5);
    }

    .home-activities__title {
        font-size: 1.625rem;
        text-align: left;
    }

    .home-activities__slide-content {
        padding: 1.25rem;
        min-height: 150px;
    }

    .home-activities__slide-title {
        font-size: 1.125rem;
    }

    .home-activities__carousel-nav {
        gap: 1rem;
    }

    .home-activities__calendar-title {
        font-size: 1.5rem;
    }

    .home-activities__calendar-cta {
        padding: 1.5rem;
    }

    .home-activities__curve {
        height: 40px;
    }
}

/* ============================================
   SECTION 5 - HOME BÉNÉVOLAT
   ============================================ */
.home-benevolat {
    position: relative;
    background: #ffffff;
    padding: var(--gacf-space-6) 0;
    overflow: hidden;
}

.home-benevolat__curve {
    display: none;
}

.home-benevolat__content {
    padding-top: 2rem;
}

.home-benevolat__title {
    font-family: var(--gacf-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--gacf-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.home-benevolat__subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gacf-primary);
    margin-bottom: 1rem;
}

.home-benevolat__description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gacf-text-muted);
    margin-bottom: 2rem;
    max-width: 500px;
}

/* Visual droite */
.home-benevolat__visual {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.home-benevolat__image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.home-benevolat__image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Card témoignage dans section bénévolat */
.home-benevolat__testimonial.testimonial-card {
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* --- Responsive Home Bénévolat --- */
@media (max-width: 991px) {
    .home-benevolat {
        padding: 5rem 0 var(--gacf-space-6);
    }

    .home-benevolat__title {
        font-size: 2.25rem;
    }

    .home-benevolat__description {
        max-width: 100%;
    }

    .home-benevolat__visual {
        max-width: 500px;
    }
}

@media (max-width: 767px) {
    .home-benevolat {
        padding: 4rem 0 var(--gacf-space-5);
    }

    .home-benevolat__title {
        font-size: 1.875rem;
        padding-left: 0;
    }

    .home-benevolat__title::before {
        display: none;
    }

    .home-benevolat__image img {
        height: 250px;
    }

    .home-benevolat__curve {
        height: 60px;
    }

    .home-benevolat__testimonial.testimonial-card {
        padding: var(--gacf-space-3);
    }
}

@media (max-width: 576px) {
    .home-benevolat {
        padding: 3.5rem 0 var(--gacf-space-5);
    }

    .home-benevolat__title {
        font-size: 1.625rem;
    }

    .home-benevolat__curve {
        height: 40px;
    }
}

/* ============================================
   SECTION 6 - HOME TÉMOIGNAGES MEMBRES
   ============================================ */
.home-testimonials {
    padding: var(--gacf-space-6) 0;
    background: #ffffff;
}

.home-testimonials__title {
    font-family: var(--gacf-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--gacf-dark);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.home-testimonials__subtitle {
    font-size: 1.125rem;
    color: var(--gacf-primary);
    margin-bottom: 3rem;
}

.home-testimonials__cta {
    margin-top: 3rem;
}

/* Liste des services avec témoignages */
.home-testimonials__services-list {
    max-width: 700px;
    margin: 0 auto;
}

.services-temoignages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-temoignages-list__item {
    border-bottom: 1px solid #e5e7eb;
}

.services-temoignages-list__item:last-child {
    border-bottom: none;
}

.services-temoignages-list__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    text-decoration: none;
    color: var(--gacf-text);
    transition: all 0.2s ease;
}

.services-temoignages-list__link:hover {
    padding-left: 0.5rem;
    color: var(--service-color, var(--gacf-primary));
}

.services-temoignages-list__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-temoignages-list__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.services-temoignages-list__name {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
}

.services-temoignages-list__count {
    font-size: 0.875rem;
    color: var(--gacf-text-muted);
    background: #f3f4f6;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
}

.services-temoignages-list__arrow {
    color: var(--gacf-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.services-temoignages-list__link:hover .services-temoignages-list__arrow {
    transform: translateX(4px);
    color: var(--service-color, var(--gacf-primary));
}

/* Ajustement hauteur cards témoignages sur colonnes différentes */
.home-testimonials .testimonial-card {
    height: 100%;
}

/* Animation d'entrée des cards témoignages */
@keyframes gacf-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }

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

.home-testimonials .testimonial-card {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
}

.home-testimonials .testimonial-card.is-visible {
    animation: gacf-fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Délais en cascade pour les 4 cards */
.home-testimonials .row:first-child .col-lg-8 .testimonial-card.is-visible {
    animation-delay: 0s;
}

.home-testimonials .row:first-child .col-lg-4 .testimonial-card.is-visible {
    animation-delay: 0.12s;
}

.home-testimonials .row:last-child .col-lg-4 .testimonial-card.is-visible {
    animation-delay: 0.24s;
}

.home-testimonials .row:last-child .col-lg-8 .testimonial-card.is-visible {
    animation-delay: 0.36s;
}

/* Hover subtil pour les cards témoignages */
.home-testimonials .testimonial-card.is-visible {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-testimonials .testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* --- Responsive Home Témoignages --- */
@media (max-width: 991px) {
    .home-testimonials__title {
        font-size: 2.25rem;
        text-align: left;
    }

    .home-testimonials .col-lg-4,
    .home-testimonials .col-lg-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .home-testimonials {
        padding: var(--gacf-space-5) 0;
    }

    .home-testimonials__title {
        font-size: 1.875rem;
        text-align: left;
        padding-left: 0;
    }

    .home-testimonials__title::before {
        display: none;
    }

    .home-testimonials .col-lg-4,
    .home-testimonials .col-lg-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .home-testimonials__title {
        font-size: 1.625rem;
        text-align: left;
    }
}

/* ============================================
   SECTION 7 - HOME VIE COMMUNAUTAIRE (Vidéo)
   ============================================ */
.home-community {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    max-height: 800px;
    overflow: hidden;
}

.home-community__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home-community__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-community__video-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gacf-primary) 0%, var(--gacf-secondary) 100%);
}

.home-community__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dégradé étendu qui part du bas vers le haut - plus foncé et plus grand */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.85) 15%,
            rgba(0, 0, 0, 0.7) 35%,
            rgba(0, 0, 0, 0.5) 55%,
            rgba(0, 0, 0, 0.3) 75%,
            rgba(0, 0, 0, 0.15) 90%,
            rgba(0, 0, 0, 0.05) 100%);
}

.home-community__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4rem 0;
    z-index: 2;
}

.home-community__title {
    font-family: var(--gacf-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 2rem;
    max-width: 700px;
}

/* --- Responsive Home Vie Communautaire --- */
@media (max-width: 991px) {
    .home-community {
        height: 70vh;
    }

    .home-community__title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .home-community {
        height: 60vh;
        min-height: 400px;
    }

    .home-community__title {
        font-size: 1.75rem;
    }

    .home-community__content {
        padding: 2.5rem 0;
    }
}

@media (max-width: 576px) {
    .home-community__title {
        font-size: 1.5rem;
    }

    .home-community__content {
        padding: 2rem 0;
    }
}

/* ============================================
   PAGE CONTACT - INFOS DE CONTACT
   ============================================ */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.contact-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-info-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--gacf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.contact-info-icon svg {
    width: 44px;
    height: 44px;
    stroke: #ffffff;
}

.contact-info-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gacf-dark);
}

.contact-info-text a {
    color: var(--gacf-dark);
    text-decoration: none;
}

.contact-info-text a:hover {
    color: var(--gacf-secondary);
}

@media (max-width: 991px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contact-info-icon {
        width: 110px;
        height: 110px;
    }

    .contact-info-icon svg {
        width: 50px;
        height: 50px;
    }

    .contact-info-text {
        font-size: 1.25rem;
    }
}

/* ============================================
   ARCHIVE HEADERS
   ============================================ */
.archive-header {
    padding: 3.5rem 0;
    background: linear-gradient(135deg, var(--gacf-primary) 0%, #1e2a4a 100%);
    position: relative;
    overflow: hidden;
}

.archive-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.archive-header__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.archive-header__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.archive-header__subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .archive-header {
        padding: 2.5rem 0;
    }

    .archive-header__title {
        font-size: 1.75rem;
    }

    .archive-header__subtitle {
        font-size: 1rem;
    }
}

/* ============================================
   GALERIE LIGHTBOX MOBILE - AMÉLIORATION
   ============================================ */
/* Lightbox avec thumbnails en bas sur mobile */
@media (max-width: 767px) {
    .gallery-lightbox {
        display: flex;
        flex-direction: column;
    }

    .gallery-lightbox__content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        touch-action: pan-x;
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        cursor: grab;
    }

    .gallery-lightbox__content:active {
        cursor: grabbing;
    }

    .gallery-lightbox__img {
        max-height: calc(100vh - 180px);
        max-width: 100%;
        object-fit: contain;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
        will-change: transform, opacity;
    }

    .gallery-lightbox__img.swiping {
        transition: none !important;
    }

    /* Masquer les flèches latérales sur mobile */
    .gallery-lightbox__prev,
    .gallery-lightbox__next {
        display: none !important;
    }

    /* Thumbnails en bas */
    .gallery-lightbox__thumbs {
        display: flex !important;
        gap: 0.5rem;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.9);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        flex-shrink: 0;
    }

    .gallery-lightbox__thumbs::-webkit-scrollbar {
        display: none;
    }

    .gallery-lightbox__thumb {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid transparent;
        opacity: 0.5;
        transition: all 0.2s ease;
        scroll-snap-align: center;
        cursor: pointer;
        background: none;
        padding: 0;
    }

    .gallery-lightbox__thumb.active {
        border-color: #fff;
        opacity: 1;
        transform: scale(1.05);
    }

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

    /* Indicateur swipe */
    .gallery-lightbox__swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: rgba(0, 0, 0, 0.7);
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.8125rem;
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50px;
        animation: swipeHintFade 3s ease-in-out forwards;
        z-index: 10;
    }

    @keyframes swipeHintFade {
        0% {
            opacity: 0;
            transform: translateX(-50%) translateY(10px);
        }

        15% {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        70% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            pointer-events: none;
        }
    }
}

/* Desktop: cacher les thumbnails */
@media (min-width: 768px) {

    .gallery-lightbox__thumbs,
    .gallery-lightbox__swipe-hint {
        display: none !important;
    }
}

/* ============================================
   ARCHIVE SERVICES - CARDS
   ============================================ */

.service-archive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border-radius: var(--gacf-radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: var(--gacf-shadow-sm);
    transition: transform var(--gacf-duration) var(--gacf-ease),
        box-shadow var(--gacf-duration) var(--gacf-ease);
    height: 100%;
}

.service-archive-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gacf-shadow-md);
}

.service-archive-card__icon-wrapper {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: transform var(--gacf-duration) var(--gacf-ease);
}

.service-archive-card:hover .service-archive-card__icon-wrapper {
    transform: scale(1.1);
}

.service-archive-card__icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.service-archive-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gacf-text);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.service-archive-card__excerpt {
    font-size: 0.9375rem;
    color: var(--gacf-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* ============================================
   PAGE DE RECHERCHE
   ============================================ */

/* Header de la page de recherche */
.archive-header--search {
    background: linear-gradient(135deg, var(--gacf-primary) 0%, #2a3a5c 100%);
    padding: 3rem 0;
}

/* Formulaire de recherche principal */
.search-form-main .form-control {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    border-color: #dee2e6;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-form-main .form-control:focus {
    border-color: var(--gacf-primary);
    box-shadow: 0 0 0 0.25rem rgba(20, 28, 56, 0.15);
}

/* Section de résultats */
.search-section {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 2rem;
}

.search-section:last-child {
    border-bottom: none;
}

.search-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.search-section__title .badge {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Cards de résultats de recherche */
.search-result-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.search-result-card__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 12px;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--gacf-primary);
}

.search-result-card__icon .search-result-card__img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.search-result-card__content {
    flex: 1;
    min-width: 0;
}

.search-result-card__type {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gacf-muted);
    margin-bottom: 0.25rem;
}

.search-result-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gacf-text);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.search-result-card__desc {
    font-size: 0.875rem;
    color: var(--gacf-muted);
    margin: 0;
    line-height: 1.4;
}

.search-result-card__arrow {
    color: var(--gacf-muted);
    font-size: 1.25rem;
    transition: transform 0.2s;
}

.search-result-card:hover .search-result-card__arrow {
    transform: translateX(4px);
    color: var(--gacf-primary);
}

/* Card service avec couleur */
.search-result-card--service .search-result-card__type {
    color: inherit;
}

/* ============================================
   CARDS PERSONNES (ÉQUIPE / CA) - RECHERCHE
   ============================================ */

.search-result-card--person {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem 1rem;
}

.search-result-card--person .search-result-card__photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3e8f0 0%, #f5f7fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.search-result-card--person:hover .search-result-card__photo {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.search-result-card--person .search-result-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-card--person .search-result-card__photo i {
    font-size: 2rem;
    color: var(--gacf-primary);
    opacity: 0.5;
}

.search-result-card--person .search-result-card__content {
    flex: none;
    width: 100%;
}

.search-result-card--person .search-result-card__title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.search-result-card--person .search-result-card__desc {
    font-size: 0.8rem;
    margin-bottom: 0;
    color: #666;
}

.search-result-card--person .search-result-card__type {
    font-size: 0.7rem;
}

/* CA avec couleur violette */
.search-result-card--ca .search-result-card__photo {
    border-color: rgba(111, 66, 193, 0.2);
}

.search-result-card--ca:hover {
    border-color: rgba(111, 66, 193, 0.4);
}

/* ============================================
   FILTRAGE ARCHIVES - TRANSITIONS
   ============================================ */

.archive-card-item {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.archive-card-item[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
}

/* Message aucun résultat */
#no-results-message {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ============================================
   RESPONSIVE - PAGE RECHERCHE
   ============================================ */

@media (max-width: 768px) {
    .search-result-card {
        padding: 1rem;
    }

    .search-result-card__icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .search-result-card__icon .search-result-card__img {
        width: 28px;
        height: 28px;
    }

    .search-section__title {
        font-size: 1.25rem;
    }
}

/* ============================================
   SUPPRIMER LE VERT - HOMMAGE, ÉQUIPE, CA
   ============================================ */

/* Hommage - supprimer le vert */
.hommage-thumb.active {
    border-color: var(--gacf-primary) !important;
}

.hommage-thumb.active .hommage-thumb__name {
    color: var(--gacf-primary) !important;
}

.hommage-display__role {
    color: var(--gacf-primary) !important;
}

/* Équipe/CA - supprimer le vert des onglets et éléments */
.team-tab.active {
    background-color: var(--gacf-primary) !important;
    border-color: var(--gacf-primary) !important;
}

.team-tab:hover {
    border-color: var(--gacf-primary) !important;
}

.small-team-thumb.active {
    border-color: var(--gacf-primary) !important;
}

.small-team-thumb.active .small-team-thumb-name {
    color: var(--gacf-primary) !important;
}

.small-team-detail-role {
    color: var(--gacf-primary) !important;
}

/* ============================================
   MODAL ACCESSIBILITÉ
   ============================================ */

/* Bouton trigger dans la topbar */
.gacf-a11y-trigger {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.gacf-a11y-trigger:hover {
    color: var(--gacf-accent);
    transform: scale(1.1);
}

.gacf-topbar__social .gacf-a11y-trigger {
    width: 32px;
    height: 32px;
    color: #ffffff;
    font-size: 1rem;
    border-radius: 50%;
    transition: background-color var(--gacf-duration) var(--gacf-ease);
}

.gacf-topbar__social .gacf-a11y-trigger:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: none;
}

.gacf-mobile-menu__social .gacf-a11y-trigger {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #f8f9fa;
    color: var(--gacf-text);
    font-size: 1.5rem;
}

.gacf-mobile-menu__social .gacf-a11y-trigger:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
}

/* Modal overlay */
.a11y-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.a11y-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.a11y-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* Conteneur du modal */
.a11y-modal__container {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    background: #fff;
    border-radius: var(--gacf-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}

.a11y-modal.is-open .a11y-modal__container {
    transform: scale(1) translateY(0);
}

/* Header */
.a11y-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--gacf-primary);
    color: #fff;
}

.a11y-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff !important;
}

.a11y-modal__title i {
    font-size: 1.5rem;
    color: #ffffff !important;
}

.a11y-modal__close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 1.25rem;
}

.a11y-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Body */
.a11y-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 160px);
}

/* Options */
.a11y-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: var(--gacf-radius-md);
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.a11y-option:last-child {
    margin-bottom: 0;
}

.a11y-option__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--gacf-text);
}

.a11y-option__label i {
    font-size: 1.25rem;
    color: var(--gacf-primary);
    width: 28px;
    text-align: center;
}

.a11y-option__controls {
    flex-shrink: 0;
}

/* Boutons de taille de texte */
.a11y-option__controls--buttons {
    display: flex;
    gap: 0.375rem;
}

.a11y-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    border: 2px solid #dee2e6;
    background: #fff;
    border-radius: var(--gacf-radius-sm);
    font-weight: 700;
    color: var(--gacf-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.a11y-btn:hover {
    border-color: var(--gacf-primary);
    color: var(--gacf-primary);
}

.a11y-btn.is-active {
    background: var(--gacf-primary);
    border-color: var(--gacf-primary);
    color: #fff;
}

.a11y-btn[data-a11y-size="small"] {
    font-size: 0.75rem;
}

.a11y-btn[data-a11y-size="normal"] {
    font-size: 0.9rem;
}

.a11y-btn[data-a11y-size="large"] {
    font-size: 1.1rem;
}

.a11y-btn[data-a11y-size="larger"] {
    font-size: 1.25rem;
}

/* Toggle switch */
.a11y-toggle {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 32px;
    cursor: pointer;
}

.a11y-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.a11y-toggle__slider {
    position: absolute;
    inset: 0;
    background: #dee2e6;
    border-radius: 32px;
    transition: background 0.3s ease;
}

.a11y-toggle__slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.a11y-toggle input:checked+.a11y-toggle__slider {
    background: var(--gacf-primary);
}

.a11y-toggle input:checked+.a11y-toggle__slider::before {
    transform: translateX(24px);
}

.a11y-toggle input:focus-visible+.a11y-toggle__slider {
    outline: 2px solid var(--gacf-primary);
    outline-offset: 2px;
}

/* Footer */
.a11y-modal__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.a11y-reset {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: 2px solid #dee2e6;
    border-radius: var(--gacf-radius-md);
    color: #6c757d;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.a11y-reset:hover {
    border-color: #dc3545;
    color: #dc3545;
    background: #fff5f5;
}

/* Body lock quand modal ouvert */
body.a11y-modal-open {
    overflow: hidden;
}

/* ============================================
   STYLES D'ACCESSIBILITÉ (appliqués au body)
   ============================================ */

/* Taille du texte */
body.a11y-text-small {
    font-size: 14px;
}

body.a11y-text-normal {
    font-size: 16px;
}

body.a11y-text-large {
    font-size: 18px;
}

body.a11y-text-larger {
    font-size: 20px;
}

body.a11y-text-large h1,
body.a11y-text-larger h1 {
    font-size: 2.5rem;
}

body.a11y-text-large h2,
body.a11y-text-larger h2 {
    font-size: 2rem;
}

body.a11y-text-large h3,
body.a11y-text-larger h3 {
    font-size: 1.5rem;
}

body.a11y-text-large p,
body.a11y-text-large li,
body.a11y-text-larger p,
body.a11y-text-larger li {
    font-size: 1.125em;
}

/* Espacement augmenté */
body.a11y-spacing {
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
}

body.a11y-spacing p,
body.a11y-spacing li,
body.a11y-spacing span {
    line-height: 2 !important;
}

body.a11y-spacing h1,
body.a11y-spacing h2,
body.a11y-spacing h3,
body.a11y-spacing h4 {
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
}

body.a11y-spacing p {
    margin-bottom: 1.5rem !important;
}

/* Police simplifiée (sans-serif système) */
body.a11y-simple-font,
body.a11y-simple-font * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================
   RESPONSIVE - Modal Accessibilité
   ============================================ */

@media (max-width: 576px) {
    .a11y-modal {
        padding: 0;
        align-items: flex-end;
    }

    .a11y-modal__container {
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--gacf-radius-lg) var(--gacf-radius-lg) 0 0;
        transform: translateY(100%);
    }

    .a11y-modal.is-open .a11y-modal__container {
        transform: translateY(0);
    }

    .a11y-modal__header {
        padding: 1rem 1.25rem;
    }

    .a11y-modal__title {
        font-size: 1.125rem;
    }

    .a11y-modal__body {
        padding: 1rem 1.25rem;
        max-height: calc(85vh - 140px);
    }

    .a11y-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem;
    }

    .a11y-option__controls--buttons {
        width: 100%;
        justify-content: space-between;
    }

    .a11y-btn {
        flex: 1;
        min-width: unset;
    }

    .a11y-modal__footer {
        padding: 1rem 1.25rem 1.5rem;
    }
}

/* ============================================
   SINGLE POSTE DISPONIBLE (VOLUNTEER POSITION)
   ============================================ */

/* Hero Section */
.single-poste-hero {
    position: relative;
    padding: var(--gacf-space-6) 0 calc(var(--gacf-space-6) + 60px);
    background: linear-gradient(135deg, rgba(158, 179, 255, 0.16) 0%, rgba(20, 28, 56, 0.08) 100%);
    overflow: hidden;
}

.single-poste-hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.single-poste-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.single-poste-hero__badge-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.single-poste-hero__badge i {
    font-size: 1rem;
}

.single-poste-hero__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--gacf-dark);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.single-poste-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.single-poste-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--gacf-text-muted);
}

.single-poste-hero__meta-item i {
    font-size: 1.125rem;
    color: var(--gacf-primary);
}

.single-poste-hero__curve {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #ffffff;
    clip-path: ellipse(55% 100% at 50% 100%);
}

/* Description Section */
.single-poste-description__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gacf-dark);
    margin-bottom: 1.5rem;
}

.single-poste-description__text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--gacf-text);
}

.single-poste-description__text p {
    margin-bottom: 1rem;
}

.single-poste-description__text ul,
.single-poste-description__text ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.single-poste-description__text li {
    margin-bottom: 0.5rem;
}

/* Info Cards */
.single-poste-infos__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gacf-dark);
    margin-bottom: 1rem;
}

.single-poste-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: var(--gacf-radius-md);
    height: 100%;
}

.single-poste-info-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gacf-primary);
    border-radius: 12px;
    color: #ffffff;
}

.single-poste-info-card__icon i {
    font-size: 1.25rem;
}

.single-poste-info-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.single-poste-info-card__label {
    font-size: 0.8125rem;
    color: var(--gacf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.single-poste-info-card__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-dark);
}

.single-poste-info-card__value--link {
    color: var(--gacf-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.single-poste-info-card__value--link:hover {
    opacity: 0.8;
}

/* CTA Sidebar */
.single-poste-cta {
    background: var(--gacf-primary);
    border-radius: var(--gacf-radius-lg);
    padding: 2rem;
    color: #ffffff;
}

.single-poste-cta__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.single-poste-cta__text {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.single-poste-cta__actions .btn-gacf {
    justify-content: center;
}

.single-poste-cta__actions .btn-gacf--secondary {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.single-poste-cta__actions .btn-gacf--secondary:hover {
    background: #ffffff;
    color: var(--gacf-primary);
}

/* Back Link */
.single-poste-back__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gacf-primary);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.single-poste-back__link:hover {
    gap: 0.75rem;
    text-decoration: underline;
}

/* Autres postes section */
.single-poste-autres {
    background: #f8f9fa;
}

/* Responsive */
@media (max-width: 991px) {
    .single-poste-hero {
        padding: var(--gacf-space-5) 0 calc(var(--gacf-space-5) + 40px);
    }

    .single-poste-cta {
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    .single-poste-hero__title {
        font-size: 1.75rem;
    }

    .single-poste-hero__meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .single-poste-hero__curve {
        height: 40px;
    }

    .single-poste-cta {
        padding: 1.5rem;
    }

    .single-poste-info-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ============================================
   BREADCRUMB H1 TITLE
   ============================================ */
.breadcrumb-title {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
}

/* ============================================
   RESPONSIVE - PAGE ACCUEIL HERO UNIQUEMENT
   ============================================ */

/* --- TABLETTE & MOBILE (≤991px) --- */
@media (max-width: 991px) {

    /* Hero page accueil UNIQUEMENT - centrer */
    .home-hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .home-hero__title {
        text-align: center;
    }

    .home-hero__description {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero__stats {
        justify-content: center;
    }

    .home-hero__content .btn-gacf {
        align-self: center;
    }

    /* Services - grille compacte centrée */
    .home-services__grid {
        margin: 0 auto;
        gap: var(--gacf-space-2);
    }
}

/* --- MOBILE (≤767px) --- */
@media (max-width: 767px) {

    /* Services - grille plus compacte */
    .home-services__grid {
        gap: var(--gacf-space-2);
        max-width: 320px;
        margin: 0 auto;
    }

    .home-service-card {
        max-width: 90px;
    }

    .home-service-card__icon {
        width: 65px;
        height: 65px;
    }
}

/* --- PETIT MOBILE (≤576px) --- */
@media (max-width: 576px) {
    .home-services__grid {
        gap: var(--gacf-space-2);
        max-width: 280px;
    }

    .home-service-card__icon {
        width: 100px;
        height: 100px;
    }

    .home-service-card__name {
        font-size: 0.8125rem;
    }
}

/* ============================================
   CAROUSEL TOUCH FIX - Amélioration tactile
   ============================================ */
.home-hero__carousel-track,
.home-activities__carousel-track,
.home-events__track {
    touch-action: pan-y pan-x;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Permettre le scroll vertical ET horizontal par défaut */
.home-hero__carousel-wrapper,
.home-activities__carousel-wrapper,
.home-events__slider {
    touch-action: auto;
}

/* Désactiver le pointer-events sur les images pendant le drag */
.home-hero__carousel-track.is-dragging img,
.home-activities__carousel-track.is-dragging img,
.home-events__track.is-dragging img,
.home-hero__carousel-track.is-dragging a,
.home-activities__carousel-track.is-dragging a,
.home-events__track.is-dragging a {
    pointer-events: none;
}

/* ============================================
   PAGINATION GACF
   ============================================ */
.gacf-pagination {
    margin-top: var(--gacf-space-5);
}

.gacf-pagination__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.gacf-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gacf-pagination__page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-family: "Mulish", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gacf-primary);
    text-decoration: none;
    border: 2px solid transparent;
    transition: all var(--gacf-duration) var(--gacf-ease);
}

.gacf-pagination__page:hover {
    background-color: rgba(20, 28, 56, 0.05);
    border-color: var(--gacf-primary);
    color: var(--gacf-primary);
    text-decoration: none;
}

.gacf-pagination__page--active {
    background-color: var(--gacf-primary);
    color: #ffffff;
    border-color: var(--gacf-primary);
    cursor: default;
}

.gacf-pagination__page--active:hover {
    background-color: var(--gacf-primary);
    color: #ffffff;
}

/* Responsive pagination */
@media (max-width: 576px) {
    .gacf-pagination__inner {
        gap: 0.5rem;
    }

    .gacf-pagination__page {
        width: 38px;
        height: 38px;
        font-size: 0.875rem;
    }
}

/* ============================================
   SECTION ÊTRE MEMBRE DU GACF
   ============================================ */

.membre-etre {
    padding: var(--gacf-space-7) 0;
    background: linear-gradient(135deg, rgba(158, 179, 255, 0.12) 0%, rgba(200, 215, 255, 0.18) 50%, rgba(158, 179, 255, 0.08) 100%);
    position: relative;
    overflow: hidden;
}

/* Effet de fond subtil */
.membre-etre::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(63, 104, 230, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.membre-etre::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(91, 163, 79, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Header */
.membre-etre__header {
    position: relative;
    z-index: 1;
    margin-bottom: var(--gacf-space-3);
}

.membre-etre__title {
    font-size: clamp(1.75rem, 3vw + 0.75rem, 2.5rem);
    font-weight: 700;
    color: var(--gacf-primary);
    margin-bottom: var(--gacf-space-2);
}

.membre-etre__subtitle {
    font-size: 1.125rem;
    color: var(--gacf-primary);
    max-width: 600px;
    margin: 0 auto var(--gacf-space-4);
}

/* Badge compteur */
.membre-etre__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 1.5rem;
    background: #ffffff;
    border: 2px solid rgba(20, 28, 56, 0.1);
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gacf-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
}

.membre-etre__badge::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: rgba(20, 28, 56, 0.2);
}

.membre-etre__badge-number {
    font-weight: 700;
    color: var(--gacf-primary);
}

/* Cards */
.membre-etre__card {
    position: relative;
    border-radius: var(--gacf-radius-lg);
    padding: var(--gacf-space-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--gacf-duration) var(--gacf-ease), box-shadow var(--gacf-duration) var(--gacf-ease);
    overflow: hidden;
}

.membre-etre__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Card variante bleu/primaire */
.membre-etre__card--primary {
    background: linear-gradient(145deg, var(--gacf-primary) 0%, #1e2d52 60%, #2a3f6e 100%);
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(20, 28, 56, 0.25);
}

.membre-etre__card--primary .membre-etre__card-title {
    color: #ffffff;
}

.membre-etre__card--primary .membre-etre__card-text {
    color: rgba(255, 255, 255, 0.85);
}

.membre-etre__card--primary .membre-etre__card-list li {
    color: rgba(255, 255, 255, 0.9);
}

.membre-etre__card--primary .membre-etre__card-list i {
    color: var(--gacf-secondary);
}

.membre-etre__card--primary .btn-gacf--secondary {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.membre-etre__card--primary .btn-gacf--secondary:hover {
    background-color: #ffffff;
    color: var(--gacf-primary);
}

/* Card variante blanche/light */
.membre-etre__card--light {
    background: #ffffff;
    color: var(--gacf-text);
    box-shadow: var(--gacf-shadow-md);
    border: 1px solid rgba(20, 28, 56, 0.06);
}

.membre-etre__card--light .membre-etre__card-title {
    color: var(--gacf-primary);
}

.membre-etre__card--light .membre-etre__card-text {
    color: var(--gacf-text);
    opacity: 0.8;
}

.membre-etre__card--light .membre-etre__card-list i {
    color: var(--gacf-secondary);
}

/* Card header (icône + titre) */
.membre-etre__card-header {
    display: flex;
    align-items: center;
    gap: var(--gacf-space-3);
    margin-bottom: var(--gacf-space-3);
}

.membre-etre__card-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: #ffffff;
}

.membre-etre__card--light .membre-etre__card-icon {
    background: rgba(20, 28, 56, 0.06);
    color: var(--gacf-primary);
}

.membre-etre__card-icon--heart {
    color: #ff6b6b;
}

.membre-etre__card--light .membre-etre__card-icon--heart {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}

.membre-etre__card-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

/* Texte */
.membre-etre__card-text {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--gacf-space-3);
}

/* Liste à puces */
.membre-etre__card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--gacf-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--gacf-space-2);
}

.membre-etre__card-list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.membre-etre__card-list i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* CTA */
.membre-etre__card-cta {
    margin-top: auto;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .membre-etre__card {
        padding: var(--gacf-space-4);
    }
}

@media (max-width: 767px) {
    .membre-etre {
        padding: var(--gacf-space-5) 0;
    }

    .membre-etre__card-title {
        font-size: 1.25rem;
    }

    .membre-etre__card-header {
        gap: var(--gacf-space-2);
    }

    .membre-etre__card-icon {
        width: 52px;
        height: 52px;
    }

    .membre-etre__card-icon svg {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 576px) {
    .membre-etre__title {
        font-size: 1.5rem;
    }

    .membre-etre__subtitle {
        font-size: 1rem;
    }

    .membre-etre__badge {
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem;
    }
}

.service-contact-cta__consent {
    margin-top: 0;
    margin-bottom: 0.75 rem;
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}