/* Home page modern layout matching pages/home.html */

/* Hero */
.hero {
  margin: 10px auto 24px;
  padding: 56px 20px;
  max-width: var(--largeur-site, 1200px);
  /* Bloc carbone : aplat opaque, arete vive, plus de cerne lime decoratif.
     Le lime revient uniquement par la barre de course sous le titre. */
  border-radius: var(--radius-lg);
  background: var(--carbon);
  border: 1px solid var(--border-color);
  text-align: left;
  box-shadow: none;
}
.hero-title { margin: 0 0 var(--space-3); color: inherit; }
.hero-title .title-text {
  /* Le titre reste en couleur pleine de texte : le lime est porte par la barre
     de course sous le titre, pas par le titre lui-meme. Un accent qui remplit
     les titres cesse d'etre un accent. */
  color: var(--text-primary);
}
.hero-subtitle { color: var(--muted); margin: 0 0 var(--space-5); max-width: var(--container-text); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.stat-item { display: grid; place-items: center; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--card-bg); border: 1px solid var(--border-color); }
.stat-icon { font-size: 18px; }
.stat-number { color: var(--text); font-weight: 800; font-size: clamp(18px, 2.5vw, 22px); }
.stat-label { color: var(--muted); font-size: 13px; }

/* Section header */
.section-header { text-align: left; margin: 0 0 var(--space-5); }
.section-title { margin: 0 0 6px; }
.section-title .title-text {
  /* Le titre reste en couleur pleine de texte : le lime est porte par la barre
     de course sous le titre, pas par le titre lui-meme. Un accent qui remplit
     les titres cesse d'etre un accent. */
  color: var(--text-primary);
}
/* `margin: 0 auto` centrait ce paragraphe : sa largeur est bridee a 68
   caracteres, donc dans un conteneur plus large il se decalait vers la droite
   pendant que le titre restait a gauche. Visible des la tablette. */
.section-description { margin: 0 0 var(--space-5); color: var(--muted); }

/* Alignement a gauche sur toute la page d'accueil. Le tout-centre alignait
   titres ET paragraphes sur un axe unique, ce qui nuisait a la lecture du
   texte courant et donnait l'allure d'un gabarit. */
.section-title,
.video-title,
.review-title,
.cta-title { text-align: left; }
.video-info,
.review-content,
.cta-content { text-align: left; }

/* Lite YouTube */
.yt-lite{ position:relative; width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; display:block; cursor:pointer; border-radius:14px; overflow:hidden; flex-shrink: 0; min-height: 0; }
.yt-lite img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-lite iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.yt-lite .yt-play{ position:absolute; inset:0; margin:auto; width:68px; height:48px; background:rgba(0,0,0,0.6); border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.yt-lite .yt-play::before{ content:''; position:absolute; left:26px; top:16px; border-style:solid; border-width:8px 0 8px 14px; border-color:transparent transparent transparent #fff; }

/* Video consent overlay */
.video-consent-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; border-radius: 14px; }
.video-consent-overlay .consent-message { background: var(--card-bg); padding: var(--space-5); border-radius: var(--radius-sm); text-align: center; max-width: 90%; border: 1px solid var(--border-color); box-shadow: none; }
.video-consent-overlay .consent-message p { margin: 0 0 16px; color: var(--text); font-size: var(--text-base); }
/* Ce bouton mesurait 39px de haut, sous le seuil tactile de 44px */
.video-consent-overlay .consent-btn { background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent-ink); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-base); transition: background 0.2s ease; }
.video-consent-overlay .consent-btn:hover { transform: translateY(-2px); }

/* Latest videos grid */
.videos-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 560px));
  justify-content: center; gap: 22px; align-items: start; }
.video-card{ background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; transition: transform .25s ease, background .25s ease, border-color .25s ease; display: flex; flex-direction: column; }
.video-card:hover{ transform: translateY(-2px); background: var(--card-bg-hover); border-color: var(--accent-line); }
.video-thumbnail{ position: relative; width: 100%; aspect-ratio: 16/9; flex-shrink: 0; overflow: hidden; }
.video-badge{ position:absolute; top:10px; left:10px; background: var(--accent); color: var(--accent-ink); font-weight:800; padding:6px 10px; border-radius:999px; font-size:12px; box-shadow:0 4px 12px rgba(0,0,0,0.25); z-index: 1; }
.video-info{ padding: 14px 14px 18px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.video-title{ margin: 8px 0 6px; color: var(--text); font-size: clamp(16px, 2vw, 18px); }
.video-description{ margin: 0; color: var(--muted); font-size: 14px; }

/* Reviews */
.reviews-section{ margin-top: 8px; }
.reviews-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 460px));
  justify-content: center; gap: 22px; }
