/* ════════════════════════════════════════════════════════════
   MAHRASOFT INNOVATIONS — DESIGN SYSTEM
   Palette : Bleu profond · Bleu · Bleu ciel · Blanc
   Typo    : Sora (display) + DM Sans (texte)
   ════════════════════════════════════════════════════════════ */
:root {
  --ms-navy:        #06173A;   /* bleu profond — sections sombres, texte fort */
  --ms-navy-mid:    #0B2455;
  --ms-blue:        #0A66FF;   /* bleu primaire — actions */
  --ms-blue-mid:    #2B7BFF;
  --ms-blue-deep:   #064BCC;
  --ms-sky:         #36BDF8;   /* bleu ciel — accent */
  --ms-sky-light:   #7DD3FC;
  --ms-sky-soft:    #EAF4FF;   /* fond teinté */
  --ms-white:       #FFFFFF;
  --ms-ivory:       #F5F9FF;
  --ms-border:      #E1EBF8;
  --ms-border-2:    #CBDDF4;
  --ms-text:        #16243D;
  --ms-muted:       #5B6B85;
  --ms-success:     #16A34A;
  --ms-danger:      #DC2626;
  --ms-warning:     #D97706;

  --grad-blue:  linear-gradient(135deg, var(--ms-blue), var(--ms-blue-deep));
  --grad-sky:   linear-gradient(135deg, var(--ms-blue), var(--ms-sky));
  --grad-line:  linear-gradient(90deg, transparent, var(--ms-blue), var(--ms-sky), transparent);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius-sm: 9px;  --radius: 14px;  --radius-lg: 22px;  --radius-xl: 30px;

  --shadow-xs: 0 1px 4px rgba(6,23,58,.05);
  --shadow-sm: 0 2px 10px rgba(6,23,58,.07);
  --shadow:    0 6px 24px rgba(6,23,58,.10);
  --shadow-lg: 0 16px 44px rgba(6,23,58,.13);
  --shadow-xl: 0 28px 64px rgba(6,23,58,.18);
  --shadow-blue: 0 8px 26px rgba(10,102,255,.30);

  --transition: all .26s cubic-bezier(.4,0,.2,1);
  --transition-slow: all .45s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--ms-text);
  background: var(--ms-white); line-height: 1.7; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; color: var(--ms-navy); }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; }
::selection { background: var(--ms-blue); color: #fff; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes barLoad { to{width:100%} }
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes floaty  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes spin    { to{transform:rotate(360deg)} }

/* ── Préchargeur ────────────────────────────────────────── */
#ms-spinner {
  position: fixed; inset: 0; background: var(--ms-navy);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  transition: opacity .5s ease, visibility .5s ease;
}
#ms-spinner.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-logo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sp-word { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.sp-word span { color: var(--ms-sky); }
.sp-bar { width: 190px; height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--grad-sky); animation: barLoad 1s ease forwards; }
.sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ms-sky); animation: blink 1.1s infinite; }

