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

Theme Name: Divi-child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Description: Child theme for the Divi theme
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Template: Divi
Version: 1.0.0
	
============================================================
*/


/************************************************ 
 *
 * GÉNÉRAL
 *
 ************************************************/

a:hover {
	text-decoration:underline;
}


/************************************************ 
 *
 * HEADER/MENU
 *
 ************************************************/

/* VERSION BUREAU */

/* BANDEAU LOGO/HAMBURGER (TOUTES PAGES SAUF ACCUEIL) */

/* Colonne 1 & 3 = marge fixe à gauche et à droite */
.bandeau-cols > .et_pb_column:nth-child(1),
.bandeau-cols > .et_pb_column:nth-child(3) {
    width: 10%;
}
/* Colonne 2 = colonne centrale */
.bandeau-cols > .et_pb_column:nth-child(2) {
    width: 80%;
}

/* BANDEAU LOGO/HAMBURGER (ACCUEIL) */

.accueil #bandeau-menu .bandeau-cols {
    display: flex;
    justify-content: space-between; /* Permet de répartir l'espace */
    align-items: center;
	width: 100%;
    gap: 0 !important; /* utile pour le liseré < 1px ? */
}
.accueil .bandeau-cols > .et_pb_column {
    min-height: 50px; /* Assure que toutes les colonnes aient la même hauteur que le logo */
    display: flex; 
    align-items: center; /* Centre les contenus (si présents) */
	box-sizing: border-box; /* utile pour le liseré < 1px ? */
}
/* Version #1 avec logo à gauche :
 * .bandeau-cols > .et_pb_column:nth-child(1) { width: 10%; }
.bandeau-cols > .et_pb_column:nth-child(2) { width: 196px; }
.bandeau-cols > .et_pb_column:nth-child(3) { flex-grow: 1; } /* Automatique
.bandeau-cols > .et_pb_column:nth-child(4) { width: 50px; }
.bandeau-cols > .et_pb_column:nth-child(5) { width: 10%; }
.bandeau-cols > .et_pb_column:nth-child(3) { width:calc(100% - (10% + 196px + 50px + 10%)) } /* Manuel - utile pour le liseré < 1px ? */
/* Colonne 1 & 6 = marge fixe à gauche et à droite */
.accueil .bandeau-cols > .et_pb_column:nth-child(1),
.accueil .bandeau-cols > .et_pb_column:nth-child(6) {
    width: 10%;
}
/* Colonne 2 = colonne gauche (plus large) */
.accueil .bandeau-cols > .et_pb_column:nth-child(2) {
    width: calc(((100% - 196px - 50px - 20%) / 2) + 25px);
}
/* Colonne 3 = logo centré */
.accueil .bandeau-cols > .et_pb_column:nth-child(3) {
    width: 196px;
    justify-content: center;
}
/* Colonne 4 = colonne droite (plus courte de 50px) */
.accueil .bandeau-cols > .et_pb_column:nth-child(4) {
    width: calc(((100% - 196px - 50px - 20%) / 2) - 25px);
}
/* Colonne 5 = bouton hamburger */
.accueil .bandeau-cols > .et_pb_column:nth-child(5){
    width: 50px;
}

/* MENU HAMBURGER (3 BARRES) */

#menu-hamburger {
	width: 50px;
	height: 50px;
	margin:0;
	padding:0;
	display: block;
	cursor: pointer;
}
.line {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform-origin: center; /* Correction du centrage */
}
/* Animation du menu */
.active_menu .line-1 {
    transform: translateY(8px) translateX(-7px) rotate(45deg);
}
.active_menu .line-2 {
    opacity: 0;
}
.active_menu .line-3 {
    transform: translateY(-7px) translateX(-7px) rotate(-45deg);
}

/* MENU HAMBURGER (ITEMS) */

#menu-content {
    position: absolute;
    top: 0px; /* Juste en dessous du hamburger / Avant : 25px (?) */
    right: 0;
    min-width: 175px;
    background: black;
    text-align: center;
    padding: 10px 0;
    visibility: hidden; /* Caché mais présent */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(-20px);
}
.home #menu-content {
    top: 20px; /* Correction page d'Accueil (?) */
}
/* Liens du menu */
#menu-content a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 8px 15px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#menu-content a:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* Quand le menu est actif */
#menu-content.menu-visible {
    visibility: visible; /* Maintenant l'animation peut s'exécuter */
    opacity: 1;
    transform: translateY(0);
}

