/************************************ BODY CONTAINER **************************************/
.page {	
	display:grid; /* definir un conteneur en grille */
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	grid-template-areas: "menu_container" "header_container" "logo_container" "erreur_container" "widget_container" "outil_container" "main_container" "footer_container";
	max-width: 1400px;
	min-width: 400px;
	width: auto;
	height: auto;
	padding-top: 90px;
	font-size:16px;
	font-family:'Helvetica', sans-serif;
	margin:auto; /* permet de centrer horizontalement le block */ 
	background-color: var(--white_color);
	color: var(--black_dark_color);
}

/************************************ MENU CONTAINER **************************************/
.page-menu {
	grid-area: menu_container;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
    top: 0;
	z-index: 20;
	max-width: 1400px;
	width: 100%;
	height:80px;
	padding: 10px;
	background-color: var(--primary_base_color);
}

.page-menu__selection {
	display: flex;
  	justify-content: center;
  	align-items: center;
	gap: 5px;
}

/************************************ HEADER CONTAINER ************************************/
.page-header {
	grid-area: header_container;
	overflow-x: hidden;
	margin-bottom: 10px;
	background-color: transparent;
}

.page-header__banner {
	width: 100%;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	perspective: 50vw;
}

.page-header__image {
	max-width: 1400px;
	width: 100%;
	height: auto;
	margin: auto;
}

.page-header__titre {
	max-width: 1400px;
	width: 100%;
	height: auto;
	position: absolute;
    top: 0;
    left: 0;
}

.page-header__titre--animated {
    animation: slideIn 3s ease-in-out;
    transform-origin: center center;
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%) scale(0.2) skewX(0deg);
        opacity: 0.2;
        filter: blur(10px);
    }

    80% {
        transform: translateX(10%) scale(0.8) skewX(-30deg);
        opacity: 1;
        filter: blur(2px);
    }

    100% {
        transform: translateX(0%) scale(1) skewX(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

/************************************ ERREUR CONTAINER ************************************/
.page-error {
    grid-area: erreur_container;
	display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 15px;
    gap: 10px;
    background-color: var(--error_color);
    color: var(--white_color);
    text-align: left;
    box-sizing: border-box;
}

.page-error__message {
    width: 100%;
    margin: 0 auto; /* centré horizontalement */
    padding: 10px 20px;
    font-size: 1.2rem;
    line-height: 1.5;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1); /* léger contraste sur le fond */
    color: var(--white_color);
}

/************************************ WIDGET CONTAINER ************************************/
.page-widget {
	grid-area: widget_container;
	display:flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
	background-color: transparent;
}

.page-widget__searchbar {
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-color: var(--grey_base_color);
	border-radius: 0px;
}

/************************************ OUTIL CONTAINER *************************************/
.page-tool {
	grid-area: outil_container;
	display:flex;
	flex-direction: row;
	justify-content: space-between; 
	width: 100%;
	margin-bottom: 10px;
	padding:5px;
	background-color: var(--black_dark_color);
}

.page-tool_form {
	display: flex;
	align-items: center;
	gap: 5px;
	padding : 5px;
	background-color: transparent;
	border: 1px solid var(--white_color);
	border-radius: 5px;
}

/*********************************** MAIN CONTAINER ***************************************/
.page-main {
	grid-area: main_container;
	display:grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	grid-template-areas: "section_container";
	width: 100%;
	height:auto;
	margin-bottom : 10px;
	background-color: transparent;
}

.page-main__aside {
	grid-area: aside_container;
	display: flex;
	flex-direction: column;
	background-color: var(--tertiary_base_color);
}

.page-main__section {
	grid-area: section_container;
	display: flex;
	flex-direction: column;
	/*row-gap: 10px; */
	background-color: white;
}

.page-main--aside {
	grid-template-columns: 1fr 2.5fr;
	grid-template-areas: "aside_container section_container";
	column-gap: 10px;
	row-gap: 10px;
}

/************************************ FOOTER CONTAINER ************************************/
.page-footer {
	grid-area: footer_container;
	display: flex;
	flex-direction: column;
	background-color: var(--primary_base_color);
	padding-bottom: 10px;
}

/************************************ MODAL CONTAINER *************************************/
.modal-overlay {
    display: none;
    flex-direction: row;
    align-items: center; /* Aligner verticalement les elements sur la ligne */
    justify-content: center;
    position: fixed;
    overflow: hidden;
    z-index: 40;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-overlay.is-active {
  display: flex;
}

/************************************ FORMULAIRE MODAL ************************************/
.modal-form, .confirm-dialog {
	overflow-y: auto;
    background-color: var(--white_color);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	animation: fadeIn 0.3s ease; /* Animation légère */
	max-height: 90vh;  /* limite la hauteur à 90% de l’écran */
	min-width: 300px;
	width: 60%;
	padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--black_dark_color);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal-form--small {
	max-width: 600px;
}

.modal-form__header {
    display: flex; /* Afficher les elements en ligne */
	flex-direction: row;
    align-items: center; /* Aligner verticalement les elements sur la ligne */
    justify-content: space-between; /* Répartir l'espace disponible entre les elements */
    padding: 10px;
	border: 1px solid var(--grey_dark_color);
	background-color: var(--grey_dark_color);
	margin-bottom: 5px;
}

.modal-form__header-actions {
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: center;
	background-color: transparent;
	gap: 5px;
}

.modal-form__header-title {
	font-size: 1.2rem;
	color: var(--white_color);
	width: 100%;
}

.modal-form__error {
    max-height: 0;           /* réduit à rien */
    opacity: 0;              /* invisible */
    overflow: hidden;        /* empêche le contenu de déborder */
    transition: max-height 0.5s ease, opacity 0.4s ease;
    color: var(--error_color);
    background: var(--error_light_color);
    border: 1px solid var(--error_color);
    font-size: 1rem;
    line-height: 1.5;
	margin-bottom: 0px;
}

/* déclenché par le javascript */
.modal-form__error.show {
    max-height: 500px; /* assez grand pour contenir ton message (tu peux ajuster) */
    opacity: 1;
    padding: 12px;
	margin-bottom: 5px;
}

.modal-form__content {
    display: flex;
    flex-direction: column;
    gap: 5px;
	background-color: var(--grey_light_color);
    border: 1px solid var(--grey_dark_color);
    padding: 10px;
}

/************************************ DIALOGUE MODAL ************************************/
.confirm-dialog {
    text-align: center;
    max-width: 400px;
}

.confirm-dialog__title {
	background-color: var(--grey_light_color);
	border-radius: 10px;
	padding: 10px;
}

.confirm-dialog__message {
	margin: 20px 10px;
}

.confirm-dialog__actions {
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: center;
	gap: 40px;
}

/************************************ USER MESSAGE ***************************************/
.user-message {
    position: fixed;
    z-index: 1000;
    display: none; 
    opacity: 0; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--grey_light_color);
    color: var(--white_color);
    transition: opacity 0.5s ease-in-out;
}

.user-message--success {
    background-color: var(--success_color)
}

.user-message--error {
    background-color: var(--error_color);
}

/********************************** RESPONSIVE DESIGN *************************************/
/*	xs->568px sm->768px md->992px lg->1024px xl->1280px */
@media(max-width:1024px) {
	.page {	
		max-width: 1024px;
		font-size:14px;
	}

	.page-main--aside {
		grid-template-rows: auto auto;
		grid-template-columns: 1fr;
		grid-template-areas: "section_container" "aside_container";
	}
}