/* ============================================================
   Plaine Altitude Design System : boutique.css
   Kit boutique (WooCommerce). Dépend de tokens.css et components.css.
   Responsive : mobile d'abord, ruptures à 640 / 900 / 1000 px.
   ============================================================ */

/* ── Carte produit ─────────────────────────────────────────── */
.pa-grille-produits { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.pa-produit { display: flex; flex-direction: column; background: var(--bg-surface); border-radius: var(--r-l); border: 1px solid var(--bord);
  overflow: hidden; transition: box-shadow var(--t-normal), transform var(--t-normal); position: relative; }
.pa-produit:hover { box-shadow: var(--ombre-l); transform: translateY(-3px); }
/* Visuel plein cadre (photo en vol), fond ciel en attendant le chargement */
.pa-produit__visuel { position: relative; aspect-ratio: 1 / 1; background: var(--grad-ciel); display: grid; place-items: center; overflow: hidden; }
.pa-produit__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lent); }
.pa-produit:hover .pa-produit__visuel img { transform: scale(1.04); }
.pa-produit__badges { position: absolute; top: 0.75rem; left: 0.75rem; right: 3.5rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pa-produit__favori { position: absolute; top: 0.6rem; right: 0.6rem; width: 2.4rem !important; height: 2.4rem !important; }
.pa-produit__port { position: absolute; left: 0.75rem; bottom: 0.75rem; }
.pa-produit__corps { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.95rem 1.1rem 1.15rem; flex: 1; }
.pa-produit__marque { font: 700 var(--fs-2xs)/1 var(--font-texte); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-secondaire); }
.pa-produit__nom { font: 800 var(--fs-md)/1.2 var(--font-titre); color: var(--fg-titre); letter-spacing: -0.01em; margin: 0; }
.pa-produit__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
/* Ligne coloris + avis : coloris à gauche, avis à droite ; chacun est facultatif */
.pa-produit__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; min-height: 1.4rem; }
.pa-produit__ligne .pa-etoiles, .pa-produit__ligne .pa-note { margin-left: auto; }
.pa-produit__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }
.pa-prix { font: 900 var(--fs-lg)/1 var(--font-titre); color: var(--pa-noir); letter-spacing: -0.01em; white-space: nowrap; }
.pa-prix s { font: 500 var(--fs-xs)/1 var(--font-texte); color: var(--fg-secondaire); margin-left: 0.35rem; }
.pa-prix-label { display: block; font: 600 var(--fs-2xs)/1.2 var(--font-texte); color: var(--fg-secondaire); margin-bottom: 0.25rem; }

/* Note compacte des cartes de liste : une étoile, la note moyenne, le nombre d'avis.
   Markup : <span class="pa-note" aria-label="Note 4,6 sur 5, 5 avis"><i aria-hidden="true"></i><b>4,6</b><span>(5)</span></span>
   Les cinq étoiles (.pa-etoiles) restent pour la fiche produit et les avis. */
.pa-note { display: inline-flex; align-items: center; gap: 0.25rem; font: 700 var(--fs-xs)/1 var(--font-texte); color: var(--fg-titre); white-space: nowrap; }
.pa-note i { font-style: normal; color: var(--pa-jaune-fonce); font-size: 1.05em; line-height: 1; }
.pa-note i::before { content: "★"; }
.pa-note span { color: var(--fg-secondaire); font-weight: 600; }

/* Coloris : pastilles (vignette du coloris ou couleur), +N au-delà de 5 */
.pa-coloris { display: flex; align-items: center; gap: 0.3rem; }
.pa-coloris span { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--bord-fort); background-size: cover; }
.pa-coloris em { font: 700 var(--fs-2xs)/1 var(--font-texte); color: var(--fg-secondaire); font-style: normal; margin-left: 0.15rem; }

/* ── Liste : barre d'outils et panneau de filtres (concept Soaring Shop amélioré) ── */
.pa-filtres { background: var(--bg-surface); border-radius: var(--r-xl); border: 1px solid var(--bord); box-shadow: var(--ombre-s); padding: var(--sp-m); }
.pa-filtres__grille { display: grid; gap: var(--sp-m) var(--sp-l); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.pa-filtres__groupe h5 { font: 800 var(--fs-sm)/1 var(--font-titre); color: var(--fg-titre); letter-spacing: 0; margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: baseline; }
.pa-filtres__groupe h5 span { font: 600 var(--fs-2xs) var(--font-texte); color: var(--fg-secondaire); }
.pa-filtres__puces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pa-filtres__actifs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pa-barre-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-xs); }
.pa-curseur { position: relative; height: 1.5rem; margin: 0.4rem 0.3rem 0.6rem; }
.pa-curseur__rail { position: absolute; top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%); border-radius: 3px; background: var(--pa-turquoise-100); }
.pa-curseur__plage { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 3px; background: var(--pa-turquoise); }
.pa-curseur__poignee { position: absolute; top: 50%; width: 1.35rem; height: 1.35rem; border-radius: 50%; transform: translate(-50%,-50%); background: var(--bg-surface); border: 3px solid var(--pa-turquoise); box-shadow: var(--ombre-m); }

