/*
Theme Name: Jérôme Lapeyronie
Description: Site web de Jérôme Lapeyronie
Author: Sinda
Author URI: 
Template: twentytwentyfive
Version: 0.1.0
*/

/*variables*/

:root {

  /* Typo                */

    --text-sm: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --text-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
    --text-llg: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --text-xl: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
    --text-xxl: clamp(3rem, 3rem + 1.5vw, 15rem);


  /* Spacing                  */

  --space-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 2rem);
  --space-lg: clamp(2rem, 1.5rem + 2vw, 4rem);

    /* Colors                      */

  --jaune: #FCC00C;
  --noir:#1D1E1B;
  --blanc: #fff ;

  /* Layout                       */

  --container: 72rem;
  --padding: clamp(2rem, 4rem + 1vw, 6rem);
  /* --wrapper: clamp(1rem, 0.8rem + 2vw, 60vw); */
    --wrapper: clamp(5rem, 3vw, 5vw);


  /* Radius                       */

  --radius: clamp(0.5rem, 0.4rem + 0.3vw, 1rem);
}


@font-face {
    font-family: 'kollektifregular';
    src: url('assets/fonts/kollektif-webfont.woff2') format('woff2'),
         url('assets/fonts/kollektif-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'kollektifbold';
    src: url('assets/fonts/kollektif-bold-webfont.woff2') format('woff2'),
         url('assets/fonts/kollektif-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'kollektifitalic';
    src: url('assets/fonts/kollektif-italic-webfont.woff2') format('woff2'),
         url('assets/fonts/kollektif-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: kollektifregular, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    color: var(--noir);
}

html{
  scroll-behavior: smooth;
    scroll-padding-top: 150px; 
}


/*Hero*/


.main-menu a {
  position: relative;
  text-transform: uppercase;
font-size: var(--text-sm);
  text-decoration: none;
}

.main-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.3s ease;
}

.main-menu a:hover::after, .main-menu a.is-active::after{
  transform: scaleX(1);
}

header {
  position: sticky;
  top:0px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.bloc-hero{
  /* background-image: url("assets/bloc-hero.png");
  background-repeat: no-repeat;
  background-position: bottom; */
  display: flex;
  position:relative;
  align-items: center;
  min-height: 100vh;
    padding: var(--wrapper);
}

.spline-scene{
  position: absolute;
  inset: 0;
  z-index: 0;
    pointer-events: none;
}

.spline-scene spline-viewer {
  width: 100%;
  height: 100%;
}

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

.baseline-hero{
  margin-left: 4rem;
  position: relative;
  z-index: 1;
  transform: translateY(-80px);
}

.coach-financier{
    font-family: kollektifregular, sans-serif;
    font-size: var(--text-xl);
}

.baseline{
    font-family: kollektifregular, sans-serif;
    font-size: var(--text-xl);
    margin-top:4rem ;       

}

.hero-h1{
    font-family: kollektifbold, sans-serif;
    font-size: var(--text-xxl);
}

.text-bouton{
    font-family: kollektifbold, sans-serif;
    color: var(--blanc);
    text-transform:uppercase;
    transition: opacity 0.3s ease;
}

.text-bouton:hover {
    opacity:.8;
    transition: opacity 0.3s ease;
}

/*prestation*/

.baseline-presta{
font-family: kollektifregular, sans-serif;
font-size: var(--text-xl);
padding:30px 0px;
}

.prestations{
  background-image: url("assets/fond-prestations.png");
  background-repeat: no-repeat;
  background-position: left top;
  padding: 110px 30px;

}

.domaines{
    padding: var(--space-lg);
    background-color: var(--jaune) ;    
  margin-inline: auto;
    max-width: 1200px;
    box-shadow: 7px 9px 11px rgba(0, 0, 0, 0.19);

}

.row {
    margin-top: 15px;
}

.vignette {
    /* max-width: 300px; */
    background-image: url("assets/bulles.png");
    background-repeat: no-repeat;
    background-position: left top;
    margin: 10px;

}

.titre-presta {
    font-family: kollektifbold, sans-serif;
    color: var(--blanc);
    text-transform:uppercase;
}

/*presentation*/

.presentation{
/* padding: var(--wrapper); */
background: var(--jaune) url("assets/jerome-jaune.png") no-repeat bottom right / contain;
padding: 20vh 10vw;
}

.mon-role{
    font-size: var(--text-xxl);
}

.accompagnement{
    background-color: var(--blanc);
    max-width: 600px;
    padding: var(--space-lg);
}

.intro-pres{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    border-bottom: solid 1px var(--noir);
    padding: 30px;
    z-index: 999;
}

.intro-1 {
    font-size: var(--text-xl);
    padding-right: 50px;
}

.intro-2 {
    font-size: var(--text-lg);
}


.svg-etoile{
    position: absolute;
    transform: translate(-100px,-100px);
    opacity: 0.7;
}

/* .detail-pres{

} */


/*Calendrier*/

.calendrier{
    background-image: url("assets/fond-prestations.png");
    background-repeat: no-repeat;
    background-position: left top;
      padding: var(--wrapper);
}

/*Contact*/

.contact {
    display: flex;
    flex-direction: column;
    /* align-items: baseline; */
    justify-content: space-between;
    padding: var(--wrapper);
    background: url("assets/jerome-ordi.png") no-repeat bottom left / 600px;
    padding: 10vh 10vw 30vh;
}

.h3-contact{
font-family: kollektifregular, sans-serif;
font-size: var(--text-lg);
padding:10px 0px;
}

.bloc-formulaire{
width: 100%;
padding: 0vh 5vw;
}

.coordonnees{
    color: var(--jaune);
    font-family: kollektifbold, sans-serif;
}

.bloc-coordonnees{

max-width: 800px;
}

.labeur-contact{
    font-size: var(--text-base);
    line-height: 1.5;
}

/*animations*/

.reveal-up,
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/* Logo */
.logo {
    max-width: 500px;
    width: 100%;
    height: auto;
    margin-bottom: -2rem;
}



/* Texte */
.message {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    line-height: 1.6;
}

/* Lien */
.message a {
    color: #1C1C1C;
    text-decoration: underline;
    font-weight: 800;
}

.message a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ========================= */
/* BASE  */
/* ========================= */

/* ton CSS ici */

/* ========================= */
/* SMALL DEVICES (≥ 480px)   */
/* ========================= */
@media (min-width: 30em) {

 .row{
display: flex;
flex-direction: column;

}

.div.row:last-child{
    margin-top: 50px;
}

.vignette{
margin-top: 50px;
}

.contact {
    display: flex;
    flex-direction: column;
}

.bloc-coordonnees{
padding-left: 0vw;
}

}


/* ========================= */
/* TABLET (≥ 768px)          */
/* ========================= */
@media (min-width: 48em) {

 .row{
display: flex;
flex-direction: column;
align-items: self-start;

}

.div.row:last-child{
    margin-top: 50px;
}

.vignette{
margin-top: 50px;
}

.contact {
    display: flex;
    flex-direction: column;
}

.bloc-coordonnees{
padding-left: 0vw;
}

}


/* ========================= */
/* LAPTOP (≥ 1024px)         */
/* ========================= */
@media (min-width: 64em) {

.row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.vignette{
    max-width: 300px;
}

.contact {
    display: flex;
    flex-direction: row;
}

.bloc-coordonnees{
padding-left: 10vw;
}

.bloc-footer{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.contact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

}


}


/* ========================= */
/* DESKTOP (≥ 1280px)        */
/* ========================= */
@media (min-width: 80em) {
.row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.contact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

}
}


/* ========================= */
/* LARGE DESKTOP (≥ 1440px)  */
/* ========================= */
@media (min-width: 90em) {
.row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.contact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

}
}


/* ========================= */
/* XL SCREENS (≥ 1600px)     */
/* ========================= */
@media (min-width: 100em) {
.row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.contact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

}
}