:root{
  --black:#000000;
  --white:#ffffff;
  --turquoise:#0097B2
;
  --yellow:#f59e0b;
  --accent:#ec4899;
  --success:#9af7d8;
  --warning:#f59e0b;
  --error:#ef4444;
  --bg:#ffffff;
  --bg-elev:#f9fafb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#1f2937;
  --brand:var(--turquoise);
  --brand-2:var(--yellow);
  --border:rgba(0,0,0,.1);
  --shadow:0 6px 30px rgba(0,0,0,.1);
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-accent: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #f8fafc 100%);
  color:var(--text);
}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:saturate(140%) blur(10px); margin: -5px auto; padding: 0 -10px; border-bottom:1px solid var(--border);z-index:50;box-shadow:var(--shadow)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:700;letter-spacing:.4px;text-decoration:none;color:var(--text);font-size:1.25rem}
.brand span{color:var(--brand)}
.brand-logo{display:flex;align-items:center;margin-right:16px}
.brand-logo img{height:100px;width:auto;display:block;border-radius:6px;object-fit:contain}
.nav-wrap{gap:18px}
.site-nav{display:flex;align-items:center;gap:28px}

/* Account Section Styles */
.account-section {
  position: relative;
  margin-left: auto;
}

.account-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-toggle:hover {
  background: var(--bg-elev);
  transform: scale(1.1);
}

.account-icon {
  font-size: 1.5rem;
  color: var(--text);
}

.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  margin-top: 8px;
}

.account-section:hover .account-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
}

.user-email {
  color: var(--muted);
  font-size: 0.85rem;
}

.account-menu {
  padding: 12px 0;
}

.account-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 0.95rem;
}

.account-link:hover {
  background: var(--bg-elev);
  color: var(--brand);
}

.account-link.logout:hover {
  background: #fef2f2;
  color: var(--error);
}

.link-icon {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}
.menu{display:flex;list-style:none;margin:0;padding:0;gap:8px}
.menu-item{position:relative}
.menu-link{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);transition:background .2s, color .2s, transform .15s}
.menu-item.active>.menu-link,.menu-link:hover{background:rgba(26,188,156,.16)}
.menu-link:active{transform:translateY(1px)}
.submenu{position:absolute;left:0;top:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;list-style:none;margin:8px 0 0;padding:8px;min-width:320px;box-shadow:var(--shadow);display:none}
.submenu.mega-grid{display:none;min-width:700px;padding:14px}
.menu-item:hover>.submenu.mega-grid{display:grid;grid-template-columns:repeat(4, minmax(150px,1fr));gap:8px}
.submenu.mega-grid .submenu-item{margin:0}
.submenu.mega-grid .submenu-link{white-space:normal}
.menu-item:hover>.submenu{display:block}
.submenu-item{margin:0}
.submenu-link{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text)}
.submenu-link:hover{background:rgba(26,188,156,.12)}
.submenu-toggle{display:none}
.chevron{width:18px;height:18px;opacity:.7}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:8px;border-radius:10px;transition:background .2s}
.nav-toggle:hover{background:rgba(250,204,21,.12)}
.icon{display:inline-flex;width:22px;height:22px}

.hero{padding:72px 0;background:radial-gradient(1000px 400px at 70% -20%, rgba(26,188,156,.22), transparent 60%), radial-gradient(800px 400px at 0% -10%, rgba(250,204,21,.18), transparent 60%)}
.hero h1{font-size:2.3rem;margin:0 0 10px}
.hero p{color:var(--muted);max-width:760px}

