/* ============================================================
   MBEZORA — Design System
   Palette : Blanc #FFFFFF, Bleu roi #0066FF, Bleu clair #E8F0FE,
             Gris ardoise #64748B, Texte #1E293B, Accent #00C2FF
   Police  : Syne (display) + Inter (body)
============================================================ */

/* ---- Variables ---- */
:root {
  --blue:        #0066FF;
  --blue-dark:   #0047CC;
  --blue-light:  #E8F0FE;
  --blue-mid:    #3B82F6;
  --accent:      #00C2FF;
  --accent2:     #7C3AED;
  --white:       #FFFFFF;
  --bg:          #F8FAFF;
  --bg2:         #EEF4FF;
  --text:        #1E293B;
  --text-muted:  #64748B;
  --border:      #D1DDFF;
  --success:     #10B981;
  --error:       #EF4444;
  --warning:     #F59E0B;
  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 4px 24px rgba(0,102,255,.10);
  --shadow-lg:   0 16px 48px rgba(0,102,255,.15);
  --transition:  .3s cubic-bezier(.4,0,.2,1);
  --nav-h:       72px;
  --font-display:'Syne', sans-serif;
  --font-body:   'Inter', sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-dark); }
ul { list-style: none; }

/* ---- Typography ---- */

p  { color: var(--text-muted); }

.text-blue   { color: var(--blue); }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--text-muted); }

/* ---- Container ---- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,102,255,.30);
}
.btn-primary:hover {
  background: var(--blue-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,102,255,.40);
}
.btn-outline {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}
.btn-white {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.btn-white:hover { background: var(--blue-light); color: var(--blue-dark); transform: translateY(-2px); }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.05rem; }
.btn-sm { padding: .5rem 1.25rem; font-size: .85rem; }

/* ---- Section commons ---- */
.section { padding: 90px 0; }
.section-alt { background: var(--bg2); }
.section-white { background: #fff; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--blue-light);
  color: var(--blue);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}
.section-header p { margin-top: .75rem; font-size: 1.05rem; }

/* ============================================================
   PAGE TRANSITION
============================================================ */
#page-transition {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #fff 0%, #E8F0FE 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pt-leave .6s ease-in .9s forwards;
}


.pt-inner {
  text-align: center;
  animation: pt-in .5s ease both;
}


.pt-no-enter .pt-inner {
  animation: none;
  opacity: 1;
  transform: none;
}
.pt-logo {
  width: 200px;
  height: 200px;
  background: #FFFFFF;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  box-shadow: 0 16px 40px rgba(0,102,255,.30);
  animation: pt-pulse 1s ease infinite alternate;
  overflow: hidden; /* empêche le débordement du logo */
}


.pt-logo i { color: #fff; font-size: 2rem; }
.pt-name {
  font-family: "Cinzel", serif;
  font-size: 1.98rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
.pt-tagline {
  color: var(--text-muted);
  font-size: .95rem;
  margin-top: .4rem;
}
.pt-loader {
  display: flex; gap: .5rem; justify-content: center; margin-top: 2rem;
}
.pt-loader span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
  animation: pt-dot .8s ease infinite alternate;
}
.pt-loader span:nth-child(2) { animation-delay: .15s; }
.pt-loader span:nth-child(3) { animation-delay: .3s; }

@keyframes pt-in    { from { opacity:0; transform:scale(.8) translateY(20px) } to { opacity:1; transform:none } }
@keyframes pt-leave { to { opacity:0; pointer-events:none; visibility:hidden } }
@keyframes pt-pulse { from { box-shadow:0 8px 24px rgba(0,102,255,.2) } to { box-shadow:0 16px 48px rgba(0,102,255,.45) } }
@keyframes pt-dot   { from { opacity:.3; transform:translateY(0) } to { opacity:1; transform:translateY(-6px) } }


#page-transition.pt-quick-leave {
  animation: pt-leave .3s ease-out .05s forwards;
}

/* ============================================================
   NAVBAR — largeur augmentée pour éviter le retour à la ligne
============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: box-shadow var(--transition);
}
#navbar.scrolled { box-shadow: var(--shadow); }

/* Container élargi propre à la navbar uniquement */
#navbar .container { max-width: 1440px; }

.nav-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--nav-h);
}
.nav-logo {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
}
.logo-icon {
  width: 144px; height: 144px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-icon i { color: #fff; font-size: 1rem; }
.logo-text {
  font-family: "Cinzel", serif;
  font-size: 1.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  text-transform: uppercase;
}



.nav-links {
  display: flex;
  align-items: center;
  gap: .35rem;              /* légèrement augmenté pour l'aération */
  flex-wrap: nowrap;
  /* margin-left: auto;  ← SUPPRIMÉ d'ici */
}
.nav-links li { flex-shrink: 0; }
.nav-links a {
  display: block;
  color: var(--text-muted);
  font-size: .87rem;
  font-weight: 500;
  padding: .45rem .7rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: all var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--blue);
  background: var(--blue-light);
}

.nav-actions {
  display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
  margin-left: auto;
}
.nav-cta { white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Resserre progressivement avant le passage en mode mobile */



/* ============================================================
   MENU MOBILE — Drawer + Overlay
============================================================ */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  z-index: 1499;
}
.nav-overlay.visible { opacity: 1; pointer-events: auto; }

.nav-mobile {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(340px, 86vw);
  background: #fff;
  box-shadow: -12px 0 40px rgba(0,0,0,.15);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1), visibility .4s;
}
.nav-mobile.open { transform: translateX(0); visibility: visible; }

.nav-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-mobile-close {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: none; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem;
  transition: all var(--transition);
}
.nav-mobile-close:hover { background: var(--blue); color: #fff; transform: rotate(90deg); }

.nav-mobile-links {
  display: flex; flex-direction: column;
  padding: 1rem .75rem;
  overflow-y: auto;
  flex: 1;
}
.nav-mobile-links a {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem .9rem;
  border-radius: 12px;
  color: var(--text);
  font-weight: 600; font-size: .95rem;
  transition: all var(--transition);
}
.nav-mobile-links a:hover,
.nav-mobile-links a.active {
  background: var(--blue-light);
  color: var(--blue);
}
.nav-mobile-links a.active .nml-icon { background: var(--blue); color: #fff; }
.nml-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bg2); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
  transition: all var(--transition);
}
.nml-arrow { margin-left: auto; font-size: .7rem; color: var(--text-muted); opacity: .5; }

.nav-mobile-footer {
  padding: 1.25rem 1.5rem 1.75rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .9rem;
  flex-shrink: 0;
}
.nav-mobile-phone {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; color: var(--text-muted);
}
.nav-mobile-phone i { color: var(--blue); }

body.nav-open { overflow: hidden; }


@media (max-width: 1200px) {
  .nav-links   { display: none; }
  .nav-cta     { display: none; }
  .nav-toggle  { display: flex; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  padding: 110px 0 90px;
  background: linear-gradient(160deg, #fff 0%, var(--blue-light) 60%, #dce8ff 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,194,255,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blue-light);
  color: var(--blue);
  font-size: .8rem; font-weight: 700;
  padding: .4rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}
.hero-badge i { font-size: .7rem; }
.hero h1 {
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--text) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-lead { font-size: 1.1rem; max-width: 480px; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 2.5rem; margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.hero-stat strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--blue);
}
.hero-stat span { font-size: .85rem; color: var(--text-muted); }

/* Hero visual */
.hero-visual {
  position: relative;
}
.hero-card-main {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  animation: float 4s ease-in-out infinite;
}
.hcm-header {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.hcm-icon {
  width: 48px; height: 48px;
  background: var(--blue-light);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.hcm-icon i { color: var(--blue); font-size: 1.2rem; }
.hcm-header h4 { margin-bottom: .2rem; }
.hcm-header p { font-size: .82rem; }
.hcm-progress { margin-bottom: 1rem; }
.hcm-progress-label {
  display: flex; justify-content: space-between;
  font-size: .82rem; font-weight: 500; margin-bottom: .4rem;
}
.hcm-bar {
  height: 8px; background: var(--bg2); border-radius: 4px; overflow: hidden;
}
.hcm-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transition: width 1.5s ease;
}
.hcm-footer {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.hcm-tag {
  font-size: .75rem; font-weight: 600;
  background: var(--blue-light);
  color: var(--blue);
  padding: .25rem .75rem;
  border-radius: 50px;
}

/* Floating cards around hero visual */
.hero-float-card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
  font-size: .82rem;
  animation: float 3s ease-in-out infinite;
}
.hero-float-card.fc1 { top: -30px; right: -20px; animation-delay: .5s; }
.hero-float-card.fc2 { bottom: -20px; left: -20px; animation-delay: 1s; }
.hfc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hfc-icon.green { background: #D1FAE5; }
.hfc-icon.green i { color: var(--success); }
.hfc-icon.purple { background: #EDE9FE; }
.hfc-icon.purple i { color: var(--accent2); }
.hfc-text strong { display: block; font-size: .85rem; color: var(--text); }
.hfc-text span { color: var(--text-muted); }

@keyframes float {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(-10px) }
}

/* ============================================================
   CLIENTS / PARTENAIRES LOGOS
============================================================ */
/* ============================================================
   LOGOS / STACK TECHNIQUE — refonte
============================================================ */
.logos-strip {
  background: #fff;
  padding: 3.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.logos-strip::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(circle, rgba(0,102,255,.05), transparent 70%);
  pointer-events: none;
}
.logos-label {
  text-align: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 2.25rem;
  position: relative; z-index: 1;
}
.logos-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  position: relative; z-index: 1;
}
.tech-item {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.25rem .75rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: default;
}
.tech-item i {
  font-size: 1.6rem;
  color: #94A3B8;
  transition: all var(--transition);
}
.tech-item span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--transition);
  text-align: center;
}
.tech-item:hover {
  background: var(--white);
  border-color: var(--blue-light);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.tech-item:hover i {
  color: var(--blue);
  transform: scale(1.15);
}
.tech-item:hover span { color: var(--text); }

@media (max-width: 640px) {
  .logos-row { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .tech-item { padding: 1rem .5rem; }
  .tech-item i { font-size: 1.3rem; }
  .tech-item span { font-size: .72rem; }
}

.logos-row span {
  font-size: 1rem; font-weight: 800;
  color: #CBD5E1;
  letter-spacing: -.02em;
  transition: color var(--transition);
}
.logos-row span:hover { color: var(--blue); }

/* ============================================================
   SERVICES GRID
============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { transform: scaleX(1); }

.sc-icon {
  width: 54px; height: 54px;
  background: var(--blue-light);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  transition: all var(--transition);
}
.sc-icon i { color: var(--blue); font-size: 1.4rem; transition: transform var(--transition); }
.service-card:hover .sc-icon { background: var(--blue); }
.service-card:hover .sc-icon i { color: #fff; transform: scale(1.15); }

.service-card h3 { margin-bottom: .6rem; font-size: 1.15rem; }
.service-card p  { font-size: .9rem; margin-bottom: 1.25rem; }
.sc-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.sc-tag {
  font-size: .72rem; font-weight: 600;
  background: var(--blue-light);
  color: var(--blue);
  padding: .2rem .65rem;
  border-radius: 50px;
}
.sc-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem;
  color: var(--blue); font-size: .88rem; font-weight: 600;
}
.sc-link:hover { gap: .7rem; }

/* ============================================================
   CHIFFRES CLÉS
============================================================ */
.chiffres-section {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.chiffres-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,.05) 0%, transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(0,194,255,.10) 0%, transparent 50%);
}
.chiffres-section .container { position: relative; z-index: 1; }
.chiffres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  text-align: center;
}
.chiffre-item { padding: 1.5rem; }
.chiffre-icon {
  width: 50px; height: 50px;
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.chiffre-icon i { color: var(--accent); font-size: 1.2rem; }
.chiffre-val {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}
.chiffre-label { font-size: .9rem; color: rgba(255,255,255,.75); font-weight: 500; }

/* ============================================================
   PROCESSUS / ÉTAPES
============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 40px; left: 0; right: 0; height: 2px;
  background: var(--border);
  z-index: 0;
}
.process-step {
  text-align: center;
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 1;
  transition: transform var(--transition);
}
.process-step:hover { transform: translateY(-5px); }
.ps-num {
  width: 64px; height: 64px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: all var(--transition);
  position: relative;
}
.process-step:hover .ps-num,
.process-step.active .ps-num {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 6px var(--blue-light);
}
.process-step h4 { margin-bottom: .5rem; font-size: .95rem; }
.process-step p  { font-size: .85rem; }

/* ============================================================
   RÉALISATIONS / PROJETS
============================================================ */
.projets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5rem;
}
.projet-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  display: flex; flex-direction: column;
}
.projet-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.projet-thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: var(--blue);
  position: relative;
  overflow: hidden;
}
.projet-thumb img { width:100%; height:100%; object-fit:cover; }
.projet-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--blue);
  color: #fff; font-size: .72rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 50px;
}
.projet-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.projet-client { font-size: .8rem; color: var(--text-muted); margin-bottom: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.projet-body h3 { margin-bottom: .6rem; font-size: 1.1rem; }
.projet-body p  { font-size: .88rem; margin-bottom: 1rem; flex: 1; }
.projet-techs { display: flex; gap: .4rem; flex-wrap: wrap; }
.projet-tech {
  font-size: .72rem; font-weight: 600;
  background: var(--bg2);
  color: var(--text-muted);
  padding: .2rem .65rem; border-radius: 50px;
}

/* ============================================================
   TÉMOIGNAGES
============================================================ */
.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.temoignage-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
}
.temoignage-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tc-quote {
  font-size: 3rem; line-height: 1;
  color: var(--blue-light); font-family: Georgia, serif;
  margin-bottom: .5rem;
}
.tc-stars { color: #F59E0B; margin-bottom: 1rem; letter-spacing: 2px; }
.tc-content { font-size: .92rem; margin-bottom: 1.5rem; font-style: italic; color: var(--text); }
.tc-author {
  display: flex; align-items: center; gap: 1rem;
}
.tc-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: .95rem;
  flex-shrink: 0;
}
.tc-author-info strong { display: block; font-size: .9rem; color: var(--text); }
.tc-author-info span  { font-size: .8rem; color: var(--text-muted); }

/* ============================================================
   ÉQUIPE
============================================================ */
.equipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.equipe-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all var(--transition);
}
.equipe-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.eq-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  margin: 0 auto 1.25rem;
  box-shadow: 0 8px 24px rgba(0,102,255,.25);
}
.eq-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.equipe-card h4 { margin-bottom: .2rem; }
.eq-poste { font-size: .85rem; color: var(--blue); font-weight: 600; margin-bottom: .75rem; }
.equipe-card p { font-size: .85rem; }
.eq-socials { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.eq-socials a {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: all var(--transition);
}
.eq-socials a:hover { background: var(--blue); color: #fff; }

/* ============================================================
   SECTEURS
============================================================ */
.secteurs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.secteur-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
}
.secteur-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-4px); }
.sect-icon {
  width: 54px; height: 54px;
  background: var(--blue-light);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  transition: all var(--transition);
}
.sect-icon i { color: var(--blue); font-size: 1.3rem; }
.secteur-card:hover .sect-icon { background: var(--blue); }
.secteur-card:hover .sect-icon i { color: #fff; }
.secteur-card h4 { font-size: .95rem; margin-bottom: .4rem; }
.secteur-card p  { font-size: .82rem; }

/* ============================================================
   CTA SECTION
============================================================ */
.cta-section {
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent2) 100%);
  padding: 90px 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: #fff; margin-bottom: 1rem; }
.cta-section p  { color: rgba(255,255,255,.82); font-size: 1.05rem; margin-bottom: 2.5rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FORMS
============================================================ */
.form-group { margin-bottom: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group label {
  display: block;
  font-size: .88rem; font-weight: 600; color: var(--text);
  margin-bottom: .45rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,102,255,.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-msg {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem; font-weight: 500;
  margin-bottom: 1rem;
}
.form-msg.success { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.form-msg.error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ============================================================
   PAGE INTÉRIEURE - BANNER
============================================================ */
.page-banner {
  background: linear-gradient(135deg, #fff 0%, var(--blue-light) 100%);
  padding: 70px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-banner::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,102,255,.08), transparent 70%);
  border-radius: 50%;
}
.page-banner h1 { margin-bottom: .75rem; }
.page-banner p  { font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ============================================================
   BLOG
============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--blue);
  position: relative;
}
.blog-cat {
  position: absolute; bottom: 1rem; left: 1rem;
  background: var(--blue); color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 50px;
}
.blog-body { padding: 1.5rem; }
.blog-meta { font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; }
.blog-body h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.blog-body p  { font-size: .88rem; margin-bottom: 1rem; }
.blog-link { font-size: .85rem; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: .3rem; }

/* ============================================================
   CARRIERES
============================================================ */
.offres-list { display: flex; flex-direction: column; gap: 1rem; }
.offre-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  display: flex; align-items: center; gap: 2rem;
  transition: all var(--transition);
}
.offre-item:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateX(4px); }
.offre-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--blue-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.offre-icon i { color: var(--blue); font-size: 1.3rem; }
.offre-info { flex: 1; }
.offre-info h4 { margin-bottom: .3rem; }
.offre-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); }
.offre-meta span { display: flex; align-items: center; gap: .3rem; }
.offre-tags { display: flex; gap: .4rem; margin-top: .5rem; }
.offre-tag {
  font-size: .72rem; font-weight: 600;
  background: var(--bg2); color: var(--text-muted);
  padding: .2rem .65rem; border-radius: 50px;
}
.offre-actions { flex-shrink: 0; }

