@charset "utf-8";
/* */


/* === BASES INDISPENSABLES === */

/* boites */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* clearfix (flottants) */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* navigation */
nav ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* images */
img {
    display: block;
}

/* texte caché */
.hdn__text {
    font-size: 0;
    margin: 0;
}

/* =================== */

/* == VARIABLES == */
:root {

    /* couleurs */
    --light-color:#9cbdde;
    --dark-color:#0a0f47;
    --medium-color:#fc7017;
    --neutral-color:#f5e8e0;
    
}

/* == TYPOGRAPHIE == */

body {
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden; /* empêche le débordement horizontal */
}

.text__center {
    text-align: center;
}

/* titres */
.title {
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 800;
}

.title-dark {
    color: var(--dark-color);
    font-size: 40px;
}

.title-white {
    color: #ffffff;
}

.subtitle {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 40px;
}

.subtitle-white {
    color: #ffffff;
}

.p-white {
    color: #ffffff;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 0.75em;
    font-style: italic;
    margin-bottom: 30px;
}

.p-neutral {
    color: var(--neutral-color);
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 0.75em;
    font-style: italic;
}

/* bande grise entre sous-titre et paragraphe */
.bande-grise {
    background-color: var(--neutral-color);
    height: 1.5px;
    width: 53px;
}

/* == BOUTONS & CTA == */
a {
    text-decoration: none;
    display: block;
    margin: auto;
}

button {
    text-decoration: none;
    display: block;
    margin: auto;
}

/* classe générale des CTA */
.btn {
    display: block;
    transition: transform 0.25s ease, background-color 0.3s;
}

/* btn-1 */
.btn-1,
.btn-1 :visited {
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement */

    background-color: #ffffff;
    border: none;
    border-radius: 15px;
    width: 200px;
    height: 40px;

    color: var(--dark-color);
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
}

.btn-1:hover,
.btn-1:focus,
.btn-1:active {
    background-color: var(--dark-color);
    color: #ffffff;
}

/* =================== */

/* == GENERAL == */

/* == HEADER == */

header {
    height: 60px;
}

.header__content {
    height: inherit;
    align-items: center;

}

/* navigation */
.main__nav a,
.main__nav a:visited {
    color:var(--dark-color);
    font-size: 14px;
    text-transform: uppercase;
}

.logo {
    width: 20%;
    height: auto;
    margin-top: 70px;
    margin-bottom: 100px;
}

/* icone rechercher */
/* .ico__search {
    background-image: url(../images/search.svg);
    background-size: contain;
} */

/* == MAIN == */

/* -- SLIDER -- */
.slider {
    background: transparent url(../images/slider_1.jpg) no-repeat center center;
    background-size: cover;
    height: 730px;
    position: relative;

     /* centrage vertical + horizontal */
    justify-content: center;  /* centre horizontalement */

    text-align: center;       /* centre le texte à l'intérieur */
}

.slider-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.0) 100%
    );
    z-index: 1;

  }

.slider__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2; /* passe au-dessus du gradient */
}

.slider__content h1,
.slider__content h2 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.title-slider {
    margin-bottom: 0px;
}

.email__content ::placeholder {
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    gap: 15px;
}

.email__content input {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: 15px;
    width: 250px;
    height: 35px;
    font-weight: 300;
    font-style: italic;
    padding: 15px;
    animation: fadeIn 1.2s ease-out both;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.email__message {
    color: #ffffff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

.btn-1-position {
    margin-top: 20px;
}

/* réseaux sociaux */
.social__nav {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    z-index: 3; /* passe au-dessus du gradient */
}

.social__nav ul {
    display: flex;
    gap: 20px; /* espace horizontal entre les icônes */
    list-style: none;
    padding: 0;
    margin: 0;
  }

.social__nav a,
.social__nav a:visited {
    display: block;
    background-size: contain;
    height: 27px;
    width: 27px;
}

.ico__li {
    background-image: url(../images/linkedin.png);
}

.ico__in {
    background-image: url(../images/instagram.png);
}


/* -- INFOS RIVERSE -- */

.information {
    display: flex;                  /* active Flexbox */
    align-items: center;            /* centre verticalement les blocs */
    justify-content: space-around;  /* espace entre image et texte */
    height: auto;                   /* laisse le contenu décider de la hauteur */
    padding: 35px 20px;
    background-color: var(--neutral-color);
    flex-wrap: wrap;              /* permet aux blocs de passer à la ligne sur petit écran */
    background: linear-gradient(
        to bottom,
        #f5e8e0 0%,
        #fff 100%
    );
  }
  
  .information__image img {
    width: 150%;    /* l'image remplit son bloc */
    max-width: 500px; /* limite la taille maximale */
    border-radius: 10px; /* optionnel */
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  }
  
  .information__text {
    color: var(--dark-color);
    text-align: left;   /* ou center si tu veux */
    max-width: 600px;
  }

  .information__text h1 {
    margin-bottom: 20px;
  }

  .information__text h2 {
    margin-bottom: 40px;
  }

  .information__text p {
    margin-bottom: 40px;
  }


/* == FOOTER == */

.footer {
    background-color: #ffffff;
    padding: 20px 0;
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement */
  }
  
  .footer__logo {
    width: 150px; /* ajuste selon ton design */
    height: auto;
    margin-bottom: 20px;
  }