/* Ombrage en sticky */
body:not(.home) header .et_pb_section#bandeau-menu.et_pb_sticky {
	-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.1) !important;
	box-shadow: 0 0 7px rgba(0,0,0,0.1) !important;
	transition: background-color 300ms ease 0ms,background-image 300ms ease 0ms;
}

/* VERSION TABLETTE / SMARTPHONE */

.et_mobile_menu a:hover{
	text-decoration:initial;
}
.et_mobile_menu li.current-menu-item a,
.single-projet .et_mobile_menu li.projets a{
	font-weight:bold;
}
.et_pb_menu--style-left_aligned .et_pb_menu_inner_container,
.et_pb_menu--style-left_aligned .et_pb_row ‹{
	align-items: flex-start;
}


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

/* Footer collé au bas de l'écran */
html, body {
  height: 100%;
  margin: 0;
}
#page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#et-boc {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#et-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#main-content {
  flex: 1;
}

/************************************************ 
 *
 * ACCUEIL
 * 
 * Le Header est 75px de top et il fait 88px de haut
 * donc les pages Accueil et Projets doivent être
 * à un top = - 75 - 88 = -163px
 * 
 ************************************************/

/* Image Plein cadre */
.home .ap-fullscreen-section {
	margin-top:-163px;
	height: 100vh;
	display: flex;
	align-items: center; /* Centre le contenu */
	justify-content: center;
}
/* Petit écran (tablette portrait) : bug Samsung, préférer transform: translateY */
@media (max-width: 768px) {
	.home .et-l .et_builder_inner_content {
/*		height:100vh; */
    }
	.home .ap-fullscreen-section {
		margin-top:0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
		height:100vh;
/*        height: calc(100vh + 130px); */
        display: flex;
        justify-content: center;
        align-items: center;
		transform: translateY(-130px);
	}
}

/************************************************ 
 *
 * PROJETS
 * 
 * Le Header est 75px de top et il fait 88px de haut
 * donc les pages Accueil et Projets doivent être
 * à un top = - 75 - 88 = -163px
 * 
 ************************************************/

.projets .at-fullscreen-section {
	margin-top:-163px;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.projets .at-fullscreen-section {
    position: relative;
    z-index: 1;
}
.projets .at-fullscreen-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/2025/04/fond-projets-2-1920×1080.jpg');
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: -1;
}

.projets .at-fullscreen-section .et_pb_row {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.projets .at-fullscreen-section .et_pb_row,
.projets .at-fullscreen-section .et_pb_row .et_pb_column,
.projets .at-fullscreen-section .et_pb_row .et_pb_column .et_pb_module.et_pb_code,
.projets .at-fullscreen-section .et_pb_row .et_pb_column .et_pb_module.et_pb_code .et_pb_code_inner,
.projets .at-fullscreen-section .et_pb_row .et_pb_column .et_pb_module.et_pb_code .et_pb_code_inner #projets-container {
    position: relative;
    width: 100%;
    height: 100%;
/*    padding: 10% 10%; /* 10% de marge sur les côtés */
    height: 100%;
/*    display: flex; */
}
.projets #projets-container {
	padding-top:150px;
}

/* Icônes (dont animation) */
.icone-projet {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.icone-projet:hover {
    transform: scale(1.2); /* ne fonctionne pas */
	opacity: 0.8;
}
.icone-projet {
    transition: transform 2s ease-in-out;
}
.icone-projet:hover {
    transform: translate(var(--offset-x), var(--offset-y)) rotate(var(--rotate)) scale(1.2);
}


/********************************************* 
 *
 * TEMPLATE PROJET 
 *
 ************************************************/

/* Resize des photos générées par les shortcodes */
.single-projet .dimension-imea {
	max-width: 100%;
	height: auto;
}

.single-projet .miniature-animal {
	position:absolute;
	z-index:2;
	top: -25px;
	right: -25px;
}

.single-projet .miniature-animal img {
	width:75px!important;
	height:auto;
}
.single-projet .miniature-animal::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    top: 50%;  /* Centre le cercle sous l'image */
	top: calc(50% - 2px); /* Rectifie car le cercle n'est pas tout à fait insrcrit dans le carré */
	left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Place le cercle en arrière-plan */
}

.single-projet .photo img {
    pointer-events: none; /* Supprime l'attribut (mais désactive le click) */
}

.single-projet .separation {
	color:#000000;
	margin:0 10px;
}

/************************************************ 
 *
 * COMPÉTENCES (LOGOS)
 * 
 ************************************************/

