/* Global box sizing to avoid overflow calculations */
*, *::before, *::after { box-sizing: border-box; }
:root {
  /* Palette & surfaces */
  --sx-color-accent:#b48c6e;
  --sx-color-accent-rgb:180,140,110;
  --sx-color-bg-pill:#f7f7f7;
  --sx-color-text:#222;
  --sx-color-text-light:#666;
  --sx-color-text-muted:#888;
  --sx-color-border: #f5ede6;
  --sx-color-focus-ring: #e0e0e0;
  /* Navigation */
  --sx-nav-pill-radius:2rem;
  --sx-nav-pill-padding-y:0.3rem;
  --sx-nav-pill-padding-x:0.5rem;
  --sx-nav-link-radius:2rem;
  --sx-nav-link-font-size:1.08rem;
  --sx-nav-link-padding-y:0.7rem;
  --sx-nav-link-padding-x:2.2rem;
  /* Mobile nav */
  --sx-nav-mobile-bg:rgba(255,255,255,0.55);
  --sx-nav-mobile-blur:10px;
  --sx-nav-mobile-gap:6px;
  --sx-nav-mobile-link-fs:0.82rem;
  --sx-nav-mobile-link-pad-y:0.55rem;
  --sx-nav-mobile-link-pad-x:1rem;
  /* Animation */
  --sx-underline-height:2px;
  --sx-transition-fast:0.2s;
  --sx-transition-med:0.25s;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;           /* déjà nécessaire pour éviter le scroll horizontal */
  /* Masquer la barre de défilement verticale tout en conservant le scroll */
  -ms-overflow-style: none;      /* IE / Edge legacy */
  scrollbar-width: none;         /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }

/* Align header to body width (avoid 100vw horizontal scroll issues) */
body > header.header-container { width:100%; }
#header-top { width:100%; max-width:1200px; margin-inline:auto; padding-inline:1rem; }


/* --- Entête moderne et responsive Snapixel --- */
body > header.header-container {
  /* Full-bleed width: use 100vw and center via negative margins so background spans entire viewport even if parent has a max-width */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:180px;
  /* Single background layer: full-bleed photograph */
  background: url('../../Images/fleurmariage.jpg') center center / cover no-repeat;
  box-shadow:0 4px 16px rgba(180,140,110,0.10);
  border-bottom:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:sticky;
  top:0;
  z-index:10000;
  padding:2rem 0 1.5rem 0;
  isolation:isolate; /* so overlay pseudo-element sits beneath content */
}
/* Subtle readability overlay (gradient) */
body > header.header-container::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 55%, rgba(0,0,0,0.22) 100%);
  pointer-events:none;
  z-index:-1;
}

#header-top {
  line-height:1.15;
  -webkit-text-size-adjust:100%;
  font-family:'Montserrat', sans-serif;
  color:#6d5c4d;
  position:relative;
  z-index:2;
  max-width:1200px;
  width:100%;
  margin:0;
  gap:0.1rem;
  padding:0.05rem 0.1rem 0.05rem 0.1rem;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  padding-bottom:15px;
}

#logoImg {
  height: 76px;
  width: 76px;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  border-radius: 18px;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(180,140,110,0.08);
  border: 1px solid #f5ede6;
  transition: box-shadow 0.3s, transform 0.3s;
}
#logoImg:hover {
  box-shadow: 0 4px 16px rgba(180,140,110,0.18);
  transform: scale(1.05);
}

.site-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  color: #b48c6e;
  font-weight: 700;
  margin-left: 1.2rem;
  margin-right: 1.2rem;
  text-align: center;
}

#mainNav { width:100%; max-width:1200px; margin:0 auto; z-index:1; padding-top:0.5rem; display:flex; justify-content:center; }
#mainNav ul {
  display:flex;
  flex-direction:row;
  gap:0.5rem;
  justify-content:center;
  align-items:center;
  list-style:none;
  padding:var(--sx-nav-pill-padding-y) var(--sx-nav-pill-padding-x);
  margin:0 auto;
  background:var(--sx-color-bg-pill);
  border-radius:var(--sx-nav-pill-radius);
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
#mainNav ul li a {
  background:none;
  border:none;
  outline:none;
  font-family:'Montserrat', Arial, sans-serif;
  font-size:var(--sx-nav-link-font-size);
  color:var(--sx-color-text-muted);
  padding:var(--sx-nav-link-padding-y) var(--sx-nav-link-padding-x);
  border-radius:var(--sx-nav-link-radius);
  cursor:pointer;
  transition:background var(--sx-transition-fast), color var(--sx-transition-fast);
  margin:0 0.2rem;
  font-weight:700;
  text-decoration:none;
  box-shadow:none;
  position:relative;
}
/* Style lien actif (sera ajouté via script) */
#mainNav ul li a.is-active { background:rgba(var(--sx-color-accent-rgb),0.18); color:var(--sx-color-text); }
#mainNav ul li a.is-active::after { transform:scaleX(1); }

#mainNav ul li a:focus {
  background: #fff;
  color: #222;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border: 1px solid #e0e0e0;
}

#mainNav ul li a:hover:not(.is-active),
#mainNav ul li a:focus:not(.is-active) { background:#ececec; color:#444; }

#MenuToggle:hover,
#MenuToggle:focus {
  background: #a06e4c;
  box-shadow: 0 4px 16px rgba(180,140,110,0.18);
}

@media (max-width: 900px) {
  .header-top,
  #mainNav {
    max-width: 98vw;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #mainNav ul {
    gap: 0.3rem;
    padding: 0.2rem 0.2rem;
    font-size: 0.98rem;
  }
  #mainNav ul li a {
    font-size: 0.98rem;
    padding: 0.5rem 1.2rem;
    border-radius: 1.2rem;
  }
}

/* ===== Mobile: header image full width/height with top nav ===== */
@media (max-width:700px) {
  body > header.header-container {
    position:sticky;
    top:0;
    padding:calc(env(safe-area-inset-top,0px) + 0.3rem) 0 0 0;
    min-height:auto;
    justify-content:flex-start;
  }
  #header-top { max-width:100%; padding-left:0.8rem; padding-right:0.8rem; justify-content:space-between; align-items:center; padding-bottom:4px; }
  #logoImg { height:46px; width:46px; padding:0.2rem; border-radius:10px; }
  /* Full-bleed nav container */
  #mainNav {
    position:relative;
    width:100vw; /* span entire viewport */
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0;
    margin-top:0;
    margin-bottom:0;
  }
  #mainNav ul {
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0;
    /* safe-area aware horizontal padding */
    padding:4px max(8px, env(safe-area-inset-left,0px)) 4px max(8px, env(safe-area-inset-right,0px));
    gap:4px;
    /* Semi-transparent glass background */
    background:rgba(255,255,255,0.55);
    /* Slight border + inner shadow for contrast on very light image zones */
    border-top:1px solid rgba(255,255,255,0.7);
    border-bottom:none;
    box-shadow:none;
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border-radius:0;
    overflow:hidden;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #mainNav ul::-webkit-scrollbar { display:none; }
  #mainNav > ul > li { flex:0 0 auto; }
  #mainNav ul li a {
    background:transparent;
    color:#2d2d2d;
    padding:0.55rem 1rem;
    min-height:42px;
    font-size:1rem;
    font-weight:700;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }
  #mainNav ul li a:focus, #mainNav ul li a.active, #mainNav ul li a.is-active { background:rgba(var(--sx-color-accent-rgb),0.30); color:#221f1f; }
  #mainNav ul li a::after { display:none; }
  body, #pageContent, main[role="main"], body > main { padding-bottom:0; }
}

/* iPhone 14 Pro and similar widths: keep the 3 footer links on a single line */
@media (max-width: 420px) {
  #mainFooter { padding-left: 0.6rem; padding-right: 0.6rem; }
  /* Allow wrapping instead of forcing one long line that overflows on iPhone widths */
  #mainFooter > p { font-size: 0.82rem; white-space: normal; }
  #mainFooter > p a { margin: 0 0.15rem; }
}
@media (max-width: 430px) {
  #mainNav ul li a { font-size: 0.92rem; padding: 0.35rem 0.5rem; }
}
@media (max-width: 360px) {
  #mainNav ul li a { font-size: 0.85rem; padding: 0.32rem 0.45rem; }
}

/* ===== Menu alternatif (desktop & tablettes ≥701px) : épuré avec soulignement glissant ===== */
@media (min-width: 701px) {
  /* Conteneur desktop/tablette */
  #mainNav { padding-top: 0.25rem; max-width: 1200px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  #mainNav ul {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    gap: 0.2rem;
    padding: 0;
  }
  #mainNav > ul > li { padding-left: 0; padding-right: 0; }

  /* Liens: texte simple + underline animé (mêmes tailles que desktop) */
  #mainNav ul li a { background:transparent; color:var(--sx-color-text-light); font-size:var(--sx-nav-link-font-size); padding:0.5rem 1rem; border-radius:0; font-weight:600; position:relative; transition:color var(--sx-transition-fast); }
  #mainNav ul li a::after { content:""; position:absolute; left:1rem; right:1rem; bottom:-6px; height:var(--sx-underline-height); background:var(--sx-color-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--sx-transition-med) ease; opacity:0.95; }
  #mainNav ul li a:hover,
  #mainNav ul li a:focus,
  #mainNav ul li a.active,
  #mainNav ul li a.is-active { color:var(--sx-color-text); background:transparent; }
  #mainNav ul li a:hover::after,
  #mainNav ul li a:focus::after,
  #mainNav ul li a.active::after,
  #mainNav ul li a.is-active::after { transform:scaleX(1); }
}

