@font-face{font-family:'Inter Tight';src:url('assets/inter-tight-latin.woff2');font-weight:100 900}@font-face{font-family:'JetBrains Mono';src:url('assets/jetbrains-mono-latin.woff2');font-weight:100 900}
:root{--ink:#1C2026;--white:#FFFFFF;--accent:#52BEFF;--muted:#C3CBD3;--paper-muted:#4D5B68;--line:#657584;--font:'Inter Tight',Arial,sans-serif;--mono:'JetBrains Mono',monospace}
*{box-sizing:border-box}body{margin:0;font-family:var(--font);color:var(--ink);background:#fff}button,a,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:3px;box-shadow:0 0 0 7px #1C2026}button:disabled{cursor:default}svg{width:24px;height:24px;flex-shrink:0}button{min-height:48px;min-width:48px}a{min-height:48px;display:inline-flex;align-items:center}button svg{pointer-events:none}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.eyebrow{font-size:14px;letter-spacing:.09em;font-weight:600;line-height:1.4}.screen{overflow:hidden}.screen #app{height:100dvh}.stage{position:relative;height:100%;width:100%;min-height:660px;overflow:hidden;isolation:isolate;color:white}.scene{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#253E53}.scene>svg{width:100%;height:100%;transition:transform 200ms ease}.near .scene>svg{transform:scale(1.16)}
.stage header{position:absolute;top:max(32px,env(safe-area-inset-top));left:40px;right:40px;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.stage header>*{pointer-events:auto}.brand{background:var(--ink);display:flex;gap:14px;padding:12px 18px;align-items:center;min-height:78px}.mark{height:44px;width:32px;color:white}.brand strong{font-size:25px;line-height:1.1;letter-spacing:.08em;display:block}.brand span{font-size:14px;letter-spacing:.16em;display:block;margin-top:6px;color:var(--muted)}.mode{display:flex;background:var(--ink);padding:4px;position:absolute;left:50%;transform:translateX(-50%);border:1px solid var(--line);gap:4px}.mode button{background:transparent;color:#fff;padding:0 24px;border:0;font-size:16px;position:relative;font-weight:600;min-height:48px}.mode .active{box-shadow:inset 0 -3px 0 var(--accent);background:#303943}.mode button:hover{background:#303943}.visibility{position:absolute;right:40px;top:32px;background:var(--ink);color:white;border:1px solid var(--line);width:56px;height:56px;display:grid;place-items:center}.tools{display:flex;background:var(--ink);position:absolute;bottom:68px;left:50%;transform:translateX(-50%);padding:6px;border:1px solid var(--line);gap:8px}.tools button{display:flex;align-items:center;gap:12px;justify-content:center;background:none;border:0;color:white;min-height:52px;padding:0 20px;font-size:16px;position:relative}.tools button+button{border-left:1px solid var(--line)}.tools button:hover{background:#303943}.tools button.active{box-shadow:inset 0 -3px 0 var(--accent);color:var(--accent)}footer{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;font-size:14px;gap:12px}.demo{background:var(--ink);padding:10px 14px;line-height:1.2}.cosmo{gap:8px;color:var(--accent);background:var(--ink);padding:0 14px;font-size:16px;text-decoration:none;min-height:48px}.cosmo svg{width:20px;height:20px}.restore{position:absolute;right:20px;top:max(20px,env(safe-area-inset-top));background:var(--ink);border:1px solid white;color:white;display:flex;align-items:center;gap:10px;padding:0 16px;min-height:56px}.is-hidden header,.is-hidden .readings,.is-hidden .tools,.is-hidden footer,.is-hidden .visibility{display:none}.toast{background:var(--ink);color:white;padding:16px 20px;border:1px solid white;font-size:16px;position:absolute;bottom:148px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;text-align:center;z-index:5}.weather{display:flex;align-items:center;gap:14px}.weather>strong{font-size:36px;font-weight:600}.weather>span{font-size:16px;line-height:1.5;color:var(--muted)}h2,p{margin:0}h2{font-weight:600}.time{font-variant-numeric:tabular-nums;font-size:76px;line-height:1.16;letter-spacing:-.06em;white-space:nowrap}.detail{background:none;color:white;border:0;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px;font-size:16px;margin-top:12px;padding:8px 0;min-height:48px}
.direction-a .brand,.direction-a .clock,.direction-a .tide{border:1px solid var(--line);border-radius:14px}.direction-a .mode{border-radius:12px}.direction-a .mode button{border-radius:7px}.direction-a .visibility,.direction-a .tools{border-radius:12px}.direction-a .tools button{border-radius:4px}.direction-a .clock{position:absolute;left:40px;top:154px;padding:22px 24px;background:var(--ink);width:296px}.direction-a .time{font-family:var(--mono);font-size:72px;letter-spacing:-.075em;margin:4px 0 18px}.direction-a .clock .eyebrow{color:var(--muted)}.direction-a .weather{border-top:1px solid var(--line);padding-top:14px;gap:14px}.direction-a .weather>strong{font-size:32px}.direction-a .weather svg{width:26px}.direction-a .weather>span{font-size:16px}.direction-a .tide{position:absolute;bottom:166px;right:40px;display:flex;gap:24px;align-items:center;background:var(--ink);padding:24px;width:450px}.dial{width:170px;height:170px}.tide-copy{flex:1}.tide-copy .eyebrow{color:var(--accent)}.tide-copy h2{font-size:25px;line-height:1.2;margin:5px 0 14px}.tide-copy p{font-size:16px;color:var(--muted);line-height:1.5}.tide-copy p strong{color:white;font-weight:500}
.direction-b .brand{background:white;color:var(--ink);border-bottom:4px solid var(--ink)}.direction-b .brand .mark{color:var(--ink)}.direction-b .brand .mark path:last-child{fill:white}.direction-b .brand span{color:var(--paper-muted)}.direction-b .visibility{border-color:white}.direction-b .almanac{position:absolute;left:40px;top:142px;bottom:164px;width:340px;max-height:590px;padding:24px;background:white;color:var(--ink);border-top:7px solid var(--ink)}.ann-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}.ann-head svg{width:22px;height:26px}.ann-current{margin-top:24px}.direction-b .time{font-family:Georgia,'Times New Roman',serif;font-size:92px;font-weight:normal;letter-spacing:-.06em;margin:4px 0 16px}.direction-b .weather{padding-bottom:22px;border-bottom:1px solid var(--line);gap:14px}.direction-b .weather span{color:var(--paper-muted)}.ann-tide{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:10px}.ann-tide h2{font-family:Georgia,'Times New Roman',serif;font-size:23px;font-weight:400}.ann-tide>strong{font-size:28px;white-space:nowrap}.ann-tide small{font-weight:400;font-size:16px}.curve{height:64px;width:100%;margin:15px 0 12px;color:var(--ink)}table{width:100%;font-size:16px;border-collapse:collapse}td{text-align:right;font-variant-numeric:tabular-nums}td,th{padding:12px 0;border-top:1px solid var(--line);white-space:nowrap}th{text-align:left;font-weight:400}table .next th{font-weight:700}.direction-b .tools{border-color:white}.direction-b .mode .active{background:white;color:var(--ink);box-shadow:none}.direction-b .cosmo{color:white}.direction-b footer .demo{background:white;color:var(--ink)}
.direction-c .brand{border-left:6px solid var(--accent);gap:18px}.direction-c .brand strong{font-size:31px;line-height:.9;font-weight:800;letter-spacing:.02em}.direction-c .brand span{color:white;letter-spacing:.22em}.direction-c .brand .mark{width:30px}.direction-c .mode{border:0;gap:0;padding:0}.direction-c .mode button{min-height:56px;padding:0 28px}.direction-c .mode .active{background:white;color:var(--ink);box-shadow:inset 0 -5px 0 var(--ink)}.direction-c .signal{position:absolute;left:40px;bottom:180px;width:530px}.signal-top{background:var(--ink);color:white;padding:22px 26px 24px;display:flex;gap:30px;align-items:center;justify-content:space-between;border-left:6px solid var(--accent)}.direction-c .time{font-size:114px;font-weight:800;line-height:1;letter-spacing:-.065em;margin-top:5px}.direction-c .weather{flex-direction:column;align-items:start;gap:2px;border-left:1px solid var(--line);padding-left:24px}.direction-c .weather strong{font-size:48px;font-weight:700}.direction-c .weather span{font-size:16px;line-height:1.5;white-space:nowrap}.signal-tide{background:white;color:var(--ink);padding:20px 26px;position:relative;display:flex;gap:16px;align-items:center;border-left:6px solid var(--ink);flex-wrap:wrap}.signal-tide h2{font-size:28px;font-weight:800;line-height:1.2}.signal-tide>strong{margin-left:auto;font-size:36px;white-space:nowrap;letter-spacing:-.04em}.signal-tide small{font-size:18px;font-weight:400}.rise{height:8px;width:100%;background:var(--ink);position:relative;margin:2px 0 0}.rise span{position:absolute;inset:2px 32% 2px 2px;background:var(--accent)}.rise svg{position:absolute;right:-1px;top:-8px;background:white;width:32px;height:24px}.signal-tide p{font-size:16px;display:flex;width:100%;justify-content:space-between}.direction-c .tools{padding:0;gap:0;border:0}.direction-c .tools button{min-height:62px;padding:0 24px}.direction-c .tools button+button{border-left:2px solid white}
dialog{border:2px solid var(--ink);background:white;color:var(--ink);padding:24px;width:min(450px,calc(100% - 32px));max-height:80dvh;font-size:18px}dialog::backdrop{background:#1C202680}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.dialog-head h2{font-size:32px}.dialog-head button{border:1px solid var(--ink);background:white;color:var(--ink);display:grid;place-items:center}dialog p{margin:16px 0;font-size:18px}.ambiance-options{display:flex;gap:8px}.ambiance-options button,.return{border:1px solid var(--ink);padding:10px 16px;background:var(--ink);color:white;font-size:16px}.ambiance-options button{flex:1}.atelier-note{color:var(--paper-muted)}.return{width:100%;margin-top:8px}
@media(max-width:699px){.stage{min-height:650px}.stage header{top:max(20px,env(safe-area-inset-top));left:20px;right:20px}.brand{min-height:56px;padding:8px 12px;gap:10px}.mark{height:36px;width:26px}.brand strong{font-size:20px}.brand span{font-size:14px;margin-top:4px;letter-spacing:.09em}.visibility{right:20px;top:max(20px,env(safe-area-inset-top));width:52px;height:56px}.mode{top:76px;left:0;transform:none;min-width:254px}.mode button{padding:0 18px}.tools{bottom:70px;left:20px;right:20px;transform:none;justify-content:space-between;gap:0;padding:4px}.tools button{flex:1;flex-direction:column;gap:4px;padding:6px 8px;font-size:14px;min-width:0;min-height:58px}.tools button+button{border-left:1px solid var(--line)}footer{left:20px;right:20px;bottom:max(10px,env(safe-area-inset-bottom));gap:0}.demo{font-size:14px;padding:8px 10px;max-width:154px;line-height:1.3}.cosmo{font-size:16px;padding:0 10px;gap:6px;min-height:48px}.cosmo svg{width:18px}.toast{bottom:148px}.scene>svg{width:100%;height:100%}.direction-a .clock{left:20px;top:170px;width:181px;padding:14px 14px 16px;border-radius:12px}.direction-a .time{font-size:45px;margin:3px 0 14px}.direction-a .weather{gap:9px;flex-wrap:wrap;padding-top:10px}.direction-a .weather>strong{font-size:27px}.direction-a .weather>span{flex-basis:100%;line-height:1.4;font-size:16px}.direction-a .weather svg{width:24px;height:24px}.direction-a .tide{left:20px;right:20px;bottom:153px;width:auto;padding:14px 12px;gap:14px;border-radius:14px;min-height:174px}.dial{width:142px;height:142px}.tide-copy .eyebrow{font-size:14px}.tide-copy h2{font-size:21px;margin:4px 0 8px}.tide-copy p{font-size:16px;line-height:1.4}.detail{font-size:16px;gap:8px;margin:8px 0 -8px}.detail svg{width:20px}.direction-b .almanac{left:20px;right:20px;top:auto;bottom:153px;width:auto;max-height:none;padding:14px 18px 8px;border-top-width:5px}.ann-head{padding-bottom:9px}.ann-head .eyebrow{font-size:14px}.ann-head svg{height:20px}.ann-current{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:16px}.direction-b .time{font-size:61px;line-height:1;margin:4px 0 0}.direction-b .weather{display:flex;align-items:start;flex-direction:column;gap:0;padding:0 0 0 16px;border:0;border-left:1px solid var(--line)}.direction-b .weather svg{display:none}.direction-b .weather strong{font-size:30px;line-height:1}.direction-b .weather span{font-size:16px;line-height:1.4}.ann-tide{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.ann-tide h2{font-size:23px}.ann-tide>strong{font-size:26px}.curve{display:none}td,th{padding:9px 0;font-size:16px}.direction-b table{margin-top:12px}.direction-b .tools{background:white;color:var(--ink);border:0}.direction-b .tools button{color:var(--ink)}.direction-b .tools button.active{background:var(--ink);color:white;box-shadow:none}.direction-b .tools button:hover{background:var(--ink);color:white}.direction-c .brand{padding:10px 14px;gap:10px;border-left-width:5px;min-height:56px}.direction-c .brand strong{font-size:24px}.direction-c .brand span{font-size:14px;letter-spacing:.12em}.direction-c .brand .mark{width:25px;height:36px}.direction-c .mode{top:76px;min-width:254px}.direction-c .mode button{min-height:48px;padding:0 20px}.direction-c .signal{left:20px;right:20px;bottom:153px;width:auto}.signal-top{padding:17px 16px 18px;gap:14px;border-left-width:5px}.direction-c .time{font-size:72px;line-height:.96;margin-top:10px}.direction-c .weather{padding-left:14px;gap:1px}.direction-c .weather strong{font-size:34px}.direction-c .weather span{font-size:16px;white-space:normal}.signal-tide{padding:14px 16px;gap:12px;border-left-width:5px}.signal-tide h2{font-size:23px}.signal-tide>strong{font-size:31px}.signal-tide .eyebrow{font-size:14px}.signal-tide p{font-size:16px}.direction-c .tools button{padding:6px 8px;min-height:66px}.direction-c .tools button+button{border-left-width:1px}}
@media(max-width:365px){.stage header{left:12px;right:12px}.visibility{right:12px}.direction-a .clock{left:12px;width:175px}.direction-a .tide,.direction-b .almanac,.direction-c .signal{left:12px;right:12px}.direction-a .tide{gap:8px;padding:10px}.dial{width:124px;height:124px}.tools{left:12px;right:12px}footer{left:12px;right:12px}.cosmo{padding:0 8px}.cosmo svg{display:none}.signal-top{gap:10px}.direction-c .time{font-size:64px}.direction-c .weather{padding-left:10px}.direction-c .weather span{font-size:16px}.direction-b .time{font-size:54px}}
@media(max-height:760px) and (max-width:699px){.direction-a .clock{top:160px}.direction-a .clock .weather>span{display:none}.direction-a .time{margin-bottom:9px}.direction-a .clock{padding-bottom:10px}.direction-a .tide{bottom:150px}.direction-b .almanac{bottom:150px}.direction-c .signal{bottom:150px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.board,.gallery{background:#EDF1F5;color:var(--ink)}.board{padding:38px 40px 28px}.board-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #95A2AD;padding-bottom:22px;margin-bottom:28px}.board-heading span,.gallery-head>span{font-size:14px;letter-spacing:.16em;font-weight:600}.board-heading h1,.gallery-head h1{font-size:52px;font-weight:500;letter-spacing:-.045em;margin:10px 0 0;line-height:1}.board-heading p{font-size:16px;line-height:1.5;text-align:right}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.specimen-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.specimen-label strong{font-size:22px;letter-spacing:-.02em;font-weight:600}.specimen-label span{font-size:14px;color:var(--paper-muted)}.specimen iframe{display:block;border:0;width:390px;height:844px;background:#243541;box-shadow:0 10px 22px #1C202618}.specimen>p{font-size:16px;line-height:1.4;margin-top:16px;max-width:390px}.board-foot{display:flex;justify-content:space-between;border-top:1px solid #95A2AD;margin-top:24px;padding-top:18px;font-size:14px;letter-spacing:.03em}.board.desktop{width:1600px}.desktop .board-grid{display:flex;flex-direction:column;gap:32px}.desktop .specimen iframe{width:1520px;height:950px}.desktop .specimen>p{max-width:none}.gallery{padding:48px;min-height:100dvh}.gallery-head{text-align:center}.gallery-head h1{font-size:68px;margin-top:20px}.gallery-head p{font-size:21px;margin:20px 0 24px}.gallery-head nav{display:flex;justify-content:center;gap:8px}.gallery-head button{font-size:16px;border:1px solid var(--ink);padding:0 24px;background:transparent;color:var(--ink)}.gallery-head button.active{background:var(--ink);color:white}.gallery-controls{display:flex;justify-content:center;align-items:center;gap:32px;margin:24px 0 36px;font-size:16px}.gallery-controls select{margin-left:10px;min-height:48px;padding:0 12px;background:white;border:1px solid #657584;font:inherit}.gallery a{color:var(--ink)}.gallery-grid{display:grid;grid-template-columns:repeat(3,390px);gap:36px;justify-content:center}.gallery .specimen-label{flex-direction:column;align-items:start;gap:5px}.gallery-foot{text-align:center;font-size:16px;margin-top:36px;color:var(--paper-muted)}.gallery.wide .gallery-grid{display:flex;flex-direction:column;align-items:center}.gallery.wide .specimen iframe{width:min(1440px,calc(100vw - 96px));height:900px}.gallery.wide .specimen{width:min(1440px,calc(100vw - 96px))}.gallery.wide .specimen>p{max-width:none}.gallery.wide .specimen-label{flex-direction:row}.gallery .specimen>a{font-size:16px}@media(max-width:1340px){.gallery{padding:32px 20px}.gallery-grid{grid-template-columns:repeat(2,390px)}}@media(max-width:880px){.gallery-grid{grid-template-columns:390px}.gallery-head h1{font-size:48px}.gallery-controls{gap:14px;flex-wrap:wrap}.gallery.wide .specimen iframe{height:740px}}@media(max-width:430px){.gallery-grid{grid-template-columns:100%}.specimen iframe{width:100%}.gallery{padding:28px 12px}.gallery-head h1{font-size:42px}.gallery-head p{font-size:18px}.gallery-foot{line-height:1.5}}

/* Finition mobile : cadrage éloigné et instrument compact. */
@media (max-width:699px){.direction-a .clock{width:218px;padding:14px 16px}.direction-a .time{font-size:54px;margin:2px 0 10px}.direction-a .weather{flex-wrap:nowrap;gap:10px}.direction-a .weather>span{flex-basis:auto;font-size:16px;line-height:1.4}.direction-a .weather>strong{font-size:28px}}
@media(max-width:365px){.direction-a .clock{width:208px}.direction-a .time{font-size:52px}.direction-a .weather{gap:8px}}
@media(max-height:760px) and (max-width:699px){.direction-a .clock .weather>span{display:block}}

.scene .phone-scene{display:none}
@media(max-width:699px){.scene .wide-scene{display:none}.scene .phone-scene{display:block}.direction-a .clock{width:208px}.direction-b .ann-head{display:none}.direction-b .ann-current{margin-top:0}}