/* ===========================================================
   Imane DJOUADI-GUEHAM — Portfolio
   Design concept: la table lumineuse d'un studio d'animation,
   la nuit — cellulos qui brillent dans le noir, onglets de
   planche façon feuille d'exposition, perforations de cel.
   Touches emo/scene/sparkledog en accent : dégradés arc-en-ciel
   au survol, petites étoiles scintillantes — sobre par défaut,
   ludique à l'interaction.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg: #14121e;
  --bg-alt: #1b1830;
  --paper: #f2eefc;
  --paper-dim: #e5daf7;
  --ink: #231d3a;
  --heading: #f7f3ff;
  --text: #e6e1f5;
  --text-dim: #948aae;
  --accent: #ff5fae;      /* rose scene */
  --accent-2: #63d4ff;    /* bleu électrique */
  --accent-3: #b98bff;    /* violet */
  --rule: #2c2748;
  --hole: #3d3560;
  --radius: 3px;
  --maxw: 1100px;
  --rainbow: linear-gradient(90deg, #ff5fae, #ffb86b, #fff176, #7cffc4, #63d4ff, #b98bff, #ff5fae);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(185,139,255,0.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

@keyframes rainbow-slide{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
@keyframes twinkle{
  0%,100%{ transform:scale(0.82); opacity:0.75; }
  50%{ transform:scale(1.15); opacity:1; }
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:#fff; padding:0.6em 1em;
  z-index:200; font-family:'IBM Plex Mono',monospace; font-size:0.85rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(20,18,30,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.site-header::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--rainbow); background-size:300% 100%;
  animation:rainbow-slide 7s linear infinite;
}
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 1.5rem;
  gap:1rem;
}
.logo{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:0.01em;
  color:var(--heading);
  display:flex; align-items:baseline; gap:0.5em;
  white-space:nowrap;
}
.logo .logo-mark{
  position:relative;
  color:var(--accent);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  border:1px solid var(--accent);
  border-radius:50%;
  width:1.7em; height:1.7em;
  display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:0;
}
.logo .logo-mark::after{
  content:"✧"; position:absolute; top:-0.65em; right:-0.65em; font-size:0.8em;
  background:var(--rainbow); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rainbow-slide 2.6s linear infinite, twinkle 1.5s ease-in-out infinite;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.logo:hover .logo-mark::after{ opacity:1; }

nav.main-nav{
  display:flex; flex-wrap:wrap; gap:0.3rem 1.15rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
nav.main-nav a{
  position:relative;
  color:var(--text-dim);
  padding:0.35rem 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.main-nav a::before{
  content:"✦"; position:absolute; left:-1rem; top:50%;
  transform:translateY(-50%) scale(0.6);
  font-size:0.85em;
  background:var(--rainbow); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rainbow-slide 3s linear infinite;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
nav.main-nav a:hover,
nav.main-nav a:focus-visible{ color:var(--accent); border-color:var(--accent); }
nav.main-nav a:hover::before,
nav.main-nav a:focus-visible::before{ opacity:1; transform:translateY(-50%) scale(1); }
nav.main-nav a.is-active{ color:var(--heading); border-color:var(--accent-2); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--rule); color:var(--text);
  width:2.4rem; height:2.4rem; border-radius:var(--radius);
  font-size:1.1rem; cursor:pointer;
}

@media (max-width:820px){
  .nav-toggle{ display:block; }
  nav.main-nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--bg-alt);
    border-bottom:1px solid var(--rule);
    padding:1rem 1.5rem 1.4rem;
    flex-direction:column; gap:0.9rem;
  }
  nav.main-nav.is-open{ display:flex; }
}

/* ---------- Hero (accueil) ---------- */
.hero{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding:5.5rem 1.5rem 4rem;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem;
  align-items:center;
}
@media (max-width:780px){ .hero{ grid-template-columns:1fr; padding-top:3.5rem; } }

.hero h1{
  font-size:clamp(2.4rem, 5vw, 4rem);
  line-height:1.02;
  color:var(--heading);
}
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero-tagline{ max-width:34ch; color:var(--text-dim); margin-top:1rem; }
.hero-tagline .fr{ color:var(--text); display:block; margin-bottom:0.4em; }

.hero-cta{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:0.8em 1.3em; border-radius:var(--radius);
  border:1px solid var(--accent);
  transition:transform .15s ease, background .2s ease, background-position .2s ease, color .15s ease, box-shadow .3s ease;
}
.btn-solid{ background:var(--accent); color:#fff; background-size:100% 100%; }
.btn-solid:hover{
  background:var(--rainbow); background-size:300% 100%;
  animation:rainbow-slide 3s linear infinite;
  border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(255,95,174,0.55);
  transform:translateY(-2px);
}
.btn-ghost{ color:var(--heading); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* Hero visual — image integrated cleanly with the text, no heavy frame */
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual img{
  width:100%;
  max-width:420px;
  height:auto;
  object-fit:contain;
  /* soft floating feel, no hard frame */
  filter:drop-shadow(0 18px 40px rgba(185,139,255,0.28));
}

/* decorative sparkles around the hero image */
.deco-star{
  position:absolute; pointer-events:none;
  background:var(--rainbow); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rainbow-slide 4s linear infinite, twinkle 2.6s ease-in-out infinite;
}
.deco-star.star-1{ top:-8px; left:4%; font-size:1.7rem; animation-delay:0s, 0s; }
.deco-star.star-2{ bottom:12%; right:2%; font-size:1.15rem; animation-delay:1s, .6s; }
.deco-star.star-3{ top:38%; left:-6px; font-size:0.95rem; animation-delay:.5s, 1.3s; }

/* ---------- Feature grid (home) — cartes illustrées ---------- */
.feature-grid{
  max-width:var(--maxw); margin:0 auto;
  padding:1rem 1.5rem 3rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem;
}
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
  display:flex; flex-direction:column;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(160deg, var(--bg-alt), var(--bg));
  transition:border-color .18s ease, transform .18s ease, box-shadow .25s ease;
}
.feature-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 16px 36px -20px rgba(255,95,174,0.4), 0 0 0 1px rgba(185,139,255,0.2) inset;
}
.feature-thumb{
  aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt);
}
.feature-thumb.feature-thumb-light{
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
}
.feature-thumb.feature-thumb-light img{ width:100%; height:100%; object-fit:contain; }
.feature-thumb img, .feature-thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.feature-card:hover .feature-thumb img,
.feature-card:hover .feature-thumb video{ transform:scale(1.045); }
.feature-info{ padding:1.1rem 1.3rem 1.4rem; }
.feature-info h3{ font-size:1.2rem; color:var(--heading); }
.feature-info p{ color:var(--text-dim); font-size:0.88rem; margin:0.35rem 0 0; }

/* ---------- Quick links (home) — pages secondaires ---------- */
.quick-links{
  max-width:var(--maxw); margin:0 auto;
  padding:0 1.5rem 6rem;
}
.quick-links .eyebrow{ display:block; margin-bottom:0.9rem; }

/* ---------- Generic page header ---------- */
.page-head{
  max-width:var(--maxw); margin:0 auto;
  padding:3.2rem 1.5rem 1.5rem;
  border-bottom:1px solid var(--rule);
}
.page-head h1{ font-size:clamp(2rem,4vw,2.8rem); color:var(--heading); }

main{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem 5rem; }
main.main-with-sidenav{ max-width:none; padding:0; margin:0; }

/* ---------- Side nav (menu de projets, pages galerie) ---------- */
.page-with-sidenav{
  max-width:var(--maxw); margin:0 auto; padding:0 1.5rem 5rem;
  display:grid; grid-template-columns:190px 1fr; gap:2.8rem;
  align-items:start;
}
.side-nav{
  position:sticky; top:5.2rem;
  display:flex; flex-direction:column; gap:0.15rem;
  padding-top:0.4rem;
}
.side-nav-title{
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:0.6rem;
}
.side-nav a{
  font-family:'IBM Plex Mono', monospace; font-size:0.74rem;
  line-height:1.4;
  color:var(--text-dim);
  padding:0.4rem 0 0.4rem 0.8rem;
  border-left:2px solid var(--rule);
  transition:color .15s ease, border-color .15s ease;
}
.side-nav a:hover, .side-nav a:focus-visible{ color:var(--accent); border-left-color:var(--accent); }
.side-nav a.is-active{ color:var(--heading); border-left-color:var(--accent-2); }

@media (max-width:880px){
  .page-with-sidenav{ grid-template-columns:1fr; gap:0; }
  .side-nav{
    position:static;
    flex-direction:row; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:0.5rem; padding:1rem 0 1.2rem;
    border-bottom:1px solid var(--rule); margin-bottom:0.5rem;
  }
  .side-nav-title{ display:none; }
  .side-nav a{
    white-space:nowrap; border-left:none; border-bottom:2px solid var(--rule);
    padding:0.3rem 0.2rem;
  }
  .side-nav a:hover, .side-nav a:focus-visible{ border-bottom-color:var(--accent); }
  .side-nav a.is-active{ border-bottom-color:var(--accent-2); }
}

/* ---------- Bilingual text blocks ---------- */
.bilingual{ margin:1.6rem 0; }
.bilingual .fr{ color:var(--text); }
.bilingual .en{ color:var(--text-dim); font-style:italic; margin-top:0.35em; }

/* ---------- Video embed ---------- */
.video-block{ margin:2.2rem 0 2.8rem; }
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#0c0a14; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 20px 44px -28px rgba(185,139,255,0.4);
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-caption{ margin-top:0.8rem; }

/* ---------- Group heading inside a section ---------- */
.group-head{
  margin:3.2rem 0 0.4rem;
  padding-top:1.6rem;
  border-top:1px dashed var(--rule);
}
.group-head:first-child{ border-top:none; margin-top:1.4rem; padding-top:0; }
.group-head .eyebrow{ display:block; margin-bottom:0.3em; }

/* ---------- Image gallery (masonry, no cropping, click-to-enlarge) ---------- */
.reel{
  columns:2;
  column-gap:2.4rem;
  margin:1.8rem 0 3.5rem;
}
.gallery-item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 2.2rem;
  display:inline-block;
  width:100%;
}
.gallery-item.gallery-wide{
  display:block;
  column-span:all;
  width:100%;
  margin:0 0 2.2rem;
}
.gallery-trigger{
  all:unset; box-sizing:border-box;
  display:block; width:100%; cursor:zoom-in;
  border-radius:var(--radius); overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease;
}
.gallery-trigger:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -20px rgba(185,139,255,0.5);
}
.gallery-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.gallery-img{ width:100%; height:auto; display:block; } /* jamais recadrée */
.gallery-media{ width:100%; height:auto; display:block; border-radius:var(--radius); }
.gallery-tab{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono', monospace; font-size:0.66rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim);
  margin-top:0.6rem;
}
.gallery-caption{ margin-top:0.5rem; }
.gallery-caption .fr{ color:var(--text); font-size:0.92rem; }
.gallery-caption .en{ color:var(--text-dim); font-size:0.85rem; font-style:italic; margin-top:0.2em; }

