/* ==========================================================================
   Boutique (boutique.html) — préfixe bq-
   S'appuie sur base.css : jetons --pc-*, puces .pc-chip, cartes, tiroir.
   Élément signature : le sélecteur d'âge, cousu comme un chausson
   (couture pointillée au fil de cuir, pastille choisie à l'encre).
   ========================================================================== */

.bq { padding-bottom: var(--pc-section); }

/* --------------------------------------------------------------------------
   En-tête de page
   -------------------------------------------------------------------------- */
.bq-entete { padding-top: var(--pc-space-3); }
.bq-titre {
  margin-top: var(--pc-space-2);
  font-size: clamp(2.125rem, 1.55rem + 2.5vw, 3.5rem);
  overflow-wrap: anywhere;
}
.bq-intro { margin-top: var(--pc-space-3); max-width: 58ch; font-size: 1rem; line-height: 1.5; }
@media (min-width: 48em) { .bq-intro { font-size: var(--pc-fs-md); } }
.bq-intro-plus {
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-sm);
  line-height: 1.6;
  color: var(--pc-encre-douce);
}
.bq-intro-plus .pc-link { font-weight: 600; padding-block: 0.6rem; }

/* --------------------------------------------------------------------------
   Sélecteur d'âge
   -------------------------------------------------------------------------- */
.bq-ages {
  position: relative;
  display: grid;
  gap: 1rem;
  margin-block: var(--pc-space-5) var(--pc-space-5);
  padding: 1.375rem 1rem 1.25rem;
  border-radius: var(--pc-radius-l);
  background: var(--pc-surface);
  box-shadow: var(--pc-ombre-1);
}
/* Couture intérieure, au fil de cuir */
.bq-ages::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed var(--pc-couture);
  border-radius: calc(var(--pc-radius-l) - 6px);
  opacity: 0.7;
  pointer-events: none;
}
.bq-ages > * { position: relative; }
@media (min-width: 48em) {
  .bq-ages { padding: 1.75rem 1.5rem 1.5rem; }
}
@media (min-width: 64em) {
  .bq-ages {
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
    padding: 2rem 1.75rem 1.75rem 2rem;
  }
}

.bq-ages__tete { display: grid; gap: 0.375rem; padding-inline: 0.25rem; }
.bq-ages__titre {
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: var(--pc-fs-xl);
  font-weight: 560;
  line-height: 1.12;
}
.bq-ages__aide { font-size: var(--pc-fs-sm); line-height: 1.45; color: var(--pc-encre-douce); max-width: 46ch; }
.bq-ages__guide { font-size: var(--pc-fs-sm); }
.bq-ages__guide .pc-link { display: inline-flex; align-items: center; min-height: var(--pc-tap); font-weight: 600; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .bq-ages__tete { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: end; }
  .bq-ages__titre, .bq-ages__aide { grid-column: 1; }
  .bq-ages__guide { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 64em) {
  .bq-ages__tete { padding-top: 0.25rem; }
  .bq-ages__guide { margin-top: 0.25rem; }
}

.bq-ages__corps { display: grid; gap: 0.75rem; min-width: 0; }

/* Âge choisi : le bloc se replie en un rappel compact « 12 à 18 mois · pointure 20-21 · Changer » */
.bq-ages.is-replie { grid-template-columns: none; padding: 0.75rem 1rem; }
.bq-rappel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: var(--pc-tap);
}
.bq-rappel__texte { font-size: var(--pc-fs-base); line-height: 1.4; color: var(--pc-encre-douce); font-variant-numeric: tabular-nums; }
.bq-rappel__texte strong { color: var(--pc-encre); font-weight: 650; }
.bq-rappel__age {
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: var(--pc-fs-lg);
  font-weight: 560;
  line-height: 1.1;
}
.bq-rappel__sep { color: var(--pc-texte-doux); }
.bq-rappel__btn { margin-left: auto; margin-right: -0.5rem; }
@media (min-width: 48em) {
  .bq-ages.is-replie { padding: 0.875rem 1.25rem; }
  .bq-rappel__btn { margin-right: 0; }
}

/* Huit âges : 2 colonnes sur mobile, puis 4 (une rangée en mois, une en années) */
.bq-ages__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 48em) {
  .bq-ages__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
}

