/* ═══════════════════════════════════════════════════════════════════════
   app-shell.css — App-shell : sidebar, main-content, footer, badges sidebar, adaptations palette h
   ─────────────────────────────────────────────────────────
   Extrait de astro_app_V3.8.9.html lignes 4851-5500 (Phase 2 du refactoring).
   Cascade : ce fichier doit être chargé dans l'ordre indiqué dans index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   V3.8.5 — APP-SHELL : SIDEBAR + MAIN-CONTENT + FOOTER
   ─────────────────────────────────────────────────────────────────────
   Charte : blanc froid, bleu nuit, cyan, sidebar bleu encre, footer profond.
═══════════════════════════════════════════════════════════════════════ */

/* Reset body — palette charte */
body {
  background: var(--astro-bg);
  color: var(--astro-text);
  font-family: var(--sans);
  /* V3.8.6 — empêche tout débordement horizontal résiduel sur mobile */
  overflow-x: hidden;
}

/* V3.8.6 — Sécurité : tout enfant direct du main-content reste dans sa grille */
.main-content {
  min-width: 0;
  max-width: 100%;
}
.main, .form-panel, .results-panel {
  min-width: 0;
}
.form-panel input, .form-panel select, .form-panel textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Wrapper principal — V3.9.1
   ─────────────────────────────────────────────────
   Avant : grid 264px 1fr, avec .sidebar dans la 1re colonne et
   .main-content dans la 2nde. Avec la sidebar passée en position:fixed,
   le grid plaçait le main-content dans la 1re colonne (étroite : 264px
   ou 64px), donc tout son contenu était compressé/caché derrière la
   sidebar. Symptôme : header et formulaire invisibles, texte wrappé en
   colonne d'une lettre de large.
   Maintenant : padding-left sur .app-shell pour décaler le main-content
   à droite de la sidebar fixe. Beaucoup plus simple et robuste. */
.app-shell {
  min-height: 100vh;
  background: var(--astro-bg);
  padding-left: 264px;
  transition: padding-left 0.25s ease;
}
.app-shell.sidebar-collapsed {
  padding-left: 64px;
}

/* ─── SIDEBAR ──────────────────────────────────────────────────────── */
/* V3.9.1 — La sidebar est désormais fixed (était sticky).
   ─────────────────────────────────────────────────
   Pourquoi : avec sticky + overflow-y:auto, dès que le contenu de la
   sidebar dépassait la hauteur du viewport, une scrollbar verticale
   apparaissait. Avec fixed + pas d'overflow, la sidebar reste pinned au
   viewport et passe par-dessus le footer institutionnel (z-index 100).
   La grille .app-shell réserve toujours 264px / 64px en colonne 1 pour
   éviter que .main-content passe sous la sidebar.
   Pour le footer : padding-left ajusté via :has() (cf. .site-footer).
   Mobile : la sidebar redevient une drawer (cf. media query plus bas). */
.sidebar {
  background: var(--astro-sidebar);
  color: rgba(255, 255, 255, 0.92);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 264px;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  box-shadow: var(--shadow-panel);
  z-index: 100;
  /* Pas d'overflow-y → pas de scrollbar.
     Si le contenu dépasse, les items du bas peuvent être tronqués
     volontairement. Les sections critiques (logo, menu, statut) sont
     en haut donc toujours visibles. */
}

/* Largeur réduite quand la sidebar est repliée. Doit rester en sync
   avec .app-shell.sidebar-collapsed grid-template-columns 64px. */
.app-shell.sidebar-collapsed .sidebar {
  width: 64px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.1rem 1rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
}
.sidebar-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--astro-accent) 0%, var(--astro-accent-hover) 100%);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(83, 158, 218, 0.35);
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.sidebar-brand-name {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.005em;
}
.sidebar-brand-sub {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.1rem;
}
.sidebar-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-button);
  width: 30px; height: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.25s ease;
}
.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.app-shell.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar-toggle svg { transition: transform 0.25s ease; }

/* Navigation principale */
.sidebar-nav {
  padding: 1rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sidebar-section-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.5rem 0.5rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.65rem;
  border-radius: var(--radius-button);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}
.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.sidebar-link.is-active {
  background: linear-gradient(90deg, rgba(83, 158, 218, 0.18) 0%, rgba(83, 158, 218, 0.04) 100%);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--astro-accent);
}
.sidebar-link-icon {
  width: 22px;
  text-align: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.sidebar-link.is-active .sidebar-link-icon {
  color: var(--astro-accent);
}
.sidebar-link[aria-disabled="true"],
.sidebar-link.is-disabled {
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
  pointer-events: none;
}
.sidebar-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ═══════════════════════════════════════════════════════════════════════
   V3.8.6 — Badges discrets (sidebar + global)
   Micro-indicateurs, plus petits, opacité réduite, ne volent pas l'œil.
══════════════════════════════════════════════════════════════════════════ */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  opacity: 0.72;
  flex-shrink: 0;
}
.sidebar-badge-free {
  background: rgba(109, 141, 163, 0.10);
  color: rgba(210, 225, 235, 0.78);
  border: 1px solid rgba(210, 225, 235, 0.10);
}
.sidebar-badge-premium {
  background: rgba(83, 158, 218, 0.10);
  color: rgba(187, 226, 255, 0.78);
  border: 1px solid rgba(83, 158, 218, 0.18);
}
.sidebar-badge-locked {
  background: rgba(161, 171, 182, 0.08);
  color: rgba(190, 195, 200, 0.6);
  border: 1px solid rgba(190, 195, 200, 0.10);
}
/* Survol du lien parent : badge légèrement plus visible */
.sidebar-link:hover .sidebar-badge { opacity: 0.92; }
.sidebar-link.is-active .sidebar-badge { opacity: 1; }

