/**
 * Yellow Diligence
 * Composants réutilisables.
 *
 * Navigation, boutons, cartes, badges, retour en haut et footer.
 */


/* ====================================================================
   Navigation
   ==================================================================== */

.site-header {
    position: relative;
    z-index: var(--yd-z-navbar);
}

.yd-navbar {
    min-height: var(--yd-navbar-height);
    padding: 0.75rem 0;

    /* border-bottom: 1px solid transparent; */
    border-bottom: 0;

    background: linear-gradient(
        180deg,
        rgba(8, 9, 8, 0.68) 0%,
        rgba(8, 9, 8, 0.18) 70%,
        transparent 100%
    );

    transition:
        padding var(--yd-transition),
        background-color var(--yd-transition),
        box-shadow var(--yd-transition),
        backdrop-filter var(--yd-transition);
}

.yd-navbar.is-scrolled {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;

    border-bottom: 0;

    background: rgba(16, 19, 16, 0.94);

    -webkit-backdrop-filter: blur(var(--yd-navbar-blur));
    backdrop-filter: blur(var(--yd-navbar-blur));

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.28);
}


/* ====================================================================
   Marque navigation
   ==================================================================== */

.yd-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0;

    color: var(--yd-white);
    text-decoration: none;
}

.yd-navbar__brand:hover {
    color: var(--yd-white);
}

.yd-navbar__brand-mark {
    display: grid;
    flex: 0 0 auto;

    width: 2.65rem;
    height: 2.9rem;

    place-items: center;

    transition:
        transform var(--yd-transition),
        filter var(--yd-transition);
}

.yd-navbar__brand-mark img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.yd-navbar__brand:hover
.yd-navbar__brand-mark {
    transform:
        translateY(-1px)
        scale(1.04);

    filter:
        drop-shadow(
            0 0 0.45rem rgba(242, 183, 5, 0.28)
        );
}

.yd-navbar__brand-text {
    display: flex;
    flex-direction: column;

    font-family: var(--yd-font-display);
    font-size: 1.25rem;
    font-weight: var(--yd-weight-extrabold);
    line-height: 0.82;

    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.yd-navbar__brand-yellow {
    color: var(--yd-yellow);
}

.yd-navbar__brand-diligence {
    color: var(--yd-white);
}


/* ====================================================================
   Liens navigation
   ==================================================================== */

.yd-navbar__menu {
    gap: 0.15rem;
}

.yd-navbar__link {
    position: relative;

    padding: 0.65rem 0.7rem !important;

    font-family: var(--yd-font-display);
    font-size: 1.05rem;
    font-weight: var(--yd-weight-bold);

    letter-spacing: var(--yd-tracking-wide);
    text-transform: uppercase;

    color: var(--yd-white-75) !important;

    transition:
        color var(--yd-transition-fast),
        transform var(--yd-transition-fast);
}

.yd-navbar__link::after {
    content: "";

    position: absolute;
    right: 0.7rem;
    bottom: 0.25rem;
    left: 0.7rem;

    height: 2px;

    background: var(--yd-gradient-reggae);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform var(--yd-transition);
}

.yd-navbar__link:hover {
    color: var(--yd-white) !important;
    transform: translateY(-1px);
}

.yd-navbar__link:hover::after,
.yd-navbar__link.active::after {
    transform: scaleX(1);
}

.yd-navbar__link.active {
    color: var(--yd-yellow) !important;
}


/* ====================================================================
   Bouton hamburger
   ==================================================================== */

.yd-navbar__toggler {
    width: 3rem;
    height: 3rem;

    padding: 0;

    border: 1px solid var(--yd-border);
    border-radius: 50%;

    background: var(--yd-white-04);

    box-shadow: none !important;
}

.yd-navbar__toggler:hover {
    border-color: var(--yd-yellow-50);
    background: var(--yd-yellow-15);
}

.yd-navbar__toggler-box {
    position: relative;

    display: block;

    width: 1.25rem;
    height: 1rem;

    margin: auto;
}

.yd-navbar__toggler-line {
    position: absolute;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    border-radius: var(--yd-radius-pill);

    background: var(--yd-white);

    transition:
        top var(--yd-transition),
        transform var(--yd-transition),
        opacity var(--yd-transition);
}

.yd-navbar__toggler-line:nth-child(1) {
    top: 0;
}

.yd-navbar__toggler-line:nth-child(2) {
    top: calc(50% - 1px);
}

.yd-navbar__toggler-line:nth-child(3) {
    top: calc(100% - 2px);
}

.yd-navbar__toggler[aria-expanded="true"]
.yd-navbar__toggler-line:nth-child(1) {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

.yd-navbar__toggler[aria-expanded="true"]
.yd-navbar__toggler-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.yd-navbar__toggler[aria-expanded="true"]
.yd-navbar__toggler-line:nth-child(3) {
    top: calc(50% - 1px);
    transform: rotate(-45deg);
}


/* ====================================================================
   Boutons généraux
   ==================================================================== */

.yd-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    min-height: var(--yd-button-height);

    padding: 0.75rem 1.5rem;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: var(--yd-radius-pill);

    font-family: var(--yd-font-display);
    font-size: 1rem;
    font-weight: var(--yd-weight-extrabold);

    letter-spacing: var(--yd-tracking-wide);
    line-height: 1;

    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;

    isolation: isolate;

    transition:
        color var(--yd-transition),
        background-color var(--yd-transition),
        border-color var(--yd-transition),
        box-shadow var(--yd-transition),
        transform var(--yd-transition);
}

.yd-button:hover {
    transform: translateY(-3px);
}

.yd-button:active {
    transform: translateY(-1px) scale(0.985);
}

.yd-button > * {
    position: relative;
    z-index: 2;
}


/* ====================================================================
   Bouton dubplate principal
   ==================================================================== */

.yd-button--primary {
    color: var(--yd-black);
    background: var(--yd-yellow);

    box-shadow:
        0 8px 30px rgba(242, 183, 5, 0.16);
}

.yd-button--primary::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.34) 45%,
            transparent 70%
        );

    transform: translateX(-130%);
    transition: transform 650ms var(--yd-ease);
}

