/*
Theme Name: Cali Six
Theme URI: https://www.drvincentwidemann.fr/
Author: AmyXdesign
Description: Thème pour le site du docteur Vincent Widemann
Version: 1.0
Tags: web design, médecine
Text Domain: cali-six
*/


/* ------------------------ Installation en local des polices et code CSS correspondant ---------------------- */ 

@font-face{
    font-family: 'DidotBold';
    src: url('assets/fonts/DidotBold.woff2') format("woff2");
}

@font-face{
    font-family: 'Didot';
    src: url('assets/fonts/Didot.woff2') format("woff2");
}

@font-face{
    font-family: 'DidotItalic';
    src: url('assets/fonts/DidotItalic.woff2') format("woff2");
}


@font-face{
    font-family: 'ProximaNovaRegular';
    src: url('assets/fonts/ProximaNova-Regular.woff') format("woff");
}

@font-face{
    font-family: 'ProximaNovaSemiBold';
    src: url('assets/fonts/ProximaNova-Semibold.woff') format("woff");
}

@font-face{
    font-family: 'ProximaNovaBold';
    src: url('assets/fonts/ProximaNova-Bold.woff') format("woff");
}

@font-face{
    font-family: 'ProximaNovaLight';
    src: url('assets/fonts/ProximaNova-Light.woff') format("woff");
}



:root {
  --black: #141414;
  --white: #FCFCFC;
  --orange: #F78C2F;
  --bleu: #27A9D9;
  --beige: #FCEAD9;
  --bleu-clair: #92CFE7;
}


a {
    text-decoration:none;
}

body{
    background: var(--white);
    margin:0;
    padding:0;
}


h1{
    font-family: 'Didot';
    letter-spacing: -2;
    margin:0;
}

h2, h3, h6{
    margin:0;
}

p{
    font-family:'ProximaNovaRegular';
    margin:0;
}

button{
    border: 1.5px solid var(--orange);
    background-color: var(--white);
    border-radius: 50px;
    padding: 10px 30px;
    color: var(--orange);
    font-family: 'ProximaNovaSemiBold';
    font-size: 0.9rem;
    transition:all 0.2s;
    cursor:pointer;
    &:hover, :active, :focus{
        background-color:var(--orange);
        border: 1.5px solid var(--white);
        transition:all 0.2s;
        color:var(--white);
    }
    &.bleu{
        background-color:var(--bleu);
        border: 1.5px solid var(--bleu);
        color:var(--white);
        transition:all 0.2s;
        &:hover, :active, :focus{
            background-color:var(--white);
            color:var(--bleu);
            transition:all 0.2s;
        }
    }

    &.orange{
        background-color:var(--orange);
        border: 1.5px solid var(--white);
        color:var(--white);
        transition:all 0.2s;
        &:hover, :active, :focus{
            background-color:var(--white);
            border: 1.5px solid var(--orange);
            color:var(--orange);
            transition:all 0.2s;
        }
    }
}




/* ------------------------------- Bouton back to top -------------------------------- */
button.back-to-top{
    margin: 0 !important;
    padding: 0 !important;
    background: var(--accent);
    height: 0px;
    width: 0px;
    overflow: hidden;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    color: transparent;
    clear: both;
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    display: block;
    border: none;
    right: 50px;
    bottom: 75px;
    font-size: 0px;
    outline: 0 !important;
    z-index: 3;
    transition: all .3s ease-in-out;
        & svg {
        stroke: var(--orange);
        fill: var(--orange);
    }
  }
  
  button.back-to-top:hover,
  button.back-to-top:active,
  button.back-to-top:focus{
    outline: 0 !important;
  }

button.back-to-top.show {
    display: block;
    background: var(--white);
    font-size: 25px;
    right: 25px;
    bottom: 50px;
    height: 45px;
    width: 45px;
    visibility: visible;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.151);
    & svg {
        stroke: var(--orange);
        fill: var(--orange);
    }
  }


button.back-to-top.show:active {
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  }

.back-to-top svg{
    width: 70%;
    position:relative;
    top:0px;
  }