@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;800&display=swap');

/* SKIN « MATIERE TEXTILE » — mat, ombres dures, surpiqures, trame tissee.
   Le bon de commande est une piece de tissu posee sur le fond.
   Portee : body.rscf4-skin-matiere. Police : Almarai (400/800). */

body.rscf4-skin-matiere{--mf:'Almarai','Segoe UI',system-ui,sans-serif;--mg:#E4DACA;--mp:#F2ECE0;--mpc:#F8F3E8;--mp2:#E9E1D2;--mk:#2E1A28;--ms:#6C5A66;--ml:#CFC3B0;--ml2:#B7A992;--mst:rgba(46,26,40,.34);--mo:#6E7650;--md:#251523;--mod:#F1E8DA;--mb:#EFE6D6;--mh:rgba(46,26,40,.11);--mfc:#8A9463;--msm:repeating-linear-gradient(to right,var(--mst) 0 6px,transparent 6px 13px);--mwv:repeating-linear-gradient(45deg,rgba(46,26,40,.055) 0 1px,transparent 1px 5px)}

/* 1. FOND + COLONNES (flex natif de Blocksy) */
body.rscf4-skin-matiere.single-product{background-color:var(--mg);background-image:var(--mwv)}
body.rscf4-skin-matiere .product-entry-wrapper{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:30px;max-width:1180px;margin-inline:auto}
body.rscf4-skin-matiere .woocommerce-product-gallery{flex:1 1 380px;min-width:0}
body.rscf4-skin-matiere .summary.entry-summary{flex:0 1 min(460px,46%);min-width:0;max-width:100%}
body.rscf4-skin-matiere :is(.ct-breadcrumbs,.entry-summary p.price,.product_title){font-family:var(--mf)}
body.rscf4-skin-matiere .ct-breadcrumbs{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mo)}
body.rscf4-skin-matiere .ct-breadcrumbs a{color:var(--ms);text-decoration:none}
body.rscf4-skin-matiere.single-product .product_title{font-size:38px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--mk);margin:0 0 14px}
body.rscf4-skin-matiere.single-product .entry-summary p.price{margin:0 0 4px;padding-bottom:18px;font-size:26px;font-weight:800;color:var(--mk);background:var(--msm) bottom left/100% 1px no-repeat}
body.rscf4-skin-matiere .entry-summary p.price :is(.amount,bdi){color:var(--mk)}

/* 2. GALERIE : la photo montee comme une planche */
body.rscf4-skin-matiere .flexy-container{position:relative;background:var(--mp);border:1px solid var(--ml2);border-radius:5px;padding:10px 10px 18px;box-shadow:-5px 5px 0 var(--mh)}
body.rscf4-skin-matiere .flexy-container::after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:5px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--mst) 0 1px,transparent 1px 5px)}
body.rscf4-skin-matiere :is(.flexy-arrow-prev,.flexy-arrow-next,.woocommerce-product-gallery__trigger){background:var(--mp);color:var(--mk);border:1px solid var(--ml2);border-radius:3px;box-shadow:none}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] img{border:1px solid var(--ml);border-radius:3px;background:var(--mp)}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] li.active img{border-color:var(--mk)}

/* Le navigateur force direction:ltr sur input[type=tel] : on rétablit le sens de lecture
   du formulaire, sinon le texte arabe se décale ou passe sous l'icône. */
body.rscf4-skin-matiere .rscf4-rtl .rscf4-input,
body.rscf4-skin-matiere .rscf4-rtl .rscf4-input[type=tel]{direction:rtl;text-align:right}
body.rscf4-skin-matiere .rscf4-ltr .rscf4-input,
body.rscf4-skin-matiere .rscf4-ltr .rscf4-input[type=tel]{direction:ltr;text-align:left}

@media (min-width:1001px){
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs]{overflow:hidden}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs]::after{content:"";position:absolute;inset-inline:0;bottom:0;height:54px;pointer-events:none;background:linear-gradient(to top,var(--mp) 34%,rgba(242,236,224,0))}
}

