/* Correspondances thème jQM ↔ personnalisation, communes ip/ei */

@charset "utf-8";

/* ==============================================================================
 * Ordre de chargement (index.html des 2 apps) :
 *   1. jQM : co-theme-jqm-5.[light|dark].css (ThemeRoller) → icons → structure
 *   2. spécificité d'app : css/intermittent.css | css/eintermittent.css (--app-color seul)
 *   3. correspondances : ce fichier
 *   4. co-1.4.5.css : uniquement des références var()
 * ------------------------------------------------------------------------------
 * co-theme-jqm-5.*.css est généré par le ThemeRoller : il est la source et ne se modifie jamais à la main
 * (il doit rester réimportable). Toute valeur qu'il définit est recopiée ici, annotée de son slot
 * ThemeRoller (même convention que le thème : valeur /*{slot}*\/), puis seulement référencée ailleurs.
 * Règle : aucune couleur en dur hors de ce fichier ; une valeur manquante se crée ici.
 * :root = clair (co-theme-jqm-5.light.css), .i-darkmode = sombre (co-theme-jqm-5.dark.css).
 * Une variable dont la valeur contient var() est figée là où elle est déclarée : elle est redéclarée
 * dans .i-darkmode, même si la formule est identique.
 * ============================================================================== */

:root {
	/* palette du thème */
	--text-color: #000000 /*{a-bup-color}*/;
	--background-color: #ffffff /*{b-body-background-color}*/;
	--background-page-color: #f3f3f3 /*{a-page-background-color}*/;
	--border-color: #dedede /*{a-bup-border}*/;
	--gray-color: #808080 /*{global-icon-color}*/;
	--active-background-color: #4788ff /*{a-active-background-color}*/;
	--active-text-color: #ffffff /*{a-active-color}*/;		/* texte sur fond coloré : blanc dans les 2 modes */
	--overlay-shadow-color: rgba(0,0,0,.6);					/* = co-theme-jqm-5 .ui-overlay-shadow */
	--table-stripe-background: rgba(0,0,0,.04);				/* = co-theme-jqm-5 .table-stripe */

	/* palette (jeu C1) : une base par notion, utilisée telle quelle pour le texte, les icônes et les traits.
	   Futur : couleur brute pour toute surface aussi, le texte posé dessus s'adapte (cssColorTexte, cobiblio.js).
	   Autres surfaces (passé, jauge, volume, indice, boutons colorés) : base mêlée à --background-color (cssColorZone).
	   Bloc interchangeable : la palette « contrastes renforcés » (.i-palette-dalton, en fin de fichier) redéfinit ces variables,
	   plus erreur, warning, mode d'emploi, gris et les dosages (cadres, graphiques), en clair et en sombre */
	--intermittence-color: #00573a;
	--communaute-color: #c65f00;
	--futur-color: #59a68d;			/* prévisionnel (i-color-futur, graphiques) : indépendant de --intermittence-color */
	--passe-color: #c4c4c4;			/* réalisé (i-color-passe, graphiques), sa surface reste proche du fond */
	--positif-color: #0a84ff;
	--avant-impot-color: #af52de;
	--apres-impot-color: #ff9500;
	--graphique-fond-mix: 40%;		/* surface mêlée au fond : jauge, volume, indice, déclinaison claire du graphique du mois */
	--zone-fort-mix: 60%;			/* intensité forte, même formule : surface du passé, fond des notifications */

	/* cadres d'info (i-background-<mode>, mode d'emploi) : une couleur par cadre, fond et texte calculés dans co-1.4.5.css */
	--erreur-color: #d20000;
	--warning-color: #ffc700;
	--mode-emploi-color: #2f7fd0;
	--cadre-fond-mix: 20%;			/* fond = couleur du cadre mélangée à --background-color */
	--cadre-texte-mix: 45%;		/* texte et bordure = couleur du cadre mélangée à --text-color */

	/* couleurs de marque : source unique, désignée par --app-color dans le fichier de chaque app */
	--intermittent-color: #2e2793;
	--emploi-intermittent-color: #660000;

	/* invariants */
	--base-font-size: 16px;

	/* boutons et widgets : bordure, rayon, calques d'état (cf. co-1.4.5.css « jQM : Uniformisation des widgets ») */
	--border-width: 1px;
	--btn-radius: 1em;
	--hover-overlay: color-mix( in srgb , var(--text-color) 4% , transparent );		/* ≈ jQM b-bhover : #fff → #f5f5f5 */
	--pressed-overlay: color-mix( in srgb , var(--text-color) 15% , transparent );	/* ≈ jQM b-bdown : #fff → #d9d9d8 */

	/* photo de relation : encadrement / demi-encadrement (cf. co-1.4.5.css « Relations ») */
	--relation-image-border-width: 0;
	--relation-image-radius: 0%;

	/* composants dont la couleur change entre clair et sombre */
	--checkbox-off-color: rgba(45,58,67,0.6);
	--floatbutton-shadow: 2px 2px 3px var(--gray-color);
	--header-shadow-color: rgba(0,0,0,0.3);
	--ei-profil-background: #ffeadb;

	/* couleurs extraites de co-1.4.5.css (étape 0 de la refonte UI) : valeurs inchangées, identiques en clair et en sombre */
	--floatbutton-child-color: #adadad;		/* fond des boutons enfants du bouton flottant */
	--popup-screen-color: #000;		/* voile derrière un popup (l'opacité est posée ailleurs) */
	--flipswitch-off-color: #c2c2c2;		/* interrupteur jQM éteint */
	--logo-background-color: #ffffff;		/* fond du bandeau de logo (PNG non recolorisable) */
	--annonce-color: #a04646;		/* couleur d'une annonce (ei) */
	--enseignement-formation-color: #5449ff;		/* activité d'enseignement et de formation */
	--association-background: rgba(255,228,181,0.68);		/* fond d'une association (agenda) */
	--echeance-background: #d2f3ff;		/* fond d'une échéance (agenda), gris-bleu clair */
	--ombre-legere-color: rgba(0,0,0,0.1);		/* ombres et filets : légère */
	--ombre-panneau-color: rgba(0,0,0,0.15);		/* ombre d'un panneau en superposition */
	--ombre-moyenne-color: rgba(0,0,0,0.3);		/* ombre moyenne */
	--ombre-halo-color: rgba(0,0,0,0.4);		/* ombre portée du halo sonar */
	--sonar-color: rgba(255,147,223,0);		/* fin d'onde du halo sonar (transparent) */
	--retrait-border-color: #bdbdbd;		/* filet vertical d'un bloc en retrait (options facultatives) */
	--filet-color: #b9b9b9;		/* filet horizontal d'un ajout de document */
	--bar-border-color: #8c8c8c;		/* bordure d'une barre de situation (posée en JS) */
	--employeur-ip-color: #720000;		/* icône employeur de la légende de la carte */
	--cluster-color: #ffcb16;		/* icône de regroupement de la légende de la carte */
}

