/* ==========================================================
   LA MARCHE À SUIVRE — HEADER PUBLIC
   Disposition :
   - Jusqu'à 799 px  : titre / sous-titre | Menu | Nous aider
   - Dès 800 px      : titre centré, navigation desktop dessous
   - Toutes largeurs : « Nous aider » reste fixe au défilement
   Design de « Nous aider » repris de main :
   mobile <= 760, tablette 761–1179, PC >= 1180.
   Le hamburger reste visible jusqu'à 799 px.
   ========================================================== */
@import "fonts/kalam-rv4cnJ-.css";
@import "fonts/montserrat-nMInfMJ.css";
@import "fonts/nunito-sans-n5aYf8u.css";

/* =========================
   STRUCTURE ET MARQUE
   ========================= */

.site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    font-family: "Nunito Sans", sans-serif;
}

.header-main {
    --header-side: 12px;
    --header-height: 88px;
    --donation-slot: 104px; /* Réservation pour positionner le Menu, pas une largeur de bouton. */
    --donation-height: 36px;
    --actions-gap: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    height: var(--header-height);
    padding: 0 var(--header-side);
    background: var(--header-green);
}

.header-main .brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 210px);
    color: #fff;
    text-align: left;
    text-decoration: none;
}

.header-main .brand:hover {
    color: #fff;
}

