/*
 Theme Name:   Focus
 Theme URI:    https://www.phare-web.com/
 Description:  Un thème enfant focalisé sur l'essentiel
 Author:       Phare Web
 Author URI:   https://www.phare-web.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
 GitHub Theme URI: https://github.com/PhareWeb/focus-theme
 GitHub Plugin URI: https://github.com/PhareWeb/focus-theme
*/


:root {
    --base-radius: 0.5rem; /* Ajuster le radius */
    --shadow-intensity: 1.5; /* Ajuster l'intensité de l'ombre */
    --h100: 100px;
    --h150: 150px;
    --h200: 200px;
    --h250: 250px;
    --h300: 300px;
    --h350: 350px;
    --h400: 400px;
    --h450: 450px;
    --h500: 500px;
    --h550: 550px;
    --h600: 600px;
    --h700: 700px;
    --h800: 800px;
}

.layout-default{
    max-width: 1280px;
    padding: 0 20px;
}

.radius{border-radius: calc(var(--base-radius) + 0.1rem * var(--scale-factor));}
.rounded-s{--scale-factor: 1;}
.rounded-md{--scale-factor: 4;}
.rounded-l{--scale-factor: 8;}
.rounded-xl{--scale-factor: 16;}

.shadow{
    box-shadow: 
        calc(0rem * var(--shadow-intensity)) calc(0.2rem * var(--shadow-intensity)) 
        calc(1.5rem * var(--shadow-intensity)) rgba(0, 0, 0, 0.2)
}
.no-shadow{box-shadow: none;}


/*** Image ***/

.cover{object-fit: cover;height: 100%;}
.contain{object-fit: contain !important;height: auto;box-shadow: none;}
.image-wrapper.h100{height: 100px;}
.image-wrapper.h150{height: 150px;}
.image-wrapper.h200{height: 200px;}
.image-wrapper.h250{height: 250px;}
.image-wrapper.h300{height: 300px;}
.image-wrapper.h350{height: 350px;}
.image-wrapper.h400{height: 400px;}
.image-wrapper.h450{height: 450px;}
.image-wrapper.h500{height: 500px;}
.image-wrapper.h550{height: 550px;}
.image-wrapper.h600{height: 600px;}
.image-wrapper.h700{height: 700px;}
.image-wrapper.h800{height: 800px;}

/*** Bouton ***/
.bricks-button i{transition: .2s;}
.bricks-button:hover i{transform: rotate(45deg);}
body .btnLight.btnGhost.bricks-button{background-color: transparent !important;border: 2px solid}
body .btnLight.btnLink.bricks-button{padding: 0 !important;background-color: transparent !important;}
body .btnLight.bricks-button.bricks-background-primary[class*="primary"]{color: var(--bricks-color-pcltbt);}
body .btnLight.bricks-button.bricks-background-primary[class*="primary"]:hover{color: var(--bricks-color-rxhflc);}
body .btnLight.bricks-button.bricks-background-secondary[class*="secondary"]{color: var(--bricks-color-olrola);}
body .btnLight.bricks-button.bricks-background-secondary[class*="secondary"]:hover{color: var(--bricks-color-pcltbt);}
body .btnLight.bricks-button.bricks-background-light[class*="light"]:not(.bricks-lightbox){color: var(--bricks-color-ifocxe);}
body .btnLight.bricks-button.bricks-background-light[class*="light"]:hover{color: var(--bricks-color-hsmntf);}
body .btnLight.bricks-button.bricks-background-dark[class*="dark"]{color: var(--bricks-color-rxhflc);}


@media all and (max-width: 1024px){
    .image-wrapper.h100{height: 90px;}
    .image-wrapper.h150{height: 135px;}
    .image-wrapper.h200{height: 180px;}
    .image-wrapper.h250{height: 225px;}
    .image-wrapper.h300{height: 270px;}
    .image-wrapper.h350{height: 310px;}
    .image-wrapper.h400{height: 355px;}
    .image-wrapper.h450{height: 400px;}
    .image-wrapper.h500{height: 430px;}
    .image-wrapper.h550{height: 460px;}
    .image-wrapper.h600{height: 500px;}
    .image-wrapper.h700{height: 550px;}
    .image-wrapper.h800{height: 600px;}
}
@media all and (max-width: 767px){
    .image-wrapper.h100{height: 85px;}
    .image-wrapper.h150{height: 125px;}
    .image-wrapper.h200{height: 165px;}
    .image-wrapper.h250{height: 190px;}
    .image-wrapper.h300{height: 235px;}
    .image-wrapper.h350{height: 260px;}
    .image-wrapper.h400{height: 300px;}
    .image-wrapper.h450{height: 330px;}
    .image-wrapper.h500{height: 355px;}
    .image-wrapper.h550{height: 380px;}
    .image-wrapper.h600{height: 405px;}
    .image-wrapper.h700{height: 430px;}
    .image-wrapper.h800{height: 455px;}
}
@media all and (max-width: 478px){
    .image-wrapper.h100{height: 80px;}
    .image-wrapper.h150{height: 120px;}
    .image-wrapper.h200{height: 150px;}
    .image-wrapper.h250{height: 175px;}
    .image-wrapper.h300{height: 200px;}
    .image-wrapper.h350{height: 225px;}
    .image-wrapper.h400{height: 250px;}
    .image-wrapper.h450{height: 275px;}
    .image-wrapper.h500{height: 300px;}
    .image-wrapper.h550{height: 325px;}
    .image-wrapper.h600{height: 350px;}
    .image-wrapper.h700{height: 375px;}
    .image-wrapper.h800{height: 400px;}
}