@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

* {
  /* color variables */
  --border-color: #232a33;
  --bg: #0f1115;
  --bg-alt: #161a21;
  --text: #eceff3;
  --text-dim: #b4bcc7;
  --accent: #ffbf3c;
  --accent-rgb: 255,191,60;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 18px;
  --shadow: 0 4px 16px -4px rgba(0,0,0,.4);
}

body {
  overflow-x: hidden;
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

/* -------------------------------------------------- */
/* Base Layout & Typography                           */
/* -------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h3 { font-size: 1.15rem; letter-spacing: .5px; text-transform: uppercase; }
p { margin: 0 0 1em; color: var(--text-dim); }
ul { padding-left: 1.1em; }
li { margin-bottom: .4em; }

strong { color: #fff; font-weight: 600; }

/* Utility */
.container { width: min(1200px, 100% - 2.5rem); margin: 0 auto; }
.cols-2 { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); align-items: start; }
.small { max-width: 560px; }
.note { font-size: .8rem; opacity: .7; }

/* Header */
.site-header { position: sticky; top:0; backdrop-filter: blur(10px); background: rgba(15,17,21,.82); border-bottom: 1px solid #1f242c; z-index: 50; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.site-title { font-size: 1.1rem; letter-spacing: .5px; font-weight:600; margin:0; white-space:nowrap; }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1.2rem; }
.site-nav a { font-size:.82rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); font-weight:500; }
.site-nav a:hover { color:var(--text); }

/* Sections */
.section { padding: clamp(3rem, 7vh, 5.5rem) 0; position:relative; }
.section.alt { background: var(--bg-alt); }
.section--band { padding:0; }

/* Panels, cards */
.panel { background: linear-gradient(145deg, #1c2129, #121519); border:1px solid #232a33; border-radius: var(--radius-m); padding:1.2rem 1.3rem 1.4rem; box-shadow: var(--shadow); }
.panel--tools img { width:40px; height:40px; object-fit:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.panel--cv img  { height: 200px; border-radius: 10px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.panel--cv  {display: flex;align-items: center}
.icon-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:1rem; }
.icon-grid li { text-align:center; display:flex; gap: 0.5rem; flex-direction:column; justify-content:center; align-items:center;:.4rem; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); }

.cards-grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); margin-top:1.5rem; }
.card { background:#181d24; border:1px solid #232a33; border-radius: var(--radius-m); padding:1rem 1.1rem 1.2rem; position:relative; overflow:hidden; }
.card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(var(--accent-rgb),.09), transparent 60%); opacity:.9; pointer-events:none; }
.card h3 { margin-top:0; margin-bottom:.5rem; font-size:.85rem; }
.card p { font-size:.75rem; margin:0; }

