:root {
    --dark-blue-rgba: rgba(12, 73, 94);
    --darker-blue-rgba: rgb(0, 53, 71);
    /*--darker-blue: #002939;*/
    /*--darker-blue: #002136;/*#002b39*/
    /*--dark-blue: /*#002C47;/*rgb 0, 44, 71 *//*#003647;*/
    --dark-blue-cool: #1C8C85;
    /*--blue:#226F87;/*rgb value 34, 111, 135 alt #226087*/
    
    /*--light-blue: #63A1C7; /* #63B0C7;*/
    /*--lighter-blue: #BFE7FF; /* rgb values 191,231,255 - old #BFF0FF;*/
    /*--brown: #AD8245; /* #472A00; #5E360C*/
    /*--dark-green: #004729;
    /*--green: #349C7C; // LOGOS deck
    /*--light-green: #CDF1A1;*/
    /*--dark-purple:#3C0047 ; /*nat #3C0047*/
    /*--purple:#8C349C ; /*Custom #332287 nat #8C349C*/
    /*--red:#9E0028;*/
    /*--wheet: #FFEACC ; /*original #F5DEB3*/
    --yellow: #FFD42B; /*FFD42B  #FFD42A*/

    --darker-blue: #002136; /*from nowhere*/
    --dark-blue: #002C47; /*from complémentaire LOGO DECK*/
    --deep-blue: #134E72; /*from complémentaire*/
    --blue: #226087; /*from composite partagée, there is an alternative based on #003747 which is #226F87*/
    --lepty-blue: #34849C; /*from perso*/
    --light-blue: #63A1C7; /*from complémentaire*/
    --lighter-blue: #BFE7FF; /*from complémentaire partagée*/
    --dark-brown: #472A00; /*from complémentaire*/
    --brown: #7A5118; /*from complémentaire*/
    --light-brown: #AD8245; /*from complémentaire*/
    --dark-gooseshit: #473800; /*from composite*/
    --gooseshit: #9C8634; /*from composite*/
    --light-gooseshit: #C7A963; /*from complémentaire partagée*/
    --dark-green: #194700;/*from carré historically #004729*/
    --green: #599C34;/*from carré historically #349C7C*/
    --light-green: #BDF1A1;/*from carré historically #CDF1A1*/
    --dark-purple: #470047; /*from carré historically #3C0047*/
    --purple: #9C349C; /*from carré historically #8C349C*/
    --dark-red: #470000; /*from triade*/
    --red: #872222; /*from triade historically #9E0028*/
    --light-red: #C76364; /*from triade*/
    --dark-turquoise: #00473C; /*from composite*/
    --turquoise: #349C8C; /*from composite*/
    --light-turquoise: #A1F1E5; /*from composite*/
    --wheet: #E0BB87; /*from complémentaire*/
    --light-wheet: #FFEACC; /*from complémentaire*/

/* Color Theme #002C47 Complémentaire in Hex and rgba*/
    --dark-brown-cpl: #472A00;/*rgba(71, 42, 0, 1)*/
    --deep-blue-cpl: #134E72;/*rgba(19, 78, 114, 1)*/
    --dark-blue-cpl: #002C47; /*rgba(0, 44, 71, 1)*/
    --brown-cpl: #7A5118;/*rgba(122, 81, 24, 1)*/
    --blue-cpl: #34749C;/*rgba(52, 116, 156, 1)*/
    --light-brown-cpl: #AD8245;/*rgba(173, 130, 69, 1)*/
    --light-blue-cpl: #63A1C7; /*rgba(99, 161, 199, 1)*/
    --wheet: #E0BB87;/*rgba(224, 187, 135, 1)*/
    --lighter-blue-co: #A1D3F1;/*rgba(161, 211, 241, 1)*/
    --light-wheet: #FFEACC;/*rgba(255, 234, 204, 1)*/

/* Color Theme #002C47 Complémentaire partagée in Hex and rgba*/
    --dark-gooshite-cpp: #473200;/*rgba(71, 50, 0, 1)*/
    --dark-brown-cpp: #471D00;/*rgba(71, 29, 0, 1)*/
    --blue-cpp: #226087;/*rgba(34, 96, 135, 1)*/
    --gooseshit-cpp: #876922;/*rgba(135, 105, 34, 1)*/
    --brown-cpp: #874B22;/*rgba(135, 105, 34, 1)*/
    --light-gooseshit-cpp: #C7A963;/*rgba(199, 169, 99, 1)*/
    --light-brown-cpp: #C78C63;/* rgba(199, 140, 99, 1)*/
    --lighter-blue-cpp: #BFE7FF;/*rgba(191, 231, 255, 1)*/

/* Color Theme #002C47 Composite in Hex and rgba*/
    --dark-turquoise: #00473C;/*rgba(0, 71, 60, 1)*/
    --dark-gooseshit-cps: #473800;/*rgba(71, 56, 0, 1)*/
    --turquoise: #349C8C;/*rgba(52, 156, 140, 1)*/
    --gooseshit-cps: #9C8634;/*rgba(156, 134, 52, 1)*/
    --brown-cps: #9C7134;/*rgba(156, 113, 52, 1)*/
    --light-turquoise: #A1F1E5;/*rgba(161, 241, 229, 1)*/

/* Color Theme #002C47 Triade in Hex and rgba*/
    --dark-green-tri: #474600;/*rgba(71, 70, 0, 1)*/
    --dark-red: #470000;/*rgba(71, 0, 0, 1)*/
    --deep-blue-tri: #18557A;/*rgba(24, 85, 122, 1)*/
    --green-tri: #878622;/*rgba(135, 134, 34, 1)*/
    --red: #872222;/*rgba(135, 34, 34, 1)*/
    --blue-tri: #4586AD;/*rgba(69, 134, 173, 1)*/
    --light-green-tri: #C7C563;/*rgba(199, 197, 99, 1)*/
    --light-red: #C76364;/*rgba(199, 99, 100, 1)*/
    --light-blue-tri: #87BEE0;/*rgba(135, 190, 224, 1)*/

/* Color Theme #002C47 Carré in Hex and rgba*/
    --dark-green-car: #194700;/*rgba(25, 71, 0, 1)*/
    --dark-purple: #470047;/*rgba(71, 0, 71, 1)*/
    --green-car: #599C34;/*rgba(89, 156, 52, 1)*/
    --purple: #9C349C;/*rgba(156, 52, 156, 1)*/
    --ligth-green-car: #BDF1A1;/*rgba(189, 241, 161, 1)*/

/* Color perso*/
    --blue-per: #34849C;
    --blue-cool: #12C4B8; /*rgba 18, 196, 184* cool1 #00BFB2 cool2 #12C4B8*/

/* BOOTSTRAP */
    --bs-body-color: var(--dark-blue);
}

