/* Theme Name: Samey Theme URI: http://localhost:10018 Template: astra Author: Ronaldo RUKUNDO Description: Theme enfant d'Astra pour le portfolio de Samey, photographe. Astra tient l'en-tete et le pied, Elementor tient les pages. Ce theme n'ajoute que les polices auto-hebergees et les jetons de la maquette. Version: 3.0.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: samey-enfant */ /* --- Polices servies depuis le domaine du site : aucun appel a Google (RGPD) ------ */ /* Poppins, auto-hebergee comme les precedentes (le filtre RGPD de functions.php bloque fonts.googleapis.com). Poppins n'est PAS variable : une graisse = un fichier. On declare exactement les cinq fichiers embarques ; demander une graisse absente ferait simuler un faux gras au navigateur. */ @font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('assets/fonts/poppins-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* --- Jetons de la maquette Figma, disponibles pour Elementor et pour Astra -------- */ :root { --samey-encre: #16130F; --samey-creme: #FFF8EE; --samey-blanc: #FFFFFF; --samey-corail: #FFFFFF; --samey-soleil: #FFC42E; --samey-bleu: #0B6BF2; --samey-turquoise: #00A9A5; --samey-menthe: #0FC98F; /* Un metier, une couleur (choix de Samey, assume : cinq accents) */ --samey-mariages: var(--samey-turquoise); --samey-anniversaires: var(--samey-soleil); --samey-portraits: var(--samey-bleu); } /* --- Le seul correctif structurel : le pleine largeur ---------------------------- Astra contraint les enfants d'un conteneur. Un bloc bord a bord doit sortir de la contrainte sans passer par transform, qui serait annule par les classes d'animation (regle dure 4 du registre, payee le 03/08). */ .samey-pleine-largeur { margin-inline: calc(50% - 50vw) !important; max-width: none !important; width: auto !important; } body { overflow-x: clip; /* 100vw deborde de la largeur de l'ascenseur */ } /* --- Proportions d'image imposees ------------------------------------------------ Trois photos de proportions differentes dans une rangee donnent trois cartes de hauteurs differentes, et les titres flottent. Constate a l'image le 15/08 sur la section « Trois moments ». On impose la proportion, l'image se recadre. */ .samey-ratio-32 img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; } .samey-ratio-45 img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; } .samey-ratio-219 img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; height: auto; } /* Une image bord a bord traverse toute la fenetre, sans arrondi. Elle vit dans `.e-con-inner`, borne a 1280 px : il faut la faire deborder. On passe par les marges et NON par `transform`, qui serait annule par toute classe d'animation (regle dure 4 du registre, payee le 03/08 sur ce meme site). */ .samey-image-pleine { margin-inline: calc(50% - 50vw) !important; max-width: none !important; width: 100vw !important; } .samey-image-pleine img { width: 100%; border-radius: 0; display: block; } /* --- Trame de 12 colonnes pour les galeries -------------------------------------- Les conteneurs Elementor sont en flex ; les compositions de la maquette demandent une vraie grille ou chaque image occupe un nombre de colonnes donne. Les paliers suivent les seuils MESURES : 12 colonnes au-dessus de 1119 px, 8 entre 800 et 1119, 2 en dessous de 800, avec les gouttieres de la maquette (20 / 16 / 12). */ /* La gouttiere de la maquette (20 / 16 / 12) est HORIZONTALE : c'est la largeur du blanc entre deux colonnes. L'ecart entre deux RANGEES est un autre probleme. Mesure le 15/08 : 10 px entre une photo et sa legende, 20 px entre deux rangees, soit un rapport de 2. La legende flottait entre deux images sans qu'on sache a laquelle elle appartenait. On separe les deux axes : gouttiere inchangee, respiration verticale portee a 32 px (rapport 3,2 avec les 10 px du couple photo + legende). */ .e-con.samey-grille { display: grid !important; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 32px; align-items: start; } .samey-c3 { grid-column: span 3; } .samey-c4 { grid-column: span 4; } .samey-c6 { grid-column: span 6; } .samey-c8 { grid-column: span 8; } .samey-c12 { grid-column: span 12; } @media (max-width: 1119px) { .e-con.samey-grille { grid-template-columns: repeat(8, 1fr); column-gap: 16px; row-gap: 28px; } .samey-c3 { grid-column: span 2; } .samey-c4 { grid-column: span 4; } .samey-c6 { grid-column: span 4; } .samey-c8 { grid-column: span 8; } .samey-c12 { grid-column: span 8; } } @media (max-width: 799px) { .e-con.samey-grille { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 24px; } .samey-c3, .samey-c4 { grid-column: span 1; } .samey-c6, .samey-c8, .samey-c12 { grid-column: span 2; } /* Une bande de TROIS photos sur une trame de deux colonnes laisse la troisieme seule, avec un vide de la moitie de l'ecran a cote. Constate a l'image sur Mariages a 390 px. Trois photos et rien d'autre : on empile, chacune pleine largeur. Le selecteur ne vise QUE ce cas (troisieme enfant et dernier). */ .samey-grille:has(> :nth-child(3):last-child) > * { grid-column: 1 / -1; } } /* ================================================================================== RECETTE DU RENDU — 15/08. Tout ce qui suit corrige ce qui a ete MESURE sur les sept pages rendues, jamais estime. Chaque valeur annoncee vient d'une capture ou d'une mesure au navigateur, reportee en commentaire. Contrainte du chantier : la structure des pages est refaite en parallele et les identifiants Elementor (`.elementor-element-3f4e3f9`) changent a chaque generation (voir `_id()` dans elementor_lib.py : md5 d'un compteur global). AUCUNE regle ci-dessous ne s'appuie sur un identifiant. On ne vise que : — les classes `samey-*` posees par le generateur, — les classes de structure d'Elementor (`.e-con`, `.e-parent`, `.e-con-inner`), — les classes d'Astra (`.main-header-menu`, `.site-title`), — et la VALEUR des proprietes personnalisees d'Elementor, via `@container style()`. Ce dernier point est le levier central. Elementor n'ecrit pas `padding: 88px` sur la section : il pose `--padding-top: 88px` sur le conteneur, et la regle `.e-con > .e-con-inner { padding-block-start: var(--padding-block-start) }` la consomme. Une requete de style interroge donc la valeur elle-meme, sans connaitre l'element. `@container style(--padding-top: 88px)` = « tout conteneur qui demande 88 px de haut », quel que soit son identifiant, sur les sept pages, aujourd'hui et apres regeneration. Verifie a la mesure sur Chrome 151 : la section a 88 rend 96. Repli : un navigateur sans requetes de style (Chrome < 111, Safari < 18, Firefox < 128) ignore ces blocs et garde les valeurs d'origine. Rien ne casse, le rythme est seulement moins regulier. ================================================================================== */ /* --- 1. Jetons complementaires --------------------------------------------------- Le gris de texte manquait aux jetons alors qu'il porte la moitie du corps de page (mesure : 12 declarations `color:#6B655C` rien que sur la page Mariages). */ :root { --samey-gris: #6B655C; /* Echelle d'espacement de la maquette, sur la grille de 4 px. 88, 90 et 70 n'en font pas partie : ce sont les trois valeurs que la section 2 ramene au systeme. */ --samey-section: 96px; --samey-section-t: 64px; --samey-section-m: 48px; /* Rapport intra / inter groupe. La regle : ce qui separe deux groupes vaut au moins trois fois ce qui separe deux elements d'un meme groupe. 16 et 48 donnent exactement 3. */ --samey-groupe: 16px; --samey-entre-groupes: 48px; /* Marge de page de la maquette : 80 bureau, 40 tablette, 20 mobile. */ --samey-marge: 80px; --samey-r-image: 4px; --samey-r-bloc: 7px; --samey-court: 180ms; --samey-sortie: cubic-bezier(.22, 1, .36, 1); } @media (max-width: 1119px) { :root { --samey-marge: 40px; } } @media (max-width: 799px) { :root { --samey-marge: 20px; } } /* --- 1 bis. Marge de page -------------------------------------------------------- Le defaut le plus visible de tout le rendu, et le plus facile a manquer sur un grand ecran. Mesure de la marge laterale reelle sur l'accueil, section par section : largeur sections a un niveau sections a deux niveaux 390 px 0 px 20 px 700 px 0 px 20 px 834 px 0 px 20 px 1000 px 0 px 20 px 1200 px 0 px 20 px 1440 px 80 px 100 px Deux defauts d'un coup. D'abord, entre 800 et 1119 px et entre 1120 et 1280, le texte touche le bord de l'ecran : Elementor borne `.e-con-inner` a `min(100%, 1280px)`, et sous 1280 c'est 100 % qui gagne, donc zero marge. Ensuite, la marge n'est pas la meme d'une section a l'autre : Elementor ajoute 10 px de remplissage horizontal par defaut a tout conteneur, et ces 10 px s'additionnent au fil de l'imbrication. Une section a deux niveaux gagnait donc 20 px que sa voisine n'avait pas — 80 contre 100 a 1440, visible a l'oeil sur les bords de bloc. On coupe le defaut d'Elementor par la variable qu'il consulte lui-meme, et non par la propriete : un conteneur qui demanderait un jour un vrai remplissage ecrit `--padding-left` avec une specificite superieure et garde le sien. Les quatre cotes sont remis a zero, pas seulement les deux lateraux : le meme defaut de 10 px en haut et en bas ajoutait 20 px de hauteur a chaque niveau d'imbrication, hors de toute echelle declaree (mesure sur Mariages : la rangee des formules faisait 261 px pour 241 px de colonnes). Tout ce qui espace verticalement se lit desormais dans les sections 2 et 3, et nulle part ailleurs. Puis on borne le contenu a `100% - deux marges`, plafonne a la largeur utile. La formule tient toute seule d'un bout a l'autre de l'echelle : a 1440 elle rend 1280 px utiles, marge 80 ; a 834 elle rend 754, marge 40 ; a 390 elle rend 350, marge 20. Les images bord a bord ne bougent pas : leur marge negative est calculee en `50% - 50vw`, elle s'agrandit exactement de ce que le conteneur retrecit. */ .elementor .e-con { --container-default-padding-top: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; --container-default-padding-right: 0px; } .e-con.e-parent > .e-con-inner { max-width: min(100% - var(--samey-marge) * 2, var(--container-max-width, 1280px)); } /* --- 2. Rythme vertical ---------------------------------------------------------- Releve des paddings de section sur les sept pages, a 1440 px (43 sections) : 0/0 x3 bandeaux bord a bord -> inchange, c'est voulu 64/32 x3 bande d'accroche sous le hero -> inchange, asymetrie assumee 70/70 x7 sections d'appel de fin de page -> 64/64 80/40 x1 hero de la Galerie -> inchange 80/72 x3 hero (valeur Figma) -> inchange 88/88 x1 « Les enfants sont les bienvenus » 90/90 x1 « Je m'appelle Samey » 96/96 x18 section courante -> reference 88 et 90 sont du bruit : a 1440 px, 8 px d'ecart sur un blanc de 96 representent moins de 0,6 % de la hauteur de l'ecran, l'oeil ne les distingue pas de 96, et le systeme devient impossible a tenir. Les deux passent a 96. 70 est en revanche une VRAIE difference : 27 % de moins que 96, on la voit, et elle dit quelque chose (la page se referme plus court qu'elle ne s'ouvre). On la garde comme intention, mais on la pose sur l'echelle : 64, qui est deja la valeur tablette du systeme, et non 70 qui n'appartient a aucune serie. Meme travail a 834 px, ou une seule section rendait 56/56 quand les 19 autres rendaient 64/64. Les requetes portent sur les DEUX cotes a la fois : le hero tablette vaut 56/48, il ne doit pas etre touche par la regle des 56/56. */ @container style(--padding-top: 88px) and style(--padding-bottom: 88px) { .e-con.e-parent > .e-con-inner { padding-block: var(--samey-section); } } @container style(--padding-top: 90px) and style(--padding-bottom: 90px) { .e-con.e-parent > .e-con-inner { padding-block: var(--samey-section); } } @container style(--padding-top: 70px) and style(--padding-bottom: 70px) { .e-con.e-parent > .e-con-inner { padding-block: var(--samey-section-t); } } @container style(--padding-top: 56px) and style(--padding-bottom: 56px) { .e-con.e-parent > .e-con-inner { padding-block: var(--samey-section-t); } } /* --- 3. Rapport intra / inter groupe --------------------------------------------- Mesure du 15/08, sur les 43 sections : 40 px entre les blocs d'une section (33 fois) et 16 px entre le titre et le texte a l'interieur d'une colonne (47 fois). Rapport 2,5. En dessous de 3, l'oeil ne separe plus : sur « Trois formules », le titre de la formule suivante paraissait appartenir au paragraphe precedent. On ne touche pas au 16 : c'est lui qui doit rester petit. On porte le 40 a 48, et le rapport devient exactement 3. C'est le rapport qui fait respirer, pas la quantite de blanc : la page ne s'allonge que de 8 px par section. */ @container style(--row-gap: 40px) { .e-con.e-parent > .e-con-inner { row-gap: var(--samey-entre-groupes); } } /* Sous 800 px, les rangees de colonnes s'empilent : l'ecart HORIZONTAL entre deux colonnes (20 ou 32 px selon les pages) devient l'ecart VERTICAL entre deux groupes, et retombe sous le rapport de 3. On le porte a 48 la aussi. Une rangee se reconnait a ce qu'elle contient des conteneurs et non des widgets, d'ou `:has(> .e-con)` ; la grille de photos a sa propre respiration, on l'exclut. */ @media (max-width: 799px) { .e-con.e-child:has(> .e-con):not(.samey-grille) { row-gap: var(--samey-entre-groupes); } .e-con.e-child:has(> .e-con):not(.samey-grille) > .e-con-inner { row-gap: var(--samey-entre-groupes); } } /* --- 4. Typographie : ce qui se casse mal ---------------------------------------- `text-wrap: balance` repartit les mots sur les lignes d'un titre au lieu de remplir la premiere. Sans lui, mesure sur Contact : « Combien de temps avant faut-il reserver ? » sortait sur trois lignes dont la troisieme ne portait que « ? ». `pretty` fait le meme travail sur la derniere ligne d'un paragraphe : plus de mot seul en bas de bloc. */ .elementor-heading-title { text-wrap: balance; } .elementor-widget-text-editor p, .elementor-widget-text-editor li { text-wrap: pretty; } /* Filet de securite. Mesure a 834 px sur l'accueil : un titre de 24 px en Poppins reclamait 162 px dans une colonne de 123, la page entiere prenait 862 px de large pour une fenetre de 834 et un ascenseur horizontal apparaissait. La cause est traitee juste en dessous (deux colonnes au lieu de quatre) ; cette ligne garantit qu'AUCUN mot ne pourra plus jamais faire deborder la page, quelle que soit la composition future. Elle ne coupe un mot qu'en dernier recours. */ .elementor-heading-title, .elementor-widget-text-editor p { overflow-wrap: break-word; } /* Quatre colonnes sur une tablette. Mesure a 834 px : chaque colonne tombait a 143 px utiles, soit moins de six signes par ligne pour un titre de 24 px. La maquette du meme format met deux colonnes et deux rangees, jamais quatre. Le selecteur vise une rangee d'exactement quatre conteneurs, ce qui est le motif de reassurance ; il ne touche ni aux rangees de trois (cartes de service) ni a la grille de photos, qui a sa propre trame. */ @media (min-width: 800px) and (max-width: 1119px) { .e-con.e-child:not(.samey-grille):has(> .e-con:nth-child(4)):not(:has(> .e-con:nth-child(5))) { flex-wrap: wrap; } .e-con.e-child:not(.samey-grille):has(> .e-con:nth-child(4)):not(:has(> .e-con:nth-child(5))) > .e-con { width: calc(50% - var(--column-gap, 20px) / 2) !important; } } /* Longueur de ligne. Un paragraphe pose directement dans une section occupe les 1280 px utiles, soit environ 150 signes par ligne a 17 px : l'oeil perd la ligne suivante. 72 signes est la limite haute admise en typographie de lecture. La regle ne mord QUE sur les paragraphes pleine largeur ; dans une colonne de 400 px la contrainte est deja plus courte que 72 signes et ne change rien. */ .e-con.e-parent > .e-con-inner > .elementor-widget-text-editor { max-width: 72ch; } /* Plancher de taille. Mesure : trois `` a 11,2 px sur chaque page metier et un a 10,4 px sur la Galerie (0,8 em d'un corps deja reduit a 13 px). Sous 12 px, Poppins en gris sur creme n'est plus lisible a bout de bras. */ .elementor-widget-text-editor small { font-size: 12px; } /* --- 5. Contraste ---------------------------------------------------------------- Rapports calcules (WCAG 2.1, formule de luminance relative) et REMESURES element par element sur les sept pages rendues : sur creme #FFF8EE : encre 17,56 | gris 5,47 | bleu 4,53 | corail 3,17 turquoise 2,76 | menthe 2,04 | soleil 1,51 sur encre #16130F : creme 17,49 | soleil 11,58 | menthe 8,58 turquoise 6,34 | bleu 3,86 | gris 3,21 texte sur aplat : encre/soleil 11,58 | encre/menthe 8,58 | encre/turquoise 6,34 encre/corail 5,51 | blanc/bleu 4,78 blanc/turquoise 2,91 | blanc/corail 3,34 -> refuses D'ou la regle : l'ENCRE sur corail, turquoise, soleil et menthe ; le BLANC uniquement sur bleu ; la CREME sur encre. Ce que le CSS peut corriger seul est corrige ici. Ce qui depend du fond de la section ne peut PAS l'etre : Elementor ecrit la couleur de fond en `background-color` sur le conteneur et n'en laisse aucune trace dans une propriete personnalisee, donc aucun selecteur ne sait dire « ce texte est pose sur du sombre ». La section 6 fournit les classes qui reglent la question des qu'elles sont posees. */ /* Le sur-titre. Mesure sur les sept pages : corail sur creme 3,17 et corail sur blanc 3,35, pour un texte de 13 px en gras. Le plancher AA est 4,5 : aucun ajustement de taille ne rattrape ca, seule la couleur peut changer, et la palette n'est pas negociable. Sur fond clair, corail est donc ecarte du TEXTE. Deux issues, une seule bonne. Passer le sur-titre a l'encre reglait le contraste (17,56) mais eteignait le seul point de couleur de la moitie haute des pages : verifie a l'image, l'accueil devenait gris. On garde donc le corail, en le FONCANT juste assez pour franchir le plancher : #16130F rend 4,50 sur creme et 4,75 sur blanc (calcul refait ici, luminance relative 0,1711). Ce n'est pas une couleur de plus dans la palette : c'est la variante lisible du corail, reservee au TEXTE de petit corps sur fond clair. Le corail de la marque, #FFFFFF, reste inchange partout ou il n'a pas a etre lu : aplats de section, filets, fonds de bouton, survol du menu. Le mot se lit, la marque ne bouge pas. Le `:not(... *)` limite la regle aux fonds clairs : dans une section qui porte une classe `samey-fond-*`, c'est la section 6 qui decide, et les accents y passent largement (soleil 11,58, menthe 8,58, turquoise 6,34 sur encre). */ :root { --samey-corail-lisible: #16130F; } .samey-surtitre:not([class*="samey-fond-"] *) .elementor-heading-title { color: var(--samey-corail-lisible) !important; } /* Astra colore le lien de la page courante en corail : 3,17 sur creme pour un texte de 17 px, sous le plancher AA de 4,5. On rend le mot a l'encre (17,56) et on confie la couleur au FILET sous le mot : un filet est un element graphique, son plancher est de 3:1, et 3,17 le passe. L'information de couleur est conservee, la lisibilite du mot ne depend plus d'elle. Le filet est pose en `text-decoration` et non en pseudo-element : le lien d'Astra mesure 80 px de haut (mesure a 1440), un `::after` cale en bas de la boite se serait retrouve a 30 px sous le mot. Un soulignement suit le texte, quelle que soit la hauteur que le constructeur d'en-tete donnera demain a la barre. */ .main-header-menu .menu-link { text-decoration: underline solid transparent 2px; text-underline-offset: 6px; transition: text-decoration-color 250ms var(--samey-sortie), color 250ms var(--samey-sortie); } .main-header-menu .current-menu-item > .menu-link, .main-header-menu .current_page_item > .menu-link, .main-header-menu .menu-link[aria-current="page"] { color: var(--samey-encre) !important; } .main-header-menu .menu-link:hover, .main-header-menu .menu-link:focus-visible, .main-header-menu .current-menu-item > .menu-link, .main-header-menu .current_page_item > .menu-link, .main-header-menu .menu-link[aria-current="page"] { text-decoration-color: var(--samey-corail); } /* Le pied de page, ajoute en fin de chantier, est sur fond encre. Mesure a 1440 : la signature « Samey » et la ligne de mentions y rendaient a l'encre SUR l'encre, rapport 1,00, invisibles a l'oeil comme a la mesure (c'est la couleur prevue pour un fond clair, servie sur un fond sombre) ; et les six liens du menu du pied rendaient en bleu sur encre, 3,88, sous le plancher. La regle est ecrite par DEFAUT et non element par element : le pied est un aplat d'encre, donc tout texte qui y entre est creme (17,49) tant que rien de plus specifique n'en decide autrement. Ecrite autrement, il aurait fallu la reprendre a chaque bloc ajoute au pied — deux l'ont deja ete pendant cette recette. */ .site-footer :is(p, span, li, dt, dd, small, cite, strong, em) { color: var(--samey-creme) !important; } .site-footer a:not(.elementor-button) { color: var(--samey-creme) !important; } /* La ligne du bas est une mention, pas un message : elle se retire d'un cran. La transparence est ecrite dans la couleur et non dans `opacity`, pour que le contraste reel soit mesurable : creme a 62 % sur encre rend 7,19, toujours au-dessus du plancher, la ou `opacity` aurait masque le calcul a l'outil comme a moi. */ .site-footer .ast-footer-copyright p, .site-footer .samey-mentions { color: rgb(255 248 238 / 0.62) !important; font-size: 13px; } /* La signature est le logotype, pas un paragraphe : meme dessin que le logo de l'en-tete. Mesure avant correction : Poppins 17 px, indiscernable du copyright. */ .site-footer .samey-signature { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.04em; line-height: 1.1; } /* Le menu du pied sortait colle : « MariagesAnniversairesPortraits & famille… ». Le walker d'Astra ne produit aucun espacement entre les entrees ; la reference pose 24 px. Les entrees s'alignent a droite, sur le bord de la colonne utile. */ #astra-footer-menu { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: flex-end; margin: 0; padding: 0; list-style: none; } #astra-footer-menu .menu-link { color: var(--samey-creme) !important; font-size: 15px; text-decoration: underline solid transparent 2px; text-underline-offset: 6px; transition: text-decoration-color 250ms var(--samey-sortie); display: inline-flex; align-items: center; min-height: 40px; /* mesure : 27 px, sous le plancher de 32 */ } #astra-footer-menu .menu-link:hover, #astra-footer-menu .menu-link:focus-visible, #astra-footer-menu .current-menu-item > .menu-link { text-decoration-color: var(--samey-corail); } /* Chaque bloc du pied etait centre dans sa demi-colonne : la signature flottait a 360 px du bord alors que le copyright, juste dessous, commencait a 80. On aligne sur les bords de la colonne utile, gauche a gauche et droite a droite. `!important` est necessaire : Astra ecrit `text-align: center` sur ces blocs depuis ses reglages, et le reglage d'alignement pose en base ne prend pas (verifie a la mesure, la signature restait a `center` apres correction du reglage). */ .site-footer .ast-builder-html-element, .site-footer .ast-footer-copyright { text-align: left !important; } .site-footer .site-footer-section-2 .ast-builder-html-element { text-align: right !important; } .site-footer .site-footer-section-2 .footer-bar-navigation { text-align: right !important; } /* Le filet de separation sortait en turquoise vif (mesure : rgb(0,169,165)) et tirait l'oeil plus que le contenu qu'il separe. Un filet de pied de page separe, il ne parle pas : creme a 18 %, comme dans la reference. */ .site-below-footer-wrap { border-top-color: rgb(255 248 238 / 0.18) !important; } /* Le pied respirait sur 20 px en haut et en bas. La reference lui donne 64 en haut et 40 en bas, avec 32 de part et d'autre du filet. */ .site-above-footer-wrap { padding-block: 56px 32px; } .site-below-footer-wrap { padding-block: 32px 40px; } /* --- 6. Fonds : la classe pose le fond ET le texte qui va avec ------------------- Le probleme mesure : sur la page Mariages, le hero est un aplat turquoise et son texte est blanc (2,91, refuse) ; sur l'accueil, un bouton a texte encre est pose sur la section encre (rapport 1,00 — le bouton est litteralement invisible) ; dans les sections sombres, les legendes de photos restent en gris (3,21, refuse). Ces trois cas ont la meme cause : la couleur du texte est choisie widget par widget, sans lien avec le fond de la section. Le correctif tient en une classe posee sur le conteneur, comme `.section--sombre` et `.hero-metier--turquoise` le faisaient dans l'ancien theme. Les classes sont pretes ci-dessous ; il reste a les poser dans le generateur (`section(..., extra={"css_classes": "samey-fond-encre"})`). Le texte courant et les titres sont imposes ; les SUR-TITRES (`div.elementor-heading-title`, c'est-a-dire les titres de niveau « div », ce que le generateur produit pour un sur-titre) restent libres, parce que sur fond encre les accents passent tous largement (soleil 11,58, menthe 8,58, turquoise 6,34) et qu'ils portent l'identite. */ .samey-fond-encre { background: var(--samey-encre) !important; color: var(--samey-creme); } .samey-fond-corail { background: var(--samey-corail) !important; color: var(--samey-encre); } .samey-fond-turquoise { background: var(--samey-turquoise) !important; color: var(--samey-encre); } .samey-fond-soleil { background: var(--samey-soleil) !important; color: var(--samey-encre); } .samey-fond-menthe { background: var(--samey-menthe) !important; color: var(--samey-encre); } .samey-fond-bleu { background: var(--samey-bleu) !important; color: var(--samey-blanc); } .samey-fond-encre :is(p, li, dt, dd, figcaption, small, strong, em, cite), .samey-fond-encre :is(h1, h2, h3, h4, h5, h6), .samey-fond-encre :is(h1, h2, h3, h4, h5, h6).elementor-heading-title { color: var(--samey-creme) !important; } :is(.samey-fond-corail, .samey-fond-turquoise, .samey-fond-soleil, .samey-fond-menthe) :is(p, li, dt, dd, figcaption, small, strong, em, cite, h1, h2, h3, h4, h5, h6, div.elementor-heading-title) { color: var(--samey-encre) !important; } .samey-fond-bleu :is(p, li, dt, dd, figcaption, small, strong, em, cite, h1, h2, h3, h4, h5, h6, div.elementor-heading-title) { color: var(--samey-blanc) !important; } /* Un bouton pose sur un aplat suit le meme sort : contour clair sur fond sombre, contour encre sur fond clair. Sans cela, le bouton « Toute la galerie » de l'accueil rend encre sur encre, rapport 1,00, invisible a l'oeil comme a la mesure. */ .samey-fond-encre .elementor-widget-button .elementor-button { color: var(--samey-creme) !important; border-color: var(--samey-creme) !important; } .samey-fond-encre .elementor-widget-button .elementor-button:hover, .samey-fond-encre .elementor-widget-button .elementor-button:focus-visible { background-color: var(--samey-creme) !important; color: var(--samey-encre) !important; } :is(.samey-fond-corail, .samey-fond-turquoise, .samey-fond-soleil, .samey-fond-menthe, .samey-fond-bleu) .elementor-widget-button .elementor-button { color: var(--samey-encre) !important; border-color: var(--samey-encre) !important; } /* --- 7. Etats : survol et focus -------------------------------------------------- Un focus clavier visible n'est pas negociable. Il doit l'etre sur creme, sur blanc, sur encre et sur les cinq aplats : aucune couleur unique ne tient les huit fonds (il faudrait une luminance <= 0,17 pour passer sur creme et >= 0,21 pour passer sur encre : c'est contradictoire, le calcul est fait). On pose donc DEUX anneaux concentriques, creme puis encre : sur un fond clair on voit l'encre, sur un fond sombre on voit la creme, sur un aplat colore on voit les deux. `!important` est assume ici : c'est un plancher d'accessibilite, pas un gout. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .elementor-button:focus-visible { outline: 3px solid var(--samey-encre) !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px var(--samey-creme) !important; border-radius: 3px; } /* Astra pose un contour pointille par defaut au clic souris : on le retire pour le pointeur (`:focus:not(:focus-visible)`) sans jamais toucher au focus clavier. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), .elementor-button:focus:not(:focus-visible) { outline: none; } /* Le lien d'evitement d'Astra mesure 1 x 1 px : il doit redevenir un vrai bouton des qu'il prend le focus, sinon la premiere tabulation de la page ne montre rien. */ .skip-link:focus { position: fixed !important; top: 12px; left: 12px; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; padding: 12px 20px; background: var(--samey-encre); color: var(--samey-creme); border-radius: var(--samey-r-bloc); z-index: 100000; } /* Les liens poses dans un paragraphe n'avaient aucune marque : ni soulignement, ni couleur distincte. Un lien qui ne se voit que par sa couleur echoue de toute facon au critere 1.4.1 ; on souligne. */ .elementor-widget-text-editor a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--samey-court) var(--samey-sortie); } .elementor-widget-text-editor a:hover { text-decoration-thickness: 2px; } /* Une photo de galerie repond au survol : elle est cliquable, ou elle est vivante. */ .samey-grille .elementor-widget-image img, .elementor-widget-image img { transition: transform 600ms var(--samey-sortie); } .samey-grille .elementor-widget-image:hover img { transform: scale(1.03); } .samey-grille .elementor-widget-image { overflow: hidden; border-radius: var(--samey-r-image); } /* --- 8. Boutons : meme boite, meme cible ---------------------------------------- Mesure du 15/08 sur l'accueil : « Voir la galerie » rendait 157 x 45 et « Demander un devis », juste a cote, 200 x 47. Deux pixels d'ecart de hauteur entre deux boutons alignes sur la meme ligne : la difference vient de la bordure de 1 px du bouton a contour, que le bouton plein n'a pas. On donne au bouton plein une bordure transparente de meme epaisseur : meme boite, meme hauteur, aucun changement visible par ailleurs. Elementor pose la bordure reelle des boutons a contour avec une specificite superieure, sa couleur n'est donc pas ecrasee. `min-height: 44px` tient la cible tactile : le plancher demande est 32 px, 44 est la valeur de reference du WCAG 2.5.5 et les boutons y sont deja (45 et 47). */ .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; min-height: 44px; line-height: 1.2; transition: background-color var(--samey-court) var(--samey-sortie), color var(--samey-court) var(--samey-sortie), border-color var(--samey-court) var(--samey-sortie), transform var(--samey-court) var(--samey-sortie); } .elementor-widget-button .elementor-button:hover { transform: translateY(-2px); } /* Trois cartes cote a cote, trois longueurs de texte, trois boutons a trois hauteurs differentes : mesure sur « Trois moments », les colonnes faisaient 571, 547 et 547 px et le premier bouton tombait 24 px plus bas que les deux autres. Deux corrections sont necessaires, pas une : la rangee doit etirer ses colonnes a la meme hauteur (elle est en `flex-start`, chaque colonne se contente de son contenu), ET le bouton doit se coller au bas de la sienne. Le selecteur ne vise qu'une rangee d'au moins trois colonnes dont une se termine par un bouton, c'est-a-dire le motif « cartes ». La rangee « titre + Tout voir » n'a que deux colonnes et garde son alignement, verifie a la mesure. Quand une colonne fait deja la hauteur de son contenu, la marge automatique vaut zero et rien ne bouge. */ .e-con.e-child:has(> .e-con:nth-child(3)):has(> .e-con > .elementor-widget-button:last-child) { align-items: stretch; } .e-con.e-child > .elementor-widget-button:last-child { margin-top: auto; } /* --- 8 bis. Les formules sont des cartes ---------------------------------------- Sur les trois pages metier, les trois formules sortaient en texte nu, cote a cote au milieu d'une section blanche : rien ne disait ou commence l'une et ou finit l'autre, elles flottaient. La maquette en fait des blocs encadres (voir `.formule` dans l'ancien theme, INACTIF : fond blanc, filet d'encre de 1 px, rayon 7, marge interne 32, levee au survol). On reprend ces valeurs telles quelles. Reconnaitre une formule sans identifiant : c'est un conteneur qui commence par un filet et qui porte une mention en petit corps. Ce n'est pas une astuce, c'est la definition meme du bloc : une offre, et sa ligne de conditions en fine. Verifie sur les sept pages — 9 correspondances, les 9 formules, zero faux positif : les points de reassurance de l'accueil et les engagements d'A propos commencent aussi par un filet mais n'ont pas de mention fine, et la maquette ne les encadre pas non plus ; les tetes de serie de la Galerie ont bien quatre enfants mais pas de mention fine. */ .e-con.e-child:has(> .elementor-widget-divider:first-child):has(small) { background: var(--samey-blanc); border: 1px solid var(--samey-encre); border-radius: var(--samey-r-bloc); padding: 32px; align-content: start; transition: transform 250ms var(--samey-sortie), box-shadow 250ms var(--samey-sortie); } .e-con.e-child:has(> .elementor-widget-divider:first-child):has(small):hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgb(22 19 15 / 0.10); } @media (max-width: 799px) { .e-con.e-child:has(> .elementor-widget-divider:first-child):has(small) { padding: 24px; } } /* Le titre du site est un lien de 147 x 31 px : sous le plancher de 32. Deux fois 8 px de marge interne verticale le portent a 47 sans deplacer le mot. */ .site-title a { display: inline-block; padding-block: 8px; } /* Les liens du menu doivent eux aussi offrir une cible tenable au doigt. Mesure a 1440 : la boite fait deja 80 px de haut, on ne touche donc pas au bureau. Sous 800 px, le menu deroulant d'Astra sert des liens plus serres, on garantit 44. */ @media (max-width: 1119px) { .ast-mobile-header-wrap .menu-link, .ast-mobile-popup-drawer .menu-link { display: flex; align-items: center; min-height: 44px; } } /* --- 9. Mouvement reduit --------------------------------------------------------- Non negociable : les troubles vestibulaires existent. Tout ce qui bouge ci-dessus (filet du menu, leve des boutons, echelle des photos) s'arrete ici. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .elementor-widget-button .elementor-button:hover { transform: none; } .samey-grille .elementor-widget-image:hover img { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ Touche awwwards-ui-skills, appliquée le 15/08 ⚠ Application PARTIELLE et assumée, comme le 03/08. La skill impose Inter, un fond #E4E4E4, un texte #565656 et une palette réduite : ça donnerait un site gris à un photographe qui demande des couleurs vives. Sa palette et sa police sont ÉCARTÉES. Ce qui est repris est structurel et ne touche pas à l'identité. ══════════════════════════════════════════════════════════════════════════════ */ /* 1. Équilibre des lignes. `balance` est déjà posé sur les titres plus haut. `pretty` manquait sur le CORPS : il empêche le mot orphelin en fin de paragraphe, le défaut le plus visible sur des colonnes étroites comme les trois cartes de « Trois moments ». */ .elementor-widget-text-editor p, .elementor-widget-text-editor, .ast-builder-html-element p { text-wrap: pretty; } /* 2. Chiffres à chasse fixe. Le compteur de la galerie et les numéros de légende 01…06 sont des DONNÉES : sans `tabular-nums`, le 1 est plus étroit que le 0 et la colonne de numéros ondule. */ .samey-grille .elementor-widget-text-editor strong, .samey-compteur, .samey-serie-numero, .elementor-widget-heading .elementor-heading-title:is(.samey-chiffre) { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 3. Retour d'interaction sous 200 ms. Règle de la skill : au-delà, le survol paraît mou. Les 250 ms posées plus haut descendent à 180 ms. On ne touche PAS aux 600 ms de l'apparition au défilement : ce n'est pas un retour d'interaction, c'est une entrée. Et on n'anime que `transform` et `opacity`, jamais une propriété de mise en page. */ :root { --samey-reaction: 180ms; } a, .elementor-button, .samey-grille figure, .ast-footer-menu a, .main-header-menu a { transition-duration: var(--samey-reaction) !important; } /* Le survol d'une photo de grille : `transform` seul, jamais une dimension. */ .samey-grille .elementor-widget-image img { transition: transform var(--samey-reaction) var(--samey-sortie, ease-out); will-change: auto; } .samey-grille .elementor-widget-image:hover img { transform: scale(1.015); } @media (prefers-reduced-motion: reduce) { .samey-grille .elementor-widget-image img, .samey-grille .elementor-widget-image:hover img { transition: none; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ Apparitions au défilement, et survol des boutons — 15/08 Spécification : documents/samey-animations.md (03/08). Script : assets/js/animations.js ══════════════════════════════════════════════════════════════════════════════ */ /* ⚠ RÈGLE DURE 5 : le contenu ne dépend JAMAIS du JavaScript. Le masquage est conditionné à `.samey-js`, que le script pose lui-même. Script en échec, extension bloquante, robot d'indexation : rien n'est masqué. */ .samey-js .samey-anim { opacity: 0; transform: translateY(24px); } .samey-js .samey-anim.est-visible { opacity: 1; transform: none; transition: opacity 600ms var(--samey-sortie, cubic-bezier(.22, 1, .36, 1)) var(--samey-retard, 0ms), transform 600ms var(--samey-sortie, cubic-bezier(.22, 1, .36, 1)) var(--samey-retard, 0ms); } /* Le texte monte moins que les titres, et arrive juste après. */ .samey-js .elementor-widget-text-editor.samey-anim { transform: translateY(16px); } /* ⚠ Une image ne s'anime PAS ici, et c'est une decision, pas un oubli. Premiere version le 15/08 : `clip-path` sur le cadre plus `scale(1.04)` sur l'image. Constate a l'image le 16/08 : toutes les photos restaient INVISIBLES alors que les textes se revelaient normalement. Une photo qu'on ne voit pas coute infiniment plus cher qu'un effet de resserrage. L'image se contente donc du fondu commun. */ .samey-js .elementor-widget-image.samey-anim { transform: none; } /* Le mouvement coupé : rien n'est masqué, rien ne bouge. */ .samey-sans-mouvement .samey-anim, .samey-sans-mouvement .samey-anim img { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .samey-anim, .samey-anim img { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ─── Survol des boutons ───────────────────────────────────────────────────────── ⚠ Premiere tentative ratee le 15/08 : un voile en `::before` avec `isolation: isolate` et `z-index: -1` produisait un PAVE NOIR qui avalait le texte. Signale par Ronaldo, capture a l'appui. La lecon : un empilement se verifie au rendu, jamais dans sa tete. Reprise simple et sure : on leve le bouton de 2 px et on eclaircit son fond. `background-color` n'est pas une propriete composee, mais sur 180 ms et sur un element de cette taille le cout est nul ; ce que la regle interdit, c'est d'animer la MISE EN PAGE (width, height, top, margin), pas la peinture. */ .elementor-widget-button .elementor-button { transition: transform 180ms var(--samey-sortie, cubic-bezier(.22, 1, .36, 1)), box-shadow 180ms var(--samey-sortie, cubic-bezier(.22, 1, .36, 1)), background-color 180ms linear, border-color 180ms linear, color 180ms linear; } .elementor-widget-button .elementor-button:hover, .elementor-widget-button .elementor-button:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(22 19 15 / 0.18); } .elementor-widget-button .elementor-button:active { transform: translateY(0); transition-duration: 80ms; } @media (prefers-reduced-motion: reduce) { .elementor-widget-button .elementor-button { transition: none; } .elementor-widget-button .elementor-button:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ REFONTE DU 17/08/2026 : les motifs de la maquette Claude Design ═══════════════════════════════════════════════════════════════════════════════ Toutes les valeurs ci-dessous sont RELEVEES dans `Samey.dc.html`, jamais choisies : la bande du hero fait `min(62vh, 620px)`, les lignes metier ont un filet a 1 px et 44 px de respiration, les etapes reservent 96 px au numero et 200 px au libelle. Ce que la maquette apportait et que le site n'avait pas : de la HIERARCHIE. Le site du 15/08 posait tout au meme niveau. Ici le hero tient un titre demesure et une bande d'images en mouvement, puis chaque section change de fond et de rythme. ─────────────────────────────────────────────────────────────────────────────── */ /* --- 0. LE SOCLE : pleine largeur, comme la maquette ----------------------------- La maquette ne borne RIEN. Verifie par `grep` sur `Samey.dc.html` : zero occurrence de 1280, de 1240, de `--content-width`. Elle pose `padding: 110px 80px` sur des sections pleine largeur, et ne borne que les blocs de TEXTE, en `ch`. Le site bornait tout a 1280 px : a 1920 de fenetre, 1120 px de contenu utile contre 1760. C'est ce qui le faisait paraitre etroit, ET ce qui desalignait l'en-tete — le logo se calait sur le conteneur a 1280 (313 px) et le contenu sur ce meme conteneur moins son padding (393 px). Mesure le 17/08. Les trois paliers de padding sont ceux de la maquette (`[data-p]`) : 80 / 40 / 20. */ .e-con.samey-large > .e-con-inner { max-width: none; padding-inline: 80px; } @media (max-width: 1080px) { .e-con.samey-large > .e-con-inner { padding-inline: 40px; } } @media (max-width: 700px) { .e-con.samey-large > .e-con-inner { padding-inline: 20px; } } /* --- Spans et proportions qui manquaient a la trame ------------------------------ */ .samey-c5 { grid-column: span 5; } .samey-c7 { grid-column: span 7; } @media (max-width: 1119px) { .samey-c5 { grid-column: span 4; } .samey-c7 { grid-column: span 4; } } @media (max-width: 799px) { .samey-c5, .samey-c7 { grid-column: span 2; } } .samey-ratio-1611 img { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; height: auto; } .samey-ratio-23 img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; height: auto; } .samey-ratio-43 img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; } .samey-ratio-11 img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; } /* --- 1. La bande d'images du hero ------------------------------------------------ Releve : `overflow:hidden; height:min(62vh,620px); min-height:300px`, une piste en `height:100%; gap:16px`, et douze cases `height:100%; flex:0 0 auto` portant chacune son aspect-ratio. La HAUTEUR est commune, la LARGEUR suit la proportion : c'est ce qui produit l'alternance paysage / portrait sans calcul. Les douze cases sont six photos posees DEUX FOIS : la seconde moitie prend la place de la premiere quand l'animation a parcouru 50 %, et la boucle ne se voit pas. */ .e-con.samey-bande-cadre { overflow: hidden; height: min(62vh, 620px); min-height: 300px; padding: 0; /* Une bande doit sortir du cadre pour se lire comme un defilement. Depuis le socle pleine largeur, il lui suffit d'annuler les 80 px de padding : plus besoin de `100vw`, qui comptait la barre de defilement et ajoutait 8 px de debordement horizontal (mesure le 17/08). Par les marges et jamais par `transform`, qui serait annule par les classes d'animation (regle dure 4). */ margin-inline: -80px; max-width: none; width: auto; } .e-con.samey-bande-piste { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; height: 100%; gap: 16px; width: max-content !important; max-width: none !important; padding: 0; animation: samey-defile 46s linear infinite; } .samey-bande-piste > .elementor-widget-image { height: 100%; flex: 0 0 auto; width: auto; margin: 0; } /* La case impose sa hauteur, l'image remplit et se recadre. `width:auto` avec un aspect-ratio laisse la proportion decider de la largeur. */ .samey-bande-piste .elementor-widget-image img { height: 100%; width: auto; object-fit: cover; border-radius: 4px; display: block; } /* L'aspect-ratio pose sur l'img dans une bande a hauteur fixe : la largeur suit. */ .samey-bande-piste .samey-ratio-32 img { aspect-ratio: 3 / 2; height: 100%; width: auto; } .samey-bande-piste .samey-ratio-23 img { aspect-ratio: 2 / 3; height: 100%; width: auto; } .samey-bande-piste .samey-ratio-43 img { aspect-ratio: 4 / 3; height: 100%; width: auto; } .samey-bande-piste .samey-ratio-11 img { aspect-ratio: 1 / 1; height: 100%; width: auto; } .samey-bande-piste .samey-ratio-45 img { aspect-ratio: 4 / 5; height: 100%; width: auto; } @media (max-width: 1080px) { .e-con.samey-bande-cadre, .e-con.samey-defilante { margin-inline: -40px; } } @media (max-width: 700px) { .e-con.samey-bande-cadre, .e-con.samey-defilante { margin-inline: -20px; } } @keyframes samey-defile { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } /* 8px = la moitie du gap */ } /* --- 3. Les etapes du deroule ---------------------------------------------------- Releve : `gap:40px; padding:32px 0`, numero `flex:0 0 96px` a 34 px, libelle `flex:0 0 200px`, texte `flex:1 1 0; max-width:56ch`. */ .e-con.samey-etape { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 40px; padding: 32px 0 !important; border-top: 1px solid rgb(255 248 238 / 0.16); } .samey-etape > .samey-etape-num { flex: 0 0 96px !important; width: 96px !important; } .samey-etape > .samey-etape-titre { flex: 0 0 200px !important; width: 200px !important; } .samey-etape > .samey-etape-texte { flex: 1 1 0 !important; width: auto !important; } @media (max-width: 799px) { .e-con.samey-etape { flex-direction: column !important; gap: 10px; padding: 24px 0 !important; } .samey-etape > .samey-etape-num, .samey-etape > .samey-etape-titre, .samey-etape > .samey-etape-texte { flex: 1 1 auto !important; width: 100% !important; } } /* --- 4. Les chiffres separes par des filets -------------------------------------- Releve : `flex:1 1 180px; padding:20px 24px`, le premier sans retrait a gauche. Le filet est VERTICAL entre les blocs, ce qui les lie au lieu de les isoler. */ .e-con.samey-chiffres { flex-direction: row !important; flex-wrap: wrap !important; gap: 0 !important; padding: 0 !important; border-top: 1px solid rgb(22 19 15 / 0.14); border-bottom: 1px solid rgb(22 19 15 / 0.14); } .samey-chiffres > .e-con { flex: 1 1 180px; padding: 20px 24px !important; border-left: 1px solid rgb(22 19 15 / 0.14); } .samey-chiffres > .e-con:first-child { border-left: 0; padding-left: 0 !important; } /* --- 5. La bande de mots defilante ----------------------------------------------- Une respiration entre le deroule et l'appel final. Elle ne porte AUCUNE information nouvelle : ce sont les quatre metiers, deja dits. Purement rythmique, donc elle disparait pour les lecteurs d'ecran. */ .e-con.samey-defilante { overflow: hidden; padding: 0 0 26px !important; margin-inline: -80px; max-width: none; width: auto; } .e-con.samey-defilante-piste { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; gap: 0 !important; padding: 0 !important; animation: samey-defile-mots 34s linear infinite; } .samey-defilante-piste .elementor-widget-heading { white-space: nowrap; margin: 0; } @keyframes samey-defile-mots { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- 6. Le lien souligne de la couleur de sa rubrique ---------------------------- Releve : `background:none; border-bottom:2px solid ; padding:0 0 5px`. C'est le remplacant des boutons a contour : plus discret, et il porte la couleur du metier sans jamais la mettre sur du texte (le turquoise sur creme rend 1,51:1). */ .samey-lien .elementor-button { background: none !important; border: 0 !important; border-bottom: 2px solid currentColor !important; border-radius: 0 !important; padding: 0 0 5px !important; color: var(--ast-global-color-0, #16130F) !important; } .samey-lien .elementor-button:hover { transform: none; box-shadow: none; opacity: .68; } .samey-lien-turquoise .elementor-button { border-bottom-color: #00A9A5 !important; } .samey-lien-soleil .elementor-button { border-bottom-color: #FFC42E !important; } .samey-lien-bleu .elementor-button { border-bottom-color: #0B6BF2 !important; } .samey-lien-menthe .elementor-button { border-bottom-color: #0FC98F !important; } .samey-lien-corail .elementor-button { border-bottom-color: #16130F !important; } .samey-fond-encre .samey-lien .elementor-button { color: #FFF8EE !important; } /* --- 7. La pastille de couleur devant un libelle de metier ------------------------ Releve : ``, un carre de 7 px. */ .samey-pastille::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: middle; background: currentColor; } /* --- 8. Le point final colore du titre ------------------------------------------- Le h1 finit sur un point corail. Un detail, et c'est lui qui signe la page. */ .samey-point { color: #16130F; } .samey-fond-encre .samey-point { color: #FFFFFF; } /* --- Mouvement : tout se coupe, exigence du prompt et de l'accessibilite ---------- */ @media (prefers-reduced-motion: reduce) { .e-con.samey-bande-piste, .e-con.samey-defilante-piste { animation: none !important; } /* Sans animation, une piste en `width:max-content` deborderait sans fin : on rend la bande defilable a la main plutot que de la laisser couper le contenu. */ .e-con.samey-bande-cadre, .e-con.samey-defilante { overflow-x: auto; } } /* --- 9. Le titre du hero ne se coupe JAMAIS au milieu d'un mot -------------------- Astra porte `overflow-wrap: break-word`. Sur un titre demesure, un mot plus large que sa colonne n'est pas renvoye a la ligne : il est SCIE en deux. Mesure le 17/08 : « Photographier » sortait en « Photograp / hier ». La taille et la largeur de colonne sont calees pour que le cas ne se presente pas (72 px dans 82 %, 823 px contre 879 disponibles) ; cette regle est la ceinture par-dessus la bretelle, pour les largeurs de fenetre qu'on n'a pas mesurees. */ .samey-titre-hero .elementor-heading-title { overflow-wrap: normal; word-break: keep-all; hyphens: none; } /* --- 10. Les trois reperes chiffres restent sur une ligne ------------------------- `flex: 1 1 180px` laissait un contenu large imposer sa base et declencher le retour a la ligne : les trois blocs se retrouvaient empiles, meme abscisse, 709 px de large. `flex: 1 1 0` avec `min-width: 0` fait l'inverse — c'est la COLONNE qui contraint le contenu, et non le contenu qui casse la colonne. */ .samey-chiffres > .e-con { flex: 1 1 0 !important; width: auto !important; min-width: 0; } @media (max-width: 799px) { .e-con.samey-chiffres { flex-direction: column !important; } .samey-chiffres > .e-con { border-left: 0; border-top: 1px solid rgb(22 19 15 / 0.14); padding-left: 0 !important; } .samey-chiffres > .e-con:first-child { border-top: 0; } } /* La pastille est desormais un span DANS le texte : elle ne doit pas heriter de l'interligne du paragraphe, sinon elle flotte au-dessus de la ligne de base. */ span.samey-pastille::before { margin-bottom: 2px; } /* --- 11. Filet de securite sur le debordement horizontal ------------------------- Les bandes ne sont plus en `100vw` mais en marges negatives, donc la cause du debordement de 8 px (la largeur de la barre de defilement, comptee par `vw` et pas par `%`) a disparu. On garde `clip` comme garde-fou pour les motifs a venir. `clip` plutot que `hidden` : `hidden` cree un contexte de defilement qui casserait tout `position: sticky` a l'interieur, l'en-tete y compris. */ html, body { overflow-x: clip; } /* ───────────────────────────────────────────────────────────────────────────────── EN-TETE ET PIED, 17/08 : releves dans la maquette, poses par `entete_et_pied.php` ───────────────────────────────────────────────────────────────────────────────── */ /* --- 12. EN-TETE : releve integralement dans la maquette -------------------------- `position:sticky; top:0; z-index:60; background:var(--header-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)` et son contenu en `display:flex; justify-content:space-between; padding:18px 80px`. Hauteur calculee de la maquette : 42 (bouton) + 2x18 + 1 (filet) = 79 px. ⚠ Tout passe par la feuille de style, et c'est deliberé : ecrire les clefs du constructeur Astra a VIDE la rangee du bureau le 17/08 (logo et menu disparus, sans erreur). `entete_restaurer.php` retire ces clefs si la tentative se represente. */ .site-header { position: sticky; top: 0; z-index: 60; /* Fond a 94 %, comme la maquette : le contenu qui passe dessous reste devine. Le beige est legerement plus soutenu que le creme des pages, pour que le cadre blanc du groupe de metiers RESSORTE dessus. */ background: rgb(244 235 224 / .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgb(22 19 15 / .16); } .site-header .main-header-bar, .site-header .ast-primary-header-bar { background: transparent; border-bottom: 0; } /* Le point qui desalignait tout : Astra borne la rangee de l'en-tete a 1320 px avec des marges automatiques, alors que le contenu des pages part desormais du bord + 80 px. Logo mesure a 313 px, contenu a 393 px. On aligne les deux sur la meme regle. */ .site-header .site-primary-header-wrap, .site-header .ast-builder-grid-row-container { max-width: none; margin-inline: 0; padding-inline: 80px; } .site-header .site-primary-header-wrap .site-branding { padding-block: 18px; } .ast-site-title-wrap .site-title, .ast-site-title-wrap .site-title a, .site-header .site-title a { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: #16130F; } /* 26 px entre deux entrees dans la maquette, donc 13 de chaque cote. */ /* Le logo prend le point corail du titre du hero : c'est la signature du site, et elle a sa place a l'endroit qu'on regarde en premier. ⚠ Cette regle avait deja ete ecrite puis PERDUE en reecrivant ce bloc — le point avait disparu du logo sans que rien ne le signale. Verifie a l'ecran cette fois. */ .site-header .site-title a::after { content: "."; color: #16130F; /* Le logo porte `letter-spacing: .14em`, applique AUSSI apres le dernier caractere. Mais annuler ce seul interlettrage ne suffisait pas : le point restait detache et on lisait « SAMEY . », ce qui ressemble a une faute de frappe. Mesure du 17/08 : la chasse du point vaut 7,79 px pour 6 px d'encre, le reste etant de l'approche vide. On reprend donc l'interlettrage ET cette approche. Le point n'a pas non plus a porter d'interlettrage apres lui : il n'est suivi de rien. */ letter-spacing: 0; margin-left: -.5em; } /* ⚠ Le point est un `::after` : rien n'empeche le navigateur de le renvoyer a la ligne. En 440 px le titre n'a que 133 px de large et le point tombait SEUL sous le mot — vu a l'image le 17/08. Le logo est un bloc indivisible, on le dit. */ .site-header .site-title, .site-header .site-title a { white-space: nowrap; } /* ⚠ TROIS ZONES, PAS UN BLOC CENTRE. La maquette pose le logo a gauche, les liens au milieu, et le bouton Contact seul contre le bord droit : entre « À propos » et le bouton il y a un large vide, alors que les liens gardent 26 px entre eux. Je centrais toute la navigation par des marges automatiques : le bouton s'arretait alors a 298 px du bord (mesure du 17/08, releve par Ronaldo image a l'appui). Le centrage etait le defaut, pas la solution. La navigation reprend donc TOUTE la largeur de sa section, et c'est la marge automatique du seul bouton Contact qui fabrique le vide. Un ecart pose a la main bougerait a chaque changement de libelle ; une marge automatique, jamais. */ .site-header .site-header-primary-section-right { flex: 1 1 auto; justify-content: flex-start; } @media (min-width: 1120px) { .site-header .site-header-primary-section-right .ast-builder-menu-1 { flex: 1 1 auto; margin-inline: 0; } /* Astra empile cinq conteneurs entre la section et la liste, et chacun s'ajuste a son contenu. Tant qu'un seul d'entre eux reste etroit, la marge automatique du bouton n'a aucun espace libre a distribuer et ne pousse rien du tout. */ .ast-builder-menu-1 .ast-main-header-bar-alignment, .ast-builder-menu-1 .main-navigation, .ast-builder-menu-1 .main-header-menu { width: 100%; } .ast-builder-menu-1 .main-navigation { display: flex; } /* Cible par l'adresse et non par `:last-child` : l'ordre du menu se regle dans WordPress, et il a deja change une fois aujourd'hui. */ .main-header-menu > .menu-item:has(> a[href*="/contact"]) { margin-left: auto; } } .main-header-menu > .menu-item > a, .ast-builder-menu-1 .menu-item > a { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 400; color: #6B655C; padding-inline: 13px; transition: color 180ms cubic-bezier(.22, 1, .36, 1); } .main-header-menu > .menu-item > a:hover { color: #16130F; } /* ⚠ LA MAQUETTE N'A AUCUN MARQUAGE D'ENTREE ACTIVE. Verifie dans le template de nav : la boucle produit six boutons strictement identiques, la clef de page est calculee et jamais consommee, il n'y a ni classe conditionnelle, ni filet, ni `aria-current`. Le seul reste est un `padding-bottom: 4px` inutilise. Astra, lui, souligne la page courante : on retire le soulignement, et on garde la couleur d'encre — c'est le minimum d'orientation qu'un vrai site doit a son visiteur, et ca ne se voit que sur une page ou la maquette, elle, ne montrait jamais deux etats a la fois. */ .main-header-menu > .menu-item.current-menu-item > a, .main-header-menu > .menu-item.current-menu-ancestor > a { color: #16130F; text-decoration: none; border-bottom: 0; box-shadow: none; } /* ⚠ IL Y AVAIT ICI une regle qui masquait TOUS les `::before` et `::after` des entrees de menu, avec `!important`, pour neutraliser un soulignement d'Astra. Elle a bloque mes propres pseudo-elements des que je m'en suis servi : les pastilles de rubrique et les numeros du menu mobile ne sortaient pas, sans erreur ni indice — `getComputedStyle` sur le pseudo renvoyait `display: none` alors que le `content` etait correct. Une neutralisation « au cas ou », ecrite large et marquee `!important`, finit toujours par toucher ce qu'on ajoutera plus tard. On ne masque plus que ce qu'Astra pose vraiment, et sans `!important`. */ .main-header-menu > .menu-item > a > .ast-icon, .main-header-menu > .menu-item > a .ast-menu-toggle { display: none; } /* --- LA NAV : les metiers groupes, le reste en second niveau --------------------- Refaite le 17/08 sur le design que Ronaldo a fait produire, apres que ma premiere proposition (des filets colores au survol) ne l'a pas convaincu. L'idee du design, et elle est meilleure : les TROIS METIERS forment un groupe encadre, chacun avec sa pastille de couleur — le turquoise, le soleil et le bleu deviennent des reperes de rubrique, lisibles d'un coup d'oeil. Accueil, Galerie et À propos restent EN DEHORS du cadre, sans point : ce sont des pages de service, pas des metiers. La hierarchie se voit avant meme d'avoir lu les mots. Le groupe se fabrique sans toucher au HTML : `:has()` cible les trois entrees par leur lien, et les bordures se partagent — arrondi a gauche pour la premiere, a droite pour la derniere, aucune entre elles. */ /* Le cadre commun aux trois metiers. */ /* ⚠ ARRONDI MODERE, PAS UNE PILULE. Premier jet a 999 px : les entrees n'ayant pas la hauteur d'une pilule, le cadre sortait en ovales qui debordaient de la barre, et le fond de la page courante ajoutait un second rond par-dessus. Vu a l'image. Le cadre doit se remarquer a peine : c'est un regroupement, pas un bouton. */ /* ⚠ LE CADRE EST PLUS CLAIR QUE LA BARRE, pas plus sombre. Premier jet : un voile d'encre a 4 %, qui creusait un trou gris dans la barre creme. Dans le design de reference, le groupe RESSORT — il est pose sur la barre, pas creuse dedans. */ .main-header-menu > .menu-item:has(> a[href*="/mariages"]), .main-header-menu > .menu-item:has(> a[href*="/anniversaires"]), .main-header-menu > .menu-item:has(> a[href*="/portraits"]) { background: rgb(255 255 255 / .72); border-block: 1px solid rgb(22 19 15 / .08); margin-inline: 0; /* ⚠ `align-self: center` seul ne suffit pas : la rangee etire ses enfants et le cadre prenait TOUTE la hauteur de la barre — 100 px sur 101, mesure le 17/08. Il doit se caler sur la hauteur du texte, sinon ce n'est plus un regroupement, c'est un bloc. */ align-self: center !important; height: auto !important; align-items: center; display: flex !important; } .main-header-menu > .menu-item:has(> a[href*="/mariages"]) > a, .main-header-menu > .menu-item:has(> a[href*="/anniversaires"]) > a, .main-header-menu > .menu-item:has(> a[href*="/portraits"]) > a { line-height: 1; } .main-header-menu > .menu-item:has(> a[href*="/mariages"]) { border-left: 1px solid rgb(22 19 15 / .08); border-radius: 8px 0 0 8px; padding-left: 4px; /* Rien ne precede : une marge ici ne creerait pas un ecart, elle decalerait tout le bloc. Le rythme de la maquette est un `gap: 26px` uniforme, il ne se corrige pas entree par entree. */ margin-left: 0; } .main-header-menu > .menu-item:has(> a[href*="/portraits"]) { border-right: 1px solid rgb(22 19 15 / .08); border-radius: 0 8px 8px 0; padding-right: 4px; /* 13 et non 18 : cette marge s'AJOUTE au `padding-left: 13px` du lien suivant. A 18 on mesurait 31 px entre le bord du cadre et le glyphe « Accueil » la ou la maquette en demande 26 partout (`nav { gap: 26px }`, boutons a padding horizontal nul, l. 95 de Samey.dc.html). Signale par Ronaldo le 17/08 : « the gap, there are not respected ». 13 + 13 = 26. Toute retouche ici doit refaire cette addition. */ margin-right: 13px; } /* La pastille de rubrique, devant le mot. Meme geste que dans le hero : la couleur est portee par un carre de 7 px, jamais par le texte — le soleil sur creme rend 1,51:1 (mesure du 15/08) et ne peut pas porter de mot. */ .main-header-menu > .menu-item > a[href*="/mariages"]::before, .main-header-menu > .menu-item > a[href*="/anniversaires"]::before, .main-header-menu > .menu-item > a[href*="/portraits"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; vertical-align: middle; border-radius: 50%; } .main-header-menu > .menu-item > a[href*="/mariages"]::before { background: #00A9A5; } .main-header-menu > .menu-item > a[href*="/anniversaires"]::before { background: #FFC42E; } .main-header-menu > .menu-item > a[href*="/portraits"]::before { background: #0B6BF2; } /* Les entrees du groupe sont un cran plus lisibles que les pages de service : c'est la hierarchie annoncee, elle doit se voir dans la couleur du texte aussi. */ .main-header-menu > .menu-item:has(> a[href*="/mariages"]) > a, .main-header-menu > .menu-item:has(> a[href*="/anniversaires"]) > a, .main-header-menu > .menu-item:has(> a[href*="/portraits"]) > a { color: #16130F; padding-block: 9px; } /* ⚠ La page courante se signale par le POIDS DU TEXTE, pas par un fond. Un fond rond pose sur une entree deja encadree faisait deux signaux pour une information, et les deux arrondis se superposaient mal. Le design de reference ne met rien d'autre qu'un texte plus appuye. */ .main-header-menu > .menu-item.current-menu-item > a { color: #16130F; font-weight: 700; } /* Le bouton Contact. Dans la maquette, « Contact » n'est pas une entree de plus : c'est un BOUTON corail, sorti de la liste. L'entree existe deja dans le menu WordPress, on la transforme ici plutot que d'ajouter un composant. ⚠ Pourquoi pas l'option d'Astra : `header-main-rt-section = 'button'` n'est lue que si le constructeur est INACTIF (`inc/markup-extras.php` l. 129). L'option a donc ete ecrite, acceptee, et jamais rendue. Une option ecrite n'est pas une option lue. */ .main-header-menu > .menu-item > a[href*="/contact"] { background: #FFFFFF; /* Encre sur corail : 5,53:1. Du creme y rendrait 3,35:1, sous le plancher AA. */ color: #16130F; font-weight: 700; border-radius: 7px; padding: 12px 20px; margin-inline-start: 13px; line-height: 1; transition: background-color 180ms cubic-bezier(.22, 1, .36, 1), color 180ms cubic-bezier(.22, 1, .36, 1); } /* ⚠ Le lien est un enfant flex de son `li`, lui-meme haut de toute la barre : sans `align-self`, il s'ETIRE et le bouton fait 80 px de haut au lieu de 38. Mesure le 17/08 apres que Ronaldo l'a vu — « le bouton contact est enorme ». La hauteur voulue est celle de la maquette : 14 px de ligne + 2x12 de padding. */ .main-header-menu > .menu-item:has(> a[href*="/contact"]) { align-items: center; } .main-header-menu > .menu-item > a[href*="/contact"] { align-self: center; height: auto; line-height: 14px; } .main-header-menu > .menu-item > a[href*="/contact"]:hover, .main-header-menu > .menu-item.current-menu-item > a[href*="/contact"] { background: #16130F; color: #FFF8EE; } .site-header .ast-custom-button:hover { transform: none; box-shadow: none; } @media (max-width: 1080px) { .site-header .site-primary-header-wrap, .site-header .ast-builder-grid-row-container { padding-inline: 40px; } } @media (max-width: 700px) { .site-header .site-primary-header-wrap, .site-header .ast-builder-grid-row-container { padding-inline: 20px; } .ast-site-title-wrap .site-title a { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { .site-header { position: static; } } /* --- 13. Pied : la grille du bloc haut ------------------------------------------- Releve : appel a `flex:0 0 32%`, trois colonnes de liens a `flex:1 1 0` reparties, `gap:64px` entre les deux blocs et 48 px entre les colonnes. */ .samey-pied { display: flex; flex-direction: column; } .samey-pied-haut { display: flex; gap: 64px; align-items: flex-start; justify-content: space-between; } .samey-pied-appel { flex: 0 0 32%; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } .samey-pied-surtitre { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #0FC98F; } .samey-pied-accroche { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.025em; color: #FFF8EE; max-width: 18ch; margin: 0; } .samey-pied-bouton { display: inline-block; background: #FFFFFF; /* Encre sur corail : 5,53:1. Du creme y rendrait 3,35:1, sous le plancher AA. */ color: #16130F !important; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; padding: 17px 26px; border-radius: 7px; text-decoration: none; transition: background-color 180ms cubic-bezier(.22, 1, .36, 1); } .samey-pied-bouton:hover, .samey-pied-bouton:focus-visible { background: #FFF8EE; } .samey-pied-colonnes { flex: 1 1 0; display: flex; gap: 48px; justify-content: space-between; flex-wrap: wrap; } .samey-pied-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .samey-pied-titre { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 248 238 / .5); } .samey-pied-lien, .samey-pied-attente { font-family: 'Poppins', sans-serif; font-size: 15px; color: rgb(255 248 238 / .82); text-decoration: none; } .samey-pied-lien:hover, .samey-pied-lien:focus-visible { color: #FFFFFF; } /* Une coordonnee en attente ne doit pas ressembler a une coordonnee : elle est en retrait et en italique, pour qu'on ne puisse pas la prendre pour un contenu livre. */ .samey-pied-attente { color: rgb(255 248 238 / .45); font-style: italic; font-size: 14px; max-width: 26ch; } /* --- 14. Le nom en filigrane ------------------------------------------------------ Releve : `clamp(64px,15.6vw,240px)`, creme a 9 % d'opacite, colle au bas du bloc. C'est le geste de signature du pied ; purement decoratif, donc `aria-hidden`. */ .samey-pied-signature { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(64px, 15.6vw, 240px); line-height: .82; letter-spacing: -.04em; color: rgb(255 248 238 / .09); margin-top: 56px; text-transform: uppercase; user-select: none; white-space: nowrap; overflow: hidden; } /* --- 15. Le filet corail qui ouvre le pied --------------------------------------- Releve : `border-top:3px solid #FFFFFF`. Trois pixels, et c'est ce qui empeche le pied encre de se lire comme la suite de la derniere section. */ .site-footer, .site-footer .ast-above-footer-wrap { border-top: 3px solid #FFFFFF; } .site-footer .ast-below-footer-wrap { border-top: 0; } @media (max-width: 921px) { .samey-pied-haut { flex-direction: column; gap: 40px; } .samey-pied-appel { flex: 1 1 auto; width: 100%; } .samey-pied-colonnes { gap: 32px; } .samey-pied-signature { margin-top: 36px; } } /* --- 16. Le menu mobile : overlay plein ecran ------------------------------------ Releve : `position:fixed; inset:0; z-index:80; background:var(--bg-deep); padding:20px 20px 40px`, entrees en Poppins 800 / 34 px, monte et demonte sans transition. Astra sert par defaut un panneau qui pousse le contenu. ⚠ LA CLASSE D'OUVERTURE EST SUR LE ``, PAS SUR LE CONTENEUR. Astra pose `ast-main-header-nav-open` sur le body ; je visais `.toggle-on` sur le panneau, un selecteur qui ne correspondait JAMAIS. Resultat signale par Ronaldo le 17/08 : le menu s'ouvrait sans overlay, les entrees en Poppins 34 px se posaient par-dessus le contenu de la page, illisibles. Le CSS etait ecrit et n'avait aucun effet — et je n'avais jamais regarde ce rendu, ce que j'avais signale trois fois sans le corriger. ⚠ Seuil de bascule : la maquette bascule a 1080 px, le site a 1119 — le palier MESURE le 03/08 pour ce menu-ci, et confirme le 17/08 (les sept entrees plus le logo demandent 1 014 px, donc aucun des deux seuils ne cree de zone morte). */ @media (max-width: 1119px) { /* ⚠ `inset: 0` ne suffit pas : Astra contraint la hauteur de ce panneau (mesure le 17/08 — 439 x 136 au lieu de 454 x 958). On impose les deux dimensions en unites de fenetre, et on neutralise la hauteur maximale qu'il pose. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-bar-navigation { position: fixed !important; inset: 0 !important; width: 100vw !important; /* ⚠ On RETRANCHE la barre d'administration. L'overlay est `position: fixed`, mais `.site-header` porte `backdrop-filter: blur(8px)` et devient de ce fait son bloc conteneur : il herite donc du decalage de 46 px de la barre, et une hauteur de 100dvh le faisait finir 46 px sous l'ecran — le bouton Contact, colle en bas, s'y retrouvait rogne de 6 px. Invisible pour un visiteur, bien reel en session connectee, c'est-a-dire pendant tout le travail. WordPress publie la valeur ; le repli a 0 couvre le visiteur, chez qui la variable n'existe pas. */ height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)) !important; height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)) !important; max-height: none !important; z-index: 80; background: #16130F; padding: 96px 20px 40px; overflow-y: auto; display: flex !important; flex-direction: column; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu { background: transparent; display: flex; flex-direction: column; gap: 0; /* Le compteur qui numerote les entrees. Il repart a zero a chaque ouverture. */ counter-reset: samey-nav; /* Le filet qui ferme la barre du haut : dans la maquette, la liste commence sous un trait pleine largeur, et non dans le vide. */ border-top: 1px solid rgb(255 248 238 / .12); } /* ⚠ Astra peint un fond clair sur chaque entree du menu mobile. Sur l'overlay encre, le texte creme se retrouvait creme sur creme — invisible, alors que la mesure de contraste disait 17,56:1 parce qu'elle comparait au fond de l'OVERLAY et non a celui de l'entree. Regle 9 : mesurer l'effet au bon endroit. Vu a l'image. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu, body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item, body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a { background: transparent !important; background-color: transparent !important; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item { border: 0; border-bottom: 1px solid rgb(255 248 238 / .12); width: 100%; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item:last-child { border-bottom: 0; } /* ⚠ `!important` sur la COULEUR, et c'est vital : les regles de la nav de bureau (gris au repos, encre au survol et sur la page courante) s'appliquent aussi ici. Mesure le 17/08 sur l'overlay encre — « Mariages » sortait en encre sur encre, soit 1,00:1. Le menu etait litteralement invisible. */ /* ⚠ Les entrees sont NUMEROTEES (01 a 06), comme dans le design. Le numero est un `::before` alimente par un compteur CSS : aucun texte a ecrire dans le menu WordPress, et l'ordre suit celui du menu meme si Ronaldo le reorganise plus tard. Le bouton Contact est exclu du comptage : c'est une action, pas une rubrique. */ /* ⚠ Le cadre groupe des metiers est un motif de BUREAU. En plein ecran il n'a plus de sens — vu a l'image : « Mariages » et « Portraits & famille » gardaient leur fond arrondi et leur decalage au milieu d'une liste. On le neutralise ici. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item { background: transparent !important; border-inline: 0 !important; border-radius: 0 !important; padding-inline: 0 !important; margin-inline: 0 !important; } /* ⚠ `!important` sur le `content` : la pastille de rubrique occupe DEJA le `::before` de ces liens, et un element n'en a qu'un. Sans cette priorite, le numero ne sort jamais — c'est ce qui se voyait a l'ecran, les entrees decalees mais sans chiffre. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item:not(:has(> a[href*="/contact"])) > a::before { counter-increment: samey-nav; content: counter(samey-nav, decimal-leading-zero) !important; background: none !important; width: 46px !important; height: auto !important; border-radius: 0 !important; margin-right: 0 !important; display: inline-block; width: 46px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; /* ⚠ Le numero est ETEINT par defaut. C'est lui, et lui seul, qui signale la page courante en s'allumant en corail : la maquette mobile du 17/08 montre « 01 » en corail et « 02 » a « 06 » en gris. Tous coraux, le reperage ne veut plus rien dire — c'etait le cas ici. 0,48 et non 0,42 : mesure sur le fond REEL de l'overlay, rgb(22,19,15). A 0,42 le numero rendait 3,95:1, sous le seuil de 4,5. A 13 px gras il ne compte pas comme grand texte (il faudrait 18,66 px), donc c'etait un echec franc. 0,48 donne 4,79:1. Ne pas redescendre pour « assourdir » : le repere doit rester lisible. */ color: rgb(255 248 238 / .48); vertical-align: middle; } /* ⚠ Le `:not(:has(...))` est recopie ici EXPRES. Sans lui la regle ne pesait que (0,5,3) contre (0,5,4) pour celle du compteur juste au-dessus, et le numero de la page courante restait eteint — aucune erreur, aucun avertissement, juste un allumage qui ne se produit pas. Toute retouche du selecteur du compteur doit etre reportee ici, sinon ce marquage se rendort en silence. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item.current-menu-item:not(:has(> a[href*="/contact"])) > a::before, body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item.current_page_item:not(:has(> a[href*="/contact"])) > a::before { color: #FFFFFF; } /* ⚠ Et le trait sous la page courante saute. Il ne vient pas d'ici mais de la nav de BUREAU, qui pose `text-decoration-color: corail` sur `.current-menu-item` : la decoration se propage de l'element de liste vers le lien ET vers son `::before`, d'ou un trait courant sous le numero et le mot. La maquette mobile n'en a aucun. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item, body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a { text-decoration: none !important; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a { font-family: 'Poppins', sans-serif; font-weight: 800; /* ⚠ 34 px fixes cassaient « Portraits & famille » sur DEUX lignes en 440 px, et une entree deux fois plus haute que les autres detruit le rythme regulier qui fait tout ce menu. Mesure du 17/08 : ce libelle de 19 signes demande 472 px a 34, pour 354 px offerts — il ne tient qu'a 24 px, soit 5,4 % de la largeur. D'ou cette taille fluide, qui plafonne a 34 des que l'ecran le permet (630 px et au-dela). Le plancher de 21 px evite l'illisible sur les tres petits telephones. */ font-size: clamp(21px, 5.4vw, 34px); line-height: 1.15; letter-spacing: -.02em; color: #FFF8EE !important; padding: 18px 0; text-align: left; border: 0; display: flex; align-items: baseline; } /* Les filets colores n'ont pas de sens sur un menu plein ecran : ils y seraient des traits perdus sous des mots de 34 px. On les coupe et on garde la couleur. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a::after { display: none; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a[href*="/mariages"]:hover { color: #00A9A5 !important; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a[href*="/anniversaires"]:hover { color: #FFC42E !important; } body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a[href*="/portraits"]:hover { color: #0B6BF2 !important; } /* Le bouton Contact reste un bouton, pleine largeur, en bas de liste. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item > a[href*="/contact"] { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; background: #FFFFFF !important; color: #16130F !important; /* `display: flex` a ete pose sur toutes les entrees pour aligner le numero sur la ligne de base ; il faut donc recentrer le bouton explicitement, `text-align` ne suffit plus. */ justify-content: center; text-align: center; padding: 20px; margin: 0; border-radius: 7px; } /* ⚠ Le bouton se COLLE EN BAS DE L'ECRAN, il ne suit pas la liste. C'est le geste de la maquette mobile : les rubriques en haut, l'action seule en bas, separees par du vide. La marge automatique va sur l'ELEMENT DE LISTE et non sur le lien : c'est lui l'enfant du conteneur flex, une marge posee sur le lien ne pousserait rien. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu > .menu-item:has(> a[href*="/contact"]) { margin-top: auto !important; padding-top: 32px; border-bottom: 0; } /* Et pour qu'une marge automatique ait de l'espace a distribuer, encore faut-il que la liste occupe toute la hauteur offerte par l'overlay. Sans cela elle s'arrete au bas du dernier mot, `auto` vaut zero, et le bouton ne bouge pas d'un pixel — c'est exactement ce que la capture montrait, le vide sous le bouton au lieu d'au-dessus. ⚠ Et c'est `min-height`, pas `flex`. Astra intercale `.main-navigation` en `display: block` entre le conteneur flex et la liste : une propriete `flex` posee sur la liste ne s'adresse alors a aucun conteneur flex et ne fait rien du tout. `min-height` plutot que `height` : si le menu s'allonge un jour, il deborde et defile au lieu d'etre coupe. */ body.ast-main-header-nav-open .ast-mobile-header-wrap .main-header-menu { min-height: 100%; } /* ⚠ Le bouton d'ouverture doit rester AU-DESSUS de l'overlay, sinon le menu est impossible a refermer. Piege paye le 03/08 sur ce meme site : le voile passait devant le bouton. L'overlay est a 80, le bouton monte a 90. */ /* ⚠ Le bouton porte un LIBELLE, pas seulement trois traits : « MENU » a la fermeture, « FERMER » a l'ouverture. Un burger nu se reconnait par convention ; un mot se lit. Le libelle est pose en `::after` — le pictogramme d'Astra reste devant lui. */ .ast-mobile-header-wrap .menu-toggle { position: relative; z-index: 90 !important; display: inline-flex !important; align-items: center; gap: 10px; border: 1px solid rgb(22 19 15 / .22) !important; border-radius: 7px; padding: 11px 16px !important; background: transparent !important; } .ast-mobile-header-wrap .menu-toggle::after { content: "MENU"; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .16em; } body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle::after { content: "FERMER"; } body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle { border-color: rgb(255 248 238 / .3) !important; color: #FFF8EE !important; } .ast-mobile-header-wrap .ast-button-wrap { position: relative; z-index: 90 !important; } /* ⚠ LE PIEGE DES CONTEXTES D'EMPILEMENT, diagnostique le 17/08 apres trois essais rates. Le bouton avait bien `z-index: 100`, et l'overlay seulement 80 — pourtant `elementFromPoint` renvoyait l'overlay a chaque fois. La raison : le bouton est enferme dans `.ast-primary-header-bar`, qui porte `z-index: 4` et cree donc son PROPRE contexte d'empilement. A l'interieur, 100 ne se compare qu'aux freres du bouton ; vu de l'exterieur, tout ce conteneur vaut 4. Et 4 < 80. Un z-index eleve dans un contexte bas ne sert a rien. On remonte donc LE CONTENEUR, pas seulement le bouton. Sans ca, un menu ouvert ne se referme plus : c'est exactement le piege paye le 03/08 sur ce meme site, ou le voile passait devant le bouton. */ body.ast-main-header-nav-open .ast-primary-header-bar { z-index: 100 !important; } body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle { position: fixed !important; top: 14px; right: 20px; z-index: 100 !important; background: transparent; } body.ast-main-header-nav-open .site-header { position: relative; z-index: 90; } body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle, body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle svg { color: #FFF8EE; fill: #FFF8EE; } /* Le logo reste visible et lisible par-dessus l'overlay. */ body.ast-main-header-nav-open .site-header .site-title a { color: #FFF8EE; } body.ast-main-header-nav-open .site-header { background: #16130F; } } /* --- 17. Le hero scinde ---------------------------------------------------------- Releve : `display:flex; align-items:stretch; min-height:min(62vh,640px)`, gauche `flex:0 0 46%` + `padding:56px`, droite `flex:1 1 54%; min-height:420px`. Il n'a AUCUN padding lateral : l'aplat et la photo touchent les bords. */ .e-con.samey-hero-scinde > .e-con-inner { padding-inline: 0; max-width: none; } .e-con.samey-hero-rangee { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; min-height: min(62vh, 640px); gap: 0; padding: 0; } /* ⚠ `flex-basis` seul ne suffit pas : Elementor pose `width:100%` sur ses conteneurs enfants, et la largeur gagne sur la base. Mesure le 17/08 : 52/48 rendu au lieu de 46/54 demande. On fixe les trois proprietes ensemble. */ .e-con.samey-hero-texte { flex: 0 0 46% !important; width: 46% !important; max-width: 46%; justify-content: center; padding: 56px 56px 56px 80px !important; } /* ⚠ Et c'est l'IMAGE qui dictait la hauteur : 917 px au lieu des 640 de la maquette. Une photo portrait de 683x1024 posee dans une colonne de 920 px reclame 1 379 px de haut, et le `min-height` de la rangee ne peut que suivre. La parade est de sortir l'image du calcul : le cadre se positionne, l'image s'y absolute. La rangee reprend alors sa hauteur du TEXTE, borne par `min-height`, comme dans la maquette. */ .e-con.samey-hero-photo { flex: 1 1 54% !important; width: 54% !important; position: relative; min-height: 420px; padding: 0 !important; overflow: hidden; } .samey-hero-photo .elementor-widget-image { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; } .samey-hero-photo .elementor-widget-container, .samey-hero-photo figure { height: 100%; margin: 0; } .samey-hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; } /* L'eyebrow : numero, filet de 56x2 px, puis le nom du metier. */ .samey-eyebrow-num, .samey-eyebrow-nom { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; vertical-align: middle; } .samey-eyebrow-filet { display: inline-block; width: 56px; height: 2px; margin: 0 16px; background: currentColor; vertical-align: middle; opacity: .55; } /* Le h1 du hero est borne a 14ch dans la maquette : c'est ce qui lui donne ses trois lignes courtes au lieu d'une bande de texte. */ .samey-max-14ch .elementor-heading-title { max-width: 14ch; } @media (max-width: 1080px) { .e-con.samey-hero-rangee { flex-direction: column !important; min-height: 0; } .e-con.samey-hero-texte { flex: 1 1 auto !important; width: 100% !important; max-width: none; padding: 48px 40px !important; } .e-con.samey-hero-photo { flex: 1 1 auto !important; width: 100% !important; position: relative; min-height: 340px; } } @media (max-width: 700px) { .e-con.samey-hero-texte { padding: 40px 20px !important; } .e-con.samey-hero-photo { min-height: 260px; } } /* --- 18. L'intro editoriale ------------------------------------------------------ Releve : `gap:64px; align-items:flex-start`, titre a 36 %, corps a 58 % avec `border-left:1px solid var(--line); padding-left:40px`. Le filet fait la moitie du travail : il transforme deux colonnes en une mise en exergue. */ .e-con.samey-intro { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 64px; } .e-con.samey-intro-titre { flex: 0 0 36% !important; width: 36% !important; } .e-con.samey-intro-corps { flex: 1 1 58% !important; width: 58% !important; border-left: 1px solid rgb(22 19 15 / .16); padding-left: 40px !important; } .samey-intro-corps .elementor-widget-text-editor { max-width: 58ch; } @media (max-width: 1080px) { .e-con.samey-intro { flex-direction: column !important; gap: 26px; } .e-con.samey-intro-titre, .e-con.samey-intro-corps { flex: 1 1 auto !important; width: 100% !important; } .e-con.samey-intro-corps { border-left: 0; padding-left: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ LE COMPOSANT CARTE — un seul motif, une seule feuille ═══════════════════════════════════════════════════════════════════════════════ Demande par Ronaldo le 17/08 (« make a component card and reuse it to make everything uniform »), et prescrit par `cervelet/procedures/construire-un-site-elementor.md` : tout motif repete devient un composant, modifie en un seul endroit. Il remplace CINQ jeux de regles qui disaient presque la meme chose — les colonnes metier, le deroule, les points de methode, les lignes metier, chacun avec ses propres marges, sa propre taille de titre et sa propre facon de poser l'accent. C'est cet ecart-la qui se voyait, plus que chaque motif pris isolement. L'accent voyage par `--samey-accent`, pose sur la section : la carte ne connait pas sa couleur, elle connait sa VARIANTE de filet. */ .e-con.samey-carte { gap: 12px !important; padding: 0 !important; /* ⚠ C'est LA CARTE qui se borne, pas l'image — precision de Ronaldo le 17/08 (« not the image, the component »). L'image reprend donc 100 % de sa carte, et c'est le bloc entier, texte compris, qui retrecit. Retrecir l'image seule laissait le texte courir sur toute la colonne : deux largeurs pour un meme bloc. 380 px dans une colonne de 560 : la photo devient franchement portrait (380 x 460), ce qui va aux visages, et le texte tient sur des lignes courtes. */ max-width: 380px; } /* Les widgets d'Elementor portent leur propre marge basse, qui s'ajoute au gap. */ .samey-carte .elementor-widget { margin-bottom: 0; } .samey-carte .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* Le repere numerique : present, jamais bruyant. */ .samey-carte .elementor-widget-text-editor:first-of-type { opacity: .55; } .samey-carte--media .elementor-widget-image + .elementor-widget-text-editor { opacity: .55; } /* --- Les images de carte : une hauteur FIXE, identique partout ------------------ `max-height` est un plafond, pas une consigne : une photo dont la proportion demandait moins restait plus courte (mesure le 17/08 : 380, 373, 380 pour trois cartes censees etre egales). Une hauteur fixe avec `object-fit` garantit l'egalite quelle que soit la proportion du fichier d'origine. */ .samey-carte--media .elementor-widget-image img { /* 460 px. La valeur a monte trois fois le 17/08 — 300, puis 380, puis 460 — et le point n'a jamais ete la taille : c'etait l'INEGALITE. A 380 px inegaux la section paraissait lourde, a 380 px egaux elle tenait, a 460 px egaux elle tient encore. C'est UNE valeur, dans UN endroit : depuis que tout passe par le composant, la changer touche l'accueil, les trois pages metier et Contact d'un seul geste. */ height: 460px; max-height: 460px; width: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 4px; } /* Le widget garde sa pleine largeur : c'est l'IMAGE qui retrecit, pas son emplacement. Sans ca, le filet d'accent pose en `::after` suivrait le widget et se decalerait. */ .samey-carte--media .elementor-widget-image, .samey-carte--media .elementor-widget-image .elementor-widget-container, .samey-carte--media .elementor-widget-image figure { width: 100%; text-align: left; } /* --- Les trois places du filet d'accent ---------------------------------------- */ .e-con.samey-carte--filet-haut { border-top: 2px solid var(--samey-accent, #16130F); padding-top: 22px !important; } .e-con.samey-carte--filet-gauche { border-left: 2px solid var(--samey-accent, #16130F); padding: 18px 0 18px 20px !important; } /* Sous l'image : un trait court, pose entre la photo et le texte. Variante des cartes de l'accueil, ou le filet ne peut pas coiffer la carte puisque l'image est en haut. */ .samey-carte--filet-sous-media .elementor-widget-image { margin-bottom: 16px; position: relative; } .samey-carte--filet-sous-media .elementor-widget-image::after { content: ""; position: absolute; left: 0; bottom: -16px; width: 48px; height: 3px; background: var(--samey-accent, #16130F); } .samey-carte--sombre.samey-carte--filet-haut { border-top-color: var(--samey-accent, #0FC98F); } /* --- La rangee : centree, resserree --------------------------------------------- Demande de Ronaldo le 17/08 : « center them and reduce the gap between them ». Le probleme venait des COLONNES, pas des cartes. Chaque colonne faisait un tiers de la rangee, soit 560 px, pour une carte bornee a 380 : la carte se calait a gauche de sa colonne et l'espace perdu — 212 px — apparaissait entre les cartes. Reduire la carte creusait donc l'ecart au lieu de le combler. La parade est de rendre aux colonnes la largeur de leur contenu (`width: auto`) et de centrer la rangee. L'ecart devient alors le `gap` reel, et il est maitrise. */ .e-con.samey-rangee-cartes { justify-content: center; flex-wrap: wrap; gap: 56px !important; } .samey-rangee-cartes > .e-con { width: auto !important; flex: 0 0 auto !important; max-width: 380px; } @media (max-width: 1080px) { .e-con.samey-rangee-cartes { gap: 32px !important; } } /* --- Le decalage vertical d'une rangee ------------------------------------------ ⚠ `!important` obligatoire : Elementor pose sa propre marge sur `.e-con` avec une specificite qui bat une regle de theme. Mesure le 17/08, les classes etaient bien posees et `marginTop` rendait `0px`. */ .e-con.samey-carte-rang1 { margin-top: 40px !important; } .e-con.samey-carte-rang2 { margin-top: 84px !important; } @media (max-width: 1080px) { .e-con.samey-carte-rang1, .e-con.samey-carte-rang2 { margin-top: 0 !important; } .samey-carte--media .elementor-widget-image img { height: 360px; max-height: 360px; } } /* --- 20. La table des formules --------------------------------------------------- Releve : grille `1.5fr 2.9fr 1.1fr 1.8fr .9fr` (5 colonnes, Mariages) ou `1.5fr 2.9fr 2.1fr .9fr` (4 colonnes), `gap:28px`, chaque ligne `border-left:4px solid` la couleur du metier, `padding-left:24px`, `padding:28px 0`. ⚠ Onze prix, neuf durees, neuf volumes et dix delais ont ete inventes par la maquette. Ce qui reste ici, c'est le NOM de la formule et sa description. */ .e-con.samey-tarifs { gap: 0 !important; padding: 0 !important; } .e-con.samey-tarif-ligne { display: grid !important; gap: 28px; align-items: start; padding: 28px 0 28px 24px !important; border-left: 4px solid var(--samey-accent, #FFFFFF); border-bottom: 1px solid rgb(22 19 15 / .16); } .samey-tarifs-5 .samey-tarif-ligne { grid-template-columns: 1.5fr 2.9fr 1.1fr 1.8fr .9fr; } .samey-tarifs-4 .samey-tarif-ligne { grid-template-columns: 1.5fr 2.9fr 2.1fr .9fr; } /* La ligne d'en-tete ne porte pas l'accent : elle nomme les colonnes, elle n'est pas une offre. */ .e-con.samey-tarif-entete { border-left-color: transparent; border-bottom-color: rgb(22 19 15 / .16); padding-top: 0 !important; padding-bottom: 14px !important; } .samey-tarif-entete .elementor-widget-text-editor { text-transform: uppercase; letter-spacing: .16em; font-weight: 500; } /* Hierarchie des colonnes, relevee ligne par ligne dans la maquette. Sans elle, les cinq colonnes sortent au meme corps et le tableau ne se lit plus : c'est ce que Ronaldo a vu le 17/08 en comparant avec la maquette. */ .samey-tarif-ligne .samey-tc0 .elementor-heading-title { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.1; color: #16130F; } /* Le tarif ferme la ligne : aligne a droite, plus gros, plus gras. */ .samey-tarif-ligne .samey-tc-fin { text-align: right; } .samey-tarif-ligne .samey-tc-fin .elementor-widget-text-editor { text-align: right; } /* Les cellules ne portent aucune marge propre : le `padding: 28px 0` de la ligne suffit, et c'est lui qui donne au tableau son pas regulier. */ .samey-tarif-ligne .e-con { padding: 0 !important; } .samey-tarif-ligne .elementor-widget { margin-bottom: 0; } .samey-tarif-ligne .elementor-widget-text-editor p:last-child { margin-bottom: 0; } @media (max-width: 1080px) { .e-con.samey-tarif-ligne { grid-template-columns: 1fr 1fr !important; gap: 14px; } .e-con.samey-tarif-entete { display: none !important; } } @media (max-width: 700px) { .e-con.samey-tarif-ligne { grid-template-columns: 1fr !important; } } /* --- 21. La mosaique a rangs ----------------------------------------------------- Releve : `grid-template-columns:repeat(12,1fr); grid-auto-rows:110px; gap:24px; grid-auto-flow:dense`, chaque case portant un span de COLONNES et un span de RANGS. C'est le span de rangs qui manquait a `.samey-grille` : sans lui, toutes les cases d'une meme rangee ont la meme hauteur et la mosaique redevient un damier. */ .e-con.samey-mosaique { display: grid !important; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 110px; grid-auto-flow: dense; gap: 24px; align-items: stretch; } .samey-m3 { grid-column: span 3; } .samey-m4 { grid-column: span 4; } .samey-m5 { grid-column: span 5; } .samey-m6 { grid-column: span 6; } .samey-m7 { grid-column: span 7; } .samey-m8 { grid-column: span 8; } .samey-m12 { grid-column: span 12; } /* ⚠ TOUS les spans de rangs doivent exister, pas seulement ceux qu'on utilisait le jour ou on a ecrit la regle. Le 17/08, en ramenant les rangs d'un cran (6->5, 4->3), les cases passees a 3 se sont retrouvees SANS classe correspondante : `grid-row` est revenu a `span 1`, soit 88 px de haut au lieu de 312, et la mosaique s'est ecrasee. Aucune erreur, aucun avertissement — une classe absente est simplement ignoree. */ .samey-r2 { grid-row: span 2; } .samey-r3 { grid-row: span 3; } .samey-r4 { grid-row: span 4; } .samey-r5 { grid-row: span 5; } .samey-r6 { grid-row: span 6; } /* Dans une case a hauteur imposee, l'image remplit et se recadre. */ .samey-mosaique > .e-con .elementor-widget-image, .samey-mosaique > .e-con .elementor-widget-image .elementor-widget-container, .samey-mosaique > .e-con figure { height: 100%; margin: 0; } .samey-mosaique > .e-con img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; } .samey-mosaique .elementor-widget-text-editor { text-transform: uppercase; letter-spacing: .12em; flex: 0 0 auto; } @media (max-width: 1080px) { .e-con.samey-mosaique { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 86px; gap: 18px; } .samey-m12 { grid-column: span 6; } .samey-m7, .samey-m8 { grid-column: span 4; } .samey-m5, .samey-m6 { grid-column: span 3; } .samey-m3, .samey-m4 { grid-column: span 2; } } @media (max-width: 700px) { .e-con.samey-mosaique { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; } .samey-mosaique > .e-con { grid-column: span 1 !important; grid-row: auto !important; } .samey-mosaique > .e-con img { aspect-ratio: 4 / 5; height: auto; } } /* --- 22. La liste de coordonnees ------------------------------------------------- Releve : chaque ligne `padding:16px 0; justify-content:space-between; gap:20px`, filet en haut et en bas, valeur bornee a `26ch` et alignee a droite. */ .e-con.samey-definitions { gap: 0 !important; border-top: 1px solid rgb(22 19 15 / .16); } .e-con.samey-def-ligne { flex-direction: row !important; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0 !important; border-bottom: 1px solid rgb(22 19 15 / .16); } .e-con.samey-def-valeur { max-width: 26ch; text-align: right; flex: 0 1 auto !important; width: auto !important; } /* --- 23. Le bandeau image final -------------------------------------------------- Releve : `aspect-ratio:24/9; min-height:340px`, bord a bord, sans arrondi. */ .e-con.samey-bandeau-final > .e-con-inner { padding-inline: 0; max-width: none; } .samey-bandeau-final img { width: 100%; min-height: 340px; /* ⚠ PAS d'`aspect-ratio` en dur ici. Le bandeau sert desormais DEUX usages — la cloture de Contact (24:9, tres etale) et l'ouverture d'À propos (16:9, plus haut) — et le ratio vient du generateur, par la classe `samey-ratio-*`. Le figer ici ecrasait le second : le 16:9 demande sortait en 24:9. La seule contrainte commune est de ne pas manger plus d'un demi-ecran. */ max-height: 520px; object-fit: cover; border-radius: 0; display: block; } /* --- 24. Le bleu est le seul aplat qui reclame du BLANC -------------------------- `style.css` l. 580 pose l'encre sur les cinq aplats colores. C'est juste pour quatre d'entre eux, et faux pour le bleu : mesure le 17/08 sur le bouton de la page Portraits, l'encre sur `#0B6BF2` rend **3,88:1**, sous le plancher AA de 4,5. Le blanc pur y rend **4,77:1**, et c'est deja pour cette raison que le h1 du hero bleu est en blanc quand les deux autres sont a l'encre. La regle generale n'etait donc pas fausse, elle etait trop large — quatre aplats sur cinq. On corrige le cinquieme, on ne refait pas les quatre. */ .samey-fond-bleu .elementor-widget-button .elementor-button { color: #FFFFFF !important; border-color: #FFFFFF !important; } .samey-fond-bleu .elementor-widget-button .elementor-button:hover, .samey-fond-bleu .elementor-widget-button .elementor-button:focus-visible { background-color: #FFFFFF !important; color: #0B6BF2 !important; } /* --- 25. La photo d'une section a image unique se BORNE en hauteur --------------- Releve le 17/08 apres que Ronaldo a trouve ces photos trop grandes. Sur les sept ecrans de la maquette, un seul cadre porte des bornes, et c'est precisement celui-la : aspect-ratio: 4 / 5; min-height: 360px; max-height: 560px Sans le `max-height`, la proportion 4:5 laisse la LARGEUR de colonne decider de la hauteur : mesure chez nous, 768 x 960 px pour un texte en face de 318 px, soit une section de 1 243 px — 1,38 ecran pour trois lignes de discours. La maquette tient la meme section en 815 px. Le rapport photo/texte passe de 3:1 a 1,8:1. La proportion reste 4:5 : c'est la hauteur qui est plafonnee, et l'image se recadre. */ .samey-photo-bornee img, .samey-photo-bornee-440 img { aspect-ratio: 4 / 5; min-height: 360px; width: 100%; object-fit: cover; } .samey-photo-bornee img { max-height: 560px; } /* Variante plus basse, pour une section dont le discours est trop court pour tenir la comparaison. « Rester au bord du cadre » ne porte que trois lignes et deux boutons : 318 px de texte face a 560 px de photo laissaient 240 px de vide sous les boutons. A 440, et avec le texte centre verticalement, les deux colonnes se repondent. */ .samey-photo-bornee-440 img { max-height: 440px; min-height: 320px; } /* --- 26. La rosace de tirages ---------------------------------------------------- Quatrieme etat, et le bon : Ronaldo a montre son inspiration le 17/08 — une ROSACE, des lames disposees en moulin autour d'un centre. La difference avec mes trois jets precedents tient en une ligne : ici chaque tirage est oriente RADIALEMENT. Sa rotation EGALE son angle de position, donc il pointe vers l'exterieur comme un rayon de roue. Avant, les tirages gardaient une inclinaison propre et decrivaient une trajectoire — ce qui donne un tas qui derive, pas une rosace qui tourne. Consequence heureuse : plus besoin de contre-rotation ni de trajectoire animee. Le conteneur tourne, les tirages tournent avec lui, et c'est exactement l'effet voulu. Le motif se declare en six positions et une seule animation. Geometrie : six tirages a 60°, rayon 20 %, largeur 26 % (donc 34,7 % de haut en 3:4). Le bord interieur de chaque tirage frole le centre, l'exterieur atteint 87 % du cadre. ⚠ Rotation et deplacement passent par `rotate` et `translate`, JAMAIS par `transform` : les classes d'animation du theme posent `transform: none`. Regle dure 4, payee le 03/08 sur ce site. */ .e-con.samey-cercle { position: relative; display: block !important; /* Le cadre etait plafonne a 520 px dans une colonne qui en fait 768 : 248 px inutilises, et c'etait LUI qui bridait la taille des tirages, pas leur pourcentage. Porte a 660 px le 17/08 sur demande de Ronaldo. */ width: min(100%, 660px); aspect-ratio: 1; margin-inline: auto; padding: 0 !important; animation: samey-rosace 52s linear infinite; } .samey-cercle > .elementor-widget-image { position: absolute; /* 36 % d'un cadre de 660, soit 238 x 317 px — contre 144 x 192 au premier jet. La limite est CALCULEE, pas choisie : en rosace c'est la demi-hauteur qui pointe vers l'exterieur, donc l'extremite atteint `rayon + hauteur/2` = 290 px pour un demi-cadre de 330. Il reste 40 px de marge. A 38 % elle tomberait a 31, a 42 % le tirage sortirait du cadre. */ width: 36%; margin: 0; translate: -50% -50%; filter: drop-shadow(0 10px 20px rgb(0 0 0 / .42)); transition: scale 260ms cubic-bezier(.22, 1, .36, 1); } .samey-cercle > .elementor-widget-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; /* Le lisere clair separe deux lames voisines. Sans lui, la rosace devient une tache. */ outline: 3px solid rgb(255 248 238 / .92); outline-offset: -1px; } .samey-cercle > .elementor-widget-image:nth-child(1) { left: 50.00%; top: 30.00%; rotate: 0deg; } .samey-cercle > .elementor-widget-image:nth-child(2) { left: 67.32%; top: 40.00%; rotate: 60deg; } .samey-cercle > .elementor-widget-image:nth-child(3) { left: 67.32%; top: 60.00%; rotate: 120deg; } .samey-cercle > .elementor-widget-image:nth-child(4) { left: 50.00%; top: 70.00%; rotate: 180deg; } .samey-cercle > .elementor-widget-image:nth-child(5) { left: 32.68%; top: 60.00%; rotate: 240deg; } .samey-cercle > .elementor-widget-image:nth-child(6) { left: 32.68%; top: 40.00%; rotate: 300deg; } @keyframes samey-rosace { to { rotate: 360deg; } } /* Au survol, la rosace s'arrete et la lame visee avance : on peut regarder une photo sans la poursuivre. On ne la REDRESSE pas — ce serait casser le motif. */ .e-con.samey-cercle:hover { animation-play-state: paused; } .samey-cercle > .elementor-widget-image:hover { z-index: 9; scale: 1.1; filter: drop-shadow(0 18px 32px rgb(0 0 0 / .55)); } .samey-cercle + .elementor-widget-text-editor { position: relative; z-index: 10; margin-top: 14px; } /* --- 26 bis. Les points de methode, sous le discours ------------------------------ Trois facons de travailler, chacune derriere un filet menthe. Le texte est celui de l'ANCIEN site, repris verbatim de l'inventaire du 15/08 : il n'y a rien d'invente ici, et c'est la seule maniere honnete d'ajouter du texte sur le site d'un tiers. */ .e-con.samey-points { gap: 0 !important; padding: 0 !important; } .e-con.samey-point-methode { padding: 18px 0 18px 20px !important; border-left: 2px solid #0FC98F; gap: 6px !important; } .samey-point-methode .elementor-widget { margin-bottom: 0; } .samey-point-methode .elementor-widget-text-editor p:last-child { margin-bottom: 0; } @media (max-width: 1080px) { .e-con.samey-cercle { width: min(100%, 420px); } } /* Le mouvement se coupe, la rosace reste : les positions et les orientations sont posees sur les elements, pas dans les keyframes. */ @media (prefers-reduced-motion: reduce) { .e-con.samey-cercle { animation: none; } } /* --- 27. Le curseur : un VISEUR ------------------------------------------------- Refait le 17/08 apres le verdict de Ronaldo sur le premier jet. Un point suivi d'un anneau, c'est le curseur de tous les portfolios depuis dix ans, et le double lisere qu'il fallait pour le rendre visible partout le rendait lourd. Ici : quatre equerres formant une zone de mise au point, et un point de visee au centre. Sur le site d'un photographe, le viseur dit le metier et se reconnait tout de suite. Il est aussi plus LEGER — quatre traits de 1,5 px au lieu d'un disque et d'un anneau pleins. ⚠ VISIBILITE SUR TOUS LES FONDS. Le probleme mesure hier tient toujours : un curseur d'une seule couleur disparait sur trois des sept aplats du site (corail 1,00:1, turquoise 1,15, bleu 1,43). La parade n'est plus un second lisere mais une OMBRE PORTEE floue : elle detache les traits clairs de n'importe quel fond sans doubler le dessin. Le trait reste net, le fond reste lisible. ⚠ REGLE DURE 5 : le curseur natif n'est masque que sous `.samey-curseur-on`, classe posee par le script lui-meme. S'il ne tourne pas, la souris reste visible. */ .samey-curseur-on, .samey-curseur-on a, .samey-curseur-on button, .samey-curseur-on .elementor-button, .samey-curseur-on [role="button"] { cursor: none; } .samey-curseur-point, .samey-curseur-cadre { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; /* L'ombre remplace le double lisere : elle detache le trait de tout fond. */ filter: drop-shadow(0 0 2px rgb(0 0 0 / .85)); transition: opacity 200ms linear, width 240ms cubic-bezier(.22, 1, .36, 1), height 240ms cubic-bezier(.22, 1, .36, 1); } .samey-curseur-vu .samey-curseur-point, .samey-curseur-vu .samey-curseur-cadre { opacity: 1; } /* Le point de visee : petit, net, il marque l'endroit exact. */ .samey-curseur-point { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #FFFFFF; } /* Le cadre de mise au point. */ .samey-curseur-cadre { width: 30px; height: 30px; margin: -15px 0 0 -15px; } /* Les quatre equerres. Chacune n'affiche que DEUX de ses bordures : c'est ce qui fait l'angle, sans dessiner un rectangle ferme. */ .samey-curseur-coin { position: absolute; width: 9px; height: 9px; border: 1.5px solid #FFFFFF; transition: width 240ms cubic-bezier(.22, 1, .36, 1), height 240ms cubic-bezier(.22, 1, .36, 1); } .samey-curseur-coin:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; } .samey-curseur-coin:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; } .samey-curseur-coin:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; } .samey-curseur-coin:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; } /* Sur un element cliquable, le viseur se FERME : c'est le geste de la mise au point, et ca dit « la cible est prise » mieux qu'un cercle qui gonfle. */ .samey-curseur-lien .samey-curseur-cadre { width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; } .samey-curseur-lien .samey-curseur-coin { width: 7px; height: 7px; border-width: 2px; } .samey-curseur-lien .samey-curseur-point { width: 0; height: 0; margin: 0; } /* Sur une photo, il s'ouvre : on cadre l'image. */ .samey-curseur-image .samey-curseur-cadre { width: 54px; height: 54px; margin: -27px 0 0 -27px; } .samey-curseur-image .samey-curseur-coin { width: 14px; height: 14px; } /* Le declic : le viseur se resserre brievement, comme un obturateur. */ .samey-curseur-appui .samey-curseur-cadre { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; } /* Ni sur un ecran tactile, ni sous 1024 px, ni si le mouvement est refuse : le script ne se lance meme pas dans ces cas-la, la feuille le redit pour que ce soit lisible ici. */ @media (pointer: coarse), (max-width: 1023px), (prefers-reduced-motion: reduce) { .samey-curseur-point, .samey-curseur-cadre { display: none; } .samey-curseur-on, .samey-curseur-on a, .samey-curseur-on button { cursor: auto; } } /* --- 28. Reduction des images, 17/08 --------------------------------------------- Ronaldo : « apart from hero section and section le metier, other images are too big and the grids too (except the gallery) ». Trois exceptions, et elles sont explicites : la bande du hero, la rosace du « Metier », et la mosaique de la page Galerie. Une page qui s'appelle Galerie et qui montre des vignettes se contredit elle-meme. La reduction porte sur la HAUTEUR DE RANGEE des mosaiques (110 -> 88 px, soit -20 %) : c'est elle qui commande la taille d'une case, puisque chaque case occupe un nombre entier de rangees. Agir sur les colonnes aurait change la composition, pas l'echelle. */ .e-con.samey-mosaique { grid-auto-rows: 88px; } /* L'exception, posee par le generateur sur la seule page Galerie. */ .e-con.samey-mosaique-galerie { grid-auto-rows: 110px; } @media (max-width: 1080px) { .e-con.samey-mosaique { grid-auto-rows: 70px; } .e-con.samey-mosaique-galerie { grid-auto-rows: 86px; } } /* (Le motif en lignes alternees a ete remplace par le composant carte le 17/08 : ses regles sont retirees plutot que laissees a dormir dans la feuille.) */ /* La photo unique de « Present, jamais au milieu » : 560 -> 460 px. */ .samey-photo-bornee img { max-height: 460px; } /* Le bandeau : plafond unique, declare une seule fois plus haut (520 px). Il y avait ici un second `max-height: 400px` qui gagnait par sa position — deux regles pour la meme propriete, dont une invisible. Retiree. */