/* Galbe — parcours de commande, repris de « Nous, en relief » (maquette Claude Design, écran 3) sans la validation
   des aperçus : le panier (panier.html), la confirmation (merci.html) et la page introuvable (404.html).
   Couleurs, boutons, champs, choix (.option) et encadrés viennent de style.css : ce fichier ne fait que la mise en page. */

.hors-ecran { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ étapes : Panier ✓ · Coordonnées · Paiement par lien */
.parcours { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 15px; line-height: 1.3; }
.parcours li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--vin); }
.parcours .repere { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--vin); color: var(--fond);
  font-size: 13px; font-weight: 640; font-variant-numeric: tabular-nums; }
.parcours .repere .ic { font-size: 15px; vertical-align: 0; }
.parcours [aria-current="step"] { font-weight: 640; }
.parcours [aria-current="step"] .repere { background: var(--framboise); }
.parcours .a-venir { color: var(--texte-2); }
.parcours .a-venir .repere { background: #DCCBB6; color: var(--vin); }   /* chiffre en encre : contraste AA sur le sable */
/* téléphone : trois barres de 4 px, le nom dessous */
@media (max-width: 700px) {
  .parcours { flex-wrap: nowrap; gap: 6px; margin-bottom: 20px; font-size: 12px; }
  .parcours li { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 6px; }
  .parcours .repere { width: auto; height: 4px; border-radius: 2px; font-size: 0; }
  .parcours .repere .ic { display: none; }
}

/* ------------------------------------------------------------------ grille : le contenu à gauche, le récapitulatif fixe à droite */
.commande-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.commande-principal { container: principal / inline-size; display: flex; flex-direction: column; gap: 48px; min-width: 0; }
@media (min-width: 1100px) {
  .commande-grille { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
}
@media (min-width: 1300px) {
  .commande-grille { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; }
}

/* ------------------------------------------------------------------ « Votre panier » : les vases */
.relecture { display: flex; flex-direction: column; gap: 20px; }
.relecture-tete { display: flex; flex-direction: column; gap: 8px; }
.relecture-tete h1, .panier-vide h1 { font-size: clamp(30px, 1rem + 2.2vw, 48px); font-weight: 620; font-stretch: 78%; line-height: 1; letter-spacing: -0.01em; }
.relecture-tete p { max-width: 44rem; font-size: 17px; line-height: 1.5; color: var(--texte-2); }
@media (max-width: 560px) {
  .relecture-tete h1 { font-stretch: 80%; }
  .relecture-tete p { font-size: 15px; }
}

.objets { display: flex; flex-direction: column; gap: 16px; }
.objets-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }

/* un seul vase : l'envoi offert dès deux vases, avec le même vase dans une autre taille */
.incitation { margin-top: 16px; }
.incitation p + p { margin-top: 10px; }
.incitation-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
/* envoi offert : l'ancien prix barré, le nouveau en vert ; et l'économie sous les totaux */
.option .prix del, .resume-totaux del { margin-right: 4px; color: var(--texte-2); font-weight: 450; }
.offert { color: var(--valide); }
.economie { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--valide-fond); color: var(--valide); font-size: 14px; }
.economie .ic { flex: none; font-size: 18px; }

/* emballage cadeau : une case (carrée, coche) dans le style des options */
.option-case input { border-radius: 6px; }
.option-case input::before { width: 11px; height: 6px; border-radius: 0; background: none; border: solid var(--vin); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg) scale(0); }
.option-case input:checked { background: var(--vin); }
.option-case input:checked::before { border-color: var(--champ-fond); transform: translateY(-1px) rotate(-45deg) scale(1); }
.bloc-cadeau .champ { margin-top: 4px; }

/* un vase : l'aperçu, ce qui sera imprimé, Modifier et Retirer */
.objet { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1.5px solid var(--filet); border-radius: 14px; background: var(--surface); }
.objet-apercu { position: relative; display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 24px; background: var(--zone); }
.objet-apercu img { width: 100%; max-width: 220px; height: auto; max-height: 220px; object-fit: contain; border-radius: 6px; }
.sans-apercu { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 250px; padding-top: 16px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--texte-attenue); }
.sans-apercu .ic { font-size: 28px; color: var(--framboise); }
.objet-corps { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }
.objet-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.objet-titre h2 { font-size: 17px; font-weight: 620; font-stretch: 100%; line-height: 1.3; letter-spacing: 0; }
.objet-titre h2:focus { outline: none; }
.objet-titre h2:focus-visible { outline: 2px solid var(--vin); outline-offset: 2px; }
.objet-prix { font-size: 17px; font-weight: 620; white-space: nowrap; font-variant-numeric: tabular-nums; }

.objet-lignes { margin: 0; display: flex; flex-direction: column; }
.objet-lignes > div { display: grid; grid-template-columns: clamp(100px, 30%, 120px) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--filet); font-size: 14px; line-height: 1.45; }
.objet-lignes dt { color: var(--texte-2); }
.objet-lignes dd { margin: 0; overflow-wrap: anywhere; }

.objet-nouvelle > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.objet-nouvelle .actions-nouvelle { display: flex; flex-wrap: wrap; gap: 0 20px; }

.objet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: auto; }
.objet-actions .btn-ligne { min-height: 48px; padding: 0 20px; font-size: 15px; }
.objet-retirer { font-size: 14px; }

/* le bloc s'ouvre en deux colonnes dès que la colonne de gauche est assez large (ordinateur, tablette) ;
   l'aperçu y prend 340 px à 1440 px de large, un peu moins sur une tablette */
@container principal (min-width: 640px) {
  .objet { grid-template-columns: min(340px, 42%) minmax(0, 1fr); border-radius: 16px; }
  .objet-apercu { padding: 36px; }
  .objet-apercu .rendu { left: 14px; top: 14px; }
  .objet-apercu img { max-width: 260px; max-height: 260px; }
  .objet-corps { gap: 16px; padding: 28px 32px; }
  .objet-titre h2 { font-size: 22px; font-stretch: 88%; line-height: 1.2; }
  .objet-prix { font-size: 20px; }
  .objet-lignes > div { gap: 16px; padding: 9px 0; font-size: 15px; }
}

/* ------------------------------------------------------------------ coordonnées, livraison, paiement */
.commande-formulaire { display: flex; flex-direction: column; gap: 48px; }
.commande .bloc { gap: 12px; }
.commande .bloc legend { margin-bottom: 16px; }
.commande .bloc legend h2 { font-size: clamp(22px, 1rem + 0.9vw, 28px); font-weight: 620; font-stretch: 82%; line-height: 1.15; letter-spacing: 0; }
.champs-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.champs-grille .large { grid-column: 1 / -1; }
.champs-grille > .aide { margin-top: -6px; }
.champ label { width: fit-content; cursor: pointer; }
@media (max-width: 560px) {
  .champs-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

.choix-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@container principal (min-width: 640px) {
  .choix-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
.choix { display: flex; flex-direction: column; gap: 10px; }
.option > .ic { font-size: 24px; color: var(--vin); }
.option .prix { text-align: right; }
.commande .bloc .encadre { margin-top: 4px; }

.bloc-conditions { display: flex; flex-direction: column; gap: 12px; }
.bloc-conditions .case { min-height: 44px; }
.bloc-conditions .case + .aide, .bloc-conditions .erreur-champ + .aide { margin-top: -6px; }   /* 14 jours et garantie, sous la case */
.donnees { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.liens-aide { display: flex; flex-wrap: wrap; gap: 0 20px; }
.liens-aide .lien-mineur { font-size: 14px; }

/* ------------------------------------------------------------------ récapitulatif */
.resume { min-width: 0; }
.resume-boite { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 14px; background: var(--zone); font-size: 15px; line-height: 1.45; }
.resume-boite h2 { font-size: 22px; font-weight: 620; font-stretch: 85%; line-height: 1.15; letter-spacing: 0; }
.resume-objets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.resume-objets li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; line-height: 1.4; }
.resume-objets .nom { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.resume-objets .montant, .resume-totaux .montant { white-space: nowrap; font-variant-numeric: tabular-nums; }
.resume-totaux { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--filet-vin); }
.resume-totaux .ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.resume-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--filet-vin); }
.resume-total .libelle { font-size: 17px; font-weight: 620; }
.resume-total .montant { font-size: 26px; font-weight: 640; font-stretch: 90%; line-height: 1.1; text-align: right; font-variant-numeric: tabular-nums; }
.resume-total .montant small { font-size: 17px; font-weight: 620; font-stretch: 100%; }
.mention-tva { margin-top: -8px; font-size: 13.5px; line-height: 1.45; text-align: right; color: var(--texte-2); }   /* statut TVA, sous le total */
.resume .encadre { background: var(--fond); }
.resume .envoyer { width: 100%; margin-top: 2px; font-size: 17px; }
.raison { font-size: 13.5px; line-height: 1.45; text-align: center; color: var(--texte-2); }
.secours { display: flex; flex-wrap: wrap; gap: 10px; }
.secours > * { flex: 1 1 180px; }

@media (min-width: 1100px) {
  .resume { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 16px; }
  .resume-boite { padding: 28px; border-radius: 16px; }
  .resume-total .montant { font-size: 30px; }
  .dates-livraison { display: none; }      /* sur ordinateur, les dates sont dans le récapitulatif */
}
@media (max-width: 1099px) {
  /* téléphone et tablette : le récapitulatif vient après le paiement ; les vases viennent d'être relus, on n'en garde que les totaux */
  .resume-boite h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .resume-objets { display: none; }
  .resume-totaux { padding-top: 0; border-top: 0; }
  .dates-resume { display: none; }
}

/* ------------------------------------------------------------------ panier vide, retrait */
.panier-vide { max-width: 44rem; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 0 32px; }
.panier-vide > .ic { font-size: 44px; color: var(--framboise); }
.panier-vide p { font-size: 17px; line-height: 1.55; color: var(--texte-attenue); }
.panier-vide .boutons { margin-top: 8px; }
.retrait { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-bottom: 24px; padding: 4px 12px 4px 16px; border: 1px solid var(--filet); border-radius: 12px; background: var(--surface); font-size: 15px; }
.retrait p { padding: 10px 0; }

/* ------------------------------------------------------------------ confirmation (merci.html) */
.merci { display: flex; flex-direction: column; gap: 40px; }
.merci-tete { max-width: 46rem; display: flex; flex-direction: column; gap: 14px; }
.merci-tete h1 { font-size: clamp(36px, 1rem + 3vw, 64px); font-weight: 630; font-stretch: 70%; line-height: 0.98; }
.merci-tete .intro { font-size: clamp(17px, 0.9rem + 0.4vw, 20px); line-height: 1.55; color: var(--texte-attenue); }
.merci-tete .encadre { margin-top: 6px; font-size: 15px; }
.merci-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1000px) { .merci-grille { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; } }
.merci-grille:has(> .resume[hidden]) { grid-template-columns: minmax(0, 1fr); }   /* page ouverte sans commande : la suite seule */
.merci-grille .resume-boite h2 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
.merci-grille .resume-objets { display: flex; }
.merci-grille .resume-totaux { padding-top: 12px; border-top: 1px solid var(--filet-vin); }
.suite { display: flex; flex-direction: column; gap: 20px; }
.suite h2 { font-size: clamp(28px, 1rem + 1.6vw, 40px); font-weight: 630; font-stretch: 72%; line-height: 1; }
.suite ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .suite ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.suite li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 14px; background: var(--zone); }
.suite .repere { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--vin); color: var(--fond); font-size: 15px; font-weight: 700; }
.suite h3 { font-size: 22px; font-weight: 630; font-stretch: 80%; line-height: 1.15; }
.suite p { font-size: 15.5px; line-height: 1.55; color: var(--texte-attenue); }
.suite .quand { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--filet-vin); font-size: 14px; font-weight: 620; color: var(--framboise); }
.merci-pied { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.merci-pied p { max-width: 46rem; font-size: 15.5px; }
.recap-telecharger { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--filet-vin); }
.recap-telecharger .btn-ligne { width: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ page introuvable (404.html) */
.introuvable { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; }
.introuvable h1 { font-size: clamp(40px, 1.2rem + 4vw, 72px); font-weight: 630; font-stretch: 68%; line-height: 0.95; }
.introuvable .intro { font-size: clamp(17px, 0.9rem + 0.4vw, 20px); line-height: 1.55; color: var(--texte-attenue); }
.liens-objets { list-style: none; margin: 8px 0 12px; padding: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .liens-objets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.liens-objets a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border: 1.5px solid var(--bord-choix); border-radius: 12px; background: var(--surface);
  font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.liens-objets a:hover { border-color: var(--vin); color: var(--vin); }
.liens-objets .ic { font-size: 24px; color: var(--framboise); }
.liens-objets span { flex: 1; }
.liens-objets .ic:last-child { font-size: 18px; color: var(--vin); }