/* ===================================================================== CARTOUCHE --------------------------------------------------------------------- Fichier : assets/css/theme.css (styles composants — thème enfant) Créateur : Dan Guimbert Version : 1.0 20260906 Modifications: - 1.0 20260906 : création. Styles de base au-dessus de theme.json : fond sombre garanti, texte blanc sur photo + voile, cartes, boutons, rythme de section, adaptations WooCommerce en thème sombre. Charte de référence : concept Rev 4. ===================================================================== Rappel : la palette et la typo viennent de theme.json (variables --wp--preset--color--* et --wp--preset--font-family--*). Ici on ne fait QUE des styles de composants / correctifs, jamais de nouvelle couleur en dur non déclarée. */ :root { --fsi-scrim: 6 10 15; /* teinte du voile posé sur les photos */ --fsi-radius: 14px; --fsi-transition: .16s ease; } /* --------------------------------------------------------------------- 0. Pont vers Blocksy — on redéfinit la palette et la typo du parent avec nos jetons theme.json. Cette feuille est chargée APRÈS Blocksy : la dernière définition d'une custom property gagne, donc tous les composants Blocksy héritent de la charte sombre sans passer par le Customizer. Convention de palette Blocksy : 1 = accent · 2 = accent survol · 3 = texte · 4 = titres 5 = bordures · 6 = surface secondaire · 7 = fond · 8 = cartes ------------------------------------------------------------------- */ :root { --theme-palette-color-1: var(--wp--preset--color--accent); --theme-palette-color-2: var(--wp--preset--color--accent-deep); --theme-palette-color-3: var(--wp--preset--color--ink-soft); --theme-palette-color-4: var(--wp--preset--color--ink); --theme-palette-color-5: var(--wp--preset--color--line); --theme-palette-color-6: var(--wp--preset--color--surface-2); --theme-palette-color-7: var(--wp--preset--color--ground); --theme-palette-color-8: var(--wp--preset--color--surface); --theme-text-color: var(--wp--preset--color--ink-soft); --theme-headings-color: var(--wp--preset--color--ink); --theme-link-initial-color: var(--wp--preset--color--accent); --theme-link-hover-color: var(--wp--preset--color--accent-deep); --theme-border-color: var(--wp--preset--color--line); --theme-selection-background-color: var(--wp--preset--color--accent); --theme-font-family: var(--wp--preset--font-family--body); --theme-headings-font-family: var(--wp--preset--font-family--display); /* Fonds des grandes zones de mise en page Blocksy */ --theme-content-boxed-container-bg: var(--wp--preset--color--ground); --theme-header-background-color: var(--wp--preset--color--ground); --theme-footer-background-color: var(--wp--preset--color--surface); } /* --------------------------------------------------------------------- 1. Fond sombre garanti (le thème est mono — pas de mode clair) ------------------------------------------------------------------- */ html { background: var(--wp--preset--color--ground); -webkit-text-size-adjust: 100%; } body { background: var(--wp--preset--color--ground) !important; color: var(--wp--preset--color--ink-soft); -webkit-font-smoothing: antialiased; } /* Typographie : on impose Barlow / Barlow Condensed par-dessus les réglages « System Default » de Blocksy (police déjà chargée par functions.php). */ body, button, input, select, textarea, .entry-content, .ct-container { font-family: var(--wp--preset--font-family--body) !important; } h1, h2, h3, h4, h5, h6, .entry-title, .ct-header .site-title, .woocommerce-loop-product__title, .wp-block-post-title { font-family: var(--wp--preset--font-family--display) !important; text-transform: uppercase; letter-spacing: 0.006em; } /* Conteneurs Blocksy qui repeignent un fond clair */ .ct-header, .site-header, [data-header] .ct-header-row, .ct-footer, #main-container, .ct-container, .entry-content { background-color: transparent; } .site-footer, .ct-footer { background-color: var(--wp--preset--color--surface); } /* En-tête : le logo (verrou) contient déjà le nom → on masque le titre de site texte redondant et la description. */ .site-branding .site-title-container, .site-branding .site-description { display: none; } .site-branding .site-logo-container img { max-height: 46px; width: auto; max-width: 220px; } /* Sur mobile, le verrou (icône + "FS INSTRUCTOR" + baseline, en un seul SVG) est trop large pour l'espace disponible et se fait rogner au lieu de rétrécir (le texte est dessiné dans le SVG, il ne peut pas se réarranger). On masque l'image et on affiche à la place le titre de site en texte HTML (« FS Instructor » seul, sans médaillon ni baseline) — du vrai texte se redimensionne toujours proprement, contrairement à un SVG figé. */ @media (max-width: 600px) { .site-branding .site-logo-container { display: none; } .site-branding .site-title-container { display: block; } .site-branding .site-title-container .site-title a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp--preset--color--ink); text-decoration: none; } } /* Pages vitrine : le contenu porte son propre

