/* ═══════════════════════════════════════════════════════════════════════
   Astro Valens — site-shell.css
   ────────────────────────────────────────────────────────────────────────
   Bloc mutualisé pour TOUTES les pages du site marketing :
     • Bouton burger (mobile ≤ 640 px, à gauche du logo)
     • Sidebar latérale claire avec icônes + liens légaux discrets
     • Backdrop assombri
     • Pied de page fixe mobile (icônes + étoile centrale dorée surélevée)
     • Masquage du footer classique sur mobile (remplacé par le footer fixe)

   Inclusion : <link rel="stylesheet" href="/assets/css/site-shell.css">
   Compagnon JS : /assets/js/site-shell.js (injecte le DOM + handlers)

   Charte : navy #0D214D, or-deep #946817, or #C8A76A, ivory #FDFDFD,
            gray-soft #F5F7FA, gray-deep #E0E4EA.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hauteur du footer fixe — référencée par body.padding-bottom et
       par tout élément fixe (scroll-top par ex.). ─────────────────────── */
:root {
  --footer-fixed-h: 64px;
}

/* ─── Bouton burger (caché par défaut, affiché ≤ 640 px) ─────────────── */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease;
}
.burger:hover,
.burger:focus-visible {
  background: rgba(13, 33, 77, 0.06);
  outline: none;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy, #0D214D);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* ─── Sidebar — fond clair, en harmonie avec la charte ───────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 80vw;
  max-width: 360px;
  height: 100vh;
  height: 100dvh;
  background: var(--gray-soft, #F5F7FA);
  border-right: 1px solid var(--gray-deep, #E0E4EA);
  color: var(--text, #1A1A2E);
  transform: translateX(-105%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 1100;
  padding: 1rem 0.85rem 1.25rem;
  /* Safe-area iOS — la sidebar démarre à top:0 et touche le bord gauche,
     elle peut passer sous la notch / Dynamic Island sans ces overrides.
     env() retourne 0 sur les appareils sans encoche → 0 impact ailleurs. */
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 32px rgba(13, 33, 77, 0.18);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sidebar.is-open { transform: translateX(0); }

/* Bouton de fermeture (chevron ‹) en haut à droite */
.sidebar-close {
  align-self: flex-end;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  color: var(--text-soft, #3E4151);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease;
}
.sidebar-close:hover,
.sidebar-close:focus-visible {
  background: rgba(13, 33, 77, 0.06);
  color: var(--navy, #0D214D);
  outline: none;
}

/* Brand identique au header — bleu marine + étoile dorée + wordmark Manrope */
.sidebar-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--navy, #0D214D);
  margin: 0.25rem 0.4rem 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--gray-deep, #E0E4EA);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-brand .brand-icon {
  color: var(--or-deep, #946817);
  font-size: 1.35em;
  line-height: 1;
}
.sidebar-brand .brand-wordmark {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* Navigation principale — icône + label, padding tactile généreux */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem 0;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--text, #1A1A2E);
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav a:hover,
.sidebar-nav a:focus-visible {
  background: rgba(13, 33, 77, 0.05);
  color: var(--navy, #0D214D);
  outline: none;
}
.sidebar-nav a.active {
  color: var(--or-deep, #946817);
  background: rgba(200, 167, 106, 0.10);
  font-weight: 600;
}
/* Icône — SVG outline, prend la couleur courante (suit la couleur du lien) */
.sidebar-nav .ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: inherit;
}
.sidebar-nav .ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Liens légaux — section discrète en bas de sidebar */
.sidebar-legal {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-deep, #E0E4EA);
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.sidebar-legal a {
  color: var(--muted, #6E7280);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.sidebar-legal a:hover,
.sidebar-legal a:focus-visible {
  color: var(--navy, #0D214D);
  background: rgba(13, 33, 77, 0.04);
  outline: none;
}

/* Backdrop assombri sous la sidebar */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1050;
}
.sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   Pied de page fixe mobile (≤ 640 px)
   5 entrées : Accueil · App · ★ FAB centre · Tarifs · Contact
   ═══════════════════════════════════════════════════════════════ */
.app-footer-fixed {
  display: none;                            /* affiché uniquement ≤ 640 px */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-fixed-h);
  background: var(--navy, #0D214D);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
  z-index: 900;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.4rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: 'Manrope', sans-serif;
}
.app-footer-fixed a {
  flex: 1 1 0;
  max-width: 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s ease;
}
.app-footer-fixed a:hover,
.app-footer-fixed a:focus-visible {
  color: var(--ivory, #FDFDFD);
  outline: none;
}
.app-footer-fixed a.is-active { color: var(--or, #C8A76A); }
.app-footer-fixed .ico { width: 22px; height: 22px; display: block; }
.app-footer-fixed .ico svg { width: 100%; height: 100%; display: block; }

/* Étoile centrale — surélevée, cercle doré */
.app-footer-fixed .fab-center {
  flex: 0 0 auto;
  max-width: none;
  width: 58px;
  height: 58px;
  margin: -22px 0.4rem 0;
  border-radius: 50%;
  background: linear-gradient(160deg,
              var(--or-soft, #D49B3A) 0%,
              var(--or, #C8A76A) 60%,
              var(--or-deep, #946817) 100%);
  box-shadow: 0 6px 18px rgba(212, 155, 58, 0.45),
              0 0 0 4px var(--navy, #0D214D);
  color: var(--navy-deep, #07173A);
  font-size: 0;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .25s ease;
}
.app-footer-fixed .fab-center .ico {
  width: 26px;
  height: 26px;
  color: var(--navy-deep, #07173A);
}
.app-footer-fixed .fab-center:hover,
.app-footer-fixed .fab-center:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(212, 155, 58, 0.55),
              0 0 0 4px var(--navy, #0D214D);
}

/* ═══════════════════════════════════════════════════════════════════
   Règles responsive
   ═══════════════════════════════════════════════════════════════ */

/* Mobile ≤ 640 px : burger ON, menu inline OFF, footer fixe ON,
   footer classique du site masqué, padding bottom du body réservé. */
@media (max-width: 640px) {
  .burger { display: inline-flex; }
  /* Masque le menu horizontal du header (différentes structures possibles) */
  .topnav nav,
  .topnav ul,
  .topnav .nav-links { display: none; }
  /* Affiche le footer fixe */
  .app-footer-fixed { display: flex; }
  /* Masque le footer classique du site (qui devient redondant avec le footer fixe) */
  body > footer,
  body > .footer { display: none; }
  /* Réserve de la place pour le footer fixe */
  body {
    padding-bottom: calc(var(--footer-fixed-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Safe-area iOS — mode PWA standalone (iPhone X+, Dynamic Island…)
   ────────────────────────────────────────────────────────────────────
   Le <meta viewport content="…viewport-fit=cover"> autorise le contenu
   à occuper TOUTE la surface de l'écran, y compris sous la notch et
   sous le home indicator. Sans les paddings ci-dessous, le header est
   caché par l'encoche et les boutons du bas sont sous la home bar.

   On limite ces paddings au mode standalone : en navigateur classique,
   Safari ajoute déjà sa propre marge sous la status bar — pas la peine
   d'en remettre une couche qui créerait un ruban blanc inutile.
   ═══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  body {
    padding-top:   env(safe-area-inset-top,   0px);
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* Note : padding-bottom géré au-dessus (footer fixe mobile) ou
       par chaque footer applicatif. Si un footer fixe est présent et
       que l'on est en standalone, il combine déjà sa hauteur avec
       env(safe-area-inset-bottom) — pas de double-marge. */
  }
}

/* Fallback Safari iOS qui se déclare en "standalone" via API legacy */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    body { min-height: 100dvh; } /* gère la barre Safari dynamique */
  }
}