/* ============================================================ DOUCES VOIES — Servane BREBION Version fusionnée v2.2 + v2.3 Palette sage & clay · Design éditorial ============================================================ */ /* Les Google Fonts sont chargées directement dans le des pages (plus rapide qu'un @import, qui force un chargement en cascade). */ /* ─── Variables ─── */ :root { --font-heading: "Playfair Display", ui-serif, Georgia, serif; --font-body: "Nunito Sans", ui-sans-serif, system-ui, sans-serif; /* Aliases de compatibilité v2.2 */ --font-serif: var(--font-heading); --font-sans: var(--font-body); --r-sm: 0.375rem; --r: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-2xl: 2.25rem; --r-full: 9999px; /* Base */ --bg: oklch(0.993 0.005 78); --fg: oklch(0.185 0.012 42); --muted: oklch(0.960 0.007 72); --muted-fg: oklch(0.525 0.014 45); --border: oklch(0.912 0.008 72); --card: oklch(1 0 0); --ring: oklch(0.82 0.060 152); /* Sage — accent principal */ --sage-bg: oklch(0.958 0.022 152); --sage-lt: oklch(0.908 0.048 152); --sage: oklch(0.812 0.082 152); --sage-dk: oklch(0.535 0.092 152); /* Aliases v2.2 */ --s50: var(--sage-bg); --s100: var(--sage-lt); --s200: oklch(0.872 0.068 152); --s300: var(--sage); --s500: var(--sage-dk); /* Pêche — accent secondaire */ --peach-bg: oklch(0.965 0.018 58); --peach-lt: oklch(0.912 0.048 55); --peach: oklch(0.842 0.078 50); /* Aliases v2.2 */ --o50: var(--peach-bg); --o100: oklch(0.957 0.037 60); --o200: var(--peach-lt); --o300: var(--peach); --o400: oklch(0.752 0.102 51); --o500: oklch(0.630 0.108 47); --o600: oklch(0.512 0.094 44); --o700: oklch(0.402 0.078 41); /* Lavande douce */ --l100: oklch(0.957 0.021 296); --l200: oklch(0.892 0.050 293); /* Crème */ --cream: oklch(0.980 0.012 78); /* Clay — CTA principal */ --primary: oklch(0.538 0.088 44); --primary-hv: oklch(0.462 0.080 43); --primary-fg: oklch(0.995 0.003 80); /* Charbon — bouton sombre */ --dark: oklch(0.222 0.014 42); --dark-hv: oklch(0.172 0.012 42); /* Ombres */ --sh-xs: 0 1px 3px oklch(0.18 0.02 42 / 0.07); --sh-sm: 0 2px 8px -1px oklch(0.18 0.02 42 / 0.10); --sh-md: 0 4px 20px -3px oklch(0.18 0.02 42 / 0.13); --sh-lg: 0 8px 36px -6px oklch(0.18 0.02 42 / 0.18); --sh-xl: 0 12px 48px -8px oklch(0.18 0.02 42 / 0.22); --sh-color: 0 10px 36px -8px oklch(0.538 0.088 44 / 0.30); /* Gradients */ --grad-hero: radial-gradient(ellipse 800px 500px at 90% -10%, oklch(0.958 0.022 152 / 0.6) 0%, transparent 65%), radial-gradient(ellipse 600px 400px at -5% 40%, oklch(0.965 0.018 58 / 0.5) 0%, transparent 58%); --grad-cta: linear-gradient(135deg, var(--sage-bg) 0%, oklch(0.970 0.015 78) 100%); } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; border-color: var(--border); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-weight: 400; line-height: 1.72; -webkit-font-smoothing: antialiased; overflow-x: hidden; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } ul { margin: 0; } em { font-style: italic; } ::selection { background: var(--sage-lt); color: var(--fg); } /* ─── Accessibilité ─── */ :where(a,button,[role="button"],input,select,textarea):focus-visible { outline: 2.5px solid var(--ring); outline-offset: 3px; border-radius: var(--r-sm); } .skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--dark); color: white; padding: 0.65rem 1.25rem; border-radius: var(--r); font-size: 0.875rem; font-weight: 600; z-index: 200; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 1rem; } /* ─── Typographie ─── */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; color: var(--fg); margin: 0; line-height: 1.10; } h1 { font-size: clamp(2.6rem, 5.2vw, 4.8rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); letter-spacing: -0.02em; } h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.28; } h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; } /* ─── Layout ─── */ .container { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .container-prose { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .container-sm { max-width: 52rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } /* ─── Eyebrow ─── */ .eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--sage-dk); margin: 0; } /* ─── Chip (v2.2) ─── */ .chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.9rem 0.35rem 0.55rem; border-radius: var(--r-full); background: var(--sage-bg); border: 1px solid var(--sage-lt); color: var(--sage-dk); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .chip-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--sage-dk); animation: pulse-dot 2.8s ease-in-out infinite; } /* (@keyframes pulse-dot est défini une seule fois, section availability badge) */ /* ─── Boutons ─── */ .btn-dark { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.6rem; border-radius: var(--r-full); background: var(--dark); color: white; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; border: none; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap; } .btn-dark:hover { background: var(--dark-hv); transform: translateY(-1px); } .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.75rem; border-radius: var(--r-full); background: var(--primary); color: var(--primary-fg); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.22s, box-shadow 0.22s; white-space: nowrap; box-shadow: var(--sh-sm); } .btn-primary:hover { background: var(--primary-hv); transform: translateY(-2px); box-shadow: var(--sh-md); } .btn-primary:active { transform: translateY(0); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.65rem; border-radius: var(--r-full); border: 1.5px solid var(--border); background: transparent; color: var(--fg); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; white-space: nowrap; } .btn-outline:hover { background: var(--muted); border-color: oklch(0.72 0.008 72); transform: translateY(-1px); } .btn-ghost { /* alias pour compatibilité v2.2 */ display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.65rem; border-radius: var(--r-full); border: 1.5px solid var(--border); background: transparent; color: var(--fg); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s; white-space: nowrap; } .btn-ghost:hover { background: var(--muted); transform: translateY(-1px); } /* ─── Navigation ─── */ .site-header { position: sticky; top: 0; z-index: 100; transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s; } .site-header.scrolled { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); background: oklch(0.993 0.005 78 / 0.90); box-shadow: 0 1px 0 var(--border); } .site-header.transparent { background: transparent; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo-link { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; } .logo-mark { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, var(--sage-lt), var(--sage)); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--sh-xs); } .logo-mark-letter { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; color: white; line-height: 1; } /* Alias v2.2 */ .logo-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sage-dk); flex-shrink: 0; } .logo-text { line-height: 1.22; } .logo-name { display: block; font-family: var(--font-heading); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; color: var(--fg); } .logo-subtitle { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-fg); font-weight: 600; } .nav-desktop { display: none; } .nav-desktop-list { display: flex; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; } .nav-link { display: block; padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 500; color: var(--muted-fg); border-radius: var(--r-full); transition: color 0.2s, background 0.2s; text-decoration: none; } .nav-link:hover { color: var(--fg); background: var(--muted); } .nav-link.active { color: var(--fg); } .nav-desktop-list .btn-primary, .nav-desktop-list .btn-primary.active { color: var(--primary-fg); background: var(--primary); padding: 0.5rem 1.1rem; font-size: 0.85rem; } .nav-desktop-list .btn-primary:hover, .nav-desktop-list .btn-primary.active:hover { color: var(--primary-fg); background: var(--primary-hv); transform: translateY(-1px); } .nav-desktop-list .btn-dark, .nav-desktop-list .btn-dark.active { color: white; background: var(--dark); padding: 0.5rem 1.1rem; font-size: 0.85rem; } .nav-desktop-list .btn-dark:hover { background: var(--dark-hv); transform: translateY(-1px); } .nav-cta-btn { margin-left: 0.3rem; } .nav-mobile-toggle { display: flex; align-items: center; gap: 0.5rem; } .menu-btn { padding: 0.5rem; border-radius: var(--r-full); background: none; border: none; cursor: pointer; color: var(--fg); transition: background 0.2s; display: flex; align-items: center; } .menu-btn:hover { background: var(--muted); } .mobile-menu { display: none; border-top: 1px solid var(--border); background: oklch(0.993 0.005 78 / 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .mobile-menu.open { display: block; } .mobile-menu-inner { padding: 1.25rem clamp(1.25rem, 5vw, 3rem); display: flex; flex-direction: column; gap: 0.1rem; } .mobile-nav-link { display: block; padding: 0.85rem 0; font-size: 1rem; font-weight: 500; color: var(--fg); border-bottom: 1px solid oklch(0.912 0.008 72 / 0.55); text-decoration: none; } .mobile-nav-link:last-of-type { border-bottom: none; } @media (min-width: 768px) { .nav-desktop { display: flex; } .nav-mobile-toggle { display: none; } } /* Compact nav at 768–959px : hide subtitle + tighter links so the nav fits without zooming out */ @media (max-width: 959px) { .logo-subtitle { display: none; } } @media (min-width: 768px) and (max-width: 959px) { .nav-link { padding: 0.38rem 0.52rem; font-size: 0.8rem; } .nav-desktop-list .btn-primary { padding: 0.38rem 0.75rem; font-size: 0.8rem; } .nav-desktop-list { gap: 0; } } /* ─── Footer ─── */ .site-footer { margin-top: 0; border-top: 1px solid var(--border); background: var(--cream); } .footer-grid { padding: 4rem clamp(1.25rem,5vw,3rem) 3rem; display: grid; gap: 3rem; max-width: 76rem; margin-inline: auto; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; margin: 0; } .footer-brand-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--sage-dk); margin: 0.4rem 0 0; } .footer-brand-desc { font-size: 0.875rem; color: var(--muted-fg); max-width: 24rem; margin: 1.25rem 0 0; line-height: 1.65; } .footer-col-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dk); margin: 0 0 1rem; } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .footer-link { font-size: 0.875rem; color: var(--muted-fg); text-decoration: none; transition: color 0.2s; } .footer-link:hover { color: var(--sage-dk); } .footer-contact-text { font-size: 0.875rem; color: var(--muted-fg); margin: 0; line-height: 1.9; } .footer-bottom { border-top: 1px solid var(--border); max-width: 76rem; margin-inline: auto; padding: 1.25rem clamp(1.25rem,5vw,3rem); } .footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-fg); } /* ─── Animation ─── */ @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .animate-rise { animation: rise 0.75s cubic-bezier(0.4,0,0.2,1) both; } /* ─── HERO ─── */ .hero-section { padding-block: 5rem 4rem; overflow: hidden; background-image: var(--grad-hero); min-height: calc(100svh - 68px); display: flex; align-items: center; } .hero-grid { display: grid; gap: 3.5rem; align-items: center; width: 100%; } /* Les enfants d'une grille ont min-width:auto par défaut : la largeur intrinsèque de la photo peut alors faire déborder la colonne sur mobile. */ .hero-grid > * { min-width: 0; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 5rem; } .hero-section { padding-block: 5.5rem 5rem; } } .hero-badge { margin-bottom: 1.5rem; } .hero-eyebrow { margin-bottom: 1.25rem; } .hero-title { letter-spacing: -0.025em; } .hero-em { font-style: italic; color: var(--sage-dk); } .hero-desc { margin-top: 1.5rem; font-size: 1.05rem; color: var(--muted-fg); max-width: 38rem; line-height: 1.78; } .hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.875rem; } .hero-trust { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; } /* Style v2.3 trust items */ .trust-item { display: flex; align-items: center; gap: 0.65rem; } .trust-icon { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sage-bg); display: grid; place-items: center; font-size: 0.85rem; flex-shrink: 0; } .trust-text { font-size: 0.85rem; color: var(--muted-fg); line-height: 1.3; } .trust-text strong { display: block; color: var(--fg); font-weight: 600; font-size: 0.9rem; } /* Style v2.2 trust stats (alias) */ .trust-stat { text-align: left; } .trust-val { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 500; color: var(--fg); display: block; line-height: 1; } .trust-label { font-size: 0.77rem; color: var(--muted-fg); display: block; margin-top: 0.2rem; } .trust-sep { width: 1px; height: 2rem; background: var(--border); flex-shrink: 0; } /* Blob image hero — intégration douce : halo dégradé, liseré organique, photo légèrement harmonisée avec la palette et voile crème sur les bords. */ .hero-blob-wrap { position: relative; display: flex; justify-content: center; } /* Halo de fond : dégradé sauge → pêche, respire lentement */ .hero-blob-wrap::before { content: ""; position: absolute; inset: 8% -6% -10% 10%; background: linear-gradient(160deg, var(--sage-bg) 25%, var(--peach-bg) 100%); border-radius: 63% 37% 55% 45% / 50% 48% 52% 50%; z-index: 0; animation: blob-drift 18s ease-in-out infinite alternate; } /* Fin liseré organique décalé, pour la profondeur */ .hero-blob-wrap::after { content: ""; position: absolute; inset: 2% 0 4% 2%; border: 1.5px solid oklch(0.812 0.082 152 / 0.45); border-radius: 48% 52% 55% 45% / 52% 46% 54% 48%; z-index: 0; animation: blob-drift 18s ease-in-out infinite alternate-reverse; } .hero-blob-img { position: relative; z-index: 1; width: 88%; aspect-ratio: 4/5; border-radius: 52% 48% 44% 56% / 55% 44% 56% 45%; overflow: hidden; box-shadow: 0 18px 44px -18px oklch(0.35 0.05 152 / 0.35); animation: blob-morph 18s ease-in-out infinite alternate; } .hero-blob-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; /* Pas de filter : l'harmonisation (ombres éclaircies, voile mat chaud) est faite dans le fichier image lui-même — source : _sources/ */ } /* Voile crème très léger sur les bords : fond la photo dans la page */ .hero-blob-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 2.6rem oklch(0.98 0.012 78 / 0.40); pointer-events: none; } @keyframes blob-morph { 0% { border-radius: 52% 48% 44% 56% / 55% 44% 56% 45%; } 50% { border-radius: 46% 54% 52% 48% / 48% 52% 46% 54%; } 100% { border-radius: 55% 45% 47% 53% / 52% 47% 55% 45%; } } @keyframes blob-drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(2.5deg) scale(1.02); } } @media (prefers-reduced-motion: reduce) { .hero-blob-wrap::before, .hero-blob-wrap::after, .hero-blob-img { animation: none; } } /* Hero visuel v2.2 (alias) */ .hero-visual { position: relative; } .hero-img-wrap { aspect-ratio: 4/5; border-radius: var(--r-2xl); overflow: hidden; background: var(--muted); box-shadow: var(--sh-xl); } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; } /* ─── Page hero générique ─── */ .page-hero { padding: 5rem clamp(1.25rem,5vw,3rem) 4rem; max-width: 76rem; margin-inline: auto; } .page-hero h1 { margin-top: 0.85rem; } .page-hero > p { margin-top: 1.5rem; font-size: 1.1rem; color: var(--muted-fg); max-width: 52rem; line-height: 1.75; } .page-hero.centered { text-align: center; } .page-hero.centered h1 { margin-inline: auto; } .page-hero.centered > p { margin-inline: auto; } /* ─── Bande stats ─── */ .stats-band { border-block: 1px solid var(--border); background: var(--cream); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 76rem; margin-inline: auto; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-item { padding: 2rem 1.5rem; border-right: 1px solid var(--border); text-align: center; } .stat-item:last-child { border-right: none; } @media (max-width: 767px) { .stat-item:nth-child(2) { border-right: none; } .stat-item:nth-child(3) { border-right: 1px solid var(--border); } .stat-item { border-bottom: 1px solid var(--border); padding: 1.5rem 1rem; } .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; } } .stat-value { font-family: var(--font-heading); font-size: 2rem; letter-spacing: -0.03em; color: var(--sage-dk); margin: 0; line-height: 1; } .stat-label { margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted-fg); line-height: 1.4; } /* ─── Pour qui ? ─── */ .pour-qui-section { padding: 5.5rem clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; } .pour-qui-grid { display: grid; gap: 1.25rem; margin-top: 3rem; } @media (min-width: 640px) { .pour-qui-grid { grid-template-columns: repeat(3, 1fr); } } .pq-card { padding: 2rem 1.75rem; border-radius: var(--r-2xl); border: 1px solid var(--border); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } .pq-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); } /* Variantes v2.3 */ .pq-sage { background: linear-gradient(155deg, var(--sage-bg), oklch(0.975 0.015 152)); border-color: oklch(0.870 0.042 152); } .pq-peach { background: linear-gradient(155deg, var(--peach-bg), oklch(0.978 0.012 58)); border-color: oklch(0.882 0.038 55); } .pq-cream { background: linear-gradient(155deg, var(--cream), oklch(0.988 0.008 72)); border-color: var(--border); } /* Variantes v2.2 (mappées sur les couleurs v2.3) */ .pq-personne { background: linear-gradient(155deg, var(--peach-bg), oklch(0.978 0.012 58)); border-color: oklch(0.882 0.038 55); } .pq-proche { background: linear-gradient(155deg, var(--sage-bg), oklch(0.975 0.015 152)); border-color: oklch(0.870 0.042 152); } .pq-pro { background: linear-gradient(155deg, var(--cream), oklch(0.988 0.008 72)); border-color: var(--border); } .pq-icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1.25rem; } .pq-sage .pq-icon, .pq-proche .pq-icon { background: var(--sage-lt); } .pq-peach .pq-icon, .pq-personne .pq-icon { background: var(--peach-lt); } .pq-cream .pq-icon, .pq-pro .pq-icon { background: var(--muted); } .pq-emoji { font-size: 2rem; margin-bottom: 1rem; display: block; } .pq-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; margin: 0 0 0.6rem; } .pq-desc { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.65; } .pq-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.45rem; } .pq-list li { font-size: 0.85rem; color: var(--muted-fg); display: flex; align-items: flex-start; gap: 0.5rem; } .pq-list li::before { content: "→"; color: var(--sage-dk); flex-shrink: 0; font-size: 0.78rem; margin-top: 0.05rem; } /* ─── Situations — pills uniformisées ─── */ .situations-section { text-align: center; } .section-intro { margin: 1rem auto 0; color: var(--muted-fg); max-width: 42rem; } .situations-grid { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; max-width: 54rem; margin-inline: auto; } /* Style uniforme pour tous les pills */ .situation-pill { display: inline-flex; align-items: center; padding: 0.65rem 1.25rem; border-radius: var(--r-full); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; text-decoration: none; border: 1.5px solid; cursor: pointer; background: var(--card); border-color: var(--border); color: var(--fg); } .situation-pill:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--sage); background: var(--sage-bg); } /* Variante mise en valeur */ .situation-pill-highlight { background: var(--sage-bg); border-color: var(--sage-lt); color: var(--sage-dk); } /* Aliases pour la compatibilité v2.2 — tous neutres maintenant */ .situation-pill-default { background: var(--card); border-color: var(--border); color: var(--fg); } .pill-sage { background: var(--sage-bg); border-color: var(--sage-lt); color: var(--sage-dk); } .pill-rose { background: var(--peach-bg); border-color: var(--peach-lt); color: var(--o600); } /* ─── Approche / Split section ─── */ .split-section { max-width: 76rem; margin: 0 auto; padding: 5rem clamp(1.25rem,5vw,3rem); display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 768px) { .split-section { grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; } } .split-section p { color: var(--muted-fg); margin: 1.25rem 0 1.75rem; font-size: 1.02rem; line-height: 1.75; } .split-text p { color: var(--muted-fg); margin: 1.25rem 0 0; font-size: 1.02rem; line-height: 1.75; } .split-text .btn-primary { margin-top: 2rem; } .feature-panel { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-xl); padding: 2rem; box-shadow: var(--sh-md); } .feature-panel h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; } .check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; } .check-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--muted-fg); } .check-list li::before { content: "✓"; color: var(--sage-dk); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem; } /* Blob sections alternées */ .split-blob-wrap { position: relative; display: flex; justify-content: center; } .split-blob-peach::before { content: ""; position: absolute; inset: 8% 8% -8% -8%; background: var(--peach-bg); border-radius: 44% 56% 63% 37% / 56% 42% 58% 44%; z-index: 0; } .split-blob-sage::before { content: ""; position: absolute; inset: -6% -8% 10% 10%; background: var(--sage-bg); border-radius: 57% 43% 44% 56% / 48% 55% 45% 52%; z-index: 0; } .split-blob-img { position: relative; z-index: 1; width: 92%; aspect-ratio: 4/5; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-lg); } .split-blob-img img { width: 100%; height: 100%; object-fit: cover; } /* ─── Process steps ─── */ .process-section { padding: 0 clamp(1.25rem,5vw,3rem) 5rem; max-width: 76rem; margin-inline: auto; } /* Version v2.2 : grille */ .process-grid { margin-top: 3.5rem; display: grid; gap: 2rem; } @media (min-width: 768px) { .process-grid { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.5rem; align-items: start; } } .process-step-num { width: 3.75rem; height: 3.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--sage-bg); border: 2px solid var(--sage-lt); font-family: var(--font-heading); font-size: 1.1rem; color: var(--sage-dk); font-weight: 500; } .process-step-title { margin-top: 1.25rem; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; color: var(--fg); } .process-step-desc { margin-top: 0.6rem; font-size: 0.875rem; color: var(--muted-fg); line-height: 1.65; max-width: 20rem; } .process-arrow { display: none; } @media (min-width: 768px) { .process-arrow { display: flex; align-items: center; justify-content: center; padding-top: 1.7rem; color: var(--sage); font-size: 1.5rem; } } /* Version v2.3 : tableau */ .process-inner { max-width: 76rem; margin-inline: auto; } .process-head { max-width: 36rem; margin-bottom: 3.5rem; } .process-head h2 { margin-top: 0.75rem; } .process-table { display: flex; flex-direction: column; } .process-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; align-items: start; padding: 2rem 0; border-top: 1px solid var(--border); } .process-row:last-child { border-bottom: 1px solid var(--border); } @media (min-width: 640px) { .process-row { grid-template-columns: 3rem 1.2fr 1.8fr; gap: 2.5rem; align-items: baseline; } } .process-num { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; color: var(--muted-fg); font-style: italic; padding-top: 0.15rem; } .process-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; color: var(--fg); margin: 0; line-height: 1.3; } .process-desc { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.68; margin: 0; } @media (max-width: 639px) { .process-desc { grid-column: 2; margin-top: 0.4rem; } } /* ─── CTA band ─── */ .cta-band { padding: 0 clamp(1.25rem,5vw,3rem) 6rem; max-width: 76rem; margin-inline: auto; } .cta-band-inner { border-radius: var(--r-2xl); background: var(--sage-bg); border: 1px solid var(--sage-lt); padding: 4.5rem 2rem; text-align: center; position: relative; overflow: hidden; } .cta-band-inner::before { content: ""; position: absolute; inset: -30% -20% -10% auto; width: 55%; background: radial-gradient(circle, var(--peach-bg), transparent 70%); pointer-events: none; } .cta-band-dots { position: absolute; left: 2rem; top: 2rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; opacity: 0.35; } .cta-band-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--sage-dk); } .cta-band-inner > * { position: relative; } .cta-band-inner h2 { max-width: 34rem; margin-inline: auto; } .cta-band-inner p { margin-top: 1.1rem; color: var(--muted-fg); max-width: 32rem; margin-inline: auto; } .cta-band-inner .btn-primary { margin-top: 2.25rem; } .cta-band-inner .btn-dark { margin-top: 2.25rem; position: relative; } /* CTA compact */ .cta-compact { padding: 0 clamp(1.25rem,5vw,3rem) 6rem; max-width: 76rem; margin-inline: auto; } .cta-compact-inner { background: var(--sage-bg); border: 1px solid var(--sage-lt); border-radius: var(--r-2xl); padding: 3rem 2.5rem; display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 640px) { .cta-compact-inner { grid-template-columns: auto 1fr auto; gap: 2rem; } } .cta-compact-text { min-width: 0; } .cta-compact-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--sage-lt); display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; } .cta-compact-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; margin: 0 0 0.35rem; } .cta-compact-desc { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.65; margin: 0; } /* ─── Services (accompagnements) — v2.2 cards ─── */ .services-grid { padding: 0 clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; display: grid; gap: 1.25rem; } .service-card { border-radius: var(--r-xl); border: 1.5px solid var(--border); background: var(--card); padding: 2rem; display: grid; gap: 1.5rem; box-shadow: var(--sh-sm); transition: border-color 0.25s, box-shadow 0.25s; } .service-card:hover { border-color: var(--sage); box-shadow: var(--sh-md); } @media (min-width: 768px) { .service-card { grid-template-columns: auto 1fr 1fr; padding: 2.5rem; gap: 2rem; } } .service-icon-wrap { width: 3rem; height: 3rem; border-radius: var(--r); background: var(--sage-bg); border: 1px solid var(--sage-lt); display: grid; place-items: center; font-size: 1.3rem; } .service-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; margin: 0; } .service-desc { color: var(--muted-fg); margin: 0.7rem 0 0; font-size: 0.95rem; line-height: 1.72; } .service-public { margin-top: 1rem; font-size: 0.875rem; } .service-public-label { font-weight: 700; } .service-public-text { color: var(--muted-fg); } .service-benefits { border-top: 1px solid var(--border); padding-top: 1.5rem; } @media (min-width: 768px) { .service-benefits { border-top: none; border-left: 1px solid var(--border); padding-left: 2rem; padding-top: 0; } } .service-benefits-title { margin: 0; } .benefits-list { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.875rem; } .benefits-list li { display: flex; align-items: flex-start; gap: 0.6rem; } .benefit-dot { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--sage-dk); margin-top: 0.5rem; flex-shrink: 0; } /* Services v2.3 (rows) */ .services-full { padding: 0 clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; display: flex; flex-direction: column; } .service-row { display: grid; gap: 2rem; align-items: start; padding: 3.5rem 0; border-bottom: 1px solid var(--border); } .service-row:first-child { border-top: 1px solid var(--border); } @media (min-width: 768px) { .service-row { grid-template-columns: 3rem 1fr 1.1fr; gap: 3rem; align-items: center; } } .service-num { font-family: var(--font-heading); font-size: 1.5rem; font-style: italic; color: var(--sage); font-weight: 400; } .service-title-v3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; margin: 0; } .service-desc-v3 { color: var(--muted-fg); margin: 0.7rem 0 0; font-size: 0.95rem; line-height: 1.72; } .service-public-v3 { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-fg); } .service-public-v3 strong { color: var(--fg); } .service-benefits-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dk); margin: 0 0 0.85rem; } .benefits-list-v3 { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .benefits-list-v3 li { font-size: 0.88rem; color: var(--muted-fg); display: flex; align-items: flex-start; gap: 0.6rem; } .benefits-list-v3 li::before { content: "→"; color: var(--sage-dk); flex-shrink: 0; font-size: 0.8rem; margin-top: 0.05rem; } /* ─── Services mini (index v2.3) ─── */ .services-mini-section { background: var(--cream); padding: 5.5rem clamp(1.25rem,5vw,3rem); border-block: 1px solid var(--border); } .services-mini-inner { max-width: 76rem; margin-inline: auto; } .services-mini-head { max-width: 40rem; } .services-mini-head h2 { margin-top: 0.75rem; } .services-mini-grid { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .services-mini-grid { grid-template-columns: repeat(3, 1fr); } } .svc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 1.5rem; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .svc-card:hover { border-color: var(--sage); box-shadow: var(--sh-sm); transform: translateY(-2px); } .svc-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--r); background: var(--sage-bg); display: grid; place-items: center; font-size: 1.1rem; margin-bottom: 1rem; } .svc-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; margin: 0; line-height: 1.3; } .svc-desc { font-size: 0.84rem; color: var(--muted-fg); margin: 0.5rem 0 0; line-height: 1.6; } /* ─── FAQ ─── */ .faq-section { padding: 5.5rem clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; } .faq-head { max-width: 36rem; margin-bottom: 3rem; } .faq-head h2 { margin-top: 0.75rem; } .faq-hero { padding: 5rem clamp(1.25rem,5vw,3rem) 2rem; max-width: 76rem; margin-inline: auto; } .faq-hero h1 { margin-top: 0.85rem; max-width: 36rem; } .faq-hero > p { margin-top: 1.25rem; font-size: 1rem; color: var(--muted-fg); max-width: 36rem; line-height: 1.72; } .faq-title { margin-top: 0.75rem; } .faq-list { border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-size: 1rem; font-weight: 600; font-family: var(--font-body); color: var(--fg); padding: 1.4rem 0; } .faq-toggle { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; color: var(--fg); font-size: 1.1rem; transition: background 0.2s, border-color 0.2s, transform 0.25s; flex-shrink: 0; } .faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--sage-bg); border-color: var(--sage); } .faq-answer { display: none; padding-bottom: 1.5rem; font-size: 0.95rem; color: var(--muted-fg); line-height: 1.72; max-width: 48rem; } .faq-item.open .faq-answer { display: block; } /* ─── Contact ─── */ .contact-section { padding: 4.5rem clamp(1.25rem,5vw,3rem) 6rem; max-width: 76rem; margin-inline: auto; display: grid; gap: 3rem; } @media (min-width: 768px) { .contact-section { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; padding-top: 5.5rem; } } .contact-left h1 { letter-spacing: -0.025em; margin-top: 0.75rem; } .contact-left > p { margin-top: 1.25rem; color: var(--muted-fg); font-size: 1rem; line-height: 1.72; max-width: 26rem; } .contact-info-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; } .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; } .contact-info-icon-wrap { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sage-bg); display: grid; place-items: center; font-size: 0.85rem; flex-shrink: 0; margin-top: 0.1rem; } .contact-info-label { font-weight: 700; font-size: 0.85rem; margin: 0; color: var(--fg); } .contact-info-value { font-size: 0.875rem; color: var(--muted-fg); margin: 0.1rem 0 0; } .contact-info-value a { color: var(--fg); } .contact-info-value a:hover { color: var(--sage-dk); text-decoration: underline; } .contact-note { margin-top: 2rem; padding: 1.1rem; background: var(--sage-bg); border-radius: var(--r-lg); border: 1px solid var(--sage-lt); font-size: 0.875rem; color: var(--sage-dk); line-height: 1.6; } .contact-reassurance { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--border); } .contact-reassurance-item { display: flex; align-items: flex-start; gap: 0.85rem; } .contact-reassurance-icon { width: 2rem; height: 2rem; flex-shrink: 0; background: var(--sage-bg); border-radius: 50%; display: grid; place-items: center; color: var(--sage-dk); margin-top: 0.1rem; } .contact-reassurance-title { font-weight: 700; font-size: 0.875rem; margin: 0; color: var(--fg); } .contact-reassurance-desc { font-size: 0.82rem; color: var(--muted-fg); margin: 0.15rem 0 0; line-height: 1.55; } .contact-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 2.5rem; box-shadow: var(--sh-sm); } @media (min-width: 640px) { .contact-form { padding: 3rem; } } .form-title { font-family: var(--font-heading); font-size: 1.35rem; margin: 0 0 0.25rem; letter-spacing: -0.02em; } .form-subtitle { font-size: 0.875rem; color: var(--muted-fg); margin-bottom: 2rem; } .form-body { display: flex; flex-direction: column; gap: 1.25rem; } .form-row { display: grid; gap: 1.25rem; } @media (min-width: 540px) { .form-row.grid-2 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field-label { font-size: 0.85rem; font-weight: 600; color: var(--fg); } .field-required { color: var(--primary); margin-left: 0.15rem; } .field-hint { font-size: 0.78rem; color: var(--muted-fg); } .input { width: 100%; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--bg); padding: 0.85rem 1rem; font-size: 0.95rem; font-family: var(--font-body); color: var(--fg); transition: border-color 0.2s, box-shadow 0.2s; } .input::placeholder { color: oklch(0.68 0.010 55); } .input:hover { border-color: oklch(0.78 0.012 72); } .input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-bg); } .form-btn { width: 100%; justify-content: center; margin-top: 0.5rem; } .form-footnote { text-align: center; font-size: 0.75rem; color: var(--muted-fg); margin: 0.75rem 0 0; } .form-success { padding: 3rem 0; text-align: center; } .form-success-icon { width: 3.5rem; height: 3.5rem; margin-inline: auto; border-radius: 50%; background: var(--sage-bg); display: grid; place-items: center; font-size: 1.4rem; } .form-success h2 { margin-top: 1.5rem; font-size: 1.5rem; } .form-success p { max-width: 22rem; margin: 0.75rem auto 0; color: var(--muted-fg); font-size: 0.9rem; } .form-success-btn { margin-top: 2rem; justify-content: center; } /* ─── About ─── */ .about-cols { padding: 5.5rem clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; display: grid; gap: 4rem; } @media (min-width: 900px) { .about-cols { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } } .about-cols-heading { font-family: var(--font-heading); font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .about-cols > div > p { color: var(--muted-fg); font-size: 1rem; line-height: 1.75; margin: 0 0 1.75rem; } /* Parcours timeline */ .parcours-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; } .parcours-item { display: grid; grid-template-columns: 1rem 1fr; gap: 0 1.25rem; padding-bottom: 2.25rem; position: relative; } .parcours-dot { width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(135deg, var(--sage), var(--sage-dk)); box-shadow: 0 0 0 3px var(--sage-bg); flex-shrink: 0; margin-top: 0.2rem; position: relative; z-index: 1; } .parcours-item:not(:last-child) .parcours-dot::after { content: ""; position: absolute; left: calc(50% - 0.5px); top: 1.1rem; bottom: -2.25rem; width: 1px; background: var(--border); } .parcours-date { font-size: 0.71rem; font-weight: 700; color: var(--sage-dk); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.2rem; } .parcours-role { font-weight: 700; color: var(--fg); font-size: 0.92rem; margin: 0; line-height: 1.35; } .parcours-desc { font-size: 0.875rem; color: var(--muted-fg); margin: 0.45rem 0 0; line-height: 1.65; } /* Formation */ .formation-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.9rem; } .formation-item { display: flex; gap: 1rem; align-items: flex-start; } .formation-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sage-dk); flex-shrink: 0; margin-top: 0.45rem; } .formation-name { font-size: 0.9rem; color: var(--fg); font-weight: 600; margin: 0; } .formation-school { font-size: 0.84rem; color: var(--muted-fg); margin: 0.15rem 0 0; } /* Values */ .values-grid { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .value-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); transition: border-color 0.2s; } .value-card:hover { border-color: var(--sage); } .value-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sage-bg); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; } .value-title { font-weight: 700; font-size: 0.95rem; color: var(--fg); margin: 0; } .value-desc { font-size: 0.88rem; color: var(--muted-fg); margin: 0.2rem 0 0; line-height: 1.6; } /* Citation */ .quote-section { padding: 5.5rem clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; display: grid; gap: 3rem; align-items: center; border-top: 1px solid var(--border); background: var(--cream); } @media (min-width: 768px) { .quote-section { grid-template-columns: 1fr 1fr; gap: 5rem; } } .quote-blob-wrap { position: relative; display: flex; justify-content: center; } .quote-blob-wrap::before { content: ""; position: absolute; inset: -5% 8% 8% -8%; background: var(--peach-bg); border-radius: 58% 42% 50% 50% / 45% 52% 48% 55%; z-index: 0; } .quote-blob-img { position: relative; z-index: 1; width: 90%; aspect-ratio: 4/5; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-lg); } .quote-blob-img img { width: 100%; height: 100%; object-fit: cover; } .quote-content { display: flex; flex-direction: column; justify-content: center; } .quote-mark { font-family: var(--font-heading); font-size: 5rem; line-height: 0.8; color: var(--sage-lt); margin-bottom: 1rem; display: block; } .quote-text { font-family: var(--font-heading); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-style: italic; line-height: 1.45; color: var(--fg); } .quote-attr { margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted-fg); } /* Accompagnements hero */ .accomp-hero-section { padding-block: 5rem 4rem; overflow: hidden; background-image: var(--grad-hero); } .accomp-hero-grid { display: grid; gap: 3.5rem; align-items: center; max-width: 76rem; margin-inline: auto; padding-inline: clamp(1.25rem,5vw,3rem); } @media (min-width: 900px) { .accomp-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 5rem; } .accomp-hero-section { padding-block: 5.5rem 5rem; } } /* ─── Blog audience cards ─── */ .blog-audience-section { padding: 0 clamp(1.25rem,5vw,3rem) 3.5rem; max-width: 76rem; margin-inline: auto; } .blog-audience-intro { margin-top: 0.75rem; color: var(--muted-fg); font-size: 1rem; line-height: 1.7; max-width: 38rem; } .blog-audience-grid { display: grid; gap: 1.25rem; margin-top: 2rem; } @media (min-width: 640px) { .blog-audience-grid { grid-template-columns: repeat(3, 1fr); } } .blog-audience-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.75rem 1.5rem; border-radius: var(--r-xl); border: 1.5px solid var(--border); background: var(--card); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; } .blog-audience-card:hover { border-color: var(--sage-lt); box-shadow: var(--sh-sm); } .blog-audience-icon { font-size: 1.6rem; line-height: 1; display: block; } .blog-audience-label { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--fg); margin: 0.25rem 0 0; } .blog-audience-desc { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.6; margin: 0; flex: 1; } .blog-audience-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; color: var(--sage-dk); margin-top: 0.5rem; } /* ─── Blog ─── */ .blog-list { padding: 0 clamp(1.25rem,5vw,3rem) 3rem; max-width: 76rem; margin-inline: auto; } .blog-list-grid { display: flex; flex-direction: column; } .blog-item { display: grid; gap: 1rem; padding: 1.75rem 0.75rem; border-top: 1px solid var(--border); text-decoration: none; border-radius: var(--r); transition: background 0.2s; } .blog-item:hover { background: var(--sage-bg); } @media (min-width: 768px) { .blog-item { grid-template-columns: 1fr 2fr auto; gap: 1.5rem; align-items: baseline; padding: 2rem 0.75rem; } } .blog-item-meta { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sage-dk); font-weight: 700; margin: 0; } .blog-item-date { font-size: 0.8rem; color: var(--muted-fg); margin: 0.2rem 0 0; } .blog-item-title { font-size: 1.35rem; margin: 0; transition: color 0.2s; font-family: var(--font-heading); font-weight: 400; } .blog-item:hover .blog-item-title { color: var(--sage-dk); } .blog-item-desc { color: var(--muted-fg); margin: 0.4rem 0 0; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-item-footer { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-fg); justify-self: end; align-self: end; white-space: nowrap; } .blog-item-featured { background: var(--sage-bg); border-top: 2px solid var(--sage-lt); border-radius: var(--r-lg); padding: 1.75rem 1rem; } .blog-item-featured:hover { background: oklch(0.938 0.028 152); } .blog-item-featured .blog-item-meta { color: var(--sage-dk); } @media (min-width: 768px) { .blog-item-featured { padding: 2rem 1rem; } } /* Article page — largeur alignée sur le container */ .article-page { padding: 4rem clamp(1.25rem,5vw,3rem) 3rem; max-width: 76rem; margin-inline: auto; } .article-img-wrap { margin-top: 2.5rem; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 21/9; max-height: 420px; } .article-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-fg); text-decoration: none; } .back-link:hover { color: var(--sage-dk); } .article-header { margin-top: 2rem; } .article-category { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sage-dk); font-weight: 700; margin: 0 0 1rem; } .article-header h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); } .article-meta { margin-top: 1.25rem; color: var(--muted-fg); font-size: 0.9rem; } .article-body { margin-top: 3rem; } .article-intro { font-size: 1.1rem; line-height: 1.75; } .article-conclusion { margin-top: 2.5rem; font-size: 1.05rem; font-style: italic; color: var(--muted-fg); border-left: 3px solid var(--sage); padding: 1rem 1.25rem; background: var(--sage-bg); border-radius: 0 var(--r) var(--r) 0; } /* Prose articles */ .prose-article { max-width: 52rem; } .prose-article p { margin: 1.25rem 0; font-size: 1.025rem; line-height: 1.8; color: var(--muted-fg); } .prose-article h2 { margin: 2.5rem 0 0.85rem; font-size: clamp(1.4rem, 2.2vw, 1.8rem); border-top: 1px solid var(--border); padding-top: 2rem; } .prose-article h2:first-of-type { border-top: none; padding-top: 0; } .prose-article ul { padding-left: 0; list-style: none; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.55rem; } .prose-article li { font-size: 0.95rem; color: var(--muted-fg); display: flex; align-items: flex-start; gap: 0.6rem; } .prose-article li::before { content: "→"; color: var(--sage-dk); flex-shrink: 0; font-weight: 700; } .prose-article blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--sage); background: var(--sage-bg); border-radius: 0 var(--r) var(--r) 0; font-style: italic; color: var(--muted-fg); } /* Article author bio */ .article-author-bio { max-width: 52rem; margin: 3rem 0 0; padding: 1.5rem 1.75rem; border: 1.5px solid var(--border); border-radius: var(--r-lg); display: flex; gap: 1.25rem; align-items: flex-start; background: var(--sage-bg); } .author-bio-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--sage-lt); } .author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .author-bio-name { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 0.2rem; } .author-bio-role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage-dk); font-weight: 700; margin: 0 0 0.6rem; } .author-bio-desc { font-size: 0.9rem; color: var(--muted-fg); margin: 0 0 0.85rem; line-height: 1.65; } .author-bio-link { font-size: 0.875rem; color: var(--sage-dk); text-decoration: none; font-weight: 600; } .author-bio-link:hover { text-decoration: underline; } @media (max-width: 480px) { .article-author-bio { flex-direction: column; } } /* Related articles */ .related-section { padding: 0 clamp(1.25rem,5vw,3rem); max-width: 76rem; margin: 4rem auto 3rem; } .related-grid { margin-top: 1.5rem; display: grid; gap: 1rem; } @media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2, 1fr); } } .related-card { display: block; border-radius: var(--r-lg); border: 1.5px solid var(--border); padding: 1.5rem; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .related-card:hover { background: var(--sage-bg); border-color: var(--sage); } .related-card-category { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sage-dk); font-weight: 700; margin: 0; } .related-card-title { margin: 0.75rem 0 0; font-size: 1.05rem; font-family: var(--font-heading); font-weight: 400; transition: color 0.2s; } .related-card:hover .related-card-title { color: var(--sage-dk); } .related-card-link { margin-top: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--sage-dk); font-weight: 600; } /* ─── Availability badge ─── */ .availability-badge { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; color: var(--sage-dk); font-weight: 600; background: var(--sage-bg); border: 1.5px solid var(--sage-lt); border-radius: var(--r-full); padding: 0.35rem 0.95rem; margin-bottom: 1.5rem; } .availability-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #4a9a4a; flex-shrink: 0; animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } } /* ─── Testimonials ─── */ .testimonials-section { padding: 5rem clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; text-align: center; } .testimonials-grid { margin-top: 3rem; display: grid; gap: 1.5rem; } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { background: var(--sage-bg); border: 1.5px solid var(--border); border-radius: var(--r-xl); padding: 2.25rem 1.75rem 1.75rem; text-align: left; margin: 0; position: relative; } .testimonial-card::before { content: "\201C"; font-family: var(--font-heading); font-size: 4.5rem; line-height: 1; color: var(--sage-lt); position: absolute; top: 0.5rem; left: 1.5rem; pointer-events: none; } .testimonial-text { font-size: 0.95rem; line-height: 1.78; color: var(--muted-fg); margin: 1.25rem 0 1.5rem; font-style: italic; } .testimonial-author { border-top: 1px solid var(--border); padding-top: 1rem; } .testimonial-name { font-weight: 700; font-size: 0.875rem; color: var(--fg); margin: 0; } .testimonial-location { font-size: 0.76rem; color: var(--sage-dk); text-transform: uppercase; letter-spacing: 0.1em; margin: 0.25rem 0 0; } /* ─── Zone d'intervention ─── */ .zone-section { padding: 4rem clamp(1.25rem,5vw,3rem) 4rem; max-width: 76rem; margin-inline: auto; } .zone-inner { background: var(--sage-bg); border-radius: var(--r-xl); padding: 2.5rem; display: grid; gap: 2.5rem; } @media (min-width: 640px) { .zone-inner { grid-template-columns: 1fr 1fr; align-items: start; } } .zone-heading { font-family: var(--font-heading); font-size: clamp(1.1rem,1.6vw,1.35rem); font-weight: 500; margin: 0 0 0.75rem; } .zone-desc { font-size: 0.9rem; color: var(--muted-fg); line-height: 1.7; margin: 0 0 1.25rem; } .zone-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; } .zone-pill { background: white; border: 1.5px solid var(--border); border-radius: var(--r-full); padding: 0.3rem 0.85rem; font-size: 0.8rem; color: var(--fg); font-weight: 500; } .zone-note { font-size: 0.83rem; color: var(--muted-fg); line-height: 1.65; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--border); } /* ─── Pratique / Tarifs ─── */ .tarifs-section { padding: 0 clamp(1.25rem,5vw,3rem) 3rem; max-width: 76rem; margin-inline: auto; } .tarifs-grid { display: grid; gap: 1rem; margin-top: 1.75rem; } @media (min-width: 640px) { .tarifs-grid { grid-template-columns: repeat(2, 1fr); } } .tarifs-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem; border: 1.5px solid var(--border); border-radius: var(--r-lg); background: white; } .tarifs-icon-wrap { width: 2.5rem; height: 2.5rem; border-radius: var(--r); background: var(--sage-bg); border: 1px solid var(--sage-lt); display: grid; place-items: center; flex-shrink: 0; color: var(--sage-dk); } .tarifs-item-title { font-weight: 700; font-size: 0.875rem; margin: 0 0 0.25rem; } .tarifs-item-desc { font-size: 0.83rem; color: var(--muted-fg); margin: 0; line-height: 1.65; } /* SVG icons: service cards & pour-qui */ .service-icon-wrap { color: var(--sage-dk); font-size: 0; } .pq-emoji { font-size: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: rgba(255,255,255,0.45); border-radius: var(--r-lg); margin-bottom: 1rem; color: var(--sage-dk); } /* ─── 404 ─── */ .section-404 { min-height: 78vh; display: flex; align-items: center; padding: 4rem clamp(1.25rem,5vw,3rem); max-width: 76rem; margin-inline: auto; } .not-found-page { display: flex; min-height: 100svh; align-items: center; justify-content: center; padding: 0 1rem; } .not-found-inner { max-width: 28rem; text-align: center; } .not-found-code { font-family: var(--font-heading); font-size: 5rem; color: var(--sage-lt); margin: 0; line-height: 1; } .not-found-title { margin-top: 0.75rem; font-size: 1.35rem; } .not-found-desc { margin-top: 0.5rem; color: var(--muted-fg); } .not-found-btn { margin-top: 2rem; } /* ─── Utilitaires ─── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-center { text-align: center; } .hero-wrap { display: grid; gap: 3.5rem; align-items: center; width: 100%; } /* ─── Responsive ─── */ @media (max-width: 540px) { h1 { font-size: clamp(2.2rem, 11vw, 3rem); } .hero-blob-wrap::before, .hero-blob-wrap::after { display: none; } .split-blob-peach::before, .split-blob-sage::before { display: none; } .quote-blob-wrap::before { display: none; } .cta-band-inner { padding: 3rem 1.25rem; border-radius: var(--r-xl); } .services-mini-grid { grid-template-columns: 1fr; } .pour-qui-grid { gap: 1rem; } .service-card { padding: 1.5rem; } .cta-compact-inner { grid-template-columns: 1fr; } .article-img-wrap { aspect-ratio: 16/9; } }