/* ========================================================================= MOSAÏCA — SANTÉ ET SERVICES SOCIAUX ------------------------------------------------------------------------- Feuille chargée UNIQUEMENT par industries/sante-services-sociaux.html. Toutes les règles sont préfixées `ss-` et confinées à `.ss-page` : aucune autre page du site ne peut être atteinte, même si une classe portait le même nom ailleurs. MISE EN PAGE Une idée complète par écran. Chaque scène occupe au minimum la hauteur visible sous la barre de navigation, jamais une hauteur fixe qui couperait le contenu. ANIMATION L'état par défaut de chaque schéma EST son état final : rien n'est masqué sans JavaScript, sans IntersectionObserver ou en mouvement réduit. Les états d'attente n'existent que sous `html.ss-anim`, classe posée par le filet du et confirmée par le script. Aucune propriété exotique : uniquement `transform`, `opacity` et `stroke-dashoffset`, donc un rendu identique dans Chrome et Edge. SIGNATURE GRAPHIQUE Le parcours d'une orientation qui se précise en descendant, des niveaux de plus en plus étroits, des trajectoires professionnelles qui se rencontrent sans fusionner, un repère commun qui demeure visible. PALETTE : variables globales de assets/styles.css. Deux teintes de service, absentes du global : --ss-gold-text doré assombri, lisible sur fond clair (≥ 6:1) --ss-body gris-bleu de lecture (≥ 8:1 sur blanc) ========================================================================= */ /* ═════════════════════════════════════════════════════════ 1. JETONS ═══ */ .ss-page{ --ss-navy:var(--navy,#0e4d6c); --ss-deep:var(--navy-deep,#0a3850); --ss-gold:var(--gold,#C9A45C); --ss-gold-dark:var(--gold-dark,#A9803F); --ss-gold-text:#7a5a24; --ss-gray1:var(--gray1,#F8F9FA); --ss-body:#3d4a52; --ss-body-dim:#5c6a72; --ss-on-dark:rgba(255,255,255,0.84); --ss-on-dark-dim:rgba(255,255,255,0.66); --ss-line:rgba(10,56,80,0.14); --ss-stroke:rgba(10,56,80,0.34); --ss-stroke-soft:rgba(10,56,80,0.16); --ss-node:#0a3850; --ss-shell:1180px; --ss-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. */ --ss-screen:calc(100vh - var(--nav-h,68px)); font-family:'Space Grotesk',sans-serif; color:var(--ss-body); } @supports (height:100svh){ .ss-page{--ss-screen:calc(100svh - var(--nav-h,68px))} } .ss-page [data-ss-theme="dark"]{ --ss-stroke:rgba(255,255,255,0.36); --ss-stroke-soft:rgba(255,255,255,0.16); --ss-node:rgba(255,255,255,0.88); --ss-line:rgba(255,255,255,0.18); } /* Les ancres de chapitre ne passent jamais sous la barre fixe. */ .ss-page [id]{scroll-margin-top:calc(var(--nav-h,68px) + 1rem)} /* ═══════════════════════════════════════════ 2. SCÈNE ET CONTENEUR ═════ */ .ss-scene{ position:relative; min-height:var(--ss-screen); display:flex; align-items:center; padding-block:clamp(3rem,7vh,5.5rem); } .ss-scene--white{background:#fff} .ss-scene--gray{background:var(--ss-gray1)} .ss-scene--navy{background:var(--ss-deep)} .ss-shell{ width:min(var(--ss-shell),100%); margin-inline:auto; padding-inline:var(--ss-pad); } .ss-shell > *{min-width:0} .ss-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .ss-split--tight{grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr)} .ss-split--flip .ss-real__viz{order:-1} /* ═══════════════════════════════════════════════════ 3. TYPOGRAPHIE ═══ */ .ss-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; line-height:1.55; color:var(--ss-gold-text); margin:0 0 1.15rem; } [data-ss-theme="dark"] .ss-eyebrow{color:var(--ss-gold)} .ss-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.55rem,1.1rem + 2.6vw,3.25rem); line-height:1.12;color:#fff; margin:0 0 1.4rem;max-width:27ch; } .ss-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(--ss-deep); margin:0 0 1.2rem;max-width:24ch; } [data-ss-theme="dark"] .ss-h2{color:#fff} .ss-h2--wide{max-width:31ch} .ss-p{ font-size:1.05rem;line-height:1.75; color:var(--ss-body);max-width:58ch;margin:0; } .ss-p + .ss-p{margin-top:1rem} [data-ss-theme="dark"] .ss-p{color:var(--ss-on-dark)} .ss-lead{ font-size:1.12rem;line-height:1.72; color:var(--ss-on-dark);max-width:52ch;margin:0; } /* Précision de périmètre : une réserve explicite, jamais un avertissement. */ .ss-note{ margin:1rem 0 0;padding-left:1rem; border-left:1px solid var(--ss-line); font-size:0.96rem;line-height:1.6; color:var(--ss-body-dim);max-width:52ch; } /* Position de Mosaïca : une ligne tenue, sans emphase publicitaire. */ .ss-stance{ margin:1.6rem 0 0;padding-top:1.15rem; border-top:1px solid var(--ss-line); font-family:'Ibarra Real Nova',serif; font-size:1.14rem;line-height:1.55; color:var(--ss-navy);max-width:54ch; } /* Livrables : une ligne, jamais une carte. */ .ss-result{ margin:1.35rem 0 0;padding-top:1rem; border-top:1px solid var(--ss-line); font-size:1.02rem;line-height:1.65; color:var(--ss-deep);max-width:52ch; } .ss-result b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--ss-gold-text);margin-bottom:0.4rem; } /* ══════════════════════════════════════════════ 4. ACTIONS ET LIENS ═══ */ .ss-actions{display:flex;flex-wrap:wrap;gap:0.85rem 1rem;margin-top:2.1rem} .ss-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; } .ss-btn--gold{background:var(--ss-gold);color:#0a3850;border-color:var(--ss-gold)} .ss-btn--gold:hover{background:#d9b674;border-color:#d9b674;color:#0a3850} .ss-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)} .ss-btn--ghost:hover{border-color:var(--ss-gold);color:var(--ss-gold)} .ss-link{ display:inline-flex;align-items:center;gap:0.55rem; margin-top:1.1rem;min-height:44px; font-size:1rem;font-weight:600; color:var(--ss-gold-text);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .ss-link::after{content:"→";font-weight:400} .ss-link:hover{color:var(--ss-deep)} .ss-page a:focus-visible, .ss-page button:focus-visible{ outline:2px solid var(--ss-gold-dark); outline-offset:3px; } [data-ss-theme="dark"] a:focus-visible{outline-color:var(--ss-gold)} .ss-crumb{ font-size:0.82rem;line-height:1.6; color:rgba(255,255,255,0.62);margin-bottom:1.6rem; } .ss-crumb a{color:rgba(255,255,255,0.82);text-decoration:none} .ss-crumb a:hover{color:var(--ss-gold)} /* ══════════════════════════════════════════ 5. RÉVÉLATIONS (ARMÉES) ═══ */ .ss-anim [data-ss-in="rise"]{ opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } .ss-anim [data-ss-in="rise"].is-in{opacity:1;transform:none} .ss-anim [data-ss-in="rise"][data-ss-delay="1"]{transition-delay:.14s} /* ═════════════════════════════════════════════════ 6. SCHÉMAS (SVG) ═══ */ .ss-page svg{display:block;width:100%;height:auto} .ss-viz-line{fill:none;stroke:var(--ss-stroke);stroke-width:1} .ss-viz-soft{fill:var(--ss-stroke-soft);stroke:var(--ss-stroke-soft);stroke-width:1} .ss-viz-soft path{fill:none} .ss-viz-gold{fill:none;stroke:var(--ss-gold);stroke-width:1.6} .ss-viz-goldfill{fill:var(--ss-gold);stroke:none} .ss-viz-nodefill{fill:var(--ss-node);stroke:none} .ss-viz-relay{fill:#fff;stroke:var(--ss-node);stroke-width:1.4} [data-ss-theme="dark"] .ss-viz-relay{fill:var(--ss-deep)} .ss-viz-band{fill:var(--ss-stroke-soft);opacity:.35} /* Images-clés communes. Chaque règle n'écrit que son état de départ : l'état d'arrivée reste celui de la feuille, donc identique au repos. */ @keyframes ssFade{from{opacity:0}} @keyframes ssRise{from{opacity:0;transform:translateY(8px)}} @keyframes ssPop{from{opacity:0;transform:scale(.4)}} @keyframes ssDraw{from{stroke-dashoffset:var(--ss-len,600)}} @keyframes ssGrowX{from{transform:scaleX(0)}} @keyframes ssGrowY{from{transform:scaleY(0)}} /* ══════════════════════════════════════════════════ 7. ÉCRAN 1 HÉROS ═══ */ .ss-hero{background:var(--ss-deep);overflow:hidden} .ss-hero__inner{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .ss-hero__viz{ position:relative; display:grid; grid-template-columns:minmax(96px,152px) minmax(0,1fr); gap:0.75rem; width:min(100%,520px); margin:0;justify-self:end; } /* Légende HTML : aucun texte essentiel n'est enfermé dans le SVG. */ .ss-hero__legend{position:relative;list-style:none;margin:0;padding:0} .ss-hero__legend li{ position:absolute;right:0;transform:translateY(-50%); display:flex;gap:0.45rem;align-items:baseline; font-size:0.76rem;line-height:1.35;text-align:right; color:var(--ss-on-dark-dim);max-width:100%; } .ss-hero__n{color:var(--ss-gold);font-weight:700;font-size:0.68rem;letter-spacing:0.06em;flex:none} /* Positions calées sur les cinq niveaux du SVG (y = 70, 190, 310, 425 et 540 dans un viewBox de 620 de haut). */ .ss-hero__legend li:nth-child(1){top:11.3%} .ss-hero__legend li:nth-child(2){top:30.6%} .ss-hero__legend li:nth-child(3){top:50%} .ss-hero__legend li:nth-child(4){top:68.5%} .ss-hero__legend li:nth-child(5){top:87.1%} .ss-thread{fill:none;stroke:var(--ss-stroke);stroke-width:1.2} /* L'impulsion dorée : un tracé progressif en `stroke-dashoffset`, donc sans `offset-path` ni repli conditionnel — même rendu dans Chrome et Edge. */ .ss-thread-gold{ fill:none;stroke:var(--ss-gold);stroke-width:1.8; stroke-dasharray:640;stroke-dashoffset:0;opacity:.92; } .ss-anim .ss-thread-gold{animation:ssThread 12s ease-in-out infinite} .ss-anim .ss-hero__svg.is-paused .ss-thread-gold, .ss-anim .ss-hero__svg.is-paused .ss-hero-node{animation-play-state:paused} @keyframes ssThread{ 0%{stroke-dashoffset:640;opacity:.92} 46%{stroke-dashoffset:0;opacity:.92} 84%{stroke-dashoffset:0;opacity:.92} 96%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:640;opacity:0} } /* Chaque niveau s'éclaire au passage de l'impulsion. */ .ss-hero-node{fill:var(--ss-gold);stroke:var(--ss-gold-dark);stroke-width:1} .ss-anim .ss-hero-node{animation:ssNode 12s ease-in-out infinite} .ss-anim .ss-hero-node--2{animation-delay:1.1s} .ss-anim .ss-hero-node--3{animation-delay:2.2s} .ss-anim .ss-hero-node--4{animation-delay:3.3s} .ss-anim .ss-hero-node--5{animation-delay:4.4s} @keyframes ssNode{ 0%,2%{opacity:0} 6%{opacity:1} 84%{opacity:1} 96%,100%{opacity:0} } /* ═══════════════════ 8. ÉCRAN 2 — LES SITUATIONS DÉCLENCHANTES ═══════ Un axe unique, six repères en losange. Ni cartes, ni grille. */ .ss-signals{position:relative;padding-left:2.75rem} .ss-signals__axis{ position:absolute;left:6px;top:0.85rem;bottom:0.85rem;width:1px; background:var(--ss-line); } .ss-signals__axis i{ display:block;height:100%;background:var(--ss-gold); transform:scaleY(1);transform-origin:top center; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .ss-anim .ss-signals__axis i{transform:scaleY(var(--ss-p,0))} .ss-signals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(0.85rem,2.3vh,1.5rem)} .ss-signal{ position:relative; font-size:1.05rem;line-height:1.6; color:var(--ss-body);max-width:47ch; transition:color .5s ease; } .ss-signal__num{ position:absolute;left:-2.75rem;top:0.15em; font-size:0.72rem;font-weight:700;letter-spacing:0.06em; color:var(--ss-gold-text);opacity:.92; } /* Le repère posé sur l'axe : un losange, jamais un point plein. */ .ss-signal::before{ content:"";position:absolute;left:-1.55rem;top:0.66em; width:9px;height:9px; border:1.5px solid var(--ss-stroke); background:#fff; transform:rotate(45deg); transition:background-color .5s ease,border-color .5s ease; } .ss-anim .ss-signal{color:#6b7780} .ss-anim .ss-signal.is-seen{color:var(--ss-body)} .ss-signal.is-lit{color:var(--ss-deep)} .ss-signal.is-lit::before{background:var(--ss-gold);border-color:var(--ss-gold-dark)} /* ═════════════════ 9. ÉCRANS 3 À 7 — LES CINQ NIVEAUX ═══════════════ */ /* assets/styles.css pose `section{overflow-x:hidden}` : sur un
, `hidden` crée un conteneur de défilement et la colonne collante ne se fixe jamais. `clip` protège du débordement sans créer ce conteneur. */ .ss-levels{background:var(--ss-gray1);position:relative;overflow-x:clip} @supports not (overflow:clip){ .ss-levels{overflow-x:visible} } .ss-levels__grid{ display:grid; grid-template-columns:minmax(0,37%) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .ss-levels__aside{ position:sticky; top:calc(var(--nav-h,68px) + clamp(2rem,7vh,4.5rem)); align-self:start; padding-block:clamp(2rem,6vh,3rem); } .ss-levels__chapter{ font-family:'Ibarra Real Nova',serif; font-size:1.15rem;font-weight:600;line-height:1.45; color:var(--ss-navy);margin:0;max-width:23ch; } .ss-rail{position:relative;margin-top:clamp(1.75rem,5vh,2.75rem);padding-left:2rem} .ss-rail__line{position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--ss-line)} .ss-rail__line i{ display:block;height:100%;background:var(--ss-gold); transform:scaleY(1);transform-origin:top center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } .ss-anim .ss-rail__line i{transform:scaleY(var(--ss-p,0))} .ss-rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1rem,3.2vh,1.9rem)} .ss-rail__item{position:relative;display:flex;align-items:baseline;gap:0.6rem;min-height:18px} /* Le repère de niveau : un cercle ouvert qui se remplit quand il est actif. */ .ss-rail__dot{ position:absolute;left:calc(-2rem + 0.5px);top:0.35em; width:11px;height:11px;border-radius:50%; border:1.5px solid var(--ss-stroke);background:var(--ss-gray1); transition:background-color .5s ease,border-color .5s ease,transform .5s ease; } .ss-rail__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.06em; color:var(--ss-gold-text);opacity:.72;flex:none; transition:opacity .5s ease; } .ss-rail__label{ font-size:0.88rem;line-height:1.45; color:var(--ss-body-dim); transition:color .5s ease; } .ss-rail__item.is-past .ss-rail__dot{background:var(--ss-gold);border-color:var(--ss-gold);opacity:.5} .ss-rail__item.is-active .ss-rail__dot{background:var(--ss-gold);border-color:var(--ss-gold-dark);transform:scale(1.25)} .ss-rail__item.is-active .ss-rail__num{opacity:1} .ss-rail__item.is-active .ss-rail__label{color:var(--ss-deep);font-weight:600} .ss-levels__steps{display:block} .ss-level{ min-height:var(--ss-screen); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(2rem,7vh,4rem); } .ss-level__num{ font-size:0.78rem;font-weight:700;letter-spacing:0.14em; color:var(--ss-gold-text);margin:0 0 0.7rem; } .ss-level h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.5rem,1.05rem + 1.9vw,2.4rem); line-height:1.16;color:var(--ss-deep); margin:0 0 1.1rem;max-width:20ch; } .ss-question{ margin:1.7rem 0 0;padding-left:1.15rem; border-left:2px solid var(--ss-gold); font-family:'Ibarra Real Nova',serif; font-size:1.22rem;line-height:1.5; color:var(--ss-navy);max-width:44ch; } .ss-accent{ margin:1.7rem 0 0; font-family:'Ibarra Real Nova',serif; font-size:1.3rem;line-height:1.45; color:var(--ss-deep);max-width:36ch; } .ss-level__mark{display:none} /* ═══════════════ 10. ÉCRANS 8 À 10 — LES TROIS RÉALITÉS ═════════════ */ .ss-real__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(--ss-gold-dark);margin-bottom:0.9rem; } .ss-real__viz{margin:0;width:100%} /* 01 — le réseau et les territoires : une orientation commune, trois déclinaisons locales, un même repère conservé. (1550 ms) */ .ss-anim .is-in .ss-terr-base{stroke-dasharray:var(--ss-len,440);animation:ssDraw 620ms cubic-bezier(.22,.61,.36,1) both} .ss-anim .is-in .ss-terr-track{stroke-dasharray:var(--ss-len,160);animation:ssDraw 460ms cubic-bezier(.22,.61,.36,1) both} .ss-anim .is-in .ss-terr-track--1{animation-delay:480ms} .ss-anim .is-in .ss-terr-track--2{animation-delay:600ms} .ss-anim .is-in .ss-terr-track--3{animation-delay:720ms} .ss-anim .is-in .ss-terr-form{animation:ssFade 380ms ease both} .ss-anim .is-in .ss-terr-form--1{animation-delay:820ms} .ss-anim .is-in .ss-terr-form--2{animation-delay:940ms} .ss-anim .is-in .ss-terr-form--3{animation-delay:1060ms} .ss-anim .is-in .ss-terr-mark{transform-box:fill-box;transform-origin:center;animation:ssPop 300ms cubic-bezier(.22,.61,.36,1) both} .ss-anim .is-in .ss-terr-mark--1{animation-delay:1120ms} .ss-anim .is-in .ss-terr-mark--2{animation-delay:1240ms} .ss-anim .is-in .ss-terr-mark--3{animation-delay:1360ms} /* 02 — les cultures professionnelles : quatre trajectoires se rencontrent sans fusionner. (1600 ms) */ .ss-anim .is-in .ss-cult-origin{transform-box:fill-box;transform-origin:center;animation:ssPop 280ms ease both} .ss-anim .is-in .ss-cult-path{stroke-dasharray:var(--ss-len,470);animation:ssDraw 900ms cubic-bezier(.22,.61,.36,1) 220ms both} .ss-anim .is-in .ss-cult-path--2{animation-delay:320ms} .ss-anim .is-in .ss-cult-path--3{animation-delay:420ms} .ss-anim .is-in .ss-cult-path--4{animation-delay:520ms} .ss-anim .is-in .ss-cult-hub{transform-box:fill-box;transform-origin:center;animation:ssPop 380ms cubic-bezier(.22,.61,.36,1) 1220ms both} .ss-cultures__legend{ list-style:none;margin:1.25rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:0.5rem 1.6rem; } .ss-cultures__legend li{display:flex;align-items:baseline;gap:0.45rem;font-size:0.9rem;color:var(--ss-body-dim)} .ss-cultures__n{font-size:0.7rem;font-weight:700;letter-spacing:0.06em;color:var(--ss-gold-text)} /* 03 — les repères dans la relation : une lecture, trois interprétations, une clarification, un repère commun. (1700 ms) */ .ss-anim .is-in .ss-rel-signal{transform-box:fill-box;transform-origin:center;animation:ssPop 280ms ease both} .ss-anim .is-in .ss-rel-in{stroke-dasharray:var(--ss-len,130);animation:ssDraw 360ms ease 200ms both} .ss-anim .is-in .ss-rel-in--2{animation-delay:280ms} .ss-anim .is-in .ss-rel-in--3{animation-delay:360ms} .ss-anim .is-in .ss-rel-frame{animation:ssFade 320ms ease both} .ss-anim .is-in .ss-rel-frame--1{animation-delay:520ms} .ss-anim .is-in .ss-rel-frame--2{animation-delay:620ms} .ss-anim .is-in .ss-rel-frame--3{animation-delay:720ms} .ss-anim .is-in .ss-rel-out{stroke-dasharray:var(--ss-len,120);animation:ssDraw 360ms ease both} .ss-anim .is-in .ss-rel-out--1{animation-delay:860ms} .ss-anim .is-in .ss-rel-out--2{animation-delay:940ms} .ss-anim .is-in .ss-rel-out--3{animation-delay:1020ms} .ss-anim .is-in .ss-rel-clarify{transform-box:fill-box;transform-origin:center;animation:ssGrowY 380ms cubic-bezier(.22,.61,.36,1) 1180ms both} .ss-anim .is-in .ss-rel-join{stroke-dasharray:var(--ss-len,120);animation:ssDraw 340ms ease 1400ms both} .ss-anim .is-in .ss-rel-common{transform-box:fill-box;transform-origin:center;animation:ssPop 320ms cubic-bezier(.22,.61,.36,1) 1620ms both} /* ═══════════════════════════ 11. ÉCRAN 11 — NOTRE CONVICTION ════════ */ .ss-thesis{margin-bottom:clamp(0.5rem,2vh,1.25rem)} .ss-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(--ss-gold); max-width:46ch;margin:1.35rem 0 0; padding-left:1.15rem;border-left:2px solid var(--ss-gold); } .ss-zones{ position:relative; --ss-zgap:clamp(1.75rem,4vw,3.25rem); display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ss-zgap); margin-top:clamp(2.25rem,6vh,3.5rem); } /* La ligne est portée par la première zone : son origine verticale est alors exactement celle des repères, quelle que soit la répartition des pistes de la grille. */ .ss-zones__line{ position:absolute;top:5px;left:0;height:1px; width:calc(300% + 2 * var(--ss-zgap)); background:rgba(255,255,255,0.18); } .ss-zones__line i{ display:block;height:100%;background:var(--ss-gold); transform-origin:left center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .ss-anim .ss-zones__line i{transform:scaleX(0)} .ss-anim .ss-zones.is-in .ss-zones__line i{transform:scaleX(1)} .ss-zone{position:relative;padding-top:2.25rem} .ss-zone::before{ content:"";position:absolute;top:0;left:0; width:11px;height:11px;margin-top:-5px;border-radius:50%; background:var(--ss-gold); } .ss-zone h3{ font-family:'Space Grotesk',sans-serif; font-size:0.82rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--ss-gold);margin:0 0 0.9rem;line-height:1.5; } .ss-zone p{font-size:1.02rem;line-height:1.7;color:var(--ss-on-dark);margin:0} .ss-anim .ss-zone{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1)} .ss-anim .is-in .ss-zone{opacity:1;transform:none} .ss-anim .is-in .ss-zone:nth-child(2){transition-delay:.22s} .ss-anim .is-in .ss-zone:nth-child(3){transition-delay:.44s} /* ════════════════════════════════ 12. ÉCRAN 12 — LA MÉTHODE ═════════ */ .ss-method__grid{ display:grid; grid-template-columns:minmax(0,1.38fr) minmax(0,0.62fr); gap:clamp(2rem,4vw,3.25rem); align-items:center; } .ss-steps{ list-style:none;margin:clamp(1.15rem,2.4vh,1.5rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); } .ss-step{position:relative;padding-top:0.95rem;border-top:1px solid var(--ss-line)} .ss-step__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.12em; color:var(--ss-gold-text);opacity:.75; transition:opacity .5s ease; } .ss-step h3{ font-family:'Ibarra Real Nova',serif; font-size:1.28rem;font-weight:700;line-height:1.25; color:var(--ss-deep);margin:0.35rem 0 0.5rem; transition:color .5s ease; } .ss-step p{font-size:1rem;line-height:1.6;color:var(--ss-body);margin:0;transition:color .5s ease} .ss-step::after{ content:"";position:absolute;top:-1px;left:0;width:100%;height:1px; background:var(--ss-gold); transform:scaleX(0);transform-origin:left center; transition:transform .6s cubic-bezier(.22,.61,.36,1); } .ss-step.is-done::after{transform:scaleX(1)} .ss-anim .ss-step h3{color:var(--ss-body-dim)} .ss-anim .ss-step p{color:var(--ss-body-dim)} .ss-step.is-done h3{color:var(--ss-deep)} .ss-step.is-done p{color:var(--ss-body)} .ss-step.is-done .ss-step__num{opacity:1} .ss-method__tag{ margin:clamp(1rem,2.2vh,1.4rem) 0 0; font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase; color:var(--ss-body-dim); } /* Le trajet suivi : cinq maillons, de l'orientation à la rencontre. */ .ss-chain{position:relative;padding-left:1.75rem} .ss-chain__title{ font-family:'Ibarra Real Nova',serif; font-size:1.02rem;line-height:1.5; color:var(--ss-navy);margin:0 0 1.35rem; } .ss-chain__list{list-style:none;margin:0;padding:0;position:relative} .ss-chain__list::before{ content:"";position:absolute;left:calc(-1.75rem + 5px);top:0.9em;bottom:0.9em;width:1px; background:var(--ss-line); } .ss-chain__link{ position:relative;padding:0.7rem 0; font-size:1rem;line-height:1.45;color:var(--ss-body); } .ss-chain__link + .ss-chain__link{border-top:1px solid var(--ss-line)} .ss-chain__dot{ position:absolute;left:-1.75rem;top:1.05em; width:11px;height:11px;margin-top:-5px;border-radius:50%; border:1px solid var(--ss-gold-dark);background:var(--ss-gold); } .ss-anim .ss-chain__link{opacity:0;transform:translateX(-8px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)} .ss-anim .is-in .ss-chain__link{opacity:1;transform:none} .ss-anim .is-in .ss-chain__link:nth-child(2){transition-delay:.12s} .ss-anim .is-in .ss-chain__link:nth-child(3){transition-delay:.24s} .ss-anim .is-in .ss-chain__link:nth-child(4){transition-delay:.36s} .ss-anim .is-in .ss-chain__link:nth-child(5){transition-delay:.48s} /* ══════════════════════ 13. ÉCRAN 13 — LES TROIS FAÇONS D'AGIR ══════ */ .ss-acts{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); align-items:center; } .ss-acts.ss-tabs-ready{grid-template-columns:minmax(0,330px) minmax(0,1fr)} .ss-acts__aside{align-self:center} .ss-acts__lead{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem);max-width:20ch;margin-bottom:0} .ss-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(--ss-body-dim); } .ss-tabs-ready .ss-acts__hint{display:block} .ss-acts__rail{display:none;flex-direction:column} .ss-tabs-ready .ss-acts__rail{display:flex} .ss-choice{ position:relative;display:block;width:100%; appearance:none;-webkit-appearance:none; background:none;border:0; border-bottom:1px solid var(--ss-line); padding:0;min-height:48px; text-align:left;cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .28s ease; } .ss-choice::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--ss-gold); transform:scaleY(0);transform-origin:center; transition:transform .28s ease; } .ss-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); } .ss-choice__num{ font-size:0.8rem;font-weight:700;letter-spacing:0.08em; color:var(--ss-gold-text);opacity:.92; transition:opacity .28s ease; } .ss-choice__name{ font-family:'Ibarra Real Nova',serif; font-size:1.18rem;line-height:1.25;font-weight:600; color:var(--ss-body); transition:color .28s ease; } .ss-choice__state{ font-size:0.68rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--ss-body-dim);white-space:nowrap; transition:color .28s ease; } .ss-choice__on{display:none} .ss-choice__off{display:inline} .ss-choice:hover .ss-choice__name{color:var(--ss-deep)} .ss-choice:hover .ss-choice__state{color:var(--ss-gold-text)} .ss-choice:hover .ss-choice__num{opacity:1} .ss-choice:hover{border-bottom-color:var(--ss-gold)} .ss-choice:hover .ss-choice__inner{transform:translateX(4px)} .ss-choice[aria-selected="true"]{border-bottom-color:var(--ss-gold)} .ss-choice[aria-selected="true"]::before{transform:scaleY(1)} .ss-choice[aria-selected="true"] .ss-choice__num{opacity:1} .ss-choice[aria-selected="true"] .ss-choice__name{color:var(--ss-deep)} .ss-choice[aria-selected="true"] .ss-choice__state{color:var(--ss-gold-text)} .ss-choice[aria-selected="true"] .ss-choice__on{display:inline} .ss-choice[aria-selected="true"] .ss-choice__off{display:none} .ss-choice[aria-selected="true"]:hover .ss-choice__inner{transform:none} .ss-acts-scene{padding-block:clamp(2.25rem,4.5vh,3.5rem)} .ss-acts__panel{ display:grid; /* Colonne de texte large : le volet le plus dense — celui qui porte la precision de perimetre — doit tenir dans un ecran comme les deux autres, sinon changer d'onglet deplacerait la mise en page. */ grid-template-columns:minmax(0,1.32fr) minmax(0,0.68fr); gap:clamp(1.75rem,3.5vw,3rem); align-items:center; } .ss-acts__panel[hidden]{display:none} .ss-acts__panel + .ss-acts__panel{margin-top:clamp(2.5rem,6vh,3.5rem)} .ss-tabs-ready .ss-acts__panel + .ss-acts__panel{margin-top:0} .ss-acts__title{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem); line-height:1.22;color:var(--ss-deep); margin:0 0 1rem;max-width:26ch; } .ss-acts__viz{margin:0;width:100%} /* ── Animation propre à chaque schéma d'intervention ───────────────── L'état de repos est l'état final ; l'animation n'existe que le temps où le volet porte `.is-active.is-animating`, classe posée après deux cycles de rendu et retirée avant chaque nouvelle activation. Un volet masqué ne peut donc jamais s'animer en arrière-plan. */ .ss-diag-var{transform-box:fill-box;transform-origin:left center} .ss-diag-scan{transform-box:fill-box;transform-origin:center} .ss-align-base{transform-box:fill-box;transform-origin:left center} .ss-rel-clarify{transform-box:fill-box;transform-origin:center} /* 01 — Diagnostiquer : la lecture traverse les cinq niveaux, trois variations se signalent, les priorités se relient. (1520 ms) */ .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-lvl{animation:ssFade 340ms ease both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-lvl:nth-child(2){animation-delay:70ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-lvl:nth-child(3){animation-delay:140ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-lvl:nth-child(4){animation-delay:210ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-lvl:nth-child(5){animation-delay:280ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-scan{animation:ssGrowY 900ms cubic-bezier(.3,.7,.3,1) 160ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-var--1{animation:ssGrowX 300ms cubic-bezier(.22,.61,.36,1) 520ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-var--2{animation:ssGrowX 300ms cubic-bezier(.22,.61,.36,1) 700ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-var--3{animation:ssGrowX 300ms cubic-bezier(.22,.61,.36,1) 880ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-diag-read{stroke-dasharray:var(--ss-len,340);animation:ssDraw 460ms cubic-bezier(.22,.61,.36,1) 1060ms both} /* 02 — Aligner : quatre niveaux gardent leur origine et rejoignent une base commune, confirmée par quatre repères. (1450 ms) */ .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-origin{transform-box:fill-box;transform-origin:center;animation:ssPop 260ms ease both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-track{stroke-dasharray:var(--ss-len,330);animation:ssDraw 760ms cubic-bezier(.22,.61,.36,1) 180ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-track--2{animation-delay:280ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-track--3{animation-delay:380ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-track--4{animation-delay:480ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-base{animation:ssGrowX 420ms cubic-bezier(.22,.61,.36,1) 900ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-node{transform-box:fill-box;transform-origin:center;animation:ssPop 240ms ease both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-node--1{animation-delay:1030ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-node--2{animation-delay:1130ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-node--3{animation-delay:1230ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-align-node--4{animation-delay:1330ms} /* 03 — Développer : le repère devient explicite, puis rejoint l'équipe entière. (1720 ms) */ .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-down{stroke-dasharray:var(--ss-len,112);animation:ssDraw 380ms cubic-bezier(.22,.61,.36,1) 140ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-strong{stroke-dasharray:var(--ss-len,230);animation:ssDraw 620ms cubic-bezier(.22,.61,.36,1) 460ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-net path{stroke-dasharray:var(--ss-len,150);animation:ssDraw 520ms cubic-bezier(.22,.61,.36,1) 1000ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-team circle{transform-box:fill-box;transform-origin:center;animation:ssPop 240ms ease 1160ms both} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-team circle:nth-child(2){animation-delay:1240ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-team circle:nth-child(3){animation-delay:1320ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-team circle:nth-child(4){animation-delay:1400ms} .ss-anim .ss-tabs-ready .ss-acts__panel.is-active.is-animating .ss-dev-team circle:nth-child(5){animation-delay:1480ms} /* ════════════════════════════ 14. ÉCRAN 14 — PREUVE D'EXPERTISE ═════ */ .ss-proof__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .ss-proof__media{margin:0} .ss-proof__media img{ display:block;width:100%;height:auto; /* Ratio natif conservé : aucun visage n'est recadré. */ border-top:2px solid var(--ss-gold); } .ss-proof__media figcaption{ margin-top:0.9rem; font-size:0.86rem;line-height:1.55; color:var(--ss-body-dim); } /* ═══════════════════════════════════ 15. ÉCRAN 15 — CONCLUSION ══════ */ .ss-end{background:var(--ss-deep);overflow:hidden} /* Des trajectoires qui se rapprochent : deux trames fines, légèrement convergentes. Aucune image, aucun flou, aucun symbole. */ .ss-end__texture{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(80deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 34px), repeating-linear-gradient(100deg,rgba(255,255,255,0.04) 0 1px,transparent 1px 34px); opacity:.8; } .ss-end__inner{position:relative} .ss-end__strong{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem); line-height:1.45;color:var(--ss-gold); margin:0 0 1.5rem;max-width:36ch; } .ss-end__sign{ font-size:1.02rem;line-height:1.7; color:var(--ss-on-dark-dim);max-width:52ch;margin:0; } /* ══════════════════════ 16. 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. */ .ss-chapters{display:none} .ss-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem} .ss-chapters a{ position:relative;display:flex;align-items:center;gap:0.75rem; 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; } .ss-chapters__dot{ flex:none;width:9px;height:9px;border-radius:50%; border:1.5px solid currentColor; transition:background-color .4s ease,border-color .4s ease,transform .4s ease; } .ss-chapters a:hover{color:var(--ss-gold-dark)} .ss-chapters a.is-active{color:var(--ss-deep)} .ss-chapters a.is-active .ss-chapters__dot{background:var(--ss-gold);border-color:var(--ss-gold-dark);transform:scale(1.2)} .ss-chapters__track{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:rgba(10,56,80,0.16)} .ss-chapters__track i{ display:block;height:100%;background:var(--ss-gold); transform:scaleY(var(--ss-p,0));transform-origin:top center; transition:transform .3s linear; } .ss-chapters.is-on-dark a{color:rgba(255,255,255,0.66)} .ss-chapters.is-on-dark a:hover{color:var(--ss-gold)} .ss-chapters.is-on-dark a.is-active{color:#fff} .ss-chapters.is-on-dark .ss-chapters__track{background:rgba(255,255,255,0.22)} .ss-chapters.is-on-dark a:focus-visible{outline-color:var(--ss-gold)} @media(min-width:1200px){ .ss-js .ss-chapters{ display:block;position:fixed; top:50%;right:clamp(0.75rem,1.4vw,1.5rem); transform:translateY(-50%); z-index:60;padding-left:0.5rem; } /* 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. */ .ss-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){ .ss-chapters__label{ position:static;width:auto;height:auto; margin:0;overflow:visible;clip-path:none; } } /* ═══════════════ 17. ORDINATEUR PORTABLE PEU HAUT (≤ 840px) ═════════ */ @media(min-width:1081px) and (max-height:840px){ .ss-scene{padding-block:clamp(1.75rem,3.4vh,2.75rem)} .ss-acts-scene{padding-block:clamp(1.4rem,2.8vh,2.25rem)} .ss-acts.ss-tabs-ready{grid-template-columns:minmax(0,300px) minmax(0,1fr)} .ss-acts__hint{margin-top:clamp(1.1rem,2.5vh,1.6rem)} .ss-acts__title{margin-bottom:0.75rem;max-width:31ch} .ss-acts__panel .ss-eyebrow{margin-bottom:0.75rem} .ss-acts__panel .ss-result{margin-top:0.9rem;padding-top:0.7rem} .ss-acts__panel .ss-link{margin-top:0.7rem} .ss-acts__panel .ss-note{margin-top:0.75rem} .ss-hero__viz{width:min(100%,470px)} .ss-steps{gap:clamp(1rem,2vw,1.5rem)} .ss-method__tag{margin-top:1.25rem} .ss-stance{margin-top:1.2rem;padding-top:0.9rem} } /* ═════════════════════════════════════ 18. TABLETTE (≤ 1080px) ══════ */ @media(max-width:1080px){ .ss-hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .ss-hero__viz{justify-self:start;width:min(100%,440px)} .ss-split,.ss-split--tight{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .ss-split--flip .ss-real__viz{order:0} .ss-real__viz{width:min(100%,560px)} .ss-levels__grid{grid-template-columns:minmax(0,1fr)} .ss-method__grid{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vh,2.75rem)} .ss-chain{max-width:560px} /* Le fil des trois zones passe à la verticale : les zones n'ont plus la même hauteur, la première ne peut donc plus le porter. */ .ss-zones{grid-template-columns:minmax(0,1fr);gap:2rem;padding-left:2rem} .ss-zones__line{display:none} .ss-zone{padding-top:0} .ss-zone::before{top:0.5em;left:-2rem;margin-top:0} .ss-zones::before, .ss-zones::after{content:"";position:absolute;top:6px;bottom:6px;left:5px;width:1px} .ss-zones::before{background:rgba(255,255,255,0.18)} .ss-zones::after{ background:var(--ss-gold); transform-origin:top center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .ss-anim .ss-zones::after{transform:scaleY(0)} .ss-anim .ss-zones.is-in::after{transform:scaleY(1)} /* Les trois façons d'agir : trois lignes pleine largeur. */ .ss-acts.ss-tabs-ready{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .ss-acts__lead{max-width:24ch} .ss-choice{border:1px solid var(--ss-line);border-left-width:2px;background:#fff;margin-bottom:0.5rem} .ss-choice::before{width:2px;left:-2px} .ss-choice__inner{min-height:52px;padding:0.85rem 1rem} .ss-choice:hover .ss-choice__inner{transform:none} .ss-acts__panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .ss-acts__viz{width:min(100%,420px)} .ss-proof__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .ss-proof__media{max-width:560px} } /* ═════════════════════════════════════ 19. TÉLÉPHONE (≤ 900px) ══════ */ @media(max-width:900px){ /* Le récit redevient une succession de sections verticales. */ .ss-levels__aside{position:static;padding-block:0;margin-bottom:1.5rem} .ss-rail{display:none} .ss-levels__grid{gap:0} .ss-levels{padding-top:clamp(3rem,7vh,4rem)} .ss-level{min-height:var(--ss-screen);padding-block:clamp(2.5rem,6vh,3.5rem);position:relative} .ss-level:first-child{min-height:calc(var(--ss-screen) - 6.5rem)} /* Repère de niveau propre au téléphone : au-dessus du texte. */ .ss-level__mark{display:block;position:relative;height:30px;margin-bottom:1.1rem} .ss-level__mark::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--ss-line)} .ss-level__mark i{position:absolute;left:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ss-gold)} .ss-hero__inner{gap:1.75rem} .ss-hero__viz{width:min(100%,330px);grid-template-columns:minmax(84px,112px) minmax(0,1fr)} .ss-steps{grid-template-columns:minmax(0,1fr);gap:1.5rem} .ss-signals{padding-left:2.5rem} .ss-signal__num{left:-2.5rem} .ss-signal::before{left:-1.4rem} .ss-actions{gap:0.75rem} .ss-btn{width:100%} /* --- REPRISE DE LA HIÉRARCHIE TYPOGRAPHIQUE ---------------------- assets/mobile-premium.css 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 — et toute la hiérarchie disparaîtrait. On rend ici ses tailles à la page : le texte courant reste à 16px minimum, aucun libellé ne descend sous 13px. */ .ss-page .ss-p, .ss-page .ss-zone p, .ss-page .ss-step p, .ss-page .ss-end__sign{font-size:16px !important;line-height:1.7 !important} .ss-page .ss-lead{font-size:17px !important;line-height:1.7 !important} .ss-page .ss-signal{font-size:16px !important;line-height:1.6 !important} .ss-page .ss-question{font-size:18px !important} .ss-page .ss-accent{font-size:19px !important} .ss-page .ss-result{font-size:16px !important} .ss-page .ss-result b{font-size:13px !important} .ss-page .ss-note{font-size:15px !important;line-height:1.6 !important} .ss-page .ss-stance{font-size:17px !important;line-height:1.55 !important} .ss-page .ss-eyebrow{font-size:13.5px !important;letter-spacing:0.13em} .ss-page .ss-crumb, .ss-page .ss-crumb a{font-size:13px !important} .ss-page .ss-btn, .ss-page .ss-link{font-size:16px !important} .ss-page .ss-level h3{font-size:clamp(1.45rem,5.6vw,1.9rem) !important;line-height:1.18 !important} .ss-page .ss-level__num{font-size:13px !important} .ss-page .ss-step h3{font-size:19px !important} .ss-page .ss-step__num{font-size:13px !important} .ss-page .ss-zone h3{font-size:14px !important;letter-spacing:0.13em} .ss-page .ss-levels__chapter{font-size:17px !important;line-height:1.45 !important} .ss-page .ss-real__num{font-size:clamp(2.1rem,9vw,2.8rem) !important} .ss-page .ss-end__strong{font-size:clamp(1.2rem,5vw,1.5rem) !important} .ss-page .ss-method__tag{font-size:13px !important;letter-spacing:0.08em} .ss-page .ss-chain__title{font-size:16px !important;line-height:1.5 !important} .ss-page .ss-chain__link{font-size:16px !important} .ss-page .ss-signal__num, .ss-page .ss-hero__n, .ss-page .ss-cultures__n{font-size:13px !important} .ss-page .ss-hero__legend li, .ss-page .ss-cultures__legend li{font-size:14px !important} .ss-page .ss-acts__title{font-size:clamp(1.3rem,5vw,1.6rem) !important;line-height:1.22 !important} .ss-page .ss-thesis__claim{font-size:clamp(1.15rem,4.6vw,1.45rem) !important;line-height:1.42 !important} .ss-page .ss-choice__name{font-size:18px !important;line-height:1.25 !important} .ss-page .ss-choice__num{font-size:13px !important} .ss-page .ss-choice__state{font-size:11.5px !important;letter-spacing:0.14em} .ss-page .ss-acts__hint{font-size:13px !important;letter-spacing:0.16em} .ss-page .ss-proof__media figcaption{font-size:14px !important} } @media(max-width:640px){ /* Sur téléphone, la légende passe sous le schéma : celui-ci récupère toute la largeur et ses traits fins restent lisibles. */ .ss-hero__viz{width:min(100%,300px);grid-template-columns:minmax(0,1fr);gap:1.15rem} .ss-hero__legend{position:static;order:2;display:grid;grid-template-columns:minmax(0,1fr);gap:0.4rem} .ss-hero__legend li{position:static;transform:none;text-align:left;justify-content:flex-start;max-width:none} .ss-scene{padding-block:clamp(2.5rem,6vh,3.5rem)} .ss-cultures__legend{gap:0.45rem 1.2rem} } @media(max-width:420px){ .ss-hero__viz{width:min(100%,278px)} .ss-signals{padding-left:2.25rem} .ss-signal__num{left:-2.25rem} } /* 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){ .ss-scene,.ss-level,.ss-level:first-child{min-height:0} .ss-scene{padding-block:clamp(2rem,8vh,3rem)} } /* ═══════════════════ 20. VERSION SANS MOUVEMENT (COMPLÈTE) ══════════ */ /* Toute l'information apparaît immédiatement, dans son état final, et aucun déplacement notable ne se produit. Les interactions restent entièrement disponibles. */ @media(prefers-reduced-motion:reduce){ .ss-page *, .ss-page *::before, .ss-page *::after{ animation:none !important; transition:none !important; } .ss-page [data-ss-in="rise"], .ss-page [data-ss-in="rise"].is-in, .ss-page .ss-zone, .ss-page .ss-chain__link{opacity:1 !important;transform:none !important} .ss-page .ss-signal{color:var(--ss-body) !important} .ss-page .ss-signals__axis i, .ss-page .ss-rail__line i, .ss-page .ss-rel-clarify, .ss-page .ss-diag-scan{transform:scaleY(1) !important} .ss-page .ss-zones__line i, .ss-page .ss-diag-var, .ss-page .ss-align-base, .ss-page .ss-step::after{transform:scaleX(1) !important} .ss-page .ss-terr-base, .ss-page .ss-terr-track, .ss-page .ss-cult-path, .ss-page .ss-rel-in, .ss-page .ss-rel-out, .ss-page .ss-rel-join, .ss-page .ss-diag-read, .ss-page .ss-align-track, .ss-page .ss-dev-strong, .ss-page .ss-dev-down, .ss-page .ss-dev-net path{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .ss-page .ss-terr-mark, .ss-page .ss-cult-hub, .ss-page .ss-cult-origin, .ss-page .ss-rel-signal, .ss-page .ss-rel-common, .ss-page .ss-align-origin, .ss-page .ss-align-node, .ss-page .ss-dev-team circle, .ss-page .ss-hero-node{opacity:1 !important;transform:none !important} .ss-page .ss-thread-gold{stroke-dasharray:none !important;stroke-dashoffset:0 !important;opacity:.92 !important} } @media(prefers-reduced-motion:reduce) and (max-width:1080px){ .ss-page .ss-zones::after{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. */ .ss-chapters.is-out{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .ss-chapters{transition:opacity .28s ease} @media(prefers-reduced-motion:reduce){ .ss-chapters,.ss-chapters.is-out{transition:none} }