/* Sections (mode toggle, status...) */
.sidebar-section {
  padding: 0.6rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0.4rem;
}
.sidebar-section .sidebar-section-title {
  margin-left: 0;
  margin-bottom: 0.55rem;
}

.sidebar-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-button);
  padding: 2px;
  gap: 2px;
}
.sidebar-mode-btn {
  flex: 1;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-mode-btn:hover { color: #fff; }
.sidebar-mode-btn.active {
  background: var(--astro-accent);
  color: #fff;
}

.sidebar-status-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-button);
  margin-bottom: 0.6rem;
}
.sidebar-status-dot {
  width: 8px; height: 8px;
  background: var(--astro-accent);
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 0 3px rgba(83, 158, 218, 0.25);
  flex-shrink: 0;
}
.sidebar-status-text {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  line-height: 1.4;
}
.sidebar-status-text strong {
  color: #fff;
  font-weight: 600;
  font-size: 0.83rem;
}
.sidebar-status-text small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  margin-top: 0.1rem;
}
.sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(135deg, var(--astro-accent) 0%, var(--astro-accent-hover) 100%);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-button);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(83, 158, 218, 0.35);
}

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.1rem 1.2rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-foot-mini {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  margin: 0;
}

/* ─── MODE COMPACT (sidebar collapsed) ─────────────────────────────── */
.app-shell.sidebar-collapsed .sidebar-brand-text,
.app-shell.sidebar-collapsed .sidebar-label,
.app-shell.sidebar-collapsed .sidebar-badge,
.app-shell.sidebar-collapsed .sidebar-section-title,
.app-shell.sidebar-collapsed .sidebar-section,
.app-shell.sidebar-collapsed .sidebar-footer {
  display: none;
}
.app-shell.sidebar-collapsed .sidebar-nav {
  padding: 0.7rem 0.4rem;
}
.app-shell.sidebar-collapsed .sidebar-link {
  padding: 0.55rem;
  justify-content: center;
}
.app-shell.sidebar-collapsed .sidebar-header {
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0.5rem;
}

