.wpcf7 .submit-wrapper {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
}

.wpcf7 .submit-wrapper input[type="submit"] {
  background-color: #f5646d;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
}

.wpcf7 .submit-wrapper input[type="submit"]:hover {
  background-color: #d95358;
  transform: scale(1.05);
}

.wpcf7 .bold-label {
  font-weight: bold;
}
/* Met tous les labels en gras */
.wpcf7 form label {
  font-weight: bold;
}

/* Sauf Email et Téléphone */
.wpcf7 form label:has([name*="your-email"]),
.wpcf7 form label:has([name*="your-phone"]) {
  font-weight: normal;
}

/* Met aussi en gras les paragraphes spéciaux */
.wpcf7 .bold-label {
  font-weight: bold;
}

/* Masque le menu si ?hide-menu=1 */
body.hide-menu .site-header,
body.hide-menu #masthead,
body.hide-menu .main-navigation,
body.hide-menu .nav-menu,
body.hide-menu header {
  display: none !important;
}
body.hide-menu {
  padding-top: 0 !important;
}
/* Cible la section contenant les 3 blocs */
.services-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  text-align: center;
}

/* Cible chaque bloc */
.service-box {
  max-width: 300px;
  flex: 1 1 300px;
  margin: 0 auto;
  background-color: #fdfdfd;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}


.services-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  align-items: stretch; /* 🔑 rend tous les blocs de même hauteur */
}

.service-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.services-grid-title {
  text-align: center;
  width: 100%;
  margin-bottom: 40px;
}
.services-grid-title {
  text-align: center;
  width: 100%;
  margin-bottom: 40px;
  color: #000 !important; /* Force la couleur noire */
}
h2 {
  text-align: center;
  color: #000 !important;
}
h2.titre-gauche {
  text-align: left !important;
}
h3.titre-gauche {
  text-align: left !important;
  color: #000 !important;
}
h2.titre-cover-blanc {
  color: #ffffff !important;
  text-align: center;
}
body.page-id-3cd5d8d .custom-submit {
  background-color: #f4656d !important;
  /* other styles… */
}

body.page-id-3cd5d8d .checkbox-wrap input[type="checkbox"] {
  accent-color: #f4656d;
  transform: scale(1.2);
  margin-right: 8px;
}

body.page-id-3cd5d8d .akismet-note {
  text-align: center;
  margin-top: 24px;
}

/* CORRECTIF POUR MENU DÉROULANT NOIR */

/* Forcer le fond blanc et le texte visible pour tous les menus déroulants */
.group:hover .absolute,
[class*="dropdown"],
[class*="menu"] .absolute,
.relative .absolute {
    background-color: white !important;
    color: #374151 !important; /* text-gray-700 */
    border: 1px solid #e5e7eb !important; /* border-gray-200 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    z-index: 9999 !important;
}

