/* =========================================================================
 * EasyWood — Styles custom (chargé APRÈS main.css compilé)
 * Reproduction fidèle de l'ancien thème (bootstrap-child) + améliorations :
 * header sombre + téléphone, footer administrable, boutons dorés, sections flex.
 * Palette : principal #2b2b2b, accent doré #c3b078, brun titres #7d6a32.
 * ========================================================================= */

:root {
  --ew-principale: #2b2b2b;
  --ew-principale-2: #1f1f1f;
  --ew-accent: #c3b078;
  --ew-accent-dark: #a8965f;
  --ew-brun: #7d6a32;
  --ew-gris: #c5c5c5;
  --ew-gris-clair: #e8e8e8;
  --ew-blanc: #ffffff;
  /* Couleur de thème Swiper (flèches + puces) */
  --swiper-theme-color: #c3b078;
}

body,
button,
input,
select,
optgroup,
textarea,
.btn,
.navbar,
.ew-section,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* =========================================================================
 * BOUTONS (correctif principal) — façon ancien thème : doré, texte sombre,
 * survol inversé. On passe par les variables Bootstrap 5 (pas de !important).
 * ========================================================================= */
.btn-primary,
.ew-btn {
  --bs-btn-bg: var(--ew-accent);
  --bs-btn-border-color: var(--ew-accent);
  --bs-btn-color: var(--ew-principale);
  --bs-btn-hover-bg: var(--ew-principale);
  --bs-btn-hover-border-color: var(--ew-accent);
  --bs-btn-hover-color: var(--ew-accent);
  --bs-btn-active-bg: var(--ew-principale);
  --bs-btn-active-border-color: var(--ew-accent);
  --bs-btn-active-color: var(--ew-accent);
  --bs-btn-disabled-bg: var(--ew-accent);
  --bs-btn-disabled-border-color: var(--ew-accent);
  --bs-btn-disabled-color: var(--ew-principale);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 3px;
  transition: all .2s ease-in-out;
}

/* Pseudo-boutons des cartes (span/p.btn sans btn-primary) */
.ew-card-rea__btn.btn,
.ew-cdc-btn.btn,
.blocrea .btn,
.ew-realisation__cta .btn {
  background-color: var(--ew-accent);
  border: 1px solid var(--ew-accent);
  color: var(--ew-principale);
  font-weight: 600;
  border-radius: 3px;
  transition: all .2s ease-in-out;
}
/* Survol : cartes "cartes_liens"/"coups de cœur" → bouton blanc/texte sombre.
   (Ces boutons n'ont PAS de classe .text-white, le contraste reste correct.) */
.ew-card-rea:hover .ew-card-rea__btn.btn,
.ew-cdc-card:hover .ew-cdc-btn.btn {
  background-color: var(--ew-blanc);
  color: var(--ew-principale);
}
/* Cartes réalisation : le libellé est un <p class="btn text-white"> (texte blanc
   forcé). On garde donc un fond doré (légèrement assombri au survol) pour rester
   lisible — surtout pas de fond blanc qui rendrait le texte blanc invisible. */
.blocrea:hover .btn {
  background-color: var(--ew-accent);
  border-color: var(--ew-accent);
}

/* =========================================================================
 * HEADER — barre supérieure téléphone + navbar sombre + liens dorés
 * ========================================================================= */
.ew-topbar {
  background-color: var(--ew-principale-2);
  border-bottom: 1px solid rgba(195, 176, 120, .25);
  font-size: .9rem;
}
.ew-topbar__tel {
  color: var(--ew-accent);
  font-weight: 600;
  letter-spacing: .03em;
}
.ew-topbar__tel:hover,
.ew-topbar__tel:focus {
  color: var(--ew-blanc);
}
.ew-topbar__tel .fa-phone {
  color: var(--ew-accent);
}

