@import url(/assets/fonts/fonts.css);

/* taelyos.com — sobre : encre presque noire, un seul ambre qui luit un peu, des titres en mono, des champs de
   chiffres en caractères (le style de la bannière de Taelyos). Un geste par page, le reste discret. Peu de texte.

   Composants (à réutiliser tels quels pour une nouvelle page ou un nouveau produit) :
     .eyebrow            petite ligne en capitales mono, ambre (au-dessus d'un titre)
     .big / .decode      grand titre condensé ambre ; .decode : il se décode à l'arrivée (core.js)
     .lede               une phrase, pas plus
     .facts              rangée de faits mono : <dl class="facts"><div><dt>…</dt><dd>…</dd></div>…</dl>
     .btn, .btn.ghost    boutons mono (ambre plein / filet)
     .piece              une section produit de l'accueil : texte d'un côté, dessin de l'autre
     .sec, .sec-head     une section de page produit, numérotée
     .nums               grands chiffres mono : <div class="nums"><div><b>…</b><h3>…</h3><p>…</p></div>…</div>
     .rows               lignes à filets : <dl class="rows"><div><dt>…</dt><dd>…</dd></div>…</dl>
     .draw               cadre d'un dessin : <figure class="draw"><canvas class="ascii" data-draw="…"></canvas></figure>
     .shots              captures de téléphone en rangée
     .faq                questions repliées (<details>)
*/

:root{
  --ink:#14100f; --deep:#0d0a09; --panel:#1a1614;
  --paper:#ebe4d6; --paper-2:#bdb5a6; --muted:#8f877a; --faint:#5d574e;
  --line:#25221f; --line-2:#36322d;
  --amber:#e0a63a; --amber-hi:#f2bb57; --amber-soft:rgba(224,166,58,.12); --amber-line:rgba(224,166,58,.55);
  --glow:#ffd38a;
  --ink-rgb:20,16,15;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --max:1280px; --pad:clamp(18px,3.6vw,52px); --ease:cubic-bezier(.2,.7,.2,1); --bar:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--paper);background:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:var(--bar)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:var(--ink)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.t-skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--amber);color:var(--ink);padding:8px 12px;font-family:var(--mono);font-size:.8rem}
.t-skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}

/* ---------- en-tête ---------- */
.t-top{position:sticky;top:0;z-index:20;background:rgba(var(--ink-rgb),.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.t-top .wrap{display:flex;align-items:center;gap:10px 28px;min-height:58px;padding-block:8px;flex-wrap:wrap}
.t-logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:.95rem;margin-right:auto}
.t-logo .cur{width:.55em;height:1.05em;background:var(--amber);box-shadow:0 0 10px rgba(224,166,58,.55)}
.t-nav{display:flex;gap:2px 22px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:var(--paper-2)}
.t-nav a{padding:6px 0;transition:color .2s}
.t-nav a:hover,.t-nav a[aria-current]{color:var(--amber)}
.t-lang{font-family:var(--mono);font-size:.78rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.t-lang b{color:var(--amber);font-weight:500}
.t-lang a{padding:6px 0}
.t-lang a:hover{color:var(--paper)}

/* ---------- textes ---------- */
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:500}
.big{font-family:var(--mono);font-weight:500;font-size:clamp(2.6rem,1.7rem + 3.6vw,5.2rem);line-height:1;letter-spacing:-.045em;color:var(--amber);text-shadow:0 0 22px rgba(224,166,58,.3)}
.x{color:var(--faint)}
.lede{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.32;font-weight:400;letter-spacing:-.01em;color:var(--paper);max-width:22em;text-wrap:balance}
.note{font-size:.92rem;color:var(--muted);max-width:56ch;text-wrap:pretty}
.note a,.prose a{color:var(--amber);border-bottom:1px solid var(--amber-line)}
.note a:hover,.prose a:hover{color:var(--amber-hi)}

.facts{display:flex;flex-wrap:wrap;gap:14px 34px;padding-top:16px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:.8rem}
.facts dt{color:var(--muted);font-size:.72rem;letter-spacing:.06em}
.facts dd{color:var(--paper);margin-top:2px}
.facts dd a{color:var(--amber);border-bottom:1px solid var(--amber-line)}
.facts dd a:hover{color:var(--amber-hi)}

.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 17px;font-family:var(--mono);font-size:.86rem;border:1px solid var(--amber);background:var(--amber);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--amber-hi);border-color:var(--amber-hi)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn svg{width:16px;height:16px}
.more{font-family:var(--mono);font-size:.84rem;color:var(--amber);display:inline-flex;gap:8px;align-items:center;justify-self:start}
.more::after{content:"→";transition:transform .25s var(--ease)}
.more:hover{color:var(--amber-hi)}
.more:hover::after{transform:translateX(4px)}

