﻿:root{--sylarea-bg:#eddce2;--sylarea-primary:#c7a39a;--sylarea-text:#5c4b44;--sylarea-light:#f8f5f3;--font-heading:"Playfair Display",serif;--font-body:"Instrument Sans","Inter",sans-serif}

body{font-family:var(--font-body)!important;background-color:var(--sylarea-bg)!important;color:var(--sylarea-text)!important;overflow-x:hidden}

h1,h2,h3{font-family:var(--font-heading)!important;color:var(--sylarea-text)!important;font-weight:400!important}

#app{width:100%;max-width:100%}

main#main{background-color:var(--sylarea-bg)!important;width:100%;max-width:100%}

input:focus,textarea:focus,select:focus{border-color:var(--sylarea-primary)!important;box-shadow:0 0 0 2px rgba(199,163,154,.2)!important;outline:none!important}

/* â”€â”€ CONTAINER GLOBAL 1300px (home + toutes pages Bagisto) â”€â”€ */
.sl-container{width:100%;max-width:1300px;margin:0 auto;padding:0 2rem}
.container{max-width:1300px!important;padding-left:2rem!important;padding-right:2rem!important;margin-left:auto!important;margin-right:auto!important}

/* â”€â”€ HEADER â”€â”€ */
#app > header{background-color:var(--sylarea-bg)!important;box-shadow:none!important;border:none!important;width:100%!important;max-width:100%!important}

.sylarea-header{width:100%;background:transparent}

.sylarea-header-inner{display:flex!important;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px}

.sylarea-logo{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--sylarea-text)}

.sylarea-logo img{height:80px;width:auto;display:block}

.sylarea-logo span{font-family:var(--font-heading)!important;font-size:14px;letter-spacing:4px;text-transform:uppercase;color:var(--sylarea-text)}

.sylarea-nav{display:flex;align-items:center}

.sylarea-nav a{margin-left:40px;font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.7;color:var(--sylarea-text)!important;text-decoration:none;transition:opacity .2s,color .2s}

.sylarea-nav a:hover{opacity:1;color:var(--sylarea-primary)!important}

.sylarea-actions{display:flex;align-items:center;gap:1rem;color:var(--sylarea-text)}

.sylarea-actions .icon-users,.sylarea-actions button,.sylarea-actions a{color:var(--sylarea-text)!important}

/* â”€â”€ FOOTER â”€â”€ */
.sylarea-footer {
    margin-top: 60px;
}

.sylarea-footer-main { padding: 60px 0; }

.sylarea-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    flex-wrap: wrap;
}

.sylarea-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 260px;
    text-align:center;
}

.sylarea-footer-brand .sylarea-logo img  { height: 60px; }
.sylarea-footer-brand .sylarea-logo span { font-size: 12px; letter-spacing: 3px; }
.sylarea-footer-brand p { font-size: 13px; line-height: 1.8; opacity: .6; }

.sylarea-footer-nav { display: flex; flex-direction: column; gap: 14px; }

.sylarea-footer-nav a {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .65;
    color: var(--sylarea-text);
    text-decoration: none;
    transition: opacity .2s;
}
.sylarea-footer-nav a:hover { opacity: 1; }

.sylarea-footer-links { display: flex; gap: 40px; }

.sylarea-footer-links ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}

.sylarea-footer-links a {
    font-size: 13px; opacity: .65;
    color: var(--sylarea-text); text-decoration: none; transition: opacity .2s;
}
.sylarea-footer-links a:hover { opacity: 1; }

.sylarea-footer-copy {
    border-top: 1px solid rgba(92, 75, 68, .08);
    padding: 18px 0;
    text-align: center;
}
.sylarea-footer-copy p { font-size: 12px; opacity: .45; color: var(--sylarea-text); }

@media (max-width: 768px) {
    .sylarea-footer-inner { flex-direction: column; gap: 40px; align-items: center; }
    .sylarea-footer-brand { max-width: 100%; align-items: center; text-align: center; }
}

/* â”€â”€ CMS PAGES â€” reset Tailwind sur les Ã©lÃ©ments de contenu â”€â”€ */
.sl-ps p, .sl-proc-intro p, .sl-gal-intro p, .sl-contact-wrap p{
  margin:0; padding:0; font-size:16px; line-height:1.8; color:var(--sylarea-text); opacity:.85;
}
.sl-ps h2, .sl-proc-intro h2, .sl-proc-closing h2, .sl-gal-intro h2, .sl-contact-wrap h2,
.sl-step h2{
  font-family:var(--font-heading)!important; font-weight:400!important; color:var(--sylarea-text)!important;
}
.sl-step h2{ color:var(--sylarea-primary)!important; font-size:1.4rem!important; }
.sl-card-box h2{ font-size:1.8rem!important; margin-bottom:20px; }
.sl-card-box p{ margin-top:16px; line-height:1.8; opacity:.85; }
img.sl-img-real{ width:100%; height:420px; object-fit:cover; border-radius:6px; filter:grayscale(10%) contrast(95%) brightness(98%); }


/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   PAGES CMS â€” styles communs
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.sl-page-section { padding: 72px 0 56px; }
.sl-page-intro   { max-width: 680px; margin-bottom: 48px; }
.sl-page-intro p { line-height: 1.8; opacity: .85; margin-top: 16px; }

/* Grille 2 colonnes */
.sl-g2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px;
  align-items: center;
}
@media (max-width: 768px) {
  .sl-g2 { grid-template-columns: 1fr !important; gap: 40px; }
}

/* Placeholder image */
.sl-img-ph {
  background: #eae3df;
  border-radius: 6px;
  height: 420px;
  width: 100%;
  display: block;
}

