/* Theme Name: mescodespromo Theme URI: https://mescodespromo.fr Author: Mes Codes Promo Description: Thème personnalisé pour mescodespromo.fr basé sur la maquette fournie. Fond noir, couleurs du logo, accent magenta. Version: 0.1.2 Text Domain: mescodespromo */ /* FIX: Global Rule - Minimum 16px font size for inputs to prevent iOS zoom */ input, input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], input[type="date"], textarea, select, .form-row input, .form-row select, .form-row textarea { font-size: 16px !important; } /* Hide number input spinners (arrows) */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* Palette */ :root { --bg: #000000; --text: #f2f2f2; --muted: #b5b5b5; --accent: #ff33cc; /* extrait du logo */ --card: #333333; --card-border: #2a2a2a; } /* WhiteMode (activer avec [data-theme="light"] sur ou ) */ [data-theme="light"] { --bg: #ffffff; --text: #333333; --muted: #666666; --accent: #ff33cc; --card: #f7f7f7; --card-border: #e5e5e5; } [data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.9); background-image: none !important; /* Override inline style from PHP */ } [data-theme="light"] .coupon-card__thumb, [data-theme="light"] .shop-card__thumb { background: #f1f1f1; border-color: var(--card-border); } [data-theme="light"] .st5 { fill: none; stroke: #333333; stroke-dasharray: 4.02 4.02; } [data-theme="light"] .st3 { fill: #333333; } /* Toggle Delivery Icon based on theme */ .delivery-icon-light { display: none; } .delivery-icon-dark { display: block; } [data-theme="light"] .delivery-icon-light { display: block; } [data-theme="light"] .delivery-icon-dark { display: none; } /* Reset minimal */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; line-height: 1.5; } .st0, .st2 { fill: #fff; } .st1 { fill: transparent; } .st0, .st3 { font-family: Roboto, sans-serif; font-size: 18px; font-weight: 800; } .st4 { fill: #ff85e0; stroke: #f3c; } .st4, .st2, .st5 { stroke-miterlimit: 10; } .st6 { fill: #f3c; } .st3 { fill: #ff33cc; } .st2 { stroke: #fff; } .st5 { fill: none; stroke: #f3c; stroke-dasharray: 4.02 4.02; } /* ========================================= COUPON SVG STYLES (depuis coupon v4.html) ========================================= */ /* Animation de la partie rose au survol */ .coupon-svg-btn #rose { transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); transform-origin: left center; transform: scaleX(1.15) translateX(-10px); } .coupon-svg-btn:hover #rose { transform: scaleX(1.15) translateX(-30px); } /* Alternative avec le groupe #coupon si nécessaire */ .coupon-svg-btn #coupon:hover #rose { transform: scaleX(1.15) translateX(-30px); } /* ========================================= AJAX SEARCH STYLES ========================================= */ .ajax-results { position: absolute; top: 100%; left: 0; width: 76%; background: var(--card); /* Utilise la couleur de fond du thème */ border: 1px solid var(--card); border-radius: 0 0 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 1000; display: none; /* Caché par défaut */ overflow: hidden; margin-top: 2px; } [data-theme="light"] .ajax-results { position: absolute; top: 100%; left: 0; width: 76%; background: var(--card); /* Utilise la couleur de fond du thème */ border: 1px solid var(--card-border); border-radius: 0 0 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 1000; display: none; /* Caché par défaut */ overflow: hidden; margin-top: 2px; } [data-theme="light"] .search-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--card-border); text-decoration: none; transition: background 0.2s; color: var(--text); } .search-item { display: flex; background: var(--card); align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--card-border); text-decoration: none; transition: background 0.2s; color: var(--text); } .search-item:last-child { border-bottom: none; } .search-item:hover { background: rgba(255, 255, 255, 0.05); } [data-theme="light"] .search-item:hover { background: rgba(0, 0, 0, 0.05); } /* Partie gauche : Logo + Nom */ .search-item-left { display: flex; align-items: center; gap: 12px; } /* Style du petit logo dans la recherche */ .search-result-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; border: 1px solid var(--card-border); background: #fff; /* Fond blanc souvent mieux pour logos */ padding: 2px; } .search-result-ph { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #000; display: grid; place-items: center; font-weight: bold; font-size: 14px; } .search-item-name { font-weight: 500; font-size: 15px; } /* Partie droite : Compteur + Icône */ .search-item-right { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); } [data-theme="light"] .search-item-right { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .search-item-right svg { fill: var(--accent); /* Icône rose/accent */ } .search-item.no-result { padding: 15px; justify-content: center; color: var(--muted); font-style: italic; } /* Assure Roboto également dans les champs et leurs placeholders */ input, select, textarea, button { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } input::placeholder, textarea::placeholder { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } /* Styles pour les textarea (Pages Contact, Ajouter un code) */ textarea { width: 100%; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); outline: none; font-family: "Roboto", sans-serif; font-size: 16px; min-height: 120px; resize: vertical; } textarea:focus { border-color: var(--accent); } /* Poids de police */ h1, h2, h3, h4, h5, h6, .home-section__title, .brand-section__title, .boutique-hero__title { font-weight: 700; } .coupon-card__cta, .action-pill, .subscribe button, .subscribe--compact button { font-weight: 700; } a { color: var(--text); text-decoration: none; } a:hover { color: var(--accent); } /* Layout */ /* Footer: texte centré + éléments justifiés */ .site-footer { text-align: center; padding: 32px 0; } .site-footer .container { max-width: 1140px; margin: 0 auto; } .site-footer .footer-columns { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; } .site-footer .footer-columns>div { flex: 1 1 200px; min-width: 180px; text-align: center; /* centre le contenu des colonnes */ } .site-footer .footer-columns h4 { margin-top: 0; } .site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--card-border); padding-top: 12px; margin-top: 12px; flex-wrap: wrap; } .site-footer .footer-nav { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; } .site-footer .footer-nav a { color: var(--muted); font-size: 14px; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(6px); overflow: visible; } /* Étendre le header sur toute la largeur de la page */ .site-header .container { max-width: 1200px; width: 100%; padding-right: 16px; margin-top: 0px; } /* Nouveau layout header avec logo sur 2 lignes */ /* Nouveau layout header avec logo sur 2 lignes */ .header-layout { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; position: relative; } .header-row-top { display: grid; grid-template-columns: 260px 1fr 80px; align-items: center; gap: 20px; width: 100%; height: 90px; } .header-row-bottom { display: flex; align-items: center; width: 100%; } .header-logo { display: flex; align-items: center; height: 100%; } .header-logo .brand { display: flex; align-items: center; height: 100%; } .header-logo .brand__logo-img { display: block; width: 260px; object-fit: contain; margin-top: 0; } .header-search { display: flex; justify-content: center; align-items: center; padding: 0 40px; /* Restored to 40px */ } .search-wrapper { width: 100%; max-width: 100%; /* Removed 650px limit */ } .header-tools { display: flex; align-items: center; gap: 20px; } /* Ligne 2 du header (navigation) */ .header-nav { display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; padding: 5px 0 10px 0; } .nav-links { display: flex; gap: 40px; align-items: center; } .nav-toggle { display: none; } .nav-links { display: flex; gap: 60px; } .nav-toggle { display: none; } #footer-thankyou { display: none !important; } .brand { display: flex; align-items: center; gap: 12px; height: 100%; } .brand__logo { width: 44px; height: 44px; border-radius: 8px; display: inline-block; } .brand__logo-img { height: 80%; width: 260px; border-radius: 10px; display: inline-block; object-fit: contain; } .brand__name { font-weight: 800; letter-spacing: 0.4px; } .searchbar { display: flex; align-items: center; gap: 8px; width: 100%; /* Increased from 80% */ } .searchbar input[type="search"] { flex: 1; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); outline: none; font-size: 16px; } /* Style de la croix d'effacement (Webkit) */ .searchbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 14px; width: 14px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; cursor: pointer; } .searchbar button { width: 48px; height: 48px; border-radius: 12px; border: none; background: transparent; /* icône PNG visible */ color: var(--accent); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .searchbar button:hover, .searchbar button:focus-visible { background: transparent; border: none; filter: brightness(1.08); } /* SEARCH DROPDOWN ITEMS */ .search-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--card-border); text-decoration: none; color: var(--text); background: var(--bg); transition: background 0.2s; } .search-item:hover { background: var(--card); } .search-item-left { display: flex; align-items: center; gap: 12px; } .search-item-name { font-weight: 600; font-size: 15px; } .search-item-right { display: flex; align-items: center; gap: 6px; /* Space between number and icon */ font-size: 13px; font-weight: 700; color: var(--muted); background: rgba(125, 125, 125, 0.1); padding: 4px 10px; border-radius: 20px; } .az-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px 0; } .az-nav a { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border: 1px solid var(--card-border); border-radius: 6px; color: var(--muted); font-size: 12px; background: var(--card); } .az-nav a:hover { color: var(--accent); border-color: var(--accent); } .az-nav a.disabled { opacity: 0.35; pointer-events: none; } .brand-section { margin: 18px 0 26px 0; } .brand-section__title { font-size: 28px; font-weight: 900; margin: 0 0 10px 0; } .brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; } /* Variante 5 colonnes (archives boutiques) */ .brand-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 50px 0px; justify-items: center; } @media (max-width: 1024px) { .brand-grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .brand-grid--5 { grid-template-columns: repeat(2, 1fr); } } /* ========================================= DARK MODE TOGGLE SVG (Revised) ========================================= */ /* Overrides for the wrapper div to keep positioning but reset button look */ div.theme-toggle#theme-toggle-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; width: 80px !important; /* Force width for SVG */ height: auto !important; padding: 0 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 5px; /* Adjust alignment */ } div.theme-toggle#theme-toggle-wrapper:hover { transform: none; /* No lift */ background: transparent !important; } #toggleSVG { width: 100%; height: auto; display: block; } [data-theme="light"] #toggleSVG #pinkButton circle { transform: translateX(0); transition: transform 0.3s ease; } html:not([data-theme="light"]) #toggleSVG #pinkButton circle { transform: translateX(530px); /* Move toggle button to right */ transition: transform 0.3s ease; } /* ========================================= DARK MODE TOGGLE SVG (Revised) ========================================= */ /* Overrides for the wrapper div to keep positioning but reset button look */ div.theme-toggle#theme-toggle-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; width: 80px !important; /* Force width for SVG */ height: auto !important; /* Allow height to adapt */ padding: 0 !important; overflow: visible !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; } #toggleSVG { width: 100%; /* Fills the 80px wrapper */ height: auto; pointer-events: none; /* Let clicks pass to wrapper if needed, or keeping it auto */ } #toggleSVG .cls-1, #toggleSVG .cls-2 { fill: none; } #toggleSVG .cls-3 { fill: #fef7c7; } #toggleSVG .cls-2 { stroke: #f3c; stroke-miterlimit: 10; stroke-width: 25px; } #toggleSVG .cls-4 { fill: #f3c; } #toggleSVG .cls-5 { fill: #f1a420; } #toggleSVG .cls-6 { fill: #fdc532; } #toggleSVG .cls-7 { fill: #fcd941; } /* Animation bouton rose */ #toggleSVG #pinkButton { transition: transform 0.5s ease-in-out; } /* État actif (Dark Mode = Lune à droite) */ #toggleSVG.active #pinkButton { transform: translateX(0px); } .brand-grid--5 .brand-item { width: 100px; /* rétrécit visuellement l'item dans sa colonne */ } .brand-grid--5 .brand-item__name { font-size: 13px; text-align: center; } @media (max-width: 1024px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } } .brand-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); } .brand-item__logo img, .brand-item__ph { width: 110px; height: 110px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); display: grid; place-items: center; color: var(--muted); font-size: 11px; } .brand-item__name { font-size: 14px; text-align: center; } /* Page Catégorie : Logo à gauche, arrondi */ .page-category .brand-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 24px !important; justify-items: center; } .page-category .brand-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: transparent !important; padding: 12px !important; border-radius: 8px; width: auto !important; max-width: 100% !important; box-sizing: border-box; gap: 8px !important; color: var(--text); } @media (max-width: 1024px) { .page-category .brand-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 680px) { .page-category .brand-grid { grid-template-columns: repeat(2, 1fr) !important; } } .page-category .brand-item__logo { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; margin-right: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border-radius: 50% !important; background: #f4f4f4; border: none !important; } .page-category .brand-item__logo img { width: 64px !important; height: 64px !important; object-fit: cover !important; display: block !important; border-radius: 50% !important; border: none !important; margin: 0 !important; padding: 0 !important; } .page-category .brand-item__name { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; color: var(--text) !important; gap: 8px !important; } .page-category .brand-item__name:hover { color: var(--accent) !important; } .page-category .brand-item__name-text { font-size: 14px !important; text-align: center !important; margin-top: 4px !important; } .page-category .brand-item__ph { width: 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 24px !important; color: #fff !important; background: linear-gradient(135deg, #ff33cc, #9d4edd) !important; border-radius: 50% !important; border: none !important; } .page-category .brand-item__info { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 !important; } .page-category .brand-item__name { font-weight: 600 !important; color: inherit !important; text-decoration: none !important; text-align: left !important; font-size: 14px !important; margin: 0 !important; } .page-category .brand-item__count { font-size: 13px !important; color: var(--muted) !important; margin-top: 4px !important; text-align: left !important; } .boutique-hero { display: grid; grid-template-columns: 120px 1fr 220px; align-items: center; gap: 16px; padding: 8px 0 12px 0; border-bottom: 1px solid var(--card-border); margin-bottom: 12px; } .boutique-hero__logo img, .boutique-hero__placeholder { width: 120px; height: 120px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); display: grid; place-items: center; color: var(--muted); } .boutique-hero__title { margin: 0 0 6px 0; font-size: 24px; font-weight: 800; } .boutique-hero__desc { margin: 4px 0 6px 0; color: var(--muted); font-size: 14px; } .boutique-hero__site { color: var(--muted); font-size: 14px; } .boutique-hero__site:hover { color: var(--accent); } .offer-filter { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); } .offers-list { display: flex; flex-direction: column; gap: 12px; } .offer-card { display: grid; grid-template-columns: 120px 1fr 180px; align-items: center; gap: 16px; border: 1px solid var(--card-border); background: var(--card); border-radius: 10px; padding: 12px; } .offer-card__left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .offer-badge { font-size: 28px; font-weight: 900; } .offer-badge__sub { font-size: 12px; color: var(--muted); } .offer-card__title { font-weight: 700; margin-bottom: 8px; } .offer-card__meta { color: var(--muted); font-size: 12px; display: flex; gap: 12px; } .offer-card__cta { display: flex; justify-content: flex-end; } .coupon-svg-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-block; line-height: 0; } .coupon-svg-btn svg { max-width: 256px; height: auto; display: block; } /* Wrapper pour simuler l'espace du SVG */ .deal-offer-btn-wrapper { display: block; width: 270px !important; min-width: 270px; max-width: 270px; height: 57px !important; max-height: 57px; min-height: 57px; flex-shrink: 0; text-align: center; line-height: 54px; } /* Bouton "Voir l'offre" pour les deals et ODR */ .deal-offer-btn { display: inline-block; width: 195.1px; height: 38px; background: linear-gradient(135deg, #ff33cc 0%, #ff66dd 100%); color: #fff; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: 0.9px; text-align: center; line-height: 37px; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(255, 51, 204, 0.3); position: relative; overflow: hidden; vertical-align: middle; } .deal-offer-btn:hover { background: linear-gradient(135deg, #ff66dd 0%, #ff33cc 100%); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 51, 204, 0.4); color: #fff; } /* Carte "À découvrir" */ .discover-card { background-color: var(--card) !important; color: var(--text) !important; } [data-theme="light"] .discover-card { background-color: #f7f7f7 !important; color: #333 !important; } .discover-card .coupon-card__meta { color: inherit !important; } .discover-card__left { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center; font-weight: 900; font-size: 14px; line-height: 1.2; text-transform: uppercase; text-transform: uppercase; } .discover-card__content { height: 100%; text-align: left; display: flex; } .deal-offer-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(255, 51, 204, 0.3); } /* Animation de brillance au survol */ .deal-offer-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .deal-offer-btn:hover::before { left: 100%; } .subscribe__label { font-size: 12px; color: var(--muted); margin-bottom: 6px; text-align: right; } .subscribe__row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; } .subscribe input[type="email"] { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); outline: none; } .subscribe button { background: var(--accent); color: #000; font-weight: 700; cursor: pointer; } .category-nav { margin-top: 24px; } .header-nav { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 8px 0 12px 40px; } .nav-links { display: flex; gap: 45px; align-self: center; margin: 0; flex-wrap: nowrap; position: relative; /* Devient le référent pour le sous-menu */ } .nav-item { position: static; /* On laisse le sous-menu se positionner par rapport à .nav-links */ } .nav-submenu { display: none; position: absolute; top: 100%; left: 0; /* Aligné au début de .nav-links (Categories) */ right: 0; /* Aligné à la fin de .nav-links (Ajouter un code) */ width: 100%; /* Force la largeur totale */ background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 10px; /* min-width et max-height conservés */ min-width: unset; max-height: 60vh; overflow: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); z-index: 100; } .nav-item:hover .nav-submenu { display: block; } .page-title { text-align: center; color: var(--accent); } .page-header-content { text-align: left; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; } /* Layout catégorie : image à gauche, description à droite */ .category-header-content { display: flex; flex-direction: row; align-items: flex-start; gap: 32px; margin: 24px 0; max-width: 100%; } .category-header-image { flex: 0 0 auto; width: 200px; } .category-header-image img { width: 200px; height: 200px; object-fit: cover; border-radius: 8px; display: block; } .category-header-placeholder { background: linear-gradient(135deg, #ff33cc, #9d4edd); color: white; font-size: 64px; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; border-radius: 8px; } .category-header-description { flex: 1; min-width: 0; } .category-header-description .page-desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); text-align: left; } @media (max-width: 768px) { .category-header-content { flex-direction: column; align-items: center; gap: 20px; } .category-header-image, .category-header-image img, .category-header-placeholder { width: 100%; max-width: 200px; } .category-header-description { text-align: center; } } .nav-submenu__link { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 14px; white-space: nowrap; } .nav-submenu__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--accent); } .nav-submenu__empty { display: block; padding: 8px 10px; color: var(--muted); font-size: 13px; } .nav-submenu--stores, .nav-submenu--cats { background: rgba(0, 0, 0, 0.94); backdrop-filter: blur(6px); padding: 12px; min-width: 100%; /* Was 683px, changed to fit container alignment */ } [data-theme="light"] .nav-submenu--stores, [data-theme="light"] .nav-submenu--cats { background: rgba(255, 255, 255, 0.94); } .nav-submenu__title { margin: 2px 0 8px 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; } .nav-submenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 colonnes */ grid-template-rows: repeat(4, auto); /* 4 lignes max */ grid-auto-flow: column; /* Remplir colonne par colonne: 4 / 4 / 2 */ gap: 6px 24px; } .nav-submenu__more { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); text-align: center; font-weight: 700; color: var(--text); } .nav-submenu__more:hover { background: #FF33cc; color: #000; } .nav-link { color: var(--text); font-size: 22px; font-weight: 700; white-space: nowrap; } .subscribe--compact { display: flex; align-items: center; gap: 8px; position: relative; } .subscribe--compact input[type="email"] { width: 270px; height: 45px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); } .subscribe--compact button { width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; /* icône PNG visible */ color: var(--accent); font-weight: 700; } .subscribe--compact button:hover, .subscribe--compact button:focus-visible { background: transparent; border: none; filter: brightness(1.08); } .subscribe__hint { position: absolute; left: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--card-border); color: var(--muted); padding: 6px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .subscribe--compact:hover .subscribe__hint { opacity: 1; visibility: visible; transform: translateY(4px); } .subscribe--compact:focus-within .subscribe__hint { display: none; } /* Icônes PNG du header */ .icon-img { width: auto; height: 40px; display: block; object-fit: contain; } .subscribe--compact .icon-img { width: auto; height: 40px; transform: rotate(180deg); } /* Type d'offre + tooltips (page single code) */ .type-row { display: flex; gap: 16px; align-items: center; margin: 8px 0 14px 0; flex-wrap: wrap; } .type-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); border-radius: 8px; font-weight: 600; } .type-pill.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .info-tip { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--card-border); background: #3b3b3b; color: #fff; font-size: 12px; line-height: 1; display: grid; place-items: center; cursor: help; } .info-tip__bubble { position: absolute; left: 0; top: calc(100% + 6px); background: #e9e9e9; color: #111; border: 1px solid #cfcfcf; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); font-size: 12px; max-width: 260px; padding: 8px 10px; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 10; } .type-pill:hover .info-tip__bubble, .type-pill:focus-within .info-tip__bubble { opacity: 1; visibility: visible; transform: translateY(4px); } .top-actions { display: flex; gap: 8px; justify-content: flex-end; } .action-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-size: 14px; cursor: pointer; } .action-pill--accent { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 700; } /* Bouton de bascule de thème (style interrupteur) */ .theme-toggle { position: relative; width: 56px; height: 28px; padding: 0; -webkit-appearance: none; appearance: none; line-height: 0; border-radius: 999px; border: 1px solid #0b3d91 !important; /* bleu foncé en mode clair */ background: #0b3d91 !important; cursor: pointer; display: inline-block; vertical-align: middle; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; z-index: 1000; /* S'assurer que le bouton est cliquable */ pointer-events: auto; } /* Positionner le switch dark mode en bas à droite du header */ @media (min-width: 1025px) { .site-header .theme-toggle { position: absolute; right: 0px; top: 32px; margin-left: 0; transform: none; } } @media (max-width: 1024px) { .site-header .theme-toggle { position: relative; margin-left: 0; transform: none; display: inline-block; z-index: 1000; pointer-events: auto; } } .theme-toggle .theme-toggle__knob { position: absolute; top: 1px; left: 2px; width: 24px; height: 24px; border-radius: 999px; background: #ffffff; transition: transform 0.2s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.2); } .theme-toggle:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .theme-toggle[aria-pressed="true"] { background: #ffb703 !important; /* orange/jaune en mode sombre */ border-color: #ffb703 !important; } .theme-toggle[aria-pressed="true"] .theme-toggle__knob { transform: translateX(28px); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* État désactivé pour les boutons de la modale */ .action-pill[disabled] { cursor: not-allowed; opacity: 0.7; } /* Section */ .home-section { margin: auto; padding: 28px 0; } .home-section__description { width: 100%; padding: 0px 16px; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; margin-bottom: 24px; /* Espace avant le contenu suivant */ } .home-section-description .home-section__title { color: #fff; font-size: 24px; background-color: #ff33cc; /* Un peu plus grand */ margin-bottom: 8px; text-transform: none; /* Pas de majuscules forcées */ } .home-section-description { background-color: #ff33cc; } .home-section-description .section-desc { color: rgba(255, 255, 255, 0.9); font-size: 16px; font-weight: 400; margin: 0; } .home-section .section-desc { margin-bottom: 12px; } /* Slider-like row */ /* (remplacé par carrousel) */ /* Carrousel générique */ .carousel { position: relative; } .carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 10px 4px; } .carousel__track.is-animating { scroll-snap-type: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track { -ms-overflow-style: none; scrollbar-width: none; } .carousel__track.is-continuous { scroll-snap-type: none; } .carousel .coupon-card, .carousel .shop-card { flex: 0 0 auto; width: 278px; scroll-snap-align: start; } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-weight: 800; cursor: pointer; display: grid; place-items: center; z-index: 2; } .carousel__btn:hover, .carousel__btn:focus-visible { border-color: var(--accent); background: var(--accent); color: #000; } .carousel__btn--prev { left: -50px; } .carousel__btn--next { right: -50px; } @media (max-width: 680px) { .carousel .coupon-card, .carousel .shop-card { width: 90vw; } .carousel__btn--prev { left: 0; } .carousel__btn--next { right: 0; } } .carousel.is-static .carousel__track { overflow-x: visible; flex-wrap: wrap; gap: 16px; } .carousel.is-static .carousel__btn { display: none; } /* Sécurité: pas de boutons ni de scroll pour la section Nouveautés */ @media (max-width: 768px) { .header-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .header-nav { flex-direction: column; align-items: flex-start; } } /* Card */ .coupon-card, .shop-card { border: 1px solid var(--card-border); background: var(--card); border-radius: 14px; padding: 14px; } .shop-card { text-align: center; } .coupon-card__thumb, .shop-card__thumb { height: 92px; border-radius: 10px; background: linear-gradient(145deg, #0f0f0f, #161616); border: 1px dashed var(--card-border); display: grid; place-items: center; color: var(--muted); font-size: 12px; margin-bottom: 12px; } .coupon-card__thumb img { height: 64px; width: 64px; display: block; border-radius: 999px; } .shop-card__thumb img { height: 64px; width: 64px; display: block; border-radius: 999px; } .shop-card__name { display: flex; justify-content: center; align-items: center; margin-top: 8px; font-weight: 700; } .coupon-card__content { display: flex; justify-content: center; align-items: center; flex-direction: column; } [data-theme="light"] .coupon-card__meta { color: #333; } .coupon-card__meta { color: var(--text); font-size: 14px; margin-bottom: 12px; text-align: center; /* Assure une hauteur constante (2 lignes max) pour aligner le bouton "Voir le code" */ line-height: 1.4; min-height: calc(1.4em * 2); display: flex; line-clamp: 2; overflow: hidden; align-items: center; font-weight: bold; } .coupon-card__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: #000; font-weight: 700; cursor: pointer; } .cta-split { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; padding-right: 56px; /* espace pour la partie droite */ border: none; border-radius: 12px; background: var(--accent); color: #000; font-weight: 800; cursor: pointer; overflow: hidden; } .cta-split::before { content: none; } /* on n'affiche plus le code en fond */ .cta-split .cta-split__label { position: relative; z-index: 2; /* au-dessus du code en fond */ transition: transform 0.2s ease, letter-spacing 0.2s ease, color 0.2s ease; } .cta-split:hover .cta-split__label, .cta-split:focus-within .cta-split__label { transform: translateX(6px); letter-spacing: 0.3px; } .cta-split__chev { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); font-size: 18px; color: rgba(0, 0, 0, 0.55); line-height: 1; z-index: 2; } .cta-split .cta-split__right { position: absolute; top: 3px; right: 3px; width: 44px; height: calc(100% - 6px); border-radius: 10px; background: rgba(0, 0, 0, 0.38); /* assombrit l'accent pour le volet droit */ color: #fff; display: grid; place-items: center; font-size: 20px; line-height: 1; border-left: 1px solid rgba(0, 0, 0, 0.25); transition: width 0.2s ease; z-index: 3; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; } .cta-split:hover .cta-split__right, .cta-split:focus-within .cta-split__right { width: 56px; } .cta-split:hover, .cta-split:focus-visible { filter: brightness(1.05); } .cta-split[disabled] { opacity: 0.7; cursor: not-allowed; } .input-error { margin-top: 4px; color: #ff6b6b; font-size: 12px; } /* Puzzle Captcha (slider) */ .puzzle-captcha { max-width: 340px; } .puzzle-captcha__track { position: relative; height: 40px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card); overflow: hidden; } .puzzle-captcha__label { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; pointer-events: none; } .puzzle-captcha__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(255, 255, 255, 0.08); transition: width 0.1s linear; } .puzzle-captcha__handle { position: absolute; top: 2px; left: 2px; width: 36px; height: 36px; border-radius: 8px; background: var(--accent); color: #000; display: grid; place-items: center; cursor: grab; user-select: none; } .puzzle-captcha.is-ok .puzzle-captcha__track { border-color: #2ecc71; } .puzzle-captcha.is-ok .puzzle-captcha__label { color: #2ecc71; } .a-btnSlide { position: relative; display: inline-flex; align-items: stretch; border: none; background: transparent; padding: 0; text-decoration: none; cursor: pointer; transform: scale(0.95); transform-origin: center; height: 55px; width: 100%; max-width: 350px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15)); /* Ombre globale */ } /* Le Code (Couche blanche - arrière-plan) */ .a-btnSlide__truncateCode { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; /* Fond blanc */ color: var(--accent); /* Couleur accent par défaut (mode sombre) */ font-family: "Roboto", sans-serif; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: flex-end; /* Texte collé à droite */ padding-right: 40px; border: 2px dashed var(--accent); /* Bordure accent par défaut (mode sombre) */ border-radius: 10px; /* Coins arrondis */ box-sizing: border-box; z-index: 1; } /* Mode clair : bordure et texte en gris */ [data-theme="light"] .a-btnSlide__truncateCode { color: #333; border-color: #555; } .a-btnSlide__truncateCode::before { content: none; } /* Suppression du peel */ /* Le Bouton (Couche rose - premier plan) */ .a-btnSlide__btn { position: absolute; top: 0; left: 0; width: 220px; height: 100%; z-index: 2; display: flex; align-items: center; background-color: #ff2e93; /* Le rose vif */ color: white; font-family: "Roboto", sans-serif; font-weight: 800; font-size: 19px; padding-left: 25px; border-radius: 10px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; /* Découpe diagonale : on garde tout sauf le coin en bas à droite */ clip-path: polygon(0 0, 100% 0, calc(100% - 45px) 100%, 0 100%); } .a-btnSlide__btn::before { content: none; } /* Le rabat plié (Couche peel) */ .a-btnSlide .peel-layer { position: absolute; top: 0; left: 175px; width: 45px; /* Doit être égal au décalage de la coupe du bouton rose */ height: 100%; z-index: 3; /* Couleur : Rose clair dégradé (envers du sticker) */ background: linear-gradient(135deg, #ff9dc6 0%, #ff7eb3 100%); /* Arrondi du coin en bas à droite */ border-top-left-radius: 15px; /* Découpe pour garder le triangle Bas-Droite */ clip-path: polygon(0 0, 100% 0, 0 100%); /* L'ombre qui donne le volume */ filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3)); pointer-events: none; } /* --- AJOUTE CECI --- */ /* On cible les deux éléments À L'ÉTAT INITIAL (pas au hover) */ .a-btnSlide__btn, .peel-layer { /* 1. La synchro parfaite : même durée (0.3s) et même courbe de vitesse */ transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 2. Anti-scintillement : prévient le navigateur que ça va bouger */ will-change: transform; } /* --- TON CODE ACTUEL (Tu peux le garder tel quel) --- */ .a-btnSlide:hover .a-btnSlide__btn, .a-btnSlide:hover .peel-layer { transform: translateX(-24px); } .a-btnSlide__icon { font-size: 22px; margin-left: 5px; display: inline-block; color: #fff; font-weight: 700; position: relative; top: -1px; } .cm_vote { border: none; } .cm_vote { border: none; } .coupon-card__badges { display: flex; gap: 10px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; } .brand-section { scroll-margin-top: 10.6em; } .brand-section__title { font-size: 24px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--card-border); color: var(--accent); } /* Footer */ .site-footer { margin-top: 40px; border-top: 1px solid var(--card-border); color: var(--muted); padding: 28px 0 40px 0; font-size: 14px; } .footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; } @media (max-width: 1050px) { .footer-columns { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .footer-columns { grid-template-columns: 1fr; } } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--card-border); padding-top: 16px; } .footer-social { display: flex; gap: 10px; align-items: center; } /* Centrer / justifier les icônes de réseaux et les items d'apps dans la colonne */ .footer-social, .footer-apps { justify-content: center; } .footer-social__link { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); display: grid; place-items: center; color: var(--text); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .footer-social__link:hover { background: var(--accent); border-color: var(--accent); color: #000; transform: translateY(-1px); } .footer-social__link svg { width: 18px; height: 18px; fill: currentColor; } .footer-apps { display: flex; gap: 10px; align-items: center; } .footer-apps__badge { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); display: grid; place-items: center; font-size: 18px; cursor: default; transition: background 0.2s ease, border-color 0.2s ease; } .footer-apps__badge:hover { background: rgba(255, 255, 255, 0.06); } .footer-apps__item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); text-decoration: none; cursor: default; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; position: relative; } .footer-apps__item:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--card-border); } .footer-apps__icon { font-size: 16px; line-height: 1; } .footer-apps__hint { position: absolute; left: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--card-border); color: var(--muted); padding: 6px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; display: none !important; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 10; } .footer-apps__item:hover .footer-apps__hint, .footer-apps__item:focus-within .footer-apps__hint { opacity: 1; visibility: visible; display: block !important; transform: translateY(4px); } /* Décalage du header Quasar sous la barre d'admin WordPress */ .admin-bar .q-header { top: 32px; } @media (max-width: 782px) { .admin-bar .q-header { top: 46px; } } /* ========================================= CORRECTIF HEADER MOBILE (Responsive) ========================================= */ @media (max-width: 1100px) { /* Le conteneur de résultats */ .ajax-results { width: 83%; /* On s'assure qu'il passe au-dessus de tout le reste */ z-index: 1000 !important; border-radius: 0 0 12px 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .brand-section { scroll-margin-top: 9.7em; } /* Force le z-index même en thème clair (qui a une règle spécifique) */ [data-theme="light"] .ajax-results { z-index: 1000 !important; width: 83%; } /* Chaque ligne de résultat */ .search-item { padding: 12px 14px; /* Plus haut pour le tactile */ gap: 10px; } /* Partie Gauche (Logo + Nom) */ .search-item-left { flex: 1; /* Prend tout l'espace disponible */ min-width: 0; /* OBLIGATOIRE pour que le text-overflow fonctionne */ } .search-item-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Ajoute "..." si le nom est trop long */ display: block; } /* Partie Droite (Compteur) */ .search-item-right { flex: 0 0 auto; /* Ne rétrécit jamais */ background: rgba(255, 255, 255, 0.05); /* Petit fond discret */ padding: 4px 8px; border-radius: 6px; font-size: 12px; } /* Ajustement Mode Clair pour le fond du compteur */ [data-theme="light"] .search-item-right { background: rgba(0, 0, 0, 0.05); } /* Réduire un peu la taille du logo sur très petits écrans */ .search-result-logo, .search-result-ph { width: 28px; height: 28px; } .header-nav.open, .header-nav.open .nav-links, .header-nav.open .subscribe--compact { display: flex !important; opacity: 1 !important; visibility: visible !important; height: auto !important; } .home-section-description { height: 135px !important; } .home-section-description .container { padding: 0px 34px !important; } .site-footer .footer-columns>div { flex: 1 1 105px; min-width: 105px; text-align: center; ; } /* 1. Réinitialiser la Grid du header pour un flux vertical flexible */ .site-header { height: auto !important; padding-bottom: 10px; } .header-layout { display: flex; flex-direction: column; height: auto; gap: 10px; padding: 10px 0; } /* 2. Ligne du haut : Logo + Dark Mode Switch - CENTRÉ */ .header-logo { grid-row: auto; height: auto; display: flex; align-items: center; justify-content: center; /* Centré sur mobile */ position: relative; gap: 15px; /* Espace entre le logo et le toggle */ } .header-logo .brand { align-items: center; height: 50px; /* Hauteur fixe pour éviter les sauts */ } .header-logo .brand__logo-img { margin-top: 0; width: 160px; /* Logo un peu plus petit sur mobile */ height: auto; object-fit: contain; } /* Repositionner le bouton Dark Mode centré à côté du logo */ .site-header .theme-toggle { /* On enlève le position absolute qui cassait tout */ transform: none; margin-left: 0; /* Plus besoin de pousser à droite, tout est centré */ z-index: 1000; /* S'assurer que le bouton est cliquable */ pointer-events: auto; } /* 3. Ligne du milieu : Recherche + Bouton Menu */ .header-bar { height: auto; display: flex; flex-direction: row; /* Force l'alignement horizontal */ align-items: center; gap: 10px; width: 100%; } /* La barre de recherche prend toute la place disponible */ .searchbar { width: 100%; flex: 1; } .searchbar input[type="search"] { padding: 10px 14px; /* Un peu plus compact sur mobile */ font-size: 14px; } /* Cache le texte "Recherche avancée" sur mobile pour gagner de la place */ /* Styliser le bouton Menu pour qu'il soit carré et aligné */ .nav-toggle { display: flex !important; /* Force l'affichage */ align-items: center; justify-content: center; width: 48px; height: 48px; /* Même hauteur que la barre de recherche environ */ min-width: 48px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; color: var(--accent); cursor: pointer; font-weight: bold; font-size: 24px; /* Taille de l'icône hamburger */ } /* 4. Le Menu Déroulant (Navigation + Email) */ .header-nav { width: 100%; padding: 0; display: none; /* Caché par défaut */ border-top: 1px solid var(--card-border); margin-top: 10px; padding-top: 10px; } /* Quand le menu est ouvert (via JS qui ajoute la classe .open) */ .header-nav.open { display: flex; flex-direction: column; gap: 15px; animation: slideDown 0.3s ease-out; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nav-links { display: flex; flex-direction: column; width: 100%; gap: 0; /* On gère l'espacement via les liens eux-mêmes */ } .nav-link { display: block; width: 100%; padding: 12px 0; font-size: 18px; /* Texte plus gros pour le tactile */ border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: center; } [data-theme="light"] .nav-link { border-bottom-color: rgba(0, 0, 0, 0.05); } /* Ajuster la zone email dans le menu */ .subscribe--compact { width: 100%; margin-top: 10px; flex-direction: row; flex-wrap: nowrap; align-items: center; box-sizing: border-box; max-width: 100%; padding: 0 4px; /* Petite marge de sécurité */ } .subscribe--compact input[type="email"] { width: 0; /* Force le flex à gérer la largeur */ min-width: 0; flex: 1 1 auto; background: var(--card); box-sizing: border-box; height: 45px; /* Force la hauteur */ } .subscribe--compact button { flex: 0 0 40px; /* Ne jamais rétrécir le bouton */ width: 40px; height: 40px; } .site-footer .footer-columns { flex-direction: column; align-items: center; text-align: center; } .site-footer .footer-bottom { justify-content: center; text-align: center; } .site-footer .footer-bottom>div, .site-footer .footer-bottom .footer-nav { width: 100%; margin: 6px 0; } } /* Petite animation d'ouverture fluide */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Modal générique */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 10000; /* Increased z-index to be sure */ background: transparent !important; /* Fix white flash */ } .modal.is-open { display: flex; } .modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .modal__dialog { position: relative; width: 92%; max-width: 560px; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; /* Fix corners */ animation: modalPop 0.25s ease-out backwards; } @keyframes modalPop { from { opacity: 0; } to { opacity: 1; } } .modal__close { color: var(--text); cursor: pointer; transition: color 0.2s; } .modal__close:hover { color: var(--accent); } .modal__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--card-border); } .modal__header h4 { margin: 0; font-size: 18px; } .modal__close { background: transparent; border: none; color: var(--text); font-size: 22px; cursor: pointer; } .modal__body { padding: 14px; } /* Formulaire d'ajout de code */ .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="url"], .contact-form input[type="number"], .contact-form input[type="search"], .contact-form input[type="datetime-local"], .contact-form select, .contact-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; scroll-margin-top: 220px; /* Marge de scroll pour éviter d'être masqué par le header */ } @media (max-width: 600px) { .contact-form .form-row>div[style*="display:flex"] { gap: 6px !important; } } /* Modale code: centrage et réutilisation des styles card */ .coupon-card--modal .coupon-card__content { align-items: center; text-align: center; } .coupon-card--modal .coupon-card__thumb { display: flex; justify-content: center; align-items: center; } .coupon-card--modal .coupon-card__thumb img { max-height: 72px; width: auto; } .cm_center { text-align: center; } .cm_helper, .cm_share_hint { margin-top: 8px; color: var(--muted); font-size: 13px; } .cm_vote { background: transparent; border: none; padding: 0; cursor: pointer; } .cm_vote_img { width: 28px; height: 28px; display: block; } .cm_vote:hover .cm_vote_img { filter: brightness(1.1); } .form-row label { font-size: 13px; color: var(--muted); } .form-row input, .form-row select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--bg); color: var(--text); outline: none; } /* Date picker icon on the left */ input[type="date"] { position: relative; padding-left: 36px !important; /* Space for the icon */ } input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; cursor: pointer; padding: 0; margin: 0; filter: invert(1); /* Blanc sur fond noir par défaut */ } [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0); /* Noir sur fond blanc */ } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; } .form-note { margin-top: 8px; color: var(--muted); font-size: 12px; } .form-notice { margin-top: 10px; font-size: 14px; display: flex; justify-content: center; } .form-link { background: transparent; border: none; color: var(--accent); text-align: left; padding: 6px 0; cursor: pointer; } .is-hidden { display: none !important; } /* S'assure que l'attribut hidden garde la priorité sur l'affichage flex */ .form-row[hidden], .add-store-fields[hidden] { display: none !important; } /* Hover bouton d'envoi (page Ajouter Réduction) */ .page-add .form-actions .action-pill--accent { transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; } .page-add .form-actions .action-pill--accent:hover, .page-add .form-actions .action-pill--accent:focus-visible { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); } /* ========================================= FIX ULTIME : MENU MOBILE + RECHERCHE BLANCHE ========================================= */ /* --- 1. FORCE LE MENU MOBILE A S'OUVRIR --- */ @media (max-width: 1050px) { /* On s'assure que le conteneur est positionné correctement */ .site-header .container { position: relative; padding: 0 20px; } .deal-offer-btn { width: 206px; } /* Le Menu par défaut (caché) */ .header-nav.js-header-nav { display: none; position: absolute; /* Flotte par dessus le contenu */ top: 100%; left: 0; width: 100%; background: var(--bg); border-top: 1px solid var(--card-border); padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); z-index: 99999; /* Au dessus de tout */ } /* QUAND LA CLASSE .open EST AJOUTÉE PAR LE JS */ .header-nav.js-header-nav.open { display: flex !important; /* Force l'affichage */ flex-direction: column !important; visibility: visible !important; opacity: 1 !important; height: auto !important; } /* Force le contenu interne à être visible */ .header-nav.open .nav-links, .header-nav.open .subscribe--compact { display: flex !important; width: 100%; gap: 15px; } /* Agrandir les liens pour le doigt */ .nav-link { padding: 15px 0; font-size: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100%; text-align: center; } /* Sous-menus sur mobile : affichage avec classe .open */ .nav-item { position: relative; } .nav-submenu { display: none !important; /* Caché par défaut sur mobile */ position: static !important; /* Pas de position absolute sur mobile */ width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin-top: 10px; padding: 15px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: none; } /* Afficher le sous-menu quand l'item parent a la classe .open */ .nav-item.open .nav-submenu { display: block !important; } /* Style des sous-menus sur mobile */ .nav-submenu--stores, .nav-submenu--cats { min-width: 100%; background: rgba(0, 0, 0, 0.2); padding: 15px; } .nav-submenu__grid { grid-template-columns: 1fr; /* Une seule colonne sur mobile */ gap: 10px; } .nav-submenu__link { padding: 12px; font-size: 16px; text-align: center; } } /* --- 2. DESIGN RECHERCHE (STYLE APPLE/BLANC) --- */ .ajax-results { background: var(--card) !important; /* Fond BLANC forcé */ border: 1px solid var(--card); border-radius: 0 0 12px 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); margin-top: 5px; } [data-theme="light"] .ajax-results { background: #ffffff !important; /* Fond BLANC forcé */ border: 1px solid #e0e0e0; border-radius: 0 0 12px 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); margin-top: 5px; } [data-theme="light"] .search-item { background: #ffffff !important; border-bottom: 1px solid #f0f0f0; padding: 12px 15px; color: #000000 !important; /* Texte NOIR forcé */ } .search-item { background: var(--card) !important; border-bottom: 1px solid #f0f0f0; padding: 12px 15px; color: #FFFFFF !important; /* Texte NOIR forcé */ } [data-theme="light"] .search-item:hover { background: #f9f9f9 !important; /* Gris très clair au survol */ } .search-item:hover { background: #cdcdcd59 !important; /* Gris très clair au survol */ } /* Nom de la boutique en noir */ [data-theme="light"] .search-item-name { color: #000000 !important; font-weight: 600; font-size: 16px; } .search-item-name { color: #FFFFFF !important; font-weight: 600; font-size: 16px; } /* Logo avec bordure fine */ .search-result-logo, .search-result-ph { border: 1px solid #e0e0e0; background: #fff; width: 38px; /* Un peu plus grand */ height: 38px; padding: 2px; } /* Partie droite (Compteur) : Gris foncé sur fond transparent */ .search-item-right { color: var(--text) !important; font-weight: 600; background: transparent !important; /* Pas de fond gris */ font-size: 13px; } [data-theme="light"] .search-item-right { color: #333333 !important; font-weight: 600; background: transparent !important; /* Pas de fond gris */ font-size: 13px; } /* Icône étiquette en noir/gris */ [data-theme="light"] .search-item-right svg { fill: #333333 !important; width: 14px; height: 14px; } .search-item-right svg { fill: var(--text) !important; width: 14px; height: 14px; } @media (max-width: 768px) { .boutique-hero { grid-template-columns: 1fr; text-align: center; } .boutique-hero__logo { margin: auto; } .boutique-hero__info { display: flex; flex-direction: column; align-items: center; } .boutique-hero__filter { justify-self: center; width: 100%; max-width: 300px; } .offer-card { grid-template-columns: 1fr; text-align: center; gap: 12px; } .offer-card__meta { justify-content: center; } .offer-card__left { align-items: center; } .offer-card__cta { justify-content: center; } .coupon-svg-btn svg { max-width: 100%; } } /* ========================================= RESPONSIVE INTERMÉDIAIRE (900px - 1280px) Gère l'affichage quand on réduit la fenêtre ou sur tablette ========================================= */ @media (min-width: 1000px) and (max-width: 1500px) { /* 1. Ajustement de la grille principale */ /* On réduit la colonne du logo (260px -> 180px) et l'espace vide (48px -> 15px) */ .header-layout { grid-template-columns: 180px 1fr; gap: 0 15px; padding-right: 10px; /* Marge de sécurité à droite */ } /* 2. Le Logo devient fluide */ /* Il s'adapte à la largeur de la colonne au lieu de forcer sa taille */ .header-logo .brand__logo-img { width: 100%; max-width: 180px; height: auto; margin-top: 0; /* Réalignement vertical */ } /* 3. La barre de navigation se compacte */ .header-nav { width: 100%; /* Prend toute la largeur dispo (au lieu de 75%) */ padding-left: 10px; /* Réduit le padding gauche (au lieu de 40px) */ gap: 10px; } /* C'est ici le plus important : on réduit les polices et les écarts */ .nav-links { gap: 20px; /* Écart réduit (60px -> 20px) pour éviter le passage à la ligne */ } .nav-link { font-size: 16px; /* Police réduite (22px -> 16px) */ } /* 4. La barre de recherche prend toute la place */ .searchbar { width: 100%; } .searchbar input[type="search"] { font-size: 14px; padding: 10px 14px; } /* 5. Le bouton "Ajouter un code" reste sur une ligne */ .header-nav .nav-item:last-child a { white-space: nowrap; font-size: 14px; padding: 8px 12px; } /* 6. Ajustement du bouton Dark Mode */ /* On le remonte un peu et le cale à droite pour qu'il ne gêne pas */ .site-header .theme-toggle { right: 10px; } } /* Sécurité globale : empêche le débordement horizontal */ .site-header { max-width: 100vw; overflow-x: clip; } /* ========================================= FIX MENU MOBILE (Accordéon & Scrolling) ========================================= */ @media (max-width: 1100px) { .nav-item .nav-submenu { position: static !important; left: auto !important; width: 100% !important; box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 0 0 20px !important; min-width: 0 !important; max-height: none !important; overflow: visible !important; transform: none !important; margin-top: 5px; display: none; } /* Centrer les descriptions de section (ex: Codes expirés) sur mobile */ .section-desc { text-align: center; } /* EMPÊCHER l'ouverture au survol sur mobile/tablette */ .nav-item:hover .nav-submenu { display: none !important; } /* OUVRIR uniquement au clic (classe .open ajoutée sur le LI parent) */ .nav-item.open .nav-submenu { display: block !important; animation: slideDown 0.3s ease-out; } /* Support pour l'ancien selecteur si le JS met .open sur le submenu (sécurité) */ .nav-item .nav-submenu.open { display: block !important; animation: slideDown 0.3s ease-out; } .nav-item .nav-submenu .nav-submenu__grid { display: flex; flex-direction: column; gap: 10px; } .nav-item .nav-submenu .nav-submenu__title { color: var(--muted); margin-top: 10px; margin-bottom: 5px; } } /* Fix desktop positioning removed to allow full width alignment */ /* ========================================= Footer Credit ========================================= */ .footer-credit { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; } .footer-credit a { display: inline-flex; align-items: center; transition: opacity 0.2s; } .footer-credit a:hover { opacity: 0.8; } @media (max-width: 1050px) { .footer-credit { width: 100%; justify-content: center; margin-top: 10px; } } /* ========================================= Social Sharing Modal ========================================= */ .cm_share { display: flex !important; justify-content: center; align-items: center; gap: 25px; width: 100%; margin: 16px auto 0; } .cm_share_btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); color: var(--text); /* Force monochrome icon color */ border: 1px solid var(--card-border); /* Add border for better definition */ transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .cm_share_btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-color: var(--text); /* Black/White on hover */ background: rgba(125, 125, 125, 0.1); } .cm_share_btn svg, .cm_share_btn img { width: 24px; /* Slightly smaller for cleaner look */ height: 24px; object-fit: contain; fill: currentColor; /* Inherit color from parent */ } /* Remove specific colored overrides */ .cm_share_wa:hover, .cm_share_ms:hover, .cm_share_tg:hover, .cm_share_email:hover { border-color: var(--text); background: rgba(125, 125, 125, 0.15); } /* SEARCH SUGGESTIONS UI */ .search-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--card-border); text-decoration: none; color: var(--text); background: var(--bg); transition: background 0.2s; } .search-item:hover { background: var(--card); } .search-item-left { display: flex; align-items: center; gap: 12px; } .search-item-name { font-weight: 600; font-size: 15px; } .search-item-right { display: flex; align-items: center; gap: 6px; /* Space between number and icon */ font-size: 13px; font-weight: 700; color: var(--muted); background: rgba(125, 125, 125, 0.1); padding: 4px 10px; border-radius: 20px; } /* FIX MOBILE HEADER LAYOUT (Moved to end to override desktop styles) */ @media (max-width: 1050px) { .header-layout { display: flex; flex-direction: column; height: auto !important; gap: 12px; padding: 12px 0; } /* Grid Layout: Row 1: Logo (Left) ... Theme (Right) Row 2: Menu (Left) Search (Right, fills space) */ .header-row-top { height: auto !important; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "logo logo theme" "menu search search"; gap: 15px 10px; /* 15px vertical gap, 10px horizontal */ width: 100%; align-items: center; } .header-logo { grid-area: logo; margin: 0; justify-self: start; } .header-logo .brand__logo-img { width: 140px; height: auto; margin-top: 0; } /* Theme Toggle */ .theme-toggle { grid-area: theme; justify-self: end; } /* Menu Burger */ .nav-toggle { grid-area: menu; display: flex !important; margin-top: 2px; } /* Search Bar */ .header-search { grid-area: search; width: 100%; padding: 0; display: block; margin-top: 2px; } .search-wrapper { width: 100%; max-width: none; } .searchbar { width: 100%; } /* Ensure SVG icons don't break layout */ .searchbar button img { width: 20px; height: 20px; } .header-bar { display: none; } /* FIX: Enable carousel manual scroll on mobile */ .carousel__track { overflow-x: auto !important; /* Allow native scroll */ touch-action: pan-x pan-y !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding-left: calc((100vw - 32px - 278px) / 2) !important; /* Center first card: (viewport - container padding - card width) / 2 */ padding-right: calc((100vw - 32px - 278px) / 2) !important; /* Center last card too */ } .carousel__track::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* Hide Desktop Nav */ .header-nav { display: none; width: 100%; margin-top: 10px; } .header-nav.open { display: flex !important; flex-direction: column; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; } /* FIX: Ensure search suggestions aren't clipped */ .site-header, .header-layout, .header-row-top, .header-search, .search-wrapper { overflow: visible !important; } }