/* ========================================================================== informations.css - page « Informations pratiques » (template-informations.php). Chargée uniquement sur ce modèle (voir fun_planet_enqueue_per_template, functions.php). Couleurs : tokens var(--fp-*) uniquement, aucune valeur en dur (discipline vérifiée par tools/check-zones.mjs). REFONTE DU 2026-08-12, d'après la maquette du client, EN ADAPTATION : on en reprend les idées visuelles, la composition, le placement des images, les textures et les animations. Le thème garde le reste : barre de navigation, pied de page, largeur de contenu (--fp-wrap), boutons (.fp-btn), pilules de sur-titre (.fp-ibox), icônes et jetons de couleur. Aucun vert ni jaune de la maquette n'est repris en dur, jamais d'orange. COMPOSITION DE LA PAGE (rendus : inc/informations.php sauf mention) 1. Coordonnées (fp-blk-informations-hero) - bannière photo (titre de niveau 1, accroche, bouton, mascotte en coin) puis la mosaïque « bento » des coordonnées : adresse, photo, état d'ouverture en direct, téléphone, courriel. 2. Accès (fp-blk-informations-acces) - les trois moyens de venir, un grand panneau chacun. Défilement horizontal ÉPINGLÉ avec JavaScript sur grand écran, panneaux empilés en flux normal partout ailleurs (voir le bloc « ACCÈS » plus bas). 3. Horaires (fp-blk-horaires) - carte claire à deux onglets, alimentée par le module fp-horaires-manager. Renderer REMPLACÉ sur cette page seulement. 4. Questions fréquentes (fp-blk-faq) - composant FAQ PARTAGÉ, non remplacé (voir la note « composant partagé » plus bas). 5. Nous contacter (fp-blk-contact) - formulaire natif, plan et téléphone. Renderer REMPLACÉ sur cette page seulement. 6. Espace presse (fp-blk-informations-medias) - dernier bloc de la page. OÙ VIVENT LES RÈGLES (règle d'architecture du projet : un seul endroit par composant, jamais de sélecteur d'identifiant de page) : - Les COMPOSANTS de cette page portent le préfixe .fp-ip-* et ne servent qu'ici : leurs zones ne sont semées que sur ce modèle. - Les COMPOSANTS PARTAGÉS qui gardent leur habillage dans cette feuille (.fp-acces*, .fp-coord*, .fp-contact*) restent écrits SANS scope de page : leurs zones sont insertables depuis le kit Magic Parc. Ils ne sont plus utilisés par cette page depuis la refonte (à l'exception des champs du formulaire, voir « NOUS CONTACTER »), mais ils habillent toujours des renderers vivants du thème : les supprimer laisserait ces renderers sans aucun style nulle part. - Les AJUSTEMENTS de composants déjà partagés (FAQ, tableau du module d'horaires) sont scopés sur le MODÈLE (.page-template-template-informations) : ils ne valent que pour cette page et ne peuvent en déborder. - Le composant icon-box (sur-titres) n'est JAMAIS redéfini ici : il se règle dans assets/css/main.css, et une retouche là-bas doit se voir sur cette page comme sur les autres. ANIMATION, ET LE CONTRAT QUI VA AVEC. Aucun contenu ne dépend du JavaScript pour être visible : les états masqués de départ vivent SOUS la classe html.fp-ip-anim, posée de façon synchrone dans l'en-tête (fp_informations_anti_flash_marqueur, inc/informations.php) avant la première peinture, et UNIQUEMENT si JavaScript s'exécute et que les animations ne sont pas réduites. Sans elle, ces règles ne s'appliquent à rien. assets/js/informations.js la retire de lui-même si GSAP n'arrive jamais ou si l'animation échoue : rien ne reste caché. La mise en page HORIZONTALE de la section d'accès vit sous la même classe, pour la même raison : elle n'a de sens que si l'épinglage va réellement exister. ========================================================================== */ /* -------------------------------------------------------------------------- LARGEUR DE CONTENU DE CETTE PAGE - un cran plus large que le reste du site. Tout le site lit le meme jeton, --fp-wrap (main.css, :root), qui vaut min(1300px, 90vw). Le client veut ici un peu plus d'air : on remonte le jeton a min(1440px, 92vw). DEUX BORNES, et les deux comptent. 1. La classe de modele que WordPress pose sur le : elle n'existe que sur cette page, aucune autre page du site ne peut donc voir la nouvelle valeur, et il n'y a rien a annuler nulle part. 2. Le conteneur de contenu #fp-content : le jeton ne descend que dans le CONTENU de la page. La barre de navigation et le pied de page, qui sont hors de ce conteneur et qui lisent eux aussi --fp-wrap, gardent la largeur commune a tout le site. Sans cette seconde borne, l'en-tete et le pied de cette page seraient plus larges que sur les autres, ce que personne n'a demande et qui se verrait d'une page a l'autre. C'est aussi la raison pour laquelle on redefinit le JETON plutot que des largeurs une par une : les sections de cette page (horaires, questions frequentes, nous contacter) le lisent deja a travers .fp-wrap, elles suivent donc d'elles-memes et la page garde une seule et meme colonne. Effet mesure sur le haut de page (fenetre de 1920 px) : la marge interne gauche du panneau passe de 350 a 280 px, le bloc « Acces au parc » se decale donc de 70 px vers la gauche. -------------------------------------------------------------------------- */ .page-template-template-informations #fp-content { --fp-wrap: min(1440px, 92vw); } /* -------------------------------------------------------------------------- TEXTURE DE BANDEAU - motif de lignes obliques + halo, dessine entierement en CSS. Aucun fichier image n'est charge : le motif suit la palette (tokens), donc il reste juste si les couleurs changent dans le Customizer. -------------------------------------------------------------------------- */ .fp-acces-texture { background-image: radial-gradient(120% 130% at 8% -10%, color-mix(in srgb, var(--fp-primary) 62%, transparent) 0%, transparent 60%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--fp-accent) 26%, transparent) 0%, transparent 55%), repeating-linear-gradient(115deg, color-mix(in srgb, var(--fp-white) 7%, transparent) 0 2px, transparent 2px 24px); } /* -------------------------------------------------------------------------- BRIQUES COMMUNES DE LA REFONTE (.fp-ip-*) Jetons LOCAUX a la page : ils ne servent qu'a eviter de repeter la meme formule dix fois, et ils sont tous construits sur la palette du theme. Aucune couleur en dur, ici comme ailleurs. -------------------------------------------------------------------------- */ .page-template-template-informations { /* Encre claire des fonds verts. Un gris sur fond coloré est un défaut de lisibilité : on éclaircit vers le blanc en gardant une pointe de teal. Contraste mesuré sur --fp-secondary : environ 10:1. */ --fp-ip-clair: color-mix(in srgb, var(--fp-white) 84%, var(--fp-accent)); /* Surfaces posées SUR un aplat vert (pastilles, cartouches). */ --fp-ip-voile: color-mix(in srgb, var(--fp-white) 12%, transparent); --fp-ip-filet: color-mix(in srgb, var(--fp-white) 24%, transparent); --fp-ip-radius: clamp(20px, 2.4vw, 30px); --fp-ip-gap: clamp(12px, 1.1vw, 16px); /* Rythme vertical d'une section de cette page. */ --fp-ip-y: clamp(64px, 7vw, 104px); /* Motif « Topo » du client EN TRAITS SEULS (assets/img/em-topo-traits.svg). em-topo.svg n'est PAS utilisable tel quel : il porte son propre aplat vert, qui recouvrirait le fond de la section au lieu de s'y poser en filigrane. Même choix que sur la page Restauration. */ --fp-ip-motif: url('../img/em-topo-traits.svg'); } /* LE MOTIF TOPOGRAPHIQUE (fp_informations_topo, inc/informations.php). Deux fusions, comme la maquette : soft-light sur les aplats verts, multiply sur le blanc. UNE SEULE DENSITÉ PAR SECTION : l'échelle est choisie à l'appel, jamais mélangée à l'intérieur d'une même surface. Le calque ne porte aucune information et ne capte aucun clic. Les sections qui le reçoivent posent « isolation: isolate » : sans cela, une fusion peut déborder sur ce qui est peint en dessous. */ .fp-ip-topo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--fp-ip-motif); background-repeat: no-repeat; background-position: center center; } .fp-ip-topo--clair { mix-blend-mode: soft-light; opacity: .45; } .fp-ip-topo--sombre { mix-blend-mode: multiply; opacity: .12; } .fp-ip-topo--sm { background-size: 620px auto; } .fp-ip-topo--md { background-size: 1100px auto; } .fp-ip-topo--lg { background-size: 1600px auto; } /* HÉRO : le topo couvre TOUTE la section et s'adoucit nettement (retour client du 2026-08-12, quatrième passage : « le mettre en cover de toute la section, sinon il reste trop petit, et réduire son opacité de moitié au moins, là c'est trop visible »). Le calque est imprimé à la racine de la section (inc/informations.php), après la photo et le voile : il se fond par-dessus eux, sous le contenu. Opacité .45 -> .2, un peu plus que la moitié demandée (« au moins »). */ .fp-ip-hero > .fp-ip-topo { background-size: cover; opacity: .2; } /* TÊTE DE SECTION : pilule de sur-titre (icon-box du thème, jamais redéfinie ici), titre, accroche. Centrée par défaut, alignée à gauche sur la section d'accès, dont les panneaux commencent au bord gauche. */ .fp-ip-tete { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .fp-ip-tete--centre { align-items: center; text-align: center; margin: 0 auto; } .fp-ip-eyebrow { display: flex; } .fp-ip-tete--centre .fp-ip-eyebrow { justify-content: center; } /* Bebas Neue n'existe qu'en graisse 400 : demander plus fabriquerait un faux gras, banni du projet. Le poids visuel vient de la taille et de l'interlettre. */ .fp-ip-titre-section { font-family: var(--fp-font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .96; font-size: clamp(2rem, 4.4vw, 4rem); margin: 0; } .fp-ip-lead { margin: 0; line-height: 1.62; max-width: 62ch; font-size: clamp(1rem, 1.1vw, 1.08rem); } .fp-ip-tete--centre .fp-ip-lead { margin-inline: auto; } /* PASTILLE D'ÉTAT : LIBELLÉ LONG AU BUREAU, LIBELLÉ COURT AU DOIGT (retour client du 2026-08-18 : sur téléphone, « Fermé actuellement » passe à la ligne dans une case de demi-largeur, la pastille doit dire « Fermé »). PARTAGE DES RÔLES, ET IL NE BOUGE PAS. Le libellé LONG est écrit par le navigateur dans le span data-fp-horaires-status-label (setupHorairesLive, assets/js/main.js), script PARTAGÉ par toutes les pages à horaires : il n'est ni modifié ni dupliqué, et il porte le texte réglable du module fp-horaires-manager. Les deux libellés COURTS sont rendus par le serveur (fp_informations_statut_pastille, inc/informations.php) et masqués ici par défaut ; c'est la classe d'état posée par ce même script (is-open ou is-closed) qui décide lequel s'affiche, et seulement sous 720 px (voir le bloc RESPONSIVE en fin de feuille). Aucun état n'est deviné côté serveur. MASQUAGE DE BASE DÉPLACÉ DANS main.css (relecture du 2026-08-18) : le markup étant partagé avec la page Restauration (fp_render_restauration_horaires), le display: none de base doit vivre dans la feuille commune, sans quoi cette page-là affichait les trois libellés côte à côte. Ici ne restent que les règles de RÉVÉLATION sous 720 px (bloc responsive en fin de feuille). */ /* -------------------------------------------------------------------------- 1. COORDONNÉES (.fp-ip-hero) - zone fp-blk-informations-hero. Une bannière photo pleine largeur, aux deux coins BAS arrondis (la maquette), puis la mosaïque « bento » des coordonnées sur fond clair. La bannière reste collée au haut de la fenêtre : la barre de navigation du site est fixe et FLOTTE par-dessus (main.css, .fp-has-dark-hero .fp-nav), c'est donc la marge interne haute de la bannière qui lui réserve sa place, et son fond sombre garantit la lisibilité de la barre. -------------------------------------------------------------------------- */ .fp-ip-hero { position: relative; isolation: isolate; background: var(--fp-paper); padding-bottom: var(--fp-ip-y); /* Cible d'ancre (id="coordonnees") : réserve la hauteur de la barre de navigation flottante, sans quoi un saut vers cette section atterrit sous elle. Même valeur que le reste du site (restauration.css, evenements.css). */ scroll-margin-top: calc(var(--fp-nav-h) + 16px); } /* FOND DE TOUTE LA PREMIÈRE SECTION (retour client, 2026-08-12, second passage : « je souhaiterais pouvoir définir une image en fond pour la première section, donc le héro »). C'est la MÊME image que fp-zone-bg posait déjà sur la seule bannière (fp_render_informations_hero, inc/informations.php) : elle est simplement épinglée un cran plus haut, sur .fp-ip-hero, pour couvrir la bannière ET la mosaïque en dessous. Aucun nouveau bloc Gutenberg, la cliente change une seule image. */ .fp-ip-hero-photo, .fp-ip-hero-voile { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .fp-ip-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Voile de lisibilité : dégradé dans le vert très foncé du thème, dense du côté du texte (bannière, en haut) et transparent de l'autre (la diagonale de la maquette). Le calque couvre maintenant toute la section, mosaïque comprise, mais l'angle reste quasi HORIZONTAL (100deg, une dizaine de degrés sous « à droite ») : dans une section bien plus large que haute, l'ajout de hauteur (la mosaïque) déplace donc très peu les paliers, mesurés à l'origine sur la seule bannière. LES PALIERS SONT MESURÉS SUR LE PIRE CAS, une photo entièrement BLANCHE, parce que c'est la cliente qui choisit la photo et que rien ne garantit qu'elle sera sombre : à 94 % le texte blanc de la bannière tient 15:1, à 72 % (là où se termine sa colonne de texte, environ 60 % de la largeur) il tient encore 6:1. Le dernier palier, remonté de 30 % à 42 %, ne porte jamais de texte (mascotte, puis mosaïque aux tuiles opaques) : la marge supplémentaire compense la marge de manœuvre en moins sur la hauteur totale. */ .fp-ip-hero-voile { background: linear-gradient(100deg, color-mix(in srgb, var(--fp-dark) 94%, transparent) 0%, color-mix(in srgb, var(--fp-dark) 72%, transparent) 60%, color-mix(in srgb, var(--fp-dark) 42%, transparent) 100%); } .fp-ip-banniere { position: relative; isolation: isolate; overflow: hidden; background: var(--fp-secondary); color: var(--fp-white); border-radius: 0 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); min-height: min(76vh, 700px); display: flex; align-items: flex-end; padding-top: calc(var(--fp-nav-h) + clamp(36px, 5vw, 84px)); padding-bottom: clamp(34px, 4.4vw, 68px); } /* Avec une image de fond posée au niveau de la section (.fp-ip-hero.has-photo), la bannière laisse voir cette image au lieu de son propre aplat : le voile de section (ci-dessus) assure alors la lisibilité du titre, exactement comme le faisait l'ancien voile local à la bannière. */ .fp-ip-hero.has-photo .fp-ip-banniere { background: transparent; } /* BLOC DE TEXTE CENTRÉ (retrait de la mascotte, 2026-09-03, demande du client) : sur-titre, titre, accroche et bouton sont désormais alignés au centre, à toutes les largeurs. La mascotte qui occupait le coin droit de la bannière (en position absolue, donc hors du flux) est retirée du rendu (inc/informations.php) : ce centrage n'a plus à composer avec elle. */ .fp-ip-banniere-corps { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 1.6vw, 20px); width: 100%; } .fp-ip-titre { font-family: var(--fp-font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: 0; /* Interlignage resserré pour accompagner l'agrandissement ci-dessous, une ligne trop aérée paraissant flottante à cette taille. */ line-height: .85; /* Répartition équilibrée des mots sur plusieurs lignes (retour Marino, 2026-09-06) plutôt qu'une dernière ligne orpheline d'un seul mot. */ text-wrap: balance; /* AGRANDI D'ENVIRON 30 % (retour Marino, 2026-09-06 : le titre doit nettement dominer le paragraphe en dessous). Les trois bornes du clamp précédent (2,5rem / 4,6vw / 4,2rem) sont multipliées à l'identique, la coupure de ligne restant juste puisque max-width est exprimé en ch, dans la même unité que le texte : elle grandit au même rythme que les lettres. Vérifié sans débordement à 390px (le terme bas du clamp, fixe, y gouverne toujours seul, comme avant l'agrandissement). */ font-size: clamp(3.25rem, 6vw, 5.46rem); margin: 0; max-width: 14ch; } .fp-ip-hero-lead { margin: 0; /* Élargi d'environ 54 à 62ch (retour Marino, 2026-09-06) pour qu'un mot ne parte plus seul à la ligne sur les largeurs d'ordinateur courantes. Aucun texte modifié : seule la largeur de la colonne change. */ max-width: 62ch; line-height: 1.6; font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--fp-ip-clair); } .fp-ip-hero-actions { margin-top: 4px; } /* Mascotte de la bannière RETIRÉE DU RENDU (2026-09-03, demande du client) : inc/informations.php n'imprime plus .fp-ip-banniere-mascotte, plus aucune image ni image d'attente à cet emplacement. Règles de mise en page de ce décor supprimées ici (et dans la requête média 720px plus bas) : le bloc de texte ci-dessus occupe seul la bannière, centré. */ /* LA MOSAÏQUE. Douze colonnes, comme la maquette : adresse (7) et photo (5) en haut sur deux rangées, puis état (3), téléphone (5) et courriel (4). Une tuile dont la donnée n'est pas renseignée dans les Coordonnées n'est PAS rendue : la mosaïque se resserre d'elle-même, elle n'affiche jamais de case vide. */ .fp-ip-bento { /* QUATRE CASES SUR UNE SEULE RANGÉE, toutes à la même largeur (retour client du 2026-08-12, cinquième passage : « remplace le bento par juste les quatre cases, l'une à côté de l'autre, toutes la même largeur, on verra mieux l'image de fond »). Flex plutôt que grille : si une tuile manque (téléphone ou courriel non renseignés dans les Coordonnées), les autres s'élargissent d'elles-mêmes, sans les règles :has() de l'ancien bento. La hauteur minimale du second passage (168px) est conservée, portée par les tuiles, contenu toujours ancré bas-gauche. */ display: flex; align-items: stretch; gap: var(--fp-ip-gap); margin-top: clamp(28px, 3.4vw, 48px); /* Profondeur du suivi de la souris (assets/js/informations.js) : sans elle, une rotation sur X ou Y n'a aucun effet visible, le navigateur la rendant à plat. Aucune incidence quand le script ne tourne pas. */ perspective: 1000px; } .fp-ip-tuile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: clamp(20px, 2vw, 30px); border-radius: var(--fp-ip-radius); background: var(--fp-cream); color: var(--fp-ink); border: 1px solid var(--fp-line); text-decoration: none; /* AUCUNE transition sur transform : le suivi de la souris et l'assemblage de la mosaïque pilotent cette propriété image par image (GSAP), une transition CSS viendrait lutter contre eux. */ transition: background-color .3s ease, border-color .3s ease; } a.fp-ip-tuile:hover { background: color-mix(in srgb, var(--fp-accent) 16%, var(--fp-cream)); border-color: var(--fp-primary); } a.fp-ip-tuile:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 3px; } .fp-ip-tuile-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-primary); } .fp-ip-tuile-ic { display: inline-flex; } .fp-ip-tuile-ic svg { width: 16px; height: 16px; } .fp-ip-tuile-corps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .fp-ip-tuile-valeur, .fp-ip-tuile-adresse { font-family: var(--fp-font-heading); font-weight: 400; line-height: .96; letter-spacing: .01em; overflow-wrap: anywhere; } .fp-ip-tuile-valeur { font-size: clamp(1.5rem, 2.2vw, 2.1rem); } /* Alignée sur la taille des autres valeurs depuis que la tuile d'adresse a la même largeur que ses voisines (rangée à quatre cases égales). */ .fp-ip-tuile-adresse { font-size: clamp(1.5rem, 2.2vw, 2.1rem); } .fp-ip-tuile-precision { font-size: .95rem; line-height: 1.5; color: var(--fp-ink-soft); } .fp-ip-tuile-fleche { position: absolute; right: clamp(18px, 2vw, 28px); bottom: clamp(18px, 2vw, 28px); z-index: 1; display: inline-flex; color: var(--fp-primary); transition: transform .3s ease; } a.fp-ip-tuile:hover .fp-ip-tuile-fleche { transform: translate(3px, -3px); } /* Grande tuile d'adresse : le vert très foncé du thème et le motif en filigrane, comme la maquette. Encre claire, contraste supérieur à 15:1. */ .fp-ip-tuile--adresse { background: var(--fp-dark); color: var(--fp-white); border-color: var(--fp-dark); } .fp-ip-tuile--adresse .fp-ip-tuile-label { color: var(--fp-accent); } .fp-ip-tuile--adresse .fp-ip-tuile-precision { color: var(--fp-ip-clair); } a.fp-ip-tuile--adresse:hover { background: var(--fp-secondary); border-color: var(--fp-secondary); } /* La flèche partagée (.fp-ip-tuile-fleche, définie plus haut) est colorée var(--fp-primary) par défaut : trop sombre sur le fond var(--fp-dark) de cette tuile, on reprend donc l'accent déjà utilisé pour son libellé. */ .fp-ip-tuile--adresse .fp-ip-tuile-fleche { color: var(--fp-accent); } /* TUILE « ITINÉRAIRE » (retour de Marino, 09.09.2026) : la grande tuile d'adresse ne signalait jusque-là pas qu'elle est cliquable. Trois calques décoratifs, aria-hidden, aucune information n'y est portée : - un fond « plan du parc » très discret, le fichier utilisé partout ailleurs sur le site pour la même idée de trajet (assets/img/em-plan.svg, traits clairs sur aplat), à la place du motif topo partagé (posé sur les autres tuiles) : les deux textures superposées auraient chargé une case qui doit rester sobre ; - un petit repère de localisation en médaillon, distinct du petit icône typographique du libellé « Adresse » ; - un texte d'incitation (.fp-ip-tuile-itineraire-hint, sous l'adresse) et la flèche partagée ci-dessus (.fp-ip-tuile-fleche), pour que la case se lise enfin comme cliquable, comme ses voisines téléphone et courriel. */ .fp-ip-tuile-itineraire-motif { position: absolute; inset: -10%; z-index: 0; background-image: url('../img/em-plan.svg'); background-size: min(900px, 220%); background-position: center 55%; background-repeat: no-repeat; opacity: .16; pointer-events: none; } .fp-ip-tuile-itineraire-pin { position: absolute; top: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fp-ip-voile); color: var(--fp-accent); pointer-events: none; } .fp-ip-tuile-itineraire-pin svg { width: 17px; height: 17px; } .fp-ip-tuile-itineraire-hint { display: inline-flex; align-items: center; font-size: .85rem; font-weight: 600; color: var(--fp-accent); /* Réserve la place de la flèche (.fp-ip-tuile-fleche, absolue en bas à droite) : sur une tuile étroite (mosaïque à deux colonnes, mobile), cette dernière ligne du contenu partagerait sinon la même hauteur qu'elle. */ padding-right: clamp(28px, 6vw, 40px); } /* La tuile photo a été retirée de la mosaïque (retour client du 2026-08-12, cinquième passage) : le fond de section porte seul l'image, voir fp_render_informations_hero. */ /* Tuile d'état : le teal du parc. La pastille en direct (composant partagé .fp-horaires-status, main.css) reste MASQUÉE tant que le navigateur n'a pas tranché, pour ne jamais afficher un état faux dans une page mise en cache : le lien vers le tableau des horaires, lui, est toujours là. */ .fp-ip-tuile--statut { background: var(--fp-primary); color: var(--fp-white); border-color: var(--fp-primary); } .fp-ip-tuile--statut .fp-ip-tuile-label { color: var(--fp-white); } .fp-ip-tuile-lien { font-weight: 600; color: var(--fp-white); text-decoration: underline; text-underline-offset: 3px; } /* Largeurs égales : chaque tuile de la rangée prend le même flex, la hauteur minimale du second passage est portée ici depuis le retrait de la grille. */ .fp-ip-bento > .fp-ip-tuile { flex: 1 1 0; min-width: 0; min-height: 168px; } .fp-ip-tuile--mail .fp-ip-tuile-valeur { font-size: clamp(1.2rem, 1.8vw, 1.7rem); } /* -------------------------------------------------------------------------- 2. ACCÈS (.fp-ip-acces) - zone fp-blk-informations-acces. DEUX MISES EN PAGE POUR UN SEUL MARKUP, et c'est le point délicat de cette page. PAR DÉFAUT (donc : sans JavaScript, sous « animations réduites », si GSAP n'arrive jamais, ou sous 1024 px), les panneaux se SUIVENT VERTICALEMENT, en alternant le côté de la photo. C'est une mise en page complète, lisible et défilable normalement : rien n'est caché, rien n'attend un script. SOUS html.fp-ip-anim ET AU-DESSUS DE 1024 px seulement, la section prend la hauteur de la fenêtre et la piste passe en ligne : assets/js/informations.js épingle alors la section et fait défiler la piste horizontalement au fil du défilement vertical (mécanique de la maquette). La classe est posée avant la première peinture et RETIRÉE par le script s'il ne peut pas tenir sa promesse : on ne se retrouve donc jamais avec une piste horizontale que rien ne fait avancer. -------------------------------------------------------------------------- */ .fp-ip-acces { position: relative; isolation: isolate; background: var(--fp-secondary); color: var(--fp-white); padding: var(--fp-ip-y) 0; overflow: hidden; /* Cible d'ancre (id="acces") : même garde que .fp-ip-hero ci-dessus. */ scroll-margin-top: calc(var(--fp-nav-h) + 16px); } /* Motif topographique FORCÉ EN COVER (retour client, 2026-08-12, second passage : « il faut le forcer en cover, il doit prendre toute la section », même leçon que sur la page Restauration). Une taille fixe (--fp-ip-topo--md) laissait le motif plus étroit que la section une fois épinglée en pleine hauteur de fenêtre ; cover le fait toujours couvrir tout le cadre. */ .fp-ip-acces .fp-ip-topo { background-size: cover; } .fp-ip-acces .fp-ip-lead { color: var(--fp-ip-clair); } .fp-ip-acces-cadre { position: relative; z-index: 1; margin-top: clamp(30px, 3.6vw, 52px); } .fp-ip-acces-piste { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 80px); max-width: var(--fp-wrap); margin: 0 auto; padding: 0 var(--fp-gutter); } .fp-ip-panneau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(24px, 3vw, 44px); align-items: center; } /* En flux normal, une photo sur deux passe à gauche : le regard descend en zigzag au lieu de longer une colonne. En piste horizontale, cette alternance n'a plus de sens (on lit de gauche à droite), elle est donc annulée. */ .fp-ip-panneau:nth-child(even) .fp-ip-panneau-photo { order: -1; } .fp-ip-panneau-txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .fp-ip-panneau-rang { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--fp-accent); } .fp-ip-panneau-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fp-ip-voile); border: 1px solid var(--fp-ip-filet); color: var(--fp-white); } .fp-ip-panneau-ic svg { width: 22px; height: 22px; } .fp-ip-panneau-filet { flex: 1 1 auto; height: 1px; background: var(--fp-ip-filet); } .fp-ip-panneau-num { flex: 0 0 auto; font-family: var(--fp-font-heading); font-size: 1rem; letter-spacing: .12em; color: var(--fp-ip-clair); } .fp-ip-panneau-titre { font-family: var(--fp-font-heading); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .92; font-size: clamp(1.9rem, 4vw, 3.6rem); margin: 0; } .fp-ip-panneau-desc { margin: 0; line-height: 1.64; max-width: 56ch; color: var(--fp-ip-clair); } .fp-ip-panneau-photo { position: relative; overflow: hidden; border-radius: var(--fp-ip-radius); aspect-ratio: 4 / 3; background: var(--fp-ip-voile); } .fp-ip-panneau-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Panneau dont la photo n'a pas encore été déposée : un filigrane de plan dessiné en CSS, jamais une image cassée ni un trou. */ .fp-ip-panneau-photo.is-vide { background-image: repeating-linear-gradient(90deg, var(--fp-ip-filet) 0 1px, transparent 1px 38px), repeating-linear-gradient(0deg, var(--fp-ip-filet) 0 1px, transparent 1px 38px); } /* Repères de progression : ils ne disent quelque chose QUE pendant le défilement épinglé. En flux normal, ils n'auraient rien à indiquer. */ .fp-ip-acces-reperes { display: none; gap: 10px; margin: clamp(22px, 2.6vw, 34px) auto 0; max-width: var(--fp-wrap); padding: 0 var(--fp-gutter); } .fp-ip-acces-repere { width: 34px; height: 3px; border-radius: var(--fp-pill); background: var(--fp-ip-filet); transition: background-color .3s ease; } .fp-ip-acces-repere.is-actif { background: var(--fp-accent); } /* LES FLÈCHES DE PILOTAGE N'EXISTENT QUE DANS LE SLIDER ÉPINGLÉ AU DOIGT (rendues par inc/informations.php, révélées par le bloc « LES DEUX FLÈCHES DE PILOTAGE » plus bas). Masquées ICI par défaut, donc partout ailleurs sans exception : sur ordinateur, dans le repli vertical, sous « animations réduites » et sans JavaScript. Elles commanderaient sinon un défilement horizontal qui n'a pas lieu. */ .fp-ip-fleche { display: none; } @media (min-width: 1024px) { html.fp-ip-anim .fp-ip-acces { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } /* DÉFAUT MESURÉ AU BANC : dès que la section passe en conteneur flex, ses enfants deviennent des ÉLÉMENTS FLEX, et les marges latérales « auto » de .fp-wrap l'emportent alors sur l'étirement (règle du modèle flexible : une marge automatique consomme l'espace libre AVANT l'alignement). La colonne se rétrécissait donc sur son contenu, et la tête de section se retrouvait centrée au lieu d'être alignée sur le reste de la page (mesure : 730 px de large au lieu de 1325). On redonne explicitement toute la largeur aux trois enfants directs. */ html.fp-ip-anim .fp-ip-acces > .fp-wrap, html.fp-ip-anim .fp-ip-acces > .fp-ip-acces-cadre, html.fp-ip-anim .fp-ip-acces > .fp-ip-acces-reperes { width: 100%; } html.fp-ip-anim .fp-ip-acces-cadre { overflow: hidden; } html.fp-ip-anim .fp-ip-acces-piste { flex-direction: row; align-items: center; gap: clamp(28px, 3vw, 48px); max-width: none; margin: 0; /* Bord gauche du premier panneau ALIGNÉ SUR LA LARGEUR DU TITRE au-dessus (retour client, 2026-08-12, second passage) : même calcul de bordure que .fp-wrap (main.css), pas un simple --fp-gutter qui collait le panneau au bord de la fenêtre au lieu du bord de la colonne de contenu. La partie droite, elle, continue de déborder hors cadre : c'est ce que le défilement horizontal révèle. */ padding-left: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter)); /* Respiration en fin de course (retour client du 2026-08-13 : « le scroll ne doit pas s'arrêter net à la fin de l'image ») : même bordure calculée qu'à gauche, le dernier panneau (À vélo ou à pied) finit donc aligné sur la colonne de contenu, avec l'espace pour être vu. La distance du pin suit automatiquement (piste.scrollWidth, assets/js/informations.js, invalidateOnRefresh). */ padding-right: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter)); will-change: transform; } html.fp-ip-anim .fp-ip-panneau { flex: 0 0 auto; width: min(1080px, 84vw); } html.fp-ip-anim .fp-ip-panneau:nth-child(even) .fp-ip-panneau-photo { order: 0; } html.fp-ip-anim .fp-ip-acces-reperes { display: flex; } } /* -------------------------------------------------------------------------- LA MÊME PISTE HORIZONTALE, SUR TÉLÉPHONE ET TABLETTE (demande client du 2026-08-14 : le slider latéral, « c'est vraiment sympa », il doit exister aussi au doigt). DEUX CLASSES SONT EXIGÉES, PAS UNE SEULE. html.fp-ip-anim dit que la page anime ; html.fp-ip-pin-mobile n'est posée par assets/js/informations.js QUE lorsque l'épinglage mobile a réellement été créé, et le script la retire dès qu'il ne l'est plus (rotation en paysage, filet de secours). Il la pose d'abord, MESURE la section ainsi compactée, et l'enlève aussitôt si elle ne tient pas dans l'écran : ce bloc est donc à la fois la mise en page et le banc de mesure qui décide de son propre emploi. Sans ce second verrou, un téléphone en paysage, un texte allongé par la cliente ou un GSAP qui n'arrive jamais afficheraient une piste en ligne que rien ne ferait avancer : les panneaux 2 et 3 hors écran, sans aucun moyen d'y accéder. Sous « animations réduites », aucune des deux classes n'existe et rien de ce bloc ne s'applique : les panneaux se suivent verticalement, comme aujourd'hui. LE MARKUP NE BOUGE PAS D'UNE LIGNE (arbitrage client) : le titre de section reste dans l'épinglage et donc visible pendant tout le défilement, exactement comme au bureau. C'est TOUT LE RESTE qui se compacte pour tenir dans 100svh, faute de quoi l'épinglage couperait le bas de la section. PANNEAU EMPILÉ ET PLEINE COLONNE (retour client du 2026-08-17) : « icône, titre, texte, image empilés, chaque panneau en pleine largeur alignée sur le titre Trois façons de nous rejoindre ». La photo étroite posée à côté du texte (première version de ce slider au doigt) est donc abandonnée : on reprend la structure du repli vertical, que le client apprécie, et on la fait défiler horizontalement. Deux conséquences mesurables : - la largeur d'un panneau part de la colonne de contenu, var(--fp-wrap) moins ses deux gouttières (moins le débord --fp-ip-peek depuis le 2026-08-18), et la piste reçoit la même bordure de départ que .fp-wrap : le premier panneau démarre au pixel sous le titre de section, plus 15 px trop à gauche comme avec l'ancien padding-inline: var(--fp-gutter) ; - la course du pin tombe juste. La piste mesure bordure + 3 panneaux + 2 écarts + bordure, le cadre fait 100vw, donc la distance parcourue vaut 2 x (panneau + écart) : les trois panneaux se calent aux progressions 0, 0,5 et 1, là où les trois repères basculent. DEUXIÈME REVUE MOBILE (retour client du 2026-08-18) : « la section en plein écran, le titre plus grand, l'iconbox et le texte un peu plus grands, plus de padding, tout doit respirer, plus d'espace entre la fin du texte et le début du slider, le slider prend plus de place, le titre du panneau plus grand, et plus d'espace entre les cartes, elles sont trop collées ». Trois mécaniques répondent à tout cela SANS jamais faire échouer le budget. 1. LES TAILLES SE MESURENT EN HAUTEUR D'ÉCRAN (svh), PAS SEULEMENT EN LARGEUR. Une valeur en vw grandit sur un téléphone LARGE, or ce qui manque ou non ici, c'est de la HAUTEUR. Chaque poste de dépense (titres, accroche, écarts, photo) s'écrit donc « clamp(valeur d'aujourd'hui, N svh, plafond) » : sur un écran court (375 x 667, 553 px utiles) le plancher gouverne et la mise en page reste celle du 2026-08-17, à quelques pixels près ; sur un téléphone récent (393 x 852, environ 745 px utiles) tout grandit d'un tiers sans jamais dépasser. L'unité svh est STATIQUE (elle décrit la fenêtre barre d'adresse VISIBLE) : elle ne varie pas pendant le défilement, la mesure de sectionTient reste déterministe, et aucune media query de hauteur n'est introduite (interdit maison, voir assets/js/informations.js). Chaque déclaration en svh est doublée de la version d'origine juste au-dessus : sur un navigateur sans svh, la seconde est invalide, ignorée, et la première tient toujours. 2. LE CADRE DU SLIDER PREND TOUTE LA PLACE QUI RESTE (flex: 1 0 auto) : la tête de section se cale en haut, les repères en bas, et les panneaux remplissent l'écran entre les deux. C'est cela, « la section en plein écran » : plus de bande morte au-dessus et en dessous d'un bloc centré. La croissance ne coûte RIEN au budget : elle ne consomme que de l'espace libre, et sectionTient mesure la section min-height neutralisée, donc au repos, où aucun étirement n'a lieu. 3. LES CARTES SONT PLUS ÉTROITES QUE LA COLONNE (--fp-ip-peek) et l'écart entre elles s'élargit : la carte suivante déborde franchement dans l'écran au lieu d'affleurer le bord (« trop collées »). Effet de bord heureux et mesuré : la course du pin place alors le panneau 2 CENTRÉ dans la fenêtre à mi-parcours et le panneau 3 aligné à droite en fin de course, les trois repères basculant toujours aux mêmes progressions. TROISIÈME REVUE MOBILE (retour client du 2026-08-20) : bande blanche vue PENDANT L'APPROCHE et non plus seulement une fois épinglé, repères à remonter au ras du bas réel de l'écran, contenu du panneau trop serré sous la tête de section, titre de section qui passe sous la barre de navigation, cartes encore trop larges, et pas assez d'espace après la dernière carte. Chaque point est traité à sa règle, commentée sur place ; deux d'entre eux changent le BUDGET et méritent d'être lus ensemble : a. LA HAUTEUR DE LA BARRE DE NAVIGATION EST DÉSORMAIS RÉSERVÉE EN HAUT (--fp-nav-h-stuck, environ 70 px), ce qui est un coût fixe considérable sur un écran court. b. LA PHOTO DEVIENT LE SEUL POSTE ÉLASTIQUE : rangée 1fr entre un plancher (13svh) et un plafond (26svh) au lieu d'une hauteur fixe. Le budget se calcule donc AU PLANCHER, ce que mesure exactement sectionTient, et la photo rend d'elle-même la place que le nouveau coût fixe demande. C'est ce qui permet d'ajouter (a) sans perdre l'épinglage sur les petits téléphones : c'est la photo qui paie, pas le slider entier. BUDGET DE HAUTEUR AU PLANCHER, panneau le plus haut (« En transports publics », description la plus longue du semis, 160 signes). Colonne de contenu = min(1440px, 92vw) moins 2 x 20 px de gouttière mobile, moins la largeur de débord --fp-ip-peek. 360 x 640 (fenêtre utile 560 px, colonne 291 px, carte 255 px) : marge haute 72 + 16 = 88, marge basse 8, sur-titre 24, écarts 13,4, titre 21,5, accroche 3 lignes 68,4, cadre 24,6, panneau 263 (pastille 30, écarts 16,8, titre 19,9, description 5 lignes 110,3, écart 13,4, photo au plancher 13svh = 72,8), repères 13,1 = environ 524 px. Marge : 36 px, et la photo affichée occupe en réalité une centaine de pixels. 375 x 667 (553 px utiles, colonne 305 px, carte 268 px) : environ 523 px au plancher. Marge : 30 px, photo affichée environ 102 px. 393 x 852 (745 px utiles, colonne 322 px, carte 283 px) : titre sur deux lignes, accroche 17,3 px, titre de panneau 26,8 px, environ 650 px au plancher. Marge : 95 px, entièrement rendue à la photo, qui s'affiche alors à environ 190 px, tout près de son plafond de 26svh. Le pire cas d'une accroche allongée par la cliente coûte une vingtaine de pixels par ligne. Au-delà de la marge, la MESURE RÉELLE (assets/js/informations.js, sectionTient) refuse l'épinglage et la page reprend son empilement vertical : jamais de contenu coupé. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces { /* Rythme vertical resserré POUR CETTE SEULE SECTION : le jeton est redéfini sur elle, jamais sur la page, les autres sections gardent leur respiration. 64 px en haut et 64 px en bas mangeaient à eux seuls près du quart de l'écran utile, et le panneau empilé du 2026-08-17 demande une trentaine de pixels de plus que la version photo à côté du texte : ils sont repris ici. JAMAIS DE svh DANS UN JETON, et c'est un piège corrigé le 2026-08-20 : un jeton personnalisé n'est PAS validé à la déclaration, il est remplacé tel quel à la lecture. Une seconde déclaration en svh écrase donc la première même sur un navigateur qui ne connaît pas l'unité, et c'est la PROPRIÉTÉ qui la lit (ici padding) qui devient invalide à l'exécution, sans repli possible : le rythme de la section tombait alors à zéro. L'air proportionnel à la hauteur d'écran est rendu là où il est sans danger, sur des propriétés réelles doublées (marge du cadre, marge basse ci-dessous), où une déclaration invalide laisse simplement la précédente s'appliquer. */ --fp-ip-y: clamp(16px, 4.5vw, 26px); /* DÉBORD LATÉRAL DES CARTES : de combien chaque panneau est plus étroit que la colonne de contenu, donc de combien la carte suivante entre dans l'écran (retour client du 2026-08-18 : « les cartes sont trop collées », puis 2026-08-20 : « encore un peu moins large, sinon c'est vraiment border »). Écrit une seule fois ici, lu par la largeur du panneau aux deux paliers de gouttière (voir plus bas). */ --fp-ip-peek: clamp(30px, 10vw, 64px); /* ESPACE DE FIN DE COURSE (retour client du 2026-08-20 : « on triche un petit peu pour avoir un peu plus d'espace à droite de la dernière colonne », puis le soir même : « encore un peu d'espace à droite qui vienne pousser le slider pour qu'on ait le temps de lire avant que ça défile plus bas »). Une DEMI-LARGEUR D'ÉCRAN, donc proportionnelle à l'appareil et non plus une valeur fixe, plafonnée pour qu'une tablette n'hérite pas d'un désert. Porté par une boîte réelle, voir la règle de la piste plus bas. */ --fp-ip-fin: min(50vw, 320px); /* MARGE INTERNE DROITE DE CHAQUE PANNEAU (méthode dictée par le client le 2026-08-20 : « dans la colonne en voiture, on met du padding à droite, effet d'espace, le design respire »). Les POSITIONS ne bougent pas : la carte suivante démarre exactement où elle démarrait, c'est le contenu de la carte courante qui s'arrête plus tôt. */ --fp-ip-pad-droite: clamp(20px, 7vw, 52px); /* LA BOÎTE COUVRE LA GRANDE HAUTEUR DE FENÊTRE (lvh), pas la petite (svh). C'est le correctif STRUCTUREL de la bande blanche (retour client du 2026-08-20 au soir : elle réapparaissait pendant l'approche, sur l'appareil réel). lvh décrit la fenêtre BARRE D'OUTILS REPLIÉE, c'est à dire la plus grande qu'un navigateur mobile puisse présenter. La section, et donc la hauteur que ScrollTrigger fige en l'épinglant, couvre par construction n'importe quel état de la barre : il ne peut plus rester de bande sous elle, ni à l'approche, ni pendant l'épinglage, quelle qu'en soit la cause. Et lvh est une unité STATIQUE, contrairement à dvh : rien ne bouge quand la barre se replie, aucune remise en page, aucun saut de défilement. CE QUI EST LISIBLE, EN REVANCHE, RESTE LE PETIT VIEWPORT : la marge basse ci-dessous rend à la section la différence entre les deux, si bien que tout le contenu tient dans la partie visible barre DÉPLOYÉE. La zone rendue est du vert nu, exactement celle que la barre découvre en se repliant. */ min-height: 100vh; min-height: 100lvh; display: flex; flex-direction: column; /* CONTENU ANCRÉ EN HAUT, jamais centré : un contenu centré qui déborde déborde des DEUX côtés, et le haut de la section passerait alors sous la barre de navigation quoi qu'on réserve. Avec le cadre qui absorbe l'espace libre (plus bas), l'ancrage en haut donne exactement la même image quand tout tient, et la seule image sûre quand tout ne tient pas. */ justify-content: flex-start; /* LA BARRE DE NAVIGATION FLOTTE PAR-DESSUS LA SECTION ÉPINGLÉE (retour client du 2026-08-20 : « Trois façons de nous rejoindre passe en partie sous la barre », toujours vrai après la réserve par jeton du matin). La section est fixée à top: 0, ses premiers pixels sont donc exactement sous la barre. LA HAUTEUR N'EST PLUS DEVINÉE : assets/js/informations.js MESURE la barre réelle (.fp-nav, getBoundingClientRect) au moment de créer l'épinglage et à chaque recalcul, garde la plus grande valeur vue, et la pose ici en --fp-ip-nav. Plus aucune dépendance à un jeton dont la résolution peut différer d'un appareil ou d'une disposition d'en-tête à l'autre. Le jeton ne sert plus que de repli avant la première mesure. La marge de confort ajoutée par-dessus est exprimée en hauteur d'écran : quelques pixels là où la place manque, davantage là où elle abonde. */ padding-top: calc(var(--fp-ip-nav, var(--fp-nav-h-stuck, 72px)) + 12px); padding-top: calc(var(--fp-ip-nav, var(--fp-nav-h-stuck, 72px)) + clamp(10px, 2.2svh, 24px)); /* LA MARGE BASSE REND LA DIFFÉRENCE ENTRE LES DEUX FENÊTRES : le contenu est ainsi confiné dans la partie VISIBLE barre déployée, et la zone rendue reste un aplat vert que la barre découvre en se repliant. Les deux unités sont statiques : cette marge ne varie jamais en cours de défilement. Repli sans unités de fenêtre : une simple marge basse, la section revenant alors au comportement d'avant. */ padding-bottom: 10px; padding-bottom: calc(100lvh - 100svh + clamp(8px, 1.4svh, 16px)); overflow: hidden; } /* BANDE BLANCHE SOUS LA SECTION (retour client du 2026-08-18, puis 2026-08-20 : « elle ne se remplit en vert qu'à l'instant où la section s'épingle, je la vois blanche pendant toute l'approche »). CAUSE, ET ELLE N'EST PAS DANS LA COURSE DU PIN. Pour épingler, ScrollTrigger enveloppe la section dans un ESPACEUR qui réserve, en plus de la hauteur de la section, toute la distance du défilement horizontal. Cet espaceur n'a aucun fond : partout où on le voit, on voit le fond de page nu, blanc. On le voit dans deux situations, et c'est la même bande : - PENDANT L'APPROCHE, dès que le bas de la section (100svh, c'est à dire la fenêtre barre d'outils VISIBLE) remonte au-dessus du bas réel de l'écran, ce qui arrive dès que Safari replie sa barre en descendant ; - PENDANT L'ÉPINGLAGE, sous la section fixée, pour la même raison. CORRECTIF DE PEINTURE, JAMAIS DE GÉOMÉTRIE : on donne son fond à l'espaceur. Il couvre EXACTEMENT la place réservée au parcours épinglé, ni plus ni moins, donc le remplissage est là dès le premier pixel de l'approche et il ne peut, par construction, jamais déborder sur la section suivante (contrairement à une ombre portée, essayée le 2026-08-18 et abandonnée ici pour cette raison). Aucune hauteur, aucune unité, aucune borne du pin ne change, et surtout pas de dvh sur la géométrie : la mise en page sauterait à chaque repli de barre. LA CLASSE EST POSÉE PAR assets/js/informations.js, qui reconnaît l'espaceur au fait que la section a changé de parent à la création du pin : aucun nom de classe de GSAP n'est supposé ici. Si l'espaceur n'était pas reconnu, la règle ne s'appliquerait à rien et on retomberait simplement sur le comportement d'avant, sans rien casser. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-espaceur { background: var(--fp-secondary); } /* Même défaut du modèle flexible qu'au bureau (voir le bloc ci-dessus) : dès que la section devient un conteneur flex, les marges latérales « auto » de .fp-wrap l'emportent sur l'étirement et la colonne se rétrécit sur son contenu. On redonne la largeur aux trois enfants directs. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces > .fp-wrap, html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces > .fp-ip-acces-cadre, html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces > .fp-ip-acces-reperes { width: 100%; } /* TÊTE DE SECTION : COMPACTE SUR UN ÉCRAN COURT, AMPLE SUR UN ÉCRAN HAUT. Elle reste dans l'épinglage, elle doit donc coûter le moins possible là où la place manque ; partout ailleurs, la seconde déclaration de chaque propriété la laisse grandir avec la hauteur d'écran (retour client du 2026-08-18 : « titre plus grand, iconbox et texte un peu plus grands »). Aucun texte n'est masqué ni tronqué, à aucune taille. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ip-tete { gap: 6px; gap: clamp(6px, 1.2svh, 12px); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ibox { padding: 2px 11px 2px 2px; } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ibox-ic { width: 20px; height: 20px; width: clamp(20px, 3.4svh, 26px); height: clamp(20px, 3.4svh, 26px); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ibox-ic svg { width: 12px; height: 12px; width: clamp(12px, 2svh, 15px); height: clamp(12px, 2svh, 15px); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ibox-title { font-size: .9rem; font-size: clamp(.9rem, 2.2svh, 1.05rem); } /* Le plancher de 1,4 rem est celui du 2026-08-17 et il n'est PAS remonté : à 360 px de large, c'est exactement la taille qui garde « Trois façons de nous rejoindre » sur une seule ligne. Au-dessus, c'est la hauteur d'écran qui commande, et un titre sur deux lignes sur un téléphone récent tient très largement dans la marge (voir le budget ci-dessus). */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ip-titre-section { font-size: clamp(1.4rem, 5.2vw, 1.85rem); font-size: clamp(1.4rem, 3.9svh, 2.5rem); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces .fp-ip-lead { font-size: .92rem; line-height: 1.45; font-size: clamp(.95rem, 2.5svh, 1.08rem); line-height: 1.5; } /* PLUS D'AIR ENTRE LA FIN DU TEXTE ET LE DÉBUT DU SLIDER (demande du 2026-08-18, reprise et accentuée le 2026-08-20 : « le bloc du panneau est trop serré contre la tête de section, tire l'ensemble un peu plus bas »), et LE CADRE PREND TOUTE LA PLACE QUI RESTE : c'est lui qui absorbe l'espace libre de l'écran, la tête de section restant en haut et les repères en bas. flex-shrink à 0 : le cadre est en overflow: hidden, il ne doit jamais pouvoir être comprimé et rogner un panneau. Il n'y a de toute façon aucune pression de compression (la section n'a qu'une hauteur MINIMALE), c'est une ceinture de sécurité. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-cadre { margin-top: clamp(8px, 2.6vw, 14px); /* RESPIRATION APRÈS L'ACCROCHE (« ...depuis tout le Chablais »), demandée une nouvelle fois le 2026-08-20 au soir. Exprimée en hauteur d'écran, comme tout ce qui est réglable ici : l'air suit la place disponible au lieu d'être le même sur un petit et un grand téléphone. Le coût est repris par la photo, seul poste élastique. */ margin-top: clamp(26px, 5.6svh, 60px); overflow: hidden; flex: 1 0 auto; /* LE CADRE DEVIENT LUI-MÊME UN CONTENEUR FLEXIBLE, et ce n'est pas un détail : sans cela la piste garde la hauteur de son contenu au lieu de suivre le cadre étiré, les cartes restent collées sous la tête de section et tout le bas de l'écran reste vide (mesuré au banc le 2026-08-20, c'est le défaut que le client décrit). Un enfant flexible s'étire, lui, sans avoir besoin que le parent ait une hauteur « définie », ce qu'un pourcentage exigeait et n'obtenait pas d'un élément dimensionné par flex-grow. */ display: flex; } /* LA PISTE PASSE EN LIGNE, comme au bureau. Le débordement à droite est exactement ce que le défilement horizontal révèle. BORDURE DE DÉPART CALCULÉE COMME .fp-wrap (correctif du 2026-08-17) : le jeton --fp-wrap vaut min(1440px, 92vw) sur cette page, la colonne de contenu n'occupe donc PAS toute la largeur de la fenêtre et un simple padding-inline: var(--fp-gutter) laissait le premier panneau démarrer environ 15 px à gauche du titre de section. Même formule qu'au bureau des deux côtés : le dernier panneau finit lui aussi aligné sur la colonne. align-items: stretch, et non plus « center » : les panneaux d'un slider doivent présenter leur pastille et leur titre TOUJOURS À LA MÊME HAUTEUR, sinon le contenu monte et descend à chaque geste. Le panneau, lui, répartit son surplus entre son texte et sa photo (align-content plus bas). LA PISTE S'ÉTIRE DANS LE CADRE (révision du 2026-08-20) : elle est désormais elle-même un élément flexible du cadre, donc elle en prend toute la hauteur, et les cartes avec elle. C'est ce qui descend la photo jusqu'au bas de l'écran au lieu de laisser les cartes serrées sous la tête de section avec du vide dessous. En LARGEUR, elle se laisse ramener à la largeur du cadre (flex: 1 1 auto plus min-width: 0), son contenu débordant comme avant : c'est ce débordement que le défilement horizontal révèle, et c'est lui que mesure la course du pin. Pendant la mesure de sectionTient, le cadre vaut la hauteur de son contenu, la piste s'y étire donc à l'identique : la mesure lit bien la hauteur naturelle. ÉCART ENTRE LES CARTES ÉLARGI (retour client du 2026-08-18) : combiné à la largeur de carte réduite juste en dessous, il rend visible la respiration entre la carte active et la suivante. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-piste { flex-direction: row; align-items: stretch; flex: 1 1 auto; min-width: 0; gap: clamp(16px, 5vw, 28px); max-width: none; margin: 0; padding-inline: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter)); will-change: transform; } /* PANNEAU EMPILÉ (demande client du 2026-08-17) : pastille, titre, texte, puis photo, exactement la structure du repli vertical. Une seule colonne de grille suffit à l'obtenir, le markup ne bouge pas (le bloc texte est écrit avant la photo dans inc/informations.php). LE PANNEAU DEVIENT UNE COLONNE FLEXIBLE (révision du 2026-08-20), texte en haut, photo en bas (justify-content: space-between, exactement la lecture du repli vertical). C'est le passage en colonne FLEXIBLE qui permet à la photo de se dimensionner en POURCENTAGE DE LA HAUTEUR DU PANNEAU (voir sa règle plus bas) : en grille, un pourcentage se serait résolu sur la rangée et non sur la carte, et les trois photos auraient eu des hauteurs différentes selon la longueur de leur texte. align-items: stretch est OBLIGATOIRE ici : la règle générale de ce panneau (mise en page de bureau) pose align-items: center, ce qui, en colonne flexible, centrerait les blocs sur la LARGEUR au lieu de les étirer. LARGEUR : LA COLONNE DE CONTENU MOINS LE DÉBORD (--fp-ip-peek, retours des 2026-08-18 et 2026-08-20). Le premier panneau reste calé au pixel sous le titre de section (c'est la bordure de la piste qui le pose, elle ne bouge pas), et c'est à DROITE que la place se libère : on voit l'écart, puis une cinquantaine de pixels de la carte suivante. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau { flex: 0 0 auto; width: calc(var(--fp-wrap) - 2 * var(--fp-gutter) - var(--fp-ip-peek)); /* LE CONTENU S'ARRÊTE AVANT LE BORD DROIT DE LA CARTE (méthode dictée par le client, voir --fp-ip-pad-droite plus haut) : la largeur de la carte et donc la position de la suivante ne bougent pas d'un pixel, c'est le texte et la photo qui rentrent. La largeur reste calculée sur la colonne de contenu, la marge interne est prise DEDANS (box-sizing: border-box, posé pour tout le site dans main.css). */ padding-right: var(--fp-ip-pad-droite); display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: clamp(10px, 2.8vw, 14px); gap: clamp(12px, 2.4svh, 22px); } /* Le bloc de texte ne se comprime jamais : s'il manque de la place, c'est la photo qui la rend (voir sa règle plus bas), jamais une ligne de texte qui se tasse. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-txt { flex: 0 0 auto; } /* ESPACE APRÈS LE DERNIER PANNEAU (retour client du 2026-08-20 : aujourd'hui il faut être au pixel près pour lire « À vélo ou à pied », le défilement vertical reprend aussitôt). C'EST UNE BOÎTE, PAS UNE MARGE, et ce détail décide de tout : la course du pin vaut piste.scrollWidth moins la largeur du cadre (assets/js/informations.js), et la zone de débordement d'un conteneur flexible ne compte NI sa marge interne de fin, NI la marge du dernier élément (mesuré au banc sur Chromium le 2026-08-20 : ni l'une ni l'autre n'allongeait la course d'un pixel). Un élément flexible vide, lui, occupe une vraie place : la course s'allonge de sa largeur PLUS l'écart de la piste, l'épinglage dure d'autant plus longtemps, et la dernière carte finit à cette distance du bord droit au lieu d'y coller. Rien de tout cela ne touche à la HAUTEUR : la garde sectionTient est insensible à ce réglage. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-piste::after { content: ""; flex: 0 0 var(--fp-ip-fin); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau:nth-child(even) .fp-ip-panneau-photo { order: 0; } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-txt { gap: 7px; gap: clamp(8px, 1.5svh, 13px); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-rang { gap: 10px; } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-ic { width: 30px; height: 30px; width: clamp(30px, 4.4svh, 40px); height: clamp(30px, 4.4svh, 40px); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-ic svg { width: 16px; height: 16px; width: clamp(16px, 2.4svh, 21px); height: clamp(16px, 2.4svh, 21px); } /* Titre du panneau : plancher inchangé (écrans courts), et il grandit avec la hauteur d'écran (retour client du 2026-08-18 : « le titre du panneau en cours plus grand »). Le plafond reste sous celui du titre de SECTION, qui doit continuer de dominer la page. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-titre { font-size: clamp(1.35rem, 4.8vw, 1.7rem); font-size: clamp(1.35rem, 3.6svh, 2.2rem); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-desc { font-size: .92rem; line-height: 1.45; font-size: clamp(.92rem, 2.4svh, 1.04rem); line-height: 1.5; } /* LA PHOTO EST LE SEUL POSTE ÉLASTIQUE (révision du 2026-08-20, qui remplace la hauteur fixe de 25svh du 2026-08-18). ELLE VAUT UN TIERS DE LA HAUTEUR DE SA CARTE, entre un plancher et un plafond exprimés en hauteur d'écran. Un pourcentage de base flexible se résout sur la hauteur de la CARTE, et les trois cartes ont exactement la même hauteur (align-items: stretch sur la piste) : les trois photos sont donc identiques, quelle que soit la longueur du texte au-dessus. C'est précisément ce qu'une rangée de grille ne savait pas faire. Trois conséquences, et c'est tout l'intérêt : - la MESURE de sectionTient (assets/js/informations.js) se fait hors étirement, donc sur une carte de hauteur indéfinie : le pourcentage y retombe sur le contenu, c'est à dire sur le PLANCHER. Elle lit donc le pire cas, jamais la taille affichée, et un écran court garde l'épinglage avec une photo réduite au lieu de perdre le slider ; - un écran haut donne mécaniquement une photo plus grande, puisque la carte y est plus haute : le slider « prend plus de place » sans qu'on ait à l'écrire nulle part ; - c'est la photo, et jamais le texte, qui rend la place quand un coût fixe s'ajoute (hauteur de la barre de navigation réservée en haut, air supplémentaire sous la tête de section) : flex-shrink à 1 sur elle, à 0 sur le texte, plancher en garde-fou. LE CONTENU DE LA PHOTO EST SORTI DU FLUX (position: absolute) : sans cela, l'image chargée imposerait sa propre hauteur intrinsèque au moment de la mesure, et le budget lu serait celui d'une photo bien plus haute que le plancher. La boîte, elle, garde son overflow: hidden et son object-fit. Sans l'unité svh, les secondes déclarations sont ignorées et le plancher et le plafond en pixels s'appliquent seuls. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-photo { aspect-ratio: auto; flex: 0 1 34%; min-height: 96px; min-height: 13svh; max-height: 300px; max-height: 26svh; } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau-photo img { position: absolute; inset: 0; } /* REPÈRES AU RAS DU BAS RÉEL DE L'ÉCRAN (retour client du 2026-08-20 : « pratiquement au fond de l'écran, barre Safari déployée ou repliée »). Ils restent dans le flux (leur place est réservée, la mesure de sectionTient les compte, rien ne saute à l'épinglage) et c'est un simple décalage de position relative qui les fait suivre le bas RÉEL : la section réserve 100svh, c'est à dire la fenêtre barre d'outils VISIBLE, alors que le bas réel de l'écran est à 100dvh. La différence vaut zéro barre déployée, et la hauteur de la barre une fois repliée : les repères descendent donc exactement de ce qu'il faut, en continu. dvh N'EST EMPLOYÉE QUE POUR CES COMMANDES DE BAS D'ÉCRAN (les repères et les deux flèches), et c'est voulu : elle ne pilote ici aucune GÉOMÉTRIE (un décalage de position relative ne remet en page ni le voisin ni le parent, il ne fait que repeindre), donc la mise en page ne peut pas sauter au repli de la barre, et aucune remesure de ScrollTrigger n'est déclenchée. Le décalage reste DANS la boîte de la section, qui couvre désormais la grande hauteur de fenêtre : rien ne dépasse, l'overflow reste coupé. Sans les unités svh/dvh, la déclaration est invalide et les repères restent simplement au bas du contenu, comme avant. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-reperes { display: flex; justify-content: center; margin-top: clamp(8px, 2.2vw, 12px); margin-top: clamp(10px, 1.8svh, 16px); padding-inline: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter)); position: relative; top: 0; top: calc(100dvh - 100svh); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-repere { width: 28px; } /* LES DEUX FLÈCHES DE PILOTAGE (retour de l'utilisatrice du 2026-08-20 : le défilement latéral commandé par le défilement vertical « ne paraissait pas logique »). Elles n'apparaissent QU'ICI, sous les deux classes de l'épinglage mobile : ailleurs, elles piloteraient un défilement qui n'a pas lieu (voir leur règle de masquage par défaut, plus haut dans cette feuille). PLACÉES SUR LA MÊME LIGNE QUE LES REPÈRES, aux deux bords de la colonne de contenu : jamais par-dessus le texte d'un panneau, et au pouce sans que la main couvre la carte. Elles suivent le bas RÉEL de l'écran par la même mécanique que les repères, écrite ici depuis le bas : le bord bas de la fenêtre est à 100dvh, la boîte descend jusqu'à 100lvh, la différence est donc exactement ce qu'il faut remonter. Les deux commandes restent ainsi alignées quel que soit l'état de la barre du navigateur. CIBLE TACTILE DE 44 px (WCAG 2.5.5) portée par la boîte elle-même. Contraste du pictogramme blanc sur le voile clair posé sur le vert de section : le voile est le même jeton que les pastilles de la page (--fp-ip-voile), déjà employé sur ce fond. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche { display: inline-flex; align-items: center; justify-content: center; position: absolute; z-index: 2; bottom: 10px; bottom: calc(100lvh - 100dvh + 10px); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--fp-ip-filet); background: var(--fp-ip-voile); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--fp-white); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, opacity .25s ease; } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche svg { width: 20px; height: 20px; } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche--prec { left: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter)); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche--suiv { right: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter)); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche:hover { background: var(--fp-ip-filet); border-color: var(--fp-accent); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche:focus-visible { outline: 2px solid var(--fp-white); outline-offset: 3px; } /* Extrémité atteinte : la flèche reste en place, atteignable au clavier et annoncée comme désactivée (aria-disabled, posé par assets/js/informations.js), simplement estompée. Elle ne DISPARAÎT pas : une commande qui s'efface à chaque bout fait sauter la mise en page et sort du parcours de tabulation. */ html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche[aria-disabled="true"] { opacity: .38; cursor: default; } } /* Sous 720 px, la colonne de contenu passe à la gouttière mobile : les flèches suivent, comme la piste et les repères. */ @media (max-width: 720px) { html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche--prec { left: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter-mobile)); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-fleche--suiv { right: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter-mobile)); } } /* Sous 720 px, .fp-wrap passe à --fp-gutter-mobile (main.css) : la piste, les repères ET la largeur d'un panneau suivent, sans quoi le premier panneau ne serait plus aligné sur le titre de section. Le débord --fp-ip-peek est retranché ici aussi : c'est la même carte, seule la gouttière change. */ @media (max-width: 720px) { html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-piste, html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-acces-reperes { padding-inline: calc((100vw - var(--fp-wrap)) / 2 + var(--fp-gutter-mobile)); } html.fp-ip-anim.fp-ip-pin-mobile .fp-ip-panneau { width: calc(var(--fp-wrap) - 2 * var(--fp-gutter-mobile) - var(--fp-ip-peek)); } } /* -------------------------------------------------------------------------- 3. HORAIRES (.fp-ip-horaires) - zone fp-blk-horaires, renderer remplacé sur cette page (fp_render_informations_horaires, inc/informations.php). REFONTE DU 2026-08-24. La carte propre à cette page (deux positions « Horaires standards » et « Vacances et jours fériés », lignes à filet animé) a été remplacée par LE MODULE D'HORAIRES PARTAGÉ, celui de l'accueil : retour client, « vraiment le même ». Tout son habillage vit donc dans le bloc de composant « MODULE D'HORAIRES PARTAGÉ » de main.css (scope .fp-horaires-module) et cette feuille ne garde que la POSE, ci-dessous. RÈGLES DEVENUES ORPHELINES, ET LEUR SORT (leur markup n'existe plus) : - .fp-ip-horaires-carte et ses enfants directs : retirées. Leur seule intention encore valable, l'élévation de la carte (« tu vas garder cet effet avec un peu d'ombre sur la zone avec les horaires », client du 2026-08-12), est reprise ci-dessous sur la carte du module. - .fp-ip-tabs et .fp-ip-tab* (bascule à deux positions, recette du widget d'activité) : retirées. La barre du module est celle du composant, sur les deux pages : lui refaire un habillage ici recréerait exactement l'écart que le client vient de faire supprimer. - .fp-ip-h-liste, .fp-ip-h-ligne et ses variantes, .fp-ip-h-filet, .fp-ip-h-vide, .fp-ip-h-note : retirées avec les lignes qu'elles habillaient. Le filet animé au défilement disparaît avec elles ; son pilote (assets/js/informations.js) garde sa garde « carte et filets présents » et ne fait donc simplement plus rien de ce côté. - Bloc mobile de la carte (720 px) : retiré, point par point. 1. « la bascule prend la ligne, la pastille passe dessous et se centre » : sans objet, le composant empile déjà barre puis carte, et sa pastille est centrée à toutes les largeurs. 2. « la pastille dit Fermé, pas Fermé actuellement » : cette bascule de libellé vit dans le bloc RESPONSIVE en fin de feuille et concerne la TUILE de la mosaïque du haut de page, qui rend bien les deux libellés courts (fp_informations_statut_pastille). Elle y a été restreinte à la tuile : la pastille du module, elle, n'a pas de libellé court, et la règle non restreinte lui aurait vidé son texte sous 720 px. 3. « une puce verte remplace le mot Aujourd'hui » : NON reportée. Elle corrigeait un défaut propre à l'ancienne ligne (le mot poussait les jours à deux plages sur deux lignes) ; le composant résout la même gêne autrement, en passant jour et heures sur deux lignes sous 480 px. La reporter ferait diverger les deux pages pour rien. 4. « les heures perdent leur gras » : sans objet, le composant les rend déjà en graisse 500 face à un jour en 700. CONTRASTES : blanc sur --fp-primary 4,85:1, --fp-cream sur --fp-primary 4,78:1, encre du thème sur la carte claire du composant 16,9:1. -------------------------------------------------------------------------- */ .fp-ip-horaires { position: relative; isolation: isolate; background: var(--fp-primary); color: var(--fp-white); padding: var(--fp-ip-y) 0; overflow: hidden; /* Cible d'ancre (id="horaires", visée entre autres par le lien « Offres du moment » et la tuile « En ce moment » de la mosaïque) : même garde que les autres sections de la page. */ scroll-margin-top: calc(var(--fp-nav-h) + 16px); } .fp-ip-horaires .fp-ip-lead { color: var(--fp-cream); } /* MOTIF ANIMÉ EN FOND (demande de Marino, 09.09.2026) : le plan du parc (assets/img/em-plan.svg), MÊME RECETTE que .fp-footer::before (main.css, 2026-09-06/07) : pseudo-élément couvrant en inset négatif (le zoom fixe et le va-et-vient ne doivent jamais découvrir un bord, la section est déjà en overflow: hidden ci-dessus), transform SEUL (jamais background-position, coûteux en repaint), tourne AUSSI sur mobile (aucune media-query de largeur), coupé sous prefers-reduced-motion. Opacité basse et calque posé en z-index 0, sous le contenu (.fp-ip-horaires > .fp-wrap passe en z-index 1 plus bas) : le tableau des horaires reste pleinement lisible. */ .fp-ip-horaires-motif { position: absolute; inset: -14%; z-index: 0; background: url('../img/em-plan.svg') center center / cover no-repeat; opacity: .16; pointer-events: none; transform: scale(1.12); } @media (prefers-reduced-motion: no-preference) { .fp-ip-horaires-motif { animation: fp-ip-horaires-motif-derive 26s ease-in-out infinite alternate; will-change: transform; } } @keyframes fp-ip-horaires-motif-derive { from { transform: scale(1.12) translateX(-3%); } to { transform: scale(1.12) translateX(3%); } } @media (prefers-reduced-motion: reduce) { .fp-ip-horaires-motif { animation: none; will-change: auto; } } .fp-ip-horaires > .fp-wrap { position: relative; z-index: 1; } /* MISE EN PAGE RECALÉE SUR L'ACCUEIL (retour de Marino, 2026-09-07, sur le site en ligne : « j'aime tout sauf la mise en page de cette section »). .fp-ip-horaires-grille reprend EXACTEMENT les proportions de .fp-horaires-grid / .fp-horaires-aside / .fp-horaires-main de l'accueil (home.css : flex 0 0 37% / 1 1 56%, même gap), SEUL align-items change : centré sur la hauteur du bloc tête + module plutôt qu'en fin de ligne, l'horloge n'ayant pas besoin de déborder comme la mascotte de l'accueil. Cette grille ne rend que si le module a quelque chose à montrer (fp_render_informations_horaires, inc/informations.php) ; sans module, la page retombe sur l'ancienne mise en page à une seule colonne, tête centrée sur toute la section (voir .fp-ip-horaires-repli plus bas), INCHANGÉE. */ .fp-ip-horaires-grille { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vw, 40px); /* PAS de margin-top ici (retiré le 09.09.2026, retour de Marino : « trop d'espace en haut »). La grille est le premier enfant de .fp-wrap, donc de la section : le padding-top DE LA SECTION (var(--fp-ip-y), symétrique à son padding-bottom) suffit déjà à réserver l'espace au-dessus de la tête. Un margin-top ici s'AJOUTAIT à ce padding et déséquilibrait la section, contrairement à .fp-horaires-grid de l'accueil (home.css), qui n'en pose aucun. */ } /* ORDRE DE L'ACCUEIL REPRODUIT SOUS 1024PX : dans le DOM, l'horloge précède la colonne tête + module (comme .fp-horaires-aside précède .fp-horaires-main à l'accueil), mais visuellement le CONTENU vient D'ABORD, l'horloge APRÈS, réduite et centrée (même bascule par `order`, home.css, .fp-horaires-main order:0 / .fp-horaires-aside order:1 sous 900px). Sélecteurs PRÉFIXÉS par .fp-ip-horaires-grille (relecture Opus, 2026-09-07) : .fp-ip-horaires-main et .fp-horloge-inverse sont des noms assez génériques pour mériter d'être scopés à leur grille, même si aucune collision n'existe à ce jour ailleurs sur le site. */ .fp-ip-horaires-grille .fp-ip-horaires-main { order: 0; width: 100%; } .fp-ip-horaires-grille .fp-horloge-inverse { order: 1; width: min(220px, 56vw); margin: 0 auto; } /* Tête de section : redevient un enfant de la colonne du module (plus de la section entière), elle se centre donc sur CETTE colonne (max-width 720px, margin auto déjà posés par .fp-ip-tete/.fp-ip-tete--centre, inchangés). Le module garde le même espace au-dessus qu'avant (ancien margin-top de .fp-ip-horaires-corps, reporté ici). */ .fp-ip-horaires-main .fp-horaires-module--informations { margin-top: clamp(26px, 3vw, 44px); } @media (min-width: 1024px) { .fp-ip-horaires-grille { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 32px); } /* Colonne de l'horloge NETTEMENT PLUS GRANDE, alignée sur la proportion de la colonne mascotte de l'accueil (37%, home.css .fp-horaires-aside) : l'horloge, width: 100% en interne (horloge.css), remplit toute cette colonne. */ /* Plus petite (37 % -> 31 %) et descendue (marge haute) pour se trouver en face du tableau plutôt que du titre (Marino, 2026-09-07, deux retours). */ .fp-ip-horaires-grille .fp-horloge-inverse { order: 0; flex: 0 0 31%; max-width: 31%; width: auto; margin: clamp(140px, 15vw, 260px) 0 0; } /* Colonne tête + module, même proportion que .fp-horaires-main de l'accueil (56%) : largeur en POURCENTAGE du flex-basis, donc DÉTERMINISTE, jamais calculée sur le contenu de la carte (une carte avec ou sans p.fp-horaires-note donne la même largeur à une taille d'écran donnée). */ .fp-ip-horaires-grille .fp-ip-horaires-main { order: 1; flex: 1 1 56%; min-width: 0; width: auto; } } /* POSE DU MODULE SUR CETTE PAGE : il remplit toute la largeur de sa colonne (déterminée par .fp-ip-horaires-main ci-dessus), le composant fait le reste. */ .fp-horaires-module--informations { position: relative; z-index: 1; width: 100%; } /* ÉLÉVATION CONSERVÉE, demande explicite du client (2026-08-12) : « tu vas garder cet effet avec un peu d'ombre sur la zone avec les horaires, comme ça ça reste un petit peu surélevé du reste ». La carte du composant porte une ombre discrète, calibrée pour un fond blanc ; sur cet aplat teal, on reprend l'ombre portée du thème, plus marquée, sans rien changer d'autre. */ .fp-horaires-module--informations .fp-horaires-card { box-shadow: var(--fp-shadow-lg); } /* Repli sans module : mise en page historique à une seule colonne, tête déjà centrée sur toute la section par fp_informations_tete() (INCHANGÉE), cette règle ne fait que reporter l'espace qui vivait avant sur .fp-ip-horaires-corps. */ .fp-ip-horaires-repli { color: var(--fp-ink); margin-top: clamp(26px, 3vw, 44px); } /* GROUPES DE VACANCES PAR CAMPAGNE (Marino, 2026-09-10 : « affiche aussi le nom, avec un slider en 2 par 2 pour une période prolongée »). Même bloc que home.css (dupliqué à dessein) : main.css, qui porte normalement tout l'habillage du module d'horaires partagé, est hors périmètre de ce chantier, un autre agent y travaille. Annule la ligne générique .fp-horaires-prochain-liste li (main.css, display: flex, pensée pour une simple ligne jour + heures) pour l'enveloppe de groupe, qui empile à la place en-tête, dates et navigation. Spécificité volontairement large (3 classes + 1 élément) pour battre à coup sûr cette règle du composant, peu importe l'ordre de chargement des feuilles. */ .page-template-template-informations .fp-horaires-prochain-liste li.fp-horaires-prochain-groupe { display: block; padding: 4px 0; } /* NOËL S'AFFICHAIT MALGRÉ LE PLAFOND (Marino, 10.09.2026). La règle juste au-dessus pose display: block avec trois classes et un élément : elle battait l'attribut hidden que traiterFuturs() pose sur les groupes au-delà du plafond, et le troisième groupe restait visible. Même poids, déclaré après, l'attribut reprend la main. */ .page-template-template-informations .fp-horaires-prochain-liste li.fp-horaires-prochain-groupe[hidden] { display: none; } /* UNE SEULE PÉRIODE À VENIR : pas de deuxième colonne vide à côté. Le script écrit le nombre de groupes gardés dans data-fp-visibles ; à un, la grille repasse en une colonne et le groupe se centre. */ .page-template-template-informations .fp-horaires-prochain-liste[data-fp-visibles="1"] { grid-template-columns: minmax(0, 1fr); } /* DEUX GROUPES CÔTE À CÔTE (Marino, 10.09.2026 : « affiche deux l'un à côté de l'autre et affiche max 2 »). La liste devient une grille à deux colonnes dès qu'il y a la place : le Lundi du Jeûne fédéral à gauche, les Vacances d'automne et leur défilement à droite, Noël attendra son tour (le plafond de deux périodes est posé côté PHP par fp_horaires_futurs_attrs( 2 ) et appliqué par traiterFuturs()). Le séparateur passe d'un filet horizontal entre lignes à un filet vertical entre colonnes. Sous 640 px, on retombe sur l'empilement et le filet horizontal, il n'y a pas la place pour deux. */ .page-template-template-informations .fp-horaires-prochain-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 0; } /* Un display explicite battrait l'attribut hidden que traiterFuturs() pose sur la liste quand plus rien ne vient : on le remet a plat. */ .page-template-template-informations .fp-horaires-prochain-liste[hidden] { display: none; } .page-template-template-informations .fp-horaires-prochain-groupe:not([hidden]) ~ .fp-horaires-prochain-groupe:not([hidden]) { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--fp-ink) 16%, transparent); } @media (min-width: 640px) { .page-template-template-informations .fp-horaires-prochain-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; } .page-template-template-informations .fp-horaires-prochain-groupe:not([hidden]) ~ .fp-horaires-prochain-groupe:not([hidden]) { padding-top: 0; padding-left: 18px; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--fp-ink) 16%, transparent); } } /* JOURS EN GRAISSE NORMALE ET TÊTE RESSERRÉE (Marino, 10.09.2026 : « que les jours ne soient plus en gras si le titre l'est, et moins d'espace entre un titre et ses jours liés »). Le nom de la campagne porte déjà le gras : deux niveaux en gras se disputaient l'oeil. Les dates redescendent à la graisse courante, et l'air entre la tête du groupe et sa première date se réduit. */ .page-template-template-informations .fp-horaires-prochain-groupe-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 3px 8px; margin: 0 0 1px; } .page-template-template-informations .fp-horaires-prochain-groupe .fp-horaires-prochain-jour { font-weight: 400; } .page-template-template-informations .fp-horaires-prochain-groupe-nom { font-weight: 700; color: var(--fp-ink); } .page-template-template-informations .fp-horaires-prochain-groupe-periode { opacity: .8; } .page-template-template-informations .fp-horaires-prochain-groupe-dates { list-style: none; margin: 0; padding: 0; } .page-template-template-informations .fp-horaires-prochain-groupe-dates li { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 1px 0; } .page-template-template-informations .fp-horaires-prochain-groupe-dates li[hidden] { display: none; } /* Navigation deux par deux : masquée par défaut (posée hidden côté PHP), révélée par traiterFuturs() (assets/js/main.js) seulement si le groupe a plus de deux dates à venir. De vrais