*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top,#3a0909 0%,#120606 45%,#080808 100%);
  color:#fff4df;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,60,45,.13),transparent 28%),
    radial-gradient(circle at 80% 5%,rgba(255,204,117,.08),transparent 28%),
    linear-gradient(120deg,transparent 0 45%,rgba(255,35,28,.06) 46%,transparent 47%);
  opacity:.9;
}
.page{
  width:min(1120px,92%);
  margin:0 auto;
  position:relative;
  z-index:1;
}
.nav{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  gap:8px;
  padding:10px;
  border-radius:999px;
  border:1px solid rgba(255,204,117,.22);
  background:rgba(8,6,6,.78);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.nav a{
  color:#fff4df;
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  padding:10px 14px;
  border-radius:999px;
  transition:.2s ease;
  white-space:nowrap;
}
.nav a:hover,.nav a.active{
  background:#ffcc75;
  color:#120606;
}
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:110px 0 80px;
}
.logo{
  width:min(340px,86vw);
  border-radius:28px;
  box-shadow:0 0 0 1px rgba(255,204,117,.22),0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(210,25,20,.28);
  margin-bottom:32px;
}
.eyebrow{
  color:#ffcc75;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:800;
  margin:0 0 14px;
}
h1{
  font-size:clamp(3.4rem,11vw,7.5rem);
  margin:0;
  letter-spacing:.08em;
  line-height:.95;
  text-transform:uppercase;
  text-shadow:0 10px 38px rgba(0,0,0,.55);
}
.subtitle{
  max-width:760px;
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  line-height:1.7;
  color:#ffe9c8;
  margin:26px auto 0;
}
.buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:36px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:150px;
  height:58px;
  padding:12px 18px;
  border-radius:14px;
  text-decoration:none;
  color:#fff4df;
  border:1px solid rgba(255,204,117,.24);
  background:rgba(255,255,255,.055);
  font-weight:800;
  transition:.22s ease;
}
.button:hover{
  transform:translateY(-4px);
  border-color:rgba(255,204,117,.72);
  background:rgba(255,255,255,.105);
  box-shadow:0 16px 45px rgba(0,0,0,.35),0 0 28px rgba(215,25,20,.24);
}
.button.primary{
  background:linear-gradient(135deg,#d71914,#7d0907);
  border-color:rgba(255,204,117,.7);
}
.icon{
  width:26px;
  height:26px;
  object-fit:contain;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  width:100%;
  margin-top:36px;
}
.home-card{
  display:block;
  text-align:left;
  padding:24px;
  border-radius:22px;
  color:#fff4df;
  text-decoration:none;
  border:1px solid rgba(255,204,117,.18);
  background:rgba(255,255,255,.055);
  transition:.22s ease;
}
.home-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,204,117,.7);
  background:rgba(255,255,255,.095);
  box-shadow:0 20px 55px rgba(0,0,0,.35),0 0 30px rgba(215,25,20,.18);
}
.home-card span{font-size:2rem;display:block;margin-bottom:12px}
.home-card strong{display:block;color:#ffcc75;font-size:1.15rem;margin-bottom:8px}
.home-card p{margin:0;color:#d8c1a0;line-height:1.55}
.section{
  padding:75px 0;
  border-top:1px solid rgba(255,56,48,.22);
}
.section-title{text-align:center;margin-bottom:32px}
.section-title p{margin:0 0 8px;color:#ffcc75;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:800}
.section-title h2{margin:0;font-size:clamp(2rem,5vw,3.2rem)}
.two-col{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
}
.panel{
  padding:34px;
  border-radius:28px;
  border:1px solid rgba(255,204,117,.18);
  background:rgba(255,255,255,.048);
  box-shadow:0 30px 80px rgba(0,0,0,.24);
}
.panel h2,.panel h3{color:#ffcc75;margin-top:0}
.panel p{color:#ffe9c8;line-height:1.75}
.feature-list{display:grid;gap:18px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,204,117,.16)}
.feature{display:flex;gap:14px}
.feature b{color:#fff4df}
.feature p{margin:4px 0 0;color:#d8c1a0}
.inner{
  min-height:100vh;
  padding:125px 0 80px;
}
.page-head{text-align:center;margin-bottom:34px}
.page-head img.logo-small{
  width:160px;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.42);
  margin-bottom:24px;
}
.page-head p{max-width:760px;margin:18px auto 0;color:#ffe9c8;line-height:1.7;font-size:1.13rem}
.detail-grid,.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:26px;
}
.detail{
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(255,204,117,.16);
  background:rgba(0,0,0,.22);
}
.detail h3{margin:0 0 10px;color:#ffcc75}
.detail p{margin:0;color:#d8c1a0;line-height:1.65}
.overlay-header{
  width:min(760px,96%);
  display:block;
  margin:0 auto 30px;
  border-radius:28px;
  border:1px solid rgba(255,204,117,.22);
  box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 55px rgba(215,25,20,.2);
}
.featured{
  margin-top:30px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,204,117,.18);
  background:linear-gradient(135deg,rgba(215,25,20,.16),rgba(255,255,255,.04));
}
.featured img{width:100%;border-radius:20px;display:block}
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:30px;
}
.overlay-card{
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,204,117,.16);
  background:rgba(255,255,255,.045);
  box-shadow:0 22px 65px rgba(0,0,0,.24);
  transition:.22s ease;
}
.overlay-card:hover{transform:translateY(-5px);border-color:rgba(255,204,117,.62)}
.overlay-card img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.overlay-card div{padding:20px}
.overlay-card h3{margin:0 0 12px;color:#ffcc75}
.meta{display:flex;gap:10px;flex-wrap:wrap}
.meta span{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.24);border:1px solid rgba(255,204,117,.14);color:#d8c1a0;font-size:.88rem}
.contact-links{display:grid;gap:12px}
.contact-links a{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff4df;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,204,117,.14);
}
.contact-links img{width:26px;height:26px}
.back{display:inline-flex;margin-top:24px;color:#ffcc75;text-decoration:none;font-weight:800}
footer{
  width:min(1120px,92%);
  margin:0 auto;
  position:relative;
  z-index:1;
  padding:34px 0 42px;
  border-top:1px solid rgba(255,204,117,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#a98f6f;
}
footer strong{display:block;color:#fff4df;font-size:1.35rem;letter-spacing:.08em;text-transform:uppercase}
footer span{color:#ff3a32;font-size:.78rem;font-weight:800;letter-spacing:.08em}
.socials{display:flex;gap:12px}
.socials a{width:46px;height:46px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(255,204,117,.2);background:rgba(255,255,255,.045)}
.socials img{width:22px;height:22px}
@media(max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .nav{width:min(94%,560px);overflow-x:auto;justify-content:flex-start}
  .two-col,.detail-grid,.featured,.gallery,.contact-grid{grid-template-columns:1fr}
  footer{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  .card-grid{grid-template-columns:1fr}
  .buttons{width:100%}
  .button{width:100%}
  .panel{padding:24px}
}


/* V1.5.3 - logo typographique Lyttos */
.wordmark {
  display: block;
  width: min(560px, 88vw);
  margin: 0 auto;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(215, 25, 20, 0.22));
}

.wordmark-small {
  display: block;
  width: min(230px, 70vw);
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.footer-wordmark {
  display: block;
  width: 135px;
  max-width: 42vw;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

@media(max-width:560px){
  .wordmark {
    width: min(420px, 92vw);
  }
  .footer-wordmark {
    width: 120px;
  }
}


/* V1.5.3.1 - correction logo typo transparent */
.wordmark,
.wordmark-small,
.footer-wordmark {
  background: transparent !important;
}
.wordmark {
  max-height: 190px;
  object-fit: contain;
}


/* V1.5.3.3 - logo typographique transparent */
.wordmark,
.wordmark-small,
.footer-wordmark {
  background: transparent !important;
  object-fit: contain;
}

.wordmark {
  max-height: 180px;
}

.wordmark-small {
  max-height: 90px;
}

.footer-wordmark {
  max-height: 48px;
}


/* V1.5.4 - Planning Stream + titres de pages */
.page-head h1 {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.06em;
}

.planning-list {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.planning-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 204, 117, 0.16);
  background: rgba(0, 0, 0, 0.22);
}

.planning-day {
  color: #120606;
  background: #ffcc75;
  border-radius: 999px;
  padding: 8px 12px;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}

.planning-item h3 {
  margin: 0 0 8px;
  color: #ffcc75;
}

.planning-item p {
  margin: 0;
  color: #d8c1a0;
  line-height: 1.65;
}

@media(max-width:560px){
  .planning-item {
    grid-template-columns: 1fr;
  }
}


/* V1.5.5 - finition visuelle premium */
body {
  animation: pageFadeIn 0.45s ease both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.nav:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42), 0 0 28px rgba(215, 25, 20, 0.16);
}

.home-card,
.panel,
.detail,
.overlay-card,
.featured {
  backdrop-filter: blur(8px);
}

.page-head h1 {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 10px 35px rgba(0,0,0,0.55), 0 0 20px rgba(215,25,20,0.18);
}

.panel h2,
.panel h3,
.detail h3,
.overlay-card h3,
.featured h3 {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.04em;
}

.button,
.home-card,
.contact-links a {
  position: relative;
}

.button::after,
.home-card::after,
.contact-links a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255, 204, 117, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.button:hover::after,
.home-card:hover::after,
.contact-links a:hover::after {
  opacity: 1;
}


/* V1.6 - Studio Edition : ambiance cinématique rouge/or */
body {
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 200, 110, 0.08), transparent 18%),
    radial-gradient(circle at 18% 72%, rgba(215, 25, 20, 0.12), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(255, 70, 50, 0.08), transparent 28%);
  animation: ambientDrift 14s ease-in-out infinite alternate;
}

@keyframes ambientDrift {
  from {
    transform: translate3d(-8px, -6px, 0) scale(1);
    opacity: 0.7;
  }
  to {
    transform: translate3d(10px, 8px, 0) scale(1.03);
    opacity: 1;
  }
}

.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particles span {
  position: absolute;
  bottom: -40px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 204, 117, 0.72);
  box-shadow: 0 0 12px rgba(255, 78, 48, 0.55);
  animation: emberRise linear infinite;
}

.particles span:nth-child(1){left:7%;animation-duration:13s;animation-delay:-2s}
.particles span:nth-child(2){left:14%;animation-duration:18s;animation-delay:-9s;width:2px;height:2px}
.particles span:nth-child(3){left:23%;animation-duration:15s;animation-delay:-4s}
.particles span:nth-child(4){left:31%;animation-duration:21s;animation-delay:-14s;width:2px;height:2px}
.particles span:nth-child(5){left:39%;animation-duration:16s;animation-delay:-7s}
.particles span:nth-child(6){left:48%;animation-duration:22s;animation-delay:-10s;width:2px;height:2px}
.particles span:nth-child(7){left:56%;animation-duration:14s;animation-delay:-5s}
.particles span:nth-child(8){left:64%;animation-duration:19s;animation-delay:-12s;width:2px;height:2px}
.particles span:nth-child(9){left:73%;animation-duration:17s;animation-delay:-8s}
.particles span:nth-child(10){left:82%;animation-duration:24s;animation-delay:-16s;width:2px;height:2px}
.particles span:nth-child(11){left:90%;animation-duration:15s;animation-delay:-3s}
.particles span:nth-child(12){left:96%;animation-duration:20s;animation-delay:-11s;width:2px;height:2px}

@keyframes emberRise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(28px, -110vh, 0) scale(1.35);
    opacity: 0;
  }
}

.nav {
  position: fixed;
  isolation: isolate;
}

.nav::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,204,117,.28), rgba(215,25,20,.12), rgba(255,204,117,.2));
  z-index: -1;
  opacity: .7;
}

