/* ============================================================================
   antoinebaron.me - vitrine "Tech Explorer"
   Direction : instrument de precision. Deux themes via tokens :
   - sombre (defaut) : "l'instrument la nuit" (oscilloscope).
   - clair (data-theme="light") : la datasheet papier du CV (encre ardoise / laiton).
   IBM Plex Sans + Mono, accent unique laiton. Pas d'em-dash.
   ========================================================================== */

@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-display:swap;
  src:url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-style:italic; font-display:swap;
  src:url("fonts/ibm-plex-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-display:swap;
  src:url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-display:swap;
  src:url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:700; font-display:swap;
  src:url("fonts/ibm-plex-sans-700.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-display:swap;
  src:url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-display:swap;
  src:url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-display:swap;
  src:url("fonts/ibm-plex-mono-600.woff2") format("woff2"); }

/* ---------- Theme SOMBRE (defaut) ---------- */
:root{
  --accent:#a8741a; --accent-l:#d8a24a;            /* echelle laiton brute */
  --bg:#0d141d; --bg-2:#080d14;
  --scope-1:#14202e; --scope-2:#0d141d; --scope-3:#080d14;
  --tx:#e9eef3; --tx-soft:rgba(233,238,243,.62); --tx-faint:rgba(233,238,243,.40);
  --heading:#ffffff;
  --accent-ui:#d8a24a;                              /* laiton decoratif (led, filets, traits) */
  --accent-tx:#d8a24a;                              /* laiton en TEXTE (eyebrow, liens) */
  --line:rgba(233,238,243,.09);
  --tag-bg:rgba(233,238,243,.035);
  --tag-hover:rgba(216,162,74,.16);
  --grid-dot:rgba(233,238,243,.07);
  --baseline:rgba(216,162,74,.30);
  --vignette-edge:rgba(4,7,11,.6);
  --glow:rgba(216,162,74,.5);
  --name-shadow:0 2px 40px rgba(0,0,0,.4);
  --btn-bg:#d8a24a; --btn-fg:#10161f; --btn-tick:#10161f;
  --err:#e6a08f;
  --toggle-bg:rgba(13,20,29,.55);
  --sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Theme CLAIR (datasheet papier) ---------- */
:root[data-theme="light"]{
  --bg:#e7e9ee; --bg-2:#dfe2e8;
  --scope-1:#ffffff; --scope-2:#f3f1ec; --scope-3:#e7e9ee;
  --tx:#1b2530; --tx-soft:#58626f; --tx-faint:#8b96a3;
  --heading:#1b2530;
  --accent-ui:#a8741a;
  --accent-tx:#855a0f;
  --line:rgba(27,37,48,.14);
  --tag-bg:#f4f5f7;
  --tag-hover:rgba(168,116,26,.14);
  --grid-dot:rgba(27,37,48,.06);
  --baseline:rgba(168,116,26,.32);
  --vignette-edge:rgba(90,100,120,.10);
  --glow:rgba(168,116,26,0);
  --name-shadow:none;
  --btn-bg:#1b2530; --btn-fg:#ffffff; --btn-tick:#a8741a;
  --err:#9a3324;
  --toggle-bg:rgba(255,255,255,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .7s var(--ease), color .7s var(--ease)}

/* Bascule de theme : crossfade lent de toute la page (View Transitions API). */
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.9s; animation-timing-function:cubic-bezier(.2,.7,.2,1) }
.mono{font-family:var(--mono)}
a{color:var(--accent-tx); text-decoration:none}
:focus-visible{outline:2px solid var(--accent-ui); outline-offset:3px}
.skip{position:absolute; left:-999px; top:0; z-index:60; background:var(--accent-ui); color:#10161f;
  padding:.6rem 1rem; font-family:var(--mono); font-size:.78rem}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- Bouton bascule de theme ---------- */
.theme-toggle{position:fixed; top:1rem; right:1rem; z-index:55; width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--accent-tx); background:var(--toggle-bg); border:1px solid var(--line); border-radius:50%;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .7s var(--ease)}
.theme-toggle:hover{color:var(--accent-ui); border-color:var(--accent-ui)}
.theme-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.theme-toggle .ico-moon{display:none}
:root[data-theme="light"] .theme-toggle .ico-sun{display:none}
:root[data-theme="light"] .theme-toggle .ico-moon{display:inline}

/* ---------- Selecteur de langue ---------- */
.lang-switch{position:fixed; top:1rem; left:1rem; z-index:55; display:flex; gap:.45rem; align-items:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:1.5px;
  background:var(--toggle-bg); border:1px solid var(--line); border-radius:2px; padding:.45rem .65rem;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .7s var(--ease)}
.lang-switch a{color:var(--tx-faint); text-transform:uppercase}
.lang-switch a:hover{color:var(--accent-ui)}
.lang-switch a.on{color:var(--accent-tx); font-weight:600}
.lang-switch .sep{color:var(--line)}

/* ============================================================================
   Hero : ecran / signal
   ========================================================================== */
.scope{position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 32%, var(--scope-1) 0%, var(--scope-2) 55%, var(--scope-3) 100%);
  display:flex; flex-direction:column; justify-content:center}
