/*
Theme Name: Shooting Star
Description: Thème WordPress 100% sur-mesure conçu pour Shooting Star Productions (label de musiques de jeux vidéo) — boutique WooCommerce (albums CD/digital, merch, instruments), lecteur audio persistant à la navigation, tunnel d'achat sur-mesure (panier/checkout/mon compte). Voir README.md dans ce dossier pour la documentation technique complète (architecture, pièges connus, comment intervenir dessus).
Author: Jorge — Web Connections
Author URI: https://webconnections.fr
Version: 0.2
Text Domain: shootingstar
*/

:root{
  --black:#0d0d0d; --white:#ffffff; --gold:#FED832;
  /* --gold-dark recalculé le 2026-08-29 (point resté ouvert depuis le changement de jaune de
     marque, commit ec8c26a) : même teinte que --gold (H≈49°) plutôt que l'ancienne teinte
     provisoire, assombrie pour rester lisible en texte/lien sur fond blanc — vérifié au calcul
     (contraste WCAG) : #a9812f (ancien) ne passait déjà pas AA texte normal (3,58:1) ; #856e01
     passe (4,97:1) tout en restant perçu comme un jaune doré foncé, pas un brun/olive détaché du
     jaune de marque. */
  --gold-dark:#856e01;
  --gray-900:#1a1a1a; --gray-700:#4a4a4a; --gray-500:#8a8a8a; --gray-200:#e7e5e2; --gray-100:#f6f5f3;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',system-ui,sans-serif;color:var(--gray-900);background:var(--white);}
h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;margin:0;letter-spacing:.02em;}
a{color:var(--gold-dark);text-decoration:none;} a:hover{color:var(--gold);}
button,.button{font-family:inherit;cursor:pointer;}
img{max-width:100%;}
/* Plein écran (2026-08-29, retour Jorge sur vrai PC) : plus de carte centrée avec bordures grises —
   le site occupe toute la largeur. Les sections gardent leur propre padding (56px) plutôt qu'un
   conteneur à largeur fixe, donc rien ne se re-casse sur un très grand écran. */
.wrap{background:var(--white);}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;background:var(--black);padding:22px 56px;position:sticky;top:0;z-index:900;}
.logo--custom{display:flex;align-items:center;}
/* Agrandi le 2026-08-29 (demande Jorge) : 36px → 52px, max-width relevé en conséquence pour ne
   pas écraser un logo un peu plus large. .hdr garde son padding vertical (22px) tel quel — la
   barre de header grandit naturellement avec le logo, pas de hauteur fixée en dur ailleurs. */
.logo--custom img{display:block;height:52px;width:auto;max-width:240px;}
.logo{display:flex;align-items:center;gap:12px;color:#fff;font-family:'Poppins',system-ui,sans-serif;font-size:19px;letter-spacing:.16em;font-weight:600;}
.nav{display:flex;gap:40px;list-style:none;margin:0;padding:0;}
.nav a{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.nav a:hover{color:var(--gold);opacity:1;}
.hdr-right{display:flex;align-items:center;gap:22px;}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:22px;height:18px;background:none;border:none;padding:0;}

/* Widget "Google Language Translator" dans le header (demande Jorge, 2026-09-30, repositionné à
 * gauche de "Mon compte" le même jour). Le shortcode [google-translator] rend DEUX choses dans le même
 * bloc : la liste de drapeaux (#flags, pas jolie sur ce header) ET le vrai <div id=
 * "google_language_translator">, que le script du plugin (cdn.gtranslate.net/widgets/latest/
 * dropdown.js) transforme en <select> natif au chargement — c'est ce menu déroulant qu'on veut garder,
 * pas les drapeaux. Visible aussi sur mobile (demande Jorge) : un seul <select> compact, pas besoin de
 * le masquer contrairement à la liste de drapeaux plus large. */
.st-translate{display:flex;align-items:center;}
.st-translate #flags{display:none;}
/* !important nécessaire (trouvé le 2026-10-10, retour Jorge "le select n'est pas à la charte
 * au changement de langue") : le plugin GTranslate imprime son propre <style> dans le <head>
 * (réglages "Widget Look" de son admin), avec la règle "#google_language_translator
 * select.gt_selector{color:#32373c}" — un sélecteur avec une classe en plus que le nôtre, donc
 * plus spécifique en CSS, qui gagne systématiquement quel que soit l'ordre des <style> dans la
 * page. Le select affichait donc toujours ce gris WP-admin au lieu du blanc de la charte,
 * illisible sur le header noir — pas spécifique au changement de langue en soi (le même select
 * reste en place, jamais recréé par le widget), juste remarqué à cette occasion. */
#google_language_translator select,
#google_language_translator .goog-te-gadget-simple{
	background:transparent !important;
	border:1px solid rgba(255,255,255,.35) !important;
	border-radius:4px;
	color:#fff !important;
	font-size:12px;
	padding:2px 4px;
	max-width:110px;
}
#google_language_translator select option{color:#111;}
/* Bandeau "Traduit par Google" qui s'ajoute en haut de page après sélection — pousse tout le site vers
 * le bas de ~40px si on ne le neutralise pas (comportement natif de l'iframe injectée par Google). */
