/* =========================================================
   I/O LUTHIER GUITARE · overrides.css
   Petits correctifs, hacks spécifiques, ajustements iPad, etc.
   ---------------------------------------------------------
   ⚠️ Ce fichier doit rester léger. Si une règle devient
   structurante, la remonter dans layout.css ou base.css.
   ========================================================= */

/* Exemple : ajustements iPad spécifiques */
/*
@media screen and (min-width: 768px) and (max-width: 1366px) {
  body.io-is-ipad .quelque-chose {
    ...
  }
}
*/
	/* ============================================================
   Ensemble CSS personnalisé Elementor réglage de page 
   I/O — CSS scopé sur la page WordPress ID 346
   Scope: body.page-id-346
   ========================================================= */

/* Variables (globales) */
:root {
  --io-gold: #D4A344;
}

/* Keyframes (globales) */
@keyframes ioBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}


/* =========================================================
   HERO
   ========================================================= */

body.page-id-346 .io-hero {
  scroll-margin-top: 0;
}

body.page-id-346 .io-hero-image {
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

body.page-id-346 .io-hero-image:hover {
  transform: scale(1.01);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.12);
}

body.page-id-346 .io-services-line {
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

body.page-id-346 .io-arrow {
  display: inline-block;
  animation: ioBounce 1.8s infinite;
}


/* =========================================================
   BOUTONS & BANNIÈRES
   ========================================================= */

body.page-id-346 .io-contact-banner {
  background-position: center center;
  background-size: cover;
}

body.page-id-346 .io-contact-btn .elementor-button {
  border-radius: 999px;
}

body.page-id-346 .io-contact-btn {
  transition: transform 0.15s ease-out;
}

body.page-id-346 .io-contact-btn:hover {
  transform: scale(1.02);
}

body.page-id-346 .io-contact-btn:active {
  transform: scale(0.99);
}


/* =========================================================
   HERO – CADRE / ZOOM
   ========================================================= */

body.page-id-346 .io-hero-zoom {
  display: inline-block;
  border-radius: 24px;
  overflow: hidden;
  transform-origin: center center;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

body.page-id-346 .io-hero-zoom:hover {
  transform: perspective(900px) translateZ(20px);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.20);
}

body.page-id-346 .io-hero-zoom img {
  display: block;
  transform: none !important;
  transition: none !important;
}


/* =========================================================
   CARTES GÉNÉRIQUES
   ========================================================= */

body.page-id-346 .io-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 18px 20px;
  background: #ffffff;
  border-radius: 20px;
  transform-origin: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

body.page-id-346 .io-card:hover {
  transform: perspective(900px) translateZ(32px);
  box-shadow: 0 32px 68px rgba(0, 0, 0, 0.12);
}

body.page-id-346 .io-card img {
  width: 100%;
  border-radius: 14px;
  transition: none !important;
}


/* =========================================================
   PHOTOS ATELIER
   ========================================================= */

body.page-id-346 .io-atelier-photo {
  transition: transform 0.35s ease-out, box-shadow 0.35s ease-out;
}

body.page-id-346 .io-atelier-photo:hover {
  transform: perspective(900px) translateZ(24px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   TITRES / CHAPITRES
   ========================================================= */

body.page-id-346 .io-section-chapter {
  display: block;
  margin-bottom: 10px;
  font-size: 16px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8f8f8f;
}

@media (max-width: 768px) {
  body.page-id-346 .io-section-chapter {
    font-size: 10px !important;
    letter-spacing: 0.16em;
  }
}


/* =========================================================
   SIDEBAR SERVICES – REPÈRE VISUEL
   ========================================================= */

body.page-id-346 .sidebar-services-item::before {
  content: "";
  position: absolute;
  right: 96%;
  transform: translateX(-50%);
  width: 2px;
  height: 50px;
  background-color: #FAD04A;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.page-id-346 .sidebar-services-item:hover::before,
body.page-id-346 .sidebar-services-item.is-active::before {
  opacity: 1;
}


/* =========================================================
   CONTACT – SECTION
   ========================================================= */

body.page-id-346 .io-contact-section {
  padding: 60px 40px 30px;
  background: #f6f7f9;
}

@media (min-width: 1025px) {
  body.page-id-346 .io-contact-section {
    margin-left: var(--io-sidebar-width, 260px);
  }
}

body.page-id-346 .io-contact-section .elementor-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
}


/* =========================================================
   CONTACT – CARTES
   ========================================================= */

body.page-id-346 .io-contact-col {
  padding: 28px 32px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.8);
}


/* Titres */
body.page-id-346 .io-contact-title {
  margin: 0 0 20px;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111111;
}

body.page-id-346 .io-contact-title-right {
  text-align: left;
}


/* =========================================================
   CONTACT – INFOS
   ========================================================= */

body.page-id-346 .io-contact-block {
  margin-bottom: 22px;
}

body.page-id-346 .io-contact-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--io-gold);
}

