/* =================================================================== */
/* 🎨 VARIABLES & THEME                                              */
/* =================================================================== */

:root {
    /* Couleurs Primaires */
    --color-1: #c81b1f;
    
    /* Couleurs Secondaires */
    --color-2: #797979;
    
		/* Couleurs Secondaires */
    --color-3: #f2f2f2;
    
    /* Typography */
    --font-family-text: 'fonttexte', sans-serif;
    --font-family-titre: 'fonttitre', sans-serif;
    
    --radius-std: 10px;
    
}

/* =================================================================== */
/* BASE                                                   */
/* =================================================================== */


@font-face {  font-family: "icons";  src: url("./icons.eot");  src: url("./icons.eot?#iefix") format("embedded-opentype"),       url("./icons.woff2") format("woff2"),       url("./icons.woff") format("woff"),       url("./icons.ttf") format("truetype"),       url("./icons.svg#icons") format("svg");  font-weight: normal;  font-style: normal;}
@font-face {    font-family: 'fonttexte';    src: url('fonttexte.eot');    src: url('fonttexte.eot?#iefix') format('embedded-opentype'),        url('fonttexte.woff2') format('woff2'),        url('fonttexte.woff') format('woff'),        url('fonttexte.ttf') format('truetype'),        url('fonttexte.svg#fontt') format('svg');    font-weight: normal;    font-style: normal;    }
@font-face {    font-family: 'fonttitre';    src: url('fonttitre.eot');    src: url('fonttitre.eot?#iefix') format('embedded-opentype'),        url('fonttitre.woff2') format('woff2'),        url('fonttitre.woff') format('woff'),        url('fonttitre.ttf') format('truetype'),        url('fonttitre.svg#fontt') format('svg');    font-weight: normal;    font-style: normal;    }

* {    margin: 0;    padding: 0;    box-sizing: border-box;}
html {    font-size: 16px;    scroll-behavior: smooth; background-image: url('../view/global/background/background.svg');
  background-attachment: fixed;  background-position: right;  background-repeat: no-repeat;  background-size: 30%;  margin: 0;}
body {    font-family: var(--font-family-text);    font-size: var(--font-size-base);    line-height: 1.5;    color: var(--color-gray-900);    background-color: var(--color-gray-50);    overflow-x: hidden;}
html, body {    width: 100%;    height: 100%;}
img { max-width: 100%; max-height: 100%; width:100%;height:auto;}

.athide{display:none;}

