/******************** variables ********************/

:root{

    /***** Colors *****/

    /* Neutral */
    --white: #FFFDF5;
    --black: #292929;


    /* Primary */
    --accent: #C23643;


    /* Secondary */
    --light-accent: #C2364360;


    /***** Texts *****/

    --main-font: "Rubik", sans-serif;

    /* font size */
    --H1-size: 5rem;
    --H2-size: 3.125rem;
    --H3-size: 2.188rem;
    --H4-size: 1.563rem;

    --H1-small: 2.5rem;

    --text-size-type1: 1.125rem;
    --text-size-type2: 1.563rem;
    --text-size-type3: 1.563rem;
    --text-size-type4: 1.25rem;

    --H2-size-mobile: 2.5rem;
    --H3size-mobile: 1.875rem;


    /* font weight */
    --black-font: 900;
    --bold: 600;
    --semi-bold: 500;
    --regular: 400;
    --light: 300;


    /* line-height */
    --H1-line-height: 100%;
    --default-line-height: auto;

    
    /***** Butons *****/
    --border-default: 2px;

    /***** Sapcing *****/
    --tiny-spacing: 5px;
    --small-spacing: 15px;
    --regular-spacing: 80px;
    --medium-spacing: 40px;
    --Big-spacing: 100px;
    --Extra-spacing: 120px;

}


/******************** fin des variables ********************/

/******************** Mise en page ********************/
*{box-sizing: border-box;}

html{
    margin-right: 0px;
    margin-left: 0px;
    background-color: var(--white);
}

[class*="col-"] {
    /*min-height: 80px;*/
    box-sizing: border-box;
    /*border: 1px solid red;
    background-color: rgba(255, 0, 0, 0.12);*/
}

/********************* Largeur des colonnes *********************/

.col-1 { flex-basis: 8.33%; width: 8.33%; }
.col-2 { flex-basis: 16.66%; width: 16.66%; }
.col-3 { flex-basis: 25%; width: 25%; }
.col-4 { flex-basis: 33.33%; width: 33.33%; }
.col-5 { flex-basis: 41.66%; width: 41.66%; }
.col-6 { flex-basis: 50%; width: 50%; }
.col-7 { flex-basis: 58.33%; width: 58.33%; }
.col-8 { flex-basis: 66.66%; width: 66.66%; }
.col-9 { flex-basis: 75%; width: 75%; }
.col-10 { flex-basis: 83.33%; width: 83.33%; }
.col-11 { flex-basis: 91.66%; width: 91.66%; }
.col-12 { flex-basis: 100%; width: 100%; }



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

/*Pour prévoir un inversement des éléments pour responsive*/
.row-reverse{
    display: flex;
    flex-wrap: wrap;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-right: var(--small-spacing);
    padding-left: var(--small-spacing);
}


/******************** Annimations ********************/

@keyframes NomAnimation {
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}

.element {
animation: NomAnimation 2s ease-in-out;
}

/** Librairy d'animations **/
/* Dans le HTML directement : <h1 class="animate__animated animate__bounce">An animated element</h1> */


/******************** Textes et bases ********************/

/** Heading **/



h1, h2, h3, h4{
    font-family: var(--main-font);
}

.type-h1{
    font-size: var(--H1-size);
    font-weight: var(--black);
    line-height: var(--H1-line-height);
}

.type-h1-small{
    font-size: var(--H1-small);
    font-weight: var(--regular);
    line-height: var(--H1-line-height);

}

.type-h2{
    font-size: var(--H2-size);
    font-weight: var(--regular);
    line-height: var(--default-line-height);
}

.type-h3{
    font-size: var(--H3-size);
    font-weight: var(--light);
    line-height: var(--default-line-height);
}

.type-h4{
    font-size: var(--H4-size);
    font-weight: var(--regular);
    line-height: var(--default-line-height);
}


/** Body **/

.body{
    font-family: var(--main-font);
}


.type-1{
    font-size: var(--text-size-type1);
    font-weight: var(--light);
    line-height: var(--default-line-height);
}

