/* Phase 103 — normalisation responsive globale FR / EN / NL / AR */
:root{
  --page-gutter:clamp(16px,5vw,64px);
  --page-gutter-mobile:clamp(14px,4.5vw,22px);
  --chat-safe-bottom:84px;
}
html{box-sizing:border-box;width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;}
*,*::before,*::after{box-sizing:inherit;min-width:0;}
body{width:100%;max-width:100%;overflow-x:clip;}
main,header,footer,section,article,aside,nav,div{max-width:100%;}
img,picture,video,canvas,iframe,svg{max-width:100%;height:auto;}
img{object-fit:cover;}
p,h1,h2,h3,h4,h5,h6,li,a,button,label,span,strong{overflow-wrap:anywhere;word-break:normal;}
.wrap,.container,.section-inner,.article-wrap{width:100%;margin-inline:auto;}

/* Les grilles ne doivent jamais forcer la largeur de la fenêtre. */
.grid,.pricing-grid,.location-list,.reviews-grid,.whatsapp-grid,.contact-methods,.heritage-gallery,.lineage-photos{min-width:0;}
.grid>* ,.pricing-grid>* ,.location-list>* ,.reviews-grid>* ,.whatsapp-grid>* ,.contact-methods>* ,.heritage-gallery>* ,.lineage-photos>*{min-width:0;max-width:100%;}

/* RTL natif : ordre, alignement et espacements logiques. */
html[dir="rtl"] body{direction:rtl;text-align:right;}
html[dir="rtl"] header,html[dir="rtl"] nav,html[dir="rtl"] main,html[dir="rtl"] footer{direction:rtl;}
html[dir="rtl"] .chatbox{right:auto!important;left:max(12px,env(safe-area-inset-left))!important;}
html[dir="rtl"] .chat-panel{right:auto!important;left:0!important;}
html[dir="rtl"] .article-note{border-left:0!important;border-right:4px solid var(--gold)!important;}

@media (max-width:860px){
  body{padding-bottom:var(--chat-safe-bottom);}
  header{width:100%!important;padding-inline:var(--page-gutter-mobile)!important;}
  main section,main .section,.hero,.landing-hero,.article-body,.khalifat-current,footer{
    width:100%!important;
    max-width:100%!important;
    padding-inline:var(--page-gutter-mobile)!important;
    margin-inline:0!important;
  }
  .wrap,.container,.section-inner,.article-wrap,.heritage-context,.heritage-closing,.khalifat-copy{
    width:100%!important;max-width:100%!important;margin-inline:auto!important;padding-inline:0!important;
  }
  h1,h2,h3,h4,p,li,blockquote,.lead,.section-title,.section-lead,.section-intro,.eyebrow,.eyebrow-line{
    max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  .btn,.whatsapp-card,.contact-method,.card,.price-card,.review-card{max-width:100%;}
  .btn{white-space:normal!important;text-align:center;}
  .portrait,.grid,.location-list{grid-template-columns:minmax(0,1fr)!important;}
  .portrait img{width:100%;height:auto;max-height:520px;}
  .chatbox{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));}
  .chat-panel{
    width:min(360px,calc(100vw - (2 * var(--page-gutter-mobile))))!important;
    max-width:calc(100vw - (2 * var(--page-gutter-mobile)))!important;
    max-height:min(72dvh,620px)!important;
    overflow:auto!important;
  }
}

@media (max-width:520px){
  .pricing-grid,.reviews-grid,.location-list{grid-template-columns:minmax(0,1fr)!important;}
  .whatsapp-grid,.contact-methods{grid-template-columns:minmax(0,1fr)!important;}
  .trustline,.facts{gap:8px;}
  .pill{max-width:100%;}
  .hero h1,.landing-hero h1{font-size:clamp(2rem,10.5vw,3.15rem)!important;line-height:1.08!important;}
  h2,.section-title{font-size:clamp(1.75rem,8vw,2.5rem)!important;line-height:1.15!important;}
}