/* ============================================================
   FOOTER
============================================================ */
#footer {
  background: var(--text);
  color: rgba(255,255,255,.75);
  padding: 70px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .nav-logo .logo-text { color: #fff; }
.footer-brand p {
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  margin-top: 1rem; margin-bottom: 1.5rem;
  line-height: 1.6;
}
.footer-social { display: flex; gap: .75rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

.footer-col h4 { color: #fff; margin-bottom: 1.25rem; font-size: .95rem; }
.footer-col ul li { margin-bottom: .6rem; }
.footer-col ul a {
  color: rgba(255,255,255,.6); font-size: .9rem;
  transition: color var(--transition);
}
.footer-col ul a:hover { color: #fff; }

.footer-contact-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: .75rem; font-size: .88rem;
  color: rgba(255,255,255,.6);
}
.footer-contact-list i { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.footer-contact-list a { color: rgba(255,255,255,.6); }
.footer-contact-list a:hover { color: #fff; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0;
  font-size: .82rem; color: rgba(255,255,255,.4);
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom ul { display: flex; gap: 1.5rem; }
.footer-bottom ul a { color: rgba(255,255,255,.4); }
.footer-bottom ul a:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   SCROLL TO TOP
============================================================ */
#scroll-top {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 44px; height: 44px;
  background: var(--blue);
  color: #fff; border: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: all var(--transition);
  z-index: 500;
}
#scroll-top.visible { opacity: 1; pointer-events: auto; }
#scroll-top:hover { background: var(--blue-dark); transform: translateY(-3px); }

/* ============================================================
   ADMIN BADGE (visible que pour les admins)
============================================================ */
.admin-bar {
  background: var(--text); color: #fff;
  padding: .5rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.admin-bar a { color: var(--accent); }

/* ============================================================
   ANIMATIONS D'APPARITION (scroll)
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ============================================================
   ACCORDION / FAQ
============================================================ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .75rem;
  overflow: hidden;
  background: #fff;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.5rem;
  cursor: pointer; font-weight: 600; font-size: .95rem;
  transition: color var(--transition);
  user-select: none;
}
.faq-q:hover { color: var(--blue); }
.faq-q i { transition: transform var(--transition); flex-shrink: 0; color: var(--text-muted); }
.faq-item.open .faq-q i { transform: rotate(180deg); color: var(--blue); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  padding: 0 1.5rem;
  color: var(--text-muted); font-size: .9rem;
}
.faq-item.open .faq-a { max-height: 400px; padding: 0 1.5rem 1.25rem; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-inner   { gap: 2.5rem; }
}

/* ---- HERO responsive ---- */
@media (max-width: 900px) {
  .hero { padding: 90px 0 60px; }
  .hero-inner {
    grid-template-columns: 1fr;   /* empile texte + visuel */
    gap: 3rem;
  }
  .hero-visual { order: 2; }      /* visuel après le texte */
  .hero-content { order: 1; text-align: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-badge { margin-left: auto; margin-right: auto; }
}

/* Cartes flottantes : trop de décalage négatif = débordement horizontal sur mobile */
@media (max-width: 480px) {
  .hero-card-main { padding: 1.5rem; }
  .hero-float-card {
    position: static;             /* on sort du flottement absolu */
    margin-top: 1rem;
    animation: none;
  }
  .hero-float-card.fc1,
  .hero-float-card.fc2 { top: auto; right: auto; bottom: auto; left: auto; }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-bottom ul {
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.footer-col ul a,
.footer-contact-list a,
.footer-contact-list span {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 480px) {
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .services-grid { grid-template-columns: 1fr; }
  .projets-grid  { grid-template-columns: 1fr; }
  .temoignages-grid { grid-template-columns: 1fr; }
  .secteurs-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .chiffres-grid { grid-template-columns: 1fr 1fr; }
  .process-grid  { grid-template-columns: 1fr; }
  .process-grid::before { display: none; } /* ligne de connexion inutile en 1 colonne */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .section { padding: 60px 0; }
  .container { padding: 0 18px; }
  .logos-row { gap: 1.5rem; }
}

/* ============================================================
   UTILITAIRES
============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: .5rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media(max-width:600px){ .grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE HERO (pages internes)
============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--bg) 0%, var(--blue-light) 100%);
  padding: 70px 0 60px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--blue)10, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { max-width: 720px; }
.page-hero h1 { margin: .75rem 0 1rem; }
.hero-subtitle { font-size: 1.15rem; color: var(--text-muted); max-width: 620px; line-height: 1.7; }
.hero-badges { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.badge-stat {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: 50px;
  background: var(--white); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow);
}
.badge-stat i { color: var(--blue); }

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .83rem; color: var(--text-muted); margin-bottom: .5rem;
}
.breadcrumb a { color: var(--blue); }
.breadcrumb i { font-size: .6rem; }

/* ============================================================
   BG HELPERS
============================================================ */
.bg-white    { background: var(--white); }
.bg-blue-light { background: var(--bg2); }

/* ============================================================
   FILTRE BAR
============================================================ */
.filter-bar {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.filter-btn {
  padding: .5rem 1.25rem; border-radius: 50px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--text-muted); font-size: .9rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.filter-btn.active {
  background: var(--blue); border-color: var(--blue);
  color: var(--white); box-shadow: 0 4px 12px var(--blue)30;
}

/* ============================================================
   RÉALISATIONS
============================================================ */
.projets-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
}
.projet-card-full {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.projet-card-full:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.projet-visual {
  height: 160px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.projet-icon-big {
  width: 80px; height: 80px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.projet-badge {
  position: absolute; top: 12px; right: 12px;
  padding: .25rem .75rem; border-radius: 50px;
  color: var(--white); font-size: .75rem; font-weight: 700;
}
.projet-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .6rem; }
.projet-meta-row { display: flex; gap: 1rem; }
.projet-secteur, .projet-date {
  display: flex; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--text-muted); font-weight: 500;
}
.projet-body h3 { font-size: 1.1rem; color: var(--text); margin: .2rem 0; }
.projet-client { font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; }
.projet-client i { color: var(--blue); }
.projet-desc { font-size: .9rem; color: var(--text-muted); flex: 1; }
.tech-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tech-tag {
  padding: .2rem .65rem; border-radius: 50px;
  background: var(--bg2); color: var(--blue);
  font-size: .75rem; font-weight: 600; border: 1px solid var(--border);
}
.projet-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .75rem; border-top: 1px solid var(--border); margin-top: auto;
}
.projet-resultat, .projet-duree {
  display: flex; align-items: center; gap: .4rem; font-size: .82rem;
}
.projet-resultat strong { color: var(--text); }

/* Impact chiffres */
.impact-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.impact-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 2rem;
  text-align: center; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.impact-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 1rem;
}
.impact-num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--blue); }
.impact-label { font-size: .9rem; color: var(--text-muted); margin-top: .4rem; }

/* ============================================================
   SECTEURS FULL
============================================================ */
.intro-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;
}
.intro-badges-col { display: flex; flex-direction: column; gap: .8rem; padding-top: .5rem; }
.intro-badge-item {
  display: flex; align-items: center; gap: .75rem;
  font-size: .95rem; font-weight: 500; color: var(--text);
}
.intro-badge-item i { font-size: 1.1rem; flex-shrink: 0; }

.secteurs-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
}
.secteur-full-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.secteur-full-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.secteur-header-card { padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; }
.secteur-icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.secteur-header-card h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.secteur-header-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.secteur-details { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.secteur-details-label { font-weight: 600; font-size: .85rem; color: var(--text); margin-bottom: .75rem; }
.secteur-details-list { display: flex; flex-direction: column; gap: .4rem; }
.secteur-details-list li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text-muted); }
.secteur-details-list i { font-size: .7rem; flex-shrink: 0; }
.btn-sm { padding: .4rem .9rem; font-size: .83rem; }

/* ============================================================
   BLOG
============================================================ */
.article-featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem;
  align-items: center; background: var(--white);
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  overflow: hidden; box-shadow: var(--shadow);
}
.article-featured-visual { position: relative; height: 320px; }
.article-placeholder-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.article-cat-badge {
  position: absolute; top: 16px; left: 16px;
  padding: .3rem .8rem; border-radius: 50px;
  color: var(--white); font-size: .78rem; font-weight: 700;
}
.article-featured-body { padding: 2rem; }
.article-tag {
  display: inline-block; padding: .25rem .75rem; border-radius: 50px;
  background: var(--blue-light); color: var(--blue);
  font-size: .78rem; font-weight: 700; margin-bottom: 1rem;
}
.article-featured-body h2 { font-size: 1.5rem; margin: .5rem 0 .75rem; }
.article-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); margin: 1rem 0 1.25rem; }
.article-meta i { color: var(--blue); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.blog-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-card-img {
  height: 150px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.blog-cat-badge {
  position: absolute; top: 12px; right: 12px;
  padding: .25rem .7rem; border-radius: 50px;
  color: var(--white); font-size: .73rem; font-weight: 700;
}
.blog-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-body h3 { font-size: 1rem; margin-bottom: .5rem; line-height: 1.4; }
.blog-card-body p { font-size: .87rem; color: var(--text-muted); flex: 1; }
.blog-card-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--text-muted); margin: .75rem 0; }
.blog-card-meta i { color: var(--blue); }
.btn-link {
  color: var(--blue); font-weight: 600; font-size: .88rem;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: gap var(--transition);
}
.btn-link:hover { gap: .75rem; }

/* Newsletter */
.newsletter-box {
  text-align: center; padding: 3rem 2rem;
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.newsletter-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 1rem;
}
.newsletter-box h2 { margin-bottom: .5rem; }
.newsletter-box p { color: var(--text-muted); max-width: 500px; margin: 0 auto 1.5rem; }
.newsletter-form { display: flex; justify-content: center; }
.newsletter-input-wrap {
  display: flex; gap: 0; border-radius: 50px; overflow: hidden;
  border: 2px solid var(--blue); max-width: 480px; width: 100%;
}
.newsletter-input-wrap input {
  flex: 1; padding: .75rem 1.25rem; border: none; outline: none; font-size: .95rem;
}
.newsletter-input-wrap .btn { border-radius: 0 50px 50px 0; padding: .75rem 1.5rem; }
.newsletter-note { font-size: .8rem; color: var(--text-muted); margin-top: .75rem; }

/* ============================================================
   CARRIÈRES
============================================================ */
.avantages-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
}
.avantage-card {
  background: var(--white); padding: 1.75rem;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.avantage-card:hover { box-shadow: var(--shadow-lg); }
.avantage-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 1rem;
}
.avantage-card h4 { font-size: 1rem; margin-bottom: .4rem; }
.avantage-card p { font-size: .88rem; }

.offres-grid {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.offre-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; gap: .9rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.offre-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.offre-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.offre-domain-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.offre-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.offre-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.offre-badge {
  padding: .2rem .65rem; border-radius: 50px; font-size: .75rem; font-weight: 600;
}
.offre-badge.type { background: var(--blue-light); color: var(--blue); }
.offre-badge.lieu { background: #F0FDF4; color: #10B981; }
.offre-badge.exp  { background: #FFF7ED; color: #F59E0B; }
.offre-desc { font-size: .9rem; color: var(--text-muted); }
.offre-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; border-top: 1px solid var(--border); }
.offre-date { font-size: .82rem; color: var(--text-muted); display: flex; align-items: center; gap: .35rem; }

.spontane-box {
  display: flex; align-items: center; gap: 2rem;
  background: var(--white); border-radius: var(--radius-lg);
  border: 2px dashed var(--border); padding: 2rem;
}
.spontane-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.spontane-content h3 { margin-bottom: .4rem; }
.spontane-content p { margin-bottom: 1rem; }

.recrutement-steps {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative;
  margin-top: 3rem;
}
.recrutement-steps::before {
  content: '';
  position: absolute; top: 28px; left: 10%; right: 10%;
  height: 2px; background: linear-gradient(to right, var(--blue), var(--accent));
}
.recrutement-step { text-align: center; padding: 0 .75rem; }
.step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
  margin: 0 auto 1rem; position: relative; z-index: 1;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--blue)30;
}
.recrutement-step h4 { font-size: .95rem; margin-bottom: .4rem; }
.recrutement-step p { font-size: .82rem; color: var(--text-muted); }

/* Postuler form */
.offre-resume-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--blue-light); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.25rem 1.5rem; margin-bottom: 2rem;
}
.offre-resume-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.file-upload-area {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 2rem; text-align: center; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.file-upload-area:hover { background: var(--blue-light); border-color: var(--blue); }
.file-upload-area i { font-size: 2rem; color: var(--blue); }
.file-upload-area small { color: var(--text-muted); font-size: .8rem; }
.file-link { color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ============================================================
   PARTENAIRES
============================================================ */
.partenaires-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
}
.partenaire-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 2rem; text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.partenaire-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.partenaire-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.partenaire-type {
  display: inline-block; padding: .2rem .7rem; border-radius: 50px;
  background: var(--bg2); color: var(--text-muted);
  font-size: .75rem; font-weight: 600; margin-bottom: .5rem;
}
.partenaire-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.partenaire-card p { font-size: .88rem; }

.certif-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem;
}
.certif-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.5rem; text-align: center;
  transition: box-shadow var(--transition);
}
.certif-card:hover { box-shadow: var(--shadow-lg); }
.certif-badge {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto .75rem;
}
.certif-card h4 { font-size: .95rem; margin-bottom: .25rem; }
.certif-card p { font-size: .82rem; }

.devenir-partenaire-box {
  display: flex; align-items: center; gap: 2.5rem;
  background: linear-gradient(135deg, var(--blue-light), var(--bg2));
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  padding: 3rem;
}
.devenir-icon {
  font-size: 3rem; color: var(--blue); flex-shrink: 0;
}
.devenir-content h2 { margin-bottom: .5rem; }
.devenir-content p { margin-bottom: 1.5rem; }

/* ============================================================
   SÉCURITÉ
============================================================ */
.securite-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
}
.securite-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 2rem;
  transition: box-shadow var(--transition);
}
.securite-card:hover { box-shadow: var(--shadow-lg); }
.securite-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 1rem;
}
.securite-card h3 { font-size: 1rem; margin-bottom: .5rem; }

.rgpd-box {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 2.5rem;
  box-shadow: var(--shadow);
}
.rgpd-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.rgpd-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.rgpd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.rgpd-item { display: flex; gap: 1rem; align-items: flex-start; }
.rgpd-item > i { font-size: 1.1rem; margin-top: .2rem; flex-shrink: 0; }
.rgpd-item strong { display: block; font-size: .95rem; color: var(--text); }
.rgpd-item p { font-size: .85rem; }

.sla-box { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 3rem; box-shadow: var(--shadow); }
.sla-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2rem; }
.sla-item { text-align: center; }
.sla-value { font-size: 2.2rem; font-weight: 800; color: var(--blue); }
.sla-label { font-size: .88rem; color: var(--text-muted); margin-top: .3rem; }

/* ============================================================
   MENTIONS LÉGALES & CONFIDENTIALITÉ
============================================================ */
.legal-content { padding: 0 0 4rem; }
.legal-intro-box {
  background: var(--blue-light); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.75rem; text-align: center;
  margin-bottom: 2.5rem;
}
.legal-intro-box p { color: var(--text); font-size: 1rem; }
.legal-section { margin-bottom: 2.5rem; }
.legal-section h2 {
  font-size: 1.2rem; display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border);
}
.legal-section p { margin-bottom: .75rem; }
.legal-section ul { padding-left: 1.5rem; }
.legal-section ul li { margin-bottom: .4rem; font-size: .95rem; color: var(--text-muted); }
.legal-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.legal-table th, .legal-table td { padding: .7rem 1rem; text-align: left; border: 1px solid var(--border); font-size: .9rem; }
.legal-table th { background: var(--bg2); font-weight: 600; color: var(--text); width: 35%; }
.legal-table td { color: var(--text-muted); }

.droits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.25rem 0; }
.droit-item {
  background: var(--bg); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 1.25rem; text-align: center;
}
.droit-item > i { font-size: 1.5rem; color: var(--blue); margin-bottom: .5rem; display: block; }
.droit-item strong { display: block; font-size: .9rem; color: var(--text); margin-bottom: .25rem; }
.droit-item p { font-size: .8rem; }

/* ============================================================
   CTA BOX
============================================================ */
.cta-section { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.cta-box { text-align: center; padding: 4rem 2rem; }
.cta-box h2 { color: var(--white); font-size: clamp(1.5rem,3vw,2.2rem); }
.cta-box p { color: rgba(255,255,255,.8); margin: 1rem auto 2rem; max-width: 520px; font-size: 1.05rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.cta-section .btn-outline {
  border-color: rgba(255,255,255,.5); color: var(--white);
}
.cta-section .btn-outline:hover { background: rgba(255,255,255,.15); border-color: var(--white); }

/* Alert boxes */
.alert {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem; border-radius: var(--radius);
  margin-bottom: 1.5rem; font-size: .95rem;
}
.alert i { font-size: 1.4rem; flex-shrink: 0; }
.alert-success { background: #F0FDF4; border: 1px solid #86EFAC; color: #166534; }
.alert-success i { color: #22C55E; }
.alert-error { background: #FFF1F2; border: 1px solid #FECACA; color: #991B1B; }
.alert-error i { color: #EF4444; }
.alert ul { padding-left: 1rem; }

/* Contact form wrapper */
.contact-form-wrap {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 2rem; box-shadow: var(--shadow);
}

/* ============================================================
   RESPONSIVE ADDITIONS
============================================================ */
@media(max-width:1024px){
  .avantages-grid { grid-template-columns: repeat(2,1fr); }
  .partenaires-grid { grid-template-columns: repeat(2,1fr); }
  .certif-grid { grid-template-columns: repeat(2,1fr); }
  .securite-grid { grid-template-columns: repeat(2,1fr); }
  .impact-grid { grid-template-columns: repeat(2,1fr); }
  .recrutement-steps { grid-template-columns: 1fr; gap: 2rem; }
  .recrutement-steps::before { display: none; }
  .intro-two-col { grid-template-columns: 1fr; gap: 2rem; }
  .article-featured { grid-template-columns: 1fr; }
  .article-featured-visual { height: 200px; }
  .devenir-partenaire-box { flex-direction: column; text-align: center; padding: 2rem; }
}
@media(max-width:768px){
  .avantages-grid { grid-template-columns: 1fr; }
  .partenaires-grid { grid-template-columns: 1fr; }
  .certif-grid { grid-template-columns: 1fr 1fr; }
  .securite-grid { grid-template-columns: 1fr; }
  .sla-grid { grid-template-columns: repeat(2,1fr); }
  .impact-grid { grid-template-columns: repeat(2,1fr); }
  .rgpd-grid { grid-template-columns: 1fr; }
  .droits-grid { grid-template-columns: 1fr 1fr; }
  .projets-full-grid { grid-template-columns: 1fr; }
  .secteurs-full-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .offre-card-header { flex-direction: column; }
  .spontane-box { flex-direction: column; text-align: center; }
}
@media(max-width:480px){
  .sla-grid { grid-template-columns: repeat(2,1fr); }
  .droits-grid { grid-template-columns: 1fr; }
  .certif-grid { grid-template-columns: 1fr; }
  .newsletter-input-wrap { flex-direction: column; border-radius: var(--radius); }
  .newsletter-input-wrap .btn { border-radius: var(--radius); }
  .hero-badges { flex-direction: column; }
}

/* ============================================================
   ARTICLE BLOG
============================================================ */
.article-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start;
}
.article-main { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 2.5rem; }
.article-cat-badge-inline {
  display: inline-block; padding: .3rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; margin-bottom: 1rem;
}
.article-main h1 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom: 0; }
.article-resume { font-size: 1.05rem; color: var(--text-muted); padding: 1rem 1.25rem; border-left: 4px solid var(--blue); background: var(--bg2); border-radius: 0 var(--radius) var(--radius) 0; margin-top: 1rem; }
.article-img-placeholder {
  height: 260px; background: linear-gradient(135deg, var(--blue-light), var(--bg2));
  border-radius: var(--radius-lg); margin: 1.5rem 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: var(--blue); opacity: .3;
}
.article-body { font-size: 1rem; line-height: 1.85; }
.article-body h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.article-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.article-body p { color: var(--text-muted); margin-bottom: 1rem; }
.article-body ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body ul li { color: var(--text-muted); margin-bottom: .4rem; }
.article-share { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1.25rem 0; border-top: 1px solid var(--border); margin-top: 2rem; }
.article-share span { font-weight: 600; font-size: .9rem; color: var(--text); }
.share-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: 50px; font-size: .83rem; font-weight: 600;
  transition: opacity var(--transition);
}
.share-btn:hover { opacity: .8; }
.share-btn.twitter { background: #1DA1F2; color: var(--white); }
.share-btn.linkedin { background: #0077B5; color: var(--white); }
.article-nav { margin-top: 1.5rem; }

/* Sidebar */
.article-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-widget { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1.5rem; }
.sidebar-widget h4 { font-size: 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--border); }
.sidebar-articles { display: flex; flex-direction: column; gap: .75rem; }
.sidebar-articles a { display: flex; flex-direction: column; gap: .2rem; padding: .6rem; border-radius: var(--radius); transition: background var(--transition); }
.sidebar-articles a:hover { background: var(--bg2); }
.sidebar-art-title { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.sidebar-art-meta { font-size: .75rem; color: var(--text-muted); }
.sidebar-cta { text-align: center; background: linear-gradient(135deg, var(--blue-light), var(--bg2)); }
.sidebar-cta-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0 auto .75rem; }
.sidebar-cta h4 { margin-bottom: .4rem; }
.sidebar-cta p { font-size: .85rem; margin-bottom: 1rem; }

@media(max-width:900px){
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
}

/* ============================================================
   CARROUSEL D'IMAGES — réutilisable (projets, articles)
============================================================ */
.mb-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.mb-carousel-track {
  display: flex;
  height: 100%;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.mb-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}
.mb-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mb-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  z-index: 2;
  color: var(--text);
  font-size: .8rem;
  transition: background var(--transition), transform var(--transition);
}
.mb-carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.mb-carousel-arrow.prev { left: 10px; }
.mb-carousel-arrow.next { right: 10px; }
.mb-carousel-dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 2;
}
.mb-carousel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
}
.mb-carousel-dot.active { background: #fff; width: 18px; border-radius: 4px; }
.mb-carousel-count-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .72rem; font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 50px;
  display: flex; align-items: center; gap: .3rem;
  z-index: 2;
}

/* ============================================================
   PAGE CONTACT — refonte
============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* ---- Carte formulaire ---- */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}
.contact-form-head {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.contact-form-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0,102,255,.25);
}
.contact-form-head h3 { margin-bottom: .3rem; }
.contact-form-head p { font-size: .88rem; margin: 0; }

/* ---- Sélecteur "type de demande" en pilules ---- */
.type-pills { display: flex; gap: .75rem; flex-wrap: wrap; }
.type-pill {
  position: relative;
  cursor: pointer;
}
.type-pill input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.type-pill span {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-size: .85rem; font-weight: 600;
  color: var(--text-muted);
  background: var(--white);
  transition: all var(--transition);
}
.type-pill span i { color: var(--text-muted); transition: color var(--transition); }
.type-pill input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.type-pill input:checked + span i { color: #fff; }
.type-pill:hover span { border-color: var(--blue); }

.contact-privacy-note {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.contact-privacy-note i { color: var(--blue); flex-shrink: 0; }

.contact-submit-btn {
  width: 100%; justify-content: center;
  font-size: 1rem;
}

/* ---- Sidebar ---- */
.contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.contact-info-card h4 { margin-bottom: 1.5rem; }
.contact-info-row {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.25rem;
}
.contact-info-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.contact-info-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: .2rem;
}
.contact-info-value { font-weight: 500; color: var(--text); font-size: .92rem; }
a.contact-info-value:hover { color: var(--blue); }

.contact-socials {
  display: flex; gap: .6rem;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.contact-socials a {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.contact-socials a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

/* ---- Étapes ---- */
.contact-steps-card {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 2rem;
  color: #fff;
}
.contact-steps-card h4 {
  color: #fff; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .6rem;
}
.contact-step-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
}
.contact-step-row:last-child { margin-bottom: 0; }
.contact-step-row span { font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.9); }
.contact-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; flex-shrink: 0;
}