.goog-te-banner-frame{display:none !important;}
body{top:0 !important;}
.burger span{height:2px;width:100%;background:#fff;display:block;flex-shrink:0;}

/* Slider bannières d'accueil (2026-09-01, remplace l'ancien hero "Nouveauté" — voir front-page.php
 * et le bloc JS dédié dans footer.php pour le comportement). Léger : pas de librairie, une seule
 * piste (.st-slider-track) qu'on translate en JS. aspect-ratio fixé par breakpoint pour réserver la
 * bonne hauteur avant même le chargement de l'image (pas de saut de mise en page) — bascule
 * desktop/mobile alignée sur le 900px déjà utilisé partout ailleurs dans ce thème (pas le 750px de
 * Sony, dont on reprend juste les proportions d'image, cf. commentaire PHP). Boutons carrés
 * (border-radius:0), même langage que .st-icon-btn/.st-play-btn — pas de coin arrondi ici non plus,
 * seule l'étiquette active des puces déroge un peu (barre, toujours pas de coin arrondi). */
.st-slider{position:relative;overflow:hidden;background:var(--black);}
.st-slider-viewport{overflow:hidden;width:100%;}
.st-slider-track{display:flex;}
.st-slider-slide{flex:0 0 100%;min-width:0;position:relative;aspect-ratio:750/938;}
@media (min-width:900px){ .st-slider-slide{aspect-ratio:1920/566;} }
.st-slider-slide picture,.st-slider-slide img{display:block;width:100%;height:100%;object-fit:cover;}

/* Bouton "Découvrir l'album" (2026-09-01, demande Jorge : un vrai bouton distinct plutôt qu'un lien
 * invisible sur toute l'image comme dans la 1ʳᵉ version — pointe vers la fiche produit exacte, pas
 * la boutique générale, voir shootingstar_get_homepage_slides()). Dégradé bas plutôt qu'un voile sur
 * toute l'image : garde le visuel lisible, juste assez de contraste sous le bouton pour qu'il reste
 * lisible sur n'importe quelle image (utile pour les vrais visuels de Patricia à venir, pas
 * seulement les 2 restés factices). pointer-events:none sur le voile pour ne pas intercepter un
 * swipe/clic ailleurs sur l'image — seul le bouton (pointer-events:auto) réagit. padding-bottom
 * généreux pour ne jamais chevaucher .st-slider-controls (puces + pause), positionné séparément.
 */
.st-slider-cta-scrim{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end;padding:24px 24px 68px;background:linear-gradient(0deg,rgba(13,13,13,.65) 0%,rgba(13,13,13,0) 45%);pointer-events:none;}
.st-slider-cta{pointer-events:auto;}

.st-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(13,13,13,.55);border:1px solid rgba(255,255,255,.35);border-radius:0;color:#fff;cursor:pointer;padding:0;}
.st-slider-arrow:hover{border-color:var(--gold);color:var(--gold);}
.st-slider-arrow--prev{left:16px;}
.st-slider-arrow--next{right:16px;}

.st-slider-controls{position:absolute;left:0;right:0;bottom:18px;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;}
.st-slider-dots{display:flex;align-items:center;gap:8px;}
.st-slider-dot{width:8px;height:8px;padding:0;border:none;border-radius:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s ease,background .25s ease;}
.st-slider-dot.is-active{width:24px;background:var(--gold);}
.st-slider-autoplay-btn{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(13,13,13,.55);border:1px solid rgba(255,255,255,.35);border-radius:0;color:#fff;cursor:pointer;}
.st-slider-autoplay-btn:hover{border-color:var(--gold);color:var(--gold);}
.st-slider-autoplay-btn .st-icon-play{display:none;}
.st-slider-autoplay-btn.is-paused .st-icon-play{display:block;}
.st-slider-autoplay-btn.is-paused .st-icon-pause{display:none;}

@media (max-width:600px){
  .st-slider-arrow{width:32px;height:32px;}
  .st-slider-arrow--prev{left:10px;}
  .st-slider-arrow--next{right:10px;}
  .st-slider-controls{bottom:12px;gap:12px;}
  .st-slider-cta-scrim{padding:16px 16px 56px;}
}

/* sections & grids */
.sec{padding:80px 56px 40px;max-width:1280px;margin:0 auto;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;}
.sec-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px;}
.sec-tabs{display:flex;gap:10px;flex-wrap:wrap;}
.sec-tab{border:1px solid var(--gray-200);border-radius:0;padding:8px 18px;font-size:13px;letter-spacing:.04em;color:var(--gray-700);}
.sec-tab:hover{border-color:var(--gold-dark);color:var(--gray-900);}
.sec-tab.is-active{background:var(--gold);border-color:var(--gold);color:#151515;font-weight:600;}
.sec-search{display:flex;align-items:center;border:1px solid var(--gray-200);border-radius:0;padding:4px 6px 4px 18px;flex-shrink:0;}
.sec-search input[type="search"]{border:none;outline:none;background:none;font-size:13px;font-family:inherit;width:200px;max-width:40vw;}
.sec-search button{background:var(--black);color:#fff;border:none;border-radius:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;transition:opacity .16s ease;}
.card-cover{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background-size:cover;background-position:center;background-color:#111;}
.card-title{font-size:15px;font-weight:700;margin-bottom:4px;}
.card-sub{font-size:13px;color:var(--gray-500);margin-bottom:8px;}
.card-price{font-size:15px;font-weight:700;}

/* Chrome générique WooCommerce (boutique/catégories/recherche) — #primary/#main viennent du wrapper
   par défaut de WooCommerce (voir woocommerce/global/wrapper-start.php, aucun sidebar.php dans le
   thème ne le personnalise), jamais stylés jusqu'ici. Repéré le 2026-08-29 en creusant le bouton
   recherche : fil d'Ariane/titre/tri en style WordPress brut, tranchant avec le reste du site. */
#primary.content-area{max-width:1280px;margin:0 auto;padding:32px 56px 0;}
.woocommerce-breadcrumb{font-size:12px;color:var(--gray-500);margin-bottom:16px;}
.woocommerce-breadcrumb a{color:var(--gray-500);}
.woocommerce-breadcrumb a:hover{color:var(--gold-dark);}
.woocommerce-products-header__title{font-size:30px;font-weight:600;margin-bottom:24px;}
.woocommerce-result-count{color:var(--gray-500);font-size:13px;margin:0 0 24px;}
.woocommerce-ordering select{border:1px solid var(--gray-200);border-radius:0;padding:8px 16px;font-size:13px;font-family:inherit;background:var(--white);}

/* Grille WooCommerce (boutique, produits similaires, upsells) — remplace le rendu par défaut
   (flottant, sans marge interne) par la même grille/carte que l'accueil. */
ul.products{display:grid !important;grid-auto-flow:row !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:24px;list-style:none;margin:0 0 40px !important;padding:0 !important;max-width:1400px;}
/* Le clearfix natif WooCommerce (content:" ";display:table sur ::before/::after de ul.products,
   pensé pour un layout en float) devient un vrai item de grille une fois display:grid appliqué —
   il occupe la 1ère case et décale tous les produits d'une colonne (le 5e passe à la ligne). */
ul.products::before,ul.products::after{content:none !important;display:none !important;}
ul.products li.product{margin:0 !important;padding:0 !important;width:auto !important;float:none !important;clear:none !important;grid-column:auto !important;grid-row:auto !important;order:0 !important;}
ul.products li.product img{width:100%;height:auto;}
.related.products,.up-sells.upsells{margin-top:40px;padding:0 56px;}
.related.products > h2,.up-sells.upsells > h2{font-size:22px;font-weight:600;margin-bottom:24px;font-family:'Poppins',sans-serif;}
.card-actions{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.card-actions .added_to_cart{display:block;font-size:11px;margin-top:6px;width:100%;}

/* Style de bouton unifié — jaune de marque partout sur le site (demande Jorge, 2026-08-29,
   généralisée depuis .btn-more). Coins carrés (pas d'arrondi, cf. maquette Patricia — retiré du
   site entier le même jour, y compris ce bloc, initialement en pill). Couvre les boutons WooCommerce génériques
   (.button : panier, coupon, checkout, place order), le formulaire de contact Fluent Forms
   (règle propre plus bas, sa couleur vient d'un <style> injecté par le plugin qu'il faut
   pouvoir passer devant) et .btn-gold pour les CTA en dur du thème (hero, newsletter). Les
   boutons icône seuls du lecteur/de la recherche (.st-icon-btn, .st-play-btn, .sec-search
   button...) restent inchangés — autre langage visuel (cercle, pas de texte), pas concernés. */
.btn-more,.btn-gold,.button,.button.alt,.card-actions .add_to_cart_button,.single_add_to_cart_button{
	background:var(--gold) !important; /* !important nécessaire : le style par défaut de WooCommerce
		cible .button.alt avec une spécificité plus forte que .button seul (vérifié — sans ça,
		"Ajouter au panier" restait sur son violet #7f54b3 par défaut). */
	color:#151515 !important;
	border:1px solid var(--gold) !important;
	border-radius:0 !important;
	font-weight:600;
	font-size:11px;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:8px 14px;
	display:inline-block;
}
.btn-more:hover,.btn-gold:hover,.button:hover,.button.alt:hover,.card-actions .add_to_cart_button:hover,.single_add_to_cart_button:hover{
	background:var(--gold-dark) !important;
	border-color:var(--gold-dark) !important;
	color:#fff !important;
}
/* Le bouton "Ajouter au panier" de la fiche produit est un CTA principal, taille conservée plus
   généreuse que les petits boutons de carte (héritage de l'ancien style, juste recoloré/arrondi). */
.woocommerce div.product .single_add_to_cart_button{padding:0 40px !important;height:44px !important;font-size:13px;letter-spacing:.1em;line-height:44px;}
/* Fluent Forms (page "Nous contacter") injecte sa propre couleur via un <style> inline à même
   spécificité — !important nécessaire pour être sûr de passer devant quel que soit l'ordre
   d'injection. */
form .ff-btn-submit{background:var(--gold) !important;color:#151515 !important;border:1px solid var(--gold) !important;border-radius:0 !important;font-weight:600 !important;}
form .ff-btn-submit:hover{background:var(--gold-dark) !important;border-color:var(--gold-dark) !important;color:#fff !important;}

.st-play-btn{background:none;border:1px solid var(--gray-200);border-radius:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--gray-900);flex-shrink:0;padding:0;}
.st-play-btn:hover{border-color:var(--gold);color:var(--gold-dark);}
.st-queue-btn{background:none;border:1px solid var(--gray-200);border-radius:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--gray-500);flex-shrink:0;padding:0;margin-left:4px;}
.st-queue-btn:hover{border-color:var(--gold);color:var(--gold-dark);}

.sticky .st-play-btn{border-color:#444;color:#fff;flex-shrink:0;}
.sticky .st-play-btn:hover{border-color:var(--gold);}
.st-meta{display:flex;flex-direction:column;justify-content:center;max-width:180px;}
.st-icon-btn{background:none;border:1px solid #333;border-radius:0;color:#8a8a8a;width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;position:relative;}
.st-icon-btn:hover{color:#fff;border-color:#666;}
.st-icon-btn[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);}

/* Badge de compteur sur le bouton file d'attente — masqué (via JS, display:none) tant que la file est vide. */
.st-queue-count{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#151515;font-size:10px;font-weight:700;line-height:1;border-radius:0;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 2px;}
.st-cart-count{position:absolute;top:-8px;right:-8px;background:var(--gold);color:#151515;font-size:10px;font-weight:700;line-height:1;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;}

/* Mini-panier popup (demande Jorge, 2026-08-29 ; restylé façon Sony le 2026-09-01 — inspiré de la
   popup "Article ajouté au panier" de store.sonymusic.fr : en-tête net avec titre + fermeture
   explicite, hiérarchie de boutons secondaire/primaire bien visible, plus d'air. On garde le
   comportement d'origine — déroulant ancré sous l'icône, ouvert au clic — Jorge ayant tranché pour
   ça plutôt que la notification "vient d'être ajouté" de Sony). Contenu généré par
   woocommerce_mini_cart() (voir header.php/functions.php), classes WooCommerce natives
   (.woocommerce-mini-cart, .mini_cart_item, .wc-forward) réhabillées ici, même langage visuel que
   le reste du site plutôt que le CSS par défaut du plugin. */
.st-minicart{position:relative;}
.st-minicart-panel{position:absolute;top:calc(100% + 18px);right:0;width:400px;max-width:calc(100vw - 40px);background:#fff;border:1px solid var(--gray-200);box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:950;}
.st-minicart-panel[hidden]{display:none;}
.st-minicart-panel-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--gray-200);}
.st-minicart-panel-header span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-900);}
.st-minicart-close{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--gray-200);border-radius:0;color:var(--gray-500);cursor:pointer;flex-shrink:0;}
.st-minicart-close:hover{border-color:var(--gold);color:var(--gold-dark);}
.st-minicart-panel-inner{padding:24px;}
.woocommerce-mini-cart{list-style:none;margin:0 0 18px;padding:0;max-height:360px;overflow-y:auto;}
.woocommerce-mini-cart-item{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--gray-200);position:relative;}
.woocommerce-mini-cart-item:first-child{padding-top:0;}
/* Pochette à gauche du titre (demande Jorge, 2026-09-01) — WooCommerce met les deux dans le MÊME
   <a> et les met déjà dans cet ordre en HTML (img puis titre), mais son propre CSS embarqué
   (jamais dé-enqueue, voir plus haut dans ce fichier) impose `ul.cart_list li img{float:right;
   width:32px}` — plus spécifique que nos anciennes règles ici (aucun !important nécessaire côté
   WooCommerce pour gagner), donc la pochette finissait flottée à droite malgré l'ordre HTML.
   Neutralisé avec !important + l'anchor passé en flex row (img puis texte, dans l'ordre du DOM). */
.woocommerce-mini-cart-item img{width:56px !important;height:56px !important;object-fit:cover;flex-shrink:0;float:none !important;margin:0 !important;}
/* !important sur display nécessaire (retrouvé le 2026-09-01 en creusant pourquoi le titre restait
   collé à l'image malgré ce flex row) : le sélecteur WooCommerce ".woocommerce ul.cart_list li a"
   a 3 éléments dans sa spécificité (ul, li, a) contre 1 seul ici (a) — il gagnait malgré nos 2
   classes (la comparaison de spécificité se fait niveau par niveau : classes à égalité, c'est le
   nombre d'éléments qui a ensuite tranché en sa faveur), donc display:flex ne s'appliquait jamais
   réellement bien que le reste de la règle (gap, etc.) semblait pris en compte. */
.woocommerce-mini-cart-item a:not(.remove){display:flex !important;align-items:center;gap:18px;color:var(--gray-900);font-size:13px;font-weight:700;padding-right:20px;}
.woocommerce-mini-cart-item .quantity{font-size:12px;color:var(--gray-500);display:block;}
.woocommerce-mini-cart-item .remove{position:absolute;top:16px;right:0;color:var(--gray-500) !important;font-size:18px;line-height:1;width:20px;height:20px;display:flex;align-items:center;justify-content:center;text-decoration:none !important;}
.woocommerce-mini-cart-item .remove:hover{color:var(--gold-dark) !important;}
.woocommerce-mini-cart__total{display:flex;justify-content:space-between;font-size:16px;font-weight:700;border-top:1px solid var(--gray-200);padding-top:18px;margin:0 0 20px;}
.woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:10px;margin:0;}
/* Boutons secondaire ("Voir le panier") / primaire ("Commander"), même hiérarchie que Sony
   (secondaire d'abord, primaire ensuite) — !important nécessaire : sans lui, la règle partagée
   .button{background:var(--gold)!important...} (style.css, CTA unifiés du site) prenait le dessus
   sur wc-forward et les deux boutons rendaient identiques en doré plein, aucune hiérarchie visible
   (bug trouvé au restylage du 2026-09-01, jamais corrigé depuis l'ajout du mini-panier le 29/08).
   Piège annexe trouvé en vérifiant en vrai navigateur : le lien "Passer la commande" du template
   WooCommerce mini-cart.php porte la classe "checkout", pas "checkout-button" comme sur la plupart
   des autres templates WC (panier plein, widget panier classique) — vérifié via l'attribut class
   réel rendu, pas deviné. Un premier essai avec :not(.checkout-button) matchait donc les DEUX
   boutons (aucun n'a réellement cette classe ici) et appliquait le style secondaire aux deux. */
.woocommerce-mini-cart__buttons .wc-forward{display:block;text-align:center;padding:15px 20px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout){background:none !important;border:1px solid var(--gray-900) !important;color:var(--gray-900) !important;}
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout):hover{background:var(--gray-100) !important;}
.woocommerce-mini-cart__buttons .checkout{background:var(--gold);border-color:var(--gold);color:#151515;}
.woocommerce-mini-cart__buttons .checkout:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff;}
.woocommerce-mini-cart__empty-message{font-size:13px;color:var(--gray-500);margin:0;text-align:center;padding:12px 0;}
@media (max-width:600px){
  .st-minicart-panel{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;max-height:80vh;overflow-y:auto;}
}

/* Panneau file d'attente — popover ancré au-dessus de la barre sticky. */
#st-queue-panel{position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--black);border-top:1px solid #2a2a2a;max-height:min(50vh,420px);overflow-y:auto;box-shadow:0 -4px 16px rgba(0,0,0,.25);}
#st-queue-panel[hidden]{display:none;}
.st-queue-header{display:flex;align-items:center;justify-content:space-between;padding:16px 56px 8px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.st-queue-empty{padding:0 56px 20px;color:#8a8a8a;font-size:13px;}
.st-queue-list{list-style:none;margin:0;padding:0 56px 16px;}
.st-queue-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #262626;}
.st-queue-item-cover{width:36px;height:36px;flex-shrink:0;background-size:cover;background-position:center;background-color:#222;}
.st-queue-item-meta{flex:1;min-width:0;}
.st-queue-item-title{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-queue-item-sub{color:#8a8a8a;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-queue-item-actions{display:flex;gap:4px;flex-shrink:0;}
.st-queue-item-actions button{background:none;border:1px solid #333;border-radius:0;color:#8a8a8a;width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;}
.st-queue-item-actions button:hover{color:#fff;border-color:#666;}
.st-queue-item-actions button:disabled{opacity:.3;pointer-events:none;}
.st-queue-item-actions .st-queue-remove:hover{color:var(--gold);border-color:var(--gold);}

/* Lecteur réduit — ne garde que pochette + play/pause, tout le reste masqué (bouton #st-sticky-collapse). */
.sticky.is-collapsed{gap:10px;padding:8px 14px;}
.sticky.is-collapsed #st-sticky-prev,
.sticky.is-collapsed #st-sticky-next,
.sticky.is-collapsed .st-meta,
.sticky.is-collapsed #st-sticky-repeat,
.sticky.is-collapsed #st-sticky-favorite,
.sticky.is-collapsed #st-sticky-queue,
.sticky.is-collapsed #st-sticky-progress-track,
.sticky.is-collapsed #st-sticky-time,
.sticky.is-collapsed #st-sticky-mute,
.sticky.is-collapsed #st-sticky-volume{display:none;}
#st-sticky-collapse{margin-left:auto;}
.sticky.is-collapsed #st-sticky-collapse{margin-left:0;}
.sticky:not(.is-collapsed) .icon-expand{display:none;}
.sticky.is-collapsed .icon-collapse{display:none;}

.split2{padding:40px 56px 90px;display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.promo{position:relative;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;height:340px;background-size:cover;background-position:center;}

/* footer */
.ftr{background:var(--black);padding:64px 56px 32px;}
.ftr-grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:60px;margin-bottom:56px;}
.ftr-grid--4{grid-template-columns:1.5fr 1fr 1fr 1.2fr;}
.ftr-col-title{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;}
.ftr-widgets a{color:#9a9a9a;}
.ftr-desc{color:#9a9a9a;font-size:13px;line-height:1.7;margin:0 0 20px;}
.ftr-social{display:flex;gap:12px;}
.ftr-social a{width:34px;height:34px;border:1px solid #444;border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0;}
.ftr-social a:hover{border-color:var(--gold);background:rgba(254,216,50,.08);}
.ftr-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
/* Repassé en ligne horizontale (2026-10-13, demande cliente) : la grille 2 colonnes datait de l'époque
   où cette liste affichait toutes les catégories produit (une trentaine) — avec seulement les 3-4
   liens du menu principal maintenant réutilisé ici, une grille 2 colonnes les empilait sans raison. */
.ftr-links--cats{display:flex;flex-wrap:wrap;gap:12px 24px;}
.ftr-links a{color:#9a9a9a;font-size:14px;}
.ftr-links a:hover{color:var(--gold);}

/* Newsletter du pied de page — vrai formulaire FluentForm #2 (2026-09-30, demande Jorge : l'ancien
   champ+bouton était du HTML statique sans <form>, sans action, purement décoratif). Restylé pour
   garder l'apparence prévue (pastille email + bouton or sur une ligne) malgré le CSS par défaut de
   FluentForm ; la case RGPD (obligatoire) s'affiche en dessous, discrète. */
/* Bouton "S'abonner" en dessous du champ email (demande cliente, 2026-10-13 : "en bas", pas à côté)
   et coins carrés (demande cliente, même jour : "non arrondi" — le border-radius:999px du bouton ci-
   dessous datait de ce restylage du 30/09, oublié lors du passage "pas de radius partout" du 29/08
   sur le reste du site). flex-direction:column en permanence (avant : seulement sous 600px). */
.ftr-newsletter-form .ff-t-container{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
/* Bug trouvé le 2026-09-30 : FluentForm définit nativement .ff-t-cell{flex-basis:100%!important;
   width:100%} (fluent-forms-public.css) — écraser seulement flex-basis ne suffit pas, en flexbox
   "flex-basis:auto" se rabat sur la propriété width quand elle est définie, donc leur width:100%
   reprenait la main et chaque colonne réclamait 100% de la largeur (le champ email disparaissait,
   écrasé par le bouton). width/max-width neutralisés en plus de flex-basis. */
.ftr-newsletter-form .ff-t-cell{flex-basis:auto !important;width:auto !important;max-width:none !important;}
.ftr-newsletter-form .ff-t-column-1{flex:1 1 auto !important;min-width:0 !important;}
.ftr-newsletter-form .ff-t-column-2{flex:0 0 auto !important;}
.ftr-newsletter-form .ff-el-form-control{width:100%;background:transparent;border:1px solid #444;padding:14px 16px;color:#fff;font-size:13px;border-radius:999px;height:auto;}
.ftr-newsletter-form .ff-el-form-control::placeholder{color:#8a8a8a;}
.ftr-newsletter-form .ff-el-form-control:focus{outline:none;border-color:var(--gold);box-shadow:none;}
.ftr-newsletter-form .ff-btn-submit{background:var(--gold) !important;border:none !important;color:#151515 !important;padding:14px 22px !important;font-size:13px !important;font-weight:700;border-radius:0 !important;min-width:0 !important;white-space:nowrap;}
.ftr-newsletter-form .ff_gdpr_field_wrapper{margin-top:12px;}
.ftr-newsletter-form .ff_tc_label{font-size:11px;color:#8a8a8a;display:flex;align-items:flex-start;gap:6px;line-height:1.5;}
.ftr-newsletter-form input.ff_gdpr_field{accent-color:var(--gold);margin-top:2px;flex-shrink:0;}
.ftr-newsletter-form .text-danger{color:#ff8a8a;font-size:11px;margin-top:6px;display:block;}
/* flex-direction:column posé en permanence juste au-dessus (2026-10-13) — ce media query mobile
   devenu redondant (même déclaration) a été retiré. */

/* sticky player */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;gap:20px;background:var(--black);padding:14px 56px;flex-wrap:wrap;box-shadow:0 -4px 16px rgba(0,0,0,.25);}

/* product page */
/* Cadre général de la fiche produit (demande Jorge, 2026-08-29 ; marge latérale réduite le
   2026-09-01, retour Jorge : "il faut agrandir la width générale des produits de 20%" — la
   tracklist des albums à beaucoup de titres, ex. Atlantis Evolution/34 pistes, manquait de place
   dans la colonne étroite héritée de cette marge ; encore élargie le même jour, "5% en plus").
   20% → 14% → 12,2% de chaque côté : élargit la zone de contenu de 60% à 72% puis 75,6% de la
   largeur du cadre (+20% puis +5% de largeur utile en plus, cumulés), sans revenir sur le principe
   d'une marge (juste resserrée) ni sur le 5% haut/bas (inchangé). Toujours autour de tout le
   contenu (hero, tabs, avis, produits similaires). Les blocs internes gardaient chacun leur propre
   padding latéral de 56px (hérité de l'époque où ils étaient pleine largeur) — remis à 0 côté
   gauche/droite pour ne pas s'additionner au cadre. */
.product-frame{padding:5% 12.2%;}
.product-frame .pmain,
.product-frame .ptabs-grid,
.product-frame .simsec,
.product-frame .upsells,
.product-frame .related.products{padding-left:0;padding-right:0;}
.product-frame .pmain{padding-top:0;}
@media (max-width:900px){
  .product-frame{padding:32px 20px;}
}

.crumb{padding:20px 56px 0;font-size:12px;color:var(--gray-500);}
.pmain{display:grid;grid-template-columns:460px 1fr;gap:64px;padding:32px 56px 0;}
.cover{width:100%;max-width:460px;aspect-ratio:1/1;background:linear-gradient(150deg,#0d0d0d 0%,#232733 55%,#3a3f4d 100%);background-size:cover;background-position:center;}
/* Vidéos courtes de galerie (2026-09-28) — même gabarit que .cover, affiché à sa place au clic sur
   une miniature vidéo (voir setCoverVideo() dans footer.php). */
#st-cover-video{width:100%;max-width:460px;aspect-ratio:1/1;object-fit:cover;background:#000;}
.pinfo h1{font-size:34px;font-weight:600;margin-bottom:6px;}
.ptabs-grid{display:grid;grid-template-columns:460px 1fr;gap:64px;padding:56px 56px 0;align-items:start;}
.wc-tabs{list-style:none;display:flex;gap:32px;border-bottom:1px solid var(--gray-200);margin:0 0 24px;padding:0;}
.wc-tabs li a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);padding-bottom:14px;display:block;border-bottom:2px solid transparent;}
.wc-tabs li.active a{color:var(--gray-900);border-bottom-color:var(--gold);font-weight:700;}
.product-cats-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.product-cats-list a{border:1px solid var(--gray-200);border-radius:0;padding:8px 16px;font-size:13px;color:var(--gray-900);display:inline-block;}
.product-cats-list a:hover{border-color:var(--gold);color:var(--gold-dark);}
.simsec{padding:72px 56px 40px;}

/* Avis (reviews) — onglet natif WooCommerce (jamais stylé jusqu'ici : rendu par défaut, formulaire/
   liste de commentaires bruts), à côté de l'onglet Catégories dans .ptabs-grid (460px de large,
   demande explicite de Jorge le 2026-08-29 — a d'abord été sorti en pleine largeur puis remis ici
   le même jour). Habillage aligné sur le reste du site (bordures gray-200, Poppins, jaune
   d'accent) — la classe .star-rating (icônes étoiles) vient du CSS natif WooCommerce, pas retouchée.
   max-width retirés des blocs internes (commentaires/formulaire) : inutiles voire contre-productifs
   dans cette colonne étroite, ils prennent naturellement toute la largeur disponible. */
.woocommerce-Reviews-title{font-size:22px;font-weight:600;margin:0 0 24px;}
.woocommerce-Reviews-title span{color:var(--gray-500);font-weight:400;}
.commentlist{list-style:none;margin:0 0 32px;padding:0;}
.commentlist .comment_container{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--gray-200);}
.commentlist img.avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;}
.commentlist .comment-text{flex:1;min-width:0;}
.commentlist .star-rating{margin-bottom:6px;}
.commentlist .meta{font-size:13px;color:var(--gray-500);margin:0 0 8px;}
.commentlist .woocommerce-review__author{color:var(--gray-900);font-weight:700;}
.commentlist .description p{margin:0;line-height:1.7;color:var(--gray-700);font-size:14px;}
.woocommerce-noreviews{color:var(--gray-500);font-size:14px;margin-bottom:24px;}
#review_form #reply-title{font-size:18px;font-weight:600;margin:0 0 20px;display:block;}
.comment-form-rating label,
.comment-form-author label,
.comment-form-email label,
.comment-form-comment label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px;}
.comment-form-rating label .required,
.comment-form-author label .required,
.comment-form-email label .required,
.comment-form-comment label .required{color:var(--gold-dark);text-decoration:none;}
.comment-form-rating{margin-bottom:20px;}
.comment-form-rating select,
.comment-form-author input,
.comment-form-email input,
.comment-form-comment textarea{width:100%;border:1px solid var(--gray-200);padding:14px 16px;font-size:14px;font-family:inherit;background:#fff;}
.comment-form-rating select:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-comment textarea:focus{outline:none;border-color:var(--gold);}
.comment-form-author,.comment-form-email,.comment-form-comment{margin-bottom:20px;}
.comment-form-comment textarea{resize:vertical;}
/* #respond (wrapper natif de comment_form()) porte un ID — sa propre règle WooCommerce
   (.woocommerce #respond input#submit, --wc-secondary gris) a une spécificité plus forte qu'un
   simple sélecteur de classe : même piège que .button.alt documenté plus haut sur "Ajouter au
   panier", !important nécessaire pour passer devant de façon fiable. */
#respond input#submit.submit,
#review_form .form-submit input{background:var(--gold) !important;border:none !important;padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;color:#151515 !important;}
#respond input#submit.submit:hover,
#review_form .form-submit input:hover{background:var(--gold-dark) !important;color:#fff !important;}
.woocommerce-verification-required,.must-log-in{font-size:14px;color:var(--gray-500);}
.woocommerce-verification-required a,.must-log-in a{color:var(--gold-dark);font-weight:600;}

.shootingstar-product-tracklist{margin:0;}
.shootingstar-tracklist-list{list-style:none;margin:0;padding:0;}
/* 2 colonnes pour les albums à beaucoup de titres (seuil >15, voir shootingstar_playlist_on_
   product_page() dans functions.php). Deux vraies <ol> côte à côte (grid), pas du CSS columns :
   testé et abandonné le 2026-08-29 (retour Jorge, capture à l'appui) — columns:2 sur une seule
   liste cassait l'alignement de certaines pistes à titre long (les items flex à l'intérieur d'un
   contexte multi-colonnes calculent leur largeur de façon peu fiable). Ici chaque <ol> est un
   contexte de bloc normal à largeur fixe, aucune ambiguïté possible.
   Reste à sa place d'origine dans .ptabs-grid (demande Jorge, 2026-08-29, 2ᵉ retour : la version
   pleine largeur — testée juste avant — a été refusée, la tracklist doit rester à côté de la
   description). Espacement resserré à 16px à l'origine, jugé trop dense le 2026-09-01 (retour
   Jorge, capture Atlantis Evolution/34 pistes à l'appui) — élargi à 32px, rendu possible par la
   marge latérale de .product-frame réduite le même jour (20%→14%, voir plus haut), qui redonne de
   la largeur à cette colonne sans reprovoquer le bug de titre tronqué/wrap. */
.shootingstar-tracklist-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start;}
@media (max-width:500px){
  .shootingstar-tracklist-cols{grid-template-columns:1fr;}
}
.shootingstar-product-tracklist--compact .shootingstar-tracklist-item{gap:6px;padding:7px 0;font-size:12px;}
.shootingstar-product-tracklist--compact .st-play-btn{width:18px;height:18px;}
.shootingstar-product-tracklist--compact .st-play-btn svg{width:9px;height:9px;}
.shootingstar-product-tracklist--compact .shootingstar-tracklist-num{width:16px;font-size:12px;}
.shootingstar-product-tracklist--compact .shootingstar-tracklist-duration{font-size:11px;}
.shootingstar-product-tracklist--compact .st-queue-btn{width:16px;height:16px;padding:0;}
.shootingstar-product-tracklist--compact .st-queue-btn svg{width:10px;height:10px;}
.shootingstar-tracklist-item{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray-200);}
.shootingstar-tracklist-num{width:24px;color:var(--gray-500);text-align:right;}
/* Retour Jorge (2026-08-29, capture à l'appui) : un titre long ("Rainbow Bridge (Deep Bass
   Remix)") retombait à la ligne sous le numéro dans les colonnes 2col, cassant l'alignement —
   min-width:140px forçait un passage à la ligne dès que la colonne (plus étroite en 2 colonnes)
   n'avait plus la place. Tronqué avec "…" à la place : la piste reste sur une seule ligne quelle
   que soit la longueur du titre ou la largeur de colonne, plus robuste qu'élargir (un titre encore
   plus long referait le même problème). */
.shootingstar-tracklist-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shootingstar-tracklist-duration{color:var(--gray-500);font-size:.9em;}
.shootingstar-tracklist-item audio{width:100%;max-width:280px;height:32px;}

/* Piste "non mise à l'écoute" (2026-10-09) : le titre reste visible, juste grisé pour signaler
   que ce n'est pas un oubli de pochette/lecteur — demande cliente du 2026-10-13 : le titre
   s'affichait déjà, mais aucun style n'existait encore pour cet état (le bouton remplaçant
   restait un rectangle vide, sans distinction visuelle claire). */
.shootingstar-tracklist-item--unavailable .shootingstar-tracklist-title,
.shootingstar-tracklist-item--unavailable .shootingstar-tracklist-num{color:var(--gray-500);}
.st-play-btn--disabled{opacity:.3;cursor:default;}
.st-play-btn--disabled:hover{border-color:var(--gray-200);color:var(--gray-900);}

/* Repéré le 2026-08-29 : notre template fiche produit personnalisé (woocommerce/single-product.php)
   ne passe jamais par le wrapper WooCommerce standard <div class="product">.woocommerce ni
   <div class="summary"> — toutes les règles ci-dessous étaient préfixées ".woocommerce div.product"
   et ne s'appliquaient donc JAMAIS (vérifié : aucune ne matchait le moindre élément), silencieusement
   depuis leur création. Reformulées avec .pinfo, le vrai conteneur existant dans ce template. */
/* .pinfo n'a plus de max-width propre (demande Jorge, 2026-08-29 : "le texte doit prendre toute
   la place comme avant") — la largeur de la fiche se règle sur .pmain (max-width:1280px, centré),
   pas colonne par colonne. */
.pinfo p.price{font-size:26px;font-weight:700;color:var(--gray-900);}
.pinfo .reset_variations{display:inline-block;font-size:12px;color:var(--gray-500);}

/* Sélecteurs de variation en boutons (Format/Taille/Couleur...) — même langage visuel que les
   onglets de tri de l'accueil (.sec-tab) : pill, jaune plein à l'état sélectionné. */
.variations{margin-bottom:20px;}
.variations tr{display:block;margin-bottom:14px;}
.variations th{display:block;text-align:left;font-size:13px;font-weight:600;color:var(--gray-900);padding:0 0 8px;}
.variations td.value{display:flex;align-items:center;flex-wrap:wrap;gap:14px;}
.st-swatch-group{display:flex;flex-wrap:wrap;gap:10px;}
.st-swatch-btn{border:1px solid var(--gray-200);border-radius:0;padding:9px 18px;font-size:13px;background:none;color:var(--gray-900);}
.st-swatch-btn:hover{border-color:var(--gold-dark);}
.st-swatch-btn.is-selected{background:var(--gold);border-color:var(--gold);color:#151515;font-weight:600;}

/* Quantité + bouton panier côte à côte, pas empilés — touchait aussi bien les produits simples que
   variables (le <div class="quantity"> de WooCommerce est block par défaut, sans layout explicite
   il prend toute la largeur et pousse le bouton à la ligne suivante). */
/* form.cart PAS .variations_form : .variations_form porte aussi la classe "cart" — un simple
   ".pinfo form.cart{display:flex}" mettait donc TOUT le formulaire produit variable en ligne
   (tableau Format + bloc prix/quantité côte à côte au lieu d'empilés), bug qui ne se voyait qu'à
   partir d'une certaine largeur d'écran (repéré à 1920px, invisible à 1200px). */
.pinfo form.cart:not(.variations_form),.woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;}
.woocommerce-variation-price{font-size:26px;font-weight:700;color:var(--gray-900);width:100%;margin-bottom:4px;}

/* Sélecteur de quantité avec boutons -/+ (demande Jorge, 2026-08-29) — construit en JS (footer.php,
   buildQuantityStepper()) autour du <input type=number> natif de WooCommerce, hauteur alignée au
   pixel sur le bouton "Ajouter au panier" (44px, même valeur que .single_add_to_cart_button). */
.st-qty-stepper{display:flex;align-items:center;border:1px solid var(--gray-200);border-radius:0;height:44px;overflow:hidden;flex-shrink:0;}
.st-qty-btn{width:36px;height:44px;border:none;background:none;font-size:16px;color:var(--gray-700);display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;}
.st-qty-btn:hover{color:var(--gray-900);background:var(--gray-100);}
.st-qty-stepper input.qty{border:none !important;height:44px !important;width:40px;text-align:center;padding:0;-moz-appearance:textfield;}
.st-qty-stepper input.qty::-webkit-outer-spin-button,.st-qty-stepper input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.single_add_to_cart_button{height:44px !important;padding:0 40px !important;font-size:13px;letter-spacing:.1em;line-height:44px;box-sizing:border-box;}
.product-includes{margin-top:24px;}
.product-includes-label{font-weight:600;font-size:14px;margin-bottom:8px;}
.product-includes-list{margin:0;padding-left:18px;color:var(--gray-700);font-size:14px;line-height:1.8;}

@media (max-width:1200px){
  /* !important obligatoire ici : la règle de base (ligne ~121) est elle-même en !important
   * (nécessaire pour passer devant le clearfix natif WooCommerce), donc une media query sans
   * !important ne peut PAS la neutraliser quelle que soit sa position dans la feuille de style —
   * bug trouvé le 2026-08-29 (audit responsive) : la grille restait bloquée à 5 colonnes sur
   * mobile (cartes de 50px de large, boutons qui débordaient de leur propre carte). */
  ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:900px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);flex-direction:column;gap:0;padding:8px 0;z-index:50;}
  .nav.is-open{display:flex;}
  .nav a{padding:14px 24px;display:block;}
  .hdr{position:relative;}
  .burger{display:flex;cursor:pointer;}
  /* Corrigé le 2026-10-10 : le sélecteur était ".hdr-right span" (trop large) — masquait aussi
     les 3 <span> internes du bouton burger (icône invisible, bug remonté par Jorge) et le badge
     panier .st-cart-count. Restreint au texte "Mon compte" uniquement, seul élément visé au
     départ. */
  .hdr-right span.hdr-account-text{display:none;}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));}
  ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .split2{grid-template-columns:1fr;}
  .ftr-grid{grid-template-columns:1fr;gap:36px;}
  .pmain{grid-template-columns:1fr;}
  .cover{max-width:100%;}
  .ptabs-grid{grid-template-columns:1fr;}
  /* Demande Jorge (2026-08-29) : sur mobile, la tracklist doit suivre juste après le bouton
     "Ajouter au panier" (fin de .pmain), pas après les onglets Détails/Catégories/Avis — .ptabs-
     grid reste display:grid même en 1 colonne, donc un simple "order" suffit à inverser l'affichage
     sans toucher à l'ordre du HTML (qui reste inchangé pour le bureau, où les deux blocs sont déjà
     côte à côte). */
  .shootingstar-product-tracklist{order:-1;}
}
@media (max-width:600px){
  .hdr{padding:18px 20px;}
  .sec{padding:48px 20px 24px;}
  .split2{padding:24px 20px 56px;}
  .ftr{padding:48px 20px 24px;}
  .grid4{grid-template-columns:1fr 1fr;gap:16px;}
  .sec-head h2{font-size:22px;}
  .sec-toolbar{flex-direction:column;align-items:stretch;}
  .sec-search{width:100%;}
  .sec-search input[type="search"]{width:100%;max-width:none;flex:1;}
  .pmain{padding:24px 20px 0;gap:24px;}
  .ptabs-grid{padding:40px 20px 0;gap:24px;}
  .simsec{padding:48px 20px 32px;}
  .sticky{padding:10px 14px;gap:10px;}
  .sticky #st-sticky-volume,.sticky #st-sticky-mute,.sticky #st-sticky-repeat,.sticky #st-sticky-favorite{display:none;}
  .st-meta{max-width:110px;}
  /* Retour Jorge (2026-08-29) : "lecteur pas très pratique" sur mobile → boutons trop petits pour
     viser au doigt (confirmé via question posée : prev/lecture/suivant/file/réduire faisaient
     26-30px, sous les ~44px recommandés pour une cible tactile). Agrandis ici plutôt que dans la
     règle de base .st-play-btn/.st-icon-btn, qui sert aussi aux petits boutons play de chaque
     piste de la tracklist — pas concernés par ce retour, pas de raison de les changer. */
  .sticky #st-sticky-prev,.sticky #st-sticky-next,.sticky #st-sticky-queue,.sticky #st-sticky-collapse{width:44px;height:44px;}
  .sticky #st-sticky-prev svg,.sticky #st-sticky-next svg,.sticky #st-sticky-queue svg,.sticky #st-sticky-collapse svg{width:18px;height:18px;}
  .sticky .st-play-btn{width:44px;height:44px;}
  .sticky .st-play-btn svg{width:18px;height:18px;}
  .st-queue-header,.st-queue-empty,.st-queue-list{padding-left:20px;padding-right:20px;}
}

/* ==========================================================================
   Tunnel d'achat — panier (maquette Patricia, wp-content/uploads/maquette/
   panier.html). Bloc centré (max-width + margin:auto, même convention que
   .sec/.pmain) : demande explicite de Jorge, la page par défaut restait
   collée à gauche.
   ========================================================================== */
.cartpage{max-width:1280px;margin:0 auto;}

.cart-steps{display:flex;justify-content:center;align-items:center;gap:56px;padding:36px 56px;border-bottom:1px solid var(--gray-200);flex-wrap:wrap;}
.cart-step{display:flex;align-items:center;gap:10px;}
.cart-stepnum{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;background:var(--gray-100);color:var(--gray-500);}
.cart-step.is-active .cart-stepnum{background:var(--black);color:#fff;}
.cart-step.is-done .cart-stepnum{background:var(--gold);color:#151515;}
.cart-steplabel{font-size:13px;white-space:nowrap;color:var(--gray-500);}
.cart-step.is-active .cart-steplabel{color:var(--gray-900);font-weight:700;}
.cart-step-line{width:60px;height:1px;background:var(--gray-200);flex-shrink:0;}

.cart-empty{padding:80px 56px;text-align:center;}
.cart-empty p{color:var(--gray-500);margin-bottom:24px;font-size:16px;}

.cart-layout{display:grid;grid-template-columns:1fr 400px;gap:64px;padding:48px 56px 100px;}
.cart-title{font-size:26px;font-weight:600;margin:0 0 32px;}
.cart-count{color:var(--gray-500);font-weight:400;font-size:16px;}

.cart-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--gray-200);}
.cart-item-thumb{width:88px;height:88px;flex-shrink:0;}
.cart-item-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-item-info{flex:1;min-width:0;}
.cart-item-title{font-size:15px;font-weight:700;margin-bottom:4px;}
.cart-item-title a{color:inherit;}
.cart-item-meta{font-size:13px;color:var(--gray-500);margin-bottom:10px;}
.cart-item-meta dl{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;}
.cart-item-meta dt,.cart-item-meta dd{margin:0;display:inline;font-weight:400;}
.cart-item-meta dt::after{content:":";margin-right:4px;}
.cart-item-actions{display:flex;align-items:center;gap:16px;}
.cart-item-actions .quantity{display:inline-flex;}
.cart-item-remove{font-size:12px;color:var(--gray-500);text-decoration:underline;}
.cart-item-remove:hover{color:var(--gold-dark);}
.cart-item-price{font-size:15px;font-weight:700;flex-shrink:0;white-space:nowrap;}

.cart-coupon-row{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap;}
.cart-coupon{display:flex;gap:12px;flex:1;min-width:260px;}
.cart-coupon-input{flex:1;min-width:0;border:1px solid var(--gray-200);padding:14px 16px;font-size:14px;font-family:inherit;}
.cart-update-link{background:none;border:none;font-size:12px;color:var(--gray-500);text-decoration:underline;padding:0;}
.cart-update-link:hover{color:var(--gold-dark);}

.cart-summary{background:var(--gray-100);padding:32px;height:fit-content;}
.cart-summary h3{font-size:17px;font-weight:600;margin:0 0 24px;}
.cart-sumrow{display:flex;justify-content:space-between;font-size:14px;margin-bottom:14px;color:var(--gray-700);}
.cart-total-row{border-top:1px solid var(--gray-200);padding-top:20px;display:flex;justify-content:space-between;margin-bottom:28px;}
.cart-total-row span:first-child{font-size:16px;font-weight:700;}
.cart-total-row span:last-child{font-size:20px;font-weight:700;}
.cart-checkout-btn{width:100%;text-align:center;display:block;}
.cart-secure-note{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:18px;color:var(--gray-500);}
.cart-secure-note svg{flex-shrink:0;}
.cart-secure-note span{font-size:11px;}

@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr;padding:32px 20px 56px;gap:32px;}
  .cart-steps{gap:28px;padding:24px 20px;}
  .cart-steplabel{display:none;}
}
@media (max-width:600px){
  .cart-item{flex-wrap:wrap;}
}

/* ==========================================================================
   Tunnel d'achat — checkout (maquette Patricia, wp-content/uploads/maquette/
   paiement.html). Réutilise .cart-layout/.cart-summary/.cart-steps (voir plus
   haut) ; habille les éléments générés nativement par WooCommerce (champs de
   facturation, tableau de résumé, moyens de paiement) plutôt que de les
   reconstruire — validation/AJAX/gateways réels intacts.
   ========================================================================== */
.checkout-required-note{font-size:13px;color:var(--gray-500);margin:0 0 32px;}

/* Bug signalé par Jorge (2026-08-29) : validation avec champs manquants fait "tout se décaler".
   Cause trouvée (Playwright, champs vidés + soumission réelle) : le JS natif de WooCommerce
   (checkout.js) insère le bloc d'erreurs comme PREMIER enfant de <form class="checkout ...
   cart-layout">, qui est une grille CSS à 2 colonnes fixes (formulaire 1fr | résumé 400px, voir
   .cart-layout plus bas). Cet enfant en trop décale tout le placement automatique de la grille
   (résumé poussé colonne étroite, formulaire dans la mauvaise colonne). Fix : le bloc d'erreurs
   s'étend sur les 2 colonnes et prend sa propre ligne, sans toucher au JS/PHP natif de WooCommerce. */
.cart-layout > .woocommerce-NoticeGroup,
.cart-layout > .woocommerce-error,
.cart-layout > .woocommerce-message,
.cart-layout > .woocommerce-info{grid-column:1 / -1;margin:0 0 28px;}

.woocommerce-checkout .form-row{margin-bottom:20px;}
.woocommerce-checkout .form-row label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px;}
.woocommerce-checkout .form-row label .required{color:var(--gold-dark);text-decoration:none;}
.woocommerce-checkout .form-row label .optional{font-size:11px;color:var(--gray-500);text-transform:none;}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea{width:100%;border:1px solid var(--gray-200);padding:14px 16px;font-size:14px;font-family:inherit;background:#fff;}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus{outline:none;border-color:var(--gold);}
.woocommerce-checkout .select2-container .select2-selection--single{height:auto;border:1px solid var(--gray-200);padding:8px 16px;border-radius:0;}
@media (min-width:601px){
  .woocommerce-checkout .form-row-first{width:calc(50% - 8px);float:left;}
  .woocommerce-checkout .form-row-last{width:calc(50% - 8px);float:right;}
}
.woocommerce-checkout #customer_details::after{content:"";display:block;clear:both;}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_comments_field label{font-size:22px;font-weight:600;margin:32px 0 20px;color:var(--gray-900);}
.woocommerce-checkout .woocommerce-billing-fields > h3{margin-top:0;}
.woocommerce-checkout .woocommerce-additional-fields{border-top:1px solid var(--gray-200);padding-top:12px;margin-top:20px;}
/* "Informations complémentaires" (titre natif WooCommerce au-dessus des notes de commande) retiré
   à la demande d'Anouk/Patricia (2026-09-28) — le champ "Notes de commande" reste, seul le titre
   générique disparaît (déjà stylé comme un vrai titre via #order_comments_field label ci-dessus,
   donc aucun vide visuel à la place). */
.woocommerce-checkout .woocommerce-additional-fields > h3{display:none;}

/* Résumé de commande — tableau natif WooCommerce restylé en liste simple, même look que le
   panier plutôt que des bordures de <table> par défaut.
   Corrigé le 2026-09-30 (retour Jorge, persistant malgré un 1er correctif de padding) : la ligne
   produit (tbody, cellules de <table> avec largeurs de colonne auto) et les lignes Sous-total/
   Expédition/Total (tfoot, display:flex + justify-content:space-between) utilisaient deux mécanismes
   de mise en page différents — deux colonnes de tableau ne s'alignent jamais pixel pour pixel avec un
   flex même en copiant les mêmes valeurs de padding. La ligne produit passe donc en flex, exactement
   comme le pied de tableau : alignement garanti par construction, plus par coïncidence de chiffres.
   Vignette produit ajoutée à la demande (woocommerce_cart_item_name, voir functions.php). */
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.woocommerce-checkout-review-order-table thead{display:none;}
.woocommerce-checkout-review-order-table tbody tr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 8px;border-bottom:1px solid var(--gray-200);}
.woocommerce-checkout-review-order-table tbody td{padding:0;margin:0;border:none;font-size:13px;vertical-align:top;}
.woocommerce-checkout-review-order-table tbody td.product-name{flex:1;min-width:0;display:flex;align-items:center;}
.woocommerce-checkout-review-order-table tbody td.product-total{text-align:right;font-weight:700;white-space:nowrap;flex-shrink:0;}
.woocommerce-checkout-review-order-table .product-quantity{color:var(--gray-500);font-weight:400;}
.st-review-item{display:flex;align-items:center;gap:12px;min-width:0;}
.st-review-thumb{width:44px;height:44px;object-fit:cover;flex-shrink:0;background:var(--gray-100);}
.st-review-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.woocommerce-checkout-review-order-table tfoot tr{display:flex;justify-content:space-between;font-size:14px;color:var(--gray-700);padding:6px 8px;}
.woocommerce-checkout-review-order-table tfoot th{font-weight:400;text-align:left;}
.woocommerce-checkout-review-order-table tfoot td{text-align:right;}
.woocommerce-checkout-review-order-table tfoot .order-total{border-top:1px solid var(--gray-200);margin-top:14px;padding-top:20px;font-size:16px;font-weight:700;color:var(--gray-900);}
.woocommerce-checkout-review-order-table tfoot .order-total td{font-size:20px;}
/* Mention TVA ("(dont X€ EU VAT…)", générée nativement par WooCommerce accolée au total) passée à la
   ligne et réduite (retour Jorge, 2026-09-30 : "le mettre sur la ligne d'en bas... et en plus petit"). */
.woocommerce-checkout-review-order-table tfoot .order-total td .includes_tax{display:block;margin-top:4px;font-size:11px;font-weight:400;color:var(--gray-500);}

/* Moyens de paiement — 100% dynamique (woocommerce_checkout_payment()), pas de gateway en dur. */
.woocommerce-checkout-payment{margin-top:8px;}
ul.payment_methods{list-style:none;margin:0 0 20px;padding:0;}
ul.payment_methods > li{border:1px solid var(--gray-200);padding:16px 18px;margin-bottom:10px;}
ul.payment_methods > li.woocommerce-notice{border:none;padding:0;}
ul.payment_methods input[type="radio"]{accent-color:var(--gold);margin-right:10px;}
ul.payment_methods label{font-size:14px;font-weight:700;}
.payment_box{margin-top:14px;padding:14px;background:var(--gray-100);font-size:13px;color:var(--gray-700);}
.woocommerce-terms-and-conditions-wrapper{font-size:12px;color:var(--gray-500);margin-bottom:16px;}
.st-digital-consent{font-size:12px;color:var(--gray-700);background:var(--gray-100);border-left:3px solid var(--gold);padding:12px 14px;margin-bottom:16px;}
.st-digital-consent label{display:flex;align-items:flex-start;gap:8px;font-weight:400;text-transform:none;letter-spacing:normal;}
.st-digital-consent input[type="checkbox"]{accent-color:var(--gold);margin-top:2px;flex-shrink:0;}
.place-order{margin-top:8px;}
#place_order{width:100%;}

/* Bandeaux "Déjà client ?"/"Code promo ?" (hooks natifs woocommerce_before_checkout_form) —
   rendus par WooCommerce en dehors de .cartpage, jamais stylés jusqu'ici (fond bleu générique). */
.woocommerce-form-login,.woocommerce-form-coupon{max-width:1280px;margin:0 auto;padding:20px 56px;}
.woocommerce-info,.woocommerce-message,.woocommerce-form-login-toggle .woocommerce-info,.woocommerce-form-coupon-toggle .woocommerce-info{list-style:none;background:var(--gray-100);border:none !important;border-left:3px solid var(--gold) !important;padding:16px 56px;margin:0;font-size:14px;color:var(--gray-900);}
.woocommerce-info a,.woocommerce-message a{color:var(--gold-dark);font-weight:600;}
.woocommerce-form-login .form-row label,.woocommerce-form-coupon .form-row label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px;display:block;}
.woocommerce-form-login input.input-text,.woocommerce-form-coupon input.input-text{border:1px solid var(--gray-200);padding:12px 16px;font-size:14px;font-family:inherit;}
@media (max-width:600px){
  .woocommerce-form-login,.woocommerce-form-coupon,.woocommerce-info,.woocommerce-message{padding-left:20px;padding-right:20px;}
}

/* ==========================================================================
   Tunnel d'achat — confirmation (maquette Patricia, wp-content/uploads/
   maquette/confirmation.html). Avant cette section, la page order-received
   n'avait aucun template dans le thème : contenu brut de WooCommerce, sans
   .cartpage ni marges (signalé par Jorge le 2026-08-29). Bloc centré, étroit
   (contrairement à panier/checkout qui sont en 2 colonnes larges).
   ========================================================================== */
.thankyou-wrap{max-width:640px;margin:0 auto;padding:64px 24px 100px;text-align:center;}
.thankyou-check{width:56px;height:56px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;}
.thankyou-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500);margin:0 0 10px;}
.thankyou-title{font-size:30px;font-weight:600;margin:0 0 16px;}
.thankyou-sub{font-size:14px;color:var(--gray-700);line-height:1.7;margin:0 0 8px;max-width:480px;margin-left:auto;margin-right:auto;}
.thankyou-order-number{font-size:13px;color:var(--gray-500);margin:0 0 32px;}
.thankyou-order-details{text-align:left;border:1px solid var(--gray-200);padding:28px;}
.thankyou-order-details .woocommerce-order-overview{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px 32px;font-size:13px;}
.thankyou-order-details .woocommerce-order-overview strong{display:block;font-size:15px;margin-top:2px;}
.thankyou-order-details .woocommerce-order-details__title{font-size:15px;font-weight:700;margin:0 0 16px;}
.thankyou-order-details table.shop_table{width:100%;border-collapse:collapse;margin:0 0 8px;}
.thankyou-order-details table.shop_table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);font-weight:400;padding:0 0 10px;border-bottom:1px solid var(--gray-200);}
.thankyou-order-details table.shop_table td{padding:14px 0;border-bottom:1px solid var(--gray-200);font-size:14px;vertical-align:top;}
.thankyou-order-details table.shop_table .product-total{text-align:right;white-space:nowrap;}
.thankyou-order-details table.shop_table tfoot th{text-align:left;font-weight:400;padding:14px 0;}
.thankyou-order-details table.shop_table tfoot td{text-align:right;padding:14px 0;}
.thankyou-order-details table.shop_table tfoot tr:last-child th,
.thankyou-order-details table.shop_table tfoot tr:last-child td{font-weight:700;font-size:15px;border-top:1px solid var(--gray-200);}
.thankyou-order-details .woocommerce-customer-details{margin-top:24px;font-size:13px;}
.thankyou-order-details .woocommerce-customer-details address{font-style:normal;line-height:1.6;color:var(--gray-700);}
.thankyou-order-details .woocommerce-table--order-downloads{margin-top:8px;}
.thankyou-actions{margin-top:32px;}
@media (max-width:600px){
  .thankyou-wrap{padding:40px 20px 64px;}
  .thankyou-order-details{padding:20px;}
}

/* ==========================================================================
   Mon compte — retour Jorge (2026-08-29) : "pas mal mais on peut faire
   mieux, enlever les listes à puces, centrer et arranger un peu mieux ça".
   Menu de navigation (Tableau de bord/Commandes/Téléchargements/Adresses/
   Détails du compte/Déconnexion) rendu en <ul> brut par WooCommerce, jamais
   stylé jusqu'ici — même page pas centrée (héritait du même souci de largeur
   que panier/checkout avant leur correction, voir index.php is_account_page()).
   ========================================================================== */
.woocommerce-account .woocommerce{max-width:1280px;margin:0 auto;padding:48px 56px 100px;display:flex;align-items:flex-start;gap:64px;}
/* WooCommerce applique son propre float/width par défaut sur ces deux blocs (woocommerce-layout.css),
   en conflit avec la mise en page ci-dessus — !important sur flex-basis/flex-grow pour être sûr de
   passer devant quel que soit l'ordre d'injection de sa propre feuille de style. */
.woocommerce-account .woocommerce-MyAccount-navigation{float:none !important;width:auto !important;flex:0 0 220px !important;}
.woocommerce-account .woocommerce-MyAccount-content{float:none !important;width:auto !important;flex:1 1 auto !important;min-width:0 !important;}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--gray-200);}
.woocommerce-MyAccount-navigation li a{display:block;padding:14px 0;font-size:14px;color:var(--gray-700);}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--gray-900);font-weight:700;}
.woocommerce-MyAccount-navigation li a:hover{color:var(--gold-dark);}
.woocommerce-MyAccount-content p{margin:0 0 16px;line-height:1.7;color:var(--gray-700);}
.woocommerce-MyAccount-content a{color:var(--gold-dark);font-weight:600;}
.woocommerce-MyAccount-content table.shop_table{width:100%;border-collapse:collapse;margin:16px 0;}
.woocommerce-MyAccount-content table.shop_table th,.woocommerce-MyAccount-content table.shop_table td{padding:12px 8px;border-bottom:1px solid var(--gray-200);font-size:13px;text-align:left;}
/* Page "Adresses" (my-account/edit-address/) : WooCommerce met le lien Modifier/Ajouter en
   float:right par défaut, ce qui le colle au bord droit de la colonne étroite au lieu de rester
   sous le titre — corrigé en bloc aligné à gauche comme le reste du contenu du compte. */
