/* ============================================================
   ALOÉ BIEN-ÊTRE - accueil.css
   Chargé par index.php uniquement : héro, comparatif, témoignages, vidéo.
   ============================================================ */

/* ---------- Accueil : héro ---------- */
.hero{padding:70px 0 60px;background:linear-gradient(135deg,#f2f8ee,#e4efdb);background-size:cover;background-position:center;min-height:auto}
.hero-text h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:18px}
.hero-text h1 span{color:var(--fl-green-lime)}
.hero-text p{font-size:1.12rem;margin-bottom:26px;color:#1e293b;font-weight:bold}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Vidéo ---------- */
.video-wrap{display:inline-block;position:relative;width:100%;max-width:900px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .5s var(--e)}
.video-wrap:hover{box-shadow:0 24px 50px rgba(0,0,0,.16)}
.video-wrap img{width:100%;display:block}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:rgba(220,38,38,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:transform .4s var(--e),background .3s}
.video-wrap:hover .play-btn{transform:translate(-50%,-50%) scale(1.12);background:rgba(220,38,38,1)}
.play-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(220,38,38,.6);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
.play-btn i{color:#fff;font-size:2.5rem;margin-left:6px}

/* ---------- "Pourquoi moi" (comparatif) ---------- */
.compare{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid #eef2ec;font-size:.95rem}
.compare thead th{background:var(--fl-green-dark);color:#fff;font-family:Arial,sans-serif}
.compare tbody th{font-weight:bold;color:var(--fl-green-dark)}
.compare .yes{color:var(--fl-green-dark);font-weight:bold}
.compare .yes i{color:var(--fl-green-lime);margin-right:6px}
.compare .no{color:#b0b8ad}
.compare .no i{margin-right:6px}

/* ---------- Témoignages ---------- */
.testimo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.testimo-card{position:relative;overflow:hidden;background:var(--white);padding:30px;border-radius:var(--radius);border:1px solid #eaeaea;transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s;text-align:left}
.testimo-card::before{content:"\201C";position:absolute;top:-28px;right:6px;font-family:'Arial Black',Arial,sans-serif;font-size:9rem;line-height:1;color:var(--fl-green-lime);opacity:.10;pointer-events:none;transition:opacity .5s,transform .6s var(--e)}
.testimo-card:hover{transform:translateY(-8px);border-color:var(--fl-green-lime);box-shadow:0 20px 44px rgba(45,90,39,.13)}
.testimo-card:hover::before{opacity:.18;transform:translateY(6px)}
.stars{color:var(--fl-accent-peach);margin-bottom:15px}
.testimo-card p{font-style:italic;margin-bottom:16px;color:var(--muted)}
.testimo-card .who{font-weight:bold;color:var(--fl-green-dark);font-style:normal}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:992px){
  .hero-text{text-align:center}
  .hero-actions{justify-content:center}
  .testimo-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .testimo-grid{grid-template-columns:1fr}
  .compare{display:block;overflow-x:auto}
}

/* ---------- Robustesse : images manquantes ---------- */
.hero .split-image{background:linear-gradient(135deg,#e8f0e0,#dbe8cf)}

/* Vignette vidéo : fond de secours si l'image manque */
.video-wrap.no-thumb{background:linear-gradient(135deg,var(--fl-green-dark),#24491f);min-height:320px}

/* Section vidéo "de la plante au produit" : texte + vidéo côte à côte */
.video-explain{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.video-explain .kicker{margin-bottom:8px}
.video-explain h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:16px}
.video-explain p{color:var(--muted);margin-bottom:14px}
.video-explain .video-small{max-width:100%;box-shadow:var(--shadow)}
.video-explain .video-small .play-btn{width:64px;height:64px}
.video-explain .video-small .play-btn i{font-size:1.9rem}
@media (max-width:992px){
  .video-explain{grid-template-columns:1fr;gap:26px}
  .video-explain .video-small{max-width:560px;margin:0 auto}
}

/* --- Tableau comparatif : cartes empilées sur mobile --- */
.compare-wrap{width:100%}
@media (max-width:768px){
  .compare-wrap{overflow:visible}
  .compare{box-shadow:none;background:transparent}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* masque l'en-tête */
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
  /* masque l'en-tête */
  .compare tr{background:var(--white);border:1px solid #e6ede1;border-radius:12px;box-shadow:0 6px 18px rgba(45,90,39,.06);margin-bottom:16px;padding:16px 18px;border-bottom:1px solid #e6ede1}
  /* masque l'en-tête */
  .compare tbody th{font-size:1.05rem;color:var(--fl-green-dark);padding:0 0 12px;border-bottom:1px solid #eef2ec;margin-bottom:10px}
  /* masque l'en-tête */
  .compare td{display:flex;align-items:flex-start;gap:8px;padding:7px 0;font-size:.95rem;border:none}
  /* masque l'en-tête */
  .compare td::before{content:attr(data-col);flex:none;width:130px;font-weight:bold;color:var(--muted);font-size:.82rem}
  /* masque l'en-tête */
  .compare td.yes{color:var(--fl-green-dark)}
  /* masque l'en-tête */
  .compare td.no{color:#98a3a8}
  /* masque l'en-tête */
  .compare td i{margin-top:2px}
}

/* --- Boutons du héro : pleine largeur et homogènes sur mobile --- */
@media (max-width:768px){
  .hero-actions{flex-direction:column;gap:12px;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
  .hero-actions .btn{width:100%}
}

/* --- Témoignages : plus compacts sur mobile --- */
@media (max-width:768px){
  .section .testimo-grid{gap:14px}
  .testimo-card{padding:20px 22px}
  .testimo-card::before{font-size:6rem;top:-16px}
  .testimo-card .stars{margin-bottom:10px}
  .testimo-card p{margin-bottom:10px;font-size:.95rem}
}

/* ============================================================
   MOBILE - BLOC DÉFINITIF (en-tête, espaces, produits)
   ============================================================ */
@media (max-width:768px){
  /* --- ESPACES : sections resserrées --- */
  .hero{padding:26px 0 26px}
}