/* ============================================================
   ADYF — Feuille de style unique du site
   Motif signature : la bande « pirogue » (rayures peintes des
   pirogues de Yoff, aux couleurs du drapeau sénégalais).
   ============================================================ */

:root{
    --vert:#00794A;        /* vert ADYF (logo) */
    --vert-fonce:#005A37;
    --jaune:#F2B705;       /* jaune pirogue */
    --rouge:#C8102E;       /* rouge pirogue */
    --ocean:#0E3B4A;       /* Atlantique, fond des bandeaux */
    --ecume:#F6F8F7;       /* fond de page */
    --encre:#14262D;       /* texte */
    --gris:#55666C;        /* texte secondaire */

    --titre:'Bricolage Grotesque', system-ui, sans-serif;
    --texte:'Public Sans', system-ui, sans-serif;

    --largeur:1180px;
    --gouttiere:clamp(16px, 4vw, 40px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
    font-family:var(--texte);
    font-size:17px;
    line-height:1.6;
    color:var(--encre);
    background:var(--ecume);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--jaune); outline-offset:3px; }

h1,h2,h3{ font-family:var(--titre); line-height:1.1; letter-spacing:-0.01em; }
h2{ font-size:clamp(30px, 4vw, 46px); font-weight:700; }
h3{ font-size:21px; font-weight:700; }

.wrap{ max-width:var(--largeur); margin:0 auto; padding:0 var(--gouttiere); }

/* ---------- Bande pirogue (motif signature) ---------- */
.pirogue{
    height:14px;
    background:repeating-linear-gradient(90deg,
        var(--vert) 0 64px, var(--jaune) 64px 96px,
        var(--rouge) 96px 120px, var(--ecume) 120px 128px,
        var(--ocean) 128px 176px, var(--ecume) 176px 184px);
}
.pirogue.fine{ height:6px; }