@media (max-width:640px){
  .reel{ columns:1 100%; }
}

/* Page Animation : gifs/vidéos de taille uniforme, empilés en une
   seule colonne (léger recadrage accepté pour l'uniformité). */
.reel-videos{ columns:1; column-gap:0; }
.reel-videos .gallery-item{ margin:0 0 1.8rem; max-width:100%; }
.reel-videos .gallery-media{
  aspect-ratio:16/9;
  width:100%; height:auto;
  object-fit:cover;
  border-radius:var(--radius);
}

/* ---------- Lightbox (affichage plein écran) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,8,16,0.94);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:3.5rem 1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:82vh; width:auto; height:auto;
  object-fit:contain; border-radius:2px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.7);
}
.lightbox-caption{
  position:fixed; left:0; right:0; bottom:1.3rem; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem;
  color:var(--text-dim); padding:0 4.5rem;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed;
  background:rgba(255,255,255,0.06); border:1px solid var(--rule); color:var(--text);
  width:2.6rem; height:2.6rem; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  line-height:1;
  transition:border-color .2s ease, color .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  border-color:var(--accent); color:var(--accent);
}
.lightbox-close{ top:1.2rem; right:1.4rem; }
.lightbox-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1rem; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .lightbox{ padding:4rem 0.75rem; }
  .lightbox-caption{ padding:0 1rem; font-size:0.7rem; }
}

/* ---------- Team project card ---------- */
.project-card{
  display:grid; grid-template-columns:280px 1fr; gap:1.8rem;
  padding:2.2rem 0; border-top:1px solid var(--rule);
  align-items:start;
}
.project-card:first-of-type{ border-top:none; }
@media (max-width:700px){ .project-card{ grid-template-columns:1fr; } }
.project-card .cel-img{ margin-left:0; width:100%; aspect-ratio:16/10; }
.project-card .paper-wrap{ background:var(--paper); border-radius:var(--radius); padding:0.6rem; }
.project-card h3{ color:var(--heading); font-size:1.4rem; margin-bottom:0.2rem; }
.project-card .runtime{ color:var(--accent-2); font-family:'IBM Plex Mono',monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:.05em; }
.project-card .meta-line{ margin:0.9rem 0 0.2rem; font-size:0.88rem; color:var(--text-dim); }
.project-card .meta-line b{ color:var(--text); font-weight:600; text-transform:uppercase; font-size:0.72rem; letter-spacing:.05em; font-family:'IBM Plex Mono',monospace; }
.project-card .watch-link{
  display:inline-block; margin-top:0.9rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.75rem;
  color:var(--accent); border-bottom:1px solid var(--accent);
  text-transform:uppercase; letter-spacing:.05em;
  transition:color .2s ease, border-color .2s ease;
}
.project-card .watch-link:hover{
  background:var(--rainbow); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rainbow-slide 3s linear infinite;
  border-color:var(--accent-2);
}