.scope-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.grid{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.6;
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1.4px);
  background-size:38px 38px}
.grid::after{content:""; position:absolute; left:0; right:0; top:54%;
  height:1px; background:linear-gradient(90deg, transparent, var(--baseline) 25%, var(--baseline) 75%, transparent)}
.vignette{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%, transparent 50%, var(--vignette-edge))}

.scope-ui{position:relative; z-index:4; text-align:center; padding:7rem 1.25rem 2.5rem}
.eyebrow{margin:0 0 1.7rem; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:3.5px;
  text-transform:uppercase; color:var(--accent-tx)}
.led{width:7px;height:7px;border-radius:50%;background:var(--accent-ui);
  box-shadow:0 0 7px 1px var(--glow); animation:led 3s var(--ease) infinite}
@keyframes led{0%,100%{box-shadow:0 0 7px 1px var(--glow)} 50%{box-shadow:0 0 2px 0 transparent}}

.name{margin:0; font-weight:600; line-height:.94; letter-spacing:-1px; color:var(--heading);
  font-size:clamp(2.9rem,9.5vw,6.8rem); text-shadow:var(--name-shadow)}
.name .gv{display:inline-block; overflow:hidden; vertical-align:bottom}
.name .gv span{display:block}
.name .last{font-weight:700}
.name-rule{width:52px; height:2px; background:var(--accent-ui); margin:1.5rem auto 1.3rem;
  box-shadow:0 0 14px 1px var(--glow)}
.role{margin:0; font-family:var(--mono); font-size:clamp(.74rem,1.4vw,.88rem); font-weight:500;
  letter-spacing:2.2px; text-transform:uppercase; color:var(--tx-soft)}

.channels{margin:2.4rem 0 0; display:flex; gap:1.8rem; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:.7rem; letter-spacing:1.5px; color:var(--tx-faint)}
.channels .ch{display:inline-flex; align-items:center; gap:.5rem}
.channels .ch::before{content:""; width:6px; height:6px; border-radius:50%}
.channels .ch1::before{background:var(--accent-ui); box-shadow:0 0 7px var(--glow)}
.channels .ch2::before{background:var(--tx-faint)}

.scroll-cue{position:absolute; left:0; right:0; bottom:1.6rem; z-index:4; text-align:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--tx-faint);
  animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0); opacity:.4} 50%{transform:translateY(5px); opacity:.75}}

/* ============================================================================
   Contenu
   ========================================================================== */
.wrap{max-width:1040px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
.readouts{padding:clamp(3.5rem,9vw,7rem) 0 clamp(1rem,3vw,2rem)}
.chan{display:grid; grid-template-columns:190px 1fr; gap:clamp(1rem,3vw,3rem);
  padding:clamp(2.2rem,5vw,3.4rem) 0; border-top:1px solid var(--line)}
.chan-id{font-family:var(--mono)}
.chan-id .big{display:block; font-size:clamp(2.2rem,4.5vw,3.2rem); font-weight:600; line-height:1; letter-spacing:-1px;
  color:transparent; -webkit-text-stroke:1px var(--accent-ui); text-stroke:1px var(--accent-ui)}
.chan-id .lab{display:block; margin-top:.6rem; font-size:.7rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--tx-faint)}
.chan-id .since{display:block; margin-top:.2rem; color:var(--accent-tx)}
.chan h2{margin:0 0 .9rem; font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; line-height:1.2; color:var(--heading)}
.chan p{margin:0 0 1.3rem; max-width:60ch; color:var(--tx-soft); font-size:1rem; line-height:1.65}
.chan .kicker{margin:-.25rem 0 1.3rem; color:var(--heading); font-style:italic; text-wrap:balance}
.kicker::before{content:""; display:block; width:40px; height:2px; margin-bottom:1.1rem;
  background:linear-gradient(90deg,var(--accent-ui),transparent)}
.tags{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.45rem}
.tags li{position:relative; overflow:hidden; z-index:0; cursor:default;
  font-family:var(--mono); font-size:.72rem; color:var(--tx-soft);
  background:var(--tag-bg); border:1px solid var(--line); border-radius:2px; padding:.2rem .6rem}
.tags li::before{content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:55%; z-index:-1;
  background:linear-gradient(90deg, transparent, var(--tag-hover), transparent);
  transform:translateX(-120%) skewX(-18deg)}
.tags li:hover::before{animation:sheen 1.8s cubic-bezier(.15,.6,.3,1)}
@keyframes sheen{to{transform:translateX(240%) skewX(-18deg)}}

.contact{border-top:1px solid var(--line); margin-top:clamp(1.5rem,4vw,2.5rem);
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(3.5rem,8vw,5.5rem); text-align:center}
.contact-k{margin:0 0 1rem; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:2.6px; text-transform:uppercase; color:var(--tx-faint)}
.contact-k .sq{width:7px;height:7px;background:var(--accent-ui)}
.contact h2{margin:0 0 .9rem; font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:600; letter-spacing:-.3px; color:var(--heading)}
.contact .intro{margin:0 auto 2.4rem; max-width:46ch; color:var(--tx-soft); font-size:1.05rem; line-height:1.6}
.form{max-width:520px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.5rem; text-align:left}
.form .field{display:flex; flex-direction:column}
.form .field.wide{grid-column:1 / -1}
.form label{font-family:var(--mono); font-size:.6rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--tx-faint); margin-bottom:.4rem}
.form input,.form textarea{font-family:var(--mono); font-size:.9rem; color:var(--tx); background:transparent;
  border:0; border-bottom:1.5px solid var(--line); padding:.5rem 0; transition:border-color .25s var(--ease)}
.form input::placeholder,.form textarea::placeholder{color:var(--tx-faint)}
.form textarea{resize:vertical; min-height:5rem; line-height:1.5}
.form input:focus,.form textarea:focus{outline:0; border-bottom-color:var(--accent-ui)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.send{grid-column:1 / -1; justify-self:center; cursor:pointer;
  font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bg); border-radius:2px;
  padding:.75rem 1.9rem; display:inline-flex; align-items:center; gap:.6rem; transition:filter .2s, transform .08s}
.send::before{content:""; width:7px; height:7px; background:var(--btn-tick)}
.send:hover{filter:brightness(1.08)}
.send:active{transform:translateY(1px)}
.form-status{grid-column:1 / -1; text-align:center; font-family:var(--mono); font-size:.78rem; line-height:1.5; color:var(--tx-soft); min-height:1.1em}
.form-status.ok{color:var(--accent-tx)} .form-status.err{color:var(--err)}

.foot{border-top:1px solid var(--line); padding:1.7rem 0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.4px; color:var(--tx-faint); display:flex; flex-wrap:wrap; gap:.4rem .9rem; justify-content:center}
.foot .dot{color:var(--line)}

/* ---------- Mise sous tension ---------- */
html.js .name .gv span{animation:engrave .85s var(--ease) both}
html.js .name .gv:nth-child(1) span{animation-delay:.5s}
html.js .name .gv:nth-child(2) span{animation-delay:.64s}
html.js .eyebrow{animation:fade .7s var(--ease) .25s both}
html.js .name-rule{animation:draw .7s var(--ease) 1s both}
html.js .role{animation:fade .6s var(--ease) 1.15s both}
html.js .channels{animation:fade .7s var(--ease) 1.3s both}
html.js .scroll-cue{opacity:0; animation:cuein .6s var(--ease) 1.8s forwards}
@keyframes engrave{from{transform:translateY(105%)} to{transform:translateY(0)}}
@keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes draw{from{width:0} to{width:52px}}
@keyframes cuein{to{opacity:.4}}

.reveal{opacity:1}
html.js .reveal{opacity:0; transform:translateY(16px)}
html.js .reveal.seen{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease)}

@media (max-width:680px){
  .chan{grid-template-columns:1fr; gap:1rem}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  html.js .name .gv span,html.js .eyebrow,html.js .role,html.js .channels{opacity:1; transform:none}
  html.js .name-rule{width:52px}
  html.js .scroll-cue{opacity:.4}
  html.js .reveal{opacity:1; transform:none}
  .led{animation:none}
}