/* ==========================================================
   Artisans Partisans – style.css (complet)
   - Responsive global
   - Menu + Mega menu en overlay (absolute)
   - Sections / Hero / Cards / Assistant / Footer
   ========================================================== */

/* ====== Variables ====== */
:root{
  --green:#153425;
  --green2:#0f2b1f;
  --olive:#b7b27b;
  --text:#232323;
  --muted:#6c6c6c;
  --card:#eef0ec;
  --promo:#efe9d3;

  --container:1140px;
  --pad:16px;

  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.10);

  --t: .25s ease;
}

/* ====== Reset / base ====== */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"Jost",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

.container{ padding-left:var(--pad); padding-right:var(--pad); }

/* Sections : base + responsive */
section{
  padding:72px 0;
}
@media (max-width: 992px){
  section{ padding:54px 0; }
}
@media (max-width: 576px){
  section{ padding:44px 0; }
}

/* Petit util : éviter les outlines moches au clic souris */
:focus{ outline:none; }
:focus-visible{ outline:2px solid rgba(183,178,123,.55); outline-offset:2px; }

/* ==========================================================
   HEADER
   ========================================================== */
.ap-top{
  padding:22px 0 18px;
  background:#fff;
}

.ap-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.ap-brand img{
  height:35px;
  width:auto;
  filter: invert(1);
}

