/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */  
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

nav {
    max-width: 2400px;
}

body {
    background-image: url("/wp-content/uploads/2025/03/1742541941350-089f389d-6055-45e7-bfe3-c6f3c3139a81_1.jpg");
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
	overflow-x: hidden;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

body .wp-block-group {
    padding-right: 0 !important;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.wp-block-navigation-item {
    display: inline-block; /* Pour les mettre côte à côte */
    margin-right: 10px; /* Espace entre les boutons */
}

img.custom-logo {
    height: 175px;
}

.wp-block-navigation-item a.wp-block-navigation-item__content {
    background-color: #9b5b69;
    color: white !important;
    padding: 10px 20px; 
    border-radius: 20px; 
    text-decoration: none;
    font-family: sans-serif; 
    font-weight: bold; 
	letter-spacing: 4px;
    margin: 0 20px 0 20px;
    font-family: auto;
}

.wp-block-navigation-item a.wp-block-navigation-item__content {
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.wp-block-navigation-item a.wp-block-navigation-item__content:hover {
    background-color: #A00000;
    transform: scale(1.05); /* Légère augmentation de la taille */
}


/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

.wp-block-cover__inner-container {
    display: flex;
    justify-content: center;
}

.wp-block-group.is-layout-flex.wp-container-core-group-is-layout-2.wp-block-group-is-layout-flex {
    margin-left: 60px;
}

ul.wp-block-social-links.is-layout-flex.wp-block-social-links-is-layout-flex {
    margin-right: 60px;
}

/* Styles généraux */
.cstm-header,
.cstm-projets,
.cstm-prestations,
.cstm-agencement,
.cstm-contact,
.cstm-visuel-3d {
    padding: 40px 0;
    text-align: center;
}

.cstm-header-logo img {
    width: 150px;
}

.cstm-titre {
    background: #9b5b69;
    color: white;
    padding: 15px;
    border-radius: 0 50px 50px 0;
    width: 20%;
    margin: 0 auto 20px 0;
    font-size: 32px;
    letter-spacing: 4px;
    font-weight: bold;
    text-align: center;
}

.cstm-contact {
    width: 100%;
    padding: 20px 0; /* Ajustez la hauteur si besoin */
}

.container-centree {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px; /* Optionnel : pour ajouter un peu d'espace sur les côtés */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cstm-contact section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #9b5b69; 
    max-width: 800px;
    margin: 0 auto;
}

.wpcf7 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Section Les Projets */

.cstm-banner {
    padding-bottom: 0px;
	margin-top: 0px;
	padding-top: 0px;
	margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 100% !important;
}

.cstm-banner-image {
    position: relative;
    height: 600px; 
    overflow: hidden; 
  }
  
.cstm-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: 50% 75%;
}

.logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo-overlay img {
    max-width: 60%;
    max-height: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

main#wp--skip-link--target {
    margin: 0 !important;
}

/* Section contenant les projets */
.cstm-projets-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #9b5b69; 
}

.page-id-93 .wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding: 0px !important;
}

.wp-block-query.alignfull.is-layout-flow.wp-block-query-is-layout-flow {
    padding: 0 50px 0 50px !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100% !important;
}