/* Empilées l'une sous l'autre (retour Anouk/Patricia, 2026-09-28) plutôt que côte à côte
 * (comportement par défaut du CSS natif WooCommerce : .col2-set .col-1/.col-2 en float 48%). */
.woocommerce-Addresses.col2-set{display:flex;flex-direction:column;gap:48px;}
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2{width:100%;float:none;text-align:left;}
/* Alignées à gauche (retour Jorge, 2026-09-28) — écrase un éventuel centrage hérité du CSS natif
   WooCommerce sur .woocommerce-Address/.woocommerce-Addresses. */
.woocommerce-Addresses,
.woocommerce-Address{text-align:left;}
.woocommerce-Address-title.title{overflow:visible;margin-bottom:12px;text-align:left;}
.woocommerce-Address-title.title h2{font-size:18px;margin:0 0 6px;text-align:left;}
/* Lien "Modifier"/"Ajouter" toujours centré malgré .woocommerce-Addresses{text-align:left} plus haut
   (retour Jorge, 2026-09-28, capture à l'appui) — .title hérite d'un centrage natif WooCommerce,
   forcé ici explicitement plutôt que de compter sur l'héritage. */
.woocommerce-Address-title.title .edit{float:none !important;display:block !important;font-size:13px;text-align:left !important;}
.woocommerce-Address address{font-style:normal;line-height:1.7;color:var(--gray-700);}
@media (max-width:900px){
  .woocommerce-account .woocommerce{grid-template-columns:1fr;padding:32px 20px 56px;gap:24px;}
}