.yd-button--primary:hover {
    color: var(--yd-black);
    background: var(--yd-yellow-light);

    box-shadow: var(--yd-shadow-yellow);
}

.yd-button--primary:hover::before {
    transform: translateX(130%);
}




/* ====================================================================
   Ripple
   ====================================================================

   Le span .yd-ripple sera injecté dynamiquement par effects.js.
   ==================================================================== */

.yd-ripple {
    position: absolute;
    z-index: 1;

    width: 1rem;
    height: 1rem;

    pointer-events: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.42);

    transform: translate(-50%, -50%) scale(0);

    animation: yd-ripple-animation 650ms ease-out forwards;
}


/* ====================================================================
   Badges
   ==================================================================== */

.yd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.4rem 0.7rem;

    border: 1px solid var(--yd-border-subtle);
    border-radius: var(--yd-radius-pill);

    font-family: var(--yd-font-display);
    font-size: var(--yd-font-xs);
    font-weight: var(--yd-weight-bold);

    letter-spacing: var(--yd-tracking-wide);
    text-transform: uppercase;

    color: var(--yd-white-75);
    background: var(--yd-white-04);
}

.yd-badge--yellow {
    color: var(--yd-yellow-light);

    border-color: var(--yd-yellow-25);
    background: var(--yd-yellow-15);
}

.yd-badge--green {
    color: var(--yd-green-light);

    border-color: var(--yd-green-40);
    background: var(--yd-green-20);
}

.yd-badge--red {
    color: var(--yd-red-light);

    border-color: var(--yd-red-40);
    background: var(--yd-red-20);
}



/* ====================================================================
   Bloc papier / souvenir
   ==================================================================== */

.yd-paper {
    position: relative;

    padding: clamp(1.5rem, 4vw, 2.5rem);

    color: #28251d;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.32),
            transparent 30%
        ),
        var(--yd-paper);

    border-radius: 0.15rem;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.28);

    transform: rotate(-0.8deg);
}

.yd-paper::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(40, 37, 29, 0.09) 4px
        );
}

.yd-paper > * {
    position: relative;
    z-index: 1;
}


/* ====================================================================
   Faux scotch
   ==================================================================== */

.yd-tape {
    position: absolute;
    z-index: 5;

    width: 5.5rem;
    height: 1.5rem;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(231, 218, 167, 0.58),
            rgba(244, 231, 180, 0.76),
            rgba(231, 218, 167, 0.58)
        );

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.12);

    opacity: 0.82;
}

.yd-tape--top {
    top: -0.65rem;
    left: 50%;

    transform: translateX(-50%) rotate(-3deg);
}



/* ====================================================================
   Retour en haut
   ==================================================================== */

.back-to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);

    z-index: var(--yd-z-back-to-top);

    display: grid;
    place-items: center;

    width: var(--yd-back-to-top-size);
    height: var(--yd-back-to-top-size);

    padding: 0;

    border: 1px solid var(--yd-yellow-25);
    border-radius: 50%;

    color: var(--yd-black);
    background: var(--yd-yellow);

    box-shadow: var(--yd-shadow-md);

    opacity: 0;
    visibility: hidden;

    cursor: pointer;

    transform: translateY(1rem) scale(0.9);

    transition:
        opacity var(--yd-transition),
        visibility var(--yd-transition),
        transform var(--yd-transition),
        background-color var(--yd-transition),
        box-shadow var(--yd-transition);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

