/* ========================================================================= MOSAICA / LEADERSHIP ET PRATIQUES DE GESTION ------------------------------------------------------------------------- Feuille chargee UNIQUEMENT par expertises/leadership-pratiques-gestion.html, APRES assets/expertises-identite.css dont elle consomme les jetons. PARTAGE DES ROLES expertises-identite.css surface, ligne de revelation, profondeur, annotations, navigation des profondeurs, typographie, actions, base des schemas, responsive commun, mouvement reduit commun. Prefixe exp-. ce fichier le mecanisme propre a Leadership et pratiques de gestion et les compositions propres a ses sections. Prefixe ldr- exclusivement. Aucune regle .exp-* n'est redefinie : seules des regles contextuelles (`.ldr-x .exp-y`) existent. CE QUI APPARTIENT A CETTE PAGE LA PROPAGATION. Un point decide. Il transmet non pas une tache mais un cadre borne. Un second point devient capable, et une ligne remonte de lui jusqu'a l'orientation : il repond de ses decisions. Le mouvement se reproduit, et la capacite finit par occuper plusieurs endroits a la fois, sans jamais quitter le meme cadre. TROIS LANGAGES, TROIS EXPERTISES cult- une trace unique s'epaissit a force d'etre repetee icu- des trajectoires s'ecartent, puis se recalent partiellement ldr- un point rend d'autres points capables, dans un cadre commun Aucun dessin n'est partage entre ces trois pages. VOCABULAIRE GRAPHIQUE cadre une ligne d'orientation continue, en haut, qui ne bouge pas bornes deux repères verticaux : ce qui peut etre decide, et rien de plus noeud vide une personne a qui rien n'a encore ete confie noeud plein une personne capable de decider dans son perimetre retour une ligne qui remonte au cadre : rendre compte essaimage la meme operation reproduite un cran plus loin ANIMATION Les etats d'attente n'existent que sous `html.exp-anim`, arme par le filet du et confirme par assets/expertises-identite.js. Trois proprietes seulement : `opacity`, `transform` et `stroke-dashoffset`. Aucune animation ne modifie la mise en page, aucune ne boucle. ========================================================================= */ /* ============ 1. LE MECANISME DE PROPAGATION (HEROS) ================= */ .ldr-mech{margin:0} .ldr-mech__stage{position:relative} /* La bande est bornee en hauteur : son viewBox tres plat (1160 x 176) et cette limite l'empechent de grandir avec la largeur disponible. C'est ce qui garantit que les six temps restent visibles sans defiler, y compris a 80 pour cent de zoom ou la largeur CSS augmente. `.exp-page svg{height:auto}` du socle pese (0,1,1) : on repasse devant avec `.exp-page`, sinon la bande reprend sa hauteur automatique et la profondeur deborde de sa part. */ .exp-page .ldr-mech__svg{ display:block;width:100%; height:clamp(72px,11.5vh,118px); } /* Le cadre commun ne change jamais d'epaisseur : c'est le seul element stable de toute la composition. */ .ldr-mech-frame{fill:none;stroke:var(--exp-gold);stroke-width:1.4;opacity:.62} .ldr-mech-station{fill:none;stroke:rgba(255,255,255,0.11);stroke-width:1} .ldr-mech-hair{fill:none;stroke:rgba(255,255,255,0.28);stroke-width:1} .ldr-mech-pass{fill:none;stroke:var(--exp-gold);stroke-width:1.6;opacity:.9} .ldr-mech-seed{fill:var(--exp-gold)} .ldr-mech-node{fill:var(--exp-gold)} .ldr-mech-ring{fill:none;stroke:var(--exp-gold);stroke-width:1.4;opacity:.75} .ldr-mech-dot{fill:var(--exp-gold)} /* Les bornes : ce qui est confie l'est toujours avec ses limites. */ .ldr-mech-bounds{fill:none;stroke:var(--exp-gold);stroke-width:1.2;opacity:.55} /* Le retour vers le cadre : rendre compte. Sans lui, il n'y a pas delegation mais abandon. */ .ldr-mech-back{fill:none;stroke:var(--exp-gold);stroke-width:1.2;opacity:.7} .ldr-mech-mark{fill:var(--exp-gold);opacity:.85} /* Les six temps sont du texte HTML, jamais du texte enferme dans le SVG. Sur ordinateur ils s'alignent sous les six stations. */ .ldr-mech__steps{ list-style:none;margin:clamp(0.4rem,0.9vh,0.7rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:0.6rem; } .ldr-mech__step{ display:flex;flex-direction:column;align-items:center;gap:0.3rem; text-align:center; } .ldr-mech__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-gold); } .ldr-mech__label{ font-size:0.75rem;font-weight:700; letter-spacing:0.13em;text-transform:uppercase; color:var(--exp-on-dark);line-height:1.45; } /* Le champ de points du telephone : masque sur ordinateur, ou le SVG porte deja le mecanisme. */ .ldr-mech__field{display:none} .ldr-mech__claim{ margin:clamp(0.5rem,1.1vh,0.85rem) 0 0;padding-left:1.2rem; max-width:none; border-left:2px solid var(--exp-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(0.98rem,0.92rem + 0.34vw,1.14rem); line-height:1.42;color:var(--exp-gold-soft); } /* Sequence : environ 3,9 s, jouee une seule fois, sans boucle. */ .exp-anim .ldr-mech.is-in .ldr-mech-frame{stroke-dasharray:var(--exp-len,1100);animation:expDraw 760ms ease 160ms both} .exp-anim .ldr-mech.is-in .ldr-mech-station{animation:expFade 320ms ease both} .exp-anim .ldr-mech.is-in .ldr-mech-station--1{animation-delay:240ms} .exp-anim .ldr-mech.is-in .ldr-mech-station--2{animation-delay:300ms} .exp-anim .ldr-mech.is-in .ldr-mech-station--3{animation-delay:360ms} .exp-anim .ldr-mech.is-in .ldr-mech-station--4{animation-delay:420ms} .exp-anim .ldr-mech.is-in .ldr-mech-station--5{animation-delay:480ms} .exp-anim .ldr-mech.is-in .ldr-mech-station--6{animation-delay:540ms} .exp-anim .ldr-mech.is-in .ldr-mech-drop{stroke-dasharray:var(--exp-len,110);animation:expDraw 420ms var(--exp-ease) 640ms both} .exp-anim .ldr-mech.is-in .ldr-mech-seed{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 980ms both} .exp-anim .ldr-mech.is-in .ldr-mech-pass--1{stroke-dasharray:var(--exp-len,400);animation:expDraw 560ms var(--exp-ease) 1180ms both} .exp-anim .ldr-mech.is-in .ldr-mech-bounds--1{animation:expFade 300ms ease 1620ms both} .exp-anim .ldr-mech.is-in .ldr-mech-ring--1{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1740ms both} .exp-anim .ldr-mech.is-in .ldr-mech-dot--1{transform-box:fill-box;transform-origin:center;animation:expPop 300ms var(--exp-ease) 1960ms both} .exp-anim .ldr-mech.is-in .ldr-mech-back--1{stroke-dasharray:var(--exp-len,210);animation:expDraw 500ms var(--exp-ease) 2140ms both} .exp-anim .ldr-mech.is-in .ldr-mech-mark--1{animation:expFade 280ms ease 2600ms both} .exp-anim .ldr-mech.is-in .ldr-mech-pass--2{stroke-dasharray:var(--exp-len,380);animation:expDraw 540ms var(--exp-ease) 2620ms both} .exp-anim .ldr-mech.is-in .ldr-mech-bounds--2{animation:expFade 300ms ease 3020ms both} .exp-anim .ldr-mech.is-in .ldr-mech-ring--2{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 3100ms both} .exp-anim .ldr-mech.is-in .ldr-mech-dot--2{transform-box:fill-box;transform-origin:center;animation:expPop 300ms var(--exp-ease) 3260ms both} .exp-anim .ldr-mech.is-in .ldr-mech-back--2{stroke-dasharray:var(--exp-len,140);animation:expDraw 420ms var(--exp-ease) 3380ms both} .exp-anim .ldr-mech.is-in .ldr-mech-mark--2{animation:expFade 260ms ease 3720ms both} .exp-anim .ldr-mech.is-in .ldr-mech-pass--3{stroke-dasharray:var(--exp-len,190);animation:expDraw 420ms var(--exp-ease) 3520ms both} .exp-anim .ldr-mech.is-in .ldr-mech-pass--4{stroke-dasharray:var(--exp-len,200);animation:expDraw 420ms var(--exp-ease) 3600ms both} .exp-anim .ldr-mech.is-in .ldr-mech-pass--5{stroke-dasharray:var(--exp-len,240);animation:expDraw 440ms var(--exp-ease) 3680ms both} .exp-anim .ldr-mech.is-in .ldr-mech-pass--6{stroke-dasharray:var(--exp-len,260);animation:expDraw 440ms var(--exp-ease) 3760ms both} .exp-anim .ldr-mech.is-in .ldr-mech-tether{animation:expFade 400ms ease 4020ms both} .exp-anim .ldr-mech.is-in .ldr-mech-node{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease both} .exp-anim .ldr-mech.is-in .ldr-mech-node--1{animation-delay:3900ms} .exp-anim .ldr-mech.is-in .ldr-mech-node--2{animation-delay:3980ms} .exp-anim .ldr-mech.is-in .ldr-mech-node--3{animation-delay:4060ms} .exp-anim .ldr-mech.is-in .ldr-mech-node--4{animation-delay:4140ms} .exp-anim .ldr-mech.is-armed .ldr-mech__step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--exp-ease)} .exp-anim .ldr-mech.is-in .ldr-mech__step{opacity:1;transform:none} .exp-anim .ldr-mech.is-in .ldr-mech__step--1{transition-delay:.66s} .exp-anim .ldr-mech.is-in .ldr-mech__step--2{transition-delay:1s} .exp-anim .ldr-mech.is-in .ldr-mech__step--3{transition-delay:1.78s} .exp-anim .ldr-mech.is-in .ldr-mech__step--4{transition-delay:2.2s} .exp-anim .ldr-mech.is-in .ldr-mech__step--5{transition-delay:2.68s} .exp-anim .ldr-mech.is-in .ldr-mech__step--6{transition-delay:3.6s} .exp-anim .ldr-mech.is-armed .ldr-mech__claim{opacity:0;transform:translateY(10px);transition:opacity .6s ease 4.2s,transform .6s var(--exp-ease) 4.2s} .exp-anim .ldr-mech.is-in .ldr-mech__claim{opacity:1;transform:none} /* L'aphorisme du titre est plus long que celui des autres pages de la famille : il reclame une mesure plus large pour tenir en deux ou trois lignes au lieu de quatre. Sur ecran peu haut, c'est cette largeur, et non la taille du texte, qui garde le premier ecran complet. */ .ldr-h1{ max-width:min(96%,40ch); font-size:clamp(1.95rem,1.02rem + 2.95vw,3.7rem); } /* La these de la page, juste sous le titre. Elle n'est pas une accroche decorative : c'est la phrase qui gouverne toute la lecture. */ .ldr-thesis{ margin:clamp(1rem,2.6vh,1.5rem) 0 clamp(1rem,2.6vh,1.5rem); max-width:34ch; font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.16rem,1.02rem + 0.72vw,1.6rem); line-height:1.34;color:var(--exp-gold-ink); padding-left:clamp(0.9rem,2vw,1.3rem); border-left:2px solid var(--exp-gold); } /* ================== 2. LES 4 CLES DES LEADERS INCLUSIFS ============== */ /* Quatre blocs de meme poids : aucune cle n'est presentee comme superieure aux autres, puisque c'est leur tenue simultanee qui compte. Filet dore en bord haut, jamais de carte a coins arrondis. */ .ldr-keys{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem); counter-reset:none; } .ldr-key{ min-width:0; padding-top:1rem; border-top:2px solid var(--exp-gold); } .ldr-key__n{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;color:var(--exp-gold-ink); margin-bottom:0.55rem; } .ldr-key__name{ margin:0 0 0.5rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.18rem,1.04rem + 0.5vw,1.44rem); line-height:1.2;color:var(--exp-navy-deep); } .ldr-key__claim{ margin:0 0 0.5rem; font-size:1rem;line-height:1.5;color:var(--exp-ink); } .ldr-key__say{ margin:0; font-size:0.92rem;line-height:1.6;color:var(--exp-ink-dim); } /* =========== 3. DE LA DIRECTION AU LEADERSHIP DE CHACUN ============= */ /* La chaine se lit horizontalement sur ordinateur : chaque etage est separe du suivant par un filet vertical, et un repere dore marque le maillon ou l'intention devient une experience. Aucune fleche dessinee : la progression est portee par la numerotation et par l'alignement. */ .ldr-chain{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; } .ldr-chain__step{ min-width:0; padding:1.1rem clamp(1rem,2vw,1.75rem) 0.4rem 0; border-top:1px solid var(--exp-rule-dark); position:relative; } .ldr-chain__step + .ldr-chain__step{ padding-left:clamp(1rem,2vw,1.75rem); border-left:1px solid var(--exp-rule-dark); } /* Le maillon critique : le seul a porter le filet dore. */ .ldr-chain__step:nth-child(2){border-top-color:var(--exp-gold)} .ldr-chain__n{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;color:var(--exp-gold); margin-bottom:0.5rem; } .ldr-chain__name{ margin:0 0 0.5rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.1rem,1rem + 0.45vw,1.34rem); line-height:1.22;color:#fff; } .ldr-chain__say{ margin:0; font-size:0.95rem;line-height:1.62;color:var(--exp-on-dark-dim); } .ldr-chain__end{margin-top:clamp(2rem,5vh,3rem)} /* ============ 4. PREUVES : PORTEE, APPRECIATION, TERRAIN ============= */ /* Trois preuves alignees, chacune qualifiee par son libelle. Le chiffre ne remplit jamais l'ecran : il reste une donnee, pas une affiche. */ .ldr-proof{ list-style:none;margin:clamp(2rem,5vh,2.75rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.75rem); } .ldr-proof__item{ min-width:0;padding-top:0.95rem; border-top:2px solid var(--exp-gold); } .ldr-proof__fig{ display:block; font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.9rem,1.3rem + 2vw,3rem); line-height:1.05;color:var(--exp-navy-deep); margin-bottom:0.5rem; } .ldr-proof__say{ display:block; font-size:0.98rem;line-height:1.58;color:var(--exp-ink-dim);max-width:32ch; } .ldr-proof__caveat{margin-top:clamp(1.1rem,2.6vh,1.6rem);max-width:72ch} /* Les deux preuves photographiques. Composition asymetrique : la preuve de dialogue est large, la preuve de reconnaissance reste secondaire. Aucune des deux n'est recadree : le bloc suit le format du fichier. */ .ldr-evidence{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3rem); align-items:start; margin-top:clamp(2.25rem,5.5vh,3.5rem); } .ldr-shot img{ display:block;width:100%;height:auto; border-top:2px solid var(--exp-gold); } /* La reconnaissance ne doit jamais devenir une banniere : elle est bornee en largeur meme lorsque sa colonne s'elargit. */ .ldr-shot--award{max-width:520px;justify-self:start} /* Le temoignage est recompose en HTML : la capture d'ecran source n'est jamais publiee. */ .ldr-quote{ margin:clamp(2.25rem,5.5vh,3.5rem) 0 0; padding-left:clamp(1.1rem,2.5vw,1.75rem); border-left:2px solid var(--exp-gold); max-width:64ch; } .ldr-quote__text{margin:0} .ldr-quote__text p{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:400;font-style:italic; font-size:clamp(1.15rem,1.02rem + 0.68vw,1.52rem); line-height:1.44;color:var(--exp-navy-deep); } .ldr-quote__by{margin-top:1.1rem} .ldr-quote__name{ display:block; font-size:0.95rem;font-weight:600;color:var(--exp-ink); } .ldr-quote__role{ display:block;margin-top:0.15rem; font-size:0.88rem;line-height:1.5;color:var(--exp-ink-dim); } /* Variante longue : le recit personnel de Martin, en premiere personne, sur plusieurs paragraphes. Corps de texte normal (non italique, taille courante) plutot que le traitement pull-quote a une seule ligne. */ .ldr-quote--wide{max-width:72ch} .ldr-quote--wide .ldr-quote__text{display:grid;gap:1.1rem} .ldr-quote--wide .ldr-quote__text p{ font-style:normal; font-size:1.05rem;line-height:1.62; } /* ============ 5. FORMER EST UNE PORTE D'ENTREE ====================== */ .ldr-field{align-items:start} /* Quatre temps, lus comme une progression et non comme un catalogue. */ .ldr-path{ list-style:none;margin:clamp(1.5rem,3.5vh,2.25rem) 0;padding:0; } .ldr-path li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.15rem clamp(0.9rem,2vw,1.4rem); padding-block:0.85rem; border-top:1px solid var(--exp-rule); font-size:0.97rem;line-height:1.58;color:var(--exp-ink-dim); } .ldr-path li:last-child{border-bottom:1px solid var(--exp-rule)} .ldr-path__n{ grid-row:1 / span 2; font-size:0.74rem;font-weight:700;letter-spacing:0.14em; color:var(--exp-gold-ink);padding-top:0.28rem; } .ldr-path b{ font-size:0.78rem;font-weight:700; letter-spacing:0.14em;text-transform:uppercase; color:var(--exp-navy-deep); } /* La signature methodologique : six verbes, une seule phrase. Le mode operatoire complet n'est pas publie. */ .ldr-signature{ margin:clamp(1.5rem,3.5vh,2.25rem) 0 0; padding-top:1rem;border-top:1px solid var(--exp-rule); font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.02rem,0.96rem + 0.3vw,1.2rem); line-height:1.42;color:var(--exp-navy-deep); } .ldr-signature span{ display:block;margin-top:0.45rem; font-family:'Space Grotesk',sans-serif;font-weight:400; font-size:0.92rem;line-height:1.6;color:var(--exp-ink-dim); } /* La photographie documentaire garde son format 4:3 d'origine. */ .ldr-shot--terrain img{border-top:2px solid var(--exp-gold)} /* ================= 6. LES CINQ PERSPECTIVES ========================= */ /* Grille de douze colonnes, deux rangees de formats differents. Chaque bloc est dimensionne pour la definition reelle de sa photographie : aucune image n'est agrandie au-dela de sa taille source, aucun object-fit: cover n'est utilise, aucun cadre n'impose son ratio. rangee 1 lead 7 (2048 px) + portrait 5 (1536 px) rangee 2 wide 5 (2000 px) + figure 4 (1545 px) + compact 3 (292 px) La carte compacte porte LP_PERS_01, dont la definition est de 292 x 220 px : trois colonnes representent environ 265 px sur un ecran de 1440, soit un affichage a l'echelle ou legerement en dessous. */ .ldr-cards{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.75rem,3.5vw,2.75rem); align-items:start; } .ldr-card{min-width:0} .ldr-card--lead{grid-column:span 7} .ldr-card--portrait{grid-column:span 5} .ldr-card--wide{grid-column:span 5} .ldr-card--figure{grid-column:span 4} .ldr-card--compact{grid-column:span 3} .ldr-card__link{display:block;height:100%;text-decoration:none;color:inherit} .ldr-card__visual{ display:block;overflow:hidden; border-top:2px solid var(--exp-gold);background:var(--exp-deep); } .ldr-card__visual img{ display:block;width:100%;height:auto; transition:transform .5s var(--exp-ease); } .ldr-card__link:hover .ldr-card__visual img{transform:scale(1.03)} /* LP_PERS_01 est la seule image de definition faible. Elle n'est jamais agrandie : son bloc s'arrete a sa largeur source et le texte se place dessous, dans la meme colonne. */ .ldr-card--compact .ldr-card__visual img{max-width:292px} .ldr-card__body{display:block;padding-top:1.05rem} .ldr-card__kind{ display:block;font-size:0.72rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-gold-ink);margin-bottom:0.5rem; } .ldr-card__title{ display:block; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.1rem,1rem + 0.42vw,1.3rem); line-height:1.28;color:var(--exp-navy-deep);margin-bottom:0.45rem; transition:color .22s ease; } .ldr-card__link:hover .ldr-card__title{color:var(--exp-gold-ink)} .ldr-card__say{display:block;font-size:0.95rem;line-height:1.6;color:var(--exp-ink-dim)} /* Hierarchie par la typographie, jamais par un traitement graphique different : l'article de tete porte le titre le plus grand. */ .ldr-card--lead .ldr-card__title{font-size:clamp(1.32rem,1.05rem + 0.95vw,1.7rem)} .ldr-card--portrait .ldr-card__title{font-size:clamp(1.2rem,1.02rem + 0.62vw,1.46rem)} .ldr-card--compact .ldr-card__title{font-size:clamp(1.04rem,0.98rem + 0.3vw,1.16rem)} .ldr-card--compact .ldr-card__say{font-size:0.9rem} .ldr-cards__more{margin:clamp(2rem,5vh,2.75rem) 0 0} /* ============ 7. TROIS PORTES D'ENTREE ============================== */ /* Trois blocs editoriaux entierement lisibles : aucun contenu d'intervention n'est place derriere une interaction. */ .ldr-doors{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; } .ldr-door{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.35rem clamp(1rem,2.5vw,2rem); align-items:baseline; padding-block:clamp(1.35rem,3.5vh,2.1rem); border-top:1px solid var(--exp-rule-dark); } .ldr-door:last-child{border-bottom:1px solid var(--exp-rule-dark)} .ldr-door__n{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.5rem,1.15rem + 1.2vw,2.15rem); line-height:1;color:var(--exp-gold); } .ldr-door__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem); line-height:1.14;color:#fff; } .ldr-door__say{ grid-column:2;margin:0.4rem 0 0; font-size:1rem;line-height:1.62;color:var(--exp-on-dark-dim);max-width:56ch; } /* ========================== 8. CONCLUSION ========================== */ .ldr-end{position:relative} .ldr-end__sign{ margin:clamp(2rem,5vh,3rem) 0 0; max-width:44ch; font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.24rem,1.05rem + 0.95vw,1.85rem); line-height:1.32;color:#fff; } .ldr-end__links{ display:flex;flex-wrap:wrap;align-items:center; gap:0.9rem 1.9rem;margin:clamp(1.6rem,4vh,2.4rem) 0 0; } /* ====================== 9. TABLETTE (<= 1080px) ===================== */ @media(max-width:1080px){ .ldr-keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.35rem,3vw,2rem)} .ldr-chain{grid-template-columns:repeat(2,minmax(0,1fr))} .ldr-chain__step{padding-right:clamp(0.9rem,2vw,1.5rem)} .ldr-chain__step + .ldr-chain__step{border-left:0;padding-left:0} .ldr-chain__step:nth-child(even){padding-left:clamp(0.9rem,2vw,1.5rem);border-left:1px solid var(--exp-rule-dark)} .ldr-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.75rem)} .ldr-evidence{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .ldr-shot--panel, .ldr-shot--award{max-width:720px} .ldr-field{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .ldr-shot--terrain{max-width:760px} /* La composition asymetrique se replie en deux colonnes : les formats restent differents, la grille cesse d'etre une mosaique. */ .ldr-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .ldr-card, .ldr-card--lead, .ldr-card--portrait, .ldr-card--wide, .ldr-card--figure, .ldr-card--compact{grid-column:auto} } /* ======================= 10. TELEPHONE (<= 900px) =================== */ @media(max-width:900px){ /* LE MECANISME DEVIENT VERTICAL. Le schema large ne serait plus lisible : il cede la place a la meme lecture, portee par le texte et par un champ de points relies au meme cadre. L'information est strictement la meme : la capacite se multiplie, le cadre ne change pas. */ .ldr-mech__stage{display:none} .ldr-mech__steps{display:block;margin-top:0} .ldr-mech__step{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline;gap:0.3rem 0.9rem; text-align:left; padding-block:0.75rem; border-top:1px solid rgba(255,255,255,0.16); } .ldr-mech__step:first-child{border-top:0;padding-top:0} /* Le cadre est la ligne du haut : elle a exactement la meme largeur a chaque etape. Ce sont les points, en dessous, qui se multiplient. */ .ldr-mech__field{ display:block;grid-column:1 / -1; position:relative;height:24px;margin-top:0.5rem; border-top:1px solid rgba(199,166,106,0.5); } .ldr-mech__field i{ position:absolute;top:17px; width:8px;height:8px;background:var(--exp-gold); opacity:.12; } /* Le lien qui remonte au cadre : c'est lui qui distingue une capacite confiee d'une capacite abandonnee. */ .ldr-mech__field i::before{ content:"";position:absolute;left:3px;top:-17px; width:1px;height:17px;background:var(--exp-gold);opacity:0; } .ldr-mech__field i:nth-child(1){left:0} .ldr-mech__field i:nth-child(2){left:18%} .ldr-mech__field i:nth-child(3){left:36%} .ldr-mech__field i:nth-child(4){left:54%} .ldr-mech__field i:nth-child(5){left:72%} .ldr-mech__field i:nth-child(6){left:90%} /* 01 L'orientation : le cadre existe, personne ne decide encore. */ /* 02 La decision : un seul point. */ .ldr-mech__step--2 .ldr-mech__field i:nth-child(1){opacity:1} /* 03 La permission : un second point recoit un perimetre. */ .ldr-mech__step--3 .ldr-mech__field i:nth-child(1), .ldr-mech__step--3 .ldr-mech__field i:nth-child(2){opacity:1} /* 04 La responsabilite : les points capables repondent au cadre. */ .ldr-mech__step--4 .ldr-mech__field i:nth-child(1), .ldr-mech__step--4 .ldr-mech__field i:nth-child(2){opacity:1} .ldr-mech__step--4 .ldr-mech__field i:nth-child(1)::before, .ldr-mech__step--4 .ldr-mech__field i:nth-child(2)::before{opacity:.65} /* 05 La transmission : le mouvement se reproduit. */ .ldr-mech__step--5 .ldr-mech__field i:nth-child(1), .ldr-mech__step--5 .ldr-mech__field i:nth-child(2), .ldr-mech__step--5 .ldr-mech__field i:nth-child(3), .ldr-mech__step--5 .ldr-mech__field i:nth-child(4){opacity:1} .ldr-mech__step--5 .ldr-mech__field i:nth-child(1)::before, .ldr-mech__step--5 .ldr-mech__field i:nth-child(2)::before, .ldr-mech__step--5 .ldr-mech__field i:nth-child(3)::before, .ldr-mech__step--5 .ldr-mech__field i:nth-child(4)::before{opacity:.65} /* 06 La capacite : six points, un seul cadre. */ .ldr-mech__step--6 .ldr-mech__field i{opacity:1} .ldr-mech__step--6 .ldr-mech__field i::before{opacity:.65} .exp-anim .ldr-mech.is-armed .ldr-mech__field i{transform:scale(0)} .exp-anim .ldr-mech.is-in .ldr-mech__field i{transform:none;transition:transform .45s var(--exp-ease)} .exp-anim .ldr-mech.is-in .ldr-mech__step--1 .ldr-mech__field i{transition-delay:.2s} .exp-anim .ldr-mech.is-in .ldr-mech__step--2 .ldr-mech__field i{transition-delay:.5s} .exp-anim .ldr-mech.is-in .ldr-mech__step--3 .ldr-mech__field i{transition-delay:.8s} .exp-anim .ldr-mech.is-in .ldr-mech__step--4 .ldr-mech__field i{transition-delay:1.1s} .exp-anim .ldr-mech.is-in .ldr-mech__step--5 .ldr-mech__field i{transition-delay:1.4s} .exp-anim .ldr-mech.is-in .ldr-mech__step--6 .ldr-mech__field i{transition-delay:1.7s} /* Sur telephone, le libelle arrive AVEC son champ, pas selon la cadence horizontale de l'ordinateur. */ .exp-anim .ldr-mech.is-in .ldr-mech__step--1{transition-delay:.2s} .exp-anim .ldr-mech.is-in .ldr-mech__step--2{transition-delay:.5s} .exp-anim .ldr-mech.is-in .ldr-mech__step--3{transition-delay:.8s} .exp-anim .ldr-mech.is-in .ldr-mech__step--4{transition-delay:1.1s} .exp-anim .ldr-mech.is-in .ldr-mech__step--5{transition-delay:1.4s} .exp-anim .ldr-mech.is-in .ldr-mech__step--6{transition-delay:1.7s} .exp-anim .ldr-mech.is-armed .ldr-mech__claim{transition-delay:2.1s} .ldr-mech__claim{margin-top:1.25rem} /* Sur telephone, le socle rend deja le titre du heros pleine largeur : on lui laisse la main. */ .ldr-h1{max-width:none} .ldr-thesis{max-width:none} .ldr-keys{grid-template-columns:minmax(0,1fr);gap:0} .ldr-key{padding-block:1.1rem 0.4rem} .ldr-key:first-child{padding-top:0} .ldr-chain{grid-template-columns:minmax(0,1fr)} .ldr-chain__step, .ldr-chain__step + .ldr-chain__step{ padding:1rem 0 0.6rem;border-left:0; } .ldr-proof{grid-template-columns:minmax(0,1fr);gap:0} .ldr-proof__item{padding-block:1.1rem 0.5rem} .ldr-proof__item:first-child{padding-top:0} .ldr-proof__say{max-width:none} .ldr-cards{grid-template-columns:minmax(0,1fr)} .ldr-card--compact .ldr-card__visual img{max-width:292px} .ldr-door{grid-template-columns:auto minmax(0,1fr)} .ldr-end__sign{max-width:none} /* Reprise de la hierarchie typographique face a mobile-premium.css. Meme regle que dans expertises-identite.css : trois classes pour depasser, jamais un !important arbitraire. */ .exp-page .exp-shell .ldr-chain__say, .exp-page .exp-shell .ldr-door__say, .exp-page .exp-shell .ldr-key__say, .exp-page .exp-shell .ldr-card__say, .exp-page .exp-shell .ldr-proof__say, .exp-page .exp-shell .ldr-path li{font-size:16px !important;line-height:1.6 !important} .exp-page .exp-shell .ldr-end__sign{font-size:20px !important;line-height:1.4 !important} .exp-page .exp-shell .ldr-mech__claim{font-size:clamp(1.05rem,4.4vw,1.3rem) !important;line-height:1.44 !important} .exp-page .exp-shell .ldr-mech__label{font-size:13.5px !important;letter-spacing:0.13em} .exp-page .exp-shell .ldr-mech__n, .exp-page .exp-shell .ldr-key__n, .exp-page .exp-shell .ldr-chain__n, .exp-page .exp-shell .ldr-path__n, .exp-page .exp-shell .ldr-card__kind{font-size:12.5px !important} .exp-page .exp-shell .ldr-path b{font-size:13px !important;letter-spacing:0.14em} .exp-page .exp-shell .ldr-key__name, .exp-page .exp-shell .ldr-chain__name, .exp-page .exp-shell .ldr-card__title{font-size:20px !important;line-height:1.24 !important} .exp-page .exp-shell .ldr-card--lead .ldr-card__title{font-size:22px !important} .exp-page .exp-shell .ldr-door__name{font-size:22px !important;line-height:1.14 !important} .exp-page .exp-shell .ldr-door__n{font-size:1.4rem !important} .exp-page .exp-shell .ldr-proof__fig{font-size:34px !important;line-height:1.05 !important} .exp-page .exp-shell .ldr-quote__text p{font-size:19px !important;line-height:1.42 !important} .exp-page .exp-shell .ldr-thesis{font-size:18px !important;line-height:1.36 !important} .exp-page .exp-shell .ldr-signature{font-size:17px !important;line-height:1.4 !important} .exp-page .exp-shell .ldr-signature span{font-size:15px !important;line-height:1.6 !important} } @media(max-width:420px){ .ldr-door{gap:0.3rem 0.85rem} .ldr-quote{padding-left:0.9rem} } /* ============ 11. VERSION SANS MOUVEMENT (COMPLEMENT PAGE) ========== */ /* expertises-identite.css a deja coupe animations et transitions pour toute la famille. On remet ici a plat les seuls etats d'attente propres a cette page : rien ne doit rester replie, efface ou hors cadre. */ @media(prefers-reduced-motion:reduce){ .exp-page .ldr-mech__field i{transform:none !important} .exp-page .ldr-mech-frame, .exp-page .ldr-mech-drop, .exp-page .ldr-mech-pass, .exp-page .ldr-mech-back{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .exp-page .ldr-mech-station, .exp-page .ldr-mech-seed, .exp-page .ldr-mech-node, .exp-page .ldr-mech-ring, .exp-page .ldr-mech-dot, .exp-page .ldr-mech-bounds, .exp-page .ldr-mech-mark, .exp-page .ldr-mech-tether, .exp-page .ldr-mech__step, .exp-page .ldr-mech__claim{opacity:1 !important;transform:none !important} .exp-page .ldr-card__visual img{transform:none !important} /* Les points encore vides d'une etape donnee gardent leur attenuation : elle porte une information (personne ne decide encore ici) et n'est pas un etat d'attente. Aucune remise a plat ne les concerne donc. */ } /* ============ 12. VISUELS DES PAGES PERSPECTIVES ==================== */ /* Ces regles servent aux articles de perspectives/leadership-inclusif/, qui chargent cette meme feuille apres perspectives-article.css. Elles ne font que BORNER la largeur d'un visuel de heros : aucune image n'est recadree, etiree ni agrandie au-dela de sa definition source. */ .ldr-hero-photo--small img{max-width:292px} .ldr-hero-photo--small figcaption{max-width:44ch} /* Une photographie verticale est bornee en largeur pour l'etre en hauteur : sans cette borne, elle occuperait seule le premier ecran. */ .ldr-hero-photo--portrait img{max-width:420px} @media(max-width:900px){ .ldr-hero-photo--portrait img{max-width:340px} }