/* ============================================================================
 * Layout — App shell, tab bar, page container
 * Responsive : mobile-first, élargit sur tablette/desktop
 * ============================================================================ */

/* App shell : conteneur centré, max 480px sur desktop pour garder le feeling mobile */

.fr-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--fr-bg-warm);
  position: relative;
}

/* Sur desktop : on garde le contenu centré 480px pour la lisibilité,
   mais le fond chaud déborde edge-to-edge (pas de carte ni d'ombre). */
@media (min-width: 600px) {
  body {
    background: var(--fr-bg-warm);
  }
}

/* ============================================================================
 * Sidebar desktop (parité design iPad p.13) — cachée en mobile
 * ============================================================================ */

.fr-sidebar {
  display: none;
  flex-direction: column;
  width: 264px;
  flex-shrink: 0;
  background: var(--fr-bg-warm-deeper);
  height: 100dvh;
  position: sticky;
  top: 0;
}

.fr-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 16px 12px;
  scrollbar-width: none;
}
.fr-sidebar-scroll::-webkit-scrollbar { display: none; }

.fr-sidebar-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 10px 24px;
}
.fr-sidebar-logo .script {
  font-family: var(--fr-font-script);
  font-size: 30px;
  font-weight: 700;
  color: var(--fr-primary-deep);
}
.fr-sidebar-logo .display {
  font-family: var(--fr-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--fr-ink);
}

.fr-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fr-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--fr-radius-medium);
  background: transparent;
  color: var(--fr-ink2);
  font-family: var(--fr-font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.fr-sidebar-item:hover { background: rgba(255, 255, 255, 0.55); }
.fr-sidebar-item.is-active {
  background: var(--fr-primary-deep);
  color: white;
  font-weight: 700;
}
.fr-sidebar-item .icon {
  display: inline-flex;
  width: 22px;
  justify-content: center;
}
.fr-sidebar-item .icon svg { width: 18px; height: 18px; }

.fr-sidebar-create {
  margin-top: 14px;
}
.fr-sidebar-create svg { width: 15px; height: 15px; }

.fr-sidebar-section {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fr-ink3);
  padding: 24px 14px 8px;
}

.fr-sidebar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--fr-radius-medium);
  background: transparent;
  color: var(--fr-ink2);
  font-family: var(--fr-font-body);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fr-sidebar-row:hover { background: rgba(255, 255, 255, 0.55); }
.fr-sidebar-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.fr-sidebar-row .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fr-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  border: 1px solid var(--fr-hair);
  border-radius: var(--fr-radius-large);
  background: var(--fr-card);
  cursor: pointer;
  text-align: left;
  color: var(--fr-ink3);
  -webkit-tap-highlight-color: transparent;
}
.fr-sidebar-footer .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fr-sidebar-footer .name {
  font-family: var(--fr-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-sidebar-footer .sub {
  font-size: 12px;
  color: var(--fr-ink3);
}


/* Page container — scroll vertical, padding bas pour la tab bar */

.fr-page {
  flex: 1;
  padding: 12px 0 110px;
  overflow-y: auto;
}

.fr-page-padded {
  padding-left: 20px;
  padding-right: 20px;
}

/* Header de page — kicker + titre + sous-titre */

.fr-page-header {
  padding: 12px 20px 16px;
}

/* Home header — titre à gauche + avatar à droite */
.fr-home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.fr-home-header .header-text { flex: 1; min-width: 0; }
.fr-home-avatar {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 4px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.fr-home-avatar:active { transform: scale(0.92); }
.fr-home-avatar .fr-avatar {
  box-shadow: 0 0 0 2px white, 0 0 0 3px var(--fr-primary);
}

.fr-page-header .kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-primary-deep);
}

.fr-page-header .title {
  font-family: var(--fr-font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--fr-ink);
  letter-spacing: -0.01em;
  margin: 2px 0;
}

.fr-page-header .subtitle {
  font-size: 12.5px;
  color: var(--fr-ink3);
}

/* Section title (within page) */

.fr-section-title {
  font-family: var(--fr-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fr-ink);
  letter-spacing: -0.005em;
  padding: 0 20px 8px;
}

/* ============================================================================
 * Tab bar (4 onglets + FAB central) — copie iOS
 * ============================================================================ */

.fr-tabbar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  background: var(--fr-card);
  border: 1px solid var(--fr-hair);
  border-radius: var(--fr-radius-pill);
  box-shadow: var(--fr-shadow-lift);
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 12px;
  z-index: 100;
}

