/* =================================================================== LES DEUX THÈMES (17/08) ------------------------------------------------------------------- Tout repose sur DEUX teintes, et c'est ce qui rend le thème clair possible sans réécrire cent règles : --surf la teinte des surfaces POSÉES PAR-DESSUS le fond (cartes, bordures). Blanche sur fond sombre, sombre sur fond clair. Les transparences (.06, .12…) ne changent pas. --creux la teinte des zones CREUSÉES DANS le fond (champs de saisie, barre collante). L'exact inverse. ⚠️ CE FICHIER EST PARTAGÉ AVEC LE SITE PUBLIC. Le thème clair ne s'applique QUE si l'attribut data-theme="clair" est posé sur , et seul le Studio le pose. Les valeurs sombres ci-dessous sont identiques à celles d'avant, au caractère près : le site public ne bouge pas d'un pixel. */ :root { color-scheme: dark; /* les champs natifs (dates, menus) suivent */ --surf: 255,255,255; --creux: 8,11,18; --bg: #080b12; --bg-soft: #0d111b; --panel: rgba(var(--surf),.055); --panel-strong: rgba(var(--surf),.08); --line: rgba(var(--surf),.12); --line-soft: rgba(var(--surf),.07); --text: #f6f8fc; --muted: #9aa6ba; --muted-2: #6f7a8e; --accent: #6ae3ff; --accent-2: #7b76ff; --accent-3: #53f3b1; --grille: rgba(255,255,255,.06); /* quadrillage des graphiques */ --halo-1: rgba(79,109,255,.16); --halo-2: rgba(26,217,255,.11); /* Les trois teintes de signalement. Sur fond sombre, elles éclairent ; sur fond clair, elles devront foncer — sinon un ambre pensé pour du noir devient un jaune illisible sur du blanc. */ --ambre: 255,207,125; --ambre-txt: #ffcf7d; --alerte: 255,90,90; --alerte-txt: #ff8f8f; --jade: 83,243,177; --jade2: 125,220,180; --texte-doux: rgba(255,255,255,.7); /* texte posé sur une image ou un voile */ --texte-doux-2: rgba(255,255,255,.68); --voile: rgba(0,0,0,.54); /* le voile des cartes de projet */ --backdrop: rgba(4,6,10,.7); /* derrière une fenêtre modale */ --max: 1240px; --radius-lg: 32px; --radius-md: 22px; --shadow: 0 30px 80px rgba(0,0,0,.35); } /* ☀️ THÈME CLAIR — Studio uniquement. Les panneaux deviennent franchement blancs sur un fond gris pâle : une carte doit se détacher du fond, pas s'y fondre. Les accents foncent, sinon un cyan pensé pour du noir devient illisible sur du blanc. Et le corail d'alerte devient un AMBRE FONCÉ : jamais de rouge à l'écran, la règle vaut dans les deux thèmes. */ html[data-theme="clair"] { color-scheme: light; --surf: 24,34,52; /* ⚠️ PAS du blanc pur : une zone creusée doit rester VISIBLE sur un panneau blanc. Du blanc sur du blanc, ça n'existe plus. Ce gris très pâle joue exactement le rôle que le presque-noir joue en sombre. */ --creux: 234,238,245; --bg: #eef1f6; --bg-soft: #ffffff; --panel: #ffffff; --panel-strong: #ffffff; --line: rgba(var(--surf),.16); --line-soft: rgba(var(--surf),.10); --text: #131a25; --muted: #4f5a70; /* ⚠️ Le gris secondaire porte les DATES et les petites mentions. Trop pâle, elles deviennent illisibles — c'est le premier reproche fait au thème clair le 17/08. Il est donc nettement plus foncé qu'en sombre. */ --muted-2: #5c6478; --accent: #0c6a8a; --accent-2: #453fbb; --accent-3: #0b7050; --grille: rgba(24,34,52,.10); --halo-1: rgba(79,109,255,.07); --halo-2: rgba(26,217,255,.06); --shadow: 0 18px 46px rgba(24,34,52,.10); /* Les signalements, version fond clair : on garde l'esprit (ambre doux pour ce qui attend, brun-ambre pour ce qui coince) mais assez foncé pour se lire sur du blanc. Toujours aucun rouge d'alarme. */ --ambre: 150,105,12; --ambre-txt: #7d5a0c; --alerte: 160,70,20; --alerte-txt: #9a4614; --jade: 14,125,89; --jade2: 22,120,88; --texte-doux: rgba(19,26,37,.74); --texte-doux-2: rgba(19,26,37,.70); --voile: rgba(255,255,255,.55); --backdrop: rgba(24,34,52,.42); } /* Le bouton principal : en sombre, texte noir sur cyan lumineux. En clair, l'accent devient foncé — il faut donc inverser le texte, sinon c'est du noir sur du bleu foncé, illisible. */ html[data-theme="clair"] .button-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 28px rgba(12,106,138,.20); } html[data-theme="clair"] .button-light { border-color: var(--line); } /* Sur fond pâle, une plaque blanche a besoin d'un contour pour exister. */ html[data-theme="clair"] .brand-plate { border-color: rgba(var(--surf),.14); box-shadow: 0 8px 22px rgba(24,34,52,.10); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at 10% 0%, var(--halo-1), transparent 34%), radial-gradient(circle at 100% 12%, var(--halo-2), transparent 28%), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(rgba(var(--surf),.016) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--surf),.016) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 75%); z-index: -2; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } img, svg { display: block; max-width: 100%; } .site-noise { position: fixed; inset: 0; pointer-events: none; opacity: .028; z-index: 50; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); } .cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(86,127,255,.12), transparent 68%); transform: translate(-50%, -50%); pointer-events: none; z-index: -1; left: 50%; top: 20%; } .site-header { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; height: 98px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(var(--surf),.1), rgba(var(--surf),.025)); box-shadow: inset 0 1px rgba(var(--surf),.12); } .brand-mark svg { width: 27px; fill: var(--text); } .brand-mark .mark-cut { fill: var(--accent); opacity: .95; } .brand-text { font-size: 17px; font-weight: 850; letter-spacing: .14em; } .brand-text span { color: var(--accent); } .site-nav { display: flex; align-items: center; gap: 34px; } .site-nav > a { color: var(--muted); font-size: 14px; transition: color .2s ease, transform .2s ease; } .site-nav > a:hover { color: var(--text); transform: translateY(-1px); } .site-nav .nav-cta { color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; background: rgba(var(--surf),.035); } .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--surf),.04); } .menu-toggle span { display: block; width: 18px; height: 1px; background: white; margin: 5px auto; } .back-link { color: var(--muted); font-size: 14px; } .hero { position: relative; width: min(calc(100% - 48px), var(--max)); margin: 0 auto; min-height: 760px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; padding: 70px 0 84px; } .hero-content { position: relative; z-index: 3; max-width: 730px; } .eyebrow, .section-kicker { color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; } .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .eyebrow span { width: 34px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); } .hero h1 { margin: 0; font-size: clamp(54px, 6.2vw, 92px); line-height: .98; letter-spacing: -.055em; max-width: 860px; } .hero h1 em { display: block; color: transparent; -webkit-text-stroke: 1px rgba(var(--surf),.58); font-style: normal; } .hero-lead { max-width: 690px; margin: 30px 0 0; color: var(--muted); font-size: clamp(18px, 1.5vw, 21px); } .hero-actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; } .button { min-height: 52px; padding: 0 22px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-weight: 750; font-size: 14px; border: 1px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .button:hover { transform: translateY(-2px); } .button-primary { color: #061016; background: linear-gradient(135deg, #eafcff, var(--accent)); box-shadow: 0 14px 36px rgba(76,213,255,.18); } .button-ghost { color: var(--text); border-color: var(--line); background: rgba(var(--surf),.035); } .button-light { background: white; color: #0a0d13; box-shadow: 0 15px 35px rgba(var(--surf),.12); } .hero-visual { position: relative; min-height: 540px; display: grid; place-items: center; } .visual-grid { position: absolute; width: 470px; height: 470px; background: linear-gradient(rgba(var(--surf),.055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--surf),.055) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle, black 12%, transparent 72%); transform: perspective(700px) rotateX(58deg) rotateZ(-18deg) translateY(110px); } .visual-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(115,203,255,.21); } .ring-a { width: 390px; height: 390px; animation: spin 24s linear infinite; } .ring-b { width: 285px; height: 285px; border-style: dashed; animation: spinReverse 18s linear infinite; } .visual-core { width: 214px; height: 214px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(var(--surf),.17); background: radial-gradient(circle at 30% 20%, rgba(120,209,255,.2), transparent 32%), linear-gradient(145deg, rgba(var(--surf),.09), rgba(var(--surf),.025)); box-shadow: 0 0 70px rgba(66,152,255,.13), inset 0 0 40px rgba(var(--surf),.03); backdrop-filter: blur(12px); } .core-label { color: var(--muted); font-size: 12px; letter-spacing: .25em; } .visual-core strong { font-size: 62px; line-height: 1; letter-spacing: -.06em; } .visual-core small { margin-top: 14px; color: var(--accent); letter-spacing: .18em; font-size: 8px; } .floating-card { position: absolute; min-width: 178px; padding: 15px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,14,23,.72); backdrop-filter: blur(14px); box-shadow: var(--shadow); } .floating-card strong, .floating-card small { display: block; } .floating-card strong { font-size: 13px; } .floating-card small { color: var(--muted); font-size: 11px; margin-top: 2px; } .card-icon { color: var(--accent); font-size: 22px; } .card-mobile { top: 74px; left: 7px; animation: float 5s ease-in-out infinite; } .card-web { right: -8px; top: 208px; animation: float 5.8s ease-in-out infinite reverse; } .card-api { left: 70px; bottom: 44px; animation: float 6.4s ease-in-out infinite; } .hero-metrics { position: absolute; left: 0; right: 0; bottom: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .hero-metrics > div { min-height: 88px; display: flex; align-items: center; gap: 18px; padding: 0 26px; border-right: 1px solid var(--line-soft); } .hero-metrics > div:last-child { border-right: 0; } .hero-metrics strong { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; } .hero-metrics span { color: var(--muted); font-size: 13px; } .hero-orbit { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .35; pointer-events: none; } .orbit-one { width: 620px; height: 620px; right: -230px; top: -180px; border: 1px solid rgba(103,163,255,.15); } .orbit-two { width: 360px; height: 360px; left: -240px; bottom: -80px; border: 1px solid rgba(103,255,219,.11); } .logos-strip { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 30px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .18em; } .logos-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .6; } .section { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; padding: 130px 0; } .section-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 62px; } .section-kicker { margin: 0 0 16px; } .section-heading h2, .studio-copy h2, .cta-inner h2, .contact-hero h1 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -.045em; } .section-heading > p { margin: 0 0 7px; color: var(--muted); font-size: 17px; max-width: 480px; } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .service-card { min-height: 430px; position: relative; padding: 30px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(150deg, rgba(var(--surf),.07), rgba(var(--surf),.02)); overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .service-card::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -120px; top: -120px; background: radial-gradient(circle, rgba(93,181,255,.14), transparent 70%); } .service-card:hover { transform: translateY(-8px); border-color: rgba(106,227,255,.3); } .service-number { color: var(--muted-2); font-size: 11px; letter-spacing: .15em; } .service-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 54px 0 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--accent); font-size: 27px; background: rgba(var(--surf),.035); } .service-card h3 { font-size: 25px; margin: 0 0 14px; letter-spacing: -.025em; } .service-card p { color: var(--muted); margin: 0 0 24px; } .service-card ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 9px; } .service-card li { color: #cdd6e5; font-size: 13px; } .service-card li::before { content: "＋"; color: var(--accent); margin-right: 8px; } .studio { padding-top: 40px; } .studio-panel { min-height: 570px; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding: 76px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: radial-gradient(circle at 10% 10%, rgba(88,112,255,.14), transparent 34%), linear-gradient(135deg, rgba(var(--surf),.065), rgba(var(--surf),.02)); } .studio-copy { align-self: center; } .studio-copy p:not(.section-kicker) { color: var(--muted); font-size: 17px; max-width: 520px; margin: 26px 0 30px; } .text-link { display: inline-flex; gap: 14px; align-items: center; color: var(--accent); font-weight: 750; font-size: 14px; } .principles { display: flex; flex-direction: column; justify-content: center; } .principle { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--line-soft); } .principle:last-child { border-bottom: 0; } .principle > span { color: var(--accent); font-size: 11px; margin-top: 5px; } .principle h3 { margin: 0 0 7px; font-size: 20px; } .principle p { color: var(--muted); margin: 0; font-size: 14px; } .project-showcase { margin-top: 70px; } .showcase-top { display: flex; justify-content: space-between; color: var(--muted-2); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; padding-bottom: 16px; } .showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .project-card { min-height: 440px; position: relative; padding: 30px; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; } .project-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, transparent 25%, var(--voile)), radial-gradient(circle at 75% 20%, rgba(var(--surf),.18), transparent 25%); z-index: -1; } .project-card::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -90px; top: -70px; border: 1px solid rgba(var(--surf),.24); box-shadow: 0 0 0 35px rgba(var(--surf),.025), 0 0 0 70px rgba(var(--surf),.018); z-index: -1; } .project-blue { background: linear-gradient(150deg, #1647ad, #0b1220 72%); } .project-violet { background: linear-gradient(150deg, #6b35bf, #131020 72%); } .project-green { background: linear-gradient(150deg, #08785d, #081a17 72%); } .project-tag { position: absolute; top: 26px; left: 26px; color: var(--texte-doux-2); font-size: 10px; letter-spacing: .18em; } .project-card h3 { margin: 0; font-size: 52px; line-height: .9; letter-spacing: -.055em; } .project-card p { color: var(--texte-doux); max-width: 260px; margin: 20px 0 0; } .project-arrow { position: absolute; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(var(--surf),.24); display: grid; place-items: center; } .timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .timeline-item { min-height: 270px; padding: 32px 26px; border-right: 1px solid var(--line-soft); } .timeline-item:last-child { border-right: 0; } .timeline-item > span { color: var(--accent); font-size: 11px; } .timeline-item h3 { margin: 66px 0 12px; font-size: 24px; } .timeline-item p { color: var(--muted); margin: 0; font-size: 14px; } .cta-section { position: relative; width: min(calc(100% - 48px), var(--max)); margin: 0 auto 90px; min-height: 520px; display: grid; place-items: center; text-align: center; overflow: hidden; border-radius: 38px; border: 1px solid rgba(var(--surf),.12); background: radial-gradient(circle at 50% 110%, rgba(88,224,255,.28), transparent 40%), linear-gradient(145deg, #172145, #0f1322 65%); } .cta-glow { position: absolute; width: 740px; height: 740px; border-radius: 50%; border: 1px solid rgba(var(--surf),.12); box-shadow: 0 0 0 70px rgba(var(--surf),.02), 0 0 0 140px rgba(var(--surf),.015); top: 200px; } .cta-inner { position: relative; z-index: 2; padding: 70px 24px; } .cta-inner p:not(.section-kicker) { color: #b8c2d4; max-width: 560px; margin: 24px auto 30px; font-size: 17px; } .site-footer { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; min-height: 210px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; border-top: 1px solid var(--line-soft); } .site-footer p { color: var(--muted); text-align: center; } .footer-links { display: flex; gap: 22px; color: var(--muted); font-size: 13px; } .site-footer small { grid-column: 1 / -1; color: var(--muted-2); font-size: 11px; margin-top: -60px; } .footer-brand { justify-self: start; } /* Contact */ .contact-main { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; } .contact-hero { min-height: 390px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; padding: 70px 0 60px; } .contact-hero h1 em { color: var(--accent); font-style: normal; } .contact-hero > div > p:not(.section-kicker) { color: var(--muted); max-width: 620px; font-size: 18px; margin-top: 22px; } .contact-meta { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; background: rgba(var(--surf),.035); } .contact-meta > div { padding: 24px 18px; border-right: 1px solid var(--line-soft); } .contact-meta > div:last-child { border-right: 0; } .contact-meta span, .contact-meta strong { display: block; } .contact-meta span { color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 8px; } .contact-meta strong { font-size: 13px; } .contact-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; padding-bottom: 110px; } .contact-form { padding: 36px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: rgba(var(--surf),.04); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-form label { display: block; margin-bottom: 22px; } .contact-form label > span { display: block; font-size: 12px; color: #ccd6e6; margin-bottom: 9px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--line); color: white; background: rgba(4,7,12,.55); border-radius: 14px; outline: none; padding: 15px 16px; transition: border-color .2s ease, box-shadow .2s ease; } .contact-form textarea { resize: vertical; min-height: 170px; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: rgba(106,227,255,.7); box-shadow: 0 0 0 4px rgba(106,227,255,.07); } .contact-form option { color: #111; } .form-submit { border: 0; cursor: pointer; } .form-note { color: var(--muted-2); font-size: 11px; margin: 14px 0 0; } .contact-aside { display: flex; flex-direction: column; gap: 18px; } .contact-card { position: relative; flex: 1; min-height: 390px; padding: 38px; border-radius: var(--radius-lg); background: radial-gradient(circle at 90% 10%, rgba(112,218,255,.2), transparent 25%), linear-gradient(145deg, #1a2347, #0f1423 70%); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; } .contact-card-label { position: absolute; top: 36px; left: 38px; color: var(--accent); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; } .contact-card h2 { margin: 0 0 28px; font-size: 37px; line-height: 1.05; letter-spacing: -.04em; } .email-link { color: var(--accent); font-weight: 750; word-break: break-all; } .copy-email { margin-top: 18px; width: fit-content; color: var(--muted); background: transparent; border: 0; padding: 0; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; } .availability { min-height: 112px; padding: 24px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--line-soft); border-radius: 20px; background: rgba(var(--surf),.03); } .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 0 6px rgba(var(--jade),.1), 0 0 18px rgba(var(--jade),.5); } .availability strong { font-size: 13px; } .availability p { color: var(--muted); margin: 4px 0 0; font-size: 12px; } .compact-footer { min-height: 110px; display: flex; justify-content: center; } .compact-footer small { margin: 0; } /* Reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes spinReverse { to { transform: rotate(-360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (max-width: 980px) { .site-header { height: 82px; } .menu-toggle { display: block; } .site-nav { position: absolute; left: 0; right: 0; top: 72px; display: none; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(var(--creux),.96); backdrop-filter: blur(14px); } .site-nav.open { display: grid; } .hero { grid-template-columns: 1fr; padding-top: 70px; min-height: auto; } .hero-visual { min-height: 520px; } .hero-metrics { position: static; margin-top: 34px; } .section-heading, .studio-panel, .contact-hero, .contact-layout { grid-template-columns: 1fr; } .service-grid, .showcase-grid { grid-template-columns: 1fr; } .service-card { min-height: 350px; } .studio-panel { padding: 48px; gap: 40px; } .timeline { grid-template-columns: 1fr 1fr; } .timeline-item:nth-child(2) { border-right: 0; } .contact-hero { gap: 30px; } .contact-card-label { position: static; margin-bottom: auto; } } @media (max-width: 680px) { .site-header, .hero, .section, .cta-section, .site-footer, .contact-main { width: min(calc(100% - 28px), var(--max)); } .brand-text { font-size: 14px; } .hero { padding-top: 46px; } .hero h1 { font-size: 48px; } .hero-visual { min-height: 430px; transform: scale(.88); margin: -20px -30px; } .floating-card { min-width: 150px; padding: 12px 14px; } .card-web { right: 5px; } .hero-metrics { grid-template-columns: 1fr; } .hero-metrics > div { border-right: 0; border-bottom: 1px solid var(--line-soft); } .hero-metrics > div:last-child { border-bottom: 0; } .logos-strip { overflow: hidden; justify-content: flex-start; padding-left: 20px; gap: 20px; white-space: nowrap; } .section { padding: 90px 0; } .section-heading { gap: 26px; margin-bottom: 44px; } .section-heading h2, .studio-copy h2, .cta-inner h2, .contact-hero h1 { font-size: 40px; } .studio-panel { padding: 30px 22px; } .project-card { min-height: 360px; } .project-card h3 { font-size: 44px; } .timeline { grid-template-columns: 1fr; } .timeline-item { border-right: 0; border-bottom: 1px solid var(--line-soft); min-height: 230px; } .timeline-item h3 { margin-top: 42px; } .cta-section { min-height: 470px; border-radius: 26px; } .site-footer { grid-template-columns: 1fr; padding: 50px 0; text-align: center; } .footer-brand { justify-self: center; } .footer-links { justify-content: center; } .site-footer small { margin: 0; } .form-row, .contact-meta { grid-template-columns: 1fr; } .contact-meta > div { border-right: 0; border-bottom: 1px solid var(--line-soft); } .contact-form, .contact-card { padding: 25px; } .back-link { font-size: 12px; } .cursor-glow { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } } /* Labs1307 supplied identity */ .brand-image { gap: 0; } .brand-plate { display: flex; align-items: center; height: 54px; padding: 8px 15px; border-radius: 16px; /* ⚠️ BLANC EN DUR, VOLONTAIREMENT. Le logo est bleu foncé sur fond transparent : sa plaque doit rester blanche, thème clair compris. Passée en teinte de surface, elle virait au bleu nuit (17/08). */ background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.78); box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.95); } .brand-plate img { width: 185px; height: auto; object-fit: contain; } .footer-logo-plate { height: 58px; } .footer-logo-plate img { width: 196px; } .visual-core-logo { width: 226px; height: 226px; padding: 26px; border-radius: 42px; } .visual-core-logo img { width: 146px; height: 146px; object-fit: contain; border-radius: 30px; box-shadow: 0 22px 45px rgba(0,0,0,.22); } .visual-core-logo small { margin-top: 12px; } /* News */ .news-section { padding-top: 70px; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .news-card { position: relative; min-height: 330px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(150deg, rgba(var(--surf),.065), rgba(var(--surf),.018)); overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .news-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(77,182,255,.16), transparent 68%); } .news-card:hover { transform: translateY(-7px); border-color: rgba(106,227,255,.32); } .news-card-featured { background: radial-gradient(circle at 90% 0%, rgba(106,227,255,.18), transparent 35%), linear-gradient(145deg, #152044, #0c101a 72%); } .news-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; } .news-meta span { color: var(--accent); } .news-card h3 { margin: auto 0 15px; font-size: 29px; line-height: 1.02; letter-spacing: -.035em; } .news-card p { color: var(--muted); margin: 0 0 25px; font-size: 14px; } .news-link { color: #dce6f6; font-size: 12px; font-weight: 700; } .news-link b { color: var(--accent); margin-left: 7px; } @media (max-width: 980px) { .news-grid { grid-template-columns: 1fr; } .brand-plate img { width: 165px; } } @media (max-width: 680px) { .brand-plate { height: 47px; padding: 7px 11px; border-radius: 13px; } .brand-plate img { width: 143px; } .back-link { max-width: 110px; text-align: right; line-height: 1.25; } } /* Image d'actualité (chargée depuis Supabase) */ .news-image { width: calc(100% + 2px); margin: -1px -1px 14px; height: 160px; object-fit: cover; border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--line-soft); }