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

:root {
    /* Couleurs Primaires */
    --primary-hsl: 358.61 76.21% 44.51%;
    
    
    /* Couleurs Secondaires */
    --secondary-hsl: 0 0% 47.45%;
    --muted-foreground-hsl: 0 0% 47.45%;
    
		/* Couleurs Secondaires */
    --color-3: 0 0% 94.9%;
    
    
    
     
     --primary-hsl-foreground: 0 0% 100%;
     --font-size-base : 16px;
     --color-gray-900 : 0, 0%, 94.9%;
     --color-gray-50 : 0, 0%, 94.9%;
     
     
     
    
    /* Typography */
    --font-family-text: 'fonttexte', sans-serif;
    --font-family-titre: 'fonttitre', sans-serif;
    
    --radius-std: 10px;
    --radius-card:15px;
    --radius-section : 30px;
    --radius-input:15px;
    --radius-btn:9999px;
    --pad-content:10px 15%;
    
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    
    
    --background: #fbfbfb;
    --foreground: #1f1f1f;
    --foreground-hsl:0, 0%, 12%;
    --surface: #fff;
    --brand: #c81b1f;
    --brand-foreground: #fff;
    --brand-glow: #ec533c;
    --card: oklch(100% 0 0);
    --card-foreground: oklch(12.9% .042 264.695);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(12.9% .042 264.695);
    --primary: #c81b1f;
    --primary-foreground: #fff;
    --primary-hsl-glow: 0 0% 94.9%;
    --secondary: #f2f2f2;
    --secondary-foreground: #1f1f1f;
    --muted: #f2f2f2;
    --muted-foreground: #797979;
    --accent: #c81b1f14;
    --accent-foreground: #c81b1f;
    --destructive: #c81b1f;
    --destructive-foreground: #fff;
    --border: #e6e6e6;
    --input: #e6e6e6;
    --ring: #c81b1f;
    --chart-1: oklch(64.6% .222 41.116);
    --chart-2: oklch(60% .118 184.704);
    --chart-3: oklch(39.8% .07 227.392);
    --chart-4: oklch(82.8% .189 84.429);
    --chart-5: oklch(76.9% .188 70.08);
    --sidebar: oklch(98.4% .003 247.858);
    --sidebar-foreground: oklch(12.9% .042 264.695);
    --sidebar-primary: oklch(20.8% .042 265.755);
    --sidebar-primary-foreground: oklch(98.4% .003 247.858);
    --sidebar-accent: oklch(96.8% .007 247.896);
    --sidebar-accent-foreground: oklch(20.8% .042 265.755);
    --sidebar-border: oklch(92.9% .013 255.508);
    --sidebar-ring: oklch(70.4% .04 256.788);
    
    --shadow-card: 0 1px 2px #0000000a, 0 8px 24px -12px #c51b212e;
    
    
    --svg-desactivate:url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap-off-icon lucide-zap-off"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"></path><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"></path><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"></path><path d="m2 2 20 20"></path></svg>');
    --svg-activate:url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap-icon lucide-zap"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>');
    
}

/* =================================================================== */
/* 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: '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#fonttexte') 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.1;    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{font-family:var(--font-family-text);	    color: var(--foreground);font-size:var(--font-size-base);line-height:1.2;}
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:hsl(var(--primary-hsl))}
input[type="text"], input[type="email"],input[type="phone"], input[type="password"], input[type="number"], input[type="date"], input[type="time"],  textarea, select { font-family:var(--font-family-text),Times,serif; font-size: var(--font-size-base); line-height:calc( var(--font-size-base) + 8px); 
	    transition-duration: .2s ;   transition-property: all;transition-timing-function:cubic-bezier(.4, 0, .2, 1);box-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a ;    color: var(--foreground);
	    padding:10px 15px;;background-color: var(--surface); border:1px solid var(--border);width: 100%;border-radius: var(--radius-input);
	    }
input:focus{box-shadow: 0 0 0 4px color-mix(in oklab, #c81b1f 15%, transparent);    border-color: var(--primary);}
.error {box-shadow: 0 0 0 4px color-mix(in oklab, #c81b1f 15%, transparent)!important;    border-color: var(--primary)!important;}
.error::placeholder{color:var(--primary)!important;}
/*input[required], select[required] {border: 1px solid hsl(var(--primary-hsl));}
input[required]::placeholder{color:hsl(var(--primary-hsl));}*/
select{padding: 12px;}
button, .btnE, .btn-cancel, .btn {text-align:center;font-family:var(--font-family-text),Times,serif;     transition-property: all;transition-timing-function: var(--default-transition-timing-function);transition-duration: var(--default-transition-duration);
	padding:10px 40px;  border-radius:var(--radius-btn); font-weight:700; box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;color: var(--muted-foreground);;border: 1px solid var(--border);
	background-color: var(--surface);cursor:pointer;font-size:14px;}
.btn--primary{color:white;background:var(--primary);}
.btn--header{color:var(--foreground); border-color:var(--foreground)}
button:hover, .btnE:hover, .btn:hover{color: var(--primary);border-color: color-mix(in oklab, var(--primary) 40%, transparent);}
.btn--primary:hover{background:white;color:var(--primary);}
.btn--deconnexion{color: var(--primary);    background-color: color-mix(in oklab, var(--primary) 5%, transparent);border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);}
.btn--deconnexion:hover{color: var(--primary-foreground);        background-color: var(--primary);}
.modal-close{padding:5px;    width: 40px;    height: 40px;    text-align: center;}
.btn-signature{margin-top:20px;}

