/* =========================================================
   I/O LUTHIER GUITARE · LAYOUT V2 (REFactor stable)
   Objectifs :
   - 1 seule source de vérité (pas de doublons)
   - Sections "chapitres" : règles communes + overrides minimes
   - Accueil = HERO uniquement
   - Découvrir = 4 cartes + bannière collée en bas (iPad/desktop)
   - Grille auto-fit + option 2x2 iPad portrait
   - Animations in-view (CSS) + JS séparé
   ========================================================= */


/* =========================================================
   0) RESET + VERROU HORIZONTAL + HEADER WP/Elementor
   ========================================================= */

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after{ box-sizing: inherit; }

/* Supprime l’espace du header WP/Elementor (même si vide) */
body:not(.elementor-editor-active) .elementor-location-header{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Sécu wrappers Elementor */
body .elementor,
body .elementor-section-wrap{
  max-width: 100%;
  overflow-x: hidden;
}


/* =========================================================
   1) VARIABLES GLOBALES
   ========================================================= */

:root{
  /* Sidebar */
  --io-sidebar-width-desktop: 260px;
  --io-sidebar-width-ipad-landscape: 220px;

  /* Respiration globale (sections) */
  --io-pad-mobile-y: 3rem;
  --io-pad-ipad-y: 2rem;
  --io-pad-desktop-y: 3.5rem;

  --io-pad-mobile-x: 1.5rem;
  --io-pad-iphone-landscape-x: 3rem;
  --io-pad-ipad-portrait-x: 2rem;
  --io-pad-ipad-landscape-x: 3rem;
  --io-pad-desktop-x: 6rem;

  /* Ancrages */
  --io-scroll-margin-desktop: 56px;
  --io-scroll-margin-ipad-landscape: 64px;
  --io-scroll-margin-ipad-portrait: 72px;

  /* Photo-card */
  --io-photo-radius: 24px;
  --io-photo-shadow: 0 18px 40px rgba(0,0,0,0.28);

  /* DÉCOUVRIR */
  --io-decouvrir-inner-padding: 10px;
  --io-card-min: 280px; /* 220–280 selon ton goût */
  --io-cards-gap: clamp(14px, 2vw, 24px);

  --io-card-radius: 18px;
  --io-card-padding: 0rem 0rem;
  --io-card-min-height-tablet: 170px;

  --io-banner-min-height: clamp(260px, 22vh, 320px);
  --io-banner-radius: 20px;
  --io-banner-padding: 0rem 1.75rem;
}


/* =========================================================
   2) SIDEBAR + DECALAGE CONTENU
   ========================================================= */

/* iPad paysage (1024–1366) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  .sidebar-io,
  .sidebar-io.io-desktop-sidebar{
    width: var(--io-sidebar-width-ipad-landscape) !important;
  }

  body:not(.elementor-editor-active) .elementor-location-header + .elementor,
  body:not(.elementor-editor-active) main,
  body:not(.elementor-editor-active) .site-main{
    margin-left: var(--io-sidebar-width-ipad-landscape) !important;
  }
}

/* Desktop (≥1367) */
@media (min-width: 1367px){
  .sidebar-io,
  .sidebar-io.io-desktop-sidebar{
    width: var(--io-sidebar-width-desktop) !important;
  }

  body:not(.elementor-editor-active) .elementor-location-header + .elementor,
  body:not(.elementor-editor-active) main,
  body:not(.elementor-editor-active) .site-main{
    margin-left: var(--io-sidebar-width-desktop) !important;
  }
}


/* =========================================================
   3) SECTIONS I/O : BASE (mobile-first)
   ========================================================= */

.io-section{
  margin: 0;
  padding-block: var(--io-pad-mobile-y);
  padding-inline: var(--io-pad-mobile-x);
}

/* iPhone paysage */
@media (max-width: 767px) and (orientation: landscape){
  .io-section{ padding-inline: var(--io-pad-iphone-landscape-x); }
}

/* iPad portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  .io-section{
    padding-block: var(--io-pad-ipad-y);
    padding-inline: var(--io-pad-ipad-portrait-x);
  }
}

/* iPad paysage */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  .io-section{
    padding-block: var(--io-pad-ipad-y);
    padding-inline: var(--io-pad-ipad-landscape-x);
  }
}

/* Desktop */
@media (min-width: 1367px){
  .io-section{
    padding-block: var(--io-pad-desktop-y);
    padding-inline: var(--io-pad-desktop-x);
  }
}

/* Titre de chapitre */
.io-chapter-title{
  max-width: 900px;
  margin: 0 auto 3rem auto;
  text-align: center;
}

/* Grille texte + image */
.io-grid{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
}

.io-inner-section,
.io-picture{
  flex: 0 0 auto;
  max-width: 100%;
}

.io-inner-section{ padding: 0 1rem; }

/* ≥768 : 2 colonnes par défaut */
@media (min-width: 768px){
  .io-grid{
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .io-inner-section,
  .io-picture{ flex: 1 1 0; }
}

/* iPad portrait : mode “type iPhone” (colonne) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  .io-grid{
    flex-direction: column !important;
    align-items: stretch;
    gap: 2rem;
  }
  .io-inner-section,
  .io-picture{
    flex: 0 0 auto;
    padding: 0;
  }
}


/* =========================================================
   4) PHOTO CARD (stable)
   ========================================================= */

.io-photo-card{
  position: relative;
  width: 100%;
  border-radius: var(--io-photo-radius);
 	overflow: hidden;
  background: #111;
  box-shadow: var(--io-photo-shadow);

  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform .4s ease, box-shadow .4s ease;
}

.io-photo-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover:hover) and (pointer:fine){
  .io-photo-card:hover{
    transform: perspective(1500px) translateZ(30px);
    box-shadow: 0 32px 68px rgba(0,0,0,0.30);
  }
}

@media (prefers-reduced-motion: reduce){
  .io-photo-card{ transition: none; }
  .io-photo-card:hover{ transform: none; }
}


/* =========================================================
   5) ANCRAGES / CHAPITRES : REGLES COMMUNES
   ========================================================= */

/* Liste des sections "chapitres" (ajoute/enlève des IDs ici) */
:where(
  #atelier,
  #showroom,
  #apropos,
  #service-reglage,
  #service-reparation,
  #service-fabrication,
  #service-vente,
  #domicile,
  #services
).io-section{
  min-height: 100vh; /* base */
}

/* scroll-margin-top (ancre) */
@media (min-width: 1367px){
  :where(
    #atelier,#showroom,#apropos,#service-reglage,#service-reparation,
    #service-fabrication,#service-vente,#domicile,#services
  ).io-section{
    scroll-margin-top: var(--io-scroll-margin-desktop);
  }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  :where(
    #atelier,#showroom,#apropos,#service-reglage,#service-reparation,
    #service-fabrication,#service-vente,#domicile,#services
  ).io-section{
    scroll-margin-top: var(--io-scroll-margin-ipad-landscape);
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  :where(
    #atelier,#showroom,#apropos,#service-reglage,#service-reparation,
    #service-fabrication,#service-vente,#domicile,#services
  ).io-section{
    scroll-margin-top: var(--io-scroll-margin-ipad-portrait);
  }
}


/* =========================================================
   6) ACCUEIL (HERO UNIQUEMENT)
   ========================================================= */

/* Sécurité : pas de blanc au-dessus de la 1ère section */
#accueil.io-section{ margin-top: 0 !important; }

/* HERO layout */
#accueil .io-hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

#accueil .io-main-title{
  max-width: 38rem;
  text-align: center;
  margin: 0;
  margin-top: 1rem;
}

/* Photo hero : on garde uniquement le “format” ici */
#accueil .io-photo-card{
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  aspect-ratio: 4 / 5; /* mobile portrait */
}
@media (min-width: 768px){
  #accueil .io-photo-card{ aspect-ratio: 4 / 3; }
}

/* Sous-éléments */
#accueil .io-services-line{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  justify-content: center;
  text-align: center;
}

#accueil .io-text-decouvrir{
  font-size: .9rem;
  opacity: .8;
  margin-top: .25rem;
  text-align: center;
}

#accueil .io-arrow{
  margin-top: .5rem;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
}

/* Ajustements iPhone portrait */
@media (max-width: 767px) and (orientation: portrait){
  #accueil.io-section{
    padding-top: 5rem;
    padding-bottom: 3rem;
    padding-inline: .75rem;
  }
}

/* iPad portrait : légère gestion verticale */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  #accueil .io-hero{
    min-height: calc(100vh - 80px);
    padding-top: 1.5rem;
    gap: 2.25rem;
  }
  #accueil .io-main-title{
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}


/* =========================================================
   7) DÉCOUVRIR (4 CARTES + BANDEAU CONTACT)
   ========================================================= */

