/*!
Theme Name: Julien Toutain Theme enfant
Theme URI: http://underscores.me/
Template: julientoutain-fr
Author: Julien Toutain
Author URI: https://www.linkedin.com/in/julientoutain/
Description: Ce thème a été créé pour le site internet julientoutain.fr
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: theme-wordpress-pour-julientoutain-fr
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Julien Toutain Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

:root {
	/* Palette de couleurs */
	--primary-color: #01234a; /* Bleu principal */
	--secondary-color: #348bfc; /* Teal pour les boutons */
	--background-color: #F0F0F0; /* Gris clair pour les fonds */
	--text-color: #7F8C8D; /* Gris pour le corps du texte */
	--nav-bar-text-color: #ffffff;
	--text-hover-color: #01234a; /* Couleur du texte au survol */
	--link-color: #4A90E2; /* Liens en bleu */
	--link-visited-color: #4A90E2; /* Liens visités en teal */
	--link-hover-color: #01234a; /* Couleur des liens au survol (bleu foncé) */
	--border-color: #ccc; /* Gris pour les bordures */
  
	/* Typographie */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-size-base: 1rem;
	--title-size-base: 2rem;
	--line-height-base: 1.5;

	/* Couleurs spécifiques pour les titres */
	--title-color: #2C3E50; /* Bleu foncé pour les titres */
	--subtitle-color: #333333; /* Gris foncé pour les sous-titres */
	
	/* Couleurs spécifiques pour les boutons */
	--button-background-color: #093b7d; /* Vert teal pour les boutons */
	--button-text-color: #ffffff; /* Texte blanc dans les boutons */
	--button-border-color: #ccc; /* Bordure des boutons */
  
	/* Autres variables personnalisées */
	--highlight-color: #4A90E2; /* Couleur des éléments mis en avant */
}

.site {
    margin-top: 10px;
}

  /* Liens */
  a {
	color: var(--link-color);
  }
  
  a:hover, a:focus {
	color: var(--link-hover-color);
  }
  
  /* Boutons */
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	border-color: var(--button-border-color);
	border-radius: 20px;
	font-weight: bold;
    padding: 0.5rem 1rem;
  }

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--text-color);
	background-color: var(--background-color);
	margin: 0;
}

/* Elements
--------------------------------------------- */
body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--text-color);
	background-color: var(--background-color);
	margin: 0;
}

.page-content, .entry-content, .entry-summary {
    margin: 1.5em 0 1.5em;
}

.entry-content img {
    border-radius: 20px;
    box-shadow: 0px 4px 15px var(--primary-color);
}

.entry-title, .site-main h1 {
    text-align: center;
}

/* Links
--------------------------------------------- */
a {
	color: var(--link-color);
}

a:visited {
	color: var(--link-visited-color);
}

