/*
 ===========================================================================
  Project Name: xLCZ.2025
  File Name:    bento.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=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root {
  --vert-fonce: #071203; /* Bleu principal */
  --vert-medium:#004D40;
  --vert-clair: #82E675;
  --beige:#ebe1d5;
  --beige-fonce: #c8b8a6; /* Nouveau beige légèrement plus foncé */
  --rouge:#D60800;
  --rouge-brique: #b02a24;
  --theme-color: #071203;
}




body {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 300;
    background-color: var(--vert-fonce);
    font-feature-settings: 'ccmp' on;
    color: #000;
    line-height: 1.5em;
    max-width: 1232px; /* Limite la largeur maximale à 1232px */
    margin: 0 auto; /* Centre horizontalement si l'écran est plus large */
    padding: 0 15px; /* Ajoute un peu de padding pour éviter que le contenu touche les bords de l'écran sur les petits écrans */
    box-sizing: border-box; /* Assure que les paddings sont pris en compte dans la largeur totale */
}

header svg {
    fill: #fff; 
}



section.titre-n-id {
    display: flex; /* Active Flexbox */
    margin: 8px 8px 8px 8px; /* Marge autour de chaque élément */
    justify-content: space-between; /* Sépare les deux div avec de l'espace entre elles */
    align-items: center; /* Centre verticalement les div */
    max-width: 1232px; /* Applique ta limite de largeur si nécessaire */
}

section.titre-n-id div {
    min-height: 360px;
    padding: 50px;
    border-radius: 20px;
    position: relative; /* Nécessaire pour positionner le :before correctement */
}


/******* BLOC TITRE **********/