.ap-search{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ap-search .field{
  position:relative;
  width:420px;
  max-width:100%;
}
.ap-search input{
  width:100%;
  height:34px;
  border:0;
  border-bottom:1px solid rgba(0,0,0,.5);
  padding:0;
  font-size:16px;
  outline:none;
  background:transparent;
}
.ap-search input::placeholder{ color: var(--olive); }

.ap-search .icon{
  position:absolute;
  right:0px;
  top:50%;
  transform:translateY(-50%);
  width:20px; height:20px;
  opacity:.55;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}

.ap-icons{
  display:flex;
  gap:22px;
  justify-content:flex-end;
  align-items:center;
  font-size:13px;
  color:var(--text);
  white-space:nowrap;
}
.ap-icons .it{
  display:flex;
  gap:6px;
  align-items:center;
  text-decoration:none;
  color: inherit;
}
.ap-icons .it:hover{ color: var(--olive); }
.ap-icons img{ width:22px; height:22px; }

.ap-lang{
  display:flex;
  gap:10px;
  align-items:center;
}
.ap-lang a{
  text-decoration:none;
  color:inherit;
}
.ap-lang a.active{ font-weight:500; color:var(--olive); }
.ap-lang a:hover{ color:var(--olive); }

/* Header responsive */
@media (max-width: 992px){
  .ap-top{ padding:18px 0 12px; }
  .ap-icons{ gap:14px; font-size:12px; }
  .ap-icons .it span{ display:none; } /* garde les icônes propres en mobile */
}



/* ==========================================================
   MOBILE BURGER + FULLSCREEN MENU
   - actif < 900px
   ========================================================== */
.ap-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.ap-burger svg{ width:24px; height:24px; }

.ap-mobile-menu{
  position:fixed;
  inset:0;
  z-index:2000;
  background:var(--green2);
  color:#fff;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-12px);

  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.ap-mobile-menu.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

/* ==========================================================
   CART POPUP (top-right)
   ========================================================== */
.ap-cart{
  position:fixed;
  top:0;
  right:0;
  width:420px;
  max-width:calc(100vw - 16px);
  height:100vh;
  background:#fff;
  box-shadow:var(--shadow);
  z-index:2100;
  transform:translateX(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.ap-cart.open{
  opacity:1;
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.ap-cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 22px 18px;
  border-bottom:1px solid #ececec;
}
.ap-cart-title{
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green2);
}
.ap-cart-close{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:var(--green2);
  font-size:44px;
  line-height:1;
  cursor:pointer;
}

.ap-cart-body{
  height:calc(100vh - 86px);
  overflow:auto;
  padding:18px 22px 24px;
}

.ap-cart-empty{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:18px 0 4px;
}
.ap-cart-empty p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.ap-cart-empty b{ color:var(--text); }
.ap-cart-empty .ico{
  width:104px;
  height:83px;
}

.ap-cart-items{ margin-top:10px; }
.ap-cart-item{
  display:grid;
  grid-template-columns:70px 1fr 26px;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid #ececec;
}
.ap-cart-item:last-child{ border-bottom:0; }
.ap-cart-item .img{
  width:50px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ap-cart-item .img img{ width:100%; height:100%; object-fit:cover; }
.ap-cart-item .meta{ min-width:0; }
.ap-cart-item .brand{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.ap-cart-item .name{
  font-family:"Anton",serif;
  font-size:30px;
  line-height:1.05;
  margin:2px 0 10px;
  color:var(--olive);
}
.ap-cart-item .name:after {
    display: block;
    height: 1px;
    margin-top: 15px;
    width: 2.5rem;
    background-color: var(--olive);
    content: '';
}
.ap-cart-item .price{
  font-weight:600;
  color:var(--green2);
  margin-bottom:10px;
}

.ap-cart-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid #dedede;
  overflow:hidden;
}
.ap-cart-qty button{
  width:44px;
  height:38px;
  border:0;
  background:#fff;
  cursor:pointer;
}
.ap-cart-qty input{
  width:34px;
  height:38px;
  border:0;
  text-align:center;
  font-weight:600;
}

.ap-cart-remove{
  border:0;
  background:transparent;
  color:rgba(0,0,0,.35);
  font-size:40px;
  line-height:1;
  align-self: start;
  cursor:pointer;
}
.ap-cart-remove:hover{ color:rgba(0,0,0,.2); }

.ap-cart-foot{
  margin-top:18px;
  border-top:1px solid #ececec;
  padding-top:18px;
}
.ap-cart-coupon{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.ap-cart-coupon input{
  flex:1;
  height:32px;
  border:1px solid #dedede;
  border-radius:999px;
  padding:0 16px;
}
.ap-cart-coupon button{
  height:32px;
  padding:0 18px;
  border:1px solid var(--olive);
  background:#fff;
  border-radius:999px;
  cursor:pointer;
}
.ap-cart-cta {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding: 0 32px;
    border: 1px solid var(--olive);
    background: #fff;
    border-radius: 999px;
    text-decoration:none;
    margin-top: 10px;
    cursor: pointer;
}
.ap-cart-totals{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  margin:10px 0 14px;
}
.ap-cart-totals .row {
  display: block;              /* comme dans un design simple */
}

.ap-cart-totals .row span {
  display: inline;             /* surtout PAS block */
  white-space: nowrap;        /* empêche le prix de passer à la ligne */
}

.ap-cart-totals .row.grand {
  font-size: 1.2rem;           /* Total TTC plus gros */
  font-weight: 600;
  color: var(--green2);
}
.ap-cart-checkout{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  border:1px solid var(--olive);
  border-radius:999px;
  text-decoration:none;
  color:var(--green2);
  font-weight:500;
}
.ap-cart-checkout:hover{ background:rgba(183,178,123,.12); }

@media (max-width: 520px){
  .ap-cart{ width:100vw; max-width:100vw; }
}

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

.ap-mobile-title{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--olive);
}

.ap-mobile-close{
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}

.ap-mobile-content{
  height:calc(100vh - 77px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px var(--pad) 28px;
}

/* sections accordéon */
.ap-mm-section{
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ap-mm-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 0;
  background:transparent;
  border:0;
  color:#fff;
  text-align:left;
  cursor:pointer;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ap-mm-toggle .chev{
  width:18px;
  height:18px;
  opacity:.85;
  transition: transform .2s ease;
}
.ap-mm-section.open .ap-mm-toggle .chev{ transform:rotate(180deg); }

.ap-mm-panel{
  display:none;
  padding:0 0 18px;
}
.ap-mm-section.open .ap-mm-panel{ display:block; }

.ap-mm-panel a{
  display:block;
  padding:10px 0;
  font-size:18px;
  line-height:1.35;
  text-decoration:none;
  color:#fff;
}
.ap-mm-panel a:hover{ color:var(--olive); }

.ap-mm-panel .cols{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

/* empêche le scroll du body quand menu ouvert */
body.ap-menu-open{ overflow:hidden; }

@media (max-width: 900px){
  .ap-burger{ display:inline-flex; }
  .ap-nav{ display:none; } /* on passe par le fullscreen menu */
}

/* ==========================================================
   NAV + MEGA MENU (overlay)
   ========================================================== */
.ap-nav{
  background:var(--green2);
  color:#fff;
  position:relative;
  z-index:50; /* au-dessus du contenu */
}

/* Menu horizontal */
.ap-nav .menu{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0;
  overflow:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.ap-nav .menu::-webkit-scrollbar{ display:none; }

.ap-nav .menu a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:16px 14px;
  position:relative;
  transition: color var(--t);
}
.ap-nav .menu a:hover{ color:var(--olive); }

/* état ouvert (JS ajoute .is-open) */
.ap-nav .menu a.is-open{
  color:var(--olive);
}

/* "Nos autres sites" */
.autres-sites{
  color:var(--olive) !important;
  display:flex;
  align-items:center;
  gap:8px;
}
.autres-sites svg{ width:22px; height:22px; }

/* ====== MEGA MENU overlay ======
   - ne pousse pas le contenu
   - transition opacity + translate
*/
.ap-mega{
  background:var(--green2);
  color:#fff;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:999;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;
}

.ap-mega.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s;
}

/* Empêche la zone mega de “coller” au bord */
.ap-mega .container{ padding-left:var(--pad); padding-right:var(--pad); }

/* Liens mega */
.ap-mega a{
  text-transform:none;
  padding:0;
}

/* Inner */
.ap-mega-inner{
  position:relative;
  padding:110px 0 80px;
}

/* Filigrane */
.ap-mega-inner::before{
  content: attr(data-title);
  position:absolute;
  left:0;
  top:28px;
  font-family:"Jost";
  font-size:70px;
  font-weight:100;
  letter-spacing:.08em;
  color:var(--olive);
  opacity:.38;
  white-space:nowrap;
  pointer-events:none;
}

/* Colonnes */
.ap-mega-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:120px;
  position:relative;
}

.ap-mega-col{
  list-style:none;
  padding:0;
  margin:0;
}
.ap-mega-col li a{
  display:block;
  color:#fff;
  font-size:22px;
  line-height:1.9;
  text-decoration:none;
  transition: color var(--t);
}
.ap-mega-col li a:hover{
  color:var(--olive);
}

/* Mega responsive */
@media (max-width: 992px){
  .ap-nav .menu a{
    font-size:13px;
    padding:14px 12px;
    letter-spacing:.12em;
  }
  .ap-mega-inner{
    padding:90px 0 54px;
  }
  .ap-mega-inner::before{
    font-size:54px;
    top:12px;
  }
  .ap-mega-cols{
    grid-template-columns:1fr;
    gap:26px;
  }
  .ap-mega-col li a{
    font-size:18px;
    line-height:1.75;
  }
}
@media (max-width: 576px){
  .ap-mega-inner::before{
    font-size:42px;
  }
}

/* ==========================================================
   HERO / SLIDER
   ========================================================== */
.hero{
  position:relative;
  height:550px;
  overflow:hidden;
  padding:0;
}

.hero .slide{
  position:absolute;
  inset:0;
  display:none;
}
.hero .slide.active{ display:block; }

.hero .bg{
  position:absolute;
  inset:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left top;
}

.hero .wrap{
  position:relative;
  height:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.hero .content{
  position:absolute;
  left:0;
  top:92px;
  width:100%;
  max-width:560px;
}

.hero .kicker{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:6px;
}

.hero .title{
  font-family:"Anton",sans-serif;
  font-size:56px;
  line-height:1;
  color:var(--olive);
  margin:0 0 8px;
}

.hero .quote{
  font-family:"Playfair Display",serif;
  font-size:26px;
  font-weight:500;
  color:var(--text);
  margin:16px 0 8px;
  text-align:left;
  padding-left:36px;
  position:relative;
}
.hero .quote span{
  color:var(--olive);
  font-family:"Playfair Display",serif;
  font-size:70px;
  font-weight:500;
  position:absolute;
  left:-7px;
  top:-11px;
  font-style:normal;
  line-height:1;
}

.hero .desc{
  font-size:18px;
  color:var(--text);
  margin:0 0 12px;
  position:relative;
}
.hero .desc:after{
  display:block;
  height:1px;
  margin-top:15px;
  width:2.5rem;
  background-color:var(--olive);
  content:'';
}

.hero .price{
  font-size:18px;
  font-weight:700;
  margin:20px 0 30px;
}

/* Bouton global */
.ap-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 18px;
  border:1px solid var(--olive);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2a2a2a;
  text-decoration:none;
  background:transparent;
  transition: background var(--t), color var(--t), transform var(--t);
}
.ap-btn:hover{
  background:var(--olive);
  color:#1c1c1c;
}

/* Bouteille */
.hero .bottle{
  position:absolute;
  right:210px;
  top:36px;
  width:170px;
  height:460px;
  pointer-events:none;
}
.hero .bottle .shadow2{
  position:absolute;
  left:34px;
  bottom:0px;
  width:116px;
}
.hero .bottle .img{
  position:absolute;
  left:38px;
  bottom:12px;
  width:120px;
  z-index:3;
}
.hero .bottle .degrade{
  position:absolute;
  left:-100px;
  bottom:-34px;
  width:400px;
  z-index:2;
}

/* Dots */
.hero .dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:10;
}
.hero .dot{
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  padding:4px 6px;
}
.hero .dot.active{ color:var(--olive); }

/* Hero responsive */
@media (max-width: 1200px){
  .hero .bottle{ right:80px; }
}
@media (max-width: 992px){
  .hero{
    height:auto;
    padding:18px 0 44px;
  }
  .hero .slide{
    position:relative;
    min-height:560px;
  }
  .hero .wrap{
    height:auto;
    min-height:560px;
  }
  .hero .content{
    position:relative;
    left:auto;
    top:auto;
    margin:28px auto 0;
    text-align:center;
  }
  .hero .quote{
    text-align:center;
    padding-left:0;
  }
  .hero .quote span{
    position:relative;
    left:auto;
    top:auto;
    margin-right:6px;
  }
  .hero .desc:after{ margin-left:auto; margin-right:auto; }
  .hero .bottle{
    position:relative;
    right:auto;
    top:auto;
    margin:14px auto 0;
  }
  .hero .bg{
    background-position:center top;
  }
}
@media (max-width: 576px){
  .hero .title{ font-size:44px; }
  .hero .quote{ font-size:22px; }
  .hero .bottle{ transform:scale(.92); }
}

/* ==========================================================
   Section title
   ========================================================== */
.ap-section-title{
  text-align:center;
  margin:18px 0 35px;
  font-size:30px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--olive);
}
@media (max-width: 576px){
  .ap-section-title{
    font-size:22px;
    letter-spacing:.20em;
    margin-bottom:26px;
  }
}

/* ==========================================================
   Product cards (best sellers + selection)
   ========================================================== */
a.bouteille{
  text-decoration:none !important;
  transition: transform 250ms ease;
}
a.bouteille:hover{ transform:scale(1.02); }
a.bouteille:hover .ap-card,
a.bouteille:hover .promo-card{
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
}
a.bouteille:hover .ap-btn{
  background:var(--olive);
}

.ap-card{
  height:100%;
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:64px 54px;
  border-radius:11px;
  background-image:url(../img/degrade-rouge-bouteille02-slider-homepage.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center 343px;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition: box-shadow .3s ease, transform .3s ease;
}

.ap-card .imgbox{
  height:350px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-bottom:8px;
}
.ap-card .imgbox img{
  max-height:350px;
  width:auto;
}

.ap-card .domain,
.promo-card .domain{
  font-size:13px;
  white-space:nowrap;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:2px;
}

.ap-card .name,
.promo-card .name{
  font-family:"Anton",sans-serif;
  font-size:32px;
  line-height:1.05;
  color:var(--olive);
  margin:0 0 8px;
  text-align:center;
}
.ap-card .name:after,
.promo-card .name:after{
  display:block;
  height:1px;
  margin:15px auto 0;
  width:2.5rem;
  background-color:var(--olive);
  content:'';
}
.ap-card .price,
.promo-card .price{
  font-size:18px;
  font-weight:700;
  margin-bottom:15px;
  color:var(--text);
}

/* Card responsive */
@media (max-width: 992px){
  .ap-card{ padding:52px 34px; }
  .ap-card .name{ font-size:28px; }
}
@media (max-width: 576px){
  .ap-card{ padding:44px 26px; }
  .ap-card .imgbox{ height:300px; }
  .ap-card .imgbox img{ max-height:300px; }
  .ap-card .domain{ white-space:normal; text-align:center; }
}

/* ==========================================================
   Assistant (choix vin)
   ========================================================== */
.assistant{
  position:relative;
  background:url("../img/image-choix-vin01.jpg") center/cover no-repeat;
  padding:0;
}
.assistant:before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.70);
}
.assistant .inner{
  position:relative;
  z-index:2;
  max-width:var(--container);
  margin:0 auto;
  padding:64px var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
}

.assistant h3{
  margin:0 0 2px;
  font-size:40px;
  color:var(--olive);
  font-weight:600;
}
.assistant p{
  margin:0 0 14px;
  font-size:26px;
}

.assistant .q{
  font-size:26px;
  font-weight:600;
  margin:12px 0 14px;
}
.assistant .q span{
  position:relative;
  padding-right:16px;
  margin-right:20px;
}
.assistant .q span:after{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  content:"";
  width:1px;
  height:18px;
  background:#fff;
}

/* grille d'options */
.assistant .occasions{
  display:flex;
  width:100%;
  max-width:900px;
  align-items:stretch;
  justify-content:space-between;
  margin-top:6px;
  margin-left:auto;
  margin-right:auto;
  gap:12px;
}

/* boutons */
.assistant a.occ{
  font-size:16px;
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 18px;
  border-radius:14px;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease, outline-color .12s ease;
  outline:2px solid transparent;
  min-width:150px;
}
.assistant a.occ img{
  width:auto;
  height:70px;
  margin-bottom:0;
}
.assistant a.occ:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
}
.assistant a.occ:focus-visible{
  outline-color:rgba(255,255,255,.5);
}
.assistant a.occ.selected{
  background:rgba(255,255,255,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}

/* steps */
.assistant .step{ display:none; width:100%; }
.assistant .step.active{ display:block; }

/* pager */
.assistant .pager{
  margin-top:18px;
  display:flex;
  gap:0;
  flex-wrap:wrap;
  justify-content:center;
}
.assistant .pager a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  padding:0 22px;
}
.assistant .pager a.enabled{ border-bottom:1px solid var(--olive); }
.assistant .pager a.current{
  border-bottom:1px solid var(--olive);
  font-weight:700;
}
.assistant .pager a:hover{ opacity:.85; }

/* assistant responsive */
@media (max-width: 992px){
  .assistant .inner{ padding:54px var(--pad); }
  .assistant h3{ font-size:34px; }
  .assistant p{ font-size:22px; }
  .assistant .q{ font-size:22px; }
  .assistant .occasions{
    flex-wrap:wrap;
    justify-content:center;
  }
  .assistant a.occ{ min-width:160px; }
}
@media (max-width: 576px){
  .assistant h3{ font-size:28px; }
  .assistant p{ font-size:18px; }
  .assistant .q{ font-size:18px; }
  .assistant a.occ{
    width:calc(50% - 10px);
    min-width:0;
    padding:18px 14px;
  }
  .assistant a.occ img{ height:58px; }
}

/* ==========================================================
   PROMO
   ========================================================== */
.promo{
  background:var(--promo);
  position:relative;
  overflow:hidden;
}
.promo:before{
  content:"";
  position:absolute;
  left:50%;
  top:-89px;
  transform:translateX(-382px);
  width:300px;
  height:300px;
  background:url("../img/illustration-raisin.svg") left top/contain no-repeat;
  opacity:.8;
  pointer-events:none;
}
.promo .ap-section-title{ margin-top:6px; }

.promo-card{
  height:100%;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:64px 54px;
  border-radius:11px;
  background-image:url(../img/degrade-blanc-bouteille01-slider-homepage.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center 343px;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition: box-shadow .3s ease;
}
.promo .promo-card .imgwrap{
  height:350px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  margin-bottom:8px;
}
.promo .promo-card .imgwrap .b{
  max-height:350px;
  width:auto;
  position:relative;
  z-index:3;
}
.promo .promo-card .imgwrap .shadow2{
  position:absolute;
  bottom:-14px;
  width:220px;
  opacity:.8;
  z-index:1;
}
.promo .promo-card .badge{
  position:absolute;
  left:50%;
  transform:translateX(-74px);
  top:10px;
  width:56px;
  z-index:5;
}

/* promo responsive */
@media (max-width: 992px){
  .promo-card{ padding:52px 34px; }
}
@media (max-width: 576px){
  .promo-card{ padding:44px 26px; }
  .promo .promo-card .imgwrap{ height:300px; }
  .promo .promo-card .imgwrap .b{ max-height:300px; }
}

/* ==========================================================
   BENEFITS strip
   ========================================================== */
.benefits{
  background:url("../img/image-fond-pictos01.jpg") center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:130px 0;
}
.benefits .rowx{
  position:relative;
  z-index:2;
  max-width:var(--container);
  width:100%;
  padding:0 var(--pad);
  display:flex;
  justify-content:space-between;
  color:#fff;
  text-align:center;
  gap:28px;
}
.benefits .it{
  width:180px;
  font-size:10px;
}
.benefits .it img{
  width:auto;
  height:54px;
  margin:0 auto 10px;
}
.benefits .it .t{
  font-size:15px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.benefits .it .d{
  font-size:13px;
  line-height:1.2;
}
.benefits .it a{
  color:#fff;
  text-decoration:none;
}
.benefits .it a:hover{ text-decoration:underline; }

@media (max-width: 1200px){
  .benefits .rowx{
    justify-content:center;
    flex-wrap:wrap;
  }
  .benefits .it{ width:160px; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.ap-footer{
  position:relative;
}

/* zone collines + décor */
.ap-footer-top{
  background:url("../img/footer-fond.png") center top / cover no-repeat;
  padding:160px 0 0;
}
.ap-footer-container{ max-width:var(--container); }

/* grille colonnes */
.ap-footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.6fr 1fr .85fr 1fr;
  gap:56px;
  padding:0 10px 26px;
  align-items:start;
}

.ap-foot-title{
  font-size:14px;
  white-space:nowrap;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  margin:0 0 10px;
  font-weight:500;
}
.ap-foot-title.mt{ margin-top:18px; }

.ap-foot-col a{
  display:block;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  padding:1px 0;
}
.ap-foot-col a:hover{ text-decoration:underline; }

.ap-footer-alcool{
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:var(--green);
  padding:10px 0 18px;
}

/* Newsletter */
.ap-newsletter{
  background:var(--green);
  position:relative;
  padding:44px 0;
  overflow:hidden;
}
@media (min-width: 1400px){
  .ap-newsletter:before{
    content:"";
    position:absolute;
    left:-37px;
    top:-53px;
    width:234px;
    height:240px;
    background:url("../img/illustration-raisin-footer.svg") left bottom / contain no-repeat;
    pointer-events:none;
  }
}
.ap-newsletter-inner{
  display:grid;
  grid-template-columns: 1.1fr 1.6fr .55fr;
  gap:54px;
  align-items:center;
  padding:0 10px;
}

/* bloc texte */
.ap-newsletter-right{
  color:#fff;
  line-height:1.05;
  text-align:right;
}
.ap-nl-line1{ font-size:18px; }
.ap-nl-line2{ font-size:18px; }
.ap-nl-line2 span{
  font-size:50px;
  color:var(--olive);
}

/* input + checkbox */
.ap-newsletter-mid{ color:#fff; }
.ap-nl-input{
  width:100%;
  border:none;
  border-bottom:1px solid var(--olive);
  background:transparent;
  color:#fff;
  padding:6px 0 8px;
  font-size:14px;
  outline:none;
}
.ap-nl-input::placeholder{ color:var(--olive); }

.ap-nl-check{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.35;
  color:#fff;
}
.ap-nl-check input{
  margin-top:3px;
  accent-color:#fff;
}

.ap-nl-btn{
  height:30px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--olive);
  background:transparent;
  color:#fff;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition: background var(--t), color var(--t);
  white-space:nowrap;
}
.ap-nl-btn:hover{ background:var(--olive); }

/* barre bas */
.ap-footer-bottom{
  background:#b0ad77;
  padding:38px 0 28px;
}
.ap-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 10px;
  gap:16px;
}
.ap-pay img{
  height:32px;
  width:auto;
  margin-right:18px;
  vertical-align:middle;
}

.ap-follow{
  display:flex;
  align-items:center;
  gap:20px;
  color:#fff;
  font-size:14px;
}
.ap-follow a img{ height:26px; width:auto; }
.ap-follow a:hover img{ opacity:.8; }

.ap-bottom-links{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0 20px;
  gap:16px;
}
.ap-bottom-brand img{ height:26px; }

.ap-bottom-menu{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size:14px;
  color:#fff;
}
.ap-bottom-menu a{
  color:#fff;
  text-decoration:none;
}
.ap-bottom-menu a:hover{ text-decoration:underline; }

/* footer responsive */
@media (max-width: 991.98px){
  .ap-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:26px;
  }

  .ap-newsletter-inner{
    grid-template-columns:1fr;
    gap:14px;
  }
  .ap-newsletter-right{
    text-align:left;
  }
  .ap-nl-line2 span{ font-size:40px; }

  .ap-bottom-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .ap-bottom-links{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 576px){
  .ap-footer-top{ padding-top:120px; }
  .ap-foot-col a{ font-size:15px; }
  .ap-footer-alcool{ font-size:14px; }
  .ap-nl-line2 span{ font-size:34px; }
}

/* ==========================================================
   Petites sécurités (évite que Bootstrap écrase des choses)
   ========================================================== */
.ap-nav .container,
.ap-top .container,
.hero .wrap,
.assistant .inner,
.ap-footer .container{
  max-width:var(--container);
}

/* CONNEXION */

/* Zone blanche centrale */

/* Bloc connexion centré */
.ap-auth-box{
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* Titre "CONNEXION" */
.ap-auth-title{
  margin: 0 0 28px;
  letter-spacing: .1em;
  font-size: 46px; /* ajuste si besoin selon ta typo */
  font-weight: 400;
  color: var(--olive);
}

/* Form */
.ap-auth-form{
  margin: 0 auto;
  max-width: 380px;
  display: grid;
  gap: 14px;
}

/* Inputs pilule */
.ap-auth-form input{
  height: 44px;
  width: 100%;
  padding: 0 18px;
  border: 1px solid #dcdcdc;
  border-radius: 999px;
  outline: none;
  background: #fff;
  font-size: 15px;
}

.ap-auth-form input:focus{
  border-color: var(--olive);
}

/* Ligne actions */
.ap-auth-actions{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Lien oublié */
.ap-auth-forgot{
  font-size: 14px;
  text-decoration: underline;
  color: #3b3b3b;
}

/* Bouton "Continuer" pilule */
.ap-auth-submit{
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--olive);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  line-height: 42px; /* centre verticalement le texte */
  font-size: 15px;
  color: #1b1b1b;
}

/* Accessibilité (labels invisibles) */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Responsive léger */
@media (max-width: 520px){
  .ap-auth-title{ font-size: 34px; }
  .ap-auth-actions{
    justify-content: center; /* si tu veux que ça reste clean en petit */
  }
}

/* RECHERCHE */

.ap-search-title{
  text-align:center;
  color: var(--olive);
  letter-spacing: .18em;
  font-size: 32px;
  margin: 30px 0 28px;
}

.ap-search-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 44px;
  align-items: start;
}

/* LEFT */
.ap-filters{
  border-right: 1px solid #ececec;
  padding-right: 24px;
}

.ap-filter-chips{ margin: 6px 0 18px; }

.ap-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0f3b2a;        /* vert foncé comme le design */
  color:#fff;
}
.ap-chip-x{
  width: 22px;
  height: 22px;
  border:0;
  border-radius:999px;
  background: transparent;
  color:#fff;
  font-size: 18px;
  line-height: 22px;
  cursor:pointer;
  padding:0;
}

/* Accordion */
.ap-acc{ border-top: 1px solid #ececec; }
.ap-acc:last-child{ border-bottom: 1px solid #ececec; }

.ap-acc-head{
  width:100%;
  background: none;
  border:0;
  padding: 14px 0;
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  cursor:pointer;
  letter-spacing:.10em;
  font-weight: 600;
  color:#1c1c1c;
}

.ap-acc-head span {
  text-align: left;         /* force l’alignement à gauche */
  flex: 1;                  /* le texte prend toute la largeur dispo */
  line-height: 1.4;         /* plus lisible sur 2 lignes */
}

.ap-acc-chevron{
  width: 14px; height: 14px;
  border-right: 2px solid #1c1c1c;
  border-bottom: 2px solid #1c1c1c;
  transform: rotate(45deg);
  transition: .2s transform;
  margin-left: 10px;
  margin-top: 6px;
}

.ap-acc.is-open .ap-acc-chevron{
  transform: rotate(-135deg);
}

.ap-acc-body{
  padding: 0 0 14px 0;
  display:none;
}
.ap-acc.is-open .ap-acc-body{ display:block; }

/* Checkboxes look simple */
.ap-check{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 6px 0;
  cursor:pointer;
  user-select:none;
}
.ap-check input{ width: 14px; height: 14px; }

/* Mots clés */
.ap-keyword{
  display:flex;
  align-items:center;
  gap: 10px;
}
.ap-keyword input{
  width:100%;
  border:0;
  border-bottom: 1px solid #d8d8d8;
  padding: 8px 0;
  outline:none;
}
.ap-keyword-btn{
  width: 18px; height: 18px;
  border:0; background: transparent;
  cursor:pointer;
  position:relative;
}

/* RIGHT */
.ap-results-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin: 0 0 18px;
  color:#1c1c1c;
}
.ap-results-sort{
  display:flex;
  align-items:center;
  gap: 10px;
}
.ap-results-sort select{
  border:0;
  border-bottom: 1px solid #d8d8d8;
  outline:none;
  padding: 6px 0;
  background: transparent;
}

/* pagination simple bas */
.ap-pagination{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 26px;
}
.ap-pagination a{
  text-decoration:none;
  color:#1c1c1c;
  opacity:.65;
}
.ap-pagination a.is-active{ opacity:1; }

/* Responsive */
@media (max-width: 992px){
  .ap-search-layout{ grid-template-columns: 1fr; }
  .ap-filters{
    border-right:0;
    padding-right:0;
    margin-bottom: 22px;
  }
}


/* FICHE DETAILLEE */
.ap-product-hero,
.ap-inner-auth {
  background: url(../img/image-fond-interieur13.png) left top / 520px auto no-repeat, #fff;
}
.ap-search-big {
  background: url(../img/image-fond-interieur01.png) left top / 520px auto no-repeat, #fff;
}

.ap-product-hero > .container{ position: relative; z-index: 1; }

.ap-product-top-title{
  text-align:center;
  color: var(--olive);
  letter-spacing: .18em;
  font-size: 34px;
  margin: 8px 0 36px;
}

.ap-product-grid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 50px;
  align-items: start;
}

.ap-product-left{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  background-image: url("../img/degrade-rouge-bouteille02-slider-homepage.png");
  background-repeat: no-repeat;
  background-size: 392px auto;
  background-position: center 517px;
}

.ap-product-bottle{
  position: relative;
  z-index: 1; /* au-dessus du halo */
  max-width: 160px;
  width: 100%;
  display: block;
}

@media (max-width: 992px){
  .ap-product-left{
    background-size: 200px auto;
    background-position: center 300px;
  }
}

.ap-product-brand{
  letter-spacing: .16em;
  font-size: 12px;
  color:#1c1c1c;
  text-transform: uppercase;
}
.ap-product-name{
  font-size: 50px;
  font-family: "Anton", sans-serif;
  letter-spacing: .05em;
  line-height: .95;
  color: var(--olive);
  margin-top: 6px;
}
.ap-product-name:after {
    display: block;
    height: 1px;
    margin-top: 15px;
    width: 2.5rem;
    background-color: var(--olive);
    content: '';
}

.ap-product-prices{
  margin-top: 16px;
  display:flex;
  align-items: baseline;
  gap: 20px;
}
.ap-product-prices .old{
  text-decoration: line-through;
  color:#1c1c1c;
  opacity:.75;
  font-weight: 600;
}
.ap-product-prices .new{
  color:#1c1c1c;
  font-weight: 700;
  font-size: 20px;
}

.ap-product-ship{
  margin-top: 6px;
  font-size: 13px;
  color:#1c1c1c;
  opacity:.85;
  font-style: italic;
}

.ap-product-meta{
  margin-top: 14px;
}
.ap-product-meta a{
  color:#1c1c1c;
  text-decoration: underline;
}
.ap-product-meta .dot{ 
  margin: 0 8px;     
  font-weight: bold;
    font-size: 25px;
    line-height: 0px;
    vertical-align: middle; }

.ap-product-desc{
  margin-top: 26px;
  line-height: 1.8;
  color:#1c1c1c;
  max-width: 560px;
}

.ap-product-buy{
  margin-top: 26px;
  display:flex;
  align-items:center;
  gap: 18px;
}

/* qty comme sur la maquette */
.ap-qty{
  display:grid;
  grid-template-columns: 44px 54px 44px;
  height: 42px;
  border: 1px solid #dcdcdc;
  background:#fff;
}
.ap-qty-btn{
  border:0;
  background: transparent;
  cursor:pointer;
  font-size: 18px;
}
.ap-qty-val{
  border:0;
  text-align:center;
  outline:none;
  font-size: 14px;
  height: 40px;
}

/* bouton ajouter au panier (pilule) */
.ap-add-to-cart{
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--olive);
  background:#fff;
  border-radius: 999px;
  cursor:pointer;
  line-height: 42px;
  white-space: nowrap;
}

/* bloc goûts */
.ap-taste{
  margin-top: 44px;
  background:#f2f2ea;
  padding: 24px 26px;
}
.ap-taste-title{
  font-weight: 600;
  margin-bottom: 14px;
  color:#1c1c1c;
}
.ap-taste-row{
  display:grid;
  grid-template-columns: 90px 1fr 90px;
  align-items:center;
  gap: 16px;
  margin: 10px 0;
  font-size: 13px;
  color:#1c1c1c;
}
.ap-taste-row .bar{
  height: 6px;
  background: #e2e2d6;
  position: relative;
}
.ap-taste-row .bar span{
  position:absolute;
  top: 0px;
  width: 38px;
  height: 6px;
  background: var(--olive);
  transform: translateX(-50%);
}

/* responsive */
@media (max-width: 992px){
  .ap-product-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ap-product-name{ font-size: 46px; }
  .ap-product-buy{ flex-wrap: wrap; }
}


/* CHECKBOX */
.ap-check{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

/* reset checkbox natif */
.ap-check input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--green);
  background: #fff;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}

/* état coché */
.ap-check input[type="checkbox"]:checked{
  background: var(--green);
  border-color: var(--green);
}

/* coche */
.ap-check input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* hover subtil */
.ap-check:hover input[type="checkbox"]{
  box-shadow: 0 0 0 2px rgba(90, 122, 74, .12); /* halo léger olive */
}

/* focus clavier */
.ap-check input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(90, 122, 74, .25);
}