.fr-tabbar.is-hidden {
  transform: translateX(-50%) translateY(140px);
  transition: transform 0.35s var(--fr-ease);
}

.fr-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  color: var(--fr-ink3);
  position: relative;
  transition: color 0.2s ease;
}

.fr-tab .icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.fr-tab .label {
  font-size: 10px;
  font-weight: 600;
}

.fr-tab.is-active {
  color: var(--fr-primary-deep);
}

.fr-tab.is-active .icon {
  background: var(--fr-primary-tint);
}

.fr-tab.is-active .label {
  font-weight: 700;
}

.fr-tab svg {
  width: 22px;
  height: 22px;
}

/* Espace réservé au FAB central */
.fr-tab-spacer { width: 68px; flex: 0 0 68px; }

/* FAB central — surélevé */

.fr-fab {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fr-primary), var(--fr-primary-deep));
  color: white;
  border: 3px solid white;
  box-shadow: var(--fr-shadow-primary-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s var(--fr-ease);
}

.fr-fab:active {
  transform: translateX(-50%) scale(0.94);
}

.fr-fab svg {
  width: 24px;
  height: 24px;
}

/* ============================================================================
 * Auth pages (login / signup) — pas de tab bar
 * ============================================================================ */

.fr-auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--fr-bg-warm) 0%, var(--fr-primary-soft) 100%);
  padding: 24px;
  max-width: 480px;
  margin: 0 auto;
}

.fr-auth-header {
  text-align: center;
  padding: 60px 20px 40px;
}

.fr-auth-header .logo {
  font-family: var(--fr-font-script);
  font-size: 48px;
  color: var(--fr-primary-deep);
  margin-bottom: 8px;
}

.fr-auth-header h1 {
  font-family: var(--fr-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--fr-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.fr-auth-header p {
  color: var(--fr-ink3);
  font-size: 14px;
  margin-top: 6px;
}

.fr-auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 4px;
}

.fr-auth-error {
  background: rgba(217, 83, 79, 0.08);
  border: 1px solid rgba(217, 83, 79, 0.3);
  color: var(--fr-danger);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
}

.fr-auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--fr-ink3);
  margin-top: 20px;
}

/* Divider "ou" + boutons sociaux (Apple / Google) */

.fr-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 4px 16px;
  color: var(--fr-ink3);
  font-size: 12px;
}
.fr-auth-divider::before,
.fr-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fr-hair-strong);
}

.fr-auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}

.fr-btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--fr-radius-pill);
  font-family: var(--fr-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.fr-btn-social:active { transform: scale(0.98); }
.fr-btn-social:disabled { opacity: 0.55; cursor: default; }

.fr-btn-apple {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}

.fr-btn-google {
  background: #fff;
  color: var(--fr-ink);
  border: 1px solid var(--fr-hair-strong);
}

/* ============================================================================
 * Layout desktop ≥ 1000px : sidebar + contenu large (design iPad)
 * ⚠️ Placé en FIN de fichier pour surcharger .fr-tabbar / .fr-page définis
 * plus haut (même spécificité → l'ordre décide).
 * ============================================================================ */

@media (min-width: 1000px) {
  .fr-app {
    max-width: 1380px;
    flex-direction: row;
  }

  .fr-sidebar { display: flex; }

  /* La tab bar mobile disparaît, le "Créer…" de la sidebar remplace le FAB */
  .fr-tabbar { display: none; }

  .fr-page {
    padding: 20px 32px 60px;
    min-width: 0;
  }

  /* Les détails (recette, liste…) restent lisibles : colonne centrée */
  .fr-recipe-detail {
    max-width: 780px;
    margin: 0 auto;
  }
}