html, body {
    margin: 0;
    padding: 0;
    background: #f7fafd;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #232a43;
    min-height: 100%;
    box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit; }
a { text-decoration: none; transition: .14s; color: #226376; }
a:hover { text-decoration: underline; color: #095263; }
h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; margin: 0; }
p { margin: 0; }

/* HEADER & MENU */
.site-header { width: 100%; background: #fff; box-shadow: 0 2px 15px #c3d2ea14; position: sticky; top:0; z-index:10;}
.navbar { max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0.7em 2em; position: relative;}
.nav-logo img { height: 70px; max-width: 180px; width: auto; display: block; margin: 0 auto;}
.nav-links { display: flex; gap: 2em; align-items: center; }
.nav-links a { font-weight: 600; font-size: 1.13em; padding: .22em .68em; border-radius: 7px; background: none; }
.nav-links a.active, .nav-links a:hover { background: #e7fdf5; color: #095263;}
.nav-don { background: #f59e42; color: #fff !important; font-weight: bold; box-shadow: 0 2px 7px #f59e4219; padding: .25em 1em;}
.nav-don:hover { background: #cb6f1c;}

.menu-toggle { display: none; flex-direction: column; justify-content: center; cursor: pointer; margin-left: 1em;}
.menu-toggle span { height: 3px; width: 26px; background: #226376; margin: 4px 0; border-radius: 2px;}
@media (max-width:900px) { .navbar { flex-direction: column; gap:.12em; align-items: flex-start; padding: 0.5em 0.9em;} .nav-logo img {height:52px;max-width:110px;} }
@media (max-width:650px) {
    .nav-links { flex-direction: column; width: 100%; background: #fff; box-shadow:0 9px 32px #d0dbed10; position: absolute; top:56px; left:0; padding:0.8em 0; display: none; align-items: flex-start; z-index:100;}
    .nav-links.open { display: flex; }
    .menu-toggle { display: flex; }
    .navbar { position: relative;}
    .nav-links a { width: 100%; border-radius: 0; padding: .87em 2em; font-size:1.08em; border-bottom:1px solid #f3f7fa;}
    .nav-links a:last-child { border-bottom: none; }
}

/* HERO bloc accueil */
.hero-association {
    position: relative; background: linear-gradient(120deg, #a0dbf7c0 0%, #f9fafe 99%);
    height: 320px; display: flex; align-items: center; justify-content: center;
}
.hero-bg { position:absolute; left:0;top:0;width:100%;height:100%; background:url('https://images.unsplash.com/photo-1511988617509-a57c8a288659?auto=format&fit=crop&w=1260&q=80') center/cover; opacity:0.14; z-index:0;}
.hero-inner { position:relative; z-index:2; text-align:center;}
.hero-title { font-size:2.55em;color:#226376; margin-bottom:0.5em;}
.hero-desc { font-size:1.13em; color:#45555f; margin:1.3em 0 2em 0;}
.hero-don-btn {
    background: #f59e42; color: #fff; font-size: 1.14em; font-weight:700; padding:.54em 1.5em; border-radius:11px; box-shadow:0 2px 16px #f59e4214; transition:.14s; display:inline-block;
}
.hero-don-btn:hover{background:#cb6f1c;}
@media (max-width: 700px) {
    .hero-association { height: 175px; padding: 0 0.8em;}
    .hero-title { font-size: 1.13em;}
    .hero-desc { font-size:.91em; margin:1em 0 1.24em 0;}
    .hero-don-btn { font-size:.96em; padding:.47em 1.1em; }
}

/* HERO bloc dons */
.hero-don {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, #a0dbf7cc 0%, #f9fafe 99%);
    border-radius:22px; margin-bottom:2em; max-width:980px; margin:auto; margin-top:2em; position:relative; box-shadow:0 2px 32px #b2c7e655;
    overflow:hidden; min-height:240px;
}
.hero-don-img {
    flex: 1 0 140px; min-width: 140px; max-width:220px; height:220px;
    background:url('https://images.unsplash.com/photo-1510936111840-6cef99faf2a9?auto=format&fit=crop&w=500&q=80') center/cover;
    border-top-left-radius:22px; border-bottom-left-radius:22px; display:none;
}
.hero-don-content {
    flex:2 2 345px; padding:2.1em 2em; position:relative;
}
.hero-don-content h1 { font-family:'Playfair Display', serif; font-size:2.1em; margin:.4em 0 .5em 0;color:#226376;font-weight:700; }
.hero-don-content p { font-size:1.22em; color:#49587a; margin-bottom:2em; margin-top:.4em; }
.secure-ribbon {
    color: #fff; background: linear-gradient(90deg, #23c483 75%, #147945 100%);
    padding: 0.7em 2.3em; border-radius: 14px; position: absolute; top: -20px; right: 28px;
    font-size: 1.13em; font-weight: bold; box-shadow: 0 4px 22px #1bb36b54, 0 2px 0 #f5f9fb;
    border: 3px solid #fff; display: flex; align-items: center; gap: .85em; z-index: 22; transition: box-shadow .17s, transform .13s;
    letter-spacing: .01em;
}
.secure-ribbon .icon { font-size:1.4em; filter:drop-shadow(0 2px 9px #31eab955);}
.hero-don:hover .secure-ribbon { box-shadow: 0 6px 32px #19cb6f99, 0 2px 0 #f5f9fb; transform:scale(1.08);}
@media(max-width:650px) { .secure-ribbon { top: 12px; right: 50%; transform: translateX(50%); padding: .5em 1.2em; border-radius: 11px; font-size: .98em;} }
@media(max-width:900px){ .hero-don { flex-direction:column; } .hero-don-img { display:none !important; } .hero-don-content { padding:1.4em 0.7em; } }
@media(min-width:750px){ .hero-don-img { display: block; } }

/* CARTES & SECTIONS */
.main-section {
    max-width:980px; margin:3em auto 2em auto;
    padding:2em 2em; background:#fff;
    border-radius:22px; box-shadow:0 8px 32px #d0dbed19;
}
.section-title { text-align:center; margin-bottom:2.3em; }
.section-title h2 { font-size:2em; color:#226376; margin-bottom:.24em; }
.section-title p {font-size:1.17em;color:#49587a;}
.main-cards { display:flex; flex-wrap:wrap; gap:2em; justify-content:space-around; }
.c-card {
    background:#f3f7fa; border-radius:16px; box-shadow:0 2px 14px #b2c7e620; padding:2em 1.4em;
    flex:1 1 240px; max-width:300px; min-width:220px; margin-bottom:1.5em; box-sizing:border-box;
}
.c-card h3 {font-size:1.16em; color:#226376;}
.c-card ul {padding-left:1.17em;}
.c-card li {margin-bottom:.6em; font-size:1em;}
.main-btn {
    background:#8ecae6; color:#fff; font-weight:700;
    border-radius:8px; padding:.37em 1.1em;
    text-decoration:none; margin:.19em .29em 0 0;
    display:inline-block; transition:.13s;
}
.main-btn:hover, .main-btn.important { background:#f59e42; color:#fff; }

@media(max-width:900px) {
    .main-section { padding:1em 0.7em;}
    .main-cards { flex-direction: column; gap: 1.3em;}
    .c-card { max-width: 99%; min-width: 0; }
}
@media(max-width:700px) {
    .main-section { padding:0.7em 0.13em;}
    .section-title h2 { font-size: 1.13em; }
    .c-card {padding:1em 0.6em;}
}

/* ENGAGEMENTS */
.engagements-section {
    max-width:1200px; margin:3em auto 3em auto; padding:2.2em 1.2em;
    background: linear-gradient(130deg, #283549 0%, #425575 100%);
    border-radius:28px; box-shadow:0 8px 32px #23304530; color: #fff; text-align:center;
}
.engagements-section h2 { font-size:2em; color:#fff; margin-bottom:.21em; letter-spacing:.02em;}
.engagements-desc {font-size:1.13em; margin-bottom:2.4em; color:#dbecfa;}
.engagements-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:2em; justify-items:center; align-items:center; margin-top:1em; }
.eng-card {
    background:#fff; color:#253141; border-radius:14px; box-shadow:0 2px 19px #202b3922;
    padding:1.2em 1em 1em 1em; font-size:1.04em; width:96%; max-width:250px; text-align:center;
    position:relative; min-height:120px; margin-bottom:0.6em;
}
.eng-arrow { color:#c12b2e; font-size:2em; line-height:1em; font-weight:bold; margin-bottom:0.2em;}
.eng-card strong {color:#c12b2e;}
.eng-card .eng-text {color:#4a6277;}
@media(max-width:900px) { .engagements-section { padding:1.2em 0.2em;} .engagements-grid { grid-template-columns: repeat(2,1fr); gap:1.2em; } }
@media(max-width:600px) { .engagements-section{padding:1em 0.07em;} .engagements-grid{display:flex; flex-direction:column; gap:1em;} .eng-card {max-width:99%; min-width:0;} }

/* FORMULAIRE BENEVOLE */
.benevole-form-container {
    max-width: 440px;
    margin: 46px auto 62px auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 26px #90cada35;
    border: 1.5px solid #e3effb;
    text-align: center;
    padding: 2.7em 2.3em 2.2em 2.3em;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.benevole-form-container h2 {
    font-size: 1.53em;
    margin-bottom: .42em;
    color: #226376;
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    letter-spacing: .02em;
}
.benevole-form-container p {
    font-size: 1.12em;
    margin-bottom: 1.5em;
    color: #405477;
}
.benevole-form-container form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.09em;
    align-items: center;
}
.benevole-form-container input,
.benevole-form-container textarea {
    width: 100%;
    font-size:1.09em;
    border-radius: 10px;
    border: 2px solid #b6daf7;
    padding:0.7em 1em;
    background: #f6fafc;
    margin-bottom: .92em;
    box-shadow: 0 1px 9px #b2c7e615;
    transition: border-color .18s;
}
.benevole-form-container input:focus,
.benevole-form-container textarea:focus {
    border-color: #226376;
    outline: none;
}
.benevole-form-container textarea {
    resize: vertical;
    min-height: 85px;
    font-family: 'Montserrat',sans-serif;
}
.benevole-form-container button {
    background: #8ecae6;
    color: #fff;
    font-weight: bold;
    font-size: 1.13em;
    border-radius: 8px;
    padding: .6em 1.3em;
    border: none;
    box-shadow: 0 2px 12px #b2c7e620;
    cursor: pointer;
    transition: background .17s;
    margin-top:.2em;
}
.benevole-form-container button:hover {
    background: #f59e42;
}
@media(max-width:700px) { .benevole-form-container {padding:1.22em .12em;} }

/* FAQ */
.faqbox-section { max-width:660px; margin:3em auto 2.3em auto; background: #e7f5fb; border-radius:18px; padding:2em 1.3em; text-align:center; box-shadow:0 4px 32px #22637622;}
.faqbox-section h2 { font-family:'Playfair Display',serif; font-size:2em; color:#fff; background:#226376; border-radius:10px; margin-bottom:2em; padding:.7em 1em; letter-spacing:0.02em; box-shadow:0 2px 12px #22637630;}
.faq-accordion {display:flex;flex-direction:column;gap:1em;}
.faq-question { width:100%; background:#fff; color:#226376; font-weight: 700; font-family:'Montserrat',sans-serif; padding:1.1em 1.3em; border:none; outline:none; text-align:left; font-size:1.14em; border-radius:9px; display:flex;justify-content:space-between;align-items:center; box-shadow:0 2px 10px #22637624; cursor:pointer; transition:.13s; border-left:5px solid #8ecae6;}
.faq-question:hover, .faq-question.open { background:#e7fdf5; color:#095263; border-left-color:#226376;}
.faq-title {font-weight:bold;}
.faq-toggle { font-size:1.32em; color:#226376; font-family:'Playfair Display',serif; }
.faq-question.open .faq-toggle { color:#8ecae6;}
.faq-answer { background:#fff; color:#283549; text-align:left; font-size:1.03em; border-radius:0 0 9px 9px; box-shadow: 0 1px 8px #22637610; margin-top:-5px; padding:1em 1em 1em 1.2em; display:none; animation: fadeInFaq .2s; border-left:5px solid #8ecae6;}
@keyframes fadeInFaq { from {opacity:0;} to {opacity:1;} }
.faq-question.open+.faq-answer { display:block; }
@media(max-width:700px) { .faqbox-section{padding:1em 0.12em;} .faq-question{font-size:1em;padding:1em 0.7em;} .faq-answer{font-size:.97em;padding:0.8em 0.6em 0.8em 0.7em;} .faqbox-section h2{font-size:1.18em;padding:.46em 0.4em;} }

/* DON MODE CARDS */
.don-options { display:flex;flex-wrap:wrap;gap:2.2em;justify-content:center; margin: 3em 0 1em 0;}
.don-card {
    background:#fff; border-radius:15px; box-shadow:0 2px 17px #b2c7e620; padding:2em 1.8em;
    flex:1 1 260px; max-width:280px; min-width:230px; text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:space-between; font-size:1.04em;
}
.don-card-title { font-size:1.15em; margin-bottom:.57em; color:#226376;font-weight:700;}
.don-card .icon { font-size:2.4em;display:block;margin-bottom:.3em;}
.don-card a, .don-card button[type="submit"], .don-card .main-btn { margin-top:.85em; width:95%; font-size:1.1em;}
.don-card-details {font-size:.98em; color:#47565e;margin-top:.77em;line-height:1.45;}
.contact-row { margin-bottom:.82em; text-align:left;}
.contact-row label { font-size:.98em; color:#233c54; margin-bottom:.13em; display:block; }
.contact-row input { width:98%; font-size:1.07em; padding:.38em .6em; border-radius:7px; border:1.5px solid #b7deef; background:#f8fcfe;}
.contact-row input:focus { border-color:#007876; outline:none; }
@media(max-width:700px){ .don-options{gap:1.2em;} .don-card{max-width:99%;min-width:0;} }

/* FOOTER */
.footer-premium { width: 100%; text-align:center; color:#7a91a3; font-size:1.02em; padding:2em 0 1.15em 0; background:#f7f7fa; border-top:1px solid #eaeaea; margin-top:40px;}
.don-label-wrapper { margin-bottom: 1.4em;}
.don-label-img { height:66px;max-width:140px; margin-bottom:8px;}
.don-label-desc { margin-top:0.7em;font-size:.99em;color:#226376;}
.footer-premium a { color:#226376;text-decoration:underline; }
@media(max-width:500px){ .footer-premium {padding:1em 0 0.8em 0; font-size:0.97em;} .don-label-img {height:44px;max-width:90px;} .don-label-wrapper {margin-bottom:0.6em;} }