.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid var(--border);color:var(--text);transition:transform .15s, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));border:none;color:#0a0a0a;font-weight:700}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px;font-size:.9rem}
.btn.full-width{width:100%;justify-content:center}
.btn.whatsapp{background:#25d366;border-color:#25d366;color:white}

/* Formations */
.card .banner{display:flex;justify-content:space-between; background-color: var(--success); align-items:center;;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;margin:-4px 0 12px 0}
.card .chapters{color:var(--muted);padding-left:18px;margin:8px 0 14px}
.card .chapters li{margin:4px 0}
.card .actions{display:flex;justify-content:flex-end}

/* Contact Page */
.contact-grid{display:grid;grid-template-columns:1fr 400px;gap:40px;margin-top:20px}
.contact-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.contact-form h2{margin:0 0 20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:500}
.form-group input, .form-group select, .form-group textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);font-size:1rem}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--brand);outline:none}
.alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;margin-bottom:20px}
.alert.success{background:rgba(26,188,156,.15);border:1px solid rgba(26,188,156,.3);color:#a7f3d0}
.alert.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#fca5a5}

.contact-info{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.contact-info h2{margin:0 0 20px}
.info-item{display:flex;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.info-item:last-child{border-bottom:none;margin-bottom:0}
.info-icon{font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(26,188,156,.1);border-radius:10px}
.info-item h4{margin:0 0 4px;color:var(--text)}
.info-item p{margin:0;color:var(--muted)}
.info-item a{color:var(--brand);text-decoration:none}
.info-item a:hover{text-decoration:underline}

.social-links{margin-top:24px}
.social-links h4{margin:0 0 12px}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.social-link{display:block;padding:8px 12px;text-align:center;text-decoration:none;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;transition:background .2s}
.social-link:hover{background:rgba(26,188,156,.1)}

.map-container{border-radius:16px;overflow:hidden;border:1px solid var(--border)}

/* Students Area */
.login-container{display:flex;justify-content:center;align-items:center;min-height:60vh}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px;max-width:400px;width:100%}
.login-header{text-align:center;margin-bottom:24px}
.login-header h1{margin:0 0 8px}
.login-form .form-group{margin-bottom:20px}
.demo-info{margin-top:24px;padding:16px;background:rgba(250,204,21,.1);border:1px solid rgba(250,204,21,.2);border-radius:10px;text-align:center}
.demo-info h4{margin:0 0 8px;color:var(--yellow)}
.demo-info p{margin:4px 0;color:var(--muted)}
.demo-info code{background:rgba(255,255,255,.1);padding:2px 6px;border-radius:4px;font-size:.9rem}

.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}

.dashboard-actions {
  display: flex;
  gap: 12px;
}

/* Profile Styles */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.profile-content {
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow-sm);
}

.profile-avatar {
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
}

.profile-info h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1.8rem;
}

.profile-email {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.profile-details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.detail-section {
  margin-bottom: 32px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h3 {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 1.3rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item label {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item span {
  color: var(--text);
  font-size: 1.1rem;
}

.profile-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center}
.stat-number{font-size:2rem;font-weight:700;color:var(--brand);margin-bottom:4px}
.stat-label{color:var(--muted);font-size:.9rem}

.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.dashboard-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.dashboard-section h2{margin:0 0 20px}

/* Formations */
.formations-list{display:grid;gap:16px}
.formation-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px}
.formation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.formation-header h3{margin:0;font-size:1.1rem}
.status{font-size:.8rem;padding:4px 8px;border-radius:6px;font-weight:500}
.status.en-cours{background:rgba(26,188,156,.2);color:var(--brand)}
.formation-progress{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.progress-bar{flex:1;height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg, var(--brand), var(--brand-2));transition:width .3s}
.progress-text{font-size:.9rem;color:var(--muted);min-width:40px}

/* Paiements */
.paiements-list{display:grid;gap:16px}
.paiement-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px}
.paiement-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.paiement-header h4{margin:0;font-size:1rem}
.status.payé{background:rgba(26,188,156,.2);color:var(--brand)}
.status.en-attente{background:rgba(250,204,21,.2);color:var(--yellow)}
.paiement-details p{margin:4px 0;font-size:.9rem;color:var(--muted)}

/* Attestations */
.attestations-list{display:grid;gap:16px}
.attestation-card{display:flex;align-items:center;gap:16px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px}
.attestation-icon{font-size:2rem}
.attestation-content h4{margin:0 0 4px}
.attestation-content p{margin:0;color:var(--muted);font-size:.9rem}

/* Notifications */
.notifications-list{display:grid;gap:12px}
.notification-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px;position:relative}
.notification-card.unread{border-left:4px solid var(--brand)}
.notification-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.notification-header h4{margin:0;font-size:1rem}
.notification-date{font-size:.8rem;color:var(--muted)}
.notification-card p{margin:0;color:var(--muted);font-size:.9rem}
.unread-indicator{position:absolute;top:16px;right:16px;color:var(--brand);font-size:1.2rem}

