:root {
    --ayo-green: #1d6645;
    --ayo-white: #f3f7f4; /* soft white for section backgrounds: pure white is tiring on screen */
    --ayo-dark: #0d3826;
    --ayo-deep: #082b1d;
    --ayo-orange: #f47725;
    --card-radius: 1.4rem;
    --card-border: #dbe2dd;
    --card-border-hover: rgba(29,102,69,.25);
    --card-bg: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
    --card-shadow: 0 1rem 2.4rem rgba(8,43,29,.10);
    --card-shadow-hover: 0 1.5rem 3rem rgba(8,43,29,.12);
    --ayo-orange-text: #b34a0c; /* orange for text on light backgrounds (WCAG AA 4.5:1) */
    --ayo-cream: #fbf8f1;
    --ayo-muted: #6d786f;
}

/* Responsive refinements for all pages */
@media (max-width: 1199.98px) {
    .hero h1 { font-size: 4rem; }
    .page-hero h1 { font-size: 4.2rem; }
}

@media (max-width: 991.98px) {
    .section-padding { padding: 5rem 0; }
    .navbar-nav { align-items: stretch !important; }
    .navbar-nav .btn { display: block; margin-top: .6rem; padding-block: .8rem; }
    .hero h1 { font-size: 3.6rem; }
    .page-hero, .programs-hero, .contact-hero, .gallery-hero, .events-hero, .program-detail-hero { min-height: 500px; padding: 7rem 0 4rem; }
    .page-hero h1,
    .program-detail-hero h1 { font-size: 3.6rem; }
    
    
}

@media (max-width: 767.98px) {
    .section-title { font-size: 2.45rem; }
    .page-hero, .programs-hero, .contact-hero, .gallery-hero, .events-hero, .program-detail-hero { min-height: 450px; background-position: 62% center; }
    .page-hero h1,
    .program-detail-hero h1 { font-size: 3rem; }
    .page-hero p,
    .program-detail-hero p { font-size: 1rem; }
    .home-programs-preview h2,
    .social-commitments h2 { font-size: 2.25rem; }
    .preview-copy p,
    .commitment-banner h2 { font-size: 2rem; }
    
    
    
    footer { text-align: center; }
    footer .socials { justify-content: center; }
    .past-event-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .container { width: 100%; padding-inline: 1.15rem; }
    .hero { background-position: 68% center; }
    .hero .display-3 { font-size: clamp(2.35rem, 12vw, 3rem); }
    .hero-copy { font-size: .98rem; line-height: 1.65; }
    .hero .btn { width: 100%; }
    .hero-logo { max-width: 245px; }
    .page-hero, .programs-hero, .contact-hero, .gallery-hero, .events-hero, .program-detail-hero { min-height: 410px; padding: 6.5rem 0 3rem; }
    .page-hero h1,
    .program-detail-hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
    .section-title { font-size: clamp(2rem, 10vw, 2.55rem); }
    .commitment-banner h2 { font-size: 1.65rem; }
    
    .past-event-gallery { height: auto; }
    
    
    
    
    .past-event-gallery { grid-template-columns: 1fr; gap: 1rem; }
    .activities-card { padding: 1.4rem; }
    .cta-card { border-radius: 1.25rem; }
    footer { padding-top: 4rem; }
}

@media (max-width: 399.98px) {
    .navbar-brand { font-size: 1.1rem; }
    .navbar-brand img { width: 36px; height: 36px; }
    .hero .display-3 { font-size: 2.25rem; }
    
    
    
    
    .socials { flex-wrap: wrap; }
}

