/* Proportions de la maquette « Délais Standards et Express » : tailles en % de la largeur de
   la carte (cqw), bornées pour rester lisibles dans les colonnes étroites. */
.logia-ss,
.logia-ss__popover {
  --ss-blue: #1f4fd1;
  --ss-blue-bg: #f3f6fe;
  --ss-red: #ee4a1b;
  --ss-red-bg: #fff4ef;
  --ss-navy: #121a4f;
  --ss-grey: #4d5478;
}
/* Fond propre : lisible sur tous les thèmes (fonds sombres ou texturés, ex. Fort Boyard). */
.logia-ss {
  container: ss / inline-size;
  margin: 20px 0;
  padding: clamp(12px, 2.4cqw, 22px);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(18, 26, 79, .12);
  color: var(--ss-navy);
  line-height: 1.25;
  clear: both;
}
.logia-ss__head { margin-bottom: 14px; }
.logia-ss .logia-ss__title {
  color: var(--ss-navy);
  font-size: clamp(26px, 4cqw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.logia-ss .logia-ss__subtitle {
  margin-top: 4px;
  color: #2c3466;
  font-size: clamp(16px, 2.1cqw, 21px);
}

.logia-ss__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2cqw, 20px);
}
@container ss (max-width: 560px) {
  .logia-ss__cards { grid-template-columns: 1fr; }
}

.logia-ss__card {
  container: sscard / inline-size;
  position: relative;
  border: 2px solid var(--ss-blue);
  border-radius: 14px;
  background: var(--ss-blue-bg);
  cursor: pointer;
  outline: none;
  transition: box-shadow .15s ease;
}
.logia-ss__card--priority { border-color: var(--ss-red); background: var(--ss-red-bg); }
.logia-ss__card.is-selected { box-shadow: 0 0 0 1px var(--ss-blue), 0 6px 18px rgba(31, 79, 209, .16); }
.logia-ss__card--priority.is-selected { box-shadow: 0 0 0 1px var(--ss-red), 0 6px 18px rgba(238, 74, 27, .18); }
.logia-ss__card:focus-visible { box-shadow: 0 0 0 3px rgba(18, 26, 79, .35); }
.logia-ss__card.is-disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.7); }

.logia-ss__card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(12px, 3.4cqw, 18px);
}