/* Creation Web Page */
.service-tabs{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.service-tab{display:inline-flex;align-items:center;padding:12px 20px;border-radius:12px;text-decoration:none;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);transition:all .2s;font-weight:500}
.service-tab:hover{background:rgba(26,188,156,.1);border-color:var(--brand)}
.service-tab.active{background:var(--turquoise);border-color:transparent;color:#0a0a0a;font-weight:600}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px;margin-top:24px}
.portfolio-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .2s, box-shadow .2s}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.portfolio-image{position:relative;height:200px;overflow:hidden}
.portfolio-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.portfolio-card:hover .portfolio-image img{transform:scale(1.05)}
.portfolio-overlay{position:absolute;top:12px;right:12px}
.portfolio-category{background:rgba(26,188,156,.9);color:white;padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:500}
.portfolio-content{padding:20px}
.portfolio-content h3{margin:0 0 12px;color:var(--text)}
.portfolio-content p{margin:0 0 16px;color:var(--muted);line-height:1.6}
.portfolio-tech{display:flex;gap:8px;flex-wrap:wrap}
.tech-tag{background:rgba(250,204,21,.15);color:var(--yellow);padding:4px 8px;border-radius:6px;font-size:.8rem;border:1px solid rgba(250,204,21,.3)}

/* Pricing Cards */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:24px;margin-top:24px}
.pricing-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;position:relative;transition:transform .2s, box-shadow .2s}
.pricing-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.pricing-card.popular{border-color:var(--brand);box-shadow:0 0 0 2px rgba(26,188,156,.2)}
.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:white;padding:6px 16px;border-radius:20px;font-size:.8rem;font-weight:600}
.pricing-header{text-align:center;margin-bottom:24px}
.pricing-header h3{margin:0 0 16px;color:var(--text);font-size:1.5rem}
.pricing-price{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:12px}
.currency{font-size:1.2rem;color:var(--muted)}
.amount{font-size:2.5rem;font-weight:700;color:var(--brand)}
.pricing-description{color:var(--muted);margin:0}
.pricing-features{margin-bottom:24px}
.pricing-features ul{list-style:none;padding:0;margin:0}
.pricing-features li{position:relative;padding:8px 0;padding-left:24px;color:var(--muted)}
.pricing-features li::before{content:'✓';position:absolute;left:0;color:var(--brand);font-weight:bold}
.pricing-footer{text-align:center}
.delai{margin-bottom:16px;color:var(--muted);font-size:.9rem}

/* Infographics */
.infographie-grid{display:grid;gap:32px;margin-top:24px}
.infographie-category h3{margin:0 0 20px;color:var(--text);border-bottom:2px solid var(--brand);padding-bottom:8px}
.media-showcase{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:16px}
.media-item{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:transform .2s}
.media-item:hover{transform:translateY(-4px)}
.media-item img, .media-item video{width:100%;height:200px;object-fit:cover;display:block}
.media-info{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.8);color:white;padding:12px;font-size:.9rem}
.cta-section{text-align:center;margin-top:40px;padding:32px;background:var(--card);border:1px solid var(--border);border-radius:16px}
.cta-section h3{margin:0 0 12px;color:var(--text)}
.cta-section p{margin:0 0 20px;color:var(--muted)}

/* Meubles Page */
.meubles-tabs{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.meuble-tab{display:inline-flex;align-items:center;padding:12px 20px;border-radius:12px;text-decoration:none;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);transition:all .2s;font-weight:500}
.meuble-tab:hover{background:rgba(26,188,156,.1);border-color:var(--brand)}
.meuble-tab.active{background:var(--turquoise);border-color:transparent;color:#0a0a0a;font-weight:600}

.meubles-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:24px;margin-top:24px}
.meuble-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .2s, box-shadow .2s}
.meuble-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4)}

