/* ==========================================================================
   FICHE PRODUIT — port de la section 21 du design V4 : la fiche produit,
   woocommerce/content-single-product.php et ses morceaux. Chargée quand
   is_product() est vrai (inc/assets.php), après composants.css, qui porte
   les primitives partagées (fil d'Ariane, pilule, stock, quantité, bouton
   « Copy », notices).

   Sections 0 à 7 : la fiche (grille, galerie, résumé, bloc d'achat, bande
   livraison, description et caractéristiques, produits liés, avis).
   Section 8 : les points de rupture.

   Mêmes règles que les autres feuilles : aucune valeur en dur, jetons
   :root de style.css et de composants.css, jetons locaux --fi-* pour les
   dimensions que le design écrit en dur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   JETONS LOCAUX DE LA FICHE
   -------------------------------------------------------------------------- */
:root {
    /* Fiche produit */
    --fi-gallery-thumb:     72px;   /* vignette, et sa colonne à gauche        */
    --fi-gallery-pad:       32px;   /* marge interne de la grande image        */
    --fi-gallery-pad-sm:    24px;   /* … sous 1024 px                          */
    --fi-tag-h:             22px;   /* étiquette « New » / « Promo »           */
    --fi-tag-x:              9px;   /* … son padding horizontal                */
    --fi-tag-ls:           .08em;   /* … son espacement de lettres             */
    --fi-spec-row-y:         5px;   /* padding vertical d'une ligne de la liste */
    --fi-spec-dt-gap:       24px;   /* entre libellé et valeur de la liste     */
    --fi-spec-lh:            1.4;   /* interligne de la liste                  */
    --fi-copy-h-sm:         22px;   /* bouton « Copy » dans la liste           */
    --fi-prose:             15px;   /* description, prose                      */
    --fi-prose-lh:           1.6;
    --fi-prose-indent:      18px;   /* retrait des listes de la description    */
    --fi-buybox-icon:       40px;   /* plaque du cadenas                       */
    --fi-buybox-h2:         17px;
    --fi-buybox-btn-h:      48px;   /* boutons du bloc d'achat                 */
    --fi-buybox-btn-min:   160px;   /* largeur minimale de ces boutons         */
    --fi-price-mask:        18px;   /* prix masqué « € ••,•• »                 */
    --fi-price-account:     24px;   /* prix d'un compte autorisé (composé)     */
    --fi-specs-h2:          20px;
    --fi-spec-th-w:         38%;    /* colonne des libellés du tableau         */
    --fi-spec-th-w-sm:      42%;    /* … sous 640 px                           */
    --fi-h1-fiche-sm:       22px;   /* h1 de la fiche sous 640 px              */
    --fi-avatar:            36px;   /* avatar d'un avis                        */
    --fi-stars-w:            5em;   /* largeur des cinq étoiles                */
    --fi-spec-cell-y:        6px;   /* cellule du tableau : padding vertical   */
    --fi-spec-cell-x:       10px;   /* … horizontal                            */

    /* Carrousel des produits liés (design 21.6) */
    --fi-fbt-cols:             3;   /* cartes visibles                         */
    --fi-fbt-cols-sm:          2;   /* … sous 640 px                           */
    --fi-fbt-card-xs:        78%;   /* largeur d'une carte sous 420 px         */
    --fi-fbt-arrow:         32px;   /* bouton flèche                           */
    --fi-fbt-arrow-off:      .35;   /* … son opacité en bout de piste          */
    --fi-fbt-bleed:          2px;   /* marge de la piste pour l'ombre des cartes */

    /* Partagés avec boutique.css, mêmes valeurs : chaque feuille se suffit. */
    --fi-h1:                28px;   /* h1 de la fiche, comme l'en-tête des résultats */
    --fi-sticky-top:       104px;   /* sous le masthead collant                */
    --fi-title-max-w:      640px;   /* largeur maximale du formulaire d'avis   */
}

/* --- 0. Grille à deux colonnes : galerie, résumé. Pas de marge basse : la
   section qui suit porte son filet et son espace. ------------------------- */
.product-page {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--sp-48);
    padding: var(--sp-24) 0 0;
    align-items: start;
}

/* --- 1. Galerie : une grande image, les vignettes en colonne à sa gauche,
   la note dessous, pas de carrousel ------------------------------------------ */
.gallery {
    position: sticky;
    top: var(--fi-sticky-top);
    display: grid;
    grid-template-columns: var(--fi-gallery-thumb) minmax(0, 1fr);
    grid-template-areas:
        "thumbs main"
        "note note";
    gap: var(--sp-12);
    align-items: start;
}

