/* ===================================================================
   PROJECT PAGE — Shared Styles
   Used by: project-elt-retail, project-retail, project-supply-chain
   =================================================================== */

/* ===== RESET & ROOT ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e1117;
  --surface:rgba(255,255,255,.06);
  --surface-hover:rgba(255,255,255,.10);
  --text:#f0f2f7;
  --text-muted:#7a8494;
  --accent:#5b8cff;
  --accent-2:#8b5cf6;
  --accent-glow:rgba(91,140,255,.25);
  --border:rgba(255,255,255,.08);
  --radius:20px;
  --font-head:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --surface:rgba(255,255,255,.7);
  --surface-hover:rgba(255,255,255,.92);
  --text:#0e1320;
  --text-muted:rgba(14,19,32,.70);
  --border:rgba(14,19,32,.10);
  --accent:#4f7cff;
  --accent-2:#7b5cff;
  --accent-glow:rgba(91,140,255,.25);
}
:root[data-theme="light"] .nav{
  background:rgba(246,247,251,.9);
  border-bottom:1px solid var(--border);
}
[data-lang="fr"] .lang-en{display:none}
[data-lang="en"] .lang-fr{display:none}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}


/* ===== BACKGROUND ===== */
.bg-mesh,.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
}
.bg-mesh{
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(91,140,255,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(139,92,246,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 60% 10%, rgba(91,140,255,.06) 0%, transparent 60%);
}
.bg-grid{
  opacity:.035;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}
:root[data-theme="light"] .bg-grid{
  opacity:.055;
  background-image:
    linear-gradient(rgba(14,19,32,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,19,32,.4) 1px, transparent 1px);
}


/* ===== NAVIGATION ===== */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;
  background:rgba(14,17,23,.75);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.nav .logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-head);
  font-weight:800;font-size:1.3rem;color:var(--text);
}
.logo-ring{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:var(--accent);
  font-family:var(--font-body);
}
.nav-right{display:flex;align-items:center;gap:10px}
.btn-back,.btn-fullscreen{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--border);
  font-size:.84rem;font-weight:600;
  background:var(--surface);
  color:var(--text-muted);
  transition:background .2s, border-color .2s, color .2s;
}
.btn-back:hover,.btn-fullscreen:hover{
  background:var(--surface-hover);
  color:var(--text);
  border-color:rgba(255,255,255,.18);
}
.btn-fullscreen{
  color:var(--accent);
  border-color:rgba(91,140,255,.3);
  background:rgba(91,140,255,.08);
}
.btn-fullscreen:hover{
  background:rgba(91,140,255,.15);
  border-color:var(--accent);
}


/* ===== TOGGLES ===== */
.theme-toggle,.lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle:hover,.lang-toggle:hover{
  transform:translateY(-2px);
  background:var(--surface-hover);
  border-color:var(--accent);
}
.theme-toggle span,.lang-toggle span{
  font-size:1.25rem;line-height:1;
}


/* ===== MAIN LAYOUT ===== */
.main{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;
  padding:100px 24px 60px;
}
.case-header{margin-bottom:40px}
.case-label{
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--accent);margin-bottom:10px;
}
.case-title{
  font-family:var(--font-head);
  font-size:clamp(1.9rem,4vw,2.8rem);
  font-weight:800;color:var(--text);
  margin-bottom:12px;line-height:1.1;
}
.case-subtitle{
  font-size:1rem;color:var(--text-muted);
  line-height:1.6;
}


/* ===== INFO GRID ===== */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-bottom:32px;
}


/* ===== CARDS ===== */
.card{
  padding:24px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  transition:transform .2s, border-color .2s;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(91,140,255,.3);
}
.card h3{
  font-family:var(--font-head);
  font-size:1.2rem;font-weight:700;
  color:var(--text);margin-bottom:14px;
}
.card p{
  font-size:.95rem;line-height:1.7;
  color:var(--text-muted);
}
.card p+p{margin-top:8px}


