/* =========================================================
   BLOG.CSS - Page Blog & Vidéos
   Objectif : VOIR TOUTE L'IMAGE (pas coupée)
   (override propre de style.css)
========================================================= */

/* ===== HERO BLOG (override de style.css) ===== */
.hero{
  /* on annule le hero "background" de style.css */
  position:relative !important;
  display:block !important;           /* stop flex center */
  min-height:unset !important;        /* stop min-height 100vh */
  padding:0 !important;               /* stop gros padding */
  text-align:center;
  overflow:hidden;
  background:#000;                    /* bandes noires si besoin */
}

/* ✅ image visible EN ENTIER */
.hero .hero-img{
  position:static !important;         /* annule absolute */
  inset:auto !important;
  width:100% !important;
  height:auto !important;             /* garde ratio => image entière */
  display:block !important;
  object-fit:contain !important;      /* pas de crop */
  object-position:center !important;
  background:#000;
  z-index:0 !important;
}

/* overlay lisibilité (au-dessus de l'image) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:1;
  pointer-events:none;
}

/* texte centré sur l'image */
.hero .hero-content{
  position:absolute !important;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:900px;
  width:90%;
  color:#fff;
  z-index:2 !important;
  text-shadow:1px 1px 10px rgba(0,0,0,.6);
  padding:0 12px;
}

.hero .hero-content h1{
  font-size:2.4rem;
  margin-bottom:10px;
}

.hero .hero-content p{
  font-size:1.1rem;
  opacity:.95;
}

/* ===== TITRES SECTIONS ===== */
.section h2{
  margin-bottom:14px;
  color:#111;
}

/* =========================================================
   VIDEOS GRID
========================================================= */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  margin-top:24px;
}

.video-grid video{
  width:100%;
  border-radius:14px;
  background:#000;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  overflow:hidden;
}

.video-grid video:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* =========================================================
   CONTACT SECTION (sur blog)
========================================================= */
#contact.section-light{
  background:#f5f5f5;
}

.contact-grid{
  margin-top:18px;
}

.contact-grid h2{
  margin-bottom:10px;
}

.contact-grid p{
  margin-bottom:10px;
  color:#333;
}

.contact-grid a{
  color:#222;
  font-weight:700;
}

.contact-grid a:hover{
  text-decoration:underline;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 992px){
  .hero .hero-content h1{font-size:2rem}
  .hero .hero-content p{font-size:1rem}
}

@media (max-width: 600px){
  .hero .hero-content h1{font-size:1.6rem}
  .hero .hero-content p{font-size:.95rem}
  .video-grid{grid-template-columns:1fr}
}