/* 7.1 Mécanique plein écran (iPad + desktop) */
@media (min-width: 768px){

  #decouvrir.io-section.elementor-element{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  /* Elementor boxed */
  #decouvrir.io-section.elementor-element > .e-con-inner{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* ton container qui englobe cartes + bannière */
  #decouvrir .io-accueil-bottom{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-block: var(--io-decouvrir-inner-padding);
  }

  /* push bannière en bas */
  #decouvrir .io-contact-banner{ margin-top: auto; }
}

/* 7.2 Grille auto-fit */
#decouvrir .io-cards-section{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--io-card-min)), 1fr)) !important;
  gap: var(--io-cards-gap) !important;
  align-content: start;
  width: 100%;
}

/* Option : iPad portrait = forcer 2 colonnes (2x2) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  #decouvrir .io-cards-section{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #decouvrir .io-card{ min-height: var(--io-card-min-height-tablet); }
}

/* Cartes : style commun */
#decouvrir :where(.io-card-reglage,.io-card-reparation,.io-card-fabrication,.io-card-domicile){
  background: #fff;
  border-radius: var(--io-card-radius);
  padding: var(--io-card-padding);
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover:hover){
  #decouvrir :where(.io-card-reglage,.io-card-reparation,.io-card-fabrication,.io-card-domicile):hover{
    transform: translateY(-4px);
  }
}

/* 7.3 Bannière contact (effets premium) */
#decouvrir .io-contact-banner{
  position: relative;
  min-height: var(--io-banner-min-height);
  padding: var(--io-banner-padding);
  border-radius: var(--io-banner-radius);
  overflow: hidden;
  background: radial-gradient(circle at top left, #ffd58a 0, #1b1b1b 55%, #050505 100%);
  color: #fff;
	
}

/* background image légère + micro anim */
#decouvrir .io-contact-bg{
  position: absolute;
  inset: 0;
  opacity: .25;
  pointer-events: none;
  transform: scale(1.03);
  transition: transform .6s ease, opacity .6s ease;
}

#decouvrir .io-contact-banner-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* iPad+ : banner en ligne */
@media (min-width: 768px){
  #decouvrir .io-contact-banner-inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

#decouvrir .io-btn-base{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);

}
/* BANNIÈRE CONTACT — centrage du bouton */
#decouvrir .io-contact-banner-inner{
  display: flex;
  align-items: center;        /* centrage vertical */
  justify-content: center;    /* centrage horizontal */
  gap: 1.5rem;
}

@media (hover:hover){
  #decouvrir .io-contact-banner:hover .io-contact-bg{
    transform: scale(1.08);
    opacity: .32;
  }
 
}

/* Mobile : la bannière respire (pas besoin de push bottom) */
@media (max-width: 767px){
  #decouvrir .io-contact-banner{ margin-top: 1.25rem; }

}



/* =========================================================
   8) ANIMATIONS IN-VIEW (CSS uniquement — JS à part)
   ========================================================= */

@media (prefers-reduced-motion: no-preference){
  #decouvrir .io-cards-section > .elementor-element,
  #decouvrir .io-contact-banner{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: transform, opacity;
  }

  #decouvrir .io-inview{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* stagger (4 cartes) */
  #decouvrir .io-cards-section > .elementor-element:nth-child(1){ transition-delay: .00s; }
  #decouvrir .io-cards-section > .elementor-element:nth-child(2){ transition-delay: .06s; }
  #decouvrir .io-cards-section > .elementor-element:nth-child(3){ transition-delay: .12s; }
  #decouvrir .io-cards-section > .elementor-element:nth-child(4){ transition-delay: .18s; }

  #decouvrir .io-contact-banner{ transition-delay: .10s; }
}


/* =========================================================
   FIX iPad PORTRAIT : contenu trop décalé à droite
   ========================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){

  /* 1) On s'assure que le "main" ne subit aucun décalage latéral */
  body:not(.elementor-editor-active) .elementor-location-header + .elementor,
  body:not(.elementor-editor-active) main,
  body:not(.elementor-editor-active) .site-main{
    margin-left: 0 !important;
    transform: none !important;
  }

  /* 2) Respiration latérale plus neutre (souvent trop agressive sur iPad) */
  .io-section{
    padding-inline: 1.5rem !important;
  }

  /* 3) Sécurité : rien ne “pousse” depuis l'intérieur */
  .io-grid,
  .io-inner-section,
  .io-picture{
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  /* 4) Si Elementor boxed ajoute une inner un peu “biaisée” */
  .io-section.e-con-boxed > .e-con-inner{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* CTA SERVICES — conteneur commun (2 boutons l’un sous l’autre) */
.io-services-cta{
  display: flex;
  flex-direction: column;
  align-items: stretch;      /* boutons prennent la largeur */
  justify-content: center;
  gap: 14px;                 /* espacement entre les 2 boutons */
  width: 100%;
  max-width: 520px;          /* “taille” harmonisée sur desktop/iPad */
  margin-inline: auto;       /* centre le bloc CTA dans la colonne */
  padding: 0;                /* neutralise les variations */
}
.io-service-cta{ margin-top: 18px; }

/* CTA SERVICES — éviter les marges incohérentes des widgets */
.io-service-cta .elementor-widget,
.io-service-cta .elementor-widget-wrap,
.io-service-cta .elementor-button-wrapper{
  margin: 0 !important;
}

/* CTA SERVICES — boutons largeur totale */
.io-service-cta .elementor-button{
  width: 100%;
  justify-content: center;
}

/* =========================================================
   FOOTER — ne pas passer sous la mini sidebar (iPad portrait + iPhone)
   Classe footer : .io-section-footer
   ========================================================= */

:root{
  --io-mini-sidebar-w: 70px; /* ajuste : 80–110px selon ta mini sidebar */
}

/* iPad portrait + iPhone (tous orientations iPhone) */
@media (max-width: 1024px){

  .io-section-footer{
    box-sizing: border-box;
    width: calc(100% - var(--io-mini-sidebar-w));
    margin-left: var(--io-mini-sidebar-w);
    max-width: none;
  }
}
.io-contact-map-inner iframe {
  width: 100%;
  height: 220px;
  border-radius: 14px;
}

/* =========================================
   CONTACT · Hover premium (cards + form + map)
   Structure:
   .io-section
     .io-chapter-title
     .contact-form
       .contact-form-left / .contact-form-right
     .contact-card (si tu l'utilises)
   ========================================= */

/* 1) Base "vignette" premium */
/*.io-section .contact-card,*/
.io-section .contact-form-left,
.io-section .contact-form-right,
.io-section .io-contact-map-inner {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  transform: translateZ(0);
	margin-top:2rem;
}

/* 2) Hover : léger relief + liseré Madcat */
@media (hover:hover) and (pointer:fine){
  /*.io-section .contact-card:hover,*/
  .io-section .contact-form-left:hover,
  .io-section .contact-form-right:hover,
  .io-section .io-contact-map-inner:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 70px rgba(0,0,0,.10);
    border-color: rgba(250, 208, 74, .35); /* Madcat gold léger */
  }
}

/* 3) Mini-map : propre et stable */
.io-section .io-contact-map-inner{
  overflow: hidden;
}
.io-section .io-contact-map-inner iframe{
  display: block;
  width: 100%;
  height: 240px; /* ajuste */
  border: 0;
}

/* 4) Accessibilité */
@media (prefers-reduced-motion: reduce){
  .io-section .contact-card,
  .io-section .contact-form-left,
  .io-section .contact-form-right,
  .io-section .io-contact-map-inner{
    transition: none;
  }
}


/* MISE EN PAGE DESKTOP*/

/* =========================================================
   DESKTOP : réduire les grosses marges Elementor + élargir la zone utile
   ========================================================= */
@media screen and (min-width: 1367px){

  /* 1) Réduit le padding par défaut des containers Elementor (tes ~96px) */
  body{
    --container-default-padding-left: 10px;
    --container-default-padding-right: 0px;
  }

  /* 2) Élargit la “boîte” globale Elementor (au lieu de ~1140px) */
  body{
    --container-max-width: 1680px; /* ajuste 1440–1680 selon ton goût */
  }

  /* 3) Ton padding de section desktop était à 6rem -> trop large */
  .io-section{
    padding-inline: 2rem; /* passe à 2rem si tu veux encore plus bord-cadre */
  }

  /* 4) Sécurité : si Elementor force un max-width sur les inner boxed */
  .e-con.e-con-boxed > .e-con-inner{
    max-width: var(--container-max-width) !important;
  }
}

/* =========================================================
   ATELIER — Réglages de mise en page (Desktop/Tablet)
   Objectifs :
   - contenu plus "bord-cadre" et plus présent
   - photo plus dominante si le texte est court
   - gros titre bleu mieux espacés du texte
   - ratios photo au choix
   ========================================================= */

/* --------- 0) Variables faciles à modifier --------- */
:root{
  /* Espace entre les 2 colonnes (texte / photo) */
  --io-atelier-gap: clamp(2rem, 4vw, 5rem);

  /* Largeur max globale du bloc (si tu veux que ça prenne + de place) */
  --io-atelier-max: 1600px; /* 1400–1600 selon ton goût */

  /* Espace sous le gros titre bleu */
  --io-atelier-title-gap: 1.1rem; /* 0.8–1.6rem */

  /* Taille mini de la colonne photo (évite photo trop petite) */
  --io-atelier-photo-min: 520px;  /* ajuste : 480–680 */

  /* Hauteur min visuelle de la carte photo (si besoin) */
  --io-atelier-photo-minh: 420px; /* optionnel */
}

/* --------- 1) Cadrage global du bloc ATELIER --------- */
@media (min-width: 1025px){
  #atelier .io-grid{
    max-width: var(--io-atelier-max);
    margin-inline: auto;
    gap: var(--io-atelier-gap);
    align-items: center;
  }

  /* Si tu veux que le texte respire un peu plus */
  #atelier .io-copy{
    padding-inline: 0; /* évite le "trop de padding" */
  }
}