/* ── Barre supérieure ───────────────────────────────────── */
.ms-topbar { background: var(--ms-navy); padding: 9px 0; font-size: .76rem; font-family: var(--font-display); border-bottom: 1px solid rgba(255,255,255,.06); }
.ms-tb-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.6); margin-right: 20px; }
.ms-tb-item i { color: var(--ms-sky); }
.ms-tb-item:hover { color: var(--ms-sky); }
.ms-tb-soc { width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: .72rem; margin-left: 5px; }
.ms-tb-soc:hover { background: var(--ms-blue); color: #fff; transform: translateY(-2px); }

/* ── Navbar ─────────────────────────────────────────────── */
.ms-navbar {
  background: rgba(255,255,255,.96) !important; backdrop-filter: blur(20px);
  padding: 12px 0; position: sticky; top: 0; z-index: 1000;
  border-bottom: 1px solid var(--ms-border); box-shadow: var(--shadow-xs);
  transition: var(--transition-slow);
}
.ms-navbar.scrolled { padding: 8px 0; box-shadow: 0 6px 30px rgba(6,23,58,.12); }
.ms-brand { display: flex; align-items: center; gap: 11px; }
.ms-brand-logo { height: 42px; width: auto; border-radius: 9px; transition: var(--transition); }
.ms-navbar.scrolled .ms-brand-logo { height: 36px; }
.ms-brand-name { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; background: var(--grad-blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -.02em; }
.ms-brand-tag { display: block; font-size: .58rem; color: var(--ms-muted); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ms-nav-link { position: relative; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ms-text) !important; padding: 8px 13px !important; border-radius: var(--radius-sm); letter-spacing: .01em; }
.ms-nav-link::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--grad-sky); border-radius: 2px; transition: width .25s ease; }
.ms-nav-link:hover, .ms-nav-link.active { color: var(--ms-blue) !important; }
.ms-nav-link:hover::after, .ms-nav-link.active::after { width: 60%; }
.ms-nav-link.dropdown-toggle::after { display: none; }
.ms-dd-chev { font-size: .55rem; margin-left: 3px; transition: transform .22s; }
.ms-nav-link[aria-expanded="true"] .ms-dd-chev { transform: rotate(180deg); }
.ms-dropdown { border: 1px solid var(--ms-border); border-radius: 18px; padding: 10px; margin-top: 8px !important; box-shadow: 0 16px 46px rgba(6,23,58,.14); min-width: 270px; background: #fff; animation: fadeUp .2s ease; }
.ms-dd-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-family: var(--font-display); font-weight: 600; font-size: .81rem; color: var(--ms-text); }
.ms-dd-item:hover { background: var(--ms-sky-soft); color: var(--ms-blue); transform: translateX(4px); }
.ms-dd-ic { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ms-sky-soft); color: var(--ms-blue); font-size: .9rem; transition: var(--transition); }
.ms-dd-item:hover .ms-dd-ic { background: var(--ms-blue); color: #fff; }
.ms-dd-item .dd-t { font-weight: 700; font-size: .81rem; color: var(--ms-navy); line-height: 1.2; }
.ms-dd-item .dd-s { font-size: .68rem; color: var(--ms-muted); font-weight: 400; }
.ms-btn-cta { background: var(--grad-blue); color: #fff !important; border: none; padding: 9px 20px; border-radius: 50px; font-family: var(--font-display); font-weight: 700; font-size: .8rem; box-shadow: var(--shadow-blue); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ms-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,102,255,.4); }
.ms-toggler { border: none; background: none; padding: 8px; cursor: pointer; border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; }
.ms-toggler span { display: block; height: 2px; border-radius: 2px; background: var(--ms-navy); transition: var(--transition); }
.ms-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ms-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ms-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Boutons ────────────────────────────────────────────── */
.btn-ms { font-family: var(--font-display); font-weight: 700; font-size: .85rem; border-radius: 50px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: var(--transition); letter-spacing: .01em; }
.btn-ms-primary { background: var(--grad-blue); color: #fff !important; border: none; padding: 13px 28px; box-shadow: var(--shadow-blue); }
.btn-ms-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(10,102,255,.42); }
.btn-ms-outline { background: transparent; color: var(--ms-blue) !important; border: 2px solid var(--ms-blue); padding: 11px 26px; }
.btn-ms-outline:hover { background: var(--ms-blue); color: #fff !important; transform: translateY(-2px); }
.btn-ms-ghost { background: rgba(255,255,255,.1); color: #fff !important; border: 1.5px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); padding: 11px 26px; }
.btn-ms-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

/* ── Utilitaires de section ─────────────────────────────── */
.ms-section { padding: 96px 0; }
.ms-section-sm { padding: 60px 0; }
.ms-section.alt { background: var(--ms-ivory); }
.ms-section.tint { background: var(--ms-sky-soft); }
.ms-section.dark { background: var(--ms-navy); }
.ms-tag { display: inline-block; font-family: var(--font-display); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-blue); background: rgba(10,102,255,.08); border: 1px solid rgba(10,102,255,.16); padding: 5px 14px; border-radius: 20px; margin-bottom: 14px; }
.ms-tag.light { color: var(--ms-sky); background: rgba(54,189,248,.12); border-color: rgba(54,189,248,.25); }
.ms-title { font-size: clamp(1.75rem, 3.4vw, 2.55rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 14px; }
.ms-title.on-dark { color: #fff; }
.ms-subtitle { color: var(--ms-muted); font-size: .97rem; max-width: 620px; line-height: 1.78; }
.ms-subtitle.on-dark { color: rgba(255,255,255,.66); }
.text-grad { background: var(--grad-sky); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-sky { color: var(--ms-sky) !important; }

/* ── Hero en-tête de page ───────────────────────────────── */
.ms-page-hero { background: radial-gradient(ellipse 60% 80% at 82% 30%, rgba(54,189,248,.18) 0%, transparent 60%), linear-gradient(160deg, var(--ms-navy), var(--ms-navy-mid)); padding: 104px 0 70px; position: relative; overflow: hidden; }
.ms-page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.ms-page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--grad-line); }
.ms-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); font-family: var(--font-display); margin-bottom: 16px; }
.ms-breadcrumb a { color: rgba(255,255,255,.55); }
.ms-breadcrumb a:hover { color: var(--ms-sky); }
.ms-page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; margin-bottom: 14px; letter-spacing: -.03em; }
.ms-page-hero p { color: rgba(255,255,255,.66); font-size: 1.02rem; max-width: 600px; line-height: 1.75; }

/* ── Cartes génériques ──────────────────────────────────── */
.ms-card { background: #fff; border: 1px solid var(--ms-border); border-radius: var(--radius-lg); padding: 26px; transition: var(--transition); height: 100%; }
.ms-card:hover { box-shadow: var(--shadow-lg); border-color: var(--ms-border-2); transform: translateY(-5px); }
.ms-card-ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: var(--grad-blue); margin-bottom: 18px; box-shadow: var(--shadow-blue); }
.ms-card h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 9px; }
.ms-card p { color: var(--ms-muted); font-size: .88rem; line-height: 1.72; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: .68rem; font-weight: 700; color: var(--ms-blue); background: var(--ms-sky-soft); padding: 4px 11px; border-radius: 20px; }

