/*
Theme Name: Le Vascon - Child
Theme URI: https://hotel-levascon-dax.fr
Description: Thème enfant Astra du site de l'Hôtel Le Vascon (déclinaison du socle Hôtel Sarrailh). Réalisé par MATRYS.
Author: MATRYS
Author URI: https://matrys.fr
Template: astra
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: le-vascon-child
*/
/* =========================================================
MATRYS : CSS de base du thème enfant
========================================================= */
/* --- RESET GLOBAL --- */
* {
word-wrap: normal !important;
overflow-wrap: normal !important;
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
word-break: normal !important;
/* background: rgba(128,77,0,0.1) !important; */
}
/* text-wrap n'est volontairement PAS dans le sélecteur universel :
text-wrap: pretty force text-wrap-mode: wrap, et en !important il écraserait
tous les white-space: nowrap et pre du site (Astra, Spectra, core). */
p, li {
text-wrap: pretty;
}
/* Exceptions au reset : ce qui doit pouvoir se couper pour ne pas déborder
de sa boîte (URLs, emails, chaînes insécables en cellule ou en code). */
pre, code, kbd, samp,
.wp-block-code,
.wp-block-preformatted {
overflow-wrap: break-word !important;
white-space: pre-wrap;
}
td, th,
a[href^="mailto:"],
a[href^="http"],
.ast-breadcrumbs {
overflow-wrap: break-word !important;
}
/* --- ASTRA: SCROLL TO TOP --- */
.ast-scroll-to-top-right {
bottom: 15px !important;
right: 15px !important;
border: 1px solid var(--ast-global-color-0);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
.ast-scroll-to-top-right:hover {
border: 1px solid var(--ast-global-color-1);
}
/* --- ASTRA: FOOTER MENU RESET --- */
ul#astra-footer-menu {
padding: 0;
margin: 0;
text-align: center;
}
/* ================================================================================
Squelette de thème enfant MATRYS (Astra + Spectra 3). Issu du chantier Indiya Charms
(septembre 2026), généralisé. Contient UNIQUEMENT ce que les attributs de blocs ne
savent pas faire : structure, pseudo-éléments, états, responsive fin, contournements
Astra et Spectra. Couleurs, tailles, paddings du contenu = attributs de blocs
(data-color, data-size, data-pad du convertisseur), jamais ici.
Mise en service : remplacer CLIENT / client-child, renseigner les jetons ci-dessous,
puis ajouter la DA du client dans un bloc « identité visuelle » en fin de fichier.
Préfixe des classes du thème : mx-. Les classes m-* sont celles de la convention
de templates (m-card, m-band, m-h2), posées par le convertisseur.
================================================================================ */
/* ---------------------------------------------------------------- jetons
Un seul endroit où la palette Astra (9 slots, convention astra.md) est nommée.
Si un projet dévie de la convention, on remappe ici, pas dans les règles. */
:root {
--mx-accent: var(--ast-global-color-0); /* marque */
--mx-accent-2: var(--ast-global-color-6); /* bronze profond : liens et survols (l'or du slot 1 est réservé aux boutons) */
--mx-titre: var(--ast-global-color-2);
--mx-texte: var(--ast-global-color-3);
--mx-fond: var(--ast-global-color-4); /* blanc */
--mx-fond-2: var(--ast-global-color-5); /* crème */
--mx-sombre: var(--ast-global-color-2); /* brun foncé : bandeaux sombres et pied de page */
--mx-filet: var(--ast-global-color-7);
--mx-appoint: var(--ast-global-color-8);
--mx-r: 4px; /* rayon des cartes et encadrés */
--mx-r-s: 4px; /* rayon secondaire */
--mx-ombre: 0 20px 50px -30px rgba(0, 0, 0, .35);
--mx-ease: cubic-bezier(.2, .7, .2, 1);
/* Largeur de contenu Astra ; --mx-gauche = marge qui aligne un enfant à max-width
sur le bord gauche du contenu dans une section constrained (voir « mise en page »). */
--mx-contenu: 1200px;
--mx-gauche: max(0px, calc((100% - var(--mx-contenu)) / 2));
}
/* ================================================================ mise en page globale */
/* Astra pose une marge verticale de 4em sur #primary en contenu pleine largeur et
1.5em sous l'article en conteneur séparé : le rythme est porté par les sections. */
#primary, .ast-separate-container #primary, .ast-plain-container #primary { margin-top: 0 !important; margin-bottom: 0 !important; }
.ast-plain-container #primary { padding-top: 0; padding-bottom: 0; }
.ast-separate-container .ast-article-single { margin-bottom: 0; }
/* Astra pose 20 px de padding sur l'article des pages « page builder », à toutes les
largeurs : les sections alignfull ne le sont pas vraiment (gouttières blanches). */
.ast-page-builder-template .site-main > article { padding-left: 0 !important; padding-right: 0 !important; }
/* Un alignfull en 100vw déborde de la largeur de la barre de défilement : 8 px de
défilement horizontal fantôme. clip (pas hidden) garde les positions sticky. */
html, body { overflow-x: clip; }
/* Dans une section constrained, tout enfant à max-width reçoit des marges auto et se
centre. Pour le caler à gauche du contenu, on ne met pas 0 (il partirait au bord de
l'écran) mais la même marge que le centrage. Poser la classe sur la section. */
.mx-gauche > .wp-block-spectra-content,
.mx-gauche > .wp-block-list,
.mx-gauche > .wp-block-table { margin-left: var(--mx-gauche) !important; }
.mx-gauche > h1, .mx-gauche > .m-lead { max-width: 60ch; }
.mx-gauche > p, .mx-gauche > .wp-block-list { max-width: 75ch; }
/* Confort de lecture du socle (p à 70ch) : désactivé sur ce site. Sans mx-gauche sur les sections,
il centrait les paragraphes sous des titres calés à gauche ; la largeur de contenu suffit. */
/* ================================================================ patterns de la convention */
/* Carte cliquable qui contient déjà un lien : stretched link, à la place de htmlTag a. */
.m-card-link { position: relative; }
.m-card-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.m-card-link a { position: static; }
/* Ligne texte + image dont le texte doit rester premier sur mobile (orientationReverse
n'est pas responsive dans Spectra 1.0.x). */
@media (max-width: 767px) {
.m-row-text-first { flex-direction: column !important; }
.m-row-text-first > *:first-child { order: 1; }
.m-row-text-first > *:last-child { order: 2; }
}
/* Onglets verticaux : restent en ligne sous 480 px malgré la surcharge responsive. */
@media (max-width: 480px) {
.m-tabs-vertical { flex-direction: column !important; }
.m-tabs-vertical .wp-block-spectra-tabs-child-tab-wrapper { flex: 1 1 auto !important; width: 100% !important; }
}
/* Ratios homogènes dans les grilles de photos. */
.m-ratio-43 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.m-ratio-11 img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.wp-block-image img { width: 100%; object-fit: cover; }
/* Placeholder MATRYS : entier et lisible, jamais rogné. */
.wp-block-image img[src*="placeholder"], .wp-block-image img[srcset*="placeholder"] { object-fit: contain; background: var(--mx-fond-2); }
/* Étapes numérotées : le numéro est un cercle fixe. */
.wp-block-spectra-container.m-step .m-step-num {
width: 40px; height: 40px; min-width: 40px; display: flex !important; align-items: center; justify-content: center;
border-radius: 999px; padding: 0 !important; margin-bottom: .4em;
}
.wp-block-spectra-container.m-step .m-step-num span { line-height: 1; }
/* Encadré (m-band) : chapô centré et borné. */
.wp-block-spectra-container.m-band .m-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }
.wp-block-spectra-container.m-band h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
/* Blocs sombres (data-color="#fff" sur le conteneur) : la couleur des textes est en
attribut, mais la règle générique des liens de contenu (0,3,1) battrait celle du bloc ;
liens et survols restent donc ici, blancs soulignés. Poser mx-sombre sur le bloc. */
:is(.entry-content, [class*="astra-advanced-hook-"]) .mx-sombre :is(p, li) a:not(.wp-block-spectra-button) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mx-sombre a.wp-block-spectra-button.has-background:hover { background: rgba(255, 255, 255, .12) !important; border-color: #fff !important; }
/* Liens dans le contenu : marque foncée (contraste sur fond clair). */
:is(.entry-content, [class*="astra-advanced-hook-"]) p a:not(.wp-block-spectra-button), :is(.entry-content, [class*="astra-advanced-hook-"]) li a, .forminator-ui .forminator-consent a { color: var(--mx-accent-2); }
/* ================================================================ tableaux (core/table) */
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table { margin: 8px 0 0 var(--mx-gauche) !important; max-width: var(--mx-contenu); width: 100%; }
:is(.entry-content, [class*="astra-advanced-hook-"]) table { border-collapse: collapse; width: 100%; background: var(--mx-fond); border-radius: var(--mx-r-s); overflow: hidden; }
:is(.entry-content, [class*="astra-advanced-hook-"]) th, :is(.entry-content, [class*="astra-advanced-hook-"]) td { padding: 14px 18px; border-bottom: 1px solid var(--mx-filet); text-align: left; vertical-align: top; }
:is(.entry-content, [class*="astra-advanced-hook-"]) th { font-size: 13px; font-weight: 500; background: var(--mx-fond-2); }
:is(.entry-content, [class*="astra-advanced-hook-"]) td a { color: var(--mx-titre); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
/* Plus large que l'écran : défile dans sa boîte (display block sur table garde
thead et tbody dans une même table anonyme, donc alignés). */
:is(.entry-content, [class*="astra-advanced-hook-"]) table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(.entry-content, [class*="astra-advanced-hook-"]) table th, :is(.entry-content, [class*="astra-advanced-hook-"]) table td { min-width: 130px; }
}
/* ================================================================ FAQ (spectra/accordion)
Valeurs par défaut du bloc : barres grises, bordure gris 210, question en 300.
Les !important sont nécessaires : Spectra pose fond et couleurs par bloc. */
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion { gap: 12px; background: none !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-item { background: var(--mx-fond-2) !important; border: 1px solid var(--mx-filet) !important; border-radius: var(--mx-r-s) !important; overflow: hidden; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header {
width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 18px 22px !important; background: transparent !important; border: 0; text-align: left; cursor: pointer;
}
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-content { font-size: 20px !important; font-weight: 500 !important; line-height: 1.3; color: var(--mx-titre) !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header.is-active .wp-block-spectra-accordion-child-header-content { color: var(--mx-accent-2) !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-icon {
flex: 0 0 32px; width: 32px !important; height: 32px !important; display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; background: var(--mx-fond); color: var(--mx-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-icon svg { width: 14px; height: 14px; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details { padding: 0 22px 20px !important; font-size: 16px; line-height: 1.65; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details p { margin: 0 0 10px; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header { padding: 14px 16px !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-content { font-size: 17px !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details { padding: 0 16px 16px !important; }
}
/* FAQ en H3 (plan Hn imposé) : réponse rapprochée de sa question. */
.m-faq h3 { margin-top: 1.5em; }
.m-faq h3 + p { margin-top: .4em; }
/* ================================================================ formulaires Forminator dans une carte */
.mx-form .forminator-ui .forminator-input,
.mx-form .forminator-ui .forminator-textarea,
.mx-form .forminator-ui .forminator-select .selection .select2-selection { background: var(--mx-fond) !important; border: 1px solid var(--mx-filet) !important; border-radius: 12px !important; }
.mx-form .forminator-ui .forminator-input:focus,
.mx-form .forminator-ui .forminator-textarea:focus { border-color: var(--mx-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-accent) 15%, transparent) !important; }
.mx-form .forminator-ui .forminator-button-submit { border-radius: 999px !important; background: var(--mx-accent) !important; padding: 14px 28px !important; }
.mx-form .forminator-ui .forminator-button-submit:hover { background: var(--mx-accent-2) !important; }
.mx-form-note { font-size: 13px; color: var(--mx-texte); opacity: .8; }
/* ================================================================ modale Spectra en Custom Layout (site-wide)
Le déclencheur natif est masqué : l'ouverture se fait depuis les liens du site
(assets/js/modal-trigger.js). Trois pièges réglés ici :
1. le wrapper du Custom Layout (container Spectra) reste static à hauteur nulle : en
absolute il allonge le document (bande blanche sous le footer), en fixed il crée un
contexte d'empilement et Spectra force z-index:auto !important sur les containers
quand la modale est active, la modale passe sous l'en-tête ;
2. le déclencheur natif sort en fixed hors écran (en absolute, il allonge le document) ;
3. line-height 0 du wrapper (évite le strut) rétabli dans le popup. */
.mx-modale-wrap { position: static !important; height: 0 !important; min-height: 0 !important; width: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible; }
div[class*="astra-advanced-hook"]:has(> .mx-modale-wrap) { height: 0; line-height: 0; overflow: visible; }
.mx-modale .spectra-modal-popup { line-height: 1.6; }
.mx-modale .spectra-modal-trigger { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mx-modale .spectra-modal-popup { position: fixed; inset: 0; align-items: center !important; justify-content: center !important; padding: 24px 20px !important; }
.mx-modale .spectra-modal-popup-wrap { position: relative; max-width: 640px; width: 100%; max-height: none; overflow: visible; border-radius: var(--mx-r); }
.mx-modale .wp-block-spectra-modal-popup-content {
width: 100% !important; max-width: none !important; max-height: calc(100vh - 128px); overflow-y: auto;
padding: 36px 32px !important; background: var(--mx-fond); border-radius: var(--mx-r); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5);
}
/* Croix hors de la boîte (le wrap ne doit pas la couper : pas d'overflow sur le wrap). */
.mx-modale .spectra-modal-popup-close {
position: absolute; top: -48px; right: 0; bottom: auto; left: auto; width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center; background: var(--mx-fond); border-radius: 999px; color: var(--mx-titre); cursor: pointer;
}
.mx-modale .spectra-modal-popup-close svg, .mx-modale .spectra-modal-popup-close svg path { width: 16px; height: 16px; fill: var(--mx-titre) !important; }
@media (max-width: 767px) {
.mx-modale .spectra-modal-popup { padding: 64px 12px 16px !important; }
.mx-modale .wp-block-spectra-modal-popup-content { max-height: calc(100vh - 80px); padding: 28px 20px !important; }
.mx-modale h2 { font-size: 24px; }
.mx-modale .forminator-ui .forminator-row { flex-direction: column; }
.mx-modale .forminator-ui .forminator-row .forminator-col { max-width: 100%; flex: 0 0 100%; }
}
/* ================================================================ pied de page
Sous 1200 px les colonnes s'empilent : tout centré. Les réglages footer-widget-* d'Astra
sont sans effet sur les widgets de blocs, d'où les !important. */
@media (max-width: 1200px) {
.site-footer .site-footer-section, .site-footer .footer-widget-area, .site-footer .widget,
.site-footer .ast-builder-layout-element, .site-footer .footer-nav-wrap { text-align: center !important; justify-content: center !important; align-items: center !important; }
.site-footer .widget .wp-block-image, .site-footer .widget figure { margin-left: auto; margin-right: auto; }
.site-footer .widget .wp-block-buttons, .site-footer .widget .wp-block-social-links, .site-footer .widget .is-layout-flex { justify-content: center !important; }
.site-footer .footer-nav-wrap .astra-footer-horizontal-menu, .site-footer .footer-nav-wrap .astra-footer-vertical-menu { justify-content: center; align-items: center; }
.site-footer .wp-block-list li { text-align: center; }
}
.site-footer .ast-builder-html-element img { display: inline-block; }
/* ================================================================ en-tête transparent (méta de page Astra)
La première section recule de la hauteur réelle de l'en-tête, mesurée par header.js
(--mx-header-h), pour que le fond de page passe derrière la pilule sans cassure. */
:root { --mx-header-h: 190px; }
@media (max-width: 1200px) { :root { --mx-header-h: 110px; } }
.ast-theme-transparent-header .entry-content > .spectra-is-root-container:first-child { padding-top: calc(var(--mx-header-h) + 32px) !important; }
/* ================================================================ page 404 (Custom Layout type 404-page) */
.mx-404__code { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-accent-2); }
.mx-404 h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }
/* ================================================================ bloc collant Spectra (stickyContainer)
Spectra pose le collant en position: fixed avec un z-index INLINE de 9999 : en fin de parent, le bloc
remonte avec la page et passe par-dessus l'en-tête collant d'Astra (masthead, z-index 99). Seul
!important surcharge un style inline. Sous 480 px (colonnes empilées), le collant est neutralisé. */
.spectra-sticky-container.spectra-sticky--active { z-index: 2 !important; }
@media (max-width: 480px) {
.spectra-sticky-container { position: static !important; inset: auto !important; width: auto !important; }
}
/* ================================================================ pictos (blocs HTML, voir theme-enfant.md)
dans un bloc core/html.
Pastille carrée couleur marque sur fond clair, au trait sur fond sombre. */
.mx-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: flex-start; width: 52px; height: 52px; line-height: 0; background: var(--mx-accent); color: var(--mx-titre); border-radius: var(--mx-r-s); transition: transform .5s var(--mx-ease), background-color .3s ease, color .3s ease; }
.mx-ico svg { display: block; width: 26px; height: 26px; }
.mx-sombre .mx-ico { background: transparent; color: var(--mx-accent); box-shadow: inset 0 0 0 1px currentColor; }
.mx-ico--nu, .mx-sombre .mx-ico--nu { width: auto; height: auto; background: none; box-shadow: none; color: var(--mx-accent); }
/* ================================================================ apparitions au scroll (assets/js/reveal.js)
Classes posées par le script sur les seuls éléments sous la ligne de flottaison au chargement :
rien ne disparaît sans JS, rien ne clignote au-dessus de la ligne de flottaison. */
.mx-rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--mx-ease), transform .9s var(--mx-ease); transition-delay: calc(var(--mx-rv-i, 0) * 90ms); }
.mx-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mx-rv { opacity: 1; transform: none; transition: none; } }
/* ================================================================ identité visuelle du client
Tout ce qui est propre à la DA (halos, pastilles, filets sous les titres, piles
d'images...) vient ici, avec le préfixe du projet. Rien au-dessus de cette ligne
ne doit dépendre du client. */
/* Préfixe du site : fc- (Fontaine Chaude), commun aux sites du groupe Sarrailh : mêmes gabarits, seule la palette Astra change.
Palette Vascon : 0 bronze #826B41 · 1 or #F2B705 · 2 brun foncé #3B3226 · 3 texte #4A4034 · 4 blanc · 5 crème #F6F1E7
· 6 bronze profond #6A5532 · 7 sable #B9A98A · 8 brun nuit #231D15. Contrastes AA vérifiés (blanc sur bronze 5,1:1). */
/* Astra : 2em de padding haut sur l'article des pages (sélecteur .ast-single-post, plus spécifique que le socle). */
.ast-single-post.ast-page-builder-template .site-main > article { padding-top: 0; }
/* Ancres du menu (#forfaits-20-jours, #studios...) : le titre ne passe pas sous l'en-tête collant. */
[id] { scroll-margin-top: 110px; }
/* ---------------------------------------------------------------- en-tête */
/* Menu sur une ligne dès 1201 px : chevrons des sous-menus masqués sur ordinateur (le survol ouvre). */
#ast-hf-menu-1 .ast-header-navigation-arrow, #ast-hf-menu-1 .dropdown-menu-toggle { display: none !important; }
/* Sur-header brun foncé : adresse, téléphone (composants HTML 1 et 2 d'Astra, pictos en masques CSS). */
.ast-above-header-bar{color:color-mix(in srgb,var(--ast-global-color-5) 88%,var(--ast-global-color-0));font-size:14px}
.ast-above-header-bar a{color:#fff;font-weight:600;text-decoration:none}
.ast-above-header-bar a:hover{color:var(--ast-global-color-1)}
.fc-top{display:inline-flex;align-items:center;gap:8px}
.fc-top::before{content:"";width:15px;height:15px;flex:none;background:var(--ast-global-color-1);-webkit-mask:var(--fc-ico) center/contain no-repeat;mask:var(--fc-ico) center/contain no-repeat}
.fc-top--adresse{--fc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22/%3E%3C/svg%3E")}
.fc-top--horaires{--fc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M12%206v6l4%202%22/%3E%3C/svg%3E")}
.fc-top--tel{--fc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E");margin-left:22px}
.fc-top--adresse br{display:none}
/* ---------------------------------------------------------------- hero de l'accueil */
.spectra-is-root-container.fc-hero > * { max-width: 880px; margin-left: auto; margin-right: auto; }
/* Mobile : façade en portrait au lieu du panoramique recadré (chemin relatif : survit au changement de domaine). */
/* Hero mobile : l'image de façade est désormais posée et préchargée par inc/performance.php. */
/* ---------------------------------------------------------------- pictos : cercle cerclé d'or */
.mx-ico { width: 64px; height: 64px; border-radius: 50%; background: transparent; border: 1.5px solid var(--ast-global-color-1); color: var(--ast-global-color-0); }
.mx-ico svg { width: 28px; height: 28px; }
.fc-atouts{grid-template-columns:repeat(4,64px minmax(0,1fr))!important;align-items:center;column-gap:16px!important;row-gap:28px!important}
@media (max-width:1024px){.fc-atouts{grid-template-columns:repeat(2,64px minmax(0,1fr))!important}}
@media (max-width:767px){.fc-atouts{grid-template-columns:64px minmax(0,1fr)!important}}
.fc-atouts .mx-ico { align-self: center; }
/* ---------------------------------------------------------------- bloc thermes (fond violet) et restaurant */
.fc-famille~* p{color:#fff}
.fc-famille~* svg{color:var(--ast-global-color-1);fill:var(--ast-global-color-1)}
.fc-famille{border-left:3px solid var(--ast-global-color-1);padding-left:22px;font-family:'ABeeZee',sans-serif;font-size:22px;line-height:1.5}
.fc-prix{list-style:none;padding:0;margin:0}
.fc-prix li{padding:8px 0;border-bottom:1px dotted var(--ast-global-color-7);color:var(--ast-global-color-2);font-weight:500}
/* ---------------------------------------------------------------- vagues animées entre sections */
.fc-vagues{position:relative;overflow:visible}
.fc-vague{position:absolute!important;left:0;right:0;top:-47px;height:48px;max-width:none!important;margin:0!important;pointer-events:none;--vague:var(--ast-global-color-0);--wh:48px;--wv1:720px;--wv2:960px}
.fc-vague--blanc{--vague:var(--ast-global-color-4)}
.fc-vague::before,.fc-vague::after{content:"";position:absolute;inset:0;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.fc-vague::before{background:color-mix(in srgb,var(--vague) 38%,transparent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20960%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020C160%204%20320%204%20480%2020S800%2036%20960%2020V48H0Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20960%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2020C160%204%20320%204%20480%2020S800%2036%20960%2020V48H0Z%22/%3E%3C/svg%3E");-webkit-mask-size:var(--wv2) var(--wh);mask-size:var(--wv2) var(--wh);animation:fcVagueB 32s linear infinite}
.fc-vague::after{background:var(--vague);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20720%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2026C120%208%20240%208%20360%2026S600%2044%20720%2026V48H0Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20720%2048%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2026C120%208%20240%208%20360%2026S600%2044%20720%2026V48H0Z%22/%3E%3C/svg%3E");-webkit-mask-size:var(--wv1) var(--wh);mask-size:var(--wv1) var(--wh);animation:fcVagueA 24s linear infinite}
@keyframes fcVagueA{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:var(--wv1) 0;mask-position:var(--wv1) 0}}
@keyframes fcVagueB{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:calc(var(--wv2) * -1) 0;mask-position:calc(var(--wv2) * -1) 0}}
.fc-vague+*{margin-block-start:0!important}
@media (max-width:767px){.fc-vague{--wh:32px;--wv1:480px;--wv2:640px;height:32px;top:-31px}}
@media (prefers-reduced-motion:reduce){.fc-vague::before,.fc-vague::after{animation:none}}
/* Bandeau de fin de page (m-band, fond prune) : le numéro de [client_tel] en or, lisible sur le prune. */
.m-band :is(h2, h3, p) a { color: var(--ast-global-color-1); text-decoration: none; }
.m-band :is(h2, h3, p) a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ---------------------------------------------------------------- tableaux : en-têtes lisibles (public de plus de 60 ans) */
:is(.entry-content, [class*="astra-advanced-hook-"]) th { font-size: 15px; }
/* ---------------------------------------------------------------- FAQ : filets, sans cartes (maquette validée)
Même spécificité que le socle, déclarée après : l'emporte. */
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion { gap: 0; max-width: 900px; width: 100%; margin-inline: auto; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--mx-titre) 14%, transparent) !important; border-radius: 0 !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header { padding: 20px 0 !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-content { font-size: 18px !important; font-weight: 600 !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-header-icon { background: transparent; box-shadow: none; color: var(--mx-accent); }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-spectra-accordion-child-details { padding: 0 0 22px !important; font-size: 17px; }
/* ---------------------------------------------------------------- pied de page (composants HTML 2, 3, 4 d'Astra) */
.site-primary-footer-wrap { color: color-mix(in srgb, #fff 82%, transparent); }
.site-primary-footer-wrap a, .site-below-footer-wrap .ast-footer-copyright a { color: #fff; text-decoration: none; }
.site-primary-footer-wrap a:hover { color: var(--ast-global-color-1); }
.site-primary-footer-wrap .ast-builder-html-element p { margin: 0 0 12px; }
/* Astra ne génère l'alignement que pour HTML 1 et 2 : colonnes calées à gauche au-dessus du breakpoint (le socle centre en dessous). */
@media (min-width: 1201px) {
.site-primary-footer-wrap .site-footer-section { align-items: flex-start !important; justify-content: flex-start !important; }
.site-primary-footer-wrap .footer-widget-area, .site-primary-footer-wrap .ast-builder-html-element { text-align: left !important; }
}
.fc-pied-logo img { filter: brightness(0) invert(1); width: 220px; height: auto; }
.fc-pied-titre { font-family: 'ABeeZee', sans-serif; font-size: 20px; color: var(--ast-global-color-1) !important; margin: 0 0 12px; }
.fc-pied-liens { list-style: none; margin: 0; padding: 0; }
.fc-pied-liens li { padding: 4px 0; }
/* ---------------------------------------------------------------- barre mobile « Appeler / Réserver » (inc/barre-mobile.php) */
.fc-barre-mobile { display: none; }
@media (max-width: 767px) {
.fc-barre-mobile {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--ast-global-color-4); box-shadow: 0 -6px 20px color-mix(in srgb, var(--ast-global-color-8) 14%, transparent);
}
.fc-barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 3px; font-size: 16px; font-weight: 600; text-decoration: none; }
.fc-barre-mobile__tel { border: 1.5px solid var(--ast-global-color-2); color: var(--ast-global-color-2); }
.fc-barre-mobile__tel::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.fc-barre-mobile__resa { background: var(--ast-global-color-1); color: var(--ast-global-color-2); }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
body .ast-scroll-to-top-right { bottom: 84px !important; }
}
/* ================================================================ v1.2.0 : recette graphique du 09/11 */
/* ---- logo SVG : Astra pose width:auto + max-height en en-tête collant réduit ; un SVG sans
dimensions intrinsèques tombe alors à 0 px. Largeur explicite, hauteur au ratio. */
.site-logo-img img.custom-logo { height: auto; }
.ast-sticky-main-shrink #masthead .ast-sticky-shrunk .site-logo-img img { width: 210px !important; max-height: none !important; height: auto !important; }
@media (max-width: 1200px) { .ast-sticky-main-shrink #masthead .ast-sticky-shrunk .site-logo-img img { width: 160px !important; } }
/* ---- sections sombres (hero, bandeau de réservation, bandeaux photo, encart de fin, bloc thermes) */
:is(.fc-hero, .fc-reservation, .fc-bandeau, .m-band, .mx-sombre, .fc-vagues:has(.fc-famille)) :is(p, li, h1, h2, h3) a:not(.wp-block-spectra-button) {
color: var(--ast-global-color-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
:is(.fc-hero, .fc-reservation, .fc-bandeau, .m-band, .mx-sombre, .fc-vagues:has(.fc-famille)) :is(p, li, h1, h2, h3) a:not(.wp-block-spectra-button):hover { color: #fff; }
/* Survol des boutons : le prune d'Astra disparaît sur fond prune ; on passe en blanc. */
:is(.fc-hero, .fc-reservation, .fc-bandeau, .m-band, .mx-sombre, .fc-vagues:has(.fc-famille)) a.wp-block-spectra-button:is(:hover, :focus-visible) {
background: #fff !important; color: var(--ast-global-color-2) !important; border-color: #fff !important;
}
.wp-block-spectra-button { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.wp-block-spectra-button:hover { transform: translateY(-1px); }
/* ---- encart de fin de page (m-band) : texte sur une ligne, bouton calé à droite */
.m-band > .wp-block-spectra-container { justify-content: space-between !important; align-items: center !important; }
.m-band > .wp-block-spectra-container > .wp-block-spectra-container:first-child { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
.m-band > .wp-block-spectra-container > .wp-block-spectra-container:last-child { flex: 0 0 auto !important; width: auto !important; }
.m-band h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; margin: 0; }
.m-band a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 767px) {
.m-band > .wp-block-spectra-container > .wp-block-spectra-container { width: 100% !important; }
.m-band h3 { text-align: center; }
.m-band .wp-block-spectra-buttons { justify-content: center !important; }
}
/* ---- menu principal : trait bronze fin, déployé depuis le centre, au survol et sur la page courante */
#ast-hf-menu-1 > .menu-item > .menu-link { position: relative; transition: color .2s ease; }
#ast-hf-menu-1 > .menu-item > .menu-link::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: calc(50% - 1em); height: 1.5px; border-radius: 2px;
background: var(--ast-global-color-0); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--mx-ease);
}
#ast-hf-menu-1 > .menu-item:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > .menu-link { color: var(--ast-global-color-0) !important; }
#ast-hf-menu-1 > .menu-item:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > .menu-link::after { transform: scaleX(1); }
/* ---- sous-menus : carte blanche arrondie, pictos en pastille bronze, survol bronze plein.
Couleurs en variables (--m-*) : changer de palette = changer ces lignes.
Pictos attribués par lien (--fc-ico) ; une entrée sans picto attribué reçoit une flèche. */
#ast-hf-menu-1 .sub-menu {
--m-bg: #fff; --m-ring: color-mix(in srgb, var(--ast-global-color-2) 7%, transparent);
--m-text: var(--ast-global-color-2); --m-pill: var(--ast-global-color-0); --m-icon: #fff;
--m-hover-bg: var(--ast-global-color-0); --m-hover-text: #fff; --m-hover-pill: #fff; --m-hover-icon: var(--ast-global-color-0);
min-width: 290px; padding: 10px !important; background: var(--m-bg) !important; border: 0 !important; border-radius: 14px;
box-shadow: 0 0 0 1px var(--m-ring), 0 30px 60px -24px color-mix(in srgb, var(--ast-global-color-8) 55%, transparent);
}
@keyframes fcMenu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#ast-hf-menu-1 .menu-item:is(:hover, :focus-within) > .sub-menu { animation: fcMenu .24s var(--mx-ease) both; }
@media (prefers-reduced-motion: reduce) { #ast-hf-menu-1 .menu-item > .sub-menu { animation: none !important; } }
#ast-hf-menu-1 .sub-menu .menu-item { border: 0 !important; }
#ast-hf-menu-1 .sub-menu .menu-link .ast-icon { display: none; }
#ast-hf-menu-1 .sub-menu .menu-link {
--fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E");
position: relative; display: flex !important; align-items: center; gap: 14px; padding: 9px 12px !important; border-radius: 10px;
font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--m-text) !important; border: 0 !important;
transition: background-color .2s ease, color .2s ease;
}
#ast-hf-menu-1 .sub-menu .menu-link::before {
content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--m-pill);
transition: background-color .2s ease, transform .3s var(--mx-ease);
}
#ast-hf-menu-1 .sub-menu .menu-link::after {
content: ""; position: absolute; left: 12px; top: 50%; width: 38px; height: 38px; margin-top: -19px; background: var(--m-icon);
-webkit-mask: var(--fc-ico) center / 19px no-repeat; mask: var(--fc-ico) center / 19px no-repeat;
transition: background-color .2s ease, transform .3s var(--mx-ease);
}
#ast-hf-menu-1 .sub-menu .menu-item:is(:hover, :focus-within) > .menu-link { background: var(--m-hover-bg) !important; color: var(--m-hover-text) !important; }
#ast-hf-menu-1 .sub-menu .menu-item:is(:hover, :focus-within) > .menu-link::before { background: var(--m-hover-pill); transform: rotate(-8deg); }
#ast-hf-menu-1 .sub-menu .menu-item:is(:hover, :focus-within) > .menu-link::after { background: var(--m-hover-icon); transform: rotate(-8deg); }
#ast-hf-menu-1 .sub-menu a[href*="studio-mode-hotel"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8%22 /%3E %3Cpath d=%22M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4%22 /%3E %3Cpath d=%22M12 4v6%22 /%3E %3Cpath d=%22M2 18h20%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="forfaits-20-jours"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22 /%3E %3Cpath d=%22M7 12h5%22 /%3E %3Cpath d=%22M15 9.4a4 4 0 1 0 0 5.2%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="demande-de-forfait"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z%22 /%3E %3Cpath d=%22m21.854 2.147-10.94 10.939%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="faq-curistes"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22 /%3E %3Cpath d=%22M12 17h.01%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="#studios"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M10 21H2%22 /%3E %3Cpath d=%22M10 3H7a2 2 0 00-2 2v16%22 /%3E %3Cpath d=%22M14 12h.01%22 /%3E %3Cpath d=%22M19 21V5a2 2 0 00-1.675-1.974l-6.163-1.013A1 1 0 0010 3v18a1 1 0 001.124.992z%22 /%3E %3Cpath d=%22M22 21h-3%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="#t2"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22 /%3E %3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="accueil-velo"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ccircle cx=%2218.5%22 cy=%2217.5%22 r=%223.5%22 /%3E %3Ccircle cx=%225.5%22 cy=%2217.5%22 r=%223.5%22 /%3E %3Ccircle cx=%2215%22 cy=%225%22 r=%221%22 /%3E %3Cpath d=%22M12 17.5V14l-3-3 4-3 2 3h2%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="#feria"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M5.8 11.3 2 22l10.7-3.79%22 /%3E %3Cpath d=%22M4 3h.01%22 /%3E %3Cpath d=%22M22 8h.01%22 /%3E %3Cpath d=%22M15 2h.01%22 /%3E %3Cpath d=%22M22 20h.01%22 /%3E %3Cpath d=%22m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10%22 /%3E %3Cpath d=%22m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17%22 /%3E %3Cpath d=%22m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7%22 /%3E %3Cpath d=%22M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="questions-frequentes"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22 /%3E %3Cpath d=%22M12 17h.01%22 /%3E%3C/svg%3E"); }
#ast-hf-menu-1 .sub-menu a[href*="bagagerie"] { --fc-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M10 21H2%22 /%3E %3Cpath d=%22M10 3H7a2 2 0 00-2 2v16%22 /%3E %3Cpath d=%22M14 12h.01%22 /%3E %3Cpath d=%22M19 21V5a2 2 0 00-1.675-1.974l-6.163-1.013A1 1 0 0010 3v18a1 1 0 001.124.992z%22 /%3E %3Cpath d=%22M22 21h-3%22 /%3E%3C/svg%3E"); }
/* ---- bouton retour en haut */
#ast-scroll-top {
width: 48px; height: 48px; line-height: 48px; padding: 0; text-align: center; border-radius: 50%;
background: var(--ast-global-color-2) !important; color: var(--ast-global-color-1) !important;
border: 1.5px solid color-mix(in srgb, var(--ast-global-color-1) 55%, transparent) !important;
box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ast-global-color-8) 60%, transparent);
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
#ast-scroll-top .ast-icon svg { fill: currentColor; width: 15px; height: auto; vertical-align: middle; }
#ast-scroll-top:hover { background: var(--ast-global-color-1) !important; color: var(--ast-global-color-2) !important; transform: translateY(-2px); }
/* ---- grilles de pictos : variante 3 colonnes (listes de 5 à 6 éléments) */
.fc-atouts.fc-atouts--3 { grid-template-columns: repeat(3, 64px minmax(0, 1fr)) !important; }
@media (max-width: 1024px) { .fc-atouts.fc-atouts--3 { grid-template-columns: repeat(2, 64px minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { .fc-atouts.fc-atouts--3 { grid-template-columns: 64px minmax(0, 1fr) !important; } }
.fc-atouts p { margin: 0; }
.m-card .mx-ico { margin-bottom: 6px; }
/* ================================================================ v1.3.0 : couche graphique
Animations d'entrée : natives Spectra (réglages « Animation » de chaque bloc, AOS),
le script maison d'apparitions est retiré du thème. */
.m-h2 { text-wrap: balance; } /* titres de section : sans filet décoratif */
/* ---- bandeaux photo des pages : titre plus présent */
.fc-bandeau h1 { max-width: 26ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .28); }
/* ---- pictos : pastille blanche cerclée d'or, légère ombre violette ; survol or */
.mx-ico { background: #fff; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--ast-global-color-0) 70%, transparent); transition: background-color .3s ease, color .3s ease, transform .4s var(--mx-ease); }
.m-card:hover .mx-ico { background: var(--ast-global-color-1); color: var(--ast-global-color-2); transform: rotate(-6deg); }
/* ---- cartes : coins 10 px, filet or en tête, ombre, soulèvement au survol */
.m-card {
position: relative; overflow: hidden; border-radius: 10px !important; border-top: 3px solid var(--ast-global-color-1);
box-shadow: 0 1px 2px color-mix(in srgb, var(--ast-global-color-8) 6%, transparent), 0 14px 34px -20px color-mix(in srgb, var(--ast-global-color-8) 45%, transparent) !important;
transition: transform .4s var(--mx-ease), box-shadow .4s var(--mx-ease);
}
.m-card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px color-mix(in srgb, var(--ast-global-color-8) 6%, transparent), 0 26px 50px -22px color-mix(in srgb, var(--ast-global-color-8) 55%, transparent) !important; }
/* Lien d'action en pied de carte (lien interne seul dans le dernier paragraphe) : flèche or. */
.m-card p:last-child > a[href^="/"]:only-child { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ast-global-color-0); text-decoration: none; }
.m-card p:last-child > a[href^="/"]:only-child::after { content: "→"; color: var(--ast-global-color-1); font-size: 1.15em; transition: transform .3s var(--mx-ease); }
.m-card:hover p:last-child > a[href^="/"]:only-child::after { transform: translateX(5px); }
/* Carte à photo : l'image déborde jusqu'aux bords de la carte. */
.m-card--photo { border-top: 0; }
.m-card--photo > .wp-block-image:first-child { margin: -28px -28px 10px !important; max-width: none; width: calc(100% + 56px); overflow: hidden; }
.m-card--photo > .wp-block-image:first-child img { border-radius: 0 !important; transition: transform .8s var(--mx-ease); }
.m-card--photo:hover > .wp-block-image:first-child img { transform: scale(1.05); }
@media (max-width: 767px) { .m-card--photo > .wp-block-image:first-child { margin: -20px -20px 8px !important; width: calc(100% + 40px); } }
/* ---- photos de contenu : coins arrondis, ombre et cadre or décalé */
.spectra-is-root-container .wp-block-image.size-large:not(.m-card *, .fc-galerie *) { position: relative; isolation: isolate; }
.spectra-is-root-container .wp-block-image.size-large:not(.m-card *, .fc-galerie *)::before {
content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
border: 2px solid var(--ast-global-color-1); border-radius: 12px;
}
.spectra-is-root-container .wp-block-image.size-large:not(.m-card *, .fc-galerie *) img { border-radius: 12px !important; box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--ast-global-color-8) 60%, transparent); }
@media (max-width: 767px) { .spectra-is-root-container .wp-block-image.size-large:not(.m-card *, .fc-galerie *)::before { inset: 12px -10px -12px 12px; } }
/* ---- tableaux : en-tête prune, lignes alternées, ombre, coins arrondis */
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table thead { border: 0 !important; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table table {
border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; background: #fff;
box-shadow: 0 1px 2px color-mix(in srgb, var(--ast-global-color-8) 6%, transparent), 0 20px 44px -26px color-mix(in srgb, var(--ast-global-color-8) 50%, transparent);
}
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table :is(th, td) { border: 0 !important; padding: 16px 20px; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table th { background: var(--ast-global-color-2); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ast-global-color-5) 70%, #fff); }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table tbody tr { transition: background-color .2s ease; }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table tbody tr:hover td { background: var(--ast-global-color-5); }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table tbody td:first-child { font-weight: 600; color: var(--ast-global-color-2); }
:is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--ast-global-color-2) 8%, transparent) !important; }
/* Grilles tarifaires : montants en avant. */
.fc-tarifs:has(th:nth-child(5)) tbody td:not(:first-child) { font-family: 'ABeeZee', sans-serif; font-size: 19px; color: var(--ast-global-color-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-tarifs:has(th:nth-child(5)) thead th:first-child { background: var(--ast-global-color-0); }
/* ---- étapes numérotées (fc-etapes) : pastilles or reliées par un filet */
ol.fc-etapes { list-style: none; counter-reset: fc-etape; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
ol.fc-etapes::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, var(--ast-global-color-1), color-mix(in srgb, var(--ast-global-color-1) 25%, transparent)); }
ol.fc-etapes > li { counter-increment: fc-etape; position: relative; padding-top: 76px; margin: 0; line-height: 1.6; }
ol.fc-etapes > li::before {
content: counter(fc-etape); position: absolute; top: 0; left: 0; width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-family: 'ABeeZee', sans-serif; font-size: 24px;
background: var(--ast-global-color-1); color: var(--ast-global-color-2); box-shadow: 0 0 0 6px #fff, 0 12px 24px -12px color-mix(in srgb, var(--ast-global-color-1) 80%, transparent);
}
ol.fc-etapes > li strong { font-family: 'ABeeZee', sans-serif; font-weight: 400; font-size: 19px; color: var(--ast-global-color-2); }
@media (max-width: 1024px) { ol.fc-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } ol.fc-etapes::before { display: none; } }
@media (max-width: 767px) {
ol.fc-etapes { grid-template-columns: 1fr; gap: 24px; }
ol.fc-etapes > li { padding: 0 0 0 76px; min-height: 56px; }
}
/* ---- coches des listes Spectra : pastille lavande, coche violette (or sur fond sombre) */
.wp-block-spectra-list-child-icon { width: 30px !important; height: 30px !important; min-width: 30px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; background: var(--ast-global-color-5); color: var(--ast-global-color-0); }
.wp-block-spectra-list-child-icon svg { width: 13px !important; height: 13px !important; fill: currentColor; }
:is(.fc-hero, .fc-bandeau, .mx-sombre, .fc-vagues:has(.fc-famille)) .wp-block-spectra-list-child-icon { background: rgba(255, 255, 255, .14); color: var(--ast-global-color-1); }
/* ---- listes à puces du contenu : puces or */
:is(.entry-content, [class*="astra-advanced-hook-"]) ul.wp-block-list:not(.fc-prix) > li::marker { color: var(--ast-global-color-1); font-size: 1.2em; }
/* ---- liens dans le texte : soulignement or */
:is(.entry-content, [class*="astra-advanced-hook-"]) p a:not(.wp-block-spectra-button):not(.m-card a) { text-decoration: underline; text-decoration-color: var(--ast-global-color-1); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s ease; }
:is(.entry-content, [class*="astra-advanced-hook-"]) p a:not(.wp-block-spectra-button):not(.m-card a):hover { color: var(--ast-global-color-0); }
/* ---- sections bord à bord : pas de liseré blanc entre deux sections. La marge haute d'un premier
enfant (tableau à 8 px) traversait la section constrained (fusion des marges) et la décalait.
flow-root contient les marges sans toucher à la mise en page constrained. */
.entry-content > .spectra-is-root-container.is-layout-constrained { display: flow-root; }
.entry-content > .spectra-is-root-container { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Tableaux : le conteneur ne coupe plus l'ombre sur ordinateur (le défilement reste sur mobile). */
@media (min-width: 768px) { :is(.entry-content, [class*="astra-advanced-hook-"]) .wp-block-table { overflow: visible; } }
/* ================================================================ v1.4.0 : réservation RoomCloud */
/* ---- barre de recherche de l'accueil : carte blanche à cheval sur le hero */
.fc-resa { position: relative; z-index: 3; }
.fc-resa-carte { width: 100%; max-width: 1100px; min-width: 0; align-items: stretch !important; }
.fc-resa-carte > *, .fc-resa-form { width: 100%; min-width: 0; }
.fc-resa-champ :is(input, select) { min-width: 0; }
.fc-resa-carte {
margin-top: -84px !important; border-top: 3px solid var(--ast-global-color-1);
box-shadow: 0 2px 6px color-mix(in srgb, var(--ast-global-color-8) 8%, transparent), 0 34px 70px -34px color-mix(in srgb, var(--ast-global-color-8) 60%, transparent);
}
.fc-resa-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1.3fr)) minmax(0, .8fr) auto; gap: 16px; align-items: end; margin: 0; }
.fc-resa-champ { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ast-global-color-0); }
.fc-resa-champ :is(input, select) {
width: 100%; height: 54px; padding: 0 14px; margin: 0; border: 1.5px solid color-mix(in srgb, var(--ast-global-color-2) 16%, transparent); border-radius: 8px;
background: #fff; color: var(--ast-global-color-2); font: 500 17px/1.2 'Open Sans', sans-serif; letter-spacing: 0; text-transform: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.fc-resa-champ :is(input, select):focus { outline: 0; border-color: var(--ast-global-color-0); box-shadow: 0 0 0 4px var(--ast-global-color-5); }
.fc-resa-btn {
height: 54px; padding: 0 30px; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap;
background: var(--ast-global-color-1); color: var(--ast-global-color-2); font: 600 17px/1 'Open Sans', sans-serif;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.fc-resa-btn:hover, .fc-resa-btn:focus-visible { background: var(--ast-global-color-2); color: #fff; transform: translateY(-1px); }
.fc-resa-atouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin: 22px 0 0; font-size: 15px; color: var(--ast-global-color-3); }
.fc-resa-atouts span { display: inline-flex; align-items: center; gap: 8px; }
.fc-resa-atouts svg { flex: none; color: var(--ast-global-color-0); }
@media (max-width: 1024px) { .fc-resa-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-resa-btn { grid-column: 1 / -1; } }
@media (max-width: 560px) {
.fc-resa-carte { margin-top: -56px !important; }
.fc-resa-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fc-resa-champ:nth-child(3) { grid-column: 1 / -1; }
.fc-resa-champ :is(input, select) { padding: 0 10px; font-size: 16px; }
.fc-resa-atouts { flex-direction: column; align-items: flex-start; gap: 10px; }
.fc-resa-atouts span { display: block; }
.fc-resa-atouts svg { display: inline-block; vertical-align: -3px; margin-right: 8px; }
}
/* ---- moteur RoomCloud en iframe (page Tarifs) */
.fc-roomcloud { display: block; width: 100%; height: 1500px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--ast-global-color-8) 50%, transparent); }
@media (max-width: 767px) { .fc-roomcloud { height: 1900px; border-radius: 0; } }
/* Barre de réservation posée dans une page (Chambres) : pas de chevauchement. */
.fc-resa--inline .fc-resa-carte { margin-top: 0 !important; }
.fc-resa--inline .fc-resa-atouts { justify-content: flex-start; }
/* ================================================================ v1.5.1 : galerie et carte */
/* ---- galerie photo (Résidence Bellevue) : vignettes arrondies, zoom au survol, sans cadre or */
.fc-galerie .wp-block-image { margin: 0 !important; overflow: hidden; border-radius: 10px; box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--ast-global-color-8) 55%, transparent); }
.fc-galerie .wp-block-image img { display: block; width: 100%; border-radius: 0 !important; transition: transform .8s var(--mx-ease); }
.fc-galerie .wp-block-image:hover img { transform: scale(1.06); }
@media (max-width: 767px) { .fc-galerie .wp-block-image { border-radius: 8px; } }
/* ---- carte Google Maps (Accès et contact) */
.fc-carte { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #fff;
box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--ast-global-color-8) 50%, transparent); }
.fc-carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .fc-carte { aspect-ratio: 1 / 1; } }
/* ================================================================ v1.5.2 : performance */
/* ---- Turnstile : hauteur du widget réservée, plus de décalage de mise en page à son affichage */
.forminator-turnstile { min-height: 65px; }
/* ---- carte d'accès : façade avant chargement de Google Maps */
.fc-carte--facade {
display: flex; align-items: center; justify-content: center; text-align: center;
background-color: var(--ast-global-color-5);
background-image:
linear-gradient(28deg, transparent 46%, rgba(255, 255, 255, .95) 46%, rgba(255, 255, 255, .95) 52%, transparent 52%),
linear-gradient(118deg, transparent 47.5%, rgba(255, 255, 255, .8) 47.5%, rgba(255, 255, 255, .8) 51%, transparent 51%),
linear-gradient(170deg, transparent 63%, rgba(255, 255, 255, .7) 63%, rgba(255, 255, 255, .7) 65.5%, transparent 65.5%),
repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--ast-global-color-0) 6%, transparent) 46px 48px),
repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--ast-global-color-0) 6%, transparent) 46px 48px);
}
.fc-carte-facade { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 360px; padding: 24px;
background: rgba(255, 255, 255, .92); border-radius: 12px; box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ast-global-color-8) 55%, transparent); }
.fc-carte-pin { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
background: var(--ast-global-color-0); color: #fff; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--ast-global-color-0) 80%, transparent); }
.fc-carte-adresse { margin: 0; color: var(--ast-global-color-2); line-height: 1.5; }
.fc-carte-btn {
min-height: 48px; padding: 0 26px; border: 0; border-radius: 3px; cursor: pointer;
background: var(--ast-global-color-1); color: var(--ast-global-color-2); font: 600 16px/1 'Open Sans', sans-serif;
transition: background-color .25s ease, color .25s ease;
}
.fc-carte-btn:hover, .fc-carte-btn:focus-visible { background: var(--ast-global-color-2); color: #fff; }
.fc-carte-mention { margin: 0; font-size: 13px; color: var(--ast-global-color-3); }
@media (max-width: 767px) { .fc-carte-facade { max-width: 82%; padding: 18px; gap: 10px; } .fc-carte-pin { width: 44px; height: 44px; } }
/* ---- formulaires Forminator chargés en AJAX : place réservée tant que le formulaire n'est pas rendu.
Le conteneur d'attente est un , le formulaire rendu un