/* ========================================================================= MOSAICA / INTELLIGENCE CULTURELLE ------------------------------------------------------------------------- Feuille chargee UNIQUEMENT par expertises/intelligence-culturelle.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 Intelligence culturelle et les compositions propres a ses sections. Prefixe icu- exclusivement. Aucune regle .exp-* n'est redefinie : seules des regles contextuelles (`.icu-x .exp-y`) existent. CE QUI APPARTIENT A CETTE PAGE L'ECARTEMENT. Un signal unique entre dans le systeme, se divise en plusieurs lectures qui s'ecartent, traverse une zone de verification qui en ecarte certaines, puis se recale sans jamais se refermer tout a fait. Toutes les trajectoires ont la MEME epaisseur : ce qui les distingue est leur direction, jamais leur force. C'est exactement l'inverse du langage de Culture organisationnelle, ou une seule trace s'epaissit a force d'etre repetee. Les deux pages appartiennent a la meme famille et ne partagent aucun dessin. VOCABULAIRE GRAPHIQUE signal un trait unique, un fait divergence quatre trajectoires qui s'ecartent d'un meme point ecart une mesure en pointille entre deux lectures extremes verification une zone verticale traversee par les trajectoires recalage deux trajectoires qui se rapprochent sans se confondre action un trait plein, continu, plus epais que les lectures 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 DIVERGENCE (HEROS) ================== */ /* Cinq temps sur une seule composition continue : situation, lectures, verification, ajustement, action. Jamais cinq cartes. */ .icu-mech{margin:0} .icu-mech__stage{position:relative} /* La bande est bornee en hauteur : son viewBox tres plat (1160 x 160) et cette limite l'empechent de grandir avec la largeur disponible. C'est ce qui garantit que les cinq 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 .icu-mech__svg{ display:block;width:100%; height:clamp(84px,13.5vh,146px); } /* Toutes les lectures ont la meme epaisseur. Seule l'action, une fois etablie, est plus affirmee. */ .icu-mech-axis{fill:none;stroke:rgba(255,255,255,0.14);stroke-width:1} .icu-mech-station{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:1} .icu-mech-hair{fill:none;stroke:rgba(255,255,255,0.34);stroke-width:1} .icu-mech-line{fill:none;stroke:var(--exp-gold);stroke-width:1.6;stroke-linecap:butt} .icu-mech-read{opacity:.72} .icu-mech-keep{opacity:1} .icu-mech-in{opacity:.9} .icu-mech-seed{fill:var(--exp-gold);opacity:.9} .icu-mech-node{fill:var(--exp-gold)} .icu-mech-end{fill:var(--exp-gold)} .icu-mech-act{ fill:none;stroke:var(--exp-gold);stroke-width:3.4; transform-box:fill-box;transform-origin:left center; } .icu-mech-stop{fill:none;stroke:rgba(255,255,255,0.34);stroke-width:2} /* La zone de verification : une colonne, jamais un symbole. */ .icu-mech-checkfill{fill:rgba(255,255,255,0.06)} .icu-mech-checkedge{fill:none;stroke:var(--exp-gold);stroke-width:1.4;opacity:.8} .icu-mech-check{transform-box:fill-box;transform-origin:center} /* Les cinq temps sont du texte HTML, jamais du texte enferme dans le SVG. Sur ordinateur ils s'alignent sous les cinq stations. */ .icu-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; } .icu-mech__step{ display:flex;flex-direction:column;align-items:center;gap:0.35rem; text-align:center; } .icu-mech__n{ font-size:0.76rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-gold); } .icu-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; } /* L'ecartement du telephone : masque sur ordinateur, ou le SVG porte deja le mecanisme. */ .icu-mech__spread{display:none} .icu-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,9 s, jouee une seule fois, sans boucle. */ .exp-anim .icu-mech.is-in .icu-mech-axis{stroke-dasharray:var(--exp-len,1100);animation:expDraw 700ms ease 160ms both} .exp-anim .icu-mech.is-in .icu-mech-station{animation:expFade 320ms ease both} .exp-anim .icu-mech.is-in .icu-mech-station--1{animation-delay:240ms} .exp-anim .icu-mech.is-in .icu-mech-station--2{animation-delay:320ms} .exp-anim .icu-mech.is-in .icu-mech-station--3{animation-delay:400ms} .exp-anim .icu-mech.is-in .icu-mech-station--4{animation-delay:480ms} .exp-anim .icu-mech.is-in .icu-mech-station--5{animation-delay:560ms} .exp-anim .icu-mech.is-in .icu-mech-seed{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 520ms both} .exp-anim .icu-mech.is-in .icu-mech-in{stroke-dasharray:var(--exp-len,200);animation:expDraw 420ms var(--exp-ease) 700ms both} .exp-anim .icu-mech.is-in .icu-mech-read{stroke-dasharray:var(--exp-len,420);animation:expDraw 620ms var(--exp-ease) both} .exp-anim .icu-mech.is-in .icu-mech-read--1{animation-delay:1080ms} .exp-anim .icu-mech.is-in .icu-mech-read--2{animation-delay:1160ms} .exp-anim .icu-mech.is-in .icu-mech-read--3{animation-delay:1240ms} .exp-anim .icu-mech.is-in .icu-mech-read--4{animation-delay:1320ms} .exp-anim .icu-mech.is-in .icu-mech-gap{animation:expFade 340ms ease 1900ms both} .exp-anim .icu-mech.is-in .icu-mech-check{animation:expGrowY 380ms var(--exp-ease) 2140ms both} .exp-anim .icu-mech.is-in .icu-mech-drop{animation:expFade 380ms ease 2520ms both} .exp-anim .icu-mech.is-in .icu-mech-keep{stroke-dasharray:var(--exp-len,320);animation:expDraw 560ms var(--exp-ease) 2700ms both} .exp-anim .icu-mech.is-in .icu-mech-keep--2{animation-delay:2780ms} .exp-anim .icu-mech.is-in .icu-mech-node{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 3260ms both} .exp-anim .icu-mech.is-in .icu-mech-act{animation:expGrowX 520ms var(--exp-ease) 3400ms both} .exp-anim .icu-mech.is-in .icu-mech-end{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 3820ms both} .exp-anim .icu-mech.is-armed .icu-mech__step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--exp-ease)} .exp-anim .icu-mech.is-in .icu-mech__step{opacity:1;transform:none} .exp-anim .icu-mech.is-in .icu-mech__step--1{transition-delay:.7s} .exp-anim .icu-mech.is-in .icu-mech__step--2{transition-delay:1.1s} .exp-anim .icu-mech.is-in .icu-mech__step--3{transition-delay:2.15s} .exp-anim .icu-mech.is-in .icu-mech__step--4{transition-delay:2.7s} .exp-anim .icu-mech.is-in .icu-mech__step--5{transition-delay:3.4s} .exp-anim .icu-mech.is-armed .icu-mech__claim{opacity:0;transform:translateY(10px);transition:opacity .6s ease 3.9s,transform .6s var(--exp-ease) 3.9s} .exp-anim .icu-mech.is-in .icu-mech__claim{opacity:1;transform:none} /* ===================== 2. LE TITRE EN DEUX MOUVEMENTS ================ */ /* L'aphorisme porte deux gestes distincts : comprendre, puis s'adapter. Le second est pose plus bas et plus petit, dans l'or patine : la page entiere se lit entre ces deux lignes. */ .icu-h1{max-width:min(80%,22ch)} .icu-h1__second{ display:block; margin-top:0.18em; font-size:0.68em; color:var(--exp-gold-ink); } /* =============== 3. L'INTERVALLE (PROFONDEUR 01) ===================== */ .exp-anim .is-in .icu-int-direct{stroke-dasharray:var(--exp-len,500);animation:expDraw 560ms var(--exp-ease) 120ms both} .exp-anim .is-in .icu-int-a{animation:expFade 300ms ease both} .exp-anim .is-in .icu-int-b{animation:expFade 300ms ease 760ms both} .exp-anim .is-in .icu-int-run{stroke-dasharray:var(--exp-len,200);animation:expDraw 380ms ease 860ms both} .exp-anim .is-in .icu-int-run--2{animation-delay:1620ms} .exp-anim .is-in .icu-int-brack{animation:expFade 300ms ease 1220ms both} .exp-anim .is-in .icu-int-lift{stroke-dasharray:var(--exp-len,180);animation:expDraw 520ms var(--exp-ease) 1320ms both} .exp-anim .is-in .icu-int-mark{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1740ms both} /* ============ 4. LE FAIT ET SES LECTURES POSSIBLES =================== */ /* Le fait tient une ligne, les lectures s'ouvrent en eventail. La composition est asymetrique par construction : un fait, plusieurs lectures, jamais deux colonnes egales. */ .icu-fact{ display:grid; grid-template-columns:minmax(0,0.44fr) minmax(0,0.56fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); align-items:start; } .icu-fact__stated{ padding-top:1.15rem; border-top:2px solid var(--exp-gold); } .icu-fact__kind{ margin:0 0 0.85rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-gold-ink); } .icu-fact__kind--soft{color:var(--exp-steel-ink)} .icu-fact__text{ margin:0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.2rem,1.02rem + 0.72vw,1.6rem); line-height:1.4;color:var(--exp-navy-deep); } .icu-fact__reads{padding-top:1.15rem;border-top:1px solid var(--exp-rule)} /* L'eventail : chaque lecture porte son propre angle de depart. Aucune n'est mise en avant, aucune n'est barree. */ .icu-fan{list-style:none;margin:0;padding:0} .icu-fan__item{ display:flex;align-items:baseline;gap:0.85rem; padding-block:0.5rem; font-size:1.02rem;line-height:1.55;color:var(--exp-ink); } .icu-fan__ray{ flex:none;display:block; width:22px;height:1px; background:var(--exp-steel); transform-origin:left center; position:relative;top:-0.34em; } .icu-fan__item:nth-child(1) .icu-fan__ray{transform:rotate(-21deg)} .icu-fan__item:nth-child(2) .icu-fan__ray{transform:rotate(-13deg)} .icu-fan__item:nth-child(3) .icu-fan__ray{transform:rotate(-5deg)} .icu-fan__item:nth-child(4) .icu-fan__ray{transform:rotate(5deg)} .icu-fan__item:nth-child(5) .icu-fan__ray{transform:rotate(13deg)} .icu-fan__item:nth-child(6) .icu-fan__ray{transform:rotate(21deg)} [data-exp-theme="deep"] .icu-fan__ray{background:rgba(255,255,255,0.5)} [data-exp-theme="deep"] .icu-fan__item{color:var(--exp-on-dark)} /* La question repere de toute la page. */ .icu-mark{ margin:clamp(2.25rem,5.5vh,3.5rem) 0 0; padding-left:clamp(1rem,2.5vw,1.6rem); border-left:3px solid var(--exp-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem); line-height:1.24;color:var(--exp-navy-deep); max-width:20ch; } .icu-mark__after{margin-top:1.25rem;max-width:62ch} /* ============ 5. CE QU'ELLE EST, N'EST PAS, PRODUIT ================== */ /* Trois registres de largeurs et de poids differents. Le registre negatif est mis en retrait par la composition elle meme, jamais par une couleur d'alerte. */ .icu-def{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .icu-def__kind{ margin:0 0 0.9rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-gold-ink); } .icu-def__kind--off{color:var(--exp-steel-ink)} .icu-def__is{ padding-top:1.25rem; border-top:2px solid var(--exp-gold); max-width:52ch; } .icu-def__lead{ margin:0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.28rem,1.05rem + 0.95vw,1.75rem); line-height:1.38;color:var(--exp-navy-deep); } .icu-def__isnt{ margin-top:clamp(1.75rem,4vh,2.5rem); margin-left:clamp(0rem,10vw,9rem); padding-top:1.15rem; border-top:1px solid var(--exp-rule); max-width:52ch; } .icu-def__list{list-style:none;margin:0;padding:0} .icu-def__list li{ position:relative;padding-left:1.9rem; padding-block:0.42rem; font-size:1.02rem;line-height:1.6;color:var(--exp-ink-dim); } /* Le signe qui ecarte : un trait oblique, jamais une croix rouge. */ .icu-def__list li::before{ content:"";position:absolute;left:0;top:0.85em; width:20px;height:1px;background:var(--exp-steel); transform:rotate(-20deg);transform-origin:left center; } .icu-def__does{ margin-top:clamp(1.75rem,4vh,2.5rem); padding-top:1.15rem; border-top:1px solid var(--exp-rule); } .icu-def__verbs{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.06rem,0.98rem + 0.42vw,1.3rem); line-height:1.7;color:var(--exp-navy); } .icu-def__verbs li{ padding-right:0.9rem;margin-right:0.9rem; border-right:1px solid var(--exp-rule); } .icu-def__verbs li:last-child{border-right:0;padding-right:0;margin-right:0} /* ============ 6. CINQ SITUATIONS, PLUSIEURS LECTURES (ONGLETS) ======= */ /* Le rail se lit comme un axe commun d'ou descendent cinq situations : le repere actif est en HAUT de l'onglet, pas en dessous. */ .icu-cases{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .icu-cases__hint{ display:none;margin:0 0 0.85rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-ink-dim); } .icu-tabs-ready .icu-cases__hint{display:block} .icu-cases__rail{ display:none;flex-wrap:wrap; border-top:1px solid var(--exp-rule); } .icu-tabs-ready .icu-cases__rail{display:flex} .icu-case-tab{ position:relative; appearance:none;-webkit-appearance:none; background:none;border:0; border-top:2px solid transparent; padding:0.85rem 1.35rem 0.85rem 0; margin-right:1.35rem; min-height:48px; display:inline-flex;flex-direction:column;align-items:flex-start;gap:0.3rem; font-family:'Space Grotesk',sans-serif; cursor:pointer;text-align:left; transition:border-color .25s ease; } .icu-case-tab__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-steel-ink);transition:color .25s ease; } .icu-case-tab__name{ font-size:0.82rem;font-weight:700; letter-spacing:0.14em;text-transform:uppercase; color:var(--exp-ink-dim);line-height:1.4; transition:color .25s ease; } .icu-case-tab:hover .icu-case-tab__name{color:var(--exp-navy-deep)} .icu-case-tab:hover{border-top-color:var(--exp-rule)} /* Etat actif : un trait en tete, une graisse, une encre et un repere plein. Jamais la couleur seule. */ .icu-case-tab[aria-selected="true"]{border-top-color:var(--exp-gold-ink)} .icu-case-tab[aria-selected="true"] .icu-case-tab__name{color:var(--exp-navy-deep)} .icu-case-tab[aria-selected="true"] .icu-case-tab__n{color:var(--exp-gold-ink)} .icu-case-tab[aria-selected="true"]::before{ content:"";position:absolute;left:0;top:-2px; width:9px;height:9px;background:var(--exp-gold-ink); } .icu-cases__stage{margin-top:clamp(1.5rem,4vh,2.25rem)} .icu-tabs-ready .icu-cases__stage{display:grid} .icu-case-panel{display:grid;gap:clamp(1.1rem,2.6vh,1.6rem);align-content:start} .icu-case-panel + .icu-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. `visibility` retire aussi le volet de l'arbre d'accessibilite et du parcours de tabulation ; aucune transition ne lui est appliquee. */ .icu-tabs-ready .icu-case-panel{ grid-area:1 / 1;margin-top:0;padding-top:0;border-top:0; visibility:hidden;opacity:0; } .icu-tabs-ready .icu-case-panel.is-active{ visibility:visible;opacity:1; transition:opacity .3s ease; } .icu-case__fact{ margin:0;padding-top:1.1rem; border-top:2px solid var(--exp-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.16rem,1.02rem + 0.62vw,1.48rem); line-height:1.4;color:var(--exp-navy-deep);max-width:46ch; } .icu-case__fact b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-gold-ink);margin-bottom:0.5rem; } .icu-case__body{ display:grid; grid-template-columns:minmax(0,0.42fr) minmax(0,0.58fr); gap:clamp(1.25rem,3vw,2.75rem); align-items:center; } .icu-case__viz{width:min(100%,320px)} .icu-case__check{ margin:0;padding-top:1rem; border-top:1px solid var(--exp-rule); font-size:1.02rem;line-height:1.62; color:var(--exp-navy);max-width:62ch; } .icu-case__check b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-steel-ink);margin-bottom:0.35rem; } /* Les eventails : meme geste, cinq geometries. La seule chose qui change d'une situation a l'autre est l'ecart entre les lectures. */ .icu-ray{fill:none} .exp-anim .icu-case-panel.is-playing .icu-ray-seed{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease both} .exp-anim .icu-case-panel.is-playing .icu-ray{stroke-dasharray:var(--exp-len,260);animation:expDraw 520ms var(--exp-ease) both} .exp-anim .icu-case-panel.is-playing .icu-ray--1{animation-delay:260ms} .exp-anim .icu-case-panel.is-playing .icu-ray--2{animation-delay:340ms} .exp-anim .icu-case-panel.is-playing .icu-ray--3{animation-delay:420ms} .exp-anim .icu-case-panel.is-playing .icu-ray--4{animation-delay:500ms} .exp-anim .icu-case-panel.is-playing .icu-ray--5{animation-delay:580ms} .exp-anim .icu-case-panel.is-playing .icu-ray--6{animation-delay:660ms} .exp-anim .icu-case-panel.is-playing .icu-ray-tip{transform-box:fill-box;transform-origin:left center;animation:expGrowX 240ms ease both} .exp-anim .icu-case-panel.is-playing .icu-ray-tip--1{animation-delay:760ms} .exp-anim .icu-case-panel.is-playing .icu-ray-tip--2{animation-delay:820ms} .exp-anim .icu-case-panel.is-playing .icu-ray-tip--3{animation-delay:880ms} .exp-anim .icu-case-panel.is-playing .icu-ray-tip--4{animation-delay:940ms} .exp-anim .icu-case-panel.is-playing .icu-ray-tip--5{animation-delay:1000ms} .exp-anim .icu-case-panel.is-playing .icu-ray-tip--6{animation-delay:1060ms} .exp-anim .icu-case-panel.is-playing .icu-ray-split{animation:expFade 340ms ease 1180ms both} /* ============ 7. CE QUE L'EXPERTISE N'EST PAS ======================== */ .icu-stereo{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .icu-craft{list-style:none;margin:1.15rem 0 0;padding:0} .icu-craft li{ padding-block:0.75rem; border-top:1px solid var(--exp-rule-dark); font-size:1.01rem;line-height:1.62;color:var(--exp-on-dark); } .icu-craft li:first-child{border-top:0;padding-top:0} .icu-craft b{ display:inline-block;min-width:8.5rem; font-size:0.76rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold); } .exp-anim .is-in .icu-st-bar{transform-box:fill-box;transform-origin:left center;animation:expGrowX 300ms var(--exp-ease) both} .exp-anim .is-in .icu-st-bar--1{animation-delay:80ms} .exp-anim .is-in .icu-st-bar--2{animation-delay:160ms} .exp-anim .is-in .icu-st-bar--3{animation-delay:240ms} .exp-anim .is-in .icu-st-bar--4{animation-delay:320ms} .exp-anim .is-in .icu-st-bar--5{animation-delay:400ms} .exp-anim .is-in .icu-st-guess{stroke-dasharray:var(--exp-len,220);animation:expDraw 480ms ease 620ms both} .exp-anim .is-in .icu-st-stop{transform-box:fill-box;transform-origin:center;animation:expGrowY 280ms var(--exp-ease) 1080ms both} .exp-anim .is-in .icu-st-path{stroke-dasharray:var(--exp-len,540);animation:expDraw 900ms var(--exp-ease) 1320ms both} .exp-anim .is-in .icu-st-check{transform-box:fill-box;transform-origin:center;animation:expPop 240ms ease both} .exp-anim .is-in .icu-st-check--1{animation-delay:1620ms} .exp-anim .is-in .icu-st-check--2{animation-delay:1760ms} .exp-anim .is-in .icu-st-check--3{animation-delay:1900ms} .exp-anim .is-in .icu-st-person{transform-box:fill-box;transform-origin:center;animation:expPop 300ms var(--exp-ease) 2240ms both} /* ==================== 8. S'ADAPTER SANS SE PERDRE ==================== */ /* Le schema est borne en largeur ET en hauteur : a 80 pour cent de zoom la largeur CSS augmente, mais le dessin ne grandit plus et le titre ne se separe jamais de sa conclusion. */ .icu-hold__viz{ max-width:760px;margin-inline:auto; margin-top:clamp(1.25rem,3vh,2rem); } .icu-hold__viz svg{width:100%;height:clamp(150px,24vh,240px)} .icu-hold__viz .exp-keys{justify-content:center} .icu-hold{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); gap:clamp(1.5rem,4vw,3.25rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); align-items:start; } .icu-hold__kind{ margin:0 0 0.85rem; font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-steel-ink); } .icu-hold__kind--firm{color:var(--exp-gold-ink)} .icu-hold__soft{padding-top:1.15rem;border-top:1px solid var(--exp-steel)} .icu-hold__firm{padding-top:1.15rem;border-top:2px solid var(--exp-gold)} .icu-hold__list{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap; font-size:1rem;line-height:1.75;color:var(--exp-ink-dim); } .icu-hold__list li{ padding-right:0.8rem;margin-right:0.8rem; border-right:1px solid var(--exp-rule); } .icu-hold__list li:last-child{border-right:0;padding-right:0;margin-right:0} /* Ce qui demeure ne flotte pas : chaque engagement tient sa propre ligne. */ .icu-hold__list--firm{ display:block;color:var(--exp-ink); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.04rem,0.98rem + 0.32vw,1.2rem); } .icu-hold__list--firm li{ padding:0.42rem 0 0.42rem 1.25rem;margin:0;border-right:0; position:relative; } .icu-hold__list--firm li::before{ content:"";position:absolute;left:0;top:0.95em; width:8px;height:2px;background:var(--exp-gold); } .exp-anim .is-in .icu-hd-rail{stroke-dasharray:var(--exp-len,700);animation:expDraw 640ms var(--exp-ease) both} .exp-anim .is-in .icu-hd-rail--2{animation-delay:140ms} .exp-anim .is-in .icu-hd-flow{stroke-dasharray:var(--exp-len,840);animation:expDraw 1200ms var(--exp-ease) 640ms both} .exp-anim .is-in .icu-hd-deflect{transform-box:fill-box;transform-origin:bottom center;animation:expGrowY 300ms var(--exp-ease) 1120ms both} .exp-anim .is-in .icu-hd-end{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 1880ms both} /* ============ 9. LE MECANISME COMPLET (PROFONDEUR 02) ================ */ /* Chaque temps porte une bande : elle montre l'etendue de ce qui reste ouvert. Elle s'elargit a l'interpretation, se fragmente a l'hypothese, perd deux segments a la verification, se resserre a l'adaptation, et se reduit a un seul segment a l'action. Elle ne se referme jamais. */ .icu-loop{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .icu-loop__list{list-style:none;margin:0;padding:0} .icu-move{ display:grid; grid-template-columns:minmax(0,0.26fr) minmax(0,0.46fr) minmax(0,0.28fr); gap:0.6rem clamp(1.25rem,3vw,2.75rem); align-items:start; padding-block:clamp(1rem,2.6vh,1.5rem); border-top:1px solid var(--exp-rule-dark); } .icu-move:first-child{border-top:0;padding-top:0} .icu-move__head{display:flex;align-items:baseline;gap:0.8rem;margin:0} .icu-move__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-gold);flex:none; } .icu-move__name{ font-size:0.86rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:#fff;line-height:1.5; } .icu-move__text{ margin:0; font-size:1.02rem;line-height:1.7; color:var(--exp-on-dark);max-width:56ch; } .icu-move__band{ display:block;position:relative; height:26px;margin-top:0.3rem; } .icu-move__band i{ position:absolute;display:block;height:3px; background:var(--exp-gold); transform-origin:left center; } .icu-move__band i:nth-child(1){top:2px} .icu-move__band i:nth-child(2){top:9px} .icu-move__band i:nth-child(3){top:16px} .icu-move__band i:nth-child(4){top:23px} /* 01 Perception : un fait, une seule etendue, etroite. */ .icu-move--1 .icu-move__band i:nth-child(1){left:0;width:16%} .icu-move--1 .icu-move__band i:nth-child(2), .icu-move--1 .icu-move__band i:nth-child(3), .icu-move--1 .icu-move__band i:nth-child(4){opacity:0;width:0} /* 02 Interpretation : plusieurs sens deviennent possibles, ils se recouvrent encore. */ .icu-move--2 .icu-move__band i:nth-child(1){left:0;width:34%} .icu-move--2 .icu-move__band i:nth-child(2){left:14%;width:40%} .icu-move--2 .icu-move__band i:nth-child(3){left:32%;width:44%} .icu-move--2 .icu-move__band i:nth-child(4){left:52%;width:42%} /* 03 Hypothese : les memes etendues, mais nommees une a une. */ .icu-move--3 .icu-move__band i{ background:repeating-linear-gradient(90deg,var(--exp-gold) 0 9px,transparent 9px 15px); } .icu-move--3 .icu-move__band i:nth-child(1){left:0;width:34%} .icu-move--3 .icu-move__band i:nth-child(2){left:14%;width:40%} .icu-move--3 .icu-move__band i:nth-child(3){left:32%;width:44%} .icu-move--3 .icu-move__band i:nth-child(4){left:52%;width:42%} /* 04 Verification : deux etendues s'effacent. */ .icu-move--4 .icu-move__band i:nth-child(1){left:0;width:34%;opacity:.16} .icu-move--4 .icu-move__band i:nth-child(2){left:14%;width:40%} .icu-move--4 .icu-move__band i:nth-child(3){left:32%;width:44%} .icu-move--4 .icu-move__band i:nth-child(4){left:52%;width:42%;opacity:.16} /* 05 Adaptation : ce qui reste se rapproche. */ .icu-move--5 .icu-move__band i:nth-child(1), .icu-move--5 .icu-move__band i:nth-child(4){opacity:0;width:0} .icu-move--5 .icu-move__band i:nth-child(2){left:24%;width:30%} .icu-move--5 .icu-move__band i:nth-child(3){left:32%;width:30%} /* 06 Action : une seule etendue, tenue, jamais nulle. */ .icu-move--6 .icu-move__band i:nth-child(1), .icu-move--6 .icu-move__band i:nth-child(3), .icu-move--6 .icu-move__band i:nth-child(4){opacity:0;width:0} .icu-move--6 .icu-move__band i:nth-child(2){left:28%;width:24%;height:5px} .exp-anim .icu-move__band i{transform:scaleX(0)} .exp-anim .icu-loop.is-in .icu-move__band i{ transform:scaleX(1); transition:transform .5s var(--exp-ease); } .exp-anim .icu-loop.is-in .icu-move--1 .icu-move__band i{transition-delay:.15s} .exp-anim .icu-loop.is-in .icu-move--2 .icu-move__band i{transition-delay:.4s} .exp-anim .icu-loop.is-in .icu-move--3 .icu-move__band i{transition-delay:.65s} .exp-anim .icu-loop.is-in .icu-move--4 .icu-move__band i{transition-delay:.9s} .exp-anim .icu-loop.is-in .icu-move--5 .icu-move__band i{transition-delay:1.15s} .exp-anim .icu-loop.is-in .icu-move--6 .icu-move__band i{transition-delay:1.4s} /* ============ 10. LA MEME SITUATION, DEUX TRAJECTOIRES =============== */ .icu-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); } .icu-track{margin:0;padding-top:1.25rem;border-top:1px solid var(--exp-rule)} .icu-track--open{border-top-color:var(--exp-gold)} .icu-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; } .icu-track__steps{list-style:none;margin:1.25rem 0 0;padding:0} .icu-track__steps li{ padding-block:0.65rem;border-top:1px solid var(--exp-rule); font-size:1rem;line-height:1.6;color:var(--exp-on-dark); } .icu-track__steps li:first-child{border-top:0} .icu-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; } .icu-track__claim{ margin:1.25rem 0 0;padding-top:1rem; border-top:1px solid var(--exp-rule); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.1rem,1rem + 0.5vw,1.34rem); line-height:1.4;color:#fff; } .icu-track__claim--gold{color:var(--exp-gold-soft)} .icu-tracks__note{margin-top:clamp(1.5rem,3.5vh,2.25rem);max-width:66ch} .icu-t1-loop,.icu-t1-in,.icu-t2-in,.icu-t2-hyp,.icu-t2-keep{fill:none} .icu-t2-checkfill{fill:rgba(255,255,255,0.07)} .exp-anim .is-in .icu-t1-seed{animation:expFade 280ms ease both} .exp-anim .is-in .icu-t1-in{stroke-dasharray:var(--exp-len,140);animation:expDraw 380ms ease 200ms both} .exp-anim .is-in .icu-t1-node{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 540ms both} .exp-anim .is-in .icu-t1-loop{stroke-dasharray:var(--exp-len,540);animation:expDraw 1150ms var(--exp-ease) 720ms both} .exp-anim .is-in .icu-t1-tick{transform-box:fill-box;transform-origin:center;animation:expPop 240ms ease both} .exp-anim .is-in .icu-t1-tick--1{animation-delay:1180ms} .exp-anim .is-in .icu-t1-tick--2{animation-delay:1420ms} .exp-anim .is-in .icu-t1-tick--3{animation-delay:1660ms} .exp-anim .is-in .icu-t1-end{animation:expFade 300ms ease 1980ms both} .exp-anim .is-in .icu-t2-seed{animation:expFade 280ms ease both} .exp-anim .is-in .icu-t2-in{stroke-dasharray:var(--exp-len,100);animation:expDraw 320ms ease 200ms both} .exp-anim .is-in .icu-t2-hyp{stroke-dasharray:var(--exp-len,120);animation:expDraw 360ms var(--exp-ease) both} .exp-anim .is-in .icu-t2-hyp--1{animation-delay:540ms} .exp-anim .is-in .icu-t2-hyp--2{animation-delay:600ms} .exp-anim .is-in .icu-t2-hyp--3{animation-delay:660ms} .exp-anim .is-in .icu-t2-hyp--4{animation-delay:720ms} .exp-anim .is-in .icu-t2-check{transform-box:fill-box;transform-origin:center;animation:expGrowY 340ms var(--exp-ease) 1080ms both} .exp-anim .is-in .icu-t2-out{animation:expFade 340ms ease 1420ms both} .exp-anim .is-in .icu-t2-keep{stroke-dasharray:var(--exp-len,160);animation:expDraw 460ms var(--exp-ease) 1580ms both} .exp-anim .is-in .icu-t2-keep--2{animation-delay:1660ms} .exp-anim .is-in .icu-t2-node{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 2080ms both} .exp-anim .is-in .icu-t2-act{stroke-dasharray:170;animation:expDraw 620ms var(--exp-ease) 2220ms both} .exp-anim .is-in .icu-t2-end{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 2780ms both} /* ================ 11. LES TERRAINS OU LES LECTURES DIVERGENT ========= */ /* Huit questions d'analyse. Des lignes, jamais des cartes ; des questions, jamais des reponses. */ .icu-fields{ margin:clamp(1.75rem,4.5vh,2.75rem) 0 0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,5vw,4rem); } .icu-field{ padding-block:clamp(0.9rem,2.2vh,1.3rem); border-top:1px solid var(--exp-rule-dark); } .icu-field dt{ font-size:0.78rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--exp-gold);margin-bottom:0.45rem; } .icu-field dd{ margin:0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.04rem,0.98rem + 0.3vw,1.18rem); line-height:1.5;color:var(--exp-on-dark); } /* =================== 12. FONDEMENTS SCIENTIFIQUES ==================== */ /* Quatre dimensions en quatre lignes. Jamais quatre colonnes, jamais quatre pictogrammes. */ .icu-dims{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; border-top:1px solid var(--exp-rule); } .icu-dim{ display:grid; grid-template-columns:minmax(0,0.2fr) minmax(0,0.3fr) minmax(0,0.5fr); gap:0.5rem clamp(1.25rem,3vw,2.75rem); align-items:baseline; padding-block:clamp(1rem,2.6vh,1.5rem); border-bottom:1px solid var(--exp-rule); } .icu-dim__kind{ margin:0; font-size:0.76rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink);line-height:1.6; } .icu-dim__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.14rem,1.02rem + 0.5vw,1.36rem); line-height:1.28;color:var(--exp-navy-deep); } .icu-dim__text{margin:0;font-size:1.01rem;line-height:1.68;color:var(--exp-ink)} .icu-scale{ margin-top:clamp(2rem,5vh,3rem); padding-top:1.35rem; border-top:2px solid var(--exp-gold); max-width:70ch; } /* ============ 13. LA LECTURE MOSAICA (PROFONDEUR 03) ================= */ /* LE DIAGRAMME NE GRANDIT PLUS AVEC LA LARGEUR. Largeur bornee et hauteur bornee : a 80 pour cent de zoom la largeur CSS augmente, mais le dessin reste dans sa boite et le titre ne se separe jamais de sa conclusion. `preserveAspectRatio` empeche la deformation. */ .icu-model-figure{ max-width:760px;margin-inline:auto; margin-top:clamp(1rem,2.6vh,1.75rem); } .icu-model-figure svg{width:100%;height:clamp(190px,30vh,290px)} .icu-model-figure .exp-keys{margin-top:clamp(0.6rem,1.6vh,1rem);justify-content:center} .icu-model-claim{margin-top:clamp(1rem,2.6vh,1.75rem)} .icu-model-scene{padding-block:clamp(2.25rem,5vh,3.5rem)} .icu-model-scene .exp-depth{margin-bottom:clamp(1.1rem,2.8vh,1.9rem)} .icu-model-scene .exp-h2{margin-bottom:0} .exp-anim .is-in .icu-md-band{transform-box:fill-box;transform-origin:left center;animation:expGrowX 420ms var(--exp-ease) both} .exp-anim .is-in .icu-md-band--2{animation-delay:160ms} .exp-anim .is-in .icu-md-band--3{animation-delay:320ms} .exp-anim .is-in .icu-md-seed{transform-box:fill-box;transform-origin:center;animation:expPop 280ms ease 560ms both} .exp-anim .is-in .icu-md-stem{stroke-dasharray:var(--exp-len,120);animation:expDraw 420ms var(--exp-ease) 700ms both} .exp-anim .is-in .icu-md-fan{stroke-dasharray:var(--exp-len,300);animation:expDraw 660ms var(--exp-ease) both} .exp-anim .is-in .icu-md-fan--1{animation-delay:1100ms} .exp-anim .is-in .icu-md-fan--2{animation-delay:1180ms} .exp-anim .is-in .icu-md-fan--3{animation-delay:1260ms} .exp-anim .is-in .icu-md-fan--4{animation-delay:1340ms} .exp-anim .is-in .icu-md-fit{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease 1880ms both} .exp-anim .is-in .icu-md-off{animation:expFade 320ms ease 2020ms both} .exp-anim .is-in .icu-md-gap{animation:expFade 320ms ease 2200ms both} /* Les trois niveaux : trois lignes editoriales, jamais trois cartes. Le repere dore s'allonge a mesure que l'on descend vers ce qui est vecu, parce que c'est la que l'interpretation prend le plus de place. */ .icu-levels{ margin-top:clamp(1.5rem,4vh,2.5rem); border-top:1px solid var(--exp-rule); } .icu-level{ position:relative; display:grid; grid-template-columns:minmax(0,0.3fr) minmax(0,0.7fr); gap:0.6rem clamp(1.25rem,3vw,2.75rem); align-items:start; padding-block:clamp(1.1rem,2.8vh,1.7rem); border-bottom:1px solid var(--exp-rule); } .icu-level::before{ content:"";position:absolute;top:-1px;left:0;height:2px; background:var(--exp-gold); transform:scaleX(1);transform-origin:left center; } .icu-level--1::before{width:38px;opacity:.5} .icu-level--2::before{width:76px;opacity:.75} .icu-level--3::before{width:140px;opacity:1} .exp-anim .icu-level::before{transform:scaleX(0)} .exp-anim .icu-levels.is-in .icu-level::before{transform:scaleX(1);transition:transform .55s var(--exp-ease)} .exp-anim .icu-levels.is-in .icu-level--2::before{transition-delay:.18s} .exp-anim .icu-levels.is-in .icu-level--3::before{transition-delay:.36s} .icu-level__kind{ display:flex;align-items:baseline;gap:0.8rem;margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.18rem,1.04rem + 0.6vw,1.46rem); line-height:1.28;color:var(--exp-navy-deep); } .icu-level__n{ flex:none; font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:0.74rem;letter-spacing:0.1em; color:var(--exp-gold-ink); } .icu-level__body p{margin:0;font-size:1.02rem;line-height:1.72;color:var(--exp-ink)} .icu-level__ask{ margin-top:0.8rem !important;padding-top:0.7rem; 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; } /* =================== 14. L'OUTIL DE LECTURE ========================== */ /* Six mouvements sur une regle graduee. Le verbe porte la memoire, la question porte l'usage. */ .icu-tool{ list-style:none; margin:clamp(1.75rem,4.5vh,2.75rem) 0 0; padding-left:clamp(1.75rem,4.5vw,3.25rem); position:relative; } .icu-tool::before{ content:"";position:absolute; left:clamp(0.5rem,1.4vw,1rem);top:0.4rem;bottom:0.4rem; width:1px;background:var(--exp-rule); } .icu-step{ position:relative; display:grid; grid-template-columns:auto minmax(0,0.26fr) minmax(0,0.74fr); gap:0.4rem clamp(1rem,2.5vw,2rem); align-items:baseline; padding-block:clamp(0.9rem,2.4vh,1.35rem); border-top:1px solid var(--exp-rule); } .icu-step:first-child{border-top:0;padding-top:0} /* La graduation : une marque par mouvement, sur la regle. */ .icu-step::before{ content:"";position:absolute; left:calc(clamp(0.5rem,1.4vw,1rem) - clamp(1.75rem,4.5vw,3.25rem) - 5px); top:0.72em;width:11px;height:2px;background:var(--exp-gold); transform:scaleX(1);transform-origin:left center; } .exp-anim .icu-step::before{transform:scaleX(0)} .exp-anim .icu-tool.is-in .icu-step::before{transform:scaleX(1);transition:transform .45s var(--exp-ease)} .exp-anim .icu-tool.is-in .icu-step:nth-child(2)::before{transition-delay:.1s} .exp-anim .icu-tool.is-in .icu-step:nth-child(3)::before{transition-delay:.2s} .exp-anim .icu-tool.is-in .icu-step:nth-child(4)::before{transition-delay:.3s} .exp-anim .icu-tool.is-in .icu-step:nth-child(5)::before{transition-delay:.4s} .exp-anim .icu-tool.is-in .icu-step:nth-child(6)::before{transition-delay:.5s} .icu-step__n{ font-size:0.74rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-steel-ink); } .icu-step__verb{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.42rem,1.1rem + 1.3vw,2.05rem); line-height:1.14;color:var(--exp-gold-ink); } .icu-step__ask{ margin:0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.06rem,0.98rem + 0.42vw,1.28rem); line-height:1.48;color:var(--exp-navy-deep);max-width:46ch; } /* ==================== 15. NOTRE MANIERE D'AGIR ======================= */ .icu-way{margin-top:clamp(1.75rem,4.5vh,2.75rem)} .icu-way__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3.5vh,2.4rem)} .icu-wm{ position:relative; display:grid; grid-template-columns:minmax(0,0.38fr) minmax(0,0.62fr); gap:0.5rem clamp(1.25rem,3vw,2.75rem); padding-top:1.35rem;border-top:1px solid var(--exp-rule); } .icu-wm::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 .icu-wm::before{transform:scaleX(0)} .exp-anim .icu-way.is-in .icu-wm::before{transform:scaleX(1)} .exp-anim .icu-way.is-in .icu-wm:nth-child(2)::before{transition-delay:.2s} .exp-anim .icu-way.is-in .icu-wm:nth-child(3)::before{transition-delay:.4s} .icu-wm__n{ grid-column:1;margin:0 0 0.5rem; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink); } .icu-wm__title{ grid-column:1;margin:0; 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);max-width:16ch; } .icu-wm__body{grid-column:2;grid-row:1 / span 2} .icu-wm__body p{margin:0;font-size:1.02rem;line-height:1.72;color:var(--exp-ink);max-width:58ch} .icu-means{ list-style:none;margin:1.1rem 0 0;padding:0; display:flex;flex-wrap:wrap; font-size:0.96rem;line-height:1.7;color:var(--exp-ink-dim); } .icu-means li{padding-right:0.75rem;margin-right:0.75rem;border-right:1px solid var(--exp-rule)} .icu-means li:last-child{border-right:0;padding-right:0;margin-right:0} /* ============ 16. TROIS PORTES D'ENTREE (PROFONDEUR 04) ============== */ /* Trois blocs editoriaux, entierement lisibles : aucun contenu d'intervention n'est cache derriere une interaction. */ .icu-doors{margin-top:clamp(1.5rem,4vh,2.5rem)} .icu-door{ display:grid; grid-template-columns:auto minmax(0,0.3fr) minmax(0,0.7fr); gap:0.75rem clamp(1.25rem,3vw,2.75rem); align-items:start; padding-block:clamp(1.5rem,4vh,2.4rem); border-top:1px solid var(--exp-rule); } .icu-door:last-child{border-bottom:1px solid var(--exp-rule)} .icu-door__n{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.6rem,1.2rem + 1.3vw,2.35rem); line-height:1;color:var(--exp-gold-ink); } .icu-door__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.5rem,1.15rem + 1.4vw,2.15rem); line-height:1.12;color:var(--exp-navy-deep); } .icu-door__say{ margin:0.6rem 0 0; font-size:0.98rem;line-height:1.6;color:var(--exp-ink-dim);max-width:32ch; } .icu-door__body .exp-annot{margin-bottom:0.7rem} .icu-door__body .exp-annot + .icu-door__list{margin-top:0} .icu-door__body > * + .exp-annot{margin-top:1.2rem} .icu-door__list{list-style:none;margin:0.9rem 0 0;padding:0;display:grid;gap:0.42rem} .icu-door__list li{ position:relative;padding-left:1.15rem; font-size:1rem;line-height:1.58;color:var(--exp-ink); } .icu-door__list li::before{ content:"";position:absolute;left:0;top:0.62em; width:7px;height:2px;background:var(--exp-gold); } /* Les terrains ne sont pas une liste a puces : ils forment une bande. */ .icu-door__list--flow{ display:flex;flex-wrap:wrap;gap:0; font-size:0.98rem;line-height:1.75;color:var(--exp-ink-dim); } .icu-door__list--flow li{ padding:0 0.75rem 0 0;margin-right:0.75rem; border-right:1px solid var(--exp-rule); } .icu-door__list--flow li::before{display:none} .icu-door__list--flow li:last-child{border-right:0;padding-right:0;margin-right:0} .icu-door__body p + p{margin-top:1rem} .icu-door__body .exp-note a{color:var(--exp-gold-ink);text-decoration:none;border-bottom:1px solid currentColor} .icu-door__body .exp-note a:hover{color:var(--exp-navy-deep)} /* ======================= 17. CONTENUS ASSOCIES ======================= */ .icu-reads{list-style:none;margin:clamp(1.5rem,4vh,2.25rem) 0 0;padding:0} .icu-read{ display:grid; grid-template-columns:minmax(0,0.22fr) minmax(0,0.78fr); gap:0.5rem clamp(1rem,3vw,2.5rem); padding-block:clamp(1.1rem,2.8vh,1.6rem); border-top:1px solid var(--exp-rule); align-items:baseline; } .icu-read:last-child{border-bottom:1px solid var(--exp-rule)} .icu-read__kind{ margin:0; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--exp-gold-ink); } .icu-read__body h3{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.14rem,1.02rem + 0.5vw,1.38rem); line-height:1.3;color:var(--exp-navy-deep);margin:0 0 0.4rem; } .icu-read__body p{font-size:0.99rem;line-height:1.6;color:var(--exp-ink);margin:0;max-width:60ch} /* ========================== 18. CONCLUSION =========================== */ .icu-end{position:relative;overflow:hidden} /* Deux lectures superposees d'une meme surface : deux trames identiques inclinees differemment, la ou elles se croisent l'image devient moins lisible. Elle ne bouge pas et reste en retrait. Aucune mosaique : ce motif appartient a une autre expertise. */ .icu-end__field{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(74deg,rgba(255,255,255,0.055) 0 1px,transparent 1px 34px), repeating-linear-gradient(106deg,rgba(255,255,255,0.045) 0 1px,transparent 1px 34px); -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 78%); mask-image:linear-gradient(100deg,transparent 30%,#000 78%); opacity:.9; } .icu-end__inner{position:relative} .icu-end__sign{font-size:1.04rem;line-height:1.72;color:var(--exp-on-dark);max-width:60ch;margin:0} /* ====================== 19. TABLETTE (<= 1080px) ===================== */ @media(max-width:1080px){ .icu-fact{grid-template-columns:minmax(0,1fr);gap:1.5rem} .icu-def__isnt{margin-left:clamp(0rem,5vw,3rem)} .icu-case__body{grid-template-columns:minmax(0,1fr);gap:1.5rem} .icu-case__viz{width:min(100%,300px)} .icu-hold{grid-template-columns:minmax(0,1fr);gap:1.75rem} .icu-move{grid-template-columns:minmax(0,1fr);gap:0.5rem} .icu-move__band{max-width:340px;margin-top:0.6rem} .icu-tracks{grid-template-columns:minmax(0,1fr);gap:2rem} .icu-fields{grid-template-columns:minmax(0,1fr);column-gap:0} .icu-dim{grid-template-columns:minmax(0,0.32fr) minmax(0,0.68fr)} .icu-dim__text{grid-column:1 / -1;margin-top:0.4rem} .icu-level{grid-template-columns:minmax(0,1fr);gap:0.65rem} .icu-step{grid-template-columns:auto minmax(0,1fr);gap:0.35rem 1rem} .icu-step__ask{grid-column:2} .icu-wm{grid-template-columns:minmax(0,1fr);gap:0.9rem} .icu-wm__body{grid-column:1;grid-row:auto} .icu-wm__title{max-width:26ch} .icu-door{grid-template-columns:auto minmax(0,1fr);gap:0.6rem 1.25rem} .icu-door__body{grid-column:1 / -1;margin-top:0.9rem} .icu-read{grid-template-columns:minmax(0,1fr);gap:0.35rem} } /* ============ 19b. ORDINATEUR PORTABLE PEU HAUT ====================== */ /* Le socle resserre deja les respirations du heros sous 800 px de hauteur. On resserre ici celles du mecanisme, jamais la taille de ses libelles : sur un 1280 x 720, la conclusion du mecanisme doit rester au dessus de la ligne de flottaison, avec les cinq temps. */ @media(min-width:1081px) and (max-height:800px){ .exp-page .icu-mech__svg{height:clamp(76px,11.2vh,112px)} .icu-mech__steps{margin-top:clamp(0.4rem,1vh,0.7rem)} .icu-mech__claim{margin-top:clamp(0.5rem,1.2vh,0.9rem)} } /* ======================= 20. 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 ECARTEMENT de barres qui s'ouvre puis se resserre. L'information est strictement la meme : une meme situation peut produire plusieurs lectures. */ .icu-mech__stage{display:none} .icu-mech__steps{display:block;margin-top:0} .icu-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.8rem; border-top:1px solid rgba(255,255,255,0.16); } .icu-mech__step:first-child{border-top:0;padding-top:0} .icu-mech__spread{ display:block;grid-column:1 / -1; position:relative;height:20px;margin-top:0.45rem; } .icu-mech__spread i{ position:absolute;display:block;height:2px; background:var(--exp-gold); transform-origin:left center; } .icu-mech__spread i:nth-child(1){top:1px} .icu-mech__spread i:nth-child(2){top:7px} .icu-mech__spread i:nth-child(3){top:13px} .icu-mech__spread i:nth-child(4){top:19px} /* 01 Situation : un seul signal. */ .icu-mech__step--1 .icu-mech__spread i:nth-child(1){left:0;width:18%;height:3px} .icu-mech__step--1 .icu-mech__spread i:nth-child(2), .icu-mech__step--1 .icu-mech__spread i:nth-child(3), .icu-mech__step--1 .icu-mech__spread i:nth-child(4){opacity:0;width:0} /* 02 Lectures : quatre trajectoires, ecartees. */ .icu-mech__step--2 .icu-mech__spread i:nth-child(1){left:0;width:44%} .icu-mech__step--2 .icu-mech__spread i:nth-child(2){left:16%;width:48%} .icu-mech__step--2 .icu-mech__spread i:nth-child(3){left:34%;width:52%} .icu-mech__step--2 .icu-mech__spread i:nth-child(4){left:54%;width:46%} /* 03 Verification : deux lectures s'effacent. */ .icu-mech__step--3 .icu-mech__spread i:nth-child(1){left:0;width:44%;opacity:.16} .icu-mech__step--3 .icu-mech__spread i:nth-child(2){left:16%;width:48%} .icu-mech__step--3 .icu-mech__spread i:nth-child(3){left:34%;width:52%} .icu-mech__step--3 .icu-mech__spread i:nth-child(4){left:54%;width:46%;opacity:.16} /* 04 Ajustement : ce qui reste se rapproche sans se confondre. */ .icu-mech__step--4 .icu-mech__spread i:nth-child(1), .icu-mech__step--4 .icu-mech__spread i:nth-child(4){opacity:0;width:0} .icu-mech__step--4 .icu-mech__spread i:nth-child(2){left:26%;width:34%} .icu-mech__step--4 .icu-mech__spread i:nth-child(3){left:34%;width:34%} /* 05 Action : un trait tenu, jamais toute la largeur. */ .icu-mech__step--5 .icu-mech__spread i:nth-child(1), .icu-mech__step--5 .icu-mech__spread i:nth-child(3), .icu-mech__step--5 .icu-mech__spread i:nth-child(4){opacity:0;width:0} .icu-mech__step--5 .icu-mech__spread i:nth-child(2){left:30%;width:30%;height:4px} .exp-anim .icu-mech.is-armed .icu-mech__spread i{transform:scaleX(0)} .exp-anim .icu-mech.is-in .icu-mech__spread i{transform:scaleX(1);transition:transform .5s var(--exp-ease)} .exp-anim .icu-mech.is-in .icu-mech__step--1 .icu-mech__spread i{transition-delay:.2s} .exp-anim .icu-mech.is-in .icu-mech__step--2 .icu-mech__spread i{transition-delay:.55s} .exp-anim .icu-mech.is-in .icu-mech__step--3 .icu-mech__spread i{transition-delay:.9s} .exp-anim .icu-mech.is-in .icu-mech__step--4 .icu-mech__spread i{transition-delay:1.25s} .exp-anim .icu-mech.is-in .icu-mech__step--5 .icu-mech__spread i{transition-delay:1.6s} /* Sur telephone, le libelle arrive AVEC son ecartement, pas selon la cadence horizontale de l'ordinateur. */ .exp-anim .icu-mech.is-in .icu-mech__step--1{transition-delay:.2s} .exp-anim .icu-mech.is-in .icu-mech__step--2{transition-delay:.55s} .exp-anim .icu-mech.is-in .icu-mech__step--3{transition-delay:.9s} .exp-anim .icu-mech.is-in .icu-mech__step--4{transition-delay:1.25s} .exp-anim .icu-mech.is-in .icu-mech__step--5{transition-delay:1.6s} .exp-anim .icu-mech.is-armed .icu-mech__claim{transition-delay:2s} .icu-mech__claim{margin-top:1.3rem} .icu-h1{max-width:none} /* `main span` de mobile-premium.css impose `font-size:max(1em,13px)`, donc la taille du H1 : le second mouvement perdrait sa hierarchie. On repasse devant avec trois classes, comme partout ailleurs. */ .icu-h1__second{margin-top:0.14em} .exp-page .exp-shell .icu-h1__second{font-size:0.7em !important} .icu-def__isnt{margin-left:0} .icu-fan__item{gap:0.7rem} .icu-mark{border-left-width:2px} .icu-case-tab{padding:0.75rem 1rem 0.75rem 0;margin-right:1rem} .icu-tool{padding-left:2.2rem} .icu-tool::before{left:0.4rem} .icu-step::before{left:calc(0.4rem - 2.2rem - 4px);width:9px} .icu-door__list--flow li{padding-right:0.6rem;margin-right:0.6rem} .icu-means li{padding-right:0.6rem;margin-right:0.6rem} .icu-hold__list li{padding-right:0.6rem;margin-right:0.6rem} .icu-def__verbs li{padding-right:0.7rem;margin-right:0.7rem} .icu-craft b{display:block;min-width:0;margin-bottom:0.2rem} /* 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 .icu-move__text, .exp-page .exp-shell .icu-level__body p, .exp-page .exp-shell .icu-wm__body p, .exp-page .exp-shell .icu-dim__text, .exp-page .exp-shell .icu-end__sign, .exp-page .exp-shell .icu-mark__after{font-size:16px !important;line-height:1.72 !important} .exp-page .exp-shell .icu-fan__item, .exp-page .exp-shell .icu-def__list li, .exp-page .exp-shell .icu-door__list li, .exp-page .exp-shell .icu-track__steps li, .exp-page .exp-shell .icu-craft li{font-size:16px !important;line-height:1.6 !important} .exp-page .exp-shell .icu-level__ask, .exp-page .exp-shell .icu-case__check, .exp-page .exp-shell .icu-field dd{font-size:17px !important;line-height:1.5 !important} .exp-page .exp-shell .icu-mech__claim{font-size:clamp(1.1rem,4.6vw,1.35rem) !important;line-height:1.45 !important} .exp-page .exp-shell .icu-mech__label{font-size:13.5px !important;letter-spacing:0.14em} .exp-page .exp-shell .icu-mech__n, .exp-page .exp-shell .icu-move__n, .exp-page .exp-shell .icu-step__n, .exp-page .exp-shell .icu-level__n, .exp-page .exp-shell .icu-case-tab__n, .exp-page .exp-shell .icu-read__kind, .exp-page .exp-shell .icu-track__steps b, .exp-page .exp-shell .icu-wm__n{font-size:13px !important} .exp-page .exp-shell .icu-fact__kind, .exp-page .exp-shell .icu-def__kind, .exp-page .exp-shell .icu-hold__kind, .exp-page .exp-shell .icu-dim__kind, .exp-page .exp-shell .icu-move__name, .exp-page .exp-shell .icu-track__name, .exp-page .exp-shell .icu-field dt, .exp-page .exp-shell .icu-craft b{font-size:13.5px !important;letter-spacing:0.14em} .exp-page .exp-shell .icu-case__fact b, .exp-page .exp-shell .icu-case__check b{font-size:12.5px !important;letter-spacing:0.15em} .exp-page .exp-shell .icu-cases__hint, .exp-page .exp-shell .icu-case-tab__name{font-size:13px !important;letter-spacing:0.12em} .exp-page .exp-shell .icu-mark{font-size:clamp(1.45rem,6.4vw,1.95rem) !important;line-height:1.24 !important} .exp-page .exp-shell .icu-fact__text, .exp-page .exp-shell .icu-case__fact{font-size:19px !important;line-height:1.4 !important} .exp-page .exp-shell .icu-def__lead{font-size:20px !important;line-height:1.38 !important} .exp-page .exp-shell .icu-def__verbs, .exp-page .exp-shell .icu-hold__list, .exp-page .exp-shell .icu-means, .exp-page .exp-shell .icu-door__list--flow{font-size:15px !important} .exp-page .exp-shell .icu-hold__list--firm{font-size:16px !important} .exp-page .exp-shell .icu-step__verb{font-size:26px !important;line-height:1.14 !important} .exp-page .exp-shell .icu-step__ask{font-size:16.5px !important;line-height:1.48 !important} .exp-page .exp-shell .icu-level__kind, .exp-page .exp-shell .icu-dim__name, .exp-page .exp-shell .icu-wm__title, .exp-page .exp-shell .icu-read__body h3{font-size:19px !important;line-height:1.24 !important} .exp-page .exp-shell .icu-door__name{font-size:24px !important;line-height:1.14 !important} .exp-page .exp-shell .icu-door__n{font-size:1.5rem !important} .exp-page .exp-shell .icu-door__say, .exp-page .exp-shell .icu-read__body p{font-size:15px !important} .exp-page .exp-shell .icu-track__claim{font-size:17px !important;line-height:1.4 !important} } @media(max-width:640px){ .icu-case-tab{padding-right:0.85rem;margin-right:0.85rem} .icu-read{gap:0.3rem} .icu-move__band{max-width:none} } @media(max-width:420px){ .icu-tool{padding-left:1.9rem} .icu-step::before{left:calc(0.4rem - 1.9rem - 4px)} .icu-door{grid-template-columns:auto minmax(0,1fr);gap:0.5rem 0.9rem} } /* ============ 21. 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 .icu-mech-act, .exp-page .icu-mech__spread i, .exp-page .icu-move__band i, .exp-page .icu-level::before, .exp-page .icu-step::before, .exp-page .icu-wm::before, .exp-page .icu-st-bar, .exp-page .icu-md-band, .exp-page .icu-ray-tip{transform:scaleX(1) !important} .exp-page .icu-st-stop, .exp-page .icu-hd-deflect, .exp-page .icu-mech-check, .exp-page .icu-t2-check{transform:scaleY(1) !important} .exp-page .icu-mech-axis, .exp-page .icu-mech-line, .exp-page .icu-int-direct, .exp-page .icu-int-run, .exp-page .icu-int-lift, .exp-page .icu-ray, .exp-page .icu-st-guess, .exp-page .icu-st-path, .exp-page .icu-hd-rail, .exp-page .icu-hd-flow, .exp-page .icu-md-stem, .exp-page .icu-md-fan, .exp-page .icu-t1-in, .exp-page .icu-t1-loop, .exp-page .icu-t2-in, .exp-page .icu-t2-hyp, .exp-page .icu-t2-keep, .exp-page .icu-t2-act{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .exp-page .icu-mech-station, .exp-page .icu-mech-seed, .exp-page .icu-mech-node, .exp-page .icu-mech-end, .exp-page .icu-mech-gap, .exp-page .icu-mech-drop, .exp-page .icu-mech__step, .exp-page .icu-mech__claim, .exp-page .icu-int-a, .exp-page .icu-int-b, .exp-page .icu-int-brack, .exp-page .icu-int-mark, .exp-page .icu-ray-seed, .exp-page .icu-ray-split, .exp-page .icu-st-check, .exp-page .icu-st-person, .exp-page .icu-hd-end, .exp-page .icu-md-seed, .exp-page .icu-md-fit, .exp-page .icu-md-off, .exp-page .icu-md-gap, .exp-page .icu-t1-seed, .exp-page .icu-t1-node, .exp-page .icu-t1-tick, .exp-page .icu-t1-end, .exp-page .icu-t2-seed, .exp-page .icu-t2-out, .exp-page .icu-t2-node, .exp-page .icu-t2-end{opacity:1 !important;transform:none !important} /* Les etendues volontairement attenuees le restent : elles portent une information (la lecture a ete ecartee), pas un etat d'attente. */ .exp-page .icu-move--4 .icu-move__band i:nth-child(1), .exp-page .icu-move--4 .icu-move__band i:nth-child(4){opacity:.16 !important} .exp-page .icu-move--1 .icu-move__band i:nth-child(2), .exp-page .icu-move--1 .icu-move__band i:nth-child(3), .exp-page .icu-move--1 .icu-move__band i:nth-child(4), .exp-page .icu-move--5 .icu-move__band i:nth-child(1), .exp-page .icu-move--5 .icu-move__band i:nth-child(4), .exp-page .icu-move--6 .icu-move__band i:nth-child(1), .exp-page .icu-move--6 .icu-move__band i:nth-child(3), .exp-page .icu-move--6 .icu-move__band i:nth-child(4){opacity:0 !important} } /* ========================================================================= LES CINQ PERSPECTIVES ------------------------------------------------------------------------- Composition asymetrique, distincte de Culture organisationnelle : une dominante horizontale, une verticale plus intime, un couple secondaire, puis une fermeture calme sur toute la largeur. REGLE DES PHOTOGRAPHIES Aucune de ces cinq images n'est agrandie au-dela de sa definition reelle. Les colonnes ont ete choisies pour que la largeur d'affichage maximale reste sous la largeur native de chaque fichier : P1 1180px natif, affichee au plus ~745px P2 524px natif, affichee au plus ~355px P3 640px natif, affichee au plus ~555px P4 735px natif, affichee au plus ~555px P5 1448px natif, affichee au plus ~520px Les cartes d'une meme rangee partagent exactement la meme hauteur : le lien est une colonne flex, la zone visuelle absorbe le reste. Les ratios natifs etant deja proches a l'interieur de chaque rangee, le recadrage qui en resulte reste leger et ne coupe jamais un sujet principal. ========================================================================= */ .icu-persp{ 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:stretch; } .icu-p{min-width:0} .icu-p--lead{grid-column:span 8} .icu-p--tall{grid-column:span 4} .icu-p--pair{grid-column:span 6} /* Le couple secondaire n'est pas symetrique : la colonne suit la definition reelle de chaque fichier. La consigne (640px natif) recoit cinq colonnes, « tout n'est pas culturel » (735px natif) en recoit sept. Aucune des deux n'est ainsi affichee au-dela de sa definition, et la rangee reste pleine. */ .icu-p--pair:nth-of-type(3){grid-column:span 5} .icu-p--pair:nth-of-type(4){grid-column:span 7} .icu-p--close{grid-column:span 12;margin-top:clamp(.5rem,2vh,1.25rem)} /* Chaque carte remplit la hauteur de sa rangee : jamais de vide sous une carte plus courte que sa voisine. */ .icu-p__link{ display:flex;flex-direction:column;height:100%; text-decoration:none;color:inherit; } .icu-p__visual{ display:block;overflow:hidden;flex:1 1 auto;min-height:0; border-top:2px solid var(--exp-gold);background:var(--exp-deep); } .icu-p__visual img{ display:block;width:100%;height:100%;object-fit:cover;object-position:center; transition:transform .5s var(--exp-ease); } .icu-p__link:hover .icu-p__visual img{transform:scale(1.03)} .icu-p__body{display:block;flex:0 0 auto;padding-top:1.05rem} .icu-p__kind{ display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--exp-gold-ink);margin-bottom:.5rem; } .icu-p__title{ display:block;font-family:'Ibarra Real Nova',Georgia,serif;font-weight:700; font-size:clamp(1.12rem,1rem + .5vw,1.34rem);line-height:1.28; color:var(--exp-navy-deep);margin-bottom:.45rem;transition:color .22s ease; } .icu-p__link:hover .icu-p__title{color:var(--exp-gold-ink)} .icu-p__say{display:block;font-size:.97rem;line-height:1.62;color:var(--exp-ink-dim)} /* La dominante porte un titre plus present ; la verticale reste secondaire. */ .icu-p--lead .icu-p__title{font-size:clamp(1.32rem,1.05rem + .95vw,1.7rem)} .icu-p--tall .icu-p__title{font-size:clamp(1.2rem,1.02rem + .62vw,1.46rem)} /* La fermeture : photographie a gauche, texte a droite, sur toute la largeur. */ .icu-p--close .icu-p__link{ display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr); gap:clamp(1.5rem,3.5vw,2.75rem);align-items:center; } .icu-p--close .icu-p__visual{flex:none;aspect-ratio:1448 / 1086} .icu-p--close .icu-p__body{padding-top:0} .icu-p--close .icu-p__title{font-size:clamp(1.22rem,1.02rem + .7vw,1.5rem)} /* ---- L'assise theorique : un bloc de fond, pas un cours ---- */ .icu-assise{margin-top:clamp(2rem,4vh,2.75rem);padding-top:clamp(1.25rem,3vh,1.75rem); border-top:1px solid var(--exp-rule)} .icu-assise .exp-p{font-size:.97rem;line-height:1.72} .icu-assise b{color:var(--exp-navy-deep);font-weight:600} /* ---- Les deux liens de la conclusion ---- */ .icu-end__links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.75rem} /* ========================= TABLETTE (<= 1080px) ======================== */ @media(max-width:1080px){ /* Deux colonnes reelles : la dominante et la fermeture gardent toute la largeur, la verticale et le couple se partagent la rangee. */ .icu-persp{grid-template-columns:repeat(2,minmax(0,1fr))} .icu-p--lead, .icu-p--close{grid-column:1 / -1} .icu-p--tall, .icu-p--pair, /* les colonnes asymetriques du couple n'existent que sur douze colonnes : leur specificite superieure doit etre neutralisee ici, sinon un span 5 survivrait dans une grille qui n'a plus que deux colonnes. */ .icu-p--pair:nth-of-type(3), .icu-p--pair:nth-of-type(4){grid-column:auto} .icu-p--close .icu-p__link{grid-template-columns:minmax(0,1fr);gap:0} .icu-p--close .icu-p__body{padding-top:1.05rem} } /* ========================= TELEPHONE (<= 900px) ======================== */ @media(max-width:900px){ /* Une seule colonne : chaque photographie reprend son cadrage naturel, plus rien n'a a s'aligner sur une voisine. */ .icu-persp{grid-template-columns:minmax(0,1fr);gap:2.25rem} .icu-p--lead, .icu-p--tall, .icu-p--pair, .icu-p--pair:nth-of-type(3), .icu-p--pair:nth-of-type(4), .icu-p--close{grid-column:auto;max-width:620px;margin-top:0} /* Empilee, une carte ne doit pas depasser la definition de sa photo : le silence (524px natif) serait sinon affiche a 620px, donc agrandi. */ .icu-p--tall{max-width:524px} .icu-p__link{display:block;height:auto} .icu-p__visual{flex:none} .icu-p__visual img{height:auto;object-fit:contain} .icu-p--close .icu-p__visual{aspect-ratio:auto} .exp-page .exp-shell .icu-p__title{font-size:19px !important;line-height:1.28 !important} .exp-page .exp-shell .icu-p__say{font-size:15px !important;line-height:1.6 !important} .exp-page .exp-shell .icu-p__kind{font-size:13px !important;letter-spacing:.16em} } /* Sur les articles Perspectives, la photographie du heros ne depasse jamais la definition reelle de son fichier : chaque figure publie la sienne dans --icu-shot. Sans ce plafond, la photo du silence (524px) s'etalerait sur toute la colonne et deviendrait molle. */ .icu-page .pub-shot{max-width:var(--icu-shot,100%);margin-inline:0}