/* ==========================================================================
   Atelier Overlay · panier : bouton d'en-tête, fenêtre des options, tiroir.
   Chargée sur les pages avec le menu principal et sur /commander/.
   Utilise les jetons de couleur de site.css / commande.css (thème sombre).
   Toutes les classes commencent par « pn- » (aucune collision avec le site).
   ========================================================================== */

/* Défilement de la page bloqué pendant qu'une fenêtre est ouverte. La largeur de la barre de
   défilement (--pn-gouttiere, mesurée par panier.js) est rendue en marge : la page ne bouge pas
   et le tiroir comme le fond sombre vont jusqu'au bord droit de la fenêtre. */
html.pn-verrou { overflow: hidden; }
html.pn-verrou body { padding-right: var(--pn-gouttiere, 0px); }

/* ---------- Bouton « Panier » de l'en-tête ---------- */
.pn-entete {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 42px; padding: 0 12px; border: 1.5px solid var(--filet-fort); border-radius: 8px;
  background: transparent; color: var(--papier); cursor: pointer; font: 600 14px/1 var(--f-texte);
  transition: border-color .18s, background-color .18s;
}
.pn-entete:hover { border-color: var(--orange); background: var(--vinyle-2); }
.pn-entete svg { flex: none; }
.pn-badge {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: var(--orange); color: var(--encre); font: 700 12px/1 var(--f-mono);
}
.pn-badge[hidden] { display: none; }
/* Jusqu'à 1240 px : icône et nombre d'articles seulement (le menu principal prend la place) */
@media (max-width: 1240px) {
  .pn-entete { padding: 0 10px; }
  .pn-entete__txt { display: none; }
}
/* Mobile et petite tablette : la place manque pour « Commander » et « Panier » côte à côte.
   Panier vide : « Commander » ; panier rempli : le bouton du panier (son tiroir mène à
   « Passer commande ») prend sa place. */
@media (max-width: 760px) {
  html:not(.pn-plein) .pn-entete { display: none; }
  html.pn-plein .nav > .btn--ambre[data-pn-commander] { display: none; }
}
@media (max-width: 680px) {
  .pn-entete { min-height: 40px; }
}

/* ---------- Dialogues (commun) ---------- */
.pn-dialogue {
  padding: 0; border: 0; background: transparent; color: var(--papier);
  max-width: none; max-height: none; overflow: visible;
}
.pn-dialogue::backdrop { background: rgba(8, 7, 10, .82); }
.pn-cadre {
  display: flex; flex-direction: column; min-height: 0; max-height: inherit; height: 100%;
  background: var(--vinyle); border: 1.5px solid var(--graphite); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.pn-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--filet); }
.pn-etiquette { margin: 0 0 6px; font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange-clair); }
.pn-titre { margin: 0; font: italic 900 clamp(22px, 2.4vw, 28px)/1.1 var(--f-titre); letter-spacing: -.01em; }
.pn-titre:focus { outline: none; }
.pn-titre:focus-visible { outline: 3px solid var(--orange-clair); outline-offset: 4px; }
.pn-sous { margin: 8px 0 0; font: 400 13px/1.5 var(--f-mono); color: var(--gris); }
.pn-fermer {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; margin: -4px -8px 0 0;
  border: 1.5px solid var(--graphite); border-radius: 50%; background: transparent; color: var(--papier); cursor: pointer;
}
.pn-fermer:hover { border-color: var(--orange); background: var(--vinyle-2); }
.pn-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 20px; }
.pn-pied { display: grid; gap: 14px; padding: 16px 24px 20px; border-top: 1px solid var(--filet); background: var(--vinyle-2); }
.pn-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.pn-actions .btn { min-height: 48px; }
.pn-avis {
  margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(255, 91, 20, .45); border-left-width: 3px; border-radius: 0 8px 8px 0;
  background: rgba(255, 91, 20, .08); font-size: 14.5px; line-height: 1.5; color: var(--papier);
}
.pn-statut { margin: 0; padding: 0 24px; font: 400 13.5px/1.5 var(--f-mono); color: var(--ok); }
.pn-statut:empty { display: none; }
.pn-statut:not(:empty) { padding-top: 12px; }

/* ---------- Fenêtre des options ---------- */
.pn-modale { width: min(720px, calc(100vw - 32px)); max-height: min(880px, calc(100dvh - 48px)); margin: auto; }
.pn-groupe { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.pn-groupe__titre { margin-bottom: 8px; padding: 0; font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.pn-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center;
  padding: 13px 16px; border: 1.5px solid var(--graphite); border-radius: 10px; background: var(--encre);
  transition: border-color .15s, background-color .15s;
}
label.pn-option { cursor: pointer; }
.pn-option:hover { border-color: var(--filet-fort); }
.pn-option.est-choisi { border-color: var(--orange); background: rgba(255, 91, 20, .08); }
.pn-option.est-inclus { cursor: default; background: transparent; border-style: dashed; }
.pn-option.est-inclus:hover { border-color: var(--graphite); }
.pn-option__texte { display: grid; gap: 3px; min-width: 0; }
.pn-option__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 650 16px/1.35 var(--f-texte); }
.pn-option__desc { font-size: 13.5px; line-height: 1.5; color: var(--gris); }
.pn-option__meta { font: 500 12.5px/1.5 var(--f-mono); color: var(--texte-2); }
.pn-option__note { font-size: 13px; line-height: 1.45; color: var(--texte-2); font-style: italic; }
.pn-option.est-choisi .pn-option__meta { color: var(--orange-clair); }
.pn-inclus {
  display: inline-block; padding: 2px 8px; border: 1px solid rgba(126, 226, 168, .55); border-radius: 4px;
  font: 700 11px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok);
}
.pn-option--express { background: var(--vinyle-2); }
.pn-option__ctrl { display: inline-flex; align-items: center; justify-self: end; }