.t_g, h1, h2, h3, .mbut, .fc button, .fc table, button, ::placeholder{text-align:left;font-family:var(--font-family-text);	color:black;font-size:20px;line-height:25px;}
h1, h2, h3, h1.t_g, h2.t_g, h3.t_g{font-family:var(--font-family-titre);font-size:39px;margin:0;position:relative;line-height:45px;font-weight:100}
h1 bold, h2 bold, h3 bold, h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b{font-weight:lighter;color:var(--color-1)}
input[type="text"], input[type="email"],input[type="phone"], input[type="password"], input[type="number"], input[type="date"],  textarea, select { font-family:var(--font-family-text),Times,serif; font-size: 20px; line-height:40px; width: 100%; background-color: var(--color-3); 
	padding: 10px 12px;    border: 1px solid #ddd;    border-radius: 4px;    transition: border-color 0.2s;	}
select{padding: 22px 12px;}
button{font-family:var(--font-family-text),Times,serif; color:white;background-color:var(--color-1);margin: 20px 0 0 0;border-radius:10px;padding:15px 40px;text-align:center;font-size:20px;transition: all 0.5s ease 0s;cursor:pointer;width:initial;border:1px solid var(--color-1);}
button:hover{background:white;color:black;}
::placeholder {font-style:italic;color: #aaa;}
.el-pointer{cursor:pointer}

[class^="icons-"]:before, [class*=" icons-"]:before{  text-align:center;    display: inline-block;  font-family: icons !important; vertical-align:middle;   font-style: normal;    font-weight: normal !important;    font-variant: normal;    text-transform: none;    line-height: 1;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}
[class^="icons-"] > div, [class*=" icons-"]>div{display:inline-block;vertical-align:middle;}


.icons-rowbot:before {    content: "\f109";}
.icons-voir:before {    content: "\f10b";}
.icons-modifier:before {    content: "\f10a";}
.icons-supprimer:before {    content: "\f10c";}
.icons-back:before {    content: "\f107";}
.icons-photo:before {    content: "\f105";}
.icons-voir:before, .icons-modifier:before, .icons-supprimer:before, .icons-back:before{font-size:25px; cursor:pointer;transition: all 0.5s ease 0s;}
.icons-voir:hover:before, .icons-modifier:hover:before, .icons-supprimer:hover:before, .icons-back:hover:before{color:var(--color-1)}
.tred{color:var(--color-1);}
.tgray{color:var(--color-2);}


.bhead, .bcont {width:60%;display:block;margin:auto;text-align:left;}
.bhead{margin-bottom:50px}
.bheadmenu{width:100%;padding:1% 15%;border-bottom: 3px solid var(--color-1);margin-bottom:50px;display:flex;    align-items: center;justify-content: space-between;}

/* =================================================================== */
/* LAYOUT PRINCIPAL                                                 */
/* =================================================================== */
#global_container{position:relative;height:100%;}
#div_container_5_fr{width:100%;padding-bottom:50px}
.bcontcenter{display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  margin: 0;}


.logoHeader{width:25%;vertical-align:middle;}
.logoHeader>a{width:100%;}
.logoHeader img{width:40%}
.actions-section-header{width:25%;text-align:right}
.btn--deconnexion{border:none;padding:5px;background:none;color:var(--color-1);margin:0 0 10px 0}
.abtn--header{width:40%;}
.btn--header{border:1px solid var(--color-2);background:var(--color-3);border-radius:7px;font-size:25px;font-weight:bold;cursor:pointer;padding:5px ; width:100%; aspect-ratio:1;text-align:center;
	display: flex;    flex-direction: column;    justify-content: center;}
.btn--header:before{display:block;margin-bottom:10px;font-size:40px;}



/*** BRIKS Admin ***/
.brikadmin{text-align:center;}
.briksadmin{display:flex;flex-direction:row; flex-wrap: wrap;align-items: stretch; justify-content: center;gap: 40px;}
.connected .brikadmin, .lbrikadmin, .brikadminTi{width:22%;flex-basis:22%; padding:1%;box-sizing:border-box; border:2px solid var(--color-1);  box-sizing: border-box;    display: flex;    flex-direction: column;    justify-content: start;border-radius:var(--radius-std)}
.brikadminTi{width:100%;flex-basis:100%;border:none;}
.connected .brikadmin, .lbrikadmin{align-items:center;transition: all 0.5s ease 0s;opacity:0.3}
.brikadmin:hover, .lbrikadmin:hover{border-color:var(--color-2);opacity:1}
.imgbrikadmin {width:70%;aspect-ratio:1;margin-bottom:20px;}
.brikadmin h2, .brikadmin h3, .brikadmin h2.t_g,.brikadmin h3.t_g {font-size:28px;flex-grow:1;text-align:center}



.search-title{display:flex;    align-items: center;}
.ico-filter{transition: all 0.5s ease 0s;margin-right:10px}
.ico-filter:before{width:5%;vertical-align:middle;font-size:35px;color:var(--color-1)}
.search-title>div, .filter-label>div{font-size:28px;display:inline-block;vertical-align:middle;padding:0 15px 0 0}
.search-title:after, .filter-label:after{flex-grow: 1;vertical-align:middle;height:3px;border-bottom:3px solid var(--color-1);content:"";display:inline-block;}
.filter-label:after{border-bottom:1px solid var(--color-2);}
.filter-label{margin:30px 0 20px 0;display:flex;    align-items: center;}

.filter-group-inputs, .edit-group-inputs, .view-group-inputs{display:flex;flex-wrap: wrap;    justify-content: space-between;}
.filter-input-half, .edit-input-half, .view-input-half, .details-view-input-half{max-width:48%;flex-basis:48%;margin:10px 0}
.filter-input-full, .edit-input-full, .view-input-full, .details-view-input-full{max-width:100%;flex-basis:100%;margin:10px 0}
.details-view-input-half, .details-view-input-full{margin:0}
.details-view-input-half input, .details-view-input-full input{padding:5px;width:60%;}

.flexDisplay{display:flex;flex-wrap: wrap;  align-items: center;   }
.checkbox-statut{padding:10px 0}
.checkbox-statut .checkbox-item{padding:5px 20px 5px 0}
.checkbox-statut .checkbox-item .label-text{padding-left:10px;font-size:22px}

.filter-group-button{text-align:right}
button[type="button"].btn--search, button[type="button"].btn--outline, .btn-cancel-signature, .btn-clear-signature, .btn-signature {background-color:var(--color-2);border:1px solid var(--color-2)}
button[type="button"].btn--search:hover, button[type="button"].btn--outline:hover, .btn-cancel-signature:hover, .btn-clear-signature:hover, .btn-signature:hover{background-color:var(--color-3); color:black;}

.btn-signature {background-color:var(--color-3);border:1px solid var(--color-3);color:black;}
.btn-signature:hover{border-color:var(--color-2); }



.search-filters{display:none;}


.bons-table{width:100%;border-spacing: 0;}
.bons-table thead{background:var(--color-2);}
.bons-table th{padding:7px 0;color:white;font-family:var(--font-family-titre);font-weight:lighter}
.bons-table td{padding:10px 3px;}
.bons-table tbody tr:nth-child(odd){background:var(--color-3)}
.bons-table select {border:none;}
.bons-table tbody tr:nth-child(odd) select  {background:white}
.badge-statut, .statut-badge{text-align:center;border-radius:3px;color:white;font-weight:bold;width:80%;margin:auto;}
.statut-badge{display:inline-block;width:initial;font-size:22px;padding:7px;}
.bon-col1, .bon-col2, .bon-col3, .bon-col4, .bon-col5 , .bon-col6, .bon-col7{text-align:center}
.bon-col1{width:6%}
.bon-col2{width:18%}
.bon-col3{width:13%}
.bon-col4{width:15%}
.bon-col5{width:13.5%}
.bon-col6{width:13.5%}
.bon-col7{width:10%}
.bon-col8{width:11%}
.actions-cell button{}
.icons-voir, .icons-modifier, .icons-supprimer{margin:4px}
.bons-table .statut-cell select{padding:5px}


/*** LISTE MACHINE ***/
.machine-col1, .machine-col2, .machine-col3, .machine-col4{text-align:center;width:25%}




/*** BON FORM ***/
.bon-form, .bon-details {    background: white;    border-radius: 8px;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);    margin: 20px 0;}
.form-section, .bon-details-card {    padding:15px 30px; }


.form-actions, .detail-actions {    padding: 30px;    text-align: center;    background: var(--color-3);   border-radius: 0 0 8px 8px;}



/*** VUE DU BON ***/
.detail-card--statut{text-align:right}
.detail-card-label{font-style:italic;margin-right:5px}
.detail-field__value{font-weight:bold;}
.detail-img-machine{width:100%;}
.detail-label-passage{font-size:25px;text-align:center;font-weight:bold;margin-bottom:25px;}
.detail-title-location{font-size:25px;font-weight:bold;margin-bottom:10px;color:var(--color-1)}

/* Galerie de photos */
.photos-grid {display: grid;	grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));	gap: 10px;	margin-bottom: 15px;}
.photo-item, .btn-add-photo {	position: relative;	aspect-ratio: 1;	border-radius: 7px;	overflow: hidden;	background: var(--color-3);	cursor: pointer;	transition: transform 0.3s ease-out, opacity 0.3s ease-out;}
.btn-add-photo{width:18%;border:1px solid var(--color-1);color:var(--color-1);display:inline-flex;flex-direction:column;justify-content: center;align-items: center;margin:30px auto;aspect-ratio:1.5;transition: all 0.5s ease 0s;}
.btn-add-photo:before{color:var(--color-1);font-size:45px;transition: all 0.5s ease 0s;}
.btn-add-photo:hover{background:var(--color-1);color:white;}
.btn-add-photo:hover:before{color:white;}
.photo-item:hover {	transform: scale(1.05);}
.photo-item img {	width: 100%;	height: 100%;	object-fit: cover;border-radius:7px}
.photo-overlay {	position: absolute;	top: 0;	left: 0;	right: 0;	bottom: 0;	background: rgba(0, 0, 0, 0.6);	display: flex;	align-items: center;	justify-content: center;
	gap: 10px;	opacity: 0;	transition: transform 0.3s ease-out, opacity 0.3s ease-out;border-radius:7px}
