/* L'Oustal — responsive public, v4.1. Loaded after page styles. */
html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
img{height:auto}
*,*::before,*::after{box-sizing:border-box}
input,select,textarea,button{max-width:100%;font:inherit}
input,textarea,select{min-width:0}
@media(max-width:1050px){
 header{min-width:0}
 header .brand{min-width:0}
 header .brand-text{min-width:0}
 header .brand-text small{letter-spacing:.17em}
 header .mobile-menu{display:block!important;min-height:44px;width:auto;max-width:185px;padding:10px 12px;border:1px solid rgba(47,49,42,.2);border-radius:12px;background:#fbf8f2;color:#303229;font-size:14px}
 header nav{display:none!important}
 header .phone{display:none!important}
 .cards,.grid3,.services,.filters,.steps,.feature-strip{min-width:0}
 .cards>*,.grid3>*,.services>*,.filters>*,.steps>*,.feature-strip>*{min-width:0}
}
@media(max-width:680px){
 header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:70px!important;height:auto!important;padding:12px 16px!important}
 header .brand{flex:0 1 auto;gap:9px;white-space:normal}
 header .logo{font-size:37px}
 header .brand-text{font-size:13px;letter-spacing:.09em}
 header .brand-text small{font-size:8px}
 header .mobile-menu{flex:0 0 auto;max-width:142px;font-size:13px}
 .hero{min-height:min(680px,calc(100svh - 70px));padding:60px 20px 65px}
 .hero-content{width:100%;min-width:0}
 .hero h1{font-size:clamp(37px,11vw,58px);overflow-wrap:break-word;line-height:1.03}
 .hero p{font-size:clamp(15px,4vw,18px);line-height:1.55}
 .hero .watermark{font-size:55vw}
 .home-actions,.buttons,.wizard-actions{display:flex;flex-wrap:wrap;gap:10px}
 .home-actions>a,.wizard-actions>button{max-width:100%;white-space:normal;text-align:center;justify-content:center}
 .section,.page-head{padding:38px 18px}
 .section h2,.story-copy h2,.page-head h1{font-size:clamp(30px,8vw,42px);overflow-wrap:break-word}
 .cards,.grid3,.services,.filters,.metrics,.form-grid,.feature-strip,.steps,.contact-grid,.property-layout,.split,.agency-showcase,.story-card,.histoire-card,.detail,.hero,.diagnostics,.nearby-list,.loan-grid{grid-template-columns:minmax(0,1fr)!important}
 .card,.panel,.summary,.section,.content-block,.story-copy,.commitment-card{min-width:0}
 .summary,.panel,.content-block,.story-copy,.commitment-card{padding:clamp(18px,5vw,28px)}
 .wrap{padding:28px 16px 55px}
 .main-photo,.photo{height:auto;min-height:250px;aspect-ratio:4/3}
 .gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
 .gallery img{height:auto;aspect-ratio:4/3;object-fit:cover}
 .amenities{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .property-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .property-fact{padding:12px 10px;overflow-wrap:anywhere}
 .feature-strip div{border-right:0}
 .wizard-progress{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}
 .wizard-progress button{flex:0 0 auto;min-width:55px;scroll-snap-align:start}
 .cta{margin-inline:16px}
 footer{min-width:0}
}
@media(max-width:380px){
 header{padding:10px 12px!important}
 header .logo{font-size:31px}
 header .brand-text{font-size:11px}
 header .mobile-menu{max-width:120px;padding:9px 6px}
 .hero h1{font-size:clamp(34px,10vw,43px)}
 .gallery{grid-template-columns:1fr 1fr!important}
 .section,.page-head{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
\n\n

/* V5.37 — navigation iPhone native + carrousels de bulles mobiles */
@media(max-width:680px){
  header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    justify-content:stretch!important;
    column-gap:6px!important;
    min-height:64px!important;
    padding:9px 10px!important;
  }
  header .brand{
    min-width:0!important;
    width:auto!important;
    overflow:hidden!important;
    flex:none!important;
  }
  header .logo{font-size:34px!important;flex:0 0 auto}
  header .brand-text{
    min-width:0!important;
    font-size:11px!important;
    letter-spacing:.07em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  header .brand-text small{font-size:6.5px!important;letter-spacing:.15em!important}
  header .mobile-menu{
    display:block!important;
    width:64px!important;
    max-width:64px!important;
    min-width:64px!important;
    min-height:38px!important;
    padding:6px 4px!important;
    font-size:11px!important;
    border-radius:14px!important;
    text-overflow:ellipsis!important;
  }
  header .loustal-lang-switch{
    margin-left:0!important;
    padding:4px 5px!important;
    min-height:38px!important;
    max-width:56px!important;
    overflow:hidden!important;
  }
  header .loustal-lang-switch>[data-editor-key=language_label]{display:none!important}
  header .loustal-lang-switch select{max-width:31px!important;font-size:10px!important}

  /* Toutes les pages restent dans la largeur utile de l'iPhone. */
  .contact-grid,.property-layout,.split,.form-grid,.filters,.metrics,.services,.cards,.feature-strip{
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
  }
  .contact-grid>*,.property-layout>*,.split>*,.form-grid>*,.filters>*,.metrics>*,.services>*,.cards>*,.feature-strip>*{
    min-width:0!important;
    max-width:100%!important;
  }
  #confier .section,#travaux .section,#methode .section{overflow:visible!important}
  #confier .choice{width:100%!important;max-width:100%!important}
  #confier details,#confier .detail,#confier form,#confier .wizard-step{max-width:100%!important;min-width:0!important}
  #confier input,#confier select,#confier textarea,#travaux input,#travaux select,#travaux textarea{width:100%!important;max-width:100%!important}

  /* Bulles de la méthode : défilement horizontal naturel au doigt. */
  #methode .method{
    display:flex!important;
    gap:10px!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin-right:-20px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 20px 14px 0!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  #methode .method::-webkit-scrollbar{display:none}
  #methode .method span{
    flex:0 0 min(78vw,310px)!important;
    min-width:min(78vw,310px)!important;
    width:auto!important;
    padding:18px 16px!important;
    scroll-snap-align:start;
  }

  /* Étapes Accompagnement travaux : 1 à 7 en carrousel horizontal. */
  #travaux .steps{
    display:flex!important;
    gap:10px!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin-right:-20px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 20px 14px 0!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  #travaux .steps::-webkit-scrollbar{display:none}
  #travaux .steps>div{
    flex:0 0 min(62vw,245px)!important;
    min-width:min(62vw,245px)!important;
    width:auto!important;
    max-width:none!important;
    scroll-snap-align:start;
  }

  /* Expertise technique / Réseau de confiance : défilement droite-gauche. */
  #travaux .grid2{
    display:flex!important;
    gap:12px!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin-right:-20px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 20px 16px 0!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  #travaux .grid2::-webkit-scrollbar{display:none}
  #travaux .grid2>.choice{
    flex:0 0 min(82vw,330px)!important;
    min-width:min(82vw,330px)!important;
    width:auto!important;
    max-width:none!important;
    scroll-snap-align:start;
  }

  /* Les autres grilles de cartes internes restent lisibles en colonne. */
  #methode .grid3{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
  #methode .grid3>*{min-width:0!important;max-width:100%!important}

  .page-head{width:100%!important;max-width:100%!important;overflow:hidden!important}
  .page-head h1{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    hyphens:auto;
    line-height:1.05!important;
  }
  .page-head p,.choice p,.choice h2,.choice h3,summary{overflow-wrap:anywhere}
  .cta{width:auto!important;max-width:calc(100% - 32px)!important}
  footer{grid-template-columns:minmax(0,1fr)!important;text-align:center!important;padding:26px 16px!important}
  footer .legal-links{justify-content:center!important}
}
@media(max-width:380px){
  header{grid-template-columns:minmax(0,1fr) auto!important}
  header .loustal-lang-switch{display:none!important}
  header .mobile-menu{width:58px!important;min-width:58px!important;max-width:58px!important;font-size:10px!important}
  header .logo{font-size:30px!important}
  header .brand-text{font-size:9.5px!important}
}


