/* =============================================================================
 * FrenchDemande — theme.css
 * Thème "dark cinéma" sobre et professionnel — accent ambre.
 * Chargé APRÈS style.css (et admin.css) : il surcharge l'apparence.
 * Responsive PC / tablette / mobile.
 * ============================================================================= */

/* ---- 1. Surcharge des variables : recolore tout le site ---- */
:root{
  --primary:#f5a524;
  --primary-hover:#ffb53d;
  --primary-light:rgba(245,165,36,.12);
  --secondary:#1b1b1f;
  --background:#0b0b0d;
  --card-bg:#141417;
  --card-hover:#1b1b1f;
  --border:#272729;
  --text:#f5f5f6;
  --text-muted:#a2a2ab;
  --text-secondary:#c9c9d0;
  --green:#34d399;
  --blue:#60a5fa;
  --amber:#f5a524;
  --red:#f87171;
  --purple:#a78bfa;
  --orange:#fb923c;
  --radius:16px;
  --radius-sm:9px;
  --radius-lg:18px;
  --shadow:0 16px 38px rgba(0,0,0,.5);
  --shadow-lg:0 22px 55px rgba(0,0,0,.6);

  /* variables propres au thème */
  --t-surface-2:#1b1b1f;
  --t-surface-3:#232328;
  --t-line-soft:rgba(255,255,255,.06);
  --t-text-dim:#6e6e77;
  --t-accent-ink:#1a1205;
}

