/* ==========================================================================
   Design system de la refonte (22/10/2026) — accueil et pages métiers.
   Toutes les classes sont préfixées « ds- » : aucune collision avec style.css / mobile-app.css,
   les autres pages ne changent pas. Couleurs = palette du logo ; chaque univers de métiers pose
   --accent et --accent-soft sur son conteneur (voir includes/category_page.php).
   Propriétés logiques (inline-start/end) partout : le rendu arabe (RTL) suit sans règle à part.
   ========================================================================== */
:root {
  --ds-blue: #1152C8; --ds-blue-d: #0D43A6; --ds-cyan: #12B6D8; --ds-teal: #25E0C0; --ds-green: #17B14F; --ds-green-d: #129443; --ds-navy: #16224F;
  --ds-ink: #1E293B; --ds-ink-2: #475569; --ds-muted: #64748B; --ds-line: #E2E8F0; --ds-line-2: #EEF2F7; --ds-bg: #F8FAFC; --ds-wa: #25D366; --ds-star: #E59E1A;
  --ds-sh-1: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
  --ds-sh-2: 0 2px 4px rgba(15,23,42,.04), 0 16px 40px rgba(15,23,42,.10);
  --ds-display: 'Space Grotesk', 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif;
}
.ds { --accent: var(--ds-blue); --accent-soft: #EAF1FF; color: var(--ds-ink-2); background: var(--ds-bg); }
.ds h1, .ds h2, .ds h3, .ds h4 { font-family: var(--ds-display); color: var(--ds-ink); letter-spacing: -.02em; margin: 0; }
.ds a { text-decoration: none; }
.ds-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ds-illo { width: 100%; height: auto; display: block; }

/* ---------- boutons ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: .95rem; border: 1px solid transparent; font-family: inherit; cursor: pointer; white-space: nowrap; line-height: 1.2; transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s; }
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn-pri { background: var(--ds-blue); color: #fff; box-shadow: 0 6px 16px rgba(17,82,200,.24); } .ds-btn-pri:hover { background: var(--ds-blue-d); color: #fff; }
.ds-btn-sec { background: #fff; color: var(--ds-ink); border-color: var(--ds-line); } .ds-btn-sec:hover { border-color: #CBD5E1; color: var(--ds-ink); }
.ds-btn-acc { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(15,23,42,.14); } .ds-btn-acc:hover { color: #fff; filter: brightness(1.06); }
.ds-btn-go { background: var(--ds-green); color: #fff; } .ds-btn-go:hover { background: var(--ds-green-d); color: #fff; }
.ds-btn-sm { padding: 8px 13px; font-size: .84rem; border-radius: 10px; }

/* ---------- recherche ---------- */
.ds-search { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--ds-line); border-radius: 20px; padding: 8px; box-shadow: var(--ds-sh-2); margin: 0; }
.ds-search label { flex: 1; padding: 4px 14px; min-width: 0; display: block; cursor: text; margin: 0; }
.ds-search label + label { border-inline-start: 1px solid var(--ds-line); }
.ds-search small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ds-search input, .ds-search select { width: 100%; border: 0; outline: 0; padding: 2px 0; font: inherit; font-size: .98rem; color: var(--ds-ink); background: transparent; min-width: 0; }
.ds-search input::placeholder { color: #94A3B8; }
.ds-search .ds-job { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 800; border-radius: 10px; padding: 3px 10px; font-size: .9rem; margin-top: 2px; }
.ds-near { font-size: .86rem; font-weight: 700; color: var(--ds-blue); display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

/* ---------- puces, badges, repères ---------- */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--ds-line); font-size: .84rem; font-weight: 600; color: var(--ds-ink); transition: border-color .15s; }
.ds-chip:hover { border-color: var(--accent); color: var(--ds-ink); }
.ds-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ds-sq { display: inline-flex; gap: 3px; } .ds-sq i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.ds-sec { padding: 72px 0; }
.ds-sec-head { max-width: 680px; margin-bottom: 30px; }
.ds-sec-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; margin: 8px 0 8px; }
.ds-sec-head p { margin: 0; font-size: 1.04rem; }
.ds-center { text-align: center; margin-inline: auto; }
.ds-band { background: #fff; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }

/* ---------- accueil : héros ---------- */
.ds-hero { position: relative; overflow: hidden; background: radial-gradient(700px 360px at 85% 20%, #E7F6FB, transparent 70%), radial-gradient(600px 300px at 10% 0%, #EEF4FF, transparent 70%), #fff; border-bottom: 1px solid var(--ds-line); }
.ds-hero > .ds-wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; padding-top: 60px; padding-bottom: 64px; }
.ds-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.035em; margin: 16px 0; }
.ds-hero h1 .ds-who { display: block; font-size: .42em; letter-spacing: -.01em; color: var(--ds-muted); font-weight: 600; margin-bottom: 10px; }
.ds-hero h1 em { font-style: normal; color: var(--ds-blue); }
.ds-lede { font-size: 1.12rem; max-width: 560px; margin: 0 0 26px; line-height: 1.6; }
.ds-hint { margin: 12px 4px 0; font-size: .86rem; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--ds-muted); }
.ds-hint a { color: var(--ds-ink); font-weight: 600; }
.ds-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; max-width: 640px; }
.ds-door { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; border: 1px solid var(--ds-line); background: #fff; transition: border-color .15s, box-shadow .15s; }
.ds-door:hover { border-color: #BFD3F5; box-shadow: var(--ds-sh-1); }
.ds-door i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; flex: none; font-size: 1.1rem; }
.ds-door b { display: block; color: var(--ds-ink); font-size: .98rem; }
.ds-door small { font-size: .82rem; color: var(--ds-muted); line-height: 1.4; display: block; margin-top: 2px; }
.ds-stage { position: relative; }
.ds-float { position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--ds-sh-2); padding: 12px 14px; font-size: .8rem; border: 1px solid var(--ds-line-2); width: 240px; color: var(--ds-ink-2); animation: dsFloat 6s ease-in-out infinite; }
.ds-float b { color: var(--ds-ink); }
.ds-float-1 { inset-inline-start: -4%; bottom: -12%; } .ds-float-2 { inset-inline-end: -4%; top: -14%; animation-delay: 1.5s; }
@keyframes dsFloat { 50% { transform: translateY(-8px); } }
.ds-float .ds-row { display: flex; gap: 10px; align-items: center; }
.ds-float img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; flex: none; }
.ds-tag-sm { font-size: .68rem; color: var(--ds-muted); margin-top: 6px; display: block; }