/* Navbar sombre (override bg-body-tertiary) */
#masthead.site-header {
  background-color: var(--ew-principale) !important;
  border-bottom: 3px solid var(--ew-accent);
  overflow: visible; /* laisse le logo déborder sous le header */
}
#masthead .navbar {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
/* Logo "à cheval" : plus grand que le header, il déborde par le bas */
#masthead .navbar-brand {
  position: relative;
  z-index: 1031;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-brand .ew-logo {
  height: 96px;
  width: auto;
  margin-bottom: -28px;
}

/* CTA Téléphone à droite du menu (bouton doré) */
.ew-phone-cta {
  white-space: nowrap;
  font-weight: 700;
  margin-left: .75rem;
}
.ew-phone-cta .fa-phone {
  color: inherit;
}

/* Liens du menu : dorés, Montserrat, survol plus clair/gras */
#nav-main .navbar-nav .nav-link,
#offcanvas-navbar .navbar-nav .nav-link {
  color: var(--ew-accent);
  font-size: 1rem; /* menu compact */
  font-weight: 500;
  padding-left: .85rem;
  padding-right: .85rem;
  transition: color .15s ease-in-out, font-weight .15s ease-in-out;
}
/* Survol : on reste doré et le texte s'épaissit (fidèle à l'ancien) */
#nav-main .navbar-nav .nav-link:hover,
#nav-main .navbar-nav .nav-link:focus,
#offcanvas-navbar .navbar-nav .nav-link:hover {
  color: var(--ew-accent);
  font-weight: 700;
}
/* Item courant : doré souligné (fidèle à l'ancien) */
#nav-main .navbar-nav .nav-link.active,
#nav-main .navbar-nav .current-menu-item > .nav-link,
#nav-main .navbar-nav .current_page_item > .nav-link,
#offcanvas-navbar .navbar-nav .current-menu-item > .nav-link {
  color: var(--ew-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--ew-accent);
  text-underline-offset: 6px;
}

/* Sous-menus déroulants */
#nav-main .dropdown-menu {
  background-color: var(--ew-principale-2);
  border: 1px solid var(--ew-accent);
  border-radius: 4px;
}
#nav-main .dropdown-menu .dropdown-item {
  color: var(--ew-accent);
}
#nav-main .dropdown-menu .dropdown-item:hover,
#nav-main .dropdown-menu .dropdown-item:focus {
  background-color: var(--ew-accent);
  color: var(--ew-principale);
}

/* Bouton hamburger (toggler) adapté au header sombre */
#masthead .nav-toggler.btn-outline-secondary {
  --bs-btn-color: var(--ew-accent);
  --bs-btn-border-color: var(--ew-accent);
  --bs-btn-hover-bg: var(--ew-accent);
  --bs-btn-hover-color: var(--ew-principale);
  --bs-btn-hover-border-color: var(--ew-accent);
}

/* Offcanvas (menu mobile) sombre */
#offcanvas-navbar {
  background-color: var(--ew-principale);
  color: var(--ew-accent);
}
#offcanvas-navbar .offcanvas-title,
#offcanvas-navbar .btn-close {
  color: var(--ew-accent);
}
#offcanvas-navbar .btn-close {
  filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg);
}

/* =========================================================================
 * FOOTER — sombre, colonnes administrables, réseaux sociaux, dorés
 * ========================================================================= */
.ew-footer {
  background-color: var(--ew-principale);
  color: #d6d6d6;
}
.ew-footer a {
  color: #d6d6d6;
  text-decoration: none;
  transition: color .15s ease-in-out;
}
.ew-footer a:hover,
.ew-footer a:focus {
  color: var(--ew-accent);
}
.ew-footer-logo {
  max-width: 200px;
  height: auto;
}
.ew-footer-text {
  font-size: .95rem;
  line-height: 1.6;
}
.ew-footer-col-title {
  color: var(--ew-accent);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
.ew-footer-links {
  margin: 0;
}
.ew-footer-links li {
  margin-bottom: .5rem;
}

/* Réseaux sociaux */
.ew-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.ew-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ew-accent);
  color: var(--ew-accent) !important;
  font-size: 1.05rem;
}
.ew-social-link:hover,
.ew-social-link:focus {
  background-color: var(--ew-accent);
  color: var(--ew-principale) !important;
}