/* Carte blanche */
.sl-card {
  background: #fff !important;
  padding: 50px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.sl-card h2 { margin-bottom: 20px; }
.sl-card p  { margin-top: 14px; line-height: 1.8; opacity: .85; }

/* â”€â”€ PAGE PROCESSUS â”€â”€ */
.sl-steps-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px;
  padding-bottom: 60px;
}
@media (max-width: 768px) {
  .sl-steps-grid { grid-template-columns: 1fr !important; }
}
.sl-step {
  background: #fff !important;
  padding: 50px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.sl-step .sl-step-num {
  font-family: var(--font-heading) !important;
  font-size: 1.4rem !important;
  color: var(--sylarea-primary) !important;
  margin-bottom: 16px;
  display: block;
}
.sl-step p { line-height: 1.8; opacity: .85; margin-top: 10px; }
.sl-closing { padding: 48px 0 80px; text-align: center; }

/* â”€â”€ PAGE Ã€ PROPOS â”€â”€ */
.sl-about-section { padding: 72px 0 56px; }
.sl-about-section + .sl-about-section { padding-top: 0; }
.sl-about-section p { line-height: 1.8; opacity: .85; margin-top: 16px; }
.sl-about-section .sl-note { font-size: 14px; opacity: .6; margin-top: 20px; }

/* â”€â”€ PAGE GALERIE â”€â”€ */
.sl-gallery  { display: grid; gap: 48px; padding-bottom: 80px; }
.sl-ba-pair  {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px;
}
@media (max-width: 768px) {
  .sl-ba-pair { grid-template-columns: 1fr !important; }
}
.sl-ba-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .5; display: block; margin-bottom: 8px; }
.sl-ba-img   { height: 300px; background: #eae3df; border-radius: 6px; }

/* â”€â”€ PAGE CONTACT â”€â”€ */
.sl-contact-section { padding: 72px 0 100px; max-width: 540px; }
.sl-contact-section > p { opacity: .8; margin-bottom: 40px; line-height: 1.8; }
.sl-field {
  width: 100%; padding: 14px;
  border: 1px solid rgba(92,75,68,.18) !important;
  background: #fff !important;
  color: var(--sylarea-text) !important;
  font-family: var(--font-body) !important;
  font-size: 15px;
  border-radius: 2px;
  margin-bottom: 20px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s;
  display: block;
}
.sl-field:focus { border-color: var(--sylarea-primary) !important; box-shadow: 0 0 0 2px rgba(199,163,154,.2) !important; }
.sl-contact-btn {
  display: inline-block; padding: 14px 34px;
  border: 1px solid var(--sylarea-primary);
  color: var(--sylarea-primary); background: transparent;
  letter-spacing: 2px; font-size: 12px; text-transform: uppercase;
  cursor: pointer; transition: .3s; font-family: var(--font-body);
}
.sl-contact-btn:hover { background: var(--sylarea-primary); color: white; }
.sl-contact-msg { margin-top: 20px; font-size: 14px; display: none; }


/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   .sl-content â€” styles pages CMS (scopÃ©s)
   Reprend exactement le design original
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

.sl-content .section {
  padding: 80px 0 100px;
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box;
}

.sl-content .section h2 {
  font-family: var(--font-heading) !important;
  font-size: 2.2rem !important;
  font-weight: 400 !important;
  margin-bottom: 20px;
  color: var(--sylarea-text) !important;
  letter-spacing: .5px;
}

.sl-content .section p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sylarea-text);
  opacity: .85;
}

.sl-content .grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px;
}

.sl-content .card {
  background: #fff !important;
  padding: 50px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.03);
}

.sl-content .card h2 {
  font-size: 1.75rem !important;
  margin-bottom: 16px;
}

.sl-content .card p {
  margin-top: 12px;
}

.sl-content .img-ph {
  width: 100%;
  height: 420px;
  background: #eae3df;
  border-radius: 6px;
  display: block;
}

.sl-content .img-soft {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 6px;
  filter: grayscale(10%) contrast(95%) brightness(98%);
  display: block;
}

/* Galerie */
.sl-content .gallery { display: grid; gap: 60px; }
.sl-content .before-after {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px;
}
.sl-content .image {
  height: 300px;
  background: #eae3df;
  border-radius: 6px;
}

/* Contact */
.sl-content input,
.sl-content textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(92,75,68,.2) !important;
  background: #fff !important;
  color: var(--sylarea-text) !important;
  font-family: var(--font-body) !important;
  font-size: 15px;
  border-radius: 2px;
  margin-bottom: 20px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s;
  display: block;
}
.sl-content input:focus,
.sl-content textarea:focus {
  border-color: var(--sylarea-primary) !important;
  box-shadow: 0 0 0 2px rgba(199,163,154,.2) !important;
}

.sl-content .btn {
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid var(--sylarea-primary);
  color: var(--sylarea-primary);
  background: transparent;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
  font-family: var(--font-body);
}
.sl-content .btn:hover { background: var(--sylarea-primary); color: #fff; }

@media (max-width: 900px) {
  .sl-content .grid        { grid-template-columns: 1fr !important; gap: 40px; }
  .sl-content .before-after{ grid-template-columns: 1fr !important; }
  .sl-content .section     { padding: 48px 1.25rem 64px; }
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   PAGE LOGIN / INSCRIPTION
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.sl-auth-page {
    min-height: 100vh;
    background: var(--sylarea-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem 3rem;
}

/* Header */
.sl-auth-header {
    width: 100%;
    max-width: 900px;
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid rgba(92,75,68,.1);
    margin-bottom: 2rem;
}
.sl-auth-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* Bandeau contextuel */
.sl-auth-notice {
    width: 100%;
    max-width: 900px;
    background: rgba(199,163,154,.12);
    border: 1px solid rgba(199,163,154,.35);
    border-radius: 4px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2.5rem;
    color: var(--sylarea-text);
    font-size: 15px;
    line-height: 1.6;
}
.sl-auth-notice-icon { color: var(--sylarea-primary); font-size: 1rem; flex-shrink: 0; }

/* Conteneur deux colonnes */
.sl-auth-container {
    width: 100%;
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(92,75,68,.1);
    border-radius: 6px;
    overflow: hidden;
}

/* Panneaux */
.sl-auth-panel { padding: 48px 44px; }
.sl-auth-panel--new { background: rgba(248,245,243,.6); }

.sl-auth-title {
    font-family: var(--font-heading) !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    color: var(--sylarea-text) !important;
    margin-bottom: 6px !important;
}
.sl-auth-subtitle {
    font-size: 14px;
    color: var(--sylarea-text);
    opacity: .6;
    margin-bottom: 28px;
}

/* SÃ©parateur */
.sl-auth-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    position: relative;
}
.sl-auth-sep::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(92,75,68,.1);
}
.sl-auth-sep span {
    position: relative;
    background: #fff;
    padding: 8px 0;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sylarea-text);
    opacity: .4;
    z-index: 1;
}

