/* =========================================================================
   Panier : ce que site/js/panier.js ajoute au site.

   Cette feuille ne redefinit rien de style.css. Les blocs de la page panier
   reutilisent .panneau, .champ, .bouton, .detail, .message et .titre-carte
   tels quels ; on n'habille ici que ce qui n'existait pas encore : la grille
   articles + recapitulatif, la ligne d'article, la liste des modes de
   livraison, et la confirmation d'ajout de la fiche produit.

   Elle est chargee sur toutes les pages, comme style-formulaire.css et
   style-avis.css, mais tout y est prefixe par .panier ou par une classe posee
   par le script : sans le panier, aucune de ces regles ne s'applique.

   Deux precautions que la page impose, et qui expliquent la forme des
   selecteurs :

   1. **Tout est prefixe par `.panier`**, meme les regles qui n'en auraient pas
      besoin pour ne pas fuir. La page vit dans `.page-contenu`, qui habille
      les elements bruts (`.page-contenu p`, `.page-contenu ul`,
      `.page-contenu h2`...). Un selecteur d'une seule classe perd contre eux :
      `.panier-format` (0,1,0) ne bat pas `.page-contenu p` (0,1,1). Le prefixe
      remet la specificite du bon cote, sans recourir a `!important`.

   2. **`[hidden]` doit rester operant.** Poser `display: grid` ou
      `display: flex` sur un element l'emporte sur le `display: none` que le
      navigateur applique a `[hidden]`, et le bloc reste visible alors que le
      script le croit masque. La regle `.panier [hidden]` ci-dessous ferme
      cette porte pour toute la page.

   Aucune couleur en dur : les variables viennent de style.css, sinon le theme
   sombre se casse.
   ========================================================================= */

/* --------------------------------------------- Attribut hidden, partout */
/* Le selecteur cite les deux classes de la racine de page
   (`<div class="page-contenu panier">`) pour peser (0,3,0) : il doit
   l'emporter sur les `.panier .quelque-chose { display: flex }` de cette
   feuille, qui pesent (0,2,0). A specificite egale, l'ordre d'ecriture
   trancherait, et cette regle serait la premiere donc la perdante. */

.page-contenu.panier [hidden] { display: none; }

/* ------------------------------------------------- Badge de la barre haute */
/* `site/entete.html` ecrit le badge avec l'attribut `hidden`, et le script
   le repose des que le panier se vide. Mais `.badge-panier` de style.css pose
   `display: grid`, qui l'emporte sur le `display: none` du navigateur : le
   badge restait donc affiche, a "0", sur toutes les pages, y compris avant ce
   chantier.

   La regle est ici et non dans style.css, qui n'appartient pas a ce chantier.
   Elle a sa place le jour ou les deux feuilles fusionnent, juste sous la
   declaration de `.badge-panier`. */
.badge-panier[hidden] { display: none; }

/* ------------------------------------------- Fiche produit : confirmation */
/* Le seul morceau de cette feuille qui vive hors de /panier/. Il s'affiche
   sous le bouton "Ajouter au panier", et doit se remarquer sans deplacer le
   ticket de prix au dessus de lui. */

.panier-confirmation[hidden] { display: none; }

.panier-confirmation {
  margin: .75rem 0 0;
  padding: .7rem .85rem;
  font-size: .88rem;
  line-height: 1.45;
  border-left: 3px solid var(--bordure);
  background: var(--fond-alt);
  color: var(--texte-doux);
}

.panier-confirmation a { color: var(--magenta); font-weight: 700; }
.panier-confirmation.succes { border-left-color: var(--magenta); color: var(--texte); }
.panier-confirmation.erreur { border-left-color: #C0392B; color: var(--texte); }
.panier-confirmation.info { border-left-color: var(--texte-leger); }

/* ===================================================== Page /panier/ ==== */

.panier .compte-attente { color: var(--texte-leger); font-size: .9rem; }
.panier .message { padding: .8rem 1rem; margin: 0 0 1.1rem; font-size: .9rem; }
.panier .titre-carte { margin: 0 0 1.1rem; }

.panier .panier-vide-mot {
  font-family: var(--titre); font-size: 1.15rem; color: var(--texte); margin: 0 0 .6rem;
}

/* Deux colonnes : les articles a gauche, le recapitulatif a droite. Sous
   980px la colonne de droite passe dessous, elle n'est pas repliee : le total
   et le bouton de paiement doivent rester atteignables sans replier quoi que
   ce soit. */
.panier .panier-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.6rem;
  align-items: start;
  margin-top: 1.4rem;
}

