/* ============================================================================ Takoori — Fiche produit codee, AUTONOME. Ne depend d'AUCUN CSS de la page Elementor (fiche-georgia.r16.css n'est plus charge ici, et la classe body.tk-fiche-georgia n'est plus ajoutee) : c'etait la cause des superpositions, des flashs bordeaux/Lato et des miniatures masquees (le CSS georgia cache .flex-control-nav car son JS construit ses propres miniatures dans un conteneur Elementor absent de ce template). Tout est scope sous .tk-coded-wrap. Tokens de marque via tk-tokens.css. ============================================================================ */ /* ---------- Layout ---------- */ /* Fond blanc plein : le body Astra est en creme #fbf5eb (ancienne charte), ce qui faisait apparaitre des bandes beiges de part et d'autre des que l'ecran depassait la largeur du contenu. On force le blanc, mais UNIQUEMENT sur les fiches en template code. */ body.tk-coded-page, body.tk-coded-page #page, body.tk-coded-page .site-content, body.tk-coded-page .ast-container { background: #fff !important; } /* Largeur : la fiche occupe l'espace disponible au lieu d'etre bridee a 1180px. */ .tk-coded-wrap { max-width: 1560px; margin: 0 auto; padding: 28px 32px 64px; font-family: var(--tk-body); color: var(--tk-ink); background: #fff; } .tk-coded-wrap .woocommerce-breadcrumb { font-size: 13px; color: var(--tk-ink-2); margin-bottom: 16px; } .tk-coded-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; } .tk-coded-grid > * { min-width: 0; } /* ---------- Galerie (100% maison, aucun flexslider/photoswipe) ---------- */ .tk-coded-gallery { max-width: 100%; } .tk-gal-main { position: relative; background: #fff; border: 1px solid var(--tk-line); border-radius: var(--tk-radius); overflow: hidden; } .tk-gal-main-img { width: 100%; height: auto; display: block; cursor: zoom-in; } .tk-gal-zoom { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff !important; color: var(--tk-ink-2) !important; border: 1px solid var(--tk-line) !important; border-radius: 50% !important; box-shadow: var(--tk-card-sh); cursor: pointer; padding: 0 !important; } .tk-gal-zoom:hover { color: var(--tk-accent-d) !important; border-color: var(--tk-accent) !important; } .tk-gal-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .tk-gal-thumb { width: 68px; height: 68px; padding: 0 !important; overflow: hidden; cursor: pointer; background: #fff !important; border: 2px solid var(--tk-line) !important; border-radius: var(--tk-radius-sm) !important; box-shadow: none !important; transition: border-color .15s, opacity .15s; opacity: .8; } .tk-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .tk-gal-thumb:hover { opacity: 1; border-color: var(--tk-accent) !important; } .tk-gal-thumb.active { opacity: 1; border-color: var(--tk-accent) !important; } /* Lightbox maison */ .tk-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } .tk-lightbox[hidden] { display: none; } .tk-lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--tk-radius); } .tk-lightbox-close { position: absolute; top: 18px; right: 22px; background: none !important; border: 0 !important; color: #fff !important; font-size: 34px !important; line-height: 1; cursor: pointer; padding: 0 !important; } /* ---------- Colonne resume ---------- */ .tk-coded-summary { display: flex; flex-direction: column; } .tk-coded-summary .tk-badge-revendeur { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; background: var(--tk-tint); color: var(--tk-accent-d); font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px; } .tk-coded-summary h1.product_title { font-family: var(--tk-display) !important; font-weight: 800; letter-spacing: -.3px; color: var(--tk-ink) !important; font-size: 27px; line-height: 1.2; margin: 0 0 12px; } .tk-coded-summary .tk-specs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .tk-coded-summary .tk-specs-pills span { border: 1px solid var(--tk-line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--tk-ink-2); background: #fff; } .tk-coded-summary .price, .tk-coded-summary .woocommerce-Price-amount { color: var(--tk-ink) !important; font-weight: 800; font-size: 22px; font-family: var(--tk-body) !important; } .tk-coded-summary .tk-price-alma-row { display: flex !important; align-items: center !important; gap: 16px; flex-wrap: wrap; } .tk-coded-summary .tk-price-alma-row .price { margin: 0 !important; } .tk-coded-summary .tk-price-alma-row .tk-alma-widget-wrap { flex: 1 1 auto; min-width: 200px; } /* BUGFIX 16/08 (signale Joffrey, "widget Alma casse", puis "pas propre, doit etre comme sur la preview") -- VRAIE CAUSE trouvee en inspectant le CSS reel du widget (wp-content/cache/min/3rd-party/cdn.jsdelivr.net-npm-@alma-widgets.../widgets.min.css) : Alma definit ses propres couleurs via des variables CSS dans son :root (--off-black:#1a1a1a, --alma-orange:#fa5022, --white:#fff, --dark-gray:#4a4a4a...), et son CSS module (._planButton_v4hon_29, ._active_v4hon_102._monochrome_v4hon_82) s'appuie dessus (ex : background:var(--off-black) pour le plan actif). Sur nos pages ces variables sont VIDES (confirme : getComputedStyle(document.documentElement) .getPropertyValue('--off-black') === '') -- le fichier qui les definit n'est pas correctement applique (meme famille de probleme que le rehebergement local qui a casse Stripe plus tot dans la session). Consequence : `background:var(--off-black)` devient invalide -> le navigateur ignore le raccourci `background` entier -> le `background-color` bordeaux d'Astra (regle globale button, aucun rapport avec Alma) redevient la seule declaration valide restante. 1er essai (imposer des couleurs maison tk-tint/tk-accent) REJETE par Joffrey : le widget doit retrouver son apparence NATIVE Alma (comme sur la preview), pas une palette inventee. FIX CORRECT : fournir les vraies valeurs natives Alma en variables CSS scopees au widget -- son propre CSS (deja charge, deja correct) les utilise alors normalement, sans aucune surcharge de couleur de notre part. Rendu attendu : plan actif en noir plein (theme "monochrome" natif Alma, PAS orange, PAS vert marque), plans inactifs en texte plat sans fond (design natif Alma, pas de pilule). */ .tk-coded-summary .tk-alma-widget-wrap { --off-black: #1a1a1a; --alma-orange: #fa5022; --white: #fff; --black: #000; --dark-gray: #4a4a4a; --light-gray: #dcdcdc; --off-white: #f9f9f9; --font-tiny: 10px; --font-x-small: 12px; --font-small: 14px; --font-base: 16px; } .tk-coded-summary .woocommerce-product-details__short-description { color: var(--tk-ink-2); margin: 16px 0; line-height: 1.6; } /* Bloc prix natif WooCommerce pres du bouton d'achat (.woocommerce-variation-price) : redondant depuis le 16/08, le prix du haut (sous le nom du produit) se met desormais a jour en place au changement de variante (JS found_variation dans le template) -- plus besoin d'un 2e affichage plus bas. */ .tk-coded-summary .woocommerce-variation-price { display: none !important; } /* ---------- Selecteurs de variante ---------- */ .tk-coded-summary table.variations { border: 0; width: 100%; margin: 0; } .tk-coded-summary table.variations th, .tk-coded-summary table.variations td { border: 0; padding: 6px 0; } /* BUGFIX 16/08 (signale Joffrey, tapis a plusieurs tailles) : th/td en vertical-align:middle fonctionnait tant que les pastilles tenaient sur 1 ligne -- des que .tk-pills passe sur 2 lignes (3 tailles sur mobile/tablette etroite), le "Taille" (natif WooCommerce, structure ) reste centre sur la hauteur totale de la ligne -> il derive visuellement vers le bas, ne s'aligne plus avec la 1ere rangee de boutons. Fix : le label doit toujours s'aligner au sommet de son contenu, jamais au centre. */ .tk-coded-summary table.variations th.label { vertical-align: top; padding-top: 9px; } .tk-coded-summary table.variations td.value { vertical-align: top; } /* WooCommerce ajoute la valeur choisie dans le
labelvaleur