/* Fun Planet Rennaz - horloge.css * * Composant HORLOGE (accueil, colonne des horaires), demande de Marino du * 2026-09-06 : elle remplace l'image d'attente de la colonne de gauche de la * section Horaires (voir fp_horaires_horloge(), inc/template-tags.php, et la * branche accueil de fp_render_horaires(), inc/sections.php). * * Feuille de composant AUTONOME, chargée sur template-home.php ET, depuis le * même jour, sur template-informations.php (voir functions.php), toujours * APRÈS la feuille du gabarit courant : elle ne touche ni home.css, ni * informations.css, ni main.css. Tout ce qui concerne l'horloge (le * composant SVG, sa pose dans la colonne de l'accueil, et sa variante de * palette inversée pour la page Informations pratiques) vit ici, y compris * les règles qui surchargent les colonnes qui l'accueillent. */ /* ========================================================================== HORLOGE (accueil, colonne des horaires) ========================================================================== */ /* Le cadran occupe toute sa colonne, toujours carre. Meme technique d'ombre portee que la mascotte qu'elle remplace (.fp-horaires-mascotte img, main.css), pour ne pas casser l'harmonie visuelle de la colonne. Ombre allegee le 2026-09-06 (retour Marino : le trace affine appelle une ombre plus discrete, moins de flou et moins d'opacite). */ .fp-horloge { position: relative; display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--fp-ink) 14%, transparent)); } .fp-horloge-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; } /* ========================================================================== Décor SVG animé autour du cadran (2026-09-06, demande Marino ; conteneur et bornes corrigés le 2026-09-07, retour Marino : « coupé par un conteneur qui limite la largeur ») ========================================================================== */ /* Calque séparé, SOUS le cadran (z-index 0 contre 1 sur .fp-horloge-svg juste au-dessus) : traits-éclats et petits cercles purement décoratifs (aria-hidden côté PHP). MÊME boîte CSS que le cadran (inset:0, aucun agrandissement) et MÊME viewBox (0 0 400 400) : les deux partagent donc exactement la même échelle, coordonnée pour coordonnée. CORRECTIF 2026-09-07 : la version précédente agrandissait la boîte CSS (inset négatif) tout en gardant les coordonnées DANS le viewBox 0-400, ce qui plaçait certains points si près du bord (0 ou 400) que l'animation les faisait sortir du viewBox et donc COUPER par le viewport du (tout root a overflow:hidden par défaut). Ici, la boîte reste identique au cadran et overflow:visible désactive ce clip : le débordement vient uniquement des coordonnées elles-mêmes, négatives à gauche (voir fp_horaires_horloge()) ou légèrement supérieures à 400 à droite, sans jamais dépendre d'un viewport qui pourrait les rogner en cours d'animation. Aucun risque de défilement horizontal de la page (verrou global overflow-x: clip sur html/body, main.css) : les amplitudes restent petites (quelques dizaines de pixels), et l'anneau extérieur du cadran masque de toute façon la jonction avec le disque. */ .fp-horloge-decor { position: absolute; inset: 0; z-index: 0; display: block; overflow: visible; pointer-events: none; } .fp-horloge-decor-eclat, .fp-horloge-decor-point { transform-box: view-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { /* Traits-éclats et points, gauche et droite : durées 6 à 9s, déphasées par un délai propre à chacun, avec une légère pulsation d'opacité. Discret par construction : le cadran reste la vedette. AMPLITUDES ASYMÉTRIQUES (2026-09-07, retour Marino) : à GAUCHE (et en haut/bas), grande liberté (jusqu'à 22px, rien à proximité) ; à DROITE, amplitude réduite (6px) pour ne JAMAIS approcher la carte des horaires voisine, quelle que soit la largeur de la colonne (accueil ou Informations pratiques, cf. horloge-inverse plus bas). */ .fp-horloge-decor-eclat--1 { animation: fp-horloge-decor-gauche 7s ease-in-out .2s infinite alternate; } .fp-horloge-decor-point--1 { animation: fp-horloge-decor-gauche 8.5s ease-in-out 1.1s infinite alternate; } .fp-horloge-decor-eclat--2 { animation: fp-horloge-decor-gauche 6.4s ease-in-out 2.3s infinite alternate; } .fp-horloge-decor-eclat--3 { animation: fp-horloge-decor-droite 7.6s ease-in-out .6s infinite alternate; } .fp-horloge-decor-point--2 { animation: fp-horloge-decor-droite 9s ease-in-out 1.6s infinite alternate; } .fp-horloge-decor-eclat--4 { animation: fp-horloge-decor-droite 6s ease-in-out 2.8s infinite alternate; } } @keyframes fp-horloge-decor-gauche { 0% { transform: translate(0, 0); opacity: .85; } 100% { transform: translate(-22px, -9px); opacity: .5; } } @keyframes fp-horloge-decor-droite { 0% { transform: translate(0, 0); opacity: .85; } 100% { transform: translate(6px, -5px); opacity: .5; } } /* Sans mouvement réduit : pas d'animation, les tracés gardent l'opacité fixée en attribut SVG (voir fp_horaires_horloge()), jamais de décor figé à mi-transition. Les positions de repos elles-mêmes respectent déjà la borne droite (voir fp_horaires_horloge()) : rien à ajuster ici. */ @media (prefers-reduced-motion: reduce) { .fp-horloge-decor-eclat, .fp-horloge-decor-point { animation: none; } } /* Aiguilles : chacune tourne en continu autour du centre du cadran (200,200 dans le viewBox 0 0 400 400). transform-box: view-box rend transform-origin utilisable en coordonnees du viewBox plutot que de la boite englobante de chaque , indispensable dans un SVG inline. */ .fp-horloge-aiguille { transform-origin: 200px 200px; transform-box: view-box; transform: rotate(var(--fp-a0, 0deg)); } /* Angle de depart de chaque aiguille : pose UNE FOIS par setupHorloge() (assets/js/main.js) sur l'element .fp-horloge, en degres, sous forme de variables --fp-horloge-h/-m/-s heritees par les imbriques. Sans JavaScript, ces variables restent indefinies et les trois aiguilles pointent midi (repli 0deg), jamais un cadran casse. */ .fp-horloge-aiguille--h { --fp-a0: var(--fp-horloge-h, 0deg); } .fp-horloge-aiguille--m { --fp-a0: var(--fp-horloge-m, 0deg); } .fp-horloge-aiguille--s { --fp-a0: var(--fp-horloge-s, 0deg); } /* Balayage continu en CSS pur : chaque aiguille repart de son angle du chargement (--fp-a0) et parcourt un tour complet dans la duree de son unite. Le JavaScript ne repose donc les variables qu'une seule fois, jamais a chaque image : c'est l'animation qui avance seule. */ @keyframes fp-horloge-tour { from { transform: rotate(var(--fp-a0)); } to { transform: rotate(calc(var(--fp-a0) + 360deg)); } } /* L'animation ne demarre qu'une fois l'heure reelle posee par le JavaScript (classe is-en-marche) : avant cela, les aiguilles restent immobiles a midi plutot que de tourner depuis une valeur fausse. */ .fp-horloge.is-en-marche .fp-horloge-aiguille--h { animation: fp-horloge-tour 43200s linear infinite; } .fp-horloge.is-en-marche .fp-horloge-aiguille--m { animation: fp-horloge-tour 3600s linear infinite; } .fp-horloge.is-en-marche .fp-horloge-aiguille--s { animation: fp-horloge-tour 60s linear infinite; } /* Mouvement reduit : plus de balayage continu, setupHorloge() repose alors les variables toutes les 30 secondes (aiguilles qui sautent d'une position a l'autre, jamais de balayage visible). Specificite calquee sur les regles .is-en-marche ci-dessus (trois classes chainees) : une regle de media query n'ajoute aucune specificite propre, il faut donc egaler celle qu'on neutralise pour que l'ordre du fichier (cette regle vient apres) tranche en sa faveur. */ @media (prefers-reduced-motion: reduce) { .fp-horloge.is-en-marche .fp-horloge-aiguille { animation: none; } .fp-horloge-aiguille--h { transform: rotate(var(--fp-horloge-h, 0deg)); } .fp-horloge-aiguille--m { transform: rotate(var(--fp-horloge-m, 0deg)); } .fp-horloge-aiguille--s { transform: rotate(var(--fp-horloge-s, 0deg)); } } /* ========================================================================== Pose dans la colonne des horaires de l'accueil ========================================================================== */ /* La colonne .fp-horaires-aside garde la largeur posee par home.css (37% sur desktop, 254px empilee sous 900px) : rien a repeter ici. Seule sa marge negative (pensee pour laisser deborder la GRANDE image de mascotte en bas de section) doit disparaitre quand elle porte l'horloge, qui ne doit jamais deborder de la section comme la mascotte. Cible le PARENT via :has() sur son enfant .fp-horloge : selecteur SEUL dans sa liste (voir le piege des selecteurs :has groupes, CLAUDE.md section 5f) pour ne jamais invalider une regle de repli si l'on en ajoute une plus tard. Alignement vertical face a la carte : align-self prend le pas sur l'align-items: flex-end du parent .fp-horaires-grid, sans y toucher. */ .page-template-template-home .fp-horaires-aside:has(.fp-horloge) { /* Descendue d'environ 24px (retour Marino, 2026-09-06), puis encore 20px (retour du 2026-09-07 : « presque un peu trop haute »), puis à nouveau le même jour (« idem pour accueil », après la même retouche sur Informations pratiques) : marge haute portée à 100px, et colonne RÉDUITE de 37 % à 31 % ici même (surcharge de home.css, sélecteur :has seul dans sa liste). */ flex: 0 0 31%; max-width: 31%; margin: 100px 0 0; align-self: center; } /* Sous 1024px, l'horloge reste lisible mais compacte et centree dans sa colonne (quelle que soit la largeur de cette derniere a cette taille d'ecran) : pas besoin de :has() ici, .fp-horloge est deja la cible directe. */ @media (max-width: 1024px) { .page-template-template-home .fp-horaires-aside .fp-horloge { max-width: 260px; margin-left: auto; margin-right: auto; } } /* SUR TÉLÉPHONE, L'HORLOGE OUVRE LA SECTION (Marino, 2026-09-10, passe mobile) : home.css la fait passer en tête (order -1) et la centre à 190px. Mais la colonne reste plafonnée à 31 % par la règle :has() plus haut dans CETTE feuille, chargée après home.css : à spécificité égale, c'est elle qui l'emportait et l'horloge restait à 96px. La levée du plafond vit donc ici. Règle SEULE dans sa liste (piège 5f du CLAUDE.md) : un navigateur sans :has() n'appliquait déjà pas le plafond, il n'a rien à lever. */ @media (max-width: 720px) { .page-template-template-home .fp-horaires-aside:has(.fp-horloge) { flex: none; max-width: none; margin-top: 0; } .page-template-template-home .fp-horaires-aside .fp-horloge { max-width: 190px; } } /* ========================================================================== Variante INVERSÉE (page Informations pratiques, section Horaires, demande de Marino du 2026-09-06) ========================================================================== */ /* MÊME COMPOSANT, PALETTE INVERSÉE pour le fond vert (--fp-primary) de cette section (voir .fp-ip-horaires, assets/css/informations.css) : anneau et cadran blancs, aiguilles et logo intérieur vert foncé, trotteuse en teal principal (contraste insuffisant en accent clair, voir plus bas), décor en accent clair et blanc. fp_horaires_horloge() (inc/template-tags.php) n'accepte pas encore de classe supplémentaire : fp_render_informations_horaires() (inc/informations.php) enveloppe donc son appel dans .fp-horloge-inverse, qui sert de scope à toutes les règles ci-dessous. L'horloge de l'accueil n'est jamais visée (aucun sélecteur commun) et reste donc strictement inchangée. Chaque couleur du cadran est posée en attribut de présentation SVG (fill="var(--fp-primary)" etc., voir fp_horaires_horloge()) : une règle d'une feuille externe, même de faible spécificité, l'emporte toujours sur un attribut de présentation, aucun changement de markup n'est donc requis ici. Les éléments concernés n'ayant pour la plupart aucune classe propre (anneau, cadran, pivot, repères d'heures), on les cible par position via :nth-of-type. CIBLAGE FRAGILE, ASSUMÉ (fp_horaires_horloge() appartient à un autre lot, hors périmètre de cette retouche) : il dépend STRICTEMENT de l'ordre d'écriture du dans fp_horaires_horloge() (inc/template-tags.php, corps de la fonction à partir de la ligne 125 au 2026-09-06). Si ce corps est réordonné un jour, ces règles se déplaceraient sur les mauvais éléments sans avertissement. Ordre exact attendu, dans le document : .fp-horloge-svg > circle:nth-of-type(1) = anneau extérieur, r="190" (ligne ~127) .fp-horloge-svg > path:nth-of-type(1) = ombre de l'anneau (arc bas-droite) (ligne ~128) .fp-horloge-svg > path:nth-of-type(2) = reflet de l'anneau (arc haut-gauche) (ligne ~129) .fp-horloge-svg > circle:nth-of-type(2) = cadran, r="168" (ligne ~131) g.fp-horloge-logo (classé, ignoré ici) = logo secondaire, si présent (lignes ~132-136) .fp-horloge-svg > g (sans classe) x12 = repères d'heures (point aux 1/4, trait sinon) (lignes ~143-158) .fp-horloge-aiguille--h / --m / --s (classées) = aiguilles (lignes ~161-170) .fp-horloge-svg > circle:nth-of-type(3) = pivot central, r="9" (ligne ~172) */ .fp-horloge-inverse .fp-horloge-svg > circle:nth-of-type(1) { fill: var(--fp-white); stroke: var(--fp-secondary); } .fp-horloge-inverse .fp-horloge-svg > circle:nth-of-type(2) { fill: var(--fp-cream); stroke: var(--fp-secondary); } .fp-horloge-inverse .fp-horloge-svg > circle:nth-of-type(3) { fill: var(--fp-secondary); stroke: var(--fp-dark); } .fp-horloge-inverse .fp-horloge-svg > path:nth-of-type(1) { stroke: var(--fp-secondary); } .fp-horloge-inverse .fp-horloge-svg > path:nth-of-type(2) { stroke: var(--fp-accent); } /* Repères d'heures (points et traits), aiguilles heure/minute et pivot : vert foncé, lisibles sur le cadran blanc. TROTTEUSE EN TEAL PRINCIPAL, CORRECTION DE RELECTURE (2026-09-06) : l'accent clair (--fp-accent) sur le cadran clair (--fp-cream) ne tenait qu'environ 2,1:1, quasi invisible ; --fp-primary, nettement plus soutenu, tranche correctement sur le cadran. */ .fp-horloge-inverse .fp-horloge-svg g:not(.fp-horloge-logo):not(.fp-horloge-aiguille) circle, .fp-horloge-inverse .fp-horloge-svg g:not(.fp-horloge-logo):not(.fp-horloge-aiguille) line { fill: var(--fp-secondary); stroke: var(--fp-dark); } .fp-horloge-inverse .fp-horloge-aiguille--h line, .fp-horloge-inverse .fp-horloge-aiguille--m line { stroke: var(--fp-secondary); } .fp-horloge-inverse .fp-horloge-aiguille--s line { stroke: var(--fp-primary); } /* Décor animé : éclats en accent clair, points en blanc, lisibles sur le fond vert de la section. */ .fp-horloge-inverse .fp-horloge-decor-eclat { stroke: var(--fp-accent); } .fp-horloge-inverse .fp-horloge-decor-point { fill: var(--fp-white); }