/* GATARD Product Pro 4.6.20 — modales flottantes premium
   Portée stricte : modales publiques GPP et configurateur #gpp-smart-flow.
   Aucun style Staff Hub, checkout, header, footer ou catalogue n'est ciblé. */

:root{
  --gpp-v4620-panel:#fffdf9;
  --gpp-v4620-soft:#fbf7f2;
  --gpp-v4620-soft-2:#f4eee4;
  --gpp-v4620-ink:#262219;
  --gpp-v4620-muted:#756d5f;
  --gpp-v4620-accent:#857650;
  --gpp-v4620-accent-2:#a59a76;
  --gpp-v4620-line:rgba(133,118,80,.18);
  --gpp-v4620-shadow:0 26px 80px rgba(28,22,13,.28),0 3px 14px rgba(28,22,13,.08);
}

/* Le fond reste visible : la fenêtre doit être perçue comme une vraie modal. */
#gpp-smart-flow.gpp-v4618-flow-backdrop,
.gpp-modal-backdrop,
.gpp-v4-flow-backdrop{
  align-items:center!important;
  justify-content:center!important;
  padding:max(18px,var(--gpp-v4619-safe-top)) max(18px,var(--gpp-v4619-safe-right)) max(18px,var(--gpp-v4619-safe-bottom)) max(18px,var(--gpp-v4619-safe-left))!important;
  background:rgba(30,25,17,.56)!important;
  backdrop-filter:blur(11px) saturate(.9)!important;
  -webkit-backdrop-filter:blur(11px) saturate(.9)!important;
}

/* Toutes les fenêtres publiques conservent leurs quatre coins arrondis. */
.gpp-modal-backdrop .gpp-review-modal,
.gpp-modal-backdrop .gpp-accomp-modal,
.gpp-modal-backdrop .gpp-sauce-modal,
.gpp-modal-backdrop .gpp-slot-modal,
.gpp-modal-backdrop .gpp-dessert-modal,
.gpp-modal-backdrop .gpp-added-choice,
.gpp-modal-backdrop .gpp-v463-menu-picker{
  width:min(var(--gpp-modal-width,760px),calc(var(--gpp-v4619-vw) - 36px))!important;
  max-width:calc(var(--gpp-v4619-vw) - 36px)!important;
  max-height:calc(var(--gpp-v4619-vh) - 36px)!important;
  border:1px solid var(--gpp-v4620-line)!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,#fffefa 0%,var(--gpp-v4620-soft) 100%)!important;
  box-shadow:var(--gpp-v4620-shadow)!important;
}
.gpp-modal-backdrop .gpp-review-modal{--gpp-modal-width:610px}
.gpp-modal-backdrop .gpp-sauce-modal{--gpp-modal-width:700px}
.gpp-modal-backdrop .gpp-accomp-modal{--gpp-modal-width:900px}
.gpp-modal-backdrop .gpp-dessert-modal{--gpp-modal-width:980px}
.gpp-modal-backdrop .gpp-slot-modal{--gpp-modal-width:700px}
.gpp-modal-backdrop .gpp-added-choice{--gpp-modal-width:650px}

/* --------------------------------------------------------------------------
   Configurateur de menus : fenêtre compacte, centrée et sans grand vide.
   Le conteneur est flexible : court sur une étape simple, scrollable si besoin.
   -------------------------------------------------------------------------- */
#gpp-smart-flow .gpp-v4618-flow{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(1140px,calc(var(--gpp-v4619-vw) - 44px))!important;
  max-width:1140px!important;
  height:auto!important;
  min-height:0!important;
  max-height:calc(var(--gpp-v4619-vh) - 36px)!important;
  overflow:hidden!important;
  border:1px solid var(--gpp-v4620-line)!important;
  border-radius:32px!important;
  background:var(--gpp-v4620-panel)!important;
  box-shadow:var(--gpp-v4620-shadow)!important;
}
#gpp-smart-flow .gpp-v4618-flow::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#gpp-smart-flow .gpp-v4618-progress,
#gpp-smart-flow .gpp-v4618-scroll,
#gpp-smart-flow .gpp-v4618-actions{position:relative!important;z-index:2!important}
#gpp-smart-flow .gpp-v4618-close{position:absolute!important;z-index:6!important}

#gpp-smart-flow .gpp-v4618-progress{
  flex:0 0 auto!important;
  padding:22px 76px 17px 28px!important;
  background:linear-gradient(135deg,#fffefa 0%,#f7f1e7 100%)!important;
  border-bottom:1px solid rgba(133,118,80,.13)!important;
}
#gpp-smart-flow .gpp-v4618-progress__current{margin-bottom:11px!important}
#gpp-smart-flow .gpp-v4618-progress__bar{height:4px!important}

#gpp-smart-flow .gpp-v4618-scroll{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:auto!important;
  background:linear-gradient(180deg,#fffdf9 0%,#fdfaf5 100%)!important;
}
#gpp-smart-flow .gpp-v4618-scroll>[data-gpp-v4618-body],
#gpp-smart-flow .gpp-v4618-layout{
  min-height:0!important;
  height:auto!important;
}
#gpp-smart-flow .gpp-v4618-layout{
  align-items:stretch!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
}
#gpp-smart-flow .gpp-v4618-main{
  padding:30px 34px 30px!important;
}
#gpp-smart-flow .gpp-v4618-summary{
  position:relative!important;
  top:auto!important;
  align-self:stretch!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:28px 22px!important;
  border-left:1px solid rgba(133,118,80,.13)!important;
  background:linear-gradient(180deg,#f6f0e6 0%,#fbf7f2 100%)!important;
}

/* Le pied appartient visuellement à la fenêtre. */
#gpp-smart-flow .gpp-v4618-actions{
  flex:0 0 auto!important;
  min-height:0!important;
  padding:14px 24px max(14px,var(--gpp-v4619-safe-bottom))!important;
  border-top:1px solid rgba(133,118,80,.15)!important;
  background:rgba(255,253,249,.98)!important;
  box-shadow:0 -12px 30px rgba(38,30,17,.045)!important;
}
#gpp-smart-flow .gpp-v4618-actions .gpp-btn{
  min-height:50px!important;
  border-radius:16px!important;
}
#gpp-smart-flow .gpp-v4618-actions.is-single-action{
  justify-content:flex-end!important;
}
#gpp-smart-flow .gpp-v4618-actions.is-single-action .gpp-btn-primary{
  width:min(360px,100%)!important;
  flex:0 1 360px!important;
  margin-left:auto!important;
}

/* Fermeture plus nette et mieux intégrée. */
#gpp-smart-flow .gpp-v4618-close{
  top:15px!important;
  right:16px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border-color:rgba(133,118,80,.2)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 22px rgba(40,31,17,.1)!important;
}

/* Quantité : bloc central plus premium et plus compact. */
#gpp-smart-flow .gpp-v4618-quantity-card{
  width:min(440px,100%)!important;
  margin:14px auto 16px!important;
  padding:10px!important;
  border-radius:24px!important;
  border-color:rgba(133,118,80,.2)!important;
  box-shadow:0 15px 36px rgba(47,38,22,.075)!important;
}
#gpp-smart-flow .gpp-v4618-quantity-card button{
  border:1px solid rgba(133,118,80,.08)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#f7f2eb,#eee6da)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
#gpp-smart-flow .gpp-v4618-quantity-card button:not(:disabled):active{transform:scale(.96)!important}
#gpp-smart-flow .gpp-v4618-info{
  width:min(620px,100%)!important;
  box-sizing:border-box!important;
  margin:14px auto 0!important;
  padding:14px 16px!important;
  border:1px solid rgba(133,118,80,.08)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f5efe5,#f8f4ed)!important;
}

/* --------------------------------------------------------------------------
   Tablette : une vraie modal centrée, résumé pleine largeur, pas de plein écran.
   -------------------------------------------------------------------------- */
@media (min-width:701px) and (max-width:1024px){
  #gpp-smart-flow .gpp-v4618-flow{
    width:min(880px,calc(var(--gpp-v4619-vw) - 28px))!important;
    max-width:880px!important;
    max-height:calc(var(--gpp-v4619-vh) - 28px)!important;
    border-radius:30px!important;
  }
  #gpp-smart-flow .gpp-v4618-layout{
    display:flex!important;
    flex-direction:column!important;
  }
  #gpp-smart-flow .gpp-v4618-main{padding:28px 28px 22px!important}
  #gpp-smart-flow .gpp-v4618-summary{
    align-self:stretch!important;
    width:auto!important;
    margin:0 28px 22px!important;
    padding:16px 18px!important;
    border:1px solid var(--gpp-v4620-line)!important;
    border-radius:20px!important;
    box-shadow:0 8px 24px rgba(42,33,18,.045)!important;
  }
}

/* --------------------------------------------------------------------------
   Mobile : carte flottante arrondie, centrée, compacte, footer interne.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  #gpp-smart-flow.gpp-v4618-flow-backdrop,
  .gpp-modal-backdrop,
  .gpp-v4-flow-backdrop{
    align-items:center!important;
    justify-content:center!important;
    padding:max(12px,var(--gpp-v4619-safe-top)) max(12px,var(--gpp-v4619-safe-right)) max(12px,var(--gpp-v4619-safe-bottom)) max(12px,var(--gpp-v4619-safe-left))!important;
    background:rgba(30,25,17,.52)!important;
    backdrop-filter:blur(9px) saturate(.92)!important;
    -webkit-backdrop-filter:blur(9px) saturate(.92)!important;
  }

  /* Les autres modales ne sont plus collées au bas de l'écran. */
  .gpp-modal-backdrop .gpp-review-modal,
  .gpp-modal-backdrop .gpp-accomp-modal,
  .gpp-modal-backdrop .gpp-sauce-modal,
  .gpp-modal-backdrop .gpp-slot-modal,
  .gpp-modal-backdrop .gpp-dessert-modal,
  .gpp-modal-backdrop .gpp-added-choice,
  .gpp-modal-backdrop .gpp-v463-menu-picker{
    width:100%!important;
    max-width:560px!important;
    max-height:calc(var(--gpp-v4619-vh) - max(24px,var(--gpp-v4619-safe-top)) - max(24px,var(--gpp-v4619-safe-bottom)))!important;
    border:1px solid var(--gpp-v4620-line)!important;
    border-radius:28px!important;
    box-shadow:var(--gpp-v4620-shadow)!important;
  }

  #gpp-smart-flow .gpp-v4618-flow{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:560px!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(var(--gpp-v4619-vh) - max(24px,var(--gpp-v4619-safe-top)) - max(24px,var(--gpp-v4619-safe-bottom)))!important;
    border:1px solid var(--gpp-v4620-line)!important;
    border-radius:30px!important;
    background:var(--gpp-v4620-panel)!important;
    box-shadow:var(--gpp-v4620-shadow)!important;
  }

  #gpp-smart-flow .gpp-v4618-progress{
    padding:19px 62px 14px 18px!important;
  }
  #gpp-smart-flow .gpp-v4618-progress__current{
    display:block!important;
    margin-bottom:9px!important;
  }
  #gpp-smart-flow .gpp-v4618-progress__current small{
    display:block!important;
    margin:0 0 3px!important;
    font-size:9.5px!important;
    letter-spacing:.14em!important;
  }
  #gpp-smart-flow .gpp-v4618-progress__current strong{font-size:16px!important}
  #gpp-smart-flow .gpp-v4618-progress__steps{display:none!important}
  #gpp-smart-flow .gpp-v4618-progress__bar{height:4px!important}

  #gpp-smart-flow .gpp-v4618-close{
    top:11px!important;
    right:11px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    font-size:27px!important;
  }

  #gpp-smart-flow .gpp-v4618-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    scrollbar-gutter:auto!important;
  }
  #gpp-smart-flow .gpp-v4618-scroll>[data-gpp-v4618-body],
  #gpp-smart-flow .gpp-v4618-layout{
    min-height:0!important;
    height:auto!important;
  }
  #gpp-smart-flow .gpp-v4618-layout{
    display:flex!important;
    flex-direction:column!important;
  }
  #gpp-smart-flow .gpp-v4618-main{
    padding:25px 18px 17px!important;
  }
  #gpp-smart-flow .gpp-v4618-kicker{
    display:table!important;
    margin:0 auto 11px!important;
  }
  #gpp-smart-flow .gpp-v4618-main h3{
    max-width:360px!important;
    margin:0 auto!important;
    font-size:clamp(25px,7.2vw,30px)!important;
    line-height:1.14!important;
    text-align:center!important;
  }
  #gpp-smart-flow .gpp-v4618-lead{
    max-width:390px!important;
    margin:9px auto 18px!important;
    font-size:12.5px!important;
    line-height:1.55!important;
    text-align:center!important;
  }

  #gpp-smart-flow .gpp-v4618-quantity-card{
    grid-template-columns:60px minmax(0,1fr) 60px!important;
    width:100%!important;
    max-width:380px!important;
    margin:10px auto 14px!important;
    padding:8px!important;
    border-radius:22px!important;
  }
  #gpp-smart-flow .gpp-v4618-quantity-card button{
    width:52px!important;
    height:52px!important;
    min-height:52px!important;
    border-radius:16px!important;
    font-size:29px!important;
  }
  #gpp-smart-flow .gpp-v4618-quantity-card strong{font-size:34px!important}
  #gpp-smart-flow .gpp-v4618-quantity-card span{font-size:9.5px!important}
  #gpp-smart-flow .gpp-v4618-info{
    width:100%!important;
    max-width:520px!important;
    margin:12px auto 0!important;
    padding:13px 14px!important;
    border-radius:17px!important;
  }
  #gpp-smart-flow .gpp-v4618-info>span{
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
  }
  #gpp-smart-flow .gpp-v4618-info strong{font-size:11px!important}
  #gpp-smart-flow .gpp-v4618-info small{font-size:10.2px!important}

  /* Correction du résumé qui se rétrécissait à gauche sur iPhone. */
  #gpp-smart-flow .gpp-v4618-summary{
    position:relative!important;
    align-self:stretch!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    box-sizing:border-box!important;
    margin:0 18px 16px!important;
    padding:14px 16px!important;
    border:1px solid var(--gpp-v4620-line)!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,#f7f1e7,#fbf7f2)!important;
    box-shadow:0 9px 25px rgba(43,34,19,.045)!important;
  }
  #gpp-smart-flow .gpp-v4618-summary__lines{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:3px 14px!important;
    padding:0 0 10px!important;
  }
  #gpp-smart-flow .gpp-v4618-summary__lines p{font-size:9.5px!important;padding:3px 0!important}
  #gpp-smart-flow .gpp-v4618-summary__lines p:nth-child(n+3){display:none!important}
  #gpp-smart-flow .gpp-v4618-summary__total{padding-top:10px!important}
  #gpp-smart-flow .gpp-v4618-summary__total strong{font-size:22px!important}

  #gpp-smart-flow .gpp-v4618-actions{
    display:flex!important;
    flex:0 0 auto!important;
    gap:9px!important;
    padding:12px 18px max(13px,var(--gpp-v4619-safe-bottom))!important;
    background:linear-gradient(180deg,rgba(255,253,249,.96),#fffdf9 35%)!important;
  }
  #gpp-smart-flow .gpp-v4618-actions .gpp-btn{
    min-height:52px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    font-size:10.5px!important;
  }
  #gpp-smart-flow .gpp-v4618-actions .gpp-btn-light{flex:0 0 96px!important}
  #gpp-smart-flow .gpp-v4618-actions .gpp-btn-primary{flex:1 1 auto!important;min-width:0!important}
  #gpp-smart-flow .gpp-v4618-actions.is-single-action{
    display:block!important;
  }
  #gpp-smart-flow .gpp-v4618-actions.is-single-action .gpp-btn-primary{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
}

/* Téléphones étroits : marges régulières sans coller aux bords. */
@media (max-width:390px){
  #gpp-smart-flow.gpp-v4618-flow-backdrop,
  .gpp-modal-backdrop,
  .gpp-v4-flow-backdrop{
    padding:max(9px,var(--gpp-v4619-safe-top)) max(9px,var(--gpp-v4619-safe-right)) max(9px,var(--gpp-v4619-safe-bottom)) max(9px,var(--gpp-v4619-safe-left))!important;
  }
  #gpp-smart-flow .gpp-v4618-flow{border-radius:26px!important}
  #gpp-smart-flow .gpp-v4618-main{padding-right:15px!important;padding-left:15px!important}
  #gpp-smart-flow .gpp-v4618-summary{margin-right:15px!important;margin-left:15px!important}
  #gpp-smart-flow .gpp-v4618-actions{padding-right:15px!important;padding-left:15px!important}
}

/* Paysage / clavier : compacte mais toujours arrondie et centrée. */
@media (max-height:620px){
  #gpp-smart-flow.gpp-v4618-flow-backdrop,
  .gpp-modal-backdrop,
  .gpp-v4-flow-backdrop{padding:7px!important}
  #gpp-smart-flow .gpp-v4618-flow{
    width:min(980px,calc(var(--gpp-v4619-vw) - 14px))!important;
    max-height:calc(var(--gpp-v4619-vh) - 14px)!important;
    border-radius:22px!important;
  }
  #gpp-smart-flow .gpp-v4618-progress{padding-top:11px!important;padding-bottom:9px!important}
  #gpp-smart-flow .gpp-v4618-main{padding-top:16px!important;padding-bottom:13px!important}
  #gpp-smart-flow .gpp-v4618-lead{margin-bottom:12px!important}
  #gpp-smart-flow .gpp-v4618-actions{padding-top:8px!important;padding-bottom:max(8px,var(--gpp-v4619-safe-bottom))!important}
}