/* Une seule image (content-single-product.php) : pas de colonne de vignettes. */
.gallery--seule {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "note";
}

.gallery__main {
    grid-area: main;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: var(--fi-gallery-pad);
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery__main img,
.gallery__main .ph {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery__main .ph {
    background: var(--placeholder);
    border-radius: var(--radius-sm);
}

.gallery__thumbs {
    grid-area: thumbs;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

.gallery__thumb {
    width: var(--fi-gallery-thumb);
    height: var(--fi-gallery-thumb);
    flex: none;
    padding: var(--sp-8);
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ease), transform var(--ease-press);
}

.gallery__thumb:hover {
    border-color: var(--slate);
}

.gallery__thumb:active {
    transform: scale(.95);
}

.gallery__thumb[aria-current="true"] {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 var(--cp-line) var(--ink);
}

.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery__note {
    grid-area: note;
    font-size: var(--fs-12);
    color: var(--grey);
}

/* --- 2. Résumé ---------------------------------------------------------- */
.summary {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    min-width: 0;
}

/* GeneratePress espace ses galeries (.site-main .gallery) et ses résumés
   (.entry-summary:not(:first-child)) avec deux classes : même poids ici, plus tard. */
.product-page .gallery {
    margin: 0;
}

.product-page .summary {
    margin-top: 0;
}

/* La ligne garde sa hauteur même sans étiquette : le titre ne bouge pas
   selon le produit ni selon le compte (le badge promo est vidé pour un
   visiteur). */
.summary__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-8);
    min-height: var(--fi-tag-h);
}

/* Étiquettes de mise en avant, au trait : jamais la qualité ni le stock.
   « New » d'après la date de publication, « Promo » = badge promo natif. */
.gmparts-tag {
    display: inline-flex;
    align-items: center;
    height: var(--fi-tag-h);
    padding: 0 var(--fi-tag-x);
    border: var(--cp-line) solid currentColor;
    border-radius: var(--pill);
    background: transparent;
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--fi-tag-ls);
    text-transform: uppercase;
}

.gmparts-tag--new {
    color: var(--action);
}

.gmparts-tag--promo {
    color: var(--accent);
}

.summary .product_title {
    font-size: var(--fi-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-page-title);
    letter-spacing: var(--ls-h2);
    text-wrap: pretty;
}

/* Liste de spécifications sous le titre (meta.php) : libellé | valeur, un
   filet entre les lignes, pas de cadre. Identique pour un visiteur et un
   compte pro : jamais de prix ; le nombre de pièces seulement pour qui voit
   les prix. */
.spec-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
}

.spec-list__row {
    display: contents;
}

.spec-list dt,
.spec-list dd {
    margin: 0;
    padding: var(--fi-spec-row-y) 0;
    border-bottom: var(--cp-line) solid var(--line);
    line-height: var(--fi-spec-lh);
}

.spec-list dt {
    padding-right: var(--fi-spec-dt-gap);
    font-size: var(--fs-13);
    font-weight: var(--fw-normal);
    color: var(--grey);
}

.spec-list dd {
    min-width: 0;
    font-size: var(--fs-14);
    color: var(--ink);
}

.spec-list code {
    font-family: var(--mono);
    font-size: var(--fs-14);
    line-height: var(--fi-spec-lh);
    color: var(--ink);
    letter-spacing: .02em;
}

/* Marque, modèles, catégories : liés à leur archive, sans changer d'aspect. */
.spec-list a {
    color: var(--ink);
    text-decoration: none;
}

.spec-list a:hover {
    text-decoration: underline;
}

.spec-list .sku-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-8) var(--sp-10);
}

.spec-list .sku-row code {
    font-weight: var(--fw-medium);
}

/* Le bouton « Copy » (composants.css §13b), plus bas dans la liste. */
.spec-list .copy-btn,
.spec-list .copy-btn:hover,
.spec-list .copy-btn:focus {
    height: var(--fi-copy-h-sm);
    padding: 0 var(--sp-8);
}

.spec-list .pill {
    vertical-align: middle;
}

/* Compatibilité : deux lignes au plus, le reste coupé ; le texte entier
   reste dans la page pour les lecteurs d'écran et la recherche. */
.spec-list .compat-row {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Note moyenne de WooCommerce, quand il y a des avis. */
.woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    font-size: var(--fs-13);
    color: var(--grey);
}

