/*
Theme Name: Sticker Minute
Description: Thème de la boutique Sticker Minute. Reprend la charte de l'éditeur : barre noire, encre #101418, bleu #1570ef, vert #22c55e.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sticker-minute
*/

:root{
  --encre:#101418; --gris:#f3f4f6; --bleu:#1570ef; --bleu-fonce:#0b4fb8;
  --vert:#22c55e; --vert-fonce:#16a34a; --bord:#e3e6ea; --doux:#5a636c; --rouge:#d64545;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--encre); background:#fff;
  display:flex; flex-direction:column; min-height:100vh;
}
img{max-width:100%; height:auto}
a{color:var(--bleu)}
a:hover{color:var(--bleu-fonce)}

/* ---------------------------------------------------------------- entête */
.sm-tete{
  background:#000; color:#fff; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:10px 18px;
}
.sm-tete a{color:#fff; text-decoration:none}
.sm-marque{font-weight:800; letter-spacing:.02em; font-size:17px}
.sm-nav{display:flex; align-items:center; gap:18px; font-size:14px}
.sm-nav a{opacity:.85}
.sm-nav a:hover{opacity:1}
.sm-panier-lien{display:flex; align-items:center; gap:8px; font-weight:600; opacity:1}
.sm-panier-lien b{color:var(--vert)}

/* ---------------------------------------------------------------- corps */
.sm-corps{flex:1}
.sm-page{max-width:1080px; margin:0 auto; padding:34px 20px 72px}
.sm-page h1{font-size:clamp(26px,3.4vw,38px); line-height:1.12; letter-spacing:-.015em; margin:0 0 10px}
.sm-page h2{font-size:22px; margin:34px 0 12px}
.sm-chapo{color:var(--doux); margin:0 0 26px; font-size:16.5px}

.sm-btn{
  display:inline-block; background:var(--bleu); color:#fff !important; border:0;
  border-radius:8px; padding:13px 24px; font-size:16px; font-weight:700;
  cursor:pointer; text-decoration:none; line-height:1.2;
}
.sm-btn:hover{background:var(--bleu-fonce)}
.sm-btn-vert{background:var(--vert)}
.sm-btn-vert:hover{background:var(--vert-fonce)}

/* ---------------------------------------------------------- fil d'étapes */
.sm-fil{display:flex; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--doux); margin:0 0 18px}
.sm-fil span,.sm-fil b{background:var(--gris); border-radius:999px; padding:6px 14px; font-weight:500}
.sm-fil b{background:var(--encre); color:#fff; font-weight:700}

/* ------------------------------------------------------------- maquette */
.sm-deux{display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:start}
.sm-apercu{margin:0; background:var(--gris); border-radius:12px; padding:22px; text-align:center}
.sm-apercu img{background:#fff; border:1px solid var(--bord); border-radius:8px}
.sm-apercu figcaption{margin-top:12px; font-size:13px; color:var(--doux)}
.sm-fiche dl{margin:0 0 20px; border-top:1px solid var(--bord)}
.sm-fiche dl > div{display:flex; justify-content:space-between; gap:14px; padding:11px 2px; border-bottom:1px solid var(--bord)}
.sm-fiche dt{color:var(--doux); font-size:14px}
.sm-fiche dd{margin:0; font-weight:600}
.sm-ok{color:var(--vert-fonce)}
.sm-alerte{color:#b45309}
.sm-avis{background:#fff8e6; border-left:4px solid #e0b84c; padding:13px 15px; border-radius:0 7px 7px 0; font-size:14.5px; margin:0 0 20px}

.sm-commande label{display:block; font-size:13px; color:var(--doux); margin-bottom:7px; font-weight:600}
.sm-qte{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.sm-qte button{border:1px solid var(--bord); background:#fff; border-radius:7px; padding:9px 14px; font-size:14px; cursor:pointer; font-weight:600; color:var(--encre)}
.sm-qte button[aria-pressed=true]{border-color:var(--bleu); background:#eaf2fe; color:var(--bleu)}
.sm-qte input{width:92px; border:1px solid var(--bord); border-radius:7px; padding:9px 10px; font-size:15px; font-weight:600}
.sm-prix{margin:0 0 18px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sm-prix b{font-size:30px; color:var(--vert-fonce)}
.sm-prix small{color:var(--doux); font-size:13.5px}
.sm-commande .sm-btn{width:100%; text-align:center}
.sm-autres{display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; font-size:14px}
.sm-autres a{text-decoration:none; border-bottom:1px solid currentColor}
.sm-annuler{color:var(--rouge) !important}
.sm-vide{max-width:620px; margin:60px auto; text-align:center}

@media (max-width:849px){
  .sm-deux{grid-template-columns:1fr; gap:22px}
}

/* ------------------------------------------------------- pages WooCommerce */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top:3px solid var(--bleu); background:var(--gris); padding:14px 18px;
  border-radius:0 0 8px 8px; list-style:none; margin:0 0 24px;
}
.woocommerce-error{border-top-color:var(--rouge)}
.woocommerce table.shop_table{border:1px solid var(--bord); border-radius:10px; border-collapse:separate; width:100%}
.woocommerce table.shop_table th{text-align:left; font-size:13px; color:var(--doux); text-transform:uppercase; letter-spacing:.03em; padding:12px 14px; border-bottom:1px solid var(--bord)}
.woocommerce table.shop_table td{padding:14px; border-bottom:1px solid var(--bord); vertical-align:middle}
.woocommerce table.shop_table img{width:86px; border-radius:6px}
.woocommerce .quantity input{width:70px; padding:8px; border:1px solid var(--bord); border-radius:6px}
.woocommerce dl.variation{margin:6px 0 0; font-size:13px; color:var(--doux)}
.woocommerce dl.variation dt{float:left; clear:left; margin-right:6px; font-weight:600}
.woocommerce dl.variation dd{margin:0 0 2px}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button,
.woocommerce #respond input#submit{
  background:var(--bleu); color:#fff; border:0; border-radius:8px; padding:12px 22px;
  font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block;
}
.woocommerce .button:hover,.woocommerce a.button:hover{background:var(--bleu-fonce); color:#fff}
.woocommerce .checkout-button,.woocommerce #place_order{background:var(--vert); width:100%; text-align:center; font-size:17px; padding:15px 24px}
.woocommerce .checkout-button:hover,.woocommerce #place_order:hover{background:var(--vert-fonce)}
.woocommerce .cart-collaterals{margin-top:30px; max-width:430px; margin-left:auto}
.woocommerce .cart_totals h2{margin-top:0}
.woocommerce form .form-row{margin:0 0 16px; display:flex; flex-direction:column}
.woocommerce form .form-row label{font-size:13.5px; font-weight:600; margin-bottom:5px; color:var(--doux)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:1px solid var(--bord); border-radius:8px; padding:11px 12px; font-size:15px; width:100%; min-height:46px;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--rouge)}
.woocommerce-checkout #customer_details{display:grid; grid-template-columns:1fr 1fr; gap:30px}
#order_review_heading{margin-top:34px}
.woocommerce-checkout-review-order{background:var(--gris); border-radius:12px; padding:22px}
.woocommerce-checkout-review-order table{background:#fff}
#payment ul.payment_methods{list-style:none; margin:0 0 18px; padding:0}
#payment ul.payment_methods li{background:#fff; border:1px solid var(--bord); border-radius:8px; padding:13px 15px; margin-bottom:9px}
#payment .payment_box{background:var(--gris); border-radius:8px; padding:12px 14px; font-size:14px; margin-top:10px}
.woocommerce-thankyou-order-received{font-size:22px; font-weight:700; color:var(--vert-fonce); margin-bottom:22px}
.woocommerce ul.order_details{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:14px; margin:0 0 30px}
.woocommerce ul.order_details li{background:var(--gris); border-radius:9px; padding:12px 16px; font-size:13px; color:var(--doux)}
.woocommerce ul.order_details li strong{display:block; font-size:16px; color:var(--encre)}
@media (max-width:767px){
  .woocommerce-checkout #customer_details{grid-template-columns:1fr; gap:0}
  .woocommerce table.shop_table img{width:60px}
}

/* ------------------------------------------------------------------- pied */
.sm-pied{background:var(--gris); border-top:1px solid var(--bord); padding:26px 20px; font-size:14px; color:var(--doux)}
.sm-pied .sm-inner{max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between}
.sm-pied a{color:var(--doux); text-decoration:none; border-bottom:1px solid var(--bord)}
.sm-pied a:hover{color:var(--encre)}
.sm-pied nav{display:flex; flex-wrap:wrap; gap:16px}

/* la quantité d'une ligne de panier est figée : c'est le projet qui porte le nombre */
.sm-qte-figee{display:inline-block;background:var(--gris);border-radius:6px;padding:7px 12px;font-size:13.5px;font-weight:600;color:var(--doux)}
.woocommerce .cart-collaterals{max-width:none;margin-left:0}
.woocommerce .cart-collaterals .cart_totals{max-width:430px;margin-left:auto}
.woocommerce .shop_table.cart td.product-name dl.variation dt{font-weight:600;color:var(--doux)}

/* ------------------------------------------------- reprises sur WooCommerce
   woocommerce-layout.css positionne en FLOTTANTS et ses boutons « .alt » sont
   plus spécifiques que les nôtres : il faut les viser nommément. */
.woocommerce-checkout #customer_details{float:none; width:auto}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{float:none; width:auto; max-width:none}
.woocommerce .col2-set,.woocommerce-page .col2-set{width:auto}

.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,.woocommerce .checkout-button.button.alt,
.woocommerce #place_order{background-color:var(--vert); color:#fff; border:0}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,.woocommerce #place_order:hover{background-color:var(--vert-fonce); color:#fff}
.woocommerce .checkout-button.button.alt{width:100%; text-align:center; font-size:17px; padding:15px 24px}

/* le pied de page n'est pas une liste à puces */
.sm-pied nav ul,.sm-pied nav li{list-style:none; margin:0; padding:0; display:inline}
.sm-pied nav li + li::before{content:"·"; margin:0 10px; color:var(--bord)}

/* la vignette de la maquette, dans le panier */
.woocommerce table.shop_table td.product-thumbnail img{width:92px; background:#fff; border:1px solid var(--bord); padding:4px}

/* PIÈGE : .col2-set::before et ::after servent de dégagement aux flottants de
   WooCommerce. En display:grid ils deviennent des CELLULES et décalent tout
   d'un cran — la facturation se retrouvait dans la colonne de droite. */
.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after{content:none; display:none}

/* ---- voir le sticker en grand ---- */
.sm-apercu img{cursor:zoom-in}
.sm-loupe-aide{margin-top:8px;font-size:12px;color:var(--doux)}
.sm-loupe{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(16,20,24,.88);padding:28px}
.sm-loupe[hidden]{display:none!important}
/* `max-width` seul laisserait l'apercu a sa taille naturelle (souvent 486 px) :
   « voir en grand » doit AGRANDIR. On impose donc une largeur. Le troisieme
   terme (107,5vh = 86vh x 1,25) garantit que la hauteur ne deborde jamais :
   1,25 est le rapport le plus carre qu'un sticker puisse avoir, la zone utile
   etant de 10 x 8 cm. Au-dela, l'image est plus large, donc plus plate. */
.sm-loupe img{width:min(1100px,94vw,107.5vh);height:auto;background:#fff;border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.sm-loupe-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.sm-loupe-x:hover{background:rgba(255,255,255,.26)}
.sm-loupe-pied{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#cfd4da;font-size:13px}
@media (max-width:700px){ .sm-loupe{padding:12px} .sm-loupe img{max-height:78vh} }