.back-to-top:hover {
    background: var(--yd-yellow-light);

    box-shadow: var(--yd-shadow-yellow);

    transform: translateY(-4px);
}

.back-to-top i {
    font-size: 1.25rem;
}


/* ====================================================================
   Footer
   ==================================================================== */

.site-footer {
    position: relative;

    overflow: hidden;

    padding: clamp(2rem, 4vw, 3rem) 0 2rem;

    border-top: 1px solid var(--yd-border-subtle);

    color: var(--yd-white-75);

    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(37, 115, 59, 0.12),
            transparent 30rem
        ),
        var(--yd-black);
}

.site-footer__inner {
    position: relative;
    z-index: 2;
}

.site-footer__identity {
    text-align: center;
}

.site-footer__brand {
    display: inline-flex;
    flex-direction: column;

    font-family: var(--yd-font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: var(--yd-weight-black);
    line-height: 0.78;

    letter-spacing: var(--yd-tracking-tight);
    text-transform: uppercase;
    text-decoration: none;

    transform: rotate(-1deg);
}

.site-footer__brand:hover {
    transform: rotate(0deg);
}

.site-footer__brand-yellow {
    color: var(--yd-yellow);
}

.site-footer__brand-diligence {
    color: var(--yd-white);
}

.site-footer__period {
    margin-top: 1.5rem;

    font-family: var(--yd-font-display);
    font-size: 1rem;
    font-weight: var(--yd-weight-semibold);

    letter-spacing: var(--yd-tracking-wide);
    text-transform: uppercase;

    color: var(--yd-grey);
}


/* ====================================================================
   Footer : séparateur reggae
   ==================================================================== */

.site-footer__separator {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: min(100%, 14rem);
    height: 3px;

    margin: 2.5rem auto;

    overflow: hidden;

    border-radius: var(--yd-radius-pill);
}

.site-footer__separator-green {
    background: var(--yd-green);
}

.site-footer__separator-yellow {
    background: var(--yd-yellow);
}

.site-footer__separator-red {
    background: var(--yd-red);
}


/* ====================================================================
   Footer : bas
   ==================================================================== */

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--yd-border-subtle);

    font-size: var(--yd-font-sm);
}

.site-footer__copyright,
.site-footer__credit {
    margin: 0;
}

.site-footer__credit a {
    position: relative;

    color: var(--yd-white);
    font-weight: var(--yd-weight-semibold);

    text-decoration: none;
}

.site-footer__credit a::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -0.2rem;
    left: 0;

    height: 1px;

    background: var(--yd-gradient-reggae);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform var(--yd-transition);
}

.site-footer__credit a:hover {
    color: var(--yd-yellow);
}

.site-footer__credit a:hover::after {
    transform: scaleX(1);
}


/* ====================================================================
   Diligence décorative du footer
   ====================================================================

   Pour le moment il s'agit d'un filigrane abstrait.
   Le véritable dessin de diligence sera raccordé lorsque le visuel
   définitif sera créé.
   ==================================================================== */

.site-footer__diligence {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(70vw, 48rem);
    height: 12rem;

    pointer-events: none;

    border: 2px solid rgba(244, 240, 230, 0.025);
    border-radius: 50%;

    opacity: 0.65;

    transform: translate(-50%, -45%) rotate(-3deg);
}

.site-footer__diligence::before,
.site-footer__diligence::after {
    content: "";

    position: absolute;
    bottom: -2rem;

    width: 4rem;
    height: 4rem;

    border: 2px solid rgba(244, 240, 230, 0.035);
    border-radius: 50%;
}

.site-footer__diligence::before {
    left: 18%;
}

.site-footer__diligence::after {
    right: 18%;
}


/* ====================================================================
   Responsive composants
   ==================================================================== */

@media (max-width: 991.98px) {

    .yd-navbar {
        background: rgba(8, 9, 8, 0.82);

        -webkit-backdrop-filter: blur(var(--yd-navbar-blur));
        backdrop-filter: blur(var(--yd-navbar-blur));
    }

    .yd-navbar .navbar-collapse {
        margin-top: 0.75rem;
        padding: 1rem;

        border: 1px solid var(--yd-border-subtle);
        border-radius: var(--yd-radius-lg);

        background: rgba(13, 15, 13, 0.97);

        box-shadow: var(--yd-shadow-lg);
    }

    .yd-navbar__menu {
        align-items: stretch !important;
        gap: 0.2rem;
    }

    .yd-navbar__link {
        padding: 0.85rem 0.6rem !important;
        font-size: 1.08rem;
    }

    .yd-navbar__link::after {
        right: auto;
        bottom: 0.45rem;
        left: 0.5rem;

        width: 2.5rem;
    }


}


