/* SAGA Store — tokens de la charte (miroir du Kit global Elementor) + préchargeur + badge. */
:root {
    --saga-white: #FFFFFF;
    --saga-ink: #111111;
    --saga-terra: #B45A3C;
    --saga-olive: #596044;
    --saga-sand: #E4D6C2;
    --saga-stone: #77736D;
    --saga-font-display: "Gloock", Georgia, serif;
    --saga-font-script: "Mrs Saint Delafield", cursive;
    --saga-font-text: "Questrial", "Helvetica Neue", Arial, sans-serif;
}

body { background: var(--saga-white); color: var(--saga-ink); }

/* ---------- Préchargeur « From — To » ---------- */
#saga-preloader {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: var(--saga-white); color: var(--saga-ink);
    transition: transform .8s cubic-bezier(.77, 0, .175, 1);
}
html.saga-nopre #saga-preloader { display: none; }
#saga-preloader.is-done { transform: translateY(-100%); }
#saga-preloader .sp-row { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
#saga-preloader .sp-word { line-height: 1; opacity: 0; transform: translateY(14px); animation: saga-rise .6s cubic-bezier(.2, .7, .2, 1) forwards; }
#saga-preloader .sp-from { font-family: var(--saga-font-display); font-size: clamp(44px, 8vw, 96px); }
#saga-preloader .sp-to { font-family: var(--saga-font-script); font-size: clamp(58px, 10vw, 124px); color: var(--saga-terra); animation-delay: .75s; }
#saga-preloader .sp-thread { width: clamp(90px, 18vw, 220px); height: auto; overflow: visible; }
#saga-preloader .sp-thread path {
    fill: none; stroke: var(--saga-terra); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 320; stroke-dashoffset: 320; animation: saga-draw .7s .25s ease-in-out forwards;
}
#saga-preloader .sp-ar {
    margin: 0; font-family: "Noto Naskh Arabic", serif; font-size: clamp(18px, 2.2vw, 24px); color: var(--saga-olive);
    opacity: 0; animation: saga-fade .5s 1s forwards;
}
@keyframes saga-rise { to { opacity: 1; transform: none; } }
@keyframes saga-draw { to { stroke-dashoffset: 0; } }
@keyframes saga-fade { to { opacity: 1; } }

/* ---------- En-tête : logo texte en attendant le logo fourni ---------- */
.saga-logo .elementor-heading-title a { color: inherit; text-decoration: none; }
.saga-logo .saga-logo-s { font-family: var(--saga-font-script); color: var(--saga-terra); font-size: 1.25em; margin-left: .08em; }
.saga-header > .elementor-widget.saga-logo { flex: 0 0 auto; white-space: nowrap; }
.saga-header > .saga-header-actions { --width: auto; width: auto; flex: 0 0 auto; }
/* Tablette / mobile : logo | panier | menu (bouton ☰ tout à droite) */
@media (max-width: 1024px) {
    .saga-header > .saga-header-actions { margin-left: auto; }
    .saga-header > .elementor-widget.saga-nav { order: 3; flex: 0 0 auto; }
}

/* ---------- Héro : le script « by hand » chevauche la 2e ligne du titre ---------- */
.elementor-widget.saga-hero-script { margin: -.62em 0 0 44%; transform: rotate(-5deg); position: relative; z-index: 2; }
@media (max-width: 767px) { .elementor-widget.saga-hero-script { margin: -.45em 0 0 28%; } }

/* ---------- Mot manuscrit dans un titre ---------- */
.saga-script { font-family: var(--saga-font-script); color: var(--saga-terra); font-size: 1.15em; line-height: 0; letter-spacing: 0; }
.saga-panel-terra .saga-script { color: var(--saga-white); }

/* ---------- HOME-03 Bandeau matières ---------- */
.saga-marquee { display: flex; overflow: hidden; user-select: none; }
.saga-mq-track { display: flex; flex: 0 0 auto; align-items: center; gap: 0; animation: saga-mq 48s linear infinite; }
.saga-marquee:hover .saga-mq-track { animation-play-state: paused; }
a.saga-mq-item { text-decoration: none; }
.saga-mq-item { font-family: var(--saga-font-display); font-size: clamp(34px, 5vw, 72px); line-height: 1; color: var(--saga-ink); padding: 0 .35em; white-space: nowrap; }
.saga-mq-sep { color: var(--saga-terra); font-size: clamp(18px, 2vw, 28px); }
@keyframes saga-mq { to { transform: translateX(-100%); } }