/* --- 3. Bloc d'achat -------------------------------------------------------
   Visiteur : cadenas, invitation, prix masqué, deux boutons. Compte
   autorisé : prix WooCommerce et formulaire d'ajout natif, composés des
   mêmes éléments. */
.buybox {
    background: linear-gradient(135deg, var(--pastel-green-bg) 0%, var(--paper) 85%);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-24);
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
}

.buybox__head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-14);
}

.buybox__icon {
    width: var(--fi-buybox-icon);
    height: var(--fi-buybox-icon);
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--action);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-icon);
}

.buybox h2 {
    font-size: var(--fi-buybox-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
}

.buybox__head p {
    margin-top: var(--sp-4);
    font-size: var(--fs-13);
    color: var(--grey);
    line-height: var(--lh-lede);
}

.buybox__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-8);
    padding: var(--sp-12) var(--sp-14);
    background: var(--buybox-price-bg);
    border-radius: var(--radius-sm);
    border: var(--cp-line) dashed var(--line-strong);
}

.buybox__price .k {
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
}

.buybox__price .v {
    font-size: var(--fi-price-mask);
    color: var(--locked);
}

/* Prix WooCommerce d'un compte autorisé (<p class="price">). */
.buybox__price .price {
    margin: 0;
    font-size: var(--fi-price-account);
    font-weight: var(--fw-medium);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.buybox__price .price del {
    color: var(--grey);
    font-size: var(--fs-14);
    font-weight: var(--fw-normal);
    margin-right: var(--sp-6);
}

.buybox__price .price ins {
    text-decoration: none;
}

.buybox__price-note {
    margin-left: auto;
    font-size: var(--fs-12);
    color: var(--grey);
}

.buybox__actions {
    display: flex;
    gap: var(--sp-10);
    flex-wrap: wrap;
}

.buybox__actions .btn {
    flex: 1 1 var(--fi-buybox-btn-min);
    height: var(--fi-buybox-btn-h);
    font-size: var(--fs-15);
}

/* Formulaire d'ajout natif : compteur (composants.css) et bouton principal. */
.buybox form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-10);
}

.buybox .single_add_to_cart_button,
.buybox .single_add_to_cart_button:focus {
    flex: 1 1 var(--fi-buybox-btn-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--fi-buybox-btn-h);
    padding: 0 var(--sp-20);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--action);
    color: var(--paper);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease-press);
}

.buybox .single_add_to_cart_button:hover {
    background: var(--action-lift);
    color: var(--paper);
}

.buybox .single_add_to_cart_button:active {
    transform: scale(.95);
}

.buybox__perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8) var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-13);
    color: var(--grey);
}

.buybox__perks li {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.buybox__perks svg {
    color: var(--action);
    flex: none;
}

/* --- 4. Bande livraison --------------------------------------------------- */
.delivery {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-13);
    color: var(--grey);
}

.delivery li {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
}

.delivery svg {
    flex: none;
    color: var(--slate);
}

.delivery strong {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* --- 5. Description et caractéristiques ------------------------------------ */
/* Un filet et 48 px au-dessus : la section se détache de la fiche. */
.specs {
    margin-top: var(--sp-48);
    padding: var(--sp-48) 0 var(--sp-56);
    border-top: var(--cp-line) solid var(--line);
}

.specs__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-48);
    align-items: start;
}

.specs__grid--seul {
    grid-template-columns: minmax(0, 1fr);
}

.specs h2 {
    font-size: var(--fi-specs-h2);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-16);
}

/* Tableau à bordures, lignes alternées (maquette du 20 septembre 2026).
   margin : GeneratePress habille toute table, on reprend la main. */
.spec-table {
    width: 100%;
    margin: 0;
    border: var(--cp-line) solid var(--line);
    border-collapse: collapse;
    font-size: var(--fs-13);
    color: var(--ink);
}

.spec-table th,
.spec-table td {
    padding: var(--fi-spec-cell-y) var(--fi-spec-cell-x);
    border: var(--cp-line) solid var(--line);
    vertical-align: top;
    text-align: left;
    line-height: var(--lh-body);
}

.spec-table th {
    width: var(--fi-spec-th-w);
    font-weight: var(--fw-medium);
    color: var(--ink);
}

.spec-table td {
    color: var(--ink);
}

.spec-table tr:nth-child(odd) {
    background: var(--paper);
}

.spec-table tr:nth-child(even) {
    background: var(--bench);
}

