/* ==========================================================================
   header-footer.css - theme "latoussuire2026"
   Construit a partir de _raw_chunk1.css -> _raw_chunk4.css (ordre de
   chargement d'origine, une regle dupliquee = la derniere l'emporte, comme
   sur le site source) + variables de _raw_chunk1.css (:root). Le webfont
   d'icones "wicon"/woody-icons n'est pas utilise ici : les quelques icones
   necessaires (reseaux sociaux du footer) sont des SVG inline dans page.html.
   Voir l'entete de page.html pour la liste complete des simplifications.
   ========================================================================== */

/* --- Reset / base minimal --- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; font-size: 100%; }
body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: "MADE Tommy Soft", Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #1d1d1b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; padding: 0; }
small { font-size: 80%; }
em { font-style: italic; }

/* --- Variables du theme (extraites de _raw_chunk1.css :root, sous-ensemble utile au header/footer) --- */
:root {
    --primary-color: #FBBA10;
    --primary-negative-color: #ffffff;
    --secondary-color: #8BB4BC;
    --black: #1D1D1B;
    --white: #FFFFFF;
    --tertiary-color: #02384F;
    --body-font-family: "MADE Tommy Soft", Helvetica, Arial, sans-serif;
    --header-font-family: "MADE Tommy Soft", Helvetica, Arial, sans-serif;
    --global-radius: 20px;
    --topheader-height: 130px;
    --mobile-topheader-height: 70px;
}

