/* ============================================================ AZURA — feuille de style Palette, matériaux et ambiance pilotés par des variables CSS posées sur via data-material / data-ambiance / data-scrolled. ============================================================ */ :root { --serif: 'Playfair Display', Georgia, serif; --sans: 'Archivo', system-ui, sans-serif; /* Ambiance Nuit (défaut) */ --bg: #0B0C0E; --bg2: #101114; --ink: #D8CFC0; --ink-hi: #EDE6DA; --ink2: #8E9094; --line: rgba(142, 144, 148, .22); --glass-bd: rgba(255, 255, 255, .10); --wm: rgba(216, 207, 192, .045); --sand-ink: #0B0C0E; --sand-ink2: #4F5156; --stone: #14161A; --stone-ink: #D8CFC0; --stone-ink2: #8E9094; --cu: #B87B4E; --cu2: #D9A47A; --cu-ink: #C48B5F; --hz-top: 50%; --hdr-sh-color: rgba(0, 0, 0, .6); /* Matériau Titane (défaut) */ --sand: #D4CFC6; --glass: rgba(214, 222, 235, .07); --glass-cell: var(--glass); --sh: rgba(6, 8, 14, .65); /* Mise en page desktop */ --hdr-h: 96px; --pad: 8%; --h1: clamp(44px, 4.72vw, 68px); --h2: clamp(34px, 3.9vw, 56px); --data: clamp(56px, 6.67vw, 96px); --hero-h: max(960px, 100vh); --wm-size: 31vw; --wm-y: 60px; --wm-clip: 61%; --ws: .85; --bento-row: 290px; --sec-pad: 160px; --macro-h: 720px; --macro-x: 0px; --ease: cubic-bezier(.22, .61, .36, 1); --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); } html[data-material="ceramique"] { --sand: #D8CFC0; --glass: rgba(240, 226, 200, .07); --sh: rgba(16, 12, 6, .58); } html[data-material="or"] { --sand: #DACCBE; --glass: rgba(240, 214, 190, .08); --sh: rgba(20, 10, 2, .62); } html[data-ambiance="aube"] { --bg: #E3DCD0; --bg2: #D8D0C2; --ink: #16171A; --ink-hi: #0B0C0E; --ink2: #55575C; --line: rgba(22, 23, 26, .14); --glass: rgba(255, 255, 255, .45); --glass-bd: rgba(255, 255, 255, .65); --glass-cell: rgba(255, 255, 255, .5); --wm: rgba(22, 23, 26, .055); --stone: #BDB5A9; --stone-ink: #16171A; --stone-ink2: #3E4045; --cu-ink: #7E4C2B; --hz-top: 0%; --hdr-sh-color: rgba(40, 30, 20, .3); --sand: #CBC4B8; --sh: rgba(30, 34, 44, .30); } html[data-ambiance="aube"][data-material="ceramique"] { --sand: #CFC3AE; --sh: rgba(44, 36, 24, .28); } html[data-ambiance="aube"][data-material="or"] { --sand: #D1C1AF; --sh: rgba(50, 32, 18, .30); } /* ---------- Base ---------- */ html, body { margin: 0; padding: 0; background: var(--bg); min-height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: var(--ink); font-family: var(--sans); transition: background-color 700ms ease, color 700ms ease; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } input::placeholder { color: #8E9094; opacity: 1; } ::selection { background: rgba(184, 123, 78, .35); } .page { position: relative; min-height: 100%; overflow-x: clip; background-color: var(--bg); transition: background-color 700ms ease; } /* Éléments dont l'opacité dépend du matériau */ .m-titane, .m-ceramique, .m-or { opacity: 0; transition: opacity 1100ms ease; } html[data-material="titane"] .m-titane, html[data-material="ceramique"] .m-ceramique, html[data-material="or"] .m-or { opacity: 1; } /* Titres et libellés partagés */ .h1 { position: relative; z-index: 3; margin: 0; max-width: 1100px; text-align: center; font: 400 var(--h1)/1.12 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; transition: color 700ms ease; } .h1 em { font-style: italic; color: var(--ink-hi); transition: color 700ms ease; } .h2 { margin: 14px 0 0; font: 400 var(--h2)/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); transition: color 700ms ease; } .kicker { font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink2); } .kicker-fixed { color: #8E9094; } .kicker-stone { color: var(--stone-ink2); } .kicker-sand { color: var(--sand-ink2); } /* Soulignement cuivre qui se dessine de gauche à droite */ .u-line { background-image: linear-gradient(var(--cu), var(--cu)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size 450ms var(--ease), color 700ms ease; } .u-line:hover { background-size: 100% 1px; } /* ---------- Header ---------- */ .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; } .hdr-inner { pointer-events: auto; box-sizing: border-box; width: 100%; max-width: 100%; margin-top: 0; padding: 26px 8%; border-radius: 0; background-color: transparent; border: 1px solid transparent; box-shadow: none; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; transition: max-width 550ms var(--ease), margin-top 550ms var(--ease), padding 550ms var(--ease), border-radius 550ms var(--ease), background-color 550ms ease, box-shadow 550ms ease, border-color 550ms ease, backdrop-filter 550ms ease; } html[data-scrolled="1"] .hdr-inner { margin-top: 14px; max-width: min(980px, calc(100% - 28px)); padding: 10px 16px 10px 24px; border-radius: 16px; background-color: var(--glass); border-color: var(--glass-bd); box-shadow: 0 24px 60px -24px var(--hdr-sh-color); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .hdr-left { display: flex; align-items: center; gap: 14px; justify-self: start; min-width: 0; } .logo { display: flex; align-items: center; gap: 12px; } .logo-mark { position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--cu); box-sizing: border-box; } .logo-mark span { position: absolute; right: -4px; top: 5px; width: 3px; height: 5px; border-radius: 1px; background: var(--cu); } .logo-text { font: 400 19px/1 var(--serif); letter-spacing: .16em; color: var(--ink); transition: color 700ms ease; } .nav-desk { display: flex; gap: 36px; align-items: center; white-space: nowrap; } .nav-desk a { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); padding: 8px 0; background-image: linear-gradient(var(--cu), var(--cu)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size 450ms var(--ease), color 700ms ease; } .nav-desk a:hover { background-size: 100% 1px; } .hdr-right { display: flex; align-items: center; gap: 16px; justify-self: end; } .menu-btn { display: none; appearance: none; border: 0; background: transparent; cursor: pointer; padding: 8px 0; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); } .btn-reserver { appearance: none; border: 0; cursor: pointer; padding: 12px 20px; border-radius: 6px; background: linear-gradient(135deg, #B87B4E, #C68D5E); color: #0B0C0E; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: filter 400ms ease; } .btn-reserver:hover { filter: brightness(1.08); } .ambiance { appearance: none; border: 0; background: transparent; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; } .ambiance-icon { position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ink2); box-sizing: border-box; overflow: hidden; } .ambiance-fill { position: absolute; left: 0; right: 0; height: 50%; top: var(--hz-top); background-color: var(--ink); transition: top 600ms var(--ease), background-color 700ms ease; } .ambiance-hz { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background-color: var(--ink2); transform: translateY(-.5px); } .nav-mobile { display: none; grid-column: 1 / -1; flex-direction: column; gap: 4px; padding: 12px 0 6px; border-top: 1px solid var(--line); } .nav-mobile a { padding: 12px 0; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); } html[data-menu="1"] .nav-mobile { display: flex; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: var(--hero-h); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: calc(var(--hdr-h) + 54px) var(--pad) 72px; } .wash { position: absolute; inset: 0; pointer-events: none; } .wash.m-titane { background: radial-gradient(ellipse 55% 60% at 16% 6%, rgba(196, 206, 222, .11), transparent 70%); } .wash.m-ceramique { background: radial-gradient(ellipse 60% 60% at 18% 8%, rgba(226, 204, 170, .11), transparent 70%); } .wash.m-or { background: radial-gradient(ellipse 85% 35% at 12% 30%, rgba(232, 186, 136, .13), transparent 70%); } .edition { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; padding: 8px 14px; border-radius: 999px; background-color: var(--glass); border: 1px solid rgba(184, 123, 78, .55); font: 500 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color 700ms ease, color 700ms ease; } .edition-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--cu); } .tagline { position: relative; z-index: 3; margin: 22px 0 0; text-align: center; font: 400 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); transition: color 700ms ease; } /* Scène : filigrane arrière, montre, filigrane avant (clippé) */ .stage { position: relative; z-index: 2; width: calc(300px * var(--ws)); height: calc(560px * var(--ws)); margin-top: 44px; } .wm { position: absolute; left: 50%; top: calc(50% + var(--wm-y)); width: 0; height: 0; pointer-events: none; will-change: transform; } .wm-back { z-index: 0; } .wm-front { z-index: 2; } .wm span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font: 400 var(--wm-size)/1 var(--serif); letter-spacing: -.03em; color: var(--wm); user-select: none; transition: color 700ms ease; } .wm-front span { clip-path: inset(var(--wm-clip) 0 0 0); } .watch { position: absolute; left: 50%; top: 0; width: 300px; height: 560px; margin-left: -150px; z-index: 1; transform-origin: 50% 0; transform: scale(var(--ws)) perspective(1800px) rotateY(-14deg) rotateX(5deg); } .watch-shadow { position: absolute; left: 30px; top: 480px; width: 360px; height: 100px; border-radius: 50%; background-color: var(--sh); filter: blur(30px); transform: rotate(-12deg); transition: background-color 900ms ease; } .watch-layer { position: absolute; inset: 0; } .lug { position: absolute; left: 88px; width: 124px; height: 178px; } .lug-top { top: 0; border-radius: 8px 8px 0 0; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); } .lug-bottom { top: 382px; border-radius: 0 0 8px 8px; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); } .crown { position: absolute; left: 276px; top: 265px; width: 16px; height: 30px; border-radius: 4px; } .bezel { position: absolute; left: 20px; top: 150px; width: 260px; height: 260px; border-radius: 50%; box-shadow: 26px 36px 70px -14px var(--sh), inset 0 0 0 1px rgba(0, 0, 0, .35); } .ring { position: absolute; left: 32px; top: 162px; width: 236px; height: 236px; border-radius: 50%; } /* Titane brossé */ .mat-titane .lug { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 19px, rgba(0, 0, 0, .5) 19px 21px), linear-gradient(90deg, #2E3034 0%, #55585D 10%, #A3A6AB 30%, #D6D8DC 42%, #A3A6AB 56%, #55585D 82%, #2E3034 100%); } .mat-titane .crown { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px), linear-gradient(180deg, #D6D8DC, #A3A6AB 50%, #55585D); } .mat-titane .bezel { background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .35) 100%), conic-gradient(from 0deg, #A3A6AB 0deg, #55585D 55deg, #A3A6AB 105deg, #D6D8DC 135deg, #A3A6AB 170deg, #55585D 225deg, #2E3034 250deg, #A3A6AB 285deg, #D6D8DC 315deg, #A3A6AB 345deg, #A3A6AB 360deg); } .mat-titane .ring { background: linear-gradient(135deg, #55585D, #2E3034 60%, #3A3D41); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .15); } /* Céramique sable */ .mat-ceramique .lug { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 19px, rgba(0, 0, 0, .35) 19px 21px), linear-gradient(90deg, #5F5445 0%, #8E7F67 12%, #C7B89F 34%, #E6DCC9 46%, #C7B89F 60%, #8E7F67 84%, #5F5445 100%); } .mat-ceramique .crown { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px), linear-gradient(180deg, #E6DCC9, #C7B89F 50%, #8E7F67); } .mat-ceramique .bezel { background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .28) 100%), conic-gradient(from 0deg, #C7B89F 0deg, #8E7F67 55deg, #C7B89F 105deg, #E6DCC9 135deg, #C7B89F 170deg, #8E7F67 225deg, #5F5445 250deg, #C7B89F 285deg, #E6DCC9 315deg, #C7B89F 345deg, #C7B89F 360deg); box-shadow: 26px 36px 70px -14px var(--sh), inset 0 0 0 1px rgba(0, 0, 0, .25); } .mat-ceramique .ring { background: linear-gradient(135deg, #8E7F67, #5F5445 60%, #6B5F4E); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .12); } /* Or rose */ .mat-or .lug { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 19px, rgba(0, 0, 0, .5) 19px 21px), linear-gradient(90deg, #4F311F 0%, #82563A 10%, #CC9575 30%, #EFC8A8 42%, #CC9575 56%, #82563A 82%, #4F311F 100%); } .mat-or .crown { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px), linear-gradient(180deg, #EFC8A8, #CC9575 50%, #82563A); } .mat-or .bezel { background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .35) 100%), conic-gradient(from 0deg, #CC9575 0deg, #82563A 55deg, #CC9575 105deg, #EFC8A8 135deg, #CC9575 170deg, #82563A 225deg, #4F311F 250deg, #CC9575 285deg, #EFC8A8 315deg, #CC9575 345deg, #CC9575 360deg); } .mat-or .ring { background: linear-gradient(135deg, #82563A, #4F311F 60%, #5E3D28); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .18); } /* Cadran (commun aux trois matériaux) */ .dial, .dial-minutes, .dial-index, .dial-rim, .dial-light { position: absolute; left: 42px; top: 172px; width: 216px; height: 216px; border-radius: 50%; } .dial { background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .045) 0deg 1.5deg, transparent 1.5deg 6deg), radial-gradient(circle at 38% 32%, #25282E, #101216 72%); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6); } .dial-minutes { background: repeating-conic-gradient(from -0.6deg, rgba(216, 207, 192, .7) 0deg 1.2deg, transparent 1.2deg 6deg); -webkit-mask: radial-gradient(circle closest-side, transparent 88%, #000 89%, #000 92%, transparent 93%); mask: radial-gradient(circle closest-side, transparent 88%, #000 89%, #000 92%, transparent 93%); } .dial-index { background: repeating-conic-gradient(from -2.2deg, #D9A47A 0deg 4.4deg, transparent 4.4deg 30deg); -webkit-mask: radial-gradient(circle closest-side, transparent 74%, #000 75%, #000 85%, transparent 86%); mask: radial-gradient(circle closest-side, transparent 74%, #000 75%, #000 85%, transparent 86%); } .hand { position: absolute; background: linear-gradient(90deg, #0E1A38, #2A4B8E 45%, #3A63B0 52%, #152A5E); transform-origin: 50% 100%; box-shadow: 3px 4px 6px rgba(0, 0, 0, .5); } .hand-hour { left: 147px; top: 218px; width: 6px; height: 62px; border-radius: 3px 3px 1px 1px; transform: rotate(-58deg); } .hand-minute { left: 148px; top: 190px; width: 4px; height: 90px; border-radius: 2px 2px 1px 1px; transform: rotate(62deg); } .hand-second { position: absolute; left: 149.5px; top: 200px; width: 1px; height: 100px; background-color: var(--cu); transform-origin: 50% 80%; transform: rotate(205deg); } .hand-cap { position: absolute; left: 146px; top: 276px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E3B896, #8A5B3F); } .dial-rim { pointer-events: none; box-shadow: inset 1px 1px 2px rgba(255, 255, 255, .22); } .dial-light { pointer-events: none; } .dial-light.m-titane { background: radial-gradient(ellipse 48% 36% at 30% 22%, rgba(235, 240, 250, .22), rgba(235, 240, 250, .05) 45%, transparent 70%); } .dial-light.m-ceramique { background: radial-gradient(ellipse 52% 42% at 32% 26%, rgba(245, 232, 210, .14), transparent 65%); } .dial-light.m-or { background: radial-gradient(ellipse 62% 26% at 24% 34%, rgba(250, 220, 190, .24), rgba(250, 220, 190, .06) 45%, transparent 70%); } /* Sélecteur de matériaux */ .picker { position: relative; z-index: 3; display: flex; justify-content: center; gap: 34px; margin-top: 36px; } .pick { appearance: none; border: 0; background: transparent; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 14px; } .swatch { display: block; width: 28px; height: 28px; border-radius: 50%; outline: 1px solid rgba(184, 123, 78, 0); outline-offset: 5px; transition: outline-color 700ms ease; } .swatch-titane { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 3px), linear-gradient(135deg, #D6D8DC, #A3A6AB 50%, #55585D); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); } .swatch-ceramique { background: radial-gradient(circle at 35% 30%, #E6DCC9, #C7B89F 55%, #8E7F67); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } .swatch-or { background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55) 0 10%, transparent 32%), linear-gradient(135deg, #EFC8A8 10%, #CC9575 45%, #82563A 90%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); } .pick-label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); opacity: 0; transition: opacity 700ms ease; white-space: nowrap; } .pick[aria-pressed="true"] .swatch { outline-color: rgba(184, 123, 78, 1); } .pick[aria-pressed="true"] .pick-label { opacity: 1; } /* Indicateur de défilement */ .scroll-hint { position: absolute; left: var(--pad); bottom: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; z-index: 3; } .scroll-line { display: block; width: 1px; height: 48px; background-color: var(--ink2); animation: az-line 2.8s cubic-bezier(.4, 0, .2, 1) infinite; } .scroll-text { font: 500 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink2); } @keyframes az-line { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } } /* ---------- Apparition au défilement ---------- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 900ms ease, transform 900ms var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------- Bento ---------- */ .bento-section { padding: var(--sec-pad) var(--pad) 0; box-sizing: border-box; } .sec-head { padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--line); } .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--bento-row); gap: 16px; } .cell { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); box-sizing: border-box; transition: transform 500ms var(--ease), box-shadow 500ms ease, background-color 900ms ease; } .cell:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -28px rgba(0, 0, 0, .6); } .grain { position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .35; mix-blend-mode: overlay; } .grain-30 { opacity: .3; } /* Cellule dominante : mouvement squelette */ .cell-dom { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 420px; background-color: #14161A; } .slot { position: absolute; inset: 0; overflow: hidden; } .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .slot-calibre { background: repeating-conic-gradient(from 0deg at 62% 48%, rgba(216, 207, 192, .10) 0deg 3deg, transparent 3deg 12deg), repeating-radial-gradient(circle at 62% 48%, rgba(216, 207, 192, .09) 0 1px, transparent 1px 22px), radial-gradient(circle at 62% 48%, #2A2D33 0, #1A1C21 28%, #101216 62%, #0B0C0E 100%); } .slot-calibre::before { content: ""; position: absolute; left: 30%; top: 12%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(184, 123, 78, .35) 0deg 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(circle closest-side, transparent 78%, #000 80%, #000 90%, transparent 92%); mask: radial-gradient(circle closest-side, transparent 78%, #000 80%, #000 90%, transparent 92%); } .slot-calibre::after { content: ""; position: absolute; left: 56%; top: 40%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8C2F3B, #4A1520 65%, #2A0A10); box-shadow: 0 0 0 4px rgba(216, 207, 192, .12), 0 8px 24px rgba(0, 0, 0, .6); transform: scale(.32); } .cell-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(11, 12, 14, .9) 100%); } .cell-dom-text { position: absolute; left: 32px; right: 32px; bottom: 32px; pointer-events: none; } .cell-dom-text h3 { margin: 12px 0 0; font: 400 34px/1.1 var(--serif); color: #D8CFC0; } .cell-dom-row { display: flex; align-items: baseline; gap: 20px; margin-top: 16px; flex-wrap: wrap; } .cell-dom-data { font: 300 20px/1 var(--sans); font-variant-numeric: tabular-nums; color: #D8CFC0; white-space: nowrap; } .cell-dom-desc { font: 400 14px/1.5 var(--sans); color: #8E9094; } /* Cellules secondaires */ .cell-glass, .cell-stone { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; } .cell-glass { background-color: var(--glass-cell); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .glass-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 85% 95%, rgba(255, 255, 255, .07), transparent 70%); } .cell-glass > *, .cell-stone > * { position: relative; } .cell-stone { background-color: var(--stone); } .stone-drops { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .10) 0 2px, rgba(255, 255, 255, .02) 3px, transparent 4px), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .07) 0 1.5px, transparent 3px); background-size: 26px 26px, 38px 38px; background-position: 0 0, 13px 9px; } .data { font: 300 var(--data)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ink); transition: color 700ms ease; } .data-stone { color: var(--stone-ink); } .unit { font-size: .42em; letter-spacing: 0; margin-left: .12em; } .cell-desc { margin: 14px 0 0; font: 400 14px/1.5 var(--sans); color: var(--ink2); } .cell-desc-stone { color: var(--stone-ink2); } .cell-desc-sand { color: var(--sand-ink2); } .cell-sand { grid-column: 3 / 5; display: grid; grid-template-columns: 1fr 1fr; min-height: 250px; background-color: var(--sand); color: var(--sand-ink); } .cell-sand:hover { box-shadow: 0 28px 56px -28px rgba(0, 0, 0, .5); } .cell-sand-text { position: relative; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .data-sm { font: 300 44px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--sand-ink); } .data-sm .unit { font-size: .45em; } .slot-boitier { position: relative; min-height: 220px; border-left: 1px solid rgba(11, 12, 14, .08); background: linear-gradient(160deg, rgba(255, 255, 255, .25), transparent 60%); } .case-art { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 50%; background: conic-gradient(from 210deg, #A3A6AB, #55585D 30%, #D6D8DC 52%, #6B6E73 78%, #A3A6AB); box-shadow: 18px 26px 44px -16px rgba(11, 12, 14, .45), inset 0 0 0 1px rgba(0, 0, 0, .25); } .case-art::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: linear-gradient(135deg, #3A3D41, #1A1C20 65%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); } .case-art::after { content: ""; position: absolute; left: -14%; top: 50%; width: 128%; height: 28%; transform: translateY(-50%); background: linear-gradient(90deg, #55585D, #C9CCD1 30%, #8A8D92 50%, #C9CCD1 70%, #55585D); border-radius: 6px; z-index: -1; } /* ---------- Macro-Zoom ---------- */ .macro-section { padding: var(--sec-pad) 0 0; } .macro-head { padding: 0 var(--pad) 40px; } .macro-head .h2 { max-width: 820px; } .macro { position: relative; height: var(--macro-h); overflow: hidden; background-color: #0B0C0E; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .macro-zoom { position: absolute; inset: 0; transform-origin: 30% 60%; will-change: transform; } .macro-scene { position: absolute; inset: 0; left: var(--macro-x); } .macro-bezel { position: absolute; left: -960px; top: 90px; width: 2520px; height: 2520px; border-radius: 50%; background: conic-gradient(from 200deg, #3A3D42, #15171B 25%, #4A4D52 50%, #1A1C20 75%, #3A3D42); box-shadow: inset 0 0 80px rgba(0, 0, 0, .7); } .macro-rehaut { position: absolute; left: -890px; top: 160px; width: 2380px; height: 2380px; border-radius: 50%; background: linear-gradient(160deg, #1B1D21, #0D0E11); box-shadow: inset 0 30px 60px rgba(0, 0, 0, .6); } .macro-dial { position: absolute; left: -850px; top: 200px; width: 2300px; height: 2300px; border-radius: 50%; background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 42%, transparent 44%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0 42%, transparent 44%), repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .03) 0 1px, transparent 1px 7px), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .035) 0deg .5deg, transparent .5deg 2.2deg), radial-gradient(circle at 30% 20%, #202328, #0E1013 70%); background-size: 34px 34px, 34px 34px, auto, auto, auto; background-position: 0 0, 17px 17px, 0 0, 0 0, 0 0; box-shadow: inset 0 10px 40px rgba(0, 0, 0, .7); } .macro-minutes { position: absolute; left: -850px; top: 200px; width: 2300px; height: 2300px; border-radius: 50%; background: repeating-conic-gradient(from -0.15deg, rgba(216, 207, 192, .85) 0deg .3deg, transparent .3deg 6deg); -webkit-mask: radial-gradient(circle closest-side, transparent 94.4%, #000 94.6%, #000 96%, transparent 96.2%); mask: radial-gradient(circle closest-side, transparent 94.4%, #000 94.6%, #000 96%, transparent 96.2%); } .macro-index { position: absolute; width: 40px; height: 138px; border-radius: 3px; background: linear-gradient(90deg, #7A503A, #E3B896 35%, #C58F72 55%, #7A503A); box-shadow: 3px 5px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35); } .macro-index-1 { left: 280px; top: 292px; } .macro-index-2 { left: 775px; top: 424px; transform: rotate(30deg); } .macro-hand { position: absolute; left: 285px; top: 453px; width: 30px; height: 897px; background: linear-gradient(90deg, #0B1329, #24427E 44%, #3A63B0 52%, #1A3266 62%, #0B1329); clip-path: polygon(50% 0, 100% 7%, 100% 100%, 0 100%, 0 7%); transform-origin: 50% 100%; transform: rotate(12deg); filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, .65)); } .note { position: absolute; display: block; } .note-1 { left: 300px; top: 330px; } .note-2 { left: 468px; top: 560px; } .note-3 { left: 750px; top: 620px; } .note-ring { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(184, 123, 78, .55); box-sizing: border-box; } .note-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #B87B4E; } .note-line { position: absolute; left: 12px; top: 0; width: 150px; height: 1px; background: linear-gradient(90deg, #B87B4E, rgba(184, 123, 78, .35)); } .note-text { position: absolute; left: 176px; top: -7px; white-space: nowrap; font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #D8CFC0; } .note-left .note-line { left: auto; right: 12px; background: linear-gradient(270deg, #B87B4E, rgba(184, 123, 78, .35)); } .note-left .note-text { left: auto; right: 176px; text-align: right; } .macro-notes-mobile { display: none; flex-direction: column; gap: 14px; padding: 28px var(--pad) 0; } .macro-notes-mobile > div { display: flex; align-items: center; gap: 14px; font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .dash { width: 24px; height: 1px; background: #B87B4E; flex: none; } /* ---------- Pied de page : Concierge ---------- */ .foot { margin-top: var(--sec-pad); background-color: var(--bg2); border-top: 1px solid var(--line); padding: 120px var(--pad) 40px; box-sizing: border-box; transition: background-color 700ms ease; } .foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; } .foot-lead { margin: 24px 0 0; max-width: 440px; font: 400 16px/1.65 var(--sans); color: var(--ink); transition: color 700ms ease; } .foot-form-wrap { padding-top: 18px; } .form { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .form input { flex: 1 1 240px; min-width: 0; appearance: none; border: 0; background: transparent; padding: 14px 0; font: 300 20px/1.3 var(--sans); color: var(--ink); outline: none; border-radius: 0; transition: box-shadow 400ms ease; } .form input:focus { box-shadow: 0 1px 0 var(--cu); } .form-submit { appearance: none; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 0 16px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .arrow { position: relative; display: block; width: 30px; height: 1px; background-color: var(--cu); transition: width 400ms var(--ease); } .form-submit:hover .arrow { width: 44px; } .arrow span { position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--cu); border-right: 1px solid var(--cu); transform: rotate(45deg); } .form-msg { margin: 14px 0 0; font: 400 12px/1.5 var(--sans); color: var(--ink2); transition: color 400ms ease; } .form-msg.is-error { color: var(--cu-ink); } .form-done-title { margin: 0; font: 400 26px/1.3 var(--serif); color: var(--ink); } .form-done-sub { margin: 12px 0 0; font: 400 13px/1.6 var(--sans); color: var(--ink2); } .foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 120px; padding-top: 28px; border-top: 1px solid var(--line); } .foot-logo { font: 400 15px/1 var(--serif); letter-spacing: .16em; color: var(--ink); } .foot-legal { display: flex; gap: 28px; flex-wrap: wrap; } .foot-legal a { font: 400 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); padding: 6px 0; background-image: linear-gradient(var(--cu), var(--cu)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size 450ms var(--ease); } .foot-legal a:hover { background-size: 100% 1px; } .foot-copy { font: 400 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); } .foot-sign { margin: 28px 0 0; text-align: center; font: italic 400 14px/1.5 var(--serif); color: var(--ink2); } /* ---------- Responsive ---------- */ @media (max-width: 1179px) { .hdr-inner { padding: 22px 4%; } .nav-desk { gap: 20px; } } @media (max-width: 899px) { /* Sous 900 px, la navigation centrée n'a plus la place : menu déroulant */ .nav-desk { display: none; } .menu-btn { display: block; } } @media (max-width: 1099px) { :root { --ws: .75; --bento-row: 250px; } } @media (max-width: 759px) { :root { --hdr-h: 72px; --pad: 20px; --h1: 38px; --h2: 34px; --data: 64px; --hero-h: 100vh; --wm-y: 40px; --wm-clip: 83%; --ws: .62; --bento-row: auto; --sec-pad: 96px; --macro-h: 440px; --macro-x: -140px; } .hdr-inner { padding: 16px 20px; grid-template-columns: auto 1fr auto; gap: 12px; } html[data-scrolled="1"] .hdr-inner { margin-top: 10px; max-width: calc(100% - 20px); padding: 8px 10px 8px 16px; } .hdr-left { gap: 10px; } .hdr-right { gap: 10px; } .btn-reserver { padding: 11px 14px; } .nav-desk { display: none; } .menu-btn { display: block; } .picker { gap: 26px; } .pick { position: relative; padding: 6px 6px 28px; } .pick-label { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); } .scroll-hint { display: none; } .bento { grid-template-columns: 1fr; } .cell-dom { grid-column: auto; grid-row: auto; } .cell-sand { grid-column: auto; grid-template-columns: 1fr; } .note { display: none; } .macro-notes-mobile { display: flex; } .foot-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .scroll-line { animation: none; transform: none; } [data-reveal] { opacity: 1; transform: none; transition: none; } }