/* --------- 2) Proportions texte/photo (par classe) ---------
   À ajouter sur le conteneur .io-grid dans Elementor :
   - io-ratio-50-50
   - io-ratio-40-60  (texte 40 / photo 60)
   - io-ratio-60-40  (texte 60 / photo 40)
   - io-ratio-35-65, io-ratio-65-35 etc.
------------------------------------------------------------ */

@media (min-width: 768px){
  /* base : comportement stable */
  #atelier .io-grid{
    display: flex;
  }
  #atelier .io-copy,
  #atelier .io-picture{
    min-width: 0;
  }

  /* 50 / 50 */
  #atelier .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #atelier .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  /* 40 / 60 (photo dominante) */
  #atelier .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #atelier .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  /* 60 / 40 (texte dominant) */
  #atelier .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #atelier .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  /* options bonus */
  #atelier .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #atelier .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  #atelier .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #atelier .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

  /* garde-fou : photo jamais trop petite */
  #atelier .io-picture{
    min-width: var(--io-atelier-photo-min);
  }
}

/* --------- 3) Ratio / format de la photo (par classe) ---------
   À ajouter sur le conteneur .io-picture dans Elementor :
   - io-photo-16-9
   - io-photo-4-5   (portrait)
   - io-photo-3-4   (portrait +)
   - io-photo-1-1
   - io-photo-21-9  (cinéma)
--------------------------------------------------------------- */

/* base (si aucune classe) */
#atelier .io-picture .io-photo-card{
  aspect-ratio: 16 / 9;
  min-height: var(--io-atelier-photo-minh); /* optionnel */
}

/* formats au choix */
#atelier .io-picture.io-photo-16-9  .io-photo-card{ aspect-ratio: 16 / 9; }
#atelier .io-picture.io-photo-21-9  .io-photo-card{ aspect-ratio: 21 / 9; }
#atelier .io-picture.io-photo-4-5   .io-photo-card{ aspect-ratio: 4 / 5; }
#atelier .io-picture.io-photo-4-3   .io-photo-card{ aspect-ratio: 4 / 3; }
#atelier .io-picture.io-photo-3-4   .io-photo-card{ aspect-ratio: 3 / 4; }
#atelier .io-picture.io-photo-1-1   .io-photo-card{ aspect-ratio: 1 / 1; }

/* --------- 4) Espacement gros titre bleu ↔ texte --------- */
#atelier .io-title,
#atelier .io-title .elementor-heading-title{
  margin-bottom: var(--io-atelier-title-gap) !important;
}

#atelier .io-text,
#atelier .io-text p{
  margin-top: 0 !important;
}

/* --------- 5) Bonus : photo "un peu plus grande" sans casser ---------
   À ajouter sur .io-picture : io-photo-boost
   (ça donne un rendu plus premium quand le texte est court)
--------------------------------------------------------------------- */
@media (min-width: 1025px){
  #atelier .io-picture.io-photo-boost .io-photo-card{
    transform: scale(1.03);
    transform-origin: center;
  }
}

/* =========================================================
   SHOWROOM — Réglages de mise en page (Desktop/Tablet)
   Objectifs :
   - contenu plus "bord-cadre" et plus présent
   - photo plus dominante si le texte est court
   - gros titre bleu mieux espacés du texte
   - ratios photo au choix
   ========================================================= */

/* --------- 0) Variables faciles à modifier --------- */
:root{
  /* Espace entre les 2 colonnes (texte / photo) */
  --io-showroom-gap: clamp(2rem, 4vw, 5rem);

  /* Largeur max globale du bloc (si tu veux que ça prenne + de place) */
  --io-showroom-max: 1500px; /* 1400–1600 selon ton goût */

  /* Espace sous le gros titre bleu */
  --io-showroom-title-gap: 1.1rem; /* 0.8–1.6rem */

  /* Taille mini de la colonne photo (évite photo trop petite) */
  --io-showroom-photo-min: 520px;  /* ajuste : 480–680 */

  /* Hauteur min visuelle de la carte photo (si besoin) */
  --io-showroom-photo-minh: 420px; /* optionnel */
}

/* --------- 1) Cadrage global du bloc showroom --------- */
@media (min-width: 1025px){
  #showroom .io-grid{
    max-width: var(--io-showroom-max);
    margin-inline: auto;
    gap: var(--io-showroom-gap);
    align-items: center;
  }

  /* Si tu veux que le texte respire un peu plus */
  #showroom .io-copy{
    padding-inline: 0; /* évite le "trop de padding" */
  }
}

/* --------- 2) Proportions texte/photo (par classe) ---------
   À ajouter sur le conteneur .io-grid dans Elementor :
   - io-ratio-50-50
   - io-ratio-40-60  (texte 40 / photo 60)
   - io-ratio-60-40  (texte 60 / photo 40)
   - io-ratio-35-65, io-ratio-65-35 etc.
------------------------------------------------------------ */

@media (min-width: 768px){
  /* base : comportement stable */
  #showroom .io-grid{
    display: flex;
  }
  #showroom .io-copy,
  #showroom .io-picture{
    min-width: 0;
  }

  /* 50 / 50 */
  #showroom .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #showroom .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  /* 40 / 60 (photo dominante) */
  #showroom .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #showroom .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  /* 60 / 40 (texte dominant) */
  #showroom .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #showroom .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  /* options bonus */
  #showroom .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #showroom .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  #showroom .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #showroom .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

  /* garde-fou : photo jamais trop petite */
  #showroom .io-picture{
    min-width: var(--io-showroom-photo-min);
  }
}

/* --------- 3) Ratio / format de la photo (par classe) ---------
   À ajouter sur le conteneur .io-picture dans Elementor :
   - io-photo-16-9
   - io-photo-4-5   (portrait)
   - io-photo-3-4   (portrait +)
   - io-photo-1-1
   - io-photo-21-9  (cinéma)
--------------------------------------------------------------- */

/* base (si aucune classe) */
#showroom .io-picture .io-photo-card{
  aspect-ratio: 16 / 9;
  min-height: var(--io-showroom-photo-minh); /* optionnel */
}

/* formats au choix */
#showroom .io-picture.io-photo-16-9  .io-photo-card{ aspect-ratio: 16 / 9; }
#showroom .io-picture.io-photo-21-9  .io-photo-card{ aspect-ratio: 21 / 9; }
#showroom .io-picture.io-photo-4-5   .io-photo-card{ aspect-ratio: 4 / 5; }
#showroom .io-picture.io-photo-3-4   .io-photo-card{ aspect-ratio: 3 / 4; }
#showroom.io-picture.io-photo-1-1   .io-photo-card{ aspect-ratio: 1 / 1; }

/* --------- 4) Espacement gros titre bleu ↔ texte --------- */
#showroom .io-title,
#showroom .io-title .elementor-heading-title{
  margin-bottom: var(--io-showroom-title-gap) !important;
}

#showroom .io-text,
#showroom .io-text p{
  margin-top: 0 !important;
}

/* --------- 5) Bonus : photo "un peu plus grande" sans casser ---------
   À ajouter sur .io-picture : io-photo-boost
   (ça donne un rendu plus premium quand le texte est court)
--------------------------------------------------------------------- */
@media (min-width: 1025px){
  #showroom .io-picture.io-photo-boost .io-photo-card{
    transform: scale(1.03);
    transform-origin: center;
  }
}

/* =========================================================
   A PROPOS — Bloc texte + photo (portrait)
   Objectifs :
   - contrôler proportion texte/photo (50/50, 40/60, 35/65, etc.)
   - contrôler la "place" de la photo portrait (max-width + ratio)
   - régler l'espace titre bleu → texte + interlignes
   ========================================================= */

