/* -------------------------------------------------------------------------
 * Off-Canvas Menu (fullscreen-split) — colonne centrale
 * -------------------------------------------------------------------------
 * Depuis 2026-08-11 la colonne centrale porte le menu principal (5 items) PLUS
 * le bloc « Suivez-nous ». Elle est donc nettement plus haute qu'avant.
 * (La bascule de langue y a transite un temps ; a la demande de Mattis elle est
 * repassee dans la colonne de droite le 2026-08-11.)
 *
 * Le conteneur `.inner` de l'OCM est en `overflow: visible` et la page ne
 * defile pas quand le menu est ouvert : tout ce qui depasse le bas de l'ecran
 * est simplement invisible et inatteignable. A 1440x800 (taille de portable
 * tres courante), les icones sociales tombaient sous la ligne de flottaison.
 *
 * On resserre donc l'interlignage de la colonne centrale sur les ecrans peu
 * hauts, par paliers. Les grands ecrans gardent le design d'origine intact.
 *
 * SEUILS : chaque palier doit s'enclencher AVANT que ca devienne critique, pas
 * au moment ou ca casse. Mesure a l'appui, juste au-dessus d'un seuil trop bas
 * il ne restait qu'une poignee de pixels (1px a 1440x721 quand le seuil etait a
 * 720 ; 13px a 1440x901 quand il etait a 900) — aucune reserve pour un libelle
 * qui passe sur deux lignes ou un item ajoute par le client, et ce qui deborde
 * est hors d'atteinte puisque la page ne defile pas menu ouvert.
 * D'ou 1000 / 820 / 720 plutot que 900 / 720.
 *
 * ATTENTION SPECIFICITE : le CSS du site (options Salient, injecte inline)
 * cible `#slide-out-widget-area.fullscreen-split .right-side .customNewMenu
 * .menu a` et declare TOUT en `!important` :
 *   padding: 22px 0 !important; line-height: 45px !important; color … etc.
 * Une specificite superieure ne suffit donc pas — il faut reprendre le chemin
 * complet (`.right-side` inclus) ET remettre `!important` sur chaque propriete
 * qu'on veut reprendre. C'est laid mais c'est la seule facon de passer devant.
 *
 * `min-width: 992px` est OBLIGATOIRE : sous 992px le site a deja ses propres
 * regles compactes (`padding: 7px 0 !important; font-size: 22px !important`).
 * Sans ce garde-fou, nos `!important` plus specifiques les ecrasent et le menu
 * mobile grossit — regression constatee en QA a 390x844.
 * ------------------------------------------------------------------------- */


/* Ligne de fermeture sous le dernier item du menu.
 * Le site ferme ses menus par `div#nav_menu-2 li:last-child a { border-bottom }`,
 * regle scopee au SEUL widget de la colonne droite. Le menu central, qui se
 * terminait avant par « À propos » sans rien en dessous, n'en avait pas besoin ;
 * maintenant qu'il est suivi du bloc « Suivez-nous », l'absence de ligne se voit.
 * On reproduit donc le trait de fermeture que la colonne droite avait deja. */

#slide-out-widget-area.fullscreen-split .right-side .customNewMenu ul.menu > li:last-child > a {
    border-bottom: 1px solid rgb(62, 191, 186);
}


/* Bloc « Suivez-nous ». Il FERME la colonne (la bascule de langue est passee a
 * droite le 2026-08-11), donc pas de trait sous les icones : la colonne se
 * termine mieux sans. Le dernier trait est celui du dernier item du menu,
 * juste au-dessus du titre.
 *
 * Son padding haut/bas suit CELUI DES LIENS a chaque palier (22 / 12 / 8), pour
 * que le rythme vertical de la colonne soit constant. C'est aussi ce padding
 * qui fait l'air au-dessus du titre : PADDING et pas MARGIN, parce que le site
 * pose `#custom_html-7 { margin-top: 0 !important }` — selecteur d'ID avec
 * !important, imbattable sans surenchere. */

/* Le padding suit celui des liens, qui differe desktop / mobile : 22px au-dessus
 * de 992px, 7px en dessous (valeur imposee par le site). Sans cette separation
 * le bloc social gardait 22px sur telephone contre 7px pour les liens. */

