/* ========================================================================== VVS Media — feuille de style principale Design system repris à l'identique du template Funnelz (Framer) Police : Open Runde (SIL Open Font License 1.1) — auto-hébergée THÈMES ------ Le thème SOMBRE est celui par défaut : ses valeurs vivent directement sur :root, donc le site s'affiche correctement même si le JavaScript est bloqué. Le thème CLAIR (le design d'origine) s'active via l'attribut , posé par le bouton de bascule. ========================================================================== */ /* ------------------------------------------------------------------ FONTS */ @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Open Runde'; src: url('../fonts/OpenRunde-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ================================================= JETONS — THÈME SOMBRE == (thème par défaut) ========================================================================= */ :root { color-scheme: dark; /* Couleurs de marque — identiques dans les deux thèmes */ --accent: #FF4726; --green: #33D478; --yellow: #F7B900; --white: #FFFFFF; /* Fonds */ --bg: #0B0B0B; /* fond de page */ --surface: #1C1C1C; /* cartes sombres (couleur d'origine) */ --card-bg: #161616; /* cartes « claires » (avis, blog) */ --dark-gradient: linear-gradient(135deg, #2A2A2A 0%, #171717 100%); /* Textes */ --ink: #F2F2F2; /* texte principal sur le fond de page */ --muted: #8C8C8C; /* texte secondaire */ --on-dark: #D1D1D1; /* texte secondaire SUR une carte sombre */ /* Traits */ --line: rgba(255,255,255,.13); /* filets sur le fond de page */ --line-dark: rgba(255,255,255,.16); /* filets SUR une carte sombre */ --surface-ring: rgba(255,255,255,.08); /* liseré de détourage cartes */ /* États */ --hover-bg: rgba(255,255,255,.07); --header-bg: rgba(11,11,11,.72); /* Décor de fond (grille + orbe), repris de shiftor.fr */ --grid-line: rgba(255,255,255,.08); --glow: rgba(255,71,38,.25); /* Bouton principal : inversé par rapport au fond */ --btn-bg: #F2F2F2; --btn-fg: #0B0B0B; /* Encre constante posée sur un aplat blanc (bouton du CTA) */ --on-white-ink: #1C1C1C; /* Rayons */ --r-pill: 28px; --r-lg: 24px; --r-card: 20px; --r-md: 16px; --r-btn: 12px; --r-sm: 8px; /* Ombres — rampe douce à 8 paliers, identique au template */ --shadow: 0 .84px .5px -.31px rgba(0,0,0,.13), 0 1.99px 1.19px -.63px rgba(0,0,0,.13), 0 3.63px 2.18px -.94px rgba(0,0,0,.13), 0 6.04px 3.62px -1.25px rgba(0,0,0,.13), 0 9.75px 5.85px -1.56px rgba(0,0,0,.13), 0 15.96px 9.57px -1.88px rgba(0,0,0,.13), 0 27.48px 16.49px -2.19px rgba(0,0,0,.13), 0 50px 30px -2.5px rgba(0,0,0,.13); --shadow-soft: 0 .84px .5px -.31px rgba(0,0,0,.08), 0 1.99px 1.19px -.63px rgba(0,0,0,.08), 0 3.63px 2.18px -.94px rgba(0,0,0,.08), 0 6.04px 3.62px -1.25px rgba(0,0,0,.08), 0 9.75px 5.85px -1.56px rgba(0,0,0,.08), 0 15.96px 9.57px -1.88px rgba(0,0,0,.08), 0 27.48px 16.49px -2.19px rgba(0,0,0,.08), 0 50px 30px -2.5px rgba(0,0,0,.08); --shadow-accent: 0 .84px .5px -.31px rgba(255,71,38,.13), 0 1.99px 1.19px -.63px rgba(255,71,38,.13), 0 3.63px 2.18px -.94px rgba(255,71,38,.13), 0 6.04px 3.62px -1.25px rgba(255,71,38,.13), 0 9.75px 5.85px -1.56px rgba(255,71,38,.13), 0 15.96px 9.57px -1.88px rgba(255,71,38,.13), 0 27.48px 16.49px -2.19px rgba(255,71,38,.13), 0 50px 30px -2.5px rgba(255,71,38,.13); --inner-hl: inset 0 0 20px 1.64px rgba(255,255,255,.15); /* Rampe dédiée aux petites vignettes (avatars 34 px) : blur deux fois plus serré que la rampe des cartes, sinon l'ombre déborde de la pastille. */ --shadow-avatar: 0 .84px .42px -.22px rgba(0,0,0,.06), 0 1.99px 1px -.44px rgba(0,0,0,.06), 0 3.63px 1.82px -.66px rgba(0,0,0,.06), 0 6.04px 3.02px -.88px rgba(0,0,0,.06), 0 9.75px 4.87px -1.09px rgba(0,0,0,.07), 0 15.96px 7.98px -1.31px rgba(0,0,0,.07), 0 27.48px 13.74px -1.53px rgba(0,0,0,.08), 0 50px 25px -1.75px rgba(0,0,0,.1); /* Rythme */ --pad-x: 80px; --content: 1040px; --ease: cubic-bezier(.44,0,.56,1); } /* =================================================== JETONS — THÈME CLAIR == Les valeurs d'origine du template Funnelz. ========================================================================= */ :root[data-theme="light"] { color-scheme: light; --bg: #F5F5F5; --surface: #1C1C1C; --card-bg: #FFFFFF; --dark-gradient: linear-gradient(135deg, #2E2E2E 0%, #1C1C1C 100%); --ink: #1C1C1C; --muted: #6E6E6E; --on-dark: #D1D1D1; --line: #D9D9D9; --line-dark: #525252; --surface-ring: transparent; --hover-bg: rgba(28,28,28,.05); --header-bg: rgba(245,245,245,.72); /* Sur fond clair, les filets doivent être sombres et l'orbe plus discret. */ --grid-line: rgba(28,28,28,.07); --glow: rgba(255,71,38,.20); --btn-bg: #1C1C1C; --btn-fg: #FFFFFF; } /* ------------------------------------------------------------------ RESET */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Open Runde', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: #fff; } /* ------------------------------------------------------------ TYPOGRAPHIE */ .h1 { font-size: 68px; line-height: 1.1; font-weight: 500; letter-spacing: -.04em; color: var(--ink); } .h2 { font-size: 44px; line-height: 1.05; font-weight: 500; letter-spacing: -.04em; color: var(--ink); } .h2 .dim { display: block; color: var(--muted); } .h3 { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; } .h4 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } .lead { font-size: 18px; line-height: 1.6; font-weight: 400; letter-spacing: -.02em; color: var(--muted); } .body { font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: -.01em; color: var(--muted); } .body-strong { font-size: 16px; line-height: 1.6; font-weight: 600; letter-spacing: -.01em; } .eyebrow { font-size: 10px; line-height: 1.6; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .on-dark { color: var(--on-dark); } .accent { color: var(--accent); } /* ==================================================== DÉCOR DE FOND (HERO) Bandeau décoratif qui court derrière l'en-tête ET le hero : un orbe orange flouté, puis une grille de 48 px par-dessus, le tout fondu par un masque radial. Le bloc est un frère du
— surtout PAS un parent, sinon son `overflow: hidden` casserait le `position: sticky` de l'en-tête. ========================================================================= */ .page-bg { position: absolute; top: 0; left: 0; right: 0; height: 980px; overflow: hidden; pointer-events: none; z-index: 0; } .page-bg__orb { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: min(800px, 150vw); height: 500px; border-radius: 9999px; background: var(--glow); filter: blur(120px); } .page-bg__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%); } /* ----------------------------------------------------------------- LAYOUT */ /* Le contenu passe au-dessus du décor. */ main { position: relative; z-index: 1; } .section { padding: 40px var(--pad-x); position: relative; } .inner { max-width: var(--content); margin-inline: auto; } .headline { max-width: 752px; display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; } .headline--center { max-width: 100%; align-items: center; text-align: center; } /* -------------------------------------------------------------- TAG / PILL */ .tag { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; white-space: nowrap; width: fit-content; } .tag--dark { border-color: var(--line-dark); color: var(--on-dark); } .tag--green { border-color: var(--green); background: rgba(51,212,120,.05); color: var(--green); } .tag--green::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(51,212,120,.22); animation: pulse 2.2s var(--ease) infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } /* --------------------------------------------------------------- BOUTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 49px; padding: 12px 20px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.6; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 20px; height: 20px; flex: none; } .btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--inner-hl), var(--shadow); } .btn--primary:hover { background: var(--accent); color: #fff; box-shadow: var(--inner-hl), var(--shadow-accent); } .btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--secondary:hover { border-color: var(--ink); background: var(--hover-bg); } .btn--white { background: var(--white); color: var(--on-white-ink); box-shadow: var(--shadow-soft); } .btn--white:hover { background: var(--accent); color: var(--white); box-shadow: var(--shadow-accent); } .btn--accent { background: var(--accent); color: var(--white); box-shadow: var(--inner-hl), var(--shadow-accent); } .btn--accent:hover { background: var(--surface); box-shadow: var(--inner-hl), var(--shadow); } .btn--block { width: 100%; } /* ---------------------------------------------------------------- HEADER */ .site-header { position: sticky; top: 0; z-index: 60; padding: 20px var(--pad-x); transition: padding .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); } .site-header.is-stuck { padding: 12px var(--pad-x); background: var(--header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 var(--line); } .nav { max-width: var(--content); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand img { height: 30px; width: auto; } /* Le logo suit le thème : version blanche sur fond sombre, noire sur fond clair. */ .logo--on-dark { display: block; } .logo--on-light { display: none; } :root[data-theme="light"] .logo--on-dark { display: none; } :root[data-theme="light"] .logo--on-light { display: block; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { padding: 8px 14px; border-radius: 10px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); transition: color .2s var(--ease), background-color .2s var(--ease); } .nav__links a:hover, .nav__links a.is-active { color: var(--ink); background: var(--hover-bg); } .nav__cta { display: flex; align-items: center; gap: 10px; } /* ----------------------------------------------------- BASCULE DE THÈME */ .theme-toggle { width: 44px; height: 44px; flex: none; border-radius: var(--r-btn); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .theme-toggle:hover { background: var(--hover-bg); border-color: var(--ink); transform: translateY(-2px); } .theme-toggle svg { width: 20px; height: 20px; } /* En sombre on propose le soleil, en clair on propose la lune. Sélecteurs sur l'attribut : valables pour le bouton icône de l'en-tête comme pour le bouton texte du menu mobile. */ [data-theme-toggle] .icon-sun { display: block; } [data-theme-toggle] .icon-moon { display: none; } :root[data-theme="light"] [data-theme-toggle] .icon-sun { display: none; } :root[data-theme="light"] [data-theme-toggle] .icon-moon { display: block; } .burger { display: none; width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--line); align-items: center; justify-content: center; } .burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .2s var(--ease); } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger.is-open span { background: transparent; } .burger.is-open span::before { transform: translateY(6px) rotate(45deg); } .burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: 100px 20px 40px; display: flex; flex-direction: column; gap: 8px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .4s var(--ease), opacity .3s var(--ease); } .mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-menu a { padding: 16px 12px; border-radius: var(--r-btn); font-size: 24px; font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--line); } .mobile-menu .btn { margin-top: 24px; } /* ------------------------------------------------------------------ HERO Aligné à GAUCHE, comme la référence : bloc de 744 px calé sur le bord gauche du conteneur, titre / accroche / boutons / notes tous à gauche. */ .hero { min-height: 816px; display: flex; align-items: center; padding-block: 40px 0; } /* Deux colonnes : 744 px de contenu + 296 px d'agenda = 1040 px, la largeur de contenu exacte de la référence. L'agenda disparaît sous 1200 px. */ .hero__inner { max-width: var(--content); margin-inline: auto; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } .hero__headline { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 744px; flex: 1 1 auto; min-width: 0; } .hero__notifs { flex: none; width: 296px; } .hero__title { text-align: left; } .hero__title .line { display: block; } .icon-square { display: inline-flex; align-items: center; justify-content: center; vertical-align: -14px; width: 76px; height: 76px; padding: 8px; margin-inline: 6px; border-radius: var(--r-md); background: var(--accent); color: var(--white); box-shadow: var(--shadow-accent); } .icon-square svg { width: 57px; height: 57px; } .hero__sub { max-width: 482px; text-align: left; } .hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; } /* Le CTA final, lui, EST centré sur la référence. */ .cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .ratings { display: flex; align-items: center; gap: 24px; } .ratings__divider { width: 1px; align-self: stretch; background: var(--line); } .ratings__col { display: flex; flex-direction: column; align-items: center; gap: 10px; } .avatars { display: flex; } .avatars img { width: 33px; height: 33px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; } .avatars img + img { margin-left: -10px; } /* ------------------------------------------------------- PASTILLE D'AVIS */ .trustpilot { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--line); background: var(--hover-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease); } .trustpilot:hover { border-color: rgba(0,182,122,.5); background: rgba(0,182,122,.10); transform: translateY(-1px); } .trustpilot__stars { display: flex; gap: 2px; } .trustpilot__stars svg { width: 16px; height: 16px; } .trustpilot__stars .on { color: #00B67A; } .trustpilot__stars .off { color: var(--ink); opacity: .2; } .trustpilot__text { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .trustpilot__text strong { font-weight: 700; color: var(--ink); } .trustpilot:hover .trustpilot__text { color: var(--ink); } .stars { display: flex; gap: 4px; } .stars svg { width: 16px; height: 16px; color: var(--yellow); } .stars--sm svg { width: 11px; height: 11px; } .stars--lg svg { width: 26px; height: 26px; } /* ================================================ AGENDA DÉFILANT (HERO) == Colonne de cartes légèrement pivotées qui remonte en boucle. Valeurs reprises de la référence : carte 296 px, gap 32 px, rayon 16 px, avatar 34 px (rayon 24), séparateurs pointillés. ========================================================================= */ .vmarquee { height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } /* Le décalage de -50 % ne boucle proprement que si chaque moitié porte elle-même son espacement de fin : d'où le padding sur .vmarquee__half plutôt qu'un gap sur la piste. */ .vmarquee__track { display: flex; flex-direction: column; animation: scroll-y var(--speed, 44s) linear infinite; } .vmarquee__half { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-bottom: 32px; } .vmarquee:hover .vmarquee__track { animation-play-state: paused; } @keyframes scroll-y { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* Pas d'ombre portée sur la carte : la référence n'en met aucune, et huit cartes espacées de 32 px projetteraient chacune leur ombre sur la suivante — invisible sur fond sombre, mais très sale sur fond clair. Seul le liseré (transparent en thème clair) sert à détacher la carte en thème sombre. */ .notif { width: 296px; padding: 12px 0; border-radius: 16px; background: var(--card-bg); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 12px; transform: rotate(var(--rot, 0deg)); box-shadow: 0 0 0 1px var(--surface-ring); } .notif__date { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; overflow: hidden; } .notif__row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 12px; } .notif__day { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } .notif__when { font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); } .notif__sep { width: 100%; height: 0; border-bottom: 1px dashed var(--line); } .notif__body { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 12px; } .notif__item { display: flex; align-items: center; gap: 8px; width: 100%; } .notif__item:not(:last-child) { padding-bottom: 8px; border-bottom: 1px dashed var(--line); } .notif__ava { width: 34px; height: 34px; flex: none; border-radius: 24px; object-fit: cover; box-shadow: var(--shadow-avatar); } /* Pastille d'icône : même empreinte de 34 px que l'avatar, pour ne pas modifier la géométrie de la carte reprise de la référence. */ .notif__ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255,71,38,.12); color: var(--accent); } .notif__ico svg { width: 18px; height: 18px; } .notif__detail { font-size: 10px; font-weight: 400; letter-spacing: .02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .notif__det { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0; } .notif__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .notif__title { font-size: 14px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .notif__dur { font-size: 10px; font-weight: 400; letter-spacing: .02em; color: var(--muted); flex: none; } .notif__time { font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------- BANDEAU CLIENTS */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; width: max-content; animation: scroll-x var(--speed, 40s) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track > * { flex: none; } @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } .clients { padding-block: 24px; } .clients__label { text-align: center; color: var(--muted); margin-bottom: 24px; } .clients__item { display: flex; align-items: center; justify-content: center; height: 64px; padding-inline: 34px; color: var(--ink); opacity: .6; transition: opacity .3s var(--ease); } .clients__item:hover { opacity: 1; } .clients__item svg { height: 26px; width: auto; } /* ============================================== LOGOS CLIENTS MONOCHROMES == Les logos clients sont multicolores : tels quels, certains disparaissent sur fond clair, d'autres sur fond sombre. On n'affiche donc que leur SILHOUETTE, via `mask-image`, peinte avec la couleur du texte : noire en thème clair, blanche en thème sombre. Un seul fichier par client, aucune duplication. ========================================================================= */ .client-logo { display: flex; align-items: center; justify-content: center; } .client-logo__txt { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } /* Le masque n'est appliqué que si le navigateur le sait faire. Sinon, le nom du client s'affiche en texte — jamais un rectangle plein. */ @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .client-logo--mask { width: var(--w); height: var(--h); background-color: var(--ink); -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain; } .client-logo--mask .client-logo__txt { display: none; } } /* ----------------------------------------------------------------- CARTES */ .card { border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } /* Le liseré `--surface-ring` détache les cartes du fond en thème sombre. Il est transparent en thème clair, où le contraste suffit. */ .card--dark { background: var(--surface); color: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--surface-ring); } .card--gradient { background: var(--dark-gradient); color: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--surface-ring); } .card--outline { border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; justify-content: center; } .card--sm { border-radius: var(--r-md); } .stat { display: flex; flex-direction: column; gap: 8px; } .stat__number { display: flex; align-items: baseline; gap: 4px; font-size: 68px; line-height: 1.1; font-weight: 500; letter-spacing: -.04em; color: var(--white); } .stat__number .suffix { font-size: 44px; letter-spacing: -.04em; } .stat__label { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--white); } /* Grille « mission » : 2 colonnes fines + 1 large, exactement comme la réf. */ .mission-grid { display: grid; gap: 16px; grid-template-columns: 292fr 292fr 425fr; align-items: stretch; } .mission-col { display: grid; gap: 16px; } .mission-col--a { grid-template-rows: 84px 1fr; } .mission-col--b { grid-template-rows: 1fr 64px; } .mission-feature { position: relative; overflow: hidden; padding: 32px; } .mission-feature__icon { position: absolute; right: -90px; top: -60px; width: 384px; height: 384px; color: var(--accent); opacity: .16; pointer-events: none; } .mission-feature__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ---------------------------------------------------- TÉMOIGNAGES (haut) */ .proof-grid { display: grid; gap: 16px; grid-template-columns: 388fr 310fr 310fr; align-items: stretch; } .proof-col { display: grid; gap: 16px; } .proof-col--b { grid-template-rows: 1fr 64px; } .proof-col--c { grid-template-rows: 49px 1fr; } .quote { display: flex; flex-direction: column; gap: 16px; } .quote__mark { font-size: 44px; line-height: .6; font-weight: 700; color: var(--accent); height: 26px; } .quote__text { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--white); } .quote__text--sm { font-size: 20px; } .author { display: flex; align-items: center; gap: 12px; } .author img { width: 42px; height: 42px; border-radius: 44px; flex: none; object-fit: cover; } .author__name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--white); } .author__role { font-size: 14px; font-weight: 400; color: var(--on-dark); opacity: .75; } /* ------------------------------------------------------------ PROJETS */ .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .project--wide { grid-column: 1 / -1; } .project { display: block; border-radius: var(--r-card); } .project__frame { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--surface-ring); aspect-ratio: 480 / 384; } .project--wide .project__frame { aspect-ratio: 1008 / 384; } .project__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .project:hover .project__frame img { transform: scale(1.04); } /* Texte calé à gauche dans la carte, comme la référence. */ .project__overlay { position: absolute; inset: auto 0 0 0; padding: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; text-align: left; background: linear-gradient(to top, rgba(15,15,15,.92) 0%, rgba(15,15,15,.72) 45%, rgba(15,15,15,0) 100%); } .project__title { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--white); } .project__desc { font-size: 16px; color: var(--on-dark); } .project__tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; } .project__tags .tag { border-color: rgba(255,255,255,.28); color: var(--white); backdrop-filter: blur(6px); } /* ============================================== GALERIE D'UNE RÉALISATION == Chaque cellule impose son ratio natif : 16/9 en pleine largeur, 4/5 pour la rangée de trois portraits. Les hauteurs restent donc alignées. ========================================================================= */ .gallery { display: flex; flex-direction: column; gap: 16px; } .gallery figure { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--surface-ring); } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .gallery figure:hover img { transform: scale(1.03); } .gallery__wide { aspect-ratio: 16 / 9; } .gallery__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gallery__trio figure { aspect-ratio: 4 / 5; } /* Fiche projet : métadonnées en colonnes */ .proj-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; } .proj-meta div { display: flex; flex-direction: column; gap: 6px; } .proj-meta dt, .proj-meta .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); } .proj-meta dd, .proj-meta .v { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } /* Emplacement « à venir » — le pointillé signale un espace encore vide */ .soon { border: 1px dashed var(--line); border-radius: var(--r-card); padding: 40px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .soon .h3 { color: var(--ink); } /* ---------------------------------------------------------- ACCORDÉONS */ .accordion { border-top: 1px solid var(--line); } .acc-item { border-bottom: 1px solid var(--line); } .acc-head { width: 100%; display: flex; align-items: center; gap: 24px; padding: 20px 0; text-align: left; } .acc-num { font-size: 16px; font-weight: 600; color: var(--muted); flex: none; width: 34px; letter-spacing: 0; } .acc-title { flex: 1; font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ink); transition: color .25s var(--ease); } .acc-item:hover .acc-title, .acc-item.is-open .acc-title { color: var(--accent); } .acc-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); transition: transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .acc-icon svg { width: 16px; height: 16px; } .acc-item.is-open .acc-icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--white); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); } .acc-item.is-open .acc-panel { grid-template-rows: 1fr; } .acc-panel > div { overflow: hidden; } .acc-body { display: flex; gap: 30px; align-items: flex-start; padding: 0 20px 20px 58px; } .acc-body__text { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } .acc-body__images { display: flex; gap: 12px; flex: none; margin-left: auto; } .acc-body__images img { width: 110px; height: 90px; object-fit: cover; border-radius: var(--r-sm); /* Rampe « petite vignette » : la rampe des cartes déborderait largement d'une image de 90 px de haut, et se verrait sur fond clair. */ box-shadow: var(--shadow-avatar); } .acc-body__images img:first-child { transform: rotate(-4deg); } .acc-body__images img:last-child { transform: rotate(4deg); } /* FAQ : même composant, sans images */ .faq .acc-body { padding-left: 58px; } /* ------------------------------------------------- TÉMOIGNAGES (marquee) */ .testimonial-card { width: 380px; border-radius: var(--r-lg); padding: 24px; background: var(--card-bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 28px; margin-right: 16px; min-height: 197px; } .testimonial-card .quote__text { color: var(--ink); font-size: 20px; } .testimonial-card .author__name { color: var(--ink); } .testimonial-card .author__role { color: var(--muted); opacity: 1; } .testimonial-card .quote__mark { color: var(--accent); } /* ----------------------------------------------------------------- ÉQUIPE */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .team-card .project__frame { aspect-ratio: 480 / 552; } /* Bloc « fondateur » : une seule personne, donc un portrait et un texte côte à côte plutôt qu'une carte isolée dans une grille à deux colonnes. --founder-photo est calé sur la résolution réelle du portrait fourni (200 px). L'agrandir au-delà rendrait la photo floue ; le jour où une version ≥ 680 px est déposée, il suffit de repasser cette valeur à 340px. */ .founder { --founder-photo: 220px; display: grid; grid-template-columns: var(--founder-photo) 1fr; gap: 40px; align-items: center; } .founder__photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-soft), 0 0 0 1px var(--surface-ring); } .founder__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .founder__photo:hover img { transform: scale(1.03); } .founder__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; } .founder__text .h2 { font-size: 36px; } /* ------------------------------------------------------------------ BLOG */ .blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .blog-card { border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 24px; border: 1px solid var(--line); background: var(--card-bg); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--accent); } .blog-card__media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface); aspect-ratio: 478 / 232; } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .blog-card:hover .blog-card__media img { transform: scale(1.05); } .blog-card__media .tag { position: absolute; left: 16px; top: 16px; border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(6px); } .blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 0 8px 8px; flex: 1; } .blog-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; } .blog-card__foot img { width: 32px; height: 32px; border-radius: 44px; } /* -------------------------------------------------------------- CTA FINAL */ .cta { text-align: center; } .cta .inner { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 80px 40px; border-radius: var(--r-card); background: var(--dark-gradient); color: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--surface-ring); position: relative; overflow: hidden; } .cta .h2 { color: var(--white); } .cta .h2 .dim { color: var(--on-dark); opacity: .55; } .cta .lead { color: var(--on-dark); max-width: 560px; } .cta__glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,71,38,.30) 0%, rgba(255,71,38,0) 68%); left: 50%; top: 100%; transform: translate(-50%, -55%); } /* ---------------------------------------------------------------- FOOTER */ .site-footer { padding: 40px var(--pad-x) 48px; } .footer-grid { max-width: var(--content); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); } /* align-items par défaut (stretch) étirerait le logo sur toute la largeur de la colonne alors que sa hauteur est fixée : le bandeau serait déformé. */ .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 300px; } .footer-brand img { height: 34px; width: auto; align-self: flex-start; } .footer-brand p { align-self: stretch; } .footer-col h4 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin-bottom: 16px; } .footer-col li + li { margin-top: 10px; } .footer-col a { font-size: 16px; color: var(--ink); transition: color .2s var(--ease); } .footer-col a:hover { color: var(--accent); } .footer-bottom { max-width: var(--content); margin-inline: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); } .socials { display: flex; gap: 8px; } .socials a { width: 40px; height: 40px; border-radius: var(--r-btn); border: 1px solid var(--line); display: grid; place-items: center; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: translateY(-2px); } .socials svg { width: 18px; height: 18px; } /* ======================================================== PAGES INTERNES == En-tête compact, fil d'Ariane, texte long, formulaire. ========================================================================= */ .page-hero { padding-block: 72px 24px; } .page-hero__inner { max-width: var(--content); margin-inline: auto; } .page-hero__box { max-width: 744px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .crumbs { max-width: var(--content); margin-inline: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 20px; } .crumbs a:hover { color: var(--accent); } .crumbs span[aria-hidden] { opacity: .5; } .prose { max-width: 744px; display: flex; flex-direction: column; gap: 18px; } .prose h2 { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; margin-top: 20px; color: var(--ink); } .prose h3 { font-size: 18px; font-weight: 600; color: var(--ink); } .prose p, .prose li { font-size: 16px; line-height: 1.65; color: var(--muted); } .prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; list-style: disc; } .prose a { color: var(--accent); font-weight: 600; } .prose a:hover { text-decoration: underline; } /* Grille de services détaillés (page Services) */ .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .svc-card { position: relative; overflow: hidden; } .svc-card .icon-badge { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-accent); margin-bottom: 20px; } .svc-card .icon-badge svg { width: 26px; height: 26px; } .svc-card ul { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .svc-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--on-dark); } .svc-card li svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 4px; } /* Étapes numérotées */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); } .step__num { font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -.04em; color: var(--accent); } /* ------------------------------------------------------------ FORMULAIRE */ .form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 8px; } .field > label { font-size: 14px; font-weight: 600; color: var(--ink); } .field input, .field select, .field textarea { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 14px 16px; color: var(--ink); font: inherit; font-size: 16px; width: 100%; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .field textarea { min-height: 150px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,71,38,.18); } .field--consent { flex-direction: row; align-items: flex-start; gap: 12px; } .field--consent input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--accent); } .field--consent label { font-weight: 400; font-size: 14px; color: var(--muted); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-error { border: 1px solid var(--accent); background: rgba(255,71,38,.10); color: var(--ink); border-radius: var(--r-btn); padding: 14px 16px; font-size: 15px; margin-bottom: 20px; max-width: 640px; } .contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; } .contact-card { display: flex; flex-direction: column; gap: 20px; } .contact-line { display: flex; align-items: center; gap: 14px; } .contact-line svg { width: 20px; height: 20px; color: var(--accent); flex: none; } .contact-line b { display: block; font-size: 16px; font-weight: 600; color: var(--white); } .contact-line span { font-size: 14px; color: var(--on-dark); } /* ================================================== PARTENAIRES / FRANCE NUM Les logos officiels ne se recolorent pas : ils vivent sur une pastille blanche, valable dans les deux thèmes. ========================================================================= */ .partners { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; } .partner-badge { background: #FFFFFF; border-radius: var(--r-md); padding: 16px 22px; display: flex; align-items: center; justify-content: center; min-height: 116px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: transform .25s var(--ease); } .partner-badge:hover { transform: translateY(-2px); } .partner-badge img.rf { width: 140px; height: auto; } .partner-badge img.fn { width: 116px; height: auto; } .partners__text { flex: 1; min-width: 260px; display: flex; align-items: center; } .partners__text p { font-size: 14px; line-height: 1.6; color: var(--muted); } /* ------------------------------------------------------- BLOC SEO / ZONES */ .seo-zones { max-width: var(--content); margin-inline: auto; padding-top: 28px; } .seo-zones h2 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); margin-bottom: 10px; } .seo-zones p { font-size: 12px; line-height: 1.75; color: var(--muted); opacity: .72; } .seo-zones p + p { margin-top: 10px; } /* ------------------------------------------------------- APPARITION SCROLL Le masquage initial n'est appliqué QUE si le JS est actif (classe .js posée par un script inline dans le ). Sans JS, tout reste visible. */ .js .reveal { opacity: 0; transform: translateY(10px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); } /* ============================== TABLETTE (≤ 1199px) ======================= */ @media (max-width: 1199px) { :root { --pad-x: 40px; } .h1 { font-size: 52px; } .h2 { font-size: 36px; } .hero { min-height: 0; padding-block: 40px 24px; } .hero__inner { gap: 56px; } .icon-square { width: 58px; height: 58px; vertical-align: -10px; } .icon-square svg { width: 42px; height: 42px; } .nav__links { display: none; } .burger { display: flex; } .nav__cta .btn { display: none; } /* L'agenda défilant disparaît : plus la place pour deux colonnes. */ .hero__notifs { display: none; } .hero__inner { flex-direction: column; align-items: flex-start; gap: 0; } .mission-grid { grid-template-columns: 1fr 1fr; } .mission-grid .mission-feature { grid-column: 1 / -1; } .mission-feature__icon { right: -60px; } .proof-grid { grid-template-columns: 1fr 1fr; } .proof-grid .proof-col--c { grid-column: 1 / -1; grid-template-rows: 49px auto; } .footer-grid { grid-template-columns: 1fr 1fr; } .acc-body__images { display: none; } .page-bg { height: 840px; } .page-bg__grid { background-size: 40px 40px; } .svc-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .proj-meta { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .page-hero { padding-block: 48px 16px; } } /* ================================ MOBILE (≤ 809px) ======================== */ @media (max-width: 809px) { :root { --pad-x: 20px; } .h1 { font-size: 40px; letter-spacing: -.03em; } .h2 { font-size: 30px; letter-spacing: -.03em; } .h3 { font-size: 20px; } .lead { font-size: 16px; } .section { padding-block: 32px; } .hero__inner { gap: 40px; } .hero__headline { gap: 24px; } .icon-square { width: 40px; height: 40px; border-radius: 10px; padding: 6px; vertical-align: -6px; margin-inline: 3px; } .icon-square svg { width: 28px; height: 28px; } .hero__buttons { width: 100%; flex-direction: column; } .hero__buttons .btn { width: 100%; } .ratings { gap: 16px; } .mission-grid, .proof-grid, .projects-grid, .team-grid, .blog-grid { grid-template-columns: 1fr; } .mission-col--a, .mission-col--b, .proof-col--b, .proof-col--c { grid-template-rows: none; } .project--wide .project__frame { aspect-ratio: 480 / 384; } .mission-feature { padding: 24px; } .stat__number { font-size: 48px; } .stat__number .suffix { font-size: 30px; } .quote__text { font-size: 20px; } .acc-head { gap: 12px; } .acc-title { font-size: 18px; } .acc-num { width: 30px; font-size: 14px; } .acc-body { padding: 0 0 20px 42px; } .faq .acc-body { padding-left: 42px; } .testimonial-card { width: 300px; } .cta .inner { padding: 48px 24px; border-radius: var(--r-md); } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .clients__item { padding-inline: 22px; } .clients__item svg { height: 20px; } .steps { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } .gallery__trio { grid-template-columns: 1fr; } .proj-meta { grid-template-columns: 1fr 1fr; gap: 20px; } .soon { padding: 28px 20px; } .founder { grid-template-columns: 1fr; gap: 24px; } .founder__photo { max-width: var(--founder-photo); } .founder__text .h2 { font-size: 30px; } .partners { gap: 12px; } .partner-badge { padding: 12px 16px; min-height: 92px; } .partner-badge img.rf { width: 112px; } .partner-badge img.fn { width: 94px; } .page-hero { padding-block: 32px 8px; } /* Orbe plus petit et flou moins coûteux sur mobile. */ .page-bg { height: 700px; } .page-bg__grid { background-size: 32px 32px; } .page-bg__orb { top: -120px; width: min(560px, 145vw); height: 360px; filter: blur(90px); } } /* --------------------------------------------------- PRÉFÉRENCES SYSTÈME */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------------------ IMPRESSION */ @media print { .site-header, .marquee, .cta, .socials, .theme-toggle { display: none !important; } body { background: #fff; color: #1C1C1C; } }