/** * Tableau des sessions interentreprises — PLUS SEPT. * * Toutes les règles sont préfixées « ps7-inter- » et portées par le conteneur * .ps7-inter. Elles ne peuvent atteindre aucun autre élément du site, ni entrer * en conflit avec la feuille « ps- » de la landing, calibrée pour fond sombre. * Aucune règle ne vise un sélecteur de Divi ni une balise nue hors conteneur. * * PRIORITÉ DES DÉCLARATIONS * * Les propriétés qui portent l'identité visuelle — couleurs de l'en-tête, des * boutons, des états de places, graisse du nom et de la promesse — sont marquées * « !important ». Ce n'est pas de la facilité : le thème du site et ses * extensions posent leurs propres règles en !important sur les titres, les * paragraphes et les tableaux, et l'emportaient sur celles-ci. Constaté en * production, où les libellés d'en-tête ressortaient en beige au lieu de blanc. * Seules ces propriétés-là sont marquées ; espacements, dimensions et * arrondis restent ordinaires, pour rester ajustables sans lutte. * * Chaque sélecteur est en outre porté par le conteneur « .ps7-inter ». À * priorité égale, c'est la feuille chargée EN DERNIER qui l'emporte : le * !important seul ne protégeait donc de rien face à une feuille de thème * chargée après celle-ci. La spécificité supérieure, elle, ne dépend pas de * l'ordre de chargement. * * PALETTE — reprise du CSS personnalisé du thème, pas d'un relevé approximatif : * #011256 marine des titres h2/h3/h4 — en-tête du tableau, boutons, nom de la formation * #0D71C3 bleu moyen — survol et liens * #1D1D1F encre des textes * #E3EAF3 bleu très clair des séparateurs * #F5F5F7 gris très clair des lignes complètes * #EEF3F9 bleu très clair des blurbs — survol de ligne * #2E5C00 vert de disponibilité — le #79CD01 de la charte nettement assombri, voir plus bas * Les deux teintes d'alerte tiennent le contraste sur fond blanc. * * TYPOGRAPHIE — les piles de polices sont celles du thème enfant. Le corps du * tableau reprend celle des paragraphes, le nom de la formation celle des * titres. Aucune taille absolue n'est imposée : le contenu hérite du thème, et * seuls les textes secondaires — libellés de colonne et promesse — sont réduits * en unités relatives, de sorte qu'ils suivent la taille de base du thème. */ .ps7-inter { --ps7-marine: #011256; --ps7-bleu: #0D71C3; --ps7-encre: #1D1D1F; --ps7-trait: #E3EAF3; --ps7-page: #F5F5F7; --ps7-survol: #EEF3F9; --ps7-gris: #5A5A61; --ps7-vert: #2E5C00; --ps7-orange: #B4530A; --ps7-rouge: #C0271C; --ps7-police-texte: 'Montserrat', Helvetica, Arial, Lucida, sans-serif; --ps7-police-titre: 'Plus Jakarta Sans', Helvetica, Arial, Lucida, sans-serif; box-sizing: border-box; width: 100%; margin: 0; color: var(--ps7-encre); font-family: var(--ps7-police-texte); } .ps7-inter *, .ps7-inter *::before, .ps7-inter *::after { box-sizing: inherit; } /* * Neutralisation défensive des styles de tableau que Divi applique au contenu * des modules texte : bordures, fonds alternés, marge basse. Sans cela, le * tableau hériterait de règles qui ne le visent pas mais l'atteignent. */ .ps7-inter .ps7-inter-tableau, .ps7-inter .ps7-inter-tableau thead, .ps7-inter .ps7-inter-tableau tbody, .ps7-inter .ps7-inter-tableau tr, .ps7-inter .ps7-inter-tableau th, .ps7-inter .ps7-inter-tableau td { border: 0; background-image: none; } .ps7-inter .ps7-inter-tableau { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background-color: #FFFFFF !important; overflow: hidden; /* * CADRE EXTÉRIEUR — STRICTEMENT IDENTIQUE À CELUI DE L'AUTRE FEUILLE. * * Le tableau des sessions et les blocs du formulaire d'inscription cohabitent * souvent sur la même page, l'un au-dessus de l'autre. Ils doivent donc porter * le même cadre, au pixel près. Ces trois déclarations sont recopiées à * l'identique dans « ps7-inter-sessions.css » et « ps7-inter-formulaire.css » : * si vous en changez une, changez les deux. Le banc navigateur compare les * deux cadres et échoue s'ils divergent. * * Elles sont marquées « !important » alors que les arrondis et les ombres ne * le sont nulle part ailleurs : c'est précisément une bordure de thème posée * sur l'un et pas sur l'autre qui les faisait diverger, et le client l'a vu * avant nous. La règle qui doit tenir se marque ; les autres restent souples. */ border: 1px solid var(--ps7-trait) !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(1, 18, 86, 0.08) !important; } /* * CADRE RETIRÉ — [ps7_sessions bordure="non"]. * * Le trait clair du pourtour est fait pour un fond blanc, où il ne se voit * pratiquement pas : il pose une limite au tableau sans se faire remarquer. * Sur un fond FONCÉ, le rapport s'inverse. Le trait longe le bleu marine de * l'en-tête, seul endroit du tableau où le pourtour touche une zone sombre, et * ce qui devait border se lit comme une rayure claire posée en travers du haut. * Relevé sur une page à fond bleu, où il n'y avait rien d'autre à corriger. * * L'ombre part avec le trait, et pour la même raison : elle est calculée pour * détacher un bloc blanc d'un fond blanc. Sur fond foncé elle n'ajoute rien, et * la laisser derrière un cadre retiré aurait rendu un halo sans bord. * * L'ARRONDI RESTE, LUI, et c'est délibéré. Il ne dépend pas du fond : ce sont * les angles de l'en-tête marine et du corps blanc qu'il adoucit, pas ceux d'un * trait. Le retirer aurait rendu quatre coins carrés que personne n'a demandés. * * Trois classes dans le sélecteur, contre deux pour la règle qu'elle défait : * le cadre est marqué « !important » — voir le bloc ci-dessus —, et à priorité * ET spécificité égales, seul l'ordre du fichier aurait tranché. Un jour où ces * règles auraient changé de place, le cadre serait revenu sans explication. */ .ps7-inter.ps7-inter--sans-bordure .ps7-inter-tableau { border: 0 !important; box-shadow: none !important; } .ps7-inter .ps7-inter-tableau tbody tr { background-color: transparent !important; } /* Libellé de colonne. */ .ps7-inter .ps7-inter-tableau thead th { background-color: var(--ps7-marine) !important; color: #FFFFFF !important; text-align: left; font-weight: 600 !important; /* Même taille que le contenu des cellules : réduits, les libellés paraissaient rabougris face aux valeurs qu'ils annoncent. */ font-size: 1em; padding: 16px 18px; /* * LIBELLÉS EN CAPITALES — et la casse se décide ICI, jamais dans le PHP. * * C'est la règle du projet, et elle a une raison qui n'est pas esthétique : * un libellé écrit en majuscules dans la source est épelé lettre à lettre * par certains lecteurs d'écran, et il est figé pour toute traduction dans * une langue qui n'en veut pas. Le gabarit écrit donc « Prochaines * formations », et la feuille seule le met en capitales — comme le fait * déjà l'agenda condensé, et comme le font les étiquettes du mode carte. * * ELLE VALAIT « none !important » JUSQU'À LA 1.58.4, et ce n'était pas un * oubli : c'était une garde contre les thèmes qui mettent les en-têtes de * tableau en capitales d'autorité. Le « !important » reste donc, il change * seulement de valeur — sans lui, un thème qui pose « none » l'emporterait * et l'on chercherait longtemps pourquoi la feuille « ne marche pas ». * * L'INTERLETTRAGE MONTE AVEC LA CASSE. Des capitales serrées se lisent moins * bien que des bas-de-casse : 0,02 em suffisait à du texte ordinaire, il * empâte un mot de seize lettres tout en majuscules. 0,06 em est la valeur * déjà retenue par l'agenda pour ses propres libellés — une seule décision * de tracking dans les deux feuilles, plutôt que deux qui divergeront. */ letter-spacing: 0.06em; text-transform: uppercase !important; } /* La première cellule de chaque ligne est un : elle identifie la session pour les technologies d'assistance. Visuellement, elle doit se comporter comme une cellule ordinaire. */ .ps7-inter .ps7-inter-tableau tbody td, .ps7-inter .ps7-inter-tableau tbody th { padding: 18px; border-top: 1px solid var(--ps7-trait); vertical-align: middle; text-align: left; font-weight: 400 !important; /* Un thème qui stylise « table th » noircissait les cellules d'en-tête de rangée. Le fond est donc verrouillé au même titre que la couleur. */ background-color: transparent !important; color: var(--ps7-encre) !important; } .ps7-inter .ps7-inter-tableau tbody tr:first-child td, .ps7-inter .ps7-inter-tableau tbody tr:first-child th { border-top: 0; } .ps7-inter .ps7-inter-ligne--complet td, .ps7-inter .ps7-inter-ligne--complet th { background-color: var(--ps7-page) !important; } /* * Survol de ligne, en bleu très clair repris des blurbs du site. * * Conditionné à (hover: hover) : sur écran tactile, où le survol n'existe pas, * le navigateur laisserait sinon la teinte « collée » sur la dernière ligne * touchée. Le focus clavier déclenche le même retour visuel, afin qu'une * navigation à la tabulation situe la ligne aussi bien qu'un pointeur. */ @media (hover: hover) { .ps7-inter .ps7-inter-tableau tbody tr:hover td, .ps7-inter .ps7-inter-tableau tbody tr:hover th { background-color: var(--ps7-survol) !important; } } .ps7-inter .ps7-inter-tableau tbody tr:focus-within td, .ps7-inter .ps7-inter-tableau tbody tr:focus-within th { background-color: var(--ps7-survol) !important; } .ps7-inter .ps7-inter-tableau tbody td, .ps7-inter .ps7-inter-tableau tbody th { transition: background-color 0.12s ease; } .ps7-inter .ps7-inter-ligne--complet .ps7-inter-nom, .ps7-inter .ps7-inter-ligne--complet .ps7-inter-c-dates, .ps7-inter .ps7-inter-ligne--complet .ps7-inter-c-lieu { color: var(--ps7-gris); } /* * Colonne Formation : le nom porte, la promesse accompagne. * * Le nom est légèrement agrandi et épaissi, pour deux raisons. La police des * titres a une hauteur d'œil plus basse que celle du texte courant : à taille * égale en pixels, elle paraît plus petite que tout ce qui l'entoure. Et le nom * de la formation est le titre de la ligne — a fortiori en mode carte, où il * ouvre le bloc. Il doit dominer, pas s'aligner. */ .ps7-inter .ps7-inter-nom { display: block; font-family: var(--ps7-police-titre) !important; font-size: 1.125em; font-weight: 600 !important; line-height: 1.25; color: var(--ps7-marine) !important; } /* * Le titre réagit au survol : il passe au bleu et se souligne. * * Le lien du titre étant étendu à toute la ligne, le navigateur le considère * survolé dès que le pointeur entre dans la ligne — le titre réagit donc même * quand la souris est sur une autre colonne. C'est voulu : les deux signaux, * fond de ligne et titre souligné, annoncent ensemble qu'un clic mène à la page * de la formation. Le soulignement est posé sur une bordure déjà présente mais * transparente, de sorte que rien ne se décale au moment où il apparaît. */ .ps7-inter .ps7-inter-nom a { color: inherit !important; text-decoration: none !important; border-bottom: 1px solid transparent; } .ps7-inter .ps7-inter-nom a:hover, .ps7-inter .ps7-inter-nom a:focus { color: var(--ps7-bleu) !important; border-bottom-color: currentColor; } /* ------------------------------------------------------------------ Ligne cliquable, sans une ligne de JavaScript. Le lien du nom de la formation est étendu par un pseudo-élément à toute la surface de la ligne. Il reste un lien ordinaire : clic du milieu, clic droit, ouverture dans un nouvel onglet et navigation au clavier fonctionnent sans traitement particulier, et le navigateur affiche l'adresse de destination dans sa barre d'état. Le bouton d'inscription est replacé au-dessus de cette surface, sans quoi il deviendrait inatteignable. ------------------------------------------------------------------ */ .ps7-inter .ps7-inter-ligne--cliquable { cursor: pointer; } .ps7-inter .ps7-inter-ligne--cliquable td, .ps7-inter .ps7-inter-ligne--cliquable th { position: relative; } .ps7-inter .ps7-inter-lien-ligne::after { content: ""; position: absolute; inset: 0; /* Couvre la ligne entière, colonnes voisines comprises. */ width: 100vw; z-index: 1; } .ps7-inter .ps7-inter-c-action { position: relative; z-index: 2; } /* Le contour de focus doit rester visible malgré le débordement du lien. */ .ps7-inter .ps7-inter-lien-ligne:focus-visible { outline: 3px solid var(--ps7-bleu); outline-offset: 2px; } /* Promesse : réduite, mais de la même encre que le reste de la ligne — elle se lit, elle ne s'efface pas. */ .ps7-inter .ps7-inter-promesse { display: block; margin-top: 4px; font-size: 0.875em; line-height: 1.4em; /* ⚠ INATTEINTE — mesurée à 500 dans un navigateur, le 08.09.2026. Une règle plus bas dans CETTE MÊME FEUILLE repose « font-weight: 500 !important » sur le même élément ; à importance égale, c'est la dernière déclarée qui l'emporte. Cette ligne-ci ne fait donc rien. ELLE N'EST PAS RETIRÉE, ET C'EST DÉLIBÉRÉ : la retirer changerait le rendu de zéro pixel, mais ferait perdre la trace du conflit. Qui voudra régler la graisse de cet élément doit savoir qu'il y a DEUX endroits, et que c'est le second qui commande. */ font-weight: 400 !important; font-style: normal !important; color: var(--ps7-encre) !important; max-width: 46ch; } /* * La cellule Dates peut revenir à la ligne entre deux journées ; chaque journée * reste insécable. Rendre la cellule entière insécable fixait sa largeur * minimale : une session de plusieurs journées poussait le tableau hors de la * rangée Divi, et #page-container{overflow-x:hidden} le rognait sans barre de * défilement. Vérifié. */ /* * Dates et lieu portent l'information qu'on vient chercher dans ce tableau : * ils prennent une graisse au-dessus du corps courant, qui est à 400. * * LES DEUX ONT ÉTÉ SÉPARÉS LE 07.08.2026, ET LA SÉPARATION EST LE POINT. * * Ils partageaient une seule règle à 500. Le client a demandé le lieu « un peu * plus gras » — le lieu seul. Monter la règle commune à 600 aurait emporté les * dates avec lui, sans que personne ne l'ait demandé et sans que cela se voie * dans la demande : c'est le genre de débordement qu'on ne remarque qu'une fois * livré. Deux règles distinctes coûtent trois lignes et rendent la prochaine * demande indépendante. * * 500 et 600 supposent que les variantes « medium » et « semi-bold » de la * police du thème soient chargées. Mesuré le 07.08.2026 sur le site du client : * le Montserrat du site rend six largeurs distinctes entre 300 et 800, il les a * donc réellement. Sur un thème qui ne les aurait pas, le navigateur retomberait * sur la graisse voisine et rien ne changerait à l'œil — refaire la mesure avant * d'en conclure quoi que ce soit. */ .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-dates { font-weight: 500 !important; } .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-lieu { font-weight: 600 !important; } .ps7-inter .ps7-inter-jour { white-space: nowrap; } .ps7-inter .ps7-inter-c-lieu { white-space: nowrap; } /* * Nom court de l'établissement, sous la ville. * * Même taille et même encre que la promesse sous le nom de la formation : ce * sont les deux lignes secondaires du tableau, elles doivent se lire comme une * seule famille. La graisse, elle, est ramenée à 400 : la cellule Lieu est à * 600, et sans cette remise à plat le nom court hériterait du gras de la ville * et cesserait d'être secondaire. * * LA TRONCATURE, ET POURQUOI ELLE PASSE PAR UNE LARGEUR MAXIMALE. * * Le tableau est en disposition automatique : la largeur d'une colonne est * dictée par son contenu le plus large. Sans borne, « Hôtel des Trois * Couronnes Vevey-Riviera » élargirait la colonne Lieu et pousserait la colonne * Places hors du cadre — le débordement est masqué par « overflow: hidden » sur * le tableau, la colonne serait donc coupée, pas repliée. * * « text-overflow: ellipsis » seul n'y peut rien : il ne se déclenche qu'une * fois la boîte contrainte, et rien ne la contraint ici. C'est donc la largeur * maximale qui fait le travail — elle borne la largeur que cette cellule peut * RÉCLAMER —, et les points de suspension ne font que rendre la coupe lisible. * * La borne est en « ch », l'unité qui suit la police et la taille du texte : à * 0,875em, 24 caractères tiennent sous la largeur habituelle de la colonne Lieu * sans jamais la dépasser. Un nom plus court n'est pas touché ; c'est un * plafond, pas une largeur imposée. */ .ps7-inter .ps7-inter-etablissement { display: block; max-width: 24ch; margin-top: 2px; overflow: hidden; font-size: 0.875em; line-height: 1.4em; /* ⚠ INATTEINTE — mesurée à 500 dans un navigateur, le 08.09.2026. Une règle plus bas dans CETTE MÊME FEUILLE repose « font-weight: 500 !important » sur le même élément ; à importance égale, c'est la dernière déclarée qui l'emporte. Cette ligne-ci ne fait donc rien. ELLE N'EST PAS RETIRÉE, ET C'EST DÉLIBÉRÉ : la retirer changerait le rendu de zéro pixel, mais ferait perdre la trace du conflit. Qui voudra régler la graisse de cet élément doit savoir qu'il y a DEUX endroits, et que c'est le second qui commande. */ font-weight: 400 !important; font-style: normal !important; color: var(--ps7-encre) !important; text-overflow: ellipsis; white-space: nowrap; } /* Session complète : le nom court s'éteint avec le reste de la ligne. */ .ps7-inter .ps7-inter-ligne--complet .ps7-inter-etablissement { color: var(--ps7-gris) !important; } /* * Places : quatre états, quatre teintes. * * Le vert n'est PAS le #79CD01 de la charte. Ce vert-là, excellent en aplat * derrière du texte blanc, ne donne que 1,99 : 1 en couleur de texte sur fond * blanc — très en dessous des 4,5 : 1 exigés pour du texte courant, et * difficilement lisible en pratique. Le #2E5C00 retenu appartient à la même * famille chromatique et atteint 7,9 : 1 sur blanc, 6,93 : 1 sur le fond de * survol : c'est l'état le plus lisible des quatre, ce qui convient à celui * qu'on lit le plus souvent. */ .ps7-inter .ps7-inter-places { color: var(--ps7-vert) !important; white-space: nowrap; font-weight: 600 !important; } /* Rareté en orange : « Plus que 3 places », « Dernière place ». */ .ps7-inter .ps7-inter-places--rare { color: var(--ps7-orange) !important; font-weight: 600 !important; } /* Session complète en rouge : ce n'est plus une quantité mais un état. Capitales et graisse, mais la même taille que le reste de la ligne. */ .ps7-inter .ps7-inter-places--complet { color: var(--ps7-rouge) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.04em; } /* * Session close par sa date limite : ni une quantité, ni une pénurie — un état * ÉTEINT. Le gris est celui que la MÊME LIGNE porte déjà dans sa colonne * d'action, où « Inscriptions closes » est rendu par * « ps7-inter-bouton--inactif ». Deux cellules voisines, un seul état, une seule * couleur. * * CE QUE CETTE RÈGLE REMPLACE : rien. C'est le repli sur le vert qui tenait * lieu de décision, et il faisait dire « allez-y » à la couleur du mot qui dit * l'inverse. L'orange lui avait été refusé explicitement — voir le gabarit —, * personne n'avait vu que le défaut était le vert. * * #5A5A61 donne 6,84 : 1 sur blanc et 6,13 : 1 sur le fond de survol, au-dessus * des 4,5 : 1 exigés. * * ⚠ CETTE RÈGLE DOIT RESTER APRÈS « .ps7-inter-places » ET APRÈS * « --complet » : les trois valent (0,2,0) et portent « !important ». À poids * égal, c'est la dernière déclarée qui l'emporte. La déplacer plus haut la * rendrait inerte, sans erreur ni avertissement — et l'agenda, qui porte les * mêmes règles, doit garder le même ordre qu'ici. * * Les deux états ne coïncident jamais : PS7_Inter_Donnees pose « clos » à * « inscriptions_closes() ET NON complet », une session pleine et échue étant * d'abord pleine. L'ordre ne sert donc pas aujourd'hui — il sert le jour où * quelqu'un desserrera cette exclusion. */ .ps7-inter .ps7-inter-places--clos { color: var(--ps7-gris) !important; } .ps7-inter .ps7-inter-c-action { /* * ⚠ « text-align: right » A VÉCU ICI SANS JAMAIS RIEN FAIRE, et il est retiré * plutôt que corrigé. Le relevé du 04.09.2026 : * * .ps7-inter .ps7-inter-tableau tbody td left (0,2,2) * .ps7-inter .ps7-inter-c-action right (0,2,0) * * La première l'emporte, et les boutons ont donc toujours été calés à GAUCHE * de leur cellule. Personne ne s'en était aperçu parce que l'en-tête de cette * colonne était vide : c'est en le rendant visible, à la 1.58.5, que le * décalage a sauté aux yeux — le libellé obéissait à une règle plus * spécifique, les boutons non. * * LE CHOIX EST DE GARDER LES BOUTONS OÙ ILS SONT, et d'aligner le libellé sur * eux : c'est le rendu que le site montre depuis toujours, et c'est aussi ce * que font les quatre autres colonnes — libellé à gauche au-dessus d'un * contenu à gauche. Rétablir l'intention d'origine aurait déplacé une colonne * de boutons que personne n'a demandé à déplacer. * * Il n'y a donc PLUS RIEN à déclarer ici sur l'alignement : la règle des * cellules du corps s'applique, et l'en-tête suit « thead th ». */ white-space: nowrap; } /* Bouton : contraste renforcé par rapport à la maquette, c'est le seul élément cliquable de la ligne et il doit se voir. TEINTES INVERSÉES LE 08.08.2026, à la demande du client : le bleu de la charte au repos, le marine au survol. C'était l'inverse depuis l'origine. Les deux sens tiennent le contraste avec du texte blanc, calculé et non estimé : #0D71C3 donne 5,04 : 1, au-dessus des 4,5 : 1 exigés pour du texte ; #011256 donne 17,18 : 1. L'inversion ne coûte donc aucune accessibilité — ce qu'il fallait vérifier avant de la faire, le repos étant désormais porté par la teinte la moins contrastée des deux. */ .ps7-inter .ps7-inter-bouton { display: inline-block; padding: 12px 22px; background-color: var(--ps7-bleu) !important; color: #FFFFFF !important; /* * LA POLICE DU TEXTE COURANT — PAS CELLE DU NOM DE LA FORMATION. * * Demande du client, 07.08.2026. Le bouton s'écrivait dans la police des * titres pour s'accorder au nom de la formation ; il s'écrit désormais dans * celle du texte courant. C'est un choix de composition : le bouton appartient * à la ligne, pas au titre. * * ET LA TAILLE VUE NE CHANGE PAS POUR AUTANT. C'est l'autre moitié de la * demande, et elle vaut d'être comprise, parce qu'elle a l'air contradictoire : * le corps DÉCLARÉ augmente pendant que la taille VUE reste la même. Deux * polices au même corps n'ont pas la même hauteur de capitale. Mesuré sur le * site du client, à graisse 600 : Plus Jakarta Sans rend 0,745 de capitale par * unité de corps, Montserrat 0,700. Pour peindre la même hauteur, Montserrat * a donc besoin d'un corps plus grand — 19,29 px là où Plus Jakarta Sans se * contentait de 18,125. * * C'était déjà la leçon d'un défaut ancien, dans l'autre sens : les deux * textes avaient le même « font-size » et sortaient à 10 px contre 13, trente * pour cent d'écart pour une taille déclarée identique. * * LE FACTEUR 1.0643 EST LE RAPPORT 0,745 / 0,700, ET IL EST DATÉ. Il ne vaut * que pour ce couple de polices. Une charte qui remplacerait l'une des deux le * rendrait faux — et faux en silence, sur le seul rendu de repli. Le refaire * alors par la mesure, jamais à l'estime. * * LE RETRAIT VAUT QUATRE PIXELS depuis le 07.08.2026 : le client en a demandé * un, l'a vu, puis un second, puis deux de plus — tout cela le même jour. Il * s'écrit en « calc() » et non en « em » recalculé à la main : un « em » * supposerait une base de 16 px, et ne vaudrait quatre pixels de moins que sur * un thème qui a cette base-là. La feuille n'impose aucune taille absolue et * hérite du thème ; le retrait doit rester absolu pendant que la taille reste * relative. * * L'ORDRE DES OPÉRATIONS DANS LE CALCUL N'EST PAS LIBRE. Les quatre pixels se * retirent AVANT la multiplication par le facteur, parce qu'ils se retirent du * corps du NOM, dans la police du nom — c'est la cible qu'on abaisse, et le * facteur ne fait que la traduire ensuite dans la police du bouton. Écrire * « 1.125em * 1.0643 - 4px » retirerait quatre pixels au résultat déjà converti, * soit un retrait effectif de 3,76 px de corps de nom. L'écart est petit ; la * confusion, elle, ne l'est pas. * * CE CORPS N'EST QU'UN REPLI, et il l'est plus que jamais. Dès que le script * s'exécute, il mesure les deux polices telles que CE visiteur les a chargées * et pose son propre corps en ligne, qui l'emporte sur cette déclaration — non * marquée « !important », volontairement. Le facteur ci-dessous ne sert donc * que dans le court instant avant le script, ou s'il ne tourne pas. * * ET LE SCRIPT DEVIENT ENFIN UTILE ICI. Tant que le bouton portait la police * du nom, il n'avait rien à corriger sur le site du client : les deux rapports * étaient identiques, aucun style en ligne n'était posé, et le script aurait pu * être vide sans que personne ne s'en aperçoive. Depuis ce changement, les deux * polices diffèrent pour de bon et c'est lui qui tient l'égalité visuelle. Ne * le retirez pas en le croyant décoratif. * * Le retrait est porté en double, ici et dans « RETRAIT_CORPS » du script ; si * vous changez l'un, changez l'autre, sans quoi la page saute d'un corps à * l'autre entre le premier rendu et la fin du chargement des polices. */ font-family: var(--ps7-police-texte) !important; font-size: calc( ( 1.125em - 4px ) * 1.0643 ); font-weight: 600 !important; line-height: 1.2; text-decoration: none !important; border-radius: 5px; border: 2px solid var(--ps7-bleu) !important; transition: background-color 0.15s ease, border-color 0.15s ease; } /* * Le survol ne concerne QUE les boutons actifs. * * Le bouton inactif porte aussi la classe générique : sans cette exclusion, la * règle commune le faisait virer au bleu au passage de la souris, laissant * croire qu'il menait quelque part. Un bouton éteint doit rester éteint. */ .ps7-inter .ps7-inter-bouton:not(.ps7-inter-bouton--inactif):hover, .ps7-inter .ps7-inter-bouton:not(.ps7-inter-bouton--inactif):focus { background-color: var(--ps7-marine) !important; border-color: var(--ps7-marine) !important; color: #FFFFFF !important; } .ps7-inter .ps7-inter-bouton:focus-visible { outline: 3px solid var(--ps7-bleu); outline-offset: 2px; } /* * « Liste d'attente » se distingue au repos — contour seul, puisque la session * est complète et que l'action est secondaire. Au survol en revanche, il prend * exactement la teinte des boutons « Réserver » : aucune règle propre ici, il * hérite du survol commun, devenu marine le 08.08.2026 avec lui. */ .ps7-inter .ps7-inter-bouton--attente { background-color: transparent !important; color: var(--ps7-marine) !important; border-color: var(--ps7-marine) !important; } .ps7-inter .ps7-inter-bouton--inactif, .ps7-inter .ps7-inter-bouton--inactif:hover, .ps7-inter .ps7-inter-bouton--inactif:focus { background-color: var(--ps7-trait) !important; border-color: var(--ps7-trait) !important; color: var(--ps7-gris) !important; cursor: default; } .ps7-inter .ps7-inter-vide { margin: 0; padding: 22px; background-color: #FFFFFF; border-radius: 10px; color: var(--ps7-gris); } /* Texte réservé aux lecteurs d'écran, défini localement pour ne dépendre d'aucune classe du thème. */ .ps7-inter .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ PASTILLE DE THÉMATIQUE. ⚠ AUCUNE COULEUR ICI, ET CE N'EST PAS UN OUBLI. Depuis la 1.61.0, les pastilles sont des DONNÉES : le client les nomme et les colore dans l'onglet « Pastilles » des réglages. Leurs couleurs sont donc imprimées avec le tableau, par PS7_Inter_Affichage::style_pastilles(), sous la forme « .ps7-inter-pastille-- ». Cette feuille ne porte que la FORME, qui, elle, ne dépend de personne. N'y ajoutez pas de couleur « par défaut » : une pastille dont la clé n'existe plus dans les réglages n'est pas rendue du tout, et une couleur de repli ne servirait donc jamais — sinon à masquer une erreur de configuration. « display: inline-block » EST LA DÉCLARATION QUI COMPTE. En surtitre, la pastille est suivie du nom de la formation, qui est un bloc : elle passe donc à la ligne toute seule. En « block », elle s'étirerait sur toute la largeur de la cellule — le seul défaut que le client ait relevé sur les maquettes. ------------------------------------------------------------------ */ .ps7-inter .ps7-inter-pastille { display: inline-block; /* La police du NOM de la formation, en plus petit — demande du client. */ font-family: var(--ps7-police-titre) !important; font-size: 0.75em; font-weight: 600 !important; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 12px 5px; border-radius: 50px; white-space: nowrap; } /* En surtitre, le seul écart au nom qui suit. */ .ps7-inter .ps7-inter-pastille--surtitre { margin-bottom: 6px; } /* La colonne se réduit à son contenu : « width: 1% » est le procédé usuel pour qu'une colonne de tableau ne prenne que la place qu'il lui faut. */ .ps7-inter .ps7-inter-tableau .ps7-inter-c-thematique { width: 1%; white-space: nowrap; } /* ------------------------------------------------------------------ Sous 980 px : chaque ligne devient une carte. Le seuil est celui de Divi pour la tablette, afin que la bascule se fasse au même moment que le reste de la page. Il compte double ici, puisque #page-container masque le débordement horizontal : un tableau trop large serait coupé, pas défilable. ------------------------------------------------------------------ */ @media screen and (max-width: 980px) { /* * Le tableau cesse d'être un tableau : display:block sur la table ET sur le * corps. Sans cela, le navigateur reconstruit autour des lignes une boîte de * tableau anonyme, et une ligne passée en display:block y reste enfermée : * ses marges sont ignorées et son arrondi n'est pas rendu. C'est la raison * pour laquelle les cartes se touchaient alors que la marge était bien * déclarée. L'overflow:hidden du mode bureau est également relâché, sans quoi * il rognerait l'ombre portée de chaque carte. */ .ps7-inter .ps7-inter-tableau { display: block; /* * « !important » obligatoire ici : le fond blanc du mode bureau l'est * aussi, et à spécificité égale une déclaration ordinaire ne l'écrase * pas. Sans cela le tableau reste blanc DERRIÈRE les cartes, et l'écart * de 14 px devient invisible — du blanc sur du blanc. */ background-color: transparent !important; border-radius: 0; border-collapse: separate; border-spacing: 0; box-shadow: none; overflow: visible; } .ps7-inter .ps7-inter-tableau tbody { display: block; } /* * display:none et non un masquage visuel : en mode carte, les cellules * passent en display:block, ce qui retire déjà au tableau sa sémantique. * Un en-tête seulement masqué à l'œil resterait lu par les lecteurs * d'écran, qui annonceraient chaque libellé deux fois — une fois par * l'en-tête, une fois par le libellé recomposé devant la valeur. */ .ps7-inter .ps7-inter-tableau thead { display: none; } .ps7-inter .ps7-inter-tableau tbody tr { display: block; background-color: #FFFFFF !important; border-radius: 10px; box-shadow: 0 1px 2px rgba(1, 18, 86, 0.08); margin: 0; padding: 6px 0; /* L'arrondi s'applique aussi aux fonds des cellules, qui autrement dépasseraient aux quatre coins de la carte. */ overflow: hidden; } /* * L'écart se pose ENTRE deux cartes, et non sous chacune d'elles. La * différence compte dès qu'une limite d'affichage masque la fin de la liste : * une marge basse laisserait un blanc suspendu sous la dernière carte * visible, puisque la marque du dernier enfant appartient à une ligne qui, * elle, ne s'affiche pas. */ .ps7-inter .ps7-inter-tableau tbody tr + tr { margin-top: 14px; } /* * UNE SESSION COMPLÈTE GARDE SA CARTE BLANCHE, COMME LES AUTRES. * * Une règle teintait ici la carte complète en gris très clair. Elle est * retirée, à la demande du client, et le raisonnement mérite d'être écrit * parce qu'il ne vaut QU'en mode carte. * * Dans un tableau, les lignes se touchent : une ligne grise entre des lignes * blanches est une bande, et une bande se lit d'un coup d'œil. Détachez ces * mêmes lignes en cartes posées sur le fond de la page — lequel est * justement gris clair, la même famille de teinte — et le signal se * retourne. La carte grise ne se lit plus comme signalée mais comme * éteinte : à demi effacée, presque désactivée, alors qu'elle propose une * liste d'attente bien active. * * Rien n'est perdu en retirant la teinte, parce que la teinte ne portait * rien à elle seule : la ligne « Places » affiche COMPLET en rouge, et le * bouton porte « Liste d'attente » au lieu de « Réserver ». Deux signaux * écrits en toutes lettres, qu'aucun daltonisme ne brouille — ce que le fond * gris, lui, ne garantissait pas. * * IL N'Y A RIEN À NEUTRALISER D'AUTRE, et il faut le savoir avant de vouloir * rétablir quoi que ce soit ici. La carte tire son blanc de la règle * générale « tbody tr » ci-dessus, et les cellules sont déjà transparentes * par la règle générale « tbody td, tbody th ». La seule chose qui grisait * la carte était la déclaration retirée ici : la supprimer suffit, et * ajouter des blancs par-dessus ne ferait que du bruit. */ /* * RYTHME VERTICAL DE LA CARTE — QUATRE PIXELS ENTRE LES DONNÉES, * SEIZE AUTOUR DES DEUX ARTICULATIONS. * * Le retrait de base tombe de 8 à 1 px : entre deux lignes de données * voisines, l’écart n’est plus que 1 + 1 = 2 px. Dates, lieu et places * forment ainsi un bloc, au lieu de trois lignes flottant à égale * distance de tout. * * CE RETRAIT NE VAUT QUE POUR LES DEUX INTERLIGNES DU MILIEU, et c’est * la seule raison pour laquelle il peut être aussi bas. Les quatre * autres bords de la carte — au-dessus du nom, sous le nom, au-dessus du * bouton, sous le bouton — sont déclarés un par un plus bas, et ne * dépendent donc pas de cette valeur. La baisser encore ne resserrerait * QUE les deux interlignes visés. * * DEUX RESPIRATIONS SONT MAINTENUES À 16 PX, et elles sont les seules : * sous le nom de la formation, et au-dessus du bouton. Ce sont les deux * endroits où la carte change de nature — du titre aux données, des * données à l’action. Les resserrer aussi rendrait la carte compacte * mais illisible : tout y aurait le même poids. * * CHACUNE DES DEUX EST LA SOMME DE DEUX RETRAITS VOISINS, 8 + 8, et non * une déclaration unique. C’est délibéré : n’en changer qu’une moitié * décalerait l’articulation sans qu’on voie pourquoi, puisque la valeur * lue à l’écran resterait la somme des deux. */ .ps7-inter .ps7-inter-tableau tbody td, .ps7-inter .ps7-inter-tableau tbody th { display: block; border-top: 0; padding: 1px 18px; white-space: normal; } /* * ⚠ LA SPÉCIFICITÉ SE COMPTE ICI, ELLE NE S’ESTIME PAS. * * La règle ci-dessus vaut (0,2,2) — deux classes, deux types. Un * sélecteur « .ps7-inter .ps7-inter-c-action » ne vaut que (0,2,0) et * PERD contre elle : c’est exactement le piège relevé le 04.09.2026 sur * « text-align: right », et il avait fait ici une seconde victime que * personne n’avait vue — le « padding-bottom: 16px » de la cellule * d’action, écrit de longue date, n’a jamais rien peint. Le bas des * cartes tirait ses 8 px du raccourci « padding » ci-dessus. * * Toutes les règles de cellule qui suivent sont donc portées par * « tbody td. » ou « tbody th. », ce qui les porte à (0,3,2). N’en * allégez aucune en retirant « tbody » ou le type : elle cesserait de * s’appliquer, en silence, et le défaut ne se verrait qu’à l’œil. */ .ps7-inter .ps7-inter-tableau tbody th.ps7-inter-c-formation { padding-bottom: 8px; } .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-dates { padding-top: 8px; } .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-places { padding-bottom: 8px; } /* * EN CARTE, LA COLONNE DEVIENT LE SURTITRE — sans une ligne de PHP. * * Les cellules passent en « display: block » et se suivent dans l'ordre du * document ; la thématique étant la première colonne, elle se retrouve * naturellement au-dessus du nom. Les deux placements « colonne » et * « surtitre » rendent donc la même carte, et c'est voulu : sous 980 px il * n'y a plus de colonnes, la distinction n'a plus d'objet. * * Le retrait haut de 16 px lui vient de « tr > :first-child ». Ne reste que * l'écart au nom, aligné sur celui du surtitre. */ .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-thematique { width: auto; padding-bottom: 5px; } .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-action { padding-top: 8px; padding-bottom: 16px; } /* * CETTE RÈGLE DOIT RESTER APRÈS CELLE DES DATES, et ce n’est pas une * question de goût. Les deux valent (0,3,2) : à priorité égale, c’est la * DERNIÈRE ÉCRITE qui l’emporte. * * L’ordre compte parce que la cellule de la formation est FACULTATIVE — * « $avec_formation » ne vaut que pour la variante « accueil ». Sans * elle, la première cellule de la carte est celle des dates, et c’est * alors à elle de porter le retrait haut de 16 px, et non les 8 px de sa * propre règle. Placée ici, cette déclaration règle les deux cas d’un * coup ; remontée de quelques lignes, elle n’en réglerait plus aucun. */ .ps7-inter .ps7-inter-tableau tbody tr > :first-child { padding-top: 16px; } /* * LES TROIS ÉTIQUETTES ONT LA MÊME GRAISSE, ET IL FAUT L’ÉCRIRE POUR * L’OBTENIR — sans quoi chacune hérite de celle de SA cellule, et les * trois cellules n’ont pas la même : * .ps7-inter-c-dates 500 « DATES · » ressortait à demi * .ps7-inter-c-lieu 600 « LIEU · » ressortait franchement * .ps7-inter-c-places 400 « PLACES · » seule était juste * * Ces graisses appartiennent aux VALEURS, pas aux libellés : le 600 du * lieu est là pour la ville, le 500 des dates pour la date. En mode * tableau, l’en-tête de colonne portait ces libellés et n’héritait de * rien ; en carte, ils sont dans la cellule, et l’héritage les a * rattrapés sans que personne l’ait voulu. Relevé le 07.09.2026. * * 400 EST LA VALEUR NEUTRE, celle que « PLACES · » avait déjà. Le « ! » * suit la politique de la feuille : une étiquette est de l’identité * visuelle, et un thème qui graisse « td » la reprendrait. * * LA VILLE, ELLE, RESTE EN GRAS. Elle est un texte nu dans la cellule, * donc un élément anonyme qu’aucun sélecteur n’atteint : elle ne peut * tenir sa graisse QUE de l’héritage, et c’est pour elle que le 600 de * la cellule existe. Ne le retirez pas en croyant corriger le libellé — * vous dégraisseriez la ville et rien d’autre. */ .ps7-inter .ps7-inter-c-dates::before, .ps7-inter .ps7-inter-c-lieu::before, .ps7-inter .ps7-inter-c-places::before { content: attr(data-ps7-libelle) " · "; color: var(--ps7-gris); font-size: 0.8125em; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.04em; } /* * LE BOUTON REPREND SA LARGEUR PROPRE — IL N’Y A DONC PLUS RIEN À * DÉCLARER, et c’est la raison pour laquelle ce pavé remplace une règle * au lieu d’en corriger une. * * Le mode bureau pose déjà « display: inline-block » sur ce bouton. La * règle retirée ici le repassait en « block », donc en pleine largeur de * carte ; la supprimer suffit à lui rendre sa largeur naturelle, et * réécrire « inline-block » ne ferait que répéter la déclaration * générale. Le « text-align: center » qui l’accompagnait ne servait * qu’à centrer le libellé dans un bouton plus large que lui : sans * pleine largeur, il n’a plus d’objet. * * CE QUE CELA COÛTE, PUISQUE ÇA SE PAIE QUELQUE PART : la cible tactile * perd en largeur — de l’ordre de 110 px pour « Réserver », au lieu de la * largeur de la carte. Sa HAUTEUR ne bouge pas et reste à 44 px, le seuil * couramment retenu ; et la carte entière demeure cliquable par le lien * de ligne étendu. Le compromis est tenable, mais c’en est un. */ .ps7-inter .ps7-inter-promesse { max-width: none; } /* * LE NOM COURT PASSE À DROITE DE LA VILLE, SUR UNE SEULE LIGNE. * * Il occupait auparavant une ligne à lui sous la ville, libre d’y revenir * autant qu’il voulait. Il rejoint désormais la ville, dont une virgule * le sépare : « Lausanne, Hôtel Carlton ». * * LA CELLULE DEVIENT UNE RANGÉE FLEXIBLE À TROIS ÉLÉMENTS, et il faut les * connaître tous les trois pour comprendre la suite : * 1. l’étiquette « LIEU · », qui est le « ::before » de la cellule ; * 2. la ville, qui n’est dans aucune balise — c’est un texte nu, dont * le modèle de boîtes flexibles fait un élément ANONYME ; * 3. le nom court, seul des trois qu’une classe puisse désigner. * * ⚠ UN ÉLÉMENT ANONYME NE SE STYLE PAS. C’est ce qui rend la déclaration * suivante décisive, et si facile à défaire par mégarde. * * QUI SE FAIT TRONQUER EST DÉCIDÉ PAR « min-width: 0 », POSÉ SUR LE SEUL * NOM COURT. Par défaut, un élément flexible ne se rétrécit pas sous son * contenu minimal — sa taille minimale automatique. Tant que cette borne * tient, « overflow: hidden » n’a rien à rogner et la ligne déborde au * lieu de se couper : c’est l’erreur classique, et elle donne * l’impression que « text-overflow » ne fonctionne pas. En la libérant * ici et NULLE PART AILLEURS, on obtient exactement le partage voulu : la * ville garde la sienne et ne sera JAMAIS rognée, le nom court cède le * premier et porte seul les points de suspension. * * Le texte entier reste rendu au survol par l’attribut « title », posé * par le modèle — comme en mode bureau, où la même troncature opère * déjà. La coupure ne retire donc aucune information. * * LA MARGE DROITE DE L’ÉTIQUETTE N’EST PAS DE LA COQUETTERIE. Le « · » * du « ::before » est suivi d’une espace, dans le contenu généré. Cette * espace se trouve en fin de la ligne de son élément flexible, et le * rendu l’y supprime : sans marge, on lirait « LIEU ·Lausanne ». */ .ps7-inter .ps7-inter-tableau tbody td.ps7-inter-c-lieu { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; } .ps7-inter .ps7-inter-c-lieu::before { flex: 0 0 auto; margin-right: 0.26em; } .ps7-inter .ps7-inter-etablissement { display: block; flex: 0 1 auto; min-width: 0; max-width: none; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * LA VIRGULE VIT DANS LA BOÎTE TRONQUÉE, et c’est voulu : elle s’efface * avec le nom court le jour où la place manque tout à fait, au lieu de * rester pendue après la ville. Aucune espace ne la précède — les blancs * du modèle entre la ville et la balise ne forment aucun élément * flexible, le rendu les écarte. */ .ps7-inter .ps7-inter-etablissement::before { content: ", "; } } /* ------------------------------------------------------------------ NOMBRE DE LIGNES DIFFÉRENT SELON L'ÉCRAN — RIEN ICI, DÉLIBÉRÉMENT. Les deux règles qui masquent « .ps7-inter-ligne--hors-bureau » et « .ps7-inter-ligne--hors-mobile » ne sont PAS dans cette feuille. Elles sont imprimées en tête de page, dans PS7_Inter_Affichage::STYLE_CRITIQUE, pour deux raisons expliquées là-bas : une feuille qui arrive tard laisserait voir des sessions que le réglage écarte, et une copie ici aurait divergé de l'autre sans que rien ne le signale. N'AJOUTEZ PAS CES SÉLECTEURS ICI — ET SACHEZ QUE RIEN NE VOUS EN EMPÊCHE. Ce pavé annonçait « un contrôle automatique vérifie qu'ils n'y reviennent pas ». Ce contrôle n'existe pas. Relevé du 23.08.2026 : « grep -rln STYLE_CRITIQUE bench/test-*.php » ne rend aucun fichier, et aucune suite du banc ne relit cette feuille à la recherche de ces deux sélecteurs. C'est le troisième pavé de la même famille : les deux autres, au-dessus de PS7_Inter_Affichage::STYLE_CRITIQUE et de style_critique(), portaient la même promesse et ont été corrigés le même jour. Une garantie annoncée et inexistante est pire qu'aucune garantie : elle dispense de regarder. La consigne, elle, reste entière — une copie ici divergerait de l'autre sans que rien ne le dise —, mais elle ne tient aujourd'hui qu'à la relecture. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Impression : le mode carte étant réservé à l'écran, le tableau garde sa forme de bureau sur le papier. Trois réglages faits pour un écran y nuisent, et sont relâchés ici : le rognage du débordement, qui couperait une colonne au lieu de la replier, et les deux consignes d'insécabilité. ------------------------------------------------------------------ */ @media print { .ps7-inter .ps7-inter-tableau { overflow: visible; box-shadow: none; } .ps7-inter .ps7-inter-c-lieu, .ps7-inter .ps7-inter-c-action { white-space: normal; } /* Sur le papier, un nom coupé par des points de suspension est perdu : la feuille imprimée n'a pas de survol pour révéler la suite. */ .ps7-inter .ps7-inter-etablissement { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } .ps7-inter .ps7-inter-ligne { page-break-inside: avoid; break-inside: avoid; } } /* ------------------------------------------------------------------ NETTETÉ DES PETITS TEXTES. Constat mesuré le 07.08.2026 sur une capture du site : dans les textes de 0,875em, 19 % seulement des pixels d'encre étaient réellement sombres, contre 45 % dans les textes courants et 56 % dans les titres. Le texte n'est pas mal rendu : il est trop fin pour que le lissage produise des traits pleins. IL N'EXISTE AUCUNE PROPRIÉTÉ CSS QUI AUGMENTE LA DÉFINITION. « text-rendering » ne touche qu'au crénage et aux ligatures ; « -webkit-font-smoothing: antialiased », qu'on voit recopié partout, rend le texte plus FIN et plus pâle — l'inverse de ce qu'on cherche. Les seuls leviers réels sont la graisse, la taille et le contraste. D'où ces deux règles : graisse 500 plutôt que 400, et lissage explicitement rendu au navigateur au cas où le thème aurait activé le mode amincissant sur toute la page. La taille n'est pas touchée — c'est le levier suivant si celui-ci ne suffit pas. ------------------------------------------------------------------ */ .ps7-inter .ps7-inter-promesse, .ps7-inter .ps7-inter-etablissement { font-weight: 500 !important; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* ------------------------------------------------------------------ BLOC « PROCHAINE SESSION » — [ps7_prochaine_session] IL N'IMPOSE AUCUNE COULEUR DE TEXTE, ET C'EST TOUT SON INTÉRÊT. Le tableau vit sur fond blanc : sa palette y est calibrée, et le marine de ses titres y tient le contraste. Ce bloc-là, lui, est fait pour être posé n'importe où — en tête d'une page de formation sur fond blanc, dans une section Divi à fond marine, sur une bande d'image. Une encre fixe l'aurait rendu illisible une fois sur deux, et le premier fond foncé rencontré aurait demandé une seconde feuille. D'où « color: inherit », qui prend celle du contexte, et « currentColor » pour les séparateurs : le bloc se teinte de ce qui l'entoure. Les nuances entre ses lignes sont obtenues par l'opacité, seule façon de dire « plus discret » sans savoir sur quoi l'on écrit. AUCUN FILET, AUCUN CADRE, AUCUN RETRAIT. Le bloc s'aligne sur le texte qui l'entoure et se fond dans la colonne qui le porte. C'est ce qui lui permet d'être posé n'importe où sans y faire tache : une marque de gauche l'aurait désigné comme une citation ou un encadré, ce qu'il n'est pas — il annonce, il ne cite pas. UNE EXCEPTION, ET ELLE EST ASSUMÉE : L'ÉTAT DES PLACES. Il reprend les quatre teintes du tableau, par les mêmes classes — deux échelles de couleurs pour la même donnée se seraient contredites sur la même page. Or ces teintes sont calibrées pour du texte sur fond BLANC, où le tableau vit. Mesuré : vert 7,9:1 sur blanc mais 2,1:1 sur un fond #1C1C1E ; orange 5,0 puis 3,4 ; rouge 5,9 puis 2,9 ; gris 6,8 puis 2,5. Aucune couleur unique ne peut tenir le niveau AA sur du blanc ET sur du presque-noir — les deux contraintes s'excluent arithmétiquement, ce n'est pas une question de nuance mieux choisie. Sur une section à fond foncé, redéclarez donc les quatre variables ; elles sont déjà lues par les règles de couleur, il n'y a rien d'autre à toucher : .ps7-inter.ps7-inter-prochaine { --ps7-vert: #7BB661; --ps7-orange: #E8973C; --ps7-rouge: #E5645A; --ps7-gris: #A9A9B2; } LE GRIS EST LE QUATRIÈME, ARRIVÉ LE 08.09.2026 avec l'état « inscriptions closes ». Il était jusque-là confiné aux textes secondaires ; il porte désormais un ÉTAT, et il tombe sous la même règle que les trois autres. Une section sombre qui n'en redéclarerait que trois afficherait cet état-là à 2,5:1 — illisible, et en silence. Le double sélecteur n'est pas décoratif : à spécificité égale, c'est la feuille chargée en dernier qui l'emporterait. ------------------------------------------------------------------ */ .ps7-inter.ps7-inter-prochaine { color: inherit; padding: 0; line-height: 1.55; } .ps7-inter.ps7-inter-prochaine p { margin: 0; padding: 0; color: inherit !important; font-family: var(--ps7-police-texte); } /* La première ligne porte l'annonce : elle seule est appuyée. */ .ps7-inter .ps7-inter-prochaine-lieu { font-weight: 600 !important; } /* La ligne des dates est retirée par l'opacité, jamais par un gris chiffré : sur fond foncé, un gris fixe s'assombrit au lieu de s'estomper. 0,85 conserve un rapport de contraste utilisable dans les deux sens. LA LIGNE DES PLACES ET DU TARIF, ELLE, RESTE À PLEINE FORCE. Elle porte désormais l'état des places, dont la couleur est le message : l'opacité étant appliquée au paragraphe entier, elle aurait délavé le rouge de « Complet » sans qu'aucun enfant ne puisse la rattraper — une opacité de parent ne se défait pas. La hiérarchie tient de toute façon par la graisse : seule la première ligne est en 600. */ .ps7-inter .ps7-inter-prochaine-quand { opacity: 0.85; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .ps7-inter .ps7-inter-prochaine-offre { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* UNE INFORMATION NE SE COUPE JAMAIS ; SEULES LES JOINTURES CÈDENT. Le bloc joint ses informations par des « · ». Sans cette règle, le paragraphe n'est qu'une suite de mots et le navigateur y coupe où bon lui semble : « Prochaine session · Lausanne · Hôtel / Carlton ». Mesuré sur la maquette, à 341 pixels utiles — un iPhone courant —, DEUX informations sur cinq étaient coupées ; à 286 pixels, une. Avec la règle : zéro, aux deux largeurs. Le nombre de lignes ne diminue pas, et ce n'est pas le but. Le bloc n'est pas plus court, il est juste : le retour ne peut plus tomber qu'APRÈS un « · », là où il se lit comme une respiration voulue. LE SÉPARATEUR, LUI, RESTE SÉCABLE, et c'est délibéré. Le rendre insécable à son tour soudait chaque segment au suivant : le contenu cessait de tenir dans l'écran — 377 pixels mesurés dans un téléphone de 286 — et débordait au lieu de revenir à la ligne. Deux lignes au lieu de quatre, mais du texte hors de l'écran. La variante a été essayée, mesurée, et écartée pour cette raison. */ .ps7-inter .ps7-inter-prochaine-seg { white-space: nowrap; } .ps7-inter .ps7-inter-prochaine-sep { opacity: 0.5; } .ps7-inter .ps7-inter-prochaine-lien { margin-top: 2px !important; } .ps7-inter .ps7-inter-prochaine-lien a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; /* Le soulignement seul distingue le lien : la couleur, elle, appartient au fond. */ text-decoration-thickness: 1px; opacity: 0.85; } .ps7-inter .ps7-inter-prochaine-lien a:hover, .ps7-inter .ps7-inter-prochaine-lien a:focus { opacity: 1; text-decoration-thickness: 2px; } .ps7-inter .ps7-inter-prochaine-lien a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* ------------------------------------------------------------------ VOILE D'ATTENTE — le temps que la page suivante arrive. Les pages de destination de ce site sont longues : plusieurs secondes peuvent s'écouler entre le clic et le premier pixel peint, pendant lesquelles le navigateur continue d'afficher la page qu'on quitte. Rien n'indique alors que le clic a été reçu, et le visiteur reclique. ⚠ CE VOILE NE SE RETIRE JAMAIS DE LUI-MÊME EN FONCTIONNEMENT NORMAL, et c'est normal : la page qui le porte est détruite par la navigation. Tout ce que le script fait, il le fait pour les cas où la navigation N'A PAS lieu. Voir ps7-inter-sessions.js. ------------------------------------------------------------------ */ .ps7-inter-attente { /* * ⚠ LE VOILE DÉCLARE SA PROPRE COULEUR, ET IL LE DOIT — CORRIGÉ LE * 07.09.2026, APRÈS DEUX SIGNALEMENTS DU CLIENT. * * Les variables de la charte — « --ps7-bleu » et les autres — sont déclarées * sur « .ps7-inter », le conteneur du TABLEAU. Ce voile, lui, est imprimé à * la racine du corps de page : il n'est pas dedans, et n'hérite donc * d'AUCUNE d'elles. * * CE QUE CELA DONNAIT : « background-color: var(--ps7-bleu) » sur les douze * points d'une variable indéfinie ne produit pas du bleu, ni une erreur — * cela produit du TRANSPARENT. Mesuré sur le site du client : * « rgba(0, 0, 0, 0) ». Le voile blanchissait bien la page, et la roue, * elle, n'a jamais été peinte. Sur un fond de page clair, le client ne * voyait donc rien du tout et concluait — à juste titre — que le preloader * ne fonctionnait pas. * * C'EST LA SECONDE FOIS QUE CE VOILE PAIE SA POSITION HORS DU CONTENEUR : * la première, c'était la règle qui masque son texte aux lecteurs d'écran. * Tout ce que ce bloc utilise doit être déclaré ICI, jamais emprunté au * tableau. */ --ps7-attente-roue: #0D71C3; position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.82); /* * IL N'APPARAÎT PAS INSTANTANÉMENT, ET LE DÉLAI EST DANS LA TRANSITION. * * Sous 150 ms, la page suivante est souvent déjà là : un éclair blanc serait * alors plus désagréable que l'attente qu'il prétend couvrir. Le retard est * porté par le CSS et non par un minuteur du script, de sorte qu'un clic * suivi d'une navigation immédiate ne peigne rien du tout. * * « visibility » accompagne « opacity » : sans elle, un voile à opacité nulle * resterait au-dessus de la page et intercepterait les clics. */ opacity: 0; visibility: hidden; } /* * ⚠ AUCUNE TRANSITION, ET LE DÉLAI N'EST PLUS ICI — CORRIGÉ LE 07.09.2026, * APRÈS UN SIGNALEMENT DU CLIENT SUR LE SITE EN SERVICE. * * Ce voile portait son attente de 150 ms dans une transition CSS, suivie d'un * fondu de 180 ms. Mesuré sur la page du client : il restait TOTALEMENT * invisible pendant les 156 premières millisecondes, et n'atteignait son * opacité pleine qu'à 360 ms. * * OR LA PAGE QUI PORTE CE VOILE EST EN TRAIN DE DISPARAÎTRE. Au clic, le * navigateur engage la navigation et cesse de rafraîchir le document sortant * dès qu'il a de quoi peindre le suivant — bien avant 360 ms. Le fondu n'avait * donc jamais le temps de commencer, et le client ne voyait rien du tout, sur * un dispositif par ailleurs entièrement fonctionnel. * * L'APPARITION EST DÉSORMAIS INSTANTANÉE : dès que la classe est posée, les * pixels sont là à l'image suivante. Le délai de 150 ms — qui évite un éclair * blanc sur une page qui arrive tout de suite — est tenu par un minuteur du * script, où il survit à ce que le navigateur décide de la page sortante. * * N'Y REMETTEZ PAS DE TRANSITION. Elle rendrait le voile plus doux dans un * navigateur qui garde la page vivante, et invisible chez tous les autres. */ .ps7-inter-attente.est-visible { opacity: 1; visibility: visible; } /* * ⚠ LE VOILE VIT HORS DE « .ps7-inter », et cette règle en découle. * * La règle générale du texte réservé aux lecteurs d'écran est portée par le * conteneur du tableau : « .ps7-inter .screen-reader-text ». Le voile, lui, est * imprimé en pied de page, à la racine du document — il n'est donc PAS dedans, * et son « Chargement… » s'affichait en toutes lettres au milieu de l'écran. * Relevé avant livraison, jamais vu en production. */ .ps7-inter-attente .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ps7-inter-attente__roue { position: relative; width: 64px; height: 64px; } .ps7-inter-attente__roue span { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background-color: var(--ps7-attente-roue); transform: rotate(var(--ps7-a)) translate(26px) scale(var(--ps7-s)); opacity: var(--ps7-o); } /* * DOUZE POINTS DÉCROISSANTS — ET L'ORDRE DES ANGLES COMPTE AUTANT QUE LES * TAILLES. * * Les tailles descendent régulièrement, de 1 à .18. Les ANGLES, eux, remontent : * 0°, puis 330°, 300°, 270°… La roue tournant dans le sens des aiguilles d'une * montre, cela place la traîne DERRIÈRE la tête. * * ⚠ NE LES « REMETTEZ PAS DANS L'ORDRE ». Une suite 0, 30, 60, 90 a l'air d'être * la version correcte et ne l'est pas : elle met le plus petit point juste * derrière le plus gros, et la traîne s'épaissit en s'éloignant de la tête — * une comète à l'envers. C'est l'état qu'avait la première maquette, et le * client l'a vu tout de suite. */ .ps7-inter-attente__roue span:nth-child(1) { --ps7-a: 0deg; --ps7-s: 1; --ps7-o: 1; } .ps7-inter-attente__roue span:nth-child(2) { --ps7-a: 330deg; --ps7-s: 0.92; --ps7-o: 0.92; } .ps7-inter-attente__roue span:nth-child(3) { --ps7-a: 300deg; --ps7-s: 0.84; --ps7-o: 0.84; } .ps7-inter-attente__roue span:nth-child(4) { --ps7-a: 270deg; --ps7-s: 0.76; --ps7-o: 0.76; } .ps7-inter-attente__roue span:nth-child(5) { --ps7-a: 240deg; --ps7-s: 0.68; --ps7-o: 0.68; } .ps7-inter-attente__roue span:nth-child(6) { --ps7-a: 210deg; --ps7-s: 0.60; --ps7-o: 0.60; } .ps7-inter-attente__roue span:nth-child(7) { --ps7-a: 180deg; --ps7-s: 0.52; --ps7-o: 0.52; } .ps7-inter-attente__roue span:nth-child(8) { --ps7-a: 150deg; --ps7-s: 0.44; --ps7-o: 0.44; } .ps7-inter-attente__roue span:nth-child(9) { --ps7-a: 120deg; --ps7-s: 0.36; --ps7-o: 0.36; } .ps7-inter-attente__roue span:nth-child(10) { --ps7-a: 90deg; --ps7-s: 0.30; --ps7-o: 0.30; } .ps7-inter-attente__roue span:nth-child(11) { --ps7-a: 60deg; --ps7-s: 0.24; --ps7-o: 0.24; } .ps7-inter-attente__roue span:nth-child(12) { --ps7-a: 30deg; --ps7-s: 0.18; --ps7-o: 0.18; } .ps7-inter-attente.est-visible .ps7-inter-attente__roue { animation: ps7-inter-tourne 1.1s steps(12) infinite; } @keyframes ps7-inter-tourne { to { transform: rotate(360deg); } } /* Le mouvement se coupe pour qui l'a demandé à son système ; LE VOILE RESTE, car c'est lui qui porte l'information « ça travaille ». Retirer les deux rendrait le clic muet pour ces visiteurs-là. */ @media (prefers-reduced-motion: reduce) { .ps7-inter-attente.est-visible .ps7-inter-attente__roue { animation: none; } } /* Le voile est fait pour l'écran. Sur le papier il n'a aucun sens, et il couvrirait la page d'un aplat. */ @media print { .ps7-inter-attente { display: none !important; } }