/* BANNER */
.ap-quote-banner{
  padding: 34px 0 40px;
  background: #fff;
}

.ap-quote-inner{
  position: relative;
  height: 180px;               /* ajuste si besoin */
  background: url("../img/image-fond-citation.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  padding: 0 70px;
  overflow: hidden;
}

/* voile léger pour lisibilité (très discret) */
.ap-quote-inner:before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.3);
}

.ap-quote-mark,
.ap-quote-mark2{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

/* gros guillemet en fond */
.ap-quote-mark img{
  width: 104px;
  height: auto;
  opacity: .15;
  transform: translateY(-52px);
}

/* petit guillemet blanc devant le texte */
.ap-quote-mark2 img{
    width: 50px;
    height: auto;
    margin-left: -34px;
    margin-right: 4px;
    margin-top: -26px;
}

/* texte citation */
.ap-quote-text{
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 24px;
  margin-top: 23px;
  margin-left: -16px;
  line-height: 1.12;
  letter-spacing: .01em;
  max-width: 980px;
}

/* source */
.ap-quote-src{
  font-family: "Jost",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin-top: 10px;
  font-size: 22px;
  font-style: italic;
  opacity: .95;
}

/* badge */
.ap-product-badges{
  position: absolute;
  top: 90px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.ap-product-badges img{
  display: block;
  height: auto;
}

/* tailles proches du rendu */
.ap-product-badges .badge-medal{
  width: 110px; /* ajuste 95-120 selon ton design */
}

.ap-product-badges .badge-ab{
  width: 135px; /* ajuste 120-150 */
}

@media (max-width: 992px){
  .ap-product-badges{
    position: static;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 14px;
  }
  .ap-product-head,
  .ap-product-desc,
  .ap-product-buy{
    padding-right: 0;
  }
  .ap-product-badges .badge-medal{ width: 90px; }
  .ap-product-badges .badge-ab{ width: 120px; }
}

/* responsive */
@media (max-width: 992px){
  .ap-quote-inner{ height: 160px; padding: 0 24px; }
  .ap-quote-text{ font-size: 28px; }
  .ap-quote-src{ font-size: 18px; }
  .ap-quote-mark{ font-size: 84px; margin-right: 14px; }
}

/* ==========================================================
   PAGE PANIER (contenu page) — CSS COMPLET À AJOUTER
   (coupon + totaux SOUS la liste, comme le screenshot)
   ========================================================== */

.ap-cartpage{
  background:#fff;
  padding:0 0 70px;
}

/* Bandeau visuel (si tu as une image de fond) */
.ap-cartpage-hero{
  height:230px;
  background:
    linear-gradient(to right, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.96) 100%),
    url("../img/bg-barrels.jpg");
  background-size:cover;
  background-position:center;
}

/* Titre PANIER */
.ap-cartpage-title{
  margin:-88px 0 22px;
  text-align:center;
  letter-spacing:.18em;
  font-weight:500;
  font-size:48px;
  color:#9aa56a;
}

/* Étapes */
.ap-cartpage-steps{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:54px;
  padding:0 0 18px;
  margin:0 auto 38px;
  border-bottom:1px solid #e8e8e8;
  max-width:980px;
}

.ap-cartpage-steps li{
  position:relative;
  font-size:12px;
  letter-spacing:.16em;
  color:#1d1d1d;
  opacity:.9;
  text-transform:uppercase;
}

.ap-cartpage-steps li.is-active{
  color:#9aa56a;
  opacity:1;
}

.ap-cartpage-steps li.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-19px;
  height:2px;
  background:#9aa56a;
}