/* APP */
body {
    font-family: 'Barlow' !important;
    font-size: 1.2rem;
}

html{scroll-behavior:auto !important;}/* NEleve un probleme de scroll lors d'un chanfgement de page causé par turbo et bootstrap smooth-scroll */

h1 {
    font-weight: 600;
    font-size: 3rem;/*override bootstrap default*/
}

h2 {
    font-weight: 600;
    font-size: 2.5rem;/*override bootstrap default*/
}

h3 {
    font-weight: 600;
}

p {
    text-align: justify;/*strange that's not by default in the bs*/
}
.pd-top {
    padding-top: 76px;
}

.pd-bottom {
    padding-bottom: 76px;
}

.fullvh {
    height: 100vh;
}

.bg-blue {
    background: var(--blue);
}

.bg-blue-grad {
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 20%, white 100%);
}

.bg-blue-grad-inversed {
    background: linear-gradient(0deg, var(--blue) 0%, var(--blue) 20%, white 100%);
}

.bg-dark-gradient {
    background: linear-gradient(180deg, var(--darker-blue-rgba) 0%, var(--darker-blue-rgba) 10%, var(--dark-blue) 20%, var(--dark-blue) 50%, var(--darker-blue-rgba) 100%);
}

.bg-dark-blue-rgba-transparent {
    background: rgba(var(--dark-blue-rgba),0.5);
}

.bg-dark-blue {
    background: var(--dark-blue);
}

.bg-dark-blue-grad {
    background: linear-gradient(180deg, var(--dark-blue) 0%, white 100%);
}

.bg-dark-blue-grad-inversed {
    background: linear-gradient(0deg, var(--dark-blue) 0%, white 100%);
}