/* --- Police auto-hebergee "MADE Tommy Soft" (deja telechargee dans latoussuire2026/fonts/) --- */
@font-face {
    font-display: swap;
    font-family: "MADE Tommy Soft";
    font-weight: 400;
    src: url("fonts/Made-Regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "MADE Tommy Soft";
    font-weight: 500;
    src: url("fonts/Made-Medium.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "MADE Tommy Soft";
    font-weight: 700;
    /* le .woff2 d'origine renvoie une 404 sur le site source : seul le .woff a ete recupere */
    src: url("fonts/Made-Bold.woff") format("woff");
}

/* --- Utilitaires generiques (Foundation-like) reellement utilises dans le header/footer --- */
.flex-container { display: flex; }
.flex-dir-row { flex-direction: row; }
.flex-dir-column { flex-direction: column; }
.vertical { flex-direction: column; }
.align-middle { align-items: center; }
.align-top { align-items: flex-start; }
.align-bottom { align-items: flex-end; }
.align-left { justify-content: flex-start; }
.align-right { justify-content: flex-end; }
.align-center { justify-content: center; }
.align-justify { justify-content: space-between; }
.justify-items-left { justify-items: flex-start; }
.wrap { flex-wrap: wrap; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
@media print, screen and (min-width: 64em) { .gap-md { gap: 22px; } }

.grid-x { display: flex; flex-flow: row wrap; }
.cell { flex: 0 0 auto; min-height: 0; min-width: 0; width: 100%; }
.grid-padding-x, .grid-padding-x .grid-padding-x { margin-right: -.9375rem; margin-left: -.9375rem; }
.grid-padding-x > .cell { padding-right: .9375rem; padding-left: .9375rem; }
@media print, screen and (min-width: 64em) {
    .large-5 { width: 41.6666666667%; }
    .large-6 { width: 50%; }
    .large-7 { width: 58.3333333333%; }
}

.padd-all-md { padding: 30px; }
.padd-bottom-md { padding-bottom: 30px; }
.padd-bottom-lg { padding-bottom: 60px; }
.padd-right-sm { padding-right: 15px; }

.list-unstyled { list-style: none; margin-left: 0; margin-bottom: 0; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.text-bold { font-weight: 700; }
.text-extra-bold { font-weight: 800; }
.h4 { font-family: "MADE Tommy Soft", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.125rem; line-height: 1.4; margin: 0; }
@media print, screen and (min-width: 40em) { .h4 { font-size: 1.4375rem; } }
@media print, screen and (min-width: 64em) { .h4 { font-size: 1.375rem; } }

.show-for-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.no-visible-text { font-size: 0; margin: 0; padding: 0; }
.isRel { position: relative; }
.isAbs { position: absolute; }
/* :not(.button) car .no-ext est aussi porte par les 3 boutons de la barre d'outils du header
   (Info live/Forfaits & pass/Reserver) : sans cette exclusion, cette regle masquait purement
   et simplement le ::after custom du bouton (calque teal du hover), un seul ::after existant
   par element - bug trouve via CDP forcePseudoState (display:none confirme sur ces boutons,
   absent sur les boutons hors "no-ext" ou le hover fonctionnait deja). */
.no-ext:not(.button):after { display: none; }

.bg-black { background-color: #1d1d1b !important; color: #fff; }

.fullcenterbox { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.card-section { flex: 1 0 auto; padding: 1rem; }

/* Boutons (.button.primary/.secondary) : le site source empile deux pseudo-elements -
   ::before = aplat visible (colore selon le variant), ::after = "ombre" teal statique
   revelee derriere - pilotes par des custom properties CSS contextuelles (--root-bg-btn-*,
   --current-loop-hex) qui changent de valeur selon le conteneur (section coloree, footer
   "bg-black", etc.) - verifie precisement par inspection des styles calcules reels (avant/
   apres hover, ::before ET ::after separement) sur le site source :
     - .button.primary (ex. "Nous contacter", "Reserver") : aplat jaune (--primary-color), texte noir, dans
       tous les contextes verifies.
     - .button.secondary (ex. "04 79 83 06 06", "S'inscrire a la newsletter", "Info live"/"Forfaits & pass") :
       DEUX rendus differents selon le contexte, tous deux repris ici :
         * hors footer (ex. barre d'outils du header) : aplat blanc + contour noir + texte noir.
         * dans le footer (habillage "bg-black" du site source, cf. regle .bg-black .button.secondary) :
           aplat noir + CONTOUR BLANC + texte blanc ; hover : aplat blanc + texte noir (retour client,
           l'aplat noir sans contour se distinguait mal du fond du footer, deja tres sombre).
   Mouvement au hover (confirme par getComputedStyle sur le vrai bouton) : c'est le calque de FACE
   (::before, l'aplat colore) qui se decale de -5.6px/-5.6px au survol - PAS le calque teal, qui lui
   reste fixe. Le bouton "bouge" donc visuellement (son aplat glisse) en revelant le teal statique
   en dessous - une version a un seul pseudo-element (ou c'est le calque teal qui bouge) donnait un
   rendu ou le bouton lui-meme semblait figé : corrige pour utiliser exactement ce mecanisme a 2
   calques. La cascade complete de variables contextuelles du site source (qui change aussi parfois
   la couleur du calque de face au survol selon la section) reste simplifiee : seules les couleurs
   effectivement verifiees ci-dessus sont reprises. */
.button {
    position: relative;
    display: inline-flex;
    /* vertical-align:top - sans ca, un element inline-flex garde son alignement "baseline" par
       defaut et laisse un espace fantome sous lui (descente de ligne du contexte inline du
       parent) : ecart mesure et confirme (getBoundingClientRect) entre "Nous contacter"/le
       bouton telephone et leurs voisins dans le footer (~8.5px de trop par rapport au site
       source, presents avant ET apres le groupe de boutons). */
    vertical-align: top;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1em 1.5em;
    border: 2px solid transparent;
    border-radius: 100px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: color .25s ease-out, border-color .25s ease-out;
}
/* Calque de face (l'aplat colore visible) : c'est LUI qui se decale au survol, pas le calque
   teal - couleur par variant/contexte definie plus bas (.button.primary::before, etc.). */
.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transform: translate(0, 0);
    transition: transform .25s cubic-bezier(.165, .84, .44, 1), background-color .25s ease-out;
}
.button:hover::before, .button:focus-visible::before { transform: translate(-5.6px, -5.6px); }
/* Calque teal statique, toujours derriere le calque de face - jamais anime. */
.button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--secondary-color);
    border-radius: inherit;
}
.button.primary::before { background-color: var(--primary-color); }
.button.primary { color: var(--black); }
/* "Reserver" (barre d'outils du header) confirme par mesure (getComputedStyle sur le vrai
   bouton) : jaune -> NOIR au survol, texte -> blanc (le site source change bien la couleur du
   calque de face au survol dans ce contexte precis, contrairement au reste ou seule la
   position bouge - retour client). */
.tools .button.primary:hover::before, .tools .button.primary:focus-visible::before { background-color: var(--black); }
.tools .button.primary:hover, .tools .button.primary:focus-visible { color: var(--white); }
.button.secondary::before { background-color: var(--white); }
.button.secondary { color: var(--black); border-color: var(--black); }
/* "Info live"/"Forfaits & pass" (barre d'outils du header) confirme par mesure directe (la
   couleur du texte/icone visible vit sur le span enfant, pas sur l'ancre elle-meme - a
   verifier separement de l'ancre pour ne pas se tromper) : blanc -> NOIR au survol, texte et
   icone -> blancs (meme logique d'inversion que "Reserver" juste au-dessus). */
.tools .button.secondary:hover::before, .tools .button.secondary:focus-visible::before { background-color: var(--black); }
.tools .button.secondary:hover, .tools .button.secondary:focus-visible { color: var(--white); }
.bg-black .button.secondary::before { background-color: var(--black); }
.bg-black .button.secondary { color: var(--white); border-color: var(--white); }
.bg-black .button.secondary:hover::before, .bg-black .button.secondary:focus-visible::before { background-color: var(--white); }
.bg-black .button.secondary:hover, .bg-black .button.secondary:focus-visible { color: var(--black); }
.button-label { position: relative; display: block; }
/* Le texte ET l'icone se decalent AUSSI au survol (confirme par mesure sur le vrai bouton :
   son .tool-icon se deplace de (-5.6,-5.6) au hover, exactement comme ::before) - sans ca, le
   contenu semblait "fige" alors que seul le fond glissait derriere. */
.button-label, .button .tool-icon, .button .search-icon {
    transition: transform .25s cubic-bezier(.165, .84, .44, 1);
}
.button:hover .button-label, .button:hover .tool-icon, .button:hover .search-icon,
.button:focus-visible .button-label, .button:focus-visible .tool-icon, .button:focus-visible .search-icon {
    transform: translate(-5.6px, -5.6px);
}

/* ==========================================================================
   Squelette general (etape 1) : main-wrapper / site-content
   ========================================================================== */
.main-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
/* Le header est en position fixed (voir .woody-component-headnavs) : on reserve son espace ici,
   comme le fait le site source via "body:has(.woody-component-headnavs):not(:has(.home-slider))",
   pour que le contenu reel (widget de reservation) ne soit jamais masque dessous. */
.site-content { flex: 1 0 auto; padding-top: var(--mobile-topheader-height); }
@media print, screen and (min-width: 64em) and (max-width: 74.99875em) {
    .site-content { padding-top: var(--topheader-height); }
}
@media print, screen and (min-width: 75em) {
    .site-content { padding-top: var(--topheader-height); }
}

/* ==========================================================================
   Header
   ========================================================================== */
.woody-component-headnavs {
    position: relative;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    transition: opacity .5s cubic-bezier(.86, 0, .07, 1), transform .5s cubic-bezier(.86, 0, .07, 1);
    backface-visibility: hidden;
}

.woody-component-header {
    position: relative;
    z-index: 1;
    background-color: var(--white);
    transition: .3s ease-in-out;
}
@media print, screen and (min-width: 74.99875em) {
    .woody-component-headnavs, .woody-component-headnavs .woody-component-header { height: var(--topheader-height); }
}
/* Sous 1200px, le site source affiche un bandeau sombre (--tertiary-color) avec logo en
   negatif (blanc) - confirme par capture d'ecran sur un vrai device tactile (iPhone 13,
   Playwright) : tres different du bandeau blanc desktop, ce n'est pas juste une version
   retrecie du meme header. */
@media screen and (max-width: 74.99875em) {
    .woody-component-header { background-color: var(--tertiary-color); }
    .brand-logo img { filter: brightness(0) invert(1);
    height: 40px;	}
	.woody-component-headnavs, .woody-component-headnavs .woody-component-header { height: 70px; }
}

.main-menu-wrapper { position: relative; display: flex; align-items: center; height: 100%; }
body.responsiveBurgerIsActive .main-menu-wrapper { height: var(--topheader-height); }

/* --- Logo --- */
.is-brand-logo {
    position: relative;
    left: 50px;
    z-index: 2;
    padding: 0;
    transition: 450ms cubic-bezier(.165, .84, .44, 1);
}
body.menu-is-open .woody-component-headnavs .is-brand-logo { transform: translateY(calc(var(--topheader-height) * -1)); }
.brand-logo { display: block; height: fit-content; transition: .3s ease-in-out; }
.menuLogo { display: inline-flex; align-items: center; }
.menu-logo-site-name { display: block; }

/* --- Bouton burger (menus-v2 / woody-burger, icone SVG inline) ---
   Icone EMPILEE au-dessus du libelle "MENU" (flex-direction:column), pas cote a cote : mesure
   sur le vrai bouton du site source (getComputedStyle + boundingBox) - boite quasi carree
   90x90px avec padding:20px, incompatible avec un agencement horizontal (qui donnait ici une
   boite large 138x74px avant correction, trop large et trop basse). */
button.menu-icon {
    position: relative;
    height: initial;
    width: initial;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    border-radius: var(--global-radius);
    transition: .3s ease-in-out, 450ms cubic-bezier(.165, .84, .44, 1);
}
button.menu-icon:after { content: none; }
button.menu-icon .title-bar-title { font-weight: initial; margin-top: 8px; line-height: 1; transition: .3s ease-in-out; }
button.menu-icon .menu-btn-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 4.224px; color: var(--black); }
button.menu-icon svg path { fill: var(--black); stroke: var(--black); }
button.menu-icon svg line:not(.line-middle) { stroke: var(--black); }
button.menu-icon svg line.line-middle { transform-origin: center; transition: 450ms cubic-bezier(.165, .84, .44, 1); }
button.menu-icon:hover { background-color: var(--secondary-color); }
@media print, screen and (min-width: 75em) {
    .woody-component-headnavs button.menu-icon { position: absolute; right: 30px; padding: 20px; }
}
/* Sous 1200px : bouton burger plein (fond jaune --primary-color), colle a droite du bandeau
   sombre, icone au-dessus du libelle "MENU" (au lieu d'a cote comme en desktop) - reproduit
   depuis une capture d'ecran du site source en emulation de vrai device tactile. Le logo
   passe order:1 pour rester a gauche (le burger est le 1er enfant du DOM, cf. page.html). */
@media screen and (max-width: 74.99875em) {
    .is-brand-logo { order: 1; }
    .main-menu-wrapper button.menu-icon {
        order: 2;
        margin-left: auto;
        align-self: stretch;
        justify-content: center;
        background-color: var(--primary-color);
        border-radius: 0;
        padding: 0 10px;
    }
    button.menu-icon .title-bar-title { margin-left: 0; margin-top: 4px; }
    button.menu-icon:hover { background-color: var(--primary-color); }
}

/* Etat "menu ouvert" : anime l'icone (loupe qui disparait, lignes qui forment une croix) */
body.menu-is-open button.menu-icon #loupe { transform: scale(0) !important; }
body.menu-is-open button.menu-icon svg line:not(.line-middle) { opacity: 0; }
body.menu-is-open button.menu-icon svg line.line-middle { stroke: var(--black); }
body.menu-is-open button.menu-icon svg line.line-middle.line-middle-one { transform: rotate(-45deg); }
body.menu-is-open button.menu-icon svg line.line-middle.line-middle-two { transform: rotate(45deg); }

/* ==========================================================================
   Barre d'outils (Info live / Forfaits & pass / Reserver / Favoris) + barre de
   recherche factice ("woody-component-stickybar").
   Sur le site source, en desktop (>=1200px, meme seuil que le bouton burger ci-dessus)
   ces elements sont positionnes en absolu dans la ligne du header, a gauche du burger.
   En dessous de ce seuil, le site source affiche un composant mobile ENTIEREMENT
   DISTINCT (".woody-component-mobilenavs", injecte uniquement sur detection d'appareil
   tactile reelle - confirme par emulation Playwright d'un vrai device tactile, PAS un
   simple redimensionnement de fenetre) : logo + bouton burger seuls dans un bandeau
   sombre (--tertiary-color), sans cette barre d'outils du tout. Reproduit ici en
   masquant simplement la barre sous 1200px (voir media query plus bas) plutot qu'en
   reconstruisant le composant mobile separe (menu drilldown Foundation imbrique) :
   simplification assumee, cf. limites en tete de page.html.
   ========================================================================== */
.tools { gap: 10px; flex-wrap: wrap; z-index: 2; transition: transform 450ms cubic-bezier(.165, .84, .44, 1), opacity .2s ease-in-out; }
/* Quand le menu (tiroir lateral) est ouvert, la barre d'outils et la barre de recherche se retirent
   (comme sur le site source : ".tools{transform:translateY(-130px)}" en "menu-is-open") pour ne pas
   passer AU-DESSUS du tiroir #main-menu (z-index:1) et bloquer les clics sur ses liens - bug trouve
   et corrige pendant les tests fonctionnels de cette tache. */
body.menu-is-open .woody-component-headnavs .tools,
body.menu-is-open .woody-component-headnavs .woody-component-stickybar {
    transform: translateY(-130px);
    opacity: 0;
    pointer-events: none;
    transition: transform 450ms cubic-bezier(.165, .84, .44, 1), opacity .2s ease-in-out;
}
/* Pas de reduction de taille ici : mesure sur le vrai site (getComputedStyle), les boutons
   de la barre d'outils desktop utilisent le MEME padding/font-size que le bouton .button de
   base (16px/24px, 16px) - une reduction avait ete ajoutee ici par erreur (boutons trop
   petits par rapport au site source, 36.5px de hauteur au lieu de 56px). */
.tools .button { gap: 8px; white-space: nowrap; }
.tool-icon { display: inline-flex; line-height: 0; }
.woody-favorites-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--black);
}

