/* =========================================================
   Tunnel commande V2
   Base commune à toutes les étapes
   ========================================================= */


/* =========================
   Variables de sécurité
   ========================= */

:root {
  --fc-radius-card: 22px;
  --fc-radius-card-mobile: 18px;
  --fc-radius-control: 12px;
  --fc-shadow-card: 0 14px 36px rgba(0, 0, 0, 0.08);
  --fc-shadow-card-hover: 0 14px 34px rgba(0, 0, 0, 0.10);
  --fc-shadow-button: 0 12px 28px rgba(0, 0, 0, 0.14);
  --fc-border-soft: 1px solid rgba(0, 0, 0, 0.06);
  --fc-border-medium: 1px solid rgba(0, 0, 0, 0.10);
}


/* =========================
   Structure générale
   ========================= */

.fc-anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

.fc-muted {
  color: var(--couleur-texte-secondaire);
}

.fc-nowrap {
  white-space: nowrap;
}


/* =========================
   Cartes communes
   ========================= */

.fc-card {
  width: 100%;
  background: var(--couleur-fond-bloc);
  color: var(--couleur-texte);
  border: var(--fc-border-soft);
  border-radius: var(--fc-radius-card);
  box-shadow: var(--fc-shadow-card);
  overflow: hidden;
}

/* Carte simple avec contenu directement dedans */
.fc-card--padded {
  padding: 26px 28px;
}

/* Carte simple plus compacte */
.fc-card--compact {
  padding: 22px 24px;
}

.fc-card--section {
  margin: 0 0 38px;
}

.fc-card--compact .fc-card-body {
  padding: 24px 26px;
}

.fc-card--no-shadow {
  box-shadow: none;
}

.fc-card--sticky {
  position: sticky;
  top: 120px;
}

.fc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  background: var(--couleur-fond-bloc);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.fc-card-header h1,
.fc-card-header h2,
.fc-card-header h3 {
  margin: 0;
  color: var(--couleur-texte);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.fc-card-header p {
  margin: 6px 0 0;
  color: var(--couleur-texte-secondaire);
  font-size: 15px;
  line-height: 1.45;
}

.fc-card-header strong {
  color: var(--couleur-texte);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  white-space: nowrap;
}

.fc-card-body {
  padding: 28px;
}

.fc-card-footer {
  padding: 22px 28px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* =========================
   Titres de section hors carte
   ========================= */

.fc-section-heading {
  margin: 0 0 22px;
}

.fc-section-heading h1,
.fc-section-heading h2 {
  margin: 0 0 8px;
  color: var(--couleur-texte);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
}

.fc-section-heading p {
  margin: 0;
  color: var(--couleur-texte-secondaire);
  font-size: 17px;
  line-height: 1.5;
}


/* =========================
   Barre de progression du tunnel
   ========================= */

nav#etape-commande.fc-checkout-steps {
  display: flex;
  width: 100%;
  margin: 0 0 34px;
  padding: 0;
  background: var(--couleur-fond-bloc);
  border-radius: 18px;
  box-shadow: var(--fc-shadow-card);
  overflow: hidden;
}

nav#etape-commande.fc-checkout-steps .fc-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 16px;
  background: var(--couleur-fond-bloc);
  color: var(--couleur-texte-secondaire);
  border: 0;
  border-radius: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

nav#etape-commande.fc-checkout-steps .fc-step + .fc-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  width: 1px;
  height: 50%;
  background: rgba(0, 0, 0, 0.10);
}

nav#etape-commande.fc-checkout-steps .fc-step:hover {
  color: var(--couleur-principale);
  text-decoration: none;
}

nav#etape-commande.fc-checkout-steps .fc-step--active {
  background: var(--couleur-principale);
  color: var(--couleur-texte-principale);
  font-weight: 800;
}

nav#etape-commande.fc-checkout-steps .fc-step--active:hover {
  color: var(--couleur-texte-principale);
}

nav#etape-commande.fc-checkout-steps .fc-step--active + .fc-step::before,
nav#etape-commande.fc-checkout-steps .fc-step--active::before {
  display: none;
}

nav#etape-commande.fc-checkout-steps .fc-step--disabled {
  color: var(--couleur-texte-secondaire);
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

nav#etape-commande.fc-checkout-steps .fc-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--couleur-fond-page);
  color: var(--couleur-texte-secondaire);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}

