/* ═══════════════════════════════════════════════════════
   SAMIR MESSAOUDI — v7
   Inspiré Gwendolyn Regina : épuré, éditorial, personnalité
   Fond blanc · Typographie XXL · Photo imposante · Direct
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,200;1,300;1,700;1,800;1,900&display=swap');

:root {
  --white: #ffffff;
  --off:   #f8f7f4;
  --black: #0c0c0c;
  --ink:   #1a1a1a;
  --mid:   #555;
  --pale:  #aaa;
  --ghost: #e5e3df;
  --blue:  #1a56f0;          /* accent principal — minimaliste */
  --teal:  #0e9e8e;          /* accent secondaire */
  --line:  rgba(0,0,0,0.08);
  --line2: rgba(0,0,0,0.14);
  --f:     'Poppins', sans-serif;
  --ease:  cubic-bezier(.25,.46,.45,.94);
  --ease2: cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body {
  font-family: var(--f);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit }
img { display: block; max-width: 100%; height: auto }
button { font-family: var(--f); cursor: none; border: none; background: none }

/* ── CURSOR ── */
#cur { position:fixed; width:7px; height:7px; background:var(--black); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .15s }
#cur-r { position:fixed; width:36px; height:36px; border:1.5px solid rgba(0,0,0,.25);
  border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
  transition:all .06s }
body.hov #cur { width:14px; height:14px; background:var(--blue) }
body.hov #cur-r { opacity:0; transform:translate(-50%,-50%) scale(.5) }

/* ── NAV ── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 2rem 4vw;
  transition: all .4s var(--ease);
}
.nav.scrolled {
  padding: 1.1rem 4vw;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  font-size: .72rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--black);
}
.nav-links { display:flex; gap:2.5rem; list-style:none }
.nav-links a {
  font-size: .62rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid);
  transition: color .2s; position: relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--black); transform:scaleX(0);
  transform-origin:right; transition:transform .3s var(--ease2);
}
.nav-links a:hover { color:var(--black) }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); transform-origin:left }
.nav-links a.active { color:var(--black) }
.nav-cta {
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.55rem 1.2rem; border:1.5px solid var(--black); color:var(--black);
  transition:all .25s;
}
.nav-cta:hover { background:var(--black); color:var(--white) }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f); font-size:.65rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.85rem 2rem; cursor:none; transition:all .3s var(--ease);
  position:relative; overflow:hidden; border:none;
}
.btn-dark { background:var(--black); color:var(--white) }
.btn-dark:hover { background:var(--blue) }
.btn-outline { background:transparent; color:var(--black); border:1.5px solid var(--black) }
.btn-outline:hover { background:var(--black); color:var(--white) }
.btn-blue { background:var(--blue); color:var(--white) }
.btn-blue:hover { background:#0f3fd4 }
.btn svg { width:12px; height:12px; flex-shrink:0; transition:transform .3s var(--ease) }
.btn:hover svg { transform:translate(4px,-4px) }

/* ── REVEAL ── */
.rv { opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease),transform .75s var(--ease) }
.rv.on { opacity:1; transform:none }
.rv-l { opacity:0; transform:translateX(-24px); transition:opacity .75s var(--ease),transform .75s var(--ease) }
.rv-l.on { opacity:1; transform:none }
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.40s}

/* ── SECTION LABEL ── */
.label {
  font-size:.58rem; font-weight:700; letter-spacing:.25em;
  text-transform:uppercase; color:var(--pale); display:block;
  margin-bottom:1rem;
}
.label.blue { color:var(--blue) }
.label.teal { color:var(--teal) }

/* ── DIVIDER ── */
.hr { height:1px; background:var(--line); margin:0 4vw }

/* ── MARQUEE ── */
.marquee-wrap { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.7rem 0 }
.marquee-track { display:flex; width:max-content; animation:mroll 30s linear infinite }
.marquee-track:hover { animation-play-state:paused }
.marquee-item {
  display:flex; align-items:center; gap:2rem; padding:0 2.5rem;
  font-size:.58rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pale); white-space:nowrap;
}
.msep { width:3px; height:3px; border-radius:50%; background:var(--blue); opacity:.5; flex-shrink:0 }
@keyframes mroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── LINKEDIN STRIP (home) ── */
.li-strip { padding:3.5rem 0; border-top:1px solid var(--line); overflow:hidden }
.li-strip-hdr { display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw; margin-bottom:1.8rem }
.li-live { display:flex; align-items:center; gap:.6rem;
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--mid) }
.li-live-dot { width:5px; height:5px; border-radius:50%; background:var(--teal); animation:livep 1.6s infinite }
@keyframes livep { 0%,100%{opacity:1}50%{opacity:.25} }
.li-see-all { font-size:.58rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); border-bottom:1px solid rgba(26,86,240,.25); padding-bottom:.15rem }
.li-car-wrap { overflow:hidden; padding:0 4vw }
.li-car { display:flex; gap:1.5rem; animation:liroll 36s linear infinite }
.li-car:hover { animation-play-state:paused }
.li-mini {
  flex-shrink:0; width:280px; border:1px solid var(--line2);
  padding:1.5rem; display:flex; flex-direction:column; gap:.75rem;
  transition:border-color .25s; cursor:none;
  position:relative; overflow:hidden; background:var(--white);
}
.li-mini:hover { border-color:var(--blue) }
.li-mini::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease2) }
.li-mini:hover::after { transform:scaleX(1) }
.li-mini-hd { display:flex; align-items:center; gap:.65rem }
.li-mini-av { width:26px; height:26px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid var(--line) }
.li-mini-av img { width:100%; height:100%; object-fit:cover }
.li-mini-nm { font-size:.68rem; font-weight:700; color:var(--black) }
.li-mini-tm { font-size:.55rem; color:var(--pale) }
.li-mini-cat { font-size:.5rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); background:rgba(26,86,240,.07); border:1px solid rgba(26,86,240,.2);
  padding:.15rem .5rem; width:fit-content }