/* ===== METRICS ===== */
.metrics-mini{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
  margin-top:20px;
}
.metric-mini{
  text-align:center;
  padding:16px 10px;
  border-radius:14px;
  background:rgba(91,140,255,.05);
  border:1px solid rgba(91,140,255,.15);
  transition:transform .2s, border-color .2s;
}
.metric-mini:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
}
.metric-mini.warning{
  background:rgba(255,107,107,.08);
  border:1px solid rgba(255,107,107,.2);
}
.metric-mini.warning:hover{border-color:#ff6b6b}
.metric-value{
  font-family:var(--font-head);
  font-size:1.6rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
}
.metric-value.warning{
  color:#ff6b6b;
  background:none;
  -webkit-text-fill-color:#ff6b6b;
}
.metric-label{
  font-size:.72rem;font-weight:600;
  color:var(--text-muted);
  margin-top:6px;
  text-transform:uppercase;letter-spacing:.04em;
}


/* ===== TECH STACK ===== */
.tech-stack{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-top:16px;
}
.tech-tag{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(91,140,255,.1);
  border:1px solid rgba(91,140,255,.2);
  color:var(--accent);
  font-size:.8rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .15s, border-color .15s;
}
.tech-tag:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
}


/* ===== GITHUB BUTTON ===== */
.btn-github{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:none;
  color:#fff;
  font-weight:700;font-size:.92rem;
  transition:all .2s ease;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(91,140,255,.3);
  margin-top:20px;
  width:100%;
  justify-content:center;
}
.btn-github:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(91,140,255,.4);
}
.github-icon{
  width:20px;height:20px;fill:currentColor;
}


/* ===== ARCHITECTURE FLOW ===== */
.architecture-flow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin:24px 0;
}
.arch-step{
  text-align:center;
  padding:20px;
  border-radius:12px;
  background:rgba(91,140,255,.06);
  border:1px solid rgba(91,140,255,.18);
  position:relative;
}
.arch-step::after{
  content:"→";
  position:absolute;
  right:-24px;
  top:50%;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:1.5rem;
  font-weight:700;
}
.arch-step:last-child::after{display:none}
.arch-icon{font-size:2rem;margin-bottom:8px}
.arch-title{font-weight:700;color:var(--text);margin-bottom:6px}
.arch-desc{font-size:.82rem;color:var(--text-muted)}


/* ===== INSIGHTS ===== */
.insights-section{margin:48px 0}
.insights-title{
  font-family:var(--font-head);
  font-size:1.8rem;
  font-weight:700;
  margin:48px 0 24px 0;
  display:flex;
  align-items:center;
  gap:12px;
}
.insight-card{
  background:linear-gradient(135deg,rgba(91,140,255,.06),rgba(139,92,246,.04));
  border:1px solid rgba(91,140,255,.2);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:20px;
}
.insight-card h4{
  font-family:var(--font-head);
  font-size:1.2rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.insight-icon{font-size:1.4rem}
.insight-content{
  color:var(--text-muted);
  font-size:.95rem;
  line-height:1.7;
}
.insight-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.insight-item{
  padding-left:20px;
  position:relative;
  font-size:.92rem;
}
.insight-item::before{
  content:"→";
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
}
.insight-highlight{
  color:var(--accent);
  font-weight:600;
}
.insight-highlight.warning{color:#ff6b6b}


/* ===== TIMELINE ===== */
.timeline{display:grid;gap:14px;margin-top:8px}
.timeline-item{
  display:flex;gap:12px;align-items:flex-start;
}
.timeline-marker{
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);
  margin-top:6px;flex-shrink:0;
}
.timeline-content{
  flex:1;font-size:.95rem;
  color:var(--text-muted);
}


/* ===== BULLETS / RECOMMENDATIONS ===== */
.bullets{display:grid;gap:14px;margin-top:6px}
.bullet{
  display:flex;gap:12px;align-items:flex-start;
  padding:15px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.bullet:hover{
  border-color:rgba(91,140,255,.2);
  background:rgba(255,255,255,.05);
}
.bullet.active{
  background:rgba(91,140,255,.1);
  border-color:rgba(91,140,255,.3);
}
.bullet-ico{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(139,92,246,.12));
  border:1px solid rgba(91,140,255,.15);
  font-size:1.25rem;flex-shrink:0;
}
.bullet-content{flex:1}
.bullet-content strong{
  display:block;font-size:.98rem;
  color:var(--text);margin-bottom:4px;
}
.bullet-details{
  display:none;
  font-size:.92rem;color:var(--text-muted);
  margin-top:4px;line-height:1.6;
}
.bullet.active .bullet-details{display:block}


/* ===== EMBEDS ===== */
/* Plotly iframe */
.embed-frame{
  width:100%;height:620px;
  border:none;border-radius:var(--radius);
  overflow:hidden;
}
.embed-fallback{
  margin-top:12px;
  font-size:.85rem;color:var(--text-muted);
  text-align:center;
}
.embed-fallback a{
  color:var(--accent);
  text-decoration:underline;
}

/* Power BI container */
.powerbi-container{
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin-top:12px;
}
.powerbi-frame{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:none;border-radius:var(--radius);
}

/* Responsive embed */
.embed-responsive{
  position:relative;width:100%;
  padding-top:56.25%;
  border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  margin:32px 0;
}
.embed-responsive iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
}
.embed-note{
  font-size:.9rem;color:var(--text-muted);
  line-height:1.6;padding:16px;
  background:rgba(91,140,255,.06);
  border-left:3px solid var(--accent);
  border-radius:8px;margin-top:16px;
}
.embed-note strong{color:var(--accent)}


