/* ============================================================================
   QuantisDigitale – Checkout (Stripe + PayPal)
   Fichier : checkout.css
   Rôle    : Styles complets et responsives pour la page de paiement publique
   Auteur  : QuantisDigitale
   ========================================================================= */

/* Variables : utilise celles du thème si présentes, sinon fallback cohérent */
:root{
  --qd-primaire: var(--couleur-primaire, #2361ff);
  --qd-accent: var(--couleur-accent, #2ec4b6);
  --qd-texte: var(--couleur-texte, #22305a);
  --qd-texte-sec: var(--couleur-texte-secondaire, #3e4a67);
  --qd-bg: var(--couleur-bg, #ffffff);
  --qd-card-bg: #fff;
  --qd-radius: var(--radius, 18px);
  --qd-shadow: 0 8px 36px rgba(35,97,255,.10), 0 2px 10px rgba(34,48,90,.06);
  --qd-shadow-soft: 0 4px 18px rgba(35,97,255,.08);
  --qd-border: 1px solid #e9eef8;
  --qd-focus: 0 0 0 3px rgba(35,97,255,.18);
}

/* Layout général */
.page-checkout{
  background: var(--qd-bg);
  color: var(--qd-texte);
  padding: 2.5rem 1rem 3rem;
}

.page-checkout .container{
  width: min(1100px, 94vw);
  margin: 0 auto;
}

/* Titre principal */
.page-checkout h1{
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  margin: 0 0 1.4rem;
  color: var(--qd-primaire);
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Colonnes : résumé (aside) + formulaire */
.checkout-cols{
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.8rem;
  align-items: start;
}

/* Carte résumé pack */
.checkout-summary{
  background: var(--qd-card-bg);
  border: var(--qd-border);
  box-shadow: var(--qd-shadow);
  border-radius: var(--qd-radius);
  padding: 1.4rem 1.3rem 1.2rem;
  position: sticky;
  top: 1rem;
}

.checkout-summary h2{
  font-size: 1.12rem;
  margin: 0 0 .4rem;
  color: var(--qd-texte);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.checkout-summary h2 small{
  color: var(--qd-texte-sec);
  font-weight: 500;
  font-size: .95rem;
}

.checkout-summary .price{
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--qd-primaire);
  letter-spacing: -0.5px;
  margin: .2rem 0 1rem;
}

.checkout-summary .features{
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: .55rem;
}
.checkout-summary .features li{
  position: relative;
  padding-left: 1.3rem;
  color: var(--qd-texte-sec);
  font-size: .98rem;
}
.checkout-summary .features li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--qd-accent);
  font-weight: 700;
}

.summary-hint{
  padding: .85rem .9rem;
  background: linear-gradient(0deg, #f6f9ff, #f6f9ff);
  border: 1px dashed #dfe8ff;
  border-radius: 12px;
  margin: .3rem 0 1rem;
}
.summary-hint .note{
  margin: 0;
  color: var(--qd-texte-sec);
  font-size: .96rem;
}
.summary-hint a{
  color: var(--qd-primaire);
  text-decoration: underline;
}

/* Lien retour */
.link-back{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--qd-accent);
  text-decoration: none;
  margin-top: .4rem;
}
.link-back:hover{ text-decoration: underline; }

/* Colonne formulaire */
.checkout-form-wrap{
  background: var(--qd-card-bg);
  border: var(--qd-border);
  box-shadow: var(--qd-shadow);
  border-radius: var(--qd-radius);
  padding: 1.2rem 1.2rem 1rem;
}

/* Formulaire */
.checkout-form{
  display: grid;
  gap: 1.1rem;
}

.checkout-form fieldset{
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.checkout-form legend{
  font-weight: 700;
  color: var(--qd-texte);
  margin-bottom: .2rem;
  font-size: 1.02rem;
}

.checkout-form label{
  display: grid;
  gap: .45rem;
  font-weight: 600;
  color: var(--qd-texte);
  font-size: .98rem;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"],
.checkout-form select{
  appearance: none;
  width: 100%;
  padding: .8rem .95rem;
  border-radius: 12px;
  border: 1.5px solid #dde6fc;
  background: #fff;
  color: var(--qd-texte);
  font-size: 1rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  box-shadow: 0 1px 8px rgba(35,97,255,.05);
}
.checkout-form select{
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb3d4 50%),
    linear-gradient(135deg, #9fb3d4 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 22px) calc(1.15em),
    calc(100% - 14px) calc(1.15em),
    calc(100% - 2.5rem) 0.3rem;
  background-size: 8px 8px, 8px 8px, 1px 2.4rem;
  background-repeat: no-repeat;
}

.checkout-form input:focus,
.checkout-form select:focus{
  border-color: var(--qd-primaire);
  box-shadow: var(--qd-focus);
}

.checkout-form .checkbox{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 500;
  color: var(--qd-texte-sec);
}
.checkout-form .checkbox input{
  transform: translateY(.15rem);
}

/* Boutons */
.btn-choisir{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.15rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--qd-primaire), var(--qd-accent));
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--qd-shadow-soft);
  transition: transform .15s ease, filter .2s ease;
}
.btn-choisir:hover{ transform: translateY(-1px) scale(1.01); filter: saturate(1.08); }

.btn-secondaire{
  background: #f1f5ff;
  color: var(--qd-primaire);
  border: 1px solid #dfe6ff;
}
.btn-secondaire:hover{ filter: none; transform: translateY(-1px); }

/* Confiance / mentions */
.trust{
  margin: .6rem 0 0;
  color: var(--qd-texte-sec);
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* État sans checkout (apps désactivées, devis, etc.) */
.no-checkout{
  padding: 1rem 1rem 1.1rem;
  background: #f9fbff;
  border: 1.5px dashed #dfe6ff;
  border-radius: 14px;
  color: var(--qd-texte-sec);
}
.no-checkout p{ margin: 0 0 .8rem; }

/* Messages (succès / erreur si besoin) */
.msg{
  padding: .8rem 1rem;
  border-radius: 10px;
  margin: .3rem 0 .2rem;
  font-size: .96rem;
}
.msg.ok{
  background: #e9fbf2;
  color: #0e9b72;
  border: 1px solid #b7f2dc;
}
.msg.err{
  background: #fff0f0;
  color: #bb2f2f;
  border: 1px solid #ffd7d7;
}

/* Petites améliorations typographiques */
.checkout-form ::placeholder{ color: #a7b3c9; }
.checkout-form input[disabled],
.checkout-form select[disabled]{
  background: #f6f7fb;
  color: #9aa6bf;
  cursor: not-allowed;
}

/* Responsivité */
@media (max-width: 980px){
  .checkout-cols{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .checkout-summary{ position: static; }
}

@media (max-width: 560px){
  .page-checkout{ padding: 1.6rem .6rem 2.2rem; }
  .checkout-summary,
  .checkout-form-wrap{
    border-radius: 14px;
    padding: 1rem .9rem .9rem;
  }
  .btn-choisir{ width: 100%; }
}

/* Mode sombre – cohérent avec ton thème existant
html.dark .page-checkout,
body.dark .page-checkout{
  --qd-card-bg: var(--dark-couleur-block, #202944);
  --qd-bg: var(--dark-couleur-bg, #181f2f);
  --qd-texte: var(--dark-couleur-texte, #e4e8f7);
  --qd-texte-sec: #b7c2db;
  --qd-shadow: 0 8px 28px rgba(0,0,0,.35);
  --qd-border: 1px solid rgba(255,255,255,.06);
  --qd-focus: 0 0 0 3px rgba(53,117,255,.28);
}

.dark .checkout-summary .features li::before{ color: var(--qd-accent); }
.dark .summary-hint{
  background: #1c263b;
  border-color: #2b3a5c;
}
.dark .no-checkout{ background: #1b2336; border-color: #2a3653; }
.dark .btn-secondaire{ background: #1f2a44; border-color: #2a3653; color: #cfe0ff; } */