/* ==========================================================================
   Page « Mon devis » (panier sans compte) et page de confirmation.
   Les composants (.bouton, .champ, .stepper, .carte, .alerte…) viennent de base.css.
   ========================================================================== */

.panier-entete { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.panier-entete h1 { margin-bottom: 0.6rem; }
.panier-intro { margin: 0; }

/* ---------- Squelette ---------- */
.panier-squelette { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start; }
.panier-squelette-principal { display: flex; flex-direction: column; gap: 1rem; }
.panier-squelette-ligne { height: 7.5rem; border-radius: var(--rayon); }
.panier-squelette-recap { height: 20rem; border-radius: var(--rayon); }

/* ---------- Vide et erreur ---------- */
.panier-vide { padding-block: clamp(2rem, 6vw, 4rem); }
.panier-vide-alertes { max-width: 34rem; margin: 1.5rem auto 0; text-align: left; }
.panier-vide-alertes .alerte { margin-bottom: 0.5rem; }
.panier-erreur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.panier-erreur p { margin: 0; }

/* ---------- Grille principale ---------- */
.panier-grille { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2rem; align-items: start; }
.panier-principal { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.panier-alertes:empty { display: none; }
.panier-alertes .alerte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.panier-alertes .alerte p { margin: 0; flex: 1 1 18rem; }

/* ---------- Aide de classe ---------- */
.panier-classe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
.panier-classe-texte { flex: 1 1 22rem; }
.panier-classe-texte .carte-titre { margin-bottom: 0.3rem; }
.panier-classe-texte p { margin: 0; }
.panier-classe-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.panier-classe-form .champ { width: 9rem; }
.panier-classe-form .entree { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Lignes ---------- */
.panier-lignes { display: flex; flex-direction: column; gap: 0.75rem; transition: opacity var(--transition); }
.panier-lignes[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.panier-ligne {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: "visuel infos unitaire quantite total retirer";
  align-items: center; gap: 0.75rem 1.25rem;
  padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon);
  transition: box-shadow var(--transition), border-color var(--transition), opacity 180ms ease, transform 180ms ease;
  animation: apparait 220ms ease-out;
}
.panier-ligne:hover { border-color: var(--ligne-2); box-shadow: var(--ombre-1); }
.panier-ligne.est-retiree { opacity: 0; transform: translateX(8px); }
.panier-ligne.est-indisponible { border-color: var(--alerte-bord); }
.panier-ligne.a-prix-change { border-color: var(--alerte-bord); background: color-mix(in srgb, var(--alerte-clair) 30%, var(--surface)); }
.panier-ligne-visuel { grid-area: visuel; display: block; width: 5.5rem; aspect-ratio: 1; border-radius: var(--rayon-s); overflow: hidden; background: var(--surface-2); }
.panier-ligne-visuel img { width: 100%; height: 100%; object-fit: cover; }
.panier-ligne-sansimage { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--texte-xs); color: var(--encre-3); text-align: center; padding: 0.25rem; }
.panier-ligne-infos { grid-area: infos; min-width: 0; }
.panier-ligne-nom { font-size: 1rem; margin: 0 0 0.25rem; line-height: 1.3; }
.panier-ligne-nom a { color: var(--encre); }
.panier-ligne-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0; font-size: var(--texte-xs); color: var(--encre-3); }
.panier-ligne-dispo { margin: 0.35rem 0 0; color: var(--succes); }
.panier-ligne-dispo.est-alerte { color: var(--alerte-texte); font-weight: 500; }
.panier-ligne-prixchange { margin: 0.35rem 0 0; color: var(--alerte-texte); font-weight: 500; }
.panier-ligne-prixchange s { color: var(--encre-3); font-weight: 400; }
.panier-ligne-unitaire, .panier-ligne-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; white-space: nowrap; }
.panier-ligne-unitaire { grid-area: unitaire; color: var(--encre-2); }
.panier-ligne-unitaire .prix-montant { font-weight: 500; }
.panier-ligne-total { grid-area: total; min-width: 6rem; }
.panier-ligne-total .prix-montant { font-size: 1.1rem; }
.panier-ligne-quantite { grid-area: quantite; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.panier-ligne-eleve { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--texte-xs); color: var(--encre-3); }
.panier-ligne-eleve input { width: 3.6rem; text-align: center; min-height: 1.9rem; padding: 0.2rem 0.3rem; }
.panier-ligne-retirer { grid-area: retirer; display: inline-flex; align-items: center; gap: 0.3rem; border: 0; background: transparent; color: var(--encre-3); font-size: var(--texte-xs); font-weight: 500; padding: 0.4rem 0.5rem; border-radius: var(--rayon-s); transition: background var(--transition), color var(--transition); }
.panier-ligne-retirer:hover { background: var(--erreur-clair); color: var(--erreur); }
.panier-ligne-retirer .icone { width: 0.95rem; height: 0.95rem; }
@media (pointer: coarse) {
  .panier-ligne-retirer { min-height: 2.75rem; padding: 0.6rem 0.75rem; }
  .panier-ligne-eleve input { min-height: 2.75rem; width: 4rem; }
}

/* ---------- Actions ---------- */
.panier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.panier-actions .panier-estimatif { margin-left: auto; }
.panier-vider { color: var(--encre-3); }
.panier-vider:hover { color: var(--erreur); background: var(--erreur-clair); }

/* ---------- Récapitulatif ---------- */
.panier-recap { position: sticky; top: 5.5rem; }
.panier-recap-carte { display: flex; flex-direction: column; gap: 0.75rem; }
.panier-recap-lignes { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.panier-recap-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.95rem; }
.panier-recap-ligne dt { color: var(--encre-2); }
.panier-recap-ligne dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.panier-recap-ttc { margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--ligne); font-size: 1.05rem; }
.panier-recap-ttc dt { color: var(--encre); font-weight: 600; }
.panier-recap-ttc dd { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 500; }
.panier-recap-livraison { margin: 0; }
.panier-recap-note { margin: 0; padding: 0.6rem 0.8rem; background: var(--accent-clair); color: var(--accent-encre); border-radius: var(--rayon-s); font-size: var(--texte-xs); font-weight: 500; }
.panier-recap-contact { margin: 0; text-align: center; }

/* ---------- Formulaire d'envoi ---------- */
.panier-envoi { padding: clamp(1.25rem, 3vw, 2rem); scroll-margin-top: 5.5rem; }
.panier-envoi-entete { max-width: 40rem; margin-bottom: 1.5rem; }
.panier-envoi-entete h2 { margin-bottom: 0.4rem; }
.panier-envoi-entete p { margin: 0; }
.panier-types legend { margin-bottom: 0.75rem; }
.panier-types-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.panier-type { position: relative; display: flex; cursor: pointer; }
.panier-type input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.panier-type-corps { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; padding: 1rem 1.1rem 1rem 2.9rem; border: 1.5px solid var(--ligne-2); border-radius: var(--rayon); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.panier-type-corps::before { content: ""; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--ligne-2); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); }
.panier-type input:checked + .panier-type-corps { border-color: var(--accent); background: var(--accent-clair); box-shadow: 0 0 0 1px var(--accent); }
.panier-type input:checked + .panier-type-corps::before { border-color: var(--accent); border-width: 5px; }
.panier-type input:focus-visible + .panier-type-corps { box-shadow: var(--anneau); }
.panier-type-titre { font-weight: 600; }
.panier-type-texte { font-size: var(--texte-s); color: var(--encre-2); }
.panier-types-note { margin-top: 0.75rem; }
fieldset.a-erreur .panier-type-corps { border-color: var(--erreur); }
.panier-envoi-prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.panier-envoi-prix p { margin: 0; flex: 1 1 18rem; }
.panier-envoi-actions { flex-direction: column; align-items: stretch; }
.panier-envoi-rgpd { margin: 0; text-align: center; }
#envoi-erreur { margin-top: 1.25rem; }

/* ---------- Barre collante (mobile) ---------- */
.panier-barre { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 80; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--ligne); box-shadow: 0 -8px 24px -16px rgba(27, 36, 51, 0.3); }
.panier-barre-total { display: flex; flex-direction: column; line-height: 1.2; }
.panier-barre-total strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ---------- Adaptations ---------- */
@media (max-width: 1000px) {
  .panier-grille, .panier-squelette { grid-template-columns: 1fr; }
  .panier-recap { position: static; }
  .panier-ligne {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "visuel infos retirer"
      "visuel unitaire unitaire"
      "quantite quantite total";
  }
  .panier-ligne-unitaire { align-items: flex-start; flex-direction: row; gap: 0.35rem; align-self: start; }
  .panier-ligne-quantite { flex-direction: row; justify-content: flex-start; gap: 0.75rem; }
  .panier-ligne-retirer { align-self: start; }
}
@media (max-width: 760px) {
  body.a-barre-panier { padding-bottom: 5rem; }
  .panier-barre[hidden] { display: none; }
  .panier-barre:not([hidden]) { display: flex; }
  .toasts { bottom: 5.25rem; }
  .panier-actions { flex-direction: column; align-items: stretch; }
  .panier-actions .bouton, .panier-actions form, .panier-actions form .bouton { width: 100%; margin: 0; }
  .panier-classe-form { width: 100%; }
  .panier-classe-form .champ { flex: 1; width: auto; }
}
@media (max-width: 420px) {
  .panier-ligne { padding: 0.85rem; gap: 0.6rem 0.75rem; grid-template-columns: 3.75rem minmax(0, 1fr) auto; }
  .panier-ligne-visuel { width: 3.75rem; }
  .panier-ligne-retirer span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .panier-ligne-quantite { flex-wrap: wrap; }
}

/* ==========================================================================
   Confirmation d'envoi
   ========================================================================== */
.confirmation-carte { padding: clamp(1.5rem, 5vw, 3rem); text-align: center; animation: apparait 260ms ease-out; }
.confirmation-coche { width: 4.25rem; height: 4.25rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--succes-clair); color: var(--succes); display: flex; align-items: center; justify-content: center; }
.confirmation-coche svg { width: 2.1rem; height: 2.1rem; }
.confirmation-titre { margin-bottom: 1rem; text-wrap: balance; }
.confirmation-reference { color: var(--accent); white-space: nowrap; }
.confirmation-message { max-width: 36rem; margin: 0 auto 1.5rem; color: var(--encre-2); }
.confirmation-message p:last-child { margin-bottom: 0; }
.confirmation-actions { margin-bottom: 1.25rem; }
/* Libellés longs (« Télécharger le devis estimatif (PDF) », « Envoyer ma demande de commande ») : retour à la ligne plutôt que débordement sur téléphone */
.confirmation-actions .bouton, .panier-envoi-actions .bouton { white-space: normal; max-width: 100%; text-align: center; }
.confirmation-email { text-align: left; max-width: 36rem; margin-inline: auto; }
.confirmation-sous-titre { font-size: 1.15rem; margin: 2rem 0 1rem; }
.confirmation-etapes { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; text-align: left; max-width: 36rem; margin-inline: auto; }
.confirmation-contact { margin: 0 0 1.5rem; }
.confirmation-retour { padding-top: 1.5rem; border-top: 1px solid var(--ligne); }