.woody-component-stickybar { z-index: 3; }
/* Le champ revele par la recherche s'etend vers la gauche et chevaucherait la barre d'outils
   (les deux sont positionnes en absolu l'un pres de l'autre en desktop) : elle s'estompe pendant
   que la recherche est ouverte (cf. js/header-footer.js) */
body.search-is-open .woody-component-headnavs .tools { opacity: 0; pointer-events: none; transition: opacity .2s ease-in-out; }
.search-toggler-wrapper { display: flex; align-items: center; }
.search-toggler-wrapper .search-input {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-family: inherit;
    font-size: .9rem;
    background: var(--white);
    color: var(--black);
    transition: width .3s ease-in-out, opacity .2s ease-in-out, padding .3s ease-in-out;
}
.search-toggler-wrapper.is-open .search-input {
    width: 200px;
    padding: .6em 1em;
    opacity: 1;
    border: 2px solid var(--black);
    border-radius: 100px;
    margin-right: 8px;
}
.results-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: var(--black);
}
.results-toggler:hover { background-color: var(--secondary-color); }

@media print, screen and (min-width: 75em) {
    /* Desktop : tools + stickybar positionnes independamment en absolu dans la ligne du header
       (le wrapper partage ne sert qu'au regroupement mobile ci-dessous, il reste neutre ici) */
    .headnavs-tools-wrapper { display: contents; }
    .woody-component-headnavs .tools {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 190px;
        margin: auto;
        height: fit-content;
        flex-wrap: nowrap;
    }
    .woody-component-headnavs .woody-component-stickybar {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 140px;
        margin: auto;
        height: fit-content;
    }
}
@media screen and (max-width: 74.99875em) {
    /* Mobile/tablette (<1200px) : le site source n'affiche PAS la barre d'outils dans le
       bandeau du header (cf. plus haut) mais une capsule flottante DISTINCTE, collee en bas
       de l'ecran (position:fixed, bottom) - confirme par capture d'ecran avec emulation d'un
       vrai device tactile (iPhone 13, Playwright) : Info live + Forfaits & pass en simple
       icone+libelle noir (pas de pilule/bordure), separateur vertical fin entre les deux, et
       "Reserver" en pilule NOIRE pleine (pas jaune ici) collee au bord droit de la capsule.
       Pas de favoris ni de recherche dans cette capsule (masques ci-dessous). Recree ici en
       reutilisant le HTML existant (.tools/.woody-favorites-cart/.woody-component-stickybar),
       simule reskinne pour cette position plutot que le bandeau fixe blanc de la 1ere
       correction (ecart trouve et corrige). */
    .woody-component-headnavs .headnavs-tools-wrapper {
        display: flex;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        top: auto;
        z-index: 999;
        justify-content: center;
        background-color: var(--white);
        border-radius: 100px;
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .18);
        padding: 0;
    }
    .woody-component-headnavs .woody-component-stickybar,
    .woody-favorites-cart { display: none; }
    .woody-component-headnavs .tools {
        width: 100%;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
    }
    .tools .infolive-tool, .tools .pass-tool , .tools .favorites-tool{
        display: flex;
        align-items: center;
        padding: 10px 14px;
        border-right: 1px solid rgba(29, 29, 27, .15);
    }
    .tools .infolive-tool-link, .tools .pass-tool-link {
        background: none;
        border: none;
        padding: 0;
        flex-direction: column;
        gap: 4px;
        color: var(--black);
        font-size: .65rem;
    }
    .tools .booking-tool { display: flex; align-items: stretch; margin-left: auto; }
    /* L'aplat colore vit desormais sur ::before (voir plus haut) : la surcharge noire de ce
       bouton doit cibler ce pseudo-element, pas le fond de l'element lui-meme (invisible,
       cache derriere ::before). */
    .tools .booking-tool-link::before { background-color: var(--black); }
    .tools .booking-tool-link {
        color: var(--white);
        margin: 4px;
        padding: .65em 1.1em;
        font-size: .7rem;
    }
    /* Le menu (tiroir lateral) reste au-dessus de cette capsule quand il est ouvert */
    body.menu-is-open .woody-component-headnavs .headnavs-tools-wrapper { display: none; }
	
	.woody_footer {
        padding-bottom: 120px!important;
    }
}

