/* =========================
   Fitzgerald UI — app.css
   Gold Luxury (Security/Defense)
   Clean full version (no duplicates)
   ========================= */

:root{
  /* Base */
  --bg:#050607;
  --panel:#0b0d0f;
  --panel2:#0f1114;
  --text:#f3f5f7;
  --muted:#9aa3ad;

  /* Luxury gold accents */
  --gold:#b08a3a;
  --gold2:#8a6a2c;
  --danger:#ff4b4b;

  /* Lines / shadows */
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.07);
  --shadow: 0 18px 60px rgba(0,0,0,.68);
  --radius:18px;

  /* Timings */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t1: 180ms;
  --t2: 320ms;
  --t3: 520ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

html, body{
  background: var(--bg);
}

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue";
  position: relative;
}

/* Glow doré figé au viewport (ne descend plus avec la page) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(176,138,58,.18), transparent 62%),
    radial-gradient(760px 420px at 70% 8%, rgba(176,138,58,.10), transparent 62%),
    radial-gradient(700px 400px at 50% 0%, rgba(255,255,255,.06), transparent 60%);
}

.topbar,
.container{
  position: relative;
  z-index: 1;
}


a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

code{
  color:#d7dbe0;
  font-size:.92em;
  background:rgba(255,255,255,.06);
  padding:.12rem .35rem;
  border-radius:8px;
}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0;
}

.container{
  width:min(1120px, calc(100% - 40px));
  margin: 36px auto 80px;
}

/* =========================
   Topbar
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.brand{
  font-weight:900;
  letter-spacing:.4px;
}
.brand--glow{
  position:relative;
  display:inline-block;
}
.brand--glow::after{
  content:"";
  position:absolute;
  inset:-10px -14px;
  background: radial-gradient(240px 80px at 50% 60%, rgba(176,138,58,.18), transparent 70%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
  z-index:-1;
}

.nav{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.nav__link{
  font-size:13px;
  color:rgba(255,255,255,.75);
  padding:6px 4px;
  border-bottom:2px solid transparent;
  transition: color var(--t1) var(--ease), border-color var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.nav__link:hover{
  color:#fff;
  transform: translateY(-1px);
}
.nav__link.is-active{
  color:#fff;
  border-bottom-color: var(--gold);
}
.nav__btn{
  margin-left:6px;
}

/* =========================
   Cards
   ========================= */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(176,138,58,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(176,138,58,.10);
}
.card--empty{
  padding:28px;
  text-align:center;
}
.card--hero{
  padding:34px 34px 30px;
}

/* Notice / Alert */
.notice{
  padding:12px 14px;
  border:1px solid rgba(176,138,58,.25);
  background: rgba(176,138,58,.10);
  color: rgba(255,255,255,.90);
  margin: 12px 0;
  border-radius:14px;
}
.alert{
  background: rgba(255,80,80,.10);
  border:1px solid rgba(255,80,80,.28);
  border-radius:14px;
  padding:10px 12px;
  color: rgba(255,220,220,.95);
  font-size:13px;
  margin: 12px 0;
}

/* Pills */
.pill{
  display:inline-flex;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(176,138,58,.32);
  color: rgba(176,138,58,.95);
}
.pill--off{
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.65);
}

/* =========================
   Page headings / text
   ========================= */
.page-head{ margin: 10px 0 18px; }
.page-head h1{
  margin:0 0 6px;
  font-size:34px;
  letter-spacing:-.02em;
}
.page-head p{ margin:0; }
.subhead{ margin-top:22px; }
.subhead h2{ margin:0; font-size:18px; }

.muted{ color:rgba(255,255,255,.62); }
.small{ font-size:12px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(176,138,58,.35);
  color:rgba(176,138,58,.95);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  margin-bottom:10px;
}

/* =========================
   Hero
   ========================= */
