/* ============================================================
   PANIER — proprietaire unique de l'apparence de panier.html.

   Reconstruit le 21/09 a partir des jetons releves en direct sur
   les pages de vente d'Apple (apple.com/shop/bag et le formulaire
   de commande secure7.store.apple.com), pas de memoire :

     fond de page        #fff
     texte               #1d1d1f
     texte secondaire    #6e6e73
     filet               1px #d2d2d7
     corps               17px / 25px / -0.374px, SF Pro Text
     titre de page       40px / 600, SF Pro Display
     champ               hauteur 56, rayon 12, bord 1px #86868b,
                         etiquette flottante #6e6e73 a 18/17,
                         transition .125s ease-in, focus bord #0071e3
     bouton principal    #0071e3, blanc, rayon 12, 17px/400, 17px 30px
     bouton secondaire   fond transparent, texte et bord #0066cc

   Une seule source par propriete : la page n'emprunte plus .button
   a styles.css, elle nomme ses propres commandes. Aucune contre-regle
   n'annule ici une regle globale.

   Apple §1  la reponse vit sur l'appui.
   Apple §7  ce qui s'ouvre repart par le meme chemin.
   Apple §15 le creneau se resserre quand le texte grandit.
   Apple §16.6 la hierarchie fait la simplicite, pas le retrait.
   ============================================================ */

body.pan-clair {
  background: #fff;
}

.pan {
  --encre: #1d1d1f;
  --encre-douce: #6e6e73;
  --filet: #d2d2d7;
  --nappe: #f5f5f7;
  --bleu: #0071e3;
  --bleu-lien: #0066cc;
  --bord-champ: #86868b;
  --rayon: 12px;
  --rayon-bloc: 18px;
  --texte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --titrage: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);

  background: #fff;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -.374px;
  -webkit-font-smoothing: antialiased;
  padding: 48px 0 96px;
}

.pan *,
.pan *::before,
.pan *::after {
  box-sizing: border-box;
}

.pan__shell {
  width: min(1060px, calc(100% - 48px));
  margin-inline: auto;
}

.pan__titre {
  margin: 0;
  font-family: var(--titrage);
  font-size: 40px;
  line-height: 46px;
  font-weight: 600;
  letter-spacing: -.4px;
  color: var(--encre);
}

.pan__compte {
  margin: 6px 0 0;
  color: var(--encre-douce);
  font-size: 17px;
  line-height: 25px;
}

/* --- Panier vide : une phrase, une sortie ------------------ */

.pan__rien {
  margin-top: 40px;
  padding-bottom: 40px;
}

.pan__rien p {
  margin: 0 0 24px;
  color: var(--encre-douce);
}

/* --- Corps : contenu a gauche, recapitulatif a droite ------ */

.pan__corps:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  align-items: start;
  margin-top: 40px;
}

/* --- Lignes du panier -------------------------------------- */

.ligne {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--filet);
  /* Apple §14 : la suppression se retire en fondu, sans deplacement
     vertical brutal. panier.js attend la fin de cette transition. */
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.ligne:last-of-type {
  border-bottom: 1px solid var(--filet);
}

.ligne.part {
  opacity: 0;
  transform: translateY(-6px);
}

.ligne__scene {
  width: 104px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--nappe);
  border-radius: var(--rayon);
  overflow: hidden;
}

.ligne__scene img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ligne__nom {
  margin: 0;
  font-family: var(--titrage);
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--encre);
}

.ligne__pour,
.ligne__traite {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.016em;
  color: var(--encre-douce);
}

.ligne__prix {
  text-align: right;
  font-size: 17px;
  line-height: 23px;
  color: var(--encre);
  white-space: nowrap;
}

.ligne__prix strong {
  font-weight: 600;
}

.ligne__unite {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--encre-douce);
  font-weight: 400;
}

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

/* --- Reglage de quantite ----------------------------------- */

.pas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--nappe);
  border-radius: var(--rayon);
  padding: 2px;
}

.pas button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease-out;
}

.pas button:hover {
  background: rgba(0, 0, 0, .06);
}

.pas button:active {
  transform: scale(.96);
}

.pas button:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.pas output {
  min-width: 28px;
  text-align: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}

.retirer {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--bleu-lien);
  cursor: pointer;
}

.retirer:hover {
  text-decoration: underline;
}

.retirer:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Seuil des 200 000 litres ------------------------------ */

.seuil {
  margin-top: 28px;
  padding: 28px;
  background: var(--nappe);
  border-radius: var(--rayon-bloc);
}

