:root {
    --beige: #fdf6f0;
    --vert: #c5ccc0;
    --vertFonce: #79866f;
    --grisClair: #efeeed;
    --gris999: #999;
    --blanc: #fff;
    --bleu: #5c6655;
    --bleuFonce: #424242;
    --bleuFonce2: #424242;
    --orange: #C5846E;
    --orangeClair: #f3e3d7;
}


/*******FONT***********/
html {
    font-family: 'Roboto', sans-serif;
}

@font-face {
    font-family: 'Bon Vivant Family Serif';
    src: url('./fonts/BonVivantSerif.eot');
    src: url('./fonts/BonVivantSerif.eot?#iefix') format('embedded-opentype'),
    url('./fonts/BonVivantSerif.woff2') format('woff2'),
    url('./fonts/BonVivantSerif.woff') format('woff'),
    url('./fonts/BonVivantSerif.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bon Vivant Family Regular';
    src: url('./fonts/BonVivant-Regular.eot');
    src: url('./fonts/BonVivant-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/BonVivant-Regular.woff2') format('woff2'),
    url('./fonts/BonVivant-Regular.woff') format('woff'),
    url('./fonts/BonVivant-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bon Vivant Family Serif Bold';
    src: url('./fonts/BonVivantSerifBold.eot');
    src: url('./fonts/BonVivantSerifBold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/BonVivantSerifBold.woff2') format('woff2'),
    url('./fonts/BonVivantSerifBold.woff') format('woff'),
    url('./fonts/BonVivantSerifBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Hillmont';
    src: url('./fonts/HillmontRegular.eot');
    src: url('./fonts/HillmontRegular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/HillmontRegular.woff2') format('woff2'),
    url('./fonts/HillmontRegular.woff') format('woff'),
    url('./fonts/HillmontRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Megastina';
    src: url('./fonts/Megastina.eot');
    src: url('./fonts/Megastina.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Megastina.woff2') format('woff2'),
    url('./fonts/Megastina.woff') format('woff'),
    url('./fonts/Megastina.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Miralova';
    src: url('./fonts/Miralova-Regular.eot');
    src: url('./fonts/Miralova-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Miralova-Regular.woff2') format('woff2'),
    url('./fonts/Miralova-Regular.woff') format('woff'),
    url('./fonts/Miralova-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Westonia';
    src: url('./fonts/Westonia.eot');
    src: url('./fonts/Westonia.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Westonia.woff2') format('woff2'),
    url('./fonts/Westonia.woff') format('woff'),
    url('./fonts/Westonia.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'RomanticCouple';
    src: url('./fonts/RomanticCouple.eot');
    src: url('./fonts/RomanticCouple.eot?#iefix') format('embedded-opentype'),
    url('./fonts/RomanticCouple.woff2') format('woff2'),
    url('./fonts/RomanticCouple.woff') format('woff'),
    url('./fonts/RomanticCouple.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Kallinsha';
    src: url('./fonts/Kallinsha.eot');
    src: url('./fonts/Kallinsha.eot?#iefix') format('embedded-opentype'),
    url('./fonts/Kallinsha.woff2') format('woff2'),
    url('./fonts/Kallinsha.woff') format('woff'),
    url('./fonts/Kallinsha.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

.bon {
    font-family: 'Bon Vivant Family Serif', cursive;
    line-height: 1.2em;
}

.bon.font700 {
    font-family: 'Bon Vivant Family Serif Bold', cursive;
    line-height: 1.2em;
}

.kallinsha {
    font-family: 'Kallinsha', cursive;
    font-weight: initial !important;
}

.romantic {
    font-family: 'RomanticCouple', cursive;
    font-weight: initial !important;
}

.hillmont {
    font-family: 'Hillmont', cursive;
    font-weight: initial !important;
}

.magestina {
    font-family: 'Megastina', cursive;
    font-weight: initial !important;
}

.miralova {
    font-family: 'Miralova', cursive;
    font-weight: initial !important;
}

.westonia {
    font-family: 'Westonia', cursive;
    font-weight: initial !important;
}

.script {
    font-family: 'Kallinsha', cursive;
    font-weight: initial !important;
    letter-spacing: -.01em;
}

.bon.line30 {
    line-height: 30px !important
}

.bon.line40 {
    line-height: 40px !important
}

.bon.line50 {
    line-height: 50px !important
}

.bon.line80 {
    line-height: 80px !important
}

.lobster {
    font-family: 'Lobster', cursive;
}

/***********ICONS****************/


.icon.parrain:before {
    content: "\e92d";
}
.icon.refresh:before {
    content: "\e92a";
}
.icon.send:before {
    content: "\e92b";
}
.icon.intuitive:before {
    content: "\e901";
}
.icon.myintuitive:before {
    content: "\e929";
}
.icon.presta:before {
    content: "\e905";
}
.icon.option:before {
    content: "\e906";
}
.icon.valide:before {
    content: "\e902";
}
.icon.complet:before {
    content: "\e907";
}
.icon.nomade:before {
    content: "\e908";
}
.icon.accompagne:before {
    content: "\e909";
}
.icon.snap:before {
    content: "\e90a";
}
.icon.custom:before {
    content: "\e90b";
}
.icon.creneau:before {
    content: "\e90c";
}
.icon.reserve:before {
    content: "\e90d";
}
.icon.dashboard:before {
    content: "\e90e";
}
.icon.mkt:before {
    content: "\e90f";
}
.icon.responsive:before {
    content: "\e910";
}
.icon.team:before {
    content: "\e911";
}
.icon.unlocked:before {
    content: "\e912";
}
.icon.cheque:before {
    content: "\e913";
}
.icon.send-money:before {
    content: "\e914";
}
.icon.add-file:before {
    content: "\e915";
}
.icon.del-file:before {
    content: "\e916";
}
.icon.client:before {
    content: "\e917";
}
.icon.caisse:before {
    content: "\e918";
}
.icon.account:before {
    content: "\e919";
}
.icon.inventaire:before {
    content: "\e91a";
}
.icon.ivy:before {
    content: "\e920";
}
.icon.collaborateur:before {
    content: "\e921";
}
.icon.chat:before {
    content: "\e922";
}
.icon.sms:before {
    content: "\e923";
}
.icon.devis:before {
    content: "\e924";
}
.icon.equipe:before {
    content: "\e927";
}
.icon.stock:before {
    content: "\e92e";
}
.icon.produit:before {
    content: "\e92f";
}
.icon.agenda:before {
    content: "\e938";
}
.icon.facture:before {
    content: "\e900";
}
.icon.error:before {
    content: "\e925";
}
.icon.cb:before {
    content: "\e91d";
}
.icon.mail:before {
    content: "\e91b";
}
.icon.cadeau:before {
    content: "\e91f";
}
.icon.close:before {
    content: "\e904";
}
.icon.user:before {
    content: "\e91e";
}
.icon.phone:before {
    content: "\e91c";
}
.icon.download:before {
    content: "\e92c";
}
.icon.prev:before {
    content: "\e926";
}
.icon.next:before {
    content: "\e928";
}
.icon.menu:before {
    content: "\e903";
}


/***********COULEURS****************/
.vert {
    color: var(--vert);
}

.vert.fonce {
    color: var(--vertFonce);
}

.blanc {
    color: var(--blanc);
}

.gris9 {
    color: var(--gris999);
}

.bleu.fonce, .noir {
    color: var(--bleuFonce);
}

.orange.fonce {
    color: var(--orange);
}

.orange {
    color: var(--orangeClair);
}

/***********FONDS****************/
.fvc {
    background-color: var(--vert);
}

.fv {
    background-color: var(--vertFonce);
}

.fg {
    background-color: var(--grisClair);
}

.fn {
    background-color: var(--bleuFonce);
}

.fb {
    background-color: var(--blanc);
}

.fbeige {
    background-color: var(--beige);
}

.fo {
    background-color: var(--orange);
}

.foc {
    background-color: var(--orangeClair);
}

.fn03 {
    background-color: rgba(0, 0, 0, 0.3);
}

.fn05 {
    background-color: rgba(0, 0, 0, 0.5);
}

.fb05 {
    background-color: rgba(255, 255, 255, 0.5);
}

.after.deg-bleu-vert::after {
    opacity: 0.7;
    background: #002040;
    background: linear-gradient(-90deg, rgba(0, 32, 64, 1) 50%, rgba(76, 187, 154, 1) 100%);
}

.after.deg-vert-bleu::after {
    opacity: 0.7;
    background: #002040;
    background: linear-gradient(-90deg, rgba(76, 187, 154, 1) 100%, rgba(0, 32, 64, 1) 75%);
}

.after.afterfbl::after {
    background-color: var(--bleu) !important;
    opacity: 0.5 !important
}

/***********border****************/
.bbb {
    border-bottom: 1px solid var(--blanc);
}

.bbv {
    border-bottom: 1px solid var(--vert);
}

.bbbl {
    border-bottom: 1px solid var(--bleu);
}

.bbao {
    border-bottom: 1px solid var(--orange);
}

.bbg {
    border-bottom: 1px solid var(--grisClair);
}

.bbv2 {
    border-bottom: 2px solid var(--vert);
}

.bbbl2 {
    border-bottom: 2px solid var(--bleu);
}

.bbao2 {
    border-bottom: 2px solid var(--orange);
}

.bbg2 {
    border-bottom: 2px solid var(--grisClair);
}

.bab {
    border: 1px solid var(--blanc);
}

.bav {
    border: 1px solid var(--vert);
}

.ba2v {
    border: 2px solid var(--vertFonce);
}

.babl {
    border: 1px solid var(--bleu);
}

.bao {
    border: 1px solid var(--orange);
}

.ba10 {
    border: 10px solid var(--grisClair);
}

.border-left-top {
    border-top-left-radius: 100px;
}

.border-right-top {
    border-top-right-radius: 100px;
}

.border-left-bottom {
    border-bottom-left-radius: 100px;
}

.border-right-bottom {
    border-bottom-right-radius: 100px;
}

.pv {
    outline: 2px dashed var(--vertFonce);
    outline-offset: -10px;
}

.pb {
    outline: 2px dashed var(--blanc);
    outline-offset: -10px;
}

/***********DEFILE (mots défilants)***********/
.defile-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
    height: 1.2em;
    width: 380px; /* ← ajuste selon ton mot le plus long */
}

.defile {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    left: 0;
}

.defile.word2 {
    top: 0;
}

.defile.word3 {
    top: 100%;
}

.defile.up {
    animation: slideUp 0.8s ease forwards;
}

.defile.down-up {
    animation: slideDownUp 0.8s ease forwards;
}

@keyframes slideUp {
    from {
        top: 0;
    }
    to {
        top: -100%;
    }
}

@keyframes slideDownUp {
    from {
        top: 100%;
    }
    to {
        top: 0;
    }
}

/*******PARALLAX***********/


/***********DIVERS****************/
.hexagon {
    aspect-ratio: cos(30deg);
    clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hexagon.ombre {
    filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.1))
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    left: 22px;
    width: 57px;
    height: 57px;
    transform: rotate(145deg) skew(22.5deg);
}

#header, #nav {
    background-color: rgb(255 255 255 / 50%);
    backdrop-filter: blur(5px);
}

.filtre {
    backdrop-filter: brightness(1.1) blur(5px);
}

.click {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    -webkit-transition: 0.3s ease 0s;
    -moz-transition: 0.3s ease 0s;
    -o-transition: 0.3s ease 0s;
    -ms-transition: 0.3s ease 0s;
    transition: 0.3s ease 0s;
}

.click:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--vertFonce) !important;
}


.cfg-card-bump {
    animation: cfgCardBump .22s cubic-bezier(.4, 0, .2, 1);
}

.cfg-pop {
    animation: cfgPop .28s cubic-bezier(.4, 0, .2, 1);
}

.cfg-line-enter {
    animation: cfgLineIn .24s ease;
}

.cfg-mobile-bar-hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

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

@keyframes cfgCardBump {
    0% {
        transform: scale(1)
    }
    45% {
        transform: scale(1.02)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes cfgPop {
    0% {
        transform: scale(1)
    }
    45% {
        transform: scale(1.08)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes cfgLineIn {
    from {
        opacity: 0;
        transform: translateX(-6px)
    }
    to {
        opacity: 1;
        transform: translateX(0)
    }
}