/* ==========================================================================
   Navigation principale (tiroir lateral "sliding-menu" + mega-menus)
   ========================================================================== */
/* NB : on anime via "right" plutot que "transform:translateX" comme sur le site source, car un transform sur cet
   ancetre creerait un nouveau containing block pour ses descendants en position:fixed (dont .submenu-wrapper),
   ce qui casserait leur positionnement par rapport a la fenetre. */
#main-menu.sliding-menu {
    position: fixed;
    top: 0;
    right: -100%;
    left: unset !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    max-width: 560px;
    background: var(--secondary-color);
    z-index: 1;
    padding: 30px;
    overflow-y: auto;
    transition: right 1.25s cubic-bezier(.19, 1, .22, 1);
}
#main-menu.sliding-menu::before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--sliding-menu-bgcolor, var(--secondary-color));
}
#main-menu.sliding-menu::before {
    --sliding-menu-bgcolor: var(--primary-color);
    left: 30px;
    top: 120px;
    border-radius: 30px;
    height: calc(100% - 150px);
    width: calc(100% - 60px);
    pointer-events: none;
}
body.menu-is-open #main-menu.sliding-menu { right: 0; }


.main-menu-list {
    position: relative;
    width: calc(100% - 50px);
    margin: 81px 0px 10px 40px;
    padding: 0;
}