.seuil__t {
  margin: 0;
  font-family: var(--titrage);
  font-size: 21px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.seuil__d {
  margin: 8px 0 20px;
  font-size: 15px;
  line-height: 22px;
  color: var(--encre-douce);
}

.seuil__d strong {
  color: var(--encre);
  font-weight: 600;
}

/* --- Moyens de paiement ------------------------------------ */

.moyens {
  margin-top: 44px;
}

.moyens__t {
  margin: 0 0 16px;
  font-family: var(--titrage);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.moyen:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.moyen:first-of-type {
  margin-bottom: 12px;
}

.moyen:hover {
  background: var(--nappe);
}

/* Apple §1 : la reponse vit sur l'appui, pas sur le relachement. Au
   toucher il n'y a pas de survol : sans ce doublon le seul retour est
   la pastille qui s'anime 200ms plus tard. */
.moyen:active {
  background: var(--nappe);
}

/* Apple §16.4 : la selection se voit a la bordure qui s'epaissit,
   pas a un fond colore qui repeindrait toute la carte. */
.moyen:has(input:checked) {
  border-color: var(--bleu);
  box-shadow: inset 0 0 0 1px var(--bleu);
}

/* La pastille dit sa taille au complet — hauteur, largeur, marges,
   remplissage. styles.css impose 48 px de haut a tout champ pour la
   cible tactile ; ici la cible, c'est le <label> entier. */
.moyen input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--bord-champ);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.moyen input::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
  transform: scale(.4);
  opacity: 0;
  transition: transform .2s var(--ease), opacity .15s ease;
}

.moyen input:checked {
  border-color: var(--bleu);
  background: var(--bleu);
}

.moyen input:checked::after {
  transform: scale(1);
  opacity: 1;
}

.moyen input:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.moyen__nom {
  display: block;
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.moyen__dit {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--encre-douce);
}

.marques {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.marques i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 24px;
  border: 1px solid var(--filet);
  border-radius: 6px;
  background: #fff;
}

.marques img {
  display: block;
  width: auto;
  height: auto;
  max-width: 22px;
  max-height: 12px;
}

/* --- Livraison --------------------------------------------- */

.livr {
  margin-top: 44px;
}

.livr__retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
  font: inherit;
  font-size: 17px;
  color: var(--bleu-lien);
  cursor: pointer;
}

.livr__retour svg {
  transition: transform .2s var(--ease);
}

.livr__retour:hover {
  text-decoration: underline;
}

.livr__retour:hover svg {
  transform: translateX(-3px);
}

.livr__t {
  margin: 0;
  font-family: var(--titrage);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.livr__d {
  margin: 6px 0 24px;
  color: var(--encre-douce);
}

.champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Etiquette flottante Apple : le libelle occupe le champ tant qu'il
   est vide, puis remonte quand le client ecrit. Le <span> reste
   apres l'<input> dans le flux, le champ garde son etiquette
   implicite. */
.champ {
  position: relative;
  display: block;
  min-height: 56px;
}

.champ input,
.champ textarea {
  width: 100%;
  min-height: 56px;
  padding: 22px 16px 6px;
  border: 1px solid var(--bord-champ);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .8);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 21px;
  letter-spacing: -.374px;
  transition: border-color .2s ease;
}

.champ textarea {
  min-height: 92px;
  padding-top: 26px;
  resize: vertical;
}

.champ input:hover,
.champ textarea:hover {
  border-color: var(--encre-douce);
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
}

.champ input[readonly] {
  background: var(--nappe);
  color: var(--encre-douce);
}

.champ input[readonly]:hover {
  border-color: var(--bord-champ);
}

.champ > span {
  position: absolute;
  top: 18px;
  left: 17px;
  color: var(--encre-douce);
  font-size: 17px;
  line-height: 21px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .125s ease-in, color .125s ease-in;
}

.champ:has(input:focus) > span,
.champ:has(textarea:focus) > span,
.champ:has(input:not(:placeholder-shown)) > span,
.champ:has(textarea:not(:placeholder-shown)) > span,
.champ:has(input[readonly]) > span {
  transform: translateY(-9px) scale(.706);
}

.champ:has(input:focus) > span,
.champ:has(textarea:focus) > span {
  color: var(--bleu);
}

.champ--large {
  grid-column: 1 / -1;
}

.champ--court {
  max-width: 160px;
}

.champ__note {
  display: block;
  margin: 6px 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  color: var(--encre-douce);
}

/* Le rouge n'arrive qu'apres une tentative d'envoi : signaler un
   champ que le client n'a pas encore rempli serait un reproche. */
.livr.verifie .champ input:invalid,
.livr.verifie .champ textarea:invalid {
  border-color: #b3261e;
}

.memo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  cursor: pointer;
}

.memo input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  padding: 0;
  margin: 2px 0 0;
  border: 1px solid var(--bord-champ);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}

.memo input:checked {
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3.2L11 1.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
  border-color: var(--bleu);
}

.memo input:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.memo span {
  display: block;
}

.memo strong {
  display: block;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
}

.memo em {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 17px;
  font-style: normal;
  color: var(--encre-douce);
}

.livr__envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 28px;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--bleu);
  color: #fff;
  font-family: var(--texte);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.374px;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease-out;
}

.livr__envoyer:hover {
  background: #0077ed;
}

.livr__envoyer:active {
  transform: scale(.985);
}

.livr__envoyer[disabled] {
  opacity: .5;
  cursor: default;
  transform: none;
}

.livr__etat {
  margin: 14px 0 0;
  min-height: 21px;
  font-size: 14px;
  line-height: 21px;
  color: var(--encre-douce);
}

.livr__etat.faux {
  color: #b3261e;
}

/* --- QR-facture -------------------------------------------- */