.hero {
  position: relative;
  perspective: 900px;
}

.hero .logo {
  animation: heroLogoIn 0.95s ease both, logoHalo 5s ease-in-out infinite 1s;
}

@keyframes heroLogoIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes logoHalo {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255,204,117,.2),0 30px 90px rgba(0,0,0,.55),0 0 42px rgba(210,25,20,.24);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255,204,117,.32),0 30px 90px rgba(0,0,0,.55),0 0 76px rgba(210,25,20,.4);
  }
}

.hero .wordmark {
  position: relative;
  animation: wordmarkReveal 1.15s ease both 0.22s;
}

@keyframes wordmarkReveal {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 10px 28px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(215,25,20,.22));
  }
}

.subtitle,
.buttons,
.card-grid {
  animation: contentRise 0.8s ease both;
}

.subtitle { animation-delay: 0.28s; }
.buttons { animation-delay: 0.42s; }
.card-grid { animation-delay: 0.55s; }

@keyframes contentRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-card,
.button,
.panel,
.detail,
.overlay-card,
.featured,
.planning-item {
  will-change: transform;
}

.home-card,
.overlay-card,
.detail,
.planning-item,
.contact-links a {
  position: relative;
  overflow: hidden;
}

.home-card::before,
.overlay-card::before,
.detail::before,
.planning-item::before,
.contact-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(105deg, transparent, rgba(255, 204, 117, 0.12), transparent);
  transition: transform 0.65s ease;
}