.woody-component-header .menu-item { display: flex; justify-content: center; }
#main-menu.sliding-menu .menu-item { position: relative; justify-content: flex-start; flex-direction: column; }
.main-menu-list > .menu-item { opacity: .8; transition: 450ms cubic-bezier(.165, .84, .44, 1); }
.main-menu-list > .menu-item:hover, .main-menu-list > .menu-item.is-active { opacity: 1; }

.menuLink {
    display: block;
    padding: 1.7rem 0;
    color: var(--tertiary-color);
    font-family: "MADE Tommy Soft", Helvetica, Arial, sans-serif;
    font-size: clamp(20px, 1.3vw, 25px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: .3s ease-in-out;
}
.menuLink > span { display: block; }
.is-submenu-parent { position: relative; }

/* --- Sous-menus / mega-menus --- */
.submenu-wrapper {
    display: none;
    position: fixed;
    top: 0;
    right: 420px; /* immediatement a gauche du tiroir #main-menu (largeur max 420px) */
    height: 100vh;
    width: calc(100vw - 420px);
    background: var(--secondary-color);
    overflow-y: auto;
    padding: clamp(14px, 1.842vw, 30px);
    transition: none;
}
.submenu-wrapper.submenu-active, .submenu-wrapper[aria-expanded="true"] { display: block; }
.submenu-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: clamp(14px, 1.842vw, 30px);
    width: 100%;
}
.submenu-block { display: flex; flex-direction: column; grid-column: span 12; }
@media print, screen and (min-width: 40em) {
    .submenu-block-images-list { grid-column: span 5; }
    .submenu-block-links-list { grid-column: span 7; }
}
.submenu-block-header { line-height: 1; margin-bottom: clamp(14px, 1.842vw, 30px); }
.submenu-block-title {
    color: var(--primary-color);
    font-family: "Halloween You And Me", cursive; /* police decorative non re-telechargee, cf. simplifications */
    font-weight: 400;
    font-size: clamp(22px, 1.82vw, 35px);
}
.submenu-block-content { display: grid; grid-gap: clamp(14px, 1.842vw, 30px); list-style: none; margin: 0; padding: 0; }

