/* ========================================================================== CORTEX IMPACT — Pages d'expertise : gabarit PREMIUM Reprise VERBATIM du bloc page-scoped .exp-prem de la page de référence /expertises/systemes-execution/ (hero cinématique + cartes verre dépoli, fil sticky, mot « Expertise » épinglé, tuiles à dégradé 3D + checklists, moment cinématique sticky, cellules numérotées, grille « Pour qui »). Rendue partagée par les 10 pages — aucune modification des valeurs. ========================================================================== */ /* ÉCLAT — hero cinématique : Ken Burns + grade + H1 monumental */ @keyframes kbInPrem{from{transform:scale(1.3)}to{transform:scale(1)}} .exp-prem .fhero-bg img{animation:kbInPrem 5s var(--f-ease-expo) both;filter:contrast(1.16) saturate(.58) brightness(.8)} @media(prefers-reduced-motion:reduce){.exp-prem .fhero-bg img{animation:none}} .exp-prem .fhero-img h1{font-size:clamp(2.7rem,7.7vw,6.6rem);letter-spacing:-.05em;line-height:.9;max-width:16ch} .exp-prem .fhero{padding-bottom:clamp(90px,10vw,140px)} .exp-prem .hero-cards{max-width:none} .exp-prem .hcard .k .dt{width:7px;height:7px;border-radius:50%;background:var(--f-orange);display:inline-block} /* FIL DE NAVIGATION STICKY */ .exp-prem .sf-nav{position:sticky;top:clamp(56px,7vh,72px);z-index:40; background:rgba(13,22,35,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-top:1px solid var(--f-glass-bd);border-bottom:1px solid var(--f-glass-bd)} .exp-prem .sf-nav-in{display:flex;gap:clamp(1.1em,3vw,2.6em);justify-content:center;flex-wrap:wrap;padding:1.05em 1em;max-width:1200px;margin:0 auto} .exp-prem .sf-nav a{font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase; color:var(--f-silver);text-decoration:none;padding:.35em 0;border-bottom:2px solid transparent;transition:color .2s var(--f-ease),border-color .2s var(--f-ease)} .exp-prem .sf-nav a:hover,.exp-prem .sf-nav a.on{color:var(--f-orange);border-color:var(--f-orange)} /* EXPERTISE — le mot « Expertise » arrive plein cadre, se fige (pinned) et se dissout pendant que les blocs montent */ .exp-prem #expertise{position:relative;padding-top:0;overflow:visible}/* overflow visible = sticky opérant ; le mot reste clippé par .xpin-bg */ .exp-prem .xpin-bg{position:sticky;top:0;height:100vh;z-index:0; display:grid;align-content:center;justify-items:center;text-align:center; overflow:hidden;pointer-events:none;padding:0 4vw;will-change:opacity} @media(max-width:600px){.exp-prem .xpin-bg{height:76vh}} .exp-prem .xw-t{margin:0;font-family:var(--serif);font-weight:400;white-space:nowrap; font-size:clamp(3rem,12.5vw,10.5rem);line-height:.98;letter-spacing:-.005em; color:var(--f-orange);opacity:.72;will-change:transform} .exp-prem #expertise .fwrap{position:relative;z-index:1} .exp-prem .xgrid{position:relative;z-index:1;padding-top:clamp(3em,9vh,8em);padding-bottom:clamp(1em,4vh,3em)} .exp-prem .xb{display:flex;flex-direction:column;gap:clamp(1.3em,2.4vw,1.9em)} .exp-prem .xb+.xb{margin-top:clamp(2.6em,7vw,4.5em)} .exp-prem .xb-body{max-width:46ch} @media(min-width:900px){ .exp-prem .xb{width:52%} .exp-prem .xb.r{margin-left:48%} .exp-prem .xb+.xb{margin-top:0} .exp-prem .xb:nth-child(2){margin-top:-4em} .exp-prem .xb:nth-child(3){margin-top:2em} .exp-prem .xb:nth-child(4){margin-top:-4em} } .exp-prem .sf-visual{position:relative;border-radius:24px;overflow:hidden;isolation:isolate; min-height:clamp(230px,32vh,330px);display:grid;place-items:center; box-shadow:0 44px 96px -52px rgba(6,12,22,.85);will-change:transform;transform-style:preserve-3d} .exp-prem .sf-visual .sf-tex{position:absolute;inset:0;z-index:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px} .exp-prem .sf-visual .sf-num{position:absolute;top:.28em;left:.5em;z-index:1;font-family:var(--sans);font-weight:800; font-size:clamp(3.4rem,7vw,5.6rem);line-height:1;color:rgba(255,255,255,.13);letter-spacing:-.04em} .exp-prem .sf-visual .sf-badge{position:relative;z-index:2;font-family:var(--sans);font-weight:800;text-transform:uppercase; letter-spacing:.015em;font-size:clamp(1.25rem,2.3vw,1.95rem);line-height:1.08;color:#fff;text-align:center;padding:0 1.1em;max-width:14ch} .exp-prem .sf-visual.v1{background:radial-gradient(92% 120% at 16% 12%,rgba(255,158,27,.9),rgba(255,158,27,0) 46%),linear-gradient(152deg,#1B3050,#0B1420 74%)} .exp-prem .sf-visual.v2{background:radial-gradient(92% 120% at 16% 12%,rgba(64,128,190,.85),rgba(64,128,190,0) 46%),linear-gradient(152deg,#14253C,#0B1420 76%)} .exp-prem .sf-visual.v3{background:radial-gradient(92% 120% at 16% 12%,rgba(42,158,146,.8),rgba(42,158,146,0) 46%),linear-gradient(152deg,#10242C,#0A121D 76%)} .exp-prem .sf-visual.v4{background:radial-gradient(92% 120% at 16% 12%,rgba(255,181,90,.72),rgba(255,181,90,0) 44%),linear-gradient(152deg,#101B2B,#0A121D)} .exp-prem .sf-lead{font-family:var(--serif);font-size:clamp(1.05rem,1.2vw,1.25rem);line-height:1.5;color:var(--f-white);margin:0 0 1.2em;max-width:42ch} .exp-prem .sf-check{list-style:none;margin:0;padding:0;display:grid;gap:.85em} .exp-prem .sf-check li{position:relative;padding-left:2.1em;font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--f-white);line-height:1.35} .exp-prem .sf-check li .d{font-family:var(--serif);font-weight:400;color:var(--f-silver)} .exp-prem .sf-check li::before{content:"";position:absolute;left:0;top:.02em;width:1.4em;height:1.4em;border-radius:50%;background:rgba(255,158,27,.14);border:1px solid rgba(255,158,27,.42)} .exp-prem .sf-check li::after{content:"";position:absolute;left:.44em;top:.34em;width:.46em;height:.26em;border-left:2.2px solid var(--f-orange);border-bottom:2.2px solid var(--f-orange);transform:rotate(-45deg)} /* DIFFÉRENCE — moment cinématique sticky */ .exp-prem .cine{position:relative;height:200vh;background:var(--f-navy-3)} .exp-prem .cine-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--f-navy)} .exp-prem .cine-bg{position:absolute;inset:0;z-index:0} .exp-prem .cine-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);will-change:transform;filter:contrast(1.14) saturate(.55) brightness(.66)} .exp-prem .cine-sticky::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,20,32,.9),rgba(16,27,43,.42) 52%,rgba(16,27,43,.76))} .exp-prem .cine-inner{position:relative;z-index:2;text-align:center;max-width:1040px;padding:0 6vw} .exp-prem .cine-inner .pill{margin-bottom:1.4em} .exp-prem .cine-inner h2{font-size:clamp(2.3rem,6vw,5.2rem);line-height:1;letter-spacing:-.04em;color:#fff;margin:0} .exp-prem .cine-inner h2 .hl{color:var(--f-orange)} /* grille numérotée éditoriale (étapes de la différence) */ .exp-prem .fx-num{display:grid;grid-template-columns:1fr;margin-top:clamp(2.2em,4vw,3.4em)} .exp-prem .fx-cell{display:grid;grid-template-columns:clamp(2.6em,5vw,4rem) 1fr;gap:clamp(1em,2vw,1.6em);align-items:start;padding:clamp(1.5em,2.6vw,2.2em) 0;border-top:1px solid rgba(205,216,228,.14)} .exp-prem .fx-n{font-family:var(--sans);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);line-height:.9;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(255,158,27,.55)} .exp-prem .fx-cell h3{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.12;letter-spacing:-.02em;color:var(--f-white);margin:0} .exp-prem .fx-cell h3 .hl{color:var(--f-orange)} .exp-prem .fx-cell p{font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--f-silver);margin:.5em 0 0;max-width:52ch} /* POUR QUI — panneau glass + liste */ .exp-prem .pq-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6em,3vw,2.6em);margin-top:clamp(2em,3.5vw,3em)} @media(min-width:900px){.exp-prem .pq-grid{grid-template-columns:.9fr 1.1fr;gap:clamp(2.6em,5vw,5em);align-items:start}} .exp-prem .pq-list{list-style:none;margin:0;padding:0;display:grid;gap:1em} .exp-prem .pq-list li{position:relative;padding-left:1.7em;font-family:var(--serif);font-size:clamp(1.08rem,1.3vw,1.32rem);line-height:1.5;color:var(--f-ink)} .exp-prem .sec.dark .pq-list li,.exp-prem .sec.darker .pq-list li{color:var(--f-silver)} .exp-prem .pq-list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--f-orange);box-shadow:0 0 0 4px rgba(255,158,27,.14)} /* — HERO SOLO : le nom de l'expertise, seul et centré (voile symétrique) — */ .exp-prem .fhero-solo{padding-block:clamp(150px,24vh,260px);text-align:center} .exp-prem .fhero-solo .fwrap{display:grid;place-items:center} .exp-prem .fhero-solo h1{max-width:18ch;margin-inline:auto} .exp-prem .fhero-solo.fhero-img::before{ background: linear-gradient(0deg,rgba(11,20,32,.94) 0%,rgba(16,27,43,.40) 46%,rgba(16,27,43,.80) 100%), radial-gradient(72% 62% at 50% 50%,rgba(16,27,43,.34),transparent 72%)} .exp-prem .fhero-solo.fhero-img::after{background:radial-gradient(58% 50% at 50% 4%,rgba(255,158,27,.10),transparent 60%)} /* ========================================================================== GABARIT D'EXPERTISE — V2 (2026-09-06) Le contenu passe de 6 à 8 blocs, dont QUATRE sont « 4 items, un titre, une phrase ». Livrés dans la même grammaire, la page se répète — l'échec déjà consigné au 2026-09-04. Chaque bloc reçoit donc une forme distincte : §1 statement en DEUX REGISTRES (Montserrat + Spectral display) §2 doublet ASYMÉTRIQUE à étiquettes pivotées §3 tuiles JOINTIVES numérotées (Fragment v3) §4 escalier à CONTRASTE D'ÉCHELLE, sans cartes §5 trois énoncés sur photo, pilotés par la TRAVERSÉE (rétention 0) §6 rangées PLEINE LARGEUR qui s'inversent au survol (Fragment v1) ========================================================================== */ /* ---- §1 CONVICTION — rupture de centrage + titre en deux registres ------- */ .exp-prem .cm-cred{max-width:none;margin:0;display:grid;justify-items:start; font-family:var(--sans);font-weight:800;letter-spacing:-.045em;line-height:.94; font-size:clamp(2.15rem,6.4vw,5.35rem);color:var(--f-ink)} .exp-prem .cm-cred .l2{margin-left:clamp(0px,4.2vw,104px)} /* l'écart assumé : Spectral quitte le corps de texte pour le display */ .exp-prem .cm-cred em{font-family:var(--serif);font-style:italic;font-weight:400; letter-spacing:-.015em;color:#A03608} /* 6,03:1 sur #EDEFF4 */ .exp-prem .cm-cred-note{max-width:34ch;margin:clamp(1.6em,3vw,2.4em) 0 0; font-family:var(--serif);font-size:clamp(1.02rem,1.15vw,1.18rem);line-height:1.6;color:var(--f-ink-soft)} @media(min-width:1100px){.exp-prem .cm-cred-note{margin-left:clamp(0px,4.2vw,104px)}} /* ---- §2 DOUBLET — asymétrie 56/44, étiquettes pivotées ------------------- */ .exp-prem .cm-duo{display:grid;gap:clamp(2.4em,5vw,4.4em);grid-template-columns:1fr} @media(min-width:1000px){ .exp-prem .cm-duo{grid-template-columns:1.16fr .84fr;gap:clamp(3em,6vw,6em);align-items:start} .exp-prem .cm-duo .cm-side{position:relative;padding-left:clamp(48px,4.4vw,74px)} .exp-prem .cm-vlabel{position:absolute;left:0;top:0;height:100%;width:0;margin:0} .exp-prem .cm-vlabel span{position:absolute;top:0;left:0;transform-origin:0 0; transform:rotate(90deg) translateY(-100%);white-space:nowrap; font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--f-silver)} .exp-prem .cm-side+.cm-side{border-left:1px solid var(--f-glass-bd)} } @media(max-width:999px){ .exp-prem .cm-vlabel{margin:0 0 1.1em} .exp-prem .cm-vlabel span{font-family:var(--sans);font-weight:700;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:var(--f-silver)} } .exp-prem .cm-do,.exp-prem .cm-get{list-style:none;margin:0;padding:0} /* ce que NOUS faisons : une puce par ligne, alignées, volontairement subordonnées. Le bloc courant à séparateurs « · » se lisait comme une seule masse ; en puces alignées chaque acte se lit, tout en restant sous le registre des résultats. */ .exp-prem .cm-do{display:grid;gap:.78em;max-width:none} .exp-prem .cm-do li{position:relative;padding-left:1.35em; font-family:var(--sans);font-weight:600;line-height:1.35; font-size:clamp(.98rem,1.12vw,1.14rem);color:var(--f-silver)} .exp-prem .cm-do li::before{content:"";position:absolute;left:.1em;top:.58em; width:.34em;height:.34em;border-radius:50%;background:rgba(205,216,228,.55)} /* Les DEUX étiquettes restent en nacre. L'orange y a été essayé le 2026-09-06 puis retiré par le user : « l'orange n'apporte rien ». Le registre de couleur de la section se réduit donc à deux : nacre pour ce qui nomme, orange doré pour les bénéfices — et le bronze du triangle pour les marquer. */ /* ce que VOUS en tirez : moins de place, plus de corps — le contraste est là */ .exp-prem .cm-get{display:grid;gap:clamp(1em,1.9vw,1.45em)} .exp-prem .cm-get li{position:relative;padding-left:1.55em; font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.1; font-size:clamp(1.6rem,2.95vw,2.5rem);color:var(--f-orange-2); /* orange doré */ /* certains bénéfices font 5 lignes (« Fonction juridique / conformité mieux intégrée au business ») : sans équilibrage la coupe est très irrégulière. Aucun
dans ces items, donc `balance` ne peut rien ignorer ici. */ text-wrap:balance} /* Le TRIANGLE DU LOGOTYPE, en bronze (demande user 2026-09-06). Le vert essayé au tour précédent est retiré : il introduisait une 4e couleur, et le triangle dit la même chose en restant dans la marque. ⚠️ Géométrie reprise TELLE QUELLE de `.tri` du socle (styles.css l.121) — chevron pointe à droite, `border-left` plein, haut et bas transparents, proportion 9×12 du `.brand .tri`. Cotée en `em` pour suivre le corps du texte. Bronze #C9A05C = registre « ce qui qualifie ». */ .exp-prem .cm-get li::before{content:"";position:absolute;left:.1em;top:.32em; width:0;height:0; border-left:.3em solid #C9A05C; border-top:.2em solid transparent; border-bottom:.2em solid transparent} /* ---- §3 SAVOIR-FAIRE — tuiles jointives numérotées ---------------------- */ /* le cadre ne doit PAS porter le padding de .xgrid : il tomberait à l'intérieur */ .exp-prem .cm-tiles{display:grid;grid-template-columns:1fr;gap:0; border:1px solid var(--f-glass-bd);border-radius:22px;overflow:hidden; box-shadow:0 54px 120px -60px rgba(6,12,22,.9)} @media(min-width:860px){.exp-prem .cm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}} .exp-prem .cm-tile{position:relative;isolation:isolate; padding:clamp(1.9em,3.2vw,2.9em);border-top:1px solid var(--f-glass-bd); transition:filter .45s var(--f-ease)} .exp-prem .cm-tile:first-child{border-top:0} @media(min-width:860px){ .exp-prem .cm-tile:nth-child(-n+2){border-top:0} .exp-prem .cm-tile:nth-child(2n){border-left:1px solid var(--f-glass-bd)} } .exp-prem .cm-tile .sf-tex{position:absolute;inset:0;z-index:0;opacity:.45; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px} .exp-prem .cm-tile.v1{background:radial-gradient(88% 116% at 12% 8%,rgba(255,158,27,.30),rgba(255,158,27,0) 52%),linear-gradient(152deg,#1B3050,#0B1420 76%)} .exp-prem .cm-tile.v2{background:radial-gradient(88% 116% at 12% 8%,rgba(64,128,190,.30),rgba(64,128,190,0) 52%),linear-gradient(152deg,#14253C,#0B1420 78%)} .exp-prem .cm-tile.v3{background:radial-gradient(88% 116% at 12% 8%,rgba(42,158,146,.28),rgba(42,158,146,0) 52%),linear-gradient(152deg,#10242C,#0A121D 78%)} .exp-prem .cm-tile.v4{background:radial-gradient(88% 116% at 12% 8%,rgba(255,181,90,.26),rgba(255,181,90,0) 50%),linear-gradient(152deg,#101B2B,#0A121D)} @media(hover:hover) and (pointer:fine){.exp-prem .cm-tile:hover{filter:brightness(1.16)}} /* la numérotation est ici un ordinal UTILE : les 4 blocs suivent le cycle de vie du contrat (amont → engagements → gouvernance → variations). Écart nommé au verrou n°3 et au craft-floor, qui admet l'exception « la séquence informe ». */ .exp-prem .cm-tn{position:absolute;z-index:1;top:clamp(.85em,1.5vw,1.25em);right:clamp(.9em,1.6vw,1.35em); font-family:var(--sans);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1; letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px rgba(255,158,27,.5)} .exp-prem .cm-tile h3{position:relative;z-index:1;margin:0 3.2em .95em 0;max-width:none; font-family:var(--sans);font-weight:800;letter-spacing:-.025em;line-height:1.1; font-size:clamp(1.22rem,1.95vw,1.6rem);color:var(--f-white)} .exp-prem .cm-tl{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:.72em} .exp-prem .cm-tl li{position:relative;padding-left:1.5em;max-width:44ch; font-family:var(--serif);font-size:clamp(.99rem,1.1vw,1.08rem);line-height:1.5;color:var(--f-silver)} .exp-prem .cm-tl li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:1px;background:rgba(255,158,27,.75)} /* ---- §4 BÉNÉFICES — escalier, contraste d'échelle, aucune carte --------- */ .exp-prem .cm-steps{list-style:none;margin:clamp(2.2em,4vw,3.4em) 0 0;padding:0;display:grid} .exp-prem .cm-steps li{position:relative;padding:clamp(1.5em,2.8vw,2.3em) 0; border-top:1px solid rgba(16,27,43,.16); display:grid;gap:.4em clamp(1.6em,3.6vw,3.4em);grid-template-columns:1fr; margin-left:calc(var(--i) * clamp(0px,2.9vw,68px))} @media(min-width:900px){.exp-prem .cm-steps li{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:baseline}} .exp-prem .cm-steps h3{margin:0;max-width:none; font-family:var(--sans);font-weight:800;letter-spacing:-.038em;line-height:.98; font-size:clamp(1.72rem,4.1vw,3.35rem);color:var(--f-ink)} .exp-prem .cm-steps p{margin:0;max-width:38ch; font-family:var(--serif);font-size:clamp(1rem,1.12vw,1.14rem);line-height:1.6;color:var(--f-ink-soft)} /* ---- §5 DIFFÉRENCE — trois énoncés sur photo, pilotés par la traversée --- */ .exp-prem .cm-diff{position:relative;overflow:hidden; padding-block:clamp(96px,15vw,210px);background:var(--f-navy-3)} .exp-prem .cm-diff-bg{position:absolute;inset:-6% 0;z-index:0} .exp-prem .cm-diff>.fwrap{position:relative;z-index:2} .exp-prem .cm-diff-bg img{width:100%;height:100%;object-fit:cover; filter:contrast(1.16) saturate(.5) brightness(.5);will-change:transform} .exp-prem .cm-diff::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(96deg,rgba(9,17,28,.92) 0%,rgba(9,17,28,.86) 46%,rgba(11,20,32,.66) 100%)} .exp-prem .cm-diff-k{margin:0 0 clamp(1.5em,3vw,2.4em);max-width:none; font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.24em; text-transform:uppercase;color:var(--f-orange)} .exp-prem .cm-diff-l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.35em,1vw,.7em)} .exp-prem .cm-diff-l li{font-family:var(--sans);font-weight:800;letter-spacing:-.042em; line-height:1.0;font-size:clamp(1.95rem,5.6vw,4.6rem);color:#fff; will-change:transform;transform:translate3d(var(--dx,0px),0,0)} .exp-prem .cm-diff-l em{font-family:var(--serif);font-style:italic;font-weight:400; letter-spacing:-.01em;color:var(--f-orange-2)} @media(prefers-reduced-motion:reduce){.exp-prem .cm-diff-l li{transform:none}.exp-prem .cm-diff-bg img{transform:none}} /* ---- §6 CONTEXTES — rangées pleine largeur qui s'inversent -------------- */ .exp-prem .cm-ctx{list-style:none;margin:clamp(2em,3.6vw,3.2em) 0 0;padding:0;display:grid} .exp-prem .cm-ctx li{position:relative;padding:clamp(1.5em,2.7vw,2.2em) 0; border-top:1px solid rgba(16,27,43,.16); display:grid;gap:.45em clamp(1.6em,3.4vw,3.2em);grid-template-columns:1fr; transition:color .35s var(--f-ease)} .exp-prem .cm-ctx li:last-child{border-bottom:1px solid rgba(16,27,43,.16)} @media(min-width:900px){.exp-prem .cm-ctx li{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:baseline}} /* le fond déborde jusqu'aux bords de l'écran sans créer de scroll : il est clippé par `.sec{overflow:hidden}`. Vérifié à 320. */ .exp-prem .cm-ctx li::before{content:"";position:absolute;z-index:0; top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%) scaleY(.72); background:var(--f-navy);opacity:0;transform-origin:center; transition:opacity .35s var(--f-ease),transform .35s var(--f-ease)} .exp-prem .cm-ctx li h3{position:relative;z-index:1;margin:0;max-width:none; font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.05; font-size:clamp(1.35rem,2.7vw,2.15rem);color:var(--f-ink);transition:color .35s var(--f-ease)} .exp-prem .cm-ctx li p{position:relative;z-index:1;margin:0;max-width:46ch; font-family:var(--serif);font-size:clamp(1rem,1.12vw,1.12rem);line-height:1.6; color:var(--f-ink-soft);transition:color .35s var(--f-ease)} @media(hover:hover) and (pointer:fine){ .exp-prem .cm-ctx li:hover::before{opacity:1;transform:translateX(-50%) scaleY(1)} .exp-prem .cm-ctx li:hover h3{color:#fff} .exp-prem .cm-ctx li:hover p{color:var(--f-silver)} } /* ---- CTA : garantir DEUX niveaux de mentions, pas trois ----------------- Quatre mentions en `flex-wrap` se pliaient sur 3 lignes (mesuré : tops 1391/1391/1433/1474). `flex-wrap` plie autant de fois qu'il le faut ; pour garantir un nombre de lignes, il faut une GRILLE. Même correctif que le CTA de l'accueil le 2026-09-06. */ .exp-prem .fcta .reassure:has(span:nth-child(4)){max-width:none;display:grid;grid-template-columns:repeat(2,auto); justify-content:center;gap:.75em clamp(1.4em,3vw,2.6em)} @media(max-width:560px){.exp-prem .fcta .reassure:has(span:nth-child(4)){grid-template-columns:auto;justify-items:center}} /* ---- CTA : le titre en NACRE, pas en blanc pur (demande user 2026-09-06) ---- Même registre que le CTA de l'accueil, où la nacre a été posée le même jour. `--color-nacre` (#CDD8E4) n'existe que dans site.css, que ces pages ne chargent pas ; `--f-silver` de cortex-bold.css porte exactement la même valeur. On prend le token disponible plutôt que d'écrire la couleur en dur. */ .exp-prem .fcta h2{color:var(--f-silver)} /* ========================================================================== VARIANTES DU GABARIT V2 — imposées par le contenu, pas par le goût Conformité opérationnelle (2026-09-06) présente deux écarts de structure que le gabarit ne couvrait pas. Traités comme des variantes du même gabarit, pas comme une exception locale : les expertises suivantes les réemploieront. ========================================================================== */ /* ---- §3 : CINQ volets au lieu de quatre -------------------------------- Une grille 2×2 laisse un orphelin en 5e case. Le 5e volet prend donc TOUTE la largeur : 2 / 2 / 1 pleine. L'irrégularité est assumée — elle vaut mieux qu'une demi-tuile vide, et elle donne à la grille une base plus lourde. */ @media(min-width:860px){ .exp-prem .cm-tiles-5 .cm-tile:nth-child(5){grid-column:1 / -1; border-left:0;border-top:1px solid var(--f-glass-bd)} .exp-prem .cm-tiles-5 .cm-tile:nth-child(5) .cm-tl{ grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.6em,3vw,3em)} } /* 5e dégradé : bronze, le registre « ce qui qualifie » — l'externalisation n'est pas un acte de plus, c'est une modalité. Distinct des quatre autres. */ .exp-prem .cm-tile.v5{background:radial-gradient(72% 130% at 8% 10%,rgba(201,160,92,.26),rgba(201,160,92,0) 48%),linear-gradient(152deg,#1A1E28,#0A121D 76%)} /* v6 — ajoutée le 2026-09-08 pour « IA appliquée », première page à SIX volets. La grille de base les prend telle quelle (3 rangées × 2 colonnes au-dessus de 860px, les bordures de `:nth-child(-n+2)` et `:nth-child(2n)` restent justes) : il ne manquait que la teinte de la 6e tuile. Pas de `.cm-tiles-6` : le seul variant nécessaire était pour CINQ, où la dernière prend toute la largeur. Teinte NACRE `#CDD8E4` — prise dans les trois registres du projet plutôt qu'en ouvrant une 6e famille de couleur. Elle se distingue du bleu de v2 (plus froid et plus saturé) et du bronze de v5 (chaud). */ .exp-prem .cm-tile.v6{background:radial-gradient(80% 122% at 10% 9%,rgba(205,216,228,.22),rgba(205,216,228,0) 50%),linear-gradient(152deg,#16202E,#0A121D 78%)} /* ---- §5 : UNE phrase au lieu de trois énoncés -------------------------- Le gabarit posait trois verbes indépendants. Ici c'est une seule phrase à antithèse (« démontrable, mais surtout exécutable ») : elle se coupe en deux registres de lecture, mais reste UN énoncé — d'où un

et non une