/* Case à cocher */
.pn-case {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1.5px solid var(--filet-fort); border-radius: 5px; background: var(--encre); cursor: pointer;
}
.pn-case::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid var(--encre); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .12s; }
.pn-case:checked { background: var(--orange); border-color: var(--orange); }
.pn-case:checked::after { transform: rotate(-45deg) scale(1); }
.pn-case:disabled { cursor: default; opacity: 1; background: transparent; border-color: rgba(126, 226, 168, .55); }
.pn-case:disabled::after { border-color: var(--ok); }
.pn-case:focus-visible { outline: 3px solid var(--orange-clair); outline-offset: 3px; }

/* Interrupteur (livraison express) */
.pn-interrupteur { width: 48px; height: 28px; border-radius: 14px; place-items: center start; padding: 0 3px; background: var(--vinyle-3); }
.pn-interrupteur::after {
  width: 20px; height: 20px; margin: 0; border: 0; border-radius: 50%; background: var(--papier);
  transform: none; transition: transform .15s;
}
.pn-interrupteur:checked { background: var(--orange); border-color: var(--orange); }
.pn-interrupteur:checked::after { transform: translateX(19px); background: var(--encre); }

/* Quantité : − valeur + */
.pn-pas { border: 1.5px solid var(--filet-fort); border-radius: 9px; overflow: hidden; background: var(--encre); }
.pn-pas__btn {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent;
  color: var(--papier); font: 500 22px/1 var(--f-mono); cursor: pointer;
}
.pn-pas__btn:hover { background: var(--vinyle-3); color: var(--orange-clair); }
.pn-pas__btn[aria-disabled="true"] { color: var(--alpha-1, #4A4954); cursor: default; background: transparent; }
.pn-pas__btn:focus-visible { outline: 3px solid var(--orange-clair); outline-offset: -3px; border-radius: 6px; }
.pn-pas__val {
  width: 46px; height: 42px; padding: 0; border: 0; border-inline: 1px solid var(--graphite); background: transparent;
  color: var(--papier); font: 600 17px/1 var(--f-mono); text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.pn-pas__val::-webkit-inner-spin-button, .pn-pas__val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pn-pas__val:focus-visible { outline: 3px solid var(--orange-clair); outline-offset: -3px; }

/* Récapitulatif et total */
.pn-recap { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--graphite); }
.pn-recap__titre { margin: 0 0 10px; font: 700 11.5px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.pn-lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 400 14px/1.45 var(--f-mono); color: var(--texte-2); }
.pn-lignes li { display: flex; justify-content: space-between; gap: 16px; }
.pn-lignes li > span:last-child { white-space: nowrap; color: var(--papier); }
.pn-total { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; }
.pn-total__lib { font: 400 14px var(--f-mono); color: var(--texte-2); }
.pn-total__montant { font: 500 30px/1.1 var(--f-mono); letter-spacing: -.03em; color: var(--papier); white-space: nowrap; }
.pn-total__delai { grid-column: 1 / -1; font: 400 12.5px/1.5 var(--f-mono); color: var(--gris); }

/* ---------- Tiroir du panier ---------- */
.pn-tiroir { width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; }
.pn-tiroir .pn-cadre { border-radius: 0; border-width: 0 0 0 1.5px; }
.pn-article { display: grid; gap: 4px; padding-bottom: 14px; }
.pn-article__nom { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: italic 900 24px/1.15 var(--f-titre); }
.pn-prix { font: 500 18px var(--f-mono); font-style: normal; white-space: nowrap; }
.pn-article__info { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.pn-tiroir .pn-lignes { padding: 14px 0; border-top: 1px dashed var(--graphite); }
.pn-sans { margin: 0; padding: 14px 0; border-top: 1px dashed var(--graphite); font: 400 14px var(--f-mono); color: var(--gris); }
.pn-total--tiroir { padding-top: 14px; border-top: 1px dashed var(--graphite); }
.pn-actions--tiroir { display: grid; grid-template-columns: 1fr 1fr; }
.pn-actions--tiroir .btn { padding: 0 12px; }
.pn-actions--tiroir .pn-commander { grid-column: 1 / -1; min-height: 54px; font-size: 16px; }
.pn-note { margin: 0; font: 400 12.5px/1.5 var(--f-mono); color: var(--gris); }
.pn-vide { display: grid; gap: 8px; padding: 8px 0; color: var(--texte-2); font-size: 15px; }
.pn-vide p { margin: 0; }
.pn-vide__titre { font: italic 900 22px/1.2 var(--f-titre); color: var(--papier); }
.pn-tiroir .pn-actions .btn { width: 100%; }

/* ---------- Petits écrans : feuille qui monte du bas ---------- */
@media (max-width: 600px) {
  .pn-modale, .pn-tiroir { width: 100%; max-width: 100%; height: auto; max-height: 92dvh; margin: auto 0 0; }
  .pn-cadre, .pn-tiroir .pn-cadre { border-radius: 16px 16px 0 0; border-width: 1.5px 0 0; }
  .pn-tete { padding: 14px 16px 12px; }
  .pn-etiquette { display: none; }
  .pn-titre { font-size: 21px; }
  .pn-sous { margin-top: 4px; font-size: 12.5px; }
  .pn-fermer { width: 40px; height: 40px; margin: 0 -6px 0 0; }
  .pn-corps { padding: 16px; }
  .pn-pied { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .pn-statut { padding-inline: 16px; }
  .pn-option { grid-template-columns: minmax(0, 1fr) auto; padding: 12px; gap: 8px 12px; }
  /* Quantité : − 0 + à droite du nom, description et prix dessous sur toute la largeur */
  .pn-option--quantite { row-gap: 4px; }
  .pn-option--quantite .pn-option__texte { display: contents; }
  .pn-option--quantite .pn-option__nom { grid-column: 1; grid-row: 1; align-self: center; }
  .pn-option--quantite .pn-option__ctrl { grid-column: 2; grid-row: 1; }
  .pn-option--quantite .pn-option__desc, .pn-option--quantite .pn-option__note, .pn-option--quantite .pn-option__meta { grid-column: 1 / -1; }
  .pn-total__montant { font-size: 25px; }
  .pn-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .pn-actions--tiroir { grid-template-columns: minmax(0, 1fr) auto; }
  .pn-actions .btn { width: 100%; padding: 0 12px; }
  .pn-pas__btn { width: 42px; height: 42px; }
  .pn-pas__val { width: 42px; height: 42px; }
}

/* ---------- Écrans bas (téléphone à l'horizontale, zoom à 200 %) ----------
   Toute la fenêtre défile (l'en-tête part avec le contenu) ; le pied reste collé en bas, compact. */
@media (max-height: 520px) {
  .pn-modale { max-height: calc(100dvh - 16px); }
  .pn-dialogue .pn-cadre { overflow-y: auto; overscroll-behavior: contain; }
  .pn-dialogue .pn-corps { flex: none; overflow: visible; }
  .pn-dialogue .pn-pied { position: sticky; bottom: 0; z-index: 1; padding: 8px 16px; gap: 6px; }
  .pn-etiquette, .pn-note { display: none; }
  .pn-tete { padding: 12px 16px 10px; }
  .pn-titre { font-size: 20px; }
  .pn-total { row-gap: 0; }
  .pn-total__montant { font-size: 21px; }
  .pn-total__delai { font-size: 11.5px; line-height: 1.35; }
  .pn-actions .btn { min-height: 40px; }
  .pn-actions--tiroir .pn-commander { min-height: 42px; font-size: 15px; }
}

/* ---------- Mode contraste élevé (Windows) : interrupteur et choix toujours lisibles ---------- */
@media (forced-colors: active) {
  .pn-case { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .pn-case::after { border-color: Canvas; }
  .pn-case:checked { background: Highlight; border-color: Highlight; }
  .pn-case:checked::after { border-color: HighlightText; }
  .pn-case:disabled { background: Canvas; border-color: GrayText; }
  .pn-case:disabled::after { border-color: GrayText; }
  .pn-interrupteur::after { background: CanvasText; }
  .pn-interrupteur:checked::after { background: HighlightText; }
  .pn-option.est-choisi { border-color: Highlight; border-width: 3px; }
  .pn-badge { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pn-pas__btn[aria-disabled="true"] { color: GrayText; }
}

/* ---------- Animations (seulement si l'utilisateur ne demande pas moins d'animations) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pn-dialogue.pn-anime[open]::backdrop { animation: pn-fondu .2s ease-out; }
  .pn-modale.pn-anime[open] .pn-cadre { animation: pn-entree .24s cubic-bezier(.2, .7, .2, 1); }
  .pn-tiroir.pn-anime[open] .pn-cadre { animation: pn-droite .26s cubic-bezier(.2, .7, .2, 1); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .pn-modale.pn-anime[open] .pn-cadre, .pn-tiroir.pn-anime[open] .pn-cadre { animation: pn-monte .28s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes pn-fondu { from { opacity: 0; } }
@keyframes pn-entree { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes pn-droite { from { transform: translateX(40px); opacity: 0; } }
@keyframes pn-monte { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pn-entete, .pn-option, .pn-case::after, .pn-interrupteur::after { transition: none; }
}