/*
Theme Name:   Inreims (enfant de VidoRev)
Theme URI:    https://inreims.fr
Description:  Thème enfant de VidoRev, habillage visuel Inreims (couleurs, typographies, composants : mur de cartes, tiroir de menu, tuiles rubriques, billet vidéo, formulaires).
Author:       Team Inreims
Template:     vidorev
Version:      1.0.5
Text Domain:  inreims-child
*/

/* ==========================================================================
   IMPORTANT : vérifiez la ligne "Template:" ci-dessus avant l'installation.
   Elle doit correspondre EXACTEMENT au nom du dossier du thème parent
   (Apparence → Éditeur de thème, ou FTP → wp-content/themes/). Le slug le
   plus courant pour VidoRev est "vidorev", mais vérifiez le vôtre.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES — palette et typographies de marque
   ========================================================================== */
:root{
  --bg:#0c0e13;
  --panel:#161a22;
  --panel-2:#1e232e;
  --border:#2a303c;
  --text:#e8e9ec;
  --text-dim:#9a9fab;
  --accent:#da532c;      /* couleur de marque officielle du site */
  --accent-hover:#c14622;
  --gold:#e0b04a;
  --green:#3f8f5f;

  --font-display:'Poppins', sans-serif;
  --font-body:'Roboto', sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}
h1,h2,h3,h4{ font-family:var(--font-display); }
a{ color:inherit; text-decoration:none; }


/* ==========================================================================
   2. EN-TÊTE & MENU DÉROULANT GAUCHE
   ========================================================================== */
header.site-header,
#masthead{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 30px;
  position:sticky;
  top:0;
  z-index:30;
}

.inreims-burger{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.inreims-burger span{
  width:24px;
  height:2px;
  background:var(--text);
  display:block;
  transition:.25s;
}
.inreims-burger:hover span{ background:var(--accent); }

.inreims-logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
}
.inreims-logo .accent{ color:var(--accent); }

.inreims-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition:.3s;
  z-index:60;
}
.inreims-overlay.open{ opacity:1; pointer-events:auto; }

.inreims-drawer{
  position:fixed; top:0; left:0; bottom:0;
  width:min(340px, 86vw);
  background:var(--panel);
  transform:translateX(-105%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:70;
  padding:28px 26px;
  overflow-y:auto;
  border-right:1px solid var(--border);
}
.inreims-drawer.open{ transform:translateX(0); }
.inreims-drawer-close{
  background:none; border:none;
  font-size:0.85rem; cursor:pointer;
  color:var(--accent);
  margin-bottom:24px;
}
.inreims-drawer h4{
  font-size:1.3rem; text-transform:uppercase;
  margin-bottom:20px;
}
.inreims-drawer nav ul{ list-style:none; }
.inreims-drawer nav li{ border-bottom:1px solid var(--border); }
.inreims-drawer nav a{
  display:block; padding:12px 2px;
  font-weight:600; font-size:0.96rem;
  transition:.2s;
}
.inreims-drawer nav a:hover{ padding-left:8px; color:var(--accent); }
.inreims-drawer nav .sub{ padding-left:14px; }
.inreims-drawer nav .sub a{
  font-weight:400; font-size:0.82rem;
  color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.02em;
}

.inreims-live-chip{
  font-size:0.72rem; color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  padding:7px 12px; border-radius:999px;
}
.inreims-live-chip .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  animation:inreims-pulse 1.6s infinite;
}
@keyframes inreims-pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.btn-propose{
  background:var(--accent);
  color:#fff;
  padding:9px 16px;
  border-radius:5px;
  font-size:0.8rem;
  font-weight:600;
  white-space:nowrap;
}
.btn-propose:hover{ background:var(--accent-hover); }


/* ==========================================================================
   3. HERO (page d'accueil)
   ========================================================================== */