::placeholder {color: #aaa;font-size:calc( var(--font-size-base) - 2px);}
.el-pointer{cursor:pointer}
.div-input{position:relative;}
.picto-input{position: absolute;    top: 45%; left:2%;    width: 4%; aspect-ratio:1; color: hsl(var(--muted-foreground-hsl));     transform: translate(0, -25%) ;}
.div-input input{padding-left:7%}
.text-center{text-align:center}

.tred{color:hsl(var(--primary-hsl));}
.tgray{color:hsl(var(--secondary-hsl));}

[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-saisir:before {    content: "\f104";}

.icons-desactivateb, .icons-activateb{display: inline-flex;    align-items: center;    gap: 10px;}
.icons-desactivateb:before, .icons-activateb:before{content:'';display:block;}
.icons-desactivate, .icons-desactivateb:before{-webkit-mask: var(--svg-desactivate);  mask: var(--svg-desactivate); mask-size: contain; 	background-color:var(--muted-foreground);width:20px;height:20px;}
.icons-activate, .icons-activateb:before{-webkit-mask: var(--svg-activate);  mask: var(--svg-activate); mask-size: contain; 	background-color:var(--muted-foreground);width:20px;height:20px;} 

.icons-voir, .icons-modifier, .icons-supprimer, .icons-saisir, .icon-box, .icons-desactivateb, .icons-activateb{vertical-align:middle;margin:2px; color: var(--muted-foreground);background-color: var(--background);border:1px solid var(--border);
	border-radius:9999px;padding:7px;}
.icons-voir:before, .icons-modifier:before, .icons-supprimer:before, .icons-back:before, .icons-saisir:before, .icon-box:before, .icons-desactivateb:before, .icons-activateb:before{font-size:18px; cursor:pointer;    vertical-align: middle;transition: all 0.5s ease 0s;}
.icons-voir:hover:before, .icons-modifier:hover:before, .icons-supprimer:hover:before, .icons-back:hover:before, .icons-saisir:hover:before, .icon-box:hover:before{color:hsl(var(--primary-hsl))}
.icons-desactivateb:hover:before, .icons-activateb:hover:before{background-color:hsl(var(--primary-hsl))}



.bcont {width:100%;display:block;margin:auto;text-align:left;padding:var(--pad-content);}
.bheadmenu{width:100%;padding:var(--pad-content);border-bottom: 1px solid var(--border);margin-bottom:50px;display:flex;    align-items: center;justify-content: space-between;}
.bhlogo{display:flex;    align-items: center; gap:20px;}
.title-hearder{color: hsl(var(--muted-foreground-hsl));}
.title-hearder b, .title-hearder bold, .title-hearder strong{color:black}
.bhbutton{}

/* =================================================================== */
/* LAYOUT PRINCIPAL                                                 */
/* =================================================================== */
#global_container{position:relative;height:100%;}
.container{padding:0}
#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:60px;vertical-align:middle;}
.logoHeader>a{width:100%;}
.actions-section-header{text-align:right;display: flex; align-items: center;  justify-content: space-between;}


/*** BRIKS Admin ***/
.brikadminTi{width:100%;flex-basis:100%;border:none;    justify-content: space-between;align-items: flex-end;display: flex; gap:30px;}
.brikadminTiline, .search-title:after, .filter-label:after{        display: block;flex: 1;height: 1px;    background-image:linear-gradient(to right in oklab, color-mix(in oklab, #c81b1f 40%, transparent) 0%, #e6e6e6 50%, transparent 100%)}
.tibrikadmin1{text-transform: uppercase;color: var(--primary);letter-spacing: 4px; font-weight:900;}
.tibrikadmin2{font-family:var(--font-family-titre);    color: var(--foreground);}

.briksadmin{grid-template-columns: repeat(6, minmax(0, 1fr));gap:15px;display: grid;}
.connected .brikadmin, .lbrikadmin{    box-shadow:var(--shadow-card);padding:15px;border:1px solid var(--border); border-radius:var(--radius-card);    display: flex;flex-direction: column; 
	justify-content: space-between;overflow: hidden;position: relative;transition-duration: .5s;transition-property: all;aspect-ratio:1.2}
.lbrikadmin .brikadmin{display: flex;flex-direction: column; 	justify-content: space-between;height: 100%;}
.shadowbrikadmin{transition-duration: .5s;transition-property: all;filter:blur(40px);background-color: color-mix(in oklab, var(--primary) 0%, transparent);border-radius:9999px;
	width:40%;aspect-ratio:1;position: absolute;top:-10%;right:-10%;pointer-events: none;}
.z1brikadmin{    display: flex;    align-items: flex-start;justify-content: space-between;}
.bicobrikadminz1{background-color: var(--accent); border-radius:var(--radius-std);transition-duration: .3s;transition-property: all;    justify-content: center;align-items: center;display: flex;
	width:45px;height:45px;padding:10px;}
.icobrikadminz1{width:20px;height:20px; color:var(--primary);transition-duration: .3s;transition-property: all; }
.ti1brikadmin{ backdrop-filter:blur(8px);text-transform: uppercase;color: var(--muted-foreground);letter-spacing:3px; padding:5px 10px;border:1px solid var(--border); border-radius:var(--radius-btn);
	font-weight:900; }
.ti2brikadmin{color: var(--foreground); font-weight:900;}
.lineti1brikadmin{    background-color: var(--primary);width:10%;    transition-duration: .5s;transition-property: all;transition-timing-function:cubic-bezier(.4, 0, .2, 1);height:2px;display: block;}

.lbrikadmin:hover {box-shadow: 0 2px 4px #0000000f, 0 24px 48px -16px #c51b2159; transform:translateY(-6px) rotate(0)}
.lbrikadmin:hover .shadowbrikadmin{background-color: color-mix(in oklab, var(--primary) 30%, transparent);}
.lbrikadmin:hover .bicobrikadminz1{box-shadow:0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);color: var(--primary-foreground);background-color: var(--primary);}
.lbrikadmin:hover .icobrikadminz1{color: var(--primary-foreground);}
.lbrikadmin:hover .lineti1brikadmin{width:100%;}



/*** Vue listing / search ***/
.filter-group{padding: 0 15px;}
.search-title{display:flex;    align-items: center;gap:20px;}
.ico-filter{transition: all 0.5s ease 0s;margin-right:10px}
.ico-filter:before{width:5%;vertical-align:middle;font-size:35px;color:hsl(var(--primary-hsl))}
.search-title>div, .filter-label>div{font-size:19px;display:inline-block;vertical-align:middle;font-weight:900}
.search-title:after, .filter-label:after{flex-grow: 1;vertical-align:middle;content:"";display:inline-block;}
.filter-label:after{border-bottom:1px solid hsl(var(--secondary-hsl));}
.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-quart{max-width:23%;flex-basis:23%;margin:10px 0}
.details-view-input-3quart{max-width:73%;flex-basis:73%;margin:10px 0}
.details-view-input-2quart{max-width:46%;flex-basis:46%;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-cancel, .btn-clear-signature, .btn-signature {background-color:hsl(var(--secondary-hsl));border:1px solid hsl(var(--secondary-hsl))}
button[type="button"].btn--search:hover, button[type="button"].btn--outline:hover, .btn-cancel-signature:hover, .btn-cancel:hover, .btn-clear-signature:hover, .btn-signature:hover{background-color:hsl(var(--color-3)); color:black;}*/

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



.search-filters{display:none;}


.sort-icon{color:var(--primary)}
.bons-table{width:100%;border-spacing: 0;}
.bons-table thead{background-image:linear-gradient(to right in oklab, color-mix(in oklab, #1f1f1f 4%, transparent) 0%, color-mix(in oklab, #1f1f1f 6%, transparent) 50%, color-mix(in oklab, #1f1f1f 4%, transparent) 100%);}
.bons-table th{padding:15px 0;    color: var(--muted-foreground);font-size:13px;    text-transform: uppercase;letter-spacing:2px}
.bons-table td {border-bottom:1px solid var(--border);}
.bons-table tr {animation-delay: .2s;    transition-duration: .2s;transition-property:all;transition-timing-function:cubic-bezier(.4, 0, .2, 1)}
.bons-table tr:not(:first-child):hover{background-color: color-mix(in oklab, var(--accent) 60%, transparent);}
.bons-table td{padding:15px 3px;font-size:14px;}
/*.bons-table tbody tr:nth-child(odd){background:hsl(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:9999px;padding:5px 15px;color:white;background:var(--foreground)}
.statut-badge{display:inline-block;width:initial;font-size:20px;padding:10px 20px;}
.bon-coladm1, .bon-coladm2, .bon-coladm3, .bon-coladm4, .bon-coladm5 , .bon-coladm6, .bon-coladm7, .bon-coladm8,
.bon-colcha1, .bon-colcha2, .bon-colcha3, .bon-colcha4, .bon-colcha5 , .bon-colcha6, .bon-colcha7, .bon-colcha8,
.bon-colord1, .bon-colord2, .bon-colord3, .bon-colord4, .bon-colord5 , .bon-colord6, .bon-colord7, .bon-colord8{text-align:center}
.bon-coladm1{width:0}
.bon-colcha1{width:6%}
.bon-colord1{width:7%}

.bon-coladm2{width:19%}
.bon-colcha2{width:18%}
.bon-colord2{width:21%}

.bon-coladm3{width:14%}
.bon-colcha3{width:13%}
.bon-colord3{width:16%}

.bon-coladm4{width:16%}
.bon-colcha4{width:15%}
.bon-colord4{width:16%}

.bon-coladm5{width:14.5%}
.bon-colcha5{width:13.5%}
.bon-colord5{width:14.5%}

.bon-coladm6{width:14.5%}
.bon-colcha6{width:13.5%}
.bon-colord6{width:14.5%}

.bon-coladm7{width:11%}
.bon-colcha7{width:10%}
.bon-colord7{width:17%}

.bon-coladm8{width:11%}
.bon-colcha8{width:11%}
.bon-colord8{width:0}

.actions-cell button{}
.bons-table .statut-cell select{padding:5px;    text-align: center;}

.bmachine-cell{border: 1px solid var(--border);border-radius:9999px;padding:5px 10px;background-color: var(--background);font-size:12px;letter-spacing:2px;color:var(--muted-foreground)}
.color-line-archive1:hover, .color-line-archive1{background-color:var(--muted-foreground)!important}
.color-line-archive1:hover, .color-line-archive1{color:white}

/*** interventions ***/
.radio:has(input:checked){border: 1px solid var(--primary); color: var(--primary);}

.cloture-grid {	display: grid;	grid-template-columns: 1fr 1fr;	gap: 16px;	align-items: start;}
.cloture-col-left,.cloture-col-right {	display: flex;	flex-direction: column;	gap: 12px;}
.cloture-col-right .signature-card {	flex: 1;}
.input-radio-inter{display:flex;gap:8px; justify-content: space-around;}


/*** LISTE MACHINE ***/
.machine-col1, .machine-col2, .machine-col5, .machine-col7{text-align:center;width:17%}
.machine-col3, .machine-col4, .machine-col6, .machine-col8{text-align:center;width:8%}
.machineStatus0{background:var(--foreground);}
.machineStatus0 td {color:var(--background);}
.machineStatus0:hover{background-color:var(--foreground)!important;}


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

.form-section, .filter-section, .result-search, .detail-section {padding:20px;animation-delay: .1s;backdrop-filter:blur(24px);box-shadow: 0 1px 2px #0000000a, 0 8px 24px -12px #c51b212e;
	        background-color:color-mix(in oklab, var(--surface) 80%, transparent);border: 1px solid var(--border);    border-radius:var(--radius-section);    animation: .5s cubic-bezier(.22, 1, .36, 1) both fade-up;
	        margin-bottom:30px;position:relative;z-index:10}
.zIndex100 {z-index:100}
.zIndex200 {z-index:200}
.result-search {padding:20px 0}

.form-actions, .detail-actions {    padding: 30px 0;    text-align: right;    }
.div-search-title-ico{position:relative;display: flex;width:45px;height:45px;align-items: center;    justify-content: center;}
.search-title-ico-z1{    box-shadow:0 10px 15px -3px color-mix(in oklab, color-mix(in oklab, #c81b1f 30%, transparent) 100%, transparent), 0 4px 6px -4px color-mix(in oklab, color-mix(in oklab, #c81b1f 30%, transparent) 100%, transparent);
	border-radius:var(--radius-std);    rotate: 45deg;inset:0;position: absolute;border:2px solid var(--primary)}
.search-title-ico{color:var(--primary);width:25px;height:25px;}
.label-b-input{ color: var(--muted-foreground);text-transform: uppercase;letter-spacing:3px;margin-bottom:10px;font-weight:900;font-size:12px;}

/*** 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:hsl(var(--primary-hsl))}
.signature-card{text-align:center}



/* 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: hsl(var(--color-3));	cursor: pointer;	transition: transform 0.3s ease-out, opacity 0.3s ease-out;}
.btn-add-photo{border-radius:9999px; width:30%;border:1px solid hsl(var(--primary-hsl));color:hsl(var(--primary-hsl));display:inline-flex;flex-direction:row;gap:20px;justify-content: center;align-items: center;margin:30px auto;aspect-ratio:auto;transition: all 0.5s ease 0s;}
.btn-add-photo:before{color:hsl(var(--primary-hsl));font-size:45px;transition: all 0.5s ease 0s;}
.btn-add-photo:hover{background:hsl(var(--primary-hsl));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: hsl(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 hsl(var(--secondary-hsl));background: white;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;}





/*** VUE DU BON POUR PRINT***/
.detail-print--statut{text-align:center;padding:15px;margin-bottom:15px;background:hsl(var(--secondary-hsl));color:white;font-weight:bold;font-size:25px;}
.logoPrint{width:100%;}
.detail-print--control{text-align:center;margin:15px 0;border-top:3px solid hsl(var(--secondary-hsl));padding-top:25px;}
.title-print-control{font-size:35px;font-family:var(--font-family-titre);}
.detail-img-machine-print{display:block;width:70%;margin:auto;}
.mode-print .photos-grid{grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); gap: 10px;    margin-bottom: 15px;}
.mode-print .photo-overlay{display:none!important}
.mode-print .photo-item {   aspect-ratio: unset;  height:auto; background:none;    overflow: inherit;}
.mode-print .photo-item:hover{transform: scale(1)!important;}
.mode-print .photos-grid{ grid-template-columns: unset;display:block; }
.mode-print .photo-item{width:29%;vertical-align:middle;margin:2%;aspect-ratio:1;display:inline-flex;    align-items: center;    justify-content: center;}
.mode-print .photo-item img{object-fit: unset; display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
            min-width: 50px !important;
            min-height: 50px !important;}







/*** LOGIN SCREEN ***/
.mainScreenLogin{min-height: 100vh;height: 100vh;display: flex;overflow:hidden;}
.screenLogin{position:relative;width: 50%;padding:0 8%;justify-content: center;    align-items: center;flex-direction: column; display: flex;}
.bubAnimLogin1{    animation: float 6s ease-in-out infinite;    width: 16vw; top: -5vw;  left: -5vw;    position: absolute;pointer-events: none; opacity:0.2}
.bubAnimLogin2{        animation: float-reverse 7s ease-in-out infinite;  background-color: hsl(var(--secondary-hsl) / .05);border-radius: 9999px; width: 10vw;aspect-ratio:1; bottom: -2.5vw;  right: -2.5vw; position: absolute; pointer-events: none;}
.logoLogin{width:35%;}
.screenLoginForm{width:70%;    animation: slide-up .6s ease-out forwards;}


.screenImageLogin{position:relative;width: 50%;overflow:hidden;}
.subScreenImageLogin{    display: flex;    height: 100%;justify-content: flex-end; flex-direction:column;     overflow: hidden; position: relative;}
.gpImageLogin{width: 100%;}
.imageLogin{width: 100%;}
.imageLogin img{    width: 100%;    height: 100%; position: absolute; top: 0;    right: 0;    bottom: 0;    left: 0; -o-object-fit: cover;  object-fit: cover;display: block;    vertical-align: middle;}
.connected .imageLogin img{    position:relative;object-fit: initial;}
.bckImageLogin{position: absolute;  z-index:2;  top: 0;    right: 0;    bottom: 0;    left: 0; 
	background-image: linear-gradient(to top, hsl(var(--foreground-hsl)),  transparent);pointer-events: none;}
.gptxtImageLogin{width:80%;animation: slide-up .6s ease-out forwards;padding: 10%;z-index:10;position:relative;}
.ti1gpImageLogin, .ti1gpAllTicket{    backdrop-filter: blur(4px);color: hsl(var(--primary-hsl-foreground));font-weight: 600;     background-color: hsl(var(--primary-hsl) / .2);    border-radius: 9999px;padding:4px 12px;}
.ti1gpAllTicket{color:hsl(var(--primary-hsl))}
.ti2gpImageLogin, .ti2gpAllTicket, .ti2gpWizard, .ti4gpWizard{color:white;font-weight:700}
.ti2gpAllTicket, .ti2gpWizard{color:black;text-align:center}
.ti4gpWizard{color:hsl(var(--foreground));}
.ti2gpImageLogin b, .ti2gpImageLogin bold, .ti2gpImageLogin strong,
.ti2gpAllTicket b, .ti2gpAllTicket bold, .ti2gpAllTicket strong,
.ti2gpWizard b, .ti2gpWizard bold, .ti2gpWizard strong,
.ti4gpWizard b, .ti4gpWizard bold, .ti4gpWizard strong{font-family:var(--font-family-titre);color:hsl(var(--primary-hsl));background: linear-gradient(90deg, hsl(var(--primary-hsl)) 0%, hsl(var(--primary-hsl-glow)) 25%, hsl(0 0% 100% / 0.9) 50%, hsl(var(--primary-hsl-glow)) 75%, hsl(var(--primary-hsl)) 100%);
	background-clip: text;background-size: 200% 100%;-webkit-text-fill-color: transparent;animation: neon-sweep 3s ease-in-out infinite;filter: drop-shadow(0 0 6px hsl(var(--primary-hsl) / 0.4));}
.ti2gpImageLogin b, .ti2gpImageLogin bold, .ti2gpImageLogin strong{font-size:50px} 
.ti3gpWizard{text-transform: uppercase;    letter-spacing: 2px; font-weight:bold;}
.txtgpImageLogin{width:70%;}

@keyframes float {
	0%, 100% {    transform: translateY(0) rotate(0);}
	50% {    transform: translateY(-20px) rotate(3deg);}
}

@keyframes float-reverse {
0%, 100% {   transform: translateY(0) rotate(0);}
50% {    transform: translateY(20px) rotate(-3deg);}
}

@keyframes slide-up  {
0% {    opacity: 0;    transform: translateY(30px);}
100% {    opacity: 1;    transform: translateY(0);}
}

@keyframes neon-sweep  {
0% {  background-position: -200% center;}
100% {    background-position: 200% center;}
}

@keyframes fade-up{
0% {  opacity: 0;    transform: translateY(20px);}
100% {    opacity: 1;    transform: translateY(0);}
}
 



/* ===================================
   Notifications Toast
   =================================== */
.gg-notification-Parent{position: fixed;    top: 20px;    right: 20px;    z-index: 1000;}
.gg-notification { background:white;  margin:10px 0; 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;            /* 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;color:white}
.gg-notification--error {    background-color: #EF4444;color:white}
.gg-notification--warning {    background-color: #F59E0B;color:white}
.gg-notification--info {    background-color: #3B82F6;}
.gg-notification__icon {    font-size: 20px;    flex-shrink: 0;}
.gg-notification__message {    flex: 1;}
.aaaagg-notification:nth-child(n+2) {    top: calc(20px + (80px * (var(--notification-index, 0))));}


/*** POPUP INSTALL ***/
.previewOverlay{z-index:500;text-align:center;}
.previewOverlay:before { opacity: 0.85;    left: 0;    top: 0;}
.promptInstallApp{position:relative;background-color : hsl(var(--color-gray-50)); border:1px solid var(--primary); border-radius: var(--radius-card); padding:1em; box-sizing:border-box;display: flex; flex-wrap:wrap;align-items: center;position:absolute; top:50%;left:50%; min-width: 16em;    justify-content: space-around; position: absolute; transform: translate(-50%, -50%);}
.promptInstallApp.IOS{width: calc(100% - 4em);transform: translate(-50%, 0%);bottom: 10vw;top:auto;}
.promptInstallApp.IOS img{width: 1.5em;margin:0 1em;    vertical-align: middle;}
.promptInstallApp.IOS li{margin:0.5em 0;align-items: center;}
.promptInstallApp.IOS .title{font-weight:bold;font-size:1.2em; padding:0.2em;margin-bottom:0.5em;display:block;border-bottom: 1px solid grey;}
.fullW{flex-basis : 100%;}
.promptInstallApp .button_valid{margin:1em 0;}
.closeButtonIos{position:absolute;top:0.5em; right:0.5em;font-size:1.5em;line-height:1;} 



/* ============================================================================
   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}



.mtop10{margin-top:10px;}
.mtop20{margin-top:20px;}
.mtop50{margin-top:50px;}
.mtop100{margin-top:100px;}

.mbot10{margin-bottom:10px;}
.mbot20{margin-bottom:20px;}
.mbot40{margin-bottom:40px;}
.mbot50{margin-bottom:50px;}
.mtop80{margin-top:80px;}

.bmb50{margin:50px auto}
.bmb50-20{margin:50px auto 20px auto}
.bmb20{margin:20px auto}

.mleft10{margin-left:10px;}
.mleft20{margin-left:20px;}

.padlr20{padding-left:20px;padding-right:20px;}



.fs40{font-size:40px} 
	.fs30{font-size:30px}
	.fs20{font-size:20px}
	.fs18{font-size:18px}
	.fs14{font-size:14px}
	.fs12{font-size:12px}
	.fs10{font-size:10px}
	
	.fw700{font-weight:700;}
	.fw900{font-weight:900;}
	
	.colorg{color:hsl(var(--color-3))}
	.colorg a{color:hsl(var(--primary-hsl))}
	.colorg a:hover{    text-decoration-line: underline;}
	.colorMandatory{color:hsl(var(--primary-hsl));margin-left:5px;}



/*** STYLE PDF ***/
.pdf-format .imgbrevdet, .pdf-format h1, .pdf-format h2, .pdf-format h3, .pdf-format h1.t_g, .pdf-format h2.t_g, .pdf-format h3.t_g{margin:10px 0 0;}

.nobreak{break-inside: avoid;    page-break-inside: avoid;    border: 1px dashed transparent;margin-bottom:1em;  /*background: rgba(255, 0, 0, 0.1) !important;border: 2px solid red !important;  Rouge transparent */    
	  }
.pdf-format{width:100% !important; padding:0% !important; box-sizing:border-box;}  
.pdf-format *{opacity : 1 !important; animation: none;}
 
.force-page-break {
    page-break-before: always !important;
    break-before: page !important;
}




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

	




}


@media 	only screen and (max-width : 1600px) {
	:root {
			--pad-content: 10px 12% ;
	}

	
	


}


@media 	only screen and (max-width : 1500px) {
	:root {
		--pad-content: 10px 10% ;
	}

	
	
	

}

@media 	only screen and (max-width : 1400px) {
	:root {
		--pad-content: 10px 8% ;
	}

	
	


}

@media 	only screen and (max-width : 1300px) {
	:root {
		--pad-content: 10px 6% ;
	
	}

	
	
	
	

}

@media 	only screen and (max-width : 1200px) {
	:root {
		--pad-content: 1% 2% ;
		--radius-std: 1vw;
    --radius-card:1.5vw;
    --radius-section : 3vw;
    --radius-input:1.5vw;
    
	}

	html { font-size: 2.5vw;    background-size: 50%;}
	.bheadmenu { }
	.t_g, h1, h2, h3, .mbut, .fc button, .fc table, button, ::placeholder {  font-size: 2vw;    line-height: initial;}
	h1, h2, h3, h1.t_g, h2.t_g, h3.t_g { font-size: 2.5vw;    line-height: 2.5vw;}
	input[type="text"], input[type="email"], input[type="phone"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], textarea, select {  font-size: 2vw;    line-height: 4vw;    padding: 1vw;   border-radius: 1vw;}
	button, .btnE, .btn-cancel, .btn {  padding: 1vw 3vw;}
	
	.search-title>div, .filter-label>div {  font-size: 2.5vw;    padding: 0 1.5vw 0 0;}
	.icons-voir:before, .icons-modifier:before, .icons-supprimer:before, .icons-back:before { font-size: 4vw;}
	
	.abtn--header {width: 100%; }
	.logoHeader img{ width: 80%; }
	

	
	.container{padding:0}
	.screenLogin {  width: 60%;    padding: 0 2%;}
	.screenImageLogin { width: 40%;}
	.bubAnimLogin1 {  width: 30vw;}
	.screenLoginForm { width: 90%;}
	.div-input input { padding-left: 7%;}
	.picto-input { top: 50%;}
	
	.ti2gpImageLogin b, .ti2gpImageLogin bold, .ti2gpImageLogin strong { font-size: 5vw;}
	
	
	.bcontcenter { min-height: 95vh;    }
	.bons-table thead{display:none;}
	.bons-table th { padding: 1vw 0;   font-size: 1.5vw; display:none;}
	.bons-table td { padding: 1vw 0.5vw;border:none;}
	
	.label-b-input {  margin-bottom: 1vw;    font-size: 1.4vw;}
	.div-search-title-ico { width: 4.5vw;    height: 4.5vw;}
	.search-title-ico {  width: 2.5vw;    height: 2.5vw;}
	
	
	.bons-table tr{display:flex;flex-wrap: wrap;padding:7vw 1vw 1vw 1vw;position:relative;margin:0 0 3vw 0;       align-items: baseline;border-bottom:1px solid var(--border)}
	.bons-table td:before,.bons-table .icons-voir:before{content:'';text-align:left;font-family:var(--font-family-text);	color:black;font-size:2.5vw;font-weight:bold;}
	
	.bons-table tbody tr:nth-child(odd){background:white}
	.bons-table tbody tr:nth-child(even){background:white}
	
	.bons-table td { font-size: 2.5vw;}
	.bons-table tr:not(:first-child):hover {background-color:inherit}
	
	.bons-table .bon-colcha1, .bons-table .bon-coladm1{width:10%;font-weight:bold;font-size:3.5vw;line-height:5vw}
	.bons-table .bon-colcha1 span, .bons-table .coladm1 span{width:60%;aspect-ratio:1;background:hsl(var(--secondary-hsl));border-radius:500px;color:white;}
	.bons-table .machine-col1{width:10%;}
	.bons-table .machine-col1:before{content:'Type : '}
	
	bon-colinter
	
	.bons-table .bon-colcha2, .bons-table .bon-coladm2, .bons-table .machine-col2{width:30%;text-align:left}
	.bons-table .bon-colcha2:before, .bons-table .bon-coladm2:before{content:'Client : '}
	.bons-table .machine-col2:before{content:'Marque : '}
	.bons-table .bon-colenl2:before{content:'Client : '}
	.bons-table .bon-colinter2:before{content:'Client : '}
	
	
	.bons-table .bon-colcha3, .bons-table .bon-coladm3, .bons-table .machine-col3{width:30%;text-align:left}
	.bons-table .bon-colcha3:before, .bons-table .bon-coladm3:before{content:'Adresse : '}
	.bons-table .machine-col3:before{content:'Modèle : '}

	
	.bons-table .bon-colcha4, .bons-table .bon-coladm4, .bons-table .machine-col4{width:30%;text-align:left}
	.bons-table .bon-colcha4:before, .bons-table .bon-coladm4:before{content:'Machine : '}
	.bons-table .machine-col4:before{content:'n° de stock : '}
	.bons-table .bon-colenl4:before{content:'Machine : '}
	.bons-table .bon-colinter4:before{content:'Date : '}
	.bmachine-cell { padding: 1vw 2vw;    font-size: 2.5vw;}
	
	.bons-table .bon-colcha5, .bons-table .bon-coladm5, .bons-table .machine-col5{width:40%;text-align:left}
	.bons-table .bon-colcha5:before, .bons-table .bon-coladm5:before{content:'Date de livraison : '}
	.bons-table .machine-col5:before{content:'n° de série : '}
	.bons-table .bon-colenl5:before{content:"Date d'enlèvement : "}
	.bons-table .bon-colinter5:before{content:'Technicien : '}
	
	.bons-table .bon-colcha6, .bons-table .bon-coladm6, .bons-table .machine-col6{width:40%;text-align:left}
	.bons-table .bon-colcha6:before, .bons-table .bon-coladm6:before{content:'Date de retour : '}
	.bons-table .machine-col6:before{content:'Année : '}
	.bons-table .bon-colenl6:before{content:'Date de restitution	 : '}
	.bons-table .bon-colinter6:before{content:'Machine : '}
	
	.bons-table .machine-col7{width:40%;text-align:left}
	.bons-table .machine-col7:before{content:'Propriétaire : '}
	
	
	
	.bons-table .bon-colcha7{}
	.badge-statut{position: absolute;   right: 1vw;   top: 1vw;      font-size: 2.5vw;}
	.statut-badge { font-size: 2.5vw;    padding: 1vw 2vw;}

	.bons-table .bon-colcha8, .bons-table .bon-coladm8, .bons-table .machine-col8{width:100%;margin:0 ;text-align:right}
	.bons-table .bon-colcha8:before, .bons-table .bon-coladm8:before, .bons-table .machine-col8:before{display:none;}
	.bons-table .icons-voir:before, .bons-table .icons-modifier:before, .bons-table .icon-box:before, .bons-table .icons-desactivateb:before, .bons-table .icons-activateb:before{ content:'Voir le bon'; margin:0!important; font-family:var(--font-family-text)!important;font-weight:bold!important;line-height:4.5vw;width:100%;text-align:center;font-size:2.5vw;height:auto;}
	.bons-table .icons-voir, .bons-table .icons-modifier, .bons-table .icon-box, .bons-table .icons-desactivateb, .bons-table activateb{width:auto;text-align:center;margin:0;    padding: 1vw;}
	.bons-table .icons-modifier:before{ content:'Modifier le bon'; }
	.bons-table .icon-box:before{content:'Archiver le bon';}
	
	.machine-col8 .icons-modifier:before{ content:'Modifier la machine'; }
	.machine-col8 .icons-desactivateb:before{ content:'Désactiver la machine'; }
	.machine-col8 .icons-activateb:before{ content:'Activer la machine'; }
	.icons-desactivate, .icons-desactivateb:before {       -webkit-mask: none;    mask: none;     background-color: transparent;}
	
	
	
	
	
	.bon-details { border-radius: 1vw; margin: 2vw 0;background: rgba(255, 255, 255, 0.9);}

	.detail-label-passage { font-size: 3vw;    margin-bottom: 2.5vw;}
	.detail-title-location { font-size: 3vw;    margin-bottom: 1vw;}
	.details-view-input-half input, .details-view-input-full input { padding: 1vw;     width: 100%; }
	.photos-grid {grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));    gap: 2%;    margin-bottom: 2vw;}
	.photo-counter { margin-top: 3vw!important;    font-size:2.5vw!important}
	.btn-add-photo {    width: 30%;    margin: 3vw auto;    aspect-ratio: 1.7; font-size:2.5vw;gap: 1vw;}
	.btn-add-photo:before {  font-size: 4vw;}
	.photo-item, .btn-add-photo {  border-radius: 1vw;}
	.photo-overlay {  opacity: 1; background: rgba(0, 0, 0, 0.3);}
	.btn-icon { width: 6vw;    height: 6vw;    border-radius: 1vw;    padding: 1vw;}
	
	
	/**** A REVOIR EN GENERIQUE ***/
	
	.lightbox-content{    padding: 2vw!important;border-radius: 1vw!important;}
	.lightbox-close{width: 6vw; height: 6vw;    font-size: 3vw!important;}
	.signature-modal-content{ width:70%!important;max-width:70%!important; border-radius: 1vw!important;  padding: 2vw!important; box-shadow: rgba(0, 0, 0, 0.2) 0px 1vw 3vw!important;}
	.detail-card-header{padding-bottom: 1.5vw!important;    margin-bottom: 2vw!important;}
	.signature-modal-content h2{font-size:3vw!important}
	.modal-close {top: 1vw!important; right: 2vw!important; font-size: 3vw!important;margin: 0!important;padding: 0!important;    width: 4vw; height: 4vw;color:var(--foreground)!important}
	.text-muted{margin-bottom: 1.5vw!important;font-size:2.5vw!important}
	.signature-canvas-modal{  border-radius: 1vw!important;    margin: 0px auto 2vw!important;}
	
	
	.promptInstallApp{min-width: 80%;  }
	
	
	.mtop10{margin-top:1vw;}
	.mtop20{margin-top:2vw;}
	.mtop50{margin-top:5vw;}
	.mtop100{margin-top:8vw;}
	
	.mbot10{margin-bottom:1vw;}
	.mbot20{margin-bottom:2vw;}
	.mbot40{margin-bottom:4vw;}
	.mbot50{margin-bottom:5vw;}
	.mtop80{margin-top:7vw;}
	
	.bmb50{margin:5vw auto}
	.bmb50-20{margin:5vw auto 2vw auto}
	.bmb20{margin:2vw auto}
	
	.mleft10{margin-left:1vw;}
	.mleft20{margin-left:2vw;}
	
	.padlr20{padding-left:2vw;padding-right:2vw;}
	
	
	
	.fs40{font-size:4vw} 
	.fs30{font-size:3vw}
	.fs20{font-size:2vw}
	.fs18{font-size:1.8vw}
	.fs14{font-size:1.4vw}
	.fs12{font-size:1.2vw}
	.fs10{font-size:1vw}
	

}


@media 	only screen and (max-width : 468px) {
	:root {
		--pad-content: 1% 2% ;
		--radius-std: 1vw; 
    --radius-card:1.5vw;
    --radius-section : 3vw;
    --radius-input:1.5vw;
    
	}

	html { font-size: 3.5vw;    background-size: 50%;}
	.bheadmenu { }
	.t_g, h1, h2, h3, .mbut, .fc button, .fc table, button, ::placeholder {  font-size: 3.5vw;    line-height: initial;}
	::placeholder {  font-size: 3vw;}
	h1, h2, h3, h1.t_g, h2.t_g, h3.t_g { font-size: 4vw;    line-height: 4vw;}
	input[type="text"], input[type="email"], input[type="phone"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], textarea, select {  font-size: 3.5vw;    line-height: 5vw;    padding: 1.5vw;   border-radius: 2vw;}
	button, .btnE, .btn-cancel, .btn {  padding: 1vw 5vw; font-size:3vw}
	.btn--header{font-size:2.5vw}
	
	.search-title>div, .filter-label>div {  font-size: 3.5vw;    padding: 0 1.5vw 0 0;}
	.icons-voir:before, .icons-modifier:before, .icons-supprimer:before, .icons-back:before { font-size: 6vw;}
	
	.abtn--header {width: 100%; }
	.logoHeader img{ width: 100%; }
	.bhlogo { gap: 2vw;}	
	.logoHeader { width: 12vw;}
	.bheadmenu { margin-bottom: 5vw;}

	
	.container{padding:0}
	.mainScreenLogin{flex-direction:column}
	.screenLogin {  width: 100%; height:50vh; padding:0;    justify-content: start;}
	.screenImageLogin { width: 100%;height:50vh; padding:0;}
	.logoLogin { width: 20%;margin-left:80%;margin-bottom:5vw!important}
	.bubAnimLogin1 {  width: 30vw;}
	.screenLoginForm { width: 96%;text-align:center}
	.div-input input { padding-left: 12%;}
	.picto-input { top: 43%;    width: 8%;}
	.login-container{width:70%;display:block;3vw ; 	margin:auto;text-align:left}
	
	.ti2gpImageLogin b, .ti2gpImageLogin bold, .ti2gpImageLogin strong { font-size: 5vw;}
	
	
	.bcontcenter { min-height: 95vh;    }
	.bons-table thead{display:none;}
	.bons-table th { padding: 1vw 0;   font-size: 1.5vw; display:none;}
	.bons-table td { padding: 1vw 0.5vw;border:none;}
	
	
	
	.brikadminTi { gap: 2vw;align-items: baseline;}
	.briksadmin { grid-template-columns: repeat(2, minmax(0, 1fr));   gap: 2vw;}
	.connected .brikadmin, .lbrikadmin { padding: 2vw;    aspect-ratio: 1.6;}
	.bicobrikadminz1 {  width: 10vw;    height: 10vw;    padding: 1vw;}
	.icobrikadminz1 { width: 6vw;    height: 6vw;}
	.ti1brikadmin { letter-spacing: 3px;    padding: 1vw 2vw;}
	
	
	.form-section, .filter-section, .result-search, .detail-section { padding: 2vw;    margin-bottom: 4vw;}
	.search-title { gap: 4vw;}
	.label-b-input {  margin-bottom: 1vw;    font-size: 2vw; letter-spacing: 2px;}
	.div-search-title-ico { width: 6vw;    height: 6vw;}
	.search-title-ico {  width: 3.5vw;    height: 3.5vw;}
	.filter-input-half, .edit-input-half, .view-input-half, .details-view-input-half,
	.filter-input-full, .edit-input-full, .view-input-full, .details-view-input-full { margin: 1vw 0;}
	
	.search-filters{margin-top:3vw}
	.filter-group { padding: 2vw 2vw;}
	
	.bons-table tr {    padding: 7vw 1vw 1vw 1vw;        margin: 0 0 3vw 0;}
	.badge-statut { right: 1vw;        top: 1vw;     font-size: 2.5vw;}
	.bons-table td { padding: 2vw 1vw;    font-size: 3.5vw;text-align:center!important}
	
	
	.bons-table td:before, .bons-table .icons-voir:before {color: var(--muted-foreground);     font-size: 3vw;text-align:center;display:block;margin-bottom:1vw}
	.bons-table .bon-colcha1, .bons-table .bon-coladm1{width:20%;font-weight:bold;font-size:3.5vw;line-height:5vw}
	.bons-table .bon-colcha1 span, .bons-table .bon-coladm1 span{width:60%;aspect-ratio:1;background:hsl(var(--secondary-hsl));border-radius:500px;color:white;}
	
	.bons-table .bon-colcha2, .bons-table .bon-coladm2{width:40%;text-align:center}
	.bons-table .bon-colcha2:before, .bons-table .bon-coladm2:before{content:'Client';}
	
	.bons-table .bon-colcha3, .bons-table .bon-coladm3{width:30%;text-align:center}
	.bons-table .bon-colcha3:before, .bons-table .bon-coladm3:before{content:'Adresse';}
	
	.bons-table .bon-colcha4, .bons-table .bon-coladm4{width:30%;text-align:center}
	.bons-table .bon-colcha4:before, .bons-table .bon-coladm4:before{content:'Machine';}
	
	.bons-table .bon-colcha5, .bons-table .bon-coladm5{width:40%;text-align:center}
	.bons-table .bon-colcha5:before, .bons-table .bon-coladm5:before{content:'Date de livraison'}
	
	.bons-table .bon-colcha6, .bons-table .bon-coladm6{width:40%;text-align:center}
	.bons-table .bon-colcha6:before, .bons-table .bon-coladm6:before{content:'Date de retour'}
	
	.bons-table .machine-col1, .bons-table .machine-col2, .bons-table .machine-col3{width:33%}
	.bons-table .machine-col4, .bons-table .machine-col6{width:40%}
	.bons-table .machine-col5, .bons-table .machine-col7	{width:60%}
	
	.bons-table .machine-col1:before{content:'Type'}
	.bons-table .machine-col2:before{content:'Marque'}
	.bons-table .machine-col3:before{content:'Modèle'}
	.bons-table .machine-col4:before{content:'n° de stock'}
	.bons-table .machine-col5:before{content:'n° de série'}
	.bons-table .machine-col6:before{content:'Année'}
	.bons-table .machine-col7:before{content:'Propriétaire'}
	
	.bons-table .bon-colenl2:before{content:'Client'}
	.bons-table .bon-colenl4:before{content:'Machine'}
	.bons-table .bon-colenl5:before{content:"Date d'enlèvement"}
	.bons-table .bon-colenl6:before{content:'Date de restitution'}
	
	.bons-table .bon-colinter2:before{content:'Client'}
	.bons-table .bon-colinter4:before{content:'Date'}
	.bons-table .bon-colinter5:before{content:"Technicien"}
	.bons-table .bon-colinter6:before{content:'Machine'}
	
	.bons-table .bon-colcha7{}
	.badge-statut{position: absolute;   right: 1vw;   top: 1vw;      font-size: 2.5vw;}
	.statut-badge { font-size: 2.5vw;    padding: 1vw 2vw;}

	.bons-table .bon-colcha8, .bons-table .bon-coladm8, .bons-table .machine-col8{width:100%;margin:0 ;text-align:right!important}
	.bons-table .bon-colcha8:before, .bons-table .bon-coladm8:before, .bons-table .machine-col8:before{display:none;}
	
	.bons-table .icons-voir:before, .bons-table .icons-modifier:before, .bons-table .icon-box:before, .bons-table .icons-desactivateb:before, .bons-table .icons-activateb:before{ line-height:6vw; font-size:2.5vw}
	.bons-table .icons-voir, .bons-table .icons-modifier, .bons-table .icon-box, .bons-table .icons-desactivateb, .bons-table .icons-activateb{margin:0;    padding: 1vw 3vw;margin-left:2vw}
	
	.bmachine-cell { padding: 1vw 3vw;   font-size: 3vw;    letter-spacing: 2px;}
	
	.cloture-grid {grid-template-columns: 1fr;  gap: 2vw;}
	
	
	.mtop10{margin-top:1vw;}
	.mtop20{margin-top:2vw;}
	.mtop50{margin-top:5vw;}
	.mtop100{margin-top:8vw;}
	
	.mbot10{margin-bottom:1vw;}
	.mbot20{margin-bottom:3vw;}
	.mbot40{margin-bottom:4vw;}
	.mbot50{margin-bottom:5vw;}
	.mtop80{margin-top:7vw;}
	
	.bmb50{margin:5vw auto}
	.bmb50-20{margin:5vw auto 2vw auto}
	.bmb20{margin:2vw auto}
	
	.mleft10{margin-left:1vw;}
	.mleft20{margin-left:2vw;}
	
	.padlr20{padding-left:2vw;padding-right:2vw;}
	
	
	
	.fs40{font-size:5vw} 
	.fs30{font-size:4vw}
	.fs20{font-size:3vw}
	.fs18{font-size:3vw}
	.fs16{font-size:2.9vw}
	.fs14{font-size:2.8vw}
	.fs12{font-size:2.2vw}
	.fs10{font-size:2vw}
	

}