/* bootstap overwrite */
    .c-primary-500 {
       color : var(--bs-primary);
    }
    .c-primary-100 {
       color : var(--bs-primary-100);
    }
    .c-primary-200 {
       color : var(--bs-primary-200);
    }
    .c-primary-300 {
       color : var(--bs-primary-300);
    }
    .c-primary-400 {
       color : var(--bs-primary-400);
    }

    .bg-primary-500 {
       background-color : var(--bs-primary);
    }
    .bg-primary-100 {
       background-color : var(--bs-primary-100);
    }
    .bg-primary-200 {
       background-color : var(--bs-primary-200);
    }
    .bg-primary-300 {
       background-color : var(--bs-primary-300);
    }
    .bg-primary-400 {
       background-color : var(--bs-primary-400);
    }

    /*GRAY*/
    
    .c-gray-500 {
       color : var(--bs-gray);
    }
    .c-gray-100 {
       color : var(--bs-gray-100);
    }
    .c-gray-200 {
       color : var(--bs-gray-200);
    }
    .c-gray-300 {
       color : var(--bs-gray-300);
    }
    .c-gray-400 {
       color : var(--bs-gray-400);
    }


    .bg-gray-500 {
       background-color : var(--bs-gray);
    }
    .bg-gray-100 {
       background-color : var(--bs-gray-100);
    }
    .bg-gray-200 {
       background-color : var(--bs-gray-200);
    }
    .bg-gray-300 {
       background-color : var(--bs-gray-300);
    }
    .bg-gray-400 {
       background-color : var(--bs-gray-400);
    }

    /**RED*/
    .c-red-500 {
       color : var(--bs-red);
    }
    .c-red-100 {
       color : var(--bs-red-100);
    }
    .c-red-200 {
       color : var(--bs-red-200);
    }
    .c-red-300 {
       color : var(--bs-red-300);
    }
    .c-red-400 {
       color : var(--bs-red-400);
    }

    .bg-red-500 {
       background-color : var(--bs-red);
    }
    .bg-red-100 {
       background-color : var(--bs-red-100);
    }
    .bg-red-200 {
       background-color : var(--bs-red-200);
    }
    .bg-red-300 {
       background-color : var(--bs-red-300);
    }
    .bg-red-400 {
       background-color : var(--bs-red-400);
    }

    /** WHITE */
    .c-white {
        color: white;
    }
    
    .bg-white {
        background-color: white;
    }


    .font-size-1 {
        font-size: 3rem;
    }
    .font-size-2 {
        font-size:2rem;
    }
    .font-size-3 {
        font-size: 1.5rem;
    }
    .font-size-4 {
        font-size: 1.2rem;
    }
    .font-size-5 {
        font-size: 0.8rem;
    }

    .progress {
        border-radius: 0%;
    }

    .btn {
        border-radius: 5rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .btn-primary {
        --bs-btn-bg: var(--bs-primary);   /* couleur de base */
        --bs-btn-border-color: var(--bs-primary);

        --bs-btn-hover-bg: var(--bs-primary-300);   /* nuance plus claire */
        --bs-btn-hover-border-color: var(--bs-primary-300);

        --bs-btn-active-bg: var(--bs-primary-200);  /* encore plus clair */
        --bs-btn-active-border-color: var(--bs-primary-200);
        
        --bs-btn-disabled-bg: var(--bs-primary-100); /* très clair, mais pas blanc */
        --bs-btn-disabled-border-color: var(--bs-primary-100);
    }
    .btn-secondary {
        --bs-btn-bg: var(--bs-secondary);   /* couleur de base */
        --bs-btn-border-color: var(--bs-secondary);

        --bs-btn-hover-bg: var(--bs-secondary-300);   /* nuance plus claire */
        --bs-btn-hover-border-color: var(--bs-secondary-300);

        --bs-btn-active-bg: var(--bs-secondary-200);  /* encore plus clair */
        --bs-btn-active-border-color: var(--bs-secondary-200);
        
        --bs-btn-disabled-bg: var(--bs-secondary-100); /* très clair, mais pas blanc */
        --bs-btn-disabled-border-color: var(--bs-secondary-100);
    }

    /*
     * OFFCANVAS 
    */
    .offcanvas {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .offcanvas .separator {
        border: 0;
        height: 0.5rem;
        min-height: 0.5rem;
        width: 3rem;
        margin: 1rem auto;     
        margin-top: 0;
        background: var(--bs-gray-600);
        border-radius: 1rem;
        opacity: 100%;

    }
    .offcanvas-bottom {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        max-height: 85vh !important;
        height: fit-content !important;
        padding-top: 2rem ;
    }

    
    figure {
        height: 30px;
        margin: 0; 
    }

    figure.figure-sm {
        height : 20px;
    }

    figure.figure-lg {
        height : 40px;
    }

    svg {  
        aspect-ratio: 1 / 1;
        height: 100%;
        display: block;
    }


    .form-check-input:checked {
        background-color: var(--bs-gray-900); 
        border-color: var(--bs-gray-900);
    }
    .form-check-input:focus {
    border-color: var(--bs-gray-900);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(139 139 139 / 25%);

    }

    .form-select div[aria-hidden="true"] {
        color: var(--bs-gray-200);
    }
/* end overwrite */

/*
SVG 
*/
.svg-primary {
    fill: var(--bs-primary);
}

.svg-gray {
    fill: var(--bs-gray);
}

.svg-white {
    fill: var(--bs-white);
}

.svg-green {
    fill: var(--bs-green);
}

.svg-red {
    fill: var(--bs-danger);
}

.svg-bg-primary {
        fill: #E2EBFF;
      }

/*
CSS
*/

/* Roboto Regular */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto Italic */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Italic.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Roboto Bold */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto Bold Italic */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-BoldItalic.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Roboto Medium */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Medium.woff2') format('woff2'),
       url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 600 !important;
  font-style: normal;
  font-display: swap;
}

.body {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"wdth" 100;
    width: 100vw;
}

a {
    color : var(--bs-gray-700);
    font-weight: bold;
}

.hidden {
    display: none;
}

.w-fit-content {
    width: fit-content;
    max-width: 100%;
}
.h-fit-content {
    height: fit-content;
    max-height: 100%;
}

.page-container{
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    /* height: calc(100vh - var(--header-height)); */
    height: calc(100dvh - var(--header-height));
}

#Header {
    height: var(--header-height);
}

#StartingOverlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: #FFF;

}

.disabled-fake{
    background-color: #cdddfc;
    border-color: var(--bs-primary-100);
}

/* FORM */
.invalid-form-label {
        color: var(--bs-form-invalid-color);
}


.add-picture-zone {
    border-style: dashed !important;
    border-color: var(--bs-primary-400) !important;
}

.add-picture-zone.invalid {
    border-style: dashed !important;
    border-color: var(--bs-red) !important;
}

.add-picture-info {
    border-color: var(--bs-primary-300) !important;
}

/* TUTO */
.indicators button{
    aspect-ratio: 1 / 1;
    border : solid 1px;
    background-color: transparent;
    border-color: var(--bs-primary);
}
.indicators button.active {
     background-color: var(--bs-primary) ;
}
.tuto-valid-image, .tuto-invalid-image{
    position: relative;        
}
.tuto-valid-image .before-icon, .tuto-invalid-image .before-icon{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
}

.tuto-step.hidden {
    display: none !important;
}

.tuto-image-container img{
    object-fit: contain;
    max-width: 30dvh;
}

/* END TUTO */

/* CAMERA VIEW */
.camera-view {
    background-color: black;
    height : calc(100% - var(--bottom-camera-shutter-height ));
}

.capture-video-container{
    /* border  : solid  #35ea5fc1; */
    max-height : 100%;
    max-width: 100%;
    aspect-ratio: 3/4;
    position: relative;
}

.capture-camera {
    /* border : solid red; */
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    position: relative;
    overflow : hidden;
}

.camera-view .video-overlay .video-overlay-main-square {
    position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    /* background: rgba(128, 128, 128, 0.712); */
    pointer-events: none;
    inset:0;
    
    /* masque SVG avec 2 rectangles transparents */
    background-image: url("../img/video-mask.svg");
}

.camera-view .video-overlay .video-overlay-main-square.no-mask{
    background-image: none !important;

}

.camera-view .video-overlay .video-overlay-main-square .video-overlay-main-square-text {
    position: absolute;
    bottom: -5%;
    right: -2px;
    font-size: 0.7rem;
    font-style: italic;
}

.camera-view .video-overlay .video-overlay-main-square .video-overlay-main-square-t-l {
    position: absolute;
    top: -2px;
    left: -2px;
    border-top: 5px solid var(--bs-primary);
    border-left: 5px solid var(--bs-primary);
    width: 40px;
    height: 40px;
}

.camera-view .video-overlay .video-overlay-main-square .video-overlay-main-square-t-r {
    position: absolute;
    top: -2px;
    right: -2px;
    border-top: 5px solid var(--bs-primary);
    border-right: 5px solid var(--bs-primary);
    width: 40px;
    height: 40px;
}
.camera-view .video-overlay .video-overlay-main-square .video-overlay-main-square-b-l {
    position: absolute;
    bottom: -2px;
    left: -2px;
    border-bottom: 5px solid var(--bs-primary);
    border-left: 5px solid var(--bs-primary);
    width: 40px;
    height: 40px;
}
.camera-view .video-overlay .video-overlay-main-square .video-overlay-main-square-b-r {
    position: absolute;
    bottom: -2px;
    right: -2px;
    border-bottom: 5px solid var(--bs-primary);
    border-right: 5px solid var(--bs-primary);
    width: 40px;
    height: 40px;
}

/* *WIND-SHIELD SQUARE */
.camera-view .video-overlay .video-overlay-win-shield-square {
    position: absolute;
    z-index: 1;
    top: 5%;
    right: 5%;
    height: 35%;
    left: 5%;
    
}
.camera-view .video-overlay .video-overlay-win-shield-square .video-overlay-win-shield-square-t-l {
    position: absolute;
    top: -2px;
    left: -2px;
    border-top: 5px solid var(--bs-white);
    border-left: 5px solid var(--bs-white);
    width: 30px;
    height: 30px;
}

