/* ========================================================================= MOSAICA / CULTURE ORGANISATIONNELLE ------------------------------------------------------------------------- Feuille chargee UNIQUEMENT par expertises/culture-organisationnelle.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 Culture organisationnelle et les compositions propres a ses sections. Prefixe cult- exclusivement. CE QUI APPARTIENT A CETTE PAGE La repetition. Une action isolee laisse une trace legere ; repetee, elle devient plus nette ; renforcee, elle se stabilise ; tolerée sans reponse, elle se normalise tout autant. C'est la signature visuelle de cette expertise, et d'aucune autre : le mecanisme du heros, la coupe des trois niveaux, les deux trajectoires et les cinq moments de revelation. 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 REPETITION (HEROS) =============== */ /* Cinq stations sur une seule composition continue : decision, reaction, repetition, renforcement, norme. Jamais cinq cartes. La trace traverse les cinq etapes et s'epaissit a chaque passage ; la mosaique finale n'est qu'un resultat conceptuel, discret, jamais le sujet. */ .cult-mech{margin:0} .cult-mech__stage{position:relative} /* La bande est bornee en hauteur : son viewBox tres plat (1160 x 120) et cette limite l'empechent de grandir avec la largeur disponible. C'est ce qui garantit que les cinq etapes 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 .cult-mech__svg{ display:block;width:100%; height:clamp(72px,11.5vh,120px); } /* Traits du mecanisme. La trace ne change jamais de couleur : seules son epaisseur et son opacite disent la repetition. */ .cult-mech-guide{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:1} .cult-mech-station{fill:none;stroke:rgba(255,255,255,0.13);stroke-width:1} .cult-mech-trace{fill:none;stroke:var(--exp-gold);stroke-linecap:square} .cult-mech-a{stroke-width:1.2;opacity:.55} .cult-mech-b{stroke-width:1.5;opacity:.68} .cult-mech-r1{stroke-width:1.7;opacity:.72} .cult-mech-r2{stroke-width:2.2;opacity:.84} .cult-mech-r3{stroke-width:2.8;opacity:.94} .cult-mech-c{stroke-width:3.6;opacity:1} .cult-mech-n{stroke-width:6;opacity:1;transform-box:fill-box;transform-origin:left center} /* Les echos : ce que la repetition laisse derriere elle. */ .cult-mech-echo{fill:none;stroke:var(--exp-gold);stroke-width:1.2} .cult-mech-echo--1{opacity:.20} .cult-mech-echo--2{opacity:.12} .cult-mech-tile{fill:#8FADBF} .cult-mech-tile--gold{fill:var(--exp-gold)} /* Les cinq libelles sont du texte HTML, jamais du texte enferme dans le SVG. Sur ordinateur ils s'alignent sous les cinq stations. */ .cult-mech__steps{ list-style:none;margin:clamp(0.55rem,1.4vh,1rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:0.75rem; } .cult-mech__step{ display:flex;flex-direction:column;align-items:center;gap:0.35rem; text-align:center; } .cult-mech__n{ font-size:0.76rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-gold); } .cult-mech__label{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-on-dark);line-height:1.5; } /* La trace verticale du telephone : masquee sur ordinateur, ou le SVG porte deja le mecanisme. */ .cult-mech__bar{display:none} .cult-mech__claim{ margin:clamp(0.7rem,1.8vh,1.25rem) 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(1.12rem,0.98rem + 0.62vw,1.45rem); line-height:1.45;color:var(--exp-gold-soft); } /* Sequence : environ 3,8 s, jouee une seule fois, sans boucle. */ .exp-anim .cult-mech.is-in .cult-mech-guide{stroke-dasharray:var(--exp-len,1100);animation:expDraw 700ms ease 180ms both} .exp-anim .cult-mech.is-in .cult-mech-station{animation:expFade 320ms ease both} .exp-anim .cult-mech.is-in .cult-mech-station--1{animation-delay:260ms} .exp-anim .cult-mech.is-in .cult-mech-station--2{animation-delay:340ms} .exp-anim .cult-mech.is-in .cult-mech-station--3{animation-delay:420ms} .exp-anim .cult-mech.is-in .cult-mech-station--4{animation-delay:500ms} .exp-anim .cult-mech.is-in .cult-mech-station--5{animation-delay:580ms} .exp-anim .cult-mech.is-in .cult-mech-a{stroke-dasharray:var(--exp-len,220);animation:expDraw 500ms var(--exp-ease) 600ms both} .exp-anim .cult-mech.is-in .cult-mech-b{stroke-dasharray:var(--exp-len,320);animation:expDraw 620ms var(--exp-ease) 1050ms both} .exp-anim .cult-mech.is-in .cult-mech-r1{stroke-dasharray:var(--exp-len,120);animation:expDraw 330ms ease 1550ms both} .exp-anim .cult-mech.is-in .cult-mech-r2{stroke-dasharray:var(--exp-len,120);animation:expDraw 330ms ease 1800ms both} .exp-anim .cult-mech.is-in .cult-mech-r3{stroke-dasharray:var(--exp-len,120);animation:expDraw 330ms ease 2050ms both} .exp-anim .cult-mech.is-in .cult-mech-echo--1{animation:expFade 340ms ease 1980ms both} .exp-anim .cult-mech.is-in .cult-mech-echo--2{animation:expFade 340ms ease 2200ms both} .exp-anim .cult-mech.is-in .cult-mech-c{stroke-dasharray:var(--exp-len,240);animation:expDraw 470ms var(--exp-ease) 2450ms both} .exp-anim .cult-mech.is-in .cult-mech-n{animation:expGrowX 520ms var(--exp-ease) 2850ms both} .exp-anim .cult-mech.is-in .cult-mech-tile{animation:expFade 360ms ease both} .exp-anim .cult-mech.is-in .cult-mech-tile:nth-of-type(4n+1){animation-delay:3200ms} .exp-anim .cult-mech.is-in .cult-mech-tile:nth-of-type(4n+2){animation-delay:3290ms} .exp-anim .cult-mech.is-in .cult-mech-tile:nth-of-type(4n+3){animation-delay:3380ms} .exp-anim .cult-mech.is-in .cult-mech-tile:nth-of-type(4n){animation-delay:3470ms} .exp-anim .cult-mech.is-in .cult-mech-tile--gold{animation-delay:3560ms} .exp-anim .cult-mech.is-armed .cult-mech__step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--exp-ease)} .exp-anim .cult-mech.is-in .cult-mech__step{opacity:1;transform:none} .exp-anim .cult-mech.is-in .cult-mech__step--1{transition-delay:.62s} .exp-anim .cult-mech.is-in .cult-mech__step--2{transition-delay:1.12s} .exp-anim .cult-mech.is-in .cult-mech__step--3{transition-delay:1.62s} .exp-anim .cult-mech.is-in .cult-mech__step--4{transition-delay:2.5s} .exp-anim .cult-mech.is-in .cult-mech__step--5{transition-delay:2.9s} .exp-anim .cult-mech.is-armed .cult-mech__claim{opacity:0;transform:translateY(10px);transition:opacity .6s ease 3.3s,transform .6s var(--exp-ease) 3.3s} .exp-anim .cult-mech.is-in .cult-mech__claim{opacity:1;transform:none} /* ================= 2. UNE CULTURE EXISTE DEJA (echelles) ============== */ .exp-anim .is-in .cult-sc-seed{transform-box:fill-box;transform-origin:center;animation:expPop 300ms ease both} .exp-anim .is-in .cult-sc-seed--2{animation-delay:420ms} .exp-anim .is-in .cult-sc-seed--3{animation-delay:840ms} .exp-anim .is-in .cult-sc-line{stroke-dasharray:var(--exp-len,160);animation:expDraw 420ms var(--exp-ease) both} .exp-anim .is-in .cult-sc-line.is-a{animation-delay:180ms} .exp-anim .is-in .cult-sc-line.is-b{animation-delay:600ms} .exp-anim .is-in .cult-sc-line.is-c{animation-delay:1020ms} .exp-anim .is-in .cult-sc-relay{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease both} .exp-anim .is-in .cult-sc-relay.is-b{animation-delay:520ms} .exp-anim .is-in .cult-sc-relay.is-c{animation-delay:940ms} .exp-anim .is-in .cult-sc-end{animation:expFade 300ms ease both} .exp-anim .is-in .cult-sc-end.is-a{animation-delay:560ms} .exp-anim .is-in .cult-sc-end.is-b{animation-delay:980ms} .exp-anim .is-in .cult-sc-end.is-c{animation-delay:1400ms} .exp-anim .is-in .cult-sc-drift{animation:expFade 340ms ease 1560ms both} /* ====================== 3. TROIS REGISTRES (ce qu'elle est) =========== */ /* Trois parties editoriales verticales, jamais trois cartes : le libelle occupe une colonne etroite, le texte la colonne large, et une seule ligne les separe. */ .cult-registers{margin-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--exp-rule)} .cult-register{ display:grid; grid-template-columns:minmax(0,0.34fr) minmax(0,0.66fr); gap:clamp(1rem,3vw,2.75rem); padding-block:clamp(1.5rem,4vh,2.4rem); border-bottom:1px solid var(--exp-rule); align-items:start; } .cult-register__label{ display:flex;align-items:baseline;gap:0.75rem; font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink);line-height:1.6;margin:0; } .cult-register__n{ font-size:0.76rem;color:var(--exp-steel-ink); letter-spacing:0.08em;flex:none; } .cult-register__text{ font-size:1.06rem;line-height:1.72;color:var(--exp-ink); margin:0;max-width:56ch; } .cult-register--pivot .cult-register__text{color:var(--exp-ink-dim)} .exp-anim .is-in .cult-rg-said{stroke-dasharray:var(--exp-len,300);animation:expDraw 480ms ease 120ms both} .exp-anim .is-in .cult-rg-frame{animation:expFade 380ms ease 520ms both} .exp-anim .is-in .cult-rg-rule{transform-box:fill-box;transform-origin:left center;animation:expGrowX 340ms var(--exp-ease) both} .exp-anim .is-in .cult-rg-rule--1{animation-delay:620ms} .exp-anim .is-in .cult-rg-rule--2{animation-delay:720ms} .exp-anim .is-in .cult-rg-rule--3{animation-delay:820ms} .exp-anim .is-in .cult-rg-rule--4{animation-delay:920ms} .exp-anim .is-in .cult-rg-act{transform-box:fill-box;transform-origin:left center;animation:expGrowX 260ms ease both} .exp-anim .is-in .cult-rg-act:nth-of-type(3n+1){animation-delay:1120ms} .exp-anim .is-in .cult-rg-act:nth-of-type(3n+2){animation-delay:1220ms} .exp-anim .is-in .cult-rg-act:nth-of-type(3n){animation-delay:1320ms} .exp-anim .is-in .cult-rg-thread{stroke-dasharray:var(--exp-len,420);animation:expDraw 640ms var(--exp-ease) 1500ms both} /* ============ 4. LES MOMENTS OU LA CULTURE SE REVELE (onglets) ======== */ .cult-cases{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .cult-cases__hint{ display:none;margin:0 0 1rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-ink-dim); } .cult-tabs-ready .cult-cases__hint{display:block} .cult-cases__rail{display:none;flex-wrap:wrap;gap:0.5rem;border-bottom:1px solid var(--exp-rule);padding-bottom:0.75rem} .cult-tabs-ready .cult-cases__rail{display:flex} .cult-case-tab{ position:relative; appearance:none;-webkit-appearance:none; background:none;border:0;border-bottom:2px solid transparent; padding:0.7rem 0.9rem;min-height:48px; display:inline-flex;align-items:center;gap:0.6rem; font-family:'Space Grotesk',sans-serif; cursor:pointer;text-align:left; transition:border-color .25s ease,background-color .25s ease; } .cult-case-tab__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.08em; color:var(--exp-steel-ink);transition:color .25s ease; } .cult-case-tab__name{ font-size:0.8rem;font-weight:700; letter-spacing:0.13em;text-transform:uppercase; color:var(--exp-ink-dim);line-height:1.4; transition:color .25s ease; } .cult-case-tab:hover .cult-case-tab__name{color:var(--exp-navy-deep)} .cult-case-tab:hover{border-bottom-color:var(--exp-rule)} /* Etat actif : un trait, une graisse et un marqueur. Jamais la couleur seule. */ .cult-case-tab[aria-selected="true"]{border-bottom-color:var(--exp-gold-ink);background:rgba(6,31,44,0.04)} .cult-case-tab[aria-selected="true"] .cult-case-tab__name{color:var(--exp-navy-deep)} .cult-case-tab[aria-selected="true"] .cult-case-tab__n{color:var(--exp-gold-ink)} .cult-case-tab[aria-selected="true"]::after{ content:"";position:absolute;left:50%;bottom:-2px; width:8px;height:8px;margin-left:-4px; background:var(--exp-gold-ink); transform:rotate(45deg) translateY(-3px); } .cult-cases__stage{margin-top:clamp(1.5rem,4vh,2.25rem)} .cult-tabs-ready .cult-cases__stage{display:grid} .cult-case-panel{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr); gap:clamp(1.5rem,3.5vw,3rem); align-items:center; } .cult-case-panel + .cult-case-panel{margin-top:clamp(2.25rem,5vh,3.25rem);padding-top:clamp(2rem,4vh,2.75rem);border-top:1px solid var(--exp-rule)} /* Une fois les onglets actifs, les cinq volets partagent la meme cellule : la scene garde la hauteur du plus grand et rien ne saute. */ .cult-tabs-ready .cult-case-panel{ grid-area:1 / 1;margin-top:0;padding-top:0;border-top:0; /* `visibility` retire aussi le volet de l'arbre d'accessibilite et du parcours de tabulation. Aucune transition ne lui est appliquee : elle doit prendre effet immediatement, sinon un volet masque resterait atteignable au clavier. */ visibility:hidden;opacity:0; } .cult-tabs-ready .cult-case-panel.is-active{ visibility:visible;opacity:1; transition:opacity .3s ease; } .cult-case-panel__ask{ margin:1.35rem 0 0;padding-top:1rem; border-top:1px solid var(--exp-rule); font-family:'Ibarra Real Nova',serif; font-size:1.1rem;line-height:1.5;color:var(--exp-navy);max-width:48ch; } /* 01 Une decision difficile : deux engagements, un arbitrage explique. */ .exp-anim .cult-case-panel.is-playing .cult-dc-in, .exp-anim .cult-play.is-in .cult-dc-in{stroke-dasharray:var(--exp-len,220);animation:expDraw 420ms ease both} .exp-anim .cult-case-panel.is-playing .cult-dc-in--2, .exp-anim .cult-play.is-in .cult-dc-in--2{animation-delay:120ms} .exp-anim .cult-case-panel.is-playing .cult-dc-node, .exp-anim .cult-play.is-in .cult-dc-node{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 480ms both} .exp-anim .cult-case-panel.is-playing .cult-dc-said, .exp-anim .cult-play.is-in .cult-dc-said{transform-box:fill-box;transform-origin:bottom center;animation:expGrowY 300ms var(--exp-ease) 700ms both} .exp-anim .cult-case-panel.is-playing .cult-dc-out, .exp-anim .cult-play.is-in .cult-dc-out{stroke-dasharray:var(--exp-len,200);animation:expDraw 460ms var(--exp-ease) 900ms both} .exp-anim .cult-case-panel.is-playing .cult-dc-off, .exp-anim .cult-play.is-in .cult-dc-off{animation:expFade 340ms ease 1180ms both} /* 02 Une erreur : la rupture, la boucle qui repare, l'impasse du blame. */ .exp-anim .cult-case-panel.is-playing .cult-er-base, .exp-anim .cult-play.is-in .cult-er-base{stroke-dasharray:var(--exp-len,180);animation:expDraw 380ms ease both} .exp-anim .cult-case-panel.is-playing .cult-er-break, .exp-anim .cult-play.is-in .cult-er-break{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 400ms both} .exp-anim .cult-case-panel.is-playing .cult-er-loop, .exp-anim .cult-play.is-in .cult-er-loop{stroke-dasharray:var(--exp-len,300);animation:expDraw 620ms var(--exp-ease) 620ms both} .exp-anim .cult-case-panel.is-playing .cult-er-fix, .exp-anim .cult-play.is-in .cult-er-fix{transform-box:fill-box;transform-origin:left center;animation:expGrowX 320ms var(--exp-ease) 1180ms both} .exp-anim .cult-case-panel.is-playing .cult-er-dead, .exp-anim .cult-play.is-in .cult-er-dead{stroke-dasharray:var(--exp-len,150);animation:expDraw 420ms ease 820ms both} .exp-anim .cult-case-panel.is-playing .cult-er-stop, .exp-anim .cult-play.is-in .cult-er-stop{animation:expFade 300ms ease 1220ms both} /* 03 Une tension : ce qui n'est pas nomme reste, ce qui est nomme se traite. Les deux issues sont montrees ensemble. */ .exp-anim .cult-case-panel.is-playing .cult-tn-a, .exp-anim .cult-play.is-in .cult-tn-a{stroke-dasharray:var(--exp-len,240);animation:expDraw 460ms ease both} .exp-anim .cult-case-panel.is-playing .cult-tn-a--2, .exp-anim .cult-play.is-in .cult-tn-a--2{animation-delay:100ms} .exp-anim .cult-case-panel.is-playing .cult-tn-drift, .exp-anim .cult-play.is-in .cult-tn-drift{stroke-dasharray:var(--exp-len,240);animation:expDraw 480ms ease 560ms both} .exp-anim .cult-case-panel.is-playing .cult-tn-b, .exp-anim .cult-play.is-in .cult-tn-b{stroke-dasharray:var(--exp-len,240);animation:expDraw 460ms ease 420ms both} .exp-anim .cult-case-panel.is-playing .cult-tn-name, .exp-anim .cult-play.is-in .cult-tn-name{transform-box:fill-box;transform-origin:center;animation:expGrowY 300ms var(--exp-ease) 960ms both} .exp-anim .cult-case-panel.is-playing .cult-tn-out, .exp-anim .cult-play.is-in .cult-tn-out{stroke-dasharray:var(--exp-len,180);animation:expDraw 420ms ease 1200ms both} /* 04 Une arrivee : une marque nouvelle rejoint un rythme jamais ecrit. */ .exp-anim .cult-case-panel.is-playing .cult-ar-set, .exp-anim .cult-play.is-in .cult-ar-set{animation:expFade 320ms ease both} .exp-anim .cult-case-panel.is-playing .cult-ar-set--2, .exp-anim .cult-play.is-in .cult-ar-set--2{animation-delay:80ms} .exp-anim .cult-case-panel.is-playing .cult-ar-set--3, .exp-anim .cult-play.is-in .cult-ar-set--3{animation-delay:160ms} .exp-anim .cult-case-panel.is-playing .cult-ar-set--4, .exp-anim .cult-play.is-in .cult-ar-set--4{animation-delay:240ms} .exp-anim .cult-case-panel.is-playing .cult-ar-set--5, .exp-anim .cult-play.is-in .cult-ar-set--5{animation-delay:320ms} .exp-anim .cult-case-panel.is-playing .cult-ar-rule, .exp-anim .cult-play.is-in .cult-ar-rule{stroke-dasharray:var(--exp-len,340);animation:expDraw 520ms ease 480ms both} @keyframes cultArrive{from{transform:translate(-96px,54px);opacity:0}} .exp-anim .cult-case-panel.is-playing .cult-ar-new, .exp-anim .cult-play.is-in .cult-ar-new{animation:cultArrive 760ms cubic-bezier(.4,.1,.2,1) 900ms both} .exp-anim .cult-case-panel.is-playing .cult-ar-fit, .exp-anim .cult-play.is-in .cult-ar-fit{animation:expFade 320ms ease 1620ms both} /* 05 Un changement : l'annonce ne suffit pas tant que le mecanisme est inchange. */ .exp-anim .cult-case-panel.is-playing .cult-ch-say, .exp-anim .cult-play.is-in .cult-ch-say{transform-box:fill-box;transform-origin:left center;animation:expGrowX 400ms var(--exp-ease) both} .exp-anim .cult-case-panel.is-playing .cult-ch-mech, .exp-anim .cult-play.is-in .cult-ch-mech{animation:expFade 320ms ease both} .exp-anim .cult-case-panel.is-playing .cult-ch-mech--2, .exp-anim .cult-play.is-in .cult-ch-mech--2{animation-delay:120ms} .exp-anim .cult-case-panel.is-playing .cult-ch-mech--3, .exp-anim .cult-play.is-in .cult-ch-mech--3{animation-delay:240ms} .exp-anim .cult-case-panel.is-playing .cult-ch-same, .exp-anim .cult-play.is-in .cult-ch-same{stroke-dasharray:var(--exp-len,200);animation:expDraw 460ms ease 560ms both} .exp-anim .cult-case-panel.is-playing .cult-ch-old, .exp-anim .cult-play.is-in .cult-ch-old{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 1000ms both} .exp-anim .cult-case-panel.is-playing .cult-ch-swap, .exp-anim .cult-play.is-in .cult-ch-swap{animation:expFade 340ms ease 1240ms both} .exp-anim .cult-case-panel.is-playing .cult-ch-next, .exp-anim .cult-play.is-in .cult-ch-next{stroke-dasharray:var(--exp-len,220);animation:expDraw 480ms var(--exp-ease) 1440ms both} .exp-anim .cult-case-panel.is-playing .cult-ch-new, .exp-anim .cult-play.is-in .cult-ch-new{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1820ms both} /* ========================== 5. LES SOUS-CULTURES ====================== */ .cult-shares{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,3.5vw,3rem); margin-top:clamp(1.75rem,4vh,2.5rem); } .cult-share{padding-top:1.15rem;border-top:2px solid var(--exp-gold)} .cult-share--soft{border-top-color:var(--exp-steel)} .cult-share h3{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink);margin:0 0 0.8rem;line-height:1.6; } .cult-share--soft h3{color:var(--exp-steel-ink)} .cult-share p{font-size:1.02rem;line-height:1.7;color:var(--exp-ink);margin:0} /* TROIS DECISIONS, PAS DEUX. Ce qui doit demeurer commun, ce qui peut s'adapter, ce qui doit evoluer. La troisieme colonne n'est pas une variante decorative : elle porte la seule categorie qui autorise a retirer quelque chose. Son filet est ouvert (pointille) parce que ce qu'elle contient est appele a changer. */ .cult-shares--three{grid-template-columns:repeat(3,minmax(0,1fr))} .cult-share--move{border-top-style:dashed;border-top-color:var(--exp-steel)} .cult-share--move h3{color:var(--exp-steel-ink)} .exp-anim .is-in .cult-sub-axis{stroke-dasharray:var(--exp-len,560);animation:expDraw 700ms var(--exp-ease) both} .exp-anim .is-in .cult-sub-anchor{transform-box:fill-box;transform-origin:center;animation:expPop 240ms ease both} .exp-anim .is-in .cult-sub-anchor--1{animation-delay:520ms} .exp-anim .is-in .cult-sub-anchor--2{animation-delay:600ms} .exp-anim .is-in .cult-sub-anchor--3{animation-delay:680ms} .exp-anim .is-in .cult-sub-anchor--4{animation-delay:760ms} .exp-anim .is-in .cult-sub-anchor--5{animation-delay:840ms} .exp-anim .is-in .cult-sub-branch{stroke-dasharray:var(--exp-len,220);animation:expDraw 480ms var(--exp-ease) both} .exp-anim .is-in .cult-sub-branch--1{animation-delay:900ms} .exp-anim .is-in .cult-sub-branch--2{animation-delay:1000ms} .exp-anim .is-in .cult-sub-branch--3{animation-delay:1100ms} .exp-anim .is-in .cult-sub-branch--4{animation-delay:1200ms} .exp-anim .is-in .cult-sub-branch--5{animation-delay:1300ms} .exp-anim .is-in .cult-sub-common{transform-box:fill-box;transform-origin:center;animation:expPop 240ms ease both} .exp-anim .is-in .cult-sub-common--1{animation-delay:1420ms} .exp-anim .is-in .cult-sub-common--2{animation-delay:1500ms} .exp-anim .is-in .cult-sub-common--3{animation-delay:1580ms} .exp-anim .is-in .cult-sub-common--4{animation-delay:1660ms} .exp-anim .is-in .cult-sub-cut{animation:expFade 380ms ease 1800ms both} /* ============ 6. DE L'ACTE A LA NORME (cinq mouvements) ============== */ /* La trace s'epaissit d'un mouvement a l'autre : la repetition est portee par le dessin lui meme, pas par un pictogramme. */ .cult-moves{ position:relative; margin-top:clamp(2rem,5vh,3rem); padding-left:clamp(3.25rem,7vw,5rem); } .cult-moves__axis{ position:absolute;left:clamp(0.75rem,2vw,1.5rem);top:0.9rem;bottom:0.9rem; width:1px;background:var(--exp-rule); } .cult-moves__axis i{ display:block;height:100%;background:var(--exp-gold); transform:scaleY(1);transform-origin:top center; transition:transform 1.4s var(--exp-ease); } .exp-anim .cult-moves__axis i{transform:scaleY(0)} .exp-anim .cult-moves.is-in .cult-moves__axis i{transform:scaleY(1)} .cult-moves__list{list-style:none;margin:0;padding:0} .cult-move{ position:relative; padding-block:clamp(1.1rem,3vh,1.7rem); border-top:1px solid var(--exp-rule); } .cult-move:first-child{border-top:0;padding-top:0} .cult-move__trace{ position:absolute; left:calc(clamp(0.75rem,2vw,1.5rem) - 5px); top:calc(clamp(1.1rem,3vh,1.7rem) + 0.35em); width:11px;background:var(--exp-gold); transform-origin:center; } .cult-move:first-child .cult-move__trace{top:0.35em} .cult-move--1 .cult-move__trace{height:3px;opacity:.4} .cult-move--2 .cult-move__trace{height:5px;opacity:.55} .cult-move--3 .cult-move__trace{height:8px;opacity:.7} .cult-move--4 .cult-move__trace{height:12px;opacity:.85} .cult-move--5 .cult-move__trace{height:18px;opacity:1} .exp-anim .cult-move__trace{transform:scaleX(0)} .exp-anim .cult-moves.is-in .cult-move__trace{ transform:scaleX(1); transition:transform .5s var(--exp-ease); } .exp-anim .cult-moves.is-in .cult-move--1 .cult-move__trace{transition-delay:.15s} .exp-anim .cult-moves.is-in .cult-move--2 .cult-move__trace{transition-delay:.42s} .exp-anim .cult-moves.is-in .cult-move--3 .cult-move__trace{transition-delay:.69s} .exp-anim .cult-moves.is-in .cult-move--4 .cult-move__trace{transition-delay:.96s} .exp-anim .cult-moves.is-in .cult-move--5 .cult-move__trace{transition-delay:1.23s} .cult-move__head{display:flex;align-items:baseline;gap:0.85rem;margin:0 0 0.5rem} .cult-move__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-gold);flex:none; } .cult-move__name{ font-family:'Space Grotesk',sans-serif; font-size:0.86rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:#fff;margin:0;line-height:1.5; } .cult-move__text{ font-size:1.05rem;line-height:1.7; color:var(--exp-on-dark);max-width:62ch;margin:0; } /* ================ 7. DEUX TRAJECTOIRES PARALLELES ==================== */ .cult-tracks{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.75rem,4vw,3.5rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); } .cult-track{margin:0;padding-top:1.25rem;border-top:1px solid var(--exp-rule)} .cult-track__name{ font-size:0.76rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold);margin:0 0 1.1rem; } .cult-track__steps{list-style:none;margin:1.25rem 0 0;padding:0} .cult-track__steps li{ padding-block:0.7rem;border-top:1px solid var(--exp-rule); font-size:1rem;line-height:1.6;color:var(--exp-on-dark); } .cult-track__steps li:first-child{border-top:0} .cult-track__steps b{ display:block; font-size:0.74rem;font-weight:700;letter-spacing:0.14em; text-transform:uppercase;color:var(--exp-on-dark-dim); margin-bottom:0.25rem; } .cult-track__steps li:last-child{color:#fff;font-weight:600} .exp-anim .is-in .cult-tr-intent{stroke-dasharray:var(--exp-len,320);animation:expDraw 440ms ease both} .exp-anim .is-in .cult-tr-mark{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease both} .exp-anim .is-in .cult-tr-mark--1{animation-delay:480ms} .exp-anim .is-in .cult-tr-mark--2{animation-delay:640ms} .exp-anim .is-in .cult-tr-mark--3{animation-delay:800ms} .exp-anim .is-in .cult-tr-flow{stroke-dasharray:var(--exp-len,260);animation:expDraw 520ms var(--exp-ease) 520ms both} .exp-anim .is-in .cult-tr-norm{transform-box:fill-box;transform-origin:left center;animation:expGrowX 420ms var(--exp-ease) 1120ms both} /* ============= 8. LE MODELE MOSAICA : UNE COUPE EN TROIS ============= */ /* LE DIAGRAMME NE GRANDIT PLUS AVEC LA LARGEUR. Ancien defaut : un viewBox 660 x 430 dans un conteneur pleine largeur. A 80 pour cent de zoom, la largeur CSS augmente, le SVG suit, sa hauteur suit aussi, et le diagramme finissait par separer le titre de sa conclusion sur deux ecrans. La correction est double et ne vise QUE cette figure, jamais les autres schemas de la page : largeur bornee max-width 760px, centre hauteur bornee clamp, donc independante de la largeur Le viewBox est passe a 760 x 300 pour que le dessin remplisse cette boite sans letterbox notable, et `preserveAspectRatio` empeche toute deformation. */ .cult-model-figure{ max-width:880px; margin-inline:auto; margin-top:clamp(1.25rem,3vh,2.25rem); } .cult-model-figure svg{ width:100%; height:clamp(210px,34vh,340px); } .cult-model-figure .exp-keys{margin-top:clamp(0.6rem,1.6vh,1rem);justify-content:center} .cult-model-claim{margin-top:clamp(1.25rem,3vh,2rem)} /* LES TROIS NIVEAUX, UNE LIGNE CHACUN. Le developpement de chaque niveau appartient aux Perspectives : ici, le dessin porte la demonstration et le texte ne fait que nommer. Le filet s'epaissit en descendant, comme les strates du modele. */ .cult-levels{ list-style:none; margin:clamp(1.5rem,3.5vh,2.25rem) auto 0;padding:0; max-width:880px; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); } .cult-level{padding-top:0.85rem;border-top:2px solid var(--exp-gold)} .cult-level--1{border-top-width:1px;opacity:.92} .cult-level--2{border-top-width:2px} .cult-level--3{border-top-width:4px} .cult-level__name{ display:block; font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink);margin-bottom:0.45rem;line-height:1.6; } .cult-level__say{ display:block;font-size:0.99rem;line-height:1.62;color:var(--exp-ink); } /* La scene du modele se resserre : titre, diagramme, legende et conclusion forment une seule idee visible d'un coup. */ .cult-model-scene{padding-block:clamp(2.25rem,5vh,3.5rem)} .cult-model-scene .exp-depth{margin-bottom:clamp(1.1rem,2.8vh,1.9rem)} .cult-model-scene .exp-h2{margin-bottom:0} /* La scene des trois niveaux porte sa propre idee, jamais la suite coupee de la precedente. */ .cult-strata-scene{padding-block:clamp(2.5rem,6vh,4rem)} /* Une seule composition, jamais trois cartes cote a cote. Les trois niveaux sont trois strates : chacune s'enfonce un peu plus que la precedente et le repere dore descend avec elles. */ .cult-strata{ margin-top:clamp(1.25rem,3vh,2rem); border-top:1px solid var(--exp-rule); } .cult-stratum{ position:relative; display:grid; grid-template-columns:auto minmax(0,0.3fr) minmax(0,0.7fr); gap:0.5rem clamp(1rem,3vw,2.5rem); align-items:start; padding-block:clamp(1rem,2.8vh,1.7rem); border-bottom:1px solid var(--exp-rule); transition:padding-left .4s var(--exp-ease); } .cult-stratum--2{padding-left:clamp(0.75rem,3.5vw,3rem)} .cult-stratum--3{padding-left:clamp(1.5rem,7vw,6rem)} /* Le repere de profondeur : un trait qui s'epaissit a mesure que l'on descend vers ce qui est reellement vecu. */ .cult-stratum::before{ content:"";position:absolute;top:-1px;left:0; width:46px;background:var(--exp-gold); transform:scaleX(1);transform-origin:left center; } .cult-stratum--1::before{height:2px;opacity:.5} .cult-stratum--2::before{height:3px;opacity:.75} .cult-stratum--3::before{height:5px;opacity:1} .exp-anim .cult-stratum::before{transform:scaleX(0)} .exp-anim .cult-strata.is-in .cult-stratum::before{transform:scaleX(1);transition:transform .55s var(--exp-ease)} .exp-anim .cult-strata.is-in .cult-stratum--2::before{transition-delay:.18s} .exp-anim .cult-strata.is-in .cult-stratum--3::before{transition-delay:.36s} .cult-stratum__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.5rem,1.15rem + 1vw,2rem); line-height:1;color:var(--exp-gold-ink); } .cult-stratum__head h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.24rem,1.05rem + 0.75vw,1.6rem); line-height:1.25;color:var(--exp-navy-deep);margin:0; } .cult-stratum__head p{ margin:0.5rem 0 0; font-size:0.8rem;font-weight:700; letter-spacing:0.14em;text-transform:uppercase; color:var(--exp-steel-ink);line-height:1.6; } .cult-stratum__body p{font-size:1.02rem;line-height:1.72;color:var(--exp-ink);margin:0} .cult-stratum__ask{ margin:0.75rem 0 0 !important;padding-top:0.65rem; border-top:1px solid var(--exp-rule); font-family:'Ibarra Real Nova',serif; font-size:1.06rem !important;line-height:1.5 !important; color:var(--exp-navy) !important; } .exp-anim .is-in .cult-md-band{transform-box:fill-box;transform-origin:left center;animation:expGrowX 420ms var(--exp-ease) both} .exp-anim .is-in .cult-md-band--2{animation-delay:180ms} .exp-anim .is-in .cult-md-band--3{animation-delay:360ms} .exp-anim .is-in .cult-md-flow{stroke-dasharray:var(--exp-len,380);animation:expDraw 700ms var(--exp-ease) both} .exp-anim .is-in .cult-md-flow--1{animation-delay:620ms} .exp-anim .is-in .cult-md-flow--2{animation-delay:720ms} .exp-anim .is-in .cult-md-flow--3{animation-delay:820ms} .exp-anim .is-in .cult-md-flow--4{animation-delay:920ms} .exp-anim .is-in .cult-md-flow--5{animation-delay:1020ms} .exp-anim .is-in .cult-md-mark{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1420ms both} .exp-anim .is-in .cult-md-gap{animation:expFade 320ms ease 1580ms both} /* ============ 9. PROPRIETAIRE, DIRECTION ET CROISSANCE =============== */ .cult-asks{list-style:none;margin:clamp(1.75rem,4vh,2.5rem) 0 0;padding:0} .cult-ask-item{ position:relative; display:grid;grid-template-columns:auto minmax(0,1fr); gap:0.9rem 1.15rem;align-items:baseline; padding-block:clamp(0.9rem,2.4vh,1.35rem); border-top:1px solid var(--exp-rule); } .cult-ask-item:first-child{border-top:0;padding-top:0} .cult-ask-item b{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.3rem,1.1rem + 0.85vw,1.75rem); line-height:1;color:var(--exp-gold); } .cult-ask-item span{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.06rem,0.98rem + 0.4vw,1.28rem); line-height:1.48;color:#fff;max-width:46ch; } /* La meme composition sur fond clair : seules les encres changent. */ .cult-asks--light .cult-ask-item span{color:var(--exp-navy-deep);max-width:64ch} .cult-asks--light .cult-ask-item b{color:var(--exp-gold-ink)} .cult-ask-item__name{font-weight:700;font-style:normal} .exp-anim .cult-ask-item{opacity:0;transform:translateX(-10px);transition:opacity .55s ease,transform .55s var(--exp-ease)} .exp-anim .cult-asks.is-in .cult-ask-item{opacity:1;transform:none} .exp-anim .cult-asks.is-in .cult-ask-item:nth-child(2){transition-delay:.12s} .exp-anim .cult-asks.is-in .cult-ask-item:nth-child(3){transition-delay:.24s} .exp-anim .cult-asks.is-in .cult-ask-item:nth-child(4){transition-delay:.36s} /* Les moments critiques : une bande typographique, jamais une grille. */ .cult-moments{margin-top:clamp(1.5rem,3.5vh,2.25rem);padding-top:1.1rem;border-top:1px solid var(--exp-rule)} .cult-moments__label{ font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-on-dark-dim);margin:0 0 0.7rem; } .cult-moments__list{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap; font-size:0.98rem;line-height:1.7;color:var(--exp-on-dark); } .cult-moments__list li{padding-right:0.85rem;margin-right:0.85rem;border-right:1px solid rgba(255,255,255,0.24)} .cult-moments__list li:last-child{border-right:0;padding-right:0;margin-right:0} .exp-anim .is-in .cult-gr-core{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease both} .exp-anim .is-in .cult-gr-core--2{animation-delay:400ms} .exp-anim .is-in .cult-gr-core--3{animation-delay:800ms} .exp-anim .is-in .cult-gr-core--4{animation-delay:1200ms} .exp-anim .is-in .cult-gr-link{stroke-dasharray:var(--exp-len,170);animation:expDraw 420ms var(--exp-ease) both} .exp-anim .is-in .cult-gr-link.is-1{animation-delay:160ms} .exp-anim .is-in .cult-gr-link.is-2{animation-delay:560ms} .exp-anim .is-in .cult-gr-link.is-3{animation-delay:960ms} .exp-anim .is-in .cult-gr-link.is-4{animation-delay:1360ms} .exp-anim .is-in .cult-gr-end{animation:expFade 300ms ease both} .exp-anim .is-in .cult-gr-end.is-1{animation-delay:520ms} .exp-anim .is-in .cult-gr-end.is-2{animation-delay:920ms} .exp-anim .is-in .cult-gr-end.is-3{animation-delay:1320ms} .exp-anim .is-in .cult-gr-end.is-4{animation-delay:1720ms} .exp-anim .is-in .cult-gr-common{transform-box:fill-box;transform-origin:center;animation:expGrowY 460ms var(--exp-ease) 1820ms both} /* ========================== 10. NOTRE METHODE ======================== */ .cult-method{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .cult-method__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3.5vh,2.4rem)} .cult-mv{ display:grid; grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr); gap:clamp(1rem,3vw,2.75rem); padding-top:1.35rem;border-top:1px solid var(--exp-rule); position:relative; } .cult-mv::before{ content:"";position:absolute;top:-1px;left:0; width:46px;height:2px;background:var(--exp-gold); transform:scaleX(1);transform-origin:left center; transition:transform .6s var(--exp-ease); } .exp-anim .cult-mv::before{transform:scaleX(0)} .exp-anim .cult-method.is-in .cult-mv::before{transform:scaleX(1)} .exp-anim .cult-method.is-in .cult-mv:nth-child(2)::before{transition-delay:.2s} .exp-anim .cult-method.is-in .cult-mv:nth-child(3)::before{transition-delay:.4s} .cult-mv__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.13em; color:var(--exp-gold-ink);margin:0 0 0.5rem; } .cult-mv h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.24rem,1.05rem + 0.8vw,1.65rem); line-height:1.22;color:var(--exp-navy-deep);margin:0;max-width:18ch; } .cult-mv__body p{font-size:1.02rem;line-height:1.72;color:var(--exp-ink);margin:0;max-width:58ch} .cult-tools{ list-style:none;margin:1.1rem 0 0;padding:0; display:flex;flex-wrap:wrap; font-size:0.94rem;line-height:1.7;color:var(--exp-ink-dim); } .cult-tools li{padding-right:0.75rem;margin-right:0.75rem;border-right:1px solid var(--exp-rule)} .cult-tools li:last-child{border-right:0;padding-right:0;margin-right:0} .exp-anim .is-in .cult-mt-dot{transform-box:fill-box;transform-origin:center;animation:expPop 240ms ease both} .exp-anim .is-in .cult-mt-dot:nth-of-type(4n+1){animation-delay:60ms} .exp-anim .is-in .cult-mt-dot:nth-of-type(4n+2){animation-delay:140ms} .exp-anim .is-in .cult-mt-dot:nth-of-type(4n+3){animation-delay:220ms} .exp-anim .is-in .cult-mt-dot:nth-of-type(4n){animation-delay:300ms} .exp-anim .is-in .cult-mt-web{stroke-dasharray:var(--exp-len,200);animation:expDraw 440ms ease both} .exp-anim .is-in .cult-mt-web--1{animation-delay:640ms} .exp-anim .is-in .cult-mt-web--2{animation-delay:720ms} .exp-anim .is-in .cult-mt-web--3{animation-delay:800ms} .exp-anim .is-in .cult-mt-web--4{animation-delay:880ms} .exp-anim .is-in .cult-mt-web--5{animation-delay:960ms} .exp-anim .is-in .cult-mt-clash{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1120ms both} .exp-anim .is-in .cult-mt-clash--2{animation-delay:1240ms} .exp-anim .is-in .cult-mt-lever{transform-box:fill-box;transform-origin:center;animation:expPop 300ms var(--exp-ease) both} .exp-anim .is-in .cult-mt-lever--1{animation-delay:1480ms} .exp-anim .is-in .cult-mt-lever--2{animation-delay:1600ms} .exp-anim .is-in .cult-mt-lever--3{animation-delay:1720ms} .exp-anim .is-in .cult-mt-tie{stroke-dasharray:var(--exp-len,140);animation:expDraw 380ms ease 1840ms both} /* ===================== 11. MOSAICA EN ACTION (PHOTOGRAPHIE) ========== Les photographies ne sont pas des images posees entre deux blocs de texte : elles forment une composition, avec une piece maitresse et une bande de trois preuves qui reprennent exactement les trois mouvements de l'intervention. Chaque legende dit ce que la photographie documente. Filet dore en bord haut : la meme signature que les schemas. */ .cult-shot{margin:0} .cult-shot img{ display:block;width:100%;height:auto; border-top:2px solid var(--exp-gold); } .cult-shot figcaption{ margin-top:0.85rem;font-size:0.9rem;line-height:1.62; color:var(--exp-ink-dim);max-width:56ch; } .cult-shot figcaption b{ display:block;font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink);margin-bottom:0.3rem; } [data-exp-theme="deep"] .cult-shot figcaption{color:var(--exp-on-dark-dim)} [data-exp-theme="deep"] .cult-shot figcaption b{color:var(--exp-gold)} .cult-field__lead{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); gap:clamp(2rem,5vw,4rem); align-items:center; } /* Les trois vignettes proviennent de formats d'origine differents (4:3, panoramique, portrait). Elles ont ete recadrees A LA SOURCE en 3:2 avec un cadrage choisi image par image : aucun recadrage CSS, donc aucun visage coupe par la mise en page, quelle que soit la largeur. */ /* ==================== 12. TROIS FACONS D'AGIR (onglets) ============== */ .cult-acts{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); margin-top:clamp(1.5rem,4vh,2.5rem); align-items:start; } .cult-tabs-ready.cult-acts{grid-template-columns:minmax(0,296px) minmax(0,1fr)} .cult-acts__hint{ display:none;margin:0 0 1rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-ink-dim); } .cult-tabs-ready .cult-acts__hint{display:block} .cult-acts__rail{display:none;flex-direction:column} .cult-tabs-ready .cult-acts__rail{display:flex} .cult-act-tab{ position:relative;display:block;width:100%; appearance:none;-webkit-appearance:none; background:none;border:0;border-bottom:1px solid var(--exp-rule); padding:0;min-height:48px;text-align:left;cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .26s ease; } .cult-act-tab::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--exp-gold-ink); transform:scaleY(0);transform-origin:center; transition:transform .26s ease; } .cult-act-tab__inner{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:0.9rem; min-height:48px;padding:0.75rem 0.2rem 0.75rem 1rem; transition:transform .26s var(--exp-ease); } .cult-act-tab__n{font-size:0.78rem;font-weight:700;letter-spacing:0.08em;color:var(--exp-steel-ink);transition:color .26s ease} .cult-act-tab__name{ font-family:'Ibarra Real Nova',serif; font-size:1.2rem;font-weight:700;line-height:1.25; color:var(--exp-ink);transition:color .26s ease; } .cult-act-tab__state{ font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-ink-dim);white-space:nowrap;transition:color .26s ease; } .cult-act-tab__on{display:none} .cult-act-tab__off{display:inline} .cult-act-tab:hover{border-bottom-color:var(--exp-gold)} .cult-act-tab:hover .cult-act-tab__name{color:var(--exp-navy-deep)} .cult-act-tab:hover .cult-act-tab__inner{transform:translateX(4px)} .cult-act-tab[aria-selected="true"]{border-bottom-color:var(--exp-gold-ink)} .cult-act-tab[aria-selected="true"]::before{transform:scaleY(1)} .cult-act-tab[aria-selected="true"] .cult-act-tab__n{color:var(--exp-gold-ink)} .cult-act-tab[aria-selected="true"] .cult-act-tab__name{color:var(--exp-navy-deep)} .cult-act-tab[aria-selected="true"] .cult-act-tab__state{color:var(--exp-gold-ink)} .cult-act-tab[aria-selected="true"] .cult-act-tab__on{display:inline} .cult-act-tab[aria-selected="true"] .cult-act-tab__off{display:none} .cult-act-tab[aria-selected="true"]:hover .cult-act-tab__inner{transform:none} .cult-tabs-ready .cult-acts__stage{display:grid} .cult-act-panel{ display:grid; grid-template-columns:minmax(0,1.26fr) minmax(0,0.74fr); gap:clamp(1.5rem,3vw,2.6rem); align-items:center; } .cult-act-panel + .cult-act-panel{margin-top:clamp(2.25rem,5vh,3.25rem);padding-top:clamp(2rem,4vh,2.75rem);border-top:1px solid var(--exp-rule)} .cult-tabs-ready .cult-act-panel{ grid-area:1 / 1;margin-top:0;padding-top:0;border-top:0; visibility:hidden;opacity:0; } .cult-tabs-ready .cult-act-panel.is-active{ visibility:visible;opacity:1; transition:opacity .3s ease; } .cult-situations{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:0.42rem} .cult-situations li{ position:relative;padding-left:1.15rem; font-size:0.99rem;line-height:1.58;color:var(--exp-ink); } .cult-situations li::before{ content:"";position:absolute;left:0;top:0.62em; width:7px;height:2px;background:var(--exp-gold); } /* LE SELECTEUR SUR LA COUCHE PROFONDE. La sequence d'intervention est passee sur fond bleu nuit : les trois encres du selecteur (nom, numero, etat) etaient calculees pour un fond clair et deviendraient illisibles. On ne redefinit que les encres, et l'etat actif garde ses trois signaux : trait, graisse, encre. */ [data-exp-theme="deep"] .cult-act-tab__name{color:var(--exp-on-dark)} [data-exp-theme="deep"] .cult-act-tab__n, [data-exp-theme="deep"] .cult-act-tab__state{color:var(--exp-on-dark-dim)} [data-exp-theme="deep"] .cult-act-tab::before{background:var(--exp-gold)} [data-exp-theme="deep"] .cult-act-tab:hover{border-bottom-color:var(--exp-gold)} [data-exp-theme="deep"] .cult-act-tab:hover .cult-act-tab__name{color:#fff} [data-exp-theme="deep"] .cult-act-tab[aria-selected="true"]{border-bottom-color:var(--exp-gold)} [data-exp-theme="deep"] .cult-act-tab[aria-selected="true"] .cult-act-tab__name{color:#fff} [data-exp-theme="deep"] .cult-act-tab[aria-selected="true"] .cult-act-tab__n, [data-exp-theme="deep"] .cult-act-tab[aria-selected="true"] .cult-act-tab__state{color:var(--exp-gold)} [data-exp-theme="deep"] .cult-acts__hint{color:var(--exp-on-dark-dim)} [data-exp-theme="deep"] .cult-situations li{color:var(--exp-on-dark)} /* 01 Lire : des signaux disperses deviennent une structure lisible. */ .exp-anim .cult-act-panel.is-playing .cult-rd-sig, .exp-anim .cult-play.is-in .cult-rd-sig{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease both} .exp-anim .cult-act-panel.is-playing .cult-rd-sig:nth-of-type(3n+1), .exp-anim .cult-play.is-in .cult-rd-sig:nth-of-type(3n+1){animation-delay:40ms} .exp-anim .cult-act-panel.is-playing .cult-rd-sig:nth-of-type(3n+2), .exp-anim .cult-play.is-in .cult-rd-sig:nth-of-type(3n+2){animation-delay:140ms} .exp-anim .cult-act-panel.is-playing .cult-rd-sig:nth-of-type(3n), .exp-anim .cult-play.is-in .cult-rd-sig:nth-of-type(3n){animation-delay:240ms} .exp-anim .cult-act-panel.is-playing .cult-rd-tie, .exp-anim .cult-play.is-in .cult-rd-tie{stroke-dasharray:var(--exp-len,220);animation:expDraw 440ms var(--exp-ease) both} .exp-anim .cult-act-panel.is-playing .cult-rd-tie--1, .exp-anim .cult-play.is-in .cult-rd-tie--1{animation-delay:520ms} .exp-anim .cult-act-panel.is-playing .cult-rd-tie--2, .exp-anim .cult-play.is-in .cult-rd-tie--2{animation-delay:620ms} .exp-anim .cult-act-panel.is-playing .cult-rd-tie--3, .exp-anim .cult-play.is-in .cult-rd-tie--3{animation-delay:720ms} .exp-anim .cult-act-panel.is-playing .cult-rd-tie--4, .exp-anim .cult-play.is-in .cult-rd-tie--4{animation-delay:820ms} .exp-anim .cult-act-panel.is-playing .cult-rd-tie--5, .exp-anim .cult-play.is-in .cult-rd-tie--5{animation-delay:920ms} .exp-anim .cult-act-panel.is-playing .cult-rd-shape, .exp-anim .cult-play.is-in .cult-rd-shape{stroke-dasharray:var(--exp-len,640);animation:expDraw 720ms var(--exp-ease) 1080ms both} /* 02 Aligner : trois couches se realignent sur quelques comportements. */ .exp-anim .cult-act-panel.is-playing .cult-al-layer, .exp-anim .cult-play.is-in .cult-al-layer{transform-box:fill-box;transform-origin:left center;animation:expGrowX 400ms var(--exp-ease) both} .exp-anim .cult-act-panel.is-playing .cult-al-layer--2, .exp-anim .cult-play.is-in .cult-al-layer--2{animation-delay:140ms} .exp-anim .cult-act-panel.is-playing .cult-al-layer--3, .exp-anim .cult-play.is-in .cult-al-layer--3{animation-delay:280ms} @keyframes cultAlign1{from{transform:translateX(-58px)}} @keyframes cultAlign2{from{transform:translateX(44px)}} .exp-anim .cult-act-panel.is-playing .cult-al-col--1, .exp-anim .cult-play.is-in .cult-al-col--1{animation:cultAlign1 760ms cubic-bezier(.35,.1,.2,1) 620ms both} .exp-anim .cult-act-panel.is-playing .cult-al-col--2, .exp-anim .cult-play.is-in .cult-al-col--2{animation:cultAlign2 760ms cubic-bezier(.35,.1,.2,1) 760ms both} .exp-anim .cult-act-panel.is-playing .cult-al-lock, .exp-anim .cult-play.is-in .cult-al-lock{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1520ms both} .exp-anim .cult-act-panel.is-playing .cult-al-lock--2, .exp-anim .cult-play.is-in .cult-al-lock--2{animation-delay:1640ms} /* 03 Ancrer : un repere transmis, applique differemment, jamais perdu. */ .exp-anim .cult-act-panel.is-playing .cult-an-seed, .exp-anim .cult-play.is-in .cult-an-seed{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease both} .exp-anim .cult-act-panel.is-playing .cult-an-give, .exp-anim .cult-play.is-in .cult-an-give{stroke-dasharray:var(--exp-len,180);animation:expDraw 460ms var(--exp-ease) both} .exp-anim .cult-act-panel.is-playing .cult-an-give--1, .exp-anim .cult-play.is-in .cult-an-give--1{animation-delay:320ms} .exp-anim .cult-act-panel.is-playing .cult-an-give--2, .exp-anim .cult-play.is-in .cult-an-give--2{animation-delay:420ms} .exp-anim .cult-act-panel.is-playing .cult-an-give--3, .exp-anim .cult-play.is-in .cult-an-give--3{animation-delay:520ms} .exp-anim .cult-act-panel.is-playing .cult-an-give--4, .exp-anim .cult-play.is-in .cult-an-give--4{animation-delay:620ms} .exp-anim .cult-act-panel.is-playing .cult-an-use, .exp-anim .cult-play.is-in .cult-an-use{animation:expFade 320ms ease both} .exp-anim .cult-act-panel.is-playing .cult-an-use--1, .exp-anim .cult-play.is-in .cult-an-use--1{animation-delay:900ms} .exp-anim .cult-act-panel.is-playing .cult-an-use--2, .exp-anim .cult-play.is-in .cult-an-use--2{animation-delay:1000ms} .exp-anim .cult-act-panel.is-playing .cult-an-use--3, .exp-anim .cult-play.is-in .cult-an-use--3{animation-delay:1100ms} .exp-anim .cult-act-panel.is-playing .cult-an-use--4, .exp-anim .cult-play.is-in .cult-an-use--4{animation-delay:1200ms} .exp-anim .cult-act-panel.is-playing .cult-an-keep, .exp-anim .cult-play.is-in .cult-an-keep{transform-box:fill-box;transform-origin:center;animation:expPop 240ms ease both} .exp-anim .cult-act-panel.is-playing .cult-an-keep--1, .exp-anim .cult-play.is-in .cult-an-keep--1{animation-delay:1360ms} .exp-anim .cult-act-panel.is-playing .cult-an-keep--2, .exp-anim .cult-play.is-in .cult-an-keep--2{animation-delay:1440ms} .exp-anim .cult-act-panel.is-playing .cult-an-keep--3, .exp-anim .cult-play.is-in .cult-an-keep--3{animation-delay:1520ms} .exp-anim .cult-act-panel.is-playing .cult-an-keep--4, .exp-anim .cult-play.is-in .cult-an-keep--4{animation-delay:1600ms} /* ============ 13. PERSPECTIVES LIEES A CETTE EXPERTISE =============== UNE SEULE ENTREE VERS LES CONTENUS, ET AUCUN NOMBRE. La composition n'enumere pas : elle presente les contenus les plus pertinents et renvoie a l'ensemble. Ajouter une publication demain ne demande donc de toucher ni au titre, ni a la structure, ni aux textes existants. La grille se remplit d'elle-meme, trois par rangee. Chaque entree porte un visuel qui lui appartient : une photographie documentaire quand elle existe, sinon une composition typographique construite avec les concepts eux memes. Jamais un mini schema pose dans un rectangle gris. */ /* LES CINQ PERSPECTIVES, EN COMPOSITION ASYMETRIQUE. Douze colonnes. Une carte verticale, une carte panoramique, trois cartes intermediaires : le format de chaque carte suit les proportions reelles de sa photographie, jamais un recadrage impose. La grammaire, elle, ne varie pas — meme filet dore, meme typographie, meme rythme d'espacement. La hierarchie vient du format et du sujet, jamais de la personne photographiee. */ .cult-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; } .cult-card{min-width:0} /* Pas de grid-row:span 2 : le portrait, plus etroit, ne pourrait remplir deux rangees sans un vide en dessous — exclu par le principe de cette grille (voir plus haut). Il occupe donc sa propre rangee, comme wide a cote de lui. Largeurs d'origine conservees (4/8) : retrecir le portrait pour l'egaler en hauteur a wide cassait la lecture de son titre, compresse sur une colonne trop etroite. La hierarchie demandee passe par la typographie (plus bas). */ .cult-card--tall{grid-column:span 4} .cult-card--wide{grid-column:span 8} /* Trois cartes egales (span 4 x 3 = 12) : elles remplissent leur propre rangee, pleine largeur, sous tall+wide — sans jamais dependre de leur hauteur. Meme format pour les trois, y compris l'ancienne "bande" (la troisieme carte de cette famille) : plus de traitement photo/texte a part, donc plus de rupture avec ses deux voisines. */ .cult-card--mid{grid-column:span 4} /* Le portrait (image verticale) est structurellement plus haut que wide (paysage court) : c'est LUI qui fixe la hauteur de la rangee, quelle que soit la largeur d'ecran. Pour supprimer tout vide, c'est donc WIDE qui doit remplir cette hauteur — pas tall, deja au maximum. La carte s'etire sur toute la rangee (align-self:stretch), seule l'image absorbe l'ecart (object-fit:cover) : elle s'agrandit legerement, les cotes se rognent en priorite, jamais le texte ni le portrait. */ .cult-card--wide{align-self:stretch} .cult-card--wide .cult-card__link{height:100%;display:flex;flex-direction:column} .cult-card--wide .cult-card__visual{flex:1 1 auto;min-height:0} .cult-card--wide .cult-card__visual img{height:100%;object-fit:cover} .cult-card--wide .cult-card__body{flex:0 0 auto} /* POIDS RELATIF DES DEUX PREMIERES CARTES. L'article large (wide) doit rester le point d'entree naturel : son titre domine. Le portrait vertical (tall) reste important mais secondaire — uniquement par la typographie : son titre est plus modeste que celui de wide. */ .cult-card--wide .cult-card__title{font-size:clamp(1.32rem,1.05rem + 0.95vw,1.7rem)} .cult-card--tall .cult-card__title{font-size:clamp(1.2rem,1.02rem + 0.62vw,1.46rem)} .cult-card__link{display:block;height:100%;text-decoration:none;color:inherit} .cult-card__visual{ display:block;overflow:hidden; border-top:2px solid var(--exp-gold);background:var(--exp-deep); } .cult-card__visual img{ display:block;width:100%;height:auto; transition:transform .5s var(--exp-ease); } .cult-card__link:hover .cult-card__visual img{transform:scale(1.03)} .cult-card__body{display:block;padding-top:1.05rem} .cult-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; } .cult-card__title{ display:block; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.12rem,1rem + 0.5vw,1.34rem); line-height:1.28;color:var(--exp-navy-deep);margin-bottom:0.45rem; transition:color .22s ease; } .cult-card__link:hover .cult-card__title{color:var(--exp-gold-ink)} .cult-card__say{display:block;font-size:0.97rem;line-height:1.62;color:var(--exp-ink-dim)} /* ============================ 14. CONCLUSION ========================= */ .cult-end{position:relative;overflow:hidden} /* La mosaique finale : l'accumulation des comportements, jamais un decor anime. Elle ne bouge pas et reste en retrait. */ .cult-end__mosaic{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 56px), repeating-linear-gradient(0deg,rgba(255,255,255,0.045) 0 1px,transparent 1px 56px); -webkit-mask-image:linear-gradient(105deg,transparent 32%,#000 76%); mask-image:linear-gradient(105deg,transparent 32%,#000 76%); opacity:.9; } .cult-end__inner{position:relative} .cult-end__sign{font-size:1.04rem;line-height:1.72;color:var(--exp-on-dark);max-width:58ch;margin:0} /* ====================== 15. TABLETTE (<= 1080px) ===================== */ @media(max-width:1080px){ .cult-strata{margin-top:1.5rem} .cult-stratum{grid-template-columns:auto minmax(0,1fr);gap:0.4rem 1rem} .cult-stratum__body{grid-column:1 / -1;margin-top:0.55rem} .cult-stratum--2{padding-left:1.25rem} .cult-stratum--3{padding-left:2.5rem} .cult-tracks{grid-template-columns:minmax(0,1fr);gap:2rem} .cult-shares, .cult-shares--three{grid-template-columns:minmax(0,1fr);gap:1.6rem} .cult-mv{grid-template-columns:minmax(0,1fr);gap:0.9rem} .cult-mv h3{max-width:26ch} .cult-case-panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .cult-case-panel .exp-figure{width:min(100%,460px)} .cult-tabs-ready.cult-acts{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .cult-act-panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .cult-act-panel .exp-figure{width:min(100%,440px)} .cult-act-tab{border:1px solid var(--exp-rule);border-left-width:2px;background:#fff;margin-bottom:0.5rem} /* Sur fond profond, la carte du selecteur ne devient pas blanche : elle s'eclaircit juste assez pour se detacher du bleu nuit. */ [data-exp-theme="deep"] .cult-act-tab{background:rgba(255,255,255,0.06)} .cult-act-tab::before{width:2px;left:-2px} .cult-act-tab__inner{min-height:52px;padding:0.85rem 1rem} .cult-act-tab:hover .cult-act-tab__inner{transform:none} .cult-register{grid-template-columns:minmax(0,1fr);gap:0.6rem} /* Tablette : deux colonnes reelles. La grille de douze colonnes et ses onze gouttieres ne tiennent plus sous cette largeur. */ .cult-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .cult-card, .cult-card--tall, .cult-card--wide, .cult-card--mid{grid-column:auto} .cult-levels{grid-template-columns:minmax(0,1fr);gap:0} .cult-level{padding-block:0.9rem 0;border-top-width:1px} .cult-level--2{border-top-width:2px} .cult-level--3{border-top-width:4px} .cult-field__lead{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .cult-shot--lead{max-width:720px} } /* ======================= 16. 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 une trace qui s'epaissit d'une etape a l'autre. L'information est strictement la meme. */ .cult-mech__stage{display:none} .cult-mech__steps{ display:block;margin-top:0; position:relative;padding-left:0; } .cult-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.85rem; border-top:1px solid rgba(255,255,255,0.16); } .cult-mech__step:first-child{border-top:0;padding-top:0} .cult-mech__bar{ display:block;grid-column:1 / -1; height:3px;background:var(--exp-gold); transform-origin:left center;margin-top:0.5rem; } .cult-mech__step--1 .cult-mech__bar{width:22%;height:2px;opacity:.42} .cult-mech__step--2 .cult-mech__bar{width:38%;height:3px;opacity:.58} .cult-mech__step--3 .cult-mech__bar{width:56%;height:4px;opacity:.74} .cult-mech__step--4 .cult-mech__bar{width:76%;height:6px;opacity:.88} .cult-mech__step--5 .cult-mech__bar{width:100%;height:9px;opacity:1} .exp-anim .cult-mech.is-armed .cult-mech__bar{transform:scaleX(0)} .exp-anim .cult-mech.is-in .cult-mech__bar{transform:scaleX(1);transition:transform .55s var(--exp-ease)} .exp-anim .cult-mech.is-in .cult-mech__step--1 .cult-mech__bar{transition-delay:.2s} .exp-anim .cult-mech.is-in .cult-mech__step--2 .cult-mech__bar{transition-delay:.55s} .exp-anim .cult-mech.is-in .cult-mech__step--3 .cult-mech__bar{transition-delay:.9s} .exp-anim .cult-mech.is-in .cult-mech__step--4 .cult-mech__bar{transition-delay:1.25s} .exp-anim .cult-mech.is-in .cult-mech__step--5 .cult-mech__bar{transition-delay:1.6s} /* Sur telephone, le libelle de chaque etape arrive AVEC sa trace, pas selon la cadence horizontale de l'ordinateur : la lecture verticale resterait sinon en retard sur le dessin. */ .exp-anim .cult-mech.is-in .cult-mech__step--1{transition-delay:.2s} .exp-anim .cult-mech.is-in .cult-mech__step--2{transition-delay:.55s} .exp-anim .cult-mech.is-in .cult-mech__step--3{transition-delay:.9s} .exp-anim .cult-mech.is-in .cult-mech__step--4{transition-delay:1.25s} .exp-anim .cult-mech.is-in .cult-mech__step--5{transition-delay:1.6s} .exp-anim .cult-mech.is-armed .cult-mech__claim{transition-delay:2s} .cult-mech__claim{margin-top:1.35rem} .cult-moves{padding-left:2.6rem} .cult-moves__axis{left:0.5rem} .cult-move__trace{left:calc(0.5rem - 4px);width:9px} .cult-cases__rail{gap:0.35rem} .cult-case-tab{padding:0.7rem 0.7rem;flex:1 1 auto;min-width:calc(50% - 0.35rem)} .cult-tools li,.cult-moments__list li{padding-right:0.6rem;margin-right:0.6rem} /* Telephone : la mosaique devient une sequence verticale propre. */ .cult-cards{grid-template-columns:minmax(0,1fr);gap:2.25rem} .cult-card, .cult-card--tall, .cult-card--wide, .cult-card--mid{grid-column:auto;grid-row:auto;max-width:620px} /* En pile verticale, l'ordre de lecture EST la hierarchie : l'article principal ouvre la sequence, le portrait vient ensuite, les trois articles secondaires ferment. Le html garde son ordre naturel (tall en tete), necessaire a la composition asymetrique du bureau. */ .cult-card--wide{order:1} .cult-card--tall{order:2} .cult-card--mid{order:3} /* La bande photographique devient une seule colonne : trois vignettes de 120 pixels de large ne documenteraient plus rien. */ .exp-page .exp-shell .cult-shot figcaption{font-size:15px !important;line-height:1.6 !important} .exp-page .exp-shell .cult-shot figcaption b{font-size:13px !important} .exp-page .exp-shell .cult-level__name{font-size:13.5px !important;letter-spacing:0.14em} .exp-page .exp-shell .cult-level__say{font-size:16px !important;line-height:1.62 !important} .exp-page .exp-shell .cult-card__title{font-size:19px !important;line-height:1.28 !important} .exp-page .exp-shell .cult-card__say{font-size:15px !important;line-height:1.6 !important} .exp-page .exp-shell .cult-card__kind{font-size:13px !important;letter-spacing:0.16em} /* Reprise de la hierarchie typographique face a mobile-premium.css. Meme regle que dans expertises-identite.css : trois classes pour depasser (0,2,3), jamais un !important arbitraire. */ .exp-page .exp-shell .cult-register__text, .exp-page .exp-shell .cult-move__text, .exp-page .exp-shell .cult-share p, .exp-page .exp-shell .cult-stratum__body p, .exp-page .exp-shell .cult-mv__body p, .exp-page .exp-shell .cult-end__sign{font-size:16px !important;line-height:1.72 !important} .exp-page .exp-shell .cult-stratum__ask, .exp-page .exp-shell .cult-case-panel__ask{font-size:17px !important;line-height:1.5 !important} .exp-page .exp-shell .cult-mech__claim{font-size:clamp(1.1rem,4.6vw,1.35rem) !important;line-height:1.45 !important} .exp-page .exp-shell .cult-mech__label{font-size:13.5px !important;letter-spacing:0.14em} .exp-page .exp-shell .cult-mech__n{font-size:13px !important} .exp-page .exp-shell .cult-register__label, .exp-page .exp-shell .cult-track__name, .exp-page .exp-shell .cult-share h3, .exp-page .exp-shell .cult-move__name{font-size:13.5px !important;letter-spacing:0.14em} .exp-page .exp-shell .cult-register__n, .exp-page .exp-shell .cult-move__n, .exp-page .exp-shell .cult-mv__n, .exp-page .exp-shell .cult-act-tab__n, .exp-page .exp-shell .cult-case-tab__n, .exp-page .exp-shell .cult-facts b, .exp-page .exp-shell .cult-track__steps b, .exp-page .exp-shell .cult-moments__label{font-size:13px !important} .exp-page .exp-shell .cult-track__steps li, .exp-page .exp-shell .cult-situations li, .exp-page .exp-shell .cult-facts li{font-size:16px !important;line-height:1.6 !important} .exp-page .exp-shell .cult-tools li, .exp-page .exp-shell .cult-moments__list li{font-size:15px !important} .exp-page .exp-shell .cult-stratum__head h3, .exp-page .exp-shell .cult-mv h3{font-size:19px !important;line-height:1.24 !important} .exp-page .exp-shell .cult-stratum__head p{font-size:13px !important;letter-spacing:0.13em} .exp-page .exp-shell .cult-ask-item span{font-size:17px !important;line-height:1.48 !important} .exp-page .exp-shell .cult-act-tab__name{font-size:18px !important;line-height:1.25 !important} .exp-page .exp-shell .cult-act-tab__state{font-size:12px !important;letter-spacing:0.14em} .exp-page .exp-shell .cult-case-tab__name{font-size:13px !important;letter-spacing:0.11em} .exp-page .exp-shell .cult-acts__hint, .exp-page .exp-shell .cult-cases__hint{font-size:13px !important;letter-spacing:0.16em} } @media(max-width:640px){ .cult-case-tab{min-width:100%} } @media(max-width:420px){ .cult-moves{padding-left:2.3rem} .cult-stratum--2{padding-left:0.9rem} .cult-stratum--3{padding-left:1.8rem} } /* ============ 17. 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. */ @media(prefers-reduced-motion:reduce){ .exp-page .cult-moves__axis i, .exp-page .cult-dc-said, .exp-page .cult-tn-name, .exp-page .cult-gr-common{transform:scaleY(1) !important} .exp-page .cult-move__trace, .exp-page .cult-mech__bar, .exp-page .cult-mech-n, .exp-page .cult-mv::before, .exp-page .cult-stratum::before, .exp-page .cult-rg-rule, .exp-page .cult-rg-act, .exp-page .cult-md-band, .exp-page .cult-tr-norm, .exp-page .cult-al-layer, .exp-page .cult-er-fix, .exp-page .cult-ch-say{transform:scaleX(1) !important} .exp-page .cult-mech-guide, .exp-page .cult-mech-trace, .exp-page .cult-sc-line, .exp-page .cult-rg-said, .exp-page .cult-rg-thread, .exp-page .cult-tr-intent, .exp-page .cult-tr-flow, .exp-page .cult-md-flow, .exp-page .cult-sub-axis, .exp-page .cult-sub-branch, .exp-page .cult-gr-link, .exp-page .cult-mt-web, .exp-page .cult-mt-tie, .exp-page .cult-dc-in, .exp-page .cult-dc-out, .exp-page .cult-er-base, .exp-page .cult-er-loop, .exp-page .cult-er-dead, .exp-page .cult-tn-a, .exp-page .cult-tn-b, .exp-page .cult-tn-drift, .exp-page .cult-tn-out, .exp-page .cult-ar-rule, .exp-page .cult-ch-same, .exp-page .cult-ch-next, .exp-page .cult-rd-tie, .exp-page .cult-rd-shape, .exp-page .cult-an-give{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .exp-page .cult-mech-station, .exp-page .cult-mech-echo, .exp-page .cult-mech-tile, .exp-page .cult-mech__step, .exp-page .cult-mech__claim, .exp-page .cult-sc-seed, .exp-page .cult-sc-relay, .exp-page .cult-sc-end, .exp-page .cult-sc-drift, .exp-page .cult-rg-frame, .exp-page .cult-tr-mark, .exp-page .cult-md-mark, .exp-page .cult-md-gap, .exp-page .cult-sub-anchor, .exp-page .cult-sub-common, .exp-page .cult-sub-cut, .exp-page .cult-gr-core, .exp-page .cult-gr-end, .exp-page .cult-mt-dot, .exp-page .cult-mt-clash, .exp-page .cult-mt-lever, .exp-page .cult-dc-node, .exp-page .cult-dc-off, .exp-page .cult-er-break, .exp-page .cult-er-stop, .exp-page .cult-ar-set, .exp-page .cult-ar-new, .exp-page .cult-ar-fit, .exp-page .cult-ch-mech, .exp-page .cult-ch-old, .exp-page .cult-ch-swap, .exp-page .cult-ch-new, .exp-page .cult-rd-sig, .exp-page .cult-al-col--1, .exp-page .cult-al-col--2, .exp-page .cult-al-lock, .exp-page .cult-an-seed, .exp-page .cult-an-use, .exp-page .cult-an-keep, .exp-page .cult-ask-item{opacity:1 !important;transform:none !important} }