/* ═══════════════════════════════════════
   e-Démarcheur — Feuille de style globale
   Ministère de la Construction de la Patrie
   Burkina Faso — 2026
═══════════════════════════════════════ */

:root {
  --vert:    #1B6B3A;
  --vert-l:  #2A8F50;
  --vert-d:  #124A28;
  --or:      #F5A623;
  --or-l:    #FDF3E0;
  --rouge:   #C1272D;
  --gris:    #F4F6F8;
  --gris-b:  #E8ECF0;
  --texte:   #1A1A2E;
  --texte-s: #5A6472;
  /* Alias employés par les styles scopés (rechercher / verifier) */
  --text-color: #1A1A2E;
  --text-muted: #5A6472;
  --blanc:   #FFFFFF;
  --r:       12px;
  --r-lg:    20px;
  --shadow:  0 4px 24px rgba(0,0,0,.08);
  --shadow-md: 0 8px 40px rgba(0,0,0,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--texte);
  background: var(--blanc);
  font-size: 15px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Navigation clavier — anneau de focus visible (masqué à la souris) */
:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .nav-toggle:focus-visible, .btn-next:focus-visible,
.btn-prev:focus-visible, .btn-search:focus-visible { outline-color: var(--or); }

/* ── NAVBAR ── */
.navbar {
  background: var(--blanc);
  border-bottom: 2px solid var(--gris-b);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--vert), var(--vert-l));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 22px; flex-shrink: 0;
}
.brand-name  { font-size: 17px; font-weight: 700; color: var(--vert); line-height: 1.2; }
.brand-sub   { font-size: 11px; color: var(--texte-s); }
.nav-links   { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--texte);
  border-radius: 8px;
  font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-links a:hover        { background: var(--gris); color: var(--vert); }
.nav-links a.active       { color: var(--vert); background: rgba(27,107,58,.08); font-weight: 600; }
.nav-links a.btn-primary  {
  background: var(--vert);
  color: white !important;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  transition: background .15s, transform .1s;
}
.nav-links a.btn-primary:hover { background: var(--vert-d); transform: translateY(-1px); }

