→ bandeau en indigo Tous les composants lisent --accent (+ ses variantes) et s'adaptent automatiquement. Aucune autre couleur à toucher. Les valeurs sont normalisées pour rester accessibles (texte blanc lisible sur l'aplat --accent) tout en gardant l'esprit de chaque teinte du spectre du lotus. ============================================================ */ /* Accueil / marque mère — Turquoise */ [data-soin="accueil"] { --accent: #008fa5; --accent-dark: #006e7e; --accent-light: #7ebec5; --accent-soft: #eaf6f8; } /* Massages traditionnels — Vert sauge */ [data-soin="massages"] { --accent: #5a9e61; --accent-dark: #467c4c; --accent-light: #8fc493; --accent-soft: #eef6ef; } /* Drainage lymphatique — Or doux */ [data-soin="drainage"] { --accent: #b07d0a; --accent-dark: #8c6308; --accent-light: #e5a92e; --accent-soft: #fbf3e2; } /* Autour de la maternité — Violet */ [data-soin="maternite"] { --accent: #7a0fa8; --accent-dark: #5e0085; --accent-light: #b57bd6; --accent-soft: #f4eafa; } /* Soins du visage — Indigo profond */ [data-soin="visage"] { --accent: #3a1e7a; --accent-dark: #1a0056; --accent-light: #6b52b5; --accent-soft: #ecebf6; } /* Bien-être / cabinet — Bleu ciel (= accent par défaut) */ [data-soin="bien-etre"] { --accent: #1b8fe3; --accent-dark: #1574bd; --accent-light: #74c0f6; --accent-soft: #e9f5fe; } /* Vitalité / nature — Vert vif */ [data-soin="vitalite"] { --accent: #318c13; --accent-dark: #26700f; --accent-light: #6fc44e; --accent-soft: #edf7e9; } /* ===== ds/tokens/typography.css ===== */ /* ============================================================ Mingmen Massage — TYPOGRAPHIE ------------------------------------------------------------ Poppins → titres (warm, légèrement arrondie, medium/semibold) Manrope → corps (humaniste, lisible, interligne généreux) Aucune serif. Pas de capitales agressives ; sur-titres en petites capitales douces (letter-spacing léger). ============================================================ */ :root { /* Familles */ --font-heading: 'Poppins', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; /* Échelle de tailles (rythme doux ~1.2) */ --text-xs: 0.75rem; /* 12px — méta, légendes */ --text-sm: 0.875rem; /* 14px — labels, aides */ --text-base: 1rem; /* 16px — corps */ --text-md: 1.125rem; /* 18px — corps confort / chapô court */ --text-lg: 1.375rem; /* 22px — sous-titres */ --text-xl: clamp(1.4rem, 1.0rem + 1.6vw, 1.75rem); /* ~22→28px — H3 */ --text-2xl: clamp(1.6rem, 1.05rem + 2.4vw, 2.25rem); /* ~26→36px — H2 */ --text-3xl: clamp(2rem, 1.2rem + 3.4vw, 3rem); /* ~32→48px — H1 */ --text-4xl: clamp(2.3rem, 1.2rem + 4.6vw, 3.75rem); /* ~37→60px — hero display */ /* Graisses */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Interlignes */ --leading-tight: 1.15; /* grands titres */ --leading-snug: 1.3; /* titres courants */ --leading-normal: 1.55; /* UI / chapô */ --leading-relaxed: 1.75; /* lecture confort bien-être */ /* Interlettrage */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* sur-titres / labels en petites capitales */ /* Sémantique — titres */ --title-font: var(--font-heading); --title-weight: var(--weight-semibold); --title-color: var(--text-strong); /* Sémantique — corps */ --body-font: var(--font-body); --body-weight: var(--weight-regular); --body-color: var(--text-body); } /* ===== ds/tokens/spacing.css ===== */ /* ============================================================ Mingmen Massage — ESPACEMENTS (échelle 4 / 8) ============================================================ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 7rem; /* 112px */ /* Gouttières & largeurs de contenu */ --gutter: var(--space-5); --container: 1180px; /* largeur max de contenu */ --container-narrow: 760px;/* texte de lecture confort */ --section-y: var(--space-12); /* respiration verticale des sections */ } /* ===== ds/tokens/effects.css ===== */ /* ============================================================ Mingmen Massage — RAYONS, OMBRES, TRANSITIONS, DÉGRADÉS ------------------------------------------------------------ Coins doux, ombres très légères, transitions fluides. Le dégradé "signature lotus" est réservé aux moments forts (hero, séparateurs) — jamais partout. ============================================================ */ :root { /* Rayons de bordure — doux, arrondis */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* Ombres — très légères, diffuses, teintées d'ardoise */ --shadow-xs: 0 1px 2px rgba(72, 96, 102, 0.06); --shadow-sm: 0 2px 8px rgba(72, 96, 102, 0.06); --shadow-md: 0 8px 24px rgba(72, 96, 102, 0.08); --shadow-lg: 0 16px 40px rgba(72, 96, 102, 0.10); /* Lueur d'accent — survol de cartes / éléments actifs */ --shadow-accent: 0 10px 30px color-mix(in srgb, var(--accent) 22%, transparent); /* Transitions fluides */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur: 240ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ --transition: all var(--dur) var(--ease); /* ---- Dégradé SIGNATURE LOTUS ---- Multi-teintes translucides, doux, jamais criard. À réserver aux hero & séparateurs. */ --gradient-lotus: linear-gradient( 105deg, rgba(143, 196, 147, 0.55) 0%, rgba(46, 163, 242, 0.50) 26%, rgba(99, 0, 153, 0.42) 52%, rgba(217, 107, 184, 0.45) 74%, rgba(224, 153, 0, 0.48) 100% ); /* @kind color */ /* Halo radial doux pour fonds de hero (cœur lumineux du lotus) */ --gradient-lotus-halo: radial-gradient( 120% 120% at 70% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(116, 192, 246, 0.18) 38%, rgba(181, 123, 214, 0.16) 64%, rgba(232, 104, 143, 0.14) 100% ); /* @kind color */ /* Voile teinté de l'accent courant (bandeaux, overlays légers) */ --gradient-accent-soft: linear-gradient( 180deg, var(--accent-soft) 0%, transparent 100% ); } /* ===== ds/tokens/base.css ===== */ /* ============================================================ Mingmen Massage — BASE ------------------------------------------------------------ Réglages d'éléments par défaut, posés sur les tokens. Rendu lumineux, aéré, light mode. Optionnel pour les consommateurs, mais garantit un socle cohérent. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--body-color); font-family: var(--body-font); font-size: var(--text-base); font-weight: var(--body-weight); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-family: var(--title-font); color: var(--title-color); font-weight: var(--title-weight); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--link-hover); } /* Sur-titre / label — petites capitales douces, jamais agressif */ .eyebrow { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); } /* Largeurs de contenu utilitaires */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background: var(--accent-soft); color: var(--accent-dark); } /* ===== site.css ===== */ /* ===================================================================== MINGMEN MASSAGE — couche composants (statique) Traduit fidèlement les composants React du Design System (Header, Hero, ServiceCard, SectionBand, Badge, Button, Footer) en classes réutilisables, posées sur les tokens du DS. Charger APRÈS assets/ds/styles.css. Règles DS respectées : aucune serif, light mode blanc dominant, accent par univers via [data-soin], dégradé lotus réservé aux hero. ===================================================================== */ html { scroll-behavior: smooth; } body { overflow-x: hidden; } img { display: block; max-width: 100%; } .container, .container-narrow { width: 100%; } .section { padding: var(--section-y) 0; } .section.tint { background: var(--bg-soft); } .section.band-soft { background: var(--accent-soft); } .lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); } .center { text-align: center; } .measure { max-width: 52ch; } .mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)} /* ---------- Boutons (mm-btn) ---------- */ .mm-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-heading);font-weight:var(--weight-semibold);line-height:1; border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer; text-decoration:none;white-space:nowrap;padding:12px 22px;font-size:var(--text-base); transition:var(--transition); } .mm-btn .arr{font-family:var(--font-body);transition:transform var(--dur) var(--ease)} .mm-btn:hover .arr{transform:translateX(3px)} .mm-btn--sm{padding:8px 16px;font-size:var(--text-sm);gap:6px} .mm-btn--lg{padding:15px 30px;font-size:var(--text-md);gap:10px} .mm-btn--block{width:100%} .mm-btn--primary{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--shadow-sm)} .mm-btn--primary:hover{background:var(--accent-dark);color:var(--text-on-accent);box-shadow:var(--shadow-accent);transform:translateY(-1px)} .mm-btn--primary:active{transform:translateY(0);box-shadow:var(--shadow-xs)} .mm-btn--secondary{background:transparent;color:var(--accent-dark);border-color:var(--accent)} .mm-btn--secondary:hover{background:var(--accent-soft);color:var(--accent-dark)} .mm-btn--ghost{background:transparent;color:var(--accent-dark);padding-left:8px;padding-right:8px} .mm-btn--ghost:hover{color:var(--accent-dark);opacity:.78} .mm-btn--onlotus{background:#fff;color:var(--accent-dark);box-shadow:var(--shadow-sm)} .mm-btn--onlotus:hover{background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)} /* ---------- Badge (mm-badge) ---------- */ .mm-badge{ display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body); font-weight:var(--weight-semibold);line-height:1;letter-spacing:.01em; border-radius:var(--radius-pill);padding:5px 13px;font-size:var(--text-sm); background:var(--accent-soft);color:var(--accent-dark); } .mm-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} /* ---------- Header (sticky, blanc translucide) ---------- */ .site-header{ position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between; gap:var(--space-6);padding:13px var(--space-6); background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .brand{display:flex;align-items:center;gap:12px} .brand img{width:42px;height:42px;object-fit:contain} .brand .bname{display:block;font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--text-strong);line-height:1.05} .brand .btag{display:block;font-size:11px;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)} .nav{display:flex;align-items:center;gap:var(--space-4)} .nav a{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-body);padding:6px 0;border-bottom:2px solid transparent;transition:var(--transition);white-space:nowrap} .nav a:hover{color:var(--accent-dark)} .nav a[aria-current]{color:var(--accent-dark);border-bottom-color:var(--accent)} .header-cta{display:flex;align-items:center;gap:14px} .menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative} .menu-btn span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--text-strong);transition:transform var(--dur-slow) var(--ease),opacity var(--dur) var(--ease)} .menu-btn span:nth-child(1){top:16px}.menu-btn span:nth-child(2){top:22px}.menu-btn span:nth-child(3){top:28px} body.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)} body.menu-open .menu-btn span:nth-child(2){opacity:0} body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .menu-overlay{position:fixed;inset:0;z-index:45;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:center;gap:2px;padding:90px var(--space-8) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow)} body.menu-open .menu-overlay{opacity:1;visibility:visible} .menu-overlay a{font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:1.25rem;color:var(--text-strong);padding:7px 0;opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)} body.menu-open .menu-overlay a{opacity:1;transform:none} body.menu-open .menu-overlay a:nth-child(1){transition-delay:.06s} body.menu-open .menu-overlay a:nth-child(2){transition-delay:.10s} body.menu-open .menu-overlay a:nth-child(3){transition-delay:.14s} body.menu-open .menu-overlay a:nth-child(4){transition-delay:.18s} body.menu-open .menu-overlay a:nth-child(5){transition-delay:.22s} body.menu-open .menu-overlay a:nth-child(6){transition-delay:.26s} body.menu-open .menu-overlay a:nth-child(7){transition-delay:.30s} /* ---------- Hero (clair, dégradé lotus + voile d'accent) ---------- */ .hero{padding:var(--space-4) var(--gutter) var(--space-10)} .hero-card{ position:relative;overflow:hidden;border-radius:var(--radius-xl); background:var(--gradient-lotus-halo),linear-gradient(180deg,var(--accent-soft),rgba(255,255,255,0) 70%),var(--white); padding:clamp(40px,6vw,76px) clamp(26px,5vw,68px);max-width:var(--container);margin:0 auto; box-shadow:var(--shadow-sm);border:1px solid var(--border); } /* Accueil : pleine signature lotus multicolore */ .hero-card.lotus{background:var(--gradient-lotus-halo),var(--gradient-lotus),var(--white)} .hero-inner{position:relative;z-index:2;max-width:760px} .hero-inner.with-media{max-width:none;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-9);align-items:center} .hero .eyebrow{display:block;margin-bottom:var(--space-3)} .hero h1{margin:0;font-size:var(--text-4xl);line-height:var(--leading-tight);color:var(--text-strong);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)} .hero h1 .hl{color:var(--accent-dark)} .hero .lead{margin:var(--space-4) 0 0;max-width:52ch} .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)} .hero-meta{margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:var(--text-sm);font-weight:var(--weight-medium)} .hero-meta>span{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8);padding:8px 15px;border-radius:var(--radius-pill);color:var(--text-strong);box-shadow:0 6px 16px -10px rgba(72,96,102,.5)} .hero-meta b{color:var(--accent-dark);font-weight:var(--weight-semibold)} .hero-meta .stars{color:var(--accent-dark);letter-spacing:2px} .hero-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-md)} .hero-media img{width:100%;height:100%;object-fit:cover} /* ---------- En-tête de section ---------- */ .sec-head{max-width:680px;margin-bottom:var(--space-8)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head .eyebrow{display:block;margin-bottom:var(--space-2)} .sec-head h2{margin:0 0 var(--space-3);font-size:var(--text-2xl);color:var(--text-strong)} .sec-head p{margin:0;color:var(--text-body);font-size:var(--text-md)} .sec-head p + p{margin-top:var(--space-4)} /* ---------- Bloc définition (GEO, citable) ---------- */ .definition{max-width:var(--container-narrow);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-body);padding-left:22px;border-left:3px solid var(--accent)} .definition b{color:var(--text-strong);font-weight:var(--weight-semibold)} /* ---------- Grille de cartes de soin ---------- */ .grid{display:grid;gap:var(--space-5)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .service-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition)} .service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--accent-light)} .service-card .media{position:relative;aspect-ratio:3/2;background:var(--gradient-lotus-halo),var(--accent-soft);background-size:cover;background-position:center} .service-card .media .mm-badge{position:absolute;left:14px;top:14px} .service-card .body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1} .service-card h3{margin:0;font-size:var(--text-xl);color:var(--text-strong);font-weight:var(--weight-semibold)} .service-card p{margin:0;color:var(--text-body);font-size:var(--text-base);line-height:var(--leading-relaxed);flex:1} .service-card .price{display:flex;align-items:baseline;gap:8px;margin-top:var(--space-1)} .service-card .price .amt{font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--accent-dark)} .service-card .price .dur{font-size:var(--text-sm);color:var(--text-muted)} .service-card .price .dur .dur-amt{color:var(--accent-dark);font-weight:var(--weight-semibold)} .service-card .card-cta{align-self:flex-start;margin-top:var(--space-2)} .sec-cta{text-align:center;margin-top:var(--space-6)} /* lien-univers (cartes de navigation vers les pages soins) */ .uni-card{display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:var(--transition)} .uni-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--accent-light)} .uni-card h3{margin:0;color:var(--text-strong);font-size:var(--text-xl)} .uni-card p{margin:0;color:var(--text-body);font-size:var(--text-base)} .uni-card .more{margin-top:auto;color:var(--accent-dark);font-weight:var(--weight-semibold);font-size:var(--text-sm);display:inline-flex;gap:.4em;transition:var(--transition)} .uni-card:hover .more{gap:.8em} /* ---------- Split (image + texte) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center} .split.rev .split-media{order:2} .split-media{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-md)} .split-media.square{aspect-ratio:1/1} .split-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)} .split-media:hover img{transform:scale(1.04)} .split h2{font-size:var(--text-2xl);color:var(--text-strong);margin:var(--space-3) 0 var(--space-4)} .feat{list-style:none;margin:var(--space-5) 0 var(--space-6);padding:0} .feat li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--border);color:var(--text-body);line-height:var(--leading-relaxed)} .feat li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--accent)} .feat li b{color:var(--text-strong)} .quote{font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:var(--text-lg);color:var(--accent-dark);line-height:var(--leading-snug)} /* ---------- Tableau de prix ---------- */ .pricing{max-width:820px;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-sm)} .price-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:20px 26px;border-top:1px solid var(--border)} .price-row:first-child{border-top:0} .price-row .pr-name{font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:var(--text-md);color:var(--text-strong)} .price-row .pr-desc{display:block;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-sm);color:var(--text-muted);margin-top:3px;line-height:var(--leading-normal)} .price-row .pr-val{font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--accent-dark);white-space:nowrap;font-variant-numeric:tabular-nums} .price-note{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-4)} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin:0 auto} .faq details{border-bottom:1px solid var(--border)} .faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 2px;position:relative;font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:var(--text-md);color:var(--text-strong);transition:color var(--dur) var(--ease)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-family:var(--font-body);font-size:1.5rem;line-height:1;color:var(--accent);transition:transform var(--dur-slow) var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--accent-dark)} .faq .ans{padding:0 44px 20px 2px;color:var(--text-body);line-height:var(--leading-relaxed)} .faq .ans p{margin:0 0 .6em} /* ---------- Bandeau dégradé (CTA cadeau) ---------- */ .band{position:relative;overflow:hidden;background:var(--gradient-lotus-halo),var(--gradient-lotus),var(--white);border-radius:var(--radius-xl);padding:clamp(40px,6vw,72px);text-align:center;border:1px solid var(--border)} .band h2{color:var(--text-strong);font-size:var(--text-2xl);margin:0 0 var(--space-3)} .band p{color:var(--text-body);max-width:52ch;margin:0 auto var(--space-6)} /* ---------- Avis Google ---------- */ .avis-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--space-5);margin-bottom:var(--space-8)} .gbadge{display:flex;align-items:center;gap:16px;background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 20px;box-shadow:var(--shadow-sm)} .avis-top h2 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:var(--transition)} .avis-top h2 a:hover{color:var(--accent-dark);border-color:var(--accent-dark)} .gbadge .score{font-family:var(--font-heading);font-size:1.9rem;font-weight:var(--weight-semibold);line-height:1;color:var(--text-strong)} .gbadge .g{font-weight:var(--weight-semibold);color:var(--text-strong);font-size:var(--text-sm)} .gbadge .stars{color:var(--accent);letter-spacing:2px} .grid-avis{display:flex;gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:10px} .grid-avis::-webkit-scrollbar{height:6px} .grid-avis::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px} .grid-avis .review{flex:0 0 calc((100% - 2*var(--space-5))/3);scroll-snap-align:start} @media(max-width:900px){.grid-avis .review{flex-basis:calc((100% - var(--space-5))/2)}} @media(max-width:600px){.grid-avis .review{flex-basis:88%}} .avis-controls{display:flex;gap:12px;justify-content:center;margin-top:var(--space-6)} .avis-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--surface-card);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--text-strong);display:flex;align-items:center;justify-content:center;transition:var(--transition);box-shadow:var(--shadow-xs)} .avis-nav:hover{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)} .avis-nav[disabled]{opacity:.35;cursor:default} .avis-nav[disabled]:hover{background:var(--surface-card);color:var(--text-strong);border-color:var(--border)} .review{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-xs)} .review .stars{color:var(--accent);letter-spacing:2px;font-size:var(--text-sm)} .review p{margin:0;color:var(--text-body);line-height:var(--leading-relaxed)} .review .who{display:flex;align-items:center;gap:12px;margin-top:auto} .review .av{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:var(--weight-semibold)} .review .who b{font-size:var(--text-sm);display:block;color:var(--text-strong)} .review .who small{color:var(--text-muted);font-size:var(--text-xs)} .avis-note{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--text-muted)} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:stretch} .info-rows .row{padding:16px 0;border-top:1px solid var(--border)} .info-rows .row:first-child{border-top:0} .info-rows small{display:block;color:var(--accent-dark);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:var(--weight-semibold);margin-bottom:5px} .info-rows .row span{font-size:var(--text-md);color:var(--text-body)} .info-rows a{color:var(--accent-dark);font-weight:var(--weight-semibold)} .map{border-radius:var(--radius-xl);overflow:hidden;min-height:380px;box-shadow:var(--shadow-sm);border:1px solid var(--border)} .map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:grayscale(.15)} /* ---------- Footer ---------- */ .site-footer{background:var(--text-strong);color:rgba(255,255,255,.82);margin-top:var(--space-10)} .foot-grid{max-width:var(--container);margin:0 auto;padding:var(--space-9) var(--gutter) var(--space-7);display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-8)} .foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-4)} .foot-brand img{width:46px;height:46px} .foot-brand span{font-family:var(--font-heading);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:#fff} .site-footer p{margin:0;max-width:36ch;line-height:var(--leading-relaxed);color:rgba(255,255,255,.7)} .site-footer h4{color:#fff;font-family:var(--font-heading);font-size:var(--text-base);margin:0 0 var(--space-3);font-weight:var(--weight-semibold)} .site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .site-footer ul a{color:rgba(255,255,255,.78);font-size:var(--text-sm)} .site-footer ul a:hover{color:#fff} .foot-zones{max-width:var(--container);margin:0 auto;padding:0 var(--gutter) var(--space-6);border-top:1px solid rgba(255,255,255,.1)} .foot-zones h4{color:#fff;font-family:var(--font-heading);font-size:var(--text-base);margin:var(--space-6) 0 var(--space-3);font-weight:var(--weight-semibold)} .foot-zones p{max-width:none;color:rgba(255,255,255,.6);font-size:var(--text-sm);line-height:var(--leading-relaxed)} .foot-zones a{color:rgba(255,255,255,.78)} .foot-zones a:hover{color:#fff} .foot-kayak{display:flex;justify-content:center;padding:var(--space-6) var(--gutter) 0} .kayak-badge{display:inline-flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;transition:var(--transition)} .kayak-badge:hover{transform:translateY(-2px)} .kayak-badge .kb-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:600} .kayak-badge .kb-logo{display:inline-flex;gap:4px} .kayak-badge .kb-logo i{background:#ff690f;color:#fff;font-style:normal;font-weight:800;font-size:18px;line-height:1;width:26px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-family:Arial,Helvetica,sans-serif} .foot-bot{border-top:1px solid rgba(255,255,255,.14);padding:var(--space-4) var(--gutter);text-align:center;font-size:var(--text-sm);color:rgba(255,255,255,.6);margin-top:var(--space-6)} /* ---------- Reveal au scroll ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s} .reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s} /* ---------- Responsive ---------- */ @media(max-width:900px){ .nav,.header-cta .mm-btn{display:none} .menu-btn{display:block} .grid-3{grid-template-columns:1fr 1fr} .split,.contact-grid{grid-template-columns:1fr;gap:var(--space-7)} .split.rev .split-media,.split-media{order:-1} .hero-inner.with-media{grid-template-columns:1fr} .hero-media{order:-1;aspect-ratio:16/10} .foot-grid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .grid-3,.grid-2{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .price-row{padding:16px 18px} .hero{padding-top:var(--space-3)} .hero-meta{font-size:.8rem;gap:8px} .hero-meta>span{padding:7px 12px;white-space:normal;max-width:100%} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important} .reveal{opacity:1;transform:none} } /* ---------- Formulaire (mm-form) ---------- */ .mm-form{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);box-shadow:var(--shadow-sm)} .mm-form .form-fields{display:flex;flex-direction:column;gap:var(--space-4)} .mm-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .mm-form .form-group{display:flex;flex-direction:column;gap:6px} .mm-form label{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-strong)} .mm-form input,.mm-form select,.mm-form textarea{font-family:var(--font-body);font-size:var(--text-base);color:var(--text-body);background:var(--bg-soft);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;transition:var(--transition);width:100%} .mm-form input:focus,.mm-form select:focus,.mm-form textarea:focus{outline:none;border-color:var(--accent);background:#fff} .mm-form textarea{min-height:120px;resize:vertical} .mm-form .form-note{font-size:var(--text-sm);color:var(--text-muted);margin:0} .mm-form .form-success{display:none;text-align:center;padding:var(--space-6) var(--space-4)} .mm-form .form-success h3{margin:0 0 var(--space-2);color:var(--text-strong)} .mm-form.is-sent .form-success{display:block} .mm-form.is-sent .form-fields{display:none} @media (max-width:640px){.mm-form .form-row{grid-template-columns:1fr}}