/* ═══════════════════════════════════════════════════
   JÀNG — jang.css
   Composants ajoutés après les maquettes : catalogue filtré,
   panier, tunnel de commande, suivi, formulaires, avis.
   Se charge APRÈS styles.css, qui fournit les variables, les
   boutons, la grille produit, le header et le footer.
   ═══════════════════════════════════════════════════ */

/* ─── Utilitaires ──────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.est-desactive {
  opacity: .5;
  pointer-events: none;
}

/* ─── Zone d'annonces (retours d'action) ───────── */

#annonces {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 20px;
  border-radius: var(--rayon);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 8px 28px rgba(16, 27, 46, .18);
}
.annonce--succes    { background: var(--stock); color: #fff; }
.annonce--erreur    { background: var(--gomme-dark); color: #fff; }
.annonce--attention { background: var(--crayon); color: var(--crayon-dark); }
.annonce--info      { background: var(--encre); color: #fff; }

/* ─── État vide ────────────────────────────────── */

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  border: 2px dashed var(--gris-line);
  border-radius: var(--rayon);
  background: #fff;
  text-align: center;
}
.etat-vide p {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texte-soft);
}
.etat-vide-ico { width: 42px; height: 42px; color: var(--gris-line); }

/* ─── Ajustements sur les composants existants ─── */

/* La carte produit rend son visuel en lien vers la fiche : dans la maquette
   c'était un <div>, il faut donc lui rendre son comportement de bloc. */
.produit-visuel { display: block; }
.produit-nom a { color: inherit; }
.produit-nom a:hover { color: var(--encre); }

/* Idem pour le titre d'un article de liste, devenu cliquable. */
.liste-nom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.liste-nom a:hover { color: var(--encre); }

/* Dimensions de repli des vignettes : produit.css les stylise finement,
   mais si la feuille n'est pas déployée elles doivent rester des miniatures
   et non des images empilées en pleine largeur.
   overflow-x et min-width sont indispensables : sans eux, une dizaine de
   vignettes élargit la bande au-delà du viewport et fait apparaître une
   barre de défilement horizontale sur toute la page. */
.galerie-vignettes {
  display: flex;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
.vignette { width: 74px; height: 74px; flex-shrink: 0; padding: 0; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Mention de rupture dans une liste ────────── */

.liste-rupture {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gomme-light);
  color: var(--gomme-dark);
  font-size: 12.5px;
  font-weight: 700;
}

/* ═══ BLOCS PARTAGÉS AVEC LA FICHE PRODUIT ══════ */
/* Déplacés depuis produit.css : ces composants apparaissent aussi sur le
   formulaire d'avis, les pages statiques et les grilles de produits, qui
   ne chargent pas la feuille de la fiche produit. */

/* Étoiles */

.etoiles {
  position: relative;
  display: inline-block;
  width: 104px; height: 18px;
  background: var(--gris-line);
  -webkit-mask: repeat left center/20.8px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 5.9 6.5.95-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.05 1.1-6.5-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
  mask: repeat left center/20.8px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 5.9 6.5.95-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.05 1.1-6.5-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
}
.etoiles-pleines { position: absolute; inset: 0; background: var(--crayon); }
.etoiles--grandes { width: 130px; height: 22px; -webkit-mask-size: 26px 22px; mask-size: 26px 22px; }

.prose-jang { max-width: 68ch; }
.prose-jang p { font-size: 17px; line-height: 1.8; color: var(--texte-soft); margin-bottom: 16px; }
.prose-jang p:last-child { margin-bottom: 0; }

.note-jang {
  background: var(--crayon-light);
  border-left: 4px solid var(--crayon);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  padding: 16px 20px;
  color: var(--texte) !important;
}
.note-jang strong { font-weight: 700; }

.note-globale { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.note-chiffre { font-family: 'Lilita One', sans-serif; font-size: 60px; line-height: .9; color: var(--encre); }

.repartition { margin-top: 24px; }
.rep-ligne {
  display: grid;
  grid-template-columns: 74px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--texte-soft);
}
.rep-barre {
  height: 9px;
  border-radius: 999px;
  background: var(--gris-line);
  overflow: hidden;
}
.rep-barre > span { display: block; height: 100%; background: var(--crayon); border-radius: 999px; }
.rep-nb { text-align: right; font-weight: 700; color: var(--texte); }

/* ═══ ACCORDÉON FAQ (repli) ═════════════════════ */
/* styles.css définit l'apparence ; ces règles garantissent seulement que le
   pliage fonctionne, y compris sans JavaScript où tout reste lisible. */

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.faq-q[aria-expanded="true"] + .faq-a { max-height: none; }

/* Sans JavaScript, aucune réponse ne serait dépliable : on les affiche. */
.no-js .faq-a { max-height: none; }

/* ═══ FIL D'ARIANE ══════════════════════════════ */
/* Présent sur le catalogue, les fiches produit, les listes scolaires et les
   packs : il vit donc dans la feuille globale et non dans produit.css. */

.fil { padding: 16px 0 4px; }
.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fil li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--texte-soft);
}
.fil li:not(:last-child)::after {
  content: '';
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--gris-line);
  border-right: 1.5px solid var(--gris-line);
  transform: rotate(45deg);
}
.fil a { transition: color .18s ease; }
.fil a:hover { color: var(--encre); }
.fil li[aria-current] { font-weight: 600; color: var(--texte); }