.home-card:hover::before,
.overlay-card:hover::before,
.detail:hover::before,
.planning-item:hover::before,
.contact-links a:hover::before {
  transform: translateX(120%);
}

.button {
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(105deg, transparent, rgba(255, 244, 223, 0.22), transparent);
  transition: transform 0.55s ease;
}

.button:hover::before {
  transform: translateX(130%);
}

.section,
.panel,
.page-head {
  animation: sectionReveal 0.75s ease both;
}

@keyframes sectionReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

footer {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
  border-radius: 28px 28px 0 0;
}

footer::before {
  content: "Développeur indépendant • Créateur de contenu • Designer d’overlays";
  display: block;
  color: #d8c1a0;
  font-size: .92rem;
  margin-bottom: 12px;
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* V1.6.1 - Cinematic Intro */
.hero {
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -14%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 204, 117, 0.12), transparent 16%),
    radial-gradient(circle at 50% 42%, rgba(215, 25, 20, 0.16), transparent 28%);
  opacity: 0;
  transform: translateY(-28px) scale(1.04);
  animation: cameraDropGlow 1.25s cubic-bezier(.19,1,.22,1) both;
}

@keyframes cameraDropGlow {
  0% {
    opacity: 0;
    transform: translateY(-42px) scale(1.06);
  }
  45% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero .logo {
  transform-origin: center;
  animation:
    cinematicLogoDrop 1.15s cubic-bezier(.18,.92,.22,1.14) both,
    logoHalo 5s ease-in-out infinite 1.15s !important;
}

@keyframes cinematicLogoDrop {
  0% {
    opacity: 0;
    transform: translateY(-54px) scale(.96);
    filter: blur(7px);
  }
  62% {
    opacity: 1;
    transform: translateY(8px) scale(1.01);
    filter: blur(0);
  }
  82% {
    transform: translateY(-3px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero .wordmark {
  position: relative;
  overflow: hidden;
  animation: cinematicWordmark 0.85s cubic-bezier(.19,1,.22,1) both 0.55s !important;
}

.hero .wordmark::after {
  content: "";
}

@keyframes cinematicWordmark {
  0% {
    opacity: 0;
    transform: translateY(-34px) scale(.985);
    filter: blur(5px);
  }
  72% {
    opacity: 1;
    transform: translateY(4px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 10px 28px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(215,25,20,.22));
  }
}

.hero .eyebrow {
  animation: cinematicSoftIn 0.65s ease both 0.35s;
}

.hero .subtitle {
  animation: cinematicSoftIn 0.65s ease both 0.78s !important;
}

.hero .buttons {
  animation: cinematicSoftIn 0.65s ease both 0.95s !important;
}

.hero .card-grid {
  animation: cinematicSoftIn 0.7s ease both 1.1s !important;
}

@keyframes cinematicSoftIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.wordmark,
.wordmark-small {
  position: relative;
}

.wordmark {
  clip-path: inset(0 0 0 0);
}

.hero .wordmark {
  mask-image: linear-gradient(90deg, #000 0%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
}

.hero::after {
  content: "";
  position: absolute;
  top: 44%;
  left: -35%;
  width: 36%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 180, 0.9), transparent);
  box-shadow: 0 0 20px rgba(255, 204, 117, 0.55);
  transform: rotate(-4deg);
  opacity: 0;
  animation: goldSweep 0.85s ease both 0.9s;
}

@keyframes goldSweep {
  0% {
    opacity: 0;
    left: -35%;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 105%;
  }
}

@media(max-width:560px){
  .hero::after {
    top: 48%;
  }
}


/* V1.6.2 - reflet premium uniquement sur le logo */
.hero::after {
  display: none !important;
  animation: none !important;
}

.wordmark-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}

.wordmark-wrap .wordmark {
  display: block;
}

.wordmark-wrap::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: -55%;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 244, 205, 0.08) 25%,
    rgba(255, 218, 126, 0.55) 50%,
    rgba(255, 244, 205, 0.08) 75%,
    transparent 100%
  );
  filter: blur(8px);
  transform: skewX(-18deg);
  opacity: 0;
  animation: logoOnlySweep 0.95s ease both 0.9s;
}