.meuble-image{position:relative;height:220px;overflow:hidden}
.meuble-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.meuble-card:hover .meuble-image img{transform:scale(1.05)}
.meuble-overlay{position:absolute;top:12px;right:12px}
.disponibilite-badge{background:rgba(26,188,156,.9);color:white;padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:500}

.meuble-content{padding:20px}
.meuble-content h3{margin:0 0 8px;color:var(--text);font-size:1.2rem}
.localisation{color:var(--muted);margin:0 0 16px;font-size:.9rem}
.meuble-specs{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.spec{background:rgba(250,204,21,.15);color:var(--yellow);padding:4px 8px;border-radius:6px;font-size:.8rem;border:1px solid rgba(250,204,21,.3)}
.meuble-price{margin-bottom:16px}
.prix{font-size:1.3rem;font-weight:700;color:var(--brand)}
.meuble-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Tarifs Section */
.tarifs-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;margin-top:24px}
.tarif-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;position:relative;transition:transform .2s}
.tarif-card:hover{transform:translateY(-4px)}
.tarif-card.popular{border-color:var(--brand);box-shadow:0 0 0 2px rgba(26,188,156,.2)}
.tarif-header{text-align:center;margin-bottom:20px}
.tarif-header h3{margin:0 0 12px;color:var(--text);font-size:1.4rem}
.tarif-prix{color:var(--muted);font-size:1.1rem}
.tarif-features{list-style:none;padding:0;margin:0}
.tarif-features li{position:relative;padding:6px 0;padding-left:20px;color:var(--muted)}
.tarif-features li::before{content:'✓';position:absolute;left:0;color:var(--brand);font-weight:bold}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));gap:24px;margin-top:24px}
.testimonial-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px}
.testimonial-header{display:flex;gap:16px;margin-bottom:16px;align-items:center}
.client-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--brand)}
.client-info h4{margin:0 0 4px;color:var(--text)}
.client-formation{color:var(--muted);margin:0 0 8px;font-size:.9rem}
.rating{display:flex;gap:2px}
.star{color:var(--muted);font-size:1.1rem}
.star.filled{color:var(--yellow)}
.testimonial-content .meuble-location{color:var(--brand);margin:0 0 8px;font-size:.9rem}
.commentaire{color:var(--text);margin:0;font-style:italic;line-height:1.6}

/* Innovations */
.innovations-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px;margin-top:24px}
.innovation-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}
.innovation-icon{font-size:3rem;margin-bottom:16px}
.innovation-card h3{margin:0 0 12px;color:var(--text)}
.innovation-card p{color:var(--muted);margin:0;line-height:1.6}

/* Meuble Detail Page */
.breadcrumb{margin-bottom:24px}
.breadcrumb a{color:var(--brand);text-decoration:none;font-weight:500}
.breadcrumb a:hover{text-decoration:underline}

.meuble-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;gap:24px}
.meuble-info{flex:1}
.meuble-info h1{margin:0 0 16px;color:var(--text)}
.meuble-meta{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.categorie{background:rgba(26,188,156,.2);color:var(--brand);padding:6px 12px;border-radius:8px;font-size:.9rem;font-weight:500}
.prix{background:rgba(250,204,21,.2);color:var(--yellow);padding:6px 12px;border-radius:8px;font-size:.9rem;font-weight:500}
.disponibilite{background:rgba(26,188,156,.2);color:var(--brand);padding:6px 12px;border-radius:8px;font-size:.9rem;font-weight:500}
.adresse{color:var(--muted);margin:0;font-size:1rem}
.meuble-actions{display:flex;gap:8px;flex-direction:column}

/* Gallery */
.gallery-container{margin-bottom:40px}
.main-photo{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);margin-bottom:20px}
.main-photo img{width:100%;height:500px;object-fit:cover;display:block}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.7);border:none;color:white;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:1.5rem;transition:background .2s}
.gallery-nav:hover{background:rgba(0,0,0,.9)}
.gallery-nav.prev{left:20px}
.gallery-nav.next{right:20px}
.photo-counter{position:absolute;bottom:20px;right:20px;background:rgba(0,0,0,.7);color:white;padding:8px 12px;border-radius:8px;font-size:.9rem}