canvas.ascii{display:block;width:100%;height:100%}
.draw{position:relative}
.draw canvas{height:clamp(220px,26vw,340px)}
.draw .tip{position:absolute;right:0;top:0;font-family:var(--mono);font-size:.72rem;color:var(--amber);pointer-events:none}

/* ---------- accueil ---------- */
/* l'accueil : le texte à gauche, un champ de chiffres qui s'épaissit vers la droite (comme la bannière) */
.hero{position:relative;min-height:clamp(420px,62vh,620px);display:flex;align-items:center;padding-block:clamp(40px,6vw,88px)}
.hero > div{position:relative;z-index:1;max-width:620px}
.hero .field{position:absolute;inset:0 0 0 auto;width:min(100%,1180px);height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%);filter:drop-shadow(0 0 5px rgba(224,166,58,.28))}
.hero h1{font-family:var(--mono);font-size:clamp(2rem,1.3rem + 2.6vw,3.5rem);line-height:1.08;font-weight:500;letter-spacing:-.04em;margin-top:18px;max-width:13em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--amber);text-shadow:0 0 22px rgba(224,166,58,.3)}
.hero .btns{margin-top:32px}


.piece{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(24px,5vw,72px);align-items:center;padding-block:clamp(44px,6vw,84px);border-top:1px solid var(--line)}
.piece .txt{display:grid;gap:18px;align-content:start}
.piece .head{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.piece .head img,.piece .head svg{width:34px;height:34px;border-radius:8px;flex:none}
.piece .lede{font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem)}

.contact{padding-block:clamp(44px,6vw,84px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px}
.contact h2{font-family:var(--mono);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);font-weight:500;letter-spacing:-.04em}
.contact .mail{font-family:var(--mono);font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);color:var(--amber);border-bottom:1px solid var(--amber-line)}
.contact .mail:hover{color:var(--amber-hi)}

/* ---------- pages produit ---------- */
.p-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px clamp(24px,5vw,72px);align-items:center;padding-block:clamp(36px,6vw,84px) clamp(30px,4vw,56px)}
.p-hero .txt{display:grid;gap:20px;align-content:start}
.p-hero .head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.p-hero .head img,.p-hero .head svg{width:30px;height:30px;border-radius:7px}

.sec{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:baseline;margin-bottom:clamp(22px,3vw,36px)}
.sec-head .n{font-family:var(--mono);font-size:.78rem;color:var(--amber)}
.sec-head h2{font-family:var(--mono);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);font-weight:500;letter-spacing:-.04em;line-height:1.1}
.sec-head p{grid-column:2;color:var(--paper-2);max-width:52ch;margin-top:6px}

.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-top:1px solid var(--line-2)}
.nums > div{padding:20px 22px 22px 0;border-bottom:1px solid var(--line-2)}
.nums b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);color:var(--amber);letter-spacing:-.02em;line-height:1.1}
.nums b small{font-size:.5em;color:var(--muted);margin-left:4px;letter-spacing:0}
.nums h3{font-size:1rem;font-weight:600;margin-top:10px}
.nums p{color:var(--paper-2);font-size:.92rem;max-width:30ch;margin-top:4px}

.rows{border-top:1px solid var(--line-2)}
.rows > div{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr);gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.rows dt{font-family:var(--mono);font-size:.82rem;color:var(--amber)}
.rows dd{color:var(--paper-2)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px clamp(24px,5vw,72px);align-items:start}

.debrief{border:1px solid var(--line-2);background:var(--panel);padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.debrief .q{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.debrief blockquote{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.35;font-weight:500}
.debrief mark{background:var(--amber-soft);color:var(--amber-hi);padding:0 2px}
.debrief .read{color:var(--paper-2);font-size:.95rem}
.debrief .better{border-left:2px solid var(--amber);padding-left:14px;color:var(--paper-2)}
.debrief .better b{display:block;font-family:var(--mono);font-size:.74rem;color:var(--amber);font-weight:500;margin-bottom:4px}
.checks{list-style:none;display:grid;gap:12px}
.checks li{position:relative;padding-left:22px;color:var(--paper-2);max-width:46ch}
.checks li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--amber)}

pre{font-family:var(--mono);font-size:.88rem;background:var(--deep);border:1px solid var(--line-2);padding:16px 18px;overflow-x:auto;color:var(--paper);margin-bottom:12px}