body.page-id-346 .io-contact-icon {
  font-size: 15px;
}

body.page-id-346 .io-contact-info p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
}

body.page-id-346 .io-contact-info a {
  color: #333333;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.page-id-346 .io-contact-info a:hover {
  color: var(--io-gold);
  border-color: var(--io-gold);
}


/* =========================================================
   CONTACT – HORAIRES
   ========================================================= */

body.page-id-346 .io-contact-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

body.page-id-346 .io-contact-hours li {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

body.page-id-346 .io-contact-hours span {
  min-width: 80px;
  font-weight: 600;
}


/* =========================================================
   CONTACT – FORMULAIRE
   ========================================================= */

body.page-id-346 .io-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.page-id-346 .io-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.page-id-346 .io-field label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #555555;
}

body.page-id-346 .io-field input,
body.page-id-346 .io-field textarea {
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid #d9dde4;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.page-id-346 .io-field input:focus,
body.page-id-346 .io-field textarea:focus {
  background: #fffdf8;
  border-color: var(--io-gold);
  box-shadow: 0 0 0 1px rgba(212, 163, 68, 0.2);
}


/* Bouton submit */
body.page-id-346 .io-contact-submit {
  margin-top: 8px;
  align-self: flex-start;
  padding: 10px 28px;
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

body.page-id-346 .io-contact-submit:hover {
  background: var(--io-gold);
  border-color: var(--io-gold);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body.page-id-346 .io-contact-note {
  margin-top: 12px;
  font-size: 11px;
  color: #888888;
}


/* =========================================================
   CONTACT – CARTE
   ========================================================= */

body.page-id-346 .io-contact-map-section {
  padding: 0 40px 40px;
  background: #f6f7f9;
}

@media (min-width: 1025px) {
  body.page-id-346 .io-contact-map-section {
    margin-left: var(--io-sidebar-width, 260px);
  }
}

body.page-id-346 .io-contact-map-section .elementor-container {
  max-width: 1100px;
  margin: 0 auto;
}

body.page-id-346 .io-contact-map-inner {
  overflow: hidden;
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

body.page-id-346 .io-contact-map-inner iframe {
  display: block;
  width: 100%;
  height: 260px;
}

body.page-id-346 .io-contact-map-link {
  margin: 8px 12px 10px;
  font-size: 11px;
  text-align: right;
}

body.page-id-346 .io-contact-map-link a {
  color: #555555;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

body.page-id-346 .io-contact-map-link a:hover {
  color: var(--io-gold);
  border-color: var(--io-gold);
}


/* =========================================================
   RESPONSIVE CONTACT
   ========================================================= */

@media (max-width: 900px) {
  body.page-id-346 .io-contact-section {
    padding: 40px 20px 30px;
  }

  body.page-id-346 .io-contact-section .elementor-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.page-id-346 .io-contact-map-section {
    padding: 0 20px 30px;
  }
}


/* =========================================================
   TARIFS
   ========================================================= */

body.page-id-346 .io-tarifs-block {
  position: relative;
  padding: 2.5rem 3rem;
  margin-block: 2.5rem;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(0);
  transition:
    transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

body.page-id-346 .io-tarifs-block:hover {
  transform: translateY(0px);
  box-shadow: 0 22px 60px rgba(212, 163, 68, 0.2);
  border-color: rgba(212, 163, 68, 0.9); /*Couleut MadCat*/
}

body.page-id-346 .io-tarifs-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: opacity 0.35s ease;
}

body.page-id-346 .io-tarifs-block:hover::before {
  opacity: 1;
}

@media (max-width: 768px) {
  body.page-id-346 .io-tarifs-block {
    padding: 1.75rem 1.5rem;
    margin-block: 1.75rem;
  }
}

body.page-id-346 .io-tarifs-title {
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.page-id-346 .io-tarifs-list {
  font-size: 0.95rem;
  line-height: 1.5;
}

body.page-id-346 .io-tarifs-icone {
	padding-right:10px;
}


/* =========================================================
   ESTIMATION — override fort (safe)
   ========================================================= */

.io-contact-col.io-estim-card-left {
  max-width: 520px;
  margin: 0 auto;
  background: #fff !important;
}

/* Champs */
.io-contact-col.io-estim-card-left .io-estim-input,
.io-contact-col.io-estim-card-left .io-estim-select {
  border: 1px solid #d9dde4 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

/* Focus Madcat */
.io-contact-col.io-estim-card-left .io-estim-input:focus,
.io-contact-col.io-estim-card-left .io-estim-select:focus {
  border-color: var(--io-gold) !important;
  box-shadow: 0 0 0 1px rgba(212, 163, 68, 0.2) !important;
  background: #fffdf8 !important;
}

/* Bouton géoloc */
.io-contact-col.io-estim-card-left .io-geoloc-small-btn {
  background: #111 !important;
  border-color: rgba(0,0,0,0.1) !important;
}

.io-contact-col.io-estim-card-left .io-geoloc-small-btn:hover {
  background: var(--io-gold) !important;
  border-color: var(--io-gold) !important;
  color: #000 !important;
}
/* =========================================================
   ESTIMATION — rendu identique aux cartes CONTACT
   ========================================================= */

/* ÉTAT NORMAL : carte déjà légèrement décollée */
.io-contact-col.io-estim-card-left {
  position: relative;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9);

  transform: translateY(0);
  transition:
    transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* HOVER DESKTOP : micro-lift + profondeur */
@media (hover: hover) and (pointer: fine) {
  .io-contact-col.io-estim-card-left:hover {
    transform: translateY(-4px);
    box-shadow:
      0 22px 60px rgba(0, 0, 0, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.95);
    border-color: rgba(212, 163, 68, 0.45); /* Madcat discret */
  }
}

/* HALO MADCAT ULTRA SUBTIL (comme Contact) */
.io-contact-col.io-estim-card-left::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(212, 163, 68, 0.25);
  transition: opacity 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .io-contact-col.io-estim-card-left:hover::before {
    opacity: 1;
  }
}
/* =========================================================
   TITRES — Harmonisation Estimation → Contact
   ========================================================= */

/* Titre principal de la carte estimation */
.io-contact-col.io-estim-card-left .io-contact-title {
  font-size: 18px;
  font-weight: 500;              /* plus léger */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 22px;
}

/* Titres de sections (Vos infos, Adresse, Date, etc.) */
.io-contact-col.io-estim-card-left .io-estim-section-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f8f8f;
  margin: 28px 0 10px;
}

/* Première section : un peu moins d'espace au-dessus */
.io-contact-col.io-estim-card-left .io-estim-section-title:first-of-type {
  margin-top: 18px;
}

/* Labels des champs — cohérents avec Contact */
.io-contact-col.io-estim-card-left .io-field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #555;
}

/* Texte radio (plus doux) */
.io-contact-col.io-estim-card-left .io-estim-radio span {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
/* =========================================================
   BOUTON ESTIMATION — base identique bouton CONTACT
   ========================================================= */

.io-contact-col.io-estim-card-left .io-estim-calc-btn {
  margin-top: 20px;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid #111111;
  background: #111111;
  color: #ffffff;

  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.io-contact-col.io-estim-card-left .io-estim-calc-btn:hover {
  transform: translateY(-1px);
}

.io-contact-col.io-estim-card-left .io-estim-calc-btn:active {
  transform: translateY(0);
}
/* =========================================================
   BOUTON ESTIMATION — variante MADCAT
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .io-contact-col.io-estim-card-left .io-estim-calc-btn:hover {
    background: var(--io-gold);
    border-color: var(--io-gold);
    color: #000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }
}
/* =========================================================
   ESTIMATION — sous-couche douce type CONTACT
   ========================================================= */

/* La carte principale doit être au-dessus */
.io-contact-col.io-estim-card-left {
  position: relative;
  z-index: 1;
}

/* Sous-couche douce (transition fond → carte) */
.io-contact-col.io-estim-card-left::after {
  content: "";
  position: absolute;

  /* dépassement subtil */
  left: 8px;
  right: 8px;
  bottom: -10px;
  height: 100%;

 /* background: #f2f3f5; gris très clair, neutre */
  border-radius: 20px;

  z-index: -1;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.04);

  opacity: 0.9;
}

/* Au hover, la sous-couche suit légèrement */
@media (hover: hover) and (pointer: fine) {
  .io-contact-col.io-estim-card-left:hover::after {
    bottom: -12px;
  }
}

/* =========================================================
   ESTIMATION — respiration interne (padding)
   ========================================================= */

.io-contact-col.io-estim-card-left {
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

@media (max-width: 768px) {
  .io-contact-col.io-estim-card-left {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}

/* =========================================================
   ESTIMATION — CARTES MAP + RÉSULTAT (look Contact)
   ========================================================= */

#io-estim-map-wrapper,
#io-estim-result-card{
  position: relative;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.04) !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9) !important;

  padding: 18px 20px !important;
  transition:
    transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* Résultat : un peu plus de padding (comme une carte “contenu”) */
#io-estim-result-card{
  padding: 24px 28px !important;
}

/* Sous-couche douce (transition fond → carte) */
#io-estim-map-wrapper::after,
#io-estim-result-card::after{
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -10px;
  height: 100%;
  /*background: #f2f3f5;*/
  border-radius: 20px;
  z-index: -1;
  box-shadow: 0 18px 40px rgba(0,0,0,0.04);
  opacity: 0.9;
}

/* Hover desktop (subtil) */
@media (hover: hover) and (pointer: fine) {
  #io-estim-map-wrapper:hover,
  #io-estim-result-card:hover{
    transform: translateY(-3px);
    box-shadow:
      0 22px 60px rgba(0,0,0,0.12),
      0 1px 0 rgba(255,255,255,0.95) !important;
    border-color: rgba(212,163,68,0.35) !important;
  }
}

/* Carte Leaflet */
#io-estim-map{
  border-radius: 14px !important;
  overflow: hidden;
}

.io-estim-map-note{
  margin-top: 10px;
  font-size: 11px;
  color: #888;
}

/* Titre résultat : même ton que Contact */
.io-estim-result-title{
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #111;
}

/* Lignes résultat : plus soft */
.io-estim-line{
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.io-estim-label{
  color: #777;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.io-estim-value{
  font-weight: 600;
  color: #111;
}



/* =========================================================
   ESTIMATION — titres identiques au bloc "Vos informations"
   ========================================================= */

.io-contact-col.io-estim-map-wrapper .io-contact-title,
.io-contact-col.io-estim-result-card .io-contact-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #111 !important;
  margin: 0 0 18px 0 !important;
}

/* Padding sur fenetre resultat service "A domicile"*/
.io-contact-col.io-estim-card-left {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 768px) {
  .io-contact-col.io-estim-card-left {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* =========================================================
   ESTIMATION — cacher totalement Map/Result tant que inactif
   ========================================================= */

/* Quand actif : redevient une vraie carte */
.io-estim-map-wrapper.active,
.io-estim-result-card.active {
  display: block !important;
}
/* Harmonisation stricte des titres des 2 cartes */
.io-estim-map-wrapper .io-contact-title,
.io-estim-result-card .io-contact-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #111 !important;
  margin: 0 0 18px 0 !important;
}
#io-estim-map,
.leaflet-container {
  touch-action: pan-y;
}

/* ===============================
   LEAFLET MAP – FIX FRONT
================================ */

#io-estim-map {
  width: 100%;
  height: 260px;        /* ← OBLIGATOIRE */
  min-height: 260px;
  border-radius: 18px;
  background: #e5e5e5;  /* fallback pendant le chargement */
}

/* Sécurité si Elementor wrap */
.io-estim-map-wrapper {
  overflow: hidden;
}

/* =========================================
   SUPPRESSION DES BLOCS TECHNIQUES FANTÔMES
   (sans casser JS / calcul / carte)
========================================= */

/* Colonne gauche : blocs techniques invisibles */
.io-estim-card-left
  .io-estim-map-wrapper,
.io-estim-card-left
  .io-estim-result-card {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Sécurité : aucun contenu visible */
.io-estim-card-left
  .io-estim-map-wrapper *,
.io-estim-card-left
  .io-estim-result-card * {
  display: none !important;
}

/* iPhone / touch : laisser la page scroller au lieu de la carte */
@media (max-width: 768px) {
  #io-estim-map,
  .leaflet-container {
    touch-action: pan-y !important;
  }
}

/* =========================================================
   iPhone — empêcher Leaflet de capturer le scroll
   ========================================================= */
@media (pointer: coarse) {
  #io-estim-map,
  #io-estim-map .leaflet-container {
    pointer-events: none !important; /* scroll fluide */
    touch-action: pan-y !important;
  }
}
#io-estim-map {
  width: 100%;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
}