:root{
  --io-apropos-max: 1600px;                   /* largeur max du bloc */
  --io-apropos-gap: clamp(2rem, 4vw, 5.5rem); /* espace colonne texte ↔ photo */

  --io-apropos-title-gap: 1.2rem;             /* espace H2 bleu → texte */
  --io-apropos-text-gap: 1rem;                /* espace entre paragraphes (optionnel) */

  /* Photo */
  --io-apropos-photo-ratio: 3 / 4;            /* portrait par défaut */
  --io-apropos-photo-minh: 520px;             /* hauteur mini */
  --io-apropos-photo-maxw: 560px;             /* ✅ limite "ne bouffe pas l'écran" */
  --io-apropos-photo-radius: 28px;
  --io-apropos-photo-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Cadrage global */
@media (min-width: 1025px){
  #apropos .io-grid{
    max-width: var(--io-apropos-max);
    margin-inline: auto;
    gap: var(--io-apropos-gap);
    align-items: center;
  }
}

/* Proportions texte/photo (appliquer une classe preset sur .io-grid) */
@media (min-width: 768px){
  #apropos .io-grid{ display:flex; }
  #apropos .io-copy,
  #apropos .io-picture{ min-width:0; }

  /* presets */
  #apropos .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #apropos .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  #apropos .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #apropos .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  #apropos .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #apropos .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

  /* utile si un jour tu inverses (photo à gauche / texte à droite) */
  #apropos .io-grid.io-reverse{ flex-direction: row-reverse; }
}

/* Titre bleu → texte */
#apropos .io-title,
#apropos .io-title .elementor-heading-title{
  margin-bottom: var(--io-apropos-title-gap) !important;
}

/* (optionnel) rendre le texte plus respirant sans toucher Elementor */
#apropos .io-copy p{
  margin-bottom: var(--io-apropos-text-gap);
}

/* Photo : cadre + ratio + limite de taille (portrait friendly) */
#apropos .io-picture{
  width: 100%;
  max-width: var(--io-apropos-photo-maxw);  /* ✅ ça évite le “full écran” */
  margin-left: auto;                         /* pousse la photo côté droit */
}

#apropos .io-picture .io-photo-card,
#apropos .io-picture img,
#apropos .io-picture .elementor-widget-image img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--io-apropos-photo-radius);
  box-shadow: var(--io-apropos-photo-shadow);
}

/* Si tu veux forcer un cadrage “propre” même avec images de tailles différentes */
#apropos .io-picture.io-photo-crop{
  border-radius: var(--io-apropos-photo-radius);
  overflow: hidden;
  box-shadow: var(--io-apropos-photo-shadow);
}

#apropos .io-picture.io-photo-crop img{
  width: 100%;
  height: 100%;
  min-height: var(--io-apropos-photo-minh);
  aspect-ratio: var(--io-apropos-photo-ratio);
  object-fit: cover;
  display:block;
}

/* Presets ratio photo (à mettre sur .io-picture) */
#apropos .io-picture.io-photo-2-3{ --io-apropos-photo-ratio: 2 / 3; }
#apropos .io-picture.io-photo-3-4{ --io-apropos-photo-ratio: 3 / 4; }
#apropos .io-picture.io-photo-4-5{ --io-apropos-photo-ratio: 4 / 5; }

/* Presets “taille photo” (à mettre sur .io-picture) */
#apropos .io-picture.io-photo-s{ --io-apropos-photo-maxw: 460px; }
#apropos .io-picture.io-photo-m{ --io-apropos-photo-maxw: 560px; }
#apropos .io-picture.io-photo-l{ --io-apropos-photo-maxw: 680px; }



/* =========================================================
   REGLAGE — Bloc texte + photo (portrait)
   Objectifs :
   - contrôler proportion texte/photo (50/50, 40/60, 35/65, etc.)
   - contrôler la "place" de la photo portrait (max-width + ratio)
   - régler l'espace titre bleu → texte + interlignes
   ========================================================= */

:root{
  --io-service-reglage-max: 1600px;                   /* largeur max du bloc */
  --io-service-reglage-gap: clamp(2rem, 4vw, 5.5rem); /* espace colonne texte ↔ photo */

  --io-service-reglage-title-gap: 1.2rem;             /* espace H2 bleu → texte */
  --io-service-reglage-text-gap: 1rem;                /* espace entre paragraphes (optionnel) */

  /* Photo */
  --io-service-reglage-photo-ratio: 16 / 9;            /* portrait par défaut */
  --io-service-reglage-photo-minh: 520px;             /* hauteur mini */
  --io-service-reglage-photo-maxw: 560px;             /* ✅ limite "ne bouffe pas l'écran" */
  --io-service-reglage-photo-radius: 28px;
  --io-service-reglage-photo-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Cadrage global */
@media (min-width: 1025px){
  #service-reglage .io-grid{
    max-width: var(--io-service-reglage-max);
    margin-inline: auto;
    gap: var(--io-service-reglage-gap);
    align-items: center;
  }
}

/* Proportions texte/photo (appliquer une classe preset sur .io-grid) */
@media (min-width: 768px){
  #service-reglage .io-grid{ display:flex; }
  #service-reglage .io-copy,
  #service-reglage .io-picture{ min-width:0; }

  /* presets */
  #service-reglage .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #service-reglage .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  #service-reglage .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #service-reglage .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  #service-reglage .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #service-reglage .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

	#service-reglage .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #service-reglage .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  #service-reglage .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #service-reglage .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  /* utile si un jour tu inverses (photo à gauche / texte à droite) */
  #service-reglage .io-grid.io-reverse{ flex-direction: row-reverse; }
}

/* Titre bleu → texte */
#service-reglage .io-title,
#service-reglage .io-title .elementor-heading-title{
  margin-bottom: var(--io-service-reglage-title-gap) !important;
}

/* (optionnel) rendre le texte plus respirant sans toucher Elementor */
#service-reglage .io-copy p{
  margin-bottom: var(--io-service-reglage-text-gap);
}

/* Photo : cadre + ratio + limite de taille (portrait friendly) */
#service-reglage .io-picture{
  width: 100%;
  max-width: var(--io-service-reglage-photo-maxw);  /* ✅ ça évite le “full écran” */
  margin-left: auto;                         /* pousse la photo côté droit */
}

#service-reglage .io-picture .io-photo-card,
#service-reglage .io-picture img,
#service-reglage .io-picture .elementor-widget-image img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--io-service-reglage-photo-radius);
  box-shadow: var(--io-service-reglage-photo-shadow);
}

/* Si tu veux forcer un cadrage “propre” même avec images de tailles différentes */
#service-reglage .io-picture.io-photo-crop{
  border-radius: var(--ioservice-reglage-photo-radius);
  overflow: hidden;
  box-shadow: var(--io-service-reglage-photo-shadow);
}

#service-reglage .io-picture.io-photo-crop img{
  width: 100%;
  height: 100%;
  min-height: var(--io-service-reglage-photo-minh);
  aspect-ratio: var(--io-service-reglage-photo-ratio);
  object-fit: cover;
  display:block;
}

/* Presets ratio photo (à mettre sur .io-picture) */
#service-reglage .io-picture.io-photo-2-3{ --io-service-reglage-photo-ratio: 2 / 3; }
#service-reglage .io-picture.io-photo-3-4{ --io-service-reglage-photo-ratio: 3 / 4; }
#service-reglage .io-picture.io-photo-4-5{ --io-service-reglage-photo-ratio: 4 / 5; }

/* Presets “taille photo” (à mettre sur .io-picture) */
#service-reglage .io-picture.io-photo-s{ --io-service-reglage-photo-maxw: 460px; }
#service-reglage .io-picture.io-photo-m{ --io-service-reglage-photo-maxw: 560px; }
#service-reglage .io-picture.io-photo-l{ --io-service-reglage-photo-maxw: 680px; }


/* =========================================================
   RESPONSIVE IPAD — LANDSCAPE
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
	
#service-reglage .io-title,
#service-reglage .io-title .elementor-heading-title{
  margin-bottom: 1.2rem !important;
	
	}
#service-reglage .io-chapter-title {
		margin-bottom:0rem;
	margin-top:-2rem !important;
	}
}





/* =========================================================
   REPARATION — Bloc texte + photo (portrait)
   Objectifs :
   - contrôler proportion texte/photo (50/50, 40/60, 35/65, etc.)
   - contrôler la "place" de la photo portrait (max-width + ratio)
   - régler l'espace titre bleu → texte + interlignes
   ========================================================= */

:root{
  --io-service-reparation-max: 1600px;                   /* largeur max du bloc */
  --io-service-reparation-gap: clamp(2rem, 4vw, 5.5rem); /* espace colonne texte ↔ photo */

  --io-service-reparation-title-gap: 1.2rem;             /* espace H2 bleu → texte */
  --io-service-reparation-text-gap: 1rem;                /* espace entre paragraphes (optionnel) */

  /* Photo */
  --io-service-reparation-photo-ratio: 16 / 9;            /* portrait par défaut */
  --io-service-reparation-photo-minh: 520px;             /* hauteur mini */
  --io-service-reparation-photo-maxw: 560px;             /* ✅ limite "ne bouffe pas l'écran" */
  --io-service-reparation-photo-radius: 28px;
  --io-service-reparation-photo-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Cadrage global */
@media (min-width: 1025px){
  #service-reparation .io-grid{
    max-width: var(--io-service-reparation-max);
    margin-inline: auto;
    gap: var(--io-service-reparation-gap);
    align-items: center;
  }
}

/* Proportions texte/photo (appliquer une classe preset sur .io-grid) */
@media (min-width: 768px){
  #service-reparation .io-grid{ display:flex; }
  #service-reparation .io-copy,
  #service-reparation .io-picture{ min-width:0; }

  /* presets */
  #service-reparation .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #service-reparation .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  #service-reparation .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #service-reparation .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  #service-reparation .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #service-reparation .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

	#service-reparation .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #service-reparation .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  #service-reparation .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #service-reparation .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  /* utile si un jour tu inverses (photo à gauche / texte à droite) */
  #service-reparation .io-grid.io-reverse{ flex-direction: row-reverse; }
}

/* Titre bleu → texte */
#service-reparation .io-title,
#service-reparation .io-title .elementor-heading-title{
  margin-bottom: var(--io-service-reparation-title-gap) !important;
}

/* (optionnel) rendre le texte plus respirant sans toucher Elementor */
#service-reparation .io-copy p{
  margin-bottom: var(--io-service-reparation-text-gap);
}

/* Photo : cadre + ratio + limite de taille (portrait friendly) */
#service-reparation .io-picture{
  width: 100%;
  max-width: var(--io-service-reparation-photo-maxw);  /* ✅ ça évite le “full écran” */
  margin-left: auto;                         /* pousse la photo côté droit */
}

#service-reparation .io-picture .io-photo-card,
#service-reparation .io-picture img,
#service-reparation .io-picture .elementor-widget-image img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--io-service-reparation-photo-radius);
  box-shadow: var(--io-service-reparation-photo-shadow);
}

/* Si tu veux forcer un cadrage “propre” même avec images de tailles différentes */
#service-reparation .io-picture.io-photo-crop{
  border-radius: var(--io-service-reparation-photo-radius);
  overflow: hidden;
  box-shadow: var(--io-service-reparation-photo-shadow);
}

#service-reparation .io-picture.io-photo-crop img{
  width: 100%;
  height: 100%;
  min-height: var(--io-service-reparation-photo-minh);
  aspect-ratio: var(--io-service-reparation-photo-ratio);
  object-fit: cover;
  display:block;
}

/* Presets ratio photo (à mettre sur .io-picture) */
#service-reparation .io-picture.io-photo-2-3{ --io-service-reparation-photo-ratio: 2 / 3; }
#service-reparation .io-picture.io-photo-3-4{ --io-service-reparation-photo-ratio: 3 / 4; }
#service-reparation .io-picture.io-photo-4-5{ --io-service-reparation-photo-ratio: 4 / 5; }

/* Presets “taille photo” (à mettre sur .io-picture) */
#service-reparation .io-picture.io-photo-s{ --io-service-reparation-photo-maxw: 460px; }
#service-reparation .io-picture.io-photo-m{ --io-service-reparation-photo-maxw: 560px; }
#service-reparation .io-picture.io-photo-l{ --io-service-reparation-photo-maxw: 680px; }



/* =========================================================
   FABRICATION — Bloc texte + photo (portrait)
   Objectifs :
   - contrôler proportion texte/photo (50/50, 40/60, 35/65, etc.)
   - contrôler la "place" de la photo portrait (max-width + ratio)
   - régler l'espace titre bleu → texte + interlignes
   ========================================================= */

:root{
  --io-service-fabrication-max: 1600px;                   /* largeur max du bloc */
  --io-service-fabrication-gap: clamp(2rem, 4vw, 5.5rem); /* espace colonne texte ↔ photo */

  --io-service-fabrication-title-gap: 1rem;             /* espace H2 bleu → texte */
  --io-service-fabrication-text-gap: 0.5rem;                /* espace entre paragraphes (optionnel) */

  /* Photo */
  --io-service-fabrication-photo-ratio: 16 / 9;            /* portrait par défaut */
  --io-service-fabrication-photo-minh: 520px;             /* hauteur mini */
  --io-service-fabrication-photo-maxw: 560px;             /* ✅ limite "ne bouffe pas l'écran" */
  --io-service-fabrication-photo-radius: 28px;
  --io-service-fabrication-photo-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Cadrage global */
@media (min-width: 1025px){
  #service-fabrication .io-grid{
    max-width: var(--io-service-fabrication-max);
    margin-inline: auto;
    gap: var(--io-service-fabrication-gap);
    align-items: center;
  }
}

/* Proportions texte/photo (appliquer une classe preset sur .io-grid) */
@media (min-width: 768px){
  #service-fabrication .io-grid{ display:flex; }
  #service-fabrication .io-copy,
  #service-fabrication .io-picture{ min-width:0; }

  /* presets */
  #service-fabrication .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #service-fabrication .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  #service-fabrication .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #service-fabrication .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  #service-fabrication .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #service-fabrication .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

	#service-fabrication .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #service-fabrication .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  #service-fabrication .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #service-fabrication .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  /* utile si un jour tu inverses (photo à gauche / texte à droite) */
  #service-fabrication .io-grid.io-reverse{ flex-direction: row-reverse; }
}

/* Titre bleu → texte */
#service-fabrication .io-title,
#service-fabrication .io-title .elementor-heading-title{
  margin-bottom: var(--io-service-fabrication-title-gap) !important;
}

/* (optionnel) rendre le texte plus respirant sans toucher Elementor */
#service-fabrication .io-copy p{
  margin-bottom: var(--io-service-fabrication-text-gap);
}

/* Photo : cadre + ratio + limite de taille (portrait friendly) */
#service-fabrication .io-picture{
  width: 100%;
  max-width: var(--io-service-fabrication-photo-maxw);  /* ✅ ça évite le “full écran” */
  margin-left: auto;                         /* pousse la photo côté droit */
}

#service-fabrication .io-picture .io-photo-card,
#service-fabrication .io-picture img,
#service-fabrication .io-picture .elementor-widget-image img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--io-service-fabrication-photo-radius);
  box-shadow: var(--io-service-fabrication-photo-shadow);
}

/* Si tu veux forcer un cadrage “propre” même avec images de tailles différentes */
#service-fabrication .io-picture.io-photo-crop{
  border-radius: var(--io-service-fabrication-photo-radius);
  overflow: hidden;
  box-shadow: var(--io-service-fabrication-photo-shadow);
}

#service-fabrication .io-picture.io-photo-crop img{
  width: 100%;
  height: 100%;
  min-height: var(--io-service-fabrication-photo-minh);
  aspect-ratio: var(--io-service-fabrication-photo-ratio);
  object-fit: cover;
  display:block;
}

/* Presets ratio photo (à mettre sur .io-picture) */
#service-fabrication .io-picture.io-photo-2-3{ --io-service-fabrication-photo-ratio: 2 / 3; }
#service-fabrication .io-picture.io-photo-3-4{ --io-service-fabrication-photo-ratio: 3 / 4; }
#service-fabrication .io-picture.io-photo-4-5{ --io-service-fabrication-photo-ratio: 4 / 5; }

/* Presets “taille photo” (à mettre sur .io-picture) */
#service-fabrication .io-picture.io-photo-s{ --io-service-fabrication-photo-maxw: 460px; }
#service-fabrication .io-picture.io-photo-m{ --io-service-fabrication-photo-maxw: 560px; }
#service-fabrication .io-picture.io-photo-l{ --io-service-fabrication-photo-maxw: 680px; }


/* =========================================================
   RESPONSIVE IPAD — LANDSCAPE
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
	
#service-fabrication .io-title,
#service-fabrication .io-title .elementor-heading-title{
  margin-bottom: 0.6rem !important;
	}
#service-fabrication .io-chapter-title {
		margin-bottom:0rem;
	margin-top:-1rem !important;
	}
	#service-fabrication .io-text {
		margin-top:0.2rem;
		margin-bottom:0rem;
	}	
}


/* =========================================================
   VENTE — Réglages de mise en page (Desktop/Tablet)
   Objectifs :
   - contenu plus "bord-cadre" et plus présent
   - photo plus dominante si le texte est court
   - gros titre bleu mieux espacés du texte
   - ratios photo au choix
   ========================================================= */

/* --------- 0) Variables faciles à modifier --------- */
:root{
  /* Espace entre les 2 colonnes (texte / photo) */
  --io-service-vente-gap: clamp(2rem, 4vw, 5rem);

  /* Largeur max globale du bloc (si tu veux que ça prenne + de place) */
  --io-service-vente-max: 1500px; /* 1400–1600 selon ton goût */

  /* Espace sous le gros titre bleu */
  --io-service-vente-title-gap: 1.1rem; /* 0.8–1.6rem */

  /* Taille mini de la colonne photo (évite photo trop petite) */
  --io-service-vente-photo-min: 520px;  /* ajuste : 480–680 */

  /* Hauteur min visuelle de la carte photo (si besoin) */
  --io-service-vente-photo-minh: 420px; /* optionnel */
}