/* Barre copyright / mentions */
.ew-footer-info {
  background-color: var(--ew-principale-2);
  border-top: 1px solid rgba(195, 176, 120, .2);
  color: #b9b9b9;
}
/* Liens de la barre footer : soulignés pour rester distinguables du texte
   gris environnant SANS dépendre de la seule couleur (a11y : un lien dans un
   bloc de texte doit se distinguer autrement que par la teinte). */
.ew-footer-info a {
  color: var(--ew-accent);
  text-decoration: underline;
}
.ew-footer-credit a {
  color: var(--ew-accent);
  text-decoration: underline;
}

/* =========================================================================
 * SECTIONS GÉNÉRIQUES
 * ========================================================================= */
.ew-section {
  position: relative;
}
.ew-section-title,
.ew-title {
  color: var(--ew-brun);
  font-weight: 700;
}

/* Texte + image */
.ew-texte-image__figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.ew-texte-image__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========================================================================
 * HERO SLIDER (Swiper)
 * ========================================================================= */
/* Conteneur héro : porte la hauteur ; le slider d'images est en fond, le
   contenu (wysiwyg + bouton) est figé par-dessus. */
.ew-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero-swiper--plein   { height: 100vh; max-height: 900px; }
.hero-swiper--grande  { height: 70vh;  min-height: 420px; }
.hero-swiper--moyenne { height: 50vh;  min-height: 340px; }

/* Slider d'images = fond plein cadre */
.ew-hero .hero-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ew-hero .hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Voile sombre pour la lisibilité du contenu */
.ew-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events: none;
}

/* Contenu FIGÉ centré, au-dessus du slider */
.ew-hero__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  pointer-events: none; /* laisse passer les clics vers la pagination… */
}
.ew-hero__content > * {
  pointer-events: auto; /* …sauf sur le texte et le bouton */
}
.ew-hero__text :is(h1, h2, h3, p) {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.ew-hero__text h1 {
  font-weight: 800;
}
/* Pagination cliquable au-dessus du voile */
.ew-hero .swiper-pagination {
  z-index: 4;
}

/* =========================================================================
 * CARTES (cartes_liens / coups de cœur / réalisations) — style .blocrea
 * ========================================================================= */
/* Animation héritée : voile sombre qui se lève au survol */
.blocrea {
  box-shadow: 500px 500px rgba(0, 0, 0, .45) inset;
  transition: box-shadow .5s;
  background-position: center;
  background-size: cover;
}
/* Au survol on allège le voile (effet de révélation) MAIS on en garde un
   minimum : sans ça, le texte blanc/doré tombe sur une photo claire et devient
   illisible. */
.blocrea:hover {
  box-shadow: 500px 500px rgba(0, 0, 0, .2) inset;
}
.blocrea > p {
  opacity: 0;
  transition: opacity .4s;
}
.blocrea:hover > p {
  opacity: 1;
}

/* Cartes "cartes_liens" (accueil) */
.ew-card-rea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 4px;
}
.ew-card-rea__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  transition: background .3s ease;
}
.ew-card-rea:hover .ew-card-rea__overlay {
  background: rgba(43, 43, 43, .15);
}
.ew-card-rea__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
}
.ew-card-rea__title {
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* Cartes réalisations (grille / slider) */
.ew-realisation-card .blocrea {
  min-height: 300px;
}
.ew-realisation-num {
  letter-spacing: .08em;
}
.ew-realisation-title {
  text-transform: uppercase;
  font-size: 1.1rem;
  text-shadow: 0 1px 2px #000, 0 2px 12px rgba(0, 0, 0, .85);
}

/* Coups de cœur */
.ew-cdc-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 4px;
}
.ew-cdc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  transition: background .3s ease;
}
.ew-cdc-card:hover .ew-cdc-overlay {
  background: rgba(43,43,43,.15);
}
.ew-cdc-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.ew-cdc-title {
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* =========================================================================
 * SWIPER (flèches / puces / miniatures réalisation)
 * ========================================================================= */
/* Flèches Swiper : ronds discrets, accent au survol (au lieu des grosses
   flèches par défaut). */
.swiper-button-prev,
.swiper-button-next {
  --swiper-navigation-size: 18px;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: rgba(43, 43, 43, .55);
  color: #fff;
  transition: background-color .2s ease, color .2s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--ew-accent);
  color: var(--ew-principale);
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
  font-weight: 700;
}
.swiper-pagination-bullet-active {
  background-color: var(--ew-accent);
}

