/* Theme Name: Maison Essence Claire Theme URI: https://maisonessenceclaire.fr Description: Thème enfant de Twenty Twenty-Five pour Maison Essence Claire, Claire Bardet, massothérapeute à Doué-en-Anjou. Charte, échelle typographique et espacements définis dans theme.json. Author: Studio Web 61 Author URI: https://studioweb61.fr Template: twentytwentyfive Version: 1.55.0 Requires at least: 6.7 Tested up to: 6.7 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: maison-essence-claire Tags: block-theme, full-site-editing */ /* -------------------------------------------------------------------------- Presque tout se règle dans theme.json. Ce fichier ne contient que ce que theme.json ne sait pas exprimer. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1. SECTIONS À DEUX COLONNES -------------------------------------------------------------------------- La classe `mec-deux-colonnes` se pose sur le GROUPE de section. WordPress empile les colonnes à 782px. Entre 782 et 960px — les petites tablettes en portrait — deux colonnes tombent à 36 caractères par ligne, sous le seuil de lisibilité. On empile donc à 960px. La LARGEUR est laissée à l'alignement « Large » du bloc Colonnes. Une version précédente imposait ici une largeur maximale calée sur la maquette : elle cassait le centrage natif de WordPress et collait la section à gauche. Le jeu n'en valait pas la chandelle. -------------------------------------------------------------------------- */ @media (max-width: 960px) { .wp-block-group.mec-deux-colonnes .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; } .wp-block-group.mec-deux-colonnes .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; } } /* -------------------------------------------------------------------------- 2. LES LIENS À FLÈCHE -------------------------------------------------------------------------- Les appels à l'action isolés — « En savoir plus », « Découvrir » — posés seuls sur leur ligne. À distinguer des liens DANS le texte courant, qui restent soulignés : c'est leur seul repère quand ils sont noyés dans un paragraphe. La classe se pose sur le PARAGRAPHE, seul endroit où l'éditeur sait écrire une classe. La flèche est produite par le CSS : rien à taper, rien à baliser, et impossible de l'effacer par mégarde. -------------------------------------------------------------------------- */ .mec-lien-fleche a { font-size: var(--wp--preset--font-size--large); font-weight: 900; text-decoration: none; } .mec-lien-fleche a:hover, .mec-lien-fleche a:focus-visible { text-decoration: none; } .mec-lien-fleche a::after { content: "\2192"; display: inline-block; margin-inline-start: .3em; transition: transform .2s ease; } .mec-lien-fleche a:hover::after, .mec-lien-fleche a:focus-visible::after { transform: translateX(.25em); } /* -------------------------------------------------------------------------- 3. LE HAUT DE PAGE : ENTÊTE SUPERPOSÉE + TROIS BANDEAUX -------------------------------------------------------------------------- Structure identique sur toutes les pages : .mec-couverture conteneur, sert de repère de position ├── .mec-entete le header (logo + menu), posé PAR-DESSUS └── .mec-hero le média : image mise en avant, ou vidéo .mec-bandeau-marque le logo Maison Essence Claire .mec-bandeau-titre couleur propre à la page + H1 en fondu L'entête n'est pas fixe au défilement : elle sort du champ avec le hero. -------------------------------------------------------------------------- */ :root { /* Hauteur de l'entête superposée. Sert aussi de repère au dégradé de lisibilité : c'est la zone qu'il doit protéger. */ --mec-entete-hauteur: 70px; /* Hauteur du média : 354px sur mobile → 630px à partir de 1280px. Les deux valeurs sont relevées sur les maquettes Penpot. */ --mec-hero-hauteur: clamp(354px, 222px + 31.9vw, 630px); /* Couleur du bandeau de titre. Valeur par défaut, redéfinie page par page au point 3.5. */ --mec-accent: var(--wp--preset--color--plein-vert); } /* La page d'accueil ouvre sur un plan filmé en portrait : il lui faut plus de hauteur que les pages intérieures, qui sont en paysage. 460px, c'est la valeur qui laisse voir les épaules de Claire SANS repousser le bandeau de titre sous le bas d'écran. Au-delà de 781px on repasse à l'image paysage, donc à la règle commune — qui vaut 471px à cette largeur : le raccord ne se voit pas. Les deux sélecteurs visent la même page : `home` quand elle sera déclarée page d'accueil du site, son slug tant qu'elle ne l'est pas encore. */ @media (max-width: 781px) { body.home, body.mec-page-maison-essence-claire { --mec-hero-hauteur: 460px; } } /* 3.1 — La superposition -------------------------------------------------------------------------- */ /* LE RYTHME ENTRE SECTIONS — règle générale, valable partout -------------------------------------------------------------------------- WordPress pose le blockGap du site (30px) entre tous les blocs de premier niveau. Sur ce site c'est faux : chaque section porte son propre fond et ses propres marges intérieures, l'air est DANS la section, pas entre. Les 30px produisent une rayure blanche à chaque raccord. ⚠ NE PAS corriger cela en mettant `blockGap` à 0 dans theme.json. Le même réglage espace aussi les paragraphes ENTRE EUX à l'intérieur d'un bloc de texte : le corps de texte se collerait en un pavé compact. Un seul nombre, deux rôles — on n'en neutralise qu'un. Par défaut les sections se touchent ; un filet de 6px se demande au cas par cas avec la classe `mec-filet`. Deux cibles suffisent à couvrir tout le site : - les blocs de premier niveau (les bandeaux du modèle, le pied de page) ; - les sections en pleine largeur à l'intérieur du contenu de page. Tout le reste — paragraphes, listes, colonnes — garde son rythme. */ :root { /* Épaisseur du filet de séparation, là où il est demandé. C'est un élément graphique — un mince trait de fond de page entre deux bandes colorées — et non un espacement. D'où sa valeur hors échelle : elle n'a rien à faire dans les paliers d'espacement. */ --mec-filet: 6px; } /* Par défaut, les sections se touchent. */ .wp-site-blocks > *, .wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; } /* Le filet, à la demande : classe `mec-filet` ajoutée sur la section, dans Réglages du bloc → Avancé → Classe(s) CSS additionnelle(s). Le filet se pose AU-DESSUS du bloc qui porte la classe. Pour séparer deux bandes, on la met donc sur la seconde, jamais sur les deux. Sélecteurs à deux classes pour passer devant la règle générale sans dépendre de l'ordre de lecture du fichier. */ .wp-site-blocks > .mec-filet, .wp-block-post-content > .mec-filet { margin-block-start: var(--mec-filet); } /* Idem à l'intérieur du conteneur d'entête, entre la partie de modèle et le bloc Bannière. */ .mec-couverture > * { margin-block-start: 0; margin-block-end: 0; } .mec-couverture { position: relative; } .mec-couverture > .mec-entete { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; min-height: var(--mec-entete-hauteur); } /* 3.2 — Le média -------------------------------------------------------------------------- Le sélecteur porte les deux classes à dessein : `.wp-block-cover` seul a la même spécificité que `.mec-hero`, et c'est alors l'ordre de chargement des feuilles qui trancherait — trop fragile. */ .wp-block-cover.mec-hero { min-height: var(--mec-hero-hauteur); /* Filet de sécurité : si une page part en ligne sans image mise en avant, le bandeau reste sombre et le logo Ivoire reste lisible. */ background-color: var(--wp--preset--color--profond-vert); } /* 3.3 — Le dégradé de lisibilité -------------------------------------------------------------------------- Il remplace le voile uniforme de la maquette. Mesuré sur les fichiers réels : un voile uniforme doit monter à 65 % pour que le logo Ivoire atteigne le seuil de 3:1 sur l'image PC, dont le haut contient un mur blanc éclairé. À 65 %, tout le portrait s'éteint. Un dégradé qui ne protège que les 160 premiers pixels donne 3,8 sur les deux fichiers ET laisse la photo intacte en dessous. */ /* Le voile natif du bloc Couverture est neutralisé sans condition. Selon la version de WordPress, un réglage d'opacité à 0 ne produit pas toujours la même classe sur le de fond — et dans un cas il reste à 50 %. Plutôt que de dépendre de ce détail, on l'éteint ici : c'est le dégradé ci-dessous qui assure la lisibilité, et lui seul. Conséquence pratique : le curseur « Opacité » du bloc n'a plus d'effet sur ce hero, quelle que soit sa position. */ .mec-hero > .wp-block-cover__background { opacity: 0 !important; } .mec-hero::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 1; height: 160px; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, .55) var(--mec-entete-hauteur), rgba(0, 0, 0, 0) 100% ); } /* 3.4 — La vidéo (page d'accueil, mobile) -------------------------------------------------------------------------- Elle est insérée par assets/js/hero-video.js, jamais par le balisage : un