/* Conteneur de chaque projet */
.cstm-projet {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Gélule verticale contenant l’image */
.cstm-cercle {
    width: 450px;  /* Largeur de la gélule */
    height: 700px; /* Hauteur de la gélule */
    background-color: transparent;
    border: 5px solid white; /* Bordure de la gélule */
    border-radius: 300px; /* Bordure très arrondie pour l'effet gélule */
    overflow: hidden; /* Cache l’image qui dépasse */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cstm-cercle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.cstm-cercle:hover img {
    transform: scale(1.1); /* Grossit l'image de 10% au survol */
}




/* Section Prestations */
.cstm-prestations {
	margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 100% !important;
}

.cstm-prestations-texte {
    background: #9b5b69;
    color: white;
    padding: 20px;
    border-radius: 50px;
    width: 70%;
    margin: 0 auto 20px;
}

.cstm-prestations-texte h3{
    font-weight: bold;
	letter-spacing: 2px;
}

.cstm-prestations-container img {
    width: 80%;
    border-radius: 10px;
}

/* Section Agencement et Décoration */
.cstm-prestations-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
}
  
  .cstm-prestations-container .cstm-image-texte {
    flex: 0 1 45%;  /* Chaque conteneur occupe environ 45% de la largeur du parent */
    height: 500px;       /* Hauteur fixe souhaitée */
    overflow: hidden;
  }
  
  .cstm-prestations-container .cstm-image-texte img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

.cstm-image-texte {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cstm-image-texte img {
    width: 750px;
    height: 500px;
    border-radius: 15px;
    margin: 5px 0;
    object-fit: cover;
}

/* Labels Salle de Bain */
.cstm-label {
    position: absolute;
    background: white;
    color: #6e3a42;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 14px;
}

.cstm-agencement {
	margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 100% !important;
}

.cstm-agencement-container {
    display: flex;
    align-items: flex-start; /* Pour aligner les éléments en haut */
    justify-content: center;
    gap: 20px;
   
    margin-left: auto;
    margin-right: auto;
    width: 80% !important;
    max-width: 80% !important;
}

.cstm-image-texte {
    display: flex;
    flex-direction: column; 
    width: 30%; 
}

.cstm-image-texte2 {
    display: flex;
    flex-direction: column; 
    width: 50%; 
}

.cstm-image-container {
    position: relative; 
    margin-bottom: 20px; 
}

.cstm-image-container img {
    width: 100%; 
    display: block;
}

.cstm-labels {
    position: absolute; /* Positionnement absolu par rapport à cstm-image-container */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste le positionnement pour le centrage parfait */
    display: flex;
    justify-content: center; /* Espacement égal entre les labels */
}

.cstm-label {
    background-color: #f0f0f0; /* Couleur de fond des labels (ajustez selon vos besoins) */
    padding: 5px 10px; /* Espacement intérieur des labels */
    margin: 0 5px; /* Espace entre les labels */
    font-size: 14px; /* Taille de la police (ajustez selon vos besoins) */
}

.cstm-plan {
    width: 55%;
    border-radius: 15px;
}

/* Plan */
.cstm-plan {
    width: 350px;
    border-radius: 15px;
}

/* Section Visuel 3D */
.cstm-visuel-3d-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 80% !important;
    max-width: 80% !important;
}

.cstm-visuel-3d-container img {
    width: 40%;
    border-radius: 15px;
}

form {
    color: #6e3a42;
    font-weight: bold;
    display: flex; /* Active flexbox sur le formulaire */
    flex-direction: column; /* Organise les éléments en colonne */
    align-items: center;
}

.cstm-submit {
    background-color: #9b5b69;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
}

.cstm-form {
    border: 2px solid #9b5b69 !important;
    background-color: transparent;
    padding: 10px;
    width: 100%; 
    max-width: 800px;
    padding: 10px;
    margin-bottom: 15px; 
    border: 1px solid #ccc; 
    box-sizing: border-box
}

.wpcf7-captchar {
    border: 2px solid #9b5b69 !important;
    background-color: transparent;
    padding: 10px;
    width: 80%; 
    max-width: 300px;
    padding: 10px;
    margin-bottom: 15px; 
    border: 1px solid #ccc; 
    box-sizing: border-box
}

.cstm-form input::placeholder,
.cstm-form textarea::placeholder {
    color: #9b5b69 !important;
}

.cstm-form input,
.cstm-form textarea {
    width: 100% !important; /* Force la largeur à 100% */
    max-width: 100% !important; /* Force la largeur maximale à 100% */
}

.form-line {
    /* display: flex; /* Affiche les champs en ligne */
    width: 100%; /* Prend toute la largeur disponible */
    /* max-width: 500px;  Limite la largeur maximale */
    justify-content: space-between; /* Espace les champs de manière égale */
}

.form-line2 {
    width: 100%; /* Prend toute la largeur disponible */
    /* max-width: 500px; Limite la largeur maximale */
}

.form-line p {
    display: flex; /* Affiche les éléments p en ligne */
    width: 100%; /* Prend toute la largeur disponible */
    justify-content: space-between; /* Espace les champs de manière égale */
    margin: 0; /* Supprime les marges par défaut des éléments p */
}

.wpcf7-form-control-wrap {
    width: 48%; /* Ajuste la largeur des champs (laisse un peu d'espace entre eux) */
}

/* Media query pour les tablettes (768px et moins) */
@media (max-width: 768px) {
    .cstm-cercle {
        width: 350px;
        height: 550px;
    }
}

/* Media query pour les téléphones (480px et moins) */
@media (max-width: 480px) {
    .cstm-cercle {
        width: 90%;
        height: 300px; /* Permet à la hauteur de s'ajuster automatiquement */
    }
}

/* Media query pour les téléphones (768px et moins) */
@media (max-width: 768px) {
    .cstm-visuel-3d-container img {
        width: 90%; /* Les images prennent toute la largeur sur les petits écrans */
    }
}

/* Media query pour les téléphones (768px et moins) */
@media (max-width: 768px) {
    .cstm-prestations-container img {
        width: 90%; /* Les images prennent toute la largeur sur les petits écrans */
    }
}

/* Media query pour les tablettes (900px et moins) */
@media (max-width: 768px) {
    .cstm-titre {
        width: 50%; /* Augmenter la largeur pour les tablettes */
    }
}

/* Media query pour les téléphones (480px et moins) */
@media (max-width: 480px) {
    .cstm-titre {
        width: 80%; /* Augmenter encore plus la largeur pour les téléphones */
    }
}

.wpcf7 form .wpcf7-response-output {
    margin: 0 !important;
}

h1.wp-block-query-title {
    display: none;
}

.wp-block-post-date.has-small-font-size {
    display: none;
}