/*
 ===========================================================================
  Project Name: xLCZ.2025
  File Name:    oversize.css
  Description:  Feuille de style pour le design du site de Xavier 
  Lacaze

  Author:       Xavier Lacaze
  Created On:   22/08/2025
  Version:      1.0.0
  Last Updated: 22/08/2025

  License:      CC-BY-NC-ND
  Website:      www.xlcz.fr
  Contact:      xavier@xlcz.fr

 ===========================================================================
  
  Change Log:
  ---------------------------------------------------------------------------
  Version 1.0.0: Initial release

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

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --theme-color: #31323B;
}



body {
    background-color:#31323B;
    margin : 0px;
    font-weight : 300;
    color : white;
    font-size : 16px;
    box-sizing: border-box; /* Assure que les paddings sont pris en compte dans la largeur totale */
    font-family: "Archivo", sans-serif; /* Police */
    font-weight: 200;
}

header svg {
    fill: white;
}

p {
        letter-spacing: 0.8px;
        line-height: 1.2em;
}

section.titre-n-id{


}

h1, h2, h3, a, div.id, div.cat {
    font-family: "Oswald", sans-serif;

}

h1{    
    max-width : 1123px;
    margin : 0px auto;
    font-weight : 900;
    margin-top : 50px;
    margin-bottom : 60px;
    font-size : 200px;
    text-transform: uppercase;
    line-height : 1em;
    letter-spacing: -8px;
}

h2,h3 {

text-transform: uppercase;
}
/*
section.titre-n-id h1{    
    max-width : 1123px;
    margin : 0px auto;
    font-weight : 900;
    margin-top : 50px;
    margin-bottom : 60px;
    font-size : 200px;
    text-transform: uppercase;
    line-height : 1em;
    letter-spacing: -8px;
}
*/
section.titre-n-id p{
    max-width : 1123px;
    margin : 0px auto 16px auto;
    padding-left:30%;
    box-sizing: border-box;}

section.titre-n-id .titre {
    margin-bottom : 150px;
    box-sizing: border-box;
}

section.titre-n-id div.id {
    position: relative;
    width: 100vw; /* Utilise 100% de la largeur de la fenêtre (viewport) */
    min-height: 500px; /* Vous pouvez ajuster la hauteur minimale selon votre besoin */
    background-color: #999999;
    background-image: url(../img/xavierlacaze.png);
    background-size: 614px auto;
    background-position: 75% -240px;
    background-repeat: no-repeat;
    z-index: 1;
    box-sizing: border-box;
}

section.titre-n-id div.id::before {
    content: '';
    position: absolute;
    top: -120px; /* Fait en sorte que l'image déborde vers le haut */
    left: 0;
    width: 100%;
    height: 120%; /* Taille de l'image en tenant compte du débordement */
    background-image: inherit;
    background-size: inherit;
    background-position: 75% -120px; /* Positionnement de l'image avec débordement */
    background-repeat: no-repeat;
    z-index: -1; /* Place l'image derrière le contenu */
}

section.titre-n-id div.id a {
    color : black;
}

 .mynameis,.name, section.titre-n-id div.id a  {
    max-width: 1123px; /* Gardez la largeur maximale définie si nécessaire */
    margin: 0px auto; /* Centrage de l'élément */
}

.mynameis {    padding-top: 8vh;
    color : black;
    font-size : 40px;
    display: block;
    line-height: 1em;
}

.name {
    font-size : 200px;
    text-transform : uppercase;font-size:;
    font-weight : 600;
    display: block;
    letter-spacing: -10px;
        line-height: 1em;

}

section a, ul.les-choix li button{
    color : white;
    text-decoration : none;
    font-size : 24px;
    margin-top : 10px;
    display: block; /* Chaque élément prendra toute la largeur disponible */
    transition : font-weight 0.5s ease;
    font-weight: 400;
}


section a:hover{
    font-weight : 900;

}


    /* BLOC SERVICES */

section.serv {
    background-color : #fff;
    margin-top : -70px !important;
}