/* 3. BON DE COMMANDE : bord franc, ombre portee dure */
body.rscf4-skin-matiere .rscf4-wrap{box-sizing:border-box;width:100%;max-width:none;margin-top:26px;font-family:var(--mf)}
body.rscf4-skin-matiere .rscf4-wrap *{box-sizing:border-box;font-family:inherit}
body.rscf4-skin-matiere :is(.rscf4-rtl,.rscf4-acc-rtl){direction:rtl;text-align:right}
body.rscf4-skin-matiere :is(.rscf4-ltr,.rscf4-acc-ltr){direction:ltr;text-align:left}
body.rscf4-skin-matiere .rscf4-card{background:var(--mpc);border:2px solid var(--mk);border-radius:6px;overflow:hidden;box-shadow:-11px 11px 0 rgba(46,26,40,.17)}
/* Lisière tissée en tête de carte : retirée à la demande du client. */
body.rscf4-skin-matiere .rscf4-content{padding:6px 22px 18px;display:flex;flex-direction:column;background-color:var(--mpc);background-image:var(--mwv)}
body.rscf4-skin-matiere .rscf4-section{padding:18px 0;margin:0}
body.rscf4-skin-matiere .rscf4-content .rscf4-section:not(:last-child){background:var(--msm) bottom left/100% 1px no-repeat}
body.rscf4-skin-matiere .rscf4-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
body.rscf4-skin-matiere .rscf4-section-title{margin:0;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ms)}
body.rscf4-skin-matiere .rscf4-fields-section>.rscf4-section-title{font-size:16px;letter-spacing:0;text-transform:none;color:var(--mk);margin-bottom:14px}
body.rscf4-skin-matiere .rscf4-chip{font-size:12px;font-weight:800;color:var(--ms);background:var(--mp2);border:1px solid var(--ml);border-radius:2px;padding:4px 12px}
body.rscf4-skin-matiere .rscf4-variants{display:flex;flex-wrap:wrap;gap:9px}
body.rscf4-skin-matiere .rscf4-variant{position:relative;font-size:14px;font-weight:800;line-height:1.2;color:var(--mk);background-color:var(--mp2);background-image:var(--mwv);border:1px solid var(--ml2);border-radius:4px;padding:11px 18px;min-width:60px;cursor:pointer;text-align:center;transition:transform .16s,background-color .16s,color .16s,border-color .16s}
body.rscf4-skin-matiere .rscf4-variant:hover{border-color:var(--mk);transform:translateY(-1px)}
body.rscf4-skin-matiere .rscf4-variant.active{background-color:var(--mk);color:#F4EFE3;border-color:var(--mk)}
body.rscf4-skin-matiere .rscf4-variant.active::after{content:"";position:absolute;inset:4px;border:1px dashed rgba(244,239,227,.55);border-radius:2px;pointer-events:none}
body.rscf4-skin-matiere [data-attribute=couleur] .rscf4-variant{display:inline-flex;align-items:center;gap:9px;padding:9px 16px}
body.rscf4-skin-matiere [data-attribute=couleur] .rscf4-variant::before{content:"";flex:0 0 18px;height:18px;border-radius:2px;border:1px solid rgba(20,12,18,.28);background-color:#D8CDB4;background-image:repeating-linear-gradient(-45deg,rgba(46,26,40,.2) 0 1px,transparent 1px 4px)}
body.rscf4-skin-matiere [data-attribute=couleur] .rscf4-variant:nth-child(odd)::before{background-color:#3A2732;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.17) 0 1px,transparent 1px 3px)}
body.rscf4-skin-matiere .rscf4-fields-section{display:flex;flex-direction:column;gap:12px}
body.rscf4-skin-matiere .rscf4-field{position:relative}
body.rscf4-skin-matiere .rscf4-icon{position:absolute;top:50%;inset-inline-start:16px;transform:translateY(-50%);z-index:2;font-size:15px;line-height:1;color:var(--ms);opacity:.62;pointer-events:none}
body.rscf4-skin-matiere .rscf4-field:focus-within .rscf4-icon{opacity:1}
body.rscf4-skin-matiere .rscf4-input{width:100%;height:54px;font-size:15px;font-weight:800;color:var(--mk);background-color:var(--mp2);background-image:var(--mwv);border:1px solid var(--ml2);border-radius:4px;padding:16px;padding-inline-start:44px;outline:none;box-shadow:none;transition:border-color .16s,box-shadow .16s}
body.rscf4-skin-matiere .rscf4-input::placeholder{color:var(--ms);opacity:1;font-weight:400}
body.rscf4-skin-matiere .rscf4-input:focus{border-color:var(--mk);box-shadow:inset 0 0 0 1px var(--mk)}

/* 4. DROPDOWN VILLE — cache sauf .open */
body.rscf4-skin-matiere .rscf4-city-field{position:relative;z-index:30}
body.rscf4-skin-matiere .rscf4-city-search{padding-inline-end:16px}
body.rscf4-skin-matiere .rscf4-city-dropdown{display:none;position:absolute;top:calc(100% + 7px);inset-inline:0;z-index:9999;max-height:200px;overflow-y:auto;background:var(--mpc);border:1px solid var(--mk);border-radius:4px;box-shadow:-6px 6px 0 var(--mh)}
body.rscf4-skin-matiere .rscf4-city-dropdown.open{display:block}
body.rscf4-skin-matiere .rscf4-city-option{position:relative;display:block;width:100%;padding:12px 16px;font-size:14px;font-weight:800;line-height:1.25;color:var(--mk);background:transparent;border:0;border-bottom:1px solid var(--ml);text-align:start;cursor:pointer}
body.rscf4-skin-matiere .rscf4-city-option:last-child{border-bottom:0}
body.rscf4-skin-matiere .rscf4-city-option:is(:hover,.active){background:var(--mp2)}
body.rscf4-skin-matiere .rscf4-city-option.active::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--mo)}
body.rscf4-skin-matiere .rscf4-city-option-main{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.rscf4-skin-matiere .rscf4-city-empty{padding:14px 16px;font-size:13px;font-weight:700;color:var(--ms);text-align:center}

/* 5. PIED DE CARTE : total + bouton */
body.rscf4-skin-matiere .rscf4-bottom{padding:22px 22px 26px;background-color:var(--md);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 5px);border-top:2px solid var(--mk);color:var(--mod)}
body.rscf4-skin-matiere .rscf4-total-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
body.rscf4-skin-matiere :is(.rscf4-total-block,.rscf4-resume) p{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.62)}
body.rscf4-skin-matiere .rscf4-total-block strong{display:block;font-size:33px;line-height:1;font-weight:800;color:var(--mod)}
body.rscf4-skin-matiere .rscf4-resume{border:1px dashed rgba(255,255,255,.38);border-radius:3px;padding:9px 14px;text-align:center;min-width:136px}
body.rscf4-skin-matiere .rscf4-resume strong{font-size:13px;font-weight:800;color:var(--mod)}
body.rscf4-skin-matiere .rscf4-order-btn{position:relative;width:100%;border:0;border-radius:4px;padding:22px 16px;cursor:pointer;font-size:19px;line-height:1.2;font-weight:800;color:#241322;background-color:var(--mb);background-image:repeating-linear-gradient(45deg,rgba(46,26,40,.05) 0 1px,transparent 1px 4px);box-shadow:-5px 5px 0 rgba(0,0,0,.34);transition:transform .16s,box-shadow .16s}
body.rscf4-skin-matiere .rscf4-order-btn::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(36,19,34,.42);border-radius:2px;pointer-events:none}
body.rscf4-skin-matiere .rscf4-order-btn:hover{transform:translate(2px,-2px);box-shadow:-7px 7px 0 rgba(0,0,0,.34)}
body.rscf4-skin-matiere .rscf4-order-btn:active{transform:translate(-3px,3px);box-shadow:-2px 2px 0 rgba(0,0,0,.34)}
body.rscf4-skin-matiere .rscf4-order-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
body.rscf4-skin-matiere .rscf4-button-price{white-space:nowrap}
body.rscf4-skin-matiere :is(.rscf4-input,.rscf4-order-btn,.rscf4-variant,.rscf4-city-option,summary):focus-visible{outline:2px solid var(--mfc);outline-offset:2px}
body.rscf4-skin-matiere .rscf4-message:not(:empty){margin:14px 0 0;font-size:13px;font-weight:800;text-align:center}
body.rscf4-skin-matiere .rscf4-message.error{color:#FFB4B4}
body.rscf4-skin-matiere .rscf4-message.success{color:#86EFAC}

/* 6. ONGLETS WOO NEUTRALISES + ACCORDEONS */
body.rscf4-skin-matiere.single-product :is(.woocommerce-tabs,.wc-tabs-wrapper,.woocommerce-Tabs-panel,.tabs.wc-tabs){display:none!important}
body.rscf4-skin-matiere .rscf4-accordion{clear:both;display:block;width:100%;max-width:1180px;margin:34px auto 0;padding:2px 20px;font-family:var(--mf);background-color:var(--mp);background-image:var(--mwv);border:1px solid var(--ml2);border-radius:6px;box-sizing:border-box}
body.rscf4-skin-matiere .rscf4-accordion details{background:var(--msm) bottom left/100% 1px no-repeat;border:0;margin:0}
body.rscf4-skin-matiere .rscf4-accordion details:last-child{background-image:none}
body.rscf4-skin-matiere .rscf4-accordion summary{list-style:none;cursor:pointer;padding:17px 0;font-size:15px;font-weight:800;color:var(--mk);display:flex;align-items:center;justify-content:space-between;gap:12px}
body.rscf4-skin-matiere .rscf4-accordion summary::-webkit-details-marker{display:none}
body.rscf4-skin-matiere .rscf4-accordion summary::after{content:"";flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid var(--ms);border-bottom:1.5px solid var(--ms);transform:rotate(45deg);margin-bottom:4px;transition:transform .18s}
body.rscf4-skin-matiere .rscf4-accordion details[open] summary::after{transform:rotate(-135deg);margin:0}
body.rscf4-skin-matiere .rscf4-accordion details>div{padding:0 0 20px;font-size:14px;line-height:1.9;color:var(--ms)}
body.rscf4-skin-matiere .rscf4-accordion details>div p{margin:0 0 10px}

/* 7. RESPONSIVE — 1000 / 800 / 700 */
@media (max-width:1000px){
body.rscf4-skin-matiere .product-entry-wrapper{flex-direction:column;gap:24px}
body.rscf4-skin-matiere .rscf4-wrap{padding-inline:12px}
body.rscf4-skin-matiere :is(.woocommerce-product-gallery,.summary.entry-summary){flex:1 1 auto;width:100%;max-width:100%}
body.rscf4-skin-matiere.single-product .product_title{font-size:30px}
body.rscf4-skin-matiere.single-product .entry-summary p.price{font-size:23px}
body.rscf4-skin-matiere :is(.product-entry-wrapper,.ct-product-gallery-container,.woocommerce-product-gallery){width:100%!important;max-width:100%!important;overflow:hidden!important}
body.rscf4-skin-matiere .ct-product-gallery-container{display:flex!important;flex-direction:column!important;gap:0!important}
body.rscf4-skin-matiere .flexy-container{order:1!important;width:100%!important}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs]{order:2!important;position:relative!important;inset:auto!important;transform:none!important;display:block!important;width:100%!important;height:auto!important;margin:10px 0 14px!important;padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] ol{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:7px!important;width:max-content!important;max-width:none!important;height:auto!important;margin:0;padding:0 2px 6px}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] li{display:block!important;flex:0 0 66px!important;width:66px!important;height:86px!important;margin:0;padding:0;opacity:1}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] .ct-media-container{display:block!important;width:66px!important;height:86px!important;overflow:hidden}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] img{display:block!important;width:66px!important;max-width:none!important;height:86px!important;object-fit:cover;border:1px solid var(--ml)}
body.rscf4-skin-matiere .flexy-pills[data-type=thumbs] li.active img{border:2px solid var(--mk)}
}