.photo-item:hover .photo-overlay {	opacity: 1;}
.btn-icon {background: var(--color-3);	border: none;	width: 30px;	height: 30px;	display: flex;	align-items: center;	justify-content: center;border-radius:7px;padding:3px;color:black}
	cursor: pointer;	font-size: 30px;	transition: transform 0.3s ease-out, opacity 0.3s ease-out;cursor:pointer}
.btn-icon:hover {	transform: scale(1.1);}
.photo-counter{margin-top:30px;text-align:center;font-weight:bold}
.detail-bon-btn-photo{text-align:center;display:block;}

.detail-bon-signature{width:70%;margin:auto;}
.signature-preview{border:1px solid var(--color-2);background: var(--color-3);border-radius:7px;}
.signature-preview img{border-radius:7px;}
.signature-modal {	display: none;	position: fixed;	top: 0;	left: 0;	right: 0;	bottom: 0;	z-index: 1000;	align-items: center;	justify-content: center;}
.signature-modal.active {	display: flex;}
.signature-modal__overlay {	position: absolute;	top: 0;	left: 0;	right: 0;	bottom: 0;	background: rgba(0, 0, 0, 0.5);	cursor: pointer;}
.signature-modal__content {	position: relative;	z-index: 1001;	max-width: 600px;	margin: var(--space-16);	width: 100%;}