/* "Mon compte" déconnecté (demande Jorge, 2026-08-29) : le conteneur .woocommerce est en
   display:flex (règle ci-dessus, pensée pour nav+contenu une fois connecté) — sans connexion, il
   n'y a ni nav ni .woocommerce-MyAccount-content, juste 3 éléments à plat (notices, <h2>, le
   <form> de connexion) que le flex alignait en ligne au lieu de les empiler, avec le message
   d'erreur éventuel loin à gauche du formulaire (bug signalé, capture à l'appui). Détecté via
   :has() (pas de classe dédiée posée par WooCommerce sur ce cas) plutôt qu'ajouter du PHP juste
   pour une classe de layout. Centré comme demandé, formulaire dans un cadre bordé cohérent avec
   le reste du site (même langage que .thankyou-order-details/.cart-summary). */
/* Largeur trop étroite (retour Jorge, 2026-09-28, capture à l'appui) : 480px suffisait pour un seul
   formulaire de connexion mais écrasait les 2 colonnes connexion+inscription (col2-set natif
   WooCommerce, inscription activée) l'une contre l'autre — labels/champs qui retombent à la ligne.
   Élargi à 900px (chaque colonne ~48% ≈ 430px, confortable pour un formulaire), toujours centré. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)){display:block;max-width:900px;text-align:center;}
@media (max-width:960px){
  .woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)){max-width:480px;}
}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .woocommerce-notices-wrapper:empty{display:none;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .woocommerce-info{max-width:none;margin:0 0 28px;padding:16px 20px;text-align:left;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) .woocommerce-error{margin:0 0 28px;text-align:left;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) > h2{font-size:26px;font-weight:600;margin:0 0 28px;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login{max-width:none;margin:0;padding:32px;border:1px solid var(--gray-200);text-align:left;}
/* Labels "Identifiant ou e-mail"/"Mot de passe" toujours centrés malgré la règle ci-dessus (retour
   Jorge, 2026-09-28) — le conteneur #customer_login (natif WooCommerce, inscription activée) hérite
   probablement d'un text-align:center plus spécifique côté CSS natif. Forcé explicitement ici,
   !important nécessaire pour être sûr de gagner quel que soit l'ordre de chargement des feuilles. */