/* ---------- HOME-05 Voyage : le fil court sous les 4 panneaux ---------- */
.saga-journey { position: relative; }
.saga-journey.wcf-horizontal-scroll::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 9vh; height: 0;
    border-top: 2px solid var(--saga-terra); opacity: .55; pointer-events: none;
}
.saga-panel-terra.saga-panel { --saga-line: var(--saga-white); }
.saga-panel-img img { width: 100%; height: auto; display: block; }
.saga-knot { max-width: 520px; }
.saga-knot svg { width: 100%; height: auto; }

/* ---------- HOME-08 Artisan·e·s ---------- */
a.saga-maker { color: inherit; text-decoration: none; transition: padding-left .4s ease, background-color .4s ease; }
a.saga-maker:hover, a.saga-maker:focus-visible { padding-left: 18px; background-color: rgba(228, 214, 194, .35); }
a.saga-maker:focus-visible { outline: 2px solid var(--saga-terra); outline-offset: 4px; }
.saga-maker-thumb img { width: 88px; height: 64px; object-fit: cover; border-radius: 4px; }
.saga-makers-note { max-width: 360px; }

/* ---------- Badge « Mockup » ---------- */
.saga-mockup {
    position: fixed; left: 12px; bottom: 12px; z-index: 9990;
    padding: 6px 10px; border-radius: 999px;
    background: var(--saga-ink); color: var(--saga-white);
    font: 12px/1 var(--saga-font-text); letter-spacing: .08em; text-transform: uppercase;
    pointer-events: none; opacity: .85;
}

/* ---------- Mouvement réduit : coupe les animations CSS ; saga.js neutralise GSAP ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Cartes produit (accueil, boutique, matières) ---------- */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; display: block; overflow: hidden; color: var(--saga-ink); text-decoration: none; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > img:first-of-type { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.woocommerce ul.products li.product .saga-alt-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; }
.woocommerce ul.products li.product:hover .saga-alt-img { opacity: 1; }
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link > img:first-of-type { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--saga-font-display); font-weight: 400; font-size: 22px; line-height: 1.15; margin: 14px 0 6px; }
.saga-price-tbc { font-family: var(--saga-font-text); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--saga-stone); }
.woocommerce ul.products li.product .button { border-radius: 999px; background: var(--saga-terra); color: var(--saga-white); font-family: var(--saga-font-text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 20px; }
.woocommerce ul.products li.product .button:hover { background: var(--saga-ink); color: var(--saga-white); }

/* Arolax (woo.css) teinte les images produit (hue-rotate 50°, gris au survol, largeur 107 %) : effets de démo, retirés. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product:hover a img { filter: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 4px; }
.woocommerce ul.products.columns-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 36px 28px; }
.woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; }
@media (max-width: 1024px) { .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px; } }

/* ---------- HOME-07 Accordéon des matières : dégradé + texte clair ---------- */
.saga-accordion .accordion-item { position: relative; }
.saga-accordion .accordion-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 35%, rgba(17, 17, 17, .78)); pointer-events: none; }
.saga-accordion .accordion-item .content { position: relative; z-index: 1; text-align: left; }
.saga-accordion .accordion-item .title { font-family: var(--saga-font-display) !important; font-weight: 400 !important; font-size: clamp(30px, 3.2vw, 48px) !important; line-height: 1 !important; color: var(--saga-white) !important; }
.saga-accordion .accordion-item .subtitle { font-family: var(--saga-font-text) !important; font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--saga-sand) !important; }
.saga-accordion .accordion-item .content a { color: var(--saga-white) !important; font-family: var(--saga-font-text); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid currentColor; }