/* Champs */
.sl-field-label {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--sylarea-text) !important;
    opacity: .65 !important;
    font-family: var(--font-body) !important;
}
.sl-field {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(92,75,68,.18) !important;
    background: #fff !important;
    color: var(--sylarea-text) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    border-radius: 2px !important;
    outline: none !important;
    transition: border-color .2s !important;
}
.sl-field:focus { border-color: var(--sylarea-primary) !important; box-shadow: 0 0 0 2px rgba(199,163,154,.2) !important; }

/* Ligne show-pwd / forgot */
.sl-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 24px;
}
.sl-auth-forgot {
    font-size: 13px;
    color: var(--sylarea-text);
    opacity: .55;
    text-decoration: none;
    transition: opacity .2s;
}
.sl-auth-forgot:hover { opacity: 1; }

/* Boutons */
.sl-auth-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: .25s;
    text-decoration: none;
    margin-top: 8px;
}
.sl-auth-btn--primary {
    background: var(--sylarea-primary);
    color: #fff;
    border: 1px solid var(--sylarea-primary);
}
.sl-auth-btn--primary:hover { background: #b8918a; border-color: #b8918a; }
.sl-auth-btn--outline {
    background: transparent;
    color: var(--sylarea-primary);
    border: 1px solid var(--sylarea-primary);
    margin-top: auto;
}
.sl-auth-btn--outline:hover { background: var(--sylarea-primary); color: #fff; }

/* Avantages */
.sl-auth-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sl-auth-perks li {
    font-size: 14px;
    color: var(--sylarea-text);
    opacity: .8;
    padding-left: 20px;
    position: relative;
}
.sl-auth-perks li::before {
    content: '\2014';
    position: absolute;
    left: 0;
    color: var(--sylarea-primary);
    font-size: 12px;
}

/* Footer */
.sl-auth-footer {
    margin-top: 2rem;
    font-size: 12px;
    color: var(--sylarea-text);
    opacity: .4;
    text-align: center;
}

/* Mobile */
@media (max-width: 700px) {
    .sl-auth-container {
        grid-template-columns: 1fr;
    }
    .sl-auth-sep {
        width: 100%;
        height: 48px;
        flex-direction: row;
    }
    .sl-auth-sep::before {
        top: 50%; bottom: auto;
        left: 0; right: 0;
        width: 100%; height: 1px;
    }
    .sl-auth-panel { padding: 32px 24px; }
}

/* â”€â”€ FICHE PRODUIT â€” Description rich content â”€â”€ */
.product-desc { color: var(--sylarea-text); line-height: 1.8; font-size: 1rem; }
.product-desc h1, .product-desc h2, .product-desc h3,
.product-desc h4, .product-desc h5, .product-desc h6 {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    color: var(--sylarea-text) !important;
    margin: 1.8em 0 0.6em !important;
    line-height: 1.35 !important;
}
.product-desc h2 { font-size: 1.6rem !important; }
.product-desc h3 { font-size: 1.25rem !important; }
.product-desc p  { margin: 0 0 1em !important; opacity: .85; }
.product-desc ul, .product-desc ol {
    padding-left: 1.5em !important;
    margin: 0.8em 0 1em !important;
}
.product-desc ul { list-style: disc !important; }
.product-desc ol { list-style: decimal !important; }
.product-desc li { margin-bottom: 0.4em !important; opacity: .85; }
.product-desc strong { font-weight: 600 !important; }
.product-desc em    { font-style: italic !important; }
.product-desc a     { color: var(--sylarea-primary); text-decoration: underline; }

/* â”€â”€ FICHE PRODUIT â€” Popover info attribut â”€â”€ */
.sl-attr-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 1;
    background: #54433a;
    color: #fff;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
    flex-shrink: 0;
    border-radius: 9px;
}
.sl-attr-info-trigger:hover { opacity: 1; }

.sl-attr-info-box {
    position: absolute;
    z-index: 50;
    background: white;
    border: 1px solid rgba(199,163,154,.35);
    border-radius: 4px;
    padding: 14px 16px 14px 14px;
    box-shadow: 0 8px 24px rgba(92,75,68,.12);
    max-width: 300px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--sylarea-text);
    margin-top: 4px;
}
.sl-attr-info-box p { margin: 0; }

.sl-attr-info-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: var(--sylarea-text);
    opacity: .4;
    cursor: pointer;
    padding: 0;
}
.sl-attr-info-close:hover { opacity: 1; }

.sl-fade-enter-active, .sl-fade-leave-active { transition: opacity .15s ease; }
.sl-fade-enter-from, .sl-fade-leave-to       { opacity: 0; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   CHECKOUT â€” Formulaires
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* Padding global sur les formulaires */
.sl-checkout form {
    padding: 30px !important;
}

/* Inputs, selects, textareas */
.sl-checkout input[type="text"],
.sl-checkout input[type="email"],
.sl-checkout input[type="password"],
.sl-checkout input[type="number"],
.sl-checkout input[type="tel"],
.sl-checkout select,
.sl-checkout textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(92,75,68,.18) !important;
    background: #fff !important;
    color: var(--sylarea-text) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}

.sl-checkout input:focus,
.sl-checkout select:focus,
.sl-checkout textarea:focus {
    border-color: var(--sylarea-primary) !important;
    box-shadow: 0 0 0 2px rgba(199,163,154,.2) !important;
}

/* Erreur de validation */
.sl-checkout input.border,
.sl-checkout select.border {
    border-color: rgba(92,75,68,.18) !important;
}