.type-2{
    font-size: var(--text-size-type2);
    font-weight: var(--light);
    line-height: var(--default-line-height);
}

.type-3{
    font-size: var(--text-size-type3);
    font-weight: var(--regular);
    line-height: var(--default-line-height);
}

.type-4{
    font-size: var(--text-size-type4);
    font-weight: var(--regular);
    line-height: var(--default-line-height);
}

.details{
    font-size: 0.813rem;
    font-weight: var(--regular);
    line-height: var(--default-line-height);
}

a{
    font-family: var(--main-font);
}



/******************** Boutons ********************/

a {
    text-decoration: none;
    font-family: var(--main-font);
    color: inherit;
    cursor: pointer;
}

/***** Boutons CTA *****/

.btn-medium{
    border-radius: 0%;
    font-size: var(--text-size-type3);
    line-height: var(--default-line-height);
    font-weight: var(--regular);

    padding: 2px var(--small-spacing);
    border: solid var(--border-default);
    

    display: inline-flex;
    align-items: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-small{
    border-radius: 0%;
    font-size: var(--text-size-type1);
    line-height: var(--default-line-height);
    font-weight: var(--regular);

    padding: 2px var(--small-spacing);
    border: solid var(--border-default);
    

    display: inline-flex;
    align-items: center;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary{
    background-color: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.btn-secondary{
    background-color: var(--white);
    color: var(--accent);
    border-color: var(--white);
}

/* Bouton CTA HOVER */

.btn-primary:hover{
    background-color: transparent;
    color: var(--accent);
}

.btn-secondary:hover{
    background-color: transparent;
    color: var(--white);
}


/***** Autres boutons *****/

.links{
    border: solid;
    border-width: var(--border-default);
    border-color: transparent;
    background-color: transparent;
}


/* Bouton mentions legales */
.btn-rights{
    font-size: var(--text-size-medium);
    color: var(--white);

    border: var(--border-default) solid transparent;
    padding: 3px 15px;
}

.btn-rights:hover{
    border: var(--border-default) solid var(--white);
}


/* Bouton navigation header */
.btn-header{
    font-size: var(--text-size-very-small);
    color: var(--black);
    font-weight: var(--bold);
    background-color: transparent;

    padding: 5px 5px;
}

.highlight-variant{
    color: var(--accent);
}

.btn-header:hover{
    color: var(--white)!important;
    background-color: var(--accent);
}




/******************** Header ********************/

header{
    position: fixed;
    background-color: var(--white);
    width: 100%;
    z-index: 1000;
}

header .container{
    padding-bottom: var(--small-spacing);
    padding-top: var(--small-spacing);
}

.header-main {
    display: flex;
    flex-wrap: wrap;
}

.header-main nav {
    display: flex;
}

.header-main ul {
    display: flex;
    flex-wrap: nowrap;
}

header .row{
    display: flex;
    justify-content: space-between;
}

header ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--tiny-spacing);
    justify-content: flex-end;
    align-content: center;
}

.main-content-hero{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    text-align: center;
    gap: var(--small-spacing);
    padding-bottom: var(--regular-spacing);
}



/* Logo animé */
.morph-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  
}

.morph-text {
  font-family: var(--main-font);
  font-size: 1.6rem;
  font-weight: var(--semi-bold);
  color: var(--accent);
  line-height: 1;
  display: block;
  transition:
    filter 600ms ease,
    opacity 800ms ease;
}

/* État initial : OPHLIE net, DESIGN flou et invisible par-dessus */
.morph-from {
  opacity: 1;
  filter: blur(0);
}

.morph-to {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(18px);
}

/* Au survol : on inverse les deux états simultanément */
.morph-wrapper:hover .morph-from {
  opacity: 0;
  filter: blur(18px);
}

.morph-wrapper:hover .morph-to {
  opacity: 1;
  filter: blur(0);
}


/******************** GABARIT CARD ********************/

.Card-gabarit {
  max-width: 100%;
  padding: var(--tiny-spacing);
}