a:hover,
a:focus,
a:active {
	color: var(--link-hover-color);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Menu
---------------------------------------------- */
/* Conteneur de la navigation */
.main-navigation {
    display: flex;
	flex-direction: column;
    /* justify-content: center;
    align-items: center;
    height: 100%; */
}

/* Styles pour les éléments de la navigation */
.main-navigation a {
    color: var(--nav-bar-text-color); /* Couleur des liens */
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center; /* Centrage horizontal du texte */
    align-items: center; /* Centrage vertical du texte */
    height: 4rem; /* Hauteur définie pour les boutons */
    max-width: 100%; /* Largeur définie pour les boutons */
	min-width: 15%;
    border-radius: 15px;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    padding: 20px 20px;
	/* border: solid; */
}

/* Effet hover */
.main-navigation a:hover {
    background-color: var(--highlight-color); /* Couleur de fond au survol */
    color: var(--text-hover-color); /* Couleur du texte au survol */
    box-shadow: 0px 4px 15px white; /* Ajout d'une ombre légère au survol */
    border-radius: 15px;
}

.main-navigation  .current-menu-item a {
	border: solid;
	background-color: var(--secondary-color);
}

.main-navigation .cta-button a {
    background-color: var(--secondary-color); /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 0.5rem 1rem; /* Ajustement de la taille */
    border-radius: 15px; /* Arrondi des bords */
    font-weight: bold;
	border: solid;
    /* text-transform: uppercase; */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.main-navigation .cta-button a:hover {
    background-color: var(--highlight-color); /* Couleur au survol */
	color: white; /* Changement de couleur du texte au survol */
    box-shadow: 0px 4px 15px white; /* Ajout d'une ombre légère au survol */
}

/* Correction des espacements */
.menu.nav-menu {
    /*display: flex;*/ /* Assurez-vous que le conteneur du menu utilise flexbox */
    justify-content: center;
    align-items: center; /* Centrage vertical du menu */
    height: 100%; /* Hauteur du conteneur */
	width: 100%;
}

.menu.nav-menu ul {
	width: 100%;
	display: flexbox;
}

.menu.nav-menu li {
    list-style: none; /* Supprimer les puces des listes */
    margin: 0; /* Enlever toute marge qui pourrait créer des espaces */
    padding: 0; /* Enlever tout padding pour éviter les décalages */
    display: flex;
    align-items: center; /* Centrer les éléments verticaux */
    padding: 1rem 0rem;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin: 0 auto;
	height: 5rem;
}

.menu-menu-1-container {
	display: flex;
	justify-content: center;
    background-color: var(--primary-color); /* Utilisation de la couleur de fond */
    padding: 0px 0px; /* Ajuster le padding pour un espacement correct */
    /* min-height: 200px; */
	width: 100%;
	max-width: 1200px; /* Limite la largeur du menu, tu peux ajuster cette valeur selon tes besoins */
    margin: 0 auto; /* Centre le menu horizontalement */
    border-top-left-radius: 15px; 
	border-top-right-radius: 15px;
}

#primary-menu {
    /* display: flex;  */
    justify-content: center; /* Centre les éléments à l'intérieur du menu */
    list-style: none; /* Retire les puces des éléments de liste */
    margin: 0; /* Enlève les marges par défaut */
    padding: 0;
}

#primary-menu li {
	display: flex;
	justify-content: center;
    margin: 0 auto; /* Espacement entre les éléments du menu */
	width: auto;
	max-width: 100%;
	min-width: 2rem;
	height: auto;
}

#primary-menu a {
    color: var(--nav-bar-text-color); /* Couleur du texte du menu */
    text-decoration: none; /* Retire la décoration (souligné) des liens */
    font-weight: bold; /* Style du texte (facultatif) */
}

#primary-menu i {
    margin-right: 20px;
}

.site-main {
	/* display: flex; */
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	border: solid var(--primary-color);
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.post, .page, .blog, .single {
	margin: auto 20px;
}

/* Cache le menu sur mobile */
/* .main-navigation .menu.nav-menu #primary-menu ul {
    display: none;
}
.main-navigation .menu #primary-menu {
	display: none;
} */

/* Styles pour le bouton burger */
.menu-toggle {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1.2rem;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.menu-toggle:hover {
    background-color: var(--link-hover-color);
}

/* Affiche le menu quand il est actif */
.main-navigation.toggled ul {
    display: block;
    background-color: var(--background-color);
	opacity: 1;
    transform: translateY(0);
	width: 100%;
	border-left: solid var(--primary-color);
	border-right: solid var(--primary-color);
}

/* .main-navigation ul {
    opacity: 20;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
} */

.main-navigation.toggled a {
	border-radius: 15px;
	border: solid;
	min-width: 100%;
	background-color: var(--primary-color);
}
/* Version supérieur 768px */
@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none; /* Cache le bouton burger sur grand écran */
    }

    .main-navigation ul {
        display: flex; /* Affiche le menu en ligne */
    }

    .main-navigation ul li {
        margin-right: 3rem; /* Plus d'espace entre les éléments */
    }
}
/* Cache le menu sur mobile */
@media screen and (max-width: 767px) {
    .main-navigation ul {
        display: none; /* Cache le conteneur du menu */
    }
	/* #primary-menu {
		display: block;
	} */
}


/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.wp-block-image img {
	border-radius: 20px;
	/* width: 100%; */
	/* height: auto; */
	margin-left: 2%;
	margin-right: 2%;
}

.wp-block-image .picto img {
	width: 10px;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Footer
--------------------------------------------- */
footer {
    color: var(--text-color);
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
}

footer a {
    color: var(--primary-color);
    text-decoration: none;
}

footer a:hover {
    color: var(--text-hover-color);
    text-decoration: none;
}

.footer-social i {
    font-size: x-large;
}
/* 
-------------------
---- Pages --------
------------------- */

/* Section Bienvenue */
.welcome-section h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
    color: var(--title-color);
}

