/* ========================================================================= MOSAICA / IDENTITE DE LA FAMILLE EXPERTISES ------------------------------------------------------------------------- Socle partage par toutes les pages du dossier expertises/. Il ne contient que des fondations reutilisables : aucune regle propre a une expertise en particulier. Chaque page ajoute ensuite sa propre feuille (culture- organisationnelle.css, et plus tard intelligence-culturelle.css, etc.). ORDRE DE CHARGEMENT assets/styles.css assets/mckinsey.css assets/responsive.css assets/mobile-premium.css assets/footer.css assets/lang-switch.css assets/expertises-identite.css <= ce fichier assets/.css <= specifique a la page POURQUOI CETTE IDENTITE EXISTE Le site porte trois familles de pages qui ne racontent pas la meme chose : Industries cartographie des realites organisationnelles et sectorielles. Banniere sombre, texte a gauche et schema a droite, scenes pleine hauteur en alternance. Prefixes go-, mp-, ss-, edu-. Ne pas reproduire ici. Services representation immersive de la maniere dont Mosaica intervient. Grande mosaique photographique, couloir de lecture a gauche. Prefixe shp-. Ne pas reproduire ici. Expertises anatomie des mecanismes qui produisent les situations observees. C'est l'objet de ce fichier. PRINCIPE DIRECTEUR Une expertise n'est pas un lieu d'intervention : c'est une maniere particuliere de comprendre ce qui produit une situation. La page se lit donc comme une coupe. Elle montre deux niveaux : CE QUI EST VISIBLE une surface minerale claire CE QUI LE PRODUIT une couche profonde bleu nuit Entre les deux, une ligne de revelation en or patine marque l'endroit precis ou l'analyse quitte le comportement observable pour rejoindre le mecanisme qui le produit. Cette ligne n'est pas un separateur decoratif : elle porte le sens de la famille. Elle doit rester presente sur toutes les pages Expertises. ANIMATION L'etat par defaut de chaque element EST son etat final. Rien n'est masque sans JavaScript, sans IntersectionObserver ou en mouvement reduit : les etats d'attente n'existent que sous `html.exp-anim`, classe posee par le filet du de chaque page et confirmee par assets/expertises-identite.js. Trois proprietes seulement : `opacity`, `transform` et `stroke-dashoffset`. Aucune animation ne modifie la mise en page, aucune ne boucle. PALETTE Variables globales de assets/styles.css quand elles existent. Quatre teintes de service, absentes du global : --exp-surface blanc mineral froid, jamais de creme --exp-deep bleu nuit de la couche profonde --exp-gold-ink or patine assombri, lisible sur fond clair (5,7:1) --exp-steel-ink bleu acier assombri pour les annotations sur clair POUR AJOUTER UNE NOUVELLE EXPERTISE Reprendre la meme charpente en six temps, en ne redefinissant que le mecanisme propre a l'expertise : 1. surface .exp-hero__surface (fil d'Ariane, surtitre, H1) 2. ligne .exp-reveal (visible / ce qui le produit) 3. profondeur .exp-hero__deep (le mecanisme, en SVG) 4. mecanisme propre prefixe de la page (ex. cult-mech) 5. lecture Mosaica voulu, organise, vecu 6. intervention preuve, facons d'agir, conclusion Les mecanismes prevus pour les prochaines pages sont documentes en section 14, en fin de fichier. ========================================================================= */ /* ================================================== 1. JETONS ========== */ .exp-page{ /* Surface visible */ --exp-surface:#F2F4F4; --exp-surface-soft:#FFFFFF; --exp-mineral:#E8ECEE; /* Couche profonde */ --exp-deep:#061F2C; --exp-deep-lift:#0B3448; /* Bleu institutionnel du site */ --exp-navy:var(--navy,#0e4d6c); --exp-navy-deep:var(--navy-deep,#0a3850); /* Or patine : la ligne de revelation et les traces */ --exp-gold:#C7A66A; --exp-gold-soft:#D9BE8C; --exp-gold-ink:#7A5A24; /* Annotations : bleu acier et gris moyen */ --exp-steel:#527487; --exp-steel-ink:#4A6A7D; --exp-ink:#37444C; --exp-ink-dim:#59666E; --exp-on-dark:rgba(255,255,255,0.87); --exp-on-dark-dim:rgba(255,255,255,0.70); --exp-rule:rgba(6,31,44,0.14); --exp-rule-dark:rgba(255,255,255,0.20); --exp-stroke:rgba(6,31,44,0.36); --exp-stroke-soft:rgba(6,31,44,0.15); --exp-hair:rgba(6,31,44,0.10); --exp-node:#0B3448; /* Fond de la scene : sert a couper un trace pour figurer une rupture sans avoir a dessiner un symbole. */ --exp-bg:var(--exp-surface); --exp-shell:1240px; --exp-pad:clamp(1.25rem,4vw,3.5rem); --exp-ease:cubic-bezier(.22,.61,.36,1); font-family:'Space Grotesk',sans-serif; color:var(--exp-ink); background:var(--exp-surface); } /* Toute zone profonde bascule ses jetons d'un seul coup : les schemas n'ont jamais deux versions. */ .exp-page [data-exp-theme="deep"]{ --exp-stroke:rgba(255,255,255,0.38); --exp-stroke-soft:rgba(255,255,255,0.17); --exp-hair:rgba(255,255,255,0.12); --exp-rule:rgba(255,255,255,0.20); --exp-node:rgba(255,255,255,0.9); --exp-bg:var(--exp-deep); } /* Les ancres ne passent jamais sous la barre de navigation ni sous la navigation des profondeurs. */ .exp-page [id]{scroll-margin-top:calc(var(--nav-h,68px) + var(--exp-depthnav-h,0px) + 1rem)} /* ======================== 2. SURFACE, PROFONDEUR, CONTENEUR ============ */ /* Une scene n'impose jamais de hauteur : elle est portee par son contenu. `min-height` reste volontairement absent ici, contrairement aux pages Industries. Une section courte ne doit pas etre etiree, une section riche ne doit pas etre comprimee. */ .exp-scene{ position:relative; padding-block:clamp(3.25rem,8vh,6rem); } /* Les quatre registres de fond, et rien d'autre. */ .exp-scene--surface{background:var(--exp-surface)} .exp-scene--white{background:#fff} .exp-scene--mineral{background:var(--exp-mineral)} .exp-scene--deep{background:var(--exp-deep-lift)} .exp-scene--night{background:var(--exp-deep)} .exp-page .exp-scene--white{--exp-bg:#fff} .exp-page .exp-scene--mineral{--exp-bg:#E8ECEE} .exp-page .exp-scene--deep{--exp-bg:#0B3448} .exp-page .exp-scene--night{--exp-bg:#061F2C} /* Une scene profonde porte sa propre ligne de revelation en bord haut : le lecteur voit toujours ou il vient de passer sous la surface. */ .exp-scene--deep::before, .exp-scene--night::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg, var(--exp-gold) 0%, rgba(199,166,106,0.42) 46%, rgba(199,166,106,0.10) 100%); } .exp-shell{ width:min(var(--exp-shell),100%); margin-inline:auto; padding-inline:var(--exp-pad); } .exp-shell > *{min-width:0} /* Compositions asymetriques. Jamais deux colonnes egales : l'oeil doit savoir ou commence la lecture. */ .exp-split{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .exp-split--text{grid-template-columns:minmax(0,1.24fr) minmax(0,0.76fr)} .exp-split--viz{grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr)} .exp-split--flip > .exp-figure{order:-1} .exp-narrow{max-width:74ch} .exp-measure{max-width:62ch} /* ============================ 3. LA LIGNE DE REVELATION ================ */ /* Le geste central de la famille. Elle marque l'endroit ou l'analyse passe du comportement observable au mecanisme qui le produit. Les deux annotations sont du texte HTML : jamais une image, jamais un pseudo element porteur de sens. */ .exp-reveal{ position:relative; background:linear-gradient(180deg,var(--exp-surface) 0%,var(--exp-surface) 50%,var(--exp-deep) 50%,var(--exp-deep) 100%); padding-block:clamp(0.6rem,1.5vh,1rem); } .exp-reveal__inner{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); /* Serre : les deux mentions restent attachees au trait. */ gap:0.3rem; } .exp-reveal__above, .exp-reveal__below{ margin:0; font-size:0.82rem;font-weight:700; letter-spacing:0.2em;text-transform:uppercase; line-height:1.5; } .exp-reveal__above{color:var(--exp-steel-ink)} .exp-reveal__below{color:var(--exp-gold)} /* Le trait lui meme : plein a gauche, il s'attenue vers la droite comme une coupe qui s'ouvre. */ .exp-reveal__line{ position:relative;display:block;height:1px; background:var(--exp-hair); overflow:hidden; } .exp-reveal__line i{ position:absolute;inset:0;display:block; background:linear-gradient(90deg, var(--exp-gold) 0%, var(--exp-gold) 34%, rgba(199,166,106,0.45) 70%, rgba(199,166,106,0.12) 100%); transform:scaleX(1);transform-origin:left center; } /* Le repere qui marque le point de passage. */ .exp-reveal__mark{ position:absolute;left:0;top:50%; width:9px;height:9px;margin-top:-4px; background:var(--exp-gold); } .exp-anim .exp-reveal__line i{transform:scaleX(0)} .exp-anim .exp-reveal.is-in .exp-reveal__line i{ transform:scaleX(1); transition:transform 900ms var(--exp-ease) 120ms; } .exp-anim .exp-reveal__mark{opacity:0} .exp-anim .exp-reveal.is-in .exp-reveal__mark{ opacity:1;transition:opacity 320ms ease 60ms; } /* =========================== 4. ANNOTATIONS EDITORIALES ================ */ /* Le marqueur de profondeur ouvre chacun des quatre temps de la lecture. Il n'est pas un titre : il ne concurrence jamais le H2 qui le suit. */ .exp-depth{ position:relative; margin-bottom:clamp(2rem,5vh,3.25rem); } .exp-depth__inner{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:0.35rem 1.4rem; padding-top:1.15rem; border-top:1px solid var(--exp-rule); } /* Le segment dore rappelle la ligne de revelation du heros : chaque temps de la lecture s'ouvre par le meme geste, un cran plus bas. */ .exp-depth__inner::before{ content:"";position:absolute;top:-1px;left:0; width:56px;height:2px;background:var(--exp-gold); transform:scaleX(1);transform-origin:left center; } .exp-anim .exp-depth__inner::before{transform:scaleX(0)} .exp-anim .exp-depth.is-in .exp-depth__inner::before{ transform:scaleX(1);transition:transform .6s var(--exp-ease); } .exp-depth__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem); line-height:1;color:var(--exp-gold-ink); } .exp-depth__tag{ margin:0; font-size:0.76rem;font-weight:700; letter-spacing:0.2em;text-transform:uppercase; color:var(--exp-navy-deep);line-height:1.55; } .exp-depth__say{ grid-column:2;margin:0.15rem 0 0; font-size:0.95rem;line-height:1.6;color:var(--exp-ink-dim); } [data-exp-theme="deep"] .exp-depth__inner{border-top-color:var(--exp-rule-dark)} [data-exp-theme="deep"] .exp-depth__n{color:var(--exp-gold)} [data-exp-theme="deep"] .exp-depth__tag{color:#fff} [data-exp-theme="deep"] .exp-depth__say{color:var(--exp-on-dark-dim)} /* Annotation courte posee contre un schema ou une composition. */ .exp-annot{ margin:0; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-steel-ink);line-height:1.55; } [data-exp-theme="deep"] .exp-annot{color:var(--exp-on-dark-dim)} /* ======================= 5. NAVIGATION DES PROFONDEURS ================= */ /* Une ligne editoriale, pas une barre fonctionnelle de service. Elle represente une descente dans l'analyse : quatre temps, numerotes, relies par un filet continu. Elle reste utilisable sans JavaScript (ce sont de vraies ancres) ; le script n'ajoute que l'etat actif. */ .exp-depthnav{ position:sticky;top:var(--nav-h,68px);z-index:40; background:rgba(242,244,244,0.94); border-bottom:1px solid var(--exp-rule); backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px); } .exp-depthnav__inner{ position:relative; overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .exp-depthnav__inner::-webkit-scrollbar{display:none} .exp-depthnav ol{ list-style:none;margin:0;padding:0; display:flex;align-items:stretch; min-width:max-content; } .exp-depthnav li{display:flex} .exp-depthnav a{ position:relative; display:flex;align-items:center;gap:0.6rem; min-height:52px;padding:0.7rem 1.5rem 0.7rem 0; margin-right:1.5rem; text-decoration:none;white-space:nowrap; font-size:0.76rem;font-weight:600; letter-spacing:0.13em;text-transform:uppercase; color:var(--exp-ink-dim); transition:color .28s ease; } .exp-depthnav li:last-child a{margin-right:0;padding-right:0} .exp-depthnav__n{ font-size:0.78rem;font-weight:700;letter-spacing:0.06em; color:var(--exp-steel-ink); transition:color .28s ease; } /* Le filet qui relie les quatre temps : il passe derriere les libelles. */ .exp-depthnav__rule{ position:absolute;left:0;right:0;bottom:0;height:1px; background:transparent; } .exp-depthnav a::after{ content:"";position:absolute;left:0;right:1.5rem;bottom:0;height:2px; background:var(--exp-gold); transform:scaleX(0);transform-origin:left center; transition:transform .32s var(--exp-ease); } .exp-depthnav li:last-child a::after{right:0} .exp-depthnav a:hover{color:var(--exp-navy-deep)} .exp-depthnav a:hover .exp-depthnav__n{color:var(--exp-gold-ink)} /* Etat actif : un trait, une graisse et une encre. Jamais la couleur seule. */ .exp-depthnav a.is-active{color:var(--exp-navy-deep);font-weight:700} .exp-depthnav a.is-active .exp-depthnav__n{color:var(--exp-gold-ink)} .exp-depthnav a.is-active::after{transform:scaleX(1)} /* ============================== 6. TYPOGRAPHIE ======================== */ .exp-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; line-height:1.55; color:var(--exp-gold-ink); margin:0 0 1.15rem; } [data-exp-theme="deep"] .exp-eyebrow{color:var(--exp-gold)} /* Le H1 domine l'ecran : il est pose sur la surface visible de l'organisation, jamais enferme dans une colonne etroite. */ .exp-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(2rem,1.05rem + 3.4vw,4.15rem); line-height:1.08;letter-spacing:-0.012em; color:var(--exp-navy-deep); margin:0 0 1.5rem; max-width:20ch; } .exp-h1__key{font-style:normal;color:var(--exp-gold-ink)} [data-exp-theme="deep"] .exp-h1{color:#fff} [data-exp-theme="deep"] .exp-h1__key{color:var(--exp-gold)} .exp-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(--exp-navy-deep); margin:0 0 1.2rem;max-width:24ch; } [data-exp-theme="deep"] .exp-h2{color:#fff} .exp-h2--wide{max-width:32ch} .exp-h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.28rem,1.05rem + 0.95vw,1.72rem); line-height:1.22;color:var(--exp-navy-deep); margin:0 0 0.85rem;max-width:26ch; } [data-exp-theme="deep"] .exp-h3{color:#fff} .exp-p{ font-size:1.05rem;line-height:1.75; color:var(--exp-ink);max-width:58ch;margin:0; } .exp-p + .exp-p{margin-top:1rem} [data-exp-theme="deep"] .exp-p{color:var(--exp-on-dark)} .exp-lead{ font-size:clamp(1.08rem,1rem + 0.4vw,1.28rem); line-height:1.66; color:var(--exp-ink);max-width:56ch;margin:0; } [data-exp-theme="deep"] .exp-lead{color:var(--exp-on-dark)} /* Phrase forte : une ligne tenue, jamais une accroche publicitaire. */ .exp-strong{ margin:1.85rem 0 0;padding-left:1.2rem; border-left:2px solid var(--exp-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.16rem,1rem + 0.7vw,1.5rem); line-height:1.45;color:var(--exp-navy);max-width:44ch; } [data-exp-theme="deep"] .exp-strong{color:var(--exp-gold-soft)} .exp-strong--center{margin-inline:auto;max-width:52ch} /* Precision de portee : une reserve tenue, jamais un avertissement. */ .exp-note{ margin:1.15rem 0 0;padding-left:1rem; border-left:1px solid var(--exp-rule); font-size:0.96rem;line-height:1.62; color:var(--exp-ink-dim);max-width:56ch; } [data-exp-theme="deep"] .exp-note{color:var(--exp-on-dark-dim)} /* Livrables et resultats : une ligne, jamais une carte. */ .exp-result{ margin:1.4rem 0 0;padding-top:1rem; border-top:1px solid var(--exp-rule); font-size:1.02rem;line-height:1.65; color:var(--exp-navy-deep);max-width:54ch; } .exp-result b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--exp-gold-ink);margin-bottom:0.4rem; } [data-exp-theme="deep"] .exp-result{color:#fff} [data-exp-theme="deep"] .exp-result b{color:var(--exp-gold)} /* Question de travail : la typographie devient elle meme un signal. */ .exp-ask{ margin:1.25rem 0 0;padding-left:1.15rem; border-left:1px solid var(--exp-gold); font-family:'Ibarra Real Nova',serif; font-size:1.16rem;line-height:1.5; color:var(--exp-navy);max-width:46ch; } [data-exp-theme="deep"] .exp-ask{color:var(--exp-gold-soft)} .exp-crumb{ font-size:0.82rem;line-height:1.6; color:var(--exp-ink-dim);margin-bottom:1.6rem; } .exp-crumb a{color:var(--exp-navy);text-decoration:none;border-bottom:1px solid var(--exp-hair)} .exp-crumb a:hover{color:var(--exp-gold-ink);border-bottom-color:currentColor} [data-exp-theme="deep"] .exp-crumb{color:var(--exp-on-dark-dim)} [data-exp-theme="deep"] .exp-crumb a{color:var(--exp-on-dark)} /* ========================== 7. ACTIONS ET LIENS ======================== */ .exp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.9rem 1.7rem;margin-top:2.3rem} .exp-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0.85rem 1.9rem; 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; } .exp-btn--gold{background:var(--exp-navy-deep);color:#fff;border-color:var(--exp-navy-deep)} .exp-btn--gold:hover{background:var(--exp-gold-ink);border-color:var(--exp-gold-ink);color:#fff} [data-exp-theme="deep"] .exp-btn--gold{background:var(--exp-gold);color:#061F2C;border-color:var(--exp-gold)} [data-exp-theme="deep"] .exp-btn--gold:hover{background:var(--exp-gold-soft);border-color:var(--exp-gold-soft);color:#061F2C} /* Action secondaire : un lien editorial, jamais un second gros bouton. */ .exp-quiet{ display:inline-flex;align-items:center;gap:0.5rem; min-height:44px; font-size:1rem;font-weight:500; color:var(--exp-navy);text-decoration:none; border-bottom:1px solid var(--exp-hair); padding-bottom:0.15rem; transition:color .22s ease,border-color .22s ease; } .exp-quiet:hover{color:var(--exp-gold-ink);border-bottom-color:var(--exp-gold-ink)} [data-exp-theme="deep"] .exp-quiet{color:var(--exp-on-dark);border-bottom-color:rgba(255,255,255,0.4)} [data-exp-theme="deep"] .exp-quiet:hover{color:var(--exp-gold);border-bottom-color:var(--exp-gold)} .exp-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(--exp-gold-ink);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .exp-link::after{content:"\2192";font-weight:400} .exp-link:hover{color:var(--exp-navy-deep)} .exp-link--minor{ font-size:0.94rem;font-weight:500; color:var(--exp-ink-dim);border-bottom-color:var(--exp-rule); margin-top:0.5rem; } .exp-link--minor:hover{color:var(--exp-gold-ink);border-bottom-color:var(--exp-gold-ink)} [data-exp-theme="deep"] .exp-link{color:var(--exp-gold)} [data-exp-theme="deep"] .exp-link:hover{color:#fff} /* ============================== 8. ETATS DE FOCUS ===================== */ .exp-page a:focus-visible, .exp-page button:focus-visible{ outline:2px solid var(--exp-gold-ink); outline-offset:3px; } [data-exp-theme="deep"] a:focus-visible, [data-exp-theme="deep"] button:focus-visible{outline-color:var(--exp-gold)} .exp-depthnav a:focus-visible{outline:2px solid var(--exp-gold-ink);outline-offset:-4px} /* =========================== 9. SCHEMAS (SVG) ========================= */ .exp-page svg{display:block;width:100%;height:auto} .exp-figure{margin:0;width:100%} .exp-figure figcaption{ margin-top:1rem;font-size:0.9rem;line-height:1.6; color:var(--exp-ink-dim);max-width:52ch; } [data-exp-theme="deep"] .exp-figure figcaption{color:var(--exp-on-dark-dim)} .exp-viz-line{fill:none;stroke:var(--exp-stroke);stroke-width:1} .exp-viz-thin{fill:none;stroke:var(--exp-stroke-soft);stroke-width:1} .exp-viz-hair{fill:none;stroke:var(--exp-hair);stroke-width:1} .exp-viz-soft{fill:var(--exp-stroke-soft);stroke:none} .exp-viz-gold{fill:none;stroke:var(--exp-gold);stroke-width:1.7} .exp-viz-goldfill{fill:var(--exp-gold);stroke:none} .exp-viz-nodefill{fill:var(--exp-node);stroke:none} .exp-viz-ring{fill:var(--exp-bg);stroke:var(--exp-node);stroke-width:1.4} .exp-viz-bg{fill:var(--exp-bg);stroke:none} /* Images cles communes. Chaque regle n'ecrit que son etat de depart : l'etat d'arrivee reste celui de la feuille, donc identique au repos. */ @keyframes expFade{from{opacity:0}} @keyframes expRise{from{opacity:0;transform:translateY(9px)}} @keyframes expPop{from{opacity:0;transform:scale(.4)}} @keyframes expDraw{from{stroke-dashoffset:var(--exp-len,600)}} @keyframes expGrowX{from{transform:scaleX(0)}} @keyframes expGrowY{from{transform:scaleY(0)}} @keyframes expLeave{to{opacity:0}} /* Legendes de schema : un libelle textuel, jamais une couleur seule. */ .exp-keys{ list-style:none;margin:1.15rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:0.5rem 1.6rem; } .exp-keys li{ display:flex;align-items:center;gap:0.55rem; font-size:0.88rem;line-height:1.5;color:var(--exp-ink-dim); } [data-exp-theme="deep"] .exp-keys li{color:var(--exp-on-dark-dim)} .exp-keys i{flex:none;width:26px;height:0;border-top:2px solid var(--exp-steel)} [data-exp-theme="deep"] .exp-keys i{border-top-color:rgba(255,255,255,0.55)} .exp-keys i.is-dashed{border-top-width:1px;border-top-style:dashed} .exp-keys i.is-gold{border-top-color:var(--exp-gold-ink)} [data-exp-theme="deep"] .exp-keys i.is-gold{border-top-color:var(--exp-gold)} .exp-keys i.is-square{width:12px;height:12px;border:0;background:var(--exp-steel)} .exp-keys i.is-ring{ width:13px;height:13px;border:2px solid var(--exp-gold-ink); border-radius:50%;background:transparent; } [data-exp-theme="deep"] .exp-keys i.is-ring{border-color:var(--exp-gold)} /* Etiquettes numerotees d'un schema en plusieurs etats. */ .exp-states{ list-style:none;margin:1rem 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.75rem 1.25rem; } .exp-states--four{grid-template-columns:repeat(4,minmax(0,1fr))} .exp-states li{ padding-top:0.75rem;border-top:1px solid var(--exp-rule); font-size:0.88rem;line-height:1.45;color:var(--exp-ink-dim); } [data-exp-theme="deep"] .exp-states li{color:var(--exp-on-dark-dim)} .exp-states b{ display:block;font-size:0.74rem;font-weight:700; letter-spacing:0.13em;color:var(--exp-gold-ink);margin-bottom:0.3rem; } [data-exp-theme="deep"] .exp-states b{color:var(--exp-gold)} /* ====================== 10. REVELATIONS (ARMEES) ====================== */ /* Etats d'attente : ils n'existent que sous `html.exp-anim`. Le contenu n'est donc jamais masque par le seul fait de charger la page. */ .exp-anim [data-exp-in]{ opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s var(--exp-ease); } .exp-anim [data-exp-in].is-in{opacity:1;transform:none} .exp-anim [data-exp-in][data-exp-delay="1"]{transition-delay:.14s} .exp-anim [data-exp-in][data-exp-delay="2"]{transition-delay:.28s} /* Le heros ne se revele jamais : titre et actions sont lisibles au premier rendu, sans delai ni saut. */ .exp-anim .exp-hero__surface [data-exp-in]{opacity:1;transform:none;transition:none} /* ============================== 11. LE HEROS ========================== */ /* Trois zones empilees sur toute la largeur : surface, ligne, profondeur. Aucune colonne de texte face a un schema : c'est precisement la silhouette des pages Industries, et elle est proscrite ici. */ .exp-hero{position:relative;padding:0} .exp-hero__surface{ background:var(--exp-surface); padding-block:clamp(1.1rem,3.2vh,2.4rem); display:flex;flex-direction:column;justify-content:center; } .exp-hero__deep{ background:var(--exp-deep); padding-block:clamp(0.6rem,1.5vh,1.15rem); overflow:hidden; display:flex;flex-direction:column;justify-content:center; } /* Le titre occupe la largeur editoriale, pas une demi colonne. */ .exp-hero__title{max-width:min(78%,26ch)} .exp-hero__lead{max-width:60ch} /* GRILLE VERTICALE DU HEROS (ordinateur uniquement) Trois rangees calees sur la hauteur reellement disponible sous le header. La profondeur recoit un minimum proportionnel : elle ne peut pas tomber sous 29 pour cent du premier ecran, donc le mecanisme et les cinq etapes sont toujours visibles sans defiler. La surface prend le reste, ce qui place surface et ligne entre 68 et 72 pour cent. `svh` est la mesure juste sur mobile (barre d'adresse retractable) ; `vh` reste le repli universel, declare en premier. */ @media(min-width:901px){ .exp-hero{ --exp-hero-h:calc(100vh - var(--exp-nav-h,var(--nav-h,68px))); display:grid; grid-template-rows:minmax(0,1fr) auto minmax(calc(var(--exp-hero-h) * 0.29),auto); min-height:var(--exp-hero-h); } @supports (height:100svh){ .exp-hero{--exp-hero-h:calc(100svh - var(--exp-nav-h,var(--nav-h,68px)))} } /* On resserre les respirations AVANT de toucher au H1. */ .exp-hero .exp-crumb{margin-bottom:clamp(0.5rem,1.4vh,1rem)} .exp-hero .exp-eyebrow{margin-bottom:clamp(0.4rem,1.1vh,0.85rem)} .exp-hero .exp-h1{margin-bottom:clamp(0.6rem,1.7vh,1.15rem)} } /* ====================== 12. COMPORTEMENTS RESPONSIVE ================== */ @media(max-width:1080px){ .exp-split,.exp-split--text,.exp-split--viz{ grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,4vh,2.75rem); } .exp-split--flip > .exp-figure{order:0} .exp-figure{width:min(100%,620px)} .exp-states,.exp-states--four{grid-template-columns:repeat(2,minmax(0,1fr))} .exp-hero__title{max-width:none} } @media(max-width:900px){ .exp-scene{padding-block:clamp(2.75rem,7vh,3.75rem)} /* Premier ecran mobile : titre, sous-titre, action ET un apercu de la ligne de revelation. On resserre les marges, jamais les textes, pour que la ligne entre dans le champ des le plus petit ecran (320 x 568). */ .exp-hero__surface{padding-block:clamp(1.1rem,3.4vh,1.9rem)} .exp-hero__deep{padding-block:clamp(1.6rem,4vh,2.4rem)} .exp-hero .exp-crumb{margin-bottom:0.85rem} .exp-hero .exp-eyebrow{margin-bottom:0.7rem} .exp-hero .exp-h1{margin-bottom:0.85rem} .exp-actions{gap:0.85rem;flex-direction:column;align-items:stretch} .exp-btn{width:100%} .exp-quiet{justify-content:flex-start} .exp-states,.exp-states--four{grid-template-columns:minmax(0,1fr);gap:0.6rem} .exp-keys{gap:0.45rem 1.1rem} .exp-depth__inner{gap:0.5rem 1rem} .exp-depth__say{grid-column:1 / -1} /* Le fil d'Ariane reste une cible confortable au pouce sans deplacer le texte : deux liens sur une meme ligne ne se touchent jamais. */ .exp-crumb a{display:inline-block;padding-block:0.4rem;margin-block:-0.4rem} /* REPRISE DE LA HIERARCHIE TYPOGRAPHIQUE assets/mobile-premium.css impose sous 900px `main p, main li, main span ... { font-size:max(1em,13px) !important }` et `main > * p { font-size:max(1em,15px) !important }`. Sur une page qui porte sa propre echelle, `1em` vaut la taille du PARENT, donc 16px partout, et toute la hierarchie disparaitrait. Les selecteurs de mobile-premium pesent (0,2,3) : on repasse devant avec trois classes, jamais avec un !important arbitraire. */ .exp-page .exp-shell .exp-p{font-size:16px !important;line-height:1.72 !important} .exp-page .exp-shell .exp-lead{font-size:17px !important;line-height:1.66 !important} .exp-page .exp-shell .exp-strong{font-size:clamp(1.15rem,4.8vw,1.4rem) !important;line-height:1.44 !important} .exp-page .exp-shell .exp-ask{font-size:17px !important;line-height:1.5 !important} .exp-page .exp-shell .exp-note{font-size:15px !important;line-height:1.62 !important} .exp-page .exp-shell .exp-result{font-size:16px !important} .exp-page .exp-shell .exp-result b{font-size:13px !important} .exp-page .exp-shell .exp-eyebrow{font-size:13.5px !important;letter-spacing:0.15em} .exp-page .exp-shell .exp-crumb, .exp-page .exp-shell .exp-crumb a{font-size:13px !important} .exp-page .exp-shell .exp-btn, .exp-page .exp-shell .exp-quiet, .exp-page .exp-shell .exp-link{font-size:16px !important} .exp-page .exp-shell .exp-link--minor{font-size:15px !important} .exp-page .exp-shell .exp-h3{font-size:19px !important;line-height:1.24 !important} .exp-page .exp-shell .exp-h2{font-size:clamp(1.5rem,6.2vw,2rem) !important;line-height:1.18 !important} .exp-page .exp-shell .exp-h1{font-size:clamp(1.95rem,8.2vw,2.7rem) !important;line-height:1.12 !important} .exp-page .exp-shell .exp-keys li, .exp-page .exp-shell .exp-states li{font-size:14px !important} .exp-page .exp-shell .exp-states b{font-size:13px !important} .exp-page .exp-shell .exp-figure figcaption{font-size:14.5px !important;line-height:1.6 !important} .exp-page .exp-shell .exp-annot{font-size:13px !important;letter-spacing:0.16em} .exp-page .exp-shell .exp-depth__tag{font-size:13.5px !important;letter-spacing:0.18em} .exp-page .exp-shell .exp-depth__n{font-size:1.5rem !important} .exp-page .exp-shell .exp-depth__say{font-size:15px !important} .exp-page .exp-shell .exp-reveal__above, .exp-page .exp-shell .exp-reveal__below{font-size:13px !important;letter-spacing:0.18em} .exp-page .exp-depthnav a{font-size:13px !important;letter-spacing:0.12em} .exp-page .exp-depthnav .exp-depthnav__n{font-size:12px !important} } @media(max-width:420px){ .exp-shell{padding-inline:1.15rem} .exp-depthnav a{padding-right:1.1rem;margin-right:1.1rem} .exp-depthnav a::after{right:1.1rem} } /* Ordinateur portable peu haut : on resserre les respirations, jamais la taille des titres. */ @media(min-width:1081px) and (max-height:800px){ /* Ecran peu haut : on resserre encore les respirations du heros et on borne le H1, jamais l'inverse. Le premier ecran doit montrer le titre, le sous-titre, les actions, la ligne, la profondeur et les cinq etapes. */ .exp-hero .exp-h1{font-size:clamp(2rem,1.05rem + 2.9vw,3.4rem)} .exp-hero__surface{padding-block:clamp(0.9rem,2.4vh,1.6rem)} .exp-hero__deep{padding-block:clamp(0.7rem,1.7vh,1.15rem)} .exp-reveal{padding-block:clamp(0.45rem,1.1vh,0.75rem)} .exp-scene{padding-block:clamp(2rem,4.5vh,3.25rem)} .exp-strong{margin-top:1.35rem} .exp-depth{padding-top:clamp(1.5rem,3.5vh,2.25rem)} } /* Telephone en paysage : la hauteur utile fond, aucune scene ne vise plus un ecran plein. */ @media(orientation:landscape) and (max-height:520px){ .exp-scene{padding-block:clamp(2rem,8vh,3rem)} .exp-depthnav{position:static} } /* ================== 13. VERSION SANS MOUVEMENT (COMPLETE) ============= */ /* Toute l'information apparait immediatement, dans son etat final, et aucun deplacement ne se produit. Les interactions restent entierement disponibles. Les pages ajoutent leurs propres remises a plat dans leur feuille specifique. */ @media(prefers-reduced-motion:reduce){ .exp-page *, .exp-page *::before, .exp-page *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .exp-page [data-exp-in], .exp-page [data-exp-in].is-in{opacity:1 !important;transform:none !important} .exp-page .exp-reveal__line i{transform:scaleX(1) !important} .exp-page .exp-reveal__mark{opacity:1 !important} .exp-page .exp-depthnav a.is-active::after{transform:scaleX(1) !important} /* Le segment dore de chaque marqueur de profondeur : il porte le rappel de la ligne de revelation, il ne doit jamais rester replie. */ .exp-page .exp-depth__inner::before{transform:scaleX(1) !important} } /* ============ 14. DECLINAISONS PREVUES POUR LES AUTRES EXPERTISES ===== Rien n'est code ici : cette section documente la charpente commune que chaque future page devra remplir. Le socle ci-dessus fournit deja la surface, la ligne de revelation, la profondeur, les annotations, la navigation des profondeurs, la typographie et les etats de mouvement. Chaque page n'a plus qu'a ecrire SON mecanisme, sous son propre prefixe, dans sa propre feuille. culture-organisationnelle prefixe cult- (fait) phenomene un comportement observe mecanisme la repetition qui le transforme en norme animation une trace traverse decision, reaction, repetition, renforcement et norme, et s'epaissit a chaque passage intelligence-culturelle prefixe icu- phenomene une meme situation mecanisme plusieurs interpretations simultanees animation un meme signal se divise en lectures divergentes, puis les ecarts d'interpretation deviennent lisibles leadership-pratiques-gestion prefixe ldr- phenomene une decision de gestion mecanisme les permissions implicites qu'elle cree animation une decision se propage de proche en proche et devient un repere collectif accueil-integration-retention prefixe air- phenomene une difficulte ou un depart mecanisme tout le parcours qui l'a precede animation un parcours se remonte a l'envers et revele ses ruptures strategie-gouvernance-diversite prefixe sgd- phenomene une intention commune mecanisme sa traduction dans les structures et les pratiques animation une intention traverse plusieurs niveaux et change de forme a chaque passage REGLE A TENIR Aucune de ces feuilles ne doit redefinir .exp-* : elles ne font qu'en consommer les jetons et ajouter leurs propres classes prefixees. Toute evolution commune se fait ici, une seule fois, pour toute la famille. ===================================================================== */