.submenu-titles, .submenu-texts { display: block; }
.submenu-title { text-transform: initial; color: var(--black); font-size: clamp(16px, 1.19vw, 17px); font-weight: 600; }
.submenu-block-links-list .submenu-item a { display: block; padding: .5rem 0; transition: .25s ease-in-out; }
.submenu-block-links-list .submenu-item:hover .submenu-title { color: var(--primary-color); }

/* --- Cartes du bloc "images" du mega-menu (visuel retire, cf. simplifications) --- */
.card.overlayedCard { background-color: var(--black); border-radius: var(--global-radius); }
.card.overlayedCard .card-link, .card.overlayedCard a { display: block; height: 100%; color: #fff; padding: 1rem; }
.card-titles { width: 100%; }
.card-title {
    font-family: "MADE Tommy Soft", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 1.3vw, 25px);
    text-transform: uppercase;
}
.card-link:hover .card-title { color: var(--primary-color); }
#main-menu.sliding-menu .submenu-wrapper.submenu-active::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(-30% - 140px);
    height: 50%;
    width: 100vw;
    pointer-events: none;
    mask-image: url(../banner_top.svg);
    -webkit-mask-image: url(../banner_top.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: bottom left;
    -webkit-mask-position: bottom left;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: rgba(2, 56, 79, .1);
    z-index: 0;
}
/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { display: block; }
/* Fond du footer : le site source affiche un motif de montagnes ("mountains-footer.png", ~3 Mo en PNG)
   en arriere-plan (::before, position absolute, fondu vers le noir integre a l'image), au-dessus d'un aplat
   sombre. La 1ere extraction l'avait retire (poids), ce qui etait un ecart visuel reel et significatif
   (confirme par comparaison de captures d'ecran avant/apres) : reintegre ici, reencode en WebP et redimensionne
   (1920px de large, qualite ~70) -> images/footer-mountains-bg.webp, 43 Ko (~99% plus leger que l'original). */