/* --------- 1) Cadrage global du bloc showroom --------- */
@media (min-width: 1025px){
  #service-vente .io-grid{
    max-width: var(--io-service-vente-max);
    margin-inline: auto;
    gap: var(--io-service-vente-gap);
    align-items: center;
  }

  /* Si tu veux que le texte respire un peu plus */
  #service-vente .io-copy{
    padding-inline: 0; /* évite le "trop de padding" */
  }
}

/* --------- 2) Proportions texte/photo (par classe) ---------
   À ajouter sur le conteneur .io-grid dans Elementor :
   - io-ratio-50-50
   - io-ratio-40-60  (texte 40 / photo 60)
   - io-ratio-60-40  (texte 60 / photo 40)
   - io-ratio-35-65, io-ratio-65-35 etc.
------------------------------------------------------------ */

@media (min-width: 768px){
  /* base : comportement stable */
  #service-vente .io-grid{
    display: flex;
  }
  #service-vente .io-copy,
  #service-vente .io-picture{
    min-width: 0;
  }

  /* 50 / 50 */
  #service-vente .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #service-vente .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  /* 40 / 60 (photo dominante) */
  #service-vente .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #service-vente .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  /* 60 / 40 (texte dominant) */
  #service-vente .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #service-vente .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  /* options bonus */
  #service-vente .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #service-vente .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  #service-vente .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #service-vente .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

  /* garde-fou : photo jamais trop petite */
  #service-vente .io-picture{
    min-width: var(--io-service-vente-photo-min);
  }
}

/* --------- 3) Ratio / format de la photo (par classe) ---------
   À ajouter sur le conteneur .io-picture dans Elementor :
   - io-photo-16-9
   - io-photo-4-5   (portrait)
   - io-photo-3-4   (portrait +)
   - io-photo-1-1
   - io-photo-21-9  (cinéma)
--------------------------------------------------------------- */

/* base (si aucune classe) */
#service-vente .io-picture .io-photo-card{
  aspect-ratio: 16 / 9;
  min-height: var(--io-service-vente-photo-minh); /* optionnel */
}

/* formats au choix */
#service-vente .io-picture.io-photo-16-9  .io-photo-card{ aspect-ratio: 16 / 9; }
#service-vente .io-picture.io-photo-21-9  .io-photo-card{ aspect-ratio: 21 / 9; }
#service-vente .io-picture.io-photo-4-5   .io-photo-card{ aspect-ratio: 4 / 5; }
#service-vente .io-picture.io-photo-3-4   .io-photo-card{ aspect-ratio: 3 / 4; }
#service-vente.io-picture.io-photo-1-1   .io-photo-card{ aspect-ratio: 1 / 1; }

/* --------- 4) Espacement gros titre bleu ↔ texte --------- */
#service-vente .io-title,
#service-vente .io-title .elementor-heading-title{
  margin-bottom: var(--io-service-vente-title-gap) !important;
}

#service-vente .io-text,
#service-vente .io-text p{
  margin-top: 0 !important;
}

/* --------- 5) Bonus : photo "un peu plus grande" sans casser ---------
   À ajouter sur .io-picture : io-photo-boost
   (ça donne un rendu plus premium quand le texte est court)
--------------------------------------------------------------------- */
@media (min-width: 1025px){
  #service-vente .io-picture.io-photo-boost .io-photo-card{
    transform: scale(1.03);
    transform-origin: center;
  }
}

/* =========================================================
   RESPONSIVE IPAD — LANDSCAPE
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
	
#service-vente .io-title,
#service-vente .io-title .elementor-heading-title{
  margin-bottom: 0.6rem !important;
	}
#service-vente .io-chapter-title {
		margin-bottom:0rem;
	margin-top:-1rem !important;
	}
	#service-vente .io-text {
		margin-top:0.2rem;
		margin-bottom:0rem;
	}	
}


/* =========================================================
   A DOMICILE — Bloc texte + photo (portrait)
   Objectifs :
   - contrôler proportion texte/photo (50/50, 40/60, 35/65, etc.)
   - contrôler la "place" de la photo portrait (max-width + ratio)
   - régler l'espace titre bleu → texte + interlignes
   ========================================================= */

:root{
  --io-domicile-max: 1600px;                   /* largeur max du bloc */
  --io-domicile-gap: clamp(2rem, 4vw, 5.5rem); /* espace colonne texte ↔ photo */

  --io-domicile-title-gap: 1.2rem;             /* espace H2 bleu → texte */
  --io-domicile-text-gap: 1rem;                /* espace entre paragraphes (optionnel) */

  /* Photo */
  --io-domicile-photo-ratio: 16 / 9;            /* portrait par défaut */
  --io-domicile-photo-minh: 520px;             /* hauteur mini */
  --io-domicile-photo-maxw: 560px;             /* ✅ limite "ne bouffe pas l'écran" */
  --io-domicile-photo-radius: 28px;
  --io-domicile-photo-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Cadrage global */
@media (min-width: 1025px){
  #domicile .io-grid{
    max-width: var(--io-domicile-max);
    margin-inline: auto;
    gap: var(--io-domicile-gap);
    align-items: center;
  }
}

/* Proportions texte/photo (appliquer une classe preset sur .io-grid) */
@media (min-width: 768px){
  #domicile .io-grid{ display:flex; }
  #domicile .io-copy,
  #domicile .io-picture{ min-width:0; }

  /* presets */
  #domicile .io-grid.io-ratio-50-50 .io-copy{ flex: 0 1 50%; }
  #domicile .io-grid.io-ratio-50-50 .io-picture{      flex: 0 1 50%; }

  #domicile .io-grid.io-ratio-60-40 .io-copy{ flex: 0 1 60%; }
  #domicile .io-grid.io-ratio-60-40 .io-picture{      flex: 0 1 40%; }

  #domicile .io-grid.io-ratio-65-35 .io-copy{ flex: 0 1 65%; }
  #domicile .io-grid.io-ratio-65-35 .io-picture{      flex: 0 1 35%; }

	#domicile .io-grid.io-ratio-40-60 .io-copy{ flex: 0 1 40%; }
  #domicile .io-grid.io-ratio-40-60 .io-picture{      flex: 0 1 60%; }

  #domicile .io-grid.io-ratio-35-65 .io-copy{ flex: 0 1 35%; }
  #domicile .io-grid.io-ratio-35-65 .io-picture{      flex: 0 1 65%; }

  /* utile si un jour tu inverses (photo à gauche / texte à droite) */
  #domicile .io-grid.io-reverse{ flex-direction: row-reverse; }
}

/* Titre bleu → texte */
#domicile .io-title,
#domicile .io-title .elementor-heading-title{
  margin-bottom: var(--io-domicile-title-gap) !important;
}

/* (optionnel) rendre le texte plus respirant sans toucher Elementor */
#domicile .io-copy p{
  margin-bottom: var(--io-domicile-text-gap);
}

/* Photo : cadre + ratio + limite de taille (portrait friendly) */
#domicile .io-picture{
  width: 100%;
  max-width: var(--io-domicile-photo-maxw);  /* ✅ ça évite le “full écran” */
  margin-left: auto;                         /* pousse la photo côté droit */
}

#domicile .io-picture .io-photo-card,
#domicile .io-picture img,
#domicile .io-picture .elementor-widget-image img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--io-domicile-photo-radius);
  box-shadow: var(--io-domicile-photo-shadow);
}

/* Si tu veux forcer un cadrage “propre” même avec images de tailles différentes */
#domicile .io-picture.io-photo-crop{
  border-radius: var(--io-domicile-photo-radius);
  overflow: hidden;
  box-shadow: var(--io-domicile-photo-shadow);
}

#domicile .io-picture.io-photo-crop img{
  width: 100%;
  height: 100%;
  min-height: var(--io-domicile-photo-minh);
  aspect-ratio: var(--io-domicile-photo-ratio);
  object-fit: cover;
  display:block;
}

/* Presets ratio photo (à mettre sur .io-picture) */
#domicile .io-picture.io-photo-2-3{ --io-domicile-photo-ratio: 2 / 3; }
#domicile .io-picture.io-photo-3-4{ --io-domicile-photo-ratio: 3 / 4; }
#domicile .io-picture.io-photo-4-5{ --io-domicile-photo-ratio: 4 / 5; }

/* Presets “taille photo” (à mettre sur .io-picture) */
#domicile .io-picture.io-photo-s{ --io-domicile-photo-maxw: 460px; }
#domicile .io-picture.io-photo-m{ --io-domicile-photo-maxw: 560px; }
#domicile .io-picture.io-photo-l{ --io-domicile-photo-maxw: 680px; }