/* ─── BURGER MOBILE TRIGGER ───────────────────────────────────────── */
.sidebar-mobile-trigger {
  display: none;
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 60;
  width: 40px; height: 40px;
  background: var(--astro-card);
  color: var(--astro-text);
  border: 1px solid var(--astro-border);
  border-radius: var(--radius-button);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

/* Backdrop mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(1, 18, 62, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 49;
}
.sidebar-backdrop.is-visible {
  display: block;
}

/* ─── MAIN CONTENT ────────────────────────────────────────────────── */
.main-content {
  min-width: 0;
  background: linear-gradient(180deg, var(--astro-bg) 0%, var(--astro-card-blue) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   ADAPTATIONS palette : header, tabs, boutons, cartes
═══════════════════════════════════════════════════════════════════════ */

/* Header (existant, recoloré) */
.header {
  background: var(--astro-card);
  border-bottom: 1px solid var(--astro-border);
}
.header h1 {
  color: var(--astro-text);
}
.version-badge {
  background: var(--astro-accent);
}

/* Tabs : les règles complètes sont définies plus haut dans le bloc v3.8.6
   "Onglets en pilules sur 2 lignes". Pas de surcharge ici pour éviter les
   conflits (anciennement il y avait .tab.active { border-bottom-color }
   qui réintroduisait le style underline historique). */

/* Section client-welcome */
.client-welcome {
  background: var(--astro-card-blue);
  border-bottom: 1px solid var(--astro-border);
}
.client-welcome p {
  color: var(--astro-text);
}
.client-welcome strong {
  color: var(--astro-accent);
}

/* Boutons primaires globaux */
.btn-calc, .btn-primary, button.btn-primary,
button[id*="calculate"], button[id*="calc"]:not(.tab):not(.mode-btn) {
  background: var(--astro-accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-button);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-calc:hover, .btn-primary:hover {
  background: var(--astro-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(83, 158, 218, 0.3);
}

/* Cartes : fond blanc avec bordure brume */
.section, .form-panel, .results-panel, .charpente-bloc {
  background: var(--astro-card);
  border-color: var(--astro-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* Inputs : fond blanc, bordure brume, focus cyan */
input[type="text"], input[type="date"], input[type="time"], input[type="number"],
select, textarea {
  background: var(--astro-card);
  border-color: var(--astro-border);
  color: var(--astro-text);
  border-radius: var(--radius-button);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--astro-accent);
  box-shadow: 0 0 0 3px rgba(83, 158, 218, 0.18);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER INSTITUTIONNEL SOMBRE
═══════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--astro-footer);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 2.5rem 2rem 1.2rem 2rem;
  margin-top: 3rem;

  /* V3.9.1 — Padding-left adaptatif pour ne PAS être recouvert par la
     sidebar fixe. Par défaut : 264px (sidebar déployée). Si la sidebar
     est repliée (.app-shell.sidebar-collapsed), on passe à 64px.
     Le sélecteur :has() permet de regarder l'état de la sidebar même
     si .site-footer n'est pas un descendant de .app-shell.
     Mobile : la media query plus bas remet padding-left à 0 (la sidebar
     redevient un drawer overlay sans réservation d'espace). */
  padding-left: calc(264px + 2rem);
  transition: padding-left 0.25s ease;
}
body:has(.app-shell.sidebar-collapsed) .site-footer {
  padding-left: calc(64px + 2rem);
}

/* ─── Mobile : la sidebar devient drawer, le footer reprend toute la largeur ─── */
@media (max-width: 900px) {
  .site-footer {
    padding-left: 1.25rem;
  }
  body:has(.app-shell.sidebar-collapsed) .site-footer {
    padding-left: 1.25rem;
  }
}
.site-footer-inner {
  /* V3.9.1 — max-width retiré ; le contenu utilise toute la largeur dispo
     (après padding-left ajusté à la sidebar). Avant, max-width: 1280px
     créait une bande étroite sur écrans larges, faisant paraître le
     contenu confiné à ~20% de la page. */
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-col-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* V3.9.1 — bleu cyan vif pour les titres Navigation/Légal/Suivre,
     pour mieux les démarquer des liens grisés en dessous. */
  color: var(--astro-accent);
  font-weight: 700;
  margin: 0 0 0.85rem 0;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.footer-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--astro-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.95rem;
}
.footer-brand strong {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
}
.footer-tagline {
  margin: 0 0 0.9rem 0;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  /* V3.9.1 — max-width retiré : la tagline pouvait paraître confinée
     dans une bande étroite. Elle s'adapte maintenant à la largeur de la
     colonne brand (2.2fr) du grid parent. */
}
.footer-trust {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--astro-accent);
  border-radius: 3px;
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.footer-trust-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.footer-links, .footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer a {
  color: rgba(210, 215, 221, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}
.site-footer a:hover {
  color: var(--astro-accent);
}
.site-footer-bottom {
  /* V3.9.1 — max-width retiré (cf. .site-footer-inner) */
  width: 100%;
  margin: 2rem auto 0 auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer-bottom small {
  font-size: 0.77rem;
}
.footer-tech {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Footer-note ancien (gardé mais discret) */
.footer-note {
  background: var(--astro-card-blue);
  color: var(--astro-text-soft);
  font-size: 0.78rem;
  padding: 0.9rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--astro-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGES gratuit / premium / verrouillé / consultation (cohérence générale)
═══════════════════════════════════════════════════════════════════════ */
.badge-free,
.badge-premium,
.badge-locked,
.badge-consultation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  opacity: 0.78;
}
.badge-free {
  background: rgba(109, 141, 163, 0.10);
  color: var(--astro-text-soft);
  border: 1px solid rgba(109, 141, 163, 0.18);
}
.badge-premium {
  background: rgba(83, 158, 218, 0.10);
  color: var(--astro-text);
  border: 1px solid rgba(83, 158, 218, 0.20);
}
.badge-locked {
  background: rgba(161, 171, 182, 0.10);
  color: var(--astro-text-muted);
  border: 1px solid rgba(161, 171, 182, 0.18);
}
.badge-consultation {
  background: rgba(50, 72, 117, 0.10);
  color: var(--astro-panel-dark);
  border: 1px solid rgba(50, 72, 117, 0.22);
}
.locked-card {
  opacity: 0.72;
  filter: grayscale(0.15);
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* V3.9.1 — Sidebar plus compacte sur écrans intermédiaires (1100→900) */
  .app-shell { padding-left: 240px; }
  .app-shell.sidebar-collapsed { padding-left: 64px; }
  .sidebar { width: 240px; }
  .site-footer { padding-left: calc(240px + 2rem); }
  .site-footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
}

/* Tablette : sidebar redevient drawer overlay, padding remis à 0 */
@media (max-width: 900px) {
  .app-shell {
    /* V3.9.1 — Sur tablette/mobile la sidebar est un drawer overlay
       (transform:translateX), donc on retire le padding-left du shell
       pour que le main-content prenne toute la largeur de l'écran. */
    padding-left: 0 !important;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-mobile-trigger { display: inline-flex; }
  .sidebar-toggle { display: none; }  /* Le toggle desktop est inutile en mobile */
  .main-content { padding-top: 3.4rem; }  /* Espace pour le burger */
  .site-footer { padding: 2rem 1.2rem 1rem 1.2rem; }
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* Mobile : footer plus compact */
@media (max-width: 540px) {
  .site-footer { padding: 1.6rem 1rem 0.9rem 1rem; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-tagline { max-width: none; }
}