/* ---------- Header ---------- */
.site-header{
    position:sticky; top:0; z-index:50;
    background:#fff;
    border-bottom:1px solid #E3E8E6;
}
.site-header .wrap{
    display:flex; align-items:center; gap:24px;
    min-height:76px;
}
.marque{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marque img{ height:50px; width:auto; }
.marque strong{ font-family:var(--titre); font-size:19px; color:var(--vert-fonce); line-height:1.1; }
.marque span{ display:block; font-size:13px; color:var(--gris); font-weight:400; }

.site-nav{ margin-left:auto; }
.site-nav ul{ display:flex; gap:26px; list-style:none; }
.site-nav a{ text-decoration:none; font-weight:600; font-size:15px; padding:6px 0; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current]{ border-color:var(--vert); color:var(--vert-fonce); }

.btn{ white-space:nowrap;
    display:inline-block; white-space:nowrap; text-decoration:none; font-weight:700;
    padding:13px 24px; border-radius:6px; font-size:16px;
    transition:background .2s, transform .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-don{ background:var(--jaune); color:var(--encre); }
.btn-don:hover{ background:#FFC72C; }
.btn-clair{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px #fff; }
.btn-clair:hover{ background:rgba(255,255,255,.12); }
.btn-vert{ background:var(--vert); color:#fff; }
.btn-vert:hover{ background:var(--vert-fonce); }

.menu-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
    position:relative;
    min-height:min(82vh, 760px);
    display:flex; align-items:flex-end;
    color:#fff;
    background:url("../images/Yoff/yoff1.webp") center 40%/cover no-repeat;
}
.hero::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(14,59,74,.15) 0%, rgba(14,59,74,.55) 45%, rgba(10,40,50,.92) 100%);
}
.hero .wrap{ position:relative; width:100%; padding-bottom:64px; padding-top:120px; }
.hero h1{
    font-size:clamp(42px, 7.2vw, 96px);
    font-weight:800;
    line-height:.98;
    letter-spacing:-0.025em;
    max-width:11ch;
}
.hero-trajet{
    display:flex; align-items:center; gap:14px;
    font-family:var(--titre); font-size:clamp(18px, 2vw, 22px); font-weight:600;
    margin:28px 0 32px;
}
.hero-trajet .ligne{ flex:0 0 90px; height:2px; background:repeating-linear-gradient(90deg,#fff 0 8px,transparent 8px 14px); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Collecte container ---------- */
.collecte{ background:#fff; padding:72px 0; }
.collecte .wrap{
    display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;
}
.collecte-statut{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--rouge); margin-bottom:14px; }
.collecte-statut::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--rouge); }
.collecte h2{ margin-bottom:18px; }
.collecte p{ color:var(--gris); max-width:52ch; margin-bottom:28px; }

.materiel{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:6px solid var(--ocean); }
.materiel div{ padding:22px 18px 0 0; }
.materiel strong{ display:block; font-family:var(--titre); font-size:clamp(48px, 6vw, 72px); font-weight:800; color:var(--ocean); line-height:1; }
.materiel span{ font-size:15px; color:var(--gris); }

/* Barre de progression : s'affiche seulement si data-objectif est renseigné */
.progression{ margin-top:30px; }
.progression[hidden]{ display:none; }
.progression .barre{ height:14px; background:#E3E8E6; border-radius:7px; overflow:hidden; }
.progression .barre i{ display:block; height:100%; width:0; background:var(--vert); transition:width 1.2s ease; }
.progression p{ margin:10px 0 0; font-size:15px; }

.collecte-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; }

/* ---------- Impact ---------- */
.impact{ background:var(--ocean); color:#fff; padding:80px 0 0; }
.impact h2{ max-width:18ch; margin-bottom:48px; }
.chiffres{ display:grid; grid-template-columns:repeat(3,1fr); }
.chiffres div{ padding:0 24px 56px 0; border-left:1px solid rgba(255,255,255,.2); padding-left:24px; }
.chiffres div:first-child{ border-left:0; padding-left:0; }
.chiffres strong{ display:block; font-family:var(--titre); font-size:clamp(56px, 9vw, 120px); font-weight:800; line-height:.9; color:var(--jaune); }
.chiffres span{ font-size:18px; }

/* ---------- Événements ---------- */
.evenements{ padding:88px 0; }
.entete{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.lien-fleche{ font-weight:700; color:var(--vert-fonce); text-decoration:none; border-bottom:2px solid var(--jaune); }

.evt-grid{ display:grid; grid-template-columns:2fr 1fr; grid-template-rows:auto auto; gap:28px; }
.evt{ background:#fff; display:flex; flex-direction:column; }
.evt img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.evt-txt{ padding:22px 24px 26px; }
.evt time{ display:block; font-size:14px; font-weight:700; color:var(--vert); margin-bottom:6px; }
.evt p{ color:var(--gris); font-size:16px; margin-top:8px; }
.evt-une{ grid-row:span 2; }
.evt-une img{ aspect-ratio:16/11; }
.evt-une h3{ font-size:clamp(24px, 2.6vw, 32px); }

/* ---------- Commissions ---------- */
.commissions{ background:#fff; padding:88px 0; }
.commissions .wrap{ display:grid; grid-template-columns:1fr 2fr; gap:56px; }
.commissions .intro p{ color:var(--gris); margin-top:16px; }
.comm-liste{ list-style:none; display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
.comm-liste a{
    display:block; text-decoration:none;
    padding:20px 0 20px 18px;
    border-top:1px solid #E3E8E6;
    position:relative;
}
.comm-liste a::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px; background:var(--c, var(--vert)); }
.comm-liste a:hover h3{ color:var(--vert); }
.comm-liste p{ color:var(--gris); font-size:15px; margin-top:4px; }

/* ---------- Mosaïque actions ---------- */
.actions{ padding:88px 0 0; }
.actions h2{ margin-bottom:32px; }
.mosaique{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.mosaique img{ width:100%; aspect-ratio:1; object-fit:cover; }

/* ---------- Histoire + CTA ---------- */
.histoire{
    position:relative; color:#fff;
    padding:clamp(96px, 14vw, 180px) 0;
    background-color:var(--ocean); background-size:cover; background-position:center;
}
.histoire::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,40,50,.92) 0%, rgba(10,40,50,.75) 55%, rgba(10,40,50,.45) 100%); }
.histoire .wrap{ position:relative; }
.histoire .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.histoire blockquote{
    font-family:var(--titre); font-size:clamp(26px, 3vw, 38px); font-weight:600; line-height:1.2;
    color:#fff;
}
.histoire blockquote{ font-size:clamp(30px, 4.2vw, 54px); font-weight:700; }
.histoire p{ color:#DCE6E8; margin-bottom:16px; }
.histoire .lien-fleche{ color:#fff; }
.histoire .wrap{ align-items:end; }

.appel{ background:var(--vert); color:#fff; padding:72px 0; }
.appel .wrap{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.appel h2{ max-width:16ch; }
.appel p{ opacity:.9; margin-top:10px; }
.appel-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ocean); color:#DCE6E8; padding:64px 0 28px; font-size:15px; }
.site-footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.site-footer h3{ color:#fff; font-size:17px; margin-bottom:14px; }
.logo-pied{ width:130px; background:#fff; padding:10px 12px; border-radius:8px; margin-bottom:16px; }
.site-footer ul{ list-style:none; }
.site-footer li{ margin-bottom:8px; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer .bas{ border-top:1px solid rgba(255,255,255,.15); margin-top:44px; padding-top:20px; font-size:14px; opacity:.8; }

/* ---------- Responsive ---------- */
@media (max-width:1060px){
    .menu-toggle{
        display:block; margin-left:auto; background:none; border:2px solid var(--vert);
        color:var(--vert); font-size:22px; line-height:1; padding:6px 11px; border-radius:6px; cursor:pointer;
    }
    .site-header .btn-don{ padding:10px 16px; font-size:15px; }
    .site-nav{ display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid #E3E8E6; margin:0; }
    .site-header.menu-open .site-nav{ display:block; }
    .site-nav ul{ flex-direction:column; gap:0; padding:8px var(--gouttiere) 16px; }
    .site-nav a{ display:block; padding:12px 0; border-bottom:1px solid #EEF1F0; }

    .collecte .wrap, .commissions .wrap, .histoire .wrap{ grid-template-columns:1fr; gap:36px; }
    .collecte-photo{ order:-1; }
    .collecte-photo img{ aspect-ratio:16/10; }
    .evt-grid{ grid-template-columns:1fr; }
    .evt-une{ grid-row:auto; }
    .mosaique{ grid-template-columns:repeat(3, 1fr); }
    .site-footer .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
    body{ font-size:16px; }
    .marque span{ display:none; }
    .marque strong{ font-size:15px; }
    .site-header .wrap{ gap:10px; }
    .site-header .btn-don{ padding:9px 12px; font-size:14px; }
    .marque img{ width:46px; height:46px; }
    .hero .wrap{ padding-bottom:44px; }
    .chiffres{ grid-template-columns:1fr; }
    .chiffres div, .chiffres div:first-child{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.2); padding:20px 0; }
    .chiffres div:first-child{ border-top:0; }
    .impact{ padding-bottom:24px; }
    .comm-liste{ grid-template-columns:1fr; }
    .materiel strong{ font-size:44px; }
    .site-footer .cols{ grid-template-columns:1fr; }
}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */

/* ---------- En-tête de page ---------- */
.page-hero{
    position:relative; color:#fff;
    background-color:var(--ocean); background-size:cover; background-position:center; background-repeat:no-repeat;
    padding:96px 0 56px;
}
.page-hero.photo::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(14,59,74,.35), rgba(10,40,50,.9));
}
.page-hero .wrap{ position:relative; }
.page-hero h1{ font-size:clamp(38px, 6vw, 72px); font-weight:800; letter-spacing:-0.02em; max-width:16ch; }
.page-hero p{ font-size:clamp(17px, 2vw, 21px); margin-top:16px; max-width:46ch; opacity:.92; }
.fil{ font-size:15px; margin-bottom:18px; opacity:.85; }
.fil a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); }
.page-hero .marqueur{ display:block; width:56px; height:6px; background:var(--c, var(--jaune)); margin-bottom:22px; }

.section{ padding:80px 0; }
.section.blanc{ background:#fff; }
.section h2{ margin-bottom:24px; }
.texte{ max-width:68ch; }
.texte p{ margin-bottom:16px; }
.texte p:last-child{ margin-bottom:0; }
.discret{ color:var(--gris); }

/* ---------- À propos ---------- */
.apropos{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; }
.apropos img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }

.bureau{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:6px solid var(--ocean); }
.bureau .membre{ padding:24px 20px 24px 0; border-bottom:1px solid #E3E8E6; }
.avatar{
    display:flex; align-items:center; justify-content:center;
    width:72px; height:72px; border-radius:50%; margin-bottom:14px;
    background:var(--ecume); color:var(--vert-fonce); border:2px dashed #B9C6C2;
    font-family:var(--titre); font-weight:700; font-size:24px; object-fit:cover;
}
img.avatar{ border:0; }
.presidence .avatar{ background:var(--vert); color:#fff; border:3px solid var(--jaune); }
.bureau strong{ display:block; font-family:var(--titre); font-size:21px; line-height:1.2; }
.bureau strong + span{ font-size:15px; color:var(--gris); }
.bureau .presidence strong{ font-size:26px; color:var(--vert-fonce); }

/* ---------- Commissions ---------- */
.commission{ display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:start; }
.missions{ list-style:none; margin-top:8px; }
.missions li{ padding:14px 0 14px 28px; border-top:1px solid #E3E8E6; position:relative; }
.missions li::before{ content:""; position:absolute; left:0; top:24px; width:12px; height:4px; background:var(--c, var(--vert)); }
.cote{ background:#fff; padding:32px; border-top:6px solid var(--c, var(--vert)); }
.cote h2{ font-size:26px; margin-bottom:10px; }
.cote .champ{ color:var(--gris); margin-bottom:28px; }
.projet{ padding:18px 0; border-top:1px solid #E3E8E6; }
.projet h3{ font-size:19px; }
.projet p{ color:var(--gris); font-size:16px; margin-top:4px; }
.autres{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; list-style:none; }
.autres a{ display:block; text-decoration:none; padding:9px 16px; border:1px solid #CBD5D2; border-radius:6px; font-weight:600; background:#fff; }
.autres a:hover{ border-color:var(--vert); color:var(--vert-fonce); }

/* ---------- Don ---------- */
.don-grille{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.raisons{ list-style:none; }
.raisons li{ padding:12px 0 12px 28px; border-top:1px solid #E3E8E6; position:relative; }
.raisons li::before{ content:""; position:absolute; left:0; top:22px; width:12px; height:4px; background:var(--jaune); }
.don-libre{ background:var(--ocean); color:#fff; padding:36px; }
.don-libre h2{ font-size:30px; margin-bottom:10px; }
.don-libre p{ opacity:.9; margin-bottom:24px; }
.cartes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.carte{ background:#fff; padding:28px 26px; border-top:8px solid var(--metal); display:flex; flex-direction:column; }
.carte h3{ font-size:24px; }
.carte .prix{ font-family:var(--titre); font-size:46px; font-weight:800; line-height:1; margin:14px 0 22px; }
.carte .btn{ margin-top:auto; text-align:center; }
.note{ font-size:14px; color:var(--gris); margin-top:18px; }

/* ---------- Actualités ---------- */
.articles{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.article-carte{ display:block; text-decoration:none; background:#fff; padding:28px; border-left:6px solid var(--jaune); }
.article-carte time{ font-size:14px; font-weight:700; color:var(--vert); }
.article-carte h3{ font-size:24px; margin:6px 0 8px; }
.article-carte p{ color:var(--gris); }
.article-carte:hover h3{ color:var(--vert-fonce); }

.journal{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.journal .evt img{ aspect-ratio:4/3; }
.badge{ display:inline-block; font-size:13px; font-weight:700; background:var(--rouge); color:#fff; padding:3px 10px; border-radius:4px; margin-bottom:8px; }

/* ---------- Article ---------- */
.article-corps{ max-width:68ch; margin:0 auto; }
.article-corps p{ margin-bottom:18px; font-size:18px; }
.retour{ display:inline-block; margin-top:28px; }

/* ---------- Partenaires ---------- */
.vide{ background:#fff; padding:40px; text-align:center; border:2px dashed #CBD5D2; }
.vide p{ color:var(--gris); margin:10px auto 24px; max-width:50ch; }

@media (max-width:980px){
    .apropos, .commission, .don-grille{ grid-template-columns:1fr; gap:40px; }
    .bureau{ grid-template-columns:1fr 1fr; }
    .journal{ grid-template-columns:1fr 1fr; }
    .cartes{ grid-template-columns:1fr; }
}
@media (max-width:600px){
    .page-hero{ padding:64px 0 40px; }
    .section{ padding:56px 0; }
    .articles, .journal{ grid-template-columns:1fr; }
    .bureau{ grid-template-columns:1fr 1fr; column-gap:16px; }
    .bureau strong, .bureau .presidence strong{ font-size:18px; }
    .cote, .don-libre{ padding:24px; }
}

/* Affiches et coupures de presse : image entière, sans recadrage */
img.affiche{ object-fit:contain; background:#E3E8E6; }

@media (max-width:420px){
    .marque div{ display:none; }
    .marque img{ height:44px; }
}

/* ============================================================
   NOUVELLES PAGES ET FONCTIONNALITÉS
   ============================================================ */
.site-nav ul{ gap:22px; }

/* À compléter (visible pour repérer le contenu manquant) */
.a-completer{ background:#FFF7DA; border:2px dashed var(--jaune); padding:16px 18px; color:#6B5300; border-radius:4px; }
.a-completer strong{ display:block; margin-bottom:2px; }

/* Bouton WhatsApp flottant */
.wa-flottant{
    position:fixed; right:18px; bottom:18px; z-index:60;
    display:flex; align-items:center; gap:8px;
    background:#1FA855; color:#fff; text-decoration:none; font-weight:700;
    padding:12px 18px 12px 14px; border-radius:30px;
    box-shadow:0 6px 18px rgba(14,59,74,.28);
}
.wa-flottant:hover{ background:#178A45; }
@media (max-width:600px){ .wa-flottant span{ display:none; } .wa-flottant{ padding:14px; } }

/* Partage */
.partage{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; font-size:14px; color:var(--gris); }
.partage a{ text-decoration:none; font-weight:700; font-size:13px; padding:6px 12px; border-radius:20px; border:1px solid #CBD5D2; color:var(--encre); }
.partage a.p-wa:hover{ border-color:#1FA855; color:#178A45; }
.partage a.p-fb:hover{ border-color:#1877F2; color:#1877F2; }
.evt .partage{ margin-top:14px; }

/* Frise des actions */
.frise{ list-style:none; position:relative; padding-left:0; }
.frise::before{ content:""; position:absolute; left:150px; top:8px; bottom:8px; width:3px; background:repeating-linear-gradient(180deg, var(--vert) 0 24px, var(--jaune) 24px 36px, var(--rouge) 36px 44px, transparent 44px 52px); }
.etape{ display:grid; grid-template-columns:150px 1fr; gap:40px; margin-bottom:40px; position:relative; }
.etape::before{ content:""; position:absolute; left:144px; top:6px; width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--vert); }
.etape:first-child::before{ background:var(--rouge); border-color:var(--rouge); }
.etape time{ font-family:var(--titre); font-weight:700; font-size:18px; color:var(--vert-fonce); padding-right:24px; text-align:right; line-height:1.3; }
.etape-carte{ background:#fff; display:grid; grid-template-columns:240px 1fr; }
.etape-carte img{ width:100%; height:100%; min-height:180px; object-fit:cover; }
.etape-carte > div{ padding:24px 26px; }
.etape-carte h3{ font-size:22px; margin:6px 0 8px; }
.etape-carte p{ color:var(--gris); }
.etiquette{ font-size:13px; font-weight:700; color:var(--vert); }

/* Galerie */
.galerie .album{ margin-bottom:64px; }
.album-entete{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.album-entete h2{ font-size:clamp(24px, 3vw, 32px); margin:0; }
.album-entete p{ color:var(--gris); }
.vignettes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.vignette{ display:block; aspect-ratio:1; overflow:hidden; background:#E3E8E6; }
.vignette img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.vignette.affiche img{ object-fit:contain; }
.vignette:hover img{ transform:scale(1.04); }
.video{ position:relative; aspect-ratio:16/9; max-width:820px; margin-bottom:12px; background:var(--ocean) center/cover no-repeat; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    background:var(--jaune); color:var(--encre); border:0; font:700 17px var(--texte);
    padding:16px 26px; border-radius:6px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.lightbox{ position:fixed; inset:0; z-index:100; background:rgba(8,28,35,.97); display:flex; align-items:center; justify-content:center; padding:56px 64px; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox button{ position:absolute; background:none; border:0; color:#fff; font-size:44px; line-height:1; cursor:pointer; padding:10px 16px; }
.lb-fermer{ top:8px; right:12px; font-size:30px !important; }
.lb-prec{ left:6px; top:50%; transform:translateY(-50%); }
.lb-suiv{ right:6px; top:50%; transform:translateY(-50%); }

/* Agir avec nous */
.voies{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.voie{ background:#fff; padding:32px; border-top:8px solid var(--c); display:flex; flex-direction:column; }
.voie h2{ font-size:30px; margin-bottom:10px; }
.voie p{ color:var(--gris); margin-bottom:24px; }
.voie-actions{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:18px; }

/* Carte */
.carte{ height:460px; background:#DCE6E8; border-radius:4px; }

/* Agenda */
.rdv{ display:grid; grid-template-columns:92px 1fr; gap:24px; background:#fff; padding:24px; margin-bottom:18px; }
.rdv-date{ background:var(--ocean); color:#fff; text-align:center; padding:12px 0; align-self:start; }
.rdv-date strong{ display:block; font-family:var(--titre); font-size:36px; line-height:1; color:var(--jaune); }
.rdv-date span{ text-transform:lowercase; }
.rdv h3{ font-size:22px; }
.rdv p{ margin-top:4px; }
.rdv-cal{ background:none; border:0; border-bottom:2px solid var(--jaune); padding:0; margin-top:12px; font:700 15px var(--texte); cursor:pointer; }

/* FAQ */
.faq{ max-width:820px; }
.faq details{ background:#fff; margin-bottom:10px; border-left:4px solid var(--vert); }
.faq summary{ cursor:pointer; padding:18px 22px; font-family:var(--titre); font-size:20px; font-weight:700; list-style:none; position:relative; padding-right:48px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:26px; color:var(--vert); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 22px 20px; color:var(--gris); }

/* Formulaire */
.formulaire{ background:#fff; padding:32px; display:grid; gap:18px; }
.formulaire label{ display:grid; gap:6px; font-weight:600; font-size:15px; }
.formulaire label[hidden]{ display:none; }
.formulaire input, .formulaire select, .formulaire textarea{
    font:400 16px var(--texte); padding:12px 14px; border:1px solid #B9C6C2; border-radius:4px; background:#fff; color:var(--encre); width:100%;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus{ outline:3px solid rgba(0,121,74,.25); border-color:var(--vert); }
.formulaire .deux{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.facultatif{ font-weight:400; color:var(--gris); }
.formulaire button{ justify-self:start; border:0; cursor:pointer; font-family:var(--texte); }
.erreur{ color:var(--rouge); font-weight:600; }
.confirmation{ background:#E6F4EC; color:var(--vert-fonce); padding:14px 16px; font-weight:600; }

@media (max-width:1180px){ .site-nav ul{ gap:16px; } .site-nav a{ font-size:14px; } }
@media (max-width:980px){
    .frise::before{ left:7px; }
    .etape{ grid-template-columns:1fr; gap:10px; padding-left:36px; }
    .etape::before{ left:1px; }
    .etape time{ text-align:left; padding:0; }
    .etape-carte{ grid-template-columns:1fr; }
    .etape-carte img{ aspect-ratio:16/9; height:auto; min-height:0; }
    .voies{ grid-template-columns:1fr; }
}
@media (max-width:600px){
    .formulaire{ padding:20px; }
    .formulaire .deux{ grid-template-columns:1fr; }
    .vignettes{ grid-template-columns:repeat(2, 1fr); }
    .carte{ height:340px; }
    .rdv{ grid-template-columns:70px 1fr; gap:16px; padding:18px; }
    .lightbox{ padding:48px 8px; }
}
.site-nav a{ white-space:nowrap; }
.facultatif{ font-style:normal; }
@media (min-width:1061px){ .marque div{ display:none; } }

/* ---------- Polices hébergées sur le site (licence SIL OFL) ---------- */
@font-face{ font-family:'Bricolage Grotesque'; src:url('../fonts/bricolage-grotesque.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face{ font-family:'Public Sans'; src:url('../fonts/public-sans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Public Sans'; src:url('../fonts/public-sans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Public Sans'; src:url('../fonts/public-sans-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* ---------- Pages légales ---------- */
.legal h2{ font-size:26px; margin:40px 0 12px; }
.legal h2:first-child{ margin-top:0; }
.legal a{ color:var(--vert-fonce); }
.ac{ background:#FFF2BF; color:#6B5300; padding:1px 6px; border-radius:3px; font-weight:600; }

/* ---------- 404 ---------- */
.page-404{ padding:110px 0 120px; }
.code-404{ font-family:var(--titre); font-weight:800; font-size:clamp(110px, 20vw, 220px); line-height:.85; color:var(--ocean); letter-spacing:-0.04em; }
.page-404 h1{ font-size:clamp(28px, 4vw, 44px); max-width:20ch; margin:20px 0 14px; }
.page-404 p{ color:var(--gris); max-width:52ch; margin-bottom:30px; }
.page-404 .hero-actions{ align-items:center; gap:18px; }
.video::before{ content:""; position:absolute; inset:0; background:rgba(10,40,50,.45); }

/* ============================================================
   BARRE DU HAUT — identique au site d'origine
   ============================================================ */
@font-face{ font-family:'Crete Round'; src:url('../fonts/crete-round.woff2') format('woff2'); font-weight:400; font-display:swap; }

.site-header{
    width:100%;
    background:white;
    padding:8px 50px;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
    border-bottom:0;
    position:sticky; top:0; z-index:1000;
    font-family:Arial, sans-serif;
}
.site-header .container-header{
    max-width:1600px; margin:auto;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.site-header .logo-box{ display:flex; align-items:center; gap:20px; text-decoration:none; flex-shrink:0; }
.site-header .logo{
    width:78px; height:78px; object-fit:contain;
    border-radius:70%; border:3px solid #008751; padding:3px; background:white;
}
.site-header .titre-site{
    font-size:24px; color:#006b3f; margin-bottom:2px;
    font-family:'Crete Round', serif; line-height:1.2; font-weight:400;
}
.site-header .title-box p:not(.titre-site){ color:#777; font-size:15px; letter-spacing:1px; line-height:1.4; }

.site-header .site-nav{ margin:0; }
.site-header .site-nav ul{ display:flex; list-style:none; gap:20px; }
.site-header .site-nav a{
    text-decoration:none; color:#222; font-weight:600; font-size:15px;
    transition:0.3s; position:relative; padding:0; border:0; white-space:nowrap;
}
.site-header .site-nav a::after{
    content:""; position:absolute; left:0; bottom:-8px;
    width:0%; height:2px; background:#008751; transition:0.3s;
}
.site-header .site-nav a:hover::after, .site-header .site-nav a[aria-current]::after{ width:100%; }
.site-header .site-nav a:hover, .site-header .site-nav a[aria-current]{ color:#008751; }

.site-header .don-btn{
    text-decoration:none; background:var(--jaune); color:var(--encre);
    padding:13px 24px; border-radius:35px; font-weight:700;
    transition:0.3s; white-space:nowrap; flex-shrink:0;
}
.site-header .don-btn:hover{ background:#FFC72C; transform:translateY(-2px); }
.site-header .menu-toggle{ display:none; }

/* Écrans moyens : même barre, un peu plus compacte */
@media (max-width:1439px){
    .site-header{ padding:8px 28px; }
    .site-header .logo{ width:72px; height:72px; }
    .site-header .titre-site{ font-size:22px; }
    .site-header .title-box p:not(.titre-site){ font-size:14px; letter-spacing:.5px; }
    .site-header .site-nav ul{ gap:14px; }
    .site-header .site-nav a{ font-size:14px; }
    .site-header .don-btn{ padding:12px 20px; }
}
@media (max-width:1300px){
    .site-header .title-box p:not(.titre-site){ display:none; }
}

/* Tablette et mobile : menu repliable */
@media (max-width:1180px){
    .site-header{ padding:8px 20px; }
    .site-header .container-header{ flex-wrap:wrap; gap:12px; position:relative; }
    .site-header .logo{ width:64px; height:64px; border-width:3px; padding:3px; }
    .site-header .titre-site{ font-size:22px; margin:0; }
    .site-header .title-box p:not(.titre-site){ display:block; font-size:13px; }
    .site-header .menu-toggle{
        display:block; margin-left:auto; background:none; border:2px solid #008751;
        color:#008751; font-size:22px; line-height:1; padding:6px 11px; border-radius:8px; cursor:pointer;
    }
    .site-header .site-nav{ display:none; position:static; width:100%; order:5; background:none; border:0; }
    .site-header.menu-open .site-nav{ display:block; }
    .site-header .site-nav ul{ flex-direction:column; gap:0; padding:8px 0 4px; }
    .site-header .site-nav a{ display:block; padding:12px 4px; border-bottom:1px solid #eee; font-size:15px; }
    .site-header .site-nav a::after{ display:none; }
    .site-header .don-btn{ padding:10px 18px; font-size:15px; }
}
@media (max-width:600px){
    .site-header{ padding:6px 14px; }
    .site-header .logo-box{ gap:10px; }
    .site-header .logo{ width:52px; height:52px; padding:2px; }
    .site-header .titre-site{ font-size:16px; }
    .site-header .title-box p:not(.titre-site){ display:none; }
    .site-header .container-header{ gap:8px; }
    .site-header .don-btn{ padding:9px 13px; font-size:14px; }
    .site-header .menu-toggle{ padding:5px 9px; }
}
@media (max-width:400px){
    .site-header .titre-site{ display:none; }
}

/* Bande « pirogue » sous la barre du haut */
.site-header::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
    background:repeating-linear-gradient(90deg,
        var(--vert) 0 64px, var(--jaune) 64px 96px,
        var(--rouge) 96px 120px, var(--ecume) 120px 128px,
        var(--ocean) 128px 176px, var(--ecume) 176px 184px);
}

/* Image d'accueil fixe : le contenu défile par-dessus,
   et la section « citation » laisse réapparaître la même image */
.hero, .histoire.fenetre{
    background-image:url("../images/Yoff/yoff1.webp");
    background-size:cover;
    background-position:center 40%;
    background-attachment:fixed;
}
/* Mobiles et tablettes ne gèrent pas l'image fixe : image normale */
@media (hover:none), (max-width:1060px){
    .hero, .histoire.fenetre{ background-attachment:scroll; }
}
.mosaique.terrain{ grid-template-columns:repeat(5, 1fr); }
@media (max-width:600px){ .mosaique.terrain{ grid-template-columns:repeat(2, 1fr); } }
.a-venir{ font-style:italic; color:var(--gris); }

/* ---------- Articles rédigés ---------- */
.article-corps h2{ font-size:clamp(24px, 3vw, 32px); margin:44px 0 14px; }
.article-corps .chapo{ font-size:21px; line-height:1.55; color:var(--encre); font-weight:600; margin-bottom:28px; }
.fig{ margin:36px 0; }
.fig img{ width:100%; height:auto; border-radius:4px; background:#E3E8E6; }
.fig-large{ margin-left:calc(-1 * min(12vw, 140px)); margin-right:calc(-1 * min(12vw, 140px)); }
.fig figcaption{ font-size:15px; color:var(--gris); margin-top:10px; line-height:1.5; }
.fig .credit{ display:block; font-size:13px; opacity:.85; }
.fig .credit a{ color:inherit; }
.sources{ margin-top:56px; padding-top:24px; border-top:1px solid #CBD5D2; }
.sources h2{ font-size:20px !important; margin:0 0 10px !important; }
.sources ul{ padding-left:18px; }
.sources li{ font-size:15px; margin-bottom:6px; }
.sources a{ color:var(--vert-fonce); }
.suite{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:36px; }
.article-carte .lien-fleche{ display:inline-block; margin-top:14px; }
@media (max-width:980px){ .fig-large{ margin-left:0; margin-right:0; } }
@media (max-width:600px){ .article-corps .chapo{ font-size:18px; } .article-corps p{ font-size:17px; } }

/* ---------- Galerie en albums ---------- */
.albums{ display:grid; grid-template-columns:repeat(3, 1fr); gap:44px 32px; margin-top:8px; }
.album-carte h3{ font-size:20px; margin-top:18px; }
.album-carte p{ color:var(--gris); font-size:15px; margin-top:4px; }
.album-couv{ position:relative; display:block; aspect-ratio:4/3; background:#E3E8E6; border-radius:4px; }
.album-couv img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; border-radius:4px; box-shadow:0 6px 18px rgba(14,59,74,.18); transition:transform .3s; }
.album-couv.affiche img{ object-fit:contain; background:#E3E8E6; }
/* effet « pile de photos » pour les albums de plusieurs photos */
.album-couv.pile::before, .album-couv.pile::after{
    content:""; position:absolute; inset:0; border-radius:4px; background:#fff; border:1px solid #D5DDDA;
    box-shadow:0 4px 12px rgba(14,59,74,.12); transition:transform .3s;
}
.album-couv.pile::before{ transform:rotate(-4deg) translate(-6px, 4px); z-index:0; }
.album-couv.pile::after{ transform:rotate(3deg) translate(6px, 2px); z-index:1; }
.album-couv:hover img{ transform:translateY(-4px); }
.album-couv.pile:hover::before{ transform:rotate(-6deg) translate(-10px, 4px); }
.album-couv.pile:hover::after{ transform:rotate(5deg) translate(10px, 2px); }
.album-nb{
    position:absolute; z-index:3; right:12px; bottom:12px;
    background:rgba(14,59,74,.85); color:#fff; font-size:13px; font-weight:700; padding:5px 10px; border-radius:20px;
}
.videos{ display:grid; grid-template-columns:repeat(2, 1fr); gap:32px; }
.video-carte .video{ max-width:none; margin:0; border-radius:4px; overflow:hidden; }
.video-carte h3{ font-size:20px; margin-top:16px; }
.video-carte p{ color:var(--gris); font-size:15px; }
.lightbox figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lightbox figure img{ max-height:calc(100vh - 150px); }
.lightbox figcaption{ color:#fff; margin-top:12px; text-align:center; font-size:15px; }
.lb-compteur{ opacity:.7; margin-left:8px; }
@media (max-width:980px){ .albums{ grid-template-columns:repeat(2, 1fr); } .videos{ grid-template-columns:1fr; } }
@media (max-width:600px){ .albums{ grid-template-columns:1fr; gap:36px; } }
.lightbox{ z-index:3000; }
.lightbox figure img{ height:min(72vh, 760px); width:auto; max-width:100%; object-fit:contain; }
@media (max-width:600px){ .lightbox figure img{ height:auto; width:100%; } }

/* ---------- Sous-menu « L'association » ---------- */
.site-header .a-sous-menu{ position:relative; }
.site-header .chevron{ font-size:11px; margin-left:2px; }
.site-header .sous-menu{
    display:none; position:absolute; top:100%; left:-16px; z-index:1100;
    list-style:none; min-width:220px; padding:18px 0 8px; margin:0;
    background:transparent;
}
.site-header .sous-menu::before{
    content:""; position:absolute; inset:10px 0 0; background:#fff; border-radius:8px;
    box-shadow:0 10px 26px rgba(14,59,74,.18); border-top:3px solid #008751;
}
.site-header .sous-menu li{ position:relative; }
.site-header .sous-menu a{ display:block; padding:10px 18px; font-size:15px; }
.site-header .sous-menu a::after{ display:none; }
.site-header .sous-menu a:hover, .site-header .sous-menu a.actif{ color:#008751; background:#F2F7F5; }
.site-header .a-sous-menu:hover .sous-menu,
.site-header .a-sous-menu:focus-within .sous-menu{ display:block; }

@media (max-width:1180px){
    .site-header .chevron{ display:none; }
    .site-header .sous-menu{ display:block; position:static; min-width:0; padding:0 0 0 16px; }
    .site-header .sous-menu::before{ display:none; }
    .site-header .sous-menu a{ padding:10px 4px; font-size:14px; color:#555; border-bottom:1px solid #eee; background:none; }
}

/* ---------- Partenaires ---------- */
.partenaires{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.part-carte{ background:#fff; padding:32px 28px; display:flex; flex-direction:column; align-items:flex-start; }
.part-carte h3{ font-size:21px; margin:20px 0 8px; }
.part-carte p{ color:var(--gris); font-size:16px; margin-bottom:14px; }
.part-sigle{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:88px; height:88px; padding:0 14px; border-radius:44px;
    background:var(--c); color:#fff; font-family:var(--titre); font-weight:800; font-size:20px; letter-spacing:.02em;
}
.part-logo{ height:88px; width:auto; max-width:180px; object-fit:contain; }
.bandeau-part{ padding:72px 0; background:var(--ecume); }
.part-liste{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.part-liste li{ display:flex; align-items:center; gap:16px; background:#fff; padding:18px 20px; }
.part-liste .part-sigle{ min-width:64px; height:64px; font-size:15px; }
.part-liste .part-logo{ height:64px; max-width:120px; }
.part-liste span:not(.part-sigle){ font-weight:600; font-size:15px; line-height:1.35; }
@media (max-width:980px){ .partenaires, .part-liste{ grid-template-columns:1fr; } }
.part-sigle.long{ font-size:17px; }
.part-liste .part-sigle.long{ font-size:11px; padding:0 6px; }
.part-carte .part-logo{ height:120px; max-width:200px; }
.part-liste .part-logo{ height:72px; width:72px; max-width:none; object-fit:contain; }

/* Sous-menu : toujours en colonne (prioritaire sur la règle du menu principal) */
.site-header .site-nav ul.sous-menu{ display:none; flex-direction:column; gap:0; width:max-content; min-width:230px; }
.site-header .site-nav li.a-sous-menu:hover > ul.sous-menu,
.site-header .site-nav li.a-sous-menu:focus-within > ul.sous-menu{ display:flex; }
@media (max-width:1180px){
    .site-header .site-nav ul.sous-menu{ display:flex; width:auto; min-width:0; }
}
.carte-osm{ position:relative; aspect-ratio:16/8; border-radius:4px; overflow:hidden; background:#DCE6E8; }
.carte-osm iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:600px){ .carte-osm{ aspect-ratio:4/5; } }