/* Mise en page « Tech » (docs/PLAN_THEMES_BOUTIQUE.md § 2.9, maquette « Voltix »).
   Chargée après storefront.css et storefront-editorial.css, seulement pour cette mise en page.
   Toutes les couleurs viennent des variables de la boutique (--store-…, réglées dans Apparence) : la palette noir
   bleuté, blanc et bleu électrique n'est qu'une proposition du thème (themes/tech/theme.php), le marchand la change.
   Les fonds sombres (héros, pied de page) sont un noir teinté de la couleur principale : toujours foncés, le texte blanc
   y reste lisible quelle que soit la couleur choisie (contraste ≥ 18:1 avec la palette proposée).
   Sélecteurs préfixés par .sf-layout-tech (classe de <body>) pour passer devant les feuilles communes. */

.sf-layout-tech{
    /* Noir bleuté du héros et des tuiles sombres ; pied de page un peu plus profond. */
    --tech-dark:color-mix(in srgb,var(--store-primary) 12%,#05080f);
    --tech-footer:color-mix(in srgb,var(--store-primary) 8%,#060a12);
    /* Gris très clair des tuiles, de la bande de garanties et de l'encart WhatsApp. */
    --tech-soft:color-mix(in srgb,var(--store-text) 5%,var(--store-bg,#fff));
    --tech-line:color-mix(in srgb,var(--store-text) 10%,var(--store-bg,#fff));
    --tech-muted:color-mix(in srgb,var(--store-text) 68%,var(--store-bg,#fff));
    background:var(--store-bg);
}

/* ---- Bandeau d'annonce (couleurs du bandeau réglées par le marchand ; sombre par défaut avec Tech) ---- */
.sf-layout-tech .sf-announcement{border-bottom:0;font-size:12.5px;font-weight:500}

/* ---- En-tête : logo, menu, grande recherche en pilule, panier ---- */
.sf-layout-tech .sf-header--tech{border-bottom:1px solid var(--tech-line);background:var(--store-bg)}
.sf-layout-tech .sf-header--tech .sf-header__inner{display:grid;grid-template-columns:auto auto minmax(220px,1fr) auto;align-items:center;gap:clamp(16px,2.6vw,36px);min-height:74px}
.sf-layout-tech .sf-header--tech .sf-brand{gap:10px;font-family:var(--store-heading);font-size:24px;font-weight:var(--store-heading-weight,700);letter-spacing:var(--store-heading-spacing,-.03em);color:var(--store-text)}
.sf-layout-tech .sf-header--tech .sf-brand__logo{width:40px;height:40px;border-radius:0;object-fit:contain}
.sf-layout-tech .sf-header__menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);font-size:14px;font-weight:500}
.sf-layout-tech .sf-header__menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--store-text);text-decoration:none;white-space:nowrap}
.sf-layout-tech .sf-header__menu a::after{content:"";position:absolute;right:0;bottom:8px;left:0;height:2px;border-radius:2px;background:var(--store-primary);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.sf-layout-tech .sf-header__menu a:hover::after,.sf-layout-tech .sf-header__menu a[aria-current="page"]::after{transform:scaleX(1)}
.sf-layout-tech .sf-header__menu a[aria-current="page"]{color:var(--store-primary-text)}
.sf-layout-tech .sf-header__menu a:focus-visible{outline:2px solid var(--store-primary);outline-offset:2px;border-radius:4px}
.sf-tech-search{position:relative;display:flex;align-items:center;justify-self:end;width:100%;max-width:440px;margin:0}
.sf-tech-search svg{position:absolute;left:16px;width:18px;height:18px;fill:none;stroke:var(--tech-muted);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.sf-tech-search input{width:100%;height:46px;padding:0 18px 0 44px;border:1px solid var(--tech-line);border-radius:999px;background:var(--tech-soft);color:var(--store-text);font:inherit;font-size:14.5px;outline:none;transition:border-color .16s ease,background-color .16s ease}
.sf-tech-search input::placeholder{color:var(--tech-muted)}
.sf-tech-search input:focus{border-color:var(--store-primary);background:var(--store-bg,#fff)}
.sf-tech-search input::-webkit-search-cancel-button{cursor:pointer}
.sf-layout-tech .sf-header--tech .sf-cart-link{position:relative;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;color:var(--store-text)}
.sf-layout-tech .sf-header--tech .sf-cart-link:hover{background:var(--tech-soft)}
.sf-layout-tech .sf-header--tech .sf-cart-link:focus-visible{outline:2px solid var(--store-primary);outline-offset:2px}
.sf-layout-tech .sf-header--tech .sf-cart-link svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sf-layout-tech .sf-header--tech .sf-cart-link>span{display:none}
.sf-layout-tech .sf-header--tech .sf-cart-link strong{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding-inline:4px;border:2px solid var(--store-bg,#fff);background:var(--store-primary);color:var(--store-primary-contrast);font-size:9px}
/* Tablette et téléphone : menu dans le tiroir ; ligne 1 = menu, logo, panier ; ligne 2 = recherche pleine largeur. */
@media(max-width:900px){
 .sf-layout-tech .sf-header--tech .sf-header__inner{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px 10px;min-height:0;padding-block:8px 12px}
 .sf-layout-tech .sf-header--tech .sf-mobile-menu{position:relative;display:block;grid-column:1;grid-row:1}
 .sf-layout-tech .sf-header--tech .sf-mobile-menu__toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--store-text);cursor:pointer;touch-action:manipulation}
 .sf-layout-tech .sf-header--tech .sf-mobile-menu__toggle:hover{background:var(--tech-soft)}
 .sf-layout-tech .sf-header--tech .sf-mobile-menu__toggle:focus-visible{outline:2px solid var(--store-primary);outline-offset:2px}
 .sf-layout-tech .sf-header--tech .sf-mobile-menu__toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
 .sf-layout-tech .sf-header--tech .sf-brand{grid-column:2;grid-row:1;justify-self:center;max-width:100%;font-size:20px;text-align:center}
 .sf-layout-tech .sf-header--tech .sf-brand__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sf-layout-tech .sf-header--tech .sf-brand--has-logo .sf-brand__name{display:none}
 .sf-layout-tech .sf-header__menu{display:none}
 .sf-layout-tech .sf-header--tech .sf-cart-link{grid-column:3;grid-row:1;justify-self:end}
 .sf-tech-search{grid-column:1/-1;grid-row:2;justify-self:stretch;max-width:none}
 .sf-tech-search input{height:44px;font-size:16px}
}

/* ---- Titres des sections : Manrope gras de la boutique ---- */
.sf-layout-tech .sf-home-section h2,.sf-layout-tech .sf-section-heading :is(h1,h2){font-family:var(--store-heading);font-weight:var(--store-heading-weight,800);letter-spacing:var(--store-heading-spacing,-.03em)}
.sf-layout-tech .sf-home-section__link{color:var(--store-primary-text);font-weight:600;text-decoration:none}
.sf-layout-tech .sf-home-section__link::after{content:" \2192" / ""}
.sf-layout-tech .sf-home-section__link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- Héros en carrousel sur fond sombre : titre blanc, bouton clair arrondi, garanties sous le bouton ---- */
.sf-layout-tech .sf-hero-carousel{--sf-hero-veil:var(--tech-dark);background:var(--tech-dark)}
.sf-layout-tech .sf-hero-slide{min-height:clamp(440px,38vw,520px);background:var(--tech-dark)}
.sf-layout-tech .sf-hero-slide__copy{width:min(100%,660px);color:#fff}
/* Surtitre : bleu de la boutique éclairci (7,9:1 sur le fond sombre avec la palette proposée). */
.sf-layout-tech .sf-hero-slide__eyebrow{color:color-mix(in srgb,var(--store-primary) 45%,#fff);font-weight:700;letter-spacing:.14em}
.sf-layout-tech .sf-hero-slide__title{color:#fff;font-weight:var(--store-heading-weight,800)}
.sf-layout-tech .sf-hero-slide__text{color:rgba(255,255,255,.8)}
.sf-layout-tech .sf-hero-slide__copy .sf-button{min-height:50px;border-color:#fff;background:#fff;color:#0b1220;font-weight:700}
.sf-layout-tech .sf-hero-slide__copy .sf-button:hover{filter:none;background:color-mix(in srgb,#fff 88%,var(--store-primary))}
.sf-layout-tech .sf-hero-slide__copy .sf-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sf-layout-tech .sf-hero-slide__perks li{color:rgba(255,255,255,.82)}
.sf-layout-tech .sf-hero-slide__perks svg{color:#fff}
.sf-layout-tech .sf-hero-carousel__arrow{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:blur(4px)}
.sf-layout-tech .sf-hero-carousel__arrow:hover{background:rgba(255,255,255,.26)}
.sf-layout-tech .sf-hero-carousel__arrow:focus-visible,.sf-layout-tech .sf-hero-carousel__dot:focus-visible{outline-color:#fff}
.sf-layout-tech .sf-hero-carousel__dot::before{border-color:rgba(255,255,255,.85)}
.sf-layout-tech .sf-hero-carousel__dot[aria-current="true"]::before{background:#fff}
@media(max-width:760px){
 .sf-layout-tech .sf-hero-slide{min-height:clamp(470px,128vw,580px)}
 .sf-layout-tech .sf-hero-slide__title{font-size:clamp(27px,7.6vw,34px)}
}

/* ---- Catégories en tuiles : gris très clair, nom et flèche ---- */
.sf-layout-tech .sf-collection-box{background:var(--tech-soft)}
.sf-layout-tech .sf-collection-box:hover{border-color:color-mix(in srgb,var(--store-primary) 40%,transparent)}
.sf-layout-tech .sf-collection-box__name{color:var(--store-text)}

/* ---- Tuiles promo : sombre = noir bleuté du héros, clair = gris très clair ---- */
.sf-layout-tech .sf-promo-tile--dark{--tile-bg:var(--tech-dark)}
.sf-layout-tech .sf-promo-tile--light{--tile-bg:var(--tech-soft)}
.sf-layout-tech .sf-promo-tile__title{font-weight:var(--store-heading-weight,800)}

/* ---- Fiches produit : photo entière sur fond clair, étoiles, prix, bouton plein « Ajouter au panier » ---- */
.sf-layout-tech .sf-product-card{border-radius:14px;box-shadow:none}
.sf-layout-tech .sf-product-card__media{border-radius:10px;background:var(--store-card-bg)}
.sf-layout-tech .sf-product-card h3{min-height:0;margin:0 0 6px;font-size:14.5px;font-weight:600;-webkit-line-clamp:2}
.sf-layout-tech .sf-product-card__category{display:none}
.sf-layout-tech .sf-product-card__pricing strong{color:var(--store-card-text);font-size:16px;font-weight:800}
/* Étoiles : ambre, décoratives (la note est lue en texte à côté). */
.sf-layout-tech .sf-product-card__stars{color:#f5a524}
.sf-layout-tech .sf-product-card__discount{border-radius:999px;background:var(--store-accent);color:var(--store-accent-contrast,#fff);font-weight:700}
.sf-layout-tech .sf-product-card__badges{top:10px;left:10px;right:10px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sf-layout-tech .sf-product-card__new{font-weight:700}
/* Bouton plein aux couleurs de la carte (texte de la carte en fond : toujours contrasté), bleu de la boutique au survol. */
.sf-layout-tech .sf-product-card .sf-button--card{min-height:44px;border:1px solid var(--store-card-text);border-radius:10px;background:var(--store-card-text);color:var(--store-card-bg);font-weight:700}
.sf-layout-tech .sf-product-card .sf-button--card:hover{border-color:var(--store-primary);background:var(--store-primary);color:var(--store-primary-contrast);filter:none}
.sf-layout-tech .sf-product-card .sf-button--card:focus-visible{outline:2px solid var(--store-primary);outline-offset:2px}

/* ---- Bande de garanties : bande gris très clair, icônes bleues ---- */
.sf-layout-tech .sf-guarantees--band{border-top:0;background:var(--tech-soft)}
.sf-layout-tech .sf-guarantee-band>li+li{border-left-color:var(--tech-line)}
.sf-layout-tech .sf-guarantee-band__icon svg{stroke-width:1.6}

/* ---- « Rejoignez-nous sur WhatsApp » ---- */
.sf-layout-tech .sf-whatsapp-join__box{background:var(--tech-soft)}

/* ---- Pied de page foncé à colonnes ---- */
.sf-layout-tech .sf-footer--tech{padding:56px 0 0;background:var(--tech-footer);color:#fff}
.sf-footer-tech{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(auto-fit,minmax(150px,1fr));gap:32px clamp(24px,4vw,56px);padding-bottom:44px}
.sf-footer-tech__identity{max-width:340px;overflow-wrap:anywhere}
.sf-footer-tech a.sf-footer-tech__brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;font-family:var(--store-heading);font-size:24px;font-weight:var(--store-heading-weight,800);letter-spacing:var(--store-heading-spacing,-.03em);text-decoration:none}
.sf-footer-tech__logo{width:40px;height:40px;object-fit:contain}
.sf-footer-tech p{margin:10px 0 0;color:rgba(255,255,255,.7);font-size:14px;line-height:1.65}
.sf-footer-tech__social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sf-footer-tech .sf-footer-tech__social a{min-height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff}
.sf-footer-tech__column{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sf-footer-tech__column h2{margin:0 0 10px;color:#fff;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0}
.sf-footer-tech__column p{margin:0 0 6px}
.sf-footer-tech a{display:inline-flex;align-items:center;min-height:40px;color:rgba(255,255,255,.72);font-size:14px;text-decoration:none;overflow-wrap:anywhere}
.sf-footer-tech a:hover,.sf-footer-tech__bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.sf-footer-tech a:focus-visible,.sf-footer-tech__bottom a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.sf-footer-tech__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-block:14px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:12.5px}
.sf-footer-tech__bottom a{display:inline-block;min-height:44px;line-height:44px;color:rgba(255,255,255,.7);text-decoration:none}
.sf-footer-tech__bottom a b{color:#fff;font-weight:700}
@media(max-width:760px){
 .sf-layout-tech .sf-footer--tech{padding-top:40px}
 .sf-footer-tech{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-bottom:30px}
 .sf-footer-tech__identity{grid-column:1/-1;max-width:none}
 .sf-footer-tech a{min-height:40px;font-size:13.5px}
 .sf-footer-tech__bottom{justify-content:center;text-align:center}
}

/* 2026-11-10 : fiches étroites (mobile, 2 colonnes) : badges remise et « Nouveau » plus compacts et sur une
   seule ligne, pour qu'ils ne passent pas à la ligne et ne recouvrent pas la photo. */
@media(max-width:600px){
 .sf-layout-tech .sf-product-card__badges{top:8px;left:8px;right:8px;flex-wrap:nowrap;gap:4px}
 .sf-layout-tech .sf-product-card__badges>span,.sf-layout-tech .sf-product-card__badges>em{padding:3px 7px;font-size:10.5px;line-height:1.3}
}