.welcome-section p {
    font-size: 1.2em;
    line-height: 1.6;
    color: var(--text-color);
}

/* Section Services */
.homepage-services-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: var(--title-color);
    text-align: center;
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-list strong {
    text-align: center;
    display: block;
}

.services-list ul {
    margin: 0;
    padding: 0;
}

.services-list li {
    margin-bottom: 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color);
    margin-left: 0;
}

.services-list img {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    border-radius: 20px;
	height: auto;
	width: 40%;
    min-width: 300px;
	max-width: 100%;
	object-fit: cover;
	transition: transform 0.5s ease-in-out; /* Animation sur le survol */
}

.services-list img:hover {
    transform: scale(1.1);
}

.services-list p {
    max-width: 100%;
    min-width: 300px;
    margin-top: 20px;
    width: 50%;
    display: inline;
}
.services-list p:empty {
    display: none;
}

.services-content {
    display: inline-block;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    flex-wrap: nowrap;
}

.services-content img {
    display: inline-block; /* Permet d'afficher l'image et le texte côte à côte */
    vertical-align: top; /* Aligne l'image en haut par rapport au texte */
    margin-right: 5rem; /* Ajoute un espacement à droite de l'image */
}

.services-content p {
    display: inline-block;
    /* margin: 0; */
}
/* Section Pourquoi travailler avec moi */
.why-me-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: var(--title-color);
}

.why-me-section {
    text-align: center;
}

.why-me-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-me-list li {
    margin-bottom: 20px;
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color);
}

.why-me-list i {
    font-size: xx-large;
}

.why-me-list strong {
    margin-left: 20px;
}

/* Section CTA */
.cta-section {
    text-align: center;
    margin-top: 40px;
}

.cta-section h2 {
    font-size: 2.2em;
    margin-bottom: 20px;
    color: var(--title-color);
}

.cta-section p {
    font-size: 1.2em;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 30px;
}

.cta-section .cta-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.2em;
    background-color: var(--button-background-color);
    color: white;
    text-decoration: none;
    border-radius: 20px;
}

.cta-section .cta-button:hover {
    background-color: var(--secondary-color);
}

/* Page Services
-------------------------------------------- */
.services {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
	gap: 20px; /* Espacement entre les éléments */
	max-width: 800px; /* Limite la largeur du conteneur */
	margin: auto; /* Centrer le contenu */
  }
  
  .service-item {
	position: relative;
	overflow: hidden; /* Masque le texte qui dépasse */
	border-radius: 15px; /* Arrondit les angles de l'image et du conteneur */
  }
  
  .service-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease; /* Animation sur le survol */
	border-radius: 15px; /* Arrondit l'image */
  }
  
  .service-text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: white;
	background: rgba(0, 0, 0, 0.6); /* Fond noir semi-transparent */
	padding: 10px;
	text-align: center;
	font-size: 1.2rem;
	opacity: 1; /* Toujours visible */
	transition: background-color 0.3s ease, opacity 0.3s ease; /* Ajoute un effet au survol */
	border-bottom-left-radius: 15px; /* Arrondit le coin inférieur gauche du texte */
	border-bottom-right-radius: 15px; /* Arrondit le coin inférieur droit du texte */
  }
  
  .service-item:hover img {
	transform: scale(1.1); /* Zoom de l'image au survol */
  }
  
  .service-item:hover .service-text {
	background-color: rgba(0, 0, 0, 0.8); /* Accentue l'effet du fond noir au survol */
	opacity: 0.9; /* Légère variation d'opacité au survol */
  }
  
  /* Responsive : 1 colonne sur mobile */
  @media (max-width: 600px) {
	.services {
	  grid-template-columns: 1fr; /* 1 colonne sur petite résolution */
	}
  }
	  
  /* Page Blog
  ---------------------------- */

  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
 }
 
 .blog-post {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
 }
 
 .blog-post:hover {
    transform: translateY(-5px);
 }
 
 .blog-post a {
    text-decoration: none;
 }

 .post-thumbnail {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
 }

 .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
 }

 .custom-blog-size-default, 
 .attachment-custom-blog-size.size-custom-blog-size.wp-post-image {
    object-fit: cover;  /* Facultatif, mais utile pour maintenir l'aspect de l'image */
    border-radius: 20px;
} 
 
 .post-title {
    font-size: 1.5rem;
    margin-top: 10px;
 }
 
 .post-excerpt {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
 }

 .post-excerpt p {
    margin: 0;
 }
 
 .navigation.post-navigation, .comments-area {
    margin: auto 20px;
 }
  /* Page contact
  ---------------------------- */

  /* Style de base pour les éléments du formulaire */
