/* 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;
  /* Animation */
  --sx-underline-height:2px;
  --sx-transition-fast:0.2s;
  --sx-transition-med:0.25s;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;           /* éviter le scroll horizontal (sur body uniquement) */
}
/* Masquer la barre de défilement verticale sur les pages visuelles (accueil, index…)
   Les pages de contenu (guides, légales) réactivent la scrollbar via legal_pages.css */


/* --- 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; }

@media (max-width: 900px) and (min-width: 769px) {
  .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;
  }
}

/* ===== Bouton hamburger (injecté par JS, visible uniquement sur mobile) ===== */
#MenuToggle {
  display:none; /* masqué par défaut (desktop) */
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(var(--sx-color-accent-rgb),0.25);
  border-radius:12px;
  cursor:pointer;
  z-index:10002;
  position:relative;
  transition:background 0.25s, box-shadow 0.25s, border-color 0.25s;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
#MenuToggle:hover,
#MenuToggle:focus-visible {
  background:rgba(255,255,255,1);
  border-color:var(--sx-color-accent);
  box-shadow:0 4px 14px rgba(var(--sx-color-accent-rgb),0.18);
  outline:none;
}
/* Barres du hamburger */
#MenuToggle .toggle-bar {
  display:block;
  width:20px;
  height:2px;
  background:var(--sx-color-accent);
  border-radius:2px;
  transition:transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s, width 0.25s;
  transform-origin:center;
}
/* Transformation hamburger → croix */
#MenuToggle.active .toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#MenuToggle.active .toggle-bar:nth-child(2) { opacity:0; width:0; }
#MenuToggle.active .toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
#MenuToggle.active {
  background:rgba(var(--sx-color-accent-rgb),0.12);
  border-color:var(--sx-color-accent);
}

/* ===== Mobile: header compact + menu toggle overlay ===== */
@media (max-width:768px) {
  body > header.header-container {
    position:sticky;
    top:0;
    padding:calc(env(safe-area-inset-top,0px) + 0.3rem) 0 0.3rem 0;
    min-height:auto;
    justify-content:flex-start;
  }
  #header-top {
    max-width:100%;
    padding-left:1rem;
    padding-right:1rem;
    justify-content:space-between;
    align-items:center;
    padding-bottom:4px;
  }
  #logoImg { height:46px; width:46px; padding:0.2rem; border-radius:10px; }

  /* Afficher le bouton hamburger à gauche */
  #MenuToggle { display:flex; order:-1; }

  /* Menu déroulant — panneau épuré */
  #mainNav {
    position:absolute;
    top:100%;
    left:0.6rem;
    right:auto;
    width:auto;
    min-width:160px;
    max-width:calc(100vw - 1.2rem);
    height:auto;
    background:#fff;
    z-index:10001;
    border-radius:0 0 10px 10px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    border:none;
    padding:0;
    margin:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-4px);
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    display:block;
  }
  #mainNav.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  /* Liste */
  #mainNav ul {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    list-style:none;
    padding:0.6rem 0;
    margin:0;
    background:transparent;
    box-shadow:none;
    border:none;
    border-radius:0;
    width:auto;
  }

  #mainNav > ul > li {
    width:100%;
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  #mainNav.open > ul > li { opacity:1; transform:translateY(0); }
  #mainNav.open > ul > li:nth-child(1) { transition-delay:0.03s; }
  #mainNav.open > ul > li:nth-child(2) { transition-delay:0.06s; }
  #mainNav.open > ul > li:nth-child(3) { transition-delay:0.09s; }
  #mainNav.open > ul > li:nth-child(4) { transition-delay:0.12s; }
  #mainNav.open > ul > li:nth-child(5) { transition-delay:0.15s; }
  #mainNav.open > ul > li:nth-child(6) { transition-delay:0.18s; }

  /* Liens — typographie seule */
  #mainNav ul li a {
    display:block;
    padding:0.6rem 1.5rem;
    font-family:'Montserrat', sans-serif;
    font-size:0.92rem;
    font-weight:500;
    letter-spacing:0.2px;
    color:#5a4a3a;
    text-decoration:none;
    background:transparent;
    border:none;
    border-radius:0;
    transition:color 0.2s;
    position:relative;
    overflow:hidden;
    min-height:0;
    white-space:nowrap;
    text-transform:none;
    width:auto;
    box-shadow:none;
  }
  #mainNav ul li a::before { display:none; }
  #mainNav ul li a::after {
    content:"";
    display:block;
    position:absolute;
    left:1.5rem;
    bottom:0.35rem;
    width:0;
    height:1px;
    background:var(--sx-color-accent);
    transition:width 0.25s ease;
  }

  #mainNav ul li + li { border:none; }

  #mainNav ul li a:hover,
  #mainNav ul li a:focus {
    color:var(--sx-color-accent);
    background:transparent;
    padding-left:1.5rem;
    outline:none;
    transform:none;
    box-shadow:none;
    border-color:transparent;
  }
  #mainNav ul li a:hover::after,
  #mainNav ul li a:focus::after {
    width:calc(100% - 3rem);
  }
  #mainNav ul li a:active {
    opacity:0.7;
    transform:none;
  }
  #mainNav ul li a.is-active,
  #mainNav ul li a.active {
    color:var(--sx-color-accent);
    background:transparent;
    border:none;
    box-shadow:none;
  }
  #mainNav ul li a.is-active::after,
  #mainNav ul li a.active::after {
    width:calc(100% - 3rem);
  }

  body.menu-open {
    overflow:auto !important;
    touch-action:auto;
  }

  /* Cacher le padding-bottom inutile */
  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; }
}

/* ===== Menu alternatif (desktop & tablettes ≥769px) : épuré avec soulignement glissant ===== */
@media (min-width: 769px) {
  /* Masquer le toggle sur desktop */
  #MenuToggle { display:none !important; }
  /* Conteneur desktop/tablette */
  #mainNav {
    position:relative !important;
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    padding-top: 0.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    inset:auto !important;
  }
  #mainNav ul {
    flex-direction:row !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    gap: 0.2rem;
    padding: 0;
    width:auto !important;
  }
  #mainNav > ul > li {
    padding-left: 0;
    padding-right: 0;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  /* Liens: texte simple + underline animé (mêmes tailles que desktop) */
  #mainNav ul li a {
    background:transparent !important;
    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);
    border:none !important;
    box-shadow:none !important;
    text-transform:none;
    letter-spacing:normal;
  }
  #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; display:block !important; }
  #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 !important; }
  #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); }
}



/* 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:769px) 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;
  }
}