/*
 * create_account.css — Refonte create_account + address_book (Claude 2026)
 *
 * Namespacing : .dform-* (datch form) — n'affecte aucun element en dehors
 * de .dform-page (le wrapper du formulaire). Le reste du site n'est pas impacte.
 *
 * Design tokens en variables CSS au top — modifiables sans toucher au reste.
 */

.dform-page {
  /* === Design tokens ===
     Claude 2026-06-01 - Convergence terminee. Les tokens identiques au :root global
     (stylesheet.css) sont des ALIAS via var(--...) -> une seule source de verite.
     Mapping par VALEUR, pas par index (ex. --dform-space-5=24px -> --space-6, et NON
     --space-5=20px). Restent volontairement propres a dform (decision : garder) :
     error/warning + leurs fonds, et les 2 ombres. Tout le reste pointe sur le global. */
  --dform-primary:        var(--color-primary);
  --dform-primary-hover:  var(--color-primary-hover);
  --dform-primary-soft:   var(--color-primary-soft);
  --dform-primary-ring:   var(--color-primary-ring);
  --dform-accent:         var(--color-accent);

  /* Permutation 2026-05-17 (bg=blanc, panel=creme) preservee : memes valeurs cote :root global */
  --dform-bg:             var(--color-bg);
  --dform-panel:          var(--color-panel);
  --dform-panel-alt:      var(--color-panel-alt);
  --dform-border:         var(--color-border);
  --dform-border-strong:  var(--color-border-strong);
  --dform-text:           var(--color-text);
  --dform-text-muted:     var(--color-text-muted);
  --dform-text-soft:      var(--color-text-soft);

  /* error/warning + fonds : valeurs propres dform conservees (decision 2026-06-01 : garder) */
  --dform-error:          #c33a3a;
  --dform-error-bg:       #fdf0ef;
  --dform-warning:        #d68f1a;
  --dform-warning-bg:     #fdf8eb;
  --dform-success:        var(--color-success);
  --dform-success-bg:     var(--color-success-soft);

  --dform-radius-sm:      var(--radius-sm);
  --dform-radius:         var(--radius-lg);                 /* 8px (mapping par valeur) */
  --dform-radius-lg:      var(--radius-xl);                 /* 12px */

  /* ombres : valeurs propres dform conservees (decision 2026-06-01 : garder) */
  --dform-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
  --dform-shadow:         0 4px 14px rgba(15, 30, 25, 0.06);

  --dform-space-1:        var(--space-1);
  --dform-space-2:        var(--space-2);
  --dform-space-3:        var(--space-3);
  --dform-space-4:        var(--space-4);
  --dform-space-5:        var(--space-6);                   /* 24px (par valeur, pas --space-5=20) */
  --dform-space-6:        var(--space-8);                   /* 32px */
  --dform-space-7:        var(--space-12);                  /* 48px */

  --dform-font: var(--font-sans);                          /* Lato (decision 2026-06-01 : unifie sur le global) */

  /* === Layout container === */
  font-family: var(--dform-font);
  color: var(--dform-text);
  font-size: 14px;
  line-height: 1.5;
  max-width: var(--content-max);          /* 760px - source unique, partagee avec .cat-page / .pm */
  margin: 0 auto;
  padding: var(--dform-space-5) var(--dform-space-4);
  background: var(--dform-bg);
  border-radius: var(--dform-radius-lg);
}

.dform-page * {
  box-sizing: border-box;
}

/* === Separateur en haut (entre header_in_search et la page form) === */
.dform-top-separator {
  height: 1px;
  background: var(--dform-border);
  margin: 0 0 var(--dform-space-5);
  border: 0;
}

/* === Header === */
.dform-header {
  text-align: center;
  margin-bottom: var(--dform-space-5);
  padding-bottom: var(--dform-space-4);
  border-bottom: 1px solid var(--dform-border);
}

.dform-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dform-text);
}

/* Bloc messages d'erreur du tunnel (checkout_shipping / checkout_payment).
   Meme traitement visuel que .csa-error (modal carnet d'adresses) : tokens
   d'erreur du design-system. Le messageStack rend une <table> interne qu'on
   neutralise pour qu'elle se fonde dans la boite (l'icone error.gif reste). */
.dform-errors {
  background: var(--color-error-soft);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: var(--dform-space-4);
  font-size: var(--text-sm);
  /* Claude 2026-06-16 - erreurs CENTREES (comportement voulu). Les pages du tunnel heritent
     text-align:center du <td align="center"> legacy ; on le fige ici pour que la boite soit
     identique sur checkout_shipping (table messageStack) ET checkout_payment (liste Alpine). */
  text-align: center;
}
/* Table interne du messageStack (shipping), width:100% : contenu centre (text-align explicite
   sur td pour passer outre une eventuelle regle globale td{text-align:left}). */
.dform-errors table { width: 100%; border-collapse: collapse; }
.dform-errors td { color: var(--color-error); padding: 2px 0; vertical-align: middle; text-align: center; }
/* Liste des erreurs de validation client (composant Alpine checkoutPayment) : centree, sans puce. */
.dform-errors .pay-error-list { margin: 0; padding: 0; list-style: none; }
.dform-errors .pay-error-list li { margin: 2px 0; color: var(--color-error); }

/* === Sections (fieldset) === */
.dform-section {
  background: var(--dform-panel);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  padding: var(--dform-space-5) var(--dform-space-5) var(--dform-space-4);
  margin: 0 0 var(--dform-space-4);
  box-shadow: var(--dform-shadow-sm);
}

.dform-section legend {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dform-text-muted);
  padding: 0 var(--dform-space-2);
  margin-left: -var(--dform-space-2);
}

/* Claude 2026-06-15 - titres de section en vert charte + gras, scope cible
   (page account.php = .account-page, modal account = .account-modal-content,
   page contactez-nous = .contact-page). Le reste du site garde les legendes
   grises (--dform-text-muted, font-weight 600). */
.account-page .dform-section legend,
.account-modal-content .dform-section legend,
.contact-page .dform-section legend {
  color: var(--color-primary);
  font-weight: 700;
}

/* === Grid (row of fields) === */
.dform-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dform-space-4);
  margin-bottom: var(--dform-space-4);
}

.dform-row:last-child { margin-bottom: 0; }

@media (min-width: 600px) {
  .dform-row--2 { grid-template-columns: 1fr 1fr; }
  .dform-row--3 { grid-template-columns: auto 1fr 1fr; }
  .dform-row--phone { grid-template-columns: 9em 1fr; }
  .dform-row--postcity { grid-template-columns: 10em 1fr; }
}

/* === Form field === */
.dform-field {
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-1);
  min-width: 0;
}

.dform-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dform-text);
}

.dform-required {
  color: var(--dform-accent);
  margin-left: 2px;
  font-weight: 600;
}

.dform-help {
  font-size: 0.75rem;
  color: var(--dform-text-soft);
  line-height: 1.35;
}

/* Claude 2026-09-11 - Unified field styling: apply dform-section visual to dform-field
   (bordered container, panel bg, small uppercase label) without restructuring HTML.
   Used for: Civilité, Pays, Ville, Adresse, Téléphone, et toggles unifiés. */
.dform-field--sectioned,
.dform-float > fieldset {
  position: relative;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  padding: var(--dform-space-4) var(--dform-space-4) var(--dform-space-3);
  margin: var(--dform-space-2) 0 0;
  gap: var(--dform-space-2);
}

/* Label a cheval sur le trait (rendu legend natif) : le fond panel masque la bordure. */
.dform-field--sectioned > .dform-label,
.dform-float > fieldset > legend {
  position: absolute;
  top: 0;
  left: var(--dform-space-3);
  transform: translateY(-50%);
  padding: 0 var(--dform-space-1);
  background: var(--dform-panel);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dform-text);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

/* Login — lien "mot de passe oublié" sous le champ mot de passe (Claude 2026-06-25).
   Mise en page locale uniquement (espacement via token, couleur du lien laissée par
   défaut du thème). */
.dform-login-forgot {
  margin: var(--dform-space-3) 0 0;
  text-align: center;
  font-size: 0.8125rem;
}

.dform-counter {
  font-size: 0.7rem;
  color: var(--dform-text-soft);
  align-self: flex-end;
  font-variant-numeric: tabular-nums;
}

.dform-counter--warn { color: var(--dform-warning); font-weight: 500; }
.dform-counter--err  { color: var(--dform-error); font-weight: 600; }

/* === Inputs === */
.dform-input,
.dform-select,
.dform-textarea {
  font: inherit;
  color: var(--dform-text);
  background: #ffffff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  padding: 0.55em 0.75em;
  width: 100%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  min-height: 2.6em;
}

.dform-input::placeholder,
.dform-textarea::placeholder {
  color: var(--dform-text-soft);
  opacity: 0.85;
}

.dform-input:hover,
.dform-select:hover,
.dform-textarea:hover {
  border-color: var(--dform-border-strong);
}

.dform-input:focus,
.dform-select:focus,
.dform-textarea:focus {
  outline: none;
  border-color: var(--dform-primary);
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

.dform-input--invalid,
.dform-select--invalid,
.dform-textarea--invalid {
  border-color: var(--dform-error);
  background: var(--dform-error-bg);
}

.dform-input--invalid:focus,
.dform-select--invalid:focus,
.dform-textarea--invalid:focus {
  box-shadow: 0 0 0 3px rgba(195, 58, 58, 0.22);
}

.dform-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235c5953' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  padding-right: 2em;
}

.dform-input[readonly] {
  background: var(--dform-panel-alt);
  color: var(--dform-text-muted);
}

/* === Radio group (civilité) === */
.dform-radio-group {
  display: inline-flex;
  background: #ffffff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  padding: 2px;
  min-height: 2.6em;
  align-items: stretch;
}

.dform-radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dform-radio-group label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--dform-space-3);
  font-size: 0.875rem;
  color: var(--dform-text-muted);
  border-radius: calc(var(--dform-radius-sm) - 1px);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
  min-width: 3em;
}

.dform-radio-group input[type="radio"]:checked + label {
  background: var(--dform-primary);
  color: #fff;
}

.dform-radio-group input[type="radio"]:focus-visible + label {
  box-shadow: 0 0 0 2px var(--dform-primary-ring);
}

/* === Checkbox === */
.dform-check {
  display: flex;
  align-items: flex-start;
  gap: var(--dform-space-2);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--dform-text);
}

.dform-check input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--dform-primary);
  margin-top: 0.15em;
  flex-shrink: 0;
}