.lightbox-comment, .lightbox-date{display:none;}
.lightbox img{width:auto;height:auto}
.lightbox-close{padding: 0;    margin: 0;    background: #000000 !important;    width: 30px;    height: 30px;    font-size: 20px !important;    border-radius: 100px;    font-weight: bold;    text-align: center;    color: white !important;}
/***** LOGIN ******/
.login-container{width:25%}


.mtop20{margin-top:20px;}

/* ===================================
   Notifications Toast
   =================================== */

.gg-notification {    position: fixed;    top: 20px;    right: 20px;    padding: 16px 24px;    border-radius: 8px;    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);    z-index: 10000;    font-size: 14px;
    font-weight: 500;    max-width: 400px;    display: flex;    align-items: center;    gap: 12px;    color: white;        /* Animation d'entrée */
    transform: translateX(400px);    opacity: 0;    transition: transform 0.3s ease-out, opacity 0.3s ease-out;}
.gg-notification--visible {    transform: translateX(0);    opacity: 1;}
.gg-notification--hiding {    transform: translateX(400px);    opacity: 0;}
.gg-notification--success {    background-color: #10B981;}
.gg-notification--error {    background-color: #EF4444;}
.gg-notification--warning {    background-color: #F59E0B;}
.gg-notification--info {    background-color: #3B82F6;}
.gg-notification__icon {    font-size: 20px;    flex-shrink: 0;}
.gg-notification__message {    flex: 1;}
.gg-notification:nth-child(n+2) {    top: calc(20px + (80px * (var(--notification-index, 0))));}


/* ============================================================================
   AUTOCOMPLETE STYLES
   Styles pour le composant autocomplete de GG_db2view.js
   ============================================================================ */

.autocomplete-wrapper {    position: relative;    width: 100%;}
.autocomplete-input {    width: 100%;}
.autocomplete-results {    position: absolute;    top: 100%;   left: 0;    right: 0;    max-height: 300px;    overflow-y: auto;    background: white;    border: 1px solid #ddd;
    border-top: none;    border-radius: 0 0 4px 4px;   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    z-index: 1000;    margin: 0;    padding: 0;    list-style: none;}
.autocomplete-item {    padding: 10px 15px;    cursor: pointer;    transition: background-color 0.2s;    border-bottom: 1px solid #f0f0f0;}
.autocomplete-item:last-child {    border-bottom: none;}
.autocomplete-item:hover {    background-color: #f5f5f5;}
.autocomplete-item:active {    background-color: #e8e8e8;}
.autocomplete-results::-webkit-scrollbar {    width: 8px;}
.autocomplete-results::-webkit-scrollbar-track {    background: #f1f1f1;}
.autocomplete-results::-webkit-scrollbar-thumb {    background: #888;   border-radius: 4px;}
.autocomplete-results::-webkit-scrollbar-thumb:hover {    background: #555;}
.dropdown-item{display:block;padding:15px 5px}



.mtop100{margin-top:100px;}
.mtop20{margin-top:20px;}
.mbot20{margin-bottom:20px;}
.mtop50{margin-top:50px;}
.mtop80{margin-top:80px;}
.mbot50{margin-bottom:50px;}
.bmb50{margin:50px auto}
.bmb50-20{margin:50px auto 20px auto}
.bmb20{margin:20px auto}



/*** STYLE PDF ***/





@media 	only screen and (max-width : 1700px) {
	:root {
	
	}

	
	.bhead, .bcont { width: 65%;}
	.bheadmenu {  padding: 1% 14%;}

}


@media 	only screen and (max-width : 1600px) {
	:root {
	
	}

	
	.bhead, .bcont { width: 70%;}
	.bheadmenu {  padding: 1% 13%;}

}


@media 	only screen and (max-width : 1500px) {
	:root {
	
	}

	
	.bhead, .bcont { width: 75%;}
	.bheadmenu {  padding: 1% 12%;}

}

@media 	only screen and (max-width : 1400px) {
	:root {
	
	}

	
	.bhead, .bcont { width: 80%;}
	.bheadmenu {  padding: 1% 11%;}

}

@media 	only screen and (max-width : 1300px) {
	:root {
	
	}

	
	.bhead, .bcont { width: 85%;}
	.bheadmenu {  padding: 1% 10%;}

}

@media 	only screen and (max-width : 1200px) {
	:root {
	
	}

	
	.bhead, .bcont { width: 90%;}
	.bheadmenu {  padding: 1% 9%;}

}