/* ══════════════════════════════════════════ THEMES.CSS — The Experience : New Heaven 3 palettes de faction (PRO-TECH / NEUTRE / REBELLE), appliquées via l'attribut data-theme sur . ⚠️ IMPORTANT — Ordre de chargement : Ce fichier doit être chargé APRÈS head.css, car il surcharge les MÊMES variables (--blue, --border, --bg...) déjà définies là-bas. C'est voulu : tout le site qui utilise déjà var(--blue), var(--border) etc. se reteinte automatiquement, sans qu'on ait à toucher aux autres fichiers un par un. Note : le nom "--blue" est conservé tel quel même pour les thèmes neutre/rebelle (où sa valeur devient gris ou rouge). On ne renomme pas la variable pour ne pas avoir à modifier tous les fichiers qui l'utilisent déjà — seule sa VALEUR change selon le thème actif. ══════════════════════════════════════════ */ /* ── PRO-TECH (SERAPH) — bleu, thème par défaut ── Répète volontairement les valeurs déjà présentes dans head.css : si head.css change un jour, ce bloc reste la source de vérité pour le thème "tech" explicitement. */ :root, [data-theme="tech"] { --blue: #00aaff; --blue-dim: #0077bb; --blue-rgb: 0, 170, 255; --blue-glow: rgba(0, 170, 255, 0.18); --border: #1a2c4f; --bg: #040810; --bg-rgb: 4, 8, 16; --bg2: #070d1a; --panel: #0b1425; --panel-2: #0e1a30; --icon-invert: 1; --icon-fill: #ffffff; --hero-image: url('/images/hero/hero-protech.png'); /* --indigo (#3a2bc7) existe dans _base.css, decrit comme reserve aux fonds decoratifs, et ne servait presque nulle part. On lui donne son emploi ici plutot que d'ajouter un troisieme accent : toutes les teintes libres sont deja prises par les statuts (vert, rouge, or, orange) ou par les deux autres chartes (violet, orange). Trois roles, aucun conflit : --blue pour ce qui se clique, --purple pour les micro-accents, --indigo pour ce qui ne signifie rien. Sa version rgb manquait — indispensable pour les fonds en rgba(). */ --indigo-rgb: 58, 43, 199; /* Règle des 3 thèmes : Bleu → rose | Rouge → orange | Blanc/gris → violet. --purple vaut #c275f2 (violet) par défaut dans _base.css — jamais surchargé pour tech jusqu'ici. Global cette fois (citation, fondatrice, section CTA, Phantom, tags... tout ce qui utilise var(--purple) suit automatiquement). */ --purple: #fcbcfd; --purple-rgb: 252, 188, 253; } /* ── NEUTRE — vrai thème clair (fond blanc/gris, texte foncé) ── */ [data-theme="neutral"] { /* NEUTRE PASSE EN VIOLET. --blue valait #4a5568, un gris ardoise. Comme c'est LA variable d'accent du site — 1146 emplois de var(--blue), 795 de var(--blue-rgb) dans le CSS : libelles de section, liens, bordures, icones, boutons — le theme se lisait ardoise avec quelques touches de violet, le violet ne vivant que dans --purple, bien plus rarement utilise. On retinte donc --blue lui-meme, exactement comme REBELLE le passe en rouge. C'est ce qui fait basculer l'identite du theme d'un coup. Valeurs choisies pour rester lisibles sur fond clair (--bg #f4f5f7) : #7c3aed donne un contraste d'environ 5,4:1, au-dessus du seuil de 4,5:1 pour du texte courant. Un violet plus vif comme --purple (#9d5ce8) serait passe sous ce seuil. --purple reste plus clair et garde son role de micro-accent. POUR REVENIR EN ARRIERE : remettre les quatre valeurs d'origine, #4a5568 / #6b7684 / 74, 85, 104. Rien d'autre n'a besoin d'etre touche. */ --blue: #7c3aed; /* violet — accent principal du thème */ --blue-dim: #5b21b6; /* violet profond — bordures, survols */ --blue-rgb: 124, 58, 237; --blue-glow: rgba(124, 58, 237, 0.12); --border: #d7dae0; --bg: #f4f5f7; --bg-rgb: 244, 245, 247; --bg2: #e9eaed; --panel: #ffffff; --icon-invert: 0; /* ENCRE SOMBRE, PAS L'ACCENT. --icon-fill vaut #ffffff en tech comme en rebelle : une couleur NEUTRE, pas la couleur du theme. Neutre etait le seul a y mettre var(--blue), donc a peindre tout son header avec l'accent. Le header etant l'element le plus large et le plus permanent de l'interface, il teintait la perception de la page entiere : le violet n'etait pas trop present dans le contenu, il etait present au mauvais endroit. var(--white) vaut #14161a ici (le nom vient de _base.css et designe l'encre la plus contrastee du theme) : c'est le miroir exact du blanc sur fond sombre. Le logo NH garde sa surcharge en sauge plus bas : il devient le seul accent du header, au lieu d'un header entierement colore. */ --icon-fill: var(--white); --hero-image: url('/images/hero/hero-neutral.png'); --panel-2: #f1f2f4; /* Texte inversé : ces variables viennent de _base.css (pensées pour fond sombre) et doivent être surchargées ici pour rester lisibles sur clair. */ --text: #262a30; --text-dim: #565c66; --text-faint: #82868f; --white: #14161a; /* nom hérité de _base.css : "texte le plus contrasté" */ /* --purple (violet lavande, #c275f2) n'est pas retinté par défaut pour ce thème — seul le thème REBELLE le fait plus bas. Résultat : la section CTA de fin de page (index-3.css, "Ton histoire t'attend") restait en violet vif, qui détonnait avec l'identité violette adoptée pour le reste du thème NEUTRE (footer, onglets, CTA connexion). On aligne ici. */ --purple: #9d5ce8; --purple-rgb: 157, 92, 232; --purple-dim: #7c3aed; /* ── Vert d'accent, a ne jamais confondre avec le vert de statut ── --success vaut --green (#4adb95), un menthe vif reserve a « valide ». Le sauge est sourd et beaucoup plus fonce : meme cote a cote, les deux ne se lisent pas comme la meme famille. REGLE D'EMPLOI, c'est elle qui fait tenir la distinction, pas la teinte : --sage ne touche JAMAIS une pastille, un point d'etat, une bordure de statut ni une icone d'etat. Il habille des surfaces — fonds de section, filets, libelles, illustrations. Le menthe vif garde le monopole des petits objets d'etat, sur les trois themes. Pose ici et non dans _base.css : c'est un accent de theme, pas une couleur fonctionnelle. Les autres chartes n'en heritent pas. */ --sage: #599776; /* plus vert que le #6f9080 initial, juge trop gris */ --sage-rgb: 89, 151, 118; --sage-dim: #396f52; /* texte et filets, sur fond clair — 5,88:1 */ --scanline-rgba: rgba(0, 0, 0, 0.008); /* ── Statuts : les valeurs de _base.css sont calibrees pour un fond SOMBRE et deviennent illisibles en TEXTE sur le fond clair du theme neutre (contraste ~1,7 a 3:1 : jaune signale par l'utilisatrice, + vert et rouge). On les assombrit ici pour un contraste AA (~5:1 sur blanc). Les rares boutons a FOND de statut + texte sombre sont corriges juste apres ce bloc. Mesure en navigateur le 14 sept. 2026 : vert et rouge descendus d'un cran (etaient #127a49 / #c62435) car ils restaient a 4,28-4,49:1 sur les fonds teintes clairs des badges et boutons (supprimer, etat casse, adoptable...). */ --warning: #8a6100; --gold: #8a6100; --success: #107044; --green: #107044; --error: #bd2231; --red: #bd2231; --text-faint: #5f636b; /* etait #82868f (~3,3:1) → ~5:1 */ /* ── Couleurs de role (pseudo et badge de role des publications) ── Le JS les lit via var(--role-xxx, #couleur-sombre) : sans ce bloc, tech et rebelle gardent leurs couleurs vives. Sur fond clair, ces couleurs vives tombaient entre 2:1 (futur joueur #44cc88) et 3,6:1 (admin #ff3355). Memes teintes, assombries pour depasser 5:1. */ --role-admin: #c4122f; --role-moderateur: #a1287f; --role-joueur: #0068a8; --role-futur-joueur: #157347; --role-autre: #4a6580; /* Violet pour du TEXTE ecrit en style inline (lore.php, essentiel.php) : --purple (#9d5ce8) reste l'accent decoratif mais ne fait que 4,1:1 en texte. Utilise en var(--purple-texte, var(--purple)) : les autres themes gardent --purple. */ --purple-texte: var(--purple-dim); } /* Fond de statut + texte sombre FIXE : le fond etant assombri sur neutral, on force un texte clair pour rester lisible. */ [data-theme="neutral"] .btn-warning { color: #fff; } /* Absences.css : fond --warning, texte #000 */ [data-theme="neutral"] .canvas-action.danger:hover { color: #fff; } /* ludotheque.css : fond --red, texte --white (= encre sombre ici) */ /* PAS de surcharge pour .btn-modal-danger : dans admin.css, la definition qui s'applique (la 2e, ~ligne 879) est un fond rose tres clair + texte rouge. Un texte blanc force y etait presque invisible (1,3:1, mesure le 14 sept. 2026). */ /* ── Cartes du tableau de bord (.dash-bloc) — dosage par thème ── Panel/bordure trop sombres pour une bonne lisibilité d'ensemble sur les thèmes foncés. Dosage différent par thème plutôt qu'un compromis unique : TECH (bleu nuit très profond, --panel très sombre) a besoin d'un éclaircissement plus marqué que REBEL (rouge sombre, qui a déjà un peu plus de présence visuelle par nature). NEUTRE n'est pas touché, déjà clair par défaut. */ [data-theme="tech"] .dash-bloc { background: color-mix(in srgb, var(--panel) 88%, white 12%); border-color: color-mix(in srgb, var(--border) 60%, white 40%); } [data-theme="tech"] .dash-bloc-header { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 28%, transparent), transparent); } [data-theme="rebel"] .dash-bloc { background: color-mix(in srgb, var(--panel) 92%, white 8%); border-color: color-mix(in srgb, var(--border) 70%, white 30%); } /* ══════════════════════════════════════════════════════════════════════ CARTES DE LA FAMILLE SIMULATIONS — meme traitement que .dash-bloc Ces pages n'avaient AUCUNE regle de theme : elles paraissaient correctes uniquement parce que simulations-shared.css leur imposait une palette sombre quel que soit le theme actif. Ce bloc :root ayant ete retire, il faut leur donner ce que le tableau de bord a deja — un fond legerement eclairci sur les themes sombres, pour que les cartes se detachent du fond de page au lieu de s'y fondre. En NEUTRE, aucune regle n'est necessaire : --panel y est blanc pur sur un fond gris tres clair, le contraste existe deja. C'est exactement ce que fait .dash-bloc, qui rend bien sur les trois themes. ══════════════════════════════════════════════════════════════════════ */ [data-theme="tech"] .pub, [data-theme="tech"] .sujet-row, [data-theme="tech"] .post-block, [data-theme="tech"] .sujet-header, [data-theme="tech"] .reply-section, [data-theme="tech"] .zone-card, [data-theme="tech"] .qstat, [data-theme="tech"] .ajouer-section { background: color-mix(in srgb, var(--panel) 88%, white 12%); border-color: color-mix(in srgb, var(--border) 60%, white 40%); } [data-theme="rebel"] .pub, [data-theme="rebel"] .sujet-row, [data-theme="rebel"] .post-block, [data-theme="rebel"] .sujet-header, [data-theme="rebel"] .reply-section, [data-theme="rebel"] .zone-card, [data-theme="rebel"] .qstat, [data-theme="rebel"] .ajouer-section { background: color-mix(in srgb, var(--panel) 92%, white 8%); border-color: color-mix(in srgb, var(--border) 70%, white 30%); } [data-theme="rebel"] .dash-bloc-header { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 24%, transparent), transparent); } /* BUG CORRIGÉ — texte peu lisible sur la photo du bandeau tableau de bord (.dash-header, "Bienvenue, [pseudo]") en thème NEUTRE : contrairement au hero public, ce texte n'avait jamais reçu de traitement de contraste — il utilise var(--blue)/var(--white), tous deux sombres en thème NEUTRE, posés directement sur la photo du thème (peu de contraste). Même solution que pour le hero : texte clair + halo sombre. Le pseudo ("Admin") passe en violet, cohérent avec l'accent signature du thème. */ [data-theme="neutral"] .dash-greeting-label { color: #ffffff !important; text-shadow: 0 0 5px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.4); } [data-theme="neutral"] .dash-greeting-label::after { background: rgba(255,255,255,0.65); } [data-theme="neutral"] .dash-greeting { color: #ffffff !important; text-shadow: 0 0 5px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.4); } [data-theme="neutral"] .dash-greeting span { color: #9d5ce8 !important; text-shadow: 0 0 8px rgba(255,255,255,0.85), 0 0 18px rgba(255,255,255,0.55); } /* Bandeau d'en-tête des cartes dashboard ("TRI DU MOIS", "MES SUCCÈS"...) : utilise var(--blue) par défaut, ce qui donne un gris terne en thème NEUTRE (--blue y est un gris ardoise). Passe sur var(--purple) pour une vraie touche de couleur, avec un dosage plus marqué (35% au lieu des 18% de base) pour que ça se voie vraiment. */ [data-theme="neutral"] .dash-bloc-header { background: linear-gradient(180deg, color-mix(in srgb, var(--purple) 35%, transparent), transparent); } /* Vignettes des photos sur la page lore (lore.css) : codées en dur en bleu-noir (rgba(10,15,25,...) / rgba(11,20,37,...)), pensées pour se fondre dans un fond sombre. Sur fond clair, ça laissait une tache sombre disgracieuse en bas des images — et la teinte violette tentée ensuite jurait tout autant sur des photos aux tons chauds. Ces deux essais ont mal rendu ; on retire simplement la vignette pour ce thème plutôt que de continuer à deviner une couleur qui marche sur toutes les photos (elles ont des ambiances très différentes). */ [data-theme="neutral"] .section-banner::after { background: none; } [data-theme="neutral"] .prism-img-wrap::after { background: none; } /* Intro d'acte (.acte-intro, page lore) : fond, bordure et filigrane "ACTE I" utilisent tous var(--blue), gris terne en thème NEUTRE. Bascule sur var(--purple), avec un fond plus marqué (12% au lieu de 5%) pour que le dégradé se voie vraiment plutôt que de rester quasi invisible. */ [data-theme="neutral"] .acte-intro { background: linear-gradient(180deg, rgba(var(--purple-rgb), 0.12) 0%, transparent 100%); border-left-color: var(--purple); } [data-theme="neutral"] .acte-intro-eyebrow { color: var(--purple); } /* Citation en vedette (.callout.quote, page lore) : le fond dégradé de base (7% d'opacité, dans lore.css) est presque invisible en thème NEUTRE. Renforcé, avec un guillemet décoratif plus marqué aussi. */ [data-theme="neutral"] .callout.quote { background: linear-gradient(180deg, rgba(var(--sage-rgb), 0.20) 0%, transparent 100%); } [data-theme="neutral"] .callout.quote::before { opacity: 0.55; } /* La section CTA finale ("Ton histoire t'attend", index-3.css) utilisait par endroits du rgba(194,117,242,...) codé en dur — l'équivalent RGB de --purple — plutôt que la variable elle-même. Corrigé directement dans index-3.css (remplacé par var(--purple-rgb)), donc les halos ::before/::after suivent déjà le thème automatiquement, sans besoin de surcharge ici. Il reste seulement les couleurs SUPPLÉMENTAIRES (au-delà de --purple) du bouton principal, qui étaient restées sur d'anciennes teintes roses lors du passage au violet. */ [data-theme="neutral"] .cta-section .btn-primary::before { background: linear-gradient(90deg, var(--purple), #c9a3f5); } [data-theme="neutral"] .cta-section .btn-primary:hover { background: #8a4fe0 !important; border-color: #8a4fe0 !important; box-shadow: 0 0 32px rgba(var(--purple-rgb), 0.55); } /* Certains boutons supposent un texte sombre sur un accent CLAIR (cohérent pour PRO-TECH/REBELLE où --blue est vif). En thème NEUTRE, --blue devient un gris foncé : il faut donc repasser le texte en clair pour ces mêmes boutons. */ [data-theme="neutral"] .btn--primary, [data-theme="neutral"] .btn-primary, [data-theme="neutral"] .nav-cta { color: #ffffff; } /* BUG CORRIGÉ — blanc sur blanc au survol : Deux problèmes cumulés en thème NEUTRE : 1) header.css prévoit un texte foncé au :hover, mais la règle au-dessus (même spécificité, chargée après) l'emportait quand même et forçait le texte en blanc → texte invisible sur fond clair. 2) header.css prévoit aussi un FOND quasi blanc au survol (#f0f8ff), pensé pour ressortir sur les thèmes sombres (tech/rebel). En thème NEUTRE, la page est déjà claire (--bg très proche de cette couleur) donc le bouton entier se fondait dans la page au survol — pas seulement le texte. On corrige les deux : fond sombre (contraste net avec la page claire) + texte blanc, plutôt que d'essayer d'éclaircir encore un fond déjà clair sur une page déjà claire. */ [data-theme="neutral"] .nav-cta:hover { background: #9d5ce8 !important; color: #ffffff !important; } /* Le logo en noir plein est trop dur en thème NEUTRE : un gris doux (inversion partielle) plutôt qu'un noir à 100%. Les icônes de nav, elles, restent en noir plein (plus petites, moins besoin de nuance). */ [data-theme="neutral"] .logo img { filter: brightness(0) invert(0.45) drop-shadow(0 0 8px rgba(var(--blue-rgb), 0.3)) !important; } [data-theme="neutral"] .logo img:hover { filter: brightness(0) invert(0.3) drop-shadow(0 0 14px rgba(var(--blue-rgb), 0.4)) !important; } /* Le badge du hero a maintenant un fond en verre qui suit le thème (rgba(var(--bg-rgb))) : verre clair en NEUTRE, sombre en PRO-TECH/ REBELLE. Son texte en var(--blue) — foncé pour NEUTRE, vif pour les deux autres — est donc déjà cohérent par défaut, sans forçage. */ /* Le tagline, lui, est posé directement sur la photo — qui est claire et lumineuse pour le thème NEUTRE. Seul le halo du texte doit s'inverser (clair au lieu de sombre) pour rester lisible sur une photo de jour plutôt qu'une photo de nuit. Le corps du texte est éclairci et la ligne d'emphase assombrie : sans ce contraste, les deux se confondent (var(--white) et var(--blue) sont trop proches en teinte dans ce thème). */ /* Blanc + halo noir : DESKTOP uniquement (voir plus bas pour mobile, qui revient à un texte gris simple sans ombre — l'ombre sous un texte blanc rendait bizarre sur petit écran). */ @media (min-width: 901px) { [data-theme="neutral"] .hero-tagline { color: #ffffff !important; /* Inversé pour matcher tech/rebel : texte clair + halo sombre, plutôt que texte foncé + halo clair. Toujours la même structure (texte + glow + contour), juste les couleurs inversées. CONTOUR RAMENE DE 2px A 1px. Avec paint-order:stroke fill, le contour est peint SOUS le remplissage et mord sur le bord de chaque lettre. A 2px il absorbait presque tout l'epaississement de Quicksand 700 : les futs grossissaient, mais la partie blanche visible restait identique — la graisse etait appliquee sans se voir. La lisibilite sur la photo ne repose pas sur ce contour mais sur les quatre halos noirs ci-dessous, qui sont conserves tels quels. */ -webkit-text-stroke: 1px rgba(0,0,0,1); paint-order: stroke fill; text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 18px rgba(0,0,0,1), 0 0 32px rgba(0,0,0,1), 0 0 48px rgba(0,0,0,0.95); } [data-theme="neutral"] .hero-tagline em { color: #ffffff !important; /* Meme raison que ci-dessus : la punchline suit la tagline. */ -webkit-text-stroke: 1px rgba(0,0,0,1); paint-order: stroke fill; text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 18px rgba(0,0,0,1), 0 0 32px rgba(0,0,0,1), 0 0 48px rgba(0,0,0,0.95); } [data-theme="neutral"] .hero-tagline em::before { background: #ffffff; } } /* MOBILE : retour au style d'origine (texte gris simple, sans ombre ni contour) — le traitement blanc + halo noir rendait bizarre à cette taille d'écran. */ @media (max-width: 900px) { [data-theme="neutral"] .hero-tagline { color: var(--text-dim) !important; -webkit-text-stroke-width: 0; text-shadow: none; } [data-theme="neutral"] .hero-tagline em { color: var(--blue) !important; -webkit-text-stroke-width: 0; text-shadow: none; } [data-theme="neutral"] .hero-tagline em::before { background: var(--blue-dim); } } /* Le bouton secondaire (glassmorphism) se fond trop dans une photo claire en thème NEUTRE : bordure et fond renforcés pour qu'il reste bien visible sur un fond lumineux. BUG CORRIGÉ — "cadre flou" : index-2.css applique un fort backdrop-filter: blur(12px) sur ce bouton (pensé pour un fond sombre, effet "verre fumé"). Sur une photo déjà claire, combiné à un fond blanc, ça donnait un rectangle flou façon buée. On le neutralise ici (!important nécessaire car index-2.css utilise déjà !important dessus). */ /* ── Forme du CTA hero par thème — charte graphique §4.2 ── Avant : .btn-primary/.btn-secondary utilisaient la même coupe diagonale (clip-path) sur les 3 thèmes, seule la couleur changeait (recoloration pure, pas une identité de forme propre au thème). Tech garde la coupe diagonale (déjà correcte). Neutre passe en pilule. Rebelle : coupe retirée en attendant la dissolution pixel (nécessite un ajout de markup HTML, voir note plus bas). */ [data-theme="tech"] .btn-primary:hover { background: var(--purple); box-shadow: 0 0 20px rgba(var(--purple-rgb), 0.5); } [data-theme="tech"] .btn-secondary:hover { background: rgba(var(--purple-rgb), 0.12); border-color: var(--purple); color: var(--purple); } [data-theme="neutral"] .btn-primary { clip-path: none; border-radius: 24px; } [data-theme="neutral"] .btn-primary:hover { background: var(--purple) !important; } [data-theme="neutral"] .btn-secondary { clip-path: none; border-radius: 24px; } /* Rebelle : migré de la dissolution pixel vers le CTA cible (coins viseur), charte graphique §4.2 (mis à jour — la dissolution pixel a été abandonnée pour ce palier). Le wrapper .btn-primary-wrap et les spans .pixel-tail peuvent rester dans index.php sans gêner : masqués explicitement ci-dessous plutôt que de compter sur leur suppression du HTML, qui n'a pas été faite dans cette passe (CSS uniquement). */ .btn-primary-wrap { display: contents; } .pixel-tail { display: none; position: relative; width: 40px; flex-shrink: 0; } .pixel-tail span { position: absolute; width: 4px; height: 9.09%; transition: background 0.2s; } [data-theme="rebel"] .pixel-tail { display: none !important; } /* ETATS PERMUTES : le bouton est REMPLI au repos et se VIDE au survol. C'etait l'inverse. Seules les valeurs ont ete echangees entre le bloc de repos et le bloc :hover — aucune autre propriete n'a bouge. */ [data-theme="rebel"] .btn-primary { clip-path: none; background: var(--purple); color: var(--bg); border-color: var(--purple); position: relative; animation: btnCtaFlicker 3.4s infinite; } [data-theme="rebel"] .btn-primary::before, [data-theme="rebel"] .btn-primary::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; transition: width 0.2s, height 0.2s; } [data-theme="rebel"] .btn-primary::before { top: -2px; right: -2px; border-left: none; border-bottom: none; } [data-theme="rebel"] .btn-primary::after { bottom: -2px; left: -2px; border-right: none; border-top: none; } [data-theme="rebel"] .btn-primary:hover::before, [data-theme="rebel"] .btn-primary:hover::after { width: 10px; height: 10px; } [data-theme="rebel"] .btn-primary:hover { background: transparent !important; border-color: transparent !important; /* sinon la bordure pleine noie les coins viseur */ color: var(--blue) !important; } @keyframes btnCtaFlicker { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 44% { opacity: 0.55; } 46% { opacity: 1; } 88% { opacity: 1; } 90% { opacity: 0.7; } 92% { opacity: 1; } } /* ══════════════════════════════════════════════════════════════════════ POINTILLÉ IRRÉGULIER — REBELLE La charte décrit « un pointillé irrégulier, largeurs variables, qui saute par intermittence façon signal interrompu, halo ambiant rouge diffus ». `border-style: dashed` ne peut rien de tout ça : ses tirets sont tous identiques et il ne s'anime pas. On passe par border-image, seule technique qui accepte un motif quelconque sur une bordure. Le motif fait 58 px : quatre longueurs de tiret et quatre espacements différents, assez long pour qu'on ne perçoive plus la répétition. L'INTERMITTENCE ET LE HALO SONT AU SURVOL uniquement. En continu, le clignotement fatiguerait la lecture et ferait tourner une animation en permanence. LIMITÉ AUX BOUTONS SECONDAIRES. Une première version l'appliquait aussi aux onglets, à la boîte de recherche et aux questions de FAQ : le motif se retrouvait autour des onglets Connexion/Inscription, où il n'a rien à faire. La charte le prévoit pour remplacer le bouton secondaire, jugé trop plat — pas comme habillage général. Cinq classes, car « bouton secondaire » en porte cinq selon les pages : .btn-secondary n'existe qu'à trois endroits, tous sur l'accueil. Les boutons Annuler et Brouillon jouent le même rôle ailleurs. ══════════════════════════════════════════════════════════════════════ */ [data-theme="rebel"] .btn-secondary, [data-theme="rebel"] .btn-submit-secondary, [data-theme="rebel"] .btn-ghost, [data-theme="rebel"] .btn-cancel, [data-theme="rebel"] .btn-draft { border-style: solid; border-image: repeating-linear-gradient(90deg, var(--red) 0 9px, transparent 9px 13px, var(--red) 13px 17px, transparent 17px 27px, var(--red) 27px 38px, transparent 38px 42px, var(--red) 42px 46px, transparent 46px 58px) 1; } [data-theme="rebel"] .btn-secondary:hover, [data-theme="rebel"] .btn-submit-secondary:hover, [data-theme="rebel"] .btn-ghost:hover, [data-theme="rebel"] .btn-cancel:hover, [data-theme="rebel"] .btn-draft:hover { animation: rebelSignal 4.2s steps(1) infinite; box-shadow: 0 0 22px rgba(var(--red-rgb), .18), inset 0 0 18px rgba(var(--red-rgb), .07); } /* steps(1) et non un fondu : le trait doit SAUTER, pas respirer. Quatre décrochages brefs et irréguliers par cycle. */ @keyframes rebelSignal { 0%, 88% { opacity: 1; } 89% { opacity: .28; } 90% { opacity: 1; } 93% { opacity: .45; } 94% { opacity: 1; } 97% { opacity: .2; } 98%,100%{ opacity: 1; } } /* Respect du réglage système : pas de clignotement pour qui l'a désactivé. Le halo, lui, reste — il n'est pas animé. */ @media (prefers-reduced-motion: reduce) { [data-theme="rebel"] .btn-secondary:hover, [data-theme="rebel"] .btn-submit-secondary:hover, [data-theme="rebel"] .btn-ghost:hover, [data-theme="rebel"] .btn-cancel:hover, [data-theme="rebel"] .btn-draft:hover { animation: none; } } [data-theme="rebel"] .btn-secondary { clip-path: none; /* border-style: dashed retiré — remplacé par le pointillé irrégulier en border-image, déclaré plus haut. */ } [data-theme="rebel"] .btn-secondary:hover { background: rgba(var(--blue-rgb), 0.1) !important; border-color: var(--purple) !important; } /* Le bouton secondaire (glassmorphism) se fond trop dans une photo claire en thème NEUTRE : bordure et fond renforcés pour qu'il reste bien visible sur un fond lumineux. BUG CORRIGÉ — "cadre flou" : index-2.css applique un fort backdrop-filter: blur(12px) sur ce bouton (pensé pour un fond sombre, effet "verre fumé"). Sur une photo déjà claire, combiné à un fond blanc, ça donnait un rectangle flou façon buée. On le neutralise ici (!important nécessaire car index-2.css utilise déjà !important dessus). */ /* RENFORCE. La pastille n'etait opaque qu'a 55 % : sur le hero clair et charge, la photo transparaissait derriere un texte en --blue (#4a5568), un gris ardoise moyen. Rien ne l'eclaircissait — c'est le fond qui ne portait pas. A cote du bouton primaire, plein et franc, l'ecart sautait aux yeux. Trois reglages : fond a 82 %, encre au contraste maximum du theme (--white vaut #14161a en neutre, le nom vient de _base.css), bordure un peu plus dense. Le survol est remonte en consequence, sinon il serait devenu MOINS opaque que le repos. */ [data-theme="neutral"] .btn-secondary { background: rgba(255,255,255,0.82) !important; border-color: rgba(20,22,26,0.5) !important; color: var(--white) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="neutral"] .btn-secondary:hover { background: rgba(255,255,255,0.96) !important; border-color: #14161a !important; color: #14161a !important; } /* Même souci de "cadre flou" sur le badge "RPG TEXTUEL · SCIENCE-FICTION DYSTOPIQUE" en haut du hero (index-2.css : fond translucide clair + blur(12px), qui donne le même effet buée sur une photo claire). Fond net et opaque à la place, sans flou. */ [data-theme="neutral"] .hero-badge { background: rgba(255, 255, 255, 0.92); border-color: rgba(20, 22, 26, 0.25); color: #2b3038; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 16px rgba(0,0,0,0.12); } /* ── REBELLE — rouge ── */ [data-theme="rebel"] { --blue: #ff3344; --blue-dim: #cc1f2e; --blue-rgb: 255, 51, 68; --blue-glow: rgba(255, 51, 68, 0.18); --border: #34121a; --bg: #170305; --bg-rgb: 23, 3, 5; --bg2: #1c0509; --panel: #23070b; --panel-2: #2a0a0f; --icon-invert: 1; --icon-fill: #ffffff; --hero-image: url('/images/hero/hero-rebel.png'); /* Les accents violet/cyan/rose/magenta sont globaux (définis dans _base.css) et ne sont normalement JAMAIS retintés par thème — ils restaient donc bleu/rose même en thème REBELLE, ce qui détonnait avec la palette rouge. On les recale ici sur des teintes chaudes déjà présentes dans la palette (--gold, --orange) pour rester cohérent, sans avoir à toucher au HTML/JS qui les utilise. */ --purple: #e0632f; /* violet lavande → orange brûlé */ --purple-rgb: 224, 99, 47; --purple-dim: #a8471f; /* COLLISION CORRIGEE. --cyan valait #ffb627, c'est-a-dire trait pour trait --gold, dont --warning est un alias : un accent decoratif et un avertissement s'affichaient dans la meme couleur, impossible a distinguer. Meme principe de sortie que le sauge en neutre — on reste dans la famille chaude voulue pour rebelle, mais on s'ecarte nettement en valeur et en saturation : paille clair contre or vif. L'alerte garde le monopole du #ffb627. */ --cyan: #f0d089; /* paille clair — accent decoratif */ --cyan-deep: #c2a35e; /* paille assombri */ --pink: #ff9a6b; /* rose pastel → pêche/orange doux */ --magenta: #ff5533; /* magenta → rouge-orangé */ } /* ── Forme des cartes de l'index par thème — charte graphique §4.1 ── .parcours-step, .plat-card(-special/-lore), .tone-card : aucune n'est cliquable (confirmé), donc pas de hover sur ces 3 blocs. --accent (gradation tone-card / step-1/2/3) reste utilisable par le tech puisque c'est la seule variante qui garde le filet lumineux. */ [data-theme="tech"] .parcours-step::before, [data-theme="tech"] .plat-card::before, [data-theme="tech"] .plat-card-special::before, [data-theme="tech"] .plat-card-lore::before, [data-theme="tech"] .tone-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, var(--blue)), transparent); opacity: 0.6; } [data-theme="neutral"] .parcours-step, [data-theme="neutral"] .plat-card, [data-theme="neutral"] .tone-card { border-radius: 14px; background: linear-gradient(135deg, var(--panel), var(--panel-2)); box-shadow: 0 3px 8px rgba(0,0,0,0.08); } /* plat-card-special/lore ont un background !important hérité d'un ancien correctif plus haut dans ce fichier — !important nécessaire ici pour que le dégradé neutre gagne face à cette règle antérieure. */ [data-theme="neutral"] .plat-card-special, [data-theme="neutral"] .plat-card-lore { border-radius: 14px; background: linear-gradient(135deg, var(--panel), var(--panel-2)) !important; box-shadow: 0 3px 8px rgba(0,0,0,0.08); } [data-theme="rebel"] .parcours-step, [data-theme="rebel"] .plat-card, [data-theme="rebel"] .plat-card-special, [data-theme="rebel"] .plat-card-lore, [data-theme="rebel"] .tone-card { border: none !important; } /* Migré des coins viseur (motif abandonné, voir historique §4.1 de la charte) vers la bande de glitch horizontale, cohérent avec le reste des cartes du site (espace-resident.php). Conteneurs réels confirmés dans index.php : .platgroup-grid, .parcours-steps, .presentation-tones — nth-child dessus pour désynchroniser l'animation en grille. */ [data-theme="rebel"] .parcours-step::before, [data-theme="rebel"] .plat-card::before, [data-theme="rebel"] .plat-card-special::before, [data-theme="rebel"] .plat-card-lore::before, [data-theme="rebel"] .tone-card::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 2px; background: var(--accent, var(--blue)); opacity: 0; /* ESPACE : 5,4 s -> 14 s. Chaque carte n'etait visible que 0,54 s par cycle, mais les animation-delay ci-dessous repartissent les cartes en trois phases : il y en avait presque toujours une en train de balayer quelque part. C'est ce cumul qui donnait l'impression d'en avoir partout, pas la duree de chaque passage. Le trait passe aussi de 3 a 2 px. */ animation: cardGlitchSweep 14s infinite; } /* Decalages remis a l'echelle du nouveau cycle : ils valaient 24 % et 48 % des 5,4 s d'origine, ils gardent ces proportions sur 14 s. Les laisser a 1,3 s et 2,6 s aurait rapproche les trois phases au lieu de les etaler, et rendu le balayage plus groupe qu'avant. */ [data-theme="rebel"] .platgroup-grid > *:nth-child(2n)::before, [data-theme="rebel"] .parcours-steps > *:nth-child(2n)::before, [data-theme="rebel"] .presentation-tones > *:nth-child(2n)::before { animation-delay: 3.4s; } [data-theme="rebel"] .platgroup-grid > *:nth-child(3n)::before, [data-theme="rebel"] .parcours-steps > *:nth-child(3n)::before, [data-theme="rebel"] .presentation-tones > *:nth-child(3n)::before { animation-delay: 6.7s; } /* ATTENUE : opacite 0,85 -> 0,45. La duree ABSOLUE du passage est conservee (~0,43 s) : c'est elle qui donne la vitesse du trait. Sur un cycle passe de 5,4 a 14 s, la meme duree occupe une part plus petite, d'ou les pourcentages a la decimale. Les arrondir ralentirait le balayage au lieu de l'espacer. */ @keyframes cardGlitchSweep { 0% { top: -2px; opacity: 0; } 0.4% { opacity: 0.45; } 3.5% { top: 100%; opacity: 0.45; } 4.3% { opacity: 0; } 100% { top: 100%; opacity: 0; } } /* ── Typographie des titres par thème — charte graphique §3 ── Le corps de texte (Rajdhani, hérité de _base.css) ne change pas. Seuls les titres changent de police pour renforcer l'identité de chaque thème. Fichiers déposés : orbitron-v35-latin-*.woff2 et quicksand-v37-latin-*.woff2 (voir _base.css). */ /* text-transform RETIRÉ : Share Tech Mono forçait tous les titres en capitales, ce qui écrasait la casse choisie dans le HTML — « Code de Bonne Conduite » devenait « CODE DE BONNE CONDUITE ». Les titres gardent désormais leur casse d'origine sur les trois thèmes. L'interlettrage reste : cette police est étroite, il l'aère un peu. */ /* PORTEE ELARGIE — la regle ne visait que h1, h2 et h3. Elle laissait donc de cote : - h4 a h6. Les titres des cartes de l'accueil sont des

: aucune des trois polices de theme ne les atteignait. - les titres ecrits en div/span, tres nombreux dans le site : section-title (121 emplois), ib-title (48), page-title (42), modal-title (33), form-bloc-title (23), rule-title (18)... CE QUI EST VOLONTAIREMENT EXCLU : - [class*="-label"] — field-label, form-label, filter-label, cs-label... ce sont des etiquettes de formulaire et de la mecanique d'interface, pas des titres. Share Tech Mono sur 83 libelles de champ nuirait a la lisibilite plus qu'elle ne servirait la charte. - [class*="-name"] / [class*="-nom"] — iface-name, cercle-name, faction-name... Ce sont souvent des noms de personnages ou d'entites affiches dans du texte courant. A ajouter si tu les veux, mais c'est un choix editorial distinct. SPECIFICITE : [data-theme=] + attribut = 0,2,0, donc ces regles gagnent face aux font-family poses en simple classe dans les fichiers de page, quel que soit l'ordre de chargement. Seuls trois font-family !important existent dans tout le CSS (index-2.css et pulse.css) et resteront prioritaires — c'est negligeable et probablement voulu. Pour retirer un theme de ce traitement, supprimer son bloc : les trois sont independants. */ [data-theme="tech"] h1, [data-theme="tech"] h2, [data-theme="tech"] h3, [data-theme="tech"] h4, [data-theme="tech"] h5, [data-theme="tech"] h6, [data-theme="tech"] [class*="-title"], [data-theme="tech"] [class*="-titre"], [data-theme="tech"] [class*="-subtitle"], [data-theme="tech"] [class*="-heading"] { font-family: 'Share Tech Mono', monospace; letter-spacing: 0.03em; } [data-theme="neutral"] h1, [data-theme="neutral"] h2, [data-theme="neutral"] h3, [data-theme="neutral"] h4, [data-theme="neutral"] h5, [data-theme="neutral"] h6, [data-theme="neutral"] [class*="-title"], [data-theme="neutral"] [class*="-titre"], [data-theme="neutral"] [class*="-subtitle"], [data-theme="neutral"] [class*="-heading"] { font-family: 'Quicksand', sans-serif; font-weight: 700; } [data-theme="rebel"] h1, [data-theme="rebel"] h2, [data-theme="rebel"] h3, [data-theme="rebel"] h4, [data-theme="rebel"] h5, [data-theme="rebel"] h6, [data-theme="rebel"] [class*="-title"], [data-theme="rebel"] [class*="-titre"], [data-theme="rebel"] [class*="-subtitle"], [data-theme="rebel"] [class*="-heading"] { font-family: 'Orbitron', sans-serif; font-weight: 600; letter-spacing: 0.02em; } /* ── HERO : le texte visible n'est ni un titre ni une classe en -title ── Le seul h1 du hero est .hero-title-sr, reserve aux lecteurs d'ecran donc invisible : le vrai titre est l'image du logo. Tout ce qui se lit est .hero-badge (div) et .hero-tagline (p) — la regle ci-dessus ne pouvait pas les atteindre, d'ou un hero identique sur les trois themes. On les nomme donc explicitement. ⚠️ A REGARDER SUR TECH EN PRIORITE. .hero-tagline, c'est trois lignes de texte courant : Share Tech Mono est une monospace, elle y sera nettement plus lourde que sur un titre court. Si ca ne passe pas, retirer .hero-tagline des selecteurs et ne garder que .hero-badge — le badge est une etiquette courte, il encaisse les trois polices sans probleme. La punchline herite de la police du paragraphe, elle suit donc automatiquement. */ [data-theme="tech"] .hero-badge, [data-theme="tech"] .hero-tagline { font-family: 'Share Tech Mono', monospace; letter-spacing: 0.03em; } [data-theme="neutral"] .hero-badge, [data-theme="neutral"] .hero-tagline { font-family: 'Quicksand', sans-serif; } /* Tagline un peu plus grasse en NEUTRE seulement. Quicksand n'est deposee qu'en 400 et 700 (voir les @font-face de _base.css et le dossier /fonts) : il n'existe aucun cran intermediaire. Ecrire 500 ferait retomber le navigateur sur le fichier 400 — aucun changement visible ; 600 irait chercher le 700. Autant le declarer. Pour une graisse plus douce, deposer quicksand-v37-latin-500.woff2 dans /fonts et ajouter son @font-face a cote des deux autres. */ [data-theme="neutral"] .hero-tagline { /* !important INDISPENSABLE : index-2.css pose .hero-tagline { font-weight: 500 !important } — un simple selecteur de classe, mais un !important bat une regle sans !important quelle que soit la specificite. Sans lui, le 700 ne prenait pas. Et 500 etait le pire cas : Quicksand n'existant qu'en 400 et 700, le navigateur retombait sur le 400. La graisse etait donc identique a l'etat d'origine, d'ou l'absence totale de difference visible. */ /* 500 et non 700 : le 700 etait trop epais. Le cran intermediaire vient d'etre depose (voir les @font-face de _base.css et /fonts). Le 600 est disponible aussi, si 500 te parait trop discret : une seule valeur a changer ici. */ font-weight: 500 !important; } [data-theme="rebel"] .hero-badge, [data-theme="rebel"] .hero-tagline { font-family: 'Orbitron', sans-serif; letter-spacing: 0.02em; } /* ── CTA header (.nav-cta) — même souci que le hero : coupe diagonale partagée. Couleur déjà corrigée à la source (header.css, var(--bg) au lieu de #040810 codé en dur). Charte graphique §4.2 (mis à jour) : migré de la dissolution pixel vers le CTA cible, même traitement que .btn-primary ci-dessus — voir cette section pour le détail du piège "bordure pleine qui noie les coins viseur". */ .nav-cta-wrap { display: contents; } [data-theme="rebel"] .pixel-tail { display: none !important; } [data-theme="tech"] .nav-cta:hover { background: var(--purple); color: var(--bg); } [data-theme="neutral"] .nav-cta { clip-path: none; border-radius: 24px; } [data-theme="neutral"] .nav-cta:hover { background: var(--purple) !important; color: #fff !important; } [data-theme="rebel"] .nav-cta { clip-path: none; background: transparent; color: var(--blue); border-color: transparent; position: relative; animation: btnCtaFlicker 3.4s infinite; } [data-theme="rebel"] .nav-cta::before, [data-theme="rebel"] .nav-cta::after { content: ''; position: absolute; width: 10px; height: 10px; border: 2px solid currentColor; transition: width 0.2s, height 0.2s; } [data-theme="rebel"] .nav-cta::before { top: -2px; right: -2px; border-left: none; border-bottom: none; } [data-theme="rebel"] .nav-cta::after { bottom: -2px; left: -2px; border-right: none; border-top: none; } [data-theme="rebel"] .nav-cta:hover::before, [data-theme="rebel"] .nav-cta:hover::after { width: 16px; height: 16px; } [data-theme="rebel"] .nav-cta:hover { background: var(--purple) !important; color: var(--bg) !important; } /* ── Bouton Staff (.nav-cta-staff) — même souci de forme partagée. Couleur orange conservée sur les 3 thèmes (identité fonctionnelle "staff", pas un accent de thème à faire varier — cohérent avec le principe des couleurs d'identité fixe du §1). Seule la FORME change. */ [data-theme="neutral"] .nav-cta-staff { clip-path: none; border-radius: 24px; } [data-theme="rebel"] .nav-cta-staff { clip-path: none; } /* ── Bouton Déconnexion (.nav-btn-deconnexion) — oublié du passage initial sur .nav-cta-staff alors qu'il partage exactement la même base (clip-path diagonal tech hérité de la règle commune .nav-cta,.nav-cta-staff, .nav-btn-deconnexion dans header.css). Restait bloqué en forme tech sur les 3 thèmes. Couleur rouge conservée fixe (identité "danger", même principe que le staff orange ci-dessus) — seule la forme change. */ [data-theme="neutral"] .nav-btn-deconnexion { clip-path: none; border-radius: 24px; } [data-theme="rebel"] .nav-btn-deconnexion { clip-path: none; background: transparent; border-color: transparent; /* sinon la bordure pleine noie les coins viseur */ position: relative; animation: btnCtaFlicker 3.4s infinite; } [data-theme="rebel"] .nav-btn-deconnexion::before, [data-theme="rebel"] .nav-btn-deconnexion::after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid currentColor; transition: width 0.2s, height 0.2s; } [data-theme="rebel"] .nav-btn-deconnexion::before { top: -2px; right: -2px; border-left: none; border-bottom: none; } [data-theme="rebel"] .nav-btn-deconnexion::after { bottom: -2px; left: -2px; border-right: none; border-top: none; } [data-theme="rebel"] .nav-btn-deconnexion:hover::before, [data-theme="rebel"] .nav-btn-deconnexion:hover::after { width: 13px; height: 13px; } /* ── .card-new (espace-resident.php) — tuile "ajouter" cliquable ── Déjà en pointillé par défaut, ce qui convient bien à tech (précision) et rebelle (signal interrompu) sans rien changer. Neutre a juste besoin de l'arrondi pour rester cohérent avec son langage doux — les couleurs de catégorie (etab=orange, predef=violet) restent inchangées, ce sont des couleurs fonctionnelles, pas des accents de thème. */ [data-theme="neutral"] .card-new { border-radius: 14px; } [data-theme="neutral"] .card-new-icon { border-radius: 10px; } /* ── Portrait SERAPH par thème — charte graphique §5.3 ── 3 empilés dans .seraph-icon-wrap (voir seraph_icon() dans seraph-helpers.php), un seul affiché selon [data-theme=]. */ .seraph-icon-wrap { position: relative; } .seraph-icon-wrap img { display: none; position: absolute; top: 0; left: 0; } [data-theme="tech"] .seraph-icon-tech, [data-theme="neutral"] .seraph-icon-neutral, [data-theme="rebel"] .seraph-icon-rebel { display: inline-block !important; position: static !important; } /* ── Barre de navigation du téléphone (.pw-nav-btn) ── Pas de correctif nécessaire : le cadre reste sombre sur les 3 thèmes (voir #pw-body ci-dessus), donc les icônes blanches d'origine restent lisibles nativement, sans avoir à les recolorer une par une. */ /* ── Cadre du widget téléphone (#pw-body) — charte graphique §4.4 ── Seul le FOND du cadre suit le thème (dégradé actuellement bleu foncé codé en dur). Tout le reste (icônes d'apps, couleurs internes de chaque app comme Harmony/Pulse/Connect/Signal...) reste inchangé — chaque app garde sa propre identité de couleur, cf. §11. Neutre en gris foncé plutôt que clair : le contenu à l'intérieur (icônes, textes) est blanc par défaut et pas facilement recolorable (emojis probables, ignorent `color`) — plus simple de garder un fond sombre que de chasser chaque élément blanc un par un. */ /* Dégradé VIOLET et non gris. Le gris ardoise venait de --blue, qui vaut #4a5568 sur NEUTRE : le téléphone et la chatbox y ressortaient ternes, sans identité, alors que le violet #9d5ce8 est l'accent secondaire du thème. On garde un fond sombre — le contenu des apps est clair et pas recolorable — mais teinté violet plutôt que neutre. */ [data-theme="neutral"] #pw-body { background: linear-gradient(160deg, #3b3150 0%, #262034 100%); border-color: rgba(var(--purple-rgb), .34); } /* L'ONGLET du téléphone replié — c'est lui qu'on voit en permanence, bien plus que le cadre déplié. Il est peint en linear-gradient(--blue, --blue-dim), soit du gris ardoise sur NEUTRE. C'était ça, « le téléphone en gris ». Le halo et la pastille de notification suivent. */ /* Le bouton de la chatbox est peint exactement comme l'onglet du téléphone : linear-gradient(--blue, --blue-dim), en dur, sans passer par --c-accent. Le retinter avec la variable ne suffisait donc pas. */ [data-theme="neutral"] #chat-main-btn { background: linear-gradient(135deg, var(--purple), var(--purple-dim)); } [data-theme="neutral"] #pw-bubble { background: linear-gradient(135deg, var(--purple), var(--purple-dim)); box-shadow: 0 -2px 18px rgba(var(--purple-rgb), .38); } [data-theme="neutral"] #pw-bubble:hover { box-shadow: 0 -2px 24px rgba(var(--purple-rgb), .5); } /* La chatbox tire son accent de --blue (voir chat.css) : sur NEUTRE on la bascule sur --purple, pour qu'elle s'accorde au téléphone. */ [data-theme="neutral"] #chat-widget { --c-accent: var(--purple); --c-accent-rgb: var(--purple-rgb); --c-mine: linear-gradient(135deg, var(--purple-dim), var(--purple)); /* Le FOND aussi, et c'est lui qu'on voit le plus : --c-bg (#1c1e2e) et --c-surface (#252840) sont figés en gris-bleu sur les trois thèmes. Changer le seul accent ne touchait que le bouton et les bulles ; l'ensemble restait gris. On les teinte violet, en gardant la même obscurité pour que le texte clair reste lisible. */ --c-bg: #211c2e; --c-surface: #2c2440; --c-theirs: #2c2440; } [data-theme="rebel"] #pw-body { background: linear-gradient(160deg, var(--panel-2) 0%, var(--bg) 100%); } /* ── Sélecteur de thème du header — ne montre que les 2 thèmes NON actifs ── Cliquer sur la pastille du thème actif ouvre 2 bulles flottantes (pas 3) : inutile de se proposer de re-sélectionner le thème déjà actif. */ [data-theme="tech"] .submenu-theme .theme-btn[data-theme-choice="tech"], [data-theme="neutral"] .submenu-theme .theme-btn[data-theme-choice="neutral"], [data-theme="rebel"] .submenu-theme .theme-btn[data-theme-choice="rebel"] { display: none; } [data-theme="neutral"] .submenu-theme .theme-btn { border: none; } /* ── Écran verrouillé du téléphone (#pw-lock) ── Couleur de repli (utilisée quand pas de fond d'écran custom) codée en dur en bleu (#060c1a) à l'origine — ne correspondait plus au nouveau fond du cadre (#pw-body) sur neutre/rebelle. Alignée ici. */ [data-theme="neutral"] #pw-lock { background-color: #262034; /* accordé au violet de #pw-body */ } [data-theme="rebel"] #pw-lock { background-color: var(--bg); } /* ── Badges internes (.pw-cd-badge, .pw-badge) et panneaux (.pw-ov, .pw-wp-box) du widget téléphone — même défaut que #pw-lock ci-dessus : couleur de repli codée en dur (#080d1a/#0d1228, valeurs tech), jamais ajustée pour neutre/rebelle. Peu visible en pratique (élément sombre sur fond déjà sombre dans les 3 cas), mais réel — repéré pendant l'audit de #pw-bubble, charte graphique §4.5. */ [data-theme="neutral"] .pw-cd-badge, [data-theme="neutral"] .pw-badge { border-color: #262034; /* accordé au violet de #pw-body */ } [data-theme="neutral"] .pw-ov, [data-theme="neutral"] .pw-wp-box { background: linear-gradient(160deg, #3b3150, #262034); /* violet */ } [data-theme="rebel"] .pw-cd-badge, [data-theme="rebel"] .pw-badge { border-color: var(--bg); } [data-theme="rebel"] .pw-ov, [data-theme="rebel"] .pw-wp-box { background: linear-gradient(160deg, var(--panel-2), var(--bg)); } /* ── Champs texte connexion.php — charte graphique §8 ── Fond blanc fixe sur les 3 thèmes à l'origine (texte sombre dessus). Neutre n'a rien à changer (le blanc lui va déjà). Tech/rebelle passent au fond du thème avec texte clair, cohérent avec le reste des formulaires de la charte. */ [data-theme="tech"] input[type="text"], [data-theme="tech"] input[type="email"], [data-theme="tech"] input[type="password"], [data-theme="rebel"] input[type="text"], [data-theme="rebel"] input[type="email"], [data-theme="rebel"] input[type="password"] { background: var(--panel); color: var(--text); } [data-theme="tech"] input[type="text"]:-webkit-autofill, [data-theme="tech"] input[type="email"]:-webkit-autofill, [data-theme="tech"] input[type="password"]:-webkit-autofill, [data-theme="rebel"] input[type="text"]:-webkit-autofill, [data-theme="rebel"] input[type="email"]:-webkit-autofill, [data-theme="rebel"] input[type="password"]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important; -webkit-text-fill-color: var(--text) !important; } /* ── Page connexion.php ── Les onglets et la carte d'auth passaient en angles droits sur tech/rebelle. Arrondi rétabli sur les 3 chartes (demande utilisatrice) : l'identité de chaque thème passe par les couleurs et les accents, pas par la suppression des arrondis. */ /* Chaque onglet n'arrondit que son coin EXTERIEUR : avec 10px 10px 0 0 les deux onglets arrondissaient leurs coins interieurs, ce qui creait un ecart visible entre eux (bug signale sur tech/rebelle uniquement). */ [data-theme="tech"] .tab:first-child, [data-theme="rebel"] .tab:first-child { border-radius: 10px 0 0 0; } [data-theme="tech"] .tab:last-child, [data-theme="rebel"] .tab:last-child { border-radius: 0 10px 0 0; } /* Coins SUPERIEURS de la carte non arrondis : ils depassaient sous l'onglet actif et formaient un decrochement. */ [data-theme="tech"] .auth-card, [data-theme="rebel"] .auth-card { border-radius: 0 0 12px 12px; } [data-theme="rebel"] .tab { border-style: dashed; /* rendu : le pointillé irrégulier ne concerne que les boutons secondaires. */ } [data-theme="rebel"] .tab.active { border-style: solid; } [data-theme="neutral"] .btn-submit { clip-path: none; border-radius: 24px; } [data-theme="neutral"] .btn-submit:hover { background: var(--purple) !important; } [data-theme="rebel"] .btn-submit { clip-path: none; background: transparent; color: var(--blue); border: 2px solid transparent; position: relative; animation: btnCtaFlicker 3.4s infinite; } [data-theme="rebel"] .btn-submit::before, [data-theme="rebel"] .btn-submit::after { content: ''; position: absolute; width: 10px; height: 10px; border: 2px solid currentColor; transition: width 0.2s, height 0.2s; } [data-theme="rebel"] .btn-submit::before { top: -2px; right: -2px; border-left: none; border-bottom: none; } [data-theme="rebel"] .btn-submit::after { bottom: -2px; left: -2px; border-right: none; border-top: none; } [data-theme="rebel"] .btn-submit:hover::before, [data-theme="rebel"] .btn-submit:hover::after { width: 16px; height: 16px; } [data-theme="rebel"] .btn-submit:hover { background: var(--purple) !important; border-color: var(--purple) !important; color: var(--bg) !important; } [data-theme="neutral"] .btn-submit-secondary:hover { border-color: var(--purple) !important; color: var(--purple) !important; background: rgba(var(--purple-rgb), 0.12) !important; } [data-theme="rebel"] .btn-submit-secondary { /* border-style: dashed retiré — remplacé par le pointillé irrégulier en border-image, déclaré plus haut. */ } [data-theme="rebel"] .btn-submit-secondary:hover { border-color: var(--purple) !important; color: var(--purple) !important; } /* ── Reste de l'audit §11 (liste des 9 cartes à CSS dédié) ── La plupart matchent déjà "-card"/"-bloc"/"-box" et sont donc couvertes par l'override global ci-dessus. Seul .ludo-preview-jeu ne matche aucun de ces motifs et a besoin d'un override explicite. */ /* Arrondi rétabli sur les 3 chartes (demande utilisatrice) — voir note plus haut. */ [data-theme="tech"] .ludo-preview-jeu, [data-theme="rebel"] .ludo-preview-jeu { border-radius: 10px; } /* ── Bordure gauche/haut colorée générique — anti-pattern banni au §4.1 ── Trouvés pendant l'audit : accent magenta/violet en bordure sur ces 3 composants, jamais pensés par thème. Tech/neutre gardent le filet existant (déjà cohérent avec leur langage). Rebelle : bordure retirée (elle ne s'accorde pas avec le "pas de bordure continue" déjà établi pour les cartes rebelle) — accent de couleur simplement retiré plutôt que remplacé par des coins HUD ici, ces composants étant plus étroits qu'une carte classique. .post-card-accent (var(--role-color)) volontairement exclu : cette couleur code le rôle de l'auteur du post (staff/modérateur/membre), pas un accent de thème — même logique que le bouton Staff, à garder fixe sur les 3 thèmes (voir exception §1). */ [data-theme="rebel"] .secret-block { border-left: none !important; } [data-theme="rebel"] .rel-card { border-top: none !important; } [data-theme="rebel"] .ma-rel-card { border-left: none !important; } [data-theme="rebel"] .seraph-msg { border-left: none !important; } /* Focus clavier rebelle — pointillé, cohérent avec le bouton secondaire */ [data-theme="rebel"] a:focus-visible, [data-theme="rebel"] button:focus-visible, [data-theme="rebel"] input:focus-visible, [data-theme="rebel"] [tabindex]:focus-visible { outline-style: dashed; } /* ── Boîte de recherche globale — charte graphique §8 ── L'input reste sans bordure propre (le cadre visuel vient du conteneur .recherche-box) — on touche juste le conteneur. */ [data-theme="neutral"] .recherche-box { border-radius: 14px; overflow: hidden; } [data-theme="rebel"] .recherche-box { border-style: dashed; /* rendu : le pointillé irrégulier ne concerne que les boutons secondaires. */ } /* ── FAQ (accordéon groupé) ── Les angles droits imposés à tech/rebelle ont été retirés : l'arrondi de base (index-2.css) s'applique désormais aux 3 chartes (demande utilisatrice). Rebelle garde son accent propre : bordure en pointillés. */ [data-theme="rebel"] .faq-item { /* Les tirets RÉGULIERS du navigateur ont été retirés : la charte REBELLE les écarte, et le pointillé irrégulier a été essayé ici puis abandonné (un cadre d'accordéon n'est pas une ligne de séparation — le motif est appliqué aux vrais séparateurs, plus bas dans ce fichier). Il reste donc les deux côtés du cadre, en trait uni discret. Les traits HORIZONTAUX sont neutralisés par transparence plutôt que par une mise à zéro de leur épaisseur : la place reste réservée, donc la hauteur des items et l'alignement du groupe ne bougent pas d'un pixel. Les border-radius de index-2.css sont intacts — aucune bordure n'est remplacée par une border-image, qui les aurait annulés. */ border-style: solid !important; border-top-color: transparent !important; border-bottom-color: transparent !important; border-left-color: var(--border) !important; border-right-color: var(--border) !important; } /* ══════════════════════════════════════════════════════════════════════ LIGNES DE SÉPARATION — REBELLE Le motif irrégulier décrit par la charte trouve ici son emploi naturel : les traits qui séparent, pas les cadres qui entourent. Ces six surfaces dessinent toutes un trait de 1 px avec un simple `background`. Il n'y a donc qu'une couleur de fond à remplacer par le motif — ni border-image (qui annulerait les border-radius), ni pseudo-élément à créer. C'est ce qui rend ces cas fiables là où l'accordéon ne l'était pas. --rebel-dash centralise le motif pour ces règles : une seule valeur à changer si tu retouches le rythme du pointillé. ⚠️ Les boutons secondaires gardent leur propre copie du dégradé, écrite en border-image plus haut dans ce fichier (une bordure ne peut pas utiliser un background). Modifier l'un sans l'autre les fera diverger. Les arrêts sont identiques à ceux des boutons : quatre longueurs de tiret et quatre espacements sur 58 px. ══════════════════════════════════════════════════════════════════════ */ [data-theme="rebel"] { --rebel-dash: repeating-linear-gradient(90deg, var(--red) 0 9px, transparent 9px 13px, var(--red) 13px 17px, transparent 17px 27px, var(--red) 27px 38px, transparent 38px 42px, var(--red) 42px 46px, transparent 46px 58px); } /* Libellés de section du forum : « ─── TITRE ────────── ». Le trait part du texte et file jusqu'au bord. */ [data-theme="rebel"] .sep::after, [data-theme="rebel"] .terminal-sep::after { background: var(--rebel-dash); } /* Séparateur entre le corps d'un post et son pied. L'opacité de 0.5 est annulée : le motif est déjà ajouré, l'atténuer en plus le ferait disparaître. */ [data-theme="rebel"] .post-divider { background: var(--rebel-dash); opacity: 1; } /* Les deux traits qui encadrent un intertitre (« Pas encore membre ? »). Ils étaient en dégradé fondu aux extrémités ; le motif remplace le fondu, la coupure nette convient mieux au registre rebelle. */ [data-theme="rebel"] .form-divider::before, [data-theme="rebel"] .form-divider::after { background: var(--rebel-dash); } /*
— autorisé par l'éditeur RP dans le corps des messages, et jamais stylé jusqu'ici : les joueurs héritaient du trait gris du navigateur. */ [data-theme="rebel"] hr { height: 1px; border: none; background: var(--rebel-dash); } /* ── Override de la règle "BORDER-RADIUS GLOBAL" ── Cette règle (définie canoniquement dans shared.css, mais copiée-collée telle quelle dans ~40 autres fichiers CSS du site) arrondit AUTOMATIQUEMENT tout input/select/textarea, tout bouton, toute classe contenant "-card"/ "-bloc"/"-panel"/"-box", et toute classe contenant "-tag"/"-badge"/"-chip"/ "-pill" — sans AUCUNE distinction de thème. C'est la cause la plus probable de "l'arrondi partout" observé sur tech et rebelle : elle est dupliquée dans tellement de fichiers qu'il est plus sûr et plus durable de la neutraliser une seule fois ici (spécificité [data-theme=] plus forte qu'un simple attribut, donc gagne face à TOUTES les copies, peu importe dans quel fichier elles se trouvent) plutôt que d'aller éditer 40 fichiers. Neutre n'a pas besoin d'override : l'arrondi d'origine lui va très bien. ARRONDI RETABLI sur les 3 chartes (demande utilisatrice) : tech et rebelle passaient en angles droits stricts, ce qui tranchait trop. L'identite de chaque theme passe desormais par les couleurs et les accents (pointilles en rebelle, etc.), pas par la suppression des arrondis. Les tags/badges/pills restent arrondis partout — un arrondi à 6px sur un petit badge n'a pas la même charge visuelle qu'un arrondi 10px sur une carte entière, et ce n'est pas un point que la charte a soulevé comme problématique. */ [data-theme="tech"] input[type="text"], [data-theme="tech"] input[type="email"], [data-theme="tech"] input[type="password"], [data-theme="tech"] input[type="search"], [data-theme="tech"] input[type="number"], [data-theme="tech"] input[type="url"], [data-theme="tech"] input[type="tel"], [data-theme="tech"] input[type="date"], [data-theme="tech"] input[type="time"], [data-theme="tech"] input[type="datetime-local"], [data-theme="tech"] select, [data-theme="tech"] textarea, [data-theme="tech"] button:not([class*="round"]):not([class*="circle"]):not(.btn-eye), [data-theme="tech"] .btn, [data-theme="tech"] .button, [data-theme="tech"] [class*="btn-"], [data-theme="tech"] [class*="-btn"], [data-theme="tech"] [class*="-card"]:not([class*="card-img"]):not([class*="card-photo"]), [data-theme="tech"] [class*="-bloc"]:not([class*="bloc-img"]), [data-theme="tech"] [class*="-panel"]:not([class*="panel-img"]), [data-theme="tech"] [class*="-box"]:not([class*="box-img"]), [data-theme="rebel"] input[type="text"], [data-theme="rebel"] input[type="email"], [data-theme="rebel"] input[type="password"], [data-theme="rebel"] input[type="search"], [data-theme="rebel"] input[type="number"], [data-theme="rebel"] input[type="url"], [data-theme="rebel"] input[type="tel"], [data-theme="rebel"] input[type="date"], [data-theme="rebel"] input[type="time"], [data-theme="rebel"] input[type="datetime-local"], [data-theme="rebel"] select, [data-theme="rebel"] textarea, [data-theme="rebel"] button:not([class*="round"]):not([class*="circle"]):not(.btn-eye), [data-theme="rebel"] .btn, [data-theme="rebel"] .button, [data-theme="rebel"] [class*="btn-"], [data-theme="rebel"] [class*="-btn"], [data-theme="rebel"] [class*="-card"]:not([class*="card-img"]):not([class*="card-photo"]), [data-theme="rebel"] [class*="-bloc"]:not([class*="bloc-img"]), [data-theme="rebel"] [class*="-panel"]:not([class*="panel-img"]), [data-theme="rebel"] [class*="-box"]:not([class*="box-img"]) { border-radius: 10px; } /* Champs et boutons : arrondi un peu plus marque, coherent avec le neutre. */ [data-theme="tech"] input, [data-theme="tech"] select, [data-theme="tech"] textarea, [data-theme="tech"] button:not([class*="round"]):not([class*="circle"]):not(.btn-eye), [data-theme="tech"] .btn, [data-theme="tech"] .button, [data-theme="tech"] [class*="btn-"], [data-theme="tech"] [class*="-btn"], [data-theme="rebel"] input, [data-theme="rebel"] select, [data-theme="rebel"] textarea, [data-theme="rebel"] button:not([class*="round"]):not([class*="circle"]):not(.btn-eye), [data-theme="rebel"] .btn, [data-theme="rebel"] .button, [data-theme="rebel"] [class*="btn-"], [data-theme="rebel"] [class*="-btn"] { border-radius: 8px; } /* ── Sélecteur de thème (footer, desktop + mobile) ── */ .theme-switch { display: flex; align-items: center; gap: 0.4rem; } .theme-btn { background: none; border: 1px solid rgba(255, 255, 255, 0.18); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; } .theme-btn:hover { transform: scale(1.12); border-color: rgba(255, 255, 255, 0.4); } .theme-btn[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 6px 1px rgba(var(--blue-rgb), 0.6); } .theme-dot { width: 9px; height: 9px; border-radius: 50%; display: block; pointer-events: none; } .theme-dot-tech { background: #0af; } .theme-dot-neutral { background: #c9d2dc; } .theme-dot-rebel { background: #ff3344; } /* BUG CORRIGÉ — gris/blanc sur clair, quasi invisible : les bordures ci-dessus sont en rgba(255,255,255,...) — pensées pour un fond sombre (tech/rebel). Sur fond clair (thème neutre), une bordure blanche à 18-40% d'opacité se fond quasiment dans le fond. On repasse en bordure foncée pour ce thème précis. */ [data-theme="neutral"] .theme-btn { border-color: rgba(20, 22, 26, 0.25); } [data-theme="neutral"] .theme-btn:hover { border-color: rgba(20, 22, 26, 0.55); } [data-theme="neutral"] .theme-btn[aria-pressed="true"] { border-color: #14161a; } /* BUG CORRIGÉ — chiffres du footer sans couleur perceptible en thème NEUTRE : --blue y vaut un gris ardoise foncé (#4a5568), volontairement proche de --text pour rester lisible en texte de bouton — mais du coup les chiffres du footer (qui utilisent var(--blue) via .counter-value / .status-value) se fondaient dans le texte normal, sans ressortir comme un "chiffre mis en avant". On leur donne un accent dédié, pour que le thème NEUTRE ait sa propre couleur signature (violet), différente du bleu tech et du rouge rebel. Note : --pink de la palette (#fcbcfd) est un rose pastel pensé pour fond sombre — beaucoup trop clair pour rester lisible sur un fond clair comme celui-ci, d'où une valeur dédiée, plus saturée. Le 3e sélecteur (.status-population .counter-value) est nécessaire car footer.css définit CE MÊME sélecteur à 2 classes — exactement la même spécificité que [data-theme="neutral"] .counter-value — et gagnait le conflit car footer.css se charge après themes.css sur la page. */ [data-theme="neutral"] .counter-value, [data-theme="neutral"] .status-value, [data-theme="neutral"] .status-population .counter-value { color: #9d5ce8; } /* BUG CORRIGÉ — gris sur gris dans les onglets .plat-tabs (bandeau "POUR BIEN ARRIVER / POUR QUE ÇA SOIT PRATIQUE / ..." sur la home, défini dans index-3.css) : - le fond du bandeau est un gris fixe (rgba(0,0,0,0.2)), indépendant du thème → sur une page déjà claire, ça donne un bloc gris terne - le texte des onglets utilise var(--text-dim), qui en thème NEUTRE est LUI AUSSI un gris moyen → les deux se confondent On repasse sur un fond clair façon "panel" (cohérent avec le reste du thème NEUTRE) et on reprend le violet adopté comme accent signature du thème pour l'onglet actif, au lieu du bleu/gris quasi invisible. */ [data-theme="neutral"] .plat-tabs { background: var(--panel); border-color: var(--border); } [data-theme="neutral"] .plat-tab:hover { color: var(--text); background: rgba(157, 92, 232, 0.06); } [data-theme="neutral"] .plat-tab[aria-selected="true"] { background: rgba(157, 92, 232, 0.12); color: #7c3aed; /* etait #9d5ce8 : 3,5:1 sur ce fond teinte → 4,9:1. Meme violet que --blue ici. */ box-shadow: 0 0 12px rgba(157, 92, 232, 0.15); } /* ══════════════════════════════════════════════════════════════════════ CONTRASTE DU THEME CLAIR — mesure en navigateur le 14 sept. 2026 Textes passes sous le seuil de lisibilite (4,5:1) parce que leur couleur est calibree pour fond sombre. Chaque regle garde la teinte d'origine, seulement assombrie. Pour annuler : supprimer ce bloc, rien d'autre. ══════════════════════════════════════════════════════════════════════ */ /* « Un mot de la fondatrice » (lore, new-heaven, essentiel) : --purple 3,2-3,5:1. :not(:hover) laisse le survol d'origine (texte encre sur fond violet) intact. */ [data-theme="neutral"] .fondatrice-note-label, [data-theme="neutral"] .fondatrice-note summary:not(:hover), [data-theme="neutral"] .fondatrice-note-close button:not(:hover) { color: var(--purple-dim); } /* Accueil : libelle « Rejoindre » (3,8:1) et statuts du parcours, dont l'opacite .85 faisait tomber « Acces limite » a 3,2:1. */ [data-theme="neutral"] .cta-section .section-label { color: var(--purple-dim); } [data-theme="neutral"] .parcours-step-status { opacity: 1; } [data-theme="neutral"] .step-1 .parcours-step-status { color: var(--text-dim); } /* L'essentiel : noms des organisations et numeros d'acte. Acier #c8c8cc (1,5:1) et rose #ff85a2 (2,1:1) sont illisibles sur fond clair. */ [data-theme="neutral"] .spe-item.fils .spe-item-name, [data-theme="neutral"] .entity-row.orga-fils .entity-row-name { color: #596170; } [data-theme="neutral"] .spe-item.scalpels .spe-item-name, [data-theme="neutral"] .entity-row.orga-scalpels .entity-row-name { color: #b8325a; } [data-theme="neutral"] .spe-item.phantom .spe-item-name, [data-theme="neutral"] .entity-row.orga-phantom .entity-row-name, [data-theme="neutral"] .acte-card.acte-6 .acte-num { color: var(--purple-dim); } [data-theme="neutral"] .acte-card.acte-1 .acte-num { color: #5a6b80; border-color: #5a6b80; } /* Couleur de pseudo choisie par les membres (comptes.couleur_pseudo). Choisie sur fond sombre, elle peut etre illisible sur fond clair (#c69f9f : 2,1:1). Theme clair SEULEMENT : on plafonne sa clarte (L* de CIELAB, directement liee au contraste) en gardant sa teinte. Une couleur deja assez foncee ne change pas. Les pages ecrivent style="color:X;--pseudo-c:X" : les themes sombres gardent X tel quel. Teste le 14 sept. 2026 sur 229 couleurs : au moins 4,6:1 sur cartes, page et bulles. L* 45 laissait le magenta pur a 4,06:1, d'ou 40. Navigateur trop ancien pour cette syntaxe : @supports ignore la regle (couleur d'origine). */ @supports (color: lab(from red min(l, 40) a b)) { [data-theme="neutral"] [style*="--pseudo-c"], .swatch-neutral [style*="--pseudo-c"] { /* apercu « Neutre » des reglages du compte, quel que soit le theme actif */ color: lab(from var(--pseudo-c) min(l, 40) a b) !important; } } /* Transition douce quand on bascule de thème, sans s'appliquer à tout (coûteux) : ciblée sur les éléments les plus visibles. */ header, .status-bar, .nav-cta, .theme-dot { transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } /* SERAPH : le halo derrière le robot est bleu par défaut (cohérent avec ses LED), mais en thème NEUTRE on préfère un halo clair et doux plutôt qu'une couleur vive — pour adoucir la transition entre son visage sombre et un fond de page clair, plutôt que de le laisser flotter cru sur du blanc. Effet à valider visuellement, pas une science exacte. */ [data-theme="neutral"] #seraph-widget::before { background: radial-gradient( circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.55) 40%, transparent 72% ); } /* Rayures ("scanlines") : opacité très réduite en thème NEUTRE — la valeur par défaut (10%, dans _base.css) est calibrée pour un fond sombre et devient beaucoup trop dure/fatigante sur un fond clair. On garde l'effet (texture voulue sur le site) à dose homéopathique. Passe par --scanline-rgba plutôt qu'un override direct de body::before, pour que la même valeur s'applique automatiquement partout où la variable est réutilisée (ex: calque photo dashboard). */ /* ════════════════════════════════════════════════════════════════════ THÈME NEUTRE — boutons oubliés lors du passage en pilule ──────────────────────────────────────────────────────────────────── .btn-primary/.btn-secondary/.btn-submit/.nav-cta(-staff)/ .nav-btn-deconnexion avaient bien été traités, mais 17 autres boutons du site gardaient la coupe diagonale (clip-path) en thème neutre — d'où des boutons "inclinés" au milieu d'une charte tout en rondeur. On les aligne ici sur la même identité : pilule, pas de coupe. (.jrn-page.etat-dechire est volontairement exclu : sa découpe simule une page déchirée, c'est un effet voulu, pas un habillage de bouton.) ════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] .btn-add-lieu, [data-theme="neutral"] .btn-chat, [data-theme="neutral"] .btn-chat-card, [data-theme="neutral"] .btn-envoyer, [data-theme="neutral"] .btn-fiche, [data-theme="neutral"] .btn-modal, [data-theme="neutral"] .btn-nouveau, [data-theme="neutral"] .btn-profil, [data-theme="neutral"] .btn-save, [data-theme="neutral"] .ca-btn, [data-theme="neutral"] .ca-mini, [data-theme="neutral"] .confirm-btn, [data-theme="neutral"] .construction-back, [data-theme="neutral"] .lo-btn-write, [data-theme="neutral"] .modal-cancel, [data-theme="neutral"] .modal-confirm, [data-theme="neutral"] .pb-btn { clip-path: none !important; border-radius: 24px; } /* ── Page connexion : priorite sur la regle generique [class*="-card"] ── Cette derniere arrive plus loin dans le fichier et reappliquait un arrondi sur les 4 coins de .auth-card, annulant la correction du raccord avec les onglets. */ [data-theme="tech"] .auth-card, [data-theme="neutral"] .auth-card, [data-theme="rebel"] .auth-card { border-radius: 0 0 12px 12px !important; /* bat la regle generique [class*="-card"] */ } /* Onglets : coin exterieur seul, sinon un ecart apparait entre les deux. */ [data-theme="tech"] .tab:first-child, [data-theme="neutral"] .tab:first-child, [data-theme="rebel"] .tab:first-child { border-radius: 10px 0 0 0 !important; } [data-theme="tech"] .tab:last-child, [data-theme="neutral"] .tab:last-child, [data-theme="rebel"] .tab:last-child { border-radius: 0 10px 0 0 !important; } /* ══════════════════════════════════════════════════════════════════════ BOUTONS DU HERO — ANGLES CARRÉS ET LISIBILITÉ SUR PHOTO (REBELLE) Variante retenue en comparaison : remplissage au repos, vidage au survol (déjà en place plus haut), angles carrés. POURQUOI CES RÈGLES SONT ICI, EN FIN DE FICHIER : le bloc « Override BORDER-RADIUS GLOBAL » ci-dessus impose border-radius:10px à tout [class*="btn-"]. Il a exactement la même spécificité que les règles ci-dessous (attribut + classe) : à égalité, c'est le DERNIER écrit qui gagne. Les déplacer plus haut dans le fichier les rendrait inopérantes. Le carré ne vise QUE ces deux boutons. L'override continue d'arrondir les cartes, panneaux et boîtes — le commentaire qui l'accompagne rappelle que les angles droits stricts partout avaient été jugés trop tranchants. Pour étendre le carré à tous les boutons rebelles, remplacer les deux sélecteurs par [data-theme="rebel"] [class*="btn-"]. .btn-secondary suit .btn-primary : ils sont côte à côte dans le hero, un carré à côté d'un arrondi se verrait immédiatement. ══════════════════════════════════════════════════════════════════════ */ [data-theme="rebel"] .btn-primary, [data-theme="rebel"] .btn-secondary { border-radius: 0; } /* ── Les deux effets qui empêchaient le bouton de ressortir ── Ils expliquent l'écart entre la page de comparaison et la landing page : la comparaison ne les portait pas. 1. LA LUEUR ROUGE. index-2.css pose box-shadow: 0 0 20px rgba(--blue-rgb, .3) sur .btn-primary. Sur un aplat sombre elle détache le bouton ; sur la photo du hero, faite de rouges et de bruns dans les mêmes valeurs, elle n'ajoute que du halo autour des bords. Remplacée par une ombre portée neutre, qui décolle le bouton du fond au lieu de le teinter. Rien à voir avec l'ombre sous le TEXTE essayée précédemment : celle-ci est derrière le bouton entier, pas autour de chaque lettre. 2. LE CLIGNOTEMENT. btnCtaFlicker descend jusqu'à 0,55 puis 0,7 : sur une photo, le bouton disparaît par moments. Les creux sont remontés à 0,86 et 0,93 — l'intermittence reste lisible comme un signal instable, mais ne mange plus le bouton. Pour revenir au clignotement d'origine, il suffit de supprimer la ligne animation ci-dessous. ── */ [data-theme="rebel"] .btn-primary { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); animation: btnCtaFlickerDoux 3.4s infinite; } @keyframes btnCtaFlickerDoux { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 44% { opacity: .86; } 46% { opacity: 1; } 88% { opacity: 1; } 90% { opacity: .93; } 92% { opacity: 1; } } /* ══════════════════════════════════════════════════════════════════════ PROFONDEUR INDIGO — PRO-TECH _base.css pose une couche de fond sur body::after : deux halos tres discrets (--blue a 2,5 %, --purple a 2 %) sur un degrade --bg -> --bg2. On la reprend a l'identique pour tech en y glissant un troisieme halo, indigo, plus present que les deux autres. POURQUOI CETTE SURFACE ET PAS UN COMPOSANT : body::after est derriere tout le contenu (z-index -2) et ne porte aucune information. L'indigo y apporte du volume sans devenir un signal a decoder — c'est exactement le role qu'on lui assigne. Aucun composant n'est repeint. Les trois autres couches sont recopiees telles quelles : `background` est une propriete raccourcie, en redeclarer une partie efface le reste. Si tu modifies la couche de _base.css, reporte le changement ici. ══════════════════════════════════════════════════════════════════════ */ [data-theme="tech"] body::after { background: radial-gradient(ellipse 60% 50% at 50% 20%, rgba(var(--blue-rgb), 0.025) 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 12% 78%, rgba(var(--indigo-rgb), 0.20) 0%, transparent 72%), radial-gradient(ellipse 45% 40% at 88% 12%, rgba(var(--indigo-rgb), 0.13) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(var(--purple-rgb), 0.02) 0%, transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } /* ══════════════════════════════════════════════════════════════════════ ETAPES DU PARCOURS (01 / 02 / 03) — ACCENTS PAR THEME index-3.css assigne une seule fois : step-1 = --cyan-deep, step-2 = --blue, step-3 = --purple. En tech ca donne cyan / bleu / rose, une vraie progression. Dans les deux autres chartes, non : NEUTRE — depuis que --blue est violet, step-2 et step-3 sont deux violets voisins et se confondent. Pire, --purple (#9d5ce8) tombe a 4,09:1 sur blanc, sous le seuil de 4,5:1 : l'etape 3 etait aussi la moins lisible des trois. REBELLE — --cyan-deep (#c2a35e) donne un olive terne sur le fond sombre, alors que --cyan (#f0d089) y est franchement lumineux. On ne touche pas a la regle d'origine : on surcharge par theme. Tech n'apparait pas ici, sa progression est deja juste. !important necessaire : index-3.css pose deja --accent en !important sur .step-1/2/3. Un !important ne cede qu'a un autre !important, et c'est alors la specificite qui tranche — [data-theme=] + classe l'emporte. ══════════════════════════════════════════════════════════════════════ */ /* REBELLE : le paille clair au lieu du paille assombri. */ [data-theme="rebel"] .step-1 { --accent: var(--cyan) !important; } /* NEUTRE : ardoise -> violet -> sauge. Le fuchsia essaye precedemment est retire : il n'appartenait a aucune des trois palettes, il ne faisait que combler un trou. L'etape 3 prend --sage-dim et non --sage : #6f9080 tombe a 3,51:1 sur une carte blanche, sous le seuil de 4,5:1. --sage-dim (#4f6b5d) monte a 5,84:1. C'est precisement le role de cette variable — le sauge clair pour les surfaces, le sauge sombre des qu'il s'agit de texte ou de filet. Les trois valeurs : 4,62 / 5,70 / 5,84. ⚠️ SEULE ENTORSE A LA REGLE DU SAUGE, assumee : il se retrouve ici sur une pastille, ce que la regle ecarte pour eviter la confusion avec le vert « valide ». Deux choses la rendent tenable — --sage-dim est un vert sourd et sombre, tres loin du menthe vif #4adb95, et ces pastilles marquent une progression d'acces, pas un etat de validation. Si un doute apparait a l'usage, la parade est de deplacer le sauge sur l'etape 2 : « acces complet » en vert est ce qui prete le plus a confusion. */ [data-theme="neutral"] .step-1 { --accent: #6b7684 !important; } [data-theme="neutral"] .step-3 { --accent: var(--sage-dim) !important; } /* PRO-TECH : l'etape 1 etait en --cyan-deep (#3ac0e5) et l'etape 2 en --blue (#00aaff). Deux bleus : aucune progression lisible, juste deux nuances de la meme couleur. L'etape 1 passe a un acier desature (#7d99b5, 6,22:1 sur le panneau #0b1425). La progression devient acier -> bleu vif -> rose : une couleur eteinte, une couleur d'interaction, une couleur d'aboutissement. */ [data-theme="tech"] .step-1 { --accent: #7d99b5 !important; } /* ══════════════════════════════════════════════════════════════════════ PROFONDEUR SAUGE — NEUTRE Pendant exact du halo indigo de PRO-TECH ci-dessus, et enfin un emploi pour --sage, qui n'etait jusqu'ici que declare : une variable qu'aucune regle n'utilise ne peint rien. C'est le bon emploi pour lui au regard de sa propre regle : body::after est une surface, en z-index -2, derriere tout le contenu, et ne porte aucune information. Le sauge n'y touche ni pastille, ni point d'etat, ni bordure de statut — le menthe vif de --success garde son monopole. Opacites plus fortes que sur les autres couches (0,16 et 0,10 contre 0,02) : sur un fond clair a #f4f5f7, un halo a 2 % est rigoureusement invisible. Les trois autres couches sont recopiees telles quelles, `background` etant une propriete raccourcie. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] body::after { background: radial-gradient(ellipse 60% 50% at 50% 20%, rgba(var(--blue-rgb), 0.025) 0%, transparent 70%), radial-gradient(ellipse 58% 48% at 10% 80%, rgba(var(--sage-rgb), 0.16) 0%, transparent 72%), radial-gradient(ellipse 46% 40% at 90% 14%, rgba(var(--sage-rgb), 0.10) 0%, transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } /* ══════════════════════════════════════════════════════════════════════ CARTES DE TONALITE — ACCENTS PAR THEME index-3.css assigne --gold a la carte 2 et --orange a la carte 3, la carte 1 retombant sur --blue par defaut. Deux problemes : 1. --gold EST --warning. Une couleur de statut servait de decor, la meme collision que le --cyan de rebelle corrige plus haut. 2. Or et orange ne sont retintes par aucun theme : ils imposaient des teintes chaudes a pro-tech, dont l'identite est bleu et rose. Ces trois cartes ne sont pas une progression mais trois genres de jeu : il leur faut trois teintes DISTINCTES, pas une echelle. Chaque theme pioche donc dans sa propre famille. Aucun !important : [data-theme=] + classe + nth-of-type pese plus lourd que le .tone-card:nth-of-type() de index-3.css, qui n'en a pas. Le contraste n'est pas un enjeu ici, contrairement aux etapes : --accent ne sert qu'au filet degrade en haut de carte, une surface decorative, jamais du texte. C'est ce qui permet d'employer --sage tel quel en neutre, la ou les pastilles exigeaient --sage-dim. ══════════════════════════════════════════════════════════════════════ */ /* ⚠️ NUMEROTATION 2/3/4, PAS 1/2/3 : :nth-of-type compte les elements du meme TYPE, pas de la meme classe. Dans .presentation-tones le premier enfant est
, suivi des trois
— quatre div freres. La premiere carte est donc le 2e div, la deuxieme le 3e, la troisieme le 4e. index-3.css ne declare que (2) et (3), c'est-a-dire les cartes 1 et 2 : la TROISIEME carte n'a jamais eu d'accent et retombe sur --blue par defaut. C'est corrige ici. */ /* PRO-TECH — bleu, rose pastel, magenta sature. */ [data-theme="tech"] .tone-card:nth-of-type(2) { --accent: var(--blue); } [data-theme="tech"] .tone-card:nth-of-type(3) { --accent: var(--purple); } [data-theme="tech"] .tone-card:nth-of-type(4) { --accent: var(--magenta); } /* NEUTRE — violet, sauge, ardoise. */ [data-theme="neutral"] .tone-card:nth-of-type(2) { --accent: var(--blue); } [data-theme="neutral"] .tone-card:nth-of-type(3) { --accent: var(--sage); } [data-theme="neutral"] .tone-card:nth-of-type(4) { --accent: #6b7684; } /* REBELLE — rouge, orange brule, paille. La charte du thème, sans toucher au #ffb627 de l'alerte. */ [data-theme="rebel"] .tone-card:nth-of-type(2) { --accent: var(--blue); } [data-theme="rebel"] .tone-card:nth-of-type(3) { --accent: var(--purple); } [data-theme="rebel"] .tone-card:nth-of-type(4) { --accent: var(--cyan); } /* ══════════════════════════════════════════════════════════════════════ ENCARTS DU PARCOURS — NEUTRE index-3.css leur pose `background: rgba(0, 0, 0, 0.2)`, un voile noir pense pour les thèmes sombres. Sur le fond clair de neutre il ne donne pas un gris de charte : il salit le blanc, sans qu'aucune variable soit derriere. Et il degrade la lisibilite — le voile assombrit le fond mais pas le texte, qui tombe a 3,86:1, sous le seuil de 4,5:1. Ces encarts etaient donc les moins lisibles de la page. Le sauge a 18 % donne #d8e4e0 et remonte le texte a 5,16:1. Il gagne donc sur les deux tableaux, la couleur et le contraste. NEUTRE UNIQUEMENT : sur tech et rebelle, un voile noir sur fond sombre fonctionne comme prevu. Rien a corriger la-bas. Le filet de gauche garde var(--accent), donc la couleur de l'etape — ardoise, violet, sauge. C'est lui qui relie l'encart a sa carte. */ [data-theme="neutral"] .parcours-step-detail { background: rgba(var(--sage-rgb), 0.18); } /* ══════════════════════════════════════════════════════════════════════ BOUTON SECONDAIRE DU CTA FINAL — SAUGE (NEUTRE) « Lire le reglement », a cote de « Creer mon compte ». Le primaire reste violet et garde la priorite : le vert prend le second role, ce qui evite qu'il entre en concurrence avec l'action principale. POURQUOI CE BOUTON ET PAS LE PRIMAIRE : un bouton entierement vert dans une interface ou le vert signifie « valide » brouillerait le signal. Un secondaire vert se lit comme une alternative, pas comme une confirmation. SURVOL EN --sage-dim ET NON --sage : du blanc sur le sauge clair donne 3,44:1, sous le seuil de 4,5:1. Sur --sage-dim, 5,88:1. Au repos, --sage-dim sur le fond a 14 % donne 4,70:1. !important : la regle [data-theme="neutral"] .btn-secondary posee plus haut dans ce fichier en utilise deja, il faut le meme calibre pour passer devant, et la specificite superieure fait le reste. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] .cta-section .btn-secondary { background: rgba(var(--sage-rgb), 0.14) !important; border-color: var(--sage) !important; color: var(--sage-dim) !important; } [data-theme="neutral"] .cta-section .btn-secondary:hover { background: var(--sage-dim) !important; border-color: var(--sage-dim) !important; color: #ffffff !important; } /* ══════════════════════════════════════════════════════════════════════ BOUTON SECONDAIRE DU HERO — SAUGE (NEUTRE) « Decouvrir l'univers », a cote de « Rejoindre l'ile ». Meme repartition que sur le CTA final : le violet dirige, le sauge accompagne. DIFFERENCE AVEC LE CTA : ce bouton est pose sur une PHOTO claire et chargee, pas sur un fond uni. Le teinter a 14 % comme l'autre ferait transparaitre l'image derriere le texte — c'est le defaut qu'on a mis trois essais a corriger sur ce meme bouton. La pastille reste donc opaque a 86 %, et le vert passe par la BORDURE et le TEXTE. Contrastes : 5,6:1 au repos, 5,88:1 au survol. Cette regle vient apres [data-theme="neutral"] .btn-secondary declaree plus haut (fond blanc 82 %, encre sombre) : elle en garde le principe d'opacite et n'en change que la couleur. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] .hero .btn-secondary { background: rgba(255, 255, 255, 0.86) !important; border-color: var(--sage) !important; color: var(--sage-dim) !important; } [data-theme="neutral"] .hero .btn-secondary:hover { background: var(--sage-dim) !important; border-color: var(--sage-dim) !important; color: #ffffff !important; } /* ══════════════════════════════════════════════════════════════════════ SAUGE SUR TOUT LE SITE — NEUTRE Tout ce qui precede est scope a l'accueil. Ces deux familles reviennent sur l'ensemble des pages, et tiennent le meme role : elles accompagnent, elles ne dirigent pas. .callout — 34 emplois : lore, guide, reglement, confidentialite, new-heaven. Des blocs de lecture, en marge du texte. .btn-ghost — 13 emplois : joinus, petites annonces, absences, boite a suggestions, espace communautaire. L'action secondaire de l'application, pendant du « Lire le reglement » du CTA. .callout etait en var(--blue), donc violet depuis le retintage : il se disputait l'attention avec les liens de la meme page, exactement le defaut qui avait fait echouer le lavis de section. ⚠️ .btn-ghost:hover utilisait var(--warning). Une couleur de statut servait de survol decoratif — la meme collision que le --cyan de rebelle et que le --gold des cartes de tonalite, corriges plus haut. Elle subsiste sur tech et rebelle : a traiter separement si tu veux. Le !important sur les bordures de .btn-ghost est impose par sa regle de base, qui en pose deja un. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] .callout { background: rgba(var(--sage-rgb), 0.10); border-color: rgba(var(--sage-rgb), 0.30); border-left-color: var(--sage); } /* ══════════════════════════════════════════════════════════════════════ SAUGE SUR TOUT LE SITE — pas seulement l'accueil Le sauge avait ete introduit pour casser le duo violet/gris, mais il ne servait que sur des classes propres a l'index (.parcours-step-detail, .tone-card, .cta-section...). Les autres pages restaient donc en violet et gris. LA REGLE, la meme que sur l'accueil : le VIOLET reste l'accent — actions, liens, elements cliquables. Le SAUGE porte l'information secondaire : libelles de section, compteurs, valeurs. Rien de cliquable ne devient sauge, sinon on brouille ce qui se clique et ce qui se lit. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] .section-label, [data-theme="neutral"] .stat-value, [data-theme="neutral"] .qstat-val, [data-theme="neutral"] .counter-value, [data-theme="neutral"] .pub-lieu, [data-theme="neutral"] .zone-rang { color: var(--sage-dim); } /* Le trait qui prolonge un libelle de section suit sa couleur. */ [data-theme="neutral"] .section-label::after, [data-theme="neutral"] .sep::after { background: color-mix(in srgb, var(--sage) 45%, transparent); } [data-theme="neutral"] .btn-ghost { color: var(--sage-dim); border-color: rgba(var(--sage-rgb), 0.45) !important; } [data-theme="neutral"] .btn-ghost:hover { background: var(--sage-dim); color: #ffffff; border-color: var(--sage-dim) !important; } /* ══════════════════════════════════════════════════════════════════════ LOGOS — HALO NEUTRE (NEUTRE) index-2.css pose sur le logo du hero : filter: drop-shadow(0 0 40px rgba(var(--blue-rgb), 0.2)) et themes.css fait de meme sur le logo du header. Tant que --blue valait #4a5568 (gris ardoise), ce halo etait invisible. Depuis son passage au violet, il teinte les deux logos — sur 40 px de flou, ca se voit. Un logo est une marque : il ne doit pas changer de couleur avec le theme. Le halo repasse donc sur un gris neutre pris sur --text (#262a30 = 38, 42, 48), qui donne du relief sans rien colorer. L'inversion en gris doux du logo de header (brightness/invert) est conservee telle quelle, elle ne dependait d'aucune variable de theme. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] .hero img.hero-logo { filter: drop-shadow(0 0 40px rgba(38, 42, 48, 0.18)); } [data-theme="neutral"] .logo img { filter: brightness(0) invert(0.45) drop-shadow(0 0 8px rgba(38, 42, 48, 0.22)) !important; } [data-theme="neutral"] .logo img:hover { filter: brightness(0) invert(0.3) drop-shadow(0 0 14px rgba(38, 42, 48, 0.3)) !important; } /* La banniere logo de lore.php et new-heaven.php porte class="section-banner logo" : elle heritait donc de la regle .logo img du HEADER, y compris son brightness(0) invert(0.45). Une inversion en gris se defend sur un petit logo de header pose sur fond clair ; sur une banniere de 600 px, elle transforme la marque en aplat gris. On l'annule ici : le logo reprend ses couleurs d'origine, et ne garde qu'une ombre portee neutre pour se detacher du fond clair. Selecteur plus specifique que .logo img, et !important pour passer devant le sien. */ [data-theme="neutral"] .section-banner.logo img, [data-theme="neutral"] .section-banner.logo img:hover { filter: drop-shadow(0 2px 10px rgba(38, 42, 48, 0.18)) !important; } /* ══════════════════════════════════════════════════════════════════════ LOGO NH DU HEADER — SAUGE (NEUTRE) Le logo n'est pas une image mais un masque CSS, comme les icones maison : background-color: var(--icon-fill) decoupe par NH.png. En neutre, --icon-fill vaut var(--blue), d'ou le violet. Rien a modifier dans le PNG. GRIS ET NON SAUGE : essaye puis ecarte. Une fois le header passe en neutre, un logo vert y devenait la seule tache de couleur d'un bandeau par ailleurs sobre, et attirait l'oeil plus que la navigation elle-meme. La marque se tient mieux en gris. --text (#262a30) et non --white (#14161a) : le logo se pose ainsi un cran AU-DESSUS du noir des icones de navigation. L'ecart est faible — 14,4:1 contre 18,1:1 — mais suffisant pour que la marque ne soit pas l'element le plus dur du header. Pour un gris nettement plus clair, var(--text-dim) donne #565c66 et 6,73:1. Il fait plus doux, mais le logo passe alors DERRIERE les icones dans la hierarchie visuelle, ce qui est discutable pour une marque. ══════════════════════════════════════════════════════════════════════ */ [data-theme="neutral"] header .logo .icon-mask { background-color: var(--text); }