/*
Theme Name: FR Apex Frontend V19
Theme URI: https://fabienrobaldo.fr
Author: Sojytics
Description: Thème WordPress orienté web-app privée pour la gestion des estimations — branding Fabien Robaldo. Modes sombre/clair, toggle flottant, pages app en full-screen. Correctifs sécurité v17.
Version: 19.0.0
*/

/* ── Variables — mode sombre (défaut) ─────────────────────────────────── */
:root {
  --fr-bg:         #0a0a0a;
  --fr-surface:    #111111;
  --fr-border:     rgba(185,151,91,.13);
  --fr-text:       #f5f2ea;
  --fr-muted:      #b6ab95;
  --fr-accent:     #d4b06a;
  --fr-bar-bg:     linear-gradient(180deg,#0c0c0c,#111);
  --fr-chip-bg:    #151515;
  --fr-chip-hover: #1b1b1b;
  --fr-shadow:     0 14px 36px rgba(0,0,0,.22);
}

/* ── Variables — mode clair ───────────────────────────────────────────── */
html.fr-light {
  --fr-bg:         #f4f0e8;
  --fr-surface:    #ffffff;
  --fr-border:     rgba(139,103,52,.18);
  --fr-text:       #1a1510;
  --fr-muted:      #6b5c40;
  --fr-accent:     #8c6a34;
  --fr-bar-bg:     linear-gradient(180deg,#ede8df,#e8e2d8);
  --fr-chip-bg:    #ede8df;
  --fr-chip-hover: #e0d9cc;
  --fr-shadow:     0 14px 36px rgba(0,0,0,.08);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; margin: 0; }
body {
  background: var(--fr-bg);
  color: var(--fr-text);
  font-family: Inter, system-ui, sans-serif;
  transition: background .25s, color .25s;
}
a { color: var(--fr-accent); }

.site-shell  { min-height: 100vh; }
.site-main   { min-height: 100vh; }
.site-shell, .site-main, .default-page, article, .entry-content { min-width: 0; max-width: 100%; }

/* ── Brandbar ─────────────────────────────────────────────────────────── */
.fr-site-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fr-border);
  background: var(--fr-bar-bg);
  transition: background .25s, border-color .25s;
}
.fr-site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--fr-text);
}
.fr-site-brand img           { display: block; height: 44px; width: auto; }
.fr-site-brand-copy          { display: grid; gap: 2px; }
.fr-site-brand-copy strong   { font-family: Georgia,"Times New Roman",serif; letter-spacing: .04em; font-size: 18px; }
.fr-site-brand-copy span     { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fr-muted); }

.fr-site-actions { display: flex; gap: 10px; align-items: center; }

.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--fr-border);
  background: var(--fr-chip-bg);
  color: var(--fr-text);
  text-decoration: none;
  transition: background .15s;
}
.fr-chip:hover { background: var(--fr-chip-hover); }

/* ── Default page (fallback pour pages non-app) ───────────────────────── */
.default-page { max-width: 1180px; margin: 0 auto; padding: 32px 20px; }
.default-page article {
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--fr-shadow);
  overflow: hidden;
  transition: background .25s, border-color .25s;
}
.default-page h1  { margin-top: 0; font-family: Georgia,"Times New Roman",serif; color: var(--fr-text); }
.entry-content, .wp-block-group { color: var(--fr-text); }

/* ── Toggle sombre / clair ────────────────────────────────────────────── */
.fr-theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.fr-theme-toggle__label {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fr-muted);
  white-space: nowrap;
  transition: color .2s;
}

/* Track */
.fr-theme-toggle__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(185,151,91,.18);
  border: 1px solid rgba(185,151,91,.28);
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
html.fr-light .fr-theme-toggle__track {
  background: rgba(139,103,52,.22);
  border-color: rgba(139,103,52,.36);
}

/* Thumb */
.fr-theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d4b06a;
  transition: transform .22s cubic-bezier(.4,0,.2,1), background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
html.fr-light .fr-theme-toggle__thumb {
  transform: translateX(20px);
  background: #8c6a34;
}

/* Icônes dans le thumb */
.fr-theme-toggle__thumb::before {
  content: '🌙';   /* mode sombre */
}
html.fr-light .fr-theme-toggle__thumb::before {
  content: '☀';   /* mode clair */
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fr-site-brandbar { padding: 12px 16px; position: sticky; top: 0; z-index: 30; }
  .fr-site-brand img { height: 36px; }
  .fr-site-brand-copy strong { font-size: 16px; }
  .fr-site-brand { min-width: 0; }
  .fr-site-brand-copy { min-width: 0; }
  .fr-site-brand-copy strong, .fr-site-brand-copy span { white-space: normal; }
  .fr-site-actions { gap: 6px; }
  .fr-chip { display: none; }          /* masquer les chips sur mobile pour garder de la place */
  .fr-theme-toggle__label { display: none; }
  .default-page { padding: 12px; }
  .default-page article { padding: 18px; border-radius: 18px; }
}

/* ================================================================
   V14 — Mode full-screen pour les pages app
   ================================================================ */

/*
 * Sur les pages app, body a la classe .frf-fullscreen.
 * Le plugin gère son propre layout (sidebar + main).
 * On s'assure que rien du thème ne vient contraindre la largeur.
 */
body.frf-fullscreen {
  margin: 0;
  padding: 0;
  background: var(--bg, #0b0b0b);
}

/* Neutraliser les éventuels wrappers WP Core */
body.frf-fullscreen .site-shell,
body.frf-fullscreen .site-main,
body.frf-fullscreen .default-page {
  display: contents;    /* transparents pour le layout */
}

/* ── Toggle flottant (pages app, coin bas-droit) ────────────────── */
.fr-floating-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  /* z-index très élevé, au-dessus de tout sauf la lightbox (10000) */
  z-index: 9998;
  /* isolation: isolate défini inline dans le HTML pour garantir
     que le stacking context ne dépend d'aucun parent transformé */
}

.fr-theme-toggle--floating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(185,151,91,.28);
  /* Pas de backdrop-filter : crée un stacking context qui peut confiner le fixed */
  background: #1a1510;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
  transition: background .2s, border-color .2s, box-shadow .2s;
  color: var(--fr-text, #f5f2ea);
  font-size: 13px;
}
.fr-theme-toggle--floating:hover {
  background: #221c14;
  border-color: rgba(185,151,91,.50);
  box-shadow: 0 6px 28px rgba(0,0,0,.55);
}
html.fr-light .fr-theme-toggle--floating {
  background: #fffcf6;
  border-color: rgba(139,103,52,.32);
  color: #1a1510;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
html.fr-light .fr-theme-toggle--floating:hover {
  background: #f5f0e8;
  border-color: rgba(139,103,52,.52);
}

/* Sur mobile : label masqué, icône seule */
@media (max-width: 960px) {
  .fr-floating-toggle {
    bottom: 14px;
    right: 14px;
  }
  .fr-theme-toggle--floating {
    padding: 8px 10px;
  }
  .fr-theme-toggle--floating .fr-theme-toggle__label {
    display: none;
  }
}