.Card-gabarit p{
  color: var(--black);
}
.Card-gabarit h3{
  color: var(--accent);
}

.Card-gabarit .img-card {
  overflow: hidden;
  margin-bottom: var(--tiny-spacing);
}

.Card-gabarit img {
  display: block;
  align-items: center;
  align-content: center;
  
  height:fit-content;
  width: 100%;
  max-width: 453px;
  max-height: 284px;
  transition: transform .4s ease;
}

/* Zoom au survol */
.Card-gabarit:hover img {
  transform: scale(1.05);
}

.Card-gabarit .line-card {
  display: block;
  height: 2px;
  background-color: var(--accent);
  width: 1px;
  opacity: 0;
  transition: width .3s ease, opacity .3s ease;
}

.Card-gabarit:hover .line-card {
  width: 100%;
  opacity: 1;
}



/*************************************************
************ PAGE Home page ************
*************************************************/


/******************** Hero home page ********************/

/*.hero{
    display: flex;
    align-items: flex-end;

    background-color: var(--accent);
    height: 100vh;
    color: var(--white);

    font-family: var(--main-font);

}

.hero img{
    width: 100%;
    height: auto;
}

.main-content-hero{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    align-content: center;
    text-align: center;

    gap: var(--small-spacing);
    
    padding-bottom: var(--regular-spacing);

}*/


.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-color: var(--accent);
  height: 100vh;
  color: var(--white);
  font-family: var(--main-font);
}

.hero-bg {
  position: absolute;
  top: -20vh;
  right: -20vh;
  width: 230vh;
  aspect-ratio: 1440 / 795;   /* ⬅️ LIGNE MANQUANTE à remettre */
  z-index: 0;
  pointer-events: none;
}





/******************** Section bandeau-introduction ********************/

.bandeau-introduction{
    background-color: var(--black);
    color: var(--white);
    padding: var(--regular-spacing) 0 var(--regular-spacing) 0;
    text-align: center;
}





/******************** Section aperçu projet ********************/