#customer_login,
#customer_login form,
#customer_login label,
#customer_login .form-row{text-align:left !important;}
/* Le text-align seul ne suffisait pas (retour Jorge, 2026-09-28, capture à l'appui) : le vrai
   problème est que .woocommerce-form-login input.input-text (règle générique plus haut, pensée pour
   le petit formulaire "Déjà client ?" du checkout) ne fixe PAS width:100% — ici, sur /my-account/,
   l'input retombe donc sur sa largeur native de <input> (~180px), qui se retrouve poussée à droite
   par le flex/alignement du formulaire. Forcé explicitement en largeur pleine, label et input alignés
   à gauche, !important pour ne dépendre d'aucun ordre de chargement ni support de :has(). */
#customer_login .form-row-wide{display:block !important;width:100% !important;}
#customer_login input.input-text{width:100% !important;text-align:left !important;margin:0 !important;}
#customer_login label{width:100% !important;display:block !important;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login .woocommerce-form-row{margin-bottom:20px;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login input.input-text{width:100%;border:1px solid var(--gray-200);padding:14px 16px;font-size:14px;font-family:inherit;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login input.input-text:focus{outline:none;border-color:var(--gold);}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login .form-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:24px;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login button[type="submit"]{background:var(--gold);border:none;padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login button[type="submit"]:hover{background:var(--gold-dark);color:#fff;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login .woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-700);text-transform:none;font-weight:400;letter-spacing:normal;margin:0;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login .woocommerce-LostPassword{margin:18px 0 0;font-size:13px;}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) form.woocommerce-form-login .woocommerce-LostPassword a{color:var(--gold-dark);font-weight:600;}