/* ---------- About page ---------- */
.about-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  padding-top:1rem;
  align-items:stretch;
}
@media (max-width:820px){
  .about-layout{ grid-template-columns:1fr; }
  .about-portrait{ height:auto; max-height:min(70vh, 640px); }
  .about-portrait .cel-img{ height:100%; min-height:420px; }
}
.about-portrait{
  margin:0;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.about-portrait .cel-img{
  margin-left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}
.cv-line{ margin-top:1.8rem; }
.cv-line a{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:'IBM Plex Mono',monospace; font-size:0.95rem;
  padding:0.75em 1.4em; border-radius:var(--radius);
  border:1px solid var(--accent); color:var(--accent);
  text-transform:uppercase; letter-spacing:.05em;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .3s ease;
}
.cv-line a:hover{
  background:var(--rainbow); background-size:300% 100%;
  animation:rainbow-slide 3s linear infinite;
  border-color:transparent; color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px -10px rgba(255,95,174,0.5);
}

/* ---------- Contact form ---------- */
.contact-form{ margin-top:2.5rem; max-width:520px; }
.contact-form label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim);
  margin:1.1rem 0 0.4rem;
}
.contact-form input, .contact-form textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--rule);
  border-radius:var(--radius); color:var(--text); font-family:'Inter',sans-serif;
  padding:0.7em 0.8em; font-size:0.95rem;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent);
}
.contact-form button{
  margin-top:1.4rem; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:0.8em 1.6em; border-radius:var(--radius);
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  transition:background .2s ease, box-shadow .3s ease, transform .15s ease;
}
.contact-form button:hover{
  background:var(--rainbow); background-size:300% 100%;
  animation:rainbow-slide 3s linear infinite;
  border-color:transparent;
  box-shadow:0 10px 26px -10px rgba(255,95,174,0.55);
  transform:translateY(-2px);
}
.form-note{ margin-top:0.8rem; font-size:0.8rem; color:var(--accent-2); display:none; }
.form-note.is-visible{ display:block; }

/* ---------- Cross-links footer ("découvrez une autre section") ---------- */
.discover{
  border-top:1px solid var(--rule); margin-top:3rem; padding-top:2rem;
}
.discover .eyebrow{ margin-bottom:0.9rem; display:block; }
.discover-links{
  display:flex; flex-wrap:wrap; gap:0.6rem 1rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.discover-links a{
  color:var(--text-dim); border:1px solid var(--rule);
  padding:0.5em 0.9em; border-radius:var(--radius);
  transition:color .15s ease, border-color .15s ease, box-shadow .25s ease;
}
.discover-links a:hover{
  color:var(--accent); border-color:var(--accent-2);
  box-shadow:0 0 0 1px rgba(99,212,255,0.25);
}

/* ---------- Back to top ---------- */
.back-top{
  display:inline-block; margin-top:2.5rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;
}
.back-top:hover{ color:var(--accent); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--rule);
  padding:2rem 1.5rem; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  color:var(--text-dim); letter-spacing:.04em;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

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

/* ---------- Missing image fallback marker (see script.js) ---------- */
.img-missing{ opacity:0.55; }