/* ---- Réassurance ---- */
.contact-trust-card {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.contact-trust-card i {
  font-size: 1.8rem; color: var(--blue); flex-shrink: 0;
}
.contact-trust-card strong { display: block; color: var(--text); font-size: .95rem; }
.contact-trust-card span { font-size: .82rem; color: var(--text-muted); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-form-wrap { padding: 1.5rem; }
  .contact-form-head { flex-direction: column; }
}

/* ============================================================
   À COLLER À LA FIN DE assets/css/style.css
   (vous pouvez supprimer l'ancien bloc .logos-strip / .tech-item,
    il n'est plus utilisé par la page d'accueil)
============================================================ */

/* ============================================================
   HERO — visuel promotionnel MbeSchool
============================================================ */
.hero-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Halo bleu derrière l'affiche, reprend les couleurs de l'image */
.hero-promo::before {
  content: '';
  position: absolute;
  inset: 8% 4% 18% 4%;
  background: radial-gradient(ellipse at center, rgba(0,102,255,.45), rgba(0,194,255,.15) 55%, transparent 75%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.promo-frame {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 8px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(232,240,254,.6));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
          0 30px 60px -20px rgba(0,40,120,.45),
          0 10px 24px rgba(0,102,255,.12);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.promo-frame:hover {
  transform: perspective(1400px) rotateY(0) rotateX(0) translateY(-4px);
  box-shadow:
          0 40px 80px -24px rgba(0,40,120,.5),
          0 14px 30px rgba(0,102,255,.18);
}

.promo-link {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  outline-offset: 4px;
}
.promo-link:focus-visible { outline: 3px solid var(--blue); }
.promo-link img {
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1086;
  object-fit: cover;
  display: block;
}

/* Bandeau sous l'affiche */
.promo-caption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .8rem .9rem .8rem 1rem;
  box-shadow: var(--shadow);
  margin: 0 1.5rem;
}
.promo-caption-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF8A00, #FF5E00);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.promo-caption-text { flex: 1; min-width: 0; line-height: 1.35; }
.promo-caption-text strong { display: block; font-size: .92rem; color: var(--text); }
.promo-caption-text span   { font-size: .8rem; color: var(--text-muted); }
.promo-caption-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #FF6A00;
  color: #fff;
  font-size: .82rem; font-weight: 700;
  padding: .55rem 1rem;
  border-radius: 50px;
  white-space: nowrap;
  transition: background var(--transition), gap var(--transition);
}
.promo-caption-btn:hover { background: #E65C00; color: #fff; gap: .7rem; }

@media (max-width: 900px) {
  .promo-frame { transform: none; }
  .promo-frame:hover { transform: translateY(-2px); }
  .hero-promo { max-width: 640px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .promo-frame { padding: 5px; border-radius: 18px; }
  .promo-link { border-radius: 14px; }
  .promo-caption { margin: 0; flex-wrap: wrap; text-align: left; }
  .promo-caption-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   STACK TECHNIQUE — panneaux par domaine
============================================================ */
.stack-section {
  background:
          radial-gradient(circle at 10% 0%, rgba(0,102,255,.06), transparent 40%),
          radial-gradient(circle at 90% 100%, rgba(124,58,237,.06), transparent 40%),
          var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- Filtres ---- */
.stack-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.stack-filter {
  --cat: var(--blue);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.stack-filter i { color: var(--cat); font-size: .85rem; }
.stack-filter:hover { border-color: var(--cat); color: var(--text); }
.stack-filter:focus-visible { outline: 3px solid var(--cat); outline-offset: 2px; }
.stack-filter-count {
  font-size: .72rem;
  background: var(--bg2);
  color: var(--text-muted);
  padding: .05rem .5rem;
  border-radius: 50px;
}
.stack-filter.is-active {
  background: var(--cat);
  border-color: var(--cat);
  color: #fff;
}
.stack-filter.is-active i { color: #fff; }
.stack-filter.is-active .stack-filter-count { background: rgba(255,255,255,.22); color: #fff; }

/* ---- Grille de panneaux (bento) ---- */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
/* Frontend et Backend (les plus fournis) prennent toute la largeur */
.stack-panel--frontend,
.stack-panel--backend { grid-column: 1 / -1; }
.stack-grid.is-single .stack-panel { grid-column: 1 / -1; }

.stack-panel {
  --cat: var(--blue);
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  overflow: hidden;
}
.stack-panel[hidden] { display: none; }
/* Liseré de couleur du domaine */
.stack-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--cat);
}

.stack-panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border);
}
.stack-panel-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--cat);
  background: color-mix(in srgb, var(--cat) 12%, #fff);
  font-size: 1.15rem;
}
.stack-panel-title { flex: 1; min-width: 0; }
.stack-panel-title h3 { font-size: 1.1rem; margin-bottom: .1rem; color: var(--text); }
.stack-panel-title p  { font-size: .85rem; line-height: 1.45; margin: 0; }
.stack-panel-count {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800;
  color: var(--cat);
  line-height: 1;
}

/* ---- Tuiles technologies ---- */
.stack-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .6rem;
}
.stack-item {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .9rem .4rem .75rem;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid transparent;
  text-align: center;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.stack-item:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--cat) 40%, transparent);
  transform: translateY(-3px);
}
.stack-logo {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.stack-logo img { width: 36px; height: 36px; object-fit: contain; }
.stack-logo-fallback {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cat) 14%, #fff);
  color: var(--cat);
  font-size: .8rem; font-weight: 800;
}
.stack-name {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .stack-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stack-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
    scrollbar-width: none;
  }
  .stack-filters::-webkit-scrollbar { display: none; }
  .stack-filter { flex-shrink: 0; }
  .stack-panel { padding: 1.25rem 1rem 1rem 1.25rem; }
  .stack-items { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
  .stack-logo img { width: 30px; height: 30px; }
  .stack-name { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-frame, .promo-frame:hover { transform: none; transition: none; }
  .stack-item:hover { transform: none; }
}

/* ============================================================
   STACK TECHNIQUE — présentation en paragraphe
============================================================ */
.stack-intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.stack-text {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 auto 1.5rem;
}
.stack-text strong {
  color: var(--text);
  font-weight: 700;
}

/* ============================================================
   HERO PROMO — Carte produit phare (MbeSchool)
============================================================ */
.hero-promo { position: relative; }

.promo-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  animation: float 4s ease-in-out infinite;
}

.promo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.promo-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--blue-light);
  color: var(--blue);
  font-size: .78rem; font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 50px;
}
.promo-site {
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .4rem;
}
.promo-site:hover { color: var(--blue); }

/* Zone image : ratio fixe pour éviter tout débordement */
.promo-media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;   /* correspond au ratio 1448x1086 de ton image */
  overflow: hidden;
  background: var(--bg2);
}
.promo-media picture,
.promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.promo-media:hover img { transform: scale(1.03); }

.promo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}
.promo-foot-text strong {
  display: block;
  font-size: .98rem;
  color: var(--text);
  margin-bottom: .2rem;
}
.promo-foot-text span {
  font-size: .85rem;
  color: var(--text-muted);
}
.promo-btn { white-space: nowrap; flex-shrink: 0; }

/* Responsive */
@media (max-width: 640px) {
  .promo-head, .promo-foot { padding: 1rem 1.25rem; }
  .promo-foot { flex-direction: column; align-items: stretch; }
  .promo-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   BADGE SECTEUR — ne s'étire plus sur toute la largeur
============================================================ */
.projet-badge {
  right: auto;
  width: auto;
  max-width: calc(100% - 2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Accueil : badge en haut à gauche de l'image */
.projet-thumb .projet-badge {
  top: 1rem;
  left: 1rem;
  background: var(--blue);
}

/* Page Réalisations : badge en haut à droite, comme prévu */
.projet-visual .projet-badge {
  left: auto;
  right: 12px;
}

/* ============================================================
   RÉALISATIONS — badge catégorie et compteur d'images séparés
============================================================ */
/* Compteur d'images : en haut à gauche */
.projet-visual .mb-carousel-count-badge {
  top: 12px;
  right: auto;
  left: 12px;
}

/* Badge catégorie : en haut à droite, toujours au-dessus du carrousel */
.projet-visual .projet-badge {
  top: 12px;
  left: auto;
  right: 12px;
  z-index: 3;
  max-width: calc(100% - 90px); /* laisse la place au compteur à gauche */
}

/* ============================================================
   À AJOUTER À LA FIN DE assets/css/style.css
   ------------------------------------------------------------
   Bouton "Voir la description complète" + boîte de dialogue
   affichant la description intégrale d'un projet.
   S'appuie sur les variables du design system Mbezora déjà
   définies dans :root (--blue, --border, --radius, --shadow…).
============================================================ */

/* ---- Bouton déclencheur, sous le texte tronqué ---- */
.projet-desc-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  margin-top: -.25rem;
  margin-bottom: .5rem;
  padding: .4rem .85rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.projet-desc-btn i { font-size: .7rem; }
.projet-desc-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.projet-desc-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---- Boîte de dialogue (élément HTML natif <dialog>) ---- */
/*
   IMPORTANT : le reset global du site (`*{margin:0}`) écrase la
   règle interne du navigateur `dialog:modal{margin:auto}`, qui sert
   normalement à centrer la boîte. On ne dépend donc plus de cette
   règle : on centre nous-mêmes via position fixed + transform,
   ce qui est fiable quel que soit le reset CSS en place.
*/
.projet-desc-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;                    /* on neutralise tout comportement hérité */
  transform: translate(-50%, -50%);

  width: 92vw;                  /* fallback universel (pas besoin de min()) */
  max-width: 760px;
  max-height: 80vh;
  overflow-y: auto;

  border: none;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

/* Fond assombri derrière la boîte de dialogue */
.projet-desc-dialog::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

.pdd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.pdd-header h3 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--text);
  line-height: 1.35;
}
.pdd-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: none;
  background: var(--blue-light);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .9rem;
  transition: all var(--transition);
}
.pdd-close:hover { background: var(--blue); color: #fff; transform: rotate(90deg); }

.pdd-body {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.projet-desc-dialog .projet-client { margin-bottom: .75rem; }
.projet-desc-dialog .projet-techs  { margin-top: .5rem; }

/* Petite animation d'apparition — on garde le translate(-50%,-50%)
   de centrage à chaque étape, sinon l'animation l'écraserait à
   la fin (transform:none réinitialiserait le centrage). */
.projet-desc-dialog[open] {
  animation: pdd-in .25s ease both;
}
@keyframes pdd-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 480px) {
  .projet-desc-dialog { padding: 1.5rem; width: 94vw; max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .projet-desc-dialog[open] { animation: none; }
}

/* ============================================================
   ACCUEIL — badges type (catégorie) + secteur sur les projets
============================================================ */
.projet-thumb .projet-badge--type {
  top: 1rem;
  left: 1rem;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 55%;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.projet-thumb .projet-badge--type i {
  font-size: .7rem;
  color: #fff;        /* écrase le font-size/color hérités de .projet-thumb */
}

.projet-thumb .projet-badge--secteur {
  top: 1rem;
  left: auto;
  right: 1rem;
  max-width: 45%;
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* Badge type dans la boîte de dialogue */
.projet-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 50px;
  margin-bottom: .75rem;
}
.projet-badge-inline i { font-size: .7rem; }

/* ============================================================
   RÉALISATIONS — zone image, carrousel et image principale
   (accueil : .projet-thumb / page Réalisations : .projet-visual)
============================================================ */
:root {
  --projet-ratio: 4 / 3;        /* 16 / 10 = plus large et moins haut */
  --projet-fit:   cover;        /* "contain" = image entière, jamais rognée */
  --projet-pos:   center center;
}

/* Cadre : ratio fixe, rien ne dépasse */
.projet-thumb,
.projet-visual {
  position: relative;
  overflow: hidden;
  height: auto;
  aspect-ratio: var(--projet-ratio);
  background-color: var(--bg2);
}

/* Carrousel : occupe tout le cadre, sans dépendre d'un height:100% */
.projet-thumb .mb-carousel,
.projet-visual .mb-carousel {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

/* Piste : les diapositives sont alignées horizontalement, jamais empilées */
.projet-thumb .mb-carousel-track,
.projet-visual .mb-carousel-track {
  position: absolute;
  inset: 0;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.projet-thumb .mb-carousel-slide,
.projet-visual .mb-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: auto;
  overflow: hidden;
}

/* Image : collée aux 4 bords de sa diapositive (ou du cadre) */
.projet-thumb .mb-carousel-slide img,
.projet-visual .mb-carousel-slide img,
.projet-thumb > img,
.projet-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  object-fit: var(--projet-fit);
  object-position: var(--projet-pos);
}

/* Accueil : compteur d'images en bas à droite (le haut porte les badges) */
.projet-thumb .mb-carousel-count-badge {
  top: auto;
  bottom: 10px;
  right: 10px;
}

/* Les badges restent au-dessus des images */
.projet-thumb .projet-badge,
.projet-visual .projet-badge { z-index: 3; }


/* ============================================================
   SECTEURS D'ACTIVITÉ — cartes grand format (accueil)
============================================================ */
.sx-section {
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
/* Section plus large que les autres : cartes plus grandes */
.sx-section .container { max-width: 1320px; }
.sx-section .section-header { max-width: 760px; }
.sx-section .section-header h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.sx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* Le lien porte l'animation d'apparition (.reveal) ;
   les effets au survol sont sur l'élément interne pour ne pas la casser. */
.sx-card {
  --sx: var(--blue);
  display: flex;
  text-decoration: none;
  color: inherit;
}
.sx-card:hover { color: inherit; }

.sx-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
  box-shadow .4s ease,
  border-color .4s ease;
}

/* ---- Visuel du haut ---- */
.sx-visual {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--sx);   /* secours si color-mix n'est pas supporté */
  background: linear-gradient(135deg,
  color-mix(in srgb, var(--sx) 70%, #0B1B4A) 0%,
  var(--sx) 55%,
  color-mix(in srgb, var(--sx) 60%, #fff) 100%);
}
/* Reflets + ombre douce en bas (lisible aussi sur photo) */
.sx-visual::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
          radial-gradient(circle at 85% 12%, rgba(255,255,255,.30), transparent 45%),
          linear-gradient(to top, rgba(15,23,42,.30), transparent 60%);
  pointer-events: none;
}
/* Trame de points décorative */
.sx-visual::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.28) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .45;
  pointer-events: none;
}
.sx-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform .7s ease;
}
.sx-watermark {
  position: absolute;
  right: -12px; bottom: -28px;
  z-index: 0;
  font-size: 10rem;
  line-height: 1;
  color: rgba(255,255,255,.20);
  transform: rotate(-12deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.sx-num {
  position: absolute;
  top: 1.1rem; left: 1.25rem;
  z-index: 2;
  padding: .25rem .8rem;
  border-radius: 50px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* ---- Icône qui chevauche le visuel ---- */
.sx-icon {
  position: relative;
  z-index: 3;
  width: 72px; height: 72px;
  margin: -36px 0 0 1.75rem;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--sx);
  font-size: 1.8rem;
  box-shadow: 0 0 0 6px #fff, 0 14px 30px rgba(15,23,42,.18);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

/* ---- Corps de carte ---- */
.sx-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.75rem 1.75rem;
}
.sx-body h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: .65rem;
}
.sx-body p {
  flex: 1;
  font-size: .96rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sx-more {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--sx);
  font-size: .9rem;
  font-weight: 700;
}
.sx-more i {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  background: color-mix(in srgb, var(--sx) 12%, #fff);
  color: var(--sx);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

/* ---- Survol / focus clavier ---- */
.sx-card:hover .sx-card-inner {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--sx) 45%, var(--border));
  box-shadow: 0 28px 56px -14px color-mix(in srgb, var(--sx) 38%, transparent),
  var(--shadow-lg);
}
.sx-card:hover .sx-watermark { transform: rotate(-4deg) scale(1.1); }
.sx-card:hover .sx-photo     { transform: scale(1.07); }
.sx-card:hover .sx-icon      { background: var(--sx); color: #fff; transform: translateY(-3px); }
.sx-card:hover .sx-more i    { background: var(--sx); color: #fff; transform: translateX(5px); }
.sx-card:focus-visible .sx-card-inner {
  outline: 3px solid var(--sx);
  outline-offset: 3px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 640px) {
  .sx-grid { grid-template-columns: 1fr; }
  .sx-visual { height: 180px; }
  .sx-icon { width: 64px; height: 64px; margin-top: -32px; font-size: 1.6rem; }
  .sx-body { padding: 1.1rem 1.4rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-card-inner, .sx-watermark, .sx-photo, .sx-icon, .sx-more i { transition: none; }
  .sx-card:hover .sx-card-inner { transform: none; }
}

/* ============================================================
   HERO — carte produit agrandie, image jamais coupée
============================================================ */

/* Hero plus large, avec plus de place pour la carte MbeSchool */
.hero .container { max-width: 1360px; }
.hero-inner {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 3.5rem;
}

/* Zone image : plus de ratio imposé, la hauteur suit l'image */
.hero-promo .promo-media {
  aspect-ratio: auto;
  height: auto;
  background: #fff;
}
.hero-promo .promo-media picture {
  display: block;
  width: 100%;
  height: auto;
}
.hero-promo .promo-media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;   /* affiche l'image entière, sans recadrage */
  display: block;
}
/* Plus de zoom au survol : il rognait les bords */
.hero-promo .promo-media:hover img { transform: none; }

/* Textes de la carte un peu plus confortables */
.hero-promo .promo-head { padding: 1.25rem 1.75rem; }
.hero-promo .promo-foot { padding: 1.5rem 1.75rem; }
.hero-promo .promo-foot-text strong { font-size: 1.1rem; }
.hero-promo .promo-foot-text span   { font-size: .9rem; line-height: 1.55; }

/* Tablette et mobile : on réempile (ce bloc doit rester après les règles ci-dessus) */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-promo { max-width: 720px; }
}
@media (max-width: 640px) {
  .hero-promo .promo-head,
  .hero-promo .promo-foot { padding: 1rem 1.25rem; }
}

/* ============================================================
   RÉALISATIONS — cartes plus larges, images en format paysage
   (accueil : #realisations / page Réalisations : .projets-full-grid)
============================================================ */

/* Format d'image plus large (16/10 au lieu de 4/3) : le variable est lu
   par le bloc "zone image" défini plus haut, accueil ET page Réalisations */
:root { --projet-ratio: 16 / 10; }

/* ---- Accueil : section élargie, 3 grandes cartes ---- */
#realisations .container { max-width: 1400px; }
#realisations .projets-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

/* ---- Page Réalisations : section élargie, colonnes plus larges ---- */
.container:has(> .projets-full-grid) { max-width: 1400px; }
.projets-full-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2rem;
}

/* ---- Détails un peu plus grands pour rester équilibrés avec l'image ---- */
.projet-thumb .mb-carousel-arrow,
.projet-visual .mb-carousel-arrow { width: 40px; height: 40px; font-size: .9rem; }
.projet-card .projet-body h3,
.projet-card-full .projet-body h3 { font-size: 1.2rem; }

/* ---- Responsive (doit rester après les règles ci-dessus) ---- */
@media (max-width: 1024px) {
  #realisations .projets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 768px) {
  .projets-full-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  #realisations .projets-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   À AJOUTER À LA FIN DE assets/css/style.css
   ------------------------------------------------------------
   Page À propos — bandeau + section histoire / mission
   Préfixe .ab- pour éviter tout conflit avec l'existant.
============================================================ */

/* ---- Bandeau ---- */
.ab-banner h1 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.15;
}
.ab-banner p { max-width: 640px; }

/* ---- Grille principale ---- */
.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 4.5rem;
  align-items: center;
}

/* ---- Colonne texte ---- */
.ab-story-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.ab-story-text > p { margin-bottom: 1rem; max-width: 62ch; }
.ab-story-text > p.ab-lead {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text);
  padding-left: 1.1rem;
  border-left: 4px solid var(--blue);
  margin-bottom: 1.25rem;
}

.ab-approach {
  display: grid;
  gap: 1.1rem;
  margin: 2rem 0 2.25rem;
}
.ab-approach li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ab-approach-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.ab-approach strong {
  display: block;
  color: var(--text);
  font-size: .97rem;
  line-height: 1.4;
}
.ab-approach li > div > span {
  display: block;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.ab-actions { display: flex; gap: .85rem; flex-wrap: wrap; }

/* ---- Colonne visuelle ---- */
.ab-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.25rem;
}

/* Pastille « Depuis 20XX » */
.ab-since {
  position: absolute;
  top: 0; right: 1.5rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .45rem 1rem;
  font-size: .85rem;
  color: var(--text-muted);
  box-shadow: var(--shadow);
}
.ab-since i { color: var(--blue); font-size: .8rem; }
.ab-since strong { color: var(--text); font-weight: 700; }

/* Carte mission : l'élément fort de la section */
.ab-mission {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 2.25rem 2.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-dark) 100%);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.ab-mission::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,255,.35), transparent 70%);
  pointer-events: none;
}
.ab-mission > * { position: relative; }

.ab-mission-title {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  margin-bottom: .6rem;
}
.ab-mission .ab-mission-text {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 1.75rem;
}

.ab-pillars {
  list-style: none;
  display: grid;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.ab-pillars li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ab-pillar-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ab-pillars strong {
  display: block;
  color: #fff;
  font-size: .98rem;
  line-height: 1.35;
}
.ab-pillars li > div > span {
  display: block;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}

/* Profils de l'équipe */
.ab-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.ab-profile {
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
}
.ab-profile i {
  color: var(--blue);
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.ab-profile span {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ab-story { grid-template-columns: 1fr; gap: 3rem; }
  .ab-visual { max-width: 640px; }
}
@media (max-width: 480px) {
  .ab-mission { padding: 2.25rem 1.5rem 1.75rem; }
  .ab-profiles { grid-template-columns: 1fr; }
  .ab-actions .btn { width: 100%; justify-content: center; }
  .ab-since { right: 1rem; }
}

/* ============================================================
   À AJOUTER À LA FIN DE assets/css/style.css
   ------------------------------------------------------------
   Page À propos — Mission / Vision / Valeurs
   Préfixe .mv- pour éviter tout conflit avec l'existant.
   S'appuie sur les variables de :root (--blue, --border, …).
============================================================ */

/* ============================================================
   MISSION
============================================================ */
.mv-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: center;
}

.mv-mission-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.mv-mission-text p { max-width: 60ch; margin-bottom: 1rem; }
.mv-mission-text .mv-lead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--text);
  padding-left: 1.1rem;
  border-left: 4px solid var(--blue);
  margin-bottom: 1.25rem;
}

.mv-quote {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--blue-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mv-quote i { color: var(--blue); font-size: 1.1rem; margin-top: .2rem; flex-shrink: 0; }
.mv-quote span {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}

/* ---- Les 3 leviers : une pile reliée par un fil vertical ---- */
.mv-levers {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mv-levers::before {
  content: '';
  position: absolute;
  top: 40px; bottom: 40px;
  left: 33px;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--accent));
  opacity: .35;
}
.mv-lever {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.mv-lever:hover {
  transform: translateX(6px);
  border-color: var(--blue);
  box-shadow: var(--shadow-lg);
}
.mv-lever-icon {
  position: relative;
  z-index: 1;
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 8px 20px rgba(0,102,255,.28);
}
.mv-lever-body h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.mv-lever-body p  { font-size: .92rem; line-height: 1.6; }

/* ============================================================
   VISION
============================================================ */
.mv-vision-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding: 3.5rem;
  border-radius: 28px;
  background: linear-gradient(140deg, var(--blue) 0%, var(--blue-dark) 70%, #0B2A8A 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.mv-vision-panel::before {
  content: '';
  position: absolute;
  top: -160px; left: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,255,.30), transparent 70%);
  pointer-events: none;
}
.mv-vision-panel > * { position: relative; }

