body {background: rgb(224 242 253) }

/* Taille carrousel homepage */
#carousel-accueil .stdjs-slider-item-container { min-height: 350px }
#carousel-accueil .tns-inner { padding:0;  }
#carousel-accueil .bg-size-cover { background-size:contain; }
#carousel-accueil { margin-bottom:0!important; }

/* accueil */
.section-hp-produits  { padding: 2rem 0;  }
.section-hp-produits .h3  { color:#000c6c; }
.section-hp-produits-1  { background: #e7f4fe; }

/* Page Gourmet */
#page-gourmet {background:rgb(224 242 253);}
#page-gourmet .page-title-overlap { padding-bottom: 1rem; }
#page-gourmet .page-title-overlap+* { margin-top: 0rem; }
#page-gourmet .header-gourmet { background: #E0F2FD; color:black; padding:1rem 0 2.5rem 0; font-size:.9rem;}
#page-gourmet .header-gourmet-2 { background:#183e88; text-align:center; color:white; padding:1rem 0; font-size:.9rem; margin-bottom:2rem;}
#page-gourmet .header-gourmet-2 a { color:white; text-decoration:underline;  }

/* reassurance accueil */
.wrapper-avantages {background:white; padding:40px 0; }
.bandeau-avantages { display: flex; justify-content: space-between; align-items: center; background-color: #eef3fb; border-radius: 12px; padding: 20px 20px; gap: 20px; }
.avantage { display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 15px; border-right: 1px solid #cfd8e8; }
.avantage:last-child { border-right: none; }
.avantage-icone { width: 100px; height: 100px; flex-shrink: 0; }
.avantage-texte { display: flex; flex-direction: column; }
.avantage-titre { font-weight: 700; color:#1a2b6d; font-size: 14px; margin: 0 0 4px 0; }
.avantage-description { font-size: 12px; color: #4a5568; margin: 0; line-height: 1.4; }

@media (max-width: 991px) {
    .avantage-icone { width: 50px; height: 50px;  }
}
@media (max-width: 767px) {
    .bandeau-avantages { flex-direction:column;  }
    .avantage {border-right:0px solid white;}
}

/* accueil : comment ça marche */
.wrapper-commentcamarche { background:white; padding:20px; }
.etapes { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 30px; }
.etape { position: relative; flex: 1; }
.etape-numero { position: absolute; top: -12px; left: 15px; width: 36px; height: 36px; background-color: #05328d; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; z-index: 2; }
.etape-carte { display: flex; align-items: center; gap: 15px; background-color: #eef3fb; border-radius: 12px; padding: 25px 20px 20px 20px; height: 100%; }
.etape-icone { width: 55px; height: 55px; flex-shrink: 0; }
.etape-texte { display: flex; flex-direction: column; }
.etape-titre { font-weight: 700; color: #1a2b6d; font-size: 14px; margin: 0 0 6px 0; }
.etape-description { font-size: 12px; color: #4a5568; margin: 0; line-height: 1.4; }
.etape-fleche { font-size: 22px; color: #1a2b6d; flex-shrink: 0; }
@media (max-width: 768px) { .etapes { flex-direction: column; align-items: stretch; } .etape-fleche { transform: rotate(90deg); align-self: center; } }

.titre-commentcamarche { text-align: center; color: #1a2b6d; font-size: 28px; font-weight: 800; margin-bottom: 12px; position: relative; padding-bottom: 20px; background: radial-gradient(circle, #b8c4de 3px, transparent 3px) center bottom / 6px 6px no-repeat; }
.titre-commentcamarche::before { content: ""; position: absolute; bottom: 0; left: calc(50% - 70px); width: 40px; height: 4px; background-color: #1a2b6d; border-radius: 2px; }
.titre-commentcamarche::after { content: ""; position: absolute; bottom: 0; left: calc(50% + 30px); width: 40px; height: 4px; background-color: #f8e91b; border-radius: 2px; }

/* accueil : cards */
.card-deck .card-img-top {height:unset!important; }

/* Menu principal */
@media (min-width: 992px) {
    header .navbar-expand-lg .dropdown:hover.serdis2.cms-menu-petit>.cms-menu-niv2-container, .navbar-nav .serdis2.cms-menu-petit .dropdown-menu.show {
        top: 100% !important;
    }
    header .navbar-expand-lg .navbar-nav .nav-link {
        padding-top: 0.75rem; 
        padding-bottom: .65rem;
        padding-right:.75rem;
        padding-left:.75rem;
    }
    header .menu-dluo > a span, 
    header .menu-nouveautes > a span, 
    header .menu-gourmet > a span, 
    header .menu-promotions  > a span,
    header .menu-livraison  > a span{ 
        position:relative!important; margin-left:35px; }
    header .menu-dluo > a , 
    header .menu-nouveautes > a , 
    header .menu-gourmet > a, 
    header .menu-promotions  > a ,
    header .menu-rayons > a,
    header .menu-livraison > a
    { 
        border:2px solid #E6EBF2; margin-left:5px; margin-right:5px; border-radius: 8px;
    }
    
    
    header .menu-dluo > a:hover, 
    header .menu-nouveautes > a:hover, 
    header .menu-gourmet > a:hover, 
    header .menu-promotions  > a:hover,
    header .menu-livraison  > a:hover{ 
        background:#f6faff; }
    
    header .menu-promotions > a span:before {content:"";    background:url("PartageWeb/images/svgexport-2.png") no-repeat; 
        background-size: 25px 25px;  width:30px; height:30px; position:absolute; top:-3px; left:-30px; }
        
    header .menu-dluo > a span:before {content:"";    background:url("PartageWeb/images/svgexport-4.png") no-repeat; 
        background-size: 25px 25px;  width:30px; height:30px; position:absolute; top:-3px; left:-30px; }
    
    header .menu-nouveautes > a span:before {content:"";    background:url("PartageWeb/images/svgexport-3.png") no-repeat; 
        background-size: 25px 25px;  width:30px; height:30px; position:absolute; top:-3px; left:-30px; }
        
    header .menu-gourmet > a span:before {content:"";    background:url("PartageWeb/images/toque.png") no-repeat; 
        background-size: 25px 25px;  width:30px; height:30px; position:absolute; top:-3px; left:-30px; }
    
    header .menu-livraison > a span:before {content:"";    background:url("PartageWeb/images/camion.png") no-repeat; 
        background-size: 25px 25px;  width:30px; height:30px; position:absolute; top:-3px; left:-30px; }
    
    header .nav-item > a span { color:#012f91; }
    header .menu-rayons > a { background: #012f91; color: white !important; border-color: #012f91; }
    header .menu-rayons > a span { color:white; }
}

/*page large*/
#page-large .container .justify-content-center section.col-lg-9 { width:100%!important; flex-basis: 100%;max-width: none;}

/* masquer image df panier et récap */
.cms-complistligneclispe .ligneDF img { display:none; }

/* page clients compteurs bulle */
.bubble-icon { background-color: #2b2d3d; transition: background-color 0.6s ease; }
.bubble-icon:hover { background-color: transparent;  }
.bubble-icon i {color: #ffffff;   transition: color 0.6s ease;  }
.bubble-icon:hover i {    color: #2b2d3d;  }
/* Responsive : 4 colonnes -> 2 colonnes -> 1 colonne */
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

:root{
    --timeline-blue-dark:#0a3d8f;
    --timeline-blue-line:#7fb3e0;
    --timeline-bg:#eaf3fb;
    --timeline-text-dark:#0a3d8f;
  }
  *{box-sizing:border-box;}
  
  
/* Timeline */
  /* wrapper contains the two independent columns + the central line */
  .timeline{
    padding:40px 20px;
    font-family:'Segoe UI', Arial, sans-serif;
  
    position:relative;
    max-width:680px;
    margin:0 auto;
    display:flex;
	column-gap:56px;
  }

  /* central vertical line, full height of the wrapper */
  .timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:10px;
    bottom:10px;
    width:2px;
    background:var(--timeline-blue-line);
    transform:translateX(-50%);
    z-index:0;
  }

  .timeline .col-tml{
    position:relative;
    width:46%;
    display:flex;
    flex-direction:column;
    gap:34px;         /* independent spacing per column -> staggered effect */
  }
  .timeline .col-left{ margin-top:0; }
  .timeline .col-right{ margin-top:70px; }   /* offset so right column starts lower, like the reference image */

  /* card */
  .timeline .card{
    position:relative;
    padding:16px 18px;
    border-radius:6px;
  }
  .timeline .col-left .card{
    background:var(--timeline-blue-dark);
    color:#fff;
  }
  .timeline .col-right .card{
    background:#fff;
    color:var(--timeline-text-dark);
    border:1px solid #dbe7f3;
  }
  .timeline .card h3{
    margin:0 0 4px 0;
    font-size:26px;
    font-weight:700;
  }
  .timeline .card p{
    margin:0;
    font-size:13px;
    line-height:1.35;
  }

  /* connector: from the card's own vertical center out to the central line */
  .timeline .connector{
    position:absolute;
    top:50%;
    height:2px;
    width:28px;
    background:var(--timeline-blue-line);
    z-index:0;
  }
  .timeline .col-left .connector{ right:-28px; }
  .timeline .col-right .connector{ left:-28px; }

  /* dot sits at the point where connector meets the central line */
  .timeline .dot{
    position:absolute;
    top:51%;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--timeline-blue-dark);
    transform:translateY(-50%);
    z-index:2;
  }
  .timeline .col-left .dot{ right:-32px; }
  .timeline .col-right .dot{ left:-32px; }

  .timeline .col-left h3 { color:white; }
  /* icon circle attached to card */
  .timeline .icon-circle{
    position:absolute;
    top:-16px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid var(--timeline-blue-dark);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:var(--timeline-blue-dark);
    z-index:3;
  }
  .timeline .col-left .icon-circle{ right:-16px; }
  .timeline .col-right .icon-circle{ left:-16px; }