/* hamburger mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--texte);
  padding: 4px;
}
.nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--gris-b);
  padding: 12px 24px;
  background: var(--blanc);
  gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--texte);
  border-radius: 8px;
  font-weight: 500;
}
.nav-mobile a:hover { background: var(--gris); color: var(--vert); }
.nav-mobile a.active { color: var(--vert); font-weight: 600; }

/* ── BOUTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--r);
  font-size: 14px; font-weight: 600; border: none;
  transition: background .15s, transform .1s, box-shadow .15s;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary  { background: var(--vert);  color: white; }
.btn-primary:hover  { background: var(--vert-d); color: white; }
.btn-secondary { background: var(--blanc); color: var(--vert); border: 1.5px solid var(--vert); }
.btn-secondary:hover { background: rgba(27,107,58,.05); color: var(--vert); }
.btn-white { background: white; color: var(--texte); }
.btn-white:hover { background: var(--or-l); }
.btn-gold { background: var(--or); color: var(--texte); font-weight: 700; box-shadow: 0 4px 20px rgba(245,166,35,.35); }
.btn-gold:hover { box-shadow: 0 8px 28px rgba(245,166,35,.5); color: var(--texte); }
/* Bouton « fantôme » translucide — sur fonds sombres (hero, bandeaux CTA) */
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── PAGE HEADER ── */
.page-header {
  background: linear-gradient(135deg, var(--vert-d), var(--vert));
  padding: 52px 24px;
  position: relative;
  overflow: hidden;
}
.page-header::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='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.page-header-inner { max-width: 1180px; margin: 0 auto; position: relative; }
.page-header .eyebrow { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.page-header h1 { font-size: clamp(22px,4vw,36px); font-weight: 800; color: white; margin-bottom: 8px; }
.page-header p  { font-size: 15px; color: rgba(255,255,255,.8); max-width: 560px; }

/* ── SECTIONS ── */
.section { padding: 72px 24px; }
.section-inner { max-width: 1180px; margin: 0 auto; }
.section-sm { padding: 48px 24px; }
.bg-gris   { background: var(--gris); }
.bg-blanc  { background: var(--blanc); }
.eyebrow { font-size: 12px; font-weight: 700; color: var(--vert); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.section-title { font-size: clamp(22px,3vw,34px); font-weight: 800; color: var(--texte); margin-bottom: 10px; line-height: 1.2; }
.section-sub { font-size: 15px; color: var(--texte-s); line-height: 1.7; max-width: 600px; }

/* ── CARDS ── */
.card {
  background: var(--blanc);
  border: 1.5px solid var(--gris-b);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card-hover { transition: border-color .2s, box-shadow .2s, transform .2s; }
.card-hover:hover { border-color: var(--vert); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-title {
  font-size: 15px; font-weight: 700; color: var(--texte);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--gris-b);
  display: flex; align-items: center; gap: 10px;
}
.card-title i { color: var(--vert); font-size: 18px; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 700; color: var(--texte-s); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.form-control {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--gris-b);
  border-radius: 9px;
  background: var(--blanc);
  color: var(--texte);
  /* 16px sur mobile : empêche le zoom auto d'iOS au focus. Redescend à 14px ≥768px. */
  font-size: 16px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-control:focus { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(27,107,58,.1); }
.form-control::placeholder { color: #b0b8c1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.full { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .form-control { font-size: 14px; }
}

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 50px; white-space: nowrap; }
.badge-ok      { background: #EAF3DE; color: #27500A; }
.badge-wait    { background: var(--gris); color: var(--texte-s); }
.badge-auto    { background: #E6F1FB; color: #0C447C; }
.badge-warning { background: var(--or-l); color: #854F0B; }
.badge-danger  { background: #FCEBEB; color: #A32D2D; }
.badge-info    { background: #EEF2FF; color: #4F46E5; }

/* ── PILL INFO ── */
.info-pill { display: inline-block; background: rgba(27,107,58,.1); color: var(--vert); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 50px; margin-top: 12px; }

/* ── BACK BUTTON ── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texte-s);
  margin-bottom: 24px;
  transition: color .15s;
}
.back-link:hover { color: var(--vert); }

/* ── FOOTER ── */
.footer { background: var(--vert-d); color: rgba(255,255,255,.7); padding: 56px 24px 28px; }
.footer-inner { max-width: 1180px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand-name { font-size: 17px; font-weight: 800; color: white; margin-bottom: 10px; }
.footer-brand-desc { font-size: 13px; line-height: 1.7; }
.footer-col h5 { font-size: 12px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-col a  { display: block; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 9px; transition: color .15s; }
.footer-col a:hover { color: var(--or); }
.footer-hr { border: none; border-top: 1px solid rgba(255,255,255,.1); margin-bottom: 22px; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: rgba(255,255,255,.5); margin-left: 16px; }
.footer-bottom a:hover { color: var(--or); }
.gov-badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 10px 14px; margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.7); }

/* ── UTILITAIRES ── */
.text-center { text-align: center; }
.text-muted  { color: var(--texte-s); }
.text-vert   { color: var(--vert); }
.text-or     { color: var(--or); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 36px; }
.mt-5 { margin-top: 48px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 36px; }
.gap-2 { gap: 12px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hide-mob { display: none !important; }
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 48px 16px; }
}
/* ── CIBLES TACTILES — viser ~44px sur mobile (recommandation WCAG/Apple) ── */
@media (max-width: 768px) {
  .nav-toggle  { padding: 10px; min-width: 44px; min-height: 44px; }
  .nav-mobile a { padding: 13px 14px; }
  .upload-btn  { padding: 11px 16px; min-height: 42px; }
  .btn-sm      { padding: 11px 18px; }
  .back-link   { padding: 6px 2px; }
}

/* ═══════════════════════════════════════
   PAGE ACCUEIL — styles spécifiques (mobile-first)
   Base = mobile · enrichissements via @media (min-width)
═══════════════════════════════════════ */
/* ── HERO ── */
.hero {
  /* background: linear-gradient(135deg, #777 0%, #999 55%, #bbb 100%); */
  padding: 52px 18px 60px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 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='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E"); */
}
/* Image de fond : opacité réglable via --hero-bg-opacity sur la section .hero */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: var(--hero-bg-opacity, 1);
  pointer-events: none;
}
.hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 50px; padding: 6px 16px; font-size: 12px; color: rgba(255,255,255,.9); margin-bottom: 22px; backdrop-filter: blur(4px); }
.hero-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--or); animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
.hero h1 { font-size: clamp(27px,6.5vw,34px); font-weight: 800; color: white; line-height: 1.2; margin: 0; }
.hero h1 span { color: var(--or); }
.hero-desc { font-size: 15px; color: white; line-height: 1.7; margin-bottom: 26px; font-weight:700; }
.hero-btns { display: flex; flex-direction: column; gap: 12px; }
.hero-btns .btn { width: 100%; justify-content: center; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); font-weight:700; }
.stat-val   { font-size: 23px; font-weight: 800; color: white; }
.stat-lbl   { font-size: 12px; color: white; margin-top: 2px; }
.hero-card { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 22px; backdrop-filter: blur(14px); }
.hero-card-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.carte-preview { background: linear-gradient(135deg, #1A1A2E, #16213E); border-radius: 14px; padding: 22px; position: relative; overflow: hidden; margin-bottom: 16px; }
.carte-preview::after { content: ''; position: absolute; top: -24px; right: -24px; width: 110px; height: 110px; background: var(--or); border-radius: 50%; opacity: .08; }
.carte-chip { width: 38px; height: 29px; background: linear-gradient(135deg,#d4a843,#f0c060); border-radius: 5px; margin-bottom: 16px; }
.carte-num  { font-size: 14px; font-weight: 700; color: white; letter-spacing: .12em; margin-bottom: 16px; font-family: monospace; }
.carte-row  { display: flex; justify-content: space-between; }
.carte-lbl  { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; }
.carte-val  { font-size: 13px; font-weight: 600; color: white; margin-top: 2px; }
.carte-logo { position: absolute; top: 16px; right: 18px; font-size: 26px; color: var(--or); opacity: .75; }
.hero-steps { display: flex; flex-direction: column; gap: 10px; }
.hero-step  { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 10px; padding: 11px 14px; font-size: 13px; color: rgba(255,255,255,.85); }
.step-num   { width: 26px; height: 26px; border-radius: 50%; background: var(--or); color: var(--texte); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* ── ACTIONS ── */
.actions-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
.action-card  { background: var(--blanc); border: 1.5px solid var(--gris-b); border-radius: 20px; padding: 24px 22px; display: flex; flex-direction: column; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.action-card:hover { border-color: var(--vert); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.action-icon  { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; overflow: hidden; }
.action-card h3  { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.action-card p   { font-size: 13.5px; color: var(--texte-s); line-height: 1.6; margin-bottom: 20px; flex: 1; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--vert); }
/* ── INFO CARDS ── */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
.info-card { background: var(--blanc); border: 1.5px solid var(--gris-b); border-radius: 18px; padding: 24px 20px; transition: box-shadow .2s; }
.info-card:hover { box-shadow: var(--shadow); }
.info-card i { font-size: 28px; color: var(--vert); margin-bottom: 14px; display: block; }
.info-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.info-card p  { font-size: 13.5px; color: var(--texte-s); line-height: 1.65; margin: 0; }
/* ── DOCS ── */
.docs-tabs { display: flex; gap: 8px; background: var(--gris-b); padding: 6px; border-radius: 12px; margin: 28px 0 24px; width: 100%; }
.docs-tab  { flex: 1; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--texte-s); transition: all .15s; text-align: center; }
.docs-tab.active { background: var(--blanc); color: var(--vert); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dpanel    { display: none; }
.dpanel.active { display: grid; grid-template-columns: 1fr; gap: 12px; }
.doc-item  { display: flex; align-items: flex-start; gap: 14px; background: var(--blanc); border: 1.5px solid var(--gris-b); border-radius: var(--r); padding: 16px 18px; transition: border-color .15s; }
.doc-item:hover { border-color: var(--vert); }
.doc-n { width: 32px; height: 32px; border-radius: 9px; background: rgba(27,107,58,.1); color: var(--vert); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-text h5 { font-size: 13.5px; font-weight: 600; margin: 0 0 3px; }
.doc-text p  { font-size: 12px; color: var(--texte-s); margin: 0; }
/* ── CTA BAND ── */
.cta-band { background: linear-gradient(135deg, var(--vert-d), var(--vert)); padding: 48px 18px; text-align: center; }
.cta-band h2 { font-size: clamp(22px,3vw,32px); font-weight: 800; color: white; margin-bottom: 12px; }
.cta-band p  { font-size: 15px; color: rgba(255,255,255,.8); margin-bottom: 28px; }
.cta-band .btns { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.cta-band .btns .btn { width: 100%; justify-content: center; }

/* ── ENRICHISSEMENT TABLETTE (≥ 768px) ── */
@media (min-width: 768px) {
  .hero { padding: 64px 24px 72px; }
  .hero-btns { flex-direction: row; flex-wrap: wrap; }
  .hero-btns .btn { width: auto; }
  .actions-grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .info-grid    { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .dpanel.active { grid-template-columns: repeat(2,1fr); }
  .docs-tabs { width: fit-content; }
  .docs-tab  { flex: 0 0 auto; padding: 10px 22px; }
  .cta-band { padding: 64px 24px; }
  .cta-band p { font-size: 16px; }
  .cta-band .btns { flex-direction: row; flex-wrap: wrap; }
  .cta-band .btns .btn { width: auto; }
}

/* ── ENRICHISSEMENT DESKTOP (≥ 992px) ── */
@media (min-width: 992px) {
  .hero { padding: 120px 24px 120px; }
  .hero-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 6px; align-items: center; }
  .hero h1 { grid-column: 1 / -1; font-size: clamp(36px,4vw,46px); line-height: 1.15; margin-bottom: 8px; }
  .hero-desc { font-size: 16px; }
  .hero-stats { gap: 28px; margin-top: 36px; padding-top: 28px; }
  .stat-val { font-size: 26px; }
  .hero-card { padding: 20px; max-width: 360px; justify-self: end; margin-left: auto; }
  .hero-card .hero-card-label { margin-bottom: 12px; }
  .hero-card .hero-steps { gap: 8px; }
  .hero-card .hero-step  { padding: 9px 12px; font-size: 12.5px; }
  .actions-grid { grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
  .info-grid    { grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
}

/* ═══════════════════════════════════════
   PAGE COMMENT — styles spécifiques
═══════════════════════════════════════ */
/* stepper visuel */
.proc-wrap  { max-width: 1100px; margin: 0 auto; }
.how-stepper { display: flex; justify-content: center; margin: 0 auto 56px; max-width: 700px; }
.hst { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.hst:not(:last-child)::after { content: ''; position: absolute; top: 28px; left: calc(50% + 28px); width: calc(100% - 56px); height: 2px; background: var(--gris-b); }
.hst-c { width: 56px; height: 56px; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; z-index: 1; position: relative; box-shadow: 0 0 0 8px rgba(27,107,58,.1); }
.hst-l { font-size: 13px; font-weight: 700; color: var(--texte); margin-top: 12px; text-align: center; }
.hst-s { font-size: 12px; color: var(--texte-s); text-align: center; margin-top: 3px; }
/* cards étapes */
.steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.step-card  { background: var(--gris); border: 1.5px solid var(--gris-b); border-radius: 18px; padding: 28px; transition: box-shadow .2s, border-color .2s; }
.step-card:hover { box-shadow: var(--shadow); border-color: var(--vert); }
.step-card-n    { font-size: 11px; font-weight: 700; color: var(--vert); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.step-card-n i  { font-size: 18px; }
.step-card h3   { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.step-card p    { font-size: 14px; color: var(--texte-s); line-height: 1.7; }
.step-card ul   { font-size: 14px; color: var(--texte-s); padding-left: 18px; line-height: 1.8; margin-top: 8px; }
.step-note  { background: var(--or-l); border-left: 3px solid var(--or); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 13px; color: #854F0B; margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; }
.step-note i { flex-shrink: 0; margin-top: 1px; }
/* docs comparaison */
.docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.docs-col  { background: var(--blanc); border: 1.5px solid var(--gris-b); border-radius: 18px; padding: 28px; }
.docs-col-title { font-size: 15px; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; color: var(--texte); }
.docs-col-title i { color: var(--vert); font-size: 18px; }
.doc-li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gris-b); }
.doc-li:last-child { border-bottom: none; }
.doc-li-n  { width: 26px; height: 26px; border-radius: 7px; background: rgba(27,107,58,.1); color: var(--vert); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-li-text h5 { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.doc-li-text p  { font-size: 12px; color: var(--texte-s); margin: 0; }
/* légal */
.legal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
.legal-card { background: var(--blanc); border: 1.5px solid var(--gris-b); border-radius: 18px; padding: 26px 22px; }
.legal-card i { font-size: 28px; color: var(--vert); margin-bottom: 14px; display: block; }
.legal-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.legal-card p  { font-size: 13px; color: var(--texte-s); line-height: 1.65; margin: 0; }
.engag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.engag-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--texte-s); line-height: 1.55; }
.engag-list li i { color: var(--vert); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
/* CTA */
.cta-section { background: linear-gradient(135deg, var(--vert-d), var(--vert)); padding: 72px 24px; text-align: center; }
.cta-section h2 { font-size: clamp(22px,3vw,32px); font-weight: 800; color: white; margin-bottom: 12px; }
.cta-section p  { font-size: 16px; color: rgba(255,255,255,.8); margin-bottom: 32px; }
@media(max-width:900px){ .steps-grid{grid-template-columns:1fr;} .docs-grid{grid-template-columns:1fr;} .legal-grid{grid-template-columns:1fr;} .how-stepper{flex-wrap:wrap;gap:20px;} }

/* ═══════════════════════════════════════
   PAGE DEMANDE — styles spécifiques
═══════════════════════════════════════ */
.form-page { background: var(--gris); min-height: calc(100vh - 70px); padding: 40px 24px 80px; }
.form-wrap  { max-width: 800px; margin: 0 auto; }
.form-header { margin-bottom: 32px; }
.form-header h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.form-header p  { font-size: 14px; color: var(--texte-s); }
/* stepper */
.stepper { display: flex; margin-bottom: 32px; }
.st { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.st:not(:last-child)::after { content:''; position:absolute; top:18px; left:calc(50% + 22px); width:calc(100% - 44px); height:2px; background:var(--gris-b); z-index:0; }
.st.done:not(:last-child)::after { background: var(--vert); }
.st-c { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border:2px solid var(--gris-b); background:var(--blanc); color:var(--texte-s); z-index:1; position:relative; transition:all .25s; }
.st-c.act  { background:var(--vert); border-color:var(--vert); color:white; box-shadow:0 0 0 5px rgba(27,107,58,.12); }
.st-c.done { background:var(--vert); border-color:var(--vert); color:white; }
.st-l { font-size:11px; color:var(--texte-s); margin-top:8px; text-align:center; line-height:1.3; }
.st-l.act { color:var(--vert); font-weight:600; }
.progress-wrap { background:var(--gris-b); border-radius:50px; height:4px; margin-bottom:28px; overflow:hidden; }
.progress-bar  { height:100%; background:var(--vert); border-radius:50px; transition:width .35s; }
/* Stepper mobile : on ne garde que le libellé de l'étape active — les cercles
   et la barre de progression suffisent à se repérer sur petit écran. */
@media (max-width: 560px) {
  .stepper { margin-bottom: 20px; }
  .st-l { display: none; }
  .st-l.act { display: block; }
  .st-c { width: 32px; height: 32px; font-size: 12px; }
  .st:not(:last-child)::after { top: 16px; left: calc(50% + 20px); width: calc(100% - 40px); }
}
/* type toggle */
.type-toggle { display:flex; gap:10px; margin-bottom:24px; }
.type-btn { flex:1; padding:14px; border:2px solid var(--gris-b); border-radius:10px; background:var(--blanc); color:var(--texte-s); font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .15s; }
.type-btn.act { border-color:var(--vert); color:var(--vert); background:rgba(27,107,58,.05); }
/* docs upload */
.doc-list { display:flex; flex-direction:column; gap:10px; }
.doc-row  { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1.5px solid var(--gris-b); border-radius:10px; background:var(--blanc); transition:border-color .15s; flex-wrap:wrap; }
.doc-row.ok   { border-color:#8FBF6F; background:#F7FBF3; }
.doc-row.auto { border-color:#f0c060; background:var(--or-l); }
.doc-num { width:32px; height:32px; border-radius:9px; background:rgba(27,107,58,.1); color:var(--vert); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.doc-info { flex:1; min-width:180px; }
.doc-name { font-size:14px; font-weight:600; color:var(--texte); }
.doc-sub  { font-size:12px; color:var(--texte-s); }
.upload-btn { font-size:12px; padding:7px 14px; border:1.5px solid var(--gris-b); border-radius:7px; background:var(--blanc); color:var(--texte-s); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .15s; display:inline-flex; align-items:center; gap:5px; }
.upload-btn:hover { border-color:var(--vert); color:var(--vert); }
.doc-error { width:100%; font-size:12px; color:#A32D2D; padding-left:46px; }
/* paiement */
.pay-header { background:linear-gradient(135deg,var(--vert-d),var(--vert)); border-radius:16px; padding:28px; text-align:center; margin-bottom:24px; }
.pay-amt    { font-size:38px; font-weight:800; color:white; margin:6px 0; }
.pay-label  { font-size:13px; color:rgba(255,255,255,.7); }
/* recap */
.recap-block { margin-bottom:22px; }
.recap-title { font-size:11px; font-weight:700; color:var(--texte-s); text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.recap-title i { color:var(--vert); }
.recap-row  { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--gris-b); font-size:14px; }
.recap-row:last-child { border-bottom:none; }
.rc-label { color:var(--texte-s); }
.rc-val   { color:var(--texte); font-weight:600; text-align:right; max-width:60%; }
.decl-box { display:flex; align-items:flex-start; gap:12px; padding:16px; background:var(--gris); border-radius:10px; margin-top:20px; font-size:13px; color:var(--texte-s); line-height:1.6; border-left:3px solid var(--vert); }
.decl-box input { margin-top:3px; flex-shrink:0; accent-color:var(--vert); width:16px; height:16px; cursor:pointer; }
/* form nav */
.form-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.btn-prev { padding:11px 22px; border-radius:9px; border:1.5px solid var(--gris-b); background:var(--blanc); color:var(--texte); font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; transition:all .15s; }
.btn-prev:hover { border-color:var(--vert); color:var(--vert); }
.btn-next { padding:12px 28px; border-radius:9px; background:var(--vert); color:white; border:none; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background .15s,transform .1s; }
.btn-next:hover { background:var(--vert-d); transform:translateY(-1px); }
.btn-next:disabled { background:var(--gris-b); color:var(--texte-s); cursor:not-allowed; transform:none; }
/* success */
.success-wrap { text-align:center; padding:40px 24px; }
.success-icon { width:72px; height:72px; border-radius:50%; background:#EAF3DE; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:34px; color:#3B6D11; }
.num-dossier  { background:#E6F1FB; border:1.5px solid #B5D4F4; border-radius:16px; padding:20px; margin:24px 0; }
.nd-lbl { font-size:12px; color:#185FA5; font-weight:600; }
.nd-val { font-size:28px; font-weight:800; color:#0C447C; margin:6px 0; }
.note-box { background:var(--or-l); border-left:3px solid var(--or); border-radius:0 8px 8px 0; padding:10px 14px; font-size:13px; color:#854F0B; margin-bottom:18px; display:flex; gap:8px; align-items:flex-start; }
.note-box i { flex-shrink:0; margin-top:1px; }
/* erreurs */
.field-error { font-size:12px; color:#A32D2D; margin-top:5px; display:flex; align-items:center; gap:5px; }
.alert-danger-box { background:#FCEBEB; border:1.5px solid #E8B4B4; color:#A32D2D; border-radius:10px; padding:14px 18px; font-size:13px; margin-bottom:20px; }
.alert-danger-box ul { margin:0; padding-left:18px; }
/* vérification automatique */
.verif-input-wrap { position:relative; }
.verif-input-wrap input { padding-right: 42px; }
.verif-icon { position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:18px; line-height:1; }
.verif-feedback { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:8px; font-size:13px; margin-top:8px; }
.verif-feedback.ok  { background:#EAF3DE; color:#27500A; }
.verif-feedback.err { background:#FCEBEB; color:#A32D2D; }
.verif-spinner { width:18px; height:18px; border:2px solid var(--gris-b); border-top-color:var(--vert); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════
   PAGE SUIVI — styles spécifiques
═══════════════════════════════════════ */
.suivi-page { background: var(--gris); min-height: calc(100vh - 70px); padding: 52px 24px 80px; }
.suivi-wrap { max-width: 760px; margin: 0 auto; }
/* search card */
.search-card { background: var(--blanc); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow); margin-bottom: 28px; }
.search-card h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.search-card p  { font-size: 14px; color: var(--texte-s); margin-bottom: 24px; }
.search-row { display: flex; gap: 10px; }
.search-row input { flex: 1; padding: 13px 18px; border: 2px solid var(--gris-b); border-radius: 10px; font-size: 16px; outline: none; font-family: inherit; transition: border-color .15s; }
.search-row input:focus { border-color: var(--vert); }
.btn-search { padding: 13px 24px; border-radius: 10px; background: var(--vert); color: white; border: none; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .15s; white-space: nowrap; }
.btn-search:hover { background: var(--vert-d); }
/* result */
.result-card { background: var(--blanc); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow); }
.result-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gris-b); flex-wrap: wrap; gap: 14px; }
.dossier-info h2 { font-size: 22px; font-weight: 800; color: var(--texte); margin-bottom: 4px; }
.dossier-info p  { font-size: 13px; color: var(--texte-s); }
/* badge statut — palette par état */
.status-pill { padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.s-approuve   { background: #EAF3DE; color: #27500A; }
.s-encours    { background: #E6F1FB; color: #0C447C; }
.s-correction { background: #FDF3E0; color: #854F0B; }
.s-rejete     { background: #FCEBEB; color: #A32D2D; }
.s-brouillon  { background: #F4F6F8; color: #5A6472; }
/* ── sections thématiques ──
   chaque bloc : fond léger distinct + bordure gauche 4px + titre coloré */
.sec { border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; border-left: 4px solid transparent; }
.sec-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sec-demandeur { background: #F0F7FF; border-left-color: #185FA5; }
.sec-demandeur .sec-title { color: #185FA5; }
.sec-paiement  { background: #F0FBF4; border-left-color: var(--vert); }
.sec-paiement .sec-title { color: var(--vert); }
.sec-examens   { background: #FAFAFA; border-left-color: #6C757D; }
.sec-examens .sec-title { color: #5A6472; }
.sec-carte     { background: #FFF8E6; border-left-color: #F5A623; }
.sec-carte .sec-title { color: #B07A10; }
.sec-action    { background: #FFF3CD; border-left-color: #F5A623; }
.sec-action .sec-title { color: #854F0B; font-size: 13px; }
/* lignes de données — alternance légère */
.kv-rows .kv-row:nth-child(odd) { background: rgba(0,0,0,.02); }
.kv-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 6px; font-size: 14px; gap: 16px; }
.kv-l { color: var(--texte-s); flex-shrink: 0; }
.kv-v { font-weight: 600; color: var(--texte); text-align: right; word-break: break-word; }
.badge-paye { background: #EAF3DE; color: #27500A; border-radius: 50px; padding: 4px 12px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.badge-attente { background: #FDF3E0; color: #854F0B; border-radius: 50px; padding: 4px 12px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
/* examens — cards individuelles */
.examen-list { display: flex; flex-direction: column; gap: 12px; }
.examen-item { background: var(--blanc); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; gap: 14px; align-items: flex-start; }
.examen-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(108,117,125,.1); color: #5A6472; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.examen-body { flex: 1; min-width: 0; }
.examen-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.examen-num { background: rgba(108,117,125,.12); color: #5A6472; border-radius: 50px; padding: 3px 11px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.examen-date { font-size: 12px; color: var(--texte-s); display: inline-flex; align-items: center; gap: 5px; }
.examen-txt { font-size: 13px; color: var(--texte-s); line-height: 1.6; word-break: break-word; font-style: italic; }
/* carte professionnelle — scopé : .carte-num existe aussi sur l'accueil (aperçu hero) */
.suivi-page .carte-num { font-size: 24px; font-weight: 800; color: #B07A10; letter-spacing: .03em; margin: 4px 0 10px; font-family: inherit; }
/* info bar — 3 cards icônisées */
.info-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.info-bar-item { background: var(--gris); border-radius: 10px; padding: 14px 16px; border-left: 4px solid var(--vert); }
.info-bar-lbl { font-size: 11px; color: var(--texte-s); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.info-bar-lbl i { color: var(--vert); }
.info-bar-val { font-size: 14px; font-weight: 700; color: var(--texte); }
/* correction — lignes documents */
.cdoc-row  { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--gris-b); border-radius: 10px; background: var(--blanc); flex-wrap: wrap; margin-bottom: 10px; }
.cdoc-row.ok { border-color: #8FBF6F; background: #F7FBF3; }
.cdoc-num  { width: 32px; height: 32px; border-radius: 9px; background: rgba(27,107,58,.1); color: var(--vert); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cdoc-info { flex: 1; min-width: 180px; }
.cdoc-name { font-size: 14px; font-weight: 600; color: var(--texte); }
.cdoc-sub  { font-size: 12px; color: var(--texte-s); margin-top: 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdoc-error { width: 100%; font-size: 12px; color: #A32D2D; padding-left: 46px; }
/* .upload-btn : défini dans la section PAGE DEMANDE (partagé) */
/* empty state */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state i { font-size: 48px; color: var(--gris-b); margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.empty-state p  { font-size: 14px; color: var(--texte-s); }
@media(max-width:600px){ .info-bar{grid-template-columns:1fr 1fr;} .search-row{flex-direction:column;} }