section.serv h2{
    color:#9D9D9D;
    font-weight : 500;
    font-size: 150px;
    max-width: 1123px;
    margin: 0px auto;
}

 
ul.services {
    padding-bottom : 100px !important;
    margin-top: 130px;
}

.services li {
    position: relative; /* Nécessaire pour le positionnement absolu des enfants */
    background-color: black; /* Fond par défaut */
    border-radius: 16px;
    max-width: 1100px;
    min-height:172px;
    margin: 0px auto;
    display:block;
    padding: 40px;
    transition: all 0.3s ease; /* Pour des transitions douces */
    z-index: 1; /* Pour s'assurer que les éléments sont au-dessus des autres */
    margin-top: -150px; /* Pour un léger chevauchement */
    cursor: pointer; /* Change le curseur pour indiquer que l'élément est cliquable */


}

li.space, ul.pack li.space{
    display:none;
}


.services li.active {
    margin-top: -150px; /* Réinitialise le chevauchement pour le service actif */
    margin-bottom: 170px; /* Ajoute de l'espace pour l'élément actif */
}

ul.services li h3 {
    margin-top: 0px;
    margin-bottom : 20px;
    font-size : 60px;
}

ul.services li p {
    width : calc(80% - 220px)
}
ul.services li h3 {
    width : calc(100% - 220px);
    line-height: 1em;
}

ul.services div.cat,
.navi-carrousel{
    display: none;
}

.services li {
    box-shadow: 4px 0px 20px 0px rgba(0,0,0,0.4);
}


/* Alternance des couleurs sans répétition consécutive */

/* 1er élément */
.services li:nth-child(6n+1), ul.les-choix li:nth-child(6n+1), ul.pack li:nth-child(6n+1)  {
    background-color: #425A98; /* Rouge */
}

/* 2ème élément */
.services li:nth-child(6n+2), ul.les-choix li:nth-child(6n+2), ul.pack li:nth-child(6n+2) {
    background-color: #228989; /* Vert-bleu */
}

/* 3ème élément */
.services li:nth-child(6n+3), ul.les-choix li:nth-child(6n+3), ul.pack li:nth-child(6n+3) {
    background-color: #917476; /* Jaune */
}

/* 4ème élément */
.services li:nth-child(6n+4), ul.les-choix li:nth-child(6n+4), ul.pack li:nth-child(6n+4) {
    background-color: #918A74; /* Bleu sombre */
}

/* 5ème élément */
.services li:nth-child(6n+5), ul.pack li:nth-child(6n+5) {
    background-color: #FF8C42; /* Blanc cassé */
}

/* 6ème élément */
.services li:nth-child(6n+6), ul.pack li:nth-child(6n+6) {
    background-color: #425A98; /* Orange */
}

/* Répétition - assure qu'aucune couleur ne se répète deux fois de suite */
.services li:nth-child(6n+7) {
    background-color: #228989; /* Vert-bleu */
}

.services li:nth-child(6n+8) {
    background-color: #917476; /* Jaune */
}

.services li:nth-child(6n+9) {
    background-color: #918A74; /* Bleu sombre */
}

.services li:nth-child(6n+10) {
    background-color: #FF8C42; /* Blanc cassé */
}

.services li:nth-child(6n+11) {
    background-color: #425A98; /* Rouge */
}

.services li:nth-child(6n+12) {
    background-color: #228989; /* Vert-bleu */
}


.services li div.illu.some.bento {
    position : absolute;
    right : 7%;
    margin: 25px  0px 10px 0px;
    height: 120px;
    width : 120px;
    background-image: url('../img/placeholder.svg');
    background-size:cover;
    background-repeat: no-repeat;
}  


    /* BLOC REF */



section.references h2{
    max-width: 1123px;
    margin: 0px auto;
    color : white;
    font-weight : 500;
    font-size: 150px;
    margin-top: -60px;

}
ul.ref {
    max-width: 1200px;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;}

