/*
 * Rockwell-Bot V3 - styles de la refonte.
 *
 * Fichier SEPARE volontairement, et non ajoute a style.css : le cache de
 * l'hebergeur sert une copie perimee de style.css meme quand le ?ver= change.
 * Un nom de fichier neuf ne peut pas etre servi perime. Meme raison d'etre que
 * shop-fix-v2.css, qui existe deja pour ce motif.
 *
 * Charge par rockwellbot_assets() apres style.css, dont il depend pour les
 * variables --rb-*.
 */

/* ==========================================================================
   V3 — SECTIONS DE LA PAGE DE VENTE
   Ajoutees pour la refonte de l'accueil. Rien de ce qui precede n'a bouge :
   ces regles ne font qu'habiller les nouveaux blocs de front-page.php.
   ========================================================================== */

/* Ligne sous les CTA du hero : essai, offre unique, serveurs illimites */
.hero-note{
    font-size: 13px;
    color: var(--rb-text-dim);
    margin: -30px 0 34px;
}

/* --------------------------------------------------------------------------
   Bandeau de compatibilite
   -------------------------------------------------------------------------- */
.proof-band{
    padding: 26px 0;
    border-top: 1px solid var(--rb-border);
    border-bottom: 1px solid var(--rb-border);
    background: rgba(23,15,43,.4);
}
.proof-band .container{
    display:flex;
    align-items:center;
    gap: 14px 34px;
    flex-wrap:wrap;
}
.proof-label{
    margin:0;
    font-size: 11px;
    font-weight:700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--rb-text-dim);
    flex-shrink:0;
}
.proof-list{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap: 10px 26px;
    margin:0; padding:0;
}
.proof-list li{
    font-size: 13.5px;
    font-weight:500;
    color: var(--rb-text-muted);
}

/* --------------------------------------------------------------------------
   Parcours de demarrage — numerote parce qu'il s'agit d'un ordre reel :
   on ne peut pas activer avant d'avoir la cle, ni vendre avant d'avoir active.
   -------------------------------------------------------------------------- */
.steps{
    list-style:none;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin:0; padding:0;
    counter-reset: none;
}
.step{
    display:flex;
    gap: 16px;
    padding: 26px 22px;
    background: linear-gradient(180deg, rgba(58,28,102,.22), rgba(23,15,43,.45));
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
}
.step-n{
    flex-shrink:0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display:inline-flex;
    align-items:center; justify-content:center;
    font-size: 13px;
    font-weight:700;
    color: #fff;
    background: linear-gradient(135deg, var(--rb-purple-500), var(--rb-magenta));
}
.step h3{ font-size: 15.5px; margin: 2px 0 6px; }
.step p{ font-size: 13.5px; margin:0; }
.step code{
    background: var(--rb-purple-900);
    color: var(--rb-cyan);
    border: 1px solid var(--rb-border-light);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Tarifs — .pricing-card et .pricing-option existaient deja dans le theme
   sans etre utilises nulle part. On s'en sert enfin ; seuls les ajustements
   propres au fait que chaque option est desormais un LIEN sont ajoutes ici.
   -------------------------------------------------------------------------- */
a.pricing-option{
    color: var(--rb-text);
    text-decoration:none;
}
a.pricing-option:hover{ color: var(--rb-text); }
a.pricing-option:focus-visible{
    outline: 2px solid var(--rb-cyan);
    outline-offset: 2px;
}
.pricing-option .opt-price small{
    display:block;
    margin-top: 2px;
}
.pricing-option .opt-go{
    color: var(--rb-text-dim);
    font-size: 16px;
    transition: transform .15s ease, color .15s ease;
}
a.pricing-option:hover .opt-go{
    color: var(--rb-cyan);
    transform: translateX(3px);
}
/* wc_price() enveloppe le montant dans .woocommerce-Price-amount : on annule
   la couleur cyan imposee plus haut pour le contexte boutique, le prix doit
   rester lisible sur la carte. */
.pricing-option .woocommerce-Price-amount{
    color: inherit !important;
    font-weight: inherit;
}
.pricing-foot{
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--rb-text-dim);
    text-align:center;
}

/* --------------------------------------------------------------------------
   FAQ — <details>/<summary> natifs : ouverture sans JavaScript, accessible
   au clavier, et lisible meme si les scripts ne se chargent pas.
   -------------------------------------------------------------------------- */
