/* Theme Name: Beautiful Mind Theme URI: https://www.beautifulmind.fr Description: Thème sur mesure pour Beautiful Mind, accompagnement psychopédagogique à domicile de Marjolaine Valère. Direction « Organic » : fond crème, terre cuite, sauge en second, formes très arrondies, photographies lavées. Thème de blocs, pour que le site reste modifiable sans passer par le code. Author: Hapi Agency Version: 0.6.5 Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: beautifulmind Tags: block-styles, full-site-editing, one-column, custom-colors, translation-ready */ /* L'apparence vit dans theme.json. Ne restent ici que les traitements qu'il ne sait pas exprimer, tous repris du système « Organic ». */ /* ---------- photographies ---------- Règle centrale du système : une photo est LAVÉE pour s'asseoir dans le fond crème au lieu de flotter dessus. Sans ce traitement, une image un peu vive troue la page. Sur un bloc image, ajouter la classe « washed ». */ .washed img { filter: saturate(.78) contrast(.93) brightness(1.04); border-radius: 28px; } /* Le masque organique : une photo prend une forme de galet, jamais un carré. */ .bm-galet img, .bm-galet.wp-block-image img { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; aspect-ratio: 1 / 1.02; object-fit: cover; width: 100%; } /* Un emplacement encore vide garde la forme : il doit se lire comme une place réservée, pas comme un rectangle oublié. */ .bm-galet:not(:has(img)) { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; aspect-ratio: 1 / 1.02; display: grid; place-content: center; } /* Le logo : les lettres colorées se resserrent un peu, sinon le mot se disloque. */ .bm-logo { letter-spacing: -.015em; } /* ---------- le verbatim ---------- Ni filet vertical ni guillemet décoratif : le système « Organic » proscrit les filets, et un guillemet géant en Caprasimo — police d'affichage très grasse — se lit comme une tache, pas comme une marque de citation. La parole rapportée est donc signalée par une PAIRE de guillemets français à la taille du texte, dans la police de labeur, plus fine que Caprasimo. Ils sont dans le contenu, et non en ::before : un guillemet ouvrant sans fermant n'est jamais juste, et ce qui se lit doit être dans le texte. Reste la signature détachée, et la vraie
qui porte la citation par le balisage. */ .bm-verbatim { margin: 0; border: 0; padding-left: 0; } .bm-guillemet { font-family: var(--wp--preset--font-family--texte); font-weight: 400; font-size: .58em; line-height: 1; color: var(--wp--preset--color--terre); vertical-align: .22em; } .bm-verbatim cite { display: block; margin-top: var(--wp--preset--spacing--30); /* La citation hérite de la police de titrage du bloc « Citation » : on la ramène au texte courant, Caprasimo étant illisible à cette taille. */ font-family: var(--wp--preset--font-family--texte); font-style: normal; font-size: .875rem; font-weight: 600; letter-spacing: .06em; color: var(--wp--preset--color--gris); } /* ---------- surfaces ---------- */ .bm-carte { border-radius: 28px; box-shadow: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); } /* Deux cartes côte à côte n'ont jamais la même longueur de texte. Sans cette règle, chacune s'arrête sous son dernier mot et la rangée part en escalier. La colonne d'un bloc « Colonnes » est déjà étirée sur la hauteur de la rangée : il suffit que la carte remplisse sa colonne. */ .wp-block-column > .bm-carte { height: 100%; } /* Une pastille se dimensionne sur son texte, jamais sur la colonne qui la porte. Le liseré est ici et non dans le contenu : le bloc « Paragraphe » n'expose pas de réglage de bordure, une bordure posée dans le balisage serait effacée à la première réédition dans l'éditeur. Sans lui, la pastille ne se détachait pas du fond crème (1,02:1 entre l'ancien vert pâle et le fond, autant dire rien). */ .bm-pastille { width: fit-content; border: 1.5px solid var(--wp--preset--color--sauge-fonce); } /* Les sur-titres, en capitales espacées et en terre cuite foncée : la terre cuite pleine ne passe pas le contraste sur du texte de petite taille. */ .bm-surtitre { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--terre-fonce); } /* « Me joindre », dans le pied de page, mène au formulaire. Le lien ne doit pas se distinguer du sur-titre voisin : même couleur, soulignement au survol seulement. */ .bm-surtitre a, .bm-pastille a { color: inherit; text-decoration: none; } /* La pastille TDAH renvoie à l'association TDAH France. Le lien ne doit pas casser la pastille : même couleur, souligné au survol seulement. */ .bm-pastille a:hover, .bm-pastille a:focus-visible { text-decoration: underline; text-underline-offset: .25em; } .bm-surtitre a:hover, .bm-surtitre a:focus-visible { text-decoration: underline; text-underline-offset: .3em; } /* Les quatre signes de l'accueil. Un point en terre cuite ancre chaque situation et donne son rythme à la liste : ce n'est pas un filet — le système en proscrit — mais une puce, posée en ::before pour rester hors du texte lu par un lecteur d'écran. Le retrait est porté par le groupe, pas par le titre seul, sinon la description se décalerait d'un cran par rapport à lui. */ .bm-signe { position: relative; padding-left: 1.9rem; } .bm-signe::before { content: ""; position: absolute; left: 0; top: .58rem; width: .72rem; height: .72rem; border-radius: 50%; background: var(--wp--preset--color--terre); } /* ---------- la frise du parcours ---------- Trois jalons reliés, sur la page À propos. C'est le seul trait continu que le système tolère : il ne décore pas, il porte la chronologie — côte à côte, les trois rôles se lisaient comme simultanés et non comme une suite. Elle est VERTICALE à toutes les largeurs : c'est le sens de lecture naturel d'un parcours, et le seul qui ne change pas de forme entre l'ordinateur et le téléphone. Le balisage est donc une pile de groupes, pas des colonnes déguisées : ce qu'on voit sur le site est ce que Marjolaine voit dans l'éditeur. Le trait est en CSS et non dans le contenu, pour qu'aucune réédition ne l'efface. */ .bm-frise__etape { position: relative; padding-left: 2.4rem; max-width: 58ch; /* Même piège que .bm-mesure : en mise en page « contrainte », WordPress centre tout enfant borné, et il le fait avec !important. Sans cela la frise partait au milieu de la page, décrochée de son titre. */ margin-inline-start: 0 !important; margin-inline-end: auto !important; } .bm-frise__etape::before { /* le jalon */ content: ""; position: absolute; top: .42rem; left: 0; width: .95rem; height: .95rem; border-radius: 50%; background: var(--wp--preset--color--terre); } .bm-frise__etape::after { /* le trait jusqu'au jalon suivant */ content: ""; position: absolute; top: 1.55rem; left: .41rem; width: .13rem; height: calc(100% + var(--wp--preset--spacing--40)); background: var(--wp--preset--color--gris-clair); } .bm-frise__etape:last-child::after { display: none; } /* Un texte long se lit mieux borné. La marge de fin est explicite : dans une mise en page « contrainte », WordPress centre tout enfant qui porte une largeur maximale, et le paragraphe partait se placer au milieu — contre la règle de fer à gauche du système. */ /* Une exception à la mesure : la phrase d'accueil de la page Contact tient d'un seul souffle, elle se lit mieux d'une seule ligne sur un grand écran. Sur mobile, la mesure de 46 caractères reprend ses droits. ⚠️ Sélecteur composé, et non `.bm-mesure--pleine` seul : à spécificité égale c'est l'ordre du fichier qui tranche, et `.bm-mesure` vient plus bas. */ @media (min-width: 900px) { .bm-mesure.bm-mesure--pleine { max-width: none; } } .bm-mesure { max-width: 46ch; /* Le !important n'est pas un caprice : dans une mise en page « contrainte », WordPress centre lui-même tout enfant borné, et il le fait AVEC !important (« margin-left:auto!important » dans sa feuille de blocs). Sans cela le paragraphe partait au milieu, contre la règle de fer à gauche du système. */ margin-inline-start: 0 !important; margin-inline-end: auto !important; } /* Deux lames pleine largeur qui se suivent doivent se TOUCHER. WordPress glisse 24 px entre deux blocs frères d'une mise en page « contrainte » : entre deux fonds colorés, ce filet de crème se lit comme un bout de lame oublié, pas comme un blanc. Mettre la marge basse à zéro dans le contenu ne suffit pas — c'est la marge HAUTE du bloc suivant qu'il faut annuler. */ .wp-block-group.alignfull.has-background + .wp-block-group.alignfull.has-background { margin-block-start: 0; } /* Annuler la marge HAUTE de la seconde ne suffit pas : la marge BASSE de la première rouvre le même liseré. `:has(+ …)` permet de la viser — c'est la seule façon de désigner « la lame qui en précède une autre » en CSS. */ .wp-block-group.alignfull.has-background:has(+ .wp-block-group.alignfull.has-background) { /* !important obligatoire : la marge basse des lames est écrite EN LIGNE dans le contenu (WordPress y met les réglages d'espacement du bloc), et une déclaration en ligne bat n'importe quel sélecteur de feuille de styles. */ margin-block-end: 0 !important; } /* ---------- la foire aux questions ---------- Chaque question est un bloc « Détails » natif : l'ouverture et la fermeture sont assurées par le navigateur, sans une ligne de JavaScript, et le contenu replié reste DANS la page — donc trouvable par les moteurs et par la recherche du navigateur. La séparation entre les questions est portée par le cartouche blanc et non par un trait : le système proscrit les filets, c'est la surface qui sépare. */ .bm-faq summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.6rem; font-family: var(--wp--preset--font-family--titre); font-size: var(--wp--preset--font-size--grand); line-height: 1.3; } .bm-faq summary::-webkit-details-marker { display: none; } .bm-faq summary::after { /* le chevron, qui bascule à l'ouverture */ content: ""; position: absolute; right: .3rem; top: .34em; width: .78rem; height: .78rem; border-right: .17rem solid var(--wp--preset--color--terre); border-bottom: .17rem solid var(--wp--preset--color--terre); transform: rotate(45deg); transition: transform .2s ease; } .bm-faq[open] summary::after { top: .6em; transform: rotate(-135deg); } .bm-faq[open] summary { margin-bottom: var(--wp--preset--spacing--20); } .bm-faq ul { margin: var(--wp--preset--spacing--20) 0 0; padding-left: 1.2rem; } .bm-faq li + li { margin-top: .6rem; } /* Le plan du site, au pied de page : c'est une navigation, donc pas de puces. */ .bm-plan { list-style: none; padding-left: 0; } .bm-plan li + li { margin-top: .45rem; } /* Le pied de page n'a plus de marge haute : il porte son propre fond blanc et un filet, ce qui suffit à le détacher. La marge laissait apparaître une bande de fond entre lui et la lame de clôture, visible surtout sur mobile. ⚠️ La marge à annuler n'est PAS celle du groupe intérieur (mise à zéro dans le contenu) mais celle de l'ENVELOPPE `.wp-block-template-part`, à laquelle WordPress applique ses 24 px d'écart entre blocs frères. Mesuré : groupe `margin-top: 0`, enveloppe `24px`. C'est exactement le même piège que le « bout de lame » entre deux bandes colorées. */ main + .wp-block-template-part { margin-block-start: 0; } /* Deux lames pleine largeur qui se suivent doivent se TOUCHER. WordPress glisse 24 px entre deux blocs frères d'une mise en page « contrainte » : entre deux fonds colorés, ce filet de crème se lit comme un bout de lame oublié, pas comme un blanc. Mettre la marge basse à zéro dans le contenu ne suffit pas — c'est la marge HAUTE du bloc suivant qu'il faut annuler. */ .wp-block-group.alignfull.has-background + .wp-block-group.alignfull.has-background { margin-block-start: 0; } /* Annuler la marge HAUTE de la seconde ne suffit pas : la marge BASSE de la première rouvre le même liseré. `:has(+ …)` permet de la viser — c'est la seule façon de désigner « la lame qui en précède une autre » en CSS. */ .wp-block-group.alignfull.has-background:has(+ .wp-block-group.alignfull.has-background) { /* !important obligatoire : la marge basse des lames est écrite EN LIGNE dans le contenu (WordPress y met les réglages d'espacement du bloc), et une déclaration en ligne bat n'importe quel sélecteur de feuille de styles. */ margin-block-end: 0 !important; } /* ---------- la foire aux questions ---------- Chaque question est un bloc « Détails » natif : l'ouverture et la fermeture sont assurées par le navigateur, sans une ligne de JavaScript, et le contenu replié reste DANS la page — donc trouvable par les moteurs et par la recherche du navigateur. La séparation entre les questions est portée par le cartouche blanc et non par un trait : le système proscrit les filets, c'est la surface qui sépare. */ .bm-faq summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.6rem; font-family: var(--wp--preset--font-family--titre); font-size: var(--wp--preset--font-size--grand); line-height: 1.3; } .bm-faq summary::-webkit-details-marker { display: none; } .bm-faq summary::after { /* le chevron, qui bascule à l'ouverture */ content: ""; position: absolute; right: .3rem; top: .34em; width: .78rem; height: .78rem; border-right: .17rem solid var(--wp--preset--color--terre); border-bottom: .17rem solid var(--wp--preset--color--terre); transform: rotate(45deg); transition: transform .2s ease; } .bm-faq[open] summary::after { top: .6em; transform: rotate(-135deg); } .bm-faq[open] summary { margin-bottom: var(--wp--preset--spacing--20); } .bm-faq ul { margin: var(--wp--preset--spacing--20) 0 0; padding-left: 1.2rem; } .bm-faq li + li { margin-top: .6rem; } /* Le plan du site, au pied de page : c'est une navigation, donc pas de puces. */ .bm-plan { list-style: none; padding-left: 0; } .bm-plan li + li { margin-top: .45rem; } /* Une lame pleine largeur qui TERMINE une page doit toucher le pied de page. Le pied porte une marge haute de 5,5 rem : au-dessus d'une lame colorée, elle laissait une bande de crème et un filet flottant, comme un morceau de lame oublié. On ne supprime pas cette marge — les pages qui ne finissent pas par une lame en ont besoin — on l'annule seulement dans ce cas précis, ce que `:has()` permet de dire exactement. */ main:has(> .wp-block-post-content > .alignfull.has-background:last-child) + .wp-block-template-part > .wp-block-group { margin-block-start: 0; } /* ---------- le bandeau de consentement ---------- Il ne bloque pas la page : la CNIL demande que refuser soit AUSSI SIMPLE qu'accepter, pas qu'on emprisonne le visiteur. Les deux boutons ont donc la même taille, la même graisse et le même niveau — seule la couleur les distingue, et « Refuser » reste un vrai bouton, jamais un lien discret en bas. */ .bm-consentement { position: fixed; left: 0; bottom: 0; z-index: 60; width: 100%; padding: 1rem; pointer-events: none; /* la page reste utilisable tout autour */ } .bm-consentement[hidden] { display: none; } .bm-consentement__carte { pointer-events: auto; max-width: 30rem; background: var(--wp--preset--color--blanc); border-radius: 24px; padding: 1.5rem 1.6rem; box-shadow: 0 6px 24px color-mix(in srgb, #2e2b25 22%, transparent); animation: bm-consentement-entree .28s ease-out both; } .bm-consentement__texte { margin-top: .6rem; font-size: .9375rem; line-height: 1.55; color: var(--wp--preset--color--gris); } .bm-consentement__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; } .bm-consentement__bouton { font: inherit; font-size: .9375rem; font-weight: 600; padding: .7rem 1.4rem; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--terre-fonce); background: transparent; color: var(--wp--preset--color--terre-fonce); cursor: pointer; } .bm-consentement__bouton--oui { background: var(--wp--preset--color--terre-fonce); color: #fff; } .bm-consentement__lien { margin-top: .9rem; font-size: .8125rem; color: var(--wp--preset--color--gris); } @keyframes bm-consentement-entree { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } /* Les emplacements encore vides. Volontairement voyants : ce n'est pas une décoration du site, c'est un pense-bête pour Marjolaine. Ils s'éteignent d'eux-mêmes une fois remplis, et ne s'affichent qu'avant la mise en ligne ou pour qui peut éditer. */ .bm-a-remplir { background: #ffe9a8; color: var(--wp--preset--color--encre); border-radius: 6px; padding: .05em .35em; box-shadow: inset 0 0 0 1.5px #d8a72b; font-weight: 600; } /* ---------- le menu mobile ---------- La couche par défaut de WordPress est nue : fond blanc, petits liens en haut à gauche. Sur un site dont tout le reste est soigné, c'est la seule vue qui ressemble à un brouillon. Fond crème, entrées en cartouches blancs à la taille du doigt, un pictogramme par rubrique. ⚠️ `bm-nav` se pose sur le