/* Ancien theme sombre, conserve TEL QUEL pour les pages hors perimetre de la
   refonte « encre sur papier » : /disway/, /audit-SGI/, /demo-erp/, /shop/, /tonnerre/.
   Ces pages le chargent depuis /assets/css/legacy/. Les pages refondues ne le
   chargent plus : leurs <link> pointent des feuilles neutralisees du meme nom. */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --bg-primary: #07091A;
  --bg-secondary: #0D1025;
  --glass: rgba(245,166,35,0.03);
  --glass-border: rgba(245,166,35,0.12);
  --cyan-bright: #F5A623;
  --cyan-vivid: #F7C96E;
  --cyan-pale: #F7C96E;
  --gradient-electric: linear-gradient(135deg, #C8841A 0%, #F5A623 60%, #F7C96E 100%);
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted: rgba(255,255,255,0.4);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  background-color:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.7;
  font-size:17px
}

a{
  color:var(--cyan-bright);
  text-decoration:none;
  transition:all 0.3s ease
}
a:hover{
  text-shadow:0 0 10px rgba(245,166,35,0.5)
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(7,9,26,0.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  padding:16px 0
}

.header-inner{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.header-logo-link{display:flex;align-items:center}
.header-logo{height:44px;width:auto;filter:drop-shadow(0 0 10px rgba(245,166,35,0.3))}

.header-nav{display:flex;align-items:center;gap:28px}
.header-nav a{
  color:var(--text-secondary);
  font-size:0.9rem;
  font-weight:500;
  transition:all 0.3s ease
}
.header-nav a:hover{
  color:var(--text-primary);
  text-shadow:none
}

.main-container{
  max-width:800px;
  margin:0 auto;
  padding:140px 24px 80px
}

.main-title{
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:700;
  font-family:'Syne',system-ui,sans-serif;
  margin:0 0 2rem 0;
  text-align:center;
  background:var(--gradient-electric);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.section{
  margin-bottom:2rem;
  padding:28px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:20px;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1)
}

.section:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(245,166,35,0.1)
}

.section h2{
  font-size:1.25rem;
  font-weight:600;
  font-family:'Syne',system-ui,sans-serif;
  color:var(--cyan-vivid);
  margin:0 0 1rem 0;
  text-shadow:0 0 15px rgba(247,201,110,0.3)
}

.section p,.section li{
  color:var(--text-secondary);
  margin:0 0 0.75rem 0;
  line-height:1.8
}

.section p:last-child{margin-bottom:0}
.section ul{padding-left:20px;margin:0}
.section li{margin-bottom:0.5rem}
.section strong{color:var(--text-primary)}

.section a{
  color:var(--cyan-bright);
  position:relative;
  z-index:10
}

.cta-buttons{text-align:center;margin-top:3rem}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  font-size:0.95rem;
  font-weight:600;
  font-family:'Syne',system-ui,sans-serif;
  border-radius:12px;
  text-decoration:none;
  transition:all 0.3s ease;
  cursor:pointer;
  border:none;
  background:var(--gradient-electric);
  color:#07091A;
  box-shadow:0 4px 20px rgba(245,166,35,0.3)
}

.button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(245,166,35,0.4)
}

.btn-whatsapp{
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  color:#fff;
  box-shadow:0 4px 20px rgba(37,211,102,0.3)
}

.btn-whatsapp:hover{
  box-shadow:0 8px 30px rgba(37,211,102,0.4)
}

.site-footer{
  background-color:var(--bg-secondary);
  padding:48px 0 32px;
  text-align:center;
  font-size:0.85rem;
  color:var(--text-muted);
  border-top:1px solid var(--glass-border)
}

.site-footer .container{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px
}

.footer-links{margin-top:1rem}
.footer-links a{
  color:var(--text-muted);
  margin:0 12px
}
.footer-links a:hover{
  color:var(--cyan-bright)
}

/* Contact form styles */
.contact-form{
  max-width:600px;
  margin:0 auto;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:24px;
  padding:40px
}

.form-group{margin-bottom:1.5rem}

.form-group label{
  display:block;
  margin-bottom:0.5rem;
  color:var(--text-secondary);
  font-weight:500
}

.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  padding:14px 18px;
  border:1px solid var(--glass-border);
  border-radius:12px;
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:1rem;
  font-family:inherit;
  transition:all 0.3s ease
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;
  border-color:var(--cyan-bright);
  box-shadow:0 0 20px rgba(245,166,35,0.2)
}

.form-group textarea{
  min-height:150px;
  resize:vertical
}

.form-group select option{
  background:var(--bg-secondary);
  color:var(--text-primary)
}

@media (max-width:768px){
  .header-nav{display:none}
  .main-container{padding:120px 20px 60px}
  .section{padding:20px}
  .contact-form{padding:24px}
}