/* ═══ RESPIRATION DE FIN DE PAGE ════════════════ */

/* Marge de sécurité avant le pied de page, posée sur le conteneur lui-même.
   Chaque gabarit devrait porter sa propre marge basse, mais un oubli colle
   le contenu au footer — et ne se voit que sur la page concernée.
   Une règle sur les enfants ne suffirait pas : le dernier enfant peut être
   une carte produit imbriquée dans une grille. */
#contenu { padding-bottom: clamp(48px, 7vw, 88px); }

/* ═══ NAVIGATION ════════════════════════════════ */

/* Lien de la page courante. Remplace nav-link--fort, qui soulignait
   « Listes scolaires » sur toutes les pages du site. */
.nav-link.est-actif {
  color: var(--encre);
  font-weight: 700;
}

/* ═══ MENU MOBILE ═══════════════════════════════ */

/* Le menu déroule au-dessus de la page et défile dans son propre cadre.
   Sans hauteur bornée ni overflow, c'est la page qui défilait sous le menu
   et le bas de la liste restait inatteignable. */
.menu-mobile {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 60;
  /* Le menu s'arrête au bas de l'écran et défile à l'intérieur.
     100dvh tient compte de la barre d'adresse mobile, qui se rétracte au
     défilement : avec 100vh seul, le bas du menu passe sous cette barre. */
  max-height: calc(100vh - var(--haut-menu, 68px));
  max-height: calc(100dvh - var(--haut-menu, 68px));
  overflow-y: auto;
  /* Empêche le défilement de se propager à la page une fois le bas atteint. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 14px 32px rgba(16, 27, 46, .16);
  padding-bottom: env(safe-area-inset-bottom);
}
.menu-mobile.hidden { display: none; }

/* Voile sous le menu ouvert : sans lui, la page reste lisible derrière et
   le menu semble flotter dans le vide. */
.voile-menu {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(16, 27, 46, .38);
}
.voile-menu.hidden { display: none; }

/* ═══ VISIONNEUSE D'IMAGES ══════════════════════ */
/* L'image principale d'une fiche produit est recadrée en carré pour garder
   une grille régulière. Une photo verticale y perd son haut et son bas :
   la visionneuse la réaffiche entière, sans recadrage. */

.galerie-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galerie-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }

.galerie-loupe {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--encre);
  box-shadow: 0 3px 12px rgba(16, 27, 46, .18);
  transition: transform .16s ease;
}
.galerie-loupe svg { width: 21px; height: 21px; }
.galerie-zoom:hover .galerie-loupe { transform: scale(1.08); }

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 56px 16px;
}
.visionneuse[hidden] { display: none; }

.visionneuse-fond {
  position: absolute;
  inset: 0;
  background: rgba(16, 27, 46, .93);
}

.visionneuse-cadre {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}

/* object-fit: contain : l'image entre entièrement dans le cadre, quelle que
   soit sa proportion. C'est tout l'objet de la visionneuse. */
.visionneuse-cadre img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--rayon-s);
  background: #fff;
}

.visionneuse-legende {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
  text-align: center;
}
.visionneuse-compteur { font-weight: 700; white-space: nowrap; }

