/* ===================================================================== DECKUNIVERS — THEME CLAIR, LOT 1 (21/09/2026) --------------------------------------------------------------------- Cette feuille est chargee UNIQUEMENT en mode previsualisation, APRES assets/css/style.css, et tout y est porte par le selecteur racine `.du-clair` pose sur par includes/header.php. CONSEQUENCE DIRECTE, ET C'EST LE POINT LE PLUS IMPORTANT : - assets/css/style.css n'est PAS modifie ; - les pages d'administration, qui chargent style.css via admin/header.php, ne chargent jamais cette feuille et ne portent jamais la classe .du-clair — leur rendu ne peut donc pas changer, par construction ; - un visiteur sans le cookie ne recoit meme pas ce fichier. METHODE : le theme sombre est presque entierement pilote par les variables de :root. On les redefinit ici, ce qui bascule d'un coup l'ecrasante majorite des composants ; le reste de la feuille ne traite que les endroits ou style.css ecrit une couleur EN DUR, releves un par un dans le fichier (et non a l'oeil). ZONES SOMBRES ASSUMEES, et pourquoi : le mot « DECK » du logo est BLANC (contraste median 3,30:1 sur blanc, 2,89:1 sur gris leger — sous le seuil de 3:1). Le logo ne peut donc pas etre pose sur une surface claire. Restent sombres : .site-top (annonces + en-tete), .tc-barre-categories, le hero, le bandeau de marque, le pied de page, et la PLAQUE du logo dans chaque tuile de plateforme (cinq des onze logos sont des aplats blancs). ===================================================================== */ /* --------------------------------------------------------------------- 1. JETONS — palette validee sur la maquette du 21/09/2026 Contrastes verifies : texte 14,1:1, texte doux 5,26:1, blanc sur violet 7,1:1, blanc sur encre 18,69:1. --------------------------------------------------------------------- */ .du-clair { /* palette du nouveau theme */ --tc-fond: #f7f8fb; --tc-surface: #ffffff; --tc-surface-2: #f1f2f8; --tc-bordure: #e5e7f0; --tc-bordure-forte: #d3d6e4; --tc-encre: #14101f; --tc-texte: #2a2438; --tc-texte-doux: #6b6480; --tc-violet: #6d28d9; --tc-violet-clair: #f3ecfe; --tc-magenta: #c227b8; --tc-cyan: #0e9fc4; --tc-vert: #0f8f5f; --tc-vert-fond: #e6f6ef; --tc-ambre: #8a6410; --tc-ambre-fond: #fdf3dd; /* OR DES ETOILES DE NOTATION. Une note en etoiles est un ELEMENT GRAPHIQUE : le critere applicable est le 3:1 du non-texte (WCAG 1.4.11), pas le 4,5:1 du texte. C'est l'or LE PLUS CLAIR qui tienne 3:1 sur les SEPT surfaces du theme portant du texte (voir section 20.b). H=42deg, saturation 100 % : la teinte reste franchement doree, la convention attendue pour une note. Source unique : ne pas ecrire la valeur ailleurs. */ --tc-or: #b57f00; --tc-rouge: #c02626; --tc-rouge-fond: #fdeaea; --tc-degrade: linear-gradient(90deg, #d434c8 0%, #7c3aed 52%, #22b8e0 100%); /* MEME DEGRADE, ASSOMBRI, POUR CE QUI PORTE DU TEXTE BLANC. Mesure : sur les butees du degrade clair, le blanc donne 4,10:1 au magenta, 5,70:1 au violet mais 2,33:1 au cyan — un bouton dont la fin du libelle tombe dans le cyan est illisible. Les butees assombries donnent 5,78 / 7,10 / 4,62:1, toutes au-dessus du seuil, en gardant les trois teintes de la marque. Le degrade CLAIR reste utilise partout ou il ne porte pas de texte : filet sous l'en-tete, tranche des cartes, accents. */ --tc-degrade-texte: linear-gradient(90deg, #b3219f 0%, #6d28d9 55%, #0b7f9e 100%); --tc-ombre: 0 1px 2px rgba(20, 16, 31, .05), 0 8px 24px rgba(20, 16, 31, .06); --tc-ombre-forte: 0 2px 6px rgba(20, 16, 31, .08), 0 18px 44px rgba(20, 16, 31, .10); /* teintes claires posees SUR les zones sombres */ --tc-sur-sombre: rgba(255, 255, 255, .88); --tc-sur-sombre-fort: #ffffff; --tc-voile-clair: rgba(255, 255, 255, .09); --tc-voile-bord: rgba(255, 255, 255, .17); /* --- reaffectation des variables de style.css --- */ --bg-primary: #f7f8fb; --bg-secondary: #f1f2f8; --bg-card: #ffffff; --bg-card-hover: #fbfbfe; --accent: #6d28d9; /* --accent-light sert de couleur de TEXTE (liens, libelles, prix). Sur fond clair il doit rester lisible : #6d28d9 donne 7,1:1 sur blanc, la variante pale d'origine (#a78bfa) tombait a 2,2:1. */ --accent-light: #6d28d9; --accent-glow: rgba(109, 40, 217, .18); --success: #0f8f5f; --danger: #c02626; --warning: #8a6410; --text-primary: #14101f; --text-secondary: #2a2438; --text-muted: #6b6480; --border: #e5e7f0; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(20, 16, 31, .05), 0 8px 24px rgba(20, 16, 31, .06); background: var(--tc-fond); } /* --------------------------------------------------------------------- 2. SOCLE --------------------------------------------------------------------- */ .du-clair body { background: var(--tc-fond); color: var(--tc-texte); -webkit-font-smoothing: antialiased; } .du-clair a { color: var(--tc-violet); } .du-clair a:hover { color: var(--tc-magenta); } .du-clair h1, .du-clair h2, .du-clair h3, .du-clair h4 { color: var(--tc-encre); } .du-clair ::selection { background: var(--tc-violet-clair); color: var(--tc-encre); } /* --------------------------------------------------------------------- 3. BLOC FIXE DU HAUT — SOMBRE On ne touche NI a position:fixed, NI a la cale, NI au script de mesure : c'est le correctif iOS du 16/09, seules les couleurs changent ici. --------------------------------------------------------------------- */ .du-clair .site-top { background: var(--tc-encre); /* En defilement, le bloc fixe passe au-dessus du contenu clair : une elevation le detache, la ou un filet clair serait invisible. */ box-shadow: 0 6px 20px rgba(20, 16, 31, .18); } .du-clair .header { background: transparent; border-bottom: 0; } .du-clair .user-menu-link { color: var(--tc-sur-sombre); } .du-clair .user-menu-link:hover { color: #fff; } /* Le lien de deconnexion porte color:var(--text-muted) EN LIGNE dans includes/header.php : sur fond sombre il tomberait a 3,1:1. */ .du-clair .header .user-menu-link[href="/logout.php"] { color: rgba(255, 255, 255, .62) !important; } .du-clair .header .user-menu-link[href="/logout.php"]:hover { color: #fff !important; } .du-clair .credits-badge { background: var(--tc-voile-clair); border: 1px solid var(--tc-voile-bord); color: #fff; } .du-clair .credits-badge:hover { background: rgba(255, 255, 255, .15); color: #fff; } .du-clair .credits-badge .amount { color: #cbb6fd; } /* Pastille de verification d'identite, sur fond sombre. */ .du-clair .header .kyc-badge--unverified { color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .34); } .du-clair .header .kyc-badge-link:hover .kyc-badge--unverified { color: #fff; border-color: rgba(255, 255, 255, .6); } /* --- navigation par categorie : la navigation ACTUELLE, restylee --- Aucune barre de recherche, aucun menu deroulant ajoute ici : c'est le LOT 2. Seules les couleurs et l'etat actif changent. CORRECTIF DU 24/09/2026 : BARRE CLAIRE A L'ARRIVEE SUR IPHONE. Le fond sombre de la barre et la couleur de ses libelles sont portes par UNE SEULE regle, sans condition, sur .tc-barre-categories : un conteneur qui NE DEFILE PAS, pose autour de