.header-main .brand-title {
    display: block;
    font-family: "Kalam", cursive;
    font-size: clamp(15px, 4.5vw, 22px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.6px;
    white-space: nowrap;
}

.header-main .brand-tagline {
    display: block;
    margin-top: 5px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(6px, 1.8vw, 9px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    word-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

/* =========================
   BOUTON MENU — STYLE MOBILE ORIGINAL
   ========================= */

.header-main .menu-button {
    position: absolute;
    top: 50%;
    right: calc(var(--header-side) + var(--donation-slot) + var(--actions-gap));
    z-index: 101;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.header-main .menu-button span {
    width: 24px;
    height: 2px;
    display: block;
    background: #ffffff;
    border-radius: 20px;
}

/* =========================
   NOUS AIDER — DESIGN ORIGINAL DE MAIN
   Mobile par défaut, tablette à 761 px, PC à 1180 px.
   Seul le positionnement fixe est adapté au nouveau header.
   ========================= */

.header-main .header-donation {
    position: fixed;
    top: calc((var(--header-height) - var(--donation-height)) / 2);
    right: var(--header-side);
    z-index: 1000;
    box-sizing: border-box;
    width: auto; /* Largeur naturelle du bouton sur mobile et tablette. */
    padding: 9px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coral);
    color: #ffffff;
    border: 2px solid transparent;
    border-radius: 5px;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transform: none;
    transition: border-color 0.18s ease;
}

.header-main .header-donation:hover {
    color: #ffffff;
    transform: none;
}

.header-main .header-donation.is-floating {
    border-color: #e1ae86;
}

/* =========================
   NAVIGATION ET ACCESSIBILITÉ
   ========================= */

.desktop-nav {
    display: none;
}

.header-main .menu-button:focus-visible,
.header-main .header-donation:focus-visible,

.desktop-nav a:focus-visible {
    outline: 3px solid #e1ae86;
    outline-offset: 4px;
}
/* Très petits écrans : sous-titre sur une ligne sans collision. */

@media (max-width: 359px) {

    .header-main {
        --header-side: 8px;
    }

    .header-main .brand-title {
        font-size: 15px;
        letter-spacing: -0.8px;
    }

    .header-main .brand-tagline {
        font-family: "Nunito Sans", sans-serif;
        font-size: 6.3px;
        font-weight: 700;
        letter-spacing: -0.2px;
        word-spacing: normal;
        text-transform: none;
    }

}

/* =========================
   TABLETTE — 761 À 1179 PX
   Typographie historique de main (sans majuscules forcées)
   ========================= */

@media (min-width: 761px) and (max-width: 1179px) {

    .header-main {
        --header-side: 32px;
        --header-height: 112px;
        --donation-slot: 122px;
        --donation-height: 42px;
        --actions-gap: 18px;
    }

    .header-main .brand {
        max-width: calc(100% - 300px);
    }

.header-main .menu-button {
        width: 40px;
        height: 40px;
    }

    .header-main .menu-button span {
        width: 29px;
        height: 3px;
    }

    .header-main .header-donation {
        min-height: 42px;
        padding: 0 17px;
        font-size: 17px;
    }

}

/* =========================
   PC — À PARTIR DE 1180 PX
   Styles originaux du bouton de don.
   Ces styles concernent uniquement le bouton « Nous aider » et les tailles de police.
   ========================= */

@media (min-width: 1180px) {

    .header-main {
        --header-side: 32px;
        --header-height: 112px;
        --donation-slot: 194px;
        --donation-height: 58px;
        --actions-gap: 18px;
    }

    .header-main .brand {
        max-width: calc(100% - 300px);
    }

    .header-main .brand-title {
        font-size: 36px;
        line-height: 0.94;
        letter-spacing: -0.7px;
    }

    .header-main .brand-tagline {
        margin-top: 2px;
        font-family: "Nunito Sans", sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.1px;
        word-spacing: normal;
        text-transform: none;
    }
    /* Sur main : width: 100% dans une zone intérieure de 194 px.
       En position fixed, la largeur équivalente est donnée par le slot. */

    .header-main .header-donation {
        width: var(--donation-slot);
        min-height: 58px;
        padding: 0 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--coral);
        color: #ffffff;
        border: 0;
        border-radius: 7px;
        font-size: 20px;
        font-weight: 900;
        white-space: nowrap;
    }

    .header-main .header-donation:hover {
        color: #ffffff;
        filter: brightness(0.96);
    }

    .header-main .header-donation.is-floating {
        border: 0;
    }
    /* Dimensions historiques du hamburger ; il est masqué dès 800 px. */

    .header-main .menu-button {
        width: 40px;
        height: 40px;
    }

    .header-main .menu-button span {
        width: 29px;
        height: 3px;
    }

}

/* =========================
   HEADER COMPACT — 761 À 1199 PX
   Hauteur et marges latérales d'origine sur tablette.
   Police et casse du slogan rétablies comme sur main.
   Les boutons conservent leur design et leur positionnement.
   ========================= */

@media (min-width: 761px) and (max-width: 1199.98px) {

    .header-main {
        --header-height: 72px;
        --header-side: 24px;
    }
    /* Le bandeau compact retrouve les proportions de main. */
}

/* =========================
   NAVIGATION HORIZONTALE — DÈS 800 PX
   ========================= */
/* Typographie du titre et du sous-titre : tablette et PC compact.
   Le style mobile reste prioritaire jusqu’à 799 px inclus. */

@media (min-width: 800px) and (max-width: 1199.98px) {

    .header-main .brand-title {
        font-size: 30px;
        line-height: 1;
        letter-spacing: -0.8px;
    }

    .header-main .brand-tagline {
        margin-top: 1px;
        font-family: "Nunito Sans", sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.1px;
        word-spacing: normal;
        text-transform: none;
    }

}

@media (min-width: 800px) {

    .header-main {
        justify-content: center;
    }

    .header-main .brand {
        max-width: calc(100% - 360px);
        align-items: center;
        text-align: center;
    }

    .header-main .menu-button {
        display: none;
    }
    /* Bandeau de navigation commun à partir de 800 px. */

    .desktop-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-sizing: border-box;
        height: 72px;
        padding: 0 24px;
        border-bottom: 1px solid #e8ebe5;
        background: #fff;
        box-shadow: 0 6px 20px rgba(31, 54, 39, 0.035);
    }

    .desktop-nav a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 72px;
        padding: 0 clamp(12px, 1.4vw, 27px);
        color: #24412e;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.15px;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .desktop-nav a:hover {
        color: #579f3e;
    }

    .desktop-nav a::after {
        position: absolute;
        bottom: 13px;
        left: 50%;
        width: 0;
        height: 3px;
        border-radius: 20px;
        background: #70b953;
        content: "";
        transform: translateX(-50%);
        transition: width 0.2s ease;
    }

    .desktop-nav a:hover::after,

    .desktop-nav a.is-active::after {
        width: 28px;
    }

    .desktop-nav a.is-active {
        color: #559d3c;
    }

}