.mv-vision-watermark {
  position: absolute !important;
  right: -50px; bottom: -70px;
  font-size: 20rem;
  line-height: 1;
  color: rgba(255,255,255,.07);
  pointer-events: none;
}

.mv-vision-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 50px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  font-size: .82rem;
  font-weight: 700;
}
.mv-vision-head h2 {
  color: #fff;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.mv-vision-head p {
  color: rgba(255,255,255,.82);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 52ch;
}

.mv-vision-points { display: grid; gap: .9rem; }
.mv-vision-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--transition), transform var(--transition);
}
.mv-vision-point:hover { background: rgba(255,255,255,.17); transform: translateX(4px); }
.mv-vision-point > i {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16);
  color: var(--accent);
  font-size: 1rem;
}
.mv-vision-point strong {
  display: block;
  color: #fff;
  font-size: .98rem;
  line-height: 1.35;
  margin-bottom: .15rem;
}
.mv-vision-point span {
  display: block;
  font-size: .87rem;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}

/* ============================================================
   VALEURS
============================================================ */
.mv-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.mv-value {
  --mv: var(--blue);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.6rem 1.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--mv);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mv-value:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--mv) 35%, transparent);
}
.mv-value-icon {
  width: 56px; height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mv) 12%, #fff);
  color: var(--mv);
  font-size: 1.4rem;
  transition: background var(--transition), color var(--transition);
}
.mv-value:hover .mv-value-icon { background: var(--mv); color: #fff; }
.mv-value h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.mv-value > p { font-size: .93rem; line-height: 1.65; margin-bottom: 1.25rem; }

.mv-value-list {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: .5rem;
}
.mv-value-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--text);
}
.mv-value-list i {
  color: var(--mv);
  font-size: .72rem;
  margin-top: .3rem;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .mv-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .mv-split { grid-template-columns: 1fr; gap: 3rem; }
  .mv-vision-panel {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 2rem;
  }
}
@media (max-width: 640px) {
  .mv-values-grid { grid-template-columns: 1fr; }
  .mv-lever { padding: 1.25rem; gap: 1rem; }
  .mv-lever-icon { width: 46px; height: 46px; font-size: 1.05rem; }
  .mv-levers::before { left: 28px; }
  .mv-vision-panel { padding: 2rem 1.25rem; border-radius: 20px; }
  .mv-vision-watermark { font-size: 12rem; right: -40px; bottom: -40px; }
  .mv-quote { padding: 1rem 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-lever, .mv-lever:hover,
  .mv-vision-point, .mv-vision-point:hover,
  .mv-value, .mv-value:hover { transition: none; transform: none; }
}



/* ============================================================
   À COLLER À LA FIN DE assets/css/style.css
   ------------------------------------------------------------
   PAGE SERVICES — refonte
   Préfixe .sv- : aucun conflit avec les styles existants.
   Chaque pôle définit sa couleur via la variable --sv
   (renseignée dans services.php, tableau $poles).
============================================================ */

/* ------------------------------------------------------------
   Correctif global : « overflow-x: hidden » sur html ET body
   empêche position: sticky de fonctionner (la barre de
   catégories et la sidebar des articles ne restaient pas fixes).
   « clip » coupe le débordement sans casser sticky.
------------------------------------------------------------ */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

.sv-page {
  --sv-navy:   #060F26;
  --sv-navy-2: #0A1A42;
  --sv-mono:   "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sv-page [id] { scroll-margin-top: calc(var(--nav-h) + 76px); }

/* Focus clavier visible sur tous les éléments interactifs de la page */
.sv-page a:focus-visible,
.sv-page button:focus-visible,
.sv-page [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ============================================================
   HERO
============================================================ */
.sv-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 100px;
  color: #fff;
  background:
          radial-gradient(1100px 560px at 85% -10%, rgba(0,194,255,.20), transparent 60%),
          radial-gradient(900px 520px at -10% 110%, rgba(124,58,237,.24), transparent 60%),
          linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 55%, #0B2A8A 100%);
}
.sv-hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
          linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 65% 40%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at 65% 40%, #000 25%, transparent 72%);
  animation: sv-grid 24s linear infinite;
}
@keyframes sv-grid { to { background-position: 48px 48px, 48px 48px; } }

.sv-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  animation: sv-orb 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.sv-orb--1 { width: 380px; height: 380px; background: #0066FF; top: -140px; right: 12%; }
.sv-orb--2 { width: 320px; height: 320px; background: #7C3AED; bottom: -160px; left: 4%; animation-delay: -6s; }
@keyframes sv-orb { to { transform: translate(40px, 30px) scale(1.12); } }

.sv-hero .container { position: relative; z-index: 1; max-width: 1320px; }
.sv-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 4rem;
  align-items: center;
}

.sv-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem 1rem;
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #C9D8FF;
  font-size: .85rem; font-weight: 600;
}
.sv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: sv-pulse 2s ease-out infinite;
}
@keyframes sv-pulse { to { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }

.sv-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fff;
  margin: 1.3rem 0 1.25rem;
  max-width: 18ch;
}
.sv-hero-lead {
  color: rgba(226,232,255,.78);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 54ch;
  margin-bottom: 2.1rem;
}
.sv-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.sv-btn-ghost {
  background: rgba(255,255,255,.07);
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.sv-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; transform: translateY(-2px); }

