/* ============================================================ LEFOLL Architecture — Styles v2 (refonte Benoit) Direction : éditoriale, sobre, élégante (portfolio d'architecte) Display : Cormorant Garamond (serif) · Labels/UI : Josefin Sans Palette : taupe #B5A48A · encre #1a1a1a · blanc cassé chaud ============================================================ */ :root { --ink: #1a1a1a; --ink-soft: #46423f; /* 9,9:1 — corps de texte en graisse 300 */ --muted: #6f675e; /* 5,6:1 — était #9a938a, soit 3,0:1 : illisible */ --taupe: #b5a48a; /* 2,4:1 — ACCENT DÉCORATIF UNIQUEMENT : filets, bordures, survols. Jamais en couleur de texte. */ --taupe-dk: #7d6e50; /* 5,0:1 — était #90805f, soit 3,9:1 */ --line: #e9e3d9; --bg: #ffffff; --bg-warm: #faf8f4; --noir: #0c0c0c; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Josefin Sans', sans-serif; --maxw: 1400px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Hauteurs des barres fixes : servent à la fois au calage du snap (scroll-padding) et au calcul de l'écran plein d'une rangée. */ --nav-h: 116px; --catnav-h: 80px; /* Bande basse de la fiche projet : nom, crédit, localisation. Réservée explicitement, sinon la photo occupe toute la hauteur et la repousse sous le pli — le visiteur ne sait plus ce qu'il regarde. */ --projinfo-h: 4.75rem; } @media (max-width: 900px) { :root { --nav-h: 70px; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Rythme vertical « une rangée = un écran ». Le conteneur de défilement est le viewport : le snap se pose donc sur , et nulle part ailleurs (posé sur un conteneur sans overflow, il serait inerte). Scopé aux pages qui empilent des sections plein écran, pour ne pas imposer le snap au reste du site. scroll-padding-top compense la navbar fixe. */ html:has(.category-sections) { scroll-snap-type: y mandatory; scroll-padding-top: var(--nav-h); } /* Page catégorie : la barre des catégories reste collée sous la navbar, il faut donc décaler le snap d'autant, sinon elle est enfouie dessous au chargement. */ html:has(.project-strip) { scroll-snap-type: y mandatory; scroll-padding-top: calc(var(--nav-h) + var(--catnav-h)); } /* Le footer doit rester une cible de snap, sinon « mandatory » le rend inatteignable : le scroll serait toujours ramené vers la dernière section. */ html:has(.category-sections) .footer, html:has(.project-strip) .footer { scroll-snap-align: start; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-sans); font-weight: 300; color: var(--ink); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--taupe); color: #fff; } /* Labels / sur-titres : capitales fines espacées */ .eyebrow, .nav-link, .category-nav__link, .slideshow__cta, .project-strip__location, .agence__role, .contact-form label, .btn-back { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.24em; } /* Titres d'apparat : serif */ .slideshow__title, .project-strip__name, .project-gallery__info .project-strip__name, .contact-page h1, .legal-page h1, .carte-title, .agence__signature--name { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.01em; } /* Réservé aux lecteurs d'écran. La classe était employée sans être définie : le titre de « Tous nos projets » s'affichait donc en clair. */ .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; } /* ── Skip link ─────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 10000; padding: 0.8rem 1.5rem; background: var(--ink); color: #fff; font-size: 0.8rem; letter-spacing: 0.1em; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ── Loading indicator ─────────────────────────────────────── */ .loading-indicator { position: fixed; bottom: 16px; left: 16px; z-index: 9000; opacity: 0; transition: opacity 0.4s; pointer-events: none; } .loading-indicator.is-active { opacity: 0.5; } .loading-gear { animation: spin-gear 3s linear infinite; } @keyframes spin-gear { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ============================================================ NAVBAR — logo centré, liens répartis ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(10px); /* Pas de liseré sous le menu : le voile translucide suffit à détacher la barre du contenu, et un trait la referme inutilement. */ } .nav-container { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 1.1rem 2.5rem; gap: 5.5rem; /* l'espace qui entoure le logo */ } /* L'aération du menu se prend AUTOUR DU LOGO (gap du conteneur), pas entre les items : le logo respire, et les quatre entrées restent groupées deux à deux. Grand écran uniquement — sous 900 px, le hamburger prend le relais. */ .nav-left, .nav-right { display: flex; gap: 3rem; flex: 1; } .nav-left { justify-content: flex-end; } .nav-right { justify-content: flex-start; } .nav-link { font-size: 0.7rem; font-weight: 400; color: var(--ink); white-space: nowrap; position: relative; padding-bottom: 0.35rem; transition: color 0.35s var(--ease); } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--taupe); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav-link:hover { color: var(--taupe-dk); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav-link.is-active { color: var(--ink); } .nav-logo { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .nav-logo__img { height: 40px; width: auto; } .nav-logo__subtitle { font-family: var(--font-sans); font-size: 0.55rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.45rem; } .nav-logo__tagline { font-family: var(--font-sans); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--taupe-dk); margin-top: 0.2rem; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .mobile-menu { display: none; position: fixed; inset: 0; z-index: 1050; background: rgba(250, 248, 244, 0.98); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400; letter-spacing: 0.04em; color: var(--ink); transition: color 0.3s; } .mobile-menu a:hover { color: var(--taupe-dk); } @media (max-width: 900px) { .nav-left, .nav-right { display: none; } .hamburger { display: flex; } .nav-logo__subtitle, .nav-logo__tagline { display: none; } .nav-container { justify-content: space-between; padding: 0.9rem 1.5rem; } .nav-logo__img { height: 30px; } } /* Espace pour la navbar fixe */ body { padding-top: var(--nav-h); } /* ============================================================ PAGE SPLASH (signature) ============================================================ */ .splash { position: fixed; inset: 0; z-index: 2000; background: var(--bg-warm); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .splash__mark { display: flex; flex-direction: column; align-items: center; opacity: 0; animation: splash-reveal 1.8s var(--ease) forwards; } .splash__logo { max-width: 620px; width: 78vw; height: auto; } .splash__subtitle { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.28em; font-size: clamp(0.6rem, 1.5vw, 0.8rem); color: var(--ink-soft); margin-top: 1.3rem; } .splash__tagline { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.34em; font-weight: 600; font-size: clamp(0.62rem, 1.6vw, 0.84rem); color: var(--ink); margin-top: 0.55rem; } @keyframes splash-reveal { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } /* ============================================================ SLIDESHOW (accueil hero + sections + galerie) ============================================================ */ /* Le diaporama est une colonne : la photo prend toute la place restante, le titre s'inscrit dessous, dans le flux. Aucun fond peint : l'espace laissé libre par le cadrage d'origine est simplement le fond du site. */ .slideshow { position: relative; width: 100%; overflow: hidden; display: flex; flex-direction: column; } .slideshow__track { display: flex; flex: 1; min-height: 0; transition: transform 0.9s var(--ease); } /* Le slide est lui aussi une colonne : sur le hero, le titre vit À L'INTÉRIEUR du slide (une légende par catégorie) ; sur les sections, il est à côté du diaporama. Les deux cas fonctionnent avec la même règle. */ .slideshow__slide { flex: 0 0 100%; position: relative; height: 100%; display: flex; flex-direction: column; } /* Cadrage d'origine respecté (object-fit: contain) : la photo n'est jamais déformée ni recadrée, et occupe le maximum de place disponible. display:block sur — sans lui, l'élément reste inline et les dimensions seraient inertes. min-height:0 l'autorise à se comprimer sous sa taille de contenu : sans ça, l'image déborde et chasse le titre. */ .slideshow__slide picture { display: block; flex: 1; min-height: 0; width: 100%; } .slideshow__slide img { width: 100%; height: 100%; object-fit: contain; } /* Titre sous la photo, dans le flux, en encre sombre sur le fond du site. */ .slideshow__overlay { flex: 0 0 auto; padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.5rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.6rem); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; } .slideshow__overlay--link { cursor: pointer; } .slideshow__title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.04; font-style: italic; } .slideshow__cta { font-size: 0.7rem; font-weight: 400; color: var(--muted); position: relative; padding-bottom: 0.45rem; } .slideshow__cta::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--taupe); transition: left 0.45s var(--ease), right 0.45s var(--ease); } .slideshow__overlay:hover .slideshow__cta::after, .slideshow__cta:hover::after { left: 0; right: 0; } /* Flèches — disque hairline discret. Disque clair à flèche sombre : lisible aussi bien posé sur une photo que sur le fond du site (là où le cadrage d'origine laisse la place libre). */ .slideshow__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.82); border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 1.1rem; cursor: pointer; opacity: 0; transition: opacity 0.4s, background 0.3s, border-color 0.3s; backdrop-filter: blur(6px); } .slideshow:hover .slideshow__arrow { opacity: 0.8; } .slideshow__arrow:hover { opacity: 1; background: #fff; border-color: var(--taupe); } .slideshow__arrow--prev { left: 1.4rem; } .slideshow__arrow--next { right: 1.4rem; } .slideshow__placeholder { width: 100%; height: 100%; background: var(--bg-warm); } /* ── HERO accueil ── Un écran plein, cible de snap comme les sections. */ .slideshow--hero { height: calc(100dvh - var(--nav-h)); max-width: var(--maxw); margin: 0 auto; scroll-snap-align: start; scroll-snap-stop: always; } @media (max-width: 900px) { .slideshow--hero { max-width: none; margin: 0; } .slideshow__arrow { display: none; } } /* ============================================================ SECTIONS CATÉGORIES (accueil scroll) — chacune un diaporama Une rangée = un écran. Le scroll s'accroche sur chacune : on ne peut jamais s'arrêter entre deux (scroll-snap-stop: always). ============================================================ */ .category-section { position: relative; height: calc(100dvh - var(--nav-h)); overflow: hidden; /* Pas de liseré en tête de section : calée sous la barre, elle en dessinait un juste dessous — on croyait voir revenir celui du menu. */ scroll-snap-align: start; scroll-snap-stop: always; } .category-section picture { display: block; } .category-section picture, .category-section img { width: 100%; height: 100%; object-fit: contain; } /* ============================================================ PAGE CATÉGORIE (défilé projets) ============================================================ */ /* Collée sous la navbar : elle reste accessible alors que les bandes défilent en plein écran dessous. Hauteur fixe — le snap s'appuie dessus. */ .category-nav { position: sticky; top: var(--nav-h); z-index: 5; background: var(--bg); height: var(--catnav-h); display: flex; gap: clamp(1.2rem, 2.6vw, 2.8rem); justify-content: center; align-items: center; padding: 0 2rem; /* pas de liseré non plus ici : même parti pris que la navbar */ overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .category-nav::-webkit-scrollbar { display: none; } .category-nav__link { font-size: 0.66rem; font-weight: 400; color: var(--muted); position: relative; padding-bottom: 0.4rem; transition: color 0.35s var(--ease); } .category-nav__link:hover { color: var(--ink); } .category-nav__link.is-active { color: var(--ink); } .category-nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--taupe); } /* Une bande = un écran, photo au cadrage d'origine sur le fond du site, nom du projet en flux dessous (plus d'overlay blanc sur dégradé noir). */ .project-strip { position: relative; height: calc(100dvh - var(--nav-h) - var(--catnav-h)); overflow: hidden; display: flex; flex-direction: column; align-items: center; /* Pas de liseré en tête : la photo se pose sur le fond du site. */ scroll-snap-align: start; scroll-snap-stop: always; } .project-strip picture { display: block; flex: 1; min-height: 0; width: 100%; } .project-strip img { width: 100%; height: 100%; object-fit: contain; } /* Le bandeau se cale sur les bords de la PHOTO, pas sur ceux de l'écran. L'image est en `contain` : sa largeur rendue dépend de son rapport, et change d'une photo à l'autre. Un script la mesure et la reporte dans --photo-w ; tant qu'il n'a pas tourné, le bandeau occupe toute la largeur — le comportement d'avant, jamais une page cassée. */ .project-strip__info { flex: 0 0 auto; width: var(--photo-w, 100%); max-width: 100%; padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.4rem, 2.6vw, 2.2rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; color: var(--ink); } .project-strip__name { font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1; font-style: italic; } .project-strip__credit { flex: 1 1 auto; text-align: center; font-family: var(--font-sans); font-size: 0.7rem; font-style: italic; letter-spacing: 0.06em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-strip__location { font-size: 0.66rem; font-weight: 400; color: var(--muted); white-space: nowrap; } @media (max-width: 700px) { .project-strip__info { flex-wrap: wrap; gap: 0.3rem 1rem; padding-left: 1rem; padding-right: 1rem; } .project-strip__credit { flex-basis: 100%; text-align: left; order: 3; } } /* ============================================================ PAGE PROJET (galerie photos) ============================================================ */ .project-gallery { position: relative; height: calc(100dvh - var(--nav-h) - var(--projinfo-h)); } /* Quand la barre des catégories est présente, elle mange sa part de l'écran : sans ça la galerie déborde et un scroll vertical parasite apparaît. */ body:has(.category-nav) .project-gallery { height: calc(100dvh - var(--nav-h) - var(--catnav-h) - var(--projinfo-h)); } .project-gallery__scroller { height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } .project-gallery__scroller::-webkit-scrollbar { display: none; } /* Défilé horizontal inchangé — seul le fond noir disparaît : la photo est posée sur le fond du site, sa légende s'inscrit dessous dans le flux. */ .project-gallery__photo { flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; } .project-gallery__photo picture { display: block; flex: 1; min-height: 0; } .project-gallery__photo img { width: 100%; height: 100%; object-fit: contain; } .project-gallery__photo { align-items: center; } .project-gallery__info { /* Calé sur les bords de la photo, comme les bandes de la page catégorie. */ flex: 0 0 auto; width: var(--photo-w, 100%); max-width: 100%; padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.4rem, 2.6vw, 2.2rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; color: var(--ink); } /* Le crédit photographique rejoint le nom et la localisation : une seule ligne au bas de l'image, au lieu d'un bloc isolé plus bas dans la page. */ .project-strip__credit { flex: 1 1 auto; text-align: center; font-family: 'Josefin Sans', sans-serif; font-size: 0.72rem; font-style: italic; letter-spacing: 0.06em; color: #9a938a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 700px) { .project-gallery__info { flex-wrap: wrap; gap: 0.25rem 1rem; } .project-strip__credit { flex-basis: 100%; text-align: left; order: 3; } } @media (max-width: 900px) { .project-gallery__scroller { flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; } } /* Encart mission (non-villa) — verre dépoli + filet taupe. Il peut désormais se poser aussi bien sur la photo que sur le fond clair du site : le voile est assez dense pour que le texte blanc reste lisible dans les deux cas. */ .mission-overlay { position: absolute; bottom: 6rem; left: clamp(1.5rem, 4vw, 3.2rem); max-width: 460px; padding: 1.4rem 1.8rem; background: rgba(12,12,12,0.66); backdrop-filter: blur(8px); border-left: 2px solid var(--taupe); color: #fff; font-size: 0.92rem; line-height: 1.75; letter-spacing: 0.01em; font-weight: 300; } .mission-overlay p + p { margin-top: 0.4rem; } /* Crédit photo sous la galerie */ .project-credit { text-align: center; padding: 1.4rem 2rem; font-size: 0.78rem; color: var(--muted); font-family: var(--font-serif); font-style: italic; } /* ============================================================ PAGE AGENCE ============================================================ */ /* Intro en pleine largeur (bloc normal), PUIS les deux CV côte à côte dans LEUR PROPRE grille (`.agence__cv`) — jamais la même grille que l'intro : un item `grid-column:1/-1` mélangé à un `order` sur les autres items rend l'auto-placement imprévisible (constaté en prod le 2026-09-09 : Anna en haut, l'intro au milieu, Benoit en bas). Repli (ce fichier) : ordre du HTML déjà Anna-puis-Benoit. Contenu Cloud (agence.astro) : Anna avant Benoit vient d'un TRI au rendu, jamais d'une réécriture de son document — elle garde son ordre d'écriture dans son Cloud. Sous 900px (cf. bloc PAGES ANCRÉES plus bas, même seuil), une seule colonne. */ .agence { max-width: 880px; margin: clamp(4rem, 9vw, 7rem) auto; padding: 0 2rem; } .agence__intro { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400; line-height: 1.6; color: var(--ink-soft); text-align: justify; } .agence__intro-cta { margin-top: 1.8rem; color: var(--ink); font-style: italic; } .agence__cv { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); } .agence__profile { text-align: left; } /* Signature = partie manuscrite seule (image) ; barres + rôle = HTML. Alignée à gauche comme le reste de la colonne — plus de centrage systématique (PNG source retouchées avec une marge transparente propre, voir SESSION-ACTIVITY-LOG : l'ancien cadrage rognait au ras de l'encre). */ .agence__sign { display: block; margin-bottom: 1.8rem; } .agence__signature { display: block; width: auto; height: clamp(64px, 14vw, 88px); max-width: 100%; margin: 0; } .agence__role { display: inline-block; margin-top: 0.7rem; padding: 0.5rem 0.2rem; border-top: 1px solid var(--taupe); border-bottom: 1px solid var(--taupe); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; font-weight: 400; color: var(--taupe-dk); } .agence__bio { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.8; margin-bottom: 0.6rem; font-weight: 300; text-align: left; } @media (max-width: 900px) { .agence__cv { grid-template-columns: 1fr; row-gap: clamp(2.5rem, 6vw, 4.5rem); } } .agence__pdf { display: inline-block; margin-top: 1.4rem; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-dk); position: relative; padding-bottom: 0.35rem; } .agence__pdf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--taupe); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .agence__pdf:hover::after { transform: scaleX(1); } .agence__pdf--disabled { color: var(--muted); cursor: default; pointer-events: none; } /* ============================================================ PAGE CONTACT ============================================================ */ .contact-page { max-width: 880px; margin: clamp(4rem, 9vw, 7rem) auto; padding: 0 2rem; } .contact-page h1 { font-size: clamp(2.8rem, 5.5vw, 4.4rem); margin-bottom: 2.5rem; font-style: italic; } .contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; margin-bottom: 3.5rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.9; } .contact-info strong { color: var(--ink); display: block; margin-bottom: 0.6rem; font-weight: 400; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; } .contact-info a { border-bottom: 1px solid var(--line); transition: border-color 0.3s, color 0.3s; } .contact-info a:hover { color: var(--taupe-dk); border-color: var(--taupe); } .contact-form { display: flex; flex-direction: column; gap: 1.6rem; } .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } /* Libellés du formulaire : --muted (#9a938a) sur blanc à 0,62 rem donnait un contraste d'à peine 2,5:1 — sous le seuil lisible. --ink-soft monte à ~7:1. */ .contact-form label { font-size: 0.72rem; color: var(--ink-soft); display: block; margin-bottom: 0.5rem; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 0.7rem 0; border: none; border-bottom: 1px solid var(--line); font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); background: transparent; outline: none; transition: border-color 0.3s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--taupe); } .contact-form textarea { min-height: 130px; resize: vertical; } .contact-submit { align-self: flex-start; margin-top: 0.6rem; padding: 0.95rem 3.2rem; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; background: var(--ink); color: #fff; border: 1px solid var(--ink); cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease); } .contact-submit:hover { background: transparent; color: var(--ink); } @media (max-width: 600px) { .contact-form .form-row { grid-template-columns: 1fr; } } /* ============================================================ PAGE MENTIONS LÉGALES ============================================================ */ .legal-page { max-width: 820px; margin: clamp(4rem, 9vw, 7rem) auto; padding: 0 2rem; } .legal-page h1 { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: 3rem; font-style: italic; } .legal-page h2 { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-dk); margin: 3rem 0 1.1rem; } .legal-page p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.85; margin-bottom: 0.8rem; font-weight: 300; } .legal-page a { border-bottom: 1px solid var(--line); transition: border-color 0.3s, color 0.3s; } .legal-page a:hover { color: var(--taupe-dk); border-color: var(--taupe); } /* ============================================================ PAGE CARTE ============================================================ */ .carte-title { text-align: center; font-size: clamp(2.4rem, 4.5vw, 3.6rem); padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; font-style: italic; } /* ============================================================ BOUTONS / NAV BAS ============================================================ */ .btn-back { display: inline-block; font-size: 0.68rem; font-weight: 400; color: var(--ink); position: relative; padding-bottom: 0.4rem; transition: color 0.35s var(--ease); } .btn-back::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--taupe); transform: scaleX(0.4); transform-origin: left; transition: transform 0.4s var(--ease); } .btn-back:hover { color: var(--taupe-dk); } .btn-back:hover::after { transform: scaleX(1); } .nav-bottom { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 2rem 5rem; display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--noir); color: rgba(255,255,255,0.75); padding: clamp(3.5rem, 7vw, 5rem) 0 2.2rem; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 2.5rem; } .footer-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; margin-bottom: 3rem; } .footer-logo { height: 46px; width: auto; opacity: 0.92; } .footer-section h4 { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 1.1rem; color: rgba(255,255,255,0.55); } .social-links { display: flex; gap: 1rem; } .social-links a { transition: opacity 0.3s; opacity: 0.8; } .social-links a:hover { opacity: 1; } .footer-legal { display: flex; flex-direction: column; gap: 0.7rem; } .footer-legal a { color: rgba(255,255,255,0.72); font-size: 0.82rem; letter-spacing: 0.04em; transition: color 0.3s; } .footer-legal a:hover { color: #fff; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); } /* L'opacité se cumulait à celle du pied (0,75 × 0,5 = 0,375) : le copyright tombait à 3,7:1. On fixe la couleur plutôt que d'empiler des opacités. */ .footer-bottom p { font-size: 0.72rem; color: rgba(255,255,255,0.68); letter-spacing: 0.04em; } .footer-hosted { margin-top: 0.3rem; } .footer-hosted a { color: rgba(255,255,255,0.78); } @media (max-width: 768px) { .footer-content { flex-direction: column; align-items: center; text-align: center; } } /* ============================================================ PAGES ANCRÉES — /agence et /contact Le pied de page reste à sa place, seul le corps défile. Sur ces deux pages courtes, le pied fait partie de la composition : il ne se mérite pas au bout d'un défilement. Sous 900 px la hauteur manque — la page redevient normale. ============================================================ */ body:has(.page-ancree) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } .page-ancree { flex: 1 1 auto; min-height: 0; overflow-y: auto; } body:has(.page-ancree) .footer { flex: 0 0 auto; padding: clamp(2rem, 4vw, 3rem) 0 1.6rem; } body:has(.page-ancree) .footer-content { margin-bottom: 1.8rem; } body:has(.page-ancree) .agence, body:has(.page-ancree) .contact-page { margin-block: clamp(2.5rem, 6vw, 4.5rem); } @media (max-width: 900px) { body:has(.page-ancree) { height: auto; overflow: visible; display: block; } .page-ancree { overflow: visible; } body:has(.page-ancree) .footer { padding: clamp(3.5rem, 7vw, 5rem) 0 2.2rem; } }