/* ============================================================ darkmod.css — Commerce Ethique Club Fichier CSS global : dark/light mode + responsive Couvre : index.php, commercesvu.php, commercesrecent.php, coupdecoeur.php, header.php, footer.php + top-populaire, topcommerces, topsemaine, commerceslocaux, maplocalisation (à venir) Dark mode : classe .dark-mode sur ⚠ L'espacement du body (padding-top / padding-bottom pour le header flottant et la bottom-nav) est entièrement géré par header-desktop.css / header-tablet.css / header-mobile.css. Ne PAS remettre de padding-top/bottom sur body ici : les deux systèmes se chevaucheraient et le résultat dépendrait de l'ordre de chargement des dans header.php. ============================================================ */ /* ── Tokens ───────────────────────────────────────────────── */ :root { /* Palette – light */ --bg: #f5f6fa; --bg-card: #ffffff; --bg-input: #f0f1f7; --border: #e2e4ef; --accent: #4f6ef7; --accent-hover: #3a57d8; --accent-muted: #eef0fd; --danger: #e5534b; --danger-muted: #fdf0ef; --success: #2ea043; --success-muted:#edfaf1; --text-primary: #1a1d2e; --text-secondary:#6b7280; --text-muted: #9ca3af; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-focus: 0 0 0 3px rgba(79,110,247,.25); /* Spacing */ --radius: 10px; --radius-lg: 16px; --gap: 24px; /* Typography */ --font-ui: 'Inter', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; } /* ── Dark mode tokens ───────────────────────────────────────── Piloté par la classe .dark-mode posée sur par darkmod.js (source de vérité unique pour le dark mode sur le site). ────────────────────────────────────────────────────────────── */ body.dark-mode { --bg: #0f1117; --bg-card: #1a1d2a; --bg-input: #252836; --border: #2e3247; --accent: #6c8aff; --accent-hover: #8aa0ff; --accent-muted: #1e2240; --danger: #f47067; --danger-muted: #2a1a1a; --success: #3fb950; --success-muted:#0d2117; --text-primary: #e8eaf6; --text-secondary:#9aa0c0; --text-muted: #5c627a; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4); } /* Préférence système si aucun choix localStorage */ @media (prefers-color-scheme: dark) { body:not(.light-mode):not(.dark-mode) { --bg: #12151a; --bg-alt: #1a1d24; --surface: #1e2229; --surface2: #252b34; --border: rgba(255,255,255,0.07); --shadow: 0 2px 16px rgba(0,0,0,0.4); --text: #dde3ef; --text-muted: #7a8ba8; --input-bg: #1a1f27; --input-border: rgba(255,255,255,0.10); --card-bg: #1e2229; --card-border: #2a3040; --card-overlay: rgba(20,24,32,0.82); --map-border: #2a3040; } } /* ────────────────────────────────────────────── RESET & BASE ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.55; transition: background var(--t), color var(--t); } /* Pas de padding-top/bottom ici : géré par header-desktop.css, header-tablet.css et header-mobile.css selon la largeur d'écran. */ a { color: var(--accent); text-decoration: none; transition: color var(--t); } a:hover { color: var(--accent-h); } img { max-width: 100%; display: block; } h1,h2,h3,h5,h6 { margin: 0 0 .5em; color: var(--text); line-height: 1.2; } p { margin: 0 0 .75em; color: var(--text-muted); } button, input, select, textarea { font-family: inherit; font-size: inherit; } /* ────────────────────────────────────────────── SCROLLBAR ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ────────────────────────────────────────────── ACCESSIBILITÉ ────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ============================================================ TITRES DE SECTION CAROUSELS Seulement les h4 directs des wrappers, pas ceux dans les cartes ============================================================ */ .commerces-vus > h4, .commerces-recent-wrapper > h4, .coup-de-coeur > h4, .commerces-locaux > h4 { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); margin: 16px 0 10px; padding-left: 10px; border-left: 3px solid var(--accent); } /* ============================================================ WRAPPER CAROUSEL ============================================================ */ .container-carousel { width: 100%; overflow: hidden; position: relative; } /* ============================================================ DARK MODE — CARTES (qualifié par ID carousel) Seules les propriétés liées au thème dark/light sont ici. Les dimensions, positions et layout restent dans les CSS individuels. ============================================================ */ /* Fond et bordure des cartes en dark mode */ body.dark-mode #commerces-vus-carousel .commercesvu, body.dark-mode #commerces-recent-carousel .commerces-recent, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux { background: var(--card-bg); border-color: var(--card-border); } /* Hover shadow en dark mode */ body.dark-mode #commerces-vus-carousel .commercesvu:hover, body.dark-mode #commerces-recent-carousel .commerces-recent:hover, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur:hover, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux:hover { box-shadow: var(--shadow); } /* Nom (h4) dans les cartes — dark mode uniquement */ body.dark-mode #commerces-vus-carousel .commercesvu h4, body.dark-mode #commerces-recent-carousel .commerces-recent h4, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur h4, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux h4 { background-color: rgba(0, 0, 0, 0.55); color: #fff; } /* Ville (p) dans les cartes — dark mode uniquement */ body.dark-mode #commerces-vus-carousel .commercesvu p, body.dark-mode #commerces-recent-carousel .commerces-recent p, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur p, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux p { background-color: rgba(0, 0, 0, 0.55); color: #fff; } /* Distance — dark mode */ body.dark-mode #container-commerces-locaux-carousel .commerces-locaux .distance { background-color: rgba(0, 0, 0, 0.55); } /* Bouton site web — couleur accent en dark mode */ body.dark-mode #commerces-vus-carousel .commercesvu .site-web-button, body.dark-mode #commerces-recent-carousel .commerces-recent .site-web-button, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur .site-web-button, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux .site-web-button { background-color: rgba(26, 188, 156, 0.9); } body.dark-mode #commerces-vus-carousel .commercesvu .site-web-button:hover, body.dark-mode #commerces-recent-carousel .commerces-recent .site-web-button:hover, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur .site-web-button:hover, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux .site-web-button:hover { background-color: rgba(23, 165, 137, 1); } /* Bouton favori — fond overlay dark mode */ body.dark-mode #commerces-vus-carousel .commercesvu .favori-button, body.dark-mode #commerces-recent-carousel .commerces-recent .favori-button, body.dark-mode #coup-de-coeur-carousel .coup-de-coeur .favori-button, body.dark-mode #container-commerces-locaux-carousel .commerces-locaux .favori-button { background: rgba(0, 0, 0, 0.5); } /* Flèches Slick — dark mode */ body.dark-mode .slick-commercesvu-prev, body.dark-mode .slick-commercesvu-next, body.dark-mode .slick-commerces-recent-prev, body.dark-mode .slick-commerces-recent-next, body.dark-mode .slick-coup-de-coeur-prev, body.dark-mode .slick-coup-de-coeur-next, body.dark-mode .slick-commerces-locaux-prev, body.dark-mode .slick-commerces-locaux-next { background: rgba(255, 255, 255, 0.1); } body.dark-mode .slick-commercesvu-prev:hover, body.dark-mode .slick-commercesvu-next:hover, body.dark-mode .slick-commerces-recent-prev:hover, body.dark-mode .slick-commerces-recent-next:hover, body.dark-mode .slick-coup-de-coeur-prev:hover, body.dark-mode .slick-coup-de-coeur-next:hover, body.dark-mode .slick-commerces-locaux-prev:hover, body.dark-mode .slick-commerces-locaux-next:hover { background: var(--accent); } /* Dots Slick */ .slick-dots li button::before { color: var(--text-muted); opacity: .4; } .slick-dots li.slick-active button::before { color: var(--accent); opacity: 1; } /* ============================================================ MAP (maplocalisation.php) ============================================================ */ #map, .map-container { width: 100%; height: 320px; border-radius: var(--r-lg); border: 1px solid var(--map-border); overflow: hidden; box-shadow: var(--shadow); background: var(--surface2); transition: border-color var(--t); } body.dark-mode .leaflet-container { background: #1a1d24; } @media (max-width: 768px) { #map, .map-container { height: 220px; border-radius: var(--r); } } @media (max-width: 768px) and (orientation: landscape) { #map, .map-container { height: 160px; } } /* ============================================================ BLOCS TOP (top-populaire, topcommerces, topsemaine) ============================================================ */ .top-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); transition: background var(--t), border-color var(--t); height: 100%; } .top-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--border); border-radius: var(--r); transition: background var(--t); cursor: pointer; } .top-item:last-child { border-bottom: none; } .top-item:hover { background: var(--surface2); } .top-rank { font-size: 17px; font-weight: 900; color: var(--accent); min-width: 26px; text-align: center; line-height: 1; } .top-rank.gold { color: #f1c40f; } .top-rank.silver { color: #95a5a6; } .top-rank.bronze { color: #cd7f32; } .top-item img { width: 42px; height: 42px; border-radius: var(--r); object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .top-item-info { flex: 1; min-width: 0; } .top-item-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .top-item-note { font-size: 11px; color: var(--star); white-space: nowrap; flex-shrink: 0; } /* ============================================================ FORMULAIRES ============================================================ */ input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, select { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--r); padding: 9px 12px; color: var(--text); font-size: .9rem; width: 100%; outline: none; transition: border-color var(--t), background var(--t); appearance: none; -webkit-appearance: none; } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--surface); } /* ============================================================ BOUTON DARK MODE TOGGLE ============================================================ */ #dark-mode-toggle, #dark-mode-toggle-tablet, #dark-mode-toggle-mobile { transition: color var(--t), background var(--t), transform var(--t); } #dark-mode-toggle:active, #dark-mode-toggle-tablet:active, #dark-mode-toggle-mobile:active { transform: scale(.88) rotate(25deg); } /* ============================================================ GRILLE INDEX ============================================================ */ @media (max-width: 768px) { .row > [class*="col-"] { padding-left: 2px; padding-right: 2px; margin-bottom: 12px; } } /* ============================================================ PRINT ============================================================ */ @media print { .bottom-nav, .header-mobile, .header-tablet, .header-desktop, .slick-commercesvu-prev, .slick-commercesvu-next, .slick-commerces-recent-prev, .slick-commerces-recent-next, .slick-coup-de-coeur-prev, .slick-coup-de-coeur-next, .slick-commerces-locaux-prev, .slick-commerces-locaux-next, .favori-button, .site-web-button { display: none !important; } body { background: #fff; color: #000; padding: 0; } }