/* --------------------------------------------- Apparence : darkmode ---------------------------------------------------- */

.i-darkmode {
	/* palette du thème */
	--text-color: #ffffff /*{a-bup-color}*/ ;
	--background-color: #000000 /*{b-body-background-color}*/ ;
	--background-page-color: #131313 /*{a-page-background-color}*/ ;
	--border-color: #383838 /*{a-bup-border}*/ ;

	/* palette (jeu C1), bases claires pour le texte sur fond noir */
	--intermittence-color: #00c885 ;
	--communaute-color: #ffa755 ;
	--futur-color: #00d18d ;
	--passe-color: #5c6068 ;
	--positif-color: #64d2ff ;
	--avant-impot-color: #bf5af2 ;
	--apres-impot-color: #ffb340 ;
	--graphique-fond-mix: 50% ;
	--zone-fort-mix: 65% ;

	/* couleurs de marque : éclaircies pour la lisibilité sur fond noir */
	--intermittent-color: #6257ff ;
	--emploi-intermittent-color: #a04646 ;

	/* couleurs sémantiques */
	--cadre-fond-mix: 40% ;
	--cadre-texte-mix: 20% ;

	/* calques d'état */
	--hover-overlay: color-mix( in srgb , var(--text-color) 18% , transparent ) ;	/* ≈ #000 → #2e2e2e */
	--pressed-overlay: color-mix( in srgb , var(--text-color) 34% , transparent ) ;	/* ≈ #000 → #575757 */

	/* ombres et composants */
	--overlay-shadow-color: rgb(255 255 255 / 60%) ;
	--table-stripe-background: #161616 ;
	--checkbox-off-color: var(--text-color) ;		/* sous l'opacity .3 du thème jQM : ≈ #4d4d4d sur fond noir */
	--floatbutton-shadow: 0 0 0 2px rgb(255 255 255 / 60%) ;
	--header-shadow-color: rgb(255 255 255 / 0.3) ;
	--ei-profil-background: #2d1300 ;

	/* couleurs extraites de co-1.4.5.css (étape 0 de la refonte UI) : valeurs inchangées, identiques en clair et en sombre */
	--floatbutton-child-color: #adadad;		/* fond des boutons enfants du bouton flottant */
	--popup-screen-color: #000;		/* voile derrière un popup (l'opacité est posée ailleurs) */
	--flipswitch-off-color: #c2c2c2;		/* interrupteur jQM éteint */
	--logo-background-color: #ffffff;		/* fond du bandeau de logo (PNG non recolorisable) */
	--annonce-color: #a04646;		/* couleur d'une annonce (ei) */
	--enseignement-formation-color: #5449ff;		/* activité d'enseignement et de formation */
	--association-background: rgba(255,228,181,0.68);		/* fond d'une association (agenda) */
	--echeance-background: #d2f3ff;		/* fond d'une échéance (agenda), gris-bleu clair */
	--ombre-legere-color: rgba(0,0,0,0.1);		/* ombres et filets : légère */
	--ombre-panneau-color: rgba(0,0,0,0.15);		/* ombre d'un panneau en superposition */
	--ombre-moyenne-color: rgba(0,0,0,0.3);		/* ombre moyenne */
	--ombre-halo-color: rgba(0,0,0,0.4);		/* ombre portée du halo sonar */
	--sonar-color: rgba(255,147,223,0);		/* fin d'onde du halo sonar (transparent) */
	--retrait-border-color: #bdbdbd;		/* filet vertical d'un bloc en retrait (options facultatives) */
	--filet-color: #b9b9b9;		/* filet horizontal d'un ajout de document */
	--bar-border-color: #8c8c8c;		/* bordure d'une barre de situation (posée en JS) */
	--employeur-ip-color: #720000;		/* icône employeur de la légende de la carte */
	--cluster-color: #ffcb16;		/* icône de regroupement de la légende de la carte */
}