/* Labels */
.sl-checkout label:not([class*="icon-"]):not([class*="peer"]) {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--sylarea-text) !important;
    opacity: .65 !important;
    margin-bottom: 8px !important;
    font-family: var(--font-body) !important;
    display: block !important;
}

/* Titres de sections (Adresse, Livraison, Paiement) */
.sl-checkout h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: var(--sylarea-text) !important;
    letter-spacing: .3px !important;
}

/* Espacement entre les blocs accordion */
.sl-checkout .mb-7 {
    margin-bottom: 2rem !important;
}

/* SÃ©parateur entre Ã©tapes */
.sl-checkout [class*="accordion"] {
    border: 1px solid rgba(92,75,68,.1) !important;
    border-radius: 4px !important;
    background: #fff !important;
    padding: 28px 32px !important;
}

/* Bouton "Passer la commande" */
.sl-checkout .primary-button,
.primary-button {
    background-color: var(--sylarea-primary) !important;
    border: 1px solid var(--sylarea-primary) !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    letter-spacing: 2px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    padding: 14px 34px !important;
}

.sl-checkout .primary-button:hover,
.primary-button:hover {
    background-color: #b8918a !important;
    border-color: #b8918a !important;
}

/* MÃ©thodes de livraison & paiement â€” radio buttons */
.sl-checkout [type="radio"] + label,
.sl-checkout [type="checkbox"] + label {
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* â”€â”€ Options livraison & paiement â”€â”€ */
.sl-method-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    width: 180px;
    border: 1px solid rgba(92,75,68,.15);
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    position: relative;
}
.sl-method-option--active,
.sl-method-option:hover {
    border-color: var(--sylarea-primary);
    background: rgba(199,163,154,.05);
}

.sl-method-radio {
    width: 16px;
    height: 16px;
    display:inline-block;
    border-radius: 50%;
    border: 2px solid rgba(92,75,68,.3);
    transition: border-color .2s;
    flex-shrink: 0;
}
.sl-method-radio--checked {
    border-color: var(--sylarea-primary);
    background: radial-gradient(circle, var(--sylarea-primary) 45%, transparent 46%);
}

.sl-method-title {
    font-size: 14px;
    color: var(--sylarea-text);
    font-family: var(--font-body);
}
.sl-method-desc {
    font-size: 12px;
    opacity: .55;
    margin-top: 2px;
    color: var(--sylarea-text);
    font-family: var(--font-body);
}
.sl-method-price {
    font-size: 16px;
    color: var(--sylarea-text);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-top: 4px;
}

/* RÃ©sumÃ© commande (colonne droite) */
.sl-checkout .sticky {
    background: #fff !important;
    border: 1px solid rgba(92,75,68,.1) !important;
    border-radius: 4px !important;
    padding: 28px !important;
}

/* â”€â”€ .sl-content â€” styles typographiques prose (h3, ul, li, a, etc.) â”€â”€ */
.sl-content .section h3 {
  font-family: var(--font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  color: var(--sylarea-primary) !important;
  margin: 36px 0 10px;
  letter-spacing: .3px;
}

.sl-content .section h4 {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--sylarea-text) !important;
  margin: 24px 0 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sl-content .section ul,
.sl-content .section ol {
  padding-left: 1.5em;
  margin: 10px 0 20px;
}
.sl-content .section ul { list-style: disc; }
.sl-content .section ol { list-style: decimal; }

.sl-content .section li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sylarea-text);
  opacity: .85;
  margin-bottom: 4px;
}

.sl-content .section a {
  color: var(--sylarea-primary);
  text-decoration: underline;
  transition: opacity .2s;
}
.sl-content .section a:hover { opacity: .75; }

.sl-content .section strong { font-weight: 600; }
.sl-content .section em     { font-style: italic; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   PAGE CONTACT
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.sl-flash{padding:14px 20px;border-radius:4px;margin:0 2rem 24px;font-size:15px}
.sl-flash-success{background:rgba(199,163,154,.15);border:1px solid rgba(199,163,154,.4);color:#5c4b44}
.sl-flash-error{background:rgba(200,80,80,.08);border:1px solid rgba(200,80,80,.3);color:#8b2020}

.sl-ct{padding:72px 0 100px}
.sl-ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}

.sl-ct-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--sylarea-primary);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.sl-ct-eyebrow::before{content:"";display:block;width:28px;height:1px;background:var(--sylarea-primary)}
.sl-ct-intro h1{font-family:var(--font-heading)!important;font-size:clamp(2.2rem,4vw,3rem)!important;font-weight:400!important;color:var(--sylarea-text)!important;line-height:1.2!important;margin-bottom:20px!important}
.sl-ct-intro p:first-of-type{font-size:16px!important;font-weight:600!important;color:var(--sylarea-primary)!important;margin-bottom:12px!important}
.sl-ct-intro p{font-size:15px;line-height:1.8;opacity:.82;margin-bottom:36px;color:var(--sylarea-text)}
.sl-ct-ornament{display:flex;align-items:center;gap:10px;margin-bottom:32px;color:var(--sylarea-primary);font-size:13px;opacity:.6}

.sl-ct-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:40px}
.sl-ct-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 4px}
.sl-ct-badge-icon{width:48px;height:48px;border-radius:50%;border:1px solid rgba(199,163,154,.5);display:flex;align-items:center;justify-content:center;color:var(--sylarea-primary);flex-shrink:0}
.sl-ct-badge-icon svg{width:22px;height:22px}
.sl-ct-badge span{font-size:12px;line-height:1.5;color:var(--sylarea-text);opacity:.75}

