/* ============================================================ Mental Sofa — direction C « fusion » (2026-07-28) Nuit & or de la 1c (premium) · arrondis + thème clair de la B (accessibilité) · typographie intermédiaire : premium mais humaine. Signature : le sofa du monogramme, posé et immobile (sans l'arbre). Trois mots à faire sentir dès l'arrivée : expérience, maturité, confiance — donc aucune animation permanente. ------------------------------------------------------------ Thème via [data-theme] sur : "dark" (défaut) | "light". ============================================================ */ :root{ /* ---- palette nuit & or (héritée 1c) ---- */ --noir:#0B0512; --velours:#1A0C2E; --velours-2:#12071F; --band:#180D30; /* bande alternée — nettement plus claire que --noir */ --surface-haute:#261646; /* panneaux flottants : plus clair que tout le reste */ --violet:#7A4BB0; --violet-deep:#5B2D8E; /* Violet réservé aux TRAITS des schémas. Volontairement plus clair que --violet : sur le fond sombre, #7A4BB0 plafonne à 2,9:1 même à opacité pleine — sous le seuil de 3:1 des éléments graphiques. Monter l'opacité seule ne suffisait pas, il fallait un violet plus clair. Ne pas l'utiliser pour des aplats. */ --violet-trait:#9E72CC; /* Violet lisible SUR le panneau d'accès prioritaire (fond violet translucide). Calé à ~7:1 : le libellé y est en 10 px capitales, il lui faut de la marge. */ --violet-clair:#B995E8; --or:#E7C878; --or-soft:#F0DCA8; --or-ink:#0B0512; /* encre lisible SUR un aplat d'or */ --or-ink-muted:rgba(11,5,18,.72); --or-wash:rgba(231,200,120,.07); /* voile d'or (survols) */ --or-line:rgba(231,200,120,.3); /* filet d'or discret */ --text:#F3ECFA; --heading:#ffffff; --muted:#B3A6C9; --muted-2:#8E82A8; --bold:#EDE6F5; --faded:rgba(243,236,250,.42); /* l'« avant », volontairement flou */ --border:rgba(216,199,242,.14); --border-2:rgba(216,199,242,.22); --hatch:rgba(216,199,242,.06); --header-bg:rgba(11,5,18,.88); --footer-bg:#080310; --shadow:0 24px 60px -24px rgba(0,0,0,.7); --glow-a:rgba(122,75,176,.42); --serif:"Cormorant Garamond",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* ---- arrondis : repris de la B, resserrés d'un cran ---- */ --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px; --maxw:1200px; --pad:44px; /* ÉCHELLE VERTICALE — toute cote verticale sort d'ici, jamais d'une valeur libre. Entre deux sections : 2 × --s7 = 208px (bureau), 2 × --s6 = 128px (mobile). */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:104px; --hero-haut:88px; /* distance texte ↔ haut du héros, la même partout */ } /* ---- thème clair : lecture haute lisibilité (héritée B) ---- */ :root[data-theme="light"]{ --noir:#F7F1E6; --velours:#FFFFFF; --velours-2:#FBF6EC; --band:#EEE4F2; /* bande alternée — voile lavande sur l'ivoire */ --surface-haute:#FFFFFF; /* panneaux flottants */ --violet:#6B3FA0; --violet-deep:#5B2D8E; /* En thème clair le trait se détache par la profondeur, pas par la clarté : on garde le violet dense, c'est l'opacité qui fait le travail. */ --violet-trait:#6B3FA0; /* En clair le panneau d'accès devient un lavande pâle : le libellé s'y détache en violet PROFOND, pas en violet clair. Même cible de contraste (~7:1). */ --violet-clair:#4A2578; --or:#8A5F13; --or-soft:#6F4C0F; --or-ink:#FFFFFF; --or-ink-muted:rgba(255,255,255,.86); --or-wash:rgba(166,116,28,.09); --or-line:rgba(166,116,28,.34); --text:#3A3346; --heading:#2A1642; --muted:#5F556E; --muted-2:#635A72; --bold:#2A1642; --faded:rgba(58,51,70,.4); --border:#E6DCCC; --border-2:#D8CBB6; --hatch:rgba(90,60,130,.07); --header-bg:rgba(247,241,230,.94); --footer-bg:#EFE6D6; --shadow:0 22px 48px -26px rgba(43,15,66,.28); --glow-a:rgba(122,75,176,.16); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* `overflow-x:hidden` sur body en ferait un conteneur de défilement, et le scroll-behavior de html cesserait de s'appliquer aux ancres. `clip` coupe le débordement sans créer de conteneur. */ body{scroll-behavior:smooth} /* l'en-tête collant fait 78px : toute cible d'ancre se décale d'autant */ [id]{scroll-margin-top:96px} body{margin:0;background:var(--noir);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip; transition:background .3s ease,color .3s ease} img{max-width:100%;display:block} a{color:var(--or);text-decoration:none} ::selection{background:var(--or);color:var(--or-ink)} /* ---- typographie intermédiaire ---- 1c : line-height .86 / tracking -.045em (massif, un peu dur) B : line-height 1.06 / tracking -.01em (doux) C : on se pose entre les deux — de la présence, sans la froideur. */ h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.026em;line-height:1.0;color:var(--heading);margin:0} p{margin:0 0 1rem} b,strong{color:var(--bold);font-weight:600} em{font-style:italic} .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .display{font-family:var(--serif);font-weight:600;letter-spacing:-.028em;line-height:.98;color:var(--heading)} .accent{color:var(--or)} /* eyebrow — micro-capitales, interlettrage adouci (.34em → .2em) */ /* `inline-flex` posait l'eyebrow sur une ligne de texte, dont l'interligne s'ajoutait au-dessus : le titre démarrait 15 à 29px plus bas selon la page. En bloc, le premier élément du héros tombe à --hero-haut exactement. */ .eyebrow{display:flex;width:fit-content;align-items:center;gap:12px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:0 0 24px} .eyebrow::before{content:"";width:30px;height:1px;background:var(--or);border-radius:var(--r-pill)} /* ---- boutons : la pilule de la B, l'or de la 1c ---- */ .btn{display:inline-block;background:var(--or);color:var(--or-ink);font:600 13px/1 var(--sans);letter-spacing:.06em;padding:17px 30px;border:1px solid var(--or);border-radius:var(--r-pill);cursor:pointer;transition:.2s ease} .btn:hover{background:var(--or-soft);border-color:var(--or-soft);color:var(--or-ink);transform:translateY(-1px)} .btn-dark{background:var(--velours);color:var(--or);border-color:var(--border-2)} .btn-dark:hover{background:var(--velours-2);color:var(--or-soft);border-color:var(--or)} .btn-ghost{display:inline-block;background:transparent;color:var(--or);border:1px solid var(--or);font:600 13px/1 var(--sans);letter-spacing:.06em;padding:16px 28px;border-radius:var(--r-pill);transition:.2s ease} .btn-ghost:hover{background:var(--or-wash);color:var(--or-soft);transform:translateY(-1px)} /* RÈGLE : un appel à l'action tient TOUJOURS sur une seule ligne. Sur deux lignes il cesse de se lire comme un bouton. `nowrap` l'empêche de se replier, `flex:0 0 auto` l'empêche d'être écrasé par un voisin flexible. */ .btn,.btn-dark,.btn-ghost,.btn-outline,.header-cta{white-space:nowrap} .cta-in .btn,.cta-in .btn-dark,.hero-cta>a,.cta-stack>a,.offer-cta>a{flex:0 0 auto} .reassure{font:400 13px/1.5 var(--sans);color:var(--muted-2)} /* utilitaires : aucun margin-top en style inline dans le HTML */ .mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)} :where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:var(--r-xs)} /* ---- header / nav : casse normale (humain) plutôt que capitales ---- */ .site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} .site-header .container{display:flex;align-items:center;gap:26px;height:78px} .brand{display:flex;align-items:center;gap:10px;margin-right:auto} .brand img{height:34px;width:auto;border-radius:var(--r-xs)} .brand span{font-family:var(--serif);font-size:23px;color:var(--heading);font-weight:500} /* la barre occupe toute la hauteur de l'en-tête, sinon l'élément de menu ne peut pas s'étirer jusqu'au panneau et le survol se perd entre les deux */ .nav{display:flex;align-items:center;gap:26px;align-self:stretch} .nav>a{font:500 15px/1 var(--sans);letter-spacing:.005em;color:var(--text);border-radius:var(--r-pill);transition:color .2s ease} .nav>a:hover,.nav>a.active{color:var(--or)} .nav .btn,.header-cta{color:var(--or-ink);padding:13px 24px;font-size:13px} /* le CTA est sorti de