/* --------------------------------------------- Apparence : contrastes renforcés -------------------------------------------- */
/* Palette alternative pour le daltonisme (protanopie, deutéranopie), option « Afficher des contrastes renforcés » de
 * Paramètres / Apparence : coApparence.setPalette( 'dalton' ) pose .i-palette-dalton sur body (coreglage.js).
 * Conception, critères et mesures : intermittent/doc/palette-daltonisme.md ; contrôle : .tools/playwright/scripts/audit-contrastes.js.
 * Indépendance : les 2 blocs redéfinissent la MÊME liste complète ; .i-darkmode.i-palette-dalton (2 classes) l'emporte sur
 * :root et .i-darkmode, donc un changement futur de ces variables en standard n'atteint pas cette palette.
 * Toute nouvelle couleur de sens ajoutée au bloc palette standard doit l'être aussi aux 2 blocs ci-dessous, sinon elle
 * hérite de la valeur standard.
 * Restent partagées avec le standard (conservées car confortables, à re-auditer si elles changent) : variables du thème
 * (--text-color, --background-color, --background-page-color, --border-color, --active-*) et couleurs de marque
 * (--intermittent-color, --emploi-intermittent-color, --ei-profil-background). */

.i-palette-dalton {
	--intermittence-color: #208652 ;
	--communaute-color: #904d02 ;
	--futur-color: #24538a ;
	--passe-color: #888888 ;
	--positif-color: #06809f ;
	--avant-impot-color: #851b5b ;
	--apres-impot-color: #7b5f1c ;
	--erreur-color: #811e04 ;
	--warning-color: #e0b52f ;
	--mode-emploi-color: #49129b ;
	--gray-color: #464646 ;
	--cadre-fond-mix: 35% ;
	--graphique-fond-mix: 40% ;
	--zone-fort-mix: 60% ;
}

.i-darkmode.i-palette-dalton {
	--intermittence-color: #3eece6 ;
	--communaute-color: #edc388 ;
	--futur-color: #82a5e6 ;
	--passe-color: #767676 ;
	--positif-color: #5cdce8 ;
	--avant-impot-color: #fe60a5 ;
	--apres-impot-color: #f0e336 ;
	--erreur-color: #eb4e47 ;
	--warning-color: #ffce46 ;
	--mode-emploi-color: #8978cd ;
	--gray-color: #8d8d8d ;
	--cadre-fond-mix: 45% ;
	--graphique-fond-mix: 50% ;
	--zone-fort-mix: 65% ;
}

/* --------------------------------------------- Charte « ui2 » (refonte UI) ------------------------------------------------
 * Active seulement quand body porte .i-ui2 (ip : index.html) ; ei, qui ne la pose pas, n'est pas touchée. Les règles sont en fin de
 * co-1.4.5.css (« Charte ui2 »). Une variable contenant var() est figée là où elle est déclarée : --background-page-color l'est sur
 * body, où .i-darkmode et --app-color vivent aussi, donc les valeurs claire et sombre se lisent bien sur le même élément. */

.i-ui2 {
	--tonal-mix: 10%;			/* part du domaine dans le fond d'un bouton tonal de la barre de titre */
	--neutre-mix: 7%;			/* part du texte dans le fond d'un bouton tonal du corps de page (neutre) */
	--bouton-fond-neutre: color-mix( in srgb , var(--text-color) var(--neutre-mix) , var(--background-color) );
	--carte-rayon: 0.5rem;
	--background-page-color: color-mix( in srgb , var(--app-color) 5% , var(--background-color) );	/* fond de page : celui des blocs, à peine teinté de la couleur de l'app */
}
.i-ui2.i-darkmode {
	--tonal-mix: 20%;
	--neutre-mix: 12%;
	--background-page-color: color-mix( in srgb , var(--app-color) 6% , #121217 );	/* plus clair que les blocs (noirs), comme le jour où la page est plus sombre que les blocs (blancs) */
}