@media (max-width: 980px) {
  .panier .panier-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Le recapitulatif suit le defilement sur grand ecran : sur un panier de dix
   lignes, le total ne doit pas demander de remonter. */
@media (min-width: 981px) {
  .panier .panier-resume { position: sticky; top: 1.2rem; }
}

.panier .panier-bloc { margin-bottom: 1.1rem; }
.panier .panier-bloc:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Ligne d'article */

.panier .panier-lignes { list-style: none; margin: 0 0 1.2rem; padding: 0; }

.panier .panier-ligne {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 110px 130px;
  gap: 1.1rem;
  align-items: start;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--bordure);
}

.panier .panier-ligne:first-child { border-top: 1px solid var(--bordure); }

/* Un article retire du catalogue reste lisible mais visiblement hors jeu :
   il ne compte pas dans les totaux, et le client doit comprendre pourquoi
   avant de chercher son montant. */
.panier .panier-ligne-indispo { opacity: .72; }

.panier .panier-vignette img {
  width: 110px; height: 110px; object-fit: cover;
  border: 1px solid var(--bordure); display: block;
}

.panier .panier-vignette-vide {
  display: block; width: 110px; height: 110px;
  background: var(--fond-alt); border: 1px solid var(--bordure);
}

/* Le nom de l'article est un <h2> pour la structure du document, pas pour le
   style : sans ces annulations il heriterait du titre a filet des pages
   editoriales (majuscules, interlettrage, trait magenta), qui pese bien trop
   pour une ligne de panier. */
.panier .panier-nom {
  font-family: var(--titre); font-weight: 400; font-size: 1.05rem;
  letter-spacing: normal; text-transform: none; color: var(--texte);
  margin: 0 0 .35rem; padding: 0; line-height: 1.3;
  border-bottom: 0;
}
.panier .panier-nom::before, .panier .panier-nom::after { display: none; }
.panier .panier-nom a { color: var(--texte); text-decoration: none; }
.panier .panier-nom a:hover { color: var(--magenta); }

.panier .panier-format {
  margin: 0 0 .5rem; font-size: .85rem; color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.panier .panier-options { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.panier .panier-options li { color: var(--texte-leger); margin: 0 0 .18rem; }
.panier .panier-options li b { color: var(--texte-doux); font-weight: 700; }

.panier .panier-indispo {
  margin: .55rem 0 0; font-size: .84rem; color: #C0392B; font-weight: 700;
}

/* La quantite est un champ, pas un compteur a fleches maison : le clavier
   numerique des mobiles s'ouvre tout seul, et les fleches natives suffisent. */
.panier .panier-quantite label {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texte-leger); margin-bottom: .3rem;
}

.panier .panier-quantite input {
  width: 100%; padding: .5rem .6rem; font-family: inherit; font-size: .95rem;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure); text-align: center;
  font-variant-numeric: tabular-nums;
}

.panier .panier-quantite input:focus { outline: 2px solid var(--magenta); outline-offset: 1px; }

.panier .panier-montant { text-align: right; }

