html, body{ margin:0; padding:0; }


/* Separator wave - FULL WIDTH, clean */
.wave-sep{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  width:100%;
  line-height:0;
  z-index:2;
}

.wave-sep svg{
  display:block;
  width:100%;
  height:54px;          /* ajuste la hauteur */
}

.wave-sep-white path{
  fill:#ffffff;         /* couleur de la section suivante */
}

.wave-sep-gamme path{
  fill:#f6f7f2; /* couleur de .sec-gamme */
}

/* Vague vers PREACHAT (orange) */
.wave-sep-preachat path{
  fill:#f3c57a; /* meme couleur que .sec-preachat2 */
}


/* Vague verte (couleur de la section suivante: trace) */
.wave-sep-trace path{
  fill:#1f6b45; /* vert trace */
}


/* =========================
   Add to: assets/css/style.css
   Encoding: ISO-8859-1
   TOP 2 lines + transparent backgrounds + sticky
   ========================= */

.topbar2{
  position:sticky;
  top:0;
  z-index:1030;
}

.topbar2-line{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.topbar2-line1{
  background: rgba(255,255,255,.50);
  border-bottom:1px solid rgba(0,0,0,.10);
}

.topbar2-line2{
  background: rgba(255,255,255,.50);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.topbar2-slogan{
  font-weight: 700;
  color: rgba(0,0,0,.85);
  text-align: center;
  font-size: 1.25rem !important;
}

.brand-logo{
  height:46px;
  width:auto;
}

.btn-ro{
  background:#1f6b45;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:.55rem .9rem;
  white-space:nowrap;
}
.btn-ro:hover{ color:#fff; opacity:.95; }

/* Align CTA button with social icons (desktop) */
.btn-ro-wa{
  height:38px;                 /* same as .social-btn */
  display:inline-flex;          /* important: align icon + text */
  align-items:center;
  justify-content:center;
  padding-top:0;
  padding-bottom:0;
  line-height:38px;             /* helps visual alignment */
}



.social-btn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none;
}

/* Social colors */
.social-facebook{ background:#1877F2; }
.social-instagram{ background:#E1306C; }
.social-tiktok{ background:#111111; }


@media (max-width: 728px){
 /* Slogan line a bit smaller */
  .topbar2-slogan{
    font-size:.90rem !important;
  }
  
}



@media (max-width: 576px){
 
  /* Reduce logo a bit */
  .brand-logo{
    height:34px;
  }

  /* Reduce social buttons */
  .social-btn{
    width:32px;
    height:32px;
    border-radius:10px;
  }
  .social-btn i{
    font-size:.92rem;
  }

  /* Reduce CTA button */
  .btn-ro{
    padding:.42rem .65rem;
    border-radius:10px;
    font-size:.92rem;
  }
  
  .btn-ro-wa{
    height:32px;               /* same as .social-btn mobile */
    line-height:32px;
  }
    
  .btn-ro-wa i{
    font-size:1.0rem;
  }
  .btn-ro-wa .ml-2{
    margin-left:.35rem !important;
  }

  /* Slightly tighter vertical spacing */
  .topbar2-line1 .container,
  .topbar2-line2 .container{
    padding-left:6px;
    padding-right:6px;
  }
 
 
}

/* =========================
   Section 1 - Slider + Overlay
   Encoding: ISO-8859-1
   ========================= */

/* HERO container */
.home-hero{
  position:relative;
  width:100%;
}

/* Slider: NO CROP, height adapts to image */
.hero-carousel .carousel-item{
  height:auto;
  background:#111;
}
.hero-img{
  width:100%;
  height:auto;
  display:block;
}

/* Overlay box */
.hero-overlay-lot2{ display:none !important; }

/* 2 columns grid */
.hero-overlay-grid{
  display:flex;
  align-items:stretch;       /* IMPORTANT: same height for both cols */
}

/* LEFT column */
.hero-col-bag{
  width:100px;
  background:rgba(255,255,255,.60);
  border-right:1px solid rgba(0,0,0,.08);

  padding:12px;
  display:flex;
  align-items:stretch;       /* allow img height:100% */
  justify-content:center;
}

/* Bag takes full height of the card */
.hero-bag-side{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;        /* never cut the bag */
  display:block;
  pointer-events:none;
}

/* RIGHT column */
.hero-col-form{
  width:calc(100% - 100px);
  padding:16px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-lot-title{
  font-weight:900;
  font-size:1.25rem;
  margin-bottom:12px;
}

.hero-lot-form{
  margin:0;
}

/* Input */
.hero-overlay-lot2 .form-control{
  border-radius:12px 0 0 12px;
  height:44px;
}

/* Icon button instead of OK */
.btn-lot-icon{
  width:56px;
  height:44px;
  border-radius:0 12px 12px 0;
  background:#1f6b45;
  color:#fff;
  border:none;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.btn-lot-icon:hover{ color:#fff; opacity:.95; }

/* Small adjustments around 1024px */
@media (max-width: 1200px){
  .hero-overlay-lot2{ width:480px; }
  .hero-col-bag{ width:40%; }
  .hero-col-form{ width:60%; }
}


/* =========================
   Mobile lot bar (under slider)
   Encoding: ISO-8859-1
   ========================= */

/* Lotbar sous slider */
.hero-lotbar{
  background:rgba(255,255,255,.95);
  border-top:1px solid rgba(0,0,0,.10);
  border-bottom:1px solid rgba(0,0,0,.10);
}

.hero-lotbar .container{
  padding-top:10px;
  padding-bottom:10px;
}

.hero-lotbar-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.hero-lotbar-bag{
  width:54px;
  flex:0 0 54px;
}
.hero-lotbar-bag img{
  width:100%;
  height:auto;
  display:block;
}

.hero-lotbar-text{
  flex:0 0 auto;
  min-width:140px;
  line-height:1.05;
}
.hero-lotbar-title{
  font-weight:900;
  font-size:1.00rem;
}

.hero-lotbar-form{
  flex:1 1 auto;
}

/* IMPORTANT: meme hauteur input + bouton */
.hero-lotbar .form-control{
  height:38px;
  border-radius:10px 0 0 10px;
}

.btn-lot-icon-sm{
  width:46px;
  height:38px;
  line-height:38px;
  border-radius:0 10px 10px 0;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}


/* Match input height */
.hero-lotbar .form-control{
  height:36px;
  border-radius:10px 0 0 10px;
}


@media (max-width: 575.98px){
  .hero-lotbar-text{ min-width:110px; }
  .hero-lotbar-title{ font-size:.95rem; }
  .hero-lotbar .form-control{ height:36px; }
  .btn-lot-icon-sm{ height:36px; line-height:36px; width:44px; }
}


/* =========================
   Section 2
   Encoding: ISO-8859-1
   ========================= */


.sec{
  position:relative;
  padding:30px 0 54px 0;  /* reserve wave height */
  overflow:hidden;
  background:#ffffff;
}

.sec-head .sec-title{
  font-weight:900;
  font-size:1.45rem;
}
.sec-head .sec-sub{
  opacity:.75;
  font-weight:800;
}

.card-s2{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}

.card-s2-main{
  background: linear-gradient(135deg, rgba(31,107,69,.07), rgba(212,161,30,.08));
}

.s2-badge{
  display:inline-block;
  font-weight:900;
  font-size:.85rem;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(31,107,69,.12);
  color:#1f6b45;
}

.s2-title{
  font-weight:900;
  margin-top:10px;
  margin-bottom:0;
}

.s2-point,
.s2-check{
  opacity:.9;
}

.s2-h3{
  font-size: 1.25rem;
  font-weight:700;
  margin-bottom:0;
}

.s2-steps{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.s2-step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px dashed rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
}

.s2-step-n{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1f6b45;
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
}

.s2-step-ph{
  margin-left:auto;
  opacity:.7;
  font-weight:800;
}


/* Pourquoi: bloc histoire avec photo */
.s2-story-media{
  width:100%;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  overflow:hidden;
}

.s2-story-img{
   width:100%;
  height:190px;          /* web */
  object-fit:cover;
  display:block;
}

.s2-badge-alt{
  position:absolute;
  z-index:10;
 font-weight:600;
   background:rgba(212,161,30,.84);
  color:white;
  top: 140px;
  right: 30px;
  
}



.s2-story-foot{
  font-weight:600;
  opacity:.9;
  display:flex;
  align-items:center;
}

/* Mobile: image un peu moins haute */
@media (max-width: 575.98px){
  .s2-story-img{ height:150px; }
}


/* =========================
   Section Gamme
   ========================= */

.sec-gamme{
  position:relative;
  padding:34px 0 54px 0;
  background:#f6f7f2;
  overflow:hidden;
}

/* Filigrane (optionnel) */
.sec-gamme:before{
  content:"";
  position:absolute;
  inset:0;
  /*background-image:url("../../assets/img/slider_3.jpeg"); 
  background-size:cover;
  background-position:center center;*/
  opacity:.06;
  pointer-events:none;
}


/* Header */
.sec-head{
  position:relative;
  z-index:1;
  margin-bottom:16px;
}
.sec-title{
  font-weight:900;
  font-size:2rem !important;
}
.sec-sub{
  opacity:.75;
  font-weight:800;
}

/* Cards */
.gamme-card{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  overflow:hidden;
}
.gamme-card-body{
  padding:16px;
}

/* Bloc A (pub) */
.gamme-card-pub .gamme-card-body{
  padding:0;
}
.gamme-pub-img{
  width:100%;
  height:auto;
  display:block;
}

/* Badge + meta */
.gamme-badge{
  font-weight:700;
  font-size:1.2rem !important;
  margin-bottom:10px;
}
.gamme-meta{
}
.gamme-meta-line{
  margin-bottom:4px;
}
.gamme-meta .k{ opacity:.75; }
.gamme-meta .v{ opacity:1; }

/* Bag image */
.gamme-img-wrap{
  text-align:center;
  padding-top:10px;
}
.gamme-bag{
  width:100%;
  max-width:250px;
  height:auto;
  display:inline-block;
}

/* Intermediate resolutions: when stacked, keep cards centered */
@media (max-width: 991.98px){
  .sec-gamme-row > div{
    display:flex;
  }
  .sec-gamme-row > div > .gamme-card{
    width:100%;
  }
}

/* Mobile: full width, tighter spacing */
@media (max-width: 575.98px){
  .sec-gamme{
    padding:26px 0 46px 0;
  }
  .gamme-card-body{
    padding:14px;
  }
  .gamme-bag{
    max-width:260px;
  }
}



/* =========================
   PREACHAT - style "pub"
   ========================= */

/* PREACHAT (fond orange) */

/* Texture jute (filigrane) */
/* PREACHAT : fond orange + texture jute progressive (pas de choc en haut) */
.sec-preachat2{
  background:#f3c57a;
  position:relative;
  overflow:hidden;
}

/* Fallback top fade (orange) pour adoucir l entree de section */
.sec-preachat2 .pre-top-fade{
  position:absolute;
  left:0; right:0; top:0;
  height:120px; /* 80-160 */
  background: linear-gradient(to bottom,
    rgba(243,197,122,1) 0%,
    rgba(243,197,122,1) 35%,
    rgba(243,197,122,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

/* Texture jute */
.sec-preachat2:before{
  content:'';
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background-image:url('../../assets/img/bg_jute.png');
  background-size:cover;
  background-position:center;
  opacity:.14;                 /* intensite texture */
  pointer-events:none;
  z-index:0;

  /* IMPORTANT: la texture "apparait" en descendant */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,.65) 40%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,.65) 40%,
    rgba(0,0,0,1) 100%
  );
}

/* Contenu au-dessus */
.sec-preachat2 .container{
  position:relative;
  z-index:1;
}


.pre2-panel{
  background: linear-gradient(135deg, rgba(239,176,75,.16), rgba(208,138,28,.10));
  border:1px solid rgba(208,138,28,.28);
  border-radius:18px;
  padding:14px;
}

/* Bandeau titre orange */
.pre2-title{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.86);
  font-weight:700;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  letter-spacing:0;
}

/* Liste cartes */
.pre2-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pre2-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#ffffff;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.pre2-item-strong{
  /*border-color: rgba(208,138,28,.35);*/
  /*background: linear-gradient(135deg, rgba(239,176,75,.12), rgba(31,107,69,.05));*/
}

.pre2-ico{
  width:46px;
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-size:20px;
  flex:0 0 auto;
}

.pre2-ico-a{ background:#1f6b45; }
.pre2-ico-b{ background:#2f7dd1; }
.pre2-ico-c{ background:#d08a1c; }
.pre2-ico-d{ background:#6c757d; }

.pre2-t{
  font-weight:600;
  text-transform:uppercase;
  font-size:.98rem;
}

.pre2-s{
  color:var(--dark);
  line-height:1.25;
}

/* Colonne sac */
.pre2-hero{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(31,107,69,.08), rgba(239,176,75,.10));
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden;
}

.pre2-bag{
  max-width:380px;
  max-height:380px;
  width:auto;
  height:auto;
  display:block;
}

/* CTA */
.pre2-cta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.pre2-cta-sub{
  font-weight:900;
  opacity:.75;
}

/* Bandeau bas vert : texte + bouton */
.pre2-bottom{
  background:#1f6b45; /* meme vert, reutilisable pour sec-trace */
  color:#ffffff;
  margin-top:10px;
  padding:14px 0;
}

.pre2-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.pre2-bottom-txt{
  font-weight:700;
  font-size:1.08rem;
  margin:0;
}

@media (max-width: 575.98px){
  .pre2-bottom-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* Mobile */
@media (max-width: 575.98px){
  .pre2-title{ font-size:1.05rem; padding:12px 12px; }
  .pre2-ico{ width:40px; height:40px; font-size:18px; }
  .pre2-bag{ max-height:320px; }
  .pre2-bottom-txt{ font-size:1.02rem; text-align:center; }
}


/* Petit caddie (SVG inline) en bas a droite du hero */
.pre2-cart{
  position:absolute;
  right:10px;
  bottom:10px;
  width:86px;
  height:auto;
  opacity:.95;
  pointer-events:none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

@media (max-width: 575.98px){
  .pre2-cart{ width:74px; }
}


/* =========================
   TRACE (fond vert)
   Encoding: ISO-8859-1
   ========================= */


/* Header TRACE (blanc, comme les autres) */
.sec-head-trace .sec-title{
  color:#ffffff;
}
.sec-head-trace .sec-sub{
  color:rgba(255,255,255,.85);
}

/* Mise en ligne titre/sous-titre + logo a droite */
.sec-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.sec-head-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex:0 0 auto;
}

.sec-head-logo img{
  display:block;
  height:70px;   /* ajuste */
  width:auto;
}

@media (max-width: 575.98px){
  .sec-head-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .sec-head-logo img{
    height:34px;
  }
}




.sec-trace{
  background:#1f6b45;
  color:#ffffff;
}

.sec-head-light .sec-title{
  color:#ffffff;
}
.sec-head-light .sec-sub{
  color:rgba(255,255,255,.78);
}

/* Cards */
.trace-card{
  position:relative;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:14px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.trace-n{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(239,176,75,.95);
  color:#1f6b45;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

.trace-ph{
  height:120px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:rgba(255,255,255,.75);
  margin-bottom:10px;
}

.trace-t{
  font-weight:900;
  font-size:1.05rem;
}

.trace-s{
  opacity:.82;
   margin-top:4px;
  line-height:1.35;
}

/* Mobile */
@media (max-width: 575.98px){
  .trace-ph{ height:100px; }
}



/* Slogan dans TRACE (fond vert, texte blanc, bordures jaunes) */
.trace-slogan{
  margin-top:12px;
  padding:14px 12px 28px 12px;
  text-align:center;

  color:#ffffff;
  font-weight:900;

  border-top:10px solid #efb04b;
  border-bottom:10px solid #efb04b;

  background:rgba(0,0,0,.06);
}

@media (max-width: 575.98px){
  .trace-slogan{
    padding:12px 10px;
    font-weight:800;
  }
}




/* =========================
   TEMOIGNAGES
   Encoding: ISO-8859-1
   ========================= */

.sec-temoignages{
  background:#ffffff;
}

.tem-card{
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  background:#ffffff;
  padding:14px;
}

.tem-top{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.tem-photo{
  width:54px;
  height:54px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,.10);
}

.tem-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tem-name{
  font-weight:900;
}

.tem-role{
  opacity:.75;
  font-weight:700;
  font-size:.92rem;
}

.tem-text{
  opacity:.85;
  font-weight:700;
  line-height:1.45;
}

/* Controls a peine visibles */
.tem-ctrl{
  width:46px;
}

/* Indicators */
.tem-ind li{
  background-color:rgba(0,0,0,.25);
}
.tem-ind .active{
  background-color:rgba(31,107,69,.9);
}

/* Mobile: 1 card visible (already via d-none d-lg-block) */
@media (max-width: 575.98px){
  .tem-card{ padding:12px; }
  .tem-photo{ width:48px; height:48px; border-radius:12px; }
}


/* =========================
   FOOTER
   Encoding: ISO-8859-1
   ========================= */

.site-footer{
  background:#0f3f2a;
  color:#ffffff;
  padding:34px 0 18px 0;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
}

.footer-title{
  font-weight:900;
  font-size:1.25rem;
}

.footer-sub{
  margin-top:4px;
}

.footer-social{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}

.footer-social-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#ffffff;
  text-decoration:none;
}

.footer-social-item i{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.10);
}

/* Couleurs reseaux (icone) */
.footer-social-item.fb i{ background:rgba(24,119,242,.22); }
.footer-social-item.ig i{ background:rgba(225,48,108,.22); }
.footer-social-item.tt i{ background:rgba(255,255,255,.10); }
.footer-social-item.wa i{ background:rgba(37,211,102,.22); }

.footer-right{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

.footer-ag{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-decoration:none;
  color:#ffffff;
}

.footer-ag img{
  display:block;
  height:46px;
  width:auto;
}

.footer-ag-txt{
  font-size:.95rem;
}

.footer-bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer-copy{
  opacity:.75;
  font-size:.92rem;
}

/* Responsive */
@media (max-width: 575.98px){
  .footer-top{
    flex-direction:column;
  }
  .footer-right{
    justify-content:flex-start;
  }
  .footer-ag{
    align-items:flex-start;
  }
  .footer-ag img{
    height:40px;
  }
}