nav#etape-commande.fc-checkout-steps .fc-step-label {
  display: inline;
}

nav#etape-commande.fc-checkout-steps .fc-step--active .fc-step-number {
  background: var(--couleur-texte-principale);
  color: var(--couleur-principale);
}

nav#etape-commande.fc-checkout-steps .fc-step--disabled .fc-step-number {
  opacity: 0.85;
}

/* Responsive */

@media (max-width: 991px) {
  nav#etape-commande.fc-checkout-steps {
    margin-bottom: 28px;
    border-radius: 16px;
  }

  nav#etape-commande.fc-checkout-steps .fc-step {
    min-height: 48px;
    padding: 10px 8px;
    font-size: 14px;
  }

  nav#etape-commande.fc-checkout-steps .fc-step-number {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }
}

@media (max-width: 575px) {
  nav#etape-commande.fc-checkout-steps {
    border-radius: 14px;
  }

  nav#etape-commande.fc-checkout-steps .fc-step {
    min-height: 48px;
    padding: 10px 6px;
  }

  nav#etape-commande.fc-checkout-steps .fc-step-label {
    display: none;
  }

  nav#etape-commande.fc-checkout-steps .fc-step-number {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

/* =========================
   Boutons communs
   ========================= */

.fc-button-primary,
.fc-button-secondary,
.fc-checkout-next,
.fc-checkout-back,
.fc-final-button,
.fc-cgv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.fc-button-primary,
.fc-checkout-next,
.fc-final-button,
.fc-cgv-button {
  background: var(--couleur-principale);
  color: var(--couleur-texte-principale);
  box-shadow: var(--fc-shadow-button);
}

.fc-button-primary:hover,
.fc-checkout-next:hover,
.fc-final-button:hover,
.fc-cgv-button:hover {
  background: var(--couleur-principale-foncee);
  color: var(--couleur-texte-principale-foncee);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.fc-button-secondary,
.fc-checkout-back {
  background: transparent;
  color: var(--couleur-texte-secondaire);
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: none;
}

.fc-button-secondary:hover,
.fc-checkout-back:hover {
  background: var(--couleur-fond-doux);
  color: var(--couleur-texte);
  text-decoration: none;
}

.fc-button-primary:disabled,
.fc-button-secondary:disabled,
.fc-checkout-next:disabled,
.fc-cgv-button:disabled,
.fc-button--disabled,
.fc-checkout-next--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fc-checkout-next span,
.fc-final-button span {
  font-size: 24px;
  line-height: 1;
}

.fc-cgv-button--accepted {
  background: var(--couleur-principale-foncee);
  color: var(--couleur-texte-principale-foncee);
}


/* =========================
   Actions bas de page / bas de bloc
   ========================= */

.fc-actions,
.fc-delivery-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 34px 0 52px;
}

.fc-actions--end {
  justify-content: flex-end;
}

.fc-actions--start {
  justify-content: flex-start;
}


/* =========================
   Champs formulaires communs
   ========================= */

.fc-form-control,
.fc-card .form-control,
.fc-card .form-select {
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius-control);
  background-color: var(--couleur-fond-page);
  color: var(--couleur-texte);
  font-size: 16px;
  box-shadow: none;
}

.fc-card textarea.form-control,
textarea.fc-form-control {
  min-height: 120px;
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.45;
}

.fc-form-control:focus,
.fc-card .form-control:focus,
.fc-card .form-select:focus {
  background-color: var(--couleur-fond-bloc);
  border-color: var(--couleur-principale);
  box-shadow: 0 0 0 3px var(--couleur-accent-doux);
  outline: 0;
}

.fc-card .form-control.is-invalid,
.fc-card .form-select.is-invalid,
.fc-form-control.is-invalid {
  border-color: var(--couleur-danger);
}

.fc-card .form-control.is-valid,
.fc-card .form-select.is-valid,
.fc-form-control.is-valid {
  border-color: var(--couleur-principale);
}

.fc-field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--couleur-texte-secondaire);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fc-field-help {
  display: block;
  margin-top: 7px;
  color: var(--couleur-texte-secondaire);
  font-size: 14px;
  line-height: 1.4;
}

.fc-card .form-check-input {
  border-color: rgba(0, 0, 0, 0.25);
}