.qrf {
  margin-top: 40px;
  padding: 32px;
  background: var(--nappe);
  border-radius: var(--rayon-bloc);
}

.qrf__t {
  margin: 0;
  font-family: var(--titrage);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.qrf__d {
  margin: 8px 0 24px;
  font-size: 15px;
  line-height: 22px;
  color: var(--encre-douce);
}

.qrf__feuille {
  background: #fff;
  border-radius: var(--rayon);
  padding: 16px;
  overflow-x: auto;
}

.qrf__feuille svg {
  display: block;
  width: 100%;
  min-width: 480px;   /* facture SIX 210 mm : sous ce seuil un scanner ne la lit plus */
  height: auto;
  max-width: 100%;
}

.qrf__repli {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--encre);
}

.qrf__telecharger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-top: 20px;
  padding: 17px 30px;
  border: 1px solid var(--bleu-lien);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--bleu-lien);
  font-family: var(--texte);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.374px;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease-out;
}

.qrf__telecharger:hover {
  background: rgba(0, 102, 204, .06);
}

.qrf__telecharger:active {
  transform: scale(.985);
}

/* --- Commande confirmee ------------------------------------ */

.fini {
  margin-top: 40px;
  padding: 32px;
  background: var(--nappe);
  border-radius: var(--rayon-bloc);
}

.fini__t {
  margin: 0;
  font-family: var(--titrage);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.fini__d {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 25px;
  color: var(--encre-douce);
}

/* --- Liens de retour --------------------------------------- */

.pan__retour:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-size: 17px;
  color: var(--bleu-lien);
  text-decoration: none;
}

.pan__retour svg {
  transition: transform .2s var(--ease);
}

.pan__retour:hover {
  text-decoration: underline;
}

.pan__retour:hover svg {
  transform: translateX(-3px);
}

.seuil__lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid var(--bleu-lien);
  border-radius: var(--rayon);
  color: var(--bleu-lien);
  font-size: 17px;
  text-decoration: none;
  transition: background .2s ease, transform .12s ease-out;
}

.seuil__lien:hover {
  background: rgba(0, 102, 204, .06);
}

.seuil__lien:active {
  transform: scale(.985);
}

/* --- Recapitulatif ----------------------------------------- */

.pan__resume {
  position: sticky;
  top: 104px;
  padding: 28px;
  background: var(--nappe);
  border-radius: var(--rayon-bloc);
}

.pan__resume h2 {
  margin: 0 0 20px;
  font-family: var(--titrage);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.compte {
  margin: 0;
}

.compte__l {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.compte__l dt {
  color: var(--encre-douce);
  font-size: 15px;
  line-height: 22px;
}

.compte__l dd {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compte__l dd.vide {
  color: var(--encre-douce);
}

.compte__l dd.offert {
  color: #1d7a33;
}

.compte__l--total {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
}

.compte__l--total dt {
  color: var(--encre);
  font-size: 17px;
  font-weight: 600;
}

.compte__l--total dd {
  font-family: var(--titrage);
  font-size: 21px;
  line-height: 27px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.compte__astuce {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--encre-douce);
}

.pan__payer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 20px;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--bleu);
  color: #fff;
  font-family: var(--texte);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.374px;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease-out;
}

.pan__payer:hover {
  background: #0077ed;
}

.pan__payer:active {
  transform: scale(.985);
}

.pan__legal {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--encre-douce);
}

/* --- Largeurs ---------------------------------------------- */

@media (max-width: 980px) {
  .pan__corps:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .pan__resume {
    position: static;
  }
}

@media (max-width: 760px) {
  .pan {
    padding: 32px 0 72px;
  }

  .pan__shell {
    width: calc(100% - 32px);
  }

  .pan__titre {
    font-size: 32px;
    line-height: 38px;
  }

  .champs {
    grid-template-columns: 1fr;
  }

  .champ--court {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .ligne {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }

  .ligne__scene {
    width: 72px;
  }

  .ligne__prix {
    grid-column: 2;
    text-align: left;
  }

  .moyen:not([hidden]) {
    flex-wrap: wrap;
  }

  .marques {
    margin-left: 34px;
  }
}

@media (max-width: 560px) {
  .qrf,
  .fini,
  .seuil,
  .pan__resume {
    padding: 24px 20px;
  }
}

/* --- Reglages systeme --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ligne,
  .pas button,
  .moyen,
  .moyen input,
  .moyen input::after,
  .champ > span,
  .champ input,
  .champ textarea,
  .livr__envoyer,
  .livr__retour svg,
  .pan__payer,
  .pan__retour svg,
  .qrf__telecharger,
  .seuil__lien {
    transition: none;
  }

  .livr__envoyer:active,
  .pan__payer:active,
  .qrf__telecharger:active,
  .seuil__lien:active,
  .pas button:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .champ input,
  .champ textarea {
    background: #fff;
  }
}

@media (prefers-contrast: more) {
  .pan {
    --encre-douce: #4b4b50;
    --filet: #8e8e93;
    --bord-champ: #1d1d1f;
  }

  .moyen:not([hidden]) {
    border-width: 2px;
  }
}