/*
Theme Name: Theme by utøpeak
Theme URI: https://www.utopeak.agency
Author: utøpeak.agency
Author URI: https://www.utopeak.agency
Description: Création sur mesure pour <strong>l'Agence Atypeak</strong> !
Version: 2025
*/


@import url('https://fonts.cdnfonts.com/css/sora-3');
:root {
    --gris: #435059;
    --bleu: #6b869b;
    --ocre: #d14e19;
    --white: #FFF;
    --gradient: linear-gradient(60deg, #d14e19, #435059);
}

/*---------- GENERAL ----------*/
* {outline: 0;margin: 0;}
body {font-family: 'Sora', sans-serif;font-weight: 300;font-size: 1em;color: var(--gris);line-height: 1.6em}
#page-content {margin-top: -75px;}
strong {font-weight: 700;}

a {color:var(--ocre);transition: 0.25s ease-out;text-decoration: none;}
a:hover {color: var(--bleu);}

.ocre {color: var(--white); background-color: var(--ocre); padding: 3em;}
.bleu {color: var(--white); background-color: var(--bleu); padding: 3em;}
.gris {color: var(--white); background-color: var(--gris); padding: 3em;}
.gradient {color: var(--white); background: var(--gradient); padding: 3em;}
.gradient a {color: var(--white);}

/*---------- TYPOGRAPHIE ----------*/
h1, h2, h3, h4 {font-weight: 700;line-height: 1.15em; letter-spacing: -0.025em;margin-bottom: 0.2em;}
h1 {font-size: 5.6em;}
h2 {font-size: 4.2em;}
h3 {font-size: 3.15em;}
h4 {font-size: 2.4em;}
small {font-size: 0.75em;}
.accroche {font-size: 1.5em;font-weight: 500;}
.accrochefooter {font-size: 7em; font-weight: 700;line-height: normal;}

ul {padding-inline-start: 0;}
li {list-style:none;}
.e-n-accordion li::before {
    content: '';
    width: 14px;
	height:14px;
    display: inline-block;
    top:2px;
    left: 0;
    margin-right: 5px;
	background: no-repeat url("img/etoile.png");
    background-size: cover;
}


@media all and (max-width: 768px){
body {font-size: 1em; line-height: 1.4;}
.ocre, .bleu, .gris {padding: 1em;}
h1, h2, h3, h4 {line-height: 1em;}
h1 {font-size: 3.2em;}
h2 {font-size: 2.6em;}
h3 {font-size: 2.2em;}
h4 {font-size: 2.4em;}
small {font-size: 0.75em;}
.accrochefooter {font-size: 3em;}
    .accroche {font-size: 1.25em;}
}


/*---------- BOUTON ----------*/
.elementor-button {background-color: var(--ocre);color: var(--white);border-radius: 55px;transition: 0.25s ease-out;}
.elementor-button:hover {background-color: var(--bleu);}

/*---------- LIEN ----------*/
.link a {position: relative;display: inline-block;padding-bottom: 3px;margin-top: 5px;transition: color 0.3s ease;}
.link a::before {content: '➔';position: absolute;right: -25px;color: var(--ocre);opacity: 0;transform: translateX(-20px) scale(0.5);transition: transform 0.3s ease, opacity 0.3s ease;font-size: 18px;}
.link a::after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: var(--ocre);transform: scaleX(1);transform-origin: right;transition: transform 0.4s ease;}
.link a:hover::before {opacity: 1;transform: translateX(0) scale(1);}
.link a:hover::after {transform: scaleX(0.3);transform-origin: right;}

/*---------- ACCORDEON ----------*/
#accordeon ~ .e-n-accordion-item-title-header {font-size: 4.2em;font-weight: 700;}
#accordeon ~ .e-n-accordion-item {background-color: var(--occre);}