/*
Theme Name: Blocksy Enfant
Description: Thème enfant de Blocksy. Personnalisations Togi Toki (styles du configurateur, panier et articles).
Author: VCTZ
Template: blocksy
Version: 1.0
*/

/* =============================================================================
   TOGI TOKI — Feuille de style du thème enfant
   -----------------------------------------------------------------------------
   SOMMAIRE
     1. Variables globales (:root)
     2. Flèche « scroll down » (haut des articles)
     3. Fiche produit — grille des formules (cartes)
     4. Fiche produit — finitions (lignes + select quantité)
     5. Fiche produit — bande de réassurance (FR)
     6. Fiche produit — note douane + process 4 étapes (EN)
     7. Fiche produit — récapitulatif TOTAL (PPOM)
     8. Fiche produit — bouton + quantité WooCommerce
     9. Panier / checkout / mini-panier
   -----------------------------------------------------------------------------
   Palette de marque : rouge #972c2e · crème #f9f8f7 · encre #1d1d1d
   Typo : Rubik (titres / montants) · Poppins (corps)
   ============================================================================= */


/* 1. VARIABLES GLOBALES ===================================================== */
:root{
  --tt-red:#972c2e;          /* rouge de marque : accents, sélection, badges */
  --tt-ink:#1d1d1d;          /* texte courant */
  --tt-title:#1d1d1d;        /* titres (même valeur que l'encre pour l'instant) */
  --tt-sub:#1d1d1d;          /* sous-titres / texte secondaire */
  --tt-muted:#555;           /* gris atténué (options dans le panier) */
  --tt-card:#fff;            /* fond des cartes */
  --tt-border:#efeaea;       /* bordures */
  --tt-icon-color:#1d1d1d;   /* couleur des pictos de réassurance */
  --tt-font-title:'Rubik', sans-serif;
  --tt-font-body:'Poppins', sans-serif;
  --tt-fin-ico-h:22px;       /* hauteur des pictos de finitions (largeur auto) */
}


/* 2. FLÈCHE « SCROLL DOWN » ================================================
   Icon Box Greenshift en haut des articles. Animation : descend en
   disparaissant, en boucle. Classe appliquée sur le bloc : .fleche-scroll
   ========================================================================= */
@keyframes fleche-descend-fade {
  0%   { transform: translateY(-10px); opacity: 0; }
  30%  { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(16px);  opacity: 0; }
}
.fleche-scroll svg,
.fleche-scroll i,
.fleche-scroll img {
  animation: fleche-descend-fade 1.8s ease-in-out infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .fleche-scroll svg,
  .fleche-scroll i,
  .fleche-scroll img {
    animation: none;
  }
}


/* 3. FICHE PRODUIT — GRILLE DES FORMULES (CARTES) ========================== */
.tt-formules-grid > .form-control-label{ display:none; }

/* ---------- Grille ---------- */
.tt-formules-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  max-width:1200px; margin:-24px auto 0; font-family:var(--tt-font-body);
}
@media (max-width:900px){ .tt-formules-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .tt-formules-grid{ grid-template-columns:1fr; } }

/* ---------- Carte ---------- */
.tt-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--tt-card); border:1px solid var(--tt-border);
  border-radius:10px; padding:18px 16px 16px; text-align:center;
  cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
}
.tt-card:hover{ border-color:var(--tt-red); }
.tt-card.tt-selected{ border-color:var(--tt-red); box-shadow:inset 0 0 0 1px var(--tt-red); }
.tt-card .form-check-label{ position:static; display:flex; flex-direction:column; flex:1; margin:0; cursor:pointer; }
.tt-card .form-check-label::after{ content:""; position:absolute; inset:0; z-index:1; cursor:pointer; }
.tt-card .ppom-input-option-label{ display:flex; flex-direction:column; flex:1; }
.tt-card input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.tt-card .tt-name{ font-family:var(--tt-font-title) !important; font-weight:600; font-size:18px; letter-spacing:.02em; color:var(--tt-title); }
.tt-card .tt-sub{
  font-family:var(--tt-font-title) !important; font-size:13px; color:var(--tt-sub); margin-top:4px;
  height:2.8em; line-height:1.3; display:flex; align-items:center; justify-content:center;
}
.tt-card .tt-price{ font-family:var(--tt-font-title) !important; font-weight:600; font-size:26px; color:var(--tt-title); margin:10px 0 4px; }
.tt-price::before{ content:""; display:block; width:28px; height:1px; background:var(--tt-red); margin:0 auto 10px; }

/* Prix à l'unité, sous le prix de la formule */
.tt-card .tt-price-unit{
  font-family:var(--tt-font-body); font-size:12px; color:var(--tt-sub);
  margin:0 0 12px; white-space:nowrap;
}

