/* ===============================
   Thème Industriel / Industrie 4.0
   Basé sur le modèle artistique, orienté usine digitale, IoT, data & automatisation
   =============================== */
:root {
  --steel-dark: #0e1419;
  --steel-darker: #070b0f;
  --steel-mid: #1f2a33;
  --steel-light: #2c3944;
  --panel-bg: rgba(22,32,40,0.85);
  --panel-border: rgba(120,170,200,0.18);
  --panel-border-strong: rgba(120,170,200,0.35);
  --text-primary: #e6edf2;
  --text-secondary: #9fb2c4;
  --accent-cyan: #15d1e4;
  --accent-amber: #ffb547;
  --accent-green: #2fd46d;
  --accent-red: #ff5f56;
  --gradient-accent: linear-gradient(120deg,#15d1e4 0%,#0ea5c7 45%,#1d72ff 100%);
  --gradient-amber: linear-gradient(135deg,#ffb547,#ff8c1a);
  --gradient-green: linear-gradient(135deg,#2fd46d,#0ea861);
  --shadow-soft: 0 4px 18px -2px rgba(0,0,0,0.55);
  --shadow-strong: 0 12px 40px -8px rgba(0,0,0,0.85);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --grid-line: rgba(120,170,200,0.05);
  --focus-ring: 0 0 0 2px rgba(21,209,228,0.4),0 0 0 4px rgba(21,209,228,0.15);
  font-size: 16px;
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family: 'Poppins', 'Orbitron', sans-serif;
  background: var(--steel-darker);
  color: var(--text-primary);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
.page-container { position:relative; min-height:100vh; }
/* Main content */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Fond grille / hexagones */
.indus-background {
  position:fixed; inset:0; z-index:-2; background:
    linear-gradient(180deg,rgba(10,18,24,0.9),rgba(10,18,24,0.95)),
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 80px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 80px);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hex-overlay { position:absolute; inset:0; background-image:radial-gradient(circle at 25% 25%,rgba(21,209,228,0.12),transparent 60%),radial-gradient(circle at 75% 65%,rgba(255,181,71,0.12),transparent 55%); mix-blend-mode:screen; opacity:.6; }

/* Particules industrielles */
.spark-particles { position:fixed; inset:0; pointer-events:none; z-index:-1; }
.spark { position:absolute; width:3px; height:3px; background:#15d1e4; border-radius:50%; animation: rise 14s linear infinite; box-shadow:0 0 10px 2px rgba(21,209,228,0.6); }
.spark:nth-child(2){ left:20%; animation-delay:-4s; }
.spark:nth-child(3){ left:40%; animation-delay:-8s; }
.spark:nth-child(4){ left:65%; animation-delay:-12s; }
.spark:nth-child(5){ left:82%; animation-delay:-2s; }
@keyframes rise { 0%{ transform:translateY(110vh) scale(.3); opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ transform:translateY(-10vh) scale(1); opacity:0;} }

/* Header */
.indus-header { padding:65px 0 45px; position:relative; }
.header-inner { max-width:1250px; margin:0 auto; padding:0 30px; display:flex; flex-direction:column; gap:40px; }
.profile-row { display:flex; gap:55px; align-items:center; flex-wrap:wrap; justify-content:center; }
.avatar-frame { width:180px; height:180px; border-radius:50%; position:relative; background: radial-gradient(circle at 30% 30%,#183341,#0e1419); padding:6px; box-shadow:0 4px 18px rgba(0,0,0,0.8),0 0 0 2px rgba(21,209,228,0.15); }
/* .avatar-frame::after { content:""; position:absolute; inset:0; border:2px solid transparent; border-radius:50%; background: conic-gradient(from 0deg, var(--accent-cyan), transparent 55%, var(--accent-amber) 70%, transparent 75%, var(--accent-cyan)); -webkit-mask:linear-gradient(#000,#000) padding-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) padding-box,linear-gradient(#000,#000); animation: spin 8s linear infinite; opacity:.55; }
*/
@keyframes spin { to{ transform:rotate(360deg);} }
.avatar-frame img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.name-block h1 { font-family:'Orbitron', 'Poppins', sans-serif; font-size:3.4rem; letter-spacing:2px; font-weight:700; background: var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px; }
.role-title { font-size:1.05rem; text-transform:uppercase; letter-spacing:.15rem; font-weight:500; color:var(--accent-amber); margin-bottom:18px; }
.badge-list { display:flex; flex-wrap:wrap; gap:10px; }
.badge { padding:6px 14px; font-size:.7rem; letter-spacing:.08rem; text-transform:uppercase; font-weight:600; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius: var(--radius-sm); position:relative; overflow:hidden; }
.badge::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(21,209,228,0.15),rgba(255,181,71,0.08)); opacity:0; transition:.4s; }
.badge:hover::before { opacity:1; }
.badge.sage { border-color:rgba(47,212,109,0.4); color:#2fd46d; }
.badge.sql { border-color:rgba(21,209,228,0.4); color:#15d1e4; }
.badge.os { border-color:rgba(255,181,71,0.4); color:#ffb547; }
.badge.pm { border-color:rgba(255,95,86,0.45); color:#ff5f56; }

.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.contact-chip { display:flex; gap:12px; align-items:center; background:var(--panel-bg); border:1px solid var(--panel-border); padding:14px 18px; border-radius:var(--radius-md); font-size:.85rem; position:relative; overflow:hidden; }
.contact-chip::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(21,209,228,0.18),transparent); opacity:0; transition:.5s; pointer-events:none !important; z-index:1; }
.contact-chip:hover::after { opacity:1; }
.contact-icon { font-size:1.1rem; color:var(--accent-cyan); }
.contact-chip a { color:var(--text-primary) !important; text-decoration:none !important; position:relative !important; z-index:10 !important; cursor:pointer !important; display:inline-block !important; pointer-events:auto !important; }
.contact-chip a:hover { color:var(--accent-cyan) !important; text-decoration:underline !important; }
.contact-chip a:active { color:#fff !important; }
.contact-chip:hover { box-shadow: var(--shadow-soft); border-color: var(--panel-border-strong); }

/* Titres */
.section-title { text-align:center; margin:70px 0 45px; position:relative; }
.section-title .label { font-family:'Orbitron', 'Poppins', sans-serif; font-size:2rem; font-weight:600; letter-spacing:1px; background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-title .bar { width:120px; height:4px; margin:18px auto 0; background:var(--gradient-accent); border-radius:2px; position:relative; overflow:hidden; }
.section-title .bar::after { content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent); animation: scan 3.5s linear infinite; }
@keyframes scan { to { left:110%; } }

/* Timeline industrielle */
.timeline { position:relative; padding:30px 0 40px; }
.timeline::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,#15d1e4,#1d72ff,#15d1e4); filter:drop-shadow(0 0 6px rgba(21,209,228,.6)); }
.tl-item { position:relative; display:flex; margin-bottom:55px; }
.tl-item:nth-child(odd) { flex-direction:row; }
.tl-item:nth-child(even) { flex-direction:row-reverse; }
.tl-marker { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:10; }
.tl-node { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#15d1e4,#0d5a68); border:2px solid #15d1e4; box-shadow:0 0 0 4px rgba(21,209,228,0.15),0 0 14px 4px rgba(21,209,228,0.4); position:relative; }
.tl-node::after { content:"⚙"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.65rem; color:#0e1419; font-weight:700; }
.tl-node.current { background:radial-gradient(circle at 30% 30%,#ffb547,#c96d00); border-color:#ffb547; box-shadow:0 0 0 4px rgba(255,181,71,0.2),0 0 18px 6px rgba(255,181,71,0.55); animation:pulse 2.6s infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }
.tl-year { margin-top:8px; background:var(--panel-bg); border:1px solid var(--panel-border); padding:4px 10px; border-radius:var(--radius-sm); font-size:.7rem; letter-spacing:.08rem; font-weight:600; }

.tl-content { width:46%; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:26px 28px 28px; box-shadow:var(--shadow-soft); position:relative; overflow:hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition:.4s; }
.tl-content::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(21,209,228,0.15),rgba(255,181,71,0.05)); opacity:0; transition:.5s; }
.tl-content:hover { transform:translateY(-6px); box-shadow:var(--shadow-strong); border-color:var(--panel-border-strong); }
.tl-content:hover::before { opacity:1; }
.company-chip { width:62px; height:62px; border-radius:14px; background:#fff; padding:6px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.company-chip img { width:100%; height:100%; object-fit:contain; }
.job-title { font-size:1.15rem; font-weight:600; color:var(--accent-cyan); margin-bottom:6px; }
.company-name { font-size:.95rem; font-weight:500; color:var(--text-secondary); margin-bottom:12px; }
.job-desc { font-size:.82rem; color:var(--text-secondary); line-height:1.5; margin-bottom:18px; }
.stack { display:flex; flex-wrap:wrap; gap:8px; }
.tech { font-size:.65rem; letter-spacing:.05rem; text-transform:uppercase; padding:4px 10px; font-weight:600; background:rgba(21,209,228,0.12); border:1px solid rgba(21,209,228,0.35); border-radius:var(--radius-sm); }

/* Compétences */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:28px; }
.skill-block { background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:28px 26px 30px; position:relative; overflow:hidden; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-soft); transition:.4s; }
.skill-block::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(21,209,228,0.18),rgba(29,114,255,0.08)); opacity:0; transition:.5s; }
.skill-block:hover { transform:translateY(-6px); border-color:var(--panel-border-strong); box-shadow:var(--shadow-strong); }
.skill-block:hover::before { opacity:1; }
.skill-head { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.skill-head .ico { font-size:1.8rem; filter:drop-shadow(0 0 6px rgba(21,209,228,0.5)); }
.skill-head h3 { font-size:1.05rem; letter-spacing:.05rem; text-transform:uppercase; font-weight:600; }
.skill-item { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.skill-name { font-size:.78rem; font-weight:500; letter-spacing:.03rem; }
.skill-bar { width:130px; height:8px; background:rgba(255,255,255,0.07); border-radius:4px; position:relative; overflow:hidden; }
.skill-bar span { position:absolute; inset:0; background:var(--gradient-accent); border-radius:4px; transform-origin:left center; }
.skill-bar .expert { width:95%; }
.skill-bar .advanced { width:85%; }
.skill-bar .intermediate { width:72%; }

/* Formations & Projets (cartes unifiées) */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px; }
.card { background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:26px 22px 24px; position:relative; overflow:hidden; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-soft); transition:.45s; }
.card::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(21,209,228,0.16),rgba(255,181,71,0.05)); opacity:0; transition:.5s; }
.card:hover { transform:translateY(-6px); border-color:var(--panel-border-strong); box-shadow:var(--shadow-strong); }
.card:hover::before { opacity:1; }
.card.badge-accent { border:1px solid rgba(21,209,228,0.4); }
.flag { position:absolute; top:14px; left:16px; padding:6px 10px; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06rem; background:var(--steel-mid); border:1px solid var(--panel-border); border-radius:6px; color:var(--accent-cyan); box-shadow:0 2px 6px rgba(0,0,0,.5); }
.flag.ia { background:#152d33; color:#ffb547; border-color:rgba(255,181,71,0.5); }
.flag.web { background:#152832; color:#15d1e4; border-color:rgba(21,209,228,0.5); }
.flag.migration { background:#153328; color:#2fd46d; border-color:rgba(47,212,109,0.55); }
.flag.bi { background:#28152f; color:#d26fff; border-color:rgba(210,111,255,0.45); }
.status { font-size:.56rem; font-weight:700; letter-spacing:.08rem; text-transform:uppercase; margin:0 80% 10px; color:var(--accent-cyan); }
.status.done { color:#2fd46d; }
.card h3 { font-size:1.02rem; font-weight:600; margin:20px 0 10px; color:var(--accent-cyan); }
.card p { font-size:.74rem; color:var(--text-secondary); line-height:1.45; margin-bottom:12px; }
.meta-box { font-size:.62rem; font-weight:600; letter-spacing:.06rem; padding:6px 10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:6px; color:var(--text-primary); margin-top:4px; }
.card ul { list-style:none; padding:0; margin:0 0 8px; }
.card ul li { padding:2px 0; font-size:.65rem; }

/* Open Source / Industrie 4.0 */
.opensource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.os-card { position:relative; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:26px 22px 30px; overflow:hidden; box-shadow:var(--shadow-soft); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.45s; text-align:center; }
.os-card::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(21,209,228,0.16),rgba(29,114,255,0.05),rgba(255,181,71,0.08)); opacity:0; transition:.6s; }
.os-card:hover { transform:translateY(-8px); border-color:var(--panel-border-strong); box-shadow:var(--shadow-strong); }
.os-card:hover::before { opacity:1; }
.os-ico { font-size:2.6rem; margin-bottom:16px; filter:drop-shadow(0 0 10px rgba(21,209,228,.5)); }
.os-card h3 { font-size:1rem; font-weight:600; letter-spacing:.05rem; color:var(--accent-cyan); margin-bottom:10px; }
.os-card p { font-size:.7rem; color:var(--text-secondary); line-height:1.5; margin-bottom:14px; }
.os-features { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.os-features span { font-size:.55rem; text-transform:uppercase; letter-spacing:.07rem; font-weight:600; padding:4px 8px; background:rgba(21,209,228,0.12); border:1px solid rgba(21,209,228,0.35); border-radius:4px; }
.philosophy { margin-top:48px; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius-lg); padding:34px 32px 38px; position:relative; overflow:hidden; box-shadow:var(--shadow-soft); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.philosophy::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(21,209,228,0.14),rgba(255,181,71,0.05)); opacity:0; transition:.6s; }
.philosophy:hover::before { opacity:1; }
.philosophy h3 { font-size:1.05rem; font-family:'Orbitron', 'Poppins', sans-serif; letter-spacing:.08rem; font-weight:600; margin-bottom:14px; background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.philosophy p { font-size:.78rem; color:var(--text-secondary); line-height:1.55; }

/* Impression minimale */
@media print { .indus-background,.hex-overlay,.spark-particles { display:none; } body, .page-container { background:#fff !important; color:#000 !important; } .card, .tl-content, .skill-block, .os-card, .philosophy { box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:1px solid #999 !important; } }

/* Responsive */
@media (max-width: 900px) {
  .tl-content { width:100%; }
  .tl-item { flex-direction:column !important; padding-left:70px; }
  .tl-marker { left:30px; transform:none; }
  .timeline::before { left:30px; }
  .profile-row { flex-direction:column; }
  .name-block h1 { font-size:2.4rem; }
}