.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.shots figure{display:grid;gap:12px;align-content:start}
.shots img{border-radius:22px;border:1px solid var(--line-2);background:var(--panel)}
.shots h3{font-size:.98rem;font-weight:600;line-height:1.3}
.shots p{color:var(--muted);font-size:.86rem;line-height:1.45}

form.join{display:grid;gap:10px;max-width:520px}
form.join label{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.04em}
form.join .field{display:flex;gap:8px;flex-wrap:wrap}
form.join input[type=email]{flex:1 1 220px;min-height:46px;padding:0 14px;background:var(--deep);border:1px solid var(--line-2);color:var(--paper);font-family:var(--mono);font-size:.92rem;border-radius:0}
form.join input[type=email]::placeholder{color:var(--faint)}
form.join input[type=email]:focus{border-color:var(--amber);outline:none}
form.join input[aria-invalid=true]{border-color:#d0624b}
form.join .btn{min-height:46px}
form.join .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.join .state{font-family:var(--mono);font-size:.82rem;min-height:1.3em}
form.join .state.ok{color:var(--amber-hi)}
form.join .state.err{color:#e08a73}
form.join.done .field{display:none}
form.join .facts-line{font-family:var(--mono);font-size:.76rem;color:var(--paper-2)}
form.join .gdpr{font-size:.78rem;color:var(--faint);line-height:1.5}
form.join .gdpr a{color:var(--paper-2);border-bottom:1px solid var(--line-2)}

.faq{border-top:1px solid var(--line-2);max-width:820px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;gap:20px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--amber);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--paper-2);padding:0 0 18px;max-width:64ch}

/* ---------- pages légales, mentions, 404 ---------- */
.prose{max-width:72ch;padding-block:clamp(32px,5vw,64px)}
.prose h1{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.8rem);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-bottom:18px}
.prose h2{font-size:1.25rem;font-weight:600;margin:34px 0 10px;letter-spacing:-.01em}
.prose h3{font-size:1.02rem;font-weight:600;margin:22px 0 6px}
.prose p,.prose li{color:var(--paper-2);margin-bottom:10px}
.prose ul,.prose ol{padding-left:1.3em;margin-bottom:12px}
.prose strong,.prose b{color:var(--paper);font-weight:600}
.prose table{border-collapse:collapse;width:100%;margin:14px 0 18px;font-size:.92rem}
.prose th,.prose td{border-bottom:1px solid var(--line-2);padding:8px 10px 8px 0;text-align:left;vertical-align:top;color:var(--paper-2)}
.prose th{color:var(--paper);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line-2);margin:28px 0}
nav.legal{display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:22px;font-family:var(--mono);font-size:.78rem;color:var(--paper-2)}
nav.legal a:hover,nav.legal a[aria-current]{color:var(--amber)}
.lg-bar{padding-top:22px}
.lg-app{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.lg-app img{width:26px;height:26px;border-radius:6px}
.lg-app span{color:var(--muted);font-weight:400}
.lost{padding-block:clamp(60px,10vw,140px);display:grid;gap:22px;justify-items:start}

/* ---------- pied de page ---------- */
.t-foot{border-top:1px solid var(--line);padding-block:28px 34px;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.t-foot .wrap{display:grid;gap:14px}
.t-foot .row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.t-foot .row b{color:var(--paper);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.t-foot .row b img{width:18px;height:18px;border-radius:4px}
.t-foot a:hover{color:var(--amber)}
.t-foot .mail{color:var(--amber)}
.t-foot p{max-width:90ch;line-height:1.55}

/* ---------- barre d'état ---------- */
.status{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--bar);display:flex;align-items:stretch;background:var(--deep);border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden}
.status > *{display:flex;align-items:center;padding:0 12px}
.status .mode{background:var(--amber);color:var(--ink);font-weight:500;letter-spacing:.06em}
.status .where{color:var(--paper-2);flex:1;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line)}
.status .clock{border-left:1px solid var(--line)}
.status .clock b{color:var(--paper);font-weight:500;margin-left:6px}

@media (max-width:900px){
  .hero,.piece,.p-hero,.split{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .field{width:100%;opacity:.22;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
}
@media (max-width:560px){
  .t-top .wrap{gap:4px 18px}
  .t-logo{flex:1 0 auto}
  .rows > div{grid-template-columns:minmax(0,1fr)}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .sec-head p{grid-column:1}
  .status .where{display:none}
  .status .clock{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}