section.titre-n-id .titre {
    max-width: 816px;
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    max-width: calc(66.66% - 8px); /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    margin: 0px 16px 0px 0px;
    height: 430px;
    background: linear-gradient(60deg, #ebe1d5, #ebe1d5); /* Dégradé linéaire */
    position: relative; /* Nécessaire pour le bruit */
    overflow: hidden; /* Assure que le bruit ne déborde pas */
}

/*section.titre-n-id .titre:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/noisy.jpg'); 
    opacity: 0.09; 
    pointer-events: none; } */


/******* BLOC ID **********/

section.titre-n-id h1 {
    margin: 0px 0px 30px 0px;
    font-family: "Inter", sans-serif;
    color: var(--vert-medium);
    font-weight: 700;
    font-size: 65px;
    font-style: italic;
    line-height: 0.9em;
}

section p {
    margin:0;
}

section.titre-n-id .id {
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    width: calc(33.33% - 8px); /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    background-color: var(--vert-medium);
    height: 430px;
}


.mynameis{
    font-style: italic;
    margin-top : 170px;
    font-weight: 600;
    font-size : 25px;
    line-height: 1.1em;
    color: var(--beige);
    display: block; /* Chaque élément prendra toute la largeur disponible */


}
.name {
    font-weight: 700;
    color: var(--beige);
    line-height: 1em;
    font-size : 45px;
    display: block; /* Chaque élément prendra toute la largeur disponible */

}

section a{    
    color : var(--vert-clair);
    text-decoration : none;
    font-size : 18px;
    margin-top : 10px;
    display: block; /* Chaque élément prendra toute la largeur disponible */
    transition : font-weight 0.5s ease;
    font-weight: 600;
}


section a:hover{
    font-weight : 900;


}

section.titre-n-id .id {
    background-image: url('../img/portrait/xavierlacaze.png');
    background-size: auto 135%;
    background-position:  80px 20%;
    background-repeat: no-repeat;
    text-shadow: 0px 0px 40px var(--vert-fonce);
}


/*********** SECTION *************/
section {
    margin-top : 36px;
}




section h2 {
    border-radius: 20px; /* Arrondit les coins */
    margin: 8px 8px 8px 8px; /* Marge autour de chaque élément */
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    /*padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */
    /*background: #535353;*/
    font-weight: 600;

    color: var(--vert-clair);
    font-weight: 200;
    font-size : 25px;
    line-height: 40px;

    padding : 20px;
    text-transform: uppercase;
    letter-spacing: 6px;
}

section h3 {
    font-size : 26px;
    font-weight: 600;
    line-height: 1.2em;
}

section ul {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de s'enrouler */
    justify-content: flex-start; /* Aligne les éléments au début */
    padding: 0; /* Supprime le padding par défaut */
    margin: 0; /* Supprime la marge par défaut */
}

ul.services li, ul.ref li, ul.contacts li, ul.pack li{
    border-radius: 20px; /* Arrondit les coins */
    max-width: calc(33.33% - 16px); /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    min-width: 30%;
    height: 345px; /* Hauteur minimale */
    margin: 8px 8px 8px 8px; /* Marge autour de chaque élément */
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */
}


ul.pack li{
    height: auto !important; /* Hauteur minimale */
}

.service {
    flex-grow: 1; /* Permet aux éléments de grandir pour occuper l'espace disponible */
}

/* Optionnel : Ajoutez des styles supplémentaires pour les contenus internes */
.serv h3, .packs h3 {
    margin: 10px 0; /* Marge autour du titre */
}

.serv p, .packs p {
    flex-grow: 1; /* Permet au paragraphe de grandir */
}

div.cat{
    display:none;
}

ul.navi-carrousel {
    display: none;

}



/***** PICTO CARDS A COMPLETER 

div.illu.bento.audit {
    margin-left: -30px !important;
    margin-top: -30px;
    margin-right: -30px;
    height: 100px;
    width : calc(100% + 60px);
    background-image: url('https://xlcz.fr/img/icons/bento/analytics.png');
    background-size: 130%;
    background-position: -75% -15px;
    background-repeat: no-repeat;
}
***/

/***** COULEUR CARDS ****/

ul.ref li, ul.contacts li {
    background-color: var(--vert-medium);
    color: white;
   
}

ul.ref li a, ul.contacts li a{
    color: var(--vert-clair);
}

/* Règles communes */
ul.services li,  ul.pack li {
    position: relative; /* Nécessaire pour le bruit */
    overflow: hidden; /* Assure que le bruit ne déborde pas */
}

/* Alternance des couleurs */


ul.services li:nth-child(3n+1):nth-child(odd)  {
  background: var(--beige);
  color: var(--vert-medium);
}

ul.services li:nth-child(3n+1):nth-child(even) {
  background: var(--beige-fonce);
  color: var(--rouge-brique);
}

ul.services li:nth-child(3n+2):nth-child(odd) {
  background: var(--vert-medium);
  color: var(--vert-clair);
}

ul.services li:nth-child(3n+2):nth-child(even) {
  background: var(--beige-fonce);
  color: var(--rouge-brique);
}


ul.services li:nth-child(3n):nth-child(odd) {
  background: var(--beige-fonce);
  color: var(--vert-medium);
}

ul.services li:nth-child(3n):nth-child(even),  ul.pack li {
  background: var(--vert-medium);
  color: var(--beige);
}



li.space{
    display:none;
}


/***** CARDS REF ****/


ul.ref li { 
    list-style-type: none; /* Supprime les puces */
    border-radius: 20px; /* Arrondit les coins */
    height: 320px; /* Hauteur minimale */
}


ul.ref li.primary {
    max-width: calc(66.66% - 16px) !important; /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    margin: 8px 8px 8px 8px; /* Marge autour de chaque élément */
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    display: flex;
    flex-direction: row-reverse; /* Permet un alignement vertical des contenus internes */
    padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */
}


ul.ref li img {
    margin-bottom : 16px;

}

ul.ref li h3 {
    display:none;
}

ul.ref li.primary .carrousel {   
    max-width: calc(50% - 16px) !important; /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    margin-left: 16px;

}

li.secondary div.carrousel{
    display:none;

}

.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: 0px;
    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;
}



ul.contacts li {
    height:390px !important;
}



/****** FOOTER ****/