.visionneuse-fermer,
.visionneuse-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background-color .16s ease;
}
.visionneuse-fermer:hover,
.visionneuse-nav:hover { background: rgba(255, 255, 255, .26); }

.visionneuse-fermer { top: 14px; right: 14px; width: 46px; height: 46px; }
.visionneuse-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.visionneuse-nav--precedent { left: 14px; }
.visionneuse-nav--suivant { right: 14px; }

@media (max-width: 640px) {
  .visionneuse { padding: 56px 8px; }
  .visionneuse-nav { width: 44px; height: 44px; }
  .visionneuse-nav--precedent { left: 6px; }
  .visionneuse-nav--suivant { right: 6px; }
  .visionneuse-cadre img { max-height: calc(100vh - 170px); }
}

/* ═══ CARTE DE PACK ═════════════════════════════ */

/* Le badge sort du flux et se pose sur le visuel. Dans le flux, il décalait
   vers le bas tout le contenu de la carte mise en avant : dans une rangée,
   sa photo ne s'alignait plus avec celles des cartes voisines. */
.pack { position: relative; }

.pack-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
}

/* Sans visuel, le badge se pose sur le fond de la carte : on réserve la
   place à droite du niveau pour qu'il ne recouvre pas le texte.
   La classe vient du gabarit plutôt que de :has(), non supporté par les
   Safari antérieurs à 15.4 — encore répandus sur les iPhone d'occasion. */
.pack--sans-visuel .pack-niveau { padding-right: 104px; }

.pack-visuel {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  border-radius: var(--rayon-s);
  overflow: hidden;
  background: var(--gris);
}
.pack-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pack-photo {
  aspect-ratio: 16 / 10;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--gris);
}
.pack-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lot-visuel {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border-radius: var(--rayon-s);
  overflow: hidden;
  background: var(--gris);
}
.lot-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pack-niveau a { color: inherit; }
.pack-niveau a:hover { color: var(--encre); }

.pack-detail {
  display: inline-block;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pack-detail:hover { color: var(--encre-dark); }

/* ═══ MENU DÉROULANT DES CATÉGORIES ═════════════ */

.menu-deroulant { position: relative; }

.nav-link--menu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-link--menu[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-link--menu svg { transition: transform .18s ease; }

.menu-panneau {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 330px;
  padding: 10px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 27, 46, .13);
}
.menu-panneau[hidden] { display: none; }

.menu-liste { display: flex; flex-direction: column; gap: 2px; }

.menu-lien {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: var(--rayon-s);
  transition: background-color .16s ease;
}
.menu-lien:hover { background: var(--encre-light); }
.menu-ico { width: 22px; height: 22px; color: var(--encre); flex-shrink: 0; }
.menu-lien-corps { display: flex; flex-direction: column; gap: 1px; }
.menu-lien-nom { font-size: 15.5px; font-weight: 600; color: var(--texte); }
.menu-lien-nb { font-size: 13px; color: var(--texte-soft); }

.menu-pied {
  display: block;
  margin-top: 8px;
  padding: 11px 12px;
  border-top: 2px solid var(--gris-line);
  font-size: 15px;
  font-weight: 700;
  color: var(--encre);
  text-align: center;
}
.menu-pied:hover { text-decoration: underline; text-underline-offset: 4px; }

.mob-link--rayon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 18px;
}
.mob-link-nb {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-soft);
}

/* ═══ CATALOGUE : FILTRES ═══════════════════════ */

.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 22px;
  margin-top: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--gris-line);
}
.filtres-tri { flex-shrink: 0; }
.filtres-rapides { display: flex; flex-wrap: wrap; gap: 8px; }
.filtres-nombre {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--texte-soft);
  white-space: nowrap;
}

.field--compact {
  min-height: 42px;
  padding: 8px 34px 8px 13px;
  font-size: 15px;
}

.puce-filtre {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 2px solid var(--gris-line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--texte);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.puce-filtre:hover { border-color: var(--encre); }
.puce-filtre.est-actif {
  border-color: var(--encre);
  background: var(--encre);
  color: #fff;
}

.filtres-actifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--texte-soft);
}
.puce-retrait {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--encre-light);
  color: var(--encre);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .18s ease;
}
.puce-retrait:hover { background: var(--gris-line); }
.puce-retrait--tout { background: none; text-decoration: underline; }

