/** * 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; letter-spacing: 0.02em; padding: 16px 18px; text-transform: none !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; 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; 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 : trois états, trois 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,73 : 1 sur blanc, 6,93 : 1 sur le fond de * survol : c'est l'état le plus lisible des trois, 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; } .ps7-inter .ps7-inter-c-action { text-align: right; 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; } /* ------------------------------------------------------------------ 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. */ .ps7-inter .ps7-inter-tableau tbody td, .ps7-inter .ps7-inter-tableau tbody th { display: block; border-top: 0; padding: 8px 18px; white-space: normal; } .ps7-inter .ps7-inter-tableau tbody tr > :first-child { padding-top: 16px; } .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; text-transform: uppercase; letter-spacing: 0.04em; } .ps7-inter .ps7-inter-c-action { padding-bottom: 16px; } .ps7-inter .ps7-inter-bouton { display: block; text-align: center; } .ps7-inter .ps7-inter-promesse { max-width: none; } /* * En carte, la place ne manque pas : le nom court n'est plus borné ni * tronqué, il revient à la ligne comme n'importe quel texte. Les trois * déclarations doivent être relâchées ENSEMBLE — la largeur maximale * seule laisserait « nowrap » produire un débordement horizontal, et * « nowrap » seul laisserait la borne couper un texte qui avait la place * de tenir. */ .ps7-inter .ps7-inter-etablissement { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; } } /* ------------------------------------------------------------------ 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. Un contrôle automatique vérifie qu'ils n'y reviennent pas. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 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 trois 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. 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 trois 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; } 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; } .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; }