/* ==========================================================
   responsive.css — adaptations par taille d'ecran
   Charge en DERNIER, apres main.css, index.css, pages.css et menu.css : les
   regles d'ici les ecrasent toutes. C'est la raison des `!important`
   ponctuels, presents la ou une valeur doit aussi battre un style inline pose
   dans un gabarit.
   
   Deux familles de seuils cohabitent, et c'est deliberé :
   
     par LARGEUR   la mise en page — colonnes, marges, taille du logo
     par HAUTEUR   tout ce qui depend de la place verticale disponible :
                   echelle typographique, mode compact du carrousel
   
   Un telephone en paysage est large mais tres bas : seuls les seuils en
   hauteur le rattrapent correctement.
   
   Le seuil de 500 px de hauteur est partage avec main.css et avec
   COMPACT_QUERY dans js/main.js. Il ne peut pas etre modifie ici seul.
   ========================================================== */

/* ==========================================================
   TABLETTE ET PAYSAGE BAS — echelle typographique
   min(largeur, hauteur) sur chaque taille : le texte se cale sur la dimension
   la plus contraignante, donc reste lisible aussi bien sur une tablette
   verticale que sur un telephone couche.
   ========================================================== */
@media (min-width: 680px) and (max-width: 999px),
(max-height: 500px) {

    .display-xl {
        font-size: min(6vw, 8vh) !important;
        line-height: min(6vw, 8vh) !important;
    }

    .display-xl.title {
        font-size: min(15vw, 20vh) !important;
        line-height: min(15vw, 20vh) !important;
    }

    .display-lg {
        font-size: min(5.4vw, 7.4vh) !important;
        line-height: min(5.4vw, 7.4vh) !important;
    }

    .display-lg.mini {
        font-size: min(4vw, 6vh) !important;
        line-height: min(4vw, 6vh) !important;
    }

    .big-title-menu .display-xl {
        font-size: min(10vw, 12vh) !important;
        line-height: min(9.5vw, 11.5vh) !important;
    }

    .btn-gradient span,
    .menu-slide-video .display-normal {
        font-size: min(2.5vw, 4.2vh) !important;
    }

    .display-normal {
        font-size: min(2.5vw, 3.8vh);
    }

    .table .display-normal, .display-normal.maxi {
    font-size: min(3vw, 4.5vh);
}
}

/* ==========================================================
   AU-DELA DE 1000 px — masquage des variantes mobiles
   Le site sert deux ecritures du meme bloc, .desktop et .mobile, plutot que
   de reordonner en CSS : leur structure de texte differe.
   ========================================================== */
@media screen and (min-width: 1000px) {

    section.menu-slide-video .slipper .text .mobile,
    section.menu-slide-video .slipper.text .mobile,
    .slipper.text .mobile {
        display: none !important;
    }
}

/* ==========================================================
   ECRANS BAS OU ETROITS — indicateur de defilement
   ========================================================== */
@media (max-height: 450px), (max-width:999px) {
    .scroll-down-icon.desktop {
        display: none;
    }
}

/* ==========================================================
   TABLETTE EN PORTRAIT — largeur des vignettes de secteur
   ========================================================== */
@media (max-width: 999px) and (orientation: portrait){
    .secteur,
    .secteur.square {
        width: calc(35vw - var(--page-padding) / 2);
    }
}

/* ==========================================================
   SOUS 1000 px — ombres, colonnes et cesure
   La cesure automatique n'est activee qu'ici : sur un ecran large elle
   n'apporte rien et coupe des mots inutilement. hyphenate-limit-chars evite
   de couper les mots courts.
   ========================================================== */
@media (max-width: 999px) {
    .shadow {
        background:
            50% 0% / 100% 100% repeat-y radial-gradient(185% 70% at 85% 0%, #05050500 47%, #05050512 53%, #05050582 70%, #050505c7 80%, #050505ed 86%, #050505fa 93%, #050505ff 100%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
    }

    section.menu-slide-video .slipper.text.desktop,
    .slipper.text.desktop {
        display: none;
    }

    section.menu-slide-video .slipper.text,
    .inquiries .slipper.text {
        width: 100vw !important;
    }

    .display-normal {
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;

        -webkit-hyphenate-limit-chars: 8 5 3;
        hyphenate-limit-chars: 8 5 3;
    }

    .inquiries {
        height: 350px !important;
    }
}

/* ==========================================================
   SOUS 746 px — bloc « Victor » en colonne inversee
   ========================================================== */
@media (max-width: 746px) {
    .victor-said {
        flex-direction: column-reverse;
        height: fit-content !important;
        padding-top: calc(var(--page-padding) * 3) !important;
        padding-bottom: calc(var(--page-padding) * 3) !important;
    }

    .victor-said .right-content {
        padding-bottom: 6.5vw;
    }

    .victor {
        height: 60vh;
        margin-right: auto;
        width: calc(100vw - var(--page-padding) * 2) !important;
        aspect-ratio: unset !important;
    }

    .victor video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: 28% 0;
        transform: unset !important;
    }
}