.barre-recherche--large { max-width: 640px; }
.barre-recherche--large input { font-size: 17px; }

/* ═══ PAGINATION ════════════════════════════════ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 44px;
}
.page-numeros { display: flex; align-items: center; gap: 5px; }

.page-lien,
.page-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon-s);
  background: #fff;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--texte);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.page-lien:hover,
.page-numero:hover { border-color: var(--encre); }

.page-numero.est-actif {
  border-color: var(--encre);
  background: var(--encre);
  color: #fff;
}
.page-lien.est-inactif {
  opacity: .45;
  pointer-events: none;
}
.page-ellipse {
  display: inline-flex;
  align-items: flex-end;
  min-width: 24px;
  height: 44px;
  padding-bottom: 12px;
  justify-content: center;
  color: var(--texte-soft);
}
.pagination-resume {
  margin-top: 14px;
  text-align: center;
  font-size: 14.5px;
  color: var(--texte-soft);
}

/* ═══ FORMULAIRES ═══════════════════════════════ */

.bloc-formulaire {
  padding: 24px 22px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  background: #fff;
}
.bloc-formulaire-titre {
  font-family: 'Lilita One', sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--encre);
  margin-bottom: 18px;
  padding: 0;
}

.champ { margin-bottom: 18px; }
.champ:last-child { margin-bottom: 0; }

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="search"],
.champ input[type="number"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon-s);
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--texte);
  transition: border-color .18s ease;
}
.champ textarea { min-height: 120px; line-height: 1.6; resize: vertical; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px var(--encre-light);
}

.champ-aide {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texte-soft);
}
.champ-aide--vert { color: var(--stock); font-weight: 600; }

.champ-erreur {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gomme-dark);
}
.champ-option {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte-soft);
}

/* Cartes de choix : zone de livraison, moyen de paiement */

.choix-liste { display: flex; flex-direction: column; gap: 10px; }

.choix-carte {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon-s);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.choix-carte:hover { border-color: var(--encre); }
.choix-carte input { margin-top: 3px; width: 19px; height: 19px; accent-color: var(--encre); flex-shrink: 0; }

/* La carte sélectionnée se distingue par une bordure et un fond. On passe
   par un frère du bouton radio plutôt que par :has(), non supporté avant
   Safari 15.4 : sur ces appareils, le client ne verrait pas quelle zone de
   livraison ni quel moyen de paiement il a choisi. */
.choix-carte input:checked ~ .choix-carte-corps { color: var(--encre); }
.choix-carte input:checked ~ .choix-carte-corps .choix-carte-nom { color: var(--encre); }

.choix-carte:has(input:checked) { border-color: var(--encre); background: var(--encre-light); }

/* Repli pour les navigateurs sans :has() : une pastille de sélection posée
   par le JavaScript. */
.choix-carte.est-choisi { border-color: var(--encre); background: var(--encre-light); }

.choix-carte-corps { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.choix-carte-nom { font-size: 16px; font-weight: 700; }
.choix-carte-det { font-size: 14.5px; line-height: 1.55; color: var(--texte-soft); }
.choix-carte-prix {
  flex-shrink: 0;
  font-family: 'Lilita One', sans-serif;
  font-size: 19px;
  color: var(--encre);
}

/* Notation par étoiles */

.notation { display: flex; flex-wrap: wrap; gap: 8px; }
.notation-choix { cursor: pointer; }
.notation-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.notation-choix span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon-s);
  font-size: 15.5px;
  font-weight: 700;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.notation-choix:hover span { border-color: var(--crayon); }
.notation-choix input:checked + span {
  border-color: var(--crayon);
  background: var(--crayon-light);
  color: var(--crayon-dark);
}
.notation-choix input:focus-visible + span { box-shadow: 0 0 0 3px var(--encre-light); }

/* ═══ RÉCAPITULATIF ═════════════════════════════ */

.recap {
  padding: 22px 20px;
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  background: #fff;
}
@media (min-width: 1024px) {
  .recap--collant { position: sticky; top: 96px; }
}

.recap-titre {
  font-family: 'Lilita One', sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--encre);
}

.recap-lignes { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.recap-lignes li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
}
.recap-lignes--large li { font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--gris-line); }
.recap-qte { font-weight: 700; color: var(--texte-soft); }
.recap-nom { color: var(--texte); }
.recap-prix { font-weight: 700; white-space: nowrap; }
.recap-composition {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texte-soft);
}

.recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-size: 16px;
  font-weight: 600;
}
.recap-ligne--petit { font-size: 15px; font-weight: 400; color: var(--texte-soft); }

.recap-total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding-top: 15px;
  border-top: 2px solid var(--gris-line);
  font-family: 'Lilita One', sans-serif;
  font-size: 21px;
  color: var(--encre);
}

.recap-alerte {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: var(--rayon-s);
  background: var(--crayon-light);
  color: var(--crayon-dark);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
}

/* ═══ PANIER (page complète) ════════════════════ */

.alerte-panier {
  margin-top: 20px;
  padding: 17px 20px;
  border-left: 4px solid var(--crayon);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  background: var(--crayon-light);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--texte);
}
.alerte-panier-titre { font-weight: 700; margin-bottom: 6px; }
.alerte-panier ul { margin: 6px 0; padding-left: 20px; list-style: disc; }
.alerte-panier li { margin-bottom: 3px; }

.panier-detail {
  border: 2px solid var(--gris-line);
  border-radius: var(--rayon);
  overflow: hidden;
  background: #fff;
}
.panier-detail-ligne {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  grid-template-areas:
    "visuel corps actions prix"
    "visuel suppr suppr suppr";
  align-items: center;
  gap: 10px 16px;
  padding: 18px 18px;
  border-top: 1px solid var(--gris-line);
}
.panier-detail-ligne:first-child { border-top: 0; }

.panier-detail-visuel {
  grid-area: visuel;
  display: block;
  width: 80px; height: 80px;
  border-radius: var(--rayon-s);
  overflow: hidden;
  background: var(--gris);
}
.panier-detail-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panier-detail-corps { grid-area: corps; }
.panier-detail-ligne .pl-actions { grid-area: actions; }
.panier-detail-ligne .pl-prix { grid-area: prix; }
.panier-detail-ligne .pl-suppr { grid-area: suppr; justify-self: start; }

@media (max-width: 640px) {
  .panier-detail-ligne {
    grid-template-columns: 68px 1fr;
    grid-template-areas:
      "visuel corps"
      "visuel prix"
      "actions suppr";
  }
  .panier-detail-visuel { width: 68px; height: 68px; }
}

.btn-texte {
  background: none;
  border: 0;
  padding: 0 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--texte-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color .18s ease;
}
.btn-texte:hover { color: var(--gomme-dark); }

.tableau-zones--compact .zone-ligne { grid-template-columns: 1fr auto; padding: 10px 0; font-size: 14.5px; }

/* ═══ CONFIRMATION DE COMMANDE ══════════════════ */

.bloc-confirmation {
  padding: 34px 28px;
  border: 2px solid var(--stock);
  border-radius: var(--rayon);
  background: #F3FBF6;
}
.confirmation-pastille {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--stock);
  color: #fff;
}
.confirmation-pastille svg { width: 30px; height: 30px; }

.numero-paiement {
  font-family: 'Lilita One', sans-serif;
  font-size: 25px;
  letter-spacing: .04em;
  color: var(--encre);
  user-select: all;
}

/* ═══ SUIVI DE COMMANDE ═════════════════════════ */

.suivi { margin-top: 26px; padding-left: 4px; }

.suivi-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 26px 32px;
}
.suivi-etape::before {
  content: '';
  position: absolute;
  left: 8px; top: 18px; bottom: 0;
  width: 2px;
  background: var(--gris-line);
}
.suivi-etape:last-child::before { display: none; }
.suivi-etape.est-faite::before { background: var(--stock); }

.suivi-point {
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border: 3px solid var(--gris-line);
  border-radius: 50%;
  background: #fff;
}
.suivi-etape.est-faite .suivi-point { border-color: var(--stock); background: var(--stock); }
.suivi-etape.est-courante .suivi-point {
  border-color: var(--encre);
  background: #fff;
  box-shadow: 0 0 0 4px var(--encre-light);
}

.suivi-libelle { font-size: 16.5px; font-weight: 600; color: var(--texte-soft); }
.suivi-etape.est-faite .suivi-libelle { color: var(--texte); }
.suivi-etape.est-courante .suivi-libelle { color: var(--encre); font-weight: 700; }
.suivi-date { font-size: 14px; color: var(--texte-soft); }