@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap');
/* Encode Sans Expanded — wght 100..900 */
/* TODO Ne charger que celles utilisées au final avant mise en prod */
.text-encode-sans-expanded-100 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 100; }
.text-encode-sans-expanded-200 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 200; }
.text-encode-sans-expanded-300 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 300; }
.text-encode-sans-expanded-400 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 400; }
.text-encode-sans-expanded-500 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 500; }
.text-encode-sans-expanded-600 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 600; }
.text-encode-sans-expanded-700 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 700; }
.text-encode-sans-expanded-800 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 800; }
.text-encode-sans-expanded-900 { font-family: "Encode Sans Expanded", sans-serif; font-weight: 900; }

:root{

    --secondary-color: #98755B;

    /* BACKGROUND */
    --bg-light : #ffffff;
    --bg-light-rgb : 255, 255, 255;
    --bg-kaki-light : rgba(226, 209, 194, 0.15);
    --bg-secondary-color-rgb: 226, 209, 194;

    /* BUTTONS */
    --btn-primary-color: #5C3422;

    --btn-black-color: oklch(14.5% 0 0); /* neutral-950 */
    --btn-black-color-hover: oklch(43.9% 0 0); /* neutral-600 */

    --btn-red-color: oklch(0.64 0.194 22.558); /* #e94b51 */
    --btn-red-color-rgb: oklch(0.64 0.194 22.558);

    /* OLD */
    --text-color-light: #FFFFFF;
    --text-color-gray: #374151;
    --text-color-gray-rgb: 55,65,81;

    --primary-color: #EA820B;
    --primary-color-rgb: 234, 130, 11;
    --secondary-color-rgb: 141, 142, 114;

    --bg-gray-light : #F7F3EF;
    --bg-gray-light-rgb : 247, 243, 239;
    --bg-orange : #fff7ed;
    --bg-orange-rgb : 255, 247, 237;
    --bg-dark : #191919;
    --bg-dark-rgb : 25,25,25;

    --drop-shadow-light-custom : drop-shadow(0 10px 8px rgb(0 0 0 / 0.075)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))
}

html {
    background-color: var(--bg-light);
    scroll-behavior: smooth;

    font-family: "Encode Sans Expanded", sans-serif;
    font-weight: 300;
}

.quicksand {
    font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif;
}


/* ----- COLORS ----- */

.bg-kaki-light {
    background-color: var(--bg-kaki-light);
}
.bg-light {
    background-color: var(--bg-light);
}
.bg-dark {
    background-color: var(--bg-dark);
}
.bg-secondary-color {
    background-color: var(--secondary-color);
}
.bg-orange-50 {
    background-color: rgb(255 247 237);
}
.bg-orange-100 {
    background-color: rgb(255 237 213);
}
.bg-red-50 {
    background-color: rgb(254 242 242);
}
.bg-red-100 {
    background-color: rgb(254 226 226);
}
.bg-emerald-50 {
    background-color: rgb(236 253 245);
}
.bg-blue-50 {
    background-color: rgb(239 246 255);
}
.bg-white {
    background-color: #ffffff;
}
.bg-beige {
    background-color: rgba(var(--bg-gray-light-rgb), 0.68);
}
.bg-fbf8f6{
    background-color: #fbf8f6;
}

.text-amber-900{
    color: oklch(41.4% 0.112 45.904) /* Marron amber-900 */
}
.text-blue-500 {
    color: rgb(59 130 246);
}
.text-blue-600 {
    color: rgb(37 99 235);
}
.text-green-500 {
    color: rgb(34 197 94);
}
.text-green-600 {
    color: rgb(22 163 74);
}
.text-orange-500 {
    color: rgb(249 115 22);
}
.text-orange-600 {
    color: rgb(234 88 12);
}
.text-red-500 {
    color: rgb(239 68 68);
}
.text-red-600 {
    color: rgb(220 38 38);
}
.text-red-700 {
     color: rgb(185 28 28);
}
.text-white {
    color: #ffffff;
}
.text-gray-400 {
    color: rgb(156 163 175);
}
.text-gray-600 {
    color: rgb(75 85 99);
}
.text-gray-700 {
    color: rgb(55 65 81);
}

