/*
Theme Name: La French 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>La French Snowboard School !</strong>
Version: 2024
*/


/*
VIOLET 842C85
ROSE F2295B
JAUNE d5c300
*/

@import url('https://api.fontshare.com/v2/css?f[]=sora@1&display=swap');

:root {
    --black: #000;
    --white: #FFF;
    --jaune: #d5c300;
    --accent: #842C85;
    --accent2: #F2295B;
    --gradient: linear-gradient(60deg, #842C85, #F2295B);
    --gradient1: linear-gradient(60deg, #d5c300, #F2295B);
}

/*---------- GENERAL ----------*/
* {outline: 0;margin: 0;}
body {font-family: 'Sora', sans-serif; font-size: 1.1em;font-weight: 400;margin: 0;}
.white {color: var(--white);}
a {color:var(--accent);transition: 0.25s ease-out;}
a:hover {color: var(--black);}
.certif {mix-blend-mode: multiply;}

.elementor-button {background: var(--gradient1);border-radius: 55px;transition: 0.25s ease-out;}
.elementor-button:hover {filter: brightness(1.4);color: var(--black);}

.btn-resa .elementor-button {background: var(--gradient);border-radius: 55px;transition: 0.25s ease-out;font-size: 1em;}

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

/*---------- Rotation logo ----------*/
@keyframes rotating {to {transform: rotate(360deg);}}
.rotate {animation: rotating 10s linear infinite;}
.rotate:hover {animation-play-state: paused;}


/*---------- TYPOGRAPHIE ----------*/
h1, h2, h3, .accroche, .hashtag {font-weight: 700;margin: 0;text-wrap: balance;}
h1 {font-size: 6em;background: var(--gradient);-webkit-text-fill-color: transparent;-webkit-background-clip: text;line-height: 0.8em;}
h1 span {font-size: 0.5em;font-weight: 300;display: block;}
h2 {font-size: 4em;line-height: 1em;padding-bottom: 8px;}
h2 span {font-size: 0.6em; font-weight: 300;line-height: 1em;padding-bottom: 10px; background: var(--gradient);-webkit-text-fill-color: transparent;-webkit-background-clip: text; display: block;}

.french::after{content: url(http://la-french-snowboard.local/wp-content/uploads/picto.svg);width: 15px;display: inline-block;transform: translate(0, -13px);}
.white .french::after{content: url(http://la-french-snowboard.local/wp-content/uploads/picto-blanc.svg);width: 15px;display: inline-block;transform: translate(0, -13px);}
h3 {font-size: 1.3em;font-weight: 100;padding-bottom: 10px;}

.accroche {font-size: 2em;background: var(--gradient);-webkit-text-fill-color: transparent;-webkit-background-clip: text;line-height: 1.2em;padding: 4em 0;}
.hashtag {font-size: 4em;line-height: 1.2em;z-index: 1;}
.right {text-align: right;}

.numero {font-size: 4em;font-weight: 900;line-height: 1em;margin-right: 20px;}
.txt-p {font-size: 0.9em;}
.txt-p h2, .txt-p h3{font-size: 2em;}

@media all and (max-width: 768px){
body {font-size: 1em;}
h1 {font-size: 3em;line-height: 1.2;}
H1 strong {font-size: 2em;}
h2 {font-size: 2em;}
footer h2 {font-size: 3em !important;}
.hashtag {font-size: 2em;padding: 10px 0;}
.txt-p h2, .txt-p h3{font-size: 1.8em;}
}


/*---------- filtres écoles ----------*/
#filtre button {all:initial;font-size: 1em;font-family: 'sora';padding-right: 10px;transition: 0.25s;font-weight: 700;}
#filtre button:hover {padding-left: 10px;padding-right: 0;}

/*---------- Boucle écoles ----------*/
.boucle-liste {border-top: solid 1px var(--black);position: relative;}
.boucle-liste h2 {font-size: 1.5em;}
.boucle-liste h2 a::after {
    content: '➔';
    position: absolute;
    right: 0;
    opacity: 1;
    color: var(--accent2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.boucle-liste h2 a::before {
    content: '➔';
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateX(-20px);
    color: var(--accent2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.boucle-liste h2 a:hover {
    padding-left: 30px;
}
.boucle-liste h2 a:hover::after {
    transform: translateX(20px);
    opacity: 0;
}
.boucle-liste h2 a:hover::before {
    transform: translateX(0);
    opacity: 1;
}

/*---------- BLOCKQUOTE ----------*/
blockquote {display: flex; align-items:center;justify-content: center;}
blockquote p{text-align: center;padding: 0 10px;}
blockquote:before {content: "«";font-size: 100px;font-weight: 700;}
blockquote:after {content: "»";font-size: 100px;font-weight: 700;}


/*---------- CARD ----------*/
.card h2:after{all: initial;font-size: 2em;}
.card h2{font-size: 1.5em;}

/*---------- PAGE ECOLE ----------*/
a.categorie-lien {border-bottom: solid 1px;}
.white h2 a.categorie-lien {color: var(--white);}
.white h2 a.categorie-lien:hover {color: var(--black);}
.pres-ecole h2{font-size: 2em;}


/*---------- MENU ECOLE ----------*/
#menuecole {list-style-type: none;padding-inline-start: 0;font-size: 1.2em;font-weight: 400;}
#menuecole a {color: var(--black);}
#menuecole a:hover {color: var(--accent2);}
#menuecole li {list-style-type: none;padding: 10px 0;}
#menuecole li:not(:last-child) {border-bottom: solid 1px;border-image: var(--gradient) 1;}
#menuecole .sub-menu {padding-inline-start: 0;font-size: 0.8em;}
.lien a, #menuecole .sub-menu li {border: none;transition: 0.25s;}
.lien a:hover, #menuecole .sub-menu li:hover {padding-left: 10px;}
.e-filter-item::before, .lien a::before, #menuecole .sub-menu li::before {content: '➔';padding-right: 5px;transform: scale(0.5);left: 0;color: var(--accent2);}


/*---------- FOOTER ----------*/
footer {font-size:0.9em;background-color: var(--black);color: var(--white);}
footer H2 {font-size: 6em;font-weight: 800;background: var(--gradient);-webkit-text-fill-color: transparent;-webkit-background-clip: text; }
footer h2:after{all: initial;}
footer a {color: var(--white);}
footer a:hover {color: var(--accent2);}
h3 {font-weight: 600;}
footer .copyright {font-size: 0.7em;}
footer ul {list-style-type: none;padding-inline-start: 0;}
footer ul li {color: var(--accent2);}
footer H5, footer p {font-size: 0.9em;margin: 4px 0;}
footer .arrow a:hover {color: var(--white);}

/*---------- DRAPEAU Traduction----------*/
#trp-floater-ls.trp-color-dark {background: var(--black);}#trp-floater-ls.trp-top-right {bottom: auto;top: 0;right: 52px;border-radius: 0;}
#trp-floater-ls.trp-floater-ls-flags {width: 52px;height: 52px;z-index: 9999;}
#trp-floater-ls-current-language .trp-floater-ls-disabled-language.trp-ls-disabled-language {padding: 0;}
#trp-floater-ls.trp-floater-ls-flags:hover {width: 52px;}
#trp-floater-ls img {max-width: 52px;}
.trp-language-wrap a {padding: 10px 1px 10px 1px;}

@media all and (min-width: 768px){
#trp-floater-ls.trp-top-right {bottom: auto;top: 0;right: 70px;border-radius: 0;}
#trp-floater-ls.trp-floater-ls-flags {width: 70px;height: 70px;}
#trp-floater-ls.trp-floater-ls-flags:hover {width: 70px;}
#trp-floater-ls.trp-floater-ls-flags:hover .trp-flag-image, .trp-flag-image {width:30px;}
#trp-floater-ls.trp-floater-ls-flags #trp-floater-ls-current-language .trp-floater-ls-disabled-language.trp-ls-disabled-language {
margin-top: 20px;}
}



/*---------- MARQUEE ----------*/

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  padding: 5px 0;
  background: var(--gradient1);
  /*transform: skewY(-3deg); */
  color: var(--white);
  font-size: 2vw;
  white-space: nowrap;
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 100%;
  animation: scroll 20s linear infinite;
}
.marquee__group img {width: 20px;margin: 0 10px;}

@keyframes scroll {from {transform: translateX(0);}to {transform: translateX(calc(-100% - 2rem));}}

@media only screen and (min-width: 360px) {
    .marquee {font-size: 1.5vw;}
}


/* Style de l'info-bulle MENU */
.menu-item a[data-title] {position: relative;}
.menu-item a[data-title]::before {
    content: attr(data-title);
    position: absolute;
    bottom: 80%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: var(--gradient);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.menu-item a[data-title]:hover::before {opacity: 1;visibility: visible;}

/* Annonces La French */
.annonces {
    border: solid 2px var(--accent2);
    border-radius: 1em;
    padding: 40px 20px;
    max-height: 200px;
    overflow: scroll;
    width: 90%;
    font-size:0.8em;
}
.annonces hr {margin: 30px 0;background: var(--gradient);height: 2px;border: none;}
.annonces h3 {margin-bottom: 5px;}





/* NEWSLETTER */
.newsletters h3 {padding-bottom: 5px;}
.inf-rgpd {font-size: 0.7em;}
.champ-news {
    border-radius: 50px;
    line-height: 1.4;
    font-size: 15px;
    min-height: 40px;
    padding: 5px 14px;
    width: 60%;
    margin: 20px 0;
}



/* Info bulle utøpeak */
a.utopeak {position: relative;}
a:hover.utopeak {color: #d1c900 !important;}
a.utopeak::before {content: attr(data-title);position: absolute;bottom: 200%;left: 50%;transform: translateX(-50%);color: #2b2b2b;background-color: #d1c900;padding: 5px 8px;font-size: 1em;white-space: nowrap;opacity: 0;visibility: hidden;}
a.utopeak:hover::before {opacity: 1;visibility: visible;}