/* ==========================================================================
   Finalisation (2026-09-24, demandes de Jorge)
   ========================================================================== */

/* Attributs de la fiche produit : Artiste / Label / Année de sortie / Format. */
.ptabs-left{min-width:0;}
.product-attrs{margin:0 0 32px;padding:0;display:grid;gap:0;border-top:1px solid var(--gray-200);}
.product-attr{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--gray-200);font-size:14px;}
.product-attr dt{flex:0 0 140px;margin:0;color:var(--gray-500);font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.9;}
.product-attr dd{margin:0;font-weight:600;color:var(--gray-900);}

/* Stock : quantité disponible en vert, rupture en rouge (fiche produit, simple ET variations). */
p.stock,.woocommerce-variation-availability .stock{font-size:14px;font-weight:700;margin:14px 0;}
p.stock.in-stock,.woocommerce-variation-availability .in-stock{color:#1a8a3a;}
p.stock.out-of-stock,.woocommerce-variation-availability .out-of-stock{color:#c62828;}
p.stock.available-on-backorder{color:#b26a00;}

/* Téléphone au paiement — indicatif intégré directement au champ numéro (retour Jorge, 2026-09-28 :
   "l'indicatif il faudrait normalement l'intégrer au téléphone", puis 2026-09-30 : "comme dans
   FluentForm... sur la même ligne"). Un seul rectangle visuel : la bordure entre les deux est
   supprimée, le label "Indicatif" est masqué (visibility, pas display, pour garder le même
   alignement vertical que le label "Téléphone" au-dessus de l'input) — seul le label "Téléphone"
   reste visible, comme sur un champ unique classique.
   Historique : un <select> natif affichant "France (+33)" tronquait en "Fra…" dans la case étroite
   (même texte fermé/ouvert) ; un essai avec emoji drapeau (🇫🇷) a suivi, mais rendu incohérent selon
   OS/navigateur (parfois 2 lettres carrées côte à côte au lieu d'un vrai drapeau, plus large que
   prévu). Fixé le 2026-09-30 avec un vrai menu déroulant maison (voir wp_footer dans functions.php) :
   le <select> reste la source de données (cachée, toujours soumise avec le formulaire), habillé d'un
   bouton + liste avec vraies icônes SVG (assets/flags/), rendu identique partout. Mise en ligne
   systématique (plus seulement à partir de 601px) : le champ tient confortablement même sur un petit
   écran, pas de raison de le faire empiler sur mobile. */
.st-phone-prefix label{visibility:hidden;}
.woocommerce-checkout .form-row.st-phone-prefix{width:104px;float:left;margin-right:0;position:relative;}
.woocommerce-checkout .form-row.st-phone-number{width:calc(100% - 104px);float:left;margin-left:0;}
.st-phone-number input{border-left:none;}

.st-phone-prefix-widget{position:relative;}
.st-phone-prefix-trigger{display:flex;align-items:center;gap:6px;width:100%;height:48px;border:1px solid var(--gray-200);background:#fff;border-right:none;padding:0 8px 0 12px;cursor:pointer;font-family:inherit;font-size:14px;color:var(--gray-900);}
.st-phone-prefix-trigger:focus{outline:none;border-color:var(--gold);position:relative;z-index:1;}
.st-phone-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex-shrink:0;}
.st-phone-code{font-size:13px;color:var(--gray-700);}
.st-phone-chevron{width:0;height:0;margin-left:auto;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--gray-500);flex-shrink:0;}
.st-phone-prefix-list{position:absolute;top:calc(100% + 4px);left:0;z-index:20;width:240px;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--gray-200);box-shadow:0 12px 28px rgba(0,0,0,.16);}
.st-phone-prefix-list[hidden]{display:none;}
.st-phone-prefix-list li{margin:0;padding:0;}
.st-phone-prefix-list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:none;text-align:left;font-family:inherit;font-size:13px;color:var(--gray-900);cursor:pointer;}
.st-phone-prefix-list button:hover,.st-phone-prefix-list button:focus{background:var(--gray-100);outline:none;}
.st-phone-prefix-list .st-phone-name{flex:1;}
.st-phone-prefix-list .st-phone-code{color:var(--gray-500);}