.li-mini-txt { font-size:.73rem; font-weight:300; line-height:1.7; color:var(--mid);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.li-mini-txt strong { color:var(--black); font-weight:600 }
.li-mini-ft { display:flex; align-items:center; justify-content:space-between;
  padding-top:.65rem; border-top:1px solid var(--line); font-size:.58rem; color:var(--pale) }
.li-mini-cta { color:var(--blue); font-weight:700; transition:opacity .2s }
.li-mini-cta:hover { opacity:.7 }
@keyframes liroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── FOOTER ── */
.footer { padding:5rem 4vw 3rem; border-top:1px solid var(--line); background:var(--off) }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:4rem;
  padding-bottom:3rem; border-bottom:1px solid var(--line); margin-bottom:2rem }
.footer-nm { font-size:1rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.6rem }
.footer-about { font-size:.76rem; font-weight:300; line-height:1.8; color:var(--mid); max-width:240px }
.footer-col-h { font-size:.52rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--pale); margin-bottom:1.2rem }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.6rem }
.footer-links a { font-size:.78rem; font-weight:300; color:var(--mid); transition:color .2s }
.footer-links a:hover { color:var(--black) }
.footer-bot { display:flex; justify-content:space-between; align-items:center }
.footer-copy { font-size:.6rem; color:var(--pale); letter-spacing:.04em }
.footer-soc { display:flex; gap:.7rem }
.soc { width:32px; height:32px; border:1px solid var(--line2); display:flex;
  align-items:center; justify-content:center; font-size:.6rem; font-weight:700;
  color:var(--mid); transition:all .2s }
.soc:hover { border-color:var(--blue); color:var(--blue) }

/* ── PROGRESS ── */
#pgbar { position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  z-index:9999; width:0%; transition:width .08s linear }

/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--line2);
  overflow: hidden;
}
.lang-btn {
  font-family: var(--f);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .38rem .7rem;
  background: transparent;
  color: var(--pale);
  cursor: none;
  border: none;
  border-right: 1px solid var(--line2);
  transition: all .2s;
}
.lang-btn:last-child { border-right: none }
.lang-btn:hover { color: var(--black); background: var(--off) }
.lang-btn.active { background: var(--black); color: var(--white) }

/* nav adjustments for lang switcher */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}


/* ── LINKEDIN CAROUSEL STRIP (sub-pages) ── */
.li-strip-gw{padding:3.5rem 0;border-top:1px solid var(--line,rgba(0,0,0,.08));overflow:hidden}
.li-strip-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 4vw;margin-bottom:1.8rem}
.li-live{display:flex;align-items:center;gap:.6rem;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mid,#555)}
.li-live-dot{width:5px;height:5px;border-radius:50%;background:var(--teal,#0e9e8e);animation:livep 1.6s infinite}
@keyframes livep{0%,100%{opacity:1}50%{opacity:.2}}
.li-see-all{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue,#1a56f0);border-bottom:1px solid rgba(26,86,240,.22);padding-bottom:.12rem}
.li-car-wrap{overflow:hidden;padding:0 4vw}
.li-car-gw{display:flex;gap:1.5rem;animation:liroll 38s linear infinite}
.li-car-gw:hover{animation-play-state:paused}
@keyframes liroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lmc{flex-shrink:0;width:280px;border:1px solid var(--line,rgba(0,0,0,.08));padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;background:var(--white,#fff);transition:border-color .25s;position:relative;overflow:hidden}
.lmc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue,#1a56f0);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.lmc:hover{border-color:var(--blue,#1a56f0)}
.lmc:hover::after{transform:scaleX(1)}
.lmc-hd{display:flex;align-items:center;gap:.65rem}
.lmc-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid var(--line,rgba(0,0,0,.08))}
.lmc-av img{width:100%;height:100%;object-fit:cover}
.lmc-nm{font-size:.68rem;font-weight:700;color:var(--black,#1a1a1a)}
.lmc-tm{font-size:.55rem;color:var(--pale,#aaa)}
.lmc-cat{font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue,#1a56f0);background:rgba(26,86,240,.07);border:1px solid rgba(26,86,240,.18);padding:.14rem .5rem;width:fit-content}
.lmc-txt{font-size:.73rem;font-weight:300;line-height:1.7;color:var(--mid,#555);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lmc-txt strong{color:var(--black,#1a1a1a);font-weight:600}
.lmc-ft{display:flex;align-items:center;justify-content:space-between;padding-top:.65rem;border-top:1px solid var(--line,rgba(0,0,0,.08));font-size:.58rem;color:var(--pale,#aaa)}
.lmc-cta{color:var(--blue,#1a56f0);font-weight:700}
/* Reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}
.rv.on{opacity:1;transform:none}
.rvx{opacity:0;transform:translateX(-20px);transition:opacity .75s ease,transform .75s ease}
.rvx.on{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}[data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s}