@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import './highlight.css';

:root {
	--color-global: #c7b9ff;
	--color-global-hover: #7a59ff;
	--color-warning : #721c24;
	--background-warning: #f8d7da;
	--border-warning: #f5c6cb;
	--grey-color: rgb(114, 114, 114);
	--form-color:  rgb(230, 230, 230);
	--color-link: #007bff;
	--color-global-shadow: rgba(0, 0, 0, 0.1);
	--background-color: rgb(240, 240, 240);
	--background-color-button: rgb(235, 235, 235);
	--email-content-background: rgb(243, 243, 243);
	--text-color: #040404;
	--h1-color:#000000;
	--h2-color:#000000;
	--h3-color:#000000;
	--h4-color:#000000;
	--header-background: #f8f9fa;
	--header-text-color: #000000;
	--padding-header: clamp(10px, 2%, 20px);
	--font-size-title: clamp(1rem, 1.5vw, 2rem);
	--font-size-header: clamp(1rem, 0.8vw, 1rem);
	--size-fluid-1: clamp(0.8rem, 1.5vw, 2rem);
	--size-fluid-2: clamp(0.8rem, 1.4vw, 2rem);
	--size-fluid-3: clamp(0.5rem, 1.2vw, 2rem);
	--size-fluid-6: clamp(5rem, 7vw, 7.5rem);
	--size-fluid-h1: clamp(0.8rem, 1.5vw, 2rem);
	--size-fluid-h2: clamp(0.8rem, 1.4vw, 2rem);
	--size-fluid-h3: clamp(0.5rem, 1.2vw, 2rem);
	--size-fluid-paragraphe: clamp(0.8rem, 1.2vw, 1.5rem);
	--margin-change: 2%;
	--margin-global: 2%;
	--gap-email : 0.5vw;
	--transition-delay: 0.4s;



}

html,
body {
	background-color: var(--background-color);
	color: var(--text-color);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'Roboto Mono', sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-global: #9546f0;
		--grey-color :rgb(192, 192, 192);
		--form-color:  rgb(102, 102, 102);
		--email-content-background: #4b4b4b;
		--background-color: #424242;
		--background-color-button: #4e4e4e;
		--text-color: #ffffff;
		--header-background: #333333;
		--header-text-color: #ffffff;
	}
}

body>div {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
}

h1 {
	font-size: var(--size-fluid-1);
}

h2 {
	font-size: var(--size-fluid-h2);
	font-weight: 500;
}

h3,
h4,
h5,
h6 {
	font-size: var(--size-fluid-3);
}

p,
a,
input,
li {
	font-size: var(--size-fluid-paragraphe);
	line-height: 1.6;
}


svg {
	/* background-color: #f8f9fa; */
	border-radius: 5px;
	padding: 10px;
	max-width: 100%;
}

button {
	padding: 10px 20px;
	background-color: var(--color-global);
	color: var(--text-color);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	text-align: center;
}

button .actif {
	background-color: var(--backgroud-color-bt);

}


.email-details {
	flex-grow: 1;
}

a {
	color: inherit;
	text-decoration: none;
}

table {
	width: 100%;
	border-collapse: collapse;
	/* Fusionne les bordures des cellules adjacentes */
}

th,
td {
	border: 1px solid #000;
	/* Bordure autour de chaque cellule */
	padding: 8px;
	/* Espacement interne pour le contenu des cellules */
	text-align: left;
	/* Alignement du texte à gauche */
}

th {
	/* background-color: #f2f2f2; */
	/* Couleur de fond pour les en-têtes */
}

tr:nth-child(even) {
	/* background-color: #f9f9f9; */
	/* Couleur de fond pour les lignes paires */
}


pre {
	position: relative;
	font-size: var(--size-fluid-paragraphe);
	line-height: 1.6;
	padding: 10px;
	border-radius: 5px;
	background-color: #f8f9fa;
	overflow-x: auto;
	color: #040404;
}

pre button {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.5em;
	/* Pour un peu d'espacement */
	padding: 0.5em 1em;
	background-color: #007BFF;
	/* Couleur de fond du bouton */
	color: #FFFFFF;
	/* Couleur du texte du bouton */
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

pre button:hover {
	background-color: #0056b3;
	/* Couleur de fond au survol */
}

[id^="mermaid-"] {
	background-color: #f8f9fa;
}