.logia-ss__card-head { display: flex; align-items: flex-start; gap: clamp(6px, 2cqw, 12px); }
.logia-ss__radio {
  flex: 0 0 auto;
  width: clamp(20px, 5.4cqw, 28px);
  height: clamp(20px, 5.4cqw, 28px);
  border: 2px solid var(--ss-navy);
  border-radius: 50%;
  background: #fff;
}
.logia-ss__card--standard.is-selected .logia-ss__radio { border-color: var(--ss-blue); box-shadow: inset 0 0 0 clamp(3px, 1cqw, 5px) #fff, inset 0 0 0 20px var(--ss-blue); }
.logia-ss__card--priority.is-selected .logia-ss__radio { border-color: var(--ss-red); box-shadow: inset 0 0 0 clamp(3px, 1cqw, 5px) #fff, inset 0 0 0 20px var(--ss-red); }
.logia-ss__card--priority .logia-ss__radio { border-color: var(--ss-navy); }

.logia-ss .logia-ss__icon {
  flex: 0 0 auto;
  width: clamp(58px, 22cqw, 112px);
  height: auto;
  margin-top: clamp(8px, 3cqw, 18px);
}
.logia-ss .logia-ss__name {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-top: clamp(8px, 3cqw, 18px);
  color: var(--ss-navy);
  font-size: clamp(17px, 5.8cqw, 30px);
  font-weight: 700;
  line-height: 1.18;
}
.logia-ss .logia-ss__name-main { color: var(--ss-blue); font-weight: 800; }
.logia-ss__card--priority .logia-ss__name-main { color: var(--ss-red); }

.logia-ss .logia-ss__label {
  margin-top: clamp(10px, 3.6cqw, 22px);
  color: var(--ss-blue);
  font-size: clamp(15px, 4.2cqw, 21px);
  text-align: center;
}
.logia-ss__card--priority .logia-ss__label { color: var(--ss-red); }
.logia-ss .logia-ss__date {
  margin-top: 2px;
  color: var(--ss-blue);
  font-size: clamp(22px, 7.6cqw, 38px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.logia-ss__card--priority .logia-ss__date { color: var(--ss-red); }
.logia-ss__star { margin-left: 2px; font-size: .75em; vertical-align: super; line-height: 0; }

.logia-ss .logia-ss__line {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3cqw, 16px);
  margin-top: clamp(14px, 6cqw, 34px);
  padding-bottom: clamp(10px, 3.4cqw, 18px);
  border-bottom: 1px solid rgba(18, 26, 79, .14);
  color: var(--ss-navy);
  font-size: clamp(15px, 4.1cqw, 20px);
}
.logia-ss__line img { flex: 0 0 auto; width: clamp(28px, 8cqw, 40px); height: auto; }

.logia-ss__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: clamp(10px, 3.4cqw, 18px);
}
.logia-ss .logia-ss__price {
  color: var(--ss-blue);
  font-size: clamp(22px, 7.6cqw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.logia-ss__card--priority .logia-ss__price { color: var(--ss-red); }
.logia-ss__price small { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.logia-ss__price-note {
  display: block;
  margin-top: 3px;
  color: var(--ss-grey);
  font-size: clamp(12px, 3cqw, 15px);
  font-weight: 400;
  letter-spacing: 0;
}
.logia-ss__badge {
  flex: 0 0 auto;
  padding: clamp(6px, 2cqw, 10px) clamp(10px, 3.4cqw, 18px);
  border: 1px solid #c9cddd;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 26, 79, .08);
  color: var(--ss-navy);
  font-size: clamp(14px, 3.8cqw, 19px);
  font-weight: 700;
  white-space: nowrap;
}

.logia-ss .logia-ss__unavailable,
.logia-ss .logia-ss__selected-note {
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 4px solid var(--ss-red);
  border-radius: 4px;
  background: var(--ss-red-bg);
  font-size: 14px;
}
.logia-ss .logia-ss__unavailable { border-left-color: #8a8fa8; background: #f4f5f8; }

.logia-ss__info {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 2cqw, 18px);
  margin-top: clamp(12px, 2cqw, 18px);
  padding: clamp(12px, 2cqw, 18px) clamp(14px, 2.4cqw, 24px);
  border: 1px solid #d8dbe8;
  border-radius: 12px;
  background: #f1f3f8;
}
.logia-ss .logia-ss__info-icon { flex: 0 0 auto; width: clamp(24px, 3.2cqw, 32px); height: auto; }
.logia-ss .logia-ss__info-text > div {
  color: var(--ss-grey);
  font-size: clamp(13px, 1.7cqw, 16px);
  line-height: 1.45;
}
.logia-ss .logia-ss__info-text > div + div { margin-top: 8px; }

/* Téléphone : en-tête resserré. */
@container ss (max-width: 560px) {
  .logia-ss .logia-ss__title { font-size: 22px; }
  .logia-ss .logia-ss__subtitle { font-size: 14px; }
  .logia-ss .logia-ss__info-text > div { font-size: 12px; }
}
/* Tailles du tunnel (cartes étroites), gardées sur la fiche produit. */
.logia-ss__card-inner { padding: 12px 14px; }
.logia-ss__radio { width: 20px; height: 20px; }
.logia-ss .logia-ss__icon { width: 64px; margin-top: 6px; }
.logia-ss .logia-ss__name { margin-top: 6px; font-size: 16px; }
.logia-ss .logia-ss__label { margin-top: 8px; font-size: 14px; }
.logia-ss .logia-ss__date { font-size: 22px; }
.logia-ss .logia-ss__line { margin-top: 10px; padding-bottom: 10px; font-size: 14px; }
.logia-ss__line img { width: 26px; }
.logia-ss__foot { padding-top: 10px; }
.logia-ss .logia-ss__price { font-size: 22px; }
.logia-ss__price-note { font-size: 11px; }
.logia-ss__badge { padding: 6px 10px; font-size: 13px; }

/* Pop-over Commande Prioritaire (maquette « Information Option Express ») */
.logia-ss__popover[hidden] { display: none !important; }
.logia-ss__popover {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  line-height: 1.3;
}
.logia-ss__popover-backdrop { position: absolute; inset: 0; background: rgba(18, 26, 79, .5); }
.logia-ss__popover-panel {
  container: sspop / inline-size;
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: clamp(18px, 3.4cqw, 34px) clamp(18px, 3.6cqw, 40px) clamp(16px, 3cqw, 28px);
  border: 2px solid var(--ss-red);
  border-radius: 18px;
  background: #fcf1ec;
  color: var(--ss-navy);
  box-shadow: 0 20px 60px rgba(18, 26, 79, .35);
}
.logia-ss__popover .logia-ss__popover-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ss-navy) !important;
  font-size: 30px !important;
  line-height: 36px !important;
  cursor: pointer;
}
.logia-ss__popover-head { display: flex; align-items: flex-start; gap: clamp(12px, 3cqw, 28px); }
.logia-ss__popover .logia-ss__popover-i { flex: 0 0 auto; width: clamp(48px, 8.6cqw, 80px); height: auto; }
.logia-ss__popover-titles { flex: 1 1 auto; min-width: 0; padding-right: 26px; }
.logia-ss__popover .logia-ss__popover-close svg { display: block; margin: auto; pointer-events: none; }
.logia-ss__popover .logia-ss__popover-box { flex: 0 0 auto; width: clamp(70px, 14cqw, 130px); height: auto; margin-top: 4px; }
.logia-ss__popover .logia-ss__popover-title {
  color: var(--ss-navy);
  font-size: clamp(26px, 4.6cqw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.logia-ss__popover .logia-ss__popover-subtitle {
  margin-top: 4px;
  color: var(--ss-navy);
  font-size: clamp(18px, 3.2cqw, 29px);
  font-weight: 700;
}
.logia-ss__popover .logia-ss__popover-small { margin-top: 2px; color: var(--ss-grey); font-size: clamp(15px, 2.1cqw, 18px); }
.logia-ss__popover .logia-ss__popover-text {
  margin-top: clamp(12px, 2.4cqw, 22px);
  color: var(--ss-grey);
  font-size: clamp(16px, 2.3cqw, 21px);
  line-height: 1.4;
}
.logia-ss__popover .logia-ss__popover-text strong,
.logia-ss__popover .logia-ss__popover-commit strong { color: var(--ss-red); font-weight: 700; }
.logia-ss__popover .logia-ss__popover-commit {
  margin-top: clamp(14px, 2.6cqw, 24px);
  color: var(--ss-navy);
  font-size: clamp(17px, 2.5cqw, 23px);
  line-height: 1.4;
}
.logia-ss__popover-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 3cqw, 26px); }
.logia-ss__popover .logia-ss__btn {
  flex: 1 1 220px;
  padding: 12px 16px !important;
  border: 2px solid var(--ss-red) !important;
  border-radius: 10px !important;
  font-size: clamp(16px, 2.2cqw, 19px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  cursor: pointer;
}
.logia-ss__popover .logia-ss__btn--priority { background: var(--ss-red) !important; color: #fff !important; }
.logia-ss__popover .logia-ss__btn--priority:hover { background: #d63d12 !important; }
.logia-ss__popover .logia-ss__btn--standard { border-color: var(--ss-blue) !important; background: #fff !important; color: var(--ss-blue) !important; }

/* Tunnel : liseré des transporteurs selon le délai */
/* Le thème impose « border: none !important » via #checkout-delivery-step : il faut deux identifiants. */
body#checkout #checkout-delivery-step .delivery-options .delivery-option.logia-ss-row {
  margin: 0 0 10px !important;
  border: 2px solid #1f4fd1 !important;
  border-radius: 12px !important;
  background: #f3f6fe !important;
}
body#checkout #checkout-delivery-step .delivery-options .delivery-option.logia-ss-row--priority {
  border-color: #ee4a1b !important;
  background: #fff4ef !important;
}
.delivery-option.logia-ss-row + .js-carrier-extra-content { margin-top: -6px; margin-bottom: 12px; }
.logia-ss-hidden { display: none !important; }

/* Confirmation de commande */
.logia-ss-order {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-left: 5px solid var(--ss-order-color, #1f4fd1);
  border-radius: 6px;
  background: var(--ss-order-bg, #f3f6fe);
}
.logia-ss-order__title { font-size: 18px; font-weight: 800; color: var(--ss-order-color, #1f4fd1); margin: 0; }
.logia-ss-order__date { font-size: 24px; font-weight: 800; color: var(--ss-order-color, #1f4fd1); margin: 2px 0 6px; }
.logia-ss-order > div { margin-bottom: 4px; }
.logia-ss-order small { display: block; color: #4d5478; font-size: 12px; line-height: 1.45; }

@container sspop (max-width: 520px) {
  .logia-ss__popover .logia-ss__popover-box { display: none; }
  .logia-ss__popover .logia-ss__popover-i { width: 42px; }
  .logia-ss__popover .logia-ss__popover-title { font-size: 21px; }
  .logia-ss__popover .logia-ss__popover-subtitle { font-size: 15px; }
  .logia-ss__popover .logia-ss__popover-small { font-size: 13px; }
  .logia-ss__popover .logia-ss__popover-text { margin-top: 10px; font-size: 14px; }
  .logia-ss__popover .logia-ss__popover-commit { margin-top: 12px; font-size: 14px; }
  .logia-ss__popover .logia-ss__btn { padding: 10px 12px !important; font-size: 15px !important; }
}