/* ══════════════════════════════════════════════════════════════ CHARTE TYPOGRAPHIQUE NSQ® — couche de gouvernance Chargée en dernier : elle tranche, elle n'ajoute rien. Constat avant écriture : 45 tailles de police distinctes, 30 règles d'italique, 11 titres qui changeaient de couleur en leur milieu. Trois familles cohabitaient sans hiérarchie. Trois règles tiennent tout : 1. UN TITRE = UNE COULEUR, UN STYLE. Jamais d'italique ni de teinte au milieu d'une phrase. Le contraste vient de la taille et du blanc, pas du maquillage. 2. L'ITALIQUE APPARTIENT AUX CITATIONS. Paroles rapportées et titres d'œuvres. Nulle part ailleurs. 3. LA COULEUR D'ACCENT APPARTIENT À CE QUI SE CLIQUE. Liens, boutons, éléments actifs. L'or reste aux chiffres de preuve et aux étiquettes. Le texte courant ne se colore pas. ══════════════════════════════════════════════════════════════ */ :root{ /* ── l'échelle d'affichage · Cormorant Garamond ───────────── */ --d1: clamp(38px, 6.4vw, 62px); /* titre de l'accueil */ --d2: clamp(32px, 5.0vw, 46px); /* titre de page */ --d3: clamp(27px, 3.6vw, 36px); /* titre de section */ --d4: clamp(22px, 2.4vw, 27px); /* titre de carte */ --d5: 21px; /* titre de bloc */ /* ── l'échelle de texte · DM Sans ─────────────────────────── */ --t-sub: clamp(18px, 1.7vw, 20px); /* sous-titre */ --t-lede: clamp(16.5px, 1.5vw, 18px);/* chapeau */ --t-body: 16px; /* texte courant */ --t-small: 14px; /* mention */ /* ── l'étiquette · DM Mono ────────────────────────────────── */ --t-label: 11px; /* ── les interlignes ──────────────────────────────────────── */ --lh-display: 1.14; --lh-text: 1.7; } /* ══ 1 · LES TITRES ════════════════════════════════════════════ Une couleur, un style. Le second membre d'un titre reste dans la même encre : c'est le retour à la ligne qui le distingue. */ .dxl, .dl, .dm, .rsScreen h2, .expMain h2, .rsHero h2, .secHead h2, .tail h2, .faq summary, .painCard h3, .simpleCard h3, .carnetEmptyBox h3, .meBox h3, .rsCardTitle, .bookRow h2, .bookRow h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-style:normal; color:var(--txt); letter-spacing:-.005em; line-height:var(--lh-display); text-wrap:balance; } /* le membre secondaire ne change ni de couleur ni de style */ .dxl em, .dl em, .dm em, .rsScreen h2 em, .expMain h2 em, .rsHero h2 em, .secHead h2 em, .tail h2 em, .painHead .dl em, .faqGrid .dl em, .carnetEmptyBox h3 em, .meBox h3 em, .rsCardTitle em, #hero h1 em, .painCard h3 em, .simpleCard h3 em{ font-style:normal; color:inherit; font-size:inherit; font-weight:inherit; } /* les tailles, sur l'échelle */ .dxl{font-size:var(--d1)} .dl {font-size:var(--d3)} .dm {font-size:var(--d4)} .phero h1{font-size:var(--d2)} .secHead h2, .tail h2{font-size:var(--d3)} .rsScreen h2, .expMain h2{font-size:var(--d3)} .rsHero h2{font-size:var(--d4)} .painCard h3, .simpleCard h3, .rsCardTitle, .carnetEmptyBox h3, .meBox h3, .drHead h2{font-size:var(--d4)} .steps h4, .pcard h3, .offerMini h3, .depth h3, .nextcard h4, .art h4, .card h4{font-family:'Cormorant Garamond',serif;font-weight:600; font-style:normal;color:var(--txt);font-size:var(--d5);line-height:1.25;letter-spacing:0} /* ══ 2 · LE TEXTE ══════════════════════════════════════════════ */ .sub, .mLead, .lede, .rsLead, .exp-lead, .rsScreen p, .prose p, .simpleHead .bodyl, .secHead p{ font-family:'DM Sans',sans-serif; font-style:normal; font-size:var(--t-lede); line-height:var(--lh-text); color:var(--txt2); } .bodyl{font-size:var(--t-lede);line-height:var(--lh-text)} /* le sous-titre : une seule graisse au-dessus du texte courant */ .heroBase, .pageBaseline{ font-family:'DM Sans',sans-serif; font-weight:500; font-style:normal; font-size:var(--t-sub); line-height:1.45; color:var(--txt); letter-spacing:0; } /* ══ 3 · L'ITALIQUE, RENDUE AUX CITATIONS ══════════════════════ Ces blocs portaient l'italique en décoration. On la retire : ils redeviennent du texte, distingués par leur cadre. */ .rsAccent, .quote, .rsEcho, .welcomeCtx, .expFrag, .rsWelcome, .sofiaBlock .quote, .simpleAnswer .quote{ font-style:normal; } .quote, .rsAccent{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--txt); font-size:var(--d4); line-height:1.32; } /* la parole rapportée garde son italique : c'est son rôle */ blockquote, blockquote p, .tCard blockquote, .voixSavante blockquote p, cite, .rsCardSource{font-style:italic} .voixSavante blockquote p em, .tCard blockquote em{font-style:normal;color:inherit} /* la phrase d'accueil et le fragment : encadrés, pas maquillés */ .rsWelcome, .expFrag, .rsEcho, .welcomeCtx{ font-family:'DM Sans',sans-serif; font-size:var(--t-lede); line-height:1.65; color:var(--txt); } .rsEcho small, .welcomeCtx small{font-family:'DM Mono',monospace} /* ══ 4 · LES ÉTIQUETTES ════════════════════════════════════════ */ .lab, .exp-tag, .rsCardKicker, .eyebrow, .om-eng, .ce-date{ font-family:'DM Mono',monospace; font-weight:500; font-style:normal; font-size:var(--t-label); letter-spacing:.13em; text-transform:uppercase; line-height:1.5; color:var(--txt2); } .lab.gold, .rsCardKicker, .om-eng{color:var(--gold)} .exp-tag{color:var(--accent)} /* ══ 5 · LES CHIFFRES DE PREUVE ════════════════════════════════ */ .proof{margin-top:38px;gap:8px 22px} .proof .lab{color:var(--gold)} /* ══ 6 · LE HERO ═══════════════════════════════════════════════ Quatre écritures, et pas une de plus : étiquette, titre, sous-titre, suggestion. */ .signature3{display:block} .signature3 .s1, .signature3 .s2{ display:block; font-family:'Cormorant Garamond',serif; font-weight:600; font-style:normal; font-size:inherit; color:var(--txt); } #hero h1{margin:20px 0 22px} #hero .heroBase{margin:0 0 16px;max-width:22ch} #hero .sub{margin:0;max-width:34ch} #hero .sub em{font-style:normal;color:inherit} /* ══ 7 · CE QUI SE CLIQUE ══════════════════════════════════════ */ a{color:var(--accent)} .prose a, .annonce a, .exp-link, .rsCardSource a{color:var(--accent)} nav a{color:var(--txt2)} nav a:hover{color:var(--txt)} /* ══ 8 · LES RESPIRATIONS ══════════════════════════════════════ */ .secHead{margin-bottom:38px} .secHead h2{margin:14px 0 16px} .simpleHead .dl, .painHead .dl{margin:14px 0 18px} /* ══ 9 · MOBILE ════════════════════════════════════════════════ */ @media(max-width:620px){ :root{--lh-display:1.16} #hero .heroBase, #hero .sub{max-width:none} .proof{margin-top:30px} } /* ══════════════════════════════════════════════════════════════ 10 · CONSOLIDATION DE L'ÉCHELLE Relevé après la première passe : 13 tailles en Cormorant, 8 en DM Mono, 18 en DM Sans. On ramène à cinq, deux et quatre. Les sélecteurs qui suivent portent la spécificité nécessaire pour battre les règles d'origine, jamais davantage. ══════════════════════════════════════════════════════════════ */ :root{ --num: clamp(32px, 3.6vw, 42px); /* les chiffres de preuve */ } /* ── Cormorant : cinq tailles, une seule encre ─────────────── */ #hinge .dl{font-size:var(--d3)} #hinge .quote, #method .quote, #sofia .quote, .simpleAnswer .quote, .constellations .quote{ font-family:'Cormorant Garamond',serif;font-weight:600;font-style:normal; font-size:var(--d4);line-height:1.32;color:var(--txt)} .founders h3, .sofiaBlock h3{font-size:var(--d4)} .faq summary{font-size:var(--d5);line-height:1.35} .ladder b, .depth h3, .offerMini h3, .pcard h3, .steps h4, .nextcard h4, .art h4, .card h4, .annonce h4, .carnetEntry h4, .rsRefs h4{font-size:var(--d5)} .fact b, .offer .price, .bookPrice, .sideBy b, .rsBefAft b, .gaugeLab output{font-family:'Cormorant Garamond',serif;font-weight:600; font-style:normal;font-size:var(--num);line-height:1;color:var(--txt)} .sideBy .now b, .rsBefAft .now b, .gaugeLab output{color:var(--gold)} .om-price{font-size:var(--d5)} /* le marqueur de coupure n'est pas une citation : il s'efface */ .tCard blockquote .cut, .voixSavante .cut{ font-family:'DM Mono',monospace;font-style:normal;font-size:var(--t-label); letter-spacing:.12em;color:var(--txt2)} /* ── DM Mono : deux tailles, trois encres qui veulent dire ─── */ #hinge .lab, #method .lab, #sofia .lab, #again .lab, .mHead .lab, .labHead .lab{font-size:var(--t-label)} .chainRow .cx{font-family:'DM Mono',monospace;font-size:var(--t-label);letter-spacing:.1em} .track figcaption span, .vidNote, .cmCol small, .sc-bar .bl{font-size:10px} /* ── DM Sans : quatre tailles, deux graisses ───────────────── */ #hinge p, #again p, .tail p, .mLead, .exp-lead, .simpleWhy li, .prose p, .prose li{font-size:var(--t-lede)} .offerMini p, .simpleCard p, .painCard .pcBody p, .pcard p, .depth p, .steps p, .pain p, .art p, .post p, .annonce p, .ladder span, .fact span, .om-list li, .bookPoints li, .cta2, .pageCta, .exp-link, .who span, .med, .legal, .carnetEmpty, .rsCardText, .rsPrivacy{font-size:var(--t-small);line-height:1.65} .offerMini p, .simpleCard p, .painCard .pcBody p, .prose p, .steps p, .rsCardText{font-size:var(--t-body);line-height:var(--lh-text)} .cta, .exp-btn, .rsHero .exp-btn, button.cta{font-size:var(--t-body);font-weight:500} .sitlist button, .rsChoice, .expChoice{font-size:var(--t-body)} .sitq{font-family:'DM Sans',sans-serif;font-weight:500;font-size:var(--t-sub); line-height:1.4;color:var(--txt)} /* la baseline d'une carte d'offre : du texte, pas un ornement */ .offerMini .om-base{font-family:'DM Sans',sans-serif;font-weight:400;font-style:normal; font-size:var(--t-small);color:var(--txt2);letter-spacing:0;margin-top:-4px} /* ── L'exception assumée : le bloc de marque ─────────────────── Le mot-marque, la mention ACADEMY et la baseline forment un logotype. Un logotype ne suit pas la charte du texte : il est une image. Il apparaît une fois par page, en haut à gauche. */ .brand .bl{font-family:'Cormorant Garamond',serif;font-style:italic; font-size:13.5px;color:var(--txt2);line-height:1.3} /* ── Les liens de contenu se reconnaissent au trait ────────── */ .prose a, .annonce a, .qq a, .article a{ border-bottom:1px solid rgba(155,127,232,.35);text-decoration:none;padding-bottom:1px} .prose a:hover, .annonce a:hover{border-bottom-color:var(--accent)} /* ══════════════════════════════════════════════════════════════ 11 · LES DERNIERS ÉCARTS Relevé nominatif des valeurs encore hors échelle, et d'où elles venaient. Chaque sélecteur ci-dessous corrige une source précise, jamais un symptôme. ══════════════════════════════════════════════════════════════ */ /* .prose portait ses propres titres, à 34 et 26 px */ .prose h2, .article h2{font-size:var(--d3);font-family:'Cormorant Garamond',serif; font-weight:600;font-style:normal;color:var(--txt);line-height:var(--lh-display)} .prose h3, .article h3{font-size:var(--d4);font-family:'Cormorant Garamond',serif; font-weight:600;font-style:normal;color:var(--txt);line-height:1.25} /* une étiquette reste une étiquette, même dans un bloc au corps large */ p.lab, .tail p.lab, .prose p.lab, .phero p.lab{font-size:var(--t-label);line-height:1.5} /* le gras du texte courant : une seule graisse, jamais 700 */ b, strong, .prose b, .prose strong, .article b, .article strong{ font-weight:500;color:var(--txt)} .who b, .qwho b{font-size:var(--t-body);font-weight:500} /* les paroles rapportées : une seule taille */ blockquote, .tCard blockquote, .voixSavante blockquote p{ font-size:var(--d5);line-height:1.45} .voixSavante blockquote p{font-size:var(--d4);line-height:1.4} /* les mentions et les seconds rôles */ .muted, p.alt, .om-price small, .offer .alt, small{font-size:var(--t-small);line-height:1.65} .cta2, a.cta2, button.cta2, .pageCta{font-size:var(--t-small)} .offresPro, .offresPro a{font-size:var(--t-small)} .mt16, p.mt16{font-size:inherit} .sofiaBlock p.mt16, #sofia p.mt16{font-size:var(--t-body);line-height:var(--lh-text)} .expNote, .rsPrivacy, .med, .legal, .carnetEmpty{font-size:var(--t-small);line-height:1.65} .faq details p, .qq p{font-size:var(--t-body);line-height:var(--lh-text)} /* les numéros de pas et les pastilles : une seule taille d'étiquette */ .sn, .sn2, .pnum, .cmCol i, .rsGestes i{font-size:var(--t-label)} .pcTop b, .painCard .pcTop b{font-size:var(--d5);line-height:1} /* le prix, sur la valeur des chiffres de preuve */ .om-price{font-size:var(--num);line-height:1} .om-price small{font-family:'DM Sans',sans-serif;font-weight:400;color:var(--txt2)} /* le logotype, seule exception assumée de la charte */ .wordmark .wa{font-size:var(--t-label);letter-spacing:.2em} /* ══════════════════════════════════════════════════════════════ 12 · LES SOURCES QUI RÉSISTAIENT Sélecteurs plus spécifiques que ceux d'origine, et rien de plus. ══════════════════════════════════════════════════════════════ */ /* Une étiquette dans un bloc au corps large restait en DM Sans : .secHead p et .prose p l'emportaient sur .lab en spécificité. */ .secHead p.lab, .prose p.lab, .tail p.lab, .phero p.lab, .wrap p.lab, section p.lab, .in p.lab{ font-family:'DM Mono',monospace;font-weight:500;font-size:var(--t-label); letter-spacing:.13em;text-transform:uppercase;color:var(--txt2);line-height:1.5} .secHead p.lab.gold, .prose p.lab.gold, section p.lab.gold{color:var(--gold)} /* Le prix reprend la valeur des chiffres de preuve */ .offerMini .om-price, .offer .price{font-size:var(--num);line-height:1} .offerMini .om-price small, .offer .price small{font-size:var(--t-small)} /* Le titre du panneau de méthode restait à 29 px */ .methodPanel h3, .methodTabsWrap h3{font-size:var(--d4);line-height:1.25} .methodPanel p{font-size:var(--t-body);line-height:var(--lh-text)} /* Les titres écrits en dur dans le HTML ont été retirés : ces blocs reprennent le niveau « titre de carte ». */ .offer h3, .infoBox h3, .prat h3{font-family:'Cormorant Garamond',serif; font-weight:600;font-style:normal;color:var(--txt);font-size:var(--d4); line-height:1.25;margin-bottom:14px} /* Les symboles des cartes rejoignent l'échelle de texte */ .pcTop b, .painCard .pcTop b{font-size:var(--t-sub);line-height:1} /* Les mentions restantes du châssis */ .carnetBtn, .nfTxt b, .om-eng{font-size:var(--t-small)} .nfTxt{font-size:10px} .track figcaption{font-size:var(--t-small)} .founders p, .sofiaBlock p, .vid figcaption p, .credLogos p{font-size:var(--t-body);line-height:var(--lh-text)} /* ── 13 · Solde de tout compte ─────────────────────────────── */ .carnetBtn, .inlineCta, .offresPro, .offresPro a, a.cta2, button.cta2, .pageCta, .apogeion-teaser a, #apogeion-teaser a, .depth a, .labHead a{font-size:var(--t-small)} .cta, .exp-btn, button.cta, a.cta{font-size:var(--t-body)} .post h3{font-size:var(--d4);line-height:1.25} .voixSavante figcaption b{font-size:var(--t-body)} .voixSavante blockquote p.cut{font-size:var(--t-label);line-height:1.6} .consultations .quote, .prose .quote, p.quote{font-weight:600} .prose p.quote, .wrap p.quote{font-family:'Cormorant Garamond',serif;font-weight:600; font-style:normal;font-size:var(--d4);line-height:1.32;color:var(--txt)} /* ── 14 · L'étiquette garde sa police partout ────────────────── .rsScreen p et .secHead p, plus spécifiques que .lab et .exp-tag, leur imposaient DM Sans au corps du texte. */ .rsScreen p.exp-tag, .expMain p.exp-tag, .rsBody p.exp-tag, p.exp-tag, p.rsCardKicker, span.exp-tag{ font-family:'DM Mono',monospace;font-weight:500;font-size:var(--t-label); letter-spacing:.13em;text-transform:uppercase;color:var(--accent); line-height:1.5;margin-bottom:6px} .rsScreen p.rsPrivacy, .rsScreen p.micro{font-size:var(--t-small)} .rsGestes li{font-size:var(--t-body)} .rsScreen p.rsAccent{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--d4);line-height:1.32;color:var(--txt)} /* ── 15 · Les boutons secondaires ────────────────────────────── .offerMini a.cta2 portait 14,5 px et l'emportait en spécificité. */ .offerMini a.cta2, .offerMini .cta2, .offersGrid .cta2, #offres .cta2, #offres .inlineCta, .wrap .cta2, .wrap .pageCta{ font-size:var(--t-small)} /* ── 16 · Le hero d'une page intérieure ──────────────────────── .phero .sub portait 19,5 px et l'emportait sur .sub : la suggestion se retrouvait à la taille du sous-titre, sans respiration entre les deux. */ .phero .sub, .phero p.sub{font-size:var(--t-lede);margin-top:0} .phero .pageBaseline{margin:0 0 18px;max-width:34ch} .phero h1{margin:14px 0 18px} .phero .acts{margin-top:32px} /* ── 17 · La liste déroulante du contact ───────────────────── */ select.exp-input{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--txt2) 50%), linear-gradient(135deg,var(--txt2) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px} select.exp-input:focus{background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%), linear-gradient(135deg,var(--accent) 50%,transparent 50%)} select.exp-input option{background:var(--card);color:var(--txt)} .form .lab{margin:6px 0 -4px} .form .rsConsent{margin:18px 0 4px} /* ══════════════════════════════════════════════════════════════ 18 · LA GAMME ────────────────────────────────────────────────────────────── Une seule couleur, treize degrés. Le violet de la marque est la tonique : #6B4FBB, la valeur exacte de --purple, celle que l'accueil portait déjà. De là, la gamme descend jusqu'à un bleu-violet d'ardoise. Rien ne sort de cette famille — ni vert, ni or, ni rien qui demanderait un autre nom de couleur. L'ORDRE EST CELUI DU MENU. La méthode, Livres, Séances, Le Cercle, Constellations, Lab, Contact : les sept entrées tombent sur sept degrés régulièrement espacés. Les pages qui ne sont pas au menu se glissent entre deux degrés, contre celle dont elles dépendent — Sofia après Livres, Métamorphose et le cursus entre Séances et Constellations, les mentions après Contact. On descend la gamme comme on descend le menu. COMMENT LES DEGRÉS ONT ÉTÉ CALCULÉS. Pas en tournant une roue chromatique : deux teintes distantes de dix degrés de teinte se confondent une fois posées à un dixième d'opacité sur un fond presque noir. Le chemin a donc été tracé en CIE L*C*h entre les deux extrémités, puis découpé en treize arrêts d'écart PERÇU égal — l'écart mesuré après composition sur le fond, pas sur la couleur nue. Deux pages voisines du menu sont séparées d'environ 2 ΔE, l'accueil et la dernière page de 12 ΔE. C'est ce qui fait une gamme et non une liste : le pas est constant d'un bout à l'autre. OÙ LA TEINTE SE POSE — et surtout, où elle ne se pose pas. Elle tient les halos, les filets des cartes, la ligne du bandeau, le repère de position. Elle ne touche jamais un texte ni un bouton : les CTA restent violets sur les seize pages, parce que la règle 3 du haut de ce fichier veut que la couleur d'accent appartienne à ce qui se clique. Et le lavis du bandeau reste à 0,14 : au-delà, les entrées du menu tombaient sous 4,5 de contraste. ══════════════════════════════════════════════════════════════ */ /* --teinte : la masse, pour les halos et les lavis. --teinte-v: la vive, pour les filets, les cadres et le repère. */ :root{--teinte:107,79,187; --teinte-v:179,149,244} body[data-teinte="methode"] {--teinte:104,84,189; --teinte-v:177,153,246} body[data-teinte="livres"] {--teinte:101,88,191; --teinte-v:176,157,248} body[data-teinte="sofia"] {--teinte: 98,93,192; --teinte-v:174,161,250} body[data-teinte="consultations"] {--teinte: 96,97,194; --teinte-v:172,165,252} body[data-teinte="metamorphose"] {--teinte: 93,102,195; --teinte-v:171,170,253} body[data-teinte="cercle"] {--teinte: 90,107,196; --teinte-v:170,175,255} body[data-teinte="formations"] {--teinte: 88,113,197; --teinte-v:165,177,253} body[data-teinte="constellations"]{--teinte: 87,118,198; --teinte-v:161,179,250} body[data-teinte="lab"] {--teinte: 87,125,198; --teinte-v:157,181,245} body[data-teinte="contact"] {--teinte: 89,131,198; --teinte-v:154,182,241} body[data-teinte="seuil"] {--teinte: 92,136,197; --teinte-v:153,183,236} body[data-teinte="apogeion"] {--teinte: 96,140,196; --teinte-v:152,184,233} /* ── a · Les filets ──────────────────────────────────────────── --bord sert cent huit fois : le cadre de chaque carte, chaque séparateur, chaque champ de formulaire. C'est le porteur le plus large de la teinte, et le moins coûteux — un filet ne passe sous aucun texte, il ne retire de contraste à personne. Même opacité qu'à l'origine, .30 ; seule l'encre suit la page. */ body[data-teinte]{--bord:rgba(var(--teinte-v),.30)} /* ── b · Les halos ───────────────────────────────────────────── Cinq halos, tous figés sur rgba(107,79,187,…) dans nsq-base. Géométries et opacités inchangées au dixième près. */ #hero .ray{background:radial-gradient(circle, rgba(var(--teinte),.55) 0%,rgba(var(--teinte),.14) 42%,transparent 70%)} #method .ray{background:radial-gradient(circle,rgba(var(--teinte),.35),transparent 68%)} #again .ray,.tail .ray{background:radial-gradient(circle,rgba(var(--teinte),.42),transparent 66%)} .phero .ray{background:radial-gradient(circle,rgba(var(--teinte),.30),transparent 68%)} /* ── c · L'air de la page ────────────────────────────────────── Les halos ne couvrent que le haut d'une page, et celui de .phero sort de l'écran par le coin : à mi-page il ne reste rien. Une nappe fixe tient la teinte présente du premier au dernier écran, posée derrière tout le contenu (le grain est en z-index 1, les .wrap en 2). Ses deux foyers sont aux coins que les halos laissent vides — haut-droite et bas-gauche, quand .phero pose le sien en haut-gauche : rien ne s'additionne. Son point le plus clair reste à 0,11, où le gris de lecture garde 5,1 de contraste sur les treize degrés, contre 5,8 sur le fond nu — là où le halo seul, lui, descend déjà à 3,7. */ body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(70% 46% at 102% 4%, rgba(var(--teinte),.11), transparent 66%), radial-gradient(80% 50% at -2% 98%, rgba(var(--teinte),.09), transparent 68%)} /* ── d · Le bandeau de navigation ────────────────────────────── Le seul endroit visible en permanence : il dit dans quel degré de la gamme on se trouve, même après avoir défilé loin du halo. Un lavis très bas, et la ligne du bas qui porte la teinte franchement — c'est elle qui fait le travail. ATTENTION : la barre n'est pas
, c'est header::before. site.css (l. 16) vide
de son fond et de son flou pour les déporter sur ce pseudo-élément, sans quoi backdrop-filter fait de
un bloc conteneur et emprisonne le tiroir du menu mobile. Teindre
lui-même rouvrait ce défaut et surtout écrasait ce ::before : le fond et le flou de la barre se réduisaient à la bande de 2 px qu'on voyait apparaître au-dessus du menu. Tout se pose donc ici, et nulle part ailleurs. Son filet du bas suit déjà --bord, donc la gamme. */ header::before{border-bottom-color:rgba(var(--teinte-v),.38); background:linear-gradient(rgba(var(--teinte),.14),rgba(var(--teinte),.05)), rgba(8,11,20,.74)} /* ── e · Le repère « vous êtes ici » ─────────────────────────── Posé par site.js sur l'entrée qui correspond à l'adresse. Un point, pas une couleur de texte : le lien courant reste lisible, et rien ne le fait passer pour un bouton. */ nav a[aria-current="page"]{color:var(--txt)} nav a[aria-current="page"]:before{content:"";display:inline-block; width:5px;height:5px;border-radius:50%;margin-right:7px; vertical-align:middle;background:rgb(var(--teinte-v))} /* ── f · L'accordéon du menu mobile ──────────────────────────── Le panneau déplié occupe tout l'écran : la teinte y a plus de place que dans le bandeau, on la laisse teindre le fond d'un souffle et les séparateurs d'un cheveu. */ @media(max-width:980px){ nav[data-open]{border-bottom-color:rgba(var(--teinte-v),.30); background:linear-gradient(rgba(var(--teinte),.10),rgba(var(--teinte),.03)), rgba(8,11,20,.98)} nav[data-open] a{border-bottom-color:rgba(var(--teinte-v),.16)} nav[data-open] a[aria-current="page"]{color:var(--txt)} .burger{border-color:rgba(var(--teinte-v),.36)} } /* ── 19 · La marche suivante, dans le carnet ─────────────────── Le carnet disait ce qui était fait ; il ne disait pas ce qui restait. Ce bloc porte une seule proposition, celle qui correspond à l'avancement réel de la personne, et le bouton qui la déclenche. C'est le seul endroit du carnet où la couleur d'accent remplit un fond : on veut qu'il se voie. */ .etapeBox{margin:22px 0 26px;padding:24px 26px;border-radius:16px; border:1px solid rgba(155,127,232,.36); background:linear-gradient(rgba(155,127,232,.13),rgba(155,127,232,.05))} .etapeBox h3{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--d4);line-height:1.24;color:var(--txt);margin:12px 0 10px;text-wrap:balance} .etapeBox p{color:var(--txt2);font-size:var(--t-body);line-height:1.6;margin:0} .etapeBox .exp-btn{margin-top:18px;width:100%;text-align:center} @media(max-width:620px){.etapeBox{padding:20px 18px}} /* ── 20 · Les couvertures, à leur format ─────────────────────── Les quatre emplacements étaient des cadres pointillés forcés en 3:4, avec un fond dégradé et une mention « à intégrer ». Les couvertures sont arrivées, et aucune des deux n'est en 3:4 : Le Voyage de Sofia est un 2:3 de librairie, Le Déploiement Intégral est un rendu volumétrique en 753 × 930 avec sa propre ombre portée et un fond transparent. On ne recadre donc rien : le cadre prend le format du fichier. Sofia reçoit un arrondi et une ombre, comme un livre posé ; le rendu volumétrique n'en reçoit aucun, il porte déjà les siens et un arrondi lui couperait la tranche. */ .bookCover:has(img), .sofiaCover:has(img){ aspect-ratio:auto;border:none;background:none;padding:0;display:block} .bookCover img, .sofiaCover img{display:block;width:100%;height:auto} .bookCover img, .sofiaCover img{border-radius:10px; box-shadow:0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(155,127,232,.16)} /* ── Deux livres, deux blocs — et de l'air entre les deux ─────── Le rendu volumétrique du Déploiement Intégral a été remplacé par une couverture plate en 400 × 600, soit le 2:3 de Sofia : les deux reçoivent donc le même arrondi et la même ombre, la règle d'exception qui lui retirait les siens n'a plus d'objet. Restait la confusion de lecture : 44 px séparaient le bouton « Tout savoir sur le roman » de la couverture du livre suivant, et l'œil rattachait la seconde au premier. L'écart passe à 96 px et un filet marque la coupure. */ .bookRow2{margin-top:96px;padding-top:96px;border-top:1px solid var(--bord)} @media(max-width:980px){.bookRow2{margin-top:64px;padding-top:64px}} /* ── 21 · Deux formats de plus pour les emplacements photo ───── nsq-base ne connaît que 3:2, 4:5 et 16:9. Les deux photos de Constellations sont en 3:4 et en 4:3 — les formats d'un appareil, pas d'un cadrage éditorial. Les forcer dans un 4:5 ou un 16:9 aurait coupé, en haut la table et les mains, en bas les deux praticiens agenouillés. Or ce sont exactement les gestes qui font la photo. On ajoute donc les deux ratios manquants. */ .r34{aspect-ratio:3/4} .r43{aspect-ratio:4/3} /* ══════════════════════════════════════════════════════════════ 22 · LA PAGE D'ACCÈS PRIORITAIRE ────────────────────────────────────────────────────────────── C'est la page vers laquelle tous les boutons d'achat du site renvoient tant que rien n'est en vente. Elle doit donc se distinguer de toutes les autres sans sortir de la charte : la grammaire reste celle du site, seule la densité change — un sceau en tête, un calendrier tenu par un filet vertical, deux cartes d'avantage à fond plein, et une boîte de capture qui occupe tout l'écran. La teinte de la page est la tonique elle-même, le violet exact de la marque : de toutes les pages c'est celle qui doit sonner le plus « maison ». ══════════════════════════════════════════════════════════════ */ body[data-teinte="lancement"]{--teinte:107,79,187; --teinte-v:179,149,244} /* ── le sceau ────────────────────────────────────────────────── Une étiquette qui se tient au lieu de flotter : filet, fond très bas, et une étoile qui donne l'idée du cachet de cire. */ .lanceSeau{display:inline-flex;align-items:center;gap:9px; padding:8px 15px 8px 11px;border-radius:999px; border:1px solid rgba(var(--teinte-v),.40);background:rgba(var(--teinte),.12); color:var(--txt)} .lanceIcone{color:var(--accent);font-size:13px;line-height:1} .lanceHero h1{margin-top:20px} .lanceHero .pageBaseline{max-width:40ch} /* ── le calendrier ───────────────────────────────────────────── Cinq dates tenues par une seule verticale : on lit l'ordre avant de lire les titres, et c'est l'ordre qui dit l'urgence. */ .lanceCal{list-style:none;margin:34px 0 0;padding:0;position:relative} .lanceCal:before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px; background:linear-gradient(rgba(var(--teinte-v),.55),rgba(var(--teinte-v),.10))} .lanceCal li{position:relative;display:grid;grid-template-columns:170px 1fr;gap:0 28px; padding:0 0 30px 34px;align-items:baseline} .lanceCal li:last-child{padding-bottom:0} .lanceCal li:before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px; border-radius:50%;border:1px solid rgba(var(--teinte-v),.55);background:var(--bg)} .lanceCal li:first-child:before{background:var(--accent);box-shadow:0 0 16px rgba(155,127,232,.6)} .lc-date{font-family:'DM Mono',monospace;font-size:var(--t-label);letter-spacing:.12em; text-transform:uppercase;color:var(--accent)} .lanceCal h3{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--d4);line-height:1.2;color:var(--txt);margin:0 0 7px} .lanceCal p{color:var(--txt2);font-size:var(--t-body);line-height:1.6;margin:0} @media(max-width:760px){ .lanceCal li{grid-template-columns:1fr;gap:8px;padding-left:30px;padding-bottom:26px} } /* ── les trois avantages ─────────────────────────────────────── Les deux premiers portent une promesse chiffrée : ils sont à fond plein. Le troisième est un confort, il reste en retrait. Hiérarchiser trois cartes identiques, c'est déjà vendre. */ .lanceAvantages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px} .la-carte{position:relative;padding:30px 26px 28px;border-radius:16px; border:1px solid var(--bord);background:rgba(255,255,255,.012)} .la-carte.la-fort{border-color:rgba(var(--teinte-v),.42); background:linear-gradient(rgba(var(--teinte),.14),rgba(var(--teinte),.04))} .la-n{font-family:'DM Mono',monospace;font-size:var(--t-label);letter-spacing:.14em;color:var(--accent)} .la-carte h3{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--d4);line-height:1.22;color:var(--txt);margin:12px 0 10px;text-wrap:balance} .la-carte p{color:var(--txt2);font-size:var(--t-body);line-height:1.65;margin:0} .la-carte b{color:var(--txt);font-weight:500} @media(max-width:980px){.lanceAvantages{grid-template-columns:1fr}} /* ── la boîte de capture ─────────────────────────────────────── Elle occupe la largeur de lecture entière et se pose sur un fond plus clair que la page : c'est le seul bloc du site qui fait ça, et c'est voulu. */ .lancePlace{position:relative;overflow:hidden} .lancePlace .ray{width:1000px;height:1000px;top:-380px;left:50%;transform:translateX(-50%); background:radial-gradient(circle,rgba(var(--teinte),.34),transparent 66%)} .lanceBoite{max-width:760px;margin:0 auto;padding:clamp(28px,4vw,52px); border-radius:22px;border:1px solid rgba(var(--teinte-v),.34); background:linear-gradient(rgba(var(--teinte),.15),rgba(13,16,34,.92)); box-shadow:0 40px 90px -40px rgba(0,0,0,.9)} .lanceBoite h2{margin:18px 0 14px} .lanceIntro{color:var(--txt2);font-size:var(--t-lede);line-height:1.6;margin:0 0 28px;max-width:52ch} .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:620px){.lf-grid{grid-template-columns:1fr}} .lf-legende{margin:26px 0 12px} .lf-choix{display:flex;flex-wrap:wrap;gap:9px} .lf-choix label{display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:9px 15px;border-radius:999px;border:1px solid var(--bord); color:var(--txt2);font-size:var(--t-small);transition:border-color .2s,background .2s,color .2s} .lf-choix label:hover{border-color:var(--accent);color:var(--txt)} .lf-choix input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer} .lf-choix input:checked + span{color:var(--txt)} .lf-choix label:focus-within{outline:2px solid var(--accent);outline-offset:3px} .lf-envoi{width:100%;margin-top:28px;text-align:center;font-size:var(--t-lede)} .lf-note{color:var(--txt2);font-size:var(--t-small);line-height:1.6;margin:16px 0 0} /* ── la confirmation ───────────────────────────────────────── */ .lanceMerci{text-align:center;padding:10px 0} .lm-seau{display:inline-flex;align-items:center;justify-content:center; width:54px;height:54px;border-radius:50%;font-size:20px;color:var(--accent); border:1px solid rgba(var(--teinte-v),.45);background:rgba(var(--teinte),.14); box-shadow:0 0 30px rgba(155,127,232,.35)} .lanceMerci h3{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--d3);line-height:1.2;color:var(--txt);margin:20px 0 12px} .lanceMerci p{color:var(--txt2);font-size:var(--t-body);line-height:1.65;max-width:46ch;margin:0 auto} .lm-suite{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:28px} .lm-suite .exp-btn{width:100%;max-width:420px;text-align:center} .lanceSign{text-align:center;color:var(--txt2);font-size:var(--t-small);margin-top:30px} /* ── 23 · Le formulaire dans le hero ─────────────────────────── La page ouvrait sur un bouton d'ancre qui descendait vers le formulaire, trois écrans plus bas. Un clic pour arriver à l'endroit où l'on va cliquer : c'est de la friction pure, et sur une page dont c'est la seule fonction, c'est un abandon. La boîte remonte donc dans le hero, sous le titre. Le calendrier et les avantages passent dessous, pour ceux qui veulent la preuve avant de donner leur adresse. */ .lanceHero{padding-bottom:60px} .lanceHero .wrap.in{padding-bottom:0} .lanceHero .lanceBoite{margin-top:36px} /* ── les gains, chiffrés ─────────────────────────────────────── Un avantage qui reste une phrase ne se compare à rien. Un avantage qui porte deux prix, dont l'ancien barré, se compare tout seul. Le tarif de lancement prend donc l'or — la même encre que le cadeau de fin d'expérience, et pour la même raison : c'est ce qui est donné. */ .lanceGains{list-style:none;margin:24px 0 30px;padding:20px 22px; border-radius:14px;border:1px solid rgba(201,168,76,.30); background:rgba(201,168,76,.055); display:flex;flex-direction:column;gap:14px} .lanceGains li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px} .lg-p{font-size:var(--t-lede);color:var(--txt);line-height:1.4} .lg-p b{color:var(--gold);font-weight:500} .lg-p s{color:var(--txt2);text-decoration-color:rgba(201,168,76,.6); font-size:.86em;margin-left:2px} .lg-d{color:var(--txt2);font-size:var(--t-small);line-height:1.5} @media(max-width:620px){ .lanceGains{padding:18px;gap:16px} .lanceGains li{flex-direction:column;gap:3px} } /* le retour vers le formulaire, pour qui a lu jusqu'en bas */ .lanceRetour{margin-top:46px;text-align:center} /* ── 24 · Les pages légales ──────────────────────────────────── Deux documents longs — mentions légales et CGV — qu'on lit rarement en entier et toujours en diagonale, pour retrouver un point précis. La page leur donne donc un sommaire qui reste visible pendant qu'on descend, et des ancres partout. Le reste tient au calme : une seule colonne de texte à 720 px, pas de carte, pas d'accent de couleur en dehors des liens. Un document juridique qui se met en scène inquiète. */ .legalPage{display:grid;grid-template-columns:232px minmax(0,1fr); gap:56px;align-items:start} /* Le sommaire est un