.bg-deep-blue {
    background: var(--deep-blue);
}

.bg-lepty-blue {
    background: var(--lepty-blue);
}

.bg-wheet {
    background:var(--wheet) !important;
}

.bg-light-wheet {
    background:var(--light-wheet) !important;
}

.bg-light-wheet-grad {
    background: linear-gradient(180deg, var(--light-wheet) 0%, white 100%);
}
.bg-light-wheet-grad-inversed {
    background: linear-gradient(0deg, var(--light-wheet) 0%, white 100%);
}


.text-brown {
    color:var(--brown) !important;
}

.text-light-brown {
    color:var(--light-brown) !important;
}

.text-wheet {
    color:var(--wheet) !important;
}

.text-light-wheet {
    color:var(--light-wheet) !important;
}

.text-white {
    color:white !important;
}

.text-light-green {
    color:var(--light-green) !important;
}

.text-dark-blue {
    color:var(--dark-blue) !important;
}

.text-light-blue {
    color:var(--light-blue) !important;
}

.left-bordered-text {
    border-left: 2px solid var(--light-wheet);
    padding-left:30px;
}

.left-bordered-title {
    position: relative;
    padding-left: 20px;
    color:var(--light-brown);
    &:after{
        content:" ";
        position: absolute;
        top:5px;
        bottom: 5px;
        left:0;
        width: 5px;
        background: var(--light-brown);
    }
}

.title-blue {
    color: var(--blue) !important;
    &:after{
        background: var(--blue) !important;
    }
}

.title-dark-blue {
    color: var(--dark-blue) !important;
    &:after{
        background: var(--dark-blue) !important;
    }
}

.title-deep-blue {
    color: var(--deep-blue) !important;
    &:after{
        background: var(--deep-blue) !important;
    }
}

.title-light-blue {
    color: var(--light-blue) !important;
    &:after{
        background: var(--light-blue) !important;
    }
}

.title-lighter-blue {
    color: var(--lighter-blue) !important;
    &:after{
        background: var(--lighter-blue) !important;
    }
}

.title-blue-cool {
    color: var(--blue-cool) !important;
    &:after{
        background: var(--blue-cool) !important;
    }
}

.title-lepty-blue {
    color: var(--lepty-blue) !important;
    &:after{
        background: var(--lepty-blue) !important;
    }
}

.title-dark-brown {
    color: var(--dark-brown) !important;
    &:after{
        background: var(--dark-brown) !important;
    }
}

.title-light-brown {
    color: var(--light-brown) !important;
    &:after{
        background: var(--light-brown) !important;
    }
}

.title-gooseshit {
    color: var(--gooseshit) !important;
    &:after{
        background: var(--gooseshit) !important;
    }
}

.title-dark-green{
    color: var(--dark-green) !important;
    &:after{
        background: var(--dark-green) !important;
    }
}

.title-green{
    color: var(--green) !important;
    &:after{
        background: var(--green) !important;
    }
}

.title-light-green{
    color: var(--light-green) !important;
    &:after{
        background: var(--light-green) !important;
    }
}

.title-dark-purple{
    color: var(--dark-purple) !important;
    &:after{
        background: var(--dark-purple) !important;
    }
}

.title-purple {
    color: var(--purple) !important;
    &:after{
        background: var(--purple) !important;
    }
}

.title-turquoise{
    color: var(--turquoise) !important;
    &:after{
        background: var(--turquoise) !important;
    }
}

.title-red {
    color: var(--red) !important;
    &:after{
        background: var(--red) !important;
    }
}

.title-light-red {
    color: var(--light-red) !important;
    &:after{
        background: var(--light-red) !important;
    }
}

.title-dark-turquoise{
    color: var(--dark-turquoise) !important;
    &:after{
        background: var(--dark-turquoise) !important;
    }
}

.title-light-turquoise{
    color: var(--light-turquoise) !important;
    &:after{
        background: var(--light-turquoise) !important;
    }
}

.title-wheet{
    color: var(--wheet) !important;
    &:after{
        background: var(--wheet) !important;
    }
}

.title-light-wheet{
    color: var(--light-wheet) !important;
    &:after{
        background: var(--light-wheet) !important;
    }
}

.title-yellow{
    color: var(--yellow) !important;
    &:after{
        background: var(--yellow) !important;
    }
}