/* ── Fiche produit : mise en page ──────────────────────────── */
.pa-fiche { display: grid; gap: var(--sp-l); grid-template-columns: minmax(0, 1fr); align-items: start; }
.pa-fiche > * { min-width: 0; }
@media (min-width: 1000px) { .pa-fiche { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .pa-fiche__infos { position: sticky; top: 1rem; } }
.pa-fil { display: flex; flex-wrap: wrap; gap: 0.4rem; font: 600 var(--fs-xs) var(--font-texte); color: var(--fg-secondaire); margin-bottom: var(--sp-s); }
.pa-fil a { color: var(--fg-secondaire); } .pa-fil span::before { content: "›"; margin-right: 0.4rem; opacity: .6; }
.pa-fiche__infos { display: grid; gap: var(--sp-s); }
.pa-fiche__infos > * { min-width: 0; }
.pa-fiche__titre { font-size: var(--fs-2xl); }
.pa-fiche__accroche { font: 700 var(--fs-md)/1.4 var(--font-titre); color: var(--fg-titre); }

/* Galerie (proposition à discuter) : mosaïque, filtre par type de visuel */
.pa-galerie__types { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Bloc prix et achat : le DEVIS personnalisé est le geste principal */
.pa-achat { background: var(--bg-surface); border: 1px solid var(--bord); border-radius: var(--r-xl); box-shadow: var(--ombre-m); padding: var(--sp-m); display: grid; gap: var(--sp-s); }
.pa-achat .pa-btn { white-space: normal; text-align: center; }
.pa-achat__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }
.pa-achat__prix .pa-prix { font-size: var(--fs-2xl); }
.pa-achat__prix .pa-prix-label { width: 100%; font-size: var(--fs-xs); }
.pa-economie { font: 800 var(--fs-xs)/1 var(--font-texte); padding: 0.35rem 0.6rem; border-radius: var(--r-pilule); background: var(--pa-noir); color: var(--pa-jaune); }
.pa-devis { display: grid; gap: 0.6rem; padding: var(--sp-s); border-radius: var(--r-l); background: linear-gradient(135deg, var(--pa-jaune-100), #fffaf0); border: 1px solid rgba(245,163,0,.25); }
.pa-devis p { font-size: var(--fs-sm); color: var(--fg-titre); line-height: 1.45; }
.pa-devis p b { font-family: var(--font-titre); font-weight: 800; }
.pa-achat__ligne { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pa-quantite { display: inline-flex; align-items: center; border: 1.5px solid var(--bord-fort); border-radius: var(--r-pilule); height: 3rem; }
.pa-quantite button { width: 2.6rem; height: 100%; border: 0; background: none; font: 700 1.1rem var(--font-texte); color: var(--fg-titre); cursor: pointer; }
.pa-quantite input { width: 2.2rem; border: 0; text-align: center; font: 700 var(--fs-sm) var(--font-texte); background: none; }
.pa-achat__infos { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }

/* Bouton pleine largeur avec pastille : texte centré, pastille collée tout à droite
   (un cale vide à gauche de la même largeur garde le texte au centre exact) */
.pa-btn--pastille.pa-btn--bloc { justify-content: space-between; padding-left: 0.4em; }
.pa-btn--pastille.pa-btn--bloc::before { content: ""; width: 2.3em; flex: none; }

/* Sélecteur de variantes : groupes côte à côte sur une ligne, pastilles compactes
   en carré arrondi (gris clair au repos, contour noir à la sélection) */
.pa-variantes { display: flex; flex-wrap: wrap; gap: var(--sp-s) var(--sp-m); align-items: flex-start; }
.pa-variante__tete { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.45rem; font: 800 var(--fs-xs)/1 var(--font-texte); color: var(--fg-titre); }
.pa-variante__tete span { font-weight: 500; color: var(--fg-secondaire); }
.pa-variante__tete a { font-weight: 600; margin-left: 0.25rem; }
.pa-tailles { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pa-taille { min-width: 2.75rem; padding: 0.5rem 0.65rem; border-radius: var(--r-s); border: 2px solid transparent; background: #eceeee;
  font: 700 var(--fs-xs)/1 var(--font-texte); color: var(--fg-titre); cursor: pointer; text-align: center; transition: border-color var(--t-rapide), background var(--t-rapide); }
.pa-taille small { display: block; margin-top: 0.2rem; font: 600 0.62rem/1 var(--font-texte); color: var(--fg-secondaire); }
.pa-taille:hover { background: var(--pa-turquoise-100); }
.pa-taille.is-actif { border-color: var(--pa-noir); background: var(--bg-surface); color: var(--pa-noir); }
.pa-taille.is-epuise { color: var(--pa-gris-clair); text-decoration: line-through; background: transparent; border: 2px dashed var(--bord-fort); cursor: not-allowed; }
.pa-couleurs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pa-couleur { width: 2.2rem; height: 2.2rem; border-radius: var(--r-s); border: 2px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--bord-fort); cursor: pointer; background-size: cover; }
.pa-couleur.is-actif { box-shadow: 0 0 0 2px var(--pa-noir); }

/* Menu horizontal sticky (à la place des onglets) */
.pa-ancres { position: sticky; top: 0.75rem; z-index: 5; display: flex; gap: 0.2rem; padding: 0.35rem; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--r-pilule); background: var(--bg-verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--ombre-m), inset 0 0 0 1px var(--bord); }
.pa-ancres::-webkit-scrollbar { display: none; }
.pa-ancres a { flex: none; padding: 0.7rem 1.05rem; border-radius: var(--r-pilule); font: 700 var(--fs-sm)/1 var(--font-texte); color: var(--fg-secondaire); text-decoration: none; white-space: nowrap; transition: background var(--t-rapide), color var(--t-rapide); }
.pa-ancres a:hover { color: var(--fg-titre); background: var(--pa-turquoise-50); text-decoration: none; }
.pa-ancres a.is-actif { background: var(--pa-noir); color: var(--pa-blanc); }
.pa-ancres a small { font-weight: 700; color: var(--pa-turquoise-text); margin-left: 0.25rem; }
.pa-ancres a.is-actif small { color: var(--pa-turquoise); }
.pa-ancres__cta { margin-left: auto; flex: none; display: flex; align-items: center; gap: 0.75rem; padding-left: 0.75rem; }
@media (max-width: 900px) { .pa-ancres__cta { display: none; } }

/* Sections de la fiche */
.pa-section-fiche { background: var(--bg-surface); border-radius: var(--r-xl); border: 1px solid var(--bord); padding: var(--sp-m); display: grid; gap: var(--sp-s); align-content: start; min-width: 0; scroll-margin-top: 5rem; }
.pa-section-fiche > h3 { font-size: var(--fs-xl); }

/* Tableau des données techniques : lignes alternées très légères, première colonne figée au défilement */
.pa-tableau { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--bord); }
.pa-tableau table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pa-tableau th, .pa-tableau td { padding: 0.75rem 1rem; text-align: left; white-space: nowrap; }
.pa-tableau thead th { font: 800 var(--fs-xs) var(--font-texte); color: var(--fg-secondaire); text-transform: uppercase; letter-spacing: .05em; background: var(--bg-surface); border-bottom: 1px solid var(--bord); }
.pa-tableau tbody tr:nth-child(odd) { background: var(--bg-page); }
.pa-tableau tbody tr:nth-child(even) { background: var(--bg-surface); }
.pa-tableau tbody th { font-weight: 700; color: var(--fg-titre); position: sticky; left: 0; background: inherit; }
.pa-tableau tbody tr:hover { background: #ececec; }
.pa-tableau .vide { color: var(--pa-gris-clair); }


/* L'avis d'Hervé (« Notre avis ») */
.pa-avis-herve { position: relative; border-radius: var(--r-xl); background: var(--pa-noir); color: rgba(255,255,255,.82); padding: var(--sp-m); display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.pa-avis-herve h3 { color: var(--pa-blanc); }
.pa-avis-herve .pa-surtitre, .pa-avis-herve .pa-accroche { color: var(--pa-turquoise); }

/* Pack */
.pa-pack { display: grid; gap: var(--sp-s); }
.pa-pack__items { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.pa-pack__item { border-radius: var(--r-l); border: 1px solid var(--bord); background: var(--bg-surface); padding: 0.6rem; display: grid; gap: 0.4rem; }
.pa-pack__item .v { aspect-ratio: 4/3; border-radius: var(--r-m); background: var(--grad-ciel); display: grid; place-items: center; font: 600 10px ui-monospace, monospace; color: var(--fg-secondaire); }
.pa-pack__item b { font: 800 var(--fs-sm)/1.25 var(--font-titre); color: var(--fg-titre); }
.pa-pack__total { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; padding: var(--sp-s); border-radius: var(--r-l); background: var(--pa-turquoise-50); }

/* Barre d'achat mobile, fixée en bas (< 900 px) */
.pa-barre-mobile { position: sticky; bottom: 0; z-index: 6; display: none; align-items: center; gap: 0.75rem; justify-content: space-between;
  padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom)); background: var(--bg-verre); -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou); box-shadow: 0 -6px 20px rgba(20,90,90,.10); }
@media (max-width: 900px) { .pa-barre-mobile { display: flex; } }