/* ========================================================= YLAB – HOME (INDEX) : Trèfle + zones + card + effets ========================================================= */ /* Defaults (évite les variables “undefined”) */ :root{ --ylab-bg-home: #E7F3F1; --ylab-clover-x-mobile: 0px; } /* ---------- HOME : fond + nettoyage wrappers ---------- */ body#index.page-index{ background: var(--ylab-bg-home) !important; } body#index.page-index #custom-text, body#index.page-index #wrapper, body#index.page-index #content-wrapper, body#index.page-index main, body#index.page-index section#content.page-home, body#index.page-index #content.page-home, body#index.page-index #content.page-home > .container, body#index.page-index #wrapper > .container, body#index.page-index #content-wrapper > .container{ background: transparent !important; background-image: none !important; } /* ---------- HOME : centrage viewport ---------- */ body#index .ylab-home{ width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; padding: 24px 12px 8px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* ---------- Wrap trèfle ---------- */ body#index .ylab-clover-wrap{ position: relative !important; width: min(560px, 92vw) !important; margin-left: auto !important; margin-right: auto !important; display: block !important; float: none !important; } /* Image trèfle : jamais cliquable */ body#index .ylab-clover{ width: 100% !important; height: auto !important; display: block !important; margin-left: auto !important; margin-right: auto !important; position: relative; z-index: 1; pointer-events: none !important; transform: none; } /* ---------- Zones cliquables ---------- */ body#index .ylab-zone{ position: absolute; z-index: 50 !important; display: flex; align-items: center; justify-content: center; text-align: center; -webkit-tap-highlight-color: transparent; pointer-events: auto !important; cursor: pointer; transform: translateZ(0); } /* Positions zones */ body#index .ylab-zone-event { left: 6%; top: 6%; width: 44%; height: 44%; } body#index .ylab-zone-digital { left: 50%; top: 6%; width: 44%; height: 44%; } body#index .ylab-zone-av { left: 6%; top: 50%; width: 44%; height: 44%; } body#index .ylab-zone-boutique { left: 50%; top: 50%; width: 44%; height: 44%; } /* Focus clavier */ body#index .ylab-zone:focus-visible{ outline: 3px solid rgba(0,0,0,.6); outline-offset: 4px; border-radius: 14px; } /* ---------- Labels ---------- */ body#index .ylab-zone::after{ display: block; text-align: center; font-weight: 600; text-transform: uppercase; white-space: pre; line-height: 1.28; letter-spacing: .03em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.55); pointer-events: none !important; padding: 8px; font-size: 14px; opacity: 0; will-change: transform, opacity; animation: ylabLabelOvershoot 1600ms cubic-bezier(.16,1,.3,1) forwards; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0); } body#index .ylab-zone-event::after { content: "Événementiel"; } body#index .ylab-zone-digital::after { content: "Digital"; } body#index .ylab-zone-av::after { content: "Vidéo"; } body#index .ylab-zone-boutique::after { content: "Boutique"; } /* Mobile */ @media (max-width: 991.98px){ body#index .ylab-zone-event::after { --sx:-36px; --sy:-36px; --ox: 3px; --oy: 3px; animation-delay:140ms; } body#index .ylab-zone-digital::after { --sx: 36px; --sy:-36px; --ox:-3px; --oy: 3px; animation-delay:280ms; } body#index .ylab-zone-av::after { --sx:-36px; --sy: 36px; --ox: 3px; --oy:-3px; animation-delay:420ms; } body#index .ylab-zone-boutique::after { --sx: 36px; --sy: 36px; --ox:-3px; --oy:-3px; animation-delay:560ms; } body#index .ylab-clover{ transform: translateX(var(--ylab-clover-x-mobile)); } } /* Desktop */ @media (min-width: 992px){ body#index .ylab-zone-event::after { --sx:-70px; --sy:-70px; --ox: 4px; --oy: 4px; animation-delay:180ms; } body#index .ylab-zone-digital::after { --sx: 70px; --sy:-70px; --ox:-4px; --oy: 4px; animation-delay:360ms; } body#index .ylab-zone-av::after { --sx:-70px; --sy: 70px; --ox: 4px; --oy:-4px; animation-delay:540ms; } body#index .ylab-zone-boutique::after { --sx: 70px; --sy: 70px; --ox:-4px; --oy:-4px; animation-delay:720ms; } } @keyframes ylabLabelOvershoot{ 0% { opacity:0; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0); } 60% { opacity:.9; transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0); } 100% { opacity:1; transform: translate3d(0,0,0); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ body#index .ylab-zone::after{ animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---------- Hover pétales (voile) ---------- */ body#index .ylab-zone::before{ content: ""; position: absolute; inset: 14%; border-radius: 999px; opacity: 0; transform: scale(.95); transition: opacity .25s ease, transform .25s ease; pointer-events: none; background: radial-gradient( circle at center, rgba(235,140,35,.45) 0%, rgba(235,140,35,.25) 40%, rgba(235,140,35,0) 70% ); } @media (hover:hover){ body#index .ylab-zone:hover::before{ opacity: 1; transform: scale(1.02); } } body#index .ylab-zone:focus-visible::before{ opacity:1; transform:scale(1.02); } body#index .ylab-zone:active::before{ opacity:1; transform:scale(1.01); } /* Événementiel : voile bleu */ body#index .ylab-zone-event::before{ background: radial-gradient( circle at center, rgba(70,120,255,.45) 0%, rgba(70,120,255,.25) 40%, rgba(70,120,255,0) 70% ); } /* ---------- Baseline en “card” ---------- */ body#index.page-index #custom-text p.ylab-baseline{ width: auto !important; min-width: 480px; max-width: 92vw; display: inline-block !important; margin: 100px auto 0 !important; background: #E7F3F1; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 18px 26px; text-align: center; box-sizing: border-box; box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.03); } @media (min-width: 992px){ body#index.page-index #custom-text p.ylab-baseline{ background: #C6E2DB; } } @media (max-width: 768px){ body#index.page-index #custom-text p.ylab-baseline{ min-width: unset; width: 92vw !important; } } /* ---------- Shine “YLAB” (FIX + upgrade) ---------- */ /* (optionnel mais propre) : isole le stacking context du trèfle */ body#index .ylab-clover-wrap{ position: relative !important; isolation: isolate; /* évite des surprises de z-index/filter */ } body#index .ylab-clover-wrap::after{ content: "YLAB"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.995); z-index: 60; /* ✅ au-dessus de .ylab-zone (50) */ pointer-events: none; font-family: 'Jost','Open Sans',sans-serif; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(64px, 16vw, 140px); line-height: 1; /* ✅ alphas en % => impossible de “casser” avec un copier-coller */ background: linear-gradient(90deg, rgba(255,255,255,12%) 0%, rgba(255,255,255,12%) 35%, rgba(255,255,255,100%) 50%, rgba(255,255,255,12%) 65%, rgba(255,255,255,12%) 100% ); background-size: 320% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; /* glow plus élégant */ filter: drop-shadow(0 0 10px rgba(255,255,255,28%)) drop-shadow(0 0 22px rgba(255,255,255,12%)); /* petit plus “verre/néon soft” */ mix-blend-mode: screen; will-change: opacity, transform, background-position; animation: ylabYlabShineLR 12s ease-in-out infinite; animation-delay: 1800ms; } @keyframes ylabYlabShineLR{ /* silencieux */ 0% { opacity: 0; background-position: 0% 50%; transform: translate(-50%,-50%) scale(.99); } 6% { opacity: 0; } /* apparition */ 10% { opacity: .95; } /* balayage */ 18% { opacity: 1; background-position: 100% 50%; transform: translate(-50%,-50%) scale(1); } /* petite “respiration” */ 21% { opacity: .75; } /* extinction */ 25% { opacity: 0; background-position: 120% 50%; } /* reste off */ 100% { opacity: 0; background-position: 120% 50%; } } @media (max-width: 768px){ body#index .ylab-clover-wrap::after{ background-size: 360% 100%; filter: drop-shadow(0 0 14px rgba(255,255,255,38%)) drop-shadow(0 0 28px rgba(255,255,255,16%)); } } @media (prefers-reduced-motion: reduce){ body#index .ylab-clover-wrap::after{ animation: none !important; opacity: 0 !important; background: none !important; filter: none !important; } } /* FOOTER — bloc centré + texte centré */ #footer .footer-container > .container > .row{ display: flex !important; justify-content: center !important; } #footer .footer-container .links{ flex: 0 0 80% !important; /* ajuste : 70 / 80 / 100 */ max-width: 80% !important; text-align: center !important; } /* FOOTER — air sous le bloc de liens (paramétrable) */ :root{ --ylab-footer-links-bottom-gap: 32px; /* ajuste : 16 / 24 / 32 / 48 */ } #footer .footer-container .links{ margin-bottom: var(--ylab-footer-links-bottom-gap) !important; } /* ========================================================= YLAB — Header utilitaire (DESKTOP) — STABLE (SANS translateY) Connexion|Nom / Panier / Contact : alignement identique connecté/déconnecté ========================================================= */ @media (min-width: 992px){ #header{ --ylab-util-h: 34px; /* hauteur de la barre utilitaire */ --ylab-util-pad-x: 8px; /* padding horizontal des items */ --ylab-util-gap-1: 10px; /* user -> panier */ --ylab-util-gap-2: 12px; /* panier -> contact */ --ylab-util-icon: 18px; /* taille icône */ --ylab-util-text: 12px; /* taille texte */ } /* conteneur des items */ #header .header-nav .right-nav{ display: flex !important; align-items: center !important; height: var(--ylab-util-h) !important; } /* gaps */ #header .header-nav #_desktop_user_info{ margin-right: var(--ylab-util-gap-1) !important; } #header .header-nav #_desktop_cart{ margin-right: var(--ylab-util-gap-2) !important; } /* base commune : 3 items (user/cart/contact) */ #header .header-nav #_desktop_user_info a, #header .header-nav #_desktop_cart .header, #header .header-nav a[href*="contact"]{ display: inline-flex !important; align-items: center !important; height: var(--ylab-util-h) !important; line-height: var(--ylab-util-h) !important; padding: 0 var(--ylab-util-pad-x) !important; gap: 6px !important; white-space: nowrap !important; transform: none !important; top: 0 !important; position: relative !important; font-size: var(--ylab-util-text) !important; } /* icônes centrées */ #header .header-nav i{ font-size: var(--ylab-util-icon) !important; line-height: 1 !important; display: inline-block !important; transform: none !important; top: 0 !important; position: relative !important; } /* icône contact ajoutée */ #header .header-nav a[href*="contact"]::before{ content: "mail_outline"; font-family: "Material Icons"; font-size: var(--ylab-util-icon) !important; line-height: 1 !important; display: inline-block !important; margin-right: 6px !important; transform: none !important; } /* IMPORTANT : quand connecté, on évite que 2 liens cassent la hauteur/alignement */ #header .header-nav #_desktop_user_info .user-info{ display: inline-flex !important; align-items: center !important; height: var(--ylab-util-h) !important; } /* Si tu gardes nom + déconnexion : on force la même hauteur sur chacun */ #header .header-nav #_desktop_user_info a[href*="logout"], #header .header-nav #_desktop_user_info a[href*="my-account"], #header .header-nav #_desktop_user_info a[href*="mon-compte"]{ height: var(--ylab-util-h) !important; line-height: var(--ylab-util-h) !important; display: inline-flex !important; align-items: center !important; } /* Le nom ne doit jamais pousser le header */ #header .header-nav #_desktop_user_info a[href*="my-account"], #header .header-nav #_desktop_user_info a[href*="mon-compte"]{ max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* ========================================================= YLAB — HEADER : garder icône compte + masquer Déconnexion (desktop) ========================================================= */ @media (min-width: 992px){ /* 1) Masque Déconnexion (le lien entier) */ #header .header-nav #_desktop_user_info a[href*="logout"], #header .header-nav #_desktop_user_info a.logout{ display: none !important; } /* 2) S’assure que l’icône du lien "Mon compte" s’affiche */ #header .header-nav #_desktop_user_info a[href*="my-account"] i, #header .header-nav #_desktop_user_info a[href*="mon-compte"] i{ display: inline-block !important; } /* 3) Sécurité : le nom ne casse jamais le layout */ #header .header-nav #_desktop_user_info a[href*="my-account"], #header .header-nav #_desktop_user_info a[href*="mon-compte"]{ max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* ========================================================= YLAB — MON COMPTE : espace sous "Déconnexion" (paramétrable) ========================================================= */ body#my-account{ --ylab-myaccount-logout-space: 50px; /* <- règle ça comme tu veux */ } /* Lien/bouton Déconnexion dans la page Mon compte */ body#my-account a[href*="logout"], body#my-account a.logout{ margin-bottom: var(--ylab-myaccount-logout-space) !important; display: inline-flex; /* évite que margin-bottom soit ignoré si inline */ } /* ========================================================= YLAB — MON COMPTE : bouton "Déconnexion" identique à .btn.btn-primary (cible le lien dans footer.page-footer) ========================================================= */ body#my-account{ --ylab-myaccount-logout-space: 20px; } /* Lien Déconnexion dans le footer de la page compte */ body#my-account footer.page-footer .text-sm-center > a[href*="logout"], body#my-account footer.page-footer .text-sm-center > a[href*="mylogout"]{ display: inline-block !important; /* = .btn */ padding: .5rem 1.25rem !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.25 !important; text-transform: uppercase !important; text-align: center !important; vertical-align: middle !important; white-space: nowrap !important; user-select: none !important; cursor: pointer !important; border: 1px solid transparent !important; border-radius: 0 !important; text-decoration: none !important; /* = .btn-primary (valeurs de ton inspecteur) */ background-color: #015ba4 !important; border-color: #015ba4 !important; color: #fff !important; margin-bottom: var(--ylab-myaccount-logout-space) !important; } /* États interactifs (pour battre tes règles globales sur a:hover etc.) */ body#my-account footer.page-footer .text-sm-center > a[href*="logout"]:hover, body#my-account footer.page-footer .text-sm-center > a[href*="logout"]:focus, body#my-account footer.page-footer .text-sm-center > a[href*="mylogout"]:hover, body#my-account footer.page-footer .text-sm-center > a[href*="mylogout"]:focus{ background-color: #015ba4 !important; border-color: #015ba4 !important; color: #fff !important; } /* ========================================================= YLAB — HEADER LOGO (DESKTOP) Contrôle total : - taille du logo - distance au haut du header - espace à droite du logo ========================================================= */ @media (min-width: 992px) { /* ===================== PARAMÈTRES LOGO ===================== */ #header{ --ylab-logo-size: 80px; /* largeur du logo */ --ylab-logo-top-offset: -36px; /* distance au haut du header */ --ylab-logo-right-gap: 10px; /* espace à droite du logo */ } /* ===================== NETTOYAGE STRUCTUREL (on enlève ce qui empêche le logo de bouger) ===================== */ #header .header-top, #header .header-top .container, #header .header-top .row, #header .header-logo{ padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; align-items: center !important; } /* ===================== CONTENEUR LOGO ===================== */ #header .header-logo, #header #_desktop_logo{ position: relative !important; transform: translateY(var(--ylab-logo-top-offset)) !important; margin-right: var(--ylab-logo-right-gap) !important; will-change: transform; } /* ===================== LOGO IMAGE ===================== */ #header .header-logo img, #header #_desktop_logo img{ width: var(--ylab-logo-size) !important; max-width: none !important; height: auto !important; transform: none !important; /* pas de double transform */ display: block; } } /* ========================================================= YLAB — Titres de pages dans le header + baseline à droite du logo ========================================================= */ /* A) Masquer le H1 dans le corps (en gardant SEO/accessibilité) */ .ylab-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Cibles fréquentes des titres Presta */ #main .page-header h1, #main h1.h1, #main .product-header h1, #main .category-header h1 { /* on ne fait rien ici : c'est le JS qui ajoutera .ylab-visually-hidden */ } /* B) Zone "baseline + titre" à droite du logo (desktop) */ @media (min-width: 992px) { #header .ylab-header-titles { display: flex; flex-direction: column; justify-content: center; gap: 2px; /* Laisse le logo respirer : si tu as déjà ta variable, garde-la */ /* margin-left: 0; */ } #header .ylab-header-baseline { font-size: 0.95rem; line-height: 1.1; opacity: 0.9; } #header .ylab-header-pagetitle { font-size: 1.35rem; line-height: 1.1; font-weight: 600; } /* Si ton conteneur logo est en flex, ça aide à l’alignement */ #header .header-logo, #header #_desktop_logo { display: inline-flex; align-items: center; } } /* Mobile : option sobre (baseline seulement, plus petit) */ @media (max-width: 991.98px) { #header .ylab-header-titles { display: none; /* si tu veux aussi l’afficher mobile, dis-moi, on l’active */ } } /* ========================================================= YLAB — Supprimer le "titre fantôme" du thème dans le header (ex: ÉVÉNEMENTIEL & MOTO qui reste affiché) ========================================================= */ @media (min-width: 992px) { /* Quand notre bloc de titres existe, on masque les titres parasites du thème */ #header .ylab-header-titles ~ * .h1, #header .ylab-header-titles ~ * h1, #header .ylab-header-titles ~ * .page-title, #header .ylab-header-titles ~ * .page_header_container, #header .ylab-header-titles ~ * .breadcrumb, #header .ylab-header-titles ~ * .category-name, #header .ylab-header-titles ~ * .current-category { display: none !important; } /* Variante plus large : beaucoup de thèmes mettent ça dans .header-top / .header-bottom */ #header .header-top .page-title, #header .header-top .current-category, #header .header-top .category-name { display: none !important; } } /* Menu principal : visible en mobile (burger), masqué en desktop */ @media (min-width: 992px) { #header .header-top #_desktop_top_menu, #header .header-top .top-menu, #header .header-top .menu, #header .header-top nav { display: none !important; } } /* ========================================================= YLAB — HEADER fond vert foncé partout (desktop + mobile) ========================================================= */ :root{ --ylab-header-bg: #0F2E2C; --ylab-header-fg: #ffffff; } /* Le conteneur header + ses sections courantes (classic) */ #header, #header .header-top, #header .header-nav, #header .header-bottom, #header .top-logo, #header .header-top .container, #header .header-nav .container, #header .header-bottom .container{ background: var(--ylab-header-bg) !important; } /* Optionnel mais recommandé : texte/icônes en blanc pour rester lisible */ #header, #header a, #header .material-icons, #header .material-icons-outlined, #header .dropdown, #header .user-info a, #header .blockcart a{ color: var(--ylab-header-fg) !important; } /* Champs (recherche) : fond discret + texte lisible */ #header input, #header select{ background: rgba(255,255,255,.08) !important; color: var(--ylab-header-fg) !important; border-color: rgba(255,255,255,.25) !important; } #header input::placeholder{ color: rgba(255,255,255,.65) !important; } /* ========================================================= YLAB — Suppression ligne blanche sous le header ========================================================= */ #header .header-top, #header .header-nav{ border-bottom: none !important; box-shadow: none !important; } /* ========================================================= YLAB — Baseline orange dans le header ========================================================= */ #header .ylab-header-baseline{ color: #eb8c23; } /* ========================================================= YLAB — PATCH HEADER (NETTOYÉ) Tailles + position titres header (baseline + pagetitle) ========================================================= */ :root{ /* Typo */ --ylab-baseline-size: 14px; --ylab-pagetitle-size: 24px; --ylab-baseline-title-gap: 17px; /* Layout logo / titres */ --ylab-logo-col: 80px; /* ajuste (84 / 96 / 110) */ --ylab-logo-gap: 8px; /* espace logo → titres */ --ylab-titles-lift: -30px; /* ajustement vertical titres */ } /* ========================================================= Typographie baseline + titre ========================================================= */ #header .ylab-header-baseline{ font-size: var(--ylab-baseline-size) !important; line-height: 1.2 !important; margin: 0 0 var(--ylab-baseline-title-gap) 0 !important; white-space: nowrap !important; /* desktop only visuellement utile */ } #header .ylab-header-pagetitle{ font-size: var(--ylab-pagetitle-size) !important; line-height: 1.15 !important; margin: 0 !important; white-space: normal !important; } /* ========================================================= Desktop — layout logo | titres (corrigé) - grid logo | titres - IMPORTANT : on remplace le transform par un margin-top (le transform ne réduit pas la hauteur calculée => “vide”) ========================================================= */ @media (min-width: 992px){ /* Colonne gauche (logo + titres) */ #header .header-top .row > div:first-child{ display: grid !important; grid-template-columns: var(--ylab-logo-col) minmax(0, 1fr) !important; column-gap: var(--ylab-logo-gap) !important; align-items: start !important; } /* Bloc titres */ #header .ylab-header-titles{ grid-column: 2 !important; align-self: start !important; /* ✅ au lieu de translateY (qui ne change pas la hauteur) */ margin-top: var(--ylab-titles-lift) !important; transform: none !important; min-width: 0 !important; width: 100% !important; max-width: none !important; } } /* ========================================================= Nettoyage marges / paddings parasites ========================================================= */ #header .header-top .row{ margin-bottom: 0 !important; } #header .header-top .row > div{ padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= YLAB — Logo : suppression du "vide" (wrapper + img.logo) - On garde UNE seule approche (celle qui marche chez toi) - On supprime les doublons (.logo img) inutiles ici ========================================================= */ :root{ --ylab-logo-maxh: 90px; /* règle ici la taille max du logo */ } /* Conteneur du logo */ #header #_desktop_logo{ height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 0 !important; /* évite une hauteur “typographique” fantôme */ align-self: flex-start !important; } /* Lien autour du logo */ #header #_desktop_logo > a{ display: block !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Image du logo (chez toi c'est img.logo) */ #header #_desktop_logo img.logo{ display: block !important; height: auto !important; width: auto !important; max-height: var(--ylab-logo-maxh) !important; margin: 0 !important; } /* ========================================================= YLAB — FIX FINAL : suppression de la hauteur imposée par la row + colonnes Bootstrap du header ========================================================= */ /* 1. La row ne doit PAS imposer de hauteur */ #header .header-top .row{ height: auto !important; min-height: 0 !important; align-items: flex-start !important; /* CRUCIAL */ } /* 2. Les colonnes Bootstrap du header ne doivent PAS s'étirer */ #header .header-top .row > [class*="col-"]{ height: auto !important; min-height: 0 !important; align-self: flex-start !important; } /* 3. Sécurité : la colonne logo en particulier */ #header #_desktop_logo{ height: auto !important; min-height: 0 !important; align-self: flex-start !important; } /* ========================================================= YLAB — FIX : supprimer l'air vertical (row centrée) -> on force le top-align des colonnes du header ========================================================= */ @media (min-width: 992px){ /* La ligne du header ne doit jamais centrer verticalement */ #header .header-top .row{ align-items: flex-start !important; } /* Les colonnes du header restent en haut */ #header .header-top .row > [class*="col-"]{ align-self: flex-start !important; } /* Ton logo + titres : top */ #header #_desktop_logo{ align-self: flex-start !important; } #header .ylab-header-titles{ align-self: flex-start !important; } } /* ========================================================= YLAB — OVERRIDE HARD : annule le centrage vertical responsable du vide (on bat custom.css:481 en reprenant la même zone) ========================================================= */ @media (min-width: 992px){ /* On force le top-align sur TOUT ce qui compose la bande header-top */ #header .header-top, #header .header-top .container, #header .header-top .row, #header .header-top [class*="col-"], #header #_desktop_logo, #header .ylab-header-titles{ align-items: flex-start !important; align-content: flex-start !important; justify-content: flex-start !important; vertical-align: top !important; } /* Et si ta .row est bien en flex (DevTools le montre), on le verrouille */ #header .header-top .row{ display: flex !important; flex-wrap: nowrap !important; } /* Les colonnes ne s'étirent pas */ #header .header-top .row > [class*="col-"]{ align-self: flex-start !important; } } /* ========================================================= YLAB — RÉDUIRE LA HAUTEUR RÉELLE DU HEADER Remplace les translateY (qui gardent du vide) par des marges ========================================================= */ @media (min-width: 992px){ /* 1) LOGO : on garde ton offset mais on le fait via le flux (margin) */ #header .header-logo, #header #_desktop_logo{ transform: none !important; /* kill translateY */ margin-top: var(--ylab-logo-top-offset, 0px) !important; /* ex: -36px */ } /* 2) Si tes titres avaient un "lift" par transform (selon tes versions), idem */ #header .ylab-header-titles{ transform: none !important; margin-top: var(--ylab-titles-lift, 0px) !important; /* ex: -28px */ } /* 3) Nettoyage minimal pour éviter qu’un line-height “fantôme” regonfle */ #header .header-top, #header .header-top .row, #header .header-top .container{ padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } } /* ========================================================= YLAB — ESPACE SOUS LE LOGO (PARAMÉTRABLE) ========================================================= */ @media (min-width: 992px){ :root{ /* Ajuste ici UNIQUEMENT */ --ylab-logo-bottom-space: 12px; /* 0 / 4 / 8 / 12 / 16 */ } /* On crée l’espace sous le logo via le flux */ #header #_desktop_logo{ margin-bottom: var(--ylab-logo-bottom-space) !important; } } /* ========================================================= YLAB — FOOTER fond vert + couleurs lisibles + signature ========================================================= */ :root{ /* Fond/footer */ --ylab-footer-bg: #0F2E2C; /* Couleurs texte (paramétrables) */ --ylab-footer-fg: rgba(255,255,255,.82); /* texte courant */ --ylab-footer-muted: rgba(255,255,255,.68); /* secondaire */ /* Couleurs liens (sert aussi à la signature) */ --ylab-footer-link: rgba(255,255,255,.88); --ylab-footer-link-hover: #ffffff; } #footer, #footer .footer-container, #footer .footer-container > .container, #footer .footer-container .row, #footer .footer-after, #footer .footer-bottom{ background: var(--ylab-footer-bg) !important; } /* Texte global */ #footer, #footer p, #footer span, #footer li, #footer .h3, #footer .h4, #footer .title{ color: var(--ylab-footer-fg) !important; } /* Liens */ #footer a{ color: var(--ylab-footer-link) !important; } #footer a:hover{ color: var(--ylab-footer-link-hover) !important; } /* Séparateurs / petits textes */ #footer small, #footer .text-muted{ color: var(--ylab-footer-muted) !important; } /* ========================================================= YLAB — Remplacer le lien PrestaShop du bas de footer (structure: #footer p.text-sm-center > a) ========================================================= */ #footer p.text-sm-center{ margin: 0 !important; } #footer p.text-sm-center > a{ /* cache le texte existant sans casser le layout */ font-size: 0 !important; line-height: 0 !important; /* option: désactive le clic (sinon ça reste un lien vers PrestaShop) */ pointer-events: none !important; text-decoration: none !important; /* conserve ta couleur de liens */ color: var(--ylab-footer-link) !important; } /* injecte ton texte */ #footer p.text-sm-center > a::before{ content: "Site créé par YLab depuis PrestaShop™ ©"; font-size: 14px; line-height: 1.2; color: var(--ylab-footer-link) !important; /* même couleur que liens footer */ } /* ========================================================= YLAB — FOOTER : espacements paramétrables - espace au-dessus des liens (bloc colonnes) - espace sous la ligne copyright ========================================================= */ :root{ --ylab-footer-links-top-space: 0px; /* espace au-dessus des liens */ --ylab-footer-copyright-bottom-space: 100px; /* espace sous le copyright */ } /* 1) Espace au-dessus du bloc de liens (les 3 colonnes) */ #footer .footer-container{ padding-top: var(--ylab-footer-links-top-space) !important; } /* 2) Espace sous le copyright */ #footer p.text-sm-center{ padding-bottom: var(--ylab-footer-copyright-bottom-space) !important; } /* ========================================================= YLAB — FOOTER MOBILE : fond vert foncé dans les accordéons ========================================================= */ @media (max-width: 991.98px){ /* Panneaux dépliés des sections footer (Classic) */ #footer .collapse, #footer .footer-container .collapse, #footer .footer-container .links ul, #footer .footer-container .links{ background: var(--ylab-footer-bg) !important; } /* Listes de liens (évite le fond blanc hérité) */ #footer ul, #footer li{ background: transparent !important; } /* Titres cliquables (UNIVERS / INFOS LÉGALES) */ #footer .title, #footer .h3, #footer .h4{ color: var(--ylab-footer-link) !important; } /* Liens dans les panneaux */ #footer a{ color: var(--ylab-footer-fg) !important; } } /* ========================================================= YLAB — FOOTER MOBILE : accordéons effet "carte" ========================================================= */ @media (max-width: 991.98px){ :root{ /* Intensité de l’effet carte (ajuste ici) */ --ylab-footer-card-bg: rgba(255,255,255,.04); /* .03 / .04 / .06 */ --ylab-footer-card-radius: 8px; --ylab-footer-card-gap: 6px; } /* Panneaux dépliés */ #footer .footer-container .collapse, #footer .footer-container .links{ background: var(--ylab-footer-card-bg) !important; border-radius: var(--ylab-footer-card-radius); margin-bottom: var(--ylab-footer-card-gap); } /* Listes internes */ #footer .footer-container .links ul{ background: transparent !important; } /* Séparateurs ultra discrets entre liens */ #footer .footer-container .links li{ border-bottom: 1px solid rgba(255,255,255,.08); } #footer .footer-container .links li:last-child{ border-bottom: none; } /* Liens lisibles */ #footer a{ color: var(--ylab-footer-fg) !important; } } /* ========================================================= YLAB — Header utilitaire : taille texte paramétrable Connexion / Panier / Contactez-nous (desktop + affichage intermédiaire) ========================================================= */ @media (min-width: 768px){ /* Réglages */ #header{ --ylab-util-font: 12px; /* taille par défaut des 3 */ --ylab-user-font: var(--ylab-util-font); --ylab-cart-font: var(--ylab-util-font); --ylab-contact-font: var(--ylab-util-font); } /* Connexion */ #header .header-nav #_desktop_user_info a{ font-size: var(--ylab-user-font) !important; } /* Panier */ #header .header-nav #_desktop_cart .header{ font-size: var(--ylab-cart-font) !important; } /* Contactez-nous */ #header .header-nav a[href*="contact"]{ font-size: var(--ylab-contact-font) !important; } } /* ========================================================= YLAB — Header : bouton Panier (vide ou non) = même style que Connexion - supprime le fond gris/bleu du thème - garde texte/icônes visibles ========================================================= */ @media (min-width: 768px){ /* 1) Cibles EXACTES Classic pour le bouton panier */ #header #_desktop_cart .blockcart, #header #_desktop_cart .blockcart .cart-preview, #header #_desktop_cart .blockcart .header, #header #_desktop_cart .blockcart .header a, #header #_desktop_cart .blockcart a{ background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; } /* 2) Le fond gris vient souvent d’un span interne (ex: .cart-title / .cart-label) */ #header #_desktop_cart .blockcart .header *{ background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* 3) Overlays/pastilles via pseudo-éléments */ #header #_desktop_cart .blockcart .cart-preview::before, #header #_desktop_cart .blockcart .cart-preview::after, #header #_desktop_cart .blockcart .header::before, #header #_desktop_cart .blockcart .header::after, #header #_desktop_cart .blockcart .header a::before, #header #_desktop_cart .blockcart .header a::after{ background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* 4) Couleur texte/icône */ #header #_desktop_cart, #header #_desktop_cart a, #header #_desktop_cart .header, #header #_desktop_cart i, #header #_desktop_cart .material-icons, #header #_desktop_cart .material-icons-outlined{ color: var(--ylab-header-fg, #fff) !important; } /* 5) Hover cohérent avec tes autres items */ #header #_desktop_cart .blockcart .header:hover, #header #_desktop_cart .blockcart .header a:hover{ background: rgba(255,255,255,.04) !important; } } /* ========================================================= YLAB — MOBILE : Panier (vide ou non) = fond header + pas de voile bleu ========================================================= */ @media (max-width: 991.98px){ /* 1) Forcer le fond EXACT du header sur le conteneur panier mobile */ #header #_mobile_cart, #header #_mobile_cart .blockcart, #header #_mobile_cart .cart-preview, #header #_mobile_cart .cart-preview.active, #header #_mobile_cart .header, #header #_mobile_cart a{ background: var(--ylab-header-bg) !important; background-color: var(--ylab-header-bg) !important; box-shadow: none !important; border: 0 !important; } /* 2) Tuer les overlays/pastilles (souvent responsables du voile bleu) */ #header #_mobile_cart .cart-preview::before, #header #_mobile_cart .cart-preview::after, #header #_mobile_cart .header::before, #header #_mobile_cart .header::after, #header #_mobile_cart a::before, #header #_mobile_cart a::after{ background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: 0 !important; } /* 3) S'assurer qu’aucun enfant interne ne remet un fond clair */ #header #_mobile_cart *{ background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* 4) Couleurs texte / icône (lisible sur fond vert) */ #header #_mobile_cart, #header #_mobile_cart a, #header #_mobile_cart i, #header #_mobile_cart .material-icons, #header #_mobile_cart .material-icons-outlined{ color: var(--ylab-header-fg, #fff) !important; } /* 5) Hover/tap (facultatif) */ #header #_mobile_cart a:active{ background: rgba(255,255,255,.06) !important; } } /* ========================================================= YLAB — Fond du contenu des pages (CMS + toutes pages) Mobile + Desktop ========================================================= */ :root{ --ylab-page-bg: #C6E2DB; } /* Fond global de la zone contenu */ #content-wrapper, #content, main, section#content{ background: var(--ylab-page-bg) !important; } /* Sécurise les containers internes (Classic / Bootstrap) */ #content-wrapper > .container, #content > .container, section#content > .container, main > .container{ background: transparent !important; } /* ========================================================= YLAB — Fond OUTER (remplit le blanc du thème) + fond INNER (contenu) ========================================================= */ :root{ --ylab-page-bg-inner: #C6E2DB; /* contenu */ --ylab-page-bg-outer: #C6E2DB; /* autour (un peu plus foncé) */ } /* 1) OUTER : ce que le thème laisse blanc */ html, body, #wrapper, #main, #content-wrapper{ background: var(--ylab-page-bg-outer) !important; } /* 2) INNER : la zone contenu réelle (ton vert clair) */ #content, section#content, #content-wrapper .container{ background: var(--ylab-page-bg-inner) !important; } /* 3) Évite que des sous-blocs remettent du blanc */ #content .container, #content .page-content, #content .card, #content .page-cms, #content .product-container, #content .category-cover, #content .products{ background: transparent !important; } /* ========================================================= YLAB — Gaps HEADER / CONTENU / FOOTER Harmonisation CMS vs Catégories / Produits ========================================================= */ /* ---------- MOBILE (par défaut) ---------- */ :root{ --ylab-gap-top: 0px; --ylab-gap-bottom: 0px; } /* ---------- DESKTOP ---------- */ @media (min-width: 992px){ :root{ --ylab-gap-top: 0px; --ylab-gap-bottom: 0px; } } /* ========================================================= 1) Wrapper principal (toutes pages) ========================================================= */ #wrapper{ padding-top: var(--ylab-gap-top) !important; padding-bottom: var(--ylab-gap-bottom) !important; margin: 0 !important; } /* ========================================================= 2) CAS SPÉCIFIQUE CMS : on neutralise le double empilage ========================================================= */ @media (min-width: 992px){ body.page-cms #content-wrapper{ padding-top: 0 !important; margin-top: 0 !important; } body.page-cms #main{ padding-top: 0 !important; margin-top: 0 !important; } } /* ========================================================= 3) Sécurité : le premier bloc réel ne recrée pas d’espace ========================================================= */ @media (min-width: 992px){ #main > :first-child{ margin-top: 0 !important; } #main > :last-child{ margin-bottom: 0 !important; } } /* ========================================================= YLAB — Harmonisation des gaps Appliquer aux pages Catégories / Produits ========================================================= */ /* Desktop uniquement */ @media (min-width: 992px){ /* Pages catégories */ body.page-category #main, body.page-category section#main{ padding-top: var(--ylab-gap-top) !important; padding-bottom: var(--ylab-gap-bottom) !important; } /* Pages produits */ body.page-product #main, body.page-product section#main{ padding-top: var(--ylab-gap-top) !important; padding-bottom: var(--ylab-gap-bottom) !important; } } /* ========================================================= YLAB — Ajouter le même “petit espace” sur Catégories / Produits (DESKTOP) (ciblage robuste : body#category / body#product + classes) ========================================================= */ @media (min-width: 992px){ :root{ --ylab-catalog-gap-top: 24px; /* ajuste */ --ylab-catalog-gap-bottom: 24px; /* ajuste */ } } /* ========================================================= YLAB — Gaps “process” (Panier / Checkout / Commande) Méthode robuste : spacer via ::before / ::after sur #main Desktop + affichage intermédiaire ========================================================= */ @media (min-width: 768px){ :root{ --ylab-process-gap-top: 12px; /* espace sous le header */ --ylab-process-gap-bottom: 20px; /* espace au-dessus du footer */ } /* Pages process (sélecteurs body robustes) */ body#cart #main::before, body#checkout #main::before, body#order #main::before, body[class*="page-cart"] #main::before, body[class*="page-checkout"] #main::before, body[class*="page-order"] #main::before, body[class*="order-confirmation"] #main::before{ content: ""; display: block; height: var(--ylab-process-gap-top); } body#cart #main::after, body#checkout #main::after, body#order #main::after, body[class*="page-cart"] #main::after, body[class*="page-checkout"] #main::after, body[class*="page-order"] #main::after, body[class*="order-confirmation"] #main::after{ content: ""; display: block; height: var(--ylab-process-gap-bottom); } } /* ========================================================= YLAB — Catégories : supprimer la colonne gauche et centrer le contenu (robuste : basé sur layout-left-column) ========================================================= */ @media (min-width: 768px){ /* Cache la colonne gauche (même vide) */ body.layout-left-column #left-column{ display: none !important; } /* Le contenu devient full width */ body.layout-left-column #content-wrapper{ float: none !important; /* écrase Bootstrap */ width: 100% !important; max-width: 1200px !important; /* ajuste ou supprime pour full largeur */ margin-left: auto !important; margin-right: auto !important; flex: 0 0 100% !important; /* si la row est en flex */ max-width: 100% !important; /* écrase col-lg-9 */ } /* La row n’essaie pas de “réserver” la place de la colonne gauche */ body.layout-left-column #wrapper > .container > .row{ display: flex !important; justify-content: center !important; } } /* ========================================================= YLAB — Catégorie 10 (Boutique digitale) : enlever colonne gauche + centrer ========================================================= */ @media (min-width: 768px){ /* 1) Supprime la colonne gauche (même si vide) */ body#category.layout-left-column.page-category.category-id-10 #left-column{ display: none !important; } /* 2) Le contenu prend toute la largeur de la row */ body#category.layout-left-column.page-category.category-id-10 #content-wrapper{ float: none !important; width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* 3) Optionnel : si tu veux un contenu "cadre" centré (pas full largeur) */ body#category.layout-left-column.page-category.category-id-10 #content-wrapper > *{ max-width: 1200px !important; /* ajuste 980 / 1200 / 1400 */ margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 768px){ body#category.layout-left-column.page-category.category-id-10 #js-product-list-header .block-category{ max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= YLAB — Page Contact : fond vert clair du formulaire ========================================================= */ /* Page contact uniquement */ body.page-contact #content, body.page-contact section#content{ background: var(--ylab-page-bg-inner, #C6E2DB) !important; } /* Carte du formulaire (fond blanc par défaut du thème) */ body.page-contact .contact-form, body.page-contact .contact-form .card, body.page-contact .contact-form .card-body{ background: #C6E2DB !important; /* ton vert clair */ border: none !important; box-shadow: none !important; } /* ========================================================= YLAB — Page produit : fond vert clair Description / Détails du produit ========================================================= */ /* Page produit uniquement */ body.page-product #content, body.page-product section#content{ background: #C6E2DB !important; } /* Bloc principal produit (description / détails) */ body.page-product .product-description, body.page-product .product-information, body.page-product .tabs, body.page-product .tab-content, body.page-product .tab-pane, body.page-product .card, body.page-product .card-body{ background: #C6E2DB !important; box-shadow: none !important; border: none !important; } /* ========================================================= YLAB — Page produit : Fiche technique (data-sheet) Blocs dt/dd en vert clair ========================================================= */ body.page-product .product-features, body.page-product .product-features .data-sheet{ background: #C6E2DB !important; } /* Les “blocs” blancs (nom / valeur) */ body.page-product .product-features .data-sheet dt.name, body.page-product .product-features .data-sheet dd.value{ background: #C6E2DB !important; border: 1px solid rgba(0,0,0,.08) !important; /* optionnel : garde une séparation */ box-shadow: none !important; } /* Optionnel : réduire l’effet “cases” trop marquées */ body.page-product .product-features .data-sheet dt.name, body.page-product .product-features .data-sheet dd.value{ padding: 10px 12px !important; border-radius: 8px; /* si tu veux un rendu plus doux */ } /* ========================================================= YLAB — Page produit : supprimer "Fiche technique" (p.h6 du thème Classic) ========================================================= */ body.page-product .product-features > p.h6{ display: none !important; } /* ========================================================= YLAB — Page produit : texte description en NOIR (supprime le gris du thème Classic) ========================================================= */ body.page-product .product-description, body.page-product .product-description p, body.page-product .page-content, body.page-product .page-content p{ color: #000 !important; } body.page-product .product-flag.new, body.page-product .product-flags .new body.page-category .product-flag.new, body.page-index .product-flag.new{ display: none !important; } /* ========================================================= YLAB — OVERRIDE GLOBAL Remplacer TOUT le bleu #24b9d7 par #015ba4 ========================================================= */ /* TEXTE + LIENS */ a, a:hover, a:focus, a:active, .text-primary, .link-primary{ color: #015ba4 !important; } /* BOUTONS */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-outline-primary{ background-color: #015ba4 !important; border-color: #015ba4 !important; color: #fff !important; } /* ÉTATS ACTIFS / HOVER */ .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover, .dropdown-item.active, .dropdown-item:active{ color: #015ba4 !important; border-color: #015ba4 !important; } /* BADGES / LABELS */ .badge-primary, .product-flag.new, .label-primary{ background-color: #015ba4 !important; color: #fff !important; } /* ICÔNES (Material / FontAwesome / SVG hérités) */ .material-icons, .material-icons-outlined, svg, svg path{ fill: currentColor; } /* BORDURES ACTIVES */ .border-primary, input:focus, textarea:focus, select:focus{ border-color: #015ba4 !important; box-shadow: 0 0 0 0.1rem rgba(1,91,164,0.25) !important; } /* CHECKBOX / RADIO */ .custom-control-input:checked ~ .custom-control-label::before{ background-color: #015ba4 !important; border-color: #015ba4 !important; } /* PAGINATION */ .page-item.active .page-link{ background-color: #015ba4 !important; border-color: #015ba4 !important; color: #fff !important; } /* ========================================================= YLAB — Produit : vignette active = bleu YLab (Classic + variantes slick/swiper) ========================================================= */ /* Cas Classic (thumb "selected/active") */ body.page-product .product-images .thumb-container .thumb.selected, body.page-product .product-images .thumb-container .thumb.active, body.page-product .product-images .thumb-container .thumb:hover{ outline-color: #015ba4 !important; border-color: #015ba4 !important; box-shadow: 0 0 0 2px #015ba4 !important; } /* Variantes fréquentes (carrousels) */ body.page-product .product-images .slick-current img, body.page-product .product-images .swiper-slide-thumb-active img{ outline-color: #015ba4 !important; border-color: #015ba4 !important; box-shadow: 0 0 0 2px #015ba4 !important; } /* ========================================================= YLAB — Contact : bouton "Choisir un fichier" = bleu YLab ========================================================= */ body.page-contact input[type="file"]::file-selector-button{ background: #015ba4 !important; border: 1px solid #015ba4 !important; color: #fff !important; padding: .45rem .75rem; border-radius: .25rem; cursor: pointer; } body.page-contact input[type="file"]::-webkit-file-upload-button{ background: #015ba4 !important; border: 1px solid #015ba4 !important; color: #fff !important; padding: .45rem .75rem; border-radius: .25rem; cursor: pointer; } /* Hover */ body.page-contact input[type="file"]::file-selector-button:hover, body.page-contact input[type="file"]::-webkit-file-upload-button:hover{ filter: brightness(0.95); } /* ========================================================= YLAB — Contact : bouton "Choisir un fichier" (bootstrap-filestyle) ========================================================= */ body.page-contact label.btn.btn-default[for="file-upload"], body.page-contact .bootstrap-filestyle label.btn.btn-default{ background: #015ba4 !important; border-color: #015ba4 !important; color: #fff !important; } /* Icône + texte dans le bouton */ body.page-contact .bootstrap-filestyle label.btn.btn-default .glyphicon, body.page-contact .bootstrap-filestyle label.btn.btn-default .buttonText{ color: #fff !important; } /* ========================================================= YLAB — Produit : prix en bleu YLab ========================================================= */ body.page-product .product-prices .product-price, body.page-product .product-prices .product-price.h5, body.page-product .current-price .price, body.page-product .current-price-value, body.page-product .product-price-and-shipping .price{ color: #015ba4 !important; } /* ========================================================= YLAB — PRODUIT : afficher TTC à côté du prix + supprimer "Avec taxes" ========================================================= */ /* Supprimer "Avec taxes" */ body.page-product .tax-shipping-delivery-label{ display: none !important; } /* Prix + TTC sur la même ligne */ body.page-product .current-price{ display: inline-flex !important; align-items: baseline !important; gap: 8px !important; } /* Ajouter "TTC" */ body.page-product .current-price::after{ content: "TTC"; font-size: 0.85em; font-weight: 600; color: inherit; /* même couleur que le prix */ opacity: 1; } /* ========================================================= YLAB — PRODUIT : aligner haut image = haut prix (robuste) ========================================================= */ @media (min-width: 992px){ /* 1) La rangée produit : alignement en haut (le bon sélecteur) */ body.page-product .row.product-container, body.page-product .row.product-container.js-product-container, body.page-product .product-container.js-product-container{ align-items: flex-start !important; } /* 2) Les colonnes : pas de décalage vertical */ body.page-product .row.product-container > [class*="col-"], body.page-product .row.product-container.js-product-container > [class*="col-"]{ align-self: flex-start !important; margin-top: 0 !important; padding-top: 0 !important; } /* 3) Bloc image : neutraliser les margins/paddings parasites */ body.page-product .images-container, body.page-product .product-cover, body.page-product .product-images{ margin-top: 0 !important; padding-top: 0 !important; } /* 4) Bloc prix/info : neutraliser aussi */ body.page-product .product-information, body.page-product .product-prices{ margin-top: 0 !important; padding-top: 0 !important; } } /* ========================================================= YLAB — PRODUIT : espace sous header (robuste, indépendant du layout) ========================================================= */ /* Valeurs par défaut (MOBILE) */ body.page-product{ --ylab-product-gap-under-header: 12px; /* mobile */ } /* Valeurs DESKTOP */ @media (min-width: 992px){ body.page-product{ --ylab-product-gap-under-header: 20px; /* desktop */ } } /* Spacer réel sous le header (ne peut pas être "mangé" par des marges) */ body.page-product #main::before{ content: ""; display: block; height: var(--ylab-product-gap-under-header); } /* ========================================================= YLAB — HOME : masquer complètement le header ========================================================= */ /* Home uniquement */ body#index #header{ display: none !important; } /* Supprimer aussi l’espace que le thème réserve sous le header */ body#index #wrapper, body#index #main{ padding-top: 0 !important; margin-top: 0 !important; } /* ========================================================= YLAB — HOME : fond vert foncé PARTOUT (override des fonds globaux) ========================================================= */ body#index.page-index{ --ylab-home-bg-dark: #0F2E2C; } /* 1) Racine + wrappers (mêmes cibles que tes règles globales) */ body#index.page-index, body#index.page-index #wrapper, body#index.page-index #main, body#index.page-index #content-wrapper, body#index.page-index #content, body#index.page-index section#content{ background: var(--ylab-home-bg-dark) !important; } /* 2) Les containers qui te remettent le vert clair (C’est LA fuite que tu vois) */ body#index.page-index #wrapper > .container, body#index.page-index #content-wrapper > .container, body#index.page-index #content-wrapper .container, body#index.page-index #content .container, body#index.page-index main > .container, body#index.page-index section#content > .container{ background: var(--ylab-home-bg-dark) !important; } /* 3) Sécurité : lignes/colonnes Bootstrap ne doivent jamais peindre du clair */ body#index.page-index .row, body#index.page-index [class*="col-"]{ background: transparent !important; } /* 4) Footer continuité */ body#index.page-index #footer, body#index.page-index #footer .footer-container, body#index.page-index #footer .footer-bottom{ background: var(--ylab-home-bg-dark) !important; } /* ========================================================= YLAB — Catégorie 10 : enlever le fond vert clair du bloc description ========================================================= */ body#category.category-id-10 #js-product-list-header .block-category, body#category.category-id-10 #js-product-list-header .block-category .card, body#category.category-id-10 #js-product-list-header .block-category .card-body, body#category.category-id-10 .category-description{ background: #C6E2DB !important; box-shadow: none !important; border: 0 !important; } /* ========================================================= YLAB — Pages catégories : masque compteur + tri (DOM réel PS 8.2 / theme Classic) ========================================================= */ /* Supprime "Il y a X produit(s)" */ body#category #products .total-products { display: none !important; } /* Supprime le bloc "Trier par" */ body#category #products .products-sort-order, body#category #products select, body#category #products .col-lg-7 { display: none !important; } /* ========================================================= YLAB — "Déconnexion" + nom du compte (desktop) ✅ YLAB — NE PAS MODIFIER Fix header en état connecté (empêche le nom de casser le layout) Validé le 23/01 ========================================================= */ @media (min-width: 992px){ /* 1) Cache "Déconnexion" */ #header .user-info a.logout{ display: none !important; } /* 2) Garde le lien "Mon compte" (qui affiche le nom) comme seul item visible */ #header .user-info a[href*="my-account"], #header .user-info a[href*="mon-compte"]{ display: inline-flex !important; align-items: center !important; /* 3) Empêche ce lien de dérailler le layout */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 160px !important; /* ajuste ensuite (140/180) si besoin */ vertical-align: top !important; } } #header{ /* Air au-dessus du logo / baseline */ --ylab-header-top-pad: 14px; /* ajuste librement */ --ylab-header-bottom-pad: 6px; /* optionnel : air sous le header */ } @media (min-width: 992px){ /* Air vertical autour du logo + baseline */ #header .header-top{ padding-top: var(--ylab-header-top-pad) !important; padding-bottom: var(--ylab-header-bottom-pad) !important; } } /* ========================================================= YLAB — Contactez-nous : empêcher l’icône enveloppe en double ========================================================= */ @media (min-width: 992px){ /* Si le lien contient déjà une icône , on supprime notre pseudo-icône */ #header .header-nav a[href*="contact"] i ~ * {} #header .header-nav a[href*="contact"] i{ /* juste pour s'assurer qu'il existe */ } #header .header-nav a[href*="contact"]:has(i)::before{ content: none !important; display: none !important; } /* Sécurité : sur état actif/hover/focus, pas de deuxième ::before */ #header .header-nav a[href*="contact"]:hover::before, #header .header-nav a[href*="contact"]:focus::before, #header .header-nav a[href*="contact"]:active::before{ content: "mail_outline" !important; /* garde 1 seule icône */ } } /* ========================================================= YLAB — PRODUITS : afficher la catégorie à la place de la baseline ========================================================= */ @media (min-width: 992px){ body#product #header .ylab-header-baseline{ /* rien à faire : le JS remplace le texte */ } } /* ========================================================= YLAB — PRODUITS : prix principal plus grand ========================================================= */ body#product{ --ylab-product-price-size: 2.1rem; /* taille du prix */ --ylab-product-price-weight: 700; /* graisse */ --ylab-product-price-line: 1.1; /* interligne */ } body#product .product-prices .current-price span{ font-size: var(--ylab-product-price-size) !important; font-weight: var(--ylab-product-price-weight) !important; line-height: var(--ylab-product-price-line) !important; } /* ========================================================= YLAB — CATÉGORIES : supprimer "Nouveau" + coeur ========================================================= */ /* Pages catégories uniquement */ body#category{ /* --- Étiquette "Nouveau" --- */ .product-flags, .product-flag.new{ display: none !important; } } /* ========================================================= YLAB — CATÉGORIES : supprimer le coeur (sélecteur exact) ========================================================= */ body#category #js-product-list > div.products.row > div > article > div > button{ display: none !important; /* supprime le bouton complet */ } /* ========================================================= YLAB — CHECKOUT (/commande) : header identique au reste ========================================================= */ @media (min-width: 992px){ body#checkout #header .header-top{ padding-top: var(--ylab-header-top-pad, 14px) !important; padding-bottom: var(--ylab-header-bottom-pad, 6px) !important; } /* sur checkout, on NE masque PAS le titre */ body#checkout #header .ylab-header-pagetitle{ display: block !important; } } /* ========================================================= YLAB — CHECKOUT : alignement vertical barre utilitaire (desktop) ========================================================= */ @media (min-width: 992px){ /* Micro-ajustement checkout */ body#checkout #header{ --ylab-contact-icon-shift: 10px; /* descends l'enveloppe */ --ylab-contact-shift: 10px; /* descends tout le bloc contact */ } /* Même géométrie que les pages normales */ body#checkout #header .header-nav{ padding-top: 0 !important; padding-bottom: 0 !important; } body#checkout #header .header-nav .right-nav{ display: flex !important; align-items: center !important; height: var(--ylab-util-h, 34px) !important; } /* Force l'alignement des items */ body#checkout #header .header-nav #_desktop_user_info a, body#checkout #header .header-nav #_desktop_cart .header, body#checkout #header .header-nav a[href*="contact"]{ height: var(--ylab-util-h, 34px) !important; line-height: var(--ylab-util-h, 34px) !important; display: inline-flex !important; align-items: center !important; top: 0 !important; } /* On garde icônes neutres par défaut */ body#checkout #header .header-nav i{ transform: none !important; top: 0 !important; } /* Descendre tout "Contactez-nous" */ body#checkout #header .header-nav a[href*="contact"]{ transform: translateY(var(--ylab-contact-shift)) !important; } /* Descendre l'enveloppe (pseudo-élément) */ body#checkout #header .header-nav a[href*="contact"]::before{ transform: translateY(var(--ylab-contact-icon-shift)) !important; top: 0 !important; } } /* ========================================================= YLAB — CHECKOUT : même règle “compte” que le reste (pas de Déconnexion + pas d'icônes doublées) ========================================================= */ @media (min-width: 992px){ /* 1) Masque Déconnexion dans le header (checkout) */ body#checkout #header .header-nav #_desktop_user_info a[href*="logout"], body#checkout #header .header-nav #_desktop_user_info a.logout{ display: none !important; } /* 2) Le lien Mon compte (nom) garde son icône */ body#checkout #header .header-nav #_desktop_user_info a[href*="my-account"] i, body#checkout #header .header-nav #_desktop_user_info a[href*="mon-compte"] i{ display: inline-block !important; } /* 3) Sécurité anti-dérapage du nom */ body#checkout #header .header-nav #_desktop_user_info a[href*="my-account"], body#checkout #header .header-nav #_desktop_user_info a[href*="mon-compte"]{ max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* ========================================================= YLAB — CHECKOUT (tunnel) : afficher le VRAI footer (#footer) et masquer le footer minimal (footer.page-footer) ========================================================= */ /* 1) Le footer minimal du thème (celui qui affiche "Conditions d'utilisation") */ body#checkout footer.page-footer, body#order-confirmation footer.page-footer, body#cart footer.page-footer{ display: none !important; } /* 2) On force ton vrai footer (screen 1) */ body#checkout #footer, body#order-confirmation #footer, body#cart #footer{ display: block !important; visibility: visible !important; } /* ========================================================= YLAB — CHECKOUT : réglage fin "Contactez-nous" (desktop) ========================================================= */ @media (min-width: 992px){ body#checkout #header{ --ylab-contact-shift: 7px !important; --ylab-contact-icon-shift: 0px !important; } } /* ========================================================= YLAB — MON COMPTE : supprimer les tuiles blanches (le fond est sur .link-item, pas sur le ) ========================================================= */ body#my-account #content .links a, body#my-account #content .links a .link-item{ background: transparent !important; box-shadow: none !important; border: none !important; } /* Footer compte YLab */ .ylab-customer-footer{ text-align: left !important; margin-top: 0px !important; padding-bottom: 40px !important; /* air sous le lien */ } .ylab-back-account{ display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; } /* ========================================================= YLAB — IDENTITÉ (/identite) : micro-textes plus petits + nettoyage ========================================================= */ body#identity{ --ylab-help-font: 12px; /* ajuste si tu veux (11–13px) */ --ylab-help-lh: 1.25; } /* 1) Textes d'aide / contraintes (lettres + point, etc.) */ body#identity .form-control-comment, body#identity .help-block, body#identity .form-text, body#identity .password-requirements p, body#identity .password-strength-feedback, body#identity .password-strength-text{ font-size: var(--ylab-help-font) !important; line-height: var(--ylab-help-lh) !important; } /* 2) "Vous pouvez vous désinscrire..." (paragraphe newsletter) */ body#identity p.small{ font-size: var(--ylab-help-font) !important; line-height: var(--ylab-help-lh) !important; } /* 3) Supprimer "(Ex. : 31/05/1970)" (aide date de naissance) */ /* Cas le plus fréquent : c’est un .form-control-comment près du champ birthday */ body#identity input[name="birthday"] ~ .form-control-comment, body#identity input[name="birthday"] + .form-control-comment{ display: none !important; } /* Variante : si c’est rendu en juste après le champ */ body#identity input[name="birthday"] ~ small, body#identity input[name="birthday"] + small{ display: none !important; } /* ========================================================= YLAB — MON COMPTE : masquer "Mes listes" ========================================================= */ /* Le lien/tile wishlist contient souvent 'blockwishlist' dans l'URL */ body#my-account #content .links a[href*="blockwishlist"], body#my-account #content .links a[href*="wishlist"]{ display: none !important; } /* ========================================================= YLAB — MOBILE HEADER MASTER (≤ 991px) Remplace tous tes blocs précédents liés au header mobile. ========================================================= */ @media (max-width: 991px){ :root{ /* Logo */ --ylab-header-logo-height-mobile: 70px; /* Header padding (height) */ --ylab-header-padding-top-mobile: 10px; --ylab-header-padding-bottom-mobile: 10px; --ylab-header-padding-x-mobile: 18px; /* Espace à gauche du logo (dans le header) */ --ylab-logo-left-gap-mobile: 3px; /* Espace entre logo et titre */ --ylab-logo-title-gap-mobile: 12px; /* Titre */ --ylab-header-title-fontsize-mobile: 16px; /* Icônes (panier/compte) */ --ylab-mobile-icons-gap: 12px; /* Badge panier (position fine) */ --ylab-cart-badge-top: -4px; --ylab-cart-badge-right: -6px; } /* --------------------------------------------------------- 0) Hard lock anti-doublon (desktop doit disparaître en mobile) --------------------------------------------------------- */ #header .header-nav .d-none.d-lg-block, #header .header-top #_desktop_logo, #header .header-top .header-top-right{ display: none !important; } #header .header-nav .ylab-mobile-header{ display: flex !important; } /* --------------------------------------------------------- 1) Header nav padding (barre mobile) --------------------------------------------------------- */ #header .header-nav{ padding-top: var(--ylab-header-padding-top-mobile) !important; padding-bottom: var(--ylab-header-padding-bottom-mobile) !important; } #header .header-nav .container{ padding-left: var(--ylab-header-padding-x-mobile) !important; padding-right: var(--ylab-header-padding-x-mobile) !important; } /* Burger/menu icon masqué */ #header .header-nav #menu-icon{ display: none !important; } /* --------------------------------------------------------- 2) Layout mobile header (logo+titre à gauche / icônes à droite) --------------------------------------------------------- */ #header .header-nav .ylab-mobile-header{ align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; position: relative !important; } /* Supprime tout float résiduel */ #header .header-nav .ylab-mobile-header > div{ float: none !important; } /* --------------------------------------------------------- 3) Bloc marque (logo + titre) --------------------------------------------------------- */ #header .header-nav .ylab-mobile-brand{ display: flex !important; align-items: flex-start !important; gap: var(--ylab-logo-title-gap-mobile) !important; padding-left: var(--ylab-logo-left-gap-mobile) !important; position: relative !important; z-index: 50 !important; min-width: 0 !important; /* permet le wrap/clamp du titre */ } /* Conteneur logo injecté par PrestaShop */ #header .header-nav #_mobile_logo{ display: inline-flex !important; align-items: flex-start !important; line-height: 0 !important; position: relative !important; z-index: 60 !important; flex: 0 0 auto !important; max-width: none !important; } /* Image logo : ratio conservé (pas de déformation) */ #header .header-nav #_mobile_logo img{ display: block !important; height: var(--ylab-header-logo-height-mobile) !important; width: auto !important; max-height: none !important; max-width: none !important; object-fit: contain !important; } /* Titre à droite du logo : 2 lignes max */ #header .header-nav .ylab-header-page-title{ font-size: var(--ylab-header-title-fontsize-mobile) !important; line-height: 1.15 !important; font-weight: 600 !important; margin-top: 2px !important; /* wrap + clamp 2 lignes */ white-space: normal !important; overflow: hidden !important; text-overflow: clip !important; max-width: 55vw !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } /* --------------------------------------------------------- 4) Icônes à droite : panier à gauche du compte, alignement haut --------------------------------------------------------- */ #header .header-nav .ylab-mobile-icons{ display: flex !important; flex-direction: row !important; /* ✅ en ligne */ align-items: flex-start !important; /* ✅ alignement haut */ justify-content: flex-end !important; gap: var(--ylab-mobile-icons-gap) !important; position: relative !important; z-index: 10 !important; flex-shrink: 0 !important; } /* Chaque bloc icône */ #header .header-nav #_mobile_cart, #header .header-nav #_mobile_user_info{ display: inline-flex !important; align-items: flex-start !important; justify-content: center !important; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0 !important; } /* Liens internes : alignement stable */ #header .header-nav #_mobile_cart a, #header .header-nav #_mobile_user_info a{ display: inline-flex !important; align-items: flex-start !important; line-height: 1 !important; } /* Badge panier : ne doit pas décaler l’icône */ #header .header-nav #_mobile_cart .cart-products-count, #header .header-nav #_mobile_cart .cart-count, #header .header-nav #_mobile_cart .badge{ position: absolute !important; top: var(--ylab-cart-badge-top) !important; right: var(--ylab-cart-badge-right) !important; } /* Nettoyage micro : éviter marges internes parasites */ #header .header-nav #_mobile_cart *, #header .header-nav #_mobile_user_info *{ margin-top: 0 !important; margin-bottom: 0 !important; } /* Ancien clearfix inutile */ #header .header-nav .clearfix{ display: none !important; } } /* ========================================================= DESKTOP — cacher le header mobile ========================================================= */ @media (min-width: 992px){ #header .header-nav .ylab-mobile-header{ display: none !important; } } /* ========================================================= YLAB — CMS EVENT CONTENT (SAFE SCOPE) Scope: uniquement pages CMS + contenu dans .ylab-page + Spécifique événementiel via .ylab-evenementiel ✅ Aucun impact header/footer desktop ========================================================= */ /* --------------------------------------------------------- 1) SETTINGS (variables faciles) --------------------------------------------------------- */ body#cms .ylab-page, body.page-cms .ylab-page{ /* === Couleurs === */ --ylab-title-color: #0F2E2C; /* H4 + titres simples */ --ylab-text-color: #111; /* texte courant */ --ylab-band-bg: #0F2E2C; /* fond bandeau H2 */ --ylab-band-text: #ffffff; /* texte bandeau H2 */ --ylab-band-border: rgba(0,0,0,0.08); /* bordure optionnelle */ --ylab-band-top-bg: #C6E2DB; /* fond bouton ↑ */ --ylab-band-top-border: rgba(1,91,164,0.25); /* bordure bouton ↑ */ /* === Typo === */ --ylab-text-size: 16px; --ylab-text-line: 1.35; --ylab-h4-size: 1.05rem; --ylab-h4-weight: 700; --ylab-band-font-size: 1.35rem; /* H2 bandeau desktop */ --ylab-band-font-weight: 800; /* === Espacements DESKTOP === */ --ylab-space-h2-top: 60px; --ylab-space-h2-bottom: 40px; --ylab-space-h4-top: 30px; --ylab-space-h4-bottom: 20px; --ylab-space-img-top: 30px; --ylab-space-img-bottom: 14px; --ylab-space-p-bottom: 12px; --ylab-space-list-bottom: 14px; /* === Layout === */ --ylab-page-max: 980px; --ylab-page-pad-x: 14px; --ylab-visual-gap: 18px; --ylab-visual-box-bg: rgba(15,46,44,0.06); --ylab-visual-box-border: rgba(15,46,44,0.10); --ylab-visual-box-bg-hover: rgba(235,140,35,0.12); --ylab-visual-box-border-hover: rgba(235,140,35,0.35); /* ========================================================= 1bis) SPACING SETTINGS (pilotables) ========================================================= */ /* --- Espace SOUS le header (au-dessus du contenu CMS) --- */ --ylab-space-after-header: -10px; /* DESKTOP (⬅ diminue ici) */ /* --- Liens dessins (menu visuel événementiel) --- */ --ylab-visual-top-space: 30px; /* DESKTOP : espace au-dessus des 3 images-liens */ --ylab-visual-bottom-space: 30px; /* DESKTOP : espace en-dessous des 3 images-liens */ } /* Mobile overrides (uniquement ce qui change) */ @media (max-width: 575px){ body#cms .ylab-page, body.page-cms .ylab-page{ --ylab-band-font-size: 1.15rem; --ylab-space-h2-top: 20px; --ylab-space-h2-bottom: 10px; --ylab-space-h4-top: 16px; --ylab-space-h4-bottom: 6px; --ylab-space-img-top: 12px; --ylab-space-img-bottom: 12px; --ylab-space-p-bottom: 12px; --ylab-space-list-bottom: 12px; /* --- Espace sous header (mobile) --- */ --ylab-space-after-header: 16px; /* --- Liens dessins (mobile) --- */ --ylab-visual-top-space: 6px; --ylab-visual-bottom-space: 14px; } } /* --------------------------------------------------------- 2) CONTENEUR CMS (page) --------------------------------------------------------- */ body#cms .ylab-page, body.page-cms .ylab-page{ max-width: var(--ylab-page-max); margin: 0 auto; padding-left: var(--ylab-page-pad-x); padding-right: var(--ylab-page-pad-x); box-sizing: border-box; /* ✅ Espace sous le header (CMS uniquement) */ margin-top: var(--ylab-space-after-header); } body#cms .ylab-page *, body.page-cms .ylab-page *{ box-sizing: border-box; } /* Texte courant */ body#cms .ylab-page p, body#cms .ylab-page li, body.page-cms .ylab-page p, body.page-cms .ylab-page li{ font-size: var(--ylab-text-size); line-height: var(--ylab-text-line); margin: 0 0 var(--ylab-space-p-bottom) 0; color: var(--ylab-text-color); } /* Liens sobres dans CMS */ body#cms .ylab-page a, body.page-cms .ylab-page a{ color: inherit; text-decoration: underline; } /* Si le thème transforme certains liens en boutons (dans CMS), on neutralise */ body#cms .ylab-page a.btn, body#cms .ylab-page a.button, body#cms .ylab-page a[class*="btn"], body#cms .ylab-page a[class*="button"], body.page-cms .ylab-page a.btn, body.page-cms .ylab-page a.button, body.page-cms .ylab-page a[class*="btn"], body.page-cms .ylab-page a[class*="button"]{ all: unset; color: inherit; text-decoration: underline; cursor: pointer; } /* Listes */ body#cms .ylab-page ul, body#cms .ylab-page ol, body.page-cms .ylab-page ul, body.page-cms .ylab-page ol{ margin: 0 0 var(--ylab-space-list-bottom) 20px; padding: 0; } body#cms .ylab-page ul li, body.page-cms .ylab-page ul li{ list-style: disc; margin: 0 0 6px 0; } /* --------------------------------------------------------- 3) TITRES H4 --------------------------------------------------------- */ body#cms .ylab-page h4, body.page-cms .ylab-page h4{ margin-top: var(--ylab-space-h4-top); margin-bottom: var(--ylab-space-h4-bottom); font-size: var(--ylab-h4-size); font-weight: var(--ylab-h4-weight); line-height: 1.25; color: var(--ylab-title-color); } /* Evite un “double espace” après titres */ body#cms .ylab-page h4 + p, body.page-cms .ylab-page h4 + p{ margin-top: 0; } /* --------------------------------------------------------- 4) MENU VISUEL (haut de page) — piloté par variables --------------------------------------------------------- */ body#cms .ylab-evenementiel .ylab-visual-menu, body.page-cms .ylab-evenementiel .ylab-visual-menu{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ylab-visual-gap); align-items: start; /* ✅ réglages demandés (desktop/mobile via variables) */ margin-top: var(--ylab-visual-top-space); margin-bottom: var(--ylab-visual-bottom-space); } body#cms .ylab-evenementiel .ylab-visual-item, body.page-cms .ylab-evenementiel .ylab-visual-item{ text-align: center; } body#cms .ylab-evenementiel .ylab-visual-item a, body.page-cms .ylab-evenementiel .ylab-visual-item a{ display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 110px; border-radius: 18px; text-decoration: none; background: var(--ylab-visual-box-bg); border: 1px solid var(--ylab-visual-box-border); transition: transform .15s ease, background .15s ease, border-color .15s ease; } body#cms .ylab-evenementiel .ylab-visual-item a:hover, body.page-cms .ylab-evenementiel .ylab-visual-item a:hover{ transform: translateY(-2px); background: var(--ylab-visual-box-bg-hover); border-color: var(--ylab-visual-box-border-hover); } body#cms .ylab-evenementiel .ylab-visual-item img, body.page-cms .ylab-evenementiel .ylab-visual-item img{ max-width: 120px; max-height: 120px; width: auto; height: auto; display: block; } body#cms .ylab-evenementiel .ylab-visual-title, body.page-cms .ylab-evenementiel .ylab-visual-title{ margin-top: 10px; font-size: 0.95rem; line-height: 1.25; font-weight: 700; color: var(--ylab-text-color); } /* Menu visuel responsive */ @media (max-width: 991px){ body#cms .ylab-evenementiel .ylab-visual-menu, body.page-cms .ylab-evenementiel .ylab-visual-menu{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px){ body#cms .ylab-evenementiel .ylab-visual-menu, body.page-cms .ylab-evenementiel .ylab-visual-menu{ grid-template-columns: 1fr; gap: 14px; } body#cms .ylab-evenementiel .ylab-visual-item a, body.page-cms .ylab-evenementiel .ylab-visual-item a{ width: 100%; height: 84px; border-radius: 16px; } } /* --------------------------------------------------------- 5) H2 BANDEAUX (ylab-h2band) --------------------------------------------------------- */ body#cms .ylab-page .ylab-h2band, body.page-cms .ylab-page .ylab-h2band{ display: flex; align-items: center; gap: 10px; margin-top: var(--ylab-space-h2-top); margin-bottom: var(--ylab-space-h2-bottom); padding: 10px 12px; border-radius: 10px; background: var(--ylab-band-bg); color: var(--ylab-band-text); border: 1px solid var(--ylab-band-border); font-size: var(--ylab-band-font-size); font-weight: var(--ylab-band-font-weight); line-height: 1.2; } body#cms .ylab-page .ylab-h2band__icon img, body.page-cms .ylab-page .ylab-h2band__icon img{ display: block; width: 90px; height: 90px; object-fit: contain; } body#cms .ylab-page .ylab-h2band__text, body.page-cms .ylab-page .ylab-h2band__text{ flex: 1; color: var(--ylab-band-text); } /* Bouton ↑ retour haut */ body#cms .ylab-page .ylab-h2band__top, body.page-cms .ylab-page .ylab-h2band__top{ text-decoration: none; font-weight: 900; color: var(--ylab-band-text); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ylab-band-top-bg); border: 1px solid var(--ylab-band-top-border); transition: transform .15s ease, background .15s ease; } body#cms .ylab-page .ylab-h2band__top:hover, body.page-cms .ylab-page .ylab-h2band__top:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.55); } /* --------------------------------------------------------- 6) FULL WIDTH IMAGES + espacement pilotable --------------------------------------------------------- */ body#cms .ylab-fullwidth-image, body.page-cms .ylab-fullwidth-image{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: var(--ylab-space-img-top); margin-bottom: var(--ylab-space-img-bottom); line-height: 0; /* supprime l’espace inline sous image */ } body#cms .ylab-fullwidth-image img, body.page-cms .ylab-fullwidth-image img{ display: block; width: 100%; height: auto; max-width: none; } /* Variante centered : limite un peu (utile pour PNG/illus) */ body#cms .ylab-fullwidth-image--centered img, body.page-cms .ylab-fullwidth-image--centered img{ width: min(1200px, 100%); margin: 0 auto; } /* --------------------------------------------------------- 7) SWITCH IMAGES desktop/mobile (FORCÉ) Fix: en desktop, les 2 images s’affichent --------------------------------------------------------- */ /* Desktop: show desktop, hide mobile */ body#cms .ylab-page img.ylab-only-desktop, body.page-cms .ylab-page img.ylab-only-desktop{ display: block !important; } body#cms .ylab-page img.ylab-only-mobile, body.page-cms .ylab-page img.ylab-only-mobile{ display: none !important; } /* Mobile: inverse */ @media (max-width: 575px){ body#cms .ylab-page img.ylab-only-desktop, body.page-cms .ylab-page img.ylab-only-desktop{ display: none !important; } body#cms .ylab-page img.ylab-only-mobile, body.page-cms .ylab-page img.ylab-only-mobile{ display: block !important; } } /* ========================================================= CMS — neutraliser l’espace du header de page (pas le header site) ========================================================= */ body#cms #main > header, body.page-cms #main > header{ margin: 0 !important; /* <-- enlève le margin-bottom 1.563rem */ padding: 0 !important; } /* ========================================================= YLAB — Encadré exclusivité Cocoricorando ========================================================= */ .ylab-exclusivite-cocorico{ background: #E7F3F1; /* vert très pâle YLab */ border-left: 6px solid #0F2E2C; /* vert foncé YLab */ padding: 16px 18px; margin: 22px 0 10px 0; border-radius: 10px; font-size: 0.95rem; line-height: 1.4; color: #0F2E2C; font-weight: 600; /* ← léger gras élégant */ box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* ========================================================= YLAB — CATEGORY 12 ( /12-boutique-ylab ) - Masquer "Sous-catégories" - Fond vert clair page - Masquer la grille produits - Sous-catégories : cartes vert clair + titre au-dessus + image grande - Hover : pas de contour bleu + zoom fluide de l'image - Espaces image (haut + bas) paramétrables ========================================================= */ body.category-id-12{ /* Couleurs */ --ylab-bg-soft: #C6E2DB; /* vert clair YLab */ /* Carte */ --ylab-card-pad-x: 20px; /* padding horizontal */ --ylab-card-pad-y: 10px; /* padding vertical */ /* Image */ --ylab-img-height: 200px; /* taille du dessin */ --ylab-hover-scale: 1.10; /* intensité du zoom */ /* Ajustement fin image (équivalent de tes -30 / -50) */ --ylab-img-shift-up: 30px; /* remonte l’image */ --ylab-img-shift-down: 50px; /* réduit l’espace sous l’image */ } /* 1) Masquer le titre "Sous-catégories" */ body.category-id-12 #subcategories h2.subcategory-heading{ display: none !important; } /* 2) Fond vert clair des conteneurs */ body.category-id-12 .card, body.category-id-12 .card-block, body.category-id-12 #subcategories, body.category-id-12 .block-category{ background-color: var(--ylab-bg-soft) !important; border: none !important; } /* 3) Masquer la grille de produits */ body.category-id-12 #js-product-list, body.category-id-12 #products{ display: none !important; } /* 4) Carte sous-catégorie */ body.category-id-12 #subcategories li{ background: var(--ylab-bg-soft) !important; border: none !important; border-radius: 8px; box-shadow: 0 3px 8px rgba(0,0,0,0.10); padding: var(--ylab-card-pad-y) var(--ylab-card-pad-x) !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* Neutralise hauteurs parasites du thème */ height: auto !important; min-height: 0 !important; } /* Lien interne sans padding/hauteur parasite */ body.category-id-12 #subcategories li > a{ display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; } /* 5) Titre dans la carte */ body.category-id-12 #subcategories li h5{ order: -1; margin: 0 !important; padding: 0 !important; font-size: 15px; font-weight: 600; } /* 6) Bloc image : ajuste VRAIMENT l’espace (layout réel) */ body.category-id-12 #subcategories .subcategory-image{ background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; /* ✅ agit sur le layout (comme tes -30 / -50) */ margin-top: calc(-1 * var(--ylab-img-shift-up)) !important; margin-bottom: calc(-1 * var(--ylab-img-shift-down)) !important; } /* 7) Image : taille contrôlée + hover fluide */ body.category-id-12 #subcategories li img{ display: block !important; /* évite ligne fantôme inline */ height: var(--ylab-img-height) !important; width: auto !important; max-width: 100% !important; object-fit: contain; transform: translateZ(0) scale(1); transform-origin: center center; will-change: transform; transition: transform 220ms cubic-bezier(.2,.8,.2,1); } /* 8) Supprimer le contour bleu hover/focus */ body.category-id-12 #subcategories a, body.category-id-12 #subcategories a:hover, body.category-id-12 #subcategories a:focus, body.category-id-12 #subcategories a:active, body.category-id-12 #subcategories a:focus-visible{ outline: none !important; box-shadow: none !important; background: transparent !important; border: none !important; } /* 9) Zoom dessin au hover */ body.category-id-12 #subcategories a:hover img{ transform: translateZ(0) scale(var(--ylab-hover-scale)); } /* ========================================================= YLAB — PAGES BOUTIQUE (cat 10 / 13 / 14 / 15) - Masquer l'image en haut - Fond vert clair sur le bloc catégorie - Style du message "pas de produits" + lien retour ========================================================= */ body.category-id-10, body.category-id-13, body.category-id-14, body.category-id-15{ --ylab-bg-soft: #C6E2DB; --ylab-dark: #0F2E2C; } /* 1) Enlève l'image du bloc catégorie (le "cover") */ body.category-id-10 .category-cover, body.category-id-13 .category-cover, body.category-id-14 .category-cover, body.category-id-15 .category-cover{ display: none !important; } body.category-id-10 .block-category img, body.category-id-13 .block-category img, body.category-id-14 .block-category img, body.category-id-15 .block-category img{ display: none !important; } /* 2) Met le rectangle/bloc catégorie en vert clair */ body.category-id-10 .block-category, body.category-id-13 .block-category, body.category-id-14 .block-category, body.category-id-15 .block-category{ background: var(--ylab-bg-soft) !important; border: none !important; box-shadow: none !important; } /* 3) Message custom quand il n’y a pas de produits */ .ylab-empty-category{ background: #C6E2DB; color: #0F2E2C; padding: 18px 20px; border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,0.10); max-width: 900px; margin: 10px auto 30px auto; } .ylab-empty-category p{ margin: 0 0 10px 0; line-height: 1.4; } .ylab-empty-category .ylab-back-link{ display: inline-block; margin-top: 6px; font-weight: 700; text-decoration: none; color: #0F2E2C; border-bottom: 2px solid rgba(15,46,44,0.35); padding-bottom: 2px; } /* ========================================================= YLAB — Cat 10/13/14/15 : virer le bloc vide du haut ========================================================= */ body.category-id-10 .block-category, body.category-id-13 .block-category, body.category-id-14 .block-category, body.category-id-15 .block-category{ display: none !important; } /* Optionnel : remonter le contenu (si tu trouves encore trop d’air) */ body.category-id-10 #main, body.category-id-13 #main, body.category-id-14 #main, body.category-id-15 #main{ padding-top: 0 !important; margin-top: 0 !important; } /* ========================================================= YLAB — Empty state boutique (cat 10/13/14/15) : finitions ========================================================= */ body.category-id-10, body.category-id-13, body.category-id-14, body.category-id-15{ --ylab-bg-soft: #C6E2DB; --ylab-dark: #0F2E2C; --ylab-empty-top-gap: 32px; /* ✅ espace sous le header */ } /* 1) On masque le message Presta (si ton bloc YLab est présent) */ body.category-id-10 .ylab-empty-category ~ .no-products, body.category-id-13 .ylab-empty-category ~ .no-products, body.category-id-14 .ylab-empty-category ~ .no-products, body.category-id-15 .ylab-empty-category ~ .no-products{ display: none !important; } /* Variante : parfois Presta met le texte dans #js-product-list / #products */ body.category-id-10 .no-products, body.category-id-13 .no-products, body.category-id-14 .no-products, body.category-id-15 .no-products{ display: none !important; } /* 2) Descendre un peu le bloc */ .ylab-empty-category{ margin-top: var(--ylab-empty-top-gap) !important; } /* 3) Lien : pas souligné + effet hover */ .ylab-empty-category .ylab-back-link{ text-decoration: none !important; border-bottom: 0 !important; padding: 8px 12px; border-radius: 8px; display: inline-block; font-weight: 700; color: var(--ylab-dark); transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1); } /* Hover : léger lift + ombre (sans changer tes couleurs) */ .ylab-empty-category .ylab-back-link:hover{ transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); } /* ========================================================= YLAB — Empty state actif : on masque uniquement le message Presta (pas tout le conteneur produits) ========================================================= */ body.ylab-empty-boutique.category-id-10 #js-product-list .no-products, body.ylab-empty-boutique.category-id-13 #js-product-list .no-products, body.ylab-empty-boutique.category-id-14 #js-product-list .no-products, body.ylab-empty-boutique.category-id-15 #js-product-list .no-products, body.ylab-empty-boutique.category-id-10 #products .no-products, body.ylab-empty-boutique.category-id-13 #products .no-products, body.ylab-empty-boutique.category-id-14 #products .no-products, body.ylab-empty-boutique.category-id-15 #products .no-products{ display: none !important; } /* Fallback : certains thèmes affichent un paragraphe/alert "Aucun produit..." */ body.ylab-empty-boutique.category-id-10 #js-product-list p, body.ylab-empty-boutique.category-id-13 #js-product-list p, body.ylab-empty-boutique.category-id-14 #js-product-list p, body.ylab-empty-boutique.category-id-15 #js-product-list p, body.ylab-empty-boutique.category-id-10 #products p, body.ylab-empty-boutique.category-id-13 #products p, body.ylab-empty-boutique.category-id-14 #products p, body.ylab-empty-boutique.category-id-15 #products p{ /* on ne masque PAS tous les

en général : seulement si Presta est vide (flag) */ } /* ========================================================= BOUTIQUE — Cartes produits uniformes (taille = la plus petite) Pages catégories (et sous-catégories) ========================================================= */ body#category #products .products{ align-items: stretch; /* chaque colonne prend la même hauteur */ } /* La carte entière devient une colonne “rigide” */ body#category #products .product-miniature{ height: 100%; display: flex; } body#category #products .product-miniature .thumbnail-container{ height: 100%; display: flex; flex-direction: column; } /* ✅ Image : hauteur fixe (base) */ body#category #products .product-miniature .thumbnail-container .product-thumbnail{ display: block; flex: 0 0 auto; } /* Ajuste ici la taille si tu veux + petit/ + grand */ body#category #products .product-miniature .thumbnail-container .product-thumbnail img{ width: 100%; height: 220px; /* ← “taille uniforme” (desktop) */ object-fit: contain; /* pas de rognage, juste ajustement */ display: block; } /* ✅ Zone texte/price : ne doit plus faire varier la hauteur */ body#category #products .product-miniature .product-description{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; } /* ✅ Titre : 1 ligne = taille mini (le plus “petit” comme sur ta capture) */ body#category #products .product-miniature .product-description .product-title{ margin-bottom: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ✅ Prix et actions : pas d’étirement */ body#category #products .product-miniature .product-price-and-shipping{ margin-top: auto; /* reste collé en bas de la carte */ } /* Responsive */ @media (max-width: 991px){ body#category #products .product-miniature .thumbnail-container .product-thumbnail img{ height: 200px; } } @media (max-width: 576px){ body#category #products .product-miniature .thumbnail-container .product-thumbnail img{ height: 180px; } } /* ========================================================= PRODUCT MODAL (loupe page produit) — stop images étirées PrestaShop classic: #product-modal ========================================================= */ /* Le conteneur de l’image ne doit jamais imposer une hauteur fixe */ #product-modal .modal-dialog, #product-modal .modal-content, #product-modal .modal-body, #product-modal .product-cover-modal{ height: auto !important; } /* Image principale affichée en grand dans la modale */ #product-modal img, #product-modal .product-cover-modal img, #product-modal .js-modal-product-cover img{ width: auto !important; height: auto !important; /* ✅ clé anti-étirement */ max-width: 100% !important; max-height: 85vh !important; /* ✅ garde l’image dans l’écran */ object-fit: contain !important; /* ✅ conserve les proportions */ display: block; margin: 0 auto; /* ✅ centrée */ } /* Si un parent force une taille via "img { width:100%; height:100% }" */ #product-modal .product-cover-modal, #product-modal .js-modal-product-cover{ display: flex; align-items: center; justify-content: center; } /* Thumbnails à droite : idem (pas d’étirement) */ #product-modal .product-images img, #product-modal .js-modal-product-images img{ width: 100% !important; height: auto !important; object-fit: contain !important; display: block; } /* Masquer panier + quantité uniquement sur le produit ID 24 */ body#product.product-id-24 .product-add-to-cart, body#product.product-id-24 .product-quantity, body#product.product-id-24 .qty, body#product.product-id-24 #quantity_wanted_p, body#product.product-id-24 .product-actions { display: none !important; }