.hero{
  position:relative;
  min-height: 65vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(720px 420px at 50% 35%, rgba(176,138,58,.22), transparent 62%),
    radial-gradient(920px 520px at 50% 55%, rgba(0,0,0,.55), transparent 60%);
  pointer-events:none;
}
.hero__content{
  position:relative;
  width:min(680px, 100%);
  text-align:center;
  animation: heroFloat 5.5s var(--ease) infinite;
}
@keyframes heroFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.kicker{
  color:rgba(176,138,58,.95);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.hero__title{
  margin:0;
  font-size:54px;
  line-height:1.02;
  letter-spacing:-.02em;
}
.hero__subtitle{
  margin:14px auto 22px;
  width:min(520px, 100%);
  color:rgba(255,255,255,.68);
  font-size:14px;
  line-height:1.55;
}
.hero__actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* =========================
   Buttons
   ========================= */
.btn{
  border:0;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
  transition:
    transform var(--t1) var(--ease),
    opacity var(--t1) var(--ease),
    box-shadow var(--t2) var(--ease),
    background var(--t2) var(--ease),
    border-color var(--t2) var(--ease);
}
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn--pill{ border-radius:999px; padding:10px 16px; font-size:13px; }
.btn--sm{ border-radius:999px; padding:8px 12px; font-size:12px; }

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn--light{
  background:#f6f7f9;
  color:#111;
}
.btn--light:hover{ opacity:.92; }

.btn--outline{
  background:transparent;
  border:1px solid rgba(176,138,58,.55);
  color: rgba(255,255,255,.88);
}
.btn--outline:hover{ border-color: rgba(176,138,58,.92); }

.btn--blue{
  background:#1c355f;
  color:#e9f0ff;
  border:1px solid rgba(255,255,255,.08);
}
.btn--red{
  background: rgba(255,80,80,.16);
  color:#ffecec;
  border:1px solid rgba(255,80,80,.28);
}
.btn--red:hover{
  background: rgba(255,80,80,.22);
  border-color: rgba(255,80,80,.40);
}

/* =========================
   Layout helpers
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.grid--kpi{ grid-template-columns: repeat(3, 1fr); }

.stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .hero__title{ font-size:44px; }
}
@media (max-width: 620px){
  .grid{ grid-template-columns: 1fr; }
  .hero__title{ font-size:38px; }
}

/* =========================
   Forms (FIX: readable inputs)
   ========================= */
.form-card{ padding:18px; }
.form-card h2{ margin:0 0 6px; font-size:18px; }

.form-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field--full{ grid-column: 1 / -1; }

label{ font-size:12px; color:rgba(255,255,255,.65); }

input, select, textarea{
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(0,0,0,.35);           /* FIX lisibilité */
  padding:12px 12px;
  color: rgba(255,255,255,.94);          /* FIX lisibilité */
  outline:none;
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(176,138,58,.95) 50%),
    linear-gradient(135deg, rgba(176,138,58,.95) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(176,138,58,.38);
  box-shadow: 0 0 0 3px rgba(176,138,58,.10);
}

input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.38); }

textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
}

/* Autofill fix (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.94);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.35) inset;
  border:1px solid var(--line2);
}

/* =========================
   Login page
   ========================= */
.center{
  min-height: 68vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login{
  width:min(420px, 100%);
  padding:24px;
}
.login h1{ margin:0 0 6px; font-size:28px; }

/* =========================
   KPI / Stats
   ========================= */
.kpi{
  padding:16px;
  text-align:center;
}
.kpi__label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.kpi__value{
  margin-top:6px;
  font-size:30px;
  font-weight:900;
  color:rgba(176,138,58,.98);
}

.stats{
  padding:16px;
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
}
.stats__item{ flex:1; text-align:center; }
.stats__value{
  font-size:32px;
  font-weight:900;
  color:rgba(176,138,58,.98);
}
.stats__label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* =========================
   Catalogue cards (public)
   ========================= */
.grid--cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 1100px){
  .grid--cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px){
  .grid--cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid--cards{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

.product{
  padding:0;
  overflow:hidden;
  border-radius:18px;
}
.product__img{
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.03);
}
.product__img img{
  width:85%;
  height:85%;
  object-fit:contain;
  transition: transform var(--t2) var(--ease), filter var(--t2) var(--ease);
}
.product:hover .product__img img{
  transform: scale(1.03);
  filter: saturate(1.05);
}
.product__placeholder{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font-weight:900;
}
.product__body{ padding:14px 14px 16px; }
.product__title{
  font-weight:900;
  font-size:15px;
  margin-bottom:6px;
}
.product__price{
  color: rgba(176,138,58,.95);
  font-weight:900;
}

/* =========================
   Reviews
   ========================= */
.review{
  padding:14px 14px 16px;
}
.review__top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.review__name{
  font-weight:900;
  font-size:15px;
}
.review__stars{
  margin-top:4px;
  color: rgba(176,138,58,.95);
  letter-spacing: .5px;
}
.review__msg{
  margin-top:10px;
  color: rgba(255,255,255,.86);
  line-height: 1.45;
}

.review-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.review-summary__avg{
  font-weight:900;
  font-size:28px;
  line-height:1;
}
.review-summary__stars{ min-width:240px; }
.stars-bar{
  position:relative;
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
}
.stars-bar__fill{
  height:100%;
  background: rgba(176,138,58,.95);
  width:0%;
}

/* =========================
   Employees (admin)
   ========================= */
.employee{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.employee__left{
  display:flex;
  align-items:center;
  gap:12px;
}
.employee__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  background: rgba(176,138,58,.18);
  border:1px solid rgba(176,138,58,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

/* =========================
   Sales page
   ========================= */
.sale-layout{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:18px;
}
@media(max-width:900px){
  .sale-layout{ grid-template-columns:1fr; }
}
.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.sep{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:12px 0;
}
.cart-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.totals{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   Footer (centered + gold shimmer)
   Uses .fc-footer from footer.php
   ========================= */
.fc-footer{
  margin-top:48px;
  padding:34px 16px 40px;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(176,138,58,.10), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.20));
}
.fc-footer__wrap{
  max-width:980px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* gold line + shimmer */
.fc-footer__line{
  width:min(520px, 92%);
  height:2px;
  border-radius:999px;
  background: rgba(176,138,58,.35);
  position:relative;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(176,138,58,.14), 0 6px 24px rgba(176,138,58,.06);
}
.fc-footer__line::after{
  content:"";
  position:absolute;
  inset:-40% -35%;
  background: linear-gradient(90deg,
    transparent,
    rgba(176,138,58,.18),
    rgba(176,138,58,.55),
    rgba(176,138,58,.18),
    transparent
  );
  transform: translateX(-60%);
  animation: fcShimmer 5.5s ease-in-out infinite;
}
@keyframes fcShimmer{
  0%   { transform: translateX(-60%); opacity:.0; }
  10%  { opacity:.9; }
  35%  { transform: translateX(60%); opacity:.6; }
  60%  { opacity:.0; }
  100% { transform: translateX(60%); opacity:.0; }
}

.fc-footer__brand{
  font-weight:900;
  letter-spacing:.5px;
  font-size:18px;
  color: rgba(255,255,255,.94);
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.fc-footer__tag{
  font-size:13px;
  color: rgba(255,255,255,.62);
  line-height:1.35;
}
.fc-footer__tag span{
  color: rgba(176,138,58,.95);
  font-weight:900;
}
.fc-footer__nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:6px;
}
.fc-footer__nav a{
  text-decoration:none;
  color: rgba(255,255,255,.72);
  font-size:14px;
  position:relative;
  padding:4px 2px;
  transition: color .2s ease, transform .2s ease;
}
.fc-footer__nav a:hover{
  color: rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.fc-footer__nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  width:0%;
  height:2px;
  border-radius:999px;
  background: rgba(176,138,58,.95);
  transform: translateX(-50%);
  transition: width .22s ease;
}
.fc-footer__nav a:hover::after{ width:110%; }

.fc-footer__copy{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,.45);
}

/* =========================
   Client Animations (soft + classy)
   ========================= */
.reveal{
  opacity:0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease), filter var(--t3) var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

/* Slight stagger */
.reveal[data-delay="1"]{ transition-delay: 80ms; }
.reveal[data-delay="2"]{ transition-delay: 140ms; }
.reveal[data-delay="3"]{ transition-delay: 200ms; }
.reveal[data-delay="4"]{ transition-delay: 260ms; }

/* Section title underline shimmer (discrete) */
.subhead h2{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}
.subhead h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(176,138,58,.10), rgba(176,138,58,.70), rgba(176,138,58,.10));
  opacity:.55;
  transform: scaleX(.45);
  transform-origin:left;
  transition: transform var(--t2) var(--ease), opacity var(--t2) var(--ease);
}
.subhead:hover h2::after{
  transform: scaleX(1);
  opacity:.75;
}

