/* ============================================================ SAGESSES MODERNES — Solutions Horizontales (theme: NOIR) Signature dark, ultra-minimalist. Deep near-black canvas, light Inter, uppercase monospaced anchor codes. Extends styles.css; scoped to on solution pages. Reserved, visually-isolated blocks await high-fidelity schematics / motion graphics / workflow animations. ============================================================ */ .noir{ /* Deep near-black canvas, cool neutrals */ --paper:#050505; --graphite:#0B0B0D; --ink:#ECECEE; --charcoal:#050505; --grey:#9B9BA0; --grey-soft:#63636A; --blue:#5896d8; --blue-deep:#5896d8; --rule:rgba(255,255,255,.12); --rule-soft:rgba(255,255,255,.07); --rule-strong:rgba(255,255,255,.24); --bg:var(--paper); --fg:var(--ink); --muted:var(--grey); --faint:var(--grey-soft); --line:var(--rule); --line-2:var(--rule-soft); --line-strong:var(--rule-strong); --panel:#0B0B0D; --card:#0B0B0D; --surface:var(--paper); --on-surface:var(--ink); --mono:"SF Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--paper); color:var(--ink); font-weight:300; } .noir ::selection{background:rgba(88,150,216,.28)} /* Nav / footer adopt the noir canvas */ .noir .nav{background:var(--paper);border-bottom:1px solid var(--rule-soft)} .noir .foot{background:#040404} /* Uniform dark: any legacy .dark section flattens to the noir canvas */ .noir .section,.noir .section.dark,.noir .hero,.noir .imgband{background:var(--paper);color:var(--ink)} /* Homepage mastheads adopt the monospaced anchor-code style under noir */ .noir .masthead__idx,.noir .masthead__label,.noir .kicker,.noir .rail__k,.noir .rail__list, .noir .hero__note,.noir .hero__meta-line,.noir .foot__note,.noir .foot__legal,.noir .foot__col h4{font-family:var(--mono)} /* Lighter display on near-black — ultra-minimalist */ .noir .display{font-weight:300;letter-spacing:-.02em} .noir .h-sec{font-weight:300} .noir .h-item{font-weight:400} .noir .body{font-weight:300} .noir .lead{font-weight:300} /* ---------- Uppercase monospaced anchor code (0X / SOLUTIONS HORIZONTALES) ---------- */ .acode{ display:inline-flex;align-items:center;gap:.7rem; font-family:var(--hp-mono,"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace); font-size:.9rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--muted); } .acode__num{color:var(--fg)} .acode__sep{color:var(--grey-soft)} /* ---------- Solution masthead ---------- */ .sol-hero{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(8px,2vw,24px)} .sol-hero__code{margin-bottom:clamp(32px,4vw,56px);padding-top:1.4rem;border-top:1px solid var(--line)} .sol-title{grid-column:1 / span 11;margin:0} .sol-lead{grid-column:1 / span 8;margin-top:clamp(28px,3vw,44px)} .sol-hero__cta{grid-column:1 / span 12;margin-top:clamp(36px,4vw,56px);display:flex;gap:.8rem;flex-wrap:wrap} /* ---------- Content blocks (Possibilités / Problèmes / Impact / Solutions) ---------- */ .sol-blocks{margin-top:clamp(8px,1vw,16px)} .sol-block{ display:grid;grid-template-columns:3fr 9fr;gap:var(--gutter); padding:clamp(40px,5vw,80px) 0;border-top:1px solid var(--line);align-items:start; } .sol-block__aside{position:sticky;top:104px} .sol-block__code{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--muted)} .sol-block__h{margin:1.1rem 0 0;font-weight:600;font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.12;letter-spacing:-.022em;color:var(--fg)} .sol-block__p{font-weight:400;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.55; color:var(--muted);max-width:60ch;text-wrap:pretty} .sol-block--solutions .sol-block__p{color:var(--fg);opacity:.92} /* ---------- RESERVED VISUAL BLOCKS ---------- Prominent, visually isolated containers reserved for high-fidelity technical schematics, custom CSS/JS animations, premium motion graphics and workflow representations. */ .schematic{ position:relative;width:100%; background:#0A0C11; /* self-contained dark band on the warm-paper pages */ border:1px solid rgba(255,255,255,.14);border-radius:3px;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.9rem;text-align:center;padding:2.5rem;color:#EDECEA; } .schematic--hero{aspect-ratio:21 / 9} .schematic--flow{aspect-ratio:16 / 6} .schematic--motion{aspect-ratio:16 / 7} /* engineered corner ticks + inner frame to read as an intentional reserved slot */ .schematic::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.10);border-radius:2px;pointer-events:none} .schematic::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 100%, linear-gradient(0deg,var(--line) 1px,transparent 1px) 0 0/100% 56px; opacity:.10;pointer-events:none;mask:radial-gradient(120% 120% at 50% 50%,#000,transparent 78%)} .schematic__tag{position:relative;font-family:var(--mono);font-size:.66rem;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)} .schematic__marker{position:relative;font-family:var(--mono);font-size:clamp(.62rem,1vw,.78rem); letter-spacing:.14em;color:rgba(255,255,255,.30);word-break:break-word;max-width:44ch} .schematic__hint{position:relative;font-size:.82rem;font-weight:300;color:rgba(255,255,255,.42);max-width:52ch} .schematic-wrap{margin:clamp(28px,3.5vw,56px) 0} /* ---------- Vertical sector sub-sections (Problème / Opportunité / Solution / ROI) ---------- */ .vsec{padding-top:clamp(40px,5vw,80px)} .vsec + .vsec{border-top:1px solid var(--line);margin-top:clamp(24px,3vw,48px)} .vsec__head{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:clamp(28px,3vw,48px)} .vsec__n{font-family:var(--mono);font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)} .vsec__t{font-weight:600;font-size:clamp(1.4rem,2vw,1.95rem);line-height:1.14;letter-spacing:-.022em;color:var(--fg);margin:0} .vblock{ display:grid;grid-template-columns:3fr 9fr;gap:var(--gutter);align-items:start; padding:clamp(26px,3vw,44px) 0;border-top:1px solid var(--line-2); } .vblock__code{font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--muted)} .vblock__p{font-weight:400;font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.55;color:var(--muted); max-width:60ch;text-wrap:pretty;margin:0} /* dash-marked lists (problem + solution) */ .vlist{list-style:none;margin:0;padding:0;display:grid;gap:1rem;max-width:64ch} .vlist li{position:relative;padding-left:1.4rem;font-weight:300;font-size:1.06rem;line-height:1.55;color:var(--muted)} .vlist li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--faint)} .vlist li strong{color:var(--fg);font-weight:500;font-weight:400} /* ROI callout */ .vblock--roi{border-top:1px solid var(--line)} .roi{border-left:2px solid var(--blue);padding:.2rem 0 .2rem 1.3rem} .roi .vblock__p{color:var(--fg)} /* ---------- Prev / next routing ---------- */ .sol-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter); margin-top:clamp(56px,6vw,96px);border-top:1px solid var(--line)} .sol-nav a{padding:clamp(28px,3vw,44px) 0;display:flex;flex-direction:column;gap:.7rem} .sol-nav a:last-child{text-align:right;align-items:flex-end} .sol-nav__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} .sol-nav__t{font-weight:400;font-size:clamp(1.1rem,1.5vw,1.4rem);letter-spacing:-.01em;color:var(--fg)} .sol-nav a:hover .sol-nav__t{text-decoration:underline;text-underline-offset:4px} /* ---------- Solutions index (hub) ---------- */ .sindex{grid-column:1 / span 12;margin-top:clamp(44px,5vw,80px);border-top:1px solid var(--line)} .sindex__row{display:grid;grid-template-columns:auto 5fr 7fr;gap:var(--gutter);align-items:baseline; padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--line)} .sindex__n{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;color:var(--faint)} .sindex__t{font-weight:400;font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.014em;color:var(--fg)} .sindex__d{color:var(--muted);font-size:1.02rem;font-weight:300;max-width:56ch} .sindex__row:hover .sindex__t{text-decoration:underline;text-underline-offset:4px} /* active nav item */ .nav__link.is-active{color:#fff} @media(max-width:900px){ .sol-block{grid-template-columns:1fr;row-gap:1.4rem} .sol-block__aside{position:static} .sol-title{grid-column:1 / span 12} .sol-lead{grid-column:1 / span 12} .sindex__row{grid-template-columns:auto 1fr;row-gap:.5rem} .sindex__d{grid-column:2} .sol-nav{grid-template-columns:1fr} .sol-nav a:last-child{text-align:left;align-items:flex-start} } /* schematic "live" motion is defined in motion.css (shimmer / glow / dash, exact) */ /* ---------- Section band (tight-padding wrapper for full-width schematic bands) ---------- */ .section--band{padding-block:clamp(52px,6vw,104px)} /* ---------- Utility ---------- */ .hidden{display:none!important} /* ---------- Glossary (Lexique) — programmatic SEO cards ---------- */ .glex{grid-column:1 / span 12;margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,36px)} .gcard{border:1px solid var(--line);border-radius:2px;padding:clamp(28px,3vw,42px);background:var(--card);display:flex;flex-direction:column;gap:1rem} .gcard__cat{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .gcard__h{font-weight:600;font-size:1.2rem;line-height:1.25;letter-spacing:-.012em;color:var(--fg);margin:0} .gcard__list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.85rem} .gcard__list li{display:flex;gap:.6rem;font-size:.95rem;color:var(--muted);align-items:baseline} .gcard__list li::before{content:"—";color:var(--faint)} .gcard__list a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);transition:text-decoration-color .25s ease} .gcard__list a:hover{text-decoration-color:var(--fg)} @media(max-width:760px){.glex{grid-template-columns:1fr}} /* ---------- KPI Calculator (Simulateur ROI) ---------- */ .calc{grid-column:1 / span 12;margin-top:clamp(40px,5vw,72px);max-width:760px; border:1px solid var(--line);border-radius:2px;background:var(--card);padding:clamp(28px,3.4vw,48px)} .calc__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; border-bottom:1px solid var(--line);padding-bottom:1.1rem;margin-bottom:1.8rem} .calc__badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:#fff;background:var(--ink);padding:.35rem .65rem;border-radius:2px;white-space:nowrap} .calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem} .calc__field{display:flex;flex-direction:column;gap:.45rem;transition:opacity .25s ease} .calc__field--full{grid-column:1 / -1} .calc__lab{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .calc__sub{font-family:var(--mono);font-size:.66rem;color:var(--faint);letter-spacing:.02em} .calc input,.calc select{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px; padding:.72rem .8rem;font-family:var(--mono);font-size:.85rem;color:var(--ink);outline:none;transition:border-color .2s ease} .calc input:focus,.calc select:focus{border-color:var(--ink)} .calc__params{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:1.3rem;margin-top:.3rem;display:grid;gap:1.05rem} .calc__params-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem} .calc__run{grid-column:1 / -1;margin-top:.7rem;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:2px; padding:.95rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease} .calc__run:hover{background:var(--blue-deep)} .calc__out{grid-column:1 / -1;margin-top:1.5rem;border:1px dashed var(--line-strong);border-radius:2px;background:var(--bg); padding:clamp(22px,2.6vw,34px);display:grid;gap:1rem} .calc__out-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .calc__out-lead{font-size:.98rem;color:var(--muted)} .calc__loss{font-family:var(--mono);font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:600;color:var(--ink);letter-spacing:-.01em} .calc__sugg{font-size:.95rem;color:var(--muted);line-height:1.62;border-top:1px solid var(--line);padding-top:1.15rem} .calc__cta{justify-self:start;margin-top:.4rem} @media(max-width:640px){.calc__grid,.calc__params-grid{grid-template-columns:1fr}} /* ============================================================ SAGESSES ACADEMY — syllabus hub + course views Light warm-paper theme; monospaced anchor tokens. The video slot + animated flowchart skeleton are self-contained dark panels (reserved for future lecture media / motion). ============================================================ */ /* ---------- Hub : specialization + module cards ---------- */ .aspec{grid-column:1 / span 12;margin-top:clamp(36px,4.5vw,68px); border:1px solid var(--line);border-radius:2px;background:var(--card); padding:clamp(26px,3vw,44px)} .aspec__bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap; border-bottom:1px solid var(--line);padding-bottom:1.15rem;margin-bottom:clamp(24px,3vw,40px)} .aspec__t{margin:0;font-weight:600;font-size:clamp(1.15rem,1.9vw,1.55rem);letter-spacing:-.012em;color:var(--fg)} .aspec__count{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap} .amods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,32px)} .amod{display:flex;flex-direction:column;gap:.85rem;padding:clamp(22px,2.2vw,30px); border:1px solid var(--line);border-radius:2px;background:var(--bg)} .amod__code{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:var(--fg)} .amod__p{font-weight:400;font-size:.95rem;line-height:1.55;color:var(--muted);margin:0;flex:1} .amod__open{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--fg); text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong); transition:text-decoration-color .25s ease;align-self:flex-start} .amod__open:hover{text-decoration-color:var(--fg)} .amod__list{display:grid;gap:.1rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:.3rem} .amod__course{display:flex;gap:.7rem;align-items:baseline;padding:.5rem 0; border-bottom:1px solid var(--line-2);text-decoration:none} .amod__course:last-child{border-bottom:0} .amod__cnum{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.04em} .amod__ctitle{font-size:.92rem;color:var(--muted);transition:color .2s ease} .amod__course:hover .amod__ctitle,.amod__course:hover .amod__cnum{color:var(--fg)} @media(max-width:860px){.amods{grid-template-columns:1fr}} /* ---------- Course view : hero kicker + numbered sections ---------- */ .acourse-kicker{grid-column:1 / span 12;margin:0 0 .2rem;font-family:var(--mono); font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .acourse-wrap{max-width:none} .acourse-content .acourse-wrap{display:block} .acsec{display:grid;grid-template-columns:3fr 9fr;gap:var(--gutter);align-items:start; padding:clamp(34px,4vw,64px) 0;border-top:1px solid var(--line)} .acsec:first-child{border-top:0;padding-top:clamp(8px,1vw,18px)} .acsec__head{position:sticky;top:104px;display:flex;flex-direction:column;gap:.6rem} .acsec__n{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--fg)} .acsec__t{margin:0;font-weight:600;font-size:clamp(1.35rem,2.1vw,1.95rem);line-height:1.14; letter-spacing:-.022em;color:var(--fg)} .acsec__body{display:flex;flex-direction:column;gap:1.15rem} .acsec__p{font-weight:400;font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.62; color:var(--muted);max-width:64ch;text-wrap:pretty;margin:0} .acsec__p strong{color:var(--fg);font-weight:500} .acsec__p em{font-style:italic;color:var(--fg)} .acsec__p a{color:var(--fg);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--blue)} .acsec__list{list-style:none;margin:.1rem 0 0;padding:0;display:grid;gap:.95rem;max-width:64ch} .acsec__list li{position:relative;padding-left:1.3rem;font-weight:400; font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.58;color:var(--muted)} .acsec__list li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--line-strong)} .acsec__list strong{color:var(--fg);font-weight:500} @media(max-width:820px){ .acsec{grid-template-columns:1fr;row-gap:1.2rem} .acsec__head{position:static} } /* ---------- Cross-link "next step" callout (reuses .roi border) ---------- */ .acourse-note{margin-top:clamp(30px,3.6vw,54px)} .acourse-note__k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em; text-transform:uppercase;color:var(--faint);margin-bottom:.5rem} /* ---------- Top-of-view media : hidden video slot + flowchart ---------- */ .acourse-media{display:flex;flex-direction:column;gap:1rem;margin-top:clamp(6px,1vw,14px)} .video-embed-placeholder{width:100%;aspect-ratio:16 / 9;border:1px solid var(--line); border-radius:3px;background:#050505} .animated-flowchart-container{position:relative;width:100%;min-height:280px;overflow:hidden; border:1px dashed #27272a;border-radius:3px;background:#0a0a0a; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1.1rem;text-align:center;padding:2rem} .animated-flowchart-container::after{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 100%, linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 48px; mask:radial-gradient(120% 120% at 50% 45%,#000,transparent 76%)} .aflow__svg{position:relative;width:min(460px,86%);height:auto} .aflow__node{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.4; animation:aflowPulse 3.2s ease-in-out infinite} .aflow__node:nth-of-type(2){animation-delay:.5s} .aflow__node:nth-of-type(3){animation-delay:1s} .aflow__link{fill:none;stroke:rgba(120,150,255,.75);stroke-width:1.6;stroke-dasharray:6 8; animation:aflowDash 1.4s linear infinite} .aflow__marker{position:relative;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em; color:#6E6E77;word-break:break-word;max-width:44ch} .aflow__sign{position:relative;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em; text-transform:uppercase;color:#52525b} @keyframes aflowDash{to{stroke-dashoffset:-56}} @keyframes aflowPulse{0%,100%{opacity:.4}50%{opacity:.85}} @media(prefers-reduced-motion:reduce){ .aflow__node,.aflow__link{animation:none} } /* ---------- Course pager (prev / hub / next) ---------- */ .acourse-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2vw,28px);align-items:stretch} .acourse-nav__a{display:flex;flex-direction:column;gap:.35rem;padding:clamp(18px,2vw,26px); border:1px solid var(--line);border-radius:2px;background:var(--card);text-decoration:none; transition:border-color .2s ease,background-color .2s ease} .acourse-nav__a:hover{border-color:var(--line-strong);background:var(--panel)} .acourse-nav__a--next{text-align:right} .acourse-nav__a--hub{align-items:center;justify-content:center;text-align:center;min-width:clamp(120px,16vw,190px)} .acourse-nav__a--empty{border:0;background:none;pointer-events:none} .acourse-nav__k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .acourse-nav__t{font-size:.95rem;color:var(--fg);line-height:1.3} @media(max-width:760px){ .acourse-nav{grid-template-columns:1fr} .acourse-nav__a--next{text-align:left} .acourse-nav__a--empty{display:none} } /* ============================================================ BILAN DE POTENTIEL — assessment (native, v2 design system) ============================================================ */ .bp-section{padding-block:clamp(48px,7vw,110px)} .bp-wrap{max-width:960px} .bp-screen{animation:fadeInUp .5s cubic-bezier(.4,0,.2,1)} .bp-screen[hidden]{display:none} /* ---- intro ---- */ .bp-hero{max-width:760px} .bp-hero .acode{padding-top:1.2rem;border-top:1px solid var(--line);display:inline-flex;margin-bottom:clamp(24px,3vw,40px)} .bp-hero__title{margin:0 0 clamp(20px,2.4vw,32px)} .bp-hero__lead{margin:0 0 1.2rem} .bp-check{list-style:none;margin:0 0 clamp(28px,3.4vw,44px);padding:0;display:grid;gap:.85rem} .bp-check li{position:relative;padding-left:2rem;font-size:clamp(1.02rem,1.25vw,1.18rem);color:var(--fg);font-weight:400} .bp-check li::before{content:"";position:absolute;left:0;top:.15em;width:1.1rem;height:1.1rem;border-radius:50%; background:var(--blue);color:#fff} .bp-check li::after{content:"✓";position:absolute;left:.24rem;top:.02em;font-size:.72rem;color:#fff;font-weight:600} .bp-hero__cta{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start} .bp-hero__note{font-size:.9rem;color:var(--muted);max-width:44ch} .bp-hero__meta{margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} /* ---- progress ---- */ .bp-progress{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(28px,3.4vw,52px)} .bp-progress__label{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--faint);white-space:nowrap} .bp-progress__track{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .bp-progress__bar{display:block;height:100%;background:var(--blue);transition:width .5s cubic-bezier(.4,0,.2,1)} /* ---- question ---- */ .bp-qhead{margin-bottom:1rem} .bp-qtitle{font-weight:600;font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.12;letter-spacing:-.022em;color:var(--fg);margin:0 0 clamp(28px,3.4vw,44px);max-width:22ch} .bp-hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:-1.4rem 0 1.4rem} .bp-opts{display:grid;gap:.7rem} .bp-opts--grid{grid-template-columns:repeat(2,1fr)} .bp-opts--chips{grid-template-columns:repeat(auto-fit,minmax(150px,auto));gap:.55rem} .bp-opt{display:flex;align-items:flex-start;gap:.85rem;text-align:left;width:100%; background:var(--card);border:1px solid var(--line-strong);border-radius:2px; padding:1.05rem 1.15rem;font-family:var(--sans);font-size:clamp(.98rem,1.1vw,1.08rem);font-weight:400; color:var(--fg);cursor:pointer;transition:border-color .18s ease,background-color .18s ease} .bp-opt:hover{border-color:var(--fg)} .bp-opt.is-selected{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--card))} .bp-opt__tick{flex:none;width:1.1rem;height:1.1rem;margin-top:.15em;border:1.5px solid var(--line-strong);border-radius:50%;position:relative;transition:border-color .18s ease} .bp-opt.is-selected .bp-opt__tick{border-color:var(--blue);background:var(--blue)} .bp-opt.is-selected .bp-opt__tick::after{content:"";position:absolute;left:.28rem;top:.12rem;width:.28rem;height:.5rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .bp-opt--chip{padding:.7rem .95rem;font-size:.92rem} .bp-opt--disabled{opacity:.4;pointer-events:none} .bp-subgroup{margin-bottom:1.8rem} .bp-subtitle{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem} .bp-input{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px; padding:.85rem .95rem;font-family:var(--mono);font-size:.9rem;color:var(--ink);outline:none;transition:border-color .18s ease} .bp-input:focus{border-color:var(--blue)} .bp-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:clamp(30px,3.6vw,52px)} .bp-nav .btn:disabled{opacity:.35;pointer-events:none} @media(max-width:640px){.bp-opts--grid{grid-template-columns:1fr}} /* ---- indice + dims ---- */ .bp-teaser,.bp-result{max-width:820px} .bp-teaser .acode,.bp-result .acode,.bp-capture .acode{display:inline-flex;padding-top:1.2rem;border-top:1px solid var(--line);margin-bottom:clamp(20px,2.4vw,34px)} .bp-teaser__h{margin:0 0 clamp(24px,3vw,40px)} .bp-index{display:flex;align-items:flex-start;gap:.1rem;line-height:.9} .bp-index__num{font-weight:600;font-size:clamp(4.5rem,14vw,9rem);letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums} .bp-index__pct{font-weight:600;font-size:clamp(1.6rem,4vw,2.6rem);color:var(--faint);margin-top:.5em} .bp-index--lg .bp-index__num{font-size:clamp(3.6rem,10vw,7rem)} .bp-teaser__cap{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--muted);margin:1rem 0 clamp(28px,3.4vw,44px);max-width:48ch} .bp-teaser__cap strong{color:var(--fg);font-weight:600} .bp-dims{display:grid;gap:.85rem;margin-bottom:clamp(28px,3.4vw,44px)} .bp-dim{display:grid;grid-template-columns:minmax(120px,1.6fr) 3fr auto;align-items:center;gap:1rem} .bp-dim__l{font-size:.86rem;color:var(--muted)} .bp-dim__track{height:6px;background:var(--line);border-radius:3px;overflow:hidden} .bp-dim__fill{display:block;height:100%;background:var(--blue);border-radius:3px;transition:width 1s cubic-bezier(.4,0,.2,1)} .bp-dim__v{font-family:var(--mono);font-size:.8rem;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums} @media(max-width:560px){.bp-dim{grid-template-columns:1fr auto;gap:.3rem .8rem}.bp-dim__track{grid-column:1 / -1;order:3}} .bp-lock{border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start} .bp-lock__t{color:var(--muted);max-width:56ch;margin:0} /* ---- capture ---- */ .bp-capture{max-width:560px} .bp-capture__h{margin:0 0 .9rem} .bp-capture__lead{margin:0 0 clamp(26px,3vw,38px)} .bp-form{display:grid;gap:1.1rem} .bp-field{display:grid;gap:.45rem} .bp-field__l{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .bp-field input{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:2px;padding:.85rem .95rem;font-family:var(--mono);font-size:.9rem;color:var(--ink);outline:none;transition:border-color .18s ease} .bp-field input:focus{border-color:var(--blue)} .bp-error{color:#b0201f;font-size:.9rem;margin:0} .bp-form__submit{justify-self:start;margin-top:.4rem} .bp-form__fine{font-size:.82rem;color:var(--faint);margin:.3rem 0 0} /* ---- result document ---- */ .bp-result__head{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(8px,1vw,16px) 0 1.2rem} .bp-result__head .bp-dims{flex:1;min-width:280px;margin:0} .bp-result__cap{font-size:.9rem;color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:clamp(28px,3.4vw,44px);margin:0 0 clamp(32px,4vw,56px);max-width:60ch} .bp-doc{display:grid;gap:clamp(30px,3.6vw,52px)} .bp-block__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.7rem} .bp-block__t{font-weight:600;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.16;letter-spacing:-.018em;color:var(--fg);margin:0 0 .9rem} .bp-block p{color:var(--muted);line-height:1.62;margin:0 0 .8rem;max-width:64ch} .bp-block p strong,.bp-finding strong{color:var(--fg);font-weight:600} .bp-finding{padding:1.1rem 0;border-top:1px solid var(--line)} .bp-finding h4{font-weight:600;font-size:1.08rem;color:var(--fg);margin:0 0 .4rem} .bp-finding p{margin:0} .bp-block--roi{border-left:2px solid var(--blue);padding-left:clamp(20px,2.4vw,32px);background:color-mix(in srgb,var(--blue) 4%,transparent)} .bp-lvl{font-size:1rem} .bp-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.1rem 0} .bp-card{border:1px solid var(--line-strong);border-radius:2px;padding:clamp(18px,2vw,26px);background:var(--card);display:flex;flex-direction:column;gap:.35rem} .bp-card__n{font-weight:600;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .bp-card__u{font-size:1rem;color:var(--muted);margin-top:-.4rem} .bp-card__l{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .bp-fine{font-size:.82rem;color:var(--faint)} .bp-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.1rem 0} .bp-phase{border-top:2px solid var(--line-strong);padding-top:.9rem;display:flex;flex-direction:column;gap:.35rem} .bp-phase__d{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .bp-phase strong{color:var(--fg);font-weight:600} .bp-phase p{font-size:.92rem;margin:0} .bp-recs{margin:0;padding-left:1.1rem;display:grid;gap:.7rem} .bp-recs li{color:var(--muted);line-height:1.55;max-width:64ch} .bp-tag,.bp-teaser .bp-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint);margin-top:.4rem} .bp-readies{display:grid;gap:.6rem;margin:.4rem 0 1rem} .bp-ready{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line-strong);border-radius:2px;padding:.85rem 1rem;cursor:pointer;transition:border-color .18s ease} .bp-ready:hover{border-color:var(--fg)} .bp-ready input{accent-color:var(--blue)} .bp-ready-ack{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:1rem 1.15rem;color:var(--muted);font-size:.92rem;line-height:1.55;max-width:64ch} .bp-final{border-top:1px solid var(--line);padding-top:clamp(30px,3.6vw,48px);display:flex;flex-direction:column;gap:1rem;align-items:flex-start} .bp-cta--pulse{animation:bp-pulse 1.4s ease-in-out infinite} @keyframes bp-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 55%,transparent)}50%{box-shadow:0 0 0 8px transparent}} .bp-carte{margin-top:.2rem} @media(max-width:640px){.bp-cards,.bp-phases{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.bp-screen{animation:none}.bp-cta--pulse{animation:none}} /* ═══ MÉTHODE — boucle d'amélioration continue (5 phases) ═══ */ .methode-loop{padding:52px 0 4px} .mloop{max-width:700px;margin:0 auto} .mloop__svg{width:100%;height:auto;display:block;overflow:visible} .mloop__ring{stroke:var(--line,#ECECEA);stroke-width:1.5;stroke-dasharray:786;stroke-dashoffset:786;animation:mlRing 1.6s ease .15s forwards} @keyframes mlRing{to{stroke-dashoffset:0}} .mloop__node{opacity:0;transform-box:fill-box;transform-origin:center;animation:mlPop .5s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(.55s + var(--i)*.32s)} @keyframes mlPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}} .mloop__disc{fill:transparent;stroke:var(--ink,#0B1220);stroke-width:1.4;transition:fill .35s ease} .mloop__lab{font-size:16px;font-weight:600;fill:var(--ink,#0B1220);text-anchor:middle;dominant-baseline:central;transition:fill .35s ease} /* étape active : cercle en dégradé de marque, texte blanc */ .mloop__node.is-on .mloop__disc{fill:url(#mlGrad);stroke:transparent} .mloop__node.is-on .mloop__lab{fill:#fff} .mloop__pulse{fill:#5896d8} .mloop__cap{text-align:center;font-size:1.15rem;font-weight:500;color:var(--ink,#0B1220);margin-top:1.4rem} @media (prefers-reduced-motion:reduce){.mloop__ring{animation:none;stroke-dashoffset:0}.mloop__node{animation:none;opacity:1}.mloop__pulse{display:none}} /* ═══ accordéon réutilisable (méthode + solutions) ═══ */ .mlacc{grid-column:1/-1;max-width:780px;margin:0 auto;border-top:1px solid var(--line,#ECECEA)} .mlacc__it{border-bottom:1px solid var(--line,#ECECEA)} .mlacc__sum{display:flex;align-items:center;gap:14px;padding:18px 2px;cursor:pointer;list-style:none;font-weight:600} .mlacc__sum::-webkit-details-marker{display:none} .mlacc__sum::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:19px;line-height:1;color:var(--blue,#5896d8)} .mlacc__it[open] .mlacc__sum::after{content:"\2013"} .mlacc__n{font-family:var(--mono);font-size:12px;color:var(--blue,#5896d8)} .mlacc__t{font-size:1.02rem} .mlacc__body{padding:0 2px 20px} .mlacc__p{font-size:.95rem;line-height:1.7;margin:0 0 .7rem;color:#3d3f45} .mlacc__p strong{color:var(--ink,#0B1220)} /* ═══ 003/P3 — Solutions hub : deux colonnes d'accordéons ═══ */ .scols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .scol__h { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0; } @media (min-width: 861px) { .scol__h { position: sticky; top: 76px; z-index: 4; background: var(--paper, #FAFAF7); padding: 14px 0 10px; } .scol__s { position: sticky; top: 122px; z-index: 4; background: var(--paper, #FAFAF7); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hp-line, #e4e4e7); } } .scol__s { color: #52525b; font-size: 15px; margin: 0 0 22px; } .sacc { border-top: 1px solid #e4e4e7; } .sacc:last-child { border-bottom: 1px solid #e4e4e7; } .sacc__sum { display: flex; align-items: center; gap: 14px; padding: 16px 2px; cursor: pointer; list-style: none; user-select: none; } .sacc__sum::-webkit-details-marker { display: none; } .sacc__n { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #6E6E77; letter-spacing: .06em; } .sacc__t { flex: 1; font-size: 16px; font-weight: 500; line-height: 1.35; }.sacc__sum:hover .sacc__t { color: #5896d8; } .sacc__body { padding: 0 2px 20px 40px; } .sacc__out { font-size: 15px; line-height: 1.55; color: #0B1220; margin: 0 0 12px; } .sacc__roi { font-size: 14px; line-height: 1.55; color: #52525b; margin: 0; display: flex; gap: 10px; align-items: baseline; } .sacc__roik { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; color: #15803d; border: 1px solid #22c55e; padding: 2px 6px; flex: none; } @media (max-width: 860px) { .scols { grid-template-columns: 1fr; gap: 40px; } } /* ═══ 004 — les 5 phases deviennent des dropdowns (format, taille et position inchangés) ═══ */ details.vsec > summary.vsec__head { cursor: pointer; list-style: none; } details.vsec > summary.vsec__head::-webkit-details-marker { display: none; }details.vsec > summary.vsec__head:hover .vsec__t { opacity: .72; } /* le dégradé ne peut pas hériter d'une couleur : on le pose sur le texte lui-même */ .vsec__n.grad, .vblock__code.grad { background: var(--hp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .sacc__det { font-size: 14.5px; line-height: 1.6; color: #52525b; margin: 0 0 12px; } /* ═══ 004 — onglets mobile : une colonne à la fois (20 accordéons d'affilée = illisible au pouce) ═══ */ .scols__tabs { display: none; } @media (max-width: 860px) { .scols__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hp-line, #e4e4e7); margin: 0 0 26px; position: sticky; top: 60px; background: var(--paper, #FAFAF7); z-index: 5; } .scols__tab { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: #52525b; padding: 13px 8px; min-height: 46px; letter-spacing: -.01em; } .scols__tab.is-on { background: #0B1220; color: #fff; } .scol--off { display: none; } .scol__h { font-size: 20px; } } /* le titre de colonne répète l'onglet actif sur mobile — on garde la phrase, pas le doublon */ @media (max-width: 860px) { .scols__tabs + .scols .scol__h { display: none; } } /* 004 — Academy : phrase de pitch au-dessus du CTA secondaire */ .ac-hero__pitch { grid-column: 1/-1; font-size: clamp(1rem, 1.15vw, 1.12rem); font-weight: 500; color: var(--fg, #0B1220); margin: 1.6rem 0 1.1rem; max-width: 46rem; line-height: 1.45; } /* ═══ 004/P5 — récit épinglé : la boucle reste, les phases défilent ═══ */ .mstory__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 48px; align-items: start; } .mstory__pin { position: sticky; top: 92px; } .mstory__steps { min-width: 0; } .mstory__steps .vsec { padding-top: 0; } .mstory__steps .vsec + .vsec { margin-top: 20px; } .mstory__step { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #6E6E77; text-align: center; margin: 6px 0 0; } .mstory__step #mstepN { background: var(--hp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; } /* cercle de l'étape active */ .mloop__node { transition: opacity .3s ease; } /* (ancienne règle d'étape active retirée — remplacée par le dégradé plus haut) */ .mloop__node.is-dim { opacity: .34; } /* T142 — pas d'épinglage sous 860 px : pile verticale simple. 2026-07-20 — la boucle s'anime désormais d'elle-même (motion.js §4) au lieu de suivre le défilement : le compteur d'étape redevient utile sur téléphone, on le réaffiche. */ @media (max-width: 860px) { .mstory__in { grid-template-columns: 1fr; gap: 8px; } .mstory__pin { position: static; } .mstory__step { display: block; margin-bottom: 1.2rem; } .methode-loop { padding: 34px 0 4px; } } /* ═══ Méthode — en-tête de phase empilé sur mobile (le code + le titre + la coche ne tiennent plus en ligne) ═══ */ @media (max-width: 680px) { details.vsec > summary.vsec__head { flex-wrap: wrap; gap: .35rem .8rem; align-items: baseline; position: relative; padding-right: 30px; } .vsec__n { flex-basis: 100%; } .vsec__t { flex: 1 1 auto; }.vblock { grid-template-columns: 1fr; gap: .5rem; } }.sacc__sum:hover, details.vsec > summary.vsec__head:hover { background: rgba(0,0,0,.018); }/* ═══ ACADEMY — catalogue (cartes de module) ═══ */ .amods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; } .amod { background: #fff; border: 1px solid var(--hp-line, #e4e4e7); border-radius: 0; padding: 26px 24px 24px; display: flex; flex-direction: column; } .amod__code { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--hp-grad, linear-gradient(100deg,#8f78ea,#5896d8)); -webkit-background-clip: text; background-clip: text; color: transparent; } .amod__t { font-size: 1.42rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: .55rem 0 .5rem; } .amod__p { font-size: .97rem; line-height: 1.6; color: #52525b; margin: 0 0 .9rem; } .amod__meta { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6E6E77; margin-bottom: 16px; } .amod__list { border-top: 1px solid var(--hp-line, #e4e4e7); margin-bottom: 20px; } /* chaque cours est un vrai lien, visible comme tel sans survol */ .amod__course { display: flex; align-items: center; gap: 12px; padding: 13px 4px; min-height: 48px; border-bottom: 1px solid var(--hp-line, #ececee); text-decoration: none; transition: padding-left .18s ease; } .amod__cnum { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .78rem; font-weight: 700; color: #6E6E77; } .amod__ctitle { flex: 1; font-size: 1rem; font-weight: 500; color: var(--ink, #0B1220); text-decoration: underline; text-decoration-color: #d4d4d8; text-underline-offset: 4px; text-decoration-thickness: 1px; } .amod__carw { color: #6E6E77; transition: transform .18s ease, color .18s ease; } .amod__course:hover { padding-left: 8px; } .amod__course:hover .amod__ctitle { text-decoration-color: #5896d8; } .amod__course:hover .amod__carw { transform: translateX(3px); color: #5896d8; } .amod__cta { margin-top: auto; align-self: flex-start; } /* ═══ ACADEMY — lecteur de module (sommaire collant + cours enchaînés) ═══ */ .areader { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 52px; align-items: start; } .atoc { position: sticky; top: 92px; } .atoc__k { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6E6E77; margin-bottom: 12px; } .atoc__list { display: flex; flex-direction: column; border-left: 1px solid var(--hp-line, #e4e4e7); } .atoc__i { display: flex; gap: 10px; padding: 10px 0 10px 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; transition: border-color .2s ease; } .atoc__n { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .72rem; font-weight: 700; color: #6E6E77; } .atoc__t { font-size: .9rem; line-height: 1.35; color: #52525b; } .atoc__i:hover .atoc__t { color: var(--ink, #0B1220); } .atoc__i.is-on { border-left-color: #8f78ea; } .atoc__i.is-on .atoc__t { color: var(--ink, #0B1220); font-weight: 500; } .atoc__i.is-on .atoc__n { background: var(--hp-grad, linear-gradient(100deg,#8f78ea,#5896d8)); -webkit-background-clip: text; background-clip: text; color: transparent; } .atoc__prog { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .72rem; letter-spacing: .12em; color: #6E6E77; margin-top: 16px; padding-left: 14px; } .atoc__prog #atocN { background: var(--hp-grad, linear-gradient(100deg,#8f78ea,#5896d8)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .acrs { scroll-margin-top: 92px; padding-bottom: clamp(36px, 5vw, 68px); } .acrs + .acrs { border-top: 1px solid var(--hp-line, #e4e4e7); padding-top: clamp(36px, 5vw, 64px); } .acrs__head { margin-bottom: clamp(20px, 2.4vw, 32px); } .acrs__n { font-family: var(--hp-mono, ui-monospace, monospace); font-size: .85rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .acrs__t { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; margin: .5rem 0 .4rem; } .acrs__sub { font-size: 1.05rem; color: #52525b; margin: 0; } .amod-hero__meta { grid-column: 1/-1; font-family: var(--hp-mono, ui-monospace, monospace); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: #6E6E77; margin-top: 1.2rem; } /* mobile : le sommaire devient une barre horizontale collante */ @media (max-width: 900px) { .amods { grid-template-columns: 1fr; } .areader { grid-template-columns: 1fr; gap: 18px; } .atoc { position: sticky; top: 76px; z-index: 6; background: var(--paper, #FAFAF7); padding: 10px 0 8px; border-bottom: 1px solid var(--hp-line, #e4e4e7); margin: 0 0 8px; } .atoc__k, .atoc__prog { display: none; } .atoc__list { flex-direction: row; overflow-x: auto; border-left: 0; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .atoc__list::-webkit-scrollbar { display: none; } .atoc__i { flex: none; align-items: center; padding: 9px 13px; margin: 0; min-height: 44px; border: 1px solid var(--hp-line, #e4e4e7); border-left-width: 1px; border-radius: 999px; white-space: nowrap; } .atoc__t { font-size: .84rem; } .atoc__i.is-on { border-color: transparent; background: var(--hp-grad, linear-gradient(100deg,#8f78ea,#5896d8)); } .atoc__i.is-on .atoc__t, .atoc__i.is-on .atoc__n { color: #fff; -webkit-text-fill-color: #fff; background: none; } } /* ═══ Lecteur de module : titre de section AU-DESSUS du texte ═══ Dans le lecteur, la colonne de contenu est déjà étroite (sommaire à gauche). Garder le titre dans une sous-colonne 3fr le réduisait à 2-3 mots par ligne. On empile : titre puis texte, comme dans un vrai support de cours. */ .areader .acsec { grid-template-columns: 1fr; gap: 1rem; } .areader .acsec__head { position: static; flex-direction: row; align-items: baseline; gap: .8rem; } .areader .acsec__t { font-size: clamp(1.2rem, 1.7vw, 1.5rem); } .areader .acsec__n { font-size: .85rem; font-weight: 700; letter-spacing: .14em; } .areader .acsec__body { max-width: 68ch; } .areader .acsec__p { font-size: clamp(1rem, 1.15vw, 1.09rem); } /* le sommaire mobile doit DÉFILER, pas élargir la page : un enfant de grille a min-width:auto par défaut et s'étend à son contenu. */ .areader > * { min-width: 0; } .atoc { min-width: 0; max-width: 100%; } .atoc__list { min-width: 0; max-width: 100%; }/* ═══ À propos — Fondateur & CEO ═══ */ .fdr { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 48px; align-items: start; padding-top: clamp(28px,3vw,48px); border-top: 1px solid var(--line); } .fdr__img { width: 100%; height: auto; display: block; filter: grayscale(1); } .fdr__name { font-size: clamp(1.7rem,2.6vw,2.3rem); font-weight: 600; letter-spacing: -.025em; margin: .7rem 0 .5rem; } .fdr__role { font-size: 1.02rem; color: #52525b; margin: 0 0 .2rem; } .fdr__block { margin-top: 1.8rem; } .fdr__k { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6E6E77; } .fdr__list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; } .fdr__list li { position: relative; padding-left: 1.1rem; font-size: 1rem; color: var(--fg); } .fdr__list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 1px; background: #6E6E77; } .fdr__cta { margin-top: 1.9rem; } @media (max-width: 860px) { .fdr { grid-template-columns: 1fr; gap: 26px; } } /* ═══ Contact — lien CTA dans le texte + formulaire ═══ */ .lead-cta { background: var(--hp-grad, linear-gradient(100deg,#8f78ea,#5896d8)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; text-decoration: none; white-space: nowrap; } .lead-cta:hover { filter: brightness(1.08); } .cform { grid-column: 1/-1; max-width: 720px; display: grid; gap: 18px; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cform__f { display: grid; gap: 7px; } .cform__l { font-size: .92rem; font-weight: 600; color: var(--fg); } .cform__l i { color: #b91c1c; font-style: normal; } .cform input, .cform select, .cform textarea { font: inherit; font-size: 1rem; color: var(--fg); background: #fff; border: 1px solid var(--hp-line, #d4d4d8); border-radius: 0; padding: 13px 14px; min-height: 48px; width: 100%; } .cform input:focus, .cform select:focus, .cform textarea:focus { outline: 0; border-color: #8f78ea; box-shadow: 0 0 0 3px rgba(143,120,234,.15); } .cform textarea { resize: vertical; min-height: 140px; } .cform__err { color: #b91c1c; font-size: .92rem; margin: 0; } .cform__fine { font-size: .84rem; color: #6A6A73; margin: 0; } .cform button { justify-self: start; } @media (max-width: 620px) { .cform__row { grid-template-columns: 1fr; } } /* ═══ Lexique — glossaire ═══ */ .lex { grid-column: 1/-1; max-width: 860px; } .lex__list { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--hp-line, #e4e4e7); } .lex__term { padding: 18px 2px; border-bottom: 1px solid var(--hp-line, #ececee); } .lex__t { font-size: 1.02rem; font-weight: 600; color: var(--fg); margin: 0 0 .35rem; } .lex__d { margin: 0; font-size: .98rem; line-height: 1.6; color: #52525b; } /* ═══ Bascule d'accordéon — définition UNIQUE (les couches précédentes ont été purgées). Le libellé est un texte, pas un bouton : au survol, seul le TEXTE prend le dégradé. `background-image` (et non le raccourci `background`) car le raccourci réinitialise `background-clip`, ce qui repeignait un bloc dégradé par-dessus le texte. ═══ */ .sacc__x, .vsec__x { flex: none; margin-left: auto; white-space: nowrap; font-family: var(--hp-mono, ui-monospace, monospace); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #52525b; } .sacc__x::before, .vsec__x::before { content: "Découvrir \2193"; } .sacc[open] .sacc__x::before, details.vsec[open] .vsec__x::before { content: "Réduire \2191"; } .sacc__sum:hover .sacc__x, details.vsec > summary.vsec__head:hover .vsec__x { background-image: var(--hp-grad, linear-gradient(100deg, #8f78ea, #5896d8)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Bilan — champ texte (secteur « Autre », pays) */ .bp-input { font: inherit; font-size: 1rem; color: var(--fg); background: #fff; border: 1px solid var(--hp-line, #d4d4d8); border-radius: 0; padding: 13px 14px; min-height: 48px; width: 100%; max-width: 460px; } .bp-input:focus { outline: 0; border-color: #8f78ea; box-shadow: 0 0 0 3px rgba(143,120,234,.15); } /* ═══ Bilan — puces d'intro : coche verte (comme l'accueil), un peu plus grande ═══ */ .bp-check li { padding-left: 1.9rem; } .bp-check li::before { content: "\2713" !important; position: absolute; left: 0; top: 0; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; color: #22c55e; font-size: 1.15rem; font-weight: 700; line-height: 1.35; } .bp-check li::after { content: none !important; } /* ============================================================ HERO PHOTOGRAPHIQUE (Méthode · Solutions · Sécurité · Académie) ------------------------------------------------------------ Deux couches empilées. Chaque couche porte SA PROPRE surcouche sombre : en fondu enchaîné, la lisibilité du texte ne bouge donc jamais. Le fondu est en CSS pur — pas de rAF, pas de JS — donc il ne dépend pas de l'état d'activité de l'onglet. Cycle : 20 s = 9 s image 1 · 1 s fondu · 9 s image 2 · 1 s fondu. ============================================================ */ .sol-hero--photo{ position:relative; isolation:isolate; background:#0B1220; /* INK — filet de sécurité si l'image ne charge pas */ padding-top:clamp(56px,7vw,104px); padding-bottom:clamp(48px,6vw,88px); overflow:hidden; } .sol-hero--photo::before, .sol-hero--photo::after{ content:""; position:absolute; inset:0; z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; } .sol-hero--photo::before{ background-image:var(--voile),var(--shot-1); } .sol-hero--photo::after { background-image:var(--voile),var(--shot-2); opacity:0; } /* Surcouche : MÊME MÉTHODE QUE L'ACCUEIL (.hp-hero). Un dégradé horizontal qui n'assombrit QUE la colonne de texte, à gauche, et s'efface complètement avant le tiers droit — la photo reste lumineuse et lisible. On ne pose PAS de voile uniforme : cela éteindrait l'image. Posé sur chacune des deux couches, donc le contraste du texte ne bouge pas pendant le fondu enchaîné. */ .sol-hero--photo{ /* Profil calibré au contraste mesuré, pas à l'œil : c'est le voile le PLUS LÉGER qui tienne encore les seuils WCAG (4,5:1 en texte courant, 3:1 en grand texte) sur les six photos. Le premier réglage, plus clair, tombait à 1,8:1 sur l'Académie — illisible. Le tiers droit reste largement visible. */ --voile:linear-gradient(90deg, rgba(11,18,32,.90) 0%, rgba(11,18,32,.84) 40%, rgba(11,18,32,.66) 62%, rgba(11,18,32,.26) 76%, rgba(11,18,32,.02) 90%, rgba(11,18,32,0) 100%); } /* La couche 2 n'anime que sur les pages qui declarent deux images. */ .sol-hero--duo::after{ animation:shotFade 20s ease-in-out infinite; } /* ---- Les quatre pages ---- */ .sol-hero--methode{ --shot-1:image-set(url("assets/hero/methode-1.webp") type("image/webp"),url("assets/hero/methode-1.jpg") type("image/jpeg")); --shot-2:image-set(url("assets/hero/methode-2.webp") type("image/webp"),url("assets/hero/methode-2.jpg") type("image/jpeg")); } .sol-hero--solutions{ --shot-1:image-set(url("assets/hero/solutions-1.webp") type("image/webp"),url("assets/hero/solutions-1.jpg") type("image/jpeg")); --shot-2:image-set(url("assets/hero/solutions-2.webp") type("image/webp"),url("assets/hero/solutions-2.jpg") type("image/jpeg")); } .sol-hero--securite{ --shot-1:image-set(url("assets/hero/securite.webp") type("image/webp"),url("assets/hero/securite.jpg") type("image/jpeg")); } .sol-hero--academy{ --shot-1:image-set(url("assets/hero/academy.webp") type("image/webp"),url("assets/hero/academy.jpg") type("image/jpeg")); } @keyframes shotFade{ 0%,45% { opacity:0 } 50%,95% { opacity:1 } 100% { opacity:0 } } /* Le contenu passe au-dessus des deux couches. */ .sol-hero--photo > .wrap{ position:relative; z-index:1 } /* ---- Texte inversé : le hero devient sombre ---- */ .sol-hero--photo .sol-title{ color:#FAFAF7; text-shadow:0 2px 24px rgba(0,0,0,.45) } .sol-hero--photo .sol-lead, .sol-hero--photo .ac-hero__pitch, .sol-hero--photo .hero__note{ color:#D6D8DD; text-shadow:0 1px 14px rgba(0,0,0,.5) } .sol-hero--photo .acode{ color:#9BA1AC } .sol-hero--photo .acode__num{ color:#FAFAF7 } .sol-hero--photo .acode__sep{ color:#6E7581 } .sol-hero--photo .sol-hero__code{ border-top-color:rgba(250,250,247,.22) } .sol-hero--photo .amod-hero__meta{ color:#B9BDC5 } /* Le mot-clé en dégradé BRASS : le voile s'efface sur sa droite, il court donc sur la partie lumineuse de la photo. `text-shadow` ne fonctionne pas ici — le texte est un remplissage transparent découpé dans un dégradé. On passe par `drop-shadow`, qui suit la forme réelle des glyphes. */ .sol-hero--photo .grad{ text-shadow:none; filter:drop-shadow(0 2px 10px rgba(11,18,32,.62)) drop-shadow(0 1px 2px rgba(11,18,32,.5)); } /* ---- Accessibilité : mouvement réduit = image fixe ---- */ @media (prefers-reduced-motion:reduce){ .sol-hero--duo::after{ animation:none; opacity:0 } } /* ---- Mobile : bande plus courte, cadrage recentré ---- */ @media (max-width:860px){ .sol-hero--photo{ padding-top:clamp(40px,9vw,72px); padding-bottom:clamp(36px,8vw,64px); /* En colonne unique le texte occupe toute la largeur : il n'existe plus de zone à préserver, le dégradé passe donc en vertical (comme l'accueil sous 860 px) et doit être plus dense. Valeurs calibrées au contraste mesuré : le réglage précédent tombait à 2,3:1 en texte courant sur 5 des 6 photos. */ --voile:linear-gradient(180deg, rgba(11,18,32,.90) 0%, rgba(11,18,32,.80) 45%, rgba(11,18,32,.66) 100%); } .sol-hero--photo::before, .sol-hero--photo::after{ background-position:center 40% } } /* ============================================================ RÉGRESSION — CTA secondaire sur hero photographique ------------------------------------------------------------ `.btn--line` est dessiné pour un fond papier : texte quasi noir (#0B1220) et filet sombre à 15 %. Posé sur le hero sombre ajouté le 19/07, il tombait à 1,05:1 — invisible. Mesuré sur /securite-conformite/ (« La méthode »). ============================================================ */ .sol-hero--photo .btn--line{ color:#FAFAF7; border-color:rgba(250,250,247,.45); background:rgba(250,250,247,.06); } .sol-hero--photo .btn--line:hover{ border-color:rgba(250,250,247,.85); background:rgba(250,250,247,.14); } /* ============================================================ CALIBRAGE MOBILE — PAGES DE CONTENU (≤ 860 px) ============================================================ */ @media (max-width:860px){ .bp-input, .bp-field input, .cform input, .cform textarea{ font-size:16px } .sacc__roik, .acourse-note__k, .acourse-nav__k{ font-size:11.5px } .hero__note, .bp-hero__meta, .amod-hero__meta, .atoc__n, .sacc__n, .amod__cnum, .amod__code{ font-size:12px } .lead-cta, .bp-zoom__badge{ min-height:44px; display:inline-flex; align-items:center } }