@keyframes logoOnlySweep {
  0% {
    left: -55%;
    opacity: 0;
  }
  16% {
    opacity: 0.85;
  }
  100% {
    left: 118%;
    opacity: 0;
  }
}

.hero .logo {
  animation:
    cinematicLogoDrop 1.15s cubic-bezier(.18,.92,.22,1.14) both,
    logoHaloPremium 4.8s ease-in-out infinite 1.15s !important;
}

@keyframes logoHaloPremium {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255,204,117,.18),0 30px 90px rgba(0,0,0,.55),0 0 38px rgba(210,25,20,.20);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255,204,117,.28),0 30px 90px rgba(0,0,0,.55),0 0 64px rgba(210,25,20,.34);
  }
}

.particles span {
  filter: blur(0.6px);
  opacity: 0.78;
}

.particles span:nth-child(odd) {
  animation-duration: 22s !important;
}

.particles span:nth-child(even) {
  animation-duration: 28s !important;
}

@media(max-width:560px){
  .wordmark-wrap::after {
    top: 18%;
    bottom: 18%;
  }
}


/* V1.6.4 - Logo Premium : support discret sans grand rectangle */
.hero-bg-texture,
.hero-vignette {
  display: none !important;
}

.hero-logo-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  margin-bottom: 32px;
  padding: 14px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
    rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 204, 117, 0.16);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 54px rgba(215, 25, 20, 0.18),
    inset 0 0 36px rgba(255, 204, 117, 0.035);
  backdrop-filter: blur(10px);
}

.hero-logo-frame::before {
  content: "";
  position: absolute;
  inset: -26px;
  z-index: -1;
  border-radius: 44px;
  background:
    radial-gradient(circle at center, rgba(215, 25, 20, 0.22), transparent 58%),
    radial-gradient(circle at center, rgba(255, 204, 117, 0.07), transparent 42%);
  filter: blur(18px);
  opacity: 0.9;
}

.hero-logo-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 28px;
  pointer-events: none;
  border: 1px solid rgba(255, 244, 223, 0.06);
}

.hero-logo-frame .logo {
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow:
    0 0 0 1px rgba(255,204,117,.18),
    0 20px 70px rgba(0,0,0,.48),
    0 0 48px rgba(210,25,20,.24);
}

@media(max-width:560px){
  .hero-logo-frame {
    padding: 10px;
    border-radius: 28px;
  }
}