/* V5.38 — correctif cache iPhone + menu minimal + carrousels tactiles fiables */
@media(max-width:680px){
  header .mobile-menu{
    width:56px!important;
    min-width:56px!important;
    max-width:56px!important;
    min-height:36px!important;
    padding:5px 2px!important;
    font-size:10px!important;
    line-height:1!important;
    border-radius:12px!important;
  }

  /* Force un vrai rail horizontal sur iOS/Safari. */
  #methode .method,
  #travaux .steps,
  #travaux .grid2{
    display:flex!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    overflow-x:scroll!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    position:relative;
    width:calc(100vw - 18px)!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:calc(18px - 100vw)!important;
    padding-right:18px!important;
  }
  #methode .method::-webkit-scrollbar,
  #travaux .steps::-webkit-scrollbar,
  #travaux .grid2::-webkit-scrollbar{display:none!important}

  #methode .method>span{
    flex:0 0 76vw!important;
    min-width:76vw!important;
    max-width:300px!important;
    scroll-snap-align:start!important;
  }
  #travaux .steps>div{
    flex:0 0 58vw!important;
    min-width:58vw!important;
    max-width:235px!important;
    scroll-snap-align:start!important;
  }
  #travaux .grid2>.choice{
    flex:0 0 80vw!important;
    min-width:80vw!important;
    max-width:330px!important;
    scroll-snap-align:start!important;
  }
}
@media(max-width:380px){
  header .mobile-menu{width:54px!important;min-width:54px!important;max-width:54px!important;font-size:9.5px!important}
}


/* V5.39 — inertie iPhone naturelle + proportions menu/langue */
@media(max-width:680px){
  header{
    grid-template-columns:minmax(0,1fr) 78px 78px!important;
    column-gap:7px!important;
  }
  header .mobile-menu{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    min-height:40px!important;
    padding:6px 7px!important;
    font-size:11px!important;
    line-height:1.1!important;
    border-radius:14px!important;
  }
  header .loustal-lang-switch{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    min-height:40px!important;
    padding:5px 7px!important;
    border-radius:14px!important;
    justify-content:center!important;
    gap:4px!important;
  }
  header .loustal-lang-switch select{
    max-width:34px!important;
    font-size:11px!important;
  }

  /* Défilement 100 % natif Safari : un geste fort peut parcourir plusieurs cartes. */
  #methode .method,
  #travaux .steps,
  #travaux .grid2{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scroll-behavior:auto!important;
    scroll-snap-type:none!important;
    overscroll-behavior-x:auto!important;
  }
  #methode .method>span,
  #travaux .steps>div,
  #travaux .grid2>.choice{
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
}
@media(max-width:380px){
  header{grid-template-columns:minmax(0,1fr) 70px 70px!important;column-gap:5px!important}
  header .mobile-menu{width:70px!important;min-width:70px!important;max-width:70px!important;font-size:10.5px!important}
  header .loustal-lang-switch{display:inline-flex!important;width:70px!important;min-width:70px!important;max-width:70px!important}
  header .loustal-lang-switch select{max-width:30px!important;font-size:10px!important}
}