/* Liens dans le menu déroulant */
.group:hover .absolute a,
[class*="dropdown"] a,
[class*="menu"] .absolute a,
.relative .absolute a {
    color: #374151 !important; /* text-gray-700 */
    background-color: transparent !important;
    display: block !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Effet hover sur les liens du menu */
.group:hover .absolute a:hover,
[class*="dropdown"] a:hover,
[class*="menu"] .absolute a:hover,
.relative .absolute a:hover {
    background-color: rgba(245, 100, 109, 0.05) !important; /* bg-primary bg-opacity-5 */
    color: #f5646d !important; /* text-primary */
}

/* Spécifiquement pour les menus de navigation */
nav .relative .absolute,
header .relative .absolute {
    background: white !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
    margin-top: 8px !important;
}

nav .relative .absolute a,
header .relative .absolute a {
    color: #374151 !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
}

nav .relative .absolute a:hover,
header .relative .absolute a:hover {
    background-color: rgba(245, 100, 109, 0.05) !important;
    color: #f5646d !important;
}

/* Forcer l'affichage au survol */
.group:hover > .absolute {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Correction pour les icônes dans le menu */
.group:hover .absolute i,
[class*="dropdown"] i,
[class*="menu"] .absolute i {
    color: inherit !important;
}

/* CORRECTIF SPÉCIFIQUE WORDPRESS - À AJOUTER À VOTRE CSS EXISTANT */

/* Cibler spécifiquement les menus WordPress */
.site-header .menu-item-has-children .sub-menu,
.main-navigation .menu-item-has-children .sub-menu,
.primary-menu .menu-item-has-children .sub-menu,
.header-menu .menu-item-has-children .sub-menu,
.navigation .menu-item-has-children .sub-menu,
#site-navigation .menu-item-has-children .sub-menu,
#primary-menu .menu-item-has-children .sub-menu,
.navbar .menu-item-has-children .sub-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin-top: 5px !important;
    z-index: 999999 !important;
    position: absolute !important;
    min-width: 200px !important;
    left: 0 !important;
    top: 100% !important;
}

/* Liens dans les sous-menus WordPress */
.site-header .menu-item-has-children .sub-menu a,
.main-navigation .menu-item-has-children .sub-menu a,
.primary-menu .menu-item-has-children .sub-menu a,
.header-menu .menu-item-has-children .sub-menu a,
.navigation .menu-item-has-children .sub-menu a,
#site-navigation .menu-item-has-children .sub-menu a,
#primary-menu .menu-item-has-children .sub-menu a,
.navbar .menu-item-has-children .sub-menu a {
    color: #1f2937 !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 10px 16px !important;
    display: block !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Effet hover sur les liens WordPress */
.site-header .menu-item-has-children .sub-menu a:hover,
.main-navigation .menu-item-has-children .sub-menu a:hover,
.primary-menu .menu-item-has-children .sub-menu a:hover,
.header-menu .menu-item-has-children .sub-menu a:hover,
.navigation .menu-item-has-children .sub-menu a:hover,
#site-navigation .menu-item-has-children .sub-menu a:hover,
#primary-menu .menu-item-has-children .sub-menu a:hover,
.navbar .menu-item-has-children .sub-menu a:hover {
    background: rgba(245, 100, 109, 0.1) !important;
    background-color: rgba(245, 100, 109, 0.1) !important;
    color: #f5646d !important;
}

/* Forcer l'affichage des sous-menus au hover */
.site-header .menu-item-has-children:hover .sub-menu,
.main-navigation .menu-item-has-children:hover .sub-menu,
.primary-menu .menu-item-has-children:hover .sub-menu,
.header-menu .menu-item-has-children:hover .sub-menu,
.navigation .menu-item-has-children:hover .sub-menu,
#site-navigation .menu-item-has-children:hover .sub-menu,
#primary-menu .menu-item-has-children:hover .sub-menu,
.navbar .menu-item-has-children:hover .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Correctif pour les thèmes qui utilisent des classes différentes */
.menu .dropdown-menu,
.menu .sub-menu,
.menu .children,
.wp-nav-menu .dropdown-menu,
.wp-nav-menu .sub-menu,
.wp-nav-menu .children {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    z-index: 999999 !important;
}

.menu .dropdown-menu a,
.menu .sub-menu a,
.menu .children a,
.wp-nav-menu .dropdown-menu a,
.wp-nav-menu .sub-menu a,
.wp-nav-menu .children a {
    color: #1f2937 !important;
    background: transparent !important;
    padding: 10px 16px !important;
}

.menu .dropdown-menu a:hover,
.menu .sub-menu a:hover,
.menu .children a:hover,
.wp-nav-menu .dropdown-menu a:hover,
.wp-nav-menu .sub-menu a:hover,
.wp-nav-menu .children a:hover {
    background: rgba(245, 100, 109, 0.1) !important;
    color: #f5646d !important;
}

/* Correctif d'urgence pour TOUS les éléments de menu */
li.menu-item-has-children ul,
li.menu-item-has-children ul li,
li.menu-item-has-children ul li a {
    background: white !important;
    color: #1f2937 !important;
}

li.menu-item-has-children ul li a:hover {
    background: rgba(245, 100, 109, 0.1) !important;
    color: #f5646d !important;
}

/* Correctif pour les menus avec ID spécifique */
#menu-main ul,
#menu-primary ul,
#menu-header ul,
#menu-navigation ul {
    background: white !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

#menu-main ul a,
#menu-primary ul a,
#menu-header ul a,
#menu-navigation ul a {
    color: #1f2937 !important;
    background: transparent !important;
}

#menu-main ul a:hover,
#menu-primary ul a:hover,
#menu-header ul a:hover,
#menu-navigation ul a:hover {
    background: rgba(245, 100, 109, 0.1) !important;
    color: #f5646d !important;
}
/* Masque le menu UNIQUEMENT si ?from=consultant */
body.page-template-page-projects-no-menu .site-header,
body.page-template-page-projects-no-menu #masthead,
body.page-template-page-projects-no-menu .main-navigation {
  display: none !important;
}
body.page-template-page-projects-no-menu { 
  padding-top: 0 !important; 
}