/* V1.6.5 - Premium Cards */
.home-card,
.overlay-card,
.detail,
.planning-item,
.contact-links a {
  transform-style: preserve-3d;
  transition:
    transform 0.36s cubic-bezier(.2,.8,.2,1),
    border-color 0.36s ease,
    background 0.36s ease,
    box-shadow 0.36s ease,
    color 0.36s ease;
}

.home-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 204, 117, 0.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.035)),
    rgba(0, 0, 0, 0.16);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.20),
    inset 0 0 28px rgba(255,204,117,0.018);
}

.home-card:hover {
  transform: translateY(-8px) scale(1.02) rotateX(1deg) rotateY(-1deg);
  border-color: rgba(255, 204, 117, 0.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.045)),
    rgba(60, 5, 5, 0.18);
  box-shadow:
    0 28px 76px rgba(0,0,0,0.42),
    0 0 36px rgba(215,25,20,0.24),
    inset 0 0 42px rgba(255,204,117,0.035);
}

.home-card span {
  transition: transform 0.36s ease, filter 0.36s ease;
}

.home-card:hover span {
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 0 12px rgba(255,204,117,0.28));
}

.home-card strong {
  transition: color 0.36s ease, text-shadow 0.36s ease;
}

.home-card:hover strong {
  color: #ffe0a4;
  text-shadow: 0 0 18px rgba(255,204,117,0.18);
}

.home-card p {
  transition: color 0.36s ease;
}

.home-card:hover p {
  color: #ffe9c8;
}

.home-card::before,
.overlay-card::before,
.detail::before,
.planning-item::before,
.contact-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-135%);
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,244,223,0.045) 38%,
    rgba(255,204,117,0.16) 50%,
    rgba(255,244,223,0.045) 62%,
    transparent 100%
  );
  transition: transform 0.72s ease;
  pointer-events: none;
}

.home-card:hover::before,
.overlay-card:hover::before,
.detail:hover::before,
.planning-item:hover::before,
.contact-links a:hover::before {
  transform: translateX(135%);
}

.home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255, 58, 50, 0);
  box-shadow: inset 0 0 0 rgba(255, 58, 50, 0);
  transition: border-color 0.36s ease, box-shadow 0.36s ease;
}

.home-card:hover::after {
  border-color: rgba(255, 58, 50, 0.18);
  box-shadow: inset 0 0 24px rgba(255, 58, 50, 0.08);
}

.overlay-card:hover,
.detail:hover,
.planning-item:hover,
.contact-links a:hover {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(255, 204, 117, 0.58);
  box-shadow:
    0 24px 68px rgba(0,0,0,0.34),
    0 0 28px rgba(215,25,20,0.18);
}

.overlay-card img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.overlay-card:hover img {
  transform: scale(1.035);
  filter: contrast(1.05) saturate(1.08);
}

.button {
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.button:hover {
  transform: translateY(-5px) scale(1.015);
}


/* V1.6.6 - Titres studio */
.section-title h2,
.page-head h1,
.panel h2 {
  position: relative;
  display: inline-block;
}

.section-title h2::before,
.section-title h2::after,
.page-head h1::before,
.page-head h1::after,
.panel h2::before,
.panel h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 117, 0.8), rgba(215, 25, 20, 0.5));
  box-shadow: 0 0 12px rgba(255, 204, 117, 0.22);
}

.section-title h2::before,
.page-head h1::before,
.panel h2::before {
  right: calc(100% + 18px);
  transform: translateY(-50%) scaleX(-1);
}

.section-title h2::after,
.page-head h1::after,
.panel h2::after {
  left: calc(100% + 18px);
  transform: translateY(-50%);
}

.section-title h2 {
  padding: 0 4px;
}

.page-head h1 {
  padding: 0 6px;
}

.panel h2 {
  margin-left: 72px;
}

.panel h2::before {
  width: 42px;
  right: calc(100% + 14px);
}

.panel h2::after {
  width: 42px;
  left: calc(100% + 14px);
}

.section-title p,
.page-head .eyebrow {
  position: relative;
  display: inline-block;
}

.section-title p::before,
.section-title p::after,
.page-head .eyebrow::before,
.page-head .eyebrow::after {
  content: "◆";
  color: rgba(255, 204, 117, 0.75);
  font-size: 0.55rem;
  margin: 0 10px;
  vertical-align: middle;
  text-shadow: 0 0 12px rgba(255, 204, 117, 0.28);
}

@media(max-width:820px){
  .section-title h2::before,
  .section-title h2::after,
  .page-head h1::before,
  .page-head h1::after {
    width: 30px;
  }

  .panel h2 {
    margin-left: 0;
  }

  .panel h2::before,
  .panel h2::after {
    display: none;
  }
}

@media(max-width:560px){
  .section-title h2::before,
  .section-title h2::after,
  .page-head h1::before,
  .page-head h1::after {
    display: none;
  }
}