.camera-view .video-overlay .video-overlay-win-shield-square .video-overlay-win-shield-square-t-r {
    position: absolute;
    top: -2px;
    right: -2px;
    border-top: 5px solid var(--bs-white);
    border-right: 5px solid var(--bs-white);
    width: 30px;
    height: 30px;
}
.camera-view .video-overlay .video-overlay-win-shield-square .video-overlay-win-shield-square-b-l {
    position: absolute;
    bottom: -2px;
    left: -2px;
    border-bottom: 5px solid var(--bs-white);
    border-left: 5px solid var(--bs-white);
    width: 30px;
    height: 40px;
}
.camera-view .video-overlay .video-overlay-win-shield-square .video-overlay-win-shield-square-b-r {
    position: absolute;
    bottom: -2px;
    right: -2px;
    border-bottom: 5px solid var(--bs-white);
    border-right: 5px solid var(--bs-white);
    width: 30px;
    height: 30px;
}

.camera-view .video-overlay .video-overlay-win-shield-square .video-overlay-win-shield-square-text{
    position: absolute;
    bottom: -20%;
    right: -2px;
    font-size: 0.7rem;
    font-style: italic;
}


/* * PLATE SQUARE */
.camera-view .video-overlay .video-overlay-plate-square {
    position: absolute;
    z-index: 1;
    bottom: 10%;
    right: 5%;
    height: 25%;
    left: 5%;
    
}
.camera-view .video-overlay .video-overlay-plate-square .video-overlay-plate-square-t-l {
    position: absolute;
    top: -2px;
    left: -2px;
    border-top: 5px solid var(--bs-white);
    border-left: 5px solid var(--bs-white);
    width: 30px;
    height: 30px;
}

.camera-view .video-overlay .video-overlay-plate-square .video-overlay-plate-square-t-r {
    position: absolute;
    top: -2px;
    right: -2px;
    border-top: 5px solid var(--bs-white);
    border-right: 5px solid var(--bs-white);
    width: 30px;
    height: 30px;
}
.camera-view .video-overlay .video-overlay-plate-square .video-overlay-plate-square-b-l {
    position: absolute;
    bottom: -2px;
    left: -2px;
    border-bottom: 5px solid var(--bs-white);
    border-left: 5px solid var(--bs-white);
    width: 30px;
    height: 40px;
}
.camera-view .video-overlay .video-overlay-plate-square .video-overlay-plate-square-b-r {
    position: absolute;
    bottom: -2px;
    right: -2px;
    border-bottom: 5px solid var(--bs-white);
    border-right: 5px solid var(--bs-white);
    width: 30px;
    height: 30px;
}
.camera-view .video-overlay .video-overlay-plate-square .video-overlay-plate-square-text {
    position: absolute;
    bottom: -25%;
    right: -2px;
    font-size: 0.7rem;
    font-style: italic;
}

.camera-view .video-overlay .video-overlay-win-shield {
    /* position: absolute;
    z-index: 1;
    top: 40px;
    right: 60px;
    left: 60px;
    height: 120px;
    border: 3px solid #35ea5fc1;
    color: #35ea5fc1;
    border-radius: 10px; */

    /*span {
        background-color: #00000050;
    }*/
}





.camera-shutter-footer {
    height: var(--bottom-camera-shutter-height);
}

.shutter-btn {
    border : solid 5px;
    border-color: var(--bs-primary);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--bs-primary);         /* button core */
    box-shadow:
    0 0 0 5px white inset,                /* white circle */
    0 0 0 10px var(--bs-primary) inset;    /* blue circle*/
    cursor: pointer;
    transition: transform 0.1s ease;
    box-sizing: border-box;
}

.shutter-btn:active {
    transform: scale(0.9);
}

#Snapshot {
    max-width: 100%;
    max-height: 100%;
}
/* END CAMERA VIEW */

/**MATERIAL ICONS */
.material-symbols-rounded { 
    /* color : var(--bs-primary); */
}

.material-symbols-rounded.icon-sm {
    font-size : 1rem;
}
.material-symbols-rounded.icon-md {
    font-size : 1.8rem;
}
.material-symbols-rounded.icon-lg {
    font-size : 2.5rem;
}


.icon-circle {
    display: inline-flex;        
    align-items: center;
    justify-content: center;

    border: 2px solid ;
    border-color :var(--bs-primary);    
    border-radius: 50%;        
    font-size: 32px;          
    background-color: var(--bs-primary-100);     
    padding: 0.1rem;
}

.material-symbols-rounded.icon-sm.icon-circle {
    font-size : 1rem;
    border : 1px solid !important
}

.material-symbols-rounded.icon-lg.icon-circle {
    font-size: 2.5rem;
    padding: 0.3rem;
    border: solid 3px;
}


/**END MATERIAL ICONS */