/* ═══════════════════════════════════════════════════════════════════════════ LE PARCOURS : une scene 3D en bandeau COLLANT, des cartes qui defilent dessus. La scene n'est pas posee en fond de toute la page : elle vit dans sa propre section. Le reste de la page d'accueil continue donc de se comporter normalement, et on ne paie du WebGL que pendant qu'on le regarde. Les couleurs viennent des jetons du site (--ink, --gold, --indigo...), jamais de valeurs ecrites ici : la scene doit suivre la page, pas l'inverse. ═══════════════════════════════════════════════════════════════════════════ */ .parcours { position: relative; } /* ‼️ LA SCENE EST `fixed`, PAS `sticky` - ET C'EST MESURE, PAS UN GOUT. En `sticky`, la scene se dimensionne en unites de fenetre, et AUCUNE ne convient : - en `svh` (barre d'adresse deployee), une bande de 82 px restait NON COUVERTE en bas des que la barre se retractait, et l'on voyait le fond de la page au travers ; - en `lvh`, la bande disparait, mais les blocs d'etape deviennent plus COURTS que la fenetre, donc la carte, calee en bas de son bloc, derive n'importe ou dans l'ecran et finit par passer DEVANT les appareils. Les deux defauts ont ete vus sur iPhone 15 Pro sous iOS 17.5, le 03/10. `position: fixed` supprime la question : la scene occupe toujours exactement la fenetre, quelle que soit la barre. Elle n'est allumee que pendant que la section est en vue Son opacite est pilotee par scene-calendars.js (`opacifier()`), au fil du defilement : elle suit la part de la section REELLEMENT visible, sinon elle se verrait derriere le reste de la page. Elle part donc a 0 ici, et c'est le JS qui l'allume - une page sans JS n'affiche aucune scene, ce qui est exactement ce qu'on veut. */ .parcours-scene { position: fixed; inset: 0; /* ‼️ EN DESSOUS DU CONTENU, PAS AU-DESSUS. La scene est `fixed` et vient APRES l'en-tete dans le document : a z-index 0 elle peint par-dessus lui, meme sans le bloquer au toucher - et sur `aide.html` elle recouvrait le champ de recherche de la FAQ, qui vit dans l'en-tete. Le site emploie deja ce procede pour son fond fixe (`.aurora`, z-index -2) : la scene se range juste au-dessus. */ z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; background: linear-gradient(180deg, var(--cream-deep, #eef1f7) 0%, var(--bg, #eaeef5) 100%); } /* Les decors ne prennent aucun geste : la page doit defiler au doigt POSE DESSUS. */ #scene3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* La gare, en sourdine : des piliers de quai, une verriere et deux lampes. Tout est tres pale a dessein - elle doit se deviner, jamais se regarder. */ .gare { position: absolute; inset: 0; pointer-events: none; } .gare::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 30% at 20% 44%, rgba(192, 145, 47, 0.20), transparent 70%), radial-gradient(38% 26% at 80% 38%, rgba(192, 145, 47, 0.14), transparent 72%), radial-gradient(92% 60% at 50% 104%, rgba(91, 108, 255, 0.16), transparent 70%); opacity: 0.62; } .gare::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(15, 29, 52, 0.055) 0 2px, transparent 2px 148px), repeating-linear-gradient(90deg, transparent 0 72px, rgba(15, 29, 52, 0.032) 72px 73px); -webkit-mask-image: linear-gradient(180deg, #000 0 42%, transparent 72%); mask-image: linear-gradient(180deg, #000 0 42%, transparent 72%); opacity: 0.7; } /* La ligne du quai, et le rail qui file. */ .quai { position: absolute; left: 0; right: 0; top: 62%; pointer-events: none; border-top: 1px solid rgba(15, 29, 52, 0.10); } .quai::after { content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 1px; background: rgba(15, 29, 52, 0.07); } /* La scene etant `fixed`, elle est hors du flux : les etapes n'ont plus a etre remontees par un retrait negatif. C'est une complication de moins. */ .parcours-etapes { position: relative; z-index: 1; } .etape { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(40px, 9vh, 110px); } .etape .dedans { width: min(var(--maxw, 1120px), 100%); margin-inline: auto; padding-inline: 28px; } .etape.gauche .carte-etape { margin-right: auto; } .etape.droite .carte-etape { margin-left: auto; } .carte-etape { max-width: 29rem; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.75)); border-radius: var(--radius, 22px); padding: clamp(20px, 3.6vw, 30px); box-shadow: 0 18px 50px -24px rgba(15, 29, 52, 0.28); } .carte-etape h3 { font-size: clamp(1.4rem, 3.6vw, 2.05rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink, #0f1d34); text-wrap: balance; } .carte-etape p { margin: 0; color: var(--ink-soft, #4a566d); line-height: 1.62; } .carte-etape .eyebrow { display: block; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text, #7a5714); margin: 0 0 10px; } .carte-etape .jetons { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; } .carte-etape .jetons li { font-size: 0.78rem; font-weight: 500; border: 1px solid var(--border, rgba(15, 29, 52, 0.09)); border-radius: 999px; padding: 5px 11px; color: var(--ink-soft, #4a566d); background: rgba(255, 255, 255, 0.5); } .carte-etape .jetons li b { color: var(--ink, #0f1d34); font-weight: 600; } /* La jauge de progression, posee sur le bord bas du bandeau. */ .parcours-jauge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(15, 29, 52, 0.08); } .parcours-jauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold, #c0912f), var(--indigo, #5b6cff)); } /* La sonde : elle n'apparait qu'avec ?sonde=1, et elle ecrit DANS la page - sur un telephone il n'y a pas de console a ouvrir. */ .sonde-scene { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; color: #fff; background: rgba(15, 29, 52, 0.86); border-radius: 10px; padding: 7px 10px; word-break: break-word; } /* ‼️ SUR ECRAN ETROIT, ON PARTAGE EN HAUTEUR, JAMAIS EN LARGEUR. Sur ordinateur la carte tient un cote et la scene l'autre. Sur telephone il n'y a qu'une colonne : la carte se poserait exactement DEVANT les appareils. Les appareils montent donc dans le tiers haut (cf. `etroit` dans scene-calendars.js) et la carte descend au bas de l'ecran. */ @media (max-width: 819px) { .etape { align-items: flex-end; padding-bottom: 6vh; } .carte-etape { max-width: none; } .etape .dedans { padding-inline: 20px; } } /* Quand la scene ne peut pas tourner (WebGL absent), les cartes doivent rester lisibles : elles cessent d'etre des survols et redeviennent une liste. */ .sans-scene .parcours-scene { display: none; } .sans-scene .parcours-etapes { margin-top: 0; } .sans-scene .etape { min-height: 0; padding-block: 26px; } .sans-scene .etape.droite .carte-etape, .sans-scene .etape.gauche .carte-etape { margin-inline: auto; } @media (prefers-reduced-motion: reduce) { .parcours-jauge i { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ PAGES D'INSCRIPTION (sortie iOS, beta Android) : elles centrent LEUR carte avec un `body { display: flex; align-items: center; justify-content: center }`, concu quand elles ne contenaient qu'un formulaire. ‼️ DEUX CONSEQUENCES MESUREES LE 04/10, ET AUCUNE NE LEVE D'ERREUR : 1. Le parcours devient un ELEMENT FLEXIBLE et se retracte sur son contenu : la carte d'etape faisait 160 px de large au lieu de 353, et son titre se cassait sur quatre lignes. On lui rend sa largeur entiere. 2. Leurs icones decoratives (`.ico-fixed`, z-index 1) flottent AU-DESSUS de la scene et se posent en plein milieu des appareils. Elles appartiennent a l'en-tete de ces pages, pas au parcours : on les laisse en place, et c'est la scene qui passe devant. */ /* ‼️ ET LE DEFAUT N'ETAIT PAS LA LARGEUR, C'ETAIT LA DIRECTION. Le `body` de ces pages est un flex EN LIGNE : la carte d'inscription et le parcours se partageaient la rangee, d'ou une carte d'etape de 160 px. Lui donner `width: 100%` n'y changeait rien - un element flexible ne prend pas la largeur qu'on lui ecrit quand il a un voisin. Il faut empiler, pas elargir. La carte perd son centrage VERTICAL, et c'est voulu : une page qui defile n'a plus de raison de centrer son contenu sur la hauteur. */ body.avec-parcours { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; } body.avec-parcours > .card { margin: clamp(24px, 8vh, 90px) 24px; } body.avec-parcours > .parcours { width: 100%; align-self: stretch; } /* Leurs icones decoratives (`.ico-fixed`, z-index 1) flottent AU-DESSUS de la scene et se posent en plein milieu des appareils. Elles appartiennent a l'en-tete de ces pages, pas au parcours : on les laisse en place, et c'est la scene qui passe devant. ‼️ ET CES DEUX LIGNES SONT SCOPEES A `body.avec-parcours`, PAS GLOBALES. Ecrites sans portee, elles remontaient la scene au-dessus du contenu de TOUTES les pages : sur `aide.html`, le champ de recherche de la FAQ vit dans l'en-tete, donc SOUS une scene `fixed; inset: 0` au z-index 2. Elle l'a signale (« j'ai fait une recherche dans les FAQ et ca n'a pas marche ») - le champ etait recouvert. Mesure du 04/10. */ body.avec-parcours .parcours-scene { z-index: 2; } body.avec-parcours .parcours-etapes { z-index: 3; } /* L'ancre « Voir la demo » tombe sur le HAUT de la section. Sans marge, la barre de navigation flottante mord sur la premiere carte, et le saut se lit comme « il ne s'est rien passe ». `scroll-margin-top` deplace le point d'arrivee, pas la mise en page. (Mesure du 04/10 : le saut lui-meme fonctionne - eprouve au simulateur.) */ .parcours { scroll-margin-top: 92px; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ MODE NUIT : LES CARTES DU PARCOURS (sa capture du 2026-10-15) Ses mots : « on ne voit toujours pas correctement ces blocs », une carte entouree en bleu - fond CLAIR, texte clair dessus, illisible. ‼️ CE FICHIER ETAIT LE TROISIEME ENDROIT, APRES `site.css` ET LES