/* ===========================
   philmagie — css/allpage.css
   Style clair rouge, commun à toutes les pages
   =========================== */

/* Variables & bases */
:root{
  --bg:#ffffff; --surface:#f5f5f7; --surface-2:#eeeeee; --line:#dddddd;
  --text:#111111; --muted:#555555; --link:#cc0000; --accent:#cc0000;
  --max:1040px; --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.15);
  --focus:0 0 0 3px rgba(204,0,0,.2); --gutter:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#fff 0%,#f8f8f8 100%);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--link); text-decoration:none}
a:hover{opacity:.92}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.icon path{fill:var(--accent)} /* teinte rouge pour tous les pictos */

/* ===========================
   Header + navigation
   =========================== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  isolation:isolate; /* évite conflits z-index (WOWSlider) */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--gutter);
}
.brand{font-weight:900; font-size:2rem; line-height:1.1; text-transform:uppercase; letter-spacing:2px}
.brand .subtitle{font-weight:600; font-size:1.1rem; color:var(--accent); margin-top:4px; letter-spacing:1px}

/* Burger nav */
.nav-wrap{position:relative}
#nav-toggle{display:none}
.nav-btn{
  display:none; cursor:pointer; user-select:none;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
}
.nav-btn span{display:block; width:22px; height:2px; background:#333; position:relative}
.nav-btn span::before,.nav-btn span::after{content:""; position:absolute; left:0; width:22px; height:2px; background:#333}
.nav-btn span::before{top:-6px} .nav-btn span::after{top:6px}

/* Menu */
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:6px; flex-wrap:wrap; align-items:center}
nav li a{
  display:block; padding:9px 12px; border-radius:10px; position:relative;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease;
  font-size:.90rem; letter-spacing:.05em; font-weight:600; text-transform:uppercase;
  color:var(--text); border:1px solid transparent;
}
/* Barre soulignée animée (hover + actif) */
nav li a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:transparent; transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease, background .2s ease; border-radius:2px;
}
nav li a:hover{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); transform:translateY(-1px)}
nav li a:hover::after{background:var(--accent); transform:scaleX(1)}
nav li a:focus-visible{outline:none; box-shadow:var(--focus)}
#menuactif > a{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
#menuactif > a::after{background:var(--accent); transform:scaleX(1)}

/* ===========================
   Intro
   =========================== */
.intro{padding:48px var(--gutter) 28px}
.intro h1{
  margin:0 0 8px; font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.15; font-weight:900; letter-spacing:.2px; position:relative;
}
.intro h1::after{
  content:""; display:block; width:clamp(120px,32vw,380px); height:4px; margin-top:12px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%, rgba(204,0,0,0) 100%);
}
.intro .lead{margin:10px 0 0; color:var(--muted); font-size:clamp(1.02rem,1.4vw,1.15rem); max-width:62ch}

/* ===========================
   Layout contenu
   =========================== */
main{padding:8px 0 56px}
.flow{
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent 60%);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(18px,2.2vw,28px);
}
.flow p, .flow li{margin:.85em 0; color:var(--text)}
.flow h1,.flow h2,.flow h3{color:var(--accent)}
.section{margin:0; padding:28px 0 10px}
.section + .section{border-top:1px solid var(--line)}
.section-header{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.section-header h2{margin:0; font-size:1.25rem}
.section-header .rule{height:1px; background:linear-gradient(90deg, var(--line), transparent); flex:1}
.section .images{text-align:center;padding:10px; height :auto; width:auto;}
.center{text-align:center}

/* ===========================
   Cartes, grilles, éléments génériques
   =========================== */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.card .media{aspect-ratio:5/6; background:#000; overflow:hidden}
.card .media img{width:100%; height:100%; object-fit:cover}
.contact-block{background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:18px 16px}
.contact-row{display:flex; gap:12px; align-items:center; padding:10px 0}
.contact-row + .contact-row{border-top:1px solid var(--line)}
.contact-row .label{font-weight:700; margin-right:8px}
.social-icons{display:flex; gap:12px}
.social-icons a{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line)}
.social-icons svg{width:20px; height:20px; fill:#111}
.review{margin-top:16px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:14px 16px}
.review img{max-width:160px; height:auto}

/* Tags (conférence) */
.highlights{display:flex; gap:16px; flex-wrap:wrap; margin:18px 0}
.tag{background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-weight:700; font-size:.95rem}

/* ===========================
   Tuiles vidéo (cover) + Lightbox Vimeo/YouTube
   =========================== */
.video-cover{
  position:relative; width:720px; max-width:100%; margin:14px auto 6px;
  aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#0b0b0b url('../img/accueil.jpg') center/cover no-repeat;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
}
.video-coverlord{
  position:relative; width:720px; max-width:100%; margin:14px auto 6px;
  aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#0b0b0b url('../img/lord.jpg') center/cover no-repeat;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
}


.video-cover .label{
  position:absolute; inset:auto 0 0 0; height:56px;
  background:linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0));
  display:flex; align-items:center; justify-content:right; gap:10px; font-weight:700; letter-spacing:.3px; margin-right:20px;
}

.video-coverlord .label{
  position:absolute; inset:auto 0 0 0; height:56px;
  background:linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0));
  display:flex; align-items:center; justify-content:left; gap:10px; font-weight:700; letter-spacing:.3px; margin-left:20px; 
}

.video-cover .play{
  width:40px; height:40px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  border-radius:50%; display:grid; place-items:center; backdrop-filter:blur(4px);
}
.video-cover .play svg{width:22px; height:22px; fill:#fff}

.video-coverlord .play{
  width:40px; height:40px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  border-radius:50%; display:grid; place-items:center; backdrop-filter:blur(4px);
}
.video-coverlord .play svg{width:22px; height:22px; fill:#fff}


/* Lightbox vidéo (Vimeo/YouTube) */
.vlightbox{display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); align-items:center; justify-content:center; padding:16px; overscroll-behavior:contain}
.vlightbox.open{display:flex}
.vlightbox-inner{width:min(92vw,980px)}
.vlightbox-inner .ratio{aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; box-shadow:0 0 24px rgba(0,0,0,.5)}
.vlightbox iframe{width:100%; height:100%; border:0; display:block}
.vlightbox-close{position:absolute; top:16px; right:22px; font-size:2.2rem; color:#fff; cursor:pointer; line-height:1; background:transparent; border:0}

/* ===========================
   Page VIDÉOS (grille + playlist) 
   =========================== */
.video-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.video-card{border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); overflow:hidden}
.video-thumb{position:relative; display:block; line-height:0; cursor:pointer}
.video-thumb img{display:block; width:100%; height:auto}
.play-badge{position:absolute; inset:auto 0 0 0; height:54px; background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,0)); display:flex; align-items:center; justify-content:center}
.play-badge svg{width:34px; height:34px; fill:#fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.playlist-card{border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); overflow:hidden; max-width:560px; margin:0 auto}
.playlist-thumb{display:block; position:relative; cursor:pointer}
.playlist-thumb .poster{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border-radius:10px; overflow:hidden;
  background: radial-gradient(120% 120% at 0% 100%, rgba(204,0,0,.45), transparent 60%),
             radial-gradient(120% 120% at 100% 0%, rgba(0,0,0,.35), transparent 60%), #111;
  color:#fff; text-align:center; padding:16px;
}
.playlist-thumb .poster .label{font-weight:800; letter-spacing:.3px; font-size:1.05rem; text-shadow:0 2px 6px rgba(0,0,0,.6)}
.playlist-thumb .poster .icon{width:58px; height:58px; margin-bottom:10px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}

/* ===========================
   Page PHOTOS (galerie + lightbox)
   =========================== */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:18px; margin-top:12px;
}
.thumb{display:block; width:100%; height:auto; cursor:zoom-in}
.card .actions{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-top:1px solid var(--line); background:var(--surface); font-size:.95rem;
}
.card .actions a{font-weight:700}

/* Lightbox images */
.lightbox{display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.9); align-items:center; justify-content:center}
.lightbox.open{display:flex}
.lightbox-img{max-width:90vw; max-height:90vh; border-radius:10px; box-shadow:0 0 24px rgba(0,0,0,.5)}
.lightbox-close{position:absolute; top:16px; right:22px; font-size:2.2rem; color:#fff; cursor:pointer; line-height:1; background:transparent; border:0}
.lightbox-nav{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.lightbox-btn{pointer-events:auto; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.25); cursor:pointer}
.lightbox-btn svg{width:26px; height:26px; fill:#fff}
.lightbox-caption{position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.35); padding:6px 10px; border-radius:8px; font-size:.95rem; max-width:90vw; text-align:center}

/* ===========================
   WOWSlider : conteneurs neutres
   =========================== */
#wowslider-container1,
#wowslider-container2,
#wowslider-container3{
  position:relative; z-index:0; max-width:100%; margin-left:auto; margin-right:auto; border-radius:12px; overflow:hidden;
}
#wowslider-container3 .ws_shadow{display:none}

/* ===========================
   Footers (2 variantes)
   =========================== */
/* Footer “complet” (index, photos, cours, lord martin, vidéos, conférence) */
footer#Footer{margin-top:48px; background:#fff; border-top:1px solid var(--line)}
.widgets_wrapper{padding:28px 0}
.footer-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.footer-contact{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface)
}
.footer-contact .icon{flex:0 0 28px; width:28px; height:28px}
.footer-contact a{color:var(--text); font-weight:700; word-break:break-word}
.footer_copy{border-top:1px solid var(--line); background:#fff}
.footer_copy .copyright{padding:14px 0; color:var(--muted); font-size:.95rem; text-align:center}
/* Footer “simple” (presentation/closeup) */
footer:not(#Footer){border-top:1px solid var(--line); padding:18px 0; color:var(--muted); font-size:.95rem}

/* ===========================
   Responsive
   =========================== */
@media (max-width:920px){ .brand{font-size:1.6rem} }
@media (max-width:820px){
  .nav-btn{display:inline-block}
  nav ul{
    display:none; flex-direction:column; gap:6px;
    position:absolute; right:0; top:46px; min-width:260px;
    padding:10px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  }
  #nav-toggle:checked ~ nav ul{display:flex}
  nav li a{padding:10px 12px; font-size:.95rem; text-transform:none; letter-spacing:.01em}
}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr} }
@media (max-width:600px){
  .header-inner{ --gutter:12px }
  .container.intro{ --gutter:12px }
}