/* =========================================================
   GLOBALE ESTHETIQUE — BANNIERE PLEIN ESPACE (06/10/2026)
   1) PC : le bloc « Toutes les catégories » est retiré, la
      bannière occupe sa place (les 2 cartes promo restent à droite).
   2) Toutes les bannières (y compris celles ajoutées depuis
      l'admin) remplissent entièrement le cadre : plus de marge,
      de halo ni de masque autour de l'image.
   Chargé en dernier dans includes/header.php.
   ========================================================= */

/* ---------- Toutes tailles : une image seule n'a ni voile ni halo ---------- */
.hero-slide--image-seule .hero-visual::before,
.hero-slide--image-seule .hero-visual::after{
  content:none !important;
  display:none !important;
}

.hero-slide--image-seule .hero-visual img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:none !important;
}

/* ---------- PC ---------- */
@media (min-width:901px){

  /* Deux colonnes : bannière + cartes promo */
  .main-grid{
    grid-template-columns:minmax(0, 3.8fr) minmax(0, 1.2fr) !important;
    align-items:stretch !important;
  }
  .main-grid > .sidebar{ display:none !important; }

  /* Les cartes promo prennent exactement la hauteur de la bannière
     (c'est la bannière qui fixe la hauteur de la ligne, pas l'inverse). */
  .main-grid > .promo-col{
    height:0 !important;
    min-height:100% !important;
    gap:14px !important;
  }
  .main-grid > .promo-col .promo-card{
    min-height:0 !important;
    padding:16px 20px !important;
  }
  .main-grid > .promo-col .promo-label{ margin-bottom:4px !important; }
  .main-grid > .promo-col .promo-big{ font-size:22px !important; margin-bottom:2px !important; }
  .main-grid > .promo-col .promo-sub{ font-size:12.5px !important; line-height:1.4 !important; }
  .main-grid > .promo-col .promo-card .btn{ margin-top:10px !important; padding:9px 16px !important; }
  .main-grid > .promo-col .promo-card img{ width:112px !important; height:112px !important; }

  /* Le cadre : proportion fixe 2,5:1, identique pour toutes les slides */
  .main-grid > .hero{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:2.5 / 1 !important;
    padding:0 !important;
    border-radius:var(--radius, 20px) !important;
    overflow:hidden !important;
    background:#f8f1ef !important;
  }
  .main-grid > .hero::before,
  .main-grid > .hero::after{ content:none !important; }

  /* Chaque slide remplit exactement le cadre */
  .main-grid > .hero .hero-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    border-radius:0 !important;
    align-items:center !important;
  }

  /* L'image couvre toute la surface, sans masque */
  .main-grid > .hero .hero-slide .hero-visual{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    flex:none !important;
    z-index:0 !important;
    overflow:hidden !important;
    transform:none !important;
    animation:none !important;
  }
  .main-grid > .hero .hero-slide .hero-visual::before{ content:none !important; }
  .main-grid > .hero .hero-slide .hero-visual img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:0 !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:none !important;
    animation:none !important;
    transform:none !important;
  }

  /* Bannières « image + texte » : le texte se pose sur l'image, à gauche */
  .main-grid > .hero .hero-slide .hero-copy{
    position:relative !important;
    z-index:2 !important;
    flex:none !important;
    width:38% !important;
    max-width:470px !important;
    margin:0 0 0 5% !important;
    padding:28px 18px !important;
    text-align:center !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  .main-grid > .hero .hero-slide .hero-copy::before{
    content:"" !important;
    position:absolute !important;
    inset:-18px -26px !important;
    z-index:-1 !important;
    background:radial-gradient(ellipse 68% 72% at center, rgba(255,255,255,.72) 0%, rgba(255,255,255,.3) 55%, transparent 78%) !important;
    filter:blur(4px) !important;
    border-radius:32px !important;
    pointer-events:none !important;
  }
  .main-grid > .hero .hero-slide .hero-title{
    font-size:clamp(26px, 2.7vw, 42px) !important;
    line-height:1.1 !important;
  }
  .main-grid > .hero .hero-slide .hero-desc{
    margin:10px auto 0 !important;
    max-width:360px !important;
  }
  .main-grid > .hero .hero-slide .hero-cta{ margin-top:18px !important; }

  /* Position du texte choisie dans Admin › Bannières */
  .main-grid > .hero .hero-slide--texte-centre .hero-copy{
    margin:0 auto !important;
    width:36% !important;
    max-width:440px !important;
  }
  .main-grid > .hero .hero-slide--texte-droite .hero-copy{
    margin:0 5% 0 auto !important;
  }
  /* Cadrage vertical de l'image (quand elle est plus haute que le cadre) */
  .main-grid > .hero .hero-slide--cadrage-haut .hero-visual img{ object-position:center 12% !important; }
  .main-grid > .hero .hero-slide--cadrage-bas  .hero-visual img{ object-position:center 86% !important; }

  /* Flèches et points au-dessus de l'image */
  .main-grid > .hero .hero-arrows{ z-index:6 !important; }
  .main-grid > .hero .hero-dots{ z-index:7 !important; bottom:14px !important; }
  .main-grid > .hero .hero-dot{ background:rgba(255,255,255,.75) !important; box-shadow:0 1px 4px rgba(0,0,0,.18); }
  .main-grid > .hero .hero-dot.active{ background:var(--pink) !important; }
}

/* ---------- Petits écrans PC / tablettes paysage : cartes promo compactes ---------- */
@media (min-width:901px) and (max-width:1180px){
  .main-grid > .promo-col .promo-card{ padding:12px 16px !important; }
  .main-grid > .promo-col .promo-sub{ display:none !important; }
  .main-grid > .promo-col .promo-big{ font-size:19px !important; }
  .main-grid > .promo-col .promo-card .btn{ margin-top:8px !important; padding:8px 14px !important; }
  .main-grid > .promo-col .promo-card img{ width:84px !important; height:84px !important; }
}