/*
Theme Name: TramaLuz
Theme URI: https://tramaluz.shop
Author: TramaLuz
Author URI: https://tramaluz.shop
Description: Thème WooCommerce premium pour boutique française de patrons de crochet en PDF (téléchargement instantané à 1,99 €). Page d'accueil landing haute conversion, design chaleureux et artisanal, entièrement responsive et personnalisable via l'outil de personnalisation et Gutenberg.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tramaluz
Tags: e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
WC requires at least: 6.0
WC tested up to: 9.5
*/

/* =====================================================================
   TramaLuz — Design tokens
   ===================================================================== */
:root{
  --cream:#FBF6EE;
  --cream-2:#F5EADB;
  --card:#FFFFFF;
  --card-soft:#FFFDF9;
  --ink:#3A302A;
  --muted:#7A6E64;
  --terra:#C56A4E;
  --terra-d:#A9553C;
  --sage:#8B9C79;
  --sage-d:#6E7E5B;
  --mustard:#D6A34A;
  --border:#ECE0CF;
  --border-2:#E2D3BF;
  --star:#E0A32E;
  --shadow-sm:0 2px 8px rgba(80,55,35,.06);
  --shadow-md:0 12px 34px rgba(90,60,35,.10);
  --shadow-lg:0 24px 60px rgba(90,60,35,.14);
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:26px;
  --maxw:1180px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* =====================================================================
   Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra-d);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--terra)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.18;font-weight:600;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:76px 0}
.section--tight{padding:52px 0}
.text-center{text-align:center}
.eyebrow{
  display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.74rem;color:var(--terra-d);
  background:#F7E7DE;border-radius:999px;padding:6px 14px;margin-bottom:16px;
}
.section-lead{max-width:620px;margin:0 auto 8px;color:var(--muted);font-size:1.05rem}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:16px;top:12px;background:#fff;padding:8px 14px;border-radius:8px;z-index:9999}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1;
  padding:16px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 10px 24px rgba(197,106,78,.32)}
