/* ============================================================ Florian Thoraval — Studio digital & tech Charte officielle 2025 : - Couleurs principales : rouge #ED2A1D / gris #2A3037 - Couleur secondaire : jaune #FFC233 - Couleur additionnelle: vert mint #6FFBAB Typographies : - Titres : Montserrat 900 (extra-black, uppercase, letter-spacing serré) - Texte : Montserrat 400-700 Mobile-first (cible Samsung Chrome Android) ============================================================ */ /* Typographie : Montserrat partout (titres en 900, texte en 400-700) */ :root { /* Couleurs absolues (charte 2025, ne changent pas en dark) */ --c-red: #ED2A1D; --c-red-dark: #C71F14; --c-yellow: #FFC233; --c-yellow-dark:#E5A91A; /* Vert mint #6FFBAB / #3BE085 dispo dans la charte 2025 mais pas utilisé sur le site (préférence : jaune comme accent secondaire) */ /* Gris constants (servent de fond sombre dans les deux modes) */ --c-grey: #2A3037; --c-grey-2: #3A4047; --c-grey-3: #6B7280; /* Couleurs sémantiques (overridées en dark) */ --c-bg: #FAFAF8; --c-bg-alt: #FFFFFF; --c-bg-deep: #2A3037; /* fond Réalisations / Footer */ --c-border: #E5E7EB; --c-text: #1F2328; --c-text-soft: #4B5563; --c-heading: #2A3037; /* couleur des titres */ /* Filtre logo (passe en blanc en dark via invert) */ --logo-filter: none; --font-display: 'Montserrat', system-ui, -apple-system, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif; --radius-sm: 8px; --radius: 14px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow: 0 6px 24px rgba(42,48,55,.08); --shadow-lg: 0 20px 50px rgba(42,48,55,.15); --container: 1180px; --gutter: 20px; --t: cubic-bezier(.4,.0,.2,1); } /* ============================================================ DARK MODE Activé par (toggle bouton + persist localStorage) On garde les --c-grey* constants : ils servent de fonds sombres. On override seulement les couleurs UI sémantiques. ============================================================ */ :root[data-theme="dark"] { --c-bg: #14181E; --c-bg-alt: #1E242E; --c-bg-deep: #0B0E13; --c-border: #2D343F; --c-text: #E8EAEE; --c-text-soft: #B4BAC3; --c-heading: #F5F5F3; --logo-filter: invert(1); } /* Transitions douces light↔dark */ body, .nav, .service-card, .real-card, .contact-card, .about__photo, .footer, .hero__eyebrow, .hero__pills li, .contact__form input, .contact__form textarea { transition: background-color .35s var(--t), color .35s var(--t), border-color .35s var(--t), box-shadow .35s var(--t); } /* ----------------------- Reset léger ----------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } ul { list-style: none; padding: 0; margin: 0; } h1, h2, h3, h4, .hero__title, .section__title, .service-card h3, .real-card h3 { font-family: var(--font-display); font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; color: var(--c-heading); margin: 0 0 .4em; text-transform: uppercase; } p { margin: 0 0 1em; } /* ----------------------- Layout helpers ----------------------- */ .section { padding: 80px var(--gutter); max-width: var(--container); margin: 0 auto; } .section__head { max-width: 720px; margin: 0 0 56px; } .section__head--center { margin-left: auto; margin-right: auto; text-align: center; } .section__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--c-red); margin: 0 0 12px; } .section__title { font-size: clamp(28px, 5vw, 44px); margin: 0 0 16px; } .section__lead { font-size: 17px; color: var(--c-text-soft); max-width: 60ch; } /* ----------------------- Buttons ----------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .01em; transition: transform .18s var(--t), background .18s var(--t), box-shadow .18s var(--t), color .18s var(--t); white-space: nowrap; border: 2px solid transparent; cursor: pointer; } .btn--primary { background: var(--c-red); color: #fff; box-shadow: 0 6px 20px rgba(237,42,29,.3); } .btn--primary:hover { background: var(--c-red-dark); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(237,42,29,.4); } .btn--ghost { background: transparent; color: var(--c-heading); border-color: var(--c-heading); } .btn--ghost:hover { background: var(--c-heading); color: var(--c-bg); transform: translateY(-2px); } .btn--block { width: 100%; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s var(--t), background .2s var(--t); } .nav.is-scrolled { border-bottom-color: var(--c-border); } .nav__inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--c-heading); } .nav__brand-mark { width: 38px; height: 38px; object-fit: contain; display: block; filter: var(--logo-filter); transition: transform .25s var(--t), filter .35s var(--t); } .nav__brand:hover .nav__brand-mark { transform: rotate(-6deg) scale(1.05); } .nav__brand-text { font-size: 15px; } .nav__menu { display: none; gap: 28px; align-items: center; } .nav__menu a { font-weight: 600; font-size: 14px; color: var(--c-heading); transition: color .15s var(--t); } .nav__menu a:hover { color: var(--c-red); } .nav__menu a.nav__cta { background: var(--c-red); color: #fff; padding: 10px 20px; border-radius: 999px; transition: background .15s var(--t); } .nav__menu a.nav__cta:hover { background: var(--c-red-dark); color: #fff; } /* ----- Bouton toggle thème (soleil/lune) ----- */ .nav__theme { position: relative; width: 38px; height: 38px; border-radius: 50%; color: var(--c-heading); margin-left: auto; margin-right: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s var(--t), color .2s var(--t), transform .2s var(--t); } .nav__theme:hover { background: var(--c-bg-alt); color: var(--c-red); transform: scale(1.08); } .theme-icon { position: absolute; width: 20px; height: 20px; inset: 9px; transition: opacity .35s var(--t), transform .4s var(--t); } /* Light mode : on voit la lune (clic = passer en dark) */ .theme-icon--sun { opacity: 0; transform: rotate(-90deg) scale(.5); } .theme-icon--moon { opacity: 1; transform: rotate(0) scale(1); } /* Dark mode : on voit le soleil (clic = passer en light) */ :root[data-theme="dark"] .theme-icon--sun { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="dark"] .theme-icon--moon { opacity: 0; transform: rotate(90deg) scale(.5); } @media (min-width: 880px) { .nav__theme { margin-left: 0; } } .nav__toggle { display: flex; flex-direction: column; gap: 5px; width: 36px; height: 36px; align-items: center; justify-content: center; } .nav__toggle span { display: block; width: 22px; height: 2px; background: var(--c-heading); border-radius: 2px; transition: transform .25s var(--t), opacity .25s var(--t); } .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.is-open span:nth-child(2) { opacity: 0; } .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile menu open */ .nav__menu.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-bg-alt); padding: 24px var(--gutter) 28px; border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow); align-items: stretch; gap: 4px; } .nav__menu.is-open a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--c-border); } .nav__menu.is-open a.nav__cta { margin-top: 14px; text-align: center; border: 0; padding: 14px 20px; } @media (min-width: 880px) { .nav__toggle { display: none; } .nav__menu { display: flex; } .nav__menu.is-open { position: static; flex-direction: row; padding: 0; box-shadow: none; border: 0; } .nav__menu.is-open a { padding: 0; border: 0; font-size: 14px; } .nav__menu.is-open a.nav__cta { padding: 10px 20px; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: calc(100dvh - 64px); display: flex; align-items: center; padding: 60px var(--gutter) 80px; overflow: hidden; perspective: 1400px; perspective-origin: 75% 50%; } .hero__bg { position: absolute; inset: 0; background: var(--c-bg); z-index: 0; } /* ----- Aurora : blobs colorés flous + halo conique en rotation ----- */ .hero__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; filter: blur(70px); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } /* Halo conique rotatif : effet "aurore qui balaye" en fond */ .hero__aurora::before { content: ''; position: absolute; top: 50%; left: 50%; width: 130%; height: 130%; transform: translate(-50%, -50%); background: conic-gradient( from 0deg, transparent 0deg, rgba(237, 42, 29, .35) 50deg, transparent 130deg, rgba(255, 194, 51, .30) 210deg, transparent 290deg, rgba(237, 42, 29, .22) 340deg, transparent 360deg ); border-radius: 50%; animation: hero-aurora-spin 26s linear infinite; will-change: transform; } @keyframes hero-aurora-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .hero__aurora__blob { position: absolute; border-radius: 50%; will-change: transform, opacity; } .hero__aurora__blob--red { width: 56vw; height: 56vw; max-width: 720px; max-height: 720px; background: radial-gradient(circle, rgba(237, 42, 29, .65), transparent 70%); top: -18%; left: -12%; animation: hero-aurora-1 22s ease-in-out infinite alternate, hero-aurora-pulse 9s ease-in-out infinite; } .hero__aurora__blob--yellow { width: 60vw; height: 60vw; max-width: 780px; max-height: 780px; background: radial-gradient(circle, rgba(255, 194, 51, .60), transparent 70%); top: 25%; right: -18%; animation: hero-aurora-2 28s ease-in-out infinite alternate, hero-aurora-pulse 11s ease-in-out infinite -3s; } .hero__aurora__blob--warm { width: 44vw; height: 44vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle, rgba(255, 130, 80, .50), transparent 70%); bottom: -22%; left: 28%; animation: hero-aurora-3 34s ease-in-out infinite alternate, hero-aurora-pulse 13s ease-in-out infinite -6s; } @keyframes hero-aurora-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(220px, 160px) scale(1.30); } 100% { transform: translate(320px, 40px) scale(1.10); } } @keyframes hero-aurora-2 { 0% { transform: translate(0, 0) scale(1.10); } 50% { transform: translate(-220px, -100px) scale(.85); } 100% { transform: translate(-120px, 180px) scale(1.25); } } @keyframes hero-aurora-3 { 0% { transform: translate(0, 0) scale(.90); } 50% { transform: translate(160px, -240px) scale(1.35); } 100% { transform: translate(-180px, -140px) scale(1.15); } } @keyframes hero-aurora-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Mode sombre */ [data-theme="dark"] .hero__aurora { filter: blur(85px); } [data-theme="dark"] .hero__aurora::before { background: conic-gradient( from 0deg, transparent 0deg, rgba(237, 42, 29, .45) 50deg, transparent 130deg, rgba(255, 194, 51, .35) 210deg, transparent 290deg, rgba(237, 42, 29, .28) 340deg, transparent 360deg ); } [data-theme="dark"] .hero__aurora__blob--red { background: radial-gradient(circle, rgba(237, 42, 29, .55), transparent 70%); } [data-theme="dark"] .hero__aurora__blob--yellow { background: radial-gradient(circle, rgba(255, 194, 51, .40), transparent 70%); } [data-theme="dark"] .hero__aurora__blob--warm { background: radial-gradient(circle, rgba(255, 110, 70, .40), transparent 70%); } /* Mobile : on garde l'effet, on coupe le halo conique pour soulager le GPU */ @media (max-width: 720px) { .hero__aurora { filter: blur(55px); } .hero__aurora::before { display: none; } .hero__aurora__blob--red { width: 80vw; height: 80vw; } .hero__aurora__blob--yellow { width: 85vw; height: 85vw; } .hero__aurora__blob--warm { width: 70vw; height: 70vw; } } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .hero__aurora__blob { animation: none; } .hero__aurora::before { animation: none; } } .hero__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; width: 100%; } .hero__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--c-text-soft); margin: 0 0 24px; padding: 8px 16px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 999px; } .hero__title { font-size: clamp(40px, 9vw, 88px); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 24px; color: var(--c-heading); } .hero__accent { color: var(--c-red); position: relative; display: inline-block; } .hero__accent--yellow { color: var(--c-yellow-dark); } /* Effet typewriter sous le titre */ .hero__typed-wrap { font-family: var(--font-display); font-size: clamp(20px, 3vw, 32px); font-weight: 800; color: var(--c-heading); margin: 0 0 18px; line-height: 1.3; letter-spacing: -.01em; text-transform: uppercase; min-height: 1.4em; } .hero__typed { display: inline-block; color: var(--c-red); min-width: 0.5em; position: relative; white-space: nowrap; } .hero__typed::after { content: '|'; display: inline-block; margin-left: 4px; color: var(--c-yellow); font-weight: 400; animation: hero-cursor-blink 1s step-end infinite; } @keyframes hero-cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .hero__lead { font-size: clamp(15px, 2vw, 18px); color: var(--c-text-soft); max-width: 560px; margin: 0 0 36px; line-height: 1.55; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 48px; } .hero__pills { display: flex; flex-wrap: wrap; gap: 10px; } .hero__pills li { font-size: 14px; font-weight: 600; padding: 10px 18px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-heading); box-shadow: var(--shadow-sm); } /* ============================================================ SERVICES ============================================================ */ .services { background: var(--c-bg); } .services__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 720px) { .services__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .services__grid { grid-template-columns: repeat(4, 1fr); } } .service-card { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 28px 24px; transition: transform .25s var(--t), box-shadow .25s var(--t), border-color .25s var(--t); display: flex; flex-direction: column; color: var(--c-text); text-decoration: none; position: relative; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .service-card__more { display: inline-block; margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--c-red); text-transform: uppercase; transition: transform .2s var(--t); } .service-card:hover .service-card__more { transform: translateX(4px); } .service-card__icon { font-size: 32px; margin-bottom: 16px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg); border-radius: 12px; } .service-card h3 { font-size: 20px; margin: 0 0 10px; } .service-card p { font-size: 14.5px; color: var(--c-text-soft); margin: 0 0 16px; } .service-card ul li { font-size: 13.5px; color: var(--c-text-soft); padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--c-border); } .service-card ul li:first-child { border-top: 0; } .service-card ul li::before { content: "→"; position: absolute; left: 0; color: var(--c-red); font-weight: 800; } .service-card--accent { border-top: 4px solid var(--c-red); } .service-card--tech { border-top: 4px solid var(--c-yellow); } .service-card--accent ul li::before { color: var(--c-red); } .service-card--tech ul li::before { color: var(--c-yellow-dark); } /* ============================================================ PITCH "Un seul interlocuteur" ============================================================ */ .pitch { background: var(--c-bg-alt); padding: 90px var(--gutter); max-width: none; } .pitch__inner { max-width: var(--container); margin: 0 auto; } .pitch .section__title { text-align: center; margin: 8px 0 24px; font-size: clamp(28px, 5vw, 48px); } .pitch__highlight { color: var(--c-red); position: relative; white-space: nowrap; } .pitch__highlight::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: rgba(255, 194, 51, .35); z-index: -1; } .pitch .section__eyebrow { display: block; text-align: center; } .pitch__lead { font-size: clamp(16px, 2vw, 19px); color: var(--c-text-soft); text-align: center; max-width: 780px; margin: 0 auto 18px; line-height: 1.6; } .pitch__lead strong { color: var(--c-heading); } .pitch__lead--accent { color: var(--c-heading); font-weight: 600; margin-bottom: 48px; } .pitch__lead--accent strong { color: var(--c-red); } /* Comparaison 2 colonnes */ .pitch__compare { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0 0 56px; max-width: 960px; margin-left: auto; margin-right: auto; } @media (min-width: 720px) { .pitch__compare { grid-template-columns: 1fr 1fr; gap: 24px; } } .pitch__col { padding: 28px 26px; border-radius: var(--radius-lg); border: 1px solid var(--c-border); background: var(--c-bg); } .pitch__col--bad { opacity: .82; } .pitch__col--good { background: linear-gradient(135deg, rgba(237,42,29,.05), rgba(255,194,51,.05)); border-color: var(--c-red); box-shadow: 0 14px 40px rgba(237,42,29,.10); } .pitch__col-label { font-size: 14px; font-weight: 800; letter-spacing: .04em; margin: 0 0 18px; text-transform: uppercase; } .pitch__col--bad .pitch__col-label { color: var(--c-text-soft); } .pitch__col--good .pitch__col-label { color: var(--c-red); } .pitch__col ul { list-style: none; padding: 0; margin: 0 0 20px; } .pitch__col li { padding: 10px 0; font-size: 14.5px; color: var(--c-text-soft); border-top: 1px solid var(--c-border); line-height: 1.5; } .pitch__col li:first-child { border-top: 0; } .pitch__col--good li { color: var(--c-heading); font-weight: 500; } .pitch__col-foot { margin: 0; padding-top: 16px; border-top: 1px dashed var(--c-border); font-size: 13px; color: var(--c-text-soft); font-style: italic; line-height: 1.5; } /* Stats 3 colonnes */ .pitch__stats { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 40px; max-width: 960px; margin-left: auto; margin-right: auto; } @media (min-width: 720px) { .pitch__stats { grid-template-columns: repeat(3, 1fr); } } .pitch__stat { text-align: center; padding: 26px 18px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); } .pitch__stat-num { display: block; font-family: var(--font-display); font-size: clamp(36px, 5vw, 52px); font-weight: 900; line-height: 1; color: var(--c-red); letter-spacing: -.03em; margin: 0 0 8px; } .pitch__stat-label { display: block; font-size: 14px; color: var(--c-text-soft); line-height: 1.5; } .pitch__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } /* ============================================================ RÉALISATIONS ============================================================ */ .realisations { background: var(--c-bg-deep); color: #fff; max-width: none; padding-left: 0; padding-right: 0; } .realisations .section__head, .realisations .realisations__grid { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } .realisations .section__title { color: #fff; } .realisations .section__lead { color: rgba(255,255,255,.75); } .realisations .section__eyebrow { color: var(--c-yellow); } .realisations__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 720px) { .realisations__grid { grid-template-columns: repeat(2, 1fr); } } .real-card { display: block; background: var(--c-grey-2); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.08); transition: transform .3s var(--t), box-shadow .3s var(--t); color: #fff; } .real-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.4); } .real-card__media { aspect-ratio: 16 / 9; background-color: var(--c-grey); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background .35s var(--t); } /* Icône centrale : taille augmentée + halo lumineux pour la rendre bien visible */ .real-card__icon { width: 96px; height: 96px; color: #fff; filter: drop-shadow(0 0 28px rgba(255,255,255,.18)) drop-shadow(0 6px 24px rgba(0,0,0,.55)); transition: transform .35s var(--t), filter .35s var(--t); z-index: 2; } .real-card:hover .real-card__icon { transform: scale(1.12); filter: drop-shadow(0 0 40px rgba(255,255,255,.32)) drop-shadow(0 8px 28px rgba(0,0,0,.6)); } /* Variantes par catégorie : gradient subtil avec couleur d'accent charte */ .real-card__media--video { background: radial-gradient(circle at 28% 50%, rgba(237,42,29,.30), transparent 55%), radial-gradient(circle at 78% 60%, rgba(237,42,29,.12), transparent 50%), var(--c-grey); } .real-card__media--photo { background: radial-gradient(circle at 70% 35%, rgba(255,194,51,.25), transparent 55%), radial-gradient(circle at 20% 70%, rgba(255,194,51,.10), transparent 50%), var(--c-grey); } .real-card__media--motion { background: radial-gradient(circle at 30% 30%, rgba(237,42,29,.22), transparent 60%), radial-gradient(circle at 75% 75%, rgba(255,194,51,.18), transparent 60%), var(--c-grey); } .real-card__media--design { background: radial-gradient(circle at 50% 50%, rgba(255,194,51,.20), transparent 60%), linear-gradient(135deg, var(--c-grey) 0%, #1F242C 100%); } .real-card__media--web { background: radial-gradient(circle at 75% 30%, rgba(237,42,29,.22), transparent 55%), radial-gradient(circle at 25% 70%, rgba(255,194,51,.16), transparent 55%), var(--c-grey); } .real-card:hover .real-card__media--video { background: radial-gradient(circle at 50% 50%, rgba(237,42,29,.35), transparent 65%), var(--c-grey); } .real-card:hover .real-card__media--photo { background: radial-gradient(circle at 50% 50%, rgba(255,194,51,.30), transparent 65%), var(--c-grey); } .real-card:hover .real-card__media--motion { background: radial-gradient(circle at 50% 50%, rgba(237,42,29,.28), transparent 60%), radial-gradient(circle at 50% 50%, rgba(255,194,51,.22), transparent 70%), var(--c-grey); } .real-card:hover .real-card__media--design { background: radial-gradient(circle at 50% 50%, rgba(255,194,51,.28), transparent 65%), var(--c-grey); } .real-card:hover .real-card__media--web { background: radial-gradient(circle at 50% 50%, rgba(237,42,29,.28), transparent 60%), radial-gradient(circle at 50% 50%, rgba(255,194,51,.18), transparent 70%), var(--c-grey); } /* Featured Agent Launcher : gradient signature (inchangé) */ .real-card__media--gradient { background: linear-gradient(135deg, var(--c-grey) 0%, #1A1F26 50%, var(--c-yellow-dark) 100%); } .real-card__media--gradient::after { content: ""; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(48px, 8vw, 96px); font-weight: 900; color: rgba(255, 194, 51, 0.22); letter-spacing: 0; } .real-card__body { padding: 22px 24px 26px; } .real-card__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.1); color: #fff; padding: 5px 11px; border-radius: 999px; margin-bottom: 12px; } .real-card__tag--accent { background: var(--c-yellow); color: var(--c-grey); } .real-card h3 { color: #fff; font-size: 19px; margin: 0 0 6px; } .real-card p { color: rgba(255,255,255,.7); font-size: 14.5px; margin: 0; } .real-card--featured { grid-column: 1 / -1; } .real-card--featured .real-card__media { aspect-ratio: 21 / 9; } /* ----- Sous-section : projets phares ----- */ .projects__head { max-width: var(--container); margin: 80px auto 32px; padding: 0 var(--gutter); } .projects__title { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 32px); text-transform: uppercase; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; } .projects__lead { color: rgba(255,255,255,.7); font-size: 15px; margin: 0; } .projects__grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 0; } @media (min-width: 600px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .projects__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .projects__grid { grid-template-columns: repeat(4, 1fr); } } .project-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-grey-2); border: 1px solid rgba(255,255,255,.06); aspect-ratio: 16 / 9; cursor: pointer; transition: transform .3s var(--t), box-shadow .3s var(--t); } .project-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.45); } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--t), filter .3s var(--t); } .project-card:hover img { transform: scale(1.06); filter: brightness(1.05); } .project-card__body { position: absolute; inset: auto 0 0 0; padding: 16px 18px 14px; background: linear-gradient(to top, rgba(11,14,19,.92) 0%, rgba(11,14,19,.7) 50%, transparent 100%); } .project-card__tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-yellow); margin: 0 0 4px; } .project-card h4 { font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: 16px; margin: 0; letter-spacing: -0.005em; } /* ============================================================ À PROPOS ============================================================ */ .about { background: var(--c-bg); } .about__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 880px) { .about__grid { grid-template-columns: 5fr 7fr; gap: 60px; } } .about__media { position: relative; } .about__photo { aspect-ratio: 4 / 5; background: linear-gradient(135deg, var(--c-red) 0%, var(--c-grey) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); text-align: center; font-weight: 700; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .about__photo::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle, rgba(255,194,51,.25), transparent 60%); pointer-events: none; } /* Quand une vraie image est présente, on l'affiche par-dessus le gradient */ /* Quand une vraie image est présente : on l'affiche pleine, sans surcouche */ .about__photo--has-image { background: var(--c-grey); /* fond neutre derrière l'image */ aspect-ratio: 1 / 1; /* carré pour respecter le format Photo Moi (1000x1000) */ } .about__photo--has-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; /* cadrage sur le haut → visage centré */ z-index: 1; transition: transform .6s var(--t); } .about__photo--has-image:hover img { transform: scale(1.04); } /* On supprime entièrement le glow jaune décoratif quand il y a une image */ .about__photo--has-image::after { display: none; } /* Liseré subtil rouge en bas-droite pour signature charte */ .about__photo--has-image::before { content: ""; position: absolute; bottom: 14px; right: 14px; width: 32px; height: 32px; border-right: 3px solid var(--c-red); border-bottom: 3px solid var(--c-red); z-index: 2; opacity: .85; pointer-events: none; } .about__content p { color: var(--c-text-soft); font-size: 16px; } .about__content strong { color: var(--c-heading); } .timeline { margin: 28px 0 0; border-left: 2px solid var(--c-border); padding-left: 24px; } .timeline li { position: relative; padding: 10px 0; font-size: 15px; color: var(--c-text-soft); } .timeline li::before { content: ""; position: absolute; left: -31px; top: 18px; width: 10px; height: 10px; background: var(--c-red); border-radius: 50%; box-shadow: 0 0 0 4px var(--c-bg); } .timeline strong { color: var(--c-heading); margin-right: 8px; } /* ============================================================ CONTACT ============================================================ */ .contact { background: var(--c-bg-alt); } .contact__grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 auto 40px; max-width: 720px; /* aligné avec la largeur du formulaire (640px) + un peu de marge */ width: 100%; } @media (min-width: 600px) { .contact__grid { grid-template-columns: repeat(3, 1fr); } } .contact-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .2s var(--t), border-color .2s var(--t), box-shadow .2s var(--t); } .contact-card:hover { transform: translateY(-3px); border-color: var(--c-red); box-shadow: var(--shadow); } .contact-card__icon { font-size: 24px; margin-bottom: 4px; } .contact-card__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft); } .contact-card__value { font-size: 15px; font-weight: 600; color: var(--c-heading); word-break: break-word; } .contact__form { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; width: 100%; } .contact__form-row { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 600px) { .contact__form-row { grid-template-columns: 1fr 1fr; } } .contact__form label { display: flex; flex-direction: column; gap: 6px; } .contact__form span { font-size: 13px; font-weight: 600; color: var(--c-heading); } .contact__form input, .contact__form textarea { font: inherit; font-size: 15px; padding: 13px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text); transition: border-color .15s var(--t), box-shadow .15s var(--t); width: 100%; } .contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 4px rgba(237,42,29,.12); } .contact__form textarea { resize: vertical; min-height: 120px; } /* ----- Honeypot anti-spam (invisible pour les humains, visible pour les bots) ----- */ .contact__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ----- Message de statut après envoi ----- */ .form-status { display: none; margin: 0; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; } .form-status--ok { display: block; background: rgba(255, 194, 51, 0.15); border-color: var(--c-yellow); color: var(--c-heading); } .form-status--error { display: block; background: rgba(237, 42, 29, 0.10); border-color: var(--c-red); color: var(--c-red); } :root[data-theme="dark"] .form-status--ok { background: rgba(255, 194, 51, 0.12); color: var(--c-yellow); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--c-bg-deep); color: rgba(255,255,255,.8); padding: 50px var(--gutter) 30px; } .footer__inner { max-width: var(--container); margin: 0 auto; display: grid; gap: 28px; } @media (min-width: 720px) { .footer__inner { grid-template-columns: 1fr auto; align-items: center; } } .footer__brand { display: flex; align-items: center; gap: 14px; } .footer__brand strong { color: #fff; font-size: 16px; display: block; } .footer__brand p { font-size: 13px; color: rgba(255,255,255,.6); margin: 4px 0 0; } .footer__brand-mark { width: 52px; height: 52px; object-fit: contain; display: block; } .footer__nav { display: flex; flex-wrap: wrap; gap: 18px; } .footer__nav a { font-size: 14px; color: rgba(255,255,255,.7); transition: color .15s var(--t); } .footer__nav a:hover { color: var(--c-yellow); } .footer__copy { grid-column: 1 / -1; font-size: 12px; color: rgba(255,255,255,.5); margin: 20px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; } /* ============================================================ PAGES CATÉGORIE (video.html, photo.html, motion.html, design.html) ============================================================ */ .page-cat { max-width: var(--container); margin: 0 auto; padding: 60px var(--gutter) 80px; } .page-cat__head { max-width: 720px; margin: 0 0 48px; } .page-cat__head .section__title { margin-top: 8px; font-size: clamp(34px, 6vw, 54px); } .page-cat__head .section__lead { font-size: 17px; } .page-cat__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 8px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; } .page-cat__nav-item { padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; transition: background-color .2s var(--t), color .2s var(--t); } .page-cat__nav-item:hover { color: var(--c-heading); background: var(--c-bg); } .page-cat__nav-item.is-active { background: var(--c-red); color: #fff; } .page-cat__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 600px) { .page-cat__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .page-cat__grid { grid-template-columns: repeat(3, 1fr); } } .page-cat__grid--design { gap: 16px; } @media (min-width: 600px) { .page-cat__grid--design { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .page-cat__grid--design { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .page-cat__grid--design { grid-template-columns: repeat(5, 1fr); } } /* ----- Card catégorie (commune video / motion / photo / design) ----- */ .cat-card { display: block; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; color: var(--c-heading); transition: transform .25s var(--t), box-shadow .25s var(--t), border-color .25s var(--t); } .cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); border-color: transparent; } .cat-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg); } .page-cat__grid--design .cat-card__media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 18px; background: #fff; } :root[data-theme="dark"] .page-cat__grid--design .cat-card__media { background: #f3f3f0; } .cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--t); } .page-cat__grid--design .cat-card__media img { object-fit: contain; width: auto; height: 100%; max-width: 100%; } .cat-card:hover .cat-card__media img { transform: scale(1.06); } .cat-card__count { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.7); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; } .cat-card__body { padding: 18px 20px 20px; } .cat-card__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red); margin-bottom: 8px; } .cat-card__body h3 { font-size: 18px; margin: 0 0 4px; text-transform: uppercase; } .cat-card__sub { font-size: 13.5px; color: var(--c-text-soft); } /* ============================================================ PAGE PROJET INDIVIDUEL (projet.html) ============================================================ */ .project-detail { padding: 40px var(--gutter) 80px; } .project-detail__inner { max-width: 880px; margin: 0 auto; } .project-detail__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 28px; transition: color .2s var(--t); } .project-detail__back:hover { color: var(--c-red); } .project-detail__head { margin: 0 0 36px; } .project-detail__cat { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); margin: 0 0 14px; padding: 6px 14px; border: 1px solid var(--c-red); border-radius: 999px; } .project-detail__head h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(32px, 6vw, 54px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--c-heading); } .project-detail__subtitle { font-size: 18px; color: var(--c-text-soft); margin: 0; } .project-detail__hero { margin: 0 0 36px; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-alt); border: 1px solid var(--c-border); } .project-detail__hero img { width: 100%; height: auto; display: block; } /* Vidéo YouTube embed responsive 16/9 */ .project-detail__video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 36px; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.25); } .project-detail__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .project-detail__gallery { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 36px; } @media (min-width: 600px) { .project-detail__gallery { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .project-detail__gallery { grid-template-columns: repeat(3, 1fr); } } .project-detail__gallery-item { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-bg-alt); border: 1px solid var(--c-border); transition: transform .25s var(--t), box-shadow .25s var(--t); } .project-detail__gallery-item:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.15); } .project-detail__gallery-item img { width: 100%; height: 100%; object-fit: cover; } .project-detail__desc { font-size: 17px; line-height: 1.7; color: var(--c-text-soft); margin: 0 0 32px; } .project-detail__meta { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 40px; padding: 8px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } @media (min-width: 600px) { .project-detail__meta { grid-template-columns: 1fr 1fr; } } .project-detail__meta > div { padding: 16px 0; border-top: 1px solid var(--c-border); } .project-detail__meta > div:first-child, .project-detail__meta > div:nth-child(2) { border-top: 0; } @media (max-width: 599px) { .project-detail__meta > div:nth-child(2) { border-top: 1px solid var(--c-border); } } .project-detail__meta dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-soft); margin-bottom: 4px; } .project-detail__meta dd { margin: 0; font-size: 15px; color: var(--c-heading); font-weight: 500; } .project-detail__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 8px; } .project-detail__empty { text-align: center; padding: 80px 0; } .project-detail__empty h2 { font-size: 28px; margin: 0 0 12px; } .project-detail__empty p { color: var(--c-text-soft); margin: 0 0 28px; } /* ============================================================ PAGES MULTI-PAGES (services, agent-launcher, a-propos, contact) Composants partagés ============================================================ */ /* ----- Hero générique de page ----- */ .page-hero { max-width: var(--container); margin: 0 auto; padding: 80px var(--gutter) 56px; text-align: center; position: relative; overflow: hidden; } .page-hero > * { position: relative; z-index: 1; } /* Aurora discrète sur pages internes — réutilise les keyframes du hero home */ .page-aurora { position: absolute; inset: -10% 0 -10%; pointer-events: none; filter: blur(80px); opacity: .55; z-index: 0; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 35%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 50% 35%, #000 30%, transparent 100%); } .page-aurora__blob { position: absolute; border-radius: 50%; will-change: transform; } .page-aurora__blob--red { width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, rgba(237, 42, 29, .55), transparent 70%); top: -10%; left: -8%; animation: hero-aurora-1 26s ease-in-out infinite alternate; } .page-aurora__blob--yellow { width: 52vw; height: 52vw; max-width: 660px; max-height: 660px; background: radial-gradient(circle, rgba(255, 194, 51, .50), transparent 70%); top: 10%; right: -10%; animation: hero-aurora-2 32s ease-in-out infinite alternate; } [data-theme="dark"] .page-aurora__blob--red { background: radial-gradient(circle, rgba(237, 42, 29, .45), transparent 70%); } [data-theme="dark"] .page-aurora__blob--yellow { background: radial-gradient(circle, rgba(255, 194, 51, .35), transparent 70%); } @media (prefers-reduced-motion: reduce) { .page-aurora__blob { animation: none; } } .page-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 7vw, 72px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; color: var(--c-heading); margin: 12px 0 20px; } .page-hero__lead { font-size: clamp(16px, 2vw, 19px); color: var(--c-text-soft); max-width: 680px; margin: 0 auto; line-height: 1.6; } /* ----- Section CTA finale (toutes pages) ----- */ .page-cta { max-width: 720px; margin: 0 auto; padding: 80px var(--gutter); text-align: center; } .page-cta h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 12px; } .page-cta p { color: var(--c-text-soft); margin: 0 0 28px; font-size: 17px; } .btn--big { padding: 18px 36px; font-size: 16px; } /* ----- Nav active state ----- */ .nav__menu a.is-active { color: var(--c-red); } .nav__menu a.nav__cta.is-active { background: var(--c-red-dark); } /* ============================================================ PAGE SERVICES (services.html) ============================================================ */ .service-page { padding: 60px var(--gutter); } .service-page--alt { background: var(--c-bg-alt); } .service-page__inner { max-width: var(--container); margin: 0 auto; } .service-page__head { max-width: 720px; margin: 0 0 40px; position: relative; } .service-page__num { display: block; font-family: var(--font-display); font-size: clamp(48px, 8vw, 88px); font-weight: 800; color: var(--c-red); opacity: 0.15; line-height: 1; margin: 0 0 -32px; } .service-page__icon { display: inline-block; font-size: 36px; margin: 0 0 8px; } .service-page__head h2 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); text-transform: uppercase; margin: 0 0 14px; color: var(--c-heading); letter-spacing: -0.02em; } .service-page__lead { font-size: 17px; color: var(--c-text-soft); max-width: 60ch; line-height: 1.6; } .service-page__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 36px; } @media (min-width: 720px) { .service-page__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .service-page__grid { grid-template-columns: repeat(4, 1fr); } } .service-feat { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px 22px 24px; transition: border-color .2s var(--t), transform .2s var(--t); } .service-page--alt .service-feat { background: var(--c-bg-alt); } .service-feat:hover { transform: translateY(-3px); border-color: var(--c-red); } .service-feat h3 { font-size: 16px; margin: 0 0 8px; text-transform: uppercase; } .service-feat p { font-size: 14px; color: var(--c-text-soft); margin: 0; line-height: 1.5; } .service-page__example { margin: 0 0 32px; padding: 20px 22px; background: var(--c-bg); border-left: 3px solid var(--c-yellow); border-radius: var(--radius-sm); } .service-page--alt .service-page__example { background: var(--c-bg-alt); } .service-page__example-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-yellow-dark); margin: 0 0 6px; } .service-page__example-text { margin: 0; font-size: 15px; color: var(--c-text-soft); line-height: 1.5; } .service-page__example-text strong { color: var(--c-heading); } .service-page__cta { display: flex; flex-wrap: wrap; gap: 14px; } /* ----- Sites réalisés (showcase liens externes) ----- */ .sites-realises { margin: 0 0 36px; padding: 28px 0 0; border-top: 1px solid var(--c-border); } .sites-realises--maintenance { padding-top: 36px; margin-top: 8px; } .sites-realises--maintenance .sites-realises__title::before { content: "🛠 "; margin-right: 4px; } .site-card__badge { position: absolute; top: 10px; right: 10px; background: var(--c-yellow); color: var(--c-grey); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; z-index: 2; } .sites-realises__title { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin: 0 0 6px; color: var(--c-heading); } .sites-realises__lead { font-size: 14.5px; color: var(--c-text-soft); margin: 0 0 20px; } .sites-realises__grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 720px) { .sites-realises__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .sites-realises__grid { grid-template-columns: repeat(3, 1fr); } } .site-card { display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; color: var(--c-heading); transition: transform .25s var(--t), box-shadow .25s var(--t), border-color .25s var(--t); } .service-page--alt .site-card { background: var(--c-bg-alt); } .site-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.14); border-color: var(--c-red); } :root[data-theme="dark"] .site-card:hover { box-shadow: 0 18px 44px rgba(0,0,0,.5); } .site-card__screen { position: relative; aspect-ratio: 16 / 10; background: var(--c-grey); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .site-card__url { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.92); color: var(--c-grey); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; z-index: 2; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; } .site-card__preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .site-card__preview--img { background-size: cover; background-position: center; background-repeat: no-repeat; } .site-card__preview--ft { background: radial-gradient(circle at 30% 70%, rgba(237,42,29,.4), transparent 50%), radial-gradient(circle at 70% 30%, rgba(255,194,51,.3), transparent 50%), var(--c-grey); } .site-card__brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--c-red); color: #fff; border-radius: 14px; font-weight: 900; font-size: 24px; letter-spacing: .04em; box-shadow: 0 12px 28px rgba(0,0,0,.3); } .site-card__preview--ph { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 12px, transparent 12px, transparent 24px); } .site-card__preview--ph::before { content: "+"; font-family: var(--font-display); color: rgba(255,255,255,.35); font-size: 64px; font-weight: 800; } .site-card--placeholder { border-style: dashed; opacity: 0.65; } .site-card--placeholder:hover { border-color: var(--c-yellow); opacity: 0.9; } .site-card__body { padding: 18px 20px 20px; } .site-card__body h4 { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; margin: 0 0 6px; color: var(--c-heading); } .site-card__body p { font-size: 13.5px; color: var(--c-text-soft); margin: 0 0 10px; line-height: 1.5; } .site-card__tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red); background: rgba(237,42,29,.08); padding: 4px 10px; border-radius: 999px; } .site-card--placeholder .site-card__tag { color: var(--c-yellow-dark); background: rgba(255,194,51,.15); } /* Featured : Agent Launcher */ .service-page__featured { margin: 36px 0 0; padding: 32px 28px 30px; background: linear-gradient(135deg, var(--c-grey) 0%, #1A1F26 100%); border-radius: var(--radius-lg); color: #fff; position: relative; overflow: hidden; } .service-page__featured::before { content: ""; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(237,42,29,.4), transparent 70%); pointer-events: none; } .service-page__featured-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .15em; background: var(--c-yellow); color: var(--c-grey); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; position: relative; z-index: 1; } .service-page__featured h3 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); text-transform: uppercase; color: #fff; margin: 0 0 12px; position: relative; z-index: 1; } .service-page__featured-lead { font-size: 17px; color: rgba(255,255,255,.85); margin: 0 0 18px; max-width: 60ch; position: relative; z-index: 1; } .service-page__featured-lead strong { color: var(--c-yellow); } .service-page__featured-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr; gap: 6px; position: relative; z-index: 1; } @media (min-width: 720px) { .service-page__featured-list { grid-template-columns: repeat(2, 1fr); } } .service-page__featured-list li { font-size: 14.5px; color: rgba(255,255,255,.85); } .service-page__featured-cta { position: relative; z-index: 1; } /* ============================================================ PAGE AGENT LAUNCHER (agent-launcher.html) ============================================================ */ .al-hero { position: relative; padding: 100px var(--gutter) 80px; text-align: center; overflow: hidden; } .al-hero__bg { position: absolute; inset: 0; z-index: 0; } .al-hero__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; } .al-hero__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--c-red); background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 8px 16px; border-radius: 999px; margin: 0 0 24px; } .al-hero__title { font-family: var(--font-display); font-size: clamp(48px, 10vw, 96px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; margin: 0 0 24px; color: var(--c-heading); } .al-hero__accent { color: var(--c-red); } .al-hero__lead { font-size: clamp(17px, 2.4vw, 21px); color: var(--c-text-soft); max-width: 680px; margin: 0 auto 32px; line-height: 1.55; } .al-hero__lead strong { color: var(--c-heading); } .al-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .al-hero__pills span { background: var(--c-bg-alt); border: 1px solid var(--c-border); padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--c-heading); } /* CTA dans le hero (nouveau) */ .al-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 auto 28px; } /* ---------- Section Problème vs Solution ---------- */ .al-problem { padding: 80px var(--gutter); max-width: var(--container); margin: 0 auto; } .al-problem__inner { text-align: center; } .al-problem__inner > h2 { font-size: clamp(28px, 4.5vw, 42px); margin: 8px 0 40px; } .al-problem__cols { display: grid; grid-template-columns: 1fr; gap: 20px; text-align: left; max-width: 960px; margin: 0 auto; } @media (min-width: 720px) { .al-problem__cols { grid-template-columns: 1fr 1fr; gap: 24px; } } .al-problem__col { padding: 32px 28px; border-radius: var(--radius-lg); border: 1px solid var(--c-border); } .al-problem__col--bad { background: var(--c-bg-alt); opacity: .85; } .al-problem__col--good { background: linear-gradient(135deg, rgba(237,42,29,.08), rgba(255,194,51,.08)); border-color: var(--c-red); box-shadow: 0 14px 40px rgba(237,42,29,.10); } .al-problem__col h3 { font-size: 17px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: -.005em; } .al-problem__col--bad h3 { color: var(--c-text-soft); } .al-problem__col--good h3 { color: var(--c-red); } .al-problem__col ul { list-style: none; padding: 0; margin: 0; } .al-problem__col li { padding: 10px 0; font-size: 14.5px; color: var(--c-text-soft); border-top: 1px solid var(--c-border); line-height: 1.5; } .al-problem__col li:first-child { border-top: 0; } .al-problem__col strong { color: var(--c-heading); font-weight: 700; } /* ---------- Section Bénéfices chiffrés ---------- */ .al-benefits { padding: 80px var(--gutter); background: var(--c-bg-alt); } .al-benefits__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .al-benefits__head h2 { font-size: clamp(28px, 4.5vw, 42px); margin: 8px 0 0; } .al-benefits__grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: var(--container); margin: 0 auto; } @media (min-width: 600px) { .al-benefits__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .al-benefits__grid { grid-template-columns: repeat(4, 1fr); } } .al-benefit { padding: 30px 26px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); text-align: center; transition: transform .25s var(--t), border-color .25s var(--t); } .al-benefit:hover { transform: translateY(-4px); border-color: var(--c-red); } .al-benefit__num { display: block; font-family: var(--font-display); font-size: clamp(40px, 5vw, 54px); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--c-red); margin: 0 0 10px; } .al-benefit h3 { font-size: 14px; text-transform: uppercase; margin: 0 0 8px; letter-spacing: -.005em; } .al-benefit p { font-size: 13.5px; color: var(--c-text-soft); margin: 0; line-height: 1.5; } /* ---------- Section Tarification ---------- */ .al-pricing { padding: 90px var(--gutter); max-width: var(--container); margin: 0 auto; } .al-pricing__head { text-align: center; max-width: 720px; margin: 0 auto 48px; } .al-pricing__head h2 { font-size: clamp(28px, 4.5vw, 42px); margin: 8px 0 12px; } .al-pricing__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 880px) { .al-pricing__grid { grid-template-columns: repeat(3, 1fr); } } .al-plan { display: flex; flex-direction: column; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 36px 28px; position: relative; transition: transform .25s var(--t), box-shadow .25s var(--t); } .al-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.10); } :root[data-theme="dark"] .al-plan:hover { box-shadow: 0 18px 50px rgba(0,0,0,.5); } .al-plan--featured { background: linear-gradient(180deg, var(--c-bg-alt), var(--c-bg)); border-color: var(--c-red); box-shadow: 0 18px 50px rgba(237,42,29,.15); transform: scale(1.02); } @media (max-width: 879px) { .al-plan--featured { transform: none; } } .al-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--c-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 20px rgba(237,42,29,.3); } .al-plan__head { margin: 0 0 20px; } .al-plan__name { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: var(--c-heading); margin: 0 0 12px; } .al-plan__price { font-size: 16px; color: var(--c-text-soft); margin: 0 0 4px; } .al-plan__price strong { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--c-heading); letter-spacing: -.02em; } .al-plan__sub { font-size: 13px; color: var(--c-text-soft); margin: 0; } .al-plan__pitch { font-size: 14.5px; color: var(--c-text-soft); margin: 0 0 24px; line-height: 1.5; border-top: 1px solid var(--c-border); padding-top: 18px; } .al-plan__features { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; } .al-plan__features li { padding: 8px 0 8px 26px; font-size: 14px; color: var(--c-text-soft); position: relative; border-top: 1px dashed var(--c-border); line-height: 1.5; } .al-plan__features li:first-child { border-top: 0; } .al-plan__features li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--c-red); font-weight: 800; } .al-plan__features strong { color: var(--c-heading); } .al-pricing__note { margin: 36px auto 0; max-width: 720px; font-size: 13.5px; color: var(--c-text-soft); text-align: center; line-height: 1.6; padding: 16px 20px; background: var(--c-bg-alt); border-radius: var(--radius); border: 1px dashed var(--c-border); } /* ---------- Section "S'adapte à vous" (remplace la grille tarifaire) ---------- */ .al-adapt { padding: 90px var(--gutter); max-width: var(--container); margin: 0 auto; } .al-adapt__head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .al-adapt__head h2 { font-size: clamp(28px, 4.5vw, 44px); margin: 8px 0 16px; } .al-adapt__head .section__lead strong { color: var(--c-heading); } .al-adapt__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0 0 56px; } @media (min-width: 880px) { .al-adapt__grid { grid-template-columns: repeat(3, 1fr); } } .al-adapt__col { padding: 32px 28px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: transform .25s var(--t), border-color .25s var(--t); } .al-adapt__col:hover { transform: translateY(-4px); border-color: var(--c-red); } .al-adapt__col--featured { background: linear-gradient(135deg, rgba(237,42,29,.06), rgba(255,194,51,.06)); border-color: var(--c-red); box-shadow: 0 14px 40px rgba(237,42,29,.10); } .al-adapt__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; background: var(--c-bg); border-radius: 14px; margin: 0 0 18px; } .al-adapt__col h3 { font-size: 20px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: -.005em; } .al-adapt__col p { font-size: 14.5px; color: var(--c-text-soft); margin: 0; line-height: 1.6; } .al-adapt__bottom { background: var(--c-bg-alt); border-radius: var(--radius-lg); padding: 36px 32px; border: 1px dashed var(--c-border); } .al-adapt__bottom-title { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-heading); margin: 0 0 18px; } .al-adapt__factors { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 720px) { .al-adapt__factors { grid-template-columns: 1fr 1fr; gap: 10px 20px; } } .al-adapt__factors li { font-size: 14.5px; color: var(--c-text-soft); line-height: 1.55; } .al-adapt__cta { text-align: center; padding-top: 24px; border-top: 1px solid var(--c-border); } .al-adapt__cta-note { font-size: 13px; color: var(--c-text-soft); margin: 14px 0 0; } /* ---------- Section FAQ ---------- */ .al-faq { padding: 90px var(--gutter); background: var(--c-bg-alt); } .al-faq__head { text-align: center; max-width: 720px; margin: 0 auto 40px; } .al-faq__head h2 { font-size: clamp(28px, 4.5vw, 42px); margin: 8px 0 0; } .al-faq__list { max-width: 800px; margin: 0 auto; } .al-faq__item { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: border-color .2s var(--t), box-shadow .2s var(--t); } .al-faq__item[open] { border-color: var(--c-red); box-shadow: 0 6px 20px rgba(0,0,0,.06); } .al-faq__item summary { cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 600; font-size: 15.5px; color: var(--c-heading); list-style: none; position: relative; user-select: none; } .al-faq__item summary::-webkit-details-marker { display: none; } .al-faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--c-red); transition: transform .2s var(--t); line-height: 1; } .al-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .al-faq__item p { padding: 0 22px 20px; margin: 0; font-size: 14.5px; color: var(--c-text-soft); line-height: 1.65; } /* ---------- CTA final ---------- */ .al-final-cta { padding: 100px var(--gutter); background: linear-gradient(135deg, var(--c-grey) 0%, #1A1F26 100%); color: #fff; position: relative; overflow: hidden; } .al-final-cta::before, .al-final-cta::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(80px); z-index: 0; opacity: .35; pointer-events: none; } .al-final-cta::before { background: var(--c-red); top: -150px; left: -150px; } .al-final-cta::after { background: var(--c-yellow); bottom: -150px; right: -150px; } .al-final-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; } .al-final-cta__eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--c-yellow); margin: 0 0 18px; padding: 6px 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; } .al-final-cta h2 { font-size: clamp(30px, 5vw, 48px); color: #fff; margin: 0 0 18px; line-height: 1.1; } .al-final-cta__lead { font-size: clamp(16px, 2vw, 19px); color: rgba(255,255,255,.85); margin: 0 0 32px; line-height: 1.55; } .al-final-cta__lead strong { color: var(--c-yellow); } .al-final-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 0 24px; } .al-final-cta__buttons .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } .al-final-cta__buttons .btn--ghost:hover { background: #fff; color: var(--c-grey); } .al-final-cta__rea { font-size: 13.5px; color: rgba(255,255,255,.7); margin: 0; letter-spacing: .02em; } /* Mockup démo */ .al-demo { padding: 60px var(--gutter) 80px; background: var(--c-bg-alt); } .al-demo__head { max-width: 680px; margin: 0 auto 40px; text-align: center; } .al-demo__head h2 { font-size: clamp(28px, 4.5vw, 40px); margin: 8px 0 12px; } .al-mockup { max-width: 680px; margin: 0 auto; } .al-mockup__frame { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.18); display: flex; flex-direction: column; } :root[data-theme="dark"] .al-mockup__frame { box-shadow: 0 30px 80px rgba(0,0,0,.6); } .al-mockup__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); } .al-mockup__brand { display: flex; align-items: center; gap: 12px; } .al-mockup__logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--c-red); color: #fff; border-radius: 8px; font-weight: 900; font-size: 13px; } .al-mockup__brand strong { display: block; font-size: 14px; color: var(--c-heading); } .al-mockup__brand small { font-size: 11.5px; color: var(--c-text-soft); } .al-mockup__status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--c-text-soft); } .al-mockup__dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: al-pulse 2s infinite; } @keyframes al-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .al-mockup__tabs { display: flex; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--c-border); overflow-x: auto; } .al-mockup__tab { font-size: 12.5px; padding: 8px 14px; border-radius: 999px; background: transparent; color: var(--c-text-soft); white-space: nowrap; font-weight: 600; } .al-mockup__tab.is-active { background: var(--c-red); color: #fff; } .al-mockup__chat { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; background: var(--c-bg); } .al-bubble { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.55; animation: al-pop 0.4s var(--t) backwards; } .al-bubble[data-anim="0"] { animation-delay: .1s; } .al-bubble[data-anim="1"] { animation-delay: .5s; } .al-bubble[data-anim="2"] { animation-delay: 1.2s; } .al-bubble[data-anim="3"] { animation-delay: 1.7s; } @keyframes al-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .al-bubble--user { align-self: flex-end; background: var(--c-red); color: #fff; border-bottom-right-radius: 4px; } .al-bubble--agent { align-self: flex-start; background: var(--c-bg-alt); border: 1px solid var(--c-border); color: var(--c-text); border-bottom-left-radius: 4px; } .al-bubble--agent p { margin: 0 0 10px; } .al-bubble--agent p:last-child { margin: 0; } .al-bubble--agent ul { margin: 8px 0 10px; padding-left: 0; list-style: none; } .al-bubble--agent li { padding: 5px 0; font-size: 13.5px; border-top: 1px dashed var(--c-border); } .al-bubble--agent li:first-child { border-top: 0; } .al-bubble__head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); } .al-bubble__head strong { font-size: 13px; color: var(--c-heading); } .al-bubble__head small { font-size: 11.5px; color: var(--c-text-soft); } .al-bubble__avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--c-yellow); border-radius: 50%; font-size: 13px; } .al-bubble--typing { padding: 14px 18px; } .al-typing { display: inline-flex; gap: 4px; align-items: center; } .al-typing i { display: inline-block; width: 7px; height: 7px; background: var(--c-text-soft); border-radius: 50%; animation: al-typing 1.2s infinite; } .al-typing i:nth-child(2) { animation-delay: .15s; } .al-typing i:nth-child(3) { animation-delay: .3s; } @keyframes al-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } .al-mockup__input { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--c-border); background: var(--c-bg-alt); } .al-mockup__input input { flex: 1; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text-soft); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-family: inherit; } .al-mockup__mic, .al-mockup__send { width: 38px; height: 38px; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-border); font-size: 16px; color: var(--c-heading); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .al-mockup__send { background: var(--c-red); color: #fff; border-color: var(--c-red); font-weight: 700; } .al-mockup__caption { text-align: center; margin: 18px auto 0; font-size: 13px; color: var(--c-text-soft); max-width: 580px; line-height: 1.55; } .al-mockup__caption strong { color: var(--c-heading); } .al-mockup__reset { display: inline-block; margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: var(--c-bg-alt); border: 1px solid var(--c-border); font-size: 12px; font-weight: 600; color: var(--c-heading); cursor: pointer; transition: background-color .15s var(--t), color .15s var(--t); } .al-mockup__reset:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); } /* ----- Suggestions cliquables ----- */ .al-suggestions { padding: 12px 14px 14px; border-top: 1px solid var(--c-border); background: var(--c-bg-alt); transition: opacity .2s var(--t); } .al-suggestions.is-disabled { opacity: .4; pointer-events: none; } .al-suggestions__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-soft); margin: 0 0 8px; } .al-suggestions__list { display: flex; flex-direction: column; gap: 6px; } .al-suggestion { text-align: left; padding: 10px 14px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 12px; font-size: 13.5px; color: var(--c-heading); cursor: pointer; line-height: 1.4; transition: background-color .15s var(--t), border-color .15s var(--t), transform .15s var(--t); position: relative; padding-right: 36px; } .al-suggestion::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--c-red); font-weight: 700; opacity: 0; transition: opacity .15s var(--t), transform .15s var(--t); } .al-suggestion:hover { background: var(--c-bg-alt); border-color: var(--c-red); transform: translateX(2px); } .al-suggestion:hover::after { opacity: 1; transform: translateY(-50%) translateX(2px); } /* État animé d'arrivée des bulles dynamiques */ .al-bubble[data-anim], .al-mockup__chat .al-bubble { animation: al-pop 0.35s var(--t) backwards; } .al-bubble--intro { animation-delay: 0s; } /* Comment ça marche */ .al-how { padding: 80px var(--gutter); max-width: var(--container); margin: 0 auto; } .al-how__head { max-width: 680px; margin: 0 0 40px; } .al-how__head h2 { font-size: clamp(28px, 4.5vw, 40px); margin: 8px 0 0; } .al-how__grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 720px) { .al-how__grid { grid-template-columns: repeat(3, 1fr); } } .al-step { padding: 28px 26px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); position: relative; } .al-step__num { position: absolute; top: -20px; left: 24px; width: 44px; height: 44px; background: var(--c-red); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; box-shadow: 0 6px 20px rgba(237,42,29,.3); } .al-step h3 { font-size: 18px; margin: 16px 0 10px; text-transform: uppercase; } .al-step p { font-size: 14.5px; color: var(--c-text-soft); margin: 0; line-height: 1.55; } /* Cas d'usage */ .al-cases { padding: 80px var(--gutter); background: var(--c-bg-alt); } .al-cases__head { max-width: 720px; margin: 0 auto 40px; text-align: center; } .al-cases__head h2 { font-size: clamp(28px, 4.5vw, 40px); margin: 8px 0 12px; } .al-cases__grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: var(--container); margin: 0 auto; } @media (min-width: 720px) { .al-cases__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .al-cases__grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- Cas concret détaillé (Agent Prospection) ---------- */ .al-deepcase { padding: 90px var(--gutter); background: var(--c-bg); } .al-deepcase__inner { max-width: 920px; margin: 0 auto; } .al-deepcase__title { font-size: clamp(28px, 4.5vw, 42px); margin: 8px 0 16px; } .al-deepcase__intro { font-size: clamp(16px, 2vw, 19px); color: var(--c-text-soft); line-height: 1.6; margin: 0 0 48px; max-width: 720px; } .al-deepcase__intro strong { color: var(--c-heading); } .al-deepcase__flow { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 56px; } @media (min-width: 720px) { .al-deepcase__flow { grid-template-columns: repeat(2, 1fr); } } .al-step-deep { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 28px 26px; position: relative; } .al-step-deep__num { position: absolute; top: -16px; left: 24px; width: 40px; height: 40px; background: var(--c-red); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 16px; box-shadow: 0 6px 20px rgba(237,42,29,.3); } .al-step-deep h3 { font-size: 19px; margin: 12px 0 12px; text-transform: uppercase; } .al-step-deep p { font-size: 14.5px; color: var(--c-text-soft); margin: 0 0 12px; line-height: 1.6; } .al-step-deep p strong { color: var(--c-heading); } .al-step-deep__tag { display: inline-block; font-size: 13px !important; font-weight: 600; color: var(--c-red) !important; background: rgba(237,42,29,.08); padding: 6px 12px; border-radius: 999px; margin: 4px 0 0 !important; } /* Résultats chiffrés */ .al-deepcase__results { background: linear-gradient(135deg, rgba(237,42,29,.05), rgba(255,194,51,.05)); border: 1px solid var(--c-red); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: 0 14px 40px rgba(237,42,29,.10); } .al-deepcase__results-title { font-size: 18px; margin: 0 0 24px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-red); } .al-deepcase__stats { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 24px; } @media (min-width: 600px) { .al-deepcase__stats { grid-template-columns: repeat(3, 1fr); } } .al-deepcase__stat { text-align: center; padding: 18px 14px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); } .al-deepcase__stat-num { display: block; font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 900; color: var(--c-red); line-height: 1.1; margin: 0 0 6px; } .al-deepcase__stat-label { display: block; font-size: 13px; color: var(--c-text-soft); line-height: 1.4; } .al-deepcase__note { margin: 0; font-size: 14.5px; color: var(--c-text-soft); line-height: 1.6; padding: 16px 18px; background: var(--c-bg); border-radius: var(--radius); border-left: 3px solid var(--c-yellow); } .al-deepcase__note strong { color: var(--c-heading); } .al-case { padding: 26px 24px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); text-align: center; transition: transform .2s var(--t), border-color .2s var(--t); } .al-case:hover { transform: translateY(-4px); border-color: var(--c-red); } .al-case__icon { font-size: 32px; width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg-alt); border-radius: 50%; margin: 0 0 14px; } .al-case h3 { font-size: 18px; margin: 0 0 4px; text-transform: uppercase; } .al-case__role { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red); margin: 0 0 12px; } .al-case > p:last-child { font-size: 14px; color: var(--c-text-soft); margin: 0; line-height: 1.5; } /* Stack technique */ .al-tech { padding: 80px var(--gutter); } .al-tech__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 880px) { .al-tech__inner { grid-template-columns: 1fr 1fr; gap: 60px; } } .al-tech__col h2 { font-size: clamp(28px, 4.5vw, 40px); margin: 8px 0 16px; } .al-tech__col p { color: var(--c-text-soft); font-size: 16px; line-height: 1.6; } .al-tech__col p strong { color: var(--c-heading); } .al-tech__list { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 8px 0; } .al-tech__list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--c-border); font-size: 14.5px; } .al-tech__list li:first-child { border-top: 0; } .al-tech__list li strong { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; color: var(--c-heading); } .al-tech__list li span { color: var(--c-text-soft); text-align: right; } /* ============================================================ PAGE À PROPOS (a-propos.html) ============================================================ */ .about-page { padding: 60px var(--gutter); } .about-page--alt { background: var(--c-bg-alt); } .about-page__inner { max-width: var(--container); margin: 0 auto; } .about-page__inner h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 28px; } .about-page__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 880px) { .about-page__grid { grid-template-columns: 4fr 7fr; gap: 60px; } } .about-page__content p { font-size: 16.5px; color: var(--c-text-soft); line-height: 1.7; margin: 0 0 18px; } .about-page__content strong { color: var(--c-heading); } /* Timeline complète */ .timeline--full { max-width: 760px; border-left: 2px solid var(--c-border); padding-left: 28px; margin: 0; } .timeline--full li { position: relative; padding: 10px 0 20px; border: 0; } .timeline--full li::before { content: ""; position: absolute; left: -35px; top: 16px; width: 12px; height: 12px; background: var(--c-red); border-radius: 50%; box-shadow: 0 0 0 4px var(--c-bg); } .about-page--alt .timeline--full li::before { box-shadow: 0 0 0 4px var(--c-bg-alt); } .timeline--full strong { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); margin: 0 0 4px; } .timeline--full h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 6px; text-transform: uppercase; color: var(--c-heading); } .timeline--full p { font-size: 14.5px; color: var(--c-text-soft); margin: 0; line-height: 1.55; } .timeline--full a { color: var(--c-red); text-decoration: underline; } /* Outils */ .tools-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 600px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .tools-grid { grid-template-columns: repeat(4, 1fr); } } .tool-group { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px 22px; } .about-page--alt .tool-group { background: var(--c-bg); } .tool-group h3 { font-size: 14px; margin: 0 0 14px; text-transform: uppercase; color: var(--c-red); letter-spacing: .08em; } .tool-group ul { list-style: none; padding: 0; margin: 0; } .tool-group li { font-size: 14px; padding: 6px 0; color: var(--c-text-soft); border-top: 1px dashed var(--c-border); } .tool-group li:first-child { border-top: 0; } /* Engagements */ .engagements { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 720px) { .engagements { grid-template-columns: repeat(3, 1fr); } } .engagement { padding: 22px; background: var(--c-bg); border-radius: var(--radius); border: 1px solid var(--c-border); } .about-page--alt .engagement { background: var(--c-bg-alt); } .engagement h3 { font-size: 16px; margin: 0 0 8px; text-transform: uppercase; } .engagement p { font-size: 14.5px; color: var(--c-text-soft); margin: 0; line-height: 1.5; } /* ============================================================ PAGE CONTACT (contact.html) ============================================================ */ .contact-page { padding: 0 var(--gutter) 80px; max-width: var(--container); margin: 0 auto; } .contact-page__cols { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 40px; } @media (min-width: 960px) { .contact-page__cols { grid-template-columns: 7fr 5fr; gap: 60px; } } .contact-page__form h2 { font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 8px; } .contact-page__form > p { color: var(--c-text-soft); font-size: 15px; margin: 0 0 24px; } .contact-page__aside h3 { font-size: 16px; text-transform: uppercase; margin: 0 0 16px; color: var(--c-red); letter-spacing: .08em; } .contact-page__steps { list-style: none; padding: 0; margin: 0 0 32px; counter-reset: step; } .contact-page__steps li { padding: 14px 0; border-top: 1px solid var(--c-border); font-size: 14.5px; color: var(--c-text-soft); line-height: 1.55; } .contact-page__steps li:first-child { border-top: 0; padding-top: 0; } .contact-page__steps strong { color: var(--c-heading); } .contact-page__faq-title { margin-top: 32px; } .contact-page__faq { border-top: 1px solid var(--c-border); padding: 14px 0; } .contact-page__faq:last-of-type { border-bottom: 1px solid var(--c-border); } .contact-page__faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--c-heading); list-style: none; position: relative; padding-right: 28px; } .contact-page__faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 22px; color: var(--c-red); transition: transform .2s var(--t); } .contact-page__faq[open] summary::after { transform: rotate(45deg); } .contact-page__faq summary::-webkit-details-marker { display: none; } .contact-page__faq p { margin: 10px 0 0; font-size: 14px; color: var(--c-text-soft); line-height: 1.55; } .contact-page__faq a { color: var(--c-red); text-decoration: underline; } /* ============================================================ SLIDER AVANT / APRÈS (étalonnage) Composant interactif : 2 panes superposées + handle vertical ============================================================ */ .ba-note { max-width: 760px; margin: 0 auto 36px; padding: 14px 18px; background: rgba(255, 194, 51, 0.10); border: 1px dashed var(--c-yellow-dark); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--c-text-soft); text-align: center; line-height: 1.55; } .ba-list { display: flex; flex-direction: column; gap: 48px; margin: 0 0 56px; } .ba-item__head { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ba-item__head h2 { font-size: clamp(20px, 3vw, 26px); margin: 0; text-transform: uppercase; } .ba-item__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-red); background: rgba(237, 42, 29, .1); padding: 4px 10px; border-radius: 999px; } .ba-slider { --split: 50%; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: #000; outline: none; box-shadow: 0 14px 40px rgba(0,0,0,.18); } .ba-slider:focus-visible { box-shadow: 0 0 0 4px rgba(237,42,29,.4); } .ba-slider__pane { position: absolute; inset: 0; pointer-events: none; } .ba-slider__pane img { width: 100%; height: 100%; object-fit: cover; display: block; } /* L'AVANT : effet désaturé / plat (LOG-like) */ .ba-slider__pane--before img { filter: saturate(0.4) contrast(0.85) brightness(1.05); } /* L'APRÈS : clip-path qui suit le handle */ .ba-slider__pane--after { clip-path: polygon(var(--split) 0, 100% 0, 100% 100%, var(--split) 100%); } /* Labels AVANT / APRÈS */ .ba-slider__label { position: absolute; top: 14px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .15em; padding: 6px 12px; border-radius: 4px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ba-slider__label--before { left: 14px; } .ba-slider__label--after { right: 14px; background: var(--c-red); } /* Handle vertical */ .ba-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,.3); } .ba-slider__handle-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-grey); box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .15s var(--t); } .ba-slider__handle-icon svg { width: 22px; height: 22px; } .ba-slider:hover .ba-slider__handle-icon, .ba-slider.is-dragging .ba-slider__handle-icon { transform: translate(-50%, -50%) scale(1.1); } .ba-slider.is-dragging .ba-slider__handle { background: var(--c-red); } /* ============================================================ LIGHTBOX GALERIE PHOTO Overlay plein écran qui s'active au clic sur les photos. Activé par JS (insertion DOM + classe .is-open). ============================================================ */ body.no-scroll { overflow: hidden; /* compense la largeur de la scrollbar pour éviter le saut */ padding-right: var(--scrollbar-width, 0); } .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(8, 11, 16, 0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--t); } .lightbox.is-open { display: flex; opacity: 1; animation: lb-fade .25s var(--t); } @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } } /* Stage : zone qui contient l'image */ .lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 60px; cursor: zoom-out; } @media (max-width: 700px) { .lightbox__stage { padding: 60px 20px; } } /* Image */ .lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.7); background: #1a1a1a; cursor: default; opacity: 0; transform: scale(.96); transition: opacity .35s var(--t), transform .35s var(--t); } .lightbox__img.is-ready { opacity: 1; transform: scale(1); } /* Loader */ .lightbox__loader { position: absolute; width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--c-red); border-radius: 50%; animation: lb-spin .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s var(--t); } .lightbox.is-loading .lightbox__loader { opacity: 1; } @keyframes lb-spin { to { transform: rotate(360deg); } } /* Bouton Close */ .lightbox__close { position: fixed; top: 20px; right: 20px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 50%; cursor: pointer; transition: background-color .2s var(--t), transform .2s var(--t), border-color .2s var(--t); z-index: 2; } .lightbox__close:hover { background: var(--c-red); border-color: var(--c-red); transform: rotate(90deg); } .lightbox__close svg { width: 22px; height: 22px; } /* Boutons Prev/Next */ .lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 50%; cursor: pointer; transition: background-color .2s var(--t), transform .2s var(--t), opacity .2s var(--t); z-index: 2; } .lightbox__nav:hover:not(:disabled) { background: var(--c-red); border-color: var(--c-red); transform: translateY(-50%) scale(1.08); } .lightbox__nav:disabled { opacity: 0.25; cursor: not-allowed; } .lightbox__nav--prev { left: 20px; } .lightbox__nav--next { right: 20px; } .lightbox__nav svg { width: 24px; height: 24px; } @media (max-width: 700px) { .lightbox__nav { width: 44px; height: 44px; bottom: 20px; top: auto; transform: none; } .lightbox__nav:hover:not(:disabled) { transform: scale(1.08); } .lightbox__nav--prev { left: 50%; margin-left: -54px; } .lightbox__nav--next { right: 50%; margin-right: -54px; left: auto; } } /* Compteur */ .lightbox__counter { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .04em; z-index: 2; font-variant-numeric: tabular-nums; } /* Bouton télécharger / ouvrir original */ .lightbox__download { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 50%; cursor: pointer; transition: background-color .2s var(--t), border-color .2s var(--t); z-index: 2; text-decoration: none; } .lightbox__download:hover { background: var(--c-yellow); color: var(--c-grey); border-color: var(--c-yellow); } .lightbox__download svg { width: 18px; height: 18px; } @media (max-width: 700px) { .lightbox__download { bottom: 84px; right: 20px; } } /* Accessible : indique que l'image est cliquable */ .project-detail__gallery-item { cursor: zoom-in; } .project-detail__gallery-item::after { content: "🔍"; position: absolute; bottom: 10px; right: 10px; width: 32px; height: 32px; background: rgba(0,0,0,.65); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transform: scale(.8); transition: opacity .2s var(--t), transform .2s var(--t); pointer-events: none; } .project-detail__gallery-item { position: relative; } .project-detail__gallery-item:hover::after { opacity: 1; transform: scale(1); } /* ============================================================ Réduction des animations si l'utilisateur le demande ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* ============================================================ APPARITION AU SCROLL — Système [data-reveal] ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2, .8, .2, 1), transform .75s cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="zoom"] { transform: scale(.94); } [data-reveal].is-revealed { opacity: 1; transform: translate(0, 0) scale(1); } /* prefers-reduced-motion : on désactive l'effet, tout est visible direct */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }