/* ============================================================
   Rupteur — Checkout
   ============================================================ */

/* ---- On masque le chrome du site sur le checkout ---- */
#rh_header,
#footer { display:none !important; }
#mkcoc  { display:none; }

/* ============================================================
   1. Header checkout
   ============================================================ */
.rc-coheader{ position:sticky; top:0; z-index:60; background:#fff; }
.rc-coheader-bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px; max-width:1400px; margin:0 auto; padding:16px 24px;
}
.rc-coheader-back{ justify-self:start; display:inline-flex; align-items:center; gap:8px; color:#111; font-weight:600; font-size:.95rem; }
.rc-coheader-back:hover{ color:#111; opacity:.65; }
.rc-coheader-back i{ margin:0; }
.rc-coheader-logo{ justify-self:center; display:flex; }
.rc-coheader-logo img{ height:40px; width:auto; display:block; }
.rc-coheader-user{ justify-self:end; display:inline-flex; align-items:center; gap:8px; color:#111; font-weight:600; font-size:.95rem; }
.rc-coheader-user i{ margin:0; font-size:1.15rem; }
.rc-coheader-progress{ max-width:1400px; margin:0 auto; height:6px; background:#ededed; border-radius:30px; overflow:hidden; }
.rc-coheader-progress span{ display:block; height:100%; width:88%; background:var(--color-primary,#e2001a); border-radius:30px; transition:width .4s ease; }
@media (max-width:720px){
  .rc-coheader-bar{ padding:14px 16px; }
  .rc-coheader-back span, .rc-coheader-user span{ display:none; }
  .rc-coheader-logo img{ height:36px; }
  .rc-coheader-progress{ margin-left:15px; margin-right:15px; }
}

/* ============================================================
   2. Structure / titres de sections (cohérence)
   ============================================================ */
.co-section{ margin:0 0 30px; }
.co-section:last-child{ margin-bottom:0; }
.co-h2{ font-weight:800; font-size:1.5rem; line-height:1.2; color:#111; margin:0 0 14px; }
.co-h2.is-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.co-h3{ font-weight:800; font-size:1.15rem; line-height:1.2; color:#111; margin:0 0 12px; }
.otp-title{ font-weight:800; font-size:1rem !important; line-height:1.15; color:#000; margin:0 0 6px; }

/* ============================================================
   3. Cartes — base commune à tous les blocs du formulaire
   ============================================================ */
.ml_box,
.rs_box,
.pm_box,
.pm_box_disabled,
.co-card{
  background:#f3f5f6;
  border:none;
  border-radius:14px;
  box-shadow: inset 0 0 0 1px #e7e7e7;
  color:#111;
  padding:20px
}

/* cartes cliquables (livraison / adresses / paiement) */
.ml_box,
.rs_box,
.pm_box,
.pm_box_disabled{
  display:flex;
  align-items:flex-start;
  padding:1.1rem 1.25rem;
  cursor:pointer;
}

.ml_box,
.rs_box{ width:100%; }

.pm_margins,
.ml_margins{ padding:6px !important; }

.pm_box,
.pm_box_disabled{ height:100%; gap:14px; align-items:flex-start; }
.pm_box_disabled{ cursor:default; opacity:.6; }

.ml_box:hover,
.rs_box:hover,
.pm_box:hover{
  box-shadow: inset 0 0 0 1px #e7e7e7, 0 0 0 4px #ececec !important;
}

.ml_box.active,
.rs_box.active,
.pm_box.active{
  box-shadow: inset 0 0 0 2.5px #000 !important;
  color:#000;
}

.pm_box img,
.pm_box_disabled img{ width:100px; height:auto; padding:5px; flex:0 0 auto; }

.pm_title,
.ml_title{ font-size:1.15rem; font-weight:800; display:block; }
.pm_text,
.ml_text{ font-size:.95em; margin:0 !important; padding:0 !important; }

/* ============================================================
   4. Bloc adresse (facturation / livraison)
   ============================================================ */
.co-addr{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.co-addr-body{ line-height:1.55; }
.co-addr .ui.button{ flex:0 0 auto; margin:0; }

/* ============================================================
   5. Choix livraison — grille de cartes égales
   ============================================================ */
.co-deliv .column{ display:flex; }
.co-deliv .ml_box{ flex:1; height:100%; }

/* ============================================================
   6. Garantie de transport
   ============================================================ */
.co-gtp{ margin:5px 5px 20px; font-size:1rem; }
.co-gtp #gte_text{ font-size:.8rem; margin:10px 0 0; }

/* ============================================================
   7. Moyen de paiement — carte préférée + accordéon
   ============================================================ */
.pm-pref{ margin:0 0 16px; }
.pm-pref-card{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:2px solid #111; border-radius:14px;
  padding:18px 22px; cursor:pointer;
}
.pm-pref-img{ height:34px; width:auto; flex:0 0 auto; display:block; }
.pm-pref-text{ flex:1 1 auto; min-width:0; }
.pm-pref-name{ font-weight:800; font-size:1.05rem; color:#111; }
.pm-pref-badge{
  flex:0 0 auto; background:#111; color:#fff;
  font-weight:700; font-size:.8rem; padding:8px 16px; border-radius:10px; white-space:nowrap;
}

.pm-picker-head{
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:0; background:transparent; cursor:default; text-align:left;
  font-weight:800; color:#111; line-height:1.2;
}
.pm-picker:not(.is-accordion) .pm-picker-head{ font-size:1.5rem; padding:0; margin:0 0 14px; }
.pm-picker:not(.is-accordion) .pm-picker-chevron{ display:none; }
.pm-picker.is-accordion .pm-picker-head{
  background:#f0f0f0; border-radius:14px; padding:18px 22px; font-size:1.05rem; cursor:pointer;
}
.pm-picker-chevron{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease;
}
.pm-picker-chevron i{ margin:0; line-height:1; }
.pm-picker.is-accordion:not(.is-collapsed) .pm-picker-chevron{ transform:rotate(180deg); }
.pm-picker-body{ margin-top:16px; }
.pm-picker.is-accordion.is-collapsed .pm-picker-body{ display:none; }

/* ============================================================
   8. Bouton de commande (sous les moyens de paiement)
   ============================================================ */
.co-actions{ margin-top:22px; }
.co-actions .button{ width:100%; }
/* Bouton commander */
/* Bouton commander */
.co-submit{
  background-color:var(--color-primary,#e2001a) !important; color:#fff !important;
  transition:opacity .25s ease;
}

/* état "en cours" : respiration douce, pas de spinner */
.co-submit.is-processing{
  cursor:progress !important; pointer-events:none;
  animation:co-breathe 1.6s ease-in-out infinite;
}
@keyframes co-breathe{ 0%,100%{ opacity:.92; } 50%{ opacity:.62; } }

/* points discrets après le libellé */
.co-dots::after{
  content:""; display:inline-block; width:1.2em; text-align:left;
  animation:co-dots 1.6s steps(4,end) infinite;
}
@keyframes co-dots{ 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} 100%{content:"";} }



/* ============================================================
   9. Récapitulatif (colonne de droite)
   ============================================================ */
.checkout-panel{ padding:0; border-radius:12px; }
.checkout-panel.segment{ background:#f7f7f7; }

.checkout-line{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(0,0,0,.06);
}
.checkout-line:last-child{ border-bottom:none; }
.checkout-thumb{
  position:relative; width:64px; min-width:64px; height:64px;
  border-radius:12px !important; overflow:visible; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.checkout-qtybadge{
  position:absolute; top:-6px; right:-6px;
  background:#000; color:#fff; border-radius:999px;
  min-width:22px; height:22px; font-size:12px; line-height:22px;
  text-align:center; padding:0 6px;
}
.checkout-info{ flex:1 1 auto; min-width:0; }
.checkout-title{ font-weight:700; }
.checkout-meta{ color:rgba(0,0,0,.5); font-size:.9em; margin-top:2px; }
.checkout-price{
  text-align:right; margin-left:auto; min-width:120px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.checkout-price .unit{ color:rgba(0,0,0,.55); font-size:.95em; }
.checkout-price .total{ font-weight:900; font-size:1.15em; }

.totals-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:.9rem; }
.totals-row strong{ font-weight:700; }
.totals-grand{ font-size:1rem; font-weight:900; padding-top:8px; border-top:1px solid rgba(0,0,0,.08); }

/* mkit caché par défaut */
.mkit_tab{ display:none !important; }

/* ============================================================
   10. Divers
   ============================================================ */
.maga_ck{ width:70% !important; }

.ui.userdetails.sidebar{
  width:520px !important; max-width:90vw; padding:1rem;
  z-index:9999999999; background-color:#fff;
}