.btn-primary:hover{background:var(--terra-d);color:#fff;box-shadow:0 14px 30px rgba(169,85,60,.38)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--terra);background:#fff}
.btn-sage{background:var(--sage-d);color:#fff}
.btn-sage:hover{background:#5f6e4e;color:#fff}
.btn-lg{padding:18px 38px;font-size:1.08rem}
.btn-block{display:flex;width:100%}

/* =====================================================================
   Announcement bar + header
   ===================================================================== */
.topbar{background:var(--ink);color:#F6ECE0;text-align:center;font-size:.86rem;padding:9px 16px;letter-spacing:.02em}
.topbar strong{color:var(--mustard)}
/* NB: no backdrop-filter/transform here — those would make the mobile
   off-canvas nav (position:fixed) resolve against the header instead of the viewport. */
.site-header{position:sticky;top:0;z-index:200;background:rgba(251,246,238,.97);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand img,.brand svg{height:44px;width:auto}
.brand .brand-text{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
.brand .brand-text b{color:var(--terra)}
.main-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.main-nav a{color:var(--ink);font-weight:600;font-size:.98rem;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--terra);transition:width .2s ease}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{width:100%}
.header-actions{display:flex;align-items:center;gap:14px}
.icon-btn{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;font-size:.95rem}
.cart-link .count{background:var(--terra);color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(120% 90% at 85% 0%, #FCEFE0 0%, rgba(252,239,224,0) 55%),
   linear-gradient(180deg,#FBF6EE 0%, #F6EADB 100%)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:70px 0 84px}
.hero-copy .eyebrow{margin-bottom:20px}
.hero h1{margin-bottom:.35em}
.hero h1 .hl{color:var(--terra);position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;background:rgba(214,163,74,.34);z-index:-1;border-radius:4px}
.hero-sub{font-size:1.16rem;color:#5f544b;max-width:520px;margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-price{display:flex;align-items:baseline;gap:10px;margin:26px 0 6px}
.hero-price .amount{font-family:var(--serif);font-size:2.6rem;color:var(--ink);font-weight:600}
.hero-price .per{color:var(--muted);font-size:1rem}
.hero-points{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;padding:0;list-style:none}
.hero-points li{display:flex;align-items:center;gap:8px;color:#5f544b;font-weight:600;font-size:.95rem}
.hero-points svg{color:var(--sage-d);flex:none}
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 26px 46px rgba(120,80,45,.18))}
.hero-float{position:absolute;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);padding:12px 16px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem}
.hero-float .dot{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.hero-float--tl{top:24px;left:-14px}
.hero-float--br{bottom:30px;right:-10px}
.hero-float small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}

/* =====================================================================
   Trust / logos strip
   ===================================================================== */
.trustbar{background:var(--ink);color:#EADFD2}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;align-items:center;padding:20px 24px;text-align:center}
.trustbar .ti{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600}
.trustbar .ti svg{color:var(--mustard);flex:none}

/* =====================================================================
   Product grid / best sellers
   ===================================================================== */
.section-head{text-align:center;max-width:680px;margin:0 auto 44px}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.product-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;position:relative;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.product-card .thumb{position:relative;display:block;aspect-ratio:1/1;background:var(--cream-2)}
.product-card .thumb img{width:100%;height:100%;object-fit:cover}
.product-card .flag{position:absolute;top:12px;left:12px;background:var(--terra);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:6px 11px;border-radius:999px;text-transform:uppercase}
.product-card .flag--sage{background:var(--sage-d)}
.product-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card .level{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sage-d)}
.product-card h3{font-size:1.16rem;margin:0}
.product-card h3 a{color:var(--ink)}
.product-card h3 a:hover{color:var(--terra-d)}
.stars{color:var(--star);letter-spacing:2px;font-size:.95rem}
.stars .count{color:var(--muted);font-size:.82rem;margin-left:6px;letter-spacing:normal}
.product-card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px}
.price{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink)}
.price .old{color:var(--muted);text-decoration:line-through;font-size:.95rem;font-family:var(--sans);margin-right:8px;font-weight:500}
.card-cta{background:var(--terra);color:#fff;border-radius:999px;padding:11px 18px;font-weight:700;font-size:.9rem;border:0;cursor:pointer;white-space:nowrap}
.card-cta:hover{background:var(--terra-d);color:#fff}
.center-more{text-align:center;margin-top:44px}

/* =====================================================================
   Benefits
   ===================================================================== */
.benefits{background:var(--card-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.benefit{text-align:center;padding:8px}
.benefit .ic{width:66px;height:66px;border-radius:18px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:#F7E7DE;color:var(--terra-d)}
.benefit:nth-child(2) .ic{background:#EAF0E2;color:var(--sage-d)}
.benefit:nth-child(3) .ic{background:#FBEFD6;color:#B98626}
.benefit:nth-child(4) .ic{background:#F7E7DE;color:var(--terra-d)}
.benefit h3{font-size:1.12rem;margin-bottom:6px}
.benefit p{color:var(--muted);font-size:.96rem;margin:0}

/* =====================================================================
   How it works
   ===================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px 26px;position:relative;box-shadow:var(--shadow-sm)}
.step .num{counter-increment:step;font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#fff;background:var(--terra);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step .num::before{content:counter(step)}
.step h3{font-size:1.14rem}
.step p{color:var(--muted);margin:0;font-size:.97rem}

/* =====================================================================
   Reviews
   ===================================================================== */
.reviews{background:linear-gradient(180deg,#F6EADB 0%, #FBF6EE 100%)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.review-card .stars{font-size:1.05rem}
.review-card p{font-size:1.02rem;color:#4d443c;margin:0;flex:1}
.review-card .who{display:flex;align-items:center;gap:12px}
.review-card .who .av{width:42px;height:42px;border-radius:50%;background:var(--sage);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--serif)}
.review-card .who b{display:block;font-size:.96rem}
.review-card .who span{color:var(--muted);font-size:.84rem}
.stat-row{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:44px}
.stat{text-align:center}
.stat .n{font-family:var(--serif);font-size:2.2rem;color:var(--terra-d);font-weight:600;line-height:1}
.stat .l{color:var(--muted);font-size:.9rem;margin-top:4px}

/* =====================================================================
   Featured band / CTA
   ===================================================================== */
.cta-band{background:
  radial-gradient(120% 140% at 15% 20%, rgba(214,163,74,.22), transparent 55%),
  linear-gradient(120deg,#B85434 0%, #C56A4E 55%, #A9553C 100%);
  color:#fff;border-radius:var(--radius-lg);padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:#FBE7DC;max-width:560px;margin:0 auto 26px;font-size:1.1rem}
.cta-band .btn-primary{background:#fff;color:var(--terra-d)}
.cta-band .btn-primary:hover{background:#FBF3EA;color:var(--terra-d)}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pm{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--terra);color:var(--terra);display:flex;align-items:center;justify-content:center;font-weight:800;transition:.2s}
.faq-item[open] summary .pm{background:var(--terra);color:#fff;transform:rotate(45deg)}
.faq-item .ans{padding:0 24px 22px;color:var(--muted)}
.faq-item .ans p{margin:0}

/* =====================================================================
   Newsletter
   ===================================================================== */
.newsletter{background:var(--ink);color:#F4E9DC}
.newsletter .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:56px 24px}
.newsletter h2{color:#fff}
.newsletter p{color:#CDBFB0;margin:0}
.nl-form{display:flex;gap:12px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:220px;padding:16px 18px;border-radius:999px;border:1px solid #55483d;background:#2f2721;color:#fff;font-size:1rem}
.nl-form input::placeholder{color:#a89a8c}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{background:#2C241F;color:#CBBDAF;padding:60px 0 24px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{color:#CBBDAF}
.site-footer a:hover{color:var(--mustard)}
.footer-brand .brand-text{color:#fff;font-family:var(--serif);font-size:1.5rem}
.footer-brand p{color:#A89A8C;margin-top:12px;max-width:300px}
.pay-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pay-badges span{background:#3b322b;border:1px solid #4a4038;border-radius:6px;padding:6px 10px;font-size:.74rem;font-weight:700;color:#d9ccbe}
.footer-bottom{border-top:1px solid #43392f;margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#9c8e80;font-size:.86rem}

/* =====================================================================
   Generic page / posts
   ===================================================================== */
.page-hero{background:linear-gradient(180deg,#FBF6EE,#F6EADB);padding:56px 0;text-align:center;border-bottom:1px solid var(--border)}
.entry{max-width:820px;margin:0 auto;padding:56px 24px}
.entry img{border-radius:var(--radius);margin:1.5rem 0}
.entry h2,.entry h3{margin-top:1.6em}
.breadcrumbs{color:var(--muted);font-size:.86rem;padding:16px 0}
.breadcrumbs a{color:var(--muted)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:36px;padding:48px 0 60px}
  .hero-art{max-width:460px;margin:0 auto}
  .products-grid,.reviews-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .newsletter .wrap{grid-template-columns:1fr;gap:20px}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:54px 0}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:#FBF6EE;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .25s ease;padding:84px 28px 28px;z-index:1200;overflow-y:auto}
  .main-nav.open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;gap:18px;align-items:flex-start}
  .nav-toggle{display:block;z-index:1300;position:relative}
  body.nav-open{overflow:hidden}
  body.nav-open::before{content:"";position:fixed;inset:0;background:rgba(44,36,31,.45);z-index:1100}
  .products-grid,.reviews-grid,.steps{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr 1fr;gap:22px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .cta-band{padding:40px 24px}
  .hero-float{display:none}
  .hero-points{gap:12px}
}
@media (max-width:420px){
  .benefits-grid{grid-template-columns:1fr}
}

/* accessibility */
:focus-visible{outline:3px solid rgba(197,106,78,.5);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}