:root{
  --bg: #0b0b0c;
  --fg: #f4f4f5;
  --muted: #b3b3b6;
  --card: #131316;
  --accent: #ffd025;
  --accent-ink: #111;
  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a.link{color:var(--accent);text-underline-offset:3px;text-decoration:underline}
.container{max-width:var(--maxw);margin:auto;padding:0 20px}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:static;width:auto;height:auto;padding:8px 12px;background:var(--accent);color:var(--accent-ink)
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,12,.7);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand__logo{width:28px;height:28px}
.nav__menu{display:flex;gap:22px;align-items:center}
.nav__menu a{opacity:.9}
.nav__menu a:hover{opacity:1}
.nav__toggle{display:none;background:none;border:1px solid rgba(255,255,255,.15);padding:6px 10px;border-radius:10px;color:var(--fg);cursor:pointer}

/* Buttons */
.btn{
  display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--fg);box-shadow:var(--shadow);transition:transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent}
.btn--accent{
  background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700;
}
.btn--sm{padding:8px 12px;border-radius:10px}

/* Hero */
.hero{padding:96px 0 56px;background:radial-gradient(1200px 600px at 10% -20%, rgba(255,208,37,.2), transparent)}
.hero__grid{display:grid;gap:36px;grid-template-columns:1.1fr .9fr;align-items:center}
h1{font-size:clamp(34px, 4.4vw, 56px);line-height:1.06;margin:0 0 16px}
.highlight{background:linear-gradient(90deg,var(--accent),#fff6a1);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:1.125rem;color:var(--muted)}
.hero__cta{display:flex;gap:12px;margin:20px 0}
.hero__meta{list-style:none;padding:0;margin:12px 0 0;color:var(--muted)}
.hero__media img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}

/* Sections */
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
h2{font-size:clamp(24px,3vw,34px);margin:0 0 16px}
.grid-2{display:grid;gap:28px;grid-template-columns:1fr 1fr}
.bullets{margin:12px 0 0;padding-left:20px;color:var(--muted)}
.stat{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
.stat__num{font-size:32px;font-weight:800}
.stat__label{display:block;color:var(--muted)}

.card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06)
}
.card.note{padding:16px}

/* Projects */
.cards{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr)}
.card.project img{aspect-ratio:16/9;object-fit:cover}
.card__body{padding:14px}
.card__actions{display:flex;gap:8px;margin-top:10px}
.tags{display:flex;gap:8px;list-style:none;padding:0;margin:10px 0 0;color:var(--muted);flex-wrap:wrap}

/* Reel */
.reel{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.reel iframe{width:100%;height:100%;border:0}

/* Contact */
.contact-list{list-style:none;padding:0;margin:0 0 14px;color:var(--muted)}
.form{display:grid;gap:12px}
.form input,.form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:#0e0e11;color:var(--fg)
}
.form__note{color:var(--muted);font-size:.9rem}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:var(--muted)}
.footer__grid{display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer__menu{display:flex;gap:16px}

/* Responsive */
@media (max-width: 980px){
  .hero__grid,.grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .cards{grid-template-columns:1fr}
  .nav__toggle{display:block}
  .nav__menu{
    position:absolute;top:64px;right:20px;left:20px;padding:14px;border-radius:12px;
    background:var(--card);display:none;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.08)
  }
  .nav__menu.is-open{display:flex}
}

/* Focus states */
a, button, input, textarea {outline-offset:3px}
a:focus, button:focus, input:focus, textarea:focus {outline:2px dashed var(--accent)}
/* === Reveal on scroll (léger) === */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show { opacity: 1; transform: none; }
.stagger { transition-delay: .05s; }
.delay-1 { transition-delay: .2s; }
.delay-2 { transition-delay: .35s; }
.delay-3 { transition-delay: .5s; }
.delay-4 { transition-delay: .65s; }

/* === Hover boutons doux === */
.btn, .btn--accent, .btn--ghost { transition: transform .2s ease, box-shadow .2s ease; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }

/* === Parallax perf hint === */
.parallax { will-change: transform; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* === BACKGROUND SLIDESHOW === */
.bg-slideshow {
  position: fixed; 
  inset: 0;       
  z-index: -2;     
  overflow: hidden;
  background: #000;
}

.bg-slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;  
  opacity: 0;
  transition: opacity .9s ease;
  filter: brightness(0.65);
  will-change: opacity;
  backface-visibility: hidden;
  animation: bgSlide 30s infinite;
}
.bg-slideshow image.show{ opacity: 1;}
}
.
bg-slideshow img:nth-child(1) { animation-delay: 00s; }
.bg-slideshow img:nth-child(2) { animation-delay: 10s; }
.bg-slideshow img:nth-child(3) { animation-delay: 20s; }
.bg-slideshow img:nth-child(4) { animation-delay: 30s; }
.bg-slideshow img:nth-child(5) { animation-delay: 40s; }
.bg-slideshow img:nth-child(6) { animation-delay: 50s; }
.bg-slideshow img:nth-child(7) { animation-delay: 60s; }