/* Indicatif affiché dans le champ numéro lui-même (retour Jorge, 2026-09-30) — badge non cliquable
   ("+33") collé au début du champ, le client ne tape que le numéro local. Voir wp_footer dans
   functions.php pour la logique (mise à jour au changement de pays, ignoré si le champ contenait déjà
   un numéro complet pré-rempli). */
.st-phone-number-badged{display:block;position:relative;}
.st-phone-badge{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--gray-500);pointer-events:none;}
.st-phone-number-badged input#billing_phone{padding-left:58px;}

/* Résumé de commande (checkout) plus grand : colonne plus large, plus d'air, texte plus lisible.
   Ciblé sur form.checkout pour ne pas toucher le panier qui partage .cart-layout. */
/* Champs trop collés au bord (retour Anouk/Patricia, 2026-09-28) : plus de marge latérale sur le
   checkout uniquement (le panier, qui partage .cart-layout, n'a pas été signalé). Desktop seulement
   — sous 900px, .cart-layout repasse à un padding réduit (32px/20px) pour l'écran étroit, ne pas
   l'écraser avec une valeur pensée pour desktop. */
@media (min-width:901px){
  form.checkout.cart-layout{padding-left:88px;padding-right:88px;}
}
form.checkout.cart-layout{grid-template-columns:minmax(0,1fr) 540px;gap:72px;}
form.checkout.cart-layout .cart-summary{padding:44px;}
form.checkout.cart-layout .cart-summary h3{font-size:22px;margin-bottom:28px;}
form.checkout.cart-layout .woocommerce-checkout-review-order-table tbody tr{padding:16px 8px;font-size:15px;}
form.checkout.cart-layout .woocommerce-checkout-review-order-table tfoot tr{font-size:15px;padding:8px 8px;}
form.checkout.cart-layout .woocommerce-checkout-review-order-table tfoot .order-total td{font-size:24px;}
form.checkout.cart-layout ul.payment_methods > li{padding:20px 22px;}
form.checkout.cart-layout ul.payment_methods label{font-size:15px;}
@media (max-width:1200px){
  form.checkout.cart-layout{grid-template-columns:minmax(0,1fr) 420px;gap:48px;}
}
@media (max-width:900px){
  form.checkout.cart-layout{grid-template-columns:1fr;}
  form.checkout.cart-layout .cart-summary{padding:28px;}
}

/* Mon compte — formulaires (Détails du compte, Adresses) : champs aérés, bouton "Enregistrer les
   modifications" détaché des champs (il était collé au dernier champ, les lignes en float
   form-row-first/last ne laissaient aucune marge avant lui). */