ul.ref li {
    max-width : 725px;
    width : calc(45% - 50px);
    margin : 8px 8px;
    background-color : #000;
    border-radius : 16px;
    padding: 40px;

}

ul.ref li .content-0-carrousel img{
    display: none;
}

ul.ref p {
    margin-bottom : 48px;
}

ul.ref a, .contact ul li.contact a {
    background-color : white;
    color: black;
    display: inline-block;
    padding : 8px 26px;
    border-radius : 4px;
}

ul.ref div.cat {
    margin-top : 20px;
    text-transform: uppercase;
    font-size : 60px;
    color : #737373;
    line-height : 1em;
}

ul.ref h3 {
        font-size : 60px;
        font-weight : 800;
        margin : 0px;
            line-height: 1.2em;


}

.carousel-container {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
}

.carousel-item img {
    border-radius : 8px;
    width: 100%;
    height: auto;
    display: block;
}

/* Pagination sous le carrousel */
.pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    justify-content: center;
}

.progress-bar {
    width: 100px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: white;
    transition: width 0.3s ease;
}

.progress-bar.active::before {
    width: 100%;
    transition: width 3s linear;
}


    /* FOOTER */

footer {
    max-width: 1200px;
    margin: 0px auto;

}
/* Style pour la section de contact */
.contact {
    padding: 60px 20px; /* Espacement autour de la section */
}

/* Style du titre */
.contact h2 {
    font-size: 250px; /* Taille du texte pour le titre */
    margin: 0; /* Enlève la marge par défaut */
    position: relative; /* Pour positionner les mots "Prenons" et "contact" */
}

/* Positionnement du mot "Prenons" */
.contact h2 .above {
    display: block; /* S'assure que "Prenons" soit sur une nouvelle ligne */
}

/* Positionnement du mot "contact" */
.contact h2 .below {
    display: block; /* S'assure que "contact" soit sur une nouvelle ligne */
    margin-top: 180px; /* Ajuste l'espacement pour séparer des cartes */
    margin-left: 20%;
    margin-bottom: -690px; /* Ajuste l'espacement pour chevaucher légèrement les cartes */
}

.contact ul {
    max-width: 900px;
    display:flex;
    margin : 0px auto;
    align-items: flex-start;
}

.contact ul li.contact {
    height: auto;
    margin : 8px;
    background-color: black;
    width : 32%;
    max-width: 480px;
    padding:60px;
    z-index: 10;

}

section.contact div.cat {
    display: none;
}

.contact ul {
margin-bottom : 300px;}



section.social-media svg{
display:block;
height: 30px;
fill : #fff;
margin-bottom : 5px

}

section.social-media ul{
    margin-top : 10vh;
    display: flex;
    justify-content: center;
    align-content: center;
}


section.social-media ul li{
    padding : 30px;
text-align : center !important;
list-style-type: none; /* Supprime les puces */

}

section.legals ul{text-align : center;
    display: flex;
    justify-content: center;
    align-content: center;}

section.legals ul li{
    opacity : 0.5;
    margin-left: 8px;
    margin-right: 8px;
    list-style-type: none; /* Supprime les puces */

}


/***************************************************/
/******************** PAGE CAS *********************/
/***************************************************/

section.id-client,
section.one-skill{
    max-width : 1123px;
    margin : 0px auto;
    }


section.id-client img{
    display: none;
}

section.id-client ul {
    max-width: 700px;
    margin : 0px auto;

}

section.id-client ul li {
    margin-bottom : 16px;
    line-height: 1.5em;
}


section.one-skill H2{
    margin-top : 140px;
    color:#848484;
    line-height : 110px;
    font-size : 100px;
    letter-spacing: -4px;
    font-weight: 500;
}

section.one-skill H2 strong{
    color:#fff;
    font-weight: 500;

}

section.one-skill p,
section.one-skill .one-col a{
    margin-left: 15%;
    line-height: 1.5em;
}

section.one-skill div.cat {
    display:none;
}

section.one-skill .one-col {
    max-width : calc(100% - 60px);
    margin : 30px auto;
}

