/* ========================================================= L'ATELIER SOLEIL YOGA : Système de design officiel Palette & typographie : charte graphique Sophie de Viveiros. ========================================================= */ /* ---------- 1. TOKENS ---------- */ :root { /* Palette saumon + terracotta : les deux couleurs du logo comme dominantes. Saumon (#f3d9ca) : surfaces, sections accent. Terracotta (#cb6a3e) : accent UI, CTA, icônes. Navy (#434767) : texte uniquement. */ --lin: #f6ebe1; /* crème chaud : sections d'accent douces */ --lin-warm: #fbf3ec; /* crème léger */ --lin-peach: #f3d9ca; /* saumon : sections d'accent */ --sauge: #cb6a3e; /* terracotta : accent unique (liens, CTA, icônes) */ --sauge-dark: #434767; /* navy : texte/icônes */ --sauge-soft: #f3d9ca; /* saumon doux */ --foret: #434767; /* navy : texte principal */ --foret-soft: #6e5a4d; /* brun moyen : texte secondaire */ --terracotta: #cb6a3e; /* terracotta */ --terracotta-deep: #a85530; /* terracotta foncé : CTA principal */ --terracotta-dark: #9e4f2c; /* terracotta foncé : liens contextuels (WCAG AA, 5.8:1 sur blanc) */ --field-border: #9c8472; /* bordures de champs visibles (3.5:1 sur blanc) */ --sable: #e8d5c9; /* sable rosé : bordures */ --sable-line: #f0e2d8; /* bordures très douces */ --blanc: #ffffff; --footer-bg: #1e2038; /* navy sombre : fond footer */ /* ---- Couche sémantique thématisable (cf. blocs [data-theme]) ---- Les rôles ci-dessous pilotent fonds, surfaces, bandeaux sombres et les rgba() (via triplets RGB). Changer de thème = réécrire ces tokens. */ --bg: #fdf7f1; /* crème doux : fond de page + sections claires */ --surface: #ffffff; /* cartes, champs, surfaces : restent blanches pour le relief */ --band: #434767; /* bandeaux sombres + entêtes de tableau */ --rgb-accent: 203, 106, 62; /* terracotta : tintes & ombres d'accent */ --rgb-ink: 67, 71, 103; /* navy : overlays héro, hachures, puces */ --rgb-light: 251, 249, 245; /* crème : textes sur fonds sombres */ --rgb-header: 254, 244, 238; /* fond du header sticky */ /* Typographie : Fraunces (titres, serif chaleureuse) + Montserrat (corps) */ --font-titre: "Cabinet Grotesk", "Georgia", "Times New Roman", serif; --font-corps: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* Rayons */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* Ombres tintées chaud */ --sh-sm: 0 2px 12px rgba(100, 50, 20, 0.08); --sh-md: 0 14px 36px rgba(100, 50, 20, 0.12); --sh-lg: 0 32px 64px rgba(100, 50, 20, 0.17); /* Layout */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(72px, 10vw, 140px); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ========================================================= 1bis. THÈMES (démo) : chaque thème = un duo neutre + accent. Un seul accent décliné, un seul bandeau sombre, jamais 3 familles de couleur au même endroit. Basculés via [data-theme] sur . ========================================================= */ /* 🌿 SAUGE : vert eucalyptus, tout dans le vert */ :root[data-theme="sauge"] { --lin: #eef3ef; --lin-warm: #f4f8f5; --lin-peach: #e2ece5; --sauge: #5f7d6e; --sauge-dark: #34503f; --sauge-soft: #cdded4; --foret: #2c3f36; --foret-soft: #566b61; --terracotta: #5f7d6e; --terracotta-deep: #3f5a4d; --terracotta-dark: #355040; --field-border: #8aa093; --sable: #d6e2db; --sable-line: #e6efe9; --bg: #f7f9f6; --surface: #ffffff; --band: #27332c; --footer-bg: #1f2a24; --rgb-accent: 95, 125, 110; --rgb-ink: 44, 63, 54; --rgb-light: 246, 250, 247; --rgb-header: 240, 245, 241; } /* 🍂 TERRACOTTA : 100 % terre, zéro bleu */ :root[data-theme="terracotta"] { --lin: #f7ece4; --lin-warm: #fdf6f2; --lin-peach: #f0ddcf; --sauge: #c15f38; --sauge-dark: #7a4a2e; --sauge-soft: #f0ddcf; --foret: #3a2a22; --foret-soft: #6e5a4d; --terracotta: #c15f38; --terracotta-deep: #a3491f; --terracotta-dark: #8f3f12; --field-border: #b08a6e; --sable: #e8d5c9; --sable-line: #f0e2d8; --bg: #fdf6f2; --surface: #fffaf7; --band: #3a241a; --footer-bg: #2e1b12; --rgb-accent: 193, 95, 56; --rgb-ink: 58, 42, 34; --rgb-light: 253, 246, 242; --rgb-header: 253, 240, 232; } /* 🌙 NUIT : mode sombre bleu nuit, accent bleu glacier */ :root[data-theme="nuit"] { --lin: #1b1e33; --lin-warm: #1e2138; --lin-peach: #242a45; --sauge: #8fb3d9; --sauge-dark: #b7cde6; --sauge-soft: #8fb3d9; --foret: #e7eaf5; --foret-soft: #a8b0cd; --terracotta: #9cc0e4; --terracotta-deep: #3f659a; --terracotta-dark: #a9c6e8; --field-border: #4a5170; --sable: #2c3150; --sable-line: #2a2f49; --bg: #14162a; --surface: #1e2138; --band: #0e1020; --footer-bg: #0c0e1c; --rgb-accent: 143, 179, 217; --rgb-ink: 8, 10, 24; --rgb-light: 231, 234, 245; --rgb-header: 20, 22, 42; } /* Transition douce lors du changement de thème */ body, .section, .site-footer, .site-header, .schedule, .price-card, .post-card, .value-card, .step, .card, .contact-aside .card { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); } /* ---------- 2. RESET / BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-corps); font-size: 17px; font-weight: 400; line-height: 1.72; color: var(--foret); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-titre); font-optical-sizing: auto; line-height: 1.08; color: var(--foret); text-wrap: balance; } h1, h2 { font-weight: 600; letter-spacing: -0.015em; } h3 { font-weight: 600; letter-spacing: -0.005em; } h4 { font-weight: 600; letter-spacing: 0; } /* Em dans les titres : italique Fraunces, accent chaud */ h1 em, h2 em, h3 em { font-style: normal; font-weight: 700; color: var(--terracotta); } /* Échelle typographique */ .display { font-size: clamp(3.4rem, 8.5vw, 6.4rem); } h2.section-title { font-size: clamp(2.2rem, 5vw, 4rem); } h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } p { text-wrap: pretty; } /* ---------- 3. UTILITAIRES LAYOUT ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--lin { background: var(--bg); } .section--warm { background: var(--lin); } .section--peach { background: var(--lin-peach); } .section--sable { background: var(--lin-warm); } .section--foret { background: var(--band); color: var(--blanc); } .section--tonal { background: rgba(var(--rgb-accent), 0.07); } /* Figure "Le lieu" (photo de la salle) */ .lieu { margin: 2.6rem 0 0; } .lieu picture { display: block; } .lieu img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-md); } .lieu figcaption { text-align: center; margin-top: 1.1rem; color: var(--foret-soft); font-size: 0.96rem; max-width: 60ch; margin-inline: auto; } .eyebrow { font-family: var(--font-corps); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sauge-dark); display: inline-block; margin-bottom: 1.1rem; } .section--foret .eyebrow { color: var(--sauge-soft); } .section--foret h2, .section--foret h3 { color: var(--blanc); } /* Section tonal : fond teal léger, texte reste sombre */ .section--tonal .eyebrow { color: var(--sauge-dark); } .section--tonal h2, .section--tonal h3 { color: var(--foret); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--foret-soft); max-width: 60ch; } /* ---------- 4. BOUTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; font-family: var(--font-corps); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; padding: 0.95em 1.8em; border-radius: var(--r-pill); transition: transform .35s var(--ease), background .3s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); will-change: transform; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px) scale(0.98); } .btn--accent { background: var(--terracotta-deep); color: var(--blanc); box-shadow: 0 8px 20px rgba(58,131,137, 0.28); } .btn--accent:hover { background: var(--terracotta-dark); box-shadow: 0 12px 26px rgba(58,131,137, 0.36); } .btn--sauge { background: var(--band); color: var(--blanc); } .btn--sauge:hover { background: var(--band); filter: brightness(1.18); } .btn--ghost { background: transparent; color: var(--foret); box-shadow: inset 0 0 0 1.5px var(--foret); } .btn--ghost:hover { background: var(--band); color: var(--blanc); } .btn--ghost-light { background: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1.5px rgba(var(--rgb-light), 0.7); } .btn--ghost-light:hover { background: var(--surface); color: var(--foret); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--sauge-dark); border-bottom: 1.5px solid transparent; transition: gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .link-arrow:hover { color: var(--sauge); } .link-arrow svg { transition: transform .3s var(--ease); } .link-arrow:hover { gap: 0.8em; } .link-arrow:hover svg { transform: translateX(3px); } /* ---------- 5. HEADER STICKY ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(var(--rgb-header), 0); transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease); padding-block: 1rem; } .site-header.is-scrolled { background: rgba(var(--rgb-header), 0.92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--sh-sm); padding-block: 0.65rem; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: flex; align-items: center; line-height: 0; } .brand__logo { height: 44px; width: auto; } .brand__logo--footer { opacity: 0.95; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .nav-links { display: flex; gap: clamp(0.9rem, 1.8vw, 1.9rem); } .nav-links a { font-size: 0.95rem; font-weight: 600; color: var(--foret); position: relative; padding-block: 0.3rem; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--sauge); transition: width .3s var(--ease); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 0.8rem; } .burger { display: none; width: 46px; height: 46px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--sable-line); position: relative; } .burger span { position: absolute; left: 13px; right: 13px; height: 1.8px; background: var(--foret); transition: transform .35s var(--ease), opacity .25s var(--ease); } .burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 27px; } body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* ---------- 6. HÉRO ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: var(--blanc); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg picture { display: block; width: 100%; height: 100%; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 88%; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(var(--rgb-ink),0.9) 0%, rgba(var(--rgb-ink),0.68) 35%, rgba(var(--rgb-ink),0.38) 60%, rgba(var(--rgb-ink),0.16) 80%, rgba(var(--rgb-ink),0.05) 100%), linear-gradient(to right, rgba(var(--rgb-ink),0.5) 0%, rgba(var(--rgb-ink),0.2) 45%, transparent 70%); } .hero__inner { padding-bottom: 2rem; padding-top: 9rem; width: 100%; position: relative; z-index: 2; } .hero h1 { color: var(--blanc); max-width: 16ch; } .hero .lead { color: rgba(var(--rgb-light),0.92); max-width: 46ch; margin-top: 1.4rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; } .hero__place { display: inline-flex; align-items: center; gap: 0.55em; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--rgb-light),0.9); margin-bottom: 1.4rem; } .hero__place svg { color: var(--sauge); } .scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(var(--rgb-light),0.75); } .scroll-cue .line { width: 1px; height: 38px; background: rgba(var(--rgb-light),0.5); position: relative; overflow: hidden; } .scroll-cue .line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--sauge); animation: scrollcue 2.2s var(--ease) infinite; } @keyframes scrollcue { 0% { top: -50%; } 60%,100% { top: 100%; } } /* ---------- 7. BANDEAU OFFRE ---------- */ .offre { background: var(--terracotta-deep); color: var(--blanc); } .offre__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.4rem; padding-block: 1rem; } .offre__tag { font-family: var(--font-titre); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; white-space: nowrap; } .offre__price { display: inline-flex; align-items: baseline; gap: 0.4em; font-family: var(--font-titre); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 700; background: rgba(255,255,255,0.2); border-radius: var(--r-pill); padding: 0.25em 0.85em; white-space: nowrap; } .offre__price s { font-weight: 400; opacity: 0.6; font-size: 0.85em; text-decoration-color: rgba(255,255,255,0.5); } .offre__sep { opacity: 0.45; font-size: 1rem; } .offre__txt { font-size: 0.95rem; opacity: 0.92; } .offre .btn--ghost-light { box-shadow: inset 0 0 0 1.5px rgba(var(--rgb-light),0.9); flex-shrink: 0; } @media (max-width: 600px) { .offre__sep { display: none; } } /* ---------- 8. SPLIT / À PROPOS ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .split__media { position: relative; background: var(--bg); } .split__media img { width: 100%; height: auto; mix-blend-mode: multiply; } .split__media .leaf-badge { position: absolute; bottom: -22px; right: -10px; background: var(--lin); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 1rem 1.3rem; display: flex; align-items: center; gap: 0.8rem; } .split__media .leaf-badge strong { font-family: var(--font-titre); font-size: 2rem; color: var(--terracotta-dark); line-height: 1; } .split__media .leaf-badge span { font-size: 0.82rem; color: var(--foret-soft); line-height: 1.3; } .signature { font-family: var(--font-titre); font-size: 2rem; color: var(--sauge-dark); margin-top: 1.6rem; } /* Caption "Enchantée" en overlay sur la photo de Sophie */ .sophie-caption { position: absolute; top: 6%; left: 4%; z-index: 2; display: flex; align-items: flex-start; gap: 0; pointer-events: none; } .sophie-h { font-family: var(--font-titre); font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.2; color: var(--foret); margin: 0; text-shadow: 0 1px 8px rgba(255,255,255,0.7), 0 0 20px rgba(255,255,255,0.5); } /* Flèche bouclée à droite du h2, pointe vers le visage de Sophie en gardant un écart */ .hi-arrow { display: block; width: 3.2rem; height: 1.8rem; flex-shrink: 0; align-self: flex-end; margin-bottom: 0.2rem; color: var(--terracotta); } .hi-arrow path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .hi-arrow .hi-line { stroke-dasharray: 230; stroke-dashoffset: 230; } .hi-arrow .hi-head { stroke-dasharray: 46; stroke-dashoffset: 46; } .reveal.in .hi-arrow .hi-line { animation: hi-draw 1.1s var(--ease) .5s forwards; } .reveal.in .hi-arrow .hi-head { animation: hi-draw 0.3s var(--ease) 1.5s forwards; } @keyframes hi-draw { to { stroke-dashoffset: 0; } } @media (max-width: 760px) { .sophie-caption { display: none; } } @media (prefers-reduced-motion: reduce) { .hi-arrow .hi-line, .hi-arrow .hi-head { stroke-dashoffset: 0; animation: none; } } /* ---------- 9. CARTES DISCIPLINES ---------- */ .grid-disc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; margin-top: 3rem; } .disc-card { position: relative; background: var(--surface); border-radius: var(--r-md); padding: 2rem 1.7rem 1.7rem; box-shadow: var(--sh-sm); border: 1px solid var(--sable-line); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); display: flex; flex-direction: column; } .disc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sauge); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); } .disc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); } .disc-card:hover::before { transform: scaleY(1); } .disc-card .num { font-family: var(--font-titre); font-size: 1.1rem; color: var(--sauge-dark); font-weight: 600; letter-spacing: 0.05em; } .disc-card .ic { width: 44px; height: 44px; color: var(--sauge-dark); margin-bottom: 1.1rem; } .disc-card h3 { margin-bottom: 0.5rem; } .disc-card p { color: var(--foret-soft); font-size: 0.97rem; flex: 1; } .disc-card .more { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; font-size: 0.9rem; color: var(--terracotta-dark); transition: gap .3s var(--ease); } .disc-card:hover .more { gap: 0.7em; } .disc-card .tag { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-dark); background: rgba(var(--rgb-accent),0.12); padding: 0.25em 0.7em; border-radius: var(--r-pill); margin-bottom: 1rem; } /* --- Pratiques : grille équilibrée 3 + 2 avec schémas animés --- */ .grid-disc--practices { grid-template-columns: repeat(3, 1fr); } .grid-disc--practices .disc-card--cta { grid-column: span 2; } @media (max-width: 900px) { .grid-disc--practices { grid-template-columns: repeat(2, 1fr); } .grid-disc--practices .disc-card--cta { grid-column: 1 / -1; } } @media (max-width: 560px) { .grid-disc--practices { grid-template-columns: 1fr; } .grid-disc--practices .disc-card--cta { grid-column: auto; } } .grid-disc--practices .disc-card .num { position: absolute; top: 1.5rem; right: 1.6rem; } .schema { width: 74px; height: 74px; margin-bottom: 1.1rem; } .schema svg { width: 100%; height: 100%; overflow: visible; transition: transform .55s var(--ease); } .schema svg path, .schema svg circle { fill: none; stroke: var(--foret); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--ease); } .disc-card:hover .schema svg { transform: translateY(-3px) scale(1.06); } .disc-card:hover .schema svg path, .disc-card:hover .schema svg circle { stroke: var(--terracotta); } .schema .breath, .schema .motion { stroke: var(--terracotta); } .schema .breath { opacity: .22; transform-box: fill-box; transform-origin: center; animation: breathe 4.5s ease-in-out infinite; } .schema .breath--2 { animation-delay: .5s; opacity: .14; } @keyframes breathe { 0%, 100% { transform: scale(.82); opacity: .1; } 50% { transform: scale(1.04); opacity: .3; } } .schema .motion { opacity: .5; } /* CTA pratique (cours particuliers & à domicile) */ .disc-card--cta { background: var(--sauge); border-color: var(--sauge); color: var(--blanc); justify-content: center; } .disc-card--cta::before { display: none; } .disc-card--cta h3 { color: var(--blanc); } .disc-card--cta p { color: rgba(var(--rgb-light),0.92); } .disc-card--cta .btn { margin-top: 1.3rem; align-self: flex-start; } /* ---------- 10. WORD CYCLER ---------- */ .wc-wrap { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0 0; overflow: hidden; } .wc-wrap.reveal { opacity: 1; transform: none; transition: none; } .wc-prev { display: none; } .wc-curr { font-family: var(--font-titre); font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700; color: var(--foret); text-align: center; white-space: nowrap; opacity: 0; transition: opacity 0.5s ease; } .wc-curr.wc-in { opacity: 1; } @media (prefers-reduced-motion: reduce) { .wc-curr { transition: none; opacity: 1; } .schema .breath { animation: none; } .disc-card:hover .schema svg { transform: none; } } /* ---------- 11. TÉMOIGNAGES ---------- */ .testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3rem; } @media (max-width: 720px) { .testi-grid { grid-template-columns: 1fr; } } .testi { background: var(--surface); border-radius: var(--r-md); padding: 2rem 1.8rem; box-shadow: var(--sh-sm); border: 1px solid var(--sable-line); display: flex; flex-direction: column; } .testi .quote-mark { font-family: var(--font-titre); font-size: 3.4rem; line-height: 0.6; color: var(--sauge); height: 1.4rem; } .testi p { font-size: 1.05rem; color: var(--foret); flex: 1; margin-bottom: 1.4rem; } .testi .stars { color: var(--terracotta); letter-spacing: 0.15em; margin-bottom: 1rem; font-size: 0.95rem; } .testi .who { display: flex; align-items: center; gap: 0.8rem; } .testi .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--sauge); color: var(--blanc); display: grid; place-items: center; font-family: var(--font-titre); font-size: 1.2rem; font-weight: 600; flex: none; } .testi .who b { display: block; font-size: 0.98rem; } .testi .who span { font-size: 0.85rem; color: var(--foret-soft); } /* ---------- 12. PLANNING ---------- */ .planning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 3rem; } .day-col { background: var(--lin); border: 1px solid var(--sable-line); border-radius: var(--r-md); padding: 1.3rem 1.1rem; } .day-col h4 { font-family: var(--font-corps); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sauge-dark); padding-bottom: 0.8rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--sable-line); } .slot { padding: 0.6rem 0; border-bottom: 1px dashed var(--sable-line); } .slot:last-child { border-bottom: none; } .slot time { display: block; font-weight: 800; font-size: 0.85rem; color: var(--terracotta-dark); } .slot b { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 600; display: block; } .slot small { font-size: 0.78rem; color: var(--foret-soft); } .planning-foot { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; margin-top: 2.4rem; } /* ---------- 13. LOCALISATION ---------- */ .loc { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; } .loc__map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); min-height: 360px; position: relative; } .loc__map iframe { width: 100%; height: 100%; border: 0; min-height: 360px; display: block; } .loc__info { display: flex; flex-direction: column; justify-content: center; } .loc-list { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; } .loc-list li { display: flex; gap: 1rem; align-items: flex-start; } .loc-list .ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(var(--rgb-accent),0.18); color: var(--sauge-dark); display: grid; place-items: center; } .loc-list b { display: block; } .loc-list span { color: var(--foret-soft); font-size: 0.95rem; } .zone-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; } .zone-chips span { font-size: 0.85rem; font-weight: 600; padding: 0.4em 0.9em; border-radius: var(--r-pill); background: var(--sable); color: var(--foret); } /* ---------- 14. NEWSLETTER ---------- */ .newsletter { background: var(--sauge); color: var(--blanc); border-radius: var(--r-lg); padding: clamp(2.4rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden; } .newsletter::before, .newsletter::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(var(--rgb-light),0.25); } .newsletter::before { width: 240px; height: 240px; top: -120px; right: -60px; } .newsletter::after { width: 180px; height: 180px; bottom: -100px; left: -40px; } .newsletter h2 { color: var(--blanc); position: relative; } .newsletter p { color: rgba(var(--rgb-light),0.92); max-width: 48ch; margin: 0.8rem auto 0; position: relative; } .news-form { position: relative; display: flex; gap: 0.7rem; flex-wrap: wrap; max-width: 520px; margin: 2rem auto 0; } .news-form input { flex: 1; min-width: 220px; padding: 1em 1.4em; border-radius: var(--r-pill); border: none; font-family: inherit; font-size: 1rem; color: var(--foret); background: var(--surface); } .news-form input:focus { outline: 3px solid rgba(var(--rgb-light),0.6); } .news-msg { position: relative; margin-top: 1rem; font-size: 0.92rem; min-height: 1.2em; font-weight: 600; } /* ---------- 15. FOOTER ---------- */ .site-footer { background: var(--footer-bg); color: rgba(var(--rgb-light),0.85); padding-top: calc(var(--section-y) * 0.7); } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3.5rem; } .footer-brand .brand { margin-bottom: 1.2rem; } .footer-brand p { color: rgba(var(--rgb-light),0.7); font-size: 0.95rem; max-width: 34ch; } .foot-col h4 { color: var(--blanc); font-family: var(--font-corps); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.1rem; } .foot-col ul { display: flex; flex-direction: column; gap: 0.7rem; } .foot-col a { font-size: 0.95rem; color: rgba(var(--rgb-light),0.78); transition: color .25s var(--ease); } .foot-col a:hover { color: var(--sauge); } .socials { display: flex; gap: 0.7rem; margin-top: 1.4rem; } .socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(var(--rgb-light),0.25); color: var(--blanc); transition: background .3s var(--ease), color .3s; } .socials a:hover { background: var(--sauge); color: var(--foret); box-shadow: none; } .footer-bottom { border-top: 1px solid rgba(var(--rgb-light),0.14); padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; justify-content: space-between; font-size: 0.85rem; color: rgba(var(--rgb-light),0.6); } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } /* ---------- 16. PLACEHOLDER NOTE ---------- */ .todo { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--terracotta-dark); background: rgba(var(--rgb-accent),0.1); border: 1px dashed rgba(var(--rgb-accent),0.45); border-radius: 6px; padding: 0.15em 0.55em; display: inline-block; } /* ---------- 17. RÉVÉLATIONS AU SCROLL ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .scroll-cue .line::after { animation: none; } } /* ---------- 18. SECTION HEADERS ---------- */ .section-head { max-width: 64ch; } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head .lead { margin-top: 1rem; } .center .lead { margin-inline: auto; } /* ---------- 19. MOBILE ---------- */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__media { order: -1; max-width: 460px; } .loc { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 940px) { .nav-links, .nav-cta .btn { display: none; } .burger { display: block; } .nav { gap: 0.6rem; } /* Menu plein écran */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--lin); padding: 6rem var(--gutter) 3rem; display: flex; flex-direction: column; transform: translateY(-100%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s var(--ease); overflow-y: auto; } body.menu-open .mobile-menu { transform: none; visibility: visible; } .mobile-menu a.m-link { font-family: var(--font-titre); font-size: 2rem; color: var(--foret); padding-block: 0.7rem; border-bottom: 1px solid var(--sable-line); } .mobile-menu .btn { margin-top: 1.6rem; } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (min-width: 941px) { .mobile-menu { display: none; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } .hero__actions .btn { flex: 1; } } /* ========================================================= 20. COMPOSANTS DES PAGES INTÉRIEURES ========================================================= */ /* État actif dans la nav */ .nav-links a.active { color: var(--sauge-dark); } .nav-links a.active::after { width: 100%; background: var(--sauge); } /* ---------- PAGE HEADER (héro court) ---------- */ .page-hero { background: transparent; padding-top: clamp(2.2rem, 4vw, 3.4rem); padding-bottom: clamp(0.6rem, 1.6vw, 1.2rem); } .page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); } .page-hero .lead { margin-top: 0.8rem; max-width: 62ch; } /* ---------- PROSE (texte riche : légal, article, récit) ---------- */ .prose { max-width: 70ch; } .prose > * + * { margin-top: 1.1rem; } .prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 2.4rem; } .prose h3 { font-size: 1.3rem; margin-top: 1.8rem; } .prose p, .prose li { color: var(--foret-soft); } .prose ul { padding-left: 1.2rem; list-style: disc; } .prose ul li { margin-top: 0.5rem; } .prose a { color: var(--terracotta-dark); border-bottom: 1px solid currentColor; } .prose strong { color: var(--foret); } .prose .ph-inline { color: var(--terracotta-dark); background: rgba(var(--rgb-accent),0.1); border: 1px dashed rgba(var(--rgb-accent),0.45); border-radius: 6px; padding: 0.05em 0.45em; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; } /* ---------- PULL QUOTE ---------- */ .pull-quote { border-left: 3px solid var(--sauge); padding: 0.4rem 0 0.4rem 1.8rem; margin-block: 2.4rem; } .pull-quote p { font-family: var(--font-titre); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; color: var(--foret); font-style: italic; } .pull-quote cite { display: block; margin-top: 0.8rem; font-family: var(--font-corps); font-style: normal; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; color: var(--sauge-dark); } .feature-quote { text-align: center; max-width: 24ch; margin-inline: auto; } .feature-quote p { font-family: var(--font-titre); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.18; font-style: italic; } .section--foret .feature-quote p { color: var(--blanc); } .feature-quote cite { display: block; margin-top: 1.4rem; font-family: var(--font-corps); font-style: normal; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sauge); } /* ---------- VALEURS ---------- */ .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin-top: 3rem; } .value-card { background: var(--surface); border: 1px solid var(--sable-line); border-radius: var(--r-md); padding: 1.8rem; } .value-card .ic-circle { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--rgb-accent),0.18); color: var(--sauge-dark); margin-bottom: 1rem; } .value-card h3 { font-size: 1.25rem; margin-bottom: 0.4rem; } .value-card p { color: var(--foret-soft); font-size: 0.95rem; } /* ---------- IMAGE PLACEHOLDER (rayé) ---------- */ .ph { position: relative; border-radius: var(--r-lg); overflow: hidden; background-color: var(--sable); background-image: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(var(--rgb-ink),0.06) 11px, rgba(var(--rgb-ink),0.06) 22px); display: grid; place-items: center; color: var(--foret-soft); min-height: 240px; border: 1px solid var(--sable-line); } .ph span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; letter-spacing: 0.04em; text-align: center; padding: 0.5em 1em; background: rgba(245,241,234,0.8); border-radius: var(--r-pill); } .ph.tall { aspect-ratio: 4/5; min-height: 0; } .ph.wide { aspect-ratio: 16/9; min-height: 0; } /* ---------- DÉTAIL DISCIPLINE (alterné) ---------- */ .disc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.4rem, 5vw, 4rem); } .disc-detail:not(:last-child) { border-bottom: 1px solid var(--sable-line); } .disc-detail:nth-child(even) .disc-detail__media { order: 2; } .disc-detail__media .ph { aspect-ratio: 4/3; min-height: 0; } .disc-detail .num-lg { font-family: var(--font-titre); font-size: 1.2rem; color: var(--sauge-dark); font-weight: 600; } .disc-detail h2 { margin: 0.3rem 0 0.6rem; } .disc-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.4rem; } .disc-meta span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--foret); background: var(--lin); border: 1px solid var(--sable-line); padding: 0.35em 0.85em; border-radius: var(--r-pill); } .disc-detail h4 { font-family: var(--font-corps); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sauge-dark); margin: 1.4rem 0 0.6rem; } .disc-detail ul { padding-left: 1.1rem; list-style: disc; } .disc-detail ul li { color: var(--foret-soft); margin-top: 0.4rem; } /* ---------- TABLEAU PLANNING ---------- */ .schedule { width: 100%; border-collapse: collapse; margin-top: 2.4rem; background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); } .schedule th, .schedule td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--sable-line); vertical-align: top; } .schedule thead th { background: var(--band); color: var(--blanc); font-family: var(--font-corps); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .schedule tbody th { font-weight: 800; color: var(--terracotta-dark); white-space: nowrap; font-size: 0.85rem; } .schedule .cls { display: block; } .schedule .cls b { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 600; display: block; } .schedule .cls small { color: var(--foret-soft); font-size: 0.82rem; } .schedule .cls + .cls { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--sable-line); } .schedule .empty { color: var(--sable-line); } .lvl { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15em 0.55em; border-radius: var(--r-pill); margin-top: 0.3rem; } .lvl.deb { background: rgba(var(--rgb-accent),0.22); color: var(--sauge-dark); } .lvl.tous { background: rgba(var(--rgb-accent),0.14); color: var(--terracotta-dark); } .lvl.inter { background: rgba(var(--rgb-ink),0.1); color: var(--foret); } .nouveau-badge { display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--terracotta-deep); color: #fff; padding: 0.15em 0.6em; border-radius: var(--r-pill); margin-top: 0.3rem; } .notice { display: flex; align-items: center; gap: 0.8rem; background: rgba(var(--rgb-accent),0.1); border: 1px solid rgba(var(--rgb-accent),0.35); border-radius: var(--r-md); padding: 1rem 1.3rem; color: var(--terracotta-dark); font-weight: 600; margin-top: 2rem; } .notice svg { flex: none; } /* Planning → cartes sur mobile */ @media (max-width: 760px) { .schedule, .schedule thead, .schedule tbody, .schedule tr, .schedule th, .schedule td { display: block; } .schedule thead { display: none; } .schedule { box-shadow: var(--sh-sm); background: transparent; } .schedule tbody tr { background: var(--surface); border: 1px solid var(--sable-line); border-radius: var(--r-md); margin-bottom: 1rem; overflow: hidden; } .schedule tbody th { background: var(--band); color: var(--blanc); } .schedule td { border-bottom: 1px solid var(--sable-line); } .schedule td:last-child { border-bottom: none; } .schedule td::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sauge-dark); margin-bottom: 0.3rem; } .schedule td.empty { display: none; } } /* ---------- TARIFS ---------- */ .pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 3rem; align-items: stretch; } @media (max-width: 1000px) { .pricing { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pricing { grid-template-columns: 1fr; } } /* Carte large horizontale (cours particulier) sur toute la largeur */ .pricing .price-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 3rem); } .pricing .price-card--wide .pw-head { flex: 1 1 220px; display: flex; flex-direction: column; } .pricing .price-card--wide .amount { margin: 0.5rem 0 0.2rem; font-size: 1.6rem; } .pricing .price-card--wide .pw-list { flex: 2 1 320px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; } .pricing .price-card--wide .pw-cta { flex: 0 0 auto; width: auto; align-self: center; } @media (max-width: 760px) { .pricing .price-card--wide { flex-direction: column; align-items: flex-start; } .pricing .price-card--wide .pw-cta { width: 100%; } } .price-card { position: relative; background: var(--surface); border: 1px solid var(--sable-line); border-radius: var(--r-md); padding: 2rem 1.8rem; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .price-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); } .price-card.featured { border-color: var(--sauge); box-shadow: var(--sh-md); background: var(--surface); } .price-card.featured::after { content: "Le + choisi"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sauge-dark); color: var(--blanc); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3em 1em; border-radius: var(--r-pill); white-space: nowrap; } .price-card .ptitle { font-family: var(--font-titre); font-size: 1.5rem; } .price-card .ptag { font-size: 0.85rem; color: var(--foret-soft); margin-top: 0.2rem; min-height: 1.2em; } .price-card .amount { font-family: var(--font-titre); font-size: 3rem; color: var(--foret); line-height: 1; margin: 1.2rem 0 0.2rem; } .price-card.feat-accent .amount { color: var(--terracotta-dark); } .price-card .amount small { font-size: 1rem; color: var(--foret-soft); font-family: var(--font-corps); } .price-card .punit { font-size: 0.82rem; color: var(--foret-soft); } .price-card ul { margin: 1.4rem 0; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; } .price-card ul li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: var(--foret-soft); } .price-card ul li svg { flex: none; color: var(--sauge-dark); margin-top: 2px; } .price-card .btn { width: 100%; } /* ---------- FAQ (accordéon) ---------- */ /* FAQ : cases dépliables au clic (details/summary natif) */ .faq-open { margin: 2.8rem auto 0; max-width: 760px; display: flex; flex-direction: column; gap: 0.9rem; } .faq-item { background: var(--surface); border: 1.5px solid var(--sable-line); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .faq-item[open] { border-color: var(--terracotta); box-shadow: var(--sh-md); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.15rem 1.4rem; font-family: var(--font-titre); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--foret); line-height: 1.3; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-corps); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--terracotta); transition: transform .25s var(--ease); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-answer { padding: 0 1.4rem 1.25rem; color: var(--foret-soft); max-width: 60ch; } /* ---------- ÉTAPES (1-2-3) ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; margin-top: 3rem; counter-reset: step; } /* Étapes "Comment réserver ?" (liste ordonnée compacte) */ .reserve-steps { list-style: none; margin: 0; padding: 0; counter-reset: rstep; display: flex; flex-direction: column; gap: 1rem; } .reserve-steps li { position: relative; counter-increment: rstep; padding-left: 2.4rem; color: var(--foret-soft); font-size: 0.95rem; line-height: 1.5; } .reserve-steps li::before { content: counter(rstep); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sauge); color: var(--blanc); font-family: var(--font-titre); font-weight: 600; font-size: 0.9rem; display: grid; place-items: center; } .reserve-steps li strong { color: var(--foret); } .step { position: relative; padding: 2rem 1.6rem 1.6rem; background: var(--surface); border: 1px solid var(--sable-line); border-radius: var(--r-md); } .step .n { width: 48px; height: 48px; border-radius: 50%; background: var(--sauge); color: var(--blanc); display: grid; place-items: center; font-family: var(--font-titre); font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .step h3 { font-size: 1.3rem; margin-bottom: 0.4rem; } .step p { color: var(--foret-soft); font-size: 0.95rem; } /* ---------- WIDGET PLACEHOLDER ---------- */ .widget-slot { margin-top: 2.6rem; border: 2px dashed var(--sauge); border-radius: var(--r-lg); background: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(var(--rgb-accent),0.08) 14px, rgba(var(--rgb-accent),0.08) 28px), var(--blanc); min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 3rem 1.5rem; } .widget-slot .badge { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; color: var(--sauge-dark); background: var(--lin); border: 1px solid var(--sauge); border-radius: var(--r-pill); padding: 0.5em 1.2em; } .widget-slot h3 { font-size: 1.6rem; } .widget-slot p { color: var(--foret-soft); max-width: 44ch; } /* ---------- FORMULAIRE ---------- */ .form { display: grid; gap: 1.2rem; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-size: 0.85rem; font-weight: 700; color: var(--foret); } .field label .req { color: var(--terracotta-dark); } .field input, .field textarea, .field select { font-family: inherit; font-size: 1rem; color: var(--foret); background: var(--surface); border: 1.5px solid var(--field-border); border-radius: var(--r-sm); padding: 0.85em 1em; width: 100%; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--sauge); box-shadow: 0 0 0 3px rgba(var(--rgb-accent),0.25); } .consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--foret-soft); } .consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--sauge-dark); } .consent a { color: var(--terracotta-dark); border-bottom: 1px solid currentColor; } .form-msg { font-size: 0.92rem; font-weight: 600; min-height: 1.2em; } .form-msg.ok { color: var(--sauge-dark); } .form-msg.err { color: var(--terracotta-dark); } .field .hint { font-size: 0.78rem; color: var(--foret-soft); } .contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-aside { display: flex; flex-direction: column; gap: 1.4rem; } .contact-aside .card { background: var(--surface); border: 1px solid var(--sable-line); border-radius: var(--r-md); padding: 1.6rem; } .contact-aside .card h3 { font-size: 1.2rem; margin-bottom: 0.8rem; } .contact-aside .map { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); min-height: 240px; } .contact-aside .map iframe { width: 100%; height: 240px; border: 0; display: block; } /* ---------- BLOG ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; margin-top: 3rem; } .post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--sable-line); border-radius: var(--r-md); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); } .post-card .ph { border-radius: 0; aspect-ratio: 16/10; min-height: 0; } .post-card .body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; } .post-card .cat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sauge-dark); } .post-card h3 { font-size: 1.4rem; margin: 0.6rem 0; } .post-card p { color: var(--foret-soft); font-size: 0.95rem; flex: 1; } .post-card .meta { margin-top: 1.2rem; font-size: 0.82rem; color: var(--foret-soft); display: flex; gap: 0.6rem; align-items: center; } .post-card .more { margin-top: 1rem; font-weight: 700; color: var(--terracotta-dark); } .article { max-width: 740px; margin-inline: auto; } .article-hero { max-width: 880px; margin: 0 auto; } .article-hero .ph { aspect-ratio: 21/9; min-height: 0; margin-top: 2rem; } .article .meta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: 0.88rem; color: var(--foret-soft); margin-top: 1.2rem; } .article .meta-row .av { width: 38px; height: 38px; border-radius: 50%; background: var(--sauge); color: var(--blanc); display: grid; place-items: center; font-family: var(--font-titre); font-weight: 600; } .share { display: flex; gap: 0.6rem; align-items: center; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--sable-line); font-size: 0.85rem; color: var(--foret-soft); } /* ---------- BANNIÈRE COOKIES ---------- */ .cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 760px; margin-inline: auto; background: var(--foret); color: rgba(var(--rgb-light),0.9); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 1.4rem 1.6rem; display: none; flex-direction: column; gap: 1rem; } .cookie-banner.show { display: flex; animation: cookiein .5s var(--ease); } @keyframes cookiein { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .cookie-banner p { font-size: 0.92rem; } .cookie-banner a { color: var(--sauge); border-bottom: 1px solid currentColor; } .cookie-banner .row { display: flex; flex-wrap: wrap; gap: 0.8rem; } .cookie-banner .row .btn { flex: 1; min-width: 140px; padding-block: 0.8em; } .cookie-banner .btn--cookie { background: var(--surface); color: var(--foret); } .cookie-banner .btn--cookie:hover { background: var(--sauge); color: var(--foret); } @media (min-width: 620px) { .cookie-banner { flex-direction: row; align-items: center; } .cookie-banner .row { flex: none; } .cookie-banner .row .btn { flex: none; } } @media (max-width: 760px) { .disc-detail { grid-template-columns: 1fr; } .disc-detail:nth-child(even) .disc-detail__media { order: -1; } .disc-detail__media { max-width: 480px; } .contact-grid { grid-template-columns: 1fr; } .form .row { grid-template-columns: 1fr; } } /* ========================================================= 21. ACCESSIBILITÉ ========================================================= */ .skip-link { position: fixed; top: -120px; left: 1rem; z-index: 300; background: var(--band); color: var(--blanc); padding: 0.8em 1.4em; border-radius: var(--r-pill); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: top .25s var(--ease); } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--terracotta-dark); outline-offset: 3px; border-radius: 4px; } /* boutons accent : contour clair pour rester visible sur fond foncé */ .btn--accent:focus-visible, .btn--sauge:focus-visible { outline-color: var(--foret); } .hero .btn:focus-visible, .offre .btn:focus-visible, .section--foret a:focus-visible { outline-color: var(--blanc); } /* --- Bouton WhatsApp flottant : pastille verte animée, icône seule --- */ .wa-float { position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 9000; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; background: #25D366; color: #fff; text-decoration: none; border-radius: 50%; box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); animation: wabounce 2.6s ease-in-out infinite; } /* halo qui pulse pour attirer le clic */ .wa-float::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25D366; animation: wapulse 2.6s ease-out infinite; } .wa-float svg { width: 26px; height: 26px; flex-shrink: 0; } .wa-float span { display: none; } .wa-float:hover, .wa-float:focus-visible { transform: scale(1.08); background: #1ebe5d; box-shadow: 0 6px 26px rgba(37, 211, 102, 0.5); outline: none; animation-play-state: paused; } @keyframes wabounce { 0%, 68%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } 90% { transform: translateY(-3px); } } @keyframes wapulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.9); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } .wa-float::before { animation: none; opacity: 0; } } /* ========================================================= 22. P3 / P4 / P5 : composition, interactions, finitions ========================================================= */ /* --- P5 : grain subtil sur les sections pêche (chaleur, pas d'aplat) --- */ .section--peach { position: relative; isolation: isolate; } .section--peach > * { position: relative; z-index: 1; } .section--peach::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- P3 : composition éditoriale du split --- */ @media (min-width: 901px) { .split { grid-template-columns: 1.05fr 0.95fr; } } .split__media img { transition: transform .7s var(--ease); } .split:hover .split__media img { transform: scale(1.015); } /* --- P4 : zoom doux des médias au survol des cartes --- */ .disc-detail__media .ph, .post-card .ph { overflow: hidden; } .disc-detail__media .ph::after, .post-card .ph::after, .split__media::after { content: none; } .post-card .ph, .disc-detail__media .ph { position: relative; } /* --- P4 : harmonisation des élévations de cartes --- */ .testi, .value-card, .step { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .testi:hover, .value-card:hover, .step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--sauge-soft); } /* --- P4 : feedback de pression unifié sur les liens-flèche --- */ .link-arrow:active { transform: translateX(1px) scale(0.99); } /* --- P5 : page 404 --- */ .error-page { min-height: 70vh; display: flex; align-items: center; } .error-inner { max-width: 60ch; } .error-code { font-family: var(--font-titre); font-weight: 800; font-size: clamp(5rem, 18vw, 11rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--sauge); margin: 0.4rem 0 0.8rem; } .error-page h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); } .error-page .lead { margin-top: 1rem; } .error-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .error-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--sable-line); font-size: 0.92rem; } .error-links a { color: var(--sauge-dark); font-weight: 600; border-bottom: 1.5px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease); } .error-links a:hover { color: var(--sauge); border-color: var(--sauge); } @media (prefers-reduced-motion: reduce) { .split:hover .split__media img, .testi:hover, .value-card:hover, .step:hover { transform: none; } } /* ========================================================= 22. SWITCHER DE THÈME (DÉMO — à retirer une fois le thème choisi) Injecté par main.js dans .nav-cta. Aperçu de chaque duo accent/bandeau. ========================================================= */ .theme-switch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--sable-line); background: rgba(var(--rgb-header), 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .theme-switch__label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--foret-soft); } .theme-switch button { width: 22px; height: 22px; border-radius: 50%; padding: 0; box-shadow: inset 0 0 0 1px rgba(var(--rgb-ink), 0.3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .theme-switch button:hover { transform: scale(1.14); } .theme-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sauge); } @media (max-width: 760px) { .theme-switch__label { display: none; } .theme-switch { padding: 4px 6px; } .theme-switch button { width: 20px; height: 20px; } }