/* === Inline error / warning under field === */
.dform-msg {
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.dform-msg--error {
  color: var(--dform-error);
}

.dform-msg--warning {
  color: var(--dform-warning);
}

.dform-msg--warning button,
.dform-msg--warning a {
  background: none;
  border: none;
  color: var(--dform-warning);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0 2px;
}

/* === Global error stack (top) — only for non-mappable errors === */
.dform-errors {
  background: var(--dform-error-bg);
  border: 1px solid var(--dform-error);
  border-radius: var(--dform-radius);
  padding: var(--dform-space-3) var(--dform-space-4);
  margin-bottom: var(--dform-space-4);
  color: var(--dform-error);
  font-size: 0.875rem;
}

.dform-errors ul {
  margin: 0;
  padding: 0 0 0 1.2em;
}

.dform-errors li + li { margin-top: 4px; }

/* === Phone input combo === */
.dform-phone {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: var(--dform-space-2);
}

.dform-phone .dform-select {
  font-variant-numeric: tabular-nums;
}

/* === Accordion (optional sections) === */
/* .dform-veh-section : variante SANS accordeon (page dediee account_vehicules_edit) —
   meme chrome panel que .dform-accordion mais sans <summary>/croix de pliage. */
.dform-accordion,
.dform-veh-section {
  background: var(--dform-panel);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  padding: 0;
  margin: 0 0 var(--dform-space-4);
  overflow: hidden;
}

.dform-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dform-space-4) var(--dform-space-5);
  cursor: pointer;
  list-style: none;
  background: var(--dform-panel-alt);
  border-bottom: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dform-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dform-accordion-summary::-webkit-details-marker { display: none; }

.dform-accordion-summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--dform-text-soft);
  transition: transform 0.2s;
  line-height: 1;
}

.dform-accordion[open] .dform-accordion-summary {
  border-bottom-color: var(--dform-border);
}

.dform-accordion[open] .dform-accordion-summary::after {
  transform: rotate(45deg);
}

.dform-accordion-body {
  padding: var(--dform-space-5);
}

/* === Submit area === */
.dform-submit-area {
  margin-top: var(--dform-space-5);
  padding-top: var(--dform-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-3);
}

.dform-btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--dform-radius-sm);
  padding: 0.75em 1.5em;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
  /* Claude 2026 - uniformisation : un <a class="dform-btn"> se comporte exactement
     comme un <button class="dform-btn"> (rendu inline-block centre, sans soulignement). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.dform-btn:active { transform: translateY(1px); }

.dform-btn--primary {
  background: var(--dform-primary);
  color: #fff;
  width: 100%;
  font-size: 0.95rem;
  padding: 0.85em 1.5em;
  box-shadow: 0 1px 3px rgba(15, 110, 84, 0.25);
}

.dform-btn--primary:hover {
  background: var(--dform-primary-hover);
}

/* Claude 2026 - un <a class="dform-btn"> NE doit PAS adopter la couleur (#006600) ni le
   soulignement du lien global "A:hover" au survol : on garde le rendu bouton (fond qui
   fonce, texte inchange), identique a un <button>. Spécificité (0,2,x) > A:hover (0,1,1). */
.dform-btn--primary:hover,
.dform-btn--primary:focus { color: #fff; }
.dform-btn--danger:hover,
.dform-btn--danger:focus { color: #fff; }
.dform-btn--ghost:hover,
.dform-btn--ghost:focus { color: var(--dform-text); }
a.dform-btn:hover,
a.dform-btn:focus,
a.dform-btn:visited { text-decoration: none; }

.dform-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dform-primary-ring), 0 1px 3px rgba(15, 110, 84, 0.25);
}

@media (min-width: 600px) {
  .dform-btn--primary {
    width: auto;
    min-width: 14em;
    align-self: center;
  }
}

/* === Animation auto-remplissage ville === */
@keyframes dform-flash-success {
  0%   { background: rgba(45, 132, 89, 0.18); border-color: var(--dform-success); }
  100% { background: #ffffff; border-color: var(--dform-border); }
}

.dform-flash-success {
  animation: dform-flash-success 1.2s ease-out;
}

/* === Postal lookup state hints === */
.dform-postal-hint {
  font-size: 0.72rem;
  color: var(--dform-text-soft);
  margin-top: 2px;
}

.dform-postal-hint--err { color: var(--dform-warning); }

/* === Voiture (custom datch.fr) === */
.dform-cars-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.dform-cars-table th,
.dform-cars-table td {
  padding: var(--dform-space-2);
  text-align: left;
  border-bottom: 1px solid var(--dform-border);
}

/* === Cartes adresse (address_book listing — Claude 2026) === */
.dform-card {
  background: #fff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  padding: var(--dform-space-4);
  margin-bottom: var(--dform-space-3);
  box-shadow: var(--dform-shadow-sm);
}

.dform-card:last-child { margin-bottom: 0; }

.dform-card--primary {
  border-color: var(--dform-primary);
  border-left: 4px solid var(--dform-primary);
  background: var(--dform-primary-soft);
}

.dform-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--dform-space-3);
  margin-bottom: var(--dform-space-3);
}

.dform-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--dform-text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dform-space-2);
}

.dform-card-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--dform-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dform-card-body {
  font-size: 0.92rem;
  color: var(--dform-text-muted);
  line-height: 1.55;
}

.dform-card-tel {
  display: inline-block;
  margin-top: 4px;
  color: var(--dform-text);
  font-weight: 500;
}

.dform-card-actions {
  display: flex;
  gap: var(--dform-space-2);
  flex-shrink: 0;
}

.dform-card-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4em 0.9em;
  border-radius: var(--dform-radius-sm);
  border: 1px solid var(--dform-border);
  background: #fff;
  color: var(--dform-text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.dform-card-btn:hover {
  background: var(--dform-panel);
  border-color: var(--dform-border-strong);
}

.dform-card-btn--edit:hover {
  border-color: var(--dform-primary);
  color: var(--dform-primary);
}

.dform-card-btn--delete:hover {
  border-color: var(--dform-error);
  color: var(--dform-error);
  background: var(--dform-error-bg);
}

.dform-card-description {
  margin: var(--dform-space-3) 0 0;
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  line-height: 1.5;
}

.dform-card-footer-note {
  text-align: center;
  margin-top: var(--dform-space-5);
  font-size: 0.78rem;
  color: var(--dform-text-soft);
}

@media (max-width: 480px) {
  .dform-card-head {
    flex-direction: column;
    align-items: stretch;
  }
  .dform-card-actions {
    justify-content: flex-end;
  }
}

/* Animation fade-out lors de la suppression AJAX */
.dform-card-leave {
  transition: opacity 0.25s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease;
  overflow: hidden;
}
.dform-card-leave-start {
  opacity: 1;
  max-height: 400px;
}
.dform-card-leave-end {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

[x-cloak] { display: none !important; }

/* === Modal confirmation suppression (address_book) === */
.ab-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}

.ab-modal {
  background: #fff;
  border-radius: var(--dform-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  max-width: 460px;
  width: 100%;
  padding: var(--dform-space-5);
  font-family: var(--dform-font);
  color: var(--dform-text);
}

.ab-modal-title {
  margin: 0 0 var(--dform-space-3);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--dform-text);
}

.ab-modal-body {
  margin: 0 0 var(--dform-space-3);
  font-size: 0.92rem;
  color: var(--dform-text-muted);
  line-height: 1.5;
}

.ab-modal-preview {
  background: var(--dform-panel);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  padding: var(--dform-space-3) var(--dform-space-4);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: var(--dform-space-4);
  color: var(--dform-text);
}

.ab-modal-error {
  background: var(--dform-error-bg);
  border: 1px solid var(--dform-error);
  color: var(--dform-error);
  border-radius: var(--dform-radius-sm);
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-bottom: var(--dform-space-3);
}

.ab-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--dform-space-2);
  margin-top: var(--dform-space-2);
}

/* Claude 2026-06-25 - boutons compacts dans les actions de modal (langue preferee). */
.ab-modal-btn {
  width: auto;
  min-width: 0;
}

.ab-modal-btn-cancel {
  background: var(--dform-panel-alt);
  color: var(--dform-text);
  width: auto;
  min-width: 0;
}

.ab-modal-btn-danger {
  background: var(--dform-error);
  width: auto;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(195, 58, 58, 0.25);
}

.ab-modal-btn-danger:hover {
  background: #a72f2f;
}

/* === Address autocomplete dropdown (BAN, FR uniquement) === */
.aa-wrap {
  position: relative;
}

.aa-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
}

.aa-suggestion {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--dform-text);
  border-bottom: 1px solid var(--dform-panel);
  line-height: 1.4;
}

.aa-suggestion:last-child {
  border-bottom: none;
}

.aa-suggestion:hover,
.aa-suggestion--selected {
  background: var(--dform-primary-soft);
  color: var(--dform-primary);
}

/* === Toast de succes apres suppression === */
.ab-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dform-success);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--dform-radius);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(45, 132, 89, 0.35);
  z-index: 10001;
  max-width: 90vw;
}

.dform-cars-table th {
  font-weight: 500;
  color: var(--dform-text-muted);
  font-size: 0.78rem;
}

.dform-cars-table .dform-select { font-size: 0.85rem; padding: 0.4em 0.6em; min-height: 2.4em; }

/* ==========================================================================
   Utilitaires layout / boutons (Claude 2026-05-17)
   ==========================================================================
   Modificateurs de classes existantes pour remplacer les style="..." inline
   les plus repetes a travers les templates dform-page. */

/* Submit area en ligne (par defaut = colonne) */
.dform-submit-area--row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--dform-space-3);
}

/* Bouton "Retour" / "Annuler" : fond gris doux, largeur auto */
.dform-btn--ghost {
  background: var(--dform-panel-alt);
  color: var(--dform-text);
  text-decoration: none;
  width: auto;
}

/* Bouton "Continuer" / soumettre en mode horizontal : largeur auto */
.dform-btn--auto { width: auto; }