.thumbnails{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:12px;max-width:600px}
.thumbnail{position:relative;border-radius:12px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .2s}
.thumbnail.active{border-color:var(--brand)}
.thumbnail img{width:100%;height:80px;object-fit:cover;display:block}

/* Details Grid */
.meuble-details-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:24px}
.details-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.details-section h2{margin:0 0 20px;color:var(--text);border-bottom:2px solid var(--brand);padding-bottom:8px}

.specs-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:16px}
.spec-item{display:flex;gap:12px;align-items:center}
.spec-icon{font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(26,188,156,.1);border-radius:10px}
.spec-content{display:flex;flex-direction:column}
.spec-label{color:var(--muted);font-size:.8rem;margin-bottom:2px}
.spec-value{color:var(--text);font-weight:600}

.description-text{color:var(--muted);line-height:1.6;margin:0}

.equipements-grid{display:grid;gap:8px}
.equipement-item{display:flex;align-items:center;gap:8px;color:var(--muted)}
.check-icon{color:var(--brand);font-weight:bold}

.disponibilite-info p{margin:8px 0;color:var(--muted)}
.status{background:rgba(26,188,156,.2);color:var(--brand);padding:4px 8px;border-radius:6px;font-size:.8rem;font-weight:500}

.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.media-tile{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:#0f1526}
.media-tile img, .media-tile video{width:100%;height:180px;object-fit:cover;display:block}
.media-tile .label{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:4px 8px;border-radius:8px;font-size:.85rem;border:1px solid rgba(255,255,255,.06)}

.section{padding:40px 0}
.section h2{margin:0 0 14px}

.site-footer{margin-top:60px;border-top:1px solid var(--border);background:#d6d9e4;color:#24292e}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:36px 0}
.site-footer h4{margin:0 0 12px;color:--turquoise}
.footer-desc{color:--turquoise;line-height:1.7;margin:0 0 10px}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:8px 0}
.foot-links a{color:--turquoise;text-decoration:none;opacity:.8}
.foot-links a:hover{opacity:1;color:--turquoise}
.social-mini{display:flex;gap:10px;margin-top:10px}
.social-mini a{color:--turquoise;text-decoration:none;opacity:.85}
.social-mini a:hover{opacity:1;color:--turquoise}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;color:--turquoise}

/* Focus styles for accessibility */
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* Arrière-plan défilant à l'accueil */
.scrolling-background {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg) 0%, #050505 100%);
}

.scroll-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.scroll-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scroll-section.active {
  opacity: 1;
  transform: translateX(0);
}

.scroll-section:not(.active) {
  transform: translateX(100%);
}

.scroll-section:nth-child(even):not(.active) {
  transform: translateX(-100%);
}

.section-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: center;
}

/* Video background inside a scrolling section */
.section-video-bg{position:absolute;inset:0;z-index:1}
.section-video-bg video{width:100%;height:100%;object-fit:cover}
.section-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(105, 104, 104, 0.55), rgba(0,0,0,.35));}
.scroll-section .section-content{position:relative;z-index:2}

