/* dmarcassist.css */

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
            color: #333;
            line-height: 1.6; 
        }	

/* Indique que la largeur et la hauteur de tous les éléments incluent le padding et la bordure, évitant ainsi les calculs complexes. */
*, *::before, *::after {
    box-sizing: border-box;
}		
		
.textalignleft { text-align:left; }
.textaligncenter { text-align:center; }
.textalignright { text-align:right; }

.ptl {
	font-size:11px;
	font-family:Verdana,Arial;
}

.ptl2 {
	font-size:10px;
	font-family:Verdana,Arial;
}

.textindent0 { text-indent:0 }

.table { display: table; }
.display-block { display: block }

.flex-justify-content-center { display: flex; justify-content: center; }

.flexWrapCenter {display:flex;flex-wrap: wrap;justify-content:center}

.divArgIndex { 
	width: 100%;
	max-width: 400px;
	margin: 0 1rem 2.5rem;
	background-color: #FFFFFF;
	transition: transform 0.5s;
}

.divArgIndex:hover{
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2);
}


.flexwrap100pc { 
	display: flex;
	flex-wrap: wrap; /* Permet de repositionner les divs si nécessaire */
	width: 100%;
	align-items: center;
}

.flex1 { flex: 1 }

.flex-column-center {
            display: flex;
            flex-direction: column;
            align-items: center; 

}

.flex-row-center {
	display: flex; /* Active Flexbox pour le conteneur */
	flex-direction: row; /* Assure que les éléments sont alignés en ligne */
	align-items: center; /* Centre verticalement les éléments */
}

.flex-column-100vh { /* Assure que le conteneur prend toute la hauteur */
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.center-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.MediumCheckbox { transform : scale(1.3);}
.BigCheckbox { transform : scale(1.4);}

.cadreblancarrondi {
	background-color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
	margin-bottom: 30px;
	box-sizing: border-box;
}

.cadreblancarrondi label {
	display: block;
	color: #2c3e50;
	font-weight: 600;
	font-size: 1.1em;
}
.cadreblancarrondi input[type="text"],
.cadreblancarrondi input[type="password"],
.cadreblancarrondi input[type="email"] {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	font-size: 1.1em;
	/* width: calc(100% - 20px); */
	/* margin-bottom: 20px; */
	box-sizing: border-box;
	transition: border-color 0.3s ease;
}
.cadreblancarrondi input[type="text"]:focus,
.cadreblancarrondi input[type="email"]:focus,
 .cadreblancarrondi input[type="password"]:focus {
	outline: none;
	border-color: #0078d7;
	box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.25);
}
.cadreblancarrondi button {
	background-color: #3498db;
	color: white;
	padding: 12px 30px;
	border: none;
	border-radius: 8px;
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* width: 100%; */
}

.cadreblancarrondi button:disabled {
    background-color: grey; /* Couleur de fond grise */
    color: white; /* Texte blanc pour contraster avec le fond gris */
    cursor: not-allowed; /* Changer le curseur pour indiquer que le bouton est désactivé */
    box-shadow: none; /* Optionnel : retirer l'ombre pour indiquer l'état désactivé */
}

.cadreblancarrondi button:hover {
	background-color: #2980b9;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cadreGrisArrondi {
	background-color: #f0f0f0; 
	padding: 20px; 
	border-radius: 8px; 
	margin-bottom: 20px; 
	border: 1px solid #ccc;
}


/* Pour mettre plusieurs liens sur la meme ligne responsive */
.nav-links {
	display: flex; /* Utilise Flexbox pour la mise en page */
	justify-content: space-around; /* Distribue l'espace uniformément */
	align-items: center; /* Centre verticalement les éléments */
	list-style: none; /* Enlève les puces de la liste */
	margin: 0; /* Enlève les marges par défaut de la liste */
	padding: 0; /* Enlève le padding par défaut de la liste */
	width: 100%; /* Assure que la liste prend toute la largeur du conteneur */
}