.bq-age {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  min-height: 4.75rem;
  padding: 0.625rem 0.75rem;
  border: 1.5px solid var(--pc-trait-fort);
  border-radius: var(--pc-radius-m);
  background: var(--pc-blanc);
  color: var(--pc-encre);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pc-dur-1) ease, border-color var(--pc-dur-1) ease, color var(--pc-dur-1) ease;
}
.bq-age:hover { border-color: var(--pc-encre); }
.bq-age:active { transform: translateY(1px); }
.bq-age:focus-visible { outline-offset: 2px; }

.bq-age__age {
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-optical-sizing: auto;
  font-size: 1.1875rem;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
/* Pointure et compteur empilés dans toutes les tuiles : même hauteur partout (y compris « 24-25-26 ») */
.bq-age__infos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  width: 100%;
  font-size: var(--pc-fs-xs);
  line-height: 1.3;
}
.bq-age__pointure { font-weight: 650; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.bq-age__compte { color: var(--pc-texte-doux); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bq-age__attente { display: inline-block; width: 3.5rem; height: 0.625rem; margin: 0; vertical-align: middle; }

/* Le mot « Pointure » n'est visible qu'avec assez de place (toujours lu à voix haute) */
@media (max-width: 63.99em) {
  .bq-age__mot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 64em) {
  .bq-age { min-height: 5rem; padding: 0.75rem 0.875rem; gap: 0.375rem; }
  .bq-age__age { font-size: 1.3125rem; }
}

/* Choisi : encre et couture intérieure, comme une pastille de pointure */
.bq-age[aria-pressed="true"] { background: var(--pc-encre); border-color: var(--pc-encre); color: var(--pc-creme); }
.bq-age[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgb(251 246 236 / 0.55);
  border-radius: calc(var(--pc-radius-m) - 4px);
  pointer-events: none;
}
.bq-age[aria-pressed="true"] .bq-age__compte { color: var(--pc-papier-fonce); }

/* Pointure mémorisée proposée */
.bq-age.is-memo:not([aria-pressed="true"]) { border-color: var(--pc-terracotta); box-shadow: inset 0 0 0 1px var(--pc-terracotta); }

/* Aucun modèle à cet âge avec les filtres en cours : tuile désactivée, atténuée (la note explique) */
.bq-age[aria-disabled="true"] {
  border-style: dashed;
  border-color: var(--pc-trait);
  background: transparent;
  color: var(--pc-texte-doux);
  cursor: not-allowed;
}
.bq-age[aria-disabled="true"] .bq-age__age,
.bq-age[aria-disabled="true"] .bq-age__pointure { color: var(--pc-texte-doux); }
.bq-age[aria-disabled="true"]:hover { border-color: var(--pc-trait); }
.bq-age[aria-disabled="true"]:active { transform: none; }

.bq-ages__note { font-size: var(--pc-fs-xs); line-height: 1.45; color: var(--pc-texte-doux); max-width: 70ch; padding-inline: 0.125rem; }

.bq-ages__choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: var(--pc-fs-sm);
  line-height: 1.45;
  color: var(--pc-encre-douce);
}
.bq-ages__choix p { flex: 1 1 18rem; }
.bq-ages__choix strong { color: var(--pc-encre); font-variant-numeric: tabular-nums; }
.bq-ages__choix .pc-btn { margin-left: -0.75rem; }
@media (min-width: 36em) { .bq-ages__choix .pc-btn { margin-left: 0; } }

/* Proposition de la pointure déjà choisie */
.bq-memo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--pc-radius-m);
  background: var(--pc-rose-pale);
  animation: pc-pop-in var(--pc-dur-3) var(--pc-ease) both;
}
.bq-memo__texte { flex: 1 1 15rem; font-size: var(--pc-fs-sm); line-height: 1.45; }
.bq-memo__texte strong { font-variant-numeric: tabular-nums; }
.bq-memo__actions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }

/* --------------------------------------------------------------------------
   Commandes : bouton du tiroir, compteur, tri, filtres actifs
   -------------------------------------------------------------------------- */
