*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    touch-action: pan-x pan-y;
}

body {
    -webkit-user-select: none;
    user-select: none;
}

body.pwa {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* body.pwa {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
} */

a,
button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 
input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {} 

input[type="text" i] {
    padding-block: 0;
    padding-inline: 0;
}

input {
    margin: 0;
    padding: 0px;
    border-width: 1px;
    border-style: inset;
    border-image: initial;
    padding-block: 0;
    padding-inline: 0;
}
*/

.tpl {
    position: relative;
    position: fixed;
    display: grid;
    grid-template-rows: auto 1fr auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tpl > div {
    position: relative;
    height: 100%;
}
/*
.hdr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    z-index: 10;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
}
*/
.ftr {
    position: relative;
    /* display: flex; */
    display: none;
    flex-wrap: wrap;
    z-index: 10;
    background: #f8f8f8;
    border-top: 1px solid #eee;
}
/*
nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.hdr a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    padding: 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}
    cubic-bezier(0.6, 0.08, 0, 0.98)
*/
#app {
    position: relative;
    width: 100%;
    height: 100%;
}

#app > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

h1 {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.spinner-container.delayed {
    visibility: hidden;
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: rgba(255, 255, 255, 0.8); */
    z-index: 9999;
}

.spinner {
    width: 70px;
    height: 70px;
    border: 7px solid #ddd;
    border-top: 7px solid rgb(81, 81, 81);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-container-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.spinner-btn {
    width: 25px;
    height: 25px;
    border: 4px solid #fff;
    border-top: 4px solid #777;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.grey-btn {
    position: relative;
    display: inline-block;
    text-align: center;
    /* width: 100%; */
    /* max-width: 300px; */
    text-decoration: none;
    /* margin-top: 15px; */
    padding: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 5px;
    background: #555;
    color: #fff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    font-size: 1.2em;
    color: #333;
}

.center-cnt {
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
}

.mxw {
    position: relative;
    max-width: 1440px;
    width: 100%;
    /* align-content: space-evenly; */
}

.alerte {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.alerte-cnt {
    position: relative;
    max-width: 400px;
    transform: translate3d(0,0,0) scale(0.5);
    transition: transform 0.2s;
    border: 1px solid #999;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px 0 #555;
}

.alerte-cross {
    display: flex;
    justify-content: end;
    background: rgba(255, 255, 255, 0.6);
    /* background: #ddd; */
}

.alerte-cross > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: red;
    color: #fff;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    font-size: 25px;
}

.alerte-msg {
    display: grid;
    justify-content: center;
    /* flex-wrap: wrap; */
    /* text-align: center; */
    background: #fff;
    padding: 20px 10px;
    color: red;
    font-weight: bold;
}

/* .alerte-msg > div {
    display: flex;
    justify-content: center;
} */

.alerte-ok {
    display: flex;
    justify-content: center;
    background: #555;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.alerte-confirm {
    display: flex;
    display: none;
}

.alerte-confirm > div  {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px;
    color: #fff;
    /* font-weight: bold; */
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.alerte-confirm > div:first-child {
    background: green;
}

.alerte-confirm > div:last-child {
    background: red;
}

.coordonnees {
    /* border: 1px dashed; */
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

.coordonnees > div {
    /* border: 1px dashed; */
    display: flex;
    justify-content: center;
}

.coordonnees > div > div {
    width: 100%;
    max-width: 600px;
}
/* 
.coordonnees > div:first-child {
    border-bottom: 1px solid #ccc;

}

.coordonnees > div:last-child {
    border-top: 1px solid #ccc;
}
*/
.coordonnees > div:first-child > div > div,
.coordonnees > div:last-child > div > div  {
    /* padding: 10px; */
    border-radius: 5px;
}

.coordonnees-top > div > div {
    padding: 10px;
}
/* 
.coordonnees .coordonnees-bdy {
    height: 100%;
    overflow: hidden;
}

.coordonnees .coordonnees-bdy > div {
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
} 
*/
.coordonnees .coordonnees-btm > div {
    /* display: flex; */
    /* flex-wrap: wrap; */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    padding: 5px;
}

.coordonnees .coordonnees-btm > div > div {
    display: flex;
    justify-content: center;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.coordonnees .coordonnees-btm > div > div:last-child {
    border-left: 0;
}

.coordonnees .coordonnees-cnt {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 10px;
}

.coordonnees .coordonnees-groupe {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.coordonnees .coordonnees-groupe > div {
    display: flex;
    flex-wrap: wrap;
}

.coordonnees .input {
    width: 50%;
}

.coordonnees .input input {
    width: 100%;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 0;
}

.coordonnees .cp {
    width: 30%;
}

.coordonnees .ville {
    width: 70%;
}

.coordonnees .adresse,
.coordonnees .cp,
.coordonnees .ville {
    border-bottom: 1px solid #ccc;
}

.coordonnees .nom,
.coordonnees .cp,
.coordonnees .mail {
    border-right: 1px solid #ccc;
}

.coordonnees-msg {
    justify-content: flex-start;
    color: #555;
    padding: 10px;
}

.fleche-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    /* padding: 12px; */
    /* transform: translate3d(0px, 0px, 0px) rotate(45deg); */
    transition: transform 0.45s cubic-bezier(0.6, 0.08, 0, 0.98);
}

.fleche {
    position: relative;
    width: 15px;
    height: 15px;
    top: -3px;
    border-right: 3px solid;
    border-bottom: 3px solid;
    transform: translate3d(0px, 0px, 0px) rotate(45deg);
    /* transition: transform 0.45s cubic-bezier(0.6, 0.08, 0, 0.98); */
    /* transform-origin: center center; */
}

.bold {
    font-weight: bold;
}

.pointer {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.grey-btn {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    padding: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background: #777;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.error-highlight {
    color: red;
    font-weight: bold;
}

.error-highlightbg {
    color: #fff !important;
    background: rgb(255, 181, 181);
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
}

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

.validation > div {
    padding: 20px;
    width: 100%;
    max-width: 550px;
}

.valid_cnt {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 25px;
}

.valid_cnt .cercle_clip {
    animation: validanim1 1s cubic-bezier(0.6, 0.08, 0, 0.98) 0s both;
}

@keyframes validanim1 {
  from {
    /* clip-path: inset(100% 0% 0% 0%); */
    transform: scale(2) rotate(200deg);
    opacity: 0;
  }
  to {
    /* clip-path: inset(0% 0% 0% 0%); */
    transform: scale(1) rotate(60deg);
    opacity: 1;
  }
}

.valid_cnt .cercle {
    border: 8px solid green;
    border-top: 8px solid #fff;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.valid_cnt .check_clip {
    position: absolute;
    top: -15px;
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 12px;
    animation: validanim2 0.9s cubic-bezier(0.6, 0.08, 0, 0.98) 0.3s both;
}

@keyframes validanim2 {
  from {
    transform: scale(1);
    clip-path: inset(0% 100% 0% 0%);
  }
  to {
    transform: scale(1);
    clip-path: inset(0% 0% 0% 0%);
  }
}

.valid_cnt .check {
    border-left: 10px solid green;
    border-bottom: 10px solid green;
    width: 70px;
    height: 40px;
    transform: rotate(-45deg);
}

.griser {
    opacity: 0.5;
    pointer-events: none;
}

.truncate {
    display: block;             /* nécessaire pour que le ellipsis fonctionne */
    white-space: nowrap;        /* empêche le retour à la ligne */
    overflow: hidden;           /* coupe le texte qui dépasse */
    text-overflow: ellipsis;    /* ajoute les "..." */
    width: 100%;
}

.pointer {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 600px) {
    .coordonnees-btm .coordonnees-cancel {
        border-left: 0 !important;
    }
    .coordonnees-btm .coordonnees-save {
        border-right: 0 !important;
    }
}

@media (max-width: 320px) {
    
    .coordonnees .coordonnees-groupe > div > div {
        border-bottom: 1px solid #ccc;
    }
    .coordonnees .coordonnees-groupe .input:last-child{
        border-bottom: 0;
    }
    .coordonnees .adresse, .coordonnees .ville {
        border-bottom: 1px solid #ccc !important;
    }
    .coordonnees .input {
        width: 100%;
    }
    .coordonnees .nom,
    .coordonnees .cp,
    .coordonnees .mail {
        border-right: 0;
    }
}

@media (max-width: 250px) {
    .coordonnees .coordonnees-btm > div {
        grid-template-columns: 1fr;
    }
    .coordonnees-btm > div > div {
        width: 100%;
        border:0 !important;
    }
    .coordonnees-btm > div > div:first-child {
        border-bottom: 1px solid #ccc !important;
    }
}