.fc-card .form-check-input:checked {
  background-color: var(--couleur-principale);
  border-color: var(--couleur-principale);
}

.fc-card .form-check-label {
  color: var(--couleur-texte);
}


/* =========================
   Alertes communes
   ========================= */

.fc-alert,
.fc-schedule-alert {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--couleur-fond-doux);
  color: var(--couleur-texte-fond-doux);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.45;
}

.fc-alert--danger {
  color: var(--couleur-danger);
}

.fc-alert--success {
  color: var(--couleur-principale-foncee);
}


/* =========================
   Liens communs
   ========================= */

.fc-link-primary {
  color: var(--couleur-principale);
  font-weight: 700;
  text-decoration: none;
}

.fc-link-primary:hover {
  color: var(--couleur-principale-foncee);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fc-link-secondary,
.fc-back-link,
.fc-update-cart {
  color: var(--couleur-texte-secondaire);
  font-size: 16px;
  text-decoration: none;
}

.fc-link-secondary:hover,
.fc-back-link:hover,
.fc-update-cart:hover {
  color: var(--couleur-principale);
  text-decoration: none;
}


/* =========================
   Cartes sélectionnables communes
   ========================= */

.fc-choice-option {
  position: relative;
}

.fc-choice-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fc-choice-card {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--couleur-fond-bloc);
  color: var(--couleur-texte);
  border: var(--fc-border-medium);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.fc-choice-card:hover {
  border-color: var(--couleur-principale);
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow-card-hover);
}

.fc-choice-input:checked + .fc-choice-card {
  border-color: var(--couleur-principale);
  background: var(--couleur-fond-doux);
  box-shadow: var(--fc-shadow-card-hover);
}

.fc-choice-card-title {
  display: block;
  margin: 0 0 6px;
  color: var(--couleur-texte);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.fc-choice-card-text {
  margin: 0;
  color: var(--couleur-texte-secondaire);
  font-size: 15px;
  line-height: 1.45;
}

.fc-choice-card-price {
  display: block;
  margin-top: 12px;
  color: var(--couleur-texte);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}


/* =========================
   Petits badges / pastilles
   ========================= */

.fc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--couleur-accent-doux);
  color: var(--couleur-texte);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.fc-badge--primary {
  background: var(--couleur-principale);
  color: var(--couleur-texte-principale);
}

.fc-badge--accent {
  background: var(--couleur-accent);
  color: var(--couleur-texte-accent);
}


/* =========================
   Totaux communs
   ========================= */

.fc-total-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px 34px 22px 24px;
  background: var(--couleur-accent-doux);
  color: var(--couleur-texte);
}

.fc-total-box span {
  color: var(--couleur-texte);
  font-size: 18px;
  font-weight: 700;
}

.fc-total-box strong {
  display: block;
  color: var(--couleur-texte);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.fc-total-box del {
  display: block;
  margin-bottom: 4px;
  color: var(--couleur-texte-secondaire);
  font-size: 16px;
  font-weight: 500;
}

/* =========================
   Résumé de commande commun
   ========================= */

.fc-order-summary {
  background: var(--couleur-fond-bloc);
  color: var(--couleur-texte);
}

.fc-order-summary--sticky {
  position: sticky;
  top: 120px;
}

/* En-tête résumé */

.fc-order-summary-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.fc-order-summary-header h2 {
  margin: 0;
  color: var(--couleur-texte);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}

/* Lignes produits / livraison / total */

.fc-summary-lines {
  padding: 22px 24px 24px;
}

.fc-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  color: var(--couleur-texte);
  font-size: 17px;
  line-height: 1.35;
}