.section-text h2 {
  font-size: 2.5rem;
  margin: 0 0 20px;
  background: var(--brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-text p {
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.6;
}

/* Info Rotator */
.info-rotator{position:relative;min-height:32px;margin:12px 0 16px}
.rotator-item{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(10px);transition:opacity .4s, transform .4s;color:#e5e7eb;font-weight:600}
.rotator-item.active{opacity:1;transform:translateY(0)}
.rotator-controls{display:flex;gap:8px;margin-bottom:12px}
.rotator-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(49, 49, 49, 0.4);color:#fff;cursor:pointer}
.rotator-btn:hover{background:rgba(0,0,0,.65)}

.section-text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.section-text li {
  padding: 8px 0;
  color: var(--text);
  position: relative;
  padding-left: 24px;
}

.section-text li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: bold;
}

.section-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-media img,
.section-media video {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.section-media img:hover,
.section-media video:hover {
  transform: scale(1.05);
}

/* Styles pour les boutons Facebook dans les sections de défilement */
.scroll-section .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.scroll-section .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Navigation par points */
.scroll-navigation {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.nav-dot:hover {
  background: rgba(255,255,255,0.6);
  transform: scale(1.2);
}

.nav-dot.active {
  background: var(--brand);
  transform: scale(1.3);
}

/* Boutons de navigation */
.scroll-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 10;
}

.scroll-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-btn:hover {
  background: var(--brand);
  color: white;
  transform: scale(1.1);
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.service-card h3 {
  margin: 0 0 12px;
  color: var(--text);
}

.service-card p {
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* Vidéos dans les formations */
.formation-video {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.formation-video video {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-placeholder {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.video-placeholder:hover {
  transform: scale(1.02);
}

.video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.video-placeholder:hover .play-overlay {
  background: rgba(0,0,0,0.3);
}

.play-icon {
  color: white;
  font-size: 3rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Section Vidéos de Présentation */
.videos-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-top: 24px;
}

.video-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.video-card h3 {
  margin: 0 0 16px;
  color: var(--text);
}

.video-container {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.video-card p {
  color: var(--muted);
  margin: 0;
}

/* QR Code WhatsApp */
.whatsapp-qr-section {
  margin-top: 24px;
  padding: 20px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.2);
  border-radius: 12px;
  text-align: center;
}

.whatsapp-qr-section h4 {
  margin: 0 0 16px;
  color: var(--text);
}

.qr-code-container {
  margin-bottom: 16px;
}

.qr-code-placeholder {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: rgba(37, 211, 102, 0.1);
  border: 2px dashed rgba(37, 211, 102, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.qr-code-placeholder:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.5);
}

.qr-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.qr-code-placeholder p {
  margin: 0 0 4px;
  font-weight: 500;
  color: var(--text);
}

.qr-code-placeholder small {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Responsive pour l'arrière-plan défilant */
@media (max-width: 980px) {
  .section-content {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
    text-align: center;
  }
  
  .section-text h2 {
    font-size: 2rem;
  }
  
  .scroll-controls {
    padding: 0 20px;
  }
  
  .scroll-btn {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .scroll-navigation {
    bottom: 20px;
  }
}

@media (max-width: 640px) {
  .scrolling-background {
    height: 80vh;
  }
  
  .section-text h2 {
    font-size: 1.5rem;
  }
  
  .section-text p {
    font-size: 1rem;
  }
  
  .scroll-controls {
    padding: 0 10px;
  }
  
  .scroll-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .videos-showcase {
    grid-template-columns: 1fr;
  }
  
  .video-container video {
    height: 200px;
  }
}

/* Styles pour les pages de détail des formations */
.formation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 32px;
}

.formation-info h1 {
  margin: 0 0 16px;
  color: var(--text);
}

.formation-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.formation-meta span {
  padding: 8px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--text);
}

.formation-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
}

.formation-gallery {
  margin-bottom: 40px;
}

.gallery-section {
  margin-bottom: 32px;
}

.gallery-section h3 {
  margin: 0 0 20px;
  color: var(--text);
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.video-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s;
}

.video-item:hover {
  transform: translateY(-4px);
}

.video-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}

.video-item:hover .video-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.video-title {
  font-size: 0.9rem;
  font-weight: 500;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.image-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.2s;
}

.image-item:hover {
  transform: scale(1.05);
}

.image-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.formation-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.content-section h2 {
  margin: 0 0 20px;
  color: var(--text);
}

.objectifs-list {
  list-style: none;
  padding: 0;
}

.objectifs-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 24px;
}

.objectifs-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: bold;
}

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

.chapitre-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--bg-elev);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.chapitre-num {
  background: var(--brand);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  flex-shrink: 0;
}

.chapitre-text {
  color: var(--text);
  line-height: 1.5;
}

.formation-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.detail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.detail-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.detail-card h3 {
  margin: 0 0 16px;
  color: var(--text);
}

.detail-card p {
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.6;
}

.debouches-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

.debouches-list li {
  padding: 8px 0;
  color: var(--text);
  position: relative;
  padding-left: 20px;
}

.debouches-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--brand);
}

/* Styles pour les pages de détail des projets création web */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 32px;
}

.project-info h1 {
  margin: 0 0 16px;
  color: var(--text);
}