/* ---------- Bouton de la carte (Choisir / Sélectionnée) ---------- */
.tt-card::after{
  content:"Choisir"; display:block; width:100%; box-sizing:border-box; white-space:nowrap;
  font-family:var(--tt-font-body); padding:10px 6px; border-radius:6px; border:1px solid var(--tt-border);
  color:var(--tt-ink); font-size:12.5px; letter-spacing:0; text-align:center;
  overflow:hidden; transition:.15s ease; pointer-events:none;
}
.tt-card.tt-selected::after{ content:"Sélectionnée"; background:var(--tt-red); border-color:var(--tt-red); color:#fff; }

/* Libellés version EN */
html[lang^="en"] .tt-card::after { content: "Choose"; }
html[lang^="en"] .tt-card.tt-selected::after { content: "Selected"; }

/* ---------- Badge « Le plus choisi » (formule mise en avant) ---------- */
.tt-card .tt-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  z-index:2; pointer-events:none; white-space:nowrap;
  background:var(--tt-red); color:#fff;
  font-family:var(--tt-font-title) !important; font-weight:600;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
  box-shadow:0 2px 6px rgba(151,44,46,.25); /* = var(--tt-red) à 25 % */
}

/* ---------- Titre de section (Rubik forcé, sans trait) ---------- */
.tt-section-head{
  max-width:1200px; margin:30px auto 16px; padding:0;
  width:100%; align-self:stretch; text-align:left !important;
}
.tt-section-head .tt-section-title{
  font-family:var(--tt-font-title) !important; font-weight:600; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tt-title); margin:0; text-align:left !important;
}
.tt-section-head .tt-section-sub{ font-family:var(--tt-font-title) !important; font-size:13px; color:var(--tt-sub); margin:10px 0 0; text-align:left !important; }


/* 4. FICHE PRODUIT — FINITIONS (LIGNES + SELECT QUANTITÉ) ================== */
.tt-finitions-list{
  flex:1 1 100%;          /* remplit la ligne flex parente (.form-row) au lieu de se réduire au contenu */
  width:auto;
  max-width:1200px;
  margin-inline:5px;      /* compense la gouttière négative (-5px) de .form-row pour s'aligner sur le récap et les formules */
  box-sizing:border-box;
  display:flex; flex-direction:column; gap:12px;
  font-family:var(--tt-font-body);
}
.tt-row{
  position:relative; background:var(--tt-card); border:1px solid var(--tt-border);
  border-radius:10px; padding:10px 24px !important; box-sizing:border-box; transition:.15s ease; /* hauteur forcée, marges égales */
}
.tt-row:hover{ border-color:var(--tt-red); }
.tt-row.tt-selected{ border-color:var(--tt-red); box-shadow:inset 0 0 0 1px var(--tt-red); }
.tt-row .form-group{
  display:flex !important; align-items:center; gap:16px; margin:0 !important; flex-wrap:nowrap;
}
.tt-row .form-control-label{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  margin:0; font-weight:400; float:none !important;
}
.tt-row .tt-label{
  flex:1 1 auto; font-family:var(--tt-font-body); font-size:14px; color:var(--tt-ink); font-weight:500;
  line-height:1.35; padding-left:4px;
}
.tt-row .tt-row-unit{
  flex:0 0 auto; font-family:var(--tt-font-body); color:var(--tt-sub); font-size:13px; white-space:nowrap;
}

/* ---------- Pictos des finitions (réparation / nettoyage) ----------
   Illustration à gauche du libellé. Largeur auto d'après le ratio du SVG :
   régler la taille via --tt-fin-ico-h (dans :root) suffit.
   Les SVG vivent dans : wp-content/uploads/2026/07/ */