/* =========================================================
   ESTIMATION — empêcher les cartes droites de “tomber” sous la colonne gauche
   ========================================================= */

/* 1) Empêche les cartes de devenir des petits cartouches résiduels */
#io-estim-map-wrapper,
#io-estim-result-card {
  width: 100% !important;
  max-width: none !important;
}

/* 2) Sur les breakpoints où ça “stack”, on force un vrai bloc plein */
@media (max-width: 1024px) {
  #io-estim-map-wrapper,
  #io-estim-result-card {
    margin-top: 18px !important;
  }
}

/* 3) Si jamais Elementor leur donne une hauteur min bizarre, on neutralise */
#io-estim-map-wrapper:empty,
#io-estim-result-card:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   iPhone — éviter que des couches invisibles captent le scroll
   ========================================================= */

/* Les halos / sous-couches ne doivent jamais capter le doigt */
.io-contact-col.io-estim-card-left::before,
.io-contact-col.io-estim-card-left::after,
#io-estim-map-wrapper::before,
#io-estim-map-wrapper::after,
#io-estim-result-card::before,
#io-estim-result-card::after {
  pointer-events: none !important;
}

/* Leaflet : on laisse le scroll passer */
#io-estim-map,
#io-estim-map * {
  touch-action: pan-y !important;
}

