/* Habillage commun. Toutes les couleurs viennent du thème de l'événement :
ce fichier ne contient aucune valeur de couleur en dur. */
/* Transitions entre pages, SANS application monopage.
*
* Le reproche est juste : chaque clic provoquait un éclair blanc, et on
* perdait le fil. Mais réécrire le site en JavaScript coûterait ce qui
* fait sa solidité — la fenêtre légale, le sélecteur du pied, le mur
* lui-même fonctionnent sans JavaScript, et continueront.
*
* Le navigateur sait faire les deux choses qui manquaient :
* — fondre l'ancienne page dans la nouvelle (ci-dessous) ;
* — précharger la page survolée (voir barre.php).
* Le résultat perçu est celui d'une application monopage. Là où ce n'est
* pas géré, la navigation reste celle d'aujourd'hui : rien ne casse. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pm-sortie .16s ease both; }
::view-transition-new(root) { animation: pm-entree .22s ease both; }
@keyframes pm-sortie { to { opacity: 0; } }
@keyframes pm-entree { from { opacity: 0; } }
/* La barre et le pied ne clignotent pas : ils sont les mêmes des deux
côtés, on les fait glisser d'un seul tenant. */
.barre-haut { view-transition-name: pm-barre; }
footer { view-transition-name: pm-pied; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
* { box-sizing: border-box; }
/* ⚠ LE DÉFILEMENT VERS UNE ANCRE EST DOUX — demandé le 22/08. Un saut instantané
sur une page de vingt-quatre écrans ne dit pas OÙ l'on a atterri : on se retrouve
ailleurs sans avoir vu le chemin, et il faut relire le titre pour se situer. Le
glissement montre la direction, ce qui est la moitié de l'information.
⚠ Et il s'éteint pour qui a demandé moins d'animations : un défilement animé est
exactement ce que ce réglage système existe pour supprimer — pour certaines
personnes, c'est une source de nausée, pas un agrément. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* L'attribut « hidden » ne vaut que « display:none » dans la feuille du
navigateur : n'importe quelle règle du site qui pose un display le
contredit. « L'icône en couleur » restait ainsi affichée alors qu'elle
portait « hidden », parce que .champ-choix est en flex. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* Le pied de page reste EN BAS DE L'ÉCRAN même quand la page est
courte — sur « Connexion », il flottait au milieu du vide. La page est
une colonne : le contenu prend la place restante, le pied suit. */
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
overflow-x: hidden;
}
/* --- Décors ---------------------------------------------------------- */
/* Le cadre a été retiré : il traversait le contenu, et une fois passé à
l'arrière-plan il ne servait plus à rien qu'à border la fenêtre. Le
décor tient tout seul. La règle reste, neutralisée, pour que le
balisage existant n'ait rien à changer. */
.d-cadre { display: none; }
.d-svg, .d-lights, .d-plein, .d-bas, .d-haut { display: block; pointer-events: none; }
/* Les décors restent en place au défilement : ce sont les bords du
« cadre », pas du contenu. Un feuillage qui remonte avec la page casse
l'illusion de l'affiche. */
.d-coin { position: fixed; width: clamp(120px, 20vw, 240px); aspect-ratio: 200/120;
color: var(--sage-pale); opacity: .9; pointer-events: none; z-index: 1; }
/* Les branches du haut partent du bas de la barre, jamais derrière : le
décor commence là où finit l'interface. */
.d-coin.tl { top: var(--barre-h, 54px); left: 14px; }
.d-coin.tr { top: var(--barre-h, 54px); right: 14px; transform: scaleX(-1); }
.d-coin.bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.d-coin.br { bottom: 14px; right: 14px; transform: scale(-1, -1); }
.d-coin .d-svg { width: 100%; height: 100%; }
@media (max-width: 720px) { .d-coin.bl, .d-coin.br { display: none; } .d-coin { opacity: .5; } }
.d-lights { position: fixed; top: 0; left: 0; width: 100%; height: 74px;
color: var(--ink); z-index: 1; }
.d-bulb { animation: d-glow 3.8s ease-in-out infinite; }
@keyframes d-glow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.d-plein { position: fixed; inset: 0; width: 100%; height: 100%;
color: var(--sage-pale); z-index: 0; }
.d-bas { position: fixed; left: 0; bottom: 0; width: 100%; height: 120px;
color: var(--sage-pale); z-index: 0; }
.d-haut { position: fixed; left: 0; top: 0; width: 100%; height: 200px;
fill: var(--sage-pale); z-index: 0; }
@media (prefers-reduced-motion: reduce) { .d-bulb { animation: none; } }
/* --- La barre du haut -------------------------------------------------- */
/* Fixe, discrète, translucide : elle doit être atteignable sans faire
défiler 40 000 octets de réglages, sans pour autant se disputer
l'attention avec le grand titre. */
.barre-haut {
position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-barre);
display: flex; align-items: center; justify-content: space-between; gap: 14px;
/* ⚠ « clamp(16px, 3vw, 30px) » alignait la barre sur la FENÊTRE, pas sur la
page : à 1440 px le logo partait à 30 px quand le titre commençait à 190.
Voir « --page-bord ». */
padding: 9px var(--page-bord);
background: color-mix(in srgb, var(--cream) 62%, transparent);
backdrop-filter: blur(14px) saturate(1.15);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* ⚠ LE NOM DU SITE NE SUIT PAS LE THÈME DE LA PAGE. « var(--serif) » vient du
thème, et chaque thème choisit sa famille : les pages publiques sont en
« jardin-creme » (Iowan Old Style), l'espace de l'organisateur en « encre-bleue »
(Didot). « Les petits mots » changeait donc de police entre l'accueil et
Administration — relevé, pas supposé : Iowan Old Style 16,5 px d'un côté, Didot
16,5 px de l'autre, même graisse. Un mot-symbole est une identité, pas une
préférence d'affichage : il garde la police du site, quel que soit le thème que
l'organisateur a choisi pour SA fête. Le repli sur « --serif » sert aux vignettes
de thème, qui n'émettent pas le jeton. */
.barre-haut .marque {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--serif-marque, var(--serif)); font-size: 16.5px;
color: var(--ink-marque, var(--ink));
text-decoration: none; white-space: nowrap;
}
/* ⚠ UNE MOSAÏQUE DE QUATRE NOTES, PLUS UNE RANGÉE DE TROIS — 20/08.
Trois rectangles alignés se lisaient, à seize pixels, comme un pictogramme de
MENU. Et une rangée ne dit pas ce que fait le produit : l'objet du site est un
MUR de mots, pas une liste. Quatre notes en carré donnent une silhouette
reconnaissable jusqu'en favicon.
⚠ « --pas » est la seule mesure à changer : les trois endroits où la marque
apparaît — barre, projection, pieds imprimés — n'ont plus qu'à la redéfinir,
et les proportions suivent. Une marque dont chaque copie a ses propres
chiffres finit par avoir trois formes.
Les inclinaisons ne sont pas symétriques exprès : quatre notes posées bien
droites font une grille de tableur, quatre notes de guingois font un mur. */
.pastilles { --pas: 7px; display: grid; grid-template-columns: repeat(2, var(--pas));
gap: calc(var(--pas) * .2); }
.pastilles i { width: var(--pas); height: calc(var(--pas) * 1.14); border-radius: 1.5px;
background: var(--sage); display: block; }
/* ⚠ LE LOGO DE LA BARRE NE SUIT PAS LE THÈME, comme le nom à côté de lui — et
c'est SUR MOBILE que cela compte, puisque le nom y est masqué et que les tuiles
restent seules. Scopé à « .barre-haut .marque » : les mêmes pastilles servent
ailleurs (la vitrine, la projection), où suivre le thème est juste. */
.barre-haut .marque .pastilles i { background: var(--sage-marque, var(--sage)); }
.pastilles i:nth-child(1) { transform: rotate(-9deg); opacity: .92; }
.pastilles i:nth-child(2) { transform: rotate(5deg); opacity: .62; }
.pastilles i:nth-child(3) { transform: rotate(3deg); opacity: .74; }
.pastilles i:nth-child(4) { transform: rotate(-5deg); opacity: .52; }
.barre-haut .marque:hover { color: var(--sage-marque, var(--sage)); }
.barre-haut .liens { display: flex; align-items: center; gap: clamp(6px, 1.6vw, 18px); }
.barre-haut .liens a {
display: inline-flex; align-items: center; gap: 7px;
font-size: 14px; color: var(--ink-soft); text-decoration: none;
padding: 8px 4px; white-space: nowrap;
}
.barre-haut .liens a:hover { color: var(--sage); }
.barre-haut .liens a[aria-current] { color: var(--sage); }
.barre-haut .liens a.espace {
border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
color: var(--sage);
}
.barre-haut .liens a.espace:hover { background: var(--sage); border-color: var(--sage);
color: var(--paper); }
/* L'avertissement des tâches planifiées — visible du seul administrateur, et
seulement quand une tâche est en défaut. ⚠ « --rouge » et « --sur-rouge » et non
un rouge écrit en dur : ce sont des jetons calculés contre le fond du moment, et
« color:#fff » sur fond rouge donnait 1,9:1 en mode sombre. */
.barre-haut .liens a.espace.pm-alerte { color: var(--rouge); border-color: var(--rouge-bord); }
.barre-haut .liens a.espace.pm-alerte:hover { background: var(--rouge);
border-color: var(--rouge);
color: var(--sur-rouge); }
/* --- Les deux réglages d'affichage, au bout de la barre ------------------
*
* Ils sont RONDS et SANS LIBELLÉ, comme les pastilles flottantes : ce ne sont pas
* des destinations mais des réglages, et la barre ne doit pas laisser croire
* qu'elle mène quelque part de plus.
* ⚠ Le trait est « --line », celui des pastilles, et non « --line-champ » : la
* leçon du menu « Aller à… », deux jours plus tôt.
*/
.barre-affichage { display: inline-flex; align-items: center; gap: 6px;
/* Un peu d'air avec « Mon espace » : ils changent de nature. */
margin-inline-start: clamp(2px, .8vw, 8px); }
.barre-nuit, .barre-affichage .pop-menu > button {
width: 34px; height: 34px; padding: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); background: var(--paper); color: var(--sage);
cursor: pointer; font: inherit; flex: 0 0 auto;
transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.barre-nuit:hover, .barre-affichage .pop-menu > button:hover {
border-color: var(--sage); transform: scale(1.07);
}
.barre-nuit:focus-visible, .barre-affichage .pop-menu > button:focus-visible {
outline: 2px solid var(--sage); outline-offset: 2px;
}
/* ⚠ Le chevron de « .pop-menu > button » n'a pas sa place ici : il n'y a pas de
libellé à côté duquel s'aligner, et un drapeau plus un chevron dans 34 px ne se
lisent plus ni l'un ni l'autre. */
.barre-affichage .pop-menu > button svg { display: none; }
/* Le drapeau : un disque, dessiné par des dégradés (voir lib/langue.php).
⚠ Un filet intérieur plutôt qu'une bordure : les drapeaux qui portent du blanc
(France, Italie, Royaume-Uni) se fondraient dans le papier sans lui, et une
bordure extérieure aurait mangé sur le rond du bouton. */
.drapeau {
display: inline-block; width: 18px; height: 18px; border-radius: 50%;
flex: 0 0 auto; background-size: cover; background-position: center;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
/* Les deux pictogrammes du contraste : un seul est montré, selon le mode.
⚠ EN CSS ET NON EN JAVASCRIPT : les deux tracés sont dans la page, et la bascule
reste juste même si le script tombe — un bouton qui montre le mauvais symbole
dit le contraire de ce qu'il fait. */
/* ⚠ L'ORDRE COMPTE, ET J'AVAIS ÉCRIT CINQ RÈGLES DONT DEUX SE CONTREDISAIENT : la
dernière rallumait la lune en mode clair. Trois règles suffisent, dans cet
ordre — le cas général, puis ce qu'on cache, puis l'exception du mode sombre. */
.barre-nuit .ic-soleil, .barre-nuit .ic-lune { display: inline-flex; }
.barre-nuit .ic-lune { display: none; }
:root[data-nuit] .barre-nuit .ic-soleil { display: none; }
:root[data-nuit] .barre-nuit .ic-lune { display: inline-flex; }
/* Le menu des langues : des BOUTONS, pas des liens (voir assets/affichage.js).
« .pop-liste a » ne les habille donc pas — on reprend la même facture. */
.pm-langue-choix {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border: 0; border-radius: 6px; background: none;
font: inherit; font-size: 14px; color: var(--ink-soft);
text-align: start; cursor: pointer;
}
.pm-langue-choix:hover { background: var(--cream); color: var(--sage); }
.pm-langue-choix:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.pm-langue-choix.on { color: var(--sage); font-weight: 600; }
#pm-langues { min-width: 186px; }
@media (max-width: 620px) {
/* Sur un téléphone la barre est déjà serrée : les deux réglages passent au même
pas que les pastilles de cette largeur. */
.barre-nuit, .barre-affichage .pop-menu > button { width: 30px; height: 30px; }
.drapeau { width: 16px; height: 16px; }
.barre-affichage { gap: 4px; }
}
/* ⚠ « .nu » : le même bouton, sans libellé. Ce n'est pas une nouvelle forme —
c'est l'état que la barre prend déjà d'elle-même sous 620 px, où le mot
s'efface et l'icône suffit (voir la media query juste dessous). On en fait un
état PERMANENT pour le mur d'un invité, où la barre n'a le droit qu'à
l'essentiel : une icône passe, un menu de service non.
Le libellé part dans l'infobulle — le mur charge site.css ET infobulle.js,
donc c'est la vraie bulle du site et non celle du système. */
.barre-haut .liens a.espace.nu { padding: 8px 10px; }
.barre-haut .liens a.espace.nu span { display: none; }
/* Sur un téléphone, quatre entrées plus la marque ne tiennent pas dans
375 px : mesuré à 550 px de large, soit 175 px hors de l'écran.
Trois réductions successives, dans cet ordre :
— le libellé de « Mon espace » s'efface, l'icône suffit ;
— le nom du site s'efface, les trois pastilles le remplacent ;
— et en dernier recours la barre de liens défile au doigt. */
@media (max-width: 620px) {
.barre-haut { padding: 7px 12px; gap: 8px; }
.barre-haut .marque { font-size: 15px; }
.barre-haut .liens { gap: 4px; min-width: 0; overflow-x: auto;
scrollbar-width: none; }
.barre-haut .liens::-webkit-scrollbar { display: none; }
.barre-haut .liens > * { flex: 0 0 auto; }
.barre-haut .liens a { font-size: 13.5px; padding: 8px 6px; }
.barre-haut .liens a.espace { padding: 8px 10px; }
.barre-haut .liens a.espace span { display: none; }
}
@media (max-width: 430px) {
.barre-haut .marque .nom { display: none; }
}
@media print { .barre-haut { display: none; } }
/* --- Structure -------------------------------------------------------- */
/* « width: 100% » n'est pas décoratif ici.
Le corps de page est une colonne flex ; un « margin: 0 auto » sur un
élément flex ANNULE l'étirement, et l'élément se dimensionne alors sur
son contenu, plafonné par max-width. Tant que le contenu tenait, cela
ne se voyait pas — le tableau d'administration à treize colonnes a
révélé le défaut : la page entière défilait de côté. */
/* ⚠ UNE SEULE LARGEUR POUR TOUT LE SITE — 20/08. Il y en avait deux : 940 px
pour les pages de texte et la création, 1100 pour la galerie, les tableaux et
les murs. On passait donc d'une page à l'autre en voyant le contenu glisser
de quatre-vingts pixels, ce que François a relevé en comparant l'accueil à la
galerie.
⚠ Ce qui protège la lisibilité malgré l'élargissement : les blocs de PHRASES
restent bornés par « --sect » (640 px). Une page plus large n'allonge donc
pas les lignes de texte — elle donne seulement la même marge à tout le
monde. « .wrap.large » subsiste comme alias, pour ne pas avoir à toucher les
sept gabarits qui l'écrivent. */
.wrap { position: relative; z-index: var(--z-contenu); width: 100%; max-width: 1100px;
margin: 0 auto; padding: 0 20px 60px; }
.wrap.large { max-width: 1100px; }
/* Tout ce qui est une PHRASE est aligné à gauche — décidé le 17/08, pour tout
le site. Restent centrés les ÉTIQUETTES et les CONTRÔLES : la légende de
douze pixels sous une vignette de 46 px, une lettre de jour dans un
calendrier, un badge, la pastille flottante d'un message. Une légende de deux
mots dans une tuile est de la typographie, pas un paragraphe. */
.hero { text-align: start; padding: 88px 0 6px; }
/* Les deux pages sans barre — le mur d'un invité et l'écran de
projection — n'ont rien à dégager en haut : le titre remonte, et le
mur arrive plus vite sous les yeux. Si le navigateur ignore « :has »,
la marge d'origine reste : rien ne casse. */
body:not(:has(.barre-haut)) .hero { padding-top: 34px; }
@media (orientation: landscape) and (max-height: 500px) {
body:not(:has(.barre-haut)) .hero { padding-top: 18px; }
}
h1 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 6px;
font-size: clamp(28px, 6.4vw, 50px); }
.script { display: block; font-family: var(--serif); font-style: italic;
font-size: clamp(38px, 10vw, 74px); line-height: 1.05; }
/* L'interligne serré du grand titre en italique (1.05) fait plonger les
jambages — le « g » et le « j » de « grands jours » arrivaient sur la
ligne de sous-titre. La marge la descend franchement. */
/* L'ornement s'aligne aussi, et perd son filet de GAUCHE : deux filets
encadraient un texte centré ; à gauche, le premier pendait dans le vide avant
le premier mot. */
/* ⚠ PLUS DE TRAIT, ET TOUTE LA LARGEUR. Le petit filet vert à droite du
sous-titre était un ornement qui coûtait cher : il prenait jusqu'à 64 px et
14 px de gouttière, donc sur téléphone il poussait le texte à la ligne — un
sous-titre de trois mots sur deux lignes avec un trait pendant au bout de la
première. Et sur grand écran il ne décorait rien, puisque le texte
commençait à gauche. Retiré partout, sur toutes les pages.
L'interlettrage descend de .28em à .16em : c'est lui, plus que la taille,
qui faisait déborder « UN MUR, UN QR CODE, AUCUN COMPTE » d'une ligne. */
.fleur { display: block; color: var(--sage); margin: 26px 0 16px; }
.fleur::before, .fleur::after { display: none; }
.fleur span { display: block; font-size: 13px; letter-spacing: .16em;
text-transform: uppercase; line-height: 1.5; }
/* ⚠ PLUS DE BORNE DE 34 EM. Elle protégeait la lecture — une ligne de cent
cinquante caractères se perd — mais elle coupait tous les paragraphes du site
aux deux tiers de leur colonne, et François l'a signalé trois fois. Le garde-
fou existe ailleurs : « .wrap » borne la page à 940 px et « .wrap.large » à
1 100, soit au plus cent quinze caractères par ligne. La borne de 34 em
protégeait donc d'un danger que le conteneur écartait déjà.
« margin: 0 » et non « 0 auto » : le bloc part de la gauche. */
.lede { max-width: none; margin: 0; color: var(--ink-soft);
font-size: clamp(15px, 2.2vw, 17px); }
/* Le sous-titre de la carte « Le mur » — même habit que ceux des autres
activités, qui sont écrits en ligne dans leur JavaScript (14,5 px, encre douce,
dix-huit pixels d'air en dessous). Ici il est en CSS parce que le mur est rendu
par PHP : c'est la même valeur, pas une seconde décision. */
.sous-mur { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 18px; }
/* Tous les titres de section : même taille, alignés à gauche.
« text-align: left » explicitement, car plusieurs cartes centrent leur
contenu par un style en ligne — le texte de la carte peut être centré, son
titre non. Sans cette ligne, quatre pages affichaient des titres centrés
par héritage, et la page se lisait comme une affiche. */
/* ⚠ UN SEUL ÉCART AVANT UN TITRE DE SECTION — 24 px, le même qu'entre deux
encadrés (20/08). Sur une page de texte — la galerie, l'accueil, « confiance »
— la frontière entre deux sections n'est pas une bordure, c'est un « h2 » : son
écart du haut EST l'espacement entre sections. Il valait 26, 34, 38, 40, 44 et
46 px selon le gabarit, posé à la main dans neuf endroits. Tous retirés.
⚠ « margin-top » sur le h2 et non « margin-bottom » sur ce qui précède : c'est
le titre qui sait qu'il ouvre une section, pas le paragraphe qui la ferme. Et
un h2 qui ouvre une carte n'en a pas besoin — le rembourrage de la carte fait
déjà l'espace, d'où la neutralisation qui suit. */
h2 { font-family: var(--serif); font-weight: 400; font-size: 24px;
margin: 24px 0 8px; text-align: start; }
.carte > h2:first-child, .feuille > h2:first-child, form > h2:first-child,
section > h2:first-child, .hero h2, dialog h2 { margin-top: 0; }
/* Les titres de fenêtre suivent la règle : à gauche. Ils étaient centrés au
motif qu'une modale n'est pas une section de page — mais son contenu est un
formulaire aligné à gauche, et l'en-tête centré s'en détachait. */
.feuille h2, #pm-legal h2, #pm-a11y-panneau h2 { text-align: start; }
/* Téléphone tenu à l'horizontale : il ne reste que 375 px de hauteur.
Le grand titre mangeait tout l'écran et le mur commençait sous la
ligne de flottaison — un invité qui scanne le QR en tenant son
téléphone en travers ne voyait aucun Post-it. */
@media (orientation: landscape) and (max-height: 500px) {
/* 58 px et non 24 : la barre du haut est fixe et haute d'une
cinquantaine de pixels — en dessous, le titre passait dessous. */
.hero { padding: 58px 0 2px; }
h1 { font-size: clamp(24px, 4.6vw, 34px); }
.script { font-size: clamp(27px, 6vw, 40px); }
.fleur { margin: 10px 0 8px; }
.lede { font-size: 14.5px; }
.wrap { padding-bottom: 30px; }
}
/* --- Boutons et champs ------------------------------------------------ */
/* L'ÉCHELLE DES BOUTONS — quatre pas, nommés, et rien entre eux.
*
* Relevé le 17/08 sur la seule page d'un événement : SEPT hauteurs différentes
* pour des éléments qui se présentent tous comme des boutons — 52, 51, 49, 44,
* 40, 39 et 38 px. Neuf dans la feuille de style, plus sept tailles posées en
* style en ligne. Personne ne l'avait décidé : chaque section avait ajusté la
* sienne, et l'incohérence s'était accumulée section par section.
*
* grand 54 l'appel à l'action d'une page d'accueil, une fois par page
* normal 46 l'action ordinaire — c'est le défaut, on n'écrit rien
* petit 38 une action secondaire dans une rangée dense
* mini 30 une action en fin de ligne dans une liste
*
* ⚠ Aucune taille de bouton ne s'écrit plus en style en ligne ni dans une règle
* de section. Un bouton qui a besoin d'une autre taille a besoin d'un des quatre
* pas ; s'il n'y rentre pas, c'est le pas qui manque, et il se nomme.
*
* Le mini reste au-dessus des 24 px du critère WCAG 2.5.8 ; les trois autres
* tiennent la cible de 44 px recommandée au doigt.
*/
:root {
--bt-grand: 54px; --bt-grand-t: 17px;
--bt: 46px; --bt-t: 15.5px;
--bt-petit: 38px; --bt-petit-t: 14px;
--bt-mini: 30px; --bt-mini-t: 13px;
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
min-height: var(--bt); padding: 11px 22px;
border: 1px solid var(--sage); border-radius: 999px;
background: var(--paper); color: var(--sage);
font: inherit; font-size: var(--bt-t); text-decoration: none; cursor: pointer;
/* « line-height » posé : sans lui le bouton hérite du 1,55 du corps de page,
son contenu fait 24 px, et la hauteur dépasse le pas de deux pixels — 48 au
lieu de 46. Deux pixels ne se voient pas seuls ; ils se voient à côté d'un
champ de 46. */
line-height: 1.2;
transition: background .18s ease, color .18s ease, transform .12s ease;
}
.btn.grand { min-height: var(--bt-grand); padding: 14px 30px; font-size: var(--bt-grand-t); }
.btn.petit { min-height: var(--bt-petit); padding: 8px 16px; font-size: var(--bt-petit-t); gap: 7px; }
.btn.mini { min-height: var(--bt-mini); padding: 5px 12px; font-size: var(--bt-mini-t); gap: 6px; }
.btn:hover { background: var(--sage); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn.plein { background: var(--sage); color: var(--paper); }
.btn.plein:hover { filter: brightness(1.1); }
.btn.discret { border-color: var(--line); color: var(--ink-soft); }
/* Le survol doit repasser en couleur claire : sans cette règle, la couleur
de .discret l'emportait sur celle de :hover (même spécificité, déclarée
plus bas), donnant du texte sombre sur fond vert. */
.btn.discret:hover { background: var(--sage); color: var(--paper); border-color: var(--sage); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label { display: block; font-size: 14px; margin: 16px 0 6px; color: var(--ink-soft); }
/* Un libellé en TÊTE de sa colonne n'a pas de marge haute.
Sans cette règle, il fallait un « style="margin-top:0" » sur chaque
premier libellé d'une grille — et il suffisait d'en oublier un pour que
deux champs côte à côte soient décalés de la hauteur d'une marge. C'est
exactement ce qui décalait « Ville » sous « Code postal ». Une règle vaut
mieux que dix rappels.
⚠ Ne viser QUE les cellules de grille. Une première version incluait
« .atelier label:first-child », qui attrapait presque tous les libellés de
la page et supprimait le rythme vertical entre les champs d'une même
colonne. */
.deux > label:first-child, .deux > * > label:first-child,
.ch > label:first-child, .carte > label:first-child { margin-top: 0; }
/* ⚠ UN « input[type=hidden] » COMPTE COMME PREMIER ENFANT, et défait la règle
ci-dessus. Il n'affiche rien, mais « label:first-child » ne s'applique plus :
le premier libellé retrouve ses 16 px de marge haute, et la colonne descend
d'autant. C'est ce qui décalait le texte d'explication de « Créer une
organisation » — sa colonne de droite commençait 16 px plus haut que « Nom »,
parce que le formulaire de gauche s'ouvre sur « ».
Sept formulaires du site ouvrent ainsi (un en administration, six en
réglages) : la règle vaut donc mieux qu'un « style="margin-top:0" » ajouté à
chacun — c'est déjà le raisonnement du commentaire précédent, poussé d'un
cran. Deux niveaux d'input caché suffisent : aucun formulaire n'en aligne
trois avant son premier libellé. */
.deux > * > input[type=hidden]:first-child + label,
.deux > * > input[type=hidden]:first-child + input[type=hidden] + label,
.carte > input[type=hidden]:first-child + label,
.ch > input[type=hidden]:first-child + label { margin-top: 0; }
/* LES CHAMPS ONT LA HAUTEUR DES BOUTONS, et ce n'est pas une coquetterie.
Ils faisaient 51 px quand un bouton normal en fait 46. Or dans une rangée
souple — « écris ton mot » + « Ajouter », « colle le lien » + « Enregistrer » —
les enfants d'un flex s'étirent par défaut sur la hauteur de la ligne : le
bouton prenait donc 51 px à côté du champ, et 46 ailleurs. Le même bouton
changeait de taille selon son voisinage, ce qui explique une bonne part de
l'incohérence constatée.
« line-height » posé explicitement : sans lui, la hauteur dépend de la
police du navigateur, et « min-height » ne suffit pas à la fixer. */
input[type=text], input[type=number], input[type=date], input[type=email], textarea, select {
width: 100%; padding: 11px 13px; font: inherit; font-size: 16px; line-height: 1.35;
min-height: var(--bt);
border: 1px solid var(--line-champ, var(--line)); border-radius: 4px;
background: var(--paper); color: var(--ink);
}
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--sage);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent);
}
textarea { min-height: 120px; resize: vertical; font-family: var(--serif); font-style: italic; }
.compte { text-align: end; font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
/* « safe flex-end » et non « flex-end ».
*
* Une rangée alignée à droite (ou centrée) qui DÉBORDE pousse son début
* hors de la boîte, du côté opposé — et ce début devient inatteignable :
* on ne peut pas défiler vers une zone négative. C'est exactement ce
* qu'on voyait, le premier bouton coupé à gauche.
*
* Le mot-clé « safe » dit au navigateur de retomber sur le début dès que
* le contenu déborde. L'alignement voulu s'applique quand tout tient,
* et il s'efface quand il ferait perdre du contenu. */
.ligne { display: flex; gap: 10px; justify-content: safe flex-end; margin-top: 20px;
flex-wrap: wrap; }
.ligne .btn { flex: 1 1 auto; }
/* ⚠ UNE NOTE DANS UNE LIGNE DE BOUTONS PREND SA PROPRE LIGNE, ET LA DERNIÈRE.
Écrite entre deux boutons avec « width:100% », elle renvoyait le dernier —
« Enregistrer », l'action principale de la page — sur une TROISIÈME rangée :
quatre boutons et une phrase occupaient trois lignes. Le « order » le garantit
même si le gabarit la place au milieu, ce qui est le cas naturel quand la note
commente le bouton d'avant.
⚠ « text-align: start » et non « left » : la ligne est en « flex-end », donc
sans cela la phrase se collait à droite ; et « left » serait faux en arabe. */
.ligne-note { flex: 1 0 100%; order: 9; margin: 10px 0 0;
font-size: 12.5px; color: var(--ink-soft); text-align: start; }
/* « align-items: start » sur toutes les grilles de mise en page.
Par défaut une grille étire ses éléments (« stretch ») et les aligne donc
par le haut ET par le bas — ce qui va tant qu'ils se ressemblent. Dès que
l'un est plus haut, tout ce qui est à l'intérieur des autres descend pour
remplir, et la seconde colonne paraît décalée. Vu sur les réglages, où
« Qui l'on fête » commençait plus bas que la carte d'à côté.
La règle vaut PARTOUT : c'est un défaut d'alignement, pas un choix. */
.deux, .modeles, .docs, .manques, .moderation {
align-items: start;
}
/* ⚠ « .grille-act » EST SORTIE DE CETTE LISTE — 22/08, demandé : « les cartes
doivent avoir la même hauteur ». C'est une exception assumée à la règle du
dessus, et elle tient à ce que ces cartes SONT : non pas des sections de mise en
page, mais un CHOIX — six tuiles qu'on compare du regard avant de cocher. Une
tuile plus haute que sa voisine se lit comme « celle-ci compte plus », alors que
la seule différence est la longueur d'une phrase d'explication.
⚠ IL FAUT LES DEUX DÉCLARATIONS. « align-items: stretch » seul étire une carte
à la hauteur de SA rangée ; « grid-auto-rows: 1fr » donne la même hauteur à
TOUTES les rangées. Sans la seconde, les trois cartes du haut restaient plus
grandes que les trois du bas — c'est exactement ce que montrait la capture. */
.grille-act { align-items: stretch; grid-auto-rows: 1fr; }
/* ⚠ PAS « .choix-grille » : ses pastilles doivent s'étirer pour être toutes de
la même hauteur. « Enterrement de vie de jeune fille ou garçon » passe sur
deux lignes et rendait sa rangée plus haute que les autres. */
.choix-grille { grid-auto-rows: 1fr; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Une aide qui parle des DEUX colonnes, ou d'un champ trop étroit pour la porter :
elle prend la rangée entière. ⚠ « 1 / -1 » et non « span 2 » : si la grille passe
un jour à une seule colonne sur téléphone, « span 2 » créerait une deuxième
colonne fantôme — le dépôt a déjà payé pour ça. */
.deux > .aide-large { grid-column: 1 / -1; margin: 2px 0 0;
font-size: 12.5px; color: var(--ink-soft); }
/* L'adresse retenue sur l'appareil, et le moyen de l'oublier. */
.email-memoire { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.email-oublier { border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-size: 12.5px; color: var(--sage);
text-decoration: underline; text-underline-offset: 2px; }
.email-oublier:hover { text-decoration-thickness: 2px; }
.email-oublier:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
/* ⚠ LA MARGE HAUTE QU'UN LIBELLÉ AURAIT EUE. La règle d'au-dessus retire les
16 px du premier libellé de chaque colonne — nécessaire pour que les deux
colonnes s'alignent entre elles — mais elle retire du même coup l'espace
au-dessus du BLOC. Mesuré sur « Ajouter un lieu » :
« Rue et numéro » (libellé simple) 16 px au-dessus
« Code postal / Ville » (bloc .deux) 0 px au-dessus
Un champ sur deux se collait donc au précédent, et le formulaire avait deux
rythmes. Les 16 px rendus ici valent aussi après un titre : h3 + libellé
simple donnait 4 + 16 ; h3 + .deux donne maintenant la même chose. */
.deux { margin-top: 16px; }
/* Premier élément de son conteneur : rien au-dessus de quoi s'écarter. */
.carte > .deux:first-child, .ch > .deux:first-child,
.atelier > .deux:first-child, form > .deux:first-child { margin-top: 0; }
@media (max-width: 560px) { .deux { grid-template-columns: 1fr; } }
/* Un élément de grille vaut « min-width: auto » : il refuse de descendre
sous la largeur minimale de son contenu, et pousse alors toute la page.
C'est le défaut le plus fréquent de cette feuille — il s'est déjà
manifesté sur « .wrap » puis sur « .atelier ». On le désamorce ici pour
toutes les grilles de mise en page du site. */
.deux > *, .choix-grille > *, .grille-act > *, .modeles > * { min-width: 0; }
/* ⚠ UN SEUL ÉCART ENTRE DEUX SECTIONS, PARTOUT — 24 px, demandé le 20/08 avec
sa référence : l'espace entre « Pour qui » et « Documents à partager » sur la
page Réglages. Cet écart-là venait du « row-gap » de la grille « .atelier » ;
ailleurs, « .carte » n'avait AUCUNE marge et chaque gabarit posait la sienne à
la main — relevé avant correction : 14, 18, 20, 22, 26 et 44 px selon la page,
plus deux « margin-block » composites. Dix-sept déclarations en ligne, toutes
retirées.
⚠ La marge est en HAUT et non en bas : une marge basse s'ajoute à celle du
pied de page et fait un blanc double en fin de document. En haut, la première
section n'en a pas besoin — d'où « :first-child ». */
.carte { background: var(--paper); border: 1px solid var(--line); border-radius: 5px;
padding: 24px; margin-block: 24px 0;
box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent); }
.carte:first-child { margin-top: 0; }
/* ⚠ « CE QUE TU APPORTES » COLLAIT À LA SECTION DU DESSUS — 21/08. Le bloc est
une « .carte » montée par assets/apports.js DANS « #mes-engagements », donc
elle en est le PREMIER ENFANT : la règle ci-dessus lui mettait « margin-top:0 »,
et la carte de la cagnotte la touchait, sans un pixel entre elles. La règle
n'est pas fautive — un premier enfant ne doit pas pousser son conteneur —, il
manquait l'air AU CONTENEUR.
⚠ Posé sur le conteneur et non sur la carte : caché, « #mes-engagements » est en
« display:none » et ne génère aucune boîte, donc aucune marge parasite quand
l'invité n'a rien promis. Une marge sur la carte, elle, aurait dû être annulée
à la main dans ce cas. */
#mes-engagements { margin-top: 24px; }
/* ⚠ ET LES SECTIONS QUI NE SONT PAS DES CARTES. Sur le mur, « qui apporte quoi »,
la ligne de vie, « en un mot » et la musique sont des
remplies par le navigateur : elles n'ont pas de bordure, mais ce sont bien des
sections, et elles portaient leurs propres marges (34 px). Même écart pour
toutes, sinon « le même espacement partout » ne vaut que pour les encadrés. */
main section.sect, main > section { margin-block: 24px 0; }
main section.sect:first-child, main > section:first-child { margin-top: 0; }
/* Une section vide n'occupe pas d'espace : celles du mur naissent vides et se
remplissent quand l'activité répond. Sans cela, quatre marges de 24 px
s'empilent en haut du mur avant que rien ne soit affiché. */
main section.sect:empty { margin-block: 0; }
/* ⚠ DANS « .atelier », C'EST LA GRILLE QUI ESPACE. Les cartes y sont des
éléments de grille : leur marge s'AJOUTERAIT au « row-gap » et donnerait 48 px
là où l'on en veut 24 — et c'est justement cette page qui sert de référence.
Les cartes INTERNES d'un formulaire, elles, sont en flux normal et gardent
leur marge : c'est elle qui les sépare. */
.atelier > .carte { margin-block: 0; }
/* ═══ LA GRAMMAIRE DES ENCARTS INFORMATIFS — une seule, 22/08 ═══
*
* ⚠ TROIS HABITS DIFFÉRENTS DISAIENT LA MÊME CHOSE. « .avis » portait un filet
* vert épais sur fond de papier, « .apports-mien » un filet vert sur fond crème,
* et « .attente-jour » un vrai cadre sur fond crème. François a tranché : tous
* comme le dernier — « pas de trait gras vertical à gauche, couleur de fond
* identique, bordure identique ».
*
* ⚠ ET LES TROIS SÉLECTEURS PARTAGENT MAINTENANT LA MÊME DÉCLARATION, au lieu de
* la recopier. C'est la règle du dépôt : trois littéraux identiques finissent
* toujours par diverger, et c'est exactement ce qui s'était passé ici.
*
* ⚠ LE FOND DOIT ÊTRE « --cream » ET NON « --paper ». Un encart vit le plus
* souvent DANS une carte, et une carte est en papier : sur fond de papier, sans
* son filet, l'encart disparaîtrait purement et simplement. C'est le filet qui le
* faisait exister, donc le retirer OBLIGE à changer le fond — les deux vont
* ensemble, ce n'est pas un choix de goût.
*
* ⚠ CE QUI RESTE EN DEHORS, ET POURQUOI :
* — « .avis.avis-alcool » : mention légale, rouge clair cerné de rouge sombre,
* demandée telle quelle (deux classes, donc elle gagne) ;
* — « .manques li » (administration) et « .cuis-l.alerte » : des ALERTES, pas des
* informations, et leur filet rouge est ce qui les distingue dans une liste ;
* — « .q-phrases li », « .q-mien » : des CONTRIBUTIONS d'invités, pas des encarts ;
* — « .ex-note », « .dlg-exemple-avis » : des légendes en retrait, sans cadre ni
* fond. Les transformer en encarts ajouterait des boîtes là où il n'y en a pas.
* ═══════════════════════════════════════════════════════════════════ */
.avis, .attente-jour, .apports-mien {
padding: 11px 14px; border-radius: 6px;
background: var(--cream); border: 1px solid var(--line);
line-height: 1.5;
}
.avis { margin: 18px 0; font-size: 14.5px; color: var(--ink-soft); }
/* Le cadre du mur, DANS la section « Le mur ».
Il porte la classe de collection et le rognage : la carte, elle, doit garder
son « overflow » libre, sinon elle couperait le titre au premier arrondi.
C'est aussi lui que « *:has(> .pm-mur) » désigne — le conteneur de requête
des écarts en « cqi », et le défilement horizontal sous 700 px. */
.mur-cadre { border-radius: 5px; overflow: hidden; }
/* La ligne d'état sous la mosaïque, dans la même section : « Le mur est encore
vierge » appartient au mur, pas à la page. Elle flottait sous la carte, à la
place d'une légende d'image. */
.compteur { text-align: start; margin: 14px 0 0; color: var(--ink-soft); font-size: 14px; }
.compteur b { font-family: var(--serif); color: var(--ink); }
/* --- Choix visuels (thème, collection, type) -------------------------- */
.choix-grille { display: grid; gap: 10px; margin-top: 8px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
/* Trois colonnes fixes : neuf cartes forment un carré, qui se lit d'un
coup d'œil. Deux colonnes sous 700 px, une seule sous 460. */
.choix-grille.trois { grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .choix-grille.trois { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .choix-grille.trois { grid-template-columns: 1fr; } }
.lien-galerie { font: inherit; font-size: 13px; color: var(--sage); cursor: pointer;
background: transparent; border: 0; padding: 2px 0;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: underline; text-underline-offset: 3px; }
.lien-galerie:hover { color: var(--ink); }
.choix-grille label { margin: 0; cursor: pointer; }
.choix-grille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille { display: block; padding: 12px; border: 1.5px solid var(--line); border-radius: 5px;
background: var(--paper); text-align: center; font-size: 13.5px; color: var(--ink);
transition: border-color .15s ease, transform .12s ease; }
.choix-grille input:checked + .pastille { border-color: var(--sage); border-width: 2px;
transform: translateY(-2px); }
.choix-grille input:focus-visible + .pastille { outline: 2px solid var(--sage); outline-offset: 2px; }
.pastille .bande { display: flex; gap: 3px; margin-bottom: 8px; }
.pastille .bande i { flex: 1; height: 16px; border-radius: 2px; }
.pastille .gros { font-size: 21px; display: block; margin-bottom: 3px; }
/* ⚠ SORTIS DU STYLE EN LIGNE. Le titre et le sous-titre d'une pastille étaient
écrits dans l'attribut « style » de chaque occasion : aucune règle, aucune
requête média ne pouvait plus les toucher — c'est ce qui les laissait à
12,5 px sur téléphone alors qu'une règle les relevait, sans effet. */
.pastille strong { display: block; font-family: var(--serif); font-weight: 400;
font-size: 15.5px; }
.pastille .sous, .pastille > span:last-child { color: var(--ink-soft); font-size: 12.5px; }
/* --- Fenêtres --------------------------------------------------------- */
/* La largeur des sections d'une page d'événement, en un seul endroit.
Le mur se calculait sur le nombre de colonnes — « min(860, 90 × grille) »,
soit 450 px pour une mosaïque de cinq — pendant que les autres sections
étaient figées à 640 : sur la même page, cinq largeurs différentes.
Une variable, et tout s'aligne. */
/* ⚠ L'ÉCHELLE DES CALQUES — nommée, parce qu'elle ne l'était pas et que cela
se voyait. Relevé le 20/08 : vingt-six valeurs de « z-index » dans le dépôt,
de 0 à 1000, posées au fil des besoins. Conséquences visibles sur les
captures de François :
· le menu « Colonnes » d'un tableau était à 8, les pastilles flottantes à
35 : le bouton de réglages se dessinait PAR-DESSUS le menu ouvert ;
· le voile du panneau d'accessibilité était à 34 et son panneau à 36, avec
les pastilles à 35 — donc COINCÉES ENTRE LES DEUX, visibles au-dessus du
voile qui était censé tout éteindre.
Cinq noms suffisent. Toute nouvelle couche doit en choisir un, pas inventer
un nombre.
contenu → la page
barre → la barre du haut, collée
flottant → les pastilles de coin : au-dessus du contenu, SOUS tout menu
menu → listes déroulantes, calendriers, menus de tableau
toast → le retour d'information éphémère : au-dessus de tout ce qui
précède, car il annonce le résultat de ce qu'on vient de
faire — un message caché par le bouton qui l'a déclenché ne
sert à rien. ⚠ Il ne peut PAS passer devant un « dialog »
modal, qui vit dans le calque supérieur du navigateur ; les
fenêtres portent leur propre retour d'information.
voile → l'écran sombre d'une fenêtre
modale → la fenêtre elle-même
⚠ Un « popover » natif et un « dialog » modal vivent dans le CALQUE SUPÉRIEUR
du navigateur, au-dessus de tout ceci quel que soit leur z-index. C'est une
raison de plus de les préférer. */
:root {
--z-contenu: 2;
--z-barre: 30;
--z-flottant: 31;
--z-menu: 45;
--z-toast: 50;
--z-voile: 60;
--z-modale: 61;
}
:root { --sect: min(100%, 640px); }
/* ⚠ LE BORD DE LA PAGE, pour tout ce qui est FIXE. « .wrap » borne le contenu à
1 100 px avec 20 px de rembourrage : ses bords tombent donc à
max(20px, (100vw - 1100px) / 2 + 20px) de la fenêtre. La barre du haut et les
pastilles flottantes, elles, se posaient sur la fenêtre — 30 px pour la barre,
16 px pour les pastilles — si bien que le logo, les liens et les pastilles
flottaient à côté de la colonne de texte au lieu de s'aligner dessus. Mesuré
en 1440 px : contenu de 190 à 1250, logo à 30, liens jusqu'à 1410, pastilles à
16 et 1424.
⚠ « 50% » ET NON « 50vw » : pour un élément fixe, le pourcentage se résout sur
le bloc conteneur initial, qui EXCLUT la barre de défilement classique —
« vw » l'inclut, et tout aurait glissé d'une quinzaine de pixels sur Windows.
Et la formule est celle de « .wrap », pas une approximation :
(100vw - 1100px) / 2 + 20px = 100vw / 2 - 530px, à toute largeur. */
:root { --page-bord: max(20px, calc(50% - 530px)); }
/* L'AXE des pastilles flottantes, depuis le bas de la fenêtre : 16 px de marge
plus la moitié des 44 px de la pastille. Sur téléphone, 12 + 20.
⚠ CE N'EST PLUS UNE BANDE À ÉVITER, C'EST UNE LIGNE À REJOINDRE — revirement
du 21/08. La veille, le pied recevait un rembourrage assez grand pour passer
AU-DESSUS des pastilles, qui se posaient sur « Tous droits réservés · Hébergé
en France » et le rendaient illisible. Corrigé — mais le pied se retrouvait
alors 61 px plus haut qu'elles (mesuré), et les trois éléments du bas de page
ne formaient plus une ligne.
⚠ Ce qui rend l'alignement possible sans revenir au recouvrement : les glyphes
de cette ligne ne vont que de 399 à 1041 sur un écran de 1440, alors que les
pastilles sont à 190–234 et 1206–1250 — 165 px d'air de chaque côté, mesurés.
Le texte est centré et court ; il ne les atteint pas.
⚠ Les deux déclarations sont VOISINES : la media query avait été séparée de sa
variable par un bloc inséré entre les deux, et ma première substitution a
échoué là-dessus. Une valeur et sa variante se tiennent. */
:root { --flottant-axe: 38px; --flottant-taille: 44px; }
@media (max-width: 560px) { :root { --flottant-axe: 32px; --flottant-taille: 40px; } }
/* Un bouton qui porte un pictogramme en tête : l'icône et le mot se tiennent,
et le trait ne s'étire pas si le libellé passe sur deux lignes. */
.avec-ic { display: inline-flex; align-items: center; gap: 5px; }
.avec-ic svg { flex: 0 0 auto; }
/* ⚠ Toute règle qui pose ensuite « margin: … » en forme courte sur une de ces
sections REMET ces deux marges à zéro et casse le centrage, sans toucher à la
largeur : la section reste bonne et glisse à gauche. Utiliser « margin-block ».
C'est le défaut qu'on a corrigé le 17/08 sur six sections de e.php. */
.sect { max-width: var(--sect); margin-inline: auto; }
/* La fenêtre d'écriture, plus large : « Personnaliser ma note » y déplie
les formes, les couleurs, les écritures et les icônes, et 470 px les
serraient au point qu'on ne voyait pas qu'il y avait quelque chose à
ouvrir. */
#dlg { width: min(94vw, 640px); }
dialog.large { width: min(94vw, 620px); }
/* ⚠ « color: var(--ink) » N'EST PAS REDONDANT, C'EST LE CORRECTIF. La feuille du
navigateur pose « dialog { background-color: Canvas; color: CanvasText } » :
nous ne remplacions que le FOND. « CanvasText » vaut NOIR tant que la page ne
déclare pas « color-scheme: dark » — donc en mode sombre, chaque fenêtre du
site écrivait en noir pur sur un papier à #2a2928. Mesuré, pas supposé :
getComputedStyle(dialog).color rendait rgb(0,0,0) alors que --ink valait bien
#e7e2d9. Personne ne l'avait vu parce qu'en mode clair le noir passe pour de
l'encre. */
dialog { border: 0; padding: 0; width: min(94vw, 470px); border-radius: 6px;
background: transparent; color: var(--ink);
box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 45%, transparent); }
dialog::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); }
/* ⚠ LE REMBOURRAGE DE LA FEUILLE EN UN SEUL ENDROIT — 26/08. La barre d'action collée
au bas doit déborder jusqu'aux bords du papier : elle a besoin des mêmes valeurs, et
deux nombres recopiés auraient divergé au premier réglage. */
:root { --dlg-marge-x: 24px; --dlg-marge-bas: 22px; }
.feuille { position: relative; background: var(--paper);
padding: 26px var(--dlg-marge-x) var(--dlg-marge-bas);
border: 1px solid var(--line); border-radius: 6px; }
/* ⚠ LA BARRE QUI REFERME UNE FENÊTRE RESTE AU BAS DE LA FENÊTRE — 26/08, signalé sur la
note du mur : « s'il y a déjà une image il y a confusion entre les boutons de la photo
et les boutons annuler et valider ».
Mesuré avant d'y toucher, sur une note portant une voix ET une photo : « Valider » était
HORS CHAMP à l'ouverture, sur téléphone comme sur un écran de 1 280 × 900, et les boutons
de la photo se trouvaient 79 px plus haut. On rencontrait donc une paire de boutons avant
celle qui referme.
⚠ C'EST LE