@media (max-width: 767.98px) {

    .site-footer__bottom {
        flex-direction: column;

        text-align: center;
    }


}


@media (max-width: 575.98px) {

    .yd-navbar__brand-text {
        font-size: 1.08rem;
    }

    .yd-navbar__brand-mark {
        width: 2.4rem;
        height: 2.4rem;
    }

    .back-to-top {
        width: 3rem;
        height: 3rem;
    }

}


/* ====================================================================
   Appareils tactiles
   ====================================================================

   Sur un écran sans véritable hover, on évite de dépendre des effets
   de survol pour comprendre l'interface.
   ==================================================================== */

@media (hover: none) {

    .yd-button:hover,
    .back-to-top:hover {
        transform: none;
    }

    .yd-navbar__link:hover {
        transform: none;
    }

}


/* ====================================================================
   Mouvement réduit
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {

    .yd-navbar__brand-mark,
    .yd-navbar__brand,
    .yd-button,
    .back-to-top {
        transform: none !important;
    }

    .yd-ripple {
        display: none;
    }

}


/* ====================================================================
   Consentement / mesure d'audience
   ==================================================================== */

.yd-cookie-banner[hidden] {
    display: none !important;
}

.yd-cookie-banner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;

    z-index: 1090;

    max-width: 58rem;
    margin-inline: auto;

    border: 1px solid rgba(242, 183, 5, 0.28);
    border-radius: var(--yd-radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        ),
        rgba(22, 26, 22, 0.97);

    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.yd-cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;

    padding: 1rem 1.1rem;
}

.yd-cookie-banner__copy {
    min-width: 0;
}

.yd-cookie-banner__title {
    display: block;

    margin-bottom: 0.25rem;

    font-family: var(--yd-font-display);
    font-size: 1.05rem;
    font-weight: var(--yd-weight-bold);

    letter-spacing: 0.045em;
    text-transform: uppercase;

    color: var(--yd-yellow);
}

.yd-cookie-banner__text {
    margin: 0;

    font-size: 0.82rem;
    line-height: 1.5;

    color: rgba(244, 240, 230, 0.72);
}

.yd-cookie-banner__text a {
    color: rgba(255, 255, 255, 0.92);
}

.yd-cookie-banner__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.55rem;
}

.yd-cookie-banner__button {
    min-height: 2.45rem;
    padding: 0.5rem 0.8rem;

    border: 1px solid rgba(242, 183, 5, 0.48);
    border-radius: var(--yd-radius-pill);

    font-family: var(--yd-font-display);
    font-size: 0.75rem;
    font-weight: var(--yd-weight-bold);

    letter-spacing: 0.045em;
    text-transform: uppercase;

    color: var(--yd-white);
    background: rgba(242, 183, 5, 0.07);

    cursor: pointer;

    transition:
        color var(--yd-transition-fast),
        background-color var(--yd-transition-fast),
        border-color var(--yd-transition-fast),
        transform var(--yd-transition-fast);
}

.yd-cookie-banner__button:hover,
.yd-cookie-banner__button:focus-visible {
    border-color: var(--yd-yellow);

    color: var(--yd-black);
    background: var(--yd-yellow);

    transform: translateY(-1px);
}

.yd-cookie-banner__button:focus-visible,
.site-footer__privacy:focus-visible {
    outline: 2px solid var(--yd-yellow);
    outline-offset: 3px;
}

.site-footer__privacy {
    padding: 0;

    border: 0;

    font: inherit;
    color: rgba(244, 240, 230, 0.72);
    background: transparent;

    text-decoration: underline;
    text-decoration-color: rgba(242, 183, 5, 0.35);
    text-underline-offset: 0.2rem;

    cursor: pointer;
}

.site-footer__privacy:hover {
    color: var(--yd-yellow);
}

@media (max-width: 767.98px) {
    .yd-cookie-banner {
        right: 0.65rem;
        bottom: 0.65rem;
        left: 0.65rem;
    }

    .yd-cookie-banner__inner {
        align-items: stretch;
        flex-direction: column;
        gap: 0.85rem;
    }

    .yd-cookie-banner__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yd-cookie-banner__button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .yd-cookie-banner__actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yd-cookie-banner__button {
        transition: none;
    }

    .yd-cookie-banner__button:hover,
    .yd-cookie-banner__button:focus-visible {
        transform: none;
    }
}