/* ============================================================ VIVANAFEM — DESIGN SYSTEM v4.4 Charte officielle — Ne pas modifier les valeurs de couleur ============================================================ */ /* === RESET MODERNE === */ /* NOTE : Poppins est chargée via dans le HTML (avec preconnect). NE PAS ajouter @import ici — double requête = LCP dégradé. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* WCAG 2.1 — prefers-reduced-motion : désactiver scroll animé et transforms pour les utilisateurs sensibles */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card, .btn, .card:hover, .btn:hover { transform: none; transition-duration: 0.01ms !important; } } img, video { display: block; max-width: 100%; } /* height:auto SEULEMENT si l'image n'a pas de dimensions explicites — anti-CLS */ img:not([width]), img:not([height]) { height: auto; } svg { display: block; overflow: visible; } button, input, textarea, select { font: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; } /* === VARIABLES OFFICIELLES === */ :root { /* --- Palette 7 couleurs charte VivanaFem --- */ --vert-foret: #4C6740; --violet-doux: #6B4C8C; --vert-sauge: #7BAE6E; --lavande: #9B7DC8; --blanc-casse: #F8F5EE; --anthracite: #2C2C2C; --gris-moyen: #7A7A7A; /* --- Couleurs utilitaires --- */ --blanc-pur: #FFFFFF; --bg-alt: #EDF4E8; --bordure: #E2DDD6; --bordure-header: #E8E4DC; /* séparateur bas du header blanc */ --ombre-douce: rgba(76, 103, 64, 0.10); --ombre-forte: rgba(76, 103, 64, 0.20); --violet-hover: #5a3d76; --vert-foret-hover:#3a5230; /* hover btn-secondary (vert-forêt assombri) */ --vert-sauge-hover:#5d9455; /* gardé pour référence interne — ne pas utiliser sur texte blanc (3.29:1) */ --badge-green-bg: #d4edda; /* badge couleur verte — fond */ --badge-green-fg: #276749; /* badge couleur verte — texte */ --badge-sage-bg: #d8efd0; /* badge sage — fond */ --badge-sage-fg: #3d7a36; /* badge sage — texte */ --badge-violet-bg: #e8dff5; /* badge violet — fond */ --badge-violet-fg: var(--violet-doux); /* badge violet — texte */ /* ⚠️ WCAG : --gris-moyen (#7A7A7A) = 3.94:1 sur blanc cassé. Conforme pour large text (≥18pt OU ≥14pt bold) uniquement. NE PAS utiliser pour du texte de corps normal (paragraphes, légendes, labels). Usage autorisé : dates, séparateurs, textes décoratifs ≥ 24px. */ /* --- Police --- */ --font: 'Poppins', system-ui, -apple-system, sans-serif; /* --- Typographie responsive (clamp: min, préféré, max) --- */ /* ⚠️ rem OBLIGATOIRE (pas px) — respecte les préférences de taille de police configurées dans les paramètres d'accessibilité du navigateur (WCAG). */ --t-h1: clamp(2rem, 5vw, 4rem); /* 32px → 64px */ --t-h2: clamp(1.5rem, 4vw, 2.75rem); /* 24px → 44px */ --t-h3: clamp(1.25rem, 3vw, 2rem); /* 20px → 32px */ --t-subtitle: clamp(1.0625rem, 2.5vw, 1.5rem); /* 17px → 24px */ --t-tagline: clamp(1.125rem, 2.5vw, 1.75rem); /* 18px → 28px */ --t-body: clamp(1rem, 1.5vw, 1.125rem); /* 16px → 18px (1.5vw atteint 16px à 1067px) */ --t-caption: 0.875rem; /* 14px */ /* --- Ligne / hauteur --- */ --lh-body: 1.75; --lh-heading: 1.2; --max-line: 68ch; /* --- Espacement --- */ --gap-xs: 8px; --gap-sm: 16px; --gap-md: 24px; --gap-lg: 48px; --gap-xl: 80px; --gap-2xl: 120px; /* --- Formes --- */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; /* --- Layout --- */ --max-w: 1200px; --max-w-text: 720px; /* --- Ombres --- */ --shadow-card: 0 2px 16px var(--ombre-douce); --shadow-hover: 0 8px 32px var(--ombre-forte); /* --- Transitions --- */ --tr: 0.2s ease; /* --- Header --- */ --header-h: 64px; } /* === BREAKPOINTS (mobile-first) xs: < 480px smartphones portrait sm: ≥ 480px smartphones paysage md: ≥ 768px tablettes lg: ≥ 1024px laptop xl: ≥ 1280px desktop large === */ /* === BASE === */ body { font-family: var(--font); font-size: var(--t-body); line-height: var(--lh-body); color: var(--anthracite); background: var(--blanc-casse); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Firefox macOS */ } h1, h2, h3, h4 { font-family: var(--font); line-height: var(--lh-heading); color: var(--vert-foret); } h1 { font-size: var(--t-h1); font-weight: 700; } h2 { font-size: var(--t-h2); font-weight: 700; } h3 { font-size: var(--t-h3); font-weight: 600; } /* max-width limité aux zones de lecture longue uniquement — pas global car ça casse les cards, formulaires et grilles multi-colonnes */ .prose p, .content p, .article-body p, .hero__text p { max-width: var(--max-line); } /* === ACCESSIBILITÉ === */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--vert-foret); color: var(--blanc-pur); padding: 8px 16px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600; z-index: 9999; } .skip-link:focus { top: 0; } /* Focus global : lavande sur fond clair (#F8F5EE) = 4.08:1 — passe AA pour large text. Sur fond blanc pur = 3.07:1 — adapté pour les surfaces claires. NE PAS modifier cette règle sans recalculer le contraste sur tous les contextes. */ *:focus-visible { outline: 2px solid var(--lavande); outline-offset: 3px; border-radius: 4px; } /* Header blanc : le focus lavande par défaut s'applique (lavande/blanc = 3.07:1 ✅, WCAG 2.2 §2.4.11). Plus besoin de l'override blanc de l'ancien header vert-forêt. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* === LAYOUT === */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap-md); } @media (min-width: 768px) { .container { padding: 0 var(--gap-lg); } } .section { padding: var(--gap-xl) 0; } .section--alt { background: var(--bg-alt); } .section--dark { background: var(--vert-foret); color: var(--blanc-pur); } .section--dark h2, .section--dark h3 { color: var(--blanc-pur); } /* === BOUTONS (min-height 48px pour touch) === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs); padding: 14px 28px; min-height: 48px; border-radius: var(--r-md); font-family: var(--font); font-size: var(--t-body); font-weight: 600; cursor: pointer; border: 2px solid transparent; /* transition:all interdit — force le recalcul de TOUTES les props à chaque frame */ transition: background-color var(--tr), border-color var(--tr), transform var(--tr), box-shadow var(--tr), color var(--tr); white-space: nowrap; line-height: 1; text-align: center; } .btn-primary { background: var(--violet-doux); color: var(--blanc-pur); border-color: var(--violet-doux); } .btn-primary:hover { background: var(--violet-hover); border-color: var(--violet-hover); transform: translateY(-1px); box-shadow: var(--shadow-hover); } .btn-outline { background: transparent; color: var(--blanc-pur); border-color: rgba(255,255,255,0.6); } .btn-outline:hover { background: rgba(255,255,255,0.15); border-color: var(--blanc-pur); } .btn-outline-dark { background: transparent; color: var(--vert-foret); border-color: var(--vert-foret); } .btn-outline-dark:hover { background: var(--vert-foret); color: var(--blanc-pur); } /* C1 FIX — WCAG AA : blanc sur vert-sauge (#7BAE6E) = 2.59:1 ❌ → FAIL Correction : vert-forêt (#4C6740) background + blanc = 5.50:1 ✅ Si le design souhaite un bouton sage-green : utiliser anthracite (#2C2C2C) comme couleur de texte (4.84:1 sur vert-sauge), mais le hover (#5d9455) ne passe pas alors. La solution retenue (vert-forêt) garantit le contraste en défaut ET en hover. */ .btn-secondary { background: var(--vert-foret); color: var(--blanc-pur); border-color: var(--vert-foret); } .btn-secondary:hover { background: var(--vert-foret-hover); border-color: var(--vert-foret-hover); transform: translateY(-1px); box-shadow: var(--shadow-hover); } /* === CARDS === */ .card { background: var(--blanc-pur); border: 1px solid var(--bordure); border-radius: var(--r-md); padding: var(--gap-md); /* transition: all est interdit — force le recalcul de TOUTES les props à chaque frame */ transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr); } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } /* === GRILLES === */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); } /* M4 FIX : minmax(0,1fr) empêche les enfants de déborder la colonne (1fr = min-width:auto par défaut) */ @media (min-width: 768px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); } @media (min-width: 480px) { .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* C1 FIX v4.4 : minmax(0,1fr) appliqué au breakpoint 1024px (M4 fix était incomplet) */ @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md); } /* C4 FIX v4.4 : minmax(0,1fr) appliqué au breakpoint 1024px (M4 fix était incomplet) */ @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* === BADGES / TAGS === */ .badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge--green { background: var(--badge-green-bg); color: var(--badge-green-fg); } .badge--violet { background: var(--badge-violet-bg); color: var(--badge-violet-fg); } .badge--sage { background: var(--badge-sage-bg); color: var(--badge-sage-fg); } /* Tag plein violet-doux + texte blanc (étiquettes de catégorie vidéo) — blanc/violet = 5.86:1 ✅ */ .badge--violet-solid { background: var(--violet-doux); color: var(--blanc-pur); } /* ============================================================ COMPOSANTS DE PAGE — index.html ============================================================ */ /* === HEADER / NAVIGATION === */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--blanc-pur); border-bottom: 1px solid var(--bordure-header); min-height: var(--header-h); transition: transform var(--tr); } .site-header.is-hidden { transform: translateY(-100%); } .site-header > .container { display: flex; align-items: center; gap: var(--gap-md); min-height: var(--header-h); } .site-header__logo { display: flex; align-items: center; flex-shrink: 0; } .site-header__logo img { height: 40px; width: auto; } .main-nav { margin-left: auto; } .main-nav ul { display: flex; gap: var(--gap-md); align-items: center; } .main-nav a { color: var(--anthracite); font-weight: 500; font-size: 1rem; padding: 8px 4px; transition: color var(--tr); } .main-nav a:hover { color: var(--violet-doux); } /* Bouton CTA header (vert-forêt + texte blanc) — n'écrase pas la nav, garde son alignement */ .site-header .btn-secondary { flex-shrink: 0; } /* Menu mobile (overlay déroulant) */ .main-nav-mobile { position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--blanc-pur); border-top: 1px solid var(--bordure-header); padding: var(--gap-sm) var(--gap-md) var(--gap-md); box-shadow: var(--shadow-hover); } .main-nav-mobile ul { display: flex; flex-direction: column; gap: 4px; } .main-nav-mobile a { display: block; color: var(--anthracite); font-weight: 500; padding: 14px 8px; min-height: 48px; border-radius: var(--r-sm); } .main-nav-mobile a:hover { background: var(--bg-alt); color: var(--violet-doux); } /* Hamburger */ .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-height: 48px; background: transparent; border: 0; cursor: pointer; color: var(--anthracite); margin-left: auto; flex-shrink: 0; } .hamburger svg { width: 24px; height: 24px; } /* Responsive nav : mobile-first. < 768px : nav desktop + CTA masqués, hamburger visible. ≥ 768px : nav desktop + CTA visibles, hamburger + menu mobile masqués. */ .main-nav, .site-header .btn-secondary { display: none; } .main-nav-mobile[hidden] { display: none; } @media (min-width: 768px) { .main-nav { display: block; } .site-header .btn-secondary { display: inline-flex; } .hamburger { display: none; } .main-nav-mobile { display: none !important; } } /* === HERO === */ .hero { padding: var(--gap-xl) 0; } .hero__inner { display: flex; flex-direction: column; gap: var(--gap-lg); align-items: center; } .hero__text { width: 100%; } .hero__media { width: 100%; } @media (min-width: 1024px) { .hero__inner { flex-direction: row; align-items: center; } .hero__text { width: 55%; } .hero__media { width: 45%; } } .hero__eyebrow { display: inline-block; color: var(--violet-doux); font-weight: 600; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--gap-sm); } .hero h1 { margin-bottom: var(--gap-md); } .hero__subtitle { font-size: var(--t-subtitle); color: var(--anthracite); margin-bottom: var(--gap-md); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-bottom: var(--gap-md); } .hero__social-proof { color: var(--vert-foret); font-weight: 600; font-size: var(--t-caption); } .hero__media { position: relative; } .hero__media img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .hero__badge { position: absolute; bottom: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.92); border: 1.5px solid var(--vert-foret); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 600; color: var(--vert-foret); backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); pointer-events: none; } .hero__badge svg { width: 1rem; height: 1rem; flex-shrink: 0; stroke: var(--vert-foret); } /* === RÉASSURANCE === */ .reassurance { padding: var(--gap-md) 0; background: var(--bg-alt); } .reassurance__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); } @media (min-width: 768px) { .reassurance__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .reassurance__item { display: flex; align-items: center; gap: var(--gap-sm); justify-content: center; text-align: left; } .reassurance__item svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--vert-foret); } .reassurance__item span { font-weight: 500; font-size: var(--t-caption); } /* === SOCIAL PROOF (section dédiée) === */ .social-proof { text-align: center; } .social-proof__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-lg); margin-top: var(--gap-md); } .social-proof__stat strong { display: block; font-size: var(--t-h2); color: var(--vert-foret); font-weight: 700; } .social-proof__stat span { font-size: var(--t-caption); color: var(--anthracite); } /* === SECTION HEADERS === */ .section__head { text-align: center; max-width: var(--max-w-text); margin: 0 auto var(--gap-lg); } .section__head h2 { margin-bottom: var(--gap-sm); } /* Décoration violette sous chaque titre de section (3px × 40px) */ .section__head h2::after { content: ""; display: block; width: 40px; height: 3px; margin: var(--gap-sm) auto 0; background: var(--violet-doux); border-radius: 2px; } /* Sur fond sombre, lavande pour rester visible */ .section--dark .section__head h2::after { background: var(--lavande); } .section__head p { font-size: var(--t-subtitle); } /* === TEST CARDS === */ .test-card { display: flex; flex-direction: column; gap: var(--gap-sm); } .test-card__icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--lavande); border-radius: var(--r-md); color: var(--blanc-pur); } .test-card__icon svg { width: 32px; height: 32px; } .test-card__body { flex: 1; } .test-card__body h3 { margin-bottom: var(--gap-xs); } .test-card__meta { display: inline-block; margin-top: var(--gap-xs); font-size: var(--t-caption); color: var(--vert-foret); font-weight: 600; } .test-card .btn { align-self: flex-start; } .test-card__notice { margin-top: var(--gap-sm); padding: var(--gap-sm); background: var(--badge-violet-bg); color: var(--violet-doux); border-radius: var(--r-sm); font-size: var(--t-caption); font-weight: 500; } .test-card__notice[hidden] { display: none; } /* === VIDÉOS === */ .videos-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); } @media (min-width: 768px) { .videos-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } .video-card { overflow: hidden; padding: 0; } .video-card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--vert-foret); border: 0; cursor: pointer; padding: 0; overflow: hidden; } .video-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .video-card__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(76,103,64,0.85); border-radius: 50%; transition: background-color var(--tr), transform var(--tr); } .video-card__thumb:hover .video-card__play { background: var(--violet-doux); transform: scale(1.05); } .video-card__play svg { width: 28px; height: 28px; color: var(--blanc-pur); } .video-card__thumb iframe { width: 100%; height: 100%; border: 0; } .video-card__body { padding: var(--gap-md); } .video-card__body h3 { margin-bottom: var(--gap-xs); } .video-card__meta { margin-top: var(--gap-sm); display: flex; flex-wrap: wrap; gap: var(--gap-sm); font-size: var(--t-caption); color: var(--anthracite); align-items: center; } .video-card__link { display: inline-block; margin-top: var(--gap-sm); color: var(--violet-doux); font-weight: 600; } .video-card__link:hover { text-decoration: underline; } .fallback-msg { text-align: center; color: var(--anthracite); padding: var(--gap-md); } /* === NEWSLETTER === */ .newsletter { text-align: center; } .newsletter .section__head { margin-bottom: var(--gap-md); } .newsletter-form { max-width: 560px; margin: 0 auto; text-align: left; } .newsletter-form .form-group { display: flex; flex-direction: column; gap: var(--gap-sm); } @media (min-width: 480px) { .newsletter-form .form-group { flex-direction: row; align-items: stretch; } .newsletter-form .form-group input { flex: 1; } } .newsletter-form input[type="email"] { padding: 14px 16px; min-height: 48px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--blanc-pur); color: var(--anthracite); } .newsletter-form input[type="email"]:focus-visible { outline-color: var(--blanc-pur); } .form-error { display: block; color: #ffd5d5; font-size: var(--t-caption); min-height: 1.2em; } .form-rgpd { display: flex; gap: var(--gap-xs); align-items: flex-start; margin-top: var(--gap-sm); font-size: var(--t-caption); } .form-rgpd input { margin-top: 4px; } .form-rgpd a { text-decoration: underline; } .form-success { margin-top: var(--gap-sm); padding: var(--gap-sm); background: rgba(255,255,255,0.15); border-radius: var(--r-sm); font-weight: 600; } .form-success[hidden] { display: none; } /* === FOOTER === */ .site-footer { background: var(--anthracite); color: rgba(255,255,255,0.8); padding: var(--gap-xl) 0 var(--gap-md); } .site-footer a { color: rgba(255,255,255,0.8); } .site-footer a:hover { color: var(--blanc-pur); } .footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); } @media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer__brand img { height: 48px; width: auto; margin-bottom: var(--gap-sm); } .footer__tagline { margin-bottom: var(--gap-md); } .footer__social { display: flex; gap: var(--gap-sm); } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.10); } .footer__social svg { width: 20px; height: 20px; } .footer__col h3 { color: var(--blanc-pur); font-size: 1rem; margin-bottom: var(--gap-sm); } .footer__col ul { display: flex; flex-direction: column; gap: var(--gap-xs); } .footer__medical { margin-top: var(--gap-sm); font-size: var(--t-caption); color: rgba(255,255,255,0.6); } [aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; } .footer__bottom { margin-top: var(--gap-lg); padding-top: var(--gap-md); border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; gap: var(--gap-sm) var(--gap-md); justify-content: space-between; align-items: center; font-size: 13px; } .footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--gap-sm); } /* === AD SLOTS (préparés, masqués jusqu'à activation AdSense Phase 4) === */ .ad-slot { text-align: center; margin: var(--gap-md) auto; min-height: 90px; } .ad-slot--header { background: transparent; } /* ============================================================ ANIMATIONS ============================================================ */ /* Hero — fade-in + glissement vers le bas au chargement */ @keyframes heroIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .hero__text { animation: heroIn 0.6s ease-out both; } .hero__media { animation: heroIn 0.6s ease-out 0.15s both; } /* CTA hero — pulsation subtile pour attirer l'œil */ @keyframes ctaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .hero__cta .btn-primary { animation: ctaPulse 2s ease-in-out infinite; } /* Au survol : suspendre la pulsation pour laisser jouer le translateY du hover */ .hero__cta .btn-primary:hover { animation-play-state: paused; } /* Reveal au scroll (cards) — actif uniquement si JS présent (.js sur ), sinon les cards restent visibles pour les utilisateurs sans JavaScript. */ .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Respect des préférences d'accessibilité : pas d'animation pour reduced-motion */ @media (prefers-reduced-motion: reduce) { .hero__text, .hero__media, .hero__cta .btn-primary { animation: none !important; } .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }