/* ============================================================
   PANIER — page separee. Les lignes commandees, le recapitulatif,
   le paiement.

   TYPOGRAPHIE APPLE. SF Pro ne peut pas etre servi depuis
   ntropyx.com : les fichiers sont sous licence Apple. La pile
   systeme donne le VRAI SF Pro sur macOS et iOS, rendu par le
   systeme, avec ses tables de chasse et son corps optique.
   Apple separe Display au-dessus de 20 pt et Text au-dessous ;
   -apple-system bascule seul, on nomme les deux pour le reste.
   Portee limitee a .pan : le reste du site ne bouge pas.
   ============================================================ */
.pan {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", Roboto, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
             "Segoe UI", Roboto, system-ui, sans-serif;
  --filet: rgba(248,243,228,.11);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: clamp(46px, 6vw, 92px) 0 clamp(56px, 7vw, 104px);
}
.pan__shell { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }

/* Le titre porte la page. Chez Apple le grand corps resserre sa chasse. */
.pan__titre {
  margin: 0; font-family: var(--display);
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.03; letter-spacing: -.032em; font-weight: 700;
}
.pan__compte {
  margin: 12px 0 0; color: var(--paper-dim);
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
}

/* Deux colonnes : les lignes respirent a gauche, le recapitulatif
   suit le regard a droite. */
/* Le selecteur porte la condition : sans elle, ce display l'emporte sur la
   regle du navigateur et le corps du panier restait a l'ecran par-dessus le
   message "panier vide", les deux ensemble. */
.pan__corps:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(32px, 4vw, 68px);
  margin-top: clamp(30px, 3.6vw, 52px);
  align-items: start;
}

/* ---- Une ligne commandee. Filet au-dessus, jamais de boite. ---- */
.ligne {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: clamp(15px, 1.8vw, 24px);
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--filet);
  /* Le retrait replie la ligne au lieu de la faire disparaitre :
     0fr est animable, une hauteur en pixels ne l'est pas sans mesure. */
  transition: opacity 300ms cubic-bezier(.16,1,.3,1);
}
.ligne:last-of-type { border-bottom: 1px solid var(--filet); }
.ligne.part { opacity: 0; }

.ligne__scene {
  height: 96px; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 68%, rgba(216,192,113,.1), transparent 64%);
}
.ligne__scene img {
  max-width: 100%; max-height: 96px; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 9px 14px rgba(0,0,0,.5));
}

.ligne__nom {
  margin: 0; font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.014em; line-height: 1.3;
}
.ligne__pour {
  margin: 5px 0 0; color: var(--paper-soft);
  font-size: .875rem; line-height: 1.45; letter-spacing: -.006em;
}
.ligne__traite {
  margin: 3px 0 0; color: var(--paper-dim);
  font-size: .8125rem; letter-spacing: -.004em;
  font-variant-numeric: tabular-nums;
}

.ligne__reglage { display: flex; align-items: center; gap: 14px; margin-top: 11px; }

/* Compteur : trois zones de 32 px, la valeur en chiffres tabulaires
   pour que la largeur ne bouge pas entre 1 et 8. */
.pas {
  display: inline-flex; align-items: center;
  border: 1px solid var(--filet); border-radius: 9px; overflow: hidden;
}
.pas button {
  width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--paper); cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 140ms cubic-bezier(.16,1,.3,1);
}
.pas button:hover { background: rgba(248,243,228,.07); }
/* La reponse est au geste, pas au relachement. */
.pas button:active { background: rgba(248,243,228,.13); }
.pas button:focus-visible { outline-offset: -2px; }
.pas output {
  min-width: 40px; text-align: center;
  font-size: .9375rem; font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--filet);
  line-height: 44px;
}

.retirer {
  border: 0; background: transparent; cursor: pointer;
  /* La cible fait 44 px sans que le texte grossisse : le negatif rend
     l'espace pris a la mise en page. */
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 8px; margin: -8px;
  color: var(--paper-dim); font-size: .8125rem; letter-spacing: -.004em;
  font-family: inherit; text-underline-offset: 3px;
  transition: color 150ms cubic-bezier(.16,1,.3,1);
}
.retirer:hover { color: var(--paper); text-decoration: underline; }
.retirer:focus-visible { border-radius: 4px; }

.ligne__prix { text-align: right; }
.ligne__prix strong {
  display: block; font-family: var(--display);
  font-size: 1.22rem; font-weight: 600; letter-spacing: -.018em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ligne__unite {
  display: block; margin-top: 5px; color: var(--paper-dim);
  font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* La condition est dans le selecteur : sans elle, ce display l'emporte sur la
   regle du navigateur et le lien restait affiche sous le formulaire de
   livraison, offrant une sortie du tunnel au milieu de la saisie. */
.pan__retour:not([hidden]) {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px; padding: 13px 4px; color: var(--paper-soft);
  font-size: .9375rem; text-decoration: none; letter-spacing: -.008em;
  transition: color 150ms cubic-bezier(.16,1,.3,1);
}
.pan__retour:hover { color: var(--paper); }
.pan__retour svg { transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.pan__retour:hover svg { transform: translateX(-3px); }

/* ---- Recapitulatif. Colle au defilement, translucide : le contenu
   passe dessous au lieu de buter. ---- */
.pan__resume {
  position: sticky; top: 92px;
  border: 1px solid var(--line-gold); border-radius: 18px;
  background: rgba(6,10,8,.66);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  padding: clamp(20px, 2.2vw, 27px);
}
.pan__resume h2 {
  margin: 0 0 4px; font-family: var(--display);
  font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em;
}

.compte { display: grid; gap: 11px; margin-top: 17px; }
.compte__l { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.compte__l dt { color: var(--paper-soft); font-size: .9375rem; letter-spacing: -.008em; }
.compte__l dd {
  margin: 0; font-size: .9375rem; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compte__l--total {
  margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--filet);
  align-items: baseline;
}
.compte__l--total dt { color: var(--paper); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.014em; }
.compte__l--total dd {
  font-family: var(--display); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -.024em;
}
.vide { color: var(--paper-dim); }
.compte__l dd.offert { color: var(--gold-hi); }

/* ---- Livraison. Le formulaire remplace le panier dans la colonne de gauche,
   le recapitulatif reste a droite : on saisit en voyant ce qu'on paie. Une
   seule colonne de champs, larges, dans l'ordre ou on ecrit une adresse.
   Aucun display n'est pose sur le formulaire lui-meme : un form est deja un
   bloc, et lui en donner un empecherait l'attribut hidden de le cacher. ---- */
.livr__retour {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--paper-soft); font: inherit; font-size: .9375rem;
  transition: color 180ms cubic-bezier(.16, 1, .3, 1);
}
.livr__retour:hover { color: var(--paper); }
.livr__retour svg { transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.livr__retour:hover svg { transform: translateX(-3px); }

.livr__t {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.022em;
}
.livr__d { margin: 8px 0 0; color: var(--paper-dim); font-size: .9375rem; line-height: 1.5; }

/* Deux colonnes des qu'il y a la place ; les champs longs prennent la ligne. */
.champs {
  margin-top: clamp(22px, 2.6vw, 32px);
  display: grid; gap: clamp(12px, 1.4vw, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.champ--large { grid-column: 1 / -1; }
.champ--court { max-width: 190px; }

.champ { display: grid; gap: 7px; }
.champ > span {
  color: var(--paper-dim); font-size: .8125rem; letter-spacing: -.004em;
}
.champ input, .champ textarea {
  width: 100%; min-height: 46px; padding: 12px 14px;
  border: 1px solid var(--filet); border-radius: var(--r-s, 12px);
  background: rgba(255, 255, 255, .045);
  color: var(--paper); font: inherit; font-size: 1rem;
  transition:
    border-color 180ms cubic-bezier(.16, 1, .3, 1),
    background-color 180ms cubic-bezier(.16, 1, .3, 1);
}
.champ textarea { min-height: 92px; padding-top: 11px; resize: vertical; line-height: 1.5; }
.champ input:hover, .champ textarea:hover { background: rgba(255, 255, 255, .07); }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--gold-hi); background: rgba(255, 255, 255, .075);
}
.champ input[readonly] { color: var(--paper-soft); cursor: default; }
.champ input[readonly]:hover { background: rgba(255, 255, 255, .045); }

/* Le defaut ne se dit qu'apres une tentative d'envoi : signaler pendant que le
   client tape encore, c'est le prendre en faute avant qu'il ait fini. */
.livr.verifie .champ input:invalid,
.livr.verifie .champ textarea:invalid { border-color: rgba(224, 122, 95, .85); }

.champ__note {
  color: var(--paper-dim); font-size: .75rem; font-style: normal; letter-spacing: -.002em;
}

.memo {
  margin-top: clamp(20px, 2.4vw, 28px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start; cursor: pointer;
}
.memo input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--gold-hi); }
.memo span { display: grid; gap: 4px; }
.memo strong { font-size: .9375rem; font-weight: 500; letter-spacing: -.006em; }
.memo em { color: var(--paper-dim); font-size: .8125rem; font-style: normal; line-height: 1.45; }

.livr__envoyer { margin-top: clamp(22px, 2.6vw, 30px); width: 100%; }
.livr__envoyer[disabled] { opacity: .55; cursor: default; }

.livr__etat { margin: 12px 0 0; min-height: 1.2em; color: var(--paper-dim); font-size: .875rem; line-height: 1.5; }
.livr__etat.faux { color: rgba(224, 122, 95, .95); }

/* Commande passee : la page ne garde que la confirmation. */

/* ---- QR-facture. Le bloc de paiement de la confirmation : une phrase, puis
   la facture officielle au format SIX. Fond blanc impose par la norme — le QR
   doit rester lisible par tous les scanners, on ne le teinte pas. ---- */
.qrf { margin-top: clamp(26px, 3vw, 38px); }
.qrf__t { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.012em; }
.qrf__d { margin: 8px 0 0; max-width: 56ch; color: var(--paper-dim); font-size: .9375rem; line-height: 1.55; }
.qrf__feuille {
  margin-top: clamp(16px, 2vw, 22px);
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid var(--filet); border-radius: var(--r-m, 16px);
  background: #fff;
  overflow-x: auto;            /* la facture fait 210 mm : elle defile au lieu de deborder */
}
.qrf__feuille svg { display: block; width: 100%; min-width: 480px; height: auto; }
.qrf__telecharger { margin-top: clamp(14px, 1.8vw, 20px); }
.qrf__repli {
  margin: 0; color: #101713; font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}

/* ---- Virement. Un encart sobre sous la confirmation : ce sont des chiffres a
   recopier, ils doivent se lire sans effort. L'IBAN est en chiffres tabulaires
   et ne se coupe jamais. ---- */
.banque {
  margin-top: clamp(26px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--filet); border-radius: var(--r-m, 16px);
  background: rgba(255, 255, 255, .045);
  max-width: 52ch;
}
.banque__t {
  margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.012em;
}
.banque__l { margin: 16px 0 0; display: grid; gap: 12px; }
.banque__l > div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 14px; align-items: baseline; }
.banque__l dt { color: var(--paper-dim); font-size: .8125rem; letter-spacing: -.004em; }
.banque__l dd { margin: 0; font-size: .9375rem; line-height: 1.45; }
.banque__iban {
  color: var(--gold-hi); font-variant-numeric: tabular-nums;
  letter-spacing: .01em; white-space: nowrap;
}
.banque__rappel { margin: 16px 0 0; color: var(--paper-dim); font-size: .875rem; line-height: 1.5; }

@media (max-width: 620px) {
  .banque__l > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .banque__iban { white-space: normal; }
}
.fini { padding: clamp(28px, 4vw, 48px) 0; }
.fini__t {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.022em;
  color: var(--gold-hi);
}
.fini__d { margin: 12px 0 0; max-width: 52ch; color: var(--paper-soft); font-size: 1rem; line-height: 1.6; }

@media (max-width: 760px) {
  .champs { grid-template-columns: minmax(0, 1fr); }
  .champ--court { max-width: none; }
}

/* ---- Ce qui reste a gagner sur le port. La phrase se glisse sous le compte,
   dans l'or du site : c'est une information utile, pas une promotion. Elle ne
   parait que lorsqu'elle change une decision, et disparait sinon. ---- */
.compte__astuce {
  margin: 11px 0 0;
  color: var(--gold-hi);
  font-size: .8125rem; line-height: 1.5; letter-spacing: -.004em;
  text-wrap: pretty;
}

/* ---- Seuil de devis. Un encart sobre, pas une alerte : ce n'est pas une
   erreur, c'est un autre chemin d'achat. ---- */
.seuil {
  margin-top: clamp(26px, 3vw, 38px);
  padding: 19px 21px;
  border: 1px solid var(--line-gold); border-radius: 14px;
  background: linear-gradient(150deg, rgba(216,192,113,.075), rgba(216,192,113,.025));
}
.seuil__t {
  margin: 0; font-family: var(--display); font-size: 1.0625rem;
  font-weight: 600; letter-spacing: -.014em;
}
.seuil__d {
  margin: 7px 0 15px; max-width: 62ch; color: var(--paper-soft);
  font-size: .9375rem; line-height: 1.55; letter-spacing: -.008em;
}
.seuil__d strong { color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Paiement. Une liste serree a filets, pas des cartes : le choix
   se lit d'un coup, chaque rangee fait 60 px. Les marques sont les
   fichiers officiels des emetteurs, jamais redessines. ---- */
.moyens { margin-top: clamp(30px, 3.4vw, 46px); }
.moyens__t {
  margin: 0 0 12px; font-family: var(--display);
  font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em;
  text-transform: none; color: var(--paper);
}
/* La condition est dans le selecteur : sans elle, ce display empeche
   l'attribut hidden de retirer une option de paiement. */
.moyen:not([hidden]) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  min-height: 60px; padding: 10px 2px;
  border-bottom: 1px solid var(--filet);
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.16,1,.3,1);
}
.moyen:hover { background: rgba(248,243,228,.028); }
.moyen:first-of-type { border-top: 1px solid var(--filet); }

/* Le rond est dessine, pas emprunte : anneau, puis pastille qui sort
   en ressort. Une seule propriete animee, transform. */
.moyen input {
  appearance: none; -webkit-appearance: none; margin: 0;
  /* styles.css impose min-height:48px et padding:0 14px a tout champ :
     sans ces deux remises a zero le rond sort en ovale de 31 x 48. */
  min-height: 0; padding: 0; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(248,243,228,.34); background: transparent;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 170ms cubic-bezier(.16,1,.3,1);
}
.moyen input::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: #f1dda0; transform: scale(0);
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.moyen input:checked { border-color: #f1dda0; }
.moyen input:checked::after { transform: scale(1); }
.moyen input:focus-visible { outline-offset: 3px; }

.moyen__nom { display: block; font-size: .9375rem; letter-spacing: -.008em; line-height: 1.3; }
.moyen__dit { display: block; margin-top: 3px; color: var(--paper-dim); font-size: .8125rem; line-height: 1.4; }

/* Chaque marque garde ses couleurs deposees. Sur fond sombre le bleu
   Visa et le jaune PostFinance ne tiennent pas : la pastille claire
   est le support standard, elle ne touche pas au logo. */
.marques { display: flex; align-items: center; gap: 5px; }
.marques i {
  display: grid; place-items: center;
  width: 38px; height: 25px; border-radius: 4px;
  background: #fff; padding: 4px 5px;
}
.marques img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.pan__payer { width: 100%; margin-top: 20px; justify-content: center; }
.pan__legal { margin: 13px 0 0; color: var(--paper-dim); font-size: .78rem; line-height: 1.5; }

/* ---- Panier vide. Une phrase, une sortie. ---- */
.pan__rien { padding: clamp(40px, 6vw, 86px) 0; max-width: 46ch; }
.pan__rien p {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.86rem);
  line-height: 1.28; letter-spacing: -.02em; color: var(--paper-soft);
}

@media (max-width: 980px) {
  /* Meme selecteur qu'en haut du fichier : a specificite egale, c'est l'ordre
     qui tranche, et cette regle est la derniere. Ecrite sans la condition, elle
     serait moins specifique et ne s'appliquerait plus. */
  .pan__corps:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .pan__resume { position: static; }
}
@media (max-width: 620px) {
  .ligne { grid-template-columns: 66px minmax(0, 1fr); row-gap: 12px; }
  .ligne__scene { height: 82px; }
  .ligne__scene img { max-height: 82px; }
  .ligne__prix { grid-column: 2; text-align: left; }
  .ligne__prix strong { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ligne, .pas button, .retirer, .moyen input, .moyen input::after, .pan__retour svg { transition: none; }
}
@media (prefers-contrast: more) {
  .pan { --filet: rgba(248,243,228,.28); }
  .pan__resume { background: rgba(4,7,6,.94); }
}

@media (max-width: 560px) {
  .moyen { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .marques { grid-column: 2; }
}

/* Systeme regle sur transparence reduite : le recapitulatif perd son
   verre depoli et devient un fond plein. */
@media (prefers-reduced-transparency: reduce) {
  .pan__resume {
    background: #0a100d;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}