@keyframes bgSlide {
  10%, 25% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
:root { --overlay: .45; } /* ajuste entre .35 et .6 */
body::before{
  content:"";
  position: fixed; inset:0;
  background: rgba(0,0,0,0,0,0,0,var(--overlay));
  pointer-events:none;
  z-index:-1;
}

/* Option: renfort local sous le texte du hero */
.hero .hero__copy{
  background: rgba(0,0,0,.28);
  padding: 12px 14px; border-radius: 10px;
  backdrop-filter: blur(2px);
}
.hero h1, .hero p { text-shadow: 0 2px 12px rgba(0,0,0,.6); }
#bg-advanced img,
.bg-slideshow img {
  filter: brightness(0.65); /* baisse la luminosité à 65% */
}
/* --- Social icons --- */
.socials { 
  display: flex; 
  gap: 12px; 
  list-style: none; 
  padding: 0; 
  margin: 12px 0 0; 
}
.socials .icon { 
  width: 24px; 
  height: 24px; 
  display: block; 
}

/* (optionnel) petit effet au survol */
.socials a { transition: transform .2s ease; }
.socials a:hover { transform: translateY(-2px); }

/* (si l’icône paraît trop claire sur fond clair, teste temporairement:) */
/* .socials .icon { filter: invert(1); } */

/* Ajoute ça à la fin de styles.css */
.socials .icon {
  filter: invert(1) brightness(1.6);
}
.reels-grid {
  display: grid;
  gap: 32px;
}
.reel-card iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.reel-card h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.reel-select-wrap { margin-bottom: 16px; }
.reel-select {
  background:#111; color:#fff; border:1px solid #333; border-radius:8px;
  padding:8px 12px; font:inherit;
}
.reel-frame iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:12px; box-shadow:0 0 10px rgba(0,0,0,.3); }
.reel-frame video  { border-radius:12px; box-shadow:0 0 10px rgba(0,0,0,.3); }
.sr-only{ position:absolute; left:-9999px; }
/* --- Social icons base --- */
.socials { display:flex; gap:12px; list-style:none; padding:0; margin:12px 0 0; }
.socials a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; }
.socials .icon { width:24px; height:24px; display:block; filter: invert(1) brightness(1.6); /* rendu blanc sur fond sombre */ }

/* Mouvement au survol/focus clavier */
.socials a {
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.socials a:hover .icon,
.socials a:focus-visible .icon {
  filter: invert(1) brightness(2);
}
.socials a:hover,
.socials a:focus-visible {
  transform: translateY(-2px) scale(1.08);
}

/* Glow par plateforme */
.socials a[data-platform="instagram"]:hover,
.socials a[data-platform="instagram"]:focus-visible {
  box-shadow: 0 0 12px rgba(255,90,0,.45), 0 0 24px rgba(225,48,108,.35); /* orangé/rose */
}
.socials a[data-platform="tiktok"]:hover,
.socials a[data-platform="tiktok"]:focus-visible {
  box-shadow: 0 0 12px rgba(0,242,234,.45), 0 0 24px rgba(255,0,80,.35);  /* cyan/rose */
}
.socials a[data-platform="facebook"]:hover,
.socials a[data-platform="facebook"]:focus-visible {
  box-shadow: 0 0 14px rgba(59,89,152,.5); /* bleu FB */
}

/* Variante petit twist au survol (optionnelle) */
.socials a:hover .icon,
.socials a:focus-visible .icon {
  transform: rotate(-6deg);
}

/* Accessibilité : réduire les animations si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .socials a,
  .socials a .icon {
    transition: none !important;
    transform: none !important;
  }
}
/* --- Hero rotator --- */
.hero-rotator{ position:relative; overflow:hidden; border-radius:12px; }
.hero-rotator{ aspect-ratio:16/9; max-height:520px; } /* ajuste si besoin */
.hero-rotator img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .8s ease;
}
.hero-rotator img.show{ opacity:1; }

/* Ken Burns (zoom lent) */
.hero-rotator img.kenburns{ animation:kb 12s ease-in-out both; }
@keyframes kb{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.08) translate(0,-2%); }
}
/* --- Hero Rotator en version ronde --- */
.hero-rotator {
  position: relative;
  overflow: hidden;
  width: 300px;       /* taille du cercle */
  height: 300px;
  border-radius: 50%; /* rend le conteneur rond */
  margin: 0 auto;     /* centre horizontalement */
  box-shadow: 0 0 25px rgba(0,0,0,.4);
}

.hero-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* garde le cadrage */
  opacity: 0;
  transition: opacity 1s ease;
  border-radius: 50%; /* les images aussi arrondies */
}

.hero-rotator img.show {
  opacity: 1;
}

.hero-rotator img.kenburns {
  animation: kb 12s ease-in-out both;
}

@keyframes kb {
  0% { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.1) translate(0,-2%); }
}

/* Option : halo doré au survol */
.hero-rotator:hover {
  box-shadow: 0 0 25px rgba(255,215,0,.45);
  transform: scale(1.02);
  transition: all 0.3s ease;
}