/* Cache le header quand ?hide-menu=1 est présent */
.hide-menu-query header,
.hide-menu-query .site-header,
.hide-menu-query nav,
.hide-menu-query .main-navigation { 
  display: none !important;
}
/* UNIQUEMENT sur la page Artwork – largeur idéale : 1200 px (large mais pas plein écran) */
.page-id-13297 .site-main,
.page-id-13297 .entry-content,
.page-id-13297 .wp-block-group,
.page-id-13297 .container,
.page-id-13297 .max-w-wide,
.page-id-13297 .content-area,
.page-id-13297 .wp-block-post-content {
    max-width: 1200px !important;     /* ← largeur parfaite : large et aéré */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* Masquer le menu – uniquement sur cette page */
.page-id-13297 header nav,
.page-id-13297 .site-header nav,
.page-id-13297 .main-navigation,
.page-id-13297 .primary-menu {
    display: none !important;
}
.et-post-narrow{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* CF7 simple styling for your page */

/* espace + pas gras */
#contact .wpcf7,
#contact .wpcf7 * {
  font-weight: 400;
}

/* espace entre question et checkboxes */
#contact .cf7-checkbox-gap {
  margin-top: 12px;
}

/* texte Akismet plus petit */
#contact .akismet_notice,
#contact .akismet-comment-form {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  color: #6b7280;
}

/* bouton "Send" comme tes CTA */
#contact .cf7-btn {
  width: 100%;
  padding: 16px 24px;
  background-color: #f5646d;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

#contact .cf7-btn:hover {
  opacity: 0.9;
}
.after-submit-booking{
  display: none;
  margin-top: 16px;
}
.form-title-28{
  font-size: 32px;
  line-height: 1.15;
  margin-bottom: 14px;
}

@media (max-width: 768px){
  .form-title-28{
    font-size: 24px;
  }
}
/* === FIX LARGEUR : Portfolio / Writing Portfolio === */

/* 1) Enlève la contrainte de largeur imposée par le thème */
.single-portfolio .entry-content,
.single-portfolio .site-main,
.single-portfolio .wp-site-blocks,
.single-portfolio .content-area {
  max-width: none !important;
  width: 100% !important;
}

/* Souvent le thème limite chaque enfant direct */
.single-portfolio .entry-content > * {
  max-width: none !important;
}

/* 2) Redéfinit la largeur des "containers" internes (Tailwind .container) */
.single-portfolio .entry-content .container {
  max-width: 1280px !important; /* tu peux mettre 1400px si tu veux + large */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 3) Si ton thème met un wrapper interne qui "centre" en étroit */
.single-portfolio .entry-content .max-w-5xl,
.single-portfolio .entry-content .max-w-4xl,
.single-portfolio .entry-content .max-w-3xl {
  max-width: 1280px !important;
}
/* CF7 — bouton (rose + centré) dans la section contact */
#contact .wpcf7 input.wpcf7-submit.btn-primary{
  background: #f5646d;
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 14px 34px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;

  display: block;          /* permet margin auto */
  width: fit-content;      /* bouton à la taille du texte */
  margin: 16px auto 0;     /* centré */
}

#contact .wpcf7 input.wpcf7-submit.btn-primary:hover{
  opacity: .9;
}

/* (optionnel mais recommandé) éviter que CF7 “étire” certains éléments */
#contact .wpcf7 form{
  margin: 0;
}