/* =========================================================
   PAGE ESTIMATION — Layout aligné au système I/O
   ========================================================= */

/* Conteneur global de la page estimation (à poser sur une section Elementor) */
.io-estim-page {
  /* même fond que le reste */
  background: transparent;
  padding: 60px 40px 40px;
}

/* Centrage “comme Contact” */
.io-estim-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* Grille principale */
.io-estim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: start;
}

/* Colonne droite : 2 cartes empilées */
.io-estim-right {
  display: grid;
  gap: 24px;
}

/* Responsive */
@media (max-width: 900px) {
  .io-estim-page {
    padding: 40px 20px 30px;
  }

  .io-estim-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}





/* =========================================================
   PAGE ESTIMATION — layout global
   ========================================================= */

/* Fond et respiration */
.io-estim-page{
  background: #f6f7f9;
  padding: 60px 40px 50px;
}

/* Mobile */
@media (max-width: 900px){
  .io-estim-page{
    padding: 40px 20px 40px;
  }
}

/* Wrap centré, largeur premium */
.io-estim-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

/* Optionnel : si tu veux le même décalage que la page Contact sur desktop
   (si la sidebar desktop est visible sur cette page)
*/
@media (min-width: 1025px){
  .io-estim-page.io-has-sidebar-offset{
    margin-left: var(--io-sidebar-width, 260px);
  }
}