/* V1.6.6.1 - correction titres studio droits */
.section-title h2::before,
.section-title h2::after,
.page-head h1::before,
.page-head h1::after,
.panel h2::before,
.panel h2::after {
  display: none !important;
}

.section-title h2,
.page-head h1,
.panel h2 {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.page-head h1 {
  font-size: clamp(2.8rem, 8vw, 6.2rem);
  line-height: 1;
  text-align: center;
  padding-bottom: 18px;
}

.page-head h1::after {
  content: "";
  display: block !important;
  position: static;
  width: min(220px, 44vw);
  height: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 117, 0.82), rgba(215, 25, 20, 0.55), rgba(255, 204, 117, 0.82), transparent);
  box-shadow: 0 0 18px rgba(255, 204, 117, 0.20);
  transform: none;
}

.section-title h2::after,
.panel h2::after {
  content: "";
  display: block !important;
  position: static;
  width: min(160px, 38vw);
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 117, 0.76), rgba(215, 25, 20, 0.46), transparent);
  box-shadow: 0 0 14px rgba(255, 204, 117, 0.16);
  transform: none;
}

.panel h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.section-title p::before,
.section-title p::after,
.page-head .eyebrow::before,
.page-head .eyebrow::after {
  opacity: 0.72;
  margin: 0 8px;
}

@media(max-width:560px){
  .page-head h1 {
    font-size: clamp(2.4rem, 13vw, 4.2rem);
  }
}


/* V1.6.6.2 - en-têtes pages internes propres */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.page-head img.logo-small {
  margin-bottom: 18px !important;
}

.page-head .eyebrow {
  margin: 0 0 8px !important;
  line-height: 1;
  min-height: 20px;
}

.page-head .eyebrow::before,
.page-head .eyebrow::after {
  display: none !important;
}

.page-head .wordmark-small {
  margin: 0 auto 18px !important;
  width: min(260px, 68vw);
}

.page-head h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: center;
}

.page-head h1::after {
  margin-top: 18px !important;
}

.page-head > p:last-child {
  margin-top: 22px !important;
}

@media(max-width:560px){
  .page-head .wordmark-small {
    width: min(220px, 72vw);
  }
}


/* V1.6.7 - Premium Navigation */
.nav {
  position: fixed;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(10, 6, 6, 0.76);
  border-color: rgba(255, 204, 117, 0.24);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.34),
    0 0 26px rgba(215,25,20,0.10),
    inset 0 0 22px rgba(255,204,117,0.02);
}

.nav a {
  position: relative;
  z-index: 2;
  background: transparent !important;
  color: #fff4df;
  transition:
    color 0.28s ease,
    transform 0.28s ease,
    text-shadow 0.28s ease;
}

.nav a:hover {
  color: #ffdd9b;
  transform: translateY(-1px);
  text-shadow: 0 0 16px rgba(255, 204, 117, 0.18);
}

.nav a.active {
  color: #120606 !important;
  text-shadow: none;
}

.nav a.active::before {
  content: "";
  position: absolute;
  inset: 4px 4px;
  z-index: -1;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #ffdc94, #ffb84d 55%, #d71914);
  box-shadow:
    0 0 24px rgba(255, 204, 117, 0.25),
    0 0 20px rgba(215, 25, 20, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.34);
  animation: navActiveGlow 3.8s ease-in-out infinite;
}

.nav a.active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,204,117,0.85), transparent);
  box-shadow: 0 0 14px rgba(255,204,117,0.32);
}

@keyframes navActiveGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

.nav::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,204,117,0.16), transparent);
  opacity: 0.45;
  mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
}

@media(max-width:820px){
  .nav {
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a.active::after {
    bottom: -6px;
  }
}


/* V1.6.7.1 - Onglet actif plus Lyttos */
.nav a.active {
  color: #fff4df !important;
}

.nav a.active::before {
  background:
    linear-gradient(135deg, #4a0707 0%, #8f1010 48%, #d71914 100%) !important;
  border: 1px solid rgba(255, 244, 223, 0.10);
  box-shadow:
    0 0 22px rgba(215, 25, 20, 0.34),
    0 0 16px rgba(120, 10, 10, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.nav a.active::after {
  background: linear-gradient(90deg, transparent, rgba(215,25,20,0.78), transparent) !important;
  box-shadow: 0 0 14px rgba(215,25,20,0.34) !important;
}

@keyframes navActiveGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}


/* V1.6.8 - Page Transitions */
body {
  opacity: 0;
  transform: translateY(8px);
  animation: pageEnter 0.42s cubic-bezier(.2,.8,.2,1) forwards;
}

body.page-exit {
  animation: pageExit 0.28s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(2px);
  }
}

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(215,25,20,0.18), transparent 34%),
    rgba(0,0,0,0.18);
  transition: opacity 0.28s ease;
}