.sv-hero-facts {
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sv-hero-facts li {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: rgba(226,232,255,.8);
}
.sv-hero-facts i { color: var(--accent); }

/* ---- Fenêtre de code : l'élément fort de la page ---- */
.sv-hero-visual { position: relative; }
.sv-code {
  position: relative;
  border-radius: 18px;
  background: rgba(7,15,38,.88);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
          0 40px 90px -24px rgba(0,0,0,.7),
          0 0 70px rgba(0,102,255,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.sv-code:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.sv-code-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sv-code-bar > span { width: 11px; height: 11px; border-radius: 50%; }
.sv-code-bar > span:nth-child(1), .sv-mock-bar > span:nth-child(1) { background: #FF5F57; }
.sv-code-bar > span:nth-child(2), .sv-mock-bar > span:nth-child(2) { background: #FEBC2E; }
.sv-code-bar > span:nth-child(3), .sv-mock-bar > span:nth-child(3) { background: #28C840; }
.sv-code-file {
  margin-left: .75rem;
  font-family: var(--sv-mono); font-style: normal;
  font-size: .78rem; color: rgba(226,232,255,.55);
}
.sv-code-body {
  margin: 0;
  padding: 1.3rem 1.4rem 1.1rem;
  font-family: var(--sv-mono);
  font-size: .86rem;
  line-height: 1.85;
  color: #E2E8FF;
  overflow-x: auto;
  counter-reset: sv-ln;
  scrollbar-width: thin;
}
.sv-code-body code { font-family: inherit; }
.sv-code-line {
  display: inline-block;
  opacity: 0;
  transform: translateX(-8px);
  animation: sv-type .45s ease forwards;
  animation-delay: calc(var(--i) * .17s + .5s);
}
.sv-code-line::before {
  counter-increment: sv-ln;
  content: counter(sv-ln);
  display: inline-block;
  width: 1.5rem; margin-right: 1.1rem;
  text-align: right;
  color: rgba(226,232,255,.22);
}
@keyframes sv-type { to { opacity: 1; transform: none; } }

.tk-k { color: #C4B5FD; }
.tk-f { color: #7FB2FF; }
.tk-s { color: #7EE7B8; }
.tk-p { color: #FDBA74; }
.tk-c { color: #6B7A99; font-style: italic; }
.sv-caret {
  display: inline-block;
  width: 8px; height: 1.05em;
  margin-left: 4px;
  background: var(--accent);
  vertical-align: -2px;
  animation: sv-blink 1s steps(2) infinite;
}
@keyframes sv-blink { 50% { opacity: 0; } }

.sv-code-status {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(34,197,94,.06);
  font-size: .8rem;
  opacity: 0;
  animation: sv-type .5s ease forwards 2.6s;
}
.sv-status-ok { color: #4ADE80; font-weight: 700; display: inline-flex; gap: .45rem; align-items: center; }
.sv-status-meta { color: rgba(226,232,255,.5); font-family: var(--sv-mono); font-size: .74rem; }

.sv-float {
  position: absolute;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
  font-size: .8rem;
  animation: float 5s ease-in-out infinite;
}
.sv-float strong { display: block; font-size: .85rem; line-height: 1.2; }
.sv-float small  { color: var(--text-muted); }
.sv-float--a { top: -26px; right: -18px; }
.sv-float--b { bottom: -30px; left: -26px; animation-delay: 1.4s; }
.sv-float-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
}

/* ============================================================
   NAVIGATION STICKY
============================================================ */
.sv-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 100;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.sv-nav-inner {
  position: relative;
  display: flex; gap: .4rem;
  padding: .65rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sv-nav-inner::-webkit-scrollbar { display: none; }
.sv-nav-inner a {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem 1rem .4rem .4rem;
  border-radius: 50px;
  border: 1.5px solid transparent;
  color: var(--text-muted);
  font-size: .87rem; font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sv-nav-ic {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  background: color-mix(in srgb, var(--sv) 12%, #fff);
  color: var(--sv);
  transition: background var(--transition), color var(--transition);
}
.sv-nav-inner a:hover { color: var(--text); border-color: color-mix(in srgb, var(--sv) 35%, transparent); }
.sv-nav-inner a.is-active { background: var(--sv); color: #fff; }
.sv-nav-inner a.is-active .sv-nav-ic { background: rgba(255,255,255,.22); color: #fff; }
.sv-nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent), var(--accent2));
  transform: scaleX(0);
  transform-origin: left;
}

/* ============================================================
   TITRES DE SECTION
============================================================ */
.sv-title { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.sv-kicker {
  display: inline-block;
  font-size: .9rem; font-weight: 700;
  color: var(--blue);
  margin-bottom: .6rem;
}
.sv-title h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .9rem;
}
.sv-title p { font-size: 1.05rem; line-height: 1.7; }
.sv-title--dark h2 { color: #fff; }
.sv-title--dark p  { color: rgba(226,232,255,.72); }
.sv-title--dark .sv-kicker { color: var(--accent); }

/* ============================================================
   VUE D'ENSEMBLE
============================================================ */
.sv-overview { padding: 100px 0 90px; background: #fff; }
.sv-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.sv-ov-card {
  --sv: var(--blue);
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: 2rem;
  background: #fff;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.sv-ov-card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%),
  color-mix(in srgb, var(--sv) 14%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
}
.sv-ov-card:hover {
  color: inherit;
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--sv) 45%, var(--border));
  box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--sv) 45%, transparent);
}
.sv-ov-card:hover::before { opacity: 1; }
.sv-ov-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--sv) 12%, #fff);
  color: var(--sv);
  font-size: 1.35rem;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
}
.sv-ov-card:hover .sv-ov-icon { background: var(--sv); color: #fff; transform: rotate(-6deg) scale(1.06); }
.sv-ov-card h3 { font-size: 1.2rem; color: var(--text); margin-bottom: .5rem; }
.sv-ov-card p  { font-size: .93rem; line-height: 1.6; flex: 1; }
.sv-ov-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.4rem;
  color: var(--sv);
  font-size: .9rem; font-weight: 700;
}
.sv-ov-link i { font-size: .75rem; transition: transform var(--transition); }
.sv-ov-card:hover .sv-ov-link i { transform: translateY(3px); }
.sv-ov-card--cta:hover .sv-ov-link i { transform: translateX(4px); }

.sv-ov-card--cta {
  border: none;
  background: linear-gradient(150deg, var(--blue) 0%, var(--accent2) 100%);
}
.sv-ov-card--cta h3, .sv-ov-card--cta p, .sv-ov-card--cta .sv-ov-link { color: #fff; }
.sv-ov-card--cta p { color: rgba(255,255,255,.85); }
.sv-ov-card--cta .sv-ov-icon { background: rgba(255,255,255,.18); color: #fff; }
.sv-ov-card--cta:hover { box-shadow: 0 26px 50px -18px rgba(124,58,237,.55); }
.sv-ov-card--cta:hover .sv-ov-icon { background: #fff; color: var(--accent2); }

/* ============================================================
   PÔLES DÉTAILLÉS
============================================================ */
.sv-pole {
  --sv: var(--blue);
  --sv-soft: color-mix(in srgb, var(--sv) 10%, #fff);
  position: relative;
  padding: 110px 0 100px;
  background: #fff;
}
.sv-pole--alt { background: var(--bg); }
.sv-pole::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sv), transparent);
  opacity: .55;
}

.sv-pole-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  max-width: 960px;
  margin-bottom: 3.5rem;
}
.sv-pole-icon {
  width: 76px; height: 76px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--sv), color-mix(in srgb, var(--sv) 55%, #00C2FF));
  color: #fff;
  font-size: 1.8rem;
  box-shadow: 0 18px 36px -12px color-mix(in srgb, var(--sv) 60%, transparent);
}
.sv-pole-label {
  display: inline-block;
  padding: .3rem .9rem;
  margin-bottom: .85rem;
  border-radius: 50px;
  background: var(--sv-soft);
  color: color-mix(in srgb, var(--sv) 85%, #0F172A);
  font-size: .85rem; font-weight: 700;
}
.sv-pole-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 1rem;
  max-width: 26ch;
}
.sv-pole-head p { font-size: 1.04rem; line-height: 1.75; max-width: 70ch; }

.sv-pole-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 3.25rem;
  align-items: start;
}
.sv-pole--reverse .sv-pole-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.sv-pole--reverse .sv-pole-visual { order: -1; }

/* ---- Offres ---- */
.sv-offres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.sv-offre {
  position: relative;
  isolation: isolate;
  padding: 1.4rem 1.4rem 1.3rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.sv-offre::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 0) var(--my, 0),
  color-mix(in srgb, var(--sv) 10%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}
.sv-offre::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sv);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.sv-offre:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sv) 35%, var(--border));
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--sv) 50%, transparent);
}
.sv-offre:hover::before { opacity: 1; }
.sv-offre:hover::after  { transform: scaleY(1); }
.sv-offre-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .95rem;
  background: var(--sv-soft);
  color: var(--sv);
  font-size: 1rem;
  transition: background .3s, color .3s;
}
.sv-offre:hover .sv-offre-icon { background: var(--sv); color: #fff; }
.sv-offre h3 { font-size: 1rem; line-height: 1.35; color: var(--text); margin-bottom: .4rem; }
.sv-offre p  { font-size: .87rem; line-height: 1.6; }

/* ---- Visuel (reste visible pendant la lecture des offres) ---- */
.sv-pole-visual {
  position: sticky;
  top: calc(var(--nav-h) + 92px);
}
.sv-pole-visual::before {
  content: '';
  position: absolute; inset: 10% 6%;
  z-index: 0;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--sv) 35%, transparent), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.sv-pole-visual > * { position: relative; z-index: 1; }

/* ============================================================
   MAQUETTES (commun)
============================================================ */
.sv-mock {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--sv) 55%, transparent), var(--shadow);
}
.sv-mock-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem 1rem;
  background: #F1F5FD;
  border-bottom: 1px solid var(--border);
}
.sv-mock-bar > span { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sv-mock-url {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .45rem;
  margin-left: .6rem;
  padding: .22rem .85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-style: normal; font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-mock-url i { color: #16A34A; font-size: .65rem; }
.sv-mock-caption {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .8rem;
}
.sv-mock-caption i { color: var(--sv); }

/* ---- Logiciel de gestion ---- */
.sv-app { display: grid; grid-template-columns: 54px minmax(0, 1fr); }
.sv-app-side {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1rem 0;
  background: var(--sv);
}
.sv-app-side i {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65); font-size: .8rem;
}
.sv-app-side i.is-on { background: rgba(255,255,255,.2); color: #fff; }
.sv-app-main { display: grid; gap: .8rem; padding: 1rem; background: #F8FAFF; }
.sv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.sv-kpi {
  padding: .65rem .75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sv-kpi span   { display: block; font-size: .64rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-kpi strong { display: block;  font-size: .98rem; color: var(--text); }
.sv-kpi em     { font-style: normal; font-size: .64rem; font-weight: 700; color: #16A34A; }
.sv-chart {
  display: flex; align-items: flex-end; gap: .45rem;
  height: 118px;
  padding: .8rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sv-chart i {
  flex: 1;
  height: 6%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--sv), color-mix(in srgb, var(--sv) 30%, #fff));
  transition: height 1s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--d) * .08s + .3s);
}
.visible .sv-chart i { height: var(--h); }
.sv-rows { display: grid; gap: .4rem; }
.sv-rows > div {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .72rem; color: var(--text);
}
.sv-rows span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-rows b { flex-shrink: 0; padding: .12rem .55rem; border-radius: 50px; font-size: .64rem; }
.sv-rows b.ok   { background: #DCFCE7; color: #15803D; }
.sv-rows b.wip  { background: #FEF3C7; color: #B45309; }
.sv-rows b.auto { background: var(--sv-soft); color: var(--sv); }

/* ---- Site web + scores ---- */
.sv-web-hero {
  padding: 1.5rem 1.4rem 1.3rem;
  background: linear-gradient(135deg, var(--sv-soft), #fff);
  border-bottom: 1px solid var(--border);
}
.sv-sk { height: 9px; margin-bottom: .55rem; border-radius: 6px; background: #E2E8F0; }
.sv-sk--title { height: 16px; width: 72%; margin-bottom: .9rem; background: color-mix(in srgb, var(--sv) 55%, #fff); }
.sv-web-btns { display: flex; gap: .5rem; margin-top: 1rem; }
.sv-web-btns span { height: 24px; width: 92px; border-radius: 50px; background: var(--sv); }
.sv-web-btns span + span { background: transparent; border: 1.5px solid var(--sv); width: 76px; }
.sv-scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  padding: 1.4rem 1rem 1.2rem;
}
.sv-score { text-align: center; }
.sv-score > span { display: block; margin-top: .5rem; font-size: .68rem; line-height: 1.3; color: var(--text-muted); }
.sv-score-ring { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.sv-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sv-score-track { fill: none; stroke: #E8EEF9; stroke-width: 6; }
.sv-score-bar {
  fill: none; stroke: #16A34A; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 175.9;
  stroke-dashoffset: 175.9px;
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .4s;
}
.visible .sv-score-bar { stroke-dashoffset: var(--off); }
.sv-score-ring strong {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .95rem; color: #15803D;
}

/* ---- Smartphone ---- */
.sv-phone-stage {
  position: relative;
  display: flex; justify-content: center;
  padding: 1rem 0 1.5rem;
}
.sv-phone {
  position: relative;
  width: 256px; height: 510px;
  padding: 10px;
  border-radius: 42px;
  background: #0F172A;
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--sv) 70%, transparent), inset 0 0 0 2px #334155;
  animation: float 6s ease-in-out infinite;
}
.sv-phone-notch {
  position: absolute; top: 18px; left: 50%;
  width: 84px; height: 22px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #0F172A;
  z-index: 2;
}
.sv-phone-screen {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: #F4F6FC;
}
.sv-ph-header {
  padding: 2.6rem 1.1rem 1.6rem;
  background: linear-gradient(150deg, var(--sv), color-mix(in srgb, var(--sv) 55%, #00C2FF));
  color: #fff;
}
.sv-ph-header small  { display: block; font-size: .7rem; opacity: .8; }
.sv-ph-header strong { font-size: 1rem; }
.sv-ph-card {
  margin: -.9rem .85rem 0;
  padding: .85rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px -12px rgba(15,23,42,.3);
}
.sv-ph-card-top { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-bottom: .5rem; }
.sv-ph-card-top b { color: var(--text); }
.sv-ph-progress { height: 7px; border-radius: 6px; background: #EEF2FA; overflow: hidden; }
.sv-ph-progress i {
  display: block; height: 100%; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sv), #00C2FF);
  transition: width 1.4s cubic-bezier(.2,.8,.2,1) .5s;
}
.visible .sv-ph-progress i { width: 66%; }
.sv-ph-list { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .85rem; }
.sv-ph-list > div {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem;
  background: #fff;
  border-radius: 12px;
  font-size: .68rem;
}
.sv-ph-list > div > span:nth-child(2) { flex: 1; min-width: 0; }
.sv-ph-list b     { display: block; color: var(--text); font-size: .72rem; }
.sv-ph-list small { color: var(--text-muted); }
.sv-ph-list > div > i { color: #CBD5E1; font-size: .7rem; }
.sv-ph-list > div > i.sv-ph-ok { color: #16A34A; font-size: .9rem; }
.sv-ph-ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sv-soft); color: var(--sv);
  flex-shrink: 0;
}
.sv-ph-tab {
  display: flex; justify-content: space-around;
  padding: .75rem 0 1rem;
  background: #fff;
  border-top: 1px solid #EEF2FA;
  color: #94A3B8; font-size: .85rem;
}
.sv-ph-tab i.is-on { color: var(--sv); }

.sv-toast {
  position: absolute;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .95rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 36px -14px rgba(15,23,42,.35);
  font-size: .75rem;
  animation: float 5s ease-in-out infinite;
}
.sv-toast > i { color: var(--sv); font-size: .95rem; }
.sv-toast strong { display: block; font-size: .8rem; color: var(--text); line-height: 1.2; }
.sv-toast small  { color: var(--text-muted); }
.sv-toast--a { top: 16%; right: 0; animation-delay: .8s; }
.sv-toast--b { bottom: 14%; left: 0; animation-delay: 2s; }
.sv-toast--b > i { color: var(--text); }

/* ---- Architecture cloud ---- */
.sv-arch { padding-bottom: 1rem; }
.sv-arch-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1.25rem;
  background: #F1F5FD;
  border-bottom: 1px solid var(--border);
  font-size: .8rem; color: var(--text);
}
.sv-arch-head i { color: var(--sv); margin-right: .35rem; }
.sv-arch-head b { display: inline-flex; align-items: center; color: #15803D; font-size: .75rem; }
.sv-arch-head b i { color: #22C55E; font-size: .45rem; animation: sv-blink 1.6s ease-in-out infinite; }
.sv-arch svg { display: block; width: 100%; height: auto; padding: 1rem .75rem .25rem; }
.sv-arch-link {
  fill: none;
  stroke: var(--sv);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  opacity: .7;
  animation: sv-dash 1.1s linear infinite;
}
@keyframes sv-dash { to { stroke-dashoffset: -20; } }
.sv-arch-node rect { fill: #fff; stroke: color-mix(in srgb, var(--sv) 45%, #fff); stroke-width: 1.5; }
.sv-arch-node text {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  fill: #1E293B;
  text-anchor: middle;
  dominant-baseline: middle;
}
.sv-arch-node--main rect { fill: var(--sv); stroke: var(--sv); }
.sv-arch-node--main text { fill: #fff; }
.sv-arch-node--data rect { fill: var(--sv-soft); stroke-dasharray: 4 3; }
.sv-arch-tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.25rem; }
.sv-arch-tags span {
  padding: .25rem .7rem;
  border-radius: 50px;
  background: var(--sv-soft);
  color: color-mix(in srgb, var(--sv) 85%, #0F172A);
  font-size: .72rem; font-weight: 600;
}

/* ---- Rapport d'audit ---- */
.sv-audit { padding: 1.5rem; }
.sv-audit-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem; padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--border);
}
.sv-audit-head strong { display: block; color: var(--text); font-size: .98rem; }
.sv-audit-head small  { font-size: .75rem; color: var(--text-muted); }
.sv-audit-score {
  flex-shrink: 0;
  font-size: 1.9rem; font-weight: 800;
  color: var(--sv);
}
.sv-audit-score small { font-size: .8rem; color: var(--text-muted); }
.sv-meter { margin-bottom: .95rem; }
.sv-meter-top { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .35rem; color: var(--text); }
.sv-meter-top b { color: var(--text-muted); font-weight: 600; }
.sv-meter-track { height: 8px; border-radius: 6px; background: #EEF2FA; overflow: hidden; }
.sv-meter-track i {
  display: block; height: 100%; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sv), color-mix(in srgb, var(--sv) 50%, #FDE68A));
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--d) * .12s + .3s);
}
.visible .sv-meter-track i { width: var(--w); }
.sv-roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 1.4rem;
}
.sv-roadmap > div {
  padding: .65rem .6rem;
  border-radius: 10px;
  background: var(--sv-soft);
  font-size: .7rem; line-height: 1.35;
  color: var(--text);
}
.sv-roadmap strong { display: block; color: var(--sv);  font-size: .85rem; }

/* ============================================================
   PIED DE PÔLE : livrables, technologies, certifications
============================================================ */
.sv-pole-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-top: 3.25rem;
}
.sv-box {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sv-box h4 {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.15rem;
  font-size: 1rem; color: var(--text);
}
.sv-box h4 i { color: var(--sv); }
.sv-checks li {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-bottom: .7rem;
  font-size: .9rem; line-height: 1.5;
  color: var(--text);
}
.sv-checks li:last-child { margin-bottom: 0; }
.sv-checks li i {
  flex-shrink: 0;
  width: 20px; height: 20px; margin-top: .1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sv-soft); color: var(--sv);
  font-size: .6rem;
}
.sv-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-chip {
  padding: .38rem .85rem;
  border-radius: 50px;
  background: var(--sv-soft);
  border: 1px solid color-mix(in srgb, var(--sv) 20%, transparent);
  color: color-mix(in srgb, var(--sv) 85%, #0F172A);
  font-size: .8rem; font-weight: 600;
  transition: background .25s, color .25s, transform .25s;
}
.sv-chip:hover { background: var(--sv); color: #fff; transform: translateY(-2px); }
.sv-chip--logo {
  display: inline-flex; align-items: center; gap: .45rem;
  padding-left: .5rem;
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.sv-chip--logo img {
  width: 16px; height: 16px; object-fit: contain; flex-shrink: 0;
}
.sv-chip--logo:hover {
  background: #fff;
  color: var(--text);
  border-color: var(--sv);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sv) 55%, transparent);
}
.sv-for {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
  font-size: .9rem; line-height: 1.6;
}
.sv-for strong { color: var(--text); }

.sv-box--accent {
  background: linear-gradient(160deg, var(--sv-soft), #fff 70%);
  border-color: color-mix(in srgb, var(--sv) 30%, var(--border));
}
.sv-sla {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px dashed color-mix(in srgb, var(--sv) 30%, var(--border));
}
.sv-sla strong {  font-size: 2.2rem; font-weight: 800; color: var(--sv); line-height: 1; }
.sv-sla span   { font-size: .85rem; max-width: 22ch; }

.sv-pole-cta {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.5rem;
}
.sv-pole-cta p { margin: 0; font-weight: 600; color: var(--text); }
.sv-btn-pole { background: var(--sv); color: #fff; }
.sv-btn-pole:hover {
  color: #fff;
  background: color-mix(in srgb, var(--sv) 82%, #000);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--sv) 60%, transparent);
}

/* ============================================================
   BANDEAU TECHNOLOGIES
============================================================ */
.sv-techs {
  padding: 70px 0;
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sv-techs-title {
  text-align: center;
  font-size: 1.25rem; font-weight: 700;
  color: var(--text);
  margin-bottom: 2rem;
}
.sv-marquee {
  overflow: hidden;
  padding: .4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sv-marquee + .sv-marquee { margin-top: .75rem; }
.sv-marquee-track {
  display: flex;
  width: max-content;
  animation: sv-marquee var(--dur, 90s) linear infinite;
}
.sv-marquee--rev .sv-marquee-track { animation-direction: reverse; }
.sv-marquee:hover .sv-marquee-track { animation-play-state: paused; }
@keyframes sv-marquee { to { transform: translateX(-50%); } }
.sv-tech {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .65rem;
  margin-right: .9rem;
  padding: .75rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: .92rem; font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.sv-tech img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

/* Répartition de la stack par domaine, au-dessus du bandeau */
.sv-techs-cats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: -1rem auto 2rem;
}
.sv-techs-cats span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .85rem;
  border-radius: 50px;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: color-mix(in srgb, var(--c) 80%, #0F172A);
  font-size: .8rem; font-weight: 600;
}
.sv-techs-cats i { color: var(--c); font-size: .75rem; }
.sv-techs-cats b {
  padding: 0 .45rem;
  border-radius: 50px;
  background: #fff;
  font-size: .72rem;
}

/* ============================================================
   MÉTHODE
============================================================ */
.sv-method { padding: 100px 0; background: var(--bg); }
.sv-process-wrap { position: relative; }
.sv-process {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}
.sv-process-wrap::before,
.sv-process-line {
  content: '';
  position: absolute;
  top: 34px; left: 8%; right: 8%;
  height: 2px;
  background: var(--border);
}
.sv-process-line {
  background: linear-gradient(90deg, var(--blue), var(--accent), var(--accent2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s cubic-bezier(.4,0,.2,1) .2s;
}
.sv-process-wrap.visible .sv-process-line { transform: scaleX(1); }

.sv-step { text-align: center; }
.sv-step-dot {
  position: relative;
  width: 68px; height: 68px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--blue);
  font-size: 1.2rem;
  box-shadow: 0 0 0 6px var(--bg);
  transition: background .4s, color .4s, border-color .4s;
  transition-delay: calc(var(--d) * .28s + .2s);
}
.sv-step-dot b {
  position: absolute; top: -4px; right: -4px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--text); color: #fff;
  font-size: .72rem;
}
.sv-process-wrap.visible .sv-step-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.sv-step h3 { font-size: 1rem; color: var(--text); margin-bottom: .45rem; }
.sv-step p  { font-size: .85rem; line-height: 1.55; }
.sv-step-out {
  display: inline-block;
  margin-top: .75rem;
  padding: .22rem .7rem;
  border-radius: 50px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: .74rem; font-weight: 700;
}

/* ============================================================
   MODES DE COLLABORATION
============================================================ */
.sv-models-section { padding: 100px 0; background: #fff; }
.sv-models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.sv-model {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2.25rem 2rem 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.sv-model:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sv-model-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  background: var(--blue-light); color: var(--blue);
  font-size: 1.25rem;
}
.sv-model h3 { font-size: 1.25rem; color: var(--text); margin-bottom: .5rem; }
.sv-model-desc { font-size: .93rem; line-height: 1.6; margin-bottom: 1.25rem; }
.sv-model ul { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.sv-model li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--text); }
.sv-model li i { color: var(--success); margin-top: .3rem; font-size: .75rem; }
.sv-model-ideal {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
  font-size: .85rem; line-height: 1.55;
}
.sv-model--featured {
  border: none;
  color: #fff;
  background: linear-gradient(160deg, var(--sv-navy-2) 0%, #0047CC 100%);
  box-shadow: 0 30px 60px -24px rgba(0,71,204,.6);
}
.sv-model--featured h3,
.sv-model--featured li { color: #fff; }
.sv-model--featured .sv-model-desc,
.sv-model--featured .sv-model-ideal { color: rgba(226,232,255,.78); }
.sv-model--featured .sv-model-ideal { border-color: rgba(255,255,255,.2); }
.sv-model--featured .sv-model-icon { background: rgba(255,255,255,.14); color: var(--accent); }
.sv-model--featured li i { color: var(--accent); }
.sv-model-tag {
  position: absolute; top: -13px; left: 2rem;
  padding: .3rem .9rem;
  border-radius: 50px;
  background: var(--accent);
  color: #04243A;
  font-size: .75rem; font-weight: 700;
}

/* ============================================================
   ENGAGEMENTS QUALITÉ
============================================================ */
.sv-guarantees {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  background:
          radial-gradient(800px 400px at 90% 0%, rgba(0,194,255,.14), transparent 60%),
          linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 100%);
}
.sv-guarantees .container { position: relative; }
.sv-g-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.sv-g {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .35s, border-color .35s, transform .35s;
}
.sv-g:hover { background: rgba(255,255,255,.08); border-color: rgba(0,194,255,.45); transform: translateY(-4px); }
.sv-g-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  background: rgba(0,194,255,.12); color: var(--accent);
  font-size: 1.15rem;
}
.sv-g h3 { color: #fff; font-size: 1.05rem; margin-bottom: .45rem; }
.sv-g p  { color: rgba(226,232,255,.7); font-size: .9rem; line-height: 1.6; }

/* FAQ : petits ajustements */
.sv-page .faq-q:focus-visible { outline-offset: -3px; }
.sv-page .faq-a p { margin: 0; line-height: 1.7; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .sv-hero-inner { grid-template-columns: 1fr; gap: 4rem; }
  .sv-hero h1 { max-width: 22ch; }
  .sv-hero-visual { max-width: 640px; }
  .sv-code { transform: none; }
  .sv-process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .sv-process-wrap::before, .sv-process-line { display: none; }
  .sv-process-wrap .sv-step-dot { transition-delay: 0s; }
}

@media (max-width: 1024px) {
  .sv-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-pole-grid,
  .sv-pole--reverse .sv-pole-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sv-pole--reverse .sv-pole-visual { order: 0; }
  .sv-pole-visual { position: relative; top: auto; max-width: 620px; width: 100%; margin: 0 auto; }
  .sv-models { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .sv-g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sv-hero { padding: 80px 0 70px; }
  .sv-hero-ctas .btn { width: 100%; justify-content: center; }
  .sv-hero-facts { flex-direction: column; gap: .6rem; }
  .sv-code-body { font-size: .74rem; padding: 1rem; }
  .sv-code-line::before { width: 1.1rem; margin-right: .7rem; }
  .sv-float { display: none; }

  .sv-overview { padding: 70px 0 60px; }
  .sv-overview-grid { grid-template-columns: 1fr; }

  .sv-pole { padding: 75px 0 70px; }
  .sv-pole-head { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
  .sv-pole-icon { width: 60px; height: 60px; border-radius: 18px; font-size: 1.4rem; }
  .sv-offres { grid-template-columns: 1fr; }
  .sv-pole-foot { grid-template-columns: 1fr; }
  .sv-box { padding: 1.4rem; }

  .sv-kpis { grid-template-columns: 1fr 1fr; }
  .sv-kpis .sv-kpi:last-child { display: none; }
  .sv-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .sv-roadmap { grid-template-columns: 1fr 1fr; }
  .sv-toast { display: none; }
  .sv-phone { width: 236px; height: 470px; }

  .sv-method, .sv-models-section, .sv-guarantees { padding: 70px 0; }
  .sv-process { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .sv-step { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 1.1rem; text-align: left; }
  .sv-step-dot { grid-row: span 3; margin: 0; }
  .sv-step-out { justify-self: start; }
  .sv-g-grid { grid-template-columns: 1fr; }
  .sv-tech { padding: .6rem 1rem; font-size: .85rem; }
  .sv-tech img { width: 20px; height: 20px; }
  .sv-techs-cats { margin-top: -.5rem; }
}

/* ============================================================
   MOUVEMENT RÉDUIT : tout est affiché immédiatement
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sv-page *,
  .sv-page *::before,
  .sv-page *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .sv-code { transform: none; }
  .sv-marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; row-gap: .75rem; }
  .sv-marquee-track [aria-hidden="true"] { display: none; }
}


/* ============================================================
   À COLLER À LA FIN DE assets/css/style.css
   (APRÈS le bloc « PAGE SERVICES », dont il réutilise
    plusieurs éléments .sv- : fond du hero, bandeau
    technologies, méthode, titres de section)
   ------------------------------------------------------------
   PAGE D'ACCUEIL — refonte
   Préfixe .hm- : aucun conflit avec les styles existants.
   Les titres gardent la police de base du site (pas de
   font-family imposée), comme sur la page Services.
============================================================ */

/* ============================================================
   HERO
============================================================ */
.hm-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 110px;
  color: #fff;
  background:
          radial-gradient(1100px 560px at 85% -10%, rgba(0,194,255,.20), transparent 60%),
          radial-gradient(900px 520px at -10% 110%, rgba(124,58,237,.24), transparent 60%),
          linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 55%, #0B2A8A 100%);
}
.hm-hero .container { position: relative; z-index: 1; max-width: 1520px; }
.hm-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 3.5rem;
  align-items: center;
}

.hm-hero h1 {
  font-size: clamp(2.1rem, 4.3vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 1.3rem 0 1.25rem;
  max-width: 20ch;
}
.hm-hero-lead {
  color: rgba(226,232,255,.8);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 54ch;
  margin-bottom: 2rem;
}
.hm-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hm-hero-stats {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hm-hero-stats dd { margin: 0; }
.hm-hero-stats strong {
  display: block;
  font-size: 2rem; font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.hm-hero-stats span { font-size: .85rem; color: rgba(226,232,255,.65); }

/* ---- Entrée orchestrée du hero (déclenchée par JS après l'écran de transition) ---- */
.hm-rise { opacity: 0; transform: translateY(22px); }
.hm-hero.is-ready .hm-rise {
  animation: hm-rise .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--d, 0) * .12s);
}
@keyframes hm-rise { to { opacity: 1; transform: none; } }

/* ---- Carte produit MbeSchool ---- */
.hm-hero-visual { position: relative; }
.hm-hero-visual::before {
  content: '';
  position: absolute; inset: 8% 4%;
  background: radial-gradient(ellipse, rgba(0,102,255,.55), rgba(0,194,255,.18) 55%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
}
.hm-product {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--text);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.hm-product:hover { transform: perspective(1600px) rotateY(0) rotateX(0) translateY(-4px); }

.hm-product-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .75rem 1.1rem;
  background: #F1F5FD;
  border-bottom: 1px solid var(--border);
}
.hm-product-bar > span:not(.hm-product-pill) { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hm-product-bar > span:nth-child(1) { background: #FF5F57; }
.hm-product-bar > span:nth-child(2) { background: #FEBC2E; }
.hm-product-bar > span:nth-child(3) { background: #28C840; }
.hm-product-url {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .45rem;
  margin-left: .6rem;
  padding: .22rem .85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: .75rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-product-url i { color: #16A34A; font-size: .65rem; }
.hm-product-url:hover { color: var(--blue); }
.hm-product-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 50px;
  background: var(--blue-light); color: var(--blue);
  font-size: .72rem; font-weight: 700;
}
.hm-product-media { display: block; background: #fff; }
.hm-product-media img { width: 100%; height: auto; display: block; }

.hm-product-foot { display: grid; gap: 1rem; padding: 1.25rem 1.5rem 1.4rem; border-top: 1px solid var(--border); }
.hm-product-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hm-product-title strong { display: block; font-size: 1.1rem; color: var(--text); }
.hm-product-title span   { font-size: .88rem; line-height: 1.5; }
.hm-product-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.hm-product-tags li {
  padding: .2rem .7rem;
  border-radius: 50px;
  background: var(--bg2);
  color: var(--text-muted);
  font-size: .74rem; font-weight: 600;
}
.hm-float { top: -24px; left: -26px; right: auto; bottom: auto; z-index: 2; }

/* ============================================================
   CARROUSEL DE SERVICES DU HERO (.hm-svcshow)
   ------------------------------------------------------------
   Remplace l'ancienne capture d'écran unique dans la carte
   « navigateur » du hero. Une diapositive par domaine de service :
   icône flottante, libellé de catégorie, titre, brève description
   et lien vers la page Services. Fondu-glissé avec léger décalage
   de profondeur, reflet lumineux à l'activation, barre de
   progression d'autoplay et puces de navigation. Piloté par le
   script en bas de pages/index.php (section « 3. Carrousel… »).
   Fonctionne sans JavaScript : la première diapositive reste
   affichée et chaque lien demeure cliquable.
============================================================ */
.hm-svcshow-badge { font-variant-numeric: tabular-nums; }

.hm-svcshow-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 100%);
}
.hm-svcshow-track { position: relative; width: 100%; height: 100%; }

.hm-svcshow-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  padding: 2.3rem 2.5rem;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px) scale(.97);
  transition:
          opacity .8s cubic-bezier(.22,.9,.26,1),
          transform .8s cubic-bezier(.22,.9,.26,1),
          visibility 0s linear .8s;
  /* Teinte de secours si color-mix() n'est pas pris en charge */
  background: linear-gradient(160deg, rgba(255,255,255,.08), transparent 60%);
  background:
          radial-gradient(640px 420px at 16% 10%, color-mix(in srgb, var(--c) 55%, transparent), transparent 60%),
          radial-gradient(520px 420px at 100% 100%, color-mix(in srgb, var(--c) 32%, transparent), transparent 65%);
}

/* ---- Variante avec image PNG de fond (--img posé en ligne par le PHP) ----
   Un voile dégradé (même logique que .hm-hero-voile) garde le texte lisible
   par-dessus la photo, plus sombre à gauche — sous le texte — que sous la
   zone image à droite. Sans --img, la diapositive garde le dégradé coloré
   simple ci-dessus : l'image PNG est entièrement optionnelle. */
.hm-svcshow-slide.has-img {
  background-image:
          linear-gradient(100deg, rgba(6,15,38,.86) 0%, rgba(6,15,38,.35) 55%, rgba(6,15,38,.62) 100%),
          var(--img);
  background-size: auto, cover;
  background-position: 0 0, center;
  background-repeat: no-repeat, no-repeat;
  background-image:
          radial-gradient(520px 380px at 12% 8%, color-mix(in srgb, var(--c) 55%, transparent), transparent 55%),
          linear-gradient(100deg, rgba(6,15,38,.86) 0%, rgba(6,15,38,.35) 55%, rgba(6,15,38,.62) 100%),
          var(--img);
  background-size: auto, auto, cover;
  background-position: 12% 8%, 0 0, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.hm-svcshow-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .8s cubic-bezier(.22,.9,.26,1), transform .8s cubic-bezier(.22,.9,.26,1);
}

/* ---- Reflet lumineux qui balaie la diapositive à son activation ---- */
.hm-svcshow-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.16) 35%, transparent 50%);
  transform: translateX(-120%);
  pointer-events: none;
}
.hm-svcshow-slide.is-active::before { animation: hm-sheen 1.1s ease .2s 1; }
@keyframes hm-sheen { to { transform: translateX(120%); } }

/* ---- Icône, catégorie, titre, texte, lien : révélés en cascade ---- */
.hm-svcshow-ic,
.hm-svcshow-cat,
.hm-svcshow-slide h3,
.hm-svcshow-slide p,
.hm-svcshow-link {
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.hm-svcshow-slide.is-active .hm-svcshow-ic  { transition-delay: .12s; }
.hm-svcshow-slide.is-active .hm-svcshow-cat { transition-delay: .18s; }
.hm-svcshow-slide.is-active h3              { transition-delay: .26s; }
.hm-svcshow-slide.is-active p               { transition-delay: .34s; }
.hm-svcshow-slide.is-active .hm-svcshow-link{ transition-delay: .42s; }
.hm-svcshow-slide.is-active .hm-svcshow-ic,
.hm-svcshow-slide.is-active .hm-svcshow-cat,
.hm-svcshow-slide.is-active h3,
.hm-svcshow-slide.is-active p,
.hm-svcshow-slide.is-active .hm-svcshow-link { opacity: 1; transform: none; }

.hm-svcshow-ic {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  font-size: 1.4rem;
  background: var(--c);
  background: color-mix(in srgb, var(--c) 85%, #fff 15%);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,.55);
  box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--c) 65%, transparent), inset 0 0 0 1px rgba(255,255,255,.25);
}
/* La petite animation de flottement démarre une fois la diapositive installée */
.hm-svcshow-slide.is-active .hm-svcshow-ic { animation: hm-ic-float 4.5s ease-in-out .9s infinite; }
@keyframes hm-ic-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.hm-svcshow-cat {
  display: inline-flex;
  padding: .25rem .65rem;
  border-radius: 50px;
  background: rgba(255,255,255,.12);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
.hm-svcshow-slide h3 {
  margin: 0;
  max-width: 18ch;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.hm-svcshow-slide p {
  margin: 0;
  max-width: 30ch;
  font-size: .94rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}
.hm-svcshow-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .15rem;
  font-size: .85rem; font-weight: 700;
  color: #fff;
}
.hm-svcshow-link i { font-size: .76rem; transition: transform .3s ease; }
.hm-svcshow-slide:hover .hm-svcshow-link i,
.hm-svcshow-slide:focus-visible .hm-svcshow-link i { transform: translateX(5px); }
.hm-svcshow-slide:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---- Barre de progression de l'autoplay ---- */
.hm-svcshow-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.14);
  z-index: 2;
}
.hm-svcshow-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #fff);
  border-radius: 0 3px 3px 0;
}
.hm-svcshow-progress span.is-animating { animation: hm-progress var(--dur, 5.2s) linear forwards; }
@keyframes hm-progress { from { width: 0%; } to { width: 100%; } }
.hm-svcshow-stage.is-paused .hm-svcshow-progress span { animation-play-state: paused; }

/* ---- Puces de navigation ---- */
.hm-svcshow-nav {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: .45rem;
}
.hm-svcshow-dot {
  width: 9px; height: 9px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: width .35s ease, background .35s ease, transform .2s ease;
}
.hm-svcshow-dot:hover { background: rgba(255,255,255,.65); transform: scale(1.15); }
.hm-svcshow-dot.is-active { width: 24px; border-radius: 5px; background: var(--c, #fff); }
.hm-svcshow-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   APPROCHE TECHNIQUE (au-dessus du bandeau défilant)
============================================================ */
.hm-approach { max-width: 720px; margin: 0 auto 2.25rem; text-align: center; }
.hm-approach .sv-techs-title { margin-bottom: .9rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.hm-approach p { font-size: 1.02rem; line-height: 1.75; margin-bottom: 1rem; }

/* ============================================================
   SERVICES
============================================================ */
.hm-services { padding: 100px 0; background: #fff; }
.hm-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.hm-svc {
  --c: var(--blue);
  --c-soft: color-mix(in srgb, var(--c) 11%, #fff);
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: 2rem;
  background: #fff;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
/* Halo qui suit le pointeur */
.hm-svc::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%),
  color-mix(in srgb, var(--c) 13%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
}
/* Filet de couleur en haut, qui s'étend au survol */
.hm-svc::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #00C2FF));
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.hm-svc:hover {
  color: inherit;
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 28px 54px -22px color-mix(in srgb, var(--c) 50%, transparent);
}
.hm-svc:hover::before { opacity: 1; }
.hm-svc:hover::after  { transform: scaleX(1); }

.hm-svc-watermark {
  position: absolute;
  right: -18px; bottom: -26px;
  z-index: -1;
  font-size: 8rem;
  color: color-mix(in srgb, var(--c) 6%, transparent);
  transform: rotate(-10deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
.hm-svc:hover .hm-svc-watermark { transform: rotate(-2deg) scale(1.08); color: color-mix(in srgb, var(--c) 10%, transparent); }

.hm-svc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.4rem;
}
.hm-svc-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c);
  font-size: 1.35rem;
  transition: background .3s, color .3s, transform .4s cubic-bezier(.2,.8,.2,1);
}
.hm-svc:hover .hm-svc-icon { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.05); }
.hm-svc-cat {
  padding: .25rem .8rem;
  border-radius: 50px;
  background: var(--c-soft);
  color: color-mix(in srgb, var(--c) 85%, #0F172A);
  font-size: .78rem; font-weight: 700;
}
.hm-svc h3 { font-size: 1.2rem; line-height: 1.3; color: var(--text); margin-bottom: .55rem; }
.hm-svc p  { font-size: .93rem; line-height: 1.65; flex: 1; }

.hm-svc-stack {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px dashed var(--border);
}
.hm-svc-stack li {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: transform .3s ease, border-color .3s ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}
.hm-svc-stack img { width: 20px; height: 20px; object-fit: contain; }
.hm-svc:hover .hm-svc-stack li { border-color: color-mix(in srgb, var(--c) 35%, var(--border)); transform: translateY(-2px); }

.hm-svc-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.2rem;
  color: var(--c);
  font-size: .9rem; font-weight: 700;
}
.hm-svc-link i { font-size: .75rem; transition: transform var(--transition); }
.hm-svc:hover .hm-svc-link i { transform: translateX(4px); }

.hm-more { text-align: center; margin-top: 2.75rem; }

/* ============================================================
   CE QUI NOUS DIFFÉRENCIE + CHIFFRES
============================================================ */
.hm-why {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  background:
          radial-gradient(800px 420px at 95% 0%, rgba(0,194,255,.14), transparent 60%),
          radial-gradient(700px 400px at 0% 100%, rgba(124,58,237,.16), transparent 60%),
          linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 100%);
}
.hm-why-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 4rem;
  align-items: center;
}
.hm-why-inner.is-full { grid-template-columns: 1fr; max-width: 820px; }
.hm-kicker-dark { color: var(--accent); }
.hm-why h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1rem;
  max-width: 22ch;
}
.hm-why-lead { color: rgba(226,232,255,.75); font-size: 1.04rem; line-height: 1.75; max-width: 58ch; }

.hm-diffs { display: grid; gap: .9rem; margin-top: 2rem; }
.hm-diff {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .35s, border-color .35s, transform .35s;
}
.hm-diff:hover { background: rgba(255,255,255,.08); border-color: rgba(0,194,255,.45); transform: translateX(4px); }
.hm-diff > i {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,194,255,.12); color: var(--accent);
  font-size: 1rem;
}
.hm-diff strong { display: block; color: #fff; font-size: 1rem; line-height: 1.35; margin-bottom: .2rem; }
.hm-diff span   { display: block; color: rgba(226,232,255,.7); font-size: .9rem; line-height: 1.55; }

.hm-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.hm-stat {
  padding: 1.9rem 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
}
.hm-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hm-stat > i { display: block; margin-bottom: 1.1rem; color: var(--accent); font-size: 1.15rem; }
.hm-stat-val {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.hm-stat-label { margin-top: .55rem; font-size: .9rem; color: rgba(226,232,255,.7); }

/* ============================================================
   MÉTHODE : 5 étapes au lieu de 6 (grand écran)
============================================================ */
@media (min-width: 1101px) {
  .hm-process-5 .sv-process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem; }
  .hm-process-5 .sv-process-wrap::before,
  .hm-process-5 .sv-process-line { left: 10%; right: 10%; }
}

/* ============================================================
   TÉMOIGNAGES
============================================================ */
.hm-testis { padding: 100px 0; background: var(--bg2); }
.hm-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.hm-testi {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.hm-testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hm-testi::before {
  content: '\201C';
  position: absolute; top: .4rem; right: 1.4rem;
  font-family: Georgia, serif;
  font-size: 5.5rem; line-height: 1;
  color: var(--blue-light);
  pointer-events: none;
}
.hm-testi-stars { display: flex; gap: .2rem; margin-bottom: 1.1rem; color: #F59E0B; font-size: .9rem; }
.hm-testi blockquote { flex: 1; margin: 0 0 1.5rem; }
.hm-testi blockquote p { color: var(--text); font-size: .98rem; line-height: 1.75; }
.hm-testi figcaption {
  display: flex; align-items: center; gap: .9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.hm-testi-avatar {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff; font-weight: 800;
}
.hm-testi figcaption strong { display: block; color: var(--text); font-size: .95rem; }
.hm-testi figcaption small  { color: var(--text-muted); font-size: .82rem; }

/* Premier témoignage mis en avant */
.hm-testi--featured {
  border: none;
  background: linear-gradient(160deg, var(--sv-navy-2) 0%, #0047CC 100%);
  box-shadow: 0 30px 60px -26px rgba(0,71,204,.6);
}
.hm-testi--featured::before { color: rgba(255,255,255,.12); }
.hm-testi--featured blockquote p { color: #fff; }
.hm-testi--featured figcaption { border-color: rgba(255,255,255,.18); }
.hm-testi--featured figcaption strong { color: #fff; }
.hm-testi--featured figcaption small  { color: rgba(226,232,255,.72); }
.hm-testi--featured .hm-testi-avatar { background: #fff; color: var(--blue); }

/* ============================================================
   CTA FINAL
============================================================ */
.hm-cta-section { padding: 100px 0; background: #fff; }
.hm-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem;
  align-items: center;
  padding: 3.5rem;
  border-radius: 28px;
  color: #fff;
  background:
          radial-gradient(600px 300px at 100% 0%, rgba(0,194,255,.25), transparent 60%),
          linear-gradient(140deg, var(--sv-navy) 0%, #0B2A8A 60%, var(--blue) 100%);
  box-shadow: 0 40px 80px -30px rgba(0,40,140,.55);
}
.hm-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
          linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 50%, #000 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 20% 50%, #000 10%, transparent 65%);
  pointer-events: none;
}
.hm-cta > * { position: relative; }
.hm-cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1rem;
}
.hm-cta-text p { color: rgba(226,232,255,.8); font-size: 1.04rem; line-height: 1.7; max-width: 50ch; }

.hm-cta-actions { display: grid; gap: .8rem; }
.hm-cta-action {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  transition: background .3s, transform .3s, border-color .3s;
}
.hm-cta-action:hover { color: #fff; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); transform: translateX(4px); }
.hm-cta-action strong { display: block; font-size: .98rem; line-height: 1.3; }
.hm-cta-action small  { display: block; font-size: .82rem; color: rgba(226,232,255,.72); line-height: 1.45; }
.hm-cta-ic {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: var(--accent);
}
.hm-cta-arrow { margin-left: auto; font-size: .8rem; opacity: .7; transition: transform .3s; }
.hm-cta-action:hover .hm-cta-arrow { transform: translateX(4px); opacity: 1; }

.hm-cta-action--main { background: #fff; border-color: #fff; color: var(--text); }
.hm-cta-action--main:hover { background: var(--blue-light); border-color: var(--blue-light); color: var(--text); }
.hm-cta-action--main small { color: var(--text-muted); }
.hm-cta-action--main .hm-cta-ic { background: var(--blue); color: #fff; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .hm-hero-inner { grid-template-columns: 1fr; gap: 4rem; }
  .hm-hero h1 { max-width: 24ch; }
  .hm-hero-visual { max-width: 920px; width: 100%; }
  .hm-product, .hm-product:hover { transform: none; }
}
@media (max-width: 1024px) {
  .hm-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-why-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hm-testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cta { grid-template-columns: 1fr; gap: 2.25rem; padding: 2.75rem 2.25rem; }
}
@media (max-width: 640px) {
  .hm-hero { padding: 80px 0 80px; }
  .hm-hero-ctas .btn { width: 100%; justify-content: center; }
  .hm-hero-stats { gap: 1rem 1.75rem; }
  .hm-hero-stats strong { font-size: 1.6rem; }
  .hm-product-foot { padding: 1.1rem 1.1rem 1.2rem; }
  .hm-product-head .btn { width: 100%; justify-content: center; }
  .hm-product-pill { display: none; } /* cache aussi .hm-svcshow-badge, qui porte cette classe */

  .hm-svcshow-stage { aspect-ratio: 3 / 4; }
  .hm-svcshow-slide { padding: 1.8rem 1.6rem 2.6rem; }
  .hm-svcshow-slide h3 { font-size: 1.25rem; max-width: 16ch; }
  .hm-svcshow-slide p { font-size: .9rem; max-width: 26ch; }
  .hm-svcshow-ic { width: 48px; height: 48px; font-size: 1.2rem; }

  .hm-services, .hm-why, .hm-testis, .hm-cta-section { padding: 70px 0; }
  .hm-svc-grid, .hm-testi-grid { grid-template-columns: 1fr; }
  .hm-svc { padding: 1.6rem; }
  .hm-stat { padding: 1.4rem 1.2rem; }
  .hm-cta { padding: 2.25rem 1.25rem; border-radius: 20px; }
  .hm-cta-action { padding: .9rem 1rem; }
}

/* ============================================================
   MOUVEMENT RÉDUIT
   (le bloc .sv-page de la page Services couvre déjà les
    animations ; on s'assure ici que le hero reste visible)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hm-rise { opacity: 1; transform: none; }
  .hm-product, .hm-product:hover { transform: none; }

  /* Le carrousel reste utilisable (puces, liens) mais ne défile plus seul
     et ne glisse plus : la diapositive active apparaît directement. */
  .hm-svcshow-slide { transition: none; }
  .hm-svcshow-slide:not(.is-active) { display: none; }
  .hm-svcshow-slide.is-active { transform: none; }
  .hm-svcshow-slide::before { display: none; }
  .hm-svcshow-ic,
  .hm-svcshow-cat,
  .hm-svcshow-slide h3,
  .hm-svcshow-slide p,
  .hm-svcshow-link { opacity: 1; transform: none; transition: none; animation: none; }
  .hm-svcshow-progress span { display: none; }
  .hm-svcshow-dot { transition: none; }
}


/* ============================================================
   À COLLER À LA FIN DE assets/css/style.css
   (APRÈS les blocs « PAGE SERVICES » et « PAGE D'ACCUEIL »,
    dont cette page réutilise les éléments .sv- et .hm- :
    fond et entrée du hero, titres, arguments sombres, CTA)
   ------------------------------------------------------------
   PAGE À PROPOS — refonte
   Préfixe .ap- : aucun conflit avec les styles existants.
   Les anciens blocs .ab- et .mv- ne sont plus utilisés par
   cette page ; vous pouvez les supprimer si aucune autre
   page ne s'en sert.
============================================================ */

/* ============================================================
   HERO (fond et animation : .hm-hero)
============================================================ */
.ap-hero .hm-hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.ap-hero h1 { max-width: 21ch; }

/* ---- Fiche « Mbezora en bref » ---- */
.ap-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.ap-card::before {
  content: '';
  position: absolute; top: -90px; right: -90px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,255,.35), transparent 70%);
  pointer-events: none;
}
.ap-card > * { position: relative; }
.ap-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.2rem; margin-bottom: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ap-card-head strong { color: #fff; font-size: 1.1rem; }
.ap-since {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem;
  border-radius: 50px;
  background: rgba(0,194,255,.15);
  color: var(--accent);
  font-size: .78rem; font-weight: 700;
  white-space: nowrap;
}
.ap-facts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.1);
}
.ap-facts > div:last-child { border-bottom: none; }
.ap-facts dt {
  display: flex; align-items: center; gap: .6rem;
  color: rgba(226,232,255,.62);
  font-size: .86rem;
}
.ap-facts dt i { width: 16px; text-align: center; color: var(--accent); }
.ap-facts dd { margin: 0; color: #fff; font-size: .93rem; font-weight: 600; line-height: 1.45; }
.ap-facts dd small { display: block; margin-top: .15rem; color: rgba(226,232,255,.6); font-size: .8rem; font-weight: 400; }
.ap-card-quote {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .98rem; font-weight: 600; line-height: 1.55;
}

/* ============================================================
   HISTOIRE & MISSION
============================================================ */
.ap-story-section { padding: 100px 0; background: #fff; }
.ap-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 4.5rem;
  align-items: center;
}
.ap-story-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 1.4rem;
  max-width: 24ch;
}
.ap-lead {
  font-size: 1.1rem; line-height: 1.75;
  color: var(--text);
  padding-left: 1.1rem;
  border-left: 4px solid var(--blue);
  margin-bottom: 1.1rem;
}
.ap-story-text > p { max-width: 62ch; margin-bottom: 1rem; line-height: 1.75; }

.ap-approach { display: grid; gap: 1.05rem; margin: 2rem 0 2.25rem; }
.ap-approach li { display: flex; align-items: flex-start; gap: 1rem; }
.ap-approach-ic {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--blue);
}
.ap-approach strong { display: block; color: var(--text); font-size: .98rem; line-height: 1.4; }
.ap-approach li span:not(.ap-approach-ic) { display: block; font-size: .9rem; line-height: 1.55; color: var(--text-muted); }
.ap-actions { display: flex; gap: .85rem; flex-wrap: wrap; }

/* ---- Carte mission ---- */
.ap-mission {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 2.25rem 2.25rem;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-dark) 60%, #0B2A8A 100%);
  box-shadow: 0 34px 70px -30px rgba(0,71,204,.65);
}
.ap-mission::before {
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,255,.38), transparent 70%);
  pointer-events: none;
}
.ap-mission > * { position: relative; }
.ap-mission-label {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.78);
  font-size: .9rem; font-weight: 700;
}
.ap-mission-text {
  margin: .7rem 0 1.75rem;
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
}
.ap-steps {
  position: relative;
  display: grid; gap: 1.15rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.ap-steps::before {
  content: '';
  position: absolute;
  left: 16px; top: calc(1.5rem + 17px); bottom: 17px;
  width: 2px;
  background: rgba(255,255,255,.28);
}
.ap-steps li { position: relative; display: flex; align-items: flex-start; gap: 1rem; }
.ap-step-num {
  position: relative; z-index: 1;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--blue);
  font-size: .9rem; font-weight: 800;
}
.ap-steps strong { display: block; color: #fff; font-size: 1rem; line-height: 1.35; }
.ap-steps li span:not(.ap-step-num) { display: block; color: rgba(255,255,255,.8); font-size: .88rem; line-height: 1.5; }

.ap-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.ap-profile {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .3s, transform .3s;
}
.ap-profile:hover { border-color: var(--blue); transform: translateY(-2px); }
.ap-profile i { width: 20px; text-align: center; color: var(--blue); flex-shrink: 0; }
.ap-profile span { color: var(--text); font-size: .87rem; font-weight: 600; line-height: 1.3; }

/* ============================================================
   CE QUE NOUS APPORTONS
============================================================ */
.ap-levers-section { padding: 100px 0; background: var(--bg); }
.ap-levers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.ap-lever {
  --c: var(--blue);
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem 2.1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.ap-lever::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #00C2FF));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ap-lever:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 28px 54px -24px color-mix(in srgb, var(--c) 55%, transparent);
}
.ap-lever:hover::after { transform: scaleX(1); }
.ap-lever-icon {
  width: 64px; height: 64px;
  margin-bottom: 1.5rem;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 55%, #00C2FF));
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.ap-lever:hover .ap-lever-icon { transform: rotate(-6deg) scale(1.05); }
.ap-lever h3 { font-size: 1.3rem; color: var(--text); margin-bottom: .55rem; }
.ap-lever p  { font-size: .95rem; line-height: 1.65; }

/* ============================================================
   VISION (fond sombre ; points : .hm-diff)
============================================================ */
.ap-vision {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  background:
          radial-gradient(800px 420px at 95% 0%, rgba(0,194,255,.14), transparent 60%),
          radial-gradient(700px 400px at 0% 100%, rgba(124,58,237,.16), transparent 60%),
          linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 100%);
}
.ap-vision-watermark {
  position: absolute;
  right: -70px; bottom: -90px;
  font-size: 24rem; line-height: 1;
  color: rgba(255,255,255,.035);
  pointer-events: none;
}
.ap-vision .container { position: relative; }
.ap-vision-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}
.ap-vision h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1rem;
  max-width: 20ch;
}
.ap-vision-inner > div > p { color: rgba(226,232,255,.78); font-size: 1.05rem; line-height: 1.75; max-width: 52ch; }
.ap-vision-points { margin-top: 0; }

/* ============================================================
   VALEURS
============================================================ */
.ap-values-section { padding: 100px 0; background: #fff; }
.ap-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.ap-value {
  --v: var(--blue);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.ap-value:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--v) 40%, var(--border));
  box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--v) 45%, transparent);
}
.ap-value-head {
  padding: 1.75rem 1.6rem 1.5rem;
  background: linear-gradient(155deg, color-mix(in srgb, var(--v) 13%, #fff), #fff 80%);
  border-bottom: 1px solid color-mix(in srgb, var(--v) 18%, var(--border));
}
.ap-value-icon {
  width: 54px; height: 54px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--v); color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--v) 75%, transparent);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.ap-value:hover .ap-value-icon { transform: rotate(-6deg) scale(1.05); }
.ap-value h3 { font-size: 1.25rem; color: var(--text); margin-bottom: .35rem; }
.ap-value-head p { font-size: .92rem; line-height: 1.6; }
.ap-value ul { display: grid; gap: .6rem; padding: 1.25rem 1.6rem 1.6rem; }
.ap-value li { display: flex; align-items: flex-start; gap: .6rem; color: var(--text); font-size: .87rem; line-height: 1.45; }
.ap-value li i { margin-top: .3rem; color: var(--v); font-size: .72rem; flex-shrink: 0; }

/* ============================================================
   EXPERTISE
============================================================ */
.ap-skills-section { padding: 100px 0; background: var(--bg); }
.ap-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.ap-skill {
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ap-skill-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .7rem;
}
.ap-skill-top span   { color: var(--text); font-size: .93rem; font-weight: 600; }
.ap-skill-top strong { color: var(--blue); font-size: .95rem; font-weight: 800; }
.ap-skill-track { height: 8px; border-radius: 6px; background: #EEF2FA; overflow: hidden; }
.ap-skill-fill {
  display: block;
  height: 100%; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  transition: width 1.4s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--d, 0) * .08s + .2s);
}
.ap-skills.visible .ap-skill-fill { width: var(--p); }

/* ============================================================
   ÉQUIPE
============================================================ */
.ap-team-section { padding: 100px 0; background: var(--bg2); }
.ap-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.ap-member {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.ap-member::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 86px;
  background: linear-gradient(135deg, var(--blue-light), #E4ECFF);
}
.ap-member > * { position: relative; }
.ap-member:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ap-avatar {
  width: 108px; height: 108px;
  margin-bottom: 1.1rem;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--blue), var(--accent), var(--accent2), var(--blue));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ap-member:hover .ap-avatar { transform: scale(1.05); }
.ap-avatar-inner {
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
  font-size: 1.8rem; font-weight: 800;
}
.ap-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
.ap-member h3 { color: var(--text); font-size: 1.1rem; line-height: 1.3; }
.ap-poste { margin: .25rem 0 .8rem; color: var(--blue); font-size: .87rem; font-weight: 600; }
.ap-member p { font-size: .87rem; line-height: 1.6; }
.ap-socials { display: flex; justify-content: center; gap: .5rem; margin-top: auto; padding-top: 1.2rem; }
.ap-socials a {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--blue);
  transition: background .3s, color .3s, transform .3s;
}
.ap-socials a:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

.ap-join {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  max-width: 820px;
  margin: 3rem auto 0;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px dashed color-mix(in srgb, var(--blue) 40%, var(--border));
  border-radius: var(--radius-lg);
}
.ap-join strong { display: block; color: var(--text); font-size: 1.02rem; }
.ap-join span   { font-size: .9rem; color: var(--text-muted); }

/* ============================================================
   FAQ
============================================================ */
.ap-faq-section { padding: 100px 0; background: #fff; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .ap-hero .hm-hero-inner { grid-template-columns: 1fr; }
  .ap-card { max-width: 640px; }
  .ap-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ap-story { grid-template-columns: 1fr; gap: 3rem; }
  .ap-story-visual { max-width: 640px; }
  .ap-vision-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 900px) {
  .ap-levers { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .ap-skills { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ap-story-section, .ap-levers-section, .ap-vision, .ap-values-section,
  .ap-skills-section, .ap-team-section, .ap-faq-section { padding: 70px 0; }

  .ap-card { padding: 1.5rem 1.25rem; }
  .ap-facts > div { grid-template-columns: 1fr; gap: .3rem; }
  .ap-card-head { flex-wrap: wrap; }

  .ap-mission { padding: 2rem 1.4rem 1.6rem; }
  .ap-profiles { grid-template-columns: 1fr; }
  .ap-actions .btn { width: 100%; justify-content: center; }

  .ap-lever { padding: 1.75rem 1.5rem; }
  .ap-values { grid-template-columns: 1fr; }
  .ap-vision-watermark { font-size: 14rem; right: -50px; bottom: -50px; }

  .ap-join { flex-direction: column; align-items: stretch; text-align: center; }
  .ap-join .btn { justify-content: center; }
}

/* ============================================================
   À COLLER À LA FIN DE assets/css/main.css
   (APRÈS les blocs Services, Accueil et Header & Footer)
   ------------------------------------------------------------
   PAGE RÉALISATIONS — refonte
   Préfixe .rl- : aucun conflit avec les anciens styles
   (.projet-card-full, .projet-visual… ne sont plus utilisés
    par cette page).
============================================================ */

/* ============================================================
   HERO (fond et animation : .hm-hero)
============================================================ */
.rl-hero { padding: 90px 0 100px; }
.rl-hero-inner { max-width: 860px; }
.rl-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 1rem 0 1.25rem;
  max-width: 24ch;
}
.rl-breadcrumb {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .35rem .9rem;
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .84rem;
  color: rgba(226,232,255,.7);
}
.rl-breadcrumb a { color: #C9D8FF; }
.rl-breadcrumb a:hover { color: #fff; }
.rl-breadcrumb i { font-size: .55rem; opacity: .6; }

.rl-hero-stats {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 3rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.rl-hero-stats > div { display: flex; flex-direction: column-reverse; }
.rl-hero-stats dt { font-size: .86rem; color: rgba(226,232,255,.65); }
.rl-hero-stats dd { margin: 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: #fff; }

/* ============================================================
   VISUEL D'UN PROJET — image entière sur fond flouté
============================================================ */
.rl-media {
  --c: var(--blue);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--c) 18%, #0B1530);
  isolation: isolate;
}
.rl-media .mb-carousel { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; }
.rl-media .mb-carousel-track {
  position: absolute; inset: 0;
  height: auto;
  display: flex; flex-wrap: nowrap;
}
.rl-media .mb-carousel-slide.rl-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: auto;
  overflow: hidden;
}

/* Fond : la même image, agrandie et floutée, pour remplir le cadre */
.rl-media .rl-slide-bg {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  max-width: none;
  object-fit: cover;
  filter: blur(22px) saturate(1.25) brightness(.8);
  transform: scale(1.08);
}
/* Image principale : ENTIÈRE, jamais rognée ni déformée */
.rl-media .rl-slide-img {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  max-width: none;
  padding: 10px;
  object-fit: contain;
  object-position: center;
  cursor: zoom-in;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.rl-card:hover .rl-slide-img,
.rl-featured:hover .rl-slide-img { transform: scale(1.025); }

/* Contrôles du carrousel au-dessus des images */
.rl-media .mb-carousel-arrow { z-index: 3; width: 38px; height: 38px; opacity: .92; }
.rl-media .mb-carousel-dots  { z-index: 3; bottom: 12px; }
.rl-media .mb-carousel-dot   { box-shadow: 0 1px 4px rgba(0,0,0,.4); }

.rl-cat, .rl-count, .rl-zoom { position: absolute; z-index: 4; }
.rl-cat {
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: calc(100% - 70px);
  padding: .3rem .8rem;
  border-radius: 50px;
  background: var(--c);
  color: #fff;
  font-size: .75rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.45);
}
.rl-cat i { font-size: .7rem; }
.rl-count {
  bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 50px;
  background: rgba(6,15,38,.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem; font-weight: 700;
}
.rl-zoom {
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s, background .3s, color .3s;
}
.rl-media:hover .rl-zoom,
.rl-zoom:focus-visible { opacity: 1; transform: none; }
.rl-zoom:hover { background: var(--c); color: #fff; }
@media (hover: none) { .rl-zoom { opacity: 1; transform: none; } }

/* Projet sans image */
.rl-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
          radial-gradient(circle at 80% 15%, rgba(255,255,255,.28), transparent 45%),
          linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #0B1B4A), var(--c) 60%, color-mix(in srgb, var(--c) 55%, #fff));
}
.rl-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.25) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  opacity: .4;
}
.rl-placeholder i {
  position: relative; z-index: 1;
  font-size: 4rem;
  color: rgba(255,255,255,.9);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

/* ============================================================
   PROJET À LA UNE
============================================================ */
.rl-featured-section { padding: 90px 0 30px; background: #fff; }
.rl-featured {
  --c: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c) 55%, transparent), var(--shadow);
}
.rl-featured-media .rl-media { height: 100%; min-height: 360px; aspect-ratio: auto; }
.rl-featured-body { display: flex; flex-direction: column; gap: .9rem; padding: 2.5rem 2.25rem; }
.rl-featured-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .85rem;
  border-radius: 50px;
  background: #FEF3C7;
  color: #B45309;
  font-size: .8rem; font-weight: 700;
}
.rl-featured h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
}
.rl-featured-desc { font-size: .98rem; line-height: 1.75; }

/* ============================================================
   ÉLÉMENTS COMMUNS (méta, client, résultats, technologies)
============================================================ */
.rl-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.rl-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.rl-meta i { color: var(--c); font-size: .75rem; }
.rl-client { display: flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .88rem; }
.rl-client i { color: var(--c); font-size: .8rem; }

.rl-kpis { display: flex; flex-wrap: wrap; gap: .75rem; }
.rl-kpi {
  flex: 1 1 140px;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.rl-kpi span   { display: block; color: var(--text-muted); font-size: .75rem; font-weight: 600; }
.rl-kpi strong { display: block; color: var(--text); font-size: .98rem; line-height: 1.35; }
.rl-kpi--main {
  flex-grow: 2;
  background: color-mix(in srgb, var(--c) 9%, #fff);
  border-color: color-mix(in srgb, var(--c) 25%, var(--border));
}
.rl-kpi--main strong { color: color-mix(in srgb, var(--c) 85%, #0F172A); }

.rl-techs { display: flex; flex-wrap: wrap; gap: .4rem; }
.rl-techs li {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .74rem; font-weight: 600;
}
.rl-techs img { width: 14px; height: 14px; object-fit: contain; }
.rl-techs .rl-techs-more { background: var(--bg2); color: var(--text-muted); }

.rl-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* ============================================================
   GRILLE DE PROJETS + FILTRES
============================================================ */
.rl-grid-section { padding: 80px 0 100px; background: #fff; }
.rl-grid-section .container,
.rl-featured-section .container { max-width: 1400px; }

.rl-grid-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.rl-grid-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.2; color: var(--text); }

.rl-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.rl-filter {
  --c: var(--text);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.rl-filter i { color: var(--c); font-size: .8rem; }
.rl-filter span {
  padding: .05rem .5rem;
  border-radius: 50px;
  background: var(--bg2);
  font-size: .72rem;
}
.rl-filter:hover { border-color: var(--c); color: var(--text); }
.rl-filter.is-active { background: var(--c); border-color: var(--c); color: #fff; }
.rl-filter.is-active i { color: #fff; }
.rl-filter.is-active span { background: rgba(255,255,255,.22); color: #fff; }
.rl-filter[data-filter="all"].is-active { background: var(--text); border-color: var(--text); }

.rl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.rl-card {
  --c: var(--blue);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease, opacity .25s ease;
}
.rl-card[hidden] { display: none; }
.rl-card.is-out { opacity: 0; transform: scale(.97); }
.rl-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 55%, transparent);
}
.rl-card-body { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.5rem 1.4rem; }
.rl-card h3 { font-size: 1.18rem; line-height: 1.3; color: var(--text); }
.rl-desc { font-size: .9rem; line-height: 1.65; }

.rl-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
}
.rl-card-foot:empty { display: none; }
.rl-result { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); font-weight: 700; }
.rl-result i { color: var(--c); }
.rl-duree  { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); }

.rl-more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c);
  font-family: var(--font-body);
  font-size: .88rem; font-weight: 700;
  cursor: pointer;
}
.rl-more i { font-size: .75rem; transition: transform .3s; }
.rl-more:hover i { transform: translateX(4px); }

.rl-no-result { margin-top: 2rem; text-align: center; color: var(--text-muted); }

/* Aucun projet publié */
.rl-empty-section { padding: 90px 0; background: #fff; }
.rl-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem 2rem;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
}
.rl-empty-ic {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--blue);
  font-size: 1.5rem;
}
.rl-empty h2 { font-size: 1.5rem; color: var(--text); margin-bottom: .5rem; }
.rl-empty p  { margin-bottom: 1.5rem; }

/* ============================================================
   ÉTUDE DE CAS (boîte de dialogue — base : .projet-desc-dialog)
============================================================ */
.rl-case { max-width: 820px; }
.rl-case .pdd-header { margin-bottom: 1rem; }
.rl-case .pdd-header h3 { font-size: 1.35rem; margin-top: .25rem; }
.rl-case .projet-badge-inline { margin-bottom: .4rem; }
.rl-case-thumbs {
  display: flex; gap: .6rem;
  margin-bottom: 1.1rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}
.rl-case-thumb {
  flex: 0 0 auto;
  width: 132px; height: 84px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
  cursor: zoom-in;
  transition: border-color .25s, transform .25s;
}
.rl-case-thumb:hover { border-color: var(--c); transform: translateY(-2px); }
.rl-case-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rl-case-meta { margin-bottom: 1rem; }
.rl-case .rl-kpis { margin-bottom: 1rem; }
.rl-case-demo { margin-top: 1.25rem; }

/* ============================================================
   VISIONNEUSE PLEIN ÉCRAN
============================================================ */
.rl-lightbox {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(4,10,28,.95);
  color: #fff;
  overflow: hidden;
}
.rl-lightbox[open] { display: flex; flex-direction: column; animation: rl-lb-in .25s ease; }
.rl-lightbox::backdrop { background: rgba(4,10,28,.6); }
@keyframes rl-lb-in { from { opacity: 0; } }

.rl-lb-top {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rl-lb-title   { flex: 1; min-width: 0; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-lb-counter { color: rgba(226,232,255,.65); font-size: .85rem; font-variant-numeric: tabular-nums; }
.rl-lb-close, .rl-lb-nav {
  border: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
  transition: background .25s;
}
.rl-lb-close { width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; }
.rl-lb-close:hover, .rl-lb-nav:hover { background: rgba(255,255,255,.22); }

.rl-lb-stage {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 4.5rem;
}
.rl-lb-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .3s, transform .3s;
}
.rl-lb-img.is-loaded { opacity: 1; transform: none; }
.rl-lb-nav {
  position: absolute; top: 50%;
  width: 48px; height: 48px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.rl-lb-prev { left: 1rem; }
.rl-lb-next { right: 1rem; }
.rl-lb-nav[hidden] { display: none; }

.rl-lb-thumbs {
  display: flex; justify-content: center; gap: .5rem;
  padding: .9rem 1rem 1.2rem;
  overflow-x: auto;
}
.rl-lb-thumbs[hidden] { display: none; }
.rl-lb-thumbs button {
  flex: 0 0 auto;
  width: 76px; height: 50px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  opacity: .55;
  cursor: pointer;
  transition: opacity .25s, border-color .25s;
}
.rl-lb-thumbs button:hover { opacity: .85; }
.rl-lb-thumbs button.is-active { opacity: 1; border-color: var(--accent); }
.rl-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   CHIFFRES CLÉS (fond : .hm-why ; cartes : .hm-stat)
============================================================ */
.rl-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.rl-impact-grid .hm-stat:last-child:nth-child(odd) { grid-column: auto; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .rl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-featured { grid-template-columns: 1fr; }
  .rl-featured-media .rl-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .rl-hero { padding: 70px 0 80px; }
  .rl-hero-stats { gap: 1rem 2rem; }
  .rl-hero-stats dd { font-size: 1.7rem; }

  .rl-featured-section { padding: 60px 0 20px; }
  .rl-featured { border-radius: 20px; }
  .rl-featured-body { padding: 1.6rem 1.35rem; }
  .rl-actions .btn { width: 100%; justify-content: center; }

  .rl-grid-section { padding: 60px 0 70px; }
  .rl-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .rl-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    margin: 0 -18px; padding: 0 18px .4rem;
    scrollbar-width: none;
  }
  .rl-filters::-webkit-scrollbar { display: none; }
  .rl-filter { flex-shrink: 0; }

  .rl-case-thumb { width: 108px; height: 70px; }
  .rl-lb-stage { padding: .75rem; }
  .rl-lb-nav { top: auto; bottom: 1rem; transform: none; width: 44px; height: 44px; background: rgba(255,255,255,.16); }
  .rl-lb-thumbs button { width: 60px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-slide-img, .rl-card, .rl-lb-img { transition: none; }
  .rl-card:hover .rl-slide-img, .rl-featured:hover .rl-slide-img { transform: none; }
}


/* ============================================================
   À COLLER À LA FIN DE assets/css/main.css
   ------------------------------------------------------------
   HEADER & FOOTER — refonte
   Surcharge les anciens styles de la navbar et du footer ;
   les classes utilisées par main.js sont conservées.
============================================================ */

/* Couleurs sombres partagées par toutes les pages (hero, footer…) */
:root {
  --sv-navy:   #060F26;
  --sv-navy-2: #0A1A42;
}

/* ---- Lien d'évitement (clavier / lecteurs d'écran) ---- */
.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 3000;
  padding: .65rem 1.1rem;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; color: #fff; }
#contenu:focus { outline: none; }

.nav-spacer { height: var(--nav-h); }

/* ============================================================
   ÉCRAN DE TRANSITION
============================================================ */
.pt-logo img { width: 100%; height: 100%; object-fit: contain; }
.pt-name {
  margin-top: .2rem;
  font-family: "Cinzel", serif;
  font-size: 1.6rem; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}

/* ============================================================
   BARRE DE NAVIGATION
============================================================ */
#navbar {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
#navbar.scrolled {
  background: rgba(255,255,255,.97);
  border-color: var(--border);
  box-shadow: 0 12px 30px -20px rgba(15,23,42,.35);
}
.nav-container { gap: 2rem; }

/* ---- Logo ---- */
.nav-logo { gap: .7rem; }
.nav-logo .logo-icon {
  width: 80px; height: 80px;
  border-radius: 12px;
  overflow: hidden;
}
.navbar-logo { width: 100%; height: 100%; object-fit: contain; }
.nav-logo .logo-text {
  font-family: "Cinzel", serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text);
  text-transform: uppercase;
}

/* ---- Liens principaux ---- */
.nav-main { margin: 0 auto; }
.nav-actions { margin-left: 0; }
.nav-links { gap: .2rem; }
.nav-links > li { position: relative; }

.nav-links > li > a,
.nav-dd-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .85rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .93rem; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s;
}
/* Soulignement animé */
.nav-links > li > a::after,
.nav-dd-toggle::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-dd-toggle:hover,
.nav-dd-toggle.active,
.nav-dd.is-open > .nav-dd-toggle { color: var(--blue); background: none; }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after,
.nav-dd-toggle.active::after { transform: scaleX(1); }
.nav-dd-toggle i { font-size: .62rem; transition: transform .3s; }
.nav-dd.is-open > .nav-dd-toggle i { transform: rotate(180deg); }
.nav-links a:focus-visible,
.nav-dd-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 2px; }

/* ---- Panneaux déroulants ---- */
.nav-dd-panel {
  position: absolute;
  top: calc(100% + 12px); left: 50%;
  z-index: 1100;
  min-width: 320px;
  padding: .6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
/* Pont invisible : le menu ne se ferme pas en descendant la souris */
.nav-dd-panel::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -16px;
  height: 16px;
}
@media (hover: hover) and (min-width: 1025px) {
  .nav-dd:hover > .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-dd:hover > .nav-dd-toggle { color: var(--blue); }
  .nav-dd:hover > .nav-dd-toggle i { transform: rotate(180deg); }
}
.nav-dd.is-open > .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.nav-dd-panel--mega {
  width: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: .6rem;
  padding: .75rem;
}
.nav-dd-list { display: grid; gap: .1rem; }

.nav-dd-panel a.nav-dd-item {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  background: none;
  color: var(--text);
  font-size: .9rem;
  white-space: normal;
  transition: background .2s;
}
.nav-dd-panel a.nav-dd-item:hover,
.nav-dd-panel a.nav-dd-item.active { background: var(--bg); color: var(--text); }
.nav-dd-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
  font-size: .9rem;
  transition: background .2s, color .2s;
}
.nav-dd-item:hover .nav-dd-ic { background: var(--c); color: #fff; }
.nav-dd-item strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.nav-dd-item small  { display: block; margin-top: .1rem; font-size: .78rem; line-height: 1.4; color: var(--text-muted); }
.nav-dd-item[aria-current="page"] strong { color: var(--blue); }

.nav-dd-panel a.nav-dd-all {
  display: inline-block;
  margin: .4rem .8rem .3rem;
  padding: 0;
  background: none;
  color: var(--blue);
  font-size: .85rem; font-weight: 600;
}
.nav-dd-panel a.nav-dd-all:hover { background: none; text-decoration: underline; }

.nav-dd-aside {
  display: flex; flex-direction: column;
  padding: 1.35rem;
  border-radius: 14px;
  color: #fff;
  background:
          radial-gradient(260px 160px at 100% 0%, rgba(0,194,255,.35), transparent 70%),
          linear-gradient(150deg, var(--sv-navy-2), #0047CC);
}
.nav-dd-aside strong { font-size: 1.02rem; }
.nav-dd-aside p { margin: .45rem 0 1.1rem; color: rgba(226,232,255,.78); font-size: .85rem; line-height: 1.55; }
.nav-dd-panel a.nav-dd-cta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 50px;
  background: #fff;
  color: var(--blue);
  font-size: .85rem; font-weight: 600;
}
.nav-dd-panel a.nav-dd-cta:hover { background: var(--blue-light); color: var(--blue-dark); }

.nav-cta { padding: .68rem 1.4rem; font-size: .9rem; }

/* Écrans intermédiaires : la nav tient désormais jusqu'à 1025 px */
@media (max-width: 1200px) and (min-width: 1025px) {
  .nav-links   { display: flex; }
  .nav-cta     { display: inline-flex; }
  .nav-toggle  { display: none; }
  .nav-container { gap: 1rem; }
  .nav-links { gap: 0; }
  .nav-links > li > a, .nav-dd-toggle { padding: .5rem .5rem; font-size: .87rem; }
  .nav-links > li > a::after, .nav-dd-toggle::after { left: .5rem; right: .5rem; }
  .nav-logo .logo-text { font-size: 1.2rem; letter-spacing: .1em; }
  .nav-cta { padding: .6rem 1.1rem; font-size: .85rem; }
}
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 420px) {
  .nav-logo .logo-text { font-size: 1.15rem; letter-spacing: .1em; }
}

/* ============================================================
   MENU MOBILE (tiroir)
============================================================ */
.nav-mobile .logo-icon { width: 40px; height: 40px; }
.nav-mobile .logo-text { font-size: 1.25rem; }
.nav-mobile-body { flex: 1; overflow-y: auto; }
.nav-mobile-links { flex: none; overflow: visible; }
.nav-mobile-links a[aria-current="page"] .nml-icon { background: var(--blue); color: #fff; }

.nav-mobile-group { padding: .25rem 1.5rem 1.5rem; }
.nav-mobile-group-title {
  margin-bottom: .7rem;
  color: var(--text-muted);
  font-size: .8rem; font-weight: 700;
}
.nav-mobile-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.nav-mobile-chips a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem;
  border-radius: 50px;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: color-mix(in srgb, var(--c) 85%, #0F172A);
  font-size: .8rem; font-weight: 600;
}
.nav-mobile-chips a i { color: var(--c); font-size: .75rem; }

.nav-mobile-contact {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  color: var(--text-muted);
  font-size: .9rem; font-weight: 600;
  overflow-wrap: anywhere;
}
.nav-mobile-contact i { color: var(--blue); }

/* ============================================================
   PIED DE PAGE
============================================================ */
#footer.ft {
  position: relative;
  overflow: hidden;
  padding: 0;
  color: rgba(226,232,255,.7);
  background:
          radial-gradient(900px 420px at 100% 0%, rgba(0,102,255,.18), transparent 60%),
          radial-gradient(700px 360px at 0% 100%, rgba(124,58,237,.14), transparent 60%),
          var(--sv-navy);
}
.ft-line { height: 3px; background: linear-gradient(90deg, var(--blue), var(--accent), var(--accent2)); }
.ft-grid-bg {
  position: absolute; inset: 0;
  background-image:
          linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000 10%, transparent 60%);
  mask-image: radial-gradient(ellipse at 20% 0%, #000 10%, transparent 60%);
  pointer-events: none;
}
.ft .container { position: relative; }

.ft-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.3fr);
  gap: 3rem;
  padding: 80px 0 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ---- Marque ---- */
.ft-logo { display: inline-flex; align-items: center; gap: .75rem; }
.ft-logo img { width: 148px; height: 148px; object-fit: contain; border-radius: 12px; }
.ft-logo span {
  font-family: "Cinzel", serif;
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.ft-brand p {
  max-width: 40ch;
  margin: 1.1rem 0 1.4rem;
  color: rgba(226,232,255,.62);
  font-size: .92rem;
  line-height: 1.7;
}
.ft-social { display: flex; flex-wrap: wrap; gap: .6rem; }
.ft-social a {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(226,232,255,.85);
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.ft-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }

.ft-product {
  display: flex; align-items: center; gap: .9rem;
  max-width: 340px;
  margin-top: 1.75rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  transition: border-color .3s, background .3s;
}
.ft-product:hover { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(0,194,255,.45); }
.ft-product-ic {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
}
.ft-product strong { display: block; font-size: .92rem; line-height: 1.3; }
.ft-product small  { display: block; color: rgba(226,232,255,.6); font-size: .8rem; }
.ft-product-arrow { margin-left: auto; font-size: .75rem; opacity: .6; }

/* ---- Colonnes ---- */
.ft-col h4 { margin-bottom: 1.25rem; color: #fff; font-size: .98rem; }
.ft-col ul { display: grid; gap: .75rem; }
.ft-col ul a {
  display: inline-flex; align-items: center; gap: .6rem;
  color: rgba(226,232,255,.65);
  font-size: .9rem;
  transition: color .25s, transform .25s;
}
.ft-col ul a:hover { color: #fff; transform: translateX(3px); }
.ft-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }

.ft-contact li { display: flex; align-items: flex-start; gap: .8rem; font-size: .9rem; line-height: 1.5; }
.ft-contact a, .ft-contact span:not(.ft-contact-ic) {
  padding-top: .35rem;
  color: rgba(226,232,255,.75);
  overflow-wrap: anywhere;
}
.ft-contact li a:hover { color: #fff; transform: none; }
.ft-contact-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  color: var(--accent);
  font-size: .85rem;
}
.ft-btn {
  margin-top: 1.4rem;
  border-color: rgba(255,255,255,.3);
  background: transparent;
  color: #fff;
}
.ft-btn:hover { background: #fff; border-color: #fff; color: var(--sv-navy); transform: translateY(-2px); }

/* ---- Bas de page ---- */
.ft-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0 1.75rem;
  color: rgba(226,232,255,.45);
  font-size: .84rem;
}
.ft-bottom p { color: inherit; }
.ft-bottom ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ft-bottom a { color: rgba(226,232,255,.5); }
.ft-bottom a:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .ft-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (max-width: 640px) {
  .ft-main { grid-template-columns: 1fr; padding: 60px 0 40px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-panel, .nav-links > li > a::after, .nav-dd-toggle::after { transition: none; }
}


/* ============================================================
   À COLLER À LA FIN DE assets/css/style.css
   ------------------------------------------------------------
   PAGE BLOG — refonte complète
   Préfixe .bl- : n'entre en conflit avec aucun style existant.
   Réutilise les fonds sombres déjà définis (--sv-navy,
   --sv-navy-2), les variables du design system (--blue,
   --accent, --border, --radius-lg, --shadow…) et le carrousel
   générique .mb-carousel déjà présent plus haut dans ce fichier.
============================================================ */

.bl-page [id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ============================================================
   1. HERO — bandeau sombre avec recherche + statistiques
============================================================ */
.bl-hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 100px;
  color: #fff;
  text-align: center;
  background:
          radial-gradient(1000px 520px at 85% -10%, rgba(0,194,255,.20), transparent 60%),
          radial-gradient(850px 480px at -10% 110%, rgba(124,58,237,.22), transparent 60%),
          linear-gradient(160deg, var(--sv-navy) 0%, var(--sv-navy-2) 55%, #0B2A8A 100%);
}
.bl-hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
          linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%);
  pointer-events: none;
}
.bl-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  animation: sv-orb 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.bl-orb--1 { width: 340px; height: 340px; background: #0066FF; top: -120px; left: 8%; }
.bl-orb--2 { width: 300px; height: 300px; background: #7C3AED; bottom: -150px; right: 6%; animation-delay: -6s; }

.bl-hero .container { position: relative; z-index: 1; max-width: 880px; }

.bl-breadcrumb {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .35rem .9rem;
  border-radius: 50px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .84rem;
  color: rgba(226,232,255,.7);
  margin-bottom: 1.4rem;
}
.bl-breadcrumb a { color: #C9D8FF; }
.bl-breadcrumb a:hover { color: #fff; }
.bl-breadcrumb i { font-size: .55rem; opacity: .6; }

.bl-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1.1rem;
}
.bl-hero h1 span { color: var(--accent); }
.bl-hero-lead {
  max-width: 640px;
  margin: 0 auto 2.25rem;
  color: rgba(226,232,255,.78);
  font-size: 1.08rem;
  line-height: 1.75;
}

/* ---- Barre de recherche ---- */
.bl-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto 2.75rem;
}
.bl-search i {
  position: absolute; top: 50%; left: 1.35rem;
  transform: translateY(-50%);
  color: rgba(255,255,255,.55);
  font-size: .95rem;
}
.bl-search input {
  width: 100%;
  padding: 1rem 1.5rem 1rem 3.1rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: var(--font-body);
  font-size: .96rem;
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.bl-search input::placeholder { color: rgba(226,232,255,.55); }
.bl-search input:focus {
  background: rgba(255,255,255,.13);
  border-color: rgba(0,194,255,.55);
  box-shadow: 0 0 0 4px rgba(0,194,255,.15);
}

/* ---- Statistiques ---- */
.bl-hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.bl-hero-stat { text-align: center; }
.bl-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 800;
  color: #fff; line-height: 1.1;
}
.bl-hero-stat span { font-size: .82rem; color: rgba(226,232,255,.65); }

/* ============================================================
   2. ARTICLE À LA UNE
============================================================ */
.bl-featured-section { padding: 90px 0 30px; background: #fff; }
.bl-featured-section .container { max-width: 1200px; }

.bl-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--blue);
  font-size: .88rem; font-weight: 700;
  margin-bottom: 1.25rem;
}
.bl-kicker i { font-size: .8rem; }

.bl-featured {
  --c: var(--blue);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c) 55%, transparent), var(--shadow);
}
.bl-featured-media { position: relative; overflow: hidden; min-height: 340px; background: color-mix(in srgb, var(--c) 18%, #0B1530); }
.bl-featured-media .mb-carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.bl-featured-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,15,38,.55) 100%);
  pointer-events: none;
}
.bl-featured-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #0B1B4A), var(--c) 60%, color-mix(in srgb, var(--c) 55%, #fff));
}
.bl-featured-placeholder i { font-size: 4rem; color: rgba(255,255,255,.9); }
.bl-featured-cat {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem;
  border-radius: 50px;
  background: var(--c);
  color: #fff;
  font-size: .78rem; font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}
.bl-featured-count {
  position: absolute; bottom: 1.1rem; left: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem;
  border-radius: 50px;
  background: rgba(6,15,38,.6);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .74rem; font-weight: 700;
}

.bl-featured-body { display: flex; flex-direction: column; gap: 1.1rem; padding: 2.75rem 2.5rem; }
.bl-featured-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .85rem;
  border-radius: 50px;
  background: #FEF3C7;
  color: #B45309;
  font-size: .8rem; font-weight: 700;
}
.bl-featured-body h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--text);
}
.bl-featured-desc { font-size: .98rem; line-height: 1.75; }

.bl-featured-meta {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--text-muted);
}
.bl-featured-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.bl-featured-meta i { color: var(--c); }
.bl-featured-actions { margin-top: .25rem; }

/* ============================================================
   3. AUTEUR (avatar générique réutilisé partout)
============================================================ */
.bl-avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff; font-weight: 800; font-size: .82rem;
}
.bl-author { display: flex; align-items: center; gap: .65rem; }
.bl-author-name { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.bl-author-role { font-size: .76rem; color: var(--text-muted); }

/* ============================================================
   4. FILTRES + RECHERCHE SECONDAIRE
============================================================ */
.bl-toolbar-section { padding: 3rem 0 0; background: #fff; }
.bl-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.bl-toolbar h2 { font-size: 1.4rem; color: var(--text); }
.bl-toolbar h2 span { color: var(--text-muted); font-weight: 500; font-size: 1rem; }

.bl-filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.bl-filter {
  --c: var(--text);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.bl-filter i { color: var(--c); font-size: .8rem; }
.bl-filter span {
  padding: .05rem .5rem;
  border-radius: 50px;
  background: var(--bg2);
  font-size: .72rem;
}
.bl-filter:hover { border-color: var(--c); color: var(--text); }
.bl-filter.is-active { background: var(--c); border-color: var(--c); color: #fff; }
.bl-filter.is-active i { color: #fff; }
.bl-filter.is-active span { background: rgba(255,255,255,.22); color: #fff; }
.bl-filter[data-filter="all"].is-active { background: var(--text); border-color: var(--text); }

/* ============================================================
   5. GRILLE D'ARTICLES
============================================================ */
.bl-grid-section { padding: 3rem 0 100px; background: #fff; }
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.bl-card {
  --c: var(--blue);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease, opacity .25s ease;
}
.bl-card[hidden] { display: none; }
.bl-card.is-out { opacity: 0; transform: scale(.97); }
.bl-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 55%, transparent);
}

.bl-card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--c) 16%, #0B1530);
}
.bl-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bl-card:hover .bl-card-thumb img { transform: scale(1.06); }
.bl-card-thumb-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #0B1B4A), var(--c) 60%, color-mix(in srgb, var(--c) 50%, #fff));
}
.bl-card-thumb-placeholder i { font-size: 2.5rem; color: rgba(255,255,255,.85); }
.bl-card-cat {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  padding: .25rem .75rem;
  border-radius: 50px;
  background: var(--c);
  color: #fff;
  font-size: .72rem; font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.35);
}
.bl-card-count {
  position: absolute; bottom: .75rem; left: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 50px;
  background: rgba(6,15,38,.6);
  color: #fff; font-size: .68rem; font-weight: 700;
}

.bl-card-body { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.5rem 1.35rem; }
.bl-card-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--text-muted); }
.bl-card-meta i { color: var(--c); margin-right: .3rem; }
.bl-card-body h3 { font-size: 1.08rem; line-height: 1.4; color: var(--text); }
.bl-card-desc { font-size: .87rem; line-height: 1.6; flex: 1; }