.spec-table td p {
    margin: 0;
}

/* Marque, modèles, type, qualité, châssis : liés à leur archive, sans
   changer d'aspect, comme dans la liste sous le titre. */
.spec-table a {
    color: var(--ink);
    text-decoration: none;
}

.spec-table a:hover {
    text-decoration: underline;
}

/* Description : la description courte puis la description longue de
   WooCommerce, en prose (paragraphes, h3, listes). */
.prose {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    font-size: var(--fi-prose);
    line-height: var(--fi-prose-lh);
    color: var(--ink);
}

.prose p {
    color: var(--grey);
}

.prose .woocommerce-product-details__short-description p + p {
    margin-top: var(--sp-12);
}

.prose strong {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

.prose h3 {
    margin-top: var(--sp-8);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    line-height: var(--fi-prose-lh);
}

.prose ul,
.prose ol {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0;
    padding-left: var(--fi-prose-indent);
    color: var(--grey);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

/* --- 6. Produits liés : le carrousel de cartes de la colonne de droite,
   au-dessus du tableau (design 21.6). Trois cartes visibles, deux sous
   640 px, une et l'amorce de la suivante sous 420 px ; la piste défile
   (scroll-snap), les flèches n'apparaissent que si les cartes débordent
   (fiche.js). ---------------------------------------------------------------- */
.specs__right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Le tableau qui suit le carrousel s'en sépare par un filet. */
.specs__right > .fbt + div {
    margin-top: var(--sp-32);
    padding-top: var(--sp-32);
    border-top: var(--cp-line) solid var(--line);
}

.fbt {
    min-width: 0;
}

.fbt__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    margin-bottom: var(--sp-16);
}

.fbt__head h2 {
    margin-bottom: 0;
}

.fbt__nav {
    display: none;
    gap: var(--sp-6);
}

.fbt.has-overflow .fbt__nav {
    display: flex;
}

/* GeneratePress habille button, button:hover et button:focus : sélecteurs
   groupés pour reprendre la main, comme les boutons de quantité. */
.fbt__arrow,
.fbt__arrow:hover,
.fbt__arrow:focus {
    width: var(--fi-fbt-arrow);
    height: var(--fi-fbt-arrow);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--ease), transform var(--ease-press);
}

.fbt__arrow:hover {
    border-color: var(--slate);
}

.fbt__arrow:active {
    transform: scale(.95);
}

.fbt__arrow:disabled,
.fbt__arrow:disabled:hover {
    opacity: var(--fi-fbt-arrow-off);
    border-color: var(--line-strong);
    cursor: default;
}

/* La piste : une grille en colonnes, un tiers de la largeur par carte ; la
   marge négative laisse passer l'ombre et le halo de focus des cartes. */
.fbt__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--fi-fbt-cols) - 1) * var(--sp-16)) / var(--fi-fbt-cols));
    gap: var(--sp-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--fi-fbt-bleed);
    margin: calc(-1 * var(--fi-fbt-bleed));
}

.fbt__track::-webkit-scrollbar {
    display: none;
}

/* Chaque carte (template-parts/product-card.php, composants.css section 5a)
   est un point d'arrêt de la piste. */
.fbt__track .product-card {
    scroll-snap-align: start;
}

/* --- 7. Avis : le balisage natif de WooCommerce, habillé avec les jetons.
   Les étoiles sont dessinées en texte : la police d'icônes de WooCommerce
   part avec sa feuille de style. */
.product-reviews {
    padding-top: 0;
}

.product-reviews .woocommerce-Reviews-title {
    font-size: var(--fs-24);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-h2);
    margin-bottom: var(--sp-24);
}

.product-reviews .commentlist {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    margin: 0 0 var(--sp-32);
    padding: 0;
    list-style: none;
}

.product-reviews .comment_container {
    display: flex;
    gap: var(--sp-14);
    align-items: flex-start;
}

.product-reviews .avatar {
    width: var(--fi-avatar);
    height: var(--fi-avatar);
    border-radius: var(--pill);
    flex: none;
}

.product-reviews .comment-text {
    flex: 1;
    min-width: 0;
    padding: var(--sp-16);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    font-size: var(--fs-14);
    line-height: var(--lh-lede);
}

.product-reviews .comment-text .meta {
    margin: var(--sp-4) 0 var(--sp-8);
    font-size: var(--fs-12);
    color: var(--grey);
}

.product-reviews .comment-text .description p + p {
    margin-top: var(--sp-8);
}

