/*
Theme Name: Imagerie
Description: Theme sur mesure de L'Imagerie Geneve — construit aux noeuds de la maquette Figma ETAPE V2 (w3VDqKq2sx4Hcy3VoGlARM, versions 29/07 puis 10/08 — nav re-mesuree), ecran de reference 1280. Sans plugin : type Atelier natif, formulaires natifs, galerie « Retours sur evenements » editable. Valeurs mesurees dans EXTRAIT-NOEUDS.md — ne pas « arrondir » sans re-mesurer.
Version: 1.68.57
Author: alveo.design
Text Domain: imagerie
*/
/* ── Polices auto-hebergees (OFL, voir fonts/LICENCE.txt) ─────────────────── */
@font-face { font-family: 'Anton'; src: url('fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Questrial'; src: url('fonts/questrial-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* ── Jetons — couleurs relevees aux noeuds, pas a l'oeil ──────────────────── */
:root {
--violet: #4104AA; /* titres, texte, fonds de sections */
--rose: #F8DDFE; /* topbar, heros, texte sur violet */
--mauve: #E2A9F1; /* fond « Nos missions », titres des bulles */
--magenta: #D62CFE; /* accents, boutons sur fond violet */
--creme: #FFF6D6; /* fond « Nos valeurs » */
--blanc: #FFFFFF;
--anton: 'Anton', 'Arial Narrow', sans-serif;
--poppins: 'Poppins', system-ui, sans-serif;
--questrial: 'Questrial', system-ui, sans-serif;
/* ⚠️ --blob n'est PLUS le masque : il ne sert que de REPLI (navigateur sans clip-path).
Les galbes viennent desormais des traces exacts de la maquette (masques.php, extraits par
figma-imagerie-formes le 12/08 : 5 courbes de Bezier chacun). Un border-radius ne sait
produire que des quarts d'ELLIPSE — il ne pouvait pas reproduire ces galbes, quelle que
soit la valeur. Capture de Stephane, 12/08 : « masque completement different du figma ». */
--blob: 58% 42% 55% 45% / 48% 60% 40% 52%;
--blob-2: 45% 55% 42% 58% / 55% 45% 58% 45%;
--large: 1120px; /* colonne interieure mesuree (1280 - 2 x 80) */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--blanc); color: var(--violet);
font: 400 20px/1.4 var(--poppins);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }
/* La colonne doit rendre 1120 px UTILES (maquette : contenu de x80 a x1200). Avec
box-sizing:border-box, `max-width:1120 + padding 20` n'en laissait que 1080 — 40 px de moins
PARTOUT. Mesure du 12/08 : la grille de l'equipe tombait a 3 colonnes au lieu de 4
(4x257 + 3x30 = 1118 > 1080), donc 4 rangees au lieu de 3, donc +338 px sur la section et
tout le bas de la page decale. Une erreur de 40 px qui se lisait comme une section fausse. */
.colonne { max-width: calc(var(--large) + 40px); margin-inline: auto; padding-inline: 20px; }
/* Titres — tailles/interlignes/interlettrages des noeuds */
h1, .t-h1 { font: 400 clamp(44px, 6.2vw, 79px)/1.13 var(--anton); letter-spacing: 0; margin: 0; text-wrap: balance; }
h2, .t-h2 { font: 400 clamp(34px, 4.5vw, 57px)/1.12 var(--anton); letter-spacing: -.25px; margin: 0 0 .6em; text-wrap: balance; }
/* ⚠️ 18/08 — h3 A h6 N'EXISTAIENT PAS, et personne ne pouvait le voir en lisant la page :
un `` pose par la cliente dans l'editeur rendait la taille PAR DEFAUT DU NAVIGATEUR
(Times, 1,17em, gras) — hors charte, hors police, hors couleur. Le theme ne declarait que
h1 et h2 en global ; les seuls h3 stylés l'etaient DANS leur bloc (`.pied h3`,
`.valeur__titre`), donc invisibles au reste du site. Constat fait en ecrivant la page
Charte graphique, qui aurait sinon documente du vide.
h3 est MESURE, h4 a h6 sont DERIVES, et la difference est ecrite parce qu'elle compte :
· h3 — Anton 30/36, interlettrage 1,2 : c'est la valeur des titres de cartes de valeurs
(`.valeur__titre`, noeuds « Singularite »/« Bienveillance »/« Inclusion »), et les
titres de cartes d'atelier tombent aussi a 30 px. Deux familles de titres mesurees a
30 : la maquette a bien un troisieme niveau, elle ne l'avait juste jamais nomme.
· h4 a h6 — la maquette n'en dessine AUCUN. Plutot que d'inventer des valeurs Anton qui
auraient l'air mesurees, ils passent en Poppins (la police de lecture) et descendent
vers le corps de page : 24, 21, puis 18 en capitales espacees pour un libelle. Ils sont
coherents, ils ne pretendent pas etre issus du dessin.
Les regles existantes gagnent toujours : `.pied h3` vaut (0,1,1) et `.valeur__titre`
(0,1,0) contre (0,0,1) ici — rien de ce qui est cale aux noeuds ne bouge. */
h3, .t-h3 { font: 400 30px/36px var(--anton); letter-spacing: 1.2px; margin: 0 0 .5em; text-wrap: balance; }
h4, .t-h4 { font: 600 24px/1.3 var(--poppins); letter-spacing: 0; margin: 0 0 .5em; }
h5, .t-h5 { font: 600 21px/1.35 var(--poppins); letter-spacing: 0; margin: 0 0 .5em; }
h6, .t-h6 { font: 600 18px/1.4 var(--poppins); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5em; }
/* Boutons — texte Questrial 21/25 ls .82 (noeuds « En savoir plus »).
⚠️ 13/08 — LES BOUTONS NE SONT PAS DES PILULES, et le theme le croyait depuis le debut.
`figma-imagerie-rayons` a lu les `cornerRadius` de la maquette : le fond violet (Rectangle 2)
vaut 14,41 px et le fond magenta (Rectangle 3) 15,97 px — mesures concordantes sur « Accueil 2 »
ET « Exemple atelier », les deux ecrans de reference. Un `border-radius: 999px` sur une boite
de 49 px de haut dessine une gelule ; 16 px dessine un rectangle a coins doux. La difference
se voit a l'oeil sur chaque bouton du site, et aucun comparateur de HAUTEURS ne pouvait la
signaler. Valeurs servies telles quelles, non arrondies : elles viennent d'un dessin fait a
une autre echelle, et « 16 » serait deja une interpretation. */
/* ⚠️ 17/08 — LA MAQUETTE A DEUX FAMILLES DE BOUTONS, le theme n'en servait qu'une.
Capture de Stephane (Figma contre imagerie.alveo.design, bande « Nos prochains ateliers ») :
« Voir tout » sort VIOLET sur le site et MAGENTA au dessin. Cause lue aux noeuds de
`deploy/logs/imagerie-v1/reference-figma-etape-v3.json`, pas a l'oeil :
famille MAGENTA #D62CFE h49 Anton 400 22,82/27,38 ls .91 padding 11/25 rayon 15,97
Voir tout 165,8 · En savoir plus (bandeau) 220,8 · Envoyer 128 · Inscription 158
Contact du pied 152 — SEULE exception de police (Poppins 700), et son rectangle
PEINT fait 41 de haut dans un cadre de 49 (Rectangle 3, concordant sur les 5 ecrans)
famille VIOLET #4104AA h44 Questrial 400 20,59/24,71 ls .82
En savoir plus des cartes 170x44 (8 instances) · Telecharger 391x44
Le modele magenta se REFERME AU PIXEL sur ses 5 instances — c'est la contre-epreuve, pas
une moyenne : 85+20,8(fleche)+10+50 = 165,8 · 140+20,8+10+50 = 220,8 · 78+50 = 128 ·
108+50 = 158 · 101+50 = 151 (152 annonce). Le padding vaut donc 25, et l'ecart texte-fleche 10.
Ce que le theme servait : `.bouton` violet Questrial 21/25 padding 12/28 (donc 49 de haut,
la hauteur de l'AUTRE famille) et `.bouton--gras` qui ne changeait QUE la police — d'ou
quatre boutons magenta rendus en violet Poppins gras, et des boutons de carte 23 px trop
larges et 5 px trop hauts. Une seule cause, six boutons.
⚠️ Padding horizontal de la famille violette : 16,5 sur les 8 boutons de carte (170-137),
21 sur « Telecharger » (391-349). Les deux ne se referment PAS ensemble — on sert donc 21
en base (adosse au seul bouton large) et on scope 16,5 aux cartes, sans inventer de moyenne. */
.bouton {
display: inline-block; font: 400 20.59px/24.71px var(--questrial); letter-spacing: .82px;
color: var(--blanc); background: var(--violet); border: 0; cursor: pointer;
padding: 9.65px 21px; border-radius: 14.41px; text-decoration: none; text-align: center;
transition: transform .15s ease, background .15s ease;
}
.bouton:hover { transform: translateY(-2px); }
/* ⚠️ 18/08 — LA FLECHE (consigne Stephane : « En savoir plus avec la fleche (importe de figma) »).
Un bouton qui porte une fleche devient une LIGNE : le texte et la fleche se centrent l'un sur
l'autre au lieu de s'empiler sur la ligne de base. Aux noeuds du bouton des valeurs
(Component 7, 221x49) : texte a x556 sur 140, fleche a x706 sur 21, bouton de x531 a x752 —
soit 25 px de padding de chaque cote (ce que `.bouton--gras` sert deja) et 10 px entre le
texte et la fleche. `inline-flex` et non `flex` : le bouton doit rester dans le flux du
texte, comme avant.
⚠️ La fleche n'est PAS posee sur tous les `.bouton--gras` : « Contact », au pied, n'en a pas
dans la maquette (Rectangle 3 152x41, aucun noeud Arrow a cote). Elle est donc ajoutee au
gabarit, bouton par bouton, et jamais par le CSS — sans quoi elle apparaitrait la ou la
maquette n'en dessine pas. */
.bouton:has(.bouton__fleche) { display: inline-flex; align-items: center; gap: 10px; }
.bouton__fleche { flex: none; }
/* Les deux classes designent la MEME famille de la maquette (Component 7 / Component 8) :
`--magenta` ne posait que le fond, `--gras` que la police, et aucune des deux ne servait
la famille entiere. Elles sont declarees ensemble pour qu'on ne puisse plus en corriger
une en oubliant l'autre. */
.bouton--magenta,
.bouton--gras {
font: 400 22.82px/27.38px var(--anton); letter-spacing: .91px;
background: var(--magenta); border-radius: 15.97px; padding: 11px 25px;
}
/* ── Topbar — h 107, fond rose, logo 128x91, nav Anton 27 ls 1.1 en pilule violette ── */
.entete { background: var(--rose); }
/* 15/09 — Stephane : « sticky menu avec fond rose » : l'en-tete reste colle en haut au defilement, sur son fond rose,
au-dessus du contenu. Sous la barre d'administration WordPress, il descend de sa hauteur (32 px, 46 px au telephone).
Effet assume : l'illustration de Contact qui mordait de 31 px sur la barre passe dessous. */
.entete { position: sticky; top: 0; z-index: 60; }
body.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { body.admin-bar .entete { top: 46px; } }
/* 15/09 — Stephane : « sticky menu se reduit de 40 % logo et bouton » : passe 40 px de defilement (js/entete.js pose
`entete--reduite`), la ligne passe de 107 a 64 px, le logo de 128 a 77 px, les boutons a 60 % (police, interligne,
padding, interlettrage). Transitions courtes pour que la reduction se voie sans sauter. */
.entete__ligne { transition: min-height .25s ease, padding .25s ease; }
.entete__logo img { transition: width .25s ease; }
.nav-pilule a { transition: font-size .25s ease, padding .25s ease, line-height .25s ease; }
.entete--reduite .entete__ligne { min-height: 64px; padding-block: 5px; }
.entete--reduite .entete__logo img { width: 77px; }
.entete--reduite .nav-pilule a { font-size: clamp(11px, 1.2vw, 16px); line-height: 19px; padding: 5px 8px; letter-spacing: .64px; }
.entete__ligne {
min-height: 107px; display: flex; align-items: center; gap: 24px;
justify-content: space-between; flex-wrap: wrap; padding-block: 8px;
}
.entete__logo { display: flex; align-items: center; text-decoration: none; }
.entete__logo img { width: 128px; height: auto; }
.entete__logo-texte { font: 400 32px/1 var(--anton); color: var(--violet); }
/* Trois pilules SÉPARÉES, une par lien — tranché le 11/08 sur la ré-extraction Figma
(maquette du 10/08, nœuds 218:641/644/647) : rect #4104AA 166,7×48,9 par lien, texte
#F8DDFE Anton 26,5/31,8, interlettrage 1,06, écart 24 px. L'ancienne pilule COMMUNE
était une interprétation du dump du 31/07 (rose-sur-rose, rectangles absents).
⚠️ 13/08 — LES « PILULES » DE NAV SONT A COINS VIFS. Le rayon etait la derniere valeur
interpretee de ce bloc (« coins en 999px ») ; `figma-imagerie-rayons` l'a lu : Rectangle
8/9/10 n'ont AUCUN cornerRadius, sur les CINQ ecrans de reference. Le mot « pilule » venait
de nous, pas de Margaux — et il avait fini par se lire comme une mesure. Le nom de la classe
reste (il designe la forme dans le theme), le dessin devient celui de la maquette.
Reste interprete ici : le hover magenta seul. */
.nav-pilule { display: flex; gap: 24px; align-items: center; }
.nav-pilule a {
font: 400 clamp(18px, 2vw, 26.5px)/32px var(--anton); letter-spacing: 1.06px;
color: var(--rose); background: var(--violet); text-decoration: none;
padding: 8px 14px; border-radius: 0;
}
/* ⚠️ 26/08 — PLUS AUCUN STYLE D'ETAT ACTIF, et c'est un arbitrage, pas un oubli (GO Stephane
26/08) : la maquette V3 dessine les trois entrees en violet sur TOUS les ecrans, l'etat
magenta de la page courante etait notre invention et pesait dans le diff de chaque ecran.
`aria-current` et les classes `current-*` restent posees dans le HTML (accessibilite,
selecteurs futurs) — c'est le STYLE qui part, pas le balisage. L'historique du double
balisage (aria-current OU classes WordPress selon qu'un menu est enregistre) est au
commit du 15/08 ; il redeviendra pertinent si un etat actif revient un jour. */
.nav-pilule a:hover { background: var(--magenta); color: var(--blanc); }
/* ── Heros roses (accueil 729, pages 451/481/508) ─────────────────────────── */
.heros { background: var(--rose); overflow: hidden; position: relative; }
/* 25/09 (Stephane, captures : l illustration du heros depasse sous le cadre rose, sur l accueil comme
sur Qui sommes-nous) : Elementor impose `overflow: var(--overflow)` a TOUT conteneur, avec
`--overflow: visible`, par un selecteur d UNE classe (`.e-con`) dans une feuille chargee APRES la
notre : a specificite egale, c est lui qui gagne. Nos `overflow: hidden` de section etaient donc
perdus depuis que les conteneurs n ont plus de CSS propre (18/09). Mesure du 25/09 a 1280 :
section rose jusqu a 836, image jusqu a 911, soit 75 px dehors ; le heros et la bande des valeurs
rendaient « visible ». On double la classe pour repasser devant. Le decoupage EST le cadrage de la
maquette : l illustration y fait 773 px de haut posee a 28 dans une section de 729, elle est donc
coupee par le cadre, a droite comme en bas. */
.heros.e-con, .valeurs.e-con, .retours.e-con, .membre.e-con, .membre__cadre.e-con { --overflow: hidden; overflow: hidden; }
.heros__int { position: relative; padding-block: clamp(48px, 8vw, 90px); }
/* min-height calee sur la MESURE : la section rendait 658 px pour 729 aux noeuds (12/08,
imagerie-hauteurs) — 620 puis 691 ont rendu 658 puis 691 : la hauteur SUIT la valeur
(box-sizing: border-box, le padding est dedans), donc on demande directement 729. */
/* ⚠️ 14/08 — LE HEROS ETAIT CENTRE, LA MAQUETTE LE POSE EN HAUT. Le cadre (Frame 3) va de
y107 a y836 ; le titre commence a y197, soit exactement 90 px sous le haut de la section —
la MEME valeur que le padding haut (clamp plafonne a 90 px a 1280). Le contenu dessine fait
357 + 17 + 119 = 493 px pour 549 px utiles : `justify-content: center` repartissait les
56 px restants et poussait TOUT le heros 28 px trop bas. La hauteur de la section, elle,
etait juste — c'est pourquoi aucun controle de HAUTEURS ne pouvait le voir, et pourquoi les
bandes y340-400 et y640-660 sortaient a ~60 % de pixels differents. On aligne en haut : le
titre retombe a 90, le sous-titre a 464 (571-107), tous deux aux noeuds. */
.heros--accueil .heros__int { min-height: 729px; display: flex; flex-direction: column; justify-content: flex-start; }
/* Largeurs des BOITES de texte aux noeuds : titre 524,5 (et non 560), sous-titre 551,2.
`text-wrap: balance` (regle h1 generique) redistribue les mots entre les lignes : sur un titre
dont les sauts sont DESSINES, il defait le dessin. Neutralise pour ce titre-la seulement. */
.heros--accueil .heros__titre { max-width: 524.5px; text-wrap: normal; }
.heros__titre { max-width: 560px; }
/* ⚠️ 28/08 — LE TITRE DE « QUI SOMMES-NOUS » TOMBAIT SUR DEUX LIGNES. Le noeud de la maquette
(« Qui sommes-nous ? », x79 y221) fait 629 x 89 : UNE ligne d'Anton 79,27/89. La boite
generique de 560 px coupait apres « sommes- », et `text-wrap: balance` du h1 repartissait
ensuite les mots — deux lignes la ou le dessin en pose une, et tout le heros descendait.
La taille, elle, etait juste depuis le debut (clamp plafonne a 79 px a 1280) : c'est la
LARGEUR qui decidait, comme sur l'accueil le 12/08. Meme cause, autre ecran. */
.heros--qsn .heros__titre { max-width: 629px; text-wrap: normal; }
/* L'ecart titre -> sous-titre de l'accueil est de 17 px aux noeuds (447 -> 464). Il valait
`clamp(24px, 14vh, 180px)`, soit 140 px sur une fenetre de 1000 px de haut : une valeur qui
depend de la HAUTEUR DE LA FENETRE ne peut pas reproduire un dessin — elle change a chaque
taille d'ecran, et deux mesures du meme ecran peuvent ne pas rendre la meme chose. La valeur
de base passe a 28 px, celle que `.heros--page` imposait deja a TOUS les autres ecrans : le
`clamp` etait donc du code mort qui n'attendait qu'un gabarit sans modificateur pour nuire. */
.heros__soustitre { font: 400 clamp(24px, 3vw, 35px)/1.2 var(--poppins); max-width: 560px; margin: 28px 0 0; }
.heros--accueil .heros__soustitre { max-width: 551.2px; font-size: clamp(24px, 2.77vw, 35.38px); line-height: 42.45px; margin-top: 17px; }
/* Heros de page : 451 px aux noeuds (Nos ateliers et Contact rendaient 387 et 357 — mesure
du 12/08). Les ecrans qui ont leur propre valeur la redefinissent plus bas (qsn 481). */
.heros--page .heros__int { min-height: 451px; display: flex; flex-direction: column; justify-content: center; }
.heros--page .heros__soustitre { margin-top: 28px; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2; max-width: 640px; }
/* 08/09 — CONTACT : LE SOUS-TITRE PASSE A LA LIGNE PLUS TOT (Stephane, capture a l'appui : la
premiere ligne courait jusque sous l'illustration). Au noeud, le bloc fait 403 px de large
(x79, w403, h90 = trois lignes) ; les 640 des autres pages laissaient la ligne filer a 585. */
.heros--contact .heros__soustitre { max-width: 403px; }
/* Le visuel du heros est cale sur SES noeuds, ecran par ecran — un seul reglage pour les trois
les faisait tous mentir : l'illustration d'accueil fait 832x773 posee a x603, celle de la
fiche atelier 694x512 a x688, celle de Qui sommes-nous 593x529 a x748. Avec le reglage de
l'accueil applique aux trois, la fiche atelier a EMPIRE (35,20 → 38,62 % le 12/08) : la
bonne image au mauvais cadrage est pire que pas d'image. Valeurs en % de la largeur de
reference (1280), donc elles suivent la fenetre ; `overflow:hidden` du heros coupe a droite
exactement comme le cadre de la maquette. */
.heros__visuel {
position: absolute; top: var(--v-haut, 28px); left: var(--v-gauche, 47.1%);
width: var(--v-large, 65%); height: auto; pointer-events: none;
}
/* ⚠️ 27/08 — LES POURCENTAGES ETAIENT CALCULES SUR LA MAUVAISE REFERENCE, et le diagnostic
etait DEJA ECRIT vingt lignes plus haut sans avoir jamais ete applique (« un `--v-large:
65 %` rend donc 754 »). Le commentaire du 14/08 dit « converties en pourcentage de la
largeur de reference (1280) » — mais un pourcentage se calcule sur le PARENT POSITIONNE,
et c'est `.heros__int`, une `.colonne` de 1160. Toutes les illustrations etaient donc
servies a 90,6 % de leur taille (mesure : 754x701 pour un noeud de 832x773).
C'etait le PREMIER poste d'ecart de l'accueil : bandes y580-700 a 44-53 %, profil
horizontal massif sur la moitie droite — la photo elle-meme.
Les valeurs sont maintenant calculees sur 1160, et l'origine des `left` tient compte du
bord de la colonne (x60) : gauche = (x_noeud - 60) / 1160, large = w_noeud / 1160.
Verifie au banc de rendu : l'accueil rend 832x773, les deux dimensions du noeud.
⚠️ Si une illustration est ajoutee, NE PAS diviser par 1280 : la reference est la colonne. */
.heros--accueil { --v-gauche: 46.81%; --v-large: 71.72%; --v-haut: 31px; } /* noeud 832 a x603 */
.heros--atelier { --v-gauche: 54.14%; --v-large: 59.83%; --v-haut: 23px; } /* noeud 694 a x688 */
.heros--qsn { --v-gauche: 59.31%; --v-large: 51.12%; --v-haut: 21px; } /* noeud 593 a x748 */
/* 14/08 — les deux illustrations que la V3 ajoute. Valeurs prises aux noeuds et converties en
pourcentage de la largeur de reference (1280), comme les trois au-dessus :
Contact « 17 1 » 769x490 a x577 y76 -> 45.08 % / 60.08 % / -31 px (mord sur l'entete)
Nos ateliers « 19 1 » 388x434 a x704 y107 -> 55.00 % / 30.31 % / 0 px (calee sur la section) */
.heros--contact { --v-gauche: 44.57%; --v-large: 66.29%; --v-haut: -31px; } /* noeud 769 a x577 */
.heros--nos-ateliers { --v-gauche: 55.52%; --v-large: 33.45%; --v-haut: 0px; } /* noeud 388 a x704 */
/* ⚠️ 15/08 — LES GRANDS APLATS MAUVES QUE LA V3 POSE SOUS SES DEUX HEROS. Ce ne sont pas des
images mais des VECTEURS pleins (#E2A9F1 sur un heros rose #F8DDFE), 873x825 et 810x820 :
bien plus grands que les illustrations posees hier, et non servis jusqu'ici. C'est la piste
qui reste apres avoir constate que les deux illustrations ne rendaient que 0,58 point sur
les 15 attendus. Traces extraits par figma-imagerie-formes (5 courbes chacun, empreintes
DISTINCTES — verifie, contrairement aux bulles qui se sont revelees identiques).
Valeurs a la MEME convention que les trois heros ci-dessus (rapport a 1280, sommet en px
depuis le haut de la section) : une nouvelle convention introduirait un second systeme a
verifier, et il y en a deja un a eprouver (voir la note en dessous).
L'aplat se peint SOUS tout le reste : il est place avant `.heros__int` dans le gabarit, et
les deux etant positionnes, c'est l'ordre du document qui decide. */
.heros__aplat {
position: absolute; top: var(--a-haut, 0); left: var(--a-gauche, 0);
width: var(--a-large, 50%); background: var(--mauve); pointer-events: none;
}
.heros--contact .heros__aplat { --a-gauche: 39.77%; --a-large: 68.20%; --a-haut: -5px;
aspect-ratio: 873 / 825; clip-path: url(#img-aplat-contact); }
.heros--nos-ateliers .heros__aplat { --a-gauche: 49.69%; --a-large: 63.28%; --a-haut: -73px;
aspect-ratio: 810 / 820; clip-path: url(#img-aplat-nos-ateliers); }
@media (max-width: 900px) { .heros__aplat { display: none; } }
/* ✅ QUESTION DU 15/08 — TRANCHEE LE 27/08 PAR LA MESURE, ET LA REPONSE EST « LES DEUX ».
Elle demandait une correction d'un coup pour les cinq heros avec un avant/apres : c'est fait.
Ce qu'il faut retenir, parce que c'est contre-intuitif : IL Y A BIEN DEUX CONVENTIONS, et
c'est CORRECT — un pourcentage se calcule sur le parent POSITIONNE, et les deux familles
d'elements n'ont pas le meme parent.
element place dans le gabarit parent positionne reference
.heros__aplat AVANT .heros__int (frere) .heros 1280
.heros__visuel DEDANS .heros__int .heros__int (colonne) 1160
Mesure du 27/08 sur « Nos ateliers », qui a les deux : l'aplat rend 810 pour un noeud de 810
(juste, ne pas y toucher) ; le visuel rendait 352 pour un noeud de 388 (faux, corrige).
Les cinq `--v-*` sont donc passes en base 1160, les `--a-*` restent en base 1280.
⚠️ AVANT D'AJOUTER UN ELEMENT ABSOLU DANS UN HEROS : regarder OU il est pose dans le
gabarit, pas seulement de quoi il a l'air. C'est le placement qui decide du diviseur. */
/* ⚠️ 13/08 — « LE CONTENU TOMBE JUSTE » ETAIT FAUX POUR LA FICHE ATELIER, et c'est la meme
erreur de lecture que sur la section programme : le commentaire du 12/08 ci-dessous comparait
la hauteur du CONTENU du site au CADRE de la maquette. Une fois le contenu ouvert element par
element (imagerie-hauteurs, 13/08), il derive de +90 et le padding de -40 :
bloc noeuds site avant cause
titre 89 (Anton 60/89) 68 (60 x 1,13) interligne herite du h1 generique
sous-titre 42,5 (35,4/42,5) 30 (25 x 1,2) corps et interligne d'un autre ecran
pastille 42 (rect mauve) 29, SANS FOND le rectangle #E2A9F1 n'existait pas
infos 97 (3 x 20/20) 203 interligne 1,25 + marges de
a 1em
Le bloc « infos » a lui seul pesait +106 px. On cale chaque bloc sur son noeud, et la section
reprend sa hauteur dessinee : 65 (haut) + 340 (contenu) + 103 (bas) = 508. */
.heros--atelier .heros__int {
/* padding gauche 20 : titre a x79 et sous-titre a x80 aux noeuds, pour une colonne qui pose
son bord a 60 — le heros porte la MEME indentation de 20 que la colonne du programme
(mesure de rendu du 26/08 : tout le bloc gauche etait colle a 60, seul ecart de l'ecran
en X ; les Y etaient tous justes). Les enfants ABSOLUS (le visuel, cale en %) ne bougent
pas : un padding ne deplace pas ce qui est positionne. */
min-height: 508px; padding: 65px 0 103px 20px;
display: flex; flex-direction: column; justify-content: flex-start;
}
.heros--qsn .heros__int { min-height: 481px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) {
.heros__visuel { position: static; width: 100%; margin-top: 24px; }
}
/* ── Cartes atelier — rangee defilante (noeuds : cartes a x>1280, stride 340) ── */
.ateliers-bande { padding-block: clamp(56px, 8vw, 100px); }
/* ⚠️ 13/08 — LA MARGE DU h2 EST DANS LA BOITE, et elle faussait la lecture. Le bloc de tete
rendait 98 px pour 64 dessines : 64 de titre + 34 de `margin-bottom: .6em` du h2 generique,
pris dans la boite parce que le parent est `flex`. On croyait donc mesurer un titre trop haut
alors qu'on mesurait un titre + sa marge. Aux noeuds : titre y936 h64, cartes y1082 — soit 82
px entre les deux, dont 30 pris par le padding haut du rail (il laisse depasser le visuel). */
.ateliers-bande__tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 52px; }
.ateliers-bande__tete h2 { margin-bottom: 0; }
/* Rail re-mesure le 11/08 sur la reference ETAPE V2 (noeuds Frame 17/24/25/26…) : carte
320x~575 sur FOND ROSE, pas 340 donc ecart 20 (l'ancien 292+48 donnait le bon pas mais la
mauvaise carte), visuel-blob 393x290 qui DEBORDE de la carte (-33 a gauche, -27 en haut) et
mord sur la voisine. Interprete (extracteur muet sur les rayons) : coins 24px. */
.rail {
/* padding bas a 0 : les cartes finissent a y1673 et la section a y1772, soit 99 px — c'est
le padding de la SECTION qui les porte. Les 24 px du rail s'y ajoutaient. */
display: flex; gap: 20px; overflow-x: auto; padding: 30px 4px 0;
scroll-snap-type: x proximity; scrollbar-width: none;
/* ⚠️ flex-start, PAS le stretch par defaut — et la raison n'est PAS celle que j'avais
ecrite en 1.45.0 (« les cartes n'ont pas la meme hauteur »), qui etait FAUSSE et a coute
2,60 points a l'accueil : les quatre cartes visibles ont exactement la MEME hauteur, 591
(Rectangle 3, y1082 a y1673), c'est ecrit trois blocs plus bas depuis le 13/08.
Le stretch est refuse parce qu'il fait dicter la hauteur par la carte la PLUS LONGUE du
rail — les trois lorem hors cadre a 1280 mais dans le flux etiraient les quatre visibles
a 623. Avec flex-start, chaque carte tient sa propre hauteur, et le `min-height: 591`
ci-dessous la lui donne. Les deux regles vont ENSEMBLE : flex-start seul rend des cartes
de 601 (leur contenu naturel), 591 seul est ecrase par le stretch. */
align-items: flex-start;
}
.rail::-webkit-scrollbar { display: none; }
/* ⚠️ 08/09 — LE RAIL SE SAISIT A LA SOURIS (Stephane : « la boucle doit etre slidable a la main
ou souris »). Au doigt et au trackpad, `overflow-x:auto` glissait deja ; a la souris, rien :
un rail qui se tire au doigt et pas au clic est un rail qui parait fige sur ordinateur. Le
geste est dans rail.js (pointeur souris seulement, le tactile reste natif). Ici : la main
comme signal, et pendant la prise, PAS d'aimantation ni de lissage — `scroll-snap` sur un
scrollLeft pose a chaque mouvement fait sauter les cartes sous le curseur. L'aimantation
revient quand on lache (proximity : elle rattrape la carte la plus proche). */
.rail { cursor: grab; }
.rail--saisi { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rail--saisi .carte-atelier { pointer-events: none; }
@media (max-width: 760px) { .rail { cursor: auto; } }
/* ⚠️ 28/08 — LES COMMANDES DU CARROUSEL. Le rail defilait deja (`overflow-x` + `scroll-snap`)
mais rien ne le disait : barre masquee, aucune fleche. La maquette, elle, pose HUIT cartes
a x80, 420, 760, 1100, 1440, 1780, 2120, 2460 — les quatre dernieres hors d'un ecran de
1280. Elle EXPRIME donc le defilement sans dessiner de commande ; c'est le seul endroit du
site ou nous ajoutons un element que la maquette ne dessine pas, et c'est un choix d'usage,
a confirmer par Margaux.
LE CADRE N'A AUCUNE EPAISSEUR PROPRE : `position: relative` seul, les fleches en absolu.
Aucune carte ne bouge, la hauteur du rail ne change pas — un ajout d'usage ne doit pas
couter un point de fidelite, et celui-la n'en coute aucun tant qu'on ne survole pas.
Les fleches sont posees SUR le bord des cartes (a 4 px), pas a cote : les poser a cote
retrecirait la zone des cartes de 96 px et decalerait les huit positions mesurees. */
.rail-cadre { position: relative; }
.rail__fleche {
position: absolute; top: 178px; z-index: 3; width: 48px; height: 48px; padding: 0;
display: none; place-items: center; cursor: pointer;
border: 0; border-radius: 999px; background: var(--violet); color: var(--rose);
box-shadow: 0 3px 14px rgba(65, 4, 170, .28);
transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.rail-cadre--defile .rail__fleche { display: grid; }
.rail__fleche[hidden] { display: none; }
.rail__fleche:hover { background: var(--magenta); transform: scale(1.06); }
.rail__fleche:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.rail__fleche--precedent { left: 4px; }
.rail__fleche--precedent svg { transform: rotate(180deg); }
.rail__fleche--suivant { right: 4px; }
/* Au doigt, la fleche ne sert a rien et masque une carte : sous 760 px, le geste suffit. */
@media (max-width: 760px) { .rail__fleche { display: none !important; } }
/* Quelqu'un qui a demande moins d'animation ne veut pas non plus d'un defilement anime :
`scroll-behavior` est pose par le JS, on le neutralise ici plutot que dans le script. */
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }
/* Coins vifs : le rectangle rose PEINT de la carte (Rectangle 3, 320x591 #F8DDFE) n'a aucun
cornerRadius — mesure du 13/08, concordante sur les quatre cartes de l'accueil. Le 24px etait
devine. Le galbe organique de la VIGNETTE, lui, reste un clip-path : ce sont deux choses
differentes, et c'est la confusion des deux qui avait produit le masque faux du 12/08. */
.carte-atelier {
flex: 0 0 320px; scroll-snap-align: start; text-decoration: none; color: var(--violet);
/* 591 = la hauteur du rectangle rose, la MEME pour les quatre cartes visibles. 14 sous le
bouton et non 26 : son bas est a y1658 pour un rectangle qui finit a y1673 (mesure du
26/08 ; le « 25 px » du commentaire d'origine decrivait les cartes 5-8, hors cadre).
`min-height` et non `height` : un titre plus long chez la cliente allonge SA carte au
lieu d'etre coupe — et sans contaminer les autres, grace au flex-start du rail. */
background: var(--rose); border-radius: 0; padding: 0 23px 14px; min-height: 591px;
/* ⚠️ 17/08 — LA CARTE ROGNE SON VISUEL, COMME DANS LA MAQUETTE (consigne Stephane, capture
avec fleches sur les gouttieres : « respect les marges blanches ici comme maquette »).
Le visuel fait 393 px sur une carte de 320 : il DEBORDE de 33 a gauche et 40 a droite, et
c'est exact aux noeuds. Mais Figma COUPE ce debordement au bord de la carte — ce que le
theme ne faisait pas, donc le visuel mangeait les 20 px de gouttiere ET mordait sur la
carte voisine. La boite disait vrai, l'inference sur le RENDU etait fausse : c'est la
doctrine du 13/08 (« la fidelite porte sur le rendu a l'ecran, pas sur le fichier Figma »).
MESURE sur l'export ETAPE V3, pixel par pixel — pas deduite du code :
· gouttieres 1-2, 2-3, 3-4 : 0 pixel non blanc sur 35 520 ; 20 px de #FFFFFF exact ;
· le visuel colle EXACTEMENT au bord de sa carte sur 67 hauteurs/72 a gauche, 66/72 a
droite — une forme organique ne produit pas 67 verticales parfaites, donc c'est un
rognage et non le trace qui s'arrete la ;
· debordement gauche dessine (x47-79) : 0 px visible, meme sur la premiere carte.
☠️ PAS `overflow: hidden` — LE ROGNAGE EST HORIZONTAL SEULEMENT. Le visuel depasse bien
de 25 px AU-DESSUS de la carte dans l'export (des y1056 pour une carte a y1081,5), et
`overflow:hidden` sur un axe force l'autre a `auto` : il couperait ce depassement, qui
est voulu. `overflow-x: clip` est le seul couple qui rogne un axe en laissant l'autre
passer. Un navigateur qui ne connait pas `clip` ignore la declaration et rend ce qu'il
rendait avant — la degradation est l'etat d'hier, jamais pire. */
overflow-x: clip;
/* ⚠️ 18/08 — LES BOUTONS S'ALIGNENT (consigne Stephane, capture Figma/site cote a cote :
« aligne les boutons en savoir plus vers le bas comme maquette »). Le FAIT mesure aux
noeuds est intact : les QUATRE boutons du rail sont a la MEME ordonnee, y1614, alors que
leurs sous-titres font une ou deux lignes (« Imagine et dessine » contre « Fais de ta
cabane un vrai petit chez-toi ! »), dans une carte de hauteur fixe (Rectangle 3, 320x591,
y1082 a y1673).
⚠️ MAIS LE MECANISME ECRIT ICI ETAIT FAUX, et il a coute 2,60 points a l'accueil en
1.45.0 : ce n'est PAS un ancrage au bas de la carte (`margin-top: auto`), qui pose le
bouton a 592 quand la maquette le dessine a 604. C'est la ZONE CONSTANTE de 64 px du
sous-titre qui aligne les quatre : le bouton suit son flux, et le flux ne bouge plus
quand le texte change de longueur. Le rendu demande est le meme, la cause n'est pas
celle qu'on croyait. Ne pas remettre `margin-top: auto` : le banc de rendu du 26/08
mesure 558 sur les quatre cartes sans lui.
⚠️ 22/09 : DECISION DE STEPHANE, capture du rail a l'appui (« bouton en savoir plus
toujours en bas .. stp ») : L'ANCRAGE AU BAS EST POSE ET VOULU (`margin-top: auto` dans
la regle `.carte-atelier .bouton`, plus bas). Ce qui a change depuis le 26/08 : les cartes
reelles de la cliente n'ont pas toutes un sous-titre (functions.php ne rend
`.carte-atelier__texte` que si l'extrait est rempli), donc la ZONE de 64 px n'existe pas
sur ces cartes-la, et le flux seul laissait leur bouton ~90 px au-dessus du bas (cartes
2 a 4 de la capture, date collee au titre, vide sous le bouton). Dans une carte de 591
exactement, l'ancrage rend le bouton la ou la maquette le dessine : 591 - 14 de padding
- 44 = y533, soit 1615 pour 1614 aux noeuds. Ne pas le retirer sans une nouvelle demande
de Stephane : c'est la troisieme fois qu'il le demande (18/08, 15/09, 22/09).
Le rail est deja `display:flex`, donc ses cartes ont deja la meme hauteur (`align-items`
vaut `stretch` par defaut) : il ne manquait qu'un axe VERTICAL a l'interieur de la carte
pour que `margin-top:auto` ait un espace a absorber. */
display: flex; flex-direction: column;
}
.carte-atelier__visuel {
/* 393 px de large aux noeuds, sur une carte de 320 : le visuel DEBORDE des deux cotes (-33 a
gauche, +40 a droite). `calc(100% + 56px)` ne rendait que 330 (100 % = 274, la carte moins
ses 2x23 de padding) — donc, a ratio constant, 243 px de haut au lieu de 290. La largeur
etait fausse, et c'est la HAUTEUR qui s'en ressentait : 47 px par carte. */
width: min(393px, calc(100% + 119px)); max-width: none; aspect-ratio: 393 / 290; object-fit: cover;
/* PAS de border-radius ici : il s'AJOUTE au clip-path (le rendu est leur INTERSECTION),
et c'est ce qui donnait le blob trop prononce de la capture du 12/08. Le trace exact
suffit — un repli border-radius rendrait la forme fausse la ou il s'applique. */
clip-path: url(#img-carte-1);
/* ⚠️ 17/08 — LA MARGE GAUCHE SE COMPTE DEPUIS LA BOITE DE CONTENU, PAS DEPUIS LA CARTE, et
c'est la moitie que la correction de largeur ci-dessus avait oubliee. Aux noeuds : carte
`Rectangle 3` x=80, visuel `Vector 2` x=47 — le visuel commence donc a CARTE MOINS 33. Mais
`margin-left` part de la boite de contenu, qui commence a carte+23 (padding), si bien que
-33px posait le visuel a carte-10 : 23 px trop a DROITE. Mesure independante sur le
composite du 16/08 (correlation de l'interieur de la photo, hors bords du masque) : le site
etait 24 px a droite de la maquette, ecart moyen 28,3 -> 5,7 niveaux une fois recale.
La LARGEUR, elle, etait deja juste et le prouve : 119 = 56 a gauche + 63 a droite, comptes
depuis cette meme boite de contenu. La marge disait 33, la largeur disait 56 — deux
reperes differents dans la meme regle. Le voisin `.membre__cadre` garde -33px et reste
juste, precisement parce que `.membre` n'a AUCUN padding horizontal.
Le decalage emportait aussi le clip-path (il suit l'element) : c'est la meme cause qui
rendait le galbe decale de ~20 px au releve de profil, pas un masque faux. */
background: var(--mauve); margin: -27px 0 0 -56px;
}
/* ⚠️ 17/08 — CETTE REGLE NE PRODUIT AUCUNE VARIATION, et c'est mesure, pas suppose.
`deploy/logs/20260815-073324.log` montre que le job a resolu DEUX noeuds DIFFERENTS
(carte-1 -> 273:680, carte-2 -> 273:697), les a demandes a l'API en `geometry=paths`, et
que les deux ont rendu le MEME trace (286 octets, 5 courbes, meme sha256). La maquette
n'alterne donc pas : l'extraction n'a rien rate. C'est du code mort — laisse en place sur
arbitrage de Stephane (17/08) pour ne pas ajouter une 2e variable a la meme pose. Ne pas
perdre une demi-heure a chercher pourquoi « l'alternance ne marche pas » : elle ne peut pas. */
.carte-atelier:nth-child(even) .carte-atelier__visuel { clip-path: url(#img-carte-2); }
/* Comme sur la fiche atelier, la pastille d'age est un RECTANGLE MAUVE (Rectangle 12, 78x23,
#E2A9F1, rayon 32,67 sur 23 de haut — donc ecrete, donc pilule) et le theme n'en posait que le
texte. Elle remonte de 4 px sur le bas du visuel, comme aux noeuds (y1340 pour un visuel qui
finit a 1344). */
.carte-atelier__age {
/* ⚠️ 27/08 — `align-self: start`, ET C'EST LA MEME LECON QUE `.atelier-age` LE 15/08, restee
non generalisee pendant douze jours : `display: inline-block` ne sert A RIEN sur un enfant
de flex. `.carte-atelier` est une colonne flex, dont le `align-items: stretch` par defaut
etirait la pastille sur TOUTE la largeur de la carte — 274 px de mauve la ou la maquette en
dessine 78. Mesure : c'etait le premier poste d'ecart de l'accueil (bande y1340-1360 a
51,84 %, motif repete quatre fois dans le profil horizontal, un par carte).
La lecon generale : dans ce theme, TOUTE pastille posee dans une colonne flex doit porter
`align-self`. Le chercher ailleurs avant d'ajouter une pastille de plus. */
display: inline-block; align-self: start; font: 400 14px/16px var(--questrial); margin: -4px 0 0;
padding: 3px 9px; background: var(--mauve); border-radius: 999px;
/* ⚠️ 08/09 — LA PASTILLE EST SUR LA PHOTO, PAS DESSOUS (Stephane, capture Figma a l'appui :
« dès 6 ans sur la photo pas dessous, c'est un tag »). Aux noeuds du 14/08 elle touchait
tout juste le bas du visuel (y1340 pour un visuel qui finit a 1344), et le galbe du masque
remonte a gauche : a l'ecran elle flottait sous la photo, dans le rose. La maquette courante
la pose a cheval sur le bord bas. `position:relative` la DEPLACE SANS TOUCHER AU FLUX : le
titre, la date et le bouton restent aux ordonnees mesurees (1370, 1520, 1614). */
position: relative; top: -14px;
/* ⚠️ 30/09 — 1.68.54 : PASTILLE DOUBLEE, ET ELLE NE POUSSE PLUS LE TITRE (Stephane, capture du rail de l'accueil :
« double la taille de l'emplacement de l'age .. et les titres en dessous commencent tous au meme niveau meme si pas
de date age »). Mesure sur la capture : le titre d'une carte AVEC pastille partait 18 px plus bas que les autres —
la pastille occupait 22 px dans le flux (moins 4 de marge), `top:-14px` ne deplacant que son dessin.
① 14/16 -> 28/32 et padding 3/9 -> 6/18 : 22 -> 44 px de haut, largeur doublee aussi (tout est proportionnel).
② Sa part dans le flux vaut ZERO : marge haute -40, marge basse -4, soit -40 + 44 - 4 = 0. Le titre de TOUTES les
cartes demarre donc a 7 px sous la photo, qu'il y ait une pastille ou non.
③ Son BAS reste ou il etait (4 px sous la photo) : elle grandit VERS LE HAUT, sur la photo — c'est un tag
(arbitrage du 08/09). `position: relative` reste, `top` tombe a 0 : c'est lui qui la peint AU-DESSUS du visuel
(le visuel porte un clip-path, donc sa propre couche ; la pastille, positionnee et plus loin dans l'arbre, passe
devant). */
font-size: 28px; line-height: 32px; padding: 6px 18px; margin: -40px 0 -4px; top: 0;
/* ⚠️ 30/09 — 1.68.55 : LES VALEURS DE STEPHANE, reglees par lui dans les DevTools sur la 1.68.54 (capture : « met comme
ici pour le css »), reprises telles quelles : 19/28, padding 2/17, marge -25/0/0, top 0. La pastille fait 32 px de
haut, monte de 25 sur la photo et OCCUPE 7 px du flux (-25 + 32 + 0) : le titre d'une carte a pastille part a 14 px
sous la photo. C'est ce niveau-la que sa ligne rouge designe pour TOUTES les cartes (voir .carte-atelier__titre). */
font-size: 19px; line-height: 28px; padding: 2px 17px; margin: -25px 0 0;
}
/* interligne 42,5 aux noeuds — le 1.2 rendait 36 (comparateur typo, 13/08). */
.carte-atelier__titre { font: 400 30px/42.5px var(--anton); letter-spacing: -.17px; margin: 7px 0 0; }
/* 30/09 — 1.68.55 (Stephane, ligne rouge sur la capture du rail : « descend les titres sur la ligne rouge meme si pas date
de l'enfant ») : le titre part a 14 px sous la photo sur TOUTES les cartes, au niveau de celui qui suit une pastille.
Sans pastille : 14 de marge. Apres une pastille (qui occupe 7 px du flux) : 7 de marge. Meme ordonnee dans les deux cas. */
.carte-atelier__titre { margin-top: 14px; }
.carte-atelier__age + .carte-atelier__titre { margin-top: 7px; }
/* Marges lues une a une entre les noeuds : titre y1370 sous une pastille qui finit a 1363 (7)
· texte y1456 colle au titre qui finit la (0) · lieu y1550 (10).
⚠️ 26/08 — CE QUE DIX JOURS DE « cause non trouvee » AVAIENT MANQUE : dans la maquette, la
date, le lieu et le bouton sont a une position FIXE dans la carte, identique que le
sous-titre fasse une ou deux lignes (cartes 2 et 3 : sous-titres de longueurs differentes,
date a y1520 pour les DEUX). Le sous-titre occupe donc une ZONE CONSTANTE de 64 px
(y1456 -> y1520), pas une ligne suivie d'une marge. La note d'origine calculait une marge
de 20 « sous un texte qui finit a 1500 » — une fin de deuxieme ligne, sur une carte qui n'en
avait qu'une : la marge etait calculee sur une ligne fantome, et c'est cette lecture qui
deplacait tout le bas des cartes a une ligne.
`min-height` et non `height` : deux lignes tiennent dans 64, une troisieme deborde
proprement au lieu d'etre coupee. */
/* 29/09 — NOUVELLE CARTE DU CARROUSEL (Figma modifie le 29/09, releve deploy/logs/imagerie-v1/
carrousel-2909/, noeuds 273:684 a 273:693 + 487:149). Depuis le haut de la carte (Rectangle 3) :
sous-titre 376,5 · date 430,5 · horaire 457,5 · lieu 481 · bouton 528. Donc : sous-titre en
18 px (20 avant), 3,5 px sous le titre (le theme le collait, 373 pour 376,5), zone de 54 px
(64 avant) ; horaire 27 sous la date ; lieu 23,5 sous l'horaire. Banc qui REND la carte et
compare aux noeuds : deploy/tools/banc-imagerie-carte-horaire.mjs (la feuille d'avant y rougit). */
/* 29/09 16h (1.68.53) — plus de ZONE de 54 px : Stephane, capture du rail servi, fleches sur le vide sous le lieu,
« comme sur la maquette descend date et lieu a 20px du bouton du bas ». Le bloc date/horaire/lieu se cale
desormais EN BAS (margin-top:auto sur la date, plus bas), donc la zone n'alignait plus rien. Les 10 px sous le
sous-titre sont un MINIMUM, pour une carte pleine (titre et lieu sur deux lignes) : ils ne comptent que la. */
.carte-atelier__texte { font: 400 18px/22px var(--poppins); margin: 3.5px 0 10px; }
/* 30/20 aux noeuds — le theme servait 26/1,1, soit 28,6 : un corps trop petit ET un interligne
trop grand, deux erreurs qui se cachaient l'une l'autre a l'oeil. */
/* margin-top 0 : les 20 px d'avant s'ajoutaient a la zone de 64 du sous-titre et poussaient
la date a 484 pour 466 dessines. C'est la zone qui porte l'espacement, pas la date. */
/* nowrap (29/09) : le mois s'ecrit en entier, et « SAM. 28 SEPTEMBRE » mesure 274 px pour 274
utiles (Chromium, Poppins 300 30 px). Au pixel pres : un arrondi d'un autre navigateur la
couperait en deux lignes de 20 px sur un corps de 30, soit deux lignes l'une sur l'autre.
Sans retour, le pire cas deborde d'un pixel dans les 23 de marge : invisible. */
/* margin-top:auto (1.68.53) : la date prend tout l'espace libre au-dessus d'elle, et emmene horaire, lieu et bouton
en bas de la carte. C'est ELLE qui porte l'ancrage, plus le bouton : deux `auto` se partageraient le vide en deux,
et le lieu ne serait plus a 20 px du bouton. */
.carte-atelier__date { font: 300 30px/20px var(--poppins); text-transform: uppercase; margin: auto 0 0; white-space: nowrap; }
/* 29/09 — l'horaire (« 12h-14h », Poppins 300 18/20, noeud 487:149), 7 px sous la date. Absent
pour une journee entiere ou un evenement sur plusieurs jours (voir imagerie_horaire_maquette) :
le lieu reprend alors ses 10 px sous la date, comme avant. */
.carte-atelier__horaire { font: 300 18px/20px var(--poppins); margin: 7px 0 0; }
.carte-atelier__lieu { font: 300 18px/20px var(--poppins); margin: 10px 0 0; }
.carte-atelier__horaire + .carte-atelier__lieu { margin-top: 3.5px; }
/* Filet : un evenement sans date (le theme ne rend alors pas la ligne) garde son lieu cale en bas. */
.carte-atelier__titre + .carte-atelier__lieu, .carte-atelier__texte + .carte-atelier__lieu { margin-top: auto; }
/* 170x44 aux noeuds (Rectangle 2, 8 instances concordantes) pour un texte de 137 : 16,5 de
chaque cote. La base sert 21 (voir le bloc des boutons) — ici on redescend a la valeur
des cartes, qui sont ce que la capture du 17/08 montre. */
/* 24 : bouton y1614 sous un lieu qui finit a 1590. Le lieu fait DEUX lignes (40 px) — son
noeud porte un saut (« Espace de Quartier de la Jonction », y1550 + 40 = 1590), et le
texte tient sur deux lignes dans les 274 px utiles de la carte. Calculer cet ecart sur une
ligne unique donne 44, et pose le bouton 20 px trop bas : la hauteur reelle de la boite se
MESURE, elle ne se deduit pas du nombre de mots. */
/* 29/09 — 7 et non plus 24 : avec la ligne horaire, 24 poussait la carte a 603 px (591 dessines)
et desalignait le rail. Nouvelle maquette : lieu a 481, deux lignes de 20 (fin a 521), bouton a
528. Cet ecart n'est qu'un MINIMUM : dans une carte de 591 le bouton reste cale au bas (regle
`.carte-atelier .bouton`, decision du 22/09), il ne compte que pour une carte plus longue. */
/* 20 (1.68.53) : le chiffre de Stephane, 29/09 16h, « date et lieu a 20px du bouton du bas ». Ce n'est plus un
minimum : le bloc etant cale en bas, c'est l'ecart EXACT entre la derniere ligne et le bouton, sur toutes les cartes. */
.carte-atelier > p:last-of-type { margin-bottom: 20px; }
/* 15/09 — SUR UNE PAGE ELEMENTOR, `.elementor img { max-width: 100% }` (classe + balise) bat nos regles a une classe :
le visuel de la carte (393 px, plus large que la carte de 320 A DESSEIN : -56 a gauche, -27 en haut) tombait a 320
et le galbe se refermait avant le bord droit (capture Stephane, accueil Elementor). Deux classes, la valeur dessinee gagne.
Meme garde pour le portrait de l'equipe (257 dans un cadre de 343) et l'illustration des heros. */
.carte-atelier .carte-atelier__visuel, .membre__cadre .membre__photo, .heros .heros__visuel,
.heros .elementor-widget-image img { max-width: none; }
/* HISTORIQUE DE L'ANCRAGE (a lire avant de toucher `margin-top`) :
· 18/08 : « aligne les boutons en savoir plus vers le bas comme maquette » : resolu par la zone
de 64 px du sous-titre, sans ancrage (voir le bloc `.carte-atelier`).
· 15/09 18h : « aligne En savoir plus sur le bas » -> `margin-top: auto` (1.68.17) ; 18h45 :
« remet comme sur la maquette » -> retour au flux (1.68.20).
· 22/09 : « bouton en savoir plus toujours en bas .. stp », capture du rail a l'appui : les
cartes sans sous-titre laissaient le bouton en l'air. `margin-top: auto` est POSE (1.68.42).
Le 24 px du `p:last-of-type` ci-dessus reste l'ecart MINIMAL entre le lieu et le bouton :
dans une carte plus haute que 591 (titre ou lieu long), le bouton suit le flux a 24 px ;
dans une carte de 591, il se cale au bas, au pixel de la maquette (1615 pour 1614). */
/* ⚠️ 27/08 — `align-self: start` : TROISIEME occurrence du meme piege en deux jours (apres
`.atelier-age` le 15/08 et `.carte-atelier__age` hier). Le bouton etait etire a 275 px sur
toute la largeur de la carte, la ou le noeud en dessine 170 (Rectangle 2, 170x44, concordant
sur les 8 cartes) — visible au composite comme quatre motifs repetes dans le profil
horizontal des bandes y1600-1660, un par carte.
⚠️ ET ON NE MET PAS `align-items: flex-start` SUR `.carte-atelier`, ce qui reglerait les trois
d'un coup : les paragraphes DOIVENT rester en pleine largeur (274 px), sinon leurs retours a
la ligne changent et le texte ne se coupe plus comme dans la maquette. Le piege se traite
enfant par enfant, a dessein. */
/* 1.68.53 : margin-top 0, et le bouton RESTE en bas (demande du 22/09 tenue) : c'est la date qui porte le `auto`, et
tout ce qui la suit, bouton compris, descend avec elle. Une carte sans date ni lieu (aucune a ce jour) aurait son
bouton dans le flux. */
.carte-atelier .bouton { margin-top: 0; align-self: start; padding-inline: 16.5px; }
/* 15/09 — Stephane (capture du rail) : « corrige cette entree, plus besoin de changer la couleur / taille » : la date de la
derniere carte (variante S'inscrire de la maquette) garde la meme police et la meme couleur que les autres. Regle retiree :
.carte-atelier--inscrire .carte-atelier__date { font: 400 34px/1.1 var(--anton); color: var(--magenta); } */
/* ── « Nos valeurs » — fond creme, bulles violettes, visuel plein bord ────── */
/* ⚠️ 13/08 — LES BULLES ETAIENT PLUS HAUTES QUE LEUR DESSIN, et le `min-height` le decidait.
Aux noeuds (Frame 17, y1772 h1051) : padding haut 94 · titre 64 · 73 · bulles 218 · 44 ·
visuel 524 · 34 = 1051. Le theme demandait `min-height: 260px` pour des bulles dessinees a
218 — 42 px de trop, par bulle, qui remontaient a la section. Et la bande n'est PAS large de
1120 : son bloc fait 996, centre (x142 a x1138), avec des gouttieres de 25 et non de 40. Une
grille trop large donne des bulles trop larges, donc un texte plus court, donc une hauteur
qui ne se compare a rien. */
/* ⚠️ 15/08 — TOUTE LA SECTION EST REPRISE AUX VALEURS DE LA V3, et elle porte a elle seule
les 71 px qui separaient l'accueil de sa cible. Mesure : Frame 17 passe de 1051 a 980 px,
et c'est EXACTEMENT l'ecart total de la page (3079 -> 3008). Un seul bloc explique tout.
Ce que la V3 a change, element par element (V2 -> V3) :
bloc interieur x142 l996 -> x82 l1118 (toute la colonne)
cartes 315 large, gap 25 -> 270 large, gap 13, et 11 px plus haut
titre de carte 37,1/44,5 -> 30/36, interlettrage 1,2
texte de carte 26/29,7 -> 22/26,4
retrait interne 20 a gauche -> 17 a gauche, 12 a droite
visuel y2265 -> y2210 (colle sous les cartes, plus de 44 px)
bouton 191 large, y2305 -> 140 large, y2283
Le modele se referme au pixel : 94 + 64 + 62 + 218 + 524 + 18 = 980. C'est ce qui donne
confiance dans l'ensemble — aucune de ces valeurs n'est arrondie ni deduite. */
.valeurs { background: var(--creme); padding: clamp(56px, 7.34vw, 94px) 0 18px; overflow: hidden; }
/* ⚠️ 18/08 — TITRE CENTRE (consigne Stephane : « aligner titre au centre »). Le noeud le
dit lui-meme : `textAlignHorizontal: CENTER`, sur une boite de 1118 px — soit toute la
colonne, x82 a x1200. Le theme heritait de l'alignement a gauche du corps de page.
⚠️ La regle est SCOPEE a `.valeurs` : le titre « Nos prochains ateliers » reste a gauche
dans la maquette comme sur le site, et centrer tous les h2 le casserait. */
.valeurs h2 { margin-bottom: 0; text-align: center; }
/* 4 colonnes de 270 avec 13 de gouttiere = 1118, la largeur exacte du bloc en V3. `auto-fit` +
minmax laisserait le navigateur choisir : ici la maquette a choisi, on la suit. */
.valeurs__grille {
display: grid; grid-template-columns: repeat(4, 270px); gap: 13px;
max-width: 1118px; margin: 62px auto 0; justify-content: center;
}
@media (max-width: 1200px) {
.valeurs__grille { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 100%; }
}
/* Retrait ASYMETRIQUE, comme en V2 mais aux nouvelles valeurs : le texte est pose a x99 sur
241 px dans une carte a x82 large de 270 — donc 17 a gauche et 12 a droite. Un 17/17
rognerait 5 px de texte, et 5 px suffisent a faire basculer un mot a la ligne suivante. */
/* ⚠️ 18/08 — RECTANGLE, PAS DE GALBE (consigne Stephane : « Container rectangulaire »).
Le `clip-path` organique etait de NOTRE invention : aux noeuds ces cartes sont des
rectangles pleins — `Rectangle 17` 270x218, fond #4104AA, `cornerRadius` ABSENT, et les
trois autres (Group 10, 11, 13) rendent les memes 270x218 sans rayon. L'ecart etait
deja mesure et signale le 16/08 (« ce galbe est de notre invention »), laisse en place
ce jour-la pour ne pas ajouter une variable a la meme pose. Il est tranche ici.
Aucun `border-radius` ne le remplace : angles vifs, comme le dessin. */
/* ⚠️ 28/08 — LE TEXTE DEBORDAIT DES CARTES, et la cause est une mesure de la veille qui
disait le contraire de l'export. La passe du 27/08 a pose « titre Anton 37/45, texte Poppins
26/30, largeurs FIXES de 270 et 281 qui depassent la carte a dessein », en annoncant des
noeuds V3. L'export de la V3, lu au pixel aujourd'hui, dit autre chose — et l'export ne
s'interprete pas :
« Singularite » dans la maquette 139 x 32 px
« Singularite » servi par le site 172 x 39 px rapport 1,237 = 37/30
Les quatre titres de l'export mesurent 139, 172, 207 et 117 px : le plus large,
« Co-construction », tient dans les 241 px utiles de la carte SANS aucune largeur forcee.
C'est bien la taille qui etait fausse, pas la boite.
VALEURS REMISES, celles des noeuds ET de l'export : titre Anton 30/36 ls 1,2 (noeud
« Singularite », 231,3 x 39), texte Poppins 22/26,4 (noeud 241 x 104, encre mesuree de
x99 a x250). Aucune largeur fixe : le retrait suffit, et une largeur fixe qui deborde sa
carte est precisement ce qui coupait les mots a l'ecran.
Le compte de la carte se referme : 24 (haut) + 39 (titre) + 17 + 104 (4 lignes) + 34 (bas)
= 218, la hauteur du noeud.
⚠️ RETRAIT ASYMETRIQUE 17 / 12 : le texte est pose a x99 sur 241 dans une carte a x82 large
de 270. Un 17/17 rognerait 5 px, et 5 px suffisent a faire basculer un mot a la ligne. */
.valeur { background: var(--violet); padding: 24px 12px 34px 17px; min-height: 218px; }
.valeur__titre { font: 400 30px/36px var(--anton); letter-spacing: 1.2px; color: var(--rose); margin: 0 0 20px; }
.valeur__texte { font: 400 22px/26.4px var(--poppins); color: var(--blanc); margin: 0; }
/* Plus de media query pour « rendre la main au flux » sous 1280 : elle n'existait que pour
rattraper les largeurs fixes qui debordaient. Sans largeur fixe, il n'y a rien a rattraper —
le retrait de la carte suffit a toutes les tailles d'ecran. */
/* Le visuel colle sous les cartes. Sa hauteur suit le ratio du fichier pour
afficher le dessin entier même lorsque sa largeur atteint 1800 px. */
.valeurs__fin { position: relative; margin-top: 0; }
.valeurs__visuel { width: 100%; height: auto; object-fit: contain; }
/* 09/09 — « l'image doit pas faire plus de 1800px de large » (Stephane) : au-dela, le bandeau
s'arrete et se centre sur le fond creme, au lieu de s'etirer sur toute la largeur. */
.valeurs__visuel { display: block; max-width: 1800px; margin-inline: auto; }
/* 25/09 — 1.68.46 : ESPACE RESERVE au bandeau. Dans l'accueil Elementor le bandeau est un widget image sans
largeur/hauteur declarees et charge en `loading="lazy"` : tant qu'on n'a pas defile jusqu'a lui il occupe 0 px,
puis la page saute de 524 px. Releve pixel du 25/09 : 1280x524 rendu APRES defilement ; mesureur des hauteurs
SANS defilement : section « Nos valeurs » a 457 px pour 1051 dessines. Le bandeau n'a jamais ete absent : c'est
la mesure qui ne le voyait pas, et le visiteur qui le voyait arriver d'un coup. Le ratio du fichier (1279x524)
reserve la place avant le chargement ; `auto` rend la main au ratio reel des qu'il est connu. */
.valeurs__fin img, .valeurs__visuel { aspect-ratio: auto 1279 / 524; }
.valeurs__fin .bouton { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); }
/* ── Galerie « Retours sur evenements » — bande violette, defilement AUTO,
sans bulle ni fleche (doc Stephane 29/07 + decision QCM 31/07) ───────── */
.retours { background: var(--violet); color: var(--blanc); padding-block: clamp(40px, 5vw, 64px); overflow: hidden; min-height: 330px; }
/* 25/09 — 1.68.46 : padding-block 48-84 -> 40-64. La bande de la maquette V3 fait 330 px ; avec le mur Instagram
sur une rangee (ci-dessous) elle faisait 799 px sur Nos ateliers et la fiche (mesure du 25/09). */
.retours h2 { color: var(--rose); }
.retours__rail { display: flex; gap: 32px; width: max-content; animation: retours-defile 40s linear infinite; }
.retours:hover .retours__rail, .retours:focus-within .retours__rail { animation-play-state: paused; }
.retours__rail img { width: 300px; height: 220px; object-fit: cover; border-radius: var(--blob); flex: none; }
.retours__rail img:nth-child(even) { border-radius: var(--blob-2); }
.retours__vide { font: 400 22px/1.4 var(--poppins); color: var(--rose); opacity: .85; }
/* 08/09 — social wall Instagram (5 derniers posts, plugin Instagram Feed) : le plugin pose ses
propres styles sur les vignettes ; ici seulement la tete de bande et le lien vers le compte. */
.retours__tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.retours__tete h2 { margin-bottom: 0; }
.retours__lien { display: inline-flex; align-items: center; gap: 10px; color: var(--rose); font: 400 20px/1.2 var(--poppins); text-decoration: none; }
.retours__lien:hover { text-decoration: underline; }
.retours__insta { margin-top: 24px; }
.retours__insta #sb_instagram { padding-bottom: 0 !important; }
/* 25/09 — 1.68.46 : LE MUR TIENT SUR UNE RANGEE (QCM Stephane, tour complet contre la maquette V3). Mesure du 25/09
sur Nos ateliers et la fiche : le plugin sert 20 vignettes (data-nummobile=20) en 4 colonnes (data-cols=4, quels que
soient les num/cols du code court) et la bande fait 799 px pour 330 dessines. On impose la grille : 5 vignettes, une
rangee, 12 px de gouttiere ; les autres restent dans le HTML mais ne s'affichent pas. Au telephone : 2 colonnes, 4
vignettes. Le `!important` est le prix des styles en ligne du plugin (largeur des items, gap du conteneur).
Reste mesure et ASSUME : vignettes carrees de ~222 px -> bande d'environ 420 px, pas 330. La maquette dessine un
« social wall » de remplissage ; 330 px exigerait des vignettes de 150 px, illisibles. */
/* 25/09 — 1.68.48 : la 1.68.46 MESUREE au navigateur (sonde imagerie-sonde-insta-2509, 11:41Z) rendait 4 colonnes
de 271 px et 4 vignettes, pas 5 : ① `#sb_instagram.sbi_col_4 #sbi_images` (deux ids) battait notre grille a un id
sur les colonnes ; ② `:nth-child` comptait un frere qui n'est pas une vignette, la 5e tombait dans `n+6`. Trois
fautes de compteur classiques (CLAUDE.md : un selecteur trop large attrape toujours un cousin). Remede : deux ids
et !important sur les colonnes ; les vignettes se comptent ENTRE ELLES (chaine de freres `.sbi_item ~ .sbi_item`),
plus jamais par position dans le parent ; et la vignette devient carree (le plugin lui posait 360 px de haut en
ligne pour 271 de large), ce qui ramene la rangee a ~214 px et la bande vers 415 px. */
/* 29/09 — 1.68.51 : QUATRE vignettes, pas cinq (Stephane, capture du bas de /nos-ateliers/ : « le plugin social wall doit
afficher 4 entree .. pas 5 » ; la 5e etait blanche). La demande du 08/09 disait 5 ; la derniere consigne gagne. Le plugin
ignore num/cols du code court (mesure du 25/09) : c'est ICI que le nombre se decide. Grille de 4 colonnes, et la chaine
de freres masque a partir de la 5e vignette (4 « ~ »), comme au telephone ou la regle etait deja a 4 (2 x 2). */
.retours__insta #sb_instagram #sbi_images { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; float: none !important; }
.retours__insta #sb_instagram #sbi_images .sbi_item { display: block !important; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.retours__insta #sb_instagram #sbi_images .sbi_item ~ .sbi_item ~ .sbi_item ~ .sbi_item ~ .sbi_item { display: none !important; }
.retours__insta #sb_instagram .sbi_photo { height: auto !important; aspect-ratio: 1 / 1; display: block; overflow: hidden; }
.retours__insta #sb_instagram .sbi_photo img { width: 100% !important; height: 100% !important; object-fit: cover; }
/* 25/09 — 1.68.49 : la bande faisait encore 597 px avec la rangee a 214 (sonde 12:06Z, enfants mesures) : le plugin
sert son en-tete (avatar + nom, 104 px) et son bouton « Suivre » (#sbi_load, 39 px) malgre showheader/showbutton=false
dans le code court, plus 24 px sous les vignettes. La bande a deja son titre et son lien vers le compte
(.retours__lien) : l'en-tete et le bouton du plugin font doublon, on les retire ICI seulement (pas ailleurs sur le
site). Bande attendue : 64 + 64 + 24 + 214 + 64 = 430 px pour 330 dessines ; le reste, c'est la taille des vignettes. */
.retours__insta #sb_instagram .sb_instagram_header, .retours__insta #sb_instagram #sbi_load { display: none !important; }
.retours__insta #sb_instagram #sbi_images { padding: 0 !important; margin: 0 !important; }
@media (max-width: 760px) {
.retours__insta #sb_instagram #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.retours__insta #sb_instagram #sbi_images .sbi_item ~ .sbi_item ~ .sbi_item ~ .sbi_item ~ .sbi_item { display: none !important; }
}
/* Fiche : « Informations pratiques » (champ ACF), sous le programme. */
.programme__infos { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--mauve); }
.programme__infos h3 { margin: 0 0 12px; }
.programme__infos ul { padding-left: 22px; }
@keyframes retours-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.retours__rail { animation: none; width: auto; overflow-x: auto; }
html { scroll-behavior: auto; }
}
/* ── Pied — blanc, logo 198, 3 colonnes ───────────────────────────────────── */
/* ⚠️ 13/08 — LE PIED DERIVAIT DE +10 px SUR LES CINQ ECRANS, et le padding rogne le cachait.
Mesure du 13/08 (imagerie-hauteurs) : le pied sert 266 px pour 256 aux noeuds, sur TOUS les
ecrans — c'est-a-dire que trois d'entre eux (contact, nos-ateliers, qui-sommes-nous) n'ont
plus aucun autre defaut de hauteur que celui-la. La cause n'etait pas le padding : les
COLONNES sont trop etroites (259 px chacune), donc « L'Imagerie Geneve » passe sur 2 lignes
(40 px au lieu de 20) et son sous-titre sur 3 (60 au lieu de 40). Le 12/08 on avait compense
en rognant le padding de 56 a 38 — un pansement qui fabriquait une fausse conformite : la
hauteur redevenait presque juste avec un contenu faux. On soigne la cause, donc le pansement
se retire en meme temps.
Pistes calees sur la maquette (Frame 33, x81 l1116) : logo 81→279, col1 361→634, col2
716→882, col3 964→1197. En `fr` plutot qu'en px : a 1280 on retombe pile sur ces valeurs, et
ca retrecit proprement en dessous au lieu de deborder entre 900 et 1120 px. */
/* 56 en haut, 57 en bas : le cadre du pied va de y1812 a y2068 (256) et son contenu de y1868 a
y2011 (143). Le 63 initial venait d'un contenu suppose a 137 — c'est le LOGO qui porte la
hauteur du pied (143), pas la colonne de texte. */
.pied { background: var(--blanc); padding: 56px 0 57px; }
.pied__grille { display: grid; grid-template-columns: 280fr 355fr 248fr 237fr; gap: 0; align-items: start; }
/* La boite du logo est dessinee 198x143 ; le fichier servi a son propre ratio et rendait 141,
d'ou +4 px sur le pied de TOUS les ecrans. `object-fit: contain` donne la boite exacte sans
deformer l'image d'un pour-cent — la cliente fournira son logo, et il tiendra dans le meme
cadre quel que soit son ratio. */
.pied__logo img { width: 198px; height: 143px; object-fit: contain; object-position: left top; }
.pied__logo-lien { display: inline-block; line-height: 0; } /* 16/09 : le logo du pied mene a l accueil */
/* 30/20 aux noeuds (12/08 puis comparateur typo du 13/08 : le site servait 26/28,6).
Marge 18 : le sous-titre est a y1906 pour un titre qui finit a 1888. */
/* uppercase en CSS et non dans le HTML : les noeuds V3 portent la casse normale + `textCase`
(transformation Figma, que l'extracteur ne lit pas) — confirme au pixel le 19/08 :
« Participer » rend 23 px de haut en maquette, un « p » descendant en donnerait 28.
GO Stephane 26/08. */
.pied h3 { font: 300 30px/20px var(--poppins); margin: 0 0 18px; text-transform: uppercase; }
/* ⚠️ `:not(.bouton)` — LA CAUSE DU BOUTON « Contact » TROP PETIT, et elle est invisible a la
relecture : `.pied a` pese (0,1,1) contre (0,1,0) pour `.bouton--gras`, donc la regle
GENERIQUE du pied ecrasait le style du bouton. Il etait servi en Poppins 18/20 au lieu de
700 23/27 — boite de 44x136 mesuree la ou la maquette dessine 49x152. On ne baisse pas la
specificite du bouton (ce serait un pansement de plus), on retire le bouton de la regle qui
n'aurait jamais du le viser. */
.pied p, .pied a:not(.bouton) { font: 400 18px/20px var(--poppins); margin: 0 0 10px; }
/* `padding-top` et non `margin-top` : une marge haute FUSIONNE avec la marge basse du titre
(max(18, 5) = 18, mesure du 13/08 : le premier lien tombait a 38 au lieu de 43). Le padding
ne fusionne pas — c'est la seule facon d'ajouter 5 px a un endroit ou une marge existe deja. */
.pied ul { list-style: none; margin: 0; padding: 5px 0 0; }
/* `li + li` et non `li` : une marge basse sur le DERNIER item allongerait la colonne de 23 px
sans qu'aucun contenu ne l'occupe — le pied gagnerait en hauteur ce qu'on vient de lui
retirer. Ecart de 43 px entre deux liens aux noeuds (y1911 puis y1954), soit 20 + 23. */
/* ⚠️ L'INTERLIGNE VA SUR LE `li`, PAS SEULEMENT SUR LE LIEN — la cause des 8 px restants du
13/08. Le `` est un element EN LIGNE : la hauteur d'une ligne de `` est le maximum
entre l'interligne du li et celui de son contenu. Le li n'en declarait aucun, il heritait donc
du 1,4 du corps de page (28 px) au lieu des 20 px des noeuds. Mesure : la colonne « Partenaire »
rendait 145 px pour 106 dessines — 28 + 23 + 2x28 au lieu de 20 + 23 + 2x20. Styler le lien
seul ne pouvait rien y faire, et c'est pour ca que la correction precedente n'a rendu que 2
des 10 px. */
.pied li { margin: 0; font: 400 18px/20px var(--questrial); }
.pied li + li { margin-top: 23px; }
/* ☠️ CETTE LIGNE PERDAIT CONTRE CELLE D'AU-DESSUS, et personne ne pouvait le voir en la
lisant. `.pied p, .pied a:not(.bouton)` (ligne ~376) vaut (0,2,1) en specificite — le
`:not()` compte son argument — alors que `.pied li a` ne vaut que (0,1,2). Le raccourci
`font:` de la premiere REECRIT la famille, donc les liens du pied sortaient en Poppins
malgre cette regle ecrite pour les mettre en Questrial.
Mesure du 16/08 contre la maquette : 19 des 22 ecarts d'imagerie venaient de la —
« S'inscrire a un atelier », « Faire un don », « Bildschulen », « Arcades », sur les 5 ecrans.
L'intention etait juste depuis le debut ; c'est la cascade qui la mangeait.
`:not(.bouton)` porte la specificite a (0,2,2) et rend la regle gagnante, sans `!important`
et sans toucher a la ligne du dessus (qui reste juste pour les paragraphes). */
.pied li a:not(.bouton) { font: 400 18px/20px var(--questrial); text-decoration: none; }
.pied li a:hover { text-decoration: underline; }
/* ⚠️ 18/08 — L'ICONE INSTAGRAM (consigne Stephane : « Footer 1) icone instagram »). Aux noeuds :
« Social Icons » 39x39 a x361/y2897, le bouton Contact 152x41 a x418/y2896. Donc 18 px entre
les deux, et leurs centres verticaux coincident au demi-pixel (2916,5 des deux cotes) —
c'est un alignement CENTRE, pas un alignement sur le haut ni sur la ligne de base. La couleur
est #4104AA, la meme que le texte du pied : `currentColor` la sert sans la redeclarer. */
.pied__contact { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pied__insta { color: var(--violet); display: inline-flex; line-height: 0; }
.pied__insta-svg { display: block; }
/* ⚠️ 18/08 — LES LIENS « PARTENAIRE » SONT SOULIGNES (consigne Stephane : « lien souligné sous
partenaire »), et SEULEMENT eux. Mesure sur l'export de la maquette, ligne par ligne : sous
« Bildschulen » un trait plein de 93 px a y2868-2869, sous « Arcades - ecole de l'imagerie »
un trait de 232 px a y2911-2912 — et ZERO pixel aux memes hauteurs sous « S'inscrire a un
atelier » et « Faire un don ». L'extracteur de noeuds ne lit pas `textDecoration` : sans cette
lecture au pixel, la difference etait indevinable.
⚠️ SPECIFICITE — `.pied li a:not(.bouton)` pese (0,2,2) et pose `text-decoration: none`. Il
faut donc au moins (0,3,2) pour la battre, d'ou le `> div:last-child` : c'est la colonne
Partenaire, la derniere du pied. Un simple `.pied__partenaire a` aurait PERDU sans bruit —
exactement la cascade qui servait les liens du pied en Poppins pendant des jours. */
.pied__grille > div:last-child li a:not(.bouton) { text-decoration: underline; }
/* 10 px sous le sous-titre (y1946 → bouton y1956) ; le `p` porte deja ses 10, d'ou 0 ici.
⚠️ 17/08 — LE « Contact » DU PIED EST LA SEULE EXCEPTION DE POLICE DE SA FAMILLE, et elle
est DESSINEE, pas devinee : les quatre autres boutons magenta portent Anton 22,82, celui-ci
porte Poppins 700 22,82 (Component 7, concordant sur les 5 ecrans de la maquette). Il est
aussi le seul dont le fond PEINT (Rectangle 3, 152x41) est plus court que son cadre (49) :
padding vertical 7, pas 11 — 101 + 2x25 = 151 pour 152 annonces, et 27 + 2x7 = 41 exact.
La regle porte (0,2,0) contre (0,1,0) pour `.bouton--gras` : elle gagne sans `!important`. */
.pied .bouton { margin-top: 0; }
.pied .bouton--gras { font: 700 22.82px/27.38px var(--poppins); padding: 7px 25px; }
/* Le `gap: 0` ci-dessus n'a de sens qu'a 1280, ou les pistes portent elles-memes l'espace de la
maquette. Des que la grille se replie, les colonnes se toucheraient : chaque repli redonne
donc sa gouttiere. (Arbitrage du 13/08 : le mobile est notre responsabilite en attendant une
maquette de Margaux — on pose des regles explicites plutot que de laisser le repli au hasard.) */
/* 16/09 — la ligne du bas du pied : la politique de confidentialite a gauche, la signature a droite, separees du
reste par un filet. Au telephone les deux passent l'une sous l'autre, centrees. */
.pied__bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--violet); }
/* 25/09 — 1.68.46 : ligne du bas resserree (40/18 -> 16/10 ; telephone 28 -> 12). Pied mesure a 357 px pour 256
dessines : la maquette n'a pas de ligne de confidentialite (51 px, legale, gardee), le reste etait de l'air.
Le pied SERVI vient du modele Elementor (pied-de-page.json, memes valeurs, repose par imagerie-elementor-pied-1609) ;
cette regle est le repli du theme et doit rester d'accord avec le constructeur. */
.pied__bas a { font: 400 16px/22px var(--questrial); color: var(--violet); text-decoration: underline; margin: 0; }
.pied__bas-credit { font: 400 16px/22px var(--questrial); color: var(--violet); margin: 0; }
.pied__coeur { color: var(--magenta); font-style: normal; }
@media (max-width: 560px) { .pied__bas { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; } }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; gap: 32px; } }
/* ── Fiche atelier ────────────────────────────────────────────────────────── */
/* Anton 60/89 aux noeuds — 1,483 et non le 1,13 du h1 generique. Le rapport est garde en
relatif pour que le repli mobile reste lisible : un interligne fixe de 89 px sous un corps
de 40 px ferait des trous. */
/* ⚠️ 28/08 — LE GALBE DE LA PHOTO VIENT DU THEME, PLUS DE L'IMAGE (GO Stephane).
La silhouette arrondie qu'on voyait sur les fiches etait DETOUREE DANS LE PNG de
demonstration : le theme n'imposait aucune forme. Tant qu'on regardait la demo, tout allait
bien ; la premiere vraie photo de Gaelle se serait affichee en RECTANGLE NET, et rien
n'aurait signale l'ecart avec la maquette — le genre de defaut qu'on ne decouvre qu'en
livrant. Le trace est desormais celui de la maquette, lu dans Figma par
figma-imagerie-formes.sh (noeud « Exemple event », VECTOR 694x513) et servi par masques.php
sous l'id `img-heros-fiche`.
`aspect-ratio` + `object-fit: cover` : la forme garde ses proportions quelle que soit la
photo posee, et l'image est recadree dedans au lieu d'etre deformee. ⚠️ A DIRE A LA CLIENTE :
le recadrage rogne les bords, donc cadrer large, sujet au centre — une photo verticale sera
coupee. C'est le propre d'un gabarit, pas un defaut.
⚠️ ET LE MASQUE NE VIT PAS SANS SON TRACE : un `clip-path: url(#id)` dont l'id est absent du
document fait DISPARAITRE l'element au lieu de le laisser entier. masques.php est inclus par
header.php avant tout contenu ; si un jour l'extracteur refuse cette forme (il refuse plutot
que d'inventer), il faut retirer cette regle EN MEME TEMPS. */
.heros--atelier .heros__visuel {
aspect-ratio: 694 / 513; object-fit: cover; clip-path: url(#img-heros-fiche);
}
.heros--atelier .heros__titre { font-size: clamp(40px, 4.7vw, 60px); line-height: 1.483; max-width: 580px; }
/* Poppins 400 35,4/42,5, et COLLE au titre (noeuds y261 juste sous un titre qui finit a 261) —
d'ou le margin-top a 0, qui annule le 28 px de `.heros--page`. */
.heros--atelier .heros__soustitre { margin-top: 0; font-size: clamp(24px, 2.77vw, 35.4px); line-height: 1.2; }
/* ⚠️ 29/09 — LE SOUS-TITRE PASSAIT SOUS L'IMAGE (Stephane, capture de la fiche « Lorem ipsum
dolor » : « le texte touche l'image .. sur ce type de template »). Le chapo heritait des
640 px de `.heros--page .heros__soustitre`, alors que l'image commence 608 px apres le debut
du texte (x688 - x80 a 1280) : des la troisieme ligne, il courait 32 px sous la photo.
Invisible sur la maquette, dont le sous-titre tient en deux mots (« Imagine et dessine »,
337 px) : c'est le contenu reel qui a trouve la limite, pas le dessin qui l'avait posee.
Ce que la maquette DECIDE : une colonne de texte de 576 px (titre x79 w576, image x689),
donc 34 px d'air avant la photo.
On cale la colonne sur l'IMAGE, pas sur un nombre : entre 900 et 1280 px la colonne se
resserre et l'image recule avec elle (--v-gauche est un %), un 576 fixe y recollerait.
Calcul : l'image est a --v-gauche de la boite W, le texte part a 20 px, et le % d'un
max-width se prend sur le contenu (W - 20) : 54,14 % x 1140 - 41 = 576 a 1280, et l'air
reste de ~32 px a toutes les largeurs. Le TITRE garde ses 580 a 1280 (- 37 px, air 28) :
aucune coupure de titre ne change sur grand ecran, il ne peut simplement plus deborder
quand l'ecran se resserre. Le bloc date/lieu suit la colonne : un nom de lieu long
(Poppins 30) atteignait la photo de la meme facon.
Couvre les deux balisages de la fiche (gabarit du theme ET modele Elementor
« suite-event-hero », qui portent tous deux `.heros--atelier`). Sous 900 px l'image passe
sous le texte : la regle est donc bornee aux ecrans ou l'image est A COTE (sans la borne,
le calcul donnait ~160 px de colonne a 390 px de large). */
@media (min-width: 901px) {
.heros--atelier .heros__soustitre,
.heros--atelier .atelier-infos { max-width: min(576px, calc(var(--v-gauche) - 41px)); }
.heros--atelier .heros__titre { max-width: min(580px, calc(var(--v-gauche) - 37px)); }
}
/* ⚠️ LA PASTILLE N'AVAIT PAS DE FOND. La maquette dessine un Rectangle 12 #E2A9F1 de 143x42
derriere « des 6 ans » (Exemple atelier 227:1344) ; le theme ne posait que le texte, sur le
rose du heros. Ce n'etait pas un ecart de hauteur, c'etait un element manquant — invisible
pour un comparateur de hauteurs, visible a l'oeil. Texte Questrial 25,7/29,3 pose a x96 y328
dans un rectangle a x79 y323 : 17 px a gauche, 5 en haut, 7 en bas.
RAYON : MESURE et confirme le 13/08 — le Rectangle 12 porte un cornerRadius de 59,87 sur une
boite de 42 px de haut. Un rayon superieur a la moitie de la hauteur est ecrete au rendu :
c'est donc bien une pilule, et `999px` est EXACT ici. On garde 999 plutot que 59.87 : les deux
dessinent la meme forme, et 999 dit qu'on veut une pilule quelle que soit la hauteur servie. */
.atelier-age {
/* ⚠️ 15/08 — `align-self` N'EST PAS UN DETAIL ICI : sans lui le badge s'etirait sur TOUTE la
largeur de la colonne. `display: inline-block` etait deja la et ne servait a rien — le
parent `.heros--atelier .heros__int` est une COLONNE FLEX, et un enfant de flex prend
`align-items: stretch` par defaut, ce qui ecrase la mise en ligne. Le defaut le plus voyant
du site (revue de Stephane, 15/08) tenait a une propriete presente mais neutralisee.
Aucun comparateur ne pouvait le dire : la boite existe, elle est juste large.
Cible mesuree au noeud : rectangle 143x42 en #E2A9F1, texte 110x30,5 a 17 px du bord —
17 + 110 + 17 = 144, le rembourrage actuel est donc DEJA juste. Seul l'etirement etait faux. */
display: inline-block; align-self: flex-start; margin: 20px 0 0; padding: 5px 17px 7px;
font: 400 25.7px/29.3px var(--questrial); background: var(--mauve); color: var(--violet);
border-radius: 999px;
}
/* Trois lignes Poppins 300 30/20 aux noeuds (y415, y462, y492), la derniere en 18/20 : 20 + 27
+ 20 + 10 + 20 = 97. Le `` porte une marge de 1em par defaut — 30 px chacun, invisibles a
la relecture et +60 px a l'ecran. */
/* Le retrait de 42 px appartient aux LIGNES, pas au bloc : c'est dans ce retrait que vivent
les deux icones, et un fond pose sur le conteneur commencerait apres son propre padding.
Les icones ont ete extraites de la maquette le 26/08 (job figma-imagerie-icones : calendrier
« fi-sr-calendar » 21x21, epingle 20x24, deja en #4104AA) — VISUELS D'ATTENTE d'une
bibliotheque tierce, droits a valider avant mise en ligne publique, comme les bitmaps. */
.atelier-infos { margin-top: 50px; font: 300 clamp(22px, 2.34vw, 30px)/20px var(--poppins); }
.atelier-infos p { padding-left: 42px; }
/* Les icones en FOND et non en ![]()
: un fond ne prend pas de place dans le flux, donc les
ordonnees mesurees justes (415 et 462) ne bougent pas d'un pixel en les ajoutant.
`background-position: left top` — l'epingle est dessinee 4 px plus haut que sa ligne
(y458 pour un texte a y462) ; ces 4 px ne sont pas servis, un fond ne peut pas depasser sa
boite par le haut sans etre rogne. Ecart connu, mesure, et prefere a un decalage du texte. */
.atelier-infos__date { background: url('visuels/icone-date.svg') no-repeat left top / 21px 21px; }
.atelier-infos__lieu { background: url('visuels/icone-lieu.svg') no-repeat left top / 20px 24px; }
.atelier-infos p { margin: 0 0 10px; }
/* 09/09 — L'ICONE DU LIEU ETAIT COUPEE (Stephane, capture) : l'interligne de 20 px (mesure au
noeud pour le texte) fait une boite de 20 px, et l'icone de fond en fait 24 (le lieu) ou 21
(la date) : le bas de l'epingle disparaissait. La boite s'ouvre a 24 px, le texte ne bouge pas. */
.atelier-infos p { min-height: 24px; }
.atelier-infos p:first-child { margin-bottom: 27px; }
.atelier-infos p:last-child { margin-bottom: 0; }
.atelier-infos .adresse { font-size: 18px; line-height: 20px; }
/* 22/09 (Stephane, capture : « trop serre ») : la date et le lieu se touchaient sur la fiche. DEUX causes.
1) Le modele Elementor de l'evenement (18/09) met la date et le lieu dans DEUX codes courts : la date
n'est plus le premier enfant de son bloc, `p:first-child` ne la trouve plus, et l'ecart de 27 px
de la maquette etait passe SOUS le lieu. On vise les lignes par leur CLASSE, plus par leur rang.
2) L'interligne fige a 20 px pour un corps qui monte a 30 : sur une ligne, les lettres debordent de
leur boite sans gene ; des que le texte passe a la ligne (telephone : date et lieu sur deux lignes
chacun a 390 px), les deux lignes se chevauchent. Interligne proportionnel, 1,25.
Les marges sont recalculees pour que l'ECART VISIBLE entre les lettres reste celui de la maquette :
mesure a 1280, la date et le lieu retombent a 47 px d'un sommet a l'autre (maquette 47), et le lieu
et l'adresse gardent leurs 6 px entre les lettres. Les icones restent centrees sur la PREMIERE ligne
de leur bloc, quelle que soit la taille du texte (0,625 em = le milieu d'une ligne de 1,25). */
.atelier-infos { line-height: 1.25; }
.atelier-infos .adresse { line-height: 1.25; }
.atelier-infos p.atelier-infos__date { margin-bottom: .32em; background-position: left calc(.625em - 10.5px); }
.atelier-infos p.atelier-infos__lieu { margin-bottom: 0; background-position: left calc(.625em - 12px); }
/* ⚠️ 13/08 — LA MESURE DU 12/08 COMPARAIT UN CONTENU A UN CADRE, et sa conclusion etait donc
inversee. Elle disait : « section rendue 1043 pour 867 aux noeuds — le contenu tombait juste
(863 contre 867), c'etait le padding qui debordait de 176 ». Mais 867 est la hauteur de la
SECTION dessinee (Frame 45), pas de son contenu : celui-ci va de y695 a y1402, soit 707 px,
avec 80 px de padding en haut et 80 en bas. Le contenu du site ne « tombait » donc pas juste,
il etait +156 trop haut — et on a rogne le padding de 160 a 92 pour compenser, ce qui a fige
une fausse conformite (bonne hauteur, mauvais contenu, marges ecrasees).
On rend son padding a la section MAINTENANT que la carte d'inscription fait sa taille : la
correction n'a de sens qu'en paire, appliquer l'une sans l'autre reouvrirait l'ecart de
l'autre cote. 80 + 707 + 80 = 867. */
.programme { padding-block: clamp(40px, 6.25vw, 80px); }
.programme__grille { display: grid; grid-template-columns: minmax(0, 494px) minmax(320px, 492px); gap: 64px; justify-content: space-between; }
/* 16/09 : fiche sans formulaire d inscription (case a cocher de l ecran evenement). Sans cette
regle, le texte resterait dans sa colonne de 494 px et la moitie droite serait vide. */
.programme__grille--pleine { grid-template-columns: minmax(0, 1fr); }
.programme__texte { font: 400 clamp(20px, 2.2vw, 25px)/1.2 var(--poppins); }
.programme__texte .bouton { margin-top: 36px; }
/* 09/09 — « texte coupe » (Stephane, iPhone 440 px) : `1fr` vaut minmax(auto, 1fr), et le
minimum auto d'une piste, c'est le contenu le plus large qu'elle porte — ici la carte
d'inscription a 492 px fixes. La piste s'elargissait a 492 et la grille debordait de l'ecran,
texte du programme compris. minmax(0, 1fr) coupe ce minimum, et la carte prend la largeur
de la colonne au lieu de l'imposer. */
@media (max-width: 900px) {
.programme__grille { grid-template-columns: minmax(0, 1fr); }
.carte-formulaire { width: 100%; max-width: 492px; justify-self: stretch; margin-right: 0; box-sizing: border-box; }
}
@media (max-width: 600px) { .carte-formulaire { padding: 28px 22px; } }
/* Formulaires — carte violette (noeuds Inscription 492x707) et champs clairs */
/* ⚠️ 13/08 — LA CARTE SERVAIT 863 px POUR 707 AUX NOEUDS : +156, soit a elle seule la moitie
de l'ecart total de la fiche atelier. Elle porte la hauteur de toute la section (la colonne
de gauche est bien plus courte), donc c'est elle qu'il fallait mesurer champ par champ.
Le decompte des noeuds, qui tombe juste au pixel (Frame 67, y695 h707) :
40 (padding haut) + 48 (titre) + 20 + 490 (les champs) + 20 + 49 (bouton) + 40 = 707
et dans les 490 : cinq champs a 62 + le message a 130 + cinq gouttieres de 10.
Un champ vaut 62 = label 28 + saisie 34, SANS espace entre les deux (y803 label, y831 saisie
aux noeuds : ils se touchent). Le site posait 28 + 4 + 47 = 79 — +17 par champ, six fois. */
/* Coins vifs : Frame 67 (492x707, #4104AA) n'a aucun cornerRadius — mesure du 13/08. Le 32px
etait devine. */
/* Frame 67 : 492 de large, de x701 a x1193 — soit 7 avant la fin de la zone paddee (1200).
Trois proprietes, chacune necessaire (banc de rendu du 26/08) : `width` parce que la
colonne de grille rendait 500 ; `justify-self: end` parce qu'un item de grille se place
par sa ZONE — un margin-right seul ne deplace rien quand l'item est ancre a gauche ;
`margin-right` pour les 7 derniers pixels depuis le bord de zone. */
.carte-formulaire { background: var(--violet); color: var(--blanc); border-radius: 0; padding: 40px 44px; width: 492px; justify-self: end; margin-right: 7px; }
.carte-formulaire h2 { font: 400 40px/48px var(--anton); letter-spacing: 1.6px; color: var(--blanc); text-align: center; margin-bottom: 20px; }
.champ { margin-bottom: 10px; }
/* uppercase : meme mecanisme `textCase` que `.pied h3` — la maquette rend « PRENOM DE
L'ENFANT* », le HTML garde la casse lisible. `.form-contact .champ label` en herite.
⚠️ nowrap, et c'est le comportement DE LA MAQUETTE, pas un pansement : le noeud du label
long (« Prénom et nom d'un·e responsable légal* », 412 px) DEBORDE le padding de sa carte
(x745+412=1157 pour une zone utile qui finit a 1149) — Figma laisse filer, il ne casse pas.
Notre boite, elle, cassait « LÉGAL* » a la ligne en capitales (composite du 26/08) et
allongeait toute la carte Inscription. Le texte du label appartient au theme, pas a la
cliente : il ne peut pas devenir assez long pour sortir de la carte. */
.champ label { display: block; font: 500 18px/28px var(--poppins); letter-spacing: .36px; margin-bottom: 0; text-transform: uppercase; white-space: nowrap; }
/* saisie = 34 px : 20 d'interligne + 7 de padding en haut et en bas. Ne pas revenir a un
interligne relatif (1.3 rendait 23,4 px, donc une hauteur qui depend de l'arrondi du
navigateur) — la maquette donne un nombre entier, on le sert entier. */
.champ input, .champ textarea {
/* rayon 12px DEVINE — voir la note ci-dessus, meme attente. */
width: 100%; border: 0; border-radius: 12px; padding: 7px 14px;
font: 400 18px/20px var(--poppins); color: var(--violet); background: var(--blanc);
}
/* ⚠️ 27/08 — LES CHAMPS DE LA CARTE « INSCRIPTION » SONT VIDES ET CERNES, PAS BLANCS ET PLEINS.
C'etait le premier poste d'ecart de la fiche atelier (bandes y980-1260 a 40-49 %, profil
horizontal en plateau sur toute la carte). Le site servait sept pavés BLANCS OPAQUES a coins
tres arrondis la ou la maquette dessine un simple contour blanc d'UN pixel sur le fond
violet : en surface, c'est le plus gros aplat faux de tout le site.
Mesure au pixel sur l'export de la maquette (colonne au milieu d'un champ) : une ligne
blanche a y857, du violet #4104AA de y858 a y889, une ligne blanche a y890 — donc bordure
1 px, INTERIEUR TRANSPARENT, hauteur 34 bordures comprises, et l'ecart d'un champ au suivant
vaut 39 px (929-890). Le rayon de 12 px etait DEVINE (le commentaire ci-dessus l'avouait) :
les coins sont vifs.
Le padding descend a 6 px pour que la bordure n'allonge pas la boite : 6 + 20 + 6 + 2 = 34.
Le texte saisi passe en blanc — du violet sur du violet serait invisible.
⚠️ NE PAS toucher `.form-contact` : ses champs sont sur fond BLANC et restent roses. */
.carte-formulaire .champ input, .carte-formulaire .champ textarea {
background: transparent; border: 1px solid var(--blanc); border-radius: 0;
padding: 6px 14px; color: var(--blanc);
}
/* Le curseur et le texte de saisie doivent rester lisibles : sur fond violet, le placeholder
du navigateur (gris par defaut) tombe a un contraste illisible. */
.carte-formulaire .champ input::placeholder,
.carte-formulaire .champ textarea::placeholder { color: #C9B6E8; }
.carte-formulaire textarea { height: 102px; resize: vertical; }
/* Le dernier champ ne porte pas de gouttiere : cinq champs, donc CINQ intervalles, pas six —
une sixieme marge allongerait la carte de 10 px sans rien contenir. C'est la meme erreur que
`.pied li` corrigee le meme jour ; elle se reproduit partout ou on espace par le bas. */
.carte-formulaire .champ:last-of-type { margin-bottom: 0; }
.champ--ligne { display: grid; grid-template-columns: 1fr 110px; gap: 16px; }
.carte-formulaire .bouton { display: block; margin: 20px auto 0; }
.champ-miel { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avis { border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font: 500 18px/1.35 var(--poppins); }
.avis--ok { background: #E4F5EC; color: #1A7F4E; }
.avis--ko { background: #FBE4E1; color: #C2372F; }
/* Formulaire contact — labels violets sur fond blanc, colonne 700 */
/* Zone du formulaire : 883 px aux noeuds (site 751 — mesure 12/08). Ce bloc est un
,
pas une
: il echappe au detecteur de bandes du job hauteurs, qui ne retient que
ce qui occupe la pleine largeur. Il occupe bien sa place, il n'etait juste pas LISTE — ne
pas conclure « section absente » d'une absence dans un tableau. */
/* ⚠️ 28/08 — LA COLONNE MANGEAIT 40 PX DU FORMULAIRE. `.colonne` pose 20 px de padding de
chaque cote : avec `max-width: 700`, les champs rendaient 660 la ou le noeud en dessine
700 (x290, la meme boite que le label). On declare donc la largeur COMME `.colonne` le
fait pour la sienne — contenu + padding — au lieu de retirer le padding, qui est la
seule marge du formulaire sur telephone.
Le padding haut passe de 89,6 a 100 : le premier label tombait a 647,6 pour 658 au noeud. */
.form-contact { max-width: 740px; margin-inline: auto;
padding-block: clamp(48px, 7.8vw, 100px) clamp(48px, 7vw, 90px); min-height: 883px; }
.form-contact .champ label { font: 500 25px/28px var(--poppins); letter-spacing: .5px; color: var(--violet); }
/* ⚠️ 28/08 — LES CHAMPS DE CONTACT SONT CERNES DE VIOLET SUR BLANC, pas roses et arrondis.
Meme correction que la carte « Inscription » le 27/08, sur l'autre famille de champs : on
servait des pavés roses a coins de 12 px la ou la maquette dessine un contour d'un pixel.
Noeuds de l'ecran Contact : label « Nom complet » x290 y658 sur 186x28 (Poppins 25,
capitales par textCase), champ x290 y693 sur 700x50, label suivant y773 — soit 7 px entre
le label et sa saisie, 30 px d'un champ au suivant, et une saisie de 50 px de haut
(20 d'interligne + 2 de bordures + 14 de padding en haut et en bas).
Le site servait 10 px de gouttiere : sur cinq champs, 100 px de formulaire manquants. */
.form-contact .champ { margin-bottom: 30px; }
.form-contact .champ label { margin-bottom: 7px; }
.form-contact .champ input, .form-contact .champ textarea {
background: var(--blanc); border: 1px solid var(--violet); border-radius: 0; padding: 14px;
}
.form-contact .bouton { display: block; margin-inline: auto; }
/* Bande don — violet 350, carte blanche RIB */
/* ⚠️ 27/08 — LA BANDE DON ETAIT ETALEE SUR TOUTE LA COLONNE ; la maquette y centre un bloc de
850 px. Noeuds : titre a x217 y1547, sous-titre a x217 y1622 (boite 354), carte « Frame 70 »
427x151 a y1540 dont le texte demarre a x672 — soit deux colonnes 354 + 427 separees de 69,
et un bloc qui va de x217 a x1067 dans un ecran de 1280. Le site servait `1fr` a gauche, donc
un sous-titre de 645 px de large sur UNE ligne au lieu de deux, et une carte repoussee au
bord droit. C'etait le poste d'ecart de Contact (bandes y1540-1680 a 35-44 %).
`justify-content: center` plutot qu'une marge en dur : la valeur fixe essayee au banc tombait
juste a 1280 et fuyait partout ailleurs, parce que la largeur utile de la colonne n'est pas
celle qu'on croit. Le centrage rend 215 pour 217 attendu — 2 px, et il tient a toute largeur.
`padding-block: 99` (et non 84) place la carte a y1540 EXACTEMENT : 99 + 151 + 99 = 349, soit
la hauteur dessinee de la section a un pixel pres. Verifie au banc de rendu. */
.don { background: var(--violet); color: var(--blanc); padding-block: clamp(48px, 8vw, 99px); min-height: 350px; }
/* 16/09 : 480 et non 427, pour que la ligne du RIB tienne sur une ligne quand la clamp du corps
plafonne a 25 px (mesure : 413 px de texte + 2 x 32 px de marge interne = 477). */
.don__grille { display: grid; grid-template-columns: 354px 480px; gap: 69px; justify-content: center; align-items: center; }
.don h2 { color: var(--blanc); margin: 0 0 16px; }
.don p { font: 400 clamp(20px, 2.2vw, 25px)/1.2 var(--poppins); margin: 0; }
/* ⚠️ 15/08 — LE RAYON EST LU, ET IL VAUT ZERO. Ce commentaire annoncait depuis le 13/08 un
« rayon DEVINE, a remplacer par la valeur lue au prochain verdict » : le verdict est arrive
(`figma-imagerie-rayons` sur la V3, journal 20260815-144321) et il dit **aucun champ ->
0 (coins vifs)** pour `Frame 45`, la carte d'equipe 257x391 #F8DDFE. On servait 24 px depuis
le debut. C'est la meme classe d'erreur que les « pilules » de nav le 13/08 : une forme
inventee par nous, ecrite en commentaire comme provisoire, et qui a survecu en se lisant
comme une mesure. Un provisoire annonce n'est pas un provisoire retire. */
/* ⚠️ 27/08 — LE RAYON PASSE ENFIN A ZERO. Le commentaire ci-dessus l'annonce depuis le 15/08
(« LE RAYON EST LU, ET IL VAUT ZERO », mesure `figma-imagerie-rayons` sur la V3) et la regle
servait toujours 24 px. Il ecrit lui-meme la lecon qu'il illustre : « un provisoire annonce
n'est pas un provisoire retire ». Douze jours entre le constat et le geste.
`min-height: 151` : la carte est dessinee a 151 px et ne contient encore qu'une ligne de
texte d'attente ; sans elle, elle rendait 86 px et remontait de 15 px. */
.don__carte { background: var(--blanc); color: var(--violet); border-radius: 0; min-height: 151px; padding: 28px 32px; font: 400 clamp(20px, 2.2vw, 25px)/1.2 var(--poppins); }
@media (max-width: 1279px) { .don__grille { grid-template-columns: minmax(0, 354px) minmax(0, 480px); } }
@media (max-width: 800px) { .don__grille { grid-template-columns: 1fr; justify-content: stretch; } }
/* ── Qui sommes-nous ──────────────────────────────────────────────────────── */
/* 7vw rendait 89,6 px a 1280 ; la maquette pose la bulle a 100 du haut de sa section (Frame 5
588→1048, bulles 688→948 : 100 de marge en haut ET en bas). 100/1280 = 7.8125vw — la valeur
retombe exactement sur la mesure a la largeur de reference, et continue de se reduire sur
les petits ecrans. Avec la bulle a 260, la section fait 100+260+100 = 460 : sa min-height
n'a plus a la rattraper, elle la confirme. */
.bulles { padding-block: clamp(48px, 7.8125vw, 100px); min-height: 460px; }
.bulles__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; }
/* ⚠️ 14/08 — LA BOITE FAIT 260, ELLE NE SE DEDUIT PAS DU CONTENU. La maquette donne aux
TROIS bulles la meme boite 352x260 (Vector 2/3/4, mesure aux noeuds). Le theme les laissait
grandir sur leur contenu avec un plancher de 220 : elles rendaient 220 (« Pour qui ? », 2
lignes) et 243 (« Par qui ? », 4 lignes). D'ou la PIRE bande de l'ecran — y900-940, 79,19 %
de pixels differents : a cette hauteur la maquette montre encore du violet (la bulle court
jusqu'a 948) quand le site a deja fini la sienne et laisse voir le fond.
Piste ecartee en chemin, et il faut le dire : j'ai d'abord cru que les trois bulles avaient
trois galbes distincts et que nous n'en servions qu'un. Le job de formes les a extraits tous
les trois — ils sont IDENTIQUES octet pour octet (meme sha256). Servir `img-bulle-1` aux
trois etait donc juste ; la cause etait la hauteur.
Second ecart trouve avec : la maquette CENTRE titre et texte (align=CENTER aux trois), le
theme les alignait a gauche.
Le texte est centre dans l'espace sous le titre (`margin: auto 0` en colonne flex). Residu
assume : la maquette pose ses trois textes a la main (leurs sommets descendent de 15 px par
ligne, la ou un centrage en donne 13) — l'ecart restant va de 1 a 5 px. Rejouer ce nudge
bulle par bulle serait copier une hesitation de trace, pas une intention de dessin. */
.bulle {
background: var(--violet); clip-path: url(#img-bulle-1);
height: 260px; padding: 41px 16px 28px;
display: flex; flex-direction: column; text-align: center;
}
/* Sous 900 px la grille passe en colonne : une hauteur figee y couperait le texte dans son
masque. La boite de la maquette n'a de sens qu'a la largeur ou elle a ete dessinee. */
@media (max-width: 900px) { .bulle { height: auto; min-height: 260px; } }
/* la bulle 2 partage le trace de la bulle 1 tant que le sien n'est pas extrait */
/* Pas de visuel d'attente dans les bulles : l'export du noeud « Vector 2/3/4 » est un APLAT
#4104AA a 99 % (45 couleurs, mesure du 12/08) — c'est la FORME DE FOND de la bulle, deja
rendue ici en CSS. Le poser aurait mis du violet sur du violet : le meme piege que la nav
rose-sur-rose du 31/07, invisible a la relecture du code. */
/* interligne 44,5 au noeud — le 45 etait un arrondi */
.bulle__titre { font: 400 37px/44.5px var(--anton); letter-spacing: 1.5px; color: var(--mauve); margin: 0; }
/* `margin: auto 0` : en colonne flex, le texte prend une part egale de l'espace libre au-dessus
et au-dessous — il se centre sous le titre, comme aux noeuds, sans valeur codee par bulle. */
.bulle__texte { font: 400 22px/26px var(--poppins); color: var(--blanc); margin: auto 0; }
.missions { background: var(--mauve); padding-block: clamp(56px, 8vw, 100px); min-height: 814px; }
/* ⚠️ LES CARTES BLANCHES MANQUAIENT (mesure du 13/08, la plus grosse de l'ecran). La bande
mauve avait bien ete posee a sa hauteur (814), et c'est precisement ce qui a masque le
defaut : la hauteur totale de « Qui sommes-nous » tombait EXACTEMENT juste (0 px d'ecart),
pendant que 7,7 points d'ecart pixel sur 27,49 vivaient a l'interieur. Une hauteur exacte
n'est pas une mise en page exacte — les deux se mesurent separement.
Les 7 cartes #FFFFFF (noeuds Frame 37..43) vivent SUR le mauve ; sans elles les textes se
lisaient a meme le fond. 549,5 x 106, colonnes a x=80 et x=650,5 (gouttiere 21), pas
vertical 122 (106 + 16 d'ecart), texte en retrait de 23 sur les quatre cotes (23+60+23=106).
Coins vifs : dans l'export, la carte fait ses 549 px des sa premiere ligne — un coin arrondi
retrecirait les premieres lignes, ce n'est pas le cas.
La grille rend (1120 - 21) / 2 = 549,5 par colonne : la largeur retombe seule sur la mesure.
Le `margin-top` passe a 54 (1266 - 1212) et l'emporte sur le `margin-bottom: .6em` du h2
generique (34 px), avec lequel il fusionne — meme piege que .ateliers-bande__tete plus haut. */
.missions__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 21px; margin-top: 54px;
align-items: start; }
/* ⚠️ 28/08 — LES CARTES S'OUVRENT, ET LE « + » LE DIT. La maquette pose un VECTOR 24x24 dans
CHAQUE carte (Frame 37..43) : sept accordeons, pas sept paragraphes. Trois mesures tenues
ici, toutes relevees au noeud : le texte occupe 423 px a 23 du bord gauche, le + fait 24 px
a 52 du bord droit — d'ou padding-right 52 et gouttiere 27 (549 - 23 - 423 - 27 - 24 - 52).
Les titres sont en CAPITALES par `text-transform`, jamais dans le HTML : la cliente ecrit sa
phrase normalement dans l'administration ([[textCase Figma = CSS]], regle du 26/08).
Le centrage vertical rend les deux geometries de la maquette d'un seul jeu de valeurs : 23 px
de blanc au-dessus et au-dessous d'un titre sur DEUX lignes (60), 38 sur UNE (30). */
.mission { background: var(--blanc); }
.mission__tete { display: flex; align-items: center; gap: 27px; min-height: 106px;
padding: 23px 52px 23px 23px; cursor: pointer; list-style: none; }
.mission__tete::-webkit-details-marker { display: none; }
.mission__tete::marker { content: ''; }
.mission__titre { flex: 1 1 auto; font: 400 25px/30px var(--poppins); letter-spacing: 1px;
text-transform: uppercase; color: var(--violet); }
/* Le glyphe est une croix pleine de 24x24 a bras de 8 (mesuree dans l'export : trois bandes de
8, coins vides), pas un caractere « + » : aucune fonte ne rend cette graisse-la. A l'ouverture
elle se reduit a la barre du milieu — le moins, dessine dans la meme matiere. */
.mission__plus { flex: none; width: 24px; height: 24px; background: var(--violet);
clip-path: polygon(33.33% 0, 66.67% 0, 66.67% 33.33%, 100% 33.33%, 100% 66.67%, 66.67% 66.67%,
66.67% 100%, 33.33% 100%, 33.33% 66.67%, 0 66.67%, 0 33.33%, 33.33% 33.33%);
transition: clip-path .18s ease; }
.mission[open] .mission__plus { clip-path: polygon(0 33.33%, 100% 33.33%, 100% 66.67%, 0 66.67%); }
.mission__corps { padding: 0 52px 26px 23px; }
.mission__corps p { margin: 0; font: 400 18px/28px var(--questrial); color: var(--violet); }
.mission--muette { font: 400 25px/30px var(--poppins); letter-spacing: 1px; margin: 0;
text-transform: uppercase; color: var(--violet);
background: var(--blanc); padding: 23px; min-height: 106px;
display: flex; align-items: center; }
@media (max-width: 760px) { .missions__grille { grid-template-columns: 1fr; } }
/* Equipe re-mesuree le 11/08 (Frame 45/53/61) : carte ENTIEREMENT rose 257x391, photo 257x221
en tete a coins droits, textes en retrait de 22px — nom Anton 26/31 ls 1.04, role et
« Lire la bio > » Questrial 18/20. Grille : colonnes de 257, ecarts 30/30.
Interprete (extracteur muet sur les rayons) : coins de carte 24px. */
/* ⚠️ 28/08 — LA SECTION RENDAIT 1540,8 POUR 1515 AU NOEUD, et les 26 px se lisaient plus bas
comme un decalage de toute la fin de page (bande « Soutiens » a 3403 au lieu de 3377).
Frame 18 se referme au pixel : 100 (haut) + 64 (titre) + 40 + 1233 (grille) + 78 (bas) = 1515.
Le theme servait 44 d'ecart titre->grille et un padding bas SYMETRIQUE de 100 — la symetrie
etait une supposition, la maquette ne la fait pas. Le `min-height: 1515` ne pouvait pas
rattraper l'exces : un minimum n'est pas un maximum. */
.equipe { padding-block: clamp(56px, 8vw, 100px) clamp(44px, 6.1vw, 78px); min-height: 1515px; }
.equipe__grille { display: grid; grid-template-columns: repeat(auto-fill, 257px); gap: 30px; margin-top: 40px; }
/* 15/09 — Stephane (capture telephone) : « sur mobile on centre » : en colonne unique, les cartes de 257 px se centrent. */
@media (max-width: 900px) { .equipe__grille { justify-content: center; } }
/* 16/09 — Stephane : « elargis la largeur max des fiches de 20 % sur mobile ». 257 -> 308 px (+19,8 %), et TOUT
le dedans suit, sinon la photo garderait ses 257 et laisserait un vide a droite : le cadre du masque vaut la
carte + 103 (il deborde a dessein, la carte le rogne), la photo vaut la carte, les deux gardent leurs rapports
dessines (343/229 et 257/293). Exprime en pourcentage de la carte et non en pixels, pour que la valeur suive
si la largeur change encore. Mesure a 375 : carte 308, photo 308 x 351, aucune page qui deborde. */
@media (max-width: 760px) {
.equipe__grille { grid-template-columns: repeat(auto-fill, min(308px, 100%)); justify-content: center; }
.membre__cadre { width: min(411px, calc(100% + 103px)); height: auto; aspect-ratio: 343 / 229; margin: -17px 0 7px -40px; }
.membre__photo { left: 40px; top: -32px; width: calc(100% - 103px); height: auto; aspect-ratio: 257 / 293; }
.membre__texte { min-height: 170px; margin: 14px 26px 0; }
}
/* ⚠️ 15/08 — LE RAYON EST LU, ET IL VAUT ZERO. Ce commentaire annoncait depuis le 13/08 un
« rayon DEVINE, a remplacer par la valeur lue au prochain verdict » : le verdict est arrive
(`figma-imagerie-rayons` sur la V3, journal 20260815-144321) et il dit **aucun champ ->
0 (coins vifs)** pour `Frame 45`, la carte d'equipe 257x391 #F8DDFE. On servait 24 px depuis
le debut. C'est la meme classe d'erreur que les « pilules » de nav le 13/08 : une forme
inventee par nous, ecrite en commentaire comme provisoire, et qui a survecu en se lisant
comme une mesure. Un provisoire annonce n'est pas un provisoire retire. */
/* ⚠️ 14/08, 21h — RETOUR A LA VALEUR D'ORIGINE, APRES TROIS MESURES. Ce bloc a servi trois
etats dans la soiree, et c'est le PREMIER qui gagne :
257x221, rogne par la carte -> Qui sommes-nous 13,20 % ← celui-ci
343x229, sans rognage (1.27/1.28) -> 15,34 %
343x229, rogne (1.29) -> 13,44 %
Les quatre autres ecrans rendent le meme centieme aux trois passages : la mesure est
deterministe, donc l'ecart de 0,24 est reel, pas du bruit.
CE QUE JE CROYAIS, ET QUI ETAIT FAUX. J'avais lu le vecteur `Vector 2` (343x229, deborde la
carte de 33 a gauche et 53 a droite) comme LE masque de la photo, et conclu que l'appliquer
a la zone 257x221 l'ECRASAIT d'un facteur 0,749. La mesure dit non : c'est `Frame 53`
(257x221) qui est le contenant de la photo, et le vecteur est une forme voisine — decorative
ou de composition, mais pas le decoupage.
La lecon, deja payee ailleurs aujourd'hui : une valeur relevee au noeud est un FAIT, mais le
ROLE qu'on lui prete est une hypothese. Elle se mesure comme les autres.
⚠️ 16/08 — LES DEUX MOITIES ETAIENT VRAIES, ET C'EST POUR CA QUE LE DEBAT TOURNAIT.
`Frame 53` EST le contenant (moitie juste, ci-dessus) ET `Vector 2` EST le decoupage : le
blob est pose a sa TAILLE NATURELLE 343x229, decale de (-33,-14) dans la fenetre, et c'est
la fenetre qui rogne le reste. Les deux ne s'opposent pas — les opposer est ce qui a coute
trois mesures. Le code, lui, gardait `clip-path: url(#img-equipe)` en l'etirant sur 257x221,
c'est-a-dire exactement l'ecrasement 0,749 que le commentaire ci-dessus dit avoir ecarte :
le commentaire et le code se contredisaient depuis le 14/08.
CE QUI TRANCHE, ET CE N'EST PLUS UN ROLE PRETE MAIS UN RENDU MESURE — l'export PNG de la
maquette (1:1, fenetre x80..337 y2066..2287 de « Qui sommes-nous ») lu au pixel :
fond lilas visible dans la fenetre maquette 3,91 %
servi 14/08 (etire sur 257x221) 9,41 %
blob 343x229 pose a (-33,-14) 4,03 %
ecart moyen de largeur pleine / ligne, contre la maquette :
servi 14/08 19,99 px (max 213)
blob naturel 0,34 px (max 12, anticrenelage du bas)
La maquette remplit la fenetre sur TOUTE sa largeur : le galbe ne se voit qu'en bas (15
dernieres lignes) et a peine en haut (2 lignes). En etirant le blob sur 257x221 on faisait
rentrer les quatre coins DANS la fenetre — les « coins lilas » de la revue du 15/08.
POURQUOI L'ESSAI 1.29 (« 343x229 rogne ») AVAIT EMPIRE LE SCORE (13,44 contre 13,20).
Il rognait bien, mais sans compenser la HAUTEUR DE FLUX : la photo remontait de 14 px et
tout ce qui suit — nom, role, bio, et les 10 cartes de la grille — se decalait d'autant.
Le pixel-diff agrege toute la page : un decalage de flux coute plus que le gain sur les
coins. D'ou le `margin-bottom` de compensation ci-dessous — la boite de flux reste
exactement 221 px (-14 + 229 + 6), le texte ne bouge pas d'un pixel, et seul le masque
change. C'est la seule variable de ce bloc.
Gain attendu, calcule avant la pose : 5,38 points de surface x 10 cartes = ~0,58 pt sur
l'ecran (13,19 -> ~12,6). Si le score MONTE, l'hypothese de compensation est fausse et ce
bloc revient a `width:100%; height:221px` — le chiffre tranche, pas ce commentaire.
⚠️ 16/08, 05:15 — LE CHIFFRE A TRANCHE, ET IL DISAIT NON : 13,43 contre 13,19. Soit
+0,24, c'est-a-dire au centieme pres l'echec de l'essai 1.29 (13,44). La compensation de
flux n'etait donc PAS le facteur — l'hypothese annoncee ci-dessus est tombee, telle qu'elle
avait ete posee. Ce qui suit n'est pas une troisieme tentative a l'aveugle : c'est ce que
le verdict a rendu lisible.
CE QUI CLOCHAIT, ET QUE NI LE BANC NI LE PIXEL-SCORE NE POUVAIENT DIRE SEULS. Le banc
prouvait que le MASQUE etait juste (0,33 px d'ecart de silhouette contre 22,44). Il l'etait.
Mais un masque juste sur une image mal cadree rend un ecran plus faux, et le banc ne
regardait que la decoupe. Aux noeuds, ce sont DEUX boites distinctes :
le masque (Vector 2) 343 x 229
la photo (Rectangle) 257 x 293, posee a (+33,-27) DANS le repere du masque
La 1.36.0 les a confondues : l'![]()
portait la boite du MASQUE, donc `object-fit: cover`
recadrait le portrait sur 343 de large au lieu de 257 — un autre morceau du visage, sur
les dix cartes. On avait corrige la decoupe en cassant le cadrage, et les deux erreurs se
compensaient presque exactement au pixel-diff. D'ou la separation ci-dessous : le CADRE
porte le masque, l'IMAGE garde sa taille et sa position de maquette. Chacune des deux
boites vient d'un noeud mesure, aucune n'est deduite de l'autre.
Si le prochain verdict monte encore, ce bloc revient a `width:100%; height:221px` sans
autre discussion : deux hypotheses tombees valent une hypothese de trop. */
/* ⚠️ 28/08 — LES TROIS LIGNES DE LA CARTE ETAIENT COLLEES EN HAUT. La maquette ne les espace
pas d'une valeur fixe : elle les REPARTIT dans une boite de 142 px, et ce sont les DEUX
variantes de carte qui le prouvent (lues sur Frame 45, cartes 1 et 2 de « Qui sommes-nous ») :
nom sur 1 ligne nom y2299 h31 · role y2356 · lien y2421 ecarts 26 et 25
nom sur 2 lignes nom y2299 h62 · role y2371 · lien y2421 ecarts 10 et 10
Le nom demarre TOUJOURS a 233 du haut de la carte et « Lire la bio > » finit TOUJOURS a 375 :
142 px de boite, contenu de 91 ou 122, reste reparti sur deux intervalles (51/2 = 25,5 ->
26 et 25 ; 20/2 -> 10 et 10). C'est `justify-content: space-between`, au demi-pixel pres.
⚠️ Une premiere passe de ce meme jour avait servi 26 et 25 en DUR, lues sur la seule carte 1.
Elles rendaient juste la carte 1 et allongeaient celle de Marc de 25 px — donc, par
l'etirement de la grille, LES DIX : qui-sommes-nous passait de 9,85 a 15,94 % au banc. Une
valeur relevee sur une instance n'est pas une regle ; deux instances qui divergent la
donnent.
Reste du compte : 221 (photo) + 12 + 142 + 16 (pied) = 391, la hauteur de la carte.
⚠️ Et `.membre` devient flex : hors flex, le `margin-bottom: 6` du cadre FUSIONNAIT avec le
`margin-top: 12` du nom (12 au lieu de 18), et le texte demarrait a 227 au lieu de 233. La
compensation de 6 px du cadre existait dans le code depuis le 16/08 sans jamais s'appliquer. */
.membre { background: var(--rose); border-radius: 0; overflow: hidden; padding-bottom: 16px;
display: flex; flex-direction: column; }
/* min-height et non height : quand la bio s'ouvre, la boite doit pouvoir grandir. */
.membre__texte { min-height: 142px; margin: 12px 22px 0; display: flex; flex-direction: column;
justify-content: space-between; }
/* Le CADRE = la boite du masque (343x229), posee a (-33,-14) dans la carte. Le +6 en bas rend
la hauteur de flux a 221 (-14 + 229 + 6) : le texte ne bouge pas d'un pixel. */
.membre__cadre {
position: relative; overflow: hidden;
width: min(343px, calc(100% + 86px)); aspect-ratio: 343 / 229;
margin: -14px 0 6px -33px;
clip-path: url(#img-equipe);
background: var(--mauve);
}
/* L'IMAGE = la boite de la photo (257x293) a sa place dans le masque (+33,-27). C'est CETTE
boite qui decide du cadrage : la changer, c'est changer le morceau de visage qu'on voit. */
.membre__photo {
display: block; position: absolute; left: 33px; top: -27px;
width: 257px; height: 293px; max-width: none; object-fit: cover;
}
.membre__nom { font: 400 26px/31px var(--anton); letter-spacing: 1.04px; margin: 0; }
.membre__role { font: 400 18px/20px var(--questrial); margin: 0; }
/* (le ton attenue des fiches d'exemple est retire le 14/08 — arbitrage Stephane : la demo
copie la maquette a l'identique, la distinction vit dans data-maquette, pas a l'ecran) */
.membre details { margin: 0; }
.membre summary { font: 400 18px/20px var(--questrial); cursor: pointer; list-style: none; }
.membre summary::-webkit-details-marker { display: none; }
.membre summary::after { content: ' >'; }
.membre details[open] summary::after { content: ' v'; }
.membre details p { font: 400 17px/1.4 var(--poppins); margin: 8px 0 0; }
/* Bandes de « Qui sommes-nous » aux hauteurs de la maquette (12/08) : bulles 460,
missions 814, equipe 1515, soutiens 481. min-height et jamais height — un contenu plus
long doit pouvoir pousser la bande au lieu d'en sortir. */
/* Meme oubli que « Nos missions », et c'est la meme cause : les 3 cartes blanches qui portent
les logos (Rectangle 13, 366x177 aux x 80/456/832, gouttiere 10) n'etaient pas posees, les
logos flottaient a meme le violet — 3,5 points d'ecart pixel.
Le compte tombe juste au pixel et sert de contre-epreuve a ces valeurs :
100 (padding) + 64 (h2) + 40 (ecart) + 177 (cartes) + 100 (padding) = 481 = le min-height.
D'ou le padding a 100 et non 90 : a 1280, clamp(48px, 7vw, 90px) rendait 89,6 et posait le
titre a 3466 pour 3477 dessines. Le max de la clamp n'etait pas atteint — c'est le 7vw qui
decidait, donc relever le seul plafond n'aurait rien change.
3 x 366 + 2 x 10 = 1118, dans les 1120 de la colonne. */
.soutiens { background: var(--violet); padding-block: clamp(48px, 8vw, 100px); min-height: 481px; }
.soutiens h2 { color: var(--rose); }
.soutiens__grille { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
.soutiens__grille img { max-height: 110px; width: auto; }
/* La carte EST le slot : le balisage porte deja 3 , aucun n'avait besoin d'etre ajoute.
Le texte passe en violet — le rose etait lisible sur le fond violet, il ne l'est plus sur
blanc. Et l'ancienne `opacity: .5` est retiree : posee ici elle aurait rendu la CARTE
translucide, donc le violet du fond serait remonte a travers le blanc qu'on vient de poser. */
.soutiens__slot { background: var(--blanc); flex: 0 0 366px; height: 177px;
display: flex; align-items: center; justify-content: center;
font: 400 clamp(34px, 4vw, 57px)/1.1 var(--anton); color: var(--violet); }
/* ── Archive ateliers : calendrier par mois ───────────────────────────────── */
/* Bandes de « Nos ateliers » et « Contact » aux hauteurs de la maquette (mesure 12/08) :
calendrier 1078 (site 649), retours 330 (319), formulaire 883 (751), don 350 (278).
min-height et jamais height — le contenu de la cliente doit pouvoir pousser la bande. */
/* Le decompte des noeuds V3, qui tombe juste au pixel : la section va de y558 a y1636 (1078),
dont 100 de haut + titre 64 + 10 + vue 804 + 100 de bas. Le padding etait un clamp qui
rendait 90 : on sert les 100 dessines. */
.calendrier { padding-block: 100px; min-height: 1078px; }
/* Titre « Calendrier - exemple ci-dessous. » : Anton 57/64 ls-0.25 a x80 — soit les 20 px
d'indentation de la colonne, comme le heros de la fiche et le programme. */
.calendrier__titre { font: 400 57px/64px var(--anton); letter-spacing: -.25px; color: var(--violet); margin: 0 0 10px; padding-left: 20px; }
/* Frame 71 : 1120 de large a x80 (donc jusqu'a 1200), 804 de haut. `min-height` et non
`height` : la vue du calendrier grandit avec le nombre d'evenements, et une hauteur fixe
la couperait le jour ou la cliente en publie dix. */
.calendrier__vue { margin-left: 20px; max-width: 1120px; min-height: 804px; }
/* 15/09 — Stephane : « agenda texte plus grand, il y a de la place », puis « utilise cette taille de texte
(150 % zoome sur Chrome) ». The Events Calendar dimensionne toute sa vue liste par des variables
(--tec-font-size-0..10, 11 → 42 px) : on les multiplie par 1,5 dans la vue seulement, le reste du site
ne bouge pas. Valeurs = defaut TEC x 1,5. */
.calendrier__vue .tribe-common {
/* 16/09 — « on a augmente de 50 %, c'est trop fort, baisse de 20 % » : 1,5 x 0,8 = 1,2. Les valeurs sont donc
l'echelle d'origine de The Events Calendar (11 → 42 px) multipliee par 1,2, arrondie au dixieme. */
--tec-font-size-0: 13.2px; --tec-font-size-1: 14.4px; --tec-font-size-2: 16.8px; --tec-font-size-3: 19.2px;
--tec-font-size-4: 21.6px; --tec-font-size-5: 24px; --tec-font-size-6: 26.4px; --tec-font-size-7: 28.8px;
--tec-font-size-8: 33.6px; --tec-font-size-9: 38.4px; --tec-font-size-10: 50.4px;
}
/* 16/09 — Stephane (capture de /nos-ateliers/) : « ajuste le calendrier jusqu'au bord, marge gauche et droite a revoir ».
MESURE avant correction (navigateur, colonne utile 40 → 989) : la barre de recherche commencait a 83, les lignes a 58,
l'image finissait a 947 — donc le calendrier flottait DANS sa colonne au lieu de la remplir, et rien n'etait aligne sur
le titre « Calendrier ». Cause : The Events Calendar pose 42 px de retrait de chaque cote sur son conteneur
(`--tec-grid-gutter-page`), et ses rangees les rattrapent par une marge negative de 24 — deux valeurs qui ne se
compensent pas. On regle la VARIABLE plutot que de se battre a coups de specificite (meme methode que l'echelle de
polices plus bas), puis on annule la marge negative des rangees et le retrait des deux colonnes de bord.
⚠️ LA SPECIFICITE DE CES SELECTEURS N'EST PAS DECORATIVE : la regle du plugin qui gagne est
`.tribe-common--breakpoint-medium.tribe-common .tribe-common-g-row--gutters > .tribe-common-g-col` (4 classes).
Un selecteur a 4 classes fait match nul et ne passe pas toujours : celui de la vignette en porte 6 a dessein.
L'image garde ses 270 x 182 dessines (elle grossissait a 318 une fois le retrait retire) et finit au bord. */
.calendrier__vue .tribe-common { --tec-grid-gutter-page: 0px; --tec-grid-gutter-page-small: 0px; }
.calendrier__vue .tribe-common--breakpoint-medium.tribe-common .tribe-common-g-row { margin-left: 0; margin-right: 0; }
.calendrier__vue .tribe-common--breakpoint-medium.tribe-common.tribe-events .tribe-common-g-row--gutters > .tribe-events-calendar-list__event-date-tag { padding-left: 0; }
.calendrier__vue .tribe-common--breakpoint-medium.tribe-common.tribe-events .tribe-common-g-row--gutters > .tribe-events-calendar-list__event-featured-image-wrapper {
padding-right: 0; flex: 0 0 270px; width: 270px; max-width: 270px;
}
/* 15/09 — Stephane : « la loupe est trop proche de Rechercher evenements » (mesure : padding-left 0 sur le champ,
loupe en absolu collee au texte). Le champ reprend un retrait a gauche, la loupe se cale a 14 px du bord. */
.calendrier__vue .tribe-common .tribe-events-c-search__input-control--keyword .tribe-common-form-control-text__input { padding-left: 48px; }
.calendrier__vue .tribe-common .tribe-events-c-search__input-control--keyword .tribe-events-c-search__input-control-icon-svg,
.calendrier__vue .tribe-common .tribe-events-c-search__input-control--keyword > svg { left: 14px; top: 50%; transform: translateY(-50%); }
/* ── La vue du calendrier (The Events Calendar) aux couleurs du theme ──────────
⚠️ CE QU'ON COPIE DE LA MAQUETTE, ET CE QU'ON NE COPIE PAS. Elle colle la CAPTURE d'un
AUTRE site sous un titre qui dit lui-meme « exemple ci-dessous » : les bleus et le rouge
qu'on y voit sont ceux du plugin sur CE site-la, pas une intention de design pour
l'Imagerie. On copie donc la BOITE (1120 de large a x80, voir `.calendrier__vue`) et on
habille le reste aux couleurs d'ici. Un bouton rouge sur un site violet serait un ecart
pixel gagne contre un defaut de design livre — et l'ecran gardera pour cette raison un
ecart irreductible, qui est ASSUME (arbitrage 26/08), pas un travail en retard.
COMMENT, sans traquer les selecteurs internes du plugin : TEC 6 declare ses ~206 variables
sur `:root` (common/build/css/variables-skeleton.css, lu dans le zip 6.17.3). Les
redefinir sur un ANCETRE de la vue suffit — l'heritage l'emporte sur `:root` pour tous les
descendants. Aucune regle du plugin n'est surchargee : rien a re-verifier a chaque mise a
jour, et ZERO `!important` — c'est la preuve qu'on ne lutte pas contre lui.
Les TEXTES gardent le gris du plugin (c'est ce que montre la capture) ; seuls les ACCENTS
bleus et la police changent. */
.calendrier__vue {
--tec-color-accent-primary: var(--violet);
--tec-color-accent-primary-hover: var(--magenta);
--tec-color-accent-primary-active: var(--magenta);
--tec-color-accent-primary-background: #4104AA12;
--tec-color-accent-secondary: var(--violet);
--tec-color-accent-secondary-hover: var(--magenta);
--tec-color-link-primary: var(--violet);
--tec-color-link-accent: var(--violet);
--tec-color-link-accent-hover: var(--magenta);
--tec-color-background-events-bar-submit-button: var(--violet);
--tec-color-background-events-bar-submit-button-hover: var(--magenta);
--tec-color-background-events-bar-submit-button-active: var(--magenta);
--tec-font-family-sans-serif: var(--poppins);
/* ⚠️ 28/08 — L'ECHELLE DE LA CAPTURE : la maquette montre la vue REDUITE A 76 %.
Mesure sur les deux images a 1280 : le titre d'evenement encre 389 px dans la maquette
contre 512 servis, et la vignette 270 contre 355 — le MEME facteur, 0,76. Margaux a colle
une capture d'ecran d'un navigateur plus large, pas une vue a taille reelle. La largeur du
bloc, elle, tombe deja juste (1016 servis contre 1020) : il ne faut donc PAS zoomer la vue
(essaye au banc — la largeur suit le zoom et la barre tombe a 787), seulement retailler ce
qu'il y a dedans.
⚠️ TOUTE L'ECHELLE Y PASSE, Y COMPRIS LES TROIS PETITS CRANS — arbitrage de Stephane le
28/08, apres deux passes ou ils avaient ete laisses intacts. La reserve reste ecrite ici
parce qu'elle est reelle et qu'elle se verifie a l'oeil : 11, 12 et 14 px tombent a 8,4,
9,1 et 10,6 px, et le cran 2 (10,6 px) porte le CORPS DES DESCRIPTIONS d'evenement. Sous
12 px, un paragraphe se lit mal, et ce n'est pas une question de gout : c'est le seuil ou
l'on commence a exclure des lecteurs.
⚠️ ET CE N'EST PAS CE QUI RAPPROCHE LE PAS DES EVENEMENTS — j'avais annonce l'inverse, la
mesure dit non. Crans reduits, le pas est reste a 255 px, au pixel pres. La hauteur d'une
ligne ne vient pas de son texte mais de ses MARGES : `.tribe-events-calendar-list__event-row`
porte `margin: var(--tec-spacer-9) … var(--tec-spacer-8)`, soit 48 px en haut et 40 en bas.
C'est l'echelle des ESPACEMENTS, juste en dessous, qui fait tomber le pas — pas celle des
polices. Predire l'effet d'une variable sans la mesurer, c'est ce qui a coute ce detour.
La fidelite au dessin l'emporte ici sur le confort de lecture parce que l'ecran est un
CALENDRIER D'EXEMPLE, pas une page de contenu : la maquette le presente elle-meme comme
« exemple ci-dessous ».
⚠️ Si un jour ce bloc porte de VRAIS textes destines a etre lus, c'est la premiere chose a
rouvrir — le cran 2, pas les autres. */
--tec-font-size-0: 8.36px; /* 11 */
--tec-font-size-1: 9.12px; /* 12 */
--tec-font-size-2: 10.64px; /* 14 — le corps des descriptions, voir la reserve ci-dessus */
--tec-font-size-3: 12.16px; /* 16 */
--tec-font-size-4: 13.68px; /* 18 */
--tec-font-size-5: 15.2px; /* 20 */
--tec-font-size-6: 16.72px; /* 22 */
--tec-font-size-7: 18.24px; /* 24 — le titre d'evenement, poste principal de l'ecart */
--tec-font-size-8: 21.28px; /* 28 */
--tec-font-size-9: 24.32px; /* 32 */
--tec-font-size-10: 31.92px; /* 42 */
/* LES ESPACEMENTS, AU MEME FACTEUR — c'est EUX qui commandent le pas entre deux evenements.
La ligne porte 48 px de marge haute et 40 de basse ; a 0,76 elles rendent 36,5 et 30,4,
et le pas descend vers les 228 px de la maquette. On garde l'echelle COMPLETE et non
seulement les deux crans utilises ici : le plugin en pioche d'autres dans ses vues Mois et
Jour, et une echelle a moitie reduite donnerait des rythmes incoherents d'un onglet a
l'autre. Les deux plus petits (4 et 8 px) sont laisses : sous 3 px, un espacement ne
separe plus rien, il disparait. */
--tec-spacer-2: 9.12px; /* 12 */
--tec-spacer-3: 12.16px; /* 16 */
--tec-spacer-4: 15.2px; /* 20 */
--tec-spacer-5: 18.24px; /* 24 */
--tec-spacer-6: 21.28px; /* 28 */
--tec-spacer-7: 24.32px; /* 32 */
--tec-spacer-8: 30.4px; /* 40 — marge basse de la ligne */
--tec-spacer-9: 36.48px; /* 48 — marge haute de la ligne */
--tec-spacer-10: 42.56px; /* 56 */
--tec-spacer-11: 48.64px; /* 64 */
--tec-spacer-12: 60.8px; /* 80 */
--tec-spacer-13: 72.96px; /* 96 */
}
/* LA VIGNETTE — 270 dans la maquette, 355 servis.
⚠️ POURQUOI PAS PAR LA VARIABLE, alors que tout le reste passe par elle. TEC dimensionne la
vignette et le bloc de texte avec la MEME variable, en couple : `--tec-grid-width-1-of-8`
vaut 12,5 %, la vignette en prend 3 et les details 5. La reduire retrecirait AUSSI les
details et ouvrirait un trou au milieu de la ligne. On pose donc la largeur de la vignette,
et les details prennent le reste — ce que montre la maquette, ou le texte est plus large
qu'ici (503 px de ligne contre 543 de boite servie).
La specificite egale celle du plugin (deux classes sur l'ancetre + une sur la cible) : c'est
ce qui evite un `!important`, dont le theme n'a aucun exemple. */
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper {
width: 270px;
}
/* 09/09 — LA PHOTO A DROITE, comme sur la fiche (Stephane : « la photo de droite doit se
retrouver dans la vue liste », puis « a droite »). Le plugin la met en premiere colonne ; on
inverse l'ordre des deux colonnes sans toucher a leur largeur. L'image prend le galbe des
cartes de l'accueil (meme masque, meme ratio 393/290). Le gabarit tribe/events/v2/list/event/
featured-image.php du theme sert le visuel d'attente quand l'evenement n'a pas d'image. */
/* ⚠️ 15/09 — LES DEUX `order` SONT PARTIS, ET C'EST EUX QUI METTAIENT LA PHOTO A GAUCHE. Mesure
dans le navigateur (styles calcules) : le plugin pose lui-meme `flex-direction: row-reverse`
sur la ligne a partir du point de rupture medium (views-skeleton.css) — la photo, premiere
dans le HTML, est donc a DROITE par defaut. En ajoutant order 2 / order 1 par-dessus, on
inversait l'inversion : image a gauche, texte a droite, exactement l'ecran que Stephane a
renvoye le 15/09 a cote de la maquette. Plus de galbe non plus : la maquette dessine un
RECTANGLE (« Photo », 195x130, coins vifs), pas le masque des cartes de l'accueil. */
.calendrier__vue .tribe-events-calendar-list__event-featured-image {
display: block; width: 100%; aspect-ratio: 270 / 182; height: auto; object-fit: cover;
}
/* 15/09 — « couleur du bouton recherche a adapter » : la maquette peint « Chercher » en magenta.
Le plugin lit `--tec-color-button-primary` (definie sur :root, donc surchargeable ici). */
.calendrier__vue { --tec-color-button-primary: var(--magenta); --tec-color-button-primary-hover: var(--violet); --tec-color-button-primary-active: var(--violet); }
/* ⚠️ `flex: 1 1 0` ET `min-width: 0` — PAS `flex: 1 1 auto`, et la capture de prod l'a montre
la ou le banc ne l'avait pas dit. Avec `auto`, la base du bloc de texte est la largeur de son
CONTENU : le second evenement, dont le titre court sur deux lignes, reclamait 946 px, ce qui
avec la vignette de 270 depassait la ligne de 1064 — le conteneur du plugin enveloppe, et la
vignette PASSAIT SOUS LE TEXTE, a gauche. Un evenement au titre court ne le declenche pas,
d'ou un ecran juste tant qu'on ne regarde que le premier.
`1 1 0` fait partir la base de zero (le bloc prend ce qui reste), et `min-width: 0` leve la
taille minimale implicite d'un enfant de flex — sans elle, un mot long le regonfle et
l'enveloppement revient. */
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-details {
width: auto; flex: 1 1 0; min-width: 0;
}
/* LE RYTHME VERTICAL — le pas entre deux evenements, mesure a 228 px dans la maquette.
⚠️ IL NE SE REGLE PAS EN ROGNANT UNE MARGE JUSQU'A TOMBER SUR 228. La decomposition le dit :
le pas, c'est la HAUTEUR DE LA LIGNE plus l'ESPACE entre deux lignes, et les deux differaient
de la maquette en sens INVERSE — ligne 139 contre 182 (donc trop courte), espace 97 contre 46
(donc deux fois trop grand). Les deux erreurs se compensaient a 8 px pres. Rogner 8 px de
marge aurait donne le bon total avec deux valeurs fausses, et le total aurait saute des qu'une
vraie photo, au format de la maquette, aurait rallonge la ligne.
① La hauteur vient de la VIGNETTE, donc du format de l'image. La maquette la dessine en
270x182 (ratio 1,484) ; l'image de demo importee avec le calendrier est plus plate, et c'est
elle qui ecrasait la ligne. `aspect-ratio` impose le cadre du dessin et `object-fit: cover`
recadre ce qu'on y met — la ligne garde donc sa hauteur quelle que soit la photo posee par la
cliente, ce qui est bien le but d'un gabarit.
② L'espace entre deux lignes doit valoir 46 px, separateur de mois COMPRIS (il est haut de
36) : il ne reste que 5 px de marge de chaque cote. */
/* ⚠️ TROIS CLASSES ICI AUSSI, ET LE DIAGNOSTIC A MIS DEUX TOURS. `aspect-ratio` sur l'`img`
rendait 270x150 au lieu de 270x182. J'ai d'abord accuse un `` intermediaire qui aurait
garde sa largeur : l'inspection du DOM dit qu'il n'y en a AUCUN, l'image est fille directe du
wrapper. La vraie cause est la meme que pour la marge — le ratio S'APPLIQUAIT bien, mais sur
une image large de 222 px et non de 270, parce que mon `width: 100%` a deux classes perdait
contre la regle du plugin. 222 / 1,484 = 150 : la hauteur etait juste, c'est la largeur qui
ne l'etait pas. Une valeur calculee a partir d'une autre valeur fausse a l'air d'un bug de
formule ; c'etait un bug de specificite. */
/* ⚠️ LA GOUTTIERE DU WRAPPER — c'est ELLE qui rognait l'image, et il a fallu forcer une valeur
dans le navigateur pour la voir. `width: 100%` S'APPLIQUAIT bien (le calcule disait 222 px,
maxWidth none, ratio pose, object-fit pose) : c'est le CONTENANT qui n'offrait que 222 px de
zone de contenu. Le plugin met `padding-left/right: var(--tec-grid-gutter-half)` sur les
colonnes de la ligne, soit 24 px de chaque cote — 270 - 48 = 222, et 222 / 1,484 = 150, la
hauteur qu'on lisait. Le wrapper est en border-box : sa largeur de 270 INCLUT ses gouttieres.
On les retire ici : l'ecart entre le texte et l'image reste assure par la gouttiere du bloc
de details, en face. */
/* ⚠️ ON N'ENLEVE PAS LA GOUTTIERE, ON DONNE AU CADRE LA LARGEUR QUI REND 270. Deux tentatives
pour l'annuler sont restees sans effet, et la chaine DOM dit pourquoi : le wrapper n'est PAS
enfant direct de `…__event-row` — il y a un ARTICLE et un DIV entre les deux, donc un
selecteur avec `>` ne matchait rien du tout (et non « perdait en specificite », ce que
j'avais cru deux fois). La gouttiere de 24 px vient de la grille `.tribe-common-g-col`, un
mecanisme d'alignement du plugin : la combattre, c'est s'engager a la re-verifier a chaque
mise a jour. Le wrapper etant en border-box, 270 + 24 + 24 = 318 laisse exactement 270 px de
zone de contenu, donc une image de 270 — le nombre de la maquette, obtenu en respectant la
grille au lieu de la defaire. */
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper {
width: 318px;
}
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-featured-image,
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper img {
display: block; width: 100%; max-width: none; aspect-ratio: 270 / 182; height: auto; object-fit: cover;
}
/* ⚠️ SPECIFICITE : le plugin ecrit `.tribe-common--breakpoint-medium.tribe-events .…__event-row`
(trois classes). Une regle a deux classes est ignoree — mesure : la marge restait a 30,4 px.
On egale sa specificite plutot que de sortir un `!important`, dont le theme n'a aucun exemple. */
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row {
margin-top: 5px; margin-bottom: 5px;
}
/* ⚠️ LA LIGNE QUI SUIT UN SEPARATEUR DE MOIS A SA PROPRE MARGE, et c'est la que se cachaient
les 25 px qui restaient. Le decompte le prouve : 5 (bas de la ligne precedente) + 36 (le
separateur « octobre 2026 ») + 30,4 (haut de la ligne suivante) = 71,4 px mesures, contre 46
voulus. La regle generale ci-dessus ne pouvait pas l'attraper : le plugin vise ce cas par un
selecteur adjacent, qui l'emporte. Un espace qui resiste apres qu'on a regle « la » marge est
presque toujours une SECONDE regle pour un cas particulier, pas la premiere mal appliquee. */
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__month-separator + .tribe-events-calendar-list__event-row {
margin-top: 5px;
}
/* 22/09 : LISTE DU CALENDRIER, maquette annotee de Stephane, quatre gestes :
1) la pastille donne le jour en toutes lettres, le jour et le mois, puis l'horaire
(« SAMEDI / 3 OCTOBRE / 14h00 - 17h00 »), reecrite par tribe/events/v2/list/event/date-tag.php ;
2) la ligne « octobre 3 @ 14h00 - 17h00 » au-dessus du titre disparait (date.php, a cote) ;
3) le titre remonte au niveau de la pastille et de l'image, et passe a 25 px (note de la maquette) ;
4) un trait fin separe les evenements, du meme gris que le separateur de mois (#D5D5D5, mesure).
Prototype injecte dans la page servie avant ecriture : pastille, titre et image s'alignent au
meme pixel en haut de la rangee. La plus longue ligne de la pastille, « 23 SEPTEMBRE », fait
106 px a 15 px de corps, pour une colonne de 122 : elle tient sans passer a la ligne. */
.calendrier__vue .tribe-events-calendar-list__event-date-tag.imagerie-date .imagerie-date__bloc {
display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; max-width: 100%; margin: 0;
}
/* 22/09, deuxieme passe (Stephane, capture : « aligne sur le s de septembre la date »). Le texte de la
pastille commencait 24 px a droite du « s » du separateur de mois, et l'horaire passait a la ligne
(« 14h00 - » / « 17h00 »). UNE seule cause, mesuree : le plugin donne a chaque colonne de la rangee
`padding: 0 var(--tec-grid-gutter-half)`, soit 24 px de chaque cote, par
`.tribe-common--breakpoint-medium.tribe-events .…__event-row > .tribe-common-g-col` (4 classes).
La pastille de 122 px n'offrait donc que 74 px au texte, et centrait visuellement ce qui y tenait.
La regle du 16/09 qui devait annuler ce retrait visait `.tribe-common-g-row--gutters > …__event-date-tag` :
les rangees de la liste NE PORTENT PAS cette classe, elle ne s'est jamais appliquee ici.
Sans retrait, les 122 px sont au texte : « 23 SEPTEMBRE » (106) et « 14h00 - 17h00 » (104) tiennent
sur une ligne, et le texte part au pixel du « s » (93 et 93, mesure a 1280). Le titre ne bouge pas :
l'ecart vient du retrait de SA colonne, qui reste. */
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row > .tribe-events-calendar-list__event-date-tag.imagerie-date {
padding-left: 0; padding-right: 0;
}
.calendrier__vue .imagerie-date__jour,
.calendrier__vue .imagerie-date__date,
.calendrier__vue .imagerie-date__heure { font: 700 15px/1.3 var(--poppins); color: #141827; letter-spacing: 0; }
/* 25/09 (Stephane, capture : « pour l heure met en 400 au lieu de 700 ») : l horaire passe en graisse
normale, le jour et la date restent gras. La hierarchie se lit mieux : quand, puis a quelle heure. */
.calendrier__vue .imagerie-date__heure { font-weight: 400; }
/* #141827 (Stephane, 22/09) : la couleur du titre de l'evenement, celle que le plugin donne au texte
principal ; la date se lit desormais avec le titre plutot que comme une etiquette. */
.calendrier__vue .imagerie-date__jour,
.calendrier__vue .imagerie-date__date { text-transform: uppercase; white-space: nowrap; }
.calendrier__vue .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-title {
margin-top: 0; font-size: 25px; line-height: 1.3;
}
/* 22/09 (Stephane) : « le titre peut faire maximum 2 lignes ». Au-dela, il s'arrete sur des points de
suspension ; le titre complet reste lisible sur la fiche. Pour tous les ecrans. */
.calendrier__vue .tribe-common.tribe-events .tribe-events-calendar-list__event-title {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Le trait ne se pose qu'ENTRE deux evenements (selecteur adjacent) : le premier d'un mois suit le
separateur, qui a deja le sien. Marges symetriques : la liste est en bloc, les marges fusionnent. */
.calendrier__vue .tribe-common.tribe-events .tribe-events-calendar-list__event-row + .tribe-events-calendar-list__event-row {
border-top: 1px solid #D5D5D5; padding-top: 22px; margin-top: 22px;
}
/* TELEPHONE. La colonne de la pastille n'y fait que 54 px (mesure a 390) : « 23 SEPTEMBRE » (106 px)
aurait chevauche le titre. La pastille passe au-dessus, sur toute la largeur et sur une ligne,
et le texte prend toute la largeur dessous. On vise l'ABSENCE de la classe de point de rupture
que le plugin pose selon la largeur du calendrier, comme le reste de ce fichier, plutot qu'une
requete media qui ne connait que la fenetre. */
.calendrier__vue .tribe-common.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-list__event-row { flex-wrap: wrap; }
.calendrier__vue .tribe-common.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-list__event-date-tag.imagerie-date {
flex: 0 0 100%; width: 100%; max-width: 100%; margin-bottom: 6px;
}
.calendrier__vue .tribe-common.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-list__event-row > .tribe-events-calendar-list__event-wrapper {
flex: 0 0 100%; max-width: 100%;
}
.calendrier__vue .tribe-common.tribe-events:not(.tribe-common--breakpoint-medium) .imagerie-date__bloc { flex-direction: row; flex-wrap: wrap; column-gap: .35em; }
.calendrier__vue .tribe-common.tribe-events:not(.tribe-common--breakpoint-medium) .imagerie-date__heure::before { content: "·"; margin-right: .35em; }
.calendrier__mois { font: 400 34px/1.2 var(--anton); letter-spacing: 1px; margin: 44px 0 8px; text-transform: capitalize; }
.calendrier__mois:first-of-type { margin-top: 0; }
.ligne-atelier {
display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px 28px; align-items: baseline;
padding: 20px 0; border-bottom: 2px solid var(--rose); text-decoration: none; color: var(--violet);
}
.ligne-atelier__date { font: 300 24px/1.1 var(--poppins); text-transform: uppercase; }
.ligne-atelier__titre { font: 400 28px/1.15 var(--anton); letter-spacing: -.17px; }
.ligne-atelier__lieu { font: 300 18px/20px var(--poppins); }
.ligne-atelier:hover .ligne-atelier__titre { color: var(--magenta); }
@media (max-width: 640px) { .ligne-atelier { grid-template-columns: 1fr; } }
.passes { margin-top: 56px; }
.passes summary { font: 400 26px/1.2 var(--anton); letter-spacing: .5px; cursor: pointer; }
/* Page generique */
.contenu-page { padding-block: clamp(48px, 7vw, 90px); }
.contenu-page a { color: var(--magenta); }
/* Utilitaires */
.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.saut-contenu { position: absolute; left: -9999px; top: 0; background: var(--violet); color: var(--blanc); padding: 12px 20px; z-index: 99; }
.saut-contenu:focus { left: 12px; top: 12px; }
/* ── Mode d'emploi et charte (pages privees, visibles seulement connecte) ──────────────────
28/08 — Ces deux pages ne sont PAS des ecrans de la maquette : elles s'adressent a l'equipe
de L'Imagerie et a la graphiste, pas aux visiteurs. Elles empruntent la charte du site (pour
qu'on reste chez soi) sans reprendre ses gabarits, qui sont mesures au noeud et n'ont rien a
voir avec un document de travail. Aucun ecran mesure ne partage une seule de ces regles :
elles ne peuvent donc pas deplacer un pixel de la convergence. */
.tuto { padding-block: clamp(40px, 6vw, 76px); }
.tuto__titre { margin-bottom: 10px; }
.tuto-chapo { font: 400 21px/32px var(--questrial); color: var(--violet); max-width: 74ch;
margin: 0 0 34px; }
.tuto-titre { font: 400 clamp(28px, 3.4vw, 40px)/1.15 var(--anton); color: var(--violet);
margin: 46px 0 14px; }
.tuto p { font: 400 18px/28px var(--questrial); color: var(--violet); max-width: 78ch; }
.tuto-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px; margin: 18px 0; }
.tuto-carte { background: var(--blanc); border: 2px solid var(--mauve); border-radius: 14px;
padding: 20px 22px; }
.tuto-carte--creme { background: var(--creme); border-color: var(--creme); }
.tuto-carte--rose { background: var(--rose); border-color: var(--rose); }
.tuto-carte h3 { font: 400 22px/26px var(--anton); color: var(--violet); margin: 0 0 8px; }
.tuto-carte p { margin: 0; }
.tuto-carte p + p { margin-top: 10px; }
.tuto a { color: var(--violet); text-underline-offset: 3px; }
/* La charte servie DANS le site. ⚠️ Le module d'administration est AUTOPORTANT : il imprime
ses propres regles, toutes portees par `.imagerie-charte`. On ne redecrit donc NI ses
tableaux NI ses pastilles ici — une surcharge « pour faire joli » casserait le rendu que
l'ecran d'admin sert deja correctement, et la page mentirait par rapport a lui. On ne pose
que le cadre de lecture. */
.charte-vue { padding-block: clamp(40px, 6vw, 76px); }
.charte-vue h1 { margin-bottom: 18px; }
.charte-vue .imagerie-charte { max-width: 1100px; }
.charte-vue .wrap { margin: 0; }
/* ── 09/09 — MOBILE, trois consignes de Stephane, captures a l'appui ──────────────────────
· « met les 3 menu sur la droite du logo » : la ligne d'en-tete ne se replie plus, le logo
a gauche, les trois pilules en colonne alignees a droite, chacune sur une ligne (les
« Nos / ateliers » coupes en deux venaient du repli) ;
· « en mobile en savoir a 90% de largeur » : le bouton de la bande valeurs, centre comme
avant (left 50 % + translate), s'etire a 90 % de la colonne ;
· « calendrier a ameliorer, prend exemple seconde capture » (mia-ge.ch en mobile) : mois en
gras, titre a 18 px, date lisible, l'adresse et la photo ne s'affichent pas sur mobile
(elles restent sur ordinateur, ou la photo est a droite). Les selecteurs prennent
`.tribe-common` en plus pour passer devant la feuille du plugin, chargee apres la notre. */
@media (max-width: 760px) {
.entete__ligne { flex-wrap: nowrap; gap: 12px; align-items: center; }
.entete__logo img { width: 90px; }
/* 16/09 — Stephane (capture iPhone) : « sticky menu sur mobile, met les 3 boutons sur une seule rangee, plus petits ».
Les trois entrees etaient EMPILEES sous 760 px (colonne alignee a droite) : l'en-tete faisait 132 px de haut a lui seul,
et colle en haut depuis la 1.68.17 il mangeait un sixieme de l'ecran en permanence.
LES VALEURS SONT MESUREES, PAS CHOISIES : au navigateur, les six jeux essayes donnent des boutons de 68 a 91 px pour
« Nos ateliers », 100 a 133 pour « Qui sommes-nous? » et 47 a 65 pour « Contact ». Le seul qui tienne sur une rangee
AVEC le logo a 320 px de large (le plus petit telephone courant) est celui-ci : logo 72, police 11, padding 5/6,
ecarts de 5 — nav de 231 px, aucun chevauchement, aucun debordement de page, verifie a 320, 360 et 375. */
.nav-pilule { flex-direction: row; align-items: center; gap: 5px; flex-wrap: nowrap; flex: 0 0 auto; }
.nav-pilule a { font-size: 11px; line-height: 18px; padding: 5px 6px; letter-spacing: .4px; white-space: nowrap; }
/* 16/09 — Stephane : « logo 10 % plus grand, et au defilement 20 % plus petit ; les boutons ne changent pas ».
72 -> 79 (+9,7 %), et 79 -> 63 en etat reduit (-20,3 %). Le logo garde le droit de RETRECIR sous 360 px :
mesure a 320, avec `flex: 0 0 auto` la ligne debordait de l'ecran, sans lui le logo tombe a 43 et rien ne sort.
Les trois boutons sont figes aux valeurs du haut de page, sinon l'etat reduit du bureau (police clamp, padding 8)
les elargissait de 231 a 251 px au defilement — mesure : 69 / 103 / 48 px dans les DEUX etats. */
.entete__logo img { width: 95px; height: auto; } /* 16/09 : +20 % sur les 79 px (Stephane) ; l etat reduit ne bouge pas, il reste a 63.
Mesure : a 375 le logo rend 95 x 68 avec 9 px avant les boutons ; a 360 la ligne le retrecit d elle-meme a 83, rien ne deborde. */
.entete--reduite .entete__logo img { width: 63px; }
.entete--reduite .nav-pilule a { font-size: 11px; line-height: 18px; padding: 5px 6px; letter-spacing: .4px; }
.entete__ligne { gap: 6px; padding-block: 6px; min-height: 0; }
/* 16/09 — Stephane (capture iPhone) : « formulaire mal place sur mobile ». La carte d'inscription porte une largeur
DESSINEE de 492 px (maquette) : a 375 elle sortait de 144 px A GAUCHE, les libelles etaient coupes (« OM ET NOM
D'UN·E RESPONSABLE »), et rien ne le signalait car la page, elle, ne debordait pas (la carte est dans une grille
qui la centre). Sous 760 px la carte prend la colonne, son padding passe de 44 a 20, la rangee « prenom + age »
s'empile, et les libelles ont le droit de passer a la ligne — le `nowrap` du bureau est ce qui les faisait deborder. */
.programme__grille { grid-template-columns: 1fr; gap: 32px; }
.carte-formulaire { width: 100%; max-width: 100%; margin: 0; padding: 28px 20px; box-sizing: border-box; }
.champ--ligne { grid-template-columns: 1fr; gap: 0; }
.carte-formulaire .champ label { white-space: normal; }
.valeurs__fin .bouton { width: 90%; box-sizing: border-box; white-space: nowrap; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__month-separator-text { font-size: 18px; font-weight: 600; color: var(--violet); }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-title { font-size: 18px; line-height: 1.3; font-weight: 700; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-datetime-wrapper { font-size: 14px; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-venue { font-size: 14px; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-venue-address { display: none; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-featured-image-wrapper { display: none; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-date-tag-daynum { font-size: 22px; }
.calendrier__vue .tribe-common .tribe-events-calendar-list__event-row { margin-bottom: 28px; }
}
/* ── 09/09 — LE HEROS DE L'ACCUEIL EST UN SLIDER (Stephane). Les diapositives partagent la
boite de `.heros__visuel` : sur ordinateur elles sont toutes en position absolue au meme
endroit, seule l'active est opaque (fondu de 0,8 s) ; sous 900 px le visuel est statique, donc
une seule diapositive dans le flux, les autres retirees de l'affichage. Le geste demande que
l'image recoive le pointeur, que `.heros__visuel` refuse d'ordinaire : on le rend ici, sur le
slider seulement. */
/* 15-16/09 — Stephane : « utilise toujours le meme masque », puis « on ne decoupe pas l'image ici, c'est le masque qui
le fait » (capture de l'editeur Elementor, illustration du heros remplacee par une photo rectangulaire).
LE GALBE N'APPARTIENT PLUS AU FICHIER, IL APPARTIENT AU THEME — meme doctrine que `.heros--atelier` depuis le 08/09 :
la forme est posee par le CSS, la photo est RECADREE dedans (aspect-ratio + object-fit: cover), donc n'importe quelle
image de la mediatheque rend la meme decoupe. Sans ca, une photo rectangulaire s'affichait en rectangle net et rien
ne signalait l'ecart avec la maquette.
Le trace : l'alpha de l'image de la maquette (elle porte le galbe exact, exporte de Figma), servi en `mask-image`.
La regle couvre les TROIS formes de balisage : le gabarit du theme (.heros__visuel), le widget Image d'Elementor et
le carrousel (swiper) — la cliente peut changer l'image dans les trois sans que la decoupe bouge.
⚠️ A DIRE A LA CLIENTE : le recadrage rogne les bords, donc cadrer large, sujet au centre.
⚠️ Contact et Nos ateliers n'en ont PAS : leurs visuels sont des DESSINS au trait (mesure : 330 293 pixels
transparents sur 769 x 490), leur alpha est le dessin lui-meme — le poser en masque decouperait la photo au trait. */
.heros--accueil .heros__visuel,
.heros--accueil .elementor-widget-image img,
.heros--accueil .swiper-slide img {
aspect-ratio: 832 / 773; object-fit: cover; height: auto;
-webkit-mask-image: url(visuels/heros-accueil.webp); mask-image: url(visuels/heros-accueil.webp);
-webkit-mask-mode: alpha; mask-mode: alpha;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.heros--qsn .heros__visuel,
.heros--qsn .elementor-widget-image img,
.heros--qsn .swiper-slide img {
aspect-ratio: 593 / 529; object-fit: cover; height: auto;
-webkit-mask-image: url(visuels/heros-qui-sommes-nous.webp); mask-image: url(visuels/heros-qui-sommes-nous.webp);
-webkit-mask-mode: alpha; mask-mode: alpha;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* La fiche atelier garde son trace SVG (img-heros-fiche, extrait de Figma) : meme resultat, voir plus bas. */
.heros--slider .heros__slide { transition: opacity .8s ease; }
.heros--slider .heros__slide:not(.heros__slide--active) { opacity: 0; }
.heros--slider .heros__visuel { pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
@media (max-width: 900px) {
.heros--slider .heros__slide:not(.heros__slide--active) { display: none; }
}
/* 09/09 — Les logos des soutiens : chaque logo dans une carte blanche de la maquette (366x177),
centre, sans deborder. Sous 800 px les cartes prennent la largeur de la colonne. */
/* 14/09 — cadrage aux mesures de la maquette (cadre 366x177) : Confederation 341x130,
OFSP 351x78, Ville de Geneve 249x172. Avec un cadre interieur de 342 px et une hauteur
max de 172, chaque export (682x260, 702x156, 498x344) retombe a 1 px pres sur sa taille
dessinee. L'ancien 110 px de haut faisait la Confederation 288 px de large au lieu de 341. */
.soutiens__slot--logo { display: flex; align-items: center; justify-content: center; padding: 0 12px; box-sizing: border-box; }
.soutiens__slot--logo img { max-height: 172px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 800px) { .soutiens__slot { flex: 1 1 100%; } }
/* ── 06/10 — LISTE DE L'AGENDA : titre, sous-titre, DEUX LIGNES de description, puis l'adresse PLUS PETITE
(post-it de Stephane, capture de /nos-ateliers/). Les gabarits tribe/events/v2/list/event/description.php et venue.php
rendent l'ordre ; ici, seulement l'allure. La coupe a deux lignes est celle du titre (22/09) : le texte complet reste
sur la fiche. Le lieu garde ses classes du plugin : la regle du telephone (adresse masquee sous 760 px) s'applique
toujours. Coupe-circuit : option imagerie_liste_description = 0 (le lieu remonte sous le titre, pas de description). */
/* La coupe vit sur le span interieur (.imagerie-liste__texte) : sur le bloc, elle perdait contre l'affichage que le
calendrier impose a ses descriptions (mesure servie du 06/10 : 3 a 4 lignes). max-height = filet si -webkit-box
etait un jour ecrase a son tour : deux lignes, jamais plus. */
.calendrier__vue .tribe-common.tribe-events .imagerie-liste__resume { margin-top: 6px; font: 400 15px/22px var(--poppins); color: #141827; }
.calendrier__vue .imagerie-liste__resume .imagerie-liste__texte {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
font: 400 15px/22px var(--poppins); max-height: 44px;
}
.calendrier__vue .tribe-common.tribe-events .tribe-events-calendar-list__event-venue.imagerie-liste__lieu {
margin-top: 10px; font: 400 13px/18px var(--poppins); color: #141827;
}
.calendrier__vue .tribe-common.tribe-events .imagerie-liste__lieu .tribe-events-calendar-list__event-venue-title { font-weight: 600; margin-right: .35em; }
/* ── 06/10 — LE PIXEL EN TROP DE /nos-ateliers/ SUR TELEPHONE (Stephane : « corrige le pixel en trop »). Sonde
imagerie-pixel-sonde-0610 : a 390, 375 et 360 px la page faisait UN pixel de plus que l'ecran, et le seul element en
cause etait la ligne d'atelier du calendrier (article ...__event, rangee « a gouttieres » du plugin) : marges -21/-21,
bord droit a 391. Cause : la grille du plugin deborde de 21 px de chaque cote en comptant sur une colonne qui laisse
21 px ; la colonne du theme n'en laisse que 20 sur telephone. On ne rogne rien : on accorde la rangee a la colonne
(20 px), seulement la ou le calendrier est en version etroite. Bureau inchange (la regle ne vise que l'absence de la
classe de point de rupture du plugin, comme le reste de ce fichier). */
.calendrier__vue .tribe-common.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-list__event.tribe-common-g-row--gutters {
margin-left: -20px; margin-right: -20px;
}