/* ---------- accueil : univers ---------- */
.ds-unis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ds-uni { position: relative; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--ds-line-2); box-shadow: var(--ds-sh-1); overflow: hidden; transition: transform .2s, box-shadow .2s; min-height: 200px; display: flex; flex-direction: column; color: var(--ds-ink-2); }
.ds-uni:hover { transform: translateY(-3px); box-shadow: var(--ds-sh-2); color: var(--ds-ink-2); }
.ds-uni::after { content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 110px; height: 110px; border-radius: 30px; background: var(--accent-soft); transform: rotate(18deg); }
.ds-uni > * { position: relative; z-index: 1; }
.ds-uni .ds-pic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px; background: var(--accent-soft); }
.ds-uni .ds-pic svg { width: 40px; height: 40px; }
.ds-uni h3 { font-size: 1.1rem; margin-bottom: 6px; }
.ds-uni .ds-jobs { font-size: .84rem; color: var(--ds-muted); line-height: 1.5; }
.ds-uni .ds-jobs a { color: var(--ds-ink-2); } .ds-uni .ds-jobs a:hover { color: var(--accent); }
.ds-uni .ds-go { margin-top: auto; padding-top: 12px; font-size: .84rem; font-weight: 700; color: var(--accent); }

/* ---------- accueil : deux façons ---------- */
.ds-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ds-way { padding: 28px; border-radius: 26px; border: 1px solid var(--ds-line-2); background: #fff; box-shadow: var(--ds-sh-1); }
.ds-way .ds-tag { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ds-way h3 { font-size: 1.45rem; margin: 6px 0 16px; }
.ds-step { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ds-line-2); }
.ds-step .ds-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; font-size: .85rem; }
.ds-step b { color: var(--ds-ink); display: block; } .ds-step span { font-size: .88rem; }
.ds-way .ds-btn { margin-top: 14px; }

