/* Mise en page « Élégance » (docs/PLAN_THEMES_BOUTIQUE.md § 2.5, maquette « Lumière »).
   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 rose poudré n'est qu'une proposition du thème (themes/elegance/theme.php), le marchand la change.
   Sélecteurs préfixés par .sf-layout-elegance (classe de <body>) pour passer devant les feuilles communes. */

.sf-layout-elegance{
    /* Teintes dérivées de la couleur principale et du fond (rose poudré avec la palette proposée). */
    --el-blush:color-mix(in srgb,var(--store-primary) 9%,var(--store-bg,#fff));
    --el-blush-strong:color-mix(in srgb,var(--store-primary) 16%,var(--store-bg,#fff));
    --el-line:color-mix(in srgb,var(--store-text) 11%,var(--store-bg,#fff));
    --el-muted:color-mix(in srgb,var(--store-text) 72%,var(--store-bg,#fff));
    background:var(--store-bg);
}

/* ---- Bandeau d'annonce ---- */
.sf-layout-elegance .sf-announcement{border-bottom:0;font-size:12.5px;font-weight:450;letter-spacing:.01em}

/* ---- En-tête : logo à gauche, menu centré, icônes à droite ---- */
.sf-layout-elegance .sf-header--elegance{border-bottom:1px solid var(--el-line);background:var(--store-bg)}
.sf-layout-elegance .sf-header--elegance .sf-header__inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:76px}
.sf-layout-elegance .sf-header--elegance .sf-brand{justify-self:start;gap:10px;font-family:var(--store-heading);font-size:26px;font-weight:var(--store-heading-weight,600);letter-spacing:var(--store-heading-spacing,-.02em);color:var(--store-text)}
.sf-layout-elegance .sf-header--elegance .sf-brand__logo{width:40px;height:40px;border-radius:0;object-fit:contain}
.sf-layout-elegance .sf-header__menu{display:flex;align-items:center;gap:clamp(20px,3vw,40px);font-size:14px;font-weight:500}
.sf-layout-elegance .sf-header__menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--store-text);text-decoration:none}
.sf-layout-elegance .sf-header__menu a::after{content:"";position:absolute;right:0;bottom:8px;left:0;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.sf-layout-elegance .sf-header__menu a:hover::after,.sf-layout-elegance .sf-header__menu a[aria-current="page"]::after{transform:scaleX(1)}
.sf-layout-elegance .sf-header__menu a:focus-visible{outline:2px solid var(--store-primary);outline-offset:2px;border-radius:4px}
.sf-layout-elegance .sf-header__actions{display:flex;justify-self:end;align-items:center;gap:6px}
.sf-layout-elegance .sf-header--elegance .sf-cart-link{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-elegance .sf-header--elegance .sf-cart-link:hover,.sf-layout-elegance .sf-header--elegance .sf-header-search>summary:hover{background:var(--el-blush)}
.sf-layout-elegance .sf-header--elegance .sf-cart-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sf-layout-elegance .sf-header--elegance .sf-cart-link strong{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding-inline:4px;border:2px solid var(--store-bg,#fff);font-size:9px}
.sf-layout-elegance .sf-header--elegance .sf-header-search svg{stroke-width:1.6}
@media(max-width:900px){
 .sf-layout-elegance .sf-header__menu{gap:18px;font-size:13px}
 .sf-layout-elegance .sf-header--elegance .sf-brand{font-size:21px}
}
/* Téléphone : menu | recherche | logo au centre | (vide) | panier ; le menu passe dans le tiroir. */
@media(max-width:560px){
 .sf-layout-elegance .sf-header--elegance .sf-header__inner{grid-template-columns:44px 44px minmax(0,1fr) 44px 44px;gap:4px;min-height:60px}
 .sf-layout-elegance .sf-header--elegance .sf-mobile-menu{grid-column:1;grid-row:1}
 .sf-layout-elegance .sf-header--elegance .sf-brand{grid-column:3;grid-row:1;justify-self:center;max-width:100%;font-size:20px;text-align:center}
 .sf-layout-elegance .sf-header--elegance .sf-brand__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sf-layout-elegance .sf-header--elegance .sf-brand--has-logo .sf-brand__name{display:none}
 .sf-layout-elegance .sf-header__menu{display:none}
 .sf-layout-elegance .sf-header__actions{display:contents}
 .sf-layout-elegance .sf-header--elegance .sf-header-search{grid-column:2;grid-row:1}
 .sf-layout-elegance .sf-header--elegance .sf-cart-link{grid-column:5;grid-row:1;justify-self:end}
 .sf-layout-elegance .sf-header--elegance .sf-header-search__form{left:0;width:auto}
}

/* ---- Titres des sections : serif de la boutique, sans graisse forcée ---- */
.sf-layout-elegance .sf-home-section h2,.sf-layout-elegance .sf-section-heading :is(h1,h2){font-family:var(--store-heading);font-weight:var(--store-heading-weight,600);letter-spacing:var(--store-heading-spacing,-.02em)}
.sf-layout-elegance .sf-home-section__link{color:var(--store-text);font-weight:500;text-decoration:none}
.sf-layout-elegance .sf-home-section__link::after{content:" \2192" / ""}
.sf-layout-elegance .sf-home-section__link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- Héros en carrousel : fond rosé, surtitre espacé, bouton plein arrondi ---- */
.sf-layout-elegance .sf-hero-slide{background:var(--el-blush)}
.sf-layout-elegance .sf-hero-slide__eyebrow{font-weight:500;letter-spacing:.22em}
.sf-layout-elegance .sf-hero-slide__copy .sf-button{min-height:50px;font-weight:500}
.sf-layout-elegance .sf-hero-carousel__dot::before{border-color:color-mix(in srgb,var(--store-text) 70%,transparent)}

/* ---- Catégories en ronds : disque rosé ---- */
.sf-layout-elegance .sf-collection-list--circles{padding-block:clamp(32px,4vw,52px)}
.sf-layout-elegance .sf-collection-circle__media{background:var(--el-blush-strong)}
.sf-layout-elegance .sf-collection-circle__name{font-weight:500}

/* ---- Fiches produit épurées : sans cadre ni ombre, photo nette, prix sobre ---- */
.sf-layout-elegance .sf-product-card{border-color:transparent;border-radius:0;background:transparent;box-shadow:none}
.sf-layout-elegance .sf-product-card--outlined{border-color:var(--el-line)}
.sf-layout-elegance .sf-product-card__media{border-radius:4px;background:var(--el-blush)}
.sf-layout-elegance .sf-product-card__body{padding:12px 2px 4px}
.sf-layout-elegance .sf-product-card h3{min-height:0;margin:0 0 4px;font-size:14.5px;font-weight:500;-webkit-line-clamp:2}
.sf-layout-elegance .sf-product-card__pricing{gap:4px 8px;margin-bottom:4px}
.sf-layout-elegance .sf-product-card__pricing strong{color:var(--store-primary-text);font-size:15.5px;font-weight:600}
.sf-layout-elegance .sf-product-card__badges{top:10px;left:10px;right:10px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px}
/* Remise : pastille à la couleur d'accent de la boutique (texte lisible calculé : --store-accent-contrast). */
.sf-layout-elegance .sf-product-card__discount{border-radius:999px;background:var(--store-accent);color:var(--store-accent-contrast,#fff);font-weight:600}
.sf-layout-elegance .sf-product-card__new{font-weight:600;letter-spacing:.02em}
.sf-layout-elegance .sf-product-card .sf-button--card{border-radius:999px}

/* ---- Bannière promo (Image avec texte, fond « Teinté ») : titre serif, bouton arrondi ---- */
.sf-layout-elegance .sf-image-text.sf-section-bg--tint{--section-bg:var(--el-blush-strong)}
.sf-layout-elegance .sf-image-text h2{font-size:clamp(28px,3.6vw,44px)}
.sf-layout-elegance .sf-image-text__media{border-radius:6px}
.sf-layout-elegance .sf-image-text__copy .sf-button{min-height:48px;padding-inline:26px;font-weight:500}
.sf-layout-elegance .sf-image-text__copy .sf-button::after{content:"\2192" / "";margin-left:10px}

/* ---- Bande de garanties : fine, séparateurs discrets ---- */
.sf-layout-elegance .sf-guarantees--band{border-top-color:var(--el-line)}
.sf-layout-elegance .sf-guarantee-band>li+li{border-left-color:var(--el-line)}

/* ---- Pied de page simple, clair, centré ---- */
.sf-layout-elegance .sf-footer--elegance{padding:48px 0 0;background:var(--el-blush);color:var(--store-text)}
.sf-footer-elegance{display:grid;justify-items:center;gap:18px;padding-bottom:32px;text-align:center}
.sf-footer-elegance a.sf-footer-elegance__brand{display:inline-flex;align-items:center;gap:10px;color:var(--store-text);font-family:var(--store-heading);font-size:24px;font-weight:var(--store-heading-weight,600);letter-spacing:var(--store-heading-spacing,-.02em);text-decoration:none}
.sf-footer-elegance__logo{width:40px;height:40px;object-fit:contain}
.sf-footer-elegance__intro{max-width:60ch;color:var(--el-muted);font-size:14px;line-height:1.6}
.sf-footer-elegance__intro p{margin:0;color:inherit}
.sf-footer-elegance__links,.sf-footer-elegance__social,.sf-footer-elegance__contact>div{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.sf-footer-elegance a{display:inline-flex;align-items:center;min-height:44px;color:var(--store-text);font-size:14px;text-decoration:none}
.sf-footer-elegance a:hover{text-decoration:underline;text-underline-offset:4px}
.sf-footer-elegance a:focus-visible,.sf-footer-elegance__bottom a:focus-visible{outline:2px solid var(--store-primary);outline-offset:2px;border-radius:4px}
.sf-footer-elegance__contact p{margin:0 0 2px;color:var(--el-muted);font-size:13.5px}
.sf-footer-elegance__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-block:14px;border-top:1px solid var(--el-line);color:var(--el-muted);font-size:12.5px}
.sf-footer-elegance__bottom a{display:inline-block;min-height:44px;line-height:44px;color:var(--el-muted);text-decoration:none}
.sf-footer-elegance__bottom a b{color:var(--store-text);font-weight:600}
@media(max-width:560px){
 .sf-layout-elegance .sf-footer--elegance{padding-top:36px}
 .sf-footer-elegance__links,.sf-footer-elegance__social,.sf-footer-elegance__contact>div{gap:0 18px}
 .sf-footer-elegance__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-elegance .sf-product-card__badges{top:8px;left:8px;right:8px;flex-wrap:nowrap;gap:4px}
 .sf-layout-elegance .sf-product-card__badges>span,.sf-layout-elegance .sf-product-card__badges>em{padding:3px 7px;font-size:10.5px;line-height:1.3}
}

/* 2026-11-12 : carte avec son propre fond (différent de la page) : le texte garde une marge intérieure,
   alignée sur la photo quand elle est en retrait (8 px), au lieu de coller au bord de la carte. */
.sf-layout-elegance:not(.sf-cards--blend) .sf-product-card__body{padding:12px 12px 12px}
.sf-layout-elegance.sf-cards--inset:not(.sf-cards--blend) .sf-product-card__body{padding:12px 8px 10px}
/* Coins des cartes : Élégance les voulait droits, mais une carte qui a son propre fond (ou un contour) suit le réglage
   « Coins des cartes » : arrondis par défaut, droits avec « Carrés » (.sf-cards--square). */
.sf-layout-elegance:not(.sf-cards--square):not(.sf-cards--blend) .sf-product-card,.sf-layout-elegance:not(.sf-cards--square) .sf-product-card--outlined{border-radius:10px}