/* ---------- Newsletter (Contact Form 7) ---------- */
.saga-newsletter .wpcf7-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.saga-newsletter .saga-nl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.saga-newsletter .wpcf7-form-control-wrap { flex: 1 1 260px; }
.saga-newsletter input[type="email"] { width: 100%; padding: 16px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: var(--saga-white); font: 16px var(--saga-font-text); }
.saga-newsletter input[type="email"]::placeholder { color: rgba(255, 255, 255, .7); }
.saga-newsletter input[type="submit"] { padding: 16px 28px; border-radius: 999px; border: 0; background: var(--saga-white); color: var(--saga-ink); font: 13px var(--saga-font-text); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.saga-newsletter .wpcf7-response-output { flex-basis: 100%; color: var(--saga-white); border-color: rgba(255, 255, 255, .5) !important; }

/* ---------- Pied de page ---------- */
.saga-footer a { color: inherit; text-decoration: none; }
.saga-footer a:hover, .saga-footer a:focus-visible { color: var(--saga-terra); }
.saga-footer-links ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.saga-footer-links li { margin: 0 !important; padding: 0 !important; }

/* Mouvement réduit : le voyage devient une pile verticale (comme sur mobile), sans épinglage. */
html.saga-rm .saga-journey { width: 100% !important; max-width: 100% !important; height: auto !important; flex-direction: column !important; }
html.saga-rm .saga-journey > .saga-panel { width: 100% !important; transform: none !important; height: auto !important; }
html.saga-rm .saga-journey::after { display: none; }

/* La piste du voyage (400 %) ne doit jamais créer de défilement horizontal ; clip ne casse pas l'épinglage. */
html, body { overflow-x: clip; }

/* ---------- Finitions lot 3 ---------- */
.saga-script { line-height: .9; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { text-transform: none !important; }
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a:focus-visible .woocommerce-loop-product__title { color: var(--saga-terra) !important; }
.saga-accordion .accordion-item::before { background: linear-gradient(180deg, rgba(17, 17, 17, .05) 15%, rgba(17, 17, 17, .85)); }
.elementor-widget.saga-footer-giant { padding-bottom: .22em; }
/* Mobile : pas de survol au doigt → noms des matières toujours visibles dans l'accordéon */
@media (max-width: 767px) {
    .saga-accordion .accordion-item .content, .saga-accordion .accordion-item .content * { opacity: 1 !important; visibility: visible !important; transform: none !important; }
    .saga-accordion .accordion-item .content { justify-content: flex-end; }
}

/* =====================================================================
   Lot 4 — boutique, pages matières, fiche produit (gabarits WooCommerce habillés, inc/shop.php)
   ===================================================================== */
.woocommerce .wcf-woo--wrapper.pt-150 { padding-top: 56px; padding-bottom: 120px; }
.saga-eyebrow { margin: 0 0 14px; font: 13px/1.4 var(--saga-font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--saga-olive); }
.saga-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.saga-eyebrow a:hover, .saga-eyebrow a:focus-visible { border-bottom-color: currentColor; }
.saga-link { display: inline-block; font: 13px var(--saga-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--saga-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.saga-link:hover, .saga-link:focus-visible { color: var(--saga-terra); }

/* En-tête boutique / matière */
.saga-archive-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: end; margin: 0 0 64px; }
.saga-archive-hero--shop { grid-template-columns: minmax(0, 1fr); }
.saga-ah-title { margin: 0; font-family: var(--saga-font-display); font-weight: 400; font-size: clamp(56px, 9vw, 140px); line-height: .92; letter-spacing: -.02em; color: var(--saga-ink); }
.saga-ah-tech { margin: 18px 0 0; font: 14px var(--saga-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--saga-terra); }
.saga-ah-desc { max-width: 620px; margin-top: 26px; font: 19px/1.6 var(--saga-font-text); color: var(--saga-ink); }
.saga-ah-desc p { margin: 0 0 1em; }
.saga-ah-media { margin: 0; overflow: hidden; border-radius: 4px; }
.saga-ah-media img { display: block; width: 100%; height: auto; animation: saga-unveil 1.2s cubic-bezier(.77, 0, .175, 1) both; }
.saga-ah-text > * { animation: saga-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.saga-ah-text > *:nth-child(2) { animation-delay: .08s; } .saga-ah-text > *:nth-child(3) { animation-delay: .16s; } .saga-ah-text > *:nth-child(4) { animation-delay: .24s; }
@keyframes saga-unveil { from { clip-path: inset(0 0 100% 0); transform: scale(1.08); } to { clip-path: inset(0 0 0 0); transform: none; } }
@media (max-width: 900px) { .saga-archive-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 40px; } }

/* Barre de filtres */
.saga-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; margin: 0 0 28px; border-top: 1px solid rgba(17, 17, 17, .12); border-bottom: 1px solid rgba(17, 17, 17, .12); }
.saga-filter-materials { display: flex; flex-wrap: wrap; gap: 8px; }
.saga-filter-materials a { padding: 10px 18px; border: 1px solid rgba(17, 17, 17, .25); border-radius: 999px; font: 13px var(--saga-font-text); letter-spacing: .06em; color: var(--saga-ink); text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.saga-filter-materials a:hover, .saga-filter-materials a:focus-visible { border-color: var(--saga-ink); }
.saga-filter-materials a[aria-current="page"] { background: var(--saga-ink); border-color: var(--saga-ink); color: var(--saga-white); }
.saga-filter-maker { display: flex; align-items: center; gap: 10px; font: 13px var(--saga-font-text); }
.saga-filter-maker label { letter-spacing: .14em; text-transform: uppercase; color: var(--saga-olive); }
.saga-filter-maker select { padding: 10px 36px 10px 16px; border: 1px solid rgba(17, 17, 17, .25); border-radius: 999px; background-color: var(--saga-white); font: 14px var(--saga-font-text); color: var(--saga-ink); }
.woocommerce .woocommerce-result-count { font: 13px var(--saga-font-text); color: var(--saga-stone); }
@media (max-width: 767px) {
    .saga-filter-materials { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
    .saga-filter-materials a { flex: 0 0 auto; }
}

/* Fiche produit */
.woocommerce div.product .product_title { font-family: var(--saga-font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; letter-spacing: -.01em; color: var(--saga-ink); text-transform: none; }
.woocommerce div.product .summary .price { margin: 14px 0 22px; }
.woocommerce div.product .woocommerce-product-details__short-description { font: 18px/1.6 var(--saga-font-text); color: var(--saga-ink); }
.woocommerce div.product form.cart .button { border-radius: 999px; background: var(--saga-terra); color: var(--saga-white); font: 13px var(--saga-font-text); letter-spacing: .12em; text-transform: uppercase; padding: 16px 30px; }
.woocommerce div.product form.cart .button:hover { background: var(--saga-ink); }
.woocommerce div.product div.images img { border-radius: 4px; filter: none !important; }
.saga-details { display: grid; gap: 0; margin: 28px 0 0; border-top: 1px solid rgba(17, 17, 17, .12); }
.saga-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(17, 17, 17, .12); }
.saga-details dt { font: 12px var(--saga-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--saga-olive); }
.saga-details dd { margin: 0; font: 15px var(--saga-font-text); color: var(--saga-ink); }
.saga-details dd a { color: inherit; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--saga-font-text); letter-spacing: .08em; }

/* Bloc « La matière » sous la fiche produit */
.saga-material-story { clear: both; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin: 80px calc(50% - 50vw) 0; padding: 90px max(40px, calc(50vw - 640px)); background: var(--saga-sand); }
.saga-ms-media { margin: 0; overflow: hidden; border-radius: 4px; }
.saga-ms-media img { display: block; width: 100%; height: auto; }
.saga-ms-title { margin: 0; font-family: var(--saga-font-display); font-weight: 400; font-size: clamp(44px, 5vw, 84px); line-height: 1; color: var(--saga-ink); }
.saga-ms-desc { margin: 22px 0 26px; font: 18px/1.6 var(--saga-font-text); color: var(--saga-ink); }
@media (max-width: 900px) { .saga-material-story { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 64px 18px; } }

@media (prefers-reduced-motion: reduce) { .saga-ah-media img, .saga-ah-text > * { animation: none !important; } }
/* Contraste : terracotta sur sable = 3,3:1 → texte courant en encre sur fond sable */
.saga-material-story .saga-ah-tech { color: var(--saga-ink); }

/* ---------- En-tête collant (saga.js ajoute .saga-header-wrap sur le conteneur du modèle d'en-tête) ---------- */
.saga-header-wrap { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 999; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.saga-header-wrap.is-hidden { transform: translateY(-100%); }
.saga-header-wrap.is-scrolled .saga-header { box-shadow: 0 1px 0 rgba(17, 17, 17, .06); }
/* Archives / fiches WooCommerce : textes en encre (Arolax les grise) et tri au style des filtres */
.saga-ah-desc, .saga-ah-desc p, .saga-ms-desc, .saga-ms-desc p { color: var(--saga-ink) !important; }
.woocommerce .woocommerce-ordering select { padding: 10px 36px 10px 16px; border: 1px solid rgba(17, 17, 17, .25); border-radius: 999px; font: 14px var(--saga-font-text); color: var(--saga-ink); background-color: var(--saga-white); }