/**
 * Yellow Diligence
 * Ajustements responsive transversaux.
 *
 * Les adaptations propres à un composant ou à une section restent
 * dans components.css et sections.css.
 *
 * Breakpoints alignés sur Bootstrap 5 :
 *
 * xs : < 576px
 * sm : >= 576px
 * md : >= 768px
 * lg : >= 992px
 * xl : >= 1200px
 * xxl: >= 1400px
 */


/* ====================================================================
   Très grands écrans
   ==================================================================== */

@media (min-width: 1400px) {

    .container {
        max-width: var(--yd-container-max);
    }

    /* Les grands écrans conservent le rythme global compact. */
    .yd-section {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

}


/* ====================================================================
   Desktop
   ==================================================================== */

@media (min-width: 1200px) {

    .yd-section-heading__intro {
        font-size: 1.125rem;
    }

    .yd-hero__content {
        max-width: 52rem;
    }

}


/* ====================================================================
   Tablettes paysage / petits desktops
   ==================================================================== */

@media (max-width: 1199.98px) {

    :root {
        --yd-section-space: clamp(2.75rem, 4vw, 3.5rem);
    }

    .yd-section-heading {
        margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
    }

}


/* ====================================================================
   Tablettes / menu mobile Bootstrap
   ==================================================================== */

@media (max-width: 991.98px) {

    :root {
        --yd-navbar-height: 4.75rem;
    }

    body {
        font-size: 0.975rem;
    }

    .yd-section {
        overflow: clip;
    }

    .yd-section-heading__title {
        max-width: 12ch;
    }
}


/* ====================================================================
   Smartphones / tablettes portrait
   ==================================================================== */

@media (max-width: 767.98px) {

    :root {
        --yd-navbar-height: 4.5rem;

        --yd-section-space: 2.5rem;

        --yd-heading-large:
            clamp(2.8rem, 14vw, 4.7rem);

        --yd-heading-medium:
            clamp(2rem, 10vw, 3rem);
    }

    body {
        line-height: 1.65;
    }

    .yd-section-heading {
        margin-bottom: 2rem;
    }

    .yd-section-heading__index {
        font-size: 0.72rem;
    }

    .yd-section-heading__index::before {
        width: 2rem;
    }

    .yd-section-heading__intro {
        margin-top: 1rem;

        font-size: 1rem;
        line-height: 1.7;
    }

    .yd-paper {
        padding: 1.5rem;
    }

}


/* ====================================================================
   Smartphones
   ==================================================================== */

@media (max-width: 575.98px) {

    :root {
        --yd-container-padding: 1rem;
        --yd-button-height: 3.15rem;
        --yd-section-space: 2.25rem;
    }

    /*
     * Évite qu'un texte ou une URL longue puisse agrandir la page
     * horizontalement.
     */
    p,
    li,
    blockquote,
    figcaption {
        overflow-wrap: anywhere;
    }

    .yd-section-heading__title {
        max-width: none;
    }

    .yd-section-heading__intro {
        max-width: none;
    }

    .yd-badge {
        font-size: 0.68rem;
    }

    .yd-paper {
        transform: rotate(-0.3deg);
    }

    .yd-tape {
        width: 4.5rem;
    }

}


/* ====================================================================
   Très petits écrans
   ==================================================================== */

@media (max-width: 374.98px) {

    :root {
        --yd-container-padding: 0.85rem;
    }

    body {
        min-width: 280px;
    }

    .yd-button {
        padding-right: 1.1rem;
        padding-left: 1.1rem;

        font-size: 0.9rem;
    }

    .yd-section-heading__title {
        font-size: 2.65rem;
    }

}


/* ====================================================================
   Orientation paysage sur smartphone
   ====================================================================

   Un Hero strictement basé sur 100vh peut devenir inconfortable
   lorsque l'écran est très bas. On lui permet donc de s'étendre.
   ==================================================================== */

@media (
    max-height: 600px
) and (
    orientation: landscape
) {

    .yd-hero {
        min-height: 42rem;
    }

    .yd-hero__content {
        padding-top:
            calc(var(--yd-navbar-height) + 4rem);

        padding-bottom: 5rem;
    }

    .yd-hero__scroll-hint {
        display: none;
    }

}


/* ====================================================================
   Écrans tactiles
   ==================================================================== */

@media (pointer: coarse) {

    /*
     * Surface tactile minimale confortable.
     */

    .yd-gallery-filter,
    .yd-player__control {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /*
     * Les effets uniquement décoratifs au hover ne doivent pas être
     * nécessaires sur téléphone.
     */

    .yd-member-card:hover,
    .yd-concert:hover {
        transform: none;
    }

}


/* ====================================================================
   Souris précise
   ==================================================================== */

@media (
    hover: hover
) and (
    pointer: fine
) {

    .yd-gallery__link {
        cursor: zoom-in;
    }

}


/* ====================================================================
   Écrans haute densité
   ==================================================================== */

@media (min-resolution: 2dppx) {

    /*
     * Le grain global est légèrement atténué sur les écrans Retina,
     * où il peut sinon devenir trop présent.
     */

    .yd-global-texture {
        opacity: 0.12;
    }

}


/* ====================================================================
   Mode portrait
   ==================================================================== */

@media (
    orientation: portrait
) and (
    max-width: 767.98px
) {

    .yd-tropical-leaves--right {
        top: 32%;
    }

}


/* ====================================================================
   Safe areas iPhone / appareils avec encoche
   ==================================================================== */

@supports (
    padding: env(safe-area-inset-bottom)
) {

    .yd-navbar {
        padding-left:
            max(
                0px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                0px,
                env(safe-area-inset-right)
            );
    }

    .back-to-top {
        right:
            max(
                clamp(1rem, 3vw, 2rem),
                env(safe-area-inset-right)
            );

        bottom:
            max(
                clamp(1rem, 3vw, 2rem),
                env(safe-area-inset-bottom)
            );
    }

    .site-footer {
        padding-bottom:
            max(
                2rem,
                env(safe-area-inset-bottom)
            );
    }

}


/* ====================================================================
   Navigateurs supportant svh
   ==================================================================== */

@supports (height: 100svh) {

    .yd-hero {
        min-height: 100svh;
    }

}


/* ====================================================================
   Navigateurs supportant dvh
   ====================================================================

   dvh tient compte de l'ouverture / fermeture des barres du navigateur
   mobile. On l'utilise uniquement comme amélioration progressive.
   ==================================================================== */

@supports (height: 100dvh) {

    @media (max-width: 767.98px) {

        .yd-hero {
            min-height: 100dvh;
        }

    }

}


/* ====================================================================
   Backdrop filter indisponible
   ==================================================================== */

@supports not (
    backdrop-filter: blur(1px)
) {

    .yd-navbar,
    .yd-navbar.is-scrolled {
        background: rgba(8, 9, 8, 0.97);
    }

}


/* ====================================================================
   Impression smartphone / desktop
   ==================================================================== */

@media print {

    .container {
        width: 100%;
        max-width: none;

        padding-right: 0;
        padding-left: 0;
    }

    .yd-section-heading {
        margin-bottom: 1.5rem;
    }

}