.competences .at-logos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligne les logos à gauche */
  	gap: 50px; /* Espacement entre les images */
    row-gap: 50px; /* Espacement vertical personnalisé */
}

/* Par défaut : 4 colonnes
.competences .at-logos-container .et_pb_module {
    flex: 1 1 calc(25% - 37.5px);
    max-width: calc(25% - 37.5px);
    height: auto;
} */
/* Par défaut : 5 colonnes
.competences .at-logos-container .et_pb_module {
    flex: 1 1 calc((100% - (4 * 50px)) / 5); /* 4 gaps de 50px entre 5 colonnes
    max-width: calc((100% - (4 * 50px)) / 5);
    height: auto;
}*/
/* Par défaut : 6 colonnes */
.competences .at-logos-container .et_pb_module {
    flex: 1 1 calc((100% - (5 * 50px)) / 6); /* 5 gaps de 50px entre 6 colonnes */
    max-width: calc((100% - (5 * 50px)) / 6);
}
/* Tablette : 3 colonnes */
@media (max-width: 980px) {
    .competences .at-logos-container .et_pb_module {
        flex: 1 1 calc(33.33% - 33.33px); 
        max-width: calc(33.33% - 33.33px);
    }
}
/* Petit écran (tablette portrait) : 2 colonnes */
@media (max-width: 768px) {
    .competences .at-logos-container .et_pb_module {
        flex: 1 1 calc(50% - 25px); 
        max-width: calc(50% - 25px);
    }
}
/* Smartphone : 1 colonne
@media (max-width: 480px) {
    .competences .at-logos-container .et_pb_module {
        flex: 1 1 100%;
        max-width: 100%;
    }
} */
/* Forcer l'alignement des éléments sur la dernière ligne à gauche */
/* .competences .at-logos-container .et_pb_module:nth-last-child(-n+4) { /* 4 pour 4 colonnes */
.competences .at-logos-container .et_pb_module:nth-last-child(-n+4) { /* 6 pour 6 colonnes */
    margin-right: 0 !important; /* Enlever la marge à droite pour les éléments de la dernière ligne */
}

/* Images */
.competences .at-logos-container .et_pb_module img {
	filter: grayscale(100%); /* Passe en noir & blanc */
	opacity: 0.25; /* Réduit l'opacité (ajuste selon tes préférences) */
	transition: filter 0.3s ease, opacity 0.3s ease; /* Animation fluide */
}
.competences .at-logos-container .et_pb_module img:hover {
	filter: grayscale(0%); /* Retrouve les couleurs d'origine */
	opacity: 1; /* Rétablit l'opacité */
}


/************************************************ 
 *
 * CONTACT
 *
 ************************************************/ 

/* Formulaire */
.contact .frm_forms label,
.contact .frm_forms button,
.contact .frm_forms input,
.contact .frm_forms input::placeholder,
.contact .frm_forms input:focus,
.contact .frm_forms textarea {
	font-family: 'Arial',Helvetica,Arial,Lucida,sans-serif!important;
	font-size:15px!important;											/* à modifier */
}

.contact .frm_forms input::placeholder {
	color:#CCCCCC;
}

.contact .frm_forms input,
.contact .frm_forms textarea {
	border: none!important;
	box-shadow: none!important;
	border-bottom: 1px solid #CCCCCC!important;
	border-radius: 0!important;
	padding-left: 0px;
}
.contact .frm_forms input:focus,
.contact .frm_forms textarea:focus {
	border-bottom: 1px solid #666666!important;
}

.contact .frm_forms label,
.contact .frm_forms span.frm_required {
	color: #CCCCCC!important;	
}

/* Bouton 'Envoyer' */
.contact .frm_forms button {
	background-color:#000000!important;									/* à modifier #1c6996 */
	border:none!important;
	border-radius:0px!important;										  /* à modifier */
}
.contact .frm_forms button:hover {
	background-color:rgba(0, 0, 0, 1)!important;
	color:#FFFFFF!important;
}

/* Bouton d'upload */
.contact .frm_form_field .frm_single_upload button {
	font-family: 'Arial',Helvetica,Arial,Lucida,sans-serif!important;
	margin:15px 0;	
	padding: 10px!important;
	font-size: 12px!important;
	color: #FFFFFF!important;
}
.contact .frm_form_field .frm_single_upload .frm_small_text {
	font-family: 'Arial',Helvetica,Arial,Lucida,sans-serif!important;
	font-size: 12px!important;
}