/* Feature blocks */
.feature-block { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); align-items:start; margin:3rem 0; }
.feature-block.reverse { direction:rtl; }
.feature-block.reverse > * { direction:ltr; }
.feature-text { font-size:.92rem; }
.feature-media { display:grid; gap:1rem; }
.feature-media img { width:100%; border-radius: var(--radius-s); border:1px solid #232a33; }

.media-stack { display:grid; gap:1.1rem; }
.media-stack img, .media-stack figure img, .media-stack figure video, .media-stack video { width:100%; border:1px solid #232a33; border-radius: var(--radius-s); background:#121519; }
.media-stack figure { margin:0; }
figcaption { font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; opacity:.6; margin-top:.4rem; }

/* Responsive embed */
.responsive-video { position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid #232a33; border-radius: var(--radius-m); overflow:hidden; }
.responsive-video iframe { position:absolute; inset:0; width:100%; height:100%; display:block; }
.responsive-video video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
/* Plyr integration tweaks */
.plyr__wrapper { --plyr-color-main: var(--accent); }
.plyr__wrapper .plyr { height:100%; width:100%; position:absolute; inset:0; }
.plyr__controls { font-size:.75rem; }

/* Detailed feature list with videos */
.features-detailed { display:flex; flex-direction:column; gap:3.5rem; margin-top:2.5rem; }
.feature-item { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.feature-item-text h3 { margin-top:0; font-size:1rem; }
.feature-item-text p { font-size:.8rem; }
.feature-media-vid { position:relative; background:#121519; border:1px solid #232a33; border-radius: var(--radius-m); padding:.75rem; box-shadow: var(--shadow); }
.feature-media-vid:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(var(--accent-rgb),.18), transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.feature-media-vid video { width:100%; display:block; border-radius: calc(var(--radius-m) - 4px); aspect-ratio:16/9; object-fit:cover; }
.mini-list { list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.4rem; }
.mini-list li { position:relative; padding-left:1rem; font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); line-height:1.2; }
.mini-list li:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:.5rem; height:.5rem; background:var(--accent); border-radius:1px; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.25); }

.intro-line { font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; opacity:.75; margin-bottom:2rem; }

/* Meshes band relocation title */
.meshes-wrapper { padding-top:1.5rem; }
.band-title { font-size:.7rem; letter-spacing:.55px; text-transform:uppercase; color:var(--text-dim);}

/* Full bleed utility for edge-to-edge sections */
.full-bleed { width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.full-bleed .meshes-caroussel { border-left:none; border-right:none; }
.full-bleed .band-title { 
  width: min(1200px, 100% - 2.5rem); 
  margin: 0 auto .6rem; 
  padding: 0; 
}

/* Full width section divider */
.divider-line { 
  position: relative; 
  width:100vw; 
  left:50%; 
  margin:3rem 0; 
  margin-left:-50vw; 
  height:1px; 
  background: var(--border-color); 
}
@media (max-width:700px){ 
  .divider-line { margin:2.2rem 0; } 

}

@media (max-width:760px) {
  .feature-item { gap:1.25rem; }
  .features-detailed { gap:2.5rem; }
}

/* Lists */
.check-list { list-style:none; padding:0; margin:0; }
.check-list li { position:relative; padding-left:1.25rem; margin:0 0 .55rem; font-size:.82rem; color:var(--text-dim); line-height:1.28; }
.check-list li:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:.65rem; height:.65rem; border-radius:2px; background:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); }

/* Reversed feature text (right aligned with right-side bullets) */
.feature-text.reversed { text-align:right; }
.feature-text.reversed h3 { text-align:right; }
.feature-text.reversed .check-list { padding:0; }
.feature-text.reversed .check-list li { padding-left:0; padding-right:1.25rem; text-align:right; }
.feature-text.reversed .check-list li:before { left:auto; right:0; }

/* -------------------------------------------------- */
/* Contribution Sticky Layout                         */
/* -------------------------------------------------- */
 .contrib-layout { 
  display:grid; 
  grid-template-columns: 50% 50%; 
  align-items:start; 
  position:relative; 
  /* gap removed to avoid pushing sticky column out of viewport */
}
@media (max-width:701px){
  .contrib-layout { grid-template-columns:1fr;}
  .contrib-container {margin: 0; width :100%; }
  .contrib-container h2, .contrib-container article {margin: 0 20px; }
  /* Floating bottom overlay style for narrow screens */
  .contrib-sticky { 
    position:fixed; 
    inset:auto 0 0 0; 
    top:auto; 
    background-color: var(--bg-alt);
    padding: 1rem .85rem 1.5rem .85rem; 
    z-index:40; 
    border-top:1px solid var(--border-color);
  }
  .contrib-sticky .macbook { 
    max-width:480px; 
    margin:0 auto; 
    transform-origin: bottom center; 
  }

  .contrib-text-list {
    padding-bottom: 2rem;
  }

  #contribution {
    padding-bottom: 0;
  }

  .band-title {
    margin-top: 2.2rem;
    margin-left: 20px;
  }

  [data-plyr="restart"] {
    display: none !important;
  }

  [data-plyr="mute"] {
    display: none !important;
  }

  [data-plyr="volume"] {
    display: none !important;
  }

  [data-plyr="settings"] {
    display: none !important;
  }

  .plyr__controls__item[data-plyr="play"] {
    display: none !important;
  }

  .site-nav ul {
    display: none;
  }

  .hero { padding-top: 4rem; padding-bottom: 0;}

}

.contrib-sticky { position:sticky; top:var(--contrib-stick-top, 6rem); align-self:start; }
.contrib-sticky .macbook { max-width:100%; width:100%; }
.contrib-sticky .screen { width:100%; }

.contrib-text-list { position:relative; padding-right:2.8rem; }
@media (max-width:1100px){ .contrib-text-list { padding-right:2.2rem; } }
@media (max-width:1000px){ .contrib-text-list { padding-right:1.8rem; } }
@media (max-width:701px){ .contrib-text-list { padding-right:0; } }
.contrib-item { margin:0 0 3.2rem; }
.contrib-item:last-child { margin-bottom:0; }
.contrib-item h3 { margin-top:0; font-size:1rem; }
.contrib-item .check-list li { font-size:.78rem; }
/* Default (inactive) bullet style inside contribution items: neutral until active */
.contrib-item .check-list li:before {
  background: var(--text); /* neutral / white */
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
  opacity:.9;
}

