/* 1) Le header flotte au-dessus du slider */
#header.header-transparent .header-body {
  background: transparent !important;
  box-shadow: none !important;
}
#header.header-transparent {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1000; /* au-dessus du slider */
}

/* 2) Topbar transparent au-dessus du visuel */
#header .topbar-transparent {
  background: transparent !important;
}
#header.header-transparent .header-nav-main .nav > li > a,
#header.header-transparent .header-social-icons i,
#header.header-transparent #topbar,
#header.header-transparent .dropdown-item {
  color: #fff !important;
}


/* ===== ÉTAT 2 — STICKY (après scroll) ===== */
/* Porto peut poser la classe sticky sur html, body OU #header : on couvre tout */
html.sticky-header-active #header .header-body,
body.sticky-header-active #header .header-body,
#header.sticky-header-active .header-body {
  background:#fff !important;
  box-shadow:0 2px 14px rgba(0,0,0,.08) !important;
}

html.sticky-header-active #header .header-nav-main .nav > li > a,
body.sticky-header-active #header .header-nav-main .nav > li > a,
#header.sticky-header-active .header-nav-main .nav > li > a,
html.sticky-header-active #header .dropdown-item,
body.sticky-header-active #header .dropdown-item,
#header.sticky-header-active .dropdown-item,
html.sticky-header-active #header .text-primary,
body.sticky-header-active #header .text-primary,
#header.sticky-header-active .text-primary {
  color: #f19733  !important;
  border-color: #f19733 !important;
}

/* Logo : version foncée en sticky */

* Tailles fluides, sans width/height HTML */
.header-logo img { height: 47px; width: auto; transition: height .2s ease, filter .2s ease; }
.sticky-header-active .header-logo img { height: 37px; width: auto;  }

/* Mobile (xs < 576px) */
@media (max-width: 575.98px) {
  .header-logo img { height: 30px; width: auto;  }
  .sticky-header-active .header-logo img { height: 26px;  width: auto; }
}

/* Optionnel: sm/md (576–991) si tu veux affiner */
@media (min-width: 576px) and (max-width: 991.98px) {
  .header-logo img { height: 40px; width: auto; }
  .sticky-header-active .header-logo img { height: 34px; width: auto;  }
}

/* Swap du visuel (blanc en transparent, noir en sticky) */
#header.header-transparent .header-logo >a > img {
  content: url("https://www.ecocuisine.fr/img/logo-new-black.png");
}
.sticky-header-active #header .header-logo > a > img {
  content: url("https://www.ecocuisine.fr/img/logo-new-white.png");
}

/* Si Porto clone un logo sticky (.header-logo-sticky), couvre-le aussi */
.sticky-header-active #header .header-logo-sticky img {
  height: inherit !important;
}

/* Plein écran fiable (desktop & mobile) */
.hero-carousel,
.hero-carousel .owl-stage-outer,
.hero-carousel .owl-stage { height: 100vh; height: 100dvh; } /* dvh = mobile safe */
.hero-carousel .owl-item { min-height: 100vh; min-height: 100dvh; position: relative; }

/* Centrage vertical à coup sûr */
.hero-carousel .container,
.hero-carousel .row { height: 100%; }

.hero-carousel .owl-nav { z-index: 4; }

