/**
 * alter-reassurance.css
 * ---------------------
 * Sidebar reassurance buttons on product pages — .rea-btn family.
 * Extracted from custom.css in Lot 5i (see docs/theme-dev/SESSION_STATE.md).
 *
 * Declared in theme.yml assets.css.all with priority 75 (between alter-account
 * at 70 and alter-carousel-css at 150).
 *
 * Used by: shop/themes/classic-child/templates/catalog/product.tpl (l.397-430).
 */

/* conteneur vertical ou horizontal selon besoin */
.more-rea-product {
    display: flex;
    flex-direction: column; /* passe en row;gap:12px pour horizontal */
    gap: 16px;

}

/* bouton générique */
.rea-btn {

    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--as-white);
    border: 1px solid var(--as-grey-200);
    border-radius: 8px;

    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
    cursor: pointer;

}

/* icône via masque SVG — 32×32 per Figma "Big Button" spec (audit §4.D) */
.rea-btn::before {
    content: "";
    flex: 0 0 32px;
    height: 32px;
    margin-right: 16px;
    background: var(--as-amaranth);
    -webkit-mask: var(--icon) center/contain no-repeat;
    mask: var(--icon) center/contain no-repeat;
    transition: background .25s;
}

.rea-btn-text {
    text-align: left
}

/* textes */
.rea-btn-title {
    display: block;
    font: 600 16px/1 "Brockmann", sans-serif;
    color: var(--as-amaranth);
    text-transform: uppercase;
}

.rea-btn-info {
    display: block;
    font: 500 14px/1.2 "Brockmann", sans-serif;
    color: var(--as-grey-900);
    margin-top: 3px
}

/* hover / focus */
.rea-btn:hover,
.rea-btn:focus {
    background: var(--as-amaranth);
    color: var(--as-white);
    border-color: var(--as-amaranth);
}

.rea-btn:focus-visible {
    outline: var(--as-focus-ring);
    outline-offset: 2px;
}

.rea-btn:hover::before,
.rea-btn:focus::before {
    background: var(--as-white);
}

.rea-btn:hover .rea-btn-title,
.rea-btn:focus .rea-btn-title,
.rea-btn:hover .rea-btn-info,
.rea-btn:focus .rea-btn-info {
    color: var(--as-white);
}

/* classes de variation d’icône (une ligne chacune) */
.ico-coq {
    --icon: url("../img/coq.svg");
}

.ico-recycle {
    --icon: url("../img/recycle-icon.svg");
}

.ico-heart {
    /* Lot G UGC — l'icône du bouton "Avis" de la rea-sidebar reprend celle de
       l'onglet "Avis clients" (avis-tab-icon.svg = "Love", copié depuis
       alterglobalreviews/views/img) pour cohérence rea-btn ↔ titre d'onglet. */
    --icon: url("../img/avis-tab-icon.svg");
}

.ico-megaphone {
    --icon: url("../img/megaphone-icon.svg");
}

/* Lot G PDP polish round 6 item (c) — bouton "Retrait gratuit / Vérifier en magasin"
   adopte la structure `.rea-btn` (cf altershops/views/templates/hook/button-stock.tpl).
   Force `width: 100%` car le bouton seul (`.rea-btn` natif inline-flex without width)
   shrinkait à son contenu (~221px) au lieu de remplir le wrapper `.asa-clickcollect`
   (422px sur viewport 1920). */
.ico-shop {
    --icon: url("../img/store-icon.svg");
}

.asa-clickcollect .rea-btn {
    width: 100%;
}

/* Lot G PDP polish round 7 — bouton "Réserver en boutique / Paiement sur place"
   altercheckout adopte la structure `.rea-btn` (cf altercheckout/views/templates/
   hook/reserve_pdp_button.tpl). Même pattern que `.ico-shop` round 6 BONUS (c) :
   icône calendrier amaranth via mask SVG + width 100 % du wrapper sidebar 250 px
   (sinon le `.rea-btn` inline-flex shrinkait à son contenu et tronquait le label
   « Réserver en boutique (paiement sur place) » comme un bouton cyan déborderait
   le container). */
.ico-calendar {
    --icon: url("../img/calendar-icon.svg");
}

.alterck-reserve-pdp .rea-btn {
    width: 100%;
}

/* Sidebar reassurance buttons — neutralize cyan inheritance on wrapper
   (moved from custom.css "Link color override" section — scope rea-btn only,
   AGR/ATQ overrides stay in custom.css pending cross-stream coord). */
.rea-btn,
.rea-btn:visited {
    color: var(--as-grey-900);
    text-decoration: none;
}

/* -----------------------------------------------------------
   Lot 7-1 — Règle a11y globale focus-visible (FRM-001)
   Outline amaranth aligné charte AlterSmoke. `:focus-visible`
   garantit visibilité keyboard nav uniquement (pas mouse click)
   pour ne pas polluer le rendu sur clic mais préserver l'a11y.

   `!important` requis : l'UA stylesheet du browser applique un
   focus ring natif (`-webkit-focus-ring-color`) sur input/button/
   select/textarea avec spécificité 0,0,1,1 qui bat notre 0,0,1,0
   sans !important. Pattern reset a11y reconnu (idiome Tailwind +
   frameworks modernes pour overrides globaux a11y).
   ----------------------------------------------------------- */
*:focus-visible {
    outline: var(--as-focus-ring) !important;
    outline-offset: var(--as-focus-offset) !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}