@media (max-width:800px){
body.rscf4-skin-matiere .rscf4-wrap{margin-top:20px}
body.rscf4-skin-matiere .rscf4-content{padding:4px 16px 14px}
body.rscf4-skin-matiere .rscf4-section{padding:15px 0}
body.rscf4-skin-matiere .rscf4-variant{padding:10px 15px;min-width:54px;font-size:13px}
body.rscf4-skin-matiere .rscf4-bottom{padding:18px 16px 22px}
body.rscf4-skin-matiere .rscf4-total-block strong{font-size:28px}
body.rscf4-skin-matiere .rscf4-resume{min-width:112px;padding:8px 11px}
body.rscf4-skin-matiere .rscf4-order-btn{font-size:17px;padding:19px 12px}
body.rscf4-skin-matiere .rscf4-accordion{margin-top:20px;padding:2px 16px}
body.rscf4-skin-matiere .rscf4-card{box-shadow:-6px 6px 0 rgba(46,26,40,.17)}
body.rscf4-skin-matiere .rscf4-total-row{align-items:flex-start}
}

@media (max-width:700px){
body.rscf4-skin-matiere.single-product .product_title{font-size:26px}
body.rscf4-skin-matiere .rscf4-city-dropdown{max-height:176px}
body.rscf4-skin-matiere .rscf4-city-option{font-size:13px;padding:11px 13px}
}