footer {
    width : 100% !important;
    background-color : var(--vert-fonce);
    z-index: 99 !important;
    position: relative;
}



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{
    height : auto !important;
    background-color : var(--vert-medium);
    color: white;
    float: left;
    z-index: 10 !important;
    top: 32px;
    position : sticky;
    position: -webkit-sticky; /* Pour le support des anciens navigateurs */
    box-sizing: border-box; /* Assure que les paddings sont pris en compte dans la largeur totale */
    max-width:calc(33.33% - 16px) !important;
    border-radius: 20px; /* Arrondit les coins */
    margin: 0px 8px 8px 8px; /* Marge autour de chaque élément */
    padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */

}

section.id-client h1, section.id-client strong {
    color : var(--vert-clair);
}

section.id-client ul li{
    margin-bottom : 16px;
    width : 100%;
    display:block;
}


section.one-skill {
    border-radius: 20px; /* Arrondit les coins */
    margin: 8px 8px 8px 8px; /* Marge autour de chaque élément */
    padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */
    background-color: var(--beige);
    color: var(--vert-medium);
    max-width: calc(66.66% - 16px); /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    margin-left:calc(33.33% + 16px);
    margin-top : 0px !important;
    margin-bottom : 36px;
    box-sizing: border-box; /* Assure que les paddings sont pris en compte dans la largeur totale */
}


section.one-skill  a {
    color : var(--rouge);
}

section.one-skill h2{
    background-color : inherit;
    text-transform: initial;
    letter-spacing: initial;
    padding : 0px;
    line-height: 1.2em;
    color: var(--rouge-brique);
    font-weight: 300;
    font-size : 32px;
    margin: 8px 0px 16px 0px;
}

section.one-skill h3{
    margin-bottom : 8px;
    font-size: 20px;

}

section.one-skill ul.one-col li {
    margin: 4% 8% ;
}


section.one-skill ul li img{
    border-radius:8px;
    width : 100%;
}

section.one-skill ul.masonry {
    display : flex;
}

section.one-skill ul.masonry li {
    width : calc(33% - 16px) ;
    margin : 22px 8px;
}






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


section.testi {
    color: var(--vert-clair);
    font-size: 50px;
    line-height: 50px;
    font-style: italic;
    margin: 15vh auto 25vh auto;
    padding : 0px 100px;
}



section.about {
    margin : 8px 8px 24px 8px ;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

section.about ul.portrait {
    min-width: 30%;}

section.about ul.portrait li{
    height : 500px;
    width: 100%;
    border-radius: 20px; /* Arrondit les coins */
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */
    background-size: cover;
}



section.about ul.intro {
    width:  100%;
    background-color : var(--beige);
    max-width: 816px;
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    height : 500px;
    position: relative; /* Nécessaire pour le bruit */
    overflow: hidden; /* Assure que le bruit ne déborde pas */
    border-radius: 20px; /* Arrondit les coins */

}

section.about ul.intro li{
    width : 100%;
    padding : 30px;
    color : var(--vert-medium)
}

.signature{
    width : 100%;
    text-align: right;
    font-size: 80px;
    margin-top : 50px;
    line-height: 60px;
    color : var(--vert-medium);
}




ul.les-choix li {
    border-radius: 20px; /* Arrondit les coins */
    max-width: calc(33.33% - 16px); /* Largeur maximum pour chaque élément (3 éléments par ligne moins marges) */
    min-width: 30%;
    height: 445px; /* Hauteur minimale */
    margin: 8px 8px 8px 8px; /* Marge autour de chaque élément */
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    padding: 30px; /* Ajoute du padding à l'intérieur de chaque élément */
}

.choix {
    flex-grow: 1; /* Permet aux éléments de grandir pour occuper l'espace disponible */
}

/* Optionnel : Ajoutez des styles supplémentaires pour les contenus internes */
.les-choix h3 {
    margin: 10px 0; /* Marge autour du titre */
}

.les-choix p {
    flex-grow: 1; /* Permet au paragraphe de grandir */
}


ul.les-choix li:nth-child(1) a {
    color : var(--rouge-brique);
    pointer: cursor;
}

ul.les-choix button {
    font-family: "Inter", sans-serif;
    text-decoration: none;
    font-size: 18px;
    margin-top: 10px;
    display: block;
    transition: font-weight 0.5s ease;
    font-weight: 600;
    color: var(--vert-medium);
    background: none;
    border : none;
    padding : 0px;
}

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

}


