/* ============================================================= Josteo — feuille de style principale Adaptée du design Claude (palette terracotta), édité une fois ici puis servi tel quel. Pas de build, pas de minification. ============================================================= */ :root { /* Palette terre / terracotta — par défaut */ --bg: oklch(97.5% 0.012 60); --bg-warm: oklch(94.8% 0.022 55); --bg-sand: oklch(91% 0.028 58); --ink: oklch(22% 0.018 45); --ink-soft: oklch(38% 0.022 45); --muted: oklch(55% 0.018 50); --line: oklch(86% 0.018 55); --accent: oklch(55% 0.105 35); /* terracotta */ --accent-2: oklch(72% 0.075 30); /* rosé doux pour les fonds sombres */ --accent-3: oklch(48% 0.045 130); /* olive doux */ --card: oklch(99% 0.008 70); --shadow: 0 1px 2px oklch(30% 0.02 50 / .06), 0 12px 30px -12px oklch(30% 0.04 50 / .18); --serif: 'Cormorant Garamond', 'Frank Ruhl Libre', Georgia, serif; --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --hebrew: 'Frank Ruhl Libre', 'Cormorant Garamond', serif; --radius: 2px; --radius-lg: 6px; --pad-section: clamp(80px, 10vw, 160px); --gutter: clamp(20px, 5vw, 64px); --maxw: 1280px; } /* HE → typo & sens de lecture (le dir="rtl" sur fait le reste) */ html[lang="he"] { direction: rtl; } html[lang="he"] body { font-family: var(--hebrew), var(--sans); } html[lang="he"] .serif { font-family: var(--hebrew); font-weight: 400; } /* Reset léger */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Anti-débordement page-wide : empile toutes les protections connues contre les bugs overflow-x d'iOS Safari (notamment en RTL où un sub-pixel rounding peut produire un scroll horizontal fantôme). - `hidden` est le filet pour iOS Safari < 16 / vieux Chromium ; - `clip` (plus moderne) override quand il est compris — préférable car il ne crée pas de scroll container et n'altère pas le sticky ; - `width: 100%` cale le document sur la largeur de son contenant ; - `position: relative` sur body évite que des descendants en absolute puissent s'échapper du flux du document. */ html { overflow-x: hidden; overflow-x: clip; width: 100%; } body { overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; position: relative; } body { font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; } /* Les enfants de grid héritent par défaut de min-width: min-content, ce qui peut faire déborder quand un h1 RTL est plus large que sa colonne. Forcer min-width: 0 leur permet de rétrécir et de wrapper proprement. */ .hero-grid > *, .about-grid > *, .section-head > *, .contact-grid > *, .soins-grid > *, .timeline > *, .credentials > *, .field-row > * { min-width: 0; } /* Couper les très longs mots si nécessaire (titres, blocs de texte) */ h1, h2, h3, blockquote, p, .lede { overflow-wrap: anywhere; } /* Ceinture finale : chaque section top-level se contraint au viewport. Empêche tout descendant échappé (élément absolu, transform, max-content) de propager un débordement au document. */ .topbar, .hero, .ticker, .about, .soins, .deroulement, .pullquote, .contact, footer, main { max-width: 100%; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Container */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* Skip link (accessibilité) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 16px; background: var(--ink); color: var(--bg); font-size: 13px; } .skip-link:focus { left: 16px; top: 16px; } /* Typographie */ .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; } .eyebrow.accent-2 { color: var(--accent-2); } .eyebrow.accent-2::before { background: var(--accent-2); } h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; } h1 { font-size: clamp(44px, 6.2vw, 92px); line-height: 1.08; } h2 { font-size: clamp(34px, 4.4vw, 60px); } h3 { font-size: clamp(22px, 2.2vw, 28px); } p { margin: 0 0 1em; text-wrap: pretty; } .lede { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-soft); max-width: 60ch; line-height: 1.65; } .dim { color: var(--ink-soft); } .on-dark { color: var(--bg) !important; } .on-dark.lede { color: color-mix(in oklab, var(--bg) 75%, transparent) !important; } em { font-style: italic; color: var(--accent); font-weight: 300; } .contact em { color: var(--accent-2); } /* ---------- TOPBAR ---------- */ .topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } .brand-mark { width: 34px; height: 34px; color: var(--ink); flex-shrink: 0; } .brand-mark .dot { fill: var(--accent); } .brand-mark .curve { stroke: currentColor; } .nav { display: flex; gap: 32px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); } .nav a:hover { color: var(--accent); } .top-cta { display: flex; align-items: center; gap: 12px; } .lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; } .lang-switch a { padding: 6px 10px; border-radius: 999px; color: var(--muted); text-transform: uppercase; transition: background .15s, color .15s; } .lang-switch a:hover { color: var(--ink); } .lang-switch a[aria-current="true"] { background: var(--ink); color: var(--bg); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; border: 1px solid transparent; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--accent); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } /* ---------- HERO ---------- */ .hero { padding-top: 60px; padding-bottom: var(--pad-section); position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px); align-items: end; } .hero-copy h1 .ampers { font-style: italic; color: var(--accent); font-weight: 300; } .hero-copy h1 .line2 { display: block; padding-inline-start: 1.2em; } .hero-lede { margin-top: 32px; max-width: 44ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .hero-meta { display: flex; gap: 40px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .hero-meta strong { display: block; color: var(--ink); font-weight: 500; font-size: 14px; margin-bottom: 2px; } /* Portrait : image réelle en noir et blanc chaud */ .portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-sand); margin: 0; } .portrait img { width: 100%; height: 100%; object-fit: cover; /* léger ton chaud sur les photos N&B existantes */ filter: sepia(.18) saturate(.9) contrast(1.02); } .portrait-caption { position: absolute; inset-inline-end: 20px; bottom: 20px; font-style: italic; font-size: 15px; color: var(--ink); background: color-mix(in oklab, var(--bg) 92%, transparent); padding: 10px 14px; max-width: 240px; line-height: 1.35; border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-deco { position: absolute; top: 10%; inset-inline-end: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent-2) 35%, transparent), transparent 65%); filter: blur(40px); pointer-events: none; z-index: 0; } .hero-grid > * { position: relative; z-index: 1; } /* ---------- TICKER ---------- */ .ticker { background: var(--ink); color: var(--bg); padding: 18px 0; overflow: hidden; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.01em; } .ticker-track { display: flex; gap: 48px; white-space: nowrap; animation: ticker-scroll 50s linear infinite; width: max-content; } html[lang="he"] .ticker-track { animation-direction: reverse; } .ticker-track span { display: inline-flex; align-items: center; gap: 48px; } .ticker-track span::after { content: "✦"; color: var(--accent); font-style: normal; font-size: 0.6em; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* ---------- ABOUT ---------- */ .about { padding: var(--pad-section) 0; background: var(--bg-warm); } .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: start; } .about-img { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); background: var(--bg-sand); position: relative; overflow: hidden; margin: 0; } .about-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.16) saturate(.92) contrast(1.02); } .about-sig { position: absolute; bottom: 18px; inset-inline-end: 22px; font-style: italic; font-size: 48px; color: var(--accent); transform: rotate(-4deg); text-shadow: 0 2px 12px color-mix(in oklab, var(--bg) 60%, transparent); } .about-copy h2 { margin-bottom: 32px; } .about-copy p + p { margin-top: 1em; } .sig-row { display: flex; align-items: center; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .sig-row .name { font-size: 22px; font-style: italic; } .sig-row .name .he-name { font-family: var(--hebrew); font-style: normal; margin-inline-start: 8px; font-size: 0.9em; } .sig-row .role { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .cred { border-top: 1px solid var(--line); padding-top: 16px; } .cred .num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); } .cred .lbl { font-size: 12.5px; color: var(--muted); margin-top: 8px; } /* ---------- SOINS ---------- */ .soins { padding: var(--pad-section) 0; } .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; } .section-head .lede { margin-top: 20px; } .soins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .soin { background: var(--bg); transition: background .3s ease; position: relative; display: flex; flex-direction: column; min-height: 360px; } .soin:hover { background: var(--bg-warm); } .soin-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-sand); } .soin-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.85) contrast(1.02); transition: transform .6s ease; } .soin:hover .soin-photo img { transform: scale(1.03); } .soin-body { padding: 32px 32px 36px; display: flex; flex-direction: column; gap: 16px; flex: 1; } .soin .idx { font-style: italic; font-size: 14px; color: var(--accent); } .soin h3 { font-weight: 400; } .soin p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: 40ch; margin-bottom: 0; } .soin .chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; } .chip { font-size: 11px; letter-spacing: 0.05em; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } .soin-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-warm); display: grid; place-items: center; color: var(--accent); } .soin-icon svg { width: 22px; height: 22px; } /* ---------- DÉROULEMENT ---------- */ .deroulement { padding: var(--pad-section) 0; background: var(--bg-warm); } .timeline { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .step { background: var(--bg-warm); padding: 36px 28px 40px; position: relative; } .step .num { font-style: italic; font-size: 56px; color: var(--accent); line-height: 1; margin-bottom: 20px; display: block; } .step h3 { font-size: 22px; margin-bottom: 10px; } .step p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; } .step .time { margin-top: 16px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- PULL QUOTE ---------- */ .pullquote { padding: calc(var(--pad-section) * 0.7) 0; text-align: center; } .pullquote blockquote { font-size: clamp(28px, 3.8vw, 52px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto; } .pullquote cite { display: block; margin-top: 32px; font-style: normal; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ---------- CONTACT ---------- */ .contact { padding: var(--pad-section) 0; background: var(--ink); color: var(--bg); } .contact .section-head { margin-bottom: 48px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); margin-top: 56px; } .info-block { display: flex; flex-direction: column; gap: 28px; } .info-row { border-top: 1px solid color-mix(in oklab, var(--bg) 15%, transparent); padding-top: 20px; } .info-row .lbl { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 55%, transparent); margin-bottom: 8px; } .info-row .val { font-family: var(--serif); font-size: 22px; line-height: 1.3; } .info-row .val a:hover { color: var(--accent-2); text-decoration: underline; } .info-row .note { display: inline-block; margin-top: 6px; font-size: 13px; color: color-mix(in oklab, var(--bg) 60%, transparent); font-family: var(--sans); font-style: normal; letter-spacing: 0.01em; } .form { background: color-mix(in oklab, var(--bg) 8%, transparent); border: 1px solid color-mix(in oklab, var(--bg) 18%, transparent); padding: 36px; border-radius: var(--radius-lg); } .form h3 { margin-bottom: 24px; } .field { display: block; margin-bottom: 20px; } .field label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 70%, transparent); margin-bottom: 8px; display: block; } .field label .opt { letter-spacing: 0.02em; text-transform: none; color: color-mix(in oklab, var(--bg) 50%, transparent); } .field input, .field textarea, .field select { width: 100%; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--bg) 25%, transparent); color: var(--bg); font-family: inherit; font-size: 15px; outline: none; transition: border-color .2s; border-radius: 0; } .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent-2); } .field textarea { resize: vertical; min-height: 80px; line-height: 1.5; } .field select option { color: #111; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .form .btn-primary { background: var(--accent); color: white; } .form .btn-primary:hover { background: var(--accent-2); color: var(--ink); } .form .btn-primary:disabled { opacity: 0.6; cursor: progress; } .form-ok { margin-top: 16px; padding: 14px 16px; background: color-mix(in oklab, var(--accent-2) 22%, transparent); color: var(--bg); font-size: 14px; border-radius: var(--radius); } .form-err { margin-top: 16px; padding: 14px 16px; background: color-mix(in oklab, oklch(60% 0.15 25) 30%, transparent); color: var(--bg); font-size: 14px; border-radius: var(--radius); } .form-note { font-size: 12px; color: color-mix(in oklab, var(--bg) 55%, transparent); margin-top: 20px; margin-bottom: 0; } /* honeypot anti-spam */ .hp { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; } /* ---------- FOOTER ---------- */ footer { padding: 48px 0 40px; background: var(--bg); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; } .foot-copy { margin-top: 8px; font-size: 12.5px; } .foot-links { display: flex; gap: 24px; flex-wrap: wrap; } .foot-links a:hover { color: var(--accent); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1024px) { .soins-grid { grid-template-columns: repeat(2, 1fr); } .timeline { grid-template-columns: repeat(2, 1fr); border-bottom: 0; } .step { border-bottom: 1px solid var(--line); } } @media (max-width: 860px) { .nav { display: none; } .hero-grid, .about-grid, .section-head, .contact-grid { grid-template-columns: 1fr; } .soins-grid { grid-template-columns: 1fr; } .timeline { grid-template-columns: 1fr; } .credentials { grid-template-columns: 1fr 1fr; } .field-row { grid-template-columns: 1fr; } .hero-meta { flex-wrap: wrap; gap: 20px; } .portrait { aspect-ratio: 1 / 1.1; } .topbar-inner { gap: 12px; } .top-cta .btn { display: none; } .lang-switch { padding: 2px; font-size: 10.5px; } .lang-switch a { padding: 5px 8px; } .form { padding: 24px; } .pullquote blockquote { max-width: 18ch; } .hero-copy h1 .line2 { padding-inline-start: 0.6em; } .about-sig { font-size: 36px; bottom: 12px; } /* Sur mobile le blur déco serait plus large que le viewport : on le réduit pour éviter tout débordement, même avec overflow:hidden. */ .hero-deco { width: 240px; height: 240px; inset-inline-end: -40px; } } @media (max-width: 480px) { .credentials { grid-template-columns: 1fr; } .hero { padding-top: 32px; } .hero-actions .btn { padding: 12px 18px; font-size: 12.5px; } }