/* ============================================================================= styles.css — Système de design "Swiss / éditorial minimaliste" ----------------------------------------------------------------------------- Principes appliqués : - Grille stricte, marges généreuses, beaucoup d'espace négatif. - Angles nets (rayons quasi nuls) et filets fins (hairlines) : vocabulaire typographique suisse. - Une seule couleur d'accent, utilisée avec parcimonie. - Tout est piloté par des variables CSS → thème clair/sombre et changement d'accent en une ligne. - Animations sobres, désactivées si `prefers-reduced-motion`. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. Jetons de design (design tokens) -------------------------------------------------------------------------- */ :root { /* Couleurs — site en thème SOMBRE uniquement (le thème clair a été retiré). */ --paper: #0E0E0D; /* fond principal sombre */ --paper-2: #1A1A18; /* fond secondaire (cartes, survols) */ --ink: #F3F2EC; /* texte principal : blanc cassé */ --ink-70: #B7B6AE; /* texte secondaire */ --ink-45: #86857D; /* méta, légendes */ --line: #2A2A27; /* filets / bordures */ /* Accent — UNE seule couleur. */ --accent: #DA291C; /* accent rouge */ --accent-ink: #0E0E0D; /* texte posé sur l'accent */ /* Typographie */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Échelle typographique fluide (clamp = s'adapte à la largeur d'écran) */ --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem); --step-3: clamp(2.2rem, 1.7rem + 2.4vw, 3.5rem); --step-4: clamp(3rem, 2rem + 5vw, 6.5rem); /* titres héros/section */ /* Rythme spatial (multiples cohérents) */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --space-7: 9rem; /* Divers */ --radius: 2px; /* Swiss = angles quasi nets */ --maxw: 1440px; /* largeur de contenu maximale */ --gutter: clamp(1.25rem, 5vw, 5rem); /* marge latérale de page */ --nav-h: 72px; /* hauteur de l'en-tête fixe */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* courbe douce et rapide */ --dur: 240ms; /* Échelle de z-index (documentée pour éviter les conflits) */ --z-nav: 100; --z-overlay: 200; --z-skip: 300; color-scheme: dark; } /* Thème sombre — activé via l'attribut [data-theme="dark"] sur . */ :root[data-theme="dark"] { --paper: #0E0E0D; --paper-2: #17171500; /* transparent : on s'appuie sur les filets */ --paper-2: #1A1A18; --ink: #F3F2EC; --ink-70: #B7B6AE; --ink-45: #86857D; --line: #2A2A27; --accent: #DA291C; /* accent rouge (thème sombre) */ --accent-ink: #0E0E0D; color-scheme: dark; } /* Respect du réglage système au premier chargement (surclassé par le toggle). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0E0E0D; --paper-2: #1A1A18; --ink: #F3F2EC; --ink-70: #B7B6AE; --ink-45: #86857D; --line: #2A2A27; --accent: #DA291C; --accent-ink: #0E0E0D; color-scheme: dark; } } /* ----------------------------------------------------------------------------- 2. Réinitialisation minimale & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } section[id], footer[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-2)); } /* Garde-fou : aucun média ne dépasse sa colonne (évite l'élargissement du layout). */ img, svg, video, canvas { max-width: 100%; } img { height: auto; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; /* lisibilité corps de texte */ font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* garde-fou anti-scroll horizontal */ transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } /* Accessibilité : coupe les animations si l'utilisateur le demande. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Focus visible cohérent au clavier (jamais supprimé). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } /* Lien d'évitement (skip link) pour la navigation clavier/lecteur d'écran. */ .skip-link { position: fixed; top: -100px; left: var(--gutter); z-index: var(--z-skip); background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; font: 500 var(--step--1)/1 var(--font-mono); transition: top var(--dur) var(--ease); } .skip-link:focus { top: 1rem; } /* Fond animé (traits qui tombent) : fixe, plein écran, derrière le contenu. */ #bg-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Le contenu passe au-dessus du fond animé. */ main, .footer { position: relative; z-index: 1; } /* ----------------------------------------------------------------------------- 3. Utilitaires de mise en page -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-7); } .section--tight { padding-block: var(--space-6); } /* En-tête de section Swiss : petit numéro mono + libellé */ .section-head { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); } .section-head__index { font: 400 var(--step--1)/1 var(--font-mono); color: var(--accent); letter-spacing: 0.05em; } .section-head__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); letter-spacing: -0.02em; } .section-head__note { margin-left: auto; max-width: 32ch; color: var(--ink-70); font-size: var(--step--1); } /* Libellé méta réutilisable (mono, majuscules, interlettrage) */ .meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-45); } /* ----------------------------------------------------------------------------- 4. En-tête / Navigation (discrète mais accessible) -------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: var(--z-nav); display: flex; align-items: center; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav.is-scrolled { border-bottom-color: var(--line); } .nav__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .nav__brand { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); letter-spacing: -0.005em; white-space: nowrap; } .nav__brand span { color: var(--accent); } .nav__actions { display: flex; align-items: center; gap: 0.25rem; } .language-switcher { display: inline-flex; align-items: center; gap: 0.2rem; margin-right: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; } .language-switcher a { min-width: 2rem; padding: 0.38rem 0.35rem; text-align: center; color: var(--ink-45); border: 1px solid transparent; border-radius: 999px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .language-switcher a:hover, .language-switcher a:focus-visible { color: var(--ink); border-color: var(--line); } .language-switcher a[aria-current="page"] { color: var(--ink); border-color: var(--line); background: color-mix(in srgb, var(--ink) 6%, transparent); } /* Liens : petites capitales monospace → registre éditorial / luxe, très sobre. */ .nav__links { display: flex; align-items: center; gap: var(--space-4); } .nav__link { position: relative; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-45); transition: color var(--dur) var(--ease); } .nav__link::after { /* soulignement animé discret */ content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); } .nav__link:hover, .nav__link:focus-visible { color: var(--ink); } .nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* Boutons-icônes : sans cadre, épurés (icône SVG, pas d'emoji). */ .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; /* cible tactile ≥ 44px */ border: none; color: var(--ink-45); transition: color var(--dur) var(--ease); } .icon-btn:hover { color: var(--ink); } .icon-btn svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* Bouton menu mobile */ .nav__burger { display: none; } /* Bandeau continu des clients et collaborations */ .client-marquee { position: relative; z-index: 2; padding-block: 1.35rem; overflow: hidden; background: transparent; border-block: 1px solid var(--line); } .client-marquee__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .client-marquee__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .client-marquee__track { display: flex; width: max-content; will-change: transform; animation: client-marquee-scroll 54s linear infinite; } .client-marquee__group { display: flex; flex: none; align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem); padding-inline: clamp(0.75rem, 1.5vw, 1.75rem); } .client-logo { width: 13rem; height: 5rem; flex: none; display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.25rem 0.65rem; overflow: hidden; color: #9a9993; background: transparent; border: 0; } .client-logo img { width: 100%; height: 4.1rem; max-width: none; max-height: none; object-fit: contain; filter: grayscale(1) brightness(0) invert(0.62); opacity: 0.72; transition: opacity var(--dur) var(--ease); } .client-logo:has(.client-logo__name) img { width: 3.15rem; height: 3.15rem; } .client-logo:hover img { opacity: 1; } .client-logo--lrg img { height: 4.25rem; } .client-logo__name { font-family: var(--font-display); max-width: 8rem; font-size: 0.92rem; font-weight: 700; line-height: 1.05; letter-spacing: 0; opacity: 0.72; transition: opacity var(--dur) var(--ease); } .client-logo:hover .client-logo__name { opacity: 1; } .client-marquee:hover .client-marquee__track { animation-play-state: paused; } @keyframes client-marquee-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .client-marquee__track { animation: none; } } /* ----------------------------------------------------------------------------- 5. Section Héros -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; padding-top: calc(var(--nav-h) + var(--space-5)); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #050505; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.70) 38%, rgba(0, 0, 0, 0.28) 72%, rgba(0, 0, 0, 0.48) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, transparent 55%, rgba(0, 0, 0, 0.52) 100%); } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to bottom, transparent, var(--paper) 94%); pointer-events: none; z-index: 1; } /* Thème clair retiré : le bouton bascule de thème est masqué partout. */ .theme-toggle { display: none !important; } .hero__grid { position: relative; z-index: 2; width: 100%; transform: translateY(-2vh); } .hero__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #050505; } .hero__video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100vh; border: 0; opacity: 1; filter: saturate(0.92) contrast(1.04); transform: translate(-50%, -50%) scale(1.18); } @media (max-width: 760px) { .hero { min-height: 100svh; padding-bottom: var(--space-5); } .hero::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 48%, rgba(0, 0, 0, 0.76) 100%); } .hero__grid { transform: none; } .hero__video iframe { opacity: 1; transform: translate(-50%, -50%) scale(1.14); } } @media (prefers-reduced-motion: reduce) { .hero__video iframe { visibility: hidden; } } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-4); } .hero__eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--accent); } .hero__title { font-family: var(--font-display); font-weight: 600; /* semi-bold : plus raffiné que le black */ font-size: clamp(3rem, 1.8rem + 6vw, 7.5rem); line-height: 0.92; letter-spacing: -0.045em; /* resserrement typographique premium */ max-width: 15ch; } .hero__title em { font-style: normal; color: var(--accent); } .hero__lead { margin-top: var(--space-3); max-width: 44ch; font-size: var(--step-1); color: var(--ink-70); line-height: 1.45; } .hero__actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; } /* Bandeau de disciplines sous le héros */ .hero__disciplines { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } .hero__disciplines span { color: var(--ink-45); } .hero__disciplines .meta { color: var(--ink-70); } /* ----------------------------------------------------------------------------- 6. Boutons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.6rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; border-radius: var(--radius); border: 1px solid var(--ink); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover { transform: translateY(-1px); } /* micro-retour, pas de shift de layout */ .btn:active { transform: translateY(0); } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn svg { width: 16px; height: 16px; } /* ----------------------------------------------------------------------------- 7. Filtres de la galerie -------------------------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-5); } .filter { min-height: 44px; padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-45); border: 1px solid var(--line); border-radius: 999px; /* seule exception aux angles nets : les puces de filtre */ transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .filter:hover { color: var(--ink); border-color: var(--ink-45); } .filter[aria-pressed="true"] { color: var(--accent-ink); background: var(--ink); border-color: var(--ink); } .filter .filter__count { opacity: 0.55; margin-left: 0.4rem; } /* ----------------------------------------------------------------------------- 8. Grille de projets & vignettes -------------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-3); row-gap: var(--space-5); } /* Chaque carte occupe 6 colonnes (2 par ligne) sur desktop. */ .card { grid-column: span 6; position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: var(--space-2); transition: opacity 300ms var(--ease), transform 300ms var(--ease), border-color var(--dur) var(--ease); } .card:focus-within { border-top-color: var(--accent); } /* Masquage animé lors du filtrage */ .card.is-hidden { display: none; } .card.is-fading { opacity: 0; transform: translateY(8px); } .card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); } .card__media svg, .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__media img { transition: filter 400ms var(--ease); } .card__media--contain { background: #080808; } .card__media--contain img { object-fit: contain; } .card__media--light { background: #fff; } .card__media--logo-compact, .card__media--logo-medium { display: grid; place-items: center; } .card__media--logo-compact img, .card__media--logo-medium img { position: absolute; top: 50%; left: 50%; width: 68%; height: 46%; max-width: 68%; max-height: 46%; object-fit: contain; transform: translate(-50%, -50%); } /* Superposition au survol */ .card__overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-2); background: color-mix(in srgb, #000 52%, transparent); opacity: 0; transition: opacity 400ms var(--ease); } .card:hover .card__overlay, .card:focus-within .card__overlay { opacity: 1; } .card__more { color: #fff; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; line-height: 1; padding: 0.8rem 1.15rem; border: 1px solid color-mix(in srgb, #fff 55%, transparent); border-radius: 999px; transform: translateY(8px); transition: transform 400ms var(--ease); } .card:hover .card__more, .card:focus-within .card__more { transform: translateY(0); } .card__body { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2) var(--space-1); min-height: 4.25rem; } .card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.02em; } .card__cats { display: flex; flex-wrap: wrap; gap: 0.4rem; } .card__cat { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-45); } .card__year { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-45); } /* Le lien couvre toute la carte (zone cliquable large et accessible). */ .card__link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); } .card__link::after { content: ''; } /* hitbox */ .grid__empty { grid-column: 1 / -1; padding: var(--space-5) 0; color: var(--ink-45); font-family: var(--font-mono); } /* Services et réponses utiles pour présenter clairement les métiers. */ .services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .service-card { display: flex; flex-direction: column; min-width: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); } .service-card h3 { margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.25; } .service-card p { margin-top: var(--space-2); color: var(--ink-70); font-size: var(--step--1); } .service-card a { align-self: flex-start; margin-top: auto; padding-top: var(--space-3); color: var(--ink); font-family: var(--font-mono); font-size: var(--step--1); border-bottom: 1px solid var(--line); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .service-card a:hover, .service-card a:focus-visible { color: var(--accent); border-color: var(--accent); } .faq { max-width: 900px; margin-top: var(--space-7); } .faq > h3 { margin-bottom: var(--space-3); font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; } .faq details { border-top: 1px solid var(--line); } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { padding-block: var(--space-3); color: var(--ink); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; cursor: pointer; } .faq details p { max-width: 70ch; padding: 0 0 var(--space-3) var(--space-3); color: var(--ink-70); } /* ----------------------------------------------------------------------------- 9. Section À propos -------------------------------------------------------------------------- */ .about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); } .about__bio { grid-column: span 7; } .about__bio p { max-width: 60ch; color: var(--ink-70); margin-bottom: var(--space-2); } .about__bio p:first-child { color: var(--ink); font-size: var(--step-1); line-height: 1.5; } .about__aside { grid-column: 9 / span 4; } .about__portrait { margin: 0; } .about__aside img { display: block; width: 100%; height: auto; border-radius: var(--radius); } .skills { list-style: none; padding: 0; } .skills li { display: flex; justify-content: space-between; gap: var(--space-2); padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: var(--step--1); } .skills li span:last-child { color: var(--ink-45); font-family: var(--font-mono); } .about__links { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 0.25rem; } .link-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; border-top: 1px solid var(--line); transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); } .link-row:last-child { border-bottom: 1px solid var(--line); } .link-row:hover { color: var(--accent); padding-left: 0.5rem; } .link-row svg { width: 16px; height: 16px; } /* ----------------------------------------------------------------------------- 10. Pied de page / Contact -------------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); padding-block: var(--space-6) var(--space-4); } .footer__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); } .footer__cta { grid-column: span 6; } .footer__cta h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1; } .footer__cta .mail-link { display: inline-block; margin-top: var(--space-3); font-size: var(--step-1); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .footer__cta .mail-link:hover { color: var(--accent); border-color: var(--accent); } .footer__form { grid-column: 8 / span 5; } .field { margin-bottom: var(--space-2); } .field label { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-45); margin-bottom: 0.4rem; } .field input, .field textarea { width: 100%; padding: 0.85rem 0; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; transition: border-color var(--dur) var(--ease); } .field input:focus, .field textarea:focus { border-bottom-color: var(--accent); } .field textarea { resize: vertical; min-height: 90px; } .form__status { min-height: 1.4em; font-size: var(--step--1); color: var(--accent); font-family: var(--font-mono); } .form__status[data-state="pending"] { color: var(--text-muted); } .form__status[data-state="success"] { color: var(--accent); } .form__status[data-state="error"] { color: #d14a3f; } .footer__form button:disabled { cursor: wait; opacity: 0.62; } .form__honey { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .footer__bottom { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; } .footer__social { display: flex; align-items: center; gap: var(--space-3); } .footer__social a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-45); font-size: var(--step--1); transition: color var(--dur) var(--ease); } .footer__social a:hover { color: var(--ink); } .footer__social svg { width: 16px; height: 16px; } /* ----------------------------------------------------------------------------- 11. Étude de cas (overlay plein écran, route #/projet/) -------------------------------------------------------------------------- */ .case { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--paper); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); } .case.is-open { opacity: 1; visibility: visible; } .case__inner { max-width: 1100px; margin-inline: auto; padding: var(--gutter); padding-top: var(--space-5); } .case__bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; margin-bottom: var(--space-4); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .case__close { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); color: var(--ink-70); } .case__close:hover { color: var(--ink); } .case__close svg { width: 16px; height: 16px; } .case__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1.02; margin-bottom: var(--space-2); } .case__summary { max-width: 60ch; font-size: var(--step-1); color: var(--ink-70); margin-bottom: var(--space-4); } .case__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); } .fact dt { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-45); margin-bottom: 0.4rem; } .fact dd { font-size: var(--step--1); } .fact dd ul { list-style: none; padding: 0; } .case__cs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); } .cs-block h3 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: var(--space-1); } .cs-block p { color: var(--ink-70); font-size: var(--step--1); } /* Blocs média de l'étude de cas */ .media-block { margin-bottom: var(--space-4); } .media-figure { margin: 0; } .media-figure figcaption { margin-top: 0.75rem; } .media-figure > a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #080808; } .media-figure > a img { display: block; width: 100%; height: auto; } .media-figure > img[src$="client-logos/galderma.svg"], .media-figure > img[src$="client-logos/koenig-bauer.svg"], .media-figure > img[src$="client-logos/latticeflow-ai-card.svg"] { display: block; width: 100%; padding: clamp(3rem, 9vw, 7rem) clamp(2rem, 12vw, 9rem); box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .embed { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed--short { aspect-ratio: 9 / 16; width: min(100%, 440px); margin-inline: auto; background: #050505; } .embed__placeholder { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--space-2); text-align: center; } .embed__play { width: 64px; height: 64px; border: 1px solid var(--ink-45); border-radius: 50%; display: grid; place-items: center; } .embed__play svg { width: 22px; height: 22px; margin-left: 3px; } .media-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .media-gallery figure { margin: 0; } .media-gallery .ph, .media-figure .ph { border-radius: var(--radius); border: 1px solid var(--line); } .media-gallery--redfox, .media-gallery--kyto { grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.75fr); align-items: stretch; } .media-gallery--redfox figure, .media-gallery--kyto figure { height: clamp(430px, 48vw, 620px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #22252b; } .media-gallery--redfox img, .media-gallery--kyto img { display: block; width: 100%; height: 100%; object-fit: cover; } .media-gallery--redfox figure > a, .media-gallery--kyto figure > a { display: block; height: 100%; } .media-gallery--redfox .is-mobile > a, .media-gallery--kyto .is-mobile > a { display: flex; justify-content: center; } .media-gallery--redfox .is-mobile img, .media-gallery--kyto .is-mobile img { width: auto; max-width: 100%; object-fit: contain; } .media-gallery--kyto figure:not(.is-mobile) img { object-fit: contain; } .media-gallery--redfox figure:not(.is-mobile) img { object-fit: contain; } .media-gallery--kyto figure { height: clamp(420px, 42vw, 540px); background: #1b1412; } .note { border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem var(--space-3); max-width: 66ch; } .note h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .note p { color: var(--ink-70); } .case__nav { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--line); margin-top: var(--space-4); } .case__nav a { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--step-1); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; transition: color var(--dur) var(--ease); } .case__nav a:hover { color: var(--accent); } .case__nav a.is-next { text-align: right; margin-left: auto; } /* Page projet autonome (chaque étude de cas est une vraie page /projets/…). */ .case-page { padding-top: calc(var(--nav-h) + var(--space-4)); padding-bottom: var(--space-6); } .case-page .case__bar { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Galerie Art Regio : 3 visuels de tailles différentes, cliquables. */ .artregio-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .artregio-gallery .ag-item { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur) var(--ease); } .artregio-gallery .ag-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .artregio-gallery .ag-item:hover { border-color: var(--ink-45); } .artregio-gallery .ag-item:hover img { transform: scale(1.03); } .artregio-gallery .ag-wide { grid-column: 1 / -1; aspect-ratio: 16 / 8; } /* grande, pleine largeur */ .artregio-gallery .ag-item:not(.ag-wide) { aspect-ratio: 4 / 3; } /* deux plus petites */ .ag-caption { margin-top: 0.75rem; } /* Galerie des captures de l'application Prospect (2 colonnes, images entières). */ .gallery--prospect figure { margin: 0; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #080808; } .gallery--prospect img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Galeries des workflows n8n, avec des captures entières en format 16 sur 10. */ .gallery--workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .gallery--workflow figure { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #080808; } .gallery--workflow .is-wide { grid-column: 1 / -1; } .gallery--workflow img { display: block; width: 100%; height: 100%; object-fit: contain; } .artregio-gallery.gallery--20h .ag-item, .artregio-gallery.gallery--20h .ag-wide, .artregio-gallery.gallery--artregio .ag-item, .artregio-gallery.gallery--artregio .ag-wide { aspect-ratio: 16 / 10; background: #080808; } .artregio-gallery.gallery--20h .ag-item img, .artregio-gallery.gallery--artregio .ag-item img { object-fit: contain; } .artregio-gallery.gallery--20h .ag-item:hover img, .artregio-gallery.gallery--artregio .ag-item:hover img { transform: none; } .media-gallery.gallery--20h { align-items: start; } .media-gallery.gallery--20h figure { overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius); background: #080808; } .media-gallery.gallery--20h figure:first-child { grid-column: 1 / -1; } .media-gallery.gallery--20h img { display: block; width: 100%; height: 100%; object-fit: contain; } .media-gallery.gallery--20h figure > a { display: block; height: 100%; } .media-gallery--video-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-gallery--video-stills figure { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #080808; } .media-gallery--video-stills figure:first-child { grid-column: 1 / -1; } .media-gallery--video-stills a, .media-gallery--video-stills img { display: block; width: 100%; height: 100%; } .media-gallery--video-stills img { object-fit: contain; transition: transform 600ms var(--ease); } .media-gallery--video-stills a:hover img { transform: scale(1.02); } .gallery--horizon-vert { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .gallery--horizon-vert figure { aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #080808; } .gallery--horizon-vert .is-wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; } .gallery--horizon-vert img { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery--horizon-vert .is-square img { object-position: 50% 38%; } @media (max-width: 680px) { .client-marquee { padding-block: 0.85rem; } .client-marquee__group { gap: 1.25rem; padding-inline: 0.625rem; } .client-logo { width: 11rem; height: 4.25rem; padding: 0.2rem 0.45rem; } .client-logo img { max-height: 3.35rem; } .artregio-gallery { grid-template-columns: 1fr; } .artregio-gallery .ag-wide { aspect-ratio: 16 / 9; } .media-gallery--video-stills { grid-template-columns: 1fr; } .media-gallery--video-stills figure:first-child { grid-column: auto; } .gallery--workflow { grid-template-columns: 1fr; } .gallery--workflow .is-wide { grid-column: auto; } .gallery--horizon-vert { grid-template-columns: 1fr; } .gallery--horizon-vert .is-wide { grid-column: auto; aspect-ratio: 3 / 2; } .case__nav { flex-direction: column; gap: 0; } .case__nav a { padding-block: var(--space-3); } .case__nav a + a { border-top: 1px solid var(--line); } .case__nav a.is-next { margin-left: 0; text-align: left; } } /* ----------------------------------------------------------------------------- 12. Révélation au défilement (progressive enhancement) -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ----------------------------------------------------------------------------- 13. Réactivité (mobile-first overrides) -------------------------------------------------------------------------- */ @media (max-width: 900px) { .card { grid-column: span 6; } /* Les grilles 12 colonnes passent en 1 colonne (plus d'élargissement). */ .services__grid, .about__grid, .footer__grid { grid-template-columns: 1fr; } .about__bio, .about__aside, .footer__cta, .footer__form { grid-column: 1 / -1; min-width: 0; } .case__facts { grid-template-columns: 1fr; gap: var(--space-2); } .case__cs { grid-template-columns: 1fr; } } @media (max-width: 860px) { :root { --nav-h: 64px; } .language-switcher { margin-right: 0; } .language-switcher a { min-width: 1.8rem; padding-inline: 0.25rem; } .nav__links { display: none; } .nav__links.is-open { display: flex; flex-direction: column; align-items: flex-start; position: fixed; inset: var(--nav-h) 0 auto 0; padding: var(--space-3) var(--gutter) var(--space-4); background: var(--paper); border-bottom: 1px solid var(--line); gap: var(--space-3); } .nav__links.is-open .nav__link { width: 100%; padding-block: 0.75rem; font-size: 0.8rem; } .nav__burger { display: inline-grid; } } @media (max-width: 680px) { /* Photo de profil : recadrée un peu plus serrée (moins de vide sur les côtés) et légèrement recentrée sur le sujet, en mobile. */ .about__aside img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 34%; max-width: 460px; margin-inline: auto; } } @media (max-width: 680px) { :root { --nav-h: 64px; } .language-switcher { margin-right: 0; } .language-switcher a { min-width: 1.8rem; padding-inline: 0.25rem; } .nav__links { display: none; } /* remplacé par le panneau mobile */ .nav__links.is-open { display: flex; flex-direction: column; align-items: flex-start; position: fixed; inset: var(--nav-h) 0 auto 0; padding: var(--space-3) var(--gutter) var(--space-4); background: var(--paper); border-bottom: 1px solid var(--line); gap: var(--space-3); } .nav__links.is-open .nav__link { width: 100%; padding-block: 0.75rem; font-size: 0.8rem; } .nav__burger { display: inline-grid; } .card { grid-column: 1 / -1; } /* 1 colonne sur mobile */ .card__body { min-height: 0; } .media-gallery { grid-template-columns: 1fr; } .media-gallery--redfox { grid-template-columns: 1fr; } .media-gallery--kyto { grid-template-columns: 1fr; } .media-gallery--redfox figure { height: auto; } .media-gallery--kyto figure { height: auto; } .media-gallery--redfox figure:first-child { aspect-ratio: 16 / 9; } .media-gallery--kyto figure:first-child { aspect-ratio: 16 / 9; } .media-gallery--redfox .is-mobile { max-height: 720px; } .media-gallery--kyto .is-mobile { max-height: 720px; } .media-gallery--redfox .is-mobile img { width: 100%; height: auto; } .media-gallery--kyto .is-mobile img { width: 100%; height: auto; } .section-head { flex-wrap: wrap; } .section-head__note { margin-left: 0; flex-basis: 100%; } .hero__title { font-size: clamp(2.6rem, 12vw, 4rem); } }