/* ============================================================================= VDDT · feuille de style globale ========================================================================== */ /* Proxima Nova (texte) : utilise la copie installée si dispo, sinon /fonts/*.woff2. Titres en Trebuchet MS (police système, aucun chargement requis). */ @font-face { font-family: 'Proxima Nova'; font-weight: 400; font-style: normal; font-display: swap; src: local('Proxima Nova Regular'), local('ProximaNova-Regular'), url('../fonts/ProximaNova-Regular.woff2') format('woff2'); } @font-face { font-family: 'Proxima Nova'; font-weight: 500; font-style: normal; font-display: swap; src: local('Proxima Nova Medium'), local('ProximaNova-Medium'), url('../fonts/ProximaNova-Medium.woff2') format('woff2'); } @font-face { font-family: 'Proxima Nova'; font-weight: 600; font-style: normal; font-display: swap; src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'), url('../fonts/ProximaNova-Semibold.woff2') format('woff2'); } :root { --bg: #ffffff; --bg-soft: #fafaf8; --ink: #151515; --ink-soft: #64645f; --muted: #9a9a94; --line: #e8e8e3; --line-strong: #d9d9d3; /* surchargés par variante sur (voir Base.astro) */ --accent: #3c8f43; --accent-soft: rgba(60, 143, 67, 0.14); --stat-color: #3c8f43; --activity-bg: #183a24; --maxw: 1280px; --pad: clamp(20px, 5vw, 68px); --font-text: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-title: 'Trebuchet MS', 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--font-text); font-weight: 400; color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } h1, h2, h3, h4, p { margin: 0; } /* --- utilitaires ---------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(36px, 4.4vw, 66px); } .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* retour client : titres de blocs harmonisés (majuscules, noir, taille intermédiaire, typo de l'ancien eyebrow « agence »). */ .section-head { font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0; } /* retour client : un trait noir sous chaque titre de section (l'activité a le sien en blanc via .activity__label-line, le footer n'en a pas) */ .section-head::after { content: ''; display: block; width: 36px; height: 2px; background: var(--ink); margin-top: 14px; } .activity .section-head::after, .footer .section-head::after { display: none; } /* sur fond sombre (bloc activité) le titre passe en clair */ .activity .section-head { color: rgba(255, 255, 255, 0.92); } .serif { font-family: var(--font-title); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s var(--ease); } .link-arrow svg { width: 15px; height: 15px; transition: transform 0.4s var(--ease); } .link-arrow:hover { color: var(--ink); } .link-arrow:hover svg { transform: translateX(6px); } /* --- animation d'entrée (reveal) ----------------------------------------- */ /* état masqué appliqué uniquement si JS est actif (sinon tout reste visible) */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* ============================================================================= HEADER ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: #fff; transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease), backdrop-filter 0.45s var(--ease); border-bottom: 1px solid transparent; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 86px; } .brand { display: inline-flex; align-items: center; color: currentColor; } /* logo rendu via masque : la couleur est libre (voir Logo.astro) */ .logo-mask { display: block; -webkit-mask: url('../images/logo-vddt.png') center / contain no-repeat; mask: url('../images/logo-vddt.png') center / contain no-repeat; } .brand__logo { width: 168px; height: 47px; /* retour client : header agrandi (logo + menu) */ background-color: #fff; /* logo blanc au-dessus du hero */ transition: background-color 0.45s var(--ease); } .site-header.is-solid .brand__logo { /* retour client : vert foncé des blocs quand le header devient clair */ background-color: var(--activity-bg); } .nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); } .nav a { font-size: 15px; letter-spacing: 0.01em; color: currentColor; opacity: 0.86; position: relative; padding-block: 6px; transition: opacity 0.3s var(--ease); } /* retour client : menu en gras pour plus de présence */ .nav a:not(.nav__ln) { font-weight: 600; opacity: 1; } .nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .nav a:hover { opacity: 1; } .nav a:hover::after { transform: scaleX(1); } .nav__ln { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; opacity: 0.7; font-size: 0; transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } .nav__ln svg { width: 14px; height: 14px; } .nav__ln:hover { opacity: 1; background: currentColor; } .nav__ln:hover svg { color: var(--bg); } /* bouton burger (mobile) : masqué en desktop, révélé sous 720px */ .nav-toggle { display: none; position: relative; z-index: 70; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; color: currentColor; } .nav-toggle span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), background 0.3s var(--ease); } .site-header.nav-open .nav-toggle span { background: #fff; } .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* header devient solide après le hero */ .site-header.is-solid { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); border-bottom-color: var(--line); } /* ============================================================================= HERO ========================================================================== */ .hero { position: relative; min-height: 100vh; /* retour client : photo d'accueil plus grande */ color: #fff; background: #0b0b0b; overflow: hidden; text-align: center; } .hero__slides { position: absolute; inset: 0; cursor: pointer; } .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; will-change: opacity; transition: opacity 1.2s cubic-bezier(0.37, 0, 0.63, 1), visibility 0s linear 1.2s; } .hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1.2s cubic-bezier(0.37, 0, 0.63, 1); } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.94) saturate(1.04); transform: scale(1.12); transition: transform 7s var(--ease); } /* zoom lent (Ken Burns) via transition : pas de saut sur le slide sortant */ .hero.is-ready .hero-slide.is-active .hero__media img { transform: scale(1); } .hero__scrim { position: absolute; inset: 0; /* retour client : voile gris nettement allégé. Léger renfort en haut (logo) et en bas (points), très discret au centre ; la lisibilité du titre est assurée par une ombre portée sur le texte (voir .hero__title). */ background: linear-gradient( 180deg, rgba(8, 8, 8, 0.4) 0%, rgba(8, 8, 8, 0.22) 16%, rgba(8, 8, 8, 0.24) 50%, rgba(8, 8, 8, 0.36) 80%, rgba(8, 8, 8, 0.52) 100% ); } .hero__inner { position: relative; z-index: 2; padding-inline: var(--pad); } .hero__kicker { color: var(--accent); font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5); } .hero__title { font-family: var(--font-title); font-weight: 400; font-size: clamp(48px, 8vw, 104px); line-height: 1.02; letter-spacing: -0.01em; margin-top: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 30px rgba(0, 0, 0, 0.7), 0 0 80px rgba(0, 0, 0, 0.5); } .hero__sub { margin-top: 20px; /* retour client : sous-titres encore agrandis */ font-size: clamp(18px, 2.4vw, 28px); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 18px rgba(0, 0, 0, 0.55); } /* entrée des légendes quand le slide devient actif (après le rideau) */ .js .hero__kicker, .js .hero__title, .js .hero__sub { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .hero.is-ready .hero-slide.is-active .hero__kicker { opacity: 1; transform: none; transition-delay: 0.05s; } .hero.is-ready .hero-slide.is-active .hero__title { opacity: 1; transform: none; transition-delay: 0.18s; } .hero.is-ready .hero-slide.is-active .hero__sub { opacity: 1; transform: none; transition-delay: 0.3s; } /* pastilles / progression du slider */ .hero__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 34px; z-index: 3; display: flex; gap: 12px; opacity: 0; transition: opacity 0.6s var(--ease) 0.2s; } .hero.is-ready .hero__dots { opacity: 1; } /* retour client : points fixes (moins de mouvement que les barres qui se remplissent) */ .hero__dot { position: relative; width: 10px; height: 10px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .hero__dot:hover { background: rgba(255, 255, 255, 0.7); } .hero__dot.is-active { background: #fff; transform: scale(1.25); } .hero__dot-fill { display: none; } /* (indicateur souris de scroll retiré, remplacé par les barres du slider) */ /* ============================================================================= STATS ========================================================================== */ /* retour client : plus de trait horizontal sous le bloc */ .stats { } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: 6px 0 6px 28px; position: relative; } /* retour client : séparateurs verticaux épaissis */ .stat + .stat::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: var(--ink); } .stat:first-child { padding-left: 0; } .stat__num { display: block; font-family: var(--font-title); font-size: clamp(42px, 5.4vw, 68px); font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--stat-color); font-variant-numeric: tabular-nums; white-space: nowrap; /* garde le « € » sur la même ligne que le chiffre */ } .stat__label { margin-top: 16px; font-size: 13px; color: var(--ink-soft); } /* ============================================================================= PROJETS (grayscale -> couleur + preview qui suit la souris) ========================================================================== */ .projects__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .projects__title { font-family: var(--font-title); font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.01em; } .proj-list { border-top: 1px solid var(--line); } .project-row { display: grid; grid-template-columns: 66px 34px minmax(160px, 1fr) 200px 150px 58px; align-items: center; gap: 22px; padding: 22px 6px 22px 14px; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; } .project-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); } .project-row:hover::before { transform: scaleY(1); } .project-row__thumb { width: 66px; height: 46px; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter 0.6s var(--ease), transform 0.6s var(--ease); } .project-row:hover .project-row__thumb { filter: grayscale(0) contrast(1); transform: scale(1.04); } .project-row__idx { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .project-row__name { font-size: clamp(18px, 2vw, 23px); font-weight: 400; letter-spacing: -0.01em; transition: transform 0.5s var(--ease), color 0.4s var(--ease); } .project-row:hover .project-row__name { transform: translateX(12px); color: var(--accent); } .project-row__meta { font-size: 13px; color: var(--ink-soft); } .project-row__year { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } /* la vignette qui suit le curseur */ .cursor-preview { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(230px, 22vw, 320px); aspect-ratio: 4 / 3; pointer-events: none; transform: translate3d(var(--px, -400px), var(--py, -400px), 0); } .cursor-preview__inner { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(0.86) rotate(-3deg); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease); box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.5); } .cursor-preview.is-active .cursor-preview__inner { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } .cursor-preview img { width: 100%; height: 100%; object-fit: cover; } /* --- grille "déstructurée" de projets (variante VERT) -------------------- */ .pgrid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(84px, 8vw, 150px); gap: 14px; grid-template-areas: 'a a a b b b' 'a a a b b b' 'a a a c c d' 'e e f c c d' 'e e f g g g' 'h h f g g g' 'h h i i j j'; } .pgrid__item { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .pgrid__media { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg-soft); } .pgrid__item:nth-child(1) { grid-area: a; } .pgrid__item:nth-child(2) { grid-area: b; } .pgrid__item:nth-child(3) { grid-area: c; } .pgrid__item:nth-child(4) { grid-area: d; } .pgrid__item:nth-child(5) { grid-area: e; } .pgrid__item:nth-child(6) { grid-area: f; } .pgrid__item:nth-child(7) { grid-area: g; } .pgrid__item:nth-child(8) { grid-area: h; } .pgrid__item:nth-child(9) { grid-area: i; } .pgrid__item:nth-child(10) { grid-area: j; } .pgrid__item img { width: 100%; height: 100%; object-fit: cover; /* retour client : images en couleur (plus de filtre gris) */ transition: transform 0.9s var(--ease); } .pgrid__item:hover img { transform: scale(1.04); } /* retour client accueil : titre SUR l'image (effet tableau), plus de légende dessous. Visible en permanence sur tactile, révélé au survol sur desktop. */ .pgrid__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 34px 16px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0)); pointer-events: none; } .pgrid__name { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: #fff; } .pgrid__city { font-size: 12px; color: rgba(255, 255, 255, 0.82); } /* desktop uniquement : titre masqué puis révélé au survol. En dessous de 901px (mode slider mobile) le titre reste toujours visible. */ @media (hover: hover) and (pointer: fine) and (min-width: 901px) { .pgrid__cap { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); } .pgrid__item:hover .pgrid__cap, .pgrid__item:focus-visible .pgrid__cap { opacity: 1; transform: none; } } /* mobile / tablette : la grille devient un slider horizontal (swipe) */ @media (max-width: 900px) { .pgrid { display: flex; grid-template-areas: none; grid-auto-rows: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .pgrid::-webkit-scrollbar { display: none; } .pgrid__item { grid-area: auto; flex: 0 0 80%; scroll-snap-align: start; } .pgrid__media { aspect-ratio: 4 / 3; flex: none; } } /* ============================================================================= NOTRE ACTIVITÉ (section sombre) ========================================================================== */ .activity { background: var(--activity-bg); color: #f2f2ee; /* vert plus clair pour les filets/accents sur ce fond vert foncé */ --accent: #5aa863; } .activity__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 6vw, 90px); align-items: start; } .activity__label .eyebrow { color: rgba(255, 255, 255, 0.62); } /* retour client : le trait sous « Domaines d'interventions » passe en blanc */ .activity__label-line { width: 36px; height: 2px; background: #fff; margin-top: 14px; } .activity__statement { font-size: clamp(20px, 2.5vw, 31px); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; /* retour client : « projet, » ne doit plus décrocher -> 4 lignes max */ max-width: 38ch; } /* retour client : bloc plus compact, visible en entier sur un écran 16" */ .activity__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 40px); /* retour client : moins d'espace entre la phrase et les thématiques */ margin-top: clamp(16px, 2vw, 26px); padding-top: clamp(14px, 1.8vw, 22px); border-top: 1px solid rgba(255, 255, 255, 0.16); grid-column: 1 / -1; } .acol { display: block; position: relative; transition: transform 0.4s var(--ease); } /* retour client : traits verticaux (comme les chiffres clés) devant Logement et Industrie */ .acol + .acol::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: calc(clamp(22px, 2.6vw, 40px) * -0.5); width: 3px; background: rgba(255, 255, 255, 0.6); } .acol:hover { transform: translateY(-3px); } .acol:hover .acol__title { color: var(--accent); } .acol__idx { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; } .acol__title { font-family: var(--font-title); margin-top: 18px; font-size: 18px; font-weight: 700; } .acol__text { margin-top: 14px; font-size: 14px; line-height: 1.65; color: rgba(242, 242, 238, 0.62); } /* ============================================================================= NOTRE ÉQUIPE ========================================================================== */ .team__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .team__title { font-family: var(--font-title); font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.01em; } .team__intro { max-width: 46ch; margin-top: 28px; color: var(--ink-soft); font-size: 15px; } /* mise en page « portraits » (variante verte) */ .portraits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); margin-top: clamp(38px, 5vw, 64px); } .portrait figure { margin: 0; overflow: hidden; } .portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.03); transition: filter 0.7s var(--ease), transform 1s var(--ease); } .portrait:hover img { filter: grayscale(0) contrast(1); transform: scale(1.04); } .portrait__name { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 16px; font-weight: 500; } .portrait__role { margin-top: 4px; font-size: 13px; color: var(--muted); } /* mise en page « groupe » (variante noire) */ .team-group { margin-top: clamp(38px, 5vw, 64px); overflow: hidden; } .team-group img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; transition: transform 1.2s var(--ease); } .team-group:hover img { transform: scale(1.02); } .team-names { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); margin-top: 30px; } .team-names__name { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; } .team-names__role { margin-top: 4px; font-size: 13px; color: var(--muted); } /* ============================================================================= PAGE AGENCE ========================================================================== */ .agence-hero { padding-top: calc(86px + clamp(20px, 4vw, 46px)); } .agence-hero__title { font-family: var(--font-title); font-size: clamp(30px, 4.5vw, 52px); /* retour client : même taille que Projets / Contact */ font-weight: 500; letter-spacing: -0.015em; } .agence-hero__lede { max-width: 56ch; margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(16px, 1.7vw, 20px); color: var(--ink-soft); line-height: 1.55; } .agence-group { margin: clamp(30px, 5vw, 58px) 0 0; overflow: hidden; background: var(--bg-soft); } .agence-group img { width: 100%; aspect-ratio: 2 / 1; max-height: 72vh; object-fit: cover; } .agence-history { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(24px, 5vw, 80px); align-items: start; } .agence-history__rule { width: 36px; height: 2px; background: var(--accent); margin-top: 14px; } .agence-history__body p { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.62; color: var(--ink-soft); } .agence-history__body p + p { margin-top: 18px; } /* retour client : crédit fondateurs en texte simple sous « Notre histoire » */ .agence-founders-credit { margin-top: clamp(22px, 2.6vw, 32px); max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--muted); } .agence-founders-credit strong { color: var(--ink); font-weight: 600; } .agence-history__philo { color: var(--ink) !important; font-family: var(--font-title); font-size: clamp(19px, 2.2vw, 26px) !important; line-height: 1.4 !important; margin-top: clamp(24px, 3vw, 36px) !important; } .agence-team__title { font-family: var(--font-title); font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -0.01em; margin-bottom: clamp(26px, 3.4vw, 40px); } .agence-team .section-head { margin-bottom: clamp(24px, 3.2vw, 38px); } /* 2e partie du texte agence, placée après l'équipe. Retour client : sur deux colonnes pour occuper toute la largeur (plus de vide). */ .agence-after { margin: clamp(36px, 5vw, 60px) 0 0; columns: 2; column-gap: clamp(34px, 5vw, 76px); } .agence-after__p { break-inside: avoid; margin: 0 0 18px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.62; color: var(--ink-soft); } .agence-after__lead { color: var(--ink); font-family: var(--font-title); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.38; font-weight: 500; } @media (max-width: 720px) { .agence-after { columns: 1; } } .agence-team__title--sub { margin-top: clamp(50px, 7vw, 94px); } .assoc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); } .assoc__photo { overflow: hidden; background: var(--bg-soft); } .assoc__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter 0.6s var(--ease), transform 0.9s var(--ease); } .assoc:hover .assoc__photo img { filter: grayscale(0) contrast(1); transform: scale(1.03); } .assoc__name { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 17px; font-weight: 600; } .assoc__role { margin-top: 4px; font-size: 13px; color: var(--muted); } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: clamp(18px, 2.6vw, 32px) clamp(14px, 2vw, 24px); align-items: start; } .team-member { margin: 0; } .team-member__photo { overflow: hidden; background: var(--bg-soft); } .team-member__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter 0.6s var(--ease), transform 0.9s var(--ease); } .team-member:hover .team-member__photo img { filter: grayscale(0) contrast(1); transform: scale(1.04); } .team-member__name { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 14px; font-weight: 500; color: var(--ink); } .team-member.is-associate .team-member__name { font-weight: 600; } .team-member__role { margin-top: 3px; font-size: 12px; color: var(--muted); } /* portrait manquant : monogramme aux initiales */ .team-member__monogram { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: var(--accent-soft); color: var(--accent); font-family: var(--font-title); font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: 0.02em; } /* liste des anciens */ .agence-team__title--anciens { margin-top: clamp(50px, 7vw, 88px); } /* retour client : texte simple, étendu sur toute la largeur et aligné à droite (justifié) */ .agence-anciens { margin: 0; max-width: none; font-size: 15px; line-height: 1.95; color: var(--ink-soft); text-align: justify; } @media (max-width: 820px) { .agence-history { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 560px) { .assoc-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================================= PAGES LÉGALES ========================================================================== */ .legal { padding-top: calc(86px + clamp(20px, 4vw, 44px)); padding-bottom: clamp(56px, 8vw, 100px); } .legal__title { font-family: var(--font-title); font-size: clamp(30px, 5vw, 52px); font-weight: 500; letter-spacing: -0.015em; margin-top: 10px; } .legal__updated { margin-top: 12px; font-size: 13px; color: var(--muted); } .legal__body { max-width: 72ch; margin-top: clamp(30px, 4vw, 50px); } .legal__body h2 { font-family: var(--font-title); font-size: clamp(18px, 2vw, 23px); font-weight: 500; margin-top: clamp(30px, 4vw, 46px); margin-bottom: 12px; color: var(--ink); } .legal__body p, .legal__body li { font-size: 15px; line-height: 1.72; color: var(--ink-soft); } .legal__body p + p { margin-top: 14px; } .legal__body ul { margin: 0; padding-left: 1.25em; } .legal__body li { margin-top: 6px; } .legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal__fill { background: var(--accent-soft); color: var(--ink); padding: 1px 6px; border-radius: 3px; font-style: italic; font-size: 0.94em; } /* ============================================================================= PAGE CONTACT ========================================================================== */ .contact-page { padding-top: calc(86px + clamp(20px, 4vw, 44px)); padding-bottom: clamp(56px, 8vw, 100px); } .contact-page__title { font-family: var(--font-title); font-size: clamp(30px, 4.5vw, 52px); font-weight: 500; letter-spacing: -0.015em; } .contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 72px); margin-top: clamp(34px, 5vw, 58px); align-items: start; } .contact-block + .contact-block { margin-top: 26px; } .contact-block h2 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .contact-block p { font-size: 16px; line-height: 1.5; color: var(--ink); } .contact-block a { color: var(--ink); transition: color 0.3s var(--ease); } .contact-block a:hover { color: var(--accent); } .contact-form { display: flex; flex-direction: column; gap: 18px; } .contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-soft); } .contact-form input, .contact-form textarea { font: inherit; font-size: 15px; color: var(--ink); padding: 12px 14px; border: 1px solid var(--line-strong); background: #fff; transition: border-color 0.3s var(--ease); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); } .contact-form textarea { resize: vertical; } .contact-form__btn { align-self: flex-start; background: var(--accent); color: #fff; padding: 13px 30px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .contact-form__btn:hover { transform: translateY(-2px); } .contact-form__note { font-size: 12px; color: var(--muted); } @media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } } /* ============================================================================= PAGE 404 ========================================================================== */ .notfound { min-height: 72vh; display: flex; align-items: center; text-align: center; padding-top: calc(86px + clamp(28px, 6vw, 60px)); padding-bottom: clamp(50px, 8vw, 90px); } .notfound .container { width: 100%; } .notfound__code { font-family: var(--font-title); font-size: clamp(84px, 18vw, 200px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--accent); } .notfound__title { font-family: var(--font-title); font-size: clamp(26px, 4vw, 44px); font-weight: 500; letter-spacing: -0.01em; margin-top: 12px; } .notfound__text { margin-top: 16px; font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-soft); } .notfound__actions { margin-top: clamp(28px, 4vw, 42px); display: flex; gap: 16px 28px; justify-content: center; align-items: center; flex-wrap: wrap; } .notfound__btn { background: var(--accent); color: #fff; padding: 13px 30px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; transition: transform 0.3s var(--ease); } .notfound__btn:hover { transform: translateY(-2px); } .notfound__link { font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .notfound__link:hover { color: var(--ink); border-color: var(--ink); } /* ============================================================================= CONTACT ========================================================================== */ .contact__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; } .contact__kicker { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .contact__title { font-family: var(--font-title); font-weight: 700; font-size: clamp(52px, 9vw, 116px); line-height: 0.98; letter-spacing: -0.02em; margin-top: 24px; } .contact__side { text-align: right; padding-bottom: 12px; } .contact__email { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(16px, 1.6vw, 19px); padding-bottom: 10px; border-bottom: 1px solid var(--ink); transition: gap 0.4s var(--ease), color 0.3s var(--ease); } .contact__email svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); } .contact__email:hover { color: var(--accent); } .contact__email:hover svg { transform: translateX(6px); } .contact__addr { margin-top: 18px; font-size: 13px; color: var(--muted); } /* ============================================================================= FOOTER ========================================================================== */ .footer { background: var(--activity-bg); color: rgba(255, 255, 255, 0.82); --accent: #5aa863; } .footer .container { padding-top: clamp(38px, 4.6vw, 58px); } .footer__head { color: rgba(255, 255, 255, 0.92); } .footer__kicker { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .footer__talk { display: inline-block; margin-top: 14px; font-family: var(--font-title); font-weight: 700; font-size: clamp(38px, 6vw, 74px); line-height: 0.98; letter-spacing: -0.02em; color: #fff; transition: color 0.3s var(--ease); } .footer__talk:hover { color: var(--accent); } /* coordonnées façon Coldefy (prêt pour une 2e adresse) */ /* coordonnées façon Coldefy : ville en gros titre, tél sous l'adresse, colonnes séparées */ .footer__grid { display: flex; flex-wrap: wrap; align-items: stretch; /* retour client : colonnes davantage espacées */ gap: 30px clamp(60px, 9vw, 120px); padding-block: clamp(28px, 3.6vw, 44px); } .footer__col { min-width: 140px; } /* retour client : « tricher » l'espacement de la colonne Navigation pour que le dernier lien s'aligne avec le LinkedIn de la colonne Lille */ /* retour client : colonne Navigation sans titre, poussée tout à droite et alignée à droite (au niveau de « Confidentialité ») */ .footer__col--nav { display: flex; flex-direction: column; margin-left: auto; text-align: right; } .footer__navlinks { display: flex; flex-direction: column; } .footer__col-title { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 14px; } .footer__col p, .footer__col a { display: block; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); } .footer__col a { transition: color 0.3s var(--ease); } .footer__col a:hover { color: #fff; } .footer__tel { margin-top: 8px; } .footer__logo { width: 108px; height: 30px; background-color: #fff; /* logo blanc sur le footer sombre */ } /* bas : logo + mentions légales */ .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .footer__bottom-right { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.42); } .footer__legal { display: flex; gap: 24px; } .footer__legal a:hover { color: rgba(255, 255, 255, 0.82); } /* ============================================================================= SÉLECTEUR DE VARIANTE (chrome de démo, retirable) ========================================================================== */ .variant-switch { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(20, 20, 20, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(14px); animation: switchIn 0.7s var(--ease) 0.9s forwards; } @keyframes switchIn { to { opacity: 1; transform: none; } } .variant-switch__label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); padding-left: 12px; padding-right: 4px; } .variant-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: 12px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.7); transition: background 0.3s var(--ease), color 0.3s var(--ease); } .variant-switch a .dot { width: 9px; height: 9px; border-radius: 50%; } .variant-switch a[data-active='true'] { background: rgba(255, 255, 255, 0.12); color: #fff; } .variant-switch a:hover { color: #fff; } /* ============================================================================= LOGO LINKEDIN À CÔTÉ DES NOMS ========================================================================== */ .member-ln { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1px solid var(--line-strong); color: var(--muted); transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .member-ln svg { width: 12px; height: 12px; } .member-ln:hover { color: #fff; background: var(--accent); border-color: var(--accent); } /* ============================================================================= INTRO · rideau premium au chargement ========================================================================== */ .intro { display: none; } .js .intro { display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; } html.intro-active { overflow: hidden; } .intro__panels { position: absolute; inset: 0; display: flex; } .intro__panel { flex: 1 1 auto; height: 100%; background: var(--activity-bg); animation: introPanel 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards; animation-delay: calc(1.5s + var(--i, 0) * 0.08s); } .intro__panel:nth-child(1) { --i: 0; } .intro__panel:nth-child(2) { --i: 1; } .intro__panel:nth-child(3) { --i: 2; } .intro__panel:nth-child(4) { --i: 3; } .intro__panel:nth-child(5) { --i: 4; } @keyframes introPanel { to { transform: translateY(-101%); } } .intro__content { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; animation: introOut 0.5s ease forwards; animation-delay: 1.35s; } @keyframes introOut { to { opacity: 0; transform: translateY(-14px); } } .intro__logo { display: flex; gap: 0.02em; font-family: var(--font-title); font-weight: 700; font-size: clamp(44px, 9vw, 104px); letter-spacing: 0.14em; line-height: 1; color: #fff; } .intro__mask { display: inline-block; overflow: hidden; padding: 0.04em 0; } .intro__mask > span { display: inline-block; transform: translateY(120%); animation: introLetter 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .intro__mask:nth-child(1) > span { animation-delay: 0.16s; } .intro__mask:nth-child(2) > span { animation-delay: 0.25s; } .intro__mask:nth-child(3) > span { animation-delay: 0.34s; } .intro__mask:nth-child(4) > span { animation-delay: 0.43s; } @keyframes introLetter { to { transform: none; } } /* retour client : vrai logo blanc dans le sas d'entrée */ .intro__brand { /* retour client : logo net -> on ne dépasse pas la résolution native (280x78) du PNG */ width: clamp(180px, 34vw, 280px); height: clamp(50px, 9.5vw, 78px); background-color: #fff; opacity: 0; transform: translateY(24px); animation: introBrand 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.12s; } @keyframes introBrand { to { opacity: 1; transform: none; } } .intro__line { width: clamp(120px, 22vw, 260px); height: 2px; background: #fff; /* trait blanc sous le logo */ transform: scaleX(0); transform-origin: left; animation: introLine 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.62s; } @keyframes introLine { to { transform: scaleX(1); } } .intro__count { position: absolute; right: clamp(20px, 5vw, 64px); bottom: clamp(20px, 5vw, 54px); font-family: var(--font-title); font-weight: 500; font-size: 14px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.5); animation: introOut 0.5s ease forwards; animation-delay: 1.35s; } @media (prefers-reduced-motion: reduce) { .js .intro { display: none; } } /* ============================================================================= PAGE PROJETS (filtres + vues grille / liste) ========================================================================== */ .proj-page { padding-top: calc(86px + clamp(28px, 5vw, 56px)); padding-bottom: clamp(60px, 8vw, 110px); } .proj-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); } .proj-page__title { font-family: var(--font-title); font-size: clamp(30px, 4.5vw, 52px); font-weight: 500; letter-spacing: -0.01em; margin-top: 12px; } .proj-portfolio { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.02em; padding: 12px 20px; border: 1px solid var(--ink); color: var(--ink); transition: background 0.3s var(--ease), color 0.3s var(--ease); } .proj-portfolio:hover { background: var(--ink); color: var(--bg); } .proj-portfolio svg { width: 16px; height: 16px; } .proj-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: clamp(22px, 3vw, 38px); } .proj-filters { display: flex; flex-wrap: wrap; gap: 6px; } /* retour client : plus de « bouton » arrondi. Filtre actif = mot en gras encadré des crochets verts (clin d'œil au logo). */ .proj-filter { font-size: 14px; padding: 8px 4px; color: var(--ink-soft); transition: color 0.3s var(--ease); } .proj-filter:hover { color: var(--ink); } .proj-filter.is-active { color: var(--ink); font-weight: 700; } .proj-filter.is-active::before { content: '['; margin-right: 5px; color: var(--accent); font-weight: 700; } .proj-filter.is-active::after { content: ']'; margin-left: 5px; color: var(--accent); font-weight: 700; } /* sous-filtres (2e rang, ex : Logement -> Neuf / Réhabilitation) */ .proj-subfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 clamp(22px, 3vw, 34px); } .proj-subfilters[hidden] { display: none; } .proj-subfilter { font-size: 13px; padding: 6px 13px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .proj-subfilter:hover { color: var(--ink); border-color: var(--line-strong); } .proj-subfilter.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .proj-views { display: flex; gap: 6px; flex: none; } .proj-view { display: inline-grid; place-items: center; width: 38px; height: 34px; color: var(--muted); border: 1px solid var(--line); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .proj-view svg { width: 17px; height: 17px; } .proj-view.is-active { color: var(--ink); border-color: var(--ink); } .proj-card__media { display: block; overflow: hidden; background: var(--bg-soft); } .proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .proj-card:hover .proj-card__media img { transform: scale(1.04); } .proj-card__name { color: var(--ink); font-weight: 500; transition: color 0.3s var(--ease); } .proj-card:hover .proj-card__name { color: var(--accent); } /* badge statut (retour client : Livré / Chantier / Concours / Études) */ .proj-card__status { justify-self: start; width: fit-content; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .proj-card__status[data-status='livre'] { color: #2e7d38; background: rgba(60, 143, 67, 0.15); } .proj-card__status[data-status='chantier'] { color: #96640f; background: rgba(214, 158, 46, 0.18); } .proj-card__status[data-status='concours'] { color: #45526b; background: rgba(74, 85, 104, 0.13); } .proj-card__status[data-status='etudes'] { color: #6b6b66; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); } /* retour client : pas de statut en vue carrée (moins de blanc entre projets) */ .is-grille .proj-card__status { display: none; } .is-mosaique .proj-card__status { display: none; } /* garde les cartes filtrées masquées (sinon display:grid/flex écrase [hidden]) */ .proj-card[hidden] { display: none !important; } /* vue grille */ .proj-collection.is-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); /* retour client : espace vertical réduit entre les projets */ gap: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 26px); } .is-grille .proj-card { display: flex; flex-direction: column; } .is-grille .proj-card__media { aspect-ratio: 4 / 3; } .is-grille .proj-card__info { display: flex; flex-direction: column; gap: 2px; padding-top: 11px; } .is-grille .proj-card__name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is-grille .proj-card__meta { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is-grille .proj-card__cat, .is-grille .proj-card__year { display: none; } /* vue liste */ .proj-collection.is-liste { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .is-liste .proj-card { display: grid; grid-template-columns: minmax(0, 1fr) 150px 120px 104px 60px; align-items: center; gap: 24px; padding: 16px 4px; border-bottom: 1px solid var(--line); } /* retour client : pas d'images dans la vue liste (l'aperçu au survol reste) */ .is-liste .proj-card__media { display: none; } .is-liste .proj-card__info { display: contents; } .is-liste .proj-card__name { font-size: clamp(17px, 1.8vw, 20px); } .is-liste .proj-card__meta, .is-liste .proj-card__cat { font-size: 13px; color: var(--ink-soft); } .is-liste .proj-card__year { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } /* desktop (pointeur fin) : la photo suit le curseur, on retire la vignette inline */ @media (hover: hover) and (pointer: fine) { .is-liste .proj-card { grid-template-columns: minmax(0, 1fr) 150px 120px 104px 60px; } .is-liste .proj-card__media { display: none; } } /* vue mosaïque "déstructurée" ------------------------------------------------- Même composition que la grille de l'accueil (.pgrid) : 6 colonnes, rangées de même hauteur, et des tuiles de largeurs/hauteurs variables qui s'imbriquent. Différence : l'accueil a un gabarit figé dessiné pour 10 tuiles pile, alors qu'ici les filtres font varier le nombre. Les coordonnées de chaque tuile sont donc calculées en JS et posées dans --c / --r (voir ProjectsPage.astro). */ .proj-collection.is-mosaique { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(84px, 8vw, 150px); /* retour client : espace vertical élargi pour équilibrer l'horizontal */ gap: 26px 14px; } .is-mosaique .proj-card { display: flex; flex-direction: column; min-height: 0; grid-column: var(--c, auto); grid-row: var(--r, auto); } .is-mosaique .proj-card__media { flex: 1; min-height: 0; } /* retour client : nom + ville sur la même ligne (moins de blanc), typos distinctes */ .is-mosaique .proj-card__info { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0; padding: 9px 2px 0; } .is-mosaique .proj-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; } .is-mosaique .proj-card__meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink); } .is-mosaique .proj-card__meta::before { content: '·'; margin: 0 6px; color: var(--line-strong); } .is-mosaique .proj-card__cat, .is-mosaique .proj-card__year { display: none; } /* mobile : la composition imbriquée devient illisible, on repasse en colonnes régulières. Les coordonnées --c / --r sont neutralisées ici (elles viennent d'une variable, pas d'un style inline, donc cette règle peut les écraser). */ @media (max-width: 900px) { .proj-collection.is-mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .is-mosaique .proj-card { grid-column: auto; grid-row: auto; } .is-mosaique .proj-card__media { flex: none; aspect-ratio: 4 / 3; } } @media (max-width: 560px) { .proj-collection.is-mosaique { grid-template-columns: 1fr; } } .proj-empty { margin-top: 40px; color: var(--muted); font-size: 15px; } /* ============================================================================= FICHE PROJET (/projets/) ========================================================================== */ .proj-detail { padding-top: calc(86px + clamp(18px, 3vw, 34px)); padding-bottom: clamp(56px, 8vw, 100px); } .proj-detail__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.02em; color: var(--muted); transition: color 0.3s var(--ease); } .proj-detail__back svg { width: 16px; height: 16px; } .proj-detail__back:hover { color: var(--ink); } /* retour client : photo principale plus grande (2/3), infos à gauche en liste alignée à droite, contre la photo. */ .proj-detail__hero { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(38px, 5.2vw, 88px); align-items: start; margin-top: clamp(20px, 3vw, 34px); } .proj-detail__intro { min-width: 0; text-align: right; padding-right: clamp(8px, 1.5vw, 24px); } .proj-detail__title { font-family: var(--font-title); /* retour client : titre réduit pour tenir sur ~2 lignes */ font-size: clamp(24px, 2.8vw, 36px); font-weight: 500; letter-spacing: -0.015em; margin-top: 10px; } .proj-detail__desc { margin-top: 16px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); line-height: 1.55; } /* retour client : le nom du projet passe sous le titre (= la phrase descriptive) */ .proj-detail__name { margin-top: 12px; font-size: clamp(15px, 1.5vw, 18px); color: var(--muted); } /* aperçu (3 projets test) : 3 emplacements possibles pour une description longue */ .proj-preview { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: var(--ink-soft); } .proj-detail__main { min-width: 0; } /* emplacement amélioré : sous la photo, dans la colonne large, aligné à gauche */ .proj-preview--cover { margin-top: clamp(16px, 2vw, 24px); max-width: 66ch; } .proj-preview-band { margin: clamp(30px, 5vw, 60px) 0; } .proj-preview-band .proj-preview { max-width: 68ch; } .proj-detail__cover { margin: 0; overflow: hidden; background: var(--bg-soft); } .proj-detail__cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* infos en liste : « Label : Valeur » par ligne, alignées à droite (hérité) */ .proj-facts { display: flex; flex-direction: column; gap: 12px; margin: clamp(22px, 3vw, 32px) 0 0; padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid var(--line); } .proj-fact { font-size: 15px; line-height: 1.45; } .proj-fact dt { display: inline; color: var(--muted); } .proj-fact dt::after { content: ' : '; } .proj-fact dd { display: inline; margin: 0; color: var(--ink); font-weight: 500; } /* retour client : galerie jusqu'à 3 photos par ligne, pour plus de rythme */ /* retour client : la galerie alterne 2 et 3 photos par ligne pour le rythme */ .proj-gallery { display: flex; flex-wrap: wrap; gap: clamp(18px, 2vw, 22px); margin-top: clamp(18px, 3vw, 44px); margin-bottom: clamp(40px, 6vw, 76px); } .proj-gallery__item { margin: 0; flex: 1 1 calc(33.333% - 15px); /* défaut : ligne de 3 */ aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); } /* les 2 premières de chaque groupe de 5 -> ligne de 2 (plus larges) */ .proj-gallery__item:nth-child(5n + 1), .proj-gallery__item:nth-child(5n + 2) { flex-basis: calc(50% - 11px); } .proj-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); } .proj-gallery__item:hover img { transform: scale(1.03); } /* retour client : lightbox pour agrandir les images des fiches au clic */ .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 48px); background: rgba(14, 20, 15, 0.93); animation: lbFade 0.25s var(--ease); } .lightbox[hidden] { display: none; } @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } } .lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } .lightbox__close, .lightbox__nav { position: absolute; display: grid; place-items: center; color: #fff; background: none; border: none; cursor: pointer; opacity: 0.75; transition: opacity 0.2s var(--ease); } .lightbox__close:hover, .lightbox__nav:hover { opacity: 1; } .lightbox__close { top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); width: 46px; height: 46px; font-size: 32px; line-height: 1; } .lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 44px; line-height: 1; } .lightbox__nav--prev { left: clamp(6px, 2vw, 24px); } .lightbox__nav--next { right: clamp(6px, 2vw, 24px); } .proj-detail__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding-top: clamp(26px, 4vw, 42px); border-top: 1px solid var(--line); } .proj-detail__navlink { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .proj-detail__navlink--next { text-align: right; align-items: flex-end; } .proj-detail__navdir { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .proj-detail__navlink strong { font-family: var(--font-title); font-size: clamp(17px, 2vw, 22px); font-weight: 500; transition: color 0.3s var(--ease); } .proj-detail__navlink:hover strong { color: var(--accent); } @media (max-width: 860px) { .proj-detail__hero { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); } .proj-detail__intro { text-align: left; padding-right: 0; } } @media (max-width: 720px) { .proj-gallery__item, .proj-gallery__item:nth-child(5n + 1), .proj-gallery__item:nth-child(5n + 2) { flex-basis: 100%; aspect-ratio: 4 / 3; } .proj-detail__cover img { aspect-ratio: 4 / 3; } } @media (max-width: 720px) { .is-liste .proj-card { grid-template-columns: 1fr auto; gap: 16px; } .is-liste .proj-card__meta, .is-liste .proj-card__cat, .is-liste .proj-card__status { display: none; } .is-liste .proj-card__name { font-size: 16px; } } /* ============================================================================= RESPONSIVE ========================================================================== */ @media (max-width: 960px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; } .stat:nth-child(3) { padding-left: 0; } .stat:nth-child(3)::before { display: none; } .activity__grid { grid-template-columns: 1fr; gap: 28px; } .activity__cols { grid-template-columns: 1fr; gap: 32px; } .contact__inner { grid-template-columns: 1fr; align-items: start; } .contact__side { text-align: left; } } @media (max-width: 720px) { .nav-toggle { display: flex; } .nav { position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: var(--activity-bg); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease), visibility 0s linear 0.5s; z-index: 60; } .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); } .nav a:not(.nav__ln) { font-size: 26px; color: #fff; opacity: 1; padding-block: 4px; } .nav a:not(.nav__ln)::after { display: none; } .nav__ln { margin-top: 10px; color: #fff; border-color: rgba(255, 255, 255, 0.5); opacity: 1; } .project-row { grid-template-columns: 54px 1fr auto; gap: 16px; padding: 18px 6px; } .project-row__thumb { width: 54px; height: 40px; } .project-row__idx, .project-row__meta { display: none; } .project-row:hover .project-row__name { transform: none; } .portraits, .team-names { grid-template-columns: 1fr; gap: 34px; } } @media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } } /* ============================================================================= ACCESSIBILITÉ · mouvement réduit ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .hero__media img { transform: none; } } /* ------------------------------------------------------------------ */ /* WordPress : pages simples (légales) + 404 */ /* ------------------------------------------------------------------ */ .simple-page { padding: clamp(120px, 16vh, 200px) 0 clamp(60px, 9vw, 120px); } .simple-page__title { font-family: var(--font-title); font-size: clamp(30px, 4.5vw, 52px); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 clamp(24px, 3vw, 40px); } .simple-page__body { max-width: 70ch; color: var(--ink-soft); line-height: 1.7; } .simple-page__body h2 { font-family: var(--font-title); font-size: clamp(19px, 2.2vw, 26px); color: var(--ink); margin: 2em 0 .6em; } .simple-page__body h3 { font-size: 17px; color: var(--ink); margin: 1.6em 0 .4em; } .simple-page__body p { margin: 0 0 1em; } .simple-page__body a { color: var(--accent); text-decoration: underline; } .error-404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 140px 20px 90px; } .error-404__code { font-family: var(--font-title); font-size: clamp(72px, 16vw, 180px); font-weight: 700; line-height: .9; color: var(--accent); } .error-404__msg { margin: 18px 0 28px; font-size: clamp(16px, 2vw, 20px); color: var(--muted); }