/* Bouton dangereux (suppression definitive) — utilise par address_book_process */
.dform-btn--danger {
  background: var(--dform-error);
  color: #fff;
  width: auto;
  text-decoration: none;
}
.dform-btn--danger:hover { background: #a72f2f; }

/* Claude 2026-06-23 - bouton SECONDAIRE (contour) : action secondaire posee a cote
   d'un bouton --primary (ex. "Voir le detail" a gauche de "Suivant" sur le panier).
   Contour + texte couleur de marque, se remplit au survol comme --primary. Tokens
   existants uniquement, zero couleur en dur (sauf #fff, deja convention --primary). */
.dform-btn--secondary {
  background: #fff;
  color: var(--dform-primary);
  border-color: var(--dform-primary);
  width: auto;
  text-decoration: none;
}
.dform-btn--secondary:hover,
.dform-btn--secondary:focus {
  background: var(--dform-primary);
  color: #fff;
}
.dform-btn--secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

/* ==========================================================================
   Section voiture client — cartes vehicule (Claude 2026-05-21)
   ==========================================================================
   Composant vehiculeManager (car_picker.js), mutualise create_account /
   account_edit. Couleurs / rayons / espacements : tokens --dform-* uniquement
   (cf. regle CLAUDE.md — zero valeur de style en dur). */

/* Compteur de vehicules dans le titre de l'accordeon */
.dform-veh-count {
  font-weight: 400;
  color: var(--dform-text-soft);
  text-transform: none;
  letter-spacing: 0;
}

/* Carte d'un vehicule (base = .dform-card ; ce modificateur ne fait qu'ajuster) */
.dform-veh-card { margin-bottom: var(--dform-space-4); }

.dform-veh-card .dform-select { width: 100%; }

.dform-veh-card-head {
  display: flex;
  align-items: center;
  gap: var(--dform-space-3);
  margin-bottom: var(--dform-space-3);
}

.dform-veh-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dform-text-muted);
}

/* Claude 2026 - Titre editable inline (customers_vehicule_name).
   Claude 2026-07-06 - affordance renommage renforcee : icone crayon a gauche +
   soulignement leger au repos (signale l'editabilite d'emblee), puis bordure
   complete au hover et bordure accent + fond blanc au focus. Le placeholder
   reprend "Vehicule N" comme libelle par defaut quand le surnom est vide. */
.dform-veh-pencil {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--dform-text-muted);
  transition: color 0.15s ease;
}
.dform-veh-card-head:focus-within .dform-veh-pencil {
  color: var(--dform-accent);
}
.dform-veh-card-title-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dform-text);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--dform-border); /* soulignement leger au repos = editable */
  border-radius: var(--dform-radius-sm);
  padding: 0.15rem 0.4rem;
  margin: -0.15rem -0.4rem;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Placeholder = CTA renommage, mis en valeur en ROUGE (Claude 2026-07-06). */
.dform-veh-card-title-input::placeholder {
  color: var(--dform-error);
  font-weight: 600;
  opacity: 1;
}
/* Au focus (clic dans le champ), le texte du placeholder disparait. */
.dform-veh-card-title-input:focus::placeholder {
  color: transparent;
}
.dform-veh-card-title-input:hover {
  border-color: var(--dform-border);
}
.dform-veh-card-title-input:focus {
  border-color: var(--dform-accent);
  background: #fff;
}

/* Badge "Non enregistre" (account_edit : ligne modifiee non encore sauvee) */
.dform-veh-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dform-warning);
  border: 1px solid var(--dform-warning);
  border-radius: var(--dform-radius-sm);
  padding: 0.15em 0.6em;
}

/* Ligne d'actions d'une carte vehicule */
.dform-veh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dform-space-3);
  margin-top: var(--dform-space-3);
  padding-top: var(--dform-space-3);
  border-top: 1px solid var(--dform-border);
}

.dform-veh-msg { font-size: 0.8rem; }
.dform-veh-msg--ok { color: var(--dform-success); }
.dform-veh-msg--error { color: var(--dform-error); }

.dform-veh-add { margin-top: var(--dform-space-3); }

/* Footer "Continuer le processus de commande..." sous la submit area */
.dform-procedure-footer {
  text-align: center;
  margin: var(--dform-space-3) 0 0;
}

/* ==========================================================================
   Floating-label fields (Claude 2026-05-18)
   ==========================================================================
   Material-style outlined inputs : label dans la box, monte au focus/remplissage.
   Etats live driven par Alpine (window.dformField) : valid vert / invalid rouge.
   Additif : ne touche pas a .dform-input / .dform-select existants. */

.dform-float {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dform-float-control {
  position: relative;
  display: block;
}

/* Input / select - meme base. Padding-top genere l'espace pour le label flottant. */
.dform-float-input,
.dform-float-select {
  font: inherit;
  color: var(--dform-text);
  background: #fff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  width: 100%;
  padding: 1.45em 3em 0.55em 0.85em;
  min-height: 3.5em;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  appearance: none;
  -webkit-appearance: none;
}

/* Placeholder = espace insecable (cf. helper PHP) pour activer :placeholder-shown.
   Cache visuellement le placeholder, le label sert d'indicateur. */
.dform-float-input::placeholder {
  color: transparent;
}

.dform-float-input:hover,
.dform-float-select:hover {
  border-color: var(--dform-border-strong);
}

.dform-float-input:focus,
.dform-float-select:focus {
  outline: none;
  border-color: var(--dform-primary);
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

/* Label : position centree par defaut, flotte en haut au focus/remplissage. */
.dform-float-label {
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--dform-text-soft);
  font-size: 0.95rem;
  padding: 0 0.25em;
  background: transparent;
  transition: top 0.12s ease, font-size 0.12s ease, color 0.12s ease, background 0.12s ease;
  max-width: calc(100% - 4em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

/* Etat flottant : CSS-only via :placeholder-shown pour input/textarea,
   sinon Alpine pose .is-floating sur le wrapper (cas select). */
.dform-float-input:focus + .dform-float-label,
.dform-float-input:not(:placeholder-shown) + .dform-float-label,
.dform-float.is-floating .dform-float-label {
  top: 0;
  font-size: 0.72rem;
  color: var(--dform-text-muted);
  background: #fff;
  padding: 0 0.3em;
}

/* Asterisque required en couleur accent */
.dform-float-required {
  color: var(--dform-accent);
  margin-left: 0.15em;
  font-weight: 600;
}

/* Suffix : stack horizontal d'icones a droite. pointer-events:none par defaut
   pour laisser passer les clics au input ; les enfants reactivent. */
.dform-float-suffix {
  position: absolute;
  right: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.3em;
  pointer-events: none;
}

.dform-float-suffix > * {
  pointer-events: auto;
}

.dform-float-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.dform-float-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dform-float-icon--check { color: var(--dform-success); }
.dform-float-icon--x     { color: var(--dform-error); }
.dform-float-icon--chevron { color: var(--dform-text-soft); width: 0.7em; }

/* Bouton aide (?) : pastille ronde grise cliquable */
.dform-float-help {
  border: 0;
  background: var(--dform-text-soft);
  color: #fff;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
  line-height: 1;
  font-family: serif;
}

.dform-float-help:hover { background: var(--dform-text-muted); }

.dform-float-help:focus-visible {
  outline: 2px solid var(--dform-primary);
  outline-offset: 2px;
}

/* Bouton oeil "afficher / masquer le mot de passe", inscrit dans .dform-float-suffix.
   Utilise sur les champs password_new / password_confirmation de account_password.tpl.php. */
.dform-pwd-toggle {
  border: 0;
  background: transparent;
  color: var(--dform-text-soft);
  width: 1.4em;
  height: 1.4em;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  line-height: 0;
  transition: color 0.12s, background 0.12s;
}
.dform-pwd-toggle:hover { color: var(--dform-text); background: rgba(0,0,0,.05); }
.dform-pwd-toggle:focus-visible {
  outline: 2px solid var(--dform-primary);
  outline-offset: 2px;
}
.dform-pwd-toggle svg { width: 100%; height: 100%; display: block; }

/* Textarea floating-label : label TOUJOURS aligne en haut a gauche (jamais centre),
   sinon il flotte au milieu d'une zone potentiellement haute, ce qui est moche.
   Utilise par guestbook_submit (et reutilisable). */
.dform-float-textarea {
  min-height: 9em;
  resize: vertical;
  padding-top: 1.6em;
  padding-right: 0.85em;
  line-height: 1.4;
}
.dform-float-textarea + .dform-float-label {
  top: 0.7em;
  transform: none;
}
.dform-float-textarea:focus + .dform-float-label,
.dform-float-textarea:not(:placeholder-shown) + .dform-float-label {
  top: 0;
  font-size: 0.72rem;
  color: var(--dform-text-muted);
  background: #fff;
  padding: 0 0.3em;
}

/* === Etats validation === */
.dform-float.is-valid .dform-float-input,
.dform-float.is-valid .dform-float-select {
  border-color: var(--dform-success);
}
.dform-float.is-valid .dform-float-input:focus,
.dform-float.is-valid .dform-float-select:focus {
  box-shadow: 0 0 0 3px rgba(45, 132, 89, 0.18);
}

.dform-float.is-invalid .dform-float-input,
.dform-float.is-invalid .dform-float-select {
  border-color: var(--dform-error);
  background: var(--dform-error-bg);
}
.dform-float.is-invalid .dform-float-input:focus,
.dform-float.is-invalid .dform-float-select:focus {
  box-shadow: 0 0 0 3px rgba(195, 58, 58, 0.22);
}
.dform-float.is-invalid .dform-float-label {
  color: var(--dform-error);
}

/* Help text + msg sous la box : marge legere pour aerer */
.dform-float .dform-help,
.dform-float .dform-msg,
.dform-float .dform-postal-hint {
  margin-top: 4px;
  margin-left: 0.15em;
}

/* Cas particulier : un readonly garde le label flottant (valeur deja affichee) */
.dform-float-input[readonly] {
  background: var(--dform-panel-alt);
  color: var(--dform-text-muted);
}

/* Description en haut d'une section (sous le <legend>) */
.dform-section-intro {
  margin: 0 0 var(--dform-space-3);
  text-align: left;
}

/* ==========================================================================
   Prose juridique / CMS (.dform-prose) — Claude 2026-06-16
   Mise en forme du corps de texte long (CGV, confidentialite, livraison...)
   injecte en un seul bloc HTML (TEXT_INFORMATION). Reutilisable par toute
   page statique passee au design unifie. Tokens uniquement (zero valeur en
   dur). Texte aligne a gauche (lecture d'un document legal, pas centre).
   ========================================================================== */
.dform-prose {
  text-align: left;
  color: var(--dform-text);
  font-size: var(--text-md);
  line-height: 1.65;
}
.dform-prose p {
  margin: 0 0 var(--dform-space-4);
}
.dform-prose p:last-child {
  margin-bottom: 0;
}
/* Les intitules d'articles ("ARTICLE 1 : ...") sont des <strong> en debut de
   paragraphe : on leur donne la couleur charte pour structurer la lecture. */
.dform-prose strong {
  color: var(--dform-primary);
}
.dform-prose a {
  color: var(--dform-primary);
  text-decoration: underline;
}
.dform-prose a:hover {
  color: var(--dform-primary-hover);
}

/* ==========================================================================
   Menu de sujets (.qsn-nav) — Claude 2026-06-16
   Grille de liens du hub qui_nous_sommes (remplace l'ancien <table> de liens).
   Chips responsives ; lien actif en vert charte. Tokens uniquement (le #fff du
   lien actif suit la convention de .dform-btn--primary).
   ========================================================================== */
.qsn-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--dform-space-2);
  margin: 0 0 var(--dform-space-5);
  padding: 0;
  list-style: none;
}
.qsn-nav a {
  display: block;
  padding: var(--dform-space-3) var(--dform-space-4);
  background: var(--dform-panel);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  color: var(--dform-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.qsn-nav a:hover,
.qsn-nav a:focus-visible {
  border-color: var(--dform-primary);
  color: var(--dform-primary);
  background: var(--dform-primary-soft);
}
.qsn-nav a.is-active {
  background: var(--dform-primary);
  border-color: var(--dform-primary);
  color: #fff;                 /* convention .dform-btn--primary */
}

/* Titre du sujet selectionne, sous la grille de navigation */
.qsn-topic-title {
  margin: 0 0 var(--dform-space-4);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--dform-primary);
}

/* Menu "autres sujets" quand il est rendu SOUS le contenu (levier 2) :
   les liens actifs ne s'appliquent plus (on est deja sur le sujet), le bloc
   sert de navigation secondaire. Pas de style specifique requis, la classe
   sert de hook semantique et de point d'ancrage pour d'eventuels ajustements. */

/* Mobile : grille compacte 2 colonnes (levier 1 — Claude 2026-07-20).
   Avant, minmax(200px,1fr) retombait a UNE colonne sous ~374px de large : les
   14 chips empilees faisaient ~741px et repoussaient le contenu hors ecran.
   Deux colonnes divisent la hauteur du menu par ~2 et le hub tient sur un ecran. */
@media (max-width: 640px) {
  .qsn-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dform-space-1);
  }
  .qsn-nav a {
    padding: var(--dform-space-2) var(--dform-space-3);
    font-size: var(--text-xs);
    line-height: 1.25;
  }
}

