/* ============================================================ Apidom Studio — feuille de style Fond clair, encre noire, vert électrique en accent seulement (points, survols, le nom du studio). Inter partout, graisses légères. ============================================================ */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-var.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-var-italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { --noir: #000; --blanc: #fff; --vert: #33ee00; --fond: #f4f4f1; /* blanc cassé de la page */ --carte: #fff; /* cartes posées sur le fond */ --encre: #0b0b0b; /* texte */ --gris: #7b7b78; /* texte secondaire */ --gris-clair: #e8e8e4; /* surfaces d'attente (images) */ --gris-fonce: #141414; --ligne: rgba(0, 0, 0, .12); --rayon: 28px; /* arrondi des cartes */ --marge: clamp(20px, 4.5vw, 72px); --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Plus de monospace : les libellés système sont en Inter, espacés. */ --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(.16, 1, .3, 1); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Arrivée sur une ancre : on se place directement sur la section, sans trajet animé (classe posée dans ). */ html.arrivee-ancre { scroll-behavior: auto; } /* Les cibles d'ancre s'arrêtent sous la barre d'en-tête, pas dessous. */ #expertises, #projets, #terrain, #studio, #ia, #contact, #galerie { scroll-margin-top: 92px; } body { margin: 0; background: var(--fond); color: var(--encre); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--encre); color: var(--fond); } .hero-mot ::selection, .hero-mot::selection, .logo::selection, .logo ::selection { background: transparent; color: inherit; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } h1, h2, h3, p, ul, ol, dl, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea { font: inherit; color: inherit; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } a.sr:focus { width: auto; height: auto; clip: auto; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; background: var(--vert); color: var(--noir); } .mono { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .label { display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--encre); color: var(--fond); font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: transform .3s var(--ease), background .3s; } .btn:hover { background: var(--vert); color: var(--noir); } /* ---- Apparition au défilement ---- */ .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } } /* ============================================================ LOGO ============================================================ */ /* ---- Logo typographique, une ligne ---- */ .logo { display: inline-block; font-family: var(--sans); font-style: italic; font-weight: 900; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; white-space: nowrap; padding-right: .06em; } /* Le voyant vert du logo : 0,38 em, centré sur la hauteur des capitales d'Inter (0,727 em). L'élément vide est posé sur la ligne de base, puis remonté de (0,727 - 0,38) / 2 em. */ .logo-pt, .lettre-int.hero-pt { display: inline-block; width: .38em; height: .38em; padding: 0; margin: 0; border-radius: 50%; background: var(--vert); vertical-align: baseline; position: relative; bottom: .1735em; } .logo-pt { margin-right: .26em; } /* Dans l'en-tête, le voyant pulse lentement, comme les villes sur la carte. */ .barre-logo .logo-pt { animation: voyant 3.2s ease-in-out infinite; } @keyframes voyant { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } } @media (prefers-reduced-motion: reduce) { .barre-logo .logo-pt { animation: none; } } /* ============================================================ EN-TÊTE Une seule barre en verre dépoli dont les extrémités penchées reprennent l'italique du logo. Logo à gauche, liens dans l'ordre de la page, Contact en bouton plein. Absente tout en haut de l'accueil, elle arrive avec son fond en verre dès que le défilement commence (lisible au-dessus des grandes lettres du hero). ============================================================ */ .barre { /* Débord : la barre dépasse franchement des cartes de contenu, de chaque côté. Le padding compense pour que le logo reste aligné sur le bord des cartes. */ --debord: clamp(18px, 2.6vw, 44px); position: fixed; top: 14px; left: max(8px, calc(var(--marge) - var(--debord))); right: max(8px, calc(var(--marge) - var(--debord))); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px calc(clamp(18px, 2.2vw, 34px) + var(--debord)); color: var(--encre); isolation: isolate; transition: transform .55s var(--ease), color .4s; } .barre::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .75); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-radius: 3px; /* Ombre très légère : détache les extrémités qui débordent sur le fond clair de la page. */ box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .06); transform: skewX(-11deg); transition: opacity .4s; } .barre-logo { font-size: 20px; transition: opacity .5s var(--ease), transform .5s var(--ease); } .barre-liens { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); } .barre-lien { position: relative; padding: 9px 0; font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: .55; transition: opacity .3s; } .barre-lien:hover, .barre-lien.actif, .barre-lang { opacity: 1; } /* Progression de lecture : le trait se remplit pendant que l'on traverse la section. */ .barre-lien[data-spy]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(var(--p, 0)); transform-origin: left center; } .barre-fleche { font-size: 18px; padding: 4px 6px; } /* Contact : seul bouton plein, boîte penchée comme la barre. */ .barre-cta { display: inline-block; padding: 10px 18px; background: var(--encre); color: var(--fond); border-radius: 2px; transform: skewX(-11deg); transition: background .25s, color .25s; } .barre-cta span { display: inline-block; transform: skewX(11deg); font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; } .barre-cta:hover, .barre-cta.actif { background: var(--vert); color: var(--noir); } /* Tout en haut de l'accueil : pas de barre du tout, elle glisse en place dès que le défilement commence. */ html.en-haut .barre, html.au-pied .barre { transform: translateY(-170%); opacity: 0; pointer-events: none; } .barre { transition: transform .55s var(--ease), opacity .4s, color .4s; } /* Sur ordinateur la barre reste visible : c'est elle qui montre la progression. Sur mobile (pas de liens de section, place comptée) : masquée à la descente, de retour à la remontée. */ @media (max-width: 820px) { body.nav-cachee .barre { transform: translateY(-170%); } } @media (prefers-reduced-motion: reduce) { .barre { transition: none; } } @media (max-width: 820px) { .barre { top: 10px; padding: 7px 22px; gap: 12px; } .barre-logo { font-size: 17px; } .barre-lien[data-spy] { display: none; } /* page unique : le pouce fait le reste */ .barre-cta { padding: 9px 14px; } } @media (max-width: 560px) { /* Page projet : la navigation entre projets existe en bas de page, on garde logo, Contact et langue. */ .barre-liens > .barre-lien:not(.barre-lang) { display: none; } } /* Le pointeur natif disparaît sous la pastille « VOIR » (uniquement si le JS l'affiche). */ .curseur-js [data-cas] .cas-img, .curseur-js [data-cas] .cas-img * { cursor: none; } /* Curseur "VOIR" sur les projets (pointeur fin uniquement) */ .curseur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; padding: 14px 18px; border-radius: 999px; background: var(--encre); color: var(--fond); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; transform: translate(-50%, -50%) scale(0); will-change: transform; } @media (pointer: coarse) { .curseur { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--noir); } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-mot { position: relative; z-index: 2; font-family: var(--sans); font-style: italic; font-weight: 900; font-size: clamp(56px, 13vw, 300px); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; color: var(--blanc); text-align: center; user-select: none; white-space: nowrap; padding-right: .06em; /* compense l'italique */ } /* Deux lignes : APIDOM ferré à gauche, STUDIO ferré à droite, bloc centré. */ .hero-mot-txt { display: inline-flex; flex-direction: column; align-items: stretch; padding: 0 .12em; /* marge pour les débords des italiques et des rotations */ } .hero-l1 { text-align: left; } .hero-l2 { text-align: right; } /* Chaque lettre : une enveloppe pour l'entrée (CSS), un noyau pour la physique (JS). */ .lettre { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); } .hero.est-pret .lettre { opacity: 1; transform: none; } /* Le voyant du hero est une « lettre » comme les autres : il réagit lui aussi au curseur. */ .lettre-pt { margin-right: .24em; } .lettre-int { display: inline-block; will-change: transform; /* Boîte élargie (compensée par les marges) : l'italique et l'interligne serré font déborder les glyphes, sinon les calques composés les rognent. */ padding: .18em .1em; margin: -.18em -.095em; /* --hl (0..1) : teinte verte quand le balayage passe derrière la lettre. */ color: color-mix(in srgb, var(--vert) calc(var(--hl, 0) * 100%), var(--blanc)); text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 20px; } .hero-mot.vivant { cursor: pointer; } /* Signature du studio : troisième ligne du bloc-logo, sous « STUDIO » et ferrée à droite comme lui. L'enveloppe garde le corps du logo (ses retraits en em suivent donc le lettrage), le texte à l'intérieur est ramené à une petite capitale espacée. */ .hero-signature { /* flex : le texte devient un bloc, il n'hérite pas d'une boîte de ligne à la taille du logo */ display: flex; justify-content: flex-end; line-height: 0; margin-top: .12em; padding-right: .17em; /* aligne la fin du texte sur le bord droit du O de STUDIO */ /* Apparition par animation autonome (et non par une classe posée en JS) : si le script tarde ou échoue, la signature s'affiche quand même. */ animation: signature-entree 1.1s var(--ease) .8s both; } @keyframes signature-entree { from { opacity: 0; transform: translateY(.06em); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-signature { animation: none; } } .hero-signature span { display: block; line-height: 1; font-size: max(12px, .1em); font-style: normal; font-weight: 600; letter-spacing: .34em; margin-right: -.34em; /* annule l'espacement après la dernière lettre */ color: var(--blanc); text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .6); } /* Trame façon mur LED : un masque de pixels très fin (pas de 4 px, points d'un pixel). Au repos elle est en pur CSS, donc gratuite. Autour du curseur, trois zones rondes sont découpées dans cette trame (masque à bord net) et les mêmes points y sont redessinés par un canvas, qui les pousse, les fait grossir et onduler (voir main.js). Le pas et l'origine doivent rester identiques des deux côtés : 4 px, point au centre de la tuile. */ .hero-trame, .hero-trame-vive { position: absolute; inset: 0; pointer-events: none; } .hero-trame-vive { width: 100%; height: 100%; } .hero-trame { --r1: 0px; --r2: 0px; --r3: 0px; background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .62) 0 .75px, transparent 1.15px); background-size: 4px 4px; -webkit-mask-image: radial-gradient(circle at var(--x1, -999px) var(--y1, -999px), transparent calc(var(--r1) - 1px), #000 var(--r1)), radial-gradient(circle at var(--x2, -999px) var(--y2, -999px), transparent calc(var(--r2) - 1px), #000 var(--r2)), radial-gradient(circle at var(--x3, -999px) var(--y3, -999px), transparent calc(var(--r3) - 1px), #000 var(--r3)); mask-image: radial-gradient(circle at var(--x1, -999px) var(--y1, -999px), transparent calc(var(--r1) - 1px), #000 var(--r1)), radial-gradient(circle at var(--x2, -999px) var(--y2, -999px), transparent calc(var(--r2) - 1px), #000 var(--r2)), radial-gradient(circle at var(--x3, -999px) var(--y3, -999px), transparent calc(var(--r3) - 1px), #000 var(--r3)); -webkit-mask-composite: source-in; mask-composite: intersect; } /* Flèche de défilement : centrée, pastille verte pleine, qui monte et descend en continu. */ .hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: clamp(24px, 5vh, 48px); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--vert); color: var(--noir); font-size: 26px; line-height: 1; transform: translateX(-50%); animation: rebond 1.5s ease-in-out infinite; transition: background .25s, color .25s; } .hero-scroll:hover { background: var(--blanc); } @keyframes rebond { 0%, 100% { transform: translate(-50%, -7px); box-shadow: 0 0 0 0 rgba(51, 238, 0, .45); } 50% { transform: translate(-50%, 7px); box-shadow: 0 0 0 14px rgba(51, 238, 0, 0); } } @media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } } @media (max-width: 720px) { .hero-signature span { letter-spacing: .2em; margin-right: -.2em; } .hero-scroll { width: 54px; height: 54px; font-size: 23px; bottom: 30px; } } /* ============================================================ MOTS-CLÉS (savoir-faire) : un passage. Quatre bandes horizontales denses qui glissent latéralement au défilement, en sens alternés (JS). ============================================================ */ .mots { position: relative; padding: clamp(72px, 11vh, 150px) 0; /* respiration au-dessus et en dessous des bandes, plafonnée pour les grands écrans */ overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .mots-bande { overflow: hidden; padding: clamp(10px, 2.2vh, 28px) 0; /* interligne généreux : quatre lignes seulement */ } .mots-piste { display: flex; align-items: baseline; width: max-content; will-change: transform; } .mot-cle { display: block; font-weight: 300; font-size: clamp(34px, 6.3vw, 180px); line-height: 1.08; letter-spacing: -.035em; white-space: nowrap; padding: 0 .04em; } .mot-sep { display: block; width: .28em; height: .28em; margin: 0 clamp(18px, 2.4vw, 48px); border-radius: 999px; background: var(--vert); align-self: center; font-size: clamp(34px, 6.3vw, 180px); } .mot-cle-fort { font-weight: 500; } .mot-cle-gris { color: rgba(0, 0, 0, .3); } @media (prefers-reduced-motion: reduce) { .mots-piste { transform: none !important; } } /* ============================================================ MANIFESTE ============================================================ */ .manifeste { /* Plein écran sur un portable, mais plafonné : sur un grand écran la section suit la hauteur du texte au lieu d'ajouter du vide. */ min-height: min(100vh, 860px); display: flex; align-items: center; padding: clamp(80px, 13vh, 170px) var(--marge) clamp(56px, 8vh, 110px); } .manifeste-txt { /* Largeur en em : la colonne grandit avec le corps, le texte garde le même nombre de lignes et occupe la même part de l'écran à toutes les largeurs. */ max-width: 15.5em; font-weight: 300; font-size: clamp(28px, 4.6vw, 128px); line-height: 1.1; letter-spacing: -.025em; } .manifeste-txt .mot { display: inline-block; opacity: .18; transition: opacity .35s ease; } .manifeste-txt .mot.on { opacity: 1; } /* ============================================================ SECTIONS GÉNÉRIQUES ============================================================ */ section { position: relative; } .sec-tete { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 6vh, 72px); } .sec-tete h2, .ia h2, .contact-titre { font-weight: 300; font-size: clamp(26px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -.03em; } /* ============================================================ PROJETS ============================================================ */ .projets { padding: clamp(40px, 8vh, 100px) var(--marge) clamp(80px, 12vh, 160px); } .cas-grille { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 8vh, 96px); } .cas { display: block; } .cas-img { overflow: hidden; background: var(--gris-clair); border-radius: var(--rayon); aspect-ratio: 4 / 3; } .cas-plein .cas-img { aspect-ratio: 16 / 8; } .cas-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease), filter .6s; } .cas:hover .cas-img img { transform: scale(1.06); } .cas-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: var(--gris); } .cas-meta span:first-child { color: var(--encre); } .cas-titre { margin-top: 10px; font-weight: 500; font-size: clamp(20px, 2vw, 30px); line-height: 1.15; letter-spacing: -.025em; } /* Barre fine entre le client et le projet : « Valtech | Unlock, New York ». */ .sep-barre { display: inline-block; width: 1px; height: .78em; margin: 0 .5em; background: currentColor; opacity: .45; vertical-align: -.04em; } .cas-titre em { font-style: normal; font-weight: 300; color: var(--gris); } .cas-pitch { margin-top: 8px; max-width: 640px; color: var(--gris); font-size: 15px; } /* ---- Cartes « contenu sur l'image » (pleine largeur et miniatures) ---- Le texte est posé sur la photo, sur un voile qui monte du bas. Tout s'anime à l'entrée dans l'écran (voile, puis étiquettes une à une, titre, accroche) et repart à la sortie : vers le bas si la carte sort par le bas, vers le haut si elle sort par le haut (.sorti-haut). L'image glisse légèrement dans son cadre pendant le défilement (--py, posé en JS). */ .cas-sur .cas-img { position: relative; isolation: isolate; } .cas-sur .cas-img img { transform: translate3d(0, var(--py, 0%), 0) scale(1.12); transition: transform .9s var(--ease), filter .6s; } .cas-sur:hover .cas-img img { transform: translate3d(0, var(--py, 0%), 0) scale(1.16); } .cas-sur .cas-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 68%); opacity: 0; transform: translateY(18%); transition: opacity .7s var(--ease), transform .9s var(--ease); pointer-events: none; } .cas-sur-txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3vw, 48px); color: var(--blanc); --dy: 26px; } .cas-sur.sorti-haut .cas-sur-txt { --dy: -26px; } .cas-sur-txt > *, .cas-tech li { opacity: 0; transform: translateY(var(--dy)); transition: opacity .35s ease, transform .45s var(--ease); /* sortie : rapide, sans décalage */ } .cas-sur-txt > .cas-tech { opacity: 1; transform: none; } .cas-sur.vu .cas-img::after { opacity: 1; transform: none; } .cas-sur.vu .cas-sur-txt > *, .cas-sur.vu .cas-tech li { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); } .cas-sur.vu .cas-tech li { transition-delay: calc(.15s + var(--k, 0) * 70ms); } .cas-sur.vu .cas-titre { transition-delay: .42s; } .cas-sur.vu .cas-pitch { transition-delay: .54s; } .cas-tech { display: flex; flex-wrap: wrap; gap: 6px; } .cas-tech li { padding: 6px 11px 5px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .cas-sur .cas-titre { margin-top: clamp(10px, 1.4vw, 18px); font-size: clamp(22px, 3vw, 46px); font-weight: 500; } .cas-sur .cas-titre em { color: rgba(255, 255, 255, .78); } .cas-sur .cas-pitch { margin-top: 10px; color: rgba(255, 255, 255, .85); font-size: clamp(14px, 1.15vw, 17px); max-width: 620px; } .cas-mini.cas-sur .cas-sur-txt { padding: clamp(14px, 1.6vw, 24px); } .cas-mini.cas-sur .cas-titre { margin-top: 10px; font-size: clamp(17px, 1.5vw, 23px); } .cas-mini .cas-tech li { font-size: 9.5px; padding: 5px 9px 4px; } @media (max-width: 1100px) and (min-width: 761px) { .cas-mini .cas-tech li:nth-child(n+3) { display: none; } } @media (max-width: 760px) { .cas-sur .cas-pitch { display: none; } .cas-sur .cas-tech li:nth-child(n+4) { display: none; } } @media (prefers-reduced-motion: reduce) { .cas-sur .cas-img::after { opacity: 1; transform: none; transition: none; } .cas-sur-txt > *, .cas-tech li { opacity: 1; transform: none; transition: none; } .cas-sur .cas-img img { transform: none; } } /* Miniatures : trois projets sur une ligne (photo, catégorie, titre), nettement plus grands que les cartes du carrousel. */ .cas-minis { margin-top: clamp(56px, 9vh, 112px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vh, 48px) clamp(16px, 2.4vw, 32px); } .cas-mini .cas-img { border-radius: calc(var(--rayon) * .7); } .cas-mini .cas-meta { margin-top: 14px; } .cas-mini .cas-titre { margin-top: 8px; font-size: clamp(17px, 1.6vw, 24px); } @media (max-width: 760px) { .cas-minis { grid-template-columns: 1fr; } } /* Projets antérieurs : carrousel horizontal (défilement natif aimanté, flèches en JS). */ .archives { margin-top: clamp(64px, 10vh, 128px); } .archives-tete { display: flex; align-items: center; justify-content: flex-end; /* plus de titre : seules les flèches, à droite */ gap: 16px; margin-bottom: clamp(16px, 2.4vh, 28px); } .archives-fleches { display: flex; gap: 8px; } .archives.sans-fleches .archives-tete { display: none; } .archives-btn { width: 44px; height: 44px; border: 1px solid var(--ligne); border-radius: 999px; font-size: 17px; line-height: 1; transition: background .25s, color .25s, border-color .25s, opacity .25s; } .archives-btn:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); } .archives-btn:disabled { opacity: .3; pointer-events: none; } .archives-piste { display: flex; gap: clamp(16px, 2.4vw, 32px); margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--marge); scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; } .archives-piste::-webkit-scrollbar { display: none; } .archives-piste .cas { flex: 0 0 clamp(190px, 20vw, 300px); /* plus petites que les miniatures, même proportion d'image 4:3 */ scroll-snap-align: start; } .archives-piste .cas .cas-img { aspect-ratio: 4 / 3; } .archives-piste .cas-titre { font-size: clamp(15px, 1.15vw, 18px); } .archives-piste .cas-img { border-radius: calc(var(--rayon) * .6); } @media (max-width: 760px) { .cas-grille { grid-template-columns: 1fr; } .archives-piste .cas { flex-basis: 56vw; } .cas-plein .cas-img, .cas-img { aspect-ratio: 4 / 3; } } /* ============================================================ TERRAIN (villes) ============================================================ */ /* Roue de villes façon sélecteur iOS : chaque ligne est mise à l'échelle et éclaircie selon sa distance au centre de l'écran (JS). */ .terrain { position: relative; padding: clamp(60px, 10vh, 120px) var(--marge) 34vh; text-align: center; } .terrain .label { position: relative; z-index: 2; text-align: left; } /* Carte d'Amérique du Nord en points : l'enveloppe couvre toute la section, l'intérieur reste collé au centre de l'écran pendant qu'on fait défiler la roue. */ .terrain-carte { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .terrain-carte-int { position: sticky; top: 8vh; height: 84vh; display: flex; align-items: center; justify-content: center; } .carte { width: min(100%, 78vh * 1.2, 1100px); height: auto; display: block; } .carte-pts { fill: rgba(0, 0, 0, .17); } .carte-ville { fill: var(--vert); transform-box: fill-box; transform-origin: center; animation: pouls 2.8s ease-in-out infinite; } .carte-ville:nth-child(2) { animation-delay: .4s; } .carte-ville:nth-child(3) { animation-delay: .8s; } .carte-ville:nth-child(4) { animation-delay: 1.2s; } .carte-ville:nth-child(5) { animation-delay: 1.6s; } .carte-ville:nth-child(6) { animation-delay: 2s; } .carte-ville:nth-child(7) { animation-delay: 2.4s; } .carte-ville:nth-child(8) { animation-delay: 1s; } .carte-ville:nth-child(9) { animation-delay: 1.4s; } @keyframes pouls { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.5); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .carte-ville { animation: none; } } .villes { position: relative; z-index: 1; margin-top: 26vh; perspective: 1100px; perspective-origin: 50% 50%; } .villes li { display: block; padding: clamp(4px, .8vh, 12px) 0; transform-origin: 50% 50%; will-change: transform, opacity; transition: color .3s; } .ville { display: inline-block; font-weight: 300; font-size: clamp(44px, 9vw, 160px); line-height: 1; letter-spacing: -.035em; padding: 0 .04em; white-space: nowrap; } /* Dernière ligne : l'invitation, en vert, cliquable vers le contact, détachée de la dernière ville. Au survol : pastille verte et texte blanc, comme le mot tournant du titre contact. */ .ville-suite { margin-top: clamp(20px, 4vh, 56px); } .ville-suite .ville { color: #1fae00; font-style: italic; font-weight: 400; padding: .04em .32em .1em; border-radius: 999px; transition: background .3s, color .3s; } .ville-suite .ville:hover, .ville-suite .ville:focus-visible { background: var(--vert); color: var(--blanc); outline: none; } @media (prefers-reduced-motion: reduce) { .villes li { transform: none !important; opacity: 1 !important; } } /* ============================================================ EXPERTISES ============================================================ */ /* Expertises = titre + bandes de mots-clés + détail des quatre expertises. */ .exp { padding: clamp(32px, 6vh, 72px) var(--marge) clamp(80px, 12vh, 160px); } .exp-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: 28px; align-items: start; } .exp-item { position: relative; padding: clamp(20px, 3vh, 36px) 0; border-top: 1px solid var(--ligne); outline: none; cursor: pointer; } .exp-item:last-child { border-bottom: 1px solid var(--ligne); } /* L'expertise active glisse vers la droite et reçoit le voyant vert du logo, qui apparaît à l'emplacement laissé libre. Les autres restent en gris, alignées à gauche. */ .exp-item { --glisse: clamp(20px, 2.2vw, 36px); } .exp-item h3 { position: relative; font-weight: 300; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -.03em; color: var(--gris); /* Place réservée à droite en permanence : le glissement ne déborde pas et ne recompose pas le titre. */ padding-right: var(--glisse); transition: color .3s, transform .55s var(--ease); } .exp-item h3::before { content: ''; position: absolute; left: calc(-1 * var(--glisse)); top: .4em; /* centre de la première ligne (interligne 1,1) */ width: .3em; height: .3em; border-radius: 50%; background: var(--vert); transform: scale(0); transition: transform .45s var(--ease) .08s; } .exp-item.on h3, .exp-item:hover h3, .exp-item:focus-visible h3 { color: var(--encre); } .exp-item.on h3, .exp-item:focus-visible h3 { transform: translateX(var(--glisse)); } .exp-item.on h3::before, .exp-item:focus-visible h3::before { transform: scale(1); } .exp-item p { margin-top: 12px; max-width: min(560px, calc(100% - var(--glisse))); color: var(--gris); font-size: 15px; transition: color .3s, transform .55s var(--ease) .04s; } .exp-item.on p, .exp-item:focus-visible p { transform: translateX(var(--glisse)); color: #55554f; } @media (prefers-reduced-motion: reduce) { .exp-item h3, .exp-item h3::before, .exp-item p { transition: none; } } .exp-visuel { position: sticky; top: 96px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gris-clair); border-radius: var(--rayon); } .exp-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.4s var(--ease); } .exp-visuel img.on { opacity: 1; transform: none; } @media (max-width: 860px) { .exp-grille { grid-template-columns: 1fr; } .exp-visuel { display: none; } /* Sans visuel associé, il n'y a plus d'expertise « active » : pas de glissement, pas de voyant, pas d'espace réservé, et tous les titres à l'encre. */ .exp-item { --glisse: 0px; cursor: default; } .exp-item h3, .exp-item.on h3 { color: var(--encre); transform: none; } .exp-item p, .exp-item.on p { color: var(--gris); transform: none; } .exp-item h3::before { display: none; } } /* ============================================================ STUDIO (carte blanche) + CLIENTS ============================================================ */ .studio { margin: 0 var(--marge); background: var(--carte); border-radius: var(--rayon); padding: clamp(48px, 7vh, 96px) clamp(24px, 4vw, 64px) clamp(40px, 6vh, 72px); } .studio-txt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); } .studio-txt p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.45; font-weight: 300; letter-spacing: -.005em; } .studio-fort { font-weight: 500; } @media (max-width: 860px) { .studio-txt { grid-template-columns: 1fr; } } /* Clients : trois grandes cases fixes, un logo par case. Les logos changent un à la fois, comme un rouleau de machine à sous (JS). */ .clients { margin-top: clamp(56px, 9vh, 120px); } .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); } .logo-case { height: clamp(120px, 15vw, 210px); overflow: hidden; border-left: 1px solid var(--ligne); } .logo-case:first-child { border-left: 0; } .logo-rouleau { display: flex; flex-direction: column; height: 100%; will-change: transform; } .logo-rouleau.tourne { transition: transform .75s cubic-bezier(.2, .9, .25, 1.04); } .logo-rouleau img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3vw, 48px); /* Logos sources en couleur sur fond blanc : passés en noir et blanc. On assombrit d'abord (les bleus clairs et les gris pâles descendent sous le gris moyen), puis un fort contraste les pousse vers le noir tout en ramenant le fond à un blanc pur. « multiply » fond ce blanc dans la carte. */ filter: grayscale(1) brightness(.78) contrast(2); mix-blend-mode: multiply; opacity: .85; } @media (max-width: 720px) { .logos { grid-template-columns: 1fr; } .logo-case { height: clamp(96px, 26vw, 140px); border-left: 0; border-top: 1px solid var(--ligne); } .logo-case:first-child { border-top: 0; } } @media (prefers-reduced-motion: reduce) { .logo-rouleau.tourne { transition: none; } } /* ============================================================ ASSISTANT IA ============================================================ */ .ia { --ligne: rgba(255, 255, 255, .16); --gris: #9a9a97; margin: clamp(56px, 9vh, 120px) var(--marge) 0; padding: clamp(48px, 7vh, 96px) 0 clamp(32px, 5vh, 56px); background: var(--noir); color: var(--blanc); border-radius: var(--rayon); overflow: hidden; } .ia ::selection { background: var(--blanc); color: var(--noir); } .ia-carte { margin: 0 clamp(24px, 4vw, 64px); max-width: 900px; } /* Pastille « agent IA en ligne » : dit d'emblée qui va répondre. */ .ia-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: 1px solid rgba(51, 238, 0, .45); border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--vert); } .ia-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); animation: voyant 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ia-badge i { animation: none; } } .ia h2 { margin-top: 18px; } .ia-ou { margin-top: clamp(28px, 4vh, 44px); color: var(--gris); } .ia-sub { margin-top: 14px; max-width: 560px; color: var(--gris); } .ia-form { margin-top: 32px; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255,255,255,.45); border-radius: 999px; transition: border-color .3s; } .ia-form:focus-within { border-color: var(--vert); } .ia-prompt { color: var(--vert); font-size: 14px; } .ia-form input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 14px 0; font-size: clamp(17px, 1.5vw, 21px); } .ia-form input::placeholder { color: rgba(255,255,255,.55); } .ia-envoyer { width: 44px; height: 44px; border-radius: 999px; background: var(--vert); color: var(--noir); font-size: 18px; flex: none; transition: background .25s, transform .3s var(--ease); } .ia-envoyer:hover { background: var(--blanc); } /* Bouton avec libellé dans la section (le dialogue garde le bouton rond). */ .ia-envoyer-txt { width: auto; height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px; font-size: 17px; } .ia-envoyer-txt span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 560px) { .ia-envoyer-txt { width: 48px; height: 48px; padding: 0; justify-content: center; } .ia-envoyer-txt span { display: none; } } .ia-envoyer:disabled, .ia-form input:disabled { opacity: .45; cursor: wait; } .ia-exemples { margin-top: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } /* Défilement piloté en JS (boucle exacte, ralentissement progressif au survol). */ .ia-piste { display: flex; gap: 10px; width: max-content; will-change: transform; } .ia-ex { white-space: nowrap; padding: 10px 16px; border: 1px solid var(--ligne); border-radius: 999px; color: rgba(255,255,255,.75); text-transform: none; letter-spacing: .02em; font-size: 13px; transition: border-color .25s, color .25s; } .ia-ex:hover { border-color: var(--vert); color: var(--vert); } /* Dialogue */ .ia-dialog { --ligne: rgba(255, 255, 255, .16); --gris: #9a9a97; width: min(820px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: #0a0a0a; color: var(--blanc); box-shadow: 0 30px 120px rgba(0,0,0,.6); } .ia-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ia-dialog-int { display: flex; flex-direction: column; max-height: min(86vh, 900px); } .ia-fermer { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ligne); font-size: 22px; line-height: 1; z-index: 2; } .ia-fermer:hover { background: var(--vert); color: var(--noir); border-color: var(--vert); } .ia-defil { flex: 1; overflow-y: auto; padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) 16px; overscroll-behavior: contain; } .ia-question { color: var(--vert); margin-right: 48px; margin-bottom: 20px; text-transform: none; letter-spacing: .02em; font-size: 13px; } .ia-question::before { content: '> '; } .ia-attente { display: flex; gap: 6px; padding: 8px 0 20px; } .ia-attente[hidden] { display: none; } .ia-attente span { width: 8px; height: 8px; border-radius: 999px; background: var(--vert); animation: pulse 1s ease-in-out infinite; } .ia-attente span:nth-child(2) { animation-delay: .15s; } .ia-attente span:nth-child(3) { animation-delay: .3s; } @keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } } .ia-reponse { font-size: 17px; line-height: 1.55; } .ia-reponse p { margin: 0 0 14px; } .ia-reponse ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; } .ia-reponse a { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; } .ia-reponse strong { font-weight: 700; } .ia-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; } .ia-images figure { overflow: hidden; border-radius: 10px; background: var(--gris-fonce); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .ia-images figure.in { opacity: 1; transform: none; } .ia-images img, .ia-images video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .ia-images figcaption { padding: 8px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); } .ia-form-dialog { margin: 0 clamp(16px, 3vw, 28px) 10px; flex: none; } /* Mention : c'est une IA, elle peut se tromper. */ .ia-mention { margin-top: 14px; max-width: 560px; font-size: 12.5px; line-height: 1.45; color: var(--gris); opacity: .8; } .ia-mention-dialog { margin: 0 clamp(24px, 4vw, 44px) clamp(14px, 2.4vw, 22px); max-width: none; flex: none; } /* ============================================================ CONTACT : carte centrée, teinte verte très légère, un seul corps de texte pour toute l'accroche, champs blancs arrondis. ============================================================ */ .contact { margin: clamp(56px, 9vh, 120px) var(--marge) clamp(56px, 9vh, 120px); padding: clamp(56px, 9vh, 120px) clamp(20px, 4vw, 64px) clamp(40px, 6vh, 72px); background: var(--carte); border-radius: var(--rayon); text-align: center; } .contact-titre { margin: 0 auto; max-width: 22ch; font-weight: 300; font-size: clamp(30px, 5.2vw, 84px); line-height: 1.12; letter-spacing: -.03em; } /* Une ligne par fragment : seul le contenu d'une ligne peut se recomposer. */ .ct-ligne { display: block; } .ct-relance { text-wrap: balance; } /* Pastille verte dont la largeur suit le mot affiché (JS). */ .rot { display: inline-grid; justify-items: start; box-sizing: content-box; vertical-align: baseline; font-style: italic; font-weight: 400; color: var(--blanc); background: var(--vert); border-radius: 999px; padding: 0 .26em; line-height: 1.12; overflow: hidden; white-space: nowrap; transition: width .5s var(--ease); } .rot span { grid-area: 1 / 1; opacity: 0; transform: translateY(100%); transition: opacity .4s var(--ease), transform .5s var(--ease); } .rot span.on { opacity: 1; transform: none; } .rot span.sort { opacity: 0; transform: translateY(-100%); } .contact-liens { margin-top: clamp(24px, 4vh, 40px); display: flex; justify-content: center; gap: 12px 40px; flex-wrap: wrap; font-size: 16px; } .contact-liens a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(0,0,0,.35); transition: text-decoration-color .25s; } .contact-liens a:hover { text-decoration-color: var(--vert); } .form { margin: clamp(36px, 6vh, 72px) auto 0; max-width: 900px; display: flex; flex-direction: column; gap: 10px; text-align: left; } .form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form input, .form textarea { width: 100%; background: var(--fond); border: 1px solid transparent; border-radius: 18px; padding: 18px 22px; font-size: 16px; outline: none; transition: border-color .3s; resize: vertical; } .form textarea { min-height: 160px; } .form input:focus, .form textarea:focus { border-color: var(--encre); } .form input::placeholder, .form textarea::placeholder { color: rgba(0,0,0,.42); } .cachecache { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-pied { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; flex-wrap: wrap; } .form-pied .btn { order: 2; margin-left: auto; } .form-etat { text-transform: none; letter-spacing: .02em; font-size: 13px; color: var(--gris); } .form-etat.ok { color: var(--encre); } .form-etat.err { color: #d0342c; } .btn:disabled { opacity: .5; cursor: wait; } @media (max-width: 600px) { .form-ligne { grid-template-columns: 1fr; } .contact-titre { max-width: none; } } /* ============================================================ PIED DE PAGE ============================================================ */ .pied { background: var(--noir); color: var(--fond); padding: clamp(40px, 7vh, 80px) var(--marge) 28px; } .pied ::selection { background: var(--fond); color: var(--noir); } /* Navigation horizontale, grande, qui occupe la largeur. */ .pied-nav { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pied-nav a { font-weight: 300; font-size: clamp(22px, 3.2vw, 56px); line-height: 1; letter-spacing: -.035em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .06em; text-underline-offset: .12em; transition: text-decoration-color .3s; } .pied-nav a:hover { text-decoration-color: var(--vert); } .pied-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 7vh, 80px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); } .pied-marque { font-size: 18px; } .pied-haut:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 760px) { .pied-nav { flex-direction: column; gap: 14px; } .pied-nav a { font-size: clamp(26px, 8vw, 40px); } } /* ============================================================ PAGE PROJET ============================================================ */ .p-hero { position: relative; height: 78vh; min-height: 480px; overflow: hidden; display: flex; align-items: flex-end; } .p-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: zoom-doux 2.4s var(--ease) both; } @keyframes zoom-doux { from { transform: scale(1.08); } to { transform: none; } } .p-hero-voile { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.9)); } /* Composantes technologiques sous le titre : mêmes étiquettes que sur l'accueil, en plus grand, qui arrivent une à une au chargement. */ .p-tech { margin-top: clamp(16px, 2.4vh, 28px); gap: 8px; } .p-tech li { opacity: 1; transform: none; font-size: clamp(10.5px, .85vw, 12.5px); padding: 8px 14px 7px; animation: p-tech-entree .8s var(--ease) both; animation-delay: calc(.5s + var(--k, 0) * 80ms); } @keyframes p-tech-entree { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .p-tech li { animation: none; } } .p-hero-txt { position: relative; z-index: 2; padding: 0 var(--marge) clamp(32px, 6vh, 64px); width: 100%; color: var(--blanc); } .p-hero-txt .label { color: rgba(255, 255, 255, .72); } .p-hero h1 { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; } .p-client { font-weight: 300; font-size: clamp(44px, 9vw, 150px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; } .p-titre { font-weight: 300; font-size: clamp(20px, 2.6vw, 40px); letter-spacing: -.02em; color: rgba(255,255,255,.85); } .p-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 96px); padding: clamp(56px, 9vh, 120px) var(--marge); } .p-meta dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; color: var(--gris); } .p-meta dd { margin: 0; color: var(--encre); text-transform: none; letter-spacing: .02em; font-size: 12px; } .p-livrables-t { margin-top: 40px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); } .p-livrables { margin-top: 14px; font-size: 15px; } .p-livrables li { padding: 10px 0; border-top: 1px solid var(--ligne); } .p-livrables li:last-child { border-bottom: 1px solid var(--ligne); } .p-texte { display: flex; flex-direction: column; gap: 22px; } .p-pitch { font-weight: 300; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.03em; margin-bottom: 12px; } .p-texte p:not(.p-pitch) { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #333; max-width: 760px; } @media (max-width: 860px) { .p-corps { grid-template-columns: 1fr; } .p-meta { order: 2; } } .p-galerie { padding: 0 var(--marge) clamp(56px, 9vh, 120px); } /* Galerie : chaque visuel entier, à son format d'origine, jamais recadré. Une colonne centrée, 1000 px de large au plus et jamais plus haut que l'écran (les visuels verticaux ne débordent pas). */ .p-video, .p-grille figure { width: fit-content; max-width: min(100%, 1000px); margin: 0 auto; overflow: hidden; border-radius: var(--rayon); } .p-video { margin-top: 24px; background: #000; } .p-video video, .p-grille img { display: block; width: auto; height: auto; max-width: 100%; max-height: 92vh; } .p-grille { margin-top: clamp(16px, 2.4vw, 32px); display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 32px); } .p-grille figure { background: var(--gris-clair); } .p-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: clamp(32px, 5vh, 56px) var(--marge); border-top: 1px solid var(--ligne); } .p-nav-lien { display: flex; flex-direction: column; gap: 10px; } .p-nav-suiv { text-align: right; align-items: flex-end; } .p-nav-nom { font-weight: 500; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: -.02em; } .p-nav-nom em { font-style: normal; font-weight: 300; color: var(--gris); } .p-nav-lien:hover .p-nav-nom { text-decoration: underline; text-decoration-color: var(--vert); text-underline-offset: .15em; } .p-nav-tous { padding: 12px 18px; border: 1px solid var(--ligne); border-radius: 999px; } .p-nav-tous:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); } @media (max-width: 640px) { .p-nav { grid-template-columns: 1fr; } .p-nav-suiv { text-align: left; align-items: flex-start; } .p-nav-tous { justify-self: start; order: 3; } } .p-404 { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 140px var(--marge) 80px; } .p-404 h1 { font-weight: 300; font-size: clamp(40px, 8vw, 120px); letter-spacing: -.05em; line-height: .95; } .p-404 p { color: var(--gris); } .p-404 .btn { align-self: flex-start; margin-top: 12px; }