.text-secondary-color {
    color: var(--secondary-color);
}
.text-orange {
    color: #EA820B;
}

.text-gray {
    color: var(--text-color-gray);
}

.hover\:bg-orange-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity));
}

/* ----- POLICE ----- */

.font-stick-no-bills {
    font-family: 'Stick No Bills', sans-serif;
    letter-spacing: 0.1rem;
    /*font-size: .98rem;*/
}

/* ----- MARGIN / PADDING ----- */

.gap-x-1\.5 {
    column-gap: 0.375rem; /* 6px */
}

/* ----- FLEX ----- */



/* ----- TAILWINDCSS ----- */

/* @layer utilities : Cela permet d'étendre les utilitaires Tailwind CSS dans votre fichier CSS personnalisé. */
@layer utilities {
    .gap-1\.5 {
        gap: 0.375rem; /* 1.5 rem, ce qui est équivalent à 6px */
    }
}

.w-0\.5 {
    width: 0.125rem; /* 0.5 dans Tailwind correspond à 0.125rem */
}
.h-0\.5 {
    height: 0.125rem; /* 0.5 dans Tailwind correspond à 0.125rem */
}
.h-80 {
    height: 20rem; /* 320px */
}
.h-96 {
    height: 24rem; /* 384px */
}
.max-h-96 {
    max-height: 24rem; /* 384px */
}
.max-h-112 {
    max-height: 28rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.ml-10{
    margin-left: 2.5rem;
}

.py-16 {
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
}

.pr-8{
    padding-right: 2rem;
}
.pr-12{
    padding-right: 3rem;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.cursor-wait {
    cursor: wait;
}

.tracking-tighter{
    letter-spacing: -0.05em; /* -0.05em */
}
.tracking-tight{
    letter-spacing: -0.025em; /* -0.025em */
}

.break-all{
    word-break: break-all;
}

.opacity-0 {
    opacity: 0;
}
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.transition-opacity {
    transition-property: opacity;
}

.duration-300 {
    transition-duration: 300ms;
}

/* ----- SCROLL BAR ----- */

/* Scroll bar */
body {
    --sb-track-color: rgba(148,140,122, 0);
    --sb-thumb-color: rgb(148,140,122);
    --sb-size: 10px;
}
body::-webkit-scrollbar {
    width: var(--sb-size);
}
body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;
}
@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* Masquer la scrollbar sur les navigateurs basés sur Webkit (Chrome, Safari, etc.) */
.hidden-scrollbar::-webkit-scrollbar {
    display: none; /* - Ne pas afficher la scrollbar sur Webkit */
}
/* Masquer la scrollbar sur Firefox */
.hidden-scrollbar {
    scrollbar-width: none; /* - Ne pas afficher la scrollbar sur Firefox */
}

/* Custom scrollbar */
.custom-scrollbar {
    --sb-track-color: rgba(148,140,122, 0);
    --sb-thumb-color: rgba(148,140,122, 0.5);
    --sb-size: 3px;
}
.custom-scrollbar::-webkit-scrollbar {
    width: var(--sb-size);
    height: 6px;
    background-color: rgb(249 250 251);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 10px;
}
@supports not selector(::-webkit-scrollbar) {
    .custom-scrollbar {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* ----- BUTTONS ----- */

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;

    padding: .4rem 1rem;
    border-radius: 4rem;
    gap: .5rem;

    cursor: pointer;

    transition: all 0.1s linear;
}
button, button *, .btn, .btn > * {
    font-family: "Quicksand", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: var(--text-base); /* 1rem (16px) */
    line-height: var(--text-base--line-height); /* calc(1.5 / 1) */
    font-weight: 500;

    white-space: nowrap;
}

.btn-primary {
    background: var(--btn-primary-color);
    border: 1px solid transparent;
    outline: 1px solid transparent;
    color: #fff;
}
.btn-primary-rounded {
    padding: .45rem 1rem;
    border-radius: 9999px; !important /* rounded-full */
}
.btn-primary:hover {
    background: transparent;
    border: 1px solid var(--btn-primary-color);
    outline: 1px solid transparent;
}
.btn-primary:hover, .btn-primary:hover > *, .btn-primary:hover > * {
    color: var(--btn-primary-color);
}
.btn-primary:active {
    background: transparent;
    border: 1px solid var(--btn-primary-color);
    outline: 1px solid transparent;
    color: var(--btn-primary-color);

    scale: 97%;
    transition: all 0.05s linear;
}
.btn-primary:active > *, .btn-primary:active > * {
    color: var(--btn-primary-color);
}

.btn-black {
    background: var(--btn-black-color);
    border: 1px solid transparent;
    outline: 1px solid transparent;
    color: #fff;
    transition: all 0.25s ease;
}
.btn-black-rounded {
    padding: .45rem 1rem;
    border-radius: 9999px; !important /* rounded-full */
}
.btn-black:hover {
    background: var(--btn-black-color-hover);
}
.btn-black:active {
    background: var(--btn-black-color-hover);
    scale: 97%;
}

.btn-secondary {
    background: var(--secondary-color);
    border: 1px solid transparent;
    outline: 1px solid transparent;
    color: #fff;
}
.btn-secondary:hover {
    background: transparent;
    border: 1px solid var(--secondary-color);
    outline: 1px solid transparent;
    color: var(--secondary-color);
}
.btn-secondary:hover span, .btn-secondary:hover > svg {
    color: var(--secondary-color);
}
.btn-secondary:active {
    background: transparent;
    border: 1px solid var(--secondary-color);
    outline: 1px solid transparent;
    color: var(--secondary-color);

    scale: 97%;
    transition: all 0.05s linear;
}
.btn-secondary:active span, .btn-secondary:active > svg {
    color: var(--secondary-color);
}

.btn-tertiary {
    margin: 0.25rem 0;
    padding: .5rem .75rem .15rem;
    display: inline-block;

    border: 1px solid transparent;
    outline: 1px solid transparent;
    text-align: center;
}
.btn-tertiary, .btn-tertiary > svg, .btn-tertiary > span {
    /*color: var(--btn-primary-color);*/
    color: rgb(55 65 81);
}
.btn-tertiary:after {
    display:block;
    content: '';
    border-bottom: solid 2px rgb(55 65 81);
    transform: scaleX(0);
    transition: transform 125ms ease-in-out;
}
.btn-tertiary:hover:after {
    transform: scaleX(1);
}
.btn-tertiary:active {
    scale: 97%;
    transition: all 0.05s linear;
}

.btn-red {
    background: var(--btn-red-color);
    border: 1px solid transparent;
    outline: 1px solid transparent;
    color: #fff;
}
.btn-red-rounded {
    padding: .45rem 1rem;
    border-radius: 9999px; !important /* rounded-full */
}
.btn-red:hover {
    background: transparent;
    border: 1px solid var(--btn-red-color);
    outline: 1px solid transparent;
}
.btn-red:hover, .btn-red:hover > *, .btn-red:hover > * {
    color: var(--btn-red-color);
}
.btn-red:active {
    background: transparent;
    border: 1px solid var(--btn-red-color);
    outline: 1px solid transparent;
    color: var(--btn-red-color);

    scale: 97%;
    transition: all 0.05s linear;
}
.btn-red:active > *, .btn-red:active > * {
    color: var(--btn-red-color);
}

.btn:disabled, .btn:active:disabled, .btn:hover:disabled {
    background: #9ca3af;
    border: 1px solid transparent;
    outline: 1px solid transparent;
    scale: 100%;
    cursor: no-drop;
}
.btn:disabled, .btn:disabled > *, .btn:active:disabled, .btn:hover:disabled, .btn:hover:disabled > * {
    color: #ffffff;
    text-decoration-thickness: 2px;
}
.btn:disabled span {
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    /*color: #fff;*/
}

.btn-tertiary:disabled, .btn-tertiary:active:disabled, .btn-tertiary:hover:disabled {
    background: transparent !important;
    border: 1px solid transparent;
    outline: 1px solid transparent;
    scale: 100%;
}
.btn-tertiary:disabled span, .btn-tertiary:disabled *, .btn-tertiary:active:disabled span, .btn-tertiary:hover:disabled span {
    text-decoration-line: line-through;
    color: #9ca3af !important;
    background: transparent !important;
}
.btn-tertiary:hover:disabled:after {
    transform: scaleX(0);
}

.btn-quaternary {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;

    /*margin: 0.25rem 0;*/
    padding: .45rem .66rem;
    border-radius: 0.375rem; /* 8px */
    gap: .5rem;

    cursor: pointer;

    transition: all 0.1s linear;
}
.btn-quaternary, .btn-quaternary > * {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 500;

    /*color: #fff;*/
    white-space: nowrap;
}
.btn-quaternary:hover {
    background-color: rgb(255 237 213);
}
.btn-quaternary:disabled, .btn-quaternary:disabled > *, .btn-quaternary:active:disabled, .btn-quaternary:hover:disabled, .btn-quaternary:hover:disabled > * {
    background: transparent;
    /*color: #ffffff;*/
    cursor: no-drop;
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
}
.btn-quaternary:disabled span {
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
}



/* ----- BORDER ----- */

.border-container {
    position: relative;
    border-style: solid;
    border-width: 0;
    border-color: rgba(var(--bg-gray-light-rgb), 0.6);
    border-radius: .33rem;

    margin: .75rem;
    padding: 1.25rem 1.25rem;

    background-color: rgba(var(--bg-gray-light-rgb), 0.68);
}
.border-container-transparent {
    position: relative;
    border-style: solid;
    border-width: 0;
    border-color: rgba(var(--bg-gray-light-rgb), 0.6);
    border-radius: .33rem;

    margin: .75rem;
    padding: 1.25rem 1.25rem;
}
.border-container-light {
    background: linear-gradient(20deg, rgba(141,142,114,1) 0%, rgba(210,210,196,1) 100%);

    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.container-admin:after{
    content: "vue admin";
    position: absolute;
    top: -.33rem;
    right: 1.5rem;
    background: rgba(var(--primary-color-rgb), .6);
    color: var(--text-color-light);
    padding: .3rem .6rem;
    border-radius: 0.5rem;

    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.075)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));

    font-size: 0.6rem;
    line-height: .7rem;
    text-transform: lowercase;
    letter-spacing: .05rem;
}
@media (min-width: 768px) {
    .border-container {
        /*padding: 1.25rem 1.75rem;*/
    }
}