/* ==========================================================================
   Tunnel checkout — pages dform-page hebergees dans un <td align="center">
   Le contenu herite text-align:center → on force a gauche dans la page.
   ========================================================================== */
.dform-page.ship-page,
.dform-page.ship-page .dform-card,
.dform-page.ship-page .dform-card-body,
.dform-page.ship-page .dform-section { text-align: left; }

/* ==========================================================================
   checkout_shipping_address.tpl.php — cartes adresse cliquables
   (radio cache + label = carte entiere, badge "Selectionnee" sur :checked)
   ========================================================================== */
.ship-pick { position: relative; margin-bottom: var(--dform-space-3); }

.ship-pick-input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ship-pick-input:focus-visible + .dform-card {
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

.dform-card--selectable {
  display: block;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.dform-card--selectable:hover {
  border-color: var(--dform-border-strong);
  background: #fafaf7;
}

.ship-pick-badge { display: none; }

.ship-pick-input:checked + .dform-card {
  border-color: var(--dform-primary);
  border-left: 4px solid var(--dform-primary);
  background: var(--dform-primary-soft);
}

.ship-pick-input:checked + .dform-card .ship-pick-badge {
  display: inline-block;
}

/* Actions detachees (Supprimer + Editer) en haut a droite de la carte */
.ship-pick-actions {
  position: absolute;
  top: var(--dform-space-3);
  right: var(--dform-space-3);
  z-index: 2;
  display: flex;
  gap: var(--dform-space-2);
}

/* "Supprimer" (gauche) et "Editer" (droite) : meme gabarit */
.ship-pick-edit,
.ship-pick-delete {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.35em 0.85em;
  border-radius: var(--dform-radius-sm);
  border: 1px solid var(--dform-border);
  background: #fff;
  color: var(--dform-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ship-pick-edit:hover {
  border-color: var(--dform-primary);
  color: var(--dform-primary);
  background: var(--dform-panel);
}

/* "Supprimer" : hover danger (token --dform-error) */
.ship-pick-delete:hover {
  border-color: var(--dform-error);
  color: var(--dform-error);
  background: var(--dform-error-bg);
}
.ship-pick-delete:disabled {
  opacity: 0.5;
  cursor: default;
}

/* "+ Ajouter une nouvelle adresse" centre sous les cartes */
.ship-pick-add-wrap {
  text-align: center;
  margin: 0 0 var(--dform-space-4);
}
.ship-pick-add-btn {
  display: inline-block;
  background: var(--dform-panel-alt);
  color: var(--dform-text);
  text-decoration: none;
}

/* ==========================================================================
   contact_us.tpl.php — Liste de radios "type de demande" : verticale par
   defaut, en grille auto-fit quand > 3 options. Chaque option a un cadre,
   un hover discret et un etat "is-active" prim quand selectionne (pilote
   par Alpine via :class).
   ========================================================================== */
.dform-radio-list {
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-2);
}

.dform-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dform-space-2);
}

.dform-radio-list > label,
.dform-radio-grid > label {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 0.85em;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--dform-text);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.dform-radio-list > label:hover,
.dform-radio-grid > label:hover {
  background: var(--dform-panel-alt);
  border-color: var(--dform-border-strong);
}

.dform-radio-list > label.is-active,
.dform-radio-grid > label.is-active {
  background: var(--dform-primary-soft);
  border-color: var(--dform-primary);
  color: var(--dform-primary);
  font-weight: 600;
}

/* Focus du radio natif visible meme quand il est petit : ring sur le label */
.dform-radio-list > label:focus-within,
.dform-radio-grid > label:focus-within {
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

/* ==========================================================================
   contact_us.tpl.php — Variante multi-select des cartes selectionnables
   Pattern : label = carte entiere, checkbox cachee dans le DOM, "tick" rendu
   en haut a droite. Plusieurs cartes peuvent etre cochees simultanement.
   ========================================================================== */
.dform-tickcard-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--dform-space-3);
  margin-bottom: var(--dform-space-3);
}

/* Wrapper individuel d'une carte : ETABLIT le containing block pour l'input
   masque (position:absolute). Sans ce wrapper positionne, l'input remontait
   au body et le focus apres clic faisait scroller la page vers le top.
   Pattern aligne sur .ship-pick (checkout livraison). */
.dform-tickcard-cell {
  position: relative;
}

.dform-tickcard {
  position: relative;
  display: block;
  cursor: pointer;
  text-align: left;
  background: #fff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
  padding: var(--dform-space-3);
  padding-right: 2.6em; /* place pour le tick top-right */
  box-shadow: var(--dform-shadow-sm);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.dform-tickcard:hover {
  border-color: var(--dform-border-strong);
  background: #fafaf7;
}

.dform-tickcard-input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dform-tickcard-input:focus-visible + .dform-tickcard {
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

.dform-tickcard-input:checked + .dform-tickcard {
  border-color: var(--dform-primary);
  background: var(--dform-primary-soft);
}

.dform-tickcard-tick {
  position: absolute;
  top: var(--dform-space-2);
  right: var(--dform-space-2);
  width: 1.4em;
  height: 1.4em;
  border: 2px solid var(--dform-border-strong);
  border-radius: var(--dform-radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}

.dform-tickcard-tick svg {
  width: 80%;
  height: 80%;
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s;
}

.dform-tickcard-input:checked + .dform-tickcard .dform-tickcard-tick {
  background: var(--dform-primary);
  border-color: var(--dform-primary);
}

.dform-tickcard-input:checked + .dform-tickcard .dform-tickcard-tick svg { opacity: 1; }

.dform-tickcard-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dform-text);
  margin-bottom: 0.2em;
}

.dform-tickcard-meta {
  font-size: 0.85rem;
  color: var(--dform-text-soft);
  line-height: 1.4;
}

.dform-tickcard-meta + .dform-tickcard-meta { margin-top: 0.15em; }

/* Etat vide : message centre quand pas de commandes / pas de voitures */
.dform-tickcard-empty {
  text-align: center;
  color: var(--dform-text-muted);
  font-style: italic;
  padding: var(--dform-space-3);
}

/* ==========================================================================
   contact_us.tpl.php — Upload UI : items dynamiques (+ Ajouter / Retirer)
   ========================================================================== */
.dform-upload-info {
  font-size: 0.85rem;
  color: var(--dform-text-soft);
  margin-bottom: var(--dform-space-3);
  line-height: 1.45;
}

.dform-upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-2);
  margin-bottom: var(--dform-space-3);
}

.dform-upload-item {
  display: flex;
  align-items: center;
  gap: var(--dform-space-2);
  background: var(--dform-panel);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  padding: 0.4em 0.6em;
}

.dform-upload-item input[type="file"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
}

.dform-upload-item-remove {
  background: transparent;
  border: 0;
  color: var(--dform-text-soft);
  cursor: pointer;
  padding: 0.3em 0.55em;
  border-radius: var(--dform-radius-sm);
  transition: color 0.12s, background 0.12s;
  font-size: 0.85rem;
}
.dform-upload-item-remove:hover { color: var(--dform-error); background: rgba(195, 58, 58, 0.08); }
.dform-upload-item-remove:focus-visible { outline: 2px solid var(--dform-primary); outline-offset: 1px; }

.dform-upload-add {
  background: var(--dform-panel-alt);
  border: 1px dashed var(--dform-border-strong);
  color: var(--dform-text);
  padding: 0.55em 1em;
  border-radius: var(--dform-radius-sm);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.12s, border-color 0.12s;
}
.dform-upload-add:hover { background: var(--dform-panel); border-color: var(--dform-primary); color: var(--dform-primary); }
.dform-upload-add:disabled { opacity: 0.5; cursor: not-allowed; }

.dform-upload-errors {
  background: var(--dform-error-bg);
  border: 1px solid var(--dform-error);
  border-radius: var(--dform-radius-sm);
  padding: var(--dform-space-2) var(--dform-space-3);
  margin-bottom: var(--dform-space-3);
}
.dform-upload-errors ul { margin: 0; padding-left: 1.2em; }
.dform-upload-errors li { color: var(--dform-error); font-size: 0.9rem; line-height: 1.5; }

/* Honeypot : input cache aux humains, visible aux bots (off-screen). */
.dform-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

/* ==========================================================================
   checkout_shipping.tpl.php — mode de livraison + carte adresse + checkout bar
   ========================================================================== */

/* Carte selectionnable mode de livraison */
.ship-method-pick { position: relative; margin-bottom: var(--dform-space-3); }

.ship-method-input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ship-method-input:focus-visible + .dform-card {
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}

.dform-card--method {
  display: block;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  text-align: left;
}

.dform-card--method:hover {
  border-color: var(--dform-border-strong);
  background: #fafaf7;
}

.ship-method-input:checked + .dform-card {
  border-color: var(--dform-primary);
  border-left: 4px solid var(--dform-primary);
  background: var(--dform-primary-soft);
}

.ship-method-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--dform-space-3);
  text-align: left;
}

.ship-method-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dform-text);
  text-align: left;
  flex: 1 1 auto;
}

.ship-method-cost {
  font-weight: 600;
  color: var(--dform-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.ship-method-module {
  font-size: 0.78rem;
  color: var(--dform-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--dform-space-2);
}

.ship-method-module img { vertical-align: middle; }

.ship-method-error {
  font-size: 0.85rem;
  color: var(--dform-error);
  margin-top: 4px;
  text-align: left;
}

/* Promesse d'expedition/livraison mutualisee, sous chaque mode de transport */
.ship-method-promise {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dform-success);
  background: var(--dform-success-bg);
  border-radius: var(--dform-radius-sm);
  text-align: left;
}

/* Carte adresse de livraison (read-only) + bouton "Changer" top-right */
.ship-addr-card { position: relative; }
.ship-addr-card .dform-card-body {
  margin-right: 9em; /* place pour le bouton "Changer" */
  text-align: left;
}
.ship-addr-change-btn {
  position: absolute;
  top: var(--dform-space-3);
  right: var(--dform-space-3);
  z-index: 2;
}

/* Barre des etapes du checkout (4 etapes en pied de page) */
.ship-checkout-bar {
  margin-top: var(--dform-space-5);
  padding-top: var(--dform-space-4);
  border-top: 1px solid var(--dform-border);
}

/* ==========================================================================
   checkout_payment.tpl.php — Avoir client + cartes moyen de paiement
   Claude 2026-05-17
   ========================================================================== */

/* Bloc "Utiliser votre avoir" : mis en avant, fond vert leger */
.pay-credit-section legend {
  color: var(--dform-primary);
}

.pay-credit-card {
  border-color: var(--dform-primary);
  border-left: 4px solid var(--dform-primary);
  background: var(--dform-primary-soft);
}

.pay-credit-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--dform-space-2);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--dform-text);
  line-height: 1.4;
}

.pay-credit-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--dform-primary);
  cursor: pointer;
}

.pay-credit-text {
  flex: 1 1 auto;
  font-weight: 500;
}

.pay-credit-note {
  margin: var(--dform-space-3) 0 0;
  padding: var(--dform-space-2) var(--dform-space-3);
  background: #fff;
  border-left: 3px solid var(--dform-primary);
  font-size: 0.88rem;
  color: var(--dform-text-soft);
  border-radius: 4px;
}

/* Champs additionnels d'un moyen de paiement (numero CB, etc.) — caches
   par defaut, reveles uniquement quand le radio frere est coche.
   Bloc place HORS de la <label> pour ne pas toggler le radio quand
   l'utilisateur clique dans un input.
   Selecteur : .ship-method-input + label + .pay-method-fields  */
.pay-method-fields {
  display: none;
  margin: calc(var(--dform-space-3) * -1) 0 var(--dform-space-3);
  padding: var(--dform-space-3) var(--dform-space-4);
  background: #fff;
  border: 1px solid var(--dform-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.ship-method-input:checked ~ .pay-method-fields {
  display: block;
}

.pay-method-fields .dform-row {
  margin-bottom: var(--dform-space-2);
}
.pay-method-fields .dform-row:last-child {
  margin-bottom: 0;
}

/* Description du module (MODULE_PAYMENT_*_TEXT_DESCRIPTION) : coordonnees
   cheque/virement, info test CB, etc. Contient souvent du HTML brut (<br>, <b>). */
.pay-method-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--dform-text);
}
.pay-method-desc + .dform-row {
  margin-top: var(--dform-space-3);
  padding-top: var(--dform-space-3);
  border-top: 1px dashed var(--dform-border);
}

/* ==========================================================================
   Utilitaires supplementaires — extraits de style="..." inline
   (address_book_process.tpl.php, create_account.tpl.php)
   Claude 2026-05-17
   ========================================================================== */

/* Paragraphe d'aide leader (intro de section, plus visible) */
.dform-help--lead {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: var(--dform-text);
}

/* Variante compacte */
.dform-help--compact {
  margin: 0 0 16px;
}

/* Encart "Adresse a supprimer" dans address_book_process mode delete */
.dform-address-preview {
  background: var(--dform-panel-alt);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.dform-address-preview-label {
  display: block;
  font-size: 0.78rem;
  color: var(--dform-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* Message succes (vert) sous un champ — pendant de .dform-msg--error */
.dform-msg--success { color: var(--dform-success); }

/* Selecteur de communes : code postal -> N villes -> pills cliquables */
.dform-city-options { margin-top: 6px; }

.dform-city-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.dform-pill {
  font-size: 0.78rem;
  padding: 0.3em 0.6em;
  border: 1px solid var(--dform-border);
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  color: var(--dform-text);
  transition: background 0.12s, color 0.12s;
}

.dform-pill--active {
  background: var(--dform-primary);
  color: #fff;
  border-color: var(--dform-primary);
}

/* Champ saisi en majuscules forcees (ex: TVA intracom) */
.dform-input--upper { text-transform: uppercase; }

/* Wrapper a defilement horizontal (tableau voitures dans create_account) */
.dform-scroll-x { overflow-x: auto; }

/* ==========================================================================
   checkout_confirmation.tpl.php — Recap commande
   Claude 2026-05-17
   ========================================================================== */

.conf-page legend .conf-edit-link,
.conf-page .dform-section-intro .conf-edit-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--dform-text-soft);
  text-decoration: underline;
  margin-left: var(--dform-space-2);
}
.conf-page legend .conf-edit-link:hover,
.conf-page .dform-section-intro .conf-edit-link:hover {
  color: var(--dform-primary);
}

/* Adresses livraison + facturation cote a cote (>= 700px) */
.conf-addr-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dform-space-3);
}
@media (min-width: 700px) {
  .conf-addr-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Une carte adresse dans le row : .dform-card a margin-bottom par defaut,
   on l'annule pour que le grid gere l'espacement. */
.conf-addr-row .dform-card { margin-bottom: 0; }

/* Cartes mode de livraison / paiement : pas de section-intro, la carte
   contient juste le nom du mode + bouton "Modifier" en haut a droite.
   Le head (si present) doit laisser la place pour le bouton. */
.ship-addr-card .dform-card-head {
  margin-right: 9em;
}

/* Carte produits : table propre, sans bordures lourdes */
.conf-products-card { padding: 0; overflow-x: auto; }
.conf-products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  text-align: left;
}
.conf-products-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dform-text-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--dform-border);
  padding: var(--dform-space-2) var(--dform-space-3);
  background: #fafaf7;
}
.conf-products-table tbody td {
  padding: var(--dform-space-3);
  border-bottom: 1px solid var(--dform-border);
  vertical-align: top;
}
.conf-products-table tbody tr:last-child td { border-bottom: none; }

.conf-products-table .conf-col-ref   { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; color: var(--dform-text-soft); white-space: nowrap; }
.conf-products-table .conf-col-qty   { text-align: right; white-space: nowrap; color: var(--dform-text-soft); width: 1%; }
.conf-products-table .conf-col-desc  { font-weight: 500; }
.conf-products-table .conf-col-tax   { text-align: right; white-space: nowrap; width: 1%; color: var(--dform-text-soft); }
.conf-products-table .conf-col-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; width: 1%; }

.conf-products-table tbody small,
.conf-products-table tbody nobr { color: var(--dform-text-soft); }
.conf-products-table tbody i { font-style: italic; }

/* Mobile : le tableau produits (ref / qte / designation / prix) ne tient pas en
   colonne etroite -> les en-tetes en capitales forcaient la largeur et noyaient les
   donnees (scroll horizontal + nom produit ecrase). On masque le <thead> et on empile
   chaque ligne en "bloc produit" : nom en avant pleine largeur (ligne 1), puis
   "qte x reference" a gauche et prix a droite (ligne 2). Markup PHP inchange :
   on s'appuie sur les classes conf-col-* deja posees sur chaque <td>. */
@media (max-width: 600px) {
  .conf-products-card { overflow-x: visible; }
  .conf-products-table,
  .conf-products-table tbody { display: block; }
  .conf-products-table thead { display: none; }
  .conf-products-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--dform-space-3);
    row-gap: 2px;
    padding: var(--dform-space-3);
    border-bottom: 1px solid var(--dform-border);
  }
  .conf-products-table tbody tr:last-child { border-bottom: none; }
  .conf-products-table tbody td { padding: 0; border: none; }
  /* IMPORTANT : annuler le width:1% des colonnes (sinon, en flex, les cellules sont
     ecrasees a ~2,5px et leur texte DEBORDE de sa boite -> prix qui "sort" a droite,
     qte qui chevauche la ref). Meme specificite que la regle de base, place plus bas
     dans le fichier => l'emporte. */
  .conf-products-table .conf-col-ref,
  .conf-products-table .conf-col-qty,
  .conf-products-table .conf-col-tax,
  .conf-products-table .conf-col-price { width: auto; }
  /* Ligne 1 : nom produit (designation), pleine largeur, en avant */
  .conf-products-table .conf-col-desc {
    order: 1;
    flex: 1 0 100%;
    font-weight: 600;
  }
  /* Ligne 2 : "qte x reference" a gauche, prix pousse a droite.
     Ordre qte -> ref pour lire "4 x GFE1096" comme un seul bloc. */
  .conf-products-table .conf-col-qty   { order: 2; text-align: left; }
  .conf-products-table .conf-col-ref   { order: 3; }
  .conf-products-table .conf-col-tax   { order: 4; }
  .conf-products-table .conf-col-price { order: 5; margin-left: auto; text-align: right; font-weight: 600; }
}

/* Bloc totaux (output des modules order_total) */
.conf-totals-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--dform-border);
  margin: 0;
}
.conf-totals-table tr td {
  padding: var(--dform-space-2) var(--dform-space-3);
  text-align: right;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.conf-totals-table tr td:first-child {
  color: var(--dform-text-soft);
  font-weight: 500;
}
/* Colonne valeur : largeur au contenu pour aligner les montants sous PRIX HT
   et coller le libellé juste à gauche de la valeur (plus de gros vide central) */
.conf-totals-table tr td + td {
  width: 1%;
  white-space: nowrap;
}
.conf-totals-table tr:last-child td {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dform-text);
  border-top: 1px solid var(--dform-border);
  padding-top: var(--dform-space-3);
}

/* Submit area de confirmation : conditions au-dessus, boutons, footer Hamon */
.conf-submit-area {
  margin-top: var(--dform-space-5);
}
.conf-conditions {
  margin-bottom: var(--dform-space-4);
  padding: var(--dform-space-3) var(--dform-space-4);
  background: var(--dform-primary-soft);
  border-left: 4px solid var(--dform-primary);
  border-radius: 4px;
}
.conf-conditions-label {
  display: flex;
  align-items: flex-start;
  gap: var(--dform-space-2);
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--dform-text);
}
.conf-conditions-label input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--dform-primary);
  cursor: pointer;
}
.conf-conditions-label a {
  color: var(--dform-primary);
  text-decoration: underline;
}

/* Claude 2026 - .product-ref / .product-price :
   definitions deplacees dans templates/Original/stylesheet.css (charge
   globalement). create_account.css n'est charge que sur certains tpl
   (checkout, account, shopping_cart), donc inadequat pour les fiches
   produit qui utilisent ces classes. */

/* ==========================================================================
   shopping_cart.tpl.php — Caddy v2.0
   Claude 2026-05-17, normalise sur tokens 2026-05-18
   ========================================================================== */

.cart-page {
  /* Tokens scoped au caddy (pas dans dform global car specifiques) :
     - cart-gift-bg     : cream chaud, theme cadeau / carrot v2.0
     - cart-warning-text : ambre sombre lisible sur dform-warning-bg */
  --cart-gift-bg:       #fffbe8;
  --cart-warning-text:  #8a4b00;
}

/* Claude 2026 - etat "en cours" pendant la maj AJAX du panier : dim + verrouillage
   des controles (meme opacite 0.5 que la box sidebar dans cart.js) */
.cart-page.cart-busy {
  opacity: 0.5;
  pointer-events: none;
}

/* Liste d'aides AIDE_1 / AIDE_2 sous le titre */
.cart-help-list {
  margin: 0 0 var(--dform-space-4);
  padding-left: var(--dform-space-4);
  list-style: "* ";
  font-size: 0.9rem;
  color: var(--dform-text-soft);
}
.cart-help-list li { margin-bottom: var(--dform-space-1); }

/* Carrot / cadeaux - Claude 2026 : module "produits offerts" compact, sans montant.
   Une seule rangee d'items (vignette + nom + bouton Ajouter) qui wrap si besoin. */
.cart-carrot-section {
  border-top: 1px dashed var(--dform-border);
  border-bottom: 1px dashed var(--dform-border);
  padding: var(--dform-space-2) 0;
  background: var(--cart-gift-bg);
}
.cart-carrot-offer { display: flex; flex-direction: column; gap: var(--dform-space-2); }
.cart-carrot-offer-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dform-space-1) var(--dform-space-2);
}
.cart-carrot-offer-title { font-weight: 600; color: var(--dform-text); }
.cart-carrot-offer-note { font-size: 0.78rem; color: var(--dform-text-muted); }
.cart-carrot-offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dform-space-2);
}
.cart-carrot-offer-item {
  display: flex;
  align-items: center;
  gap: var(--dform-space-2);
  padding: var(--dform-space-1) var(--dform-space-2);
  background: var(--dform-bg);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
}
.cart-carrot-offer-thumb {
  display: inline-flex;
  flex: none;
  background: #fff; /* fond blanc sous vignette produit (images JPEG fond blanc) */
  border-radius: calc(var(--dform-radius-sm) - 1px);
}
.cart-carrot-offer-thumb img { display: block; width: 40px; height: 40px; object-fit: contain; }
.cart-carrot-offer-name { font-size: 0.85rem; line-height: 1.25; max-width: 16em; text-align: center; }
/* Claude 2026 - bouton "Ajouter" : meme couleur + meme comportement (hover/active/focus)
   que "Vider le panier" (dform-btn--primary), mais TAILLE limitee (module compact).
   On ne touche qu'aux dimensions, jamais a la couleur ni aux etats. */
.cart-carrot-offer .dform-btn {
  width: auto;
  min-width: 0;
  padding: 0.45em 1em;
  font-size: 0.85rem;
}

/* Section produits : layout aligne sur .cart-carrot-section (padding vertical
   leger, padding horizontal nul). La carte interne porte sa propre bordure. */
/* Claude 2026-05-31 - on garde les 2 elements (panneau + carte) mais UN SEUL
   trait visible, comme les autres blocs : le panneau porte la bordure/ombre/coins,
   la carte interne est depouillee de sa bordure/ombre/radius (sinon 2 bordures 1px
   adjacentes = trait qui parait trop epais). overflow:hidden clippe la carte aux
   coins arrondis du panneau. padding/marge a 0 = pas de bande vide. */
.cart-products-section {
  padding: 0 !important;
  overflow: hidden;
}

/* Carte produits — table moderne (depouillee : le panneau fait le cadre) */
.cart-products-card {
  padding: 0;
  overflow-x: auto;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.cart-products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: left;
}
.cart-products-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dform-text-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--dform-border);
  padding: var(--dform-space-2) var(--dform-space-3);
  background: var(--dform-panel);
}
.cart-products-table tbody td {
  padding: var(--dform-space-2) var(--dform-space-3);
  border-bottom: 1px solid var(--dform-border);
  vertical-align: middle;
}
.cart-products-table tbody tr:last-child td { border-bottom: none; }

/* Claude 2026 - diode centrée verticalement (au même niveau que la désignation).
   line-height:0 : sans ça le "&nbsp;" qui suit la pastille impose la line-height de la
   police au line-box et la pastille (vertical-align:middle) se cale sur le milieu du
   TEXTE → remontée. À 0, le line-box épouse la pastille et vertical-align:middle la
   centre exactement dans la hauteur de ligne. */
.cart-col-diode  { width: 30px; text-align: center; vertical-align: middle; line-height: 0; }
/* Claude 2026 - les diodes "en commande" (produits_en_commande.php non migré) sont
   encore des GIF legacy de taille native, plus grosse que le dot CSS. On les contraint
   à la taille de la diode verte (.stock-dot = 12px) pour uniformiser toutes les diodes. */
.cart-col-diode img { display: inline-block; vertical-align: middle; width: 12px; height: 12px; object-fit: contain; }
.cart-col-img    { width: 70px; }
.cart-col-img img { display: block; border-radius: var(--dform-radius-sm); }
.cart-col-model  { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; white-space: nowrap; }
.cart-col-model a { color: var(--dform-text); text-decoration: none; }
.cart-col-model a:hover { color: var(--dform-primary); }
.cart-col-desc   { line-height: 1.4; }
.cart-col-desc a { color: var(--dform-text); text-decoration: none; }
.cart-col-desc a:hover { color: var(--dform-primary); }
.cart-col-qty    { width: 1%; white-space: nowrap; text-align: center; }
.cart-col-price  { width: 1%; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-col-actions { width: 1%; white-space: nowrap; text-align: center; padding-left: 2px !important; padding-right: 2px !important; }

.cart-col-empty { color: transparent; }

/* Alerte stock affichee DANS la ligne produit, sous le nom (cellule designation).
   Claude 2026-05-31. Petit texte rouge rattache directement au produit, pas de
   ligne de tableau separee ni d'aplat de couleur. */
.cart-prod-warning {
  margin-top: var(--dform-space-2);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--cart-warning-text);
}
.cart-prod-warning img { vertical-align: middle; margin-right: 4px; }

/* Sous-table bundle (vue subproducts) */
.cart-bundle .cart-bundle-table,
.cart-bundle table {
  width: 100%;
  margin-top: var(--dform-space-2);
  border-top: 1px dotted var(--dform-border);
  padding-top: var(--dform-space-2);
}
.cart-bundle .microText {
  font-size: 0.78rem;
  color: var(--dform-text-soft);
  padding: 2px 4px;
}

/* Carrot row : visuel cadeau */
.cart-row--carrot td {
  /* Commenté par Claude 2026 - pas de couleur de fond spécifique pour une ligne cadeau
     dans le listing du panier (demande utilisateur). Classe conservée comme hook sémantique. */
  /* background: var(--cart-gift-bg); */
}

/* Claude 2026-06-23 - Ligne de consigne (core surcharge) : lecture seule, palette info
   (cohérente avec .product-consigne-notice). Poubelle/coeur désactivés (clic invalidé). */
.cart-row--consigne td {
  background: var(--color-info-soft);
}
.cart-consigne-note {
  font-size: var(--text-xs);
  color: var(--color-info);
  margin-top: var(--space-1);
}
.cart-consigne-qty {
  font-weight: 600;
}
.cart-action-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}
.cart-action-btn[disabled]:hover {
  background: none;
  color: inherit;
  border-color: inherit;
}

/* Controls de quantite : input + stack vertical (+/-)
   Layout compact :
   ┌──────┐ ┌──┐
   │  N   │ │+ │   ← + en haut
   └──────┘ └──┘
            ┌──┐
            │− │   ← − en bas
            └──┘
*/
.cart-qty-controls {
  display: inline-flex;
  align-items: stretch;
  gap: 3px;
  height: 36px;
}
.cart-qty-input {
  width: 38px;
  height: 36px;
  text-align: center;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  font-size: 0.95rem;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.cart-qty-input:focus {
  outline: none;
  border-color: var(--dform-primary);
  box-shadow: 0 0 0 3px var(--dform-primary-ring);
}
.cart-qty-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  height: 36px;
}
.cart-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 17px;
  border: 1px solid var(--dform-border);
  background: var(--dform-bg);
  color: var(--dform-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  box-sizing: border-box;
}
.cart-qty-btn--plus  { border-radius: var(--dform-radius-sm) var(--dform-radius-sm) 0 0; border-bottom-width: 0; }
.cart-qty-btn--minus { border-radius: 0 0 var(--dform-radius-sm) var(--dform-radius-sm); }
.cart-qty-btn:hover {
  background: var(--dform-primary-soft);
  border-color: var(--dform-primary);
  color: var(--dform-primary);
  z-index: 1;
}
.cart-qty-btn--plus:hover  { border-bottom: 1px solid var(--dform-primary); margin-bottom: -1px; }

/* Claude 2026-06-24 - Panier : stepper quantite HORIZONTAL [ − ] [ champ ] [ + ] avec
   cibles tactiles larges (40px), l'un a cote de l'autre. Scope .cart-products-table pour
   ne PAS toucher le stepper vertical de la fiche produit (memes classes via stylesheet.css). */
.cart-products-table .cart-qty-controls { gap: 0; height: 40px; }
.cart-products-table .cart-qty-btn {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  border-width: 1px;           /* annule le border-bottom-width:0 du variant vertical --plus */
  border-radius: 0;
}
.cart-products-table .cart-qty-btn--minus { border-radius: var(--dform-radius-sm) 0 0 var(--dform-radius-sm); }
.cart-products-table .cart-qty-btn--plus  { border-radius: 0 var(--dform-radius-sm) var(--dform-radius-sm) 0; }
/* hover : neutralise le decalage vertical (sans objet en disposition horizontale). */
.cart-products-table .cart-qty-btn--plus:hover { border-bottom: 1px solid var(--dform-primary); margin-bottom: 0; }
.cart-products-table .cart-qty-input {
  width: 48px;
  height: 40px;
  border-radius: 0;
  border-left-width: 0;        /* bordures laterales portees par les boutons => couture unique */
  border-right-width: 0;
}

/* Actions de ligne : coeur + poubelle, alignes a droite, gap minimal */
.cart-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Claude 2026-05-31 - placeholder vide de meme empreinte qu'un bouton d'action :
   reserve la colonne coeur/cloche quand l'icone est absente, pour garder les
   actions alignees en colonne d'une ligne a l'autre. */
.cart-action-slot {
  width: 28px;
  height: 32px;
  display: inline-flex;
  flex: 0 0 28px;
}
.cart-action-btn {
  width: 28px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dform-radius-sm);
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--dform-text-soft);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  padding: 0;
  line-height: 1;
}
.cart-action-btn:hover {
  background: var(--dform-panel-alt);
  color: var(--dform-text);
}
/* Claude 2026 - cloche notification dans le panier : alignée sur .cart-action-btn
   (le style de base .notify-bell vaut 36x36 + bordure, on l'adapte au panier). */
.cart-actions .notify-bell {
  width: 28px;
  height: 32px;
  border-color: transparent;
  border-radius: var(--dform-radius-sm);
  padding: 0;
  color: var(--dform-text-soft);
}
.cart-actions .notify-bell:hover {
  background: var(--dform-panel-alt);
  border-color: transparent;
}
.cart-actions .notify-bell.is-subscribed {
  color: #0f6e54;
  background: transparent;
}
.cart-action-heart:hover {
  color: var(--dform-error);
  border-color: var(--dform-error);
}
.cart-action-trash:hover {
  color: var(--dform-error);
  border-color: var(--dform-error);
  background: var(--dform-error-bg);
}

/* Sous-total : rendu hors de la table principale (sinon les largeurs
   width:1% des cellules pollu(ai)ent le layout de toute la grille). */
.cart-subtotal {
  padding: var(--dform-space-3);
  text-align: right;
  background: var(--dform-panel);
  border-top: 2px solid var(--dform-border);
  font-size: 1rem;
}

/* Promesse d'expedition (.cart-ship-promise) : Claude 2026-06-11 deplacee vers
   le stylesheet global (templates/Original/stylesheet.css) car reutilisee aussi
   par le modal produit (listing / eclate) qui ne charge pas create_account.css. */

/* Submit area : 2 lignes (Commander + Vider tout), aide a gauche, bouton a droite */
.cart-submit-area {
  margin-top: var(--dform-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-3);
}
.cart-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dform-space-3);
  align-items: center;
  justify-content: flex-end;
  padding: var(--dform-space-3);
  background: var(--dform-panel-alt);
  border-radius: var(--dform-radius);
}
.cart-submit-help {
  margin: 0;
  flex: 1 1 60%;
  color: var(--dform-text-soft);
  font-size: 0.88rem;
  min-width: 0;
}

/* Estimateur livraison */
.cart-shipping-estimator {
  margin-top: var(--dform-space-4);
}

/* Caddy vide */
.cart-empty-card .cart-empty-msg {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  color: var(--dform-text);
  padding: var(--dform-space-4);
}

/* Trash inline panel — rapatrie de l'ancien <style> inline du tpl,
   toutes les couleurs sur tokens dform. */
.trash-inline {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
  background: var(--dform-bg);
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  box-shadow: var(--dform-shadow);
  padding: var(--dform-space-3);
  min-width: 220px;
  text-align: left;
  font-size: 0.85rem;
}
.trash-inline-title {
  font-weight: bold;
  margin-bottom: var(--dform-space-2);
  color: var(--dform-text);
}
.trash-inline button {
  display: block;
  width: 100%;
  margin: var(--dform-space-1) 0;
  padding: var(--dform-space-2) var(--dform-space-3);
  cursor: pointer;
  border: 1px solid var(--dform-border);
  background: var(--dform-panel);
  border-radius: 3px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--dform-text);
}
.trash-inline button.danger,
.trash-inline button.wl {
  background: var(--dform-error-bg);
  border-color: var(--dform-error);
  color: var(--dform-error);
}
.trash-inline button:hover { background: var(--dform-panel-alt); }
.trash-anchor { position: relative; display: inline-block; }

/* Claude 2026 — variante "ouverture vers le haut". Le panneau "Vider tout le
   caddy" est ancre en bas de page : ouvert vers le bas (top:100%) il deborderait
   sous l'estimateur de livraison. On l'ouvre donc au-dessus de son bouton. */
.trash-inline--up {
  top: auto;
  bottom: 100%;
}

/* Mobile : table en colonnes plus compactes */
@media (max-width: 600px) {
  .cart-products-table thead { display: none; }
  .cart-products-table,
  .cart-products-table tbody { display: block; width: 100% !important; }

  /* Claude 2026-06-24 - Refonte mobile : chaque ligne produit devient une GRILLE dediee.
     L'ancienne approche tableau/flottants empilait tout verticalement (pastille orpheline,
     modele manquant) a cause d'un conflit de specificite sur les largeurs de cellules.
     Disposition cible :
        ┌──────┐  MODELE                 [actions]
        │ img  │  Nom du produit (pleine largeur)
        └──────┘  ● [ − N + ]                prix
     Image a gauche (toute la hauteur) ; pastille de stock devant la quantite. */
  .cart-products-table tr.cart-row {
    display: grid;
    grid-template-columns: 70px auto 1fr auto;
    grid-template-areas:
      "img model model  actions"
      "img desc  desc   desc"
      "img diode qty    price";
    column-gap: var(--dform-space-3);
    row-gap: var(--dform-space-1);
    align-items: start;
    position: relative;
    padding: var(--dform-space-3);
    border-bottom: 1px solid var(--dform-border);
  }
  /* fond de la ligne consigne porte par le tr (sinon les gaps de la grille laissent des trous). */
  .cart-products-table tr.cart-row--consigne { background: var(--color-info-soft); }
  .cart-products-table tr.cart-row > td {
    display: block;
    width: auto !important;
    float: none !important;
    border: none;
    padding: 0;
  }
  .cart-col-diode   { grid-area: diode; align-self: center; justify-self: center; width: auto !important; line-height: 0; margin: 0 !important; }
  .cart-col-img     { grid-area: img;   width: 70px !important; margin: 0 !important; }
  .cart-col-model   { grid-area: model; align-self: center; font-size: 0.95rem; }
  .cart-col-desc    { grid-area: desc; }
  .cart-col-qty     { grid-area: qty;   align-self: center; text-align: left; }
  .cart-col-price   { grid-area: price; align-self: center; justify-self: end; text-align: right; font-weight: bold; }
  .cart-col-actions { grid-area: actions; justify-self: end; text-align: right; }
  /* Claude 2026-06-24 - placeholder vide de la cloche (.cart-action-slot) inutile sur
     mobile (pas d'alignement colonne en grille) : masque pour rendre la place au
     stepper + prix et eviter le debordement. */
  .cart-products-table .cart-action-slot { display: none; }
  .cart-submit-row { flex-direction: column; align-items: stretch; }
  .cart-submit-row .dform-btn { width: 100%; }
}

/* ============================================================
 * Account history listing (refonte 2026-05-23)
 * ============================================================ */

.ahist-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--dform-space-3) var(--dform-space-4);
  align-items: start;
}

.ahist-card-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dform-space-2) var(--dform-space-3);
  padding-bottom: var(--dform-space-3);
  border-bottom: 1px solid var(--dform-border);
}

.ahist-card-num {
  display: flex;
  align-items: baseline;
  gap: var(--dform-space-2);
  flex-wrap: wrap;
}

.ahist-card-label {
  font-size: 0.85rem;
  color: var(--dform-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ahist-card-num-link {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dform-primary);
  text-decoration: none;
  line-height: 1.15;
}

.ahist-card-num-link:hover,
.ahist-card-num-link:focus-visible {
  color: var(--dform-primary-hover);
  text-decoration: underline;
}

.ahist-card-meta-top {
  display: flex;
  align-items: center;
  gap: var(--dform-space-3);
  flex-wrap: wrap;
}

.ahist-card-date {
  font-size: 0.85rem;
  color: var(--dform-text-soft);
}

.ahist-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--dform-space-2) var(--dform-space-4);
  font-size: 0.9rem;
  align-self: center;
}

.ahist-meta-row { margin: 0; }

.ahist-meta dt {
  font-size: 0.75rem;
  color: var(--dform-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.ahist-meta dd {
  margin: 0;
  color: var(--dform-text);
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

.ahist-meta dd a {
  color: var(--dform-primary);
  text-decoration: none;
}

.ahist-meta dd a:hover { text-decoration: underline; }

.ahist-meta-avoirs {
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-1);
  align-items: flex-start;
}

/* Boutons "documents" (facture, avoirs) — variante accent du dform-card-btn.
   Plus visibles que le card-btn neutre car ce sont des actions importantes
   mais subordonnees au CTA principal "Afficher la commande". */
.ahist-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5em 1em;
  border-width: 1.5px;
  border-color: var(--dform-accent);
  color: var(--dform-accent);
  background: #fff;
}

.ahist-doc-btn:hover,
.ahist-doc-btn:focus-visible {
  background: var(--dform-accent);
  color: #fff;
  border-color: var(--dform-accent);
  outline: none;
}

/* ============================================================
 * Account history INFO (detail commande) — refonte 2026-05-23
 * ============================================================ */

.ahi-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dform-text);
  margin: 0 0 var(--dform-space-3);
  padding-bottom: var(--dform-space-2);
  border-bottom: 1px solid var(--dform-border);
}