, pas de héros natif. */ body.fsi-custom-hero .hero-section { display: none; } /* Texte secondaire sur surface pleine (cartes, tableaux, pied de page) */ .fsi-muted, .entry-content .fsi-muted { color: var(--wp--preset--color--ink-soft); } /* --------------------------------------------------------------------- 2. Texte posé sur une photo : toujours blanc + ombre + voile (retour client Rev 3 : le gris/bleu sur image ne passait pas) ------------------------------------------------------------------- */ .fsi-on-image, .fsi-on-image :where(h1, h2, h3, h4, p, span, a) { color: #fff; } .fsi-on-image :where(h1, h2, h3) { text-shadow: 0 2px 24px rgb(var(--fsi-scrim) / .55); } .fsi-on-image p { color: #e4e9ef; text-shadow: 0 1px 12px rgb(var(--fsi-scrim) / .6); } /* Voile réutilisable à appliquer sur un conteneur d'image de fond */ .fsi-scrim-bottom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--fsi-scrim) / .12) 0%, rgb(var(--fsi-scrim) / .62) 48%, rgb(var(--fsi-scrim) / .95) 100%); pointer-events: none; } /* --------------------------------------------------------------------- 3. Cartes (produits, références, portes d'entrée de l'accueil) ------------------------------------------------------------------- */ .fsi-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line-soft); border-radius: var(--fsi-radius); overflow: hidden; transition: transform var(--fsi-transition), border-color var(--fsi-transition), box-shadow var(--fsi-transition); } .fsi-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); box-shadow: 0 18px 40px rgb(0 0 0 / .35); } /* --------------------------------------------------------------------- 4. Boutons : la pilule orange vient de theme.json ; ici l'animation et la variante "fantôme". ------------------------------------------------------------------- */ .wp-block-button__link { transition: transform var(--fsi-transition), background var(--fsi-transition), box-shadow var(--fsi-transition), color var(--fsi-transition); display: inline-flex; align-items: center; gap: .5em; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(255 122 26 / .30); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border-color: color-mix(in srgb, var(--wp--preset--color--ink) 32%, transparent); } .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); box-shadow: none; } /* --------------------------------------------------------------------- 5. Petits labels en capitales espacées (eyebrows) ------------------------------------------------------------------- */ .fsi-label { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--accent); } /* --------------------------------------------------------------------- 6. WooCommerce — adaptation au thème sombre ------------------------------------------------------------------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line-soft); border-radius: var(--fsi-radius); overflow: hidden; transition: transform var(--fsi-transition), border-color var(--fsi-transition); } .woocommerce ul.products li.product:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-weight: 600; } .woocommerce span.onsale { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); } /* Filets et fonds de blocs clairs par défaut de WooCommerce */ .woocommerce .woocommerce-tabs ul.tabs li, .woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce #reviews #comments ol.commentlist li .comment-text { border-color: var(--wp--preset--color--line); } /* --------------------------------------------------------------------- 6b. Composants de pages vitrine (blocs Gutenberg + classes fsi-*) ------------------------------------------------------------------- */ /* Rythme vertical des sections construites en blocs */ .fsi-section { padding-block: clamp(52px, 8vw, 104px); } .fsi-section > .wp-block-heading { margin-bottom: 1rem; } /* Héros pleine largeur — voile en dégradé (image visible en haut, texte lisible en bas) plutôt qu'un assombrissement uniforme. */ .wp-block-cover.fsi-hero .wp-block-cover__image-background { filter: brightness(1.05) contrast(1.03) saturate(1.03); } .wp-block-cover.fsi-hero > .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(180deg, rgb(var(--fsi-scrim) / .30) 0%, rgb(var(--fsi-scrim) / .15) 34%, rgb(var(--fsi-scrim) / .72) 78%, var(--wp--preset--color--ground) 100%), linear-gradient(90deg, rgb(var(--fsi-scrim) / .68) 0%, rgb(var(--fsi-scrim) / .28) 46%, transparent 80%) !important; } /* Idem pour les en-têtes de pages internes */ .wp-block-cover.fsi-phead > .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(180deg, rgb(var(--fsi-scrim) / .55) 0%, rgb(var(--fsi-scrim) / .68) 55%, var(--wp--preset--color--ground) 100%) !important; } .wp-block-cover.fsi-phead .wp-block-cover__image-background { filter: brightness(1.1) contrast(1.03); } .wp-block-cover.fsi-hero { align-items: flex-end; } .wp-block-cover.fsi-hero .wp-block-cover__inner-container { max-width: 1200px; margin-inline: auto; width: 100%; padding-inline: clamp(20px, 5vw, 60px); padding-bottom: clamp(40px, 6vw, 72px); } .wp-block-cover.fsi-hero .fsi-hero-title { font-size: clamp(2.5rem, 7vw, 5rem); max-width: 18ch; margin-block: 0.4em 0; } .fsi-lede { font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 56ch; color: #e4e9ef; } .wp-block-cover .fsi-lede, .wp-block-cover .fsi-hero-title { text-shadow: 0 2px 20px rgb(var(--fsi-scrim) / .5); } /* En-tête de page interne (cover court) */ .wp-block-cover.fsi-phead .wp-block-cover__inner-container, .wp-block-cover.fsi-feature .wp-block-cover__inner-container { max-width: 1200px; margin-inline: auto; width: 100%; padding-inline: clamp(20px, 5vw, 60px); } .wp-block-cover.fsi-phead h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); } /* Bande domaines */ .fsi-domains { padding-block: 16px; border-block: 1px solid var(--wp--preset--color--line-soft); } .fsi-domainstrip { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--ink); text-align: center; margin: 0; } .fsi-domainstrip strong { color: var(--wp--preset--color--ink-dim); font-weight: 600; letter-spacing: 0.16em; } /* Portes d'entrée de l'accueil : covers en grille 2 colonnes */ .fsi-doors { gap: 16px; margin-bottom: 16px; } .fsi-doors .wp-block-column { min-width: 260px; } .wp-block-cover.fsi-door { min-height: 300px; border-radius: var(--fsi-radius); overflow: hidden; border: 1px solid var(--wp--preset--color--line-soft); transition: transform var(--fsi-transition), border-color var(--fsi-transition); } .wp-block-cover.fsi-door:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); } .wp-block-cover.fsi-door .wp-block-cover__inner-container { padding: 22px; } .wp-block-cover.fsi-door h3 { font-size: 1.7rem; margin: 0.2em 0; } .wp-block-cover.fsi-door p { font-size: 0.92rem; color: #e4e9ef; } .wp-block-cover.fsi-door .wp-block-button__link { font-size: 0.82rem; padding: 8px 16px; background: transparent; border-color: rgb(255 255 255 / .4); color: #fff; } .wp-block-cover.fsi-door .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); } /* Grilles News / References / Capabilities / Flow */ .fsi-newsgrid .wp-block-post-template, .fsi-refgrid .wp-block-post-template { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; } @media (max-width: 900px) { .fsi-newsgrid .wp-block-post-template, .fsi-refgrid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .fsi-newsgrid .wp-block-post-template, .fsi-refgrid .wp-block-post-template { grid-template-columns: 1fr; } } .fsi-newsgrid li, .fsi-refgrid li { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line-soft); border-radius: var(--fsi-radius); overflow: hidden; padding-bottom: 16px; transition: transform var(--fsi-transition), border-color var(--fsi-transition); } .fsi-newsgrid li:hover, .fsi-refgrid li:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); } .fsi-newsgrid .wp-block-post-title, .fsi-refgrid .wp-block-post-title { padding: 0 16px; font-size: 1.12rem; } .fsi-newsgrid .wp-block-post-title a, .fsi-refgrid .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--ink); } .fsi-newsdate, .fsi-refgrid .wp-block-post-date { padding: 12px 16px 0; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; color: var(--wp--preset--color--accent); } .fsi-reftags { padding: 12px 16px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--ink-dim); } .fsi-refgrid .wp-block-post-excerpt { padding: 6px 16px 0; font-size: 0.86rem; color: var(--wp--preset--color--ink-soft); } .fsi-caps .wp-block-column, .fsi-flow .wp-block-column { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line-soft); border-radius: 12px; padding: 22px 20px; } /* Ligne "Domaine · Pays · Année" en tête d'une référence */ .fsi-ref-meta { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--wp--preset--color--accent); margin-bottom: 0.5rem; } .fsi-caps h3, .fsi-flow h3 { font-size: 1.2rem; } .fsi-caps p, .fsi-flow p { color: var(--wp--preset--color--ink-soft); font-size: 0.9rem; margin-top: 8px; } .fsi-flow h3 { color: var(--wp--preset--color--accent); } /* --------------------------------------------------------------------- 6b-bis. En-tête : hauteur réduite de 25% (120px -> 90px), sans toucher à la taille du logo (max-height: 46px, inchangé) ni du texte du menu. Blocksy fixe cette hauteur via un min-height sur les colonnes / le conteneur de la ligne du menu ; on l'écrase ici. ------------------------------------------------------------------- */ #header [data-row="middle"] .ct-container, #header [data-row="middle"], #header [data-row="middle"] [data-column], #header [data-row="middle"] [data-items] { min-height: 90px !important; height: auto !important; } /* --------------------------------------------------------------------- 6c. En-tête : éléments compte + panier ajoutés au menu ------------------------------------------------------------------- */ .fsi-menu-account .ct-menu-link, .fsi-menu-cart .fsi-cart-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wp--preset--color--ink); } .fsi-menu-account .ct-menu-link:hover, .fsi-menu-cart .fsi-cart-link:hover { color: var(--wp--preset--color--accent); } .fsi-cart-link { text-decoration: none; } .fsi-cart-count { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.78rem; line-height: 1; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .fsi-menu-cart { margin-left: 4px; } /* --------------------------------------------------------------------- 6d. Bouton WhatsApp flottant ------------------------------------------------------------------- */ .fsi-wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: inline-flex; align-items: center; gap: 9px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.9rem; padding: 11px 17px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 30px rgb(0 0 0 / .45); transition: background var(--fsi-transition), transform var(--fsi-transition); } .fsi-wa-fab:hover { background: var(--wp--preset--color--accent-deep); transform: translateY(-2px); } @media (max-width: 560px) { .fsi-wa-fab span { display: none; } .fsi-wa-fab { padding: 12px; } } /* --------------------------------------------------------------------- 6e. Pied de page personnalisé (footer.php du thème enfant) ------------------------------------------------------------------- */ .fsi-footer { background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink-soft); } .fsi-footer-inner { max-width: 1200px; margin-inline: auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 60px); display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } @media (max-width: 860px) { .fsi-footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .fsi-footer-inner { grid-template-columns: 1fr; } } .fsi-footer-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--wp--preset--color--ink); } .fsi-footer-logo span { display: flex; flex-direction: column; line-height: 1; } .fsi-footer-logo strong { font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 1.1rem; } .fsi-footer-logo em { font-style: normal; font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--ink-dim); margin-top: 3px; } .fsi-footer-about { margin-top: 14px; font-size: 0.92rem; max-width: 46ch; } .fsi-footer-col h2 { font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: 0.12em; font-size: 0.84rem; color: var(--wp--preset--color--ink-dim); text-transform: uppercase; } .fsi-footer-col ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .fsi-footer-col a { color: var(--wp--preset--color--ink-soft); text-decoration: none; font-size: 0.92rem; } .fsi-footer-col a:hover { color: var(--wp--preset--color--ink); } .fsi-footer-col a.fsi-footer-wa { color: var(--wp--preset--color--accent); } /* --------------------------------------------------------------------- 6f-bis. Bandeau de titre boutique (archive WooCommerce - héros Blocksy "type-2") - retour client : bien trop épais, à réduire au minimum. ------------------------------------------------------------------- */ .hero-section[data-type="type-2"] .entry-header { padding: 20px 0; min-height: 0; } .hero-section[data-type="type-2"] .page-title { font-size: 1.7rem; line-height: 1.15; margin: 0; } .hero-section[data-type="type-2"] .page-description { margin-top: 6px; } .hero-section[data-type="type-2"] .page-description p { margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--ink-soft); } /* --------------------------------------------------------------------- 6f. Boutique : fiche produit + boucle ------------------------------------------------------------------- */ .fsi-product-help { max-width: 1200px; margin: clamp(30px, 5vw, 56px) auto 0; padding-inline: clamp(20px, 5vw, 60px); } .fsi-product-help h2 { font-size: 1.5rem; margin-bottom: 12px; margin-top: 2rem; } .fsi-product-help h2:first-child { margin-top: 0; } .fsi-product-help p { color: var(--wp--preset--color--ink-soft); max-width: 62ch; margin-bottom: 10px; } .fsi-table-wrap { overflow-x: auto; border: 1px solid var(--wp--preset--color--line-soft); border-radius: 12px; } .fsi-lic-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .fsi-lic-table th, .fsi-lic-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--wp--preset--color--line-soft); } .fsi-lic-table thead th { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--wp--preset--color--ink-dim); border-bottom: 1px solid var(--wp--preset--color--line); } .fsi-lic-table tbody th { font-weight: 500; color: var(--wp--preset--color--ink); } .fsi-lic-table td.y { color: var(--wp--preset--color--accent); font-weight: 600; } .fsi-lic-table td.n { color: var(--wp--preset--color--ink-dim); } .fsi-lic-table tr:hover td, .fsi-lic-table tr:hover th { background: var(--wp--preset--color--surface-2); } /* Fiche produit : galerie réduite de 25% (47.8% -> 36% de large), l'espace gagné revient à la colonne de texte (47.8% -> 60%). Retour client : plus de place pour le texte à droite. */ .product-entry-wrapper .woocommerce-product-gallery { width: 36% !important; } .product-entry-wrapper .summary.entry-summary { width: 60% !important; } /* --------------------------------------------------------------------- 6f-ter. Liste des produits (boutique / archives catégorie) : mise en page en lignes plutôt qu'en grille de grandes vignettes. Retour client : les images (hétérogènes - logo, capture d'écran, photo…) étaient trop grosses. On les réduit à une petite vignette carrée et on donne la priorité au texte (nom, catégorie, prix, bouton). Volontairement scopé aux pages d'archive boutique, pas aux grilles de ventes croisées sous une fiche produit. ------------------------------------------------------------------- */ body.woocommerce-shop ul.products, body.tax-product_cat ul.products, body.post-type-archive-product ul.products { display: block !important; } body.woocommerce-shop ul.products li.product, body.tax-product_cat ul.products li.product, body.post-type-archive-product ul.products li.product { display: grid !important; grid-template-columns: 84px 1fr auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 20px; row-gap: 2px; width: 100% !important; max-width: none !important; margin: 0 0 14px !important; padding: 16px 22px; } body.woocommerce-shop ul.products li.product figure, body.tax-product_cat ul.products li.product figure, body.post-type-archive-product ul.products li.product figure { grid-column: 1; grid-row: 1 / span 2; margin: 0; } body.woocommerce-shop ul.products li.product figure img, body.tax-product_cat ul.products li.product figure img, body.post-type-archive-product ul.products li.product figure img { width: 84px !important; height: 84px !important; aspect-ratio: 1 / 1 !important; object-fit: cover; border-radius: 10px; } body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title, body.tax-product_cat ul.products li.product .woocommerce-loop-product__title, body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.1rem; } body.woocommerce-shop ul.products li.product .entry-meta, body.tax-product_cat ul.products li.product .entry-meta, body.post-type-archive-product ul.products li.product .entry-meta { grid-column: 2; grid-row: 2; margin: 0; list-style: none; padding: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--ink-dim); } body.woocommerce-shop ul.products li.product .entry-meta a, body.tax-product_cat ul.products li.product .entry-meta a, body.post-type-archive-product ul.products li.product .entry-meta a { color: inherit; text-decoration: none; } body.woocommerce-shop ul.products li.product .price, body.tax-product_cat ul.products li.product .price, body.post-type-archive-product ul.products li.product .price { grid-column: 3; grid-row: 1 / span 2; margin: 0; text-align: right; white-space: nowrap; } body.woocommerce-shop ul.products li.product .ct-woo-card-actions, body.tax-product_cat ul.products li.product .ct-woo-card-actions, body.post-type-archive-product ul.products li.product .ct-woo-card-actions { grid-column: 4; grid-row: 1 / span 2; } @media (max-width: 640px) { body.woocommerce-shop ul.products li.product, body.tax-product_cat ul.products li.product, body.post-type-archive-product ul.products li.product { grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; row-gap: 6px; } body.woocommerce-shop ul.products li.product figure img, body.tax-product_cat ul.products li.product figure img, body.post-type-archive-product ul.products li.product figure img { width: 64px !important; height: 64px !important; } body.woocommerce-shop ul.products li.product .price, body.tax-product_cat ul.products li.product .price, body.post-type-archive-product ul.products li.product .price { grid-column: 2; grid-row: 3; text-align: left; } body.woocommerce-shop ul.products li.product .ct-woo-card-actions, body.tax-product_cat ul.products li.product .ct-woo-card-actions, body.post-type-archive-product ul.products li.product .ct-woo-card-actions { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; } } /* WooCommerce : titres, prix, boutons, onglets en thème sombre */ .woocommerce div.product .product_title, .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--wp--preset--color--ink); } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); border-radius: 999px; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover { background: var(--wp--preset--color--accent-deep); } .woocommerce .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li { border-color: var(--wp--preset--color--line); background: transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--wp--preset--color--surface); border-bottom-color: var(--wp--preset--color--surface); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--wp--preset--color--ink-soft); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--ink); } .woocommerce .quantity .qty, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .select2-container--default .select2-selection--single { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); border-radius: 6px; } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { background: var(--wp--preset--color--surface-2); border-top-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink-soft); } .woocommerce-breadcrumb { color: var(--wp--preset--color--ink-dim); } .woocommerce-breadcrumb a { color: var(--wp--preset--color--ink-soft); } /* --------------------------------------------------------------------- 7. Confort de lecture / accessibilité ------------------------------------------------------------------- */ :where(a):focus-visible, :where(button):focus-visible, :where(input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation: none !important; } }