/* Layout global : 1 colonne */
.ap-cartpage-grid{
  display:block;
}


/* Ligne produit */
.ap-cartline{
  display:grid;
  grid-template-columns: 120px 1fr 150px 44px 160px;
  gap:22px;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid #ededed;
}

.ap-cartline-img{
  display:flex;
  align-items:center;
  justify-content:center;
  height:110px;
}

.ap-cartline-img img{
  max-height:110px;
  width:auto;
  display:block;
}

.ap-cartline-brand{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1b1b1b;
  margin-bottom:6px;
}

.ap-cartline-name{
  font-size:34px;
  line-height:1.05;
  color:#9aa56a;
  font-family: "Anton";
  letter-spacing: .05em;
}

/* Quantité (- 1 +) */
.ap-cartline-qty{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e5e5e5;
  height:38px;
  width:150px;
  background:#fff;
}

.ap-qty-btn{
  width:42px;
  height:38px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  color:#2a2a2a;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ap-qty-btn:active{
  transform:translateY(1px);
}

.ap-qty-input{
  width:56px;
  height:38px;
  border:0;
  text-align:center;
  font-size:14px;
  outline:none;
  color:#1b1b1b;
  background:transparent;
}

/* Supprimer (X) */
.ap-cartline-remove{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:30px;
  line-height:1;
  color:#cfcfcf;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ap-cartline-remove:hover{
  color:#b8b8b8;
}

/* Prix */
.ap-cartline-price{
  text-align:right;
  font-size:16px;
  font-weight:600;
  color:#0f2b1b;
  white-space:nowrap;
}

.ap-ttc-label{
  font-weight:400;
  color:#0f2b1b;
  opacity:.9;
}

/* ==========================================================
   ZONE BAS : coupon à gauche / totaux à droite / bouton à droite
   ========================================================== */
.ap-cartpage-side{
  margin-top:22px;
  padding-top:22px;
  display:grid;
  grid-template-columns: 1fr 222px;
  column-gap:40px;
  row-gap:16px;
  align-items:start;
}

.ap-cartpage-coupon{
  display:flex;
  gap:14px;
  align-items:center;
  margin:0;
}

.ap-cartpage-coupon input{
  flex:1;
  height:42px;
  max-width: 360px;
  padding:0 16px;
  border:1px solid #dcdcdc;
  border-radius:22px;
  outline:none;
  font-size:14px;
}

.ap-coupon-validate{
  height:42px;
  max-width: 360px;
  padding:0 22px;
  border-radius:22px;
  border:1px solid #9aa56a;
  background:#fff;
  color:#1b1b1b;
  cursor:pointer;
  font-size:14px;
}

.ap-coupon-validate:hover{
  background:rgba(154,165,106,.08);
}