.review-card{ background: var(--card-bg); border:1px solid var(--border-color); border-radius: var(--radius-sm); overflow:hidden; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.review-card:hover{ transform: translateY(-2px); background: var(--card-bg-hover); border-color: var(--accent-line); }
.review-content{ padding: 14px 14px 18px; }
.review-title{ margin: 8px 0 10px; color: var(--text); font-size: clamp(16px, 2vw, 18px); }
/* flex-wrap indispensable : sans lui les badges ne peuvent pas passer a la
   ligne. Ils se compriment alors sous leur largeur de contenu et le texte
   deborde de la carte -- mesure avant correction : rangee de 460px dans un
   bloc de 430px. Le defaut existait avant, Inter l'a rendu visible en
   elargissant legerement chaque libelle. */
.review-specs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.spec-badge{ display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); font-size:12px; color: var(--text); }
.review-description{ margin: 0; color: var(--muted); font-size: 14px; }

/* CTA */
.cta-section{ margin: var(--space-3) auto 0; max-width: var(--largeur-site, 1200px); padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg); background: var(--carbon); border:1px solid var(--border-color); text-align:left; box-shadow: none; }
.cta-content { text-align: left; }
.cta-title{ margin: 0 0 var(--space-2); text-align: left; }
.cta-description{ color: var(--muted); margin: 0 0 var(--space-5); text-align: left; max-width: var(--container-text); }
/* Alignes a GAUCHE, comme le titre et le paragraphe du meme bloc.
   Centres, ils s'ecartaient de 496px du titre sur un ecran de 1920 et de
   776px sur 2560 : c'est l'elargissement du conteneur qui a rendu ce
   centrage visible, l'ecart n'etait que de 176px en colonne de 1200. */
.cta-buttons{ display:flex; gap: 12px; justify-content: flex-start; flex-wrap:wrap; }
/* Bouton par defaut : contour NEUTRE. Les trois boutons etaient cernes de lime,
   ce qui banalisait l'accent. Seule l'action primaire porte l'aplat vert. */
.cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 2px solid var(--border-control); color: var(--text-primary); background: transparent; text-decoration:none; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.cta-btn:hover{ border-color: var(--accent-line); color: var(--accent-text); }
.cta-btn.primary{ background: var(--accent); border-color: var(--accent-ink); color: var(--accent-ink); }
.cta-btn.primary:hover{ background: var(--accent-hover); color: var(--accent-ink); }
.cta-btn.secondary,
.cta-btn.tertiary{ background: rgba(255,255,255,0.06); }
.cta-btn:hover{ transform: translateY(-2px) scale(1.03); }

/* Floating buttons (already themed in theme.css, keep minimal tweaks) */
/* Les commandes flottantes sont ancrees au BORD DE LA FENETRE, et c'est
   voulu : depuis que le site occupe tout l'ecran, la gouttiere dans
   laquelle elles se logeaient n'existe plus. Les y calculer par rapport a
   une colonne de 1200px les faisait tomber DANS le texte, ou elles
   masquaient des libelles et captaient leurs clics. */
#theme-toggle{ position: fixed; right: 20px; bottom: 120px; z-index: 1000; }
#scroll-to-top{ right: 20px; }

/* Responsive */
@media (max-width: 1024px){
  .reviews-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .hero{ padding: 40px 16px; }
  .hero-stats{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* Le passage a une colonne se faisait des 768px, donc en pleine tablette :
   les cartes video occupaient toute la largeur et la page devenait une longue
   colonne d'images geantes. Il est repousse a 600px, ou une seule colonne
   devient reellement justifiee. */
@media (max-width: 600px){
  .videos-grid{ grid-template-columns: 1fr; }
  .reviews-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .hero{
    padding: 30px 12px;
    border-radius: 16px;
  }

  .hero-subtitle{
    font-size: var(--text-base);
    margin-bottom: 16px;
  }

  .hero-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-stats .stat-item:last-child{
    grid-column: 1 / -1;
  }

  .stat-item{
    padding: 10px 8px;
  }

  .video-info,
  .review-content{
    padding: 12px;
  }

  .cta-section{
    padding: 28px 12px;
  }

  .cta-buttons{
    width: 100%;
    gap: 10px;
  }

  .cta-btn{
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
  }
}