/***** COULEUR CARDS ****/

ul.les-choix li {
    background-color: var(--vert-medium);
    color: white;
   
}

ul.les-choix li a{
    color: var(--vert-clair);
}

/* Règles communes */
ul.les-choix li {
    position: relative; /* Nécessaire pour le bruit */
    overflow: hidden; /* Assure que le bruit ne déborde pas */
}

/* Alternance des couleurs */

/* Beige clair - 1, 6, 11 */
ul.les-choix li:nth-child(5n+1) {
    background: var(--beige);
    color: var(--vert-medium);
}

/* Vert medium - 2, 7, 12 */
ul.les-choix li:nth-child(5n+2) {
    background: var(--vert-medium);
    color: var(--vert-clair);
}

/* Beige foncé - 3, 8, 13 */
ul.les-choix li:nth-child(5n+3) {
    background: var(--beige-fonce);
    color: var(--rouge-brique);
}

/* Beige clair - 4, 9, 14 */
ul.les-choix li:nth-child(5n+4) {
    background: var(--beige);
    color: var(--vert-medium);
}

/* Vert medium - 5, 10, 15 */
ul.les-choix li:nth-child(5n+5) {
    background: var(--vert-medium);
    color: var(--vert-clair);
}






section.clients {
    margin-top : 80px;
}

/**
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%;
    margin-left: 26px;
    margin-bottom : 50px;

}


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 */
}

**/


section.valeur {
    background-color : #252525;
    box-sizing: border-box; /* Assure que les paddings et les bordures sont inclus dans la largeur */
    margin : 8px;
    padding : 16px;
    color : var(--beige);
    border-radius: 12px;
    font-weight: 600;
    font-style: italic ;
    letter-spacing: 0.5px;
}


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

div.banner-pack {
margin-top: 20px;
margin-bottom: 10px;

background-color: var(--vert-medium); 
color:var(--beige); 
padding: 2rem; 
text-align: center; 
border-radius: 30px;
}

div.banner-pack h3 {margin-top:0px;}




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

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

body {
    margin : 0px;
}

section,
section ul.services,
section ul.ref,
section ul.contacts,
section ul.pack {
    flex-direction: column;
    flex-wrap: nowrap;
}

section.titre-n-id {
    margin : 0px;
}

section h2 {
    margin : 8px 0px;

}

section.titre-n-id .titre, 
section.titre-n-id .id,
section ul.services li.service,
section ul.ref li,
section ul.ref li.primary,
section ul.contacts li.contact,
ul.pack li
{
    height : auto;
    width : 100% !important;
    max-width : 100% !important;
    margin : 8px 0px;
}

section.titre-n-id .id {
    max-height: 439px;
}

ul.ref li.primary {
flex-direction: column;

}

section.titre-n-id h1 {
    font-size: 50px;
}

ul.ref li.primary .carrousel {
    max-width : 100% !important;
    width : 100%;
    margin : 0px auto 22px auto;

}

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

section.id-client, 
section.one-skill {
    position : relative;
    max-width : 100% !important;
    width : 100%;
    float: inherit;
    top: 0;
    margin : 22px 0;
}

section.one-skill {

}

section.one-skill ul.one-col li, section.one-skill ul.masonry li {
    margin : 16px 0px;
}

section.one-skill ul.one-col li p, section.one-skill ul.masonry li p {
font-size : 16px;
}

section.one-skill ul.masonry {
    flex-direction: column;

}

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




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

section.testi {
padding: 20px;
margin : 10vh auto 15vh auto;
}

section.about ul.intro {
height: fit-content;}

ul.les-choix li {
height: fit-content;}

section.about, section.le-choix ul{
    flex-direction: column;

}

section.about ul.portrait{
    width : 100%;}


section.le-choix ul li {
    width : inherit;
    max-width : inherit;

}

section.about ul.portrait li {
    height : 50vh;
    background-position: 50% 0%;
    margin-bottom : 20px;

}

section.le-choix ul {

}


.signature{
    font-size: 60px;
    line-height: 50px;
}


section.clients {}

ul.grid li{
    max-width : 100%;

}
}