.woocommerce-MyAccount-content form .form-row{margin:0 0 20px;}
.woocommerce-MyAccount-content form label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px;}
.woocommerce-MyAccount-content form input.input-text,
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea{width:100%;border:1px solid var(--gray-200);padding:14px 16px;font-size:14px;font-family:inherit;background:#fff;}
.woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-MyAccount-content form select:focus{outline:none;border-color:var(--gold);}
.woocommerce-MyAccount-content form em{display:block;margin-top:6px;font-size:12px;color:var(--gray-500);}
.woocommerce-EditAccountForm::after,.woocommerce-address-fields__field-wrapper::after{content:"";display:block;clear:both;}
.woocommerce-EditAccountForm fieldset{border:1px solid var(--gray-200);padding:28px;margin:36px 0 0;}
.woocommerce-EditAccountForm fieldset legend{font-size:16px;font-weight:600;padding:0 10px;}
.woocommerce-EditAccountForm > p:has(button[name="save_account_details"]),
.woocommerce-address-fields > p:has(button[name="save_address"]){clear:both;margin-top:36px;}
.woocommerce-MyAccount-content button[name="save_account_details"],
.woocommerce-MyAccount-content button[name="save_address"]{margin-top:0;}

/* Collections d'artiste (2026-09-24) — bandeau « Voir la collection » sur la fiche album + page artiste. */
.collection-link{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 0;padding:18px 22px;background:#151515;color:#fff;transition:background .2s;}
.collection-link:hover{background:#000;}
.collection-link-text{display:flex;flex-direction:column;gap:4px;}
.collection-link-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.collection-link-name{font-size:17px;font-weight:600;}
.collection-link svg{flex-shrink:0;color:var(--gold);}

/* Bandeau "Pack" (2026-10-13) — même langage visuel que .collection-link ci-dessus, avec en plus
   l'image du pack à gauche (demande cliente explicite : "une image du visuel à la une du pack"). */
.pack-banner{display:flex;align-items:center;gap:16px;margin:24px 0 0;padding:14px 22px;background:#151515;color:#fff;transition:background .2s;}
.pack-banner:hover{background:#000;}
.pack-banner-cover{width:56px;height:56px;flex-shrink:0;background-size:cover;background-position:center;background-color:#000;}
.pack-banner-text{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0;}
.pack-banner-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.pack-banner-name{font-size:17px;font-weight:600;}
.pack-banner-saving{font-size:13px;color:var(--gray-200);}
.pack-banner svg{flex-shrink:0;color:var(--gold);}
.artist-page{padding-bottom:80px;}
.artist-banner{width:100%;aspect-ratio:2560/755;background:#000;overflow:hidden;}
.artist-banner-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.artist-head{max-width:1280px;margin:0 auto;padding:40px 56px 8px;}
.artist-head h1{font-size:34px;font-weight:600;margin:0 0 12px;}
.artist-head p{margin:0;max-width:760px;color:var(--gray-700);line-height:1.7;font-size:15px;}
@media (max-width:900px){
  .artist-banner{aspect-ratio:4/3;}
  .artist-head{padding:28px 20px 4px;}
  .artist-head h1{font-size:28px;}
}

/* Merch / instruments (2026-09-24) — galerie photo, pastilles de couleur, onglets Attributs / Guide des
   tailles / Avis, pastilles de catégories de la page Merch. */
.pgallery{min-width:0;}
.pthumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;max-width:460px;}
.pthumb{position:relative;width:78px;height:78px;padding:0;border:none;background:#000;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;opacity:.75;transition:opacity .15s,outline-color .15s;}
.pthumb img,.pthumb video{display:block;width:100%;height:100%;object-fit:cover;}
.pthumb:hover{opacity:1;}
.pthumb.is-active{outline-color:var(--gold);opacity:1;}
/* Miniature vidéo (2026-09-28) — icône lecture superposée pour la distinguer des photos. */
.pthumb-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.25);pointer-events:none;}
.st-swatch-group.is-color .st-swatch-btn::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:1px solid rgba(0,0,0,.25);background:var(--gray-200);}
.st-swatch-color--blanc::before{background:#f3f1ec !important;}
.st-swatch-color--marron::before{background:#63412d !important;}
.st-swatch-color--vert::before{background:#3a6848 !important;}
.ptabs-grid--goods{grid-template-columns:1fr;}
.ptabs-grid--goods .ptabs-left{max-width:900px;}
/* Attributs (tableau WooCommerce natif) */
.woocommerce-product-attributes{width:100%;border-collapse:collapse;}
.woocommerce-product-attributes th,.woocommerce-product-attributes td{padding:12px 0;border-bottom:1px solid var(--gray-200);text-align:left;font-size:14px;vertical-align:top;}
.woocommerce-product-attributes th{width:200px;color:var(--gray-500);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-right:24px;}
.woocommerce-product-attributes td p{margin:0;}
/* Guide des tailles */
.size-guide-table{width:100%;max-width:620px;border-collapse:collapse;}
.size-guide-table th,.size-guide-table td{padding:12px 16px;border-bottom:1px solid var(--gray-200);font-size:14px;text-align:left;}
.size-guide-table thead th{background:var(--gray-100);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-700);}
.size-guide-table tbody th{font-weight:700;}
.size-guide-note{margin:16px 0 0;font-size:13px;color:var(--gray-500);line-height:1.6;max-width:620px;}
/* Page Merch : pastilles de catégories (même look que les onglets de genre, sans le filtre AJAX). */
.merch-chips{display:flex;gap:10px;flex-wrap:wrap;}
.merch-chip{border:1px solid var(--gray-200);padding:8px 18px;font-size:13px;letter-spacing:.04em;color:var(--gray-700);}
.merch-chip:hover{border-color:var(--gold-dark);color:var(--gray-900);}
.merch-chip.is-active{background:var(--gold);border-color:var(--gold);color:#151515;font-weight:600;}

/* Badges "Précommande"/"Nouveauté" (2026-09-24, badge Nouveauté ajouté 2026-10-09) : pastilles en
   haut à gauche de la pochette (carte + fiche), empilées via le conteneur commun .st-product-badges
   si les deux sont actifs en même temps — chaque pastille garde sa propre couleur plutôt qu'être
   positionnée individuellement (retour cliente du 2026-10-13 : le badge Nouveauté restait en texte
   brut non coloré, faute de règle CSS dédiée). */
.st-product-badges{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.st-badge-preorder,.st-badge-new{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;line-height:1;}
.st-badge-preorder{background:var(--gold);color:#151515;}
.st-badge-new{background:var(--black);color:var(--white);}
.pmain .cover{position:relative;}
.preorder-note{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--gold-dark);}

/* Page Vidéo (2026-09-24, modèle shooting-star.com/nos-creations/) : grand lecteur 16:9 avec bouton
   lecture central + flèches, titre/description, bande de miniatures défilante. Pas de coins arrondis
   (convention du thème). L'iframe YouTube n'existe qu'après le clic sur lecture. */
.videopage{max-width:1280px;margin:0 auto;padding:48px 56px 100px;}
.videopage-head{text-align:center;margin:0 0 36px;}
.videopage-head h1{font-size:34px;font-weight:600;margin:0 0 8px;}
.videopage-head p{margin:0;color:var(--gray-500);font-size:15px;}
.vp-empty{text-align:center;color:var(--gray-500);padding:60px 0;}
/* Disposition : ordinateur = lecteur (gauche) + liste des vidéos (droite) visibles ensemble ; la liste
   défile seule (position:absolute dans .vp-side, donc jamais plus haute que le lecteur + son titre).
   ≤1000px = empilé : lecteur, puis bande de miniatures défilante (voir @media plus bas). */
.vp-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:stretch;}
.vp-layout--single{grid-template-columns:minmax(0,1fr);}
.vp-main{min-width:0;}
.vp-side{position:relative;min-height:0;}
.vp-player{position:relative;background:#000;aspect-ratio:16/9;}
.vp-stage{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#000;}
.vp-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vp-stage.is-playing .vp-play{display:none;}
.vp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:3px solid #fff;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,transform .2s;}
.vp-play svg{margin-left:4px;}
.vp-play:hover{background:var(--gold);border-color:var(--gold);color:#151515;transform:translate(-50%,-50%) scale(1.06);}
.vp-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:none;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:2;}
.vp-arrow:hover{background:var(--gold);color:#151515;}
.vp-arrow--prev{left:0;}
.vp-arrow--next{right:0;}
.vp-meta{padding:24px 0 8px;}
.vp-meta h2{font-size:22px;font-weight:600;margin:0 0 8px;}
.vp-meta p{margin:0;color:var(--gray-700);line-height:1.7;font-size:15px;max-width:820px;}
.vp-strip{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;padding:0 6px 0 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.vp-thumb{flex:0 0 auto;display:flex;gap:12px;align-items:flex-start;background:none;border:none;padding:0;text-align:left;cursor:pointer;font-family:inherit;color:var(--gray-700);}
.vp-thumb img{display:block;flex:0 0 138px;width:138px;aspect-ratio:16/9;object-fit:cover;background:#000;outline:3px solid transparent;outline-offset:-3px;transition:outline-color .15s,opacity .15s;opacity:.8;}
.vp-thumb span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:0;font-size:13px;line-height:1.4;}
.vp-thumb:hover img{opacity:1;}
.vp-thumb.is-active img{outline-color:var(--gold);opacity:1;}
.vp-thumb.is-active span{color:var(--gray-900);font-weight:700;}
/* Tablette / mobile : lecteur au-dessus, liste en bande horizontale dessous. */
@media (max-width:1000px){
  .vp-layout{grid-template-columns:minmax(0,1fr);gap:0;}
  .vp-side{position:static;}
  .vp-strip{position:relative;inset:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:20px 0 8px;gap:14px;scroll-snap-type:x proximity;overscroll-behavior:auto;overscroll-behavior-x:contain;}
  .vp-thumb{flex:0 0 210px;display:block;scroll-snap-align:start;}
  .vp-thumb img{width:100%;flex:none;}
  .vp-thumb span{margin-top:8px;-webkit-line-clamp:2;}
  /* Lecteur jamais plus haut que l'écran (téléphone en paysage) : reste entièrement visible. */
  .vp-player{width:min(100%,calc((100vh - 90px) * 16 / 9));margin:0 auto;}
}
@supports (height:100svh){@media (max-width:1000px){.vp-player{width:min(100%,calc((100svh - 90px) * 16 / 9));}}}
@media (max-width:900px){
  .videopage{padding:32px 20px 64px;}
  .videopage-head h1{font-size:28px;}
  .vp-play{width:68px;height:68px;}
  .vp-arrow{width:34px;height:52px;}
  .vp-thumb{flex-basis:150px;}
}
/* Ordinateur : titre de page plus compact pour que lecteur + liste tiennent sur un seul écran. */
@media (min-width:1001px){
  .videopage{padding-top:24px;padding-bottom:56px;}
  .videopage-head{margin-bottom:18px;}
  .videopage-head h1{font-size:28px;margin-bottom:4px;}
  .vp-meta{padding-top:16px;}
  .vp-meta h2{font-size:20px;}
}
/* Grands écrans : page plus large, lecteur plus grand (≈1000 px au lieu de 800), liste un peu plus large. */
@media (min-width:1500px){
  .videopage{max-width:1560px;}
  .vp-layout{grid-template-columns:minmax(0,1fr) 400px;}
  .vp-thumb img{flex-basis:160px;width:160px;}
}