/* Mobile : barre collante sous l'en-tête (son parent est le conteneur de page) */
.bq-commandes {
  position: sticky;
  top: var(--pc-header-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: var(--pc-space-5) calc(-1 * var(--pc-gutter)) 0;
  padding: 0.5rem var(--pc-gutter);
  background: var(--pc-fond);
  border-block: 1px solid var(--pc-trait);
}
.bq-ouvrir { flex: none; }
.bq-barre:empty, .bq-tri-place:empty { display: none; }

.bq-compte {
  font-size: var(--pc-fs-sm);
  line-height: 1.35;
  color: var(--pc-encre-douce);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bq-compte strong { font-weight: 650; color: var(--pc-encre); }
.bq-compte:focus-visible { outline-offset: 4px; border-radius: var(--pc-radius-xs); }

.bq-actifs { margin-top: 0.875rem; }
.bq-actifs__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bq-actifs .pc-chip--remove { white-space: normal; text-align: left; }
.bq-actifs__tout { padding-inline: 0.625rem; }

/* Bureau : étagère de filtres, puis compteur à gauche et tri à droite ; rien ne colle */
@media (min-width: 64em) {
  .bq-commandes {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "barre barre"
      "compte tri";
    align-items: center;
    column-gap: 1.5rem;
    margin: var(--pc-space-6) 0 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .bq-ouvrir { display: none; }
  .bq-barre { grid-area: barre; }
  .bq-compte { grid-area: compte; text-align: left; font-size: var(--pc-fs-base); min-height: var(--pc-tap); display: flex; align-items: center; padding-top: 1rem; }
  .bq-tri-place { grid-area: tri; padding-top: 1rem; }
  .bq-actifs { margin-top: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Panneau de filtres (barre sur bureau, tiroir sur mobile)
   -------------------------------------------------------------------------- */
.bq-groupe__titre { margin-bottom: 0.5rem; font-size: var(--pc-fs-sm); font-weight: 650; color: var(--pc-encre); }
.bq-groupe__puces { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bq-groupe__note { font-size: var(--pc-fs-sm); line-height: 1.45; color: var(--pc-encre-douce); max-width: 36ch; }
.bq-puce .pc-chip__count { margin-left: 0.125rem; }
.bq-puce.is-zero { border-style: dashed; color: var(--pc-texte-doux); }

.bq-tri__label { display: block; margin-bottom: 0.5rem; font-size: var(--pc-fs-sm); font-weight: 650; }
.bq-tri__select { min-height: var(--pc-tap); }

/* Dans le tiroir */
.bq-tiroir__corps .bq-filtres { display: grid; gap: 1.75rem; }
.bq-tiroir__corps .bq-tri { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--pc-trait); }

/* Sur bureau : une étagère de filtres, titres au-dessus des puces */
@media (min-width: 64em) {
  .bq-barre .bq-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 2.5rem;
    padding-block: 1.125rem 1.25rem;
    border-block: 1px solid var(--pc-trait);
  }
  .bq-barre .bq-groupe__titre { font-size: var(--pc-fs-xs); color: var(--pc-texte-doux); }
  .bq-tri-place .bq-tri { display: flex; align-items: center; gap: 0.75rem; }
  .bq-tri-place .bq-tri__label { margin: 0; white-space: nowrap; font-weight: 600; color: var(--pc-encre-douce); }
  .bq-tri-place .bq-tri__select { width: auto; min-width: 12.5rem; }
}

/* --------------------------------------------------------------------------
   Résultats
   -------------------------------------------------------------------------- */
.bq-resultats { margin-top: var(--pc-space-5); }
@media (min-width: 64em) { .bq-resultats { margin-top: var(--pc-space-6); } }

.bq-erreur__alerte { align-items: flex-start; max-width: 40rem; }
.bq-erreur__corps { display: grid; justify-items: start; gap: 0.75rem; }

.bq-plus {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
  margin-top: var(--pc-space-7);
  text-align: center;
}
.bq-plus__texte { font-size: var(--pc-fs-sm); color: var(--pc-texte-doux); font-variant-numeric: tabular-nums; }

/* État vide : explication, élargissements proposés, aperçu */
.bq-vide__message { max-width: 34rem; padding-block: 2rem 1rem; }
.bq-vide__message .pc-empty__title { font-size: var(--pc-fs-lg); text-wrap: balance; }
.bq-vide__alternatives {
  margin-top: var(--pc-space-6);
  padding-top: var(--pc-space-6);
  border-top: 1px solid var(--pc-trait);
}
.bq-vide__titre {
  margin-bottom: var(--pc-space-5);
  font-size: var(--pc-fs-lg);
  font-weight: 560;
}

/* Le contenu ciblé par le défilement reste visible sous l'en-tête et la barre collante */
@media (max-width: 63.99em) {
  .bq .pc-card__link, .bq-compte { scroll-margin-top: 4rem; }
}

/* Cadre cousu (SVG, lib/couture.js) : la couture CSS de repli disparaît. */
.bq-ages.is-cousu::before { display: none; }