/* ---- Galerie fiche réalisation ---- */
.realisations-swiper,
.realisation-swiper {
  padding-bottom: 2.5rem;
}
/* Image principale : hauteur maîtrisée, recadrée proprement */
.realisation-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 56vh;
  max-height: 560px;
  object-fit: cover;
}
/* Miniatures : taille FIXE (sinon slidesPerView:auto les casse) */
.realisation-thumbs {
  margin-top: .75rem;
}
.realisation-thumbs .swiper-slide {
  width: 104px;
  height: 72px;
  opacity: .55;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity .2s ease, outline-color .2s ease;
}
.realisation-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  outline: 2px solid var(--ew-accent);
  outline-offset: -2px;
}
.realisation-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575.98px) {
  .realisation-swiper .swiper-slide img { height: 40vh; }
  .realisation-thumbs .swiper-slide { width: 76px; height: 54px; }
}

/* =========================================================================
 * FICHE RÉALISATION
 * ========================================================================= */
.ew-realisation__header {
  text-align: center;
}
.ew-badge-projet,
.ew-realisation-num {
  display: inline-block;
  background: var(--ew-accent);
  color: #fff; /* texte blanc sur le badge doré (meilleur contraste + demande client) */
  font-weight: 700;
  letter-spacing: .05em;
  padding: .25rem .75rem;
  border-radius: 3px;
}
/* Le n° sur les cartes (sur photo) garde une ombre pour rester lisible */
.ew-realisation-num {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.ew-realisation__cta {
  text-align: center;
}

/* =========================================================================
 * RÉASSURANCE
 * ========================================================================= */
.ew-reassurance {
  /* Fond sombre par défaut (sécurité si aucun couleur_fond inline). La couleur
     du texte est pilotée par .text-white/.text-dark posées par le template
     selon le champ couleur_texte — on ne la force donc pas ici. */
  background-color: var(--ew-principale);
}
.ew-reassurance-item {
  text-align: center;
  padding: 1rem;
}
.ew-reassurance-icon {
  font-size: 2.4rem;
  color: var(--ew-accent);
  margin-bottom: .75rem;
}
.ew-reassurance-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ew-reassurance-text {
  font-size: .95rem;
  opacity: .9;
}

/* =========================================================================
 * FAQ (accordéon)
 * ========================================================================= */
.ew-faq .accordion {
  --bs-accordion-active-bg: rgba(195, 176, 120, .15);
  --bs-accordion-active-color: var(--ew-brun);
  --bs-accordion-btn-focus-border-color: var(--ew-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(195, 176, 120, .35);
}
.ew-faq .accordion-button {
  font-weight: 600;
}

/* =========================================================================
 * CTA
 * ========================================================================= */
.ew-cta {
  text-align: center;
  color: var(--ew-principale);
}
.ew-cta__title {
  font-weight: 800;
}

/* =========================================================================
 * GOOGLE MAP
 * ========================================================================= */
.ew-google-map .ew-map-embed,
.ew-google-map iframe {
  width: 100%;
  border: 0;
  display: block;
}
.ew-map-adresse {
  text-align: center;
  font-weight: 600;
  color: var(--ew-brun);
}

/* =========================================================================
 * AVIS GOOGLE
 * ========================================================================= */
.ew-avis-google {
  overflow-x: hidden;
}
.ew-avis-google__content {
  max-width: 100%;
}

/* =========================================================================
 * WYSIWYG
 * ========================================================================= */
.ew-wysiwyg__content {
  line-height: 1.7;
}

/* =========================================================================
 * FORMULAIRE DE CONTACT (CF7) — restyle Bootstrap + accent doré
 * ========================================================================= */
.ew-contact-title {
  color: var(--ew-brun);
  text-align: center;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  display: block;
  width: 100%;
  padding: .55rem .9rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wpcf7-form .wpcf7-form-control:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--ew-accent);
  box-shadow: 0 0 0 .2rem rgba(195, 176, 120, .25);
}
.wpcf7-form textarea {
  min-height: 140px;
}
.wpcf7-form .wpcf7-submit {
  display: inline-block;
  background-color: var(--ew-accent);
  border: 1px solid var(--ew-accent);
  color: var(--ew-principale);
  font-weight: 600;
  padding: .6rem 2rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus {
  background-color: var(--ew-principale);
  color: var(--ew-accent);
}
.wpcf7 .wpcf7-spinner {
  margin-top: 1rem;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
/* Sous 1200px : menu en burger (cf. navbar-expand-xl) */
@media (max-width: 1199.98px) {
  .navbar-brand .ew-logo { height: 78px; margin-bottom: -20px; }
  .hero-swiper--plein    { height: 70vh; }
}
/* CTA téléphone : le NUMÉRO ne s'affiche qu'au-dessus de 1400px.
   En dessous (≤ 1400px), on ne garde que l'icône. */
@media (max-width: 1399.98px) {
  .ew-phone-cta__num { display: none; }
}
@media (max-width: 575.98px) {
  .navbar-brand .ew-logo { height: 60px; margin-bottom: -14px; }
  .ew-phone-cta          { margin-left: .4rem; }
  .ew-card-rea           { min-height: 300px; }
  .ew-cdc-card           { min-height: 240px; }
}

/* =========================================================================
 * CORRECTIFS (post-vérif) — boutons manquants, contraste, galerie, contact
 * ========================================================================= */

/* Bouton CTA : la section .ew-cta a un fond doré par défaut → bouton INVERSE
   (sombre, texte doré) pour ressortir ; survol blanc/texte sombre. */
.ew-cta__btn.btn,
.ew-cta__btn {
  background-color: var(--ew-principale);
  border: 1px solid var(--ew-principale);
  color: var(--ew-accent);
  font-weight: 600;
  border-radius: 3px;
  transition: all .2s ease-in-out;
}
.ew-cta__btn.btn:hover,
.ew-cta__btn.btn:focus,
.ew-cta__btn:hover,
.ew-cta__btn:focus {
  background-color: var(--ew-blanc);
  color: var(--ew-principale);
}

/* Bouton « voir toutes les réalisations » (coups de cœur) : doré standard. */
.ew-cdc-btn-all.btn,
.ew-cdc-btn-all {
  background-color: var(--ew-accent);
  border: 1px solid var(--ew-accent);
  color: var(--ew-principale);
  font-weight: 600;
  border-radius: 3px;
  transition: all .2s ease-in-out;
}
.ew-cdc-btn-all.btn:hover,
.ew-cdc-btn-all.btn:focus,
.ew-cdc-btn-all:hover,
.ew-cdc-btn-all:focus {
  background-color: var(--ew-principale);
  color: var(--ew-accent);
}

/* Réalisation « Voir le projet » : le markup force .text-white → on rétablit un
   texte sombre sur le doré pour un contraste lisible (WCAG). */
.blocrea .btn.text-white {
  color: var(--ew-principale) !important;
}

/* Galerie fiche réalisation : légende positionnée sur l'image. */
.ew-realisation__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
}
.ew-realisation__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem .75rem;
  background: rgba(43, 43, 43, .7);
  color: #fff;
  font-size: .85rem;
}

/* =========================================================================
 * SECTION FORMULAIRE DE CONTACT (2 colonnes : coordonnées + carte formulaire)
 * ========================================================================= */
.ew-formulaire-contact .ew-section-title { margin-bottom: .25rem; }

/* Colonne coordonnées */
.ew-contact-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .5rem;
}
.ew-contact-infos__intro { font-size: 1.05rem; line-height: 1.6; }
.ew-contact-infos__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ew-contact-info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ew-contact-info__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ew-accent);
  color: var(--ew-principale);
  font-size: 1.05rem;
}
.ew-contact-info__text {
  line-height: 1.5;
  padding-top: .4rem;
  color: inherit;
  text-decoration: none;
}
a.ew-contact-info__text:hover,
a.ew-contact-info__text:focus { text-decoration: underline; }

