/* ----------------------------------------------------------------------------
Ce fichier CSS concerne des règles appliquables partout dans le site
---------------------------------------------------------------------------- */

/* Variables couleurs CSS */
:root {
    --noir-clair:#2A2435;
    --noir-clair-contraste:#6d657b;
    --noir-violet:#241E31;
    --noir-texte: #242424;

    --primary-light:#B23286;
    --primary:#87185D;
    --primary-dark:#680B42;
    --primary-darker:#3D1631;
    --primary-extra-light:#FCEBF5;
    --primary-grad1: #FEBAD8;
    --primary-grad2: #A5217F;
    --primary-grad3: #590642;

    --secondary:#2196F3;
    --secondary-dark:#0976D8;
    --secondary-darker:#0063BC;
    --secondary-light:#64B5F6;
    --secondary-extra-light:#EBF6FF;
    --secondary-grad1: #A6EAFF;
    --secondary-grad2: #80D2FF;
    
    --gris:#8F9094;
    --gris-background:#FDFDFD;
    --gris-contraste: #F9F9F9;
    --gris-bleu: #EDEDF5;
    --gris-mid:#B1B1B1;
    --gris-form:#CACACA;

    --cat-emploi: #5F5EE0;
    --cat-emploi-dark: #4A51CF;
    --cat-emploi-light: #7A7EF5;
    --cat-emploi-extra-light: #F3F3FF;

    --cat-event: #F23F9F;
    --cat-event-dark: #E5308B;
    --cat-event-light: #FF66BF;
    --cat-event-extra-light: #FFF2F9;

    --cat-affaire: #FF5B14;
    --cat-affaire-dark: #F24100;
    --cat-affaire-light: #FF7F3B;
    --cat-affaire-extra-light: #FFF8F5;
    
    --info: #87185D;
    --info-light: #A5217F;
    --info-gradient: linear-gradient(100deg, rgba(135,24,93,1) 25%, rgba(165,33,127,1) 100%);

    --negatif:#E71F39;
    --negatif-light:#FF3852;
    --negatif-gradient: linear-gradient(100deg, rgba(231,31,57,1) 25%, rgba(255,56,82,1) 100%);

    --attention:#2196F3;
    --attention-light: #64B5F6;
    --attention-gradient: linear-gradient(100deg, rgba(33,150,243,1) 25%, rgba(100,181,246,1) 100%);

    --positif:#70E000;
    --positif-light:#83F219;
    --positif-gradient:linear-gradient(100deg, rgba(112,224,0,1) 25%, rgba(131,242,25,1) 100%);
    
    --couleur-like:#FA3C8C;
    --couleur-vue:#3CA0FA;
}

/* déclaration de toute la famille typographique Roboto */

/* Roboto (thin) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-Thin.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

/* Roboto (thin italic) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-ThinItalic.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
}

/* Roboto (light) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

/* Roboto (light italic) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
}


/* Roboto (regular) */
@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Roboto (regular italic) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}