.panier .panier-total {
  margin: 0; font-family: var(--titre); font-size: 1.2rem; color: var(--texte);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.panier .panier-unitaire, .panier .panier-remise {
  margin: .2rem 0 0; font-size: .78rem; color: var(--texte-leger);
  font-variant-numeric: tabular-nums;
}

.panier .panier-remise { color: var(--magenta); }

/* Lien d'action textuel : "Retirer". Un bouton plein attirerait plus l'oeil
   que le bouton de paiement, qui est l'action utile de cette page. */
.panier .panier-lien {
  display: inline-block; margin-top: .5rem; padding: 0;
  background: none; border: 0;
  font-family: inherit; font-size: .8rem; color: var(--texte-leger);
  text-decoration: underline; cursor: pointer;
}
.panier .panier-lien:hover, .panier .panier-lien:focus-visible { color: var(--magenta); }
.panier .panier-lien[disabled] { opacity: .5; cursor: default; }

.panier .panier-suite { margin: 0; }

@media (max-width: 620px) {
  .panier .panier-ligne {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      "vignette infos"
      "quantite montant";
    gap: .8rem 1rem;
  }
  .panier .panier-vignette { grid-area: vignette; }
  .panier .panier-infos { grid-area: infos; }
  .panier .panier-quantite { grid-area: quantite; }
  .panier .panier-montant { grid-area: montant; align-self: end; }
  .panier .panier-vignette img,
  .panier .panier-vignette-vide { width: 80px; height: 80px; }
}

/* ------------------------------------------------------------- Code promo */

/* Le champ et son bouton sont empiles, pas cote a cote : dans une colonne de
   340 px, un bouton "Appliquer" en majuscules espacees laisse au champ de quoi
   afficher quatre caracteres. Mesure faite, le champ tombait a 40 px. */
.panier .panier-champ-promo { margin-bottom: 0; }
.panier .panier-duo-champ { display: grid; gap: .55rem; }

.panier .panier-duo-champ input {
  width: 100%; min-width: 0;
  padding: .62rem .75rem; font-family: inherit; font-size: .95rem;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure); text-transform: uppercase;
}

.panier .panier-duo-champ input::placeholder { text-transform: none; color: var(--texte-leger); }
.panier .panier-duo-champ input:focus { outline: 2px solid var(--magenta); outline-offset: 1px; }
.panier .panier-duo-champ .bouton { width: 100%; text-align: center; padding: .62rem 1rem; }

.panier .panier-promo-actif {
  margin: .85rem 0 0; font-size: .86rem; color: var(--texte-doux);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.panier .panier-promo-actif b { color: var(--texte); }
.panier .panier-promo-actif .panier-lien { margin-top: 0; flex: 0 0 auto; }

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

.panier .panier-modes { display: grid; gap: .5rem; }

.panier .panier-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem; align-items: center;
  padding: .7rem .8rem; cursor: pointer;
  border: 1px solid var(--bordure); background: var(--surface);
  transition: border-color .15s, background .15s;
}

.panier .panier-mode:hover { border-color: var(--magenta); }
.panier .panier-mode.actif { border-color: var(--magenta); background: var(--fond-alt); }
.panier .panier-mode input { accent-color: var(--magenta); margin: 0; width: auto; }

.panier .panier-mode-corps { display: block; min-width: 0; }
.panier .panier-mode-nom { display: block; font-size: .9rem; color: var(--texte); }
.panier .panier-mode-delai { display: block; font-size: .78rem; color: var(--texte-leger); }
.panier .panier-franco { display: block; font-size: .75rem; color: var(--magenta); }

.panier .panier-mode-prix {
  font-size: .92rem; color: var(--texte); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Totaux */

.panier .detail { margin: 0; padding: 0; border-top: 0; }
.panier .detail li { margin: 0; }

.panier .panier-mention {
  margin: .7rem 0 0; font-size: .76rem; color: var(--texte-leger);
  line-height: 1.45; text-align: center;
}

/* Le paiement reste visible mais inoperant tant qu'un article indisponible
   traine dans le panier : le masquer laisserait le client sans explication. */
.panier .bouton.desactive {
  background: var(--bordure); border-color: var(--bordure);
  color: var(--texte-leger); cursor: not-allowed; pointer-events: none;
}

/* ------------------------------------------------------- Avertissements */

.panier .panier-avertissements p { margin: 0; }
.panier .panier-avertissements ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.panier .panier-avertissements li { margin: 0 0 .25rem; }