@media (min-width: 992px) {

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget_custom_html {
        padding-top: 22px;
        padding-bottom: 22px;
    }
}

@media (max-width: 991px) {

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget_custom_html {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}


/* Alignement des colonnes.
 * Le site pose `align-self: flex-end` sur `.right-side-inner` : la colonne
 * droite etait collee en BAS. Peu visible avant (elle etait longue : menu +
 * bloc social), criant depuis qu'elle est reduite a 3 items. On aligne les
 * deux colonnes par le haut. */

#slide-out-widget-area.fullscreen-split .right-side .right-side-inner {
    align-self: flex-start;
}


@media (min-width: 992px) and (max-height: 1000px) {

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu ul.menu > li > a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget h4 {
        font-size: 32px;
        line-height: 34px;
        margin-bottom: 10px;
    }

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget_custom_html {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Meme compacite dans la colonne DROITE : sans ca les items y restent a
     * 22px de padding (90px de haut) contre 70px au centre, et le decalage
     * entre les deux colonnes se voit. */
    #slide-out-widget-area.fullscreen-split .right-side .right-side-inner #nav_menu-2 .menu a {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

@media (min-width: 992px) and (max-height: 820px) {

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu ul.menu > li > a {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget h4 {
        font-size: 32px;
        line-height: 32px;
        margin-bottom: 4px;
    }

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .header-social-icon img {
        width: 30px;
        height: 30px;
    }

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget_custom_html {
        padding-top: 12px;
        padding-bottom: 8px;
    }

    #slide-out-widget-area.fullscreen-split .right-side .right-side-inner #nav_menu-2 .menu a {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* Dernier recours, sous 720px de haut : les espacements minimaux ne suffisent
 * plus, on reduit la police des liens. Au-dessus de ce seuil la typo reste
 * celle du design (40px) — seuls les espacements se resserrent. */

@media (min-width: 992px) and (max-height: 720px) {

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu ul.menu > li > a,
    #slide-out-widget-area.fullscreen-split .right-side .right-side-inner #nav_menu-2 .menu a {
        font-size: 32px;
        line-height: 36px !important;
    }
}


/* -------------------------------------------------------------------------
 * MOBILE — resserrage du titre « Suivez nous : »
 * -------------------------------------------------------------------------
 * Demande d'Eric, 2026-08-17. Sur telephone le titre est trop aere : il porte
 * 7px de padding haut ET bas, plus 15px de margin sous lui avant les icones.
 * On retire les trois : padding 0 au-dessus, 4px en dessous, margin nulle.
 * Mesure a 390px de large : le bloc social passe de 112px a 87px de haut.
 *
 * SCOPE VOLONTAIREMENT ETROIT — deux choses qu'on ne touche PAS :
 *  - la colonne DROITE. La regle equivalente du CSS additionnel groupe
 *    `#nav_menu-2 .menu a` avec le h4 dans un meme selecteur : y toucher
 *    resserrerait aussi Privatisation / Reservation / Vitamine / English.
 *    Ce n'est pas ce qui est demande — d'ou un selecteur qui ne vise que le h4.
 *  - le DESKTOP, d'ou `max-width: 991px`. Au-dessus, le rendu valide le
 *    2026-08-11 (margin 15px, ou 10/4px selon le palier de hauteur) est intact.
 *
 * SPECIFICITE : cette feuille est chargee AVANT `salient-child/style.css` et
 * AVANT le CSS additionnel (Personnaliser, en DB) — elle est donc la PLUS
 * FAIBLE a specificite egale. Le CSS additionnel pose `padding: 7px 0
 * !important` sur ce h4 en @991 et en @600 : il faut un chemin plus long
 * (`.right-side .customNewMenu` en plus) ET `!important` pour passer devant.
 * La `margin-bottom` n'est declaree en !important nulle part : la specificite
 * suffit, inutile d'en rajouter.
 * ------------------------------------------------------------------------- */

@media (max-width: 991px) {

    #slide-out-widget-area.fullscreen-split .right-side .customNewMenu .widget h4 {
        padding-top: 0 !important;
        padding-bottom: 4px !important;
        margin-bottom: 0;
    }
}