/* ===========================
   Thème Atam Rasho (overrides Bootstrap)
   =========================== */

/* Palette & tokens */
:root{
  --bg-from:#fcfaf7;
  --bg-to:#ffffff;
  --ink:#1d1d20;
  --ink-muted:#6b6257;
  --surface:#ffffff;
  --border:#e6e0d4;
  --accent:#8b1e2e;   /* bordeaux contemporain */
  --gold:#b48a3c;     /* doré discret */
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --radius:16px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65;
  background:
    linear-gradient(180deg, var(--bg-from), var(--bg-to)),
    url("../img/modern-noise.png");
  background-size:auto, 128px 128px;
  background-repeat:no-repeat, repeat;
}
h1,h2,h3,.navbar-brand,.btn{ font-family:"Cinzel", serif; }

/* Links */
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--accent) }

/* Containers spacing helpers */
.section{ padding-block:2.5rem }
.section-sm{ padding-block:1.25rem }

/* ===========================
   Header / Navbar (Bootstrap)
   =========================== */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.navbar .navbar-brand{
  font-weight:700;
  letter-spacing:.3px;
}
.navbar .nav-link{
  position:relative;
  padding:.6rem .9rem;
  color:var(--ink);
  transition:color .2s ease;
}
.navbar .nav-link:hover{ color:var(--accent) }

/* Lien actif : couleur + fin liseré doré, sans pastille */
.navbar .nav-link.active{
  color:var(--accent) !important;
  font-weight:600;
}

/* Barre dorée animée au survol ET à l’état actif */
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:.35rem; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:2px;
  opacity:0;
  transform:scaleX(.6);
  transform-origin:center;
  transition:opacity .2s ease, transform .2s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  opacity:1;
  transform:scaleX(1);
}

/* Supprime l’ancien point rouge */
.navbar .nav-link.active::before{ content:none !important; }

/* ===========================
   Hero
   =========================== */
.hero{
  position:relative; min-height:60vh; display:grid; place-items:center; text-align:center; overflow:hidden;
}
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72) }
.hero .hero-card{
  position:relative; max-width:900px; margin-inline:auto;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  border-radius:20px; padding:2rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:#6e1524;
  --bs-btn-hover-border-color:#6e1524;
  --bs-btn-focus-shadow-rgb:139,30,46;
}

/* ===========================
   Cards / Preview
   =========================== */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.08) }
.ratio img{ object-fit:cover; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius) }

/* Dessins (grille + captions) */
.art-card .card-body a{ color:var(--ink); }
.art-card .card-body a:hover{ color:var(--accent); }

/* ===========================
   Page "Dessins" & "Dessin"
   =========================== */
.page-header{ text-align:center; max-width:900px; margin:0 auto }
.page-header p{ color:var(--ink-muted) }

.work-desc{ color:var(--ink-muted) }

/* ===========================
   Timeline (accueil)
   =========================== */
.timeline{ max-width:900px; margin:0 auto }
.timeline-list{
  display:grid; gap:1.2rem; border-left:2px solid var(--gold);
  padding-left:1rem; text-align:left
}
.timeline .event{ position:relative }
.timeline .event::before{
  content:""; position:absolute; left:-1.3rem; top:.35rem; width:.9rem; height:.9rem; border-radius:50%;
  background:var(--gold);
}
.timeline .date{ font-weight:700; color:var(--accent); margin-right:.5rem }

/* ===========================
   Footer
   =========================== */
footer{
  background:#fff; border-top:1px solid var(--border);
  color:var(--ink-muted);
}

/* ===========================
   Utilities
   =========================== */
.object-fit-cover{ object-fit:cover }
.rounded-top-lg{
  border-top-left-radius:var(--radius)!important;
  border-top-right-radius:var(--radius)!important;
}

/* Focus visible (accessibilité) */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 65%, white);
  outline-offset:2px;
}

/* Small screens */
@media (max-width: 576px){
  .hero{ min-height:56vh }
}

/* ==== Grille "Dessins" — cartes harmonisées ==== */
.art-grid .card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease;
  width:100%;
}
.art-grid .card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* Zone image (ratio 4:3) */
.art-grid .ratio{
  background:#f7f7f7;
  border-bottom:1px solid var(--border);
}

/* Assure que <picture> et <img> remplissent le conteneur ratio */
.ratio > picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.ratio > picture > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Corps (titre) */
.art-grid .card-body{
  padding:.85rem 1rem;
  background:#fff;
  border-top:1px solid var(--border);
}
.art-grid .card-body h3{
  margin:0;
  font-family:"Cinzel", serif;
  letter-spacing:.5px;
}

/* Lien du titre */
.art-title-link{
  color:var(--ink);
  text-decoration:none;
}
.art-title-link:hover{
  color:var(--accent);
  text-decoration:underline;
}

/* Colonnes flex → cartes de même hauteur */
.art-grid .col{ display:flex }

/* ===========================
   Vidéos — cartes & lecteur
   =========================== */
.video-card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.video-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.video-thumb{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0;
}
.video-thumb img{
  opacity:0; /* devient 1 quand 'is-loaded' */
  transform: scale(1.02);
  transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.video-card:hover .video-thumb img{
  transform: scale(1.05);
}

/* Badge lecture – doux, ne masque pas l'image */
.ratio > .play-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  border:1px solid var(--border);
  font-size:22px; line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  pointer-events:none;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.video-thumb:hover .play-badge,
.video-embed:hover .play-badge{
  transform: translate(-50%,-50%) scale(1.06);
  filter: brightness(.95);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* Page film – même micro-effet sur la vignette avant lecture */
.video-embed{
  position:relative;
  border-radius:16px;
  overflow:hidden;
}
.video-embed img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform: scale(1.01);
  transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.video-embed:hover img{ transform: scale(1.03); }

/* état une fois l'image chargée (ajouté en JS) */
.is-loaded{ opacity:1 !important; }

/* --- HOTFIX VISIBILITÉ NAV & TEXTE --- */
body { color:#1d1d20 !important; }
h1,h2,h3,h4,h5,h6 { color:#1d1d20; }
p, .card, .card-body, .page-header, footer { color:inherit; }

/* Liens nav toujours visibles */
.navbar .nav-link { color:#1d1d20 !important; opacity:1 !important; }
.navbar .nav-link:hover { color:#8b1e2e !important; }
.navbar .nav-link.active { color:#8b1e2e !important; }

/* Soulignement doré (hover + actif), sans pastille */
.navbar .nav-link::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:.35rem; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:2px;
  opacity:0; transform:scaleX(.6); transform-origin:center;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none; /* ne couvre jamais le texte */
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{ opacity:1; transform:scaleX(1); }

/* On neutralise complètement l’ancienne pastille */
.navbar .nav-link.active::before{ content:none !important; }

/* ===========================================
   GLightbox — suppression complète du zoom
   =========================================== */
.glightbox-container .gcontrols .gzoomIn,
.glightbox-container .gcontrols .gzoomOut,
.glightbox-container .gbtn.gzoomIn,
.glightbox-container .gbtn.gzoomOut,
.glightbox-container .gslide-zoomed,
.glightbox-container .gzoom {
  display: none !important;
}

/* Empêche le curseur "loupe" */
.glightbox-container .gslide-image img {
  cursor: default !important;
  transform: none !important;
}

/* Empêche tout zoom sur double-tap mobile */
.glightbox-container.touch .gslide-media {
  touch-action: pan-y !important;
}