/* ============================================================================= INSTALL COMMUNICATION 33 BOUTIQUE — CATÉGORIES category-card.css VERSION PROPRE — P1 / 3 IMPORTANT : - aucun fond gris / bleu autour des catégories - aucune largeur maximale - aucune ancienne règle conservée - grille centrée - titre conservé ============================================================================= */ /* ============================================================================= 01 — VARIABLES ============================================================================= */ :root { --ic33-cat-navy: #071b30; --ic33-cat-orange: #ff6a00; --ic33-cat-radius: 14px; --ic33-cat-gap-x: 16px; --ic33-cat-gap-y: 12px; } /* ============================================================================= 02 — BOX SIZING LOCAL ============================================================================= */ .ic33-category-grid, .ic33-category-grid *, .ic33-category-grid *::before, .ic33-category-grid *::after { box-sizing: border-box !important; } /* ============================================================================= 03 — NEUTRALISATION DE LA ZONE BOUTIQUE Le rectangle gris visible sur ta capture peut être appliqué à un parent de notre section et pas à .ic33-category-grid. On neutralise donc les wrappers Storefront/WooCommerce SUR LA PAGE BOUTIQUE. ============================================================================= */ body.woocommerce-shop #primary, body.woocommerce-shop #main, body.woocommerce-shop .site-main, body.woocommerce-shop .content-area, body.woocommerce-shop .site-content, body.woocommerce-shop .site-content > .col-full, body.woocommerce-shop .woocommerce, body.woocommerce-shop .woocommerce-products-header { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ============================================================================= 04 — SUPPRESSION DES PSEUDO-FONDS DES WRAPPERS ============================================================================= */ body.woocommerce-shop #primary::before, body.woocommerce-shop #primary::after, body.woocommerce-shop #main::before, body.woocommerce-shop #main::after, body.woocommerce-shop .site-main::before, body.woocommerce-shop .site-main::after, body.woocommerce-shop .content-area::before, body.woocommerce-shop .content-area::after, body.woocommerce-shop .woocommerce::before, body.woocommerce-shop .woocommerce::after { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ============================================================================= 05 — SECTION CATÉGORIES La section elle-même n'a AUCUN fond. ============================================================================= */ .ic33-category-grid { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 22px 10px !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } /* ============================================================================= 06 — SUPPRESSION DES PSEUDO-ÉLÉMENTS DE LA SECTION ============================================================================= */ .ic33-category-grid::before, .ic33-category-grid::after { content: none !important; display: none !important; background: none !important; } /* ============================================================================= 07 — CONTAINER AUCUN : - width 91% - max-width 1950px - background ============================================================================= */ .ic33-category-grid__container { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; transform: none !important; } /* ============================================================================= 08 — AUCUN PSEUDO-ÉLÉMENT SUR LE CONTAINER ============================================================================= */ .ic33-category-grid__container::before, .ic33-category-grid__container::after { content: none !important; display: none !important; } /* ============================================================================= 09 — HEADER CATÉGORIES ============================================================================= */ .ic33-category-grid__header { position: relative !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; max-width: none !important; margin: 0 0 9px !important; padding: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; text-align: center; } /* ============================================================================= 10 — EYEBROW "NOTRE BOUTIQUE" ============================================================================= */ .ic33-category-grid__eyebrow { display: block !important; margin: 0 0 3px !important; padding: 0 !important; color: var(--ic33-cat-orange) !important; font-family: Arial, Helvetica, sans-serif; font-size: 9px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.42em !important; text-transform: uppercase; background: none !important; } /* ============================================================================= 11 — LIGNE DU TITRE ============================================================================= */ .ic33-category-grid__heading { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 17px !important; margin: 0 !important; padding: 0 !important; background: none !important; } /* ============================================================================= 12 — TRAITS ORANGE LATÉRAUX ============================================================================= */ .ic33-category-grid__heading-line { display: block !important; flex: 0 0 50px; width: 50px !important; height: 2px !important; margin: 0 !important; padding: 0 !important; background: var(--ic33-cat-orange) !important; border-radius: 999px; } /* ============================================================================= 13 — TITRE CATÉGORIES ============================================================================= */ .ic33-category-grid__title { display: block !important; margin: 0 !important; padding: 0 !important; color: var(--ic33-cat-navy) !important; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-size: clamp( 38px, 2.45vw, 48px ) !important; font-weight: 900 !important; line-height: 0.95 !important; letter-spacing: -0.045em !important; text-align: center !important; text-transform: uppercase; white-space: nowrap; background: none !important; } /* ============================================================================= 14 — PETIT TRAIT ORANGE SOUS CATÉGORIES ============================================================================= */ .ic33-category-grid__accent { display: block !important; width: 46px !important; height: 3px !important; margin: 6px auto 0 !important; padding: 0 !important; background: var(--ic33-cat-orange) !important; border-radius: 999px; } /* ============================================================================= 15 — GRILLE Pleine largeur. Les 22px de chaque côté de .ic33-category-grid sont désormais pratiquement les seules marges latérales de la section. ============================================================================= */ .ic33-shop-categories { position: relative !important; display: grid !important; width: 100% !important; max-width: none !important; /* * On conserve une hauteur proche de celle validée. */ height: calc(100vh - 250px) !important; min-height: 530px !important; max-height: none !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--ic33-cat-gap-x) !important; row-gap: var(--ic33-cat-gap-y) !important; align-items: stretch !important; justify-items: stretch !important; margin: 0 !important; padding: 0 !important; list-style: none !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; transform: none !important; } /* ============================================================================= 16 — PSEUDO-ÉLÉMENTS GRILLE ============================================================================= */ .ic33-shop-categories::before, .ic33-shop-categories::after { content: none !important; display: none !important; background: none !important; } /* ============================================================================= 17 — RESET DES ITEMS WOOCOMMERCE Empêche Storefront de remettre : - float - largeur - marges ============================================================================= */ .ic33-shop-categories > *, .ic33-shop-categories > li, .ic33-shop-categories li.product, .ic33-shop-categories li.product-category, .ic33-shop-categories .product, .ic33-shop-categories .product-category { position: relative !important; float: none !important; clear: none !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ============================================================================= 18 — CARTE ============================================================================= */ .ic33-category-card { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; /* * ATTENTION : * on ne met PLUS le gros fond bleu foncé de la version précédente. */ background: #000000 !important; border: 0 !important; border-radius: var(--ic33-cat-radius) !important; box-shadow: 0 7px 20px rgba(7, 27, 48, 0.10) !important; } /* ============================================================================= 19 — LIEN ============================================================================= */ .ic33-category-card__link { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: inherit !important; text-decoration: none !important; background: none !important; border-radius: inherit !important; } /* ============================================================================= FIN P1 / 3 P2 corrigera spécifiquement le problème visible sur ta capture : AVANT : object-fit: contain → bandes bleu/noir énormes au-dessus des photos. P2 : - retour à une image qui remplit réellement la carte - cadrage beaucoup moins agressif - texte plus gros - texte vraiment collé au bas - dégradé beaucoup plus discret ============================================================================= */ /* ============================================================================= INSTALL COMMUNICATION 33 BOUTIQUE — CATÉGORIES category-card.css VERSION PROPRE — P2 / 3 - image sur toute la carte - suppression des bandes noires / bleu foncé - texte regroupé tout en bas - titre plus gros - description plus grosse - dégradé uniquement dans le bas ============================================================================= */ /* ============================================================================= 20 — ZONE IMAGE ============================================================================= */ .ic33-category-card__media { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: 0 !important; border-radius: inherit !important; } /* ============================================================================= 21 — IMAGE IMPORTANT : On abandonne "contain" qui créait les grosses bandes sombres. "cover" permet à la photo de remplir toute la carte. Comme les cartes ont maintenant un ratio proche des images, le rognage doit rester limité. ============================================================================= */ .ic33-category-card__image { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; } /* ============================================================================= 22 — SURCHARGE STOREFRONT / WOOCOMMERCE On augmente volontairement la spécificité pour empêcher Storefront de modifier la taille des images. ============================================================================= */ .ic33-category-grid .ic33-category-card img.ic33-category-card__image, .ic33-shop-categories .ic33-category-card img.ic33-category-card__image { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; background: transparent !important; border: 0 !important; transform: none !important; } /* ============================================================================= 23 — AUCUN ZOOM IMAGE AU SURVOL ============================================================================= */ .ic33-category-card:hover .ic33-category-card__image { transform: none !important; } /* ============================================================================= 24 — PLACEHOLDER SI UNE IMAGE MANQUE ============================================================================= */ .ic33-category-card__placeholder { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 20px !important; background: #071b30 !important; color: #ffffff !important; font-size: 13px !important; text-align: center !important; } /* ============================================================================= 25 — OVERLAY Très important : On ne fonce PLUS toute la photo. Les 60 premiers % sont pratiquement intacts. Le dégradé commence réellement seulement dans le bas. ============================================================================= */ .ic33-category-card__overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; background: linear-gradient( to bottom, rgba(2, 12, 22, 0.00) 0%, rgba(2, 12, 22, 0.00) 55%, rgba(2, 12, 22, 0.02) 62%, rgba(2, 12, 22, 0.08) 69%, rgba(2, 12, 22, 0.20) 76%, rgba(2, 12, 22, 0.42) 84%, rgba(2, 12, 22, 0.70) 92%, rgba(2, 12, 22, 0.90) 100% ) !important; } /* ============================================================================= 26 — CONTENU C'est ici qu'on règle définitivement le problème du texte. Le bloc : TITRE TRAIT DESCRIPTION est positionné AU BAS de la carte. Il n'occupe pas toute la hauteur. ============================================================================= */ .ic33-category-card__content { position: absolute !important; top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 3 !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; /* * Très peu de padding en bas : * le contenu descend réellement dans la carte. */ padding: 38px 24px 14px !important; color: #ffffff !important; pointer-events: none !important; /* * Petit dégradé LOCAL derrière le texte. * Pas de gros rectangle noir. */ background: linear-gradient( to bottom, rgba(2, 12, 22, 0.00) 0%, rgba(2, 12, 22, 0.08) 20%, rgba(2, 12, 22, 0.30) 45%, rgba(2, 12, 22, 0.65) 72%, rgba(2, 12, 22, 0.90) 100% ) !important; border: 0 !important; transform: none !important; } /* ============================================================================= 27 — TITRE DES CARTES Plus gros que sur ta capture actuelle. ============================================================================= */ .ic33-category-card__title { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif !important; font-size: clamp( 21px, 1.18vw, 28px ) !important; font-weight: 900 !important; line-height: 1.02 !important; letter-spacing: -0.025em !important; text-align: left !important; text-transform: uppercase !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95) !important; } /* ============================================================================= 28 — TRAIT ORANGE DANS LA CARTE ============================================================================= */ .ic33-category-card__accent { display: block !important; width: 48px !important; height: 3px !important; margin: 6px 0 6px !important; padding: 0 !important; background: var(--ic33-cat-orange) !important; border: 0 !important; border-radius: 999px !important; transition: width 0.25s ease; } /* ============================================================================= 29 — TRAIT AU SURVOL ============================================================================= */ @media (hover: hover) { .ic33-category-card:hover .ic33-category-card__accent { width: 58px !important; } } /* ============================================================================= 30 — DESCRIPTION Plus grosse et plus lisible. Maximum 2 lignes. ============================================================================= */ .ic33-category-card__description { display: -webkit-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: rgba(255, 255, 255, 0.96) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: clamp( 13px, 0.68vw, 15px ) !important; font-weight: 400 !important; line-height: 1.22 !important; letter-spacing: 0 !important; text-align: left !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } /* ============================================================================= 31 — SUPPRESSION DES MARGES WORDPRESS Sinon Storefront peut ajouter des marges sur h2/h3/p, ce qui ré-écarte le titre et la description. ============================================================================= */ .ic33-category-card__content h1, .ic33-category-card__content h2, .ic33-category-card__content h3, .ic33-category-card__content h4, .ic33-category-card__content h5, .ic33-category-card__content h6, .ic33-category-card__content p { margin: 0 !important; padding: 0 !important; } /* ============================================================================= 32 — ENFANTS DU CONTENU Neutralise toute ancienne règle flex/grid. ============================================================================= */ .ic33-category-card__content > * { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; flex: none !important; } /* ============================================================================= 33 — ÉLÉMENTS INUTILES ÉVENTUELS ============================================================================= */ .ic33-category-card__footer, .ic33-category-card__meta, .ic33-category-card__count, .ic33-category-card__cta, .ic33-category-card__icon { display: none !important; } /* ============================================================================= 34 — GRAND ÉCRAN 32" On grossit encore légèrement le texte. ============================================================================= */ @media (min-width: 1600px) { .ic33-category-card__content { padding: 42px 27px 15px !important; } .ic33-category-card__title { font-size: clamp( 23px, 1.20vw, 29px ) !important; } .ic33-category-card__accent { width: 50px !important; margin: 6px 0 6px !important; } .ic33-category-card__description { font-size: clamp( 14px, 0.70vw, 16px ) !important; line-height: 1.20 !important; } } /* ============================================================================= 35 — TRÈS GRAND ÉCRAN ============================================================================= */ @media (min-width: 2000px) { .ic33-category-card__content { padding: 45px 30px 16px !important; } .ic33-category-card__title { font-size: 30px !important; } .ic33-category-card__description { font-size: 16px !important; } } /* ============================================================================= 36 — HOVER CARTE Léger mouvement de la CARTE uniquement. L'image ne zoome pas. ============================================================================= */ @media (hover: hover) { .ic33-category-card { transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .ic33-category-card:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(7, 27, 48, 0.15) !important; } } /* ============================================================================= 37 — ACCESSIBILITÉ ============================================================================= */ .ic33-category-card__link:focus { outline: none !important; } .ic33-category-card__link:focus-visible { outline: 3px solid var(--ic33-cat-orange) !important; outline-offset: -3px !important; } /* ============================================================================= 38 — RÉDUCTION DES ANIMATIONS ============================================================================= */ @media (prefers-reduced-motion: reduce) { .ic33-category-card, .ic33-category-card__image, .ic33-category-card__accent { transition: none !important; } } /* ============================================================================= FIN P2 / 3 P3 va terminer avec : - réglage précis écran 32" - hauteur des deux rangées - largeur presque totale - responsive - dernière sécurité contre LE FOND GRIS/BLEU - neutralisation des wrappers parents qui pourraient encore le générer ============================================================================= */ /* ============================================================================= INSTALL COMMUNICATION 33 BOUTIQUE — CATÉGORIES category-card.css VERSION PROPRE — P3 / 3 - optimisation écran 32" - 3 colonnes × 2 lignes - largeur maximale disponible - hauteur adaptée à l'écran - responsive - suppression finale des fonds parasites ============================================================================= */ /* ============================================================================= 39 — GRAND ÉCRAN / 32" ============================================================================= */ @media (min-width: 1600px) { .ic33-category-grid { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 26px 10px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; } .ic33-category-grid__container { width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; } .ic33-category-grid__header { margin: 0 0 9px !important; } .ic33-category-grid__title { font-size: 46px !important; } .ic33-shop-categories { width: 100% !important; max-width: none !important; /* * Hauteur des SIX cartes. * * Suffisamment grande pour occuper l'écran, * mais suffisamment courte pour conserver * entièrement la deuxième ligne. */ height: calc(100vh - 245px) !important; min-height: 525px !important; max-height: none !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px !important; row-gap: 12px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } } /* ============================================================================= 40 — TRÈS GRAND ÉCRAN ============================================================================= */ @media (min-width: 2000px) { .ic33-category-grid { padding-left: 30px !important; padding-right: 30px !important; } .ic33-shop-categories { height: calc(100vh - 250px) !important; column-gap: 18px !important; row-gap: 13px !important; } } /* ============================================================================= 41 — GRAND ÉCRAN MAIS FAIBLE HAUTEUR Utile notamment si ton navigateur n'est pas totalement maximisé. ============================================================================= */ @media (min-width: 1600px) and (max-height: 850px) { .ic33-category-grid { padding-top: 5px !important; padding-bottom: 6px !important; } .ic33-category-grid__header { margin-bottom: 6px !important; } .ic33-category-grid__eyebrow { font-size: 8px !important; margin-bottom: 2px !important; } .ic33-category-grid__title { font-size: 39px !important; } .ic33-category-grid__heading-line { width: 44px !important; flex-basis: 44px !important; } .ic33-category-grid__accent { width: 42px !important; margin-top: 4px !important; } .ic33-shop-categories { height: calc(100vh - 205px) !important; min-height: 460px !important; row-gap: 10px !important; } .ic33-category-card__content { padding: 35px 22px 12px !important; } .ic33-category-card__title { font-size: 20px !important; } .ic33-category-card__description { font-size: 12px !important; } } /* ============================================================================= 42 — DESKTOP STANDARD 1200px → 1599px ============================================================================= */ @media (min-width: 1200px) and (max-width: 1599px) { .ic33-category-grid { width: 100% !important; padding: 8px 20px 10px !important; background: transparent !important; } .ic33-category-grid__container { width: 100% !important; max-width: none !important; } .ic33-category-grid__title { font-size: 40px !important; } .ic33-category-grid__heading { gap: 15px !important; } .ic33-category-grid__heading-line { width: 44px !important; flex-basis: 44px !important; } .ic33-shop-categories { width: 100% !important; max-width: none !important; height: calc(100vh - 225px) !important; min-height: 500px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; column-gap: 14px !important; row-gap: 11px !important; background: transparent !important; } .ic33-category-card__content { padding: 34px 20px 12px !important; } .ic33-category-card__title { font-size: 19px !important; } .ic33-category-card__description { font-size: 12px !important; } } /* ============================================================================= 43 — TABLETTE PAYSAGE ============================================================================= */ @media (min-width: 800px) and (max-width: 1199px) { .ic33-category-grid { width: 100% !important; padding: 14px 14px 20px !important; background: transparent !important; } .ic33-category-grid__container { width: 100% !important; max-width: none !important; } .ic33-category-grid__title { font-size: 36px !important; } .ic33-shop-categories { width: 100% !important; height: auto !important; min-height: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; gap: 14px !important; background: transparent !important; } .ic33-category-card { height: 300px !important; } .ic33-category-card__content { padding: 36px 20px 13px !important; } .ic33-category-card__title { font-size: 19px !important; } .ic33-category-card__description { font-size: 12px !important; } } /* ============================================================================= 44 — TABLETTE PORTRAIT ============================================================================= */ @media (min-width: 600px) and (max-width: 799px) { .ic33-category-grid { padding: 14px 12px 20px !important; background: transparent !important; } .ic33-category-grid__title { font-size: 32px !important; } .ic33-category-grid__heading-line { width: 30px !important; flex-basis: 30px !important; } .ic33-shop-categories { width: 100% !important; height: auto !important; min-height: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; gap: 12px !important; background: transparent !important; } .ic33-category-card { height: 270px !important; } .ic33-category-card__content { padding: 34px 17px 12px !important; } .ic33-category-card__title { font-size: 17px !important; } .ic33-category-card__description { font-size: 11px !important; } } /* ============================================================================= 45 — MOBILE ============================================================================= */ @media (max-width: 599px) { .ic33-category-grid { width: 100% !important; padding: 13px 9px 20px !important; background: transparent !important; } .ic33-category-grid__container { width: 100% !important; max-width: none !important; } .ic33-category-grid__eyebrow { font-size: 8px !important; letter-spacing: 0.30em !important; } .ic33-category-grid__heading { gap: 8px !important; } .ic33-category-grid__heading-line { width: 22px !important; flex-basis: 22px !important; } .ic33-category-grid__title { font-size: clamp( 27px, 9vw, 34px ) !important; white-space: normal; } .ic33-shop-categories { width: 100% !important; height: auto !important; min-height: 0 !important; grid-template-columns: 1fr !important; grid-template-rows: none !important; gap: 11px !important; background: transparent !important; } .ic33-category-card { height: 270px !important; border-radius: 13px !important; } .ic33-category-card__content { padding: 35px 17px 12px !important; } .ic33-category-card__title { font-size: 18px !important; } .ic33-category-card__description { font-size: 11px !important; line-height: 1.22 !important; } } /* ============================================================================= 46 — TRÈS PETIT MOBILE ============================================================================= */ @media (max-width: 380px) { .ic33-category-grid { padding-left: 7px !important; padding-right: 7px !important; } .ic33-category-grid__heading-line { display: none !important; } .ic33-category-grid__title { font-size: 27px !important; } .ic33-category-card { height: 250px !important; } } /* ============================================================================= 47 — SUPPRESSION FINALE DU FOND SUR NOTRE SECTION Ces règles sont volontairement placées à la FIN du fichier. ============================================================================= */ .ic33-category-grid, .ic33-category-grid__container, .ic33-category-grid__header, .ic33-category-grid__heading, .ic33-shop-categories { background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* ============================================================================= 48 — SUPPRESSION DES PSEUDO-ÉLÉMENTS DE LA SECTION ============================================================================= */ .ic33-category-grid::before, .ic33-category-grid::after, .ic33-category-grid__container::before, .ic33-category-grid__container::after, .ic33-category-grid__header::before, .ic33-category-grid__header::after, .ic33-shop-categories::before, .ic33-shop-categories::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* ============================================================================= 49 — STORE­FRONT : WRAPPERS DE PAGE Sur la page Boutique uniquement. On force le blanc sur les zones extérieures de la page. Cette règle est différente de "transparent" : si un parent encore plus haut possède le fameux gris/bleu, le blanc le masque définitivement. ============================================================================= */ body.woocommerce-shop, body.woocommerce-shop #page, body.woocommerce-shop .site, body.woocommerce-shop .site-content, body.woocommerce-shop .site-content > .col-full, body.woocommerce-shop #content, body.woocommerce-shop #primary, body.woocommerce-shop .content-area, body.woocommerce-shop #main, body.woocommerce-shop .site-main, body.woocommerce-shop .woocommerce { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* ============================================================================= 50 — MAIS NOTRE SECTION RESTE TRANSPARENTE Elle laisse donc apparaître le blanc de la page. ============================================================================= */ body.woocommerce-shop .ic33-category-grid, body.woocommerce-shop .ic33-category-grid__container, body.woocommerce-shop .ic33-category-grid__header, body.woocommerce-shop .ic33-shop-categories { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ============================================================================= 51 — WOOCOMMERCE PRODUCTS HEADER Certains templates Storefront appliquent le fond ici. ============================================================================= */ body.woocommerce-shop .woocommerce-products-header { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } /* ============================================================================= 52 — ARTICLE / ENTRY-CONTENT Sécurité supplémentaire si category-grid.php est injecté dans un wrapper WordPress. ============================================================================= */ body.woocommerce-shop article, body.woocommerce-shop .hentry, body.woocommerce-shop .entry-content { background-color: #ffffff !important; background-image: none !important; } /* ============================================================================= 53 — SUPPRESSION DES OMBRES / BORDURES SUR LES WRAPPERS ============================================================================= */ body.woocommerce-shop #primary, body.woocommerce-shop #main, body.woocommerce-shop .site-main, body.woocommerce-shop .content-area, body.woocommerce-shop .woocommerce-products-header { border: 0 !important; box-shadow: none !important; } /* ============================================================================= 54 — LARGEUR FINALE Aucune limitation horizontale dans CE fichier. ============================================================================= */ .ic33-category-grid { width: 100% !important; max-width: none !important; } .ic33-category-grid__container { width: 100% !important; max-width: none !important; } .ic33-shop-categories { width: 100% !important; max-width: none !important; } /* ============================================================================= 55 — CENTRAGE FINAL Aucune translation gauche/droite. ============================================================================= */ .ic33-category-grid, .ic33-category-grid__container, .ic33-shop-categories { left: auto !important; right: auto !important; transform: none !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================================= 56 — SÉCURITÉ DES CARTES ============================================================================= */ .ic33-shop-categories > *, .ic33-category-card, .ic33-category-card__link { min-width: 0 !important; max-width: none !important; } /* ============================================================================= CORRECTION FINALE — LARGEUR UNIQUEMENT Ne modifie PAS les hauteurs, textes, titre ou espacements verticaux. ============================================================================= */ /* -------------------------------------------------------------------------- 1. LA SECTION SORT DU CONTAINER STOREFRONT 100vw = largeur réelle de la fenêtre. Le calcul des marges recentre automatiquement la section, même si son parent Storefront est moins large. -------------------------------------------------------------------------- */ body.woocommerce-shop .ic33-category-grid { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 28px !important; padding-right: 28px !important; background: transparent !important; } /* -------------------------------------------------------------------------- 2. CONTAINER INTERNE = 100 % -------------------------------------------------------------------------- */ body.woocommerce-shop .ic33-category-grid__container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------------------------------------------------- 3. GRILLE = TOUTE LA LARGEUR DISPONIBLE On ne touche PAS à height. La hauteur actuellement validée reste donc identique. -------------------------------------------------------------------------- */ body.woocommerce-shop .ic33-shop-categories { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* -------------------------------------------------------------------------- 4. CHAQUE CARTE UTILISE TOUTE SA COLONNE -------------------------------------------------------------------------- */ body.woocommerce-shop .ic33-category-card { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* -------------------------------------------------------------------------- 5. IMAGE On conserve COVER temporairement pour ne surtout pas recréer les grosses bandes noires de la version précédente. Mais maintenant que les cartes deviennent beaucoup plus larges, leur ratio se rapproche fortement de celui des images : le rognage horizontal sera donc fortement réduit. -------------------------------------------------------------------------- */ body.woocommerce-shop .ic33-category-card__image, body.woocommerce-shop .ic33-category-card img.ic33-category-card__image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: none !important; } /* -------------------------------------------------------------------------- 6. GRAND ÉCRAN / TON 32" Seulement 32 px de marge extérieure. -------------------------------------------------------------------------- */ @media (min-width: 1600px) { body.woocommerce-shop .ic33-category-grid { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 32px !important; padding-right: 32px !important; } } /* -------------------------------------------------------------------------- 7. ÉCRANS TRÈS LARGES On ne remet volontairement AUCUN max-width. -------------------------------------------------------------------------- */ @media (min-width: 2000px) { body.woocommerce-shop .ic33-category-grid { padding-left: 38px !important; padding-right: 38px !important; } } /* ============================================================================= FIN category-card.css ============================================================================= */ /* ============================================================================= 57 — CORRECTION DÉFINITIVE — CARTE ENTIÈREMENT CLIQUABLE ========================================================================== */ /* * Le lien était en position:relative et placé après le contenu de la carte. * Avec height:100%, sa zone cliquable dépendait alors de sa position dans * le flux et ne couvrait pas réellement toute la carte. * * On transforme le lien en véritable overlay de la carte. */ .ic33-category-card { position: relative !important; } /* * Le lien couvre maintenant 100 % de la carte, de bord à bord. * Il passe au-dessus de l'image, du dégradé et du contenu visuel. */ .ic33-category-card > .ic33-category-card__link { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; overflow: hidden !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; color: transparent !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; } /* * Les éléments visuels ne doivent jamais reprendre le clic au-dessus * de l'overlay. */ .ic33-category-card__media, .ic33-category-card__overlay, .ic33-category-card__content { pointer-events: none !important; } /* * Le texte reste visible mais ne constitue plus une zone interactive * indépendante : le clic traverse jusqu'au lien overlay. */ .ic33-category-card__content *, .ic33-category-card__media * { pointer-events: none !important; } /* * Le lien reste accessible au clavier. */ .ic33-category-card > .ic33-category-card__link:focus { outline: none !important; } .ic33-category-card > .ic33-category-card__link:focus-visible { outline: 3px solid var(--ic33-cat-orange) !important; outline-offset: -3px !important; } /* * Sécurité : aucune règle générique de lien WooCommerce/Storefront ne doit * réduire la zone cliquable. */ body.woocommerce-shop .ic33-shop-categories .ic33-category-card > a.ic33-category-card__link { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; display: block !important; pointer-events: auto !important; } /* * Le hover reste porté par la carte. */ @media (hover: hover) { .ic33-category-card:hover { cursor: pointer !important; } } /* ============================================================================= 57 — FALLBACK DÉFINITIF : LA CARTE ELLE-MÊME EST CLIQUABLE ========================================================================== */ /* * Cette sécurité ne dépend plus de la taille ou du positionnement du . * Le
possède directement l'URL de la catégorie. */ .ic33-category-card { cursor: pointer !important; } .ic33-category-card[role="link"] { cursor: pointer !important; } /* * Le lien reste disponible pour les clics droits / ouverture dans un nouvel * onglet, tandis que le clic normal sur toute la carte est géré par l'article. */ .ic33-category-card__link { cursor: pointer !important; }