/* =========================================================
   PAGE ESTIMATION — titres (héritage I/O)
   ========================================================= */

.io-estim-hero-title{
  font-size: 22px;
  margin: 0 0 8px;
  color: #111;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.io-estim-hero-subtitle{
  margin: 0 0 26px;
  color: #555;
  line-height: 1.6;
  font-size: 14px;
}

/* Si tu veux un “chapitre” au-dessus du titre (optionnel)
   Tu peux mettre un span dans le titre ou créer un petit div dédié,
   mais on peut aussi styler un élément existant si tu en as un.
*/
.io-estim-wrap .io-estim-chapter{
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8f8f8f;
  margin: 0 0 10px;
  display: block;
}

/* =========================================================
   PAGE ESTIMATION — grille 2 colonnes
   ========================================================= */

.io-estim-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* iPad portrait & mobile : 1 colonne */
@media (max-width: 900px){
  .io-estim-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* =========================================================
   OPTION — colonne droite sticky (desktop)
   ========================================================= */
@media (min-width: 1025px){
  .io-estim-right{
    position: sticky;
    top: 24px;
  }
}

/* =========================================================
   PAGE ESTIMATION — resserrer le haut de page (desktop/iPad)
   Scope: .io-estim-page
   ========================================================= */

/* 1) Remonter la page (enlever le "coussin" haut) */
.io-estim-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Si ton wrapper Elementor ajoute du padding, on le neutralise ici */
.io-estim-page .io-estim-wrap {
  padding-top: 0px !important; /* ajuste: 8 / 12 / 16 */
}

/* 2) Remonter et resserrer le HERO */
.io-estim-page .io-estim-hero-title {
  margin-top: 0 !important;
  margin-bottom: 0px !important; /* espace vers le sous-titre */
}

.io-estim-page .io-estim-hero-subtitle {
  margin-top: 0 !important;
  margin-bottom: 0px !important; /* espace vers l'UI */
}

/* 3) Resserer l’espace avant l’interface */
.io-estim-page .io-estim-layout {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) (option) si Elementor a mis un min-height qui "pousse" le hero */
.io-estim-page,
.io-estim-page .io-estim-wrap {
  min-height: auto !important;
}

/* 5) Responsive: encore plus tight sur iPad / mobile */
@media (max-width: 1024px) {
  .io-estim-page .io-estim-wrap {
    padding-top: 10px !important;
  }
  .io-estim-page .io-estim-hero-subtitle {
    margin-bottom: 20px !important;
  }
}

/* Scalpel : container exact qui pousse */
body.page-id-1834 .elementor-element-79c33432 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

/* =========================================================
   I/O ESTIM — Responsive layout (scopé)
   Structure: .io-estim-page .io-estim-wrap .io-estim-layout(.io-estim-left + .io-estim-right)
   ========================================================= */

.io-estim-page .io-estim-layout {
  /* gap par défaut (desktop) */
  --io-estim-gap: 28px;
}

/* 1) Le bon conteneur: on force le comportement flex même si Elementor met ses variables */
.io-estim-page .io-estim-layout,
.io-estim-page .io-estim-layout.e-con,
.io-estim-page .io-estim-layout.e-con > .e-con-inner {
  display: flex !important;
  gap: var(--io-estim-gap) !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

/* 2) Colonnes: fluide, “flex” comme tu veux (s’adapte à la largeur) */
.io-estim-page .io-estim-left,
.io-estim-page .io-estim-right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* 3) Largeur des “cartouches” HTML: plus large sur desktop, plus serré sur mobile */
.io-estim-page .io-contact-col {
  width: 100% !important;
  max-width: 680px; /* desktop: plus large */
}

/* ---------------------------------------------------------
   DESKTOP / GRAND ÉCRAN (≥ 1025px) : 2 colonnes + gap confort
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .io-estim-page .io-estim-layout,
  .io-estim-page .io-estim-layout.e-con,
  .io-estim-page .io-estim-layout.e-con > .e-con-inner {
    flex-direction: row !important;
  }

  .io-estim-page .io-estim-layout { --io-estim-gap: 32px; }

  .io-estim-page .io-contact-col {
    max-width: 720px;
  }
}

/* ---------------------------------------------------------
   iPAD PAYSAGE (≈ 768–1024 + paysage) : 2 colonnes mais gap plus serré
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .io-estim-page .io-estim-layout,
  .io-estim-page .io-estim-layout.e-con,
  .io-estim-page .io-estim-layout.e-con > .e-con-inner {
    flex-direction: row !important;
  }

  .io-estim-page .io-estim-layout { --io-estim-gap: 18px; }

  .io-estim-page .io-contact-col {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   iPAD PORTRAIT : 1 colonne (ta préférence)
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .io-estim-page .io-estim-layout,
  .io-estim-page .io-estim-layout.e-con,
  .io-estim-page .io-estim-layout.e-con > .e-con-inner {
    flex-direction: column !important;
  }

  .io-estim-page .io-estim-layout { --io-estim-gap: 14px; }

  .io-estim-page .io-contact-col {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------
   iPHONE / MOBILE : 1 colonne + gap compact + cartouches moins larges
   --------------------------------------------------------- */
@media (max-width: 767px) {
  .io-estim-page .io-estim-layout,
  .io-estim-page .io-estim-layout.e-con,
  .io-estim-page .io-estim-layout.e-con > .e-con-inner {
    flex-direction: column !important;
  }

  .io-estim-page .io-estim-layout { --io-estim-gap: 12px; }

  .io-estim-page .io-contact-col {
    max-width: 100%;
  }
}


/* =========================================================
   PAGE ESTIMATION — LAYOUT RESPONSIVE (scopé)
   Remplace 1834 par TON page-id
   ========================================================= */
body.page-id-1834 .io-estim-page{
  /* espace global */
  padding: 28px 22px 60px;
}

/* Zone centrale : on centre le contenu dans la zone "contenu" (hors sidebar) */
body.page-id-1834 .io-estim-wrap{
  max-width: 1120px;            /* largeur agréable desktop */
  margin: 0 auto;               /* centrage */
}

/* Titre + sous-titre : resserrer un peu */
body.page-id-1834 .io-estim-hero-title{
  margin: 0 0 10px !important;
}
body.page-id-1834 .io-estim-hero-subtitle{
  margin: 0 0 26px !important;
}

/* LAYOUT 2 colonnes (desktop / iPad paysage) */
body.page-id-1834 .io-estim-layout{
  display: grid !important;     /* on force grid (Elementor aime mettre flex) */
  grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 0.9fr);
  gap: 22px;
  align-items: start;
}