.project-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.project-meta span {
  padding: 8px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--text);
}

.project-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
}

.project-gallery {
  margin-bottom: 40px;
}

.project-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.technologies-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-tag {
  padding: 8px 16px;
  background: var(--brand);
  color: white;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.features-list {
  list-style: none;
  padding: 0;
}

.features-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 24px;
}

.features-list li::before {
  content: '✨';
  position: absolute;
  left: 0;
}

.project-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

/* Modal pour les images */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  text-align: center;
}

.close {
  color: white;
  font-size: 35px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.close:hover {
  color: var(--brand);
}

#modalImage {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
}

#modalCaption {
  color: white;
  margin-top: 16px;
  font-size: 1.1rem;
}

/* Portfolio actions */
.portfolio-actions {
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .formation-header,
  .project-header {
    flex-direction: column;
    gap: 24px;
  }
  
  .formation-actions,
  .project-actions {
    min-width: auto;
    width: 100%;
  }
  
  .formation-content-grid,
  .project-content-grid {
    grid-template-columns: 1fr;
  }
  
  .videos-grid {
    grid-template-columns: 1fr;
  }
  
  .images-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* Facebook Button Styles */
.btn.facebook {
  background: var(--turquoise);
  border-color: var(--success);
  color: white;
  font-weight: 600;
}

.btn.facebook:hover {
  background: #166fe5;
  border-color: #166fe5;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Map Info Styles */
.map-info {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--shadow-sm);
}

.map-info p {
  margin: 8px 0;
  color: var(--text);
}

.map-info strong {
  color: var(--brand);
}

/* Facebook CTA Styles */
.facebook-cta {
  background: var(--turquoise);
  border-radius: 16px;
  padding: 32px;
  margin-top: 24px;
  color: white;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.facebook-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.benefit-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.cta-actions .btn {
  min-width: 200px;
}

.facebook-cta h4 {
  margin: 0 0 12px;
  color: black;
}

.facebook-cta p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
}

.facebook-cta ul {
  text-align: left; 
  margin: 16px 0;
  padding-left: 20px;
}

.facebook-cta li {
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.9);
}

/* Infographie Page Styles */
.infographie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.infographie-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.infographie-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.infographie-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.infographie-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.infographie-card:hover .infographie-image img {
  transform: scale(1.05);
}

.infographie-video {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.infographie-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infographie-content {
  padding: 20px;
}

.infographie-content h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1.2rem;
}

.infographie-content p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.infographie-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-elev);
  border-radius: 8px;
}

.infographie-meta .prix {
  color: var(--brand);
  font-weight: 600;
}

.infographie-meta .delai {
  color: var(--muted);
  font-size: 0.9rem;
}

.infographie-actions {
  display: flex;
  gap: 12px;
}

.infographie-actions .btn {
  flex: 1;
  justify-content: center;
}

.infographie-actions .btn.facebook {
  background:var(--card);
  color: black;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}
.infographie-actions .btn.primary {
  background:var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.infographie-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Tarifs Infographie */
.tarifs-infographie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.tarif-infographie-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tarif-infographie-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tarif-header h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 1.3rem;
}

.tarif-prix {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 16px;
}

.tarif-description {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.tarif-meta {
  margin-bottom: 20px;
}

.tarif-meta .delai {
  color: var(--text);
  font-weight: 500;
}

.tarif-actions .btn {
  width: 100%;
  justify-content: center;
}

.tarif-actions .btn.facebook {
  background:var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(64, 65, 67, 0.3);
  transition: all 0.3s ease;
}

.tarif-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(72, 75, 78, 0.4);
}