.faq{
    max-width: 780px;
    margin: 0 auto;
    display:grid;
    gap: 10px;
}
.faq-item{
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    background: rgba(58,28,102,.14);
    overflow:hidden;
}
.faq-item summary{
    cursor:pointer;
    padding: 17px 20px;
    font-size: 14.5px;
    font-weight:600;
    color: var(--rb-text);
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"+";
    flex-shrink:0;
    font-size: 18px;
    font-weight:400;
    color: var(--rb-text-dim);
    transition: transform .15s ease, color .15s ease;
}
.faq-item[open] summary::after{
    content:"−";
    color: var(--rb-cyan);
}
.faq-item summary:hover{ color: var(--rb-cyan); }
.faq-item summary:focus-visible{
    outline: 2px solid var(--rb-cyan);
    outline-offset: -2px;
}
.faq-item p{
    margin: 0;
    padding: 0 20px 18px;
    font-size: 13.5px;
}
.faq-item code{
    background: var(--rb-purple-900);
    color: var(--rb-cyan);
    border: 1px solid var(--rb-border-light);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Dernier appel
   -------------------------------------------------------------------------- */
.closing{
    text-align:center;
    padding: 90px 0 100px;
}
.closing h2{ font-size: 30px; margin-bottom: 10px; }
.closing p{ font-size: 15px; margin-bottom: 30px; }
.closing-ctas{
    display:flex;
    gap: 14px;
    justify-content:center;
    flex-wrap:wrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px){
    .steps{ grid-template-columns: 1fr; }
    .hero-note{ margin-top: -18px; }
}
@media (max-width: 540px){
    .proof-band .container{ gap: 12px; }
    .closing h2{ font-size: 24px; }
}
@media (prefers-reduced-motion: reduce){
    .step, .faq-item summary::after, .pricing-option .opt-go{ transition: none !important; }
}

/* ==========================================================================
   V3 — FICHE PRODUIT
   Par defaut la colonne de droite etait trop etroite (texte casse sur ~25
   caracteres) et la page se terminait sur un grand vide. On rééquilibre les
   deux colonnes, on colle l'image au scroll, et on habille les blocs ajoutes
   par functions.php.
   ========================================================================== */
.woocommerce div.product{
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items:start;
}
.woocommerce div.product div.images{
    position: sticky;
    top: 96px;
}
.woocommerce div.product .product_title{
    font-size: 32px;
    margin-bottom: 14px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
    font-size: 30px;
    margin-bottom: 4px;
}
.woocommerce div.product .woocommerce-product-details__short-description{
    font-size: 15px;
    line-height: 1.65;
    max-width: 58ch;
    margin: 16px 0 26px;
}
.woocommerce div.product form.cart{
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rb-border);
}

/* Equivalent mensuel + economie, sous le prix */
.rb-price-detail{
    font-size: 13.5px;
    color: var(--rb-text-dim);
    margin: 0 0 18px;
}
.rb-price-detail .woocommerce-Price-amount{
    color: var(--rb-text-muted) !important;
    font-weight:600;
}
.rb-save{
    display:inline-block;
    margin-left: 6px;
    color: var(--rb-cyan);
    font-weight:600;
}

/* Ce qui est inclus */
.rb-included h3{
    font-size: 16px;
    margin: 0 0 6px;
}
.rb-included-note{
    font-size: 13px;
    color: var(--rb-text-dim);
    margin: 0 0 16px;
    max-width: 56ch;
}
.rb-included ul{
    list-style:none;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
    margin: 0 0 34px;
    padding:0;
}
.rb-included li{
    display:flex;
    align-items:flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--rb-text-muted);
    line-height: 1.5;
}
.rb-included li::before{
    content:"✓";
    flex-shrink:0;
    color: var(--rb-cyan);
    font-weight:700;
}

/* Comment la cle arrive */
.rb-delivery{
    background: linear-gradient(180deg, rgba(58,28,102,.26), rgba(23,15,43,.5));
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 24px 26px;
}
.rb-delivery h4{
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--rb-text-dim);
    margin: 0 0 14px;
}
.rb-delivery ol{
    margin: 0;
    padding-left: 20px;
    display:grid;
    gap: 9px;
}
.rb-delivery li{
    font-size: 13.5px;
    color: var(--rb-text-muted);
    line-height: 1.5;
    padding-left: 4px;
}
.rb-delivery li::marker{
    color: var(--rb-cyan);
    font-weight:700;
}
.rb-delivery code{
    background: var(--rb-purple-900);
    color: var(--rb-cyan);
    border: 1px solid var(--rb-border-light);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12.5px;
}
.rb-delivery-foot{
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--rb-border);
    font-size: 13px;
    color: var(--rb-text-dim);
}