.nav-links li {
	text-align: center; /* Centre le texte à l'intérieur de chaque élément de liste */
/*	width: 33.33%; /* Chaque élément prend un tiers de la largeur */
	list-style: none !important; 
	
}

.nav-links li a {
	display: inline-block;
	background-color: #1abc9c;
	color: white;
	padding: 15px 30px;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	transition: background-color 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	

	margin-bottom: 10px; /* Add margin below the link */
}

.nav-links li a:hover {
	 background-color: #16a085;
}

.displaynone { display:none }

.positionrelative { position: relative}

.white-space-nowrap { white-space: nowrap }

.floatleft {float: left;}
.floatright {float: right;}
.ClearBoth {clear: both;}

.word-break-all { word-break: break-all;}

.overflow-x-auto { overflow-x: auto; }

.Bold { font-weight: bold; }
.Italic { font-style: italic; }

.text-decoration-none { text-decoration: none}

.listestylenone { list-style: none; /* Enlève les puces de la liste */ }

.font-size-2-5em { font-size: 2.5em; }
.font-size-larger { font-size: 1.2em; }
.font-size-smaller { font-size: 0.9em }


.cursorpointer { cursor: pointer; }

/* pour create_acount verif des contraintes sur MDP */
.password-constraints {  margin-top: 10px; }
.password-constraints li { color: red;  }
.password-constraints li.valid { color: green; }

h1 {
	margin-top: 0;
	font-size: 3.5em;
	color: #2c3e50;
	margin-bottom: 20px;
	font-weight: 700;
}

h2 {
	font-size: 2.5em;
	color: #2c3e50;
	margin-bottom: 20px;
	font-weight: 700;
}
	
.p1 {
    font-size: 1.4em;
    color: #777;
    margin-bottom: 40px;
}

/* Style pour le div de superposition */
.overlay {
	display: none; /* Le div est initialement caché */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(5px);
	z-index: 5;
	justify-content: center;
	align-items: center;
}	

.width30px { width: 30px; }
.width400px { width: 400px; }

.height15px { height:15px }
.height20px { height:20px }
.height25px { height:25px }      
.height30px { height: 30px; }
.height35px { height: 35px; }
.height40px { height: 40px; }
.height50px { height: 50px; }
.height150px { height: 150px; }

.top5px { top:5px }

.border-none { border: none }

.border-radius-10px { border-radius:10px }
.border-radius-20px { border-radius:20px }

.width100pcmoins40px { width: calc(100% - 40px); }

.maxwidth70pc { max-width:70%; }
.maxwidth80pc { max-width:80% }
.maxwidth90pc { max-width:90% }

.maxwidth70px { max-width:70px; }
.maxwidth100px { max-width:100px; }
.maxwidth130px { max-width:130px; }
.maxwidth300px { max-width:300px }
.maxwidth320px { max-width:320px }
.maxwidth500px { max-width:500px; }
.maxwidth600px { max-width:600px }
.maxwidth800px { max-width:800px; }
.maxwidth900px { max-width:900px; }
.maxwidth1200px { max-width:1200px; }
.maxwidth1500px { max-width:1500px; }

.min-width-120px { min-width: 120px }
.minwidth130px { min-width:130px }


.max-width-70pc-800px { /* prendra la plus petite valeur des 2 */
  max-width: min(70%, 800px);
}
.max-width-100pc-1000px { max-width: min(100%, 1000px) }
.max-width-70pc-445px {	max-width: min(70%, 445px)}

.width40pc { width:40% }
.width80pc { width:80% }
.width100pc { width:100% }

.width100px { width:100px; }
.width150px { width:150px; }
.width300px { width:300px; }
.width350px { width:350px; }


.padding-0 { padding: 0 }
.padding8px { padding:8px; }

.padtop10px { padding-top:10px }
.padtop15px { padding-top:15px }
.padtop20px { padding-top:20px }
.padtop30px { padding-top:30px }
.padtop40px { padding-top:40px }
.padtop50px { padding-top:50px }
.padtop60px { padding-top:60px }
.padtop70px { padding-top:70px }