/* =========================================================
   RESPONSIVE IPAD — LANDSCAPE
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
	
#domicile .io-title,
#domicile .io-title .elementor-heading-title{
  margin-bottom: 0.3rem !important;
	}
#domicile .io-chapter-title {
		margin-bottom:0rem !important;
		margin-top:-3rem !important;
	}
#domicile .io-text {
		margin-top:0rem;!important;
		margin-bottom:0.1rem;!important;
	}	
}


/* =========================================================
   iPAD PORTRAIT — RECENTRAGE GLOBAL
   ========================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  :root {
    /* 🔧 AJUSTEMENT FIN si besoin */
    --io-ipad-portrait-offset-x: 0px; /* ex : -12px / +8px */
    --io-ipad-portrait-padding: 2rem; /* respiration latérale */
  }

  /* 1️⃣ Sécurité : pas de décalage hérité */
  body,
  body:not(.elementor-editor-active) main,
  body:not(.elementor-editor-active) .site-main,
  body:not(.elementor-editor-active) .elementor {
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* 2️⃣ Sections I/O = centrées */
  .io-section {
    margin-inline: auto !important;
    padding-left: var(--io-ipad-portrait-padding) !important;
    padding-right: var(--io-ipad-portrait-padding) !important;
    transform: translateX(var(--io-ipad-portrait-offset-x));
  }

  /* 3️⃣ Containers Elementor internes */
  .io-section > .e-con-inner,
  .io-section .elementor-container,
  .io-section .io-grid {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

}

/* iPad portrait + iPhone : stacking intelligent */

@media (max-width: 1024px){
  .io-grid{
    flex-direction: column;
  }

  .io-copy{
    display: contents; /* ordre naturel du HTML */
  }

  .io-picture{
    order: 2;
    margin-block: 1.5rem;
  }
	.io-title{
		order: 1;
	}
	.io-text {
		order: 3;
	}
	.io-services-cta {
		order: 4;
	}
}


/* =========================================================
   I/O — iPad PORTRAIT MASTER
   Pages concernées :
   #atelier #showroom #apropos #domicile
   #service-reglage #service-reparation #service-fabrication #service-vente
   Objectif :
   - stack portrait propre (titre bleu -> photo -> texte -> CTA)
   - réglages par page via variables
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){

  /* -----------------------------------------
     1) DEFAULTS iPad PORTRAIT (valeurs globales)
     ----------------------------------------- */
  :root{
    /* Largeur bloc contenu */
    --io-pp-maxw: 760px;

    /* Espace sous "CHAPITRE XX" */
    --io-pp-gap-chapter-to-grid: 1.2rem;

    /* Espace interne dans .io-grid */
    --io-pp-gap-inside: 1rem;

    /* Titre bleu -> photo */
    --io-pp-gap-title-to-photo: 0.8rem;

    /* Photo -> texte */
    --io-pp-gap-photo-to-text: 1rem;

    /* Paragraphes */
    --io-pp-p-gap: 0.8rem;
    --io-pp-line: 1.55;

    /* Photo : ratio et hauteur “visuelle” */
    --io-pp-photo-ratio: 16 / 10;
    --io-pp-photo-maxw: 100%;

    /* CTA services */
    --io-pp-cta-gap: 12px;
    --io-pp-cta-top: 1.1rem;
    --io-pp-btn-minh: 44px;

    /* Option : taille titre bleu (si besoin) */
    --io-pp-title-size: 30px;
  }

  /* -----------------------------------------
     2) APPLY — règles communes à toutes pages
     ----------------------------------------- */

  /* espace sous titre chapitre */
  .io-section .io-chapter-title{
    margin-bottom: var(--io-pp-gap-chapter-to-grid) !important;
  }

  /* bloc stack + centrage */
  .io-section .io-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--io-pp-gap-inside) !important;

    max-width: var(--io-pp-maxw) !important;
    margin-inline: auto !important;
  }

  /* le conteneur texte (ton io-copy) */
  .io-section .io-copy{
    width: 100% !important;
  }

  /* titre bleu + espace avant photo */
  .io-section .io-copy .io-title,
  .io-section .io-copy .io-title .elementor-heading-title{
    font-size: var(--io-pp-title-size) !important;
  }

  .io-section .io-copy .io-title{
    margin: 0 0 var(--io-pp-gap-title-to-photo) 0 !important;
  }

  /* photo */
  .io-section .io-picture{
    width: 100% !important;
    max-width: var(--io-pp-photo-maxw) !important;
    margin: 0 0 var(--io-pp-gap-photo-to-text) 0 !important;
  }

  .io-section .io-photo-card{
    width: 100% !important;
    aspect-ratio: var(--io-pp-photo-ratio) !important;
  }

  /* paragraphes (écarts) */
  .io-section .io-copy .io-text,
  .io-section .io-copy .io-text p{
    line-height: var(--io-pp-line) !important;
  }

  .io-section .io-copy .io-text p{
    margin: 0 0 var(--io-pp-p-gap) 0 !important;
  }

  /* CTA services (si présent) */
  .io-section .io-services-cta{
    width: 100% !important;
    margin-top: var(--io-pp-cta-top) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--io-pp-cta-gap) !important;
  }

  .io-section .io-services-cta .io-btn-base{
    min-height: var(--io-pp-btn-minh) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* -----------------------------------------
     3) PER-PAGE TUNING (iPad portrait)
     -> Modifie ici uniquement ce dont tu as besoin
     ----------------------------------------- */
@media (max-width: 1024px) and (orientation: portrait){

  /* Le cadre */
  #accueil .io-picture-main{
    aspect-ratio: 1 / 0.9 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Si l'image est un BACKGROUND Elementor */
  #accueil .io-picture-main{
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Si l'image est un IMG Elementor */
  #accueil .io-picture-main img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* Wrappers Elementor fréquents */
  #accueil .io-picture-main .elementor-widget-container,
  #accueil .io-picture-main .elementor-widget-image,
  #accueil .io-picture-main .elementor-image{
    height: 100% !important;
  }
}





		
  /* === Pages “chapitres” === */
  #atelier{
    --io-pp-photo-ratio: 4 / 3;
    --io-pp-photo-maxw: 100%;
  }

  #showroom{
    --io-pp-photo-ratio: 16 / 9;   /* souvent mieux pour photos showroom */
    --io-pp-gap-photo-to-text: 0.9rem;
	
	  
  }

  #apropos{
    --io-pp-photo-ratio: 4 / 5;    /* portrait */
    --io-pp-photo-maxw: 520px;     /* réduit la place de la photo */
    --io-pp-gap-title-to-photo: 0.9rem;
  }

  #domicile{
    --io-pp-photo-ratio: 16 / 10;
	--io-pp-photo-maxw: 520px;
  }

  /* === Pages services === */
  #service-reglage{
    --io-pp-photo-ratio: 16 / 10;
    --io-pp-cta-top: 1rem;
	--io-pp-photo-maxw: 70%;
  }

  #service-reparation{
    --io-pp-photo-ratio: 16 / 10;
	--io-pp-photo-maxw: 70%;  
  }

  #service-fabrication{
    --io-pp-photo-ratio: 16 / 9;
	--io-pp-photo-maxw: 65%;  
  }

  #service-vente{
    --io-pp-photo-ratio: 16 / 9;
  }
}


/* =========================================================
   I/O — iPhone PORTRAIT MASTER
   Pages concernées :
   #atelier #showroom #apropos #domicile
   #service-reglage #service-reparation #service-fabrication #service-vente
   Objectif :
   - stack très lisible
   - moins d’air, CTA toujours confort
   - réglages par page via variables
   ========================================================= */

@media (max-width: 767px) and (orientation: portrait){

  /* -----------------------------------------
     1) DEFAULTS iPhone PORTRAIT
     ----------------------------------------- */
  :root{
    --io-mp-maxw: 680px;

    --io-mp-gap-chapter-to-grid: 1rem;
    --io-mp-gap-inside: 0.85rem;

    --io-mp-gap-title-to-photo: 0.7rem;
    --io-mp-gap-photo-to-text: 0.5rem;

    --io-mp-p-gap: 0.7rem;
    --io-mp-line: 1.50;

    --io-mp-photo-ratio: 1 / 1;   /* iPhone = portrait sexy */
    --io-mp-photo-maxw: 100%;

    --io-mp-cta-gap: 10px;
    --io-mp-cta-top: 1rem;
    --io-mp-btn-minh: 46px;

    --io-mp-title-size: 26px;     /* si besoin */
  }

  /* -----------------------------------------
     2) APPLY — règles communes
     ----------------------------------------- */

  .io-section .io-chapter-title{
    margin-bottom: var(--io-mp-gap-chapter-to-grid) !important;
  }

  .io-section .io-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--io-mp-gap-inside) !important;

    max-width: var(--io-mp-maxw) !important;
    margin-inline: auto !important;
  }

  .io-section .io-copy{
    width: 100% !important;
  }

  .io-section .io-copy .io-title,
  .io-section .io-copy .io-title .elementor-heading-title{
    font-size: var(--io-mp-title-size) !important;
  }

  .io-section .io-copy .io-title{
    margin: 0 0 var(--io-mp-gap-title-to-photo) 0 !important;
  }

  .io-section .io-picture{
    width: 100% !important;
    max-width: var(--io-mp-photo-maxw) !important;
    margin: 0 0 var(--io-mp-gap-photo-to-text) 0 !important;
  }

  .io-section .io-photo-card{
    width: 100% !important;
    aspect-ratio: var(--io-mp-photo-ratio) !important;
  }

  .io-section .io-copy .io-text p{
    margin: 0 0 var(--io-mp-p-gap) 0 !important;
    line-height: var(--io-mp-line) !important;
  }

  /* CTA services : full width */
  .io-section .io-services-cta{
    width: 100% !important;
    margin-top: var(--io-mp-cta-top) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--io-mp-cta-gap) !important;
  }

  .io-section .io-services-cta .io-btn-base{
    width: 100% !important;
    min-height: var(--io-mp-btn-minh) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* -----------------------------------------
     3) PER-PAGE TUNING (iPhone portrait)
     ----------------------------------------- */
	#accueil{
		--io-mp-photo-ratio: 4 / 5;
	}
  #atelier{
    
	/* voir FIX plus bas*/
}

  #showroom{
  }

  #apropos{
  }

  #domicile{
  }

  /* Services : souvent longs -> photo moins haute */
  #service-reglage{
	  }

  #service-reparation{
  }

  #service-fabrication{
	
  }

  #service-vente{
   
  }
}