.dotted-line {
    height: 6px;
    width: 100%;
    background-image: radial-gradient(circle, var(--secondary-color) 3px, transparent 3px);
    background-size: 12px 6px; /* Espacement horizontal et vertical des points */
    background-repeat: repeat-x;
}

.border-blue-500 {
    border-color: rgb(59 130 246);
}
.border-blue-600 {
    border-color: rgb(37 99 235);
}
.border-green-500 {
    border-color: rgb(34 197 94);
}
.border-green-600 {
    border-color: rgb(22 163 74);
}
.border-orange-500 {
    border-color: rgb(249 115 22);
}
.border-orange-600 {
    border-color: rgb(234 88 12);
}
.border-red-500 {
    border-color: rgb(239 68 68);
}
.border-red-600 {
    border-color: rgb(220 38 38);
}


/* ----- MAP ----- */
#map {
    /*transform:
            perspective(800px)
            rotateY(-8deg);
    transition: transform 1s ease 0s;
    border-radius: 4px;
    box-shadow:
            rgba(0, 0, 0, 0.024) 00px 01px,
            rgba(0, 0, 0, 0.05) 01px 00px,
            rgba(0, 0, 0, 0.03) 00px 8px 0px,
            rgba(0, 0, 0, 0.1) 020px 30px 0px;*/
}

.leaflet-control-attribution, .leaflet-control-attribution > * {
    font-size: 75%;
}


/* ----- EDITORJS ----- */

h1.ce-header{
    font-size: 1.25rem;
    line-height: 1.75rem;
}
h2.ce-header{
    font-size: 1.125rem;
    line-height: 1.75rem;
}
@media (min-width: 1024px){
    h1.ce-header{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h2.ce-header{
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
@media (min-width: 1280px){
    h1.ce-header{
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    h2.ce-header{
        font-size: 1.5rem;
        line-height: 2rem;
    }
}



/* ----- INPUTS ----- */

/* Edge (Chromium & Legacy) / IE : masque l'œil et le bouton clear */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* (Optionnel) certains Edge affichaient encore un espace cliquable */
input[type="password"] {
    -ms-overflow-style: none; /* évite un clic fantôme si besoin */
}

input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='date'], input[type='time'], input[type='tel'],
select, textarea {
    /*display: block;*/
    padding: .5rem .66rem;
    border-radius: .5rem; /* .375rem */
    /*border: 1px;*/
    color: var(--text-color-gray);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}
input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="range"], input[checked="checked"] {
    accent-color: var(--secondary-color);
}
input[type="checkbox"], input[type="radio"], input[type="range"] {
    cursor: pointer;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled, input[type="range"]:disabled {
    cursor: auto;
}
input:disabled, input:read-only {
    color: #6b7280;
}


::placeholder {
    color: oklch(70.7% 0.022 261.325);
    opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
    color: oklch(70.7% 0.022 261.325);
}

/* Start Checkbox switch */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-switch-container input[type=checkbox] {
        --active: #98755B;
        --active-inner: #fff;

        /*--focus: 2px rgba(39, 94, 254, .3);*/
        --focus: 2px rgba(98, 99, 77, .3);

        --border: #d2d2c4;
        --border-hover: #98755B;

        --background: #fff;

        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;

        -webkit-appearance: none;
        -moz-appearance: none;

        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--border-color, var(--border));
        background: var(--background-color, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .checkbox-switch-container input[type=checkbox]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .checkbox-switch-container input[type=checkbox]:checked {
        --background-color: var(--active);
        --border-color: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    .checkbox-switch-container input[type=checkbox]:disabled {
        --background-color: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }
    .checkbox-switch-container input[type=checkbox]:disabled:checked {
        --background-color: var(--disabled-inner);
        --border-color: var(--border);
    }
    .checkbox-switch-container input[type=checkbox]:disabled + label {
        cursor: not-allowed;
    }
    .checkbox-switch-container input[type=checkbox]:hover:not(:checked):not(:disabled) {
        --border-color: var(--border-hover);
    }
    .checkbox-switch-container input[type=checkbox]:focus {
        box-shadow: 0 0 0 var(--focus);
    }
    .checkbox-switch-container input[type=checkbox]:not(.checkbox-switch) {
        width: 21px;
    }
    .checkbox-switch-container input[type=checkbox]:not(.checkbox-switch):after {
        opacity: var(--o, 0);
    }
    .checkbox-switch-container input[type=checkbox]:not(.checkbox-switch):checked {
        --o: 1;
    }
    .checkbox-switch-container input[type=checkbox] + label {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 4px;
    }
    .checkbox-switch-container input[type=checkbox]:not(.checkbox-switch) {
        border-radius: 7px;
    }
    .checkbox-switch-container input[type=checkbox]:not(.checkbox-switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }
    .checkbox-switch-container input[type=checkbox]:not(.checkbox-switch):checked {
        --r: 43deg;
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch {
        width: 38px;
        border-radius: 11px;
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch:after {
        left: 2px;
        top: 1px;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch:checked {
        --ab: var(--active-inner);
        --x: 15px;
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch:disabled:not(:checked):after {
        opacity: 0.6;
    }
}
.checkbox-switch-container * {
    box-sizing: inherit;
}
.checkbox-switch-container *:before,
.checkbox-switch-container *:after {
    box-sizing: inherit;
}
/* End Checkbox switch */

/* Checkbox switch status (emerald on / red-light off) */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-switch-container input[type=checkbox].checkbox-switch-status {
        --active: #10b981;
        --active-inner: #fff;
        --border: #fca5a5;
        --border-hover: #fecaca;
        --background: #fca5a5;
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch-status:after {
        background: var(--ab, #fff);
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch-status:checked {
        --background-color: var(--active);
        --border-color: var(--active);
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch-status:not(:checked) {
        --background-color: var(--background);
        --border-color: var(--border);
    }
    .checkbox-switch-container input[type=checkbox].checkbox-switch-status:hover:not(:checked):not(:disabled) {
        --border-color: var(--border-hover);
    }
}
/* End Checkbox switch status */

.input-neutral-state {
    --tw-ring-inset: inset;
    --tw-ring-color: rgb(209 213 219); /* ring-gray-300 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-neutral-state:focus {
    --tw-ring-color: rgb(var(--secondary-color-rgb)); /* focus:ring-[#98755B] */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-success-state {
    --tw-ring-inset: inset;
    --tw-ring-color: rgb(22 163 74); /* ring-green-600 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-success-state:focus {
    --tw-ring-color: rgb(22 163 74); /* ring-green-600 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-error-state {
    --tw-ring-inset: inset;
    --tw-ring-color: rgb(239 68 68); /* ring-red-500 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-error-state:focus {
    --tw-ring-color: rgb(239 68 68); /* ring-red-500 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-warning-state {
    --tw-ring-inset: inset;
    --tw-ring-color: rgb(245 158 11); /* ring-amber-500 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}
.input-warning-state:focus {
    --tw-ring-color: rgb(245 158 11); /* ring-amber-500 */
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); /* ring-1 */
}

/* ----- FLASH MESSAGE ----- */

/* Common class */
.flash-message {
    background-color: var(--bg-light);
    box-shadow: rgba(0, 0, 0, 0.24) 0 2px 4px;

    border: solid 2px transparent;
    border-radius: 0.5rem; /* 8px */

    margin: 1rem 0;
    padding: .75rem 1rem;

    width: fit-content;
    max-width: min(100%, 48rem);
}

.flash-success {
    background-color: rgba(22, 163, 74, .07);
    box-shadow: rgba(22, 163, 74, .25) 0 2px 4px;
    border: solid 2px #16a34a; /* 22, 163, 74 */
}
.flash-info, .flash-notice {
    background-color: rgba(56, 189, 248, .07);
    box-shadow: rgba(56, 189, 248, .25) 0 2px 4px;
    border: solid 2px #38bdf8; /* 56, 189, 248 */
}
.flash-warning {
    background-color: rgba(250, 204, 21, .07);
    box-shadow: rgba(250, 204, 21, .25) 0 2px 4px;
    border: solid 2px #facc15; /* 250, 204, 21 */
}
.flash-danger {
    background-color: rgba(239, 68, 68, .07);
    box-shadow: rgba(239, 68, 68, .25) 0 2px 4px;
    border: solid 2px #ef4444; /* 239, 68, 68 */
}


/* ----- LABEL TAG ----- */

.pastille-green-border {
    --tw-ring-color: rgb(22 163 74 / 0.2); /* text-green-600 */
}
.pastille-red-border {
    --tw-ring-color: rgb(220 38 38 / 0.2); /* text-red-600 */
}
.pastille-orange-border {
    --tw-ring-color: rgb(234 88 12 / 0.2); /* text-orange-600 */
}
.pastille-gray-border {
    --tw-ring-color: rgb(75 85 99 / 0.2); /* text-gray-600 */
}
.bcd {
    --tw-ring-inset: inset;
}
.bbz {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* ----- EFFECTS ----- */

.drop-shadow-light-custom {
    filter: var(--drop-shadow-light-custom);
}

.shadow-stripe-20 {
    box-shadow: rgb(38, 57, 77) 0 20px 30px -10px;
}
.shadow-stripe-21 {
    box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px;
}


.list-container {
    /*overflow: hidden;*/
    transition: height 0.25s linear;
}

@keyframes pulseShadow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
    }
}
.pulsating-error {
    animation: pulseShadow 1s infinite;
}


/* ----- MODAL ----- */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


/* ----- MODAL V2 ----- */

.modal-container {
    visibility: hidden;
    opacity: 0;
    transition: opacity ease-out 200ms;
}
/* Fond transparent : le background reste pour intercepter les clics (fermeture) */
.modal-container .modal-template-background {
    background-color: transparent;
}
.modal-template-content {
    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);
    scale: 95%;
    transition: transform ease-out 200ms, scale ease-out 200ms, box-shadow ease-out 200ms;
    margin-top: 9rem;
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Préserve les border-radius (rounded corners) */
    border: 1px solid rgba(152, 117, 91, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 60px -15px rgba(0, 0, 0, 0.15);
}
/* Le contenu (premier enfant) scrolle à l'intérieur du conteneur arrondi */
.modal-template-content > div:first-child {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.modal-container.modal-open {
    position: fixed;
    inset: 0;
    z-index: 1050;
    transform: translateZ(0); /* Les enfants fixed se positionnent par rapport à ce conteneur */
    visibility: visible;
    opacity: 100;
    transition: opacity ease-out 300ms;
}
/* Supprimer le padding-right réservé pour une scrollbar inexistante */
.modal-container.modal-open > div:not(.modal-template-background):not(.modal-template-content) {
    padding-right: 0;
}
.modal-template-content-open {
    visibility: visible;
    opacity: 100;
    transform: translateY(0);
    scale: 100%;
    transition: opacity ease-out 200ms, transform ease-out 200ms, scale ease-out 200ms;
}

/* ----- DROPDOWN ----- */

.dropdown {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

.dropdown.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown.fading-out {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

/* ----- LOADER ----- */

/* Copyright : From Uiverse.io by Nawsome (https://uiverse.io/profile/Nawsome)*/
.svg-frame {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}
.svg-frame svg {
    position: absolute;
    transition: .5s;
    z-index: calc(1 - (0.2 * var(--j)));
    transform-origin: center;
    width: 344px;
    height: 344px;
    fill: none;
}
.svg-frame:hover svg {
    transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}
.svg-frame svg #center {
    transition: .5s;
    transform-origin: center;
}
.svg-frame:hover svg #center {
    transform: rotate(-30deg) translateX(45px) translateY(-3px);
}
#out2 {
    animation: rotate16 7s ease-in-out infinite alternate;
    transform-origin: center;
}
#out3 {
    animation: rotate16 3s ease-in-out infinite alternate;
    transform-origin: center;
    stroke: #EA820B;
}
#inner3,
#inner1 {
    animation: rotate16 4s ease-in-out infinite alternate;
    transform-origin: center;
}
#center1 {
    fill: #EA820B;
    animation: rotate16 2s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes rotate16 {
    to {
        transform: rotate(360deg);
    }
}

/* ----- TIMERS ----- */

/* ----- TOOLTIPS ----- */

/* Remove default marker (Chrome/Safari) - Retire le marqueur par défaut */
summary::-webkit-details-marker { display: none; }

/* Optional: avoid selection weirdness - Optionnel */
summary { user-select: none; }