/* =========================================
= CHECKOUT — étapes accordéon (page valider ma commande)
========================================= */

.checkout-steps {
  display: grid;
  gap: 0.75rem;
}

/* Carte d'étape — un <details> stylé */
.checkout-step {
  background: var(--secondary);
  border-radius: 1px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.checkout-step[open] {
  border-color: var(--primary-40);
}

.checkout-step__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.875rem 1rem 0;
  padding-bottom: 1rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  list-style: none;
}
.checkout-step__head::-webkit-details-marker { display: none; }

.checkout-step[open] .checkout-step__head {
  border-bottom: 1px solid var(--accent);
}
/* Titre */
.checkout-step__title {
  flex: 1 1 auto;
  color: var(--primary);
}

/* Chevron qui pivote selon l'état [open] */
.checkout-step__chevron {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.checkout-step[open] .checkout-step__chevron {
  transform: rotate(-135deg);
}

/* Corps : padding intérieur, grille de champs */
.checkout-step__body {
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
}

/* Texte d'aide secondaire (« Vous avez déjà un compte ? Se connecter ») */
.checkout-step__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--primary-60);
}

/* Ligne email verrouillée pour user connecté (ou e-mail validé invité) */
.checkout-locked-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  background: var(--muted);
  border-radius: 1px;
  font-size: var(--text-sm);
}
.checkout-locked-line a {
  margin-left: auto;
  color: var(--primary);
  text-decoration: underline;
  font-size: var(--text-sm);
}

/* Field "inline" pour la checkbox "Expédier à une autre adresse" */
.checkout-step__body .field--inline {
  margin: 0 0 0.25rem 0;
}
.checkout-step__body .field--inline label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  cursor: pointer;
}

/* Sous-titre dans une étape qui regroupe plusieurs blocs (facturation + livraison) */
.checkout-substep__title {
  margin: 0;
  font-family: var(--SM);
  font-size: var(--text-sm);
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
}
.checkout-substep__title:not(:first-child) {
  margin-top: 1rem;
}


/* Sous-bloc facturation : grille avec gap cohérent */
.checkout-substep--billing {
  display: grid;
  gap: 1.25rem;
}

/* Sous-bloc informations complémentaires : même rythme */
.checkout-substep--order-info {
  display: grid;
  gap: 1.25rem;
}

/* Bloc des champs livraison (caché par défaut, montré quand la case est cochée) */
.checkout-shipping-fields {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.checkout-shipping-fields[hidden] {
  display: none;
}

/* Ligne de boutons en bas de chaque étape (Continuer) */
.checkout-step__actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}
.checkout-step__actions .button {
  width: 100%;
  min-width: 10rem;
}

/* Étape complétée : masque le bouton "Valider" (le commit a déjà eu lieu) */
.checkout-step[data-step-completed] .checkout-step__actions {
  display: none;
}

/* Étape verrouillée : pas cliquable, opacité réduite */
.checkout-step[data-step-disabled] {
  opacity: 0.55;
  pointer-events: none;
}
.checkout-step[data-step-disabled] .checkout-step__head {
  cursor: not-allowed;
}

/* Étape complétée : badge marron remplacé par un check */
.checkout-step[data-step-completed] .checkout-step__num {
  background: var(--success);
  color: var(--secondary);
}
.checkout-step[data-step-completed] .checkout-step__num::after {
  content: "";
  display: inline-block;
  width: 0.65rem;
  height: 0.4rem;
  border-left: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: translateY(-1px) rotate(-45deg);
}
.checkout-step[data-step-completed] .checkout-step__num > * { display: none; }

/* Texte du num caché quand complété (on garde le HTML mais le check le remplace) */
.checkout-step[data-step-completed] .checkout-step__num {
  font-size: 0; /* cache le chiffre, le ::after montre le check */
}

/* Login swap dans l'étape 1 */
[data-step1-mode][hidden] { display: none; }
[data-step1-mode="login"] .login-step__error {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-xs);
}

/* Widget de connexion sur la page checkout (paiement) */
.checkout-login-widget {
  margin: 0 0 1.5rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent);
  border-left: 3px solid var(--primary);
  border-radius: 1px;
  background: var(--secondary);
  font-family: var(--SR);
}
.checkout-login-bar {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
}
.checkout-login-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--accent);
  display: grid;
  gap: 0.75rem;
}
.checkout-login-panel[hidden] { display: none; }

/* Lien secondaire dans les flows d'auth (créer un compte, mot de passe oublié, etc.)
   Style sobre : petit, souligné, sans cadre ni fond. */
.link-secondary {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--primary);
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}
.link-secondary:hover { opacity: 0.75; }

/* Ligne de lien sous un bouton primaire (mot de passe oublié, switch vers register, etc.) */
.auth-link-row {
  margin: 0.625rem 0 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--primary-60);
}
.auth-link-row .link-secondary { margin-left: 0.25rem; }
.login-step__error {
  margin: 0;
  color: var(--danger);
  font-size: var(--text-xs);
}
.login-step__email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--muted);
  border-radius: 1px;
  font-size: var(--text-sm);
  word-break: break-all;
}
.login-step__edit {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.myacc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1rem 0 2rem;
}

/* Email miroir (readonly) dans l'étape 2 : fond muet pour signaler qu'il n'est pas éditable ici */
#billing_email_display,
.checkout-form input#billing_email_display {
  background: var(--muted) !important;
  cursor: not-allowed;
}

.form { display: grid; gap: 0.875rem; }

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="tel"],
.form input[type="search"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 0.0625rem solid var(--primary-40);
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0);
  color: var(--primary);
  font-size: var(--text-sm);
}
.form textarea { min-height: 6rem; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}
.tab {
  appearance: none;
  border: 0.0625rem solid var(--accent);
  background: var(--secondary);
  color: var(--primary);
  padding: 0.5rem 0.875rem;
  border-radius: 1px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab.is-active,
.tab:focus-visible {
  outline: none;
  background: var(--primary);
  color: var(--secondary);
  border-color: var(--primary);
}
.tabpanels { margin-top: 1rem; }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

/* Bannière header page Mon Compte */
.acc-banner {
  position: relative;
  margin-bottom: 2rem;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 32 / 9;
  background: var(--primary);
}
.acc-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.acc-banner__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.45)
  );
}
.acc-banner__title {
  margin: 0;
  color: var(--secondary);
  font-family: var(--font-display);
  font-size: var(--text-display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .acc-banner {
    aspect-ratio: 16 / 9;
    margin-bottom: 1.25rem;
  }
}

/* Layout page Mon Compte : tabs à gauche, panneaux à droite */
.acc-layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 2rem;
  align-items: start;
}
.acc-layout .tabs {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.375rem;
  margin: 0;
  position: sticky;
  top: 1rem;
}
.acc-layout .tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  text-align: left;
}
/* Pastille de l'onglet actif, alignée en bout de ligne à droite */
.acc-layout .tab::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
}
.acc-layout .tab.is-active::after {
  opacity: 1;
}
.acc-layout .tabpanels {
  margin-top: 0;
  min-width: 0; /* permet aux contenus larges (sliders, tableaux) de rétrécir */
}

@media (max-width: 48rem) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .tab { flex: 0 0 auto; white-space: nowrap; }

  /* Sur mobile : on retombe sur l'empilement vertical (tabs au-dessus, panneaux en-dessous) */
  .acc-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .acc-layout .tabs {
    flex-direction: row;
    position: static;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .acc-layout .tab {
    text-align: center;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* TODO: vérifier — sélecteur non utilisé (.stats) */
/*
.stats {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.stats li {
  border: 0.0625rem solid var(--accent);
  border-radius: 3px;
  background: var(--secondary);
  padding: 0.875rem;
  display: grid;
  gap: 0.25rem;
  text-align: center;
}
.stats strong { font-size: var(--text-lg); }
*/

/* Commandes */
.orders {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  border: 0.0625rem solid var(--accent);
  border-radius: 3px;
  overflow: hidden;
  background: var(--secondary);
}

.orders-head,
.orders-row {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr 1fr 1fr 1.4fr 1fr;
  gap: 1rem;
  padding: 0.875rem 1rem;
  align-items: center;
}
.orders-head {
  font-weight: 600;
  background: var(--accent);
  font-family: var(--SR);
}
.orders-row + .orders-row { border-top: 0.0625rem solid var(--accent); }

.orders-row .button {
  justify-self: start;
  padding: 0.4rem 0.75rem;
  font-size: var(--text-sm);
}

.orders-row .order-num {
  font-family: var(--SM);
  color: var(--primary);
  text-decoration: none;
}
.orders-row .order-num:hover { text-decoration: underline; }

/* Pastille de statut commande */
.order-status {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.order-status--processing { background: var(--secondary-c); color: var(--warning-c); }
.order-status--completed  { background: var(--success-bg); color: var(--success); }
.order-status--on-hold    { background: var(--accent); color: var(--primary-60); }
.order-status--cancelled,
.order-status--failed,
.order-status--refunded   { background: var(--danger-bg); color: var(--danger); }
.order-status--pending    { background: var(--accent); color: var(--primary); }

.order-tracking {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  border-bottom: 0.0625rem dashed currentColor;
}
.order-tracking:hover { opacity: 0.8; }
.order-tracking__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.order-tracking--empty {
  color: var(--primary-60);
  font-size: var(--text-sm);
}

/* Bouton facture */
.btn-facture {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 0.0625rem solid var(--accent);
  border-radius: 1px;
  background: var(--secondary);
  color: var(--primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background .15s ease, border-color .15s ease;
}
.btn-facture:hover { background: var(--accent); border-color: var(--primary); }
.btn-facture svg { flex: 0 0 auto; }

.btn-facture--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--secondary);
  border-color: var(--muted);
  color: var(--secondary);
  user-select: none;
}
.btn-facture--disabled:hover {
  background: var(--secondary);
  border-color: var(--muted);
}

/* Adresses */
.addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.addr-grid .card p { white-space: pre-wrap; }

.addr-card {
  border: 0.0625rem solid var(--accent);
  border-radius: 1px;
  background: var(--secondary);
  padding: 1.25rem;
}
.addr-card h3 { margin: 0 0 0.75rem; }
.addr-card__view p { margin: 0 0 1rem; }
.addr-card__edit { margin: 0; }
.addr-card__edit .field label {
  font-size: var(--text-sm);
  color: var(--primary-60);
  margin-bottom: 0.25rem;
  display: block;
}
.addr-card__edit input,
.addr-card__edit select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0.0625rem solid var(--accent);
  border-radius: 1px;
  background: var(--secondary);
  font: inherit;
}
.addr-card__edit input:focus,
.addr-card__edit select:focus {
  outline: none;
  border-color: var(--primary);
}

@media (max-width: 64rem) {
  .myacc-grid { grid-template-columns: 1fr; }
  .addr-grid { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  /* Liste commandes en cards empilées sur mobile */
  .orders-head { display: none; }
  .orders-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "num     date"
      "status  total"
      "track   track"
      "action  action";
    gap: 0.5rem;
    padding: 1rem;
  }
  .orders-row > :nth-child(1) { grid-area: num; }
  .orders-row > :nth-child(2) { grid-area: date; justify-self: end; color: var(--primary-60); font-size: var(--text-sm); }
  .orders-row > :nth-child(3) { grid-area: status; }
  .orders-row > :nth-child(4) { grid-area: total; justify-self: end; font-weight: 600; }
  .orders-row > :nth-child(5) { grid-area: track; padding-top: 0.25rem; border-top: 0.0625rem solid var(--accent); }
  .orders-row > :nth-child(6) { grid-area: action; justify-self: stretch; }
  .orders-row .btn-facture { width: 100%; justify-content: center; }
}

/* =========================================
= CHECKOUT — page valider ma commande (extrait du <style> inline du template)
========================================= */

/* Page de remerciement après commande validée */
.checkout-thankyou {
  padding: 4rem 1rem;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.checkout-thankyou h1 {
  font-size: 2rem;
  margin: 0 0 1rem;
}
.checkout-thankyou p {
  color: #666;
  line-height: 1.5;
}

/* Pastille d'état d'étape — 2 états seulement
   - Par défaut (verrouillée ou active) : --primary-40
   - Terminée                            : --primary */
.checkout-step__pastille {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-40);
  transition: background-color .2s ease;
}
.checkout-step[data-step-completed] .checkout-step__pastille {
  background: var(--primary);
}
/* Pas besoin du chevron : on retire ses anciennes règles si elles existent */
.checkout-step__chevron { display: none !important; }

/* Champs sur une même ligne (prénom+nom, code postal+ville, téléphone+email) */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field-row > .field { margin: 0; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* Étape 3 : Paiement — alignement visuel sur les autres étapes.
   Le CSS WooCommerce (plugin + main.css) cible .woocommerce-checkout-payment
   avec une spécificité élevée et ajoute fond/bordure/padding qui créent
   une "carte dans une carte" à l'intérieur de l'accordéon. On force la
   neutralisation de cette enveloppe avec !important pour gagner la cascade. */
details[data-step-id="3"] .checkout-step__body .woocommerce-checkout-payment,
details[data-step-id="3"] .checkout-step__body div#payment {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
details[data-step-id="3"] .checkout-step__body .payments {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
details[data-step-id="3"] .checkout-step__body .payments > h3,
details[data-step-id="3"] .checkout-step__body .woocommerce-checkout-payment > h3 {
  display: none !important;
}
details[data-step-id="3"] .checkout-step__body .woocommerce-checkout-payment ul.wc_payment_methods,
details[data-step-id="3"] .checkout-step__body .woocommerce-checkout-payment ul.payment_methods {
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Chaque méthode de paiement = ligne flex pour aligner radio + label
   verticalement. Le payment_box (description sous le radio) prend toute
   la largeur grâce à flex-wrap + flex-basis: 100%. */
details[data-step-id="3"] .checkout-step__body ul.wc_payment_methods > li,
details[data-step-id="3"] .checkout-step__body ul.payment_methods > li {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
}

/* Radio carré, centré verticalement avec le label.
   Vide : fond transparent + bordure grise.
   Coché : fond plein --primary. */
details[data-step-id="3"] .checkout-step__body input[name="payment_method"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  border: 1.5px solid #b3b3b3;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s ease, border-color .15s ease;
}
details[data-step-id="3"] .checkout-step__body input[name="payment_method"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

/* Label aligné au radio, payment_box (description) sur sa propre ligne */
details[data-step-id="3"] .checkout-step__body ul.wc_payment_methods > li > label,
details[data-step-id="3"] .checkout-step__body ul.payment_methods > li > label {
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
details[data-step-id="3"] .checkout-step__body .payment_box {
  flex: 0 0 100%;
}
details[data-step-id="3"] .checkout-step__body .woocommerce-checkout-payment .form-row.place-order {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0.75rem !important;
}

/* WooCommerce PayPal Payments ajoute .ppcp-hidden sur #place_order quand
   la gateway PayPal est sélectionnée, en attendant que les smart buttons
   prennent le relais. Comme on a désactivé les smart buttons sur la page
   de validation (Réglages PayPal → Smart Button Locations : Checkout
   décoché), le bouton doit rester visible pour permettre le submit
   standard "Continuer sur PayPal" (redirection vers paypal.com). */
details[data-step-id="3"] .checkout-step__body #place_order.ppcp-hidden {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* E-mail miroir (lecture seule) — repris de l'étape "Coordonnées" */
[data-billing-email-mirror] {
  background: #f5f5f5;
  color: #555;
  cursor: not-allowed;
  border-color: #e0e0e0;
}
[data-billing-email-mirror]:focus { outline: none; box-shadow: none; }

/* Toggle "Expédier à une autre adresse" — case stylisée + texte indicatif */
.ship-toggle { margin: 1.5rem 0px; }
.ship-toggle__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0.875rem 1rem;
  border: 1px solid #d9d9d9;
  border-radius: 1px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ship-toggle__row:hover { border-color: #b3b3b3; }
.ship-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ship-toggle__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid #b3b3b3;
  border-radius: 4px;
  background: #fff;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.ship-toggle__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.ship-toggle__input:checked ~ .ship-toggle__box {
  background: #111;
  border-color: #111;
}
.ship-toggle__input:checked ~ .ship-toggle__box::after { transform: rotate(45deg) scale(1); }
.ship-toggle__input:focus-visible ~ .ship-toggle__box {
  box-shadow: 0 0 0 3px rgba(17,17,17,.15);
  border-color: #111;
}
.ship-toggle__row:has(.ship-toggle__input:checked) {
  border-color: #111;
  background: #fafafa;
}
.ship-toggle__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.ship-toggle__title { font-weight: 500; color: #111; font-size: 14px; }
.ship-toggle__hint  { font-size: 12px; color: #666; }

/* Suggestions d'adresse (autocomplétion BAN) */
.field { position: relative; }
.addr-suggest {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 50;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  max-height: 260px;
  overflow-y: auto;
}
.addr-suggest[hidden] { display: none; }
.addr-suggest li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  border-bottom: 1px solid #f0f0f0;
}
.addr-suggest li:last-child { border-bottom: 0; }
.addr-suggest li[aria-selected="true"],
.addr-suggest li:hover { background: #f5f5f5; }
.addr-suggest .addr-suggest__main { display: block; font-weight: 500; color: #111; }
.addr-suggest .addr-suggest__sub  { display: block; color: #666; font-size: 12px; }