html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { font-family: "Manrope", sans-serif; color: var(--ayo-deep); background: var(--ayo-cream); }
h1, h2, h3, .navbar-brand, .footer-brand { font-family: "Outfit", sans-serif; }
a { transition: .25s ease; }
.section-padding { padding: 6.5rem 0; }
.section-title { font-size: clamp(2.15rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1.1rem; border: 1px solid rgba(29,102,69,.22); border-radius: 999px; background: #e9f2ed; color: var(--ayo-green); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-light { border-color: rgba(255,255,255,.3); background: rgba(0,0,0,.2); backdrop-filter: blur(5px); color: #fff; }
.skip-link { position: fixed; z-index: 1100; background: white; padding: 1rem; }

.navbar { padding: 1rem 0; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); transition: .25s ease; }
.navbar.scrolled { padding: .65rem 0; box-shadow: 0 .5rem 2rem rgba(8,43,29,.12); }
.navbar-brand { color: var(--ayo-green); }
.navbar-brand:hover, .navbar-brand:focus { color: var(--ayo-dark); }
.navbar-brand, .footer-brand { font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.navbar-brand img, .footer-brand img { filter: drop-shadow(0 5px 8px rgba(0,0,0,.15)); }
.navbar-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.navbar-brand-name { font-size: 1.1rem; }
.navbar-brand-caption { color: var(--ayo-muted); font-family: "Manrope", sans-serif; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { color: var(--ayo-green); font-size: .9rem; font-weight: 800; }
.nav-link:hover, .nav-link:focus { color: var(--ayo-dark); }
.nav-link.active { color: var(--ayo-dark) !important; font-weight: 800; }

/* Pill navigation group */
.nav-pill-group { display: flex; align-items: center; gap: .2rem; padding: .35rem; border: 1px solid #e7e1cf; border-radius: 999px; background: rgba(255,255,255,.6); }
.nav-pill-link { padding: .45rem .95rem !important; font-size: .82rem !important; border-radius: 999px !important; white-space: nowrap; transition: .2s ease; }
.nav-pill-link.active, .nav-pill-link.show { background: #fff; border: 1px solid #e7e1cf; color: var(--ayo-dark) !important; box-shadow: 0 .35rem .9rem rgba(8,43,29,.08); }
.nav-pill-link.dropdown-toggle::after { margin-left: .4rem; vertical-align: .15em; }
.navbar-actions { flex-wrap: wrap; }

/* Language selector */
.lang-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid #e7e1cf; border-radius: 999px; background: #fff; color: var(--ayo-deep); font-size: .82rem; font-weight: 800; text-decoration: none; }
.lang-pill:hover { border-color: var(--ayo-green); color: var(--ayo-green); }
.flag { display: inline-block; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(8,43,29,.12); }
.lang-dropdown .dropdown-menu { min-width: 10rem; }
.lang-dropdown .dropdown-item { display: flex; align-items: center; gap: .55rem; }

/* Pill CTA button */
.btn-join { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.35rem; border-radius: 999px; color: white; background: var(--ayo-orange); font-size: .85rem; font-weight: 800; text-decoration: none; box-shadow: 0 .55rem 1.3rem rgba(244,119,37,.28); transition: .2s ease; }
.btn-join:hover, .btn-join:focus { color: white; background: #dd6418; transform: translateY(-2px); }
.btn-join.active { background: var(--ayo-dark); box-shadow: none; }
/* Laptops (1200-1400px): the bar misses ~16px for the « Se connecter » label,
   so the pills are slightly tightened rather than the label dropped. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-actions { flex-wrap: nowrap; }
    .nav-pill-link { padding: .45rem .68rem !important; }
    /* `white-space: nowrap` sur .lang-pill : sans lui, « Se connecter » se coupe en deux
       lignes dans sa pastille des que la rangee de liens s'allonge (c'est arrive le
       17/10/2026 en passant « Equipe » en menu deroulant : le chevron a pris 56 px et la
       barre est montee de 84 a 89 px). Le temoin reste la hauteur de #mainNav : 84 px. */
    .lang-pill { padding: .5rem .72rem; white-space: nowrap; }
    .btn-join { padding: .55rem 1rem; white-space: nowrap; }
}

/* Mid-size screens: keep the 6 nav links and actions on one line */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand-caption { display: none; }
    .nav-pill-link { padding: .45rem .6rem !important; font-size: .78rem !important; }
    .navbar-actions { flex-wrap: nowrap; }
    .lang-pill { padding: .5rem .75rem; }
    .btn-join { padding: .55rem 1rem; white-space: nowrap; }
    /* Below 1200px even the tightened bar is short: the icon alone stands in for the label */
    .auth-pill span { display: none; }
}

.navbar .dropdown-menu { padding: .55rem; border: 1px solid #e2e9e4; border-radius: .9rem; box-shadow: 0 1rem 2.5rem rgba(8,43,29,.13); }
.navbar .dropdown-item { padding: .7rem .85rem; border-radius: .6rem; color: var(--ayo-green); font-size: .82rem; font-weight: 700; }
.navbar .dropdown-item i { color: var(--ayo-orange-text); }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { color: var(--ayo-dark); background: #f1f6f3; }
.navbar .dropdown-item.active { color: white; background: var(--ayo-green); }
.navbar .dropdown-item.active i { color: #ffc29a; }

/* Shared card style — every card on the site uses these tokens (see :root) */
.principle-card, .guide-card, .mission-card, .story-side-card, .story-text-card, .engagement-card, .preview-card, .commitment-card, .activities-card, .past-event-photo, .agenda-card, .gallery-page-item, .contact-layout, .contact-form-card, .message-card { border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.principle-card:hover, .guide-card:hover, .mission-card:hover, .preview-card:hover, .commitment-card:hover, .past-event-photo:hover, .agenda-card:hover, .gallery-page-item:hover { transform: translateY(-6px); border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.guide-card.guide-card-highlight { border-color: #f6dcc6; background: linear-gradient(160deg, #fff8f1, #fdeede); }
/* Accent bar + icon fill for cards with an icon or number */
.principle-card, .guide-card, .mission-card, .activities-card { position: relative; overflow: hidden; }
.principle-card::before, .guide-card::before, .mission-card::before, .activities-card::before { content: ""; position: absolute; top: 0; left: 1.6rem; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--ayo-green), var(--ayo-orange)); transition: width .45s ease; }
.principle-card:hover::before, .guide-card:hover::before, .mission-card:hover::before { width: calc(100% - 3.2rem); }
.principle-card-icon, .guide-card-icon, .mission-card span, .preview-card-icon { transition: color .35s ease, background .35s ease, transform .35s ease; }
.principle-card:hover .principle-card-icon, .guide-card:hover .guide-card-icon, .mission-card:hover span, .preview-card:hover .preview-card-icon { color: white; background: var(--ayo-green); transform: rotate(-6deg) scale(1.05); }

@media (max-width: 991.98px) {
    .nav-pill-group { flex-direction: column; align-items: stretch; gap: .15rem; padding: .5rem; border-radius: 1.1rem; background: #fff; }
    .nav-pill-link { padding: .7rem .9rem !important; }
    .navbar-actions { flex-direction: column; align-items: stretch; margin-top: .75rem; gap: .6rem; }
    .lang-dropdown { align-self: flex-start; }
}

.btn { border-radius: .75rem; font-weight: 700; padding: .78rem 1.3rem; }
.btn-brand { color: white; background: var(--ayo-orange); border-color: var(--ayo-orange); box-shadow: 0 .65rem 1.5rem rgba(244,119,37,.22); }
.btn-brand:hover, .btn-brand:focus { color: white; background: #dd6418; border-color: #dd6418; transform: translateY(-2px); }

.hero { position: relative; min-height: 85vh; padding: 7.5rem 0 7rem; color: white; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url("../images/hero-youth.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(180deg, transparent 72%, rgba(251,248,241,.55) 90%, var(--ayo-cream) 100%), linear-gradient(90deg, rgba(8,43,29,.95) 0%, rgba(8,43,29,.75) 45%, rgba(8,43,29,.2) 80%); }
.hero .container { position: relative; z-index: 2; }
.hero h1 { letter-spacing: -.045em; line-height: .99; }
.hero h1 span { color: #ffc29a; }
.hero-copy { max-width: 680px; color: rgba(255,255,255,.76); font-size: 1.1rem; line-height: 1.8; }

.hero-logo { width: min(100%, 290px); }

.hero-branding { filter: drop-shadow(0 5px 18px rgba(0,0,0,.42)); }
.hero-shape { position: absolute; z-index: 1; border-radius: 50%; filter: blur(1px); }
.hero-shape-one { width: 360px; height: 360px; right: -180px; top: 32%; background: rgba(244,119,37,.18); }
.hero-shape-two { width: 140px; height: 140px; left: -60px; bottom: 8%; border: 2px solid rgba(255,255,255,.13); }
/* 4 pillars: two rows of two, otherwise the fourth card sits alone on its line */
.hero-pillars { display: grid; max-width: 720px; margin-top: 2.25rem; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.hero-pillar { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(8,43,29,.35); backdrop-filter: blur(10px); text-align: left; }
.hero-pillar i { color: #ffc29a; font-size: 1.1rem; line-height: 1.3; }
.hero-pillar strong { display: block; margin-bottom: .2rem; color: white; font-family: "Outfit", sans-serif; font-size: .98rem; }
.hero-pillar p { margin: 0; color: rgba(255,255,255,.75); font-size: .8rem; line-height: 1.5; }
.page-hero { padding: 12rem 0 6rem; color: white; background: radial-gradient(circle at 85% 20%, rgba(244,119,37,.18), transparent 25%), linear-gradient(135deg, var(--ayo-dark), var(--ayo-deep)); }
.page-hero h1 { max-width: 850px; margin: 1.2rem 0; font-size: clamp(2.7rem, 6vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.page-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.68); font-size: 1.1rem; }

.programs-hero { min-height: 590px; padding: 7.5rem 0 4.5rem; background-image: linear-gradient(90deg, rgba(8,43,29,.92) 0%, rgba(13,56,38,.74) 48%, rgba(13,56,38,.32) 100%), url("../images/program-academy.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.contact-hero { min-height: 590px; padding: 7.5rem 0 4.5rem; background-image: linear-gradient(90deg, rgba(8,43,29,.92) 0%, rgba(13,56,38,.70) 48%, rgba(13,56,38,.26) 100%), url("../images/program-community-v2.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; }

/* Bandeau evenement de l'accueil — voir le commentaire de home.blade.php pour le retrait */
.home-event { padding: 3.5rem 0 .5rem; background: var(--ayo-cream); }
.home-event-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; border-radius: 1.75rem; background: linear-gradient(125deg, var(--ayo-deep), var(--ayo-green)); box-shadow: 0 2rem 4rem rgba(8,43,29,.22); }
.home-event-visual { display: flex; align-items: center; justify-content: center; padding: 1.6rem; background: rgba(0,0,0,.18); }
.home-event-visual button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.home-event-visual button:focus-visible { outline: 3px solid var(--ayo-orange); outline-offset: 4px; }
.home-event-visual img { display: block; width: 100%; height: auto; border-radius: .9rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.28); }
.home-event-copy { padding: 2.6rem 2.4rem; color: white; }
.home-event-copy h2 { margin: 1.1rem 0 .35rem; color: white; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; }
.home-event-lead { margin-bottom: 1.4rem; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.home-event-facts { display: grid; margin: 0 0 1.3rem; padding: 0; gap: .6rem; list-style: none; }
.home-event-facts li { display: flex; align-items: flex-start; gap: .65rem; color: white; font-size: .95rem; line-height: 1.5; }
.home-event-facts i { margin-top: .15rem; color: var(--ayo-orange); font-size: 1rem; }
.home-event-theme { margin-bottom: 1.6rem; padding: .85rem 1.1rem; border-left: 3px solid var(--ayo-orange); border-radius: .6rem; background: rgba(255,255,255,.09); color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.6; }
.home-event-theme span { display: block; margin-bottom: .2rem; color: white; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-event-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.home-event-card .btn-light { color: var(--ayo-green); }
@media (max-width: 991.98px) {
    .home-event-card { grid-template-columns: 1fr; }
    .home-event-copy { padding: 2rem 1.5rem; }
    .home-event-visual { padding: 1.1rem; }
}

/* Pop-up de premiere visite. « display: none » est l'etat par defaut : seul le JavaScript
   ajoute « show ». Sans JS, la pop-up n'apparait jamais et ne bloque donc jamais la page. */
.event-modal { position: fixed; z-index: 1400; inset: 0; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(6,31,21,.74); }
.event-modal.show { display: flex; }
.event-modal-panel { position: relative; width: min(720px, 100%); max-height: 92vh; overflow-x: hidden; overflow-y: auto; border-radius: 1.5rem; background: linear-gradient(160deg, var(--ayo-deep), var(--ayo-green)); box-shadow: 0 2rem 4rem rgba(0,0,0,.45); }
.event-modal-close { position: absolute; z-index: 2; width: 42px; height: 42px; right: .85rem; top: .85rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.5); font-size: .95rem; transition: background .25s ease; }
.event-modal-close:hover, .event-modal-close:focus-visible { background: rgba(0,0,0,.78); }
.event-modal-poster { display: block; width: 100%; height: auto; }
.event-modal-copy { padding: 1.5rem 1.6rem 1.8rem; color: white; text-align: center; }
.event-modal-title { margin: .7rem 0 .4rem; color: white; font-family: "Outfit", sans-serif; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.event-modal-copy > p:not(.event-modal-title) { margin: 0 0 1.25rem; color: rgba(255,255,255,.85); font-size: .95rem; }
.event-modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }
.event-modal-panel .btn-light { color: var(--ayo-green); }
.event-modal-later { padding: .55rem 1rem; border: 0; border-radius: .6rem; color: rgba(255,255,255,.78); background: none; font-size: .92rem; text-decoration: underline; }
.event-modal-later:hover, .event-modal-later:focus-visible { color: white; }

/* overflow: hidden est indispensable — les deux colonnes arrivent en glissant de 44px sur les
   côtés (voir les règles .js-anim plus bas) et, tant qu'elles ne sont pas révélées, elles
   dépassaient à droite : toute la page devenait scrollable latéralement, jusqu'à 27px sur
   téléphone. Aucun élément « sticky » ici, le clipping est donc sans effet de bord. */
.home-about { overflow: hidden; padding: 4.5rem 0 5.5rem; background: var(--ayo-cream); }
.home-about-visual { max-width: 460px; margin: 0 auto; padding: .5rem; border-radius: 1.75rem; background: white; box-shadow: 0 1.5rem 3.5rem rgba(8,43,29,.14); }
.home-about-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.4rem; }
.home-about-content { padding-left: 1rem; }
.home-about-lead { margin: 1.4rem 0 1rem; color: var(--ayo-green); font-size: 1.2rem; font-weight: 700; line-height: 1.6; }
.home-about-content > p:not(.home-about-lead) { color: var(--ayo-muted); font-size: .98rem; line-height: 1.8; }
.home-programs-preview { position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; background: var(--ayo-white); }
.home-programs-preview h2 { margin-bottom: 2.7rem; color: var(--ayo-green); font-size: clamp(2rem, 3.5vw, 3.35rem); font-weight: 800; letter-spacing: -.035em; }
.home-programs-preview h2 span { color: var(--ayo-orange); }
.home-programs-preview hr { margin-bottom: 2.6rem; border-color: #dfe5e1; opacity: 1; }
.preview-intro { margin-bottom: 1.8rem; color: #737d76; font-size: 1.05rem; }
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.preview-card { display: flex; flex-direction: column; overflow: hidden; }
.preview-card-image { height: 150px; background-size: cover; background-position: center; }
.program-page-card .preview-card-image { height: 190px; }
.program-page-card-top { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; }
.program-page-number { margin-top: .9rem; color: var(--ayo-muted); font-size: .72rem; font-weight: 800; letter-spacing: .35em; }
.program-page-verb { display: block; margin-bottom: .35rem; color: var(--ayo-green); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.program-page-card h2 { margin-bottom: .6rem; color: var(--ayo-deep); font-size: 1.3rem; font-weight: 800; }
.preview-media { background-image: url("../images/program-media.webp"); }
.preview-academy { background-image: url("../images/program-academy.webp"); }
.preview-mentoring { background-image: url("../images/program-mentoring.webp"); }
.preview-entrepreneurs { background-image: url("../images/program-entrepreneurs.webp"); }
.preview-career { background-image: url("../images/program-career.webp"); }
.preview-community { background-image: url("../images/program-community.webp"); }
.preview-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 0 1.5rem 1.6rem; text-align: left; }
.preview-card-icon { display: grid; width: 52px; height: 52px; margin: -26px 0 1rem; place-items: center; border: 3px solid white; border-radius: .9rem; color: var(--ayo-orange-text); background: #fff2eb; font-size: 1.35rem; box-shadow: 0 .4rem 1rem rgba(8,43,29,.1); }
.preview-card h3 { margin-bottom: .55rem; color: var(--ayo-deep); font-size: 1.2rem; font-weight: 800; }
.preview-card-body p { margin-bottom: 1.1rem; color: var(--ayo-muted); font-size: .9rem; line-height: 1.6; }
.preview-card a { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--ayo-orange-text); font-size: .9rem; font-weight: 800; text-decoration: none; }
.preview-card a i { transition: transform .25s ease; }
.preview-card a:hover i { transform: translateX(4px); }
.preview-copy { margin-top: 3rem; }
.preview-copy p { margin: 0; color: #707a73; line-height: 1.8; text-align: justify; }
.preview-dots { position: absolute; width: 210px; height: 330px; opacity: .22; background-image: radial-gradient(#8ab6a1 2px, transparent 2px); background-size: 12px 12px; }
.preview-dots-left { left: -80px; top: 0; }
.preview-dots-right { right: -80px; top: -30px; }
.commitment-banner { position: relative; display: flex; min-height: 230px; align-items: center; padding: 3.5rem 0; overflow: hidden; background-image: linear-gradient(rgba(6,22,18,.66), rgba(6,22,18,.66)), url("../images/program-community.webp"); background-position: center 44%; background-size: cover; }
.commitment-banner h2 { max-width: 1450px; margin: 0 auto; color: var(--ayo-orange); font-size: clamp(1.65rem, 3vw, 3rem); font-weight: 800; line-height: 1.08; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.social-commitments { padding: 5.5rem 0; background: var(--ayo-white); }
.social-commitments h2 { max-width: 1200px; margin: 0; color: var(--ayo-green); font-size: clamp(2rem, 3.5vw, 3.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.social-commitments h2 span { color: var(--ayo-orange); }
.social-commitments hr { margin: 3rem 0 2.5rem; border-color: #dfe5e1; opacity: 1; }
.commitment-card { height: 100%; padding: 1rem 1rem 1.7rem; overflow: hidden; }
.commitment-image { position: relative; height: 275px; overflow: hidden; border-radius: 1rem; }
.commitment-image::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(7,26,47,.88)); }
.commitment-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.commitment-card:hover .commitment-image img { transform: scale(1.04); }
.commitment-image span { position: absolute; z-index: 1; left: 1.5rem; bottom: .8rem; color: white; font-family: "Outfit", sans-serif; font-size: 4rem; font-weight: 800; line-height: 1; }
.commitment-card p { margin: 1.5rem .5rem 0; color: #6f7872; font-size: .94rem; font-weight: 600; line-height: 1.75; }
.commitment-card p strong { color: var(--ayo-green); font-weight: 800; }

.value { height: 100%; min-height: 190px; padding: 1.4rem; border-radius: 1.1rem; background: rgba(255,255,255,.1); color: white; }
.value i { color: #ffc29a; font-size: 1.65rem; }
.value h3 { margin: 1rem 0 .45rem; font-size: 1.1rem; }
.value p { margin: 0; color: rgba(255,255,255,.65); font-size: .78rem; line-height: 1.6; }

.programs-section { background: var(--ayo-white); }

.program-detail-hero { position: relative; min-height: 590px; padding: 7.5rem 0 4.5rem; color: white; background-image: linear-gradient(90deg, rgba(8,43,29,.94), rgba(8,43,29,.72) 50%, rgba(8,43,29,.25)), var(--detail-bg); background-position: center; background-size: cover; }
.program-detail-hero h1 { max-width: 850px; margin: 1rem 0; font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.program-detail-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.8); font-size: 1.2rem; }
.detail-back { display: inline-flex; align-items: center; gap: .5rem; color: white; font-size: .8rem; font-weight: 700; text-decoration: none; }
.detail-back:hover { color: #ffc29a; }
.program-detail-content { background: var(--ayo-white); }
.activities-card { padding: 2.2rem 2rem 2rem; }
.activities-card h2 { margin: 1.4rem 0; color: var(--ayo-green); font-size: 1.4rem; font-weight: 800; }
.activities-card ul { margin: 0; padding: 0; list-style: none; }
.activities-card li { display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid #e1e7e2; color: var(--ayo-muted); font-size: .87rem; }
.activities-card li:last-child { border: 0; }
.activities-card li i { color: var(--ayo-orange-text); }

.gallery-hero { min-height: 560px; padding: 7.5rem 0 4.5rem; background-image: linear-gradient(180deg, rgba(8,43,29,.12), rgba(8,43,29,.9)), url("../images/program-media-v2.webp"); background-position: center; background-size: cover; }
.events-hero { min-height: 590px; padding: 7.5rem 0 4.5rem; background-image: linear-gradient(90deg, rgba(8,43,29,.94), rgba(8,43,29,.72) 50%, rgba(8,43,29,.28)), url("../images/event-wibc-3.webp"); background-position: center; background-size: cover; }
.activities-heading { max-width: 760px; }

.gallery-page-section { background: var(--ayo-white); }
.gallery-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gallery-page-item { overflow: hidden; margin: 0; }
.gallery-page-item button { position: relative; display: block; width: 100%; height: 230px; padding: 0; overflow: hidden; border: 0; background: var(--ayo-deep); cursor: zoom-in; }
.gallery-page-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gallery-page-item:hover img { transform: scale(1.045); }
.gallery-page-zoom { position: absolute; right: 1rem; bottom: 1rem; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--ayo-green); background: white; box-shadow: 0 .5rem 1rem rgba(0,0,0,.18); }
.gallery-page-item figcaption { padding: 1.3rem 1.5rem 1.5rem; }
.gallery-page-item figcaption small, .gallery-page-item figcaption strong { display: block; }
.gallery-page-item figcaption small { margin-bottom: .45rem; color: var(--ayo-green); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gallery-page-item figcaption strong { color: var(--ayo-deep); font-size: 1.2rem; line-height: 1.25; }
.section-padding.gallery-page-section { padding-bottom: 1.5rem; }
.section-padding.activities-videos { padding-top: 1.5rem; }
.activities-videos { background: #f5f7f6; }

.live-video-card { height: 100%; overflow: hidden; border: 1px solid #dfe7e2; background: white; box-shadow: 0 1rem 2.5rem rgba(8,43,29,.12); }
.live-video-frame { position: relative; width: 100%; height: 230px; overflow: hidden; background: #0b0b0b; }
.live-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.live-video-copy { padding: 1.2rem 1.35rem 1.35rem; }
.live-video-copy small { display: flex; align-items: center; gap: .45rem; color: var(--ayo-orange-text); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.live-video-copy h3 { margin: .45rem 0 .8rem; color: var(--ayo-deep); font-size: 1.15rem; }
.live-video-copy a { color: var(--ayo-green); font-size: .78rem; font-weight: 800; text-decoration: none; }
.live-video-copy a:hover { color: var(--ayo-orange-text); }

.events-section { background: var(--ayo-white); }
.events-grid { justify-content: center; align-items: start; }
.event-agenda-section { margin-top: 2rem; padding-top: 2.5rem; border-top: 1px solid #e1e8e3; }
.event-agenda-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.event-agenda-heading h3 { margin: 0; color: var(--ayo-deep); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; }
.event-agenda-heading h3 span { padding: .1rem .35rem; color: var(--ayo-green); background: #e5f0e8; }
.event-agenda-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
/* Un seul rendez-vous a l'agenda : sans cette regle la carte reste coincee dans la
   premiere colonne et les deux tiers de la ligne restent vides, ce qui donne une page
   inachevee. `:only-child` ne s'applique que s'il n'y a vraiment qu'une carte : des
   qu'un second evenement est annonce, la grille reprend son comportement normal. */
.agenda-card:only-child { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; }
.agenda-card { display: flex; min-height: 190px; gap: 1.3rem; padding: 1.5rem; }
.agenda-date { display: flex; width: 76px; height: 76px; flex: 0 0 76px; flex-direction: column; align-items: center; justify-content: center; border-radius: 1rem; color: white; background: var(--ayo-orange); transition: background .35s ease, transform .35s ease; }
.agenda-card:hover .agenda-date { background: var(--ayo-green); transform: rotate(-6deg) scale(1.05); }
.agenda-date strong { font-size: 1.45rem; line-height: 1; }
.agenda-date span { margin-top: .25rem; font-size: .75rem; font-weight: 700; }
.agenda-date i { font-size: 1.35rem; }
.agenda-date-pending span { font-size: .62rem; text-transform: uppercase; }
.agenda-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.agenda-copy small { color: var(--ayo-green); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.agenda-copy h4 { margin: .4rem 0 .5rem; color: var(--ayo-deep); font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.agenda-copy p { margin: 0 0 1rem; color: var(--ayo-muted); font-size: .9rem; line-height: 1.6; }
.agenda-copy button, .agenda-copy a { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding: 0; border: 0; color: var(--ayo-orange-text); background: transparent; font-size: .9rem; font-weight: 800; text-decoration: none; }
.agenda-copy button i, .agenda-copy a i { transition: transform .25s ease; }
.agenda-copy button:hover i, .agenda-copy a:hover i { transform: translateX(4px); }
.event-column-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 0 .25rem; }
.event-column-heading > i { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 1rem; color: white; background: linear-gradient(135deg, #89958c, #657269); box-shadow: 0 .65rem 1.3rem rgba(8,43,29,.14); font-size: 1.3rem; }

.event-column-heading.upcoming > i { background: linear-gradient(135deg, #ff914d, var(--ayo-orange)); }
.event-column-heading small { color: var(--ayo-orange-text); font-weight: 800; text-transform: uppercase; }
.event-column-heading h3 { margin: .2rem 0 0; color: var(--ayo-green); font-size: 1.35rem; }

.past-event-gallery { display: grid; height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; background: transparent; }
.past-event-photo { overflow: hidden; margin: 0; }
.past-event-gallery button { display: block; width: 100%; height: 230px; overflow: hidden; padding: 0; border: 0; background: #ddd; cursor: zoom-in; }
.past-event-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform .35s ease; }
.past-event-photo:hover img { transform: scale(1.045); }
.past-event-photo figcaption { padding: 1.3rem 1.5rem 1.5rem; }
.past-event-photo figcaption strong { display: block; margin-bottom: .45rem; color: var(--ayo-deep); font-size: 1.2rem; line-height: 1.25; }
.past-event-photo figcaption p { margin: 0; color: var(--ayo-muted); font-size: .9rem; line-height: 1.6; }
.past-event-photo figcaption .past-event-date { margin-top: .65rem; color: var(--ayo-green); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.event-lightbox { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 2rem; background: rgba(0,0,0,.88); }
.event-lightbox.show { display: flex; }
.event-lightbox img { max-width: min(900px, 94vw); max-height: 88vh; border-radius: .7rem; object-fit: contain; }
.event-lightbox button { position: absolute; width: 46px; height: 46px; right: 1.5rem; top: 1.5rem; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.15); font-size: 1.2rem; }

.program-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: .9rem; background: var(--ayo-green); color: white; font-size: 1.35rem; }

.impact-stat { padding: 1.6rem; border: 1px solid #e4eae5; border-radius: 1.2rem; background: white; }

.team-section { padding-top: 4.25rem; padding-bottom: 4.25rem; }

.presentation-quote { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--ayo-orange); color: var(--ayo-green); background: var(--ayo-cream); font-family: "Outfit", sans-serif; font-weight: 700; }
.presentation-quote i { color: var(--ayo-orange-text); font-size: 1.5rem; }

.team-section { background: var(--ayo-cream); }

.team-slider { padding: .25rem 0 2rem; }
/* Fondateur et co-fondateur : deux grands panneaux, poste en titre au-dessus,
   nom pose sur la photo. Volontairement hors du style de carte commun. */
.founders-duo { display: grid; max-width: 1040px; margin: 0 auto 4.5rem; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.founder-role { margin-bottom: 1.3rem; color: var(--ayo-deep); font-family: "Outfit", sans-serif; font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 700; letter-spacing: -.02em; text-align: center; }
.founder-photo { position: relative; overflow: hidden; border-radius: 1.4rem; aspect-ratio: 7 / 6; box-shadow: 0 1.4rem 3rem rgba(8,43,29,.18); }
.founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Voile sombre : sans lui, un nom blanc sur une photo claire devient illisible. */
.founder-photo::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 45%; background: linear-gradient(to top, rgba(8,43,29,.85), rgba(8,43,29,0)); }
.founder-name { position: absolute; bottom: 1.4rem; left: 1.6rem; z-index: 1; color: white; font-family: "Outfit", sans-serif; font-size: 1.3rem; font-weight: 700; }
.founder-name::after { content: ""; display: block; width: 2.4rem; height: 3px; margin-top: .45rem; border-radius: 2px; background: var(--ayo-orange); }

/* Aligne sur la grille des cartes (meme largeur max) pour que le titre parte du bord de la 1re carte. */
.committee-heading { max-width: 1140px; margin: 0 auto 2rem; }
.committee-heading h2 { margin-bottom: .8rem; color: var(--ayo-deep); font-family: "Outfit", sans-serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; }
.committee-heading p { max-width: 900px; margin: 0; color: var(--ayo-muted); font-size: 1.02rem; line-height: 1.75; }

.team-track { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1140px; margin: 0 auto; gap: 1.75rem; }
/* Comite de direction : photo pleine, nom et poste poses dessus (modele kaydangroupe.com). */
.director-card { position: relative; flex: 0 1 calc((100% - 5.25rem) / 4); overflow: hidden; border-radius: 1.1rem; aspect-ratio: 1 / 1; box-shadow: 0 .9rem 2.2rem rgba(8,43,29,.16); transition: .25s ease; }
.director-card:hover { transform: translateY(-6px); box-shadow: 0 1.4rem 3rem rgba(8,43,29,.24); }
/* Le portrait est un bouton : un clic ouvre la photo entiere dans la visionneuse. */
.director-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.director-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.director-card img.team-portrait-franck { object-position: center 35%; }
/* Voile sombre : sans lui le texte blanc disparait sur les photos a fond clair.
   pointer-events: none sur le voile ET sur la legende, sinon ils interceptent le clic
   destine au bouton qui se trouve dessous. */
.director-card::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 58%; background: linear-gradient(to top, rgba(8,43,29,.92), rgba(8,43,29,.55) 45%, rgba(8,43,29,0)); pointer-events: none; }
.director-legend { position: absolute; right: 1rem; bottom: .95rem; left: 1.1rem; z-index: 1; pointer-events: none; }
.director-zoom:focus-visible { outline: 3px solid var(--ayo-orange); outline-offset: -3px; }
.director-legend h3 { margin: 0 0 .25rem; color: white; font-family: "Outfit", sans-serif; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.director-legend p { margin: 0; color: rgba(255,255,255,.88); font-size: .76rem; font-weight: 600; line-height: 1.35; }
.team-avatar { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; background: var(--ayo-deep); }
.team-avatar span { display: grid; width: 92px; height: 92px; place-items: center; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; color: white; font-family: "Outfit", sans-serif; font-size: 1.9rem; font-weight: 700; }
.team-avatar small { margin-top: .8rem; color: rgba(255,255,255,.75); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Variante « nom sous la photo » (page Formateurs).
   La carte n'est plus la boite carree : c'est la PHOTO qui garde le format 1/1 et les
   coins arrondis, la legende se pose dessous sur le fond de la section. Le degrade
   sombre et le positionnement absolu de la legende sont donc neutralises. */
.director-card--texte-dessous { overflow: visible; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.director-card--texte-dessous::after { content: none; }
.director-card--texte-dessous .director-zoom,
.director-card--texte-dessous .team-avatar { aspect-ratio: 1 / 1; height: auto; overflow: hidden; border-radius: 1.1rem; box-shadow: 0 .9rem 2.2rem rgba(8,43,29,.16); transition: box-shadow .25s ease; }
.director-card--texte-dessous:hover .director-zoom,
.director-card--texte-dessous:hover .team-avatar { box-shadow: 0 1.4rem 3rem rgba(8,43,29,.24); }
.director-card--texte-dessous .director-legend { position: static; padding: .9rem .15rem 0; }
.director-card--texte-dessous .director-legend h3 { color: var(--ayo-deep); font-size: 1.05rem; }
.director-card--texte-dessous .director-legend p { color: var(--ayo-muted); font-size: .8rem; font-weight: 600; }

.about-split-hero { padding: 7.5rem 0 4.5rem; background: radial-gradient(circle at 90% 10%, rgba(244,119,37,.08), transparent 40%), var(--ayo-white); }
.about-split-hero h1 { margin-bottom: 1.6rem; color: var(--ayo-deep); font-size: clamp(2.3rem, 5.2vw, 4.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.about-split-lead { max-width: 560px; margin-bottom: 1.6rem; color: var(--ayo-muted); font-size: 1.1rem; line-height: 1.75; }
.about-split-hero hr { max-width: 560px; margin: 0 0 1.4rem; border-color: #d9d3c6; opacity: 1; }
.about-split-tags { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.about-split-tags li { padding: .45rem .95rem; border: 1px solid #ddd6c8; border-radius: 999px; color: var(--ayo-green); background: rgba(255,255,255,.7); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.about-split-hero .btn { padding: .85rem 1.5rem; font-size: 1rem; white-space: nowrap; }
.btn-outline-brand { border: 1px solid var(--ayo-green); color: white; background: var(--ayo-green); box-shadow: 0 .65rem 1.5rem rgba(29,102,69,.2); }
.btn-outline-brand:hover, .btn-outline-brand:focus { border-color: var(--ayo-deep); color: white; background: var(--ayo-deep); }
.about-split-visual { position: relative; max-width: 560px; margin-right: auto; overflow: hidden; border-radius: 1.75rem; box-shadow: 0 1.5rem 3.5rem rgba(8,43,29,.16); }
.about-split-visual { position: sticky; top: 110px; }
.about-split-visual img { display: block; width: 100%; height: 640px; object-fit: cover; object-position: 50% 30%; }
.about-split-card { position: absolute; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; padding: 1.1rem 1.3rem; border-radius: 1.1rem; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); box-shadow: 0 .8rem 2rem rgba(0,0,0,.15); }
.about-split-card span { display: inline-block; margin-bottom: .5rem; padding: .3rem .8rem; border: 1px solid rgba(29,102,69,.22); border-radius: 999px; color: var(--ayo-green); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about-split-card p { margin: 0; color: var(--ayo-deep); font-family: "Outfit", sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.team-hero { padding: 9rem 0 4rem; background: radial-gradient(circle at 50% 0%, rgba(244,119,37,.08), transparent 45%), var(--ayo-white); }
.team-hero h1 { max-width: 920px; margin: 0 auto 1.5rem; color: var(--ayo-deep); font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.team-hero h1 span { color: var(--ayo-green); }
.team-hero p { max-width: 640px; margin: 0 auto; color: var(--ayo-muted); font-size: 1.1rem; line-height: 1.75; }
.team-join { padding: 4.5rem 0; background: var(--ayo-white); }
.team-join-panel { position: relative; overflow: hidden; padding: 4rem 3.5rem; border-radius: 2rem; color: white; background: radial-gradient(circle at 85% 15%, rgba(244,119,37,.18), transparent 40%), linear-gradient(135deg, var(--ayo-deep) 0%, #0f4a31 55%, var(--ayo-green) 100%); box-shadow: 0 2rem 4rem rgba(8,43,29,.22); }
.team-join-panel h2 { margin-bottom: 1.4rem; font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.team-join-panel > .row > div > p { max-width: 520px; margin-bottom: 2rem; color: rgba(255,255,255,.85); font-size: 1.1rem; line-height: 1.7; }
.team-join-card { padding: 2rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1.4rem; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.team-join-card-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.team-join-icon { display: grid; width: 56px; height: 56px; flex: 0 0 56px; place-items: center; border-radius: 1rem; color: white; background: var(--ayo-orange); font-size: 1.5rem; }
.team-join-card h3 { margin: 0 0 .2rem; color: white; font-size: 1.3rem; font-weight: 700; }
.team-join-card small { color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.team-join-card p { margin-bottom: 1.3rem; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.65; }
.team-join-card a { color: white; font-weight: 800; text-decoration: none; }
.team-join-card a i { display: inline-block; margin-left: .4rem; }
.team-join-card a i { transition: transform .25s ease; }
.team-join-card a:hover { color: #ffc29a; }
.team-join-card a:hover i { transform: translateX(4px); }
.about-story { padding: 4.5rem 0; background: var(--ayo-white); }
.story-side-card { padding: 1.5rem 1.6rem; }
.story-side-card span { display: inline-block; margin-bottom: .8rem; padding: .35rem .85rem; border: 1px solid rgba(29,102,69,.22); border-radius: 999px; color: var(--ayo-green); background: #e9f2ed; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.story-side-card p { margin: 0; color: var(--ayo-deep); font-family: "Outfit", sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.story-text-card { padding: 2.4rem 2.6rem; }
.story-text-card p { max-width: 1000px; margin: 0 0 1.2rem; color: #4f5a53; font-size: 1.05rem; line-height: 1.85; }
.story-text-card p:last-child { margin-bottom: 0; }

/* Page de confidentialite : la carte partagee ne gere que les paragraphes,
   on y ajoute les titres et les listes dont un texte legal a besoin. */
.legal-section { background: var(--ayo-white); }
.legal-block { max-width: 860px; margin-inline: auto; }
.legal-block h2 { margin: 2.2rem 0 .8rem; color: var(--ayo-deep); font-family: "Outfit", sans-serif; font-size: 1.35rem; font-weight: 700; }
.legal-block h2:first-of-type { margin-top: 1.4rem; }
.legal-block ul { margin: 0 0 1.2rem; padding-left: 1.3rem; color: #4f5a53; font-size: 1.05rem; line-height: 1.85; }
.legal-block li { margin-bottom: .35rem; }
.legal-block a { color: var(--ayo-green); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.legal-block a:hover { color: var(--ayo-dark); }
.legal-updated { color: var(--ayo-muted); font-size: .9rem !important; font-style: italic; }
.about-values-section { padding: 4.5rem 0; background: var(--ayo-cream); }
.about-values-intro { max-width: 1120px; margin-bottom: 3rem; }
.values-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.principle-card { position: relative; flex: 0 1 calc((100% - 3rem) / 3); min-height: 270px; padding: 1.9rem 1.8rem 2.2rem; overflow: hidden; }
.principle-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2.1rem; }
.principle-card-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 1rem; color: var(--ayo-green); background: #e7f1ec; font-size: 1.5rem; box-shadow: inset 0 0 0 1px rgba(29,102,69,.12); }
.principle-card-top small { color: var(--ayo-muted); font-size: .72rem; font-weight: 800; letter-spacing: .35em; }
.principle-card h3 { margin-bottom: .8rem; color: var(--ayo-deep); font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; }
.principle-card p { margin: 0; color: var(--ayo-muted); font-size: 1.02rem; line-height: 1.75; }
.about-pillars { padding-top: 4.5rem; padding-bottom: 4.5rem; background: var(--ayo-cream); }
.about-pillars-heading { max-width: 760px; margin-bottom: 2.5rem; }

.guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.guide-card { padding: 1.8rem 1.7rem 1.9rem; }
.guide-card-icon { display: grid; width: 52px; height: 52px; margin-bottom: 1.3rem; place-items: center; border-radius: .9rem; color: var(--ayo-green); background: #e7f1ec; font-size: 1.35rem; }
.guide-card:nth-child(2) .guide-card-icon { color: var(--ayo-orange-text); background: #fff2eb; }
.guide-card small { display: block; margin-bottom: .45rem; color: var(--ayo-green); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guide-card h3 { margin-bottom: .75rem; color: var(--ayo-deep); font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.guide-card p { margin: 0; color: var(--ayo-muted); font-size: .92rem; line-height: 1.7; }
.guide-card-highlight { border-color: #f6dcc6; background: linear-gradient(160deg, #fff8f1, #fdeede); }
.guide-card-badge { display: inline-block; margin-bottom: 1.3rem; padding: .4rem .9rem; border: 1px solid rgba(29,102,69,.22); border-radius: 999px; color: var(--ayo-green); background: white; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.guide-card-highlight h3 { color: var(--ayo-green); }

.about-mission-details { padding: 4.5rem 0; background: var(--ayo-white); }
.mission-details-heading { position: sticky; top: 120px; }
.mission-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mission-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.4rem; }
.mission-card span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(29,102,69,.2); border-radius: 50%; color: var(--ayo-green); background: #e9f2ed; font-family: "Outfit", sans-serif; font-size: .9rem; font-weight: 800; }
.mission-card p { margin: 0; color: var(--ayo-deep); font-size: .95rem; font-weight: 600; line-height: 1.55; }
.about-engagement { padding: 4.5rem 0; background: var(--ayo-cream); }
.engagement-card { position: relative; overflow: hidden; padding: 3rem 3.2rem; }
.engagement-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: linear-gradient(180deg, var(--ayo-green), var(--ayo-orange)); }
.engagement-card p { margin: 0 0 1.1rem; color: #4f5a53; font-size: 1.02rem; line-height: 1.8; }
.engagement-card p.engagement-ambition { margin: 0; padding: 1.1rem 1.3rem; border-radius: 1rem; color: var(--ayo-deep); background: #e9f2ed; font-weight: 600; }

.impact-stat { display: flex; min-height: 180px; flex-direction: column; justify-content: center; text-align: center; box-shadow: 0 1rem 3rem rgba(8,43,29,.06); }
.impact-stat strong { color: var(--ayo-green); font-family: "Outfit", sans-serif; font-size: 2rem; }
.impact-stat span { color: var(--ayo-muted); font-size: .8rem; }

.contact-main-section { position: relative; overflow: hidden; background: var(--ayo-white); }
/* Coloured halos behind the glass: without something to blur, the effect reads as washed out */
.contact-main-section::before, .contact-main-section::after { content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; border-radius: 50%; filter: blur(14px); pointer-events: none; }
.contact-main-section::before { left: -220px; top: -40px; background: radial-gradient(circle, rgba(29,102,69,.42), transparent 66%); }
.contact-main-section::after { right: -240px; bottom: -160px; background: radial-gradient(circle, rgba(244,119,37,.38), transparent 66%); }
.contact-main-section .container { position: relative; z-index: 1; }
@supports (backdrop-filter: blur(4px)) {
    .principle-card, .guide-card, .mission-card, .story-side-card, .story-text-card,
    .engagement-card, .preview-card, .commitment-card, .activities-card, .past-event-photo,
    .agenda-card, .gallery-page-item, .message-card,
    .contact-layout, .contact-form-card, .contact-primary-actions > a, .contact-social-grid a {
        background: rgba(255,255,255,.42);
        backdrop-filter: blur(30px) saturate(185%);
        -webkit-backdrop-filter: blur(30px) saturate(185%);
        border-color: rgba(255,255,255,.85);
        box-shadow: 0 1.8rem 3.6rem rgba(8,43,29,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
    }
    .contact-primary-actions > a:hover, .contact-social-grid a:hover { background: rgba(255,255,255,.82); }
}
.contact-layout { display: grid; overflow: hidden; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); }
.contact-panel { padding: 3rem; }
.contact-panel > h2 { max-width: 620px; margin: .9rem 0 1rem; color: var(--ayo-green); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.05; }
.contact-lead { max-width: 650px; margin-bottom: 2rem; color: var(--ayo-muted); font-size: .92rem; line-height: 1.8; }
.contact-primary-actions { display: grid; gap: .8rem; }
.contact-primary-actions > a { display: grid; grid-template-columns: 52px 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--card-border); border-radius: 1rem; color: var(--ayo-deep); background: white; box-shadow: 0 .45rem 1.1rem rgba(8,43,29,.07); text-decoration: none; transition: .25s ease; }
.contact-primary-actions > a:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow); transform: translateX(5px); }
.contact-action-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: .9rem; color: white; background: var(--ayo-orange); font-size: 1.3rem; transition: background .25s ease; }
.contact-primary-actions > a:hover .contact-action-icon { background: var(--ayo-green); }
.contact-primary-actions small, .contact-primary-actions strong, .contact-primary-actions em { display: block; }
.contact-primary-actions small { margin-bottom: .15rem; color: var(--ayo-orange-text); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.contact-primary-actions strong { color: var(--ayo-green); font-size: .9rem; }
.contact-primary-actions em { margin-top: .15rem; color: var(--ayo-muted); font-size: .72rem; font-style: normal; }
.contact-primary-actions > a > i { color: var(--ayo-green); }
.contact-information { display: grid; margin-top: 1.5rem; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.contact-information > div { display: flex; gap: .8rem; padding-top: 1rem; border-top: 1px solid #e1e8e3; }
.contact-information > div > i { color: var(--ayo-orange-text); font-size: 1.2rem; }
.contact-information small, .contact-information strong, .contact-information em { display: block; }
.contact-information small { color: var(--ayo-muted); font-size: .62rem; text-transform: uppercase; }
.contact-information strong { margin: .2rem 0; color: var(--ayo-green); font-size: .8rem; }
.contact-information em { color: var(--ayo-muted); font-size: .7rem; font-style: normal; }
.contact-inline-social { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid #e1e8e3; }
.contact-inline-social h3 { margin-bottom: .35rem; color: var(--ayo-green); font-size: 1.15rem; font-weight: 800; }
.contact-inline-social > p { margin-bottom: 1rem; color: var(--ayo-muted); font-size: .75rem; }
.contact-inline-social .contact-social-grid { max-width: none; }
.contact-aside { position: relative; overflow: hidden; padding: 3rem 2rem; color: white; background: linear-gradient(145deg, var(--ayo-green), var(--ayo-deep)); }
.contact-aside::after { content: ""; position: absolute; width: 240px; height: 240px; right: -120px; bottom: -120px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.contact-aside > img { width: 58px; height: 58px; margin-bottom: 2rem; }
.contact-aside > span { display: block; color: #ffc29a; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-aside h2 { margin: .8rem 0 1rem; color: white; font-size: 1.7rem; font-weight: 800; line-height: 1.15; }
.contact-aside p { margin-bottom: 1.8rem; color: rgba(255,255,255,.7); font-size: .8rem; line-height: 1.7; }
.contact-aside-primary, .contact-aside-secondary { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-radius: .75rem; font-size: .8rem; font-weight: 800; text-decoration: none; }
.contact-aside-primary { margin-bottom: .75rem; color: white; background: var(--ayo-orange); }
.contact-aside-primary:hover { color: white; background: #dd6418; }
.contact-aside-secondary { color: white; border: 1px solid rgba(255,255,255,.25); }
.contact-aside-secondary:hover { color: var(--ayo-deep); background: white; }

.contact-social-grid { display: grid; max-width: 760px; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.contact-social-grid a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--card-border); border-radius: 1rem; color: var(--ayo-deep); background: white; box-shadow: 0 .45rem 1.1rem rgba(8,43,29,.07); text-decoration: none; transition: .25s ease; }
.contact-social-grid a > i:first-child { display: grid; width: 44px; height: 44px; place-items: center; border-radius: .8rem; color: white; background: var(--ayo-green); }
.contact-social-grid strong, .contact-social-grid small { display: block; }
.contact-social-grid strong { color: var(--ayo-green); font-size: .85rem; }
.contact-social-grid small { color: var(--ayo-muted); font-size: .68rem; }
.contact-social-grid a:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow); transform: translateY(-3px); }

.contact-form-section { position: relative; overflow: hidden; background: var(--ayo-cream); }
.contact-form-section::before, .contact-form-section::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(14px); pointer-events: none; }
.contact-form-section::before { width: 760px; height: 760px; right: -240px; top: -180px; background: radial-gradient(circle, rgba(29,102,69,.34), transparent 66%); }
.contact-form-section::after { width: 560px; height: 560px; left: -180px; bottom: -200px; background: radial-gradient(circle, rgba(244,119,37,.30), transparent 66%); }
.contact-form-section .container { position: relative; z-index: 1; }
.contact-form-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; }
.contact-form-intro span.eyebrow { margin-bottom: 1rem; }
.contact-form-intro h2 { margin-bottom: 1rem; color: var(--ayo-green); font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.1; }
.contact-form-intro p { max-width: 380px; color: var(--ayo-muted); font-size: .92rem; line-height: 1.8; }
.contact-form-card { padding: 2.5rem; }
.contact-form-alert { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; padding: .9rem 1.1rem; border-radius: .75rem; font-size: .85rem; font-weight: 600; }
.contact-form-alert-success { color: var(--ayo-green); background: #eaf5ee; border: 1px solid #bfe3cb; }
.contact-form-alert-error { color: #a13b2a; background: #fbeae6; border: 1px solid #f0c3b8; }
.contact-form-alert i { font-size: 1.2rem; }
.contact-form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.contact-form-field { display: flex; flex-direction: column; margin-bottom: 1.2rem; }
.contact-form-field:last-child { margin-bottom: 0; }
.contact-form-field label { margin-bottom: .5rem; color: var(--ayo-green); font-size: .78rem; font-weight: 700; }
.contact-form-field label small { color: var(--ayo-muted); font-weight: 500; text-transform: none; }
.contact-form-field input, .contact-form-field textarea { padding: .8rem 1rem; border: 1px solid #dfe6e1; border-radius: .75rem; font-family: inherit; font-size: .9rem; color: var(--ayo-deep); background: white; transition: .2s ease; }
.contact-form-field input:focus, .contact-form-field textarea:focus { outline: none; border-color: var(--ayo-orange); background: white; box-shadow: 0 0 0 3px rgba(244,119,37,.12); }
.contact-form-field textarea { resize: vertical; min-height: 120px; }
.contact-form-field input.is-invalid, .contact-form-field textarea.is-invalid { border-color: #d5533f; }
.contact-form-error { margin-top: .4rem; color: #d5533f; font-size: .75rem; font-weight: 600; }
.contact-form button[type="submit"] { margin-top: .5rem; }

.adhesion-page { padding: 7.5rem 1rem 5rem; background: var(--ayo-cream); }
.adhesion-shell { max-width: 760px; margin: 0 auto; overflow: hidden; background: white; box-shadow: 0 1.5rem 4rem rgba(8,43,29,.12); }
.adhesion-hero { position: relative; overflow: hidden; padding: 3rem 2rem 3.75rem; color: white; background: linear-gradient(135deg, var(--ayo-green), var(--ayo-dark)); text-align: center; }
.adhesion-hero::before { content: ""; position: absolute; width: 280px; height: 280px; right: -80px; top: -120px; border-radius: 50%; background: var(--ayo-orange); opacity: .15; }
.adhesion-logo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1.35rem; }
.adhesion-logo img { width: 54px; height: 54px; }
.adhesion-logo strong { font-family: "Outfit", sans-serif; font-size: 2.15rem; letter-spacing: .04em; }
.adhesion-tagline { position: relative; z-index: 1; margin-bottom: 1rem; color: #f6c199; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.adhesion-hero h1 { position: relative; z-index: 1; max-width: 610px; margin: 0 auto .75rem; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; line-height: 1.05; }
.adhesion-intro { position: relative; z-index: 1; max-width: 540px; margin: 0 auto; color: rgba(255,255,255,.84); font-size: .95rem; line-height: 1.7; }
.adhesion-badges { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.adhesion-badges span { padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.28); border-radius: 50rem; background: rgba(255,255,255,.1); font-size: .72rem; }
.adhesion-why { padding: 2.3rem 2rem; }
.adhesion-why h2 { margin-bottom: 1.5rem; color: var(--ayo-dark); font-size: 1.4rem; font-weight: 800; text-align: center; }
.adhesion-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.adhesion-why-grid article { padding: 1rem .65rem; text-align: center; }
.adhesion-why-grid article > span { display: grid; width: 48px; height: 48px; margin: 0 auto .7rem; place-items: center; border-radius: 50%; color: white; background: var(--ayo-orange); font-weight: 800; }
.adhesion-why-grid h3 { margin-bottom: .35rem; color: var(--ayo-dark); font-size: .9rem; font-weight: 800; }
.adhesion-why-grid p { margin: 0; color: var(--ayo-muted); font-size: .75rem; line-height: 1.55; }
.adhesion-form-block { background: white; }
.adhesion-cta-strip { padding: 1rem; color: white; background: var(--ayo-orange); font-size: .88rem; font-weight: 800; text-align: center; }
.adhesion-form-copy { padding: 2.5rem 2rem 3rem; text-align: center; }
.adhesion-form-copy h2 { margin: .8rem 0 .4rem; color: var(--ayo-dark); font-size: 1.5rem; font-weight: 800; }
.adhesion-form-copy > p { color: var(--ayo-muted); font-size: .82rem; }
.adhesion-form-copy ul { max-width: 470px; margin: 1.5rem auto; padding: 0; list-style: none; text-align: left; }
.adhesion-form-copy li { display: flex; gap: .65rem; padding: .45rem 0; color: var(--ayo-muted); font-size: .82rem; }
.adhesion-form-copy li i { color: var(--ayo-green); }
.adhesion-submit { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: min(100%, 380px); padding: .95rem 1.2rem; color: white; background: var(--ayo-orange); box-shadow: 0 .6rem 1.4rem rgba(244,119,37,.3); font-size: .92rem; font-weight: 800; text-decoration: none; }
.adhesion-submit:hover { color: white; background: #dd6418; transform: translateY(-2px); }
.adhesion-form-copy > small { display: block; margin-top: .8rem; color: var(--ayo-muted); font-size: .68rem; }

.impact-section { background: var(--ayo-deep); }
.impact-path { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.impact-path span { padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 50rem; background: rgba(255,255,255,.07); font-weight: 700; }
.impact-path i { color: var(--ayo-orange); }
.cta-card { padding: 5rem 2rem; border-radius: 2rem; background: linear-gradient(125deg, var(--ayo-deep), var(--ayo-green)); color: white; box-shadow: 0 2rem 4rem rgba(8,43,29,.22); }
.cta-card p { max-width: 620px; color: rgba(255,255,255,.8); }
.cta-card .btn-light { color: var(--ayo-green); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.btn-cta-ghost { border: 1px solid transparent; color: white; background: rgba(255,255,255,.16); }
.btn-cta-ghost:hover, .btn-cta-ghost:focus { color: white; background: rgba(255,255,255,.28); }

footer { padding: 5rem 0 2rem; color: rgba(255,255,255,.6); background: #061f15; }
footer a { color: rgba(255,255,255,.65); text-decoration: none; }
footer a:hover { color: white; }
.footer-title { color: white; font-family: "Manrope", sans-serif; font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.socials { display: flex; gap: .7rem; }
.socials a { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.socials a:hover { border-color: var(--ayo-orange); background: var(--ayo-orange); transform: translateY(-3px); }
footer hr { margin: 3.5rem 0 1.5rem; border-color: rgba(255,255,255,.14); }

@media (max-width: 991.98px) {
    .navbar-collapse { margin-top: 1rem; padding: 1rem; border: 1px solid #e7ece8; border-radius: 1rem; background: white; box-shadow: 0 1rem 2rem rgba(8,43,29,.1); }
    .hero { min-height: auto; text-align: center; }
    .hero-copy { margin-inline: auto; }
    .hero .d-flex { justify-content: center; }
    
    .hero-pillars { margin-inline: auto; }
    .team-track { gap: 1.25rem; }
    .director-card { flex-basis: calc((100% - 2.5rem) / 3); }
    .founders-duo { margin-bottom: 3.5rem; gap: 2rem; }
    .mission-details-heading { position: static; }
    .about-split-hero { padding: 7.5rem 0 3.5rem; }
    .about-split-visual { position: relative; top: auto; margin: 0 auto; }
    .about-split-visual img { height: 480px; }
    .guide-cards { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
    .principle-card { flex-basis: calc((100% - 1.5rem) / 2); }
    .home-about { padding: 3.5rem 0 4rem; }
    .home-about-content { padding-left: 0; }
    .hero { padding-bottom: 6rem; }
    .hero::after { background-image: linear-gradient(180deg, transparent calc(100% - 70px), var(--ayo-cream) 100%), linear-gradient(90deg, rgba(8,43,29,.95) 0%, rgba(8,43,29,.75) 45%, rgba(8,43,29,.2) 80%); }
    
    
    
    .commitment-banner { min-height: 200px; }
    .home-programs-preview { padding: 4.5rem 0; }
    .programs-grid { grid-template-columns: repeat(2, 1fr); }
    .commitment-image { height: 230px; }
    
    
    .event-agenda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-form-layout { grid-template-columns: 1fr; gap: 2rem; }
    .contact-form-intro p { max-width: none; }
    .contact-aside { padding: 2.5rem; }
    
    
    
    
    
    .gallery-page-grid { grid-template-columns: repeat(2, 1fr); }
    
    
    
}
@media (max-width: 575.98px) {
    .section-padding { padding: 4.5rem 0; }
    .hero { padding: 7rem 0 6rem; }
    .hero .display-3 { font-size: 2.65rem; }
    
    
    .commitment-banner { min-height: 180px; padding: 2.5rem 0; }
    .home-programs-preview h2 { margin-bottom: 2rem; }
    .programs-grid { grid-template-columns: 1fr; }
    .social-commitments { padding: 4rem 0; }
    .social-commitments hr { margin: 2rem 0; }
    
    
    
    
    
    
    .gallery-page-grid { grid-template-columns: 1fr; gap: 1rem; }
    .gallery-page-item button { height: 220px; }
    .live-video-frame { height: 220px; }
    
    
    
    
    
    
    .about-pillars { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    
    
    
    .event-agenda-grid { grid-template-columns: 1fr; }
    .agenda-card { min-height: 0; }
    .contact-panel, .contact-aside { padding: 2rem 1.15rem; }
    .contact-primary-actions > a { grid-template-columns: 46px 1fr auto; gap: .75rem; padding: .85rem; }
    .contact-action-icon { width: 46px; height: 46px; }
    .contact-form-card { padding: 1.75rem 1.25rem; }
    .contact-form-grid { grid-template-columns: 1fr; gap: 0; }
    .contact-information, .contact-social-grid { grid-template-columns: 1fr; }
    
    
    
    .value { min-height: 175px; padding: 1rem; }
    .impact-path i { display: none; }
    .cta-card { padding: 4rem 1.3rem; }
    .adhesion-page { padding: 6.5rem 0 0; }
    .adhesion-hero, .adhesion-why, .adhesion-form-copy { padding-right: 1.15rem; padding-left: 1.15rem; }
    .adhesion-why-grid { grid-template-columns: 1fr; gap: .35rem; }
}

@media (max-width: 991.98px) {
    .section-padding { padding: 5rem 0; }
    .navbar-nav { align-items: stretch !important; }
    .navbar-nav .btn { display: block; margin-top: .6rem; }
    .page-hero, .programs-hero, .contact-hero, .gallery-hero, .events-hero, .program-detail-hero { min-height: 500px; padding: 7rem 0 4rem; }
    .page-hero h1,
    .program-detail-hero h1 { font-size: 3.6rem; }
}

@media (max-width: 767.98px) {
    .section-title { font-size: 2.45rem; }
    .page-hero, .programs-hero, .contact-hero, .gallery-hero, .events-hero, .program-detail-hero { min-height: 450px; background-position: 62% center; }
    .page-hero h1,
    .program-detail-hero h1 { font-size: 3rem; }
    .home-programs-preview h2,
    .social-commitments h2 { font-size: 2.25rem; }
    .preview-copy p { grid-template-columns: repeat(2, 1fr); }
    footer { text-align: center; }
    footer .socials { justify-content: center; }
}

@media (max-width: 575.98px) {
    .container { width: 100%; padding-inline: 1.15rem; }
    .hero { background-position: 68% center; }
    .hero .display-3 { font-size: clamp(2.35rem, 12vw, 3rem); }
    .hero-copy { font-size: .98rem; line-height: 1.65; }
    .hero .btn { width: 100%; }
    .hero-logo { max-width: 245px; }
    .hero-pillars { grid-template-columns: 1fr; }
    .engagement-card { padding: 2rem 1.4rem 2rem 1.7rem; }
    .about-engagement { padding: 3.5rem 0; }
    .team-join-panel { padding: 2.5rem 1.4rem; border-radius: 1.4rem; }
    .team-join-card { padding: 1.4rem; }
    .team-join { padding: 3rem 0; }
    .team-track { max-width: 380px; }
    .director-card { flex-basis: calc((100% - 1.25rem) / 2); }
    .founders-duo { grid-template-columns: 1fr; }
    .team-hero { padding: 7.5rem 0 3rem; }
    .story-text-card { padding: 1.6rem 1.4rem; }
    .story-text-card p { font-size: .98rem; }
    .about-story { padding: 3.5rem 0; }
    .about-split-tags li { padding: .45rem .8rem; font-size: .64rem; letter-spacing: .03em; }
    .mission-cards { grid-template-columns: 1fr; }
    .principle-card { flex-basis: 100%; }
    .about-values-section { padding: 3.5rem 0; }
    .cta-actions .btn { width: 100%; }
    .page-hero, .programs-hero, .contact-hero, .gallery-hero, .events-hero, .program-detail-hero { min-height: 410px; padding: 6.5rem 0 3rem; }
    .page-hero h1,
    .program-detail-hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
    .section-title { font-size: clamp(2rem, 10vw, 2.55rem); }
    
    
    .past-event-gallery { height: auto; }
    .cta-card { border-radius: 1.25rem; }
}

@media (max-width: 399.98px) {
    .navbar-brand { font-size: 1.1rem; }
    .navbar-brand img { width: 36px; height: 36px; }
    
    
    
}

/* Espace équipe (connexion + messages) */
.admin-page { padding: 9rem 0 5rem; background: var(--ayo-cream); }
.admin-auth-card { max-width: 460px; margin: 0 auto; }
.admin-auth-title { margin: 1rem 0 .5rem; color: var(--ayo-green); font-size: 2rem; font-weight: 800; }
.admin-auth-lead { margin-bottom: 1.6rem; color: var(--ayo-muted); font-size: .9rem; line-height: 1.7; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.admin-toolbar h1 { margin: .8rem 0 0; color: var(--ayo-green); font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; }
.admin-filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.message-card { padding: 1.4rem 1.6rem; margin-bottom: 1rem; }
.message-card.is-unread { border-left: 4px solid var(--ayo-orange); }
.message-card-head { display: flex; align-items: center; gap: .8rem; }
.message-card h2 { margin: 0; color: var(--ayo-deep); font-size: 1.15rem; font-weight: 800; }
.message-badge { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 50rem; color: white; background: var(--ayo-orange); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.message-meta { margin: .5rem 0 0; color: var(--ayo-muted); font-size: .82rem; }
.message-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; color: var(--ayo-orange-text); font-size: .9rem; font-weight: 800; text-decoration: none; }
.message-link i { transition: transform .25s ease; }
.message-link:hover { color: var(--ayo-orange-text); }
.message-link:hover i { transform: translateX(4px); }
.message-body { margin: 1.4rem 0; color: var(--ayo-deep); font-size: .95rem; line-height: 1.85; white-space: pre-line; }
.message-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-delete { color: #a13b2a; border: 1px solid #f0c3b8; background: #fbeae6; }
.btn-delete:hover { color: white; background: #a13b2a; border-color: #a13b2a; }
.message-hint { margin: 1rem 0 0; color: var(--ayo-muted); font-size: .78rem; }
.auth-pill { color: white; background: var(--ayo-green); border-color: var(--ayo-green); }
.auth-pill:hover, .auth-pill:focus { color: white; background: var(--ayo-deep); border-color: var(--ayo-deep); }
.auth-pill i { font-size: 1rem; }
.page-item.active .page-link { color: white; background: var(--ayo-green); border-color: var(--ayo-green); }
.page-link { color: var(--ayo-green); }
.section-padding.bg-white { background-color: var(--ayo-white) !important; }

/* Halos derrière les sections à cartes : sans eux, l'effet verre n'a rien à flouter */
.social-commitments, .programs-section, .program-detail-content, .gallery-page-section,
.events-section, .team-section, .about-story, .about-values-section, .about-pillars,
.about-engagement, .admin-page { position: relative; overflow: hidden; }
.social-commitments::before, .programs-section::before, .program-detail-content::before,
.gallery-page-section::before, .events-section::before, .team-section::before, .about-story::before,
.about-values-section::before, .about-pillars::before, .about-engagement::before, .admin-page::before,
.social-commitments::after, .programs-section::after, .program-detail-content::after,
.gallery-page-section::after, .events-section::after, .team-section::after, .about-story::after,
.about-values-section::after, .about-pillars::after, .about-engagement::after, .admin-page::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.social-commitments::before, .programs-section::before, .program-detail-content::before,
.gallery-page-section::before, .events-section::before, .team-section::before, .about-story::before,
.about-values-section::before, .about-pillars::before, .about-engagement::before, .admin-page::before { width: 720px; height: 720px; left: -240px; top: -160px; background: radial-gradient(circle, rgba(29,102,69,.30), transparent 66%); }
.social-commitments::after, .programs-section::after, .program-detail-content::after,
.gallery-page-section::after, .events-section::after, .team-section::after, .about-story::after,
.about-values-section::after, .about-pillars::after, .about-engagement::after, .admin-page::after { width: 640px; height: 640px; right: -220px; bottom: -200px; background: radial-gradient(circle, rgba(244,119,37,.26), transparent 66%); }
.social-commitments > .container, .programs-section > .container, .program-detail-content > .container,
.gallery-page-section > .container, .events-section > .container, .team-section > .container,
.about-story > .container, .about-values-section > .container, .about-pillars > .container,
.about-engagement > .container, .admin-page > .container { position: relative; z-index: 1; }
/* Page de connexion : la carte est centrée, les halos doivent passer dessous pour que le verre se voie */
.admin-page::before { left: 50%; top: 60px; width: 560px; height: 560px; margin-left: -460px; background: radial-gradient(circle, rgba(29,102,69,.45), transparent 62%); }
.admin-page::after { right: 50%; bottom: 20px; width: 520px; height: 520px; margin-right: -430px; background: radial-gradient(circle, rgba(244,119,37,.40), transparent 62%); }
.home-programs-preview::before { content: ""; position: absolute; z-index: 0; width: 720px; height: 720px; left: -240px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(29,102,69,.26), transparent 66%); pointer-events: none; }

/* L'écran de chargement (.site-preloader) est stylé EN LIGNE dans
   partials/header.blade.php : cette feuille arrive trop tard pour un rideau
   censé couvrir l'attente de chargement. Ne pas le redéclarer ici. */

/* ============================================================
   Apparition des blocs au défilement
   Les sélecteurs sont préfixés par .js-anim, classe posée par le script
   de l'en-tête : sans JavaScript rien n'est masqué, la page reste lisible.
   La règle .is-revealed vient après, donc elle l'emporte à spécificité égale.
   ============================================================ */
.js-anim .preview-card,
.js-anim .program-page-card,
.js-anim .principle-card,
.js-anim .guide-card,
.js-anim .mission-card,
.js-anim .director-card,
.js-anim .founder-card,
.js-anim .gallery-page-item,
.js-anim .past-event-photo,
.js-anim .agenda-card,
.js-anim .commitment-card,
.js-anim .activities-card,
.js-anim .story-side-card,
.js-anim .story-text-card,
.js-anim .engagement-card,
.js-anim .contact-form-card,
.js-anim .team-join-panel,
.js-anim .cta-card,
.js-anim .section-title,
.js-anim .committee-heading { opacity: 0; transform: translateY(42px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }

.js-anim .home-about-visual { opacity: 0; transform: translateX(-44px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.js-anim .home-about-content { opacity: 0; transform: translateX(44px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }

.js-anim .is-revealed { opacity: 1; transform: none; }

/* Entrée de page : la première ligne de contenu arrive en fondu dès le chargement.
   Volontairement absente de l'accueil, où l'écran de chargement joue déjà ce rôle. */
.js-anim .page-hero .container > *,
.js-anim .team-hero .container > *,
.js-anim .about-split-hero .eyebrow,
.js-anim .about-split-hero h1,
.js-anim .about-split-hero .about-split-lead { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }

/* ⚠️ Ces sélecteurs sont plus précis que « .js-anim .is-revealed » : il leur faut une règle
   de révélation au moins aussi précise, sinon l'en-tête ne réapparaîtrait jamais. */
.js-anim .page-hero .container > .is-revealed,
.js-anim .team-hero .container > .is-revealed,
.js-anim .about-split-hero .eyebrow.is-revealed,
.js-anim .about-split-hero h1.is-revealed,
.js-anim .about-split-hero .about-split-lead.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-anim .preview-card, .js-anim .program-page-card, .js-anim .principle-card,
    .js-anim .guide-card, .js-anim .mission-card, .js-anim .director-card,
    .js-anim .founder-card, .js-anim .gallery-page-item, .js-anim .past-event-photo,
    .js-anim .agenda-card, .js-anim .commitment-card, .js-anim .activities-card,
    .js-anim .story-side-card, .js-anim .story-text-card, .js-anim .engagement-card,
    .js-anim .contact-form-card, .js-anim .team-join-panel, .js-anim .cta-card,
    .js-anim .section-title, .js-anim .committee-heading,
    .js-anim .home-about-visual, .js-anim .home-about-content { opacity: 1; transform: none; transition: none; }
    .js-anim .page-hero .container > *, .js-anim .team-hero .container > *,
    .js-anim .about-split-hero .eyebrow, .js-anim .about-split-hero h1,
    .js-anim .about-split-hero .about-split-lead { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------
   Inscription AYO IMPACT DAY (/inscription)
   Reutilise les champs .contact-form-* ; n'ajoute que ce qui manquait :
   blocs de questions, pastilles de choix, consentement et confirmation.
------------------------------------------------------------------ */
.inscription-hero { background: linear-gradient(125deg, var(--ayo-deep), var(--ayo-green)); }
.inscription-hero h1 { color: white; }
.inscription-hero > .container > p { max-width: 640px; color: rgba(255,255,255,.85); }
.inscription-faits { display: flex; flex-wrap: wrap; margin: 1.6rem 0 0; padding: 0; gap: .7rem 1.8rem; list-style: none; }
.inscription-faits li { display: flex; align-items: center; gap: .55rem; color: white; font-size: .95rem; font-weight: 600; }
.inscription-faits i { color: var(--ayo-orange); font-size: 1.05rem; }

.inscription-theme { margin-top: 1.6rem; padding: .95rem 1.15rem; border-left: 3px solid var(--ayo-orange); border-radius: .6rem; background: #fff2eb; }
.inscription-theme span { display: block; margin-bottom: .25rem; color: var(--ayo-orange-text); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.inscription-theme p { margin: 0; color: var(--ayo-deep); font-size: .88rem; font-weight: 600; line-height: 1.55; }
.inscription-places { margin-top: 1.2rem; color: var(--ayo-green); font-size: .9rem; font-weight: 700; }

.inscription-bloc { margin: 0 0 2rem; padding: 0; border: 0; }
.inscription-bloc:last-of-type { margin-bottom: 1.4rem; }
.inscription-bloc legend { width: 100%; margin-bottom: 1.1rem; padding-bottom: .55rem; border-bottom: 2px solid #e4ece7; color: var(--ayo-green); font-family: "Outfit", sans-serif; font-size: 1.05rem; font-weight: 800; }

.inscription-question { display: block; margin-bottom: .5rem; color: var(--ayo-green); font-size: .78rem; font-weight: 700; }
.inscription-question small { color: var(--ayo-muted); font-weight: 500; }

.inscription-choix { display: flex; flex-wrap: wrap; gap: .55rem; }
.inscription-choix label { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem .9rem; border: 1px solid #dfe6e1; border-radius: .75rem; background: white; color: var(--ayo-deep); font-size: .88rem; font-weight: 500; cursor: pointer; transition: .2s ease; }
.inscription-choix label:hover { border-color: var(--ayo-green); }
.inscription-choix label:has(input:checked) { border-color: var(--ayo-green); background: #eaf5ee; font-weight: 600; }
.inscription-choix label:has(input:focus-visible) { outline: 3px solid rgba(244,119,37,.45); outline-offset: 2px; }
.inscription-choix input { width: 17px; height: 17px; margin: 0; accent-color: var(--ayo-green); }

.inscription-consentement { display: flex; align-items: flex-start; gap: .65rem; margin: 0; color: var(--ayo-deep); font-size: .86rem; font-weight: 500; line-height: 1.55; cursor: pointer; }
.inscription-consentement input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--ayo-green); }
.inscription-consentement a { color: var(--ayo-orange-text); }

/* Les listes deroulantes n'existaient pas dans le formulaire de contact. */
.contact-form-field select { padding: .8rem 1rem; border: 1px solid #dfe6e1; border-radius: .75rem; background: white; color: var(--ayo-deep); font-family: inherit; font-size: .9rem; transition: .2s ease; }
.contact-form-field select:focus { outline: none; border-color: var(--ayo-orange); box-shadow: 0 0 0 3px rgba(244,119,37,.12); }
.contact-form-field select.is-invalid { border-color: #d5533f; }

.inscription-confirmation { max-width: 620px; margin: 0 auto; padding: 3rem 2.5rem; border-radius: var(--card-radius); background: white; box-shadow: var(--card-shadow); text-align: center; }
.inscription-confirmation-icone { display: grid; width: 76px; height: 76px; margin: 0 auto 1.5rem; place-items: center; border-radius: 50%; background: #eaf5ee; color: var(--ayo-green); font-size: 2.1rem; }
.inscription-confirmation-icone-stop { background: #fbeae6; color: #a13b2a; }
.inscription-confirmation h2 { margin-bottom: .9rem; color: var(--ayo-green); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.inscription-confirmation p { color: var(--ayo-muted); font-size: .95rem; line-height: 1.7; }
.inscription-reference { display: inline-block; margin: 1rem 0 1.4rem !important; padding: .7rem 1.6rem; border: 2px dashed var(--ayo-green); border-radius: .75rem; color: var(--ayo-deep) !important; font-family: "Outfit", sans-serif; font-size: 1.6rem !important; font-weight: 800; letter-spacing: .08em; }
.inscription-rappel { color: var(--ayo-deep) !important; }
.inscription-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.8rem; }

@media (max-width: 991.98px) {
    .inscription-confirmation { padding: 2.2rem 1.4rem; }
}
.inscription-envoi { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.2rem !important; padding: .6rem 1rem; border-radius: .7rem; background: #eaf5ee; color: var(--ayo-green) !important; font-size: .85rem !important; font-weight: 600; }
.inscription-envoi-echec { background: #fbeae6; color: #a13b2a !important; text-align: left; }

/* Page du billet, ouverte par le QR code */
.billet-verification h1 { margin-bottom: .6rem; color: var(--ayo-green); font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; }
.billet-etat { margin: 0 0 .4rem !important; color: var(--ayo-green) !important; font-size: .75rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.billet-qr { max-width: 280px; margin: 1.6rem auto .7rem; padding: 14px; border: 1px solid var(--card-border); border-radius: 1rem; background: white; }
.billet-qr svg { display: block; width: 100%; height: auto; }
.billet-qr-note { margin: 0 0 1.6rem !important; font-size: .82rem !important; }
.billet-details { width: 100%; max-width: 420px; margin: 0 auto; border-collapse: collapse; text-align: left; }
.billet-details th, .billet-details td { padding: .6rem .2rem; border-bottom: 1px solid #e4ece7; font-size: .88rem; }
.billet-details th { width: 38%; color: var(--ayo-muted); font-weight: 600; }
.billet-details td { color: var(--ayo-deep); font-weight: 700; }
.billet-pointage { margin-top: 1.4rem !important; padding: .7rem 1rem; border-radius: .7rem; background: #eaf5ee; color: var(--ayo-green) !important; font-size: .85rem !important; font-weight: 600; }
/* Bloc d'accueil du jour J : visible seulement pour un administrateur connecte.
   Le bouton est volontairement large — on le presse sur un telephone, debout, vite. */
.billet-accueil { margin-top: 1.8rem; padding: 1.3rem 1.1rem; border: 1px dashed var(--ayo-green); border-radius: 1rem; background: #f7fbf8; }
.billet-accueil-titre { margin: 0 0 1rem !important; color: var(--ayo-green) !important; font-size: .72rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.billet-accueil-message { margin: 0 0 1rem !important; padding: .7rem 1rem; border-radius: .7rem; font-size: .88rem !important; font-weight: 700; }
.billet-accueil-ok { background: #eaf5ee; color: var(--ayo-green) !important; }
.billet-accueil-attention { background: #fff2eb; color: var(--ayo-orange-text) !important; }
.billet-accueil-bouton { width: 100%; max-width: 340px; padding-top: .9rem; padding-bottom: .9rem; font-size: 1.05rem; }
/* Annulation volontairement discrete : elle s'affiche a l'endroit meme ou l'on vient
   d'appuyer pour pointer. Le vert plein de `.btn-outline-brand` (qui, malgre son nom,
   est un bouton plein) en ferait une cible aussi tentante que l'action principale. */
.billet-accueil-annuler { padding: .55rem 1.1rem; border: 1px solid #d8e2db; border-radius: .7rem; background: transparent; color: var(--ayo-muted); font-size: .85rem; font-weight: 600; }
.billet-accueil-annuler:hover, .billet-accueil-annuler:focus { border-color: var(--ayo-orange-text); color: var(--ayo-orange-text); }
.billet-accueil-lien { display: inline-block; margin-top: 1rem; color: var(--ayo-muted); font-size: .82rem; text-decoration: underline; }
.billet-accueil-lien:hover { color: var(--ayo-green); }

/* Espace administrateur — inscriptions a l'evenement */
.admin-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.admin-chiffre { padding: 1.1rem 1.2rem; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: white; text-align: center; }
.admin-chiffre strong { display: block; color: var(--ayo-green); font-family: "Outfit", sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.admin-chiffre span { color: var(--ayo-muted); font-size: .78rem; font-weight: 600; }
.admin-chiffre-alerte strong { color: #a13b2a; }
.admin-repartition { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.admin-repartition span { padding: .4rem .8rem; border-radius: .6rem; background: white; border: 1px solid var(--card-border); color: var(--ayo-muted); font-size: .8rem; }
.admin-repartition strong { color: var(--ayo-green); }
.admin-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.admin-recherche input { flex: 1 1 260px; min-width: 0; padding: .75rem 1rem; border: 1px solid #dfe6e1; border-radius: .75rem; background: white; font-family: inherit; font-size: .9rem; }
.admin-recherche input:focus { outline: none; border-color: var(--ayo-orange); box-shadow: 0 0 0 3px rgba(244,119,37,.12); }
.admin-reinit { color: var(--ayo-orange-text); font-size: .85rem; font-weight: 600; }
.admin-filters-ligne { margin-bottom: 1.6rem; }
.admin-reference { color: var(--ayo-green); font-family: "Outfit", sans-serif; font-size: .95rem; font-weight: 800; letter-spacing: .06em; }
.admin-etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .9rem; }
.admin-etiquette { padding: .25rem .7rem; border-radius: .5rem; font-size: .72rem; font-weight: 700; }
.admin-etiquette-ok { background: #eaf5ee; color: var(--ayo-green); }
.admin-etiquette-alerte { background: #fbeae6; color: #a13b2a; }
.admin-vide { padding: 2rem; border-radius: var(--card-radius); background: white; color: var(--ayo-muted); text-align: center; }
.admin-fiche { width: 100%; border-collapse: collapse; }
.admin-fiche th, .admin-fiche td { padding: .6rem .3rem; border-bottom: 1px solid #e9efeb; font-size: .88rem; text-align: left; vertical-align: top; }
.admin-fiche th { width: 38%; color: var(--ayo-muted); font-weight: 600; }
.admin-fiche td { color: var(--ayo-deep); font-weight: 600; }
.admin-sous-titre { margin: 0 0 .5rem; color: var(--ayo-green); font-size: 1rem; font-weight: 800; }
.admin-sous-titre + .admin-texte-libre { margin-bottom: 1.4rem; }
.admin-texte-libre { color: var(--ayo-muted); font-size: .92rem; line-height: 1.75; white-space: pre-line; }
@media (max-width: 767.98px) {
    .admin-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-fiche th { width: 46%; }
}