/* =========================================================
   FIX Elementor — iPad portrait padding fantôme (64px)
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){

  body:not(.elementor-editor-active) .e-con{
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
	  --container-default-padding-bottom: 0px !important;
  }

}

/* =========================================================
   FIX Elementor — iPhone portrait photo Atelier nouvelle class .io-picture--atelier
   ========================================================= */

@media (max-width: 767px){

  /* IMPORTANT :
     On NE force plus un ratio par défaut sur .io-picture
     (c'est ça qui créait des grands espaces sur d'autres pages). */

  /* EXCEPTION : photo atelier (1/1) — uniquement sur ce container */
  .io-picture.io-picture--atelier{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Wrappers Elementor : on les laisse suivre le cadre sans créer de hauteur parasite */
  .io-picture.io-picture--atelier > .e-con-inner,
  .io-picture.io-picture--atelier .elementor-widget-container,
  .io-picture.io-picture--atelier .elementor-image,
  .io-picture.io-picture--atelier .elementor-widget-image{
    height: 100% !important;
    min-height: 0 !important;
  }

	/* =======================================================================================================
   FIX Elementor — iPhone portrait photo 16/19 rempli sur du 1/1 .io-picture--square
   ======================================================================================================= */
  @media (max-width: 767px){

  /* 1) Cadre carré */
  .io-picture.io-picture--square{
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* 2) Important : les wrappers doivent pouvoir remplir le cadre */
  .io-picture.io-picture--square .elementor-widget-container,
  .io-picture.io-picture--square .elementor-image,
  .io-picture.io-picture--square .elementor-widget-image{
    height: 100% !important;
  }

  /* 3) Crop garanti : l'image est "plaquée" dans le cadre */
  .io-picture.io-picture--square img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}

	
/*======================================================================================================
   FIX Elementor — iPhone portrait titre accueil
   ======================================================================================================= */

@media (max-width: 767px){

  /* Titre au-dessus : on vise le texte réel */
  .io-main-title,
  .io-main-title .elementor-heading-title,
  .io-main-title *{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: center !important;
  }

  .io-main-title .elementor-heading-title{
    font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
    line-height: 1.15 !important;
    max-width: 22ch !important;
    margin: 0 auto 0.75rem !important;
  }

  /* Titre sous photo */
.io-services-line .elementor-heading-title{
	font-size: clamp(0.8rem, 5.5vw, 1rem) !important;
    line-height: 1.15 !important;
    max-width: 22ch !important;
    margin: 0 auto 0.1rem !important;
  }

  /* Texte "Découvrir" */
  .io-text-decouvrir,
  .io-text-decouvrir *{
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-top: 0rem !important;
    text-align: center !important;
    opacity: 0.8 !important;
    white-space: normal !important;
	  margin-bottom:0rem;
  }
}

/*======================================================================================================
   FIX Elementor — Contact Card
   ======================================================================================================= */
:root{
  --io-gap-card: 18px;
}

@media (max-width: 1024px){
  :root{
    --io-gap-card: 70px; /* iPad */
  }
}

@media (max-width: 767px){
  :root{
    --io-gap-card: 12px; /* iPhone */
  }
}
	
@media (max-width: 1024px){
	.contact-card{
  margin-top: var(--io-gap-card);
  gap: var(--io-gap-card);
}
}

@media (max-width: 767px){	
	.contact-card{
  margin-top: var(--io-gap-card);
  gap: var(--io-gap-card);
}
}



/* ============================================================================
   Vignettes services : enlever le "bord" blanc parasite autour des images
   ============================================================================= */

:root{
  --io-bg-madcat-mat: #fff; /* ajuste ici si tu changes ton fond #f4f2eb; */
}
body{
  background: var(--io-bg-madcat-mat);
}
/* Camouflage des fonds blancs Elementor autour des images (cartes Accueil) */
.io-cards-section,
.io-cards-section .elementor-widget-wrap,
.io-cards-section .elementor-widget-container,
.io-cards-section .elementor-widget-image,
.io-cards-section figure,
.io-cards-section .wp-caption {
  background: var(--io-bg-madcat-mat) !important;
}
/* La carte reste blanche */
.io-cards-section > div{
  background: #fff !important;
}

/* Mais tout ce qui entoure l'image devient couleur du fond */
.io-cards-section .elementor-widget-image,
.io-cards-section .elementor-widget-image .elementor-widget-container,
.io-cards-section figure,
.io-cards-section .wp-caption{
  background: var(--io-bg-madcat-mat) !important;
}

	/*============================================================
	 espace entre les vignettes version iphone
	============================================================*/
@media (max-width: 767px) {
  .io-cards-section > div {
    margin-bottom: 20px;
  }
}

	/* ================================
   Tarifs – Bloc avec bordure Madcat au hover
   ================================ */

.io-tarifs-block {
  position: relative;
  background: #fff;
  border-radius: 18px;

  /* Bordure "fantôme" au repos */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);

  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

/* Hover / focus : signature Madcat */
@media (hover: hover) {
  .io-tarifs-block:hover {
    box-shadow:
      inset 0 0 0 1px rgba(212, 175, 55, 0.9), /* Madcat */
      0 10px 30px rgba(0,0,0,0.06);

    transform: translateY(-2px);
  }
}

/* Mobile : focus visible au tap */
.io-tarifs-block:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.9),
    0 10px 30px rgba(0,0,0,0.06);
}


/* =========================================================
   9) DEBUG MODE (active avec body.io-debug)
   ========================================================= */

body.io-debug *{ outline-offset: -2px; }

body.io-debug .io-section{
  background: rgba(255,0,0,0.06) !important;
  outline: 2px solid rgba(255,0,0,0.55) !important;
  position: relative;
}

body.io-debug .io-chapter-title{
  background: rgba(255,215,0,0.16) !important;
  outline: 2px solid rgba(255,215,0,0.85) !important;
  position: relative;
}

body.io-debug .io-grid{
  background: rgba(0,255,0,0.08) !important;
  outline: 2px solid rgba(0,160,0,0.65) !important;
  position: relative;
}

body.io-debug .io-inner-section{
  background: rgba(0,120,255,0.08) !important;
  outline: 2px solid rgba(0,120,255,0.65) !important;
  position: relative;
}

body.io-debug .io-picture,
body.io-debug .io-main-picture{
  background: rgba(186,85,211,0.10) !important;
  outline: 2px solid rgba(186,85,211,0.75) !important;
  position: relative;
}

body.io-debug img{
  outline: 2px dashed rgba(0,0,0,0.35) !important;
}

/* étiquettes */
body.io-debug .io-section::before,
body.io-debug .io-chapter-title::before,
body.io-debug .io-grid::before,
body.io-debug .io-inner-section::before,
body.io-debug .io-picture::before,
body.io-debug .io-main-picture::before{
  position: absolute;
  top: 6px; left: 6px;
  font: 11px/1.2 monospace;
  padding: 2px 6px;
  border-radius: 6px;
  color: #000;
  background: rgba(255,255,255,0.85);
  z-index: 9999;
  pointer-events: none;
}

body.io-debug .io-section::before{ content: "SECTION (.io-section)"; }
body.io-debug .io-chapter-title::before{ content: "CHAPITRE TITLE (.io-chapter-title)"; }
body.io-debug .io-grid::before{ content: "GRID (.io-grid)"; }
body.io-debug .io-inner-section::before{ content: "TEXT COLUMN (.io-inner-section)"; }
body.io-debug .io-picture::before{ content: "IMAGE WRAP (.io-picture)"; }
body.io-debug .io-main-picture::before{ content: "HERO IMAGE CARD (.io-main-picture)"; }