/* ========================================================================= Alexandre Navaeian — Thème « Studio » Reproduction fidèle de la maquette (variante C). Dark par défaut. Les couleurs sont surchargeables via le panneau d'options du thème (variables injectées dans par inc/theme-options.php). ========================================================================= */ :root, [data-theme="dark"] { --bg: #0b0b12; --panel: rgba(255, 255, 255, .04); --panel2: #16161f; --ink: #f4f3ff; --dim: #a4a3c0; --accent: #7c5cff; --accent2: #39e6b0; --line: rgba(255, 255, 255, .10); --cardbd: rgba(255, 255, 255, .08); --star: #ffb000; color-scheme: dark; } [data-theme="light"] { --bg: #f3f1ec; --panel: rgba(0, 0, 0, .02); --panel2: #ffffff; --ink: #16151f; --dim: #5b596f; --accent: #5b3df5; --accent2: #0f9d72; --line: rgba(0, 0, 0, .08); --cardbd: rgba(0, 0, 0, .07); --star: #e0930a; color-scheme: light; } /* ---------- Reset léger ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif; } /* Accessibilité : focus visible */ :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .an-skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; } .an-skip-link:focus { left: 0; } /* ---------- Keyframes ---------- */ @keyframes an-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes an-floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } } @keyframes an-floatY2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(30px); } } @keyframes an-gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes an-pulseDot { 0% { box-shadow: 0 0 0 0 rgba(57, 230, 176, .6); } 70% { box-shadow: 0 0 0 9px rgba(57, 230, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(57, 230, 176, 0); } } @keyframes an-spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- Décor (blobs) ---------- */ .an-shell { position: relative; min-height: 100vh; } .an-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .an-blob--1 { top: -120px; left: -90px; width: 480px; height: 480px; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%); filter: blur(70px); opacity: .5; animation: an-floatY 9s ease-in-out infinite; } .an-blob--2 { top: 520px; right: -140px; width: 440px; height: 440px; background: radial-gradient(circle at 50% 50%, var(--accent2), transparent 70%); filter: blur(80px); opacity: .38; animation: an-floatY2 11s ease-in-out infinite; } /* ---------- Header ---------- */ .an-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 18px 40px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--line); } .an-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .an-brand__mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 15px; } .an-brand__name { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 17px; color: var(--ink); } .an-nav { display: flex; gap: 6px; margin-left: auto; align-items: center; } .an-nav a { font-size: 14px; font-weight: 500; color: var(--dim); text-decoration: none; padding: 7px 13px; border-radius: 999px; transition: color .2s, background .2s; } .an-nav a:hover, .an-nav .current-menu-item > a, .an-nav .current_page_item > a { color: var(--ink); background: var(--panel2); } .an-cta-pill { text-decoration: none; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 9px 16px; border-radius: 999px; white-space: nowrap; } .an-themetoggle { font: inherit; font-weight: 500; font-size: 13px; cursor: pointer; color: var(--ink); background: var(--panel2); border: 1px solid var(--cardbd); padding: 8px 12px; border-radius: 999px; } .an-burger { display: none; background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 10px; width: 40px; height: 40px; cursor: pointer; color: var(--ink); } /* ---------- Layout ---------- */ .an-main { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 64px 40px 60px; } .an-section { margin-bottom: 70px; } .an-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--accent2); text-transform: uppercase; margin-bottom: 14px; } .an-grad { background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent)); background-size: 200% auto; animation: an-gradShift 6s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .an-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; } .an-section__head h2 { margin: 0; } .an-link { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; } /* ---------- Hero ---------- */ .an-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--dim); background: var(--panel2); border: 1px solid var(--cardbd); padding: 7px 14px; border-radius: 999px; margin-bottom: 28px; } .an-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); animation: an-pulseDot 2s infinite; } .an-hero h1 { margin: 0 0 24px; font-weight: 800; font-size: clamp(40px, 7vw, 80px); line-height: .96; letter-spacing: -2.5px; color: var(--ink); max-width: 900px; } .an-hero p { margin: 0 0 32px; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.55; color: var(--dim); max-width: 660px; } .an-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .an-btn { text-decoration: none; font-weight: 700; font-size: 15px; padding: 15px 28px; border-radius: 14px; display: inline-block; transition: transform .2s, border-color .2s; } .an-btn--primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 30px -8px var(--accent); } .an-btn--primary:hover { transform: translateY(-2px); } .an-btn--ghost { font-weight: 600; color: var(--ink); background: var(--panel2); border: 1px solid var(--cardbd); } .an-btn--ghost:hover { border-color: var(--accent); } /* ---------- Stats ---------- */ .an-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 64px; } .an-stat { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 18px; padding: 24px; } .an-stat__n { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: clamp(34px, 4vw, 44px); line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .an-stat__l { font-size: 13px; color: var(--dim); margin-top: 8px; } /* ---------- Marquee ---------- */ .an-marquee { overflow: hidden; margin-bottom: 64px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .an-marquee__track { display: flex; width: max-content; animation: an-marq 30s linear infinite; font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 19px; white-space: nowrap; } .an-marquee__group { display: flex; gap: 14px; padding-right: 14px; align-items: center; } .an-marquee__group span:nth-child(odd) { color: var(--dim); } .an-marquee__sep { color: var(--accent); } /* ---------- Services ---------- */ .an-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .an-svc { text-decoration: none; background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 20px; padding: 24px; transition: transform .25s, border-color .25s; display: block; } .an-svc:hover { transform: translateY(-4px); border-color: var(--accent); } .an-svc__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .an-svc__icon { font-size: 26px; } .an-svc h3 { margin: 0; font-weight: 700; font-size: 22px; color: var(--ink); } .an-pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent2); background: var(--panel); border: 1px solid var(--cardbd); padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; } .an-svc p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--dim); } .an-svc__since { font-size: 13px; color: var(--dim); opacity: .7; } /* Services — fiches détaillées */ .an-svc-detail { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 24px; padding: 34px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: start; } .an-svc-detail__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .an-svc-detail__badge { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-size: 28px; } .an-svc-detail h2 { margin: 0; font-weight: 800; font-size: 28px; color: var(--ink); } .an-svc-detail__sub { font-size: 13px; font-weight: 600; color: var(--accent2); } .an-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .an-bullet { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--cardbd); border-radius: 12px; padding: 13px 15px; } .an-bullet__check { color: var(--accent2); font-weight: 800; font-size: 15px; line-height: 1.3; } .an-bullet span:last-child { font-size: 14px; line-height: 1.4; color: var(--ink); } .an-list-flow { display: flex; flex-direction: column; gap: 18px; } /* ---------- Projets ---------- */ .an-proj-grid { display: grid; gap: 16px; } .an-proj-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .an-proj-grid--2 { grid-template-columns: 1fr 1fr; } .an-proj { text-decoration: none; border-radius: 20px; overflow: hidden; border: 1px solid var(--cardbd); background: var(--panel2); transition: transform .25s; display: block; } .an-proj:hover { transform: translateY(-4px); } .an-proj__cover { height: 110px; background: linear-gradient(135deg, var(--accent), var(--accent2)); background-size: 200% 200%; animation: an-gradShift 7s ease infinite; position: relative; } .an-proj--lg .an-proj__cover { height: 140px; } .an-proj__cover img { width: 100%; height: 100%; object-fit: cover; } .an-proj__tag { position: absolute; bottom: 14px; left: 18px; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: #fff; background: rgba(0, 0, 0, .25); padding: 5px 12px; border-radius: 999px; text-transform: uppercase; } .an-proj__body { padding: 20px; } .an-proj__type { font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--dim); text-transform: uppercase; } .an-proj h3, .an-proj h2 { margin: 6px 0 12px; font-weight: 700; font-size: 19px; line-height: 1.1; color: var(--ink); } .an-proj--lg h2 { font-size: 23px; } .an-proj p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--dim); } .an-result { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent2); background: var(--panel); border: 1px solid var(--cardbd); padding: 5px 11px; border-radius: 999px; } .an-proj__more { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent2); } .an-svc-detail h2 a { color: inherit; text-decoration: none; } .an-svc-detail h2 a:hover { color: var(--accent2); } .an-svc-detail__more { font-size: 14px; font-weight: 700; color: var(--accent2); text-decoration: none; } .an-svc-detail__more:hover { text-decoration: underline; } /* Liste de liens de maillage interne */ .an-linklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .an-linklist__item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--cardbd); background: var(--panel2); text-decoration: none; transition: transform .2s, border-color .2s; } .an-linklist__item:hover { transform: translateY(-2px); border-color: var(--accent); } .an-linklist__icon { font-size: 24px; flex: 0 0 auto; } .an-linklist__name { display: block; font-weight: 700; font-size: 16px; color: var(--ink); } .an-linklist__sub { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; } .an-linklist__arrow { margin-left: auto; color: var(--accent2); font-weight: 700; } /* ---------- Témoignages ---------- */ .an-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .an-testi { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 20px; padding: 24px; } .an-stars { color: var(--star); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; } .an-testi p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--ink); } .an-testi__author { font-size: 14px; font-weight: 700; color: var(--ink); } .an-testi__role { font-size: 13px; color: var(--dim); } /* ---------- Process ---------- */ .an-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .an-step { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 18px; padding: 22px; } .an-step__n { display: inline-flex; font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 18px; color: #fff; min-width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); align-items: center; justify-content: center; margin-bottom: 14px; } .an-step__t { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 5px; } .an-step__d { font-size: 14px; line-height: 1.45; color: var(--dim); } /* ---------- FAQ ---------- */ .an-faq { display: flex; flex-direction: column; gap: 12px; } .an-faq__item { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 16px; padding: 20px 24px; } .an-faq__item h3 { margin: 0 0 7px; font-weight: 700; font-size: 18px; color: var(--ink); } .an-faq__item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dim); } .an-faq__q { width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; align-items: center; } .an-faq__q[aria-expanded="false"] + .an-faq__a { display: none; } .an-faq__chevron { transition: transform .2s; color: var(--accent); font-size: 14px; } .an-faq__q[aria-expanded="true"] .an-faq__chevron { transform: rotate(180deg); } /* ---------- CTA band ---------- */ .an-cta { position: relative; overflow: hidden; border-radius: 26px; padding: 56px 44px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; text-align: center; } .an-cta__ring { position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 50%; animation: an-spinSlow 20s linear infinite; } .an-cta__inner { position: relative; z-index: 1; } .an-cta h2 { margin: 0 0 12px; font-weight: 800; font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; } .an-cta p { margin: 0 0 26px; font-size: 17px; opacity: .95; } .an-cta .an-btn-white { text-decoration: none; font-weight: 700; font-size: 16px; color: var(--accent); background: #fff; padding: 15px 30px; border-radius: 14px; display: inline-block; transition: transform .2s; } .an-cta .an-btn-white:hover { transform: translateY(-2px); } /* ---------- Contact ---------- */ .an-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; margin-bottom: 64px; align-items: start; } .an-contact-list { display: flex; flex-direction: column; gap: 14px; } .an-contact-card { display: flex; align-items: center; gap: 15px; text-decoration: none; background: var(--panel2); border: 1px solid var(--cardbd); padding: 18px 20px; border-radius: 18px; transition: border-color .2s, transform .2s; } .an-contact-card:hover { border-color: var(--accent); transform: translateY(-2px); } .an-contact-card__icon { font-size: 16px; min-width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .an-contact-card__label { display: block; font-size: 16px; font-weight: 700; color: var(--ink); } .an-contact-card__val { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; } .an-contact-card__arrow { margin-left: auto; color: var(--dim); font-size: 18px; } .an-guarantees { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; } .an-guarantees div { display: flex; gap: 11px; align-items: flex-start; } .an-guarantees span:first-child { color: var(--accent2); font-weight: 800; } .an-guarantees span:last-child { font-size: 14px; line-height: 1.45; color: var(--ink); } .an-form-wrap { background: var(--panel2); border: 1px solid var(--cardbd); border-radius: 24px; padding: 34px; } .an-form { display: flex; flex-direction: column; gap: 16px; } .an-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .an-field { display: flex; flex-direction: column; gap: 7px; } .an-field > span { font-size: 13px; font-weight: 600; color: var(--ink); } .an-form input, .an-form textarea, .an-form select { font-family: inherit; font-size: 15px; padding: 13px 15px; background: var(--panel); border: 1px solid var(--cardbd); border-radius: 12px; color: var(--ink); width: 100%; } /* Le