/* ========================================================================== HUNGRY JAZZ — RÈGLES NÉES DE L'INTÉGRATION WORDPRESS -------------------------------------------------------------------------- Feuille absente de la maquette. Elle ne contient QUE ce qu'un contenu administrable rend nécessaire, et n'introduit ni couleur, ni police, ni forme nouvelle : uniquement des jetons existants de tokens.css. Elle ne redéfinit aucune règle de components.css. Les pages validées ne changent donc pas d'aspect. ========================================================================== */ /* ========================================================================== LES PANNEAUX DE PROFESSEURS NE SONT PAS TRAITÉS ICI — ET C'EST DÉLIBÉRÉ -------------------------------------------------------------------------- Une règle `.person[data-universe]` a vécu ici : elle rendait la couleur des panneaux administrable, une couleur par professeur. Elle contredisait les maquettes, qui ne traitent pas des personnes mais le PREMIER et le SECOND panneau — et différemment selon la page : accueil 1er = bleu Solo Jazz · 2e = rose Stardust page de cours 1er = couleur de l'univers · 2e = noir Résultat à l'écran : du bleu et du rose au milieu d'une page orange. Les classes `person--karl` et `person--vivian` sont donc posées PAR POSITION dans le gabarit — elles signifient « premier » et « second », pas des prénoms. Toutes les règles validées de components.css et page-cours.css s'appliquent alors d'elles-mêmes, et il n'y a rien à réécrire ici. (Retiré le 27/09/2026, sur retour du client.) ========================================================================== */ /* ========================================================================== PLANNING — LES JOURS NON SÉLECTIONNÉS -------------------------------------------------------------------------- Le contenu de TOUS les jours est dans la réponse HTML ; seul l'attribut `hidden` distingue le jour affiché. `base.css` ne pose pas de règle sur `hidden`, et `.schedule__list` est un conteneur de grille : sans cette ligne, `display: grid` l'emporterait sur la valeur par défaut du navigateur et les jours masqués resteraient visibles. ========================================================================== */ .schedule__list[hidden] { display: none; } /* ========================================================================== L'ACCÈS AUX SALLES -------------------------------------------------------------------------- Nouveau bloc : le document d'accès fourni le 27/09/2026 apporte bien plus qu'une station — plusieurs lignes par salle, des temps de marche, des itinéraires depuis les grands points de Paris. La maquette n'avait qu'une ligne « Métro », faute d'information. Que des jetons existants : aucune couleur, aucune police, aucune forme nouvelle. Ces classes n'existent nulle part ailleurs : aucune page validée ne peut être affectée. ========================================================================== */ .acces__titre { font-family: var(--f-cond); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-paper-muted); margin-top: var(--sp-s); margin-bottom: var(--sp-3xs); } .acces { list-style: none; margin: 0 0 var(--sp-s); padding: 0; display: grid; gap: var(--sp-3xs); } /* Une ligne par accès : pastilles, station, temps de marche. Le temps est poussé à droite pour que les trois colonnes se lisent en balayage. */ .acces__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3xs); padding-block: var(--sp-4xs); border-bottom: var(--bd-hair) solid var(--c-rule-soft); } .acces__station { font-family: var(--f-cond); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; } .acces__temps { margin-inline-start: auto; font-family: var(--f-cond); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-paper-muted); } /* ---- Itinéraires depuis les grands points ------------------------------- Deux colonnes : d'où l'on vient, puis le chemin. Sur mobile elles s'empilent — lire un itinéraire sur deux colonnes de 40 px n'aide personne. */ .itineraires { margin: 0 0 var(--sp-s); } .itineraires__ligne { display: grid; gap: var(--sp-4xs) var(--sp-s); padding-block: var(--sp-4xs); border-bottom: var(--bd-hair) solid var(--c-rule-soft); } @media (min-width: 40em) { .itineraires__ligne { grid-template-columns: 11rem 1fr; } } .itineraires__ligne dt { font-family: var(--f-cond); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-paper-muted); } .itineraires__ligne dd { margin: 0; font-size: var(--fs-body); line-height: 1.4; } .acces__proximite { font-size: var(--fs-body); line-height: 1.4; margin-bottom: var(--sp-3xs); } /* Les précautions : plus discrètes que le reste, mais présentes. Un temps de marche est une estimation, et le dire évite un reproche. */ .acces__note { font-size: var(--fs-micro); line-height: 1.5; color: var(--c-on-paper-muted); margin-bottom: var(--sp-4xs); } /* ========================================================================== LES PROFESSEURS GARDENT LEURS COULEURS D'UNE PAGE À L'AUTRE -------------------------------------------------------------------------- Demande du client du 27/09/2026 : « il faut toujours garder les mêmes couleurs sur la section des profs sur les différentes pages ». `page-cours.css` prévoyait autre chose sur les pages de cours : premier panneau à la couleur de l'univers, second en noir. Le bloc changeait donc d'aspect selon la page — bleu et rose sur l'accueil, orange et noir sur Danse Afro. Le client préfère un bloc reconnaissable partout : c'est un repère, pas une déclinaison. On revient donc au traitement de l'accueil sur toutes les pages. Les trois règles qui suivent défont, dans l'ordre, ce que `page-cours.css` imposait — y compris les ajustements qu'il faisait pour un fond noir, devenus faux sur du rose. AUCUNE COULEUR NOUVELLE : ce sont les deux teintes de la maquette d'accueil. ========================================================================== */ .people--duo .person--karl { background: var(--c-solo-jazz); color: var(--c-on-color); } .people--duo .person--vivian { background: var(--c-stardust); color: var(--c-on-color); } /* Le filet sous les disciplines redevient sombre : sur du rose, la version claire prévue pour un fond noir serait invisible. */ .people--duo .person--vivian .person__disciplines { border-bottom-color: rgba(0, 0, 0, .3); } /* Le surtitre reprend son noir translucide à 88 % — la valeur mesurée en D-82 pour rester au-dessus de 4,5:1 sur les aplats de la marque. */ .people--duo .person--vivian .person__role { color: inherit; opacity: .88; } /* ========================================================================== PAS DE FILET ENTRE LE HERO ET LA PREMIÈRE BANDE DE COURS -------------------------------------------------------------------------- Chaque bande de cours porte un filet noir de 2 px en haut. Entre une section blanche et un aplat de couleur, il fait une arête franche : c'est la DA du site. Mais depuis qu'une page à un seul cours n'affiche plus de bandeau de titre, la bande touche directement le hero. Le filet passe alors EN TRAVERS de l'aplat de couleur du hero, qui se prolonge dans la bande : il coupe en deux une surface qui devrait être continue. Repéré par le client sur la page Danse Afro, le 27/09/2026. La règle ne s'applique que dans ce cas précis — le sélecteur exige que la section suive immédiatement le hero. Si le client rédige un jour l'introduction de la page, la section intercalée revient, et le filet avec elle. ========================================================================== */ .phero + #les-cours .cours:first-of-type { border-top-width: 0; } /* ========================================================================== À PROPOS — la couleur suit la personne, la composition suit la place -------------------------------------------------------------------------- `page-a-propos.css` faisait porter les deux à `.chapitre--karl` et `.chapitre--vivian` : le bleu ET le portrait à droite. C'était juste dans une maquette à deux personnes, et faux dès la troisième — elle n'aurait eu ni couleur ni composition. Les deux modificateurs ne décrivent donc plus que la COMPOSITION, et la couleur vient du champ « Couleur du panneau » de la fiche. Karl reste bleu, Vivian reste rose, sur toutes les pages du site : c'est la demande du client du 27/09/2026, et c'est maintenant une donnée, plus une feuille de style. Voir docs/DECISIONS.md D-139. Ces règles ont la même spécificité que celles qu'elles remplacent et sont chargées après : elles l'emportent sans !important. ========================================================================== */ .chapitre[data-couleur="solo-jazz"] { background: var(--c-solo-jazz); color: var(--c-on-color); } .chapitre[data-couleur="afro"] { background: var(--c-afro); color: var(--c-on-color); } .chapitre[data-couleur="stardust"] { background: var(--c-stardust); color: var(--c-on-color); } /* La vignette d'une vidéo dont l'image mise en avant manque : on réserve la place du 16/9 plutôt que de laisser la grille s'effondrer, et l'absence se voit — c'est ce qui la fera corriger. */ .video__lien:not(:has(.video__vignette))::before { content: ""; display: block; aspect-ratio: 16 / 9; background: var(--c-rule-soft); } /* L'éditeur dans le pied de page — il remplace le repère « entité légale à fournir », désormais sans objet. Même graisse et même discrétion que la mention voisine : c'est une information de bas de page, pas une signature. */ .footer__editeur { font-family: var(--f-cond); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-paper-muted); }