/* =========================
   Effectifs (mosaïque)
   ========================= */
.staff-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1100px){ .staff-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 900px){ .staff-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 620px){ .staff-grid{ grid-template-columns: repeat(2, 1fr);} }

.staff-card{
  overflow:hidden;
  border-radius:18px;
  display:block;
}
.staff-card__img{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.03);
}
.staff-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.staff-card__ph{
  width:64px;height:64px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-weight:900;
  font-size:22px;
}
.staff-card__body{
  padding:12px 12px 14px;
}
.staff-card__name{
  font-weight:900;
  font-size:15px;
}

.staff-avatar{
  width:54px;height:54px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.staff-avatar img{width:100%;height:100%;object-fit:cover;}

/* =========================
   Lightbox (used by ppa/effectifs)
   ========================= */
.lb{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.lb.is-open{ display:flex; }
.lb__box{
  max-width:min(1100px,100%);
  max-height:calc(100vh - 70px);
  position:relative;
}
.lb__img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 70px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.lb__close{
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
}

/* =========================
   Accessibility: reduce motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; filter:none; }
  .hero__content{ animation:none; }
  .card, .btn, .product__img img{ transition:none; }
  .fc-footer__line::after{ animation:none; }
  .fc-footer__nav a{ transition:none; }
  .fc-footer__nav a::after{ transition:none; }
}

/* =========================
   FIX HEADER WRAP (nav sur 2 lignes)
   ========================= */

.topbar{
  /* un peu plus stable visuellement */
  padding: 8px 0;
}

.topbar__inner{
  /* au lieu d'une hauteur fixe qui écrase */
  height: auto;                /* ✅ FIX */
  min-height: 64px;            /* conserve le rendu classique */
  align-items: center;
  gap: 14px;                   /* évite brand collé à la nav */
  padding: 6px 0;              /* respire */
}

/* nav peut passer sur plusieurs lignes sans casser */
.nav{
  justify-content: flex-end;   /* garde à droite */
  row-gap: 10px;               /* espace entre les lignes */
}

/* boutons mieux alignés quand ça wrap */
.nav__btn{
  margin-left: 6px;
}

/* mobile: brand + nav l'un sous l'autre proprement */
@media (max-width: 900px){
  .topbar__inner{
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav{
    justify-content: center;
  }
}