/* ===== CONCLUSION ===== */
.conclusion{margin-top:32px}
.conclusion--highlight{
  background:linear-gradient(135deg,rgba(91,140,255,.08),rgba(139,92,246,.06));
  border:1px solid rgba(91,140,255,.3);
  border-radius:var(--radius);
  padding:32px;
  margin-top:48px;
}
.conclusion--highlight h3{
  font-family:var(--font-head);
  font-size:1.5rem;font-weight:700;
  margin-bottom:16px;
}
.conclusion--highlight p{
  color:var(--text-muted);
  line-height:1.8;margin-bottom:14px;
}
.conclusion--highlight p:last-child{margin-bottom:0}


/* ===== RESPONSIVE ===== */
@media(max-width:760px){
  .info-grid{grid-template-columns:1fr}
  .architecture-flow{grid-template-columns:1fr}
  .arch-step::after{display:none}
  .metrics-mini{grid-template-columns:1fr}
  .nav{padding:12px 16px}
  .nav .logo{font-size:1.1rem;gap:8px}
  .logo-ring{width:30px;height:30px;font-size:.65rem}
  .btn-back,.btn-fullscreen{font-size:.8rem;padding:7px 12px}
  .theme-toggle,.lang-toggle{width:38px;height:38px}
  .main{padding:90px 20px 50px}
  .case-title{font-size:clamp(1.6rem,5vw,2.2rem)}
}
@media(max-width:520px){
  .nav{padding:10px 14px;gap:6px}
  .nav .logo{font-size:.95rem;gap:6px}
  .logo-ring{width:28px;height:28px;font-size:.6rem}
  .nav-right{gap:4px}
  .btn-back .back-label{display:none}
  .btn-fullscreen .fs-label{display:none}
  .btn-back,.btn-fullscreen{padding:7px 10px;font-size:.78rem}
  .theme-toggle,.lang-toggle{width:34px;height:34px}
  .main{padding:80px 14px 40px}
  .case-title{font-size:1.5rem}
  .case-subtitle{font-size:.88rem}
  .card{padding:20px 18px}
  .card h3{font-size:1.05rem}
  .embed-frame{height:380px}
  .bullet{padding:14px 12px;gap:10px}
  .bullet-ico{width:34px;height:34px;font-size:1.1rem}
  .bullet-content strong{font-size:.92rem}
  .bullet-details{font-size:.85rem}
  .timeline-item{gap:10px}
  .timeline-marker{width:10px;height:10px;margin-top:5px}
  .timeline-content{font-size:.88rem}
  .metrics-mini{gap:8px}
  .metric-mini{padding:12px 8px}
  .metric-value{font-size:1.3rem}
}
@media(max-width:360px){
  .embed-frame{height:320px}
  .card{padding:16px 14px}
  .bullet{padding:12px 10px}
}