`. `section[id]` ne l'atteignait pas — la bande arrivait donc systématiquement sous le header, et sous la barre de parcours quand elle est affichée. Le dégagement (82px) reste celui d'origine, mesuré depuis la hauteur du header au lieu d'être écrit en dur. */ `:where()` maintient la spécificité à 0 : la règle couvre tout sans jamais entrer en concurrence avec quoi que ce soit. */ :where([id]) { scroll-margin-top: calc(var(--head-h) + 82px); } .approach-wheel [data-target] { cursor: pointer; transition: opacity .2s var(--ease); } .approach-wheel [data-target]:hover { opacity: .8; } /* Barre de parcours (journey) — sticky sous le header, dans le flux (aucun recouvrement) */ /* +15px : conserve l'ÉCART d'origine entre le bas du header et cette barre (56px de header, `top: 71px` → 15px). Reproduire le pixel 71 aurait divisé cet écart par deux à l'insu de tout le monde. À noter : ces 15px laissent défiler le contenu de la page dans l'interstice entre les deux barres. C'est le comportement actuel, conservé tel quel — mais il ressemble à un réglage subi plutôt que choisi. `top: var(--head-h)` collerait les deux barres. À trancher. */ .journey-bar { position: sticky; top: calc(var(--head-h) + 15px); z-index: 55; overflow: hidden; background: color-mix(in srgb, var(--navy-900) 93%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; max-height: 0; opacity: 0; transition: max-height .4s var(--ease), opacity .3s, border-color .3s; } .journey-bar.show { max-height: 72px; opacity: 1; border-bottom-color: rgba(255,255,255,.08); } .journey-inner { display:flex; align-items:center; gap:26px; height:56px; } .journey-title { font-family:var(--font-head); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#8f9bbb; white-space:nowrap; } .journey-steps { list-style:none; margin:0; padding:0; display:flex; align-items:center; flex:1; justify-content:space-between; position:relative; } .journey-steps::before { content:""; position:absolute; left:14px; right:14px; top:50%; height:2px; background:rgba(255,255,255,.1); } .journey-steps li { position:relative; z-index:1; } .journey-steps a { display:flex; align-items:center; gap:9px; text-decoration:none; padding:5px 12px; border-radius:999px; background: color-mix(in srgb, var(--navy-900) 93%, transparent); transition:.25s var(--ease); } .js-num { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; font-family:var(--font-head); font-weight:700; font-size:.72rem; color:#8f9bbb; border:1px solid rgba(255,255,255,.2); background:var(--navy-800); transition:.25s var(--ease); } .js-lbl { font-family:var(--font-head); font-weight:600; font-size:.82rem; color:#aab4cc; white-space:nowrap; transition:color .25s; } .journey-steps a:hover .js-lbl { color:#fff; } .journey-steps a.active .js-num { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; box-shadow:0 6px 14px -6px var(--glow); } .journey-steps a.active .js-lbl { color:#fff; } @media (max-width: 860px){ .journey-title { display:none; } .js-lbl { display:none; } .journey-inner { height:52px; gap:0; } .journey-steps a { padding:5px 6px; } } /* Approach wheel (hero) — dynamique */ .hero-approach { position:relative; text-align:center; transform: translateY(16px); } .hero-approach .chips-label { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#8f9bbb; } .hero-approach .cert-logos { justify-content:center; } .approach-wheel { position:relative; display:grid; place-items:center; margin:10px 0; } .approach-wheel::before { content:""; position:absolute; width:80%; aspect-ratio:1; border-radius:50%; z-index:0; background:conic-gradient(from 0deg, #1e40af, #4d74ff, #7aa0ff, #1e40af); filter:blur(40px); opacity:.45; animation: spin 14s linear infinite; } .approach-wheel svg { position:relative; z-index:1; width:min(100%,300px); height:auto; filter:drop-shadow(0 12px 30px rgba(30,64,175,.35)); animation: floaty 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .approach-wheel::before, .approach-wheel svg { animation:none; } } /* Certif / accreditation logo chips (fond blanc uniforme) */ .cert-logos { display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .cert-logos.center { justify-content:center; } .cert-logo { display:inline-flex; align-items:center; justify-content:center; height:52px; min-width:92px; padding:4px 14px; background:#fff; border:1px solid rgba(255,255,255,.6); border-radius:10px; box-shadow:0 6px 16px -12px rgba(0,0,0,.3); font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.02em; color:#2c3140; } .section:not(.section--dark) .cert-logo { border-color:var(--line); box-shadow:0 6px 16px -14px rgba(20,30,60,.25); } .cert-logo img { width:auto; max-width:120px; object-fit:contain; display:block; height:28px; } .cert-logo img.cl-pci { height:28px; } .cert-logo img.cl-swift { height:19px; } .cert-logo img.cl-iso { height:42px; } .cert-logo img.cl-soc { height:42px; } /* Logos sans cadre — hero (blanc) + sections claires (fusion) */ .cert-logos--plain { gap:26px; } .cert-logos--plain .cert-logo { background:none; border:none; box-shadow:none; padding:0 4px; height:auto; min-width:0; } .section:not(.section--dark) .cert-logos--plain .cert-logo img { mix-blend-mode: multiply; height: 32px; width: auto; max-width: 140px; object-fit: contain; } .cert-logo img.cl-whiten { filter: brightness(0) invert(1); } /* Partenaires de certifications — cadres blancs uniformes (fiables pour fichiers hétérogènes) */ .cert-logos--boxed { gap:18px; flex-wrap:wrap; justify-content:center; } .cert-logos--boxed .cert-logo { background:#fff; border:1px solid var(--line); border-radius:14px; height:56px; width:120px; padding:10px 14px; box-shadow:0 10px 26px -18px rgba(20,30,60,.35); display:inline-flex; align-items:center; justify-content:center; transition:transform .25s ease, box-shadow .25s ease; } .cert-logos--boxed .cert-logo:hover { transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(20,30,60,.45); } .cert-logos--boxed .cert-logo img { max-height:30px !important; max-width:92px !important; height:auto !important; width:auto !important; object-fit:contain; mix-blend-mode:normal !important; filter:none !important; } /* Hero : bande de certifications — slots de largeur égale + équilibrage optique. Chaque fichier source contient une part de vide différente (la marque visible représente ~26% de la hauteur pour Swift, ~46% PCI, ~60% ISO, ~87% SOC 2). Les hauteurs ci-dessous compensent ce vide pour que les marques VISIBLES paraissent équivalentes — cible ~24px pour les wordmarks, ~32px pour les sceaux. */ .hero .cert-logos--plain { display: flex; justify-content: center; align-items: center; gap: clamp(30px, 4.2vw, 52px); max-width: 460px; margin-inline: auto; } .hero .cert-logos--plain .cert-logo { padding: 0; } .hero .cert-logos--plain .cert-logo img { height: 30px; width: auto; max-width: 100%; } .hero .cert-logos--plain .cert-logo img.cl-pci { height: 26px; } .hero .cert-logos--plain .cert-logo img.cl-swift { height: 22px; } .hero .cert-logos--plain .cert-logo img.cl-iso { height: 46px; } .hero .cert-logos--plain .cert-logo img.cl-soc { height: 40px; } /* Mur de logos partenaires — hauteur strictement identique pour tous */ .partner-logos { display:grid; grid-template-columns:repeat(5,1fr); gap:38px 28px; align-items:center; justify-items:center; max-width:920px; margin-inline:auto; } @media (max-width:760px){ .partner-logos { grid-template-columns:repeat(3,1fr); } } @media (max-width:460px){ .partner-logos { grid-template-columns:repeat(2,1fr); } } .partner-logos img { height:24px; width:auto; max-width:140px; object-fit:contain; mix-blend-mode:multiply; } .partner-logos img.pl-lg { height:46px; } .partner-logos img.pl-xl { height:50px; } .partner-logos img.pl-xxl { height:62px; } .partner-logos img.pl-sm { height:24px; } .partner-logos--sm img { height:20px; } /* ===== Formulaire — piège anti-robot + consentement ===== */ /* Champ leurre : invisible pour l'humain, rempli par les robots. Volontairement hors écran plutôt que display:none, que certains robots détectent. */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .cta-form .consent { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; line-height: 1.5; color: #b9c2db; margin: 2px 0 4px; cursor: pointer; } .cta-form .consent input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; } .cta-form .consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* ===================================================================== SYSTÈME DE LOGOS — composant unifié --------------------------------------------------------------------- Principe : chaque contexte fixe UNE hauteur de référence (--logo-h). Chaque logo porte un facteur optique (--k) qui compense ses proportions, pour que tous paraissent d'un poids visuel équivalent — l'objectif est la cohérence optique, pas la cohérence mathématique. Le ratio est toujours préservé (width:auto), jamais de déformation. ===================================================================== */ .logos { --logo-h: 26px; --logo-gap: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--logo-gap); } .logos > * { display: inline-flex; align-items: center; justify-content: center; flex: none; } .logos img { height: calc(var(--logo-h) * var(--k, 1)); width: auto; object-fit: contain; display: block; } /* Facteurs optiques — par famille de forme */ .k-emblem { --k: .80; } /* sceaux / badges quasi carrés : ISO 27001, AICPA SOC, PECB, ISACA */ .k-stacked { --k: .88; } /* marques sur deux lignes : PCI DSS, EC-Council */ .k-compact { --k: .92; } /* marques denses et courtes : IBM, RSA, HCL, AXA, BMC, ISC2 */ .k-word { --k: 1; } /* wordmarks standards : Splunk, Tenable, OpenText, Symantec */ .k-slim { --k: 1.14; } /* wordmarks fins et larges : SWIFT, Infosys, Moody's */ /* Contextes — seule la hauteur de référence change */ .logos--hero { --logo-h: 30px; --logo-gap: 34px; } .logos--wall { --logo-h: 26px; --logo-gap: 48px; } .logos--strip { --logo-h: 22px; --logo-gap: 34px; } /* Sur fond sombre : les logos couleur sont blanchis pour rester homogènes. À n'utiliser QUE sur des fichiers à fond transparent — un fond blanc opaque deviendrait un bloc blanc plein. En cas de doute, préférer .logos--chips. */ .logos--onDark img.k-whiten { filter: brightness(0) invert(1); opacity: .9; } /* Pastilles blanches — traitement fiable pour des fichiers hétérogènes sur fond sombre. Hauteur de pastille uniforme, logo équilibré optiquement à l'intérieur. */ .logos--chips { --logo-gap: 18px; } .logos--chips .logo-chip { background: #fff; border-radius: 14px; padding: 0 20px; height: calc(var(--logo-h) + 30px); min-width: 128px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -18px rgba(10, 5, 40, .55); } /* Sur fond clair : neutralise les fonds blancs résiduels des PNG */ .section:not(.section--dark) .logos--blend img { mix-blend-mode: multiply; } /* Formation — hub 6 familles + bandeau accréditation */ .train-hub { max-width:600px; margin:26px auto 4px; } .train-hub svg { width:100%; height:auto; display:block; } .accred-strip { max-width:660px; margin:18px auto 0; text-align:center; } .accred-strip .lbl { font-family:var(--font-head); font-weight:700; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#9aa6c4; margin-bottom:12px; } .accred-strip .partner-logos { margin:0; gap:16px 26px; } .accred-strip .partner-logos img { height:20px; mix-blend-mode:normal; filter:brightness(0) invert(1); opacity:.88; } @media(max-width:760px){ .accred-strip .partner-logos { grid-template-columns:repeat(3,1fr); } } /* Marquee de logos partenaires (défilement) */ .logo-marquee .marquee__track { gap: 60px; align-items: center; } .logo-marquee img { height: clamp(18px,2vw,24px); width: auto; object-fit: contain; mix-blend-mode: multiply; flex: none; } /* Logos à forte présence visuelle (wordmarks gras/capitales) ramenés au poids de Splunk. */ .logo-marquee img.lm-sm { height: clamp(13px,1.45vw,17px); } /* ===== Onglets d'expertises ===== */ .tabs { margin-top: 6px; } .tabs-nav { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:32px; } .tab-btn { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:var(--font-head); font-weight:600; font-size:.95rem; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background .2s ease; } .tab-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; } .tab-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } .tab-btn.is-active { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff; box-shadow:0 14px 30px -14px var(--glow); } .tab-panel { display:none; } .tab-panel.is-active { display:block; animation:tabIn .42s ease; } @keyframes tabIn { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:none; } } .tab-split { display:grid; grid-template-columns:0.82fr 1.18fr; gap:44px; align-items:start; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:40px; box-shadow:0 30px 70px -46px rgba(20,30,60,.45); } .tab-lead .tag { display:inline-block; margin-bottom:14px; } .tab-lead h3 { font-family:var(--font-head); font-size:1.55rem; line-height:1.15; margin:0 0 12px; } .tab-lead p { color:var(--muted); margin:0 0 24px; } .tab-feats { display:grid; grid-template-columns:1fr 1fr; gap:28px; } .tfeat h4 { font-family:var(--font-head); font-size:1.04rem; margin:0 0 14px; padding-bottom:11px; border-bottom:1px solid var(--line); } .check-list { list-style:none; padding:0; margin:0; display:grid; gap:11px; } .check-list li { position:relative; padding-left:28px; font-size:.93rem; color:var(--ink); line-height:1.35; } .check-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-soft); border-radius:50%; } @media (max-width:880px){ .tab-split { grid-template-columns:1fr; gap:30px; padding:30px; } .tab-feats { grid-template-columns:1fr; gap:24px; } } @media (max-width:520px){ .tab-btn { padding:11px 16px; font-size:.88rem; } } .tab-sep { display:inline-flex; align-items:center; color:var(--accent); font-weight:800; font-size:1.1rem; opacity:.55; } @media (max-width:880px){ .tab-sep { display:none; } } /* Parcours hero — flux vertical (storytelling linéaire) */ .hero-approach .flow { max-width:344px; margin:8px auto 0; text-align:left; } .flow-step { display:flex; gap:15px; align-items:flex-start; padding-bottom:20px; position:relative; text-decoration:none; cursor:pointer; } .flow-step:last-child { padding-bottom:0; } .flow-step:not(:last-child)::before { content:""; position:absolute; left:22px; top:46px; bottom:0; width:2px; background:linear-gradient(var(--accent), rgba(255,255,255,.10)); } .flow-node { flex:none; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 26px -12px var(--glow); position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease; } .flow-node svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.7; } .flow-txt { padding-top:3px; } .flow-txt b { display:block; font-family:var(--font-head); color:#fff; font-size:.98rem; margin-bottom:2px; } .flow-txt small { display:block; color:#9fb0d6; font-size:.82rem; line-height:1.32; } .flow-step:hover .flow-node { transform:translateY(-2px) scale(1.04); box-shadow:0 16px 30px -12px var(--glow); } .flow-step:hover .flow-txt b { color:#bdeff4; } /* Hero resserré (tout visible à l'atterrissage) */ .hero--tight .wrap { padding-block: clamp(30px, 3.4vw, 56px); } /* Hero pages solutions Business — occupe l'écran, contenu centré (on ne voit que le hero à l'arrivée) */ .hero--biz .wrap { padding-block: clamp(30px, 3.4vw, 56px); } .hero--biz .hero-approach { transform: none; } /* Fond du hero prolongé vers le bas (transition douce avant la section suivante) */ .hero .wrap { padding-bottom: clamp(58px, 6.5vw, 96px); } /* Visuel produit abaissé sur Business Solutions (aligne le visuel sur le contenu) */ [data-theme="business"] .hero-grid > *:last-child { margin-top: clamp(20px, 4vh, 46px); } /* Héros Banking calés EXACTEMENT sur le modèle Business (qui fait référence) : - même respiration en haut (on neutralise le padding de section posé en inline sur chaque page, qui descendait tout le contenu de ~33px) ; - colonnes à dominante texte (1.1fr .9fr) au lieu du réglage visuel-lourd (.82fr 1.18fr) qui écrasait le titre sur 6 lignes ; - visuel aligné en haut comme sur Business. !important indispensable : ces réglages sont posés en style inline page par page. */ [data-theme="banking"] .hero--tight { padding-block: 0 !important; } [data-theme="banking"] .hero-grid { grid-template-columns: 1.1fr .9fr !important; align-items: start !important; gap: 40px !important; } /* Visuels « dashboard produit » abaissés pour s'aligner sur le titre + description (on exclut le téléphone .pmp-stage et la roue .hero-approach, qui restent en haut). */ [data-theme="banking"] .rm-stage, [data-theme="banking"] .bainc-stage, [data-theme="banking"] .cb-stage, [data-theme="banking"] .cr-stage, [data-theme="banking"] .dom-stage, [data-theme="banking"] .cx-stage, [data-theme="banking"] .sx-stage { margin-top: clamp(40px, 7vh, 84px); } /* Bloc plateforme phare (ex : BAINC) */ .feat-plat { display:grid; grid-template-columns:1.15fr 1fr; border-radius:20px; overflow:hidden; text-decoration:none; background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 24%, var(--navy-900)), var(--navy-900) 78%); border:1px solid color-mix(in srgb,var(--accent) 42%, transparent); box-shadow:0 34px 66px -42px var(--glow); transition:transform .28s var(--ease), box-shadow .28s; } .feat-plat:hover { transform:translateY(-4px); box-shadow:0 46px 78px -42px var(--glow); } .feat-plat .fp-main { padding:36px 36px 32px; } .feat-plat .fp-tag { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--accent); border-radius:999px; padding:5px 13px; } .feat-plat h3 { font-family:var(--font-head); color:#fff; font-size:clamp(1.55rem,2.7vw,2.1rem); margin:14px 0 12px; letter-spacing:-.02em; } .feat-plat .fp-main > p { color:#c7cde0; font-size:1rem; line-height:1.55; } .feat-plat .more { color:#fff; margin-top:16px; display:inline-flex; gap:8px; align-items:center; font-family:var(--font-head); font-weight:600; } .fp-mods-inline { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 6px; } .fp-mod { padding:14px 16px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); transition:border-color .2s; } .feat-plat:hover .fp-mod { border-color:color-mix(in srgb,var(--accent) 45%, transparent); } .fp-mod b { display:block; color:#fff; font-family:var(--font-head); font-size:.9rem; margin-bottom:4px; } .fp-mod small { color:#aeb7d0; font-size:.8rem; line-height:1.4; } .fp-visual { position:relative; padding:26px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.03); border-left:1px solid rgba(255,255,255,.09); } .fp-visual svg, .fp-visual img { width:100%; height:auto; border-radius:12px; box-shadow:0 20px 40px -24px rgba(0,0,0,.6); } @media(max-width:820px){ .feat-plat { grid-template-columns:1fr; } .fp-visual { border-left:0; border-top:1px solid rgba(255,255,255,.09); } .fp-mods-inline { grid-template-columns:1fr; } } /* Petit visuel icône en tête de carte */ .card-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 24px -12px var(--glow); } .card-ic svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* Bloc plateforme — flux 2 modules */ .plat-flow { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -46px rgba(20,30,60,.45); } .plat-flow .pf-head { display:flex; align-items:center; gap:10px; padding:15px 24px; background:linear-gradient(100deg,var(--accent),var(--accent-2)); color:#fff; } .plat-flow .pf-head b { font-family:var(--font-head); font-size:1.05rem; } .plat-flow .pf-head small { margin-left:auto; opacity:.92; font-size:.82rem; } .pf-head .pf-dot { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 10px 2px rgba(255,255,255,.55); } .pf-cycle { display:grid; grid-template-columns:1fr auto 1fr; } .pf-stage { padding:28px 26px; } .pf-stage h3 { margin:6px 0 8px; } .pf-arrow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 12px; text-align:center; border-left:1px solid var(--line); border-right:1px solid var(--line); background:color-mix(in srgb,var(--accent) 5%, transparent); min-width:140px; } .pf-arrow-ic { font-size:1.7rem; line-height:1; color:var(--accent); font-weight:700; } .pf-arrow small { color:var(--muted); font-size:.76rem; line-height:1.35; max-width:120px; } @media(max-width:760px){ .pf-cycle { grid-template-columns:1fr; } .pf-arrow { flex-direction:row; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; } .pf-arrow-ic { transform:rotate(90deg); } .pf-arrow small { max-width:none; } } /* Bande KPI */ .kpi-band { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center; } .kpi-band .kpi-num { font-family:var(--font-head); font-weight:800; font-size:clamp(2.1rem,3.4vw,2.9rem); line-height:1; background:linear-gradient(100deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .kpi-band .kpi-lbl { margin-top:10px; color:var(--muted); font-size:.9rem; line-height:1.4; } @media(max-width:720px){ .kpi-band { grid-template-columns:1fr 1fr; } } /* Section plateforme BAINC — socle + 2 modules + bascule (style 1) */ .bplat { position:relative; padding-bottom:96px; } .bplat-cards { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:20px; position:relative; z-index:2; } .bplat-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 26px 50px -30px rgba(20,30,60,.4); } .bplat-arrow { display:flex; align-items:center; justify-content:center; } .bplat-esc { display:inline-flex; flex-direction:column; align-items:center; gap:8px; text-align:center; line-height:1.3; font-family:var(--font-head); font-weight:600; font-size:.72rem; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:14px; padding:14px 12px; max-width:118px; } .bplat-esc svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .bplat-slab { position:absolute; left:0; right:0; bottom:0; height:150px; border-radius:20px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; gap:3px; padding:24px 26px 26px; box-shadow:0 30px 60px -34px var(--glow); } .bplat-slab .bx-basetag { color:#e9d4ff; letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-head); font-weight:700; font-size:.64rem; } .bplat-slab .bx-basename { font-family:var(--font-head); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; } .bplat-slab .bx-basetl { color:#f0e2ff; font-size:.85rem; } .bplat .bx-mtag { display:inline-block; font-family:var(--font-head); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.66rem; color:var(--accent); background:var(--accent-soft); padding:5px 11px; border-radius:999px; margin-bottom:12px; } .bplat .bx-mtitle { font-family:var(--font-head); font-weight:700; font-size:1.14rem; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; } .bplat .bx-mdesc { color:var(--muted); font-size:.9rem; line-height:1.55; margin:0 0 16px; } .bplat .fx { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; } .bplat .fx li { position:relative; padding-left:26px; font-size:.86rem; line-height:1.4; color:var(--ink); } .bplat .fx li::before { content:""; position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:5px; background:var(--accent-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a100ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size:11px; background-position:center; background-repeat:no-repeat; } @media(max-width:820px){ .bplat { padding-bottom:0; } .bplat-cards { grid-template-columns:1fr; } .bplat-arrow { padding:6px 0; } .bplat-esc { flex-direction:row; max-width:none; } .bplat-slab { position:static; height:auto; margin-top:20px; border-radius:16px; } } /* Onboarding — mockup téléphone animé (hero) */ .onb-stage{position:relative;width:min(100%,224px);margin-inline:auto} .onb-phone{position:relative;width:100%;aspect-ratio:262/540;border-radius:40px;background:#0b0b12;border:2px solid #0b0b12;box-shadow:0 44px 80px -34px rgba(0,0,0,.55);padding:8px} .onb-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:72px;height:16px;border-radius:11px;background:#0b0b12;z-index:6} .onb-view{position:relative;width:100%;height:100%;border-radius:32px;background:#fff;overflow:hidden} .onb-status{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:8px 18px 3px;font-family:var(--font-head);font-size:.6rem;font-weight:700;color:#0e1330} .onb-status svg{display:block} .onb-screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:31px 15px 14px;opacity:0} .onb-nav{display:flex;align-items:center;gap:10px;margin-bottom:2px} .onb-back{width:14px;height:14px;flex:none;stroke:#0e1330;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .onb-prog{flex:1;height:4px;border-radius:2px;background:#ececf1;overflow:hidden} .onb-prog i{display:block;height:100%;border-radius:2px;background:var(--accent)} .onb-screen h5{font-family:var(--font-head);color:#0e1330;font-size:.92rem;font-weight:800;margin:4px 0 3px;letter-spacing:-.01em} .onb-fld{background:#f4f4f7;border:1px solid #ececf1;border-radius:11px;padding:5px 11px} .onb-fld span{display:block;font-family:var(--font-head);font-size:.5rem;letter-spacing:.04em;text-transform:uppercase;color:#8a90a6} .onb-fld b{display:block;font-size:.72rem;color:#0e1330;font-weight:600;margin-top:1px;font-family:var(--font-head)} .onb-btn{margin-top:auto;background:var(--accent);color:#fff;text-align:center;border-radius:12px;padding:9px;font-family:var(--font-head);font-size:.76rem;font-weight:700} .onb-up{display:flex;align-items:center;gap:10px;background:#f4f4f7;border:1px solid #ececf1;border-radius:12px;padding:8px 11px} .onb-up .ic{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;flex:none} .onb-up .ic svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .onb-up b{font-size:.74rem;color:#0e1330;font-weight:700;display:block;font-family:var(--font-head)} .onb-up small{font-size:.62rem;color:#12a150;font-weight:600} .onb-up .chk{margin-left:auto;color:#12a150;font-weight:800} .onb-cap{text-align:center;color:#8a90a6;font-size:.7rem;font-family:var(--font-head)} .onb-selfie{margin:10px auto 4px;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;background:#f0eef8} .onb-selfie::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);border-top-color:transparent;animation:onbSpin 1.5s linear infinite} .onb-selfie svg{width:52px;height:52px;stroke:#b0a4d6;fill:none;stroke-width:1.6} .onb-verif{align-items:center;justify-content:center;text-align:center;gap:6px} .onb-vcheck{width:84px;height:84px;border-radius:50%;background:rgba(18,161,80,.10);border:2px solid #12a150;display:grid;place-items:center;margin:0 auto 12px} .onb-vcheck svg{width:42px;height:42px;stroke:#12a150;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} @keyframes onbSpin{to{transform:rotate(360deg)}} .onb-screen.s1{animation:onbSc1 18s infinite} .onb-screen.s2{animation:onbSc2 18s infinite} .onb-screen.s3{animation:onbSc3 18s infinite} .onb-screen.s4{animation:onbSc4 18s infinite} .onb-screen.s5{animation:onbSc5 18s infinite} .onb-screen.s6{animation:onbSc6 18s infinite} @keyframes onbSc1{0%{opacity:0;transform:translateX(12px)}3%,14%{opacity:1;transform:translateX(0)}17%,100%{opacity:0;transform:translateX(-12px)}} @keyframes onbSc2{0%,17%{opacity:0;transform:translateX(12px)}20%,31%{opacity:1;transform:translateX(0)}34%,100%{opacity:0;transform:translateX(-12px)}} @keyframes onbSc3{0%,34%{opacity:0;transform:translateX(12px)}37%,48%{opacity:1;transform:translateX(0)}51%,100%{opacity:0;transform:translateX(-12px)}} @keyframes onbSc4{0%,51%{opacity:0;transform:translateX(12px)}54%,64%{opacity:1;transform:translateX(0)}67%,100%{opacity:0;transform:translateX(-12px)}} @keyframes onbSc5{0%,67%{opacity:0;transform:translateX(12px)}70%,81%{opacity:1;transform:translateX(0)}84%,100%{opacity:0;transform:translateX(-12px)}} @keyframes onbSc6{0%,84%{opacity:0;transform:translateX(12px)}87%,98%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}} @media (prefers-reduced-motion: reduce){ .onb-screen.s6{opacity:1;animation:none} .onb-screen.s1,.onb-screen.s2,.onb-screen.s3,.onb-screen.s4,.onb-screen.s5{animation:none} .onb-selfie::before{animation:none} .onb-cursor{animation:none} } .onb-fld.onb-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .onb-cursor{display:inline-block;width:1.5px;height:.7rem;background:var(--accent);margin-left:1px;vertical-align:-1px;animation:onbBlink 1s steps(1) infinite} @keyframes onbBlink{50%{opacity:0}} .onb-kb{margin:auto -15px -14px;background:#cfd3da;padding:6px 3px 8px;display:flex;flex-direction:column;gap:5px} .onb-krow{display:flex;justify-content:center;gap:3px;padding:0 2px} .onb-key{flex:1 1 0;min-width:0;height:23px;background:#fff;border-radius:4px;display:grid;place-items:center;font-family:var(--font-head);font-size:.58rem;color:#0e1330;box-shadow:0 1px 0 rgba(0,0,0,.28)} .onb-key.wide{flex:1.4 1 0;background:#aab0bb} .onb-key.space{flex:4.5 1 0;font-size:.52rem;color:#5a6172} .onb-key.act{background:var(--accent);color:#fff} .onb-phase{flex:1;min-width:0} .onb-phase-lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;font-family:var(--font-head)} .onb-phase-lbl span{font-size:.58rem;font-weight:700;color:#0e1330} .onb-phase-lbl b{font-size:.52rem;color:var(--accent);font-weight:700} .onb-doc{background:#f4f4f7;border:1px solid #ececf1;border-radius:12px;padding:8px 10px} .onb-doc.opt{background:#fafafb;border-style:dashed} .onb-doc-h{display:flex;align-items:center;gap:9px} .onb-doc-h .ic{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;flex:none} .onb-doc-h .ic svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .onb-doc-h b{font-size:.72rem;color:#0e1330;font-weight:700;display:block;font-family:var(--font-head)} .onb-doc-h small{font-size:.54rem;color:#8a90a6;display:block;line-height:1.3} .onb-doc-h .chk{margin-left:auto;color:#12a150;font-weight:800} .onb-doc-h .opttag{margin-left:auto;font-size:.5rem;color:var(--accent);font-weight:700;font-family:var(--font-head);text-align:right;line-height:1.25} .onb-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .onb-badges span{font-size:.5rem;color:#12a150;background:rgba(18,161,80,.10);border-radius:999px;padding:2px 7px;font-family:var(--font-head);font-weight:600} .onb-checks{display:flex;flex-direction:column;gap:5px;margin-top:8px} .onb-checks div{display:flex;align-items:center;gap:7px;font-size:.66rem;color:#0e1330;font-family:var(--font-head);font-weight:600} .onb-checks svg{width:13px;height:13px;stroke:#12a150;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .onb-note{text-align:center;color:#5a6172;font-size:.68rem;font-family:var(--font-head);line-height:1.45} .onb-screen.onb-final{opacity:1;animation:none} /* Logos partenaires fixes (peu de logos, sans défilement) */ .static-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(38px,6vw,72px); } .static-logos img { height:24px; width:auto; object-fit:contain; mix-blend-mode:multiply; } /* Cartes secteurs : 3 lignes de description maximum */ #secteurs .card p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* Roue / orbite cliquable */ .approach-wheel [data-tab] { cursor:pointer; } .approach-wheel .onodes > g { transition: opacity .2s ease; } .approach-wheel .onodes > g:hover { opacity:.82; } /* Onglets compacts (6 étapes sur une ligne) */ .tabs-nav--compact { gap:9px; } .tabs-nav--compact .tab-btn { padding:10px 15px; font-size:.86rem; } .tabs-nav--compact .tab-btn svg { width:16px; height:16px; } .tabs-nav--compact .tab-sep { font-size:.95rem; } /* Socle transverse sous les onglets */ .socle-bar { margin-top:14px; } .socle-inner { display:flex; align-items:center; justify-content:center; gap:16px; padding:16px 26px; border-radius:16px; background:linear-gradient(180deg, var(--accent-soft), transparent 92%); border:1px solid var(--line); border-top:2px solid var(--accent); } .socle-ic { flex:none; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 12px 24px -12px var(--glow); } .socle-ic svg { width:23px; height:23px; stroke:#fff; fill:none; stroke-width:1.7; } .socle-txt { flex:0 1 auto; min-width:0; } .socle-txt b { display:block; font-family:var(--font-head); font-size:1rem; margin-bottom:2px; } .socle-txt span { color:var(--muted); font-size:.9rem; } @media (max-width:680px){ .socle-inner { flex-direction:column; gap:13px; } } /* Roue hero agrandie */ .approach-wheel--lg { margin: 0; } .approach-wheel--lg svg { width: min(100%, 356px); height: auto; display: block; } /* Cas d'usage — liste (numérotée, dynamique) */ .uc-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; counter-reset:uc; } .uc-list li { position:relative; padding:13px 16px 13px 50px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); transition:transform .22s ease, border-color .22s ease, background .22s ease; } .uc-list li::before { counter-increment:uc; content:counter(uc,decimal-leading-zero); position:absolute; left:13px; top:12px; width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:#dcbcff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:.72rem; } .uc-list li:hover { transform:translateX(5px); border-color:var(--accent); background:rgba(255,255,255,.06); } .uc-list b { display:block; font-family:var(--font-head); font-size:.93rem; color:#fff; margin-bottom:2px; } .uc-list span { display:block; font-size:.82rem; color:#a9b3cf; line-height:1.4; } .uc-list a { text-decoration:none; color:inherit; display:block; } .uc-list a:hover b { color:#9fc0ff; } /* Variante : trait vertical au lieu du numéro */ .uc-list.uc-list--bar { counter-reset:none; } .uc-list.uc-list--bar li { padding-left:24px; } .uc-list.uc-list--bar li::before { content:""; left:0; top:11px; bottom:11px; width:3px; height:auto; border-radius:3px; background:linear-gradient(var(--accent), var(--accent-2)); } /* Cas d'usage — menu vertical + contenu à droite */ .uc-tabs { display:grid; grid-template-columns:minmax(220px,290px) 1fr; gap:26px; align-items:start; margin-top:6px; } .uc-menu { display:flex; flex-direction:column; gap:8px; } .uc-mbtn { position:relative; text-align:left; font-family:var(--font-head); font-weight:600; font-size:.98rem; color:#cdd5ea; background:transparent; border:1px solid transparent; border-left:3px solid transparent; padding:13px 32px 13px 16px; border-radius:12px; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; } .uc-mbtn:hover { background:rgba(255,255,255,.05); color:#fff; transform:translateX(3px); } .uc-mbtn.is-active { background:var(--accent-soft); border-color:rgba(255,255,255,.12); border-left:3px solid var(--accent); color:#fff; } .uc-mbtn.is-active::after { content:"→"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:800; font-size:.92rem; } .uc-panels { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:24px 28px; min-height:150px; } .uc-panel { display:none; } .uc-panel.is-active { display:block; animation:tabIn .4s ease; } .uc-panels .uc-list { margin-top:0; } @media (max-width:820px){ .uc-tabs { grid-template-columns:1fr; gap:16px; } .uc-menu { flex-direction:row; flex-wrap:wrap; } .uc-mbtn { border-left:1px solid transparent; } .uc-mbtn.is-active { border-left:1px solid rgba(255,255,255,.12); } } /* Plateforme modulaire (schéma hub + modules, futuriste) */ .mod-platform { position:relative; max-width:780px; margin:10px auto 36px; padding:22px 20px 16px; overflow:hidden; background:radial-gradient(ellipse at 50% 42%, #17224d 0%, #0a1024 72%); border:1px solid rgba(120,160,255,.22); border-radius:22px; box-shadow:0 44px 100px -54px rgba(30,64,175,.75); } .mod-platform::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px); background-size:34px 34px; } .mod-platform svg { width:100%; height:auto; display:block; position:relative; z-index:1; } .mod-caption { text-align:center; font-family:var(--font-head); font-size:.82rem; color:#9fb0d6; margin-top:8px; position:relative; z-index:1; } /* Plateforme — tuiles glassmorphism (option 07) */ .pf-glass{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative} .pf-glass .pfg-tile,.pf-glass .pfg-hero{position:relative;overflow:hidden;border-radius:16px;background:rgba(120,160,255,.09);border:1px solid rgba(120,160,255,.32);box-shadow:0 22px 54px -34px rgba(30,64,175,.6)} .pf-glass .pfg-tile{padding:22px;text-decoration:none;display:block;transition:transform .28s var(--ease),border-color .28s,box-shadow .28s} .pf-glass .pfg-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%);pointer-events:none} .pf-glass .pfg-tile:hover{transform:translateY(-6px);border-color:rgba(160,190,255,.7);box-shadow:0 34px 64px -34px rgba(60,130,246,.6)} .pf-glass .pfg-hero{grid-column:1/-1;padding:15px 26px;text-align:center;border-color:rgba(160,190,255,.6); background:linear-gradient(120deg,rgba(93,134,255,.45),rgba(30,64,175,.55),rgba(93,134,255,.45));background-size:220% 100%;animation:pfgshift 9s ease infinite} @keyframes pfgshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .pf-glass .pfg-hero::after{content:"";position:absolute;top:0;left:-45%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);animation:pfgsheen 5s ease-in-out infinite} @keyframes pfgsheen{0%{left:-45%}58%{left:140%}100%{left:140%}} .pf-glass b{font-family:var(--font-head);font-size:1.04rem;color:#fff;display:block;position:relative;z-index:1} .pf-glass small{color:#b8c6e8;font-size:.86rem;position:relative;z-index:1} .pf-glass .gic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5c86ff,#1e40af);margin-bottom:12px;box-shadow:0 12px 24px -10px rgba(60,130,246,.75);position:relative;z-index:1} .pf-glass .gic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media(prefers-reduced-motion:reduce){.pf-glass .pfg-hero,.pf-glass .pfg-hero::after{animation:none}} @media(max-width:640px){.pf-glass{grid-template-columns:1fr 1fr}} /* Roadmap — ascension vers le sommet (parcours de transformation digitale) */ .rm-viz a { text-decoration:none; color:inherit; } .rm-viz .ro-badge { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#3a62f5,#22d3df); color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.05rem; box-shadow:0 6px 18px rgba(18,201,214,.28); } .rm-viz .ro-title { font-family:var(--font-head); color:#fff; font-weight:600; font-size:1rem; letter-spacing:-.01em; display:block; } .rm-viz .ro-desc { color:#aebbdd; font-size:.84rem; line-height:1.45; margin-top:4px; display:block; } .rm-viz .asc { position:relative; display:flex; align-items:flex-end; gap:14px; padding:20px 0 10px; } .rm-viz .asc-slope { position:absolute; left:0; right:0; bottom:0; height:100%; z-index:0; background:linear-gradient(60deg,rgba(58,98,245,.12),rgba(18,201,214,.05)); clip-path:polygon(0 100%, 100% 0, 100% 100%); border-radius:14px; } .rm-viz .asc-step { position:relative; z-index:1; flex:1 1 0; text-align:center; } .rm-viz .asc-card { padding:14px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(95,224,234,.16); transition:transform .18s, border-color .18s, box-shadow .18s; } .rm-viz .asc-step:hover .asc-card { transform:translateY(-4px); border-color:#5fe0ea; box-shadow:0 10px 26px rgba(18,201,214,.22); } .rm-viz .asc-badge { width:36px; height:36px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#3a62f5,#22d3df); color:#fff; font-family:var(--font-head); font-weight:700; box-shadow:0 6px 16px rgba(18,201,214,.3); } .rm-viz .a1 { margin-bottom:0; } .rm-viz .a2 { margin-bottom:34px; } .rm-viz .a3 { margin-bottom:68px; } .rm-viz .a4 { margin-bottom:102px; } .rm-viz .a5 { margin-bottom:136px; } .rm-viz .asc-peak { display:block; font-family:var(--font-head); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:#5fe0ea; margin-bottom:8px; } @media(max-width:640px){ .rm-viz .asc { flex-direction:column-reverse; align-items:stretch; } .rm-viz .asc-slope { display:none; } .rm-viz .asc-step { margin-bottom:0 !important; } .rm-viz .asc-card { text-align:left; } .rm-viz .asc-badge { margin:0 0 10px; } } /* Cycle de supervision — flux horizontal (option 02) */ .c2-flow{position:relative;display:flex;justify-content:space-between;gap:10px;padding-top:8px} .c2-flow::before{content:"";position:absolute;top:46px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2),#93b4ff);border-radius:2px} .c2-pulse{position:absolute;top:42px;left:8%;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(120,170,255,.9);animation:c2run 3.4s linear infinite} .c2-pulse.b{animation-delay:1.1s}.c2-pulse.c{animation-delay:2.2s} @keyframes c2run{0%{left:8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:92%;opacity:0}} .c2-node{position:relative;flex:1;text-align:center;z-index:1} .c2-ic{width:76px;height:76px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 16px 30px -14px rgba(30,64,175,.7);transition:transform .3s} .c2-node:hover .c2-ic{transform:translateY(-5px) scale(1.04)} .c2-ic svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .c2-node h4{font-family:var(--font-head);font-weight:800;font-size:1rem;margin:0 0 4px;color:#16203a} .c2-node p{font-size:.85rem;color:#5a6785;margin:0} .c2-loop{margin-top:36px;display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--accent-2)} .c2-loop::before,.c2-loop::after{content:"";height:2px;width:min(130px,20vw);border-radius:2px} .c2-loop::before{background:linear-gradient(90deg,transparent,var(--accent-2))} .c2-loop::after{background:linear-gradient(90deg,var(--accent-2),transparent)} .c2-loop .c2-loop-in{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .c2-loop svg{width:18px;height:18px;fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:c2spin 6s linear infinite} @keyframes c2spin{to{transform:rotate(360deg)}} /* Cycle de supervision — timeline verticale (option 03) */ .c3-tl{position:relative;max-width:780px;margin:0 auto;padding:8px 0} .c3-tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(180deg,var(--accent),var(--accent-2),#93b4ff)} .c3-pulse{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(120,170,255,.9);animation:c3run 4.5s ease-in-out infinite} @keyframes c3run{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}} .c3-item{position:relative;width:50%;padding:14px 0;box-sizing:border-box} .c3-item.l{left:0;padding-right:46px;text-align:right} .c3-item.r{left:50%;padding-left:46px} .c3-dot{position:absolute;top:24px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 10px 22px -10px rgba(30,64,175,.7);z-index:2} .c3-item.l .c3-dot{right:-22px}.c3-item.r .c3-dot{left:-22px} .c3-dot svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .c3-card{display:inline-block;text-align:left;background:#fff;border:1px solid rgba(30,64,175,.14);border-radius:16px;padding:16px 20px;box-shadow:0 20px 44px -30px rgba(30,64,175,.5);transition:transform .28s,border-color .28s} .c3-card:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.5)} .c3-card h4{font-family:var(--font-head);font-weight:800;font-size:1.02rem;margin:0 0 4px;color:#16203a} .c3-card p{font-size:.88rem;color:#5a6785;margin:0} .cmp-lbl{font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin:0 0 22px} @media(max-width:820px){.c2-flow{flex-wrap:wrap;gap:22px}.c2-flow::before,.c2-pulse{display:none}.c2-node{flex:1 1 40%} .c3-item,.c3-item.r{width:100%;left:0;text-align:left;padding-left:56px;padding-right:0}.c3-item.l{text-align:left;padding-right:0}.c3-tl::before{left:22px}.c3-item.l .c3-dot,.c3-item.r .c3-dot{left:0;right:auto}.c3-pulse{left:22px}} /* Plateforme — cockpit / dashboard (option 08) */ .pf-dash{max-width:820px;margin:0 auto;background:linear-gradient(160deg,#0e1636,#0a0f22);border:1px solid rgba(120,160,255,.2);border-radius:20px;padding:24px;box-shadow:0 44px 100px -54px rgba(30,64,175,.75)} .pf-dash-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px;font-family:var(--font-head);color:#9fb0d6;font-size:.8rem} .pf-dash-live{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700} .pf-dash-live .d{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:socpulse 2s infinite} .pf-dash-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px} .pf-dash-kpi>div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;text-align:center} .pf-dash-kpi .n{font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:#fff} .pf-dash-kpi .l{font-size:.72rem;color:#9fb0d6;margin-top:4px} .pf-dash-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .pf-dash-mods>div{display:flex;align-items:center;gap:9px;background:rgba(120,160,255,.08);border:1px solid rgba(120,160,255,.22);border-radius:10px;padding:12px 14px;font-size:.86rem;color:#dbe4ff;font-family:var(--font-head);font-weight:600} .pf-dash-mods .ok{width:7px;height:7px;border-radius:50%;background:#34d399;flex:none;box-shadow:0 0 8px #34d399} @media(max-width:600px){.pf-dash-kpi,.pf-dash-mods{grid-template-columns:1fr 1fr}} /* Console SOC "live" (page Services managés) */ .soc-console { background:linear-gradient(160deg,#0c1330,#090e20); border:1px solid rgba(120,160,255,.2); border-radius:20px; padding:20px; box-shadow:0 34px 80px -46px rgba(30,64,175,.7); position:relative; overflow:hidden; } .soc-console::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,#4d74ff,transparent); animation:socscan 3.4s linear infinite; opacity:.7; } @keyframes socscan { 0%{transform:translateY(0)} 100%{transform:translateY(360px)} } .soc-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:16px; font-family:var(--font-head); font-size:.76rem; color:#9fb0d6; } .soc-live { display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; } .soc-live .dot { width:9px; height:9px; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:socpulse 2s infinite } @keyframes socpulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)} 70%{box-shadow:0 0 0 9px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} } .soc-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px } .soc-kpi { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 8px; text-align:center } .soc-kpi .k-num { font-family:var(--font-head); font-weight:800; font-size:1.12rem; color:#fff; white-space:nowrap } .soc-kpi .k-lbl { font-size:.68rem; color:#9fb0d6; margin-top:4px } .soc-feed { display:grid; gap:8px } .feed-row { display:flex; align-items:center; gap:10px; font-size:.82rem; color:#c4cce0; background:rgba(255,255,255,.035); border-radius:10px; padding:10px 12px } .feed-row .sev { width:8px; height:8px; border-radius:50%; flex:none } .feed-row .ft { margin-left:auto; font-size:.7rem; color:#7f8db0 } .sev.high{background:#ef4444;box-shadow:0 0 8px #ef4444} .sev.med{background:#f59e0b} .sev.low{background:#3b82f6} @media(max-width:520px){ .soc-kpis{ grid-template-columns:repeat(2,1fr) } } /* Cartes services à icône */ .svc-ic { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 14px 28px -14px var(--glow); margin-bottom:16px; } .svc-ic svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .section--dark .svc-ic { box-shadow:0 14px 28px -14px var(--glow); } /* Cartes services — style en-tête + chevron */ .svc-card2 { position:relative; display:block; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px 24px; text-decoration:none; box-shadow:0 10px 30px -24px rgba(20,30,60,.35); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; } .svc-card2:hover { transform:translateY(-4px); box-shadow:0 26px 52px -30px rgba(20,30,60,.5); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); } .svc2-top { display:flex; align-items:center; gap:13px; margin-bottom:13px; } .svc2-ic { flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, var(--accent) 5%, #fff)); border:1px solid color-mix(in srgb, var(--accent) 13%, #fff); } .svc2-ic svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .svc2-head { flex:1; min-width:0; padding-top:2px; } .svc2-fn { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:999px; margin-bottom:6px; } /* Groupes de conformités par famille */ .opt-group + .opt-group { margin-top:38px; } .opt-group-h { display:flex; align-items:center; gap:12px; font-family:var(--font-head); font-size:1.12rem; margin:0 0 18px; color:var(--ink); } .opt-group-h::before { content:""; width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); } /* Organisation par fonction NIST (ligne : label + solutions) */ .nist-fn-row { display:grid; grid-template-columns:206px 1fr; gap:30px; align-items:start; padding:28px 0; border-top:1px solid var(--line); } .nist-fn-row:first-child { border-top:none; padding-top:4px; } .nist-fn-tag { display:inline-flex; align-items:center; font-family:var(--font-head); font-weight:800; font-size:1.02rem; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:8px 18px; border-radius:11px; box-shadow:0 12px 24px -14px var(--glow); margin-bottom:11px; } .nist-fn-desc { color:var(--muted); font-size:.88rem; line-height:1.5; margin:0; } .nist-fn-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:900px){ .nist-fn-row { grid-template-columns:1fr; gap:16px; } .nist-fn-cards { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .nist-fn-cards { grid-template-columns:1fr; } } .svc2-eyebrow { display:block; font-family:var(--font-head); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; } .svc2-head h3 { font-family:var(--font-head); font-size:1.06rem; margin:0; color:var(--ink); line-height:1.18; } .svc2-chev { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:.25s var(--ease); } .svc2-chev svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .svc-card2:hover .svc2-chev { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .svc-card2 p { color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; } /* Liste "barre verticale + titre + texte" (style référence) */ .feat-list { display:grid; grid-template-columns:1fr 1fr; gap:30px 46px; } @media (max-width:760px){ .feat-list { grid-template-columns:1fr; gap:26px; } } a.feat-item { position:relative; display:block; padding-left:22px; text-decoration:none; transition:transform .2s var(--ease); } .feat-item::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:linear-gradient(var(--accent), var(--accent-2)); transition:width .2s ease; } .feat-item h3 { font-family:var(--font-head); font-size:1.12rem; margin:0 0 8px; color:var(--ink); transition:color .2s ease; } .feat-item p { color:var(--muted); font-size:.93rem; line-height:1.55; margin:0; } a.feat-item:hover { transform:translateX(3px); } a.feat-item:hover::before { width:4px; } a.feat-item:hover h3 { color:var(--accent); } /* CERT band (dans Services managés) */ .cert-band { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 24px; border-radius:14px; margin-bottom:34px; background:linear-gradient(135deg,#7f1620,#a4111f); border:1px solid rgba(255,120,120,.3); border-left:4px solid #ff6b6b; box-shadow:0 26px 54px -32px rgba(164,17,31,.75); } .cert-band .cb-eyebrow { font-family:var(--font-head); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#ffc9c9; font-weight:700; } .cert-band h3 { color:#fff; margin:5px 0 3px; } .cert-band p { color:#ffdadd; font-size:.92rem; margin:0; } /* Avantages MSSP — cartes compactes */ .adv3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .adv3 .adv { position:relative; display:flex; gap:14px; align-items:flex-start; padding:20px 20px 20px 24px; border-radius:14px; background:#fff; border:1px solid rgba(30,64,175,.12); box-shadow:0 16px 38px -30px rgba(30,64,175,.5); transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; } .adv3 .adv::before { content:""; position:absolute; left:0; top:20px; width:3px; height:30px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--accent-2),var(--accent)); } .adv3 .adv:hover { transform:translateY(-4px); border-color:rgba(59,130,246,.45); box-shadow:0 26px 48px -30px rgba(59,130,246,.5); } .adv3 .adv-ic { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent-2),var(--accent)); } .adv3 .adv-ic svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .adv3 .adv b { display:block; font-family:var(--font-head); font-size:.98rem; color:#16203a; margin-bottom:3px; } .adv3 .adv span { font-size:.86rem; color:#5a6785; line-height:1.5; } @media(max-width:820px){ .adv3 { grid-template-columns:1fr; } } /* Capacités — rangées numérotées (variante de mise en page) */ .cap-num { display:grid; max-width:880px; margin:0 auto; } .cap-num .capn { display:flex; gap:22px; align-items:flex-start; padding:22px 6px; border-top:1px solid rgba(30,64,175,.12); } .cap-num .capn:last-child { border-bottom:1px solid rgba(30,64,175,.12); } .cap-num .capn .idx { flex:none; width:34px; font-family:var(--font-head); font-weight:800; font-size:1.18rem; background:linear-gradient(135deg,var(--accent-2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .cap-num .capn b { display:block; font-family:var(--font-head); font-size:1.06rem; color:var(--ink); margin-bottom:4px; } .cap-num .capn span { color:var(--muted); font-size:.94rem; line-height:1.55; } /* Grille de solutions — tuiles compactes (badge NIST + description) */ .sol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .sol-tile { position:relative; display:block; border-radius:14px; padding:16px 16px 15px; text-decoration:none; background:rgba(120,160,255,.08); border:1px solid rgba(120,160,255,.26); transition:transform .22s var(--ease), border-color .22s, box-shadow .22s; } .sol-tile:hover { transform:translateY(-4px); border-color:rgba(160,190,255,.6); box-shadow:0 24px 44px -30px rgba(30,64,175,.6); } .sol-nist { position:absolute; top:12px; right:12px; font-family:var(--font-head); font-weight:700; font-size:.57rem; letter-spacing:.05em; text-transform:uppercase; color:#9db8ff; border:1px solid rgba(120,160,255,.35); background:rgba(59,130,246,.1); border-radius:999px; padding:3px 8px; } .sol-ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,#5c86ff,#1e40af); margin-bottom:11px; } .sol-ic svg { width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .sol-tile b { font-family:var(--font-head); font-size:.95rem; color:#fff; display:block; margin-bottom:3px; } .sol-tile small { color:#aebbdd; font-size:.79rem; line-height:1.4; display:block; } @media(max-width:820px){ .sol-grid { grid-template-columns:1fr 1fr; } } @media(max-width:520px){ .sol-grid { grid-template-columns:1fr; } } /* Cartes minimalistes soulignées (style 11) */ .min-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .min-cards .mc { position:relative; padding:22px 4px 4px; transition:transform .25s var(--ease); } .min-cards .mc::before { content:""; position:absolute; top:0; left:0; width:38px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s; } .min-cards .mc:hover { transform:translateY(-3px); } .min-cards .mc:hover::before { width:64px; } .min-cards .mc h3 { font-family:var(--font-head); font-weight:800; font-size:1.06rem; color:var(--ink); margin:0 0 6px; } .min-cards .mc p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; } @media(max-width:820px){ .min-cards { grid-template-columns:1fr 1fr; } } /* Fusion cycle + capacités */ .icn { fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* Design surbrillance croisée (fb) */ .fb { display:grid; grid-template-columns:290px 1fr; gap:36px; align-items:start; } .fb-cycle { list-style:none; margin:0; padding:0; position:relative; } .fb-cycle::before { content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2),#93b4ff); opacity:.3; } .fb-node { position:relative; display:flex; align-items:center; gap:14px; padding:11px 10px; border-radius:10px; cursor:pointer; transition:.2s; } .fb-node .n { position:relative; z-index:1; flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1rem; color:#3b62d6; background:#eef3ff; border:2px solid #fff; transition:.2s; } .fb-node b { font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--ink); } .fb-node.on { background:#eef3ff; } .fb-node.on .n { background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; transform:scale(1.06); } .fb-cards { display:grid; gap:12px; } .fb-card { display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:14px; background:#fff; border:1px solid rgba(30,64,175,.12); transition:.25s; } .fb-card .fbic { flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:#eef3ff; transition:.2s; } .fb-card .fbic svg { width:20px; height:20px; stroke:#3b62d6; transition:.2s; } .fb-card b { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--ink); display:block; margin-bottom:3px; } .fb-card span { color:var(--muted); font-size:.9rem; line-height:1.5; } .fb-card.on { border-color:transparent; background:linear-gradient(135deg,var(--accent-2),var(--accent)); transform:translateX(5px); box-shadow:0 20px 40px -22px rgba(30,64,175,.7); } .fb-card.on .fbic { background:rgba(255,255,255,.2); } .fb-card.on .fbic svg { stroke:#fff; } .fb-card.on b { color:#fff; } .fb-card.on span { color:#dbe6ff; } /* Design ruban animé (fc) */ .fc-track { position:relative; height:2px; margin:6px 6% 28px; background:linear-gradient(90deg,var(--accent),var(--accent-2),#93b4ff); border-radius:2px; } .fc-pulse { position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(120,170,255,.9); animation:fcrun 3.6s linear infinite; } .fc-pulse.b { animation-delay:1.2s; } .fc-pulse.c { animation-delay:2.4s; } @keyframes fcrun { 0%{left:0;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0} } .fc-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } .fc-card { position:relative; padding:20px 16px; border-radius:14px; background:#fff; border:1px solid rgba(30,64,175,.12); box-shadow:0 16px 36px -30px rgba(30,64,175,.5); transition:.25s; } .fc-card .fc-top { display:flex; align-items:center; gap:10px; margin-bottom:11px; } .fc-ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent-2),var(--accent)); } .fc-ic svg { width:20px; height:20px; stroke:#fff; } .fc-step { font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.06em; color:var(--accent-2); } .fc-card h3 { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--ink); display:block; margin:0 0 6px; } .fc-card p { color:var(--muted); font-size:.85rem; margin:0; line-height:1.5; } .fc-card:hover { transform:translateY(-6px); border-color:rgba(59,130,246,.55); box-shadow:0 30px 52px -30px rgba(59,130,246,.6); } .fc-loop { margin-top:26px; display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--accent-2); } .fc-loop::before,.fc-loop::after { content:""; height:2px; width:90px; border-radius:2px; } .fc-loop::before { background:linear-gradient(90deg,transparent,var(--accent-2)); } .fc-loop::after { background:linear-gradient(90deg,var(--accent-2),transparent); } @media(max-width:820px){ .fb { grid-template-columns:1fr; } .fc-cards { grid-template-columns:1fr 1fr; } } /* Option 2 finalisée — phase alignée sur la box + ligne animée au-dessus */ .fb2 { position:relative; } .fb2-rows { position:relative; } .fb2-spine { position:absolute; left:19px; top:12px; bottom:12px; width:2px; border-radius:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2),#93b4ff); opacity:.4; } .fb2-spine .d { position:absolute; left:-4px; top:0; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(120,170,255,.9); animation:fb2run 4.6s ease-in-out infinite; } @keyframes fb2run { 0%{top:0;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:100%;opacity:0} } .fb2-row { position:relative; display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:center; padding:5px 0; } .fb2-phase { display:flex; align-items:center; gap:13px; } .fb2-phase .n { position:relative; z-index:1; flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1rem; color:#3b62d6; background:#eef3ff; border:2px solid #fff; transition:.22s; } .fb2-phase b { font-family:var(--font-head); font-weight:700; font-size:1.02rem; color:var(--ink); transition:.22s; } .fb2-card { display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:14px; background:#fff; border:1px solid rgba(30,64,175,.12); transition:.25s; } .fb2-card .fbic { flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:#eef3ff; transition:.2s; } .fb2-card .fbic svg { width:20px; height:20px; stroke:#3b62d6; transition:.2s; } .fb2-card h3 { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--ink); display:block; margin:0 0 3px; } .fb2-card span { color:var(--muted); font-size:.9rem; line-height:1.5; } .fb2-row:hover .fb2-card { border-color:transparent; background:linear-gradient(135deg,var(--accent-2),var(--accent)); transform:translateX(5px); box-shadow:0 20px 40px -22px rgba(30,64,175,.7); } .fb2-row:hover .fb2-card .fbic { background:rgba(255,255,255,.2); } .fb2-row:hover .fb2-card .fbic svg { stroke:#fff; } .fb2-row:hover .fb2-card h3 { color:#fff; } .fb2-row:hover .fb2-card span { color:#dbe6ff; } .fb2-row:hover .fb2-phase .n { background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; transform:scale(1.06); } .fb2-row:hover .fb2-phase b { color:var(--accent); } .fb2-loop { margin-top:28px; display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--accent-2); } .fb2-loop::before,.fb2-loop::after { content:""; height:2px; width:90px; border-radius:2px; } .fb2-loop::before { background:linear-gradient(90deg,transparent,var(--accent-2)); } .fb2-loop::after { background:linear-gradient(90deg,var(--accent-2),transparent); } @media(max-width:820px){ .fb2-spine{ display:none; } .fb2-row{ grid-template-columns:1fr; gap:8px; } } /* section heading block */ .head-block { max-width: 640px; margin-bottom: clamp(34px,5vw,54px); } .head-block.center { margin-inline:auto; } .head-block .lead { margin-top: 16px; } /* ----- Real logo ----- */ .logo-img { height: 40px; width: auto; display:block; } .site-foot .logo-img { height: 38px; } /* Logo Intervalle réel (transparent, texte blanc) */ .brand-real { height: 38px; width: auto; display:block; } .site-foot .brand-real { height: 38px; } /* ----- Hero offering wheel ----- */ .hero-visual { position: relative; z-index: 2; display:grid; place-items:center; } .wheel { width: min(100%, 372px); height:auto; overflow: visible; } .owheel { width: min(100%, 420px); height:auto; overflow: visible; } /* Roue du hero : chaque secteur est un lien vers sa business unit */ .wheel-seg-link { cursor: pointer; outline: none; transition: filter .25s var(--ease), opacity .25s var(--ease); } .wheel-seg-link path[fill-opacity] { transition: fill-opacity .25s var(--ease); } .wheel-seg-link:hover { filter: brightness(1.22) saturate(1.12); } /* Les pétales extérieurs sont très translucides : on les densifie au survol pour que l'affordance de clic soit évidente. */ .wheel-seg-link:hover path[fill-opacity], .wheel-seg-link:focus-visible path[fill-opacity] { fill-opacity: .28; } .wheel-seg-link:focus-visible { filter: brightness(1.22) saturate(1.12); outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 10px; } .wheel:has(.wheel-seg-link:hover) .wheel-seg-link:not(:hover) { opacity: .55; } .owheel [data-seg], .owheel [data-lbl] { transition: opacity .3s var(--ease); } .wheel .spin { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; } .wheel .spin-rev { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite reverse; } @keyframes spin { to { transform: rotate(360deg); } } .wheel text { font-family: var(--font-head); } @media (prefers-reduced-motion: reduce){ .wheel .spin, .wheel .spin-rev { animation: none; } } /* ----- Client references marquee ----- */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display:flex; align-items:center; gap: clamp(40px,6vw,72px); width:max-content; animation: marq 32s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ref-logo { font-family: var(--font-head); font-weight:700; font-size: clamp(1.1rem,2vw,1.5rem); letter-spacing:-.02em; color:#8f9bbb; white-space:nowrap; transition: color .25s; } .marquee:hover .ref-logo { color:#c6cee4; } /* Logos clients (images) — hauteur normalisée, rendu sobre sur fond sombre */ .ref-logo { display:flex; align-items:center; flex:none; } .ref-logo img { height: clamp(18px,2vw,24px); width:auto; display:block; object-fit:contain; opacity:.60; transition: opacity .25s; } .marquee:hover .ref-logo img { opacity:.95; } /* Emblèmes carrés (HSBC, AXA, Fransabank, BEA…) — un peu plus hauts pour un poids visuel équivalent aux wordmarks */ .ref-logo img.rl-emb { height: clamp(26px,3vw,34px); } /* Marquee partenaires — fond clair, logos en couleur d'origine, taille alignée sur le marquee clients */ .marquee--partners .pl-logo { display:flex; align-items:center; flex:none; } .marquee--partners .pl-logo img { height: clamp(18px,2vw,24px); width:auto; display:block; object-fit:contain; } .marquee--partners .pl-logo img.pl-emb { height: clamp(26px,3vw,34px); } .marquee--partners .pl-logo img.pl-sm { height: clamp(15px,1.7vw,20px); } .section:not(.section--dark) .marquee--partners .pl-logo img { mix-blend-mode:multiply; } @media (prefers-reduced-motion: reduce){ .marquee__track { animation: none; flex-wrap:wrap; justify-content:center; } } /* ----- Line icons (SVG, no emoji) ----- */ .ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .feature .ic { width:46px; height:46px; } /* ----- Offering breakdown (interactive) ----- */ .offer-split { display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px,5vw,64px); align-items:center; } @media (max-width: 920px){ .offer-split { grid-template-columns: 1fr; } } .offer-wheel-wrap { display:grid; place-items:center; } .poles { display:flex; flex-direction:column; } .pole-row { display:flex; gap:18px; align-items:flex-start; padding: 20px 14px; border-top:1px solid rgba(255,255,255,.09); border-radius: 14px; transition: background .3s var(--ease); cursor:default; } .poles .pole-row:last-child { border-bottom:1px solid rgba(255,255,255,.09); } .pole-row:hover { background: rgba(255,255,255,.04); } .pole-row .dot { width:12px; height:12px; border-radius:50%; margin-top:6px; flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.05); } .pole-row h3 { color:#fff; margin-bottom:4px; } .pole-row p { color:#9aa6c0; font-size:.9rem; } .pole-row .subs { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .pole-row .subs span { font-size:.74rem; color:#c6cee4; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); } .pole-row.active { background: rgba(255,255,255,.05); } /* Wordmark (matches Intervalle logo: italic display + tracked descriptor) */ .brand-name > span:first-child { font-style: italic; font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; } /* Poles on a light section */ .section:not(.section--dark) .pole-row { border-color: var(--line); } .section:not(.section--dark) .pole-row:hover, .section:not(.section--dark) .pole-row.active { background: var(--paper); } .section:not(.section--dark) .pole-row h3 { color: var(--ink); } .section:not(.section--dark) .pole-row p { color: var(--muted); } .section:not(.section--dark) .pole-row .subs span { color: var(--ink); border-color: var(--line); background: var(--paper); } /* Centered stat items */ .stats.stats--center .stat { text-align: center; } /* CTA contact form */ .cta-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,54px); align-items:center; text-align:left; } @media (max-width: 860px){ .cta-grid { grid-template-columns: 1fr; } } .cta-form { display:grid; gap:10px; } .cta-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width: 520px){ .cta-form .row2 { grid-template-columns:1fr; } } .cta-form input, .cta-form textarea { width:100%; padding:13px 15px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color:#fff; font:inherit; font-size:.92rem; resize:vertical; } .cta-form input::placeholder, .cta-form textarea::placeholder { color:#8f9bbb; } .cta-form input:focus, .cta-form textarea:focus { outline:none; border-color: var(--accent); background: rgba(255,255,255,.09); } .cta-form button { justify-content:center; margin-top:4px; } /* ===== Vibrance & motion pass ===== */ /* airy tinted section (adds variety between light sections) */ .section--tint { background: linear-gradient(180deg, #e9f1ff 0%, #f5fbff 55%, #ffffff 100%); } /* animated gradient keywords */ .grad-text { background-size: 220% 100%; animation: shimmer 7s ease infinite; } @keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* gently floating wheel + pulsing core */ .hero .wheel, .offer-wheel-wrap .wheel { animation: floaty 7s ease-in-out infinite; filter: drop-shadow(0 14px 40px rgba(120,60,255,.28)); } /* Aurora halo behind the wheel */ .hero-visual, .offer-wheel-wrap { position: relative; } .hero-visual > .wheel, .offer-wheel-wrap > .wheel { position: relative; z-index: 1; } .hero-visual::before, .offer-wheel-wrap::before { content:""; position:absolute; z-index:0; width:84%; aspect-ratio:1; left:50%; top:50%; border-radius:50%; pointer-events:none; background: conic-gradient(from 0deg, #1e40af, #12c9d6, #a100ff, #1e40af); filter: blur(42px); opacity:.45; animation: auroraSpin 16s linear infinite; } @keyframes auroraSpin { from { transform:translate(-50%,-50%) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .hero-visual::before, .offer-wheel-wrap::before { animation:none; transform:translate(-50%,-50%); } } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .wheel .core-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:.25; transform: scale(1); } 50% { opacity:.6; transform: scale(1.08); } } .owheel [data-seg] { transition: opacity .25s var(--ease), stroke-width .25s var(--ease); } @media (prefers-reduced-motion: reduce){ .hero .wheel, .offer-wheel-wrap .wheel, .wheel .core-pulse, .grad-text { animation: none; } } /* Trois principes — no icons, wider, airier */ .big-features { gap: clamp(26px, 4vw, 56px); } .big-features .feature { padding-top: 6px; } .big-features .kicker { height: 4px; width: 52px; margin-bottom: 22px; } .big-features .feature h3 { font-size: clamp(1.3rem, 2vw, 1.72rem); margin-bottom: 12px; } .big-features .feature p { font-size: 1.02rem; color: var(--muted); max-width: 34ch; } /* Offering — compact, lively */ #offre { padding-block: clamp(44px, 5vw, 74px); } .offer-split { align-items: stretch; } .poles { gap: 2px; justify-content: center; } .pole-row { padding: 13px 14px; transition: background .3s var(--ease), transform .3s var(--ease); align-items: center; } .pole-row:hover { transform: translateX(6px); } .pole-row .dot { width: 12px; height: 12px; margin-top: 0; } .pole-row h3 { font-size: 1.02rem; margin-bottom: 3px; } .pole-row p { font-size: .86rem; margin-bottom: 0; } .pole-row .subs { margin-top: 8px; gap: 5px; } .pole-row .subs span { font-size: .7rem; padding: 3px 8px; } /* keep hero compact + smooth wheel highlight */ .hero .wheel { width: min(100%, 452px); } .owheel [data-seg], .owheel [data-lbl] { transition: opacity .25s var(--ease); } /* ========================================================================== MEGA-MENU — navigation globale (v28) -------------------------------------------------------------------------- Portée : tout est scopé sous `.nav-links--mega`, `.nav-item` et `.mega`. Les pages qui utilisent encore l'ancien header (`.nav-links` + liens directs) ne sont pas affectées. Aucun token nouveau : on réutilise --accent / --accent-2 / --glow / --navy-* / --font-head / --ease. `--mm-accent` = la couleur la plus lisible de la paire du thème, choisie pour le contraste sur fond navy foncé. v28 — règle d'or : aucun panneau ne défile. Le panneau Cyber tient sur UNE seule rangée de 6 colonnes, sans descriptions, et sa colonne la plus haute (Conformité, 9 entrées) mesure environ 400px, très en dessous du garde-fou `max-height: min(72vh, 560px)`. ========================================================================== */ /* ----- Barre supérieure : traitement premium ----- NOTE : le bloc `.site-head` principal est ~1 300 lignes plus haut. Celui-ci ne conserve que l'état `.is-stuck`. Les déclarations de base (fond, bordure, transition) ont été remontées dans le bloc d'origine pour qu'il n'existe qu'un seul endroit où le header se décrit. */ .site-head.is-stuck { background: var(--navy-900); border-bottom-color: transparent; box-shadow: 0 14px 34px -26px rgba(0,0,0,.95); } .brand { transition: opacity .22s var(--ease); } .brand:hover { opacity: .8; } /* ----- Barre : items de premier niveau ----- */ .nav-links--mega { align-items: center; gap: 2px; } /* Pas de `position` ici : le panneau doit se caler sur `.site-head` (sticky, donc positionné) pour occuper toute la largeur de la fenêtre. */ .nav-item { display: flex; align-items: center; } /* Même dessin que `.nav-links a` : hauteur, graisse, rayon et gouttière identiques, pour que les pages à menu simple et la page à méga-menu ne trahissent pas deux systèmes différents. */ .nav-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 8px 8px; border-radius: var(--radius-ui); font-family: var(--font-head); font-size: .875rem; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; color: rgba(255,255,255,.86); position: relative; transition: color .2s var(--ease), background .2s var(--ease); } .nav-trigger .chev { width: 12px; height: 12px; opacity: .45; transition: transform .32s cubic-bezier(.34, 1.32, .64, 1), opacity .22s var(--ease); } .nav-trigger:hover, .nav-item.is-open > .nav-trigger { color: #fff; background: rgba(255,255,255,.07); } .nav-trigger:hover .chev { opacity: .8; } .nav-item.is-open > .nav-trigger .chev { transform: rotate(180deg); opacity: 1; } /* Blanc, pour la même raison que `.nav-links > a:focus-visible` : sur les pages cyber l'accent ne tient pas le 3:1 réglementaire sur fond header. */ .nav-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color:#fff; } /* Le trait accentué ne se déclenche plus au survol — il ne marque que l'élément dont le panneau est ouvert, et rattache visuellement le panneau à son déclencheur. 1,5px : un filet, pas un surlignage. */ .nav-trigger::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 1.5px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav-item.is-open > .nav-trigger::after { transform: scaleX(1); opacity: 1; } /* ----- La business unit courante ----- */ /* Le visiteur doit toujours savoir quelle BU il parcourt : libellé à pleine opacité et filet accentué rendu permanent. Le filet reste à .55 pour ne pas se confondre avec l'état ouvert — dont la règle, plus spécifique, le repasse à 1 sans rupture visuelle quand le panneau se déplie. */ .nav-trigger.is-current { color: #fff; } .nav-trigger.is-current::after { transform: scaleX(1); opacity: .55; } /* ----- Le panneau pleine largeur ----- */ .mega { --mm-accent: var(--accent-2); position: absolute; top: 100%; left: 0; right: 0; z-index: 59; background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.09); box-shadow: 0 44px 90px -26px rgba(0,0,0,.8); /* Garde-fou : le contenu doit tenir naturellement bien en deçà. */ max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-8px); transition: opacity .22s var(--ease), transform .22s var(--ease); } .mega.is-open { opacity: 1; transform: none; } .mega[hidden] { display: none; } .mega[data-theme="cyber"] { --mm-accent: #3b82f6; } .mega[data-theme="business"] { --mm-accent: #12c9d6; } .mega[data-theme="banking"] { --mm-accent: #a855f7; } /* Sécurité : aucun pseudo-élément décoratif ne doit apparaître dans le panneau, quel que soit ce qui est ajouté plus tard à `.nav-links a`. */ .mega a::after { content: none; } /* Plus d'aside : la grille occupe toute la largeur, un peu plus large que le `--maxw` du site pour laisser respirer les 6 colonnes Cyber. */ .mega-inner { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(18px, 1.8vw, 24px); padding-block: clamp(22px, 2.2vw, 30px); max-width: 1320px; align-items: start; } /* Business : deux groupes seulement, on garde des colonnes confortables alignées à gauche plutôt que deux colonnes étirées. */ .mega-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 24px clamp(36px, 5vw, 72px); justify-content: start; } /* Cyber : UNE rangée de 6 colonnes, ordre imposé par le client. */ .mega--cyber .mega-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px clamp(12px, 1.5vw, 22px); justify-content: stretch; } /* ----- Intitulé de colonne (micro-label, style .eyebrow/.chips-label) ----- */ .mm-h { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .66rem; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: #8f9bbb; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .mm-h svg { width: 14px; height: 14px; flex: none; color: var(--mm-accent); margin-top: 1px; } .mega .mm-h a { color: inherit; font-size: inherit; transition: color .2s; } .mega .mm-h a:hover { color: #fff; } /* Deux lignes réservées : les 6 filets de colonne restent alignés. */ .mega--cyber .mm-h { min-height: calc(2 * 1.35em); } /* ----- Liens du panneau ----- */ .mm-list { list-style: none; margin: 0; padding: 0; } .mega .mm-link { display: block; padding: 7px 9px; margin-inline: -9px; border-radius: var(--radius-ui); transition: background .18s var(--ease), color .18s var(--ease); } .mega .mm-link b { display: block; font-family: var(--font-head); font-weight: 600; font-size: .86rem; line-height: 1.35; letter-spacing: -.01em; color: #e8ecf7; } .mega .mm-link span { display: block; font-size: .73rem; line-height: 1.4; color: #8390ae; margin-top: 2px; } .mega .mm-link:hover, .mega .mm-link:focus-visible { background: rgba(255,255,255,.05); } .mega .mm-link:hover b, .mega .mm-link:focus-visible b { color: #fff; } .mega .mm-link:hover span { color: #a9b4cd; } /* Cyber : libellés seuls, rythme vertical resserré (≈27px par entrée). */ .mega--cyber .mm-link { padding: 5px 8px; margin-inline: -8px; border-radius: var(--radius-ui); } .mega--cyber .mm-link b { font-size: .82rem; line-height: 1.3; letter-spacing: -.012em; } /* Lien « voir tout » en pied de colonne */ .mega .mm-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-head); font-weight: 600; font-size: .74rem; color: var(--mm-accent); } .mega .mm-all .arw { transition: transform .25s var(--ease); } .mega .mm-all:hover .arw { transform: translateX(4px); } /* ----- Parcours bancaire numéroté (01 → 06) ----- */ .mm-journey { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px clamp(12px, 1.5vw, 20px); } .mm-step-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .mm-num { flex: none; width: 24px; height: 24px; border-radius: var(--radius-ui); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .62rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -6px var(--glow); } .mm-step-l { font-family: var(--font-head); font-weight: 700; line-height: 1.3; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #8f9bbb; } .mm-sub { list-style: none; margin: 2px 0 6px 8px; padding: 2px 0 2px 10px; border-left: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 3px 12px; } .mega .mm-sub a { font-size: .72rem; color: #8390ae; transition: color .18s; } .mega .mm-sub a:hover { color: #fff; } /* ----- Pied de panneau : accès au hub de la BU + liens transverses ----- */ .mega-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); } .mega .mm-hub { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: -.01em; color: var(--mm-accent); transition: color .18s var(--ease); } .mega .mm-hub .arw { transition: transform .25s var(--ease); } .mega .mm-hub:hover { color: #fff; } .mega .mm-hub:hover .arw { transform: translateX(4px); } .mm-foot-note { font-size: .76rem; line-height: 1.45; color: #6f7c9b; } .mega .mm-foot-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: .78rem; color: #a9b4cd; transition: color .18s var(--ease); } .mega .mm-foot-link:hover { color: #fff; } .mm-foot-link svg { width: 15px; height: 15px; flex: none; color: var(--mm-accent); } .mm-foot-link em { font-style: normal; font-weight: 400; color: #6f7c9b; } /* ----- Focus visible ----- */ .mega a:focus-visible { outline: 2px solid var(--mm-accent, var(--accent-2)); outline-offset: 2px; border-radius: var(--radius-ui); } /* ----- Mouvement réduit ----- */ @media (prefers-reduced-motion: reduce) { .site-head { transition: none; } .mega { transition: none; transform: none; } .nav-trigger, .nav-trigger::after, .nav-trigger .chev { transition: none; } .nav-links > a { transition: none; } .nav-trigger::after { transform: scaleX(1); opacity: 0; } .nav-item.is-open > .nav-trigger::after { opacity: 1; } .mega .mm-hub:hover .arw, .mega .mm-all:hover .arw { transform: none; } .wheel-seg-link, .wheel-seg-link path[fill-opacity] { transition: none; } } /* ----- Ordinateurs portables 13"/14" et petits écrans desktop ----- 1024–1279px : on garde les 6 colonnes (une rangée, zéro défilement), simplement plus denses. Un libellé long peut passer sur deux lignes, ce qui reste très en deçà du garde-fou. */ @media (min-width: 981px) and (max-width: 1279.98px) { /* À 1024px, la boîte de contenu fait 944px. Les items + CTA en consomment ~790, ce qui laisse ~154px au logotype. À 38px de haut il les dépasse : `.nav` est en `nowrap` et `body` est en `overflow-x:hidden`, donc le débordement ne produit pas de barre de défilement — il ROGNE silencieusement « Parler à un expert ». On resserre plutôt que de laisser le rognage décider. */ .nav { gap: 20px; } .brand-real { height: 32px; } .nav-links--mega { gap: 2px; } .nav-trigger { font-size: .82rem; padding-inline: 9px; } .nav-trigger::after { left: 9px; right: 9px; } .nav-links > a { font-size: .82rem; padding-inline: 9px; } .mega-inner { padding-block: 22px; gap: 16px; } .mega--cyber .mega-cols { gap: 16px 12px; } .mega--cyber .mm-link { padding: 4px 7px; margin-inline: -7px; } .mega--cyber .mm-link b { font-size: .78rem; } .mega--cyber .mm-h { font-size: .62rem; letter-spacing: .08em; } .mm-journey { gap: 16px 12px; } .mega .mm-link span { font-size: .7rem; } } /* ========================================================================== MEGA-MENU — mobile : accordéon dans le menu hamburger existant ========================================================================== */ @media (max-width: 1200px) { .nav-links--mega { align-items: stretch; gap: 0; max-height: calc(100dvh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain; } .nav-links--mega .nav-item { display: block; border-bottom: 1px solid rgba(255,255,255,.06); } .nav-links--mega .nav-trigger { width: 100%; justify-content: space-between; padding: 15px 0; border-radius: 0; font-size: 1rem; color: #eef1f8; } .nav-links--mega .nav-trigger:hover, .nav-links--mega .nav-item.is-open > .nav-trigger { background: transparent; } .nav-links--mega .nav-trigger::after { content: none; } /* Le panneau redevient un bloc dans le flux */ .nav-links--mega .mega { position: static; max-height: none; overflow: visible; background: none; border: 0; box-shadow: none; opacity: 1; transform: none; transition: none; padding-bottom: 12px; } /* `.mega-inner` porte aussi `.wrap` : on neutralise son padding-inline, le tiroir mobile `.nav-links` fournit déjà la gouttière. */ .nav-links--mega .mega-inner { display: block; padding-block: 0; padding-inline: 0; max-width: none; } .nav-links--mega .mega .mega-cols, .nav-links--mega .mega .mm-journey { display: block; } .nav-links--mega .mega .mega-cols > * + *, .nav-links--mega .mega .mm-journey > * + * { margin-top: 18px; } .nav-links--mega .mega .mm-h { min-height: 0; align-items: center; } .nav-links--mega .mega-foot { margin-top: 18px; gap: 12px 20px; } /* `.nav-links > a` ne descend plus dans le panneau : ce reset n'est conservé que pour la bordure du tiroir. */ .nav-links--mega .mega a { border-bottom: 0; } .nav-links--mega .mega .mm-link { padding: 9px 10px; margin-inline: -10px; } .nav-links--mega .mega .mm-link b { font-size: .92rem; } .nav-links--mega .mega .mm-link span { font-size: .76rem; } .nav-links--mega .mega .mm-sub a { padding: 4px 0; } /* CTA : l'alerte reste dans la barre, l'autre passe dans le menu */ .nav-links--mega ~ .nav-cta { margin-left: auto; } .nav-links--mega ~ .nav-cta .btn--primary { display: none; } .mm-mobile-cta { display: block; padding: 18px 0 8px; } /* Bouton pleine largeur du tiroir. Il conserve son dessin `.btn--primary` (dégradé, rayon 999px, texte blanc) : `.nav-links > a` ne l'atteint pas, il n'est pas enfant direct de `.nav-links`. */ .nav-links--mega .mm-mobile-cta .btn { width: 100%; justify-content: center; padding: 13px 22px; border-bottom: 0; font-size: .95rem; } } @media (min-width: 981px) { .mm-mobile-cta { display: none; } /* Zone de survol continue entre le déclencheur et le panneau */ .nav-links--mega { align-self: stretch; align-items: stretch; } .nav-links--mega .nav-item { align-items: center; } } @media (max-width: 560px) { .nav-links--mega ~ .nav-cta .btn--alert { padding: 8px 11px; font-size: .74rem; } } /* ============================================================================ BANDEAU DE CONSENTEMENT COOKIES (mesure d'audience / GTM) Injecté par js/main.js. Discret, en bas, refus aussi simple qu'accepter. ============================================================================ */ .cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:660px; margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:16px 20px; border-radius:16px; background:#0a0f1e; color:#e7ebf5; border:1px solid rgba(255,255,255,.12); box-shadow:0 26px 60px -24px rgba(0,0,0,.75); font-family:var(--font-body); font-size:.88rem; line-height:1.5; opacity:0; transform:translateY(14px); transition:opacity .3s var(--ease,ease), transform .3s var(--ease,ease); } .cookie-banner.is-on{ opacity:1; transform:none; } .cookie-banner__txt{ margin:0; flex:1 1 280px; color:#c6cee4; } .cookie-banner__txt a{ color:#a9b6ff; text-decoration:underline; text-underline-offset:2px; } .cookie-banner__act{ display:flex; gap:10px; flex:0 0 auto; } @media (max-width:560px){ .cookie-banner{ left:10px; right:10px; bottom:10px; padding:14px 16px; } .cookie-banner__act{ width:100%; } .cookie-banner__act .btn{ flex:1 1 0; justify-content:center; } } @media (prefers-reduced-motion:reduce){ .cookie-banner{ transition:none; } } /* ---- Logo de l'en-tête : ne jamais le laisser compresser par la barre ---- La barre est un flex ; avec un CTA plus long, `.brand` se faisait écraser et le logo se tassait. On fige sa largeur et on neutralise le max-width global. */ .site-head .brand { flex: 0 0 auto; } .site-head .brand-real { max-width: none; width: auto; } /* === CORRECTIFS 21/07 === */ /* Sélecteur de langue : texte blanc sur l'en-tête sombre (il héritait de --ink, donc noir sur noir). */ .btn--ghost[hreflang] { color:#fff; border-color: rgba(255,255,255,.24); } .btn--ghost[hreflang]:hover { color:#fff; border-color: var(--accent); background: var(--accent-soft); } /* Hero : l'espace vertical était deux fois plus grand en bas qu'en haut, ce qui creusait un vide sous les CTA. On inverse le rapport : plus d'air au-dessus, moins de vide au-dessous. */ .hero .wrap { padding-top: clamp(52px, 5.4vw, 88px); padding-bottom: clamp(30px, 3.2vw, 52px); } /* Bandeau cookies : même cause que le sélecteur de langue — le bouton fantôme héritait de --ink (encre sombre prévue pour les fonds clairs) et devenait illisible sur le fond sombre du bandeau. */ .cookie-banner .btn--ghost { color:#fff; border-color: rgba(255,255,255,.28); } .cookie-banner .btn--ghost:hover { color:#fff; border-color: var(--accent); background: var(--accent-soft); }