.ahi-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dform-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--dform-space-3) 0 var(--dform-space-1);
}

.ahi-flat {
  margin: 0;
  color: var(--dform-text);
  line-height: 1.5;
}

/* --- BLOC 1 : recap --- */
.ahi-summary {
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-3);
}

.ahi-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--dform-space-3) var(--dform-space-5);
}

.ahi-summary-num {
  display: flex;
  align-items: baseline;
  gap: var(--dform-space-2);
  flex-wrap: wrap;
}

.ahi-summary-num-val {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--dform-primary);
  line-height: 1.1;
}

.ahi-summary-meta {
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-1);
  font-size: 0.9rem;
  color: var(--dform-text-muted);
  text-align: right;
}

.ahi-summary-meta-label {
  color: var(--dform-text-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.3em;
}

.ahi-summary-docs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dform-space-2);
  padding-top: var(--dform-space-3);
  border-top: 1px solid var(--dform-border);
}

/* --- BLOC 2 : grid livraison/facturation --- */
.ahi-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dform-space-4);
}

@media (min-width: 720px) {
  .ahi-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--dform-space-5);
  }
}

.ahi-block {
  display: flex;
  flex-direction: column;
}

.ahi-address {
  margin: 0;
  font-style: normal;
  color: var(--dform-text);
  line-height: 1.55;
}

/* --- BLOC 4 : produits + totaux --- */
/* Claude 2026-09-13 - .dform-table : table generique du design-system, meme
   rendu que .ahi-products (detail commande). Les selecteurs .ahi-* restent en
   alias pour ne rien casser ; les nouvelles pages utilisent .dform-table +
   cellules .dt-c-* (affected_products en premier). */
.ahi-table-wrap,
.dform-table-wrap {
  overflow-x: auto;
}

.ahi-products,
.ahi-history,
.dform-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ahi-products thead th,
.ahi-history thead th,
.dform-table thead th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dform-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--dform-space-2) var(--dform-space-3);
  border-bottom: 1px solid var(--dform-border);
  background: var(--dform-panel-alt);
}

.ahi-products tbody td,
.ahi-history tbody td,
.dform-table tbody td {
  padding: var(--dform-space-3);
  border-bottom: 1px solid var(--dform-border);
  vertical-align: top;
}

.ahi-products tbody tr:last-child td,
.dform-table tbody tr:last-child td { border-bottom: 0; }

/* Cellules generiques .dform-table (miroir des .ahi-c-* ci-dessous).
   text-align:left explicite : le <td align="center"> legacy du main_page
   centre sinon tout le contenu herite. */
.dform-table tbody td { text-align: left; }
.dform-table .dt-c-num {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dform-table thead th.dt-c-num { text-align: right; }
.dform-table .dt-c-nowrap { white-space: nowrap; }
.dform-table .dt-c-name { min-width: 220px; }
.dform-table tbody td.dt-c-model {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  white-space: nowrap;
}
.dform-table .dt-name {
  color: var(--dform-text);
  font-weight: 500;
  line-height: 1.35;
}
.dform-table .dt-link {
  color: var(--dform-primary);
  font-weight: 600;
  text-decoration: none;
}
.dform-table .dt-link:hover { text-decoration: underline; }
/* Sous-ligne rattachee a la ligne precedente (ex. commandes fournisseur d'un
   produit) : fond panel, texte attenue, pas de bordure avec la ligne parente. */
.dform-table tbody tr.dt-subrow td {
  padding-top: var(--dform-space-1);
  padding-bottom: var(--dform-space-2);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  background: var(--dform-panel);
}
.dform-table tbody tr.dt-has-sub td { border-bottom: 0; padding-bottom: var(--dform-space-1); }
.dform-table .dt-sub-item { display: block; }
.dform-table .dt-sub-item + .dt-sub-item { margin-top: 2px; }
.dform-table .dt-sub-item .dform-card-badge { vertical-align: middle; margin-left: var(--dform-space-1); }
.dform-table .dt-sub-sep { margin: 0 var(--dform-space-1); }
/* Info mise en avant dans une sous-ligne (ex. date prevue de livraison fournisseur). */
.dform-table .dt-sub-strong { font-weight: 700; color: var(--dform-text); }

.ahi-c-qty {
  white-space: nowrap;
  font-weight: 600;
  color: var(--dform-text);
  width: 1%;
  text-align: right;
}

.ahi-c-name { min-width: 220px; }

.ahi-prod-name {
  color: var(--dform-text);
  font-weight: 500;
  line-height: 1.35;
}

.ahi-prod-attr {
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  margin-top: 2px;
}

/* Style monospace/attenue reserve a la VALEUR (td) : sinon l'en-tete <th>
   MODELE herite de ce style et differe des autres en-tetes (thead th). */
.ahi-products tbody td.ahi-c-model {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  white-space: nowrap;
}

.ahi-c-tax,
.ahi-c-total {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Aligne les en-tetes (thead th) sur le contenu de leur colonne : sans ces
   regles, `.ahi-products thead th { text-align:left }` (plus specifique)
   forcerait QTE / TAXE / TOTAL a gauche alors que leurs valeurs sont a droite.
   MODELE et PRODUITS restent a gauche (heritent de thead th), comme leur td. */
.ahi-products thead th.ahi-c-qty,
.ahi-products thead th.ahi-c-tax,
.ahi-products thead th.ahi-c-total {
  text-align: right;
}

.ahi-products tfoot {
  background: var(--dform-panel);
}

.ahi-total-row td {
  padding: var(--dform-space-2) var(--dform-space-3);
  border-bottom: 1px solid var(--dform-border);
  font-size: 0.9rem;
}

.ahi-total-row:last-child td {
  border-bottom: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--dform-text);
  background: var(--dform-primary-soft);
}

.ahi-total-label { text-align: right; color: var(--dform-text-muted); }
.ahi-total-val   { text-align: right; font-variant-numeric: tabular-nums; }
.ahi-total-row:last-child .ahi-total-label,
.ahi-total-row:last-child .ahi-total-val { color: var(--dform-text); }

/* --- BLOC 5 : disponibilites --- */
.ahi-avail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dform-space-3);
}

.ahi-avail-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--dform-space-3);
  align-items: start;
  padding: var(--dform-space-3);
  background: #fff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius);
}

.ahi-avail-img-wrap {
  width: 64px;
  height: 64px;
  background: #fff;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ahi-avail-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ahi-avail-model {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
}

.ahi-avail-name {
  font-weight: 500;
  color: var(--dform-text);
  line-height: 1.35;
  margin-top: 2px;
}

.ahi-avail-qty {
  margin-top: var(--dform-space-2);
  font-size: 0.9rem;
  color: var(--dform-text);
}

.ahi-avail-supplier {
  margin-top: var(--dform-space-2);
  padding: var(--dform-space-2) var(--dform-space-3);
  background: var(--dform-panel);
  border-left: 3px solid var(--dform-primary);
  border-radius: var(--dform-radius-sm);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  line-height: 1.5;
}

.ahi-avail-credited {
  margin-top: var(--dform-space-2);
  padding: var(--dform-space-2) var(--dform-space-3);
  background: var(--dform-warning-bg);
  border-left: 3px solid var(--dform-warning);
  border-radius: var(--dform-radius-sm);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
  line-height: 1.5;
}

/* --- BLOC 6 : historique commande --- */
.ahi-h-date,
.ahi-h-status { white-space: nowrap; }

.ahi-h-comment { line-height: 1.45; }

.ahi-track-link {
  display: inline-block;
  margin-right: var(--dform-space-1);
  padding: 2px 8px;
  background: var(--dform-primary-soft);
  border: 1px solid var(--dform-primary);
  border-radius: 999px;
  color: var(--dform-primary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
}

.ahi-track-link:hover,
.ahi-track-link:focus-visible {
  background: var(--dform-primary);
  color: #fff;
  outline: none;
}

/* --- responsive --- */
@media (max-width: 640px) {
  .ahi-summary-head { flex-direction: column; }
  .ahi-summary-meta { text-align: left; }
  .ahi-summary-num-val { font-size: 1.3rem; }
  .ahi-products tbody td,
  .ahi-history tbody td { padding: var(--dform-space-2); }
}

.ahist-card-cta {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dform-space-2);
  justify-content: flex-end;
}

.ahist-card-cta .dform-btn {
  white-space: nowrap;
  font-size: 0.95rem;
  padding: 0.6em 1.1em;
}

.ahist-pager {
  text-align: center;
  margin-top: var(--dform-space-4);
  font-size: 0.85rem;
  color: var(--dform-text-muted);
}

.ahist-pager > div + div { margin-top: var(--dform-space-1); }

.ahist-toggle {
  margin-top: var(--dform-space-4);
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .ahist-card {
    grid-template-columns: 1fr;
  }
  .ahist-card-cta {
    justify-content: stretch;
  }
  .ahist-card-cta .dform-btn {
    width: 100%;
    text-align: center;
  }
  .ahist-card-num-link { font-size: 1.2rem; }
}

/* === Toggle Switch (Claude 2026-09-11) ===
   Affichage de radio buttons ou checkboxes en toggle switch style iOS */
.dform-toggle {
  display: inline-block;
}

.dform-toggle input[type="radio"],
.dform-toggle input[type="checkbox"] {
  display: none;
}

.dform-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--dform-border);
  border-radius: var(--dform-radius-sm);
  background-color: var(--dform-panel);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.dform-toggle label:hover {
  border-color: var(--dform-border-strong);
  background-color: var(--dform-panel-alt);
}

.dform-toggle input[type="radio"]:checked + label,
.dform-toggle input[type="checkbox"]:checked + label {
  background-color: var(--dform-primary-soft);
  border-color: var(--dform-primary);
  color: var(--dform-primary);
  font-weight: 500;
}

.dform-toggle-group {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.dform-toggle-group .dform-toggle label {
  border-radius: 0;
  border-right: none;
}

.dform-toggle-group .dform-toggle:first-child label {
  border-radius: var(--dform-radius-sm) 0 0 var(--dform-radius-sm);
}

.dform-toggle-group .dform-toggle:last-child label {
  border-radius: 0 var(--dform-radius-sm) var(--dform-radius-sm) 0;
  border-right: 1px solid var(--dform-border);
}