/* Onglets et produits lies : respirer moins, le vide etait le principal
   defaut de cette page. */
.woocommerce div.product .woocommerce-tabs{
    grid-column: 1 / -1;
    margin-top: 10px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{ margin-top: 0; }
.related.products{ margin-top: 54px; }

@media (max-width: 860px){
    .woocommerce div.product{ gap: 32px; }
    .woocommerce div.product div.images{ position: static; }
    .rb-included ul{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   V3 — IMAGE DE LA FICHE PRODUIT
   Sans largeur imposee, l'image s'affichait a sa taille native de vignette
   (~230px) dans une colonne deux fois plus large.
   ========================================================================== */
.woocommerce div.product div.images{
    width: 100%;
}
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
    width: 100%;
    height: auto;
}

/* ==========================================================================
   V3 — PANIER ET CHECKOUT (BLOCS WOOCOMMERCE)

   Ce site utilise les blocs Cart & Checkout, pas les pages classiques a
   shortcode. Tout le CSS panier/checkout ecrit plus haut (table.shop_table,
   #order_review, .cart-collaterals) cible un balisage qui n'existe pas ici :
   il ne s'appliquait donc a rien, et ces deux pages restaient sans habillage.

   Ces regles couvrent le balisage reellement present. Ce sont les deux pages
   qui encaissent : a verifier apres chaque changement de theme.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
    color: var(--rb-text);
}

/* Titres de section */
.wc-block-components-title,
.wc-block-cart__empty-cart__title,
.wc-block-components-checkout-step__title{
    color: var(--rb-text) !important;
    font-family: var(--rb-font);
}
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content{
    color: var(--rb-text-dim) !important;
}

/* Lignes d'articles */
.wc-block-cart-items,
.wc-block-cart-items__header{
    color: var(--rb-text-muted);
}
.wc-block-cart-items__header{
    border-bottom: 1px solid var(--rb-border) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rb-text-dim) !important;
}
.wc-block-cart-items__row{
    border-bottom: 1px solid var(--rb-border) !important;
}
.wc-block-cart-item__image img{
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
}
.wc-block-components-product-name{
    color: var(--rb-text) !important;
    font-weight: 600;
    text-decoration: none;
}
.wc-block-components-product-name:hover{ color: var(--rb-cyan) !important; }
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description{
    color: var(--rb-text-dim) !important;
}

/* Prix */
.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount{
    color: var(--rb-cyan) !important;
    font-weight: 600;
}
.wc-block-components-product-price del{
    color: var(--rb-text-dim) !important;
    opacity: .7;
}

/* Selecteur de quantite */
.wc-block-components-quantity-selector{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border-light) !important;
    border-radius: 6px;
    overflow: hidden;
}
.wc-block-components-quantity-selector__input{
    background: transparent !important;
    color: var(--rb-text) !important;
}
.wc-block-components-quantity-selector__button{
    background: transparent !important;
    color: var(--rb-text-muted) !important;
}
.wc-block-components-quantity-selector__button:hover{ color: var(--rb-cyan) !important; }

/* Colonne de droite : totaux */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-components-sidebar{
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 24px;
}
.wc-block-components-totals-item__label{ color: var(--rb-text-muted) !important; }
.wc-block-components-totals-item__value{ color: var(--rb-text) !important; }
.wc-block-components-totals-item__description{ color: var(--rb-text-dim) !important; }
.wc-block-components-totals-wrapper{
    border-top: 1px solid var(--rb-border) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    color: var(--rb-text) !important;
    font-size: 18px;
    font-weight: 700;
}
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount{
    color: var(--rb-cyan) !important;
}

/* Panneaux repliables (code promo, details) */
.wc-block-components-panel__button{
    color: var(--rb-text-muted) !important;
}
.wc-block-components-panel__button:hover{ color: var(--rb-cyan) !important; }

/* Boutons */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
    background: linear-gradient(90deg, var(--rb-purple-500), var(--rb-magenta)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
    background: linear-gradient(90deg, var(--rb-magenta), var(--rb-cyan)) !important;
}
.wc-block-components-button.is-link{
    color: var(--rb-cyan) !important;
}