/* Active state highlight */
.contrib-item.active h3 { color: var(--accent); }
.contrib-item.active .check-list li:before { background: var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb), .25); }

/* Media dimming logic: non-active contribution articles have dimmed media */
.contrib-item .media-stack img,
.contrib-item .media-stack video {
  opacity:.2;
  transition: opacity .35s ease, filter .35s ease;
  filter:grayscale(.1) saturate(.85);
}
.contrib-item.active .media-stack img,
.contrib-item.active .media-stack video {
  opacity:1;
  filter:none;
}

/* subtle guiding line */
/* Removed decorative vertical line (user request) */
/* .contrib-text-list:before { ... } */
@media (max-width:920px){ /* nothing needed now that line removed */ }

/* Smooth transition of viewport background */
.contrib-sticky .viewport { transition: background-image .4s ease, filter .4s ease; background-size:cover; background-position:center; }
.contrib-sticky .viewport .contrib-video { 
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  border-radius:inherit; 
  display:none; 
}

/* Reduce gap between contribution heading and layout */
#contribution > .container > h2 { margin-bottom:2.2rem; }

/* Alternating alignment for contribution items */
/* Alternance gauche/droite basée seulement sur les articles (les dividers ne perturbent plus) */
article.contrib-item:nth-of-type(even) { text-align:right; }
article.contrib-item:nth-of-type(even) h3 { text-align:right; }
article.contrib-item:nth-of-type(even) .check-list li { 
  padding-left:0; 
  padding-right:1.25rem; 
  text-align:right; 
}
article.contrib-item:nth-of-type(even) .check-list li:before { left:auto; right:0; }

/* Inner contribution dividers */
.divider-line--inner { 
  width:100%; 
  left:auto; 
  margin:2.4rem 0 2.8rem; 
  background:linear-gradient(to right, transparent, var(--border-color) 15%, var(--border-color) 85%, transparent); 
  height:1px; 
  position:relative; 
}
@media (max-width:701px){
  .divider-line--inner { margin:2rem 0 2.2rem; }
}

.tag-list { list-style:none; padding:0; margin:1rem 0; display:flex; flex-wrap:wrap; gap:.6rem; }
.tag-list li { background:#1d232b; border:1px solid #262e37; padding:.4rem .7rem; font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; border-radius:25px; color:var(--text-dim); }

/* Footer */
.site-footer { border-top:1px solid #1f242c; padding:2.5rem 0; margin-top:2rem; }
.site-footer p { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; opacity:.55; margin:0; }

/* Accessibility focus */
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Responsive tweaks */
@media (max-width:800px) {
  .site-nav ul { gap:.8rem; }
  .feature-block { gap:1.5rem; }
  .feature-block.reverse { direction:ltr; }
}

@media (max-width: 688px) {
  .panel--cv  {justify-content: center;}
}

@media (max-width:800px) {
  .site-header .container { flex-wrap:wrap; gap:1rem; }
  .site-nav ul { flex-wrap:wrap; }
}

.meshes-caroussel {
  overflow: hidden;
  white-space: nowrap; /* still using inline-block row */
  position: relative;
  border-top: 1px solid #232a33;
  border-bottom: 1px solid #232a33;
  line-height: 0; /* supprime l'espace baseline sous les images */
  font-size: 0; /* évite tout espace texte résiduel */
}

.meshes-caroussel:before,
.meshes-caroussel:after {
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  content: "";
  z-index: 2;
}

.meshes-caroussel:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--bg-alt));
}

.meshes-caroussel:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-alt));
}


.meshes-caroussel-slide {
  display: inline-block;
  animation: 50s slide infinite linear;
  font-size: 0; /* supprime l'espace entre images inline */
  line-height: 0;
}

.meshes-caroussel-slide img {
  height: 200px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: 0;
}

.separator {
  height: 2vw;
}

/* Inline band version of meshes carousel inside contribution */
.meshes-inline-band { 
  position:relative; 
  width:100vw; 
  left:50%; 
  margin:0.4rem 0 2.4rem; 
}
.meshes-inline-band .band-title { 
  width: min(1200px, 100% - 2.5rem); 
}
@media (max-width:701px){
  .meshes-inline-band { margin:0.4rem 0 2rem; }
}

@media (min-width:1330px) {
.contrib-container {
  width: calc(90vw);
  max-width: 2000px;
}
}