/* Theme Name: Hello Elementor Child — Montana Parc Theme URI: https://montanaparc.example Description: Thème enfant Hello Elementor pour Montana Parc. Polices self-hosted + fondations Elementor v4. Author: Peppermint Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* Fondations — TOKENS DESIGN maquette exposés en variables CSS (:root). Les fondations avaient tokenisé couleurs/polices/dimensions en globals Elementor uniquement ; le CSS des blocs home s'en sortait via `var(--token, fallback)`. Les templates portés depuis la maquette (region/activite/single…) utilisent `var(--token)` NU → il FAUT que ces variables existent. On les définit ici, valeurs verbatim maquette (styles.css:1-40). Additif : mêmes valeurs que les fallbacks home → aucune régression, et robustesse pour tout futur port. */ :root { /* couleurs */ --petrole: #2C4A52; --petrole-2: #22383F; --petrole-brume: #5B7B82; --encre: var(--petrole-2); --corail: #FB6F52; --corail-deep: #EA5638; --corail-pale: #FFC6AC; --sable: #E7D5C0; --sable-hover: #ECE3D4; --sable-pale: #F3EFE7; --lumiere: #FBFAF6; --lagune: #2E9BB8; --olivier: #9DB89A; --olivier-deep: #5D7A59; /* typo */ --body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; /* ⚠ NE PLUS UTILISER en font-family : Elementor v3 pose --display:flex (layout) sur ses conteneurs → héritage toxique (bug police 'flex' constaté sur le h2 devis, 2026-08-24). Utiliser --font-display. */ --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --fs-display: clamp(48px,7vw,86px); --fs-h1: clamp(36px,5vw,62px); --fs-h2: clamp(28px,3.6vw,44px); --fs-h3: clamp(22px,2.4vw,30px); --fs-h4: clamp(19px,2vw,23px); --fs-lead: clamp(16px,1.7vw,18px); --fs-body: 16px; --fs-label: 14.5px; --fs-eyebrow: 13px; --fs-meta: 13.5px; --fs-micro: 12px; /* dimensions / effets */ --maxw: 1220px; --gap-grid: 20px; --r-card: 24px; --r-img: 18px; --shadow-soft: 0 16px 40px -26px rgba(34,56,63,.5); --shadow-card: 0 30px 70px -30px rgba(34,56,63,.6); --hair: 0 0 0 1px rgba(34,56,63,.06); --ease: cubic-bezier(.2,.7,.2,1); } /* Fondations — POLICE DE CORPS globale (lacune corrigée). Le reset du thème parent (hello-elementor/assets/css/reset.css) impose `body{font-family:-apple-system,…}` (spécificité 0,0,1). Le corps du site (Hanken Grotesk = var --font-body) n'était appliqué que par les widgets Elementor qui posent une font-family explicite → tout TEXTE NU atomique (footer, futurs blocs) tombait sur la police système. On impose ici la police de corps sur `html body` (spécificité 0,0,2) pour battre le reset quel que soit l'ordre de chargement. Correction valable pour tous les blocs. */ html body { font-family: var(--font-body, "Hanken Grotesk"), system-ui, -apple-system, sans-serif; } /* Fondations — LINE-HEIGHT DE CORPS global (lacune corrigée, même piège). La maquette a `body{line-height:1.6}` (styles.css:37) ; le reset Hello impose `body{line-height:1.5}` → tout texte HÉRITANT (leads de base, chips, paragraphes sans règle propre) était à 1.5 sur toutes les pages ; les composants déclarant 1.6 localement masquaient l'écart. Les line-height explicites restent gagnants. */ html body { line-height: 1.6; } /* Fondations — COULEUR DE CORPS globale (lacune corrigée, même piège). Maquette `body{color:var(--encre)}` (styles.css:37) ; le reset Hello impose #333 → textes hérités légèrement faux partout. */ html body { color: var(--encre, #22383F); } /* Fondations — TAILLES DE TITRES : retour aux valeurs UA (lacune corrigée, même piège). La maquette n'a AUCUNE taille globale de titres (styles.css:39 : famille/couleur/graisse seulement) → un titre sans règle de composant rend à la taille UA (ex. h2 = 1.5em = 24px, cas `.why h2`). Le reset Hello impose h1 2.5rem…h6 1rem → tout titre non dimensionné était trop grand (latent partout, révélé sur oasis-aquatique). `revert` = valeur UA contextuelle ; les composants qui déclarent leur taille (var(--fs-h2)…) restent gagnants. */ html h1, html h2, html h3, html h4, html h5, html h6 { font-size: revert; } /* Fondations — RESET MARGES des pages intérieures (`body.vpage`, toutes les pages maquette sauf l'accueil — chantier vpage 2026-07-27). Mime le `*{margin:0}` de la maquette : le reset hello (h1..h4 margin-block .5/1rem, p margin-block-end .9rem) fuyait sur tout titre/paragraphe sans règle de composant. `body:where(.vpage)` = spécificité (0,0,1) : bat le reset hello (0,0,1, chargé avant) par ordre source, mais PERD face à toute règle de composant — y compris à classe nue (0,1,0, ex. `.dintro{margin-top:16px}`) et où qu'elle soit dans le fichier. (V1 `body.vpage` à (0,1,1), placée dans le bloc landing, écrasait .art-body h2 et .dintro — constaté au chantier.) */ body:where(.vpage) :where(h1,h2,h3,h4,p) { margin: 0; } /* Fondations — TITRES GLOBAUX (lacune corrigée — GÉNÉRALISATION). La maquette pose h1..h4 GLOBALEMENT (styles.css:39 verbatim : display/petrole/balance) ; le portage l'avait scopée `.dpage` → chaque bloc de la landing village (et toute future page non-.dpage) retombait sur le `color:inherit` (#333) du reset Hello, corrigé à la main 4 fois (esprit/gallery/feature/activités). Spécificité (0,0,1), chargée après le reset (source order gagne) ; les composants à titres blancs (.rtile h4, .hinfo h3, .crossv-txt h2, .cg-cap h4, .hb-cta h3, .groups h2… = 0,1,1) et les widgets home atomic (classes) restent gagnants — même mécanique que la maquette. Marges gérées par les resets scopés (.dpage / body.single-mp_village). */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.04; color: var(--petrole); font-weight: 700; text-wrap: balance; } /* Fondations — FOND DE PAGE teinté (lacune corrigée, même piège que la police). La maquette a `body{background:var(--lumiere)}` (#FBFAF6, crème). Le reset Hello Elementor impose `body{background:#fff}` (blanc pur, 0,0,1). On impose la teinte lumière sur `html body` (0,0,2) pour battre le reset. `--lumiere` existe déjà (global Elementor e-gv-1891a07). Affecte toutes les pages. */ html body { background: var(--lumiere, #FBFAF6); } /* Fondations — TYPOGRAPHIE DES TITRES globale (fidélité maquette styles.css:39 : h1..h4 { font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; line-height:1.04; text-wrap:balance }). Comme la police de corps (§7.16 body), les titres NUS tombaient sur la police système/corps → imposée ici globalement (spécificité élément 0,0,1 : les blocs à font-family explicite gagnent). La COULEUR reste par bloc (hero blanc, etc.). Non exposé par le Style Schema Elementor v4. */ h1, h2, h3, h4 { font-family: var(--font-display, "Bricolage Grotesque"), sans-serif; font-weight: 700; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; } /* Fondations — filet corail du sur-titre (fidélité maquette styles.css:43 : .eyebrow::before { content:""; width:26px; height:2px; background:var(--corail) }). Un pseudo-élément ne peut pas être porté par une classe globale v4, donc porté ici. Solution provisoire ; convertible en e-div-block Elementor si édition builder requise. */ /* Base `.eyebrow` (texte) — maquette styles.css:42. Les fondations n'avaient posé que `::before` (le tiret) ; le texte des eyebrows home venait des classes bespoke `.s-*-eyebrow`. Les templates portés (region/activite/single) utilisent `.eyebrow` nu → il faut la base. Les eyebrows home qui portent aussi `.eyebrow` sont surchargés par leur classe `.s-*-eyebrow` (plus tard) → OK. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--corail-deep); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--corail); flex: 0 0 auto; } /* Base `.lead` — maquette styles.css:44. Jamais portée globalement : les composants region/hébergement la re-déclaraient localement, mais les usages qui s'appuyaient sur la BASE (feature aquatique, sl-head/sl-right village…) tombaient sur le style body par défaut. Les overrides scopés (.art-body .lead etc., 0,2,0) restent gagnants. */ .lead { font-size: var(--fs-lead); color: var(--petrole-brume); max-width: 54ch; } /* Bloc final-cta — icônes SVG en CONTOUR (fidélité maquette). Elementor e-svg réécrit le avec fill="currentColor" au rendu, ce qui remplit le path fermé du téléphone (silhouette pleine). `fill` n'est pas exposé par le Style Schema v4 → forcé ici en contour. Les 3 icônes du bloc (flèches + téléphone) sont des tracés stroke, comme dans la maquette. */ .s-final-cta-card .e-svg-base svg { fill: none; } /* Boutons .btn / .btn--primary — transitions + états :hover repris de la maquette (styles.css:52-62). Portée GLOBALE comme la maquette (`.btn`/`.btn-primary`) → réutilisés par le CTA final ET le header (bouton Réserver = mêmes classes globales), aucune duplication. Les :hover ne sont pas portables par une classe globale v4 (§7.2). `.ico`/pastille = e-div-block (.e-div-block-base) ; flèche = e-svg. --ease = cubic-bezier(.2,.7,.2,1). */ .btn { transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s; } .btn .e-div-block-base { transition: background .35s var(--ease); } .btn .e-svg-base svg { transition: transform .4s var(--ease); } /* flèche : rotation -45° au survol */ .btn:hover .e-svg-base svg { transform: rotate(-45deg); } /* bouton primaire : lévitation + ombre + pastille blanche + flèche corail */ .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -12px rgba(234,86,56,.85); } .btn--primary:hover .e-div-block-base { background: var(--blanc); } .btn--primary:hover .e-svg-base svg { color: var(--corail-deep); } /* bouton OUTLINE — variante réutilisable (maquette .btn-outline styles.css:59-60). Base pill/padding = classe globale `btn` ; ici les COULEURS du variant + hover (non portables par une classe globale v4, §7.2). Repos : transparent + filet pétrole + texte/flèche pétrole. Survol : fond pétrole, texte/flèche blancs. */ /* spécificité `.btn.btn--outline` (0,2,0) : bat les défauts atomiques (`.e-con`) qui neutralisaient le box-shadow. L'outline est toujours `class="btn btn--outline"`, donc ce sélecteur est correct. */ .btn.btn--outline { background: transparent; color: var(--petrole); box-shadow: inset 0 0 0 1.5px rgba(44,74,82,.5); } .btn.btn--outline .e-svg-base svg { color: var(--petrole); } .btn.btn--outline:hover { transform: translateY(-2px); background: var(--petrole); color: #fff; } .btn.btn--outline:hover .e-div-block-base { background: rgba(255,255,255,.22); } .btn.btn--outline:hover .e-svg-base svg { color: #fff; } /* bouton ghost sur média (variante sombre autonome) — spécifique au CTA final */ .s-final-cta-card .btn--ghost--on-media:hover { transform: translateY(-2px); background-color: rgba(14,24,28,.5); } .s-final-cta-card .btn--ghost--on-media:hover .e-div-block-base { background: rgba(255,255,255,.3); } /* Bloc hero — icônes SVG en contour (pin de localisation ; e-svg force fill=currentColor, cf. §7.3). */ .s-hero .e-svg-base svg { fill: none; } /* Bloc hero — highlight du H1 « en Côte d'Azur » (maquette .heroD h1 .hl). Le titre e-heading ne prend que du texte/inline ; le mot est balisé et coloré ici (poids inchangé). */ .s-hero-h1 strong { color: var(--corail-pale); font-weight: inherit; } /* Bloc hero — filet dégradé du dock-hint (maquette .dock-hint::after). Pseudo-élément → thème. */ .s-hero-dock-hint::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.4), transparent); } /* Bloc hero — ombre portée sur le nom des villages (maquette .dbody .nm : text-shadow 0 1px 10px rgba(0,0,0,.4)). text-shadow ∉ Style Schema v4 → porté ici, scopé aux 2 cartes. */ .s-hero-card-oasis-nm, .s-hero-card-gassin-nm { text-shadow: 0 1px 10px rgba(0, 0, 0, .4); } /* ===================== Bloc site/header-main ===================== */ /* Icônes SVG en contour (chevron, flèche ; e-svg force fill=currentColor, §7.3). display:block : les e-svg atomiques rendent en inline (vertical-align baseline) → le glyphe tombe ~3px sous le centre du texte ; block le recale (la maquette a ses SVG en block). */ .s-hdr .e-svg-base svg { fill: none; display: block; } /* Liens : héritent la couleur du conteneur (sinon le `a{color}` du thème — corail — l'emporte sur l'héritage), sans soulignement. La couleur vient de .s-hdr-links (petrole) / body.home (blanc). */ .s-hdr a { text-decoration: none; } .s-hdr-links > a { color: inherit; } /* liens DIRECTS de nav (pas les items du sous-menu, qui gardent leur couleur) */ .s-hdr-links > a, .s-hdr-drop-btn, .s-hdr-drop-menu a { white-space: nowrap; } /* Menu mobile (overlay masqué ; toggle + finition visuelle = passe interactions) : liens en couleur héritée. */ .s-hdr-mobile a { color: inherit; } /* Placement dans la grille 1fr auto 1fr (le prop justify-self v4 ne s'applique pas → porté ici) : identité à gauche, liens centrés, actions à droite. Enfants à largeur naturelle (sinon les items sont étirés à largeur égale → « Golfe de St-Tropez » déborde, « Résidentiel » flotte). */ .s-hdr-brand { justify-self: start; } .s-hdr-links { justify-self: center; justify-content: center; } /* .e-con force width:100% → justify-self:end sans effet ; on pousse le contenu à droite en interne. */ .s-hdr-right { justify-self: end; justify-content: flex-end; } .s-hdr-links > *, .s-hdr-right > * { width: auto; flex: 0 0 auto; } /* Crossfade logo — état SOLIDE (défaut) : logo sombre visible, blanc masqué (maquette .logo .dark/.white). */ .s-hdr-logo-white { opacity: 0; transition: opacity .4s; } .s-hdr-logo-dark { opacity: 1; transition: opacity .4s; } /* Burger : 3 barres via box-shadow (l'e-div-block n'a pas d'enfant ; maquette .burger span). Toggle différé. */ .s-hdr-burger { color: var(--petrole, #2C4A52); background: rgba(44,74,82,.1); position: relative; } /* Le ::before atomique est en position:absolute (Elementor l'utilise pour une couche overlay) → le centrage flex du cercle ne l'affecte pas. On le centre explicitement (les 3 barres = ::before + box-shadow). */ .s-hdr-burger::before { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 18px; height: 2px; margin: 0; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* Sur-titre mobile & liste : cf. menu mobile (2e temps). */ /* --- État TRANSPARENT (accueil, en HAUT de page) : scopé front-page + `:not(.scrolled)`. Au scroll, js/header.js ajoute `.scrolled` sur .s-hdr → ces règles ne s'appliquent plus → retour à l'état SOLIDE de base (non redéfini ici). Sur les pages intérieures (non body.home) ces règles ne s'appliquent jamais → le scroll n'a aucun effet (reste solide). Transitions : voir plus bas. --- */ body.home .s-hdr:not(.scrolled), body.front-page .s-hdr:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding-top: 24px; padding-bottom: 24px; } /* État SOLIDE (pages intérieures + accueil au scroll + village) aligné maquette `.nav--solid` : LIGNE 1px (0 flou) au lieu d'une ombre portée, padding 15px, fond .95 ; gap nav = clamp maquette (≈21px, ≠ 30px). Doublé `.s-hdr.s-hdr` (0,2,0) pour battre les styles inline atomiques du template #13 ; l'override transparent accueil ci-dessus (spécificité sup.) reste prioritaire en haut de page. */ .s-hdr.s-hdr { background: rgba(251,250,246,.95); box-shadow: 0 1px 0 rgba(34,56,63,.07); padding-top: 15px; padding-bottom: 15px; } .s-hdr .s-hdr-links { gap: clamp(16px,1.4vw,28px); } body.home .s-hdr:not(.scrolled) .s-hdr-brand-name, body.home .s-hdr:not(.scrolled) .s-hdr-links, body.front-page .s-hdr:not(.scrolled) .s-hdr-brand-name, body.front-page .s-hdr:not(.scrolled) .s-hdr-links { color: #fff; } body.home .s-hdr:not(.scrolled) .s-hdr-logo-white, body.front-page .s-hdr:not(.scrolled) .s-hdr-logo-white { opacity: 1; } body.home .s-hdr:not(.scrolled) .s-hdr-logo-dark, body.front-page .s-hdr:not(.scrolled) .s-hdr-logo-dark { opacity: 0; } body.home .s-hdr:not(.scrolled) .s-hdr-burger, body.front-page .s-hdr:not(.scrolled) .s-hdr-burger { color: #fff; background: rgba(255,255,255,.16); } /* Transitions de la bascule transparent↔solide (timing maquette : nav .4s, texte .25s, logo .4s). */ .s-hdr { transition: background .4s, box-shadow .4s, padding .4s; } .s-hdr-brand-name { transition: color .25s; } .s-hdr-burger { transition: background .4s, color .4s; } /* ===== LOT 1 — hovers CSS (repris maquette styles.css:80-86) ===== */ /* Liens : souligné corail qui s'étend au survol (0→100%) + opacité .92→1. Corail dans les 2 états. */ /* `> a` : liens DIRECTS de nav uniquement — pas les items du sous-menu (descendants), qui ne doivent avoir NI le souligné corail NI l'opacité .92 (juste le fond sable au survol). */ .s-hdr-links > a { padding: 4px 0; opacity: .92; transition: opacity .25s, color .25s; } .s-hdr-links > a:hover { opacity: 1; } .s-hdr-links > a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--corail, #FB6F52); transition: width .3s var(--ease); } .s-hdr-links > a:hover::after { width: 100%; } /* état ACTIF (page courante, aria-current posé par header.js) — trait plein, comme la maquette `.nav-links a[aria-current="page"]::after{width:100%}`. */ .s-hdr-links > a[aria-current="page"]::after { width: 100%; } .s-hdr-links > a[aria-current="page"] { opacity: 1; } .s-hdr-mobile a[aria-current="page"] { color: var(--corail-deep); } /* maquette .mm-group a[aria-current]{color:corail-deep} */ /* déclencheur du dropdown : trait quand la page courante est dans son sous-menu (aria-current "true" posé par header.js — bug signalé dev 2026-08-23 : aucun trait sur groupes/cse) */ .s-hdr-drop-btn { position: relative; } .s-hdr-drop-btn::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--corail, #FB6F52); transition: width .3s var(--ease); } .s-hdr-drop-btn[aria-current="true"]::after { width: 100%; } .s-hdr-drop-btn[aria-current="true"] { opacity: 1; } /* Pastille langue : ombre douce au repos, lévitation + ombre carte au survol (styles.css:85-86). */ .s-hdr-lang { box-shadow: 0 16px 40px -26px rgba(34,56,63,.5); transition: transform .25s var(--ease), box-shadow .25s; } .s-hdr-lang:hover { transform: translateY(-1px); box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); } /* Dropdown langue desktop (V28) — repris maquette `.langdrop` (styles.css:1154-1164). Wrapper + menu construits par js/header.js autour de `.s-hdr-lang`. Placeholder (pas de traduction réelle). Masqué ≤900 (la langue passe dans le menu burger, cf. `.s-hdr-mm-langs`). Classes scopées `.s-hdr`. */ .s-hdr .s-hdr-langdrop { position: relative; display: inline-flex; } .s-hdr .s-hdr-langdrop .s-hdr-lang { cursor: pointer; } /* maquette .langdrop .lang{cursor:pointer} */ .s-hdr .s-hdr-langdrop .s-hdr-lang-chev { transition: transform .3s var(--ease); } .s-hdr .s-hdr-langdrop.open .s-hdr-lang-chev { transform: rotate(180deg); } .s-hdr .s-hdr-langdrop-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 134px; background: #fff; border-radius: 14px; box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); padding: 7px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 60; } .s-hdr .s-hdr-langdrop.open .s-hdr-langdrop-menu { opacity: 1; visibility: visible; transform: none; } .s-hdr .s-hdr-langdrop-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-radius: 9px; background: none; border: 0; cursor: pointer; font-family: var(--font-body, "Hanken Grotesk"), sans-serif; font-weight: 600; font-size: 14px; color: var(--petrole, #2C4A52); text-align: left; transition: background .2s, color .2s; text-decoration: none; } /* text-decoration : items devenus au câblage Linguise */ .s-hdr .s-hdr-langdrop-item:hover { background: var(--sable-pale, #F3EFE7); } .s-hdr .s-hdr-langdrop-item.cur { background: var(--sable-pale, #F3EFE7); color: var(--corail-deep, #EA5638); } .s-hdr .s-hdr-langdrop-item.cur::after { content: "✓"; font-size: 12px; font-weight: 700; } @media (max-width: 900px) { .s-hdr .s-hdr-langdrop, .s-hdr .s-hdr-lang { display: none; } } /* ===== Mode « serré » du header (s-hdr--tight, 2026-09-03) ===== Posé par js/header.js quand la nav DÉBORDE réellement (libellés traduits DE/NL plus longs — Linguise, longueur non contrôlable). Reproduit l'état ≤900 (burger + overlay, langues dans le menu mobile) AU-DESSUS du breakpoint : mêmes bascules que les variantes tablet des styles Elementor locaux (#13/#64). !important : ces styles locaux se chargent après style.css et gagnent les égalités (règle projet) — inoffensif, actif uniquement avec la classe. */ .s-hdr.s-hdr--tight .s-hdr-links { display: none !important; } .s-hdr.s-hdr--tight .s-hdr-langdrop, .s-hdr.s-hdr--tight .s-hdr-lang { display: none !important; } .s-hdr.s-hdr--tight .s-hdr-burger { display: flex !important; } .s-hdr.s-hdr--tight .s-hdr-in { grid-template-columns: 1fr auto; } /* ===== LOT 2b — dropdown « Groupes & CSE » (clic ; maquette styles.css:453-462) ===== */ /* Bouton : opacité comme les liens ; chevron pivote à l'ouverture. */ .s-hdr-drop-btn { opacity: .92; transition: opacity .25s; } .s-hdr-drop-btn:hover, .s-hdr-drop.open .s-hdr-drop-btn { opacity: 1; } .s-hdr-drop-chev svg { transition: transform .3s var(--ease); } .s-hdr-drop.open .s-hdr-drop-chev svg { transform: rotate(180deg); } /* Sous-menu : carte blanche centrée sous le bouton, fade + slide (override du display:none Elementor via opacity/visibility pour permettre la transition). Spécificité `.s-hdr …` pour battre le display:none. */ .s-hdr .s-hdr-drop-menu { display: block; position: absolute; inset-block-start: calc(100% + 16px); inset-inline-start: 50%; inset-inline-end: auto; min-width: 252px; background: #fff; border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); padding: 8px; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60; } .s-hdr-drop.open .s-hdr-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* Items : padding, couleur petrole, sous-titre plus clair, survol sable (maquette .navdrop-menu a / .d). */ /* spécificité `.s-hdr …` pour battre le padding:0 de base (§7.5) sur les items. */ .s-hdr .s-hdr-drop-menu a { padding: 12px 13px; border-radius: 11px; color: var(--petrole, #2C4A52); transition: background .2s; } .s-hdr .s-hdr-drop-menu a:hover { background: var(--sable-pale, #F3EFE7); } .s-hdr .s-hdr-drop-menu a > *:last-child { color: var(--petrole-brume, #5B7B82); font-weight: 600; } /* ===== Responsive barre mobile (maquette media queries ≤900 / ≤560) ===== */ /* ≤900 : liens masqués (variante Elementor). La grille passe de `1fr auto 1fr` à `1fr auto` (maquette `.nav-in{grid-template-columns:1fr auto}`) → logo (col1, gauche) | actions (col2, largeur naturelle, collées à droite). Sinon la piste centrale vide laisse un `1fr` fantôme qui décale Réserver+burger. */ @media (max-width: 900px) { .s-hdr .s-hdr-in { grid-template-columns: 1fr auto; } } /* ≤560 : bouton Réserver compacté (maquette `.nav .nav-right .btn-primary{padding:11px 14px 11px 18px; font-size:var(--fs-label)}` + ico 22×22, svg 14×14). */ @media (max-width: 560px) { /* spécificité .s-hdr … pour battre la classe globale .btn / la valeur de base (chargées après le thème). */ .s-hdr .s-hdr-cta { padding: 11px 14px 11px 18px; font-size: 14.5px; } .s-hdr .s-hdr-cta-ico { width: 22px; min-width: 22px; height: 22px; } .s-hdr .s-hdr-cta-ico svg { width: 14px; height: 14px; } .s-hdr .s-hdr-right { gap: 10px; } /* maquette .nav-right{gap:10px} (desktop 16) */ } /* ===== LOT 2c — overlay menu mobile ===== */ /* L'overlay est un frère de .s-hdr (sorti du header, dont le backdrop-filter piégeait le fixed) ; position:fixed inset:0 z-80 (Elementor) → couvre le viewport. `display:flex` toujours ; masqué via opacity/visibility (fade), révélé par `.open` (JS). pointer-events pour ne rien bloquer au repos. */ .s-hdr-mobile { opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .22s var(--ease), visibility .22s; } .s-hdr-mobile.open { opacity: 1; visibility: visible; pointer-events: auto; } /* zone centrale scrollable (maquette .mm-scroll{flex:1;overflow-y:auto}) → head en haut, barre en bas. */ .s-hdr-mobile .s-hdr-mm-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ---- Style du contenu (maquette .mm-* ; scopé .s-hdr-mobile pour battre les valeurs de base) ---- */ /* icônes en contour (overlay hors .s-hdr, donc la règle .s-hdr … ne l'atteint pas). */ .s-hdr-mobile .e-svg-base svg { fill: none; } /* centrage largeur (maquette max-width 560) + espacements par marges (pas de gap uniforme). */ .s-hdr-mobile .s-hdr-mm-scroll { width: 100%; max-width: 560px; margin: 0 auto; gap: 0; } .s-hdr-mobile .s-hdr-mm-util { margin-top: 18px; } /* en-tête : nom marque (maquette .mm-brand) + croix ronde. */ .s-hdr-mobile .s-hdr-mm-brand-t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--petrole,#2C4A52); } .s-hdr-mobile .s-hdr-mm-close { width: 44px; height: 44px; border-radius: 50%; background: rgba(44,74,82,.08); color: var(--petrole,#2C4A52); } /* sur-titre : filet corail + corail-deep (maquette .mm-eyebrow). */ .s-hdr-mobile .s-hdr-mm-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--corail-deep,#EA5638); margin: 6px 0 12px; } .s-hdr-mobile .s-hdr-mm-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--corail,#FB6F52); flex: none; } /* cartes village : blanc + ombre + radius (maquette .mm-card). */ .s-hdr-mobile .s-hdr-mm-oasis, .s-hdr-mobile .s-hdr-mm-golfe { background: #fff; border-radius: 24px; box-shadow: 0 16px 40px -26px rgba(34,56,63,.5), 0 0 0 1px rgba(34,56,63,.06); padding: 15px 17px; gap: 14px; margin-bottom: 10px; align-items: center; transition: transform .35s var(--ease), box-shadow .35s; } .s-hdr-mobile .s-hdr-mm-oasis:hover, .s-hdr-mobile .s-hdr-mm-golfe:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); } .s-hdr-mobile .s-hdr-mm-oasis-nm, .s-hdr-mobile .s-hdr-mm-golfe-nm { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: clamp(19px,2vw,23px); color: var(--petrole,#2C4A52); line-height: 1.15; } .s-hdr-mobile .s-hdr-mm-oasis-nm em, .s-hdr-mobile .s-hdr-mm-golfe-nm em { color: var(--corail,#FB6F52); font-weight: 700; font-size: 13.5px; letter-spacing: 1px; font-style: italic; } .s-hdr-mobile .s-hdr-mm-oasis-meta, .s-hdr-mobile .s-hdr-mm-golfe-meta { font-size: 13.5px; color: var(--petrole-brume,#5B7B82); } /* pastille flèche (l'e-svg `go` stylé en rond corail clair). */ .s-hdr-mobile .s-hdr-mm-oasis-go, .s-hdr-mobile .s-hdr-mm-golfe-go { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sable-pale,#F3EFE7); color: var(--corail-deep,#EA5638); display: flex; align-items: center; justify-content: center; } /* flèche DANS la pastille : 18px (l'e-svg force width:100% → la flèche remplissait le rond 34px ; !important + min-width pour battre ce défaut / le min-width parasite §7.5). */ .s-hdr-mobile .s-hdr-mm-oasis-go svg, .s-hdr-mobile .s-hdr-mm-golfe-go svg { width: 18px !important; min-width: 18px; height: 18px !important; } /* liens : grande police display + séparateurs + chevron (maquette .mm-group a). */ .s-hdr-mobile .s-hdr-mm-links > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(34,56,63,.08); } .s-hdr-mobile .s-hdr-mm-links > a:last-child { border-bottom: 0; } .s-hdr-mobile .s-hdr-mm-links > a > * { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: clamp(21px,5.4vw,26px); color: var(--petrole,#2C4A52); } .s-hdr-mobile .s-hdr-mm-links > a::after { content: ""; width: 22px; height: 22px; flex: none; opacity: .32; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232C4A52'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m9%2018%206-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; } /* langue : label + pills (maquette .mm-langs). */ .s-hdr-mobile .s-hdr-mm-langs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .s-hdr-mobile .s-hdr-mm-lang-lab { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petrole-brume,#5B7B82); margin-right: 4px; } .s-hdr-mobile .s-hdr-mm-langs > *:not(.s-hdr-mm-lang-lab) { font-size: 14.5px; font-weight: 700; min-height: 40px; padding: 8px 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--sable-pale,#F3EFE7); color: var(--petrole,#2C4A52); cursor: pointer; } /* état actif = classe générique -on posée par header.js selon le préfixe d'URL (câblage Linguise) — plus la classe d'identité -fr : le menu mobile n'existe qu'avec JS, pas de fallback à couvrir */ /* état actif : MÊME spécificité (0,3,0) que la règle générique `> *:not(...)` ci-dessus, qui la battait à (0,2,0) — pastille active invisible (constat équipe 2026-09-10). La variante village (.s-hdr-mm-v .s-hdr-mm-lang.on, 0,3,0) était déjà correcte. */ .s-hdr-mobile .s-hdr-mm-langs > .s-hdr-mm-lang-on { background: var(--corail-deep,#EA5638); color: #fff; } .s-hdr-mobile .s-hdr-mm-note { font-size: 12px; color: var(--petrole-brume,#5B7B82); margin-top: 14px; } /* barre bas : sable + sticky, Réserver large + Nous contacter pill blanche (maquette .mm-bar / .mm-contact-btn). */ .s-hdr-mobile .s-hdr-mm-bar { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px max(20px, calc((100% - 560px)/2)); background: var(--sable-pale,#F3EFE7); box-shadow: 0 -1px 0 rgba(34,56,63,.1); } .s-hdr-mobile .s-hdr-mm-cta { flex: 1.35; justify-content: center; min-height: 54px; } .s-hdr-mobile .s-hdr-mm-contact { flex: 1; min-height: 54px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--petrole,#2C4A52); background: #fff; box-shadow: 0 0 0 1px rgba(34,56,63,.06); } /* ===================== Variante VILLAGE du header (maquette nav--v / .vswitch) ===================== */ /* Liens village : plus petits + serrés (maquette .nav--v .nav-links{gap:16;font-size:13.5}). */ .s-hdr-village .s-hdr-links { gap: 16px; } .s-hdr-village .s-hdr-links > a, .s-hdr-village .s-hdr-links > a > * { font-size: 13.5px; } /* vswitch — bouton + chevron dans un rond (maquette .vswitch-btn / .chev). Village = toujours solide. */ .s-hdr-vsw-btn { opacity: .92; transition: opacity .25s; } .s-hdr-vsw-btn:hover, .s-hdr-vsw.open .s-hdr-vsw-btn { opacity: 1; } .s-hdr-vsw-chev { box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(44,74,82,.07); box-shadow: inset 0 0 0 1px rgba(44,74,82,.14); color: var(--petrole,#2C4A52); transition: transform .3s var(--ease); } .s-hdr-vsw.open .s-hdr-vsw-chev { transform: rotate(180deg); } .s-hdr-vsw .e-svg-base svg { fill: none; } /* menu vswitch (maquette .vswitch-menu) : override du display:none Elementor pour la transition. */ .s-hdr-village .s-hdr-vsw-menu { display: block; position: absolute; inset-block-start: calc(100% + 14px); inset-inline-start: 0; min-width: 248px; background: #fff; border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60; } .s-hdr-vsw.open .s-hdr-vsw-menu { opacity: 1; visibility: visible; transform: none; } /* items du menu vswitch (maquette .vswitch-menu a) : hover corail-pale, étoile corail à droite, courant sable. */ .s-hdr-village .s-hdr-vsw-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border-radius: 11px; color: var(--petrole,#2C4A52); font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s; } .s-hdr-village .s-hdr-vsw-menu a:hover { background: var(--corail-pale,#FFC6AC); color: var(--corail-deep,#EA5638); } .s-hdr-vsw-cur { background: var(--sable-pale,#F3EFE7); } .s-hdr-vsw-1-st, .s-hdr-vsw-2-st { margin-left: auto; color: var(--corail,#FB6F52); font-size: 12px; letter-spacing: 1px; } .s-hdr-vsw-sep { height: 1px; background: rgba(34,56,63,.1); margin: 7px 6px; } /* vswitch : label sur une ligne ; en mobile village, on masque le logo (maquette .nav--v .logo-link{display:none}). */ .s-hdr-vsw-lbl { white-space: nowrap; } @media (max-width: 560px) { .s-hdr-village .s-hdr-logo { display: none; } } /* vswitch mobile (recette QA A11 + iPhone 16, 2026-10-01) : à 393 px, « Golfe de St-Tropez » (et plus encore le nom traduit en DE) ne tenait pas avant « Réserver » ; le label étant nowrap, c'est le chevron qui rétrécissait jusqu'à une fine pastille sans flèche. Le chevron garde sa taille (flex-shrink:0) ; c'est le NOM qui s'adapte, en mobile seulement (≤ 560 px, logo masqué) : deux lignes au plus (« Golfe de / St-Tropez »), police réduite sous 430 px, « … » seulement si deux lignes ne suffisent pas. min-width:0 sur les conteneurs flex pour qu'ils puissent céder la place. Desktop inchangé (le nom n'y rétrécit pas). */ .s-hdr-village .s-hdr-vsw-chev { flex: 0 0 26px; min-width: 26px; } @media (max-width: 560px) { .s-hdr-village .s-hdr-vsw, .s-hdr-village .s-hdr-vsw-btn { min-width: 0; } .s-hdr-village .s-hdr-vsw-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } } @media (max-width: 430px) { .s-hdr-village .s-hdr-vsw-lbl { font-size: 16px; } } @media (max-width: 374px) { .s-hdr-village .s-hdr-vsw-lbl { font-size: 15px; } } /* Ombre du header village : filet discret (maquette .nav--solid{box-shadow:0 1px 0 rgba(34,56,63,.07)}), pas la grosse ombre du scrolled marque. Spécificité .s-hdr.s-hdr-village pour battre la base. */ .s-hdr.s-hdr-village { box-shadow: 0 1px 0 rgba(34,56,63,.07); } /* Contenu GOLFE : masque du dropdown RETIRÉ (décision dev 2026-08-24 — nav Golfe complète, URLs golfe-… actives dès création des pages). Cf. mp_golfe_nav_map + header-village-scoping.md. ⚠ ne JAMAIS écrire de motif étoile-slash dans un commentaire CSS : il le ferme et le texte restant devient un sélecteur qui AVALE la règle suivante (bug typo dropdown village). */ /* Dropdown « Groupes & CSE » du header village : 13.5px comme les autres liens village (défaut 16). */ .s-hdr-village .s-hdr-drop-btn, .s-hdr-village .s-hdr-drop-lbl.s-hdr-drop-lbl { font-size: 13.5px; } /* lbl doublé : une feuille Elementor postérieure posait 16px à égalité (signalé dev 2026-08-24) */ /* Logo village : forcer 48×48 (enfant flex direct de hdr-brand → comprimé sinon, §7.11). */ .s-hdr-village .s-hdr-logo { flex: 0 0 auto; width: 48px; min-width: 48px; height: 48px; } /* Item COURANT du vswitch : fond sable (déjà) + texte corail-deep (maquette .vswitch-menu a.cur{color:corail-deep}). Spécificité …a.s-hdr-vsw-cur pour battre la couleur petrole des items. */ .s-hdr-village .s-hdr-vsw-menu a.s-hdr-vsw-cur { color: var(--corail-deep, #EA5638); } /* Padding vertical du header village : 15px (maquette .nav--solid{padding:15px 0}), scopé village uniquement — le marque reste à 12px (solide) / 24px (transparent). */ .s-hdr.s-hdr-village { padding-top: 15px; padding-bottom: 15px; } /* ============================================================ FOOTER — bloc site/footer-main (Theme Builder, doc #72) Maquette : index.html:425 `.footer` / styles.css:294-317 + MQ 343 (≤900) / 354 (≤560). Atomique v4 : styles portés ici, scopés `.s-ftr`. Leçons : §7.5 padding parasite neutralisé sur les conteneurs (`.e-con`/e-flexbox/e-div-block), §7.11 grille + width:auto sur enfants, §7.14 SVG sizing width+min-width+height + display:block, scope descendant, fidélité valeurs maquette (13.5/14/12.5 conservées). ============================================================ */ /* IMPORTANT (§7.5/§7.11) : les bases atomiques (.e-con / .e-div-block-base / .e-flexbox-base) posent padding + display AVEC une spécificité (0,1,0) chargée APRÈS le thème enfant → toutes les règles de layout du footer sont préfixées `.s-ftr ` (0,2,0) pour gagner, racine en `.s-ftr.s-ftr`. Les e-svg ont un style INLINE `width/height:100%` → dimensionner via le wrapper .e-svg-base + `!important` sur le svg. Le logo `s-ftr-logo` est porté par le lui-même. */ /* neutralise le padding 10px parasite des conteneurs atomiques (§7.5, via .e-con) */ .s-ftr .e-con { padding: 0; } /* racine (double classe pour battre le padding parasite du .e-con racine) */ .s-ftr.s-ftr { background: var(--petrole-2, #22383F); color: rgba(255,255,255,.78); padding: 64px 0 28px; display: block; } .s-ftr .s-ftr-wrap { width: 100%; max-width: var(--maxw, 1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* grille 5 colonnes (§7.11 : la grille porte le layout, pas les enfants) */ .s-ftr .s-ftr-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 34px; } /* colonne marque — s-ftr-logo est sur le lui-même */ .s-ftr .s-ftr-brand { display: block; } .s-ftr .s-ftr-logo { display: block; width: 64px; height: 64px; margin-bottom: 16px; } .s-ftr .s-ftr-tagline { font-size: 13.5px; max-width: 30ch; line-height: 1.6; } /* colonnes de liens */ .s-ftr .s-ftr-col { display: block; } .s-ftr .s-ftr-h { display: block; color: #fff; font-family: var(--font-display, "Bricolage Grotesque"), sans-serif; font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; } .s-ftr .s-ftr-list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* line-height 25.6px : reproduit la hauteur de ligne des
  • maquette (25.6px) → avec gap 10 du .s-ftr-list = 36px centre-à-centre entre liens (fidèle maquette, WP était trop serré à 21+10). */ .s-ftr .s-ftr-link { display: inline-flex; font-size: 14px; line-height: 25.6px; color: rgba(255,255,255,.78); text-decoration: none; transition: color .25s; } .s-ftr .s-ftr-link:hover { color: var(--corail-pale, #FFC6AC); } .s-ftr .s-ftr-link-t { font-size: 14px; color: inherit; } /* réseaux sociaux */ .s-ftr .s-ftr-socials { display: flex; gap: 10px; margin-top: 18px; } .s-ftr .s-ftr-social { position: relative; display: block; flex: 0 0 auto; width: 38px; } .s-ftr .s-ftr-social-btn { flex: 0 0 auto; width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; color: #fff; transition: background .25s; } .s-ftr .s-ftr-social-btn:hover, .s-ftr .s-ftr-social.open .s-ftr-social-btn { background: var(--corail-deep, #EA5638); } /* icônes : wrapper .e-svg-base dimensionné + svg forcé (§7.14 : e-svg impose width/height:100% inline) */ .s-ftr .s-ftr-ic { width: 17px; height: 17px; flex: 0 0 auto; display: block; color: #fff; } .s-ftr .s-ftr-ic svg { width: 17px !important; height: 17px !important; min-width: 17px; display: block; } .s-ftr .s-ftr-cic { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; display: block; color: var(--corail-pale, #FFC6AC); } .s-ftr .s-ftr-cic svg { width: 15px !important; height: 15px !important; min-width: 15px; display: block; } /* fill (§7.3/§7.14) : contour par défaut (map/phone/mail/Instagram = stroke), pleins pour FB/YT */ .s-ftr .e-svg-base svg { fill: none; } .s-ftr .s-ftr-ic-fb svg, .s-ftr .s-ftr-ic-yt svg { fill: currentColor; } /* popover social : masqué via opacity/visibility (transition), ouvre vers le HAUT */ .s-ftr .s-ftr-social-pop { position: absolute; bottom: calc(100% + 12px); left: 0; min-width: 178px; background: #fff; border-radius: 14px; padding: 7px; box-shadow: 0 20px 44px -16px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 30; } .s-ftr .s-ftr-social.open .s-ftr-social-pop { opacity: 1; visibility: visible; transform: none; } .s-ftr .s-ftr-pop-h { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--petrole-brume); padding: 7px 12px 5px; } .s-ftr .s-ftr-pop-link { display: block; padding: 9px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--petrole); white-space: nowrap; text-decoration: none; transition: background .2s, color .2s; } .s-ftr .s-ftr-pop-link:hover { background: var(--sable-pale, #F3EFE7); color: var(--corail-deep, #EA5638); } .s-ftr .s-ftr-pop-t { color: inherit; font-size: 14px; font-weight: 600; } /* contact — la ligne pictogramme + texte, commune à l'adresse, au téléphone et à l'email. Ces deux règles reprennent EXACTEMENT les valeurs de `.ftr-line` de la maquette Sébastien (flex, align-items flex-start, gap 9px, line-height 1.5) : rien à y changer. */ .s-ftr .s-ftr-cline { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; font-size: 14px; } .s-ftr .s-ftr-ctext { font-size: 14px; line-height: 1.5; } /* Les 4 pastilles de langue FR/EN/DE/NL ont été RETIRÉES du footer le 2026-09-21 (décision dev, la maquette Sébastien ne les reprend pas). Leurs règles sont supprimées avec elles. `js/footer-langues.js` n'est plus chargé — le fichier est conservé : sa logique (lire les `` publiés par Linguise plutôt que deviner les URLs, et la liste `INDISPONIBLES` des langues déclarées mais non servies) sert de base à la passe « header en mode serré », inscrite à la checklist go-live. */ /* Bouton « Télécharger la brochure » — colonne Contact, sous les pastilles de langue (maquette Sébastien, 2026-09-16). Reprend le traitement des pastilles INACTIVES (.s-ftr-lang : pilule, fond blanc à 8 %, 12 px, gras) en y ajoutant une icône, d'où inline-flex et gap. `width: auto` est nécessaire : la base atomique V4 pose width:100% sur ses conteneurs, ce qui étirerait le bouton sur toute la colonne (piège e-con du design-system). Sélecteurs descendants uniquement — le canvas de l'éditeur enveloppe chaque widget, un `>` casserait à l'édition. */ /* Pleine largeur de la colonne, contenu centré (demande du 2026-09-16 — la première version était à la largeur du contenu). L'espace au-dessus reprend celui des pastilles (18 px). */ .s-ftr .s-ftr-brochure { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 18px; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; transition: background .18s ease; } .s-ftr .s-ftr-brochure:hover, .s-ftr .s-ftr-brochure:focus-visible { background: rgba(255,255,255,.16); } /* Icône à 11 px : calée sur la maquette en RATIO, pas en pixels — la capture reçue est zoomée. Son icône occupe ~0,34 de la hauteur du bouton ; 14 px donnait 0,42, trop gros. `display: block` est ce qui l'ALIGNE avec le texte : un SVG est `inline` par défaut, donc posé sur la baseline, ce qui le décalait de 2 px vers le bas. Le `align-items: center` du bouton n'y suffisait pas — Elementor enveloppe chaque widget, si bien que l'enfant flex est le wrapper, pas le SVG, et le décalage se produisait À L'INTÉRIEUR du wrapper. */ .s-ftr .s-ftr-brochure-ic { display: flex; align-items: center; width: 11px; height: 11px; flex: 0 0 auto; color: #fff; } /* Le `` est DANS le div du widget, et Elementor lui pose `fill="currentColor"` en attribut — ce qui remplirait des tracés dessinés au trait. On rétablit donc le contour, et `display: block` supprime l'espace de baseline responsable du décalage de 2 px. */ .s-ftr .s-ftr-brochure-ic svg { display: block; fill: none; } .s-ftr .s-ftr-brochure-t { font-size: 12px; font-weight: 700; color: #fff; } /* bas de footer */ .s-ftr .s-ftr-bot { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.6); } /* `.s-ftr-legal` ne porte plus que le copyright : les mentions sont passées d'un paragraphe unique à 5 entrées séparées, stylées plus bas sous `.s-ftr-legalbar` (2026-09-21). */ /* ------------------------------------------------------------------ BANDE CONTACT — refonte Sébastien du 2026-09-21 (maquette/footer/). La colonne « Contact » est sortie de la rangée haute (5 → 4 colonnes, valeur portée par le STYLE LOCAL de `.ftr-top-nat`, donc éditable) et remplacée par cette bande pleine largeur : un bloc par village, puis « nous joindre » (email + brochure). ⚠️ Les 21 règles de `maquette/footer/footer.css` écrites en CLASSE SIMPLE perdraient contre les bases atomiques (`.e-con` padding 10px + width 100%, `.e-div-block-base` display block, `.e-flexbox-base` flex-direction row), qui sont aussi à (0,1,0) mais chargées APRÈS le thème. Tout est donc rescopé en `.s-ftr .s-ftr-xxx` — (0,2,0). Aucune valeur de design n'est modifiée, seul le scope. Sélecteurs descendants uniquement : le canvas de l'éditeur enveloppe chaque widget, un `>` ou un `+` y casserait (§7.6). ------------------------------------------------------------------ */ /* `.s-ftr-contact` était le conteneur en colonne de l'ancienne colonne Contact ; il devient la bande. La règle est réécrite, pas doublée. */ .s-ftr .s-ftr-contact { margin-top: clamp(34px,3.6vw,50px); padding-top: clamp(26px,2.8vw,34px); border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 1fr 1fr minmax(250px,.9fr); gap: clamp(22px,2.8vw,40px); align-items: start; } .s-ftr .s-ftr-place { display: flex; flex-direction: column; gap: 7px; } .s-ftr .s-ftr-place-name { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--corail-pale, #FFC6AC); } .s-ftr .s-ftr-cline-tel .s-ftr-ctext { white-space: nowrap; font-variant-numeric: tabular-nums; } .s-ftr .s-ftr-cmail .s-ftr-ctext { word-break: break-word; } /* le conteneur-lien natif qui enveloppe téléphone et email : il n'apporte aucune géométrie propre, seulement l'état de lien. `width: auto` contre la base `.e-con`. */ .s-ftr .s-ftr-clink { display: inline-flex; width: auto; padding: 0; text-decoration: none; color: inherit; transition: color .25s var(--ease); } .s-ftr a.s-ftr-clink:link, .s-ftr a.s-ftr-clink:visited { color: rgba(255,255,255,.84); text-decoration: none; } .s-ftr a.s-ftr-clink:hover, .s-ftr a.s-ftr-clink:focus-visible { color: var(--corail-pale, #FFC6AC); text-decoration: none; } /* colonne « nous joindre » : email puis brochure */ .s-ftr .s-ftr-reach { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* Dans la bande, la brochure reprend la largeur de son contenu — elle occupait toute la colonne Contact, qui n'existe plus. Le reste de son habillage est inchangé (règle plus haut) ; on ne redéclare que ce que le nouveau contexte impose. */ .s-ftr .s-ftr-reach .s-ftr-brochure { width: auto; margin-top: 0; padding: 12px 20px; } /* la maquette met le libellé à `--fs-label` ; l'ancien bouton était à 12 px parce qu'il devait s'aligner sur les pastilles de langue, qui n'existent plus. */ .s-ftr .s-ftr-reach .s-ftr-brochure-t { font-size: var(--fs-label); } /* Sous la tablette, la marque occupe toute la largeur et les 3 colonnes de liens se répartissent dessous — comportement de la maquette (`.ftr-brand { grid-column: 1 / -1 }` sous 1080 px). Le point de rupture est celui d'Elementor (1024) et non le 1080 de la maquette, pour rester aligné sur les variantes du style local qui pilote la grille. */ @media (max-width: 1024px) { .s-ftr .s-ftr-brand { grid-column: 1 / -1; } } /* barre légale : 5 entrées séparées, à la place du paragraphe unique d'avant. Les libellés sans cible en production (« Gérer mes cookies », chantier CMP) restent du texte : on ne fabrique pas un lien vers nulle part. */ /* `width: auto` est indispensable : la base `.e-con` pose `width: 100%`, la barre prenait donc toute la largeur de `.s-ftr-bot` et poussait le copyright sur une 2e ligne — le `flex-wrap` du bas masquait la cause. Mesuré : barre du bas à 81 px de haut au lieu de 40. */ .s-ftr .s-ftr-legalbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: auto; } .s-ftr .s-ftr-legal-link { display: inline-flex; width: auto; padding: 0; text-decoration: none; } .s-ftr .s-ftr-legal-t { font-size: 12.5px; color: inherit; } .s-ftr .s-ftr-sep { display: inline-block; color: rgba(255,255,255,.26); font-size: 12.5px; } /* Couleur déclarée explicitement : le reset Hello Elementor pose `#c36` sur les liens, piège déjà rencontré sur les pastilles de langue et sur l'ancienne barre légale. */ .s-ftr .s-ftr-legalbar a:link, .s-ftr .s-ftr-legalbar a:visited { color: inherit; text-decoration: none; } .s-ftr .s-ftr-legalbar a:hover, .s-ftr .s-ftr-legalbar a:focus-visible { color: #fff; text-decoration: underline; } .s-ftr .s-ftr-legal-off { color: rgba(255,255,255,.6); font-size: 12.5px; } /* responsive : la rangée haute reste pilotée par le style local du document (4 → 2 → 1 colonne). La bande contact suit la maquette : 3 → 2 colonnes, puis 1. */ @media (max-width: 1080px) { .s-ftr .s-ftr-contact { grid-template-columns: 1fr 1fr; } .s-ftr .s-ftr-reach { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); } } @media (max-width: 700px) { .s-ftr .s-ftr-contact { grid-template-columns: 1fr; } .s-ftr .s-ftr-reach .s-ftr-brochure { width: 100%; justify-content: center; } } @media (max-width: 900px) { .s-ftr .s-ftr-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .s-ftr .s-ftr-top { grid-template-columns: 1fr; } } /* ============================================================ HERO — animations (bloc home/hero-selector, doc #47 + inline page 65) Maquette : index.html:126 `.heroD` / styles.css:102-140,321-322,424-428 + script.js:203-220,245. Scopé `.s-hero`, spécificité `.s-hero .X` (bat les bases atomiques Elementor). LOT H1 = entrées au chargement · H2 = ken burns fond défaut. (H3 hover / H4 swap / H5 parallaxe suivent.) ============================================================ */ /* H1 — entrées au chargement (maquette `.load` + `@keyframes rise`, délais l1..l4). */ @keyframes s-hero-rise { to { opacity: 1; transform: none; } } .s-hero .s-hero-eyebrow, .s-hero .s-hero-h1, .s-hero .s-hero-sub, .s-hero .s-hero-dock-hint { opacity: 0; transform: translateY(22px); animation: s-hero-rise 1s var(--ease, cubic-bezier(.2,.7,.2,1)) forwards; } .s-hero .s-hero-eyebrow { animation-delay: .15s; } /* l1 */ .s-hero .s-hero-h1 { animation-delay: .35s; } /* l2 */ .s-hero .s-hero-sub, .s-hero .s-hero-dock-hint { animation-delay: .55s; } /* l3 */ /* .s-hero-cards (l4) : entrée SANS transform résiduel — c'est un ANCÊTRE des cartes verre, et un transform (même la matrice identité laissée par `animation … forwards → transform:none`) casse le backdrop-filter des descendants. On anime DEPUIS l'état décalé vers l'état de base (`backwards`, pas `forwards`) : après l'animation, l'élément reprend sa base = AUCUN transform → le verre s'affiche. */ @keyframes s-hero-rise-cards { from { opacity: 0; transform: translateY(22px); } } .s-hero .s-hero-cards { animation: s-hero-rise-cards 1s var(--ease, cubic-bezier(.2,.7,.2,1)) .78s backwards; } /* H2/H4 — ken burns + zoom des fonds, GATÉS par `.is-active` (toggle par js/hero.js au swap). Deux comportements distincts, fidèles maquette (styles.css:107-109) : - fond DÉFAUT : kenburns = zoom OUT scale 1.12 -> 1 (16s), rejoué à chaque (ré)activation (le sélecteur .is-active retire/ré-applique l'animation → relance au retour sur défaut) ; - fonds VILLAGE : zoom IN doux scale 1 -> 1.04 en 6s à l'activation (transition). */ @keyframes s-hero-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } } .s-hero .s-hero-bg-default.is-active .s-hero-bg-default-img { animation: s-hero-kenburns 16s ease-out forwards; } .s-hero .s-hero-bg-oasis-img, .s-hero .s-hero-bg-gassin-img { transform: scale(1); transition: transform 6s ease-out; } .s-hero .s-hero-bg-oasis.is-active .s-hero-bg-oasis-img, .s-hero .s-hero-bg-gassin.is-active .s-hero-bg-gassin-img { transform: scale(1.04); } /* H3 — hover des cartes (maquette .dcard:hover, .dgo, .cta ; styles.css:121-140). `.s-hero-dgo` = CTA « Voir le village » ajouté au markup (masqué au repos, révélé au survol). Classe partagée `.s-hero-card` (oasis+gassin). Spécificité `.s-hero .X` pour battre les styles d'élément. */ .s-hero .s-hero-card { transition: background .4s, opacity .4s, box-shadow .4s, transform .4s; cursor: pointer; } /* #2 verre dépoli : la base atomique ne posait que blur(22px) ; ajout de saturate(1.4) (maquette .dcard). */ .s-hero .s-hero-card { -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); } .s-hero .s-hero-card [class$="-thumb-img"] { transition: transform .9s var(--ease); } .s-hero .s-hero-card:hover [class$="-thumb-img"] { transform: scale(1.05); } .s-hero .s-hero-card:hover { background: rgba(255,255,255,.22); box-shadow: 0 32px 64px -26px rgba(0,0,0,.8); transform: translateY(-3px); } /* atténuation de l'autre carte au survol (maquette .cards:hover .dcard:not(:hover)) */ .s-hero .s-hero-cards:hover .s-hero-card:not(:hover) { opacity: .58; } /* CTA révélé (maquette .dgo : max-height 0 -> 60 + opacity + margin-top) */ /* padding:0 : neutralise le padding parasite §7.5 du conteneur atomique — sinon le dgo garde ~20px de hauteur même replié (décale le CTA à droite + fausse le centrage vertical du bloc texte, cf. #1/#4a). */ .s-hero .s-hero-dgo { max-height: 0; opacity: 0; overflow: hidden; padding: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .45s var(--ease); } /* #4b : étoiles en line-height 1 (maquette .dbody .st{line-height:1}) — sinon 24px ajoutait ~6px sous les étoiles, gonflant l'espace étoiles↔CTA. */ .s-hero .s-hero-card-oasis-st, .s-hero .s-hero-card-gassin-st { line-height: 1; } .s-hero .s-hero-card:hover .s-hero-dgo { max-height: 60px; opacity: 1; margin-top: 14px; } /* pastille CTA corail (maquette .dock .cta) */ /* width:auto : `.e-con` atomique impose width:100% (§7.5) → le CTA s'étirait ; auto = il épouse le texte. white-space:nowrap : « Voir le village » sur une ligne (sinon le label s'enroule dans la carte étroite en mobile). */ .s-hero .s-hero-dgo-cta { display: inline-flex; width: auto; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 11px 12px 11px 20px; background: var(--corail-deep, #EA5638); color: #fff; } .s-hero .s-hero-dgo-label { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; } .s-hero .s-hero-dgo-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; transition: background .35s var(--ease); color: #fff; } /* dimensionner le WRAPPER e-svg (.e-svg-base) et non seulement le : sinon le wrapper garde une hauteur ~65px et la flèche se place en haut, hors du cercle (même piège §7.14 que les icônes footer). */ .s-hero .s-hero-dgo-svg { width: 15px; height: 15px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .s-hero .s-hero-dgo-svg svg { width: 15px !important; height: 15px !important; min-width: 15px; display: block; fill: none; stroke: currentColor; transition: transform .4s var(--ease); } .s-hero .s-hero-card:hover .s-hero-dgo-ic { background: #fff; color: var(--corail-deep, #EA5638); } .s-hero .s-hero-card:hover .s-hero-dgo-svg svg { transform: rotate(-45deg); } /* mobile ≤900 : pas de hover tactile → CTA visible en permanence (maquette styles.css:333,348). */ @media (max-width: 900px) { .s-hero .s-hero-dgo { max-height: 80px; opacity: 1; margin-top: 12px; } } /* H4 — swap du fond : crossfade opacity (maquette .bg{transition:opacity 1s}). Le toggle d'opacité est piloté par js/hero.js (inline style) ; la transition vit ici. */ .s-hero .s-hero-bgs > * { transition: opacity 1s var(--ease); } /* H5 — parallaxe : le scale du conteneur des fonds est piloté par js/hero.js. On garantit le clip. */ .s-hero { overflow: hidden; } .s-hero .s-hero-bgs { will-change: transform; } /* Accessibilité — respect de prefers-reduced-motion (maquette styles.css:426-428). */ @media (prefers-reduced-motion: reduce) { .s-hero .s-hero-eyebrow, .s-hero .s-hero-h1, .s-hero .s-hero-sub, .s-hero .s-hero-dock-hint, .s-hero .s-hero-cards { opacity: 1 !important; transform: none !important; animation: none !important; } .s-hero .s-hero-bg-default.is-active .s-hero-bg-default-img, .s-hero .s-hero-bg-oasis-img, .s-hero .s-hero-bg-gassin-img, .s-hero .s-hero-bg-oasis.is-active .s-hero-bg-oasis-img, .s-hero .s-hero-bg-gassin.is-active .s-hero-bg-gassin-img { animation: none !important; transform: none !important; transition: none !important; } } /* ============================================================ MENU MOBILE — visage VILLAGE (doc 64, overlay .s-hdr-mobile.s-hdr-mm-v) Maquette V28 : script.js isVillage + styles.css:367-424. Construit EN DUR (dette dynamique). Scopé `.s-hdr-mm-v` (marqueur sur le conteneur) → n'affecte pas l'overlay marque. Infra open/close/scroll-lock/focus-trap = LOT 2c (partagé). Nouveau : logo head, carte « Vous êtes ici » + accordéon (grid-template-rows), badge, chevron, liens village. ============================================================ */ /* §7.5 : neutralise le padding parasite (10px) des conteneurs atomiques qui ne doivent PAS en avoir (audit getComputedStyle). Les conteneurs à padding voulu (head/scroll/card/switch/link/bar/cta) le redéclarent avec la même spécificité ci-dessous → ils gagnent (ordre source). */ .s-hdr-mm-v .s-hdr-mm-logo, .s-hdr-mm-v .s-hdr-mm-ct, .s-hdr-mm-v .s-hdr-mm-nm, .s-hdr-mm-v .s-hdr-mm-go, .s-hdr-mm-v .s-hdr-mm-chev, .s-hdr-mm-v .s-hdr-mm-links, .s-hdr-mm-v .s-hdr-mm-util, .s-hdr-mm-v .s-hdr-mm-langs, .s-hdr-mm-v .s-hdr-mm-cta-ico { padding: 0; } .s-hdr-mm-v .s-hdr-mm-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(20px, calc((100% - 560px)/2)); background: rgba(251,250,246,.985); transition: box-shadow .25s; } .s-hdr-mm-v .s-hdr-mm-head.scrolled { box-shadow: 0 1px 0 rgba(34,56,63,.1); } .s-hdr-mm-v .s-hdr-mm-logo { display: flex; } .s-hdr-mm-v .s-hdr-mm-logo-img { width: 46px; height: 46px; object-fit: contain; } .s-hdr-mm-v .s-hdr-mm-close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 0; background: rgba(44,74,82,.08); color: var(--petrole,#2C4A52); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s; padding: 0; } .s-hdr-mm-v .s-hdr-mm-close:hover { background: rgba(44,74,82,.16); } .s-hdr-mm-v .s-hdr-mm-close-svg { width: 20px; height: 20px; flex: 0 0 auto; display: flex; } .s-hdr-mm-v .s-hdr-mm-close-svg svg { width: 20px !important; height: 20px !important; stroke: currentColor; fill: none; } .s-hdr-mm-v .s-hdr-mm-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 22px 28px; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; } /* cartes (switch + destinations) */ .s-hdr-mm-v .s-hdr-mm-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--r-card,24px); box-shadow: 0 16px 40px -26px rgba(34,56,63,.5), 0 0 0 1px rgba(34,56,63,.06); padding: 15px 17px; margin-bottom: 10px; text-decoration: none; width: 100%; text-align: left; border: 0; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .s-hdr-mm-v a.s-hdr-mm-card:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); } .s-hdr-mm-v .s-hdr-mm-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .s-hdr-mm-v .s-hdr-mm-nm { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--font-display,"Bricolage Grotesque"),sans-serif; font-weight: 600; font-size: var(--fs-h4); color: var(--petrole,#2C4A52); line-height: 1.15; } .s-hdr-mm-v .s-hdr-mm-nm-t { font-family: var(--font-display,"Bricolage Grotesque"),sans-serif; font-weight: 600; } .s-hdr-mm-v .s-hdr-mm-st { font-size: var(--fs-meta); color: var(--corail,#FB6F52); letter-spacing: 1px; font-weight: 700; } .s-hdr-mm-v .s-hdr-mm-meta { font-size: var(--fs-meta); color: var(--petrole-brume,#5B7B82); } .s-hdr-mm-v .s-hdr-mm-go { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--sable-pale,#F3EFE7); color: var(--corail-deep,#EA5638); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), color .3s var(--ease); } .s-hdr-mm-v .s-hdr-mm-go-svg { width: 18px; height: 18px; flex: 0 0 auto; display: flex; } .s-hdr-mm-v .s-hdr-mm-go-svg svg { width: 18px !important; height: 18px !important; stroke: currentColor; stroke-width: 2.2; fill: none; } .s-hdr-mm-v a.s-hdr-mm-card:hover .s-hdr-mm-go { background: var(--corail-deep,#EA5638); color: #fff; } /* badge « Vous êtes ici » + chevron du switch */ .s-hdr-mm-v .s-hdr-mm-badge { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; background: var(--petrole-brume,#5B7B82); color: #fff; white-space: nowrap; } .s-hdr-mm-v .s-hdr-mm-badge.here { background: var(--corail-deep,#EA5638); } .s-hdr-mm-v .s-hdr-mm-chev { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--sable-pale,#F3EFE7); color: var(--petrole,#2C4A52); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease); } .s-hdr-mm-v .s-hdr-mm-chev-svg { width: 17px; height: 17px; flex: 0 0 auto; display: flex; } .s-hdr-mm-v .s-hdr-mm-chev-svg svg { width: 17px !important; height: 17px !important; stroke: currentColor; stroke-width: 2.4; fill: none; } .s-hdr-mm-v .s-hdr-mm-switch-btn[aria-expanded="true"] .s-hdr-mm-chev { transform: rotate(180deg); } /* accordéon « changer de village » (grid-template-rows 0fr→1fr) */ /* padding:0 (§7.5) sur les 2 conteneurs de l'accordéon : sinon le padding parasite (10px ×2 ×2 = 40px) empêche le repli à 0 (la technique grid-rows exige un conteneur interne sans padding/marge/bordure). */ .s-hdr-mm-v .s-hdr-mm-disclose { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows .35s var(--ease); } .s-hdr-mm-v .s-hdr-mm-disclose.open { grid-template-rows: 1fr; } .s-hdr-mm-v .s-hdr-mm-disclose-in { overflow: hidden; min-height: 0; padding: 0; } /* liens village à plat (chevron ::after) */ .s-hdr-mm-v .s-hdr-mm-links { display: flex; flex-direction: column; } .s-hdr-mm-v .s-hdr-mm-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(34,56,63,.08); text-decoration: none; transition: color .2s, padding-left .25s var(--ease); } .s-hdr-mm-v .s-hdr-mm-link:last-child { border-bottom: 0; } .s-hdr-mm-v .s-hdr-mm-link-t { font-family: var(--font-display,"Bricolage Grotesque"),sans-serif; font-weight: 700; font-size: clamp(21px,5.4vw,26px); color: var(--petrole,#2C4A52); } .s-hdr-mm-v .s-hdr-mm-link::after { content: ""; width: 22px; height: 22px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C4A52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .32; transition: opacity .2s, transform .25s var(--ease); } .s-hdr-mm-v .s-hdr-mm-link:hover { padding-left: 6px; } .s-hdr-mm-v .s-hdr-mm-link:hover .s-hdr-mm-link-t { color: var(--corail-deep,#EA5638); } .s-hdr-mm-v .s-hdr-mm-link:hover::after { opacity: .7; transform: translateX(3px); } /* utilitaires : langue + mention */ .s-hdr-mm-v .s-hdr-mm-util { margin-top: 18px; } .s-hdr-mm-v .s-hdr-mm-langs { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .s-hdr-mm-v .s-hdr-mm-lang-lab { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petrole-brume,#5B7B82); margin-right: 4px; } .s-hdr-mm-v .s-hdr-mm-lang { font-size: var(--fs-label); font-weight: 700; min-height: 40px; padding: 8px 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--sable-pale,#F3EFE7); color: var(--petrole,#2C4A52); cursor: pointer; transition: background .2s, color .2s; } .s-hdr-mm-v .s-hdr-mm-lang.on { background: var(--corail-deep,#EA5638); color: #fff; } .s-hdr-mm-v .s-hdr-mm-disclaimer { font-size: var(--fs-micro); color: var(--petrole-brume,#5B7B82); margin-top: 14px; } /* barre bas : Réserver (classes globales btn) + Nous contacter */ .s-hdr-mm-v .s-hdr-mm-bar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; padding: 14px max(20px, calc((100% - 560px)/2)) calc(14px + env(safe-area-inset-bottom)); background: var(--sable-pale,#F3EFE7); box-shadow: 0 -1px 0 rgba(34,56,63,.1); } .s-hdr-mm-v .s-hdr-mm-cta { flex: 1.35; justify-content: center; min-height: 54px; } /* flèche Réserver : fond TRANSPARENT au repos (maquette .btn .ico{background:transparent}), pastille blanche seulement au survol. (Corrige la confusion avec le style .dock .cta .ic du hero qui a un fond.) */ .s-hdr-mm-v .s-hdr-mm-cta-ico { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; transition: background .35s var(--ease), color .35s var(--ease); } .s-hdr-mm-v .s-hdr-mm-cta:hover .s-hdr-mm-cta-ico { background: #fff; color: var(--corail-deep, #EA5638); } .s-hdr-mm-v .s-hdr-mm-cta-arrow { width: 15px; height: 15px; flex: 0 0 auto; display: flex; } .s-hdr-mm-v .s-hdr-mm-cta-arrow svg { width: 15px !important; height: 15px !important; stroke: currentColor; fill: none; } .s-hdr-mm-v .s-hdr-mm-contact { flex: 1; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; font-size: var(--fs-label); color: var(--petrole,#2C4A52); background: #fff; box-shadow: 0 0 0 1px rgba(34,56,63,.06); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s, background .25s, color .25s; } .s-hdr-mm-v .s-hdr-mm-contact:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -26px rgba(34,56,63,.5); background: var(--petrole,#2C4A52); color: #fff; } /* ============================================================ EXPERIENCE — bloc home/experience (page 65 ; collage « scatter ») Maquette : index.html:164 / styles.css:197-210 + responsive 337-341. Collage absolu = CSS thème custom (§7.2). Tout scopé `.s-exp` (spécificité 0,2,0 pour battre les défauts atomiques : width:100%, position, min-width). §7.5 préventif en tête. ============================================================ */ /* §7.5 préventif : padding parasite neutralisé d'emblée sur TOUS les conteneurs du bloc (0,2,0). ⚠️ NE PAS utiliser `:not(.btn)` : `:not()` ajoute la spécificité de son argument → le reset passe à (0,3,0) et écrase les règles (0,2,0) qui reposent un padding voulu (wrap, fllab). On garde le blanket et on RÉ-AJOUTE explicitement le padding du bouton plus bas (même spécificité, après → gagne). */ .s-exp .e-con { padding: 0; } /* section + wrap */ /* section : padding vertical maquette (.section{padding:clamp(64,9vw,120) 0} + override bas de l'inline style=padding-bottom:clamp(24,3vw,48)). Double classe pour battre le padding parasite du .e-con racine. */ .s-exp.s-exp { display: block; padding: clamp(64px,9vw,120px) 0 clamp(24px,3vw,48px); } .s-exp .s-exp-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* canevas collage (position:relative, hauteur fixe maquette 840px) */ .s-exp .s-exp-scatter { position: relative; height: 840px; max-width: 1080px; margin: 0 auto; } /* bloc texte centré au milieu du collage */ .s-exp .s-exp-ctext { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(450px,82%); text-align: center; z-index: 5; } .s-exp .s-exp-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--corail-deep); } .s-exp .s-exp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--corail); flex: 0 0 auto; } .s-exp .s-exp-h2 { font-size: var(--fs-h2); color: var(--petrole); } .s-exp .s-exp-p { margin: 14px 0 22px; color: var(--petrole-brume); font-size: 16px; } /* bouton : ré-ajout du padding (écrasé par le blanket .e-con reset), + ico 26px et flèche 16px (wrapper e-svg §7.14 : sinon l'ico grossit à ~65px et la flèche se décale au-dessus du texte). */ .s-exp .s-exp-btn { width: auto; margin: 0 auto; padding: 13px 16px 13px 24px; white-space: nowrap; } .s-exp .s-exp-btn-t { white-space: nowrap; } .s-exp .s-exp-btn-ico { width: 26px; height: 26px; min-width: 26px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .s-exp .s-exp-btn-arrow { width: 16px; height: 16px; flex: 0 0 auto; display: flex; } /* vignettes — position:absolute, positions/tailles/rotations EN DUR (maquette) */ .s-exp .s-exp-fl { position: absolute; z-index: 2; } .s-exp .s-exp-fl-1 { left: 0; top: 44px; width: 230px; height: 290px; transform: rotate(-3deg); } .s-exp .s-exp-fl-2 { left: 356px; top: -6px; width: 182px; height: 120px; transform: rotate(-1.5deg); } .s-exp .s-exp-fl-3 { left: 600px; top: -12px; width: 166px; height: 124px; transform: rotate(2deg); } .s-exp .s-exp-fl-4 { left: 862px; top: 18px; width: 206px; height: 168px; transform: rotate(2.5deg); } .s-exp .s-exp-fl-5 { left: 22px; top: 382px; width: 198px; height: 198px; transform: rotate(2deg); } .s-exp .s-exp-fl-6 { left: 856px; top: 386px; width: 222px; height: 288px; transform: rotate(-2.5deg); } .s-exp .s-exp-fl-7 { left: 78px; top: 626px; width: 190px; height: 150px; transform: rotate(-2deg); } .s-exp .s-exp-fl-8 { left: 430px; top: 660px; width: 206px; height: 152px; transform: rotate(2deg); } .s-exp .s-exp-fl-9 { left: 704px; top: 644px; width: 188px; height: 150px; transform: rotate(-2deg); } /* photo : overflow:hidden UNIQUEMENT ici (pas sur .s-exp-fl, qui porte le label débordant, cf. vigilance #3) */ .s-exp .s-exp-ph { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px -26px rgba(34,56,63,.5); transition: box-shadow .5s; } .s-exp .s-exp-ph-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .s-exp .s-exp-fl:hover { z-index: 7; } .s-exp .s-exp-fl:hover .s-exp-ph { box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); } .s-exp .s-exp-fl:hover .s-exp-ph-img { transform: scale(1.05); } /* étiquette (pastille + libellé), débordant le coin de la vignette (−13px) */ /* width:fit-content : la base atomique impose width:100% (§7.5) → la pastille s'étirait à la largeur de la vignette au lieu d'épouser le texte. fit-content = elle s'arrête après le contenu (fidèle maquette). */ .s-exp .s-exp-fllab { position: absolute; z-index: 8; width: fit-content; background: #fff; border-radius: 999px; box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); padding: 7px 13px; font-size: 11.5px; font-weight: 700; color: var(--petrole); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .s-exp .s-exp-lab-bl { left: 12px; bottom: -13px; } .s-exp .s-exp-lab-br { right: 12px; bottom: -13px; } .s-exp .s-exp-lab-tl { left: 12px; top: -13px; } .s-exp .s-exp-lab-tr { right: 12px; top: -13px; } /* min-width:7px : la base atomique impose min-width:30px (§7.5) → sans ça la pastille est un ovale 30×7. */ .s-exp .s-exp-dot { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; flex: 0 0 auto; } .s-exp .s-exp-dot-lagune { background: var(--lagune); } .s-exp .s-exp-dot-olivier { background: var(--olivier); } .s-exp .s-exp-dot-corail { background: var(--corail); } .s-exp .s-exp-dot-ambre { background: var(--ambre); } /* flèche du bouton (§7.14) */ .s-exp .s-exp-btn-arrow svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; } /* responsive ≤900 : le collage absolu s'effondre en grille 2 colonnes (maquette styles.css:337-341) */ @media (max-width: 900px) { .s-exp .s-exp-scatter { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .s-exp .s-exp-ctext { position: static; transform: none; grid-column: 1 / -1; width: auto; margin: 6px 0; } .s-exp .s-exp-fl { position: relative !important; inset: auto !important; width: auto !important; height: 200px !important; transform: none !important; } .s-exp .s-exp-fllab { top: auto; bottom: 12px; left: 12px; right: auto; } } /* ============================================================ REASSURANCE — bloc home/reassurance (page 65 ; grille « atouts ») Maquette : index.html:187 / styles.css:178-185 + responsive 334 (≤900) / 352 (≤560). Scopé `.s-reassur`. §7.5 préventif d'emblée. Cartes #fff sur body --lumiere (crème). ============================================================ */ /* §7.5 préventif : padding parasite neutralisé (PAS de :not, piège spécificité 0,3,0). */ .s-reassur .e-con { padding: 0; } /* section : padding vertical maquette (.section{clamp(64,9vw,120) 0} + inline padding-top clamp(8,2vw,24)). Double classe pour battre le padding parasite du .e-con racine. */ .s-reassur.s-reassur { display: block; padding: clamp(8px,2vw,24px) 0 clamp(64px,9vw,120px); } .s-reassur .s-reassur-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* grille 3 colonnes */ .s-reassur .s-reassur-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-grid,20px); } /* carte : blanc, radius 20, ombre douce, lévitation au hover */ .s-reassur .s-reassur-card { background: #fff; border-radius: 20px; padding: 26px 24px; box-shadow: 0 16px 40px -26px rgba(34,56,63,.5); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .s-reassur .s-reassur-card:hover { transform: translateY(-5px); box-shadow: 0 30px 70px -30px rgba(34,56,63,.6); } /* carré d'icône 48px — min-width forcé (§7.5 : base atomique min-width:30px déformerait). Bascule au hover. */ .s-reassur .s-reassur-ic { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; background: var(--sable-pale,#F3EFE7); color: var(--petrole,#2C4A52); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: background .35s var(--ease), color .35s; } /* wrapper e-svg dimensionné (§7.14) + fill:none (les 6 icônes sont en stroke:currentColor → couleur héritée du parent). */ .s-reassur .s-reassur-ic-svg { width: 24px; height: 24px; flex: 0 0 auto; display: flex; } .s-reassur .s-reassur-ic-svg svg { width: 24px !important; height: 24px !important; fill: none; stroke: currentColor; display: block; } .s-reassur .s-reassur-card:hover .s-reassur-ic { background: var(--corail-deep,#EA5638); color: #fff; } /* titre + texte */ .s-reassur .s-reassur-h4 { color: var(--petrole,#2C4A52); font-size: 16.5px; letter-spacing: -.01em; } .s-reassur .s-reassur-p { font-size: 13px; color: var(--petrole-brume,#5B7B82); margin-top: 7px; line-height: 1.5; } /* responsive : 3 → 2 col (≤900) → 1 col (≤560) */ @media (max-width: 900px) { .s-reassur .s-reassur-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .s-reassur .s-reassur-grid { grid-template-columns: 1fr; } } /* ===================== home/hebergements-teaser (s-hbt) + composant carte (s-hcard) ===================== */ /* §7.5 préventif : neutralise padding + width:100% parasites ; ré-ajout explicite ensuite (scopé .s-hbt = spécificité 0,2,0). */ .s-hbt .e-con { padding: 0; width: auto; } .s-hbt .e-div-block-base { min-width: 0; } .s-hbt p { margin: 0; } /* section (fond sable-pale = .section.alt) + wrap. `.s-hbt.s-hbt` (classe doublée = 0,2,0) bat les règles atomiques .e-con (padding logique + display:var(--font-display)) ; display:block pour que le wrap remplisse la largeur (pattern éprouvé s-exp). */ .s-hbt.s-hbt { display: block; padding: clamp(64px,9vw,120px) 0; background: var(--sable-pale,#F3EFE7); } .s-hbt .s-hbt-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* chapeau */ .s-hbt .s-hbt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 42px; } .s-hbt .s-hbt-head .eyebrow { margin: 0 0 16px; } .s-hbt .s-hbt-h2 { font-size: var(--fs-h2); max-width: 18ch; } .s-hbt .s-hbt-lead { font-size: var(--fs-lead); color: var(--petrole-brume,#5B7B82); max-width: 54ch; margin-top: 4px; } /* grille auto-fit 3 → 2 → 1 (par largeur, comme la maquette) */ .s-hbt .s-hbt-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: var(--gap-grid,20px); } /* CTA (réutilise .btn .btn--outline global ; ré-ajout padding .btn car neutralisé par le reset) */ .s-hbt .s-hbt-cta { display: flex; justify-content: center; margin-top: clamp(16px,2.2vw,26px); } .s-hbt .btn { padding: 13px 16px 13px 24px; } .s-hbt .s-hbt-cta-ico { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; } .s-hbt .s-hbt-cta-ico-svg { width: 16px; height: 16px; flex: 0 0 auto; display: flex; } .s-hbt .s-hbt-cta-ico-svg svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; display: block; } /* ---- carte s-hcard (composant réutilisable : teaser + future archive) ---- */ .s-hbt .s-hcard { position: relative; display: block; width: auto; aspect-ratio: 5/6; border-radius: var(--r-card,24px); overflow: hidden; box-shadow: var(--shadow-soft,0 16px 40px -26px rgba(34,56,63,.5)); isolation: isolate; text-decoration: none; color: #fff; transition: transform .45s var(--ease), box-shadow .45s; } .s-hbt .s-hcard:hover { transform: translateY(-7px); box-shadow: var(--shadow-card,0 30px 70px -30px rgba(34,56,63,.6)); } /* image plein cadre + zoom au hover (la classe est sur le lui-même : e-image-base s-hcard-img) */ .s-hbt .s-hcard-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .s-hbt .s-hcard:hover .s-hcard-img { transform: scale(1.06); } /* scrim dégradé */ .s-hbt .s-hcard-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,27,32,.30) 0%, rgba(16,27,32,0) 30%, rgba(16,27,32,.06) 50%, rgba(14,24,28,.85) 100%); } /* pastille village (haut) — ⚠️ §7.13/§7.17 : backdrop-filter retombe pendant le hover (transform ancêtre) ; fidèle maquette, fond blanc 92% reste lisible. */ .s-hbt .s-hcard-top { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: flex-end; z-index: 2; } .s-hbt .s-hcard-vpill { width: fit-content; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--petrole,#2C4A52); font-weight: 700; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; } .s-hbt .s-hcard-st { color: var(--corail,#FB6F52); letter-spacing: 1px; } /* infos (bas) */ .s-hbt .s-hcard-info { position: absolute; left: 17px; right: 17px; bottom: 17px; width: auto; z-index: 2; color: #fff; padding-right: 56px; } .s-hbt .s-hcard-h3 { color: #fff; font-size: var(--fs-h3); line-height: 1.08; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .s-hbt .s-hcard-specs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.96); text-shadow: 0 1px 8px rgba(0,0,0,.5); } .s-hbt .s-hcard-mi { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .s-hbt .s-hcard-mi-svg { width: 15px; height: 15px; flex: 0 0 auto; display: flex; } .s-hbt .s-hcard-mi-svg svg { width: 15px !important; height: 15px !important; fill: none; stroke: currentColor; display: block; } .s-hbt .s-hcard-dot { width: 3px; height: 3px; min-width: 3px; border-radius: 50%; background: rgba(255,255,255,.65); flex: 0 0 auto; } /* équipements */ .s-hbt .s-hcard-equip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; } .s-hbt .s-hcard-chip { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: rgba(255,255,255,.17); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.40); display: flex; align-items: center; justify-content: center; color: #fff; } .s-hbt .s-hcard-chip-svg { width: 17px; height: 17px; flex: 0 0 auto; display: flex; } .s-hbt .s-hcard-chip-svg svg { width: 17px !important; height: 17px !important; fill: none; stroke: currentColor; display: block; } /* pastille flèche (décorative, coin bas-droit) + bascule au hover */ .s-hbt .s-hcard-circ { position: absolute; right: 17px; bottom: 17px; z-index: 3; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: #fff; color: var(--petrole,#2C4A52); display: flex; align-items: center; justify-content: center; transition: background .35s var(--ease), color .35s; } .s-hbt .s-hcard-circ-svg { width: 18px; height: 18px; flex: 0 0 auto; display: flex; } .s-hbt .s-hcard-circ-svg svg { width: 18px !important; height: 18px !important; fill: none; stroke: currentColor; display: block; transition: transform .4s var(--ease); } .s-hbt .s-hcard:hover .s-hcard-circ { background: var(--corail-deep,#EA5638); color: #fff; } .s-hbt .s-hcard:hover .s-hcard-circ-svg svg { transform: rotate(-45deg); } /* ===================== home/region-teaser (s-rgt) + composant tuile (s-rtile) ===================== */ /* §7.5 préventif : reset padding + width parasites ; ré-ajout explicite (scopé 0,2,0). */ .s-rgt .e-con { padding: 0; width: auto; } .s-rgt .e-div-block-base { min-width: 0; } .s-rgt p { margin: 0; } /* section (fond crème = .section sans .alt) : padding-bottom réduit. `.s-rgt.s-rgt` (0,2,0) + block. */ .s-rgt.s-rgt { display: block; padding: clamp(64px,9vw,120px) 0 clamp(24px,3.5vw,48px); } .s-rgt .s-rgt-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* chapeau */ .s-rgt .s-rgt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 42px; } .s-rgt .s-rgt-head .eyebrow { margin: 0 0 16px; } .s-rgt .s-rgt-h2 { font-size: var(--fs-h2); max-width: 18ch; } .s-rgt .s-rgt-lead { font-size: var(--fs-lead); color: var(--petrole-brume,#5B7B82); max-width: 54ch; margin-top: 4px; } /* grille 4 → 2 (≤900) → 1 (≤560) */ .s-rgt .s-rgt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-grid,20px); } /* CTA (réutilise .btn .btn--outline ; lien e-flexbox → arbre correct ; wrapper e-svg dimensionné §7.14) */ .s-rgt .s-rgt-cta { display: flex; justify-content: center; margin-top: clamp(16px,2.2vw,26px); } .s-rgt .btn { padding: 13px 16px 13px 24px; } .s-rgt .s-rgt-cta-ico { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; } .s-rgt .s-rgt-cta-ico-svg { width: 16px; height: 16px; flex: 0 0 auto; display: flex; } .s-rgt .s-rgt-cta-ico-svg svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; display: block; } /* ---- tuile s-rtile (composant réutilisable : teaser + future page région) — NON cliquable (fidèle) ---- */ .s-rgt .s-rtile { position: relative; width: auto; aspect-ratio: 3/4; border-radius: var(--r-card,24px); overflow: hidden; box-shadow: var(--shadow-soft,0 16px 40px -26px rgba(34,56,63,.5)); isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .s-rgt .s-rtile:hover { transform: translateY(-5px); box-shadow: var(--shadow-card,0 30px 70px -30px rgba(34,56,63,.6)); } /* image plein cadre + zoom hover (classe sur le e-image-base) */ .s-rgt .s-rtile-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .s-rgt .s-rtile:hover .s-rtile-img { transform: scale(1.08); } /* overlay dégradé */ .s-rgt .s-rtile-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,27,32,.26) 0%, rgba(16,27,32,0) 34%, rgba(16,27,32,.05) 54%, rgba(14,24,28,.86) 100%); } /* contenu (bas) */ .s-rgt .s-rtile-rc { position: absolute; left: 18px; right: 18px; bottom: 18px; width: auto; z-index: 2; color: #fff; padding-right: 42px; } .s-rgt .s-rtile-h4 { color: #fff; font-size: var(--fs-h4); line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .s-rgt .s-rtile-rd { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.5); } .s-rgt .s-rtile-rd-svg { width: 14px; height: 14px; flex: 0 0 auto; display: flex; } .s-rgt .s-rtile-rd-svg svg { width: 14px !important; height: 14px !important; fill: none; stroke: currentColor; display: block; } /* badge hover décoratif — repris VERBATIM de la maquette (styles.css:243-244), data-URI flèche ↗ */ .s-rgt .s-rtile::after { content: ""; position: absolute; right: 15px; bottom: 15px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background-color: var(--corail-deep,#EA5638); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M9%207h8v8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 17px; box-shadow: 0 8px 20px -8px rgba(234,86,56,.7); opacity: 0; transform: translateY(8px) scale(.86); transition: opacity .4s var(--ease), transform .45s var(--ease); } .s-rgt .s-rtile:hover::after { opacity: 1; transform: none; } @media (max-width: 900px) { .s-rgt .s-rgt-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .s-rgt .s-rgt-grid { grid-template-columns: 1fr; } } /* ===================== reveal (passe 2 anims) — filet reduced-motion ===================== */ /* Équivalent de la maquette (styles.css:427 `.reveal{opacity:1!important;transform:none!important}`) : le JS reveal (js/experience.js) return déjà tôt en reduced-motion ; ce filet CSS garantit l'état visible sans transform résiduel. Scopé aux CONTENEURS reveal (chapeaux/CTA + grilles) — PAS aux cartes/tuiles, dont le transform:hover (lift) doit rester actif (fidèle maquette). */ @media (prefers-reduced-motion: reduce) { .s-hbt-head, .s-hbt-cta, .s-rgt-head, .s-rgt-cta, .s-reassur-grid, .s-hbt-grid, .s-rgt-grid, .js-reveal-grid, .s-grt-banner, .s-tst-head, .s-tst-grid, .s-resid-banner, .s-faq-head, .s-faq-list { opacity: 1 !important; transform: none !important; } } /* ===================== home/groupes-teaser (s-grt) — bannière promo unique ===================== */ /* §7.5 préventif : reset padding + width parasites ; ré-ajout explicite (scopé 0,2,0). */ .s-grt .e-con { padding: 0; width: auto; } .s-grt .e-div-block-base { min-width: 0; } .s-grt p { margin: 0; } /* section (.section.alt neutralisé transparent) : padding-top réduit, bottom = base. `.s-grt.s-grt` (0,2,0) + block. */ .s-grt.s-grt { display: block; padding: clamp(8px,1.5vw,20px) 0 clamp(64px,9vw,120px); background: transparent; } .s-grt .s-grt-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* bannière : image de fond + overlay + contenu (aucun hover — statique, fidèle maquette) */ .s-grt .s-grt-banner { position: relative; display: flex; min-height: 340px; width: 100%; border-radius: var(--r-card,24px); overflow: hidden; isolation: isolate; } .s-grt .s-grt-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .s-grt .s-grt-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(34,56,63,.94) 0%, rgba(34,56,63,.78) 42%, rgba(34,56,63,.35) 100%); } .s-grt .s-grt-in { position: relative; z-index: 2; width: auto; max-width: 60ch; padding: clamp(38px,6vw,72px); color: #fff; } /* eyebrow local (corail-pale) + titre + texte */ .s-grt .eyebrow { color: var(--corail-pale,#FFC6AC); margin: 0; } .s-grt .s-grt-h2 { color: #fff; font-size: var(--fs-h2); margin: 16px 0 14px; } .s-grt .s-grt-p { color: rgba(255,255,255,.9); font-size: 16px; margin-bottom: 26px; max-width: 46ch; } /* CTA btn--primary (lien e-flexbox) — pastille flèche dimensionnée (§7.14) ; hover via .btn--primary thème */ .s-grt .btn { padding: 13px 16px 13px 24px; } .s-grt .s-grt-cta-ico { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .s-grt .s-grt-cta-ico-svg { width: 16px; height: 16px; flex: 0 0 auto; display: flex; } .s-grt .s-grt-cta-ico-svg svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; display: block; } /* ===================== home/testimonials (s-tst) + composant carte avis (s-tcard) ===================== */ /* §7.5 préventif : reset padding + width parasites ; ré-ajout explicite (scopé 0,2,0). */ .s-tst .e-con { padding: 0; width: auto; } .s-tst .e-div-block-base { min-width: 0; } .s-tst p { margin: 0; } /* section (.section.alt = sable-pale). `.s-tst.s-tst` (0,2,0) + block. */ .s-tst.s-tst { display: block; padding: clamp(64px,9vw,120px) 0; background: var(--sable-pale,#F3EFE7); } .s-tst .s-tst-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* chapeau : titre à gauche + note agrégée à droite (wrap en étroit) */ .s-tst .s-tst-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 42px; } .s-tst .s-tst-head .eyebrow { margin: 0 0 16px; } .s-tst .s-tst-h2 { font-size: var(--fs-h2); max-width: 18ch; } /* note agrégée */ .s-tst .s-tst-agg { display: flex; align-items: center; gap: 18px; } .s-tst .s-tst-agg-score { display: flex; align-items: baseline; font-family: var(--font-display,'Bricolage Grotesque',sans-serif); font-weight: 700; font-size: clamp(46px,5.4vw,62px); color: var(--petrole,#2C4A52); line-height: .85; } .s-tst .s-tst-agg-unit { font-size: .38em; color: var(--petrole-brume,#5B7B82); font-weight: 600; } .s-tst .s-tst-agg-stars { color: var(--corail,#FB6F52); letter-spacing: 2px; font-size: 16px; } .s-tst .s-tst-agg-sub { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; font-size: 13.5px; color: var(--petrole-brume,#5B7B82); } .s-tst .s-tst-agg-sub-b { color: var(--petrole,#2C4A52); font-weight: 700; } .s-tst .s-tst-agg-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--olivier-deep,#5D7A59); background: rgba(157,184,154,.16); } .s-tst .s-tst-agg-badge-svg { width: 13px; height: 13px; flex: 0 0 auto; display: flex; } .s-tst .s-tst-agg-badge-svg svg { width: 13px !important; height: 13px !important; fill: none; stroke: currentColor; display: block; } /* grille auto-fit 3 → 2 → 1 */ .s-tst .s-tst-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: var(--gap-grid,20px); } /* ---- carte avis s-tcard (composant réutilisable — futur répéteur ACF) — NON cliquable ---- */ .s-tst .s-tcard { position: relative; overflow: hidden; background: #fff; border-radius: var(--r-card,24px); padding: 28px 28px 26px; box-shadow: var(--shadow-soft,0 16px 40px -26px rgba(34,56,63,.5)); display: flex; flex-direction: column; gap: 15px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .s-tst .s-tcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card,0 30px 70px -30px rgba(34,56,63,.6)); } .s-tst .s-tcard-qmark { position: absolute; top: 6px; right: 20px; z-index: 0; font-family: var(--font-display,'Bricolage Grotesque',sans-serif); font-weight: 700; font-size: 104px; line-height: 1; color: var(--sable,#E7D5C0); opacity: .55; pointer-events: none; } .s-tst .s-tcard-qtop, .s-tst .s-tcard-quote, .s-tst .s-tcard-who { position: relative; z-index: 1; } .s-tst .s-tcard-qtop { display: flex; align-items: center; gap: 11px; } .s-tst .s-tcard-stars { color: var(--corail,#FB6F52); letter-spacing: 2px; font-size: 15px; } .s-tst .s-tcard-quote { font-size: 17px; color: var(--encre,#22383F); line-height: 1.62; flex: 1; } .s-tst .s-tcard-who { display: flex; align-items: center; gap: 13px; } .s-tst .s-tcard-av { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--font-display,'Bricolage Grotesque',sans-serif); font-size: 17px; } .s-tst .s-tcard-av--corail { background: var(--corail-deep,#EA5638); } .s-tst .s-tcard-av--lagune { background: var(--lagune,#2E9BB8); } .s-tst .s-tcard-av--olivier { background: var(--olivier-deep,#5D7A59); } .s-tst .s-tcard-nm { font-weight: 700; color: var(--petrole,#2C4A52); font-size: 14.5px; } .s-tst .s-tcard-ct { font-size: 12.5px; color: var(--petrole-brume,#5B7B82); } /* ===================== home/residentiel-teaser (s-resid) — bannière split 2 col + parallaxe ===================== */ /* §7.5 préventif : reset padding + width parasites ; ré-ajout explicite (scopé 0,2,0). */ .s-resid .e-con { padding: 0; width: auto; } .s-resid .e-div-block-base { min-width: 0; } .s-resid p { margin: 0; } /* section (.section sans .alt → crème body). `.s-resid.s-resid` (0,2,0) + block. */ .s-resid.s-resid { display: block; padding: clamp(64px,9vw,120px) 0; } .s-resid .s-resid-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* bannière split (grille 2 col image/texte) — carte sable-pale, aucun hover (statique) */ .s-resid .s-resid-banner { display: grid; grid-template-columns: 1.08fr 1fr; width: 100%; background: var(--sable-pale,#F3EFE7); border-radius: var(--r-card,24px); overflow: hidden; box-shadow: var(--shadow-soft,0 16px 40px -26px rgba(34,56,63,.5)); } /* photo (colonne gauche) — image parallaxée (classe sur le e-image-base) */ .s-resid .s-resid-ph { position: relative; min-height: 340px; } .s-resid .s-resid-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* texte (colonne droite) */ .s-resid .s-resid-txt { padding: clamp(32px,4vw,56px) clamp(40px,5vw,72px); align-self: center; } .s-resid .s-resid-txt .eyebrow { margin: 0; } .s-resid .s-resid-h2 { font-size: var(--fs-h2); max-width: 16ch; margin-top: 14px; } .s-resid .s-resid-p { margin-top: 14px; color: var(--petrole-brume,#5B7B82); font-size: 16px; max-width: 44ch; } /* CTA btn--primary (lien e-flexbox) — pastille flèche §7.14 ; hover via .btn--primary thème */ .s-resid .btn { margin-top: 24px; padding: 13px 16px 13px 24px; } .s-resid .s-resid-cta-ico { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .s-resid .s-resid-cta-ico-svg { width: 16px; height: 16px; flex: 0 0 auto; display: flex; } .s-resid .s-resid-cta-ico-svg svg { width: 16px !important; height: 16px !important; fill: none; stroke: currentColor; display: block; } /* responsive ≤900 : empilement (image au-dessus, texte dessous), photo min-height 240 */ @media (max-width: 900px) { .s-resid .s-resid-banner { grid-template-columns: 1fr; } .s-resid .s-resid-ph { min-height: 240px; } } /* ===================== shared/faq-accordion (s-faq) — instance accueil ===================== */ /* §7.5 préventif : reset padding + width parasites ; ré-ajout explicite (scopé 0,2,0). */ .s-faq .e-con { padding: 0; width: auto; } .s-faq .e-div-block-base { min-width: 0; } .s-faq p { margin: 0; } /* section (.section.alt = sable-pale). `.s-faq.s-faq` (0,2,0) + block. */ .s-faq.s-faq { display: block; padding: clamp(64px,9vw,120px) 0; background: var(--sable-pale,#F3EFE7); } .s-faq .s-faq-wrap { width: 100%; max-width: var(--maxw,1220px); margin-inline: auto; padding: 0 24px; box-sizing: border-box; } /* chapeau centré */ .s-faq .s-faq-head { display: flex; justify-content: center; text-align: center; margin-bottom: 42px; } .s-faq .s-faq-head-txt { margin: 0 auto; } .s-faq .s-faq-head .eyebrow { justify-content: center; margin: 0 0 16px; } .s-faq .s-faq-h2 { font-size: var(--fs-h2); } /* liste (centrée, max 840) */ .s-faq .s-faq-list { width: auto; max-width: 840px; margin: 0 auto; } .s-faq .s-faq-item { background: #fff; border-radius: 16px; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-soft,0 16px 40px -26px rgba(34,56,63,.5)); } /* question (bouton) */ .s-faq .s-faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: var(--petrole,#2C4A52); display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 23px 26px; white-space: normal; line-height: normal; transition: padding-left .25s var(--ease), color .25s var(--ease); } .s-faq .s-faq-q-t { font-family: var(--font-display,'Bricolage Grotesque',sans-serif); font-weight: 700; font-size: 18px; color: var(--petrole,#2C4A52); text-align: left; } .s-faq .s-faq-q:hover { padding-left: 22px; } /* icône +/− (CSS pur) */ .s-faq .s-faq-pm { flex: none; width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--sable-pale,#F3EFE7); position: relative; transition: background .3s var(--ease); } .s-faq .s-faq-pm::before, .s-faq .s-faq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--petrole,#2C4A52); border-radius: 2px; transition: opacity .3s var(--ease), background .3s var(--ease); } .s-faq .s-faq-pm::before { width: 13px; height: 2.4px; transform: translate(-50%,-50%); } .s-faq .s-faq-pm::after { width: 2.4px; height: 13px; transform: translate(-50%,-50%); } @media (hover: hover) { .s-faq .s-faq-q:hover .s-faq-pm { background: var(--corail-deep,#EA5638); } .s-faq .s-faq-q:hover .s-faq-pm::before, .s-faq .s-faq-q:hover .s-faq-pm::after { background: #fff; } } .s-faq .s-faq-item.open .s-faq-pm { background: var(--corail-deep,#EA5638); } .s-faq .s-faq-item.open .s-faq-pm::before { background: #fff; } .s-faq .s-faq-item.open .s-faq-pm::after { opacity: 0; } /* réponse — accordéon §7.18 (grid-rows 0fr→1fr ; inner overflow:hidden + padding vertical conditionnel) */ .s-faq .s-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); } .s-faq .s-faq-item.open .s-faq-a { grid-template-rows: 1fr; } .s-faq .s-faq-a-p { overflow: hidden; min-height: 0; padding: 0 26px; color: var(--petrole-brume,#5B7B82); font-size: 15px; line-height: 1.65; } /* max-width 64ch retiré (2026-08-21) : pleine largeur de carte, écart maquette assumé */ .s-faq .s-faq-item.open .s-faq-a-p { padding-bottom: 22px; } .s-faq .s-faq-a-p a { color: var(--corail-deep,#EA5638); font-weight: 700; } /* ============================================================ region/listing — Page /la-region/ (listing POI dynamique) Port verbatim maquette styles.css. Classes maquette natives réutilisables sur les pages intérieures (région, activités, single article). Réf. region.html. ============================================================ */ /* Base titres maquette (global `h1,h2,h3,h4` — styles.css) SCOPÉE `.dpage` (n'affecte pas accueil atomic ni chrome Theme Builder). Placée AVANT les règles composant : `.rtile h4`/`.hb-cta h3`/… (0,1,1, plus bas dans le fichier) regagnent le tie de spécificité → gardent leur couleur (#fff). Fournit couleur/police par défaut aux titres non stylés explicitement (ex. `.sec-head h2`). */ .dpage h1, .dpage h2, .dpage h3, .dpage h4 { margin: 0; font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.04; color: var(--petrole); font-weight: 700; text-wrap: balance; } /* fil d'ariane */ .bcrumb { font-size: 13px; color: var(--petrole-brume); padding: 6px 0 22px; } .bcrumb a { color: var(--petrole-brume); } .bcrumb a:hover { color: var(--corail-deep); } .bcrumb b { color: var(--petrole); font-weight: 600; } /* hero listing */ /* max-width 760→920 (correctif 2026-09-08) : le titre du hub tenait sur 3 lignes à 1440 avec le « : » orphelin en tête de ligne ; le lead garde son propre cap 54ch, les autres pages à .lac-head ont des titres courts (aucun impact). */ .lac-head { max-width: 920px; margin-bottom: clamp(22px,2.8vw,32px); } .lac-head .eyebrow { margin-bottom: 14px; } .lac-head h1 { margin: 0; font-size: var(--fs-h1); color: var(--petrole); line-height: 1.04; letter-spacing: -.03em; } /* margin 0 : le h1 nu de [mp_archive_title] n'a pas la base atomique du e-heading (correctif 2026-09-08) */ .lac-head .lead { margin-top: 14px; font-size: var(--fs-lead); color: var(--petrole-brume); line-height: 1.6; max-width: 54ch; } /* description de terme sous le H1 d'archive (mp_archive_desc, wrap

    de term_description) — même œil que .lead (archives de terme alignées sur le hub, correctif 2026-09-08) */ .lac-head .arch-desc { margin-top: 14px; max-width: 54ch; } .lac-head .arch-desc p { font-size: var(--fs-lead); color: var(--petrole-brume); line-height: 1.6; } /* archives de terme : blanc sous la grille avant la bande CTA sable — même respiration que le hub (padding .section = clamp(64,9vw,120)) ; sur le hub la section suivante est blanche, ici la bande .alt collait aux tuiles (correctif 2026-09-08). Scopé body archive : hub inchangé. */ body.tax-mp_categorie_poi #lacGrid { margin-bottom: clamp(64px,9vw,120px); } /* barre onglets + compteur */ .lac-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(20px,2.4vw,30px); } .lac-bar .acts-tabs { margin-bottom: 0; justify-content: flex-start; } .lac-count { font-size: 14px; font-weight: 600; color: var(--petrole-brume); white-space: nowrap; } .lac-count b { font-family: var(--font-display); color: var(--petrole); font-size: 16.5px; } /* onglets (pills) */ .acts-tabs { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; } .acts-tab { background: var(--sable-pale); color: var(--petrole); border: 0; cursor: pointer; font-family: var(--body); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 22px; border-radius: 999px; transition: .25s var(--ease); will-change: transform; } .acts-tab:hover { background: var(--sable-hover); color: var(--petrole); } .acts-tab.active { background: var(--sable); color: var(--petrole); box-shadow: var(--shadow-soft); } .acts-tab:active { transform: scale(.96); } @media (max-width: 600px) { .acts-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: -24px; margin-right: -24px; padding: 0 24px 4px; } .acts-tabs::-webkit-scrollbar { display: none; } .acts-tab { flex: 0 0 auto; } } /* grille + état vide */ .lac-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-grid); } .lac-empty { display: none; padding: 48px 20px; text-align: center; color: var(--petrole-brume); font-size: 16px; } @media (max-width: 1080px) { .lac-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 720px) { .lac-grid { grid-template-columns: repeat(2,1fr); gap: 14px; } } /* carte rtile (base + couche micro-interactions) */ .rtile { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-soft); isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .rtile:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .rtile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .rtile:hover > img { transform: scale(1.08); } .rtile .tov { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(16,27,32,.26) 0%,rgba(16,27,32,0) 34%,rgba(16,27,32,.05) 54%,rgba(14,24,28,.86) 100%); } .rtile .rc { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #fff; padding-right: 42px; } .rtile h4 { color: #fff; font-size: var(--fs-h4); line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .rtile .rd { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.92); margin-top: 7px; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .rtile .rd svg { width: 14px; height: 14px; } .rtile::after { content: ""; position: absolute; right: 15px; bottom: 15px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background-color: var(--corail-deep); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207M9%207h8v8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 17px; box-shadow: 0 8px 20px -8px rgba(234,86,56,.7); opacity: 0; transform: translateY(8px) scale(.86); transition: opacity .4s var(--ease), transform .45s var(--ease); } .rtile:hover::after { opacity: 1; transform: none; } /* article GEO/SEO */ .art-body { max-width: 720px; margin: clamp(34px,4vw,52px) auto 0; } .art-body > * + * { margin-top: 22px; } .art-body.art-body > * + * { margin-top: 22px; } /* variante atomique (audit 2026-08-23) : les bases e-paragraph/e-heading posent margin:0 à égalité et chargent après */ /* utilitaires L4 (styles inline des articles SEO convertis en atomique — 2026-08-23) */ .art-body.art-center { margin: 0 auto; } .art-body.art-sep { margin-top: clamp(46px,6vw,80px); padding-top: clamp(40px,5vw,60px); border-top: 1px solid rgba(34,56,63,.1); } .art-body p { color: var(--petrole-brume); font-size: 16.5px; line-height: 1.78; } .art-body .lead { font-size: clamp(18px,2vw,21px); color: var(--petrole); font-weight: 500; line-height: 1.6; max-width: 54ch; } .art-body h2 { font-size: var(--fs-h3); color: var(--petrole); line-height: 1.12; margin-top: clamp(34px,4vw,48px); } .art-body h3 { font-size: var(--fs-h4); color: var(--petrole); margin-top: 30px; } .art-body a.ln { color: var(--corail-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .art-body a.ln:hover { color: var(--corail); } /* — wysiwyg `description` du single lieu (correctif 2026-09-08) : le HTML repris de prod est SANS classes (ul/a/strong nus) — mêmes styles que les composants maquette (.art-list / a.ln), scopés au conteneur du champ en (0,4,0) pour battre le kit Elementor et les bases atomiques. — */ .art-body.art-body.art-body.art-body ul:not([class]) { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .art-body.art-body.art-body.art-body ul:not([class]) li { position: relative; margin: 0; padding-left: 30px; color: var(--petrole-brume); font-size: 16px; line-height: 1.6; } .art-body.art-body.art-body.art-body ul:not([class]) li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--corail); } /* point corail maquette (.art-list li::before) — pseudo-élément, pas d'image */ .art-body.art-body.art-body.art-body a:not(.btn):not(.ln) { color: var(--corail-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .art-body.art-body.art-body.art-body a:not(.btn):not(.ln):hover { color: var(--corail); } .art-body.art-body.art-body.art-body strong, .art-body.art-body.art-body.art-body b { color: var(--petrole); } /* en-tête de section (FAQ centrée) */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 42px; } /* ré-affirmation (0,2,0) pour les sec-head NATIFS (e-con base display:block chargée après le thème) — placée AVANT .ct-faq .sec-head et autres surcharges contextuelles (ordre source). */ .wrap .sec-head, .vcon .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 42px; } .sec-head h2 { font-size: var(--fs-h2); max-width: 18ch; } .sec-head .eyebrow { margin-bottom: 16px; } /* FAQ maquette native (.faq / .faq-item / .faq-q / .pm / .faq-a) — composant pages intérieures */ .faq { max-width: 840px; margin: 0 auto; width: 100%; } /* width:100% : `.wrap.wrap` est flex-column → marges auto rétréciraient l'item à son contenu */ .faq-item { background: #fff; border-radius: 16px; margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow-soft); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 23px 26px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--petrole); white-space: normal; line-height: normal; transition: padding-left .25s var(--ease), color .25s var(--ease); } .faq-q .pm { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sable-pale); position: relative; transition: background .3s var(--ease); } .faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--petrole); border-radius: 2px; transition: opacity .3s var(--ease), background .3s var(--ease); } .faq-q .pm::before { width: 13px; height: 2.4px; transform: translate(-50%,-50%); } .faq-q .pm::after { width: 2.4px; height: 13px; transform: translate(-50%,-50%); } .faq-item.open .pm { background: var(--corail-deep); } .faq-item.open .pm::before { background: #fff; } .faq-item.open .pm::after { opacity: 0; } /* `background:none` neutralise le défaut `button:hover/:focus{background:#c36}` (reset Hello/WP) qui teintait l'item FAQ (`.faq-q` est un