/* ========================================================================= MOSAÏCA — GRANDES ORGANISATIONS, ENTREPRISES MULTISITES ET MULTINATIONALES ------------------------------------------------------------------------- Feuille chargée UNIQUEMENT par industries/grande-industrie-metallurgie.html. Toutes les règles sont préfixées `go-` et confinées à `.go-page` : aucune autre page du site ne peut être atteinte. PRINCIPE DE MISE EN PAGE Une idée complète par écran. Chaque scène narrative occupe au minimum la hauteur visible sous la barre de navigation, jamais une hauteur fixe qui couperait le contenu. PRINCIPE D'ANIMATION Rien n'est masqué par défaut. Les états « avant animation » ne sont posés que sous `html.go-anim`, classe ajoutée par le filet du lorsque le navigateur supporte IntersectionObserver ET que le mouvement n'est pas réduit. Sans JavaScript, sans IntersectionObserver ou avec `prefers-reduced-motion: reduce`, toute l'information est immédiatement visible dans son état final. PALETTE : variables globales de assets/styles.css, sans ajout de teinte décorative. Deux teintes de service, absentes du global : --go-gold-text doré assombri, lisible sur blanc (contraste 6,4:1) --go-body gris-bleu de lecture sur blanc (contraste 8,9:1) ========================================================================= */ /* ═════════════════════════════════════════════════════════ 1. JETONS ═══ */ .go-page{ --go-navy:var(--navy,#0e4d6c); --go-deep:var(--navy-deep,#0a3850); --go-gold:var(--gold,#C9A45C); --go-gold-dark:var(--gold-dark,#A9803F); --go-gold-text:#7a5a24; --go-gray1:var(--gray1,#F8F9FA); --go-gray2:var(--gray2,#F0F2F5); --go-body:#3d4a52; --go-body-dim:#5c6a72; --go-on-dark:rgba(255,255,255,0.84); --go-on-dark-dim:rgba(255,255,255,0.66); --go-line:rgba(10,56,80,0.14); /* Traits des schémas : une seule paire de jetons, redéfinie sur fond sombre, pour que les SVG n'aient jamais deux versions. */ --go-stroke:rgba(10,56,80,0.34); --go-stroke-soft:rgba(10,56,80,0.13); --go-node:#0a3850; --go-shell:1180px; --go-pad:clamp(1.25rem,4vw,3rem); /* Hauteur d'un écran utile. 100vh d'abord (repli universel), 100svh ensuite pour les navigateurs mobiles à barre d'adresse rétractable. */ --go-screen:calc(100vh - var(--nav-h,68px)); font-family:'Space Grotesk',sans-serif; color:var(--go-body); } @supports (height:100svh){ .go-page{--go-screen:calc(100svh - var(--nav-h,68px))} } .go-page [data-go-theme="dark"]{ --go-stroke:rgba(255,255,255,0.36); --go-stroke-soft:rgba(255,255,255,0.14); --go-node:rgba(255,255,255,0.88); --go-line:rgba(255,255,255,0.18); } /* Les ancres de chapitre ne passent jamais sous la barre fixe. */ .go-page [id]{scroll-margin-top:calc(var(--nav-h,68px) + 1rem)} /* ═══════════════════════════════════════════ 2. SCÈNE ET CONTENEUR ═════ */ .go-scene{ position:relative; min-height:var(--go-screen); display:flex; align-items:center; padding-block:clamp(3rem,7vh,5.5rem); } .go-scene--white{background:#fff} .go-scene--gray{background:var(--go-gray1)} .go-scene--navy{background:var(--go-deep)} .go-shell{ width:min(var(--go-shell),100%); margin-inline:auto; padding-inline:var(--go-pad); } .go-shell > *{min-width:0} /* Deux colonnes : texte / représentation. */ .go-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .go-split--tight{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)} .go-split--flip .go-split__viz{order:-1} /* ═══════════════════════════════════════════════════ 3. TYPOGRAPHIE ═══ */ .go-eyebrow{ font-size:0.78rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; line-height:1.55; color:var(--go-gold-text); margin:0 0 1.15rem; } [data-go-theme="dark"] .go-eyebrow{color:var(--go-gold)} .go-h1{ font-family:'Ibarra Real Nova',serif; font-weight:700; font-size:clamp(1.55rem,1.15rem + 2.7vw,3.4rem); line-height:1.11; color:#fff; margin:0 0 1.4rem; max-width:26ch; } .go-h2{ font-family:'Ibarra Real Nova',serif; font-weight:700; font-size:clamp(1.55rem,1.05rem + 2.05vw,2.6rem); line-height:1.16; color:var(--go-deep); margin:0 0 1.2rem; max-width:24ch; } [data-go-theme="dark"] .go-h2{color:#fff} .go-h2--wide{max-width:30ch} .go-p{ font-size:1.05rem; line-height:1.75; color:var(--go-body); max-width:58ch; margin:0; } .go-p + .go-p{margin-top:1rem} [data-go-theme="dark"] .go-p{color:var(--go-on-dark)} .go-lead{ font-size:1.12rem; line-height:1.72; color:var(--go-on-dark); max-width:52ch; margin:0; } /* Résultat attendu d'une intervention : une ligne, jamais une carte. */ .go-result{ margin:1.6rem 0 0; padding-top:1.1rem; border-top:1px solid var(--go-line); font-size:1.02rem; line-height:1.65; color:var(--go-deep); max-width:52ch; } .go-result b{ display:block; font-size:0.74rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--go-gold-text); margin-bottom:0.4rem; } [data-go-theme="dark"] .go-result{color:#fff} [data-go-theme="dark"] .go-result b{color:var(--go-gold)} /* ══════════════════════════════════════════════ 4. ACTIONS ET LIENS ═══ */ .go-actions{display:flex;flex-wrap:wrap;gap:0.85rem 1rem;margin-top:2.1rem} .go-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:48px; padding:0.8rem 1.55rem; font-family:'Space Grotesk',sans-serif; font-size:1rem;font-weight:600;line-height:1.3; text-decoration:none; border:1px solid transparent; border-radius:1px; transition:background-color .25s ease,color .25s ease,border-color .25s ease; } .go-btn--gold{background:var(--go-gold);color:#0a3850;border-color:var(--go-gold)} .go-btn--gold:hover{background:#d9b674;border-color:#d9b674;color:#0a3850} .go-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)} .go-btn--ghost:hover{border-color:var(--go-gold);color:var(--go-gold)} .go-link{ display:inline-flex;align-items:center;gap:0.55rem; margin-top:1.5rem; min-height:44px; font-size:1rem;font-weight:600; color:var(--go-gold-text); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:0.1rem; transition:color .22s ease; } .go-link::after{content:"→";font-weight:400} .go-link:hover{color:var(--go-deep)} [data-go-theme="dark"] .go-link{color:var(--go-gold)} [data-go-theme="dark"] .go-link:hover{color:#fff} .go-page a:focus-visible, .go-page button:focus-visible{ outline:2px solid var(--go-gold-dark); outline-offset:3px; } [data-go-theme="dark"] a:focus-visible{outline-color:var(--go-gold)} .go-crumb{ font-size:0.82rem; line-height:1.6; color:rgba(255,255,255,0.62); margin-bottom:1.6rem; } .go-crumb a{color:rgba(255,255,255,0.82);text-decoration:none} .go-crumb a:hover{color:var(--go-gold)} /* ══════════════════════════════════════════ 5. RÉVÉLATIONS (ARMÉES) ═══ */ /* Aucun de ces états n'existe sans `html.go-anim` : le contenu reste donc visible si le JavaScript ne s'exécute pas. */ .go-anim [data-go-in="rise"]{ opacity:0; transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } .go-anim [data-go-in="rise"].is-in{opacity:1;transform:none} .go-anim [data-go-in="rise"][data-go-delay="1"]{transition-delay:.12s} .go-anim [data-go-in="rise"][data-go-delay="2"]{transition-delay:.24s} .go-anim [data-go-in="rise"][data-go-delay="3"]{transition-delay:.36s} /* ═════════════════════════════════════════════════ 6. SCHÉMAS (SVG) ═══ */ .go-page svg{display:block;width:100%;height:auto} .go-viz-line{fill:none;stroke:var(--go-stroke);stroke-width:1} .go-viz-soft{fill:none;stroke:var(--go-stroke-soft);stroke-width:1} .go-viz-node{fill:var(--go-node)} .go-viz-node--open{fill:none;stroke:var(--go-stroke);stroke-width:1} .go-viz-gold{fill:none;stroke:var(--go-gold);stroke-width:1.5} .go-viz-goldfill{fill:var(--go-gold)} /* ══════════════════════════════════════════════════ 7. ÉCRAN 1 HÉROS ═══ */ .go-hero{background:var(--go-deep);overflow:hidden} .go-hero__inner{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .go-hero__text{grid-column:1;grid-row:1} .go-hero__viz{ position:relative; display:grid; grid-template-columns:minmax(64px,104px) minmax(0,1fr); gap:0.6rem; align-items:stretch; width:min(100%,540px); margin:0; justify-self:end; } .go-hero__labels{position:relative;list-style:none;margin:0;padding:0} .go-hero__labels li{ position:absolute;right:0; transform:translateY(-50%); font-size:0.76rem; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; text-align:right; color:var(--go-on-dark-dim); white-space:nowrap; } /* Positions calées sur les cinq axes du SVG (y = 60, 195, 330, 465, 600 dans un viewBox de 660 de haut). */ .go-hero__labels li:nth-child(1){top:9.09%} .go-hero__labels li:nth-child(2){top:29.55%} .go-hero__labels li:nth-child(3){top:50%} .go-hero__labels li:nth-child(4){top:70.45%} .go-hero__labels li:nth-child(5){top:90.91%} /* Impulsion dorée : un seul tiret parcourt le tracé des cinq niveaux. Lente, discrète, suspendue dès que le héros quitte l'écran. */ .go-pulse{ fill:none; stroke:var(--go-gold); stroke-width:2; stroke-linecap:square; stroke-dasharray:70 820; stroke-dashoffset:70; opacity:0; } .go-anim .go-pulse{ opacity:1; animation:goPulse 7s linear infinite; } .go-anim .go-hero__svg.is-paused .go-pulse{animation-play-state:paused} @keyframes goPulse{ 0%{stroke-dashoffset:70} 100%{stroke-dashoffset:-820} } /* ═══════════════ 8. ÉCRAN 2 — LES SITUATIONS QUI DÉCLENCHENT L'ENJEU ═══ Une seule ligne verticale — l'intention commune — et six ramifications. Ni cartes, ni liste à puces : une composition à une seule idée. */ .go-signals{position:relative;padding-left:2.5rem} .go-signals__axis{ position:absolute;left:5px;top:0.75rem;bottom:0.75rem;width:1px; background:var(--go-line); } .go-signals__axis i{ display:block;height:100%; background:var(--go-gold); transform:scaleY(1);transform-origin:top center; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .go-anim .go-signals__axis i{transform:scaleY(var(--go-p,0))} .go-signals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(0.9rem,2.4vh,1.6rem)} .go-signal{ position:relative; font-size:1.05rem;line-height:1.6; color:var(--go-body); max-width:46ch; transition:color .5s ease; } /* Le nœud posé sur l'axe, puis la ramification qui rejoint le texte. */ .go-signal::after{ content:"";position:absolute;left:-2.5rem;top:0.8em; width:11px;height:11px;margin-top:-5.5px; border:1px solid var(--go-stroke);background:#fff; transition:background-color .5s ease,border-color .5s ease,transform .5s ease; } .go-signal::before{ content:"";position:absolute;left:-1.75rem;top:0.8em; width:1.15rem;height:1px; background:var(--go-line); transition:background-color .5s ease; } /* Un seul accent doré à la fois ; les situations déjà parcourues gardent leur pleine lisibilité. Sans animation, tout est déjà à ce niveau. */ .go-anim .go-signal{color:#6b7780} .go-anim .go-signal.is-seen{color:var(--go-body)} .go-signal.is-lit{color:var(--go-deep)} .go-signal.is-lit::after{background:var(--go-gold);border-color:var(--go-gold-dark);transform:scale(1.25)} .go-signal.is-lit::before{background:var(--go-gold)} /* ═══════════════════════════════ 9. CHAPITRE — LES CINQ NIVEAUX ═══════ */ /* assets/styles.css pose `section{overflow-x:hidden}` pour tout le site. Sur un
, `hidden` fait de l'élément un conteneur de défilement : la colonne collante du chapitre s'y retrouve enfermée et ne se fixe jamais. `clip` protège de la même manière du débordement horizontal sans créer ce conteneur — c'est exactement le raisonnement déjà retenu pour body{overflow-x:clip} dans assets/responsive.css. */ .go-levels{background:#fff;position:relative;overflow-x:clip} @supports not (overflow:clip){ .go-levels{overflow-x:visible} } .go-levels__grid{ display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .go-levels__aside{ position:sticky; top:calc(var(--nav-h,68px) + clamp(2rem,7vh,4.5rem)); align-self:start; padding-block:clamp(2rem,6vh,3rem); } .go-levels__chapter{ font-family:'Ibarra Real Nova',serif; font-size:1.15rem; font-weight:600; line-height:1.45; color:var(--go-navy); margin:0; max-width:22ch; } /* Rail vertical : un seul nœud actif, les niveaux parcourus restent visibles à intensité réduite. */ .go-rail{position:relative;margin-top:clamp(1.75rem,5vh,2.75rem);padding-left:1.75rem} .go-rail__line{position:absolute;left:5px;top:9px;bottom:9px;width:1px;background:var(--go-line)} .go-rail__line i{ display:block;height:100%; background:var(--go-gold); transform:scaleY(var(--go-p,0)); transform-origin:top center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } .go-rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1.1rem,3.4vh,2.1rem)} .go-rail__item{position:relative;display:flex;align-items:center;min-height:18px} .go-rail__node{ position:absolute;left:-1.75rem;top:50%; width:11px;height:11px;margin-top:-5.5px; border:1px solid var(--go-stroke); background:#fff; transition:background-color .5s ease,border-color .5s ease,transform .5s ease; } .go-rail__label{ font-size:0.86rem; font-weight:500; line-height:1.45; color:var(--go-body-dim); transition:color .5s ease; } .go-rail__item.is-past .go-rail__node{background:var(--go-gold);border-color:var(--go-gold);opacity:.5} .go-rail__item.is-past .go-rail__label{color:var(--go-body-dim)} .go-rail__item.is-active .go-rail__node{background:var(--go-gold);border-color:var(--go-gold-dark);transform:scale(1.35)} .go-rail__item.is-active .go-rail__label{color:var(--go-deep);font-weight:700} .go-levels__steps{display:block} .go-level{ min-height:var(--go-screen); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(2rem,7vh,4rem); } .go-level h3{ font-family:'Ibarra Real Nova',serif; font-weight:700; font-size:clamp(1.5rem,1.05rem + 1.9vw,2.45rem); line-height:1.16; color:var(--go-deep); margin:0 0 1.1rem; max-width:20ch; } .go-question{ margin:1.7rem 0 0; padding-left:1.15rem; border-left:2px solid var(--go-gold); font-family:'Ibarra Real Nova',serif; font-size:1.22rem; line-height:1.5; color:var(--go-navy); max-width:44ch; } .go-accent{ margin:1.7rem 0 0; font-family:'Ibarra Real Nova',serif; font-size:1.3rem; line-height:1.45; color:var(--go-deep); max-width:36ch; } /* Repère de niveau propre au téléphone : le rail collant disparaît. */ .go-level__mark{display:none} /* ══════════════════════════ 10. CHAPITRE — CE QUE LA TAILLE AMPLIFIE ═══ */ .go-dim__num{ display:block; font-family:'Ibarra Real Nova',serif; font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem); line-height:1; font-weight:400; color:var(--go-gold-dark); margin-bottom:0.9rem; } .go-dim__viz{margin:0;width:100%} /* 01 — deux cadres cherchent un point d'alignement */ .go-frame{transition:transform .85s cubic-bezier(.22,.61,.36,1)} .go-anim .go-frame--a{transform:translate(-26px,-18px)} .go-anim .go-frame--b{transform:translate(26px,18px)} .go-anim .is-in .go-frame--a, .go-anim .is-in .go-frame--b{transform:none} .go-anim .go-meet{opacity:0;transition:opacity .7s ease .5s} .go-anim .is-in .go-meet{opacity:1} /* 02 — lignes d'autorité et axe d'arbitrage */ .go-anim .go-draw{stroke-dasharray:var(--go-len,600);stroke-dashoffset:var(--go-len,600);transition:stroke-dashoffset .9s ease} .go-anim .is-in .go-draw{stroke-dashoffset:0} .go-anim .is-in .go-draw--2{transition-delay:.14s} .go-anim .is-in .go-draw--3{transition-delay:.28s} .go-anim .is-in .go-draw--4{transition-delay:.42s} /* transform-box: fill-box cale l'origine sur la boîte de l'élément et non sur le viewBox : l'axe se déploie depuis son propre centre. */ .go-axis{transform-box:fill-box;transform-origin:center} .go-anim .go-axis{transform:scaleY(0);transition:transform .8s cubic-bezier(.22,.61,.36,1) .5s} .go-anim .is-in .go-axis{transform:scaleY(1)} /* 03 — couches héritées qui se rapprochent sans se confondre */ .go-layer{transition:transform .85s cubic-bezier(.22,.61,.36,1)} .go-anim .go-layer--1{transform:translateY(-34px)} .go-anim .go-layer--2{transform:translateY(-14px)} .go-anim .go-layer--3{transform:translateY(16px)} .go-anim .go-layer--4{transform:translateY(36px)} .go-anim .is-in .go-layer{transform:none} .go-anim .is-in .go-layer--2{transition-delay:.08s} .go-anim .is-in .go-layer--3{transition-delay:.16s} .go-anim .is-in .go-layer--4{transition-delay:.24s} /* ═══════════════════════════════ 11. ÉCRAN 11 — NOTRE CONVICTION ══════ */ /* La phrase propriétaire de Mosaïca : posée sur l'axe doré, sans effet. */ .go-thesis{margin-bottom:clamp(0.5rem,2vh,1.25rem)} .go-thesis__claim{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.15rem,0.95rem + 0.9vw,1.6rem); line-height:1.42; color:var(--go-gold); max-width:42ch; margin:1.35rem 0 0; padding-left:1.15rem; border-left:2px solid var(--go-gold); } .go-zones{ position:relative; --go-zgap:clamp(1.75rem,4vw,3.25rem); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--go-zgap); margin-top:clamp(2.25rem,6vh,3.5rem); } /* La ligne est portée par la première zone, et non par la grille : son origine verticale est alors exactement celle des repères, quelle que soit la manière dont la grille répartit ses pistes. */ .go-zones__line{ position:absolute;top:5px;left:0;height:1px; width:calc(300% + 2 * var(--go-zgap)); background:rgba(255,255,255,0.18); } .go-zones__line i{ display:block;height:100%; background:var(--go-gold); transform-origin:left center; transition:transform .85s cubic-bezier(.22,.61,.36,1); } .go-anim .go-zones__line i{transform:scaleX(0)} .go-anim .go-zones.is-in .go-zones__line i{transform:scaleX(1)} .go-zone{position:relative;padding-top:2.25rem} .go-zone::before{ content:"";position:absolute;top:0;left:0; width:11px;height:11px; background:var(--go-gold); } .go-zone h3{ font-family:'Space Grotesk',sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--go-gold); margin:0 0 0.9rem; line-height:1.5; } .go-zone p{ font-size:1.02rem; line-height:1.7; color:var(--go-on-dark); margin:0; } .go-anim .go-zone{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1)} .go-anim .is-in .go-zone{opacity:1;transform:none} .go-anim .is-in .go-zone:nth-child(3){transition-delay:.16s} .go-anim .is-in .go-zone:nth-child(4){transition-delay:.32s} /* ══════════════════════════════════ 12. ÉCRAN 13 — LA MÉTHODE ═════════ */ .go-method{background:#fff} .go-method__intro{margin-top:0} /* Le tracé porte deux lectures superposées : au-dessus de l'axe, les cinq repères que la méthode suit ; au-dessous, ses quatre temps. Un seul tracé, jamais deux blocs. */ .go-method__trace{ position:relative; margin-top:clamp(2.25rem,5vh,3.25rem); padding-top:calc(5.5rem + 2.25rem); } .go-method__chain{ position:absolute;top:0;left:0;right:0;height:5.5rem; list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0.4rem; } .go-method__chain li{ position:relative;align-self:end; padding:0 0.35rem 1.35rem; text-align:center; font-size:0.92rem;line-height:1.35; color:var(--go-body-dim); } .go-method__chain li::before{ content:"";position:absolute;left:50%;bottom:-6px; width:1px;height:calc(1.35rem + 6px); background:var(--go-stroke-soft); } .go-method__chain li::after{ content:"";position:absolute;left:50%;bottom:-8px; width:5px;height:5px;margin-left:-2px; background:var(--go-stroke); } .go-method__steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.25rem,2.6vw,2.4rem); } .go-method__line{position:absolute;top:calc(5.5rem + 5px);left:0;right:0;height:1px;background:var(--go-line)} .go-method__line i{ display:block;height:100%; background:var(--go-gold); transform-origin:left center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } /* Sans JavaScript, le tracé est complet et les quatre étapes sont pleinement lisibles : l'état « en attente » n'existe que si la séquence peut jouer. */ .go-anim .go-method__line i{transform:scaleX(var(--go-p,0))} .go-step{position:relative} .go-step::before{ content:"";position:absolute;top:-2.25rem;left:0; width:11px;height:11px; border:1px solid var(--go-gold-dark);background:var(--go-gold); transition:background-color .6s ease,border-color .6s ease,transform .6s ease; } .go-anim .go-step::before{border-color:var(--go-stroke);background:#fff} .go-step h3{ font-family:'Ibarra Real Nova',serif; font-size:1.32rem;font-weight:700;line-height:1.25; color:var(--go-deep); margin:0 0 0.6rem; transition:color .6s ease; } .go-step p{font-size:1rem;line-height:1.65;color:var(--go-body);margin:0;transition:color .6s ease} .go-anim .go-step h3{color:var(--go-body-dim)} .go-anim .go-step p{color:var(--go-body-dim)} .go-step.is-done h3{color:var(--go-navy)} .go-step.is-done p{color:var(--go-body)} .go-step.is-done::before{background:var(--go-gold);border-color:var(--go-gold)} .go-step.is-active h3{color:var(--go-deep)} .go-step.is-active p{color:var(--go-body)} .go-step.is-active::before{background:var(--go-gold);border-color:var(--go-gold-dark);transform:scale(1.35)} .go-method__tag{ margin:clamp(2rem,5vh,3rem) 0 0; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--go-body-dim); } /* ══════════════════════ 13. ÉCRAN 13 — LES TROIS FAÇONS D'AGIR ════════ Un sélecteur sobre, un volet à la fois. Aucune grille de cartes, aucun effet de tableau de bord. Sans JavaScript, le sélecteur disparaît et les trois volets se lisent à la suite. */ /* Trois zones : le choix à gauche, le propos au centre, le schéma à droite. Une seule intervention est développée à la fois. */ .go-acts{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); align-items:center; } .go-acts.go-tabs-ready{grid-template-columns:minmax(0,330px) minmax(0,1fr)} .go-acts__aside{align-self:center} .go-acts__lead{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem);max-width:20ch;margin-bottom:0} /* Consigne d'interaction : elle n'a de sens que si les choix sont actifs. */ .go-acts__hint{ display:none; margin:clamp(1.5rem,3.5vh,2.25rem) 0 0.9rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--go-body-dim); } .go-tabs-ready .go-acts__hint{display:block} .go-acts__rail{display:none;flex-direction:column} .go-tabs-ready .go-acts__rail{display:flex} /* Une ligne de choix : numéro, nom, état. Pleine largeur, filet discret, jamais un bouton plein ni une carte. */ .go-choice{ position:relative; display:block;width:100%; appearance:none;-webkit-appearance:none; background:none;border:0; border-bottom:1px solid var(--go-line); padding:0; min-height:48px; text-align:left; cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .28s ease; } .go-choice::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--go-gold); transform:scaleY(0);transform-origin:center; transition:transform .28s ease; } .go-choice__inner{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:0.9rem; min-height:48px; padding:0.7rem 0.2rem 0.7rem 1rem; transition:transform .28s cubic-bezier(.22,.61,.36,1); } /* Doré assombri : le numéro reste discret sans descendre sous le seuil de lisibilité (contraste ≥ 4,5:1 même à l'état inactif). */ .go-choice__num{ font-size:0.8rem;font-weight:700;letter-spacing:0.08em; color:var(--go-gold-text); opacity:.92; transition:opacity .28s ease; } .go-choice__name{ font-family:'Ibarra Real Nova',serif; font-size:1.18rem;line-height:1.25;font-weight:600; color:var(--go-body); transition:color .28s ease; } .go-choice__state{ font-size:0.68rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--go-body-dim); transition:color .28s ease; white-space:nowrap; } .go-choice__on{display:none} .go-choice__off{display:inline} /* Survol d'un choix inactif : le propos avance de quatre pixels, le filet passe à l'or. Aucune dimension ne change. */ .go-choice:hover .go-choice__name{color:var(--go-deep)} .go-choice:hover .go-choice__state{color:var(--go-gold-text)} .go-choice:hover .go-choice__num{opacity:1} .go-choice:hover{border-bottom-color:var(--go-gold)} .go-choice:hover .go-choice__inner{transform:translateX(4px)} /* Choix actif : filet vertical doré, titre bleu profond, état AFFICHÉ. */ .go-choice[aria-selected="true"]{border-bottom-color:var(--go-gold)} .go-choice[aria-selected="true"]::before{transform:scaleY(1)} .go-choice[aria-selected="true"] .go-choice__num{opacity:1} .go-choice[aria-selected="true"] .go-choice__name{color:var(--go-deep)} .go-choice[aria-selected="true"] .go-choice__state{color:var(--go-gold-text)} .go-choice[aria-selected="true"] .go-choice__on{display:inline} .go-choice[aria-selected="true"] .go-choice__off{display:none} .go-choice[aria-selected="true"]:hover .go-choice__inner{transform:none} /* Respiration resserrée : le volet le plus dense doit tenir dans l'écran, sinon le passage d'un onglet à l'autre déplacerait la mise en page. */ .go-acts-scene{padding-block:clamp(2.25rem,4.5vh,3.5rem)} .go-acts__panel{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:clamp(1.75rem,3.5vw,3rem); align-items:center; } .go-acts__panel[hidden]{display:none} .go-acts__panel + .go-acts__panel{margin-top:clamp(2.5rem,6vh,3.5rem)} .go-tabs-ready .go-acts__panel + .go-acts__panel{margin-top:0} .go-acts__title{ font-family:'Ibarra Real Nova',serif; font-weight:700; font-size:clamp(1.35rem,1.05rem + 1.1vw,1.95rem); line-height:1.2; color:var(--go-deep); margin:0 0 1rem; max-width:24ch; } .go-acts__viz{margin:0;width:100%} /* Le volet doit tenir dans l'écran : on resserre uniquement les espaces internes, jamais la taille du texte. */ .go-acts__panel .go-result{margin-top:1.25rem;padding-top:0.9rem} .go-acts__panel .go-link{margin-top:1.1rem} /* ─────────────── ANIMATION PROPRE À CHAQUE SCHÉMA D'INTERVENTION ─────── Principe : l'état par défaut de chaque schéma EST son état final. Rien n'est donc masqué sans JavaScript, sans onglets initialisés ou en mouvement réduit. L'animation n'existe que le temps où le panneau porte `.is-animating`, classe posée après deux cycles de rendu — et retirée avant chaque nouvelle activation, ce qui permet de la rejouer. Les images-clés n'écrivent que leur état de départ : l'état d'arrivée reste celui de la feuille, donc rigoureusement identique au repos. Les panneaux cachés portent `hidden` : ils ne peuvent pas s'animer. */ @keyframes goActFade{from{opacity:0}} @keyframes goActRise{from{opacity:0;transform:translateY(6px)}} @keyframes goActSweep{from{transform:translateX(-330px)}} @keyframes goActDraw{from{stroke-dashoffset:var(--go-len,600)}} @keyframes goActAxis{from{transform:scaleY(0)}} @keyframes goActTravel{ 0%{transform:translate(0,0)} 18%{transform:translate(0,0)} 36%{transform:translate(170px,0)} 54%{transform:translate(170px,0)} 72%{transform:translate(340px,0)} 84%{transform:translate(340px,0)} 100%{transform:translate(278px,190px)} } /* Les schémas partagent des classes avec les écrans de dimensions : on neutralise ici, et ici seulement, les états d'attente hérités. */ .go-anim .go-acts__panel .go-draw{stroke-dashoffset:0;transition:none} .go-anim .go-acts__panel .go-axis{transform:scaleY(1);transition:none} .go-acts__panel .go-travel{transform:translate(278px,190px)} .go-env--1{opacity:.42} .go-env--2{opacity:.55} .go-env--3{opacity:1} /* 01 — Diagnostiquer : les niveaux paraissent, la lecture les traverse, trois zones à clarifier se signalent l'une après l'autre. (1260 ms) */ .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-diag-lvl{animation:goActFade 380ms ease both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-diag-lvl:nth-child(2){animation-delay:70ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-diag-lvl:nth-child(3){animation-delay:140ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-diag-lvl:nth-child(4){animation-delay:210ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-diag-lvl:nth-child(5){animation-delay:280ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-sweep{animation:goActSweep 950ms cubic-bezier(.3,.7,.3,1) 180ms both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-flag--1{animation:goActFade 260ms ease 700ms both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-flag--2{animation:goActFade 260ms ease 850ms both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-flag--3{animation:goActFade 260ms ease 1000ms both} /* 02 — Aligner : quatre trajectoires distinctes rejoignent une structure commune, puis l'axe d'arbitrage se révèle. (1430 ms) */ .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-draw{animation:goActDraw 850ms cubic-bezier(.22,.61,.36,1) both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-draw--2{animation-delay:110ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-draw--3{animation-delay:220ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-draw--4{animation-delay:330ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-align-node{animation:goActRise 240ms ease both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-align-node:nth-child(1){animation-delay:780ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-align-node:nth-child(2){animation-delay:880ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-align-node:nth-child(3){animation-delay:980ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-align-node:nth-child(4){animation-delay:1080ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-axis{animation:goActAxis 480ms cubic-bezier(.22,.61,.36,1) 950ms both} /* 03 — Développer : le gestionnaire circule, les repères changent autour de lui, l'axe demeure, puis le niveau des équipes s'active. (1440 ms) */ .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-env{animation:goActFade 300ms ease both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-env--2{animation-delay:380ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-env--3{animation-delay:700ms} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-travel{animation:goActTravel 1150ms cubic-bezier(.5,0,.2,1) 60ms both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-recall{animation:goActFade 320ms ease 950ms both} .go-anim .go-tabs-ready .go-acts__panel.is-active.is-animating .go-final-mark{animation:goActFade 260ms ease 1180ms both} /* ═══════════════════════════════════ 14. ÉCRAN 17 — CONCLUSION ════════ */ .go-end{background:var(--go-deep);overflow:hidden} /* Texture de mosaïque sombre : assemblage de carreaux, jamais un décor. Deux dégradés répétés, aucune image, aucun flou. */ .go-end__texture{ position:absolute;inset:0; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 88px), repeating-linear-gradient(0deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 88px); background-position:center; opacity:.55; pointer-events:none; } .go-end__inner{position:relative} .go-end__strong{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem); line-height:1.45; color:var(--go-gold); margin:0 0 1.5rem; max-width:34ch; } .go-end__sign{ font-size:1.02rem;line-height:1.7; color:var(--go-on-dark-dim); max-width:52ch;margin:0; } /* ══════════════════════ 15. INDICATEUR DE CHAPITRES (ORDINATEUR) ══════ */ /* Navigation redondante : masquée tant que le JavaScript n'a pas confirmé qu'il peut en tenir l'état et le contraste sur fond clair comme sombre. */ .go-chapters{display:none} .go-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem} .go-chapters a{ position:relative; display:flex;align-items:center;gap:0.75rem; /* WCAG 2.2 — 2.5.8 : cible d'au moins 24 × 24 pixels, même lorsque le libellé est réduit à un repère. */ min-height:24px;min-width:24px; padding:2px 0; text-decoration:none; font-size:0.72rem; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:#5c6a72; transition:color .3s ease; } .go-chapters__dot{ flex:none;width:7px;height:7px; border:1px solid currentColor; transition:background-color .4s ease,transform .4s ease; } .go-chapters a:hover{color:var(--go-gold-dark)} .go-chapters a.is-active{color:var(--go-deep)} .go-chapters a.is-active .go-chapters__dot{background:var(--go-gold);border-color:var(--go-gold-dark);transform:scale(1.3)} .go-chapters__track{ position:absolute;left:3px;top:6px;bottom:6px;width:1px; background:rgba(10,56,80,0.16); } .go-chapters__track i{ display:block;height:100%; background:var(--go-gold); transform:scaleY(var(--go-p,0));transform-origin:top center; transition:transform .3s linear; } /* Sur les écrans bleus, l'indicateur inverse son contraste. */ .go-chapters.is-on-dark a{color:rgba(255,255,255,0.66)} .go-chapters.is-on-dark a:hover{color:var(--go-gold)} .go-chapters.is-on-dark a.is-active{color:#fff} .go-chapters.is-on-dark .go-chapters__track{background:rgba(255,255,255,0.22)} /* Sur fond bleu, le doré clair reste visible au clavier. */ .go-chapters.is-on-dark a:focus-visible{outline-color:var(--go-gold)} @media(min-width:1200px){ .go-js .go-chapters{ display:block; position:fixed; top:50%;right:clamp(0.75rem,1.4vw,1.5rem); transform:translateY(-50%); z-index:60; padding-left:0.35rem; } /* Sous 1440px la gouttière ne suffit pas au libellé : on ne garde que les repères, le nom reste accessible aux lecteurs d'écran. */ .go-chapters__label{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } } @media(min-width:1440px){ .go-chapters__label{ position:static;width:auto;height:auto; margin:0;overflow:visible;clip-path:none; } } /* ══════════════════ 15 bis. ORDINATEUR PORTABLE PEU HAUT ══════════════ Sur un 1366 × 768, la respiration calculée pour un 900 de haut fait dépasser trois scènes d'une cinquantaine de pixels. On resserre les marges verticales — jamais le texte — pour que la règle d'une idée par écran reste tenue à cette hauteur. */ @media(min-width:1081px) and (max-height:840px){ .go-scene{padding-block:clamp(1.75rem,3.4vh,2.75rem)} .go-acts-scene{padding-block:clamp(1.4rem,2.8vh,2.25rem)} .go-acts.go-tabs-ready{grid-template-columns:minmax(0,300px) minmax(0,1fr)} .go-acts__title{margin-bottom:0.75rem;max-width:31ch} .go-acts__hint{margin-top:clamp(1.1rem,2.5vh,1.6rem)} /* Le volet le plus dense doit tenir à la même hauteur que les deux autres : sans cela, changer d'onglet déplacerait la mise en page. */ .go-acts__panel .go-eyebrow{margin-bottom:0.75rem} .go-acts__panel .go-p + .go-p{margin-top:0.7rem} .go-acts__panel .go-result{margin-top:0.9rem;padding-top:0.7rem} .go-acts__panel .go-link{margin-top:0.7rem} /* Le titre de section ayant rejoint la colonne de gauche, le volet dispose de nouveau de la hauteur nécessaire : le schéma retrouve sa place sans que la scène dépasse l'écran. */ .go-acts__panel{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(1.5rem,2.5vw,2.25rem)} .go-method__trace{margin-top:clamp(1.5rem,3vh,2.25rem)} .go-hero__viz{width:min(100%,470px)} } /* ═════════════════════════════════════ 16. TABLETTE (≤ 1080px) ════════ */ @media(max-width:1080px){ .go-hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .go-hero__viz{justify-self:start;width:min(100%,440px)} .go-split,.go-split--tight{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .go-split--flip .go-split__viz{order:0} .go-split__viz{width:min(100%,560px)} .go-levels__grid{grid-template-columns:minmax(0,1fr)} /* Le tracé de la méthode bascule à la verticale : quatre étapes en ligne ne tiennent plus, et une grille 2 × 2 casserait la lecture du parcours. */ .go-method__trace{padding:0 0 0 2rem} .go-method__steps{grid-template-columns:minmax(0,1fr);row-gap:1.9rem} .go-method__line{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto} .go-method__line i{width:100%;height:100%;transform:scaleY(1);transform-origin:top center} .go-anim .go-method__line i{transform:scaleY(var(--go-p,0))} .go-step::before{top:6px;left:-2rem} /* Les cinq repères prennent place en tête du même tracé vertical. */ .go-method__chain{ position:static;height:auto; display:flex;flex-direction:column;gap:0.7rem; margin-bottom:1.9rem; } .go-method__chain li{align-self:auto;text-align:left;padding:0} .go-method__chain li::before{display:none} .go-method__chain li::after{ left:calc(-2rem + 3px);bottom:auto;top:0.5em;margin-left:0; } /* --- Les trois façons d'agir : trois lignes pleine largeur --------- Le titre, la consigne et les trois choix restent en tête ; le volet actif vient se placer juste en dessous. */ .go-acts.go-tabs-ready{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .go-acts__lead{max-width:24ch} .go-choice{border:1px solid var(--go-line);border-left-width:2px;background:#fff;margin-bottom:0.5rem} .go-choice::before{width:2px;left:-2px} .go-choice__inner{min-height:52px;padding:0.85rem 1rem} .go-choice:hover .go-choice__inner{transform:none} .go-acts__panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} /* Le schéma accompagne le texte, il ne le domine pas. */ .go-acts__viz{width:min(100%,400px)} /* Le fil devient vertical et repasse sur la grille : les trois zones n'ont plus la même hauteur, la première ne peut donc plus le porter. */ .go-zones{grid-template-columns:minmax(0,1fr);gap:2rem;padding-left:2rem} .go-zones__line{display:none} .go-zone{padding-top:0} .go-zone::before{top:6px;left:-2rem} .go-zones::before, .go-zones::after{ content:"";position:absolute;top:6px;bottom:6px;left:5px;width:1px; } .go-zones::before{background:rgba(255,255,255,0.18)} .go-zones::after{ background:var(--go-gold); transform-origin:top center; transition:transform .85s cubic-bezier(.22,.61,.36,1); } .go-anim .go-zones::after{transform:scaleY(0)} .go-anim .go-zones.is-in::after{transform:scaleY(1)} } /* ═════════════════════════════════════ 17. TÉLÉPHONE (≤ 900px) ════════ */ @media(max-width:900px){ /* --- Le récit redevient une succession de sections verticales ------- */ .go-levels__aside{position:static;padding-block:0;margin-bottom:1.5rem} .go-rail{display:none} .go-levels__grid{gap:0} .go-levels{padding-top:clamp(3rem,7vh,4rem)} .go-level{ min-height:var(--go-screen); padding-block:clamp(2.5rem,6vh,3.5rem); position:relative; } /* Le premier niveau partage son écran avec le titre de chapitre. */ .go-level:first-child{min-height:calc(var(--go-screen) - 6.5rem)} /* Nœud et ligne au-dessus du texte, jamais à côté. */ .go-level__mark{ display:block;position:relative; height:34px;margin-bottom:1.4rem; } .go-level__mark::before{ content:"";position:absolute;left:5px;top:0;bottom:0;width:1px; background:var(--go-line); } .go-level__mark i{ position:absolute;left:0;bottom:0; width:11px;height:11px; background:var(--go-gold); } /* --- Héros : l'essentiel d'abord, la représentation ensuite --------- */ .go-hero__inner{gap:1.75rem} .go-hero__viz{width:min(100%,320px);grid-template-columns:minmax(58px,84px) minmax(0,1fr)} .go-hero__labels li{font-size:14px;letter-spacing:0.08em} .go-actions{gap:0.75rem} .go-btn{width:100%} /* --- REPRISE DE LA HIÉRARCHIE TYPOGRAPHIQUE ------------------------ assets/mobile-premium.css §3 impose sous 900px `main h3, main p, main span, main a … { font-size:max(1em,13px) !important }` et `main > * p { font-size:max(1em,15px) !important }`. Sur une page qui porte sa propre échelle, `1em` vaut la taille du PARENT — donc 16px partout : titres de niveau, grands numéros et surtitres seraient ramenés à la taille du texte courant et toute la hiérarchie disparaîtrait. Comme pour la page À propos, on rend ici ses tailles à la page. Le texte courant reste à 16px minimum ; aucun libellé ne descend sous 13px. */ .go-page .go-p, .go-page .go-zone p, .go-page .go-step p, .go-page .go-end__sign{font-size:16px !important;line-height:1.7 !important} .go-page .go-lead{font-size:17px !important;line-height:1.7 !important} .go-page .go-question{font-size:18px !important} .go-page .go-accent{font-size:19px !important} .go-page .go-result{font-size:16px !important} .go-page .go-result b{font-size:13px !important} .go-page .go-eyebrow{font-size:13.5px !important;letter-spacing:0.13em} .go-page .go-crumb{font-size:13px !important} .go-page .go-crumb a{font-size:13px !important} .go-page .go-btn{font-size:16px !important} .go-page .go-link{font-size:16px !important} .go-page .go-level h3{font-size:clamp(1.45rem,5.6vw,1.9rem) !important;line-height:1.18 !important} .go-page .go-acts__title{font-size:clamp(1.3rem,5vw,1.6rem) !important;line-height:1.22 !important} .go-page .go-choice__name{font-size:18px !important;line-height:1.25 !important} .go-page .go-choice__num{font-size:13px !important} .go-page .go-choice__state{font-size:11.5px !important;letter-spacing:0.14em} .go-page .go-acts__hint{font-size:13px !important;letter-spacing:0.16em} .go-page .go-thesis__claim{font-size:clamp(1.15rem,4.6vw,1.45rem) !important;line-height:1.42 !important} .go-page .go-signal{font-size:16px !important;line-height:1.6 !important} .go-page .go-method__chain li{font-size:16px !important;line-height:1.45 !important} .go-page .go-step h3{font-size:19px !important} .go-page .go-zone h3{font-size:14px !important;letter-spacing:0.13em} .go-page .go-levels__chapter{font-size:17px !important;line-height:1.45 !important} .go-page .go-dim__num{font-size:clamp(2.1rem,9vw,2.8rem) !important} .go-page .go-end__strong{font-size:clamp(1.2rem,5vw,1.5rem) !important} .go-page .go-method__tag{font-size:13px !important;letter-spacing:0.08em} .go-page .go-hero__labels li{font-size:14px !important} } @media(max-width:640px){ .go-hero__viz{width:min(100%,288px)} .go-scene{padding-block:clamp(2.5rem,6vh,3.5rem)} } @media(max-width:420px){ .go-hero__viz{width:min(100%,258px);grid-template-columns:minmax(52px,74px) minmax(0,1fr)} .go-page .go-hero__labels li{font-size:13px !important;letter-spacing:0.06em} } /* Téléphone en paysage : la hauteur utile fond. Les scènes cessent de viser un écran plein plutôt que de couper le contenu. */ @media(orientation:landscape) and (max-height:520px){ .go-scene,.go-level,.go-level:first-child{min-height:0} .go-scene{padding-block:clamp(2rem,8vh,3rem)} } /* ═══════════════════ 18. VERSION SANS MOUVEMENT (COMPLÈTE) ════════════ */ /* Toute l'information apparaît immédiatement, dans son état final, et aucun déplacement notable ne se produit. */ @media(prefers-reduced-motion:reduce){ .go-page *, .go-page *::before, .go-page *::after{ animation:none !important; transition:none !important; } .go-page [data-go-in="rise"], .go-page [data-go-in="rise"].is-in, .go-page .go-zone{opacity:1 !important;transform:none !important} .go-page .go-signal{color:var(--go-body) !important} .go-page .go-signals__axis i{transform:scaleY(1) !important} .go-page .go-frame, .go-page .go-layer, .go-page .go-travel, .go-page .go-sweep{transform:none !important} .go-page .go-draw{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .go-page .go-axis{transform:scaleY(1) !important} .go-page .go-meet, .go-page .go-flag, .go-page .go-recall, .go-page .go-diag-lvl, .go-page .go-align-node, .go-page .go-final-mark{opacity:1 !important} /* Les schémas d'intervention s'affichent directement dans leur état final ; le changement d'intervention, lui, reste immédiat. */ .go-page .go-acts__panel .go-travel{transform:translate(278px,190px) !important} .go-page .go-env--1{opacity:.42 !important} .go-page .go-env--2{opacity:.55 !important} .go-page .go-env--3{opacity:1 !important} .go-page .go-pulse{opacity:.9 !important;stroke-dasharray:none !important;stroke-dashoffset:0 !important} .go-page .go-rail__line i{transform:scaleY(1) !important} .go-page .go-method__line i, .go-page .go-zones__line i{transform:scaleX(1) !important} } @media(prefers-reduced-motion:reduce) and (max-width:1080px){ .go-page .go-zones__line i, .go-page .go-method__line i{transform:scaleY(1) !important} } /* Le rail de chapitres est en position fixe. Arrive au pied de page, il n'a plus de chapitre a signaler et se superposerait au contenu : il s'efface. `visibility` complete l'opacite pour le retirer aussi du parcours au clavier. */ .go-chapters.is-out{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .go-chapters{transition:opacity .28s ease} @media(prefers-reduced-motion:reduce){ .go-chapters,.go-chapters.is-out{transition:none} }