.inreims-hero{ max-width:1200px; margin:0 auto; padding:64px 30px 40px; }
.inreims-hero .eyebrow{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); font-weight:600; margin-bottom:14px;
}
.inreims-hero h1{
  font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800;
  max-width:16ch; line-height:1.08; margin-bottom:18px;
}
.inreims-hero h1 em{ font-style:normal; color:var(--accent); }
.inreims-hero p{
  color:var(--text-dim); font-size:1rem; max-width:52ch;
  line-height:1.65; margin-bottom:28px;
}

.btn-main{
  background:var(--accent); color:#fff;
  padding:13px 22px; border-radius:6px;
  font-weight:600; font-size:0.88rem; display:inline-block;
}
.btn-main:hover{ background:var(--accent-hover); }
.btn-ghost{
  border:1px solid var(--border);
  padding:13px 22px; border-radius:6px;
  font-weight:600; font-size:0.88rem; display:inline-block;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }


/* ==========================================================================
   4. CARTES PAYSAGE — rangées défilantes (À ne pas manquer, Durant l'année)
   ========================================================================== */
.row-block{ margin-bottom:48px; max-width:1200px; margin-left:auto; margin-right:auto; padding:0 30px; }
.elementor-widget-html .elementor-widget-container{ width:100% !important; }
.row-head{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  gap:8px 16px;
  margin-bottom:16px;
}
.row-head h2{
  font-size:1.3rem !important;
  font-weight:700 !important;
  margin:0 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.row-head a{
  font-size:0.78rem !important;
  color:var(--accent) !important;
  flex-shrink:0 !important;
  white-space:nowrap !important;
}
.row-head a:hover{ text-decoration:underline; }

.row-scroll{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x proximity;
}
.row-scroll::-webkit-scrollbar{ height:6px; }
.row-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }

.place-card{
  flex:0 0 260px; scroll-snap-align:start;
  border-radius:10px; overflow:hidden;
  background:var(--panel); border:1px solid var(--border);
  transition:.2s; cursor:pointer;
}
.place-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.place-thumb{
  aspect-ratio:16/9; position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--bg));
}
.place-thumb::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent 55%);
}
.place-thumb .cap{
  position:absolute; left:14px; right:14px; bottom:12px;
  font-weight:600; font-size:0.92rem; z-index:2; color:#fff;
}
.place-card .sub{
  padding:10px 14px 14px; font-size:0.7rem;
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; justify-content:space-between;
}
.place-card .sub .expire{ color:var(--accent); }
.place-card .sub .cat{ color:var(--text-dim); }


/* ==========================================================================
   5. TUILES DE RUBRIQUE (L'agenda rémois)
   ========================================================================== */
.tiles{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; background:var(--border); border-radius:10px; overflow:hidden;
}
@media (max-width:700px){ .tiles{ grid-template-columns:1fr 1fr; } }
.tile{
  background:var(--panel); padding:26px 20px; transition:.15s;
  display:flex; flex-direction:column; justify-content:space-between; min-height:130px;
}
.tile:hover{ background:var(--panel-2); }
.tile .num{ font-family:var(--font-display); font-weight:800; font-size:0.85rem; color:var(--gold); }
.tile h4{ font-size:1.05rem; font-weight:700; margin-top:12px; }
.tile .arrow{ align-self:flex-end; color:var(--text-dim); opacity:.5; transition:.15s; }
.tile:hover .arrow{ opacity:1; color:var(--accent); transform:translateX(3px); }


/* ==========================================================================
   6. VIGNETTES PORTRAIT (À l'affiche, séances liées)
   ========================================================================== */
.poster-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.poster-card{ cursor:pointer; }
.poster-card .thumb{
  aspect-ratio:2/3; border-radius:8px;
  background:linear-gradient(160deg,var(--panel-2),var(--bg));
  border:1px solid var(--border); margin-bottom:8px;
  position:relative; overflow:hidden; transition:.2s;
}
.poster-card:hover .thumb{ border-color:var(--accent); transform:translateY(-3px); }
.poster-card .t{ font-size:0.82rem; font-weight:500; line-height:1.3; }
.poster-card .badge-expire{
  font-size:0.65rem; color:var(--accent);
  text-transform:uppercase; display:block; margin-top:2px;
}