/* ── Footer ─────────────────────────────────────────────── */
.ms-footer { background: var(--ms-navy); color: rgba(255,255,255,.55); padding: 72px 0 0; position: relative; }
.ms-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-line); }
.ms-footer-logo { height: 42px; border-radius: 9px; display: block; margin-bottom: 14px; }
.ms-footer-desc { font-size: .85rem; line-height: 1.75; color: rgba(255,255,255,.5); max-width: 300px; }
.ms-footer-h { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ms-footer-link { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.5); font-size: .84rem; padding: 5px 0; }
.ms-footer-link i { color: var(--ms-sky); font-size: .72rem; }
.ms-footer-link:hover { color: var(--ms-sky); padding-left: 5px; }
.ms-footer-ci { display: flex; gap: 10px; font-size: .84rem; color: rgba(255,255,255,.5); margin-bottom: 11px; }
.ms-footer-ci i { color: var(--ms-sky); margin-top: 2px; }
.ms-footer-ci a:hover { color: var(--ms-sky); }
.ms-footer-soc-row { display: flex; gap: 8px; margin-top: 18px; }
.ms-footer-soc { width: 35px; height: 35px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: .82rem; }
.ms-footer-soc:hover { background: var(--ms-blue); color: #fff; transform: translateY(-3px); }
.ms-footer-div { border-color: rgba(255,255,255,.08); margin: 40px 0 16px; }
.ms-footer-copy { font-size: .77rem; color: rgba(255,255,255,.3); margin: 0; }
.ms-footer-copy a { color: var(--ms-sky); }

/* ── Retour haut ────────────────────────────────────────── */
#ms-top { position: fixed; bottom: 26px; right: 26px; z-index: 990; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--grad-blue); color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-blue); opacity: 0; transform: translateY(16px); transition: var(--transition); pointer-events: none; cursor: pointer; }
#ms-top.show { opacity: 1; transform: translateY(0); pointer-events: all; }
#ms-top:hover { transform: translateY(-3px); }

/* ── Formulaires ────────────────────────────────────────── */
.form-lbl { display: block; font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ms-muted); margin-bottom: 7px; }
.form-ctrl { width: 100%; padding: 12px 16px; border: 1.5px solid var(--ms-border); border-radius: var(--radius); font-family: var(--font-body); font-size: .9rem; color: var(--ms-text); background: var(--ms-ivory); transition: var(--transition); outline: none; }
.form-ctrl:focus { border-color: var(--ms-blue); box-shadow: 0 0 0 3px rgba(10,102,255,.12); background: #fff; }
.form-ctrl::placeholder { color: var(--ms-muted); opacity: .6; }
textarea.form-ctrl { resize: vertical; min-height: 130px; }
select.form-ctrl { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235B6B85' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px; }

/* ── Alertes ────────────────────────────────────────────── */
.ms-alert { border-radius: var(--radius); padding: 13px 16px; font-size: .86rem; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.ms-alert i { margin-top: 2px; }
.ms-alert-success { background: rgba(22,163,74,.1); color: #15803D; border: 1px solid rgba(22,163,74,.2); }
.ms-alert-danger { background: rgba(220,38,38,.08); color: var(--ms-danger); border: 1px solid rgba(220,38,38,.18); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .ms-topbar { display: none !important; }
  .navbar-collapse { background: #fff; border-radius: 18px; margin-top: 10px; padding: 16px; border: 1px solid var(--ms-border); box-shadow: 0 16px 46px rgba(6,23,58,.12); animation: fadeUp .22s ease; }
  .ms-nav-link { border-radius: 11px; padding: 12px 14px !important; font-size: .9rem; }
  .ms-nav-link::after { display: none; }
  .ms-nav-link:hover, .ms-nav-link.active { background: var(--ms-sky-soft); }
  .ms-dropdown { box-shadow: none; border: none; background: var(--ms-ivory); margin-top: 4px !important; }
  .ms-btn-cta { width: 100%; justify-content: center; margin-top: 8px; padding: 12px; }
  .ms-section { padding: 64px 0; }
}
@media (max-width: 575px) { .ms-page-hero { padding: 78px 0 50px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }