/* Styles extraits de index.html */

:root{
  --bg: #0b0f19;
  --surface: #0f1525;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --line: #1f2535;
  --brand: #3a6fed;
  --brand-2: #22d3ee;
  --glow: 28px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f7fafc; --surface:#ffffff; --text:#0b1220; --muted:#596173; --line:#e6e8ef;
    --brand:#3a6fed; --brand-2:#0891b2;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background:
    radial-gradient(900px 420px at 90% -10%, color-mix(in oklab, var(--brand-2) 12%, transparent), transparent),
    radial-gradient(1200px 600px at -10% 0%, color-mix(in oklab, var(--brand) 20%, transparent), transparent),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.wrap{ max-width:1120px; margin-inline:auto; padding: 2rem 1rem 3rem; }
.grid{ display:grid; grid-template-columns: 320px 1fr; gap:1.75rem; }
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

aside.sidebar{ position:relative; }
.sticky{ position:sticky; top:1.25rem; }
.card{ background: var(--surface); border:1px solid var(--line); border-radius:1.25rem; box-shadow:0 1px 0 rgba(0,0,0,.25);
       overflow:hidden; }
.card .inner{ padding:1.35rem; }

.head{ display:flex; align-items:center; gap:1rem; }
.avatar{ width:4.25rem; height:4.25rem; border-radius:1rem; display:grid; place-items:center; font-weight:700; color:#111;
         border:1px solid var(--line); object-fit:cover; }

h1{ font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); margin:0; }
.subtitle{ margin:.25rem 0 0; color:var(--muted); }
.loc{ margin:.2rem 0 0; font-size:.95rem; color: color-mix(in oklab, var(--text) 70%, transparent); }

.chips{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ font-size:.86rem; color:var(--text); border:1px solid var(--line); padding:.45rem .6rem; border-radius:.6rem; background:color-mix(in oklab, var(--surface) 90%, transparent); }

.intro{ margin-top:.9rem; margin-bottom:0; line-height:1.5; color: color-mix(in oklab, var(--text) 85%, transparent); }
.paragraph{ margin-top:.6rem; line-height:1.5; color: color-mix(in oklab, var(--text) 85%, transparent); }

.cta{ margin-top:1rem; display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:650; padding:.85rem 1.05rem; border-radius: .9rem;
      border:1px solid color-mix(in oklab, var(--brand) 55%, var(--line));
      background: color-mix(in oklab, var(--brand) 12%, transparent); color: color-mix(in oklab, var(--brand) 70%, var(--text)); }
.cta:hover{ background: color-mix(in oklab, var(--brand) 16%, transparent); }

.mail{ display:flex; gap:.5rem; margin-top:.9rem; }
.mail a{ width: 100%; text-decoration:none; font-size:.9rem; color:var(--muted); border:1px dashed var(--line); padding:.4rem .6rem; border-radius:.6rem; }
.mail a:hover{ border-style:solid; color:var(--text); }
.mail img{ width:24px; height:24px; vertical-align: middle; margin-right: 6px; }
.mail span{ vertical-align: middle; }

footer.small{ margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }

.section-title{ margin:.2rem 0 .9rem; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--muted); font-weight:700; }

.stack{ display:flex; flex-direction:column; gap:.9rem; }
.link{ display:flex; align-items:center; gap:1rem; text-decoration:none; background: var(--surface); border:1px solid var(--line); border-radius:1rem; padding: .95rem 1.05rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.link:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--line) 40%, var(--text)); box-shadow: 0 12px 28px rgba(0,0,0,.18); }

.spot{
    min-width: fit-content;
    border-radius:.6rem;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    background:linear-gradient(180deg, color-mix(in oklab, #ffffff 6%, transparent), transparent);
    overflow: hidden;
}
.label{ font-weight:700; color:var(--text); }
.desc{ color:var(--muted); font-size:.95rem; }
.grow{ flex:1 1 auto; min-width:0; }

.badge {
    margin-left:auto;
    font-size:.82rem;
    color: var(--muted);
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    border:1px solid var(--line);
    padding:.35rem .65rem;
    border-radius:.6rem;
    background: color-mix(in oklab, var(--surface) 90%, transparent);
}

.cols{ display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; }
@media (max-width: 700px){ .cols{ grid-template-columns: 1fr; } }

svg{ display:block; }
.ico{ width:2.5rem; height:2.5rem; }
.ico-small{ width:18px; height:18px; }

.topbar{ display:flex; justify-content:flex-end; align-items:center; margin-bottom:1rem; }
.theme{ display:inline-flex; gap:.35rem; background: var(--surface); border:1px solid var(--line); border-radius:.75rem; padding:.25rem; }
.theme input{ position:absolute; opacity:0; pointer-events:none; }
.theme label{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:.5rem; font-size:.86rem; color:var(--muted); cursor:pointer; border:1px solid transparent; user-select:none; }
.theme input:checked + label{ background: color-mix(in oklab, var(--brand-2) 12%, transparent); color: color-mix(in oklab, var(--brand-2) 80%, var(--text)); border-color: color-mix(in oklab, var(--brand-2) 50%, var(--line)); }
.theme label .ico{ width:16px; height:16px; }

body:has(#t-light:checked){
  --bg: #f7fafc; --surface:#ffffff; --text:#0b1220; --muted:#596173; --line:#e6e8ef; --brand:#3a6fed; --brand-2:#0891b2;
}
body:has(#t-dark:checked){
  --bg: #0b0f19; --surface:#0f1525; --text:#e5e7eb; --muted:#9aa3b2; --line:#1f2535; --brand:#3a6fed; --brand-2:#22d3ee;
}

img, svg {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}