/* ============================================================ Lazy Mind / site vitrine. Habillage repris de DIRECTION-ARTISTIQUE.md et des tokens du socle partagé (kit-demarrage/shared/css/tokens.css). Ce fichier RECOPIE les valeurs du socle, il ne les importe pas : le site est hors du dépôt des apps, il doit rester autonome. Si le socle bouge, ce bloc est à remettre à jour. ============================================================ */ :root{ /* --- module pixel (règle : le pixel garde sa taille) --- */ --px: 2px; /* Le navigateur adapte champs, ascenseurs et menus au thème. */ color-scheme: light dark; /* --- neutres : encre prune sur papier rosé --- */ --surface-base: #FBF7F9; --surface-1: #FFFCFE; --surface-2: #FFFFFF; --encre: #3A2F3F; --encre-douce: #5C4F62; --filet: #E3D9E6; /* filets décoratifs */ --filet-ui: #948899; /* contours porteurs de sens (3:1 mini) */ /* --- teinte du studio : ciel (défaut) --- */ --accent-surface: #B0CEFB; --accent-line: #3176AD; --accent-ink: #245B80; --accent-pale: #DEEAFD; --accent-deep: #1C3E51; /* --- rayons : multiples du module --- */ --radius-md: calc(var(--px) * 4); /* 8 px */ --radius-lg: calc(var(--px) * 6); /* 12 px */ --radius-xl: calc(var(--px) * 8); /* 16 px */ --radius-pill: 999px; /* --- ombres dures, sans flou --- */ --ombre-touche: 0 calc(var(--px) * 1.5) 0 0 var(--accent-line); --ombre-touche-appui: 0 calc(var(--px) * 0.5) 0 0 var(--accent-line); --ombre-carte: 0 calc(var(--px) * 1.5) 0 0 var(--filet); --largeur: 48rem; } /* --- les cinq teintes, une par app --- */ :root[data-theme="light"]{ color-scheme: light; } :root[data-theme="dark"]{ color-scheme: dark; } [data-teinte="rose"]{ --accent-surface:#FFAED8; --accent-line:#C22E90; --accent-ink:#932373; --accent-pale:#FFE7F4; } [data-teinte="lavande"]{ --accent-surface:#D9B0FC; --accent-line:#834ACE; --accent-ink:#6130B1; --accent-pale:#F0E4FD; } [data-teinte="ciel"]{ --accent-surface:#B0CEFB; --accent-line:#3176AD; --accent-ink:#245B80; --accent-pale:#DEEAFD; } [data-teinte="menthe"]{ --accent-surface:#AFFCF2; --accent-line:#2A9A78; --accent-ink:#217A5C; --accent-pale:#E2FDF9; } [data-teinte="citron"]{ --accent-surface:#FBFAA8; --accent-line:#A28D2D; --accent-ink:#836F24; --accent-pale:#FDFCDD; } /* NEUTRE, ajoutee le 05/09/2026. Ce n'est PAS une sixieme teinte du registre : le registre attribue une couleur a une FAMILLE D'USAGE d'application, et cette case-la sert a l'inverse -- une carte qui n'appartient pas au systeme de couleurs du studio, parce que l'outil qu'elle presente porte sa propre identite. Loi lisible est le premier cas. Son icone est rouge, une couleur qui n'existe nulle part chez Lazy Mind : la carte se tait pour la laisser parler. NE PAS l'inscrire dans « Le registre des teintes » du README, qui reste a cinq teintes pour les applications du studio. */ [data-teinte="neutre"]{ --accent-surface:#D8CFDC; --accent-line:#7A6D80; --accent-ink:#5C4F62; --accent-pale:#EFE9F1; } /* ---------- LE PIEGE DES OMBRES, A NE PAS REFAIRE ---------- Une variable CSS est substituee LA OU ELLE EST DECLAREE, pas la ou elle est lue. Declaree une seule fois dans :root, --ombre-touche resolvait var(--accent-line) avec la teinte de :root, c'est-a-dire ciel, et cette valeur DEJA RESOLUE heritait partout. Resultat : sur toutes les pages non-ciel, le bouton avait un contour a sa teinte et une ombre bleue. Repere le 30/08/2026 sur la page testeur·ses, en menthe. Les cartes n'etaient pas touchees parce qu'elles ecrivent leur ombre en clair dans la regle, sans passer par la variable. Le remede : redeclarer les deux ombres sur tout element qui porte data-teinte, ou elles se resolvent alors avec la teinte locale. C'est exactement la precaution que documente le socle (kit-demarrage/shared/css/tokens.css, « pourquoi ces quatre blocs repetes ») : ce fichier avait recopie les valeurs sans recopier la precaution. ------------------------------------------------- */ [data-teinte]{ --ombre-touche: 0 calc(var(--px) * 1.5) 0 0 var(--accent-line); --ombre-touche-appui: 0 calc(var(--px) * 0.5) 0 0 var(--accent-line); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--surface-base); color:var(--encre); font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:1.0625rem; line-height:1.65; /* Pas de ligne veuve : le navigateur remonte le dernier mot plutôt que de le laisser seul sur sa ligne. Hérité par tout le document, et c'est le but : une règle posée une fois protège aussi les textes à venir. */ text-wrap:pretty; } /* ---------- L'équilibre des lignes ---------- La doctrine vit dans le socle des apps, `shared/css/base.css` : une phrase s'équilibre, un paragraphe évite l'orphelin. Elle n'est pas recopiée ici, on y renvoie. CE SITE ÉQUILIBRE PLUS LARGEMENT QUE LE SOCLE, ET C'EST UNE QUESTION DE JUSTIFICATION, PAS UN ÉCART DE PRINCIPE. Sur un téléphone, une ligne de texte tient une quarantaine de signes : le drapeau ne se voit pas. Ici la justification monte à 48 rem, et le même paragraphe donne une ligne pleine suivie d'un moignon de trois mots. `pretty` ne le rattrape pas : il ne remonte que le dernier MOT, pas une fin de ligne courte. Les paragraphes courts de cette page prennent donc `balance`. AUCUN REPLI À PRÉVOIR. Un navigateur qui ne connaît pas ces valeurs les ignore et compose comme avant. Chromium plafonne `balance` à six lignes et l'ignore au-delà : un texte long ne peut pas coûter cher par accident. ------------------------------------------------- */ h1,h2,h3, .bouton, .accroche, .carte p, .bloc-soutien p, .bloc-contact > p, .secours{ text-wrap:balance; } /* Les titres portent la fonte d'affichage, les boutons non. Le socle fait pareil : dans components.css, .btn est en fonte de TEXTE COURANT. Un libellé d'action doit se lire d'un coup, pas se regarder. */ h1,h2,h3{ font-family:"Basteleur",Georgia,"Noto Serif",serif; font-weight:700; } .bouton{ font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:700; } .conteneur{ width:100%; max-width:var(--largeur); margin:0 auto; padding:0 1.25rem; } /* ---------- Accessibilité ---------- */ .lien-evitement{ position:absolute; left:-9999px; top:0; z-index:10; background:var(--accent-surface); color:var(--accent-ink); border:calc(var(--px)*1) solid var(--accent-line); padding:.7rem 1rem; border-radius:0 0 var(--radius-lg) 0; font-weight:700; text-decoration:none; } .lien-evitement:focus{ left:0; } .hors-ecran{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:calc(var(--px)*1.5) solid var(--accent-line); outline-offset:calc(var(--px)*1); } /* ---------- En-tête ---------- */ .entete{ padding:3.5rem 0 2.5rem; background:var(--surface-1); border-bottom:calc(var(--px)*1) solid var(--filet); } .signe{ display:block; width:32px; height:32px; /* 16 unités x --px : la grille est respectée */ margin:0 0 .75rem; } /* ---------- Le nuage mene a la page a propos ---------- Choix du 30/08/2026 : l'acces a /a-propos/ n'est pas une entree de menu, c'est le signe du studio lui-meme. Le poeme qui s'y trouve s'ouvre sur un nuage, le signe en est un. LA ZONE CLIQUABLE FAIT 48 PX DE HAUT alors que le nuage en fait 32. Ce sont les marges internes qui les ajoutent : la regle du socle est tenue sans agrandir le signe, qui doit rester a 16 unites x 2 px. Le mot est ecrit en toutes lettres et TOUJOURS VISIBLE, pas seulement au survol : un lien qui n'existe qu'au survol n'existe pas sur un telephone. */ .signe-lien{ display:inline-flex; align-items:center; gap:.55rem; min-height:48px; margin:0 0 .35rem; padding:.4rem .6rem .4rem 0; border-radius:var(--radius-md); text-decoration:none; } .signe-lien .signe{ margin:0; flex:none; } .signe-mot{ font-family:"Basteleur",Georgia,"Noto Serif",serif; font-style:italic; font-size:1rem; line-height:1; color:var(--encre-douce); letter-spacing:.01em; /* Le trait n'apparait qu'au survol : sur un signe deja parlant, un souligne permanent alourdirait le haut de la page. */ text-decoration:none; } .signe-lien:hover .signe-mot{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:.2em; } /* La derive du nuage : un seul module, par pas, jamais en glissando. L'ombre dure et les pas de deux crans sont la meme grammaire que l'appui des boutons. */ .signe-lien .signe{ transition:transform .12s steps(2); } .signe-lien:hover .signe, .signe-lien:focus-visible .signe{ transform:translateX(calc(var(--px)*1)); } @media (prefers-reduced-motion: reduce){ .signe-lien .signe{ transition:none; } .signe-lien:hover .signe, .signe-lien:focus-visible .signe{ transform:none; } } .entete h1{ margin:0; font-size:2.6rem; line-height:1.1; letter-spacing:-.005em; } .accroche{ margin:.7rem 0 0; max-width:34rem; color:var(--encre-douce); font-size:1.1rem; } /* ---------- Sections ---------- */ main{ padding-bottom:3.5rem; } section{ margin-top:3.25rem; } h2{ margin:0 0 1.25rem; font-size:1.35rem; } /* ---------- Cartes d'applications ---------- */ /* UNE COLONNE, PUIS DEUX. Le seuil n'est pas esthetique, il est mesure : une carte doit etre assez large pour porter « Ouvrir l'application » et « En savoir plus » SUR UNE LIGNE, ce qui demande environ 290 px a l'interieur de la carte. En dessous de 47 rem de fenetre, deux colonnes donneraient des cartes trop etroites, le second bouton retomberait a la ligne et la rangee se desequilibrerait a nouveau. L'ancien repeat(auto-fill, minmax(16rem, 1fr)) fabriquait exactement ce cas entre 36 et 47 rem. Si le libelle d'un bouton s'allonge un jour, c'est ce seuil qu'il faut remesurer, pas la taille du texte. */ /* ---------- Le tri de la grille ---------- Trois boutons, ajoutes le 05/09/2026 (voir brancherFiltres() dans js/app.js pour le pourquoi). Ils reprennent la forme des reglages du haut de page : meme pastille contouree, meme etat actif plein. LE PIEGE A CONNAITRE : .carte est en display:flex, qui gagne sur le display:none que l'attribut hidden pose par defaut. Sans la regle .carte[hidden] ci-dessous, le tri ne cachait rien du tout. */ .filtres{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; } .filtre{ font:inherit; font-size:.9rem; padding:.35rem .85rem; border:calc(var(--px)*1) solid var(--filet-ui); border-radius:var(--radius-pill); background:transparent; color:var(--encre-douce); cursor:pointer; } .filtre:hover{ border-color:var(--accent-line); color:var(--accent-ink); } /* MEME PAIRE QUE LE GROUPE SEGMENTE du haut de page (accent-surface sur accent-deep), et pas accent-pale : c'est la seule des deux qui tienne le contraste dans les deux themes. */ .filtre--actif{ background:var(--accent-surface); border-color:var(--accent-line); color:var(--accent-deep); font-weight:700; } .filtre--actif:hover{ color:var(--accent-deep); } .filtre:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; } .carte[hidden]{ display:none; } .grille-apps{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:1fr; } @media (min-width:47rem){ .grille-apps{ grid-template-columns:1fr 1fr; } } .carte{ background:var(--surface-1); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-xl); box-shadow:0 calc(var(--px)*1.5) 0 0 var(--accent-line); padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; } .carte h3{ margin:0; font-size:1.2rem; color:var(--accent-ink); } .carte p{ margin:0; color:var(--encre-douce); font-size:.98rem; } /* L'ENTETE D'UNE CARTE : l'icone facultative, a cote du titre et de l'etiquette -- jamais au-dessus, pour ne jamais gener la capture qui, elle, garde toute la largeur. Sans icone, "carte__titres" occupe seul la rangee et rien ne change a l'oeil par rapport a avant. */ /* L'icone s'etire pour egaler la hauteur du bloc titre + etiquette -- "align-items:stretch" (au lieu de "center") la fait suivre ce bloc, et "aspect-ratio:1/1" la garde carree quelle que soit cette hauteur. Elle grandit et retrecit donc toute seule si le titre passe sur deux lignes ou si l'etiquette change de longueur, sans valeur figee. */ .carte__entete{ display:flex; align-items:stretch; gap:.7rem; } .carte__icone{ flex:none; width:auto; height:auto; aspect-ratio:1/1; align-self:stretch; /* Plafond : sans lui, une etiquette qui retombe sur plusieurs lignes (une largeur de carte intermediaire, ni mobile ni grand ecran) fait grossir l'icone demesurement avec elle. 4,5rem = confortable pour un titre sur deux lignes + une etiquette sur une ligne, le cas courant. */ max-height:4.5rem; border:calc(var(--px)*1) solid var(--accent-line); /* L'ARRONDI EST EN POURCENTAGE, ET C'EST OBLIGATOIRE. Corrige le 05/09/2026. Il etait a var(--radius-md), soit 8 px fixes, alors que les PNG d'icones sont dessines avec un arrondi de 21 % de leur cote (40 px sur 192). Le contour coupait donc les coins bien plus court que l'image, et laissait voir le fond de la carte dans quatre petits angles. Invisible en theme clair, ou l'icone est creme sur une carte quasi blanche ; flagrant en theme sombre, ou le fond de carte est presque noir. L'element est en aspect-ratio 1/1 et sa taille varie avec la hauteur de l'en-tete : seul un pourcentage suit l'image a toutes les tailles. NE PAS remettre une valeur en pixels. SI TU REDESSINES LES ICONES avec un autre arrondi, c'est ce chiffre qu'il faut remesurer. ET POURQUOI « + var(--px) », ajoute le 06/09/2026. A 21 % tout seul, il restait un mince croissant de fond de carte entre le contour et l'image, visible surtout en theme sombre. La cause est mecanique : le contour est dessine sur la boite, l'image est dessinee DEDANS, donc sur un carre plus petit d'une epaisseur de contour de chaque cote. Son arrondi propre, 21 % de ce carre-la, est plus large que la courbe interieure du contour. Ajouter une epaisseur de contour au rayon les fait coincider. Mesure a 6x sur l'icone menthe : trois pixels de fond visibles a 21 %, un seul a +1,16 px, aucun a +var(--px). */ border-radius:calc(21% + var(--px)); display:block; object-fit:cover; } .carte__titres{ display:flex; flex-direction:column; gap:.3rem; } .carte__titres h3{ margin:0; } /* LA CAPTURE D'UNE CARTE. Facultative : tant que data/apps.js ne porte pas de champ "capture", aucune image n'est ajoutee et la carte est exactement celle d'avant. Les dimensions viennent du fichier de donnees et sont obligatoires : sans elles, la page saute au moment ou l'image arrive. */ .carte__capture{ display:block; width:100%; height:auto; background:var(--surface-2); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-md); } /* Les actions vivent TOUJOURS dans ce conteneur, meme quand il n'y en a qu'une. C'est lui qui porte le margin-top:auto, donc c'est lui qui aligne les boutons en bas de toutes les cartes de la grille, quelle que soit la longueur des descriptions. */ .carte .actions-carte{ margin-top:auto; /* "align-items:flex-end", pas "center" : sur la seule carte a deux actions (HabitGotchi), "En savoir plus" est plus petit que le bouton plein -- il se cale sur SA base plutot que sur son milieu. Repere le 02/09/2026. */ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.45rem; } /* LES BOUTONS DE CARTE RESPIRENT UN PEU MOINS QUE CEUX DU CORPS DE LA PAGE. Une carte fait environ 300 px de large a l'interieur : c'est ce qui decide si « Ouvrir l'application » et « En savoir plus » tiennent sur une ligne. A 1,2 rem de marges internes il manquait un pixel, et un pixel suffit a faire retomber le second bouton a la ligne, ce qui ajoutait 56 px a la carte et desequilibrait la rangee entiere. La hauteur cliquable, elle, ne bouge pas. */ .carte .actions-carte .bouton{ padding-left:.95rem; padding-right:.95rem; } .carte--bientot{ background:transparent; border-style:dashed; border-color:var(--filet-ui); box-shadow:none; } .carte--bientot h3{ color:var(--encre); } /* Le conteneur des pastilles : une rangee qui les laisse passer a la ligne CHACUNE POUR SOI si la carte est etroite -- jamais un mot compose qui casse au milieu (repere le 02/09/2026, "navigateur ou telephone" a une largeur de grille intermediaire). */ .etiquettes{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.35rem; } .etiquette{ display:inline-block; padding:.3rem .75rem; border:calc(var(--px)*1) solid var(--filet-ui); border-radius:var(--radius-pill); color:var(--encre-douce); font-size:.82rem; letter-spacing:.02em; white-space:nowrap; } /* ---------- Boutons : aplat pastel, contour et label profonds ---------- */ .bouton{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.65rem 1.2rem; background:var(--accent-surface); color:var(--accent-ink); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-lg); box-shadow:var(--ombre-touche); font:inherit; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .08s steps(2), box-shadow .08s steps(2); } /* LE BOUTON SECONDAIRE. Une carte peut porter deux actions : ouvrir l'application, et sa page sur ce site. La principale garde la face pleine, la seconde s'allege : plus d'aplat, plus d'ombre portee, le contour et le label suffisent. Sans ca les deux pesent pareil et l'oeil ne sait pas laquelle est la vraie action. */ .bouton--secondaire{ background:transparent; box-shadow:none; color:var(--accent-ink); } .bouton--secondaire:active{ box-shadow:none; } /* « EN SAVOIR PLUS » QUAND IL SUIT DEJA UNE ACTION. Sur la seule carte qui porte les deux (HabitGotchi), deux boutons de meme taille ne tenaient pas sur une ligne et se superposaient : la carte montait a 418 px contre 280 pour les autres, et toute la premiere rangee de la grille suivait. Le second cesse donc d'etre un bouton et devient un lien : plus de contour, plus petit, graisse normale, souligne. LA ZONE CLIQUABLE RESTE A 48 PX DE HAUT. C'est la regle du socle et elle ne se negocie pas : seul l'ASPECT s'allege, jamais la cible. POURQUOI UN SELECTEUR DE VOISINAGE et pas une classe posee par js/app.js : la regle est « quand une action pleine est deja la ». Elle se lit ici, dans la feuille de style, et il n'y a rien a tenir synchronise entre deux fichiers. Sur les neuf cartes « Bientot », ou « En savoir plus » est la SEULE action de la carte, il garde son contour et son poids. */ .carte .actions-carte .bouton + .bouton--secondaire{ min-height:48px; padding:0 .25rem; border:0; background:transparent; box-shadow:none; font-size:.82rem; font-weight:400; text-decoration:underline; text-decoration-color:var(--filet-ui); text-underline-offset:.22em; /* "align-items:flex-end" cale ce lien sur le bord bas du BOUTON, mais le bouton porte en plus une ombre dure de calc(--px*1.5) sous ce bord (voir --ombre-touche). Ce decalage la rattrape, pour que le lien tombe au niveau du bas de l'ombre, pas du bouton seul. */ position:relative; top:calc(var(--px)*1.5); } .carte .actions-carte .bouton + .bouton--secondaire:hover{ background:transparent; color:var(--accent-deep); text-decoration-color:currentColor; } .carte .actions-carte .bouton + .bouton--secondaire:active{ transform:none; box-shadow:none; } .bouton:hover{ background:var(--accent-pale); color:var(--accent-deep); } .bouton:active{ transform:translateY(calc(var(--px)*1)); box-shadow:var(--ombre-touche-appui); } @media (prefers-reduced-motion: reduce){ .bouton{ transition:none; } .bouton:active{ transform:none; } } /* ---------- Soutien ---------- */ .bloc-soutien{ background:var(--accent-pale); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-xl); box-shadow:0 calc(var(--px)*1.5) 0 0 var(--accent-line); padding:1.6rem; } .bloc-soutien h2{ color:var(--accent-ink); } .bloc-soutien p{ margin:0 0 1.1rem; color:var(--encre-douce); } .bloc-soutien p:last-child{ margin-bottom:0; } .bloc-soutien .bouton{ background:var(--surface-2); } .bloc-soutien .bouton:hover{ background:var(--accent-surface); color:var(--accent-ink); } /* ---------- Contact ---------- */ .bloc-contact > p{ color:var(--encre-douce); } .bouton--large{ font-size:1.05rem; padding:.8rem 1.5rem; } .secours{ margin-top:1.5rem; color:var(--encre-douce); font-size:.95rem; } a{ color:var(--accent-ink); } a:hover{ color:var(--accent-deep); } /* ---------- Pied ---------- LE PIED DESCEND AU BAS DE LA FENETRE SUR LES PAGES COURTES. Ajoute le 05/09/2026. Sans ca, sur une page courte (la page a propos, surtout), le pied se posait juste sous le texte et TOUT LE VIDE RESTANT tombait EN DESSOUS de lui : un filet, une ligne de mentions, puis sept cents pixels de rien. On lisait le vide comme un pied de page geant. Le corps devient une colonne flexible haute d'au moins un ecran, et c'est
qui absorbe le reste. Le vide passe alors AU-DESSUS du filet, ou il se lit comme de l'air autour du texte. Deux min-height, et c'est voulu : dvh tient compte de la barre d'adresse mobile qui se replie, vh sert de repli aux navigateurs qui ne le connaissent pas. Le second ecrase le premier la ou il est compris. Sans effet sur les pages longues, ou main depasse deja un ecran. */ body{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; } body > main{ flex:1 0 auto; } body > .pied{ flex-shrink:0; } .pied{ border-top:calc(var(--px)*1) solid var(--filet); padding:1.75rem 0; color:var(--encre-douce); font-size:.9rem; } .pied p{ margin:0; } @media (max-width:30rem){ .entete{ padding:2.75rem 0 2rem; } .entete h1{ font-size:2.15rem; } } /* ============================================================ PAGES D'APPLICATION ET ARTICLES, ajouté le 28/08/2026 ------------------------------------------------------------ Habillage des pages /nom-de-lapp/ et, plus tard, des articles. Aucune valeur nouvelle : tout vient des tokens déclarés en haut de ce fichier. Aucune ombre floue, conformément à la charte. La teinte vient de l'attribut data-teinte posé sur . ============================================================ */ /* ---------- En-tête d'une page d'application ---------- */ .entete-app{ padding:2.5rem 0 2.25rem; background:var(--surface-1); border-bottom:calc(var(--px)*1) solid var(--filet); } .entete-app h1{ margin:0; font-size:2.15rem; line-height:1.15; letter-spacing:-.005em; color:var(--accent-ink); } /* Fil d'Ariane : rappelle où on est quand on arrive de Google, et donne aux moteurs le chemin vers l'accueil. */ .fil{ margin:0 0 1rem; font-size:.9rem; color:var(--encre-douce); } .fil a{ text-decoration:none; } .fil a:hover{ text-decoration:underline; } /* ---------- Le bloc de réponse ---------- C'est le paragraphe que les moteurs de recherche et les IA extraient. Il est mis en avant visuellement pour la même raison qu'il l'est pour les machines : quelqu'un qui arrive de Google veut savoir en trois secondes si c'est ce qu'il cherchait. */ .reponse{ margin:1.5rem 0 0; padding:1.4rem; background:var(--accent-pale); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-xl); box-shadow:0 calc(var(--px)*1.5) 0 0 var(--accent-line); font-size:1.05rem; text-wrap:pretty; } /* ---------- États provisoires ---------- */ .etat-publication, .a-venir{ display:inline-block; margin:1.5rem 0 0; padding:.5rem 1rem; border:calc(var(--px)*1) dashed var(--filet-ui); border-radius:var(--radius-pill); color:var(--encre-douce); font-size:.95rem; } .a-venir{ margin-top:0; } /* ---------- Corps de page ---------- */ .page-app main p{ text-wrap:pretty; } .page-app main ul{ margin:0; padding-left:1.3rem; } .page-app main li{ margin-bottom:.6rem; } .page-app main li:last-child{ margin-bottom:0; } .page-app main li strong{ color:var(--accent-ink); } /* Les h3 servent aux questions de la FAQ : ils doivent se lire comme des questions posées, donc coller à leur réponse. */ .page-app h3{ margin:1.75rem 0 .4rem; font-size:1.08rem; color:var(--accent-ink); } .page-app h3 + p{ margin:0; color:var(--encre-douce); } /* ---------- Captures ---------- */ figure{ margin:0 0 1.75rem; } figure img{ display:block; width:100%; height:auto; background:var(--surface-2); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-lg); box-shadow:0 calc(var(--px)*1.5) 0 0 var(--accent-line); } figcaption{ margin-top:.6rem; color:var(--encre-douce); font-size:.92rem; } /* ---------- Encart testeur ---------- Repris tel quel en bas de chaque page d'app et de chaque article. Il se détache du corps de la page sans crier. */ .encart-testeur{ margin-top:3.25rem; margin-bottom:2rem; /* respiration avant le pied de page */ padding:1.6rem; background:var(--surface-1); border:calc(var(--px)*1) solid var(--accent-line); border-radius:var(--radius-xl); box-shadow:0 calc(var(--px)*1.5) 0 0 var(--accent-line); } .encart-testeur h2{ margin:0 0 .8rem; color:var(--accent-ink); } .encart-testeur p{ margin:0 0 1.1rem; color:var(--encre-douce); } .encart-testeur p:last-child{ margin-bottom:0; } /* LA PRECISION DE PERIMETRE, ajoutee le 05/09/2026. L'encart parlait de « chaque application » alors que le programme ne concerne que les applications Android du Play Store : les outils web gratuits du studio n'ont ni place limitee ni cadeau a offrir, ils sont deja ouverts. Rendue secondaire a l'oeil, parce que c'est une precision et non l'argument. */ .encart-testeur__precision{ font-size:.9rem; opacity:.85; } @media (max-width:30rem){ .entete-app{ padding:2rem 0 1.75rem; } .entete-app h1{ font-size:1.8rem; } .reponse{ padding:1.1rem; } } /* ---------- La page du texte ---------- /a-propos/ ne contient qu'un poeme, decision du 29/08/2026, et c'est une page de respiration : elle se compose comme telle. CE QUI FAIT L'AIR ICI, ce n'est pas une marge geante en haut, c'est l'INTERLIGNE. A 2,05 chaque vers a sa place, et le poeme forme un bloc qu'on peut regarder sans le lire. Ne pas descendre sous 1,9. LE TEXTE A CHANGE DEUX FOIS LE 05/09/2026 : Gautier (22 vers), puis Rimbaud (8 vers), puis des extraits en PROSE de Lafargue. Les regles .poeme / .vers / .vers--strophe ci-dessous NE SERVENT PLUS. Elles sont gardees exprès, avec leurs raisons, pour le jour ou la page reviendrait a du vers. Ne pas les supprimer en croyant faire du menage ; ne pas s'en servir pour de la prose non plus, l'italique et l'interligne a 2,05 y sont illisibles sur un paragraphe entier. LA JUSTIFICATION EST COURTE, 34 rem au lieu des 48 rem du site. Un alexandrin tient alors sur une ligne jusqu'a environ 560 px de large, ce qui est le vrai but : un vers coupe n'est plus un vers. L'ITALIQUE EST SYNTHETIQUE. Ni Basteleur ni Mulish n'ont de fonte italique dessinee dans assets/fonts/ : le navigateur incline le trace lui-meme. C'est acceptable sur Mulish, qui est droite et reguliere. Le jour ou tu veux le vrai dessin, il faut ajouter Mulish-Italic.woff2, sa declaration dans fonts.css et sa ligne dans la liste des fichiers a televerser du LISEZ-MOI. */ .poeme{ margin:3.5rem auto 0; max-width:34rem; font-style:italic; font-size:1.06rem; line-height:2.05; color:var(--encre); } /* UN VERS = UN BLOC. Le retrait pendu ne sert qu'aux ecrans etroits : quand un alexandrin deborde, sa suite rentre de 1,4 rem et ne peut plus se lire comme le vers suivant. Sur un ecran large il ne se voit pas, et c'est normal. */ .poeme .vers{ display:block; padding-left:1.4rem; text-indent:-1.4rem; } /* Le blanc entre deux quatrains. Une marge, et pas une ligne vide : une ligne vide serait annoncee comme un vers par les lecteurs d'ecran, alors qu'elle ne se lit pas. */ .poeme .vers--strophe{ margin-top:1.35rem; } /* ---------- Les extraits en prose ---------- Pose le 05/09/2026 avec Lafargue. Meme largeur que le vers (34 rem) et meme air, mais trois differences qui viennent de la prose : PAS D'ITALIQUE. Elle allege un poeme de huit vers, elle fatigue sur quatre paragraphes. Le romain, ici. INTERLIGNE A 1,8 ET NON 2,05. Au-dela, les lignes d'un paragraphe se detachent les unes des autres et le bloc se lit comme une liste. PAS DE GUILLEMETS SUR CHAQUE PARAGRAPHE. La page entiere est une citation, la signature le dit. Des guillemets a chaque bloc feraient du bruit pour redire la meme chose quatre fois. L'ECART ENTRE EXTRAITS est ce qui remplace un separateur dessine : trois fois l'interligne, assez pour qu'on voie quatre morceaux et pas un texte suivi. C'est aussi ce qui dit, sans le mot, que le texte a ete coupe entre eux. */ .extraits{ margin:4.5rem auto 0; max-width:34rem; font-size:1.06rem; line-height:1.8; color:var(--encre); } .extraits p{ margin:0 0 3.5rem; } .extraits p:last-child{ margin-bottom:0; } /* La signature prend la place classique : sous le poeme, poussee a droite, plus discrete que lui. Elle remplace le bloc « reponse », qui est fait pour les pages d'application et criait beaucoup trop fort sur une page de respiration. */ .signature{ margin:2.5rem auto 1.5rem; max-width:34rem; text-align:right; color:var(--encre-douce); font-size:.95rem; letter-spacing:.02em; } @media (max-width:34rem){ .poeme{ margin-top:2.25rem; font-size:1rem; line-height:1.95; } } /* ---------- Sélecteur de langue ---------- Deux liens écrits en dur, aucun JavaScript, aucune redirection automatique selon la langue du navigateur : les gens choisissent. Posé dans l'en-tête, sur la même ligne que le fil d'Ariane et poussé à droite, pour ne pas allonger la page. Les noms sont écrits en toutes lettres plutôt qu'en « FR / EN », et chacun porte son attribut lang : un lecteur d'écran prononce alors « English » à l'anglaise et non à la française. ------------------------------------------------- */ .barre-haut{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; /* Le fil d'Ariane porte sa marge basse quand il est seul ; ici c'est la barre qui la porte pour tout le monde. Elle a grandi le 03/09/2026 avec les deux réglages : sans cette marge, les pastilles arrivaient à quelques pixels du titre. */ margin-bottom:1.5rem; } .barre-haut .fil{ margin:0; } .langues{ display:flex; align-items:center; gap:.15rem; font-size:.9rem; } .langues span, .langues a{ display:inline-flex; align-items:center; min-height:48px; /* règle du socle : 48 px cliquables */ padding:0 .5rem; } .langues__active{ color:var(--encre-douce); } .langues__sep{ color:var(--filet-ui); } /* Sur l'accueil il n'y a pas de fil d'Ariane à côté : le sélecteur se pousse tout seul à droite. */ .langues--droite{ justify-content:flex-end; } /* ---------- Les deux réglages du haut de page ---------- Posés le 03/09/2026. La langue et le thème partagent la même forme : le groupe segmenté du § 5 ter de la charte, qui montre tous les états et marque celui qui est actif. Un bouton seul dont le libellé bascule est la forme interdite. Deux natures différentes sous la même apparence, et c'est voulu. La langue est faite de LIENS, parce que changer de langue change de page. Le thème est fait de VRAIS boutons radio, parce que choisir un état ne navigue pas : les flèches du clavier fonctionnent, l'état survit, et un lecteur d'écran annonce « 1 sur 3 » sans une ligne de JavaScript. AUCUNE RÈGLE PROPRE AU THÈME SOMBRE ICI. L'option active porte la face pleine de la teinte, qui ne s'inverse pas d'un thème à l'autre (voir l'en-tête du bloc sombre), et le reste est écrit avec des variables qui basculent toutes seules. */ .reglages{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.5rem; } /* Sur l'accueil les réglages ne sont pas dans une barre du haut : ils portent donc leur propre marge basse, pour que le signe du studio ne vienne pas se coller dessous. */ .entete > .conteneur > .reglages{ margin-bottom:1rem; } .segmente{ display:inline-flex; align-items:stretch; margin:0; padding:var(--px); gap:var(--px); border:1px solid var(--filet-ui); border-radius:var(--radius-pill); background:var(--surface-1); font-size:.85rem; } .segmente__case{ display:inline-flex; } /* Le bouton radio reste focalisable au clavier : il est rendu invisible, jamais retiré de la page. */ .segmente__case input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } .segmente__option{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 .8rem; border-radius:var(--radius-pill); color:var(--encre-douce); text-decoration:none; white-space:nowrap; cursor:pointer; } .segmente__option:hover{ color:var(--encre); } /* L'état actif ne tient jamais à la seule couleur du texte : il a un fond ET un contraste d'encre, comme le groupe segmenté du socle (écrit pour le critère 1.4.1). */ .segmente__option--actif, .segmente__case input:checked + .segmente__option{ background:var(--accent-surface); color:var(--accent-deep); } /* BUG DU 03/09/2026 : survoler l'option DEJA active repassait son encre a var(--encre) (regle .segmente__option:hover, ligne plus haut), qui vire presque blanc en mode sombre. Sur le fond pastel de l'etat actif, ca donnait un texte quasi invisible. Le lien actif de langue (une classe seule, specificite 0,2,0 contre le survol) le subissait ; le radio de theme y echappait par hasard, sa regle « checked + option » etant deja plus specifique. Ici on fixe les deux a la meme encre, sans dependre de l'ordre. */ .segmente__option.segmente__option--actif:hover, .segmente__case input:checked + .segmente__option:hover{ color:var(--accent-deep); } .segmente__case input:focus-visible + .segmente__option{ outline:2px solid var(--accent-line); outline-offset:2px; } /* ---------- Plan du site, au pied de page ---------- Les liens vers toutes les pages, descendus du corps de l'accueil le 30/08/2026. Ils restent de VRAIS liens dans le HTML, jamais masques en CSS : c'est eux qui font trouver les pages par les moteurs et par les robots d'IA. Ils sont seulement rendus discrets, ce qui n'est pas la meme chose que caches. ------------------------------------------------- */ .plan-site{ display:grid; gap:1.75rem; margin:0 0 1.6rem; } /* Un titre visible par liste. Il etait jusqu'ici en aria-label, donc lisible par les lecteurs d'ecran et par personne d'autre. En petites capitales de la fonte de texte : la fonte d'affichage, dessinee pour les grands corps, s'empate a cette taille. */ .plan-site__titre{ margin:0 0 .6rem; padding-bottom:.35rem; border-bottom:calc(var(--px)*1) solid var(--filet); font-family:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:.72rem; font-weight:700; line-height:1.4; letter-spacing:.09em; text-transform:uppercase; color:var(--encre-douce); } /* EN COLONNES, PAS EN CHAPELET. La liste etait une seule coulee de texte separee par des points medians : elle se lisait comme un pave et personne n'y cherchait un lien. Une entree par ligne, deux colonnes quand la place le permet. Le texte des liens ne change pas : c'est lui qui dit aux moteurs de quoi parle chaque page. */ .plan-site ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:.25rem 1.75rem; font-size:.84rem; line-height:1.8; } /* CHAQUE LIEN FAIT ENVIRON 29 PX DE HAUT, pas 48. C'est une exception assumee a la regle du socle, et la seule du site : un plan de site de onze entrees a 48 px ferait 528 px de pied de page, ce qui annulerait la raison meme de l'avoir descendu ici. Le minimum de la norme (WCAG 2.2, critere 2.5.8) est de 24 px avec de l'espace autour : c'est ce que donnent la hauteur de ligne, la marge interne et l'ecart entre rangees. Et les memes destinations existent en grand dans le corps de la page, sur les cartes. */ .plan-site a{ display:block; padding:.12rem 0; color:var(--encre-douce); text-decoration:none; } .plan-site a:hover{ color:var(--accent-ink); } /* Une entree du plan sans page a atteindre. Meme aspect que les autres, sans le survol : c'est une ligne d'inventaire, pas un lien casse. Elle disparait des que la page existe. */ .plan-site__sanslien{ display:block; padding:.12rem 0; color:var(--encre-douce); } /* Le nom de l'application se detache du reste de la ligne. Deux graisses valent mieux qu'un point median pour dire « ici commence une autre entree ». */ .plan-site__nom{ color:var(--encre); font-weight:700; } .plan-site a:hover .plan-site__nom{ color:inherit; text-decoration:underline; } /* La ligne du studio se separe du plan par un filet, sinon les deux se confondent en un seul bloc gris. */ .pied__mentions{ margin:0; padding-top:1.1rem; border-top:calc(var(--px)*1) solid var(--filet); } /* ============================================================ MODE SOMBRE Porté depuis kit-demarrage/shared/css/tokens.css, blocs 1 et 2. Valeurs reportées, pas importées : le site reste autonome. Si le socle bouge, ce bloc est à remettre à jour, comme celui du haut. Une seule couche ici, le thème du système. Le socle en a quatre parce qu'une application a un réglage de thème dans ses préférences ; le site n'en a pas. CE QUI S'INVERSE : tout ce qui porte du texte passe du côté clair de la teinte. Le pastel devient couleur de texte. CE QUI NE S'INVERSE PAS : la face pleine des boutons. Un bouton est un autocollant posé sur la page, sur papier comme sur fond nuit. C'est lui qui tient l'identité d'un thème à l'autre. ============================================================ */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --surface-base: #121212; --surface-1: #221C28; --surface-2: #2E2636; /* Encre diluée et non aplatie : elle se compose sur la surface qu'elle rencontre, comme dans le socle. */ --encre: rgb(255 253 249 / 0.87); --encre-douce: rgb(255 253 249 / 0.60); --filet: #574A61; /* filets décoratifs */ /* --filet-ui garde #948899 : mesuré à 5,5:1 sur le fond de base et 4,9:1 sur les cartes, bien au-dessus du minimum de 3. */ } /* La teinte « dim », un cran sous l'encre de la teinte. C'est elle qui remplace le pastel en fond de bloc. */ :root, [data-teinte="ciel"]{ --accent-dim:#244D6D; } [data-teinte="rose"]{ --accent-dim:#7A2163; } [data-teinte="lavande"]{ --accent-dim:#512B8F; } [data-teinte="menthe"]{ --accent-dim:#216A53; } [data-teinte="citron"]{ --accent-dim:#736225; } [data-teinte="neutre"]{ --accent-dim:#4A3F50; } /* Ce qui portait l'encre de la teinte passe à sa surface claire. */ a{ color:var(--accent-surface); } a:hover{ color:var(--accent-pale); } .carte h3, .bloc-soutien h2, .entete-app h1, .page-app h3, .page-app main li strong, .encart-testeur h2{ color:var(--accent-surface); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline-color:var(--accent-surface); } /* Les deux blocs en aplat pastel : le pastel passe en « dim ». */ .bloc-soutien, .reponse{ background:var(--accent-dim); } /* Sur ce fond, le texte secondaire passerait sous le seuil (4,4:1). Il prend donc l'encre pleine, à 7:1. */ .bloc-soutien p{ color:var(--encre); } /* Bouton secondaire du bloc soutien : fond neutre, label clair, mesuré à 9:1. Au survol il redevient la face pleine. */ .bloc-soutien .bouton{ color:var(--accent-surface); } /* Le bouton secondaire des cartes : sans aplat, c'est le label qui porte la teinte, donc il passe du côté clair comme le reste. */ .bouton--secondaire{ color:var(--accent-surface); } .bouton--secondaire:hover{ background:var(--accent-dim); color:var(--accent-surface); } /* Le « En savoir plus » devenu lien n'a pas d'aplat a reprendre au survol : c'est le trait qui repond, pas un fond. */ .carte .actions-carte .bouton + .bouton--secondaire:hover{ background:transparent; color:var(--accent-pale); } /* Le mot du nuage : au survol il passe du côté clair de la teinte, comme tous les labels qui portent l'accent. */ .signe-lien:hover .signe-mot{ color:var(--accent-surface); } /* Le plan du site : le survol passe du côté clair de la teinte. */ .plan-site a:hover{ color:var(--accent-surface); } } /* ============================================================ LE MEME THEME SOMBRE, MAIS CHOISI A LA MAIN ------------------------------------------------------------ GENERE le 03/09/2026 a partir du bloc @media juste au-dessus, en prefixant chaque selecteur par [data-theme="dark"]. Les commentaires ne sont pas recopies : ils sont la-haut. DUPLICATION ASSUMEE, et voici pourquoi : une media query ne s'ecrit pas comme un selecteur, donc les memes regles doivent exister deux fois pour couvrir les deux situations. Le bloc du dessus sert quand la personne suit le reglage de son appareil ; celui-ci sert quand elle a choisi le theme elle-meme. POURQUOI :where() PARTOUT ICI. Corrige le 06/09/2026. Le contenu des deux blocs etait bien identique. LEUR POIDS NE L'ETAIT PAS : le prefixe ajoute une classe, donc « a » pesait 0,0,1 la-haut et 0,1,1 ici. Resultat, « [data-theme="dark"] a » gagnait contre « .bouton » (0,1,0) et le libelle des boutons prenait la couleur de leur fond. Les boutons principaux etaient des rectangles pastel vides des qu'on cliquait « Sombre », et parfaits si c'etait le systeme qui etait en sombre : le defaut ne se voyait donc jamais quand on testait au reglage systeme. 32 elements touches, dont le lien d'evitement et le groupe segmente. :where() ne compte pas dans le poids. Les deux blocs sont maintenant strictement equivalents par construction. LES REGLES QUI DEFINISSENT DES VARIABLES N'Y SONT PAS PASSEES : :root[data-theme="dark"] a besoin de son poids pour gagner contre :root. Ne pas les envelopper. SI LE BLOC DU DESSUS CHANGE, CELUI-CI DOIT SUIVRE, et toute regle ajoutee ici s'ecrit en :where(). ============================================================ */ :root[data-theme="dark"]{ --surface-base: #121212; --surface-1: #221C28; --surface-2: #2E2636; --encre: rgb(255 253 249 / 0.87); --encre-douce: rgb(255 253 249 / 0.60); --filet: #574A61; } :root[data-theme="dark"], [data-theme="dark"] [data-teinte="ciel"]{ --accent-dim:#244D6D; } [data-theme="dark"] [data-teinte="rose"]{ --accent-dim:#7A2163; } [data-theme="dark"] [data-teinte="lavande"]{ --accent-dim:#512B8F; } [data-theme="dark"] [data-teinte="menthe"]{ --accent-dim:#216A53; } [data-theme="dark"] [data-teinte="citron"]{ --accent-dim:#736225; } [data-theme="dark"] [data-teinte="neutre"]{ --accent-dim:#4A3F50; } :where([data-theme="dark"]) a{ color:var(--accent-surface); } :where([data-theme="dark"]) a:hover{ color:var(--accent-pale); } :where([data-theme="dark"]) .carte h3, :where([data-theme="dark"]) .bloc-soutien h2, :where([data-theme="dark"]) .entete-app h1, :where([data-theme="dark"]) .page-app h3, :where([data-theme="dark"]) .page-app main li strong, :where([data-theme="dark"]) .encart-testeur h2{ color:var(--accent-surface); } :where([data-theme="dark"]) a:focus-visible, :where([data-theme="dark"]) button:focus-visible, :where([data-theme="dark"]) input:focus-visible, :where([data-theme="dark"]) textarea:focus-visible{ outline-color:var(--accent-surface); } :where([data-theme="dark"]) .bloc-soutien, :where([data-theme="dark"]) .reponse{ background:var(--accent-dim); } :where([data-theme="dark"]) .bloc-soutien p{ color:var(--encre); } :where([data-theme="dark"]) .bloc-soutien .bouton{ color:var(--accent-surface); } :where([data-theme="dark"]) .bouton--secondaire{ color:var(--accent-surface); } :where([data-theme="dark"]) .bouton--secondaire:hover{ background:var(--accent-dim); color:var(--accent-surface); } :where([data-theme="dark"]) .carte .actions-carte .bouton + .bouton--secondaire:hover{ background:transparent; color:var(--accent-pale); } :where([data-theme="dark"]) .signe-lien:hover .signe-mot{ color:var(--accent-surface); } :where([data-theme="dark"]) .plan-site a:hover{ color:var(--accent-surface); }