/* Massahati — site vitrine — feuille de style partagée (aucun outil de build). 3 thèmes via [data-theme] sur , choisi par assets/site.js (persisté en localStorage). */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Serif:wght@500;600;700&display=swap'); /* Refonte visuelle des 3 thèmes (2026-08-22) : chaque thème garde son identité et son nom d'origine (aucun changement de markup dans les 11 pages), mais gagne un dégradé de marque (--gradient-hero/--gradient-cta), une lueur teintée (--glow, remplace le blanc générique utilisé partout avant) et un radius calibré à sa personnalité plutôt qu'une valeur unique partagée. --shadow-sm/md/lg restent la base neutre (cartes, formulaires) ; --shadow-glow est nouveau, réservé aux éléments qui doivent "sortir" (CTA principal, palier mis en avant). */ :root, :root[data-theme="clinique"] { --primary-light: #b7ade2; --primary: #4a3d99; --primary-dark: #2b2359; --secondary-light: #e8cf8f; --secondary: #c9a13f; --secondary-dark: #9c7a28; --accent: #bd5738; --accent-dark: #8c3f27; --bg: #faf9f6; --bg-alt: #f4f2ec; --surface: #ffffff; --text: #2a2540; --text-muted: #655e79; --border: #e2ddd1; --radius: .75rem; --shadow-sm: 0 1px 2px rgba(15,23,42,.05); --shadow-md: 0 4px 6px -2px rgba(15,23,42,.05), 0 10px 15px -3px rgba(15,23,42,.08); --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.07), 0 20px 25px -5px rgba(15,23,42,.07); --shadow-glow: 0 12px 28px -8px color-mix(in srgb, var(--primary) 45%, transparent); --gradient-hero: radial-gradient(120% 100% at 15% 0%, #4f4194 0%, var(--primary-dark) 45%, #1f1a44 100%); --gradient-cta: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); --glow: radial-gradient(55% 45% at 65% 30%, color-mix(in srgb, var(--secondary-light) 55%, transparent), transparent 70%); } /* Thème "Menthe" — alternative plus moderne/fraîche (teal + ambre + corail). Radius plus généreux (1.125rem) et dégradé émeraude→teal profond : volontairement plus "arrondi/vivant" que Clinique pour marquer la différence au premier coup d'œil, pas seulement la couleur. */ :root[data-theme="menthe"] { --primary-light: #a8e0d3; --primary: #128a7a; --primary-dark: #0a4941; --secondary-light: #ffe0b3; --secondary: #f0a839; --secondary-dark: #c07f1f; --accent: #e0654a; --accent-dark: #b34936; --bg: #f7faf9; --bg-alt: #eef5f3; --surface: #ffffff; --text: #17322d; --text-muted: #4f6b65; --border: #dbe8e4; --radius: 1.125rem; --shadow-glow: 0 14px 32px -10px color-mix(in srgb, var(--primary) 50%, transparent); --gradient-hero: radial-gradient(120% 100% at 20% 0%, #1aa190 0%, var(--primary-dark) 55%, #062e29 100%); --gradient-cta: linear-gradient(135deg, var(--primary) 0%, #0a3b34 100%); --glow: radial-gradient(55% 45% at 70% 25%, color-mix(in srgb, var(--secondary-light) 60%, transparent), transparent 70%); } /* Thème "Nuit" — sombre, traitement "premium dark mode" (lueur colorée plutôt que blanche, ombres plus profondes) : sur fond quasi noir, une ombre neutre grise n'a aucun relief, alors qu'une lueur teintée primary/accent lit immédiatement comme "soigné" plutôt que "faute de mieux". */ :root[data-theme="sombre"] { --primary-light: #c9c0ec; --primary: #9784ea; --primary-dark: #6b5bc4; --secondary-light: #f3dfa8; --secondary: #d4ab4a; --secondary-dark: #a67f2e; --accent: #e2836a; --accent-dark: #b3573c; --bg: #100e1c; --bg-alt: #1b1830; --surface: #211d3b; --text: #eeeaf9; --text-muted: #a49cc4; --border: #342f54; --radius: .75rem; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 6px -2px rgba(0,0,0,.35), 0 10px 15px -3px rgba(0,0,0,.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 20px 25px -5px rgba(0,0,0,.45); --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 16px 40px -8px color-mix(in srgb, var(--primary) 55%, transparent); --gradient-hero: radial-gradient(120% 100% at 20% 0%, #3a3268 0%, #1c1836 50%, var(--bg) 100%); --gradient-cta: linear-gradient(135deg, #3a3268 0%, var(--bg-alt) 100%); --glow: radial-gradient(60% 50% at 70% 25%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 72%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .15s ease, color .15s ease; } h1, h2, h3 { font-family: 'IBM Plex Serif', ui-serif, Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; display: block; } .container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } .container.narrow { max-width: 760px; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.5rem; border-radius: .5rem; font-weight: 600; font-size: .9375rem; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; text-align: center; font-family: inherit; } .btn-primary { background: var(--gradient-cta); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn-outline:hover { background: rgba(255,255,255,.1); } .btn-light { background: #fff; color: var(--primary); } .btn-light:hover { background: var(--secondary-light); transform: translateY(-1px); } .btn-ghost { background: var(--bg-alt); color: var(--primary-dark); } .btn-ghost:hover { background: var(--border); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; } /* Aucun style de focus clavier dédié n'existait avant (seuls les champs de formulaire en avaient un) - un lien/bouton actif au clavier redevenait invisible dès qu'il perdait le hover visuel de la souris. */ .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: .25rem; } /* Header */ header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 3px solid var(--primary); box-shadow: var(--shadow-sm); } header .container { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; gap: 1rem; } .logo { display: flex; align-items: center; gap: .625rem; font-family: 'IBM Plex Serif', serif; font-weight: 600; font-size: 1.25rem; color: var(--primary-dark); } .logo-mark { width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Racine "santé/صحتي" du nom ("sahati" dans "Massahati") mise en avant dans le logo - voir applyAppNameLogo() dans site.js. --secondary (or/ambre) plutôt que --primary : reste lisible à la fois sur le header clair (texte --primary-dark) et le footer sombre (texte blanc en ligne). */ .brand-accent { color: var(--secondary-dark); } footer .brand-accent, .cta-section .brand-accent, .hero .brand-accent, .page-header .brand-accent { color: var(--secondary-light); } nav.main-nav { display: flex; align-items: center; gap: 1.75rem; } nav.main-nav a.nav-link { font-size: .9375rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; } nav.main-nav a.nav-link:hover, nav.main-nav a.nav-link.active { color: var(--primary); } .header-actions { display: flex; align-items: center; gap: .625rem; } .theme-toggle { display: inline-flex; align-items: center; gap: .375rem; background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .75rem; font-size: .8125rem; font-weight: 600; cursor: pointer; font-family: inherit; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary-light); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; color: var(--primary-dark); } @media (max-width: 860px) { nav.main-nav { position: fixed; top: 4.25rem; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: flex-start; padding: 1rem 1.5rem 1.5rem; gap: 1rem; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); transform: translateY(-130%); transition: transform .2s ease; z-index: 40; } nav.main-nav.open { transform: translateY(0); } .nav-toggle { display: inline-flex; } } .app-login-link { padding: .5rem .75rem; } @media (max-width: 480px) { .app-login-link, #theme-toggle-label { display: none; } .header-actions { gap: .375rem; } .btn-primary { padding: .625rem 1rem; font-size: .875rem; } } /* Page header (sous-pages) */ .page-header { background: var(--gradient-hero); color: #fff; padding: 3.5rem 0 3rem; } .page-header .eyebrow { color: var(--secondary-light); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .75rem; } .page-header h1 { font-size: 2.25rem; margin-bottom: .75rem; } .page-header p.lead { color: var(--primary-light); font-size: 1.0625rem; max-width: 40rem; } .breadcrumb { font-size: .8125rem; color: var(--primary-light); margin-bottom: 1rem; } .breadcrumb a { text-decoration: underline; text-underline-offset: 2px; } .breadcrumb a:hover { color: #fff; } /* Hero (accueil) */ .hero { position: relative; overflow: hidden; background: var(--gradient-hero); color: #fff; padding: 4.5rem 0 6rem; } .hero-grid-bg { position: absolute; inset: 0; opacity: .06; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 32px 32px; } /* Lueur teintée par thème (--glow) plutôt qu'un blanc générique - avant cette refonte, les 3 thèmes affichaient exactement le même halo blanc sur des fonds pourtant très différents. */ .hero-glow { position: absolute; inset: 0; background: var(--glow); pointer-events: none; } .hero .container { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } @media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; } } .eyebrow { color: var(--secondary-light); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; } /* Petit repère de palier sur une fonctionnalité listée en produit.html - pour ne jamais laisser croire qu'une fonctionnalité est incluse dans tous les paliers quand ce n'est pas le cas (voir le tableau comparatif complet dans tarifs.html). */ .badge-plan { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--secondary-dark); background: var(--secondary-light); background: color-mix(in srgb, var(--secondary-light) 35%, transparent); padding: .0625rem .5rem; border-radius: 999px; margin-left: .375rem; vertical-align: middle; } .hero h1 { font-size: 2.75rem; line-height: 1.15; margin-bottom: 1.25rem; } @media (max-width: 560px) { .hero h1 { font-size: 2rem; } } .hero p.name-meaning { font-family: 'IBM Plex Serif', serif; font-style: italic; color: var(--secondary-light); font-size: .9375rem; margin-bottom: 1rem; } .hero p.name-meaning [data-app-name-logo] { font-style: normal; font-weight: 600; } .hero p.lead { color: var(--primary-light); font-size: 1.125rem; max-width: 34rem; margin-bottom: 2rem; } .hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; } .hero-trace { color: var(--secondary-light); opacity: .85; } @keyframes trace-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 55% { stroke-dashoffset: 0; } 78% { opacity: 1; } 92% { stroke-dashoffset: -.15; opacity: 0; } 100% { stroke-dashoffset: -.15; opacity: 0; } } /* Illustrations "Sécurité" (2FA + push) et "Migration" de produit.html - mêmes principes que trace-draw ci-dessus : discret, en boucle lente, jamais distrayant (pas de mouvement brusque sur une page qu'on lit, juste un signe de vie qui donne un aspect "vrai produit" plutôt qu'une maquette figée). */ .shield-glow { animation: shield-pulse 3s ease-in-out infinite; transform-origin: center; } @keyframes shield-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .7; transform: scale(1.08); } } .notif-banner { animation: notif-slide 4s ease-in-out infinite; } @keyframes notif-slide { 0% { transform: translateY(-14px); opacity: 0; } 10%, 75% { transform: translateY(0); opacity: 1; } 90%, 100% { transform: translateY(-14px); opacity: 0; } } .migrate-arrow { stroke-dasharray: 6 5; animation: migrate-flow 1.4s linear infinite; } @keyframes migrate-flow { to { stroke-dashoffset: -22; } } .migrate-check { animation: check-pop 2.6s ease-in-out infinite; transform-origin: center; } @keyframes check-pop { 0%, 55% { transform: scale(0); opacity: 0; } 68% { transform: scale(1.15); opacity: 1; } 78% { transform: scale(1); } 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } section { padding: 5rem 0; } section.tight { padding: 3.5rem 0; } .section-head { text-align: center; max-width: 40rem; margin: 0 auto 3rem; } .section-head .eyebrow { color: var(--secondary-dark); } .section-head h2 { font-size: 2rem; margin-bottom: .75rem; } .section-head p { color: var(--text-muted); font-size: 1.0625rem; } /* Features */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1), border-color .2s ease; } .feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--primary-light); } .feature-icon { width: 3rem; height: 3rem; border-radius: .625rem; background: var(--bg-alt); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .feature-card h3 { font-size: 1.0625rem; margin-bottom: .5rem; color: var(--primary-dark); } .feature-card p { color: var(--text-muted); font-size: .9375rem; } /* Alt section (why us) */ .alt-section { background: var(--bg-alt); } .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } @media (max-width: 700px) { .why-grid { grid-template-columns: 1fr; } } .why-item { display: flex; gap: 1rem; } .why-item .num { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-family: 'IBM Plex Serif', serif; } .why-item h3 { font-size: 1.0625rem; margin-bottom: .375rem; color: var(--primary-dark); } .why-item p { color: var(--text-muted); font-size: .9375rem; } /* Showcase produit (illustrations RDV / patient / graphes) */ .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4.5rem; } .showcase:last-child { margin-bottom: 0; } .showcase.reverse { direction: rtl; } .showcase.reverse > * { direction: ltr; } @media (max-width: 860px) { .showcase, .showcase.reverse { grid-template-columns: 1fr; direction: ltr; } } .showcase-copy .eyebrow { margin-bottom: .625rem; } .showcase-copy h3 { font-size: 1.5rem; color: var(--primary-dark); margin-bottom: .875rem; } .showcase-copy p { color: var(--text-muted); font-size: 1rem; margin-bottom: 1rem; } .showcase-copy ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .showcase-copy ul li { display: flex; align-items: baseline; gap: .5rem; font-size: .9375rem; color: var(--text); } .showcase-copy ul li::before { content: "✓"; color: var(--secondary-dark); font-weight: 700; } .showcase-art { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-lg); padding: 1.5rem; } .showcase-art .caption { text-align: center; font-size: .75rem; color: var(--text-muted); margin-top: .75rem; } /* Pricing */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; } @media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 40rem; margin: 0 auto; } } @media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; max-width: 24rem; } } .plan-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .plan-card.featured { border-color: var(--primary); box-shadow: var(--shadow-glow); position: relative; transform: scale(1.02); } .plan-badge { position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .75rem; border-radius: 999px; } .plan-name { font-family: 'IBM Plex Serif', serif; font-size: 1.25rem; font-weight: 600; color: var(--primary-dark); margin-bottom: .25rem; } .plan-desc { color: var(--text-muted); font-size: .875rem; margin-bottom: 1.25rem; } .plan-price { font-size: 2.25rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; } .plan-price span { font-size: .9375rem; font-weight: 500; color: var(--text-muted); } .plan-price small { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-muted); margin-top: .25rem; } .plan-features { list-style: none; padding: 0; margin: 1.5rem 0; flex-grow: 1; } .plan-features li { display: flex; align-items: baseline; gap: .5rem; padding: .4rem 0; font-size: .9375rem; color: var(--text); } .plan-features li::before { content: "✓"; color: var(--secondary-dark); font-weight: 700; } /* Tableau comparatif (page tarifs) */ .compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } table.compare { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 640px; } table.compare th, table.compare td { padding: .875rem 1rem; text-align: center; border-bottom: 1px solid var(--border); } table.compare th:first-child, table.compare td:first-child { text-align: left; color: var(--text-muted); } table.compare thead th { background: var(--bg-alt); color: var(--primary-dark); font-family: 'IBM Plex Serif', serif; } table.compare td.yes { color: var(--secondary-dark); font-weight: 700; } table.compare td.no { color: var(--border); } table.compare tbody tr:last-child td { border-bottom: none; } /* FAQ (details/summary — sans JS) */ .faq-list { display: flex; flex-direction: column; gap: .75rem; max-width: 760px; margin: 0 auto; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .faq-item summary { cursor: pointer; list-style: none; padding: 1.125rem 1.375rem; font-weight: 600; color: var(--primary-dark); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.25rem; color: var(--text-muted); flex-shrink: 0; transition: transform .15s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-answer { padding: 0 1.375rem 1.25rem; color: var(--text-muted); font-size: .9375rem; } /* Formulaire (contact) */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); max-width: 640px; margin: 0 auto; } .form-row { margin-bottom: 1.125rem; } .form-row label { display: block; font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .375rem; } .form-row .hint { font-size: .8125rem; color: var(--text-muted); margin-top: .375rem; } .form-row input, .form-row textarea { width: 100%; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: .5rem; font-family: inherit; font-size: .9375rem; background: var(--bg); color: var(--text); } .form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--primary-light); outline-offset: 1px; border-color: var(--primary); } .form-row textarea { resize: vertical; min-height: 7rem; } .form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.125rem; } @media (max-width: 520px) { .form-two-col { grid-template-columns: 1fr; } } .captcha-row { display: flex; align-items: flex-end; gap: .75rem; } .captcha-question { background: var(--bg-alt); border: 1px dashed var(--border); border-radius: .5rem; padding: .625rem .875rem; font-weight: 700; font-family: 'IBM Plex Serif', serif; color: var(--primary-dark); white-space: nowrap; } .captcha-refresh { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .8125rem; text-decoration: underline; padding: 0; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-msg { border-radius: .5rem; padding: .875rem 1rem; font-size: .875rem; margin-bottom: 1.125rem; display: none; } .form-msg.success { display: block; background: color-mix(in srgb, var(--secondary) 15%, var(--surface)); color: var(--secondary-dark); border: 1px solid var(--secondary-light); } .form-msg.error { display: block; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-dark); border: 1px solid var(--accent); } /* Contenu long (documentation, mentions légales) */ .prose { max-width: 760px; margin: 0 auto; font-size: .9375rem; } .prose h2 { font-size: 1.375rem; color: var(--primary-dark); margin: 2.5rem 0 1rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.0625rem; color: var(--primary-dark); margin: 1.75rem 0 .625rem; } .prose p { margin-bottom: 1rem; color: var(--text); } .prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.375rem; color: var(--text); } .prose li { margin-bottom: .375rem; } .prose strong { color: var(--primary-dark); } .prose .placeholder { background: var(--bg-alt); padding: .05rem .3rem; border-radius: .25rem; color: var(--accent-dark); font-size: .875em; } .prose .doc-updated { color: var(--text-muted); font-size: .8125rem; margin-bottom: 2rem; } .legal-toc { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 2.5rem; padding: 1rem 1.25rem; background: var(--bg-alt); border-radius: var(--radius); font-size: .875rem; } .legal-toc a { color: var(--primary); font-weight: 600; } .legal-toc a:hover { text-decoration: underline; } /* Doc technique — cartes de section */ .doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 3rem; } @media (max-width: 700px) { .doc-grid { grid-template-columns: 1fr; } } .doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .doc-card h3 { font-size: 1rem; color: var(--primary-dark); margin-bottom: .5rem; } .doc-card p { color: var(--text-muted); font-size: .875rem; } .stack-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-bottom: 1.5rem; } .stack-table th, .stack-table td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--border); } .stack-table th { color: var(--text-muted); font-weight: 600; width: 30%; } /* CTA */ .cta-section { background: var(--gradient-cta); color: #fff; text-align: center; } .cta-section h2 { font-size: 2rem; margin-bottom: 1rem; } .cta-section p { color: var(--primary-light); max-width: 32rem; margin: 0 auto 2rem; font-size: 1.0625rem; } footer { background: var(--primary-dark); color: var(--primary-light); padding: 3rem 0 2rem; font-size: .875rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } footer h4 { color: #fff; font-size: .875rem; font-weight: 600; margin-bottom: .875rem; } footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } footer a:hover { color: #fff; text-decoration: underline; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; color: rgba(255,255,255,.5); font-size: .8125rem; }