.woody_footer {
    position: relative;
    background-color: var(--black);
    background-image: linear-gradient(#020202);
    padding-top: 350px;
    padding-bottom: 120px;
}
.woody_footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("../footer-mountains-bg.png");
    background-size: 950px auto;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 0;
}
@media print, screen and (min-width: 64em) {
    .woody_footer { padding-top: 560px; padding-bottom: 30px; }
    .woody_footer::before { background-size: cover; }
}
/* Le contenu du footer doit rester au-dessus du fond (z-index:0) */
.woody_footer > * { position: relative; z-index: 1; }
.woody_footer .brand-col, .woody_footer .pro-col { gap: 30px; }
@media print, screen and (min-width: 40em) { .woody_footer .brand-col, .woody_footer .pro-col { gap: unset; } }
.woody_footer .pro-col { margin-top: 220px; }

/* display:inline-block (comme sur le site source) + vertical-align:bottom : une image reste
   par defaut un element inline-remplace aligne sur la ligne de base, ce qui laisse un petit
   espace fantome sous elle (descente de ligne) - ecart mesure et confirme (~7px de trop ici
   par rapport au site source) entre le logo et le groupe de boutons de contact en dessous.
   vertical-align:bottom supprime ce vide SANS passer l'image en display:block (qui casserait
   le centrage horizontal actuellement assure par le "text-align:center" de la classe
   "text-center" du lien .brand-logo parent, lequel ne centre que du contenu inline/inline-block). */
.brand-wrapper .brand-logo img { filter: brightness(0) invert(1); width: 65%; max-width: 250px; height: auto; display: inline-block; vertical-align: bottom; }

.contact-buttons-wrapper-link { display: inline-flex; }
/* 8px haut/bas mesures sur le site source (li plus haute que son propre lien de 16px) : sans
   ce padding, "Nous contacter"/le bouton telephone se retrouvaient trop serres par rapport aux
   voisins (logo au-dessus, "Saison Hiver..." en dessous). */
.contact-buttons-wrapper-list { padding: 8px 0; }

.description-wrapper { font-weight: 500; }
.description-wrapper em { color: var(--primary-color); font-style: normal; }

/* Soulignement permanent (jaune) sous chaque lien "pro", qui devient teal au survol/focus
   (::before jaune toujours visible, ::after teal revele au hover - ecart trouve par comparaison
   visuelle : la 1ere extraction n'avait qu'un survol de couleur de texte, sans ces 2 traits) */
/* Sur le site source, .pro-wrapper est une vraie grille 2 colonnes (display:grid,
   grid-template-columns: auto auto - colonnes inegales car chacune se cale sur son contenu le
   plus large), remplissage ligne par ligne : Brochures/Maison des proprietaires, Espace pro/
   Carte interactive, Blog/Developpement durable. Les classes utilitaires "flex-container wrap"
   deja sur le <ul> (flex-wrap) donnaient un rendu en colonnes irregulieres/decalees - remplace
   ici par une grille explicite (getComputedStyle confirme sur le site source :
   gridTemplateColumns: "116.8px 233.7px"). */
.pro-wrapper { display: grid; grid-template-columns: auto auto; }
/* display:inline (pas inline-block) : mesure sur le site source - en inline, le padding
   vertical n'agrandit pas la boite de ligne (juste un debordement visuel), d'ou des lignes
   nettement plus compactes (~23px de haut sur le site source) qu'en inline-block (~38px ici
   avant correction) ; cet ecart de hauteur stretchait aussi a tort la colonne voisine
   (brand-col, "justify-content:space-between") et gonflait ses propres espacements internes. */
.pro-wrapper-link { position: relative; display: inline; text-transform: uppercase; font-weight: 700; padding: .5rem 0; }
.pro-wrapper-link::before, .pro-wrapper-link::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    transition: 450ms cubic-bezier(.165, .84, .44, 1);
}
.pro-wrapper-link::before { background-color: var(--primary-color); }
.pro-wrapper-link::after { background-color: var(--secondary-color); transform: scaleX(0); }
.pro-wrapper-link:hover, .pro-wrapper-link:focus { color: var(--primary-color); }
.pro-wrapper-link:hover::after, .pro-wrapper-link:focus::after { transform: scaleX(1); }

/* 48px mesures sur le site source (getBoundingClientRect, ecart pro-wrapper -> ce bouton) :
   0.5rem (8px) ici etait bien trop serre. */
.newsletter-button-wrapper { margin-top: 3rem; }

/* 48px mesures sur le site source (getBoundingClientRect, ecart bouton newsletter -> "Nous
   suivre") : aucun espace n'etait pose ici (0px), les deux blocs se touchaient directement. */

.social-col { flex-direction: column; margin-top: 3rem; }
@media print, screen and (min-width: 40em) { .social-col { flex-direction: row; } }
.social-wrapper-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 100%;
    outline: #fff solid 1px;
    transition: 450ms cubic-bezier(.165, .84, .44, 1);
}
.social-wrapper-link:hover { outline-color: var(--secondary-color); box-shadow: .25rem .25rem 0 var(--secondary-color); }
.social-icon { display: block; }

@font-face {
    font-family: woody-icons;
    font-display: swap;
    src: url("woody-icons.eot");
    src: url("woody-icons.eot#iefix") format("embedded-opentype"),url("woody-icons.woff2") format("woff2"),url("woody-icons.woff") format("woff"),url("woody-icons.ttf") format("truetype"),url("woody-icons.svg#woody-icons") format("svg")
}

.wicon {
    font-family: woody-icons;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none
}

.wicon-000-facebook:before {
    content: "\ea17"
}

.wicon-001-facebook-messenger:before {
    content: "\ea18"
}

.wicon-002-twitter:before {
    content: "\ea19"
}

.wicon-003-google:before {
    content: "\ea1a"
}

.wicon-004-youtube:before {
    content: "\ea1b"
}

.wicon-005-pinterest:before {
    content: "\ea1c"
}

.wicon-006-linkedin:before {
    content: "\ea1d"
}

.wicon-007-viadeo:before {
    content: "\ea1e"
}

.wicon-008-snapchat:before {
    content: "\ea1f"
}

.wicon-009-vimeo:before {
    content: "\ea20"
}

.wicon-010-flickr:before {
    content: "\ea21"
}

.wicon-011-instagram:before {
    content: "\ea22"
}
.wicon-081-tiktok:before {
    content: "\ea69";
}

/* Pas de max-width specifique ici : mesure sur le vrai site, l'image de carte n'a AUCUN
   plafond propre (juste le reset generique "img{max-width:100%}") et suit sa taille
   naturelle/le conteneur (jusqu'a 575px de large en desktop) - un plafond a 280px avait ete
   ajoute ici par erreur et rendait la carte bien plus petite que sur le site source a tous
   les breakpoints. */

.subfooter { margin-top: 30px; }
.partner-menu-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); }
@media print, screen and (min-width: 40em) { .partner-menu-wrapper { display: flex; } }
.partner-menu-wrapper a { display: flex; justify-content: center; align-items: center; }
.partner-menu-wrapper img { filter: brightness(0) invert(1); max-height: 60px; width: auto; }

.legal-wrapper {
    gap: 0 15px;
    display: flex;
    justify-content: end;
    padding-right: 30px;
}
.legal-wrapper-list:not(:last-child)::after { content: "-"; position: relative; left: 5px; }
.legal-wrapper-link { transition: 450ms cubic-bezier(.165, .84, .44, 1); }
.legal-wrapper-link:hover .label { color: var(--primary-color); }

/* ==========================================================================
   Responsive general
   ========================================================================== */
@media screen and (max-width: 63.99875em) {
    #main-menu.sliding-menu { max-width: 100%; }
    .submenu-wrapper { width: 100%; right: 0; }
    .is-brand-logo { left: 20px; }
	.woody_footer .pro-col {margin-top: 0;}
}
@media screen and (max-width: 39.99875em) {
    .grid-x.left-part, .grid-x.right-part { flex-direction: column; }
    .cell.large-5, .cell.large-6, .cell.large-7 { width: 100%; }
}