:root{
  /* Colors */
  --bg: #0b0b0c;              /* fond profond (dark) */
  --text: #f5f7fb;            /* texte principal */
  --muted: #a8adbb;           /* texte secondaire */
  --surface: rgba(255,255,255,.06); /* panels verre */
  --border: rgba(255,255,255,.14);  /* lignes délicates */
  --brand: #7dd3fc;           /* accent baby blue */
  --ink: #0ea5e9;             /* encre cyan */
  --ring: rgba(125,211,252,.5);

  /* Layout */
  --container: clamp(960px, 86vw, 1160px);
  --radius: 16px;
  --blur: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.18);

  /* Typo scale */
  --t-1: clamp(.94rem,.9rem + .2vw,1rem);
  --t0: clamp(1.02rem,.98rem + .25vw,1.08rem);
  --t1: clamp(1.14rem,1.02rem + .5vw,1.28rem);
  --t2: clamp(1.35rem,1.15rem + .9vw,1.8rem);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #fbfbfd;
    --text: #0b0b0c;
    --muted: #5b5f6b;
    --surface: rgba(255,255,255,.85);
    --border: rgba(0,0,0,.08);
    --shadow: 0 14px 30px rgba(0,0,0,.08);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1100px 700px at 5% -10%, rgba(125,211,252,.10), transparent 40%),
    radial-gradient(900px 500px at 110% 10%, rgba(236,72,153,.06), transparent 42%),
    var(--bg);
  font:400 var(--t0)/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* ---------- Header harmonisé (si header.css existe, ces règles s'alignent) ---------- */
#MainTop{position:sticky; top:0; z-index:100; backdrop-filter:saturate(160%) blur(var(--blur)); background:color-mix(in oklab, var(--surface) 85%, transparent); border-bottom:1px solid var(--border)}
#MainTop nav{width:min(100%,var(--container)); margin-inline:auto; padding:10px clamp(14px,2vw,28px); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
#MainTop nav a{padding:.55rem .9rem; border-radius:999px; border:1px solid transparent; color:inherit; text-decoration:none}
#MainTop nav a:hover{border-color:var(--border); background:rgba(255,255,255,.04)}
#MainTop .cv-btn{margin-left:auto; background:linear-gradient(180deg, var(--brand), var(--ink)); color:#fff; box-shadow:0 10px 22px rgba(2,132,199,.26)}
#MainTop nav a[aria-current="page"]{border-color:color-mix(in oklab, var(--brand) 45%, var(--border)); background:rgba(125,211,252,.10)}

/* ---------- Section Experience ---------- */
.xp-section{padding: clamp(18px, 6vw, 56px) 0}
.xp-container{width:min(100%,var(--container)); margin-inline:auto; padding-inline:clamp(14px,2vw,28px)}
#xp-title{margin:0 0 clamp(12px,2.2vw,18px); font-size:var(--t2); font-weight:800; letter-spacing:.2px}

/* Timeline subtile : ligne invisible, ancre douce */
.xp-item{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow);
  padding: clamp(14px,2.4vw,18px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.xp-item + .xp-item{margin-top: clamp(12px, 2vw, 16px)}
.xp-item::before{content:""; position:absolute; left:-12px; top:24px; width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 25%, transparent)}
.xp-item:hover{transform: translateY(-3px); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: 0 16px 36px rgba(2,132,199,.16)}

/* Ligne meta */
.xp-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:var(--t-1)}
.xp-company{color:inherit; text-decoration:none; border:1px solid transparent; border-radius:999px; padding:.35rem .65rem; font-weight:800; color:var(--text)}
.xp-company:hover{border-color:var(--border); background:rgba(255,255,255,.04)}
.xp-dates{opacity:.95}
.xp-duration{margin-left:auto; padding:.28rem .6rem; border-radius:999px; border:1px solid var(--border); background: color-mix(in oklab, var(--surface) 75%, transparent)}

/* Rôle + description */
.xp-role{margin:.4rem 0 .25rem; font-size:var(--t1); font-weight:800; letter-spacing:.15px}
.xp-desc{margin:0 0 .6rem; color:var(--muted); font-size:var(--t0); line-height:1.6}

/* Badges compétences */
.xp-tags{display:flex; gap:6px; flex-wrap:wrap; list-style:none; padding:0; margin:0}
.xp-tags li{font-size:.92rem; font-weight:600; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); background:color-mix(in oklab, var(--surface) 70%, transparent)}

/* --------- Responsif clean --------- */
@media (max-width: 640px){
  .xp-duration{margin-left:0}
}

/* ---------- Footer (verre dépoli, ultra épuré) ---------- */
footer{
  margin-top: clamp(22px, 7vw, 64px);
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}
.footer-content{
  width:min(100%, var(--container));
  margin-inline:auto;
  padding: 14px clamp(14px, 2vw, 28px);
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items:center;
}
.footer-content .link{ color: var(--muted); text-decoration:none }
.footer-content .link:hover{ color: var(--text); text-decoration:underline }

/* Compact mobile */
@media (max-width: 720px){
  .footer-content{ grid-template-columns: auto 1fr; grid-auto-rows:auto }
  .footer-content span{ grid-column: 1 / -1 }
}