/* ==========================================================
   TELEPHONE EN PORTRAIT — vignettes de secteur elargies
   Les vignettes passent a 75vw : a cette largeur, en montrer trois de front
   les rendrait illisibles.
   ========================================================== */
@media (max-width: 679px) and (orientation: portrait){
    .secteur,
    .secteur.square {
        width: calc(75vw - var(--page-padding) / 2);
    }

    /* La réserve du carrousel suit la largeur des vignettes : course
       verticale = largeur / 3 (voir la note dans main.css). Sans cette
       déclinaison, la place réservée resterait calée sur 35vw et
       l'animation serait rognée sur les écrans étroits. */
    :root {
        --secteur-course: calc((75vw - var(--page-padding) / 2) / 3);
    }
}

/* ==========================================================
   SOUS 679 px — TELEPHONE
   Bascule principale : marges a 9vw, typographie en unites de viewport, et
   empilement des deux colonnes.
   ========================================================== */
@media (max-width: 679px) {

    :root {
        --page-padding: 9vw;
    }

    .logo {
        width: 50vw;
    }

    .display-xl {
        font-size: 10vw;
        line-height: 10vw;
    }

    .display-lg {
        font-size: 8.5vw;
        line-height: 8.5vw;
    }

    .display-lg.mini {
        font-size: 7vw;
        line-height: 7vw;
    }

    .display-xl.title {
        font-size: 13vw !important;
        line-height: 12vw !important;
        word-wrap: break-word;
    }

    .display-xl.title.trail-assistance {
        font-size: 16vw !important;
    }

    .menu-slide-video .display-normal {
        font-size: 1.15rem !important;
    }

    .left-sided-content {
        max-width: unset;
    }

    .big-title-menu .display-xl {
        font-size: 3rem;
        line-height: 3rem;
    }

    .btn-gradient span {
        font-size: 1rem !important;
    }

    .left-content,
    .right-content {
        flex: 1 1 100%;
    }

    .shadow {
        background: linear-gradient(360deg, rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, 0) 65%) !important;
    }

    .baseline-project {
        max-width: unset !important;
    }
}

/* ==========================================================
   SOUS 449 px — retrait des elements secondaires
   ========================================================== */
@media (max-width: 449px) {

    #copyright span.desktop,
    #backButton,
    #backButton-single {
        display: none;
    }
}

/* ==========================================================
   LOGO HERO — permutation par ratio d'aspect (accueil)
   Le choix se fait sur la FORME de l'ecran, pas sur sa largeur : le logo
   vertical n'a de sens que si le viewport est lui-meme plus haut que large.
   ========================================================== */
@media (max-aspect-ratio: 3 / 4) {
    .logo-hero.mobile {
        display: flex !important;
    }

    .logo-hero.desktop {
        display: none !important;
    }
}

@media (min-aspect-ratio: 3 / 4) {
    .logo-hero.mobile {
        display: none;
    }
}

/* ==========================================================
   VIEWPORT TRES BAS — recalage du slider de l'accueil
   La marge negative du slider est exprimee en vh dans index.css ; sous 449 px
   de haut elle depasse la hauteur du bloc et le fait sortir de l'ecran. On
   repasse ici en pixels fixes.
   ========================================================== */
@media (max-height: 449px) {
    .sticky-slider-01 {
        min-height: calc(225px + 360px) !important;
        margin-top: -360px !important;
    }
}

/* ==========================================================
   SOUS 779 px — recentrage de la grille inclinee (accueil)
   La grille cesse d'occuper toute la largeur et se centre : conserver la
   rotation de 10 degres sur une grille etroite laisserait des angles vides.
   ========================================================== */
@media (max-width: 779px) {
    .grid-container {
        margin-left: 50% !important;
        transform: translateY(21%) translateX(-50%) rotate(10deg) !important;
        width: fit-content !important;
    }
}