/* Texte lisible par défaut sur le visuel */
.hero-carousel .top-label,
.hero-carousel .main-label,
.hero-carousel .owl-item,
.hero-carousel .owl-item * { color: #fff; }

/* Slide plein écran */
.hero-slide { position: relative; min-height: 100vh; min-height: 100dvh; }
.hero-slide, .hero-slide * { color:#fff; }


/* Prix : sur sa propre ligne + ombrage léger */
.hero-price {
  display:block;
  font-size:3em;
  font-weight:900;
  line-height:1.2;
  color:var(--bs-primary, #ee7121) !important;
  text-shadow: 0 .10em .25em rgba(0,0,0,.35), 0 .03em .10em rgba(0,0,0,.22);
}


  .hero-cta > a {
  margin: 0 10px;   /* écarte chaque bouton de 10px de chaque côté */
  display: inline-block; /* sécurité si besoin */
  
}
 
/* Badge : orange plein */
.hero-badge { background: rgba(241,151,51,1); padding:12px; border-radius:0; display:inline-block; margin-bottom:40px}
.hero-badge .top-label { font-size:1.1rem; line-height:1.1; } /* base desktop */ 

/* H1 (stack) base desktop */
.hero-stack { font-size:2em; line-height:1.8; }

/* === MOBILE (<768px) ===
   - badge top:20%, centré
   - stack-wrap centré horizontalement, juste au-dessus du bouton
   - bouton bottom:20%, centré
*/
/* ===== MOBILE FIX (<768px) ===== */
@media (max-width: 767.98px) {
  :root { --mobile-bottom-offset:8%; --cta-gap:110px; }

  /* Badge en haut, centré */
  .hero-badge {
    position: absolute;
    bottom: 12%;
    left: 50%; transform: translateX(-50%);
    text-align: center;
    max-width: min(95vw, 800px);
	min-width: 250px;
  }
  /* ↓ taille badge un poil plus petite */
  .hero-badge .top-label { font-size: .95rem !important; line-height: 1.2; }

  /* Stack centré horizontalement SANS translateX, au-dessus du bouton */
  .hero-stack-wrap {
    position: absolute;
    bottom: calc(var(--mobile-bottom-offset) + var(--cta-gap));
    left: 0; right: 0;
    display: flex; justify-content: center;
    text-align: center;
    padding: 0 12px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Neutralise l’offset de l’animation qui cassait le centrage */
  .hero-stack.appear-animation { transform: none !important; }
  .hero-stack.appear-animation,
  .hero-stack.appear-animation-visible { opacity: 1 !important; }

  /* ↓ tailles stack/prix légèrement réduites */
  .hero-stack { font-size: 1.9em !important; line-height: 1.65; }
  .hero-price { font-size: 2.6em !important; line-height: 1.4; }
  
  /* Bouton centré en bas */
  .hero-cta {
    position: absolute;
    bottom: var(--mobile-bottom-offset);
    left: 0; right: 0;
    text-align: center;

  }
  
   
}

@media (min-width: 768px) {
  .hero-right {
    position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    max-width: min(46vw, 700px); z-index: 2; text-align: right;
  }
  .hero-stack-wrap { position: static; left: auto; right: auto; transform: none; }
  .hero-cta { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8%; text-align: center; z-index: 2; 	
  width: 80%; }
}


:root { --ec-primary: #f19733; }

.headline-ecocu{
  font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:600;
  line-height:.85;
  font-size:0.8em;
  letter-spacing:-.01em;
  color:#1d1f23;
  font-size:clamp(28px,4.2vw,56px);
}

.headline-ecocu .eco{ color:var(--ec-primary); }
.headline-ecocu .cuisine{ color:#1d1f23; }

/* Ligne ECOCUISINE plus “forte” + décalage horizontal contrôlé */
.headline-ecocu .brandline{
  display:inline-block;
  font-weight:700;
  font-size:1.12em;           /* un peu plus grande que le reste */
  line-height:.90;
  letter-spacing:-.005em;
  transform:translateX(-.06em); /* léger décalage vers la gauche */
  margin-top:10px
}

/* Ajuste l’offset selon la largeur d’écran si besoin */
@media (max-width: 575.98px){
  .headline-ecocu{
  font-size:1.8em;
}
.headline-ecocu .brandline{
    font-size:1.25em;
  }
}


.text-end .headline-ecocu .brandline{
  transform:none;
  margin-inline-end:.20em;  
}

/* Assure le positionnement relatif du conteneur image */
.thumb-info-wrapper { position: relative; overflow: hidden; }



/* Prix en bas à droite : blanc, sans fond, responsive */
.price-tag {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-weight: 900;
  /* taille fluide : mini 1.25rem, maxi 3rem, varie avec la largeur viewport */
  font-size: clamp(2rem, 3vw + 0.5rem, 4rem);
  line-height: 1.05;
  color: #fff;
  /* lisibilité sur image : halo doux */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 8px rgba(0,0,0,0.35);
  letter-spacing: 0.5px;
  z-index: 2;
  pointer-events: none; /* n’empêche pas le clic sur l’image/lien */
}

/* Optionnel : ajustements fins sur très petits écrans */
@media (max-width: 360px) {
  .price-tag { right: 12px; bottom: 8px; }
}

 

/* Écrans moyens (tablettes) */
@media (max-width: 768px) {
  .price-tag {
    font-size: clamp(2rem, 6vw + 0.5rem, 4rem);
  }
}

/* Écrans petits (smartphones) */
@media (max-width: 480px) {
  .price-tag {
    font-size: clamp(2.5rem, 10vw + 0.5rem, 5rem);
  }
}
.thumb-info-title.top-right { z-index: 3; }
.thumb-info-wrapper { position: relative; }

/* Position du stack : collé à gauche, à 15% du haut */
.badge-stack.top-left-15 {
  position: absolute;
  left: 0;
  top: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none; /* ne gêne pas le clic global */
  z-index: 2;
}

/* Bandeau TITLE : orange, largeur au contenu + padding 15px */
.badge-title {
  background: #f39c12;      
  color: #fff;
  display: inline-block;
  padding: 10px 15px;         /* padding horizontal demandé */
  line-height: 1.15;
  border-radius: 0;
  pointer-events: auto;      /* re-cliquable si nécessaire */
}

/* S’assure que le texte n’étire pas la largeur à 100% */
.badge-title > .text-color-light { 
  display: inline-block; 
  width: auto; 
}

/* Bandeau SUB : noir, sous le title, léger chevauchement et décalage gauche = 15px */
.badge-sub {
  background: #161616;
  color: #fff;
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.7em;       /* petit texte */
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;

  position: relative;
  margin-top: -5px;       /* chevauche vers le haut */
  margin-left: 15px;       /* démarre aligné au padding gauche du title */
  z-index: 3;              /* passe au-dessus du bandeau orange */
}

/* Responsive fin (optionnel) */
@media (max-width: 576px) {
  .badge-title .text-color-light { font-size: 1rem; } /* ≈ .text-4 mobile */
  .badge-sub { font-size: 0.7rem; }
}


/* ==================== CATALOGUE — Mise à jour badges & prix ==================== */
/* Masquer le title */
.catalogue-slide .badge-stack .badge-title{
  display: none !important;
}

/* Variables de placement (faciles à ajuster) */
.catalogue-slide{
  --pad: 16px;                 /* marge aux bords droit/bas */
  --gap: 10px;                 /* écart entre le prix et le bandeau */
  --badge-font: 0.72rem;       /* taille du texte du bandeau */
  --badge-pad-y: 6px;          /* padding vertical du bandeau */
  --badge-height: calc(var(--badge-font) * 1.1 + (var(--badge-pad-y) * 2));
}

/* Le bandeau "Pack 3 électros..." va en bas à droite */
.catalogue-slide .badge-stack{
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: var(--pad) !important;
  bottom: var(--pad) !important;
  display: block;
  text-align: right;
  z-index: 3;
  pointer-events: none; /* laisse le clic sur la carte */
}

/* Style du bandeau (on garde l’aspect "noir") */
.catalogue-slide .badge-sub{
  margin: 0;
  background: #161616;
  color: #fff;
  display: inline-block;
  padding: var(--badge-pad-y) 12px;
  font-size: var(--badge-font);
  line-height: 1.1;
  text-transform: uppercase;
  border-radius: 0;
  pointer-events: auto; /* si tu veux qu’il soit cliquable */
}

/* Remonter le prix au-dessus du bandeau, aligné à droite */
.catalogue-slide .price-tag{
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) + var(--badge-height) + var(--gap));
  z-index: 3;
  pointer-events: none;
  /* tu as déjà les styles (font-size clamp, shadow…) dans ta feuille principale */
}

/* Petits écrans : bandeau un peu plus compact et ajustement du prix */
@media (max-width: 480px){
  .catalogue-slide{
    --pad: 12px;
    --gap: 8px;
    --badge-font: 0.66rem;
    --badge-pad-y: 5px;
  }
}

/* Sécurité : s’assurer que les images restent sous les overlays */
.catalogue-slide .slide{
  z-index: 1;
}

/* Neutralise un éventuel voile/hover Porto au-dessus des overlays */
.thumb-info.thumb-info-lighten .thumb-info-wrapper::before,
.thumb-info .thumb-info-wrapper::before,
.thumb-info .thumb-info-wrapper::after{
  content: none !important;
  display: none !important;
}
.thumb-info.thumb-info-lighten .thumb-info-wrapper img,
.thumb-info .thumb-info-wrapper img{
  transform: none !important;
  transition: none !important;
}


.thumb-info-wrapper {
  aspect-ratio: 16/9;       /* force le ratio */
  overflow: hidden;           /* masque l’image qui dépasse */
  display: block;
  position: relative;
}

.thumb-info-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* remplissage façon background-size: cover */
  object-position: center;
  display: block;
}
/* Wrapper */
.hero-slide{ position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; }

/* Calque image animé — dessous */
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;                                /* en-dessous */
  background: center / cover no-repeat var(--hero-img);
  transform-origin: left top;
  transform: scale(1.05) translate(0, 0); /* état initial */
  animation: kenOutTL 10s linear forwards;  /* dézoom vers haut-gauche */
  will-change: transform;
}

/* Calque gradient — au-dessus de l'image, sous le contenu */
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;                                /* AU-DESSUS de l'image */
  pointer-events:none;
  background: var(--hero-grad, linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.22) 35%, rgba(0,0,0,.1) 70%, rgba(0,0,0,0) 100%));
}