/* Roboto (medium) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

/* Roboto (medium italic) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
}

/* Roboto (bold) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

/* Roboto (bold italic) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

/* Roboto (black) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

/* Roboto (black italic) */
@font-face {
    font-family: "Roboto";
    src: url("../font/Roboto-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
}


/* déclaration de toute la famille typographique Teko */

/* Teko (light) */
@font-face {
    font-family: "Teko";
    src: url("../font/Teko-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

/* Teko (regular) */
@font-face {
    font-family: "Teko";
    src: url("../font/Teko-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* Teko (medium) */
@font-face {
    font-family: "Teko";
    src: url("../font/Teko-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

/* Teko (semi-bold) */
@font-face {
    font-family: "Teko";
    src: url("../font/Teko-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

/* Teko (bold) */
@font-face {
    font-family: "Teko";
    src: url("../font/Teko-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

/* déclaration de toute la famille typographique Cabin */

/* Cabin (normale variable) */
@font-face {
  font-family: "Cabin";
  src: url("../font/Cabin-VariableFont_wdth,wght.ttf") format("truetype"),
        url("../font/Cabin-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 400 700;
}

/* Cabin (italique variable) */
@font-face {
  font-family: "Cabin";
  src: url("../font/Cabin-Italic-VariableFont_wdth,wght.ttf") format("truetype"),
       url("../font/Cabin-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
}

/* Règles pour toutes résolutions, sauf contre-ordre plus bas */
@media (min-width: 1px) {

    /* Classe générique pour masquer un élément */
    .hide-element {
        display: none!important;
        visibility: hidden!important;
        opacity: 0!important;
    }

    /* Bloque toutes transition CSS (appliquée en JS selon différents critères) */
    .stop-transition {
        transition: none!important;
    }

    /* Règles globales pour les icones utilisant la méthode mask-image */
    .mask-ico {
        display: block;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .input-label-container {
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;
    }

    /* Phrase qui fait office de label visuellement mais qui est en réalité un <p> */
    .substitut-label {
        margin: 0;
        cursor: pointer;
        font-family: 'Cabin', sans-serif;
        font-size: 17px;
        font-weight: 400;
        color: var(--noir-texte);
        /* Empêche de sélectionner le texte */
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Switch binaire custom */
    .toggle-switch {
        --toggle-switch-size:35px;
        position: relative;
        min-width: var(--toggle-switch-size);
        width: var(--toggle-switch-size);
        min-height: calc(var(--toggle-switch-size)/2);
        height: calc(var(--toggle-switch-size)/2);
        border-radius: 500px;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: 2px;
    }

    .toggle-switch .tswitch-body {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background-color: var(--gris);
        border-radius: inherit;
    }

    .toggle-switch input:checked ~ .tswitch-body {
        background-color: var(--primary-grad2);
    }

    .toggle-switch .tswitch-body::before {
        content: '';
        display: block;
        width: calc( (var(--toggle-switch-size)/2) - (var(--toggle-switch-size)/8));
        height: calc( (var(--toggle-switch-size)/2) - (var(--toggle-switch-size)/8));
        border-radius: 500px;
        background-color: #ffffff;
        position: relative;
        left: 5%;
        transition: all 0.4s ease-out;
    }

    .toggle-switch input:checked ~ .tswitch-body::before {
        left: 55%;
    }

    .toggle-switch input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    /* Vérifie si le toggle est décoché ET qu'il n'y a qu'un seul label d'option présent */
    .input-label-container:has(.toggle-switch input:not(:checked)) .substitut-label:only-of-type {
        color: var(--gris-form)!important;
    }

    /* --- Règles dans le cas d'un toggle switch avec deux labels on/off --- */

    /* Modifier le deuxième choix, lorsque le toggle est "non coché" (et seulement si multi-choix) */
    .input-label-container:has(.toggle-switch input:not(:checked)) .substitut-label:not(:first-of-type):last-of-type {
        color: var(--gris-form)!important;
    }

    /* Modifier le premier choix, lorsque le toggle est "coché" (et seulement si multi-choix) */
    .input-label-container:has(.toggle-switch input:checked) .substitut-label:not(:last-of-type):first-of-type {
        color: var(--gris-form)!important;
    }

    /* ----- Checkbox custom ----- */
    .custom-checkbox {
        --custom-checkbox-size:17px;
        position: relative;
        min-width: var(--custom-checkbox-size);
        width: var(--custom-checkbox-size);
        min-height: var(--custom-checkbox-size);
        height: var(--custom-checkbox-size);
        border-radius: 25%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
    }

    /* Marqueur dans le checkbox à afficher lorsqu'elle est cochée*/
    .custom-checkbox .cbox-body {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: var(--gris-contraste);
        border: 2px solid var(--gris);
        border-radius: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (pointer: fine) and (hover: hover) {
    .input-label-container:hover .custom-checkbox .cbox-body {
        border: 2px solid var(--primary-light);
    }
    }

    .custom-checkbox input:checked ~ .cbox-body {
        border: 2px solid var(--primary);
    }

    /* Marqueur présent dans la checkbox pour montrer qu'elle est active */
    .custom-checkbox .cbox-body::before {
        content: '';
        display: none;
        width: calc(var(--custom-checkbox-size)/2);
        height: calc(var(--custom-checkbox-size)/2);
        border-radius: inherit;
        background-color: var(--primary);
        position: relative;
    }

    /* La case est cochée, afficher checkmark */
    .custom-checkbox input:checked ~ .cbox-body::before {
        display: block;
    }

    /* La case est cochée et on survol dessus */
    @media (pointer: fine) and (hover: hover) {
    .input-label-container:hover .custom-checkbox input:checked ~ .cbox-body::before {
        background-color: var(--primary-light);
    }
    }

    /* Input invisible présent dans la fausse checkbox*/
    .custom-checkbox input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    /* ----- Bouton radio custom ----- */
    .custom-radio {
        --custom-radio-size:17px;
        position: relative;
        min-width: var(--custom-radio-size);
        width: var(--custom-radio-size);
        min-height: var(--custom-radio-size);
        height: var(--custom-radio-size);
        border-radius: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
    }

    /* Marqueur dans le checkbox à afficher lorsqu'elle est cochée*/
    .custom-radio .radio-body {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: var(--gris-contraste);
        border: 2px solid var(--gris);
        border-radius: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (pointer: fine) and (hover: hover) {
        .input-label-container:hover .custom-radio .radio-body {
            border: 2px solid var(--primary-light);
        }
    }

    .custom-radio input:checked ~ .radio-body {
        border: 2px solid var(--primary);
    }

    /* Marqueur présent dans la checkbox pour montrer qu'elle est active */
    .custom-radio .radio-body::before {
        content: '';
        display: none;
        width: calc(var(--custom-radio-size)/2);
        height: calc(var(--custom-radio-size)/2);
        border-radius: inherit;
        background-color: var(--primary);
        position: relative;
    }

    /* La case est cochée, afficher checkmark */
    .custom-radio input:checked ~ .radio-body::before {
        display: block;
    }

    /* La case est cochée et on survol dessus */
    @media (pointer: fine) and (hover: hover) {
        .input-label-container:hover .custom-radio input:checked ~ .radio-body::before {
            background-color: var(--primary-light);
        }
    }

    /* Input invisible présent dans la fausse checkbox*/
    .custom-radio input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    /* ----- Checkbox custom type "tag texte" ----- */

    /* Conteneur <label> englobant l'ensemble de l'élément */
    .cbox-txt-tag-wrapper {
        /* layout */
        position: relative;
        display: flex;
        align-items: center;
        gap: 3px;

        /* apparence */
        background-color: #ffffff;
        padding: 6px 15px 6px 13px;
        border: 2px solid var(--gris-bleu);
        border-radius: 5px;
        width: -moz-fit-content;
        width: fit-content;
        cursor: pointer;
    }

    @media (pointer: fine) and (hover: hover) {
        .cbox-txt-tag-wrapper:hover {
            background-color: var(--gris-contraste);
        }
    }

    /* État coché du wrapper */
    .cbox-txt-tag-wrapper:has(input:checked) {
        background-color: var(--primary-grad2);
        border-color: transparent;
    }

    @media (pointer: fine) and (hover: hover) {
        .cbox-txt-tag-wrapper:has(input:checked):hover {
            background-color: var(--primary);
        }
    }

    /* Conteneur intermédiaire regroupant l'input invisible et l'icone d'état */
    .checkbox-txt-tag {

    }

    /* Input checkbox réel, présent mais invisible */
    .checkbox-txt-tag input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    /* Icone participant à l'aspect visuel mais aussi à indiquer l'état (coché/décoché) de l'élément */
    .checkbox-txt-tag .cbox-txt-tag-ico {
        display: block;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url(../svg/ico-txt-tag-unchecked.svg);
        mask-image: url(../svg/ico-txt-tag-unchecked.svg);
        min-width: 14px;
        width: 14px;
        min-height: 14px;
        height: 14px;
        background-color: var(--noir-texte);
        pointer-events: none;
    }

    /* Style de l'icone en mode coché */
    .checkbox-txt-tag:has(input:checked) .cbox-txt-tag-ico {
        -webkit-mask-image: url(../svg/ico-txt-tag-checked.svg);
        mask-image: url(../svg/ico-txt-tag-checked.svg);
        background-color: #ffffff;
    }

    /* Texte affiché à l'intérieur du tag */
    .cbox-txt-tag-wrapper .substitut-label {
        font-size:15px;
    }

    /* Adapter le texte pour l'état "coché" */
    .cbox-txt-tag-wrapper:has(input:checked) .substitut-label {
        color: #ffffff;
    }

    /* ----- Boutons radio custom type "tags fusionnés" ----- */

    /* Parent conteneur du groupe d'éléments */
    .fused-radio-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Conteneur intermédiaire <label> regroupant les éléments d'un des choix radio du groupe */
    .fradio-choice {
        position: relative;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        padding: 6px 15px 6px 13px;
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-right-width: 2px;
        border-left-width: 0px;
        border-radius: 0px;
        border-color: var(--gris-bleu);
        border-style: solid;
        width: -moz-fit-content;
        width: fit-content;
        cursor: pointer;
    }

    /* Règles spécifiques au premier choix du groupe */
    .fused-radio-container .fradio-choice:first-of-type {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-left-width: 2px;
    }

    /* Règles spécifiques au dernier choix du groupe */
    .fused-radio-container .fradio-choice:last-of-type {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    /* Version "sélectionnée" du conteneur */
    .fradio-choice:has(input:checked) {
        background-color: var(--primary-grad2);
        border-color: var(--primary-grad2);
    }

    /* Input réel radio, présent mais invisible */
    .fradio-choice input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    /* Texte présent dans le choix radio */
    .fradio-choice .substitut-label {
        font-size: 16px;
    }

    /* Texte adapté au variant "sélectionné" */
    .fradio-choice:has(input:checked) .substitut-label {
        color: #ffffff;
    }

    /* Style messages toasts */
    .toast-container {
        position: fixed;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1000;
    }

    .toast {
        border: none;
        box-shadow: 0px 3px 20px 1px rgb(0 0 0 / 10%);
        border-radius: 5px 5px 4px 4px;
        background: rgba(255, 255, 255, 1);
        margin-bottom: 0!important;
        margin-top: 2rem;
        max-width: 85vw;
    }

    .toast .toast-header {
        border-radius: 4px 4px 0px 0px;
        background: var(--info-light);
        background: var(--info-gradient);
    }

    .toast .toast-header p {
        font-family: 'Cabin', sans-serif;
        font-size: 19px;
        color: #ffffff;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin: auto auto auto 0;
    }

    .toast-close {
        width: 18px;
        height: 18px;
        margin: auto 0 auto auto;
        border: none;
        display: block;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        background-color: #ffffff;
        -webkit-mask-image: url(../svg/ico-croix.svg);
        mask-image: url(../svg/ico-croix.svg);
    }

    .toast-close:hover {
        background-color: var(--noir-clair);
    }

    .toast .toast-body {
        background: none;
    }

    .toast .toast-body p {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        color: #242424;
        line-height: 1.4;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .toast .toast-body p:last-child {
        margin-bottom: 0px;
    }

    /* styles toast d'alerte */
    .toast-style-alert .toast-header {
        background: var(--attention);
        background: var(--attention-gradient);
    }

    /* styles toast d'erreur */
    .toast-style-error .toast-header {
        background: var(--negatif);
        background: var(--negatif-gradient);
    }

    /* styles toast positif */
    .toast-style-valid .toast-header {
        background: var(--positif);
        background: var(--positif-gradient);
    }


}

/* Media query qui marque le début d'une logique "desktop" */
@media (min-width: 992px) {

    .input-label-container {
        gap: 10px;
    }

    /* ----- Checkbox custom type "tag texte" ----- */

    /* Conteneur <label> englobant l'ensemble de l'élément */
    /* .cbox-txt-tag-wrapper {
        gap: 4px;
    } */

    /* Icone participant à l'aspect visuel mais aussi à indiquer l'état (coché/décoché) de l'élément */
    /* .checkbox-txt-tag .cbox-txt-tag-ico {
        width: 16px;
        height: 16px;
    } */

    /* Texte affiché à l'intérieur du tag */
    /* .cbox-txt-tag-wrapper .substitut-label {
        font-size:17px;
    } */

    /* style toasts */
    .toast-container {
        bottom: 3%;
        left: auto;
        right: 2%;
        transform: translate(0);
    }

    .toast {
        max-width: 100%;
        background: rgba(255, 255, 255, 0.95);
    }

}

/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {

    /* style toasts */
    .toast-container {
        bottom: 8%;
        right: 3%;
    }

}

/* ---------------------------------------------- */
/* ---------- EXCEPTION - 2400px ---------- */
@media (min-width:2400px) {

    /* style toasts */
    .toast-container {
        bottom: 12%;
        right: 50%;
        transform: translate(50%, 0);
    }

    .toast {
        width: 30rem;
    }

}