.bl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.bl-read-link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--c);
  font-size: .85rem; font-weight: 700;
  white-space: nowrap;
}
.bl-read-link i { font-size: .72rem; transition: transform .3s; }
.bl-card:hover .bl-read-link i { transform: translateX(4px); }

.bl-no-result { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.bl-no-result i { font-size: 2rem; color: var(--border); margin-bottom: .75rem; display: block; }

/* ============================================================
   6. SUJETS POPULAIRES (nuage de catégories)
============================================================ */
.bl-topics-section { padding: 90px 0; background: var(--bg2); }
.bl-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.bl-topic {
  --c: var(--blue);
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bl-topic:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 40%, var(--border));
  box-shadow: 0 20px 40px -22px color-mix(in srgb, var(--c) 50%, transparent);
}
.bl-topic-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
  font-size: 1.1rem;
}
.bl-topic-info strong { display: block; font-size: .96rem; color: var(--text); }
.bl-topic-info span { font-size: .8rem; color: var(--text-muted); }

/* ============================================================
   7. NEWSLETTER
============================================================ */
.bl-newsletter-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: #fff;
  background:
          radial-gradient(700px 360px at 90% 0%, rgba(0,194,255,.20), transparent 60%),
          linear-gradient(150deg, var(--sv-navy) 0%, #0047CC 100%);
}
.bl-newsletter-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
          linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at 15% 50%, #000 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 15% 50%, #000 10%, transparent 65%);
  pointer-events: none;
}
.bl-newsletter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 3rem;
  align-items: center;
}
.bl-newsletter-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  color: var(--accent);
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}
.bl-newsletter h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: #fff; margin-bottom: .85rem; line-height: 1.2; }
.bl-newsletter > div > p { color: rgba(226,232,255,.78); font-size: 1.02rem; line-height: 1.7; max-width: 46ch; }