/* ==========================================================================
   7. FLUX SOCIAUX (lecture seule)
   ========================================================================== */
.feeds{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .feeds{ grid-template-columns:1fr; } }
.feed-card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:22px; }
.feed-card .feed-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.feed-card h3{ font-size:1rem; }
.badge-readonly{
  font-size:0.62rem; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold); padding:3px 8px; border-radius:999px;
}
.feed-placeholder{
  height:130px; border:1px dashed var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; color:var(--text-dim); text-align:center; padding:14px;
}


/* ==========================================================================
   8. FICHE VIDÉO — lecteur, métadonnées, navigation
   ========================================================================== */
.player-box{ background:#000; border-radius:8px; overflow:hidden; position:relative; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.player-16-9{ position:relative; padding-top:56.25%; }
.player-16-9 iframe,
.player-16-9 video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.up-next-toast{
  position:absolute; bottom:16px; right:16px;
  background:rgba(12,14,19,0.92); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; display:flex; gap:10px; align-items:center;
  z-index:5; max-width:260px;
}
.up-next-toast img{ width:44px; height:44px; border-radius:4px; object-fit:cover; }
.up-next-toast .lbl{ font-size:0.62rem; text-transform:uppercase; color:var(--text-dim); margin-bottom:2px; }
.up-next-toast .ttl{ font-size:0.8rem; font-weight:600; }
.up-next-toast button{ margin-left:auto; background:none; border:none; color:var(--text-dim); font-size:0.9rem; cursor:pointer; }

.info-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--panel); border:1px solid var(--border);
  border-radius:8px; overflow:hidden; margin-bottom:20px;
}
@media (max-width:640px){ .info-grid{ grid-template-columns:1fr 1fr; } }
.info-cell{ padding:16px 18px; border-right:1px solid var(--border); }
.info-cell:last-child{ border-right:none; }
.info-cell .k{ font-size:0.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:6px; }
.info-cell .v{ font-size:0.86rem; font-weight:600; }

.synopsis{ color:#c2c5cc; line-height:1.75; font-size:0.94rem; margin-bottom:24px; }

.prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:40px; }
.pn{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; transition:.15s; }
.pn:hover{ border-color:var(--accent); }
.pn img{ width:56px; height:56px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.pn.next{ flex-direction:row-reverse; text-align:right; }
.pn .lbl{ font-size:0.6rem; text-transform:uppercase; color:var(--text-dim); display:block; margin-bottom:3px; }
.pn .ttl{ font-size:0.84rem; font-weight:600; }


/* ==========================================================================
   9. FICHE LIEU — photo hero, flyer, carte
   ========================================================================== */
.hero-photo{
  aspect-ratio:21/9; border-radius:10px; overflow:hidden; position:relative; margin-bottom:22px;
  background:linear-gradient(155deg,var(--panel-2),var(--bg)); border:1px solid var(--border);
}
.hero-photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%); }
.hero-photo .cap{ position:absolute; left:26px; bottom:22px; z-index:2; }
.hero-photo .cap h1{ font-size:2rem; font-weight:700; margin-bottom:6px; }
.hero-photo .cap .addr{ font-size:0.86rem; color:#fff; display:flex; align-items:center; gap:6px; opacity:.9; }

.desc-box{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:24px; }
.desc-box p{ color:#c2c5cc; line-height:1.75; font-size:0.94rem; margin-bottom:16px; }

.flyer-card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:.2s; }
.flyer-card:hover{ border-color:var(--accent); }
.flyer-img{ aspect-ratio:3/4; background:linear-gradient(160deg,var(--panel-2),var(--bg)); }
.flyer-card .lbl{ padding:12px 14px; font-size:0.8rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; }

.map-box{ border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.map-box iframe{ width:100%; height:220px; border:0; filter:grayscale(0.3) invert(0.92) contrast(0.9); }


/* ==========================================================================
   10. FORMULAIRES (Proposer une info / Nous contacter)
   ========================================================================== */
.inreims-form-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:32px;
}
.inreims-field{ margin-bottom:22px; }
.inreims-field label{ display:block; font-size:0.8rem; font-weight:600; margin-bottom:8px; }
.inreims-field input[type=text],
.inreims-field input[type=email],
.inreims-field input[type=url],
.inreims-field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:7px;
  padding:12px 14px; color:var(--text); font-family:var(--font-body); font-size:0.9rem; transition:.15s;
}
.inreims-field input:focus,
.inreims-field textarea:focus{ outline:none; border-color:var(--accent); }
.inreims-field textarea{ min-height:120px; resize:vertical; }
.inreims-required{ color:var(--accent); }