.ds-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ds-why > div { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--ds-line-2); }
.ds-why i { font-style: normal; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 12px; }
.ds-why b { color: var(--ds-ink); display: block; font-size: 1rem; margin-bottom: 4px; } .ds-why span { font-size: .86rem; }

.ds-join { position: relative; overflow: hidden; border-radius: 30px; background: var(--ds-navy); color: rgba(255,255,255,.8); padding: 44px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
.ds-join h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; margin: 8px 0 10px; }
.ds-join .ds-mos { position: absolute; inset-inline-end: 30px; top: 24px; width: 110px; opacity: .9; } .ds-join .ds-mos svg { width: 100%; height: auto; display: block; }
.ds-join ul { list-style: none; margin: 0; padding: 0; } .ds-join li { padding: 7px 0; }
.ds-join li::before { content: "✓"; color: var(--ds-teal); font-weight: 800; margin-inline-end: 10px; }

/* ---------- page métier ---------- */
.ds-chero { position: relative; overflow: hidden; border-bottom: 1px solid var(--ds-line); }
.ds-tone-light .ds-chero { background: radial-gradient(circle at 1px 1px, rgba(17,82,200,.09) 1px, transparent 0) 0 0 / 20px 20px, linear-gradient(180deg, var(--accent-soft), #fff 85%); }
.ds-tone-airy .ds-chero { background: radial-gradient(520px 320px at 88% 30%, var(--accent-soft), transparent 70%), radial-gradient(360px 260px at 8% 90%, #EEF9FF, transparent 70%), #fff; }
.ds-tone-dark .ds-chero { background: radial-gradient(600px 340px at 85% 25%, rgba(124,58,237,.35), transparent 70%), linear-gradient(135deg, #16224F, #1D1846); border-bottom: 0; }
.ds-tone-dark .ds-chero h1, .ds-tone-dark .ds-crumbs, .ds-tone-dark .ds-crumbs a, .ds-tone-dark .ds-chero .ds-lede { color: #fff; }
.ds-tone-dark .ds-chero .ds-lede { opacity: .85; } .ds-tone-dark .ds-crumbs { opacity: .75; }
.ds-tone-dark .ds-chero .ds-eyebrow, .ds-tone-dark .ds-chero h1 em, .ds-tone-dark .ds-hero-acts .ds-near { color: #C4B5FD; }
.ds-tone-dark .ds-chero .share-label { color: #fff; }
.ds-chero > .ds-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 30px; padding-bottom: 56px; }
.ds-crumbs { font-size: .82rem; color: var(--ds-muted); margin-bottom: 18px; }
.ds-crumbs a { color: var(--ds-muted); }
.ds-chero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.035em; margin: 14px 0; }
.ds-chero h1 em { font-style: normal; color: var(--accent); }
.ds-illo-panel { position: relative; border-radius: 32px; background: #fff; padding: 22px; box-shadow: var(--ds-sh-2); border: 1px solid var(--ds-line-2); }
.ds-illo-panel .ds-lbl { position: absolute; inset-inline-start: 22px; bottom: 18px; font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 12px; }
.ds-hero-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.ds-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ds-svc a { display: block; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ds-line-2); box-shadow: var(--ds-sh-1); transition: transform .2s, border-color .2s; color: var(--ds-ink); font-weight: 700; }
.ds-svc a:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--ds-ink); }
.ds-svc i { font-style: normal; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 12px; }
.ds-svc small { display: block; font-weight: 500; font-size: .82rem; color: var(--ds-muted); margin-top: 2px; }
.ds-flow { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.ds-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds-steps3 > div { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--ds-line-2); }
.ds-steps3 .ds-n { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 12px; }
.ds-steps3 b { display: block; color: var(--ds-ink); margin-bottom: 4px; } .ds-steps3 span { font-size: .86rem; }
.ds-need { border-radius: 24px; padding: 24px; background: var(--accent); color: rgba(255,255,255,.9); position: relative; overflow: hidden; }
.ds-need h3 { color: #fff; font-size: 1.35rem; margin: 6px 0 8px; } .ds-need p { margin: 0 0 18px; font-size: .92rem; }
.ds-need .ds-eyebrow { color: rgba(255,255,255,.85); }
.ds-need .ds-btn { background: #fff; color: var(--accent); }
.ds-need .ds-mos { position: absolute; inset-inline-end: -6px; bottom: -6px; width: 80px; opacity: .45; } .ds-need .ds-mos svg { width: 100%; height: auto; display: block; }
.ds-why3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds-why3 > div { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: var(--accent-soft); }
.ds-why3 i { font-style: normal; font-size: 1.4rem; } .ds-why3 b { display: block; color: var(--ds-ink); } .ds-why3 span { font-size: .86rem; }
.ds-faq details { background: #fff; border: 1px solid var(--ds-line-2); border-radius: 16px; padding: 16px 18px; margin-bottom: 10px; }
.ds-faq summary { cursor: pointer; font-weight: 700; color: var(--ds-ink); }
.ds-faq p { margin: 10px 0 0; font-size: .92rem; }
.ds-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.ds-cities { display: flex; flex-wrap: wrap; gap: 8px; }

/* apparition douce au défilement */
.ds-rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.ds-rv.ds-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ds-rv { opacity: 1; transform: none; transition: none; } .ds-float { animation: none; } .ds-btn, .ds-uni, .ds-svc a { transition: none; } }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .ds-wrap { padding: 0 16px; }
  .ds-sec { padding: 44px 0; }
  .ds-search { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 10px; }
  .ds-search label { padding: 8px 10px; } .ds-search label + label { border-inline-start: 0; border-top: 1px solid var(--ds-line); }
  .ds-search .ds-btn { width: 100%; padding: 14px; }
  .ds-hero > .ds-wrap, .ds-chero > .ds-wrap { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 32px; gap: 18px; }
  .ds-stage { order: -1; max-width: 210px; } .ds-float { display: none; }
  .ds-lede { font-size: 1rem; }
  .ds-doors, .ds-ways, .ds-flow, .ds-steps3, .ds-why3, .ds-2col { grid-template-columns: 1fr; }
  .ds-unis { grid-template-columns: 1fr 1fr; gap: 10px; } .ds-uni { min-height: 0; padding: 16px; } .ds-uni .ds-jobs { display: none; }
  .ds-why { grid-template-columns: 1fr 1fr; }
  .ds-join { grid-template-columns: 1fr; padding: 28px 22px; } .ds-join .ds-mos { width: 70px; inset-inline-end: 14px; top: 14px; opacity: .5; }
  .ds-illo-panel { order: -1; padding: 8px; border-radius: 20px; max-width: 200px; } .ds-illo-panel .ds-lbl { display: none; }
  .ds-svc { grid-template-columns: 1fr 1fr; gap: 10px; } .ds-svc a { padding: 14px; } .ds-svc small { display: none; }
}
/* Gabarit mobile : les blocs pleine largeur annulent la marge de .m-screen. */
.m-screen .ds-bleed { margin-inline: -16px; }