.section-apercu-projet .Title{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.section-apercu-projet h2{
    color: var(--accent);
    padding: var(--medium-spacing) 0 var(--regular-spacing) 0;
}

.section-apercu-projet .content{
    padding-bottom: var(--Extra-spacing);
}






/*************************************************
************ PAGE Projets Section projets ************
*************************************************/

.section-projet .Title{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.section-projet h2{
    color: var(--accent);
    padding: var(--medium-spacing) 0 var(--regular-spacing) 0;
}

.section-projet .content{
    padding-bottom: var(--Extra-spacing);
}

.page-projet-hero {
  position: relative;        /* ⬅️ ancre l'animation */
  overflow: hidden;          /* ⬅️ rogne le blob à 30vh */
  height: 30vh;
  background-color: var(--accent);
}

.page-projet-hero .hero-bg {
  position: absolute;
  top: -47vh;
  right: -1vh;
  width: 200vh;
  aspect-ratio: 1440 / 795;
  z-index: 0;
  pointer-events: none;
}

.page-projet-hero .container {
  position: relative;        /* passe le futur contenu au-dessus du blob */
  z-index: 1;
}

.section-projet .exception .btn-secondary:hover{
    border-color: var(--accent) ;
    color: var(--accent);
}

.section-projet .exception .btn-secondary{
    margin-right: var(--small-spacing);
}




/*************************************************
*************** PAGE à propos ***************
*************************************************/


/******************** hero ********************/
.hero-about {
  position: relative;
  color: var(--accent);
}

.hero-visuel {
  position: relative;
  height: 30vh;
  background-color: var(--accent);
  overflow: hidden;
}

.hero-about .hero-bg {
    position: absolute;
    top: -47vh;
    right: -1vh;
    width: 200vh;
    aspect-ratio: 1440 / 795;
    z-index: 0;
    pointer-events: none;
}

.hero-about .container {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-about .Title {
  text-align: center;
  padding: 160px 200px 160px 200px;
}

.hero-about img {
  width: 100%;
  padding: var(--small-spacing) 0 var(--small-spacing) 0;
}

/******************** Section compétences ********************/

.Competences{
    background-color: var(--accent);
    color: var(--white);
    text-align: center;
    padding: var(--regular-spacing) 0 var(--regular-spacing) 0;
}

.Competences h2{
    margin-bottom: var(--medium-spacing);
}

.Competences .logos img{
    width: 54px;
    height: 54px;
}

.Competences .logos{
    display: flex;
    justify-content: center;
    gap: var(--small-spacing);
    padding-top: var(--medium-spacing);
}

.Competences ul{
    display: flex;
    justify-content: center;
    gap: var(--small-spacing);
}

/******************** Section concrètement ********************/

.Concretement .container{
    padding-top: var(--regular-spacing);
    padding-bottom: var(--small-spacing);
}

.Concretement h3{
    color: var(--accent);
    margin-bottom: var(--tiny-spacing);
}

.Concretement h2{
    color: var(--accent);
    margin-bottom: var(--medium-spacing);
}

.Concretement p{
    color: var(--black);
}

.Concretement img{
    height: auto;
    width: 100%;

    max-height: 500px;
    max-width: 700px;
}

.Concretement .text{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;

    padding: var(--regular-spacing) var(--medium-spacing) var(--regular-spacing) var(--small-spacing);
}


/******************** Section petits-plus ********************/

.petits-plus{
    background-color: var(--accent);
    color: var(--white);
}

.petits-plus .container{
    display: flex;
    flex-direction: column;
    gap: var(--medium-spacing);

    padding: var(--regular-spacing) 200px var(--regular-spacing) 200px;
}


.petits-plus .content-text{
    display: flex;
    flex-direction: column;
    gap: var(--small-spacing);
}

/******************** Section parcours ********************/

.parcours{
    color: var(--accent);
    justify-content: center;
}

.parcours .container{
    display: flex;
    flex-direction: column;
    gap: var(--regular-spacing);
    padding: var(--regular-spacing) 200px;
}


.parcours .timeline{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;

    margin-top: var(--medium-spacing);
}

.parcours .colonne{
    max-width: 25%;
}




/*************************************************
************ PAGE Contact ************
*************************************************/


/******************** hero ********************/
.hero-contact {
  position: relative;
  color: var(--accent);
}

.hero-contact .hero-visuel {
  position: relative;
  height: 30vh;
  background-color: var(--accent);
  overflow: hidden;          /* ⬅️ AJOUT : rogne le blob à 30vh */
}

.hero-contact .hero-bg {
  position: absolute;
  top: -47vh;
  right: -1vh;
  width: 200vh;
  aspect-ratio: 1440 / 795;
  z-index: 0;
  pointer-events: none;
}

.hero-contact .container {
  position: relative;        /* passe le contenu au-dessus du blob */
  z-index: 1;
}

.hero-contact .hero-content {
  text-align: center;
  padding: 160px 200px 160px 200px;
}

.hero-about img{
    width: 100%;
    padding: var(--small-spacing) 0 var(--small-spacing) 0;
}

/******************** Section introduction ********************/

.introduction-contact p{
    color: var(--black);
}

.introduction-contact h2{
    color: var(--accent);
    margin-bottom: var(--small-spacing);
}

.introduction-contact .container{
    padding-top: var(--medium-spacing);
    padding-bottom: var(--Big-spacing);
}


/******************** Section from ********************/


.Section-form h2{
    color: var(--accent);
    margin-bottom: var(--regular-spacing);
    
}

.Section-form .container{
    padding-top: var(--regular-spacing);
    padding-bottom: var(--regular-spacing);
}

form h3{
    color: var(--accent);
    padding-bottom: var(--tiny-spacing); 
}

.Contact-infos h3{
    color: var(--black);
    padding-bottom: var(--tiny-spacing); 
}

.Contact-infos{
    display: flex;
    flex-direction: column;
    gap: var(--medium-spacing);
}



/***** Section from *****/
form .row1 {
  display: flex;
  justify-content: space-between;
}


.Nom, .Prenom, .Societe, .Message {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--small-spacing);
}

/* Visuel des boites */
form input{
    padding: var(--tiny-spacing) var(--small-spacing);
    border: var(--border-default) solid var(--accent);
}

form textarea{
    padding: var(--tiny-spacing) var(--small-spacing);
    border: var(--border-default) solid var(--accent);
    min-height: 95px;
}


form .champ-text {
  color: var(--accent);

  width: 100%;
  padding: var(--tiny-spacing) var(--small-spacing);
  background-color: transparent;

  border-bottom: var(--border-default) solid var(--accent);
}


form .champ-text:active {
  color: var(--accent);
}

/* placeholder*/
form textarea::placeholder {
    font-family: var(--main-font);
    color: var(--light-accent);
    min-height: 300px;
    resize: vertical;
    line-height: var(--default-line-height);
}

form textarea:hover{
    border-color: var(--accent); 
    background-color: var(--light-accent);
}


/*** Placeholder ***/
form input::placeholder {
    color: var(--light-accent);
    font-family: var(--main-font);
}


form input:hover {
    border-color: var(--accent); 
    background-color: var(--light-accent);
}

.col-6 input:focus {
  border-color: var(--accent);
}




/*************************************************
************ PAGE Illustrations ************
*************************************************/


/******************** hero ********************/
.hero-illustrations {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--medium-spacing);
}

.hero-illustrations .hero-bg {
  position: absolute;
  top: -47vh;
  right: -1vh;
  width: 200vh;
  aspect-ratio: 1440 / 795;
  z-index: 0;
  pointer-events: none;
}

.section-illustrations h1{
    color: var(--accent);
    padding-bottom: var(--regular-spacing);
    text-align: center;
}

.Selection_projet{
    padding-bottom: var(--medium-spacing);
}

.page-illustration .section-illustrations .container{
    padding-bottom: var(--medium-spacing);
    display: flex;
    flex-direction: column;
    justify-content: center;
}



/*************************************************
****************** PAGE Projets ******************
*************************************************/


/******************** heros ********************/

/* Toutes les pages projets*/

/* Hero */
.hero-cadre-projet{
    max-height: 40vh;
    overflow: hidden;
    min-height: auto;
}

.hero-cadre-projet img{
    width: 100%;
}


.hero-projet .intro-projet{
    display: flex;
    flex-direction: column;
    gap: var(--tiny-spacing);
}

.intro-projet .type-h1-small, .type-h1{
    color: var(--accent);
}
.intro-projet .type-1{
    color: var(--black);
}

.hero-projet .container{
    padding-top: var(--medium-spacing);
    padding-bottom: var(--regular-spacing);
}

.section-contexte .Infos{
    color: var(--black);
    display: flex;
    flex-direction: column;
    gap: var(--small-spacing);
}

.section-contexte h2{
    color: var(--accent);
}


/* Mise en page DA */
.Visuels .container{
    display: flex;
    flex-direction: column;
    gap: var(--small-spacing);
    padding-top: var(--Extra-spacing);
    padding-bottom: var(--Extra-spacing);
}


/* Visuels DA */
.couleurs .palette{
    width: 33,33%;
    height: 157px;
}


.DA .mockup{
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    max-height: 800px;
}


.Visuels .mockup img {
    max-width: max-content;
    height: 100%;
    padding-top: 100px;
}

.couleurs img{
    padding-right: var(--small-spacing);
    padding-top: var(--small-spacing);
}

.visuel-aperçu-projet{
    padding-right: var(--small-spacing);
}

.animation video{
    width: 100%;
    height: auto;
}


/* 1er cadre = desktop, 2e cadre = mobile */
.pages-web .immersion{
  height: 80vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.pages-web .immersion img{
  display: block;
  width: 100%;
  height: auto;
}

.pages-web .immersion:nth-child(1){ display: block; }  /* desktop visible */
.pages-web .immersion:nth-child(2){ display: none; }   /* mobile caché */




/* Separator */
.Projet .Line{
    height: 1px;
    width: 100%;
    background-color: var(--black);
}

/* Content Brief */
.Brief .container{
  padding-top: var(--small-spacing);
  padding-bottom: var(--small-spacing);
}
.Brief .Content-infos{
  display: flex;
  flex-direction: column;
  gap: var(--medium-spacing);
}
.Brief .Content{
  padding: var(--small-spacing) 0;
}
.Brief .Content h3{
  color: var(--accent);
  padding-bottom: var(--medium-spacing);
}
.Content-infos .bouton{
  color: var(--accent);
  padding-top: var(--small-spacing);
}
.Content-infos .bouton a{
  cursor: pointer;
}

/* Effet de déploiement */
.Content-infos .deroulant-wrap{
  display: grid;
  grid-template-rows: 1fr;                  /* déplié */
  transition: grid-template-rows .35s ease;
}
.Content-infos .deroulant-wrap.hidden{
  display: grid;                            /* écrase le .hidden{display:none} */
  grid-template-rows: 0fr;                  /* replié */
}
.Content-infos .deroulant-wrap > *{
  overflow: hidden;
  min-height: 0;
  margin: 0;
}

.Content-infos .hidden{
  display: none;
}

@media (prefers-reduced-motion: reduce){
  .Content-infos .deroulant-wrap{ transition: none; }
}




/* Processus */
.Processus .container{
    display: flex;
    flex-direction: column;
    gap: var(--regular-spacing);
    padding-top: var(--regular-spacing);
    padding-bottom: var(--regular-spacing);
}

.Processus h2{
    color: var(--accent);
}
.Processus p{
    color: var(--black);
}

.Processus .Intro{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.Processus .bouton{
    color: var(--accent);
    padding: var(--small-spacing) 0;
}


.Explications .deroulant-wrap {
  display: grid;
  grid-template-rows: 1fr;                       /* déplié */
  transition: grid-template-rows .35s ease;
}

.Explications .deroulant-wrap.hidden {
  display: grid;                                 /* écrase un éventuel .hidden{display:none} */
  grid-template-rows: 0fr;                       /* replié */
}

.Explications .deroulant-wrap > * {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .Explications .deroulant-wrap { transition: none; }
}




/* Mockup + Lien figma */
.mockup-desktop .container{
    padding: 0;
}

.mockup-desktop .mockup{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
}

.mockup-desktop .Redirection-figma{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: var(--accent);
    padding: var(--regular-spacing) 0;
}

.mockup-desktop p{
    color: var(--white);
    padding-bottom: var(--small-spacing);
}

/* Voir plus */
.voir-plus .container{
    display: flex;
    flex-direction: column;
    gap: var(--medium-spacing);
    align-items: center;

    padding-top: var(--regular-spacing);
    padding-bottom: var(--regular-spacing);
}

.voir-plus h2{
    color: var(--accent);
    padding-bottom: var(--regular-spacing);
}


/***** Fin class globales *****/


/* LilaVeronica */
.hero-LilaVeronica {
    display: flex;
    align-items: center;
}

.Visuels-LilaVeronica .color1{
    background-color: #f9F6EF;
}
.Visuels-LilaVeronica .color2{
    background-color: #f7D3D7;
}
.Visuels-LilaVeronica .color3{
    background-color: #8A9B87;
}

.couleurs{
    width: 100%;
}

.Visuels-LilaVeronica .mockup{
    display: flex;
    justify-content: center;
}


/* Jarvish */

.Visuels-Jarvish .color1{
    background-color: white;
}
.Visuels-Jarvish .color2{
    background-color: #030303;
}
.Visuels-Jarvish .color3{
    background-color: #07928B;
}

.Jarvish .Visuel-aperçu-DA{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}


/* Proumeyssac */

.hero-Proumeyssac{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.Proumeyssac .Processus img{
    width: 50%;
    height: auto;
}

.Proumeyssac .Processus .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.Proumeyssac .Visu-graphiques img{
    width: 100%;
    height: auto;
}



.Proumeyssac .Visu-graphiques .Explications{
    display: flex;
    justify-content: flex-end;
    flex-direction: column;

    padding-left: var(--small-spacing);
}

img {
    max-width: 100%;
    height: auto;
}


/* Maison Lua */
.hero-MaisonLua {
    display: flex;
    align-items: center;
}

.Visuels-MaisonLua .mockup{
    display: flex;
    justify-content: center;

}



/*************************************************
***************** ASSETS *****************
*************************************************/



/******************** Footer ********************/

footer {
  position: relative;   /* ⬅️ AJOUT indispensable */
  display: flex;
  align-items: flex-end;
  background-color: var(--black);
  color: var(--white);
  height: 70vh;
  overflow: hidden;
}

footer .container {
  position: relative;   /* ⬅️ AJOUT : passe le contenu au-dessus du blob */
  z-index: 1;
  flex-direction: column;
  padding: 0 var(--small-spacing) var(--small-spacing) var(--small-spacing);
}


footer .Background {
  position: absolute;
  top: -5vh;
  right: -5vh;
  width: 230vh;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
}

footer .btn-secondary{
color: var(--black);
}
footer img{
width: 100%;
height: auto;
}
footer .contacter{
padding: var(--small-spacing);
align-items: center;
}
footer .contacter p{
margin-right: var(--medium-spacing);
}
footer .mentions-legales{
display: flex;
justify-content: flex-end;
align-items: center;
}

/******************************************
***************** RESPONSIVE **************/
/******************************************/


/* Mobile */

@media (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex-basis: 100%; width: 100%; }
}

@media (max-width: 768px) {

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

  .row-reverse{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}


@media (max-width: 768px) {
    .header .morph-text{
        display: flex;
        justify-content: center;
    }

    .header ul{
        justify-content: center;
        padding-top: var(--small-spacing);
    }
  
}

@media (max-width: 768px) {
    .hero-about .Title{
        padding: var(--Extra-spacing) var(--small-spacing);
    }

    .Concretement .text{
        padding: var(--small-spacing) var(--medium-spacing) var(--regular-spacing) var(--small-spacing);
    }

    .petits-plus .container{
        padding: var(--regular-spacing) var(--small-spacing);
    }

    .parcours .container{
        text-align: center;
        padding: var(--regular-spacing) var(--small-spacing);
    }

    .parcours .timeline{
        display: flex;
        gap: var(--small-spacing);
    }

    .parcours .colonne{
        max-width: 100%;
    }
}




/* mobile */
@media (max-width: 768px){
  .pages-web .immersion:nth-child(1){ display: none; }
  .pages-web .immersion:nth-child(2){ display: block; }
}


/* footer */

@media (max-width: 768px) {
    footer{
        text-align: center;
    }

    footer .contacter{
        display: flex;
        gap: var(--small-spacing);
        padding: var(--medium-spacing);
    }
}


@media (max-width: 768px) {
    .Visuels .mockup img {
        max-width: 100%;
        padding-top: 0;
    }

    .mockup-desktop .Redirection-figma {
        padding: var(--regular-spacing) var(--small-spacing);
        text-align: center;
    }

    .voir-plus h2{
        padding-bottom: var(--small-spacing);
    }
}

@media (max-width: 768px) {
    .hero-contact .hero-content{
        padding: var(--regular-spacing) var(--small-spacing);
    }

}

/*** mise en colonne ***/
@media (max-width: 768px) {

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

  .row-reverse{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}


/*** màj tailles titres ***/

@media (max-width: 768px) {
    .type-h1{
        font-size: var(--H1-small);
    }
    .type-h2{
        font-size: var(--H2-size-mobile);
    }
    /*.type-h3{
        font-size: var(--H3-size-mobile);
    }*/
 
}


/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .Card-gabarit img,
  .Card-gabarit .line-card {
    transition: none;
  }
}