@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-ext-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-ext-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-ext-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--max:1120px;--gutter:clamp(20px,5vw,48px)}
.t-hinode{--night:#000;--ink:#fff;--dawn:#22d3ee;--on-dawn:#000;--mist:#9aa6b0;--panel:#0e1114;--line:#20262c;color-scheme:dark}
.t-studio{--night:#f2f3ef;--ink:#121417;--dawn:#121417;--on-dawn:#fff;--mist:#5c6268;--panel:#fafbf8;--line:#d6d9d2;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--ink);font:400 18px/1.6 "Figtree",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--dawn);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:"Bricolage",system-ui,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(2.5rem,6.4vw,4.75rem);max-width:15ch}
h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:20ch}
h3{font-size:1.35rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
p{max-width:62ch}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.55;margin-top:1.4rem}

/* en-tête */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:12px;text-decoration:none;font-family:"Bricolage";font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.brand svg{width:34px;height:22px}
.nav{display:flex;gap:clamp(14px,3vw,30px);align-items:center;font-weight:500;font-size:1rem}
.nav a{text-decoration:none;opacity:.9;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{opacity:1;color:var(--dawn)}
.nav .lang{border:1px solid var(--line);border-radius:999px;padding:5px 14px}
@media (max-width:480px){.nav{gap:14px;font-size:.95rem}.nav .lang{padding:4px 10px}.brand{font-size:1.05rem;gap:9px}.brand svg{width:28px}}

/* le lever de soleil */
.dawn{position:relative;width:100%;overflow:hidden;margin-top:clamp(28px,6vw,56px)}
.dawn svg{display:block;width:100%;height:auto}
.dawn .sun{transform-box:view-box;transform-origin:50% 100%;animation:rise 2.4s cubic-bezier(.2,.7,.1,1) .2s both}
.dawn .glow{animation:glow 2.8s ease-out .2s both}
@keyframes rise{from{transform:translateY(58%)}to{transform:translateY(0)}}
@keyframes glow{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dawn .sun,.dawn .glow{animation:none}}

section{padding-block:clamp(64px,10vw,120px)}
.intro{padding-top:clamp(40px,7vw,80px)}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;font-weight:600;font-size:1.05rem;text-decoration:none;transition:transform .15s ease}
.btn-dawn{background:var(--dawn);color:var(--on-dawn)}
.btn-dawn:hover{transform:translateY(-1px)}
.btn-soon{border:1.5px solid var(--line);color:var(--ink)}
.btn-soon span{width:9px;height:9px;border-radius:50%;background:var(--dawn);box-shadow:0 0 12px var(--dawn)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* liste des apps */
.app-row{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2.4rem}
.app-row img{width:96px;height:96px;border-radius:22px;box-shadow:0 0 0 1px var(--line)}
.app-row h3{font-size:1.7rem}
.app-row p{margin-top:.35rem}
.app-row .status{color:var(--mist);font-size:.95rem;margin-top:.6rem}
@media (max-width:720px){.app-row{grid-template-columns:auto 1fr}.app-row{align-items:start}.app-row .btn{grid-column:1/-1;justify-self:start}.app-row img{width:72px;height:72px;border-radius:17px}}

.app-row + .app-row{border-top:0;margin-top:0}
.mono{width:96px;height:96px;border-radius:22px;border:1.5px dashed var(--mist);display:grid;place-items:center;font-family:"Bricolage";font-weight:700;font-size:2.2rem;color:var(--mist)}
@media (max-width:720px){.mono{width:72px;height:72px;border-radius:17px;font-size:1.7rem}}
.app-row .soon{color:var(--mist);font-weight:500;font-size:.95rem;border:1px solid var(--line);border-radius:999px;padding:8px 16px;white-space:nowrap}
@media (max-width:720px){.app-row .soon{grid-column:1/-1;justify-self:start}}
.sublinks{display:flex;flex-wrap:wrap;gap:22px;margin-top:1.4rem;font-weight:500}
.sublinks a{color:var(--dawn);text-decoration:none}
.sublinks a:hover{text-decoration:underline}
/* tuiles d'apps : chaque app garde ses propres couleurs */
.tiles{display:grid;gap:20px;margin-top:2.4rem}
.tile{position:relative;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;min-height:460px;background:var(--night);color:var(--ink)}
.tile-body{padding:clamp(28px,4.5vw,56px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.tile-body img{width:64px;height:64px;border-radius:15px;box-shadow:0 0 0 1px var(--line)}
.tile h3{font-size:clamp(2rem,4vw,2.8rem);margin-top:1.2rem;letter-spacing:-.025em}
.tile p{margin-top:.7rem;max-width:42ch}
.tile .status{color:var(--mist);font-size:.95rem}
.tile .btn{margin-top:1.8rem}
.tile-hinode{background:radial-gradient(520px 340px at 72% 105%,rgba(34,211,238,.38),rgba(34,211,238,0) 70%),#000}
.tile-shot{display:flex;justify-content:center;align-items:flex-start;padding-top:56px;max-height:460px}
.tile-shot .phone{width:290px;margin:0}
.tile-next{grid-template-columns:auto 1fr auto;min-height:0;align-items:center;gap:28px;padding:clamp(24px,3.5vw,40px);background:var(--panel);border:1.5px dashed var(--line)}
.tile-next h3{margin-top:0;font-size:1.8rem}
.tile-next p{margin-top:.35rem}
@media (max-width:820px){.tile{grid-template-columns:1fr}.tile-shot{max-height:340px;padding-top:8px}.tile-shot .phone{width:250px}.tile-next{grid-template-columns:auto 1fr;align-items:start}.tile-next .soon{grid-column:1/-1;justify-self:start}}
.soon{color:var(--mist);font-weight:500;font-size:.95rem;border:1px solid var(--line);border-radius:999px;padding:8px 16px;white-space:nowrap}
/* principes */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);margin-top:2.6rem}
.principles div{border-top:3px solid var(--ink);padding-top:22px}
.principles div:first-child{border-color:var(--dawn)}
.principles p{margin-top:.6rem}
@media (max-width:820px){.principles{grid-template-columns:1fr}}

/* page Hinode */
.hero-app{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center;padding-block:clamp(28px,5vw,64px) clamp(64px,9vw,110px)}
.app-id{display:flex;align-items:center;gap:14px;margin-bottom:1.6rem;font-family:"Bricolage";font-weight:700;font-size:1.4rem}
.app-id img{width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 1px var(--line)}
@media (max-width:860px){.hero-app{grid-template-columns:1fr}}

.phone{position:relative;width:min(100%,330px);margin:0 auto;border-radius:52px;padding:11px;background:#0b0d10;box-shadow:0 0 0 2px #2a3036,0 30px 90px rgba(34,211,238,.22)}
.phone img{border-radius:42px;width:100%}
.phone::after{content:"";position:absolute;top:22px;left:50%;width:30%;height:26px;margin-left:-15%;border-radius:20px;background:#000}

.feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,7vw,96px);align-items:center;padding-block:clamp(48px,8vw,96px);border-top:1px solid var(--line)}
.feature:nth-of-type(even){grid-template-columns:1.15fr .85fr}
.feature:nth-of-type(even) .phone{order:2}
.feature .phone{width:min(100%,300px)}
.feature p{margin-top:1.1rem}
@media (max-width:860px){.feature,.feature:nth-of-type(even){grid-template-columns:1fr}.feature .phone,.feature:nth-of-type(even) .phone{order:2}}

.privacy-list{list-style:none;margin-top:2.2rem;display:grid;gap:0}
.privacy-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.privacy-list li::before{content:"";width:14px;height:14px;margin-top:.45em;border-radius:50%;border:3px solid var(--dawn)}
.note{color:var(--mist);font-size:.95rem;margin-top:1.6rem}

/* pages de texte (support, confidentialité, mentions) */
.doc{padding-block:clamp(40px,7vw,80px) clamp(64px,9vw,110px)}
.doc h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:none}
.doc .updated{color:var(--mist);margin-top:.8rem}
.doc h2{font-size:1.6rem;margin-top:2.6rem;max-width:none}
.doc p,.doc li{margin-top:.9rem;max-width:68ch}
.doc ul{padding-left:1.3em}
.doc li::marker{color:var(--dawn)}
.doc strong{font-weight:600}
.doc a{color:var(--dawn)}
.doc .qa{border-top:1px solid var(--line);padding:22px 0 4px;margin-top:22px}
.doc .qa h3{font-size:1.25rem}
.doc .todo{background:var(--line);color:var(--ink);padding:1px 6px;border-radius:5px}

/* pied de page */
footer{border-top:1px solid var(--line);padding-block:40px 56px;font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer a{text-decoration:none}
footer a:hover{color:var(--dawn)}
footer .legal{color:var(--mist)}