/* 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; --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(--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(--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} */ /* 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; } } /* ===== 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 */ .s-hdr-mobile .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; } } /* 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); } /* 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 { font-size: 13.5px; } /* 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 */ .s-ftr .s-ftr-contact { display: flex; flex-direction: column; gap: 10px; } .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; } /* langues (placeholder) */ .s-ftr .s-ftr-langs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .s-ftr .s-ftr-lang { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); cursor: pointer; } .s-ftr .s-ftr-lang-on { background: var(--corail-deep, #EA5638); 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); } /* responsive maquette : 5 → 2 col (≤900) → 1 col (≤560) */ @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(--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, .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; } .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(--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 */ .lac-head { max-width: 760px; margin-bottom: clamp(22px,2.8vw,32px); } .lac-head .eyebrow { margin-bottom: 14px; } .lac-head h1 { font-size: var(--fs-h1); color: var(--petrole); line-height: 1.04; letter-spacing: -.03em; } .lac-head .lead { margin-top: 14px; font-size: var(--fs-lead); color: var(--petrole-brume); line-height: 1.6; max-width: 54ch; } /* 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(--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 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); } /* 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; } .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(--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