/* Colonnes */
body.page-id-1834 .io-estim-left,
body.page-id-1834 .io-estim-right{
  min-width: 0;                 /* évite les débordements */
}

/* Colonne droite : pile cartes (map + estimation) */
body.page-id-1834 .io-estim-right{
  display: grid !important;
  gap: 22px;
}

/* iPad PORTRAIT : 1 colonne */
@media (max-width: 900px){
  body.page-id-1834 .io-estim-page{
    padding: 18px 14px 44px;
  }

  body.page-id-1834 .io-estim-wrap{
    max-width: 720px;
  }

  body.page-id-1834 .io-estim-layout{
    grid-template-columns: 1fr !important;  /* 1 colonne */
    gap: 18px;
  }
}

/* iPad PAYSAGE : on garde 2 colonnes mais on réduit l’écart */
@media (min-width: 901px) and (max-width: 1180px){
  body.page-id-1834 .io-estim-wrap{
    max-width: 980px;
  }

  body.page-id-1834 .io-estim-layout{
    gap: 16px;
    grid-template-columns: minmax(340px, 1.15fr) minmax(300px, 0.85fr);
  }
}

/* Desktop large : un peu plus d’air */
@media (min-width: 1400px){
  body.page-id-1834 .io-estim-wrap{
    max-width: 1200px;
  }
  body.page-id-1834 .io-estim-layout{
    gap: 26px;
  }
}

/* ===============================
   I/O — Fix champ DATE iOS
   =============================== */

body.page-id-1834 input[type="date"] {
  width: 100%;
  box-sizing: border-box;

  /* neutralise le rendu iOS */
  -webkit-appearance: none;
  appearance: none;

  /* aligne avec les autres inputs */
  padding-left: 14px;
  padding-right: 14px;
}

/* iOS ajoute parfois un bouton calendrier interne mal géré */
body.page-id-1834 input[type="date"]::-webkit-inner-spin-button,
body.page-id-1834 input[type="date"]::-webkit-calendar-picker-indicator {
  margin-right: 0;
}

body.page-id-1834 input[type="date"] {
  min-height: 42px;
  line-height: 1.2;
  padding-top: 12px;
  padding-bottom: 12px;
}