/* Orphéa — Massage bien-être à Abbeville · styles.css unique, mobile-first, sans framework */
/* Trois thèmes : "crème" (défaut, apaisant), "lotus" (noir + accents du logo)
et "lotus-clair" (clair apaisant + cyan du logo).
Sélection via — voir .theme-switch dans index.html. */
:root,
[data-theme="creme"] {
--bg: #faf6ef; /* crème chaud principal */
--bg-soft: #f3ecdf; /* bandeau de section alterné */
--surface: #fffdf8; /* cartes */
--text: #3d3428; /* brun profond, jamais noir sec */
--muted: #7a6d5c; /* brun doux secondaire */
--gold: #b08a4f; /* doré apaisé (accent + liens actifs) */
--gold-soft: #8a6a33; /* doré foncé : titres/CTA lisibles sur fond clair */
--gold-tint: #e9dcc3; /* doré très pâle : halo hero, survols */
--line: #e5dbc8; /* filets discrets */
--btn-text: #fffdf8; /* texte des boutons primaires */
--btn-hover: #74571f; /* survol bouton primaire */
--header-veil: rgba(250, 246, 239, 0.86);
--nav-bg: rgba(250, 246, 239, 0.98);
--field-bg: #fffdf8;
--placeholder: #b3a68f;
--shadow-1: rgba(61, 52, 40, 0.05);
--shadow-2: rgba(61, 52, 40, 0.08);
--logo-badge: #121110; /* pastille sombre derrière le logo (fond noir du logo) */
--radius: 18px;
--header-h: 72px;
}
/* Thème "lotus" : fond noir comme le logo, accents des touches de couleur du motif
(rouge #ff0100, cyan #00ffff, vert #01ff00) adoucis pour rester apaisants. */
[data-theme="lotus"] {
--bg: #121110;
--bg-soft: #1a1815;
--surface: #221f1b;
--text: #f2ece4;
--muted: #b5a89a;
--gold: #4fd8d1; /* cyan du logo, assombri/adouci */
--gold-soft: #8ce8e3; /* cyan clair lisible sur fond noir */
--gold-tint: #0f2e2c; /* halo cyan très sombre */
--line: #37322b;
--btn-text: #06211f;
--btn-hover: #063835;
--header-veil: rgba(18, 17, 16, 0.86);
--nav-bg: rgba(26, 24, 21, 0.98);
--field-bg: #1a1815;
--placeholder: #6b6156;
--shadow-1: rgba(0, 0, 0, 0.25);
--shadow-2: rgba(0, 0, 0, 0.35);
--logo-badge: #f2ece4; /* pastille claire : le logo (fond noir) reste lisible */
}
/* Thème "lotus-clair" : l'esprit du lotus (cyan #00ffff du logo, adouci) sur un
fond clair apaisant, comme le thème crème mais sans le doré. */
[data-theme="lotus-clair"] {
--bg: #f2f8f7; /* blanc cyan très pâle */
--bg-soft: #e9f2f0; /* bandeau de section alterné */
--surface: #fbfdfc; /* cartes */
--text: #21403b; /* vert-de-gris profond */
--muted: #47635d; /* vert-de-gris doux secondaire */
--gold: #17908a; /* cyan du logo, adouci (accent + liens actifs) */
--gold-soft: #0d6f68; /* cyan foncé : titres/CTA lisibles sur fond clair */
--gold-tint: #d5ece9; /* halo cyan très pâle : survols */
--line: #cfe0dd; /* filets discrets */
--btn-text: #f4fbfa; /* texte des boutons primaires */
--btn-hover: #085a54; /* survol bouton primaire */
--header-veil: rgba(242, 248, 247, 0.86);
--nav-bg: rgba(242, 248, 247, 0.98);
--field-bg: #fbfdfc;
--placeholder: #8fa8a3;
--shadow-1: rgba(33, 64, 59, 0.05);
--shadow-2: rgba(33, 64, 59, 0.08);
--logo-badge: #121110; /* pastille sombre : le logo Facebook est noir, comme le thème crème */
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--text);
font-family: "Jost", system-ui, sans-serif;
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.075rem);
line-height: 1.7; /* aéré, lecture lente et confortable */
font-weight: 300;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-soft); }
ul { list-style: none; }
section, footer { scroll-margin-top: var(--header-h); }
::selection { background: var(--gold-tint); color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.font-display {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 500;
line-height: 1.12;
letter-spacing: 0.01em;
}
/* ---------- Header / nav ---------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.25rem;
border-bottom: 1px solid transparent;
}
/* Transparent en haut → voile crème translucide dès le scroll (.scrolled via main.js) */
.site-header.scrolled {
background: var(--header-veil);
border-bottom-color: var(--line);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.site-logo {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--text);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.site-logo img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--logo-badge); }
/* Nav mobile : panneau déroulant sous le header, fermé par défaut (checkbox #nav-toggle) */
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
flex-direction: column;
background: var(--nav-bg);
border-bottom: 1px solid var(--line);
padding: 0.5rem 1.25rem 1.5rem;
}
.nav-links { display: flex; flex-direction: column; }
.nav-links a {
display: block;
padding: 0.75rem 0.25rem;
color: var(--text);
font-size: 1.05rem;
letter-spacing: 0.02em;
border-bottom: 1px solid var(--line);
}
.nav-links a:last-child { border-bottom: 0; }
#nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Hamburger : label + 3 barres (span + ::before/::after) */
.site-header label[for="nav-toggle"] {
display: inline-block;
position: relative;
width: 44px;
height: 44px;
cursor: pointer;
}
.site-header label[for="nav-toggle"]::before,
.site-header label[for="nav-toggle"] span,
.site-header label[for="nav-toggle"]::after {
content: "";
position: absolute;
left: 10px;
width: 24px;
height: 2px;
border-radius: 2px;
background: var(--text);
}
.site-header label[for="nav-toggle"]::before { top: 15px; }
.site-header label[for="nav-toggle"] span { top: 21px; }
.site-header label[for="nav-toggle"]::after { top: 27px; }
/* ordre attendu :