.star-rating {
    position: relative;
    display: inline-block;
    width: var(--fi-stars-w);
    height: 1em;
    line-height: 1;
    font-size: var(--fs-13);
    overflow: hidden;
}

.star-rating::before {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--line-strong);
}

.star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 1.5em;
}

.star-rating span::before {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--accent);
}

/* Formulaire d'avis : mêmes champs que le design des formulaires. */
.product-reviews .comment-reply-title {
    display: block;
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-12);
}

.product-reviews .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-14);
    max-width: var(--fi-title-max-w);
}

.product-reviews .comment-form p {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.product-reviews .comment-form label {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
}

.product-reviews .comment-form input[type="text"],
.product-reviews .comment-form input[type="email"],
.product-reviews .comment-form textarea,
.product-reviews .comment-form select {
    width: 100%;
    padding: var(--sp-12) var(--sp-14);
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: var(--paper);
    font-size: var(--fs-15);
    color: var(--ink);
    outline: none;
}

.product-reviews .comment-form input:focus,
.product-reviews .comment-form textarea:focus {
    border-color: var(--action);
    box-shadow: 0 0 0 3px var(--focus-halo);
}

.product-reviews .comment-form .comment-form-cookies-consent {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);
    font-size: var(--fs-13);
}

.product-reviews .comment-form .submit,
.product-reviews .comment-form .submit:hover,
.product-reviews .comment-form .submit:focus {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: var(--touch);
    padding: 0 var(--sp-20);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--action);
    color: var(--paper);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.product-reviews .comment-form .submit:hover {
    background: var(--action-lift);
}

/* Étoiles cliquables du formulaire (wc-single-product.js) : cinq liens. */
.product-reviews p.stars {
    display: block;
    line-height: 1;
}

.product-reviews p.stars a {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--fs-20);
    line-height: 1;
    text-indent: -9999px;
    position: relative;
    color: var(--line-strong);
    text-decoration: none;
}

.product-reviews p.stars a::before {
    content: "\2605";
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 0;
    color: inherit;
}

.product-reviews p.stars:hover a,
.product-reviews p.stars.selected a:not(.active),
.product-reviews p.stars.selected a.active {
    color: var(--accent);
}

.product-reviews p.stars a:hover ~ a,
.product-reviews p.stars.selected a.active ~ a {
    color: var(--line-strong);
}

/* --------------------------------------------------------------------------
   8. POINTS DE RUPTURE (design 21.6)
   -------------------------------------------------------------------------- */

/* Fiche produit sous 1024 px : une colonne, galerie en 4:3 (design 21.6). */
@media (max-width: 1024px) {

    .product-page {
        grid-template-columns: 1fr;
        gap: var(--sp-28);
        padding-top: var(--sp-16);
    }

    .gallery {
        position: static;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "thumbs"
            "note";
    }

    .gallery__thumbs {
        flex-direction: row;
    }

    .gallery__main {
        aspect-ratio: 4 / 3;
        padding: var(--fi-gallery-pad-sm);
    }

    .specs {
        margin-top: var(--sp-40);
        padding: var(--sp-40) 0 var(--sp-48);
    }

    .specs__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-40);
    }

    /* Un filet sous la description quand la colonne de droite la suit. */
    .specs__grid:not(.specs__grid--seul) > .specs__text {
        padding-bottom: var(--sp-40);
        border-bottom: var(--cp-line) solid var(--line);
    }
}

/* Sous 640 px : titre plus petit, bloc d'achat resserré, tableau plus large. */
@media (max-width: 640px) {

    .summary .product_title {
        font-size: var(--fi-h1-fiche-sm);
    }

    .buybox {
        padding: var(--sp-20);
    }

    .buybox__perks {
        grid-template-columns: 1fr;
    }

    .spec-table th {
        width: var(--fi-spec-th-w-sm);
    }

    .fbt__track {
        --fi-fbt-cols: var(--fi-fbt-cols-sm);
    }
}

/* Sous 420 px : une carte et l'amorce de la suivante. */
@media (max-width: 420px) {

    .fbt__track {
        grid-auto-columns: var(--fi-fbt-card-xs);
    }
}

/* Sous 520 px : la liste de spécifications en une colonne, libellé au-dessus
   de sa valeur. */
@media (max-width: 520px) {

    .spec-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .spec-list dt {
        padding: var(--sp-6) 0 var(--cp-line);
        border-bottom: 0;
    }

    .spec-list dd {
        padding: 0 0 var(--sp-6);
    }
}