/* RESET */
* { box-sizing:border-box; margin:0; padding:0; }



.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#f3f4f6;
  color:#111827;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* ===== FOND CS3Q : vidéo + fallback image ===== */

.bg-video{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

/* fallback image */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(100%) brightness(1.05);
}

/* voile blanc pour lisibilité */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,.85);
}

/* TOP BAR + NAV */
.top-bar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.6rem 1rem;
  background:rgba(249,250,251,.96);
  border-bottom:1px solid #e5e7eb;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.brand{
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#111827;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  align-items:center;
}

.brand span{
  font-weight:500;
  font-size:.78rem;
  text-transform:none;
  letter-spacing:normal;
  color:#4b5563;
}

.nav-toggle{
  display:none;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#f9fafb;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#111827;
  position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#111827;
}
.nav-toggle span::before{ top:-5px; }
.nav-toggle span::after{ top:5px; }

.top-nav{
  display:flex;
  flex-wrap:nowrap;
  gap:.4rem;
  padding:.25rem;
  border-radius:999px;
  background:#e5e7eb;
}
.top-nav a{
  text-decoration:none;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.75rem;
  font-weight:600;
  color:#374151;
  background:#f9fafb;
  border:1px solid #d1d5db;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:all .15s ease;
}
.top-nav a.active{
  background:#111827;
  color:#f9fafb;
  border-color:#111827;
}

main{
  max-width:960px;
  margin:0 auto;
  padding:1.25rem 1rem 2.5rem;
}

.page-intro{
  font-size:.9rem;
  background:rgba(255,255,255,.96);
  border-radius:.9rem;
  border:1px solid #e5e7eb;
  padding:.8rem .9rem;
  margin-bottom:1rem;
}
.page-intro strong{ font-weight:700; }