@media (prefers-reduced-motion:reduce){
body.rscf4-skin-matiere :is(.rscf4-wrap,.rscf4-accordion) *{transition:none!important;animation:none!important}
body.rscf4-skin-matiere .rscf4-accordion summary::after{transition:none!important}
body.rscf4-skin-matiere :is(.rscf4-order-btn,.rscf4-variant):hover{transform:none}
}

/* ---------------------------------------------------------------
 * Page de remerciement — bloc commun à tous les thèmes, non modifié.
 * Exigence client : la page Thank You reste identique quel que soit le thème.
 * --------------------------------------------------------------- */
/* Thank You personnalisée */
.rscf4-thankyou-page{
  width:100%;
  max-width:960px;
  margin:42px auto;
  padding:0 18px;
  box-sizing:border-box;
}

.rscf4-thankyou-ltr{direction:ltr;text-align:left}
.rscf4-thankyou-rtl{direction:rtl;text-align:right}

.rscf4-thankyou-card{
  background:#ffffff;
  border:1px solid #e6e6e6;
  border-radius:28px;
  padding:34px;
  box-shadow:0 18px 48px rgba(0,0,0,.10);
}

.rscf4-thankyou-card h1{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.15;
  font-weight:900;
  color:#111!important;
}

.rscf4-thankyou-text{
  color:#333;
  font-size:16px;
  line-height:1.7;
  margin-bottom:22px;
}

