/* ============================================================================= * TOP CALENDAR — vues publiques * * ── CETTE FEUILLE N'EST PAS CELLE DE LA CONSOLE, ET C'EST VOULU ──────────── * * La console est DENSE : un gerant y passe sa journee, chaque pixel doit porter * une information. Le front est AERE : un visiteur y passe quinze secondes et * doit comprendre « quand puis-je venir ». Les faire se ressembler donnerait * soit une console illisible, soit un formulaire de reservation qui a l'air * d'un tableur. * * Ce que les deux PARTAGENT, en revanche, n'est pas negociable : les quatre * couleurs d'etat — disponible, dernieres places, complet, ferme. C'est ce qui * permet a un gerant et a son client de parler des memes couleurs au telephone. * * ── LA REGLE QUI GOUVERNE TOUT LE FICHIER : ON N'IMPOSE PAS DE POLICE ────── * * `font-family: inherit` sur les titres, et aucune police embarquee ici. Un * formulaire de reservation qui impose ses propres polices sur un site soigne * se voit immediatement — et se voit comme un GREFFON. Le client a paye un * theme ; notre travail est de nous y fondre, pas de le recouvrir. * * On ne pose donc que trois choses : la STRUCTURE (grilles, espacements), les * COULEURS D'ETAT (la seule information que le theme ne peut pas connaitre), et * les CIBLES TACTILES. Tout le reste vient du theme. * * Seule exception : `--tcf-mono` sur les heures et les references. Un horaire * en police proportionnelle danse quand les chiffres changent, et une colonne * d'heures qui danse est illisible. La pile est generique (`ui-monospace`), pas * une police embarquee. * * ── CONTRASTES ──────────────────────────────────────────────────────────── * * Mesures par `bin/contraste.php` sur les SIX fonds reellement rencontres — * carte, page, et les quatre pastilles teintees. `--tcf-ink-3` est a `#6E655B` * et non au `#8C8377` des maquettes : celui-la tombait a 3,28 sur la pastille * la plus teintee, sous le seuil AA de 4,5. C'est exactement le defaut qui a * coute une reprise complete dans Top Translate, et il ne se voit pas a l'oeil * de celui qui l'ecrit. * ========================================================================== */ .topcal-front{ /* Neutres CHAUDS — le front n'est pas une console. Saturation tres basse : au-dela, un blanc casse tire vers le beige et date la page. */ /* * ── LA PALETTE DU THEME GAGNE, ET C'EST TOUT L'OBJET DE CE SOCLE ────── * * Depuis WordPress 5.9, tout theme portant un `theme.json` EMET sa palette * en variables CSS : `--wp--preset--color--`. On les lit par une * chaine de replis `var()` — aucun PHP, aucun JavaScript, aucune * detection. Si le theme les declare, elles gagnent ; sinon le repli * suivant s'applique. * * ⚠ POURQUOI LE DERNIER REPLI EST `currentColor` ET `transparent`, ET NON * NOS PROPRES COULEURS. * * Mesure du 11/09 sur un WordPress local : en posant sur `body` ce que pose * n'importe quel theme sombre, le calendrier devenait NOIR SUR NOIR. Titre * de journee 1,01:1, nom de seance 1,01:1, prix 1,01:1. La cause est une * demi-decision — la feuille IMPOSAIT son encre et HERITAIT du fond. Un * couple dont une moitie vient d'ailleurs n'a aucune garantie. * * `currentColor` sur `transparent`, c'est le couple que le theme emploie * DEJA pour son propre corps de texte. Son concepteur a garanti qu'il se * lit. Ce n'est pas une esperance, c'est une preuve — et c'est la seule * facon d'etre lisible sur un theme qu'on n'a jamais vu. * * Les valeurs litterales restent declarees JUSTE AVANT : un navigateur * sans `var()` imbrique garde le comportement d'hier plutot que rien. */ --tcf-bg:#FCFBF9; --tcf-bg:var(--wp--preset--color--base, var(--wp--preset--color--background, transparent)); --tcf-ink:#171310; --tcf-ink:var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, currentColor)); /* * LA SURFACE N'EST PLUS UN BLANC : c'est une TEINTE DE L'ENCRE posee sur ce * qu'il y a derriere. Un blanc en dur sous une encre claire — le cas d'un * theme sombre — donnait du blanc sur blanc, et c'est ce que la bande de * semaine a montre le 12/09 : 1,12:1 sur ses jours fermes. Une teinte de * l'encre suit forcement l'encre, donc le couple reste juste des deux cotes. */ --tcf-surface:#FFFFFF; --tcf-surface:color-mix(in srgb, var(--tcf-ink) 4%, transparent); --tcf-line:#E8E3DC; --tcf-line:color-mix(in srgb, var(--tcf-ink) 14%, transparent); /* * ── LES GRIS SUIVENT L'ENCRE, PARCE QU'ILS NE SAVENT PAS OU ILS SONT ── * * Ces deux valeurs etaient absolues, et mesurees contre NOS fonds clairs. * Elles servent pourtant aussi a des textes poses sur le fond du THEME — * les jours de la semaine, le sur-titre, les legendes — ou elles n'avaient * plus rien a voir avec ce qu'il y a derriere : 3,27:1 mesure sur un theme * sombre, et 1,01:1 pour le titre du mois juste a cote. * * `currentColor` resout la question sans la deviner : un `var()` est * substitue au point d'USAGE, donc le melange se fait contre l'encre qui * s'applique REELLEMENT a cet endroit — la notre sur nos cartes, celle du * theme sur son fond. Un seul jeton, les deux cas justes. * * Les valeurs absolues restent declarees juste avant : un navigateur sans * `color-mix` garde le comportement d'avant plutot que rien du tout. */ --tcf-ink-2:#5A5248; --tcf-ink-2:color-mix(in srgb, var(--tcf-ink) 82%, transparent); /* * ⚠ UN SEUL GRIS DE SECOND RANG, A 82 %, ET C'EST UNE MESURE. * * Il y en avait deux — 78 % et 65 % — et le second etait NON CONFORME. Le * dessin l'a mesure sur SEPT themes reels, seuil AA de 4,5 pour du petit * texte : a 58 % il tombait sous le seuil sur QUATRE themes sur sept, et il * portait tout le texte secondaire du front — durees, prix, legendes, * « il reste N places ». Le defaut etait dans le socle, donc partout. * * ⚠ ET ON NE PEUT PAS LE RATTRAPER EN MONTANT LE POURCENTAGE. Un theme dont * l'encre est DEJA faible — `#4A4A4A` sur `#FAFAFA`, cas parfaitement legal * — echoue encore a 70 %. Aucune transparence sous 100 % ne peut garantir * AA sur une encre qu'on ne connait pas : c'est une limite de la methode, * pas une valeur mal choisie. On garde donc UN gris, a 82 %, dont le pire * cas mesure est 5,18 — et la hierarchie se fait par la TAILLE, qui ne * depend d'aucune couleur. * * `--tcf-ink-3` reste defini pour ne rien casser, et vaut exactement le * meme : deux noms, une valeur, plutot qu'un troisieme niveau indefendable. */ --tcf-ink-3:#6E655B; --tcf-ink-3:var(--tcf-ink-2); /* ── L'ACCENT : L'ENCRE, ET RIEN QUI NOUS APPARTIENNE ───────────────── * * Ordre du proprietaire, 04/09/2026 : « en front pas de bleu, il faut que * ca s'integre a n'importe quel site tout en etant super moderne ». * * Ce fichier portait l'indigo de la charte TOP CALENDAR. Sur la page d'un * client, entre son logo et ses photos, c'etait une couleur ETRANGERE qui * s'invitait : la notre, pas la sienne. Le front n'a donc plus de couleur * a lui — de l'encre, du papier, un filet. * * UNE SEULE VARIABLE porte l'action, et c'est le seul point d'entree pour * qui veut la sienne. Le reglage « couleur d'accent » de la console ecrit * ces trois lignes-la, et un theme peut faire pareil a la main : * * .topcal-front{ --tcf-ac:#B0343C; --tcf-ac-contraste:#FFF } * * CE QUI RESTE COLORE, ET POURQUOI. Les quatre etats ci-dessous et les huit * teintes de nomenclature plus bas ne DECORENT pas : ils DISENT quelque * chose — libre, presque plein, complet ; et « cette seance n'est pas * celle-la ». Les eteindre pour faire sobre effacerait une information au * lieu de la rendre discrete. La ligne n'est pas « pas de couleur », elle * est « aucune couleur qui parle de NOUS ». */ --tcf-ac:#171310; /* * ⚠ LE DERNIER REPLI DE L'ACCENT N'EST PAS `currentColor`, ET LE DESSIN SE * TROMPE SUR CE POINT PRECIS. * * `background: currentColor` sur un element qui fixe AUSSI son propre * `color` prend SA couleur de texte : fond et texte deviennent identiques. * Mesure du 12/09 : les quarante-deux boutons « Book » de la vue Liste a * 1,00 de contraste — un rectangle plein, sans un mot dessus. `currentColor` * n'est jamais fige : il se resout au point d'USAGE, et le bouton est * justement l'endroit ou il ne faut pas. * * Quand le theme ne declare RIEN, on retombe donc sur NOTRE couple, dont on * connait le rapport — 15:1 mesure. Il ne s'accordera pas a un theme sombre, * mais il se LIRA. Un bouton qui detonne fait hausser un sourcil ; un bouton * illisible fait perdre la vente. */ --tcf-ac:var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, #171310))); /* * Le contraste de l'accent suit le FOND : le bouton plein est le couple du * theme RETOURNE — son encre en fond, son fond en texte. Un couple retourne * garde exactement le meme rapport de contraste : s'il etait lisible dans * un sens, il l'est dans l'autre. C'est la seule facon de garantir un * bouton lisible sur un theme qu'on n'a jamais vu. * * ⚠ MAIS IL NE PEUT PAS VALOIR `var(--tcf-bg)`, ET C'EST UN TROU DU DESSIN. * * `--tcf-bg` retombe sur `transparent` — ce qui est JUSTE pour un fond de * page : on herite alors de celui du theme. Mais ON N'ECRIT PAS EN * TRANSPARENT. Mon premier jet a fait exactement cela, et les quarante-deux * boutons « Book » de la vue Liste sont passes a 0,00 de contraste : un * rectangle plein, sans un mot dessus. La planche du dessin ne pouvait pas * le montrer, son artboard posant un fond concret. * * On refait donc la chaine ICI, avec un dernier repli OPAQUE : le fond du * theme s'il le declare, sinon notre blanc casse. Jamais `transparent`. */ --tcf-ac-contraste:#FFFFFF; --tcf-ac-contraste:var(--wp--preset--color--base, var(--wp--preset--color--background, #FCFBF9)); /* * ── LE COUPLE INVERSE : LA PAIRE DU THEME, RETOURNEE ───────────────── * * ⚠ ON NE MET JAMAIS DE TEXTE SUR L'ACCENT, ET CE DEFAUT A ETE VU A L'OEIL. * * Le theme du banc declare un `primary` JAUNE VIF. Le jour selectionne de * la bande de semaine prenait ce jaune en fond et le `base` du theme — du * BLANC — en texte : « SAM 12 · Complet » illisible, sur l'element meme qui * dit au visiteur ou il se trouve. Aucun instrument ne le voyait : les * themes simules ne declaraient pas de palette, donc la voie de l'accent * n'etait jamais empruntee. Ils en declarent une depuis. * * Le socle du dessin le dit pourtant : la couleur du theme sert de TRAIT, * de POINT, de FILET — jamais de fond sous du texte. On ne connait pas sa * luminosite, donc on ne peut RIEN garantir de ce qu'on ecrit dessus. * * Ce qui se garantit, en revanche, c'est la paire du theme RETOURNEE : son * encre en fond, son fond en texte. Un couple retourne garde exactement le * meme rapport de contraste — s'il etait lisible dans un sens, il l'est * dans l'autre. Et le concepteur du theme a deja garanti ce sens-la. * * ⚠ AUCUN `currentColor` ICI. Il se resout au point d'USAGE : sur un * element qui fixe son propre `color`, `background: currentColor` prend sa * couleur de TEXTE, et les deux se confondent. Mesure du 12/09 : 1,00. */ --tcf-inverse-fond:#171310; --tcf-inverse-fond:var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, #171310)); --tcf-inverse-encre:#FCFBF9; --tcf-inverse-encre:var(--wp--preset--color--base, var(--wp--preset--color--background, #FCFBF9)); --tcf-ac-doux:#F1EDE7; --tcf-ac-doux:color-mix(in srgb, var(--tcf-ac) 12%, transparent); /* Meme defaut que la console, et il touche LE CLIENT : l'anneau de focus etait translucide, donc mesure entre 1,98 et 2,47:1 sur tout le front — bouton « Reserver » compris, sur 138 rendus. Un visiteur au clavier ne voyait pas ou il etait dans le formulaire qui prend son argent. Opaque, le meme jeton donne 18:1. WCAG 1.4.11 et 2.4.11. */ --tcf-ring:var(--tcf-ac); /* Les quatre etats. Identiques a la console, au chiffre pres. */ --tcf-free:#0F7A4C; --tcf-free-soft:#EFF6F1; --tcf-tight:#925E15; --tcf-tight-soft:#F7F1E6; --tcf-full:#C04128; --tcf-full-soft:#F9EEEA; --tcf-closed:#6E655B; --tcf-closed-soft:#F4F1EC; /* Le fond plein d'un bouton d'heure. Entre le fond de page et le filet : assez pose pour que le bouton se lise sans bordure, assez discret pour que douze d'affilee ne fassent pas un damier. */ --tcf-fill:#F3F1ED; --tcf-fill:color-mix(in srgb, var(--tcf-ink) 5%, transparent); --tcf-fill-fort:#EAE7E1; --tcf-fill-fort:color-mix(in srgb, var(--tcf-ink) 9%, transparent); /* ── LA NOMENCLATURE : HUIT TEINTES POUR HUIT TYPES D'EVENEMENT ──────── * * Decision du proprietaire, 02/09 : la couleur ne dit plus l'ETAT, elle dit * le TYPE. Chaque evenement publie recoit un rang stable — voir * `TOPCAL_Front::rang_couleur()` — et ce rang choisit sa teinte ici. * * Deux valeurs par teinte : le TRAIT, pose sur du blanc ou du pale, et le * FOND du pave, tres desature. Sans le second, huit pastilles saturees cote * a cote font un jeu de cartes ; avec lui, elles font une nomenclature. * * Les huit traits sont choisis a luminosite comparable — c'est ce qui evite * qu'une teinte paraisse « importante » et une autre « secondaire » alors * qu'elles ne nomment que des seances differentes. Toutes tiennent AA sur le * blanc, mesure par `bin/contraste.php`. */ --tcf-ev-1:#4338CA; --tcf-ev-1-doux:#EEEDFB; --tcf-ev-2:#0F766E; --tcf-ev-2-doux:#E8F3F1; --tcf-ev-3:#9A3412; --tcf-ev-3-doux:#F8EDE7; --tcf-ev-4:#9F1239; --tcf-ev-4-doux:#F9EAEE; --tcf-ev-5:#6D28D9; --tcf-ev-5-doux:#F1EBFB; --tcf-ev-6:#1D4ED8; --tcf-ev-6-doux:#E9EFFC; --tcf-ev-7:#15803D; --tcf-ev-7-doux:#E9F4EC; --tcf-ev-8:#475569; --tcf-ev-8-doux:#EDEFF2; /* Le rang zero : un creneau sans evenement nomme — une location a la journee, par exemple. Il garde le gris du pave, et la nomenclature ne le nomme pas, puisqu'il n'a pas de nom. */ --tcf-ev-0:var(--tcf-ink-3); --tcf-ev-0-doux:var(--tcf-fill); --tcf-r:14px; --tcf-r-sm:11px; --tcf-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* La cible tactile minimale. Nommee plutot que recopiee : c'est une regle d'accessibilite, pas une preference, et elle doit se retrouver d'un grep. */ --tcf-touch:44px; /* Le filet d'un CHAMP DE SAISIE, et non d'une separation. `--tcf-line` (#E8E3DC) separe deux zones : a 1,28:1 sur du blanc, il est juste assez visible pour cela. La limite d'une commande demande 3:1 (WCAG 1.4.11) — c'est elle qui dit « ecrivez ici ». ⚠ PREMIERE VALEUR : `#949494`, choisie pour donner exactement 3,04 sur du BLANC. Elle tombait a 2,69 sur un fond creme — un gris moyen perd du contraste des que le fond s'assombrit, et « exactement au seuil sur le cas le plus favorable » ne laisse aucune marge aux themes reels. `#767676` est le gris accessible classique : 4,54 sur blanc, 4,09 sur creme. */ --tcf-bord-champ:#767676; /* * ⚠ ICI VIVAIT LE DEFAUT LE PLUS COUTEUX DU FRONT. * * La ligne disait `color: var(--tcf-ink)` — une encre presque noire — juste * au-dessus de `background: transparent`. Elle IMPOSAIT donc son encre et * HERITAIT du fond : un couple dont une moitie vient d'ailleurs n'a aucune * garantie, il vaut ce que vaut le theme d'en face. * * Mesure du 11/09 sur un theme sombre ordinaire : titre du mois 1,01:1, nom * de seance 1,01:1, horaire 1,01:1, prix 1,01:1. Il ne restait a l'ecran * qu'une colonne de boutons « Book » flottant dans le vide. Le visiteur ne * pouvait lire ni le jour, ni l'heure, ni le prix de ce qu'il reserve. * * ── LA REGLE, DESORMAIS : ON POSE LES DEUX, OU ON N'EN POSE AUCUN ──── * * Sur le fond du THEME, on herite son encre — lui seul sait ce qui se lit * chez lui, et c'est exactement la promesse de l'en-tete de ce fichier. * Sur NOS surfaces (cartes, pastilles, boutons), qui posent leur fond, on * pose aussi l'encre : la on controle les deux moities, et les contrastes * mesures par `bin/contraste.php` valent. * * `bin/front-sur-theme.mjs` mesure les deux cas sur quatre themes. */ color:inherit; background:transparent; line-height:1.6; } .topcal-front *,.topcal-front *::before,.topcal-front *::after{box-sizing:border-box} /* Les titres HERITENT. Voir l'en-tete : c'est la regle la plus importante du fichier. On ne fixe que ce qui structure — graisse et interlignage — pour qu'un theme aux titres tres lourds ne rende pas la liste illisible. */ .topcal-front h1,.topcal-front h2,.topcal-front h3,.topcal-front h4{ font-family:inherit;line-height:1.15;margin:0;color:inherit; } .topcal-front p{margin:0} /* ⚠ UN LIEN PREND L'ENCRE DE LA PAGE, PAS L'ACCENT. Il prenait `--tcf-ac`, dont le dernier repli est desormais une couleur OPAQUE ecrite en dur — necessaire pour le fond d'un bouton, ruineux pour du texte : sur un theme sombre, « Show more dates » mesurait 1,01. Le socle du dessin le dit sans detour, `a{color:inherit}` : l'accent sert de trait, de point, de filet — jamais a porter un mot. Ce qui porte du texte prend l'encre de la page, et celle-la est lisible par construction puisque le concepteur du theme l'a deja garantie sur son propre fond. */ .topcal-front a{color:inherit} /* Le focus ne se retire jamais : c'est la seule affordance de qui navigue au clavier. Un `outline:none` pose « pour faire propre » rend la reservation impossible sans souris. */ .topcal-front a:focus-visible,.topcal-front button:focus-visible, .topcal-front input:focus-visible,.topcal-front select:focus-visible{ outline:3px solid var(--tcf-ring);outline-offset:2px;border-radius:6px; } .topcal-front .tcf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ── Sur-titre, chapeau ─────────────────────────────────────────────────── */ .topcal-front .tcf-eyebrow{ font-family:var(--tcf-mono);font-size:.68rem;letter-spacing:.18em; text-transform:uppercase;color:var(--tcf-ink-3);display:block; } .topcal-front .tcf-lead{margin-bottom:2.2rem;max-width:60ch} .topcal-front .tcf-lead h2{font-size:2.1rem;margin-top:.6rem} .topcal-front .tcf-lead p{color:var(--tcf-ink-2);margin-top:.7rem} /* ── ALLER A UN AUTRE MOIS ─────────────────────────────────────────────── La grille du mois n'offrait AUCUN chemin vers le mois suivant : un client arrive en fin de mois voyait des cases grises et concluait « ils n'ont plus rien ». Ces liens sont donc une NAVIGATION, pas une decoration — d'ou la cible de 44 px au doigt, la meme que partout ailleurs dans ce produit. */ .topcal-front .tcf-mois-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem} /* ⚠ `:not(.tcf-mois-pas)` — FUSION DU 15/09, MEME CAUSE QUE PLUS BAS. Une autre branche a pose dans le MEME `