/* ========================================================================= MOSAÏCA — FORÊT, BOIS ET TRANSFORMATION ------------------------------------------------------------------------- Feuille chargée UNIQUEMENT par industries/foret-bois-transformation.html. Toutes les règles sont préfixées `fb-` et confinées à `.fb-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.fb-anim`, classe posée par le filet du et confirmée par le script. SIGNATURE GRAPHIQUE Un fil continu, des repères de relais (traits courts), des couches successives et des passages franchis. Aucune illustration littérale. PALETTE : variables globales de assets/styles.css. Deux teintes de service, absentes du global : --fb-gold-text doré assombri, lisible sur fond clair (≥ 6:1) --fb-body gris-bleu de lecture (≥ 8:1 sur blanc) ========================================================================= */ /* ═════════════════════════════════════════════════════════ 1. JETONS ═══ */ .fb-page{ --fb-navy:var(--navy,#0e4d6c); --fb-deep:var(--navy-deep,#0a3850); --fb-gold:var(--gold,#C9A45C); --fb-gold-dark:var(--gold-dark,#A9803F); --fb-gold-text:#7a5a24; --fb-gray1:var(--gray1,#F8F9FA); --fb-body:#3d4a52; --fb-body-dim:#5c6a72; --fb-on-dark:rgba(255,255,255,0.84); --fb-on-dark-dim:rgba(255,255,255,0.66); --fb-line:rgba(10,56,80,0.14); --fb-stroke:rgba(10,56,80,0.34); --fb-stroke-soft:rgba(10,56,80,0.16); --fb-node:#0a3850; --fb-shell:1180px; --fb-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. */ --fb-screen:calc(100vh - var(--nav-h,68px)); font-family:'Space Grotesk',sans-serif; color:var(--fb-body); } @supports (height:100svh){ .fb-page{--fb-screen:calc(100svh - var(--nav-h,68px))} } .fb-page [data-fb-theme="dark"]{ --fb-stroke:rgba(255,255,255,0.36); --fb-stroke-soft:rgba(255,255,255,0.16); --fb-node:rgba(255,255,255,0.88); --fb-line:rgba(255,255,255,0.18); } /* Les ancres de chapitre ne passent jamais sous la barre fixe. */ /* `--nav-h` de assets/styles.css n'est qu'une valeur théorique : la barre rendue est souvent plus haute (police chargée, zoom, libellé long). Le script publie la hauteur réellement mesurée dans `--fb-nav-h` ; on la consomme en priorité pour qu'aucun titre de section ne se retrouve partiellement sous le header à l'arrivée sur une ancre. */ .fb-page [id]{scroll-margin-top:calc(var(--fb-nav-h,var(--nav-h,68px)) + 1.5rem)} /* ═══════════════════════════════════════════ 2. SCÈNE ET CONTENEUR ═════ */ .fb-scene{ position:relative; min-height:var(--fb-screen); display:flex; align-items:center; padding-block:clamp(3rem,7vh,5.5rem); } .fb-scene--white{background:#fff} .fb-scene--gray{background:var(--fb-gray1)} .fb-scene--navy{background:var(--fb-deep)} .fb-shell{ width:min(var(--fb-shell),100%); margin-inline:auto; padding-inline:var(--fb-pad); } .fb-shell > *{min-width:0} .fb-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .fb-split--tight{grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr)} .fb-split--flip .fb-real__viz{order:-1} /* ═══════════════════════════════════════════════════ 3. TYPOGRAPHIE ═══ */ .fb-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; line-height:1.55; color:var(--fb-gold-text); margin:0 0 1.15rem; } [data-fb-theme="dark"] .fb-eyebrow{color:var(--fb-gold)} .fb-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; } .fb-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(--fb-deep); margin:0 0 1.2rem;max-width:24ch; } [data-fb-theme="dark"] .fb-h2{color:#fff} .fb-h2--wide{max-width:31ch} .fb-p{ font-size:1.05rem;line-height:1.75; color:var(--fb-body);max-width:58ch;margin:0; } .fb-p + .fb-p{margin-top:1rem} [data-fb-theme="dark"] .fb-p{color:var(--fb-on-dark)} .fb-lead{ font-size:1.12rem;line-height:1.72; color:var(--fb-on-dark);max-width:52ch;margin:0; } /* Livrables : une ligne, jamais une carte. */ .fb-result{ margin:1.35rem 0 0;padding-top:1rem; border-top:1px solid var(--fb-line); font-size:1.02rem;line-height:1.65; color:var(--fb-deep);max-width:52ch; } .fb-result b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--fb-gold-text);margin-bottom:0.4rem; } /* ══════════════════════════════════════════════ 4. ACTIONS ET LIENS ═══ */ .fb-actions{display:flex;flex-wrap:wrap;gap:0.85rem 1rem;margin-top:2.1rem} .fb-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; } .fb-btn--gold{background:var(--fb-gold);color:#0a3850;border-color:var(--fb-gold)} .fb-btn--gold:hover{background:#d9b674;border-color:#d9b674;color:#0a3850} .fb-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)} .fb-btn--ghost:hover{border-color:var(--fb-gold);color:var(--fb-gold)} .fb-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(--fb-gold-text);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .fb-link::after{content:"→";font-weight:400} .fb-link:hover{color:var(--fb-deep)} .fb-page a:focus-visible, .fb-page button:focus-visible{ outline:2px solid var(--fb-gold-dark); outline-offset:3px; } [data-fb-theme="dark"] a:focus-visible{outline-color:var(--fb-gold)} .fb-crumb{ font-size:0.82rem;line-height:1.6; color:rgba(255,255,255,0.62);margin-bottom:1.6rem; } .fb-crumb a{color:rgba(255,255,255,0.82);text-decoration:none} .fb-crumb a:hover{color:var(--fb-gold)} /* ══════════════════════════════════════════ 5. RÉVÉLATIONS (ARMÉES) ═══ */ .fb-anim [data-fb-in="rise"]{ opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } .fb-anim [data-fb-in="rise"].is-in{opacity:1;transform:none} .fb-anim [data-fb-in="rise"][data-fb-delay="1"]{transition-delay:.14s} /* ═════════════════════════════════════════════════ 6. SCHÉMAS (SVG) ═══ */ .fb-page svg{display:block;width:100%;height:auto} .fb-viz-line{fill:none;stroke:var(--fb-stroke);stroke-width:1} .fb-viz-soft{fill:var(--fb-stroke-soft);stroke:var(--fb-stroke-soft);stroke-width:1} .fb-viz-soft path{fill:none} .fb-viz-gold{fill:none;stroke:var(--fb-gold);stroke-width:1.6} .fb-viz-goldfill{fill:var(--fb-gold);stroke:none} .fb-viz-nodefill{fill:var(--fb-node);stroke:none} .fb-viz-relay{fill:none;stroke:var(--fb-node);stroke-width:2.4} /* ══════════════════════════════════════════════════ 7. ÉCRAN 1 HÉROS ═══ */ .fb-hero{background:var(--fb-deep);overflow:hidden} .fb-hero__inner{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .fb-hero__viz{ position:relative; display:grid; grid-template-columns:minmax(96px,150px) 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. */ .fb-hero__legend{position:relative;list-style:none;margin:0;padding:0} .fb-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(--fb-on-dark-dim); max-width:100%; } .fb-hero__n{color:var(--fb-gold);font-weight:700;font-size:0.68rem;letter-spacing:0.06em;flex:none} /* Positions calées sur les cinq environnements du SVG (y = 75, 182, 290, 397 et 507 dans un viewBox de 620 de haut). */ .fb-hero__legend li:nth-child(1){top:12.1%} .fb-hero__legend li:nth-child(2){top:29.35%} .fb-hero__legend li:nth-child(3){top:46.77%} .fb-hero__legend li:nth-child(4){top:64.03%} .fb-hero__legend li:nth-child(5){top:81.77%} .fb-thread{fill:none;stroke:var(--fb-stroke);stroke-width:1.2} /* L'impulsion suit exactement le fil : elle ne peut pas s'en écarter. Sans `offset-path`, le repère est simplement retiré et le fil reste entièrement lisible. */ .fb-pulse{display:none} .fb-pulse rect{fill:var(--fb-gold)} @supports (offset-path:path("M0 0H1")){ .fb-pulse{ display:block; offset-path:path("M120 75 C170 108 190 145 220 182 C248 222 140 252 110 290 C82 338 258 358 280 397 C305 448 165 470 140 507"); offset-rotate:0deg; offset-distance:100%; } .fb-anim .fb-pulse{animation:fbPulse 11s cubic-bezier(.45,0,.55,1) infinite} .fb-anim .fb-hero__svg.is-paused .fb-pulse{animation-play-state:paused} } /* À chaque passage de relais, le repère change légèrement de forme sans jamais disparaître. */ @keyframes fbPulse{ 0%{offset-distance:0%;transform:scale(1)} 8%{transform:scale(.72)} 22%{offset-distance:25%;transform:scale(1.12)} 30%{transform:scale(.82)} 46%{offset-distance:50%;transform:scale(1.1)} 54%{transform:scale(.78)} 70%{offset-distance:75%;transform:scale(1.12)} 78%{transform:scale(.85)} 92%{offset-distance:100%;transform:scale(1)} 100%{offset-distance:100%;transform:scale(1)} } /* ═══════════════════ 8. ÉCRAN 2 — LES SITUATIONS DÉCLENCHANTES ════════ Un axe unique en pointillé — la chaîne — dont la portion parcourue devient un trait doré continu. Six maillons, aucune carte. */ .fb-signals{position:relative;padding-left:2.75rem} .fb-signals__axis{ position:absolute;left:5px;top:0.8rem;bottom:0.8rem;width:1px; background-image:linear-gradient(var(--fb-line) 60%,transparent 0); background-size:1px 9px; } .fb-signals__axis i{ display:block;height:100%; background:var(--fb-gold); transform:scaleY(1);transform-origin:top center; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .fb-anim .fb-signals__axis i{transform:scaleY(var(--fb-p,0))} .fb-signals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(0.85rem,2.3vh,1.5rem)} .fb-signal{ position:relative; font-size:1.05rem;line-height:1.6; color:var(--fb-body);max-width:47ch; transition:color .5s ease; } .fb-signal__num{ position:absolute;left:-2.75rem;top:0.15em; font-size:0.72rem;font-weight:700;letter-spacing:0.06em; color:var(--fb-gold-text);opacity:.9; transition:opacity .4s ease; } /* Le repère de relais posé sur l'axe. */ .fb-signal::before{ content:"";position:absolute;left:-1.55rem;top:0.72em; width:14px;height:2px; background:var(--fb-stroke); transition:background-color .5s ease; } .fb-anim .fb-signal{color:#6b7780} .fb-anim .fb-signal.is-seen{color:var(--fb-body)} .fb-signal.is-lit{color:var(--fb-deep)} .fb-signal.is-lit::before{background:var(--fb-gold);width:20px} /* ═════════════════ 9. ÉCRANS 3 À 7 — LES CINQ PASSAGES ═══════════════ */ /* 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. */ .fb-passages{background:#fff;position:relative;overflow-x:clip} @supports not (overflow:clip){ .fb-passages{overflow-x:visible} } .fb-passages__grid{ display:grid; grid-template-columns:minmax(0,37%) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .fb-passages__aside{ position:sticky; top:calc(var(--nav-h,68px) + clamp(2rem,7vh,4.5rem)); align-self:start; padding-block:clamp(2rem,6vh,3rem); } .fb-passages__chapter{ font-family:'Ibarra Real Nova',serif; font-size:1.15rem;font-weight:600;line-height:1.45; color:var(--fb-navy);margin:0;max-width:23ch; } .fb-rail{position:relative;margin-top:clamp(1.75rem,5vh,2.75rem);padding-left:2rem} .fb-rail__line{position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--fb-line)} .fb-rail__line i{ display:block;height:100%;background:var(--fb-gold); transform:scaleY(1);transform-origin:top center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } .fb-anim .fb-rail__line i{transform:scaleY(var(--fb-p,0))} .fb-rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1rem,3.2vh,1.9rem)} .fb-rail__item{position:relative;display:flex;align-items:baseline;gap:0.6rem;min-height:18px} /* Le repère de relais : un trait court, jamais un point. */ .fb-rail__mark{ position:absolute;left:-2rem;top:0.55em; width:15px;height:2px;background:var(--fb-stroke); transition:background-color .5s ease,width .5s ease; } .fb-rail__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.06em; color:var(--fb-gold-text);opacity:.7;flex:none; transition:opacity .5s ease; } .fb-rail__label{ font-size:0.88rem;line-height:1.45; color:var(--fb-body-dim); transition:color .5s ease; } .fb-rail__item.is-past .fb-rail__mark{background:var(--fb-gold);opacity:.55} .fb-rail__item.is-active .fb-rail__mark{background:var(--fb-gold);width:24px} .fb-rail__item.is-active .fb-rail__num{opacity:1} .fb-rail__item.is-active .fb-rail__label{color:var(--fb-deep);font-weight:600} .fb-passages__steps{display:block} .fb-passage{ min-height:var(--fb-screen); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(2rem,7vh,4rem); } .fb-passage__num{ font-size:0.78rem;font-weight:700;letter-spacing:0.14em; color:var(--fb-gold-text);margin:0 0 0.7rem; } .fb-passage 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(--fb-deep); margin:0 0 1.1rem;max-width:20ch; } .fb-question{ margin:1.7rem 0 0;padding-left:1.15rem; border-left:2px solid var(--fb-gold); font-family:'Ibarra Real Nova',serif; font-size:1.22rem;line-height:1.5; color:var(--fb-navy);max-width:44ch; } .fb-accent{ margin:1.7rem 0 0; font-family:'Ibarra Real Nova',serif; font-size:1.3rem;line-height:1.45; color:var(--fb-deep);max-width:36ch; } .fb-passage__mark{display:none} /* ═══════════════ 10. ÉCRANS 8 À 10 — LES TROIS RÉALITÉS ══════════════ */ .fb-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(--fb-gold-dark);margin-bottom:0.9rem; } .fb-real__viz{margin:0;width:100%} /* Images-clés communes aux trois schémas. Chaque règle n'écrit que son état de départ : l'état d'arrivée reste celui de la feuille. */ @keyframes fbFade{from{opacity:0}} @keyframes fbRise{from{opacity:0;transform:translateY(8px)}} @keyframes fbGrowX{from{transform:scaleX(0)}} @keyframes fbGrowY{from{transform:scaleY(0)}} @keyframes fbDraw{from{stroke-dashoffset:var(--fb-len,600)}} @keyframes fbHop{ 0%{transform:translateX(0)} 22%{transform:translateX(0)} 40%{transform:translateX(135px)} 56%{transform:translateX(135px)} 74%{transform:translateX(270px)} 86%{transform:translateX(270px)} 100%{transform:translateX(402px)} } /* 01 — la distance : les milieux paraissent, les passages se construisent, le repère finit par atteindre les quatre. (1600 ms) */ .fb-bridge{transform-box:fill-box;transform-origin:left center} /* Le repère au repos est arrivé au bout de son parcours : c'est l'état final, celui que l'on voit sans animation. */ .fb-dist-mark{transform:translateX(402px)} .fb-diag-mark{transform:translateX(400px)} .fb-anim .is-in .fb-dist-zone{animation:fbFade 420ms ease both} .fb-anim .is-in .fb-dist-zone--2{animation-delay:110ms} .fb-anim .is-in .fb-dist-zone--3{animation-delay:220ms} .fb-anim .is-in .fb-dist-zone--4{animation-delay:330ms} .fb-anim .is-in .fb-bridge--1{animation:fbGrowX 320ms cubic-bezier(.22,.61,.36,1) 560ms both} .fb-anim .is-in .fb-bridge--2{animation:fbGrowX 320ms cubic-bezier(.22,.61,.36,1) 880ms both} .fb-anim .is-in .fb-bridge--3{animation:fbGrowX 320ms cubic-bezier(.22,.61,.36,1) 1200ms both} .fb-anim .is-in .fb-dist-mark{animation:fbHop 1520ms cubic-bezier(.5,0,.2,1) 80ms both} /* 02 — le savoir tacite : quatre couches successives. (1450 ms) */ .fb-ring{fill:none;stroke:var(--fb-stroke);stroke-width:1.4;stroke-linecap:round} .fb-ring--4{stroke:var(--fb-stroke-soft)} .fb-anim .is-in .fb-ring{stroke-dasharray:var(--fb-len,600);animation:fbDraw 620ms cubic-bezier(.22,.61,.36,1) both} .fb-anim .is-in .fb-ring--2{animation-delay:260ms} .fb-anim .is-in .fb-ring--3{animation-delay:520ms} .fb-anim .is-in .fb-ring--4{animation-delay:780ms} .fb-anim .is-in .fb-ring-mark--1{animation:fbFade 260ms ease 560ms both} .fb-anim .is-in .fb-ring-mark--2{animation:fbFade 260ms ease 820ms both} .fb-anim .is-in .fb-ring-mark--3{animation:fbFade 260ms ease 1080ms both} .fb-anim .is-in .fb-ring-mark--4{animation:fbFade 260ms ease 1340ms both} .fb-rings__legend{ list-style:none;margin:1.25rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:0.5rem 1.6rem; } .fb-rings__legend li{ display:flex;align-items:baseline;gap:0.45rem; font-size:0.9rem;color:var(--fb-body-dim); } .fb-rings__n{font-size:0.7rem;font-weight:700;letter-spacing:0.06em;color:var(--fb-gold-text)} /* 03 — le rythme : le décalage, puis la clarification, puis l'alignement. (1500 ms) */ .fb-clarify{transform-box:fill-box;transform-origin:center} .fb-anim .is-in .fb-drift--1{animation:fbFade 240ms ease both} .fb-anim .is-in .fb-drift--2{animation:fbFade 240ms ease 180ms both} .fb-anim .is-in .fb-drift--3{animation:fbFade 240ms ease 360ms both} .fb-anim .is-in .fb-drift path{animation:fbFade 320ms ease 120ms both} .fb-anim .is-in .fb-clarify{animation:fbGrowY 420ms cubic-bezier(.22,.61,.36,1) 620ms both} .fb-anim .is-in .fb-aligned path{animation:fbFade 320ms ease 1000ms both} .fb-anim .is-in .fb-aligned--1{animation:fbRise 260ms ease 1020ms both} .fb-anim .is-in .fb-aligned--2{animation:fbRise 260ms ease 1160ms both} .fb-anim .is-in .fb-aligned--3{animation:fbRise 260ms ease 1300ms both} /* ═══════════════════════════ 11. ÉCRAN 11 — NOTRE CONVICTION ═════════ */ .fb-thesis{margin-bottom:clamp(0.5rem,2vh,1.25rem)} .fb-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(--fb-gold); max-width:44ch;margin:1.35rem 0 0; padding-left:1.15rem;border-left:2px solid var(--fb-gold); } .fb-zones{ position:relative; --fb-zgap:clamp(1.75rem,4vw,3.25rem); display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fb-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. */ .fb-zones__line{ position:absolute;top:5px;left:0;height:1px; width:calc(300% + 2 * var(--fb-zgap)); background:rgba(255,255,255,0.18); } .fb-zones__line i{ display:block;height:100%;background:var(--fb-gold); transform-origin:left center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .fb-anim .fb-zones__line i{transform:scaleX(0)} .fb-anim .fb-zones.is-in .fb-zones__line i{transform:scaleX(1)} .fb-zone{position:relative;padding-top:2.25rem} .fb-zone::before{ content:"";position:absolute;top:0;left:0; width:18px;height:2px;background:var(--fb-gold); } .fb-zone h3{ font-family:'Space Grotesk',sans-serif; font-size:0.82rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--fb-gold);margin:0 0 0.9rem;line-height:1.5; } .fb-zone p{font-size:1.02rem;line-height:1.7;color:var(--fb-on-dark);margin:0} .fb-anim .fb-zone{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1)} .fb-anim .is-in .fb-zone{opacity:1;transform:none} .fb-anim .is-in .fb-zone:nth-child(2){transition-delay:.22s} .fb-anim .is-in .fb-zone:nth-child(3){transition-delay:.44s} /* ════════════════════════════════ 12. ÉCRAN 12 — LA MÉTHODE ══════════ */ /* DEUX TERRITOIRES, PAS SIX BLOCS. À gauche la méthode : surtitre, titre, cadrage et les quatre temps. À droite la preuve : la photo de terrain, sa légende, et ce que « observer » veut dire sur un site. Le diagramme « Le parcours suivi » a été retiré de cette scène : depuis l'arrivée de la photo, il ajoutait un troisième niveau de lecture sans rien démontrer que les écrans 3 à 7 ne montrent déjà. */ .fb-method__grid{ display:grid; grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr); gap:clamp(2rem,4.5vw,3.75rem); align-items:start; } /* LES QUATRE TEMPS : QUATRE LIGNES, JAMAIS QUATRE CARTES. Le numéro et le nom tiennent sur la même ligne, la description suit en dessous, et un simple filet sépare les temps. Le trait doré qui se pose à l'entrée dans l'écran (classe `is-done`, posée par le script) est conservé : il devient la progression de la méthode. */ .fb-steps{ list-style:none;margin:clamp(1.25rem,2.6vh,1.75rem) 0 0;padding:0; display:block; } .fb-step{ position:relative; padding:clamp(0.7rem,1.6vh,0.95rem) 0; border-top:1px solid var(--fb-line); } .fb-step__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.12em; color:var(--fb-gold-text);opacity:.75; transition:opacity .5s ease; } .fb-step h3{ display:inline; font-family:'Ibarra Real Nova',serif; font-size:1.18rem;font-weight:700;line-height:1.25; color:var(--fb-deep);margin:0 0 0 0.6rem; transition:color .5s ease; } .fb-step p{ font-size:0.98rem;line-height:1.58;color:var(--fb-body); margin:0.35rem 0 0;max-width:46ch; transition:color .5s ease; } .fb-step::after{ content:"";position:absolute;top:-1px;left:0;width:100%;height:1px; background:var(--fb-gold); transform:scaleX(0);transform-origin:left center; transition:transform .6s cubic-bezier(.22,.61,.36,1); } .fb-step.is-done::after{transform:scaleX(1)} .fb-anim .fb-step h3{color:var(--fb-body-dim)} .fb-anim .fb-step p{color:var(--fb-body-dim)} .fb-step.is-done h3{color:var(--fb-deep)} .fb-step.is-done p{color:var(--fb-body)} .fb-step.is-done .fb-step__num{opacity:1} .fb-method__tag{ margin:clamp(1.1rem,2.4vh,1.5rem) 0 0;padding-top:1rem; border-top:1px solid var(--fb-line); font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase; color:var(--fb-body-dim);line-height:1.6; } /* LE SECOND TERRITOIRE : LA PREUVE. La photo occupe toute la largeur de sa colonne. Le cliché est un portrait (750 x 1000) : un rapport 4/5 le recadre très légèrement, et une borne en hauteur l'empêche de chasser le reste du contenu hors de l'écran sur un portable peu haut. `object-position` garde la marge au dessus des casques : personne n'est coupé à la tête. */ .fb-method__proof{display:grid;gap:clamp(1.35rem,3vh,2rem)} .fb-field__media{margin:0} .fb-field__media img{ display:block;width:100%;height:auto; aspect-ratio:4 / 5; max-height:clamp(400px,54vh,720px); object-fit:cover; object-position:center 38%; border-top:2px solid var(--fb-gold); } .fb-field__media figcaption{ margin-top:0.9rem; font-size:0.86rem;line-height:1.55; color:var(--fb-body-dim); } .fb-field__note{padding-top:clamp(1.1rem,2.4vh,1.6rem);border-top:1px solid var(--fb-line)} .fb-field__note .fb-eyebrow{margin-bottom:0.7rem} .fb-field__title{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.2rem,1.05rem + 0.6vw,1.5rem); line-height:1.28;color:var(--fb-deep); margin:0 0 0.85rem;max-width:26ch; } .fb-field__note .fb-p{font-size:1rem;line-height:1.68} .fb-field__note .fb-p + .fb-p{margin-top:0.8rem} /* ══════════════════════ 13. ÉCRAN 13 — LES TROIS FAÇONS D'AGIR ═══════ */ .fb-acts{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); align-items:center; } .fb-acts.fb-tabs-ready{grid-template-columns:minmax(0,330px) minmax(0,1fr)} .fb-acts__aside{align-self:center} .fb-acts__lead{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem);max-width:20ch;margin-bottom:0} .fb-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(--fb-body-dim); } .fb-tabs-ready .fb-acts__hint{display:block} .fb-acts__rail{display:none;flex-direction:column} .fb-tabs-ready .fb-acts__rail{display:flex} .fb-choice{ position:relative;display:block;width:100%; appearance:none;-webkit-appearance:none; background:none;border:0; border-bottom:1px solid var(--fb-line); padding:0;min-height:48px; text-align:left;cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .28s ease; } .fb-choice::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--fb-gold); transform:scaleY(0);transform-origin:center; transition:transform .28s ease; } .fb-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); } .fb-choice__num{ font-size:0.8rem;font-weight:700;letter-spacing:0.08em; color:var(--fb-gold-text);opacity:.92; transition:opacity .28s ease; } .fb-choice__name{ font-family:'Ibarra Real Nova',serif; font-size:1.18rem;line-height:1.25;font-weight:600; color:var(--fb-body); transition:color .28s ease; } .fb-choice__state{ font-size:0.68rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--fb-body-dim);white-space:nowrap; transition:color .28s ease; } .fb-choice__on{display:none} .fb-choice__off{display:inline} .fb-choice:hover .fb-choice__name{color:var(--fb-deep)} .fb-choice:hover .fb-choice__state{color:var(--fb-gold-text)} .fb-choice:hover .fb-choice__num{opacity:1} .fb-choice:hover{border-bottom-color:var(--fb-gold)} .fb-choice:hover .fb-choice__inner{transform:translateX(4px)} .fb-choice[aria-selected="true"]{border-bottom-color:var(--fb-gold)} .fb-choice[aria-selected="true"]::before{transform:scaleY(1)} .fb-choice[aria-selected="true"] .fb-choice__num{opacity:1} .fb-choice[aria-selected="true"] .fb-choice__name{color:var(--fb-deep)} .fb-choice[aria-selected="true"] .fb-choice__state{color:var(--fb-gold-text)} .fb-choice[aria-selected="true"] .fb-choice__on{display:inline} .fb-choice[aria-selected="true"] .fb-choice__off{display:none} .fb-choice[aria-selected="true"]:hover .fb-choice__inner{transform:none} .fb-acts-scene{padding-block:clamp(2.25rem,4.5vh,3.5rem)} .fb-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; } .fb-acts__panel[hidden]{display:none} .fb-acts__panel + .fb-acts__panel{margin-top:clamp(2.5rem,6vh,3.5rem)} .fb-tabs-ready .fb-acts__panel + .fb-acts__panel{margin-top:0} .fb-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(--fb-deep); margin:0 0 1rem;max-width:26ch; } .fb-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. */ @keyframes fbActFade{from{opacity:0}} @keyframes fbActRise{from{opacity:0;transform:translateY(7px)}} @keyframes fbActDraw{from{stroke-dashoffset:var(--fb-len,600)}} @keyframes fbActGrowX{from{transform:scaleX(0)}} @keyframes fbActGrowY{from{transform:scaleY(0)}} @keyframes fbActRelay{ 0%{transform:translateX(0)} 16%{transform:translateX(0)} 32%{transform:translateX(100px)} 46%{transform:translateX(100px)} 62%{transform:translateX(200px)} 74%{transform:translateX(300px)} 100%{transform:translateX(400px)} } .fb-diag-tick, .fb-diag-scan, .fb-align-axis, .fb-dev-down{transform-box:fill-box} .fb-diag-tick path{transform-box:fill-box;transform-origin:bottom center} .fb-diag-scan{transform-origin:left center} .fb-align-axis{transform-origin:center} /* 01 — Diagnostiquer : un repère parcourt cinq environnements, trois zones d'interprétation se signalent, une lecture les relie. (1450 ms) */ .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-diag-mark{animation:fbActRelay 1150ms cubic-bezier(.5,0,.2,1) both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-diag-tick--1{animation:fbActGrowY 300ms cubic-bezier(.22,.61,.36,1) 420ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-diag-tick--2{animation:fbActGrowY 300ms cubic-bezier(.22,.61,.36,1) 640ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-diag-tick--3{animation:fbActGrowY 300ms cubic-bezier(.22,.61,.36,1) 1000ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-diag-scan{animation:fbActGrowX 380ms cubic-bezier(.22,.61,.36,1) 1070ms both} /* 02 — Aligner : quatre trajectoires gardent leur origine et rejoignent un même axe, confirmé par quatre repères. (1400 ms) */ .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-track{stroke-dasharray:var(--fb-len,600);animation:fbActDraw 780ms cubic-bezier(.22,.61,.36,1) both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-track--2{animation-delay:100ms} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-track--3{animation-delay:200ms} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-track--4{animation-delay:300ms} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-align-node--1{animation:fbActRise 240ms ease 760ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-align-node--2{animation:fbActRise 240ms ease 880ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-align-node--3{animation:fbActRise 240ms ease 1000ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-align-node--4{animation:fbActRise 240ms ease 1120ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-align-axis{animation:fbActGrowY 400ms cubic-bezier(.22,.61,.36,1) 980ms both} /* 03 — Développer : le lien devient explicite, puis le repère rejoint l'ensemble de l'équipe. (1500 ms) */ .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-strong{stroke-dasharray:var(--fb-len,140);animation:fbActDraw 520ms cubic-bezier(.22,.61,.36,1) 420ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-down{stroke-dasharray:var(--fb-len,100);animation:fbActDraw 360ms cubic-bezier(.22,.61,.36,1) 120ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-net path{stroke-dasharray:var(--fb-len,180);animation:fbActDraw 520ms cubic-bezier(.22,.61,.36,1) 900ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-team rect{animation:fbActRise 260ms ease 1180ms both} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-team rect:nth-child(2){animation-delay:1260ms} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-team rect:nth-child(3){animation-delay:1340ms} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-team rect:nth-child(4){animation-delay:1420ms} .fb-anim .fb-tabs-ready .fb-acts__panel.is-active.is-animating .fb-dev-team rect:nth-child(5){animation-delay:1500ms} /* ════════════════════════════ 14. ÉCRAN 14 — PREUVE D'EXPERTISE ══════ */ .fb-proof__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .fb-proof__media{margin:0} .fb-proof__media img{ display:block;width:100%;height:auto; /* Ratio natif conservé : aucun visage n'est recadré. */ border-top:2px solid var(--fb-gold); } .fb-proof__media figcaption{ margin-top:0.9rem; font-size:0.86rem;line-height:1.55; color:var(--fb-body-dim); } /* ═══════════════════════════════════ 15. ÉCRAN 15 — CONCLUSION ═══════ */ .fb-end{background:var(--fb-deep);overflow:hidden} /* Lignes de croissance : deux trames fines et décalées, aucune image, aucun flou. */ .fb-end__texture{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(96deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 26px), repeating-linear-gradient(96deg,rgba(255,255,255,0.03) 0 1px,transparent 1px 9px); opacity:.75; } .fb-end__inner{position:relative} .fb-end__strong{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem); line-height:1.45;color:var(--fb-gold); margin:0 0 1.5rem;max-width:36ch; } .fb-end__sign{ font-size:1.02rem;line-height:1.7; color:var(--fb-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. */ .fb-chapters{display:none} .fb-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem} .fb-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; } .fb-chapters__dot{ flex:none;width:12px;height:2px; background:currentColor; transition:background-color .4s ease,width .4s ease; } .fb-chapters a:hover{color:var(--fb-gold-dark)} .fb-chapters a.is-active{color:var(--fb-deep)} .fb-chapters a.is-active .fb-chapters__dot{background:var(--fb-gold);width:20px} .fb-chapters__track{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(10,56,80,0.16)} .fb-chapters__track i{ display:block;height:100%;background:var(--fb-gold); transform:scaleY(var(--fb-p,0));transform-origin:top center; transition:transform .3s linear; } .fb-chapters.is-on-dark a{color:rgba(255,255,255,0.66)} .fb-chapters.is-on-dark a:hover{color:var(--fb-gold)} .fb-chapters.is-on-dark a.is-active{color:#fff} .fb-chapters.is-on-dark .fb-chapters__track{background:rgba(255,255,255,0.22)} .fb-chapters.is-on-dark a:focus-visible{outline-color:var(--fb-gold)} @media(min-width:1200px){ .fb-js .fb-chapters{ display:block;position:fixed; top:50%;right:clamp(0.75rem,1.4vw,1.5rem); transform:translateY(-50%); z-index:60;padding-left:0.9rem; } /* LA NAVIGATION A SA PROPRE GOUTTIÈRE, PHYSIQUEMENT. Elle est fixée dans la marge droite : si cette marge est plus étroite que la navigation, le texte passe dessous. Un `z-index` ne réglerait rien — il masquerait du contenu. On rétrécit donc la MESURE du contenu tant que la gouttière n'est pas assez large. Les repères seuls occupent 71 px (38 de large + 33 de retrait) : 100 px de chaque côté laissent une marge franche. Au delà de 1380 px, la gouttière naturelle suffit et la mesure reprend sa pleine valeur. */ .fb-js .fb-page{--fb-shell:min(1180px,calc(100vw - 200px))} /* Sous 1560px la gouttière ne suffit pas au libellé (139 px de large, 174 px avec son retrait) : on ne garde que les repères, le nom restant accessible aux lecteurs d'écran. */ .fb-chapters__label{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } } @media(min-width:1560px){ .fb-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){ .fb-scene{padding-block:clamp(1.75rem,3.4vh,2.75rem)} .fb-acts-scene{padding-block:clamp(1.4rem,2.8vh,2.25rem)} .fb-acts.fb-tabs-ready{grid-template-columns:minmax(0,300px) minmax(0,1fr)} .fb-acts__hint{margin-top:clamp(1.1rem,2.5vh,1.6rem)} .fb-acts__title{margin-bottom:0.75rem;max-width:31ch} .fb-acts__panel .fb-eyebrow{margin-bottom:0.75rem} .fb-acts__panel .fb-result{margin-top:0.9rem;padding-top:0.7rem} .fb-acts__panel .fb-link{margin-top:0.7rem} .fb-hero__viz{width:min(100%,470px)} .fb-steps{margin-top:clamp(1rem,2vh,1.4rem)} .fb-step{padding-block:clamp(0.6rem,1.3vh,0.8rem)} .fb-method__tag{margin-top:1rem;padding-top:0.8rem} /* On resserre les respirations, jamais la photo : c'est elle qui porte la preuve. Sa borne en hauteur reste celle de la règle générale, où `54vh` s'adapte déjà seul aux portables peu hauts. */ .fb-method__proof{gap:clamp(1.1rem,2.4vh,1.5rem)} .fb-field__note{padding-top:clamp(0.9rem,2vh,1.25rem)} } /* ═════════════════════════════════════ 18. TABLETTE (≤ 1080px) ═══════ */ @media(max-width:1080px){ .fb-hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .fb-hero__viz{justify-self:start;width:min(100%,440px)} .fb-split,.fb-split--tight{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .fb-split--flip .fb-real__viz{order:0} .fb-real__viz{width:min(100%,560px)} .fb-passages__grid{grid-template-columns:minmax(0,1fr)} /* Une colonne dès 1080 px : en deçà, les deux territoires deviennent trop étroits pour la photo comme pour les quatre temps. La photo garde une largeur bornée pour ne jamais occuper un écran entier. */ .fb-method__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .fb-method__proof{max-width:480px} .fb-field__media img{max-height:none} .fb-step p{max-width:60ch} /* 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. */ .fb-zones{grid-template-columns:minmax(0,1fr);gap:2rem;padding-left:2rem} .fb-zones__line{display:none} .fb-zone{padding-top:0} .fb-zone::before{top:0.6em;left:-2rem;width:14px} .fb-zones::before, .fb-zones::after{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:1px} .fb-zones::before{background:rgba(255,255,255,0.18)} .fb-zones::after{ background:var(--fb-gold); transform-origin:top center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .fb-anim .fb-zones::after{transform:scaleY(0)} .fb-anim .fb-zones.is-in::after{transform:scaleY(1)} /* Les trois façons d'agir : trois lignes pleine largeur. */ .fb-acts.fb-tabs-ready{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .fb-acts__lead{max-width:24ch} .fb-choice{border:1px solid var(--fb-line);border-left-width:2px;background:#fff;margin-bottom:0.5rem} .fb-choice::before{width:2px;left:-2px} .fb-choice__inner{min-height:52px;padding:0.85rem 1rem} .fb-choice:hover .fb-choice__inner{transform:none} .fb-acts__panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .fb-acts__viz{width:min(100%,420px)} .fb-proof__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .fb-proof__media{max-width:640px} } /* ═════════════════════════════════════ 19. TÉLÉPHONE (≤ 900px) ═══════ */ @media(max-width:900px){ /* Le récit redevient une succession de sections verticales. */ .fb-passages__aside{position:static;padding-block:0;margin-bottom:1.5rem} .fb-rail{display:none} .fb-passages__grid{gap:0} .fb-passages{padding-top:clamp(3rem,7vh,4rem)} .fb-passage{min-height:var(--fb-screen);padding-block:clamp(2.5rem,6vh,3.5rem);position:relative} .fb-passage:first-child{min-height:calc(var(--fb-screen) - 6.5rem)} /* Repère de relais propre au téléphone : au-dessus du texte. */ .fb-passage__mark{display:block;position:relative;height:30px;margin-bottom:1.1rem} .fb-passage__mark::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fb-line)} .fb-passage__mark i{position:absolute;left:0;bottom:0;width:18px;height:2px;background:var(--fb-gold)} .fb-hero__inner{gap:1.75rem} .fb-hero__viz{width:min(100%,330px);grid-template-columns:minmax(80px,108px) minmax(0,1fr)} .fb-method__proof{max-width:none} .fb-signals{padding-left:2.5rem} .fb-signal__num{left:-2.5rem} .fb-signal::before{left:-1.4rem;width:12px} .fb-actions{gap:0.75rem} .fb-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. */ .fb-page .fb-p, .fb-page .fb-zone p, .fb-page .fb-step p, .fb-page .fb-end__sign{font-size:16px !important;line-height:1.7 !important} .fb-page .fb-lead{font-size:17px !important;line-height:1.7 !important} .fb-page .fb-signal{font-size:16px !important;line-height:1.6 !important} .fb-page .fb-question{font-size:18px !important} .fb-page .fb-accent{font-size:19px !important} .fb-page .fb-result{font-size:16px !important} .fb-page .fb-result b{font-size:13px !important} /* Les surtitres sont des

: `main > * p:not(…):not(…)` de mobile-premium.css pèse (0,2,3) et les ramenait tous à 16 px, effaçant la distinction entre un surtitre et un paragraphe. Trois classes suffisent à repasser devant. */ .fb-page .fb-shell .fb-eyebrow{font-size:13.5px !important;letter-spacing:0.13em} .fb-page .fb-crumb, .fb-page .fb-crumb a{font-size:13px !important} .fb-page .fb-btn, .fb-page .fb-link{font-size:16px !important} .fb-page .fb-passage h3{font-size:clamp(1.45rem,5.6vw,1.9rem) !important;line-height:1.18 !important} .fb-page .fb-passage__num{font-size:13px !important} .fb-page .fb-step h3{font-size:19px !important} .fb-page .fb-step__num{font-size:13px !important} .fb-page .fb-zone h3{font-size:14px !important;letter-spacing:0.13em} .fb-page .fb-passages__chapter{font-size:17px !important;line-height:1.45 !important} .fb-page .fb-real__num{font-size:clamp(2.1rem,9vw,2.8rem) !important} .fb-page .fb-end__strong{font-size:clamp(1.2rem,5vw,1.5rem) !important} /* `main > * p:not(…):not(…)` de mobile-premium.css pèse (0,2,3) : deux classes ne suffisent pas à repasser devant pour un paragraphe. On ajoute la coquille, comme le fait expertises-identite.css. */ .fb-page .fb-shell .fb-method__tag{font-size:13px !important;letter-spacing:0.08em} .fb-page .fb-field__title{font-size:19px !important;line-height:1.28 !important} .fb-page .fb-signal__num, .fb-page .fb-hero__n, .fb-page .fb-rings__n{font-size:13px !important} .fb-page .fb-hero__legend li, .fb-page .fb-rings__legend li{font-size:14px !important} .fb-page .fb-acts__title{font-size:clamp(1.3rem,5vw,1.6rem) !important;line-height:1.22 !important} .fb-page .fb-thesis__claim{font-size:clamp(1.15rem,4.6vw,1.45rem) !important;line-height:1.42 !important} .fb-page .fb-choice__name{font-size:18px !important;line-height:1.25 !important} .fb-page .fb-choice__num{font-size:13px !important} .fb-page .fb-choice__state{font-size:11.5px !important;letter-spacing:0.14em} .fb-page .fb-acts__hint{font-size:13px !important;letter-spacing:0.16em} .fb-page .fb-proof__media figcaption, .fb-page .fb-field__media figcaption{font-size:14px !important;line-height:1.55 !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. */ .fb-hero__viz{width:min(100%,300px);grid-template-columns:minmax(0,1fr);gap:1.15rem} .fb-hero__legend{position:static;order:2;display:grid;grid-template-columns:minmax(0,1fr);gap:0.4rem} .fb-hero__legend li{ position:static;transform:none; text-align:left;justify-content:flex-start; max-width:none; } .fb-scene{padding-block:clamp(2.5rem,6vh,3.5rem)} .fb-rings__legend{gap:0.45rem 1.2rem} } @media(max-width:420px){ .fb-hero__viz{width:min(100%,278px)} .fb-signals{padding-left:2.25rem} .fb-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){ .fb-scene,.fb-passage,.fb-passage:first-child{min-height:0} .fb-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){ .fb-page *, .fb-page *::before, .fb-page *::after{ animation:none !important; transition:none !important; } .fb-page [data-fb-in="rise"], .fb-page [data-fb-in="rise"].is-in, .fb-page .fb-zone, .fb-page .fb-signal{color:var(--fb-body) !important} .fb-page .fb-signals__axis i, .fb-page .fb-rail__line i, .fb-page .fb-clarify, .fb-page .fb-align-axis, .fb-page .fb-diag-tick path{transform:scaleY(1) !important} .fb-page .fb-zones__line i, .fb-page .fb-bridge, .fb-page .fb-diag-scan, .fb-page .fb-step::after{transform:scaleX(1) !important} .fb-page .fb-ring, .fb-page .fb-track, .fb-page .fb-dev-strong, .fb-page .fb-dev-down, .fb-page .fb-dev-net path{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .fb-page .fb-dist-mark{transform:translateX(402px) !important} .fb-page .fb-diag-mark{transform:translateX(400px) !important} .fb-page .fb-pulse{display:none !important} } @media(prefers-reduced-motion:reduce) and (max-width:1080px){ .fb-page .fb-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. */ .fb-chapters.is-out{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .fb-chapters{transition:opacity .28s ease} @media(prefers-reduced-motion:reduce){ .fb-chapters,.fb-chapters.is-out{transition:none} }