.btn.primary {
  background: var(--turquoise);
  border: none;
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn.ghost {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
  font-weight: 500;
}

.btn.ghost:hover {
  background: var(--bg-elev);
  border-color: var(--brand);
  color: var(--brand);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Styles pour les boutons Facebook dans les cartes de services */
.services-grid .card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.services-grid .card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Enhanced Hero Section */
.hero {
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
  text-align: center;
}

/* Hero Unified Section with Video Background */
.hero-unified {
  position: relative;
  min-height: 50vh;
  display: flex;
  background-color: var(--turquoise);
  align-items: center;
  overflow: hidden;
}

.hero-video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 2;
}

/* Rounded wave at bottom of hero */
.hero-unified:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:80px;
  background: radial-gradient(120% 100% at 50% 0, rgba(255,255,255,0) 60%, var(--bg) 61%);
  z-index:3;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: white;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.hero-text h1 {
  font-size: 4rem;
  margin: 0 0 20px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-text h1 span {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.4rem;
  margin: 0 0 40px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin: 40px 0;
  text-align: left;
}

.hero-feature {
  display: flex;
  gap: 20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-icon {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.feature-content h3 {
  margin: 0 0 12px;
  color: white;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.feature-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-actions .btn {
  min-width: 200px;
  font-size: 1.1rem;
  padding: 16px 32px;
}

.hero h1 {
  font-size: 3rem;
  margin: 0 0 20px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Styles pour les boutons Facebook dans les cartes de statistiques */
.stats-grid .card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.stats-grid .card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de contact */
.contact-info .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.contact-info .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de meubles */
.meuble-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.meuble-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de formations */
.formation-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.formation-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de création web */
.portfolio-card .btn.facebook,
.web-service-card .btn.facebook,
.mobile-app-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.portfolio-card .btn.facebook:hover,
.web-service-card .btn.facebook:hover,
.mobile-app-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de partenaires */
.partenaire-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.partenaire-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de blog */
.blog-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.blog-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de WhatsApp */
.whatsapp-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.whatsapp-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de clients/espace étudiants */
.client-card .btn.facebook,
.dashboard-card .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.client-card .btn.facebook:hover,
.dashboard-card .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les pages de détail */
.meuble-detail .btn.facebook,
.formation-detail .btn.facebook,
.creation-web-detail .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.meuble-detail .btn.facebook:hover,
.formation-detail .btn.facebook:hover,
.creation-web-detail .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des formations */
.formation-meta .btn.facebook,
.formation-gallery .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.formation-meta .btn.facebook:hover,
.formation-gallery .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des projets web */
.project-meta .btn.facebook,
.project-gallery .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.project-meta .btn.facebook:hover,
.project-gallery .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des meubles */
.meuble-meta .btn.facebook,
.meuble-gallery .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.meuble-meta .btn.facebook:hover,
.meuble-gallery .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des infographies */
.infographie-meta .btn.facebook,
.infographie-gallery .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.infographie-meta .btn.facebook:hover,
.infographie-gallery .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des tarifs */
.tarif-meta .btn.facebook,
.tarif-actions .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.tarif-meta .btn.facebook:hover,
.tarif-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des services web */
.web-service-meta .btn.facebook,
.web-service-actions .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.web-service-meta .btn.facebook:hover,
.web-service-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des applications mobiles */
.mobile-app-meta .btn.facebook,
.mobile-app-actions .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.mobile-app-meta .btn.facebook:hover,
.mobile-app-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des services d'infographie */
.infographie-service-meta .btn.facebook,
.infographie-service-actions .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.infographie-service-meta .btn.facebook:hover,
.infographie-service-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}

/* Styles pour les boutons Facebook dans les cartes de détail des services de formation */
.formation-service-meta .btn.facebook,
.formation-service-actions .btn.facebook {
  background: var(--turquoise);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
  transition: all 0.3s ease;
}

.formation-service-meta .btn.facebook:hover,
.formation-service-actions .btn.facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}















/* Responsive Design */
@media (max-width: 768px) {
  .infographie-grid {
    grid-template-columns: 1fr;
  }
  
  .tarifs-infographie-grid {
    grid-template-columns: 1fr;
  }
  
  .infographie-actions {
    flex-direction: column;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1.1rem;
  }
  
  /* Responsive Hero Unified */
  .hero-unified {
    min-height: 80vh;
  }
  
  .hero-text h1 {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .hero-feature {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    margin: 0 auto;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-actions .btn {
    min-width: 250px;
  }
  
  /* Responsive Profile */
  .profile-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .profile-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .dashboard-actions {
    flex-direction: column;
    gap: 8px;
  }
}