.form-input, .form-textarea {
    width: 100%; /* Prend toute la largeur de l'élément parent */
    padding: 10px; /* Ajoute de l'espace à l'intérieur du champ */
    margin-bottom: 15px; /* Espace entre les champs */
    box-sizing: border-box; /* Inclut les padding dans la taille totale */
}

  /* Conteneur pour les boutons */
.form-buttons {
    display: flex;
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 1rem; /* Espace entre les boutons */
    margin-top: 1rem; /* Ajoute un espace au-dessus des boutons si nécessaire */
}

/* Stylisation du bouton Prendre RDV */
.rdv-button,
.contact-page-cta,
input[type="submit"] {
	min-width: 120px;
    padding: 0.5rem 1rem;
    text-decoration: none; 
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	border-color: var(--button-border-color);
	border-radius: 20px;
}

/* Effet au survol */
.rdv-button:hover,
.contact-page-cta:hover,
input[type="submit"]:hover {
    background-color: var(--secondary-color); /* Changement de couleur au survol */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Ajout d'une ombre légère au survol */
}

.rdv-button:visited {
	color: var(--button-text-color);
}

/* Page à propos 
----------------------*/
.about-section, .experience-section, .services-section, .values-section, .contact-section, .social-section {
    padding: 40px 20px;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
}

.about-container, .experience-container, .services-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.about-photo img {
    border-radius: 50%;
    max-width: 300px;
    max-height: 300px;
    height: 300px;
    width: 300px;
    /* min-height: 200px;
    min-width: 200px; */
    object-fit: cover;
	/* border: solid var(--primary-color); */
	transition: transform 0.5s ease-in-out; /* Animation sur le survol */
    box-shadow: 0 0 20px var(--primary-color);
}

.services-pic img {
	border-radius: 20px;
	height: auto;
	width: 300px;
	max-width: 100%;
	object-fit: cover;
	transition: transform 0.5s ease-in-out; /* Animation sur le survol */
}

.about-photo img:hover, .services-pic img:hover {
	transform: scale(1.1); /* Zoom de l'image au survol */
	/* border: solid var(--primary-color); */
	/* border: none; */
}

.about-content, .experience-content, .services-content {
    flex: 1;
	flex-direction: column;
	text-align: left;
}

.contact-section p {
	width: 60%;
	margin-left: 20%;
}

.contact-buttons, .social-links {
    margin-top: 20px;
}

.contact-button, .social-link {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

.contact-button:hover, .social-link:hover {
    background-color: #0056b3;
}

.values-section ul {
    list-style-type: none;
    padding: 0;
	margin-left: 20%;
	width: 60%;
}

.values-section li {
    margin-bottom: 10px;
}

.values-section i {
	font-size: x-large;
}

/* Section réseaux sociaux */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espace entre les boutons */
    flex-wrap: wrap; /* Pour que les boutons se réorganisent sur plusieurs lignes si l'espace est limité */
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: var(--button-background-color);
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.social-link i {
    margin-right: 8px; /* Espace entre l'icône et le texte */
}

.social-link:hover {
    background-color: var(--secondary-color);
}

.social-links a:visited {
	color: white;
}

/* Responsive: Réduire la taille sur mobile */
@media (max-width: 768px) {
    .social-link {
        padding: 8px 15px;
        font-size: 16px;
    }
    
    .social-links {
        gap: 10px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .about-container, .experience-container, .services-container {
        flex-direction: column;
    }
    /* Adapter la taille des images sur mobile */
    /* .about-photo img, .services-pic img {
        width: 100%;
        height: auto;
    } */
    /* .about-photo img {
        width: 100%;
        height: auto;
    } */
}


/* Effet au scroll 
----------------------*/

.scroll-left, .scroll-right {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    position: relative;
  }
  
  .scroll-left {
    transform: translateX(-100%);
  }
  
  .scroll-right {
    transform: translateX(100%);
  }
  
  .scroll-left.visible, .scroll-right.visible {
    opacity: 1;
    transform: translateX(0);
  }