/* ========================================================================= MOSAICA / ACCUEIL, INTEGRATION ET RETENTION ------------------------------------------------------------------------- Feuille chargee UNIQUEMENT par expertises/accueil-integration-retention.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 Accueil, integration et retention et les compositions propres a ses sections. Prefixe air- exclusivement. Aucune regle .exp-* n'est redefinie : seules des regles contextuelles (`.air-x .exp-y`) et la reprise documentee de `.exp-page svg{height}` pour la bande du heros existent. CE QUI APPARTIENT A CETTE PAGE LA REMONTEE DU PARCOURS. On part de ce qui est visible aujourd'hui, a droite, et la trace se rembobine vers la gauche. Les points de passage apparaissent dans l'ordre de l'analyse, non dans l'ordre du calendrier. Certains sont prepares : un appui les soutient. D'autres ne le sont pas : l'appui manque, un repere reste flou, une responsabilite n'a jamais ete attribuee, et parfois la trace elle meme s'interrompt. QUATRE LANGAGES, QUATRE EXPERTISES cult- une trace unique s'epaissit a force d'etre repetee icu- des trajectoires s'ecartent, puis se recalent partiellement ldr- un point rend d'autres points capables, dans un cadre commun air- une trace se parcourt a l'envers et decouvre ses appuis manquants Aucun dessin n'est partage entre ces quatre pages. Ici, et ici seulement, le trace se lit de droite a gauche. VOCABULAIRE GRAPHIQUE situation visible un carre plein, a l'extreme droite : le resultat remontee une trace qui se dessine vers la gauche, a l'envers point de passage un moment du parcours ; plein s'il a ete structure point ouvert un moment ou rien n'a ete attribue a personne appui une barre courte au dessus du point : ce qui l'a rendu possible ; pointillee lorsque le repere est reste flou lien le trait vertical qui relie l'appui au point rupture un vide dans la trace : rien n'a ete transmis 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. La remontee du heros dure environ 4,2 s et ne se joue qu'une fois. ========================================================================= */ /* =========== 1. LE MECANISME DE REMONTEE (HEROS) ===================== */ .air-mech{margin:0} .air-mech__stage{position:relative} /* AUCUNE HAUTEUR N'EST IMPOSEE ICI, ET C'EST VOLONTAIRE. Forcer une hauteur plus courte que le rapport du viewBox ferait entrer `preserveAspectRatio` en jeu : le dessin serait reduit et centre dans sa boite, et les six libelles HTML — qui occupent, eux, toute la largeur — ne tomberaient plus sous leurs six stations. Le viewBox est donc choisi tres plat (1160 x 100) pour que sa hauteur naturelle suffise : la coquille commune est bornee a 1240px, la bande ne depasse jamais 98px de haut, quelle que soit la largeur de l'ecran ou le niveau de zoom. Le socle fournit deja `width:100%;height:auto`. */ /* La trace remontee. Elle est la seule ligne doree epaisse de la bande : c'est le chemin que l'analyse reparcourt. */ .air-mech-seg{fill:none;stroke:var(--exp-gold);stroke-width:1.7;opacity:.92} /* Le vide de la rupture est borne par deux reperes : on ne dessine pas un symbole d'alerte, on montre l'endroit ou la trace s'arrete. */ .air-mech-break{fill:none;stroke:var(--exp-gold);stroke-width:1.2;opacity:.5} .air-mech-now{fill:var(--exp-gold)} .air-mech-node{fill:var(--exp-gold)} /* Un point ouvert : le moment existe, mais rien n'y a ete attribue. Son remplissage est celui du fond de la scene, jamais une couleur inventee. */ .air-mech-open{fill:var(--exp-bg);stroke:var(--exp-gold);stroke-width:1.4} .air-mech-hold{fill:var(--exp-gold);opacity:.9} .air-mech-tie{fill:none;stroke:rgba(255,255,255,0.34);stroke-width:1} /* Le repere reste flou : l'appui existe, mais il n'est pas tenu. */ .air-mech-dim{fill:none;stroke:var(--exp-gold);stroke-width:1.2;opacity:.55} /* Le lien qui s'arrete : la responsabilite n'a pas ete attribuee. */ .air-mech-stop{fill:none;stroke:rgba(255,255,255,0.42);stroke-width:1} .air-mech-rail{fill:none;stroke:rgba(255,255,255,0.10);stroke-width:1} /* Les six temps sont du texte HTML, jamais du texte enferme dans le SVG. Sur ordinateur ils s'alignent sous les six points de passage, dans le meme ordre : de la situation visible vers ce qui l'a precedee. */ .air-mech__steps{ list-style:none;margin:clamp(0.4rem,0.9vh,0.7rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:0.55rem; } .air-mech__step{ display:flex;flex-direction:column;align-items:center;gap:0.28rem; text-align:center; } .air-mech__n{ font-size:0.72rem;font-weight:700;letter-spacing:0.1em; color:var(--exp-gold); } .air-mech__label{ font-size:0.74rem;font-weight:700; letter-spacing:0.11em;text-transform:uppercase; color:var(--exp-on-dark);line-height:1.4; } /* La trace verticale du telephone : masquee sur ordinateur, ou le SVG porte deja le mecanisme. */ .air-mech__trace{display:none} /* La legende nomme les trois etats. Une forme et un libelle, jamais une couleur seule. */ .air-mech__keys{ list-style:none;margin:clamp(0.45rem,1.1vh,0.8rem) 0 0;padding:0; display:flex;flex-wrap:wrap;gap:0.35rem 1.6rem; } .air-mech__keys li{ display:flex;align-items:center;gap:0.5rem; font-size:0.82rem;line-height:1.5;color:var(--exp-on-dark-dim); } .air-mech__keys i{flex:none;width:11px;height:11px;background:var(--exp-gold)} .air-mech__keys i.is-open{ background:transparent;border:1.5px solid var(--exp-gold);border-radius:50%; } .air-mech__keys i.is-gap{ width:26px;height:0;background:none; border-top:1.6px dotted var(--exp-gold); } .air-mech__claim{ margin:clamp(0.5rem,1.1vh,0.85rem) 0 0;padding-left:1.2rem; max-width:none; border-left:2px solid var(--exp-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(0.98rem,0.92rem + 0.34vw,1.14rem); line-height:1.42;color:var(--exp-gold-soft); } /* SEQUENCE : environ 4,2 s, jouee une seule fois, sans boucle. L'ordre est celui du raisonnement. La situation visible apparait d'abord ; chaque segment se dessine ensuite VERS LA GAUCHE, et le point de passage qu'il atteint n'apparait qu'apres lui. Les appuis suivent leur point : le lecteur voit d'abord le moment, puis ce qui le soutenait — ou l'absence de soutien. */ .exp-anim .air-mech.is-in .air-mech-rail{animation:expFade 420ms ease 100ms both} .exp-anim .air-mech.is-in .air-mech-now{transform-box:fill-box;transform-origin:center;animation:expPop 320ms ease 260ms both} .exp-anim .air-mech.is-in .air-mech-seg{stroke-dasharray:var(--exp-len,200);animation:expDraw 460ms var(--exp-ease) both} .exp-anim .air-mech.is-in .air-mech-seg--1{animation-delay:600ms} .exp-anim .air-mech.is-in .air-mech-seg--2{animation-delay:1160ms} .exp-anim .air-mech.is-in .air-mech-seg--3{animation-delay:1720ms} .exp-anim .air-mech.is-in .air-mech-seg--4a{animation-delay:2280ms;animation-duration:300ms} .exp-anim .air-mech.is-in .air-mech-seg--4b{animation-delay:2760ms;animation-duration:300ms} .exp-anim .air-mech.is-in .air-mech-seg--5{animation-delay:3200ms} .exp-anim .air-mech.is-in .air-mech-seg--6{animation-delay:3760ms;animation-duration:560ms} /* Chaque point de passage apparait APRES le segment qui l'a atteint. */ .exp-anim .air-mech.is-in .air-mech-node, .exp-anim .air-mech.is-in .air-mech-open{transform-box:fill-box;transform-origin:center;animation:expPop 260ms ease both} .exp-anim .air-mech.is-in .air-mech-open--2{animation-delay:1020ms} .exp-anim .air-mech.is-in .air-mech-node--3{animation-delay:1580ms} .exp-anim .air-mech.is-in .air-mech-node--4{animation-delay:2140ms} .exp-anim .air-mech.is-in .air-mech-node--5{animation-delay:3020ms} .exp-anim .air-mech.is-in .air-mech-node--6{animation-delay:3620ms} .exp-anim .air-mech.is-in .air-mech-break{animation:expFade 300ms ease 2600ms both} /* Puis, apres le point, ce qui le soutenait — ou l'absence de soutien. */ .exp-anim .air-mech.is-in .air-mech-tie{stroke-dasharray:var(--exp-len,32);animation:expDraw 300ms var(--exp-ease) both} .exp-anim .air-mech.is-in .air-mech-hold{transform-box:fill-box;transform-origin:center;animation:expGrowX 300ms var(--exp-ease) both} .exp-anim .air-mech.is-in .air-mech-stop{stroke-dasharray:var(--exp-len,40);animation:expDraw 300ms var(--exp-ease) 1180ms both} .exp-anim .air-mech.is-in .air-mech-dim{animation:expFade 320ms ease 3180ms both} .exp-anim .air-mech.is-in .air-mech-tie--3{animation-delay:1740ms} .exp-anim .air-mech.is-in .air-mech-hold--3{animation-delay:1960ms} .exp-anim .air-mech.is-in .air-mech-tie--4{animation-delay:2300ms} .exp-anim .air-mech.is-in .air-mech-hold--4{animation-delay:2520ms} .exp-anim .air-mech.is-in .air-mech-tie--6{animation-delay:3780ms} .exp-anim .air-mech.is-in .air-mech-hold--6{animation-delay:4000ms} .exp-anim .air-mech.is-armed .air-mech__step{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--exp-ease)} .exp-anim .air-mech.is-in .air-mech__step{opacity:1;transform:none} .exp-anim .air-mech.is-in .air-mech__step--1{transition-delay:.3s} .exp-anim .air-mech.is-in .air-mech__step--2{transition-delay:1.06s} .exp-anim .air-mech.is-in .air-mech__step--3{transition-delay:1.62s} .exp-anim .air-mech.is-in .air-mech__step--4{transition-delay:2.18s} .exp-anim .air-mech.is-in .air-mech__step--5{transition-delay:3.1s} .exp-anim .air-mech.is-in .air-mech__step--6{transition-delay:3.66s} .exp-anim .air-mech.is-armed .air-mech__keys{opacity:0;transition:opacity .5s ease 4.4s} .exp-anim .air-mech.is-in .air-mech__keys{opacity:1} .exp-anim .air-mech.is-armed .air-mech__claim{opacity:0;transform:translateY(10px);transition:opacity .6s ease 4.6s,transform .6s var(--exp-ease) 4.6s} .exp-anim .air-mech.is-in .air-mech__claim{opacity:1;transform:none} /* Le titre porte deux negations symetriques : il lui faut une mesure plus large que la mesure par defaut de la famille pour tenir en trois lignes au lieu de cinq. Sur ecran peu haut, c'est cette largeur, et non la taille du texte, qui garde le premier ecran complet. */ .air-h1{ max-width:min(96%,42ch); font-size:clamp(1.9rem,1rem + 2.85vw,3.55rem); } /* Ordinateur portable peu haut. Le socle resserre deja les respirations du heros ; on resserre ici les trois seules qui appartiennent au mecanisme, pour que la legende et le claim entrent dans le premier ecran a 1280 x 720 comme a 1366 x 768. On ne touche ni a la taille des textes, ni a la hauteur de la bande : c'est l'espace entre les blocs qui cede d'abord. */ @media(min-width:1081px) and (max-height:760px){ .air-mech__steps{margin-top:0.3rem} .air-mech__keys{margin-top:0.35rem} .air-mech__claim{margin-top:0.4rem} } /* La these de la page, juste sous le titre. C'est elle qui gouverne toute la lecture : elle n'est pas une accroche decorative. */ .air-thesis{ margin:clamp(1rem,2.6vh,1.5rem) 0 clamp(1rem,2.6vh,1.5rem); max-width:36ch; font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.16rem,1.02rem + 0.72vw,1.6rem); line-height:1.34;color:var(--exp-gold-ink); padding-left:clamp(0.9rem,2vw,1.3rem); border-left:2px solid var(--exp-gold); } /* ============ 2. LA DONNEE INTEGRAMETRE ============================= */ /* La donnee est recomposee en HTML/CSS : la capture source n'est jamais publiee. La jauge represente une REPARTITION DE CRITERES, pas une part d'impact — d'ou une barre segmentee et non un compteur de performance. */ .air-data{align-items:center} .air-gauge{ margin:0;padding:clamp(1.5rem,3.5vw,2.25rem); background:var(--exp-surface); border-top:3px solid var(--exp-gold); } .air-gauge__fig{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 0.7rem} .air-gauge__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(3rem,2rem + 4.2vw,5.4rem); line-height:0.95;color:var(--exp-navy-deep); } .air-gauge__unit{ font-size:0.9rem;line-height:1.4;color:var(--exp-ink-dim); max-width:12ch; } /* La barre : 52 criteres a gauche, 18 a droite, une seule coupure. */ .air-gauge__bar{ position:relative;height:10px;margin:clamp(1.25rem,3vh,1.75rem) 0 1rem; background:var(--exp-stroke-soft); } .air-gauge__before{ position:absolute;inset:0 auto 0 0; width:var(--part,74%); background:var(--exp-gold); } .exp-anim .is-in .air-gauge__before{ transform-origin:left center; animation:expGrowX 900ms var(--exp-ease) 200ms both; } .air-gauge__legend{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem} .air-gauge__legend li{ display:flex;align-items:baseline;gap:0.6rem; font-size:0.92rem;line-height:1.5;color:var(--exp-ink-dim); } .air-gauge__legend i{ flex:none;width:12px;height:12px; background:var(--exp-gold);transform:translateY(1px); } .air-gauge__legend i.is-after{background:var(--exp-stroke-soft)} .air-gauge__legend b{color:var(--exp-ink);font-weight:600} .air-gauge figcaption{ margin-top:1.1rem;padding-top:0.85rem; border-top:1px solid var(--exp-rule); font-size:0.82rem;line-height:1.5;color:var(--exp-ink-dim); } /* ============ 3. LE PARCOURS EN SIX TEMPS =========================== */ /* Six etapes lues comme une progression continue. Le filet dore du bord haut marque le passage du temps ; le sixieme temps le prolonge, parce que l'ancrage n'a pas de fin nette. */ .air-path{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; } .air-path__step{ min-width:0;position:relative; padding:1.05rem clamp(0.75rem,1.6vw,1.35rem) 0.4rem 0; border-top:2px solid var(--exp-gold); } .air-path__step + .air-path__step{ padding-left:clamp(0.75rem,1.6vw,1.35rem); border-left:1px solid var(--exp-rule); } /* Les deux premiers temps sont ceux que les organisations sautent : ils gardent le filet plein, les suivants s'attenuent legerement. */ .air-path__step:nth-child(n+3){border-top-color:var(--exp-stroke-soft)} .air-path__n{ display:block; font-size:0.72rem;font-weight:700;letter-spacing:0.16em; color:var(--exp-gold-ink);margin-bottom:0.45rem; } .air-path__name{ margin:0 0 0.4rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1rem,0.94rem + 0.32vw,1.18rem); line-height:1.2;color:var(--exp-navy-deep); } .air-path__say{margin:0;font-size:0.89rem;line-height:1.55;color:var(--exp-ink-dim)} /* Les deux preuves documentaires. La bande large et la capture compacte ne sont jamais mises au meme format : chacune garde le sien. */ .air-proofs{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3rem); align-items:start; margin-top:clamp(2.25rem,5.5vh,3.5rem); } .air-proof{margin:0} .air-proof img{ display:block;width:100%;height:auto; border-top:2px solid var(--exp-gold); } /* La capture de visioconference est de faible definition : elle ne depasse jamais sa taille source. */ .air-proof--screen img{max-width:519px} .air-proof figcaption{ margin-top:0.85rem; font-size:0.87rem;line-height:1.58;color:var(--exp-ink-dim);max-width:54ch; } /* ============ 4. PREPARER LES DEUX COTES ============================ */ .air-sides{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem); } .air-side{min-width:0;padding-top:1rem;border-top:2px solid var(--exp-gold)} .air-side__n{ display:block; font-size:0.72rem;font-weight:700;letter-spacing:0.16em; color:var(--exp-gold-ink);margin-bottom:0.5rem; } .air-side__who{ margin:0 0 0.5rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.1rem,1rem + 0.42vw,1.32rem); line-height:1.2;color:var(--exp-navy-deep); } .air-side__say{margin:0;font-size:0.93rem;line-height:1.6;color:var(--exp-ink-dim)} /* ============ 5-6. LES DEUX GRANDES PREUVES PHOTOGRAPHIQUES ========= */ /* Une photo est une preuve, pas une vignette. Aucun texte n'est pose sur un visage. Le seul ornement est le filet dore du bord haut. Contrairement a la version precedente de cette page, l'image n'est plus recadree par `object-fit: cover` : elle garde son ratio d'origine et c'est la COMPOSITION qui s'ajuste a la photo. */ .air-shot{ display:grid; grid-template-columns:minmax(0,0.52fr) minmax(0,0.48fr); gap:clamp(1.75rem,4vw,3.25rem); align-items:center; } .air-shot--flip{grid-template-columns:minmax(0,0.5fr) minmax(0,0.5fr)} .air-shot--flip .air-shot__media{order:2} .air-shot__media{margin:0} .air-shot__media img{ display:block;width:100%;height:auto; border-top:2px solid var(--exp-gold); } .air-shot__media figcaption{ margin-top:0.85rem; font-size:0.88rem;line-height:1.58; color:var(--exp-ink-dim);max-width:56ch; } [data-exp-theme="deep"] .air-shot__media figcaption{color:var(--exp-on-dark-dim)} .air-shot__body .exp-eyebrow{margin-bottom:0.9rem} .air-shot__body .exp-h2{margin-bottom:1rem} .air-shot__body .exp-p + .exp-p{margin-top:0.85rem} .air-shot__body .exp-strong{margin-top:1.35rem} /* ============ 7. ECHELLE ET TERRITOIRE ============================== */ .air-scale{ list-style:none;margin:clamp(2rem,5vh,2.75rem) 0 0;padding:0; display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(1.75rem,3.5vw,3rem); } .air-scale__item{min-width:0;padding-top:0.95rem;border-top:2px solid var(--exp-gold)} .air-scale__fig{ display:block; font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.7rem,1.15rem + 1.9vw,2.7rem); line-height:1.08;color:var(--exp-navy-deep); margin-bottom:0.6rem; } .air-scale__say{display:block;font-size:0.98rem;line-height:1.6;color:var(--exp-ink-dim)} /* ============ 8. LES TROIS COUCHES DE L'ANCRAGE ===================== */ /* Trois couches emboitees : chacune est decalee d'un cran vers la droite, parce qu'elle englobe la precedente sans la remplacer. */ .air-layers{ list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0; } .air-layer{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.3rem clamp(1rem,2.5vw,1.75rem); align-items:baseline; padding-block:clamp(1.1rem,2.8vh,1.6rem); border-top:1px solid var(--exp-rule); } .air-layer:last-child{border-bottom:1px solid var(--exp-rule)} .air-layer:nth-child(2){padding-left:clamp(1rem,3vw,2.5rem)} .air-layer:nth-child(3){padding-left:clamp(2rem,6vw,5rem)} .air-layer__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.2rem,1rem + 0.7vw,1.6rem); line-height:1;color:var(--exp-gold-ink); } .air-layer__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.2rem,1.02rem + 0.7vw,1.55rem); line-height:1.16;color:var(--exp-navy-deep); } .air-layer__say{ grid-column:2;margin:0.3rem 0 0; font-size:0.98rem;line-height:1.6;color:var(--exp-ink-dim);max-width:52ch; } /* Le bloc conference : format documentaire compact, jamais une banniere. */ .air-talk{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.25rem,3vw,2.25rem); align-items:center; margin-top:clamp(2.25rem,5.5vh,3.5rem); padding-top:clamp(1.5rem,4vh,2.25rem); border-top:1px solid var(--exp-rule); } .air-talk__media{margin:0;flex:none} .air-talk__media img{ display:block;width:230px;max-width:100%;height:auto; border-top:2px solid var(--exp-gold); } .air-talk__title{ margin:0 0 0.6rem; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.14rem,1.02rem + 0.5vw,1.4rem); line-height:1.25;color:var(--exp-navy-deep); } .air-talk__say{ margin:0 0 1.1rem; font-size:0.97rem;line-height:1.62;color:var(--exp-ink-dim);max-width:60ch; } /* ============ 9. LES CINQ PERSPECTIVES ============================== */ /* Grille de douze colonnes, deux rangees de formats differents. Chaque bloc est dimensionne pour la definition reelle de sa photographie : rangee 1 lead 7 (984 px) + figure 5 (1255 px) rangee 2 wide 5 (985 px) + band 4 (842 px) + compact 3 (519 px) La bande de 842 x 243 reste une bande ; la capture de 519 x 190 n'est jamais agrandie au-dela de sa largeur source. */ .air-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; } .air-card{min-width:0} .air-card--lead{grid-column:span 7} .air-card--figure{grid-column:span 5} .air-card--wide{grid-column:span 5} .air-card--band{grid-column:span 4} .air-card--compact{grid-column:span 3} .air-card__link{display:block;height:100%;text-decoration:none;color:inherit} .air-card__visual{ display:block;overflow:hidden; border-top:2px solid var(--exp-gold);background:var(--exp-deep); } .air-card__visual img{ display:block;width:100%;height:auto; transition:transform .5s var(--exp-ease); } .air-card__link:hover .air-card__visual img{transform:scale(1.03)} .air-card--compact .air-card__visual img{max-width:519px} .air-card__body{display:block;padding-top:1.05rem} .air-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; } .air-card__title{ display:block; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.1rem,1rem + 0.42vw,1.3rem); line-height:1.28;color:var(--exp-navy-deep);margin-bottom:0.45rem; transition:color .22s ease; } .air-card__link:hover .air-card__title{color:var(--exp-gold-ink)} .air-card__say{display:block;font-size:0.95rem;line-height:1.6;color:var(--exp-ink-dim)} .air-card--lead .air-card__title{font-size:clamp(1.32rem,1.05rem + 0.95vw,1.7rem)} .air-card--figure .air-card__title{font-size:clamp(1.2rem,1.02rem + 0.62vw,1.46rem)} .air-card--compact .air-card__title{font-size:clamp(1.04rem,0.98rem + 0.3vw,1.16rem)} .air-card--compact .air-card__say{font-size:0.9rem} .air-cards__more{margin:clamp(2rem,5vh,2.75rem) 0 0} /* ============ 10. TROIS PORTES ET CONCLUSION ======================== */ /* La signature methodologique : quatre verbes, une phrase. Le protocole complet n'est pas publie. */ .air-method{ margin:clamp(1.25rem,3vh,1.75rem) 0 0; padding-top:1rem;border-top:1px solid var(--exp-rule-dark); font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.02rem,0.96rem + 0.3vw,1.2rem); line-height:1.42;color:#fff; } .air-method span{ display:block;margin-top:0.45rem; font-family:'Space Grotesk',sans-serif;font-weight:400; font-size:0.92rem;line-height:1.6;color:var(--exp-on-dark-dim); } .air-doors{list-style:none;margin:clamp(2rem,5vh,3rem) 0 0;padding:0} .air-door{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.35rem clamp(1rem,2.5vw,2rem); align-items:baseline; padding-block:clamp(1.35rem,3.5vh,2.1rem); border-top:1px solid var(--exp-rule-dark); } .air-door:last-child{border-bottom:1px solid var(--exp-rule-dark)} .air-door__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.5rem,1.15rem + 1.2vw,2.15rem); line-height:1;color:var(--exp-gold); } .air-door__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem); line-height:1.14;color:#fff; } .air-door__say{ grid-column:2;margin:0.4rem 0 0; font-size:1rem;line-height:1.62;color:var(--exp-on-dark-dim);max-width:56ch; } .air-end{position:relative} .air-end__sign{ margin:clamp(2rem,5vh,3rem) 0 0; max-width:46ch; font-family:'Ibarra Real Nova',serif;font-weight:600; font-size:clamp(1.24rem,1.05rem + 0.95vw,1.85rem); line-height:1.32;color:#fff; } .air-end__links{ display:flex;flex-wrap:wrap;align-items:center; gap:0.9rem 1.9rem;margin:clamp(1.6rem,4vh,2.4rem) 0 0; } /* ====================== 11. TABLETTE (<= 1080px) ==================== */ @media(max-width:1080px){ .air-data{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .air-gauge{max-width:560px} .air-path{grid-template-columns:repeat(3,minmax(0,1fr))} .air-path__step{padding-right:clamp(0.75rem,2vw,1.25rem)} .air-path__step + .air-path__step{border-left:0;padding-left:0} .air-path__step:not(:nth-child(3n+1)){ padding-left:clamp(0.75rem,2vw,1.25rem); border-left:1px solid var(--exp-rule); } .air-proofs{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .air-proof--band, .air-proof--screen{max-width:760px} .air-sides{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.35rem,3vw,2rem)} .air-shot, .air-shot--flip{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .air-shot--flip .air-shot__media{order:0} .air-shot__media{max-width:760px} .air-scale{grid-template-columns:minmax(0,1fr);gap:0} .air-scale__item{padding-block:1.1rem 0.5rem} .air-scale__item:first-child{padding-top:0.95rem} .air-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .air-card, .air-card--lead, .air-card--figure, .air-card--wide, .air-card--band, .air-card--compact{grid-column:auto} } /* ======================= 12. 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 descend d'une etape a l'autre. */ .air-mech__stage{display:none} .air-mech__steps{display:block;margin-top:0} .air-mech__step{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline;gap:0.3rem 0.9rem; text-align:left; padding-block:0.75rem; border-top:1px solid rgba(255,255,255,0.16); } .air-mech__step:first-child{border-top:0;padding-top:0} .air-mech__trace{ display:block;grid-column:1 / -1; position:relative;height:18px;margin-top:0.4rem; } .air-mech__trace::before{ content:"";position:absolute;left:0;top:8px; width:100%;height:1px;background:var(--exp-gold);opacity:.5; } .air-mech__claim{margin-top:1.25rem} .air-mech__keys{margin-top:1rem} /* Sur telephone, le socle rend deja le titre du heros pleine largeur. */ .air-h1{max-width:none} .air-thesis{max-width:none} .air-path{grid-template-columns:minmax(0,1fr)} .air-path__step, .air-path__step + .air-path__step{ padding:0.95rem 0 0.5rem;border-left:0; } .air-sides{grid-template-columns:minmax(0,1fr);gap:0} .air-side{padding-block:1.05rem 0.4rem} .air-side:first-child{padding-top:0} .air-layer:nth-child(2), .air-layer:nth-child(3){padding-left:0} .air-talk{grid-template-columns:minmax(0,1fr);gap:1.25rem} .air-talk__media img{width:200px} .air-cards{grid-template-columns:minmax(0,1fr)} .air-card--compact .air-card__visual img{max-width:519px} .air-door{grid-template-columns:auto minmax(0,1fr)} .air-end__sign{max-width:none} .air-gauge{padding:1.25rem} /* Reprise de la hierarchie typographique face a mobile-premium.css. Meme regle que dans expertises-identite.css : trois classes pour depasser, jamais un !important arbitraire. */ .exp-page .exp-shell .air-path__say, .exp-page .exp-shell .air-side__say, .exp-page .exp-shell .air-layer__say, .exp-page .exp-shell .air-door__say, .exp-page .exp-shell .air-card__say, .exp-page .exp-shell .air-scale__say, .exp-page .exp-shell .air-talk__say{font-size:16px !important;line-height:1.6 !important} .exp-page .exp-shell .air-end__sign{font-size:20px !important;line-height:1.4 !important} .exp-page .exp-shell .air-mech__claim{font-size:clamp(1.05rem,4.4vw,1.3rem) !important;line-height:1.44 !important} .exp-page .exp-shell .air-mech__label{font-size:13.5px !important;letter-spacing:0.13em} .exp-page .exp-shell .air-mech__n, .exp-page .exp-shell .air-path__n, .exp-page .exp-shell .air-side__n, .exp-page .exp-shell .air-card__kind{font-size:12.5px !important} .exp-page .exp-shell .air-path__name, .exp-page .exp-shell .air-side__who, .exp-page .exp-shell .air-card__title, .exp-page .exp-shell .air-talk__title{font-size:19px !important;line-height:1.24 !important} .exp-page .exp-shell .air-card--lead .air-card__title{font-size:22px !important} .exp-page .exp-shell .air-layer__name{font-size:21px !important;line-height:1.16 !important} .exp-page .exp-shell .air-door__name{font-size:22px !important;line-height:1.14 !important} .exp-page .exp-shell .air-door__n{font-size:1.4rem !important} .exp-page .exp-shell .air-gauge__n{font-size:52px !important;line-height:0.95 !important} .exp-page .exp-shell .air-scale__fig{font-size:26px !important;line-height:1.14 !important} .exp-page .exp-shell .air-thesis{font-size:18px !important;line-height:1.36 !important} .exp-page .exp-shell .air-method{font-size:17px !important;line-height:1.4 !important} .exp-page .exp-shell .air-method span{font-size:15px !important;line-height:1.6 !important} .exp-page .exp-shell .air-gauge__legend li, .exp-page .exp-shell .air-gauge figcaption, .exp-page .exp-shell .air-proof figcaption, .exp-page .exp-shell .air-shot__media figcaption{font-size:14.5px !important;line-height:1.58 !important} } @media(max-width:420px){ .air-door{gap:0.3rem 0.85rem} .air-gauge__fig{gap:0 0.5rem} } /* ============ 13. 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 .air-gauge__before{transform:scaleX(1) !important;animation:none !important} .exp-page .air-mech-seg, .exp-page .air-mech-tie, .exp-page .air-mech-stop{stroke-dasharray:none !important;stroke-dashoffset:0 !important} .exp-page .air-mech-rail, .exp-page .air-mech-hold, .exp-page .air-mech-node, .exp-page .air-mech-open, .exp-page .air-mech-now, .exp-page .air-mech-break, .exp-page .air-mech-dim, .exp-page .air-mech__step, .exp-page .air-mech__claim{opacity:1 !important;transform:none !important} .exp-page .air-card__visual img{transform:none !important} } /* ============ 14. VISUELS DES PAGES PERSPECTIVES ==================== */ /* Ces regles servent aux articles de perspectives/accueil-integration- retention/, qui chargent cette meme feuille apres perspectives-article.css. Elles ne font que BORNER la largeur d'un visuel de heros : aucune image n'est recadree, etiree ni agrandie au-dela de sa definition source. */ .air-hero-photo--screen img{max-width:519px} .air-hero-photo--screen figcaption{max-width:48ch}