.tt-row[data-ico] .form-control-label::before{
  content:""; flex:0 0 auto;
  height:var(--tt-fin-ico-h,22px); width:auto;
  background:left center/contain no-repeat;
}
.tt-row[data-ico="reparation"] .form-control-label::before{
  aspect-ratio:1132 / 208;
  height:18px;                       /* plus allongé que « nettoyage » : hauteur réduite pour égaliser la largeur perçue */
  background-image:url('/wp-content/uploads/2026/07/reparation.svg');
}
.tt-row[data-ico="nettoyage"] .form-control-label::before{
  aspect-ratio:1167 / 267;
  background-image:url('/wp-content/uploads/2026/07/nettoyage.svg');
}
.tt-row select{
  flex:0 0 auto !important; width:210px !important; min-width:0 !important; max-width:210px !important;
  float:none !important; margin:0 4px 0 0 !important;
  box-sizing:border-box;
  padding:7px 30px 7px 12px; border:1px solid var(--tt-border); border-radius:6px; background:#fff;
  font-family:var(--tt-font-body); font-size:13px; color:var(--tt-ink); cursor:pointer;
}
.tt-row select:focus{ outline:none; border-color:var(--tt-red); }
.tt-row select option:disabled{ color:#bbb; }
@media (max-width:600px){
  .tt-row .form-group{ flex-wrap:wrap; }
  .tt-row select{ width:100% !important; max-width:100% !important; }
}


/* 5. FICHE PRODUIT — BANDE DE RÉASSURANCE (FR) ============================= */
.tt-reassurance{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  width:100%; max-width:1200px; margin:18px auto 0; padding:18px 14px; box-sizing:border-box;
  border:1px solid var(--tt-border); border-radius:10px;
  background:var(--tt-card); font-family:var(--tt-font-body);
}
@media (max-width:760px){ .tt-reassurance{ grid-template-columns:repeat(2,1fr); row-gap:18px; } }
@media (max-width:420px){ .tt-reassurance{ grid-template-columns:1fr; } }
.tt-reassur-item{ display:flex; align-items:center; gap:12px; padding:0 12px; border-right:1px solid var(--tt-border); }
.tt-reassur-item:last-child{ border-right:none; }
@media (max-width:760px){ .tt-reassur-item{ border-right:none; } }
.tt-reassur-item::before{
  content:""; flex:0 0 auto; width:30px; height:30px;
  background-color:var(--tt-icon-color);
  -webkit-mask:var(--ico-r) center/contain no-repeat;
  mask:var(--ico-r) center/contain no-repeat;
}
.tt-reassur-item[data-ico="livraison"]{ --ico-r:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M5%2014%20h20%20v18%20H5%20Z%22%2F%3E%20%3Cpath%20d%3D%22M25%2020%20h9%20l5%206%20v6%20h-14%20Z%22%2F%3E%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2236%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%2233%22%20cy%3D%2236%22%20r%3D%223%22%2F%3E%20%3Cpath%20d%3D%22M5%2036%20h7%20M18%2036%20h12%20M36%2036%20h3%22%2F%3E%20%3C%2Fsvg%3E"); }
.tt-reassur-item[data-ico="emballage"]{ --ico-r:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M24%208%20L40%2016%20V32%20L24%2040%20L8%2032%20V16%20Z%22%2F%3E%20%3Cpath%20d%3D%22M8%2016%20L24%2024%20L40%2016%22%2F%3E%20%3Cpath%20d%3D%22M24%2024%20V40%22%2F%3E%20%3Cpath%20d%3D%22M16%2012%20L32%2020%22%2F%3E%20%3C%2Fsvg%3E"); }
.tt-reassur-item[data-ico="affutage"]{ --ico-r:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%227%22%20y%3D%2230%22%20width%3D%2234%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M12%2027%20L34%2014%20L37%2017%20L15%2030%20Z%22%2F%3E%20%3Cpath%20d%3D%22M34%2014%20L37%2011%22%2F%3E%20%3C%2Fsvg%3E"); }
.tt-reassur-item[data-ico="delai"]{ --ico-r:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2225%22%20r%3D%2215%22%2F%3E%20%3Cpath%20d%3D%22M24%2017%20V25%20L30%2029%22%2F%3E%20%3Cpath%20d%3D%22M19%207%20h10%22%2F%3E%20%3Cpath%20d%3D%22M24%207%20V10%22%2F%3E%20%3C%2Fsvg%3E"); }
.tt-reassur-txt{
  font-family:var(--tt-font-body); font-size:13px; line-height:1.35; color:var(--tt-ink);
  text-wrap:balance; /* répartit les mots proprement entre les lignes, évite les orphelins */
}


/* 6. FICHE PRODUIT — NOTE DOUANE + PROCESS 4 ÉTAPES (EN) =================== */
/* Note douane sous les formules */
.tt-customs-note{
  width:100%; max-width:1200px; margin:14px auto 0; box-sizing:border-box;
  font-family:var(--tt-font-body); font-size:13px; line-height:1.4;
  color:var(--tt-sub); text-align:left;
}
/* Process 4 étapes (remplace la réassurance en EN) */
.tt-process{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  align-items:stretch;                 /* cartes de même hauteur par rangée */
  width:100%; max-width:1200px; margin:18px auto 0; box-sizing:border-box;
  font-family:var(--tt-font-body);
}
@media (min-width:960px){ .tt-process{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:520px){ .tt-process{ grid-template-columns:1fr; } }
.tt-process-step{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:18px 16px; box-sizing:border-box;
  background:var(--tt-card); border:1px solid var(--tt-border); border-radius:10px;
}
.tt-process-num{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--tt-font-title) !important; font-weight:600; font-size:13px;
  color:#fff; background:var(--tt-red);
}
.tt-process-body{ display:flex; flex-direction:column; min-width:0; }
.tt-process-title{
  font-family:var(--tt-font-title) !important; font-weight:600; font-size:14px;
  color:var(--tt-title); line-height:1.35; margin:0;
}
.tt-process-sub{
  font-family:var(--tt-font-body); font-size:12.5px; line-height:1.45;
  color:var(--tt-sub); margin-top:6px;
}
.tt-process-sub a{ color:var(--tt-red); text-decoration:underline; }


/* 7. FICHE PRODUIT — RÉCAPITULATIF TOTAL (PPOM) =========================== */
#ppom-price-container{
  width:100%; max-width:1200px; margin:24px auto 0; padding:18px 22px 8px; box-sizing:border-box;
  background:var(--tt-card); border:1px solid var(--tt-border); border-radius:10px;
  font-family:var(--tt-font-body);
}
#ppom-price-container table{ width:100%; border-collapse:collapse; }
#ppom-price-container th{ font-weight:400; text-align:left; padding:9px 0; vertical-align:middle; }
#ppom-price-container .ppom-price-item{ text-align:right; white-space:nowrap; color:var(--tt-ink); font-size:14px; }
#ppom-price-container .ppom-label-item{ color:var(--tt-ink); font-size:14px; }
.ppom-delete-option-table{ display:none !important; }
.ppom-option-total-price{ display:none; }
.tt-recap-name{ font-weight:500; }
.tt-recap-sub{ color:var(--tt-sub); font-size:13px; }
.tt-recap-formule .ppom-label-item,
.tt-recap-formule .ppom-price-item,
.tt-recap-formule .tt-recap-name{ font-weight:700; color:var(--tt-title); }
.ppom-total-without-fixed th{ border-top:1px solid var(--tt-border); padding-top:14px; padding-bottom:0; }
.ppom-total-without-fixed *{ font-family:var(--tt-font-title) !important; font-weight:700 !important; color:var(--tt-title); }
.ppom-total-without-fixed .ppom-label-item{ font-size:15px; text-transform:uppercase; letter-spacing:.03em; }
.ppom-total-without-fixed .ppom-price-item{ font-size:18px; }
.ppom-total-without-fixed .ppom-price-item::after{
  content:"TTC"; display:block; font-family:var(--tt-font-body) !important; font-size:11px; font-weight:400 !important; color:var(--tt-sub); letter-spacing:.05em;
}
/* Masque le span de prix d'option quand il est vide */
.ppom-option-label-price:empty{ display:none !important; }


/* 8. FICHE PRODUIT — BOUTON + QUANTITÉ WOOCOMMERCE ======================== */
/* Bouton « Confier mes lames » en gras */
.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button{ font-weight:700 !important; }
/* Quantité masquée (service vendu à l'unité) */
.single-product form.cart .quantity,
.woocommerce div.product form.cart .quantity{ display:none !important; }


/* 9. PANIER / CHECKOUT / MINI-PANIER ====================================== */
/* --- Titre du service mis en avant --- */
.woocommerce-cart-form .cart_item .product-name > a,
.woocommerce-checkout-review-order-table .cart_item .product-name{
  font-weight:700;
  font-size:1.05rem;
  color:var(--tt-red);
}
.woocommerce-mini-cart .mini_cart_item a:not(.remove){
  font-weight:700;
  color:var(--tt-red);
}
/* --- Options PPOM atténuées --- */
.woocommerce .cart_item .product-name .variation,
.woocommerce-checkout-review-order-table .cart_item .product-name .variation,
.woocommerce-mini-cart .variation{
  margin-top:0.4rem;
  font-size:0.85rem;
  line-height:1.45;
  color:var(--tt-muted);
}
.woocommerce .cart_item .product-name .variation dt,
.woocommerce-mini-cart .variation dt{
  font-weight:600;
  float:none;
  margin:0;
  color:var(--tt-muted);
}
.woocommerce .cart_item .product-name .variation dd,
.woocommerce-mini-cart .variation dd{
  margin:0 0 0.25rem;
  padding:0;
}
/* --- Colonne Quantité masquée (service à l'unité) --- */
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form thead .product-quantity{
  display:none;
}
/* --- Bouton « Mettre à jour le panier » masqué (spécificité renforcée) --- */
body.woocommerce-cart .woocommerce-cart-form button[name="update_cart"],
body.woocommerce-cart button[name="update_cart"],
.woocommerce-cart-form .actions button[name="update_cart"],
.woocommerce button[name="update_cart"][disabled],
.woocommerce button[name="update_cart"]{
  display:none !important;
}

/* --- Hero accueil : suppression du parallax sur mobile, image conservée --- */
@media (max-width: 689.98px) {
  .gspb_row.hero-home {
    background-attachment: scroll !important;
  }
}