body.page-exit .transition-overlay {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body,
  body.page-exit {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .transition-overlay {
    display: none !important;
  }
}


/* V1.6.9 - Galerie Overlay Interactive */
.overlay-gallery.vitrine {
  grid-template-columns: repeat(2, 1fr);
}

.overlay-card.interactive {
  cursor: pointer;
  position: relative;
}

.overlay-card.interactive::after {
  content: "Voir";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff4df;
  background: rgba(10, 6, 6, 0.72);
  border: 1px solid rgba(255, 204, 117, 0.22);
  backdrop-filter: blur(8px);
  font-weight: 800;
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.overlay-card.interactive:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.overlay-card.placeholder-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.overlay-placeholder {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 204, 117, 0.12), transparent 30%),
    radial-gradient(circle at 50% 65%, rgba(215, 25, 20, 0.24), transparent 42%),
    linear-gradient(135deg, rgba(0,0,0,0.52), rgba(70, 5, 5, 0.34));
  border-bottom: 1px solid rgba(255, 204, 117, 0.12);
}

.overlay-placeholder span {
  color: #ffcc75;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.08em;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(215, 25, 20, 0.34);
}

.badge-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 204, 117, 0.14);
  background: rgba(0,0,0,0.24);
  color: #d8c1a0;
  font-size: 0.88rem;
}

.badge strong {
  color: #ffcc75;
}

.overlay-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.overlay-modal.is-open {
  display: flex;
}

.overlay-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(215, 25, 20, 0.16), transparent 38%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.overlay-modal-content {
  position: relative;
  z-index: 1;
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 204, 117, 0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    #0b0606;
  box-shadow:
    0 32px 120px rgba(0,0,0,0.68),
    0 0 60px rgba(215,25,20,0.18);
  animation: modalIn 0.25s ease both;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.overlay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 204, 117, 0.12);
}

.overlay-modal-header h3 {
  margin: 0;
  color: #ffcc75;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.04em;
}

.overlay-modal-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 204, 117, 0.18);
  background: rgba(255,255,255,0.055);
  color: #fff4df;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.overlay-modal-close:hover {
  transform: rotate(90deg);
  border-color: rgba(255, 204, 117, 0.55);
}

.overlay-modal-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050303;
}

.overlay-modal-frame iframe,
.overlay-modal-frame img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
}

.overlay-modal-info {
  padding: 18px 20px 22px;
}

.overlay-modal-info p {
  margin: 0;
  color: #d8c1a0;
  line-height: 1.6;
}

@media(max-width:820px){
  .overlay-gallery.vitrine {
    grid-template-columns: 1fr;
  }

  .overlay-modal {
    padding: 14px;
  }
}


/* V1.6.9.1 - Correction lightbox overlays */
.overlay-modal {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding: 34px 18px !important;
}

.overlay-modal-content {
  width: min(1080px, 96vw) !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto 34px !important;
}

.overlay-modal-frame {
  aspect-ratio: 16 / 9;
  max-height: 68vh;
  overflow: hidden;
}

.overlay-modal-frame iframe,
.overlay-modal-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.overlay-modal-info {
  max-height: 22vh;
  overflow-y: auto;
}

@media(max-width:820px){
  .overlay-modal {
    padding: 18px 10px !important;
  }

  .overlay-modal-content {
    width: 98vw !important;
    border-radius: 20px;
  }

  .overlay-modal-frame {
    max-height: 58vh;
  }

  .overlay-modal-info {
    max-height: 26vh;
  }
}


/* V1.6.9.2 - Lightbox fiable sans iframe vide */
.overlay-modal-frame {
  position: relative;
  cursor: default;
}

.overlay-modal-frame.is-clickable {
  cursor: pointer;
}

.overlay-modal-frame.is-clickable::after {
  content: "Cliquer pour voir l’overlay";
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 9px 12px;
  border-radius: 999px;
  color: #fff4df;
  background: rgba(10, 6, 6, 0.76);
  border: 1px solid rgba(255, 204, 117, 0.20);
  font-size: 0.84rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.overlay-modal-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(215,25,20,0.28), transparent 44%),
    linear-gradient(135deg, rgba(0,0,0,0.78), rgba(55,5,5,0.46));
}

.overlay-modal-placeholder span {
  color: #ffcc75;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-size: clamp(2rem, 7vw, 5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 34px rgba(215,25,20,0.38);
}


/* V1.6.9.3 - Galerie fiable sans modal */
.overlay-modal {
  display: none !important;
}

.overlay-card.interactive {
  text-decoration: none;
  color: inherit;
}

.overlay-card.interactive::after {
  content: "Ouvrir";
}

.overlay-card.interactive:active {
  transform: translateY(-2px) scale(0.992);
}

.overlay-card.interactive:hover img {
  transform: scale(1.055);
}

.overlay-card.interactive .badge-row {
  pointer-events: none;
}

.overlay-card.interactive h3,
.overlay-card.interactive span,
.overlay-card.interactive p {
  pointer-events: none;
}


/* V1.6.9.4 - Vidéos locales overlays */
.overlay-card.interactive::after {
  content: "▶ Voir";
}

.overlay-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.overlay-video-modal.is-open {
  display: flex;
}