.bl-newsletter-form {
  padding: 2rem;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
}
.bl-newsletter-input-wrap {
  display: flex; gap: 0;
  border-radius: 50px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.85);
  background: #fff;
}
.bl-newsletter-input-wrap input {
  flex: 1; padding: .8rem 1.25rem; border: none; outline: none; font-size: .95rem; font-family: var(--font-body);
}
.bl-newsletter-input-wrap .btn { border-radius: 0 50px 50px 0; padding: .8rem 1.5rem; }
.bl-newsletter-note {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1rem;
  font-size: .8rem;
  color: rgba(226,232,255,.65);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured-media { min-height: 260px; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-newsletter { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 640px) {
  .bl-hero { padding: 80px 0 70px; }
  .bl-hero-stats { gap: 1rem 1.5rem; }
  .bl-hero-stat strong { font-size: 1.55rem; }

  .bl-featured-section { padding: 60px 0 15px; }
  .bl-featured { border-radius: 20px; }
  .bl-featured-body { padding: 1.75rem 1.4rem; }

  .bl-toolbar { flex-direction: column; align-items: flex-start; }
  .bl-filters {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    margin: 0 -18px; padding: 0 18px .4rem;
    scrollbar-width: none;
  }
  .bl-filters::-webkit-scrollbar { display: none; }
  .bl-filter { flex-shrink: 0; }

  .bl-grid-section { padding: 2rem 0 70px; }
  .bl-grid { grid-template-columns: 1fr; gap: 1.25rem; }

  .bl-topics-section { padding: 60px 0; }
  .bl-newsletter-section { padding: 70px 0; }
  .bl-newsletter-input-wrap { flex-direction: column; border-radius: var(--radius); }
  .bl-newsletter-input-wrap .btn { border-radius: var(--radius); }
}

@media (prefers-reduced-motion: reduce) {
  .bl-orb { animation: none; }
  .bl-card, .bl-card-thumb img, .bl-topic { transition: none; }
  .bl-card:hover { transform: none; }
  .bl-card:hover .bl-card-thumb img { transform: none; }
}


/* ============================================================
   PAGES LÉGALES (mentions légales, confidentialité, sécurité)
   Réutilise .hm-hero / .rl-hero / .rl-breadcrumb / .sv-nav déjà
   définis ailleurs. Ajoute uniquement les composants propres à
   ces pages : avertissement, repères à personnaliser, badge de
   mise à jour, tableau sous-traitants, carte de signalement.
============================================================ */

/* Ancre --sv utilisée par .sv-nav-ic / .is-active (couleur du site) */
.sv-nav { --sv: var(--blue); }

/* ---- Nav d'ancrage sur UNE seule ligne : items resserrés pour tenir dans
   la largeur, et défilement horizontal rendu réellement utilisable
   (scrollbar visible + molette convertie en scroll horizontal via JS)
   plutôt qu'un overflow invisible qui rendait les derniers liens
   inatteignables à la souris. ---- */

/* Le hero (.hm-hero .container) va jusqu'à 1360px, mais le nav utilisait
   le .container par défaut (1200px) : il paraissait donc plus étroit que
   le hero au-dessus, ce qui coupait des liens sans raison sur grand écran. */
.lg-page .sv-nav .container { max-width: 1560px; }

.lg-page .sv-nav-inner {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.lg-page .sv-nav-inner::-webkit-scrollbar { height: 6px; }
.lg-page .sv-nav-inner::-webkit-scrollbar-track { background: transparent; }
.lg-page .sv-nav-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.lg-page .sv-nav-inner::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.lg-page .sv-nav-inner a {
  padding: .4rem .85rem .4rem .4rem;
  font-size: .82rem;
  flex-shrink: 0;
}


/* ---- Avertissement professionnel (non-valeur de conseil juridique définitif) ---- */
.lg-disclaimer {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #FFF7ED; border: 1px solid #FDE68A; border-left: 4px solid var(--warning);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.lg-disclaimer i { font-size: 1.3rem; color: var(--warning); flex-shrink: 0; margin-top: .1rem; }
.lg-disclaimer strong { display: block; color: #92400E; margin-bottom: .3rem; font-size: .95rem; }
.lg-disclaimer p { color: #92400E; font-size: .88rem; line-height: 1.6; margin: 0; }

/* ---- Repère "à personnaliser avec vos données officielles" ---- */
.lg-fill {
  display: inline-block;
  background: #FEF3C7; color: #92400E;
  padding: .05rem .5rem; border-radius: 5px;
  font-weight: 700; font-size: .92em;
  border: 1px dashed #F59E0B;
}

/* ---- Badge "dernière mise à jour" sur fond sombre du hero ---- */
.lg-updated {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: rgba(226,232,255,.85);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  padding: .35rem .9rem; border-radius: 50px; margin-top: 1.1rem;
}
.lg-updated i { color: var(--accent); }

/* ---- Tableau des sous-traitants / destinataires de données ---- */
.lg-subprocessors { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .88rem; }
.lg-subprocessors th, .lg-subprocessors td { padding: .65rem .9rem; text-align: left; border: 1px solid var(--border); }
.lg-subprocessors th { background: var(--bg2); font-weight: 700; color: var(--text); }
.lg-subprocessors td { color: var(--text-muted); }

/* ---- Carte "signaler une vulnérabilité" (page sécurité) ---- */
.lg-vuln-card {
  display: flex; align-items: center; gap: 1.75rem;
  background: linear-gradient(150deg, var(--sv-navy, #060F26) 0%, var(--sv-navy-2, #0A1A42) 100%);
  color: #fff; border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem; margin-top: 2.5rem;
}
.lg-vuln-icon {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 16px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--accent);
}
.lg-vuln-card h3 { color: #fff; margin-bottom: .4rem; font-size: 1.15rem; }
.lg-vuln-card p { color: rgba(226,232,255,.75); font-size: .92rem; margin-bottom: 1rem; max-width: 60ch; }
.lg-vuln-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.lg-vuln-actions .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.lg-vuln-actions .btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* ---- Petites listes numérotées type "étapes" réutilisées sur ces pages ---- */
.lg-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.lg-steps li { display: flex; gap: 1rem; align-items: flex-start; font-size: .92rem; color: var(--text-muted); }
.lg-steps .lg-step-num {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem;
}

@media (max-width: 768px) {
  .lg-vuln-card { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}


/* ============================================================
   À AJOUTER À LA FIN DE assets/css/style.css
   ------------------------------------------------------------
   Pied de page — préfixe .ft- pour éviter tout conflit avec
   l'ancien footer (#footer / .footer-*), que ce bloc remplace.
============================================================ */

.ft {
  position: relative;
  overflow: hidden;
  background: var(--text);
  color: rgba(255, 255, 255, .72);
  padding-top: 80px;
}

/* Filet dégradé en haut du footer + trame de points en fond */
.ft-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
}
.ft-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
}
.ft .container { position: relative; z-index: 1; }

/* ---- Grille principale ---- */
.ft-main {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ---- Colonne marque ---- */
.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.25rem;
}
.ft-logo img { width: 40px; height: 40px; border-radius: 10px; }
.ft-logo span {
  font-family: "Cinzel", serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

.ft-brand-text {
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .58);
  max-width: 38ch;
  margin-bottom: 1.5rem;
}

.ft-social {
  display: flex;
  gap: .65rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}
.ft-social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.ft-social a:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

/* Carte produit : MbeSchool */
.ft-product {
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: 340px;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: background var(--transition), border-color var(--transition);
}
.ft-product:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
}
.ft-product-ic { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ft-product-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ft-product-text strong { font-size: .9rem; color: #fff; }
.ft-product-text small { font-size: .78rem; color: rgba(255, 255, 255, .55); }
.ft-product-arrow { font-size: .8rem; color: rgba(255, 255, 255, .45); flex-shrink: 0; }

/* ---- Colonnes de liens ---- */
.ft-col h4 {
  color: #fff;
  font-size: .95rem;
  margin-bottom: 1.25rem;
}
.ft-col ul { list-style: none; padding: 0; margin: 0; }
.ft-col ul li { margin-bottom: .65rem; }
.ft-col ul a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .89rem;
  color: rgba(255, 255, 255, .6);
  transition: color var(--transition);
}
.ft-col ul a:hover { color: #fff; }

.ft-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c, var(--blue));
  flex-shrink: 0;
}

/* ---- Colonne contact ---- */
.ft-contact { margin-bottom: 1.5rem; }
.ft-contact li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
}
.ft-contact-ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.ft-contact a { color: rgba(255, 255, 255, .6); }
.ft-contact a:hover { color: #fff; }

.ft-btn {
  width: 100%;
  justify-content: center;
  background: var(--blue);
  color: #fff;
}
.ft-btn:hover { background: var(--blue-dark); color: #fff; }

/* ---- Bas de page ---- */
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .4);
}
.ft-bottom ul { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.ft-bottom ul a { color: rgba(255, 255, 255, .4); }
.ft-bottom ul a:hover { color: rgba(255, 255, 255, .85); }

/* Adresses et liens longs ne débordent jamais du footer */
.ft-col ul a,
.ft-contact a,
.ft-contact span {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .ft-main { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  .ft { padding-top: 60px; }
  .ft-main { grid-template-columns: 1fr; gap: 2.5rem; }
  .ft-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-social a, .ft-social a:hover,
  .ft-product, .ft-product:hover { transition: none; transform: none; }
}