.padleft10px { padding-left: 10px }
.padleft20px { padding-left: 20px }
.padleft30px { padding-left: 30px }
.padleft40px { padding-left: 40px }

.padright10px {padding-right:10px }
.padright20px {padding-right:20px }
.padright30px {padding-right:30px }


.padbottom10px { padding-bottom: 10px }
.padbottom15px { padding-bottom: 15px }
.padbottom20px { padding-bottom: 20px }
.padbottom30px { padding-bottom: 30px }
.padbottom40px { padding-bottom:40px; }
.padbottom50px { padding-bottom:50px; }


.margintop10px { margin-top:10px; }
.margintop20px { margin-top:20px; }
.margintop30px { margin-top:30px; }
.margintop40px { margin-top:40px; }
.margintop50px { margin-top:50px; }



.marginbottom10px { margin-bottom:10px; }
.marginbottom15px { margin-bottom:15px; }
.marginbottom20px { margin-bottom:20px; }
.marginbottom30px { margin-bottom:30px; }
.marginbottom40 { margin-bottom:40px }
.marginbottom50 { margin-bottom:50px }

.margin-auto {margin:auto}
.margin0auto { margin: 0 auto; }
.marginHauto {
	margin-left: auto;
	margin-right: auto;

}

.margin-top-auto { margin-top: auto; }

.flex { display: flex; }

.flex-wrap { 
	display: flex;
	flex-wrap: wrap; 
}

.align-items-center { align-items: center }
.align-items-flex-start {align-items: flex-start }

.min-height-100pc { min-height: 100%;}


.flex-direction-column { 
	display: flex;
	flex-direction: column;
}

.col-30pc { flex: 0 1 30%; }
.col-35pc { flex: 0 1 35%; }
.col-40pc {	flex: 0 1 40%; }
.col-50pc {	flex: 0 1 50%; }
.col-60pc {	flex: 0 1 60%; }

.gap-2rem { gap: 2rem   }

.justify-content-center {
    justify-content: center; /* Centre horizontalement */
}

.position-relative { position: relative }

.BadgeTarifPopulaire { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 0.8em; }

.green {color: green }
.white {color: white }
.red { color: red;  }