/* NAVBAR & MENU */
.navbar {

    background: var(--darker-blue);

    .navbar-toggler{
        border-color: var(--light-wheet);
    }
    .navbar-toggler-icon {
        width: 1em;
        height: 1em;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23F5DEB3' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    .navbar-brand {
        color: var(--light-wheet);

        span{
            font-size: calc(2.375rem);
        }
    }
    .nav-link {
        position: relative;
        color: var(--light-wheet);

        &.active{
            color: var(--light-wheet);
            font-weight: bold;
        }
        &:hover{
            font-weight: bold;
        }
    }

    @media (max-width: 991px) {
        .nav-link {
            color: var(--dark-blue);
        }
    }
}

.nav-link:after{
    content:"";
    position: absolute;
    top:11px;
    bottom: 11px;
    right:0;
    width: 1px;
    background: var(--light-wheet);
}

.nav-item:last-child > .nav-link:after{
    display: none;
}

@media (max-width: 992px ) {
    .offcanvas-header {
        border-bottom: 1px solid var(--dark-blue);

    }
    .nav-link {
        color: var(--dark-blue);
        padding-left: 15px;
        font-size: 20px;
        &:after{
            width: 0;
        }
        &.active:after {
            right:inherit;
            left: 5px;
            width: 1px;
            background: var(--dark-blue);
        }
    }
}

#alert-container{
    position: absolute;
    z-index: 1000;
    right: 50px;
    top: 90px;
}

.box {
    display: grid;
    place-content: center;
    color: white;
    text-shadow: 0 1px 0 #000;
    --border-angle: 0turn;
    --main-bg: conic-gradient(from var(--border-angle), var(--dark-blue), var(--dark-blue) 5%, var(--dark-blue) 60%, var(--dark-blue) 95%);
    border: solid 5px transparent;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--darker-blue-rgba), var(--dark-blue) 99%, transparent);
    background: var(--main-bg) padding-box,  var(--gradient-border) border-box, var(--main-bg) border-box;
    background-position: center center;
    animation: bg-spin 5s linear infinite;
}

@keyframes bg-spin {
    0%{  --border-angle: 0turn;}

    5%{  --border-angle: 0.12turn;}

    10%{  --border-angle: 0.18turn;}
    25%{  --border-angle: 0.25turn;}
    40%{  --border-angle: 0.32turn;}

    45%{  --border-angle: 0.38turn;}
    50%{  --border-angle: 0.5turn;}
    55%{  --border-angle: 0.62turn;}

    60%{  --border-angle: 0.68turn;}
    75%{  --border-angle: 0.75turn;}
    90% { --border-angle: 0.82turn;}

    95%{  --border-angle: 0.88turn;}
    100%{  --border-angle: 1turn;}

}



@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}


.box-comparaison {
    padding: 20px;
    place-content: center;
    color: white;
    text-shadow: 0 1px 0 #000;
    --border-angle: 0turn;
    --main-bg: conic-gradient(from var(--border-angle), var(--dark-blue), var(--dark-blue) 5%, var(--dark-blue) 60%, var(--dark-blue) 95%);
    border: solid 5px transparent;
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--darker-blue-rgba), green 99%, transparent);
    background: var(--main-bg) padding-box,  var(--gradient-border) border-box, var(--main-bg) border-box;
    background-position: center center;
    animation: bg-spin-2 8s linear infinite;
}

@keyframes bg-spin-2 {
    0%{  --border-angle: 0turn;}

    5%{  --border-angle: 0.12turn;}

    10%{  --border-angle: 0.16turn;}
    25%{  --border-angle: 0.25turn;}
    40%{  --border-angle: 0.34turn;}

    45%{  --border-angle: 0.38turn;}
    50%{  --border-angle: 0.5turn;}
    55%{  --border-angle: 0.62turn;}

    60%{  --border-angle: 0.66turn;}
    75%{  --border-angle: 0.75turn;}
    90% { --border-angle: 0.84turn;}

    95%{  --border-angle: 0.88turn;}
    100%{  --border-angle: 1turn;}
}


.container-section {

    padding-top: 3rem;
    padding-bottom:3rem;

    h2 {
        color: var(--light-brown);
        position: relative;
    }
    img {
        max-width: 100%;
    }
}