/* https://webaim.org/resources/contrastchecker/
   https://colorable.jxnblk.com/ */

@import url('ubuntu.css');

/* 1. Comportement par défaut : on laisse le système décider.
   light-dark() gère automatiquement clair / sombre.
*/
:root {
  color-scheme: light dark;
/*
	--fond-page: light-dark(#ffffff, #121212);
	--texte-page: light-dark(#111111, #f5f5f5);
  
	--fond-carte: light-dark(#ffffff, #1c1c1c);
	--texte-carte: light-dark(#222222, #eeeeee);
	--bordure-carte: light-dark(#dddddd, #333333);

*/
	--fond-page: light-dark(#f0f0f0, #1c1f26);
	--texte-page: light-dark(#111111, #f5f5f5);
	--fond-carte: light-dark(#f9f9f9, #1c1c1c);
	--bordure-carte: light-dark(#dddddd, #333333);
	--color-accent: light-dark(#0d6efd, #66b2ff);
	--color-success: light-dark(#4caf50, #81c784);
	--color-error: light-dark(#e53935, #ef5350);
	--color-warning: light-dark(#ffb300, #ffca28);

}

/* 2. Si l’utilisateur force un thème, on passe AU-DESSUS
   des light-dark() avec des valeurs “fixes”.
   Ces valeurs prennent le dessus quand data-theme est présent.
*/
:root[data-theme="light"] {
	color-scheme: light; /* on signale qu’on force le mode clair */
/*
	--fond-page: #ffffff;
	--texte-page: #111111;
*/
	--fond-page: #f0f0f0;
	--texte-page: #111111;
	--fond-carte: #f9f9f9;
	--bordure-carte: #dddddd;
	--color-accent: #0d6efd;
	--color-success: #4caf50;
	--color-error: #e53935;
	--color-warning: #ffb300;

}

:root[data-theme="dark"] {
	color-scheme: dark; /* on signale qu’on force le mode sombre */
/*
	--fond-page: #121212;
	--texte-page: #f5f5f5;
*/
	--fond-page: #1c1f26;
	--texte-page: #f5f5f5;
	--fond-carte: #1c1c1c;
	--bordure-carte: #333333;
	--color-accent: #66b2ff;
    --color-success: #81c784;
    --color-error: #ef5350;
    --color-warning: #ffca28;
}


body {
	/* https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/ */
	margin: 0;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	
	background: var(--fond-page);
	color: var(--texte-page);
	font-family: Ubuntu, sans-serif;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}


/*
#theme-toggle {
	background: transparent;
	border: 0px;
	padding: 5px;
	font-size: 16px;
	cursor: pointer;  
	margin-top: 20px;
	filter: grayscale(100%);
	transition: background-color 0.3s ease;
}

#theme-toggle:hover {
	opacity: 0.8;
}
*/

/* #navheader */

ul {
	list-style-type: none;
	padding: 0;
	margin-top: 10px;
	text-align:right;
}

li {
    display: inline-block; 
    /*float: right;*/
	background: transparent;
	border: 0px;
	padding: 5px 10px;
	font-size: 16px;
	cursor: pointer;  
	filter: grayscale(100%);
}

#theme-toggle {
	transition: background-color 0.3s ease;
      }

.card {
	background: var(--fond-carte);
	color: var(--texte-carte);
	border: 1px solid var(--bordure-carte);
	padding: 20px;
	border-radius: 8px;
}