.BleuFonce { color: #2c3e50 }
.VertLogo { color: #329035 }
.RougeLogo { color: #e64a19 }
.BleuLogo { color: #29abe2 }
.JauneLogo { color: #f9a825 }

.red-warning {
	color: #e74c3c;
	font-weight: bold;
}

.orange-warning {
	color: #fa7825;
	font-weight: bold;
}

.NoteImportante {
	color: #c159f5;
	font-weight: bold;
}

.remarque {
     color: #aaa;
     font-size: 0.9em;
     font-style: italic;
}

.backcolore0f7fa { background-color: #e0f7fa; } /* bleu clair fond ecran */

.BackJauneLogo { background-color: #f9a825 }
.BackVertLogo { background-color: #329035 }
.BackBleuLogo { background-color: #29abe2 }
.BackRougeLogo { background-color: #e64a19 }

.BackWhite { background-color: #ffffff }
.BackGrisPale { background-color: #dedede }

.border-left-JauneLogo { border-left: 4px solid #f9a825 }
.border-left-VertLogo { border-left: 4px solid  #329035 }
.border-left-BleuLogo { border-left: 4px solid #29abe2 }

pre {
	display: inline;
	max-width: 100%;
	overflow-x: auto; 
	white-space: pre-wrap; 
	background-color: #f0f0f0;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid #ddd;
	font-size: 0.9em;
	line-height: 1.5;
}

pre code {
  display: inline; /* Assure que <code> reste en ligne */
  white-space: inherit; /* Hérite du comportement de l'élément parent */
}



/* Style pour l'effet d'éclaircissement et de flou */
.lighten-screen {
	background-color: rgba(255, 255, 255, 0.9);
	transition: background-color 0.5s ease;
}


footer {
	background-color: #34495e;
	color: white;
	display: flex;
	justify-content: center; /* centre horizontalement */
	align-items: center;     /* centre verticalement si plusieurs lignes */
	gap: 2rem;               /* espacement entre les éléments */
	flex-wrap: wrap;         /* permet le retour à la ligne si l'espace est insuffisant */
	padding: 1rem;
	text-align: center;
	margin-top: auto;
}

/* Pour saisie TOTP */
.totp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.totp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    border: 2px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.totp-input:focus {
    outline: none;
    border-color: #0078d7;
    box-shadow: 0 0 0 2px rgba(0, 120, 215, 0.25);
}

.totp-input.filled {
    border-color: #3498db;
    background-color: #f8f9fa;
}

.separator {
    border: none;
    height: 1px;
    background-color: #ccc; /* Couleur du trait */
    margin: 10px 20px; /* Espacement */
}

.table-macros {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	overflow: hidden; /* Pour que le border-radius fonctionne avec les thead/tbody */
}
td[data-column="Macro"] {
 padding-left:10px;
}

.pulse-animation {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Media query pour les écrans plus petits (par exemple, les téléphones) */
@media (max-width: 768px) {
	.nav-links {
		flex-direction: column; /* Empile les liens verticalement */
	}
	.nav-links li {
		width: 100%; /* Chaque lien prend toute la largeur sur les petits écrans */
	}
		
	.col-30pc { flex: 1 1 100%;	}
	.col-40pc { flex: 1 1 100%;	}
	.col-50pc { flex: 1 1 100%;	}
	.col-60pc { flex: 1 1 100%;	}


}

/* ##### CSS pour le bandeau haut ##### */
header {
	background-color: #fff;
	padding: 20px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	/*sticky*/
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.80); /* Ajout de la transparence, 0.80 */
	backdrop-filter: blur(10px); /* Ajout d'un effet de flou en arrière-plan pour améliorer la lisibilité */
}

.header-BandeauHaut {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.logo-container { 	display: flex;	align-items: center; }
.logo { width: 90px;	height: 80px;	margin-right: 20px;}
.dimlogo { 	width: 90px;	height: 70px; }
.site-title { 	font-size: 1.8em; color: #2c3e50; font-weight: bold; line-height: 1.2; }
.site-title a { text-decoration: none; 	color: #000000; }

.nav-BandeauHaut ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}

.nav-BandeauHaut ul li {
	margin-left: 20px;
}

.nav-BandeauHaut ul li a {
	text-decoration: none;
	color: #555;
	font-weight: 500;
	transition: color 0.3s ease;
}

.nav-BandeauHaut ul li a:hover {
	color: #1abc9c;
}


@media screen and (max-width: 768px) {
	.contact-form {
		padding: 20px;
	}

	.contact-section h1 {
		font-size: 2.5em;
	}

	.nav-menuHaut {
		display: none;
	}

	.hamburger {
		display: block;
		cursor: pointer;
		padding: 10px;
		border: none;
		background: none;
		font-size: 24px;
		color: #555;
	}

	.hamburger:focus {
		outline: none;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #fff;
		min-width: 160px;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
		z-index: 1;
		right: 0;
		top: 80px;
		border-radius: 8px;
	}

	.dropdown-content a {
		color: #555;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		transition: background-color 0.3s ease;
		border-bottom: 1px solid #eee;
	}

	.dropdown-content a:last-child {
		border-bottom: none;
	}

	.dropdown-content a:hover {
		background-color: #f0f0f0;
		color: #1abc9c;
	}

	.show {
		display: block;
	}

	.nav-BandeauHaut {
		display: none;
	}
	.sec-first h1{
		font-size: 2.5em;
	}
	.sec-first p{
		font-size: 1.2em;
	}
	.sec-pourquoi h2{
		font-size: 2.2em;
	}
	.domain-tools h2{
		font-size: 2.2em;
	}
}

@media screen and (min-width: 769px) {
	.hamburger {
		display: none;
	}

	.dropdown-content {
		display: none !important;
	}

	.nav-menuHaut {
		display: flex;
		flex-direction: row;
	}
	.nav-BandeauHaut{
		display: flex;
	}
}
/* ##### fin css bandeau haut ##### */