/* =========================
   NAVIGATION SUR ÉCRANS DE 800 À 1499 PX
   Même présentation que sur grand écran,
   sans débordement si les liens sont nombreux.
   ========================= */

@media (min-width: 800px) and (max-width: 1499px) {

    .desktop-nav {
        overflow: visible;
        justify-content: center;
        gap: clamp(0px, 0.75vw, 10px);
    }

    .desktop-nav a {
        flex-shrink: 0;
        padding-inline: clamp(9px, 1vw, 16px);
        font-size: clamp(13px, 1.2vw, 16px);
    }

}

/* =========================
   GRAND ÉCRAN — DÈS 1500 PX
   Conserve les dimensions antérieures.
   ========================= */

@media (min-width: 1500px) {

    .header-main {
        --header-side: 42px;
        --header-height: 118px;
        --donation-slot: 194px;
    }

    .header-main .brand-title {
        font-size: 36px;
        line-height: 0.94;
        letter-spacing: -0.7px;
    }

    .header-main .brand-tagline {
        font-size: 14px;
        letter-spacing: -0.1px;
        word-spacing: normal;
    }

}

/* =========================
   TRÈS GRAND ÉCRAN — DÈS 1700 PX
   ========================= */

@media (min-width: 1700px) {

    .header-main {
        --header-side: 55px;
        --header-height: 124px;
    }

    .header-main .brand-title {
        font-size: 36px;
    }

    .header-main .brand-tagline {
        font-size: 14px;
        letter-spacing: -0.1px;
    }

    .desktop-nav {
        height: 76px;
        gap: 18px;
    }

    .desktop-nav a {
        height: 76px;
        padding: 0 34px;
        font-size: 17px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .header-main .header-donation,
    .desktop-nav a,

    .desktop-nav a::after {
        transition: none;
    }

}

@media (max-width: 760px) {

    .header-main {
        --header-height: 60px;
    }

}

@media (max-width: 799.98px) {

    .header-main .brand-title {
        font-family: "Kalam", cursive;
        font-size: clamp(18px, 6.1vw, 26px);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.8px;
        white-space: nowrap;
    }

    .header-main .brand-tagline {
        margin-top: 1px;
        font-family: "Nunito Sans", sans-serif;
        font-size: clamp(7px, 2.4vw, 12px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.1px;
        word-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        margin: auto;
    }

}

@media (max-width: 420px) {
    .header-main {
        padding: 8px;
        align-items: center;
    }

    .header-main .brand-title {
        font-size: clamp(16px, 5.9vw, 26px);
        line-height: 0
    }

    .header-main .brand-tagline {
        display: none;
    }
}

/* Header responsive : espaces réservés au badge, à la marque et aux actions. */
.header-main {
    --badge-width: 158px;
    --badge-height: 96px;
    display: grid;
    grid-template-columns: minmax(var(--badge-width), 1fr) minmax(0, auto) minmax(var(--donation-slot), 1fr);
    gap: clamp(12px, 2vw, 32px);
    height: auto;
    min-height: var(--header-height);
    padding: 10px var(--header-side);
}
.header-main .brand {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
}
.header-main .brand-title { line-height: 1.15; }
.header-main .brand-tagline { white-space: normal; text-wrap: balance; }
.marche-countdown {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    position: relative;
    box-sizing: border-box;
    width: var(--badge-width);
    min-height: var(--badge-height);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFF0C9;
    border-radius: 43% 46% 45% 42% / 49% 46% 48% 45%;
    transform: rotate(-1deg);
    font-family: "Nunito", "Nunito Sans", sans-serif;
}
.marche-countdown__number {
    color: #E66B70;
    font-size: 43px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    white-space: nowrap;
    transform: rotate(1deg);
}
.marche-countdown__calendar { display: none; }
.marche-countdown[data-phase="started"] .marche-countdown__number {
    font-size: 23px;
    letter-spacing: -1px;
}
.marche-countdown__label {
    margin-top: 5px;
    color: #357b4a;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .4px;
    white-space: nowrap;
    transform: rotate(1deg);
}
.marche-countdown__rays {
    position: absolute;
    width: 20px;
    height: 42px;
    top: 18px;
    pointer-events: none;
}
.marche-countdown__rays--left { left: 5px; }
.marche-countdown__rays--right { right: 5px; transform: scaleX(-1); }
.marche-countdown__rays::before,
.marche-countdown__rays::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 4px;
    border-radius: 99px;
    background: #E66B70;
    left: 0;
}
.marche-countdown__rays::before { top: 7px; transform: rotate(28deg); }
.marche-countdown__rays::after { top: 28px; transform: rotate(-28deg); }
@media (min-width: 800px) and (max-width: 1199.98px) {
    .header-main {
        --badge-width: 136px;
        --badge-height: 80px;
        --donation-slot: 136px;
        --donation-height: 42px;
        --header-height: 100px;
    }
    .header-main .header-donation { width: auto; min-height: 42px; padding: 0 17px; font-size: 17px; }
    .header-main .brand-title { font-size: clamp(24px, 3vw, 30px); white-space: normal; }
    .header-main .brand-tagline { font-size: 11px; }
    .marche-countdown__number { font-size: 35px; }
    .marche-countdown__label { font-size: 9px; }
    .marche-countdown[data-phase="started"] .marche-countdown__number { font-size: 19px; }
    .marche-countdown__rays { top: 11px; }
}
@media (max-width: 799.98px) {
    .header-main {
        --header-side: clamp(12px, 3vw, 24px);
        --header-height: 68px;
        --donation-height: 40px;
        --badge-width: 136px;
        --badge-height: 82px;
        grid-template-columns: minmax(0, 1fr) 104px;
        grid-template-rows: minmax(48px, auto) auto;
        gap: 12px 16px;
        padding: 10px var(--header-side) 14px;
    }
    .header-main .brand {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-start;
        text-align: left;
    }
    .header-main .brand-title {
        font-size: clamp(18px, 3.8vw, 26px);
        line-height: 1.15;
        white-space: normal;
    }
    .header-main .brand-tagline {
        display: block;
        margin: 3px 0 0;
        font-size: clamp(9px, 1.8vw, 11px);
        line-height: 1.3;
    }
    .header-main .header-donation {
        width: 104px;
        min-height: 40px;
        padding: 9px 10px;
        font-size: 15px;
    }
    .marche-countdown { grid-row: 2; }
    .marche-countdown__number { font-size: 35px; }
    .marche-countdown__label { font-size: 9px; }
    .marche-countdown[data-phase="started"] .marche-countdown__number { font-size: 19px; }
    .marche-countdown__rays { top: 12px; }
    .header-main .menu-button {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        position: relative;
        inset: auto;
        width: 48px;
        height: 48px;
        transform: none;
    }
}
@media (max-width: 359px) {
    .header-main { column-gap: 10px; }
    .header-main .brand-title { font-size: 18px; }
    .header-main .brand-tagline { font-size: 9px; }
}

/* Compact mobile countdown; keep the same Stimulus targets and menu button. */
@media (max-width: 799px) {
    .header-main {
        grid-template-rows: minmax(48px, auto) 44px;
        row-gap: 10px;
        padding-bottom: 0;
    }

    .header-main::before {
        content: '';
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: stretch;
        margin-inline: calc(-1 * var(--header-side));
        background: #FFF0C9;
    }

    .header-main .marche-countdown {
        grid-column: 1 / -1;
        grid-row: 2;
        z-index: 1;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 44px;
        padding: 0 52px 0 0;
        flex-direction: row;
        justify-content: flex-start;
        gap: clamp(6px, 1.5vw, 10px);
        border-radius: 0;
        transform: none;
    }

    .marche-countdown__calendar {
        display: block;
        flex-shrink: 0;
        color: #357b4a;
    }

    .marche-countdown__rays { display: none; }

    .marche-countdown .marche-countdown__number {
        font-size: clamp(20px, 4vw, 24px);
        letter-spacing: -0.5px;
        transform: none;
    }

    .marche-countdown .marche-countdown__label {
        min-width: 0;
        margin: 0;
        padding-left: clamp(6px, 1.5vw, 10px);
        border-left: 1px solid currentColor;
        font-size: clamp(10px, 2vw, 12px);
        font-weight: 700;
        letter-spacing: 0;
        white-space: normal;
        text-transform: lowercase;
        transform: none;
    }

    .header-main .menu-button {
        z-index: 2;
        width: 44px;
        height: 44px;
    }
}