/* Carte formulaire : toujours claire (lisibilité des champs), même sur fond sombre/doré */
.ew-contact-card {
  background: #ffffff;
  color: var(--ew-principale);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .12);
}
@media (min-width: 992px) { .ew-contact-card { padding: 2.5rem; } }
.ew-bg-sombre .ew-contact-card,
.ew-bg-dore   .ew-contact-card,
.ew-bg-gris   .ew-contact-card { color: var(--ew-principale); }

/* ===== Formulaire CF7 (champs en grille, labels, submit) ===== */
.ew-cf7 .ew-cf7-label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin: 0 0 .35rem;
  color: var(--ew-brun);
}
.ew-cf7 .wpcf7-form-control-wrap { display: block; }
.ew-cf7 .wpcf7-quiz {
  max-width: 140px;
  display: inline-block;
  margin-top: .35rem;
}
.ew-cf7-submit { margin-top: .75rem; }
.ew-cf7-submit .wpcf7-submit { min-width: 220px; }
.ew-cf7 .wpcf7-not-valid-tip { font-size: .8rem; }

/* Boutons dans la carte (fond blanc) : toujours dorés, quel que soit le fond de section */
.ew-contact-card .btn-primary,
.ew-contact-card .ew-btn,
.ew-contact-card .wpcf7-form .wpcf7-submit {
  --bs-btn-bg: var(--ew-accent);
  --bs-btn-border-color: var(--ew-accent);
  --bs-btn-color: var(--ew-principale);
  --bs-btn-hover-bg: var(--ew-principale);
  --bs-btn-hover-border-color: var(--ew-accent);
  --bs-btn-hover-color: var(--ew-accent);
  background-color: var(--ew-accent);
  border-color: var(--ew-accent);
  color: var(--ew-principale);
}
.ew-contact-card .wpcf7-form .wpcf7-submit:hover,
.ew-contact-card .wpcf7-form .wpcf7-submit:focus {
  background-color: var(--ew-principale);
  color: var(--ew-accent);
}