@media (max-width:430px){
  .lang-flags{gap:6px!important;}
  .lang-flags a{width:40px!important;min-width:40px!important;max-width:40px!important;padding:7px 4px!important;}
  .lang-flags a span,.lang-flags .lang-code{display:none!important;}
  .chat-toggle{width:52px!important;height:52px!important;}
}

@media (max-width:360px){
  :root{--page-gutter-mobile:14px;}
  header{gap:7px!important;}
  .brand{font-size:clamp(18px,6vw,22px)!important;}
  .lang-flags a{width:38px!important;min-width:38px!important;}
  .card,.price-card,.review-card{padding:18px!important;}
}

@media (max-width:320px){
  :root{--page-gutter-mobile:12px;}
  .lang-flags{gap:4px!important;}
  .lang-flags a{width:36px!important;min-width:36px!important;padding-inline:3px!important;}
  .btn{width:100%;margin-inline:0!important;}
}

/* Phase 104 — desktop 100% / portables 1080p et fenêtres intermédiaires
   Objectif : empêcher le menu principal de casser les mots quand la largeur
   disponible est insuffisante, sans toucher au rendu mobile validé. */
@media (min-width:861px) and (max-width:1180px){
  header{
    display:grid!important;
    grid-template-columns:minmax(150px,1fr) auto auto!important;
    align-items:center!important;
    column-gap:14px!important;
    padding:13px clamp(18px,3vw,34px)!important;
    overflow:visible!important;
  }
  header .brand{grid-column:1!important;white-space:nowrap!important;margin:0!important;}
  header>.lang-flags{
    grid-column:2!important;grid-row:1!important;
    display:flex!important;position:static!important;
    width:auto!important;justify-content:flex-end!important;
    gap:7px!important;margin:0!important;padding:0!important;
  }
  header>.lang-flags a{min-width:40px!important;width:40px!important;padding:6px!important;}
  header>.lang-flags .lang-code{display:none!important;}
  header .nav-toggle{
    display:block!important;grid-column:3!important;grid-row:1!important;
    position:relative!important;z-index:140!important;margin:0!important;
  }
  #mainNav{
    display:flex!important;
    position:fixed!important;
    top:calc(var(--ribbon-h,66px) + 64px)!important;
    right:18px!important;left:auto!important;bottom:auto!important;
    width:min(360px,calc(100vw - 36px))!important;max-width:360px!important;
    max-height:calc(100dvh - var(--ribbon-h,66px) - 86px)!important;
    overflow-y:auto!important;
    flex-direction:column!important;align-items:stretch!important;
    gap:0!important;padding:14px 18px!important;
    background:var(--navy-deep)!important;
    border:1px solid rgba(201,162,39,.35)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
    transform:translateY(-10px)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s!important;
    z-index:135!important;
  }
  #mainNav.open{
    transform:translateY(0)!important;opacity:1!important;
    visibility:visible!important;pointer-events:auto!important;
  }
  #mainNav a{
    display:block!important;width:100%!important;padding:10px 4px!important;
    font-size:12px!important;line-height:1.35!important;letter-spacing:.08em!important;
    white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
    border-bottom:1px solid rgba(201,162,39,.12)!important;
  }
  #mainNav a:last-child{border-bottom:0!important;}
  .hero{padding-top:calc(var(--ribbon-h,66px) + 92px)!important;}
  html[dir="rtl"] #mainNav{right:auto!important;left:18px!important;text-align:right!important;}
}

/* Grand écran : le menu reste sur une seule ligne et garde des espacements proportionnés. */
@media (min-width:1181px){
  header{padding-inline:clamp(20px,2.5vw,48px)!important;gap:clamp(12px,1.4vw,24px)!important;}
  #mainNav{gap:clamp(10px,1.25vw,22px)!important;flex-wrap:nowrap!important;align-items:center!important;}
  #mainNav a{font-size:clamp(10px,.82vw,12px)!important;letter-spacing:.07em!important;white-space:nowrap!important;overflow-wrap:normal!important;}
  header>.lang-flags{gap:6px!important;flex:0 0 auto!important;}
  header>.lang-flags a{min-width:48px!important;padding:6px 7px!important;}
  .brand{flex:0 0 auto!important;white-space:nowrap!important;}
}