section.one-skill .one-col img{
    width : 75%;
}

section.one-skill .one-col h3{
    text-transform: inherit;
    font-size : 60px;

    line-height: 1em;

    margin :  -40px 0px 8px 15%;
    text-shadow: 0px 0px 20px rgba(0,0,0,0.9);

}

section.one-skill .masonry h3{
    text-transform: inherit;
    font-size : 50px;

    line-height: 1em;

    margin :  0px 0px 8px 0px;
}

section.one-skill  ul.one-col li {
    margin : 62px 0px;
}

section.one-skill ul.masonry li {
    max-width : 725px;
    width : calc(45% - 50px);
    margin : 8px 8px;
    background-color : #000;
    border-radius : 16px;
    padding: 40px;
}

section.one-skill ul.masonry li img{
    width : 100%;
}

section.one-skill ul.masonry li p {
    margin: 0px;
}

section.one-skill ul.masonry {
    margin-top : 64px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;}









/******************** HOMEPAGE ********************/

section.testi ul{
    font-family: "Oswald", sans-serif;
    font-size : 80px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 80px;
    width : 50vw;
    height: 70vh;
    padding-top: 30vh;
    margin-bottom : 40px;
    box-sizing: border-box;

}

section.about ul.portrait li {
    position : absolute;
    top : 0px;
    width : 100vw;
    height : 90vh;
    background-size: 100vh;
    background-position: 110% 20% ;
    background-repeat: no-repeat;
    z-index : -1;}

section.about ul.portrait li.reality {
background-image: url(../img/xavierlacaze.png);

}

section.testi,
section.about ul.intro li,
/*section.le-choix ul,*/
section.le-choix h2,
section.clients {
    max-width : 1123px;
    margin : 0px auto;
    }


section.about div.cat{
    display: none;

}

section.about ul.intro {
    padding : 80px;
    position: relative;
    width: 100vw;
    height: fit-content;
    background-color: #999999;
    box-sizing: border-box;
    font-size : 24px;
    color : #31323B;
    font-weight: 200;

}


.signature{
    width : 100%;
    text-align: right;
    font-size: 90px;
    font-weight: 100;
    margin-top : 40px;
    line-height: 60px;
    color : #31323B;

}

section.valeur {
    color: #999999;
    font-weight: 500;
    font-size: 120px;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    margin-top : -48px;
    z-index: -1;
    background-color : white;
}

section.valeur.markee ul{
        --tw: 3000px; 
        --ad: 45s;
    }


section.le-choix {
    background-color : white;
    padding-bottom : 80px;
}

section.le-choix h2{
    padding-top : 15vh;
    margin-top : 0px;
    color : #31323B; 
    font-size : 160px;
    width : 70vw;
    line-height: 150px;
    font-weight: 200;}

ul.les-choix, ul.pack {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin : 90px auto;
}


ul.les-choix li, ul.pack li {
    border-radius: 16px;
   /* max-width: 1100px;*/
   /* min-height: 172px;*/

}


ul.les-choix li h3, ul.pack h3{
    margin : 0px 0px 40px 0px;
    font-size : 60px;
    line-height: 60px;
    font-weight: 200;
}





@media only screen and (min-width: 768px) {


ul.les-choix li {
    background-color: black;
    border-radius: 16px;
   /* max-width: 1100px;*/
   /* min-height: 172px;*/
    margin: 0px auto;
    display: block;
    padding: 40px;
    width : 400px;
    margin-right: -440px;
    transition: all 0.5s ease;
    cursor: pointer;
}




ul.pack li {
    left:0px;
    background-color: black;
    border-radius: 16px;
   /* max-width: 1100px;*/
   /* min-height: 172px;
    margin: 0px auto;*/
    display: block;
    padding: 40px;
    width : 400px;
    margin-right: -330px;
    margin-left: 0px;
    transition: all 0.5s ease;
    cursor: pointer;
}

ul.pack li:nth-child(1){
    margin-left: calc(((100/1123)*20)*100px);
} 

ul.les-choix li:hover {
    margin-right: -420px;

}

ul.pack li:hover {
    margin-right: -300px;

}

ul.les-choix li:last-child, 
ul.pack li:last-child {
    margin-right: auto;
}

ul.les-choix li.active:last-child, 
ul.pack li.active:last-child {
        margin-right: auto;

}


ul.les-choix li.active {
    margin-right: -150px;
   /* width : 400px;*/

}


ul.pack li.active {
    margin-right: -0px;
   /* width : 400px;*/

}


}