.rscf4-thankyou-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:22px 0;
}

.rscf4-thankyou-grid>div,
.rscf4-thankyou-section{
  border:1px solid #eee;
  border-radius:18px;
  background:#fafafa;
  padding:18px;
}

.rscf4-thankyou-grid span{
  display:block;
  color:#666;
  font-size:13px;
  font-weight:800;
  margin-bottom:6px;
}

.rscf4-thankyou-grid strong{
  display:block;
  color:#111;
  font-size:22px;
  font-weight:900;
}

.rscf4-thankyou-section{
  margin-top:14px;
}

.rscf4-thankyou-section h2{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
  color:#111!important;
}

.rscf4-thankyou-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-top:1px solid #e9e9e9;
  color:#222;
}

.rscf4-thankyou-line:first-of-type{border-top:0}
.rscf4-thankyou-line span{font-weight:800;text-align:end;color:#111}
.rscf4-thankyou-meta{font-size:13px;color:#666;margin-top:4px}
.rscf4-thankyou-meta p{margin:0}
.rscf4-thankyou-total{font-size:18px;font-weight:900}

.rscf4-thankyou-button{
  display:block;
  width:100%;
  margin-top:24px;
  padding:18px 20px;
  border-radius:18px;
  background:#111!important;
  color:#fff!important;
  text-align:center;
  text-decoration:none!important;
  font-size:17px;
  font-weight:900;
  box-sizing:border-box;
}

@media(max-width:700px){
  .rscf4-thankyou-page{margin:24px auto;padding:0 12px}
  .rscf4-thankyou-card{padding:22px;border-radius:22px}
  .rscf4-thankyou-card h1{font-size:27px}
  .rscf4-thankyou-grid{grid-template-columns:1fr}
  .rscf4-thankyou-line{flex-direction:column;gap:6px}
  .rscf4-thankyou-line span{text-align:inherit}
}