.ap-cartpage-totals{
  margin:0;
  justify-self:end;
}

.ap-cartpage-totals .row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
  font-size:14px;
  color:#1b1b1b;
}

.ap-cartpage-totals .row.grand{
  padding-top:10px;
  font-size:20px;
  font-weight:700;
  color:#0f2b1b;
}

.ap-cartpage-next{
  grid-column:2;
  justify-self:end;
  margin-top: 1rem;
  display:block;
  text-align:center;
  height:44px;
  line-height:44px;
  border-radius:22px;
  border:1px solid #9aa56a;
  color:#1b1b1b;
  text-decoration:none;
  width:220px;
}

.ap-cartpage-next:hover{
  background:rgba(154,165,106,.08);
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px){
  .ap-cartpage-title{
    font-size:40px;
    margin:-82px 0 18px;
  }

  .ap-cartpage-steps{
    gap:18px;
    flex-wrap:wrap;
    padding-bottom:14px;
  }

  .ap-cartpage-side{
    grid-template-columns: 1fr;
    row-gap:18px;
  }

  .ap-cartpage-totals{
    justify-self:start;
    width:100%;
    max-width:360px;
  }

  .ap-cartpage-next{
    grid-column:1;
    justify-self:end;
    width:100%;
    max-width:360px;
  }
}

@media (max-width: 768px){
  .ap-cartpage-title{
    font-size:34px;
    margin:-76px 0 18px;
  }

  .ap-cartline{
    grid-template-columns: 92px 1fr;
    grid-template-areas:
      "img meta"
      "img qty"
      "img price"
      "img remove";
    gap:10px 16px;
    padding:18px 0;
  }

  .ap-cartline-img{ grid-area:img; height:120px; }
  .ap-cartline-meta{ grid-area:meta; }
  .ap-cartline-qty{ grid-area:qty; width:150px; }
  .ap-cartline-price{ grid-area:price; text-align:left; }
  .ap-cartline-remove{ grid-area:remove; justify-content:flex-start; padding-left:6px; }

  .ap-cartline-name{ font-size:28px; }
}

@media (max-width: 600px){
  .ap-cartpage-coupon{
    flex-direction:column;
    align-items:stretch;
  }

  .ap-cartpage-coupon input{
    flex: 0 0 auto;   /* on enlève tout comportement de flex-basis chelou */
    width: 100%;
  }

}

/* Totaux panier – simple, sans .row */
.ap-cartpage-totals .ap-total-line{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:6px 0;
  font-size:14px;
  color:#1b1b1b;
}

.ap-cartpage-totals .ap-total-grand{
  margin-top:6px;
  font-size:20px;
  font-weight:700;
  color:#0f2b1b;
}

/* ==========================================================
   CHECKOUT - Étape 2 : Informations personnelles
   (uniquement nouveaux styles)
   ========================================================== */

.ap-checkout-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:70px;
  align-items:start;
  margin-top:28px;
}

.ap-address-block{
  color:#222;
  line-height:1.6;
}

.ap-address-title{
  font-weight:700;
  margin-bottom:6px;
}

.ap-address-edit{
  display:inline-block;
  margin-top:6px;
  color:#222;
  text-decoration:underline;
}

.ap-checkout-sep{
  border:0;
  border-top:1px solid #bbb;
  margin:34px 0;
}

.ap-checkout-right{
  padding-top:6px;
}

.ap-recap-title{
  font-size:18px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#1b1b1b;
  margin-bottom:18px;
}

.ap-recap-list{
  border-top:1px solid #ededed;
  padding-top:18px;
}

.ap-recap-line{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:18px;
  align-items:center;
  padding:14px 0;
}

.ap-recap-img{
  display:flex;
  align-items:center;
  justify-content:center;
  height:150px;
}

.ap-recap-img img{
  max-height:150px;
  width:auto;
  display:block;
}

.ap-recap-brand{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1b1b1b;
  margin-bottom:4px;
}

.ap-recap-name{
  font-size:34px;
  line-height:1.05;
  color:#9aa56a;
  font-family: "Anton";
  letter-spacing: .05em;
  margin-bottom:10px;
}
.ap-recap-name:after {
    display: block;
    height: 1px;
    margin-top: 15px;
    width: 2.5rem;
    background-color: var(--olive);
    content: '';
}

.ap-recap-price{
  font-size:18px;
  font-weight:700;
  color:#0f2b1b;
}

.ap-recap-total{
  border-top:1px solid #ededed;
  margin-top:18px;
  padding-top:18px;
  display:flex;
  justify-content:end;
  gap:8px;
  font-size:20px;
  color:#0f2b1b;
}

.ap-recap-total strong{
  font-weight:800;
}

/* Responsive */
@media (max-width: 1024px){
  .ap-checkout-grid{
    grid-template-columns: 1fr;
    gap:40px;
  }
  .ap-checkout-right{
    max-width:520px;
  }
}

/* ==========================================================
   CHECKOUT - Étape 3 : Livraison (colonne gauche uniquement)
   ========================================================== */

.ap-ship-left{
  max-width:540px;
}

/* Liste des options */
.ap-ship-options{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin-top:6px;
}

/* Chaque ligne */
.ap-ship-option{
  display:flex;
  align-items:flex-start;
  gap:14px;
  cursor:pointer;
  user-select:none;
}

/* input radio : petit carré comme sur le visuel */
.ap-ship-option input[type="radio"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:#9aa56a; /* vert doux */
}

/* Texte */
.ap-ship-main{
  display:block;
}

.ap-ship-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1b1b1b;
  font-weight:700;
  margin-bottom:6px;
}

.ap-ship-logo{
  height:28px;
  width:auto;
  display:inline-block;
}

.ap-ship-sub{
  display:block;
  font-size:13px;
  line-height:1.55;
  color:#2a2a2a;
  margin-top:2px;
}

.ap-ship-sub strong{
  font-weight:700;
}

/* Encadré info */
.ap-ship-info{
  margin-top:34px;
  border:1px solid #e3e3e3;
  padding:22px 26px;
  background:#fff;
}

.ap-ship-info-title{
  font-weight:700;
  color:#1b1b1b;
  margin-bottom:12px;
}

.ap-ship-info-list{
  margin:0;
  padding-left:18px;
  color:#2a2a2a;
  line-height:1.7;
}

.ap-ship-info-list li{
  margin:6px 0;
}

/* Mobile */
@media (max-width: 1024px){
  .ap-ship-left{ max-width:100%; }
}


/* ==========================================================
   CHECKOUT - Étape 4 : Paiement (colonne gauche uniquement)
   ========================================================== */

.ap-pay-left{
  max-width:540px;
}

/* Liste des moyens */
.ap-pay-methods{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:6px;
}

.ap-pay-option{
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  user-select:none;
}

/* checkbox/radio “carré” */
.ap-pay-option input[type="radio"]{
  width:16px;
  height:16px;
  accent-color:var(--green);;
}

/* ligne */
.ap-pay-main{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.ap-pay-title{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#1b1b1b;
}

.ap-pay-logos{
  display:flex;
  align-items:center;
  gap:12px;
}

.ap-pay-logos img{
  height:20px;
  width:auto;
  display:block;
}

/* Texte RGPD */
.ap-pay-privacy{
  margin:26px 0 22px;
  font-size:13px;
  line-height:1.75;
  color:#2a2a2a;
  max-width:520px;
}

.ap-pay-link{
  color:#1b1b1b;
  text-decoration:underline;
}

/* CGV */
.ap-pay-terms{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
  font-size:13px;
  color:#2a2a2a;
}

.ap-pay-terms input[type="checkbox"]{
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:#9aa56a;
}

/* Mobile */
@media (max-width: 1024px){
  .ap-pay-left{ max-width:100%; }
}