.fc-summary-line + .fc-summary-line {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.fc-summary-line span {
  color: var(--couleur-texte);
  font-weight: 600;
}

.fc-summary-line strong {
  color: var(--couleur-texte-secondaire);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.fc-summary-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 22px 34px 22px 24px;
  background: var(--couleur-accent-doux);
  color: var(--couleur-texte);
  box-sizing: border-box;
}

.fc-summary-total span {
  color: var(--couleur-texte);
  font-size: 18px;
  font-weight: 700;
}

.fc-summary-total strong {
  display: block;
  color: var(--couleur-texte);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.fc-summary-total del {
  display: block;
  margin-bottom: 4px;
  color: var(--couleur-texte-secondaire);
  font-size: 16px;
  font-weight: 500;
}

/* Résumé compact du tunnel */

.fc-order-summary--compact .fc-summary-lines {
  padding: 22px 24px 24px;
}

.fc-order-summary--compact .fc-summary-total strong {
  font-size: 30px;
}

/* Résumé validation, jamais sticky */

.fc-order-summary--validation {
  position: static;
  top: auto;
  margin-bottom: 38px;
}

.fc-order-summary--validation .fc-order-summary-header {
  padding: 22px 28px;
}

.fc-order-summary--validation .fc-order-summary-header h2 {
  font-size: 24px;
}

.fc-order-summary--validation .fc-summary-lines {
  padding: 22px 28px 28px;
}

.fc-order-summary--validation .fc-summary-total {
  margin-top: 18px;
  padding: 24px 36px 24px 28px;
}

.fc-order-summary--validation .fc-summary-total strong {
  font-size: 34px;
}

/* Responsive résumé */

@media (max-width: 991px) {
  .fc-order-summary--sticky {
    position: static;
    top: auto;
  }
}

@media (max-width: 575px) {
  .fc-order-summary-header {
    padding: 16px 18px;
  }

  .fc-summary-lines {
    padding: 20px 18px 22px;
  }

  .fc-summary-line {
    font-size: 16px;
  }

  .fc-summary-total {
    padding: 20px 18px;
  }

  .fc-summary-total strong {
    font-size: 26px;
  }

  .fc-order-summary--validation .fc-order-summary-header {
    padding: 20px 18px;
  }

  .fc-order-summary--validation .fc-summary-lines {
    padding: 20px 18px 24px;
  }
}

/* =========================
   Compatibilité Bootstrap dans le tunnel
   ========================= */

.fc-card .card {
  border: 0;
  box-shadow: none;
}

.fc-card .card-header {
  background: transparent;
}

.fc-card .text-muted {
  color: var(--couleur-texte-secondaire) !important;
}

.fc-card .btn {
  border-radius: 12px;
}


/* =========================
   Responsive commun
   ========================= */

@media (max-width: 991px) {
  .fc-card--sticky {
    position: static;
    top: auto;
  }

  #etape-commande.fc-checkout-steps {
    margin-bottom: 38px;
    border-radius: 18px;
  }

  #etape-commande .fc-step {
    min-height: 52px;
    padding: 12px 10px;
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .fc-actions,
  .fc-delivery-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fc-actions .fc-button-primary,
  .fc-actions .fc-button-secondary,
  .fc-actions .fc-checkout-next,
  .fc-actions .fc-checkout-back,
  .fc-delivery-actions .fc-checkout-next,
  .fc-delivery-actions .fc-checkout-back {
    width: 100%;
  }
    
      .fc-card--padded {
    padding: 22px;
  }

  .fc-card--compact {
    padding: 20px;
  }
}

@media (max-width: 575px) {
  .fc-card {
    border-radius: var(--fc-radius-card-mobile);
  }

  .fc-card-header {
    display: block;
    padding: 20px 18px;
  }

  .fc-card-header h1,
  .fc-card-header h2,
  .fc-card-header h3 {
    font-size: 22px;
  }

  .fc-card-header strong {
    display: block;
    margin-top: 10px;
    font-size: 20px;
  }

  .fc-card-body {
    padding: 22px 18px;
  }

  .fc-card-footer {
    padding: 20px 18px 24px;
  }

  .fc-section-heading h1,
  .fc-section-heading h2 {
    font-size: 26px;
  }

  #etape-commande.fc-checkout-steps {
    border-radius: 16px;
  }

  #etape-commande .fc-step {
    min-height: 50px;
    padding: 10px 8px;
  }

  #etape-commande .fc-step-label {
    display: none;
  }

  #etape-commande .fc-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--couleur-fond-page);
    color: var(--couleur-texte-secondaire);
    font-size: 14px;
    font-weight: 800;
  }

  #etape-commande .fc-step--active .fc-step-number {
    background: var(--couleur-texte-principale);
    color: var(--couleur-principale);
  }

  .fc-button-primary,
  .fc-button-secondary,
  .fc-checkout-next,
  .fc-checkout-back,
  .fc-final-button,
  .fc-cgv-button {
    width: 100%;
  }

  .fc-total-box {
    padding: 20px 18px;
  }

  .fc-total-box strong {
    font-size: 26px;
  }
}