/* Contenu (badge/stack/CTA) — tout en haut */
.hero-slide > *{ position: relative; z-index: 2; }

@keyframes kenOutTL{
  to{ transform: scale(1.00) translate(-2px, -2px); }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .hero-slide::after{ animation:none !important; transform:none !important; }
}

.hero-pricemois {
  display: inline-block;         /* s’adapte au texte */
  background: rgba(0,0,0,0.4);   /* fond noir semi-transparent */
  color: #fff;                   /* texte lisible */
  padding: 4px 8px;              /* petit espace autour */
  border-radius: 4px;            /* coins adoucis */
  line-height: 1.4;
}
/* === Slider 200px fixes (images contenues, nav & dots inclus) === */
.slider-250 {
  position: relative;
  height: 250px !important;
  overflow: hidden;
}

.slider-250 .owl-stage-outer,
.slider-250 .owl-stage,
.slider-250 .owl-item {
  height: 100% !important;
}

.slider-250 .owl-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.slider-250 .owl-item img {
  max-height: 100%;
  max-width: 100%;
  width: auto !important;   /* pas de rognage (contain) */
  height: auto !important;
  display: block;
}

/* NAVIGATION : forcer les boutons à se placer correctement */
.slider-250.owl-theme .owl-nav {
  position: absolute !important;
  top: 0 !important; left: 0; right: 0;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;        /* centre verticalement */
  justify-content: space-between !important;
  padding: 0 8px;
  margin: 0 !important;
  pointer-events: none;                  /* conteneur neutre */
  z-index: 3;
}

.slider-250.owl-theme .owl-nav button.owl-prev,
.slider-250.owl-theme .owl-nav button.owl-next {
  position: relative !important;         /* neutralise absolute du thème */
  top: 50% !important;                  /* annule top:-xxpx */
  bottom: auto !important;
  transform: none !important;            /* supprime translateY(-50%) éventuel */
  margin: 0 !important;
  pointer-events: auto;
  background-color:#f19733 !important;
}


/* Certains thèmes mettent un offset négatif ici : on le neutralise */
.slider-250.owl-theme .owl-nav [class*="owl-"] {
  top: auto !important;
}

/* ==== DOTS à l'intérieur des 250px ==== */
.slider-250.owl-theme .owl-dots {
  position: absolute !important;
  left: 0; right: 0; bottom: 6px !important;
  margin: 0 !important;
  z-index: 3;
}

/* Transition douce si Owl tente de toucher la hauteur interne */
.slider-250 .owl-height { transition: height .25s ease; }