/* ===================================================================== SCROLL HOME — scrollytelling klein (scènes épinglées + horizontal) S'appuie sur snazzy.css (nav, footer, boutons, follow, tokens). ===================================================================== */ :root{ --paper:#f3f3ef; } .sx-body{background:#02030f;color:#fff} body.sx-body{background:#02030f;color:#fff} /* === Plugin / Elementor : coller le contenu Snazzy tout en haut (zéro bande blanche) === On cible les 3 widgets servant à insérer un shortcode (Shortcode, Texte, HTML) + les conteneurs Elementor classiques ET flexbox (e-con). On NE force PLUS de marge !important sur .snz-root : le JS (snz_critical_css) peut ainsi appliquer sa remontée au pixel près sans être écrasé par cette feuille. */ .snz-root{margin:0;padding:0} .elementor-widget-shortcode:has(.snz-root), .elementor-widget-shortcode:has(.snz-root) .elementor-widget-container, .elementor-widget-text-editor:has(.snz-root), .elementor-widget-text-editor:has(.snz-root) .elementor-widget-container, .elementor-widget-html:has(.snz-root), .elementor-widget-html:has(.snz-root) .elementor-widget-container, .elementor-element:has(> .elementor-widget-container > .snz-root), .e-con:has(.snz-root), .e-con-inner:has(.snz-root), .e-con.e-con-boxed:has(.snz-root) > .e-con-inner, .elementor-section:has(.snz-root), .elementor-container:has(.snz-root), .elementor-row:has(.snz-root), .elementor-column:has(.snz-root), .elementor-column-wrap:has(.snz-root), .elementor-widget-wrap:has(.snz-root){margin-top:0!important;padding-top:0!important} /* === « Remonter le hero » — pages intérieures (.page-hero) === La grande réserve d'espace prévue pour une barre de nav fixe est supprimée : en gabarit Canvas / intégration shortcode, le hero démarre tout en haut. Spécificité .snz-root .page-hero (0,2,0) > base .page-hero (0,1,0). */ .snz-root .page-hero{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,7vw,100px)} @media(max-width:760px){ /* Snazzy Digital Agency — en mobile, le pill du header flotte par-dessus le hero (bas du pill ≈ 70px). On laisse assez de marge en haut pour que le fil d'Ariane (.crumb) passe nettement SOUS le pill. env() gère l'encoche si jamais le viewport-fit=cover est actif. */ .snz-root .page-hero{padding-top:calc(env(safe-area-inset-top, 0px) + 100px);padding-bottom:clamp(38px,8vw,60px)} } /* sécurité : tout le scrollytelling en blanc, même hors (plugin/Elementor) */ .sx-body .sx-scene h2,.sx-body .sx-scene .sub,.sx-body .sx-scene .cols, .sx-body .sx-htop h2,.sx-body .sx-card h3,.sx-body .sx-card p, .sx-body .sx-card .num,.sx-body .sx-card .tag,.sx-body .sx-card .go, .sx-body .sx-eyebrow{color:#fff} /* ---- generic ---- */ .sx-eyebrow{font-family:var(--font-mono);font-size:clamp(10px,.85vw,12px);letter-spacing:.22em;text-transform:uppercase;opacity:.7} .sx-pill{display:inline-block;background:#000;color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:.55em .9em;border-radius:4px} /* ===================================================================== PINNED HERO — la scène centrale qui se métamorphose au scroll ===================================================================== */ .sx-hero{position:relative;height:443vh} /* v3.8.5 : -20% supplémentaires (532 -> 443) */ .sx-stage{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;background-color:#1b06c8;background:radial-gradient(120% 100% at 50% 40%, #3a12ff 0%, #1b06c8 46%, #0d0270 100%);background-color:#1b06c8} #sx-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%} .sx-grain{position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(3) infinite} /* canvas central (particules astérisque) */ #sx-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%} /* logo intro */ .sx-intrologo{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vw,520px);will-change:opacity,transform} .sx-intrologo img{width:100%;filter:brightness(0) invert(1)} /* couches de texte éditorial (scènes) */ .sx-scene{position:absolute;inset:0;z-index:6;pointer-events:none;will-change:opacity} .sx-scene .in{position:absolute;left:var(--gutter);bottom:clamp(54px,8vh,120px);max-width:min(46vw,720px)} .sx-scene .lbl{margin-bottom:18px} .sx-scene h2{font-family:var(--font-display);font-weight:800;text-transform:lowercase;line-height:.92;letter-spacing:-.03em; font-size:clamp(40px,7.2vw,128px);text-wrap:balance} .sx-scene h2 em{font-style:italic;font-weight:700} .sx-scene .sub{margin-top:18px;max-width:40ch;font-size:clamp(14px,1.1vw,18px);line-height:1.5;opacity:.82} /* colonnes micro-texte à droite */ .sx-scene .cols{position:absolute;right:var(--gutter);top:clamp(120px,18vh,220px);text-align:right;display:flex;flex-direction:column;gap:clamp(20px,3vh,40px);max-width:30ch} .sx-scene .cols .grp .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-bottom:6px} .sx-scene .cols .grp .v{font-size:clamp(14px,1.1vw,18px);line-height:1.35} .sx-scene .cols .grp .v.big{font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(20px,2vw,32px);letter-spacing:-.02em} @media(max-width:820px){ .sx-scene .cols{display:none} .sx-scene .in{max-width:84vw} } /* ---- mobile ---- */ @media(max-width:760px){ .sx-hero{height:362vh} /* v3.8.5 : 434 -> 362 (+20%) */ .sx-hwrap{height:420vh} .sx-scene .in{left:18px;right:18px;bottom:96px;max-width:none} .sx-scene h2{font-size:clamp(34px,11vw,58px)} .sx-htop h2{font-size:clamp(20px,6vw,30px)} .sx-panel{width:82vw;margin-right:16px} .sx-prog{left:18px;right:18px} .sx-cue{right:18px} } /* progress + scroll cue */ .sx-prog{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;height:2px;background:rgba(255,255,255,.16);z-index:7} .sx-prog i{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 12px rgba(210,239,41,.7)} .sx-cue{position:absolute;right:var(--gutter);bottom:34px;z-index:7;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;display:flex;align-items:center;gap:10px;will-change:opacity} .sx-cue .ar{width:1px;height:34px;background:#fff;position:relative;overflow:hidden} .sx-cue .ar::after{content:"";position:absolute;inset:0;background:var(--lime);animation:cue 1.8s infinite} @keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} /* ===================================================================== HORIZONTAL — pôles d'expertise qui défilent latéralement ===================================================================== */ .sx-hwrap{position:relative;height:500vh;background:#02030f} .sx-hsticky{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;display:flex;align-items:center} .sx-htrack{display:flex;will-change:transform;padding-inline:var(--gutter)} .sx-htop{position:absolute;top:clamp(90px,12vh,140px);left:var(--gutter);right:var(--gutter);z-index:3;display:flex;justify-content:space-between;align-items:baseline;gap:20px} .sx-htop h2{font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(24px,3vw,52px);letter-spacing:-.02em;line-height:.9} .sx-panel{flex:none;width:min(78vw,560px);margin-right:clamp(20px,3vw,48px);position:relative;will-change:transform;transition:transform .5s cubic-bezier(.2,.7,.3,1)} .sx-card{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#070b26; box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12)} .sx-card .pn{position:absolute;inset:0;background:radial-gradient(120% 100% at 30% 18%, #2a12d8 0%, #14037a 60%, #0a0240 100%);opacity:1;transition:transform .4s} /* fond image / vidéo par carte (back-office) : remplace le fond bleu */ .sx-cardbg{position:absolute;inset:0;z-index:0;overflow:hidden} .sx-cardbg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .sx-card.has-bg .pn{display:none} /* léger zoom du média au survol, raccord avec le lift de la carte */ .sx-cardbg-media{transition:transform .6s cubic-bezier(.2,.7,.3,1)} .sx-panel:hover .sx-cardbg-media{transform:scale(1.05)} /* halo coloré derrière l'astérisque */ .sx-cast-glow{position:absolute;z-index:1;left:50%;top:42%;width:88%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent 72%);filter:blur(18px);opacity:.7;pointer-events:none; transition:opacity .45s ease} .sx-cast{position:absolute;z-index:2;left:50%;top:42%;width:80%;transform:translate(-50%,-50%) scale(1);color:var(--c);opacity:.96;will-change:transform,opacity; transition:transform .6s cubic-bezier(.2,.8,.25,1),opacity .45s ease} .sx-cast svg{width:100%;height:100%;display:block;fill:currentColor; filter:drop-shadow(0 22px 44px color-mix(in srgb, var(--c) 50%, transparent)) drop-shadow(0 6px 14px rgba(0,0,0,.5)); animation:castSpin 18s linear infinite;transform-origin:50% 50%} @keyframes castSpin{to{transform:rotate(360deg)}} .sx-panel:hover{transform:translateY(-10px)} /* au survol : l'astérisque central est « poussé » plus petit et s'efface, pendant que le petit exposant arrive en haut à droite du titre */ .sx-panel:hover .sx-cast{transform:translate(-50%,-66%) scale(.3);opacity:0} .sx-panel:hover .sx-cast-glow{opacity:0} @media(prefers-reduced-motion:reduce){ .sx-cast svg{animation:castSpin 40s linear infinite} .sx-cast{transition:opacity .3s ease} .sx-panel:hover .sx-cast{transform:translate(-50%,-50%) scale(.6);opacity:0} } /* === exposant : petit astérisque en haut à droite du mot-titre === */ .sx-card h3{display:inline-flex;align-items:flex-start;gap:.04em} .sx-card h3 .ttl{display:inline} .sx-sup{flex:none;width:.46em;aspect-ratio:1;margin-top:.06em;color:var(--c);line-height:0; transform:translateY(.2em) scale(0) rotate(-120deg);transform-origin:50% 50%;opacity:0;will-change:transform,opacity; transition:transform .55s cubic-bezier(.2,.85,.25,1),opacity .4s ease} .sx-sup svg{width:100%;height:100%;display:block;fill:currentColor; filter:drop-shadow(0 4px 12px color-mix(in srgb, var(--c) 55%, transparent))} .sx-panel:hover .sx-sup{transform:translateY(-.04em) scale(1) rotate(0);opacity:1;transition-delay:.05s} @media(prefers-reduced-motion:reduce){ .sx-sup{transition:opacity .3s ease;transform:scale(1)} .sx-panel:hover .sx-sup{transform:scale(1);opacity:1;transition-delay:0s} } .sx-card .num{position:absolute;top:20px;left:22px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;opacity:.7;z-index:2} .sx-card .tag{position:absolute;top:20px;right:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;z-index:2} .sx-card .body{position:absolute;left:22px;right:22px;bottom:22px;z-index:2} .sx-card h3{font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(28px,3.4vw,56px);line-height:.9;letter-spacing:-.03em} .sx-card p{margin-top:10px;font-size:clamp(13px,1vw,16px);line-height:1.45;opacity:.82;max-width:30ch} .sx-card .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em} .sx-card .go svg{width:16px;transition:transform .4s} .sx-panel:hover .go svg{transform:translateX(6px)} .sx-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(2,3,15,.85),transparent 55%)} /* ===================================================================== REVEAL clair — manifeste + ce qu'on fabrique ===================================================================== */ .sx-reveal{background:var(--paper);color:#0a0a12;position:relative;z-index:2} .sx-reveal .lede{font-family:var(--font-display);font-weight:800;text-transform:lowercase;line-height:1.0;letter-spacing:-.02em; font-size:clamp(32px,6vw,104px);max-width:16ch;text-wrap:balance} .sx-reveal .lede em{font-style:normal;color:var(--klein)} @media(max-width:760px){ .sx-scene .in{bottom:120px} } /* ===== suivez le mouvement — astérisques 3D flottants ===== */ .follow{perspective:1400px} .follow .follow-aster{display:none} .follow-3d{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;transform-style:preserve-3d} .follow-3d .f3{position:absolute;display:block} .follow-3d .f3 svg{width:100%;height:100%;display:block;fill:currentColor} .follow-3d .f3-a{top:-7%;right:3%;width:min(34vw,380px);aspect-ratio:1;color:var(--klein); filter:drop-shadow(0 30px 70px rgba(64,2,246,.55));animation:f3spin 26s linear infinite;will-change:transform} @keyframes f3spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ .follow-3d .f3-a{animation:f3spin 80s linear infinite} } @media(max-width:760px){ .follow-3d .f3-a{width:52vw;opacity:.5;top:-3%} } /* ---- H1 sémantique (hero scène 1) : rendu strictement identique au h2 d'origine ---- */ .sx-body .sx-scene h1{color:#fff} .sx-scene h1{font-family:var(--font-display);font-weight:800;text-transform:lowercase;line-height:.92;letter-spacing:-.03em; font-size:clamp(40px,7.2vw,128px);text-wrap:balance} .sx-scene h1 em{font-style:italic;font-weight:700} @media(max-width:760px){ .sx-scene h1{font-size:clamp(34px,11vw,58px)} } /* ===================================================================== MOBILE ONLY (≤760px) — rééquilibrage du hero Les scènes étaient ancrées en bas -> gros vide en haut sur grands écrans. On centre verticalement le bloc de texte pour une vraie proportion mobile. (Aucun impact desktop : tout est sous @media max-width:760px.) ===================================================================== */ @media(max-width:760px){ /* scène éditoriale centrée verticalement, marges latérales confort */ .sx-scene .in{ top:50%; bottom:auto; transform:translateY(-50%); left:22px; right:22px; max-width:none; } .sx-scene .lbl{ margin-bottom:14px; } .sx-scene h1,.sx-scene h2{ font-size:clamp(40px,12.5vw,64px); line-height:.96; } .sx-scene .sub{ margin-top:16px; font-size:clamp(14px,4vw,17px); max-width:36ch; opacity:.85; } /* le manifeste clair garde son ancrage bas mais remonté proprement */ .sx-reveal .lede{ font-size:clamp(34px,9vw,52px); } /* repères de scroll un peu plus haut pour ne pas coller au bord */ .sx-cue{ bottom:30px; } .sx-prog{ bottom:20px; } } /* ===================================================================== FAQ ACCUEIL (v3.0.0 — Snazzy Digital Agency) Accordéon natif

: zéro JS, accessible clavier, indexable. Couleurs héritées -> fonctionne sur thème sombre ET clair (light.css ajuste seulement les filets). ===================================================================== */ .sx-faq .wrap{max-width:920px} .sx-faq-title{font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(34px,5.4vw,84px);line-height:.9;letter-spacing:-.03em;margin-top:22px} .sx-faq-list{margin-top:clamp(30px,4vw,54px);border-top:var(--edge) solid rgba(255,255,255,.16)} .sx-faq-item{border-bottom:var(--edge) solid rgba(255,255,255,.16)} .sx-faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;padding-block:clamp(16px,2vw,24px);font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(17px,1.7vw,26px);letter-spacing:-.01em;transition:color .3s} .sx-faq-q::-webkit-details-marker{display:none} .sx-faq-q:hover{color:var(--klein)} .sx-faq-ic{position:relative;flex:none;width:16px;height:16px} .sx-faq-ic::before,.sx-faq-ic::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.3,1)} .sx-faq-ic::before{width:16px;height:2px} .sx-faq-ic::after{width:2px;height:16px} .sx-faq-item[open] .sx-faq-ic::after{transform:rotate(90deg)} .sx-faq-item[open] .sx-faq-q{color:var(--klein)} .sx-faq-a{overflow:hidden} .sx-faq-a p{max-width:62ch;padding-bottom:clamp(18px,2vw,26px);font-size:clamp(14.5px,1.1vw,17px);line-height:1.65;opacity:.85} /* ===================================================================== v3.3.1 — CARTES RÉSEAUX XL (Snazzy Digital Agency) Les 3 cartes plateformes deviennent les stars de la section follow : grandes cartes brutalist (bord 3px, coins 22px), typo display massive, compteur géant, aster décoratif en débord, sweep couleur signature au survol (klein / flamingo / aqua) avec inversion du texte, flèche qui file. Thème-agnostique via var(--paper) & currentColor. ===================================================================== */ .follow-stats--xl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(26px,4vw,52px)} @media(max-width:940px){.follow-stats--xl{grid-template-columns:1fr}} .follow-stats--xl .fstat{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2.4vh,30px);min-height:clamp(330px,44vh,480px);padding:clamp(20px,2.4vw,34px);background:var(--paper,#101018);border:3px solid currentColor;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .38s cubic-bezier(.2,.7,.3,1),border-color .38s} .follow-stats--xl .fstat::before{content:"";position:absolute;inset:0;background:var(--klein);transform:translateY(101%);transition:transform .5s cubic-bezier(.76,0,.24,1);z-index:0} .follow-stats--xl .fstat>*{position:relative;z-index:1} .follow-stats--xl .fs-top{display:flex;align-items:center;justify-content:space-between} .follow-stats--xl .fs-ico{display:inline-flex;width:clamp(34px,3vw,46px);aspect-ratio:1} /* v3.3.2 : glyphe nu, sans cercle */ .follow-stats--xl .fs-ico svg{width:100%;height:100%} .follow-stats--xl .fs-meta b{display:block;font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(34px,3.6vw,56px);letter-spacing:-.02em;line-height:.95} .follow-stats--xl .fs-meta i{display:block;font-style:normal;font-size:13px;letter-spacing:.06em;opacity:.62;margin-top:8px} .follow-stats--xl .fs-n{font-family:var(--font-display);font-weight:800;font-size:clamp(56px,6.2vw,92px);letter-spacing:-.03em;line-height:1} .follow-stats--xl .fs-n em{display:block;font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:6px} .follow-stats--xl .fs-foot{display:flex;align-items:center;justify-content:space-between;border-top:3px solid currentColor;padding-top:clamp(12px,1.6vh,18px)} .follow-stats--xl .fs-cta{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700} .follow-stats--xl .fs-go{display:inline-flex;width:26px;transition:transform .35s} .follow-stats--xl .fs-go svg{width:100%} .follow-stats--xl .fs-aster{position:absolute;right:-9%;bottom:-12%;width:56%;aspect-ratio:1735/1710;color:var(--klein);opacity:.10;transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .4s;z-index:0;pointer-events:none} .follow-stats--xl .fstat:hover{transform:translateY(-8px)} .follow-stats--xl .fstat:hover::before{transform:translateY(0)} .follow-stats--xl .fstat:hover .fs-go{transform:translate(5px,-5px)} .follow-stats--xl .fstat:hover .fs-aster{opacity:.22;transform:rotate(24deg) scale(1.07);color:#fff} .follow-stats--xl .fstat:hover,.follow-stats--xl .fstat:hover .fs-meta i{color:#fff;opacity:1} .follow-stats--xl .fstat[data-acc="flamingo"]::before{background:var(--flamingo)} .follow-stats--xl .fstat[data-acc="flamingo"]:hover{border-color:var(--flamingo)} .follow-stats--xl .fstat[data-acc="aqua"]::before{background:var(--aqua)} .follow-stats--xl .fstat[data-acc="aqua"]:hover{border-color:var(--aqua)} .follow-stats--xl .fstat[data-acc="aqua"]:hover,.follow-stats--xl .fstat[data-acc="aqua"]:hover .fs-meta i,.follow-stats--xl .fstat[data-acc="aqua"]:hover .fs-aster{color:#000} .follow-stats--xl .fstat:not([data-acc]):hover{border-color:var(--klein)} @media(prefers-reduced-motion:reduce){.follow-stats--xl .fstat,.follow-stats--xl .fstat::before,.follow-stats--xl .fs-go,.follow-stats--xl .fs-aster{transition:none}} /* ===================================================================== v3.6.1 — SECTION EXPERTISES & PARTENAIRES (ponctuation noire, SEO/GEO) Snazzy Digital Agency. Preuves à barre accent, pilules technos, ancrage local. Thème-agnostique (currentColor + vars). ===================================================================== */ .xp-title{font-family:var(--font-display);font-weight:800;text-transform:lowercase;letter-spacing:-.03em;line-height:.92;font-size:clamp(40px,7.2vw,128px);text-wrap:balance;margin:0 0 .35em} .xp-intro{max-width:860px;line-height:1.72;font-size:clamp(15px,1.4vw,17px);opacity:.92;margin:0 0 clamp(28px,4vh,48px)} .xp-intro a,.xp-lbl a,.xp-geo a{color:inherit;font-weight:700;text-decoration:none;border-bottom:2px solid var(--klein)} .xp-intro a:hover,.xp-lbl a:hover,.xp-geo a:hover{color:var(--klein-light,#8f79ff)} .xp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)} @media(max-width:1080px){.xp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.xp-grid{grid-template-columns:1fr}} .xp-card{position:relative;padding:clamp(18px,2vw,28px) clamp(16px,1.8vw,24px);background:rgba(255,255,255,.045);border-radius:18px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s} .xp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--klein)} .xp-card[data-acc="lime"]::before{background:var(--lime)} .xp-card[data-acc="flamingo"]::before{background:var(--flamingo)} .xp-card[data-acc="aqua"]::before{background:var(--aqua)} .xp-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.08)} .xp-big{display:block;font-family:var(--font-display);font-weight:800;text-transform:lowercase;font-size:clamp(26px,2.4vw,40px);letter-spacing:-.02em;line-height:1;margin-bottom:10px} .xp-lbl{font-size:13.5px;line-height:1.55;opacity:.82} .xp-pills{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(26px,4vh,44px) 0 0} .xp-pills span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border:2px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 16px;transition:border-color .3s,background .3s,color .3s,transform .3s} .xp-pills span:hover{border-color:var(--lime);background:var(--lime);color:#000;transform:translateY(-3px)} .xp-geo{margin:clamp(22px,3vh,36px) 0 0;font-size:13px;letter-spacing:.02em;opacity:.7} @media(prefers-reduced-motion:reduce){.xp-card,.xp-pills span{transition:none}} /* v3.7.0 — la FAQ accueil occupe toute la largeur (grille éditoriale) */ .sx-faq .wrap{max-width:none} /* ===================================================================== v3.8.0 — CARTES RÉSEAUX « APPLE » 4 PLATEFORMES (Snazzy Digital Agency) Fini les cadres noirs : châssis sans bordure, rayon 28px, ombres douces multicouches, icônes OFFICIELLES, 4 colonnes (facebook inclus), sweep couleur signature conservé (+ variant INK pour tiktok). ===================================================================== */ .follow-stats--xl{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)} @media(max-width:1160px){.follow-stats--xl{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.follow-stats--xl{grid-template-columns:1fr}} .follow-stats--xl .fstat{border:0;border-radius:28px;min-height:clamp(300px,40vh,430px); box-shadow:0 1px 2px rgba(16,14,40,.05),0 12px 28px -12px rgba(16,14,40,.14),0 44px 90px -30px rgba(64,2,246,.15); transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s cubic-bezier(.2,.7,.3,1)} .follow-stats--xl .fstat:hover{box-shadow:0 2px 4px rgba(16,14,40,.05),0 22px 44px -14px rgba(16,14,40,.18),0 70px 130px -34px rgba(64,2,246,.24)} .follow-stats--xl .fs-foot{border-top-width:2px} .follow-stats--xl .fs-meta b{font-size:clamp(28px,2.6vw,44px)} .follow-stats--xl .fs-n{font-size:clamp(48px,4.6vw,76px)} /* Variant INK (tiktok) : remplissage encre, texte blanc, aster blanc */ .follow-stats--xl .fstat[data-acc="ink"]::before{background:var(--ink,#0a0a12)} .follow-stats--xl .fstat[data-acc="ink"]:hover .fs-aster{color:#fff} /* Aster filigrane dans la couleur de la plateforme */ .follow-stats--xl .fstat[data-acc="flamingo"] .fs-aster{color:var(--flamingo)} .follow-stats--xl .fstat[data-acc="aqua"] .fs-aster{color:var(--aqua)} .follow-stats--xl .fstat[data-acc="ink"] .fs-aster{color:var(--ink,#0a0a12)} /* ===================================================================== v3.8.1 — RÉSEAUX MOBILE : 2 colonnes compactes (Snazzy Digital Agency) Hauteur pilotée par le contenu (fini les tours vides), typographies et icônes redimensionnées, handle en ellipse, aster discret. ===================================================================== */ @media(max-width:900px){ .follow-stats--xl .fstat{min-height:clamp(240px,32vh,330px)} } @media(max-width:620px){ .follow-stats--xl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .follow-stats--xl .fstat{min-height:0;padding:16px 14px;gap:12px;border-radius:20px} .follow-stats--xl .fs-ico{width:28px} .follow-stats--xl .fs-meta b{font-size:19px} .follow-stats--xl .fs-meta i{font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%} .follow-stats--xl .fs-n{font-size:32px} .follow-stats--xl .fs-n em{font-size:8px;letter-spacing:.16em;margin-top:4px} .follow-stats--xl .fs-foot{padding-top:9px;border-top-width:2px} .follow-stats--xl .fs-cta{font-size:9px;letter-spacing:.14em} .follow-stats--xl .fs-go{width:16px} .follow-stats--xl .fs-aster{width:58%;right:-14%;bottom:-14%;opacity:.08} } /* ===================================================================== v3.8.2 — RÉSEAUX : CENTRAGE PARFAIT (desktop + mobile) Composition symétrique : chaque élément centré, trait court centré sous le compteur (::after), « suivre -> » en ligne centrée sans bordure pleine largeur. Snazzy Digital Agency. ===================================================================== */ .follow-stats--xl .fstat{align-items:center;text-align:center} .follow-stats--xl .fs-top{justify-content:center;width:100%} .follow-stats--xl .fs-meta{display:flex;flex-direction:column;align-items:center;width:100%} .follow-stats--xl .fs-meta i{margin-inline:auto} .follow-stats--xl .fs-n{display:flex;flex-direction:column;align-items:center;width:100%} .follow-stats--xl .fs-n::after{content:"";width:72px;height:2px;background:currentColor;margin-top:clamp(12px,1.6vh,18px)} .follow-stats--xl .fs-foot{border-top:0;padding-top:0;width:auto;justify-content:center;gap:10px} @media(max-width:620px){ .follow-stats--xl .fs-n::after{width:54px;margin-top:10px} .follow-stats--xl .fs-foot{gap:8px} } /* v3.8.4 — « suivre » optiquement centré : la flèche sort du flux (absolue à droite du mot) au lieu de décaler le groupe centré. */ .follow-stats--xl .fs-foot{position:relative;justify-content:center;gap:0} .follow-stats--xl .fs-go{position:absolute;left:calc(50% + 44px);top:50%;transform:translateY(-50%)} .follow-stats--xl .fstat:hover .fs-go{transform:translateY(-50%) translateX(4px)} @media(max-width:620px){.follow-stats--xl .fs-go{left:calc(50% + 34px)}} /* ===================================================================== v3.11.0 — MUR DE CONFIANCE (Snazzy Digital Agency) Tuiles wordmark en display, sweep accent cyclé au survol, variante logo-image sur fond blanc, aster filigrane. Ponctuation noire. ===================================================================== */ .trust{position:relative;overflow:hidden} .trust::before{content:"";position:absolute;right:-10%;top:-16%;width:46%;aspect-ratio:1735/1710;background:var(--klein);opacity:.12;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1735 1710'%3E%3Cpath d='M867 0l195 585 585-195-390 465 390 465-585-195-195 585-195-585-585 195 390-465-390-465 585 195z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1735 1710'%3E%3Cpath d='M867 0l195 585 585-195-390 465 390 465-585-195-195 585-195-585-585 195 390-465-390-465 585 195z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none} .trust-intro,.trust-outro{max-width:820px;line-height:1.72;font-size:clamp(14.5px,1.35vw,16.5px);opacity:.92} .trust-intro{margin:14px 0 clamp(26px,4vh,44px)} .trust-outro{margin:clamp(26px,4vh,44px) 0 0} .trust-intro a,.trust-outro a{color:inherit;font-weight:700;text-decoration:none;border-bottom:2px solid var(--klein)} .trust-intro a:hover,.trust-outro a:hover{color:var(--klein-light,#8f79ff)} .trust-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)} @media(max-width:1100px){.trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}} .trust-tile{position:relative;overflow:hidden;display:grid;place-items:center;min-height:clamp(76px,9vw,110px);padding:14px;border:2px solid rgba(255,255,255,.14);border-radius:16px;transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s} .trust-tile::before{content:"";position:absolute;inset:0;background:var(--klein);transform:translateY(101%);transition:transform .45s cubic-bezier(.76,0,.24,1)} .trust-tile[data-acc="flamingo"]::before{background:var(--flamingo)} .trust-tile[data-acc="lime"]::before{background:var(--lime)} .trust-tile[data-acc="aqua"]::before{background:var(--aqua)} .trust-tile[data-acc="sunrise"]::before{background:var(--sunrise)} .trust-tile[data-acc="banana"]::before{background:var(--banana)} .trust-tile>*{position:relative;z-index:1} .trust-name{font-family:var(--font-display);font-weight:800;text-transform:lowercase;letter-spacing:-.02em;font-size:clamp(15px,1.5vw,21px);line-height:1.1;text-align:center;color:rgba(255,255,255,.82);transition:color .35s} .trust-tile:hover{transform:translateY(-5px);border-color:transparent} .trust-tile:hover::before{transform:translateY(0)} .trust-tile:hover .trust-name{color:#fff} .trust-tile[data-acc="lime"]:hover .trust-name,.trust-tile[data-acc="aqua"]:hover .trust-name,.trust-tile[data-acc="banana"]:hover .trust-name{color:#000} .trust-tile--img{background:#fff;border-color:#fff} .trust-tile--img img{max-width:78%;max-height:44px;width:auto;height:auto;object-fit:contain} .trust-tile--img:hover::before{transform:translateY(101%)} @media(prefers-reduced-motion:reduce){.trust-tile,.trust-tile::before,.trust-name{transition:none}} /* ===================================================================== v3.11.1 — MUR DE CONFIANCE : vrai aster, tuiles cliquables, logos harmonisés blanc, mobile compact 3 colonnes. ===================================================================== */ .trust::before{content:none} /* l'étoile approximative du mask est remplacée par le vrai symbole */ .trust-aster{position:absolute;right:-8%;top:-10%;width:44%;aspect-ratio:1735/1710;color:var(--klein);opacity:.14;transform:rotate(14deg);pointer-events:none} a.trust-tile{text-decoration:none;color:inherit;cursor:pointer} /* Logos images : monochrome blanc harmonieux sur tuile sombre */ .trust-tile--img{background:transparent;border-color:rgba(255,255,255,.14)} .trust-tile--img img{filter:brightness(0) invert(1);opacity:.82;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.3,1)} .trust-tile--img::before{content:none} .trust-tile--img:hover{border-color:rgba(255,255,255,.5)} .trust-tile--img:hover img{opacity:1;transform:scale(1.06)} /* Tablette : 4 colonnes */ @media(max-width:1100px){.trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* Mobile : 3 colonnes de pilules compactes — tout visible, zéro tunnel */ @media(max-width:640px){ .trust-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .trust-tile{min-height:44px;padding:8px 10px;border-radius:999px;border-width:1.5px} .trust-name{font-size:11.5px;letter-spacing:0} .trust-tile--img img{max-height:22px;max-width:86%} .trust-aster{width:70%;right:-22%;top:-4%} } /* v3.14.2 — carte réseau sans compteur : le pied reste calé en bas */ .fs-card{display:flex;flex-direction:column} .fs-card .fs-foot{margin-top:auto}