.sl-ct-form{display:flex;flex-direction:column}
.sl-ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sl-ct-field{width:100%!important;padding:14px 16px!important;border:1px solid rgba(92,75,68,.15)!important;background:#fff!important;color:var(--sylarea-text)!important;font-family:var(--font-body)!important;font-size:15px!important;border-radius:2px!important;box-sizing:border-box!important;outline:none!important;transition:border-color .2s!important;display:block!important;margin-bottom:16px!important;-webkit-appearance:none!important;appearance:none!important}
.sl-ct-field:focus{border-color:var(--sylarea-primary)!important;box-shadow:0 0 0 2px rgba(199,163,154,.2)!important}
.sl-ct-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c4b44' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;padding-right:40px !important;cursor:pointer !important}
.sl-ct-textarea{resize:vertical !important;min-height:130px !important}
.sl-ct-submit{display:flex !important;align-items:center !important;justify-content:center !important;gap:12px !important;padding:16px 34px !important;background:var(--sylarea-primary) !important;color:#fff !important;border:none !important;font-family:var(--font-body) !important;font-size:12px !important;letter-spacing:2.5px !important;text-transform:uppercase !important;cursor:pointer !important;width:100% !important;margin-top:4px !important;transition:.3s !important}
.sl-ct-submit:hover{background:#b8918a !important}
.sl-ct-submit:disabled{opacity:.6 !important;cursor:not-allowed !important}
.sl-ct-privacy{font-size:12px;opacity:.5;margin-top:14px;color:var(--sylarea-text);display:flex;align-items:center;justify-content:center;gap:6px}

.sl-ct-img{width:100%;min-height:540px;background:#eae3df;border-radius:6px;overflow:hidden;position:sticky;top:100px}
.sl-ct-img img{width:100%;height:100%;object-fit:cover;display:block}

.sl-ct-faq{padding-top:80px;border-top:1px solid rgba(92,75,68,.08);margin-top:80px}
.sl-ct-faq-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--sylarea-primary);margin-bottom:40px;display:flex;align-items:center;gap:12px}
.sl-ct-faq-eyebrow::before{content:"";display:block;width:28px;height:1px;background:var(--sylarea-primary)}
.sl-ct-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.sl-ct-faq-item{display:flex;flex-direction:column;gap:12px}
.sl-ct-faq-icon{width:44px;height:44px;border-radius:50%;border:1px solid rgba(199,163,154,.35);display:flex;align-items:center;justify-content:center;color:var(--sylarea-primary);flex-shrink:0}
.sl-ct-faq-icon svg{width:20px;height:20px}
.sl-ct-faq-item h3{font-family:var(--font-heading) !important;font-size:1.1rem !important;font-weight:400 !important;color:var(--sylarea-text) !important}
.sl-ct-faq-item p{font-size:14px;line-height:1.7;opacity:.75;color:var(--sylarea-text)}

@media(max-width:900px){
  .sl-ct-grid{grid-template-columns:1fr;gap:48px}
  .sl-ct-img{min-height:300px;position:static}
  .sl-ct-faq-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){
  .sl-ct-row{grid-template-columns:1fr}
  .sl-ct-badges{grid-template-columns:1fr 1fr}
}

.sl-ct-confirm{text-align:center;padding:100px 20px;max-width:560px;margin:0 auto}
.sl-ct-confirm-icon{width:72px;height:72px;border-radius:50%;border:1px solid rgba(199,163,154,.5);display:flex;align-items:center;justify-content:center;color:var(--sylarea-primary);margin:0 auto 32px}
.sl-ct-confirm-icon svg{width:32px;height:32px}
.sl-ct-confirm h1{font-family:var(--font-heading)!important;font-size:2rem!important;font-weight:400!important;color:var(--sylarea-text)!important;margin-bottom:20px!important}
.sl-ct-confirm p{font-size:15px;line-height:1.8;opacity:.8;color:var(--sylarea-text);margin-bottom:36px}

/* Mini-cart — bouton continuer la commande */
a[href*="checkout/onepage"].bg-navyBlue {
    background-color: var(--sylarea-primary) !important;
    color: #fff !important;
}
/* ===== PAGES CMS GENERIQUES ===== */
.sl-cms-page { max-width: 820px; margin: 60px auto 100px; padding: 0 2rem; color: var(--sylarea-text, #5c4b44); font-size: 1rem; line-height: 1.8; }
.sl-cms-page h1, .sl-cms-page h2 { font-family: var(--font-heading, 'Playfair Display', serif) !important; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; color: var(--sylarea-text, #5c4b44); margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(199,163,154,.3); }
.sl-cms-page h3 { font-family: var(--font-heading, 'Playfair Display', serif) !important; font-size: 1.1rem; font-weight: 600; color: var(--sylarea-text, #5c4b44); margin: 2.5rem 0 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; }
.sl-cms-page h4 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.sl-cms-page p { margin-bottom: 0.85em; opacity: .88; }
.sl-cms-page p:empty { display: none; }
.sl-cms-page ul, .sl-cms-page ol { padding-left: 1.6rem; margin-bottom: 1rem; opacity: .88; }
.sl-cms-page ul li, .sl-cms-page ol li { margin-bottom: 0.35em; line-height: 1.7; }
.sl-cms-page ul { list-style: disc; }
.sl-cms-page ol { list-style: decimal; }
.sl-cms-page strong { font-weight: 600; color: var(--sylarea-text, #5c4b44); }
.sl-cms-page a:hover { opacity: .75; }
.sl-cms-page hr { border: none; border-top: 1px solid rgba(199,163,154,.25); margin: 2rem 0; }
.sl-cms-page table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.sl-cms-page th, .sl-cms-page td { padding: 10px 14px; border: 1px solid rgba(199,163,154,.3); font-size: .95rem; }
.sl-cms-page th { background: rgba(199,163,154,.1); font-weight: 600; }

/* ===== PAGE A PROPOS ===== */
.sl-cms-page.sl-about { max-width: 1140px; }
.sl-cms-page.sl-about h2 { margin: 6px 0 18px; padding-bottom: 0; border-bottom: none; font-size: clamp(1.45rem,3vw,2.2rem); line-height: 1.25; }
.ab-s { padding: 80px 0; }
.ab-s + .ab-s { border-top: 1px solid rgba(199,163,154,.12); }
.ab-g { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ab-gw { grid-template-columns: 2fr 3fr; }
.ab-img, .ab-bw { width: 100%; aspect-ratio: 4/5; background: var(--sylarea-light,#f3ede9); border-radius: 4px; border: 1px solid rgba(199,163,154,.25); display: flex; align-items: center; justify-content: center; }
.ab-bi { width: 57%; aspect-ratio: 1/1; background: #b87574; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; color: white; }
.ab-btxt { font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.65; font-weight: 500; }
.ab-ei { display: block; font-family: var(--font-heading,'Playfair Display',serif); font-style: italic; font-size: 1.2rem; color: var(--sylarea-primary,#c7a39a); margin-bottom: 2px; }
.ab-name { font-family: var(--font-heading,'Playfair Display',serif) !important; font-size: clamp(3rem,6vw,3rem); font-weight: 400; color: var(--sylarea-primary,#c7a39a); line-height: 1; margin: 0 0 10px !important; border: none !important; padding: 0 !important; }
.ab-sub { display: block; font-size: .67rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sylarea-primary,#c7a39a); margin-bottom: 28px; font-weight: 500; opacity: 1 !important; }
.ab-lbl { display: block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sylarea-primary,#c7a39a); margin-bottom: 10px; font-weight: 600; opacity: 1 !important; }
.ab-tag { display: block; font-family: var(--font-heading,'Playfair Display',serif); font-style: italic; color: var(--sylarea-primary,#c7a39a); font-size: 1.1rem; margin-top: 22px; opacity: 1 !important; }
.ab-vg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(199,163,154,.2); border-radius: 4px; overflow: hidden; }
.ab-vc { background: white; padding: 28px 22px; }
.ab-vc svg { display: block; margin-bottom: 10px; }
.ab-vc h3 { font-family: var(--font-heading,'Playfair Display',serif) !important; font-size: .95rem; font-weight: 600; color: var(--sylarea-text,#5c4b44); margin: 0 0 6px; letter-spacing: 0 !important; text-transform: none !important; }
.ab-vc p { font-size: .82rem; opacity: .7 !important; margin: 0; line-height: 1.6; }
.ab-mis { background: var(--sylarea-light,#f3ede9); border-radius: 6px; padding: 64px 60px; margin: 0; }
.ab-mis h2 { font-size: clamp(1.4rem,2.5vw,2rem) !important; }
.ab-ics { display: flex; justify-content: center; gap: 40px; padding: 64px 0 48px; flex-wrap: wrap; }
.ab-ic { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 108px; text-align: center; }
.ab-icr { width: 68px; height: 68px; border-radius: 50%; border: 1.5px solid rgba(199,163,154,.5); display: flex; align-items: center; justify-content: center; color: var(--sylarea-primary,#c7a39a); flex-shrink: 0; }
.ab-ic p { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65 !important; margin: 0; line-height: 1.6; font-weight: 500; }
@media (max-width: 900px) { .ab-g, .ab-g.ab-gw { grid-template-columns: 1fr; gap: 36px; } .ab-s { padding: 52px 0; } .ab-mis { padding: 40px 28px; } .ab-bw { aspect-ratio: 1/1; max-width: 300px; margin: 0 auto; } .ab-ics { gap: 24px; padding: 48px 0 40px; } }

/* ===== PAGE FAQ ===== */
.sl-faq-header { max-width: 720px; margin: 64px auto 0; padding: 0 2rem 48px; border-bottom: 1px solid rgba(199,163,154,.2); }
.sl-faq-eyebrow { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sylarea-primary, #c7a39a); font-weight: 600; margin: 0 0 14px; }
.sl-faq-title { font-family: var(--font-heading, 'Playfair Display', serif); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 400; color: var(--sylarea-text, #5c4b44); margin: 0 0 16px; line-height: 1.15; }
.sl-faq-intro { font-size: .95rem; color: var(--sylarea-text, #5c4b44); opacity: .7; margin: 0; line-height: 1.7; }
.sl-cms-page.sl-faq { max-width: 720px; margin-top: 0; }
.faq-item { border-bottom: 1px solid rgba(199,163,154,.2); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-heading, 'Playfair Display', serif); font-size: 1.1rem; font-weight: 400; color: var(--sylarea-text, #5c4b44); line-height: 1.4; transition: color .2s; }
.faq-q:hover { color: var(--sylarea-primary, #c7a39a); }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(199,163,154,.5); display: flex; align-items: center; justify-content: center; color: var(--sylarea-primary, #c7a39a); transition: transform .3s ease, background .2s, border-color .2s; }
.faq-item.open .faq-icon { background: var(--sylarea-primary, #c7a39a); border-color: var(--sylarea-primary, #c7a39a); color: white; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .38s ease, padding .38s ease; padding-bottom: 0; font-size: .95rem; line-height: 1.75; color: var(--sylarea-text, #5c4b44); opacity: .85; }
.faq-item.open .faq-a { max-height: 600px; padding-bottom: 28px; }
.faq-a ul { padding-left: 1.4rem; list-style: disc; margin-top: 6px; }
.faq-a ul li { margin-bottom: .3em; }
.sl-faq-cta { max-width: 720px; margin: 0 auto 100px; padding: 48px 52px; background: var(--sylarea-light, #f3ede9); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.sl-faq-cta-text p:first-child { font-family: var(--font-heading, 'Playfair Display', serif); font-size: 1.25rem; font-weight: 400; color: var(--sylarea-text, #5c4b44); margin: 0 0 6px; }
.sl-faq-cta-text p:last-child { font-size: .88rem; color: var(--sylarea-text, #5c4b44); opacity: .65; margin: 0; line-height: 1.6; }
.sl-faq-cta-btn { flex-shrink: 0; display: inline-block; padding: 13px 28px; background: var(--sylarea-primary, #c7a39a); color: white; text-decoration: none; border-radius: 3px; font-size: .85rem; letter-spacing: .08em; font-weight: 500; transition: opacity .2s; white-space: nowrap; }
.sl-faq-cta-btn:hover { opacity: .82; color: white; text-decoration: none; }
@media (max-width: 600px) { .sl-faq-cta { flex-direction: column; align-items: flex-start; padding: 32px 28px; gap: 20px; } }
@media (max-width: 480px) { .sl-cms-page { margin-top: 36px; padding: 0 1.25rem; } .sl-cms-page h3 { font-size: 1rem; } .ab-name { font-size: 2.8rem !important; } .ab-ic { max-width: 85px; } .sl-faq-header { margin-top: 40px; padding-bottom: 32px; } .faq-q { font-size: 1rem; padding: 20px 0; } }

/* ===== UTILITAIRES COMMUNS (home + boutique) ===== */
.sl-section{padding:80px 0 100px}
.sl-section h2{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;margin-bottom:16px;color:var(--sylarea-text,#5c4b44)}
.sl-section-intro{max-width:600px;margin:0 auto 48px;text-align:center;opacity:.8;font-size:1rem}
.sl-btn{display:inline-block;padding:14px 34px;border:1px solid var(--sylarea-primary,#c7a39a);color:var(--sylarea-primary,#c7a39a);letter-spacing:2px;font-size:12px;text-decoration:none;text-transform:uppercase;transition:.3s;background:transparent}
.sl-btn:hover{background:var(--sylarea-primary,#c7a39a);color:white}

/* ===== PAGE D'ACCUEIL ===== */
.sl-hero{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 20px 60px}
.sl-hero h1{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:clamp(2rem,5vw,3.25rem);font-weight:400;max-width:700px;color:var(--sylarea-text,#5c4b44);line-height:1.3;margin-bottom:20px}
.sl-hero p{font-size:1.1rem;opacity:.75;margin-bottom:40px}
.sl-values-section{background:linear-gradient(135deg,#faf7f5 0%,#fcfbfa 100%);text-align:center}
.sl-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:50px;padding:40px 0}
.sl-value-item h3{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.4rem;font-weight:400;margin-bottom:15px;color:var(--sylarea-primary,#c7a39a)}
.sl-value-item p{font-size:15px;opacity:.75;line-height:1.8}
.sl-offers-section{text-align:center}
.sl-offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:48px 0;text-align:left}
.sl-offer-card{background:var(--sylarea-light,#f8f5f3);border-radius:8px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.04);transition:all .4s ease;display:flex;flex-direction:column;border:1px solid rgba(199,163,154,.15)}
.sl-offer-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.1);border-color:rgba(199,163,154,.35)}
.sl-offer-card img{width:100%;height:220px;object-fit:cover}
.sl-offer-card h3{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.6rem;font-weight:400;padding:28px 28px 4px;color:var(--sylarea-text,#5c4b44)}
.sl-offer-card h4{font-size:12px;font-weight:500;letter-spacing:1.5px;padding:0 28px;text-transform:uppercase;color:var(--sylarea-primary,#c7a39a);margin-bottom:18px}
.sl-offer-card>p{padding:0 28px;font-size:15px;line-height:1.8;opacity:.8;color:var(--sylarea-text,#5c4b44)}
.sl-offer-card ul{list-style:none;margin:20px 28px;padding:0;flex-grow:1}
.sl-offer-card ul li{font-size:14px;line-height:2;color:var(--sylarea-text,#5c4b44);opacity:.85}
.sl-offer-card ul li:before{content:"✓ ";color:var(--sylarea-primary,#c7a39a);font-weight:600;margin-right:6px}
.sl-offer-card .sl-btn{margin:0 28px 28px;align-self:flex-start;font-size:11px;padding:11px 26px}
.sl-cta-section{text-align:center;background:linear-gradient(135deg,#f5f0ee 0%,#f8f5f3 100%)}
.sl-cta-section p{font-size:1.1em;margin-bottom:36px;opacity:.8}

/* ===== PAGE BOUTIQUE / CATÉGORIES ===== */
.sl-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:48px 0;text-align:left}
.sl-product-card{background:var(--sylarea-light,#f8f5f3);border-radius:8px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.04);transition:all .4s ease;display:flex;flex-direction:column;border:1px solid rgba(199,163,154,.15)}
.sl-product-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.1);border-color:rgba(199,163,154,.35)}
.sl-product-card img{width:100%;height:280px;object-fit:cover}
.sl-product-card h3{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.5rem;font-weight:400;padding:24px 24px 4px;color:var(--sylarea-text,#5c4b44)}
.sl-product-card .sl-price{font-size:1.1rem;font-weight:500;padding:0 24px 12px;color:var(--sylarea-primary,#c7a39a)}
.sl-product-card .sl-btn{margin:0 24px 24px;align-self:flex-start;font-size:11px;padding:11px 26px}
.sl-page-header{text-align:center;padding:64px 0 16px}
.sl-page-header h1{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:400;color:var(--sylarea-text,#5c4b44);margin-bottom:12px}
.sl-category-desc{max-width:990px;margin:0 auto;text-align:center}
.sl-category-desc p{font-size:1.05rem;line-height:1.85;color:var(--sylarea-text,#5c4b44);opacity:.82;margin-bottom:0.9em}
.sl-category-desc p:last-child{margin-bottom:0}
.sl-empty{text-align:center;padding:80px 20px;color:var(--sylarea-text,#5c4b44);opacity:.6}
.sl-boutique-cats{padding:40px 0 56px;border-bottom:1px solid rgba(199,163,154,.2)}
.sl-cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sl-cat-card{display:block;text-decoration:none;border-radius:8px;overflow:hidden;background:var(--sylarea-light,#f8f5f3);border:1px solid rgba(199,163,154,.15);transition:all .4s ease}
.sl-cat-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.1);border-color:rgba(199,163,154,.35)}
.sl-cat-card img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .4s ease}
.sl-cat-card:hover img{transform:scale(1.04)}
.sl-cat-label{padding:16px 20px;font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.2rem;font-weight:400;color:var(--sylarea-text,#5c4b44);display:flex;justify-content:space-between;align-items:center}
.sl-cat-label::after{content:'→';color:var(--sylarea-primary,#c7a39a);font-size:1rem}
.sl-products-eyebrow{text-align:center;padding:48px 0 0;font-size:.75rem;letter-spacing:3px;text-transform:uppercase;color:var(--sylarea-primary,#c7a39a)}

/* ===== GALERIE PRODUIT (desktop) ===== */
.sl-gal-wrap{position:relative;display:block;width:600px;max-width:100%;border-radius:12px;overflow:hidden}
.sl-gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,0.88);border:none;border-radius:50%;width:48px;height:48px;font-size:36px;line-height:1;cursor:pointer;color:var(--sylarea-text,#5c4b44);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.18);transition:background .2s,opacity .2s;opacity:0}
.sl-gal-wrap:hover .sl-gal-arrow{opacity:1}
.sl-gal-arrow:hover{background:#fff}
.sl-gal-arrow--left{left:14px}
.sl-gal-arrow--right{right:14px}
.sl-gal-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.sl-gal-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(199,163,154,.45);cursor:pointer;padding:0;transition:all .2s}
.sl-gal-dot--active{background:var(--sylarea-primary,#c7a39a);transform:scale(1.3)}

/* ===== RESPONSIVE COMMUN ===== */
@media(max-width:900px){
    .sl-values-grid,.sl-offers-grid{grid-template-columns:1fr;gap:32px}
    .sl-products-grid{grid-template-columns:1fr 1fr;gap:24px}
    .sl-section{padding:48px 0 64px}
    .sl-container{padding:0 1.25rem}
}
@media(max-width:600px){
    .sl-offers-grid{grid-template-columns:1fr}
    .sl-products-grid{grid-template-columns:1fr;gap:20px}
    .sl-product-card{min-width:0;overflow:hidden}
    .sl-product-card img{height:220px;max-width:100%}
    .sl-cats-grid{grid-template-columns:1fr;gap:16px}
}

/* ===== PAGE PROCESSUS ===== */
.proc-header{padding:72px 0 48px;text-align:center}
.proc-eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sylarea-primary,#c7a39a);margin-bottom:20px;font-weight:600;display:block}
.proc-header h1{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:clamp(1.8rem,3vw,2.6rem)!important;font-weight:400!important;color:var(--sylarea-text,#5c4b44)!important;margin:0 auto 16px!important;max-width:700px}
.proc-intro-text{font-size:1.05rem;opacity:.75;max-width:560px;margin:0 auto;line-height:1.8;color:var(--sylarea-text,#5c4b44)}
.proc-timeline{padding:56px 0 80px;max-width:820px;margin:0 auto}
.proc-step{display:flex;gap:36px;align-items:flex-start;margin-bottom:52px;position:relative}
.proc-step:not(:last-child)::before{content:'';position:absolute;left:27px;top:56px;bottom:-52px;width:1px;background:rgba(199,163,154,.2)}
.proc-num{width:56px;height:56px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--sylarea-primary,#c7a39a);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.3rem;color:var(--sylarea-primary,#c7a39a);background:white;position:relative;z-index:1}
.proc-body{padding-top:12px;flex:1;min-width:0}
.proc-body h2{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.2rem!important;font-weight:400!important;color:var(--sylarea-text,#5c4b44)!important;margin:0 0 10px!important}
.proc-body p{font-size:.97rem;line-height:1.8;opacity:.85;color:var(--sylarea-text,#5c4b44);margin:0 0 .5em}
.proc-body ul{list-style:none;padding:0;margin:.5em 0 0}
.proc-body ul li{font-size:.93rem;line-height:1.85;color:var(--sylarea-text,#5c4b44);opacity:.85;padding-left:1.1em;position:relative;margin-bottom:2px}
.proc-body ul li::before{content:'–';position:absolute;left:0;color:var(--sylarea-primary,#c7a39a)}
.proc-result{background:var(--sylarea-light,#f8f5f3);padding:64px 0;text-align:center;border-top:1px solid rgba(199,163,154,.15)}
.proc-result-inner{max-width:600px;margin:0 auto}
.proc-result-icon{width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(199,163,154,.4);display:flex;align-items:center;justify-content:center;color:var(--sylarea-primary,#c7a39a);margin:0 auto 28px}
.proc-result h2{font-family:var(--font-heading,'Playfair Display',serif)!important;font-size:1.9rem!important;font-weight:400!important;color:var(--sylarea-text,#5c4b44)!important;margin:0 0 16px!important}
.proc-result p{font-size:1rem;line-height:1.85;opacity:.82;color:var(--sylarea-text,#5c4b44)}
@media(max-width:600px){.proc-step{gap:20px}.proc-num{width:44px;height:44px;font-size:1.1rem;flex-shrink:0}.proc-step:not(:last-child)::before{left:21px;top:44px}}

/* ===== MOBILE — COMPLÉMENTS ===== */
@media(max-width:900px){
    /* About — grille valeurs 2×2 → 1 colonne */
    .ab-vg{grid-template-columns:1fr!important}
    /* Contact — badges 4→2 colonnes */
    .sl-ct-badges{grid-template-columns:1fr 1fr}
    /* Offers grid sur home → force 1 col (renforce la règle existante) */
    .sl-offers-grid{grid-template-columns:1fr!important;gap:24px!important}
}

@media(max-width:768px){
    /* Footer liens — empile en colonne sur mobile */
    .sylarea-footer-links{flex-direction:column;gap:24px}
}

@media(max-width:600px){
    /* Hero home — réduit le padding */
    .sl-hero{padding:56px 20px 36px;min-height:auto}
    /* Process — padding sur le result */
    .proc-header{padding:48px 0 32px}
    .proc-result{padding:44px 0}
    .proc-result-inner{padding:0 1.25rem}
    /* About — mission + valeurs */
    .ab-vg{grid-template-columns:1fr!important}
    .ab-vc{padding:20px 18px}
    /* Auth — panels */
    .sl-auth-panel{padding:24px 20px!important}
    /* Confirmation commande */
    .sl-ct-confirm{padding:60px 20px}
    /* Offres home */
    .sl-offers-grid{gap:16px!important}
    /* Footer */
    .sylarea-footer-links{flex-direction:column;gap:20px}
    .sylarea-footer-links ul{gap:8px}
}