/* Logo un peu plus compact sur grand écran */
#logoImg { height: 60px; width: 60px; padding: 0.35rem; border-radius: 14px; }

/* Footer phone link styling */
#mainFooter .footer-phone a {
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:600;
  color:var(--sx-color-accent);
  text-decoration:none;
  padding:0.25rem 0.55rem;
  border:1px solid rgba(var(--sx-color-accent-rgb),0.35);
  border-radius:12px;
  backdrop-filter:saturate(160%) blur(4px);
  -webkit-backdrop-filter:saturate(160%) blur(4px);
  background:rgba(255,255,255,0.6);
  transition:background var(--sx-transition-fast), color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  line-height:1.1;
}
#mainFooter .footer-phone .phone-icon { display:inline-flex; width:18px; height:18px; color:var(--sx-color-accent); opacity:.9; }
#mainFooter .footer-phone .phone-icon svg { width:100%; height:100%; }
#mainFooter .footer-phone .phone-text { font-variant-numeric:tabular-nums; letter-spacing:.5px; display:inline-flex; align-items:center; }
#mainFooter .footer-phone .phone-text .part { display:inline-block; }
/* Horaires de disponibilité téléphonique */
#mainFooter .footer-phone .phone-hours,
.footer-phone .phone-hours {
  display:block;
  font-size:0.75rem;
  font-weight:500;
  color:#6d5c4d;
  margin-top:0.3rem;
  opacity:0.85;
}
/* Screen-reader only utility (in case not defined elsewhere) */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
#mainFooter {
  width:100%;
  margin:0 auto;
  padding:1.4rem 1rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  background:#fff;
  border-top:1px solid #f5ede6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.9rem;
  box-sizing:border-box;
}
#mainFooter #contact-section { text-align:center; max-width:720px; }
#mainFooter #contact-section p { margin-top:0.25rem; }
#mainFooter #contact-section ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:0.85rem; }
#mainFooter > p {
  max-width:920px;
  text-align:center;
  font-size:0.82rem;
  line-height:1.35;
  white-space:normal !important; /* override any earlier nowrap */
  overflow-wrap:anywhere;
  margin:0;
  padding:0 .5rem;
}
#mainFooter > p a { display:inline-block; margin:0 .28rem; }
@media (max-width:560px){
  #mainFooter > p { font-size:0.79rem; }
  #mainFooter > p a { margin:0 .22rem; }
}
@media (max-width:430px){
  #mainFooter > p { font-size:0.76rem; }
  #mainFooter > p a { font-size:0.76rem; }
}
@media (max-width:380px){
  #mainFooter > p { font-size:0.72rem; }
}

/* Reduce risk of horizontal scroll caused by 100vw + scrollbar compensation */
body, html { overscroll-behavior-y: contain; }
#mainFooter .footer-phone a:hover,#mainFooter .footer-phone a:focus {
  background:rgba(var(--sx-color-accent-rgb),0.12);
  color:var(--sx-color-text);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  outline:none;
}

/* --- Tablettes (iPad & similaires) : décoller le logo du bord gauche --- */
@media (min-width:701px) and (max-width:1200px) {
  #header-top { padding-left: 2rem; padding-right: 2rem; }
  #logoImg { margin-left: 0.4rem; }
  /* Si un logout button est présent, on équilibre l’espace droit */
  .btn-logout { margin-right: 0.4rem; }
}

/* --- Ordinateurs larges : encore plus d'air sur les côtés --- */
@media (min-width:1201px) {
  #header-top { padding-left: 3rem; padding-right: 3rem; }
  #mainNav { padding-left: 3rem; padding-right: 3rem; }
  #logoImg { margin-left: 0.6rem; }
  .btn-logout { margin-right: 0.6rem; }
}

/* --- Masquer les liens Accueil, Formules et À propos dans le footer sur tablettes et mobiles --- */
@media (max-width: 1024px) {
  #mainFooter > p a[href*="accueil.html"],
  #mainFooter > p a[href*="formules.html"],
  #mainFooter > p a[href*="a_propos.html"] {
    display: none;
  }
}