/* Champs de formulaire — le theme est sombre, les champs le sont aussi.
   Remplace l'ancien correctif qui forcait un texte gris fonce (#1a1a1a),
   lisible seulement sur un fond blanc que ce theme n'a jamais eu. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-components-combobox-control input,
.wc-block-components-select__container select{
    background: var(--rb-bg-alt) !important;
    border: 1px solid var(--rb-border-light) !important;
    color: var(--rb-text) !important;
    border-radius: 6px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-checkout input:focus{
    border-color: var(--rb-cyan) !important;
    outline: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step label,
.wc-block-components-select__label{
    color: var(--rb-text-dim) !important;
}
.wc-block-components-text-input.is-active label{
    color: var(--rb-text-muted) !important;
}
.wc-block-components-validation-error{
    color: #ff8080 !important;
}

/* Cases a cocher et boutons radio (consentement, mode de paiement) */
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label{
    color: var(--rb-text-muted) !important;
}
.wc-block-components-checkbox__input{
    accent-color: var(--rb-magenta);
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option{
    border-color: var(--rb-border) !important;
}
.wc-block-components-radio-control-accordion-content{
    color: var(--rb-text-muted) !important;
}

/* Recapitulatif de commande */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-price{
    color: var(--rb-text-dim) !important;
}
.wc-block-components-order-summary__button-text{
    color: var(--rb-text) !important;
}

/* Bandeaux d'information et d'erreur */
.wc-block-components-notice-banner{
    background: var(--rb-surface) !important;
    color: var(--rb-text) !important;
    border-radius: var(--rb-radius);
}
.wc-block-components-notice-banner.is-error{ border-color: #ff8080 !important; }
.wc-block-components-notice-banner.is-success{ border-color: var(--rb-cyan) !important; }
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content{
    color: var(--rb-text) !important;
}

/* Panier vide : la grille "New in store" */
.wc-block-grid__product{
    background: linear-gradient(180deg, rgba(58,28,102,.30), rgba(23,15,43,.55));
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-lg);
    padding: 18px !important;
    transition: border-color .2s ease, transform .2s ease;
}
.wc-block-grid__product:hover{
    border-color: var(--rb-cyan);
    transform: translateY(-4px);
}
.wc-block-grid__product-image img{
    border-radius: var(--rb-radius);
    border: 1px solid var(--rb-border);
}
.wc-block-grid__product-title{
    color: var(--rb-text) !important;
    font-size: 16px;
    font-weight: 600;
}
.wc-block-grid__product-price{ color: var(--rb-cyan) !important; }
.wc-block-cart__empty-cart__title{ margin-bottom: 10px; }

/* Separateurs generiques des blocs */
.wc-block-components-checkout-step{
    border-color: var(--rb-border) !important;
}
.wc-block-components-order-summary{
    border-color: var(--rb-border) !important;
}

@media (max-width: 860px){
    .wc-block-components-sidebar{ padding: 18px; }
}

/* ==========================================================================
   V3 — CORRECTIFS DE MISE EN PAGE

   Trois defauts constates en ligne :
   1. l'encadre des totaux passait SOUS les articles au lieu de rester a
      droite — cause : un width:100% force sur .wc-block-cart__main depuis le
      CSS inline de functions.php, retire le 16/09/2026 ;
   2. la fiche produit laissait de larges vides lateraux ;
   3. "Related products" s'alignait a gauche sous un titre centre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panier et checkout : deux colonnes, totaux a droite et colles au scroll.
   Les blocs WooCommerce gerent normalement cette grille seuls ; on la
   reaffirme ici parce que le correctif inline l'avait cassee et que d'autres
   regles !important trainent dans le theme.
   -------------------------------------------------------------------------- */
.wc-block-cart,
.wc-block-checkout{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}
.wc-block-cart__main,
.wc-block-checkout__main{
    flex: 1 1 520px;
    min-width: 0;
    max-width: none;
    padding: 0;
}
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar{
    flex: 0 1 360px;
    min-width: 300px;
    position: sticky;
    top: 96px;
}
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar{
    margin: 0;
}

/* Le titre "Cart" est genere par le bloc : on lui donne l'air d'un en-tete
   de page plutot que d'un titre flottant au-dessus du tableau. */
.wp-block-woocommerce-cart .wc-block-cart__main > .wc-block-components-title:first-child{
    margin-top: 0;
}

/* Ligne d'article : l'image etait minuscule a cote du texte. */
.wc-block-cart-item__image img{
    width: 72px;
    height: auto;
}
.wc-block-cart-items__row .wc-block-cart-item__wrap{
    padding-left: 4px;
}

@media (max-width: 900px){
    .wc-block-cart,
    .wc-block-checkout{
        display: block;
    }
    .wc-block-cart__sidebar,
    .wc-block-checkout__sidebar{
        position: static;
        margin-top: 28px;
    }
}

/* --------------------------------------------------------------------------
   Fiche produit : occuper la largeur disponible.
   L'enveloppe .woocommerce passe a 1320px (CSS inline de functions.php), on
   repartit cette largeur entre l'image et la colonne d'achat.
   -------------------------------------------------------------------------- */
.woocommerce div.product{
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: 64px;
}
.woocommerce div.product .summary{
    max-width: none;
}
.woocommerce div.product .woocommerce-product-details__short-description{
    max-width: 66ch;
}
.rb-included-note{ max-width: 66ch; }

/* Onglets Description / Reviews sur toute la largeur, sous les deux colonnes */
.woocommerce div.product .woocommerce-tabs .panel{
    max-width: 78ch;
}

/* Produits lies : centres, comme leur titre */
.related.products ul.products,
.up-sells ul.products{
    justify-content: center;
}

@media (max-width: 1100px){
    .woocommerce div.product{
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 44px;
    }
}

/* ==========================================================================
   V3 — FICHE PRODUIT, SUITE

   .woocommerce div.product est une grille a deux colonnes, et WooCommerce y
   place AUSSI les onglets et les produits lies via le hook
   woocommerce_after_single_product_summary. Sans consigne, ils deviennent des
   elements de grille et se tassent dans la colonne de gauche : d'ou deux
   cartes "Related products" sur un tiers de largeur, malgre un
   justify-content:center qui s'appliquait bien mais dans une boite etroite.

   Tout ce qui suit les deux colonnes doit occuper la ligne entiere.
   ========================================================================== */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.products{
    grid-column: 1 / -1;
    width: 100%;
}

/* La colonne d'achat est celle qui travaille : prix, bouton, ce qui est
   inclus. On lui donne davantage de place qu'a la vignette. */
.woocommerce div.product{
    grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
    gap: 56px;
    row-gap: 40px;
}

/* La vignette n'a pas besoin de monter jusqu'a 800px de large sur grand
   ecran : au-dela elle ne montre rien de plus et creuse le vide en dessous. */
.woocommerce div.product div.images{
    max-width: 420px;
}

/* Description : une colonne de lecture confortable, alignee a gauche sous le
   reste plutot que centree au milieu du vide. */
.woocommerce div.product .woocommerce-tabs .panel{
    max-width: 72ch;
}

/* Produits lies : titre et cartes centres ensemble. */
.woocommerce div.product .related.products > h2,
.woocommerce div.product .up-sells.products > h2{
    text-align: center;
}
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .up-sells.products ul.products{
    justify-content: center;
}

@media (max-width: 1100px){
    .woocommerce div.product{
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 40px;
    }
    .woocommerce div.product div.images{ max-width: none; }
}
@media (max-width: 760px){
    .woocommerce div.product{
        grid-template-columns: 1fr;
    }
    .woocommerce div.product div.images{
        max-width: 360px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   V3 — CHIFFRES DU HERO

   Le symbole infini est desormais une image. Pour que sa ligne de base
   s'aligne avec "24/7", les deux <b> partagent la MEME hauteur de boite :
   le texte y est centre verticalement, l'image y est contrainte. Sans ca,
   les libelles en dessous se decaleraient l'un par rapport a l'autre.
   ========================================================================== */
.hero-stats .stat b{
    height: 46px;
    display: flex;
    align-items: center;
    line-height: 1;
}
.hero-stats .stat-img b img{
    height: 46px;
    width: auto;
    max-width: none;
    display: block;
    /* Meme halo que le logo de l'en-tete, pour que l'image appartienne a la
       page plutot que d'y etre posee. */
    filter: drop-shadow(0 0 14px rgba(192, 38, 211, .45));
}

@media (max-width: 540px){
    .hero-stats .stat b,
    .hero-stats .stat-img b img{ height: 38px; }
}