/* ---- 2. Base ---- */
body{
  background:var(--background) !important;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text);
}
h1,h2,h3,h4,.module-title{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  letter-spacing:-.02em;
}
::selection{background:rgba(245,165,36,.3);color:#fff;}

/* scrollbar discrète */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--background);}
::-webkit-scrollbar-thumb{background:#2f2f34;border-radius:6px;border:2px solid var(--background);}
::-webkit-scrollbar-thumb:hover{background:#3c3c42;}

/* =============================================================================
 * SITE PUBLIC
 * ============================================================================= */

/* ---- 3. Barre de navigation ---- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(11,11,13,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.site-nav.scrolled{
  border-bottom-color:var(--t-line-soft);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.site-nav-inner{
  max-width:1140px;margin:0 auto;padding:.85rem 1.5rem;
  display:flex;align-items:center;gap:1.4rem;
}
.nav-brand{display:flex;align-items:center;gap:.6rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:1.12rem;letter-spacing:-.02em;color:var(--text);}
.nav-brand-logo{
  width:33px;height:33px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--t-accent-ink);
  font-weight:800;font-size:1rem;
  box-shadow:0 4px 14px rgba(245,165,36,.35);
}
.nav-brand .muted{color:var(--t-text-dim);font-weight:600;}
.nav-links{display:flex;gap:.15rem;margin-left:.6rem;}
.nav-links a{
  padding:.5rem .8rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:500;color:var(--text-muted);
  text-decoration:none;transition:.16s;
}
.nav-links a:hover{color:var(--text);background:var(--t-surface-2);}
.nav-spacer{margin-left:auto;}
.nav-cta{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.58rem 1.05rem;border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;
  background:transparent;color:var(--text);
  border:1px solid var(--border);cursor:pointer;transition:.16s;
}
.nav-cta:hover{border-color:var(--t-text-dim);background:var(--t-surface-2);}

/* ---- 4. Hero ---- */
.hero{
  position:relative;overflow:hidden;
  padding:4.5rem 1.5rem 3.5rem;
  border-bottom:1px solid var(--t-line-soft);
}
.hero::before{
  content:"";position:absolute;top:-45%;left:50%;transform:translateX(-50%);
  width:820px;height:620px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,165,36,.13),transparent);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask:radial-gradient(70% 65% at 50% 28%,#000,transparent);
          mask:radial-gradient(70% 65% at 50% 28%,#000,transparent);
}
.hero-inner{position:relative;max-width:1040px;margin:0 auto;}
.hero-top{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:2.6rem;align-items:center;
}
.hero-text{text-align:left;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;color:var(--primary);
  background:var(--primary-light);border:1px solid rgba(245,165,36,.2);
  padding:.34rem .85rem;border-radius:30px;margin-bottom:1.3rem;
}
.hero-eyebrow .pulse{
  width:7px;height:7px;border-radius:50%;background:var(--primary);
  animation:hero-pulse 2.4s infinite;
}
@keyframes hero-pulse{
  0%{box-shadow:0 0 0 0 rgba(245,165,36,.5);}
  70%{box-shadow:0 0 0 9px rgba(245,165,36,0);}
  100%{box-shadow:0 0 0 0 rgba(245,165,36,0);}
}
.hero-title{
  font-size:clamp(2.1rem,4.8vw,3.2rem);font-weight:800;
  line-height:1.13;letter-spacing:-.03em;margin:0;
}
.hero-title .accent{color:var(--primary);}
.hero-sub{
  margin:1rem 0 0;max-width:480px;
  font-size:1.06rem;color:var(--text-muted);
}
.hero-features{
  display:flex;justify-content:flex-start;gap:1.5rem;
  margin-top:1.6rem;flex-wrap:wrap;
}
.hero-feature{
  display:flex;align-items:center;gap:.45rem;
  font-size:.88rem;color:var(--text-muted);
}
.hero-feature .hf-ic{color:var(--primary);font-size:.95rem;}

/* éventail de jaquettes décoratif */
.hero-art{position:relative;height:330px;}
.hero-art .ha{
  position:absolute;width:172px;aspect-ratio:2/3;
  border-radius:11px;border:1px solid var(--border);
  box-shadow:0 16px 38px rgba(0,0,0,.55);
  overflow:hidden;transition:transform .25s;
}
.hero-art .ha .lbl{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.84rem;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.hero-art .ha .g{
  position:absolute;top:42%;left:50%;
  transform:translate(-50%,-50%);font-size:2.1rem;opacity:.45;
}
.hero-art .ha img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.hero-art .ha1{left:1%;top:34px;transform:rotate(-9deg);z-index:1;}
.hero-art .ha2{left:31%;top:0;transform:rotate(0deg);z-index:3;}
.hero-art .ha3{left:61%;top:34px;transform:rotate(9deg);z-index:1;}
.hero-art .ha:hover{transform:translateY(-8px) rotate(0deg);z-index:5;}
.tone1{background:linear-gradient(160deg,#1d3b3e,#0e1f21);}
.tone2{background:linear-gradient(160deg,#3a2440,#1b1024);}
.tone3{background:linear-gradient(160deg,#26314b,#10151f);}
.tone4{background:linear-gradient(160deg,#3e3019,#1f180d);}
.tone5{background:linear-gradient(160deg,#3d1f28,#1f1014);}
.tone6{background:linear-gradient(160deg,#243a2b,#101a13);}

/* ---- 5. Module de recherche placé dans le hero ---- */
.hero .module.search-module{
  max-width:620px;margin:2.3rem auto 0;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;
  box-shadow:var(--shadow);
  transform:none;
  text-align:left;
}
.hero .module.search-module::before{display:none;}
.hero .module.search-module:hover{transform:none;box-shadow:var(--shadow);
  border-color:var(--border);}

/* ---- 6. Conteneur de page ---- */
.page-wrap{max-width:1140px;margin:0 auto;padding:3.4rem 1.5rem 0;}
.page-wrap .module{margin-bottom:2.2rem;}
.module-row{
  display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;
  margin-bottom:2.2rem;
}
.module-row .module{margin-bottom:0;}

/* ---- 7. Modules → cartes-sections sobres ---- */
.module{
  background:var(--card-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  padding:1.6rem !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transition:border-color .18s !important;
}
.module::before{display:none !important;}
.module:hover{
  transform:none !important;
  box-shadow:none !important;
  border-color:#34343a !important;
}
.module-header{
  border-bottom:1px solid var(--t-line-soft);
  margin-bottom:1.3rem;padding-bottom:1rem;gap:.8rem;
}
.module-icon{
  width:40px;height:40px;
  background:var(--t-surface-3) !important;
  border:1px solid var(--border);
  border-radius:var(--radius-sm) !important;
  box-shadow:none !important;
  font-size:1.05rem;
}
.module-title{
  font-size:1.2rem;font-weight:700;
}

/* ---- 8. Formulaires ---- */
label{
  font-size:.74rem;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--t-text-dim);
}
input,select,textarea{
  background:var(--background) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--text) !important;
  transition:border-color .16s,box-shadow .16s !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primary-light) !important;
  background:var(--background) !important;
}

/* ---- 9. Boutons ---- */
.btn-primary,.search-btn{
  background:var(--primary) !important;
  color:var(--t-accent-ink) !important;
  box-shadow:none !important;
  font-weight:700;
}
.btn-primary:hover:not(:disabled),.search-btn:hover{
  background:var(--primary-hover) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(245,165,36,.3) !important;
}
.btn-secondary{
  background:var(--t-surface-2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}
.btn-secondary:hover:not(:disabled){
  border-color:var(--t-text-dim) !important;background:var(--t-surface-3) !important;
}
.search-btn{width:100%;border-radius:var(--radius-sm);}

/* ---- 10. Carrousels & affiches ---- */
.carousel-nav{
  background:rgba(0,0,0,.7) !important;
  border:1px solid var(--border) !important;
}
.carousel-nav:hover{
  background:var(--primary) !important;color:var(--t-accent-ink) !important;
  box-shadow:0 4px 16px rgba(245,165,36,.4) !important;
}
.poster-card{
  width:165px;height:248px;
  background:linear-gradient(160deg,var(--t-surface-3),var(--card-bg)) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:none !important;
}
.poster-card:hover{
  transform:translateY(-6px) !important;
  border-color:var(--t-text-dim) !important;
  box-shadow:var(--shadow) !important;
}
.poster-placeholder{
  background:linear-gradient(160deg,var(--t-surface-3),var(--card-bg)) !important;
  font-size:2.4rem;opacity:.55;
}
/* infos toujours visibles, lisibles */
.poster-info{
  transform:translateY(0) !important;
  background:linear-gradient(transparent,rgba(0,0,0,.92)) !important;
  padding-top:1.8rem !important;
}
.poster-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;}
.poster-info > div:last-child{color:var(--text-muted);font-size:.79rem;}
.poster-status{
  top:.55rem;right:.55rem;padding:.22rem .55rem;
  border-radius:6px;font-size:.68rem;letter-spacing:.03em;
  background:rgba(52,211,153,.18);color:var(--green);
  border:1px solid rgba(52,211,153,.32);
  box-shadow:none;backdrop-filter:blur(6px);
}
.poster-status.reported-status{
  background:rgba(248,113,113,.18) !important;color:var(--red) !important;
  border:1px solid rgba(248,113,113,.34) !important;
}
.poster-status.reported-status.in-progress{
  background:rgba(96,165,250,.18) !important;color:var(--blue) !important;
  border:1px solid rgba(96,165,250,.34) !important;
}
.poster-status.reported-status.resolved{
  background:rgba(52,211,153,.18) !important;color:var(--green) !important;
}

/* ---- 11. Actions rapides → tuiles ---- */
.action-btn{
  justify-content:flex-start;gap:.9rem;
  padding:1.1rem 1.2rem !important;
  background:var(--t-surface-2) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  font-weight:600;
}
.action-btn::before{display:none !important;}
.action-btn span:first-child{font-size:1.4rem;}
.action-btn:hover{transform:translateY(-2px) !important;box-shadow:none !important;}
.action-btn.report:hover{border-color:var(--primary) !important;}
.action-btn.admin:hover{border-color:var(--purple) !important;}

/* ---- 12. Statistiques ---- */
.stat-item{
  background:var(--t-surface-2) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
}
.stat-item:hover{
  background:var(--t-surface-3) !important;
  border-color:var(--t-text-dim) !important;
  transform:translateY(-2px);
}
.stat-item::before{background:var(--primary) !important;}
.stat-number{
  color:var(--text) !important;
  font-family:'Plus Jakarta Sans',sans-serif;
  text-shadow:none !important;
}
.stat-item:hover .stat-number{color:var(--primary) !important;text-shadow:none !important;}

/* ---- 13. Résultats de recherche ---- */
.result-item{
  background:var(--card-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
}
.result-item::before{background:var(--primary) !important;}
.result-item:hover{
  border-color:var(--t-text-dim) !important;
  box-shadow:var(--shadow) !important;
}
.result-title{color:var(--text) !important;
  font-family:'Plus Jakarta Sans',sans-serif;}
.result-poster{
  background:linear-gradient(160deg,var(--t-surface-3),var(--card-bg)) !important;
  border:1px solid var(--border) !important;
}
.btn-select{
  background:var(--primary) !important;color:var(--t-accent-ink) !important;
}
.btn-select:hover{box-shadow:0 8px 20px rgba(245,165,36,.35) !important;}

/* ---- 14. "Comment ça marche" ---- */
.steps-section{margin-bottom:2.6rem;}
.steps-head{margin-bottom:1.5rem;}
.steps-head h2{font-size:1.5rem;font-weight:800;}
.steps-head p{color:var(--t-text-dim);font-size:.92rem;margin-top:.2rem;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.step{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.6rem;transition:.18s;
}
.step:hover{border-color:var(--t-text-dim);transform:translateY(-3px);}
.step-num{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  background:var(--primary-light);color:var(--primary);
  border:1px solid rgba(245,165,36,.25);margin-bottom:1rem;
}
.step h3{font-size:1.06rem;font-weight:700;margin-bottom:.35rem;}
.step p{font-size:.92rem;color:var(--t-text-dim);margin:0;}

/* ---- 15. Pied de page ---- */
.site-footer{
  border-top:1px solid var(--t-line-soft);
  margin-top:1.5rem;padding:2.6rem 1.5rem 2.4rem;
}
.site-footer-inner{
  max-width:1140px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem;
}
.footer-brand{display:flex;align-items:center;gap:.6rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:1.05rem;margin-bottom:.6rem;}
.footer-tag{color:var(--t-text-dim);font-size:.88rem;max-width:300px;}
.footer-col h4{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--t-text-dim);margin-bottom:.85rem;font-weight:700;
}
.footer-col a{
  display:block;color:var(--text-muted);font-size:.9rem;
  padding:.26rem 0;text-decoration:none;transition:.14s;
}
.footer-col a:hover{color:var(--text);}
.footer-snap{color:var(--primary);font-weight:600;}
.site-footer-base{
  max-width:1140px;margin:1.8rem auto 0;padding-top:1.4rem;
  border-top:1px solid var(--t-line-soft);
  color:var(--t-text-dim);font-size:.82rem;text-align:center;
}

/* ---- 16. FAB ---- */
.fab{
  background:var(--primary) !important;
  color:var(--t-accent-ink) !important;
  border:none !important;
  box-shadow:0 8px 24px rgba(245,165,36,.4) !important;
  width:52px;height:52px;font-size:1.2rem;
}
.fab:hover{box-shadow:0 12px 30px rgba(245,165,36,.55) !important;}

/* ---- 17. Apparition au scroll ---- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ---- 18. Modales (modules) ---- */
.modal-content{
  background:var(--card-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
}
.modal-close:hover{background:var(--primary) !important;color:var(--t-accent-ink) !important;}
.form-input:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primary-light) !important;
}

/* =============================================================================
 * PANNEAU ADMIN — recolorisation
 * ============================================================================= */
.admin-body{background:var(--background) !important;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;}
.admin-header{
  background:var(--card-bg) !important;
  border-bottom:1px solid var(--border) !important;
}
.brand-icon{
  background:var(--primary) !important;color:var(--t-accent-ink) !important;
}
.admin-nav{
  background:rgba(11,11,13,.9) !important;
  border-bottom:1px solid var(--border) !important;
}
.admin-nav-tab.active{
  color:var(--primary) !important;
  border-bottom-color:var(--primary) !important;
}
.admin-nav-tab:hover{color:var(--text) !important;}
.nav-badge{
  background:var(--primary) !important;color:var(--t-accent-ink) !important;
}
.admin-tool-btn:hover{
  border-color:var(--primary) !important;color:var(--primary) !important;
}
.admin-section,.admin-card,.stat-card,.kpi-card,.filters-card,.data-table{
  background:var(--card-bg) !important;
  border-color:var(--border) !important;
}
.admin-card:hover,.kpi-card:hover{border-color:#34343a !important;}

/* =============================================================================
 * RESPONSIVE — PC / TABLETTE / MOBILE
 * ============================================================================= */

/* Tablette */
@media (max-width:900px){
  .module-row{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .site-footer-inner{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .hero-top{grid-template-columns:1fr;gap:1.6rem;}
  .hero-art{display:none;}
  .hero-text{text-align:center;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-features{justify-content:center;}
}

/* Mobile */
@media (max-width:600px){
  .site-nav-inner{padding:.75rem 1rem;}
  .hero{padding:3.2rem 1rem 2.6rem;}
  .hero-sub{font-size:1rem;}
  .hero .module.search-module{padding:1.2rem;}
  .page-wrap{padding:2.4rem 1rem 0;}
  .module{padding:1.2rem !important;}
  .hero-features{gap:.9rem;}
  .site-footer-inner{grid-template-columns:1fr;gap:1.6rem;}
  .footer-tag{max-width:none;}
  .poster-card{width:142px;height:214px;}
  .module-row{gap:1rem;}
}

/* Petits écrans */
@media (max-width:380px){
  .hero-title{font-size:1.85rem;}
  .nav-brand{font-size:1rem;}
}