.overlay-video-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(215, 25, 20, 0.18), transparent 38%),
    rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
}

.overlay-video-content {
  position: relative;
  z-index: 1;
  width: min(1120px, 96vw);
  max-height: 92vh;
  border-radius: 28px;
  border: 1px solid rgba(255, 204, 117, 0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    #080404;
  box-shadow:
    0 32px 120px rgba(0,0,0,0.70),
    0 0 70px rgba(215,25,20,0.20);
  overflow: hidden;
  animation: videoModalIn 0.25s ease both;
}

@keyframes videoModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.overlay-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 204, 117, 0.12);
}

.overlay-video-header h3 {
  margin: 0;
  color: #ffcc75;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.04em;
}

.overlay-video-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 204, 117, 0.18);
  background: rgba(255,255,255,0.055);
  color: #fff4df;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.overlay-video-close:hover {
  transform: rotate(90deg);
  border-color: rgba(255, 204, 117, 0.55);
}

.overlay-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #030202;
}

.overlay-video-frame video,
.overlay-video-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #030202;
}

.overlay-video-info {
  padding: 18px 20px 22px;
}

.overlay-video-info p {
  margin: 12px 0 0;
  color: #d8c1a0;
  line-height: 1.6;
}

.video-unavailable {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #ffcc75;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(215,25,20,0.25), transparent 42%),
    linear-gradient(135deg, rgba(0,0,0,0.72), rgba(58,6,6,0.42));
}

@media(max-width:820px){
  .overlay-video-modal {
    padding: 12px;
    align-items: flex-start;
    overflow-y: auto;
  }

  .overlay-video-content {
    width: 98vw;
    margin: 10px 0 20px;
    border-radius: 20px;
  }
}


/* V1.6.9.12 - overlay viewer reconstruit proprement */
#overlayViewerMount:empty {
  display: none !important;
}

#overlayViewerMount .inline-overlay-viewer {
  display: block !important;
  margin: 34px 0 28px !important;
}

#overlayViewerMount .inline-overlay-viewer.is-open {
  display: block !important;
}

.inline-overlay-viewer:not(.is-open) {
  display: none !important;
}


/* V1.6.9.13 - lecteur vidéo décoré sans bloc résiduel */
#overlayViewerMount {
  width: 100%;
  max-width: 100%;
}

#overlayViewerMount:empty {
  display: none !important;
}

#overlayViewerMount .inline-overlay-viewer {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px 0 28px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 204, 117, 0.18) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(215,25,20,0.13), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(10, 5, 5, 0.92) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.44),
    0 0 48px rgba(215,25,20,0.13),
    inset 0 0 42px rgba(255,204,117,0.018) !important;
  box-sizing: border-box !important;
}

#overlayViewerMount .inline-overlay-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  background: rgba(0,0,0,0.20) !important;
  border-bottom: 1px solid rgba(255, 204, 117, 0.12) !important;
}

#overlayViewerMount .inline-overlay-header h3 {
  margin: 0 !important;
  color: #ffcc75 !important;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif !important;
  letter-spacing: 0.04em !important;
  font-size: 1.15rem !important;
}

#overlayViewerMount .inline-overlay-close {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,204,117,0.20) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff4df !important;
  font-size: 1.35rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

#overlayViewerMount .inline-overlay-close:hover {
  transform: rotate(90deg) !important;
  border-color: rgba(215,25,20,0.55) !important;
  background: rgba(215,25,20,0.14) !important;
}

#overlayViewerMount .inline-overlay-frame {
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 16px auto 0 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at center, rgba(215,25,20,0.10), transparent 48%),
    #050303 !important;
  border: 1px solid rgba(255,204,117,0.10) !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,0.55),
    0 18px 50px rgba(0,0,0,0.28) !important;
  box-sizing: border-box !important;
}

#overlayViewerMount .inline-overlay-frame video,
#overlayViewerMount .inline-overlay-frame img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: #050303 !important;
}

#overlayViewerMount .inline-overlay-info {
  padding: 14px 18px 18px !important;
  background: rgba(0,0,0,0.16) !important;
}

#overlayViewerMount .inline-overlay-info p {
  margin: 10px 0 0 !important;
  color: #d8c1a0 !important;
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
}

@media(max-width:820px){
  #overlayViewerMount .inline-overlay-viewer {
    border-radius: 20px !important;
  }

  #overlayViewerMount .inline-overlay-frame {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-top: 10px !important;
    border-radius: 14px !important;
  }
}


/* V1.6.9.14 - séparation overlays vidéo / image */
.overlay-section-title {
  margin-top: 36px !important;
  margin-bottom: 18px !important;
}
.overlay-section-title::after {
  content: "";
  display: block;
  width: min(160px, 38vw);
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 117, 0.76), rgba(215, 25, 20, 0.46), transparent);
  box-shadow: 0 0 14px rgba(255, 204, 117, 0.16);
}
.featured .overlay-placeholder {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 204, 117, 0.12);
}
#overlayViewerMount:empty { display: none !important; }