/* Widget avis Google (page contact) */
.ew-contact-avis-google { overflow-x: hidden; }
.ew-contact-avis-google :is(iframe, img, .elfsight-app) { max-width: 100%; }

/* =========================================================================
 * PRELOADER (plugin bs-preloader) — fond sombre + loader doré
 * (!important pour surcharger les utilitaires Bootstrap bg-body / text-primary)
 * ========================================================================= */
#preloader { background-color: var(--ew-principale) !important; }
#preloader .spinner-border,
#preloader .spinner-grow,
#preloader #status { color: var(--ew-accent) !important; }

/* =========================================================================
 * FONDS DE SECTION — schéma contrasté automatique (.ew-bg-*)
 * Choix éditeur (select couleur_fond) : blanc | gris | dore | sombre.
 * Le texte passe AUTOMATIQUEMENT en noir ou blanc, et les boutons s'adaptent
 * pour rester contrastés. Plus aucune couleur en dur dans le markup.
 * ========================================================================= */
.ew-bg-blanc  { background-color: #ffffff; color: var(--ew-principale); }
.ew-bg-gris   { background-color: #e8e8e8; color: var(--ew-principale); }
.ew-bg-dore   { background-color: var(--ew-accent); color: var(--ew-principale); }
.ew-bg-sombre { background-color: var(--ew-principale); color: #ffffff; }

/* Titres : suivent la couleur de contraste du fond (noir sur clair, blanc sur sombre) */
.ew-bg-blanc :is(h1,h2,h3,h4,h5,h6,.ew-section-title,.ew-title,.ew-map-adresse,.ew-contact-title),
.ew-bg-gris  :is(h1,h2,h3,h4,h5,h6,.ew-section-title,.ew-title,.ew-map-adresse,.ew-contact-title),
.ew-bg-dore  :is(h1,h2,h3,h4,h5,h6,.ew-section-title,.ew-title,.ew-map-adresse,.ew-contact-title) {
  color: var(--ew-principale);
}
.ew-bg-sombre :is(h1,h2,h3,h4,h5,h6,.ew-section-title,.ew-title,.ew-map-adresse,.ew-contact-title) {
  color: #ffffff;
}

/* Liens courants (hors boutons/cartes) : lisibles selon le fond */
.ew-bg-blanc a:not(.btn):not(.ew-card-rea):not(.ew-cdc-card),
.ew-bg-gris  a:not(.btn):not(.ew-card-rea):not(.ew-cdc-card),
.ew-bg-dore  a:not(.btn):not(.ew-card-rea):not(.ew-cdc-card) {
  color: var(--ew-principale);
}
.ew-bg-sombre a:not(.btn):not(.ew-card-rea):not(.ew-cdc-card) {
  color: var(--ew-accent);
}

/* Boutons : dorés par défaut (contrastent sur blanc/gris/sombre).
   Sur fond DORÉ, ils se fondraient → on les passe en SOMBRE (texte doré). */
.ew-bg-dore .btn-primary,
.ew-bg-dore .ew-btn,
.ew-bg-dore .ew-cdc-btn-all,
.ew-bg-dore .wpcf7-form .wpcf7-submit {
  --bs-btn-bg: var(--ew-principale);
  --bs-btn-border-color: var(--ew-principale);
  --bs-btn-color: var(--ew-accent);
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-hover-color: var(--ew-principale);
  background-color: var(--ew-principale);
  border-color: var(--ew-principale);
  color: var(--ew-accent);
}

/* Icône de réassurance : dorée par défaut ; sur fond doré → sombre */
.ew-bg-dore .ew-reassurance-icon { color: var(--ew-principale); }

/* EXCEPTION : textes posés sur une image/voile (cartes, coups de cœur,
   réalisations) → toujours BLANCS, quel que soit le fond de section. */
.ew-bg-blanc :is(.ew-card-rea__title,.ew-card-rea__content,.ew-cdc-title,.ew-cdc-content,.ew-realisation-title),
.ew-bg-gris  :is(.ew-card-rea__title,.ew-card-rea__content,.ew-cdc-title,.ew-cdc-content,.ew-realisation-title),
.ew-bg-dore  :is(.ew-card-rea__title,.ew-card-rea__content,.ew-cdc-title,.ew-cdc-content,.ew-realisation-title),
.ew-bg-sombre :is(.ew-card-rea__title,.ew-card-rea__content,.ew-cdc-title,.ew-cdc-content,.ew-realisation-title) {
  color: #ffffff;
}