ul.les-choix li button {
        font-family: "Oswald", sans-serif;
        background : none;
        border : 0px ;

}

ul.les-choix li button:hover {
    font-weight: 800;
}








section.clients h2{
    padding-top : 15vh;
    margin-top : 0px;
    color : white; 
    font-size : 160px;
    width : 70vw;
    line-height: 150px;
    font-weight: 300;}


ul.grid {
    margin-top : 40px;
    display: flex
;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;}

ul.grid li{
    text-align: center;
    min-width : 20%;
    max-width: 25%;

}


ul.grid li img, ul.grid li svg{
    max-width : 100%;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.2s ease;
    cursor: pointer;
}

ul.grid li a, ul.grid li a{
    cursor: pointer;
}

ul.grid li img:hover, ul.grid li svg:hover {
        filter: grayscale(0);
            opacity: 1;

}


section ul.grid  a::after {
    content: ''; /* Ajoute la flèche après le texte du lien */
}

/******************** Banner pack ********************/

div.banner-pack {
background-color: #fff;
padding: 2rem; 
text-align: center; 
color : black;
}

div.banner-pack h3 {margin-top:0px;
font-size : 70px;
font-weight : 200;
margin-bottom :20px;}



div.banner-pack a {
    color : rgb(66, 90, 152);
}






/***************************************************/
/******************** REPONSIVE ********************/
/***************************************************/

