/* ========================================================================= MOSAICA (Mosaïca Conseils) : CONSTRUCTION, CULTURE DE CHANTIER ------------------------------------------------------------------------- Feuille chargée UNIQUEMENT par industries/construction.html. Toutes les règles sont préfixées `cst-` et confinées à `.cst-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. Sur ordinateur, chaque scène occupe au minimum la hauteur visible sous la barre de navigation. Sur téléphone, aucune hauteur n'est imposée : le contenu se déroule naturellement. 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.cst-anim`, classe posée par le filet du et confirmée par le script. Les images clés n'écrivent que leur état de départ (`from`) : l'état d'arrivée reste celui de la feuille de style, donc jamais de valeur dupliquée. Uniquement `transform`, `opacity`, `stroke-dasharray` et `stroke-dashoffset` : rendu identique dans Chrome et dans Edge, et aucune de ces propriétés ne déplace la mise en page. SIGNATURE GRAPHIQUE L'assemblage. Des modules orthogonaux qui ne sont pas encore alignés, des points de passage entre des lignes de travail parallèles, un axe commun qui demeure reconnaissable pendant que la configuration change. Bleu profond, bleu institutionnel, bleu acier, or discret, gris froid. PALETTE : variables globales de assets/styles.css, plus trois teintes de service absentes du global : --cst-gold-text doré assombri, lisible sur fond clair --cst-steel bleu acier des tracés secondaires --cst-body gris bleuté de lecture ========================================================================= */ /* ══════════════════════════════════════════════════════════ 1. JETONS ═══ */ .cst-page{ --cst-navy:var(--navy,#0e4d6c); --cst-deep:var(--navy-deep,#0a3850); --cst-gold:var(--gold,#C9A45C); --cst-gold-dark:var(--gold-dark,#A9803F); --cst-gold-text:#7a5a24; --cst-gray1:var(--gray1,#F8F9FA); --cst-gray2:#eef1f3; --cst-steel:#4a6b80; --cst-body:#3d4a52; --cst-body-dim:#5c6a72; --cst-on-dark:rgba(255,255,255,0.86); --cst-on-dark-dim:rgba(255,255,255,0.68); --cst-line:rgba(10,56,80,0.14); --cst-stroke:rgba(10,56,80,0.34); --cst-stroke-soft:rgba(10,56,80,0.15); --cst-node:#0a3850; --cst-shell:1180px; --cst-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. */ --cst-screen:calc(100vh - var(--nav-h,68px)); font-family:'Space Grotesk',sans-serif; color:var(--cst-body); } @supports (height:100svh){ .cst-page{--cst-screen:calc(100svh - var(--nav-h,68px))} } .cst-page [data-cst-theme="dark"]{ --cst-stroke:rgba(255,255,255,0.38); --cst-stroke-soft:rgba(255,255,255,0.17); --cst-node:rgba(255,255,255,0.9); --cst-line:rgba(255,255,255,0.2); --cst-steel:#9db8c9; } /* Les ancres de chapitre ne passent jamais sous la barre fixe. */ .cst-page [id]{scroll-margin-top:calc(var(--nav-h,68px) + 1rem)} /* ══════════════════════════════════════════ 2. SCENE ET CONTENEUR ══════ */ .cst-scene{ position:relative; min-height:var(--cst-screen); display:flex; align-items:center; padding-block:clamp(3rem,7vh,5.5rem); } .cst-scene--white{background:#fff} .cst-scene--gray{background:var(--cst-gray1)} .cst-scene--navy{background:var(--cst-deep)} .cst-scene--steel{background:var(--cst-gray2)} .cst-shell{ width:min(var(--cst-shell),100%); margin-inline:auto; padding-inline:var(--cst-pad); } .cst-shell > *{min-width:0} .cst-narrow{width:min(860px,100%)} .cst-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .cst-split--tight{grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr)} .cst-split--wide{grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr)} /* Alternance des compositions : sur ordinateur, le schéma passe à gauche. L'ordre du document reste texte puis schéma, donc l'empilement au téléphone et la lecture au clavier gardent leur logique. */ @media(min-width:1081px){ .cst-split--flip > *:first-child{order:2} /* `order` déplace l'élément, pas la piste de grille : les proportions doivent donc être inversées pour que la colonne la plus large reste celle du texte. */ .cst-split--tight.cst-split--flip{grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr)} .cst-split--wide.cst-split--flip{grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr)} } /* ═══════════════════════════════════════════════════ 3. TYPOGRAPHIE ═══ */ .cst-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; line-height:1.55; color:var(--cst-gold-text); margin:0 0 1.15rem; } [data-cst-theme="dark"] .cst-eyebrow{color:var(--cst-gold)} .cst-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.55rem,1.05rem + 2.5vw,3.05rem); line-height:1.13;color:#fff; margin:0 0 1.35rem;max-width:28ch; } .cst-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(--cst-deep); margin:0 0 1.2rem;max-width:25ch; } [data-cst-theme="dark"] .cst-h2{color:#fff} .cst-h2--wide{max-width:32ch} .cst-p{ font-size:1.05rem;line-height:1.75; color:var(--cst-body);max-width:58ch;margin:0; } .cst-p + .cst-p{margin-top:1rem} [data-cst-theme="dark"] .cst-p{color:var(--cst-on-dark)} .cst-lead{ font-size:1.12rem;line-height:1.72; color:var(--cst-on-dark);max-width:54ch;margin:0; } /* Phrase forte : une position tenue, jamais un slogan encadré. */ .cst-statement{ margin:1.9rem 0 0; font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.35rem,1rem + 1.15vw,2rem); line-height:1.34;color:var(--cst-deep); max-width:34ch; } .cst-statement--inline{ margin:1.6rem 0 0;padding-left:1.15rem; border-left:2px solid var(--cst-gold); font-size:1.2rem;line-height:1.5;max-width:46ch; } .cst-statement--dark{color:#fff} [data-cst-theme="dark"] .cst-statement{color:#fff} /* Livrables : une ligne, jamais une carte. */ .cst-result{ margin:1.35rem 0 0;padding-top:1rem; border-top:1px solid var(--cst-line); font-size:1.02rem;line-height:1.65; color:var(--cst-deep);max-width:52ch; } .cst-result b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--cst-gold-text);margin-bottom:0.4rem; } /* Précision de périmètre : une réserve explicite, jamais un avertissement. */ .cst-note{ margin:1.2rem 0 0;padding-left:1rem; border-left:1px solid var(--cst-line); font-size:0.96rem;line-height:1.62; color:var(--cst-body-dim);max-width:54ch; } /* ═════════════════════════════════════════════ 4. ACTIONS ET LIENS ════ */ .cst-actions{display:flex;flex-wrap:wrap;gap:0.85rem 1rem;margin-top:2.1rem} .cst-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; } .cst-btn--gold{background:var(--cst-gold);color:#0a3850;border-color:var(--cst-gold)} .cst-btn--gold:hover{background:#d9b674;border-color:#d9b674;color:#0a3850} .cst-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)} .cst-btn--ghost:hover{border-color:var(--cst-gold);color:var(--cst-gold)} .cst-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(--cst-gold-text);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .cst-link::after{content:"\2192";font-weight:400} .cst-link:hover{color:var(--cst-deep)} .cst-page a:focus-visible, .cst-page button:focus-visible{ outline:2px solid var(--cst-gold-dark); outline-offset:3px; } [data-cst-theme="dark"] a:focus-visible, [data-cst-theme="dark"] button:focus-visible{outline-color:var(--cst-gold)} .cst-crumb{ font-size:0.82rem;line-height:1.6; color:var(--cst-on-dark-dim);margin:0 0 1.5rem; } .cst-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.3)} .cst-crumb a:hover{color:#fff;border-bottom-color:var(--cst-gold)} .cst-crumb span{padding:0 0.45rem;opacity:.6} /* Complément réservé aux lecteurs d'écran. */ .cst-sr{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } /* ═════════════════════════════════════ 5. APPARITION DES CONTENUS ═════ */ /* Repos = état final. L'attente n'existe que sous `html.cst-anim`. */ .cst-anim .cst-page [data-cst-in="rise"]{ opacity:0;transform:translateY(14px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } .cst-anim .cst-page [data-cst-in="rise"].is-in{opacity:1;transform:none} .cst-anim .cst-page [data-cst-in="rise"][data-cst-delay="1"]{transition-delay:.09s} .cst-anim .cst-page [data-cst-in="rise"][data-cst-delay="2"]{transition-delay:.18s} .cst-anim .cst-page [data-cst-in="rise"][data-cst-delay="3"]{transition-delay:.27s} .cst-anim .cst-page [data-cst-in="rise"][data-cst-delay="4"]{transition-delay:.36s} /* ═══════════════════════════════════════════════ 6. ECRAN 1, HERO ═════ */ .cst-hero{ position:relative; min-height:var(--cst-screen); display:flex;align-items:center; background:var(--cst-deep); padding-block:clamp(2.5rem,6vh,4.5rem); } .cst-hero__inner{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .cst-hero__viz{width:min(100%,470px);justify-self:end} .cst-hero__legend{ list-style:none;margin:1.15rem 0 0;padding:0; display:grid;gap:0.45rem; } .cst-hero__legend li{ display:flex;align-items:baseline;gap:0.6rem; font-size:0.86rem;line-height:1.5; color:var(--cst-on-dark-dim); } .cst-hero__n{ flex:none; font-size:0.7rem;font-weight:700;letter-spacing:0.08em; color:var(--cst-gold); } /* ══════════════════════════════ 7. ECRAN 2, ENVIRONNEMENT EN MOUVEMENT */ .cst-shift__viz{width:min(100%,520px)} /* ═════════════════════════ 8. ECRAN 3, LES CINQ LIEUX DE LA CULTURE ═══ */ /* 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. */ .cst-levels{background:var(--cst-gray1);position:relative;overflow-x:clip} @supports not (overflow:clip){ .cst-levels{overflow-x:visible} } .cst-levels__grid{ display:grid; grid-template-columns:minmax(0,36%) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .cst-levels__aside{ position:sticky; top:calc(var(--nav-h,68px) + clamp(2rem,7vh,4.5rem)); align-self:start; padding-block:clamp(2rem,6vh,3rem); } .cst-levels__chapter{ font-family:'Ibarra Real Nova',serif; font-size:1.15rem;font-weight:600;line-height:1.45; color:var(--cst-navy);margin:0;max-width:24ch; } .cst-rail{position:relative;margin-top:clamp(1.75rem,5vh,2.75rem);padding-left:2rem} .cst-rail__line{position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--cst-line)} .cst-rail__line i{ display:block;height:100%;background:var(--cst-gold); transform:scaleY(1);transform-origin:top center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } .cst-anim .cst-rail__line i{transform:scaleY(var(--cst-p,0))} .cst-rail__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1rem,3.2vh,1.9rem)} .cst-rail__item{position:relative;display:flex;align-items:baseline;gap:0.6rem;min-height:18px} /* Le repère de niveau : un carré ouvert qui se remplit quand il est actif. Le carré est la forme de l'assemblage, il distingue ce chapitre des pastilles rondes de l'indicateur général. */ .cst-rail__mark{ position:absolute;left:calc(-2rem + 0.5px);top:0.35em; width:11px;height:11px; border:1.5px solid var(--cst-stroke);background:var(--cst-gray1); transition:background-color .5s ease,border-color .5s ease,transform .5s ease; } .cst-rail__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.06em; color:var(--cst-gold-text);opacity:.72;flex:none; transition:opacity .5s ease; } .cst-rail__label{ font-size:0.88rem;line-height:1.45; color:var(--cst-body-dim); transition:color .5s ease; } .cst-rail__item.is-past .cst-rail__mark{background:var(--cst-gold);border-color:var(--cst-gold);opacity:.5} .cst-rail__item.is-active .cst-rail__mark{background:var(--cst-gold);border-color:var(--cst-gold-dark);transform:scale(1.25)} .cst-rail__item.is-active .cst-rail__num{opacity:1} .cst-rail__item.is-active .cst-rail__label{color:var(--cst-deep);font-weight:600} .cst-levels__steps{display:block} .cst-level{ min-height:var(--cst-screen); display:flex;flex-direction:column;justify-content:center; padding-block:clamp(2rem,7vh,4rem); } .cst-level__num{ font-size:0.78rem;font-weight:700;letter-spacing:0.14em; color:var(--cst-gold-text);margin:0 0 0.7rem; } .cst-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(--cst-deep); margin:0 0 1.1rem;max-width:21ch; } .cst-question{ margin:1.7rem 0 0;padding-left:1.15rem; border-left:2px solid var(--cst-gold); font-family:'Ibarra Real Nova',serif; font-size:1.22rem;line-height:1.5; color:var(--cst-navy);max-width:46ch; } /* Repère de niveau au téléphone, quand le rail latéral disparaît. */ .cst-level__mark{display:none} /* ═══════════════════════════ 9. ECRANS 4 A 6, LES TROIS REALITES ══════ */ .cst-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; /* Or assombri, pleine opacité : le doré clair tombait à 2,35:1 sur blanc, sous le seuil de 3:1 des grands caractères. Mesuré ici à 3,59:1 sans perdre la teinte de la maison. */ color:var(--cst-gold-dark); margin:0 0 0.9rem; } .cst-real__viz{width:min(100%,500px)} /* ══════════════════════════════════ 10. ECRAN 7, NOTRE CONVICTION ═════ */ .cst-conv__head{max-width:34ch} .cst-conv__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3.2vw,3rem); margin-top:clamp(2.25rem,5vh,3.5rem); } .cst-conv__col{ padding-top:1.1rem; border-top:1px solid rgba(255,255,255,0.22); } .cst-conv__col h3{ font-family:'Space Grotesk',sans-serif; font-size:0.76rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--cst-gold);margin:0 0 0.8rem; } .cst-conv__col p{ font-size:1rem;line-height:1.68; color:var(--cst-on-dark);margin:0; } /* ════════════════════════════════════════ 11. ECRAN 8, SUPERVISION ════ */ .cst-sup__viz{width:min(100%,470px)} /* Pratiques : une suite numérotée sur une même colonne, pas des cartes. */ .cst-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0} .cst-list__item{ display:grid;grid-template-columns:auto minmax(0,1fr); gap:0.85rem;align-items:baseline; padding-block:0.72rem; border-top:1px solid var(--cst-line); font-size:1.02rem;line-height:1.55; color:var(--cst-body); } .cst-list__item:last-child{border-bottom:1px solid var(--cst-line)} .cst-list__num{ font-size:0.72rem;font-weight:700;letter-spacing:0.08em; color:var(--cst-gold-text); } [data-cst-theme="dark"] .cst-list__item{color:var(--cst-on-dark);border-color:rgba(255,255,255,0.18)} [data-cst-theme="dark"] .cst-list__num{color:var(--cst-gold)} /* ══════════════════════════ 12. ECRAN 9, PARCOURS D'INTEGRATION ═══════ */ .cst-path{margin-top:clamp(2rem,4.5vh,3rem)} .cst-path__wrap{position:relative;padding-top:2.4rem} .cst-path__line{position:absolute;left:0;right:0;top:5px;height:1px;background:var(--cst-line)} .cst-path__line i{ display:block;height:100%;width:100%;background:var(--cst-gold); transform:scaleX(1);transform-origin:left center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .cst-anim .cst-path__line i{transform:scaleX(var(--cst-p,0))} .cst-steps{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem); } .cst-step{position:relative} .cst-step::before{ content:"";position:absolute;left:0;top:-2.4rem; width:11px;height:11px; border:1.5px solid var(--cst-stroke);background:var(--cst-gray1); transition:background-color .5s ease,border-color .5s ease,transform .5s ease; } .cst-step.is-done::before{background:var(--cst-gold);border-color:var(--cst-gold-dark)} .cst-step__num{ font-size:0.72rem;font-weight:700;letter-spacing:0.1em; color:var(--cst-gold-text);display:block;margin-bottom:0.4rem; } .cst-step h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:1.25rem;line-height:1.22; color:var(--cst-deep);margin:0 0 0.55rem; } .cst-step p{ font-size:0.98rem;line-height:1.6; color:var(--cst-body);margin:0; } /* ═══════════════════════════════ 13. ECRAN 10, MENTORS ET PARRAINS ════ */ .cst-mentor__viz{width:min(100%,500px)} /* ══════════════════════════════════ 14. ECRAN 11, PREUVE DE TERRAIN ═══ */ .cst-proof__grid{ display:grid; grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .cst-proof__media{margin:0;max-width:640px;justify-self:end;width:100%} .cst-proof__media img{ display:block;width:100%;height:auto; border-radius:1px; background:var(--cst-gray2); } .cst-proof__media figcaption{ margin-top:0.85rem; font-size:0.9rem;line-height:1.6; color:var(--cst-body-dim); } /* ════════════════════════════════════ 15. ECRAN 12, METHODE MOSAICA ═══ */ /* Tête de la méthode : le titre et son commentaire se placent côte à côte sur ordinateur. La scène garde ainsi une seule idée par écran sans que le texte perde sa taille de lecture. */ .cst-method__head{margin-bottom:clamp(2rem,4.5vh,3rem)} .cst-method__head .cst-h2{max-width:22ch;margin-bottom:0} @media(min-width:1081px){ .cst-method__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); align-items:end; } .cst-method__head .cst-eyebrow{grid-column:1/-1;margin-bottom:0.6rem} .cst-method__head .cst-p{align-self:end} } .cst-method__wrap{position:relative;padding-top:2.4rem} .cst-method__line{position:absolute;left:0;right:0;top:5px;height:1px;background:var(--cst-line)} .cst-method__line i{ display:block;height:100%;width:100%;background:var(--cst-gold); transform:scaleX(1);transform-origin:left center; transition:transform .9s cubic-bezier(.22,.61,.36,1); } .cst-anim .cst-method__line i{transform:scaleX(var(--cst-p,0))} .cst-moves{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem); } .cst-move{position:relative} .cst-move::before{ content:"";position:absolute;left:0;top:-2.4rem; width:11px;height:11px; border:1.5px solid var(--cst-stroke);background:#fff; transition:background-color .5s ease,border-color .5s ease; } .cst-move.is-done::before{background:var(--cst-gold);border-color:var(--cst-gold-dark)} .cst-move__num{ font-size:0.72rem;font-weight:700;letter-spacing:0.1em; color:var(--cst-gold-text);display:block;margin-bottom:0.4rem; } .cst-move h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:1.25rem;line-height:1.22; color:var(--cst-deep);margin:0 0 0.55rem; } .cst-move p{ font-size:0.98rem;line-height:1.6; color:var(--cst-body);margin:0; } /* ══════════════════════════ 16. ECRAN 13, TROIS FACONS D'AGIR ═════════ */ .cst-acts-scene{padding-block:clamp(2.5rem,6vh,4.5rem)} .cst-acts{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,4vh,2.5rem); } .cst-acts.cst-tabs-ready{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)} .cst-acts__lead{max-width:26ch} .cst-acts__hint{ margin-top:clamp(1.5rem,3.5vh,2.25rem); font-size:0.95rem;line-height:1.6; color:var(--cst-body-dim);max-width:26ch; } /* Le sélecteur n'existe que si le script a pu prendre la main : sans lui, les trois volets restent lisibles à la suite et aucun bouton mort ne subsiste dans la page. */ .cst-acts__choices{display:none} .cst-tabs-ready .cst-acts__choices{ display:flex;flex-direction:column;gap:0; margin-top:clamp(1.5rem,3.5vh,2rem); border-top:1px solid var(--cst-line); } .cst-choice{ display:block;width:100%; margin:0;padding:0.95rem 0; background:none;border:0;border-bottom:1px solid var(--cst-line); font-family:inherit;text-align:left;cursor:pointer; color:var(--cst-body-dim); } .cst-choice__inner{ display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:0.85rem;row-gap:0.2rem;align-items:baseline; transition:transform .25s cubic-bezier(.22,.61,.36,1); } .cst-choice:hover .cst-choice__inner{transform:translateX(4px)} .cst-choice__num{ font-size:0.74rem;font-weight:700;letter-spacing:0.1em; color:var(--cst-gold-text);opacity:.92; } .cst-choice__name{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:1.32rem;line-height:1.2; color:var(--cst-body-dim); transition:color .25s ease; } /* L'état actif ne repose jamais sur la seule couleur : le libellé change de mot (AFFICHE contre VOIR), un trait doré apparaît et le carré de gauche se remplit. */ .cst-choice__state{ grid-column:2; font-size:0.68rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--cst-gold-text);opacity:.86; } .cst-choice__state i{font-style:normal} .cst-choice__state .cst-choice__on{display:none} .cst-choice[aria-selected="true"] .cst-choice__on{display:inline} .cst-choice[aria-selected="true"] .cst-choice__off{display:none} .cst-choice[aria-selected="true"]{ position:relative; box-shadow:inset 3px 0 0 0 var(--cst-gold); padding-left:1rem; } .cst-choice[aria-selected="true"] .cst-choice__name{color:var(--cst-deep)} .cst-choice[aria-selected="true"]:hover .cst-choice__inner{transform:none} .cst-acts__panel{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.86fr); gap:clamp(1.75rem,4vw,3rem);align-items:center; } .cst-acts__panel[hidden]{display:none} .cst-acts__eyebrow{ font-size:0.72rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--cst-gold-text);margin:0 0 0.85rem; } .cst-acts__title{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.45rem,1.05rem + 1.5vw,2.15rem); line-height:1.18;color:var(--cst-deep); margin:0 0 1rem;max-width:24ch; } .cst-acts__viz{width:min(100%,400px);justify-self:end} /* Sans le script, les trois volets se suivent et se séparent d'un trait. */ .cst-acts__panel + .cst-acts__panel{ margin-top:2.5rem;padding-top:2.5rem; border-top:1px solid var(--cst-line); } .cst-tabs-ready .cst-acts__panel + .cst-acts__panel{ margin-top:0;padding-top:0;border-top:0; } /* ═════════════════════ 17. ECRAN 14, CE QUE MOSAICA PEUT CONSTRUIRE ═══ */ .cst-offer{ list-style:none;margin:1.75rem 0 0;padding:0; columns:2;column-gap:clamp(2rem,4vw,3.5rem); } .cst-offer__item{ break-inside:avoid; display:grid;grid-template-columns:auto minmax(0,1fr); gap:0.7rem;align-items:baseline; padding-block:0.62rem; border-bottom:1px solid var(--cst-line); font-size:1.02rem;line-height:1.5; color:var(--cst-body); } .cst-offer__item::before{ content:"";width:6px;height:6px; background:var(--cst-gold); transform:translateY(-0.15em); } /* ═════════════════════════════════════════════ 18. ECRAN 15, FIN ══════ */ .cst-end__sign{ font-size:1.02rem;line-height:1.7; color:var(--cst-on-dark-dim);max-width:54ch;margin:0; } /* ═══════════════════════════════════════ 19. SCHEMAS ET ANIMATIONS ════ */ .cst-viz{display:block;width:100%;height:auto} .cst-viz-line{fill:none;stroke:var(--cst-stroke);stroke-width:1.25} .cst-viz-soft{fill:none;stroke:var(--cst-stroke-soft);stroke-width:1} .cst-viz-steel{fill:none;stroke:var(--cst-steel);stroke-width:1.4} .cst-viz-gold{fill:none;stroke:var(--cst-gold);stroke-width:1.6} .cst-viz-node{fill:var(--cst-node)} .cst-viz-gnode{fill:var(--cst-gold)} .cst-viz-plate{fill:var(--cst-stroke-soft)} .cst-viz-txt{ font-family:'Space Grotesk',sans-serif; font-size:9px;font-weight:600; letter-spacing:0.09em; fill:var(--cst-body-dim); } [data-cst-theme="dark"] .cst-viz-txt{fill:var(--cst-on-dark-dim)} @keyframes cstFade{from{opacity:0}} @keyframes cstRise{from{opacity:0;transform:translateY(9px)}} @keyframes cstPop{from{opacity:0;transform:scale(.4)}} @keyframes cstDraw{from{stroke-dashoffset:var(--cst-len,600)}} @keyframes cstGrowX{from{transform:scaleX(0)}} @keyframes cstGrowY{from{transform:scaleY(0)}} @keyframes cstSettle{from{opacity:0;transform:translate(var(--cst-dx,0),var(--cst-dy,0)) rotate(var(--cst-rot,0deg))}} /* Chaque groupe animé est ancré sur son propre centre : sans cette déclaration, une mise à l'échelle SVG pivoterait autour de l'origine du document et le module partirait hors cadre. */ .cst-page svg [class*="cst-a-"]{transform-box:fill-box;transform-origin:center} /* ......................................... 19.1 Hero, trois niveaux ... */ /* Trois bandes horizontales : le projet, les relais de coordination, le terrain. Des modules encore désalignés se remettent d'aplomb quand l'impulsion descend et traverse les relais. */ .cst-anim .cst-hero .is-in .cst-a-hbase{stroke-dasharray:var(--cst-len,300);animation:cstDraw 760ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .cst-hero .is-in .cst-a-hbase--2{animation-delay:120ms} .cst-anim .cst-hero .is-in .cst-a-hbase--3{animation-delay:240ms} .cst-anim .cst-hero .is-in .cst-a-hdrop{stroke-dasharray:var(--cst-len,160);animation:cstDraw 620ms cubic-bezier(.4,0,.3,1) 520ms both} .cst-anim .cst-hero .is-in .cst-a-hrelay{animation:cstPop 300ms ease both} .cst-anim .cst-hero .is-in .cst-a-hrelay--1{animation-delay:820ms} .cst-anim .cst-hero .is-in .cst-a-hrelay--2{animation-delay:940ms} .cst-anim .cst-hero .is-in .cst-a-hrelay--3{animation-delay:1060ms} .cst-anim .cst-hero .is-in .cst-a-hmod{animation:cstSettle 620ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .cst-hero .is-in .cst-a-hmod--1{--cst-dx:-10px;--cst-dy:8px;--cst-rot:-7deg;animation-delay:1180ms} .cst-anim .cst-hero .is-in .cst-a-hmod--2{--cst-dx:8px;--cst-dy:11px;--cst-rot:6deg;animation-delay:1290ms} .cst-anim .cst-hero .is-in .cst-a-hmod--3{--cst-dx:-6px;--cst-dy:13px;--cst-rot:9deg;animation-delay:1400ms} .cst-anim .cst-hero .is-in .cst-a-hmod--4{--cst-dx:11px;--cst-dy:7px;--cst-rot:-5deg;animation-delay:1510ms} .cst-anim .cst-hero .is-in .cst-a-hbeam{stroke-dasharray:var(--cst-len,270);animation:cstDraw 700ms cubic-bezier(.22,.61,.36,1) 1660ms both} /* ................................. 19.2 Ecran 2, configuration mobile . */ /* L'axe commun reste tracé pendant que la configuration se reconstruit autour de lui. */ .cst-anim .is-in .cst-a-saxis{stroke-dasharray:var(--cst-len,240);animation:cstDraw 720ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-sold{animation:cstFade 520ms ease 640ms both} .cst-anim .is-in .cst-a-snew{animation:cstSettle 620ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-snew--1{--cst-dx:-16px;--cst-dy:0;animation-delay:900ms} .cst-anim .is-in .cst-a-snew--2{--cst-dx:14px;--cst-dy:-9px;animation-delay:1020ms} .cst-anim .is-in .cst-a-snew--3{--cst-dx:-9px;--cst-dy:12px;animation-delay:1140ms} .cst-anim .is-in .cst-a-snew--4{--cst-dx:17px;--cst-dy:6px;animation-delay:1260ms} .cst-anim .is-in .cst-a-skeep{animation:cstPop 340ms ease 1420ms both} /* ....................................... 19.3 Realite 1, dependances .. */ .cst-anim .is-in .cst-a-dtrack{stroke-dasharray:var(--cst-len,300);animation:cstDraw 700ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-dtrack--2{animation-delay:110ms} .cst-anim .is-in .cst-a-dtrack--3{animation-delay:220ms} .cst-anim .is-in .cst-a-dcross{animation:cstPop 280ms ease both} .cst-anim .is-in .cst-a-dcross--1{animation-delay:820ms} .cst-anim .is-in .cst-a-dcross--2{animation-delay:940ms} .cst-anim .is-in .cst-a-dcross--3{animation-delay:1060ms} .cst-anim .is-in .cst-a-dseq{stroke-dasharray:var(--cst-len,330);animation:cstDraw 820ms cubic-bezier(.22,.61,.36,1) 1220ms both} /* ........................................... 19.4 Realite 2, arrivee .. */ .cst-anim .is-in .cst-a-astruct{stroke-dasharray:var(--cst-len,280);animation:cstDraw 700ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-anew{animation:cstSettle 640ms cubic-bezier(.22,.61,.36,1) 720ms both;--cst-dx:34px;--cst-dy:26px} .cst-anim .is-in .cst-a-acheck{animation:cstPop 260ms ease both} .cst-anim .is-in .cst-a-acheck--1{animation-delay:1180ms} .cst-anim .is-in .cst-a-acheck--2{animation-delay:1320ms} .cst-anim .is-in .cst-a-acheck--3{animation-delay:1460ms} .cst-anim .is-in .cst-a-alock{animation:cstGrowX 380ms cubic-bezier(.22,.61,.36,1) 1620ms both;transform-origin:left center} /* .......................................... 19.5 Realite 3, implicite . */ .cst-anim .is-in .cst-a-iorder{animation:cstFade 460ms ease both} .cst-anim .is-in .cst-a-ilayer{animation:cstRise 420ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-ilayer--1{animation-delay:560ms} .cst-anim .is-in .cst-a-ilayer--2{animation-delay:680ms} .cst-anim .is-in .cst-a-ilayer--3{animation-delay:800ms} .cst-anim .is-in .cst-a-ilayer--4{animation-delay:920ms} .cst-anim .is-in .cst-a-imark{animation:cstPop 240ms ease both} .cst-anim .is-in .cst-a-imark--1{animation-delay:1180ms} .cst-anim .is-in .cst-a-imark--2{animation-delay:1280ms} .cst-anim .is-in .cst-a-imark--3{animation-delay:1380ms} .cst-anim .is-in .cst-a-imark--4{animation-delay:1480ms} /* ............................. 19.6 Supervision, la boucle qui remonte . */ .cst-anim .is-in .cst-a-vdown{stroke-dasharray:var(--cst-len,190);animation:cstDraw 620ms cubic-bezier(.4,0,.3,1) both} .cst-anim .is-in .cst-a-vloop{stroke-dasharray:var(--cst-len,300);animation:cstDraw 820ms cubic-bezier(.22,.61,.36,1) 760ms both} .cst-anim .is-in .cst-a-vback{stroke-dasharray:var(--cst-len,190);animation:cstDraw 620ms cubic-bezier(.4,0,.3,1) 1620ms both} .cst-anim .is-in .cst-a-vclear{animation:cstPop 320ms ease 2280ms both} .cst-anim .is-in .cst-a-vnode{animation:cstPop 260ms ease both} .cst-anim .is-in .cst-a-vnode--1{animation-delay:520ms} .cst-anim .is-in .cst-a-vnode--2{animation-delay:1480ms} /* ................................ 19.7 Mentorat, l'autonomie qui vient . */ .cst-anim .is-in .cst-a-maxis{stroke-dasharray:var(--cst-len,320);animation:cstDraw 760ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-mgive{stroke-dasharray:var(--cst-len,120);animation:cstDraw 420ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .is-in .cst-a-mgive--1{animation-delay:780ms} .cst-anim .is-in .cst-a-mgive--2{animation-delay:900ms} .cst-anim .is-in .cst-a-mgive--3{animation-delay:1020ms} .cst-anim .is-in .cst-a-mgive--4{animation-delay:1140ms} .cst-anim .is-in .cst-a-mown{animation:cstGrowY 420ms cubic-bezier(.22,.61,.36,1) both;transform-origin:bottom center} .cst-anim .is-in .cst-a-mown--1{animation-delay:900ms} .cst-anim .is-in .cst-a-mown--2{animation-delay:1040ms} .cst-anim .is-in .cst-a-mown--3{animation-delay:1180ms} .cst-anim .is-in .cst-a-mown--4{animation-delay:1320ms} .cst-anim .is-in .cst-a-mstep{animation:cstFade 480ms ease 1560ms both} /* ......................................... 19.8 Les trois volets ...... */ /* Les schémas d'onglet ne dépendent pas de `is-in` : ils sont rejoués par le script au changement de volet, donc pilotés par `.is-animating`. Un volet caché porte `hidden` : aucune de ces règles ne s'y applique. */ .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-frag{animation:cstFade 380ms ease both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-gap{animation:cstPop 300ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-gap--1{animation-delay:520ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-gap--2{animation-delay:660ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-gap--3{animation-delay:800ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-join{stroke-dasharray:var(--cst-len,340);animation:cstDraw 900ms cubic-bezier(.22,.61,.36,1) 1020ms both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-str-end{animation:cstPop 280ms ease 1900ms both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-in{animation:cstPop 280ms ease both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-seg{stroke-dasharray:var(--cst-len,90);animation:cstDraw 380ms cubic-bezier(.4,0,.3,1) both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-seg--1{animation-delay:300ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-seg--2{animation-delay:640ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-seg--3{animation-delay:980ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-seg--4{animation-delay:1320ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-stage{animation:cstRise 340ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-stage--1{animation-delay:420ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-stage--2{animation-delay:760ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-stage--3{animation-delay:1100ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-stage--4{animation-delay:1440ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-for-out{animation:cstGrowY 420ms cubic-bezier(.22,.61,.36,1) 1780ms both;transform-origin:bottom center} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-mentor{animation:cstPop 300ms ease both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-pass{stroke-dasharray:var(--cst-len,110);animation:cstDraw 420ms cubic-bezier(.22,.61,.36,1) both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-pass--1{animation-delay:360ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-pass--2{animation-delay:700ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-pass--3{animation-delay:1040ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-grow{animation:cstGrowY 400ms cubic-bezier(.22,.61,.36,1) both;transform-origin:bottom center} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-grow--1{animation-delay:600ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-grow--2{animation-delay:940ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-grow--3{animation-delay:1280ms} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-fade{animation:cstFade 620ms ease 1560ms both} .cst-anim .cst-tabs-ready .cst-acts__panel.is-active.is-animating .cst-a-tra-solo{animation:cstPop 320ms ease 1860ms both} /* ══════════════════ 20. INDICATEUR DE CHAPITRES (ORDINATEUR, GAUCHE) ══ */ /* Navigation d'appoint : masquée tant que le script n'a pas confirmé qu'il peut en tenir l'état actif, la progression et le contraste sur fond clair comme sur fond sombre. Elle est placée en fin de
pour ne pas précéder le titre de la page dans l'ordre de lecture ; sa position à l'écran est fixe, indépendante de sa place dans le document. */ .cst-chapters{display:none} .cst-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.05rem} .cst-chapters a{ position:relative;display:flex;align-items:center;gap:0.7rem; min-height:24px;min-width:24px;padding:2px 0; text-decoration:none; font-size:0.68rem;font-weight:600; letter-spacing:0.09em;text-transform:uppercase; color:#5c6a72; transition:color .3s ease; } /* Le repère est un carré : même vocabulaire d'assemblage que le reste de la page, et une forme distincte des pastilles rondes du site. */ .cst-chapters__mark{ flex:none;width:9px;height:9px; border:1.5px solid currentColor; transition:background-color .4s ease,border-color .4s ease,transform .4s ease; } .cst-chapters a:hover{color:var(--cst-gold-dark)} /* L'état actif ne repose pas sur la seule couleur : le carré se remplit et grandit, et le libellé passe en gras. */ .cst-chapters a.is-active{color:var(--cst-deep);font-weight:700} .cst-chapters a.is-active .cst-chapters__mark{ background:var(--cst-gold);border-color:var(--cst-gold-dark);transform:scale(1.28); } .cst-chapters__track{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:rgba(10,56,80,0.16)} .cst-chapters__track i{ display:block;height:100%;background:var(--cst-gold); transform:scaleY(var(--cst-p,0));transform-origin:top center; transition:transform .3s linear; } .cst-chapters.is-on-dark a{color:rgba(255,255,255,0.68)} .cst-chapters.is-on-dark a:hover{color:var(--cst-gold)} .cst-chapters.is-on-dark a.is-active{color:#fff} .cst-chapters.is-on-dark .cst-chapters__track{background:rgba(255,255,255,0.24)} .cst-chapters.is-on-dark a:focus-visible{outline-color:var(--cst-gold)} /* Le menu n'apparaît qu'à partir de la largeur où la gouttière peut l'accueillir sans jamais recouvrir la colonne de texte. Il est ancré à DROITE, comme sur les quatre autres pages sectorielles (forêt-bois, grandes organisations, santé, secteur municipal). Cette page était la seule à le placer à gauche : d'une industrie à l'autre, le repère de lecture changeait de côté. */ @media(min-width:1200px){ .cst-js .cst-chapters{ display:block;position:fixed; top:50%;right:clamp(0.75rem,1.4vw,1.5rem); transform:translateY(-50%); z-index:60;padding-left:0.5rem; } /* Sous 1440px, la gouttière ne laisse pas assez de place au libellé complet sans frôler la colonne de texte : on ne garde que les repères, le nom demeure lu par les lecteurs d'écran. Mesuré : à 1440px, il reste 29px entre le menu et le premier caractère. */ .cst-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){ .cst-chapters__label{ position:static;width:auto;height:auto; margin:0;overflow:visible;clip-path:none; } } /* ═══════════════════ 21. ORDINATEUR PORTABLE PEU HAUT (<= 840px) ══════ */ @media(min-width:1081px) and (max-height:840px){ .cst-scene{padding-block:clamp(1.75rem,3.4vh,2.75rem)} /* Le héros porte le fil d'Ariane, la sur-titre, un grand titre, un chapô et deux actions : sur un portable peu haut, tout le gain se prend dans les respirations, jamais dans la taille des caractères. */ .cst-hero{padding-block:clamp(1.5rem,3vh,2.5rem)} .cst-hero .cst-crumb{margin-bottom:0.75rem} .cst-hero .cst-h1{margin-bottom:0.7rem} .cst-hero__legend{margin-top:0.65rem;gap:0.25rem} .cst-eyebrow{margin-bottom:0.8rem} .cst-h2{margin-bottom:0.9rem} .cst-p + .cst-p{margin-top:0.75rem} .cst-list{margin-top:1.1rem} .cst-list__item{padding-block:0.42rem} .cst-statement--inline{margin-top:1.1rem} .cst-note{margin-top:0.9rem} .cst-acts-scene{padding-block:clamp(1.4rem,2.8vh,2.25rem)} .cst-acts.cst-tabs-ready{grid-template-columns:minmax(0,300px) minmax(0,1fr)} .cst-acts__hint{margin-top:clamp(1.1rem,2.5vh,1.6rem)} .cst-acts__title{margin-bottom:0.75rem;max-width:31ch} .cst-acts__panel .cst-result{margin-top:0.9rem;padding-top:0.7rem} .cst-acts__panel .cst-link{margin-top:0.7rem} .cst-hero__viz{width:min(100%,410px)} .cst-hero__legend{margin-top:0.9rem} .cst-method__head{margin-bottom:1.75rem} .cst-path,.cst-method__wrap{margin-top:1.6rem} .cst-statement{margin-top:1.5rem} .cst-conv__grid{margin-top:1.9rem} .cst-offer__item{padding-block:0.5rem} .cst-real__viz,.cst-sup__viz,.cst-mentor__viz,.cst-shift__viz{width:min(100%,430px)} } /* ═══════════════════════════════════════════ 22. TABLETTE (<= 1080px) ═ */ @media(max-width:1080px){ .cst-hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .cst-hero__viz{justify-self:start;width:min(100%,440px)} .cst-split,.cst-split--tight,.cst-split--wide{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .cst-split--flip .cst-viz{order:0} .cst-real__viz,.cst-sup__viz,.cst-mentor__viz,.cst-shift__viz{width:min(100%,540px)} .cst-conv__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem} .cst-steps,.cst-moves{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem} .cst-offer{columns:1} .cst-proof__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .cst-proof__media{max-width:640px;justify-self:start} /* Les trois choix : lignes pleine largeur, volet juste en dessous. */ .cst-acts.cst-tabs-ready{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .cst-acts__lead{max-width:26ch} .cst-acts__hint{max-width:none} .cst-choice:hover .cst-choice__inner{transform:none} .cst-acts__panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .cst-acts__viz{width:min(100%,420px);justify-self:start} } /* ═════════════ 22 bis. TABLETTE COUCHEE (901 a 1080px, peu haute) ═════ */ /* Une tablette couchée offre autant de largeur qu'un petit ordinateur mais très peu de hauteur. L'empilement de la bande tablette y gaspillerait deux fois la place : on rétablit donc les compositions à deux colonnes, avec des proportions resserrées et des schémas plus compacts. Le texte garde son échelle de lecture ; seules les respirations et la taille des schémas sont réduites. */ @media(min-width:901px) and (max-width:1080px) and (max-height:820px){ .cst-scene{padding-block:clamp(1.6rem,3.2vh,2.4rem)} .cst-hero{padding-block:clamp(1.5rem,3vh,2.25rem)} .cst-hero__inner{ grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr); gap:clamp(1.25rem,3vw,2rem); } .cst-hero__viz{justify-self:end;width:min(100%,330px)} .cst-split,.cst-split--tight,.cst-split--wide{ grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr); gap:clamp(1.25rem,3vw,2rem); } .cst-real__viz,.cst-sup__viz,.cst-mentor__viz,.cst-shift__viz{width:min(100%,360px)} .cst-acts.cst-tabs-ready{ grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:clamp(1.25rem,3vw,2rem); } .cst-acts__panel{grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);gap:clamp(1.25rem,3vw,2rem)} .cst-acts__viz{justify-self:end;width:min(100%,300px)} .cst-proof__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.25rem,3vw,2rem); } .cst-proof__media{max-width:440px;justify-self:end} .cst-conv__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem} .cst-steps,.cst-moves{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:1.5rem} .cst-offer{columns:2} .cst-method__head{margin-bottom:1.5rem} .cst-statement{margin-top:1.5rem} .cst-list__item{padding-block:0.42rem} .cst-list{margin-top:1.05rem} .cst-eyebrow{margin-bottom:0.75rem} .cst-h2{margin-bottom:0.85rem} .cst-p + .cst-p{margin-top:0.7rem} .cst-statement--inline{margin-top:1.05rem} .cst-note{margin-top:0.85rem} .cst-hero .cst-crumb{margin-bottom:0.75rem} .cst-hero .cst-h1{margin-bottom:0.7rem} .cst-hero__legend{margin-top:0.65rem;gap:0.25rem} } /* ═══════════════════════════════════════════ 23. TELEPHONE (<= 900px) ═ */ @media(max-width:900px){ /* Aucune hauteur imposée : le contenu se déroule naturellement. */ .cst-scene{min-height:0;padding-block:clamp(2.75rem,7vh,4rem)} .cst-hero{min-height:0;padding-block:clamp(2.25rem,6vh,3.5rem)} .cst-hero__inner{gap:1.75rem} .cst-hero__viz{width:min(100%,340px)} .cst-real__viz,.cst-sup__viz,.cst-mentor__viz,.cst-shift__viz,.cst-acts__viz{width:min(100%,340px)} /* Le chapitre des cinq lieux : la colonne collante et son rail latéral laissent place à une suite verticale, chaque niveau portant son propre repère de progression. */ .cst-levels__grid{grid-template-columns:minmax(0,1fr);gap:0} .cst-levels__aside{position:static;padding-block:0;margin-bottom:1.5rem} .cst-rail{display:none} .cst-levels{padding-top:clamp(2.75rem,7vh,4rem)} .cst-level{min-height:0;padding-block:clamp(1.75rem,5vh,2.5rem)} .cst-level__mark{display:block;position:relative;height:30px;margin-bottom:1.1rem} .cst-level__mark::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--cst-line)} .cst-level__mark i{position:absolute;left:0;bottom:0;width:11px;height:11px;background:var(--cst-gold)} .cst-steps,.cst-moves{grid-template-columns:minmax(0,1fr);row-gap:1.6rem} .cst-path__wrap,.cst-method__wrap{padding:0 0 0 2rem} .cst-path__line,.cst-method__line{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto} .cst-path__line i,.cst-method__line i{width:100%;height:100%;transform:scaleY(1);transform-origin:top center} .cst-anim .cst-path__line i, .cst-anim .cst-method__line i{transform:scaleY(var(--cst-p,0))} .cst-step::before,.cst-move::before{top:6px;left:-2rem} .cst-actions{gap:0.75rem} .cst-btn{width:100%} /* --- REPRISE DE LA HIERARCHIE 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 au minimum, aucun libellé ne descend sous 13px. Trois classes sont nécessaires sur le chapô et les phrases fortes : le plancher générique s'écrit avec deux types et deux classes, une règle à deux classes perdrait l'arbitrage de spécificité. */ .cst-page .cst-p, .cst-page .cst-step p, .cst-page .cst-move p, .cst-page .cst-conv__col p, .cst-page .cst-end__sign{font-size:16px !important;line-height:1.7 !important} .cst-page .cst-hero__inner .cst-lead{font-size:17px !important;line-height:1.65 !important} .cst-page .cst-list__item, .cst-page .cst-offer__item{font-size:16px !important;line-height:1.5 !important} .cst-page .cst-result{font-size:16px !important} .cst-page .cst-result b{font-size:13px !important} .cst-page .cst-note, .cst-page .cst-acts__hint{font-size:15px !important;line-height:1.6 !important} .cst-page .cst-eyebrow{font-size:13.5px !important;letter-spacing:0.13em} .cst-page .cst-crumb, .cst-page .cst-crumb a{font-size:13px !important} .cst-page .cst-btn, .cst-page .cst-link{font-size:16px !important} .cst-page .cst-shell .cst-statement{font-size:clamp(1.2rem,5vw,1.6rem) !important;line-height:1.35 !important} .cst-page .cst-shell .cst-statement--inline{font-size:17px !important;line-height:1.5 !important} .cst-page .cst-shell .cst-question{font-size:17px !important;line-height:1.5 !important} .cst-page .cst-level h3{font-size:clamp(1.45rem,5.6vw,1.9rem) !important;line-height:1.18 !important} .cst-page .cst-level__num{font-size:13px !important} .cst-page .cst-levels__chapter{font-size:17px !important;line-height:1.45 !important} .cst-page .cst-step h3, .cst-page .cst-move h3{font-size:19px !important} .cst-page .cst-step__num, .cst-page .cst-move__num, .cst-page .cst-list__num, .cst-page .cst-hero__n{font-size:13px !important} .cst-page .cst-real__num{font-size:38px !important} .cst-page .cst-hero__legend li{font-size:14px !important} .cst-page .cst-acts__title{font-size:clamp(1.3rem,5vw,1.6rem) !important;line-height:1.22 !important} .cst-page .cst-acts__eyebrow{font-size:12.5px !important} .cst-page .cst-choice__name{font-size:18px !important;line-height:1.25 !important} .cst-page .cst-choice__num{font-size:13px !important} .cst-page .cst-choice__state{font-size:11.5px !important;letter-spacing:0.14em} .cst-page .cst-conv__col h3{font-size:13px !important} .cst-page .cst-proof__media figcaption{font-size:14px !important} } @media(max-width:640px){ .cst-hero__viz{width:min(100%,320px)} .cst-real__viz,.cst-sup__viz,.cst-mentor__viz,.cst-shift__viz,.cst-acts__viz{width:min(100%,320px)} } @media(max-width:420px){ .cst-hero .cst-crumb{margin-bottom:1rem} .cst-hero .cst-eyebrow{margin-bottom:0.75rem} .cst-hero .cst-h1{margin-bottom:1rem} .cst-hero__viz{width:min(100%,282px)} } /* Très petit écran ancien (<= 360px de large et <= 640px de haut) : on récupère tout ce qui peut l'être dans les espacements, jamais dans la taille du texte, qui reste à son échelle de lecture. */ @media(max-width:360px) and (max-height:640px){ .cst-hero{padding-block:1.5rem} .cst-hero__inner{gap:1.25rem} .cst-hero .cst-crumb{margin-bottom:0.6rem} .cst-hero .cst-eyebrow{margin-bottom:0.5rem} .cst-hero .cst-h1{margin-bottom:0.65rem} .cst-page .cst-hero__inner .cst-lead{line-height:1.5 !important} .cst-hero__viz{width:min(100%,262px)} } /* ═════════════════════════════════════════════ 24. MOUVEMENT REDUIT ═══ */ /* Le filet du ne pose déjà pas `cst-anim` dans ce mode. Ce bloc est la seconde ligne de défense : il neutralise tout mouvement et force les états finaux, quelle que soit la classe présente sur la racine. */ @media(prefers-reduced-motion:reduce){ .cst-page *, .cst-page *::before, .cst-page *::after, .cst-chapters *{ animation:none !important; transition:none !important; } .cst-page [data-cst-in="rise"], .cst-page [data-cst-in="rise"].is-in, .cst-page .cst-list__item, .cst-page .cst-offer__item, .cst-page .cst-step, .cst-page .cst-move{opacity:1 !important;transform:none !important} /* `none` vaut la matrice identité : la ligne est pleine, quel que soit l'axe utilisé par la mise en page en cours. */ .cst-page .cst-rail__line i, .cst-page .cst-path__line i, .cst-page .cst-method__line i{transform:none !important} .cst-page svg [class*="cst-a-"]{ opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; } .cst-page .cst-step::before, .cst-page .cst-move::before{background:var(--cst-gold) !important;border-color:var(--cst-gold-dark) !important} .cst-chapters__track i{transform:scaleY(1) !important} } /* Le rail de chapitres est en position fixe. Arrive au pied de page, il n'a plus de chapitre a signaler et se superposerait au contenu : il s'efface. `visibility` complete l'opacite pour le retirer aussi du parcours au clavier. */ .cst-chapters.is-out{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .cst-chapters{transition:opacity .28s ease} @media(prefers-reduced-motion:reduce){ .cst-chapters,.cst-chapters.is-out{transition:none} }