/* Design tokens Douce Nuit — source unique des couleurs, des rayons, et de la justification du texte (tout en bas). Modifier ici se répercute sur la landing ET sur le bilan. */ :root{ --bg:#0B0B16; --bg-2:#14142A; --bg-3:#1B1A38; --line:#26254A; --lav:#9B8CFF; --lav-bright:#B9ADFF; --violet:#6D5CE0; --text:#ECEBF8; --muted:#ABA8CF; --muted-2:#7E7CA6; --wake:#F5A3C7; /* marqueur de réveil, doux */ /* ── Palette secondaire ─────────────────────────────────────── Le site n'avait qu'un accord : lavande sur bleu nuit, partout, du hero au pied de page. Tout se ressemblait — non par manque de soin, mais parce qu'une seule teinte ne peut pas rythmer une page longue. Ces deux familles complètent la lavande sans la remplacer : · le vert-canard, froid et sérieux, pour ce qui informe (tableaux, documents imprimés, comparatifs) ; · la terre rose, chaude, pour ce qui parle des gens (la fondatrice, les témoignages, la newsletter). La lavande, elle, reste réservée à l'action : boutons, prix, liens. C'est ce partage qui évite le sapin de Noël — chaque couleur a un emploi, et un seul. */ --canard:#2C5150; /* fonds pleins des documents imprimés */ --canard-2:#3C6B69; --canard-clair:#8FC9C2; /* la même famille, lisible sur fond nuit */ --terre:#DDB3A8; /* terre rose : les sections humaines */ --terre-clair:#EFD8D1; --terre-vive:#C98878; /* accent sur fond clair, contraste suffisant */ --creme:#FDF3EE; /* le papier : fond des fiches à imprimer */ --sable:#F6EAE3; /* Témoignages : les seules couleurs du site hors palette lavande. Ces messages doivent ressembler à ce qu'ils sont — des messages reçus sur un téléphone — et un fil de discussion n'est jamais violet. Noir et gris, comme iOS. */ --avis-fond:#000000; --avis-bulle:#333335; --avis-bord:#1E1E20; --avis-texte:#F5F5F7; --avis-gris:#98989D; --radius:22px; --maxw:1120px; --shadow:0 24px 60px -20px rgba(0,0,0,.7); --glow:0 0 40px -6px rgba(155,140,255,.55); } /* ───────────────────────────────────────────────────────────── LES COUPURES DE LIGNE Ce fichier est le seul que chargent toutes les pages : c'est donc ici, et nulle part ailleurs, qu'on décide comment le texte se coupe. Ailleurs, la règle finirait recopiée dans blog.css, legal.css et apercu.css, et les trois divergeraient. 1) Les titres s'équilibrent. Sans ça, un titre de deux lignes laisse régulièrement un mot seul sur la seconde — « Créée par une maman devenue coach / sommeil ». C'est le défaut qui fait « pas fini » le plus vite sur un gros corps, et il change à chaque largeur d'écran, donc on ne peut pas le rattraper à la main. `balance` répartit les mots sur les lignes. 2) Les chapôs évitent le mot orphelin. `pretty` ne touche qu'à la dernière ligne : il remonte de quoi ne pas la laisser à un seul mot. Les deux sont ignorés par les navigateurs qui ne les connaissent pas — au pire, on retrouve le rendu d'avant. */ h1, h2, h3, .ap-title, .ap-prog-t, .ap-cta-t, .ap-napper-t, .ap-diag-h, .carte-t, .ap-faille-t, .ap-ev-t{ text-wrap:balance; } .lead, .chapeau, .recognize-intro, .recog-lead, .ap-cta-p, .ap-sub, .nl-legal, .trust-strip, .ap-tl-note{ text-wrap:pretty; } /* ───────────────────────────────────────────────────────────── LA JUSTIFICATION DU TEXTE Ce qui est justifié : la prose suivie, celle qu'on lit ligne après ligne — les articles du blog, les pages légales, les paragraphes du bilan et de l'aperçu. Rien d'autre. Un titre, une légende, une pastille, une cellule de tableau ou un texte centré ne se justifient jamais : la justification n'a de sens que sur un bloc d'au moins quatre lignes. Trois précautions, sans lesquelles justifier abîme plus qu'il n'arrange : 1. `hyphens:auto`. Sans césure, le navigateur ne peut étirer que les espaces : un mot long rejeté à la ligne suivante laisse derrière lui des blancs énormes, et ces blancs s'alignent verticalement d'une ligne à l'autre — les « rivières » qui font qu'un texte justifié ressemble à du texte cassé. Le français a des mots longs (« endormissement », « accompagnement ») : la césure n'y est pas un luxe. Elle repose sur le `lang="fr"` des pages — toutes le portent, ne pas le retirer. 2. `hyphenate-limit-chars`. Sans elle, on coupe « bé-bé ». Cinq lettres au minimum pour qu'un mot soit coupable, trois avant le tiret et deux après. C'était six lettres et trois de chaque côté : trop peu de mots coupables, donc des lignes qu'il fallait étirer à la place — on voyait les blancs dans les paragraphes du plan. « bébé » (quatre lettres) reste protégé. 3. Au-dessus de 700 px pour le blog et les pages légales. Sur un téléphone, la colonne fait 40 à 50 signes : trop peu pour répartir un blanc discrètement, et chaque ligne se retrouve étirée ou césurée. Sous ce seuil, on garde le drapeau à droite — c'est ce que fait n'importe quel livre qui passe en petit format. LE BILAN ET SON APERÇU ONT FAIT EXCEPTION du 27/07 au 23/08/2026 : eux se justifiaient à toutes les largeurs, au motif qu'un bord droit irrégulier « ne ressemble pas à un document ». C'était vrai d'une page de livre, pas d'une colonne de téléphone. ───────────────────────────────────────────────────────────── */ /* ⚠ LE BILAN ET SON APERÇU SONT AU FER À GAUCHE (23/08/2026, décision de Cyril, en renversement du 27/07). La règle d'avant s'appuyait sur la césure pour tenir : `hyphens:auto` coupe les mots longs, donc le blanc reste réparti. Mesuré sur le document rendu à 500 px, ça donne l'inverse de ce qu'on cherchait — un écran d'analyse portait « s'appro-/fondir », « la vigi-/lance », « la pro-/gressivité », « l'en-/tretient », et le paragraphe du plan trois césures en cinq lignes. La colonne fait 45 signes : à cette largeur, chaque ligne doit être soit étirée, soit coupée, et les blancs restants s'alignent en rivières. Ce qui se joue là n'est pas le confort de lecture, c'est le NIVEAU DE FINITION PERÇU d'un document vendu 19,99 € : un mot coupé toutes les trois lignes se lit comme du texte mal composé, et on doute de ce qu'il y a autour. Le fer à gauche coûte un bord droit irrégulier, qui ne se remarque pas, et rend la césure inutile — d'où `hyphens` retiré avec la justification, et non gardé « au cas où » : c'est lui qu'on nous reprochait. `text-wrap:pretty` répare la seule chose que le drapeau abîme vraiment, la ligne veuve d'un mot en fin de paragraphe. Ignoré par les navigateurs qui ne le connaissent pas, sans repli à prévoir. ⚠ `bilan/index.html` PORTE SA PROPRE COPIE de cette règle (classes `.prose p`) et se change avec — sinon le bilan d'EXEMPLE de la landing reste justifié pendant que le vrai ne l'est plus, et c'est la même cliente qui compare les deux. Le blog, les pages légales et la landing, eux, n'ont pas bougé : ils gardent la règle du 14/08 ci-dessous. */ /* Le bilan et son aperçu : synthèse, paragraphes, étapes du plan. `.fiche-suite-p` est le bloc de sortie de la fiche d'/accueil-v2/ : il est ici, avec le bilan, parce que la fiche est habillée par apercu.css — ses autres paragraphes suivent donc cette règle, et deux régimes de coupure dans un même document se voient, sur le même écran de téléphone. */ .ap-synth, .ap-lead, .ap-p, .ap-diag-p, .ap-step-b, .fiche-suite-p, .ap-faille p, .bl-step-b, .bl-levier-c p{ text-align:left; hyphens:manual; -webkit-hyphens:manual; text-wrap:pretty; } /* ⚠ LA BORNE DES 700 px EST TOMBÉE (14/08/2026, décision de Cyril). Le blog, les pages légales et la landing gardaient le drapeau sur téléphone, au motif qu'une colonne étroite justifiée se troue. C'est vrai SANS césure ; `hyphens:auto` coupe les mots longs et le blanc reste réparti — c'est déjà ce qui fait tenir le bilan, justifié à toutes les largeurs depuis le 27/07/2026 et lu presque uniquement sur téléphone. ⚠ CE QUI LA FAIT FONCTIONNER, C'EST `lang="fr"` sur les pages : sans lui, le navigateur ne sait pas où couper et la justification retrouve ses trous, partout d'un coup. */ .art-corps p, .art-corps li, .legal p, .legal li, .founder p, .q .a{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:5 3 2; }