/* ACCORDIONS */
.accordion{
  margin-bottom:.8rem;
  border-radius:1rem;
  border:1px solid #e5e7eb;
  background:rgba(255,255,255,.96);
  overflow:hidden;
}
.accordion-header{
  width:100%;
  border:none;
  background:transparent;
  padding:.75rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.accordion-header-inner{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex:1;
  min-width:0;
}
.accordion-icon{
  width:28px;
  height:28px;
  flex-shrink:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  background:#e5e7eb;
}
.accordion-title{
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#111827;
  word-break:break-word;
}
.accordion-subtitle{
  font-size:.78rem;
  color:#6b7280;
  word-break:break-word;
}
.chevron{
  font-size:1rem;
  color:#6b7280;
  transition:transform .15s ease;
  flex-shrink:0;
}
.accordion-content{
  display:none;
  border-top:1px solid #e5e7eb;
  padding:.8rem .9rem .9rem;
  background:rgba(255,255,255,.98);
}
.accordion.open .accordion-content{ display:block; }
.accordion.open .chevron{ transform:rotate(180deg); }

/* COULEUR HEADER PAR SECTION */
.accordion--famille  .accordion-header{ background:#eff6ff; }
.accordion--grandir  .accordion-header{ background:#ecfdf3; }
.accordion--corps    .accordion-header{ background:#f5f3ff; }
.accordion--parcours .accordion-header{ background:#fefce8; }
.accordion--ensemble .accordion-header{ background:#fef2f2; }
.accordion--creatif  .accordion-header{ background:#ecfeff; }

/* GRILLE VIGNETTES */
.thumb-list{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.video-thumb{
  flex:1 1 calc(50% - .375rem);
  max-width:calc(50% - .375rem);
  border-radius:.9rem;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:.45rem;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  -webkit-tap-highlight-color:transparent;
  transition:all .2s ease;
}
.thumb-image{
  width:100%;
  height:150px;
  border-radius:.75rem;
  background:linear-gradient(135deg,#e5e7eb,#dbeafe);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.4rem;
  overflow:hidden;
  position:relative;
}
.thumb-image .play{
  width:42px;
  height:42px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.95);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.9);
}
.thumb-image .play::before{
  content:"";
  margin-left:2px;
  width:0;height:0;
  border-left:12px solid #f9fafb;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}

.video-thumb-title{
  font-size:.86rem;
  font-weight:650;
  color:#111827;
  margin-bottom:.05rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.video-thumb-meta{
  font-size:.75rem;
  color:#6b7280;
}

@media(hover:hover) and (pointer:fine){
  .video-thumb:hover{
    border-color:#9ca3af;
    box-shadow:0 8px 20px rgba(148,163,184,.4);
    transform:translateY(-2px);
  }
}

/* PLAYER OVERLAY */
.player-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(15,23,42,.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.player-overlay.visible{ display:flex; }

.player-inner{
  position:relative;
  max-width:1000px;
  width:100%;
  border-radius:1rem;
  background:#111827;
  color:#f9fafb;
  border:1px solid #4b5563;
  padding:1rem;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:1rem;
  margin:auto;
  box-shadow:0 18px 45px rgba(15,23,42,.6);
}

.player-close{
  position:absolute;
  top:.5rem;
  right:.5rem;
  width:30px;
  height:30px;
  border-radius:999px;
  border:none;
  background:rgba(15,23,42,.9);
  color:#f9fafb;
  font-size:1.1rem;
  cursor:pointer;
  z-index:15;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}

.player-video-wrapper{
  border-radius:.8rem;
  overflow:hidden;
  background:#000;
  position:relative;
}
.player-video-wrapper video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
  max-width:100%;
}

/* Flèches : sur la vidéo */
.player-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:999px;
  border:none;
  background:rgba(15,23,42,.9);
  color:#f9fafb;
  font-size:1rem;
  cursor:pointer;
  z-index:12;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.player-arrow.left{ left:.5rem; }
.player-arrow.right{ right:.5rem; }

.player-info{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.player-section-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid rgba(249,250,251,.2);
  align-self:flex-start;
  opacity:.9;
}
.player-title{
  font-size:1.05rem;
  font-weight:700;
  word-break:break-word;
}
.player-desc{
  font-size:.86rem;
  color:#e5e7eb;
  word-break:break-word;
}
.player-hours{
  font-size:.8rem;
  color:#e5e7eb;
}
.player-tag{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid rgba(249,250,251,.25);
  align-self:flex-start;
  display:none;
}
.player-hint{
  font-size:.75rem;
  color:#9ca3af;
  margin-top:.2rem;
}

/* VOILE COLORÉ PAR SECTION */
body.theme-famille::after{
  background:linear-gradient(135deg, rgba(64,210,255,.55), rgba(255,255,255,.97));
}
body.theme-grandir::after{
  background:linear-gradient(135deg, rgba(64,255,134,.55), rgba(255,255,255,.97));
}
body.theme-corps::after{
  background:linear-gradient(135deg, rgba(197,126,255,.55), rgba(255,255,255,.97));
}
body.theme-parcours::after{
  background:linear-gradient(135deg, rgba(255,212,90,.55), rgba(255,255,255,.97));
}
body.theme-ensemble::after{
  background:linear-gradient(135deg, rgba(255,107,129,.55), rgba(255,255,255,.97));
}
body.theme-creatif::after{
  background:linear-gradient(135deg, rgba(64,255,226,.55), rgba(255,255,255,.97));
}

/* PLAYER BOX COLORÉE PAR SECTION */
body.theme-famille .player-inner{
  border-color:#40d2ff;
  background:radial-gradient(circle at top left,rgba(64,210,255,.4),#020617) !important;
  box-shadow:0 18px 45px rgba(64,210,255,.55);
}
body.theme-grandir .player-inner{
  border-color:#40ff86;
  background:radial-gradient(circle at top left,rgba(64,255,134,.4),#020617) !important;
  box-shadow:0 18px 45px rgba(64,255,134,.55);
}
body.theme-corps .player-inner{
  border-color:#c57eff;
  background:radial-gradient(circle at top left,rgba(197,126,255,.4),#020617) !important;
  box-shadow:0 18px 45px rgba(197,126,255,.55);
}
body.theme-parcours .player-inner{
  border-color:#ffd45a;
  background:radial-gradient(circle at top left,rgba(255,212,90,.4),#020617) !important;
  box-shadow:0 18px 45px rgba(255,212,90,.55);
}
body.theme-ensemble .player-inner{
  border-color:#ff6b81;
  background:radial-gradient(circle at top left,rgba(255,107,129,.4),#020617) !important;
  box-shadow:0 18px 45px rgba(255,107,129,.55);
}
body.theme-creatif .player-inner{
  border-color:#40ffe2;
  background:radial-gradient(circle at top left,rgba(64,255,226,.4),#020617) !important;
  box-shadow:0 18px 45px rgba(64,255,226,.55);
}

/* BODY BLOQUÉ QUAND PLAYER OUVERT */
body.player-open{
  overflow:hidden;
  height:100%;
  width:100%;
  position:fixed;
}

/* TABLETTES */
@media(max-width:900px){
  .player-inner{
    grid-template-columns:minmax(0,1fr);
    gap:.8rem;
  }
}

/* MOBILE GÉNÉRAL */
@media(max-width:600px){
  body{ font-size:16px; }

  .top-bar{ padding:.6rem .75rem; }

  .nav-toggle{ display:flex; }
  .top-nav{
    position:fixed;
    left:0; right:0;
    top:3.1rem;
    flex-direction:column;
    background:rgba(249,250,251,.98);
    border-radius:0 0 1rem 1rem;
    padding:.4rem .75rem .6rem;
    gap:.35rem;
    max-height:0;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.25);
    transition:max-height .2s ease;
  }
  .top-nav.open{ max-height:260px; }
  .top-nav a{
    width:100%;
    text-align:left;
    font-size:.8rem;
  }

  main{ padding:1rem .75rem 2rem; }

  .page-intro{ font-size:.86rem; padding:.7rem .8rem; }

  .accordion{ border-radius:.85rem; }
  .accordion-header{ padding:.7rem .8rem; }
  .accordion-header-inner{ gap:.5rem; }
  .accordion-icon{ width:26px;height:26px;font-size:1rem; }
  .accordion-title{ font-size:.84rem; }
  .accordion-subtitle{ font-size:.74rem; }
  .accordion-content{ padding:.7rem .8rem .8rem; }

  .thumb-list{ gap:.6rem; }
  .video-thumb{
    flex:1 1 calc(50% - .3rem);
    max-width:calc(50% - .3rem);
    border-radius:.75rem;
    padding:.4rem;
  }
  .thumb-image{
    height:120px;
    border-radius:.6rem;
    margin-bottom:.35rem;
  }
  .thumb-image .play{ width:38px;height:38px; }
  .thumb-image .play::before{
    border-left:10px solid #f9fafb;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
  }
  .video-thumb-title{ font-size:.8rem; }
  .video-thumb-meta{ font-size:.72rem; }

  .player-overlay{
    align-items:flex-start;
    padding:.5rem;
  }
  .player-inner{
    max-width:100%;
    max-height:calc(100vh - 1rem);
    overflow-y:auto;
    border-radius:.8rem;
    padding:.8rem;
    margin-top:.5rem;
    margin-bottom:.5rem;
  }
  .player-close{
    top:.4rem; right:.4rem;
    width:28px; height:28px;
    font-size:1rem;
  }

  .player-arrow{
    width:26px;
    height:26px;
    font-size:.85rem;
    top:45%;
  }
  .player-arrow.left{ left:.3rem; }
  .player-arrow.right{ right:.3rem; }

  .player-title{ font-size:.95rem; }
  .player-desc{ font-size:.8rem; }
  .player-hours{ font-size:.76rem; }
  .player-section-label{ font-size:.68rem; }
  .player-hint{ font-size:.72rem; }
}

@media(max-width:400px){
  .video-thumb{ flex:1 1 100%; max-width:100%; }
  .thumb-image{ height:160px; }
  .video-thumb-title{ font-size:.82rem; }
  .player-inner{ padding:.7rem; }
}

/* MODE PAYSAGE GÉNÉRAL */
@media (max-width: 900px) and (orientation: landscape) {
  main { padding: 0.6rem 0.75rem 1.4rem; }
  .accordion { margin-bottom:0.6rem; }
  .thumb-list { gap:0.5rem; }
  .video-thumb {
    flex:1 1 calc(33.333% - 0.35rem);
    max-width:calc(33.333% - 0.35rem);
    padding:0.35rem;
  }
  .thumb-image { height:95px; }

  .player-overlay {
    padding:0.35rem;
    align-items:center;
  }
  .player-inner {
    max-width:96vw;
    max-height:92vh;
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:0.6rem;
    padding:0.7rem;
    margin:0;
  }
  .player-info {
    max-height:calc(92vh - 2rem);
    padding-right:0.3rem;
  }
  .player-arrow {
    width:26px;
    height:26px;
    font-size:0.85rem;
    top:45%;
  }
  .player-arrow.left { left:0.3rem; }
  .player-arrow.right { right:0.3rem; }
}

/* Paysage tablette */
@media (max-width: 900px) and (min-width: 600px) and (orientation: landscape) {
  .video-thumb {
    flex:1 1 calc(25% - 0.4rem);
    max-width:calc(25% - 0.4rem);
  }
  .thumb-image { height:90px; }
}

/* Paysage très petit tel */
@media (max-width: 600px) and (orientation: landscape) {
  .top-bar { padding:0.4rem 0.6rem; }
  .player-inner { grid-template-columns:1fr; max-height:90vh; }
  .player-video-wrapper { order:1; }
  .player-info {
    order:2;
    max-height:35vh;
    font-size:0.75rem;
  }
  .player-title {
    font-size:0.82rem;
    margin-bottom:0.2rem;
  }
  .player-desc {
    font-size:0.72rem;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .player-section-label,
  .player-hours { display:none; }
}

@supports(padding:max(0px)){
  .player-overlay{
    padding:max(.5rem,env(safe-area-inset-top))
            max(.5rem,env(safe-area-inset-right))
            max(.5rem,env(safe-area-inset-bottom))
            max(.5rem,env(safe-area-inset-left));
  }
}

/* --- Logo CS3Q (haut gauche) --- */
.cs3q-logo{
  position:fixed;
  top:12px;
  left:12px;
  width:92px;
  height:auto;
  z-index:60;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

/* Le logo disparaît quand le lecteur est ouvert */
body.player-open .cs3q-logo{
  display:none !important;
}

/* Ancres: éviter que la section soit cachée par le header sticky */
[id]{ scroll-margin-top: 86px; }

/* Reveal léger */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.reveal.reveal-in{
  opacity:1;
  transform:none;
}

@media (max-width:520px){
  .cs3q-logo{ width:74px; top:10px; left:10px; }
}