/* ========================================================================= MOSAÏCA — SECTEUR MUNICIPAL, PUBLIC ET COMMUNAUTAIRE ------------------------------------------------------------------------- Feuille chargée UNIQUEMENT par industries/secteur-municipal-public.html. Toutes les règles sont préfixées `mp-` et confinées à `.mp-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.mp-anim`, classe posée par le filet du et confirmée par le script. Aucune propriété exotique : `transform`, `opacity` et `stroke-dashoffset` uniquement — donc aucun repli conditionnel à prévoir, et un rendu identique dans Chrome et Edge. SIGNATURE GRAPHIQUE Une intention qui descend de relais en relais ET une expérience qui remonte vers l'institution ; des acteurs distincts qui se coordonnent sans fusionner ; un repère qui passe de la périphérie à la contribution. PALETTE : variables globales de assets/styles.css. Deux teintes de service, absentes du global : --mp-gold-text doré assombri, lisible sur fond clair (≥ 6:1) --mp-body gris-bleu de lecture (≥ 8:1 sur blanc) ========================================================================= */ /* ═════════════════════════════════════════════════════════ 1. JETONS ═══ */ .mp-page{ --mp-navy:var(--navy,#0e4d6c); --mp-deep:var(--navy-deep,#0a3850); --mp-gold:var(--gold,#C9A45C); --mp-gold-dark:var(--gold-dark,#A9803F); --mp-gold-text:#7a5a24; --mp-gray1:var(--gray1,#F8F9FA); --mp-body:#3d4a52; --mp-body-dim:#5c6a72; --mp-on-dark:rgba(255,255,255,0.84); --mp-on-dark-dim:rgba(255,255,255,0.66); --mp-line:rgba(10,56,80,0.14); --mp-stroke:rgba(10,56,80,0.34); --mp-stroke-soft:rgba(10,56,80,0.16); --mp-node:#0a3850; /* Fond des scènes claires : sert à « couper » un tracé pour figurer une rupture de parcours sans dessiner de symbole. */ --mp-bg:#fff; --mp-shell:1180px; --mp-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. */ --mp-screen:calc(100vh - var(--nav-h,68px)); font-family:'Space Grotesk',sans-serif; color:var(--mp-body); } @supports (height:100svh){ .mp-page{--mp-screen:calc(100svh - var(--nav-h,68px))} } .mp-page [data-mp-theme="dark"]{ --mp-stroke:rgba(255,255,255,0.36); --mp-stroke-soft:rgba(255,255,255,0.16); --mp-node:rgba(255,255,255,0.88); --mp-line:rgba(255,255,255,0.18); --mp-bg:#0a3850; } .mp-scene--gray{--mp-bg:#F8F9FA} /* Les ancres de chapitre ne passent jamais sous la barre fixe. */ .mp-page [id]{scroll-margin-top:calc(var(--nav-h,68px) + 1rem)} /* ═══════════════════════════════════════════ 2. SCÈNE ET CONTENEUR ═════ */ .mp-scene{ position:relative; min-height:var(--mp-screen); display:flex; align-items:center; padding-block:clamp(3rem,7vh,5.5rem); } .mp-scene--white{background:#fff} .mp-scene--gray{background:var(--mp-gray1)} .mp-scene--navy{background:var(--mp-deep)} .mp-shell{ width:min(var(--mp-shell),100%); margin-inline:auto; padding-inline:var(--mp-pad); } .mp-shell > *{min-width:0} .mp-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .mp-split--tight{grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr)} .mp-split--flip .mp-real__viz{order:-1} /* Preuve 2 : le texte est dense, il recoit la largeur ; le schema passe en premiere colonne sans la reclamer. */ .mp-split--proof{grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr)} /* ═══════════════════════════════════════════════════ 3. TYPOGRAPHIE ═══ */ .mp-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; line-height:1.55; color:var(--mp-gold-text); margin:0 0 1.15rem; } [data-mp-theme="dark"] .mp-eyebrow{color:var(--mp-gold)} .mp-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.5rem,1.05rem + 2.5vw,3.1rem); line-height:1.13;color:#fff; margin:0 0 1.4rem;max-width:28ch; } .mp-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(--mp-deep); margin:0 0 1.2rem;max-width:24ch; } [data-mp-theme="dark"] .mp-h2{color:#fff} .mp-h2--wide{max-width:31ch} .mp-p{ font-size:1.05rem;line-height:1.75; color:var(--mp-body);max-width:58ch;margin:0; } .mp-p + .mp-p{margin-top:1rem} [data-mp-theme="dark"] .mp-p{color:var(--mp-on-dark)} .mp-lead{ font-size:1.1rem;line-height:1.72; color:var(--mp-on-dark);max-width:54ch;margin:0; } /* Précision de portée : une réserve tenue, jamais un avertissement. */ .mp-note{ margin:1rem 0 0;padding-left:1rem; border-left:1px solid var(--mp-line); font-size:0.96rem;line-height:1.6; color:var(--mp-body-dim);max-width:52ch; } /* Position de Mosaïca : une ligne tenue, sans emphase publicitaire. */ .mp-stance{ margin:1.5rem 0 0;padding-top:1.1rem; border-top:1px solid var(--mp-line); font-family:'Ibarra Real Nova',serif; font-size:1.14rem;line-height:1.55; color:var(--mp-navy);max-width:54ch; } /* Livrables : une ligne, jamais une carte. */ .mp-result{ margin:1.35rem 0 0;padding-top:1rem; border-top:1px solid var(--mp-line); font-size:1.02rem;line-height:1.65; color:var(--mp-deep);max-width:52ch; } .mp-result b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--mp-gold-text);margin-bottom:0.4rem; } /* ══════════════════════════════════════════════ 4. ACTIONS ET LIENS ═══ */ .mp-actions{display:flex;flex-wrap:wrap;gap:0.85rem 1rem;margin-top:2.1rem} .mp-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; } .mp-btn--gold{background:var(--mp-gold);color:#0a3850;border-color:var(--mp-gold)} .mp-btn--gold:hover{background:#d9b674;border-color:#d9b674;color:#0a3850} .mp-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)} .mp-btn--ghost:hover{border-color:var(--mp-gold);color:var(--mp-gold)} .mp-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(--mp-gold-text);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .mp-link::after{content:"→";font-weight:400} .mp-link:hover{color:var(--mp-deep)} .mp-page a:focus-visible, .mp-page button:focus-visible{ outline:2px solid var(--mp-gold-dark); outline-offset:3px; } [data-mp-theme="dark"] a:focus-visible{outline-color:var(--mp-gold)} .mp-crumb{ font-size:0.82rem;line-height:1.6; color:rgba(255,255,255,0.62);margin-bottom:1.6rem; } .mp-crumb a{color:rgba(255,255,255,0.82);text-decoration:none} .mp-crumb a:hover{color:var(--mp-gold)} /* ══════════════════════════════════════════ 5. RÉVÉLATIONS (ARMÉES) ═══ */ .mp-anim [data-mp-in="rise"]{ opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } .mp-anim [data-mp-in="rise"].is-in{opacity:1;transform:none} .mp-anim [data-mp-in="rise"][data-mp-delay="1"]{transition-delay:.14s} /* ═════════════════════════════════════════════════ 6. SCHÉMAS (SVG) ═══ */ .mp-page svg{display:block;width:100%;height:auto} .mp-viz-line{fill:none;stroke:var(--mp-stroke);stroke-width:1} .mp-viz-soft{fill:var(--mp-stroke-soft);stroke:var(--mp-stroke-soft);stroke-width:1} .mp-viz-soft path{fill:none} .mp-viz-gold{fill:none;stroke:var(--mp-gold);stroke-width:1.6} .mp-viz-goldfill{fill:var(--mp-gold);stroke:none} .mp-viz-nodefill{fill:var(--mp-node);stroke:none} .mp-viz-relay{fill:#fff;stroke:var(--mp-node);stroke-width:1.4} [data-mp-theme="dark"] .mp-viz-relay{fill:var(--mp-deep)} .mp-viz-bg{fill:var(--mp-bg);stroke:none} /* 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 mpFade{from{opacity:0}} @keyframes mpRise{from{opacity:0;transform:translateY(8px)}} @keyframes mpPop{from{opacity:0;transform:scale(.4)}} @keyframes mpDraw{from{stroke-dashoffset:var(--mp-len,600)}} @keyframes mpGrowX{from{transform:scaleX(0)}} @keyframes mpGrowY{from{transform:scaleY(0)}} /* ══════════════════════════════════════════════════ 7. ÉCRAN 1 HÉROS ═══ */ .mp-hero{background:var(--mp-deep);overflow:hidden;padding-block:clamp(2.5rem,5.4vh,4.25rem)} .mp-hero__inner{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .mp-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. */ .mp-hero__legend{position:relative;list-style:none;margin:0;padding:0} .mp-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(--mp-on-dark-dim);max-width:100%; } .mp-hero__n{color:var(--mp-gold);font-weight:700;font-size:0.68rem;letter-spacing:0.06em;flex:none} /* Positions calées sur les cinq niveaux du SVG (y = 60, 190, 320, 440 et 550 dans un viewBox de 620 de haut). */ .mp-hero__legend li:nth-child(1){top:9.7%} .mp-hero__legend li:nth-child(2){top:30.6%} .mp-hero__legend li:nth-child(3){top:51.6%} .mp-hero__legend li:nth-child(4){top:71%} .mp-hero__legend li:nth-child(5){top:88.7%} /* Deux sens de circulation : la clé le dit en toutes lettres. */ .mp-hero__key{ grid-column:1 / -1; display:flex;flex-wrap:wrap;gap:0.4rem 1.5rem; margin:1rem 0 0; font-size:0.76rem;color:var(--mp-on-dark-dim); } .mp-hero__key span{display:inline-flex;align-items:center;gap:0.5rem} .mp-key{display:inline-block;width:22px;height:0;flex:none;border-top:2px solid var(--mp-gold)} .mp-key--up{border-top-width:1px;border-top-style:dashed} .mp-thread{fill:none;stroke:var(--mp-stroke);stroke-width:1.2} .mp-thread--thin{stroke-width:1;stroke-dasharray:4 4} /* L'intention descend, puis l'expérience remonte : deux tracés successifs en `stroke-dashoffset`, donc identiques dans Chrome et Edge. */ .mp-down{fill:none;stroke:var(--mp-gold);stroke-width:1.8;stroke-dasharray:640;stroke-dashoffset:0} .mp-up{fill:none;stroke:var(--mp-gold);stroke-width:1.2;stroke-dasharray:660;stroke-dashoffset:0;opacity:.75} .mp-anim .mp-down{animation:mpDown 13s ease-in-out infinite} .mp-anim .mp-up{animation:mpUp 13s ease-in-out infinite} .mp-anim .mp-hero__svg.is-paused .mp-down, .mp-anim .mp-hero__svg.is-paused .mp-up, .mp-anim .mp-hero__svg.is-paused .mp-node{animation-play-state:paused} @keyframes mpDown{ 0%{stroke-dashoffset:640;opacity:1} 26%{stroke-dashoffset:0;opacity:1} 86%{stroke-dashoffset:0;opacity:1} 96%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:640;opacity:0} } @keyframes mpUp{ 0%,28%{stroke-dashoffset:660;opacity:.75} 54%{stroke-dashoffset:0;opacity:.75} 86%{stroke-dashoffset:0;opacity:.75} 96%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:660;opacity:0} } .mp-node{fill:var(--mp-gold);stroke:var(--mp-gold-dark);stroke-width:1} .mp-anim .mp-node{animation:mpNode 13s ease-in-out infinite} .mp-anim .mp-node--2{animation-delay:.7s} .mp-anim .mp-node--3{animation-delay:1.4s} .mp-anim .mp-node--4{animation-delay:2.1s} .mp-anim .mp-node--5{animation-delay:2.8s} @keyframes mpNode{ 0%,2%{opacity:0} 6%{opacity:1} 86%{opacity:1} 96%,100%{opacity:0} } /* ═══════════════════ 8. ÉCRAN 2 — LES SITUATIONS DÉCLENCHANTES ═══════ Un axe unique, six repères en trait vertical. Ni cartes, ni grille. */ .mp-signals{position:relative;padding-left:2.75rem} .mp-signals__axis{ position:absolute;left:6px;top:0.85rem;bottom:0.85rem;width:1px; background:var(--mp-line); } .mp-signals__axis i{ display:block;height:100%;background:var(--mp-gold); transform:scaleY(1);transform-origin:top center; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .mp-anim .mp-signals__axis i{transform:scaleY(var(--mp-p,0))} .mp-signals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(0.85rem,2.3vh,1.5rem)} .mp-signal{ position:relative; font-size:1.05rem;line-height:1.6; color:var(--mp-body);max-width:47ch; transition:color .5s ease; } .mp-signal__num{ position:absolute;left:-2.75rem;top:0.15em; font-size:0.72rem;font-weight:700;letter-spacing:0.06em; color:var(--mp-gold-text);opacity:.92; } /* Le repère posé sur l'axe : un trait vertical court. */ .mp-signal::before{ content:"";position:absolute;left:-1.6rem;top:0.32em; width:2px;height:14px; background:var(--mp-stroke); transition:background-color .5s ease,height .5s ease; } .mp-anim .mp-signal{color:#6b7780} .mp-anim .mp-signal.is-seen{color:var(--mp-body)} .mp-signal.is-lit{color:var(--mp-deep)} .mp-signal.is-lit::before{background:var(--mp-gold);height:20px} /* ═════════════════ 9. ÉCRANS 3 À 7 — LES CINQ RELAIS ════════════════ */ /* 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. */ .mp-levels{background:var(--mp-gray1);position:relative;overflow-x:clip;--mp-bg:#F8F9FA} @supports not (overflow:clip){ .mp-levels{overflow-x:visible} } .mp-levels__grid{ display:grid; grid-template-columns:minmax(0,37%) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .mp-levels__aside{ position:sticky; top:calc(var(--nav-h,68px) + clamp(2rem,7vh,4.5rem)); align-self:start; padding-block:clamp(2rem,6vh,3rem); } .mp-levels__chapter{ font-family:'Ibarra Real Nova',serif; font-size:1.15rem;font-weight:600;line-height:1.45; color:var(--mp-navy);margin:0;max-width:23ch; } .mp-rail{position:relative;margin-top:clamp(1.75rem,5vh,2.75rem);padding-left:2.1rem} .mp-rail__line{position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:var(--mp-line)} .mp-rail__line i{ display:block;height:100%;background:var(--mp-gold); transform:scaleY(1);transform-origin:top center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } .mp-anim .mp-rail__line i{transform:scaleY(var(--mp-p,0))} .mp-rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1rem,3.2vh,1.9rem)} .mp-rail__item{position:relative;display:flex;align-items:baseline;gap:0.6rem;min-height:18px} /* Le repère de relais : un anneau qui se remplit lorsqu'il devient actif. */ .mp-rail__dot{ position:absolute;left:-2.1rem;top:0.3em; width:13px;height:13px;border-radius:50%; border:1.5px solid var(--mp-stroke);background:var(--mp-gray1); transition:border-color .5s ease,box-shadow .5s ease,transform .5s ease; } .mp-rail__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.06em; color:var(--mp-gold-text);opacity:.72;flex:none; transition:opacity .5s ease; } .mp-rail__label{ font-size:0.88rem;line-height:1.45; color:var(--mp-body-dim); transition:color .5s ease; } .mp-rail__item.is-past .mp-rail__dot{border-color:var(--mp-gold);box-shadow:inset 0 0 0 3px var(--mp-gold);opacity:.55} .mp-rail__item.is-active .mp-rail__dot{border-color:var(--mp-gold-dark);box-shadow:inset 0 0 0 4px var(--mp-gold);transform:scale(1.18)} .mp-rail__item.is-active .mp-rail__num{opacity:1} .mp-rail__item.is-active .mp-rail__label{color:var(--mp-deep);font-weight:600} .mp-levels__steps{display:block} .mp-level{ min-height:var(--mp-screen); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(2rem,7vh,4rem); } .mp-level__num{ font-size:0.78rem;font-weight:700;letter-spacing:0.14em; color:var(--mp-gold-text);margin:0 0 0.7rem; } .mp-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(--mp-deep); margin:0 0 1.1rem;max-width:20ch; } .mp-question{ margin:1.7rem 0 0;padding-left:1.15rem; border-left:2px solid var(--mp-gold); font-family:'Ibarra Real Nova',serif; font-size:1.22rem;line-height:1.5; color:var(--mp-navy);max-width:44ch; } .mp-accent{ margin:1.7rem 0 0; font-family:'Ibarra Real Nova',serif; font-size:1.28rem;line-height:1.45; color:var(--mp-deep);max-width:42ch; } .mp-accent--tight{margin-top:1.3rem;max-width:34ch} .mp-level__mark{display:none} /* ═══════════════ 10. ÉCRANS 8 À 10 — LES TROIS RÉALITÉS ════════════ */ .mp-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(--mp-gold-dark);margin-bottom:0.9rem; } .mp-real__viz{margin:0;width:100%} /* 01 — le service et son accès : trois points de contact, trois niveaux de compréhension, une clarification, un parcours continu. (1650 ms) */ .mp-acc-bar{transform-box:fill-box;transform-origin:left center} .mp-acc-clarify{transform-box:fill-box;transform-origin:center} .mp-anim .is-in .mp-acc-info{transform-box:fill-box;transform-origin:center;animation:mpPop 280ms ease both} .mp-anim .is-in .mp-acc-in{stroke-dasharray:var(--mp-len,140);animation:mpDraw 380ms ease 180ms both} .mp-anim .is-in .mp-acc-in--2{animation-delay:260ms} .mp-anim .is-in .mp-acc-in--3{animation-delay:340ms} .mp-anim .is-in .mp-acc-pt{animation:mpFade 320ms ease both} .mp-anim .is-in .mp-acc-pt--1{animation-delay:520ms} .mp-anim .is-in .mp-acc-pt--2{animation-delay:600ms} .mp-anim .is-in .mp-acc-pt--3{animation-delay:680ms} .mp-anim .is-in .mp-acc-bar{animation:mpGrowX 420ms cubic-bezier(.22,.61,.36,1) 820ms both} .mp-anim .is-in .mp-acc-clarify{animation:mpGrowY 360ms cubic-bezier(.22,.61,.36,1) 1080ms both} .mp-anim .is-in .mp-acc-out{stroke-dasharray:var(--mp-len,130);animation:mpDraw 360ms ease 1300ms both} .mp-anim .is-in .mp-acc-person{transform-box:fill-box;transform-origin:center;animation:mpPop 300ms cubic-bezier(.22,.61,.36,1) 1520ms both} /* 02 — les acteurs du territoire : six repères distincts, des liens qui se tracent, aucune fusion. (1620 ms) */ .mp-anim .is-in .mp-net-node{transform-box:fill-box;transform-origin:center;animation:mpPop 300ms ease both} .mp-anim .is-in .mp-net-node--2{animation-delay:90ms} .mp-anim .is-in .mp-net-node--3{animation-delay:180ms} .mp-anim .is-in .mp-net-node--4{animation-delay:270ms} .mp-anim .is-in .mp-net-node--5{animation-delay:360ms} .mp-anim .is-in .mp-net-node--6{animation-delay:450ms} .mp-anim .is-in .mp-net-link{stroke-dasharray:var(--mp-len,190);animation:mpDraw 420ms cubic-bezier(.22,.61,.36,1) both} .mp-anim .is-in .mp-net-link--1{animation-delay:560ms} .mp-anim .is-in .mp-net-link--2{animation-delay:660ms} .mp-anim .is-in .mp-net-link--3{animation-delay:760ms} .mp-anim .is-in .mp-net-link--4{animation-delay:860ms} .mp-anim .is-in .mp-net-link--5{animation-delay:960ms} .mp-anim .is-in .mp-net-link--6{animation-delay:1060ms} .mp-anim .is-in .mp-net-link--7{animation-delay:1160ms} .mp-anim .is-in .mp-net-link--8{animation-delay:1200ms} .mp-network__legend, .mp-steps-viz__legend, .mp-eco__legend{ list-style:none;margin:1.25rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem; } .mp-network__legend li, .mp-steps-viz__legend li, .mp-eco__legend li{display:flex;align-items:baseline;gap:0.45rem;font-size:0.9rem;color:var(--mp-body-dim)} .mp-network__n,.mp-steps-viz__n,.mp-eco__n{font-size:0.7rem;font-weight:700;letter-spacing:0.06em;color:var(--mp-gold-text)} .mp-eco__self{color:var(--mp-deep);font-weight:600} /* 03 — de l'accueil à la participation : le repère avance, puis contribue à son tour. (1700 ms) */ .mp-part-mark{transform:translateX(252px)} @keyframes mpPart{ 0%{transform:translateX(0)} 14%{transform:translateX(0)} 34%{transform:translateX(124px)} 50%{transform:translateX(124px)} 70%{transform:translateX(252px)} 100%{transform:translateX(252px)} } .mp-anim .is-in .mp-part-mark{animation:mpPart 1180ms cubic-bezier(.5,0,.2,1) both} .mp-anim .is-in .mp-part-link{stroke-dasharray:var(--mp-len,120);animation:mpDraw 340ms ease both} .mp-anim .is-in .mp-part-link--1{animation-delay:120ms} .mp-anim .is-in .mp-part-link--2{animation-delay:480ms} .mp-anim .is-in .mp-part-link--3{animation-delay:900ms} .mp-anim .is-in .mp-part-link--4{animation-delay:1000ms} .mp-anim .is-in .mp-part-stop{transform-box:fill-box;transform-origin:center;animation:mpPop 240ms ease both} .mp-anim .is-in .mp-part-stop--1{animation-delay:400ms} .mp-anim .is-in .mp-part-stop--2{animation-delay:800ms} /* Le repère ne se fond pas dans le groupe : il émet ses propres liens. */ .mp-anim .is-in .mp-part-out{stroke-dasharray:var(--mp-len,150);animation:mpDraw 420ms cubic-bezier(.22,.61,.36,1) 1280ms both} .mp-anim .is-in .mp-part-out--2{animation-delay:1420ms} /* ═══════════════════════════ 11. ÉCRAN 11 — NOTRE CONVICTION ════════ */ .mp-thesis{margin-bottom:clamp(0.5rem,2vh,1.25rem)} .mp-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(--mp-gold); max-width:46ch;margin:1.35rem 0 0; padding-left:1.15rem;border-left:2px solid var(--mp-gold); } .mp-zones{ position:relative; --mp-zgap:clamp(1.75rem,4vw,3.25rem); display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--mp-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. */ .mp-zones__line{ position:absolute;top:5px;left:0;height:1px; width:calc(300% + 2 * var(--mp-zgap)); background:rgba(255,255,255,0.18); } .mp-zones__line i{ display:block;height:100%;background:var(--mp-gold); transform-origin:left center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .mp-anim .mp-zones__line i{transform:scaleX(0)} .mp-anim .mp-zones.is-in .mp-zones__line i{transform:scaleX(1)} .mp-zone{position:relative;padding-top:2.25rem} .mp-zone::before{ content:"";position:absolute;top:0;left:0; width:2px;height:14px;margin-top:-2px; background:var(--mp-gold); } .mp-zone h3{ font-family:'Space Grotesk',sans-serif; font-size:0.82rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--mp-gold);margin:0 0 0.9rem;line-height:1.5; } .mp-zone p{font-size:1.02rem;line-height:1.7;color:var(--mp-on-dark);margin:0} .mp-anim .mp-zone{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1)} .mp-anim .is-in .mp-zone{opacity:1;transform:none} .mp-anim .is-in .mp-zone:nth-child(2){transition-delay:.22s} .mp-anim .is-in .mp-zone:nth-child(3){transition-delay:.44s} /* ════════════════════════════════ 12. ÉCRAN 12 — LA MÉTHODE ════════ */ .mp-method__grid{ display:grid; grid-template-columns:minmax(0,1.38fr) minmax(0,0.62fr); gap:clamp(2rem,4vw,3.25rem); align-items:center; } .mp-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); } .mp-step{position:relative;padding-top:0.95rem;border-top:1px solid var(--mp-line)} .mp-step__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.12em; color:var(--mp-gold-text);opacity:.75; transition:opacity .5s ease; } .mp-step h3{ font-family:'Ibarra Real Nova',serif; font-size:1.28rem;font-weight:700;line-height:1.25; color:var(--mp-deep);margin:0.35rem 0 0.5rem; transition:color .5s ease; } .mp-step p{font-size:1rem;line-height:1.6;color:var(--mp-body);margin:0;transition:color .5s ease} .mp-step::after{ content:"";position:absolute;top:-1px;left:0;width:100%;height:1px; background:var(--mp-gold); transform:scaleX(0);transform-origin:left center; transition:transform .6s cubic-bezier(.22,.61,.36,1); } .mp-step.is-done::after{transform:scaleX(1)} .mp-anim .mp-step h3{color:var(--mp-body-dim)} .mp-anim .mp-step p{color:var(--mp-body-dim)} .mp-step.is-done h3{color:var(--mp-deep)} .mp-step.is-done p{color:var(--mp-body)} .mp-step.is-done .mp-step__num{opacity:1} .mp-method__tag{ margin:clamp(1rem,2.2vh,1.4rem) 0 0; font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase; color:var(--mp-body-dim); } /* Le trajet suivi : cinq maillons, de l'engagement à l'expérience vécue. */ .mp-chain{position:relative;padding-left:1.75rem} .mp-chain__title{ font-family:'Ibarra Real Nova',serif; font-size:1rem;line-height:1.5; color:var(--mp-navy);margin:0 0 1.25rem; } .mp-chain__list{list-style:none;margin:0;padding:0;position:relative} .mp-chain__list::before{ content:"";position:absolute;left:calc(-1.75rem + 6px);top:0.9em;bottom:0.9em;width:1px; background:var(--mp-line); } .mp-chain__link{ position:relative;padding:0.68rem 0; font-size:1rem;line-height:1.45;color:var(--mp-body); } .mp-chain__link + .mp-chain__link{border-top:1px solid var(--mp-line)} .mp-chain__dot{ position:absolute;left:-1.75rem;top:1.05em; width:13px;height:13px;margin-top:-6px;border-radius:50%; border:1.5px solid var(--mp-gold-dark); box-shadow:inset 0 0 0 3px var(--mp-gold); background:#fff; } .mp-anim .mp-chain__link{opacity:0;transform:translateX(-8px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)} .mp-anim .is-in .mp-chain__link{opacity:1;transform:none} .mp-anim .is-in .mp-chain__link:nth-child(2){transition-delay:.12s} .mp-anim .is-in .mp-chain__link:nth-child(3){transition-delay:.24s} .mp-anim .is-in .mp-chain__link:nth-child(4){transition-delay:.36s} .mp-anim .is-in .mp-chain__link:nth-child(5){transition-delay:.48s} /* ══════════════════════ 13. ÉCRAN 13 — LES TROIS FAÇONS D'AGIR ═════ */ .mp-acts{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); align-items:center; } .mp-acts.mp-tabs-ready{grid-template-columns:minmax(0,330px) minmax(0,1fr)} .mp-acts__aside{align-self:center} .mp-acts__lead{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem);max-width:20ch;margin-bottom:0} .mp-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(--mp-body-dim); } .mp-tabs-ready .mp-acts__hint{display:block} .mp-acts__rail{display:none;flex-direction:column} .mp-tabs-ready .mp-acts__rail{display:flex} .mp-choice{ position:relative;display:block;width:100%; appearance:none;-webkit-appearance:none; background:none;border:0; border-bottom:1px solid var(--mp-line); padding:0;min-height:48px; text-align:left;cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .28s ease; } .mp-choice::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--mp-gold); transform:scaleY(0);transform-origin:center; transition:transform .28s ease; } .mp-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); } .mp-choice__num{ font-size:0.8rem;font-weight:700;letter-spacing:0.08em; color:var(--mp-gold-text);opacity:.92; transition:opacity .28s ease; } .mp-choice__name{ font-family:'Ibarra Real Nova',serif; font-size:1.18rem;line-height:1.25;font-weight:600; color:var(--mp-body); transition:color .28s ease; } .mp-choice__state{ font-size:0.68rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--mp-body-dim);white-space:nowrap; transition:color .28s ease; } .mp-choice__on{display:none} .mp-choice__off{display:inline} .mp-choice:hover .mp-choice__name{color:var(--mp-deep)} .mp-choice:hover .mp-choice__state{color:var(--mp-gold-text)} .mp-choice:hover .mp-choice__num{opacity:1} .mp-choice:hover{border-bottom-color:var(--mp-gold)} .mp-choice:hover .mp-choice__inner{transform:translateX(4px)} .mp-choice[aria-selected="true"]{border-bottom-color:var(--mp-gold)} .mp-choice[aria-selected="true"]::before{transform:scaleY(1)} .mp-choice[aria-selected="true"] .mp-choice__num{opacity:1} .mp-choice[aria-selected="true"] .mp-choice__name{color:var(--mp-deep)} .mp-choice[aria-selected="true"] .mp-choice__state{color:var(--mp-gold-text)} .mp-choice[aria-selected="true"] .mp-choice__on{display:inline} .mp-choice[aria-selected="true"] .mp-choice__off{display:none} .mp-choice[aria-selected="true"]:hover .mp-choice__inner{transform:none} .mp-acts-scene{padding-block:clamp(2.25rem,4.5vh,3.5rem)} .mp-acts__panel{ display:grid; /* Colonne de texte large : le volet le plus dense doit tenir dans un ecran comme les deux autres, sinon changer d'onglet deplacerait la mise en page. */ grid-template-columns:minmax(0,1.34fr) minmax(0,0.66fr); gap:clamp(1.75rem,3.2vw,2.75rem); align-items:center; } .mp-acts__panel[hidden]{display:none} .mp-acts__panel + .mp-acts__panel{margin-top:clamp(2.5rem,6vh,3.5rem)} .mp-tabs-ready .mp-acts__panel + .mp-acts__panel{margin-top:0} .mp-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(--mp-deep); margin:0 0 1rem;max-width:28ch; } .mp-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. */ .mp-dg-scan{transform-box:fill-box;transform-origin:center} .mp-dg-mark{transform-box:fill-box;transform-origin:center} /* 01 — Diagnostiquer : quatre parcours, trois ruptures signalées, une lecture qui désigne les relais à renforcer. (1620 ms) */ .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-path{stroke-dasharray:var(--mp-len,420);animation:mpDraw 820ms cubic-bezier(.22,.61,.36,1) both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-path--2{animation-delay:90ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-path--3{animation-delay:180ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-path--4{animation-delay:270ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-gap{animation:mpFade 240ms ease 700ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-scan{animation:mpGrowY 760ms cubic-bezier(.3,.7,.3,1) 760ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-mark--1{animation:mpGrowY 280ms cubic-bezier(.22,.61,.36,1) 900ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-mark--2{animation:mpGrowY 280ms cubic-bezier(.22,.61,.36,1) 1040ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-mark--3{animation:mpGrowY 280ms cubic-bezier(.22,.61,.36,1) 1180ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-dg-person{transform-box:fill-box;transform-origin:center;animation:mpPop 300ms cubic-bezier(.22,.61,.36,1) 1320ms both} /* 02 — Mobiliser : six trajectoires convergent, une décision repart vers les six acteurs. (1700 ms) */ .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-origin{transform-box:fill-box;transform-origin:center;animation:mpPop 240ms ease both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-in{stroke-dasharray:var(--mp-len,230);animation:mpDraw 700ms cubic-bezier(.22,.61,.36,1) 180ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-in--2{animation-delay:250ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-in--3{animation-delay:320ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-in--4{animation-delay:390ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-in--5{animation-delay:460ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-in--6{animation-delay:530ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-table{transform-box:fill-box;transform-origin:center;animation:mpPop 420ms cubic-bezier(.22,.61,.36,1) 1080ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-mb-back path{stroke-dasharray:var(--mp-len,120);animation:mpDraw 420ms cubic-bezier(.22,.61,.36,1) 1280ms both} /* 03 — Former : un repère transmis, adapté par chaque acteur, puis mis en réseau. (1700 ms) */ .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-seed{transform-box:fill-box;transform-origin:center;animation:mpPop 280ms ease both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-out{stroke-dasharray:var(--mp-len,170);animation:mpDraw 520ms cubic-bezier(.22,.61,.36,1) 240ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-out--2{animation-delay:340ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-out--3{animation-delay:440ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-out--4{animation-delay:540ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-actor{transform-box:fill-box;transform-origin:center;animation:mpPop 280ms ease both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-actor--1{animation-delay:800ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-actor--2{animation-delay:880ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-actor--3{animation-delay:960ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-actor--4{animation-delay:1040ms} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-net path{stroke-dasharray:var(--mp-len,170);animation:mpDraw 480ms cubic-bezier(.22,.61,.36,1) 1180ms both} .mp-anim .mp-tabs-ready .mp-acts__panel.is-active.is-animating .mp-fm-hub circle{transform-box:fill-box;transform-origin:center;animation:mpPop 260ms ease 1440ms both} /* ════════════════════════════ 14. ÉCRAN 14 — PREUVE PHOTOGRAPHIQUE ══ */ .mp-proof__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .mp-proof__media{margin:0} .mp-proof__media img{ display:block;width:100%;height:auto; /* Ratio natif conservé : aucune personne n'est recadrée. */ border-top:2px solid var(--mp-gold); } .mp-proof__media figcaption{ margin-top:0.9rem; font-size:0.86rem;line-height:1.55; color:var(--mp-body-dim); } /* ── Écran 15 : l'écosystème territorial ───────────────────────────── Mosaïca est placée de côté : ses liens relient les autres entre eux plutôt que de converger vers elle. (1700 ms) */ .mp-anim .is-in .mp-eco-node{transform-box:fill-box;transform-origin:center;animation:mpPop 300ms ease both} .mp-anim .is-in .mp-eco-node--2{animation-delay:80ms} .mp-anim .is-in .mp-eco-node--3{animation-delay:160ms} .mp-anim .is-in .mp-eco-node--4{animation-delay:240ms} .mp-anim .is-in .mp-eco-node--5{animation-delay:320ms} .mp-anim .is-in .mp-eco-node--6{animation-delay:400ms} .mp-anim .is-in .mp-eco-self{animation:mpFade 320ms ease 520ms both} .mp-anim .is-in .mp-eco-link{stroke-dasharray:var(--mp-len,200);animation:mpDraw 460ms cubic-bezier(.22,.61,.36,1) both} .mp-anim .is-in .mp-eco-link--1{animation-delay:740ms} .mp-anim .is-in .mp-eco-link--2{animation-delay:840ms} .mp-anim .is-in .mp-eco-link--3{animation-delay:940ms} .mp-anim .is-in .mp-eco-link--4{animation-delay:1040ms} .mp-anim .is-in .mp-eco-link--5{animation-delay:1140ms} .mp-anim .is-in .mp-eco-link--6{animation-delay:1240ms} .mp-anim .is-in .mp-eco-link--7{animation-delay:1340ms} /* ═══════════════════════════════════ 16. ÉCRAN 16 — CONCLUSION ══════ */ .mp-end{background:var(--mp-deep);overflow:hidden} /* Des liens territoriaux : deux trames fines et croisées. Aucune image, aucun flou, aucun symbole. */ .mp-end__texture{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(28deg,rgba(255,255,255,0.045) 0 1px,transparent 1px 46px), repeating-linear-gradient(-28deg,rgba(255,255,255,0.035) 0 1px,transparent 1px 46px); opacity:.85; } .mp-end__inner{position:relative} .mp-end__strong{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.25rem,1rem + 1.1vw,1.7rem); line-height:1.45;color:var(--mp-gold); margin:0 0 1.35rem;max-width:38ch; } .mp-end__sign{ font-size:1.02rem;line-height:1.7; color:var(--mp-on-dark);max-width:52ch;margin:0; } .mp-end__note{ margin:0.85rem 0 0; font-size:0.94rem;line-height:1.65; color:var(--mp-on-dark-dim);max-width:52ch; } /* ══════════════════════ 17. 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. */ .mp-chapters{display:none} .mp-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.05rem} .mp-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; } .mp-chapters__dot{ flex:none;width:11px;height:11px;border-radius:50%; border:1.5px solid currentColor; transition:box-shadow .4s ease,border-color .4s ease,transform .4s ease; } .mp-chapters a:hover{color:var(--mp-gold-dark)} .mp-chapters a.is-active{color:var(--mp-deep)} .mp-chapters a.is-active .mp-chapters__dot{border-color:var(--mp-gold-dark);box-shadow:inset 0 0 0 3px var(--mp-gold);transform:scale(1.15)} .mp-chapters__track{position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:rgba(10,56,80,0.16)} .mp-chapters__track i{ display:block;height:100%;background:var(--mp-gold); transform:scaleY(var(--mp-p,0));transform-origin:top center; transition:transform .3s linear; } .mp-chapters.is-on-dark a{color:rgba(255,255,255,0.66)} .mp-chapters.is-on-dark a:hover{color:var(--mp-gold)} .mp-chapters.is-on-dark a.is-active{color:#fff} .mp-chapters.is-on-dark .mp-chapters__track{background:rgba(255,255,255,0.22)} .mp-chapters.is-on-dark a:focus-visible{outline-color:var(--mp-gold)} @media(min-width:1200px){ .mp-js .mp-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; } /* Entre 1200 et 1439 px la gouttière ne suffit pas au libellé : on ne garde que les repères, le nom reste accessible aux lecteurs d'écran. */ .mp-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){ .mp-chapters__label{ position:static;width:auto;height:auto; margin:0;overflow:visible;clip-path:none; } } /* ═══════════════ 18. ORDINATEUR PORTABLE PEU HAUT (≤ 840px) ═════════ */ @media(min-width:1081px) and (max-height:840px){ .mp-scene{padding-block:clamp(1.75rem,3.4vh,2.75rem)} .mp-acts-scene{padding-block:clamp(1.4rem,2.8vh,2.25rem)} .mp-acts.mp-tabs-ready{grid-template-columns:minmax(0,300px) minmax(0,1fr)} .mp-acts__hint{margin-top:clamp(1.1rem,2.5vh,1.6rem)} .mp-acts__title{margin-bottom:0.75rem;max-width:32ch} .mp-acts__panel .mp-eyebrow{margin-bottom:0.75rem} .mp-acts__panel .mp-result{margin-top:0.9rem;padding-top:0.7rem} .mp-acts__panel .mp-link{margin-top:0.7rem} .mp-hero__viz{width:min(100%,470px)} .mp-steps{gap:clamp(0.9rem,1.8vw,1.35rem)} .mp-method__tag{margin-top:1rem} .mp-stance{margin-top:1.1rem;padding-top:0.85rem} .mp-note{margin-top:0.8rem} } /* ═════════════════════════════════════ 19. TABLETTE (≤ 1080px) ══════ */ @media(max-width:1080px){ .mp-hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .mp-hero__viz{justify-self:start;width:min(100%,440px)} .mp-split,.mp-split--tight{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .mp-split--flip .mp-real__viz{order:0} .mp-real__viz{width:min(100%,560px)} .mp-levels__grid{grid-template-columns:minmax(0,1fr)} .mp-method__grid{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vh,2.75rem)} .mp-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. */ .mp-zones{grid-template-columns:minmax(0,1fr);gap:2rem;padding-left:2rem} .mp-zones__line{display:none} .mp-zone{padding-top:0} .mp-zone::before{top:0.35em;left:-2rem;margin-top:0} .mp-zones::before, .mp-zones::after{content:"";position:absolute;top:6px;bottom:6px;left:5px;width:1px} .mp-zones::before{background:rgba(255,255,255,0.18)} .mp-zones::after{ background:var(--mp-gold); transform-origin:top center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .mp-anim .mp-zones::after{transform:scaleY(0)} .mp-anim .mp-zones.is-in::after{transform:scaleY(1)} /* Les trois façons d'agir : trois lignes pleine largeur. */ .mp-acts.mp-tabs-ready{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .mp-acts__lead{max-width:24ch} .mp-choice{border:1px solid var(--mp-line);border-left-width:2px;background:#fff;margin-bottom:0.5rem} .mp-choice::before{width:2px;left:-2px} .mp-choice__inner{min-height:52px;padding:0.85rem 1rem} .mp-choice:hover .mp-choice__inner{transform:none} .mp-acts__panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .mp-acts__viz{width:min(100%,420px)} .mp-proof__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .mp-proof__media{max-width:560px} } /* ═════════════════════════════════════ 20. TÉLÉPHONE (≤ 900px) ══════ */ @media(max-width:900px){ /* Le récit redevient une succession de sections verticales. */ .mp-levels__aside{position:static;padding-block:0;margin-bottom:1.5rem} .mp-rail{display:none} .mp-levels__grid{gap:0} .mp-levels{padding-top:clamp(3rem,7vh,4rem)} .mp-level{min-height:var(--mp-screen);padding-block:clamp(2.5rem,6vh,3.5rem);position:relative} .mp-level:first-child{min-height:calc(var(--mp-screen) - 6.5rem)} /* Repère de relais propre au téléphone : au-dessus du texte. */ .mp-level__mark{display:block;position:relative;height:30px;margin-bottom:1.1rem} .mp-level__mark::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--mp-line)} .mp-level__mark i{ position:absolute;left:0;bottom:0;width:13px;height:13px;border-radius:50%; border:1.5px solid var(--mp-gold-dark);box-shadow:inset 0 0 0 3px var(--mp-gold); } .mp-hero__inner{gap:1.75rem} .mp-hero__viz{width:min(100%,330px);grid-template-columns:minmax(84px,112px) minmax(0,1fr)} .mp-steps{grid-template-columns:minmax(0,1fr);gap:1.5rem} .mp-signals{padding-left:2.5rem} .mp-signal__num{left:-2.5rem} .mp-signal::before{left:-1.45rem} .mp-actions{gap:0.75rem} .mp-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. */ .mp-page .mp-p, .mp-page .mp-zone p, .mp-page .mp-step p, .mp-page .mp-end__sign{font-size:16px !important;line-height:1.7 !important} .mp-page .mp-lead{font-size:17px !important;line-height:1.7 !important} .mp-page .mp-signal{font-size:16px !important;line-height:1.6 !important} .mp-page .mp-question{font-size:18px !important} .mp-page .mp-accent{font-size:19px !important} .mp-page .mp-result{font-size:16px !important} .mp-page .mp-result b{font-size:13px !important} .mp-page .mp-note{font-size:15px !important;line-height:1.6 !important} .mp-page .mp-stance{font-size:17px !important;line-height:1.55 !important} .mp-page .mp-end__note{font-size:15px !important;line-height:1.65 !important} .mp-page .mp-eyebrow{font-size:13.5px !important;letter-spacing:0.13em} .mp-page .mp-crumb, .mp-page .mp-crumb a{font-size:13px !important} .mp-page .mp-btn, .mp-page .mp-link{font-size:16px !important} .mp-page .mp-level h3{font-size:clamp(1.45rem,5.6vw,1.9rem) !important;line-height:1.18 !important} .mp-page .mp-level__num{font-size:13px !important} .mp-page .mp-step h3{font-size:19px !important} .mp-page .mp-step__num{font-size:13px !important} .mp-page .mp-zone h3{font-size:14px !important;letter-spacing:0.13em} .mp-page .mp-levels__chapter{font-size:17px !important;line-height:1.45 !important} .mp-page .mp-real__num{font-size:clamp(2.1rem,9vw,2.8rem) !important} .mp-page .mp-end__strong{font-size:clamp(1.2rem,5vw,1.5rem) !important} .mp-page .mp-method__tag{font-size:13px !important;letter-spacing:0.08em} .mp-page .mp-chain__title{font-size:16px !important;line-height:1.5 !important} .mp-page .mp-chain__link{font-size:16px !important} .mp-page .mp-signal__num, .mp-page .mp-hero__n, .mp-page .mp-network__n, .mp-page .mp-steps-viz__n, .mp-page .mp-eco__n{font-size:13px !important} .mp-page .mp-hero__legend li, .mp-page .mp-hero__key, .mp-page .mp-hero__key span, .mp-page .mp-network__legend li, .mp-page .mp-steps-viz__legend li, .mp-page .mp-eco__legend li{font-size:14px !important} .mp-page .mp-acts__title{font-size:clamp(1.3rem,5vw,1.6rem) !important;line-height:1.22 !important} .mp-page .mp-thesis__claim{font-size:clamp(1.15rem,4.6vw,1.45rem) !important;line-height:1.42 !important} .mp-page .mp-choice__name{font-size:18px !important;line-height:1.25 !important} .mp-page .mp-choice__num{font-size:13px !important} .mp-page .mp-choice__state{font-size:11.5px !important;letter-spacing:0.14em} .mp-page .mp-acts__hint{font-size:13px !important;letter-spacing:0.16em} .mp-page .mp-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. */ .mp-hero__viz{width:min(100%,300px);grid-template-columns:minmax(0,1fr);gap:1.15rem} .mp-hero__legend{position:static;order:2;display:grid;grid-template-columns:minmax(0,1fr);gap:0.4rem} .mp-hero__legend li{position:static;transform:none;text-align:left;justify-content:flex-start;max-width:none} .mp-hero__key{order:3;margin-top:0.4rem} .mp-scene{padding-block:clamp(2.5rem,6vh,3.5rem)} .mp-network__legend,.mp-steps-viz__legend,.mp-eco__legend{gap:0.45rem 1.1rem} } @media(max-width:420px){ .mp-hero__viz{width:min(100%,278px)} .mp-signals{padding-left:2.25rem} .mp-signal__num{left:-2.25rem} /* Petit téléphone : le titre et l'introduction sont longs. On resserre les espaces — jamais la taille du titre — pour que le bouton principal demeure dans la première lecture. */ .mp-hero{padding-block:2rem} .mp-hero .mp-crumb{margin-bottom:1rem} .mp-hero .mp-eyebrow{margin-bottom:0.75rem} .mp-hero .mp-h1{margin-bottom:0.9rem} .mp-page .mp-hero__text .mp-lead{line-height:1.5 !important} } /* 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){ .mp-scene,.mp-level,.mp-level:first-child{min-height:0} .mp-scene{padding-block:clamp(2rem,8vh,3rem)} } /* ═══════════════════ 21. 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){ .mp-page *, .mp-page *::before, .mp-page *::after{ animation:none !important; transition:none !important; } .mp-page [data-mp-in="rise"], .mp-page [data-mp-in="rise"].is-in, .mp-page .mp-zone, .mp-page .mp-chain__link{opacity:1 !important;transform:none !important} .mp-page .mp-signal{color:var(--mp-body) !important} .mp-page .mp-signals__axis i, .mp-page .mp-rail__line i, .mp-page .mp-acc-clarify, .mp-page .mp-dg-scan, .mp-page .mp-dg-mark{transform:scaleY(1) !important} .mp-page .mp-zones__line i, .mp-page .mp-acc-bar, .mp-page .mp-step::after{transform:scaleX(1) !important} .mp-page .mp-acc-in, .mp-page .mp-acc-out, .mp-page .mp-net-link, .mp-page .mp-part-link, .mp-page .mp-part-out, .mp-page .mp-eco-link, .mp-page .mp-dg-path, .mp-page .mp-mb-in, .mp-page .mp-mb-back path, .mp-page .mp-fm-out, .mp-page .mp-fm-net path, .mp-page .mp-down, .mp-page .mp-up{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .mp-page .mp-acc-info, .mp-page .mp-acc-pt, .mp-page .mp-acc-person, .mp-page .mp-net-node, .mp-page .mp-part-stop, .mp-page .mp-eco-node, .mp-page .mp-eco-self, .mp-page .mp-dg-gap, .mp-page .mp-dg-person, .mp-page .mp-mb-origin, .mp-page .mp-mb-table, .mp-page .mp-fm-seed, .mp-page .mp-fm-actor, .mp-page .mp-fm-hub circle, .mp-page .mp-node{opacity:1 !important;transform:none !important} .mp-page .mp-part-mark{transform:translateX(252px) !important} } @media(prefers-reduced-motion:reduce) and (max-width:1080px){ .mp-page .mp-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. */ .mp-chapters.is-out{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .mp-chapters{transition:opacity .28s ease} @media(prefers-reduced-motion:reduce){ .mp-chapters,.mp-chapters.is-out{transition:none} }