@media only screen and (max-width: 768px) {

body { 
    box-sizing: border-box; /* Facultatif mais recommandé */

}

h1{  
    font-size : 70px;
    letter-spacing: -4px;
}


section.titre-n-id p {
    width: calc(90% - 30px);
    padding-left : 10%;
    box-sizing: border-box;
}

section.titre-n-id div.id {
    padding : 0 20px;

}

section.id-client,
section.one-skill,
section.references,
footer,
h1, h2,
.serv ul{
    max-width : calc(100vw - 30px);
    width: calc(100vw - 30px);
    margin-left : 15px;
    margin-right : 15px;

}


.mynameis {
    padding-top :140px; 
    color: white;
}
.name{
    font-size: 110px;
    letter-spacing: -5px;
}
section.titre-n-id div.id a{
    color : white;
}
section.serv {
margin-top : -32px !important;
}

section.references  {
margin-top : 30px !important;
}

section.serv h2, section.references h2  {
    font-size : 70px !important;
    padding : 0px 0px;
}

div.illu.some.bento { 
    display: none;
}

.serv ul {
    margin-top:20px;
}

.services li h3,
.services li p  {
    width: 100% !important;

}

.services li h3{
    font-size : 36px !important;
    line-height: 1.1em;
}

.services li.active:nth-child(1), .services li:nth-child(1) {
margin-top: 0px;}

.services li {
margin-top : -390px;
height: 400px;
background-image: url('../img/Mark seul - blanc.svg');
background-repeat: no-repeat;
background-size:40px 40px;
background-position: 90% 90%;
}


.services li.active {
    margin-top: -390px; /* Réinitialise le chevauchement pour le service actif */
    margin-bottom: 430px; /* Ajoute de l'espace pour l'élément actif */
}

.services li.active:last-child {
     margin-top: -390; /* Réinitialise le chevauchement pour le service actif */
    margin-bottom: 0px;
}

ul.ref {

    flex-wrap: wrap;
    flex-direction: column;}


ul.ref li, .contact ul li.contact {
    width: 100%;
    margin: 8px 0px;
    box-sizing: border-box;
}

.contact {
    padding: 0px 0px;
    margin-top : 70px;
}

.contact h2 {
    font-size: 100px;
    margin: 0;
    position: relative;
}

.contact h2 .above {
    margin-left: -25px;
}

.contact h2 .below {
    text-align: right;
    display: block;
    margin: 0px;
}

.contact ul {
        flex-direction: column;
}

.contact ul li.contact {
    width : 100%;
    max-width : 100%;
    box-sizing: border-box;

}

ul.ref a, .contact ul li.contact a {
    background-color : white;
    color: black;
    font-size: 18px;
    display: inline-block;
    padding : 8px 26px;
    border-radius : 4px;
}




/******************** PAGES CAS ********************/

section.one-skill H2 {
    font-size : 60px;
    line-height: 60px;
}

section.one-skill H2, section.one-skill p, section.one-skill .one-col a {
    margin-left: 0%;
}

section.one-skill .one-col img {
    width: 100%;
}

section.one-skill ul.masonry li {
    max-width: calc(100% - 60px);
    margin: 30px auto;
    width: inherit; 
    background-color: inherit;
    border-radius: inherit;
    padding: inherit;
}

section.one-skill .one-col h3 {
    margin: 0px 0px 8px 0px;
text-shadow: 0px 0px 0px rgba(0,0,0,0.9);}

section.one-skill .masonry h3,section.one-skill .one-col h3 {
font-size: 40px;
margin: 0px 0px 8px 0px;
text-shadow: 0px 0px 0px rgba(0,0,0,0.9);

}

section.one-skill .masonry h3 {
    text-transform: inherit;
}


/******************** HOMEPAGE ********************/


section.about ul.portrait li {
    position : absolute;
    top : 0px;
    width : 100vw;
    height : 770px;
    background-size: cover;
    background-position: 0% 0% ;
    background-repeat: no-repeat;
    z-index : -1;}


section.testi ul  {
    height : 690px;
    font-size : 50px;
    line-height: 53px;
    font-weight: 400;
    padding-top : 400px;
    width : 80%;
    margin: 0px 30px;}


section.about ul.intro{
        padding : 30px;
        font-size : 18px;
    } 

section.le-choix h2 { 
    font-size : 80px;
    line-height : 80px;
    padding: 10vh 20px 0px 20px;
    width : auto;
 
}


ul.les-choix, ul.pack { 
    margin : 80px auto;
flex-direction: column;
}



ul.les-choix li, ul.pack li {
    height : 610px;
    margin : auto 20px 10px 20px;
    transition: all 0.5s ease;
    box-sizing: border-box;
    width : auto;
    padding : 25px;
    margin-bottom : -480px;
    background-image: url('../img/Mark seul - blanc.svg');
    background-repeat: no-repeat;
    background-size:40px 40px;
    background-position: 90% 95%;
}


ul.les-choix li:last-child, ul.pack li:last-child {
    margin : auto 20px 10px 20px;
    margin-bottom : 0px;

}

ul.les-choix li.active, ul.pack li.active {    
    margin-bottom : 20px;

}

ul.les-choix li.active:last-child, ul.pack li.active:last-child {
     margin-bottom : 0px;
}


ul.les-choix li h3, ul.pack li h3{
    font-size : 50px;
}




section.clients h2 { 
    font-size : 80px;
    line-height : 80px;
    padding-top: 10vh;
}
ul.grid  {

    flex-direction: column;
}

ul.grid li {
    max-width : 50%;
    box-sizing: border-box; 
}

ul.grid li img, ul.grid li svg {
        justify-content: space-around;
        padding : 20px;
        box-sizing: border-box;
}


/******************** PRINCING PACKS ********************/



 ul.pack li {
    height : 1200px;
    margin-bottom: -940px;

 }


 ul.pack li:nth-last-child(2) {
    height : 950px;
    margin-bottom: 0px;
 }

 ul.pack li ul.princing li {
    height : auto;
 }

  ul.pack li  ul.princing li:last-child {
    margin: 20px 0px;
     }



}