.inreims-dropzone{
  border:2px dashed var(--border); border-radius:10px; padding:26px; text-align:center;
  background:var(--panel-2); cursor:pointer; transition:.15s;
}
.inreims-dropzone.hover{ border-color:var(--accent); background:rgba(218,83,44,0.06); }
.inreims-dropzone .main{ font-size:0.86rem; font-weight:600; margin-bottom:4px; }
.inreims-dropzone .sub{ font-size:0.72rem; color:var(--text-dim); }
.inreims-file-chip{
  margin-top:12px; display:none; align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--border); border-radius:7px; padding:10px 14px; font-size:0.8rem;
}
.inreims-file-chip.show{ display:flex; }
.inreims-file-chip button{ background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:0.9rem; }

.btn-submit{
  width:100%; background:var(--accent); border:none; color:#fff; padding:14px; border-radius:8px;
  font-family:var(--font-display); font-weight:600; font-size:0.94rem; cursor:pointer; transition:.15s;
}
.btn-submit:hover{ background:var(--accent-hover); }


/* ==========================================================================
   11. PAGE TEAM
   ========================================================================== */
.member-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:26px;
  display:flex; gap:18px; align-items:flex-start; transition:.2s;
}
.member-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.avatar{
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(150deg,var(--accent),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff;
  border:3px solid var(--panel-2);
}
.member-info h3{ font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.member-info .role{ font-size:0.78rem; color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
.member-info p{ font-size:0.86rem; color:var(--text-dim); line-height:1.55; }


/* ==========================================================================
   12. PIED DE PAGE
   ========================================================================== */
footer.site-footer,
#colophon{
  border-top:1px solid var(--border);
  padding:34px 30px;
  text-align:center;
  color:var(--text-dim);
  font-size:0.78rem;
}
footer.site-footer a,
#colophon a{ color:var(--gold); }

/* Liens à l'intérieur de n'importe quel widget "Éditeur de texte" Elementor
   (footer, mentions de contenu, etc.) — évite de styliser chaque lien à la main */
.elementor-widget-text-editor a,
.elementor-widget-text-editor .elementor-widget-container a{
  color:var(--gold) !important;
  text-decoration:underline !important;
}
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor .elementor-widget-container a:hover{
  color:var(--accent) !important;
}

/* Boutons-titres de section (En avant première, A ne pas manquer, etc.)
   Widgets "Bouton" utilisés comme intitulés discrets, pas comme CTA —
   ajoutez la classe "inreims-section-btn" dans Avancé > Classes CSS de
   chaque widget concerné */
.inreims-section-btn,
.inreims-section-btn *{
  background:transparent !important;
  box-shadow:none !important;
  color:var(--gold) !important;
  font-weight:600 !important;
  text-transform:none !important;
}
.inreims-section-btn:hover,
.inreims-section-btn:hover *{
  color:var(--accent) !important;
}